/* Spacious central path, with the same lesson flow as PA. */
:root { --bg:#10141f; --paper:#191f2e; --accent:#a995ff; --button:#7356d9; --line:#30394f; }
body { background:radial-gradient(ellipse at 50% 0,#24213c55,transparent 650px),var(--bg); }
.shell { max-width:1240px; padding:0 40px; }
.topbar { min-height:96px; }
.total { padding:12px 16px; width:185px; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
main { padding-top:42px; }
.hero { max-width:1000px; margin:0 auto 30px; gap:60px; }
.hero h1 { font-size:clamp(34px,4.2vw,52px); letter-spacing:-1.6px; line-height:1.14; }
.hero .lead { font-size:17px; line-height:1.8; }
.hero-visual { transform:none; box-shadow:0 20px 65px #0003; }
.chapter-heading,.toolbar,.course-shortcuts { max-width:840px; margin-left:auto; margin-right:auto; }
.course-shortcuts { display:flex; flex-wrap:wrap; gap:14px; margin-bottom:30px; }
.toolbar label { width:100%; }
.toolbar input { width:100%; padding:14px 18px; font-size:15px; }
.chapter-list { max-width:840px; margin:28px auto 0; gap:38px; }
.path-chapter { display:block; padding:0; border:0; border-radius:20px; background:transparent; box-shadow:none; }
.chapter-banner { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:24px; align-items:center; padding:28px; border:1px solid #45405f; border-radius:20px; background:linear-gradient(125deg,#31284c,#232b40); }
.chapter-banner h3 { font-size:23px; margin:4px 0 10px; line-height:1.3; }
.chapter-banner p { font-size:14px; line-height:1.7; max-width:530px; }
.chapter-banner small { font-size:12px; }
.chapter-number { width:64px; height:64px; border-radius:18px; background:#a995ff20; color:#cabdff; font-size:26px; border:1px solid #a995ff44; }
.path-chapter .eyebrow { font-size:10px; letter-spacing:2px; }
.path-chapter progress { width:190px; height:6px; }
.chapter-banner .button { padding:12px 20px; }
.current-chapter .chapter-banner { border-color:#9e86ed; box-shadow:0 0 0 4px #9e86ed0c; }
.path-chapter details { width:100%; margin:0; padding:0; border:0; }
.path-chapter summary { font-size:14px; padding:20px 28px; color:var(--muted); }
.path-chapter summary span { float:right; font-size:12px; }
.unit-path { padding:16px 30px 40px; gap:32px; }
.unit-divider { margin:14px 0 4px; padding:28px 0 8px; border-top:1px dashed #3c4356; }
.unit-divider span { font-size:11px; letter-spacing:2.5px; }
.unit-divider strong { display:block; font-size:17px; margin-top:9px; }
.path-node { width:520px; max-width:calc(100% - 80px); gap:26px; min-height:114px; padding:14px 0; isolation:isolate; }
.path-node:nth-of-type(4n+1) { transform:translateX(-42px); }
.path-node:nth-of-type(4n+2),.path-node:nth-of-type(4n) { transform:none; }
.path-node:nth-of-type(4n+3) { transform:translateX(42px); }
.node-bubble { width:84px; height:80px; font-size:28px; border-width:3px; box-shadow:0 8px 0 #151c2b; }
.path-current .node-bubble { box-shadow:0 8px 0 #493686; outline-offset:8px; }
.path-done .node-bubble { box-shadow:0 8px 0 #143626; }
.node-label { font-size:18px; line-height:1.5; font-weight:650; }
.node-label small { font-size:12px; margin-top:8px; line-height:1.6; }
.start-tag { left:42px; top:-10px; transform:translateX(-50%); font-size:9px; padding:5px 10px; border:1px solid #c6b7ff; border-radius:7px; }
.path-node:active .node-bubble { transform:translateY(4px); box-shadow:0 4px 0 #151c2b; }
.player { max-width:980px; margin:28px auto 0; }
.player:has(.workspace-grid) { max-width:none; }
.screen { margin:auto; width:100%; padding:34px 40px; }
.screen h2 { font-size:30px; line-height:1.35; }
.screen p,.concept-points { font-size:17px; line-height:1.85; }
.concept-points:empty { display:none; }
.required-text { display:inline; padding:3px 7px; border-radius:5px; background:#302941; color:#dccbff; font:600 .94em Consolas,monospace; overflow-wrap:anywhere; }
.screen .required-text { background:#302941; color:#dccbff; }
.player-controls { padding:24px 40px; }
.player-controls .primary { min-width:180px; font-size:15px; }
.quiz-option { padding:20px 22px; font-size:16px; gap:18px; border-radius:14px; }
.quiz-option .letter { width:34px; height:34px; font-size:14px; }
.workspace-grid { gap:24px; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:stretch; }
.workspace-grid > .editor-card,.workspace-grid > .preview-card { display:flex; flex-direction:column; min-width:0; }
.workspace-grid .editor-wrap { flex:1; }
.workspace-grid .preview-card { background:#000; color:#fff; }
.workspace-grid .preview-viewport { flex:1; display:flex; background:#000; min-height:290px; }
.workspace-grid .preview-viewport iframe { flex:1; height:auto; min-height:270px; background:#000; }
.workspace-grid .test-output { color:#fff; }
.editor-header { padding:14px 18px; font-size:13px; }
.editor-header span:last-child { font-size:12px; }
.editor-actions { padding:15px; gap:12px; }
.editor-actions button { font-size:14px; padding:11px 16px; }
.editor-help { font-size:12px; line-height:1.7; }
.preview-header,.test-output { font-size:13px; }
.help-details { padding:18px 0; font-size:15px; }
.feedback { font-size:15px; line-height:1.7; }
.tools { max-width:840px; margin:36px auto 0; }
.source-search { display:grid; gap:10px; margin:28px 0; }
.source-item { padding:20px; margin:16px 0; border:1px solid var(--line); border-radius:14px; background:var(--paper); }
.source-item summary { font-size:16px; font-weight:650; }
.source-original { background:var(--code); padding:20px; border-radius:10px; font:14px/1.8 Consolas,monospace; max-height:620px; overflow:auto; }
.source-lesson-links { display:flex; flex-wrap:wrap; gap:10px; }
.exercise-help { display:block; width:100%; min-width:0; max-width:100%; margin:18px 0 8px; }
.help-buttons { display:flex; gap:24px; }
.help-buttons button { border:0; padding:8px 0; background:none; color:var(--accent); font-family:inherit; font-size:14px; font-weight:600; }
.help-buttons button::before { content:"▸ "; }
.help-buttons button[aria-expanded="true"]::before { content:"▾ "; }
.help-content { width:100%; max-width:100%; min-width:0; overflow-wrap:anywhere; }
.help-content pre { max-width:100%; overflow-x:auto; }
.exercise-data { margin:20px 0; font-size:14px; }
.exercise-data h3 { font-size:15px; margin-bottom:10px; }
.exercise-data summary { color:var(--muted); cursor:pointer; font-size:14px; }
.exercise-data pre.code { font-size:13px; padding:16px; margin:10px 0; }
.exercise-requirements { padding-left:22px; font-size:15px; line-height:1.8; }
.exercise-requirements li { margin:6px 0; }
.example-data-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.example-data-grid>div { min-width:0; }
.example-data-grid small { color:var(--muted); }
.source-figure { margin:20px 0; padding:16px; background:white; border-radius:12px; color:#333; }
.source-figure img { display:block; max-width:100%; height:auto; margin:auto; }
.source-figure figcaption { font-size:11px; color:#666; margin-top:10px; }
@media(max-width:850px) {
 .shell { padding:0 24px; }
 .chapter-banner { grid-template-columns:56px minmax(0,1fr); gap:18px; }
 .chapter-number { width:56px; height:56px; }
 .chapter-banner .button { grid-column:2; justify-self:start; }
 .workspace-grid { grid-template-columns:1fr; }
 .hero { gap:24px; }
 .screen,.player-controls { padding:26px; }
}
@media(max-width:600px) {
 .shell { padding:0 16px; }
 .topbar { min-height:88px; }
 .total { width:140px; padding:10px; }
 .hero h1 { font-size:36px; }
 .hero .lead { font-size:16px; }
 .chapter-heading { gap:12px; margin-top:30px; }
 .chapter-heading h2 { font-size:23px; }
 .chapter-heading>span { font-size:12px; }
 .chapter-banner { padding:22px 18px; grid-template-columns:48px minmax(0,1fr); gap:16px; border-radius:17px; }
 .chapter-number { width:48px; height:48px; font-size:22px; border-radius:14px; }
 .chapter-banner h3 { font-size:20px; }
 .chapter-banner p { font-size:13px; }
 .path-chapter summary { padding:19px 12px; font-size:13px; }
 .unit-path { padding:8px 12px 26px; gap:30px; }
 .unit-divider { padding-top:22px; }
 .unit-divider strong { font-size:15px; }
 .path-node { width:100%; max-width:100%; gap:20px; min-height:102px; padding:12px 4px; }
 .path-node:nth-of-type(n) { transform:none; }
 .path-node:nth-of-type(even) { padding-left:20px; }
 .node-bubble { width:70px; height:66px; font-size:24px; flex-shrink:0; }
 .node-label { font-size:16px; }
 .node-label small { font-size:11px; line-height:1.6; }
 .start-tag { left:39px; top:-11px; font-size:8px; }
 .screen { padding:24px 18px; }
 .screen h2 { font-size:26px; }
 .screen p,.concept-points { font-size:16px; }
 .player-head { padding:22px 18px; }
 .player-controls { padding:22px 18px; }
 .player-controls .primary { min-width:0; font-size:14px; }
 .quiz-option { padding:16px; font-size:15px; }
 .course-shortcuts .secondary { font-size:12px; }
}