/* Shared visual layer. Local fonts; no Canva runtime or external font requests. */
@font-face{font-family:'DM Sans';src:url('./vendor/fonts/dm-sans.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:'Fraunces';src:url('./vendor/fonts/fraunces.woff2') format('woff2');font-style:normal;font-weight:400 700;font-display:swap}
@font-face{font-family:'Space Mono';src:url('./vendor/fonts/space-mono.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root[data-theme]{
 --bg:#f7f3fa;--panel:#fffdfd;--surface:#f1edf6;--ink:#292335;--muted:#6b6278;--line:#ded7e7;--accent:#674a9e;--soft:#eee5fa;--hover:#e5d9f6;
 --sidebar:#33264e;--sidebar-ink:#f4edff;--sidebar-muted:#c9bddc;--selection:#dccaf7;--on-selection:#332052;
 --terminal:#f5f2f8;--terminal-ink:#30283e;--editor:#fffdfd;--editor-gutter:#f4f0f8;--card-shadow:0 6px 26px #42265e08;--header:#fffdfdf2;
 --good:#226442;--bad:#9e302f;
 --bs-body-bg:var(--bg);--bs-body-color:var(--ink);--bs-surface-bg:var(--surface);--bs-muted-color:var(--muted);--bs-border-color:var(--line);
 --bs-primary:var(--accent);--bs-primary-rgb:103,74,158;--bs-primary-hover:#573c8b;--bs-primary-active:#4f347f;--bs-text-on-primary:#fff;
 --bs-primary-subtle:var(--soft);--bs-primary-subtle-hover:var(--hover);--bs-primary-subtle-active:#dacbf0;--bs-primary-emphasis:#543881;--bs-primary-emphasis-hover:#432b69;--bs-primary-border-subtle:#cbb8e8;
 --bs-success-subtle:#e4f2e8;--bs-success-emphasis:#235d3d;--bs-danger-subtle:#fbe9e6;--bs-danger-emphasis:#9e302f;--bs-warning-subtle:#fff1d3;--bs-warning-emphasis:#77521b;
 --bs-body-font-family:'DM Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;--bs-border-radius:14px;
 color-scheme:light;
}
:root[data-theme=dark]{
 --bg:#15151d;--panel:#20202b;--surface:#292936;--ink:#eeebf4;--muted:#b5afc5;--line:#41404f;--accent:#cfb8f5;--soft:#343044;--hover:#403851;
 --sidebar:#201c2e;--sidebar-ink:#f0eaf9;--sidebar-muted:#bdb2ce;--selection:#bda4e7;--on-selection:#281b40;
 --terminal:#191922;--terminal-ink:#e9e5f1;--editor:#1b1b25;--editor-gutter:#22222d;--card-shadow:0 8px 28px #00000014;--header:#1c1b26f5;
 --good:#a3dfb6;--bad:#ffb3ac;
 --bs-primary-rgb:207,184,245;--bs-primary-hover:#dbc9fa;--bs-primary-active:#e3d4fc;--bs-text-on-primary:#2c1c46;
 --bs-primary-subtle-active:#4b405f;--bs-primary-emphasis:#ddc9fc;--bs-primary-emphasis-hover:#ede1ff;--bs-primary-border-subtle:#635079;
 --bs-success-subtle:#233c30;--bs-success-emphasis:#b3e7c4;--bs-danger-subtle:#45282f;--bs-danger-emphasis:#ffbbb3;--bs-warning-subtle:#423820;--bs-warning-emphasis:#f4d899;
 color-scheme:dark;
}
html{scrollbar-color:var(--line) transparent}
body{font-family:var(--bs-body-font-family);color:var(--ink);background:radial-gradient(ellipse at 90% 0,#dfd0f536,transparent 48%),var(--bg);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
:root[data-theme=dark] body{background:radial-gradient(ellipse at 85% 0,#56406e14,transparent 50%),var(--bg)}
a{color:var(--accent)}a:hover{color:var(--bs-primary-emphasis)}
h1,h2,.lesson-heading h1,.study-content>.lesson-heading h1{font-family:'Fraunces',Georgia,serif;font-optical-sizing:auto;font-weight:500;letter-spacing:-.035em;line-height:1.15;color:var(--ink)}
h1,.lesson-heading h1{font-size:clamp(2.1rem,3.8vw,3.25rem)}h2{font-size:1.65rem}h3,h4,h5,h6{font-family:'DM Sans',sans-serif;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
.eyebrow,.number,.side-intro>.eyebrow,.list-head,.study-panel-heading>span{font-family:'Space Mono',ui-monospace,monospace;font-size:10px;font-weight:400;letter-spacing:.13em;line-height:1.7}
main{padding:40px 36px 64px}.intro{font-size:1.05rem;line-height:1.8;max-width:68ch}.breadcrumbs{color:var(--muted)}
.site-header,.top{background:var(--header)!important;color:var(--ink)!important;border-bottom:1px solid var(--line)!important;padding:18px 28px!important;min-height:78px;box-shadow:0 1px 0 #27163203}
.site-header a,.top a,.site-header .icon-button,.logo,.logo b{color:var(--ink)!important}
.brand{font-size:14px}.brand strong{font-family:'Fraunces',Georgia,serif;font-size:23px;font-weight:500;letter-spacing:-.7px}.brand-mark,.logo-icon{color:var(--accent)!important}
.site-header nav,.top-right{gap:8px}.site-header nav>a,.top-right>a{padding:9px 13px;border-radius:100px;font-size:13px;font-weight:500;text-decoration:none;color:var(--muted)!important;transition:background .18s,color .18s}
.site-header nav>a:hover,.top-right>a:hover{background:var(--soft);color:var(--accent)!important}.site-header nav>a[aria-current=page],.top-right>a[aria-current=page]{background:var(--soft);color:var(--bs-primary-emphasis)!important}
.site-header .icon-button,.material-preferences summary{color:var(--accent)!important;border-radius:50%;padding:6px 9px!important}.material-preferences summary:hover,.site-header .icon-button:hover{background:var(--soft)!important}
.home-hero{position:relative;padding:38px 40px;margin-bottom:30px;border:1px solid var(--line);border-radius:30px;background:linear-gradient(115deg,var(--panel),var(--soft));overflow:hidden}.home-hero h1{max-width:850px;margin:12px 0 20px;font-size:clamp(2.5rem,4.3vw,4rem)}.home-hero .intro{max-width:67ch}.hero-meta{margin-top:24px;font-size:12px;gap:26px;color:var(--muted)}
.course-grid{gap:24px}.panel,.unit-card,.course-card,.stat,.account-menu,.material-preferences>div{background:var(--panel);border:1px solid var(--line);border-radius:24px!important;box-shadow:var(--card-shadow)}
.panel,.unit-card,.course-card{padding:26px}.workspace,.study-instructions.panel,.study-workspace.panel{padding:0}.course-card{min-height:265px}.course-card h2{font-size:1.8rem;margin-top:28px}.course-card p{font-size:14px;line-height:1.8}.course-card .badge{top:23px;right:24px}.course-card>a{margin-top:20px}.unit-card h2{font-size:1.8rem}.stat strong{font-family:'Fraunces',Georgia,serif;font-weight:500;font-size:36px}.stat span{font-size:12px}.panel+.panel{margin-top:18px}
.badge,.tag,.points,:root[data-theme] .tag,:root[data-theme] .points{border-radius:100px!important;background:var(--soft)!important;color:var(--bs-primary-emphasis)!important;font-family:'DM Sans',sans-serif;font-weight:600;font-size:11px;padding:5px 11px;letter-spacing:0}.badge.neutral{background:var(--surface)!important;color:var(--muted)!important}
button,.btn{font-family:'DM Sans',sans-serif;border-radius:100px!important;padding:10px 17px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.45;transition:background .18s,box-shadow .18s,border-color .18s;box-shadow:none}
button,.btn-primary{background:var(--accent);color:var(--bs-text-on-primary)}button:hover:not(:disabled),.btn-primary:hover{background:var(--bs-primary-hover);box-shadow:0 3px 12px #5b35831a}.btn-primary{border-color:transparent!important}
button.secondary,.compact-button,.btn-outline-primary{background:var(--soft)!important;border:1px solid var(--bs-primary-border-subtle)!important;color:var(--bs-primary-emphasis)!important}
button.secondary:hover:not(:disabled),.btn-outline-primary:hover{background:var(--hover)!important}.btn:focus-visible,button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;box-shadow:none}
input,select,textarea{accent-color:var(--accent)}input:not([type=radio]):not([type=checkbox]),select{border-radius:12px!important;border:1px solid var(--line);background:var(--panel);color:var(--ink)}select{min-height:40px}
.account-menu{top:calc(100% - 4px);width:320px;padding:22px}.account-menu p{color:var(--muted)}.material-preferences>div{top:44px;width:300px;padding:22px;color:var(--ink)}.account-sync-panel p{font-size:12px;line-height:1.65}.account-sync-panel button{border-radius:12px!important;font-weight:600}.account-sync-panel>a{font-weight:600}
.course-nav,.sidebar{background:var(--sidebar)!important;color:var(--sidebar-ink)!important;border:0!important}.course-nav h1,.course-nav h2,.sidebar h1,.sidebar h2{font-family:'Fraunces',Georgia,serif;color:var(--sidebar-ink)!important;font-weight:500}.course-nav h3,.course-nav p,.course-nav .eyebrow,.course-nav label,.sidebar p,.sidebar .small,.sidebar .list-head,.sidebar .eyebrow,.sidebar .small,.sidebar .side-intro p,.course-nav a small{color:var(--sidebar-muted)!important}.course-nav a,.challenge-option{color:var(--sidebar-ink)!important;border-radius:14px!important}.course-nav a:hover,.challenge-option:hover{background:#ffffff0d!important;color:var(--sidebar-ink)!important}.course-nav a[aria-current=page],.challenge-option.selected{background:var(--selection)!important;color:var(--on-selection)!important;box-shadow:none!important}.course-nav a[aria-current=page] small,.challenge-option.selected small{color:var(--on-selection)!important;opacity:.85}.challenge-option small{color:var(--sidebar-muted)!important}.sidebar select,.course-nav select{background:#ffffff0a!important;color:var(--sidebar-ink)!important;border-color:#ffffff38!important}.sidebar select option,.course-nav select option{background:var(--sidebar);color:var(--sidebar-ink)}.stats,.study-layout .side-stats{background:#ffffff0a!important;color:var(--sidebar-ink)!important;border:1px solid #ffffff24;border-radius:14px}.menu-caret,.sidebar-toggle,.menu-toggle{color:var(--sidebar-muted)!important;background:transparent!important}.menu-caret:hover,.sidebar-toggle:hover{background:#ffffff10!important}
.study-layout>.study-content{padding:34px 28px 52px}.study-layout>.course-nav{padding:28px 18px!important}.study-layout>.course-nav h2{font-size:27px}.study-content>.lesson-heading h1{font-size:clamp(2rem,3vw,2.7rem)}.study-grid.lesson-grid{gap:12px}.study-panel-heading,.panel-heading{padding:19px 22px;background:transparent!important;border-color:var(--line);color:var(--ink)!important}.study-panel-heading h2,.panel-heading h2,.panel-heading h3{font-family:'DM Sans',sans-serif;font-size:14px;font-weight:650;color:var(--ink)!important;letter-spacing:0}.study-panel-heading>span{color:var(--muted)}.study-panel-content,.panel-content{padding:24px}.study-panel-content h2,.study-panel-content .markdown-body h2{font-family:'Fraunces',Georgia,serif;font-size:24px}.study-panel-content p,.study-panel-content li{font-size:15px;line-height:1.85}.study-panel-content h3{font-size:17px}.study-workspace>.editor-header,.editor-header,.workspace-head{background:var(--surface)!important;color:var(--ink)!important;border-color:var(--line)!important;padding:11px 16px;font-size:11px}.study-panel-heading button{padding:7px 12px;font-size:11px}.study-panel-content .unity-task{box-shadow:none}
.markdown-body code:not(pre code){background:var(--soft);color:var(--bs-primary-emphasis);border-radius:5px;padding:2px 5px}.markdown-body pre{background:var(--surface);border-color:var(--line);border-radius:14px;box-shadow:none}.markdown-body pre code{line-height:1.75}.markdown-body blockquote{color:var(--muted);border-color:var(--accent)}.markdown-body th{background:var(--surface)}.markdown-body th,.markdown-body td{border-color:var(--line)}
.CodeMirror,[data-bs-theme=dark] .CodeMirror{background:var(--editor);color:var(--ink);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;line-height:1.85}.CodeMirror-gutters,[data-bs-theme=dark] .CodeMirror-gutters{background:var(--editor-gutter);border-color:var(--line)}.CodeMirror-linenumber{color:var(--muted)}.CodeMirror-selected,.CodeMirror-focused .CodeMirror-selected{background:var(--selection)!important}.CodeMirror-cursor{border-left-color:var(--ink)}
:root[data-theme] .CodeMirror pre{background:transparent!important}:root[data-theme] .CodeMirror .CodeMirror-activeline-background{background:var(--surface)}
:root[data-theme] .terminal-pane,:root[data-theme] .csharp-terminal,:root[data-theme] .terminal-pane #output,:root[data-theme] #output,:root[data-theme] #csharp-output,:root[data-theme] #debug-output,:root[data-theme] .study-workspace #csharp-output,:root[data-theme] .study-workspace #mobile-output{background:var(--terminal)!important;color:var(--terminal-ink)!important}
:root[data-theme] .terminal-heading,:root[data-theme] .terminal-pane .editor-header,:root[data-theme] .terminal-pane .editor-header strong,:root[data-theme] .terminal-pane .editor-header span,:root[data-theme] #run-status,.console-heading,.console-resize{background:var(--surface)!important;color:var(--muted)!important;border-color:var(--line)!important}.terminal-heading strong,.console-heading strong{color:var(--ink)!important}.console-toggle,.console-clear{color:var(--ink)!important;background:transparent!important;border-radius:8px!important;box-shadow:none!important}.console-entry{border-color:var(--line)}
.study-resize-width,.resize-width{background:var(--soft);border-radius:100px}.study-resize-width::after,.resize-width::after{background:var(--accent);opacity:.6}.study-resize-height,.resize-height{background:var(--surface)}.study-resize-height::after,.resize-height::after{background:var(--muted);opacity:.65}.study-workspace .toolbar,.toolbar{padding:15px;gap:8px}.toolbar .btn,.toolbar button{font-size:11px;padding:8px 13px}.study-workspace>.h6{background:var(--surface);font-size:12px;color:var(--muted);border-color:var(--line)}
.question{background:transparent;box-shadow:none;border-color:var(--line);border-radius:0!important}.choice{padding:15px 17px;background:var(--panel);border:1px solid var(--line);border-radius:14px!important;box-shadow:none}.choice:hover{background:var(--surface)}.choice:has(input:checked){background:var(--soft);border-color:var(--accent)}.feedback,.submission{border-radius:14px}.quiz-feedback{background:var(--soft)}.quiz-feedback.correct{background:var(--bs-success-subtle);color:var(--bs-success-emphasis)}.quiz-feedback.incorrect{background:var(--bs-danger-subtle);color:var(--bs-danger-emphasis)}
:root[data-theme] pre.terminal-error,:root[data-theme] #output.terminal-error,:root[data-theme] #csharp-output.terminal-error,:root[data-theme] .study-workspace #csharp-output.terminal-error,.console-entry.console-error{background:var(--bs-danger-subtle)!important;color:var(--bs-danger-emphasis)!important}.console-entry.console-warn{background:var(--bs-warning-subtle);color:var(--bs-warning-emphasis)}
.progress-row{border-color:var(--line)}.teacher-toolbar{gap:12px;margin:26px 0}.teacher-table th{color:var(--muted);font-size:11px;letter-spacing:.04em}.teacher-table td,.teacher-table th{padding:17px 12px;border-color:var(--line)}.teacher-table tbody tr:hover{background:var(--surface)}.teacher-table .activity-badge{font-size:11px;padding:5px 10px}.activity-badge.active{background:var(--bs-success-subtle);color:var(--bs-success-emphasis);border-color:#5b9978}.activity-badge.viewing{background:var(--bs-warning-subtle);color:var(--bs-warning-emphasis);border-color:#a8853c}.activity-badge.unknown{color:var(--muted);background:var(--surface)}.teacher-table small,.progress-row small{color:var(--muted)}.class-membership{border-color:var(--line)}.classroom-columns input:not([type=checkbox]),.class-form input,.class-form select,.teacher-toolbar select{background:var(--panel)}
.submission-actions{border-color:var(--line);padding-top:16px;margin-top:6px}.submission-actions p{color:var(--muted);font-size:12px;line-height:1.75}.submission-actions .sign-in-alert{color:var(--bs-primary-emphasis);margin:12px 0}.submission-actions button+button{margin-left:8px}footer{color:var(--muted);border-color:var(--line)}
@media(max-width:1000px){.site-header{flex-wrap:wrap;gap:12px}.site-header nav{flex-wrap:wrap}.home-hero{padding:30px}.course-card .badge{position:static;align-self:flex-start;margin-top:12px}.course-card h2{margin-top:16px}}
@media(max-width:750px){main{padding:28px 18px 44px}.site-header,.top{padding:15px 18px!important}.site-header nav{gap:2px}.site-header nav>a,.top-right>a{font-size:12px;padding:8px 10px}.brand strong{font-size:21px}.home-hero{padding:26px 24px;border-radius:24px}.home-hero h1{font-size:2.6rem}.hero-meta{gap:10px}.course-grid{gap:16px}.panel,.unit-card,.course-card{padding:22px}.workspace,.study-instructions.panel,.study-workspace.panel{padding:0}.study-layout>.study-content{padding:26px 18px 42px}.study-panel-content,.panel-content{padding:20px}.study-layout>.course-nav{padding:22px 16px!important}.account-menu{right:16px;top:calc(100% - 1px)}.teacher-toolbar select{width:100%}.material-preferences>div{max-width:calc(100vw - 32px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* Python's examples and hints use the same surfaces in both appearances. */
:root[data-theme] .example,:root[data-theme] .lesson-note,:root[data-theme] .skills-content pre,:root[data-theme] #lesson-example{background:var(--surface);color:var(--ink);border-color:var(--line)}.example div,.unit-label,.summary-text,#mode-note{color:var(--muted)}.skills-content details{background:var(--panel);border-color:var(--line)}.skills-content td,.skills-content th{border-color:var(--line)}.lesson-badge{background:var(--bs-success-subtle);color:var(--bs-success-emphasis)}.sidebar .unit-label,.sidebar .bottom-note{color:var(--sidebar-muted)}.sidebar .bottom-note{border-color:#ffffff28}.sidebar a{color:var(--selection)}.sidebar a:hover{color:var(--sidebar-ink)}
/* Content panels own their padding; code selection stays readable in dark mode. */
:root[data-theme]{--code-selection:#e3d6f5}:root[data-theme=dark]{--code-selection:#473955}
.CodeMirror-selected,.CodeMirror-focused .CodeMirror-selected{background:var(--code-selection)!important}
.grid>.instructions.panel,.grid>.workspace.panel{padding:0}.panel-heading h3{white-space:nowrap}.panel-heading button{font-size:11px;padding:7px 12px}.workspace-actions #mode-note{font-size:9px;letter-spacing:.08em}