/* Focused learning: quiet surfaces, readable diagrams, explicit controls. */
.component-picker{grid-column:1/-1;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--line);font-size:.85rem}.component-picker label{display:flex;align-items:center;gap:10px;font-weight:700}.component-picker select{max-width:100%;min-height:44px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:8px}.component-picker span{color:var(--muted)}.component-explainer h4{font-size:1.35rem;margin:8px 0 16px}.component-explainer h5{font-size:.9rem;margin:20px 0 6px}.component-explainer button{min-height:44px;padding:8px 14px;background:var(--accentbg);color:var(--teal);border:1px solid var(--teal);border-radius:5px;cursor:pointer}.component-explainer[hidden]{display:none}.component-explainer{border-top:2px solid var(--line);margin-top:24px;padding-top:20px}.component-explainer:focus-visible{outline:2px solid var(--teal);outline-offset:7px}.component-index{display:block!important}.component-index li{margin:16px 0;padding-bottom:16px;border-bottom:1px solid var(--line)}.component-index p{max-width:70ch;font-size:.95rem}.course-sequence{display:flex;flex-wrap:wrap;gap:12px 32px;padding:14px 0 14px 22px;margin:20px 0 0;color:var(--muted);font-size:.85rem}.course-sequence li{padding-left:2px}.system-svg [data-component]{cursor:help}.system-svg [data-component]:focus-visible .component-box{stroke-width:3;stroke:var(--ink)}
:root{--bg:#101923;--surface:#172431;--surface2:#213241;--ink:#edf3f8;--muted:#b7c6d2;--line:#405362;--teal:#76d8c7;--orange:#f3bc71;--accentbg:#223f40;--danger:#ffada5;--display:Arial,Helvetica,sans-serif}
:root[data-theme=light]{--bg:#f6f8fa;--surface:#fff;--surface2:#edf2f6;--ink:#162b3c;--muted:#526575;--line:#cbd6df;--teal:#09695f;--orange:#92550e;--accentbg:#e5f3ef;--danger:#b0312b}
body{font-family:Arial,Helvetica,sans-serif;line-height:1.65}h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.025em}h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.12}h2{font-size:clamp(1.4rem,2.4vw,2rem)}
.site-header{background:var(--surface)}.head-inner{min-height:76px}.main-nav{font-size:.9rem}.page-intro{max-width:850px;padding-block:42px 30px}.page-intro p{max-width:65ch;font-size:1.1rem}
.study-catalog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.catalog-section{margin-bottom:48px}.study-card{display:flex;flex-direction:column;padding:24px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);text-decoration:none}.study-card:hover{border-color:var(--teal);box-shadow:0 4px 16px #142d4010}.study-card small{color:var(--muted);font-size:.8rem}.study-card h3{font-size:1.25rem;margin:14px 0 8px;line-height:1.35}.study-card p{font-size:.95rem;color:var(--muted);margin:0 0 24px}.study-card b{margin-top:auto;color:var(--teal);font-size:.9rem}
.study-breadcrumb{display:flex;justify-content:space-between;gap:20px;padding-top:24px;font-size:.9rem}.study-intro{max-width:900px;padding:28px 0 22px}.study-intro h1{font-size:clamp(1.7rem,3vw,2.6rem);margin:10px 0}.study-intro p{margin:0;color:var(--muted)}.study-workspace .system-heading{display:none}.study-next{max-width:760px;margin:32px 0 48px}.study-next h2{font-size:1.3rem}
.system-scene{border-radius:12px;background:var(--surface);grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr);overflow:hidden}.system-heading{padding:20px 24px}.system-heading h3{font-size:1.4rem}.system-choices{padding:16px 20px;gap:8px;background:var(--surface)}.system-choices button{border-radius:6px;padding:9px 13px;font-size:.9rem;min-height:44px}.system-player{padding:12px 20px;gap:8px;flex-wrap:wrap;background:var(--surface2)}.system-player button{font-size:.85rem;min-height:44px;border-radius:6px;padding:10px 14px}.system-auto{display:flex;align-items:center;gap:7px;font-size:.8rem}.system-auto input{width:17px;height:17px;accent-color:var(--teal)}.system-seek{flex-basis:100%;order:9;font-size:.8rem}.system-speed{font-size:.8rem;margin-left:auto}.system-speed select{padding:6px;min-height:36px}.system-roadmap{display:none}.system-stage{background:var(--surface);background-image:none;min-width:0;padding:20px 0 44px;display:flex;align-items:center;max-width:none!important;width:100%}.system-svg{width:100%;height:auto;max-height:370px}.system-caption{padding:24px;border-left:1px solid var(--line);background:var(--surface)}.system-caption strong{font-size:1.2rem}.system-caption p{font-size:1rem;line-height:1.65}.system-caption small{color:var(--teal);font-size:.75rem;font-weight:700;letter-spacing:.04em}.step-explanation{border-top:1px solid var(--line);margin-top:18px;padding-top:4px}.step-explanation h4{font-size:.85rem;margin:16px 0 4px;letter-spacing:0}.step-explanation p,.step-explanation li{font-size:.9rem}.step-explanation ul{list-style:none;padding:0;margin:8px 0}.step-explanation li{margin:8px 0}.step-explanation li span{display:block;color:var(--muted)}.step-explanation summary{font-size:.85rem;margin-top:16px;cursor:pointer}.system-details{padding:16px 24px}.system-note{padding:0 24px 16px}.system-payload{font-size:.75rem}.system-compact .system-caption{border-left:0}.component-box{rx:8px}.system-choices button[aria-pressed=true]{box-shadow:inset 0 -2px var(--teal)}
.collection-item,.lesson-card,.audience-card{border-radius:10px;background:var(--surface)}.prose{line-height:1.8}.prose p{max-width:72ch}
@media(max-width:1100px){.system-scene{grid-template-columns:minmax(0,1fr)}.system-caption{border-left:0;border-top:1px solid var(--line)}.system-stage{max-width:800px!important;justify-self:center}.study-catalog{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.study-catalog{grid-template-columns:1fr}.study-card{padding:20px}.study-breadcrumb{font-size:.8rem}.study-intro{padding-top:20px}.system-stage{padding:12px 0 36px}.system-svg{max-height:none}.system-caption{padding:18px}.system-player{padding:12px}.system-auto{grid-column:1/-1}.system-player .system-speed{grid-column:1/-1}.system-heading{padding:18px}.system-choices{padding:12px}.system-choices button{flex:1 1 auto}.study-intro p{font-size:.95rem}}
@media(min-width:1101px) and (max-width:1399px){.lesson-content .system-scene{grid-template-columns:1fr}.lesson-content .system-caption{border-left:0}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
/* A restrained classic reading treatment; dark mode remains user-selectable. */
.component-panel-actions{display:flex;gap:8px;float:right;margin-left:12px}.component-panel-actions button{min-width:40px;min-height:40px;padding:4px 10px;box-shadow:none}.component-panel-actions [data-component-x]{font-size:1.5rem;line-height:1}.component-panel-actions [aria-pressed=true]{background:var(--teal);color:var(--bg)}.system-scene>.component-explainer .component-panel-head{position:sticky;top:-20px;background:var(--surface);padding:8px 0;z-index:1}.course-footer-bottom [data-analytics-settings]{border:0;background:none;padding:0;min-height:32px;font:inherit;text-decoration:underline;text-underline-offset:3px;color:var(--muted);border-radius:0}.course-footer-bottom [data-analytics-settings]:hover{color:var(--teal)}
.component-explainer details{margin:12px 0}.component-explainer summary{cursor:pointer;font-size:.9rem;min-height:28px;line-height:1.6;color:var(--teal)}
.system-scene>.component-explainer{position:fixed;z-index:80;right:24px;bottom:24px;width:min(420px,calc(100vw - 32px));max-height:55vh;max-height:55dvh;overflow:auto;overscroll-behavior:contain;display:block!important;box-sizing:border-box;margin:0;padding:20px;border:1px solid var(--line);border-radius:12px;background:var(--surface);box-shadow:0 8px 36px #0003}.system-scene>.component-explainer[hidden]{display:none!important}.system-scene>.component-explainer header{margin:0 0 12px}.system-scene>.component-explainer h4{margin:4px 0;font-size:1.2rem}.system-scene>.component-explainer h5{margin:16px 0 4px}.system-scene>.component-explainer p{margin:6px 0;font-size:.95rem}.system-scene>.component-explainer>button{position:sticky;bottom:0;width:100%;margin-top:14px;background:var(--surface);box-shadow:0 -8px 10px var(--surface)}.system-svg .component-unused{opacity:1}.component-unused .component-box{stroke-dasharray:4 3}.system-stage{padding-block:16px 40px!important}.system-caption{padding:20px}.system-caption .step-explanation{margin-top:12px}.system-scene .system-choices{padding:12px 16px}.component-picker span{font-size:.8rem}.system-scene .component-picker{gap:8px 16px;padding:10px 16px}
@media(max-width:600px){.system-scene>.component-explainer{left:8px;right:8px;bottom:8px;width:auto;max-height:44vh;max-height:44dvh;border-radius:12px;padding:16px}.system-scene .system-player{gap:6px;padding:10px}.system-scene .system-player button{padding:8px;min-height:44px}.system-scene .system-speed{grid-column:auto!important;grid-row:auto}.system-scene .system-auto{grid-column:auto!important}.system-scene .system-seek{font-size:.75rem}.system-scene .component-picker label{display:flex;align-items:center;gap:8px;font-size:.8rem}.system-scene .component-picker select{flex:1;min-width:0;margin:0}.system-scene .component-picker span{margin-top:5px}.system-scene .system-payload{font-size:.65rem}.system-mobile .component-label{font-size:14px}.system-mobile .component-state{font-size:10px}}
.system-scene>.component-explainer{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 24px;margin:0;border-radius:0;padding:20px 24px;border-top:1px solid var(--line)}.system-scene>.component-explainer[hidden]{display:none}.component-explainer>header{grid-column:1/-1}.component-explainer>button{grid-column:1/-1;justify-self:start}.component-explainer h5{margin-top:0}.component-explainer p{font-size:.95rem;line-height:1.65}.system-stage{align-self:start;min-height:0}.system-caption{align-self:start}.system-scene .system-player{display:flex;flex-wrap:wrap}.system-scene .system-seek{flex:1 0 100%;width:100%;order:10;min-width:0}.analytics-choice{position:fixed;z-index:100;bottom:16px;left:16px;right:16px;max-width:660px;margin-inline:auto;padding:20px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 24px #0003}.analytics-choice[hidden]{display:none}.analytics-choice p{font-size:.9rem;margin:8px 0}.analytics-choice>div{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.analytics-choice button,[data-analytics-settings]{min-height:44px;padding:8px 12px;border:1px solid var(--teal);background:var(--surface);color:var(--teal);border-radius:4px;cursor:pointer}.analytics-choice [data-analytics-accept]{background:var(--teal);color:var(--bg)}
@media(max-width:760px){.system-scene>.component-explainer{grid-template-columns:1fr;padding:18px}.system-scene .system-player{display:grid!important}.system-scene .system-seek{width:100%;grid-column:1/-1}.analytics-choice{max-height:70vh;overflow:auto}}
.component-explainer{scroll-margin-top:90px}
.course-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:32px;padding-block:16px 32px}.course-footer-grid>*{min-width:0}.course-footer-grid h2{font-family:inherit;font-size:1rem;margin:0 0 14px}.course-footer-grid p{font-size:.9rem;max-width:40ch;color:var(--muted)}.course-footer-grid nav:not(.course-social),.course-footer-grid address{display:flex;flex-direction:column;gap:10px;font-size:.85rem;font-style:normal}.course-footer-grid a{overflow-wrap:anywhere}.course-social{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:.85rem;margin-top:18px}.course-footer-bottom{border-top:1px solid var(--line);padding:20px 0;display:flex;flex-wrap:wrap;gap:16px 30px;font-size:.8rem}.component-explainer{background:var(--surface2);padding:18px;border-radius:6px}.inspecting-component .system-caption{min-width:0}
@media(max-width:1000px){.course-footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.course-footer-grid{grid-template-columns:1fr;gap:28px}}
:root[data-theme=light]{--bg:#f6f3ec;--surface:#fffdf8;--surface2:#eeeae1;--ink:#28332f;--muted:#58635e;--line:#c9cec6;--teal:#235f50;--orange:#865014;--accentbg:#e4eee7;--danger:#a92d27}
.page-intro h1,.study-intro h1,.catalog-section>.section-head h2{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-.035em}.study-card{box-shadow:none;border-radius:6px}.component-picker{background:var(--surface)}
@media(max-width:600px){.component-picker{display:block;padding:12px}.component-picker label{display:block}.component-picker select{display:block;width:100%;margin-top:6px}.component-picker span{display:block;margin-top:8px}.course-sequence{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px}}