/* Nykta intake — T2a: shared frame · Step 1 · Step 2. Numbers ported from handoff/prototype/Main.dc.html.
   Rule: every base style is the FINAL state; motion lives only under html.mo. html.rm (reduced motion, DF-1 /
   X-4) therefore shows every screen finished at once, and switching mo → rm mid-animation lands it there. */

@font-face{font-family:"JBM";src:url(../fonts/JetBrainsMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JBM";src:url(../fonts/JetBrainsMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@property --pv{syntax:'<integer>';inherits:false;initial-value:0}

:root{--ground:#050505;--text:#F2EFE9;--amber:#FDB73D;--warm:#FFD68A;--cream:#F6EEDD;--lav:#B4ADF7;
--st:#7E7A8C;--tl:#6C6878;--bk:#8B8798;--wo:#77738A;--mono:"JBM",ui-monospace,monospace;--ease:cubic-bezier(.19,1,.22,1)}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;margin:0;color:inherit}
h1:focus{outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rm *,.rm *::before,.rm *::after{animation:none!important;transition:none!important}
.nopr .pn{animation:none!important;transition:none!important}

/* ═══ keyframes shared (a missing `to` = the element's own final style) ═══ */
@keyframes appear{from{opacity:0}}
@keyframes gone{from{opacity:1}to{opacity:0}}
@keyframes chIn{from{opacity:0}to{opacity:1}}
@keyframes blink{0%,45%{opacity:1}46%,100%{opacity:0}}
@keyframes typeIn{0%{opacity:0}2%{opacity:1;filter:drop-shadow(0 0 7px rgba(253,183,61,.95))}100%{opacity:1;filter:drop-shadow(0 0 0 rgba(253,183,61,0))}}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.988);filter:blur(9px)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ═══ the ground (X-4: two animated layers, both transform-only; the rest static) ═══ */
.ground{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.au{position:absolute;will-change:transform}
.au1{left:-26%;top:-18%;width:104%;height:56%;background:radial-gradient(closest-side,rgba(62,52,128,.34),rgba(62,52,128,.16) 48%,rgba(62,52,128,0) 100%)}
.au2{right:-30%;bottom:-6%;width:96%;height:50%;background:radial-gradient(closest-side,rgba(34,58,124,.24),rgba(34,58,124,.11) 48%,rgba(34,58,124,0) 100%)}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-3%,0) scale(1.08)}100%{transform:translate3d(-3%,2%,0) scale(1.04)}}
@keyframes drift2{0%{transform:translate3d(0,0,0) scale(1.05)}100%{transform:translate3d(-4%,3%,0) scale(1.13)}}
.mo .au1{animation:drift 30s ease-in-out infinite alternate}
.mo .au2{animation:drift2 41s ease-in-out infinite alternate}
.stars{position:absolute;inset:0}
.nadir{position:absolute;left:-18%;top:18%;width:136%;height:78%;opacity:.78;background:radial-gradient(closest-side,rgba(250,204,21,.18),rgba(250,204,21,.055) 52%,rgba(250,204,21,0) 78%)}
.grain{position:absolute;inset:0;background:url(../img/grain.png);opacity:.05;mix-blend-mode:overlay}
.vignette{position:absolute;inset:0;background:radial-gradient(125% 95% at 50% 42%,transparent 36%,rgba(0,0,0,.76) 100%)}

/* ═══ the column: phone first; on desktop a centred 430 px column over the full ground ═══ */
.col{position:relative;z-index:2;max-width:430px;margin:0 auto;height:100vh;height:100dvh;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;padding:calc(30px + env(safe-area-inset-top,0px)) 24px 0}
.brand{display:flex;align-items:center;gap:9px}
.brand svg{display:block;overflow:visible}
.mo .wl{animation:typeIn .55s both}
.mo .w0{animation-delay:.55s}.mo .w1{animation-delay:.7s}.mo .w2{animation-delay:.85s}.mo .w3{animation-delay:1s}.mo .w4{animation-delay:1.15s}
@keyframes wmCaret{0%,24.9%{transform:translateX(8px)}25%{transform:translateX(98px)}31.8%{transform:translateX(178px)}38.6%{transform:translateX(255px)}45.4%{transform:translateX(316px)}52.2%,100%{transform:translateX(402px)}}
@keyframes wmBlink{0%,48%{opacity:1}49%,100%{opacity:0}}
.wcx{opacity:0}
.mo .wcx{animation:gone .5s 2.3s both}
.mo .wcaret{animation:wmCaret 2.2s steps(1,end) both,wmBlink .92s steps(1,end) infinite}

/* status slot */
.status{position:relative;display:flex;align-items:center;gap:8px;height:14px}
.pip{width:6px;height:6px;border-radius:999px;background:var(--amber);box-shadow:0 0 12px 2px rgba(253,183,61,.7)}
@keyframes pip{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
.mo .pip{animation:pip 4.5s ease-in-out infinite}
/* sized from the longest status string in the deck (ruling T2a-R9): n × (1ch + tracking) + the caret and its margin */
.slot{position:relative;display:block;height:12px;font-family:var(--mono);font-size:9px;font-weight:500;min-width:calc(var(--sn,17) * (1ch + .24em) + 8px)}
.sw{position:absolute;right:0;top:0;display:flex;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.24em;color:var(--st);white-space:pre}
.sw.amb{color:var(--amber)}
.mo .ch{animation:chIn .01s both}
.bcar{width:5px;height:9px;background:var(--amber);margin-left:3px;align-self:center}
.mo .bcar{animation:blink .8s steps(1,end) infinite}
.bootline{opacity:0}
.mo .bootline{animation:gone .45s 2.5s both}
.mo .readyline{animation:appear .7s 2.8s both}

/* progress: one line out of 100; the number counts with the bar (@property; the final number otherwise) */
.prog{display:flex;align-items:center;gap:12px;padding:24px 24px 0}
.pn{display:inline-block;min-width:17px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.1em;color:var(--amber);font-variant-numeric:tabular-nums;counter-reset:pv var(--pv)}
.pn::after{content:counter(pv)}
.mo .pn{transition:--pv 1.1s var(--ease)}
@keyframes pnRun{from{--pv:0}}
.mo .pn.boot{animation:pnRun 1.1s var(--ease) 1.25s both}
.pg{position:relative;flex-grow:1;height:1px;background:rgba(242,239,233,.09)}
.pf{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,rgba(253,183,61,.2),#FDB73D 80%,#FFD68A);box-shadow:0 0 10px rgba(253,183,61,.5)}
.mo .pf{transition:width 1.1s var(--ease)}
.pf::after{content:"";position:absolute;right:-2px;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--warm);box-shadow:0 0 10px 2px rgba(253,183,61,.9)}
@keyframes pfIn{from{width:0}}
.mo .pf.boot{animation:pfIn 1.1s var(--ease) 1.25s both}
.pr{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.16em;color:var(--tl);text-transform:uppercase;white-space:nowrap}

/* screens */
#screen{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;position:relative}
#screen>*{flex-grow:1;min-height:0;display:flex;flex-direction:column;position:relative}
@keyframes fin{from{opacity:0}}
.mo .fin{animation:fin .35s ease both}
.fout{opacity:0;pointer-events:none}
.mo .fout{animation:gone .28s ease both}

/* ═══ Step 1 ═══ */
.s1{overflow-y:auto;padding:0 24px 80px}.s1>:first-child,.s1>.stm>:first-child{margin-top:auto}.stm{display:contents}.s1>:last-child{margin-bottom:auto}
.q1{margin:0 0 40px;font-weight:300;font-size:31px;line-height:1.24;letter-spacing:-.028em;color:var(--text);text-wrap:pretty}
.mo .en{animation:rise .95s var(--ease) both}
.opts{display:flex;flex-direction:column;gap:12px}
.mo .s1 .opt,.mo .s1 .optx,.mo .s1 .ft{animation:rise .95s var(--ease) backwards}
/* the question: the last word types in, cracks and splits */
.bk{position:relative;display:inline-block;white-space:nowrap}
.bl{display:inline-block}
.mo .bl{animation:typeIn .5s both}
.bkt{display:inline-block;clip-path:polygon(0 0,100% 0,100% 55%,80% 66%,62% 49%,45% 65%,27% 47%,13% 62%,0 52%);transform:translate(-.4px,-.7px)}
.bkb{position:absolute;left:0;top:0;display:inline-block;clip-path:polygon(0 52%,13% 62%,27% 47%,45% 65%,62% 49%,80% 66%,100% 55%,100% 100%,0 100%);transform-origin:4% 60%;transform:translate(1.4px,1.3px) rotate(.9deg)}
@keyframes bkFrom{from{transform:none}}
.mo .bkt,.mo .bkb{animation:bkFrom .55s 2.62s cubic-bezier(.2,.9,.3,1.15) both}
.bkc{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.bkl{fill:none;stroke:var(--amber);stroke-width:3.2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0;opacity:.5;filter:drop-shadow(0 0 3px rgba(253,183,61,.95))}
@keyframes bkDraw{from{stroke-dashoffset:100}}
@keyframes bkCool{0%{stroke:#FFF2D2;opacity:1}30%{stroke:#FDB73D;opacity:1}100%{stroke:#FDB73D;opacity:.5}}
.mo .bkl{animation:bkDraw .6s 2.02s linear both,bkCool 1.6s 2.62s ease-out both}
.mo .bkf{animation:appear .6s 2.8s both}
/* returning from Step 2: no boot, no delays; everything enters in 0.55 s */
.mo .fast .en,.mo .fast .opt,.mo .fast .optx,.mo .fast .ft{animation-delay:0s!important;animation-duration:.55s!important}
.mo .fast .bl,.mo .fast .bkf{animation:none!important}
.mo .fast .bkt,.mo .fast .bkb,.mo .fast .bkl{animation-delay:0s!important;animation-duration:.01s!important}

.opt{--mx:50%;--my:0%;position:relative;display:flex;align-items:center;gap:18px;width:100%;text-align:left;cursor:pointer;overflow:hidden;
border:1px solid rgba(242,239,233,.08);border-radius:20px;padding:16px 20px 16px 16px;
background:radial-gradient(130% 180% at var(--mx) var(--my),rgba(242,239,233,.085),transparent 62%),linear-gradient(180deg,rgba(255,255,255,.030),rgba(255,255,255,.008));
transition:border-color .5s cubic-bezier(.22,.68,.16,1),transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,opacity .5s,filter .5s}
.opt::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);pointer-events:none}
@media (hover:hover){.opt:hover{border-color:rgba(242,239,233,.26);transform:translateY(-2px);box-shadow:0 22px 52px -30px rgba(242,239,233,.42)}}
.opt:focus-visible{outline:none;border-color:rgba(253,183,61,.75);box-shadow:0 0 0 4px rgba(253,183,61,.13)}
.opt.sel{border-color:rgba(253,183,61,.7);box-shadow:0 0 0 1px rgba(253,183,61,.22),0 26px 64px -28px rgba(253,183,61,1)}
.opt.gone,.optx.gone{opacity:0;transform:translateY(8px) scale(.985);filter:blur(6px);pointer-events:none}
.opt.chosen{transform:translateY(-5px)}
.well{flex:0 0 auto;width:64px;height:64px;display:grid;place-items:center;border-radius:18px;background:radial-gradient(circle at 50% 38%,rgba(242,239,233,.072),rgba(242,239,233,.016) 60%,transparent 78%);box-shadow:inset 0 0 0 1px rgba(242,239,233,.08);transition:box-shadow .6s cubic-bezier(.22,.68,.16,1)}
@media (hover:hover){.opt:hover .well{box-shadow:inset 0 0 0 1px rgba(242,239,233,.2),0 0 28px -8px rgba(242,239,233,.3)}}
.opt.sel .well{box-shadow:inset 0 0 0 1px rgba(253,183,61,.35),0 0 30px -6px rgba(253,183,61,.5)}
.otx{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.ott{font-weight:400;font-size:18px;line-height:1.32;letter-spacing:-.018em;color:var(--text)}
.otg{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.26em;color:var(--st)}
.mark{flex:0 0 auto;position:relative;width:16px;height:16px;border-radius:50%;border:1px solid rgba(242,239,233,.22);transition:.55s cubic-bezier(.22,.68,.16,1)}
.mark::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:var(--amber);box-shadow:0 0 14px 3px rgba(253,183,61,.8);transform:scale(0);opacity:0;transition:.55s cubic-bezier(.16,1,.3,1)}
.opt.sel .mark{border-color:rgba(253,183,61,.8)}
.opt.sel .mark::after{transform:scale(1);opacity:1}
.optx{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:15px 20px 15px 22px;border:1px dashed rgba(242,239,233,.13);border-radius:16px;background:transparent;color:var(--wo);font-size:14px;font-weight:400;letter-spacing:-.006em;text-align:left;cursor:pointer;transition:border-color .3s,color .3s,opacity .5s cubic-bezier(.22,.68,.16,1),transform .5s cubic-bezier(.22,.68,.16,1),filter .5s}
@media (hover:hover){.optx:hover{border-color:rgba(242,239,233,.26);color:rgba(242,239,233,.72)}}
.optx:focus-visible{outline:none;border-color:rgba(253,183,61,.6);color:rgba(242,239,233,.8);box-shadow:0 0 0 4px rgba(253,183,61,.13)}
.optx svg{flex:0 0 auto;opacity:.7}
.optx.chosen{border-color:rgba(242,239,233,.34);color:var(--text)}

/* the three night symbols (their base styles are the still frame) */
.sym{display:block;overflow:visible}
.sym [class]{transform-box:fill-box;transform-origin:center}
.orb{fill:none;stroke:var(--amber);stroke-width:.55;opacity:.17;stroke-dasharray:2 6.5}
.mo .orb{animation:spin 26s linear infinite}
.dline{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.dland{opacity:0}
.trav{offset-path:path("M 5 11 C 12 0, 19 27, 27 20 C 33 14, 38 26, 43 29 C 48 32, 53 45, 55 46");offset-rotate:0deg;opacity:0}
.travh{fill:var(--amber);opacity:.22;filter:blur(2.2px)}
.travc{fill:#FFFFFF}
@keyframes dTravel{0%{offset-distance:0%}82%,100%{offset-distance:100%}}
@keyframes dTravOp{0%{opacity:0}6%,84%{opacity:1}94%,100%{opacity:0}}
@keyframes dLand{0%,78%{opacity:0}88%{opacity:.85}96%{opacity:.32}100%{opacity:0}}
@keyframes dLine{0%,100%{opacity:.7}50%{opacity:.92}}
.mo .dline{animation:dLine 5.6s ease-in-out infinite}
.mo .dland{animation:dLand 5.6s linear infinite}
.mo .trav{animation:dTravel 5.6s cubic-bezier(.45,0,.2,1) infinite,dTravOp 5.6s linear infinite}
.wghost{fill:none;stroke:var(--amber);stroke-width:1;opacity:.13;stroke-linecap:round}
.wbr{fill:none;stroke:#6E5019;stroke-width:1.8;stroke-linecap:butt;opacity:0}
.wb4{stroke-linecap:round}
.wseg{fill:none;stroke:#6E5019;stroke-width:1.8;stroke-linecap:round}
.wsp{fill:#FFF2D2;opacity:0;filter:drop-shadow(0 0 4px rgba(253,183,61,1))}
.wmk{fill:var(--amber);opacity:.5;filter:drop-shadow(0 0 3px rgba(253,183,61,.7))}
.wbx{opacity:0}
@keyframes ws1{0%,2%{stroke:#6E5019}5%,14%{stroke:#FDB73D}17%,100%{stroke:#6E5019}}
@keyframes ws2{0%,24%{stroke:#6E5019}27%,33%{stroke:#FDB73D}36%,100%{stroke:#6E5019}}
@keyframes ws3{0%,44.5%{stroke:#6E5019}48%,51%{stroke:#FDB73D}54%,100%{stroke:#6E5019}}
@keyframes ws4{0%,60%{stroke:#6E5019}63%,65.5%{stroke:#FDB73D}68%,100%{stroke:#6E5019}}
@keyframes wb1{0%,14.9%{opacity:1}15.5%,90%{opacity:0}97%,100%{opacity:1}}
@keyframes wb2{0%,33.9%{opacity:1}34.5%,90%{opacity:0}97%,100%{opacity:1}}
@keyframes wb3{0%,51.9%{opacity:1}52.5%,90%{opacity:0}97%,100%{opacity:1}}
@keyframes wb4{0%,66%{opacity:1}70%,90%{opacity:0}97%,100%{opacity:1}}
@keyframes wp{0%,14.8%{opacity:0;transform:scale(.3)}15.4%{opacity:1;transform:scale(1)}19.5%,100%{opacity:0;transform:scale(2)}}
@keyframes wm1{0%,21.5%{opacity:0}24%,90%{opacity:.5}96%,100%{opacity:0}}
@keyframes wm2{0%,42%{opacity:0}44.5%,90%{opacity:.5}96%,100%{opacity:0}}
@keyframes wm3{0%,57.5%{opacity:0}60%,90%{opacity:.5}96%,100%{opacity:0}}
@keyframes wm4{0%,74%{opacity:0}77%,90%{opacity:.62}96%,100%{opacity:0}}
@keyframes wbx{0%{transform:translateX(0);opacity:0}3%{transform:translateX(0);opacity:1}15%{transform:translateX(11.5px)}25%{transform:translateX(16.5px)}34%{transform:translateX(23px)}45.5%{transform:translateX(28.5px)}52%{transform:translateX(33.5px)}61%{transform:translateX(38px)}66%{transform:translateX(41px)}71%{opacity:1}78%{opacity:0}100%{transform:translateX(41px);opacity:0}}
@keyframes wby{0%,15%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.9,.3,1)}18.5%{transform:translateY(-10px);animation-timing-function:ease-in-out}21.5%{transform:translateY(-10.6px);animation-timing-function:cubic-bezier(.6,0,.4,1)}25%,34%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.9,.3,1)}37.5%{transform:translateY(-12.5px);animation-timing-function:ease-in-out}42%{transform:translateY(-13.1px);animation-timing-function:cubic-bezier(.6,0,.4,1)}45.5%,52%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.9,.3,1)}55%{transform:translateY(-8.5px);animation-timing-function:ease-in-out}57.5%{transform:translateY(-9px);animation-timing-function:cubic-bezier(.6,0,.4,1)}61%,66%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.9,.3,1)}71%{transform:translateY(-15px);animation-timing-function:ease-in-out}78%,100%{transform:translateY(-16px)}}
.mo .wz{animation-duration:8.4s;animation-delay:3.4s;animation-iteration-count:infinite;animation-fill-mode:backwards;animation-timing-function:linear}
.mo .wb1{animation-name:wb1}.mo .wb2{animation-name:wb2}.mo .wb3{animation-name:wb3}.mo .wb4{animation-name:wb4}
.mo .ws1{animation-name:ws1}.mo .ws2{animation-name:ws2}.mo .ws3{animation-name:ws3}.mo .ws4{animation-name:ws4}
.mo .wsp{animation-name:wp;animation-timing-function:ease-out}.mo .wp2{animation-delay:4.996s}.mo .wp3{animation-delay:6.508s}
.mo .wm1{animation-name:wm1}.mo .wm2{animation-name:wm2}.mo .wm3{animation-name:wm3}.mo .wm4{animation-name:wm4}
.mo .wbx{animation-name:wbx}.mo .wby{animation-name:wby}
.mc{fill:none;stroke:var(--amber);stroke-width:2.3;stroke-linecap:round}
.mch,.mcr{opacity:.88;filter:drop-shadow(0 0 3px rgba(253,183,61,.55))}
.mcd{opacity:.16}
.mpl{fill:none;stroke:var(--amber);stroke-width:.8;opacity:0}
.mnuc{opacity:.42}
@keyframes mcA{0%,21.5%{transform:var(--off);opacity:.16}24.5%{transform:var(--ovr);opacity:.9}26%{transform:translate(0,0) rotate(0deg);opacity:.3}27%{opacity:1}28%{opacity:.5}29.5%,86%{transform:translate(0,0) rotate(0deg);opacity:.88}94%,100%{transform:var(--off);opacity:.16}}
@keyframes mcB{0%,41.5%{transform:var(--off);opacity:.16}44.5%{transform:var(--ovr);opacity:.9}46%{transform:translate(0,0) rotate(0deg);opacity:.3}47%{opacity:1}48%{opacity:.5}49.5%,86%{transform:translate(0,0) rotate(0deg);opacity:.88}94%,100%{transform:var(--off);opacity:.16}}
.mca1{--off:translate(-2.16px,-1.44px) rotate(-8deg);--ovr:translate(.39px,.26px) rotate(0deg)}.mca2{--off:translate(1.44px,2.16px) rotate(8deg);--ovr:translate(-.26px,-.39px) rotate(0deg)}
.mcb1{--off:translate(-1.22px,-1.83px) rotate(6deg);--ovr:translate(.22px,.33px) rotate(0deg)}.mcb2{--off:translate(1.83px,1.22px) rotate(-6deg);--ovr:translate(-.33px,-.22px) rotate(0deg)}
@keyframes mP1{0%,12%{opacity:0;transform:scale(.14)}13.5%{opacity:.75}22%{opacity:.38;transform:scale(1)}25%,100%{opacity:0;transform:scale(1.07)}}
@keyframes mP2{0%,32%{opacity:0;transform:scale(.14)}33.5%{opacity:.62}42%{opacity:.3;transform:scale(1)}45%,100%{opacity:0;transform:scale(1.07)}}
@keyframes mP3{0%,52%{opacity:0;transform:scale(.14)}53.5%{opacity:.38}59%{opacity:.1;transform:scale(.6)}62%,100%{opacity:0;transform:scale(.64)}}
@keyframes mNuc{0%,11%{opacity:1;transform:scale(1)}12.5%{transform:scale(1.42)}15.5%,31%{transform:scale(1)}32.5%{transform:scale(1.3)}35.5%{transform:scale(1)}51%{opacity:.95;transform:scale(1)}52.5%{transform:scale(1.12)}55.5%{transform:scale(1)}62%,86%{opacity:.42}95%,100%{opacity:1;transform:scale(1)}}
.mo .mz{animation-duration:7.2s;animation-delay:3.2s;animation-iteration-count:infinite;animation-fill-mode:backwards;animation-timing-function:linear}
.mo .mca1,.mo .mca2{animation-name:mcA}.mo .mcb1,.mo .mcb2{animation-name:mcB}
.mo .mp1,.mo .mp2,.mo .mp3{animation-timing-function:cubic-bezier(.2,.7,.3,1)}
.mo .mp1{animation-name:mP1}.mo .mp2{animation-name:mP2}.mo .mp3{animation-name:mP3}
.mo .mnuc{animation-name:mNuc;animation-timing-function:ease-in-out}
/* hover = overdrive */
@media (hover:hover){
.mo .opt:hover .trav,.mo .opt:hover .dland,.mo .opt:hover .dline{animation-duration:2.8s}
.mo .opt:hover .wz{animation-duration:4.2s}
.mo .opt:hover .mz{animation-duration:3.5s}
.mo .opt:hover .orb{animation-duration:9s}
}

/* ═══ Step 2 — scan the handle, the line confirms ═══ */
.scroller{flex-grow:1;min-height:0;overflow-y:auto;padding:0 24px 176px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22px);mask-image:linear-gradient(to bottom,transparent 0,#000 22px);scrollbar-width:none;overscroll-behavior:contain}
.scroller::-webkit-scrollbar{display:none}
.head2{padding-top:22px}
.said2{display:flex;align-items:flex-start;gap:11px}
.pdot{flex:0 0 auto;position:relative;width:14px;height:14px;margin-top:2px;border-radius:50%;border:1px solid rgba(253,183,61,.75);box-sizing:border-box}
.pdot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px 2px rgba(253,183,61,.6)}
@keyframes dotPulse{0%,100%{transform:scale(.8);opacity:.72}50%{transform:scale(1.14);opacity:1}}
.mo .pdot::after{animation:dotPulse 2.6s ease-in-out infinite}
.said2 p{margin:0;font-size:13px;line-height:1.5;letter-spacing:-.004em;color:rgba(242,239,233,.72);text-wrap:pretty}
.said2 .q{color:var(--amber)}
.nosig{margin:0;font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.16em;color:var(--st);white-space:nowrap}
.q2{margin:14px 0 0;font-weight:300;font-size:23px;line-height:1.36;letter-spacing:-.022em;color:var(--text);text-wrap:pretty}
.sub2row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.sub2{margin:0;font-size:13px;line-height:1.4;letter-spacing:-.004em;color:rgba(242,239,233,.45)}
.ghostbtn{border:0;background:none;padding:5px 2px 5px 10px;border-radius:6px;color:var(--bk);font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:color .3s}
@media (hover:hover){.ghostbtn:hover{color:var(--text)}}
.ghostbtn:focus-visible{outline:none;color:var(--text);box-shadow:0 0 0 1px rgba(253,183,61,.75),0 0 0 4px rgba(253,183,61,.13)}
.blocks{margin-top:20px}
.blk{display:flex}
.blk+.blk{margin-top:14px;padding-top:14px;border-top:1px solid rgba(242,239,233,.06)}
.gut{flex:0 0 22px;padding-top:15px}
.gut svg{display:block}
.cards{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:7px}
.hc{position:relative;display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;cursor:pointer;border:1px solid rgba(242,239,233,.075);border-radius:14px;padding:11px 12px 12px 14px;background:linear-gradient(180deg,rgba(255,255,255,.024),rgba(255,255,255,.006));transition:border-color .25s,background-color .25s}
@media (hover:hover){.hc:hover{border-color:rgba(242,239,233,.2)}.hc:hover .lz rect{stroke:rgba(242,239,233,.45)}}
.hc:focus-visible{outline:none;border-color:rgba(253,183,61,.7);box-shadow:0 0 0 3px rgba(253,183,61,.12)}
.hct{flex:1 1 auto;min-width:0}
.hh{display:block;font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-.008em;color:rgba(242,239,233,.88);transition:color .25s}
.hl{display:block;margin-top:3px;font-size:12.5px;font-weight:400;line-height:1.42;letter-spacing:-.004em;color:rgba(242,239,233,.5);text-wrap:pretty;white-space:pre-line;transition:color .25s}
.hc.sel{border-color:rgba(253,183,61,.6);background-color:rgba(253,183,61,.06)}
.hc.sel .hh{color:var(--amber)}
.hc.sel .hl{color:rgba(242,239,233,.85)}
.hc.else{border-style:dashed;background:transparent}
.hc.else .hh{font-weight:500;color:rgba(242,239,233,.6)}
.hc.else.sel .hh{color:var(--amber)}
@keyframes l1aRise{from{opacity:0;transform:translateY(8px)}}
.mo .hc.rise{animation:l1aRise .6s cubic-bezier(.2,.8,.2,1) .35s both}
.lz{flex-shrink:0;display:block;margin-top:3px;overflow:visible}
.lz rect{fill:rgba(253,183,61,0);stroke:rgba(242,239,233,.26);stroke-width:1;transition:fill .25s,stroke .25s}
.lz path{fill:none;stroke:var(--ground);stroke-width:1.7;stroke-linecap:round;opacity:0;transition:opacity .25s}
.sel .lz rect{fill:var(--amber);stroke:var(--amber)}
.sel .lz path{opacity:1}
/* the dock: the mirror above the action, pinned; the content scrolls beneath under a fade */
.dock{position:absolute;left:0;right:0;bottom:0;padding:0 24px calc(28px + env(safe-area-inset-bottom,0px));pointer-events:none}
.dock::before{content:"";position:absolute;left:0;right:0;bottom:0;height:172px;background:linear-gradient(to top,#050505 64%,rgba(5,5,5,.88) 82%,rgba(5,5,5,0))}
.docki{position:relative;pointer-events:auto}
.mir{min-height:18px;margin-bottom:14px;font-size:12.5px;line-height:1.45;letter-spacing:-.004em;color:rgba(242,239,233,.72);text-align:center;text-wrap:balance;opacity:0}
.mir.on{opacity:1}
@keyframes mirA{from{opacity:0}}
@keyframes mirB{from{opacity:0}}
.mo .mir.mA{animation:mirA .3s ease}
.mo .mir.mB{animation:mirB .3s ease}
.cta{position:relative;display:block;width:100%;overflow:hidden;border:1px solid rgba(242,239,233,.12);border-radius:15px;background:rgba(242,239,233,.025);color:var(--tl);padding:16px 20px;font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:background-color .45s ease,color .35s,box-shadow .45s,border-color .35s}
.cta.ghost{border-color:rgba(242,239,233,.26);background:rgba(242,239,233,.03);color:var(--text)}
@media (hover:hover){.cta.ghost:hover{border-color:rgba(242,239,233,.5)}.cta.on:hover{background:#FFC65A}}
.cta.on{background:var(--amber);color:#0A0A0A;border-color:var(--amber);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 24px 60px -26px rgba(253,183,61,1)}
.cta:focus-visible{outline:1px solid var(--warm);outline-offset:3px}

/* ═══ Step 3 — the weight: the ten pills lead; each chosen pill's light settles on the band below ═══ */
.s3 .scroller{padding-bottom:118px}
.w3body{min-height:100%;display:flex;flex-direction:column}
.w3top{display:flex;justify-content:flex-end;align-items:center;min-height:22px;padding-top:6px}
.w3t{margin:6px 0 0;font-weight:300;font-size:26px;line-height:1.2;letter-spacing:-.024em;color:var(--text);text-align:center;text-wrap:balance}
.w3chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px 8px;margin-top:20px}
.w3c{position:relative;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 17px 0 14px;border-radius:999px;border:1px solid rgba(242,239,233,.17);background-color:rgba(242,239,233,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 10px 24px -16px rgba(0,0,0,.9);color:var(--text);font-size:14px;font-weight:500;letter-spacing:-.008em;white-space:nowrap;cursor:pointer;transition:transform .45s cubic-bezier(.22,.68,.16,1),border-color .5s cubic-bezier(.22,.68,.16,1),box-shadow .6s cubic-bezier(.22,.68,.16,1),background-color .5s cubic-bezier(.22,.68,.16,1);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.w3c::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,0) 58%);pointer-events:none}
.w3l{position:relative}
.w3k{position:relative;flex:none;box-sizing:border-box;width:12px;height:6px;border-radius:3px;border:1px solid rgba(242,239,233,.44);background-color:rgba(246,238,221,0);transition:border-color .5s cubic-bezier(.22,.68,.16,1),background-color .5s cubic-bezier(.22,.68,.16,1),box-shadow .6s cubic-bezier(.22,.68,.16,1)}
@media (hover:hover){.w3c:hover{z-index:4;transform:translateY(-1px);border-color:rgba(253,183,61,.56);background-color:rgba(253,183,61,.05);box-shadow:inset 0 1px 0 rgba(255,236,200,.1),0 0 0 1px rgba(253,183,61,.1),0 0 20px -4px rgba(253,183,61,.6),0 12px 26px -16px rgba(0,0,0,.9)}
.w3c:hover .w3k{border-color:rgba(253,183,61,.85)}
.w3c:hover .w3tip{opacity:1;transform:none;transition-delay:.07s}}
.mo .w3c:active{transform:scale(.985)}
.w3c:focus-visible{z-index:4;outline:none;border-color:rgba(253,183,61,.7);box-shadow:0 0 0 3px rgba(253,183,61,.14),0 0 18px -4px rgba(253,183,61,.6)}
.w3c.on{border-color:rgba(253,183,61,.86);background-color:rgba(253,183,61,.1);box-shadow:inset 0 1px 0 rgba(255,236,200,.14),0 0 0 1px rgba(253,183,61,.26),0 0 26px -3px rgba(253,183,61,.85),inset 0 0 16px -8px rgba(253,183,61,.95)}
.w3c.on .w3k{border-color:rgba(246,238,221,0);background-color:var(--cream);box-shadow:0 0 0 2px rgba(253,183,61,.18),0 0 10px 1px rgba(253,183,61,.75)}
@keyframes w3kfl{0%{box-shadow:0 0 0 2px rgba(253,183,61,.34),0 0 18px 6px rgba(255,214,138,.95)}}
.mo .w3c.on .w3k{animation:w3kfl .8s ease-out}
/* the sentence: hover (pointer devices), keyboard focus, or a 350 ms press-and-hold (X-3); above the pill, below on row 1 */
.w3tip{position:absolute;bottom:calc(100% + 11px);z-index:5;display:flex;flex-direction:column;gap:5px;box-sizing:border-box;width:max-content;max-width:256px;padding:11px 14px 12px;border-radius:14px;border:1px solid rgba(253,183,61,.36);background-color:rgba(13,12,17,.97);box-shadow:0 16px 36px -14px rgba(0,0,0,.95),0 0 26px -10px rgba(253,183,61,.5);text-align:left;white-space:normal;opacity:0;transform:translateY(5px);transition:opacity .22s ease,transform .32s cubic-bezier(.22,.68,.16,1);pointer-events:none}
.w3tip::after{content:"";position:absolute;top:100%;width:9px;height:9px;margin-top:-4.5px;box-sizing:border-box;background-color:rgba(13,12,17,.97);border-right:1px solid rgba(253,183,61,.36);border-bottom:1px solid rgba(253,183,61,.36);transform:rotate(45deg)}
.w3tip.tL{left:-2px}.w3tip.tL::after{left:18px}
.w3tip.tR{right:-2px}.w3tip.tR::after{right:22px}
.w3tip.tC{left:50%;translate:-50% 0}.w3tip.tC::after{left:50%;margin-left:-4.5px}
.w3tip.tD{bottom:auto;top:calc(100% + 11px);transform:translateY(-5px)}
.w3tip.tD::after{top:auto;bottom:100%;margin-top:0;margin-bottom:-4.5px;transform:rotate(-135deg)}
.w3c:focus-visible .w3tip,.w3c.held .w3tip{opacity:1;transform:none;transition-delay:.07s}
.w3tr{font-size:13px;font-weight:400;line-height:1.45;letter-spacing:-.004em;color:var(--text)}
.w3ts{font-size:12.5px;font-weight:400;font-style:italic;line-height:1.4;color:rgba(255,214,138,.86)}
@keyframes w3fl{0%,100%{translate:0 0}30%{translate:.4px -1.4px}62%{translate:-.35px -2.1px}}
.mo .w3c{animation:w3fl 6.8s ease-in-out infinite}
/* the band: a 60 Hz spring drawn through CSS variables (the sim writes them) */
.w3stage{flex:1 0 auto;display:flex;align-items:center;justify-content:center;padding:10px 0}
@keyframes w3in{from{opacity:0;transform:translateY(6px)}}
.w3viz{position:relative;margin:0 -24px;width:calc(100% + 48px)}
.mo .w3viz{animation:w3in 1.1s cubic-bezier(.16,1,.3,1) .1s both}
.band{display:block;width:100%;height:auto;overflow:visible}
.w3line{transform:translateY(80px) scaleY(var(--k,.002)) translateY(-80px)}
.w3main{stroke-width:var(--lw,4.05px)}
.w3glow{stroke-width:var(--gw,13.8px);opacity:var(--go,.18)}
.w3mid{stop-opacity:var(--mid,.5)}
.w3warm{transform:translate(120px,var(--sy,80px)) scale(var(--wrx,66),var(--wry,20));opacity:var(--wo,0)}
.w3base{opacity:var(--bo,.1)}
/* simVars' --bN* / --fN* values are routed by simApply to each bloom / light as --x --y --r --sx --sy --o */
.w3b{transform:translate(var(--x,120px),var(--y,80px)) scale(var(--r,4));opacity:var(--o,0)}
.w3f{transform:translate(var(--x,120px),var(--y,80px)) rotate(var(--r,0deg)) scale(var(--sx,1),var(--sy,1));opacity:var(--o,0)}
.dock3{position:absolute;left:0;right:0;bottom:0;padding:40px 24px calc(28px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,#050505 55%,rgba(5,5,5,.9) 78%,rgba(5,5,5,0));pointer-events:none}
.dock3 .cta{pointer-events:auto}

/* ═══ Step 4 — sleep math ═══ */
.s4{padding:0 24px;overflow-y:auto;overscroll-behavior:contain}
.intro4{padding-top:38px;text-align:center}
.eb4{display:flex;justify-content:center;min-height:12px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.26em;color:rgba(253,183,61,.72);white-space:pre}
.t4{margin:12px 0 0;font-weight:300;font-size:27px;line-height:1.16;letter-spacing:-.028em;color:var(--text);text-wrap:balance}
.t4 span{color:var(--amber)}
.sp4{flex:1 1 0;min-height:24px}
.ins{text-align:center}
.ins+.ins{padding-top:30px}
.ins label{display:block;font-size:13px;line-height:1.4;letter-spacing:-.006em;color:rgba(242,239,233,.78);text-wrap:balance}
.val{display:flex;justify-content:center;align-items:baseline;gap:5px;margin-top:12px}
.vn{font-weight:200;font-size:46px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--text)}
.insN .vn{color:var(--amber)}
.vu{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.2em;color:var(--st)}
.rail{padding:10px 12px 0}
/* the rails only: a drag can't scroll the page or trigger the in-app browser's swipe gestures (ruling T2b-R7) */
.trk{position:relative;height:38px;touch-action:none}
.rng{position:absolute;top:0;height:100%;margin:0;padding:0;opacity:0;cursor:grab;-webkit-appearance:none;appearance:none;background:transparent;touch-action:none}
.rng::-webkit-slider-runnable-track{height:38px;background:transparent;border:0}
.rng::-moz-range-track{height:38px;background:transparent;border:0}
.rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:6px;height:38px;background:transparent;border:0}
.rng::-moz-range-thumb{width:6px;height:38px;background:transparent;border:0}
.rng:active{cursor:grabbing}
.rng:disabled{cursor:default}
.bead{position:absolute;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;pointer-events:none;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s,left .34s cubic-bezier(.2,.8,.3,1)}
.bdA{background:radial-gradient(circle,#FFFFFF 0 15%,rgba(242,239,233,.66) 21%,rgba(242,239,233,.16) 46%,rgba(242,239,233,0) 70%)}
.bdN{background:radial-gradient(circle,#FFFFFF 0 15%,rgba(253,183,61,.96) 21%,rgba(253,183,61,.28) 46%,rgba(253,183,61,0) 70%)}
@media (hover:hover){.rng:enabled:hover+.bead{transform:scale(1.2)}}
.rng:enabled:active+.bead{transform:scale(1.2)}
.rng:focus-visible+.bead{box-shadow:0 0 0 1.5px rgba(253,183,61,.85),0 0 0 7px rgba(253,183,61,.12)}
.rl{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;background:rgba(242,239,233,.11)}
.rf{position:absolute;left:0;top:50%;height:2px;margin-top:-1px;border-radius:2px;transition:width .34s cubic-bezier(.2,.8,.3,1)}
.rfA{background:linear-gradient(90deg,rgba(242,239,233,.08),rgba(242,239,233,.8))}
.rfN{background:linear-gradient(90deg,rgba(253,183,61,.08),rgba(253,183,61,.62))}
.drag .rf{transition:none}
.drag .bead{transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s}
.ovr .rfA{background:linear-gradient(90deg,rgba(242,239,233,.08),rgba(180,173,247,.9))}
/* release: the bead answers with one ring, the result flashes once */
.pz{position:absolute;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;box-sizing:border-box;border:1px solid rgba(253,183,61,.85);opacity:0;pointer-events:none}
@keyframes pz1{0%{opacity:.95;transform:scale(.7)}100%{opacity:0;transform:scale(2.1)}}
@keyframes pz2{0%{opacity:.95;transform:scale(.7)}100%{opacity:0;transform:scale(2.1)}}
.mo .pz.p1{animation:pz1 .7s cubic-bezier(.2,.7,.3,1)}
.mo .pz.p2{animation:pz2 .7s cubic-bezier(.2,.7,.3,1)}
@keyframes nA{22%{text-shadow:0 0 24px currentColor}}
@keyframes nB{22%{text-shadow:0 0 24px currentColor}}
.mo .lkA .rnum{animation:nA .9s ease-out}
.mo .lkB .rnum{animation:nB .9s ease-out}
.scale4{position:relative;height:12px;margin-top:6px}
.scale4 span{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.1em;color:#5E5A6C}
.res{padding-top:36px;text-align:center}
.rgrid{display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1fr);align-items:center;max-width:300px;margin:0 auto}
.rcol{display:flex;flex-direction:column;align-items:center;gap:7px}
.rrow{display:flex;align-items:baseline;gap:2px}
.rcol+.rdiv+.rcol .rrow{gap:3px}
.rnum{font-weight:200;font-size:34px;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.runit{font-weight:300;font-size:15px}
.rlab{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.26em;color:var(--st)}
.rdiv{width:1px;height:34px;background:rgba(242,239,233,.1)}
.rv1{color:var(--amber)}.ru1{color:rgba(253,183,61,.7)}
.rv2{color:var(--text)}.ru2{color:rgba(242,239,233,.5)}
.rv1,.rv2,.ru1,.ru2{transition:color .5s}
.ovr .rv1,.ovr .rv2{color:var(--lav)}
.ovr .ru1,.ovr .ru2{color:rgba(180,173,247,.7)}
.cap4{margin-top:14px;font-size:12.5px;line-height:1.5;letter-spacing:-.005em;color:rgba(242,239,233,.5)}
.act4{position:sticky;bottom:0;z-index:3;padding:0 0 calc(26px + env(safe-area-inset-bottom,0px))}
.ovf .act4{padding-top:22px;background:linear-gradient(to top,#050505 72%,rgba(5,5,5,0))}
/* T3b-R19: when Step 4 overflows, its action is fixed to the layout viewport (which iOS Safari keeps above its controls), at
   the column's width and x, lifted by what the visual viewport hides (--vv-gap); .s4 reserves its height; the background
   runs on below it, behind translucent browser controls. No transform here: the .en entrance animates it. */
.ovf .act4{position:fixed;left:0;right:0;max-width:430px;margin:0 auto;box-sizing:border-box;padding:22px 24px calc(26px + env(safe-area-inset-bottom,0px) + var(--vv-gap,0px))}
.ovf .act4::after{content:"";position:absolute;left:0;right:0;top:100%;height:200px;background:#050505}
.s4.ovf{padding-bottom:var(--dock4,0px)}
.c4{position:relative;display:block;width:100%;overflow:hidden;border:1px solid var(--amber);border-radius:15px;background:var(--amber);color:#0A0A0A;padding:16px 20px;font-size:13px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 24px 60px -26px rgba(253,183,61,1);transition:background-color .45s,transform .35s,box-shadow .45s}
@media (hover:hover){.c4:hover{background:#FFC65A;transform:translateY(-1px)}}
.c4:focus-visible{outline:1px solid var(--warm);outline-offset:3px}
/* the seal: the label gives way to the closed eye; a comet reads each value, a ring locks each bead */
.ctalbl{display:block;transition:opacity .3s,transform .45s cubic-bezier(.16,1,.3,1)}
.ctatick{position:absolute;left:50%;top:50%;display:flex;align-items:center;opacity:0;transform:translate(-50%,-30%);transition:opacity .35s .15s,transform .5s .15s cubic-bezier(.16,1,.3,1)}
.sealed .ctalbl{opacity:0;transform:translateY(-60%)}
.sealed .ctatick{opacity:1;transform:translate(-50%,-50%)}
@keyframes sweep{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
.ctasweep{position:absolute;top:0;bottom:0;left:0;width:100%;opacity:0;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,246,222,.75),rgba(255,255,255,0))}
.mo .ctasweep{opacity:1;animation:sweep .75s cubic-bezier(.4,0,.2,1) both}
.comet{position:absolute;top:50%;left:var(--to);width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:none;opacity:0;background:radial-gradient(circle,#FFFFFF 0 16%,rgba(253,183,61,.92) 26%,rgba(253,183,61,.26) 50%,rgba(253,183,61,0) 72%)}
.comet::before{content:"";position:absolute;right:50%;top:50%;width:46px;height:1.5px;margin-top:-.75px;border-radius:2px;background:linear-gradient(90deg,rgba(253,183,61,0),rgba(253,183,61,.9))}
@keyframes comet{0%{left:0;opacity:0}12%{opacity:1}80%{opacity:1}100%{left:var(--to);opacity:0}}
.mo .comet{animation:comet .55s cubic-bezier(.55,0,.25,1) both}
.mo .cmA{animation-delay:.05s}.mo .cmN{animation-delay:.2s}
.lockr{position:absolute;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;box-sizing:border-box;border:1px solid rgba(253,183,61,.9);pointer-events:none;box-shadow:0 0 5px rgba(253,183,61,.45)}
@keyframes lockRing{0%{opacity:0;transform:scale(1.9);box-shadow:0 0 0 rgba(253,183,61,0)}45%{opacity:1;box-shadow:0 0 14px rgba(253,183,61,.8)}}
.mo .sealing .lockr{animation:lockRing .7s cubic-bezier(.16,1,.3,1) both}
.mo .sealing .lrA{animation-delay:.55s}.mo .sealing .lrN{animation-delay:.7s}
@keyframes sGlow{25%{text-shadow:0 0 22px currentColor}}
.mo .sealing .rgl{animation:sGlow 1.3s ease-out .75s both}
@keyframes flare{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.flare{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;background:radial-gradient(75% 42% at 50% 56%,rgba(250,204,21,.2),rgba(250,204,21,0) 70%)}
.mo .flare{animation:flare 1.8s ease-out both}
/* Step-4 status: the typed word, the settled word, and on seal the sealed word (warm) */
.sw.warm{color:var(--warm)}
.calline{opacity:0}
.mo .calline{animation:gone .4s 2.3s both}
.mo .okline{animation:appear .6s 2.45s both}
.okwrap{transition:opacity .25s}
.sealed .okwrap{opacity:0}
.lockline{opacity:0}
.sealed .lockline{opacity:1}
.mo .sealing-now .lockline{transition:opacity .4s .85s}
.ft{margin:14px 0 0;font-family:var(--mono);font-size:10px;line-height:1.5;letter-spacing:.02em;color:rgba(242,239,233,.4);text-align:center;pointer-events:auto}.ft p{margin:0}.ftl{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;margin-top:3px!important}.ft a{color:inherit;text-underline-offset:2px}.ft a:focus-visible{outline:1px solid rgba(253,183,61,.6);outline-offset:2px}