:root{--ink:#173a32;--green:#2f735f;--orange:#f27147;--cream:#f7f4ec;--paper:#fffdf8;--line:#dedbd1;--muted:#667a73;--yellow:#f3c844;--code:#18342e}*{box-sizing:border-box}body,html{margin:0;min-height:100%;font-family:Segoe UI,Arial,sans-serif;color:var(--ink);background:var(--cream)}button,input,select{font:inherit;color:inherit}button{cursor:pointer}.eyebrow{margin:0 0 7px;color:#9d775f;font-size:10px;font-weight:800;letter-spacing:.17em}.site-shell{min-height:100vh}.topbar{height:76px;padding:0 24px;display:grid;grid-template-columns:1fr auto 1fr;grid-gap:18px;gap:18px;background:var(--paper);border-bottom:1px solid var(--line);position:-webkit-sticky;position:sticky;top:0;z-index:10}.brand,.topbar{align-items:center}.brand{display:flex;gap:11px}.brand>span{width:43px;height:43px;display:grid;place-items:center;background:var(--green);color:white;border-radius:13px}.brand>div{display:grid}.brand strong{font-size:15px}.brand small{margin-top:2px;color:var(--muted);font-size:10px}.mode-tabs{display:flex;padding:4px;background:#eceae3;border-radius:12px}.mode-tabs button{padding:9px 13px;display:flex;align-items:center;gap:7px;border:0;border-radius:9px;background:transparent;color:#74827d;font-size:11px;font-weight:700}.mode-tabs button.active{background:white;color:var(--ink);box-shadow:0 2px 7px rgba(0,0,0,.08)}.score-box{justify-self:end;display:flex;align-items:center;gap:11px;padding:8px 12px;border:1px solid var(--line);background:white;border-radius:11px}.score-box>svg{color:#c18a1d}.score-box>span{display:grid;min-width:45px}.score-box small{font-size:7px;color:#929a96;letter-spacing:.1em}.score-box strong{font-size:14px}.hero{padding:43px 5vw 36px;display:grid;grid-template-columns:1.1fr .9fr;grid-gap:7vw;gap:7vw;align-items:end;max-width:1500px;margin:auto}.hero h1{margin:0;font-family:Georgia,serif;font-weight:400;font-size:clamp(46px,5vw,74px);line-height:.98}.hero h1 em{color:var(--green);font-weight:400}.hero-copy>p{margin:0 0 15px;color:#536963;font-size:16px;line-height:1.55}.hero-copy code{padding:2px 5px;background:#ece9e0;border-radius:4px}.learning-target{padding:12px 14px;display:flex;gap:9px;align-items:flex-start;background:#fff2d5;border:1px solid #ecd99e;border-radius:11px;font-size:12px;line-height:1.45}.learning-target svg{color:#b17d19;flex:none}.learning-target span{display:grid}.lesson-layout{display:grid;grid-template-columns:250px minmax(560px,1fr) 245px;min-height:620px;border-top:1px solid var(--line)}.concept-panel,.memory-panel{padding:25px 20px;background:var(--paper)}.concept-panel{border-right:1px solid var(--line)}.memory-panel{border-left:1px solid var(--line)}.assignment-anatomy{margin-top:14px;display:grid;grid-template-columns:1fr 42px 1fr;align-items:center;text-align:center;font-family:Consolas,monospace;font-size:20px;font-weight:700}.assignment-anatomy span{padding:12px 5px;border-radius:9px}.name-part{background:#e6f1ea;color:var(--green)}.operator-part{color:var(--orange);font-size:25px}.value-part{background:#fff0e8;color:#b34f2f}.anatomy-labels{display:grid;grid-template-columns:1fr 52px 1fr;text-align:center;color:#8b918e;font-size:7px;margin-top:5px}.assignment-steps{margin:23px 0;padding:0;display:grid;grid-gap:13px;gap:13px;list-style:none}.assignment-steps li{display:flex;gap:9px;align-items:center}.assignment-steps li>span{width:27px;height:27px;display:grid;place-items:center;background:var(--green);color:white;border-radius:50%;font-size:10px;font-weight:800}.assignment-steps li>div{display:grid}.assignment-steps strong{font-size:11px}.assignment-steps small{margin-top:2px;color:var(--muted);font-size:9px}.tip{padding:13px;display:flex;gap:9px;background:#fff3d8;border:1px solid #eedca9;border-radius:11px}.tip svg{color:#b57e1c;flex:none}.tip strong{font-size:11px}.tip p{margin:5px 0 0;color:#756a60;font-size:10px;line-height:1.45}.naming-rules{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}.naming-rules>code{display:inline-block;margin:0 4px 5px 0;padding:5px 7px;background:#edf2ee;border-radius:6px;color:var(--green);font-size:9px}.naming-rules>p:last-child{margin:6px 0 0;color:var(--muted);font-size:9px;line-height:1.45}.lab-stage{padding:29px clamp(22px,3vw,48px) 55px;background-image:radial-gradient(#d8d5cc 1px,transparent 0);background-size:18px 18px}.stage-title{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.memory-heading h2,.stage-title h2{margin:0;font-family:Georgia,serif;font-weight:400;font-size:29px}.stage-title p:last-child{margin:5px 0 0;color:var(--muted);font-size:12px}.ghost-button{padding:8px 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:white;border-radius:8px;font-size:10px;font-weight:700}.builder-card,.challenge-card,.code-card,.question-card{background:rgba(255,253,248,.98);border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 16px rgba(23,58,50,.04)}.code-heading{padding:11px 14px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #2b5148;background:var(--code);color:white;border-radius:13px 13px 0 0}.code-heading span{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700}.code-heading small{color:#b7cdc6;font-size:8px}.code-card pre{margin:0;padding:12px 0;background:#102b25;color:#dcebe5;border-radius:0 0 13px 13px;overflow:auto}.code-card pre>div{min-height:40px;padding:8px 16px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;border-left:4px solid transparent}.code-card pre>div>span{color:#75968b;font-size:10px}.code-card pre code{font:14px Consolas,monospace}.code-card .current-line{background:#24483e;border-left-color:var(--yellow)}.code-card .executed-line{color:#9fcab9}.question-card{margin-top:13px;padding:18px}.question-heading{display:flex;gap:10px;align-items:center}.question-heading>span{width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:white;font-size:11px;font-weight:800}.question-heading>div{display:grid}.question-heading strong{font-size:13px}.question-heading small{margin-top:3px;color:var(--muted);font-size:10px}.answer-options,.trace-options{display:grid;grid-gap:8px;gap:8px;margin:16px 0}.answer-options{grid-template-columns:repeat(3,1fr)}.answer-options button,.trace-options button{min-height:46px;padding:9px 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fbfaf5;border-radius:9px;font-weight:700}.answer-options button.selected,.trace-options button.selected{border-color:var(--orange);background:#fff1eb;box-shadow:inset 0 0 0 1px var(--orange)}.primary-button{padding:11px 16px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:9px;background:var(--orange);color:white;font-weight:800;font-size:11px;box-shadow:0 5px 12px rgba(242,113,71,.18)}.primary-button:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}.feedback{margin-top:14px;padding:13px;display:grid;grid-template-columns:30px 1fr auto;grid-gap:9px;gap:9px;align-items:center;border-radius:10px}.feedback.correct{background:#e5f2e7;border:1px solid #b7d5be}.feedback.learn{background:#fff0e7;border:1px solid #efc1aa}.feedback>span{width:29px;height:29px;display:grid;place-items:center;background:white;border-radius:50%}.feedback p{margin:0;font-size:10px;line-height:1.45}.feedback button{display:flex;align-items:center;gap:5px;border:0;background:transparent;color:var(--green);font-size:10px;font-weight:800}.builder-card,.challenge-card{padding:20px}.trace-code{padding:13px;background:var(--code);color:#e2eee9;border-radius:10px}.trace-code>div{display:grid;grid-template-columns:28px 1fr;padding:5px 7px}.trace-code span{color:#7fa296;font-size:9px}.trace-code code{font:14px Consolas,monospace}.challenge-card h3{margin:19px 0 0;font-size:16px}.trace-options button{display:grid;grid-template-columns:28px 1fr auto;text-align:left}.trace-options button>span{width:27px;height:27px;display:grid;place-items:center;background:#eceae3;border-radius:7px;font-size:10px}.trace-options button.right{border-color:#6aa486;background:#eaf5ec}.trace-options button.wrong{border-color:#d76855;background:#fff0eb}.builder-fields{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px}.builder-fields label{display:grid;grid-gap:5px;gap:5px;color:#7a8782;font-size:9px;font-weight:700}.builder-fields input,.builder-fields select{width:100%;padding:10px;border:1px solid var(--line);background:white;border-radius:8px;font-size:12px}.generated-code{margin:17px 0;padding:19px;display:grid;grid-gap:8px;gap:8px;background:var(--code);color:white;border-radius:11px}.generated-code small{color:#9ebbb1;font-size:8px;letter-spacing:.12em}.generated-code code{font:22px Consolas,monospace}.generated-code code span{color:#8dd6bd}.generated-code code b{color:#f6c755}.generated-code code em{color:#ffc0a9;font-style:normal}.builder-explanation{margin-bottom:17px;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;grid-gap:7px;gap:7px}.builder-explanation>div{padding:10px;background:#f1f3ee;border-radius:8px}.builder-explanation span{font-size:7px;color:#a07b62;font-weight:800;letter-spacing:.1em}.builder-explanation p{margin:4px 0 0;font-size:9px}.builder-explanation>svg{color:#babdb8}.builder-card>.primary-button code{color:white}.builder-message{margin-top:15px;padding:12px;display:flex;align-items:center;gap:8px;background:#fff3d7;border-radius:9px}.builder-message svg{color:#b57e1c}.builder-message p{margin:0;font-size:10px}.memory-heading{display:flex;align-items:center;justify-content:space-between}.memory-heading h2{font-size:24px}.memory-heading button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);background:white;border-radius:8px}.memory-help{color:var(--muted);font-size:10px;line-height:1.45}.empty-memory{margin-top:22px;padding:27px 10px;text-align:center;border:1px dashed #cfd3cb;border-radius:11px;color:#8a9691}.empty-memory svg{margin-bottom:8px}.empty-memory strong{display:block;font-size:11px}.empty-memory p{font-size:9px}.memory-list{display:grid;grid-gap:8px;gap:8px;margin-top:16px}.memory-list>div{padding:10px;display:grid;grid-template-columns:1fr auto 1fr;grid-gap:7px;gap:7px;align-items:center;background:#eff4ef;border:1px solid #d8e4da;border-radius:9px}.memory-name{font:700 11px Consolas,monospace}.memory-list>div>svg{color:#9aa69f}.memory-value{display:grid;text-align:right}.memory-value code{font:700 12px Consolas,monospace;color:var(--green)}.memory-value small{color:#8b958f;font-size:7px}.memory-note{margin-top:20px;padding-top:15px;display:flex;gap:8px;border-top:1px solid var(--line)}.memory-note svg{color:#b57e1c;flex:none}.memory-note p{margin:0;color:var(--muted);font-size:9px;line-height:1.45}@media(max-width:1100px){.topbar{grid-template-columns:1fr auto}.score-box{display:none}.lesson-layout{grid-template-columns:220px 1fr}.memory-panel{display:none}}@media(max-width:780px){.topbar{height:auto;padding:12px 15px;display:flex;justify-content:space-between}.brand small{display:none}.mode-tabs{position:fixed;bottom:0;left:0;right:0;z-index:20;border-radius:0;justify-content:space-around;border-top:1px solid var(--line)}.mode-tabs button{display:grid;justify-items:center;font-size:8px}.hero{padding:35px 20px 28px;grid-template-columns:1fr;gap:24px}.hero h1{font-size:45px}.lesson-layout{display:block}.concept-panel{border-right:0;border-bottom:1px solid var(--line)}.lab-stage{padding:25px 15px 90px}.answer-options,.builder-explanation,.builder-fields{grid-template-columns:1fr}.builder-explanation>svg{display:none}.feedback{grid-template-columns:30px 1fr}.feedback button{grid-column:1/-1;justify-self:end}.stage-title h2{font-size:26px}}