:root{--ink:#173a33;--green:#2d725e;--deep:#173f35;--orange:#f06f46;--cream:#f7f4ec;--paper:#fffdf8;--line:#ddd9cf;--muted:#687a74;--yellow:#f1c542;--purple:#7966a6}*{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}.shell{min-height:100vh}.eyebrow{margin:0 0 7px;color:#9d765d;font-size:10px;font-weight:800;letter-spacing:.16em}.topbar{height:76px;padding:0 23px;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;color:white;background:var(--green);border-radius:13px}.brand>div{display:grid}.brand strong{font-size:15px}.brand small{color:var(--muted);font-size:10px}.topbar nav{display:flex;padding:4px;background:#ece9e2;border-radius:11px}.topbar nav button{padding:9px 11px;display:flex;align-items:center;gap:6px;border:0;background:transparent;border-radius:8px;color:#75817d;font-size:10px;font-weight:700}.topbar nav button.active{background:white;color:var(--ink);box-shadow:0 2px 7px rgba(0,0,0,.08)}.score{justify-self:end;display:flex;align-items:center;gap:10px;padding:7px 11px;border:1px solid var(--line);border-radius:10px;background:white}.score svg{color:#b9821e}.score>span{min-width:42px;display:grid}.score small{font-size:7px;color:#8c9591}.score strong{font-size:13px}.hero{padding:42px 5vw 34px;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-size:clamp(45px,5vw,74px);line-height:.98;font-weight:400}.hero h1 em{color:var(--green);font-weight:400}.hero>div:last-child>p{margin:0 0 15px;color:#536862;font-size:16px;line-height:1.55}.target{padding:12px 14px;display:flex;gap:9px;align-items:flex-start;background:#fff2d5;border:1px solid #ead89f;border-radius:11px;font-size:12px;line-height:1.4}.target svg{flex:none;color:#ae7818}.target span,.workspace{display:grid}.workspace{min-height:650px;grid-template-columns:250px minmax(560px,1fr) 245px;border-top:1px solid var(--line)}.reference,.string-panel{padding:25px 20px;background:var(--paper)}.reference{border-right:1px solid var(--line)}.string-panel{border-left:1px solid var(--line)}.reference h2,.string-panel h2{margin:0;font-family:Georgia,serif;font-size:25px;font-weight:400}.reference>p:nth-of-type(2){color:var(--muted);font-size:10px;line-height:1.5}.reference-list{display:grid;grid-gap:8px;gap:8px;margin:18px 0}.reference-list>div{padding:9px;display:grid;grid-gap:7px;gap:7px;background:#f0f3ef;border-radius:8px}.reference-list>div>code{font:11px Consolas,monospace;color:var(--orange)}.reference-list span{display:grid}.reference-list strong{font-size:10px}.reference-list small{color:var(--muted);font-size:8px}.tip{padding:12px;display:flex;gap:8px;background:#fff2d6;border:1px solid #ecd79e;border-radius:10px}.tip svg{flex:none;color:#ae7818}.tip p{margin:0;color:#71665d;font-size:9px;line-height:1.45}.tip strong{display:block;color:var(--ink);margin-bottom:4px}.immutable{margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.immutable>p:nth-of-type(2){color:var(--muted);font-size:9px;line-height:1.5}.immutable>code{display:block;padding:9px;background:var(--deep);color:#ffd0bc;border-radius:7px;font:9px Consolas,monospace}.stage{padding:29px clamp(22px,3vw,48px) 55px;background-image:radial-gradient(#d8d5cc 1px,transparent 0);background-size:18px 18px}.stage-title{margin-bottom:18px}.stage-title h2{margin:0;font-family:Georgia,serif;font-size:30px;font-weight:400}.stage-title>p:last-child{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.5}.lab-card{padding:20px;background:rgba(255,253,248,.98);border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 15px rgba(23,58,50,.04)}.concat-inputs label,.index-controls>label,.slice-controls label,.text-input{display:grid;grid-gap:5px;gap:5px;color:#687a74;font-size:9px;font-weight:800}.concat-inputs input,.concat-inputs select,.index-controls input,.slice-controls input,.text-input input{width:100%;padding:11px;border:1px solid var(--line);border-radius:9px;background:white}.text-input input{font:700 16px Consolas,monospace}.character-rail{margin:18px 0;display:flex;flex-wrap:wrap;gap:5px}.character-rail>div{min-width:38px;height:64px;display:grid;grid-template-rows:15px 1fr 15px;place-items:center;background:#f0f1ec;border:1px solid var(--line);border-radius:8px}.character-rail small{color:#858f8b;font-size:7px}.character-rail strong{font:700 15px Consolas,monospace}.character-rail em{color:#a69b92;font-size:7px;font-style:normal}.character-rail>div.highlight{background:#e2f1e7;border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}.character-rail>div.highlight strong{color:var(--green)}.index-controls{padding:14px;background:#f2f1eb;border-radius:10px}.index-controls>label{grid-template-columns:1fr 90px;align-items:center;color:var(--ink)}.index-controls input{text-align:center;font-weight:800}.quick-indexes{margin:10px 0 7px;display:flex;flex-wrap:wrap;gap:5px}.quick-indexes button{padding:5px 7px;display:flex;align-items:center;gap:4px;background:white;border:1px solid var(--line);border-radius:7px;font:9px Consolas,monospace}.quick-indexes button span{width:19px;height:19px;display:grid;place-items:center;background:#eceee9;border-radius:5px;color:#687a74;font-size:7px}.quick-indexes button.selected{background:#e4f0e7;border-color:var(--green)}.quick-indexes button.selected span{background:var(--green);color:white}.index-controls>small{color:var(--muted);font-size:8px}.expression{margin-top:12px;padding:15px;display:grid;grid-template-columns:1fr auto;grid-gap:6px;gap:6px;align-items:center;background:var(--deep);color:white;border-radius:10px}.expression>small{grid-column:1/-1;color:#9ec0b4;font-size:8px;letter-spacing:.1em}.expression>code{font:22px Consolas,monospace}.expression em,.slice-output em{color:#ffac8d;font-style:normal}.primary{padding:11px 15px;display:flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:9px;background:var(--orange);color:white;font-size:10px;font-weight:800}.primary:disabled{opacity:.4;cursor:not-allowed}.console{margin-top:12px;padding:13px;background:var(--deep);color:white;border-radius:9px}.console small{color:#9ec0b4;font-size:8px;letter-spacing:.1em}.console p{margin:5px 0 0;font-size:10px;line-height:1.45}.slice-controls{display:grid;grid-template-columns:1fr 30px 1fr;grid-gap:9px;gap:9px;align-items:end}.slice-controls label{color:var(--ink)}.slice-controls label span{color:var(--orange);font-size:8px}.slice-controls input{font:700 16px Consolas,monospace}.slice-arrow{height:42px;display:grid;place-items:center;color:#98a39f}.slice-output{margin-top:13px;padding:16px;display:grid;grid-template-columns:1fr auto 1fr;grid-gap:14px;gap:14px;align-items:center;background:var(--deep);color:white;border-radius:10px}.slice-output>div{display:grid;grid-gap:6px;gap:6px}.concat-output small,.slice-output small{color:#9ec0b4;font-size:8px;letter-spacing:.1em}.slice-output code{font:18px Consolas,monospace}.slice-output strong{font:700 18px Consolas,monospace;color:#ffd0bd}.instruction{margin-top:12px;padding:11px;display:flex;gap:8px;align-items:center;background:#eef4ee;border-radius:9px}.instruction svg{flex:none;color:var(--green)}.instruction p{margin:0;color:#536a62;font-size:9px;line-height:1.45}.concat-inputs{display:grid;grid-template-columns:1fr .75fr 1fr;grid-gap:9px;gap:9px}.concat-parts{margin:17px 0;display:flex;flex-wrap:wrap;gap:9px;align-items:center;justify-content:center}.concat-parts span{padding:11px;background:#f0f1eb;border:1px solid var(--line);border-radius:8px;font:12px Consolas,monospace}.concat-parts b{color:var(--orange)}.concat-output{padding:17px;display:grid;grid-gap:8px;gap:8px;text-align:center;background:var(--deep);color:white;border-radius:10px}.concat-output code{font:10px Consolas,monospace;color:#bfd3cc}.concat-output strong{font:700 21px Consolas,monospace;color:#ffd0bd}.concat-output span{color:#a8c1b8;font-size:8px}.challenge pre{margin:0;padding:16px;background:var(--deep);color:#e0ece7;border-radius:10px;overflow:auto}.challenge pre>div{padding:5px 0;display:grid;grid-template-columns:28px 1fr}.challenge pre span{color:#7f9f95;font-size:9px}.challenge pre code{font:12px Consolas,monospace}.challenge h3{margin:18px 0 13px;font-size:15px}.answers{display:grid;grid-gap:8px;gap:8px;margin-bottom:13px}.answers button{min-height:46px;padding:8px 11px;display:grid;grid-template-columns:28px 1fr auto;grid-gap:9px;gap:9px;align-items:center;text-align:left;background:#faf9f4;border:1px solid var(--line);border-radius:9px}.answers button>span{width:27px;height:27px;display:grid;place-items:center;background:#eceae2;border-radius:7px;font-size:9px}.answers button code{font:11px Consolas,monospace}.answers button.selected{border-color:var(--orange);background:#fff1ea}.answers button.right{border-color:#63a080;background:#e7f3e9}.answers button.wrong{border-color:#d56652;background:#fff0ea}.feedback{margin-top:13px;padding:12px;display:grid;grid-template-columns:30px 1fr auto;grid-gap:9px;gap:9px;align-items:center;border-radius:9px}.feedback.correct{background:#e5f2e7}.feedback.learn{background:#fff0e7}.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}.current-value{margin:14px 0;padding:12px;background:var(--deep);color:#ffd0bd;border-radius:9px;overflow-wrap:anywhere;font:12px Consolas,monospace}.facts{padding-top:8px;border-top:1px solid var(--line)}.facts>div{padding:8px 0;display:flex;justify-content:space-between;gap:8px;font-size:9px;color:var(--muted)}.facts strong{color:var(--ink)}.space-note{margin-top:16px;padding:12px;background:#f0f2ed;border-radius:9px}.space-note p:last-child{margin:0;color:var(--muted);font-size:9px}.python-note{margin-top:16px;padding:11px;display:flex;gap:8px;background:#fff1d5;border-radius:9px}.python-note svg{flex:none;color:#b47c19}.python-note p{margin:0;font-size:9px;line-height:1.45}.python-note strong{display:block;margin-bottom:4px}@media(max-width:1120px){.topbar{grid-template-columns:1fr auto}.score{display:none}.workspace{grid-template-columns:220px 1fr}.string-panel{display:none}}@media(max-width:800px){.topbar{height:auto;padding:12px 14px}.brand small{display:none}.topbar nav{position:fixed;bottom:0;left:0;right:0;z-index:20;border-radius:0;justify-content:space-around;border-top:1px solid var(--line)}.topbar nav button{display:grid;justify-items:center;font-size:8px}.hero{padding:35px 20px 28px;grid-template-columns:1fr;gap:23px}.hero h1{font-size:44px}.workspace{display:block}.reference{border-right:0;border-bottom:1px solid var(--line)}.stage{padding:25px 15px 90px}.concat-inputs,.slice-controls{grid-template-columns:1fr}.slice-arrow{height:auto;transform:rotate(90deg)}.slice-output{text-align:center}.expression,.slice-output{grid-template-columns:1fr}.expression .primary{margin-top:5px}.feedback{grid-template-columns:30px 1fr}.feedback button{grid-column:1/-1;justify-self:end}}