:root{--ink:#111827;--muted:#64748b;--line:#dbe3ef;--paper:#f6f8fc;--white:#fff;--purple:#6d28d9;--violet:#8b5cf6;--pink:#db2777;--coral:#f97355;--blue:#2563eb;--mint:#059669;--amber:#d97706;--shadow:0 18px 50px rgba(24,39,75,.10)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:ui-rounded,"SF Pro Rounded","SF Pro Display",Inter,system-ui,-apple-system,sans-serif;color:var(--ink);background:radial-gradient(circle at 15% 5%,#e8efff 0,transparent 24%),radial-gradient(circle at 90% 20%,#fff0e7 0,transparent 28%),var(--paper);line-height:1.5}.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:10px 3vw;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);border-bottom:1px solid #e6eaf2}.brand{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;color:#fff;font-size:27px;background:linear-gradient(135deg,#ff7849,#d946ef,#4f46e5);box-shadow:0 8px 22px #b66aff55}.brand strong,.brand small{display:block}.brand small{font-size:11px;color:var(--muted)}nav{display:flex;gap:5px;justify-content:center}nav button{border:0;background:transparent;color:#526079;border-radius:13px;padding:9px 11px;font-weight:750;white-space:nowrap}nav button.active{background:#111827;color:#fff}.progress-wrap{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px}.progress{width:110px;height:8px;border-radius:99px;background:#e4e9f1;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f97316,#ec4899,#6d28d9);border-radius:inherit;transition:.4s}.page{display:none;max-width:1180px;margin:auto;padding:48px 24px 80px}.page.active{display:block;animation:fade .35s ease}@keyframes fade{from{opacity:0;transform:translateY(8px)}}.hero{position:relative;overflow:hidden;text-align:center;padding:72px 30px 88px;background:linear-gradient(135deg,#fff 10%,#f7f1ff 54%,#e9f6ff);border:1px solid #e2e8f0;border-radius:38px;box-shadow:var(--shadow)}.eyebrow,.section-kicker{font-size:12px;letter-spacing:.15em;font-weight:900;color:var(--purple)}.hero h1{font-size:clamp(44px,7vw,82px);line-height:1.02;letter-spacing:-.05em;margin:18px auto;max-width:950px}.hero h1 span{background:linear-gradient(90deg,#f97316,#db2777,#4f46e5,#0284c7);-webkit-background-clip:text;color:transparent}.lead{max-width:760px;margin:0 auto 30px;color:#49566b;font-size:20px}.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}.primary,.ghost,.complete{border:0;border-radius:15px;padding:14px 20px;font-weight:850;font-size:15px;cursor:pointer}.primary{background:linear-gradient(100deg,#ff6b35,#db2777,#4f46e5);color:#fff;box-shadow:0 10px 25px #a855f755}.ghost{background:#fff;border:2px solid #dbe3ef;color:var(--ink)}.hero-orbits b{position:absolute;padding:8px 13px;border-radius:99px;background:#fff;border:1px solid #e3e8f0;box-shadow:0 7px 20px #455a7a20;font:700 12px ui-monospace,monospace}.hero-orbits b:nth-child(1){left:7%;top:18%;color:#c2410c}.hero-orbits b:nth-child(2){right:8%;top:15%;color:#2563eb}.hero-orbits b:nth-child(3){right:5%;bottom:13%;color:#059669}.hero-orbits b:nth-child(4){left:6%;bottom:13%;color:#7c3aed}.card{background:rgba(255,255,255,.96);border:1px solid #e2e8f0;border-radius:25px;box-shadow:var(--shadow);padding:28px;margin-top:24px}.map-card{text-align:center;padding:40px}.map-card h2,.objectives h2,.passport h2{font-size:32px;margin:7px 0 26px}.topic-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.topic{text-align:left;padding:22px;border-radius:21px;border:1px solid #e8edf4;background:#fff}.topic span{float:right;font-weight:900;color:#a8b0be}.topic i{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;font-style:normal;font-size:25px}.topic h3{margin:16px 0 4px}.topic p{margin:0;color:var(--muted);font-size:14px}.coral i,.coral-bg{background:#fff0eb!important;color:#e85d32!important}.blue i,.blue-bg{background:#eaf2ff!important;color:#2563eb!important}.violet i,.violet-bg{background:#f2ebff!important;color:#7c3aed!important}.mint i,.mint-bg{background:#e8fff5!important;color:#059669!important}.amber-bg{background:#fff5dd!important;color:#c56d04!important}.pink-bg{background:#fff0f7!important;color:#db2777!important}.objectives,.passport{display:grid;grid-template-columns:.7fr 1.3fr;gap:40px;align-items:center}.objectives ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}.objectives li:before{content:"✓";display:inline-grid;place-items:center;width:24px;height:24px;margin-right:11px;border-radius:8px;background:#e8fff5;color:#059669;font-weight:900}.passport-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}label{display:grid;gap:7px;font-size:13px;font-weight:800;color:#45536a}input,select,textarea{width:100%;border:1.5px solid #d8e0ec;border-radius:12px;padding:12px;font:inherit;color:var(--ink);background:#fbfcff}textarea{min-height:90px;resize:vertical}.instruction{background:#111827;color:#fff}.instruction>span{display:block;color:#fbbf24;font-weight:900;letter-spacing:.1em}.instruction-steps{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto 1fr;gap:12px;align-items:center}.instruction-steps b{color:#c4b5fd;font-size:12px}.instruction-steps p{color:#d6deea;font-size:13px}.complete{display:block;margin:26px auto 0;background:#111827;color:#fff;min-width:270px}.complete.done{background:#059669}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.page-head h1{font-size:50px;line-height:1.05;margin:10px 0}.page-head p{max-width:760px;font-size:18px;color:var(--muted)}.chapter{display:inline-block;padding:7px 12px;border-radius:99px;font-size:12px;font-weight:900;letter-spacing:.12em}.big-icon{display:grid;place-items:center;width:90px;height:90px;border-radius:28px;font-size:45px}.callout{display:flex;gap:25px;align-items:center;background:linear-gradient(90deg,#111827,#28354d);color:#fff;padding:20px 25px;border-radius:20px}.callout strong{white-space:nowrap;color:#fbbf24}.callout span{color:#e0e7f2}.lab-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;align-items:start}.lab-grid .code-card{grid-column:1/-1}.controls{display:grid;gap:16px}.controls h2{margin:0}.controls label{gap:8px}.controls output{float:right;color:var(--purple)}.switch{display:flex!important;align-items:center;gap:10px!important}.switch input{display:none}.switch span{width:42px;height:24px;border-radius:99px;background:#cbd5e1;padding:3px}.switch span:after{content:"";display:block;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}.switch input:checked+span{background:#7c3aed}.switch input:checked+span:after{transform:translateX(18px)}.dark{background:#111827;color:#fff}.panel-label{font-size:11px;font-weight:900;letter-spacing:.12em;color:#8da0bb}#starStage{min-height:340px;display:grid;place-content:center;text-align:center;overflow:hidden}#animatedStar{font-size:118px;color:#facc15;filter:drop-shadow(0 0 22px #facc15aa);transition:transform 1s ease-in-out}#animCaption{color:#cbd5e1}.code-card{padding:0;overflow:hidden}.code-head{display:flex;justify-content:space-between;padding:14px 20px;background:#192233;color:#dce5f3;font:700 12px ui-monospace,monospace}.live{color:#67e8a8}.code-card pre,.json-lab pre{margin:0;padding:22px;background:#0d1422;color:#dbeafe;overflow:auto;font:13px/1.65 ui-monospace,SFMono-Regular,monospace;white-space:pre-wrap}.observe{border-left:6px solid #8b5cf6;display:flex;gap:18px;align-items:center}.observe strong{white-space:nowrap}.observe p{margin:0;color:#55647b}.quick-check>div:first-child span{font-size:11px;letter-spacing:.12em;font-weight:900;color:#7c3aed}.quick-check h3{font-size:22px}.answers{display:grid!important;grid-template-columns:repeat(3,1fr);gap:12px}.answers button,.segmented button,.status-controls button,.try-cards button,.challenge-tabs button{border:1.5px solid #dbe3ef;background:#fff;padding:13px;border-radius:13px;font-weight:750;color:#334155}.answers button.correct{border-color:#059669;background:#e8fff5}.answers button.wrong{border-color:#ef4444;background:#fff0f0}.feedback{min-height:24px;font-weight:750}.reflection{font-size:17px}.handshake{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center}.handshake article{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:20px}.handshake article b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#2563eb;color:#fff}.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px}.segmented button.selected{background:#2563eb;color:#fff}.status-controls{display:flex;gap:7px}.status-controls button{flex:1}.phone{position:relative;margin:auto;max-width:330px;min-height:410px;border:8px solid #202939;border-radius:36px;background:linear-gradient(160deg,#e0edff,#fff);display:grid;place-items:center;overflow:hidden}.phone-app{text-align:center}.phone-app span{font-size:72px}.permission-modal{position:absolute;left:15px;right:15px;bottom:15px;padding:18px;background:#f8fafcee;border-radius:20px;text-align:center;box-shadow:0 14px 35px #0002}.permission-modal p{color:#56657b;font-size:13px}.permission-modal div{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #dbe3ef}.permission-modal button{border:0;background:transparent;padding:12px;color:#2563eb;font-weight:800}.api-flow{display:flex;align-items:center;justify-content:center;gap:12px}.flow-node{display:grid;text-align:left;grid-template-columns:auto 1fr;gap:0 9px;align-items:center;border:0;border-radius:16px;padding:13px;background:#edf1f7;color:#334155}.flow-node b{grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#cbd5e1}.flow-node small{color:#64748b}.flow-node.selected{background:#6d28d9;color:#fff}.flow-node.selected small{color:#ddd6fe}.api-flow i{font-size:12px;color:#64748b}.api-preview{text-align:center;min-height:320px;display:grid;place-content:center}.api-preview h3{font-size:32px;margin:12px}.api-preview p{color:#b8c3d5}.loader{display:none;margin:auto;width:42px;height:42px;border:5px solid #334155;border-top-color:#a78bfa;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.json-lab{display:grid;grid-template-columns:1fr 1fr;gap:18px}.json-lab h2{margin:5px 0}.debugger{display:grid;grid-template-columns:.8fr 1.1fr .8fr;gap:18px}.bug-controls{display:grid;gap:13px}.console{background:#0b1220;color:#c8facc;border-radius:18px;overflow:hidden;font:12px ui-monospace,monospace}.console-head{display:flex;justify-content:space-between;padding:12px 15px;background:#162033;color:#fff}.console-head i{color:#22c55e}.console ol{padding:10px 10px 10px 40px;max-height:270px;overflow:auto}.console li{padding:5px}.order-result{text-align:center;display:grid;place-content:center;border-radius:18px;background:#f1f5f9}.order-result span{font-size:60px}.order-result h3{margin:8px}.try-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}.try-cards button{display:flex;align-items:center;gap:15px;text-align:left}.try-cards code{font-size:23px;color:#7c3aed}.try-cards button.selected{border-color:#7c3aed;background:#f5f0ff}.studio-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px}.studio-grid .code-card{grid-column:1/-1}.project-preview{padding:30px;border-radius:24px;background:linear-gradient(145deg,#fbf9ff,#e9e4ff);min-height:420px}.project-preview>div:first-child{display:flex;gap:8px;color:#6d28d9}.project-preview h2{font-size:45px;margin:30px 0 5px}.project-preview>p{color:#56647a}.result-card{display:grid;background:#fff;border-radius:18px;padding:20px;margin:30px 0;box-shadow:0 12px 30px #4c1d951a}.result-card small{color:#64748b}.result-card strong{font-size:22px}.project-preview button{width:100%;border:0;border-radius:14px;padding:14px;background:#6d28d9;color:#fff;font-weight:850}.test-record{display:grid;grid-template-columns:.5fr 1.5fr;gap:30px}.test-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.challenge-tabs{display:flex;gap:8px;overflow:auto;padding-bottom:8px}.challenge-tabs button{min-width:46px}.challenge-tabs button.selected{background:#111827;color:#fff}.challenge-card{min-height:390px}.challenge-card .mission-type{color:#db2777;font-weight:900;font-size:12px;letter-spacing:.12em}.challenge-card h2{font-size:34px}.challenge-options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:22px}.challenge-options button{padding:18px;border:2px solid #dbe3ef;border-radius:15px;background:#fff;text-align:left;font-weight:750}.challenge-options button.correct{border-color:#059669;background:#e8fff5}.challenge-options button.wrong{border-color:#ef4444;background:#fff0f0}.challenge-score{display:grid;grid-template-columns:auto 1fr;gap:14px 30px;align-items:center}.challenge-score strong{font-size:28px}.challenge-score .progress{width:100%}.challenge-score p{grid-column:1/-1;margin:0}.summary-hero{text-align:center;color:#fff;padding:60px 20px;background:linear-gradient(110deg,#3730a3,#7c3aed,#db2777);border-radius:32px}.summary-hero span{color:#fde68a;font-weight:900;letter-spacing:.14em}.summary-hero h1{font-size:58px;margin:12px}.summary-grid{display:grid;grid-template-columns:auto 1fr;gap:35px;align-items:center;margin:30px 0}.score-ring{display:grid;place-items:center;width:150px;height:150px;border-radius:50%;background:conic-gradient(#7c3aed var(--score,0%),#e5e7eb 0);position:relative}.score-ring:after{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff}.score-ring strong,.score-ring span{z-index:1}.score-ring strong{font-size:32px}.score-ring span{font-size:12px;color:#64748b}.evidence-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.evidence-cards article{padding:17px;background:#fff;border:1px solid #dfe6f0;border-radius:17px}.evidence-cards strong{display:block;font-size:20px}.evidence-cards span{font-size:12px;color:#64748b}.final-reflection label{margin-top:18px}.submission{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.submission div{display:flex;gap:12px}.submission span{display:grid;place-items:center;min-width:34px;height:34px;border-radius:50%;background:#7c3aed;color:#fff;font-weight:900}.submission p{margin:0}.submission code{background:#f1edff;color:#6d28d9;padding:3px 7px;border-radius:6px}.summary-actions{display:flex;justify-content:center;gap:12px;margin-top:25px}.gate{text-align:center;color:#b45309;font-weight:700}footer{display:flex;justify-content:space-between;padding:22px 4vw;color:#64748b;border-top:1px solid #dbe3ef;font-size:13px}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,120px);background:#111827;color:#fff;padding:12px 20px;border-radius:12px;transition:.25s;z-index:99}#toast.show{transform:translate(-50%,0)}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #38bdf8;outline-offset:2px}@media(max-width:1000px){.topbar{grid-template-columns:auto auto}.topbar nav{grid-column:1/-1;justify-content:flex-start;overflow:auto}.progress-wrap{justify-self:end}.topic-grid{grid-template-columns:1fr 1fr}.lab-grid,.studio-grid{grid-template-columns:1fr}.code-card{grid-column:auto!important}.debugger{grid-template-columns:1fr 1fr}.order-result{grid-column:1/-1}.api-flow{overflow:auto;justify-content:flex-start}.api-flow i{display:none}.instruction-steps{grid-template-columns:auto 1fr auto 1fr}.objectives,.passport{grid-template-columns:1fr}.evidence-cards{grid-template-columns:1fr 1fr}}@media(max-width:650px){.page{padding:28px 14px 60px}.brand small,.progress-wrap{display:none}.topbar{grid-template-columns:1fr}.topbar nav{grid-column:1}.hero{padding:55px 18px}.hero-orbits{display:none}.hero h1{font-size:43px}.lead{font-size:17px}.topic-grid,.passport-fields,.answers,.json-lab,.debugger,.try-cards,.test-record,.test-grid,.submission,.challenge-options,.evidence-cards{grid-template-columns:1fr}.page-head h1{font-size:39px}.big-icon{display:none}.handshake{grid-template-columns:1fr}.handshake>span{transform:rotate(90deg);text-align:center}.callout{align-items:flex-start;flex-direction:column}.instruction-steps{grid-template-columns:auto 1fr}.summary-hero h1{font-size:40px}.summary-grid{grid-template-columns:1fr;text-align:center}.score-ring{margin:auto}.api-flow{display:grid;grid-template-columns:1fr 1fr}.challenge-score{grid-template-columns:1fr}.challenge-score p{grid-column:auto}}
.learn-card{background:linear-gradient(145deg,#fff,#f8f6ff);border-left:6px solid #7c3aed}.learn-card h2{font-size:30px;margin:7px 0 12px}.learn-card>p{font-size:16px;color:#49566b}.learn-card code,.reflection code{padding:2px 6px;border-radius:6px;background:#ece8ff;color:#5b21b6}.learn-card ol{display:grid;gap:12px;padding-left:24px}.compare-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}.compare-two article{padding:20px;border:1px solid #e0e6f0;border-radius:18px;background:#fff}.compare-two article>span{font-size:10px;letter-spacing:.14em;font-weight:900;color:#7c3aed}.compare-two h3{font-size:24px;margin:7px 0}.compare-two p{margin:5px 0 12px;color:#59687d}.note{padding:13px 16px;border-radius:13px;background:#eef6ff;color:#1e3a5f!important}.concept-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.concept-strip.five{grid-template-columns:repeat(5,1fr)}.concept-strip article{display:grid;gap:4px;padding:15px 17px;border-radius:16px;background:#111827;color:#fff}.concept-strip b{color:#fde68a;font-family:ui-monospace,monospace}.concept-strip span{font-size:12px;color:#cbd5e1}.motion-workbench{grid-template-columns:240px .75fr 1.25fr;padding:18px;background:#e9eef6;border-radius:28px;margin-top:20px;gap:14px}.motion-workbench>.card{margin-top:0;border-radius:18px;padding:18px}.motion-workbench .code-card{grid-column:auto;max-height:430px}.motion-workbench .code-card pre{max-height:385px;overflow:auto;font-size:11px}.motion-workbench .observe{grid-column:1/-1;margin:0;min-height:64px}.motion-workbench #starStage{min-height:300px}.copy-code{padding:10px 14px}.mini-copy{border:1px solid #64748b;background:#243148;color:#fff;border-radius:8px;padding:5px 9px;font-size:11px;font-weight:800}.reference-table{overflow:auto;padding:12px}.reference-table table{width:100%;border-collapse:collapse;min-width:820px}.reference-table th{background:#172033;color:#fff;text-align:left;padding:13px}.reference-table td{padding:13px;border-bottom:1px solid #e2e8f0;vertical-align:top}.reference-table tr:nth-child(even) td{background:#f7f9fc}.reference-table code{color:#5b21b6;font-size:12px}.vocabulary{background:linear-gradient(135deg,#111827,#26344c);color:#fff}.vocabulary .section-kicker{color:#fbbf24}.vocab-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:15px}.vocab-grid article{display:grid;gap:5px;padding:14px;border-radius:14px;background:#ffffff10;border:1px solid #ffffff1c}.vocab-grid b{color:#c4b5fd}.vocab-grid span{font-size:13px;color:#d5deeb}.analogy{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:18px 0}.analogy>b{grid-column:1/-1}.analogy span{padding:13px;background:#fff;border:1px solid #dfe6f0;border-radius:12px;font-size:13px}.pseudo-example{padding:20px;border-radius:15px;background:#0d1422;color:#dbeafe;font:13px/1.65 ui-monospace,monospace;overflow:auto}.reflection small{font-weight:500;color:#64748b}.challenge-tabs{flex-wrap:wrap}.challenge-tabs button{min-width:44px}
.visit-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:13px}.visit-stats span{display:grid;gap:2px;flex:1;min-width:115px;padding:10px 12px;border-radius:12px;background:#f1f5fb;color:#64748b;font-size:11px}.visit-stats b{color:#172033;font-size:12px}.flip-card{height:150px;padding:0!important;background:transparent!important;border:0!important;perspective:900px;cursor:pointer}.flip-inner{position:relative;width:100%;height:100%;transition:transform .55s;transform-style:preserve-3d}.flip-card.flipped .flip-inner{transform:rotateY(180deg)}.flip-front,.flip-back{position:absolute;inset:0;display:grid;align-content:center;gap:8px;padding:17px;border-radius:15px;backface-visibility:hidden;border:1px solid #ffffff24}.flip-front{background:linear-gradient(145deg,#2b3852,#172033)}.flip-front small{font-size:9px;letter-spacing:.14em;color:#fbbf24}.flip-front strong{font-size:20px;color:#fff}.flip-front span{color:#9fb0c8;font-size:12px}.flip-back{transform:rotateY(180deg);background:linear-gradient(145deg,#6d28d9,#4338ca)}.flip-back strong{color:#fde68a}.flip-back span{color:#fff}.motion-workbench .controls{grid-column:1;grid-row:1/3}.motion-workbench .preview{grid-column:2;grid-row:1/3}.motion-workbench .code-card{grid-column:3;grid-row:1;max-height:325px}.motion-workbench .code-card pre{max-height:280px}.motion-workbench .observe{grid-column:3;grid-row:2;margin:0;align-self:stretch;min-height:95px}.motion-workbench #animatedStar{display:grid;place-items:center;width:135px;height:135px;margin:auto;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff7ac,#facc15 54%,#e49b07);color:#fff;font-size:82px;border:7px solid #fff0a1;box-shadow:0 0 0 5px #e5a70b,0 0 35px #facc1590;filter:none}.motion-workbench #animatedStar span{transform:translateY(-2px);text-shadow:0 3px 0 #d59b00}.json-lab{align-items:start}.json-key-list,.model-key-list{display:grid;gap:9px;margin-top:15px}.json-key-list button,.model-key-list div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:11px;border:2px solid #dcd7ff;background:#f7f5ff;text-align:left}.json-key-list button code{color:#6d28d9;font-weight:900}.json-key-list button span{font-size:11px;color:#64748b}.json-key-list button.selected{border-color:#7c3aed;background:#ede9fe;box-shadow:0 0 0 3px #c4b5fd55}.model-key-list div{background:#111827;border-color:#263652;color:#dbeafe;min-height:52px}.model-key-list div.matched{border-color:#34d399;background:#064e3b;transform:translateX(5px);box-shadow:0 0 0 3px #34d39944}.json-match-explain{grid-column:1/-1;margin:0;padding:14px 16px;border-radius:13px;background:#fff7dc;color:#6b4a00}.attempt-banner{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(110deg,#111827,#312e81);color:#fff}.attempt-banner div{display:grid}.attempt-banner span{font-size:10px;letter-spacing:.14em;color:#fbbf24}.attempt-banner strong{font-size:24px}.attempt-banner p{margin:0;color:#dbe4f2}.challenge-tabs button.answered:after{content:'✓';margin-left:5px;color:#059669}.challenge-options button:disabled{cursor:not-allowed;opacity:1}.attempt-actions{display:flex;gap:10px;justify-content:flex-end;grid-column:1/-1}.attempt-actions button[hidden]{display:none}.attempt-actions button:disabled{opacity:.45;cursor:not-allowed}.attempt-history h2{margin:6px 0}.empty-history{padding:17px;border-radius:13px;background:#f1f5f9;color:#64748b}.history-table{display:grid;margin-top:16px;border:1px solid #dbe3ef;border-radius:15px;overflow:hidden}.history-table>div{display:grid;grid-template-columns:.55fr 1.5fr .65fr 1fr;gap:12px;padding:12px 15px;align-items:center;border-bottom:1px solid #e4e9f1}.history-table>div:last-child{border-bottom:0}.history-head{background:#172033;color:#fff;font-size:11px;letter-spacing:.08em;font-weight:850}.history-table b{justify-self:start;padding:5px 9px;border-radius:99px;font-size:11px}.history-table .mastered{background:#dcfce7;color:#047857}.history-table .developing{background:#fff3cd;color:#a15c00}
@media(max-width:900px){.motion-workbench{grid-template-columns:220px 1fr}.motion-workbench .controls,.motion-workbench .preview{grid-row:auto}.motion-workbench .controls{grid-column:1}.motion-workbench .preview{grid-column:2}.motion-workbench .code-card{grid-column:1/-1;grid-row:auto}.motion-workbench .observe{grid-column:1/-1;grid-row:auto}.concept-strip.five{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.compare-two,.concept-strip,.concept-strip.five,.vocab-grid,.analogy{grid-template-columns:1fr 1fr}.motion-workbench{grid-template-columns:1fr}.motion-workbench .controls,.motion-workbench .preview,.motion-workbench .code-card,.motion-workbench .observe{grid-column:1}.motion-workbench .code-card{max-height:none}.motion-workbench .code-card pre{max-height:420px}.attempt-banner{align-items:flex-start;flex-direction:column}.history-table>div{grid-template-columns:.5fr 1.25fr .6fr 1fr;font-size:12px}}
@media(max-width:560px){.compare-two,.concept-strip,.concept-strip.five,.vocab-grid,.analogy{grid-template-columns:1fr}}
.answers button:disabled{opacity:1;cursor:default}.report-identity{display:grid;grid-template-columns:1.2fr .7fr 1fr 1fr .55fr;gap:10px}.report-identity span{display:grid;gap:4px;color:#64748b;font-size:11px}.report-identity b{font-size:13px;color:#172033}@media(max-width:800px){.report-identity{grid-template-columns:1fr 1fr}.submission{grid-template-columns:1fr}}
@media print{.topbar,footer,.complete,.summary-actions,#toast,.gate{display:none!important}body{background:#fff}.page{display:none!important}.page#summary{display:block!important;padding:0;max-width:none}.summary-hero{border-radius:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.card,.evidence-cards article{box-shadow:none;break-inside:avoid}.final-reflection textarea{border:0;min-height:60px}.score-ring{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* Balanced animation workbench: three independent columns with no empty grid row. */
.motion-workbench{grid-template-columns:250px minmax(275px,.85fr) minmax(390px,1.35fr);align-items:start}
.motion-workbench .controls{grid-column:1;grid-row:auto}
.motion-workbench .preview{grid-column:2;grid-row:auto}
.motion-workbench .motion-insights{grid-column:3;grid-row:auto;display:flex;flex-direction:column;gap:14px;min-width:0}
.motion-workbench .motion-insights .code-card{grid-column:auto;grid-row:auto;max-height:430px}
.motion-workbench .motion-insights .code-card pre{max-height:378px}
.motion-workbench .motion-insights .observe{grid-column:auto;grid-row:auto;align-self:auto;min-height:110px;margin:0}
.completion-requirements{max-width:860px;margin:26px auto 0;padding:14px 18px;border:1px solid #d7dfeb;border-radius:16px;background:#fff;color:#526079;font-size:13px;line-height:1.55}
.completion-requirements strong{display:block;color:#172033;margin-bottom:3px}
.completion-requirements.pending{border-color:#f1c36d;background:#fff9e9;color:#7c5600}
.completion-requirements.ready{border-color:#86d8b7;background:#ecfdf5;color:#066747}
.completion-feedback{max-width:860px;margin:10px auto 0;text-align:center;font-weight:750;color:#9a5a00}
.completion-feedback.ready{color:#047857}

@media(max-width:1000px){.motion-workbench{grid-template-columns:230px 1fr}.motion-workbench .controls{grid-column:1}.motion-workbench .preview{grid-column:2}.motion-workbench .motion-insights{grid-column:1/-1}}
@media(max-width:800px){.motion-workbench{grid-template-columns:1fr}.motion-workbench .controls,.motion-workbench .preview,.motion-workbench .motion-insights{grid-column:1}.motion-workbench .motion-insights .code-card{max-height:none}.motion-workbench .motion-insights .code-card pre{max-height:420px}}
@media print{.completion-requirements,.completion-feedback{display:none!important}}
.response-note{color:#64748b;font-size:13px}.response-list{display:grid;gap:14px;margin-top:18px}.response-item{padding:16px 18px;border:1px solid #dfe6f0;border-radius:16px;background:#f8faff}.response-item h3{margin:0 0 8px;font-size:17px}.response-item p{margin:5px 0;color:#3f4d63}.response-item small{display:block;margin-top:7px;color:#64748b}.response-answer{padding:9px 11px;border-radius:10px;background:#eefaf5;color:#066747}.response-missing{padding:9px 11px;border-radius:10px;background:#fff7dc;color:#7c5600}.blueprint-record{display:grid;grid-template-columns:1fr 1fr;gap:10px}.blueprint-record span{padding:10px 12px;border-radius:11px;background:#f1f5f9}.challenge-answer-list{display:grid;gap:10px;padding-left:24px}.challenge-answer-list li{padding:10px 12px;border-bottom:1px solid #e2e8f0;break-inside:avoid}.challenge-answer-list p{margin:4px 0}.answer-correct{color:#047857;font-weight:850}.answer-wrong{color:#b42318;font-weight:850}
@media(max-width:650px){.blueprint-record{grid-template-columns:1fr}}
@media print{.response-record{break-inside:auto}.response-item,.challenge-answer-list li{box-shadow:none;break-inside:avoid}.response-note,.final-reflection{display:none!important}.response-item{padding:10px 12px}.challenge-answer-list{gap:4px}.challenge-answer-list li{padding:7px 9px;font-size:12px}}