:root {
    color-scheme: light;
    --ink: #172554;
    --muted: #57534e;
    --paper: #fafaf9;
    --panel: #ffffff;
    --line: #e7e5e4;
    --orange: #f97316;
    --pink: #ec4899;
    --green: #059669;
}

* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--paper); }
button, textarea, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
.hidden { display: none !important; }
.topbar { background: #1e1b4b; color: white; padding: 1rem; position: sticky; top: 0; z-index: 10; }
.topbar-inner { max-width: 1180px; margin: auto; display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.brand { color: white; text-decoration: none; font-weight: 900; letter-spacing: .02em; }
.top-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.progress-pill { background: #312e81; border: 1px solid #4338ca; border-radius: 999px; padding: .5rem .8rem; font-weight: 800; color: #fdba74; }
.user-pill { background: #4338ca; border: 1px solid #6366f1; border-radius: 999px; padding: .5rem .8rem; font-weight: 800; color: white; }
.shell { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1rem 4rem; }
.hero { background: linear-gradient(135deg, #312e81, #1e1b4b); color: white; padding: 2rem; border-radius: 1.5rem; position: relative; overflow: hidden; }
.hero p { color: #e7e5e4; max-width: 760px; line-height: 1.6; }
.eyebrow { color: #fb923c; text-transform: uppercase; font-size: .75rem; font-weight: 900; letter-spacing: .12em; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.card, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.25rem; box-shadow: 0 4px 18px rgba(30, 27, 75, .05); }
.card h3 { margin: .35rem 0; }
.card p { color: var(--muted); line-height: 1.45; }
.card.locked { opacity: .65; }
.card.complete { border-color: #6ee7b7; }
.bar { height: .65rem; border-radius: 999px; background: #e7e5e4; overflow: hidden; }
.bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--orange), var(--pink)); }
.button { border: 0; border-radius: .75rem; padding: .7rem 1rem; min-height: 2.9rem; background: #e7e5e4; color: var(--ink); font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.lesson-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .45rem; }
.lesson-buttons .button { width: 100%; margin: 0 !important; text-align: center; }
.button.primary { background: var(--orange); color: white; }
.button.success { background: var(--green); color: white; }
.button.danger { background: #dc2626; color: white; }
.button.ghost { background: transparent; color: inherit; border: 1px solid currentColor; }
.lesson-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; align-items: start; }
.lesson-head { background: #1e1b4b; color: white; border-radius: 1.25rem; padding: 1.5rem; margin-bottom: 1rem; }
.step { border-left: 5px solid #c7d2fe; margin: 1rem 0; }
.step.predict { border-left-color: #818cf8; }
.step.learn { border-left-color: var(--green); background: #f0fdf4; }
.story-link { margin: 1rem 0; padding: 1rem; border-radius: .8rem; background: #eef2ff; border: 1px solid #c7d2fe; }
.story-link p { margin-bottom: 0; }
.step.investigate { border-left-color: var(--orange); }
.step.investigate .console { margin-top: .8rem; }
.step.task-briefing { border-left-color: #0ea5e9; background: #f0f9ff; }
.step.make { border-left-color: var(--pink); }
.step h3 { margin-top: 0; }
.step p, .step li { color: var(--muted); line-height: 1.55; }
.worked-example { margin: 1rem 0; padding: 1rem; border: 1px solid #86efac; border-radius: .8rem; background: white; }
.worked-example p { margin-bottom: 0; white-space: pre-wrap; }
.syntax-note { margin: 1rem 0; padding: 1rem; border-left: 4px solid #0ea5e9; background: #f0f9ff; }
.syntax-note p { margin-bottom: 0; }
.error-focus { margin: 1rem 0; padding: 1rem; border-left: 4px solid #ef4444; background: #fef2f2; }
.error-focus p { margin-bottom: 0; }
.related-lessons { margin: 1rem 0; padding: 1rem; border: 1px solid #fdba74; border-radius: .8rem; background: #fff7ed; }
.code-resource { margin: 1rem 0; padding: 1rem; border: 1px solid #c7d2fe; border-radius: .8rem; background: #eef2ff; }
.code-resource .source-note { margin-left: .7rem; }
.debugger-worksheet { margin-top: 1rem; }
.debugger-worksheet table { width: 100%; max-width: 620px; border-collapse: collapse; margin: 1rem 0; background: white; }
.debugger-worksheet th, .debugger-worksheet td { padding: .7rem; border: 1px solid #cbd5e1; text-align: center; }
.debugger-worksheet thead th { background: #eef2ff; color: var(--ink); }
.debugger-worksheet input { width: 100%; min-width: 90px; padding: .65rem; border: 1px solid #94a3b8; border-radius: .55rem; font: 1rem "Fira Code", Consolas, monospace; text-align: center; }
.artifact-label { display: block; margin: 1rem 0; color: var(--ink); }
.task-requirements { margin: 1rem 0; padding: 1rem; border: 1px solid #7dd3fc; border-radius: .8rem; background: white; }
.task-requirements h4 { margin-top: 0; }
.task-requirements ul { margin-bottom: 0; padding-left: 1.4rem; }
.artifact-label textarea { display: block; margin-top: .45rem; }
.artifact-field.editor { min-height: 180px; }
.artifact-preview { max-height: 240px; overflow: auto; padding: .8rem; border-radius: .7rem; background: #f8fafc; white-space: pre-wrap; }
.code-resource details { margin-top: .7rem; }
.artifact-checks { display: grid; gap: .65rem; margin: 1rem 0; padding: 1rem; border: 1px solid #cbd5e1; border-radius: .8rem; background: #f8fafc; }
.artifact-check { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.4; }
.artifact-check input { margin-top: .2rem; }
.learning-steps { padding-left: 1.4rem; }
.learning-steps li { margin: .35rem 0; }
.foundation-list { padding-left: 1.4rem; }
.foundation-list li { margin: .45rem 0; line-height: 1.55; color: var(--muted); }
.editor { width: 100%; min-height: 260px; resize: vertical; border: 0; border-radius: 1rem; padding: 1rem; background: #1c1917; color: #86efac; font: 14px/1.55 "Fira Code", Consolas, monospace; tab-size: 4; }
.code-actions { margin-top: .8rem; gap: .8rem; }
.runner-status { padding: .45rem .2rem; }
.console { min-height: 90px; background: #0c0a09; color: #e7e5e4; border-radius: .8rem; padding: 1rem; white-space: pre-wrap; font: 13px/1.5 monospace; }
.console.ok { border: 2px solid #10b981; }
.console.error { border: 2px solid #fb7185; }
.hint { background: #fffbeb; border: 1px solid #fde68a; border-radius: .75rem; padding: 1rem; margin-top: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.hint.solution-hint { background: #f0fdf4; border-color: #86efac; font-family: "Fira Code", Consolas, monospace; }
.sidebar { position: sticky; top: 90px; }
.checklist { list-style: none; padding: 0; }
.checklist li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.badge { display: inline-block; padding: .25rem .55rem; border-radius: 999px; background: #f1f5f9; font-size: .75rem; font-weight: 800; }
.review { background: #eef2ff; border: 1px solid #c7d2fe; }
.reflection { width: 100%; min-height: 90px; padding: .75rem; border: 1px solid #d6d3d1; border-radius: .75rem; }
.plan-label { display: block; margin-top: 1rem; }
.plan-label .reflection { display: block; min-height: 72px; margin-top: .4rem; }
#plan-feedback, #investigation-feedback { font-weight: 700; }
.prediction-code { background: #1c1917; color: #bfdbfe; border-radius: .8rem; padding: 1rem; overflow-x: auto; font: 14px/1.55 "Fira Code", Consolas, monospace; }
.numbered-code { padding: .75rem 0; }
.numbered-code-line { display: grid; grid-template-columns: 3.25rem minmax(max-content, 1fr); min-height: 1.55em; }
.code-line-number { color: #78716c; text-align: right; padding: 0 .9rem 0 .5rem; border-right: 1px solid #44403c; user-select: none; }
.code-line-text { padding: 0 1rem; white-space: pre; }
.prediction-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .75rem 0; }
.prediction-row input, .prediction-row select { min-width: 240px; padding: .7rem; border: 1px solid #a8a29e; border-radius: .7rem; background: white; }
.toast { position: fixed; right: 1rem; bottom: 1rem; max-width: 360px; background: #1c1917; color: white; padding: 1rem; border-radius: .8rem; z-index: 20; }
.project-box { background: #fdf2f8; border: 1px solid #fbcfe8; }
.source-note { font-size: .85rem; color: var(--muted); line-height: 1.5; }
dialog { border: 0; border-radius: 1rem; max-width: 620px; padding: 1.5rem; box-shadow: 0 20px 80px rgba(0,0,0,.3); }
dialog::backdrop { background: rgba(15, 23, 42, .7); }
dialog input, dialog textarea { width: 100%; margin: .35rem 0 1rem; padding: .7rem; border: 1px solid #a8a29e; border-radius: .7rem; }
.key-field { min-height: 150px; font-family: monospace; font-size: .8rem; }
.certificate-dialog { max-width: 780px; }
.certificate-sheet { text-align: center; border: 10px double #312e81; padding: 2rem; background: #fffdf7; }
.certificate-sheet h1 { font-family: Georgia, serif; font-size: 3rem; margin: .3rem; }
.certificate-sheet h2 { color: #312e81; }
.certificate-stars { font-size: 2.6rem; letter-spacing: .2rem; margin: .5rem; }
.star-rating { display: inline-flex; gap: .08em; color: #d6d3d1; }
.star-rating .star { position: relative; display: inline-block; color: #d6d3d1; }
.star-rating .star::before { content: "★"; }
.star-rating .star.full { color: #f59e0b; }
.star-rating .star.half::after { content: "★"; position: absolute; inset: 0; width: 50%; overflow: hidden; color: #f59e0b; }
.certificate-sheet img { width: min(720px, 90%); height: auto; image-rendering: crisp-edges; }
.certificate-emblem { font-size: 4rem; }
@media (max-width: 850px) {
    .lesson-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; }
    .topbar-inner { align-items: flex-start; }
}
@media print {
    @page { size: A4 portrait; margin: 0; }
    html, body { width: 100%; height: 297mm; margin: 0; overflow: hidden; }
    body > * { display: none !important; }
    #certificate-dialog { display: block !important; visibility: visible; position: relative; width: 100%; height: 297mm; max-width: none; margin: 0; padding: 0; border: 0; box-shadow: none; overflow: hidden; page-break-after: avoid; break-after: avoid; }
    #certificate-dialog::backdrop { display: none; }
    #certificate-dialog * { visibility: hidden; }
    #certificate-sheet, #certificate-sheet * { visibility: visible; }
    #certificate-sheet { position: relative; width: calc(210mm - 16mm); height: 280mm; margin: 8mm auto; overflow: hidden; border: 8px double #312e81; padding: 1rem; box-sizing: border-box; page-break-inside: avoid; break-inside: avoid; page-break-after: avoid; break-after: avoid; }
    #certificate-sheet .certificate-emblem { font-size: 2.5rem; }
    #certificate-sheet h1 { font-size: 2.4rem; }
    #certificate-sheet h2 { margin: .25rem 0; font-size: 1.35rem; }
    #certificate-sheet p { margin: .35rem 0; }
    #certificate-sheet .certificate-stars { font-size: 2rem; margin: .25rem; }
    #certificate-sheet img { display: block; width: auto; max-width: 70vw; height: 38vh; margin: .5rem auto; }
    .no-print { display: none !important; }
}
@media (max-width: 600px) {
    .topbar-inner { flex-direction: column; }
    .hero { padding: 1.4rem; }
    .shell { padding-inline: .75rem; }
    .runner-status { flex-basis: 100%; }
}