:root{--pv-bg:#0b1220;--pv-panel:#121d2e;--pv-line:#263650;--pv-text:#e8eef8;--pv-dim:#aab9ce;--pv-blue:#67a6ff;--pv-green:#54d891;--pv-red:#ff7b7b;--pv-yellow:#ffd36a;font-family:system-ui,"Microsoft YaHei",sans-serif;color:var(--pv-text);background:var(--pv-bg)}
*{box-sizing:border-box}body{margin:0;background:var(--pv-bg);color:var(--pv-text)}a{color:#a8ccff}.practice-top{padding:16px 4vw;border-bottom:1px solid var(--pv-line);display:flex;justify-content:space-between;gap:16px;align-items:center}.practice-top a{font-weight:700}.practice-shell{max-width:1600px;margin:auto;padding:20px 3vw}.practice-selection{max-width:780px;margin:10vh auto;padding:28px;border:1px solid var(--pv-line);border-radius:16px;background:var(--pv-panel)}.practice-selection h1{margin-top:0}.practice-choices{display:grid;gap:12px;margin-top:20px}.practice-choices a{border:1px solid var(--pv-line);padding:16px;border-radius:10px;text-decoration:none;background:#0e1727}.practice-workspace{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(360px,1.35fr) minmax(270px,.9fr);gap:16px;align-items:start}.practice-panel{border:1px solid var(--pv-line);border-radius:14px;background:var(--pv-panel);min-width:0}.practice-panel h2{font-size:16px;margin:0 0 12px}.practice-task,.practice-observation{padding:18px}.practice-editor{overflow:hidden}.practice-mode-buttons,.practice-scenario-buttons{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.practice-mode-buttons button,.practice-scenario-buttons button,.hint button,.practice-actions button,.practice-tabs button{background:#1b2a42;color:var(--pv-text);border:1px solid var(--pv-line);border-radius:8px;padding:8px 10px;cursor:pointer}.practice-mode-buttons .active,.practice-scenario-buttons .active,.practice-tabs .active{border-color:var(--pv-blue);background:#173a70}.practice-prediction{display:block;font-weight:600;margin-top:18px}.practice-prediction textarea{width:100%;min-height:88px;margin-top:6px;color:var(--pv-text);background:#0b1423;border:1px solid var(--pv-line);border-radius:8px;padding:8px;font:inherit}.practice-api-links{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;margin-top:14px}.editor-header{padding:12px 14px;border-bottom:1px solid var(--pv-line);display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--pv-dim)}.editor-wrap{display:grid;grid-template-columns:44px 1fr;min-height:450px}.practice-line-numbers{margin:0;padding:14px 8px;text-align:right;white-space:pre;color:#6880a0;background:#0d1625;user-select:none;font:13px/1.5 ui-monospace,Consolas,monospace}.practice-editor textarea{width:100%;height:100%;min-height:450px;resize:vertical;border:0;outline:0;padding:14px;background:#0b1220;color:#eff6ff;tab-size:4;font:13px/1.5 ui-monospace,Consolas,monospace}.practice-actions{padding:12px;border-top:1px solid var(--pv-line);display:flex;gap:8px;flex-wrap:wrap}.practice-actions button:first-child{background:#176b46;border-color:#339b69}.practice-status{padding:10px 14px;border-top:1px solid var(--pv-line);font-size:13px;color:var(--pv-dim)}.practice-status[data-status=pass]{color:var(--pv-green)}.practice-status[data-status=fail],.practice-status[data-status=error]{color:var(--pv-red)}.practice-bottom{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}.practice-bottom section{border:1px solid var(--pv-line);border-radius:14px;padding:18px;background:var(--pv-panel)}.practice-checks{padding-left:20px}.practice-checks .pass{color:var(--pv-green)}.practice-checks .fail{color:var(--pv-red)}.practice-diagnostics details{margin:8px 0;padding:8px;background:#0d1625;border-radius:7px}.practice-diagnostics p{white-space:pre-wrap;color:var(--pv-dim)}.observation-values{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px}.observation-values dt{color:var(--pv-dim)}.observation-values dd{margin:0;word-break:break-word}.observation-trace{max-height:180px;overflow:auto;padding-left:22px;font:12px/1.5 ui-monospace,Consolas,monospace;color:var(--pv-dim)}.trace-title{font-size:14px;margin:18px 0 8px}.pwm-wave{margin:16px 0;padding:8px;border:1px solid var(--pv-line);border-radius:6px;background:#0b1423}.pwm-wave svg{display:block;width:100%;height:auto}.pwm-wave-axis{stroke:#6980a0;stroke-width:1}.pwm-wave-line{fill:none;stroke:var(--pv-green);stroke-width:3;stroke-linejoin:round}.pwm-wave-caption,.pwm-wave-unset{display:block;padding:6px 2px 0;color:var(--pv-dim);font-size:12px;line-height:1.45}.hint{padding:10px;margin:9px 0;border-left:3px solid #496e9c;background:#0d1727}.hint h3{font-size:14px;margin:0 0 6px}.hint p{margin:0;color:var(--pv-dim);white-space:pre-wrap}.practice-reference{margin-top:14px;white-space:pre-wrap;overflow:auto;max-height:360px;background:#08101d;padding:12px;border-radius:8px;border:1px solid var(--pv-line);font:12px/1.5 ui-monospace,Consolas,monospace}.practice-storage-warning{margin:0 0 14px;padding:11px;border:1px solid #956e33;background:#342914;color:#ffe3a7;border-radius:8px}.practice-compiler-notice{font-size:12px;color:var(--pv-dim);margin:12px 0}.practice-tabs{display:none}.practice-observation .observation-empty{color:var(--pv-dim);line-height:1.6}.practice-target{padding:10px;border-left:3px solid var(--pv-blue);background:#0d1727;line-height:1.6;font-size:13px}
@media(max-width:950px){.practice-workspace{grid-template-columns:1fr}.practice-bottom{grid-template-columns:1fr}.practice-tabs{display:flex;gap:6px;margin-bottom:10px}.practice-task,.practice-editor,.practice-observation{width:100%}.editor-wrap,.practice-editor textarea{min-height:330px}.practice-workspace [data-practice-panel][hidden]{display:none}}
@media(max-width:540px){.practice-top{align-items:flex-start;flex-direction:column}.practice-shell{padding:12px}.practice-workspace{gap:10px}.practice-task,.practice-observation,.practice-bottom section{padding:14px}.practice-mode-buttons button,.practice-scenario-buttons button{font-size:12px}.editor-wrap,.practice-editor textarea{min-height:300px}}

/* Keep logical source lines aligned with the gutter at every viewport. */
.editor-wrap{height:450px;min-height:0}.practice-line-numbers{height:100%;overflow:hidden}.practice-editor textarea{min-height:0;resize:none;white-space:pre;overflow:auto}
button:focus-visible,a:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--pv-blue);outline-offset:3px}
.practice-checks details{font-size:12px;color:var(--pv-dim);margin:5px 0 12px}.practice-checks p{overflow-wrap:anywhere}.practice-top span{overflow-wrap:anywhere}
@media(max-width:950px){.editor-wrap{height:330px;min-height:0}.practice-editor textarea{min-height:0}}
@media(max-width:540px){.editor-wrap{height:300px;min-height:0}}
.observation-target{font-size:13px;line-height:1.6;color:var(--pv-dim)}.trace-line{font:inherit;margin-left:5px;color:#a8ccff;background:transparent;border:0;text-decoration:underline;cursor:pointer;padding:2px}.practice-mode-note{font-size:12px;line-height:1.5;color:var(--pv-dim)}
.practice-keil{padding:16px;border-top:1px solid var(--pv-line);background:#101e32;font-size:13px;line-height:1.6;overflow-wrap:anywhere}.practice-keil h2{margin:0 0 8px}.practice-keil p{color:var(--pv-dim);margin:8px 0}.practice-keil button{background:#234e84;color:var(--pv-text);border:1px solid #67a6ff;border-radius:8px;padding:9px 12px;font:inherit;cursor:pointer;margin:5px 6px 5px 0}.practice-keil button:disabled{opacity:.55;cursor:wait}.practice-keil [data-status=error]{color:var(--pv-red)}.practice-keil [data-status=exported]{color:#a8ccff}
/* Knowledge experiments: compact visuals, shared theme colors, no motion required. */
.practice-choices>a{display:flex;flex-direction:column;gap:.65rem;min-width:0}
.practice-choices>a>span{font-size:.88rem;font-weight:400;line-height:1.6;opacity:.78}
.observation-lamps,.observation-samples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0}
.observation-lamp{display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 8px;border:1px solid currentColor;border-radius:14px}
.lamp-dot{display:block;width:26px;height:26px;border-radius:50%;background:#64748b;box-shadow:inset 0 0 0 5px #0002}
.is-on .lamp-dot{background:#22c55e;box-shadow:0 0 22px #22c55e70,inset 0 0 0 4px #ffffff50}
.is-unset .lamp-dot{background:transparent;border:2px dashed currentColor;box-sizing:border-box}
.observation-sample{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid currentColor;border-radius:12px;font-size:.85rem;min-width:0}
.observation-sample.is-correct{border-color:#16a34a}
.observation-sample.is-mismatch{border-color:#d97706}
.observation-sample small,.observation-sample>span{opacity:.78}
.observation-comparison,.observation-next{padding:12px;border-radius:12px;background:#3b82f614;border:1px solid #3b82f644;font-size:.86rem;line-height:1.65;overflow-wrap:anywhere}
.observation-comparison p{margin:6px 0 0}
.timer-ticks{margin:12px 0}
.timer-ticks svg{width:100%;display:block}
.timer-ticks figcaption,.observation-note{font-size:.78rem;line-height:1.55;opacity:.8}
.pwm-counts{font-weight:600;font-size:.86rem}
.trace-details{margin-top:18px}
.trace-details summary{cursor:pointer}
.practice-top{flex-wrap:wrap;gap:12px}