/* Why this palette: the bone scene is the quiet table; the ink pass is the only dark object, so it reads as a thing you hold.
   Ember is spent twice: the act button and one live dot. */
:root{
 --bone:#E3E2DC; --sheet:#F4F3EE; --ink:#15171B; --ink2:#23262D; --mist:#8A8C90; --line:#D5D3CA; --chip:#EAE8E1; --tx2:#5A5C61;
 --foil:#C9CFD3; --ember:#FF5A1F; --ember-tx:#1B0A04;
 --serif:"Fraunces",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif; --mono:"DM Mono",ui-monospace,monospace;
 --mx:.3; --my:-.25; --rx:0deg; --ry:0deg;
}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{background:var(--bone);font-family:var(--sans);color:var(--ink);overflow:hidden;display:flex;justify-content:center}
body::before{content:"";position:fixed;inset:0;opacity:.5;mix-blend-mode:multiply;pointer-events:none;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
#app{position:relative;width:100%;max-width:430px;height:100dvh;min-height:640px;overflow:hidden}
.hd{position:absolute;top:0;left:0;right:0;height:56px;padding:max(env(safe-area-inset-top),14px) 22px 0;display:flex;justify-content:space-between;align-items:center}
.wm{font:600 16px/1 var(--serif);font-variation-settings:"opsz" 24,"SOFT" 100;letter-spacing:-.01em}
.hr{display:flex;gap:14px;align-items:center;font-size:13px;color:var(--mist)}
.hr button{background:none;border:0;font:inherit;color:var(--tx2);cursor:pointer;padding:8px 0;opacity:1}
.hr button[hidden]{display:none}
/* ---------- the pass ---------- */
.stage{position:absolute;top:72px;left:0;right:0;display:flex;justify-content:center;perspective:900px;transform-origin:50% 0;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.stage.mini{transform:translate3d(0,-8px,0) scale(.64)}
.tilt{width:332px;height:252px;transform:rotate(-2deg) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.flip{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.face{position:absolute;inset:0;border-radius:20px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
 background:linear-gradient(155deg,#2A2D34 0%,#17191E 46%,#1D2026 100%);color:#E9E7E0;
 box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 0 0 1px rgba(0,0,0,.55),0 22px 34px -14px rgba(20,22,26,.55),0 4px 8px -2px rgba(20,22,26,.25)}
.back{transform:rotateY(180deg)}
.face::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 5px rgba(255,255,255,.025),inset 0 -14px 28px rgba(0,0,0,.28);pointer-events:none}
.guil,.grain{position:absolute;inset:0;width:100%;height:100%}
.grain{opacity:.5;mix-blend-mode:overlay}
.sheen{position:absolute;left:-60%;top:-60%;width:220%;height:220%;opacity:.17;mix-blend-mode:color-dodge;pointer-events:none;
 background:conic-gradient(from 210deg at 50% 50%,#8fa3ad,#d9cdbd,#c3a3a6,#a79fbb,#93b5ae,#d6d1b3,#8fa3ad);
 transform:translate3d(calc(var(--mx)*55px),calc(var(--my)*40px),0) rotate(calc(var(--mx)*14deg));transition:transform .25s cubic-bezier(.2,.7,.2,1),opacity .6s}
.glare{position:absolute;inset:-20%;opacity:.28;mix-blend-mode:soft-light;pointer-events:none;
 background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);
 transform:translate3d(calc((var(--mx) - .1)*220px),0,0);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.act .sheen{opacity:.3}.face.act::after{box-shadow:inset 0 0 0 1.5px rgba(233,231,224,.38),inset 0 0 30px rgba(233,231,224,.1),inset 0 -14px 28px rgba(0,0,0,.2)}
.slot{position:absolute;top:9px;left:50%;width:46px;height:9px;margin-left:-23px;border-radius:9px;background:#0B0C0E;box-shadow:0 1px 0 rgba(255,255,255,.14),inset 0 2px 3px rgba(0,0,0,.9)}
.pc{position:absolute;inset:0;padding:30px 20px 0}
.emb{text-shadow:0 1px 0 rgba(255,255,255,.14),0 -1px 0 rgba(0,0,0,.65)}
.p-top{position:absolute;left:20px;right:20px;top:28px;display:flex;align-items:center;justify-content:space-between}
.p-brand{display:flex;align-items:center;gap:9px;font:600 15px/1 var(--serif);font-variation-settings:"opsz" 24,"SOFT" 100}
.p-brand svg{width:34px;height:34px;color:#D7D5CE;--mk:#1B1D22;filter:drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 -1px 0 rgba(0,0,0,.7))}
.mono{font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:#A3A7AD}
.st{display:flex;align-items:center;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--ember)}
.act .dot,.pend .dot{animation:live 1.8s ease-in-out infinite}
@keyframes live{50%{opacity:.3}}
.p-mail{position:absolute;left:20px;right:20px;top:76px;height:26px;border-bottom:1px solid rgba(255,255,255,.16);font:500 13.5px/24px var(--mono);white-space:nowrap;overflow:hidden;color:#EDEBE4;letter-spacing:-.01em}
.p-mail .ph{color:#6D7078}
.p-mail .cr{display:inline-block;width:1.5px;height:15px;background:#EDEBE4;vertical-align:-3px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.p-goal{position:absolute;left:20px;top:110px;height:52px;display:flex;align-items:center;gap:10px;opacity:0;transition:opacity .3s}
.p-goal.on{opacity:1}
.gs{flex:none;display:flex;gap:2px;align-items:center;justify-content:center;height:52px;padding:0 6px;border:1.5px solid rgba(233,231,224,.8);border-radius:8px;outline:1px solid rgba(233,231,224,.3);outline-offset:2px;transform:rotate(-3deg);opacity:.95}
.p-goal.on .gs{animation:thump .38s cubic-bezier(.3,1.5,.5,1) both}
.p-goal.bump .gs{animation:thump2 .3s cubic-bezier(.3,1.5,.5,1) both}
@keyframes thump2{0%{transform:rotate(-3deg) scale(1.1)}100%{transform:rotate(-3deg) scale(1)}}
.rf-th{display:block;width:22px;height:48px;overflow:visible}
.th-sil{fill:#4A4F59;stroke:#4A4F59;stroke-width:1}.th-mp path{fill:#2D3139}.th-mp .on path{fill:#F4F2EB}
.th-gr{fill:none;stroke:#1B1D22;stroke-width:.8;stroke-linejoin:round}
.gl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 13px/1.2 var(--serif);font-variation-settings:"opsz" 14,"SOFT" 30;color:#EAE8E1;max-width:140px}
.gl small{display:block;margin-top:3px;font:400 10px/1 var(--mono);color:#A3A7AD}
.stamp{display:inline-block;padding:4px 10px 3px;border:1.5px solid rgba(233,231,224,.8);border-radius:6px;outline:1px solid rgba(233,231,224,.35);outline-offset:2px;
 font:600 14px/1.1 var(--serif);font-variation-settings:"opsz" 14,"SOFT" 0;letter-spacing:.01em;color:#EAE8E1;transform:rotate(-3.5deg);opacity:.92;
 -webkit-mask-image:radial-gradient(circle at 20% 30%,#000 60%,rgba(0,0,0,.72) 100%)}
.p-goal .stamp{opacity:0;transform:rotate(-3.5deg) scale(1.35)}
.p-goal.on .stamp{animation:thump .38s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes thump{0%{opacity:0;transform:rotate(-3deg) scale(1.45)}60%{opacity:1}100%{opacity:.95;transform:rotate(-3deg) scale(1)}}
.p-marks{position:absolute;left:20px;top:172px;display:flex;gap:14px;height:16px;align-items:center}
.mk{display:flex;align-items:center;gap:6px;font:400 11px/1 var(--sans);color:#CFCDC6;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s}
.mk.on{opacity:1;transform:none}
.mk i{display:block;width:11px;height:11px;border:1.4px solid currentColor;border-radius:3px;position:relative}
.mk i::after{content:"";position:absolute;inset:2px;border-radius:50%;background:currentColor}
.mk.dev i{width:8px;height:12px;border-radius:2.5px}.mk.dev i::after{inset:auto;left:50%;bottom:1.5px;width:2px;height:1.5px;margin-left:-1px;border-radius:0}
.mk.wa i{border-radius:50%}.mk.wa i::after{inset:auto;left:2.5px;top:2.5px;width:3px;height:3px}
.p-terms{position:absolute;left:20px;right:84px;top:196px;display:flex;gap:7px;align-items:center;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s;font-size:10px}
.p-terms.on{opacity:1;transform:none}
.tk{flex:none;width:11px;height:11px;border:1.2px solid #8D9096;border-radius:3px;position:relative}
.tk::after{content:"";position:absolute;left:2.4px;top:.6px;width:3px;height:6px;border:solid #15171B;border-width:0 1.6px 1.6px 0;transform:rotate(40deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.ack .tk{background:#E9E7E0;border-color:#E9E7E0}.ack .tk::after{transform:rotate(40deg) scale(1)}
.punch{position:absolute;left:20px;bottom:15px;display:flex;gap:9px}
.punch b{position:relative;display:block;width:13px;height:13px;border-radius:50%;background:#0B0C0E;box-shadow:0 1px 0 rgba(255,255,255,.16),inset 0 2px 3px rgba(0,0,0,.9)}
.punch b::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#E9E7E0;box-shadow:0 0 6px rgba(233,231,224,.5);transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.punch b.on::after{transform:scale(1)}
.med{position:absolute;right:20px;bottom:15px;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
 font:600 15px/1 var(--serif);font-variation-settings:"opsz" 18,"SOFT" 100;color:#D9D7D0;
 background:radial-gradient(circle at 35% 28%,#34373E,#1A1C21);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -2px 4px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.5),0 0 0 4px rgba(255,255,255,.04)}
.med span{opacity:0;transform:scale(.7);transition:opacity .3s,transform .3s}.med.on span{opacity:1;transform:none}
.med::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed rgba(255,255,255,.2)}
.pstamp{position:absolute;right:12px;bottom:64px;width:84px;height:84px;display:grid;place-items:center;text-align:center;border:2px solid #EDEBE4;border-radius:50%;outline:1px solid rgba(237,235,228,.4);outline-offset:3px;
 font:600 15px/1 var(--serif);font-variation-settings:"opsz" 18,"SOFT" 0;color:#EDEBE4;opacity:0;transform:rotate(-12deg) scale(1.8);pointer-events:none;
 -webkit-mask-image:radial-gradient(circle at 30% 25%,#000 55%,rgba(0,0,0,.7));background:rgba(21,23,27,.55)}
.pstamp small{display:block;font:400 9.5px/1 var(--mono);color:#B8BBC0;margin-top:5px}
.pend .pstamp,.act .pstamp{animation:slam .45s .0s cubic-bezier(.3,1.4,.55,1) forwards}
@keyframes slam{0%{opacity:0;transform:rotate(-12deg) scale(1.8)}55%{opacity:1}100%{opacity:.95;transform:rotate(-12deg) scale(1)}}
.pend .pstamp.delay{animation-delay:1s}
.back .big{position:absolute;right:-70px;top:-40px;width:300px;height:300px;color:rgba(255,255,255,.07);--mk:#1D2026}
.back .strip{position:absolute;left:0;right:0;top:34px;height:38px;background:#0B0C0E;box-shadow:inset 0 1px 2px #000,0 1px 0 rgba(255,255,255,.08)}
.back .line{position:absolute;left:20px;bottom:44px;font:500 17px/1.15 var(--serif);font-variation-settings:"opsz" 24,"SOFT" 100;color:#E4E2DB}
.back .mono{position:absolute;left:20px;bottom:20px}
/* flip choreography: lift, turn, settle */
.flip.spin{animation:flip 1.5s cubic-bezier(.45,.05,.2,1) both}
@keyframes flip{0%{transform:translateY(0) scale(1) rotateY(0)}28%{transform:translateY(-26px) scale(1.06) rotateY(80deg)}58%{transform:translateY(-34px) scale(1.07) rotateY(220deg)}100%{transform:translateY(0) scale(1) rotateY(360deg)}}
.shadow{position:absolute;left:50%;top:322px;width:270px;height:22px;margin-left:-135px;border-radius:50%;background:radial-gradient(closest-side,rgba(21,23,27,.28),transparent);transition:opacity .3s}
.shadow.mini{opacity:0}
.shadow.spin{animation:sh 1.5s cubic-bezier(.45,.05,.2,1) both}
@keyframes sh{28%,58%{opacity:.4;transform:scale(.8)}}
.pulse{animation:glint 1.3s .1s ease-out both}
@keyframes glint{0%{opacity:.4}40%{opacity:.6}100%{opacity:.3}}
/* ---------- the sheet ---------- */
.sheet{position:absolute;left:0;right:0;top:348px;bottom:-130px;background:var(--sheet);border-radius:30px 30px 0 0;padding:0 22px calc(max(env(safe-area-inset-bottom),22px) + 130px);display:flex;flex-direction:column;transition:transform .55s cubic-bezier(.2,.7,.2,1);
 box-shadow:0 -1px 0 rgba(255,255,255,.7) inset,0 -18px 40px -18px rgba(21,23,27,.28),0 -1px 0 rgba(21,23,27,.08)}
.sheet.tall{transform:translate3d(0,-130px,0);padding-bottom:max(env(safe-area-inset-bottom),22px)}
.sheet::before{content:"";position:absolute;top:9px;left:50%;width:36px;height:4px;margin-left:-18px;border-radius:4px;background:#CFCDC4}
.pane{flex:1;display:flex;flex-direction:column;padding-top:28px;min-height:0}
.pane.in{animation:pin .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes pin{from{opacity:0;transform:translateY(10px)}}
h1{font:600 27px/1.1 var(--serif);font-variation-settings:"opsz" 56,"SOFT" 100;letter-spacing:-.015em;text-wrap:balance}
.sub{margin-top:8px;font-size:15px;line-height:1.4;color:var(--tx2);max-width:34ch}
.fld{margin-top:18px;display:block}
.lab{display:block;margin:0 0 7px 2px;font-size:13px;color:var(--tx2);font-weight:500}
input[type=email],input[type=tel]{width:100%;height:58px;border-radius:16px;border:1.5px solid var(--line);background:#fff;padding:0 18px;font:500 17px var(--sans);color:var(--ink);outline:0}
input:focus-visible{border-color:var(--ink);box-shadow:0 0 0 4px rgba(21,23,27,.08)}
input::placeholder{color:#A4A5A7}
.note{margin-top:10px;font-size:13px;color:var(--mist);line-height:1.4}
.opts{display:flex;flex-direction:column;gap:10px;margin-top:20px}.opts .opt{flex:none}
.row{display:flex;gap:8px}
.opt{flex:1 0 auto;height:58px;border-radius:16px;border:1.5px solid transparent;background:var(--chip);font:500 16px var(--sans);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:0 18px;text-align:left}
.opt.c{justify-content:center;padding:0 8px}
.opt .r{width:20px;height:20px;border-radius:50%;border:1.5px solid #B4B2A9;position:relative;flex:none}
.opt[aria-pressed=true]{background:var(--ink);color:#F1EFE8}
.opt[aria-pressed=true] .r{border-color:#F1EFE8}.opt[aria-pressed=true] .r::after{content:"";position:absolute;inset:3.5px;border-radius:50%;background:#F1EFE8}
.opt:focus-visible,.go:focus-visible,.lnk:focus-visible,.ackrow:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.opt:active{opacity:.8}
.compact .opt{height:50px;font-size:15px}
.compact input{height:50px}
.compact .fld{margin-top:12px}
.compact h1{font-size:25px}
.consent{margin-top:8px;font-size:12.5px;color:var(--tx2);line-height:1.35}
.terms{margin-top:14px;padding-left:14px;border-left:2px solid var(--ink);font:400 16px/1.5 var(--serif);font-variation-settings:"opsz" 16,"SOFT" 50;color:#2A2C31}
.ackrow{margin-top:18px;display:flex;align-items:center;gap:14px;height:62px;width:100%;border-radius:16px;border:1.5px solid var(--line);background:#fff;padding:0 16px;font:500 16px var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.ackrow .box{width:26px;height:26px;border-radius:8px;border:1.5px solid #B4B2A9;position:relative;flex:none}
.ackrow .box::after{content:"";position:absolute;left:8px;top:3px;width:6px;height:12px;border:solid #F1EFE8;border-width:0 2.5px 2.5px 0;transform:rotate(40deg) scale(0);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.ackrow[aria-pressed=true]{border-color:var(--ink)}
.ackrow[aria-pressed=true] .box{background:var(--ink);border-color:var(--ink)}.ackrow[aria-pressed=true] .box::after{transform:rotate(40deg) scale(1)}
.acts{margin-top:auto;display:flex;flex-direction:column;align-items:stretch;gap:2px;padding-top:14px}
.go{height:58px;border-radius:18px;border:0;background:var(--ember);color:var(--ember-tx);font:600 17px var(--sans);cursor:pointer;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 -2px 0 rgba(0,0,0,.12) inset,0 10px 18px -8px rgba(255,90,31,.55)}
.go[disabled]{opacity:.32;box-shadow:none;cursor:default}
.go:active:not([disabled]){opacity:.9}
.lnk{height:44px;background:none;border:0;font:500 15px var(--sans);color:var(--tx2);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#B8B6AD}
.sp{height:44px}
.fine{margin:10px 0 0;font-size:12.5px;color:var(--mist);text-align:center}
.next{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column}
.next li{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line);font-weight:500;font-size:15px}
.next li::before{content:"";width:10px;height:10px;border-radius:50%;border:1.5px solid #B4B2A9;flex:none}
.next li.d::before{background:var(--ink);border-color:var(--ink)}
.next span{margin-left:auto;font-weight:400;color:var(--mist);font-size:13.5px}
.demo{position:absolute;right:14px;bottom:8px;font:400 10px var(--mono);color:var(--mist);background:none;border:0;cursor:pointer;text-decoration:underline;padding:6px}
/* ---------- the real figure step ---------- */
.figarea{position:relative;flex:1;min-height:0;margin-top:2px;padding-bottom:24px;display:flex;justify-content:center}
.figw{height:100%;aspect-ratio:100/222;transition:transform .8s cubic-bezier(.34,1.32,.42,1);transform-origin:50% 50%}
.figw.lean{transform:scaleX(.92)}
.fbr{height:100%;animation:br 5.5s ease-in-out infinite;transform-origin:50% 55%}
@keyframes br{50%{transform:scale(1.012)}}
.flipw{height:100%;transition:transform .2s ease-in}.flipw.mid{transform:scaleX(.02)}
#fig{display:block;height:100%;width:100%;overflow:visible;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.rf-sil{fill:#B9BAB2;stroke:#B9BAB2;stroke-width:.8;stroke-linejoin:round}
.rf-g path{fill:#D7D6CE}
.rf-gr{fill:none;stroke:var(--sheet);stroke-width:.8;stroke-linejoin:round;pointer-events:none}.rf-gr.thin{stroke-width:.5}
.rf-lit{opacity:0;transition:opacity .35s;pointer-events:none}.rf-lit path{fill:var(--ink2)}.rf-lit.on{opacity:1}
.rf-lit.on .pul{animation:lp 3.6s ease-in-out infinite}@keyframes lp{50%{opacity:.8}}
.rf-ring{opacity:0;transition:opacity .3s;pointer-events:none}.rf-ring path{fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round}.rf-ring.on{opacity:1}
.rf-g{outline:none}.rf-g:focus-visible path{stroke:var(--ink);stroke-width:.8;stroke-dasharray:2 1.4}
.pulse{fill:none;stroke:var(--ink);stroke-width:.9;opacity:0;transform-box:fill-box;transform-origin:center}
.pulse.go{animation:pu .8s cubic-bezier(.22,.8,.26,1)}@keyframes pu{from{opacity:.6;transform:scale(.25)}to{opacity:0;transform:scale(1.5)}}
.tb{position:absolute;top:6px;min-width:76px;height:48px;padding:0 16px;border-radius:24px;border:1.5px solid var(--line);background:var(--sheet);font:500 15px var(--sans);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
.tb svg{width:18px;height:18px}
.tb[aria-pressed=true]{background:var(--ink);color:#F1EFE8;border-color:var(--ink)}
.tb.l{left:0}.tb.r{right:0}
.tb:focus-visible{outline:3px solid var(--ink);outline-offset:2px}.tb:active{opacity:.8}
.fhint{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:12.5px;color:var(--mist);pointer-events:none}
/* mock invite email */
.mail{position:absolute;left:12px;right:12px;top:10px;z-index:9;display:flex;gap:11px;align-items:center;padding:11px 14px;border-radius:18px;background:rgba(250,249,245,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
 box-shadow:0 10px 24px -8px rgba(21,23,27,.35),0 0 0 1px rgba(21,23,27,.06);transform:translateY(-90px);opacity:0}
.mail.show{animation:mailin .55s cubic-bezier(.2,.9,.3,1.1) forwards}
@keyframes mailin{to{transform:none;opacity:1}}
.mail svg{width:34px;height:34px;border-radius:9px;flex:none;color:#fff;--mk:#FF5A1F;background:var(--ember)}
.mail b{display:block;font-size:13.5px;font-weight:600}.mail span{font-size:13px;color:var(--tx2)}
.mail small{margin-left:auto;font-size:11.5px;color:var(--mist);align-self:flex-start}
@media (prefers-reduced-motion:reduce){
 .tilt{transition:none}.sheen,.glare{transition:none}
 .flip.spin{animation:rfade .6s both}.shadow.spin{animation:none}
 @keyframes rfade{0%,100%{opacity:1}40%{opacity:.2}}
 .pend .pstamp,.act .pstamp{animation:none;opacity:.95;transform:rotate(-12deg)}
 .p-goal.on .stamp{animation:none;opacity:.92;transform:rotate(-3.5deg)}
 .pane.in{animation:fadeonly .2s both}@keyframes fadeonly{from{opacity:0}}
 .mail.show{animation:fadeonly .3s forwards;transform:none;opacity:1}
 .dot{animation:none!important}.fbr,.rf-lit .pul{animation:none!important}.stage,.sheet,.figw,.flipw,.rf-lit,.rf-ring,.p-goal{transition-duration:.01s!important}.p-goal.on .gs,.p-goal.bump .gs{animation:none}.punch b::after,.mk,.p-terms,.med span,.tk::after{transition:none}
}

/* v5 additions. Pass styles above come unchanged from v4. One easing token set, transform/opacity only (the two morph
   outlines are the single exception: their path data is interpolated in JS). */
:root{--e-out:cubic-bezier(.22,.8,.26,1);--e-io:cubic-bezier(.65,.05,.25,1);--e-soft:cubic-bezier(.2,.7,.2,1);
 --t-cam:1.15s;--t-fast:.28s;--t-mid:.55s;--ps:.58;--st:210px;--act:#15171B;--pres:#A9AAA3}
#app{height:100dvh;min-height:0}
@media (min-width:700px){body{align-items:center;background:#CFCDC4}
 #app{width:390px;max-width:390px;height:min(844px,calc(100dvh - 32px));border-radius:44px;background:var(--bone);box-shadow:0 0 0 10px #15171B,0 30px 70px -20px rgba(21,23,27,.5)}}
.hd{z-index:6;height:48px;padding-top:max(env(safe-area-inset-top),12px)}
.pbar{position:absolute;z-index:6;top:46px;left:22px;right:22px;height:3px;display:flex;gap:5px}
.pbar i{flex:1;border-radius:3px;background:rgba(21,23,27,.12);position:relative;overflow:hidden}
.pbar i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-mid) var(--e-out)}
.pbar i.on::after{transform:scaleX(1)}
/* pass: always at the top, scaled per step */
.stage{top:56px;left:50%;width:332px;height:252px;margin-left:-166px;display:block;perspective:900px;transform-origin:50% 0;
 transform:scale(var(--ps));transition:transform var(--t-cam) var(--e-io);z-index:3}
.stage.mini{transform:scale(var(--ps))}
.tilt{transition:transform .25s var(--e-soft)}
.shadow{display:none}
.punch{gap:10px;bottom:14px}.punch b{width:16px;height:16px}.punch b::after{inset:3.5px}
/* ---------- scene: the one figure ---------- */
#scene{position:absolute;left:0;right:0;top:var(--st);bottom:0;overflow:hidden;z-index:1}
#fig{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#cam{transform-origin:0 0;transition:transform var(--t-cam) var(--e-io);will-change:transform}
#flipg{transform-origin:0 0;transition:transform .24s cubic-bezier(.5,0,.8,.4)}
#flipg.sq{transform:scaleX(.02)}#flipg.un{transition-timing-function:cubic-bezier(.2,.7,.3,1);transition-duration:.34s}
.vw{opacity:0;transition:opacity var(--t-fast) linear;pointer-events:none}.vw.cur{opacity:1;pointer-events:auto}
.rf-sil{fill:#B9BAB2;stroke:#B9BAB2;stroke-width:.8;stroke-linejoin:round;transition:opacity var(--t-mid) linear}
.mp path{fill:#D7D6CE;transition:opacity var(--t-mid) linear}.mp path.dim{opacity:.28}
.mp.rev{opacity:0}
.pr path,.ac path,.lt path{opacity:0;transition:opacity var(--t-mid) linear;pointer-events:none}
.pr path{fill:var(--pres)}.ac path{fill:var(--act)}.lt path{fill:#2D3139}
.pr path.on,.ac path.on,.lt path.on{opacity:1}
.pr,.ac,.lt{pointer-events:none}
.gr{fill:none;stroke:var(--sheet);stroke-linejoin:round;pointer-events:none}.gr.k{stroke-width:.8}.gr.n{stroke-width:.5}
.rg{opacity:0;transition:opacity var(--t-fast) linear;pointer-events:none}.rg.on{opacity:1}.rg path{fill:none;stroke:#fff;stroke-width:1.7;stroke-linejoin:round}
.mo{fill:none;stroke:#fff;stroke-width:1.6px;stroke-linejoin:round;vector-effect:non-scaling-stroke;pointer-events:none;opacity:0;transition:opacity var(--t-fast) linear}
.mo.on{opacity:1}
.mo2{stroke:var(--act);stroke-width:3px;opacity:.0}.mo2.on{opacity:.9}
/* side callout: tip + breakdown */
.pn{position:absolute;top:10px;left:var(--pl,58%);right:14px;display:flex;flex-direction:column;gap:12px;z-index:2;pointer-events:none}
.pn>*{pointer-events:auto}
.tip{font:400 13px/1.38 var(--sans);color:var(--tx2);padding-left:10px;border-left:1.5px solid var(--ink);transition:opacity var(--t-fast) linear,transform var(--t-fast) var(--e-soft);text-wrap:pretty}
.tip.sw{opacity:0;transform:translateY(4px)}
.pact{display:flex;flex-direction:column;gap:8px}
.tb{position:static;min-width:0;width:100%}
.bk{transition:opacity var(--t-mid) linear,transform var(--t-mid) var(--e-out)}
.bk.off{opacity:0;transform:translateY(8px);pointer-events:none}
.bt{font:600 15px/1.15 var(--serif);font-variation-settings:"opsz" 18,"SOFT" 100;color:var(--ink);margin-bottom:6px}
.bt small{display:block;font:400 11.5px/1.3 var(--sans);color:var(--mist);margin-top:2px}
.ml{list-style:none;padding:0;display:flex;flex-direction:column}
.ml li{display:flex;align-items:center;gap:8px;min-height:21px;font:500 13px/1.2 var(--sans);color:var(--mist);transition:color var(--t-fast) linear}
.ml li i{flex:none;width:7px;height:7px;border-radius:50%;border:1.3px solid #B4B2A9;transition:transform var(--t-mid) var(--e-out),background var(--t-fast) linear,border-color var(--t-fast) linear}
.ml li.on{color:var(--ink)}.ml li.on i{background:var(--ink);border-color:var(--ink);transform:scale(1.25)}
.mv{margin-top:8px;transition:opacity var(--t-fast) linear,transform var(--t-fast) var(--e-soft)}
.mv.sw{opacity:0;transform:translateY(4px)}
.mv .lab{margin:0 0 3px;font-size:12px;color:var(--mist)}
.mv ol{list-style:none;padding:0;display:flex;flex-direction:column;gap:2px}
.mv li{font:500 13px/1.25 var(--sans);color:var(--ink);padding-left:10px;position:relative}
.mv li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:1.5px;background:var(--ink)}
.ld,.ldd{position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--t-fast) linear,transform .6s var(--e-out)}
.ld{width:1px;height:1px;background:var(--ink);transform-origin:0 0}
.ldd{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 2px var(--sheet)}
.ld.on,.ldd.on{opacity:.85}
/* sheet */
.sheet{top:auto;bottom:0;max-height:calc(100% - var(--st) - 160px);padding:0 22px max(env(safe-area-inset-bottom),18px);transition:none;z-index:4;overflow:hidden}
.sheet.tall{transform:none;padding-bottom:max(env(safe-area-inset-bottom),18px)}
.ackrow{margin-top:0}
.pane{overflow-y:auto;overscroll-behavior:contain;padding-top:20px;scrollbar-width:none}.pane::-webkit-scrollbar{display:none}
.pane.in{animation:pin .42s var(--e-out) both}
.acts{position:sticky;bottom:0;background:var(--sheet);margin-top:auto;padding-top:10px}
h1{font-size:25px}
.compact h1{font-size:23px}
.compact .opt,.compact input{height:46px}.compact .fld{margin-top:8px}.compact .lab{margin-bottom:5px}
.next{margin-top:12px}.next li{padding:9px 0}
.sub{margin-top:6px}
.go{height:54px}
@media (max-height:700px){:root{--ps:.44}
 .sheet{max-height:calc(100% - var(--st) - 160px)}
 .bt small,.mv .lab{display:none}.bt{margin-bottom:4px}.ackrow{height:50px;margin-top:0}.terms{font-size:14px;line-height:1.35;margin-top:8px}.pane h1.t4{font-size:18px}.pane.p4{padding-top:14px}.pn{gap:8px}.tip{font-size:12px}.mv li{font-size:12px;line-height:1.2}.ml li{min-height:19px;font-size:12.5px}.bt{font-size:14px}
 h1{font-size:22px}.compact h1{font-size:21px}.sub{font-size:14px}.note{margin-top:6px}
 .pane{padding-top:20px}.fld{margin-top:12px}.go{height:50px}.lnk{height:40px}
 .tip{font-size:12.5px;line-height:1.32}.mv li{font-size:12.5px}
 .compact .opt,.compact input{height:44px}
 .ml.solo li:not(.on){display:none}}
.zoomed{--ps:.5}
.final{--ps:.7}
@media (max-height:700px){.final{--ps:.5}.zoomed{--ps:.38}}
.mail{z-index:9}
/* phones: no pass card during the form; it arrives as the reward on the success screen */
#app.nopass .stage{opacity:0;transform:translate3d(0,-16px,0) scale(var(--ps));pointer-events:none;transition:opacity var(--t-fast) linear,transform var(--t-mid) var(--e-out)}
#app .stage{transition:transform var(--t-cam) var(--e-io),opacity var(--t-mid) linear}
@media (prefers-reduced-motion:reduce){
 #cam,#flipg,.stage,.ld,.ldd{transition:none!important}
 .vw,.mp,.pr,.ac,.lt,.rg,.mo,.tip,.bk,.mv{transition-duration:.2s!important}
 .tip.sw,.mv.sw,.bk.off{transform:none}
 .pane.in{animation:fadeonly .2s both}
}

.pane h1.t4{font-size:23px}
@media (max-height:700px){.pane h1.t4{font-size:18px}}
#app.zoomed .lt path.on{opacity:0}
.skm{display:none}
@media (max-height:700px){.acts .lnk{display:none}.skm{display:block;width:100%;margin-top:6px}}

.sline{position:absolute;z-index:6;top:54px;left:22px;right:22px;height:22px;font:400 13px/22px var(--sans);color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sline b{font-weight:500;color:var(--ink)}.sline span{color:var(--mist)}
.stage{opacity:0;visibility:hidden;pointer-events:none;transition:transform var(--t-cam) var(--e-io),opacity var(--t-mid) linear,visibility 0s linear var(--t-mid)}
.final .stage{opacity:1;visibility:visible;pointer-events:auto;transition:transform var(--t-cam) var(--e-io),opacity var(--t-mid) linear .2s,visibility 0s}
.final .sline{display:none}

/* v5.2: plain typography docked at the side, no leader, no box */
.tip{border-left:0;padding-left:0;font:400 13px/1.38 var(--sans);color:var(--mist)}
.pt{transition:opacity .22s linear,transform .26s var(--e-soft)}
.pt.sw{opacity:0;transform:translateY(4px)}
#tip:not(.sw){transition-delay:.06s}#mv:not(.sw){transition-delay:.12s}
h2.pt{font:600 17px/1.2 var(--serif);font-variation-settings:"opsz" 20,"SOFT" 100;color:var(--ink);margin:0}
.pn{gap:6px}
.mv{list-style:none;padding:0;margin-top:6px;display:block}
.mv li{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--line);font:500 13px/1.25 var(--sans);color:var(--ink)}
.mv li::before{display:none}.mv li .e{flex:none;font-weight:400;font-size:12px;color:var(--mist)}
.ml li.on i{transform:none}
.lt path{transition:opacity .28s var(--e-soft)}
.mp path.soft{opacity:.72}
.mo2{stroke-width:1.2px;opacity:0}.mo2.on{opacity:.9}
.bk{margin-top:4px}
@media (max-height:700px){h2.pt{font-size:15px}.mv li{padding:4px 0;font-size:12px}.mv li .e{font-size:11px}}

/* v5.3 */
:root{--st:92px;--lit:#8B8780;--act:#5C5852;--pres:#B7B4AB}
.lt path{fill:var(--lit)}.ac path{fill:var(--act)}.pr path{fill:var(--pres)}
#fig{right:auto;width:var(--fw,50%)}
.pn{left:calc(var(--fw,50%) + 8px);right:16px;top:12px}
#scene{top:var(--st)}
#scene[data-goal=build] .mp path{fill:#D9D3C6}#scene[data-goal=cut] .mp path{fill:#D0D4D6}#scene[data-goal=both] .mp path{fill:#D4D4CB}
.mp path{transition:opacity var(--t-mid) linear,fill .7s var(--e-soft)}
.flipb{position:absolute;z-index:3;left:calc(var(--fw,50%) - 52px);top:8px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--sheet);color:var(--ink);display:grid;place-items:center;cursor:pointer}
.flipb[hidden]{display:none}.flipb svg{width:18px;height:18px}.flipb:active{opacity:.8}.flipb:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.gl2{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.grow{display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:64px;padding:11px 18px;border-radius:16px;border:1.5px solid transparent;background:var(--chip);font:inherit;color:var(--ink);cursor:pointer;text-align:left}
.grow b{font:600 16px/1.2 var(--sans)}.grow span{font:400 13px/1.3 var(--sans);color:var(--tx2)}
.grow[aria-pressed=true]{background:var(--ink);color:#F1EFE8}.grow[aria-pressed=true] span{color:#C9C7C0}
.rl{margin-top:10px}.rr{display:flex;align-items:center;gap:10px;min-height:52px;border-top:1px solid var(--line)}
.rv{flex:1;min-width:0}.rv small{display:block;font:400 12px/1.2 var(--sans);color:var(--mist)}.rv b{display:block;font:500 15px/1.3 var(--sans);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv{color:var(--mist);font-weight:400}.sv{font-size:12.5px;color:var(--mist)}
.ed{height:44px;min-width:44px;padding:0 4px}
.tl{list-style:none;padding:0;margin:14px 0 0}.tl li{display:flex;gap:14px;align-items:flex-start;padding:11px 0;position:relative}
.tl li+li::before{content:"";position:absolute;left:11px;top:-11px;height:22px;width:1.5px;background:var(--line)}
.tl i{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid #B4B2A9;display:grid;place-items:center;color:#F1EFE8}
.tl i svg{width:13px;height:13px}
.tl .d i{background:var(--ink);border-color:var(--ink)}
.tl .n i{border:2px solid var(--ember)}
.tl b{display:block;font:500 15px/1.3 var(--sans)}.tl span{display:block;font:400 13px/1.35 var(--sans);color:var(--mist);margin-top:1px}
.tl .l b{color:var(--tx2)}
.esheet{position:absolute;inset:0;z-index:20;pointer-events:none}.esheet.on{pointer-events:auto}
.scrim{position:absolute;inset:0;background:rgba(21,23,27,.32);opacity:0;transition:opacity var(--t-mid) linear}.on .scrim{opacity:1}
.ebox{position:absolute;left:0;right:0;bottom:0;background:var(--sheet);border-radius:30px 30px 0 0;padding:0 22px max(env(safe-area-inset-bottom),18px);transform:translateY(102%);transition:transform var(--t-mid) var(--e-out);max-height:86%;overflow:auto}
.on .ebox{transform:none}.grab{width:36px;height:4px;border-radius:4px;background:#CFCDC4;margin:9px auto 0}
.ebox h2{font:600 22px/1.15 var(--serif);font-variation-settings:"opsz" 40,"SOFT" 100;margin:20px 0 4px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{height:44px;padding:0 16px;border-radius:22px;border:1.5px solid transparent;background:var(--chip);font:500 15px var(--sans);color:var(--ink);cursor:pointer}
.chip[aria-pressed=true]{background:var(--ink);color:#F1EFE8}
.rv b,.tl b{text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.ebox,.scrim{transition-duration:.2s}.ebox{transform:none;opacity:0}.on .ebox{opacity:1}}
@media (max-height:700px){.acts .lnk{display:block}.acts #skip{display:none}}
.ebox .go{width:100%;display:block}#fig{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent)}