.dg{border:1px solid var(--rule);background:var(--surface);border-radius:12px;margin:18px 0 8px;overflow:hidden}.dg-canvas{background:color-mix(in srgb, var(--tone,var(--ink)) 4%, var(--surface));padding:10px 6px 4px;position:relative}.dg-svg{width:100%;height:auto;color:var(--ink);display:block;overflow:visible}.dg-svg .ln{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}.dg-svg .thin{stroke-width:1.4px}.dg-svg .wire{stroke-width:2.4px}.dg-svg .fl{fill:var(--surface)}.dg-svg .insulator{stroke-width:1.4px}.dg-svg .track rect{fill:var(--sleeper)}.dg-svg .track .ln{stroke:var(--rail);stroke-width:2px}.dg-svg .ghost{fill:none;stroke:var(--ink-2);stroke-width:1.6px;stroke-dasharray:4 4;opacity:.55}.dg-svg .ghost text{stroke:none;fill:var(--ink-2)}.dg-tag{font:600 10px var(--f-mono);fill:var(--ink-2);letter-spacing:.04em}.dg-svg .part{color:var(--ink);transition:color .2s}.dg-svg .part.is-active{color:var(--tone,var(--accent))}.dg-svg .part.is-active .ln{stroke-width:3.2px}.dg-svg .part.is-active .thin,.dg-svg .part.is-active .insulator{stroke-width:2.4px}.dg-svg .part.is-active .fl{fill:color-mix(in srgb, var(--tone,var(--accent)) 14%, var(--surface))}.dg[data-dg=explore].is-interactive .dg-svg .part:not(.is-active){color:color-mix(in srgb, var(--ink) 55%, var(--surface))}.dg-svg .flow{fill:none;stroke:var(--tone,var(--accent));stroke-width:3px;stroke-linecap:round;stroke-dasharray:7 11;opacity:.9;animation:1.2s linear infinite dg-flow}.dg-svg .flow-head{fill:var(--tone,var(--accent))}.dg.is-paused .dg-svg .flow{marker-mid:var(--arrow);animation-play-state:paused}@keyframes dg-flow{to{stroke-dashoffset:-18px}}@media (prefers-reduced-motion:reduce){.dg-svg .flow{marker-mid:var(--arrow);animation:none}}.dg[data-dg=quiz] .dg-svg .flow{display:none}.pin{cursor:pointer;outline:none}.pin-hit{fill:#0000}.pin-dot{fill:var(--ink);stroke:var(--surface);stroke-width:2.5px;transition:fill .15s}.pin-n{font:700 13px var(--f-mono);fill:var(--bg);pointer-events:none}.pin.is-active .pin-dot,.pin:hover .pin-dot{fill:var(--tone,var(--accent))}.pin.is-active .pin-n,.pin:hover .pin-n{fill:#fff}.pin:focus-visible .pin-dot{stroke:var(--tone,var(--accent));stroke-width:4px}.dg[data-dg=quiz] .pin{cursor:default}.dg[data-dg=quiz] .pin-dot{fill:var(--tone,var(--accent));animation:1.6s ease-in-out infinite pin-pulse}.dg[data-dg=quiz] .pin-n{fill:#fff}@keyframes pin-pulse{50%{stroke-width:7px;stroke:color-mix(in srgb, var(--tone,var(--accent)) 30%, transparent)}}@media (prefers-reduced-motion:reduce){.dg[data-dg=quiz] .pin-dot{animation:none}}.dg-controls{justify-content:flex-end;align-items:center;gap:8px;padding:0 2px 6px;display:flex}.dg-controls:not(:has(button:not([hidden]))){display:none}.dg-pause{border:1px solid var(--rule);background:var(--surface);min-height:36px;color:var(--ink);font:600 13px/1 var(--f-body);cursor:pointer;border-radius:999px;padding:6px 12px}.dg-pause .when-paused,.dg.is-paused .dg-pause .when-run{display:none}.dg.is-paused .dg-pause .when-paused{display:inline}.dg-card{border-top:1px solid var(--rule);padding:14px 16px 16px}.dg-hint{color:var(--ink-2);margin:0 0 8px;font-size:13px}.dg-steps{gap:14px;margin:0;padding:0;list-style:none;display:grid}.dg.is-interactive .dg-steps li:not(.is-active){display:none}.dg-step-head{align-items:center;gap:10px;margin:0;display:flex}.dg-step-head b{font:700 1.15rem/1.25 var(--f-display);display:block}.dg-step-head small{font:500 14px/1.3 var(--f-display);color:var(--ink-2);display:block}.dg-n{background:var(--tone,var(--accent));color:#fff;width:28px;height:28px;font:700 13px/1 var(--f-mono);border-radius:50%;flex:none;place-items:center;display:grid}.dg-mean{margin:6px 0 0;font-size:16px;line-height:1.6}.dg-nav{grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-top:14px;display:grid}.dg-count{font:600 13px/1 var(--f-mono);color:var(--ink-2);text-align:center}.dg-btn{border:1.5px solid var(--ink);min-height:48px;color:var(--ink);font:600 15px/1 var(--f-body);cursor:pointer;background:0 0;border-radius:8px;padding:10px 14px}.dg-btn.primary{background:var(--ink);color:var(--bg)}.dg-btn:hover{border-color:var(--tone,var(--accent))}.dg-btn.primary:hover{background:var(--tone,var(--accent));border-color:var(--tone,var(--accent));color:#fff}.dg-svg .sym :is(path,circle,rect,polygon){fill:none;stroke:currentColor;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round}.dg-svg .sym .f{fill:currentColor;stroke:none}.dg-svg .sym .t{stroke-width:8px}.dg-svg .part.is-active .sym :is(path,circle,rect,polygon){stroke-width:6px}.dg-label{font:600 11px var(--f-body);fill:var(--ink-2)}.dg-toggle{border:1.5px solid var(--live);background:var(--surface);min-height:36px;color:var(--live);font:600 13px/1 var(--f-mono);cursor:pointer;border-radius:999px;margin-right:auto;padding:6px 12px}.dg-toggle .when-off,.dg.is-off .dg-toggle .when-on{display:none}.dg.is-off .dg-toggle .when-off{display:inline}.dg.is-off .dg-toggle{border-color:var(--ink-2);color:var(--ink-2)}.dg-wiring .glow{fill:var(--board);opacity:.85}.dg-wiring .arm-off,.dg.is-off .dg-wiring :is(.flow,.glow,.arm-on){display:none}.dg.is-off .dg-wiring .arm-off{display:inline}.dg-amf .win{fill:var(--board)}.dg-amf .cut{stroke:var(--accent);stroke-width:3.5px;stroke-linecap:round;fill:none}.dg-amf :is(.cut,.puff,.f-dg,.blade-dg){display:none}.dg-amf .puff circle{fill:var(--ink-2);opacity:.35}.dg-amf .blade{stroke-width:3px}.dg[data-state=power-cut] .dg-amf .cut,.dg[data-state=dg-start] .dg-amf .cut,.dg[data-state=on-dg] .dg-amf .cut{display:inline}.dg[data-state=power-cut] .dg-amf .f-mains,.dg[data-state=dg-start] .dg-amf .f-mains,.dg[data-state=on-dg] .dg-amf .f-mains{display:none}.dg[data-state=power-cut] .dg-amf .mains-wire,.dg[data-state=dg-start] .dg-amf .mains-wire,.dg[data-state=on-dg] .dg-amf .mains-wire{stroke-dasharray:4 5;opacity:.5}.dg[data-state=power-cut] .dg-amf .f-out,.dg[data-state=dg-start] .dg-amf .f-out{display:none}.dg[data-state=power-cut] .dg-amf .win,.dg[data-state=dg-start] .dg-amf .win{fill:var(--surface)}.dg[data-state=dg-start] .dg-amf .puff,.dg[data-state=on-dg] .dg-amf .puff,.dg[data-state=mains-back] .dg-amf .puff{display:inline}.dg[data-state=on-dg] .dg-amf .blade-mains{display:none}.dg[data-state=on-dg] .dg-amf :is(.blade-dg,.f-dg){display:inline}.dg-amf .puff circle{transform-box:fill-box;transform-origin:50%;animation:1.6s ease-out infinite dg-puff}.dg-amf .puff circle+circle{animation-delay:.8s}@keyframes dg-puff{0%{opacity:.5;transform:translateY(6px)scale(.7)}to{opacity:0;transform:translateY(-10px)scale(1.3)}}@media (prefers-reduced-motion:reduce){.dg-amf .puff circle{animation:none}}.dg.is-paused .dg-amf .puff circle{animation-play-state:paused}.lesson{max-width:720px;padding-bottom:72px}.lesson .page-head .tagline{flex-wrap:wrap;gap:6px 10px;display:flex}.takeaway{background:var(--board);color:var(--board-ink);border-radius:12px;margin:26px 0 0;padding:18px 18px 18px 20px}.takeaway .label{color:var(--board-ink);opacity:.8}.takeaway ul{gap:10px;margin:10px 0 0;padding:0;list-style:none;display:grid}.takeaway li{padding-left:26px;font-weight:500;line-height:1.5;position:relative}.takeaway li:before{content:"✓";font-weight:800;position:absolute;top:0;left:0}.reviewed{font:500 13px/1.4 var(--f-mono);color:var(--ink-2);margin:18px 0 0}.lesson-nav{gap:10px;margin-top:30px;display:grid}.lesson-nav a{border:1px solid var(--rule);background:var(--surface);border-radius:12px;gap:4px;min-height:64px;padding:14px 16px;text-decoration:none;display:grid}.lesson-nav a:hover{border-color:var(--tone,var(--ink))}.lesson-nav small{font:600 12px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}.lesson-nav b{font:700 1.1rem/1.3 var(--f-display)}.lesson-nav .next{border-color:var(--ink)}.lesson-nav .next small{color:var(--tone)}.quiz{margin-top:30px}.quiz-head{z-index:2;background:var(--bg);justify-content:space-between;align-items:center;gap:12px;padding:10px 0;display:flex;position:sticky;top:0}.quiz-head h2{font:700 1.5rem/1.2 var(--f-display);margin:0}.quiz-score{font:600 13px/1 var(--f-mono);background:var(--surface);border:1px solid var(--rule);white-space:nowrap;border-radius:999px;margin:0;padding:8px 10px}.quiz-list{gap:14px;margin:0;padding:0;list-style:none;display:grid}.q fieldset{border:1px solid var(--rule);background:var(--surface);border-radius:12px;min-width:0;margin:0;padding:16px}.q legend{float:left;gap:4px;width:100%;margin:0 0 10px;padding:0;display:grid}.q legend+*{clear:both}.q-n{font:600 12px/1 var(--f-mono);color:var(--tone,var(--ink-2));letter-spacing:.06em}.q-prompt{font:700 1.15rem/1.35 var(--f-display)}.q .dg{margin:4px 0 12px}.q-opts{gap:8px;display:grid}.q-opt{border:1.5px solid var(--rule);cursor:pointer;border-radius:10px;align-items:center;gap:12px;min-height:52px;padding:12px 14px;font-size:16px;line-height:1.35;transition:border-color .15s,background .15s;display:flex}.q-opt input{width:20px;height:20px;accent-color:var(--tone,var(--accent));flex:none;margin:0}.q-opt:hover{border-color:var(--ink-2)}.q-opt:has(input:focus-visible){outline:2px solid var(--tone,var(--accent));outline-offset:2px}.q-opt:has(input:disabled){cursor:default}.q-opt.is-right{border-color:var(--live);background:color-mix(in srgb, var(--live) 12%, transparent)}.q-opt.is-wrong{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, transparent)}.q-opt.is-right:after{content:"✓";color:var(--live);margin-left:auto;font-weight:800}.q-opt.is-wrong:after{content:"✗";color:var(--accent);margin-left:auto;font-weight:800}.q-feedback{background:color-mix(in srgb, var(--accent) 8%, transparent);border-radius:8px;margin:12px 0 0;padding:10px 12px;font-size:15px;line-height:1.5}.q-feedback.is-right{background:color-mix(in srgb, var(--live) 10%, transparent)}.q-answer{margin-top:12px;font-size:15px}.q-answer summary{cursor:pointer;min-height:44px;color:var(--tone,var(--accent));align-items:center;font-weight:600;display:flex}.q-answer p{margin:4px 0 0}.quiz-result{background:var(--board);color:var(--board-ink);border-radius:12px;justify-items:start;gap:8px;margin-top:16px;padding:20px;display:grid}.quiz-result p{margin:0}.quiz-result-n{font:800 1.6rem/1.2 var(--f-display)}.quiz-result .dg-btn{border-color:var(--board-ink);color:var(--board-ink)}.gloss-fab{z-index:5;right:max(16px, env(safe-area-inset-right,0px));bottom:max(16px, env(safe-area-inset-bottom,0px));background:var(--ink);min-height:48px;color:var(--bg);font:600 15px/1 var(--f-body);cursor:pointer;border:0;border-radius:999px;align-items:center;gap:8px;padding:0 18px;display:inline-flex;position:fixed;box-shadow:0 10px 24px -10px #00000080}.gloss-fab span{font:600 12px/1 var(--f-mono);opacity:.75}.sheet{width:100%;max-width:720px;max-height:78vh;padding:0 0 env(safe-area-inset-bottom,0px);border:1px solid var(--rule);background:var(--surface);color:var(--ink);border-bottom:0;border-radius:16px 16px 0 0;margin:0 auto;position:fixed;inset:auto 0 0;overflow:auto}.sheet::backdrop{background:#00000073}.sheet-head{background:var(--surface);border-bottom:1px solid var(--rule);justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;display:flex;position:sticky;top:0}.sheet-head h2{font:700 1.25rem/1.2 var(--f-display);margin:0}.sheet-close{border:1px solid var(--rule);min-width:44px;min-height:44px;color:var(--ink);cursor:pointer;background:0 0;border-radius:50%;font-size:20px}.gloss{margin:0;padding:6px 18px 18px}.gloss>div{border-bottom:1px solid var(--rule);padding:12px 0}.gloss>div:last-child{border-bottom:0}.gloss dt{font:700 1.05rem/1.3 var(--f-display)}.gloss dt small{font:500 14px var(--f-display);color:var(--ink-2);margin-left:6px}.gloss dd{color:var(--ink-2);margin:4px 0 0;font-size:15px;line-height:1.55}@media (width>=720px){.dg-canvas{padding:18px 24px 8px}.dg-card{padding:18px 22px 20px}.lesson-nav{grid-template-columns:1fr 1fr}.lesson-nav .next{text-align:right;grid-column:2}.sheet{border-bottom:1px solid var(--rule);border-radius:16px;bottom:24px}}
