@scope (.activity){
:scope{color-scheme:light;--paper:#f5f4f0;--ink:#131b2b;--accent:#7a2021;--muted:#65676c;--line:#d7d5cf;--good:#275c47;--bad:#8e3b20;font-family:'IBM Plex Sans',sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}:scope{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;border-radius:3px}button:disabled{cursor:default}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}:scope{max-width:1352px;margin:auto;padding:0 56px}p{margin:0}button{touch-action:manipulation} [hidden]{display:none!important}
.masthead{display:flex;align-items:center;gap:28px;min-height:82px;border-bottom:1px solid var(--ink)}.brand{font-size:27px;font-weight:600;letter-spacing:-1.4px}.brand span{font-weight:400}.brand i{color:var(--accent);font-style:normal}.course,.eyebrow,footer{font:500 11px/1.5 'IBM Plex Mono',monospace;letter-spacing:1px}.course{color:var(--muted);margin-left:auto}.course>span{margin:0 12px;color:#aaa}.text-button{background:none;border:0;color:var(--accent);padding:10px 0;min-height:44px;font-weight:500}.masthead button{border-left:1px solid var(--line);padding-left:25px;font-size:13px}
.intro{padding:31px 0 25px}.eyebrow{color:var(--accent);margin-bottom:10px}h1{font-size:clamp(36px,4.1vw,58px);letter-spacing:-2px;line-height:1.08;font-weight:500;margin:0 0 12px}h1 span{color:var(--accent)}.lead{font-size:19px;color:var(--muted)}.instruction{display:flex;gap:14px;align-items:center;border-block:1px solid var(--line);padding:12px 0;font-size:15px}.instruction-number{font:12px 'IBM Plex Mono',monospace;color:var(--accent)}.instruction p{line-height:1.5}.instruction p>span{color:var(--muted)}
.game{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);gap:56px;margin:27px 0 24px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:19px}h2{font-size:20px;font-weight:500;margin:0;letter-spacing:-.4px}.section-heading>span{font-size:12px;color:var(--muted)}.bank-panel{padding-right:32px;border-right:1px solid var(--line)}.bank{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:214px;align-content:start}.card{display:flex;align-items:center;justify-content:center;min-height:64px;border:1px solid #c8c5bd;background:#fff;color:var(--ink);font-size:20px;font-weight:500;padding:12px 8px;cursor:grab}.card:hover{border-color:var(--accent);background:#faf6f3}.card[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}.selection{font-size:14px;min-height:51px;padding-top:16px;color:var(--accent)}.bank-note{display:flex;gap:12px;border-top:1px solid var(--line);padding-top:17px;color:var(--muted);font-size:13px;line-height:1.6}.bank-note>span{color:var(--accent);font-size:26px;line-height:1}.return{font-size:13px;text-decoration:underline;text-underline-offset:4px}.return:disabled{color:#888}.ladder{display:flex;flex-direction:column;gap:7px}.rung{margin-left:calc(var(--step) * 5%);width:calc(100% - var(--step) * 5%);display:flex;align-items:center;text-align:left;gap:14px;min-height:53px;border:1px solid var(--line);border-bottom:2px solid #aaa69c;background:#eeece5;padding:7px 14px;color:var(--ink);position:relative}.rung:hover,.rung.drag-over{border-color:var(--accent);background:#f4e9e3}.rung .number{font:14px 'IBM Plex Mono',monospace;align-self:center;color:var(--muted);width:16px}.rung .unit{font-size:21px;font-weight:500;flex:1}.rung .placeholder{font-size:14px;font-weight:400;color:#73716c}.rung .edge-label{font:10px 'IBM Plex Mono',monospace;letter-spacing:.7px;color:var(--muted)}.rung[aria-pressed=true]{border:2px solid var(--accent);background:#f4e7e2;padding:6px 13px}.rung.correct{border-color:var(--good);background:#edf3ed}.rung.incorrect{border-color:var(--bad);background:#f9eee5}.rung .mark{font-size:12px;font-weight:500}.rung.correct .mark{color:var(--good)}.rung.incorrect .mark{color:var(--bad)}
.game-actions{display:flex;justify-content:space-between;gap:14px;align-items:center;padding-top:20px}.game-actions>span{font:11px 'IBM Plex Mono',monospace;color:var(--muted)}.game-actions>div{display:flex;gap:22px;align-items:center}.game-actions .text-button{font-size:13px}.primary{border:1px solid var(--accent);background:var(--accent);color:#fff;padding:12px 20px;display:flex;gap:26px;align-items:center;min-height:48px;font-weight:500}.primary:hover{background:#5d1617}.primary:disabled{background:#e5e1da;border-color:#e5e1da;color:#7f7a74}.feedback{font-size:14px;color:var(--muted);line-height:1.5;margin-top:15px;min-height:42px}.feedback[data-result=success]{color:var(--good)}.feedback[data-result=retry]{color:var(--bad)}
.success{border-top:2px solid var(--good);background:#ecf0e9;padding:24px 28px;margin-bottom:24px}.success .eyebrow{color:var(--good)}.success h2{font-size:25px}.answer{margin-top:16px;font-size:16px;line-height:1.6}.examples{display:grid;grid-template-columns:1fr 1fr;gap:25px;margin-top:25px}.examples p{font-size:15px;line-height:1.5}.examples span{display:block;color:var(--good);font:500 30px 'IBM Plex Mono',monospace;margin-bottom:6px}.examples strong{font-weight:500}.example-note{font-size:12px;color:var(--muted);margin-top:18px}.teacher{border-block:1px solid var(--line);font-size:14px;line-height:1.7}.teacher summary{cursor:pointer;min-height:52px;padding:14px 0}.teacher summary span{float:right;color:var(--muted);font-size:12px}.teacher>div{max-width:850px;padding:0 0 20px}.teacher p+p{margin-top:12px}.source{font-size:12px;color:var(--muted)}a{color:var(--accent)}footer{display:flex;justify-content:space-between;gap:16px;padding:20px 0 24px;font-size:9px;color:var(--muted)}footer b{font-weight:400;color:var(--accent)}.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link:focus{position:fixed;z-index:10;top:12px;left:12px;padding:12px;background:white}.bank.drag-over{outline:2px dashed var(--accent);outline-offset:5px}
@media(min-width:1600px){:scope{max-width:1600px}.game{gap:72px}.card{font-size:25px;min-height:80px}.bank{min-height:260px}.rung{min-height:69px}.rung .unit{font-size:27px}.rung .placeholder{font-size:18px}.section-heading h2{font-size:25px}.instruction{font-size:18px}.feedback{font-size:17px}.bank-note,.selection{font-size:16px}}
@media(max-width:900px){:scope{padding:0 28px}.game{gap:26px;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr)}.bank-panel{padding-right:22px}.game-actions{flex-wrap:wrap}.game-actions>div{margin-left:auto}.rung .edge-label{font-size:9px}.rung{gap:9px;padding-inline:10px}.rung[aria-pressed=true]{padding-inline:9px}}
@media(max-width:650px){:scope{padding:0 20px}.masthead{min-height:66px;gap:12px;flex-wrap:wrap}.brand{font-size:24px}.course{font-size:9px;letter-spacing:0}.course>span{margin:0 5px}.masthead button{font-size:11px;padding-left:12px}.intro{padding:25px 0 22px}h1{font-size:39px;letter-spacing:-1.4px;max-width:380px}.lead{font-size:16px;max-width:270px}.instruction{align-items:flex-start;font-size:13px;gap:10px}.instruction-number{padding-top:4px}.game{display:block;margin-top:0}.bank-panel{position:sticky;top:0;z-index:2;background:var(--paper);padding:16px 0 10px;border:0;border-bottom:1px solid var(--line);box-shadow:0 4px 0 var(--paper)}.bank-panel .section-heading{margin-bottom:10px}.section-heading h2{font-size:17px}.bank{grid-template-columns:repeat(3,minmax(0,1fr));min-height:0;gap:7px}.card{min-height:45px;font-size:16px;padding:8px 3px}.selection{min-height:0;font-size:12px;padding-top:8px}.bank-note{display:none}.return{min-height:32px;font-size:12px;padding:3px 0}.return:disabled{display:none}.ladder-panel{padding-top:22px}.section-heading{margin-bottom:15px}.section-heading>span{font-size:10px}.rung{min-height:55px;margin-left:calc(var(--step) * 3%);width:calc(100% - var(--step) * 3%)}.rung .unit{font-size:19px}.rung .placeholder{font-size:12px}.rung .edge-label{font-size:8px}.game-actions{padding-top:18px;gap:10px}.game-actions>div{width:100%;justify-content:space-between;gap:12px}.primary{padding:11px 20px}.feedback{margin-top:12px}.teacher summary{font-size:13px}.teacher summary span{float:none;display:block;margin-left:16px}.success{padding:20px}.success h2{font-size:23px}.examples{grid-template-columns:1fr;gap:20px}.answer{font-size:14px}footer{flex-wrap:wrap;font-size:8px;gap:8px}.rung .mark{font-size:10px}}
@media(max-width:380px){.masthead{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding-top:9px}.masthead .brand{grid-column:1;grid-row:1}.masthead button{grid-column:2;grid-row:1;border:0;padding-left:0}.masthead .course{grid-column:1/-1;grid-row:2;margin:0;padding-bottom:10px}}
@media(prefers-reduced-motion:no-preference){button{transition:background-color .15s,border-color .15s}}

}