/* Scene progress uses transform/opacity only. Variables inherit from the persistent stage. */
.f-receiving{position:relative;width:42%;height:66%;margin:auto}
.f-photo-wait{position:absolute;inset:0;border:1px dashed var(--line);border-radius:var(--r-btn);background:var(--soft);display:grid;place-items:center}
.f-photo-wait svg{width:36%;fill:none;stroke:var(--flow-color);stroke-width:1.2;opacity:.5}
.f-received{position:absolute;inset:0;opacity:clamp(0,(var(--q) - .72) * 7,1);transform:scale(calc(.92 + clamp(0,(var(--q) - .72) * 7,1) * .08))}
.f-received .f-face{height:100%;aspect-ratio:auto}
.f-received .f-face img{object-position:center 40%}
.f-received .f-face-guide{display:none}
.f-received-tag{position:absolute;right:-14%;top:8%;padding:5px 9px;border-radius:var(--r-btn);background:var(--flow-color);color:#fff;font-size:.9em;white-space:nowrap}
.f-tablet-caption{text-align:center;font-size:.8em;color:var(--muted);margin-top:3%}
.f-pro[data-step="0"] .f-photo-transfer{--fly:clamp(0,(var(--q) - .48) / .27,1);opacity:calc(clamp(0,(var(--q) - .46) * 25,1) * clamp(0,(.8 - var(--q)) * 25,1));transform:translate(calc(var(--fly) * 230%),calc(var(--fly) * -60%)) scale(calc(1 + var(--fly) * .3))}
.f-past .f-questions .f-line{--reveal:clamp(0,(var(--q) - .35 - var(--i) * .16) * 7,1);gap:5px}
.f-questions .f-line>i{width:1.15em;height:1.15em;flex:none;border-radius:50%;position:relative;margin:0}
.f-questions .f-line>i::after{content:'✓';color:#fff;font-style:normal;position:absolute;inset:0;display:grid;place-items:center;font-size:.8em}
.f-agree .f-line{--reveal:clamp(0,(var(--q) - .06 - var(--i) * .15) * 6,1)}
.f-save{position:absolute;bottom:5%;right:5%;background:var(--flow-color);color:#fff;padding:4px 16px;border-radius:var(--r-btn);font-size:.9em;opacity:clamp(0,(var(--q) - .8) * 7,1);transform:translateY(calc((1 - clamp(0,(var(--q) - .8) * 7,1)) * 6px))}
.f-required{font-size:.72em;color:var(--muted);line-height:1.5}
.f-toggle{display:flex;align-items:center;justify-content:space-between;gap:5px;margin-top:10%;font-size:.9em}
.f-toggle>i{display:block;position:relative;flex:none;width:26px;height:15px;border-radius:var(--r-btn);background:var(--line)}
.f-toggle>i::before{content:'';position:absolute;inset:0;border-radius:inherit;background:var(--flow-color);opacity:clamp(0,(var(--q) - .1 - var(--i) * .12) * 8,1)}
.f-toggle b{position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff;transform:translateX(calc(clamp(0,(var(--q) - .1 - var(--i) * .12) * 8,1) * 11px))}
.f-qr-panel{display:flex;flex-direction:column;align-items:center;gap:4%;opacity:clamp(0,(var(--q) - .38) * 6,1);transform:translateY(calc((1 - clamp(0,(var(--q) - .38) * 6,1)) * 8px))}
.f-qr{display:grid;grid-template-columns:repeat(9,1fr);width:56%;aspect-ratio:1;padding:5px;border:1px solid var(--line);border-radius:var(--r-xs);background:#fff;gap:1px}
.f-qr i{background:#fff}.f-qr i.ink{background:var(--ink)}
.f-qr-panel>small{font-size:.75em;color:var(--muted)}
.f-copy{background:var(--soft);border:1px solid var(--line);border-radius:var(--r-btn);padding:4px 12px;font-size:.85em}
.f-report{--arrive:clamp(0,(var(--q) - .65) * 4,1);padding:8% 3%;border-top:1px solid var(--line);opacity:var(--arrive);transform:translateY(calc((1 - var(--arrive)) * 110%));font-size:.9em}
.f-report h4{font-size:1.2em;letter-spacing:-.04em;margin:12% 0}
.f-report small{display:block;color:var(--flow-color);font-size:.95em;margin-top:14%}
.f-report .f-line{font-size:.95em;opacity:1;transform:none}
.f-review{display:grid;grid-template-columns:28% 1fr;gap:7%;align-items:center}
.f-timer{position:relative;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;overflow:hidden;color:var(--flow-color)}
.f-timer::before{content:'';position:absolute;inset:7%;background:var(--soft);border-radius:50%}
.f-timer>i{position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--flow-color) 0deg 300deg,transparent 300deg);transform:rotate(calc(var(--q) * 300deg)) scale(calc(1 - clamp(0,var(--q) * 1.05,1)));opacity:calc(1 - clamp(0,(var(--q) - .7) * 4,1))}
.f-timer b{position:relative;font-size:1.45em}
.f-review-lines{display:grid;grid-template-columns:1fr 1fr;gap:6%}
.f-review .f-panel{padding:10%;min-height:100px}
.f-review .f-line{font-size:.95em;line-height:1.6}
.f-loop{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--flow-color);font-weight:700;font-size:.9em;margin-top:6%;opacity:clamp(0,(var(--q) - .78) * 6,1);transform:translateY(calc((1 - clamp(0,(var(--q) - .78) * 6,1)) * 8px))}
/* Skin: selected answers → selfie guide, then one card flips into view. */
.f-me .sc{padding:8px 14px 14px}
.f-selfie-photo{--photo:clamp(0,(var(--q) - .45) * 5,1);opacity:var(--photo);transform:translateY(calc((1 - var(--photo)) * 10px))}
.f-selfie-photo .f-face{aspect-ratio:3/3.35}
.f-selfie-photo .f-face-guide{transform:scaleY(clamp(.1,(var(--q) - .55) * 5,1));opacity:clamp(0,(var(--q) - .55) * 6,1)}
.f-chips{position:absolute;inset:auto 14px 14px;display:grid;gap:7px;padding:12px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);transform:translateY(calc((1 - clamp(0,var(--q) * 2,1)) * -38%))}
.f-chips .f-check{font-size:11px;font-weight:650;gap:8px}
.f-chips .f-check>i{opacity:clamp(.12,(var(--q) - var(--i) * .12) * 9,1);transform:scale(clamp(.65,(var(--q) - var(--i) * .12) * 9,1))}
.f-type-card{border:1px solid var(--line);border-radius:var(--r-card);padding:10px;background:#fff;overflow:hidden;transform-origin:center;backface-visibility:hidden}
.f-result .f-type-card{transform:perspective(600px) rotateY(calc((1 - clamp(0,var(--q) / .42,1)) * -170deg));opacity:clamp(0,var(--q) * 7,1)}
.f-result{display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:10px}
.f-result .f-type-card{display:flex;flex-direction:column;min-height:0}
.f-result .f-pattern{flex:1;min-height:20px;height:auto}
.f-result .f-type-name,.f-result .f-type-card small{flex:none}
.f-result .f-six{margin:0;grid-template-rows:repeat(6,minmax(0,1fr));min-height:0}
.f-result .f-six>div{padding:0;min-height:0}
.f-pattern{position:relative;height:105px;border-radius:var(--r-btn);overflow:hidden;background:var(--p-me)}
.f-pattern i{position:absolute;border:1px solid #fff;border-radius:50%;width:140px;height:140px;left:-42px;top:-45px;opacity:.6}
.f-pattern i:nth-child(2){left:25px;top:24px;width:160px;height:160px;opacity:.35}
.f-pattern i:nth-child(3){left:95px;top:-60px;opacity:.45}
.f-type-name{display:block;height:9px;width:58%;border-radius:var(--r-xs);background:var(--line);margin:14px 0 7px}
.f-type-card small{font-size:10px;color:var(--muted)}
.f-six{margin-top:12px;display:grid;gap:0}
.f-six>div{--read:clamp(0,(var(--q) - .38 - var(--i) * .065) * 7,1);display:flex;align-items:center;justify-content:space-between;gap:6px;border-bottom:1px solid var(--line);padding:7px 0;font-size:11px;opacity:var(--read);transform:translateY(calc((1 - var(--read)) * 7px))}
.f-six small{font-size:10px;color:var(--muted)}
.f-share-sheet{position:absolute;inset:auto 0 0;background:#fff;border-top:1px solid var(--line);border-radius:var(--r-card) var(--r-card) 0 0;padding:10px 16px 25px;box-shadow:0 -15px 35px -20px var(--line);transform:translateY(calc((1 - clamp(0,(var(--q) - .2) / .5,1)) * 110%))}
.f-handle{display:block;width:30px;height:3px;border-radius:var(--r-xs);margin:0 auto 17px;background:var(--line)}
.f-share-sheet h4{font-size:15px;letter-spacing:-.03em}
.f-share-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0 16px}
.f-share-options>div{display:flex;flex-direction:column;align-items:center;gap:9px;font-size:11px;font-weight:650}
.f-share-options svg{width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-btn);padding:10px;fill:none;stroke:var(--flow-color);stroke-width:1.4}
.f-share-sheet>small{display:block;font-size:10px;text-align:center;color:var(--muted)}
@media(max-width:899px){
  .f-pro{font-size:11px}
  .f-tablet .sc{padding:4%}
  .f-tablet-top small{font-size:8px}
  .f-tablet .f-initial{width:19px;font-size:8px}
  .f-review .f-panel{min-height:72px}
  .f-review{grid-template-columns:23% 1fr;gap:5%}
  .f-timer b{font-size:1.15em}
  .f-side-phone{padding:5px;border-radius:var(--r-btn)}
  .f-side-label{padding:2px 0 5px}
  .f-checks{gap:2px;margin-top:4px}
  .f-side-phone .f-generated{font-size:6px;padding:1px 2px}
  .f-pattern{height:clamp(55px,12svh,100px)}
  .f-six>div{padding:5px 0;font-size:10px}
  .f-six small{font-size:9px}
  .f-type-card{padding:8px}
  .f-chips{gap:5px;padding:9px}
  .f-chips .f-check{font-size:10px}
}

.how [class*="fl-"],.how .sc{word-break:keep-all}