:root{color-scheme:light;--bg:#fff;--surface:#fff;--soft:#f7f8fb;--ink:#253347;--muted:#647084;--border:#e2e6ed;--green:#58cc02;--green-shadow:#43a000;--green-ink:#215713;--green-soft:#eafbdc;--blue:#1b69c8;--blue-bright:#1cb0f6;--blue-deep:#1386c0;--blue-soft:#e7f4ff;--blue-shine:#99defe;--coral:#c74b33;--coral-bright:#ff967d;--coral-soft:#fff0eb;--coral-shadow:#bf553e;--teal:#057969;--teal-bright:#5fe0c1;--teal-soft:#e5faf3;--teal-shadow:#32a98c;--gold:#ffc832;--gold-ink:#765311;--gold-soft:#fff5d7;--red:#c43e47;--red-soft:#fff0f1;--mascot-face:#123f60;--mascot-eye:#fff;--mascot-shadow:#d9edf7;--on-colour:#fff;--radius:16px;--shadow:0 4px 0 var(--border)}
:root[data-theme="dark"]{color-scheme:dark;--bg:#101c2b;--surface:#18283a;--soft:#142236;--ink:#edf3fd;--muted:#b4c3d5;--border:#334b64;--green:#78d52c;--green-shadow:#4b972b;--green-ink:#183d0c;--green-soft:#223b27;--blue:#8bc8ff;--blue-bright:#1cb0f6;--blue-soft:#1c3652;--coral:#ffae97;--coral-soft:#3e2c2b;--teal:#70e6ca;--teal-soft:#1d3d39;--gold-ink:#ffe196;--gold-soft:#3b3324;--red:#ffa2aa;--red-soft:#422b35;--mascot-shadow:#213b53}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;font-size:16px;line-height:1.6;letter-spacing:-.01em}button,input,select,textarea{font:inherit;color:inherit}button,a,input,select,summary{touch-action:manipulation}button{cursor:pointer;background:var(--surface);border:2px solid var(--border);border-radius:12px;padding:10px 16px;min-height:46px;font-weight:750;line-height:1.4;transition:background .18s,border-color .18s,transform .15s,box-shadow .15s}button:hover{background:var(--soft)}button:active:not(:disabled){transform:translateY(2px)}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:4px}a{color:var(--blue)}h1,h2,h3{font-weight:850;line-height:1.25;letter-spacing:-.03em}h1{font-size:34px;margin:0 0 12px}h2{font-size:27px;margin:0 0 14px}h3{font-size:20px;margin:0 0 12px}p{margin:0 0 16px}.icon{width:23px;height:23px;vertical-align:middle;flex-shrink:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px}.primary{background:var(--green);color:var(--green-ink);border-color:var(--green);border-bottom-color:var(--green-shadow);box-shadow:0 4px 0 var(--green-shadow);text-transform:uppercase;font-size:13px;letter-spacing:.025em}.primary:hover{background:color-mix(in srgb,var(--green) 88%,var(--surface))}.primary:active{box-shadow:0 2px 0 var(--green-shadow)}.secondary{box-shadow:var(--shadow)}.quiet{border-color:transparent;background:transparent;color:var(--muted)}.small{font-size:12px;padding:6px 10px;min-height:36px}.full{width:100%}.muted{color:var(--muted)}.micro{font-size:12px}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.spread{justify-content:space-between}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:absolute;left:12px;top:-100px;background:var(--surface);padding:12px;z-index:100}.skip-link:focus{top:12px}.boot{max-width:600px;margin:15vh auto;padding:24px}[hidden]{display:none!important}
.app-shell{display:grid;grid-template-columns:214px minmax(0,1fr);max-width:1440px;margin:auto;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;border-right:2px solid var(--border);padding:28px 18px;display:flex;flex-direction:column;gap:20px}.brand{display:flex;align-items:center;gap:9px;font-size:23px;font-weight:900;letter-spacing:-.05em;color:var(--green-ink)}:root[data-theme="dark"] .brand{color:var(--green)}.brand .icon{width:30px;height:30px;color:var(--green)}.brand-sub{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:0;margin:5px 0 0 40px}.sidebar nav{display:flex;flex-direction:column;gap:10px}.nav-item{display:flex;align-items:center;gap:13px;text-align:left;border-color:transparent;color:var(--muted);font-size:14px;padding:12px;min-height:52px}.nav-item[aria-current="page"]{background:var(--blue-soft);color:var(--blue);border-color:color-mix(in srgb,var(--blue) 28%,var(--border))}.nav-item .icon{width:24px}.nav-item .count{margin-left:auto;background:var(--red-soft);color:var(--red);padding:1px 6px;border-radius:5px;font-size:11px}.sidebar-bottom{margin-top:auto}.sidebar-bottom p{font-size:11px;line-height:1.6;color:var(--muted);margin:12px 0 0}.page-shell{min-width:0}.topbar{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:2px solid var(--border);padding:15px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:80px}.course-label{font-size:12px;color:var(--muted);font-weight:750}.course-label strong{display:block;font-size:15px;color:var(--ink)}.game-stats{display:flex;gap:24px;align-items:center}.game-stat{display:flex;align-items:center;gap:6px;font-weight:850;font-size:16px;font-variant-numeric:tabular-nums}.game-stat.xp{color:var(--blue)}.game-stat.hearts{color:var(--red)}.game-stat.streak{color:var(--gold-ink)}.game-stat .icon{width:22px;height:22px}.top-actions{display:flex;gap:5px}.top-actions button{padding:7px 9px;min-height:40px}.page-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:36px;padding:28px 28px 60px;align-items:start}.page-grid.focus-layout{grid-template-columns:minmax(0,850px);justify-content:center}.content{min-width:0;scroll-margin-top:100px}.right-rail{position:sticky;top:104px;display:flex;flex-direction:column;gap:20px}.rail-card{border:2px solid var(--border);border-radius:var(--radius);padding:22px}.rail-card h3{font-size:17px}.rail-card p{font-size:13px;color:var(--muted);margin-bottom:13px}.rail-welcome{text-align:center;background:var(--blue-soft);border-color:transparent}.rail-welcome .byte-mascot{width:130px;margin:-8px auto 0;display:block}.rail-welcome h3{margin:8px 0 10px}.rail-welcome .primary{margin-top:3px}.stat-line{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin:8px 0}.meter{height:12px;background:var(--border);border-radius:20px;overflow:hidden}.meter span{display:block;height:100%;background:var(--green);border-radius:20px;transition:transform .3s ease-out;transform-origin:left}.eyebrow{text-transform:uppercase;letter-spacing:.09em;font-weight:850;font-size:11px;color:var(--muted);margin:0 0 7px}.unit-tabs{display:flex;gap:8px;margin:20px 0 26px}.unit-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-size:12px;padding:10px 9px;border-bottom-width:4px}.unit-tab[aria-pressed="true"]{background:var(--unit-soft);color:var(--unit);border-color:var(--unit)}[data-unit="4"]{--unit:var(--blue);--unit-soft:var(--blue-soft);--node-colour:var(--blue-bright);--node-shadow:var(--blue-deep);--node-ink:#123f60}[data-unit="5"]{--unit:var(--coral);--unit-soft:var(--coral-soft);--node-colour:var(--coral-bright);--node-shadow:var(--coral-shadow);--node-ink:#602316}[data-unit="6"]{--unit:var(--teal);--unit-soft:var(--teal-soft);--node-colour:var(--teal-bright);--node-shadow:var(--teal-shadow);--node-ink:#114a3c}.unit-banner{background:var(--unit-soft);border:2px solid color-mix(in srgb,var(--unit) 25%,var(--border));border-radius:16px;padding:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.unit-banner h2{font-size:23px;margin-bottom:5px}.unit-banner p{font-size:13px;color:var(--muted);margin:0}.unit-banner .unit-number{color:var(--unit);font-size:11px;letter-spacing:.1em;font-weight:850;text-transform:uppercase;margin-bottom:9px}.unit-banner .icon{width:42px;height:42px;color:var(--unit)}.unit-banner .meter{height:8px;margin-top:16px;background:color-mix(in srgb,var(--unit) 15%,var(--border))}.unit-banner .meter span{background:var(--unit)}
.learning-path{position:relative;padding:10px 0 20px;max-width:440px;margin:auto}.path-node{position:relative;display:flex;align-items:center;gap:19px;padding:11px 10px 17px;min-height:125px}.path-node:nth-child(4n+2){margin-left:48px}.path-node:nth-child(4n+3){margin-left:80px}.path-node:nth-child(4n+4){margin-left:48px}.path-node:before{content:"";position:absolute;left:45px;top:98px;width:8px;height:50px;background:var(--border);border-radius:6px;transform:rotate(-18deg);transform-origin:top;z-index:0}.path-node:last-child:before{display:none}.lesson-node{height:76px;width:78px;border-radius:50%;padding:0;flex-shrink:0;background:var(--node-colour);border-color:var(--node-colour);color:var(--node-ink);box-shadow:0 7px 0 var(--node-shadow),0 10px 0 color-mix(in srgb,var(--node-shadow) 12%,transparent);position:relative;z-index:1;border-width:3px}.lesson-node:hover{background:color-mix(in srgb,var(--node-colour) 85%,var(--surface));transform:translateY(-2px)}.lesson-node:active{transform:translateY(4px);box-shadow:0 3px 0 var(--node-shadow)}.lesson-node .icon{width:30px;height:30px}.lesson-node.completed{background:var(--green);border-color:var(--green);box-shadow:0 7px 0 var(--green-shadow);color:var(--green-ink)}.lesson-node.recommended:after{content:"";position:absolute;inset:-12px;border:3px dashed var(--unit);border-radius:50%;pointer-events:none}.path-text{max-width:220px}.path-text strong{display:block;font-size:15px;font-weight:850;line-height:1.4;margin-bottom:7px}.path-text .qid{font-size:10px;padding:4px 6px;border-radius:5px;background:var(--soft);color:var(--muted);font-weight:750;display:inline-block}.path-text .node-status{display:block;font-size:11px;color:var(--unit);font-weight:750;margin-top:5px}.mini-tag{font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.035em;background:var(--gold-soft);color:var(--gold-ink);padding:3px 6px;border-radius:5px}.unit-footer{display:flex;align-items:center;gap:20px;background:var(--gold-soft);padding:20px;border-radius:12px;margin:20px 0}.unit-footer .icon{color:var(--gold-ink);width:28px;height:28px}.unit-footer p{font-size:12px;margin:3px 0 0;color:var(--muted)}.unit-footer strong{font-size:14px}.badge-list{display:flex;flex-direction:column;gap:15px}.achievement{display:flex;gap:12px;align-items:center}.achievement .achievement-icon{padding:9px;border-radius:10px;background:var(--soft);color:var(--muted)}.achievement.earned .achievement-icon{background:var(--gold-soft);color:var(--gold-ink)}.achievement strong{font-size:12px;display:block}.achievement small{font-size:11px;color:var(--muted);display:block}.session-timer{font-weight:900;font-size:30px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:12px 0;color:var(--blue)}
.lesson-top{display:flex;align-items:center;gap:18px;margin-bottom:26px}.lesson-top .meter{flex:1;height:14px}.lesson-top .lesson-position{font-size:11px;color:var(--muted);font-weight:750;white-space:nowrap}.lesson-top button{padding:7px;min-height:40px;width:40px}.lesson-heading{margin-bottom:22px}.lesson-heading .qid{display:inline-block;color:var(--unit);background:var(--unit-soft);padding:5px 9px;border-radius:6px;font-size:11px;font-weight:850;margin-bottom:12px}.lesson-heading h1{font-size:29px}.exam-prompt{border:2px solid var(--border);border-radius:12px;padding:17px 20px;font-size:14px;margin:18px 0}.exam-prompt .eyebrow{font-size:10px;margin-bottom:5px}.concept-box{background:var(--unit-soft);border-radius:14px;padding:20px 23px;margin:22px 0}.concept-box p{margin:0;font-size:15px}.concept-box .eyebrow{color:var(--unit)}.step-title{font-size:18px;margin:25px 0 10px}.step-title span{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:var(--unit-soft);color:var(--unit);font-size:11px;margin-right:9px}.animation-stage{border:2px solid var(--border);border-bottom:0;border-radius:16px 16px 0 0;background:var(--surface);min-height:210px;padding:22px;overflow:hidden}.animation-stage svg.network-diagram{display:block;width:100%;height:auto;max-height:380px;margin:auto;color:var(--ink)}.animation-caption{background:var(--unit-soft);color:var(--ink);padding:17px 20px;border-radius:0 0 14px 14px;font-size:14px;min-height:76px;margin-bottom:15px;line-height:1.7}.animation-caption .eyebrow{font-size:10px;color:var(--unit)}.step-dots{display:flex;gap:5px;flex-wrap:wrap}.step-dots span{width:7px;height:7px;background:var(--border);border-radius:50%}.step-dots span.active{background:var(--unit)}.animation-controls{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:24px}.animation-controls .row{gap:6px}.animation-controls button{font-size:12px;min-height:40px;padding:8px 10px}.animation-controls button .icon{width:18px;height:18px}.prediction{padding:14px 17px;border-left:4px solid var(--gold);font-size:13px;background:var(--gold-soft);border-radius:0 8px 8px 0;margin:20px 0}.lesson-bottom{border-top:2px solid var(--border);padding:20px 0 0;margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:16px}.lesson-bottom p{font-size:12px;color:var(--muted);margin:0;max-width:380px}.lesson-bottom .primary{min-width:190px}.quick-note{font-size:11px;color:var(--muted);margin-top:14px}.data-blocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.data-block{padding:14px 6px;text-align:center;background:var(--soft);border:2px solid var(--border);border-radius:10px;font-size:12px;font-weight:800;transition:background .25s,border-color .25s,transform .25s}.data-block.selected{background:var(--unit-soft);border-color:var(--unit);color:var(--unit);transform:translateY(-3px)}.data-block small{font-weight:500;color:var(--muted);display:block;font-size:11px;margin-top:4px}.bits{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}.bit{display:grid;place-items:center;width:32px;height:40px;border-radius:7px;background:var(--unit-soft);border:2px solid var(--unit);color:var(--unit);font:750 14px ui-monospace,monospace}.bit.host{background:var(--soft);border-color:var(--border);color:var(--muted)}.bit.borrow{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink)}.node-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.network-node{flex:1;min-width:105px;border:2px solid var(--border);border-radius:12px;padding:15px 10px;text-align:center;background:var(--soft);font-size:13px;font-weight:650;transition:background .25s,transform .25s}.network-node.active{background:var(--unit-soft);border-color:var(--unit);transform:translateY(-3px)}.node-arrow{font-size:23px;color:var(--unit)}.packet-envelope{padding:16px;border:3px solid var(--unit);background:var(--unit-soft);border-radius:14px;text-align:center;flex:1;min-width:150px}.packet-inner{margin-top:8px;padding:13px;background:var(--surface);border:2px solid var(--border);border-radius:9px;font-size:13px}.byte-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:18px 0}.byte-cell{font-size:11px;min-height:45px;padding:10px 3px;text-align:center;border:2px solid var(--border);border-radius:7px;background:var(--soft)}.byte-cell.allowed{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}.byte-cell.flight{background:var(--gold-soft);border-color:var(--gold-ink);border-style:dashed;color:var(--gold-ink)}.byte-cell.acked{text-decoration:line-through;color:var(--muted)}.motion-packet{fill:var(--unit);animation:packet-travel .95s ease-out both}.arrow-in{stroke-dasharray:var(--line-length);stroke-dashoffset:var(--line-length);animation:arrow-draw .65s ease-out forwards}.diagram-note{font-size:12px;color:var(--muted);margin:12px 0 0}@keyframes packet-travel{from{transform:translate(var(--from-x,0px),var(--from-y,0px))}to{transform:translate(var(--to-x,0px),var(--to-y,0px))}}@keyframes arrow-draw{to{stroke-dashoffset:0}}
.challenge-panel{padding:8px 0}.challenge-panel h2{font-size:25px;line-height:1.45;max-width:720px}.challenge-meta{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:0 0 17px}.choices{display:grid;gap:12px;margin:26px 0}.choice{display:flex;align-items:center;gap:16px;text-align:left;padding:16px 18px;min-height:65px;box-shadow:0 3px 0 var(--border);font-size:15px;font-weight:600}.choice .choice-key{height:28px;width:28px;display:grid;place-items:center;border:2px solid var(--border);border-radius:7px;font-size:11px;font-weight:800;flex-shrink:0;color:var(--muted)}.choice[aria-pressed="true"]{background:var(--blue-soft);border-color:var(--blue);box-shadow:0 3px 0 color-mix(in srgb,var(--blue) 65%,var(--border));color:var(--blue)}.choice[aria-pressed="true"] .choice-key{border-color:var(--blue);color:var(--blue)}.number-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:25px 0}.field{display:flex;flex-direction:column;gap:8px}.field label{font-size:13px;font-weight:750}input[type="text"],input[type="search"],textarea,select{border:2px solid var(--border);border-radius:11px;background:var(--soft);padding:13px 15px;width:100%;min-height:48px}input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}.number-fields input{font:650 18px ui-monospace,monospace}.answer-order{display:flex;flex-direction:column;gap:9px;min-height:95px;padding:16px;background:var(--soft);border:2px dashed var(--border);border-radius:12px;margin:24px 0 14px}.answer-order .empty{font-size:13px;color:var(--muted);margin:0}.token-pool{display:flex;flex-direction:column;gap:9px;margin:15px 0}.order-token{text-align:left;font-size:14px;border-bottom-width:4px;padding:13px 15px}.order-token.selected{background:var(--blue-soft);border-color:var(--blue);color:var(--blue)}.order-token .order-index{display:inline-grid;place-items:center;height:24px;width:24px;margin-right:10px;border-radius:6px;background:var(--surface);color:var(--blue);font-size:11px}.matching{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}.match-column{display:flex;flex-direction:column;gap:10px}.match-item{min-height:64px;text-align:left;font-size:13px;padding:12px;display:flex;align-items:center;gap:8px}.match-item.selected{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}.match-item.paired{border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}.match-index{display:grid;place-items:center;background:var(--surface);border-radius:5px;font-size:10px;font-weight:850;min-width:22px;height:22px}.hint-panel{border:2px solid var(--border);border-radius:10px;padding:13px 16px;margin:20px 0;font-size:13px}.hint-panel summary{font-weight:750;cursor:pointer}.hint-panel p{margin:10px 0 0;color:var(--muted)}.feedback{border:2px solid var(--border);border-radius:14px;padding:20px;margin:24px 0;animation:feedback-enter .2s ease-out}.feedback.correct{background:var(--green-soft);border-color:var(--green-shadow)}.feedback.wrong{background:var(--red-soft);border-color:var(--red)}.feedback-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:850}.feedback.correct .feedback-head{color:var(--teal)}.feedback.wrong .feedback-head{color:var(--red)}.feedback p{font-size:14px;margin:0;line-height:1.75}.feedback .reward{display:block;font-size:12px;margin-top:12px;font-weight:800;color:var(--blue)}.practice-banner{background:var(--gold-soft);color:var(--gold-ink);font-size:12px;padding:12px 15px;border-radius:9px;margin-bottom:20px}.challenge-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:2px solid var(--border);padding-top:22px;margin-top:28px}.challenge-footer .primary{min-width:190px}.combo-note{font-size:12px;color:var(--muted)}@keyframes feedback-enter{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}
.write-stage h2{font-size:25px}.write-stage textarea{min-height:190px;resize:vertical;background:var(--surface);margin-top:8px}.write-label{font-size:13px;font-weight:750;margin-top:20px;display:block}.answer-details{border:2px solid var(--border);border-radius:12px;margin:22px 0;background:var(--surface)}.answer-details summary{cursor:pointer;list-style:none;padding:17px 20px;font-weight:800;font-size:15px}.answer-details summary:after{content:"+";float:right;color:var(--blue);font-size:23px;line-height:1}.answer-details[open] summary:after{content:"−"}.answer-body{padding:0 20px 20px;font-size:14px}.answer-body p{line-height:1.75}.answer-body li{margin-bottom:10px}code{font-size:13px;font-family:ui-monospace,monospace;background:var(--soft);padding:2px 5px;border-radius:4px;overflow-wrap:anywhere}pre{font:12px/1.8 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--soft);padding:17px;border-radius:10px}.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:9px;margin:15px 0}table{border-collapse:collapse;width:100%;font-size:12px}th,td{text-align:left;vertical-align:top;padding:10px;border-bottom:1px solid var(--border)}th{background:var(--unit-soft,var(--blue-soft));color:var(--unit,var(--blue));font-weight:800}.coverage{display:flex;flex-direction:column;gap:12px;margin:18px 0}.coverage label{display:flex;gap:12px;align-items:start;font-size:14px}.coverage input{height:18px;width:18px;margin-top:4px;accent-color:var(--teal);flex-shrink:0}.self-check-note{background:var(--gold-soft);padding:15px 17px;border-radius:10px;font-size:13px;color:var(--gold-ink)}.completion{text-align:center;max-width:680px;margin:auto;padding:8px 0}.completion .byte-mascot{width:170px;margin:0 auto 12px;display:block}.completion h1{font-size:34px}.completion p{max-width:520px;margin:0 auto 22px;color:var(--muted);font-size:15px}.completion-stats{display:flex;justify-content:center;gap:12px;margin:25px 0}.result-stat{border:2px solid var(--border);border-radius:12px;padding:16px 22px;text-align:center;min-width:115px}.result-stat strong{display:block;font-size:25px;font-weight:900;color:var(--blue)}.result-stat span{font-size:11px;font-weight:750;color:var(--muted)}.completion-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.byte-mascot.happy .byte-body{animation:byte-hop .7s ease-out both}@keyframes byte-hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-14px)}65%{transform:translateY(3px)}}
.bank-search{margin:20px 0}.bank-unit h3{margin:26px 0 16px;color:var(--unit)}.question-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;border-bottom:2px solid var(--border)}.question-row .qid{display:inline-block;font-size:10px;font-weight:850;color:var(--unit);background:var(--unit-soft);border-radius:4px;padding:3px 6px;margin-bottom:6px}.question-row strong{display:block;font-size:15px;font-weight:800;margin-bottom:5px}.question-row p{font-size:12px;color:var(--muted);margin:0;max-width:620px}.question-row button{font-size:12px;min-width:90px}.row-state{font-size:10px;color:var(--teal);font-weight:750;margin-left:7px}.empty-review{text-align:center;padding:30px 20px}.empty-review .byte-mascot{width:130px;margin:auto}.empty-review h2{margin:18px 0 12px}.review-list .question-row{padding:20px 0}.review-summary{padding:20px;background:var(--gold-soft);border-radius:12px;margin:20px 0}.review-summary p{font-size:13px;margin:0;color:var(--gold-ink)}.route-block{display:grid;grid-template-columns:80px 1fr;gap:18px;padding:22px 0;border-bottom:2px solid var(--border)}.route-time{background:var(--unit-soft,var(--soft));color:var(--unit,var(--blue));padding:10px 6px;border-radius:9px;font-size:11px;font-weight:850;align-self:start;text-align:center}.route-block h3{font-size:17px;margin-bottom:9px}.route-block p{font-size:13px}.route-block .row{gap:5px}.route-block button{font-size:10px;min-height:31px;padding:5px 8px}.route-intro{background:var(--gold-soft);padding:20px;border-radius:13px;margin:22px 0}.route-intro p{font-size:14px;color:var(--gold-ink);margin:0}.mock-card{border:2px solid var(--border);border-radius:14px;padding:21px;margin:21px 0}.mock-card h3{font-size:17px;line-height:1.55}.mock-card textarea{min-height:125px;resize:vertical}.mock-card label{font-size:12px;color:var(--muted)}.mock-card .answer-details{margin-bottom:0;border-width:1px}.mock-set-controls{margin:22px 0}.timer{font-variant-numeric:tabular-nums;font-size:24px;font-weight:900;color:var(--coral);padding:7px 12px;border-radius:9px;background:var(--coral-soft)}.sources{font-size:11px;color:var(--muted);border-top:1px solid var(--border);padding-top:18px;margin:24px 0}.sources a{color:var(--muted)}
dialog{background:var(--surface);color:var(--ink);border:2px solid var(--border);border-radius:18px;padding:26px;max-width:520px;width:calc(100% - 32px);max-height:90dvh;overflow:auto}dialog::backdrop{background:rgb(0 0 0 / .4)}.setting-row{padding:17px 0;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:20px}.setting-row label{font-size:14px;font-weight:750}.setting-row p{font-size:12px;color:var(--muted);margin:5px 0 0}.setting-row input[type="checkbox"]{width:22px;height:22px;accent-color:var(--green-shadow)}.setting-row select{min-width:120px}.file-input{font-size:12px;max-width:210px}.dialog-note{font-size:12px;color:var(--muted);margin:15px 0}.mobile-brand{display:none}.mobile-nav{display:none}.print-book{display:none}#confetti{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}#confetti span{position:absolute;top:20%;height:12px;width:7px;background:var(--green);border-radius:2px;animation:confetti-fall 1.15s var(--delay) ease-out both}#confetti span:nth-child(3n){background:var(--blue-bright)}#confetti span:nth-child(3n+1){background:var(--gold)}@keyframes confetti-fall{0%{transform:translateY(0) rotate(var(--rot));opacity:0}10%{opacity:1}100%{transform:translateY(50vh) rotate(calc(var(--rot) + 250deg));opacity:0}}.error-note{font-size:13px;color:var(--red);padding:12px 0}.notice{padding:10px 14px;border-radius:8px;background:var(--gold-soft);color:var(--gold-ink);font-size:12px;margin:16px 0}
@media(max-width:1180px){.page-grid{grid-template-columns:minmax(0,1fr) 235px;gap:24px;padding:24px}.right-rail .rail-card{padding:18px}.app-shell{grid-template-columns:185px 1fr}.sidebar{padding:26px 12px}.brand{font-size:20px}.game-stats{gap:16px}.unit-tabs .icon{display:none}}
@media(max-width:1000px){.right-rail{display:none}.page-grid{grid-template-columns:minmax(0,1fr);max-width:820px;margin:auto;padding:26px}.topbar{padding:14px 22px}.app-shell{grid-template-columns:190px minmax(0,1fr)}.game-stats{gap:14px}.course-label{font-size:10px}.course-label strong{font-size:13px}.top-actions{display:none}}
@media(max-width:760px){.app-shell{display:block}.sidebar{display:none}.topbar{min-height:70px;padding:12px 18px;gap:12px}.course-label{display:none}.mobile-brand{display:flex;align-items:center;gap:7px;font-size:18px;font-weight:900;color:var(--green-ink)}:root[data-theme="dark"] .mobile-brand{color:var(--green)}.mobile-brand .icon{color:var(--green);width:25px}.game-stats{gap:12px}.game-stat{font-size:13px;gap:4px}.game-stat .icon{width:19px;height:19px}.page-grid{padding:22px 20px 110px}.mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:35;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface);border-top:2px solid var(--border);padding:7px 8px max(7px,env(safe-area-inset-bottom));gap:3px}.mobile-nav button{font-size:9px;min-height:55px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:5px 3px;border:0;background:transparent;color:var(--muted);border-radius:8px}.mobile-nav button[aria-current="page"]{background:var(--blue-soft);color:var(--blue)}.mobile-nav .icon{height:22px;width:22px}.content{scroll-margin-top:88px}.learning-path{max-width:380px}.path-node:nth-child(4n+3){margin-left:70px}.lesson-heading h1{font-size:26px}.lesson-top{gap:12px;margin-bottom:22px}.lesson-position{display:none}.lesson-bottom{flex-direction:column;align-items:stretch}.lesson-bottom .primary{width:100%;min-width:0}.number-fields{grid-template-columns:1fr;gap:16px}.challenge-footer .primary{min-width:150px}.challenge-panel h2{font-size:22px}.animation-stage{padding:17px}.matching{gap:9px}.match-item{font-size:12px;padding:10px;min-height:72px}.match-index{min-width:19px;width:19px}.completion-stats{gap:8px}.result-stat{padding:13px;min-width:85px}.completion-actions button{width:100%}.completion h1{font-size:29px}.question-row{gap:12px}.question-row button{min-width:70px;padding:9px}.question-row strong{font-size:14px}.mock-card{padding:18px}.mock-card h3{font-size:15px}.data-blocks{grid-template-columns:repeat(2,minmax(0,1fr))}.byte-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.byte-cell{font-size:12px}.node-row{gap:6px}.network-node{min-width:85px;font-size:12px}.route-block{grid-template-columns:65px 1fr;gap:12px}.unit-banner{padding:20px}.unit-banner .icon{width:33px}.unit-banner h2{font-size:21px}.topbar .settings-mobile{display:inline-flex}.settings-mobile{border:0;padding:7px;min-height:36px;width:34px}}
@media(min-width:761px){.settings-mobile{display:none}}
@media(max-width:380px){.page-grid{padding:20px 14px 110px}.topbar{padding:12px}.mobile-brand{font-size:16px}.game-stats{gap:8px}.game-stat{font-size:12px}.game-stat.streak{display:none}.path-node:nth-child(4n+2),.path-node:nth-child(4n+4){margin-left:23px}.path-node:nth-child(4n+3){margin-left:42px}.path-text{max-width:175px}.lesson-node{width:67px;height:66px}.path-node:before{left:40px;top:91px}.unit-tab{font-size:11px;padding:10px 6px}.lesson-heading h1{font-size:24px}.animation-controls .row{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.animation-controls button{min-height:44px}.challenge-footer{flex-direction:column;align-items:stretch}.challenge-footer .primary{width:100%}.order-token{font-size:12px}.concept-box{padding:18px}.question-row{align-items:start}.question-row button{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.arrow-in{stroke-dashoffset:0}}
@media print{body{background:white;color:black;font-size:11pt}.app-shell,.mobile-nav,dialog,#confetti,.skip-link{display:none!important}.print-book{display:block}.print-question{break-before:page}.print-question:first-child{break-before:auto}h1{font-size:20pt}h2{font-size:16pt}h3{font-size:13pt}table{font-size:9pt}pre,code{background:#f1f1f1}.table-wrap{overflow:visible}.print-question a{color:black}}
/* One-shot motion tracks the selected concept; no endless decorative loops. */
.data-block.selected,.network-node.active,.packet-envelope{animation:concept-arrive .45s ease-out both}.byte-cell.flight{animation:buffer-arrive .5s ease-out both}.bit.borrow{animation:bit-borrow .5s ease-out both}.bit.borrow:nth-child(2){animation-delay:.12s}.bit.borrow:nth-child(3){animation-delay:.24s}
@keyframes concept-arrive{from{opacity:.4;transform:translateY(8px)}to{opacity:1;transform:translateY(-3px)}}@keyframes buffer-arrive{from{opacity:.3;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}@keyframes bit-borrow{from{transform:translateY(-12px);background:var(--soft)}to{transform:translateY(0);background:var(--gold-soft)}}
@media(prefers-reduced-motion:reduce){.data-block.selected,.network-node.active,.packet-envelope,.byte-cell.flight,.bit.borrow{animation:none!important}}
.sequence-mobile{display:none}.sequence-step{margin:22px 0}.sequence-step p{font-size:13px;font-weight:800;margin:0 0 10px;text-align:center}.sequence-track{height:4px;background:var(--unit);position:relative;margin:10px 12px}.sequence-track:after{content:"";position:absolute;right:-2px;top:-6px;border-left:12px solid var(--unit);border-top:8px solid transparent;border-bottom:8px solid transparent}.sequence-track.reverse:after{left:-2px;right:auto;transform:rotate(180deg)}.sequence-track span{width:16px;height:12px;border-radius:4px;background:var(--unit);position:absolute;top:-4px;animation:sequence-travel 1s ease-out both}.sequence-track.reverse span{animation-direction:reverse}@keyframes sequence-travel{from{left:0}to{left:calc(100% - 16px)}}
@media(max-width:760px){.sequence-mobile{display:block}.sequence-desktop{display:none}.network-diagram text{font-size:17px}.mobile-nav button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.sequence-track span{animation:none!important;left:calc(100% - 16px)}}
.content:focus{outline:none}
/* Creator welcome: the two project identities share the game's raised controls. */
.creator-dialog{--promo-blue:#1268cb;--promo-mint:#91f3cd;--promo-dark:#112a2c;max-width:720px;width:calc(100% - 32px);padding:30px;border-radius:24px;max-height:88dvh;overflow:auto;overscroll-behavior:contain;box-shadow:0 20px 75px rgb(0 0 0 / .2);position:fixed}
.creator-dialog[open]{animation:creator-enter .25s ease-out both}.creator-dialog::backdrop{background:rgb(12 28 44 / .64)}
.creator-close{position:absolute;right:14px;top:14px;width:44px;height:44px;display:grid;place-items:center;padding:8px;z-index:2;color:var(--muted)}
.creator-hero{display:flex;align-items:center;gap:14px;padding-right:22px}.creator-mascot{flex:0 0 106px}.creator-mascot .byte-mascot{display:block;width:106px;height:auto}.creator-eyebrow{font-size:11px;font-weight:850;letter-spacing:.08em;color:var(--blue);margin:0 0 8px}.creator-hero h2{font-size:34px;line-height:1.13;margin:0;max-width:390px}.creator-intro{font-size:15px;color:var(--muted);margin:13px 0 24px;line-height:1.75}
.creator-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px}.creator-card{border-radius:18px;padding:22px;display:flex;flex-direction:column;position:relative;overflow:hidden;border:2px solid var(--border);min-width:0}.creator-card h3{font-size:23px;line-height:1.2;margin:12px 0}.creator-portfolio{background:var(--blue-soft);border-color:color-mix(in srgb,var(--blue) 28%,var(--border))}.creator-nosus{background:var(--promo-dark);border-color:#285555;color:#f0fff9}.creator-art{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 22px}.creator-art .icon{width:40px;height:40px;color:var(--blue)}.creator-art span{font-weight:900;font-size:28px;letter-spacing:-.05em;color:var(--blue)}.creator-nosus .creator-art .icon,.creator-nosus .creator-art span{color:var(--promo-mint)}.creator-label{font-size:10px;font-weight:850;letter-spacing:.045em;line-height:1.6;margin:0;color:var(--blue)}.creator-nosus .creator-label{color:var(--promo-mint)}.creator-description{font-size:14px;line-height:1.7;color:var(--muted);margin:0 0 22px}.creator-nosus .creator-description{color:#c5e2d9}
.creator-link{display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;font-size:13px;font-weight:850;border-radius:11px;padding:12px 14px;min-height:48px;margin-top:auto;background:var(--promo-blue);border:2px solid var(--promo-blue);box-shadow:0 4px 0 #084687;color:#fff;transition:transform .15s,box-shadow .15s}.creator-link:hover{transform:translateY(-2px)}.creator-link:active{transform:translateY(2px);box-shadow:0 2px 0 #084687}.creator-nosus .creator-link{background:var(--promo-mint);border-color:var(--promo-mint);color:#12382b;box-shadow:0 4px 0 #51b78e}.creator-nosus .creator-link:active{box-shadow:0 2px 0 #51b78e}.creator-nosus .creator-link:focus-visible{outline-color:var(--promo-mint)}.creator-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:2px solid var(--border);margin-top:26px;padding-top:22px}.creator-footer>span{font-size:13px;color:var(--muted)}.creator-footer .primary{min-width:185px;min-height:48px}
@keyframes creator-enter{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:560px){.creator-dialog{width:calc(100% - 24px);padding:22px 18px;max-height:90dvh;border-radius:20px}.creator-hero{gap:8px;padding-right:18px;margin-top:8px}.creator-mascot{flex-basis:65px}.creator-mascot .byte-mascot{width:65px}.creator-eyebrow{font-size:9px}.creator-hero h2{font-size:25px}.creator-intro{font-size:14px;margin:16px 0 20px}.creator-cards{grid-template-columns:1fr;gap:14px}.creator-card{padding:18px}.creator-art{margin-bottom:14px}.creator-art .icon{width:30px;height:30px}.creator-art span{font-size:23px}.creator-card h3{font-size:23px;margin:10px 0}.creator-description{margin-bottom:17px}.creator-footer{position:sticky;bottom:-22px;background:var(--surface);flex-direction:column;align-items:stretch;gap:8px;padding:16px 0 12px;margin-top:20px}.creator-footer>span{text-align:center;font-size:12px}.creator-footer .primary{width:100%}.creator-close{top:8px;right:7px}}
@media(prefers-reduced-motion:reduce){.creator-dialog[open]{animation:none!important}.creator-link{transition:none}}
.creator-hero h2:focus{outline:none}.creator-footer{position:sticky;bottom:-30px;background:var(--surface);padding-bottom:10px}.creator-close{position:sticky;float:right;right:0;top:0;margin:-16px -16px -28px 0}.creator-mascot{flex-basis:85px}.creator-mascot .byte-mascot{width:85px}.creator-card{padding:20px}.creator-art{margin-bottom:16px}.creator-hero h2{font-size:32px}
@media(max-width:560px){.creator-close{margin:-14px -10px -25px 0}.creator-mascot{flex-basis:65px}.creator-mascot .byte-mascot{width:65px}.creator-card{padding:18px}.creator-hero h2{font-size:25px}.creator-footer{bottom:-22px}}
.creator-mascot{flex-basis:70px}.creator-mascot .byte-mascot{width:70px}.creator-intro{font-size:14px;line-height:1.65;margin-bottom:20px}.creator-art{margin-bottom:12px}.creator-art .icon{width:30px;height:30px}.creator-card{padding:18px}.creator-card h3{margin:10px 0}.creator-description{line-height:1.6;margin-bottom:16px}.creator-footer{margin-top:20px;padding-top:18px}
@media(max-width:560px){.creator-mascot{flex-basis:65px}.creator-mascot .byte-mascot{width:65px}.creator-footer{padding-top:16px}}
@media(max-width:560px){.creator-card .creator-art{display:none}.creator-card h3{font-size:20px}.creator-hero h2{font-size:23px}.creator-hero{padding-right:10px}.creator-mascot{flex-basis:52px}.creator-mascot .byte-mascot{width:52px}}