/* Optional visual layers. Without data-theme the original site is unchanged. */
/* Theme controls live in Settings on the trainer and reading pages. */
.theme-setting { margin:24px 0; padding-bottom:24px; border-bottom:1px solid var(--line); }
.theme-setting h3 { margin:0 0 12px; color:var(--ink,#e4e6e8); font-size:14px; }
.site-theme-picker { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.site-theme-picker button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; cursor:pointer; border:1px solid var(--line,#343d43); border-radius:6px; padding:10px 8px; background:transparent; color:var(--muted,#a1aab3); font:12px/1.4 'DM Sans',sans-serif; }
.site-theme-picker button i { width:10px; height:10px; flex-shrink:0; border-radius:50%; background:#c4dfa0; box-shadow:0 0 0 1px #8885; }
.site-theme-picker [data-theme-choice='edition'] i { background:#d8c9ac; }
.site-theme-picker [data-theme-choice='index'] i { background:#7f9dbf; }
.site-theme-picker [data-theme-choice='studio'] i { background:#baa6dc; }
.site-theme-picker button[aria-pressed='true'] { border-color:var(--accent,#c4dfa0); color:var(--ink,#e4e6e8); background:var(--accent-dark,#1f291d); }
.site-theme-picker button:focus-visible { outline:2px solid var(--accent,#c4dfa0); outline-offset:3px; }
@media(max-width:520px) { .site-theme-picker { grid-template-columns:repeat(2,minmax(0,1fr)); } }

:is(html[data-theme='edition'],:host([data-theme='edition'])) {
 --paper:#f3efe6; --panel:#fbf9f3; --ink:#2d322c; --quiet:#686d60; --rule:#d2cdbc; --brand:#536447; --wash:#e8e7d9; --display:Georgia,'Times New Roman',serif; --body:'DM Sans',Arial,sans-serif; --radius:2px; --on-brand:#fffdf8; color-scheme:light;
}
:is(html[data-theme='index'],:host([data-theme='index'])) {
 --paper:#152133; --panel:#1c2b40; --ink:#e8eef6; --quiet:#a6b5ca; --rule:#32445d; --brand:#a4bfdf; --wash:#293e58; --display:Arial,Helvetica,sans-serif; --body:Arial,Helvetica,sans-serif; --radius:6px; --on-brand:#152133; color-scheme:dark;
}
:is(html[data-theme='studio'],:host([data-theme='studio'])) {
 --paper:#17171b; --panel:#232329; --ink:#efedf4; --quiet:#aaa5b6; --rule:#39363f; --brand:#c7b6e9; --wash:#312b3f; --display:'DM Sans',Arial,sans-serif; --body:'DM Sans',Arial,sans-serif; --radius:16px; --on-brand:#241d33; color-scheme:dark;
}
:is(html[data-theme],:host([data-theme])) {
 --bg:var(--paper); --surface:var(--panel); --line:var(--rule); --muted:var(--quiet); --subtle:var(--quiet); --accent:var(--brand); --accent-dark:var(--wash);
 background:var(--paper); color:var(--ink); font-family:var(--body);
}
html[data-theme] body { background:var(--paper); color:var(--ink); }
html[data-theme] ::selection { background:var(--wash); color:var(--ink); }
html[data-theme] a { color:var(--brand); }
html[data-theme] a:hover { color:var(--ink); }
html[data-theme] :is(h1,h2,h3,h4,strong,dt) { color:var(--ink); }
html[data-theme] :is(main:not(.training-main) p,main:not(.training-main) dd,main:not(.training-main) li) { color:var(--quiet); }
html[data-theme] :is(.eyebrow,.path-number,.step-number) { color:var(--brand); }
html[data-theme] :is(.section-heading,.path-card,.path-context,.path-lessons li,.lesson-layout,.lesson-next,.worked-step,.reading-layout,section) { border-color:var(--rule); }
html[data-theme] :is(.guide-crumbs,.path-level,.path-status,.lesson-meta,.lesson-state,.lesson-order,.lesson-board figcaption,.lesson-index a,.reading-index a,.foundation-sources,.guide-utilities,.guide-subtitle) { color:var(--quiet); }
html[data-theme] :is(.entry-card,.guide-featured,.lesson-ready,.lesson-drill,.lesson-callout,.guide-concept figure,.modes > div,.contents,.closing,.term-card,.glossary-card,.term-definition,.term-example) { background:var(--panel); border-color:var(--rule); border-radius:var(--radius); }
html[data-theme] :is(.entry-card:hover,.path-card:hover,.lesson-ready,.lesson-callout,.guide-concept .example-flow li,.spin-table thead th) { background:var(--wash); }
html[data-theme] :is(.entry-card h3,.path-card h3,.lesson-outcome,.lesson-definitions dt,.spin-table thead th) { color:var(--ink); }
html[data-theme] :is(.entry-card > span,.lesson-ready .lesson-state,.lesson-outcome span,.drill-settings span,.path-arrow,.lesson-index a:hover) { color:var(--brand); }
html[data-theme] :is(.lesson-outcome,.lesson-terms a,.drill-settings span,.guide-concept .demo-controls,.spin-table td,.spin-table th) { border-color:var(--rule); }
html[data-theme] :is(.guide-concept figcaption,.guide-concept .diagram-caption,.guide-concept .example-label,.guide-concept .step-count,.lesson-definitions dd,.lesson-drill .drill-note) { color:var(--quiet); }
html[data-theme] .feature-motif i { background:var(--brand); }
html[data-theme] .feature-motif .air-cell { background:var(--wash); }
html[data-theme] .feature-motif .well-cell { background:var(--paper); border-color:var(--quiet); }
html[data-theme] :is(.button,.primary-button,.guide-concept .demo button) { background:var(--brand); color:var(--on-brand); border-color:var(--brand); border-radius:var(--radius); box-shadow:none; }
html[data-theme] :is(.button,.primary-button,.guide-concept .demo button):hover { background:var(--ink); color:var(--paper); }
html[data-theme] .site-header-bar { background:var(--paper); color:var(--ink); border-color:var(--rule); font-family:var(--body); }
html[data-theme] .site-header-bar .shell-brand { color:var(--ink); font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
html[data-theme] .shell-brand small { color:var(--quiet); }
html[data-theme] .shell-mark i { background:var(--brand); }
html[data-theme] .shell-mark i:nth-child(4) { opacity:.6; }
html[data-theme] .site-header-bar .shell-nav > * { color:var(--quiet); }
html[data-theme] .site-header-bar .shell-nav > [aria-current='page'] { color:var(--ink); border-color:var(--brand); }
html[data-theme] .site-header-bar .shell-switch { color:var(--ink); background:var(--panel); border-color:var(--rule); border-radius:var(--radius); }
html[data-theme] .site-header-bar .shell-icon { color:var(--quiet); }
html[data-theme] .site-header-bar .shell-icon:hover { background:var(--wash); border-color:var(--rule); color:var(--ink); }
html[data-theme] .site-footer { background:var(--paper); color:var(--quiet); border-color:var(--rule); }
html[data-theme] .site-footer .site-footer-links > * { color:var(--quiet); }
html[data-theme] .site-footer .site-footer-links > :hover { color:var(--brand); }
html[data-theme] .site-theme-picker button { color:var(--quiet); }
html[data-theme] .site-theme-picker button[aria-pressed='true'] { background:var(--wash); color:var(--ink); border-color:var(--rule); }
/* The playfield and piece colours stay intact. These are the surrounding controls. */
:is(html[data-theme],:host([data-theme])) :is(.style-card,.feedback-card,.session-card,.coach-playback,.phase-indicator,.objective-card,.settings-dialog,.history-dialog,.footer-dialog,.opener-card,.opener-detail,.opener-panel) { color:var(--ink); background:var(--panel); border-color:var(--rule); border-radius:var(--radius); box-shadow:none; }
:is(html[data-theme],:host([data-theme])) :is(.style-card.chosen,.objective-card,.phase-indicator,.mode-toggle button.on,.nav-item.active,.nav-item.selected) { background:var(--wash); border-color:var(--brand); color:var(--ink); }
:is(html[data-theme],:host([data-theme])) :is(.style-card small,.page-heading p,.game-code,.coach-playback label,.coach-playback small,.coach-playback .coach-speed-note,.coach-heading > div > span,.objective-card p,.objective-bottom,.feedback-card p,.phase-name,.section-label,.phase-direction,.dialog-inner h3 span,.muted,.module-picker,.keyboard-guide,.board-stats span,.session-status,.board-coordinate) { color:var(--quiet); }
:is(html[data-theme],:host([data-theme])) :is(.style-title,.coach-heading h2,.objective-card h3,.mode-title,.board-stats strong,.quality-number,.session-numbers b,.dialog-header h2,.dialog-inner h3,.feedback-title) { color:var(--ink); }
:is(html[data-theme],:host([data-theme])) :is(select,input:not([type='range']),textarea,kbd,.icon-button,.secondary-button,.key-bind,.key-button,.mode-toggle,.coach-avatar) { background:var(--panel); color:var(--ink); border-color:var(--rule); border-radius:var(--radius); }
:is(html[data-theme],:host([data-theme])) :is(.primary-button,.coach-play-button) { background:var(--brand); color:var(--on-brand); border-color:var(--brand); border-radius:var(--radius); }
:is(html[data-theme],:host([data-theme])) button:hover:not(:disabled) { color:var(--brand); }
:is(html[data-theme],:host([data-theme])) :is(.primary-button,.coach-play-button):hover:not(:disabled) { color:var(--on-brand); filter:brightness(.95); }
:is(html[data-theme],:host([data-theme])) .text-button { color:var(--brand); }
html[data-theme] .well-diagram i { background:var(--brand); border-top-color:var(--brand); opacity:.7; }
html[data-theme] .well-diagram i.well { background:transparent; border-color:var(--brand); }
html[data-theme] .board-overlay { color:#eee; }
html[data-theme] .board-overlay :is(p,.overlay-title) { color:#eee; }

/* 01 / EDITION — a quiet, typeset field manual. */
html[data-theme='edition'] .site-header-bar { height:94px; padding-inline:48px; }
html[data-theme='edition'] .site-header-bar .shell-nav { justify-content:center; margin-right:0; gap:18px; }
@media(min-width:1000px) {
 html[data-theme='edition'] .site-header-bar { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); }
 html[data-theme='edition'] .site-header-bar .shell-brand { justify-self:start; }
 html[data-theme='edition'] .site-header-bar .shell-actions { justify-self:end; }
}
html[data-theme='edition'] .site-header-bar .shell-nav > * { font-size:12px; padding:9px 0; }
html[data-theme='edition'] .guides-page { max-width:1220px; width:calc(100% - 96px); padding-top:60px; }
html[data-theme='edition'] .guides-hero { display:grid; grid-template-columns:1.35fr 1fr; column-gap:70px; max-width:none; padding-bottom:52px; border-bottom:1px solid var(--ink); }
html[data-theme='edition'] .guides-hero .eyebrow { grid-column:1/-1; letter-spacing:2px; font-size:10px; margin:0 0 28px; }
html[data-theme='edition'] .guides-hero h1 { grid-column:1; grid-row:2/4; font:normal clamp(64px,6.5vw,94px)/.98 var(--display); letter-spacing:-5px; max-width:520px; margin:0; }
html[data-theme='edition'] .guides-hero .guides-lede { font:normal 24px/1.45 var(--display); color:var(--ink); letter-spacing:-.4px; margin:0 0 18px; }
html[data-theme='edition'] .guides-hero .guides-summary { font-size:13px; line-height:1.85; max-width:340px; margin:0; }
html[data-theme='edition'] :is(.section-heading h2,.guide-featured h2,.lesson-body h2,.path-context h2,.reading-sections h2) { font-family:var(--display); font-weight:400; letter-spacing:-.7px; }
html[data-theme='edition'] .section-heading h2 { font-size:30px; }
html[data-theme='edition'] .guides-page .guide-entry { padding-top:36px; }
html[data-theme='edition'] .entry-grid { gap:16px; border:0; counter-reset:entries; }
html[data-theme='edition'] .guides-page .entry-card { counter-increment:entries; position:relative; background:var(--panel); border:1px solid var(--rule); padding:28px; border-radius:var(--radius); min-width:0; }
html[data-theme='edition'] .entry-card:before { content:'0' counter(entries); font:italic 15px var(--display); color:var(--brand); margin-bottom:26px; }
html[data-theme='edition'] .entry-card h3 { font:normal 24px/1.2 var(--display); max-width:260px; }
html[data-theme='edition'] .entry-card p { font-size:13px; max-width:280px; }
html[data-theme='edition'] .entry-card > span { font-size:11px; }
html[data-theme='edition'] .path-grid { grid-template-columns:1fr; }
html[data-theme='edition'] .path-card { grid-template-columns:44px 1fr 24px; padding:24px 20px; }
html[data-theme='edition'] .path-card > div { display:grid; grid-template-columns:1fr 1fr; align-items:baseline; column-gap:36px; }
html[data-theme='edition'] .path-level { grid-column:1; text-transform:uppercase; font-size:9px; letter-spacing:1.2px; }
html[data-theme='edition'] .path-card h3 { grid-column:1; font:normal 28px var(--display); margin:7px 0 0; }
html[data-theme='edition'] .path-card p { grid-column:2; grid-row:2; margin:0; }
html[data-theme='edition'] .path-status { grid-column:2; grid-row:1; }
html[data-theme='edition'] .path-number { font:italic 24px var(--display); }
html[data-theme='edition'] .guides-page .guide-featured { border:1px solid var(--rule); background:var(--panel); padding:32px; }
html[data-theme='edition'] .lesson-hero h1 { font-family:var(--display); font-weight:400; letter-spacing:-2px; }
html[data-theme='edition'] .lesson-body { max-width:750px; }
html[data-theme='edition'] .lesson-body > section > p { font-family:var(--display); font-size:19px; line-height:1.85; color:var(--ink); }
html[data-theme='edition'] .workspace { grid-template-columns:192px minmax(440px,1fr) 280px; padding:36px 40px; gap:28px; }
html[data-theme='edition'] .style-card { border-radius:0; padding:15px 10px; border-bottom:1px solid var(--rule); }
html[data-theme='edition'] .style-card.chosen { border:0; border-left:3px solid var(--brand); }
html[data-theme='edition'] .mode-title { font:normal 36px/1.1 var(--display); }
html[data-theme='edition'] .coach-sidebar { border-left:1px solid var(--rule); padding-left:24px; }
html[data-theme='edition'] .coach-heading h2 { font:normal 22px var(--display); }
html[data-theme='edition'] .coach-sidebar .coach-playback { min-width:0; border:1px solid var(--rule); padding:16px; background:var(--panel); }
html[data-theme='edition'] .coach-playback-controls { flex-wrap:wrap; gap:12px 8px; }
html[data-theme='edition'] .coach-playback-controls > label { margin-left:auto; flex-shrink:0; }
html[data-theme='edition'] .coach-play-button { flex-shrink:0; white-space:nowrap; }

/* 02 / INDEX — a matte navy workspace with restrained blue accents. */
html[data-theme='index'] .site-header-bar { height:76px; border-bottom:1px solid var(--rule); padding-inline:40px; max-width:none; }
html[data-theme='index'] .site-header-bar .shell-nav { gap:0; }
html[data-theme='index'] .site-header-bar .shell-nav > * { padding:12px 18px; text-transform:uppercase; font-size:10px; letter-spacing:1px; font-weight:700; border:0; }
html[data-theme='index'] .site-header-bar .shell-nav > [aria-current='page'] { background:var(--wash); color:var(--ink); }
html[data-theme='index'] .guides-page { width:calc(100% - 80px); max-width:1360px; padding-top:36px; }
html[data-theme='index'] .guides-hero { max-width:none; display:grid; grid-template-columns:1fr 1fr; gap:0 48px; padding:0 0 40px; border-bottom:1px solid var(--rule); }
html[data-theme='index'] .guides-hero .eyebrow { grid-column:1/-1; margin:0 0 22px; font-size:10px; }
html[data-theme='index'] .guides-hero h1 { grid-column:1/-1; font:800 clamp(65px,9vw,136px)/.95 var(--display); letter-spacing:-.075em; margin:0 0 32px; color:var(--brand); }
html[data-theme='index'] .guides-lede { margin:0; font-size:20px; font-weight:700; color:var(--ink); }
html[data-theme='index'] .guides-summary { max-width:430px; font-size:14px; margin:0; }
html[data-theme='index'] .section-heading h2 { font-size:17px; font-weight:750; letter-spacing:-.5px; }
html[data-theme='index'] .section-heading > p { font-size:12px; }
html[data-theme='index'] .entry-grid { gap:0; border:1px solid var(--rule); counter-reset:index; }
html[data-theme='index'] .entry-card { counter-increment:index; border:0; border-right:1px solid var(--rule); padding:24px; min-height:230px; position:relative; }
html[data-theme='index'] .entry-card:last-child { border:0; }
html[data-theme='index'] .entry-card:before { content:'0' counter(index) ' /'; color:var(--brand); font:700 12px var(--mono,monospace); margin-bottom:26px; }
html[data-theme='index'] .entry-card h3 { font-weight:750; font-size:24px; max-width:260px; letter-spacing:-1px; }
html[data-theme='index'] .entry-card > span { font-size:11px; text-transform:uppercase; letter-spacing:.5px; }
html[data-theme='index'] .path-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border-top:1px solid var(--rule); border-left:1px solid var(--rule); }
html[data-theme='index'] .path-card { display:flex; flex-wrap:wrap; align-content:space-between; gap:24px; padding:24px; min-height:240px; border-right:1px solid var(--rule); }
html[data-theme='index'] .path-number { font:700 42px/1 var(--display); letter-spacing:-2px; }
html[data-theme='index'] .path-arrow { margin-left:auto; order:0; align-self:flex-start; font-size:24px; }
html[data-theme='index'] .path-card > div { width:100%; order:1; }
html[data-theme='index'] .path-card h3 { font-size:23px; font-weight:750; }
html[data-theme='index'] .guides-page .guide-featured { background:var(--wash); border:1px solid var(--rule); padding:40px; }
html[data-theme='index'] .guide-featured :is(h2,p,a,.eyebrow) { color:white; }
html[data-theme='index'] .guide-featured .button { background:var(--brand); color:var(--on-brand); }
html[data-theme='index'] .guide-featured .feature-motif i { background:white; }
html[data-theme='index'] .guide-featured .feature-motif .air-cell { opacity:.2; }
html[data-theme='index'] .lesson-hero h1 { font-weight:800; letter-spacing:-.06em; color:var(--brand); }
html[data-theme='index'] .lesson-index { border-top:4px solid var(--brand); }
html[data-theme='index'] .workspace { gap:0; padding:0; grid-template-columns:190px minmax(440px,1fr) 300px; }
html[data-theme='index'] .sidebar { padding:28px 16px; }
html[data-theme='index'] .training-main { padding:28px 32px; }
html[data-theme='index'] .coach-sidebar { padding:28px 22px; border-left:1px solid var(--rule); background:var(--paper); }
html[data-theme='index'] .style-card { padding:15px 10px; border-bottom:1px solid var(--rule); }
html[data-theme='index'] .style-card.chosen { background:var(--brand); color:white; border-color:var(--brand); }
html[data-theme='index'] .style-card.chosen :is(.style-title,small) { color:white; }
html[data-theme='index'] .style-card.chosen .well-diagram i { background:white; border-color:white; }
html[data-theme='index'] .style-card.chosen .well-diagram i.well { background:transparent; }
html[data-theme='index'] .mode-title { font:800 38px/1 var(--display); letter-spacing:-2px; }
html[data-theme='index'] .coach-playback { border:1px solid var(--rule); padding:18px; }
html[data-theme='index'] .phase-indicator { border:0; border-left:4px solid var(--brand); }

/* 03 / STUDIO — a spacious, dark workspace with a vertical reading navigation. */
html[data-theme='studio'] .site-header-bar { height:88px; padding-inline:36px; background:var(--paper); border:0; }
html[data-theme='studio'] .site-header-bar .shell-nav { gap:5px; }
html[data-theme='studio'] .site-header-bar .shell-nav > * { padding:11px 16px; border:0; border-radius:30px; }
html[data-theme='studio'] .site-header-bar .shell-nav > [aria-current='page'] { background:var(--wash); color:var(--brand); }
html[data-theme='studio'] .site-header-bar .shell-switch { border-radius:24px; }
html[data-theme='studio'] .guides-page { width:calc(100% - 80px); max-width:1120px; padding-top:48px; }
html[data-theme='studio'] .guides-hero { padding-bottom:40px; max-width:none; }
html[data-theme='studio'] .guides-hero .eyebrow { font:500 10px var(--body); letter-spacing:2px; margin-bottom:30px; }
html[data-theme='studio'] .guides-hero h1 { font:500 clamp(64px,7vw,100px)/1.05 var(--display); letter-spacing:-6px; margin:0 0 25px; }
html[data-theme='studio'] .guides-lede { font-size:24px; color:var(--ink); letter-spacing:-.6px; }
html[data-theme='studio'] .guides-summary { max-width:490px; font-size:14px; }
html[data-theme='studio'] .section-heading h2 { font-size:21px; font-weight:500; }
html[data-theme='studio'] .entry-grid { grid-template-columns:1.25fr 1fr 1fr; gap:14px; }
html[data-theme='studio'] .entry-card { padding:28px; border:0; border-radius:20px; min-height:230px; }
html[data-theme='studio'] .entry-card:first-child { background:var(--brand); }
html[data-theme='studio'] .entry-card:first-child :is(h3,p,span) { color:#2b213d; }
html[data-theme='studio'] .entry-card h3 { font-size:23px; font-weight:500; letter-spacing:-.8px; }
html[data-theme='studio'] .entry-card p { font-size:13px; line-height:1.75; }
html[data-theme='studio'] .entry-card > span { font-size:11px; }
html[data-theme='studio'] .entry-card > span b { display:grid; place-items:center; border:1px solid currentColor; border-radius:50%; width:28px; height:28px; flex-shrink:0; }
html[data-theme='studio'] .path-grid { gap:12px; }
html[data-theme='studio'] .path-card { background:var(--panel); border:0; border-radius:16px; padding:24px; grid-template-columns:34px 1fr 20px; }
html[data-theme='studio'] .path-number { background:var(--wash); border-radius:50%; display:grid; place-items:center; width:32px; height:32px; padding:0; font-size:10px; }
html[data-theme='studio'] .path-card h3 { font-size:23px; font-weight:500; }
html[data-theme='studio'] .path-card p { font-size:13px; }
html[data-theme='studio'] .guides-page .guide-featured { border:0; border-radius:24px; padding:40px; }
html[data-theme='studio'] .lesson-hero h1 { font-weight:500; letter-spacing:-3px; }
html[data-theme='studio'] .lesson-index { padding:24px; background:var(--panel); border-radius:16px; margin-top:24px; }
html[data-theme='studio'] .workspace { padding:12px 28px 28px; gap:24px; grid-template-columns:180px minmax(440px,1fr) 290px; }
html[data-theme='studio'] .sidebar { border:0; padding-right:0; gap:4px; }
html[data-theme='studio'] .style-card { padding:16px; }
html[data-theme='studio'] .style-card.chosen { border-color:transparent; }
html[data-theme='studio'] .training-main { background:var(--panel); border-radius:24px; padding:26px; }
html[data-theme='studio'] .mode-title { font:500 34px/1.1 var(--display); letter-spacing:-1.5px; }
html[data-theme='studio'] .coach-sidebar { padding:20px 0; }
html[data-theme='studio'] .coach-playback { padding:20px; }
@media(min-width:1150px) {
 html[data-theme='studio']:has(#learning-shell) #learning-shell .site-header-bar { position:fixed; top:0; left:0; bottom:0; height:100vh; width:272px; padding:40px 22px; flex-direction:column; align-items:stretch; border-right:1px solid var(--rule); gap:48px; z-index:5; }
 html[data-theme='studio']:has(#learning-shell) .site-header-bar .shell-nav { flex-direction:column; justify-content:flex-start; align-items:stretch; gap:10px; }
 html[data-theme='studio']:has(#learning-shell) .site-header-bar .shell-nav > * { text-align:left; border-radius:12px; padding:15px; }
 html[data-theme='studio']:has(#learning-shell) .shell-actions { flex-wrap:wrap; gap:15px; }
 html[data-theme='studio']:has(#learning-shell) .shell-switch { flex-basis:100%; }
 html[data-theme='studio']:has(#learning-shell) body { padding-left:272px; }
 html[data-theme='studio']:has(#learning-shell) .guides-page { width:calc(100% - 88px); padding-top:58px; }
 html[data-theme='studio']:has(#learning-shell) .site-footer { padding-inline:28px; }
}
@media(max-width:1149px) {
 html[data-theme] .site-header-bar { padding-inline:24px; }
 html[data-theme='edition'] .site-header-bar .shell-nav { margin-right:0; gap:10px; }
 /* Hide the mode rail together with its grid track. Keeping the rail's track
    after the base stylesheet hides it squeezes the game into that 170px slot. */
 html[data-theme] .workspace { grid-template-columns:minmax(0,1fr) 265px; gap:20px; padding:24px; }
 html[data-theme] .workspace > .sidebar { display:none; }
 html[data-theme] .training-main { padding:0; min-width:0; }
 html[data-theme] .coach-sidebar { grid-column:auto; min-width:0; padding:0; border-left:0; }
 html[data-theme='studio'] .entry-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:900px) {
 html[data-theme] .workspace { grid-template-columns:minmax(0,1fr); gap:28px; }
 html[data-theme] .training-main { width:100%; max-width:580px; margin-inline:auto; }
 html[data-theme] .coach-sidebar { grid-column:1; width:100%; max-width:320px; margin-inline:auto; }
}
@media(max-width:760px) {
 html[data-theme] .workspace { padding:20px 16px; }
 html[data-theme] .site-header-bar { height:auto; min-height:100px; padding:18px 20px 0; }
 html[data-theme] .guides-page { width:calc(100% - 40px); padding-top:32px; }
 html[data-theme] .guides-hero { display:block; padding-bottom:28px; }
 html[data-theme] .guides-hero h1 { font-size:64px; letter-spacing:-3px; margin:16px 0 25px; }
 html[data-theme] .guides-lede { font-size:22px; margin-bottom:16px; }
 html[data-theme] .entry-grid { grid-template-columns:1fr; }
 html[data-theme] .entry-card { min-height:0; padding:24px; border:0; border-bottom:1px solid var(--rule); }
 html[data-theme='edition'] .guides-page .entry-card { padding:24px; }
 html[data-theme='edition'] .path-card { grid-template-columns:28px minmax(0,1fr) 20px; padding:20px 12px; }
 html[data-theme] .path-grid { grid-template-columns:1fr; }
 html[data-theme='edition'] .path-card > div { display:block; }
 html[data-theme='edition'] .path-card p { margin:10px 0; }
 html[data-theme='studio'] .lesson-index { padding:18px; }
 html[data-theme] .guides-page .guide-featured { padding:24px; }
}
@media(max-width:520px) {
 html[data-theme] .site-header-bar .shell-nav { width:100%; min-width:0; gap:0; justify-content:space-between; }
 html[data-theme] .site-header-bar .shell-nav > * { padding:12px 6px; font-size:11px; letter-spacing:0; }
 html[data-theme='index'] .site-header-bar .shell-nav > * { padding-inline:4px; font-size:10px; }
}
@media(prefers-reduced-motion:no-preference) {
 html[data-theme] :is(.entry-card,.path-card) { transition:background .18s ease,border-color .18s ease; }
}
/* Reading details and dialog controls share the same material palette. */
html[data-theme] :is(.glossary-layout,.term,.demo-controls,.scope span,.notice,.term-links,.term-related) { border-color:var(--rule); }
html[data-theme] :is(.term figure,.term-detail figure,.glossary-page figure,.rules-note) { background:var(--panel); border-color:var(--rule); border-radius:var(--radius); }
html[data-theme] :is(.term-index nav a,.term-index nav p,.term-index nav a span,.scope,.back-top,.piece span,.diagram-caption,.step-count,figcaption) { color:var(--quiet); }
html[data-theme] :is(h1 span,.scope span,.notice h3,.demo button) { color:var(--brand); }
html[data-theme='edition'] :is(.glossary-intro h1,.term h2,.reading-intro h1) { font-family:var(--display); font-weight:400; letter-spacing:-1.5px; }
html[data-theme='index'] :is(.glossary-intro h1,.reading-intro h1) { font-weight:800; color:var(--brand); }
html[data-theme='studio'] .term-index { background:var(--panel); padding:24px; border-radius:16px; margin-top:24px; }
html[data-theme] :is(.piece-box .eyebrow,.placement-preview figcaption,.board-overlay .eyebrow) { color:#b3bac6; }
html[data-theme] .session-clock { color:var(--quiet); }
:is(html[data-theme],:host([data-theme])) :is(.bindings label,.setting-row small,.range-field small,.rules-note p,.dialog-header .eyebrow) { color:var(--quiet); }
:is(html[data-theme],:host([data-theme])) :is(.setting-row,.dialog-header,.dialog-footer) { border-color:var(--rule); }
:is(html[data-theme],:host([data-theme])) .rules-note { background:var(--wash); border-color:var(--rule); }
:is(html[data-theme],:host([data-theme])) :is(.setting-row strong,.rules-note strong) { color:var(--ink); }
:is(html[data-theme],:host([data-theme])) :is(.toggle-row,.toggle-row small) { color:var(--quiet); }
:is(html[data-theme],:host([data-theme])) .toggle-row input:checked + .switch-track { background:var(--brand); }

/* Index materials: quiet navigation, inset playfield, softly outlined controls. */
:is(html[data-theme='index'],:host([data-theme='index'])) :is(button,.button,input,select,textarea,kbd) { border-radius:6px; }
html[data-theme='index'] .site-header-bar .shell-nav > *,
html[data-theme='index'] :is(.entry-grid,.path-grid,.entry-card,.path-card,.guide-featured,.lesson-terms a,.drill-settings span) { border-radius:6px; }
html[data-theme='index'] .workspace .training-main { background:var(--paper); color:var(--ink); }
html[data-theme='index'] .training-main .page-heading { border-color:var(--rule); }
html[data-theme='index'] .sidebar .style-card {
 background:transparent; border:1px solid transparent; border-radius:6px;
 color:var(--ink); margin-bottom:4px;
}
html[data-theme='index'] .sidebar .style-card.chosen {
 background:var(--wash); border-color:#496585; color:var(--ink);
 box-shadow:inset 2px 0 0 var(--brand);
}
html[data-theme='index'] .sidebar .style-card:hover:not(:disabled) { background:var(--panel); color:var(--ink); }
html[data-theme='index'] .sidebar .style-card .style-title { color:var(--ink); }
html[data-theme='index'] .workspace .sidebar .style-card small { color:var(--quiet); }
html[data-theme='index'] .sidebar .style-card .radio-dot { border-color:#7188a5; }
html[data-theme='index'] .sidebar .style-card.chosen .radio-dot:after { background:var(--brand); }
html[data-theme='index'] .sidebar .style-card.chosen .well-diagram i { background:var(--brand); border-color:var(--brand); }
html[data-theme='index'] .sidebar .style-card.chosen .well-diagram i.well { background:transparent; }
html[data-theme='index'] .coach-sidebar .suggestion-card {
 background:var(--panel); border:1px solid var(--rule); color:var(--ink); border-radius:6px;
}
html[data-theme='index'] .coach-sidebar .suggestion-card :is(.feedback-title,.suggestion-title) { color:var(--ink); }
html[data-theme='index'] .coach-sidebar .suggestion-card > div > p { color:var(--quiet); }
html[data-theme='index'] .coach-sidebar .suggestion-control {
 color:var(--brand); border-color:currentColor; background:transparent; border-radius:50%;
}
html[data-theme='index'] .coach-sidebar .suggestion-control:hover { color:var(--ink); background:var(--wash); }
html[data-theme='index'] .training-main :is(.session-numbers > div,.quality-number > span,.quality-number small,.keyboard-guide,.drop-control > span,.hole-count) { color:var(--quiet); }
html[data-theme='index'] .training-main :is(.quality-number strong,.session-numbers b) { color:var(--ink); }
:is(html[data-theme='index'],:host([data-theme='index'])) :is(.secondary-button,.icon-button):hover:not(:disabled) { background:var(--wash); color:var(--ink); border-color:#7188a5; }
html[data-theme='index'] .phase-indicator { background:var(--panel); border:1px solid var(--rule); border-left:2px solid #7188a5; }
html[data-theme='index'] .training-main .board-overlay { background:#101a29ed; }
html[data-theme='index'] .training-main .piece-box { background:#101a29; border-color:var(--rule); }
html[data-theme='index'] .placement-preview { background:#101a29; border-color:var(--rule); }
html[data-theme='index'] .board-overlay .overlay-symbol { background:var(--panel); color:var(--brand); border-color:var(--rule); }