/* Test flow, result, paywall, welcome and plan pages, tema v2. Colours only from CSS vars (css/theme.css). */
.app{min-height:100svh;background:var(--bg)}
.app-bar .wrap{gap:14px}
.progress{flex:1;max-width:14rem;height:3px;border-radius:99px;background:var(--line);overflow:hidden}
.progress i{display:block;height:100%;width:var(--p,0%);border-radius:inherit;background:var(--ink);transition:width .4s var(--ease-out)}
.app-main{width:min(100% - 2*var(--gutter),34rem);margin-inline:auto;padding-block:clamp(1.4rem,4vw,3rem) 4rem}
.scr{display:grid;gap:1rem;animation:scrIn .35s var(--ease-out)}
.scr[hidden]{display:none}
@keyframes scrIn{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.scr{animation:none}}
.scr h1:focus,.scr h1:focus-visible{outline:none;box-shadow:none}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn--block{width:100%}
.scr h1{font-size:clamp(2rem,1.55rem + 2.2vw,2.8rem)}
.scr h2{font-size:1.5rem}
.scr__step{margin:0;font:600 .74rem/1 var(--f-text);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.scr__step--good{color:var(--good-text)}
.scr__lede{margin:0;color:var(--ink-soft);font-size:1.05rem}
.fine{margin:0;font-size:.88rem;color:var(--ink-soft);display:flex;gap:8px;align-items:flex-start}
.fine .ic{flex:none;width:16px;height:16px;margin-top:3px;color:var(--good-text)}
.form{display:grid;gap:1rem;margin-top:.4rem}
.field{display:grid;gap:6px;font-weight:500;font-size:.95rem}
.field em{font-style:normal;font-weight:400;color:var(--ink-soft);font-size:.88rem}
.field input{width:100%;min-height:56px;padding:12px 16px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:500 1.2rem var(--f-text);font-variant-numeric:tabular-nums}
.field input::placeholder{color:var(--ink-faint)}
.field input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px var(--line)}
.form__err{margin:0;color:var(--warn-text);font-weight:600}
.opts{display:grid;gap:10px}
.opts--2{grid-template-columns:1fr 1fr}
.opt{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic b" "ic s";column-gap:14px;align-items:center;text-align:left;width:100%;min-height:64px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:border-color .15s var(--ease-out),box-shadow .15s var(--ease-out)}
@media (hover:hover){.opt:hover{border-color:var(--line-strong)}}
.opt.is-on,.opt:focus-visible{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);outline:none}
.opt b{grid-area:b;font-weight:600;font-size:1.05rem;line-height:1.3}
.opt span{grid-area:s;color:var(--ink-soft);font-size:.93rem;line-height:1.35}
.opt__ic{grid-area:ic;width:44px;height:44px;padding:10px;border:1px solid var(--line);border-radius:50%;color:var(--ink)}
.opts--2 .opt{grid-template-columns:1fr;grid-template-areas:"b";text-align:center;min-height:88px}
.qs{display:grid;gap:10px}
.q{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.q>p{margin:0 0 10px;font-weight:500;line-height:1.4}
.yn{display:flex;gap:8px}
.yn button{flex:1;min-height:46px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);font:500 1rem var(--f-text);cursor:pointer}
.yn button.is-on{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.advice{margin-top:12px;padding:12px 14px;border-radius:var(--r-sm);background:var(--warn-tint);color:var(--ink);font-size:.94rem;line-height:1.5;border-left:2px solid var(--warn)}
.alt-row{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0}
.linkish{background:none;border:0;padding:6px 0;color:var(--ink-soft);font:500 .94rem var(--f-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn--skip{background:transparent}
.warn-note{margin:0;padding:12px 14px;border-radius:var(--r-sm);background:var(--warn-tint);border-left:2px solid var(--warn);font-weight:500}

/* setup diagrams, line schematic + pose pictogram */
.setup-art{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:10px 10px 4px}
.setup-art svg{display:block;width:100%;height:auto}
.setup-art .floor{stroke:var(--line-strong);stroke-width:1.2}
.setup-art .wall{stroke:var(--line-strong);stroke-width:1.2}
.setup-art .prop{fill:none;stroke:var(--ink-soft);stroke-width:1.4;stroke-linejoin:round}
.setup-art .phone{fill:var(--surface);stroke:var(--ink);stroke-width:1.6}
.setup-art .dash{stroke:var(--ink-soft);stroke-width:1.2;stroke-dasharray:4 5;fill:none}
.setup-art text{font:500 12px var(--f-text);fill:var(--ink-soft)}
.setup-art .lab{font-size:9.5px;font-weight:600;letter-spacing:.12em}
.setup{margin:0;padding-left:1.4rem;display:grid;gap:8px}
.setup li{padding-left:6px;line-height:1.5}
.setup li::marker{font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* camera */
.scr--cam{margin-inline:calc(-1 * var(--gutter))}
.cam{position:relative;overflow:hidden;background:var(--screen);color:var(--on-screen);aspect-ratio:9/16;max-height:calc(100svh - var(--bar-h) - 24px);margin-inline:auto;width:100%;border-radius:var(--r-xl)}
.cam video,.cam canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cam .mirror{transform:scaleX(-1)}
.cam.is-demo video{display:none}
.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:18px 20px 30px;background:linear-gradient(color-mix(in oklab,var(--screen) 82%,transparent),transparent)}
.hud__cell{display:grid;gap:6px;line-height:1}
.hud__cell span{font:600 .7rem/1.2 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--screen-soft)}
.hud__cell b{font:500 clamp(2.8rem,11vw,4rem)/1 var(--f-text);letter-spacing:-.03em;color:var(--on-screen);font-variant-numeric:tabular-nums}
.hud__cell--r{text-align:right}
.cd{position:absolute;inset:0;display:grid;place-items:center;font:500 8rem/1 var(--f-display);color:var(--on-screen);pointer-events:none;text-shadow:0 6px 30px var(--screen);font-variant-numeric:tabular-nums}
.cam-hint{position:absolute;left:14px;right:14px;bottom:80px;margin:0;padding:12px 16px;border-radius:var(--r-md);background:color-mix(in oklab,var(--screen) 80%,transparent);color:var(--on-screen);font-weight:500;text-align:center;line-height:1.4}
.cam-hint.is-warn{box-shadow:inset 0 0 0 1.5px var(--warn)}
.cam-ctl{position:absolute;left:14px;right:14px;bottom:14px;display:flex;justify-content:space-between;gap:10px}
.cam-ctl .btn{min-height:46px;padding-inline:18px;font-size:.92rem;background:color-mix(in oklab,var(--screen) 70%,transparent);color:var(--on-screen);border-color:color-mix(in oklab,var(--on-screen) 25%,transparent)}

/* manual + done */
.timer,.done-num{display:grid;justify-items:center;gap:6px;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-card)}
.timer b,.done-num b{font:500 clamp(5rem,4rem + 6vw,7rem)/1 var(--f-display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.timer span,.done-num span{font-weight:500;color:var(--ink-soft);font-size:.95rem}
.man-btns{display:grid;gap:10px}

/* sit-rise */
.srt-art{display:flex;align-items:center;justify-content:center;gap:4px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.srt-art>svg:not(.srt-arrow){width:84px;height:100px}
.srt-arrow{width:20px;height:20px;color:var(--ink-faint)}
@media (prefers-reduced-motion:no-preference){
  .srt-a,.srt-b,.srt-c{animation:srtPulse 3.6s infinite}
  .srt-b{animation-delay:1.2s} .srt-c{animation-delay:2.4s}
}
@keyframes srtPulse{0%,33%{opacity:1}34%,100%{opacity:.4}}
.srt{padding:16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);display:grid;gap:10px}
.srt__cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.srt fieldset{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.srt legend{font:600 .74rem var(--f-text);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.stepper{display:grid;grid-template-columns:minmax(0,1fr) 34px 24px 34px;align-items:center;gap:4px;font-weight:500;font-size:.94rem}
.stepper button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);font:500 1.1rem/1 var(--f-text);cursor:pointer}
.stepper b{text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.tick{display:flex;gap:8px;align-items:center;font-weight:500;font-size:.94rem}
.tick input{width:18px;height:18px;accent-color:var(--ink)}
.srt__score{margin:4px 0 0;font-weight:500;text-align:center;padding-top:10px;border-top:1px solid var(--line)}
.srt__score b{font:500 1.9rem var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}

/* calculating, thin spinner */
.scr--calc{justify-items:center;text-align:center;padding-top:12vh}
.spin{display:block;width:44px;height:44px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--ink);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* result */
.res-hero{display:grid;gap:4px;padding:22px 20px 20px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-card)}
.res-label{margin:0;padding-bottom:10px;border-bottom:1px solid var(--line);font:600 .74rem/1 var(--f-text);letter-spacing:.13em;text-transform:uppercase;color:var(--ink-soft)}
.res-num{font:500 clamp(6.5rem,5rem + 9vw,9rem)/.95 var(--f-display);letter-spacing:-.04em;color:var(--good-text);font-variant-numeric:tabular-nums;margin-top:8px}
.res-num.is-older{color:var(--warn-text)}
.res-scale{margin-top:6px}
.scale--lg{height:36px}
.scale--lg .scale__track{top:17px}
.scale--lg .scale__span{top:16px}
.scale--lg .scale__tick{top:7px;height:22px}
.scale--lg .scale__dot{top:11px;width:14px;height:14px;margin-left:-7px}
.res-scale__ends{display:grid;grid-template-columns:1fr auto 1fr;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.res-scale__ends span:nth-child(2){font-weight:600;color:var(--ink)}
.res-scale__ends span:last-child{text-align:right}
#g-scale .scale__dot,#g-scale .scale__span{transition:left 1.4s var(--ease-out),width 1.4s var(--ease-out)}
.res-line{margin:14px 0 0;font:500 1.3rem/1.3 var(--f-display);letter-spacing:-.005em;text-wrap:balance}
.res-pct{margin:6px 0 0;color:var(--ink-soft)}
.res-pct b{color:var(--ink)}
.res-tests{display:grid;border-top:1px solid var(--line)}
.rt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 2px;border-bottom:1px solid var(--line)}
.rt i{font:600 .74rem var(--f-text);font-style:normal;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.rt b{font-weight:500}
.rt b small{font-weight:600;font-size:1rem;color:var(--ink);margin-left:6px;font-variant-numeric:tabular-nums}
.rt span.rt--locked{display:flex;align-items:center;gap:6px;font:500 .84rem var(--f-text);color:var(--ink-soft)}
.rt--locked svg{width:15px;height:15px}
.share{display:grid;gap:12px;justify-items:center}
.share img{width:min(100%,300px);height:auto;border-radius:var(--r-md);border:1px solid var(--line);box-shadow:var(--sh-card)}
.retest{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.retest__ic{width:56px;height:56px;padding:13px;border:1px solid var(--line);border-radius:50%;color:var(--ink)}
.retest h2{font-size:1.35rem;margin-bottom:4px}
.retest p{margin:0 0 12px;color:var(--ink-soft);font-size:.95rem}
.retest .btn{min-height:46px}
.disclaimer{padding:14px 16px;border:1px solid var(--line);border-left:2px solid var(--ink);border-radius:var(--r-sm);background:var(--surface);font-size:.92rem;color:var(--ink-soft)}
.disclaimer b{color:var(--ink)}

/* paywall sheets */
.sheet{position:fixed;inset:0;z-index:200;display:grid;grid-template-columns:minmax(0,1fr);align-items:end;justify-items:center;background:var(--scrim);padding:12px;overflow-y:auto;overflow-x:hidden}
.sheet[hidden]{display:none}
.sheet__card{position:relative;width:min(100%,32rem);max-width:100%;min-width:0;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding:26px 20px 20px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--bg);color:var(--ink);box-shadow:var(--sh-float);animation:sheetIn .4s var(--ease-out)}
@keyframes sheetIn{from{translate:0 30px;opacity:0}to{translate:0 0;opacity:1}}
@media (min-width:700px){.sheet{align-items:center}}
.sheet__x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);font:300 1.6rem/1 var(--f-text);cursor:pointer}
.sheet h2{font-size:clamp(1.65rem,1.35rem + 1.3vw,2.1rem);padding-right:44px}
.pw-list{list-style:none;margin:0;padding:0;display:grid}
.pw-list li{display:flex;gap:12px;align-items:flex-start;line-height:1.45;padding:10px 0;border-top:1px solid var(--line)}
.pw-list li:first-child{border-top:0}
.pw-list b{font-weight:600}
.pw-list svg{flex:none;width:20px;height:20px;margin-top:1px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.plan{position:relative;display:grid;gap:3px;justify-items:start;text-align:left;padding:18px 14px 14px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer}
.plan.is-on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.plan b{font-weight:600;font-size:1.02rem}
.plan__price{font-weight:500;font-size:.93rem;font-variant-numeric:tabular-nums}
.plan__wk{font-size:.84rem;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.plan__tag{position:absolute;top:-10px;left:12px;padding:3px 9px;border-radius:99px;background:var(--ink);color:var(--bg);font:600 .64rem/1.3 var(--f-text);letter-spacing:.1em;text-transform:uppercase}
.pw-msg{margin:0;padding:10px 12px;border-radius:var(--r-sm);background:var(--surface-2);font-weight:500;text-align:center}
.pw-fine{margin:0;text-align:center;font-size:.9rem;color:var(--ink-soft)}
.pw-fine b{color:var(--ink);font-weight:600}
.pay-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0}
.pay-badges span{padding:4px 10px;border-radius:6px;border:1px solid var(--line);background:var(--surface);font:500 .78rem var(--f-text);color:var(--ink)}
.pay-badges .pay-badges__by{border:0;background:none;color:var(--ink-soft);font-weight:400}
.pw2-sub{margin:0;color:var(--ink-soft)}
.pw2-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;justify-content:center;padding:12px 0;border-block:1px solid var(--line);font-variant-numeric:tabular-nums}
.pw2-price s{color:var(--ink-soft);font-weight:500}
.pw2-price>*{white-space:nowrap}
.pw2-price b{font:500 clamp(2rem,1.5rem + 2.4vw,3rem)/1 var(--f-display);letter-spacing:-.02em;color:var(--good-text)}
.pw2-price span{font-weight:500;color:var(--ink-soft)}
.pw2-no{justify-self:center}

/* welcome + plan */
.card{padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-card);display:grid;gap:12px}
.linkbox{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:var(--r-sm);background:var(--bg);border:1px solid var(--line-strong);font:500 .88rem/1.3 ui-monospace,Menlo,monospace;word-break:break-all}
.week{display:grid;gap:0;border-top:1px solid var(--line)}
.day{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start;padding:14px 2px;border-bottom:1px solid var(--line)}
.card>.day:first-of-type{border-top:1px solid var(--line)}
.day__n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line-strong);color:var(--ink);font:600 .85rem var(--f-text);font-variant-numeric:tabular-nums}
.day.is-done .day__n{background:var(--good);border-color:var(--good);color:var(--surface)}
.day h3{font-size:1.02rem;margin:4px 0}
.day ul{margin:6px 0 0;padding-left:1.1rem;display:grid;gap:6px}
.day li small{display:block;color:var(--ink-soft)}
.day .safety{font-size:.85rem;color:var(--ink-soft);border-left:2px solid var(--warn);padding-left:8px;margin-top:4px}
.day a{color:var(--ink-soft)}
.graph{width:100%;height:auto}
.graph .ln{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round}
.graph .pt{fill:var(--surface);stroke:var(--ink);stroke-width:1.8}
.graph .pt:last-of-type{fill:var(--good);stroke:var(--good)}
.graph .ax{stroke:var(--line-strong);stroke-width:1}
.graph text{font:500 11px var(--f-text);fill:var(--ink-soft);font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{min-height:40px;padding:0 14px;border-radius:99px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:500 .9rem var(--f-text);cursor:pointer}
.tabs button.is-on{border-color:var(--ink);background:var(--ink);color:var(--bg)}