/* Coding practice shares the hub palette and uses readable lesson typography. */
.mode-switcher{grid-template-columns:repeat(5,minmax(0,1fr))}.mode-tab{min-width:0}.mode-tab:focus-visible,#view-coding :focus-visible,.coding-dashboard :focus-visible{outline:2px solid #77e0c1;outline-offset:4px}
.coding-heading{align-items:center;gap:24px}.coding-heading p{max-width:760px;font-size:16px;line-height:1.7}.coding-badge{color:#d6c9ff;background:#a78bfa12;border:1px solid #a78bfa40;padding:12px 16px;border-radius:30px;white-space:nowrap;font-size:14px}
.coding-overview{display:grid;grid-template-columns:repeat(3,1fr) 1.65fr;gap:24px;align-items:center;margin:26px 0;padding:24px 28px;border:1px solid #263749;border-radius:18px;background:linear-gradient(115deg,#122536,#131e30)}.coding-overview strong{display:block;color:#c5f5e7;font:600 30px 'Space Grotesk',sans-serif}.coding-overview span{color:#aebcce;font-size:14px;display:block;margin-top:6px}.coding-overview p{font-size:14px;color:#b4c0d0;line-height:1.6;margin:0}
.coding-tracks{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.coding-track{padding:18px 15px;border:1px solid #2a3546;border-radius:14px;background:#101b2b;color:#dce6f3;text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,background .15s}.coding-track:hover{background:#19263a}.coding-track.is-selected{border-color:var(--track-color);background:#1c293a;box-shadow:inset 0 3px 0 var(--track-color)}.coding-track span{display:block;color:#aebacf;font-size:12px;margin-bottom:10px}.coding-track strong{display:block;font:600 17px 'Space Grotesk',sans-serif;color:var(--track-color)}.coding-track small{display:block;color:#bcc8d8;font-size:13px;margin-top:8px}.coding-track-intro{margin:18px 0 24px;color:#b4c3d6;font-size:16px}
.coding-layout{display:grid;grid-template-columns:265px minmax(0,1fr);gap:20px;align-items:start}.coding-sidebar{padding:20px;position:sticky;top:16px}.coding-list-heading{margin-bottom:22px}.coding-list-heading h3{font-size:19px;margin:0 0 6px}.coding-list-heading span{color:#aebbd0;font-size:13px}.coding-sidebar>label{color:#bdcadd;font-size:14px;display:block;margin-bottom:7px}.coding-sidebar select{width:100%;padding:10px 12px;background:#0b1523;color:#dfe8f5;border:1px solid #334358;border-radius:8px;font:inherit;font-size:14px}#coding-question-list{display:flex;flex-direction:column;gap:8px;margin-top:18px}.coding-question-link{font:inherit;text-align:left;padding:14px 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:#c6d4e7;cursor:pointer}.coding-question-link:hover{background:#18283a}.coding-question-link.is-current{border-color:#77e0c160;background:#77e0c110}.coding-question-link strong{font-size:14px;line-height:1.5;display:block;font-weight:500}.coding-question-link span{display:block;font-size:12px;line-height:1.5;color:#aebbd0;margin-top:6px}.coding-sidebar-note{font-size:13px;line-height:1.7;color:#9daec5;border-top:1px solid #283547;padding-top:20px;margin-top:24px}
.coding-workbench{padding:30px;min-width:0;scroll-margin-top:20px}.coding-lesson-top{display:flex;justify-content:space-between;align-items:center;gap:16px}.coding-status{color:#bda6ff;white-space:nowrap;font-size:13px}.coding-workbench h3{font:600 28px/1.25 'Space Grotesk',sans-serif;margin:18px 0}.coding-workbench p{font-size:16px;line-height:1.75;color:#c1cde0}.coding-workbench .coding-lesson{margin-bottom:30px}.coding-step-label,.coding-check legend,.coding-review-list legend{display:block;color:#92d9c5;font:500 12px/1.6 'DM Mono',monospace;letter-spacing:.08em;margin-top:25px}.coding-code{padding:20px;background:#070f1c;border:1px solid #29384d;border-radius:10px;overflow:auto;color:#e0e8f5;font:14px/1.85 'DM Mono',Consolas,monospace;tab-size:2;max-width:100%}.coding-check,.coding-review-list{border:0;padding:0;margin:0;min-width:0}
.coding-option{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;margin:9px 0;background:#0d1928;border:1px solid #2a3b50;border-radius:10px;font-size:15px;line-height:1.6;cursor:pointer;color:#d4dfed}.coding-option:has(input:checked){border-color:#77e0c1;background:#15312f}.coding-option input,.coding-review-list input{accent-color:#77e0c1;margin-top:5px;flex-shrink:0;width:16px;height:16px}.coding-check button{margin-top:12px}.coding-workbench .coding-feedback{font-size:14px;background:#152238;border-left:3px solid #90a9cb;padding:13px 16px}.coding-workbench .coding-feedback.is-correct{border-left-color:#77e0c1;background:#12302c;color:#bceedd}.coding-detail{margin:18px 0;border:1px solid #314159;border-radius:10px;padding:15px 18px}.coding-detail summary{color:#d4ddf0;font-size:15px;cursor:pointer}.coding-detail .coding-code{margin-bottom:0}
.coding-workbench .coding-editor-note{color:#a3b3c9;font-size:14px;line-height:1.65}#coding-draft{display:block;width:100%;min-height:220px;resize:vertical;border:1px solid #3b4d66;border-radius:10px;padding:18px;background:#080f1d;color:#e2eaf4;font:14px/1.8 'DM Mono',Consolas,monospace;box-sizing:border-box}#coding-draft::placeholder{color:#8395ae}.coding-save-row{display:flex;justify-content:space-between;gap:14px;margin:10px 0 22px;color:#a2b4cc;font-size:12px}.coding-followup{margin-top:25px;padding:18px 20px;background:#a78bfa0b;border-radius:10px;border-left:3px solid #a78bfa}.coding-followup .coding-step-label{margin:0;color:#c4b2ff}.coding-followup p{margin:9px 0 0}.coding-review-list label{display:flex;gap:12px;align-items:start;font-size:15px;line-height:1.6;color:#cbd7e8;margin:13px 0;cursor:pointer}.coding-finish{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}#view-coding button:disabled{opacity:.5;cursor:not-allowed}.coding-source{color:#9ebde8;font-size:14px;display:inline-block;margin-top:16px;line-height:1.6}.coding-empty{color:#afbdd2;padding:12px 0;font-size:15px;line-height:1.7}.coding-storage-note{text-align:center;color:#9cafc8;font-size:13px;margin-top:28px;line-height:1.7}
.coding-dashboard{margin:22px 0;display:flex;align-items:center;gap:28px;justify-content:space-between}.coding-dashboard h3{font-size:20px;line-height:1.5;margin:12px 0}.coding-dashboard p{font-size:14px;line-height:1.7;color:#abbcd3}.coding-dashboard button{flex-shrink:0}
@media(max-width:1050px){.mode-tab small{font-size:11px}.coding-tracks{grid-template-columns:repeat(3,minmax(0,1fr))}.coding-overview{grid-template-columns:repeat(3,1fr)}.coding-overview p{grid-column:1/-1}.coding-layout{grid-template-columns:230px minmax(0,1fr)}.coding-workbench{padding:22px}}
@media(max-width:760px){.mode-switcher{grid-template-columns:repeat(2,minmax(0,1fr))}.mode-tab:last-child{grid-column:1/-1}.coding-heading{align-items:start}.coding-badge{display:none}.coding-layout{grid-template-columns:1fr}.coding-sidebar{position:static}#coding-question-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.coding-sidebar-note{display:none}.coding-list-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.coding-overview{gap:18px;padding:20px}.coding-overview strong{font-size:24px}.coding-overview span{font-size:12px}.coding-tracks{gap:8px}.coding-track{padding:15px 11px}.coding-track strong{font-size:16px}.coding-lesson-top{flex-wrap:wrap;gap:8px}.coding-workbench h3{font-size:24px}.coding-workbench{padding:20px}.coding-dashboard{flex-direction:column;align-items:flex-start}}
@media(prefers-reduced-motion:reduce){.coding-track{transition:none}}