:root { color-scheme: dark; --night: #08090c; --ivory: #e4e0d6; --gold: #e9b77d; --edge: clamp(18px, 3vw, 42px); }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: var(--night); }
body { overflow: hidden; overscroll-behavior: none; }
main { position: relative; width: 100%; height: 100svh; min-height: 240px; isolation: isolate; }
canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
canvas:active { cursor: grabbing; }
canvas:focus-visible { outline: none; box-shadow: inset 0 0 0 1px #e9b77d77; }
button { appearance: none; border: 0; padding: 0; background: transparent; color: var(--ivory); display: grid; place-items: center; cursor: pointer; border-radius: 50%; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: opacity .3s, color .3s, transform .35s; }
button svg { width: 30px; height: 30px; display: block; fill: none; stroke: currentColor; stroke-width: .9; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
button .solid { fill: currentColor; stroke: none; }
button:focus-visible { outline: 1px solid var(--gold); outline-offset: 5px; opacity: 1; }
button:active { transform: scale(.92); }
.corner { z-index: 2; position: absolute; top: max(var(--edge), env(safe-area-inset-top)); width: 44px; height: 44px; opacity: .73; }
.home { left: max(var(--edge), env(safe-area-inset-left)); }
.motion { right: max(var(--edge), env(safe-area-inset-right)); }
.corner svg { width: 34px; height: 34px; }
.motion .play { display: none; }
.motion[aria-pressed="true"] .pause { display: none; }
.motion[aria-pressed="true"] .play { display: block; }
.forms { z-index: 2; position: absolute; bottom: max(7.2svh, calc(env(safe-area-inset-bottom) + 23px)); left: 50%; transform: translateX(-50%); display: flex; gap: clamp(20px, 3.5vw, 52px); }
.form { position: relative; width: 46px; height: 46px; opacity: .43; }
.form svg { width: 28px; height: 28px; stroke-width: 1; }
.form::after { content: ""; position: absolute; bottom: -8px; left: calc(50% - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--gold); opacity: 0; transform: scale(.4); transition: opacity .35s, transform .35s; }
.form[aria-pressed="true"] { opacity: .94; }
.form[aria-pressed="true"]::after { opacity: 1; transform: scale(1); }
@media (hover: hover) { button:hover { opacity: 1; color: var(--gold); } }
@media (max-width: 600px) { .forms { gap: 24px; bottom: max(9svh, calc(env(safe-area-inset-bottom) + 27px)); } .form svg { width: 26px; height: 26px; } }
@media (max-height: 440px) { .corner { top: 10px; } .forms { bottom: max(20px, env(safe-area-inset-bottom)); gap: 24px; } .form { width: 44px; height: 38px; } .form svg { width: 23px; height: 23px; } }
@media (prefers-reduced-motion: reduce) { button, .form::after { transition: none; } }