:root{color-scheme:only light;--paper: #f6f1e6;--paper-2: #fbf8f1;--grid: rgba(120, 100, 70, .07);--ink: #1f2a33;--muted: #776f62;--line: #e4dccb;--teal: #0f8b8d;--teal-2: #0b6d6f;--orange: #f08a24;--hi: #e2473b;--lo: #2f6fde;--bus: #e59612;--ok: #1f9d55;--font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--mono: "JetBrains Mono", ui-monospace, Menlo, monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55}[hidden]{display:none!important}button{font:inherit;color:inherit}.muted{color:var(--muted);font-size:13px}kbd{font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 5px;background:#fff}.topbar{height:48px;display:flex;align-items:center;gap:20px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--paper-2)}.brand{color:inherit;text-decoration:none;font-weight:700;letter-spacing:.04em;white-space:nowrap}.source{flex:none;font-size:12px;color:var(--muted);white-space:nowrap}.logo{color:var(--teal);font-size:20px;vertical-align:-2px;margin-right:4px}.progress{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}.progress-bar{width:110px;height:6px;border-radius:99px;background:var(--line);overflow:hidden}#progress-fill{height:100%;width:0;background:var(--teal);transition:width .4s}.layout{display:grid;grid-template-columns:minmax(200px,19%) minmax(380px,1fr) minmax(300px,37%);grid-template-rows:minmax(0,1fr);height:calc(100vh - 48px)}.btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 14px;min-height:40px;cursor:pointer;font-weight:600;white-space:nowrap}.btn:hover:not(:disabled){border-color:var(--teal)}.btn:disabled{opacity:.4;cursor:default}:focus-visible{outline:3px solid rgba(15,139,141,.45);outline-offset:1px}.lesson{display:flex;flex-direction:column;min-height:0;background:#fff;border-right:1px solid var(--line)}.lesson-steps{display:flex;gap:4px;padding:12px 16px 0}.lesson-steps span{flex:1;height:5px;border-radius:99px;background:var(--line)}.lesson-steps span.ok{background:var(--ok)}.lesson-steps span.now{outline:2px solid var(--teal);outline-offset:1px}.lesson-scroll{flex:1;min-height:0;overflow:auto;padding:8px 16px 12px}.step-no{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.lesson h2{margin:2px 0 8px;font-size:20px;line-height:1.3}.step-body p{margin:0 0 10px}.todo{margin:0 0 10px;padding-left:20px}.todo li{margin-bottom:8px}.chip{display:inline-block;padding:0 7px;border-radius:6px;font-size:13px;font-weight:600;color:#fff;line-height:1.6;white-space:nowrap}.chip.ev{background:#ffbf00;color:#3d2b00}.chip.ctrl{background:#ffab19;color:#3d2600}.chip.tb{background:#60f}.lesson-check{padding:0 16px}.lesson-check>:not([hidden]){margin-bottom:8px}.step-status{margin:0;padding:8px 10px;border-radius:8px;background:var(--paper);color:var(--muted);font-weight:600;font-size:14px}.step-status.ok{background:#e7f6ed;color:var(--ok)}.hint{margin:0;background:#fff6e8;border:1px solid #f3d6a8;border-radius:8px;padding:8px 10px;font-size:14px}.lesson-nav{display:flex;justify-content:space-between;gap:8px;padding:10px 16px;border-top:1px solid var(--line)}.btn-next.ready:not(:disabled){background:var(--teal);border-color:var(--teal);color:#fff}.lesson-tools{display:flex;flex-wrap:wrap;gap:2px 14px;padding:0 16px 10px}.link{border:0;background:none;padding:2px 0;font-size:13px;color:var(--teal-2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.blocks-col{min-width:0;min-height:0;position:relative;background:#fff;border-right:1px solid var(--line)}.blocks{position:absolute;inset:0}.board-col{min-width:0;min-height:0;display:flex;flex-direction:column}.board-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--paper-2)}.btn-run{background:var(--teal);border-color:var(--teal);color:#fff;min-width:92px}.btn-run:hover{background:var(--teal-2)}.btn-run.stop{background:var(--hi);border-color:var(--hi)}.btn-hold{-webkit-user-select:none;user-select:none;touch-action:none}.btn-see[aria-pressed=true]{background:#fff6e8;border-color:var(--orange)}.btn-hold[aria-pressed=true]{background:#eef3fd;border-color:var(--lo);color:var(--lo)}.status{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status.on{color:var(--teal-2);font-weight:600}.status.on:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px;animation:blink 1.2s infinite}@keyframes blink{50%{opacity:.3}}.zoom{margin-left:auto;display:flex;gap:2px}.zoom button{width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:17px}.stage{position:relative;flex:1;min-height:0;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px;overflow:hidden}.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.badges{position:absolute;inset:0;pointer-events:none}.badge{position:absolute;left:0;top:0;translate:-50% -50%;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:12px;font-weight:700;box-shadow:0 0 0 2px #fff}.flow{list-style:none;margin:0;padding:8px 8px 10px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;border-top:1px solid var(--line);background:var(--paper-2)}.flow li{position:relative;display:flex;flex-direction:column;padding:5px 7px;border:1.5px solid var(--line);border-radius:10px;background:#fff;min-width:0;transition:border-color .15s,background .15s}.flow li+li:before{content:"→";position:absolute;left:-11px;top:50%;translate:0 -50%;color:var(--muted);font-weight:700}.flow b{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow i{font-style:normal;display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--ink);color:#fff;font-size:10.5px;margin-right:5px}.flow .v{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.flow .t{font-family:var(--mono);font-size:10.5px;line-height:1.35;color:var(--muted)}.flow li.idle .v{color:var(--muted)}.flow li.lo{border-color:var(--lo);background:#f1f5fe}.flow li.active{border-color:var(--teal)}.flow li.bus{border-color:var(--bus);background:#fff8ec}.flow li.lit{border-color:var(--hi);background:#fff1ef}.flow li.lit .v{color:var(--hi)}.dialog{border:1px solid var(--line);border-radius:14px;padding:0 20px 16px;max-width:min(640px,calc(100vw - 32px));max-height:calc(100vh - 48px);box-shadow:0 20px 60px #281e0a40}.dialog::backdrop{background:#1e190f59}.dialog header{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#fff;padding-top:14px}.dialog h3{margin:0}.close{border:0;background:none;font-size:18px;cursor:pointer;width:36px;height:36px}.dialog pre{margin:0;font-family:var(--mono);font-size:12px;line-height:1.5;background:var(--paper-2);border-radius:8px;padding:12px;overflow:auto}.pinout{width:100%;border-collapse:collapse;font-size:14px;margin:10px 0}.pinout th,.pinout td{text-align:left;padding:6px 4px;border-bottom:1px solid var(--line);vertical-align:top}@media(max-width:900px){.layout{display:flex;flex-direction:column;height:auto}.lesson{border-right:0;border-bottom:1px solid var(--line)}.board-col{height:max(420px,66vh)}.blocks-col{order:1;height:max(420px,70vh);border-right:0;border-top:1px solid var(--line)}}@media(max-width:640px){.brand,.progress-bar{display:none}.flow{grid-template-columns:repeat(2,minmax(0,1fr))}.flow li:nth-child(3):before{display:none}.status{display:none}}.blocks .blocklySvg,.blocks .blocklyMainBackground{background-color:#fff!important;fill:#fff!important}.blocks .blocklyFlyoutBackground{fill:#f4f2ee!important;fill-opacity:1!important}.lesson-pick{flex:1;display:flex;gap:6px;min-width:0;overflow-x:auto}.lesson-pick button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 12px 3px 4px;font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;display:flex;align-items:center;gap:6px}.lesson-pick button b{background:var(--line);color:var(--ink);border-radius:999px;padding:0 8px;font-size:12.5px}.lesson-pick button[aria-current=true]{border-color:var(--teal);background:#e9f5f5}.lesson-pick button[aria-current=true] b{background:var(--teal);color:#fff}.lesson-pick button.done b:after{content:" ✓"}.flow.three{grid-template-columns:repeat(3,minmax(0,1fr))}.rhythm{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:0 10px 10px;background:var(--paper-2);font-size:12px}.rhythm[hidden]{display:none}.rhythm-label{font-weight:700;white-space:nowrap}.rhythm canvas{width:100%;height:40px;display:block;background:#fff;border:1px solid var(--line);border-radius:8px}.rhythm-read{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap;min-width:9ch;text-align:right}@media(max-width:640px){.flow.three{grid-template-columns:repeat(3,minmax(0,1fr))}.flow.three li:nth-child(3):before{display:block}.lesson-pick button span{display:none}}.badge.hot{pointer-events:auto;cursor:pointer;border:0;padding:0;width:24px;height:24px;background:var(--orange);font:700 12px var(--font);transition:scale .12s}.badge.hot:hover{scale:1.18}.badge.hot.found{background:var(--teal)}.badge.hot.sel{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--orange)}.mode-explore #run,.mode-explore #hold,.mode-explore #status,.mode-explore .flow,.mode-explore .rhythm,.mode-explore #example,.mode-explore #show-code{display:none!important}.explore{position:absolute;inset:0;overflow:auto;padding:16px 20px 20px;background:var(--paper-2)}.explore-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.explore-head h3{margin:0;font-size:18px}#explore-count{font-weight:700;color:var(--teal)}.explore-info{margin:12px 0 16px;padding:14px 16px;min-height:130px;background:#fff;border:1.5px solid var(--line);border-radius:14px}.explore-info h4{margin:0 0 6px;font-size:17px;color:var(--teal-2)}.explore-info p{margin:0 0 8px}.explore-block .chip{margin:2px 0}.explore-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:8px}.explore-list button{width:100%;display:flex;align-items:center;gap:8px;text-align:left;border:1.5px dashed var(--line);background:transparent;border-radius:10px;padding:7px 10px;font-size:13.5px;font-weight:600;color:var(--muted)}.explore-list button i{font-style:normal;flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--ink);font-size:11.5px}.explore-list button.found{border-style:solid;background:#fff;color:var(--ink);cursor:pointer}.explore-list button.found i{background:var(--teal);color:#fff}.explore-list button.sel{border-color:var(--orange)}.choices{display:grid;gap:8px;margin-top:10px}.choice{border:1.5px solid var(--line);background:#fff;border-radius:10px;padding:9px 12px;text-align:left;font-weight:600;cursor:pointer}.choice:hover{border-color:var(--teal)}.choice.right{border-color:var(--ok);background:#eaf7ef}.choice.right:after{content:" ✓";color:var(--ok)}.choice.wrong{border-color:var(--hi);background:#fff1ef}.chip.op{background:#59c059}.chip.per{background:#8a6bbf}.btn-power[aria-pressed=true]{border-color:var(--ok);background:#eaf7ef;color:#17723d}.sonar-wrap{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap}.sonar-wrap input{width:120px;accent-color:var(--orange)}.sonar-wrap output{font-family:var(--mono);min-width:6ch}.stage canvas.arena{display:none}.mode-arena .stage canvas:not(.arena){display:none!important}.mode-arena .zoom{display:none}.mode-arena .stage canvas.arena{display:block}.mode-arena .badges{display:none}.pad{position:absolute;right:12px;bottom:12px;display:grid;grid-template:repeat(3,44px) / repeat(3,44px);gap:4px;z-index:2}.pad button{border:1.5px solid var(--line);background:#ffffffeb;border-radius:10px;font-size:18px;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.pad button.on{background:var(--orange);border-color:var(--orange);color:#fff}.pad .up{grid-area:1 / 2}.pad .left{grid-area:2 / 1}.pad .right{grid-area:2 / 3}.pad .down{grid-area:3 / 2}.lesson-pick button{padding:3px 4px}.lesson-pick button span{display:none}.lesson-pick button[aria-current=true]{padding-right:12px}.lesson-pick button[aria-current=true] span{display:inline}.lesson-pick button.done:not([aria-current=true]) b{background:#d6efe0}.step-body .chip{white-space:normal;max-width:100%}@media(min-width:901px)and (max-width:1100px){.progress-bar{display:none}.topbar{gap:12px}.layout{grid-template-columns:minmax(0,1fr) minmax(300px,40%);grid-template-rows:minmax(0,auto) minmax(0,1fr)}.lesson{grid-column:1 / -1;max-height:34vh;display:grid;grid-template-columns:minmax(0,1fr) 260px;grid-template-rows:auto minmax(0,1fr) auto auto;border-right:0;border-bottom:1px solid var(--line)}.lesson-steps{grid-column:1 / -1}.lesson-scroll{grid-column:1;grid-row:2 / 5;padding-top:4px}.lesson h2{font-size:18px;margin-bottom:4px}.lesson-check,.lesson-nav,.lesson-tools{grid-column:2}.lesson-check{grid-row:2;padding-top:8px;overflow:auto}.lesson-nav{border-top:0;padding-top:4px;padding-bottom:4px}}.lesson-pick{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);scrollbar-width:none}@media(max-height:720px){.board-bar{padding:5px 10px}.board-bar .btn{padding-top:5px;padding-bottom:5px}.flow{padding:5px 8px 6px}.flow li{padding:3px 7px}.flow .t{display:none}}@media(min-width:901px)and (max-width:1100px)and (max-height:720px){.lesson{grid-column:1;max-height:38vh;grid-template-columns:minmax(0,1fr) 214px}.lesson-nav{padding-left:12px;padding-right:12px}.board-col{grid-column:2;grid-row:1 / -1}}