:root{color-scheme:dark;font-family:"Gill Sans","Gill Sans MT",Calibri,sans-serif;font-synthesis:none;background:#0b1010;color:#e7e6dc}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100svh;background:radial-gradient(ellipse at 50% 46%,#253a342b,transparent 58%),#0b1010}
main{width:min(100% - 48px,440px);min-height:100svh;margin:auto;padding:28px 0;display:grid;place-items:center}
.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}
.puzzle-entry{width:100%;display:grid;justify-items:center;align-content:center;gap:22px;min-height:min(78svh,600px)}
.ring-puzzle{position:relative;width:min(82vw,360px);aspect-ratio:1;isolation:isolate}
button.ring-control{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;padding:0;margin:0;border:0;border-radius:50%;background:transparent;pointer-events:none;outline:none}
.ring-control svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
.ring-control g{transition:transform .55s cubic-bezier(.2,.72,.2,1)}
.ring-control.outer{color:#879d90}
.ring-control.middle{color:#6d8791}
.ring-control.inner{color:#c1b89b}
.ring-hit{fill:none;stroke:transparent;stroke-width:23;pointer-events:stroke;cursor:pointer}
.ring-guide{fill:none;stroke:#b1bfa70d;stroke-width:1}
.ring-arc{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.ring-control:hover .ring-arc,.ring-control:focus-visible .ring-arc{stroke-width:2.2;filter:drop-shadow(0 0 6px currentColor)}
.ring-control:focus-visible .ring-guide{stroke:#d1d9c84d;stroke-dasharray:2 8}
.alignment-mark{position:absolute;top:5.7%;left:calc(50% - 1.5px);width:3px;height:3px;border-radius:50%;background:#c0c9b5;box-shadow:0 0 12px #b8c8ad66;pointer-events:none}
.puzzle-core{position:absolute;top:calc(50% - 3px);left:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:#c9c7ae;box-shadow:0 0 18px #bac9ac2e,0 0 58px 20px #bbc6a807;pointer-events:none}
a{color:inherit;text-underline-offset:5px}
.auth-panel{width:100%;padding:20px 0 44px}
h1{font-size:clamp(48px,10vw,68px);line-height:1.04;letter-spacing:-.045em;font-weight:300;margin:0 0 34px}
h1 em{font-weight:300}
label{display:block;font-size:16px;margin:22px 0 9px;color:#c1cbc0}
input{width:100%;min-height:54px;padding:13px 14px;border:1px solid #718577;border-radius:7px;font:inherit;font-size:18px;background:#141f1b;color:#ecede2}
button{display:flex;align-items:center;justify-content:space-between;gap:28px;width:100%;min-height:54px;margin-top:22px;padding:14px 18px;border:1px solid #c4d7c5;border-radius:7px;background:#b8cbbc;color:#17231e;font:inherit;font-size:17px;cursor:pointer}
button:hover{background:#cedbcd}
button:disabled{opacity:.55;cursor:wait}
button.secondary{background:transparent;border-color:#718577;color:#d1ddce;font-size:16px;margin:16px 0 28px;justify-content:center}
button.secondary:hover{background:#24382d}
button.entry-open,button.entry-return{width:48px;min-height:48px;padding:12px;justify-content:center;gap:0;border:1px solid #a7b9a92b;border-radius:50%;background:transparent;color:#96a99b}
button.entry-open{margin:0;opacity:.7}
button.entry-return{margin:0 0 28px}
.entry-open svg,.entry-return svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
button.entry-open:hover,button.entry-return:hover{background:#b6c5af0c;border-color:#a7b9a95c;color:#d7dfcd;opacity:1}
summary{cursor:pointer;padding:20px 0;color:#b6c8ba;font-size:16px;min-height:44px}
details{border-top:1px solid #bfccba26;margin-top:30px}
.hint,.footnote{font-size:14px;line-height:1.5;color:#a0b0a3;margin:10px 0 0}
.footnote{margin-top:28px;font-size:13px}
#status{min-height:1.5em;font-size:16px;line-height:1.4;color:#c7dccb;margin:22px 0 0}
#status[data-error=true]{color:#e9bba6}
:focus-visible{outline:3px solid #a6cbb9;outline-offset:5px}
@media(max-width:400px){main{width:calc(100% - 40px);padding:20px 0}h1{margin-bottom:28px}.puzzle-entry{gap:12px}}
@media(prefers-reduced-motion:reduce){.ring-control g{transition:none}}
@media(forced-colors:active){body{background:Canvas}.ring-control{color:ButtonText!important}.ring-guide{stroke:GrayText}.ring-arc{stroke:ButtonText}.puzzle-core,.alignment-mark{background:ButtonText;box-shadow:none}input,button{border-color:ButtonText}}