:root{--topbar-height: 73px;--skill-tab-width: 340px;color:#18212f;background:#f4f6f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;background:linear-gradient(180deg,#f4f6f8f0,#f4f6f8),radial-gradient(circle at 8% 0%,rgba(28,111,232,.16),transparent 30%),radial-gradient(circle at 100% 12%,rgba(41,132,117,.16),transparent 28%)}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 28px;border-bottom:1px solid #d9e0e8;background:#ffffffe0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand-button{display:flex;align-items:center;gap:12px;border:0;background:transparent;color:inherit;text-align:left}.brand-button small,.node-copy em,.tier-pick small{display:block;color:#607086;font-style:normal}.brand-mark{display:grid;width:44px;height:44px;place-items:center;border-radius:8px;background:#263042;color:#fff;font-weight:800}.topnav{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.topnav button,.tab-row button,.ghost-action,.hint-actions button{border:1px solid #c9d3df;border-radius:8px;background:#fff;color:#263042;padding:9px 12px}.topnav button.active,.tab-row button.active,.answer-options button.selected,.prediction-options button.selected{border-color:#263042;background:#263042;color:#fff}.screen{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:32px 0 54px}.two-column,.skill-layout,.editor-grid,.code-preview-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}.placement-grid{align-items:start}.welcome-screen,.placement-grid,.placement-summary-screen{display:grid;min-height:calc(100vh - 74px);place-items:center}.welcome-screen,.placement-grid,.placement-summary-screen{position:relative;width:100%;min-height:calc(100vh - 74px);margin:0;padding-right:16px;padding-left:16px;overflow:hidden;isolation:isolate}.welcome-screen:before,.welcome-screen:after,.placement-grid:before,.placement-grid:after,.placement-summary-screen:before,.placement-summary-screen:after{content:"";position:absolute;inset:0;z-index:-1}.welcome-screen:before,.placement-grid:before,.placement-summary-screen:before{background:linear-gradient(120deg,#e3f5ff,#8fc8ff 42%,#1c6fe8 74%,#094fbd);background-size:220% 220%;animation:welcomeGradientShift 12s ease-in-out infinite}.welcome-screen:after,.placement-grid:after,.placement-summary-screen:after{background:repeating-radial-gradient(ellipse at 50% 140%,rgba(255,255,255,.36) 0 5px,transparent 6px 72px);opacity:.55;transform:translateY(-16px);animation:welcomeWaveDrift 9s ease-in-out infinite alternate}.panel{border:1px solid #d9e0e8;border-radius:8px;background:#fffffff0;padding:22px;box-shadow:0 12px 34px #1f2a3814}.intro-panel{background:#fff}.placement-panel{display:grid;width:min(900px,100%);margin:0 auto;gap:22px}.placement-panel h1{font-size:clamp(1.75rem,3vw,2.75rem);white-space:nowrap}.placement-panel .eyebrow{color:#1c6fe8}.placement-controls{border-top:1px solid #edf1f5;padding-top:20px}.placement-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:18px}.placement-actions .primary-action{background:#1c6fe8;color:#fff;box-shadow:0 8px 20px #1c6fe847}.choice-divider{color:#516176;font-weight:800}.quiz-placement{width:min(1000px,100%);margin:0 auto}.welcome-panel,.placement-summary-panel{display:grid;width:min(780px,100%);gap:18px;padding:36px}.placement-summary-panel .eyebrow{color:#1c6fe8}.welcome-copy{color:#2f3f53;font-size:1.4rem;line-height:1.55}.summary-details{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.summary-details div{display:grid;gap:6px;border:1px solid #d9e0e8;border-radius:8px;background:#f8fafc;padding:14px}.summary-details span{color:#607086;font-size:.78rem;font-weight:800;text-transform:uppercase}.summary-details strong{line-height:1.35}.instruction-copy{margin:0;color:#3a485a;line-height:1.6}.summary-actions{display:flex;flex-wrap:wrap;gap:10px}.eyebrow{margin:0 0 8px;color:#1c6fe8;font-size:.76rem;font-weight:800;letter-spacing:0;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{margin-bottom:12px;font-size:clamp(2rem,5vw,4rem);line-height:1.02}h2{margin-bottom:12px;font-size:1.25rem}.lede{color:#516176;font-size:1.05rem;line-height:1.6}.tier-picks,.answer-options,.prediction-options,.check-list,.kc-grid,.lesson-chip-grid,.kc-row,.state-legend,.tab-row,.hint-actions{display:flex;flex-wrap:wrap;gap:10px}.tier-pick{flex:1 1 160px;min-height:126px;border:1px solid #ccd6e2;border-radius:8px;background:#f9fbfd;padding:16px;text-align:left}.tier-pick span{color:#1c6fe8;font-size:.8rem;font-weight:800}.tier-pick strong{display:block;margin:8px 0;font-size:1.25rem}.slider-row{display:grid;grid-template-columns:1fr minmax(120px,220px) 54px;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid #edf1f5}.slider-row input,.placement-panel .slider-row input{accent-color:#1c6fe8}.primary-action{position:relative;overflow:hidden;border:0;border-radius:8px;background:#1c6fe8;color:#fff;font-weight:800;padding:11px 16px;box-shadow:0 8px 20px #1c6fe847;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}.primary-action:after{content:"";position:absolute;top:-60%;bottom:-60%;left:-45%;width:36%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:translate(-120%) rotate(18deg)}.primary-action:hover{background:#0f57c8;box-shadow:0 14px 28px #1c6fe857;transform:translateY(-2px)}.primary-action:hover:after{animation:buttonSheen .72s ease}.primary-action:active{box-shadow:0 8px 18px #1c6fe847;transform:translateY(0) scale(.98)}.ghost-action{box-shadow:none}.quiz-placement{grid-column:1 / -1}.placement-question-list{display:grid;gap:10px;margin:18px 0}.placement-question{display:grid;grid-template-columns:1fr 220px;gap:12px;align-items:center;padding:12px;border:1px solid #e1e7ee;border-radius:8px;background:#fbfcfe}.placement-question select,.blank-input{width:100%;border:1px solid #c9d3df;border-radius:8px;padding:10px 12px;background:#fff}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.skill-layout{width:100%;min-height:calc(100vh - var(--topbar-height));grid-template-columns:var(--skill-tab-width) minmax(0,1fr);align-items:start;gap:28px;padding-top:0;padding-bottom:0;padding-left:0}.skill-summary{position:fixed;top:var(--topbar-height);bottom:0;left:0;display:flex;align-self:start;width:var(--skill-tab-width);height:calc(100dvh - var(--topbar-height));min-height:0;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;isolation:isolate;border-top-left-radius:0;border-bottom-left-radius:0;border-color:#ffffff3d;background:transparent;color:#fff;padding:clamp(20px,3vh,32px) 22px 16px;text-align:center}.skill-summary:before,.skill-summary:after{content:"";position:absolute;inset:0;z-index:-1}.skill-summary:before{background:linear-gradient(120deg,#e3f5ff,#8fc8ff 42%,#1c6fe8 74%,#094fbd);background-size:220% 220%;animation:welcomeGradientShift 12s ease-in-out infinite}.skill-summary:after{background:repeating-radial-gradient(ellipse at 50% 140%,rgba(255,255,255,.36) 0 5px,transparent 6px 72px);opacity:.48;transform:translateY(-16px);animation:welcomeWaveDrift 9s ease-in-out infinite alternate}.skill-summary h1{margin-bottom:8px;font-size:clamp(1.8rem,2.6vw,2.45rem)}.skill-summary .lede{color:#ffffffe6;font-size:.96rem;line-height:1.45}.progress-ring{--progress-angle: 0deg;display:grid;width:clamp(136px,20vh,168px);height:clamp(136px,20vh,168px);margin-bottom:18px;place-items:center;border-radius:50%;background:conic-gradient(from var(--ring-rotation, 0deg),#8fc8ff 0deg,#0b56c9 var(--progress-angle),rgba(255,255,255,.32) var(--progress-angle),rgba(255,255,255,.32) 360deg);box-shadow:0 18px 38px #08337e42,inset 0 0 0 1px #ffffff4d;animation:ringProgressMotion 7s linear infinite}.progress-ring span{display:grid;width:clamp(92px,14vh,116px);height:clamp(92px,14vh,116px);place-items:center;border-radius:50%;background:#fff;color:#1c6fe8;font-size:2rem;font-weight:900;box-shadow:0 10px 24px #08337e2e}.state-legend{justify-content:center;margin:12px 0}.state-legend span{display:inline-flex;align-items:center;gap:7px;color:#ffffffeb;font-weight:800}.dot{width:11px;height:11px;border-radius:50%}.locked-dot{background:#aab5c2}.unlocked-dot{background:#1c6fe8}.complete-dot{background:#0f57c8}.kc-grid,.lesson-chip-grid{justify-content:center;gap:7px}.kc-chip,.kc-pill,.lesson-chip{border-radius:999px;padding:6px 9px;background:#eaf0f6;color:#46566a;font-size:.8rem;font-weight:800}.lesson-chip{background:#ffffffe0;color:#0f57c8}.restart-action{z-index:1;align-self:flex-start;margin-top:auto;border:1px solid rgba(255,255,255,.72);border-radius:8px;background:#ffffffeb;color:#0f57c8;font-weight:900;padding:10px 14px;box-shadow:0 10px 24px #08337e2e}.kc-chip.procedural{background:#e8f1ff;color:#175bc2}.kc-chip.conditional{background:#eef5ff;color:#0f57c8}.skill-tree{position:relative;display:grid;grid-column:2;gap:18px;padding:32px 28px 54px 24px}.skill-tree:before{content:"";position:absolute;left:47px;top:24px;bottom:24px;width:3px;background:#cbd5e1}.tree-node{position:relative;display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;min-height:104px;border:2px solid transparent;border-radius:8px;padding:16px;text-align:left;color:#18212f}.tree-node.locked{background:#e3e8ee;color:#677487;cursor:not-allowed}.tree-node.unlocked{border-color:#1c6fe8;background:#e8f1ff}.tree-node.complete{border-color:#0f57c8;background:#dcecff}.node-index{position:relative;z-index:1;display:grid;width:52px;height:52px;place-items:center;border-radius:50%;background:#fff;font-weight:900}.node-copy strong{display:block;margin:4px 0;font-size:1.08rem}.lesson-screen,.quiz-screen,.project-screen{display:grid;gap:18px}.lesson-header{background:#263042;color:#fff}.lesson-header .eyebrow,.lesson-header .lede{color:#dfe7ef}.lesson-header h1{font-size:clamp(1.9rem,4vw,3.2rem)}.variant-lab,.assembly-lab,.rules-panel{display:grid;gap:16px}.code-preview-grid{align-items:stretch}.code-block{overflow:auto;min-height:210px;margin:0;border:1px solid #d7e0ea;border-radius:8px;background:#111827;color:#f8fafc;padding:18px;line-height:1.5;white-space:pre-wrap}.code-block.compact{min-height:auto}.safe-preview{width:100%;min-height:210px;border:1px solid #d7e0ea;border-radius:8px;background:#fff}.safe-preview.tall{min-height:430px}.note-line,.result-line{margin:0;color:#516176}.token-bank{display:flex;flex-wrap:wrap;gap:10px;padding:14px;border:1px dashed #aebccc;border-radius:8px;background:#f7fafc}.html-token{border:1px solid #b8c5d4;border-radius:8px;background:#fff;padding:10px 12px;font-family:Cascadia Code,Fira Code,Consolas,monospace}.assembled-preview{overflow-x:auto;border-radius:8px;background:#edf2f7;padding:14px}.rules-panel ul{margin:0;padding-left:22px;color:#3a485a;line-height:1.7}.quiz-list{display:grid;gap:18px}.quiz-card{display:grid;gap:14px}.question-meta{display:flex;justify-content:space-between;gap:12px;color:#6a7788;text-transform:capitalize}.answer-options button,.prediction-options button{flex:1 1 220px;border:1px solid #ccd6e2;border-radius:8px;background:#fff;padding:14px;text-align:left}.prediction-options button{display:grid;gap:10px}.screenshot-option{display:block;min-height:92px;border:1px solid #d9e0e8;border-radius:8px;background:#f8fafc;color:#18212f;padding:14px}.blank-input{max-width:420px}.hint-box{border-left:4px solid #1c6fe8;border-radius:8px;background:#e8f1ff;padding:14px}.hint-box p{margin:12px 0 0}.quiz-actions,.instruction-panel{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.success-line{color:#0f57c8;font-weight:800}.error-line{color:#b33b2e;font-weight:800}.editor-grid{align-items:stretch}.editor-panel,.preview-panel{display:grid;gap:14px}textarea{width:100%;min-height:430px;resize:vertical;border:1px solid #cbd5e1;border-radius:8px;background:#101827;color:#f8fafc;padding:18px;font-family:Cascadia Code,Fira Code,Consolas,monospace;line-height:1.5}@property --ring-rotation{syntax: "<angle>"; inherits: false; initial-value: 0deg;}@keyframes welcomeGradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes welcomeWaveDrift{0%{background-position:0 0;transform:translateY(-16px) scale(1.03)}to{background-position:96px 28px;transform:translateY(12px) scale(1.08)}}@keyframes ringProgressMotion{0%{--ring-rotation: 0deg}to{--ring-rotation: 360deg}}@keyframes buttonSheen{0%{transform:translate(-120%) rotate(18deg)}to{transform:translate(520%) rotate(18deg)}}.check-list span{border:1px solid #cbd5e1;border-radius:999px;background:#fff;padding:8px 11px;color:#46566a;font-weight:800}.check-list .check-pass{border-color:#0f57c8;background:#dcecff;color:#0f57c8}.check-list .check-fail{border-color:#d65d4d;background:#ffebe8;color:#a23328}@media(max-width:900px){.topbar,.section-heading,.quiz-actions,.instruction-panel{align-items:stretch;flex-direction:column}.topnav{justify-content:flex-start}.two-column,.skill-layout,.editor-grid,.code-preview-grid{grid-template-columns:1fr}.skill-summary{position:static;width:auto;height:auto;min-height:auto;border-radius:8px}.placement-question,.slider-row,.summary-details{grid-template-columns:1fr}.skill-tree{grid-column:auto;padding-left:0}.skill-tree:before{left:25px}}@media(max-width:560px){.screen{width:min(100% - 20px,1180px);padding-top:18px}.topbar{padding:12px}.topnav button,.tab-row button,.ghost-action,.primary-action{width:100%}.placement-panel h1{font-size:1.35rem}.choice-divider{width:100%;text-align:center}.tree-node{grid-template-columns:44px 1fr;padding:12px}.node-index{width:44px;height:44px}}