*{box-sizing:border-box}html,body{margin:0;background:#10191f;color:#edf1e7;font-family:Arial,Helvetica,sans-serif}button,a,input,select{touch-action:manipulation}a{color:inherit}button,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffaf73;outline-offset:4px}.skip{position:absolute;left:16px;top:-90px;z-index:30;background:#ecf4e9;color:#102b31;padding:16px}.skip:focus{top:16px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}#film{height:min(80vh,960px);min-height:500px;width:100%;position:relative;overflow:hidden;background:#10191f}#scene{width:100%;height:100%;display:block}#vignette{pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,20,28,.88),transparent 40%),linear-gradient(0deg,rgba(9,17,24,.65),transparent 20%,transparent 86%,rgba(9,17,24,.2))}header{position:absolute;left:4.4%;right:4.4%;top:4.4%;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.brand{font-size:clamp(16px,1.4vw,28px);font-weight:700;letter-spacing:-.6px;text-decoration:none;pointer-events:auto}.brand span{color:#ee8153}.edition{font:clamp(9px,.64vw,13px) monospace;letter-spacing:2px;color:#a2b8be}.copy{position:absolute;left:4.4%;top:23%;max-width:35%;pointer-events:none}#eyebrow{font:clamp(9px,.76vw,15px)/1.5 monospace;letter-spacing:2px;color:#82cbd4;margin:0 0 24px}h1{font-size:clamp(38px,4.5vw,88px);font-weight:500;line-height:.99;letter-spacing:-.045em;margin:0 0 22px}h1 em{color:#f99260;font-weight:500;font-style:normal}#subtitle{font-size:clamp(12px,1.05vw,20px);line-height:1.6;color:#b4c4c7;max-width:300px}footer{position:absolute;left:4.4%;right:4.4%;bottom:5%;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;font:clamp(8px,.64vw,13px)/1.7 monospace;letter-spacing:1px;color:#9db4b9}footer>div{display:flex;flex-direction:column;gap:8px}#chapter{font-size:clamp(12px,.85vw,17px);color:#ecf1e7;letter-spacing:2px}#scope{text-align:right;max-width:380px}#progress{position:absolute;bottom:0;left:0;height:3px;background:#f18b59;transform-origin:left;width:100%;transform:scaleX(0)}#detail-tag{position:absolute;right:6%;top:25%;max-width:28%;padding:15px 20px;border-left:2px solid #7acdd7;background:#101d27dd;font:clamp(10px,.8vw,16px)/1.7 monospace;color:#cad8d9;pointer-events:none}#loading,#error{position:absolute;inset:0;background:#10191f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;font-size:22px}#loading small{font:12px monospace;color:#a6bec5}#error p{max-width:600px;padding:30px}#error button{padding:12px 20px}[hidden]{display:none!important}#tree{position:absolute;inset:12% 3% 16%;touch-action:none}#tree-svg{height:100%;width:100%;overflow:visible}#tree-svg text{font-family:Arial,sans-serif;fill:#d3e4e5}#tree-svg .edge{stroke:#34636d;fill:none;stroke-width:2.2}#tree-svg .edge.active{stroke:#fc9a63;stroke-width:3.2}#tree-svg .node{cursor:pointer}#tree-svg .node rect{fill:#132a35;stroke:#335864;stroke-width:1.4}#tree-svg .node:hover rect,#tree-svg .node:focus rect{stroke:#e4eece;stroke-width:3}#tree-svg .node.active rect{stroke:#f59560;fill:#352b2a;stroke-width:2}#tree-svg .node.focus rect{stroke:#8de0e6;fill:#173e49;stroke-width:3}#tree-svg .node .node-id{font-size:10px;fill:#83b8c2}#tree-svg .node .node-label{font-size:12px;fill:#e2eeeb}#tree-svg .lane{font:12px monospace;letter-spacing:2px;fill:#84a6b0}#tree-hint{position:absolute;bottom:17%;right:5%;font:11px monospace;color:#b7d5d9}.tree-mode .copy{top:9%;left:4.4%;max-width:75%}.tree-mode #eyebrow{display:none}.tree-mode h1{font-size:clamp(24px,2vw,40px);margin:0}.tree-mode h1 br{display:none}.tree-mode #subtitle{display:none}.tree-mode #vignette{background:linear-gradient(0deg,#10191f,transparent 18%,transparent 92%,#10191f)}#transport{background:#17262e;border-top:1px solid #314b55;padding:22px 4.4% 20px;font-size:13px}.playback{display:flex;gap:20px;align-items:center}.playback button{background:#f18b59;color:#152630;border:0;padding:12px 22px;border-radius:4px;min-width:115px}.playback input{flex:1;min-width:60px;accent-color:#f18b59}.playback output{font:12px monospace;white-space:nowrap}.playback a{font-size:12px}.inspection{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:18px}.inspection label{display:flex;gap:10px;align-items:center;font-size:12px;color:#bcd0d5}.inspection button,.inspection select{background:#213640;border:1px solid #47616a;border-radius:3px;padding:8px 10px;color:#e1edeb}.inspection input{width:100px;accent-color:#88cdd4}#selection{color:#dde8e3;margin-top:18px}.limits{color:#a4b9be;font-size:11px;line-height:1.6;max-width:1000px}.limits a{margin-left:10px}.capture #film{height:100vh;min-height:0}.capture #transport,.capture .skip,.capture #tree-hint{display:none}.capture header a{pointer-events:none}.capture #film{cursor:none}
@media(max-width:700px){#film{height:65vh;min-height:480px}.copy{top:16%;max-width:65%}h1{font-size:38px}#subtitle{font-size:12px;max-width:190px}.edition{display:none}#scope{max-width:155px;font-size:8px}footer{gap:12px}#identity{font-size:8px;max-width:180px}#detail-tag{top:37%;font-size:10px;right:5%;max-width:42%;padding:9px}#vignette{background:linear-gradient(180deg,#10191f88,transparent 60%,#10191f88)}.playback{flex-wrap:wrap;gap:12px}.playback input{width:calc(100% - 140px)}.playback a{margin-left:auto}.inspection{gap:10px}.inspection input{width:75px}.inspection label{font-size:11px}#tree{inset:18% 1% 17%}.tree-mode .copy{max-width:90%;top:12%}.tree-mode h1{font-size:25px}.limits a{margin-left:0;display:block}}
/* Keep the frame visual-led; macro annotations stay clear of geometry. */
.copy{max-width:29%}h1{font-size:clamp(38px,3.6vw,70px)}#detail-tag{left:4.4%;right:auto;top:65%;max-width:26%;white-space:pre-line;font-size:clamp(10px,.74vw,14px);padding:12px 15px}
@media(max-width:700px){.copy{max-width:75%}h1{font-size:35px}#detail-tag{top:auto;bottom:19%;left:4.4%;max-width:62%;font-size:10px}}
#tree{inset:18% 3% 16%}#tree-svg{overflow:hidden}
@media(max-width:700px){#tree{inset:22% 1% 17%}}
.tree-mode #scene{pointer-events:none}