:root{color-scheme:dark;--bg:#101a26;--panel:#142330;--line:#30414a;--ink:#f3eee0;--muted:#a1b4ba;--gold:#f8bd70;--mint:#9de0c7}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 30% 0,#20343a,transparent 65%),var(--bg);color:var(--ink);font:15px/1.6 system-ui,sans-serif}main{max-width:1260px;margin:auto;padding:30px 38px 20px}header{display:flex;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding-bottom:23px}.brand{color:var(--gold);text-decoration:none;font:32px Georgia;letter-spacing:-8px;border:1px solid #66746b;border-radius:50%;width:66px;height:66px;display:flex;align-items:center;justify-content:center;padding-right:7px}.brand span{font-size:13px;margin:0 8px}.eyebrow{font:10px/1.5 system-ui;letter-spacing:2.2px;color:var(--mint);margin:0 0 5px}h1{font:40px/1 Georgia,serif;margin:0;letter-spacing:-1.4px}h2{font:32px/1.2 Georgia;margin:0 0 10px}h3{font:26px Georgia;margin:7px 0 15px}.chapter{margin-left:auto;display:grid;gap:5px;text-align:right}.chapter span{color:var(--gold);font-size:12px}.chapter label{font-size:12px;color:var(--muted)}select{background:#142330;border:1px solid var(--line);padding:7px 10px;border-radius:6px;max-width:210px;color:var(--ink);margin-left:9px}.intro{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 0}.intro p:last-child{margin:0;max-width:700px;color:var(--muted)}.wax{display:grid;min-width:150px;border-left:1px solid var(--line);padding-left:25px}.wax small{font-size:10px;letter-spacing:2px;color:var(--gold)}.wax strong{font:32px Georgia}.wax span{font-size:11px;color:var(--muted)}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 270px;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 25px 70px #0003}.stage{background:#101a26;min-width:0;display:flex;flex-direction:column}.stage-top{display:flex;justify-content:space-between;gap:12px;padding:17px 22px;color:var(--muted);font-size:9px;letter-spacing:1.5px;border-bottom:1px solid #233541}#clock{color:var(--gold);white-space:nowrap}#board{position:relative;aspect-ratio:760/470;width:100%;margin:auto}#board svg{width:100%;height:100%;position:absolute;inset:0;pointer-events:none}.fuse{position:absolute;transform:translate(-50%,-50%);border-radius:100px;padding:2px 8px;min-width:44px;font:600 12px system-ui;background:#162532;color:#d3c3a8;border:1px solid #72644d;z-index:2}.fuse.selected{background:var(--gold);color:#18232d;box-shadow:0 0 0 4px #f8bd7025}.fuse .added{font-size:9px;display:block;line-height:1;color:#9de0c7}.fuse.selected .added{color:#304939}.node{position:absolute;transform:translate(-50%,-50%);width:82px;text-align:center;pointer-events:none}.node img{width:76px;height:76px;object-fit:contain;display:block;margin:auto}.node .tag{font-size:11px;font-weight:600;background:#101a26e8;border-radius:5px;padding:2px 6px;white-space:nowrap}.node.lit img{filter:drop-shadow(0 0 12px #ffb64455)}.node.lit .tag{color:var(--gold)}.node.source{font-size:36px;color:var(--gold)}.node.junction{width:18px;height:18px;border:4px solid #101a26;background:#abc0b6;border-radius:50%;box-shadow:0 0 0 1px #758a82}.legend{text-align:center;font-size:11px;color:var(--muted);padding:12px;border-top:1px solid #233541}.legend span:last-child{margin-left:10px}.gold{color:var(--gold)}aside{background:#172833;padding:23px;border-left:1px solid var(--line);font-size:12px}aside p{color:#b5c6ca;margin:10px 0}aside ol{padding-left:18px;color:#c6d3d3}aside li{padding:3px 0}#editor{padding:13px 0;border-block:1px solid var(--line);margin-top:20px}#edge-label{color:var(--gold);font-size:11px}.stepper{display:flex;align-items:center;justify-content:space-between;margin:8px 0}.stepper strong{font:25px Georgia}.stepper button{font-size:22px;width:40px;height:36px;padding:0}#edge-detail{font-size:11px;margin:0}button{font:inherit;color:var(--ink);background:#213744;border:1px solid #46606a;border-radius:7px;padding:9px 12px;cursor:pointer;transition:background .15s,transform .15s}button:hover{background:#345361}button:active{transform:translateY(1px)}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid var(--mint);outline-offset:3px}.tools{display:flex;gap:6px;margin:12px 0}.tools button{flex:1;font-size:11px;padding:7px 5px}.primary{width:100%;background:var(--gold);color:#1b2730;border-color:var(--gold);font-weight:700;font-size:13px}.primary:hover{background:#ffd395}.primary span{float:right}#skip{width:100%;margin-top:8px}#feedback{font-size:12px;line-height:1.6;margin:14px 0 0;color:var(--muted);min-height:56px}#feedback.success{color:var(--mint)}#next{margin-top:10px}[hidden]{display:none!important}.readout{margin-top:20px}.readout-title{display:flex;justify-content:space-between;gap:10px}.readout-title span{font-size:11px;color:var(--muted)}#cues{display:flex;gap:10px;margin-top:8px}.cue{border:1px solid var(--line);padding:12px 17px;border-radius:8px;flex:1;display:flex;align-items:center;justify-content:space-between;gap:8px}.cue b{font-size:12px;font-weight:500}.cue span{font-size:12px;color:var(--gold)}.cue.correct{border-color:#5f9d85}.cue.correct span{color:var(--mint)}footer{border-top:1px solid var(--line);margin-top:25px;padding-top:15px;display:flex;justify-content:space-between;gap:20px;color:#819a9f;font-size:10px}footer details{max-width:430px}summary{cursor:pointer}a{color:var(--mint)}@media(max-width:850px){main{padding:20px}.workbench{grid-template-columns:1fr}aside{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:5px 22px}aside>h3,aside>p,aside>ol{grid-column:1}aside>h3{margin:0}aside>ol{margin:0}#editor{grid-column:2;grid-row:1/5;margin:0;align-self:center}.tools{grid-column:2;margin:0}#run,#skip,#feedback,#next{grid-column:1/3}#feedback{min-height:0}.node{width:70px}.node img{width:65px;height:65px}}@media(max-width:520px){main{padding:14px 10px}header{gap:12px}.brand{display:none}h1{font-size:32px}.eyebrow{font-size:8px;letter-spacing:1.3px}.chapter{max-width:165px}.chapter label{font-size:0}select{max-width:165px;font-size:11px}h2{font-size:25px}.intro{gap:10px;padding:20px 3px}.intro p:last-child{font-size:12px}.wax{min-width:94px;padding-left:12px}.wax small{font-size:8px;letter-spacing:1px}.wax strong{font-size:25px}.wax span{font-size:9px}.stage-top{font-size:7px;padding:10px;letter-spacing:.5px}.node{width:50px}.node img{width:47px;height:47px}.node .tag{font-size:8px;padding:1px 3px}.node.source{font-size:26px}.node.junction{width:12px;height:12px;border-width:2px}.fuse{min-width:32px;font-size:10px;padding:3px 4px}.fuse .added{font-size:7px}.legend{font-size:9px;padding:8px}.legend span:last-child{display:block;margin:0}aside{padding:17px;gap:4px 15px;font-size:11px}h3{font-size:23px}#cues{flex-wrap:wrap;gap:6px}.cue{min-width:44%;padding:8px 10px}.cue b,.cue span{font-size:10px}.readout-title span{font-size:9px}footer{display:block}footer details{margin-top:8px}}
