@font-face{font-family:Funnel Sans;src:url('../fonts/funnel-sans.woff2') format('woff2');font-display:swap}
:root{color-scheme:light;background:#fcfdf9;color:#28483e;font-family:Funnel Sans,system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;width:100%}
body{overflow-x:clip}
main{min-height:100svh;display:grid;place-items:center;position:relative}
.painting{width:100%;max-width:calc(100svh * 1.6);aspect-ratio:8/5;margin:0;position:relative}
canvas{width:100%;height:100%;display:block}
.painting[data-preparing-still] canvas{visibility:hidden}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.motion-control{position:fixed;left:20px;bottom:20px;min-height:44px;max-width:calc(100vw - 40px);padding:10px 18px;border:1px solid #456257;border-radius:24px;background:#fcfdf9;color:#28483e;font:inherit;cursor:pointer;touch-action:manipulation}
.motion-control:focus-visible{outline:3px solid #476e8b;outline-offset:4px}
.home-link{position:absolute;z-index:1;top:max(20px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border:1px solid #456257;border-radius:24px;background:#fcfdf9;color:inherit;text-underline-offset:4px;text-decoration-thickness:1px;touch-action:manipulation}
.home-link:focus-visible{outline:3px solid #476e8b;outline-offset:4px}
@media(hover:hover){.motion-control:hover{background:#e8eee4}}
@media(prefers-reduced-motion:no-preference){.motion-control{transition:background-color 150ms ease-out,scale 150ms ease-out}.motion-control:active{scale:.96}}
.fallback{position:absolute;inset:auto 24px;max-width:34rem;text-align:center;line-height:1.6}
.fallback[hidden]{display:none}