:root{--ink: #fffaf0;--ink-soft: rgb(255 250 240 / .7);--glass: rgb(10 30 38 / .28);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0d2a33;color:var(--ink);font:15px/1.4 ui-rounded,SF Pro Rounded,system-ui,sans-serif;-webkit-font-smoothing:antialiased}#bg{position:fixed;inset:-3%;background:#0d2a33 url(/img/oahu.jpg) 24% 60% / cover no-repeat;filter:brightness(.78) saturate(1);animation:drift 90s ease-in-out infinite alternate}@keyframes drift{0%{transform:scale(1) translate(0)}to{transform:scale(1.05) translate(-1%,.5%)}}#shade{position:fixed;inset:0;background:radial-gradient(circle at 50% 48%,rgb(255 214 150 / .1),transparent 36%),radial-gradient(ellipse at center,transparent 45%,rgb(0 12 18 / .55) 100%)}#scene{position:fixed;inset:0;width:100%;height:100%;filter:drop-shadow(0 28px 36px rgb(0 18 24 / .45))}footer{position:fixed;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;padding:20px max(16px,3vw) max(20px,env(safe-area-inset-bottom))}.name{font-weight:700;font-size:18px;letter-spacing:.02em;color:var(--ink-soft)}#credits{position:absolute;left:50%;transform:translate(-50%);font-size:11px;color:#fffaf061;white-space:nowrap}@media(max-width:560px){#credits{bottom:4px}}#sound{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgb(255 255 255 / .18);border-radius:999px;background:var(--glass);color:var(--ink);font:inherit;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .3s}#sound:hover{background:#0a1e2673}#sound:focus-visible{outline:2px solid var(--ink);outline-offset:3px}#sound svg{width:20px;height:20px}#sound[aria-pressed=true] svg{animation:bob 3s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-2px)}}@media(prefers-reduced-motion:reduce){#bg,#sound svg{animation:none!important}}