.motion-ledger { display:grid; grid-template-columns:repeat(3,1fr) auto; align-items:center; gap:24px; margin-block:32px; padding-block:24px; border-block:1px solid var(--rule); }
.motion-ledger b { display:block; font-size:40px; letter-spacing:-.06em; line-height:1.15; }
.motion-ledger span { display:block; margin-top:8px; font:11px/1.6 var(--mono); color:var(--muted); }
.motion-ledger a { font-size:14px; }
.motion-card { min-width:0; border-top:1px solid var(--rule-strong); padding-top:16px; }
.motion-meta { display:flex; justify-content:space-between; gap:12px; font:10px/1.5 var(--mono); text-transform:uppercase; color:var(--muted); }
.motion-card h3 { margin-block:14px 20px; }
.motion-card h3 a { text-decoration:none; }
.motion-card h3 a:hover { text-decoration:underline; }
.motion-card figure { margin:0; }
.motion-card figcaption { font:11px/1.8 var(--mono); color:var(--muted); margin-block:10px; }
.motion-controls,.lab-controls { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding-block:12px; }
.motion-controls label,.lab-controls label { display:flex; align-items:center; gap:7px; font-size:12px; }
.motion-controls select,.lab-controls select { background:var(--paper); color:var(--ink); border:1px solid var(--rule-strong); padding:7px; border-radius:3px; min-height:40px; }
.motion-controls .video-button { padding:8px 11px; min-height:40px; }
.motion-controls button:disabled { opacity:.35; cursor:not-allowed; }
.loop-control { cursor:pointer; padding:8px 0; }
.loop-control input { width:17px; height:17px; accent-color:var(--ink); }
.frame-readout { display:block; font:11px/1.7 var(--mono); padding-block:7px 16px; border-bottom:1px solid var(--rule); color:var(--muted); }
.phase-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:18px; }
.phase-button { display:block; text-align:left; border:1px solid var(--rule); padding:0; background:var(--field); color:var(--ink); cursor:pointer; min-width:0; }
.phase-button:hover { border-color:var(--rule-strong); }
.phase-button img { display:block; width:100%; aspect-ratio:16/9; object-fit:contain; background:#eee; }
.phase-button span { display:block; padding:9px; }
.phase-button b { display:block; font-size:11px; font-weight:500; line-height:1.5; }
.phase-button small { display:block; margin-top:6px; font:9px/1.6 var(--mono); color:var(--muted); }
.native-window { border:1px solid var(--rule); padding:14px; margin-top:16px; }
.native-window summary { font-size:12px; cursor:pointer; font-weight:600; }
.native-strip { display:flex; gap:8px; overflow-x:auto; padding-bottom:12px; overscroll-behavior-x:contain; }
.native-strip .phase-button { flex:0 0 160px; }
.motion-card .player-error { padding:12px; border:1px solid var(--rule-strong); color:var(--ink); }
.lab-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 28px; margin-block:48px; }
.lab-card { min-width:0; border-top:1px solid var(--rule-strong); }
.lab-heading { padding-block:20px; }
.lab-heading .kicker { font-size:10px; }
.lab-heading h2 { font-size:clamp(24px,2.3vw,34px); line-height:1.2; letter-spacing:-.045em; margin-block:12px; }
.lab-heading p { color:var(--muted); margin-block:8px 0; font-size:13px; }
.lab-stage { position:relative; overflow:hidden; isolation:isolate; container-type:inline-size; width:100%; min-width:0; aspect-ratio:16/10; min-height:200px; background:#eaece6; border:1px solid var(--rule); color:#252a23; }
.lab-controls { border-bottom:1px solid var(--rule); }
.lab-controls output { margin-left:auto; font:11px var(--mono); color:var(--muted); }
.lab-controls .lab-scrub { width:100%; color:var(--muted); font:10px var(--mono); text-transform:uppercase; padding-block:8px; }
.lab-scrub input { flex:1; min-width:0; accent-color:#648239; cursor:pointer; }
.lab-notes { font-size:13px; color:var(--muted); }
.lab-notes strong { color:var(--ink); }
.lab-notes ul { padding-left:18px; font-size:12px; }
.lab-notes li { margin-block:8px; }
.lab-comparison { display:grid; grid-template-columns:1fr 1fr; height:100%; }
.comparison-pane { position:relative; overflow:hidden; }
.comparison-pane + .comparison-pane { border-left:1px solid #bcc2b5; }
.stage-label { position:absolute; z-index:4; top:14px; left:12px; padding:5px 7px; background:#eaece6e8; font:10px var(--mono); }
.context-world { position:absolute; top:28%; left:10%; width:80%; height:48%; border:1px solid #a0a994; background:#fafbf7; transform-origin:70% 65%; }
.diagram-header { height:21%; border-bottom:1px solid #d3d8cb; font:clamp(6px,1.4cqw,11px) var(--mono); padding:3% 5%; }
.diagram-sidebar { position:absolute; top:21%; bottom:0; width:24%; background:repeating-linear-gradient(#e1e5da 0 7px,#f5f7f0 7px 16px); border-right:1px solid #d3d8cb; }
.focus-tile { position:absolute; left:38%; top:37%; width:49%; height:49%; display:flex; align-items:end; justify-content:center; gap:9%; border:1px solid #b2bd9f; padding:8%; background:#eef2e4; }
.focus-tile i,.mini-chart i { width:20%; height:60%; background:#84996b; }
.focus-tile i:nth-child(2),.mini-chart i:nth-child(2) { height:95%; }
.focus-tile i:nth-child(3),.mini-chart i:nth-child(3) { height:76%; }
.diagram-card { background:#fafbf7; border:1px solid #bac2af; padding:4%; box-shadow:0 8px 20px #2f39230b; font-size:clamp(10px,2.4cqw,16px); }
.mini-label { display:block; color:#606953; font:clamp(7px,1.65cqw,11px)/1.5 var(--mono); text-transform:uppercase; margin-bottom:9%; }
.diagram-card b { display:block; font-weight:500; line-height:1.4; }
.diagram-line { display:block; height:5px; background:#d8dfcf; margin-top:9%; }
.diagram-line.short { width:65%; margin-top:5%; }
.pair-request { position:absolute; left:27%; top:50%; width:43%; }
.pair-result { position:absolute; left:58%; top:50%; width:34%; }
.pair-divider { position:absolute; left:53%; top:23%; height:54%; width:1px; background:#b5bfab; }
.mini-chart { height:65px; display:flex; align-items:end; gap:12%; justify-content:center; }
.word-composition { position:absolute; top:35%; left:8%; right:8%; }
.word-composition .mini-label { margin-bottom:8%; }
.word-row { display:flex; gap:3%; align-items:baseline; white-space:nowrap; font-size:clamp(21px,6.6cqw,44px); letter-spacing:-.06em; }
.word-row b { font-weight:500; }
.baseline-rule { display:block; height:1px; background:#aab69a; margin-top:12px; }
.device-frame { position:absolute; top:9%; left:34%; width:32%; height:82%; border:5px solid #333c2a; border-radius:22px; background:#f3f5ee; }
.device-camera { position:absolute; top:4%; left:40%; width:20%; height:4px; background:#333c2a; border-radius:4px; }
.device-home { position:absolute; bottom:3%; left:30%; width:40%; height:3px; background:#333c2a; border-radius:3px; }
.handoff-card { position:absolute; top:50%; left:50%; width:42%; }
.abstract-landscape { position:relative; height:80px; overflow:hidden; background:#dce6cb; margin-bottom:12%; }
.abstract-landscape i { position:absolute; width:110%; height:100%; background:#9dad84; border-radius:50%; top:40%; left:-25%; transform:rotate(15deg); }
.abstract-landscape i + i { background:#6c7e54; left:25%; top:60%; transform:rotate(-15deg); }
.selection-panel { position:absolute; left:12%; top:22%; width:76%; min-height:56%; }
.selection-row { position:relative; padding:2%; }
.selection-highlight { position:absolute; inset:0; background:#d2e1b6; transform-origin:left; }
.selection-row b { position:relative; }
.selection-callout { position:absolute; top:85%; right:0; max-width:90%; padding:5% 7%; background:#35402b; color:#f4f6ee; font-size:clamp(8px,2cqw,13px); }
.selection-result { position:absolute; inset:0; padding:9%; background:#fafbf7; display:flex; flex-direction:column; justify-content:center; }
.layer-card { position:absolute; top:45%; left:50%; width:38%; }
.layer-card .mini-label { margin-bottom:9%; }
.abstract-block { height:65px; background:#afbd9c; margin-bottom:12%; }
.layer-back .abstract-block { background:#d7bea0; }
.layer-middle .abstract-block { background:#b2c3cc; }
.layer-front { z-index:3; }
.layer-middle { z-index:2; }
@media(max-width:1000px) { .motion-ledger { grid-template-columns:repeat(3,1fr); } .motion-ledger a { grid-column:1/-1; } }
@media(max-width:760px) { .lab-grid { grid-template-columns:1fr; } .lab-heading h2 { font-size:28px; } }
@media(max-width:420px) { .motion-ledger { gap:15px; } .motion-ledger b { font-size:32px; } .motion-ledger span { font-size:9px; } .motion-controls { gap:8px; } .phase-button span { padding:6px; } .phase-button b { font-size:10px; } .phase-button small { font-size:8px; } .motion-meta { font-size:9px; } .lab-controls { gap:8px; } .lab-controls output { font-size:10px; } .device-frame { border-width:3px; border-radius:14px; } .abstract-landscape { height:48px; } .abstract-block { height:38px; } .mini-chart { height:45px; } }