:root{color-scheme:dark;--background:#0b100e;--ink:#eeeade;--accent:#d9a47b}
*{box-sizing:border-box}
html{background:var(--background)}
body{margin:0;min-width:280px;min-height:100svh;color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:1px solid var(--accent);outline-offset:6px}
.atmosphere{position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,#23352c55,transparent 63%)}
.atmosphere:after{content:"";position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.87' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='white' filter='url(%23n)' opacity='.6' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
header{position:absolute;z-index:2;inset:0 0 auto;display:flex;justify-content:space-between;align-items:center;padding:28px 4.5vw;pointer-events:none}
h1{font-weight:400;font-size:34px;margin:0;line-height:1}
.wordmark{display:flex;align-items:center;gap:12px;font-family:Georgia,'Times New Roman',serif;letter-spacing:-1.6px;pointer-events:auto}
.wordmark svg{width:.8em;height:.8em;fill:var(--ink);stroke:var(--ink);stroke-width:.65}
.wordmark path{fill:none;opacity:.65}
main{position:relative;height:100svh;min-height:420px}
canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y}
canvas:active{cursor:grabbing}
canvas:focus-visible{outline:0;box-shadow:inset 0 0 0 1px #d9a47b66}
footer{position:absolute;inset:auto 20px 7svh;pointer-events:none;text-align:center}
footer p{margin:0;font-family:Georgia,'Times New Roman',serif;font-size:clamp(17px,1.8vw,26px);font-weight:400;letter-spacing:-.025em;color:#c9cec0;line-height:1.5}
#motion{display:grid;place-items:center;width:44px;height:44px;border:1px solid #c3cbb12b;border-radius:50%;background:transparent;color:#a4afa3;pointer-events:auto;transition:color .2s,border-color .2s}
#motion:hover{color:var(--ink);border-color:#c3cbb16b}
#motion svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.2;fill:none}
#motion .play-icon{display:none}
#motion[aria-pressed=true] .play-icon{display:block}
#motion[aria-pressed=true] .pause-icon{display:none}
@media(max-width:600px){header{padding:20px 23px}h1{font-size:31px}footer{bottom:9svh}footer p{font-size:19px}}
@media(max-height:480px){header{padding-top:14px}footer{bottom:24px}main{min-height:320px}}
@media(prefers-reduced-motion:no-preference){header,footer{animation:arrive 1.4s ease-out both}@keyframes arrive{from{opacity:0}to{opacity:1}}}