/* KINETIC test pages on the Zarpa Design System v2 (tokens: zarpa/tokens.css).
   Surfaces: ink page and control console, paper 3D stage and test card.
   The accent is aqua on ink and orange on paper; orange fill is kept for the one primary action. */
*{box-sizing:border-box}
:root{color-scheme:dark;--fg:var(--fg-on-dark);--muted:var(--fg-muted-on-dark);--soft:rgb(255 255 255 / 84%);--rule:var(--line-light);--accent:var(--aqua);--eyebrow:var(--aqua);--inverse:var(--ink);--tint:rgb(255 255 255 / 7%);--orange-text:#a6320e;--pad:28px}
.viewer,.info,.narration-panel.is-inspecting{color-scheme:light;--fg:var(--fg-on-light);--muted:var(--fg-muted-on-light);--soft:rgb(10 12 12 / 82%);--rule:var(--line-dark);--accent:var(--orange);--eyebrow:var(--fg-muted-on-light);--inverse:var(--white);--tint:rgb(10 12 12 / 6%);--focus-ring:var(--ink);color:var(--fg)}
html{background:var(--ink)}
body{min-width:320px;font-size:var(--text-body);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;border-radius:var(--radius-none);cursor:pointer}
button:disabled{cursor:not-allowed}
button,a,input,summary{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
.sprite{position:absolute;width:0;height:0}
.icon{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Micro labels: uppercase, tracked. */
.eyebrow,.product span,.intro-meta,.scene-badge,.legend,.angle-card>span,.scene-bottom,#loading,.narration-status,.narration-timeline output,.scrubber-label,.ticks,.stage-num,.workspace-foot,.index,.panel-tags span,.section-label,.panel-footer{font-size:11px;font-weight:700;letter-spacing:.1em;line-height:1.4;text-transform:uppercase}
.eyebrow{color:var(--eyebrow);font-weight:800;letter-spacing:.2em}
.eyebrow span{margin:0 8px;color:var(--muted)}

/* Buttons (Zarpa Button: square, Unbounded, orange primary that hovers to aqua). */
.btn,#info-toggle,.all-tests,.view-tools button,.speed,.test-code{font-family:var(--font-display);font-size:11px;font-weight:780;letter-spacing:var(--tracking-button);line-height:1.2;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-width:0;min-height:var(--tap-min);padding:13px 16px;border:1px solid var(--fg);background:transparent;color:var(--fg);transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.btn:hover:not(:disabled){transform:translateY(-3px);background:var(--fg);color:var(--inverse)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn-primary{border-color:var(--orange);background:var(--orange);color:var(--action-primary-fg)}
.btn-primary:hover:not(:disabled){border-color:var(--action-hover);background:var(--action-hover);color:var(--ink)}
.is-inspecting .btn-primary:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:var(--white)}
.btn:disabled{border-color:var(--rule);background:var(--tint);color:var(--muted)}

/* Range inputs: a ruled track with a square fader. --p is the 0…1 progress set from JS. */
input[type=range]{--p:0;--range-fill:var(--accent);appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;height:28px;margin:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:4px;background:linear-gradient(to right,var(--range-fill) calc(7px + (100% - 14px)*var(--p)),var(--rule) 0)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:26px;margin-top:-11px;border:0;border-radius:0;background:var(--fg)}
input[type=range]::-moz-range-track{height:4px;background:var(--rule)}
input[type=range]::-moz-range-progress{height:4px;background:var(--range-fill)}
input[type=range]::-moz-range-thumb{width:14px;height:26px;border:0;border-radius:0;background:var(--fg)}
.is-inspecting input[type=range]{--range-fill:var(--ink)}

/* Header */
.header{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;min-height:72px;border-bottom:1px solid var(--rule)}
.header>*{display:flex;align-items:center;margin:0}
.brand{padding:0 28px;border-right:1px solid var(--rule)}
.brand img{display:block;width:124px;height:auto}
.product{gap:14px;min-width:0;padding:0 24px;white-space:nowrap}
.product strong{font-family:var(--font-display);font-size:14px;font-weight:760;letter-spacing:.04em}
.product span{color:var(--muted)}
#info-toggle,.all-tests{gap:12px;padding:0 24px;border:0;border-left:1px solid var(--rule);background:transparent;color:var(--fg);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
#info-toggle[aria-expanded="true"] .icon{color:var(--aqua)}
#info-toggle:hover,.all-tests:hover{background:var(--white);color:var(--ink)}
#info-toggle:hover .icon{color:inherit}

/* Layout */
main{display:grid;grid-template-columns:minmax(0,1fr) 400px;max-width:1920px;margin:auto}
main.panel-hidden{grid-template-columns:minmax(0,1fr)}
.workspace{min-width:0;padding:28px 32px 20px;container-type:inline-size}
.intro{display:grid;grid-template-columns:minmax(0,1fr) fit-content(42%);gap:14px 32px;align-items:end;margin-bottom:24px}
.intro .eyebrow{grid-column:1 / -1}
h1{font-family:var(--font-display);font-size:clamp(30px,3.6vw,58px);font-weight:730;letter-spacing:var(--tracking-heading);line-height:.94;text-transform:uppercase;word-spacing:.16em}
h1 em{display:block;font-style:normal;color:var(--aqua)}
.intro-meta{display:flex;align-items:center;gap:12px;padding-bottom:3px;color:var(--muted)}
.test-code{padding:7px 9px;border:1px solid var(--rule);color:var(--fg)}

/* 3D stage */
.viewer{position:relative;container-type:inline-size;height:clamp(380px,52vh,660px);overflow:hidden;border:1px solid var(--line-light);background:var(--paper)}
#canvas-wrap{position:absolute;inset:0;touch-action:none}
#canvas-wrap:focus-visible{outline-offset:-3px}
canvas{display:block}
#loading{position:absolute;top:50%;left:50%;max-width:90%;padding:16px 20px;transform:translate(-50%,-50%);background:var(--ink);color:var(--white);text-align:center}
.scene-top{position:absolute;top:16px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none}
.scene-badge{flex:none;padding:8px 10px;background:var(--ink);color:var(--white)}
.legend{display:flex;gap:16px;padding:7px 10px;border:1px solid var(--rule);background:var(--white)}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{width:9px;height:9px;border:1px solid var(--ink)}
.patient-dot{background:var(--white)}
.therapist-dot{background:var(--aqua)}
.angle-card{position:absolute;top:66px;left:18px;display:flex;flex-direction:column;gap:8px;max-width:38cqw;pointer-events:none}
.angle-card>span{color:var(--muted)}
.angle-card strong{display:flex;align-items:flex-start;font-family:var(--font-display);font-size:clamp(54px,6.2vw,100px);font-weight:750;letter-spacing:-.08em;line-height:.8;font-variant-numeric:tabular-nums}
.angle-card small{margin-left:.1em;color:var(--orange);font-size:.5em;line-height:.9}
/* Live schematic in the stage's top right corner (e.g. a foramen that opens under traction). */
.schematic{position:absolute;top:66px;right:18px;width:168px;margin:0;padding:10px 12px 8px;border:1px solid var(--rule);background:var(--white);pointer-events:none}
.schematic figcaption{margin-bottom:6px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.1em;line-height:1.3;text-transform:uppercase}
.schematic svg{display:block;width:100%;height:auto;overflow:visible}
.schematic .bone{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.schematic .disc{fill:var(--gray)}
.schematic .root{stroke:var(--ink);stroke-width:1.2}
.schematic text{fill:var(--ink);font-family:var(--font-display);font-size:11px;font-weight:700;text-anchor:middle}
/* Shoulder schematic (Hawkins–Kennedy): ligament, tendon, bursa and the greater tuberosity that turns with the arm. */
.schematic .ligament{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.schematic .tendon{fill:none;stroke:var(--gray);stroke-width:6;stroke-linecap:round}
.schematic .bursa{fill:var(--aqua);fill-opacity:.65;stroke:var(--ink);stroke-width:.8}
.schematic .tuberosity{fill:var(--white);stroke:var(--ink);stroke-width:1.5}
/* Nerve schematic (ULNT1): the path coloured by load, the symptom zone, and the head tilt of the differentiation. */
.schematic .nerve{fill:none;stroke:var(--aqua);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.schematic .node{fill:var(--white);stroke:var(--ink);stroke-width:1.2}
.schematic .zone{fill:var(--orange);opacity:.2}
.schematic .head{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
/* Arm schematic (Neer): the range of flexion, the arm, the hand pressing on the shoulder and the pain zone (its fill is set from the script). */
.schematic .range{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.45}
.schematic .sweep{fill:none;stroke:var(--orange);stroke-width:3}
.schematic .limb{stroke:var(--ink);stroke-width:7;stroke-linecap:round}
.schematic .press{fill:none;stroke:var(--orange);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.schematic .spot{fill:var(--gray);stroke:var(--ink);stroke-width:1;stroke-dasharray:2 2}
/* Arc schematic (painful arc): the zones of abduction (their colour and emphasis are set from the script) and the degrees. */
.schematic .sector{fill:none;stroke:var(--success-check);stroke-width:5}
.schematic .deg{fill:var(--muted);font-size:9px}
/* Hand schematic (Jobe): the can that tips over as the thumbs turn down, beside the upright full can (emphasis set from the script). */
.schematic .can{fill:var(--white);stroke:var(--ink);stroke-width:1.5}
.schematic .drop{fill:var(--aqua);stroke:var(--ink);stroke-width:.6}
/* Rotation schematic (resisted external rotation): trunk, towel, arm and forearm from above (the forearm turns from the script). Blue and red are the 3D arrows of the patient's effort and the therapist's resistance, as the test brief asks. */
.er-schematic{--effort:#2f6fd6;--resist:#e3341c}
.schematic .towel{fill:var(--white);stroke:var(--ink);stroke-width:1}
.schematic .effort,.schematic .resist{fill:none;stroke:var(--effort);stroke-width:2.2;stroke-linecap:round}
.schematic .resist{stroke:var(--resist)}
.schematic .effort-head{fill:var(--effort)}
.schematic .resist-head{fill:var(--resist)}
.er-schematic .side{font-size:7.5px}
.er-schematic .start{text-anchor:start}
.er-schematic .end{text-anchor:end}
/* Joint schematic (apprehension / relocation): an axial section, front up and the couch down; the head slides a little forwards and back, the anterior capsule's colour is set from the script. Blue is the labrum and the relocation pressure, as the test brief asks. */
.joint-schematic{--press:#2f6fd6;width:196px}
.schematic .labrum{fill:var(--press)}
.schematic .capsule{fill:none;stroke:#7fa3e6;stroke-width:2.6;stroke-linecap:round}
.schematic .capsule-back{fill:none;stroke:var(--gray);stroke-width:2;stroke-linecap:round}
.schematic .shaft{fill:none;stroke:var(--ink);stroke-width:1.5}
.schematic .press-line{stroke:var(--press);stroke-width:2.4;stroke-linecap:round}
.schematic .press-head,.schematic .palm{fill:var(--press)}
.joint-schematic .side{font-size:7.5px}
.joint-schematic .start{text-anchor:start}
.joint-schematic .inside{font-size:6.5px;letter-spacing:.02em}
.cslr-schematic{--symptom:#e3341c;width:196px}
.cslr-schematic .side{font-size:7.5px}
.cslr-schematic .inside{font-size:6.5px;letter-spacing:.02em}
.schematic .disc-body{fill:var(--paper);stroke:var(--ink);stroke-width:1.5}
.schematic .nucleus{fill:var(--gray)}
.schematic .hernia{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-dasharray:3 2.2}
.schematic .sac{fill:var(--white);stroke:var(--ink);stroke-width:1.2}
.schematic .root-sym{fill:var(--aqua);stroke:var(--ink);stroke-width:1}
.schematic .root-well{fill:var(--gray);stroke:var(--ink);stroke-width:1}
.schematic .root-ring{fill:none;stroke:var(--symptom);stroke-width:2}
.schematic .shift{fill:none;stroke:var(--orange);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Slump schematic: the seated patient from the side of the test, the nerve coloured by its load from the head to the foot (gradient stops set from the script), the symptom zone and the components added. */
.slump-schematic{--symptom:#e3341c;width:188px}
.schematic .seat{fill:none;stroke:var(--ink);stroke-width:3}
.schematic .seat-leg{fill:none;stroke:var(--ink);stroke-width:1;opacity:.35}
.schematic .figure{fill:none;stroke:var(--gray);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.schematic .figure-head{fill:var(--gray)}
.schematic .nerve-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.schematic .symptom-zone{fill:var(--symptom)}
.schematic .hand-dot{fill:var(--orange);stroke:var(--white);stroke-width:1}
.schematic .sl-chip{fill:var(--muted);font-size:8px;opacity:.55}
.schematic .sl-chip.on{fill:var(--ink);opacity:1}
/* Prone knee bend schematic: the load of the femoral nerve and the stretch of rectus femoris as bars (widths and fills set from the script), a dashed mark where the nerve stood before the head was lifted, and the components added. */
.pkb-schematic{width:184px}
.schematic .bar-label{font-size:9px;text-anchor:start}
.schematic .bar-track{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.schematic .bar-fill{fill:var(--aqua)}
.schematic .bar-mark{stroke:#e3341c;stroke-width:1.6;stroke-dasharray:2 2}
.schematic .pk-chip{fill:var(--muted);font-size:8px;opacity:.55}
.schematic .pk-chip.on{fill:var(--ink);opacity:1}
/* Body chart (repeated movements): a fixed window beside the 3D, the patient from behind with the symptom zone (its path
   and colour set from the script), the 0–10 scale, the arrows of centralization and peripheralization and the stop sign;
   on the summary three charts side by side. Its size follows the stage's height so it stays clear of the view buttons. */
.bodychart{--stage-h:clamp(380px,52vh,660px);width:min(268px,34cqw,calc((var(--stage-h) - 214px) * .82));padding:10px 12px 10px}
.is-immersive .bodychart{--stage-h:100dvh}
.schematic .bc-figure{fill:var(--white);stroke:var(--ink);stroke-width:1.1;stroke-linejoin:round}
.schematic .bc-spine{stroke:var(--ink);stroke-width:.8;stroke-dasharray:2 2.4;opacity:.45}
.schematic .bc-fold{fill:none;stroke:var(--ink);stroke-width:.8;opacity:.4}
.schematic .bc-zone{fill:none;stroke:#e3341c;stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.schematic .bc-halo{fill:none;stroke:#e3341c;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;opacity:.22}
.schematic .bc-centre{fill:#e3341c}
.schematic .bc-up path,.schematic .bc-down path{fill:none;stroke:var(--success-check);stroke-width:2.6;stroke-linecap:round}
.schematic .bc-down path{stroke:#e3341c}
.schematic .bc-up .bc-head{fill:var(--success-check);stroke:none}
.schematic .bc-down .bc-head{fill:#e3341c;stroke:none}
.schematic .bc-stop path{fill:#e3341c;stroke:var(--white);stroke-width:1.2}
.schematic .bc-stop text{fill:var(--white);font-size:5.4px;font-weight:800;letter-spacing:.02em}
.schematic .bc-axis{stroke:var(--ink);stroke-width:1.2}
.schematic .bc-tick{stroke:var(--ink);stroke-width:1}
.schematic .bc-num{fill:var(--muted);font-size:8px}
.schematic .bc-nrs{font-size:15px}
.schematic .bc-mark{fill:#e3341c}
.schematic .bc-szone{fill:none;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.schematic .bc-szone.bc-green{stroke:var(--success-check)}
.schematic .bc-szone.bc-gray{stroke:#8d9693}
.schematic .bc-szone.bc-red{stroke:#e3341c}
.schematic .bc-sdot.bc-green,.schematic .bc-swatch.bc-green{fill:var(--success-check)}
.schematic .bc-sdot.bc-gray,.schematic .bc-swatch.bc-gray{fill:#8d9693}
.schematic .bc-sdot.bc-red,.schematic .bc-swatch.bc-red{fill:#e3341c}
.schematic .bc-label{font-size:7px;letter-spacing:-.01em}
.schematic .bc-rom{fill:var(--muted);font-size:7.2px}
.bodychart .bc-where{margin:6px 0 0;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;line-height:1.3;text-transform:uppercase}
.bodychart .bc-where strong{color:var(--ink)}
.bodychart .bc-tag{margin:6px 0 0;padding:5px 8px;background:var(--ink);color:var(--white);font-family:var(--font-display);font-size:10px;font-weight:750;letter-spacing:.04em;line-height:1.25;text-transform:uppercase}
.bodychart .bc-tag[data-tone="good"]{background:var(--success-check)}
.bodychart .bc-tag[data-tone="stop"]{background:#e3341c}
.bodychart .bc-tag[data-tone="note"]{padding:6px 0 0;border-top:1px solid var(--rule);background:none;color:var(--fg);font-family:var(--font-body);font-size:11px;font-weight:600;letter-spacing:0;line-height:1.4;text-transform:none}
.bodychart .bc-tag:empty{display:none}
@container (max-width:700px){
.bodychart{width:min(176px,40cqw,calc((var(--stage-h) - 214px) * .82));padding:8px 9px 8px}
.bodychart .bc-where,.bodychart .bc-tag{font-size:8.5px}
}
@container (max-width:350px){
.schematic.bodychart{display:block;top:96px;right:8px;width:min(128px,40cqw)}
.bodychart figcaption{display:none}
}
/* Score card (ASLR): the patient's 0–5 rating of the leg in question (the cell lit from the script: green for 0, red
   above), its words, and the sums of both legs without and with the pelvic compression. */
.aslr-score{width:196px}
.aslr-score .as-leg{margin:0;color:var(--ink);font-family:var(--font-display);font-size:10px;font-weight:750;letter-spacing:.04em;line-height:1.3;text-transform:uppercase}
.aslr-score .as-scale{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:7px 0 0;padding:0;border:1px solid var(--ink);list-style:none}
.aslr-score .as-scale li{display:grid;place-items:center;height:24px;color:var(--muted);font-family:var(--font-display);font-size:11px;font-weight:750}
.aslr-score .as-scale li+li{border-left:1px solid var(--rule)}
.aslr-score .as-scale li.on{background:#e3341c;color:var(--white)}
.aslr-score .as-scale li.on[data-tone="good"]{background:var(--success-check)}
.aslr-score .as-word{min-height:2.6em;margin:5px 0 0;color:var(--fg);font-size:11px;font-weight:600;line-height:1.3}
.aslr-score .as-sum{width:100%;margin-top:6px;border-collapse:collapse;font-size:10px}
.aslr-score .as-sum th,.aslr-score .as-sum td{padding:3px 4px;border-top:1px solid var(--rule);text-align:right;font-weight:600}
.aslr-score .as-sum thead th{border-top:0;color:var(--muted);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
.aslr-score .as-sum tbody th{color:var(--muted);text-align:left}
.aslr-score .as-sum td{color:var(--ink);font-family:var(--font-display);font-size:12px;font-weight:750}
.aslr-score .as-sum td.muted{color:var(--muted);font-weight:500}
.aslr-score .as-total th,.aslr-score .as-total td{border-top:1px solid var(--ink)}
.aslr-score .as-sum.done .as-total td{background:var(--paper)}
.aslr-score .as-tag{margin:6px 0 0;padding:5px 8px;background:var(--success-check);color:var(--white);font-family:var(--font-display);font-size:10px;font-weight:750;letter-spacing:.04em;line-height:1.25;text-transform:uppercase}
.aslr-score .as-tag:empty{display:none}
@container (max-width:700px){
.aslr-score{width:150px;padding:8px 9px}
.aslr-score .as-leg{font-size:8.5px}
.aslr-score .as-scale li{height:20px;font-size:10px}
.aslr-score .as-word,.aslr-score .as-tag{display:none}
.aslr-score .as-sum{margin-top:5px;font-size:9px}
.aslr-score .as-sum th,.aslr-score .as-sum td{padding:2px 3px}
.aslr-score .as-sum td{font-size:11px}
}
@container (max-width:350px){
.schematic.aslr-score{display:block;top:96px;right:8px;width:min(128px,40cqw)}
.aslr-score figcaption,.aslr-score .as-word{display:none}
}
/* FABER card: the pain map (each zone a button that shows it in the scene; red swatch on the one shown, the question
   mark is part of the label because a zone is a hint, not a diagnosis), then the FABER distances of both sides. */
.faber-card{width:200px;pointer-events:auto}
.faber-card[hidden],.faber-card [hidden]{display:none}
.faber-card .fb-map{display:grid;gap:4px}
.faber-card .fb-map button{display:flex;gap:8px;align-items:flex-start;width:100%;padding:6px 7px;border:1px solid var(--rule);background:var(--white);color:var(--muted);font:inherit;font-size:10.5px;line-height:1.3;text-align:left;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.faber-card .fb-map button i{flex:none;width:11px;height:11px;margin-top:2px;background:var(--gray)}
.faber-card .fb-map button strong{display:block;color:inherit;font-family:var(--font-display);font-size:9.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.faber-card .fb-map button:hover{border-color:var(--ink);color:var(--ink)}
.faber-card .fb-map button.on{border-color:var(--ink);color:var(--ink)}
.faber-card .fb-map button.on i{background:#e3341c}
.faber-card .fb-note{margin:2px 0 0;color:var(--fg);font-size:10.5px;font-weight:600;line-height:1.3}
.faber-card .fb-table{width:100%;border-collapse:collapse;font-size:10px}
.faber-card .fb-table th,.faber-card .fb-table td{padding:4px;border-top:1px solid var(--rule);text-align:right;font-weight:600}
.faber-card .fb-table th{color:var(--muted);text-align:left}
.faber-card .fb-table td{color:var(--ink);font-family:var(--font-display);font-size:13px;font-weight:750}
.faber-card .fb-tag{margin:6px 0 0;padding:5px 8px;background:var(--ink);color:var(--white);font-family:var(--font-display);font-size:10px;font-weight:750;letter-spacing:.04em;line-height:1.25;text-transform:uppercase}
.faber-card .fb-tag:empty{display:none}
@container (max-width:700px){
.faber-card{width:160px;padding:8px 9px}
.faber-card .fb-map button{padding:4px 6px;font-size:9px}
.faber-card .fb-map button strong{font-size:8.5px}
.faber-card .fb-note{display:none}
}
@container (max-width:350px){
.schematic.faber-card{display:block;top:96px;right:8px;width:min(132px,42cqw)}
.faber-card figcaption{display:none}
.faber-card .fb-map button span{font-size:0}
.faber-card .fb-map button strong{font-size:8px}
}
/* FADIR card: the three components in turn (done ones get an orange square, the current one an ink frame; the hint under
   IR is the usual confusion), then the pain with the "C sign", then internal rotation of both sides. */
.fadir-card{width:206px}
.fadir-card .fd-steps{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.fadir-card .fd-steps li{display:flex;gap:8px;align-items:flex-start;padding:6px 7px;border:1px solid var(--rule);background:var(--white);color:var(--muted);font-size:10.5px;line-height:1.3}
.fadir-card .fd-steps li i{flex:none;width:11px;height:11px;margin-top:2px;border:1px solid var(--gray);background:transparent}
.fadir-card .fd-steps li strong{display:block;color:inherit;font-family:var(--font-display);font-size:9.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.fadir-card .fd-steps li.done i{border-color:var(--orange);background:var(--orange)}
.fadir-card .fd-steps li.on{border-color:var(--ink);color:var(--ink)}
.fadir-card .fd-steps li em{display:block;margin-top:2px;color:var(--fg);font-style:normal;font-weight:600}
.fadir-card .fd-pain{display:grid;grid-template-columns:54px 1fr;gap:8px;align-items:center;font-size:10.5px;line-height:1.3;color:var(--fg)}
.fadir-card .fd-pain svg{width:54px;height:54px}
.fadir-card .fd-pain strong{display:block;color:var(--ink);font-family:var(--font-display);font-size:9.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.fadir-card .fd-pain p{grid-column:1/-1;margin:0;font-weight:600}
.fadir-card .fd-table{width:100%;border-collapse:collapse;font-size:10px}
.fadir-card .fd-table th,.fadir-card .fd-table td{padding:4px;border-top:1px solid var(--rule);text-align:right;font-weight:600}
.fadir-card .fd-table th{color:var(--muted);text-align:left}
.fadir-card .fd-table td{color:var(--ink);font-family:var(--font-display);font-size:13px;font-weight:750}
.fadir-card .fd-note{margin:4px 0 0;color:var(--muted);font-size:9.5px}
.fadir-card .fd-tag{margin:6px 0 0;padding:5px 8px;background:var(--ink);color:var(--white);font-family:var(--font-display);font-size:10px;font-weight:750;letter-spacing:.04em;line-height:1.25;text-transform:uppercase}
.fadir-card .fd-tag:empty{display:none}
.fadir-card[hidden],.fadir-card [hidden]{display:none}
@container (max-width:700px){
.fadir-card{width:164px;padding:8px 9px}
.fadir-card .fd-steps li{padding:4px 6px;font-size:9px}
.fadir-card .fd-steps li strong{font-size:8.5px}
.fadir-card .fd-pain{grid-template-columns:40px 1fr;font-size:9px}
.fadir-card .fd-pain svg{width:40px;height:40px}
}
@container (max-width:350px){
.schematic.fadir-card{display:block;top:96px;right:8px;width:min(132px,42cqw)}
.fadir-card figcaption,.fadir-card .fd-steps li span>span,.fadir-card .fd-pain p,.fadir-card .fd-note{display:none}
.fadir-card .fd-steps li strong{font-size:8px}
}
/* Log roll card: a transparent window where the stage draws the close-up of the hip joint (the scene through a second
   camera), then the amplitude, the dial test, the pain or the comparison of the sides. */
.schematic.lr-card{width:216px;padding:0;background:none}
.lr-card figcaption{margin:0;padding:8px 10px 6px;background:var(--white)}
.lr-card .lr-window{height:150px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lr-card .lr-body{padding:6px 10px 8px;background:var(--white)}
.lr-card .lr-table{width:100%;border-collapse:collapse;font-size:10px}
.lr-card .lr-table th,.lr-card .lr-table td{padding:4px 0;border-top:1px solid var(--rule);text-align:right;font-weight:600}
.lr-card .lr-table tr:first-child th,.lr-card .lr-table tr:first-child td{border-top:0}
.lr-card .lr-table th{color:var(--muted);text-align:left}
.lr-card .lr-table td{color:var(--ink);font-family:var(--font-display);font-size:13px;font-weight:750}
.lr-card .lr-note{margin:4px 0 0;color:var(--muted);font-size:9.5px;line-height:1.35}
.lr-card .lr-tag{margin:6px 0 0;padding:5px 8px;background:var(--ink);color:var(--white);font-family:var(--font-display);font-size:10px;font-weight:750;letter-spacing:.04em;line-height:1.25;text-transform:uppercase}
.lr-card .lr-tag[data-tone="pain"]{background:#e3341c}
.lr-card .lr-tag:empty{display:none}
.lr-card[hidden],.lr-card [hidden]{display:none}
@container (max-width:700px){
.schematic.lr-card{width:172px}
.lr-card .lr-window{height:112px}
.lr-card .lr-body{padding:5px 8px 6px}
}
@container (max-width:350px){
.schematic.lr-card{display:block;top:96px;right:8px;width:min(132px,42cqw)}
.lr-card figcaption,.lr-card .lr-window,.lr-card .lr-note{display:none}
}
/* McMurray card (on the knee card below): the plateau from above with direction labels over the window, the knee angle on the
   test's arc, the rotation and the force, then smooth (green) or the click (red). */
.lm-card.mm-card .lm-window{position:relative;height:106px}
.mm-card .mm-dir{position:absolute;color:var(--muted);font-family:var(--font-display);font-size:7.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;pointer-events:none}
.mm-card .mm-dir[data-at="bottom"]{bottom:3px;left:50%;transform:translateX(-50%)}
.mm-card .mm-dir[data-at="left"]{left:6px;top:4px}
.mm-card .mm-dir[data-at="right"]{right:6px;top:4px}
.mm-card .mm-row{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:6px;margin:0;padding:3px 0;border-top:1px solid var(--rule);color:var(--ink);font-size:9.5px;font-weight:650}
.mm-card .mm-row>*{white-space:nowrap}
.mm-card .mm-row strong{color:#e3341c;font-weight:750}
.lm-card.mm-card .lm-tag{font-size:8.5px}
.lm-card.mm-card .lm-stop{gap:6px;font-size:8.5px}
.lm-card.mm-card .lm-stop svg{width:26px}
.mm-card .lm-stop[data-kind="smooth"]{color:#2e9e5b}
.mm-card .lm-stop[data-kind="click"]{color:#e3341c}
@container (max-width:700px){.lm-card.mm-card .lm-window{height:76px}.mm-card .lm-note,.mm-card .lm-gauge{display:none}}
/* Knee card (Lachman, valgus stress): the close-up window of the knee (the scene through a second camera), the millimetre
   gauge with the grade zones counted from the healthy knee, the end-point, then the comparison. */
.schematic.lm-card{width:216px;padding:0;background:none}
.lm-card figcaption{margin:0;padding:8px 10px 6px;background:var(--white)}
.lm-card .lm-window{height:126px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.lm-card .lm-body{padding:5px 10px 7px;background:var(--white)}
.lm-card .lm-gauge text{font-size:8px;font-weight:700}
.lm-card .lm-gauge .lm-scale text{fill:var(--muted);font-size:7.5px}
.lm-card .lm-gauge .lm-value{font-size:11px;font-weight:750;text-anchor:end}
.lm-card .lm-stop{display:flex;gap:8px;align-items:center;margin:4px 0 0;color:var(--ink);font-family:var(--font-display);font-size:9.5px;font-weight:750;letter-spacing:.04em;text-transform:uppercase}
.lm-card .lm-stop svg{flex:none;width:34px;height:16px}
.lm-card .lm-stop[data-kind="firm"]{color:#2e9e5b}
.lm-card .lm-compare svg{margin-bottom:2px}
.lm-card .lm-compare .lm-acl{fill:none;stroke:#2f6fd6;stroke-width:3;stroke-linecap:round}
.lm-card .lm-compare .lm-dash{stroke-dasharray:3 2}
.lm-card .lm-compare .lm-small{fill:var(--muted);font-size:8px}
.lm-card .lm-compare .lm-big{font-size:16px;font-weight:750}
.lm-card .lm-table{width:100%;border-collapse:collapse;font-size:10px}
.lm-card .lm-table th,.lm-card .lm-table td{padding:3px 0;border-top:1px solid var(--rule);text-align:right;font-weight:600}
.lm-card .lm-table th{color:var(--muted);text-align:left}
.lm-card .lm-table td{color:var(--ink);font-family:var(--font-display);font-size:12px;font-weight:750}
.lm-card .lm-note{margin:4px 0 0;color:var(--muted);font-size:9.5px;line-height:1.35}
.lm-card .lm-tag{margin:6px 0 0;padding:5px 8px;background:var(--ink);color:var(--white);font-family:var(--font-display);font-size:10px;font-weight:750;letter-spacing:.04em;line-height:1.25;text-transform:uppercase}
.lm-card .lm-tag[data-tone="alert"]{background:#e3341c}
.lm-card .lm-tag:empty{display:none}
.lm-card[hidden],.lm-card [hidden]{display:none}
@container (max-width:700px){
.schematic.lm-card{width:172px}
.lm-card .lm-window{height:96px}
.lm-card .lm-body{padding:5px 8px 6px}
}
@container (max-width:350px){
.schematic.lm-card{display:block;top:96px;right:8px;width:min(132px,42cqw)}
.lm-card figcaption,.lm-card .lm-window,.lm-card .lm-note,.lm-card .lm-compare svg{display:none}
}
.vs-card .vs-angle{display:grid;grid-template-columns:28px 1fr;gap:6px;margin:0;padding:3px 0;border-top:1px solid var(--rule);color:var(--fg);font-size:9.5px;font-weight:600;line-height:1.3}
.vs-card .vs-angle strong{color:var(--ink);font-family:var(--font-display);font-size:11px;font-weight:750}
.vs-card .lm-stop[data-kind="lax"]{color:#e3341c}
@container (max-width:350px){.vs-card .lm-stop{gap:5px;font-size:8px}.vs-card .lm-stop svg{width:26px}}
/* A cut between two set-ups of one test (prone knee bend → side-lying): the stage fades to paper and back. */
.scene-cut{position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none}
.view-tools{position:absolute;bottom:50px;left:50%;display:flex;transform:translateX(-50%);border:1px solid var(--ink);background:var(--white);white-space:nowrap}
.view-tools button{display:grid;place-items:center;min-height:40px;padding:0 14px;border:0;background:transparent;font-size:10px;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.view-tools button+button{border-left:1px solid var(--ink)}
.view-tools button:hover{background:var(--aqua)}
.view-tools button.active{background:var(--ink);color:var(--white)}
.scene-bottom{position:absolute;bottom:14px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--muted);font-size:10px}
.scene-toggles{display:flex;flex-wrap:wrap;gap:8px 18px}
.scene-bottom label{display:flex;align-items:center;gap:9px;color:var(--fg);font-size:11px;white-space:nowrap;cursor:pointer}
.scene-bottom input{appearance:none;-webkit-appearance:none;display:grid;place-items:center;flex:none;width:18px;height:18px;margin:0;border:1px solid var(--ink);background:var(--white);cursor:pointer}
.scene-bottom input::before{content:"";width:10px;height:6px;border:solid var(--white);border-width:0 0 2px 2px;opacity:0;transform:translateY(-1px) rotate(-45deg)}
.scene-bottom input:checked{background:var(--ink)}
.scene-bottom input:checked::before{opacity:1}
/* Full-screen viewing (lab.js adds the button and the bar): the scene alone, like a video. */
.scene-bottom>span{margin-left:auto}
.immersive-enter{position:relative;display:grid;place-items:center;flex:none;width:32px;height:32px;margin-left:auto;padding:0;border:1px solid var(--ink);background:var(--white);color:var(--ink);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.scene-bottom>span+.immersive-enter{margin-left:0}
.immersive-enter::after{content:"";position:absolute;inset:-2px -8px -10px}
.immersive-enter:hover{background:var(--ink);color:var(--white)}
.immersive-bar{display:none}
.kinetic-immersive,.kinetic-immersive body{overflow:hidden}
.kinetic-immersive .workspace{container-type:normal}
.viewer.is-immersive{position:fixed;inset:0;z-index:1000;height:auto;min-height:0;border:0}
.viewer.is-immersive>:not(#canvas-wrap,#loading,.immersive-bar,.immersive-keep){display:none}
.viewer.is-idle,.viewer.is-idle #canvas-wrap{cursor:none}
.is-immersive .immersive-bar{position:absolute;left:50%;bottom:max(20px,env(safe-area-inset-bottom));display:flex;align-items:stretch;width:min(640px,calc(100% - 32px));transform:translateX(-50%);background:var(--ink);color:var(--white);transition:opacity var(--dur-media) var(--ease)}
.is-idle .immersive-bar{opacity:0;pointer-events:none}
.immersive-bar button{display:flex;align-items:center;gap:10px;min-width:0;min-height:48px;padding:0 16px;border:0;background:transparent;color:inherit;font-family:var(--font-display);font-size:11px;font-weight:780;letter-spacing:var(--tracking-button);line-height:1.2;text-transform:uppercase;white-space:nowrap;transition:color var(--dur-fast) var(--ease)}
.immersive-bar button:hover{color:var(--aqua)}
.immersive-bar button[hidden]{display:none}
.immersive-play span{overflow:hidden;text-overflow:ellipsis}
.immersive-progress{flex:1 1 40px;align-self:center;height:3px;margin:0 16px;background:rgb(244 245 241 / 20%)}
.immersive-progress i{display:block;height:100%;background:var(--aqua);transform:scaleX(var(--p,0));transform-origin:left}
.immersive-bar .immersive-progress+button,.immersive-bar .immersive-exit{border-left:1px solid rgb(244 245 241 / 18%)}
.immersive-marks[aria-pressed="false"]{color:rgb(244 245 241 / 55%)}
/* A phone turned sideways: a lower bar keeps more of the scene in view. */
@media(max-height:500px){
.is-immersive .immersive-bar{bottom:max(10px,env(safe-area-inset-bottom))}
.immersive-bar button{min-height:38px}
}
@container (max-width:560px){
.immersive-bar{width:calc(100% - 24px)}
.immersive-bar button{padding:0 14px}
.immersive-bar button span{display:none}
}

/* Console: voiced walkthrough, manual transport and stage rail share one ruled block under the stage. */
.console{container-type:inline-size;border:1px solid var(--rule);border-top:0}
.console>*+*{border-top:1px solid var(--rule)}
.narration-panel{display:grid;grid-template-columns:minmax(0,352px) minmax(0,1fr);grid-template-areas:"actions heading" "actions caption" "actions timeline" "actions status";transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.narration-panel[hidden]{display:none}
.narration-panel.is-inspecting{background:var(--aqua)}
.narration-heading{grid-area:heading;padding:18px 20px 0}
.narration-heading h2{margin-top:8px;font-family:var(--font-display);font-size:var(--text-card-title);font-weight:700;letter-spacing:var(--tracking-title);line-height:1.15}
.narration-caption{grid-area:caption;min-height:72px;max-width:78ch;padding:10px 20px 0;color:var(--soft);font-size:15px;line-height:1.6}
.narration-actions{grid-area:actions;display:grid;grid-template-columns:var(--tap-min) minmax(0,1fr);gap:8px;align-content:center;padding:18px 20px;border-right:1px solid var(--rule)}
.narration-actions .btn-secondary{padding-inline:10px}
.narration-primary{grid-column:1 / -1}
.narration-timeline{grid-area:timeline;display:flex;align-items:center;gap:16px;padding:8px 20px 0}
.narration-timeline output{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.narration-status{grid-area:status;padding:2px 20px 16px;color:var(--muted)}
.transport{display:grid;grid-template-columns:72px minmax(0,1fr) 80px}
.play,.speed{display:grid;place-items:center;border:0;background:transparent;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.play{border-right:1px solid var(--rule)}
.play .icon{width:22px;height:22px}
.speed{border-left:1px solid var(--rule)}
.play:hover:not(:disabled),.speed:hover:not(:disabled){background:var(--white);color:var(--ink)}
.play[data-state="playing"]:not(:hover){background:var(--aqua);color:var(--ink)}
.play:disabled,.speed:disabled{color:rgb(255 255 255 / 30%)}
.scrubber{min-width:0;padding:15px 20px 13px}
.scrubber-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:5px}
.scrubber-label span,.ticks{color:var(--muted)}
.ticks{display:flex;justify-content:space-between;gap:12px;margin-top:3px}
.stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.stages-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stages-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stages-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.stages-7{grid-template-columns:repeat(7,minmax(0,1fr))}
.stage{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-width:0;min-height:104px;padding:14px;overflow:hidden;border:0;background:transparent;color:rgb(244 245 241 / 76%);text-align:left;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.stage+.stage{border-left:1px solid var(--rule)}
.stage>*{position:relative}
.stage .stage-ghost{position:absolute;top:-13px;right:-3px;font-family:var(--font-display);font-size:96px;font-weight:750;letter-spacing:-.08em;line-height:1;opacity:.13;pointer-events:none}
.stage-num{display:flex;gap:10px;margin-bottom:5px}
.stage-num i{font-style:normal;opacity:.62}
.stage strong{font-family:var(--font-display);font-size:11px;font-weight:750;letter-spacing:.02em;line-height:1.25;text-transform:uppercase}
.stage small{margin-top:5px;font-size:12px;line-height:1.35;opacity:.72}
.stage:hover{background:var(--tint);color:var(--white)}
.stage:has(~ .stage.active){background:rgb(117 209 204 / 9%);color:var(--aqua)}
.stage.active{background:var(--aqua);color:var(--ink)}
.workspace-foot{margin-top:16px;color:var(--muted);font-weight:600}

/* Test card */
.info{--pad:28px;position:sticky;top:0;align-self:start;height:100vh;height:100dvh;overflow-y:auto;padding:28px var(--pad) 24px;background:var(--paper);scrollbar-width:thin;scrollbar-color:rgb(10 12 12 / 36%) transparent}
.info[hidden]{display:none}
.panel-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.index,.panel-footer{color:var(--muted)}
.info h2{margin:22px 0 18px;font-family:var(--font-display);font-size:26px;font-weight:730;letter-spacing:var(--tracking-heading);line-height:1;text-transform:uppercase;word-spacing:.16em}
.info h2 em{display:block;font-style:normal;color:var(--orange)}
.panel-tags{display:flex;flex-wrap:wrap;gap:6px}
.panel-tags span{padding:6px 9px;border:1px solid var(--rule)}
.info section{margin-top:28px}
.info h3{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:var(--tracking-title);line-height:1.25}
.info p{margin-top:10px;color:var(--soft);font-size:15px;line-height:1.65}
.step-description,.contact-section{margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
.step-description{position:relative;overflow:hidden;padding-block:22px 24px;border-block:1px solid var(--rule);background:var(--white)}
.step-description>*{position:relative}
.step-description .step-ghost{position:absolute;top:-.13em;right:-.02em;color:rgb(10 12 12 / 8%);font-family:var(--font-display);font-size:150px;font-weight:800;letter-spacing:-.12em;line-height:1;pointer-events:none}
.section-label{display:flex;gap:10px;margin-bottom:14px;color:var(--orange-text)}
.contact-section{transition:box-shadow var(--dur-fast) var(--ease)}
.contact-section.narration-focus{box-shadow:inset 5px 0 var(--orange)}
.contact{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start;margin-top:14px}
.contact p{margin:0;font-size:14px}
.contact p strong{color:var(--fg);font-weight:700}
.number{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-round);background:var(--orange);color:var(--ink);font-family:var(--font-display);font-size:12px;font-weight:750}
.info details{border-top:1px solid var(--rule)}
.info details:first-of-type{margin-top:28px}
.info details:last-of-type{border-bottom:1px solid var(--rule)}
.info summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;min-height:60px;padding:8px 0;font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:-.02em;line-height:1.35;list-style:none;cursor:pointer;transition:color var(--dur-fast) var(--ease)}
.info summary::-webkit-details-marker{display:none}
.info summary .icon{color:var(--orange);transition:transform var(--dur-fast) var(--ease)}
.info details[open] summary .icon{transform:rotate(180deg)}
.info summary:hover{color:var(--orange-text)}
.info details p{margin:0 0 14px;font-size:14px}
.info details p strong{color:var(--fg);font-weight:700}
.info details ul,.info section>ul{display:grid;gap:9px;margin:0 0 16px;padding:0;list-style:none;color:var(--soft);font-size:14px;line-height:1.55}
.info details li,.info section>ul li{position:relative;padding-left:18px}
.info details li::before,.info section>ul li::before{content:"";position:absolute;top:.62em;left:0;width:7px;height:7px;background:var(--orange)}
.info details .source{padding-bottom:12px;border-bottom:1px solid var(--rule);color:var(--fg);font-size:13px;font-weight:600;line-height:1.4}
.info details>:last-child{margin-bottom:22px}
.info .note{padding:14px 16px;border:1px solid var(--rule);background:var(--white);box-shadow:inset 3px 0 var(--ink);color:var(--fg);font-size:13px}
.info details a{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;padding:12px 0;border-bottom:1px solid var(--rule);color:var(--fg);font-size:13px;font-weight:600;line-height:1.4;transition:color var(--dur-fast) var(--ease)}
.info details a:first-of-type{padding-top:0}
.info details a:hover{color:var(--orange-text)}
.info details .source{margin-bottom:10px;padding-bottom:12px;border-bottom:1px solid var(--rule);color:var(--fg);font-size:13px;font-weight:600;line-height:1.4}
.next-test{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;margin:28px calc(var(--pad)*-1) 0;padding:18px var(--pad);border-block:1px solid var(--rule);background:var(--white);color:var(--fg);transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.next-test[hidden]{display:none}
.next-test span{grid-column:1;color:var(--orange-text);font-size:11px;font-weight:700;letter-spacing:.1em;line-height:1.4;text-transform:uppercase}
.next-test strong{grid-column:1;font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:var(--tracking-title);line-height:1.25}
.next-test .icon{grid-column:2;grid-row:1 / 3;width:20px;height:20px;color:var(--orange);transition:transform var(--dur-fast) var(--ease)}
.next-test:hover{background:var(--ink);color:var(--white)}
.next-test:hover span{color:var(--aqua)}
.next-test:hover .icon{transform:translateX(4px)}
.panel-footer{display:flex;justify-content:space-between;gap:12px;padding-top:22px}

/* The title and its caption stack as soon as the workspace is too narrow for both side by side. */
@container (max-width:720px){
.intro{grid-template-columns:minmax(0,1fr)}
.intro-meta{flex-wrap:wrap}
}
/* Stage overlays follow the stage width, not the screen: the card can be hidden, or the stage narrow, at any viewport. */
@container (max-width:900px){
.scene-bottom>span{display:none}
}
@container (max-width:700px){
.schematic{width:136px;padding:8px 10px 6px}
}
@container (max-width:420px){
.angle-card{max-width:calc(100% - 160px)}
}
@container (max-width:350px){
.scene-top{top:10px;left:10px;right:10px}
.scene-badge,.legend{font-size:9px;letter-spacing:.06em}
.scene-badge{padding:7px 8px}
.legend{gap:8px;padding:6px 7px}
.legend span{gap:5px}
.angle-card{top:52px;left:12px;max-width:none}
.schematic{display:none}
.view-tools{bottom:44px;max-width:calc(100% - 16px)}
.view-tools button,.view-tools:has(> :nth-child(5)) button{flex:0 1 auto;min-width:0;min-height:36px;padding:0 4px;font-size:8px;letter-spacing:0}
.view-tools #reset-view{padding:0 7px}
.scene-bottom{left:10px;right:10px}
.scene-bottom label{gap:7px;font-size:10px}
.scene-toggles{gap:6px 12px}
}
@container (max-width:680px){
.narration-panel{grid-template-columns:minmax(0,1fr);grid-template-areas:"heading" "caption" "actions" "timeline" "status"}
.narration-actions{padding:16px 20px 6px;border-right:0}
.narration-caption{min-height:0}
}
@container (max-width:760px){
.stages-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.stages-4 .stage:nth-child(3){border-left:0}
.stages-4 .stage:nth-child(n+3){border-top:1px solid var(--rule)}
}
@container (max-width:1080px){
.stages-7{grid-template-columns:repeat(4,minmax(0,1fr))}
.stages-7 .stage:nth-child(5){border-left:0}
.stages-7 .stage:nth-child(n+5){border-top:1px solid var(--rule)}
}
@container (max-width:860px){
.stages-5{grid-template-columns:repeat(3,minmax(0,1fr))}
.stages-5 .stage:nth-child(4){border-left:0}
.stages-5 .stage:nth-child(n+4){border-top:1px solid var(--rule)}
}
@container (max-width:520px){
.stages-5{grid-template-columns:repeat(2,minmax(0,1fr))}
.stages-5 .stage:nth-child(4){border-left:1px solid var(--rule)}
.stages-5 .stage:nth-child(odd){border-left:0}
.stages-5 .stage:nth-child(n+3){border-top:1px solid var(--rule)}
}
@container (max-width:980px){
.stages-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.stages-6 .stage:nth-child(4){border-left:0}
.stages-6 .stage:nth-child(n+4){border-top:1px solid var(--rule)}
}
@container (max-width:520px){
.stages-7{grid-template-columns:repeat(2,minmax(0,1fr))}
.stages-7 .stage:nth-child(5){border-left:1px solid var(--rule)}
.stages-7 .stage:nth-child(odd){border-left:0}
.stages-7 .stage:nth-child(n+3){border-top:1px solid var(--rule)}
}
@container (max-width:520px){
.stages-6{grid-template-columns:repeat(2,minmax(0,1fr))}
.stages-6 .stage:nth-child(4){border-left:1px solid var(--rule)}
.stages-6 .stage:nth-child(odd){border-left:0}
.stages-6 .stage:nth-child(n+3){border-top:1px solid var(--rule)}
}
@container (max-width:520px){
.stage small,.ticks span:last-child{display:none}
.scrubber-label{flex-direction:column;gap:2px}
.stage{min-height:92px;padding:12px 10px}
.stage .stage-ghost{top:-9px;font-size:72px}
.stage-num{flex-direction:column;gap:2px}
}
@media(min-width:1600px){
main{grid-template-columns:minmax(0,1fr) 440px}
.workspace{padding:36px 48px 24px}
.viewer{height:58vh}
}
@media(max-width:1150px){
main{grid-template-columns:minmax(0,1fr) 330px}
.workspace{padding:24px 20px 16px}
.info{--pad:20px}
.info h2{font-size:22px}
.scene-bottom>span,.product span{display:none}
}
@media(max-width:850px){
main{display:block}
.brand{padding:0 20px}
.workspace{padding:24px 16px 12px}
.viewer{height:55vh;min-height:400px}
.info{--pad:20px;position:static;height:auto;overflow:visible}
.info h2{font-size:26px}
}
@media(max-width:520px){
.header{min-height:64px}
.brand{padding:0 16px}
.brand img{width:104px}
.product{padding:0 14px}
.product strong{font-size:12px}
#info-toggle,.all-tests{padding:0 16px}
.all-tests span,#info-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.intro{grid-template-columns:minmax(0,1fr);margin-bottom:18px}
.intro-meta{flex-wrap:wrap}
.viewer{height:54vh;min-height:390px}
.scene-top{top:12px;left:12px;right:12px}
.legend{gap:10px}
.angle-card{top:58px;left:14px;max-width:170px}
.schematic{top:58px;right:12px;width:118px;padding:8px 9px 6px}
.schematic figcaption{font-size:9px}
.view-tools{bottom:48px}
.view-tools button{padding:0 11px}
.view-tools:has(> :nth-child(5)) button{padding:0 7px;font-size:9px}
.wide-only{display:none}
.scene-bottom{left:12px;right:12px}
.transport{grid-template-columns:60px minmax(0,1fr) 64px}
.scrubber{padding-inline:14px}
.info{--pad:16px}
.info h2{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important}
.btn:hover:not(:disabled),.btn:active:not(:disabled){transform:none}
}