*{box-sizing:border-box} :root{color-scheme:dark;--metal:188,173,139;--accent:126,157,173;--size:min(72svh,66vw,740px)}
html,body{margin:0;min-height:100%;background:#050709}body{overflow:hidden;color:#cbbf9f}button{-webkit-tap-highlight-color:transparent}main{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 48%,#10191e 0%,#080d11 35%,#050709 72%)}
#firmament{position:absolute;inset:0;width:100%;height:100%;opacity:.8;pointer-events:none}.haze{position:absolute;inset:-30%;pointer-events:none;background:radial-gradient(ellipse at 49% 48%,rgba(var(--accent),.085),transparent 39%);transition:background 2s;animation:breathe 14s ease-in-out infinite}
.frame{position:absolute;inset:25px;border:1px solid rgba(var(--metal),.12);pointer-events:none}.frame i{position:absolute;width:24px;height:24px;border-color:rgba(var(--metal),.6);border-style:solid}.frame i:nth-child(1){top:-1px;left:-1px;border-width:1px 0 0 1px}.frame i:nth-child(2){top:-1px;right:-1px;border-width:1px 1px 0 0}.frame i:nth-child(3){bottom:-1px;right:-1px;border-width:0 1px 1px 0}.frame i:nth-child(4){bottom:-1px;left:-1px;border-width:0 0 1px 1px}
.crown{position:absolute;top:5.5svh;left:50%;transform:translateX(-50%);font-size:23px;color:rgba(var(--metal),.65)}
.instrument{position:absolute;width:var(--size);height:var(--size);left:50%;top:49%;transform:translate(-50%,-50%)}
.orbit{position:absolute;inset:9%;border:1px solid rgba(var(--metal),.19);border-radius:50%;pointer-events:none;transition:border-color 2s,transform 3s}.orbit-outer{inset:0;border-style:dotted;border-color:rgba(var(--metal),.28);animation:revolve 180s linear infinite}.orbit-outer:before,.orbit-outer:after{content:"";position:absolute;inset:2%;border:1px solid rgba(var(--metal),.085);border-radius:50%}.orbit-outer:after{inset:5%}.orbit-inner{inset:19%;border-color:rgba(var(--metal),.12)}.orbit-ecliptic{inset:14%;transform:rotate(-35deg) scaleY(.42);border-color:rgba(var(--metal),.2)}
.meridian{position:absolute;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(var(--metal),.18),transparent);left:8%;top:50%;height:1px;width:84%}.vertical{transform:rotate(90deg)}
.core{position:absolute;inset:29%;display:grid;place-items:center;transition:transform 2s}.halo{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 35deg,transparent 5%,rgba(var(--metal),.2),rgba(var(--metal),.85) 25%,transparent 39%,rgba(var(--accent),.5) 75%,transparent 91%);box-shadow:0 0 65px 9px rgba(var(--accent),.075);animation:revolve 70s linear infinite;transition:filter 2s,opacity 2s}.void{position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#0c1115,#030506 75%);box-shadow:inset 3px 4px 22px #000,0 0 22px #030608}
.sigil{position:absolute;z-index:3;width:19%;height:19%;border:0;border-radius:50%;background:radial-gradient(circle,#080d10 48%,rgba(6,10,13,.95) 60%,transparent 74%);padding:3.1%;cursor:pointer;transform:translate(-50%,-50%);transition:filter .7s,background .7s;touch-action:manipulation}.north{top:9%;left:50%}.east{top:50%;left:91%}.south{top:91%;left:50%}.west{top:50%;left:9%}
.glyph{mask-image:radial-gradient(ellipse,#000 58%,transparent 73%);display:block;width:100%;height:100%;background-image:url('/assets/symbols.png');background-size:220% 250%;filter:invert(1) sepia(.22);mix-blend-mode:screen;opacity:.63;transition:opacity .5s,transform .6s,filter .6s}.glyph-0{background-size:224% 230%;background-position:8% 0%}.glyph-1{background-size:224% 230%;background-position:94% 0%}.glyph-2{background-size:224% 270%;background-position:8% 68%}.glyph-3{background-size:224% 270%;background-position:94% 68%}
.sigil:hover .glyph,.sigil:focus-visible .glyph{opacity:1;transform:scale(1.09)}.sigil:focus-visible{outline:1px solid #d5c8a3;outline-offset:6px}.sigil[aria-pressed=true] .glyph{opacity:1;filter:invert(1) sepia(.55) saturate(1.3);transform:scale(1.04)}.sigil[aria-pressed=true]{filter:drop-shadow(0 0 12px rgba(var(--metal),.3))}.satellite{position:absolute;bottom:8%;left:calc(50% - 2px);width:4px;height:4px;border:1px solid rgba(var(--metal),.4);border-radius:50%;transition:background .6s,box-shadow .6s}.sigil[aria-pressed=true] .satellite{background:#d7c695;box-shadow:0 0 10px #d7c695}
.relic{position:absolute;inset:24%;border-radius:50%;overflow:hidden;opacity:0;transform:scale(.75);transition:opacity 3s,transform 5s;pointer-events:none;mask-image:radial-gradient(circle,#000 62%,transparent 73%)}.relic img{position:absolute;width:100%;max-width:none;left:0;top:0;filter:brightness(.95)}
.witness{position:absolute;bottom:8svh;left:50%;transform:translateX(-50%);display:flex;gap:20px}.witness i{width:4px;height:4px;border:1px solid rgba(var(--metal),.4);transform:rotate(45deg);transition:background 1s,box-shadow 1s}.witness i.active{background:#cabb97;box-shadow:0 0 10px rgba(var(--metal),.7)}
.motion-control,.reset{position:absolute;bottom:max(39px,env(safe-area-inset-bottom));width:44px;height:44px;border:0;background:transparent;color:#847f73;cursor:pointer;border-radius:50%;transition:color .3s}.motion-control{right:40px}.reset{left:40px}.motion-control:hover,.reset:hover{color:#eee2c3}.motion-control:focus-visible,.reset:focus-visible{outline:1px solid #d5c8a3}.motion-control svg,.reset svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2}.play-icon{display:none}body.paused .pause-icon{display:none}body.paused .play-icon{display:block}
body[data-phase="1"]{--accent:132,165,170}body[data-phase="2"]{--accent:101,133,174}body[data-phase="3"]{--accent:176,142,104}body[data-phase="4"]{--accent:199,183,137}body[data-phase="1"] .core{transform:scale(1.06)}body[data-phase="2"] .core{transform:scale(1.12)}body[data-phase="3"] .core{transform:scale(1.18)}body[data-phase="4"] .core{transform:scale(1.35)}body[data-phase="4"] .halo{filter:brightness(1.7);opacity:.6}body[data-phase="4"] .relic{opacity:1;transform:scale(1)}body[data-phase="4"] .orbit{border-color:rgba(var(--metal),.35)}
body.paused *,body.paused *:before,body.paused *:after{animation-play-state:paused!important;transition-duration:0s!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes revolve{to{transform:rotate(360deg)}}@keyframes breathe{50%{opacity:.4;transform:scale(1.08)}}
@media(max-width:650px){:root{--size:min(88vw,66svh)}.frame{inset:14px}.crown{top:8svh}.instrument{top:48%}.sigil{width:23%;height:23%;padding:3.5%}.north{top:8%}.east{left:92%}.south{top:92%}.west{left:8%}.witness{bottom:14svh}.motion-control{right:21px;bottom:24px}.reset{left:21px;bottom:24px}.orbit-outer{inset:0}.relic{inset:23%}}
@media(max-height:480px) and (min-width:651px){:root{--size:75svh}.crown{top:4svh}.witness{bottom:5svh}.frame{inset:12px}}
.core .relic{inset:2px;transform:scale(.92);mask-image:none;transition:opacity 2.5s,transform 2.5s}
.core .relic img{width:125%;left:-12.5%;top:-12.5%}
.echoes{position:absolute;inset:2px;border-radius:50%;overflow:hidden;pointer-events:none}
.echoes .echo{position:absolute;width:39%;height:39%;opacity:0;transform:scale(.82);transition:opacity 1.6s,transform 2s;filter:invert(1) sepia(.3)}
.echo-0{top:7%;left:30.5%}.echo-1{top:30.5%;right:4%}.echo-2{bottom:7%;left:30.5%}.echo-3{top:30.5%;left:4%}
.echoes .echo.awake{opacity:.035;transform:scale(1)}
body[data-phase="4"] .echoes .echo{opacity:0}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:0s!important}}





.sound-control{position:fixed;z-index:10;right:92px;bottom:max(39px,env(safe-area-inset-bottom));width:44px;height:44px;padding:12px;border:0;border-radius:50%;background:transparent;color:#847f73;cursor:pointer}.sound-control svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.2}.sound-control:hover{color:#eee2c3}.sound-control:focus-visible{outline:1px solid #d5c8a3}.sound-waves{display:none}.sound-control.playing .sound-waves{display:block}.sound-control.playing .sound-off{display:none}@media(max-width:650px){.sound-control{right:73px;bottom:24px}}