:root{--ink:#e9dfcf;--ink-dim:#e9dfcf9e;--amber:#e7a35c;--night:#06090a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{background:var(--night);height:100%;color:var(--ink);overscroll-behavior:none;margin:0;font-family:IM Fell English,Georgia,serif;overflow:hidden}.app,.stage{position:fixed;inset:0}.hud{pointer-events:none;position:fixed;inset:0}.hud button{pointer-events:auto;font:inherit;color:inherit;cursor:pointer}.hud :focus-visible{outline:2px solid var(--amber);outline-offset:3px}.intro,.done{pointer-events:auto;background:radial-gradient(120% 90% at 20% 30%,#06090a8c,#06090aeb);place-content:center;justify-items:start;padding:0 max(24px,9vw);display:grid;position:absolute;inset:0}.done{background:#06090ac7}.lockup-the{letter-spacing:.04em;margin:0 0 -.2em .12em;font-family:IM Fell English SC,Georgia,serif;font-size:clamp(18px,2.2vw,30px)}.intro h1,.done h2{letter-spacing:.01em;margin:0;font-family:IM Fell English SC,Georgia,serif;font-size:clamp(42px,7vw,104px);font-weight:400;line-height:1}.rule{background:#8a4a3c;width:min(220px,40vw);height:2px;margin:18px 0 14px .12em;display:block}.tagline{color:var(--ink-dim);margin:0 0 0 .12em;font-size:clamp(17px,1.6vw,24px);font-style:italic}.begin{letter-spacing:.18em;text-transform:uppercase;background:0 0;border:1px solid #e9dfcf73;border-radius:2px;margin-top:42px;padding:12px 34px;font-size:14px;transition:background .3s,border-color .3s}.begin:hover{border-color:var(--amber);background:#e7a35c1f}.fineprint{color:#e9dfcf66;margin:0;font-size:13px;position:absolute;bottom:28px;left:max(24px,9vw)}.outro{pointer-events:auto;cursor:pointer;background:#030506f0;place-content:center;justify-items:start;padding:0 max(24px,9vw);animation:1.2s ease-out lens-in;display:grid;position:absolute;inset:0}.outro-lines{max-width:34em}.outro-lines p{color:var(--ink);margin:0 0 1.1em;font-size:clamp(19px,1.9vw,28px);font-style:italic;line-height:1.45}.done{animation:1.2s ease-out lens-in}.pips{gap:10px;margin:0;padding:0;list-style:none;display:flex;position:absolute;top:22px;right:24px}.pip{border:1px solid #e9dfcf80;border-radius:50%;width:9px;height:9px;transition:background .6s,box-shadow .6s}.pip.on{background:var(--amber);border-color:var(--amber);box-shadow:0 0 10px #e7a35cb3}.back{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#06090a59;border:1px solid #e9dfcf59;border-radius:50%;place-items:center;width:52px;height:52px;display:grid;position:absolute;bottom:22px;left:22px}.back svg{fill:none;width:22px;stroke:var(--ink);stroke-width:1.6px}.toggles{gap:2px;display:flex;position:absolute;bottom:22px;right:16px}.toggles button{color:#e9dfcf73;background:0 0;border:0;padding:6px 10px;font-size:13px}.toggles button:hover{color:var(--ink)}.touch{clip-path:inset(50%);gap:8px;height:1px;display:flex;position:absolute;bottom:22px;left:50%;overflow:hidden;transform:translate(-50%)}.touch:focus-within{clip-path:none;height:auto;overflow:visible}.touch button{background:#06090ab3;border:1px solid #e9dfcf4d;padding:8px 14px;font-size:14px}.touch button[data-ready]{border-color:var(--amber)}.debug{pointer-events:auto;background:#0009;padding:8px 10px;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;position:absolute;top:12px;left:12px}.debug .row{flex-wrap:wrap;gap:4px;margin-top:4px;display:flex}.debug button{font:inherit;background:#1b1f22;border:1px solid #333;padding:2px 6px}.lens-layer{pointer-events:auto;background:radial-gradient(130% 100% at 50% 45%,#0305069e,#030506e0);place-items:center;animation:.28s ease-out lens-in;display:grid;position:absolute;inset:0}.lens-clock{background:linear-gradient(#0305068c,#0305061f 62%,#03050600);place-items:start center;padding-top:max(3vh,16px)}@keyframes lens-in{0%{opacity:0}}.lens-frame{--ar:1.333;width:min(88vw, calc(80vh * var(--ar)));background:#050708;border-radius:3px;animation:.34s cubic-bezier(.2,.7,.2,1) lens-rise;position:relative;overflow:hidden;box-shadow:0 0 0 1px #e9dfcf1a,0 30px 90px #000000bf}@keyframes lens-rise{0%{transform:translateY(10px)scale(.985)}}.lens-frame:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 80px #0000008c}.lens-frame img,.lens-frame .layer{object-fit:cover;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;width:100%;height:100%;position:absolute;inset:0}.lens-frame .fade{transition:opacity .9s}.lens-frame .fade.slow{transition-duration:1.6s}.lens-frame .fade.slower{transition-duration:3.6s;transition-timing-function:ease-in}.lens-frame .fade.quick{transition-duration:.5s}.lens-frame .fade.reveal{transition-duration:.32s;transition-timing-function:ease-out}.lens-frame img.cloth{transform-origin:50% 0}.lens-frame img.cloth.tugged{animation:.5s ease-out tug}@keyframes tug{20%{transform:scaleY(1.016)skew(-.45deg)}55%{transform:scaleY(1.004)skew(.2deg)}}.lens-frame.ending img{transform-origin:var(--focus,50% 50%);animation:9s ease-in forwards push-in}@keyframes push-in{to{transform:scale(1.14)}}.lens-frame button{cursor:pointer;background:0 0;border:0;padding:0;position:absolute}.lens-frame .ring img{opacity:0}.lens-frame .ring img.on{opacity:1;animation:.18s ease-out roll}@keyframes roll{0%{filter:blur(1.2px)brightness(1.15);transform:translateY(-16%)}}.lens-frame button:focus-visible{outline:2px solid var(--amber);outline-offset:2px}.lens-safe .lens-frame,.lens-hymn .lens-frame{--ar:1.3333}.lens-record .lens-frame{--ar:.7333}.lens-mirror .lens-frame{--ar:.7143}.clock-face{aspect-ratio:1;cursor:grab;touch-action:none;border-radius:50%;width:min(46vh,80vw);animation:.34s cubic-bezier(.2,.7,.2,1) lens-rise;position:relative;overflow:hidden;box-shadow:0 0 0 1.5px #e7a35c6b,0 0 0 6px #06090a8c,0 22px 70px #000000bf}.clock-face:active{cursor:grabbing}.clock-face:focus{outline:none}.clock-face:focus-visible{outline:2px solid var(--amber);outline-offset:8px}.clock-face:after{content:"";pointer-events:none;border-radius:50%;position:absolute;inset:0;box-shadow:inset 0 0 50px #000000b3}.clock-face img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none;max-width:none;position:absolute}.clock-face.untouched .minute{animation:1.6s ease-in-out 1.1s 2 nudge}@keyframes nudge{0%,to{rotate:0deg}35%{rotate:-7deg}65%{rotate:3deg}}.tagline.small{color:#e9dfcf73;margin-top:10px;font-size:clamp(14px,1.1vw,17px)}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.prologue{pointer-events:auto;position:absolute;inset:0}.prologue.on-notice{cursor:pointer}.pro-black{background:#030506;position:absolute;inset:0}.pro-title{place-content:center;justify-items:start;padding:0 max(24px,9vw);display:grid;position:absolute;inset:0}.pro-title h1{margin:0;font-family:IM Fell English SC,Georgia,serif;font-size:clamp(42px,7vw,104px);font-weight:400;line-height:1}.pro-notice{place-items:center;padding-bottom:44px;display:grid;position:absolute;inset:0}.pro-notice .lens-frame{width:auto;height:min(78vh,100vh - 120px,112vw);transition:transform .1s linear;animation:none}.pro-clock{place-items:start center;padding-top:max(3vh,16px);display:grid;position:absolute;inset:0}.clock-face.still{cursor:default;animation:none}.pro-continue{letter-spacing:.16em;text-transform:uppercase;color:#e9dfcf9e;background:0 0;border:0;padding:8px 18px;font-size:13px;position:absolute;bottom:18px;left:50%;transform:translate(-50%)}.pro-continue:hover{color:var(--ink)}.pro-skip{letter-spacing:.12em;text-transform:uppercase;color:#e9dfcf66;background:0 0;border:0;padding:6px 12px;font-size:13px;position:absolute;bottom:22px;right:22px}.pro-skip:hover{color:var(--ink)}@media (prefers-reduced-motion:reduce){*{transition:none!important}.clock-face.untouched .minute,.lens-frame.ending img,.lens-frame img.cloth.tugged,.lens-frame,.clock-face{animation:none!important}}
