@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
.game{margin-top:20px;padding:28px}.game-top{display:flex;justify-content:space-between;gap:20px}.game-top h2{margin:12px 0}.game-top h2 .badge{vertical-align:middle;margin-left:8px;font-family:'DM Sans',sans-serif;letter-spacing:0}.game-top p,.game-rule{color:#718076;font-size:12px;line-height:1.7}.game-score{text-align:right;flex-shrink:0}.game-score span{font:11px monospace;color:#77817b}.game-score strong{display:block;font:500 26px 'Space Grotesk',sans-serif;color:#24634d;margin-top:9px}.game-array{display:flex;justify-content:center;gap:12px;margin:28px 0}.game-tile{background:#f2f5ef;border:2px solid transparent;border-radius:12px;padding:16px 12px;min-width:65px;text-align:center}.game-tile strong{display:block;font:500 28px 'Space Grotesk',sans-serif}.game-tile span{font:9px monospace;color:#77817b;display:block;margin-top:6px}.game-tile.selected{background:#e9f4c9;border-color:#91b557}.game-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.game-feedback{background:#f4f7ef;padding:14px 16px;border-radius:8px;font-size:13px;line-height:1.7;min-height:50px;margin-bottom:0}.game-feedback.correct{background:#e8f3e8;color:#24634d}.game-feedback.incorrect{background:#fff3df;color:#805b23}@media(max-width:620px){.game{padding:20px}.game-array{gap:5px}.game-tile{min-width:0;flex:1;padding:12px 3px}.game-tile strong{font-size:23px}.game-tile span{font-size:8px}.game-top{gap:10px}.game-score strong{font-size:21px}.game-actions .primary,.game-actions .secondary{flex:1}.game-top h2 .badge{display:inline-block;margin:5px 0}}
:root{--bg:#f5f6f2;--ink:#202b29;--muted:#77817b;--green:#24634d;--lime:#d6ee88;--border:#e4e8df}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font:14px 'DM Sans',sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:inherit;text-decoration:none}header{height:82px;max-width:1320px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 44px;border-bottom:1px solid var(--border)}.brand{font:700 23px 'Space Grotesk',sans-serif;display:flex;align-items:center;gap:5px;letter-spacing:-1px}.brand>span:last-child{font-weight:400}.mark{background:var(--green);color:var(--lime);border-radius:9px;padding:2px 8px;margin-right:6px;font-size:27px}.header-note{font-size:12px;color:var(--muted)}.guide-link{font-weight:600;font-size:12px}main{max-width:1232px;margin:auto;padding:0 24px}.intro{display:flex;justify-content:space-between;align-items:center;padding:48px 0 38px}.eyebrow,.section-label{font-size:10px;font-weight:700;letter-spacing:1.7px;color:var(--green)}h1{font:500 clamp(32px,4vw,48px)/1.1 'Space Grotesk',sans-serif;letter-spacing:-2px;margin:15px 0}h1 span{color:var(--green)}.intro p{color:#77817b;line-height:1.7;margin-bottom:0}.intro-art{display:flex;position:relative;align-items:flex-end;gap:10px;height:140px;margin-right:60px;padding-bottom:24px;transform:rotate(-7deg)}.intro-art i{width:26px;background:#c9d7c9;border-radius:7px 7px 0 0;height:45px}.intro-art i:nth-child(2){height:70px;background:#b0c9a9}.intro-art i:nth-child(3){height:55px;background:#d6ee88}.intro-art i:nth-child(4){height:100px;background:#80a990}.intro-art i:nth-child(5){height:80px;background:#a6c590}.intro-art i:nth-child(6){height:120px;background:var(--green)}.intro-art span{position:absolute;bottom:0;font:11px monospace;left:5px;color:var(--green)}.workspace{display:grid;grid-template-columns:260px minmax(0,1fr);gap:20px}.panel{background:#fff;border:1px solid var(--border);border-radius:16px}.controls{padding:25px 22px}.controls>.section-label{margin-bottom:25px}label{font-size:12px;font-weight:600;display:block;margin-bottom:9px}select,input[type=number],textarea{width:100%;border:1px solid var(--border);border-radius:8px;padding:11px;background:#fafbf8;color:var(--ink)}textarea{resize:vertical;line-height:1.6}select{margin-bottom:24px}.control-heading{display:flex;justify-content:space-between;align-items:center}.control-heading output{font:600 11px monospace;color:var(--green);padding:4px 7px;border-radius:5px;background:#eff5e9;margin-bottom:9px}input[type=range]{width:100%;accent-color:var(--green);cursor:pointer;margin:0 0 22px;height:5px}.divider{height:1px;background:var(--border);margin:4px 0 22px}.hint{color:var(--muted);font-size:11px;margin-top:-2px}.full{width:100%;margin-top:10px}.primary,.secondary,.icon-button{border-radius:8px;padding:11px 18px;font-weight:600;font-size:12px;border:1px solid var(--border)}.primary{color:white;background:var(--green);border-color:var(--green);min-width:100px}.secondary,.icon-button{background:white}.secondary:hover{background:#f0f5ea}.text-button{border:0;background:transparent;color:var(--green);font-weight:600;font-size:12px;padding:10px}.local-note{margin:22px 0 0;font-size:10px;color:var(--muted);text-align:center}.local-note span{display:inline-block;width:5px;height:5px;background:#7c9b62;border-radius:50%;margin-right:4px}#error{font-size:11px;color:#b23e31;margin:8px 0}#error:empty{display:none}.stage{padding:27px 28px 0;overflow:hidden}.stage-heading{display:flex;justify-content:space-between;align-items:center}h2{font:500 22px 'Space Grotesk',sans-serif;letter-spacing:-.6px;margin:9px 0}.badge{font-size:10px;padding:7px 10px;border:1px solid var(--border);border-radius:20px;color:var(--green);background:#f6f9f0}.legend{display:flex;gap:18px;color:var(--muted);font-size:10px;margin-top:18px}.legend i{width:7px;height:7px;border-radius:2px;display:inline-block;margin-right:6px}.idle{background:#bdd0bc}.active{background:#d6ee88}.sorted{background:#24634d}.bars{height:260px;display:flex;align-items:flex-end;gap:clamp(2px,.5vw,7px);padding:35px 0 24px;border-bottom:1px solid var(--border);margin-top:12px}.bar{flex:1;background:#bdd0bc;border-radius:5px 5px 0 0;position:relative;min-width:0;transition:height .12s ease,background .12s ease}.bar.active{background:var(--lime)}.bar.settled{background:var(--green)}.bar.pivot{background:#e7b878}.bar.dim{opacity:.25}.bar .value{position:absolute;top:-19px;width:100%;text-align:center;font:10px monospace;color:#5c6b61}.bar .index{position:absolute;bottom:-19px;width:100%;text-align:center;font:9px monospace;color:#9aa398}.bars.dense .value{font-size:8px}.bars.dense .index{display:none}.narration{display:flex;align-items:center;gap:12px;min-height:62px}.spark{color:var(--green);font-size:22px}.narration p{font-size:12px;line-height:1.5;color:#607067}.playback{display:flex;gap:8px;align-items:center;padding:8px 0 25px}.icon-button{font-size:18px;padding:6px 12px}.timeline{flex:1;display:flex;flex-direction:column;align-items:flex-end;margin-left:12px}.timeline input{margin:6px 0 10px}.timeline span{font:10px monospace;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);margin:0 -28px;background:#fbfcf9;padding:20px 28px;gap:10px}.metrics span{display:block;font-size:8px;letter-spacing:1px;color:var(--muted);margin-bottom:8px}.metrics strong{font:500 24px 'Space Grotesk',sans-serif}.learn{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.explanation{padding:25px 28px}.explanation>p{font-size:13px;line-height:1.8;color:#718076}.explanation h2{margin-top:16px}.tip{background:#f3f7ea;border-left:3px solid #b2cf77;padding:13px 16px;border-radius:0 8px 8px 0;margin:18px 0}.tip strong{font-size:11px;color:var(--green)}.tip p{font-size:12px;margin:6px 0 0;line-height:1.6;color:#607067}.explanation .footnote{font-size:10px;line-height:1.7}.code-panel{background:#233b31;color:#d8e2d9;border:0;padding:25px 28px}.code-heading{display:flex;justify-content:space-between;font:10px monospace;letter-spacing:1px;color:#a4b8a8}.live-dot{color:var(--lime);font-size:9px}ol{padding-left:27px;margin:25px 0;font:12px/1.8 monospace}li{padding:6px 9px;border-radius:4px}li::marker{color:#6e8878}li.current{background:#3b5342;color:var(--lime)}.code-panel>p{font-size:10px;color:#8fa699}footer{display:flex;justify-content:space-between;padding:28px 0 30px;color:#889187;font-size:11px}footer span{font:9px monospace;letter-spacing:1px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}:focus-visible{outline:3px solid #8dbb62;outline-offset:3px}[hidden]{display:none!important}@media(max-width:850px){header{padding:0 24px}.intro-art{margin-right:0}.workspace{grid-template-columns:220px minmax(0,1fr);gap:12px}.stage{padding:22px 18px 0}.metrics{margin:0 -18px;padding:18px}.metrics span{font-size:7px}.legend{gap:10px}.playback{flex-wrap:wrap}.timeline{flex-basis:100%;margin-left:0}.learn{gap:12px}.header-note{display:none}}@media(max-width:620px){main{padding:0 16px}.intro{padding:32px 0}.intro-art{display:none}.workspace,.learn{grid-template-columns:1fr}.controls{padding:20px}.controls>.section-label{margin-bottom:18px}.bars{height:230px}.stage-heading{gap:10px}.badge{white-space:nowrap}.metrics strong{font-size:20px}footer{gap:14px;flex-direction:column}.learn h2{font-size:20px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}