body{margin:0;-webkit-font-smoothing:antialiased;background:#141413}
.sv{--bone:#E7E4DC;--paper:#F2EFE8;--ink:#141413;--graphite:#2A2A28;--lime:#E9FF90;font-family:'Geist',sans-serif;color:var(--ink)}
.sv *{box-sizing:border-box}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.scr{position:relative;container-type:inline-size;min-height:100vh;display:none;flex-direction:column;overflow:hidden}
.sv.live.s0 .k0,.sv.live.s1 .k1,.sv.live.s2 .k2,.sv.live.s3 .k3,.sv.live.s4 .k4,.sv.live.s5 .k5,.sv.live.s6 .k6,.sv.live.s7 .k7{display:flex}
.sv.live .scr .card{animation:cIn .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes cIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
/* color blocks */
.bg-bone{background:var(--bone)}.bg-graphite{background:var(--graphite)}.bg-stone{background:#C9C9C7}.bg-ink{background:#0F0F0E}.bg-lime{background:var(--lime)}
.tx{position:absolute;inset:0;pointer-events:none}
.tx-tissue .tx{background:url(../img/fascia-tissue-texture-light-v1.png) center/cover;mix-blend-mode:multiply;opacity:.9}
.dark.tx-tissue .tx{filter:invert(1);mix-blend-mode:screen;opacity:.35}
.tx-fluted .tx{background:repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 2px,rgba(0,0,0,.16) 3px 10px,rgba(255,255,255,.04) 11px 15px),radial-gradient(ellipse 40% 60% at 30% 40%,rgba(255,255,255,.28),transparent 70%),radial-gradient(ellipse 35% 55% at 75% 70%,rgba(255,255,255,.18),transparent 70%);animation:flu 18s ease-in-out infinite alternate}
@keyframes flu{to{background-position:0 0,40px -30px,-50px 30px}}
.tx-grain .tx{opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
/* top bar */
.top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:24px clamp(20px,3cqw,44px)}
.logo{font-size:15px;letter-spacing:.42em}
.dark .top{color:#F2F2F0}
.prog{display:flex;gap:6px}
.prog i{width:9px;height:9px;border-radius:50%;border:1.2px solid currentColor}
.prog i.on{background:currentColor}
.skip,.link{border:0;background:none;padding:0;font:14px 'Geist',sans-serif;color:inherit;text-decoration:underline;text-underline-offset:5px;cursor:pointer;opacity:.8}
.skip:hover,.link:hover{opacity:1}
/* the card */
.card{position:relative;z-index:2;margin:auto;width:min(1080px,92cqw);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);background:var(--paper);border-radius:3px;box-shadow:0 40px 80px -40px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.04);margin-bottom:max(48px,6vh);min-height:min(600px,74vh)}
.vis{display:flex;flex-direction:column;border-right:1px solid rgba(20,20,19,.14);padding:clamp(22px,2.6cqw,36px)}
.vis-top{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid rgba(20,20,19,.3)}
.vtags{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.vt{font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:5px;padding:4px 10px;line-height:1.2}
.vt.s{font-size:10px;padding:3px 10px}
.orb.soft{background:radial-gradient(circle,#9C9C99 0 45%,#B5B5B2aa 66%,transparent 100%)}
.cd-ic{color:var(--ink);flex:0 0 auto}
.vis-art{flex:1;display:flex;align-items:center;justify-content:center;min-height:200px;position:relative}
.orb{width:clamp(150px,22cqw,300px);aspect-ratio:1;border-radius:50%;filter:blur(18px);transform:scale(var(--g));animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(var(--g))}50%{transform:scale(calc(var(--g) * 1.06))}}
.orb.ink{background:radial-gradient(circle,#1A1A19 0 50%,#1A1A19bb 68%,transparent 100%)}
.orb.lime{background:radial-gradient(circle,#D8F25A 0 55%,#D8F25Acc 70%,transparent 100%)}
.orb.graphite{background:radial-gradient(circle,#2A2A28 0 55%,#2A2A28cc 70%,transparent 100%)}
.vimg{position:absolute;inset:18px 0 0;width:100%;height:calc(100% - 18px);object-fit:cover;filter:grayscale(1) contrast(1.05);border-radius:2px}
.body{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:clamp(26px,3.4cqw,52px)}
.qhead{display:flex;justify-content:space-between;align-items:flex-start;width:100%}
.num{font:700 clamp(64px,7cqw,104px)/.8 'Doto','Geist Mono',monospace;letter-spacing:-.02em}
.tag{display:inline-block;font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1.5px solid var(--ink);border-radius:5px;padding:4px 10px;line-height:1.2}
.q{margin:12px 0 0;font:400 clamp(28px,3.2cqw,46px)/1.04 Arial,Helvetica,sans-serif;letter-spacing:-.04em}
.q.big{font-size:clamp(36px,4.4cqw,64px)}
.hint{margin:0;font-size:15px;line-height:1.55;color:#55554F;max-width:460px}
.lead{margin:6px 0 0;font:400 18px/1.4 Arial,Helvetica,sans-serif;color:var(--ink)}
.opts{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.opt{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.opt span{display:inline-block;font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;border:1.5px solid var(--ink);border-radius:5px;padding:10px 13px;background:transparent;transition:background-color .25s,color .25s}
.opt:hover span{background:rgba(20,20,19,.06)}
.opt input:checked+span{background:var(--ink);color:#fff}
.opt input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.body textarea,.body input:not([type=checkbox]):not([type=radio]){width:100%;border:0;border-bottom:1.5px solid rgba(20,20,19,.35);background:transparent;font:400 24px/1.35 Arial,Helvetica,sans-serif;color:var(--ink);padding:10px 2px;outline:none;resize:vertical}
.body textarea:focus,.body input:focus{border-bottom-color:var(--ink)}
.acts{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:16px;width:100%}
.btn,.btn:visited{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:500 15px 'Geist',sans-serif;cursor:pointer;text-decoration:none;transition:background-color .3s,color .3s}
.btn:hover{background:var(--lime);color:var(--ink)}
.btn svg{transition:transform .35s cubic-bezier(.2,.7,.2,1)}.btn:hover svg{transform:translateX(4px)}
.back{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);margin-right:auto}
.back:hover{background:rgba(20,20,19,.06)}
.acts .btn:first-child{margin-right:0}
.next{list-style:none;margin:8px 0 0;padding:0;width:100%;border-top:1.5px solid var(--ink)}
.next li{display:grid;grid-template-columns:44px 1fr;gap:2px 12px;padding:14px 0;border-bottom:1px solid rgba(20,20,19,.15)}
.next .n{grid-row:1/3;font-family:'Geist Mono',monospace;font-size:12px;color:#6B6A66;padding-top:4px}
.next b{font:400 20px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.02em}
.next li>span:last-child{font-size:14px;line-height:1.5;color:#55554F}
@container (max-width:760px){
.card{grid-template-columns:1fr;min-height:0;margin-top:8px}
.vis{border-right:0;border-bottom:1px solid rgba(20,20,19,.14)}
.vis-art{min-height:150px;height:150px}
.orb{width:130px}
}
@media (prefers-reduced-motion: reduce){.orb,.tx-fluted .tx,.sv.live .scr .card{animation:none}}
/* strip view: every screen side by side */
.sv.strip{display:grid;grid-template-columns:repeat(4,max-content);gap:40px;padding:60px;background:#1B1B1A}
.sv.strip .scr{display:flex;min-height:0;width:1440px;height:900px;zoom:.42;border-radius:24px}
.strip-cap{display:block;margin:0 0 10px;font:12px 'Geist Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#9A9A95}

/* ===== lab layer ===== */
.vis-top{border-bottom:0 !important;padding-bottom:0 !important;align-items:center}
.pill{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;border:1.2px solid var(--ink);border-radius:999px;padding:4px 11px;line-height:1.2}
.marks{display:flex;justify-content:space-between;margin:22px 0 4px;font:300 15px/1 'Geist Mono',monospace;letter-spacing:.3em;color:var(--ink)}
.vis-art{overflow:hidden;border-radius:2px}
.frost{position:absolute;left:-1px;right:-1px;top:0;height:52%;-webkit-backdrop-filter:blur(16px) saturate(.6);backdrop-filter:blur(16px) saturate(.6);background:linear-gradient(180deg,rgba(242,239,232,.7),rgba(242,239,232,.25));border-bottom:1px solid rgba(255,255,255,.7);transition:height 1.2s cubic-bezier(.2,.7,.2,1)}
.k1 .frost{height:46%}.k2 .frost{height:40%}.k3 .frost{height:34%}.k4 .frost{height:28%}.k5 .frost{height:22%}.k6 .frost{height:0;border:0}
.vimg{inset:0 !important;height:100% !important}
.spec{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:3px 18px;font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#8A8A85}
.spec p{grid-column:1/-1;margin:0 0 6px;color:var(--ink);letter-spacing:.1em}
.spec span{display:flex;gap:8px;align-items:baseline;white-space:nowrap}
.spec b{font-weight:400;color:var(--ink)}
.spec em{font-style:normal;margin-left:auto;color:#B5B5B0}
.spec em::after{content:"—"}
.spec .cur{color:var(--ink)}
.spec .cur em::after{content:"Now"}
.sv:has([name=q-reason]:checked) .sr01 em::after,.sv:has([name=q-goal]:checked) .sr02 em::after,.sv:has([name=q-familiar]:checked) .sr03 em::after,.sv:has([name=q-test]:checked) .sr04 em::after,.sv:has(#beta-change:not(:placeholder-shown)) .sr05 em::after,.sv:has(#beta-name:not(:placeholder-shown)) .sr06 em::after{content:"Saved";color:var(--ink)}
.sv:has([name=q-reason]:checked) .sr01 em,.sv:has([name=q-goal]:checked) .sr02 em,.sv:has([name=q-familiar]:checked) .sr03 em,.sv:has([name=q-test]:checked) .sr04 em,.sv:has(#beta-change:not(:placeholder-shown)) .sr05 em,.sv:has(#beta-name:not(:placeholder-shown)) .sr06 em{background:var(--lime);padding:0 4px;color:var(--ink)}
.k6 .spec .cur em::after{content:"Done"}
@container (max-width:760px){.spec,.marks{display:none}}
.cellart{width:min(100%,400px);height:auto;overflow:visible}
.cellart .yc{fill:#D8F25A;transform-box:fill-box;transform-origin:center;animation:cDrift var(--t) ease-in-out var(--d) infinite alternate,cPop .9s cubic-bezier(.2,1.4,.3,1) var(--d) both}
.cellart .gc{fill:#2A2A28;animation:cDrift var(--t) ease-in-out infinite alternate}
.cellart .nu{fill:#141413;opacity:.75}
.cellart .mem{fill:none;stroke:#141413;stroke-width:1;stroke-dasharray:2 5;opacity:.55;transform-box:fill-box;transform-origin:center;animation:spin 60s linear infinite}
.cellart .mem.pulse{stroke-dasharray:none;opacity:.4;animation:pulse 3s ease-out infinite}
@keyframes cDrift{to{transform:translate(var(--dx),var(--dy))}}
@keyframes cPop{from{r:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%{transform:scale(.7);opacity:.5}100%{transform:scale(1.25);opacity:0}}
.cell-lab{position:absolute;left:50%;bottom:10%;transform:translateX(-50%);font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1.2px solid var(--ink);border-radius:5px;padding:3px 8px;background:var(--lime);z-index:2}
@media (prefers-reduced-motion: reduce){.cellart *{animation:none !important}}

/* ===== soft: calmer lab ===== */
.marks{display:none}
.vis-art{margin-top:18px}
.spec{font-size:9.5px;opacity:.85}
/* cells orb: soft blurred cells breathing inside a round fade */
.orbc{position:relative;width:clamp(170px,23cqw,310px);aspect-ratio:1;border-radius:50%;transform:scale(var(--g));-webkit-mask-image:radial-gradient(circle,#000 42%,rgba(0,0,0,.6) 58%,transparent 72%);mask-image:radial-gradient(circle,#000 42%,rgba(0,0,0,.6) 58%,transparent 72%);animation:breathe 8s ease-in-out infinite}
.orbc .cb{position:absolute;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);filter:blur(4px);animation:cbDrift var(--t) ease-in-out var(--d) infinite alternate}
.orbc .cb.a{background:radial-gradient(circle at 40% 40%,#B9B9B5 0 35%,#9C9C98 70%,#8E8E8A 100%)}
.orbc .cb.b{background:radial-gradient(circle at 45% 40%,#CFCFCB 0 30%,#AEAEAA 75%)}
.orbc .cb.c{background:radial-gradient(circle at 50% 50%,#7E7E7A 0 18%,#A5A5A1 40%,#BDBDB9 100%)}
.orbc.lime .cb.a{background:radial-gradient(circle at 40% 40%,#F1FFC0 0 35%,#D8F25A 80%)}
.orbc.lime .cb.b{background:radial-gradient(circle at 45% 40%,#EAFF9E 0 30%,#CDEB4E 80%)}
.orbc.lime .cb.c{background:radial-gradient(circle,#B8D63A 0 18%,#D8F25A 45%,#E9FF90 100%)}
@keyframes cbDrift{to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.08)}}
/* fascia line-art orb: contour lines inside a soft glow, drifting slowly */
.orbl{position:relative;width:clamp(170px,23cqw,310px);aspect-ratio:1;transform:scale(var(--g));animation:breathe 8s ease-in-out infinite}
.orbl .glow{position:absolute;inset:calc(18% - var(--rv) * 12%);transition:inset 1s;border-radius:50%;background:radial-gradient(circle,#B9B9B5 0 40%,#C9C9C5aa 62%,transparent 74%);filter:blur(10px)}
.orbl .ln{position:absolute;inset:0;background:#2E2E2C;opacity:calc(.35 + var(--rv) * .65);filter:blur(calc((1 - var(--rv)) * 2.4px));-webkit-mask-image:url(../img/fascia-topographic-lines-gray-v1.png),radial-gradient(circle,#000 calc(6% + var(--rv) * 36%),transparent calc(26% + var(--rv) * 44%));mask-image:url(../img/fascia-topographic-lines-gray-v1.png),radial-gradient(circle,#000 calc(6% + var(--rv) * 36%),transparent calc(26% + var(--rv) * 44%));-webkit-mask-size:var(--ms) auto,100% 100%;mask-size:var(--ms) auto,100% 100%;-webkit-mask-position:30% 40%,center;mask-position:30% 40%,center;-webkit-mask-composite:source-in;mask-composite:intersect;animation:lnDrift 30s ease-in-out infinite alternate}
@keyframes lnDrift{to{-webkit-mask-position:62% 58%,center;mask-position:62% 58%,center}}
.orbl.lime .glow{background:radial-gradient(circle,#E9FF90 0 40%,#D8F25Aaa 62%,transparent 76%)}
.orbl.lime .ln{background:#3A4A12}
.k1:not(:has(input:checked)) .acts .btn,.k2:not(:has(input:checked)) .acts .btn,.k3:not(:has(input:checked)) .acts .btn,.k4:not(:has(input:checked)) .acts .btn{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(20,20,19,.35);opacity:.6}
@media (prefers-reduced-motion: reduce){.orbc,.orbc .cb,.orbl,.orbl .ln{animation:none}}

/* v4 footer copyright in dots */
.ft-dot{font:900 16px/1 'Doto','Geist Mono',monospace;letter-spacing:.06em;text-transform:uppercase}