:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#100925;color:#fff6e5}*{box-sizing:border-box}html,body,main{margin:0;width:100%;height:100%;overflow:hidden}main{position:relative;isolation:isolate}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;background:radial-gradient(ellipse at 70% 35%,#db5842,#53265b 45%,#100925 80%)}.wordmark{position:absolute;left:4.5%;top:max(34px,env(safe-area-inset-top));z-index:2;display:flex;align-items:center;gap:10px;font-size:30px;font-weight:900;letter-spacing:-1.8px;pointer-events:none;user-select:none;will-change:transform}.wordmark img{width:30px;height:30px}footer{position:absolute;right:4.5%;bottom:max(28px,env(safe-area-inset-bottom));z-index:2}.controls{display:flex;gap:8px}button{appearance:none;background:#180a2540;border:1px solid #fff3db33;color:#fff6e5;height:38px;min-width:40px;padding:0 12px;font-size:17px;border-radius:3px;cursor:pointer;backdrop-filter:blur(6px)}button:hover,button:focus-visible{background:#fff3db20;border-color:#fff3dbb0;outline:2px solid transparent}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.15;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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.55' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 55% 45%,transparent 35%,#0806197a 100%),linear-gradient(0deg,#0d07155c,transparent 30%)}@media(max-width:600px){.wordmark{top:max(24px,env(safe-area-inset-top));font-size:25px}.wordmark img{width:25px;height:25px}footer{bottom:max(22px,env(safe-area-inset-bottom))}.controls{gap:6px}button{height:34px;padding:0 10px}}@media(prefers-reduced-motion:reduce){.grain{opacity:.06}}

#lens,.detail-lens{position:absolute;inset:0;pointer-events:none;background:none;image-rendering:auto}#sound[aria-pressed="false"]{opacity:.6}#sound[aria-pressed="true"]{border-color:#b6ffe0aa;color:#b6ffe0}

[hidden]{display:none!important}#world:focus{outline:none}.controls{align-items:center}
#volume{--angle:-48.6deg;--level:86.4deg;position:relative;width:42px;height:42px;border-radius:50%;background:conic-gradient(from 225deg,#b7ffdc var(--level),#ffffff20 var(--level),#ffffff20 270deg,transparent 270deg);padding:3px;cursor:ns-resize;touch-action:none;outline:none}#volume:focus-visible{box-shadow:0 0 0 2px #fff7df}.dial-face{display:block;position:relative;width:100%;height:100%;border:1px solid #d3c4f36b;border-radius:50%;background:radial-gradient(circle at 35% 28%,#777189,#292237 55%,#120a21);box-shadow:inset 0 1px 3px #ffffff30,0 2px 8px #0008;transform:rotate(var(--angle))}.dial-face i{position:absolute;left:calc(50% - 1px);top:4px;width:2px;height:10px;border-radius:2px;background:#eaffdf;box-shadow:0 0 5px #b4ffe7}
#entry-shade{position:fixed;inset:0;z-index:4;background:#03020c;opacity:.72;animation:breathe-dark 6s ease-in-out infinite;transition:opacity .85s ease;pointer-events:auto}#entry-shade.clearing{animation:none;opacity:0;pointer-events:none}#entry{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:35px;color:#fff5dc;pointer-events:none}#entry h1{font:400 clamp(36px,5.5vw,72px)/1.1 Georgia,serif;letter-spacing:.015em;margin:0;text-shadow:0 0 30px #e4b2ff65}.entry-choices{display:flex;gap:28px;pointer-events:auto}.entry-choices button{width:72px;height:65px;font-size:30px;border-radius:50%;border-color:#e7d6f860;background:#1e1328aa;transition:transform .2s,background .2s}.entry-choices button:hover,.entry-choices button:focus-visible{transform:translateY(-3px);background:#63396880;outline:2px solid #eadabcaa}
#tv-static{position:fixed;inset:0;z-index:8;background:#101114}#tv-noise{width:100%;height:100%;background:none;image-rendering:pixelated}.scanlines{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(transparent 0 2px,#0005 3px 4px)}#return-entry{position:absolute;right:24px;top:24px;z-index:1;background:#080808bd;border-radius:50%;width:45px;height:45px;font-size:25px}
@keyframes breathe-dark{0%,100%{opacity:.76}50%{opacity:.54}}@media(prefers-reduced-motion:reduce){#entry-shade{animation:none}.entry-choices button{transition:none}}

#world{touch-action:manipulation}