:root{--selection-slide-duration:260ms;--sentence-connect-duration:550ms;--sentence-reveal-duration:220ms;--chat-arrive-duration:240ms;--dog-idle-duration:3600ms;--dog-wag-duration:700ms;--dog-rest-duration:7200ms;--cassette-reel-duration:2200ms;--cassette-wave-duration:470ms;--concept-motion-duration:650ms;--hydra-slider-duration:5400ms;--hydra-bars-duration:2600ms;--register-scan-duration:340ms;--relay-hover-duration:180ms;--relay-breathe-duration:3600ms;--sidebar-sprite-duration:6000ms;--unlock-duration:400ms;--unlock-shackle-duration:133.33333333333331ms}
:root{--selection-slide-duration:260ms;--sentence-connect-duration:550ms;--sentence-reveal-duration:220ms;--chat-arrive-duration:240ms;--dog-idle-duration:3600ms;--dog-wag-duration:700ms;--dog-rest-duration:7200ms;--cassette-reel-duration:2200ms;--cassette-wave-duration:470ms;--concept-motion-duration:650ms;--hydra-slider-duration:5400ms;--hydra-bars-duration:2600ms;--register-scan-duration:340ms;--relay-hover-duration:180ms;--relay-breathe-duration:3600ms;--sidebar-sprite-duration:6000ms;--unlock-duration:400ms;--unlock-shackle-duration:133.33333333333331ms}
:root {
--gold:#ffbd59;
--folder-stroke:var(--gold);
--font:'Satoshi',Arial,sans-serif;
--display:'General Sans','Satoshi',sans-serif;
}
body[data-theme=margin-notes], .theme-card[data-preview-theme=margin-notes] {
color-scheme:light;
--font:'Patrick Hand','DM Sans',sans-serif; --display:'Caveat','Patrick Hand',cursive;
--preview-pattern:none; --canvas-pattern:none; --crt-lines:none;
--bg:var(--palette-default-background); --panel:var(--palette-default-panel); --raised:var(--palette-default-raised);
--text:var(--palette-default-text); --muted:var(--palette-default-muted); --line:var(--palette-default-edge);
--accent:#6b5186; --choice-fill:var(--palette-default-accent); --on-gold:#302a1b;
--gold:#f5d878; --cyan:#477f98; --pink:#a75f7d; --lime:#64834a;
--folder-stroke:#6b5186; --panel-offset:#c8c1b4; --battery-lightness:34%;
--register-textbook:#9c4048; --register-natural:#436c47;
--register-textbook-surface:#fcebed; --register-natural-surface:#e9f3e6;
--mn-lavender:#d2b8e8; --mn-yellow:#f5d878; --mn-pink:#efb8d0;
--mn-blue:#abd8e9; --mn-green:#c0d99d; --mn-orange:#f1c38e;
--paper:var(--panel); --pencil-ink:var(--text);
--doodle-paper:#fffbed; --doodle-yellow:#f4d66e; --doodle-yellow-ink:#997222;
--doodle-blue:#b7dce8; --doodle-blue-ink:#477f98;
--doodle-pink:#edb9c9; --doodle-pink-ink:#a75f7d;
--doodle-green:#c4dca9; --doodle-green-ink:#64834a; --doodle-orange-ink:#ae7843;
--palette-default-background:#fffdf6;
--palette-default-panel:#fffdf6;
--palette-default-raised:#f5f2e9;
--palette-default-text:#302d29;
--palette-default-muted:#69645c;
--palette-default-edge:#c8c1b4;
--palette-default-button:#fffdf6;
--palette-default-accent:#e9ddf0;
--palette-default-header:#fffdf6;
--palette-default-headerText:#302d29;
--palette-default-sidebar:#fffdf6;
--palette-default-sidebarText:#302d29;
}
body[data-theme=cyberpunk], .theme-card[data-preview-theme=cyberpunk] {
--display:'Chakra Petch','General Sans',sans-serif;
--preview-pattern:none;
color-scheme:dark;
--battery-lightness:62%;
--font:'DM Sans',Arial,sans-serif;
--bg:var(--palette-default-background);--panel:var(--palette-default-panel);--raised:var(--palette-default-raised);
--text:var(--palette-default-text);--muted:var(--palette-default-muted);--line:var(--palette-default-edge);
--on-gold:#211625;
--crt-lines:none;
--register-textbook:#ff9ca9;--register-natural:#8fe0b2;
--register-textbook-surface:#4b2028;--register-natural-surface:#1d302c;--panel-offset:#070b0d;
--accent:var(--palette-default-accent);--cyan:#a3e7d6;--pink:#c6b2ff;--lime:#a3e7d6;
--ghost-ink:#101318;--folder-stroke:var(--cyan);--choice-fill:var(--accent);
--palette-default-background:#070b0d;
--palette-default-panel:#0e1216;
--palette-default-raised:#1b1428;
--palette-default-text:#f2f4f5;
--palette-default-muted:#bcb4cc;
--palette-default-edge:#6c607d;
--palette-default-button:#1b1428;
--palette-default-accent:#c6b2ff;
--palette-default-header:#070b0d;
--palette-default-headerText:#f2f4f5;
--palette-default-sidebar:#0e1216;
--palette-default-sidebarText:#f2f4f5;
}
body[data-theme=atlas], .theme-card[data-preview-theme=atlas] {
--display:'General Sans','Satoshi',sans-serif;
--preview-pattern:var(--canvas-pattern);
color-scheme:light;
--folder-stroke:#7d501d;
--battery-lightness:34%;
--font:'DM Sans',Arial,sans-serif;
--bg:var(--palette-default-background);--panel:var(--palette-default-panel);--raised:var(--palette-default-raised);
--text:var(--palette-default-text);--muted:var(--palette-default-muted);--line:var(--palette-default-edge);--on-gold:#261b20;
--register-textbook:#a2253b;--register-natural:#21623c;
--register-textbook-surface:#edb4b7;--register-natural-surface:#b1d6ba;--panel-offset:#c8bbcf;
--accent:#08696e;--cyan:#08696e;--pink:#a22860;--lime:#08696e;
--canvas-surface:#e2e4e1;
--grid-line-color:rgba(60,76,89,.060);
--grid-dot-color:rgba(60,76,89,.15);
--grid-line-width:1px;
--grid-dot-radius:1px;
--grid-dot-edge:1.3px;
--canvas-pitch:32px;
--canvas-position:calc((var(--grid-line-width) - var(--canvas-pitch))/2) calc((var(--grid-line-width) - var(--canvas-pitch))/2),0 0,0 0;
--canvas-pattern:radial-gradient(circle,var(--grid-dot-color) var(--grid-dot-radius),transparent var(--grid-dot-edge)),linear-gradient(var(--grid-line-color) var(--grid-line-width),transparent var(--grid-line-width)),linear-gradient(90deg,var(--grid-line-color) var(--grid-line-width),transparent var(--grid-line-width));
--dot-surface:var(--canvas-surface);
--palette-default-background:#dfdfdf;
--palette-default-panel:#f8f5fb;
--palette-default-raised:#e5dceb;
--palette-default-text:#29202f;
--palette-default-muted:#5e4d68;
--palette-default-edge:#8f7c9b;
--palette-default-button:#e5dceb;
--palette-default-accent:#ffbd59;
--palette-default-header:#dfdfdf;
--palette-default-headerText:#29202f;
--palette-default-sidebar:#eaeaea;
--palette-default-sidebarText:#292929;
}
body[data-theme=hydra], .theme-card[data-preview-theme=hydra] {
--preview-pattern:var(--canvas-pattern);
color-scheme:dark;
--font:'DM Sans',Arial,sans-serif;
--display:'Chakra Petch','General Sans',sans-serif;
--bg:var(--palette-default-background); --panel:var(--palette-default-panel); --raised:var(--palette-default-raised);
--text:var(--palette-default-text); --muted:var(--palette-default-muted); --line:var(--palette-default-edge);
--accent:#ff6e58; --on-gold:#221e1b; --hydra-tint:#3c3637;
--cyan:var(--text); --pink:var(--accent); --lime:#b5e3ac;
--folder-stroke:var(--accent); --panel-offset:#1c2027;
--register-textbook:#ffb1a5; --register-natural:#b5e3ac;
--register-textbook-surface:#432f32; --register-natural-surface:#293c36;
--battery-lightness:62%; --canvas-pitch:40px;
--grid-line-color:#cbe5c908;
--canvas-pattern:linear-gradient(var(--grid-line-color) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line-color) 1px,transparent 1px);
--palette-default-background:#22252e;
--palette-default-panel:#272c34;
--palette-default-raised:#303840;
--palette-default-text:#dbeece;
--palette-default-muted:#aebda8;
--palette-default-edge:#657565;
--palette-default-button:#303840;
--palette-default-accent:#ff6e58;
--palette-default-header:#272c34;
--palette-default-headerText:#dbeece;
--palette-default-sidebar:#272c34;
--palette-default-sidebarText:#dbeece;
}
body[data-theme=moon-garden], .theme-card[data-preview-theme=moon-garden] {
--preview-pattern:none;
color-scheme:dark;
--font:'DM Sans',Arial,sans-serif; --display:Georgia,'Times New Roman',serif;
--bg:var(--palette-default-background); --panel:var(--palette-default-panel); --raised:var(--palette-default-raised);
--text:var(--palette-default-text); --muted:var(--palette-default-muted); --line:var(--palette-default-edge);
--accent:#edc49b; --on-gold:#292330; --panel-offset:#272334;
--cyan:#edc49b; --pink:#c7a9bd; --lime:#8fe0b2; --folder-stroke:var(--accent);
--register-textbook:#ff9ca9; --register-natural:#8fe0b2;
--register-textbook-surface:#4b2028; --register-natural-surface:#1d302c;
--battery-lightness:62%; --canvas-pattern:none;
--moon-header:#3f3b53; --moon-header-text:#f7e6d0; --moon-button:#5d5366;
--moon-edge:#b8a7c8;
--moon-paper:#f5eed8;--moon-paper-ink:#302d3d;--moon-paper-muted:#504a5a;
--moon-paper-edge:#c8bd9e;--moon-paper-shadow:#221e2d;
--moon-paper-selected:#d4dfb9;--moon-paper-selected-ink:#272f22;
--moon-paper-selected-edge:#96ac74;--moon-paper-calendar-accent:#6f7653;
--palette-default-background:#332f46;
--palette-default-panel:#48425a;
--palette-default-raised:#514960;
--palette-default-text:#f7e9da;
--palette-default-muted:#d4cad9;
--palette-default-edge:#9281a3;
--palette-default-button:#5d5366;
--palette-default-accent:#edc49b;
--palette-default-header:#3f3b53;
--palette-default-headerText:#f7e6d0;
--palette-default-sidebar:#3f3b53;
--palette-default-sidebarText:#f7e6d0;
}
@font-face{font-family:'DM Sans';src:url('/vendor/fonts/dm-sans-variable.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/satoshi-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Satoshi';src:url('/vendor/fonts/satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'General Sans';src:url('/vendor/fonts/general-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'General Sans';src:url('/vendor/fonts/general-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'General Sans';src:url('/vendor/fonts/general-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'General Sans';src:url('/vendor/fonts/general-sans-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
:root{color-scheme:dark;}
*{box-sizing:border-box}body{margin:0;color:var(--text);background:var(--bg);font:16px/1.5 var(--font)}button,select{font:inherit}button{cursor:pointer;color:inherit;border:0}a{color:inherit;text-decoration:none}button:disabled{opacity:.35;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:5px}select{color:var(--text);background:#231f25;border:1px solid var(--line);padding:7px 9px}button,a,select{-webkit-tap-highlight-color:transparent}.page-shell{width:min(1390px,calc(100% - 64px));margin:0 auto}.masthead{height:65px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;gap:17px;align-items:center;font-size:10px;letter-spacing:1.8px}.brand b{font:700 24px 'Satoshi',sans-serif;letter-spacing:2px;color:var(--gold)}.brand>span{height:18px;width:1px;background:#6d5968}.edition{display:flex;gap:9px;align-items:center;font:10px monospace;letter-spacing:1.4px;color:var(--muted)}.edition i,.motion-bar i{width:5px;height:5px;background:var(--cyan);display:inline-block;box-shadow:0 0 8px #68e4ef77}.intro{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:20px}.eyebrow{color:var(--gold);font:10px monospace;letter-spacing:1.8px;margin:0 0 9px}.intro h1{font-size:23.4px;font-weight:500;letter-spacing:-.7px;margin:0;line-height:1.2}.intro h1 span{color:var(--gold)}.preferences{display:flex;align-items:center;gap:18px;font:11px monospace}.preferences label{display:flex;align-items:center;gap:8px;color:var(--muted)}.preferences button{background:transparent;color:var(--accent);padding:8px 0}.directions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}.direction{display:flex;gap:14px;align-items:center;padding:15px 17px;border:1px solid var(--line);background:#201c21;position:relative;min-width:0}.direction:hover{border-color:#89717e}.direction.active{border-color:var(--gold);background:#2b231f;box-shadow:inset 0 -2px var(--gold)}.direction>span:nth-child(2){display:flex;flex-direction:column;min-width:0}.direction small{font:9px monospace;letter-spacing:1px;color:#c8b5ad}.direction strong{font-size:14.4px;font-weight:500;margin-top:4px}.direction em{font-size:10px;color:#c4b9c0;font-style:normal;margin-top:4px}.direction-arrow{font-size:20px;font-weight:400;color:var(--gold);margin-left:auto}.mini-preview{position:relative;width:39px;height:44px;flex-shrink:0;display:block}
.cyber-preview{border:2px solid var(--cyan);clip-path:polygon(0 0,75% 0,100% 25%,100% 100%,0 100%);background:linear-gradient(90deg,transparent 70%,#ff66ad66 70%)}.cyber-preview i{position:absolute;left:-6px;right:7px;bottom:8px;height:7px;background:var(--gold)}
.lesson{background:#1c1a1e;border:1px solid #9d773e;border-radius:9px;overflow:hidden;box-shadow:0 0 0 4px #ffbd5904,0 22px 60px #0003;position:relative}.console-bar{min-height:39px;display:flex;align-items:center;gap:18px;padding:8px 25px;border-bottom:1px solid #ffbd5933;background:#231e21;font:9px monospace;letter-spacing:1.4px;color:#bfb5be}.console-title{color:var(--gold)}#systemLabel{margin-left:auto;color:var(--accent)}#languageToggle{font:10px monospace;background:transparent;padding:4px 0;color:#eee}#languageToggle span{margin:0 4px;color:#857783}.topics{display:flex;min-height:51px;align-items:stretch;gap:28px;padding:0 28px;border-bottom:1px solid #594b59;background:#1d1b20}.topics :is(button,a){position:relative;background:transparent;color:#c6bcc5;padding:14px 0;font-size:12px;white-space:nowrap}.topics :is(button,a) span{font:9px monospace;color:#948b93;margin-right:7px}.topics :is(button,a).active{color:var(--gold)}.topics :is(button,a).active span{color:var(--gold)}.topics :is(button,a).active:after{content:'';height:2px;position:absolute;bottom:-1px;left:0;right:0;background:var(--gold);box-shadow:0 0 8px #ffbd5933}.topics :is(button,a):last-child{margin-left:auto;color:var(--cyan)}.stage{position:relative;min-height:550px;overflow:hidden}.stage:before{content:'';position:absolute;inset:0;background:linear-gradient(#ffbd5903 1px,transparent 1px),linear-gradient(90deg,#ffbd5903 1px,transparent 1px);background-size:40px 40px;pointer-events:none}#content{position:relative;z-index:1;padding:28px 35px 31px;min-height:550px}.lesson-heading{display:flex;align-items:flex-start;gap:24px;margin-bottom:24px;position:relative}.lesson-heading>div{flex:1}.lesson-heading .eyebrow{font-size:10px;letter-spacing:1.6px;color:var(--accent);margin-bottom:9px}.rule-title{font:500 27px/1.18 var(--display);letter-spacing:-.6px;margin:0 0 11px}.rule-meaning{font-size:15.3px;line-height:1.6;color:#ddd6dd;margin:0;max-width:880px}.rule-meaning b{color:var(--gold);font-weight:600}.heading-code{font:9px monospace;color:#9d879a;writing-mode:vertical-rl;letter-spacing:2px;white-space:nowrap;border-left:1px solid #735467;padding-left:8px}.lesson-layout{display:grid;grid-template-columns:minmax(0,1fr) 248px;gap:30px;align-items:start}.main-teaching{min-width:0}.visual-panel{position:relative;border:1px solid #756047;background:#201c23;min-height:290px;padding:19px 17px;overflow:hidden;border-radius:3px;box-shadow:inset 0 0 28px #ffbd5904}.visual-panel:before,.visual-panel:after{content:'';position:absolute;width:20px;height:2px;background:var(--accent);left:0;top:0}.visual-panel:after{top:auto;left:auto;right:0;bottom:0}.panel-label{font:9px monospace;letter-spacing:1.5px;color:var(--accent);display:flex;justify-content:space-between;margin:0 0 14px}.panel-label span{color:#a99aa6}.focus-module{text-align:center;margin-bottom:17px}.focus-module small{display:block;font:9px monospace;letter-spacing:1.3px;color:#c9b6c5;margin-bottom:6px}.focus-word{position:relative;display:inline-block;padding:7px 14px;color:var(--gold);font:600 21.6px var(--display);border:1px solid #ffbd5970;box-shadow:0 0 18px #ffbd5910;line-height:1.2}.focus-word:before,.focus-word:after{content:'';position:absolute;width:11px;height:11px;border-left:2px solid var(--accent);border-top:2px solid var(--accent);left:-3px;top:-3px}.focus-word:after{left:auto;top:auto;right:-3px;bottom:-3px;transform:rotate(180deg)}.signal-underline{position:absolute;bottom:-2px;left:14%;width:72%;height:2px;background:var(--gold);transform-origin:left}.panel-caption{font-size:13px;line-height:1.6;color:#e3d5df;margin:14px 0 0;border-top:1px solid #5b4856;padding-top:12px}.panel-caption strong{color:var(--gold);font-weight:500}.panel-foot{display:flex;justify-content:space-between;font:9px monospace;color:#9e90a0;border-top:1px solid #493a49;padding-top:10px;margin-top:15px}.panel-foot span:last-child{color:var(--accent)}.frame-corner{position:absolute;z-index:3;width:18px;height:18px;border-color:var(--gold);pointer-events:none;filter:drop-shadow(0 0 3px #ffbd5966)}.tl{top:12px;left:12px;border-left:1px solid;border-top:1px solid}.tr{top:12px;right:12px;border-right:1px solid;border-top:1px solid}.bl{bottom:12px;left:12px;border-left:1px solid;border-bottom:1px solid}.br{bottom:12px;right:12px;border-right:1px solid;border-bottom:1px solid}.section-label{font:10px monospace;letter-spacing:1.3px;color:#c9b5c3;margin:0 0 10px;display:flex;justify-content:space-between;gap:10px}.section-label .accent{color:var(--accent)}.formula{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 18px}.formula-token{position:relative;padding:8px 12px;min-height:41px;border:1px solid #6c5b64;background:#242027;color:#eee;font-size:15px;white-space:nowrap;border-radius:3px}.formula-token.focus{color:#201811;background:var(--gold);border-color:var(--gold);font-weight:600;box-shadow:0 0 14px #ffbd5915}.formula-plus{font:17px monospace;color:var(--accent)}.table-shell{position:relative;border:1px solid #715a49;margin-bottom:13px;overflow:hidden;border-radius:3px}.grammar-table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:16px}.grammar-table th{font:10px monospace;letter-spacing:1.3px;text-align:left;background:#332821;padding:10px 15px;color:#ffcc80;border-bottom:1px solid #715a49}.grammar-table th:first-child{width:30%}.grammar-table th:nth-child(2){width:24%}.grammar-table td{padding:11px 15px;border-bottom:1px solid #52464f;vertical-align:middle;line-height:1.5}.grammar-table tbody tr:last-child td{border-bottom:0}.grammar-table tbody tr{background:#211e23}.grammar-table tbody tr.active{background:#35291c;box-shadow:inset 3px 0 var(--gold)}.grammar-table td:nth-child(2){color:var(--gold);font-size:20.7px;font-weight:500;letter-spacing:.2px}.grammar-table button{background:transparent;padding:3px 0;text-align:left;font-size:16px;color:#f5edf4;line-height:1.45;width:100%}.grammar-table button span{display:inline-block;color:var(--accent);font:10px monospace;min-width:20px;vertical-align:2px}.grammar-table td:last-child{color:#ddd4dd;font-size:15px}.grammar-table .chosen{color:var(--accent)}.selected-example{border-left:2px solid var(--accent);padding:10px 14px;background:#68e4ef05;margin:12px 0 0;font-size:18.9px;line-height:1.6}.selected-example small{display:block;color:#b5c4c7;font:9px monospace;letter-spacing:1.6px;margin-bottom:5px}.selected-example mark{background:transparent;color:var(--gold);font-weight:600}.base-verb-strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:#e0d6df}.base-verb-strip>span{color:#c9b7c7}.base-verb-strip b{color:var(--accent);font-weight:500;border:1px solid #68e4ef40;padding:3px 10px}.base-verb-strip p{margin:0;width:100%;font-size:14px;color:#d2c7d0}.context-story{font-size:16.2px;line-height:1.7;margin:0 0 24px;color:#e0d8df;max-width:700px}.time-path{display:grid;grid-template-columns:1fr 45px 1fr;align-items:center;border:1px solid #69534b;background:#211c23;padding:22px 24px;margin:18px 0}.time-node small{display:block;color:var(--accent);font:10px monospace;letter-spacing:1.3px;margin-bottom:8px}.time-node strong{display:block;font-size:20.7px;font-weight:500;color:var(--gold)}.time-arrow{color:var(--cyan);font-size:28px}.teaching-tip{font-size:16px;line-height:1.65;color:#e3d8df;margin:18px 0 0;padding:13px 16px;border-left:2px solid var(--gold);background:#ffbd5906}.example-context{font-size:17px;color:#e0d6df;line-height:1.7;margin:23px 0 0}.sentence-board{position:relative;border:1px solid #736045;border-left:3px solid var(--gold);padding:25px 24px;background:#242025;min-height:133px;margin-top:14px}.sentence-board:after{content:'EN';position:absolute;right:10px;top:8px;font:8px monospace;color:#9b8696}.sentence{font:500 clamp(21.6px,1.98vw,29.7px)/1.8 var(--display);letter-spacing:-.3px;margin:0}.sentence mark{background:transparent;color:var(--gold);padding:2px 5px;border:1px solid #ffbd59aa;box-shadow:inset 0 -2px #ffbd5977,0 0 16px #ffbd5914;box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:1.8;position:relative}.sentence mark:before,.sentence mark:after{position:absolute;content:'';width:7px;height:7px;border:2px solid var(--accent);border-right:0;border-bottom:0;top:-4px;left:-4px}.sentence mark:after{top:auto;left:auto;bottom:-4px;right:-4px;transform:rotate(180deg)}.negative-transform{display:flex;gap:17px;align-items:center;flex-wrap:wrap;margin-top:20px}.negative-transform>span{color:#e2d5df;font-size:16.2px;border:1px solid #584957;padding:12px 15px}.negative-transform>span:last-child{border-color:var(--pink);color:var(--pink)}.negative-transform b{font-weight:500;color:var(--accent);font-size:19.8px}.negative-transform small{display:block;width:100%;font-size:14px;color:#d0c2cc}.before-sentence{padding:12px 16px;border-left:2px solid #6b5d6d;background:#252027;color:#c8bbc6;font-size:16px;margin:0 0 22px}.before-sentence small{font:9px monospace;display:block;color:#ac96a8;letter-spacing:1.4px;margin-bottom:4px}.question-zone{border:1px solid #967647;position:relative;background:#211d24;padding:18px 20px 22px}.question-status{display:flex;align-items:center;justify-content:space-between;margin:0 0 30px;color:var(--accent);font:10px monospace;letter-spacing:1px}.question-status span{color:var(--gold)}.question-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:relative;min-height:51px}.word-token{display:inline-block;position:relative;white-space:normal;padding:9px 12px;border:1px solid #71576b;background:#29222c;font-size:18.9px;line-height:1.4;max-width:100%}.word-token.aux{background:var(--gold);color:#211909;border-color:var(--gold);box-shadow:0 0 16px #ffbd5922}.word-token.subject{color:var(--cyan);border-color:#68e4ef99}.word-token.punct{border:none;font-size:25px;background:none;color:var(--gold)}.question-note{font-size:16px;line-height:1.7;color:#ddd1db;margin:20px 0 0}.question-note strong{color:var(--gold);font-weight:500}.question-zone .question-path{position:absolute;top:45px;left:25px;width:155px;height:24px;stroke:var(--accent);fill:none;stroke-width:1.3;opacity:.75}.comparison-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.compare-card{border:1px solid #91754e;background:#231e23;position:relative;padding:20px 22px;overflow:hidden}.compare-card:nth-child(2){border-color:#68e4ef88}.compare-card:nth-child(3){border-color:#ff66ad88}.compare-card h3{font-size:18.9px;font-weight:500;color:var(--gold);margin:5px 0 17px;line-height:1.25}.compare-card:nth-child(2) h3{color:var(--cyan)}.compare-card:nth-child(3) h3{color:var(--pink)}.compare-card .card-number{font:10px monospace;letter-spacing:2px;color:#c8b2c1}.compare-card .scenario{color:#e1d3df;font-size:13.5px;line-height:1.6;min-height:72px;margin:0 0 15px;padding-bottom:15px;border-bottom:1px solid #524250}.compare-card .compare-sentence{font-size:19.8px;line-height:1.65;margin:0;min-height:106px}.compare-card mark{color:var(--gold);background:#ffbd5914;padding:1px 3px;border-bottom:1px solid var(--gold);box-decoration-break:clone;-webkit-box-decoration-break:clone}.compare-card:nth-child(2) mark{color:var(--cyan);background:#68e4ef0f;border-color:var(--cyan)}.compare-card:nth-child(3) mark{color:var(--pink);background:#ff66ad0f;border-color:var(--pink)}.compare-purpose{display:flex;align-items:center;gap:9px;margin:18px 0 0;font:9.9px monospace;color:#c8bdc7}.compare-purpose i{width:5px;height:5px;background:var(--gold)}.compare-card:nth-child(2) .compare-purpose i{background:var(--cyan)}.compare-card:nth-child(3) .compare-purpose i{background:var(--pink)}.compare-summary{margin:22px 0 0;font-size:17px;color:#e3d7e1;border-left:2px solid var(--gold);padding:13px 17px;background:#ffbd5907}.prediction-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.prediction-grid .compare-card{padding:17px}.prediction-grid .compare-card .compare-sentence{font-size:19.8px;min-height:90px}.prediction-grid .compare-card .scenario{min-height:71px;font-size:13.5px}.prediction-grid .compare-card:nth-child(2){border-color:#68e4ef88}.prediction-note{font-size:15px;line-height:1.6;color:#dfd0dc;margin:17px 0 0}.lesson-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 28px;border-top:1px solid #6f544a;background:#221d23;min-height:82px}.steps{display:flex;gap:13px;align-items:center}.steps button{background:transparent;font-size:11px;color:#c5b7c2;padding:9px 0;display:flex;align-items:center;gap:7px}.steps button span{font:9px monospace;color:#998796}.steps button.active{color:var(--gold)}.steps button.active span{color:var(--gold)}.lesson-actions{display:flex;align-items:center;gap:19px}.lesson-actions button{font-size:12px;background:transparent;color:#d1c3ce;padding:10px 0;white-space:nowrap}.lesson-actions button span{margin-left:5px}.lesson-actions .primary{background:var(--gold);color:#22190c;padding:13px 17px;font-weight:600;min-width:167px;text-align:left;border-radius:3px}.primary b{margin-left:14px;font-weight:400}.primary:hover{background:#ffd48f}.motion-bar{display:flex;justify-content:space-between;gap:20px;padding:17px 3px;border-bottom:1px solid #4c3c48;font-size:10px;color:#bcaeba}.motion-bar>div{display:flex;gap:10px;align-items:center}.motion-bar strong{font-weight:500;color:#ddd0da}.motion-bar button{background:transparent;padding:4px 0;color:#cfbdbf;font:10px monospace}.motion-bar button+button{margin-left:10px;color:var(--gold)}.page-footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 0 24px;font:8px monospace;letter-spacing:.7px;color:#ae9ca9}.page-footer button{font:10px monospace;color:#cab6c5;background:transparent;padding:3px 0}.transition-layer{position:absolute;inset:0;z-index:5;pointer-events:none;display:none;overflow:hidden}.transition-layer.active{display:block}
.cyber-bands{position:absolute;inset:0;display:grid;grid-template-rows:repeat(7,1fr)}.cyber-band{position:relative;background:#15131d;border-top:1px solid #68e4ef70;border-bottom:1px solid #ff66ad40;transform:translateX(-105%);overflow:hidden}.cyber-band:nth-child(2n){transform:translateX(105%);background:#1d1723}.cyber-band:after{content:'';position:absolute;top:0;bottom:0;width:10px;background:var(--gold);right:12%;box-shadow:25px 0 #ff66ad,40px 0 #68e4ef}.blueprint-cover{position:absolute;inset:0;background:#171c18;opacity:0}.grid-lines{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr)}.grid-line{border-left:1px solid #c5f27aaa;height:100%;transform:scaleY(0);transform-origin:top;background:linear-gradient(transparent 49.7%,#ffbd5940 50%,transparent 50.3%)}.grid-sweep{position:absolute;inset:0;transform:translateX(-105%);background:#19211c;border-right:2px solid var(--gold)}
.diagram{width:100%;display:block;overflow:visible;color:var(--accent);height:auto;max-height:147px}.diagram text{font-family:monospace;fill:#e9dce6;font-size:10px}.diagram .gold{stroke:var(--gold);fill:none}.diagram .cyan{stroke:var(--accent);fill:none}.diagram .dim{stroke:#6f5168;fill:none}.diagram .label{fill:var(--gold);stroke:none;font-size:12px}.diagram .small{fill:#d0bbc9;stroke:none;font-size:8px}.diagram .cell{fill:#2a222e;stroke:#6e5365}.diagram .on{fill:#ffbd591a;stroke:var(--gold)}.diagram .trace{stroke-dasharray:350;stroke-dashoffset:0}.diagram .solid{fill:var(--accent);stroke:none}.calendar-mini{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:7px}.calendar-mini span{text-align:center;font:9px monospace;color:#bda7ba;padding:8px 0}.calendar-mini b{font:11px monospace;display:grid;place-items:center;height:36px;border:1px solid #554157;color:#e9d8e5}.calendar-mini b.booked{border-color:var(--gold);color:var(--gold);background:#ffbd5915;box-shadow:0 0 10px #ffbd5911}.calendar-meeting{font-size:15px;color:var(--gold);margin:15px 0 4px;text-align:center}.calendar-confirmed{font-size:11px;color:var(--accent);text-align:center;margin:0}.signal-message{background:#2b2030;border-left:2px solid var(--pink);padding:11px 12px;font-size:13px;color:#f5d3e6}.signal-reply{font-size:16px;color:var(--gold);border:1px solid var(--gold);padding:10px 12px;margin:14px 0 6px}.route-event{padding:10px 11px;border:1px solid #6d4f5f;margin-bottom:10px;position:relative}.route-event small{display:block;font:9px monospace;color:var(--accent);margin-bottom:4px}.route-event strong{display:block;font-size:14.4px;color:var(--gold);font-weight:500}.route-event.late{border-color:var(--pink)}.route-event.late small{color:var(--pink)}.connector-map{display:grid;gap:8px}.connector-map>div{display:grid;grid-template-columns:1fr 24px 65px;align-items:center;font-size:12px;color:#dfcddd;padding:8px;background:#27202b}.connector-map>div b{color:var(--gold);font-size:17px;font-weight:500}.connector-map>div span{color:var(--accent)}.connector-map>div.active{outline:1px solid var(--gold);background:#3c2c1e}.aux-route{font:14px monospace;display:flex;align-items:center;justify-content:center;gap:8px;margin:20px 0;color:var(--cyan)}.aux-route b{color:#21180e;background:var(--gold);padding:8px;font-size:17px}.question-focus{font-size:28.8px;text-align:center;color:var(--gold);margin:12px 0}.question-focus small{display:block;font-size:11px;color:var(--accent);letter-spacing:2px;margin-bottom:7px}
body[data-theme=cyberpunk]{background:radial-gradient(ellipse at 95% 0,#ff66ad08,transparent 35%),#19171c}body[data-theme=cyberpunk] .lesson{border:2px solid #ffbd59;border-radius:0;box-shadow:6px 6px 0 #6b2d53,8px 8px 0 #ff66ad44;margin-right:8px}body[data-theme=cyberpunk] .console-bar{background:#ffbd59;color:#1a131e;border-bottom:0;font-weight:700;min-height:38px}body[data-theme=cyberpunk] .console-title,body[data-theme=cyberpunk] #systemLabel,body[data-theme=cyberpunk] #languageToggle{color:#251620}body[data-theme=cyberpunk] .topics{background:#27202d;border-bottom:1px solid var(--cyan);padding-left:24px;gap:31px}body[data-theme=cyberpunk] .topics :is(button,a).active{color:#251a15;background:#ffbd59;box-shadow:7px 0 #ffbd59,-7px 0 #ffbd59}body[data-theme=cyberpunk] .topics :is(button,a).active span{color:#251a15}body[data-theme=cyberpunk] .topics :is(button,a).active:after{background:#ff66ad;bottom:-3px;height:3px}body[data-theme=cyberpunk] #content{padding:28px 31px}body[data-theme=cyberpunk] .stage:before{background:repeating-linear-gradient(0deg,transparent 0 5px,#ff66ad03 5px 6px)}body[data-theme=cyberpunk] .rule-title{font-size:28.8px;font-weight:600;letter-spacing:.2px}body[data-theme=cyberpunk] .lesson-heading .eyebrow{background:#67e6ef;color:#171621;display:inline-block;padding:4px 9px;font-weight:600;clip-path:polygon(0 0,100% 0,100% 70%,calc(100% - 5px) 100%,0 100%)}body[data-theme=cyberpunk] .heading-code{color:var(--pink);border-color:var(--pink)}body[data-theme=cyberpunk] .frame-corner{display:none}body[data-theme=cyberpunk] .visual-panel{border:2px solid var(--pink);background:#261b2e;box-shadow:5px 5px #452241;border-radius:0}body[data-theme=cyberpunk] .panel-label{background:#ff66ad;color:#231426;margin:-19px -17px 17px;padding:9px 10px;font-weight:600}body[data-theme=cyberpunk] .panel-label span{color:#362137}body[data-theme=cyberpunk] .focus-word{border-color:var(--cyan);box-shadow:3px 3px 0 #68e4ef38;text-shadow:1px 1px #ff66ad70}body[data-theme=cyberpunk] .grammar-table th{background:#452639;color:#ffce83;border-bottom:1px solid var(--pink)}body[data-theme=cyberpunk] .table-shell{border:1px solid var(--pink);border-radius:0;box-shadow:4px 4px #47223f}body[data-theme=cyberpunk] .grammar-table tbody tr{background:#241d2a}body[data-theme=cyberpunk] .grammar-table tbody tr.active{background:#443021;box-shadow:inset 4px 0 var(--cyan)}body[data-theme=cyberpunk] .grammar-table td:nth-child(2){font-family:'General Sans',sans-serif;font-weight:600}body[data-theme=cyberpunk] .selected-example{margin-top:20px;border:1px solid var(--cyan);border-left:5px solid var(--cyan);background:#1b282e}body[data-theme=cyberpunk] .formula-token{border-radius:0;border-color:#885077;background:#2a1d2e}body[data-theme=cyberpunk] .formula-token.focus{background:var(--gold);color:#211719;border-color:var(--gold);box-shadow:3px 3px #ff66ad60}body[data-theme=cyberpunk] .sentence-board{background:#251d2a;border:1px solid var(--cyan);border-left:6px solid var(--gold);box-shadow:5px 5px #44223e}body[data-theme=cyberpunk] .sentence mark{background:#ffbd5918;border-color:var(--pink);box-shadow:none}body[data-theme=cyberpunk] .time-path{border:1px solid var(--cyan);box-shadow:5px 5px #4c2943;background:#26202c}body[data-theme=cyberpunk] .lesson-footer{border-top:2px solid var(--pink);background:#2b202c}body[data-theme=cyberpunk] .primary{border-radius:0;box-shadow:3px 3px var(--pink)}body[data-theme=cyberpunk] .direction.active{background:#32212b;box-shadow:inset 0 -2px var(--pink);border-color:var(--pink)}body[data-theme=cyberpunk] .question-zone{border:1px solid var(--cyan);box-shadow:4px 4px #702d54;background:#251d2b}body[data-theme=cyberpunk] .word-token{border-radius:0}body[data-theme=cyberpunk] .compare-card{border-width:2px;border-radius:0;background:#261b2a;box-shadow:4px 4px #3f2540}
.skip{position:fixed;top:-60px;left:10px;background:var(--gold);color:#1b191a;padding:10px;z-index:40}.skip:focus{top:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}dialog{color:#f2f4f5;width:min(670px,calc(100% - 32px));max-height:85vh;padding:32px;background:#241e28;border:1px solid #967a50}dialog::backdrop{background:#09060bce;backdrop-filter:blur(6px)}dialog h2{font-size:23.4px;font-weight:500}dialog p,dialog dd{font-size:14px;line-height:1.7;color:#e2d6e0}dialog dt{color:var(--gold);margin-top:20px;font-size:16px}dialog dd{margin:5px 0 0}.close-dialog{background:transparent;color:#e2d1df;position:absolute;top:10px;right:15px;font-size:27px}.links{display:flex;gap:15px;flex-wrap:wrap}.links a{color:var(--accent);font-size:12px}
@media(max-width:1150px){.page-shell{width:calc(100% - 40px)}.directions{gap:9px}.direction{padding:13px 12px;gap:12px}.direction strong{font-size:12.6px}.direction em{font-size:9px}.direction-arrow{display:none}.mini-preview{width:30px;height:37px}.lesson-layout{grid-template-columns:minmax(0,1fr) 215px;gap:23px}#content{padding:26px 29px}.rule-title{font-size:25.2px}.grammar-table th{padding:10px}.grammar-table td{padding:11px 10px}.grammar-table button{font-size:15px}.grammar-table td:nth-child(2){font-size:18.9px}.grammar-table td:last-child{font-size:14px}.visual-panel{padding:17px 13px}.focus-word{font-size:19.8px}.lesson-footer{gap:14px;padding:17px 23px}.lesson-actions{gap:15px}.steps{gap:9px}.steps button{font-size:10px}.lesson-actions .primary{min-width:149px;font-size:11px}.topics{gap:24px}.compare-card{padding:18px}.compare-card h3{font-size:18px}.compare-card .compare-sentence{font-size:18px}.compare-card .scenario{min-height:90px}
}
@media(max-width:900px){.lesson-layout{grid-template-columns:minmax(0,1fr) 180px;gap:18px}.visual-panel{padding:15px 12px}.focus-word{font-size:17.1px}.panel-label{font-size:8px;letter-spacing:1px}.panel-caption{font-size:12px}.grammar-table th:first-child{width:30%}.grammar-table th:nth-child(2){width:22%}.grammar-table td:last-child{font-size:13px}.formula-token{font-size:13px;padding:7px 10px}.lesson-footer{flex-wrap:wrap}.lesson-actions{margin-left:auto}.direction em{display:none}.mini-preview{width:24px;height:30px}.direction strong{font-size:11.7px}.direction small{font-size:8px}.topics{gap:22px}.topics :is(button,a){font-size:11px}.intro h1{font-size:20.7px}
.comparison-grid{gap:10px}.compare-card{padding:16px 14px}.compare-card h3{font-size:17.1px}.compare-card .compare-sentence{font-size:17.1px}.compare-card .scenario{font-size:12.6px;min-height:115px}.prediction-grid{grid-template-columns:1fr}.prediction-grid .compare-card .scenario,.prediction-grid .compare-card .compare-sentence{min-height:0}.prediction-grid .compare-card h3{margin-bottom:10px}.prediction-grid .compare-card .scenario{padding-bottom:10px;margin-bottom:10px}.time-path{padding:17px;grid-template-columns:1fr 30px 1fr}.time-node strong{font-size:18px}body[data-theme=cyberpunk] .rule-title{font-size:26.1px}body[data-theme=cyberpunk] .topics{gap:23px}.base-verb-strip{font-size:13px}.selected-example{font-size:17.1px}}
@media(max-width:700px){.page-shell{width:calc(100% - 26px)}.masthead{height:58px}.brand{font-size:8px;letter-spacing:1px;gap:10px}.brand b{font-size:22px}.edition{font-size:8px;letter-spacing:.5px}.intro{align-items:flex-start;flex-direction:column;padding:18px 0;gap:16px}.intro h1{font-size:21.6px}.intro .eyebrow{font-size:9px}.preferences{align-self:flex-end;font-size:10px}.directions{gap:7px;margin-bottom:17px}.direction{padding:11px 9px;gap:0;min-height:78px;align-items:flex-start}.mini-preview{display:none}.direction small{font-size:7px;letter-spacing:.4px;line-height:1.5}.direction strong{font-size:10.8px;line-height:1.4;margin-top:6px}.console-bar{padding:9px 15px;font-size:8px;gap:10px}.console-title{letter-spacing:.6px}#systemLabel{display:none}#languageToggle{margin-left:auto;font-size:10px}.topics{padding:0 15px;gap:15px;overflow:auto}.topics :is(button,a){font-size:10px;padding:14px 0;min-height:45px}.topics :is(button,a) span{display:none}.topics :is(button,a):last-child{margin-left:0}.stage,#content{min-height:0}#content{padding:25px 23px}.lesson-heading{margin-bottom:23px;gap:12px}.heading-code{font-size:8px}.rule-title{font-size:23.4px;line-height:1.2}.rule-meaning{font-size:14.4px;line-height:1.6}.lesson-heading .eyebrow{font-size:9px;line-height:1.5}.lesson-layout{display:flex;flex-direction:column;gap:24px}.main-teaching{width:100%}.visual-panel{width:100%;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:17px}.visual-panel .panel-label{grid-column:1/-1;margin-bottom:14px;font-size:9px}.visual-panel .focus-module{grid-column:1;margin-bottom:4px;align-self:center}.visual-panel .visual-body{grid-column:2;grid-row:2/4}.visual-panel .panel-caption{grid-column:1;padding-top:10px;margin-top:10px;font-size:12px}.visual-panel .panel-foot{grid-column:1/-1}.focus-word{font-size:18.9px}.focus-module small{font-size:8px}.grammar-table th{font-size:8px;letter-spacing:.7px;padding:9px 8px}.grammar-table td{padding:12px 8px}.grammar-table button{font-size:14px}.grammar-table button span{min-width:13px;font-size:9px}.grammar-table td:nth-child(2){font-size:18.9px}.grammar-table td:last-child{font-size:13px;line-height:1.6}.grammar-table th:first-child{width:33%}.grammar-table th:nth-child(2){width:20%}.table-shell{margin-bottom:15px}.formula{gap:6px}.formula-token{font-size:12px;min-height:36px;padding:7px 9px}.formula-plus{font-size:14px}.selected-example{font-size:18px;padding:12px}.base-verb-strip{font-size:13px;gap:8px}.base-verb-strip p{font-size:13px}.base-verb-strip b{padding:4px 8px}.section-label{font-size:8px;letter-spacing:1px;flex-wrap:wrap}.context-story{font-size:16px;margin-bottom:20px}.time-path{padding:17px 14px;grid-template-columns:1fr 26px 1fr}.time-node small{font-size:8px}.time-node strong{font-size:17.1px}.teaching-tip{font-size:15px;padding:12px}.sentence-board{padding:21px 18px}.sentence{font-size:22.5px;line-height:1.9}.example-context{font-size:16px}.negative-transform{gap:10px}.negative-transform>span{font-size:16px;padding:10px}.negative-transform small{font-size:13px}.before-sentence{font-size:14px}.question-zone{padding:16px}.question-status{font-size:9px;letter-spacing:.2px}.word-token{font-size:16.2px;padding:8px 10px}.question-note{font-size:15px}.comparison-grid{grid-template-columns:1fr;gap:15px}.compare-card{padding:20px}.compare-card .scenario{min-height:0;font-size:13.5px}.compare-card .compare-sentence{font-size:20.7px;min-height:0}.compare-card h3{font-size:20.7px}.compare-summary{font-size:15px}.prediction-grid .compare-card .compare-sentence{font-size:19.8px}.lesson-footer{padding:16px 20px;flex-direction:column;gap:13px;align-items:stretch}.steps{justify-content:space-between;gap:5px}.steps button{font-size:10px;gap:4px;min-height:35px}.steps button span{font-size:8px}.lesson-actions{justify-content:space-between;margin:0;gap:10px}.lesson-actions .primary{font-size:12px;padding:12px;min-width:145px}.lesson-actions button{font-size:12px}.motion-bar{flex-direction:column;gap:12px;font-size:9px}.motion-bar>div{gap:7px;flex-wrap:wrap}.motion-bar>div:last-child{align-self:flex-end}.motion-bar button{font-size:10px;min-height:30px}.page-footer{font-size:7px;letter-spacing:0;gap:15px;align-items:flex-start}.page-footer>span{max-width:55%;line-height:1.6}.page-footer button{font-size:9px;text-align:right}.frame-corner{width:13px;height:13px}.tl,.bl{left:9px}.tr,.br{right:9px}body[data-theme=cyberpunk] #content{padding:24px 20px}body[data-theme=cyberpunk] .rule-title{font-size:25.2px}body[data-theme=cyberpunk] .topics{gap:17px;padding-left:16px}body[data-theme=cyberpunk] .visual-panel{padding:17px}body[data-theme=cyberpunk] .panel-label{margin:-17px -17px 16px}body[data-theme=cyberpunk] .lesson{margin-right:5px;box-shadow:4px 4px 0 #6b2d53,5px 5px 0 #ff66ad44}
.calendar-mini{gap:3px}.calendar-mini span{font-size:7px;padding:5px 0}.calendar-mini b{font-size:8px;height:26px}.calendar-meeting{font-size:12px}.calendar-confirmed{font-size:10px}.connector-map>div{font-size:10px;grid-template-columns:1fr 14px 34px;padding:5px}.connector-map>div b{font-size:14px}.route-event{padding:7px}.route-event small{font-size:8px}.route-event strong{font-size:11.7px}.signal-message{font-size:11px;padding:8px}.signal-reply{font-size:13px;padding:7px}.aux-route{font-size:10px;gap:5px}.aux-route b{font-size:13px;padding:6px}}
@media(max-width:380px){.topics{gap:10px}.topics :is(button,a){font-size:9px}body[data-theme=cyberpunk] .topics{gap:12px}.grammar-table td{padding:11px 6px}.grammar-table button{font-size:12px}.grammar-table td:last-child{font-size:12px}.steps button span{display:none}.lesson-actions #back span{display:none}.lesson-actions .primary{min-width:140px}.visual-panel{gap:0 11px}.focus-word{font-size:17.1px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important}}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .heading-code{position:absolute;top:1px;right:0;writing-mode:horizontal-tb;border-left:0;border-bottom:1px solid #735467;padding:0 0 5px;font-size:8px;letter-spacing:1px}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-heading>.eyebrow{padding-right:150px}
.negative-transform>span:nth-of-type(2){border-color:var(--pink);color:var(--pink)}
@media(max-width:700px){
body:is([data-theme=cyberpunk],[data-theme=atlas]) .heading-code{display:none}}
@media(max-width:700px){
.topics,body[data-theme="cyberpunk"] .topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:0 10px;overflow:hidden}
.topics :is(button,a),body[data-theme="cyberpunk"] .topics :is(button,a){text-align:center;padding:12px 2px;min-height:43px;font-size:10px;border-right:0}
.topics :is(button,a):last-child{grid-column:1/-1;border-top:1px solid #625361;padding:8px;min-height:33px;font-size:11px}
.topics :is(button,a).active:after{left:5px;right:5px;bottom:0}
}
.time-path{display:flex;justify-content:center;align-items:center;gap:clamp(24px,3vw,44px);padding:24px;}
.time-node{flex:0 1 auto;min-width:0;text-align:center;}
.time-node strong{line-height:1.3;}
.time-arrow{flex:0 0 34px;width:34px;text-align:center;line-height:1;}
.connector-map>div{grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:9px;}
.connector-map>div>span:first-child{text-align:right;}
.connector-map>div>span:nth-child(2){text-align:center;}
.connector-map>div>b{text-align:left;}
body[data-theme] .topics :is(button,a).flow-nav,body[data-theme] .topics :is(button,a).compare-nav{align-self:center;flex:0 0 auto;min-height:34px;line-height:1.3;padding:9px 13px;margin-top:7px;margin-bottom:7px;border:1px solid var(--accent);border-radius:3px;font-size:12px;font-weight:500;transition:background-color .18s,border-color .18s;}
body[data-theme] .topics :is(button,a).flow-nav{margin-left:auto;background:#68e4ef09;color:var(--accent);}
body[data-theme] .topics :is(button,a).compare-nav{margin-left:-16px;background:var(--gold);border-color:var(--gold);color:#211a11;box-shadow:0 2px 0 #947144;}
body[data-theme] .topics :is(button,a).compare-nav span{color:#211a11;}
body[data-theme] .topics :is(button,a).flow-nav b,body[data-theme] .topics :is(button,a).compare-nav b{margin-left:7px;font-size:15px;font-weight:500;}
body[data-theme] .topics :is(button,a).flow-nav.active,body[data-theme] .topics :is(button,a).flow-nav:hover{background:#68e4ef1c;border-color:var(--gold);color:var(--gold);}
body[data-theme] .topics :is(button,a).compare-nav:hover{background:#ffd28d;box-shadow:0 0 0 2px #ffbd5930;}
body[data-theme] .topics :is(button,a).compare-nav.active{outline:1px solid var(--accent);outline-offset:3px;}
body[data-theme] .topics :is(button,a).flow-nav:after,body[data-theme] .topics :is(button,a).compare-nav:after{display:none;}
body[data-theme=cyberpunk] .topics :is(button,a).flow-nav,body[data-theme=cyberpunk] .topics :is(button,a).compare-nav{border-radius:0;}
body[data-theme=cyberpunk] .topics :is(button,a).compare-nav{box-shadow:3px 3px var(--pink);}
.animated-focus{position:relative;}
.sentence mark.animated-focus{display:inline-block;max-width:100%;border:0;box-shadow:none;line-height:1.45;padding:3px 8px;background:#ffbd5905;vertical-align:baseline;}
.animated-focus:before,.animated-focus:after{display:none!important;}
.animated-focus .signal-underline{display:none;}
.focus-word.animated-focus{border-color:transparent;}
.perimeter{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;}
.perimeter rect{fill:none;vector-effect:non-scaling-stroke;stroke-width:1.1px;}
.perimeter-track{stroke:var(--gold);opacity:.22;}
.perimeter-runner{stroke:var(--accent);stroke-linecap:round;filter:drop-shadow(0 0 2px #68e4ef65);}
body[data-theme=cyberpunk] .perimeter-runner{stroke:var(--pink);filter:drop-shadow(0 0 2px #ff66ad65);}
body[data-motion-enabled=false] .perimeter-runner{display:none;}
body[data-motion-enabled=false] .perimeter-track{opacity:.7;}
.decision-story{display:flex;flex-direction:column;align-items:stretch;}
.decision-event{padding:11px 12px;border:1px solid #73614d;background:#29222a;}
.decision-event small{display:block;font:8px monospace;letter-spacing:1px;color:var(--accent);}
.decision-event p{font-size:14px;line-height:1.5;margin:6px 0 0;color:#ede4ec;}
.decision-now{border-color:var(--gold);background:#ffbd590c;}
.decision-now p{color:var(--gold);}
.decision-reply{border-color:var(--accent);}
.decision-reply p{color:var(--gold);font-size:16px;font-weight:500;}
.decision-link{position:relative;height:26px;align-self:center;border-left:1px solid #8e794f;}
.decision-link:after{content:'';position:absolute;bottom:0;left:-3px;width:5px;height:5px;border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);transform:rotate(45deg);}
.decision-dot{position:absolute;width:4px;height:4px;background:var(--gold);left:-2.5px;top:10px;box-shadow:0 0 7px #ffbd5977;}
body[data-motion-enabled=false] .decision-dot{display:none;}
.flow-instruction{display:flex;justify-content:space-between;gap:14px;margin:0 0 18px;color:#cbbdc8;font:10px monospace;letter-spacing:1px;}
.flow-instruction span:last-child{color:var(--accent);letter-spacing:.3px;}
.grammar-flow{position:relative;container-type:inline-size;padding:0 0 8px;}
.flow-connections{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;color:var(--accent);z-index:0;}
.flow-wire{stroke:#786371;stroke-width:1;fill:none;vector-effect:non-scaling-stroke;}
.flow-wire.selected{stroke:var(--gold);stroke-width:1.2;}
.flow-pulse{stroke:var(--accent);stroke-width:1.8;fill:none;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px #68e4ef44);}
body[data-motion-enabled=false] .flow-pulse{display:none;}
.flow-root{position:relative;z-index:1;width:300px;max-width:100%;margin:0 auto 48px;padding:12px 20px;background:#2c251d;border:1px solid var(--gold);text-align:center;border-radius:4px;}
.flow-root small{display:block;color:var(--accent);font:8px monospace;letter-spacing:1.5px;margin-bottom:4px;}
.flow-root strong{color:var(--gold);font-size:18px;line-height:1.3;font-weight:500;}
.flow-branches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:start;}
.flow-branch{min-width:0;}
.flow-context{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 10px;min-height:53px;background:#29222b;border:1px solid #766075;}
.flow-context span{font:9px monospace;color:var(--accent);}
.flow-context strong{font-size:12.6px;font-weight:500;line-height:1.4;}
.flow-leaves{margin-top:31px;}
.prediction-leaves{display:grid;gap:13px;padding-left:15px;}
.flow-leaf{display:flex;position:relative;z-index:1;flex-direction:column;align-items:flex-start;gap:7px;text-align:left;width:100%;min-height:119px;padding:16px 14px;background:#241e27;border:1px solid #766075;border-radius:3px;color:#ece5ec;}
.flow-leaf small{font:8px monospace;letter-spacing:.8px;color:#c9b9c6;padding-right:11px;}
.flow-leaf strong{font:500 19.8px/1.15 var(--display);color:var(--gold);}
.flow-leaf span{font-size:11px;color:#d1c3ce;line-height:1.5;}
.flow-leaf i{font-style:normal;position:absolute;right:10px;top:12px;color:var(--accent);font-size:12px;}
.flow-leaf:hover{background:#342b25;border-color:var(--accent);}
.flow-leaf.active{border-color:var(--gold);background:#352b1d;box-shadow:inset 3px 0 var(--gold),0 0 20px #ffbd5909;}
.flow-leaf.active small{color:var(--accent);}
.prediction-leaves .flow-leaf{min-height:88px;padding:10px 13px;gap:4px;}
.prediction-leaves .flow-leaf strong{font-size:18.9px;}
.flow-detail{border:1px solid #987a4c;background:#221e22;padding:21px 24px;margin-top:27px;}
.flow-detail>header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.flow-detail .eyebrow{font-size:9px;letter-spacing:1px;color:var(--accent);}
.flow-detail h3{font:500 18.9px/1.3 var(--display);margin:0;color:var(--gold);}
.form-switch{display:flex;align-items:stretch;gap:5px;flex-shrink:0;}
.form-switch button{display:flex;align-items:center;gap:6px;background:#29222a;border:1px solid #726170;border-radius:3px;padding:9px 11px;color:#e6dae4;font-size:12px;}
.form-switch button b{font-weight:500;color:var(--accent);}
.form-switch button:hover{border-color:var(--accent);}
.form-switch button.active{background:var(--gold);color:#241a0c;border-color:var(--gold);}
.form-switch button.active b{color:#241a0c;}
.flow-context-copy{margin:12px 0 19px;font-size:15px;line-height:1.6;color:#d8cbd5;}
.flow-combination{border-top:1px solid #62515e;padding-top:17px;}
.flow-combination .formula{margin-bottom:13px;}
.flow-sentence{font-size:23.4px;line-height:1.7;}
.flow-form-note{margin:13px 0 0;color:#d6c8d3;font-size:12.6px;line-height:1.65;}
.flow-overlap{display:flex;gap:18px;align-items:baseline;font-size:13px;line-height:1.6;color:#cbbcc7;margin:17px 0 0;}
.flow-overlap strong{font:9px monospace;letter-spacing:.9px;color:var(--accent);white-space:nowrap;}
body[data-theme=cyberpunk] .flow-root{border-radius:0;border-left:4px solid var(--cyan);box-shadow:4px 4px #67304f;background:#31232a;}
body[data-theme=cyberpunk] .flow-context{background:#302438;border-color:#876082;}
body[data-theme=cyberpunk] .flow-context span{color:#271b22;background:var(--pink);padding:2px 4px;}
body[data-theme=cyberpunk] .flow-leaf{border-radius:0;background:#291d30;}
body[data-theme=cyberpunk] .flow-leaf.active{background:#3b2d24;box-shadow:3px 3px var(--pink);border-color:var(--gold);}
body[data-theme=cyberpunk] .flow-detail{border:1px solid var(--cyan);border-left:3px solid var(--gold);box-shadow:4px 4px #793453;background:#261e2a;}
body[data-theme=cyberpunk] .form-switch button{border-radius:0;}
@container (max-width:789px){
.flow-root{margin-left:40px;margin-right:0;width:calc(100% - 40px);margin-bottom:25px;padding:11px 14px;}
.flow-branches{grid-template-columns:1fr;gap:26px;margin-left:40px;}
.flow-context{justify-content:flex-start;min-height:42px;}
.flow-leaf{min-height:99px;}
.flow-leaves{margin-top:24px;}
.prediction-leaves{padding-left:15px;}
}
@media(max-width:1100px){body[data-theme] .topics{gap:20px;}body[data-theme] .topics :is(button,a).flow-nav,body[data-theme] .topics :is(button,a).compare-nav{font-size:11px;padding:8px 10px;}body[data-theme] .topics :is(button,a).compare-nav{margin-left:-10px;}.flow-branches{gap:13px;}.flow-context strong{font-size:11.7px;}.flow-leaf{padding:14px 11px;}.flow-leaf strong{font-size:18px;}}
@media(max-width:900px){body[data-theme] .topics{gap:14px;}body[data-theme] .topics :is(button,a) span{display:none;}body[data-theme] .topics :is(button,a).compare-nav{margin-left:-5px;}.flow-detail{padding:20px;}.form-switch{margin-top:2px;}.flow-overlap{display:block;}.flow-overlap strong{display:block;margin-bottom:7px;}}
@media(max-width:700px){
.time-path{flex-direction:column;gap:20px;padding:23px 18px;}.time-node{flex:none;width:100%;}.time-arrow{flex:none;width:28px;height:28px;transform:rotate(90deg);font-size:26px;}.time-node strong{font-size:19.8px;}.time-node small{font-size:9px;}
body[data-theme] .topics{gap:0;padding:0 10px;}
body[data-theme] .topics :is(button,a).flow-nav,body[data-theme] .topics :is(button,a).compare-nav{grid-column:span 2;margin:7px 4px;min-height:35px;padding:8px 7px;font-size:11px;}
body[data-theme] .topics :is(button,a).compare-nav{border-top:1px solid var(--gold);}
.flow-instruction{font-size:9px;line-height:1.5;gap:8px;flex-direction:column;}
.flow-root strong{font-size:16.2px;}.flow-context strong{font-size:11.7px;}.flow-detail{padding:17px 14px;}.flow-detail h3{font-size:18px;}.flow-detail .eyebrow{font-size:8px;line-height:1.6;}
.form-switch{width:100%;gap:5px;}.form-switch button{flex:1;justify-content:center;font-size:11px;padding:10px 5px;gap:4px;}.flow-sentence{font-size:20.7px;line-height:1.8;}.flow-context-copy{font-size:14px;}.flow-form-note{font-size:11.7px;}
.flow-combination .formula-token{font-size:11px;padding:6px 7px;}
.connector-map>div{grid-template-columns:minmax(0,1fr) 14px 24px;gap:4px;}.connector-map>div>span:first-child{font-size:9px;line-height:1.45;}
.decision-event{padding:8px;}.decision-event small{font-size:7px;letter-spacing:.3px;}.decision-event p{font-size:11px;}.decision-reply p{font-size:12px;}.decision-link{height:22px;}
}
@media(prefers-reduced-motion:reduce){.flow-leaf,.topics :is(button,a){transition:none!important;}}
body:is([data-theme=atlas]){color-scheme:light;background:#fff;color:#1b191a;}
body:is([data-theme=atlas]) :is(button,a,select):focus-visible{outline-color:#7f571b;}
body:is([data-theme=atlas]) .masthead{border-color:#d5d5d5;}
body:is([data-theme=atlas]) .brand{color:#606060;}
body:is([data-theme=atlas]) .brand b{color:#1b191a;position:relative;}
body:is([data-theme=atlas]) .brand b:after{content:'';position:absolute;bottom:0;left:0;right:2px;height:3px;background:var(--gold);}
body:is([data-theme=atlas]) .brand>span{background:#c6c6c6;}
body:is([data-theme=atlas]) .edition{color:#6a6a6a;}
body:is([data-theme=atlas]) :is(.edition i,.motion-bar i){background:#616161;box-shadow:none;}
body:is([data-theme=atlas]) .intro .eyebrow{color:#656565;}
body:is([data-theme=atlas]) .intro h1{color:#1b191a;font-weight:500;}
body:is([data-theme=atlas]) .intro h1>span{color:#a06b1e;}
body:is([data-theme=atlas]) .preferences label{color:#656565;}
body:is([data-theme=atlas]) select{color:#2c2c2c;background:#fff;border-color:#c7c7c7;}
body:is([data-theme=atlas]) .preferences button{color:#464646;}
body:is([data-theme=atlas]) .direction{background:#fafafa;border-color:#d3d3d3;box-shadow:none;}
body:is([data-theme=atlas]) .direction:hover{border-color:#949494;}
body:is([data-theme=atlas]) .direction.active{background:#fff6e5;border-color:#c39042;box-shadow:inset 0 -2px var(--gold);}
body:is([data-theme=atlas]) .direction small{color:#6a6a6a;}
body:is([data-theme=atlas]) .direction strong{color:#252525;}
body:is([data-theme=atlas]) .direction em{color:#686868;}
body:is([data-theme=atlas]) .direction-arrow{color:#865d20;}
body:is([data-theme=atlas]) .cyber-preview{border-color:#4c7781;background:linear-gradient(90deg,transparent 70%,#b54b8250 70%);}
body:is([data-theme=atlas]) .lesson{background:#f7f7f7;border:1px solid #bebebe;border-radius:4px;box-shadow:none;}
body:is([data-theme=atlas]) .console-bar{background:#ebebeb;border-color:#c2c2c2;color:#626262;}
body:is([data-theme=atlas]) .console-title{color:#393939;}
body:is([data-theme=atlas]) #systemLabel{color:#565656;}
body:is([data-theme=atlas]) #languageToggle{color:#575757;}
body:is([data-theme=atlas]) #languageToggle b{color:#1b1b1b;}
body:is([data-theme=atlas]) #languageToggle span{color:#7a7a7a;}
body:is([data-theme=atlas]) .topics{background:#f9f9f9;border-color:#c8c8c8;}
body:is([data-theme=atlas]) .topics :is(button,a){color:#575757;border-color:#d7d7d7;}
body:is([data-theme=atlas]) .topics :is(button,a) span{color:#6e6e6e;}
body:is([data-theme=atlas]) .topics :is(button,a).active{background:#fff1d4;color:#282828;}
body:is([data-theme=atlas]) .topics :is(button,a).active span{color:#75521c;}
body:is([data-theme=atlas]) .topics :is(button,a).active:after{background:#b7852d;box-shadow:none;}
body:is([data-theme=atlas]) .topics :is(button,a).flow-nav{background:#fff;border-color:#a7a7a7;color:#3e3e3e;}
body:is([data-theme=atlas]) .topics :is(button,a).flow-nav:hover,body:is([data-theme=atlas]) .topics :is(button,a).flow-nav.active{background:#fff1d4;border-color:#a57628;color:#32270f;}
body:is([data-theme=atlas]) .topics :is(button,a).compare-nav{background:var(--gold);border-color:#b5822f;color:#2d240f;box-shadow:none;border-radius:0;}
body:is([data-theme=atlas]) .topics :is(button,a).compare-nav:hover{background:#ffd087;border-color:#986a24;}
body:is([data-theme=atlas]) .topics :is(button,a).compare-nav.active{outline-color:#787878;}
body:is([data-theme=atlas]) .stage:before{background:radial-gradient(circle,#cbcbcb .65px,transparent .9px);background-size:30px 30px;opacity:.5;}
body:is([data-theme=atlas]) .frame-corner{color:#6f6f6f;border-color:#6f6f6f;filter:none;}
body:is([data-theme=atlas]) .heading-code{color:#565656;border-color:#bfbfbf;background:#f0f0f080;letter-spacing:1.4px;}
body:is([data-theme=atlas]) .compare-heading .heading-code{color:#6d6d6d;border-color:#bfbfbf;background:transparent;}
body:is([data-theme=atlas]) .lesson-heading .eyebrow{color:#606060;}
body:is([data-theme=atlas]) .rule-title{color:#1f1f1f;font-weight:500;}
body:is([data-theme=atlas]) .rule-meaning{color:#555555;}
body:is([data-theme=atlas]) .rule-meaning b{color:#292929;background:#ffbd5933;padding:0 3px;font-weight:600;}
body:is([data-theme=atlas]) .section-label{color:#616161;}
body:is([data-theme=atlas]) .section-label .accent{color:#636363;}
body:is([data-theme=atlas]) .formula-token{background:#fff;border-color:#bcbcbc;color:#393939;border-radius:0;}
body:is([data-theme=atlas]) .formula-token.focus{background:var(--gold);border-color:#cc9c4f;color:#2b230e;box-shadow:none;}
body:is([data-theme=atlas]) .formula-plus{color:#6c6c6c;}
body:is([data-theme=atlas]) .table-shell{border-color:#bbbbbb;}
body:is([data-theme=atlas]) .grammar-table th{background:#ebebeb;color:#505050;border-color:#c4c4c4;}
body:is([data-theme=atlas]) .grammar-table tbody tr{background:#fbfbfb;}
body:is([data-theme=atlas]) .grammar-table tbody tr.active{background:#fff0d3;box-shadow:inset 3px 0 #c58c2e;}
body:is([data-theme=atlas]) .grammar-table td{border-color:#d2d2d2;}
body:is([data-theme=atlas]) .grammar-table button{color:#2e2e2e;}
body:is([data-theme=atlas]) .grammar-table button span{color:#727272;}
body:is([data-theme=atlas]) .grammar-table td:nth-child(2){color:#2d2d2d;font-family:'Satoshi',sans-serif;font-weight:600;}
body:is([data-theme=atlas]) .grammar-table td:last-child{color:#5b5b5b;}
body:is([data-theme=atlas]) .grammar-table .chosen{color:#79571d;font-weight:500;}
body:is([data-theme=atlas]) .selected-example{background:#fff9eb;color:#2f2f2f;border-color:#b58230;}
body:is([data-theme=atlas]) .selected-example small{color:#6b6b6b;}
body:is([data-theme=atlas]) .selected-example mark{color:#3f3616;}
body:is([data-theme=atlas]) .base-verb-strip{color:#585858;}
body:is([data-theme=atlas]) .base-verb-strip>span{color:#636363;}
body:is([data-theme=atlas]) .base-verb-strip b{color:#3f3f3f;border-color:#c0c0c0;background:#f6f6f6;}
body:is([data-theme=atlas]) .base-verb-strip p{color:#5c5c5c;}
body:is([data-theme=atlas]) .context-story{color:#565656;}
body:is([data-theme=atlas]) .time-path{background:#fff;border-color:#c0c0c0;}
body:is([data-theme=atlas]) .time-node small{color:#6e6e6e;}
body:is([data-theme=atlas]) .time-node strong{color:#323232;}
body:is([data-theme=atlas]) .time-arrow{color:#707070;}
body:is([data-theme=atlas]) .teaching-tip{color:#585858;background:#fff8e9;border-color:#c59134;}
body:is([data-theme=atlas]) .example-context{color:#585858;}
body:is([data-theme=atlas]) .sentence-board{background:#fff;border-color:#c2c2c2;border-left:3px solid var(--gold);}
body:is([data-theme=atlas]) .sentence-board:after{color:#787878;}
body:is([data-theme=atlas]) .sentence{color:#303030;}
body:is([data-theme=atlas]) .sentence mark.animated-focus{color:#302e10;background:#fff0d1;}
body:is([data-theme=atlas]) .perimeter-track{stroke:#a18b60;opacity:.4;}
body:is([data-theme=atlas]) .perimeter-runner{stroke:#986d22;filter:none;}
body:is([data-theme=atlas]) .negative-transform>span{background:#fff;border-color:#bdbdbd;color:#515151;}
body:is([data-theme=atlas]) .negative-transform>span:nth-of-type(2){border-color:#bc8c36;color:#705017;background:#fff4de;}
body:is([data-theme=atlas]) .negative-transform b{color:#707070;}
body:is([data-theme=atlas]) .negative-transform small{color:#6e6e6e;}
body:is([data-theme=atlas]) .before-sentence{background:#f0f0f0;color:#646464;border-color:#a3a3a3;}
body:is([data-theme=atlas]) .before-sentence small{color:#737373;}
body:is([data-theme=atlas]) .question-zone{background:#fff;border-color:#b4b4b4;}
body:is([data-theme=atlas]) .question-status{color:#6f6f6f;}
body:is([data-theme=atlas]) .question-status span{color:#805b1d;}
body:is([data-theme=atlas]) .word-token{background:#f6f6f6;border-color:#b3b3b3;color:#444444;}
body:is([data-theme=atlas]) .word-token.aux{background:var(--gold);border-color:#c7963d;color:#35270e;box-shadow:none;}
body:is([data-theme=atlas]) .word-token.subject{background:#f4f4f4;border-color:#a7a7a7;color:#505050;}
body:is([data-theme=atlas]) .word-token.punct{background:transparent;border:0;color:#8b621e;}
body:is([data-theme=atlas]) .question-note{color:#616161;}
body:is([data-theme=atlas]) .question-note strong{color:#373737;}
body:is([data-theme=atlas]) .question-zone .question-path{stroke:#7d7d7d;}
body:is([data-theme=atlas]) .visual-panel{background:#f4f4f4;border-color:#b7b7b7;box-shadow:none;}
body:is([data-theme=atlas]) .visual-panel:before,body:is([data-theme=atlas]) .visual-panel:after{background:#787878;}
body:is([data-theme=atlas]) .panel-label{color:#616161;}
body:is([data-theme=atlas]) .panel-label span{color:#7a7a7a;}
body:is([data-theme=atlas]) .focus-module small{color:#707070;}
body:is([data-theme=atlas]) .focus-word{color:#302b22;background:#fff0d3;box-shadow:none;text-shadow:none;}
body:is([data-theme=atlas]) .panel-caption{color:#5f5f5f;border-color:#c4c4c4;}
body:is([data-theme=atlas]) .panel-caption strong{color:#434343;font-weight:600;}
body:is([data-theme=atlas]) .panel-foot{color:#757575;border-color:#cbcbcb;}
body:is([data-theme=atlas]) .panel-foot span:last-child{color:#606060;}
body:is([data-theme=atlas]) .diagram{color:#606060;}
body:is([data-theme=atlas]) .diagram text{fill:#626262;}
body:is([data-theme=atlas]) .diagram .gold{stroke:#94702b;}
body:is([data-theme=atlas]) .diagram .cyan{stroke:#787878;}
body:is([data-theme=atlas]) .diagram .dim{stroke:#cbcbcb;}
body:is([data-theme=atlas]) .diagram .label{fill:#4b4b4b;}
body:is([data-theme=atlas]) .diagram .small{fill:#707070;}
body:is([data-theme=atlas]) .diagram .cell{fill:#f8f8f8;stroke:#adadad;}
body:is([data-theme=atlas]) .diagram .on{fill:#fff0d2;stroke:#bb8a35;}
body:is([data-theme=atlas]) .diagram .solid{fill:#727272;}
body:is([data-theme=atlas]) .calendar-mini span{color:#717171;}
body:is([data-theme=atlas]) .calendar-mini b{background:#fff;border-color:#c2c2c2;color:#626262;}
body:is([data-theme=atlas]) .calendar-mini b.booked{background:var(--gold);border-color:#b88b3a;color:#382c11;box-shadow:none;}
body:is([data-theme=atlas]) .calendar-meeting{color:#454545;}
body:is([data-theme=atlas]) .calendar-confirmed{color:#6c6c6c;}
body:is([data-theme=atlas]) .signal-message{background:#f0f0f0;border-color:#a6a6a6;color:#5e5e5e;}
body:is([data-theme=atlas]) .signal-reply{background:#fff6e4;border-color:#ba8c36;color:#4c4317;}
body:is([data-theme=atlas]) .route-event{background:#fff;border-color:#c0c0c0;}
body:is([data-theme=atlas]) .route-event small{color:#6f6f6f;}
body:is([data-theme=atlas]) .route-event strong{color:#444444;}
body:is([data-theme=atlas]) .route-event.late{border-color:#bd8e35;background:#fff7e7;}
body:is([data-theme=atlas]) .route-event.late small{color:#8b641e;}
body:is([data-theme=atlas]) .connector-map>div{background:#ededed;color:#696969;}
body:is([data-theme=atlas]) .connector-map>div span{color:#636363;}
body:is([data-theme=atlas]) .connector-map>div b{color:#444444;}
body:is([data-theme=atlas]) .connector-map>div.active{outline-color:#c39545;background:#fff0d2;}
body:is([data-theme=atlas]) .aux-route{color:#737373;}
body:is([data-theme=atlas]) .aux-route b{color:#33270c;}
body:is([data-theme=atlas]) .question-focus small{color:#727272;}
body:is([data-theme=atlas]) .decision-event{background:#fff;border-color:#bbbbbb;}
body:is([data-theme=atlas]) .decision-event small{color:#717171;}
body:is([data-theme=atlas]) .decision-event p{color:#5a5a5a;}
body:is([data-theme=atlas]) .decision-now{background:#fff4de;border-color:#c19340;}
body:is([data-theme=atlas]) .decision-now p{color:#69521e;}
body:is([data-theme=atlas]) .decision-reply{background:#f8f8f8;border-color:#a1a1a1;}
body:is([data-theme=atlas]) .decision-reply p{color:#444444;}
body:is([data-theme=atlas]) .decision-link{border-color:#b5b5b5;}
body:is([data-theme=atlas]) .decision-link:after{border-color:#7e7e7e;}
body:is([data-theme=atlas]) .decision-dot{background:#aa7b25;box-shadow:none;}
body:is([data-theme=atlas]) .compare-card{background:#fff;border-color:#c1c1c1;}
body:is([data-theme=atlas]) .compare-card:nth-child(2),body:is([data-theme=atlas]) .compare-card:nth-child(3){border-color:#c1c1c1;}
body:is([data-theme=atlas]) .compare-card h3,body:is([data-theme=atlas]) .compare-card:nth-child(2) h3,body:is([data-theme=atlas]) .compare-card:nth-child(3) h3{color:#353535;}
body:is([data-theme=atlas]) .compare-card .card-number{color:#717171;}
body:is([data-theme=atlas]) .compare-card .scenario{color:#626262;border-color:#d4d4d4;}
body:is([data-theme=atlas]) .compare-card .compare-sentence{color:#3d3d3d;}
body:is([data-theme=atlas]) .compare-card mark,body:is([data-theme=atlas]) .compare-card:nth-child(2) mark,body:is([data-theme=atlas]) .compare-card:nth-child(3) mark{color:#534518;background:#fff0ce;border-color:#af812b;}
body:is([data-theme=atlas]) .compare-purpose{color:#6e6e6e;}
body:is([data-theme=atlas]) .compare-purpose i{background:#c18e34;}
body:is([data-theme=atlas]) .compare-summary{background:#fff7e6;border-color:#bb8e38;color:#616161;}
body:is([data-theme=atlas]) .prediction-note{color:#636363;}
body:is([data-theme=atlas]) .flow-instruction{color:#6b6b6b;}
body:is([data-theme=atlas]) .flow-instruction span:last-child{color:#696969;}
body:is([data-theme=atlas]) .flow-connections{color:#7b7b7b;}
body:is([data-theme=atlas]) .flow-root{background:#eaeaea;border-color:#b3b3b3;border-top:2px solid var(--gold);box-shadow:none;}
body:is([data-theme=atlas]) .flow-root small{color:#6f6f6f;}
body:is([data-theme=atlas]) .flow-root strong{color:#3c3c3c;}
body:is([data-theme=atlas]) .flow-wire{stroke:#ababab;}
body:is([data-theme=atlas]) .flow-wire.selected{stroke:#98742d;}
body:is([data-theme=atlas]) .flow-pulse{stroke:#373737;filter:none;stroke-width:1.4;}
body:is([data-theme=atlas]) .flow-context{background:#fff;border-color:#bcbcbc;}
body:is([data-theme=atlas]) .flow-context span{background:var(--gold);color:#382b0f;padding:2px 4px;}
body:is([data-theme=atlas]) .flow-context strong{color:#505050;}
body:is([data-theme=atlas]) .flow-leaf{background:#fbfbfb;border-color:#bfbfbf;color:#4f4f4f;}
body:is([data-theme=atlas]) .flow-leaf small{color:#727272;}
body:is([data-theme=atlas]) .flow-leaf strong{color:#3d3d3d;}
body:is([data-theme=atlas]) .flow-leaf span{color:#6c6c6c;}
body:is([data-theme=atlas]) .flow-leaf i{color:#737373;}
body:is([data-theme=atlas]) .flow-leaf:hover{background:#f4f4f4;border-color:#9a9a9a;}
body:is([data-theme=atlas]) .flow-leaf.active{background:#fff1d5;border-color:#c19440;box-shadow:inset 3px 0 var(--gold);}
body:is([data-theme=atlas]) .flow-leaf.active small{color:#806023;}
body:is([data-theme=atlas]) .flow-detail{background:#fff;border-color:#b7b7b7;box-shadow:none;}
body:is([data-theme=atlas]) .flow-detail .eyebrow{color:#717171;}
body:is([data-theme=atlas]) .flow-detail h3{color:#414141;}
body:is([data-theme=atlas]) .form-switch button{background:#f7f7f7;border-color:#c2c2c2;color:#5e5e5e;border-radius:0;}
body:is([data-theme=atlas]) .form-switch button b{color:#727272;}
body:is([data-theme=atlas]) .form-switch button:hover{border-color:#999999;}
body:is([data-theme=atlas]) .form-switch button.active{background:var(--gold);border-color:#bc8d36;color:#382b10;}
body:is([data-theme=atlas]) .form-switch button.active b{color:#382b10;}
body:is([data-theme=atlas]) .flow-context-copy{color:#636363;}
body:is([data-theme=atlas]) .flow-combination{border-color:#cccccc;}
body:is([data-theme=atlas]) .flow-form-note{color:#6a6a6a;}
body:is([data-theme=atlas]) .flow-overlap{color:#717171;}
body:is([data-theme=atlas]) .flow-overlap strong{color:#606060;}
body:is([data-theme=atlas]) .lesson-footer{background:#f0f0f0;border-color:#c4c4c4;}
body:is([data-theme=atlas]) .steps button{color:#6e6e6e;}
body:is([data-theme=atlas]) .steps button span{color:#7f7f7f;}
body:is([data-theme=atlas]) .steps button.active{color:#423c16;font-weight:600;}
body:is([data-theme=atlas]) .steps button.active span{color:#8b631e;}
body:is([data-theme=atlas]) .lesson-actions button{color:#636363;}
body:is([data-theme=atlas]) .lesson-actions .primary{background:var(--gold);border:1px solid #c29440;color:#30250e;box-shadow:none;border-radius:0;}
body:is([data-theme=atlas]) .motion-bar{border-color:#d4d4d4;color:#737373;}
body:is([data-theme=atlas]) .motion-bar strong{color:#4d4d4d;}
body:is([data-theme=atlas]) .motion-bar button{color:#727272;}
body:is([data-theme=atlas]) .motion-bar button+button{color:#825e20;}
body:is([data-theme=atlas]) .page-footer{color:#787878;}
body:is([data-theme=atlas]) .page-footer button{color:#656565;}
body:is([data-theme=atlas]) dialog{background:#fbfbfb;color:#393939;border-color:#b6b6b6;}
body:is([data-theme=atlas]) dialog::backdrop{background:#4848484d;backdrop-filter:blur(4px);}
body:is([data-theme=atlas]) dialog .eyebrow{color:#707070;}
body:is([data-theme=atlas]) dialog p,body:is([data-theme=atlas]) dialog dd{color:#616161;}
body:is([data-theme=atlas]) dialog dt{color:#715922;}
body:is([data-theme=atlas]) .close-dialog{color:#5a5a5a;}
body:is([data-theme=atlas]) .links a{color:#626262;}
.directions{grid-template-columns:repeat(2,minmax(0,1fr));}
.direction{padding:14px 13px;gap:12px;}
.direction strong{font-size:13.5px;}
.direction em{font-size:9px;}
.lesson-workspace{display:grid;grid-template-columns:216px minmax(0,1fr);align-items:stretch;}
.lesson-canvas{min-width:0;container-type:inline-size;}
.lesson-rail{position:relative;display:flex;flex-direction:column;min-width:0;border-right:1px solid #695546;background:#211d22;}
.rail-heading{padding:24px 19px 21px;border-bottom:1px solid #594c56;}
.rail-heading small{display:block;font:8px monospace;letter-spacing:1.3px;color:var(--muted);margin-bottom:8px;}
.rail-heading strong{display:flex;justify-content:space-between;font:500 17.1px var(--display);color:var(--gold);}
.rail-heading strong span{font-weight:400;font-size:16px;color:var(--accent);}
.rail-section-label{padding:0 18px;margin:19px 0 10px;font:9px monospace;letter-spacing:1px;color:#ae9eab;display:flex;justify-content:space-between;gap:5px;line-height:1.5;}
.rail-section-label>span{font-size:8px;letter-spacing:.3px;color:var(--accent);}
body[data-theme] .lesson-rail .topics{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 10px 9px;border:0;background:transparent;overflow:visible;min-height:0;}
body[data-theme] .lesson-rail .topics :is(button,a){position:relative;display:flex;align-items:center;gap:9px;flex:none;align-self:stretch;width:100%;margin:0;padding:12px 10px;min-height:43px;white-space:normal;text-align:left;background:transparent;border:0;border-bottom:1px solid #51434e;box-shadow:none;border-radius:0;font-size:13px;line-height:1.4;color:#d3c8d1;}
body[data-theme] .lesson-rail .topics :is(button,a) span{display:block;flex:none;margin:0;font:9px monospace;color:#a293a0;}
body[data-theme] .lesson-rail .topics :is(button,a) b{margin-left:auto;font-size:15px;font-weight:400;}
body[data-theme] .lesson-rail .topics :is(button,a):hover{background:#ffffff06;color:var(--text);}
body[data-theme] .lesson-rail .topics :is(button,a).active{color:var(--gold);background:#ffbd590d;box-shadow:inset 2px 0 var(--gold);}
body[data-theme] .lesson-rail .topics :is(button,a).active span{color:var(--accent);}
body[data-theme] .lesson-rail .topics :is(button,a):after{display:none;}
body[data-theme] .lesson-rail .topics :is(button,a).flow-nav{border:1px solid #7c6854;margin-top:13px;color:var(--accent);}
body[data-theme] .lesson-rail .topics :is(button,a).compare-nav{margin-top:7px;background:var(--gold);color:#251b0d;border:1px solid var(--gold);}
body[data-theme] .lesson-rail .topics :is(button,a).compare-nav span{color:#251b0d;}
body[data-theme] .lesson-rail .topics :is(button,a).compare-nav:hover{background:#ffd28d;}
body[data-theme] .lesson-rail .topics :is(button,a).compare-nav.active{outline:1px solid var(--accent);outline-offset:2px;}
.rail-steps{border-top:1px solid #51434e;}
.rail-steps[hidden]{display:none;}
body[data-theme] .lesson-rail .steps{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 10px 15px;}
body[data-theme] .lesson-rail .steps button{display:flex;align-items:center;justify-content:flex-start;gap:11px;font-size:12px;min-height:35px;padding:8px 10px;color:#bdafbb;border:1px solid transparent;background:transparent;}
body[data-theme] .lesson-rail .steps button span{display:inline-block;font:9px monospace;color:#958792;}
body[data-theme] .lesson-rail .steps button.active{border-color:#917445;background:#ffbd5908;color:var(--gold);}
body[data-theme] .lesson-rail .steps button.active span{color:var(--accent);}
body[data-theme] .lesson-rail .steps button.active:after{content:'●';margin-left:auto;font-size:6px;color:var(--accent);}
.rail-controls{padding:13px 16px 18px;border-top:1px solid #51434e;margin-top:auto;}
body[data-theme] .lesson-rail .lesson-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:0;align-items:stretch;}
body[data-theme] .lesson-rail .lesson-actions button{font-size:11px;min-width:0;padding:9px 0;}
body[data-theme] .lesson-rail .lesson-actions .primary{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;min-width:0;min-height:44px;padding:11px 13px;white-space:normal;line-height:1.4;}
body[data-theme] .lesson-rail .lesson-actions .primary span{margin:0;}
body[data-theme] .lesson-rail .lesson-actions .primary b{margin-left:8px;}
.rail-foot{display:flex;justify-content:space-between;gap:5px;border-top:1px solid #51434e;padding:13px 17px;font:8px monospace;letter-spacing:.5px;color:#a395a1;}
#railPosition{color:var(--accent);}
.mobile-nav-bar{display:none;}
body[data-theme=cyberpunk] .lesson-rail{background:#281e2d;border-right:2px solid var(--pink);}
body[data-theme=cyberpunk] .rail-heading{background:#322037;border-color:var(--pink);}
body[data-theme=cyberpunk] .lesson-rail .topics :is(button,a).active{background:var(--gold);color:#261b20;box-shadow:3px 0 var(--pink);}
body[data-theme=cyberpunk] .lesson-rail .topics :is(button,a).active span{color:#261b20;}
body[data-theme=cyberpunk] .lesson-rail .steps button.active{border-color:var(--cyan);background:#37233c;}
body:is([data-theme=atlas]) .lesson-rail{background:#ededed;border-color:#c2c2c2;}
body:is([data-theme=atlas]) .rail-heading{background:#e7e7e7;border-color:#c2c2c2;}
body:is([data-theme=atlas]) .rail-heading strong{color:#2b2b2b;}
body:is([data-theme=atlas]) .rail-heading small{color:#656565;}
body:is([data-theme=atlas]) .rail-section-label{color:#606060;}
body:is([data-theme=atlas]) .lesson-rail .topics :is(button,a){color:#484848;border-color:#ccc;}
body:is([data-theme=atlas]) .lesson-rail .topics :is(button,a) span{color:#666;}
body:is([data-theme=atlas]) .lesson-rail .topics :is(button,a):hover{background:#fff;}
body:is([data-theme=atlas]) .lesson-rail .topics :is(button,a).active{background:#fff1d6;color:#302810;box-shadow:inset 2px 0 #b88631;}
body:is([data-theme=atlas]) .lesson-rail .topics :is(button,a).active span{color:#76551e;}
body:is([data-theme=atlas]) .lesson-rail .topics :is(button,a).flow-nav{border-color:#aaa;color:#444;}
body:is([data-theme=atlas]) .lesson-rail .topics :is(button,a).compare-nav{background:var(--gold);color:#302810;border-color:#b98b3b;}
body:is([data-theme=atlas]) .lesson-rail .steps button{color:#595959;}
body:is([data-theme=atlas]) .lesson-rail .steps button span{color:#737373;}
body:is([data-theme=atlas]) .lesson-rail .steps button.active{background:#fff8e8;border-color:#bd9852;color:#382e17;}
body:is([data-theme=atlas]) :is(.rail-steps,.rail-controls,.rail-foot){border-color:#c6c6c6;}
body:is([data-theme=atlas]) .rail-foot{color:#666;}
@container(max-width:850px){
.lesson-layout{grid-template-columns:minmax(0,1fr) 190px;gap:20px;}
.grammar-table th{padding:9px 8px;font-size:9px;letter-spacing:.5px;}
.grammar-table td{padding:10px 8px;}
.grammar-table td:last-child{font-size:13px;}
.grammar-table button{font-size:14px;}
.formula-token{font-size:13px;}
.comparison-grid{grid-template-columns:1fr;}
.compare-card .scenario,.compare-card .compare-sentence{min-height:0;}
.prediction-grid{grid-template-columns:1fr;}
}
@container(max-width:680px){
.lesson-layout{display:flex;flex-direction:column;gap:24px;}
.main-teaching,.visual-panel{width:100%;}
.visual-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;min-height:0;}
.visual-panel .panel-label,.visual-panel .panel-foot{grid-column:1/-1;}
.visual-panel .focus-module,.visual-panel .panel-caption{grid-column:1;}
.visual-panel .visual-body{grid-column:2;grid-row:2/4;align-self:center;}
.time-path{flex-direction:column;gap:20px;}
.time-arrow{transform:rotate(90deg);}
}
@media(max-width:1150px){.lesson-workspace{grid-template-columns:195px minmax(0,1fr);}.direction em{display:none;}.direction strong{font-size:11.7px;}.mini-preview{width:28px;height:34px;}.direction small{font-size:8px;}}
@media(max-width:900px){
.directions{grid-template-columns:repeat(2,minmax(0,1fr));}
.direction{min-height:70px;align-items:center;gap:14px;}
.direction strong{font-size:12.6px;}
.mini-preview{display:block;}
.lesson-workspace{display:flex;flex-direction:column;}
.mobile-nav-bar{display:block;order:-1;background:var(--panel);border-bottom:1px solid var(--line);}
#navToggle{width:100%;display:flex;align-items:center;gap:10px;padding:14px 18px;background:transparent;color:var(--text);font-size:13px;text-align:left;}
#navToggle>span{color:var(--gold);font-size:15px;}
#navCurrent{font-size:11px;color:var(--muted);margin-left:auto;}
#navToggle>b{font-weight:400;font-size:20px;color:var(--accent);}
body[data-nav-open=true] #navToggle>b{transform:rotate(45deg);}
.lesson-rail{display:none;border-right:0!important;border-bottom:1px solid var(--line);}
body[data-nav-open=true] .lesson-rail{display:grid;grid-template-columns:1fr 1fr;}
.rail-heading{grid-column:1/-1;display:none;}
.rail-topics{grid-column:1;}
.rail-steps{grid-column:2;border-top:0;border-left:1px solid var(--line);}
.rail-section-label{font-size:8px;padding:0 12px;flex-direction:column;gap:5px;min-height:27px;}
body[data-theme] .lesson-rail .topics{padding:0 8px 10px;}
body[data-theme] .lesson-rail .topics :is(button,a){font-size:12px;padding:11px 7px;gap:6px;min-height:42px;}
body[data-theme] .lesson-rail .steps{padding:0 8px;}
body[data-theme] .lesson-rail .steps button{font-size:12px;min-height:42px;gap:7px;}
.rail-controls{grid-column:1/-1;margin-top:0;padding:12px;}
body[data-theme] .lesson-rail .lesson-actions{grid-template-columns:auto auto minmax(0,1fr);gap:18px;}
body[data-theme] .lesson-rail .lesson-actions .primary{grid-column:auto;justify-content:space-between;}
.rail-foot{grid-column:1/-1;}
body[data-lesson-topic="4"] .rail-topics,body[data-lesson-topic="5"] .rail-topics{grid-column:1/-1;}
body:is([data-theme=atlas]) .mobile-nav-bar{background:#ededed;border-color:#bdbdbd;}
body:is([data-theme=atlas]) #navToggle{color:#323232;}
body:is([data-theme=atlas]) #navToggle>span{color:#856127;}
}
@media(max-width:450px){.mini-preview{display:none;}.directions{gap:7px;}.direction{padding:11px;min-height:68px;}.direction strong{font-size:11.7px;}.direction small{font-size:7px;}#navCurrent{font-size:10px;}#navToggle{font-size:12px;padding:12px;gap:8px;}}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-rail .topics>[data-topic][aria-expanded]:after{display:block;content:'+';margin-left:auto;color:var(--cyan);font:16px/1 monospace;position:static;flex:none;width:auto;height:auto;inset:auto;background:none;box-shadow:none;}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-rail .topics>[data-topic][aria-expanded=true]:after{content:'−';}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-rail .topic-submenu{border:0;border-left:1px solid #68e4ef55;margin:0 0 8px 19px;background:#68e4ef04;}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .topic-submenu>.rail-section-label{display:none;}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-rail .topic-submenu .steps{padding:7px 4px 8px 7px;gap:2px;}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-rail .topic-submenu .steps button{min-height:36px;padding:8px;gap:5px;font-size:12px;line-height:1.45;border:1px solid transparent;border-radius:0;color:#bdafbb;box-shadow:none;}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-rail .topic-submenu .steps button>span{display:none;}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-rail .topic-submenu .steps button:hover{background:#68e4ef0a;color:var(--text);}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-rail .topic-submenu .steps button.active{color:var(--gold);border-color:#917445;background:#ffbd590c;}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-rail .topic-submenu .steps button.active:after{display:block;content:'●';position:static;margin-left:auto;flex:none;font-size:6px;color:var(--cyan);width:auto;height:auto;inset:auto;background:none;box-shadow:none;}
@media(max-width:900px){
body:is([data-theme=cyberpunk],[data-theme=atlas]) .rail-topics{grid-column:1/-1;}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-rail .topic-submenu{margin-left:19px;}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-rail .topic-submenu .steps button{min-height:44px;padding:11px 12px;}
}
body[data-theme] .lesson-rail .topics>.overview-nav{display:none;}
body:is([data-theme=cyberpunk],[data-theme=atlas]) .lesson-rail .topics>.overview-nav{display:flex;}
.overview-heading .rule-meaning{max-width:880px;}
.overview-instruction{font:11px monospace;color:var(--cyan);margin:0 0 18px;}
.overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.overview-card{min-width:0;border:1px solid #806842;background:#201c23;padding:22px 18px;display:flex;flex-direction:column;}
.overview-card>.eyebrow{font-size:9px;line-height:1.7;min-height:31px;color:var(--cyan);}
.overview-card h3{font:500 22.5px/1.15 var(--display);margin:6px 0 20px;}
.overview-form{margin:0 0 18px;}
.overview-card .focus-word{font:500 15px/1.6 var(--font);padding:5px 8px;display:inline-block;}
.overview-meaning{font-size:13.5px;line-height:1.7;color:#d8ced6;margin:0 0 22px;flex:1;}
.overview-meaning b{color:var(--gold);font-weight:500;}
.scenario-options{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:17px;}
.scenario-options button{border:1px solid #6e5b67;background:transparent;color:#cdbfc9;font:11px/1.4 var(--font);padding:8px 9px;cursor:pointer;}
.scenario-options button:hover{border-color:var(--cyan);color:var(--text);}
.scenario-options button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#251b0d;}
.overview-example{border-top:1px solid #554652;padding-top:16px;min-height:150px;}
.overview-example .sentence{font-size:18.9px;line-height:1.65;}
.overview-note{margin-top:22px;padding:20px 24px;border-left:2px solid var(--cyan);background:#68e4ef06;}
.overview-note h3{font:500 17.1px var(--display);margin:0 0 9px;color:var(--text);}
.overview-note p{font-size:13.5px;line-height:1.7;color:#d8ced6;margin:0;}
@container(max-width:780px){.overview-grid{grid-template-columns:1fr;}.overview-card>.eyebrow{min-height:0;}.overview-example{min-height:0;}.overview-card{padding:22px;}}
.question-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;}
.question-card{min-width:0;padding:24px 21px;border:1px solid #806842;background:#201c23;}
.open-question-card{border-color:#68e4ef66;}
.question-card>header{margin-bottom:25px;}
.question-card h3{font:500 22.5px/1.2 var(--display);margin:10px 0;}
.question-card>header>p:last-child{font-size:15px;line-height:1.6;color:#cfc4cd;}
.question-card .eyebrow{font-size:10px;color:var(--gold);}
.open-question-card .eyebrow{color:var(--cyan);}
.question-card .section-label{flex-wrap:wrap;gap:8px;line-height:1.6;}
.question-card .before-sentence{min-height:100px;font-size:16px;line-height:1.7;}
.question-card .question-zone{padding:18px 14px;min-height:200px;}
.question-card .question-status{display:flex;flex-wrap:wrap;gap:10px;font-size:9px;line-height:1.6;}
.question-card .question-row,.open-question-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;position:relative;}
.question-card .word-token{font-size:17.1px;padding:9px 11px;white-space:normal;max-width:100%;overflow-wrap:break-word;}
.open-question-row .question-word{border-color:var(--cyan);background:#68e4ef12;color:var(--cyan);}
.open-question-row:not([data-complete=true]) [data-open-word=wh]{opacity:0;}
body[data-motion-enabled=false] .open-question-row [data-open-word=wh]{opacity:1;}
.requested-detail{font-style:normal;color:var(--cyan);border-bottom:1px solid #68e4ef66;}
.question-card .question-note{font-size:15px;line-height:1.7;}
.open-question-formula .formula-token{font-size:12px;padding:7px 9px;min-height:32px;}
.open-question-formula .formula-plus{font-size:14px;}
.formula-token.wh{color:var(--cyan);border-color:#68e4ef66;background:#68e4ef0a;}
.model-answer{border-left:2px solid var(--gold);padding:13px 16px;background:#ffbd5906;font-size:17px;line-height:1.7;margin:23px 0 0;color:var(--text);}
.model-answer small{display:block;font:9px monospace;letter-spacing:1px;color:var(--muted);margin-bottom:8px;}
.open-question-card .model-answer{border-color:var(--cyan);background:#68e4ef06;}
.open-form-switch{display:flex;gap:8px;margin:0 0 20px;}
.open-form-switch button{padding:9px 18px;border:1px solid #68e4ef66;background:transparent;color:var(--cyan);font-size:13px;cursor:pointer;}
.open-form-switch button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#251b0d;}
@container(max-width:760px){.question-pair{grid-template-columns:1fr;}.question-card .question-zone{min-height:0;}}
@media(max-width:500px){.question-card{padding:22px 15px;}.question-card .word-token{font-size:17px;}.question-card .before-sentence{min-height:0;}.question-card .question-zone{padding:18px 10px;}}
.open-question-row .question-ending{display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0;}
.open-question-row .question-ending [data-open-word=rest]{min-width:0;flex:0 1 auto;}
.open-question-row .question-ending .punct{flex:none;padding-left:0;padding-right:0;}
body[data-theme=cyberpunk] .lesson-rail .topic-submenu{border-left-color:var(--pink);background:#ff66ad06;}
body[data-theme=cyberpunk] .lesson-rail .topic-submenu .steps button.active{border-color:var(--cyan);background:#37233c;color:var(--gold);}
body[data-theme=cyberpunk] .lesson-rail .topics>[data-topic][aria-expanded=true]:after{color:#261b20;}
body[data-theme=cyberpunk] .overview-card{border-color:var(--cyan);background:#261c2c;box-shadow:4px 4px #63304f;}
body[data-theme=cyberpunk] .overview-card:nth-child(2){border-color:var(--gold);}
body[data-theme=cyberpunk] .overview-card:nth-child(3){border-color:var(--pink);}
body[data-theme=cyberpunk] .overview-note{border-left-color:var(--pink);background:#ff66ad08;}
body[data-theme=cyberpunk] .question-card{background:#261d2b;border-color:var(--gold);box-shadow:4px 4px #63304f;}
body[data-theme=cyberpunk] .open-question-card{border-color:var(--cyan);}
body[data-theme=cyberpunk] .scenario-options button[aria-pressed=true],body[data-theme=cyberpunk] .open-form-switch button[aria-pressed=true]{box-shadow:2px 2px var(--pink);}
body[data-theme] .lesson-rail .topics :is(button,a).compare-nav:not(.active){background:transparent;border-color:#7c6854;color:var(--accent);box-shadow:none;}
body[data-theme] .lesson-rail .topics :is(button,a).compare-nav:not(.active) span{color:var(--accent);}
body[data-theme] .lesson-rail .topics :is(button,a).compare-nav:not(.active):hover{background:#ffffff06;border-color:var(--accent);}
body:is([data-theme=atlas]) .lesson-rail .topics :is(button,a).compare-nav:not(.active){border-color:#aaa;color:#444;}
body:is([data-theme=atlas]) .lesson-rail .topics :is(button,a).compare-nav:not(.active) span{color:#666;}
body:is([data-theme=atlas]) .lesson-rail .topics :is(button,a).compare-nav:not(.active):hover{background:#fff;}
body[data-theme] .language-picker{display:flex;gap:8px;align-items:center;flex-shrink:0;}
body[data-theme] .language-picker button{min-width:64px;min-height:48px;padding:12px 19px;font:600 18px/1.2 var(--font);border:1px solid #8a7783;background:var(--panel);color:var(--text);border-radius:0;cursor:pointer;}
body[data-theme] .language-picker button:hover{border-color:var(--gold);}
body[data-theme] .language-picker button[aria-pressed=true]{background:#ffbd59;color:#251b0d;border-color:#b17c2a;box-shadow:inset 0 -3px #b17c2a;}
body[data-theme] .language-picker button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
body[data-theme] .lesson-rail .lesson-actions{grid-template-columns:1fr;}
@media(max-width:900px){body[data-theme] .lesson-rail .lesson-actions{grid-template-columns:auto minmax(0,1fr);}}
.atlas-preview{border:1px solid #838586;background:#d7d7d7;box-shadow:3px -3px 0 #a9a9a9;}
.atlas-preview:before{content:'';position:absolute;inset:8px 4px 13px;border:1px solid #656565;background:#f0f0f0;}
.atlas-preview:after{content:'';position:absolute;left:4px;right:4px;bottom:8px;height:2px;background:var(--gold);box-shadow:0 4px #767676;}
body[data-theme=atlas]{background:#262626;color:#292929;}
body[data-theme=atlas] .page-shell{width:min(1510px,calc(100% - 40px));padding:0 22px;margin:20px auto;background:#dfdfdf;border:1px solid #7a7a7a;}
body[data-theme=atlas] .masthead{border-color:#bababa;height:62px;}
body[data-theme=atlas] .intro{padding:23px 0;}
body[data-theme=atlas] .intro h1{font-family:var(--display);font-size:26.1px;font-weight:500;}
body[data-theme=atlas] .direction{background:#e8e8e8;border-color:#bababa;}
body[data-theme=atlas] .direction.active{background:#2d2d2d;border-color:#2d2d2d;box-shadow:inset 0 -3px var(--gold);}
body[data-theme=atlas] .direction.active strong{color:#f3f3f3;}
body[data-theme=atlas] .direction.active small,body[data-theme=atlas] .direction.active em{color:#d2d2d2;}
body[data-theme=atlas] .direction.active .direction-arrow{color:var(--gold);}
body[data-theme=atlas] .lesson{border:1px solid #a6a6a6;border-radius:0;background:#e3e3e3;box-shadow:none;}
body[data-theme=atlas] .console-bar{background:#d5d5d5;border-color:#aaaaaa;}
body[data-theme=atlas] .lesson-rail{background:#d9d9d9;border-color:#b2b2b2;}
body[data-theme=atlas] .rail-heading{background:#d0d0d0;border-bottom:4px solid #343434;}
body[data-theme=atlas] .rail-heading strong{font-family:var(--display);font-size:18.9px;font-weight:500;}
body[data-theme=atlas] .rail-section-label{color:#616161;}
body[data-theme=atlas] .lesson-rail .topics :is(button,a){border-color:#bbbbbb;}
body[data-theme=atlas] .lesson-rail .topics :is(button,a).active{color:#f3f3f3;background:#343434;box-shadow:inset 3px 0 var(--gold);}
body[data-theme=atlas] .lesson-rail .topics :is(button,a).active span{color:var(--gold);}
body[data-theme=atlas] .lesson-rail .topics :is(button,a).flow-nav{border-color:#868686;}
body[data-theme=atlas] .lesson-rail .topics :is(button,a).compare-nav{color:#2b261a;background:var(--gold);}
body[data-theme=atlas] .lesson-rail .topics :is(button,a).compare-nav.active{outline-color:#585858;color:#f3f3f3;background:#343434;}
body[data-theme=atlas] .lesson-rail .topics :is(button,a).compare-nav.active span{color:var(--gold);}
body[data-theme=atlas] .lesson-rail .steps button.active{background:#ececec;border-color:#888888;box-shadow:inset 2px 0 var(--gold);color:#393939;}
body[data-theme=atlas] :is(.rail-steps,.rail-controls,.rail-foot){border-color:#b6b6b6;}
body[data-theme=atlas] .stage:before{background:linear-gradient(90deg,#7b7b7b09 1px,transparent 1px),linear-gradient(#7b7b7b09 1px,transparent 1px);background-size:66px 66px;opacity:1;}
body[data-theme=atlas] #content{padding:28px;}
body[data-theme=atlas] .frame-corner{display:none;}
body[data-theme=atlas] .rule-title{font-size:28.8px;font-weight:500;letter-spacing:-.4px;}
body[data-theme=atlas] .lesson-heading .eyebrow{color:#626262;}
body[data-theme=atlas] .heading-code{color:#6e6e6e;border-color:#a7a7a7;background:transparent;}
body[data-theme=atlas] .rule-meaning{color:#5b5b5b;}
body[data-theme=atlas] .visual-panel{background:#dcdcdc;border-color:#a6a6a6;border-radius:0;box-shadow:4px 4px 0 #c2c2c2;}
body[data-theme=atlas] .visual-panel:before,body[data-theme=atlas] .visual-panel:after{background:#866321;}
body[data-theme=atlas] .focus-word{font-family:var(--display);background:#fff1d4;color:#373323;}
body[data-theme=atlas] .table-shell{border-radius:0;box-shadow:3px 3px #c8c8c8;}
body[data-theme=atlas] .grammar-table th{background:#dadada;color:#545454;}
body[data-theme=atlas] .grammar-table tbody tr{background:#efefef;}
body[data-theme=atlas] .grammar-table tbody tr.active{background:#fff0cf;}
body[data-theme=atlas] .sentence-board{background:#efefef;box-shadow:4px 4px #c8c8c8;}
body[data-theme=atlas] .question-zone{background:#efefef;border-color:#a2a2a2;box-shadow:4px 4px #c8c8c8;}
body[data-theme=atlas] .word-token{background:#e6e6e6;color:#454545;border-color:#a8a8a8;}
body[data-theme=atlas] .word-token.aux{background:var(--gold);color:#33270f;}
body[data-theme=atlas] .compare-card{background:#efefef;box-shadow:3px 3px #c8c8c8;}
body[data-theme=atlas] .compare-card h3{font-family:var(--display);font-size:22.5px;}
body[data-theme=atlas] .perimeter-runner{stroke:#b27424;filter:none;}
body[data-theme=atlas] .motion-bar,body[data-theme=atlas] .page-footer{border-color:#b2b2b2;}
.atlas-workbench{display:grid;grid-template-columns:minmax(0,1fr) 302px;gap:18px;align-items:stretch;}
.atlas-map-panel{background:#d7d7d7;border:1px solid #b5b5b5;min-width:0;padding:20px 10px 15px;position:relative;}
.atlas-map-caption{display:flex;justify-content:space-between;gap:10px;padding:0 10px 18px;font:8px monospace;letter-spacing:.6px;color:#5f5f5f;}
.atlas-map{padding:0;container-type:inline-size;}
body[data-theme=atlas] .atlas-map .flow-root{width:270px;max-width:calc(100% - 48px);padding:11px 14px;margin:0 auto 24px;background:#e7e7e7;border:1px solid #919191;border-top:2px solid #c8943b;border-radius:0;box-shadow:none;}
body[data-theme=atlas] .atlas-map .flow-root strong{font:500 16.2px/1.3 'Satoshi',sans-serif;color:#434343;}
body[data-theme=atlas] .atlas-map .flow-root small{color:#6b6b6b;}
.atlas-nodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 36px;padding:0 25px;max-width:660px;margin:0 auto;}
body[data-theme=atlas] .atlas-node{position:relative;isolation:isolate;display:block;width:100%;height:169px;min-height:0;margin:0;padding:0;border:0;background:transparent;box-shadow:none;border-radius:0;transition:transform .2s;text-align:left;}
body[data-theme=atlas] .atlas-node[data-node=arrangement]{grid-column:1/-1;width:calc((100% - 36px)/2);justify-self:center;}
body[data-theme=atlas] .atlas-node:hover{background:transparent;border:0;transform:translateY(-3px);box-shadow:none;}
body[data-theme=atlas] .atlas-node.active{background:transparent;border:0;box-shadow:none;}
.atlas-stack{position:absolute;z-index:-1;inset:0;width:100%;height:100%;overflow:visible;stroke:#989898;stroke-width:.75;}
.stack-shadow{fill:#c2c2c2;}
.stack-top{fill:#f1f1f1;}
.stack-side{fill:#cfcfcf;}
.stack-face{fill:#e9e9e9;}
.stack-seam,.stack-vent{fill:none;stroke:#a7a7a7;}
body[data-theme=atlas] .atlas-node.active .stack-face{fill:#fff2d6;}
body[data-theme=atlas] .atlas-node.active .stack-top{fill:#fff8e8;}
body[data-theme=atlas] .atlas-node.active .stack-side{fill:#e2c88f;}
body[data-theme=atlas] .atlas-node.active .stack-seam{stroke:#bd7d25;stroke-width:2;}
body[data-theme=atlas] .atlas-node.active .stack-shadow{fill:#d6be8c;}
body[data-theme=atlas] .atlas-node .atlas-node-copy{display:flex;flex-direction:column;gap:8px;position:absolute;left:9%;right:13%;top:25%;color:#454545;}
body[data-theme=atlas] .atlas-node small{font:11px/1.4 monospace;letter-spacing:0;text-transform:uppercase;color:#636363;padding:0;}
body[data-theme=atlas] .atlas-node small b{font-weight:400;color:#70551e;margin-right:3px;}
body[data-theme=atlas] .atlas-node strong{font:500 21.6px/1.03 var(--display);color:#323232;letter-spacing:-.3px;}
body[data-theme=atlas] .atlas-node .atlas-node-copy>span{font-size:12px;line-height:1.4;color:#696969;}
body[data-theme=atlas] .atlas-node i{top:22%;right:13%;font-size:9px;color:#7a7a7a;}
body[data-theme=atlas] .atlas-node.active i{color:#94651e;}
body[data-theme=atlas] .atlas-map .flow-wire{stroke:#999999;stroke-width:.9;}
body[data-theme=atlas] .atlas-map .flow-wire.selected{stroke:#be7a29;stroke-width:1.2;}
body[data-theme=atlas] .atlas-map .flow-pulse{stroke:#b17221;stroke-width:1.9;filter:none;}
body[data-theme=atlas] .atlas-map .flow-connections{color:#7e7e7e;}
.atlas-map-key{display:flex;align-items:center;justify-content:center;gap:9px;padding:16px 8px 0;margin:0;font-size:11px;color:#646464;line-height:1.5;}
.atlas-map-key i{width:6px;height:6px;background:#bd842d;flex:none;}
body[data-theme=atlas] .atlas-inspector{margin:0;padding:22px;background:#f0f0f0;border:1px solid #adadad;min-width:0;box-shadow:none;}
.atlas-readout{display:flex;align-items:baseline;gap:9px;border-bottom:1px solid #bebebe;padding-bottom:19px;margin-bottom:23px;}
.atlas-readout strong{font:500 31.5px/1 var(--display);letter-spacing:-1px;color:#3b3b3b;}
.atlas-readout span{font:8px monospace;letter-spacing:.5px;color:#7e7e7e;}
.atlas-readout i{width:8px;height:8px;background:var(--gold);margin-left:auto;}
body[data-theme=atlas] .atlas-inspector>header{display:block;}
body[data-theme=atlas] .atlas-inspector .eyebrow{font-size:8px;color:#6b6b6b;line-height:1.8;letter-spacing:.5px;}
body[data-theme=atlas] .atlas-inspector h3{font:500 23.4px/1.1 var(--display);color:#3f3f3f;letter-spacing:-.3px;margin:12px 0 22px;}
body[data-theme=atlas] .atlas-inspector .form-switch{display:flex;gap:5px;}
body[data-theme=atlas] .atlas-inspector .form-switch button{padding:9px 5px;font-size:11px;flex:1;justify-content:center;gap:3px;}
body[data-theme=atlas] .atlas-inspector .flow-context-copy{font-size:14px;color:#666666;line-height:1.65;margin:20px 0;}
body[data-theme=atlas] .atlas-inspector .flow-combination{border-color:#c2c2c2;}
body[data-theme=atlas] .atlas-inspector .formula{gap:5px;}
body[data-theme=atlas] .atlas-inspector .formula-token{font-size:12px;min-height:30px;padding:6px 8px;white-space:normal;}
body[data-theme=atlas] .atlas-inspector .formula-plus{font-size:13px;}
body[data-theme=atlas] .atlas-inspector .flow-sentence{font:500 22.5px/1.65 'Satoshi',sans-serif;letter-spacing:-.3px;color:#3b3b3b;margin-top:24px;}
body[data-theme=atlas] .atlas-inspector .sentence mark.animated-focus{padding:1px 5px;line-height:1.5;}
body[data-theme=atlas] .atlas-inspector .flow-form-note{font-size:11.7px;color:#6d6d6d;line-height:1.7;}
@container(max-width:930px){.atlas-workbench{grid-template-columns:1fr;}.atlas-map-panel{padding:23px 15px 17px;}.atlas-nodes{max-width:600px;}body[data-theme=atlas] .atlas-inspector{padding:24px;}body[data-theme=atlas] .atlas-inspector .form-switch{max-width:360px;}body[data-theme=atlas] .atlas-inspector h3{margin-bottom:18px;}}
@container(max-width:460px){body[data-theme=atlas] .atlas-node{height:165px;}body[data-theme=atlas] .atlas-node strong{font-size:18.9px;}.atlas-nodes{gap:8px 20px;padding:0 22px;}body[data-theme=atlas] .atlas-node[data-node=arrangement]{width:calc((100% - 20px)/2);}body[data-theme=atlas] .atlas-node .atlas-node-copy>span{display:none;}}
@container(max-width:399px){.atlas-nodes{display:flex;flex-direction:column;gap:13px;padding:0 12px 0 37px;}body[data-theme=atlas] .atlas-node,body[data-theme=atlas] .atlas-node[data-node=arrangement]{width:100%;height:170px;}body[data-theme=atlas] .atlas-node .atlas-node-copy>span{display:block;}body[data-theme=atlas] .atlas-node strong{font-size:22.5px;}body[data-theme=atlas] .atlas-map .flow-root{width:calc(100% - 49px);max-width:none;margin-left:37px;margin-right:12px;}.atlas-map-caption{font-size:7px;gap:8px;}.atlas-map-key{font-size:11px;justify-content:flex-start;}}
@media(max-width:900px){body[data-theme=atlas] .page-shell{width:calc(100% - 24px);padding:0 14px;margin:12px auto;}body[data-theme=atlas] .intro h1{font-size:23.4px;}body[data-theme=atlas] #content{padding:24px;}body[data-theme=atlas] .rule-title{font-size:25.2px;}body[data-theme=atlas] .mobile-nav-bar{background:#d5d5d5;border-color:#adadad;}}
@media(max-width:600px){body[data-theme=atlas] .page-shell{width:calc(100% - 16px);padding:0 10px;margin:8px auto;}body[data-theme=atlas] #content{padding:22px 16px;}body[data-theme=atlas] .rule-title{font-size:24.3px;}.atlas-map-panel{padding:17px 5px 14px;}body[data-theme=atlas] .atlas-inspector{padding:20px 17px;}body[data-theme=atlas] .atlas-inspector .form-switch button{font-size:11px;}.atlas-map-caption{padding-left:8px;padding-right:8px;}}
@media(prefers-reduced-motion:reduce){.atlas-node{transition:none!important;}}
.atlas-map-return{display:none;}
@container(max-width:930px){.atlas-map-return{display:block;background:transparent;border-bottom:1px solid #b0b0b0;padding:0 0 7px;margin:0 0 18px;font:11px monospace;color:#555;}}
body[data-theme=atlas] .atlas-node[data-node=arrangement] .atlas-node-copy{top:23%;}
body[data-theme=atlas] .atlas-node[data-node=arrangement] .atlas-node-copy>span{display:none;}
body[data-theme=atlas] .atlas-node[data-node=arrangement] .stack-vent{display:none;}
body[data-theme=atlas] .lesson-rail .topic-submenu{border-left-color:#aaa;background:#eeeeee70;}
body[data-theme=atlas] .lesson-rail .topic-submenu .steps button{color:#555;}
body[data-theme=atlas] .lesson-rail .topic-submenu .steps button.active{background:#fff1d4;border-color:#a57628;color:#382b10;}
body[data-theme=atlas] .lesson-rail .topics>[data-topic][aria-expanded=true]:after{color:var(--gold);}
body[data-theme=atlas] :is(.overview-card,.question-card){background:#f5f5f5;border-color:#aaa;box-shadow:3px 3px #c8c8c8;}
body[data-theme=atlas] :is(.overview-meaning,.overview-note p,.question-card>header>p:last-child){color:#505050;}
body[data-theme=atlas] :is(.overview-meaning b,.question-card .eyebrow){color:#80551a;}
body[data-theme=atlas] .overview-example{border-color:#bbb;}
body[data-theme=atlas] :is(.overview-note,.model-answer){background:#e9e9e9;}
body[data-theme=atlas] .scenario-options button{color:#555;border-color:#aaa;}
body[data-theme=atlas] .scenario-options button[aria-pressed=true]{color:#251b0d;border-color:#a57628;}
body[data-theme=atlas] :is(.requested-detail,.formula-token.wh,.open-question-row .question-word){color:#4f4f4f;border-color:#888;background:#e6e6e6;}
body:is([data-theme=atlas]){--dot-pitch:56px;--dot-ink:rgba(10,10,10,.32);--dot-pattern:radial-gradient(circle,var(--dot-ink) 1.5px,transparent 1.9px);}
body[data-theme=atlas]{}
body:is([data-theme=atlas]) .lesson-canvas{background-color:var(--dot-surface);background-image:var(--canvas-pattern);background-size:var(--canvas-pitch) var(--canvas-pitch);background-position:var(--canvas-position);}
body:is([data-theme=atlas]) .stage:before{background:none;opacity:0;}
body[data-theme=atlas] .atlas-map-panel{background-image:var(--canvas-pattern);background-size:var(--canvas-pitch) var(--canvas-pitch);background-position:var(--canvas-position);}
.dot-field-cover{position:absolute;inset:0;background:var(--dot-surface);opacity:0;}
.dot-field-svg{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;}
.transition-dot{fill:#151515;opacity:0;}
@media(max-width:700px){
body:is([data-theme=atlas]){--dot-pitch:44px;}}
.structure-overview{margin-top:32px;padding-top:27px;border-top:1px solid var(--line);}
.structure-heading{font:500 21.6px/1.25 var(--display);letter-spacing:-.3px;margin:0 0 23px;color:var(--text);}
.prediction-select{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:12px 13px;margin-top:20px;text-align:left;font:500 13px/1.5 var(--font);color:var(--text);background:var(--panel);border:1px solid var(--line);cursor:pointer;}
.prediction-select:hover{border-color:var(--gold);}
.prediction-select[aria-pressed=true]{background:var(--gold);color:#251b0d;border-color:var(--gold);}
.prediction-select span{flex:none;}
.compare-card.selected-form{box-shadow:inset 0 2px var(--gold);}
.prediction-structure{padding:24px 0 0;}
.prediction-structure .selected-example{margin-bottom:0;}
body:is([data-theme=atlas]) .prediction-select{border-color:#b6b6b6;}
body:is([data-theme=atlas]) .prediction-select[aria-pressed=true]{border-color:#bd914e;}
@media(max-width:900px){
#navToggle{flex-wrap:wrap;}
#navCurrent{min-width:0;line-height:1.5;flex:1;text-align:right;}
#navToggle>b{flex:none;}
body[data-theme] .lesson-rail .steps button{line-height:1.5;}
}
@media(max-width:600px){.structure-overview{margin-top:27px;padding-top:23px;}.structure-heading{font-size:19.8px;}}
.header-controls {display:flex;align-items:center;justify-content:flex-end;gap:18px;margin-left:auto;flex-shrink:1;flex-wrap:wrap;max-width:100%}
.library-header {padding-block:18px}
.library-header .library-tools {width:auto;margin-left:auto}
body[data-theme] .masthead {gap:16px;flex-wrap:wrap}
body[data-theme] :is(.masthead,.library-header) .language-picker {display:flex;gap:6px;margin:0}
body[data-theme] :is(.masthead,.library-header) .language-picker button {position:relative;box-sizing:border-box;width:22px;height:22px;min-width:22px;min-height:22px;padding:0;font-size:11px;line-height:1.2}
body[data-theme] .theme-toggle {display:inline-flex;align-items:center;gap:7px;min-height:29px;margin:0;padding:4px 9px;border:1px solid var(--line);border-radius:3px;background:var(--panel);color:var(--text);font:600 11px/1.3 'DM Sans',Arial,sans-serif;box-shadow:none;cursor:pointer}
.theme-toggle-icon {font-size:15px;color:var(--gold)}
.theme-toggle-current {padding-left:7px;border-left:1px solid var(--line);color:var(--muted);font-weight:400}
body[data-theme] .theme-toggle:focus-visible {outline:2px solid var(--text);outline-offset:3px}
body[data-theme] .theme-gallery {--gallery-text:var(--text);--gallery-muted:var(--muted);box-sizing:border-box;position:fixed;inset:0;width:min(900px,calc((100vw - 32px) / var(--desktop-scale,1)));max-width:none;max-height:calc((100dvh - 32px) / var(--desktop-scale,1));height:fit-content;margin:auto;padding:25px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--text);box-shadow:0 20px 80px #0007;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;text-align:left;font:400 14px/1.5 'DM Sans',Arial,sans-serif}
.theme-gallery::backdrop {background:#0d0b14b8}
.theme-gallery-heading {display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:22px}
body[data-theme] .theme-gallery-heading h2 {margin:0;font:600 23px/1.25 var(--display);color:var(--gallery-text);letter-spacing:-.02em;text-transform:none}
body[data-theme] .theme-gallery-heading p {margin:6px 0 0;font:400 13px/1.5 'DM Sans',Arial,sans-serif;color:var(--gallery-muted)}
body[data-theme] .theme-gallery-close {flex:none;display:grid;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--gallery-text);font:400 25px/1 Arial,sans-serif;box-shadow:none;cursor:pointer}
.theme-gallery-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px;padding:5px}
body[data-theme] .theme-card {--preview-background:var(--palette-default-background);--preview-panel:var(--palette-default-panel);--preview-text:var(--palette-default-text);--preview-muted:var(--palette-default-muted);--preview-edge:var(--palette-default-edge);--preview-accent:var(--palette-default-accent);--preview-selection-text:#211625;--preview-sidebar:var(--palette-default-sidebar);--preview-sidebar-text:var(--palette-default-sidebarText);--preview-panel-text:var(--palette-default-text);--preview-panel-muted:var(--palette-default-muted);--preview-panel-edge:var(--palette-default-edge);box-sizing:border-box;display:block;min-width:0;width:100%;margin:0;padding:0;border:0;border-radius:var(--preview-radius);background:transparent;color:var(--gallery-text);text-align:left;font:400 12px/1.5 'DM Sans',Arial,sans-serif;letter-spacing:normal;text-transform:none;box-shadow:none;cursor:pointer;transform:none}
.theme-preview {box-sizing:border-box;display:grid;grid-template-columns:72px minmax(0,1fr);min-height:220px;border:1px solid var(--preview-edge);border-radius:var(--preview-radius);background-color:var(--preview-background);background-image:var(--preview-pattern);background-size:var(--canvas-pitch,32px) var(--canvas-pitch,32px);color:var(--preview-text);overflow:hidden;isolation:isolate}
.theme-preview-sidebar {display:flex;flex-direction:column;gap:7px;padding:18px 7px;border-right:1px solid var(--preview-edge);background:var(--preview-sidebar);color:var(--preview-sidebar-text);font:500 9px/1.3 'DM Sans',Arial,sans-serif}
.theme-preview-sidebar-title {margin:0 4px 8px;font-size:10px;font-weight:700}
.theme-preview-nav {display:block;padding:7px 4px;border-radius:var(--preview-card-radius)}
.theme-preview-nav.is-selected {background:var(--preview-accent);color:var(--preview-selection-text)}
.theme-preview-line {height:3px;margin:6px 4px 0;border-radius:2px;background:currentColor;opacity:.22}
.theme-preview-line.is-short {width:45%;margin-top:0}
.theme-preview-reader {display:block;min-width:0;padding:17px 15px 20px}
.theme-preview-title {display:block;margin-bottom:13px;font:600 18px/1.25 var(--display);color:var(--preview-text);letter-spacing:-.02em}
.theme-preview-example {position:relative;display:block;padding:15px 12px 13px;border:1px solid var(--preview-panel-edge);border-radius:var(--preview-card-radius);background:var(--preview-panel);color:var(--preview-panel-text);box-shadow:var(--preview-shadow) var(--panel-offset,#0002)}
.theme-preview-example::before {content:'';display:var(--preview-tab);position:absolute;top:-1px;left:12px;width:23px;height:3px;background:var(--preview-accent)}
.theme-preview-example-heading {display:flex;align-items:baseline;gap:9px}
.theme-preview-number {font:500 9px/1.2 ui-monospace,monospace;color:var(--accent)}
.theme-preview-greeting {font:650 19px/1.2 var(--display);letter-spacing:-.025em}
.theme-preview-copy {display:block;margin-top:12px;font:400 10px/1.6 'DM Sans',Arial,sans-serif;color:var(--preview-panel-muted)}
.theme-preview-rule {display:block;height:1px;margin:13px 0 11px;background:var(--preview-panel-edge)}
.theme-preview-sentence {display:block;font:var(--preview-example-style) 400 15px/1.3 var(--display)}
.theme-card-caption {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;padding:11px 2px 0;color:var(--gallery-text);font:500 12px/1.4 'DM Sans',Arial,sans-serif}
.theme-card-name {display:inline-flex;align-items:center;gap:7px}
.theme-card-swatch {width:9px;height:9px;border-radius:50%;background:var(--preview-accent);border:1px solid var(--preview-edge)}
.theme-card-selected {font-size:10px;color:var(--gallery-text)}
.theme-card-selected[hidden] {display:none}
body[data-theme] .theme-card[aria-pressed=true] .theme-preview {outline:2px solid var(--preview-accent);outline-offset:3px}
body[data-theme] .theme-card:focus-visible {outline:none;box-shadow:none}
body[data-theme] .theme-card:focus-visible .theme-preview {outline:3px solid var(--gallery-text);outline-offset:4px}
body[data-theme] .theme-gallery-close:focus-visible {outline:2px solid var(--gallery-text);outline-offset:3px}
@media(hover:hover) {
body[data-theme] .theme-toggle:hover {border-color:var(--gold)}
body[data-theme] .theme-card:hover .theme-preview {outline:2px solid var(--preview-accent);outline-offset:3px}
body[data-theme] .theme-gallery-close:hover {background:var(--raised)}
}
@media(prefers-reduced-motion:no-preference) {
.theme-preview {transition:transform var(--relay-hover-duration,160ms) ease-out,outline-color var(--relay-hover-duration,160ms) ease-out}
@media(hover:hover) {body[data-theme] .theme-card:hover .theme-preview {transform:translateY(-2px)}}
}
@media(max-width:600px) {
body[data-theme] :is(.masthead,.library-header) {height:auto;min-height:58px;flex-wrap:wrap;gap:4px 8px}
.header-controls {gap:8px}
body[data-theme] .masthead :is(.brand-description,.brand>span),.library-brand span {display:none}
.theme-toggle-current {display:none}
body[data-theme] .theme-gallery {width:calc(100vw - 20px);max-height:calc(100dvh - 20px);padding:18px 13px}
.theme-gallery-heading {margin-bottom:16px}
.theme-gallery-grid {grid-template-columns:1fr;gap:19px}
.theme-preview {min-height:215px;grid-template-columns:65px minmax(0,1fr)}
.theme-preview-reader {padding:15px 12px 18px}
}
@media(max-width:359px) {
.theme-preview {grid-template-columns:52px minmax(0,1fr)}
.theme-preview-sidebar {padding-inline:4px;font-size:8px}
.theme-preview-reader {padding-inline:9px}
.theme-preview-example {padding-inline:9px}
.theme-preview-greeting {font-size:17px}
}
@media(any-pointer:coarse) {
body[data-theme] :is(.masthead,.library-header) .language-picker {gap:22px;padding:11px}
.header-controls .language-picker button::after {content:'';position:absolute;inset:-11px}
body[data-theme] :is(.theme-toggle,.theme-gallery-close) {min-height:44px;min-width:44px}
}
@media(forced-colors:active) {
.theme-preview {border:1px solid CanvasText}
body[data-theme] .theme-card[aria-pressed=true] .theme-preview {outline-color:Highlight}
body[data-theme] .theme-card:focus-visible .theme-preview {outline-color:CanvasText}
}
body[data-theme] .lesson-rail .topics .practice-nav{margin-top:10px;border:1px solid #68e4ef66;color:var(--cyan);font-weight:500;}

body[data-theme] .lesson-rail .topics .practice-nav[aria-expanded=true]{background:#68e4ef0b;}

body[data-theme=cyberpunk] .lesson-rail .topics .practice-nav.active{background:var(--gold);color:#261b20;border-color:var(--gold);box-shadow:3px 0 var(--pink);}

body:is([data-theme=atlas]) .lesson-rail .topics .practice-nav{color:#444;border-color:#999;}

body:is([data-theme=atlas]) .lesson-rail .topics .practice-nav.active{background:#343434;color:#f3f3f3;}
.topics a{font-family:inherit;cursor:pointer;}
.topics a[aria-disabled=true]{cursor:wait;}
.load-retry{min-height:44px;padding:12px 20px;background:var(--gold);color:#21180d;font:500 16px var(--font);}
@media screen and (min-width:1200px){
body[data-theme]{--desktop-scale:1.1;zoom:var(--desktop-scale)}
body[data-theme] :is(.page-shell,.library-shell){width:calc(100% - 64px);max-width:none}
body[data-theme] :is(.rule-meaning,.lesson-copy,.demo-note,.flow-context-copy,.flow-form-note){max-width:85ch}
body[data-theme] .lesson-rail .topics :is(a,button){font-size:14px}
body[data-theme] :is(.eyebrow,.rail-section-label,.rail-heading small,.console-bar,.branch-node small){font-size:10px}
body[data-theme] :is(.branch-context,.flow-context strong){font-size:13.5px}
body[data-theme] .theme-toggle-row{font-size:13px}
}
@media screen and (min-width:1600px){body[data-theme]{--desktop-scale:1.25}}
@media screen and (min-width:2200px){body[data-theme]{--desktop-scale:1.5}}
@media screen and (min-width:3000px){body[data-theme]{--desktop-scale:1.75}}
@media screen and (min-width:3800px){body[data-theme]{--desktop-scale:2}}/* Interactive table and diagram details are available in both lesson shells. */
.selectable-comparison .lesson-table tbody tr{cursor:pointer}
.selectable-comparison .lesson-table tbody tr.active{background:color-mix(in srgb,var(--gold) 18%,var(--raised));box-shadow:inset 3px 0 var(--accent)}
.selectable-comparison .lesson-table th button{display:block;width:100%;min-height:44px;padding:4px 0;border:0;background:transparent;color:inherit;font:inherit;text-align:left}
.selectable-comparison .lesson-table th button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.selectable-comparison .examples-grid{margin-top:24px}
body[data-theme=atlas] .selectable-comparison .demo-card .eyebrow{color:var(--accent)}
.framework-page :is(.selectable-comparison .demo-card,.diagram-inspectors .map-inspector){padding:22px;background:var(--raised);border:1px solid var(--line);margin-block:20px}
.framework-page .diagram-inspectors .form-switch{display:flex;flex-wrap:wrap;gap:8px}
.framework-page .diagram-inspectors button{padding:10px 16px;min-height:44px;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.framework-page .diagram-inspectors button[aria-pressed=true]{background:var(--gold);color:#21180d}
.framework-page :is(.selectable-comparison,.diagram-inspectors) .sentence{font:500 19.8px/1.7 var(--display)}
/* Conversation blocks inherit the common shell, fonts and theme tokens. */
.register-comparison,.conversation-explorer{margin:28px 0}
.register-comparison h3,.conversation-explorer h3{font-family:var(--display);font-size:clamp(18px,1.8vw,23.4px);margin:0 0 12px}
.register-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:20px}
button.register-card{--register-color:var(--register-textbook);appearance:none;display:block;width:100%;min-width:0;padding:0;text-align:left;font:inherit;color:var(--text);background:var(--register-textbook-surface);border:1px solid var(--register-color);border-radius:0;box-shadow:4px 4px 0 var(--panel-offset);transition:transform 140ms,box-shadow 140ms}
body[data-theme=cyberpunk] .register-card[aria-pressed=false]{
  --panel-offset:color-mix(in srgb,var(--cyan) 38%,var(--panel));
}
button.register-card[aria-pressed=true]{--register-color:var(--register-natural);background:var(--register-natural-surface);color:var(--text)}
.register-card>[data-register-face]{display:flex;flex-direction:column;min-height:280px;height:100%}
.register-card>[data-register-face][hidden]{display:none}
/* Layer both faces once the native card is enhanced. */
.register-card[data-register-scan] {
  position: relative;
  display: grid;
  isolation: isolate;
  overflow: hidden;
}
.register-card[data-register-scan] > [data-register-face] {
  grid-area: 1 / 1;
  height: auto;
  min-width: 0;
}
.register-card[data-register-scan] > [data-register-face="textbook"] {
  --register-color: var(--register-textbook);
  background: var(--register-textbook-surface);
}
.register-card[data-register-scan] > [data-register-face="natural"] {
  --register-color: var(--register-natural);
  background: var(--register-natural-surface);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--register-scan-duration) ease-in-out;
}
.register-card[data-register-scan][aria-pressed="true"] > [data-register-face="natural"] {
  clip-path: inset(0);
}
/* The stripe travels along the reveal edge and rests outside the card at both ends. */
.register-card[data-register-scan]::after {
  content: "";
  position: absolute;
  inset: -2px 0 0;
  z-index: 1;
  border-top: 2px solid var(--cyan);
  pointer-events: none;
  transform: translateY(0);
  transition: transform var(--register-scan-duration) ease-in-out;
}
.register-card[data-register-scan][aria-pressed="true"]::after {
  transform: translateY(100%);
}
@media (prefers-reduced-motion: reduce) {
  .register-card[data-register-scan] > [data-register-face="natural"] { transition: none; }
  .register-card[data-register-scan]::after { display: none; }
}
.register-tag{font:11px/1.5 monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--register-color);background:var(--panel);padding:10px 18px;border-bottom:1px solid var(--register-color)}
.register-phrase{display:block;padding:22px 20px 12px;font:500 clamp(18px,1.8vw,23.4px)/1.35 var(--display);overflow-wrap:break-word}
.register-note{display:block;padding:0 20px 20px;font:13.5px/1.6 var(--font);color:var(--muted)}
.register-action{display:block;margin:auto 20px 0;padding:14px 0;border-top:1px solid var(--line);font:11px/1.5 monospace;letter-spacing:.03em;text-transform:uppercase;color:var(--accent)}
button.register-card:hover{transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--panel-offset)}
.register-card:focus-visible,.conversation-explorer button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.conversation-panel{background:var(--panel);border:1px solid var(--accent);box-shadow:4px 4px 0 var(--panel-offset);padding:24px;margin-top:20px}
.conversation-context{font:12.6px/1.6 var(--font);color:var(--muted);margin:0 0 16px}
.conversation-line{display:grid;grid-template-columns:minmax(60px,90px) minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.conversation-line p{margin:0;max-width:65ch}
.conversation-speaker{font:12px/1.5 monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);padding-top:4px;overflow-wrap:anywhere}
.conversation-sentence{font:500 clamp(16.2px,1.53vw,20.7px)/1.5 var(--display)}
.conversation-translation{display:block;font:14px/1.5 var(--font);color:var(--muted);margin-top:5px}
.conversation-note{border-left:2px solid var(--gold);padding:10px 16px;margin:20px 0 0;font:13.5px/1.6 var(--font)}
.conversation-replies,.conversation-history{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 0}
.conversation-replies button,.conversation-history button{min-height:44px;max-width:100%;padding:12px 16px;border:1px solid var(--accent);background:var(--raised);color:var(--text);border-radius:0;font:16px/1.5 var(--font);text-align:left;overflow-wrap:anywhere}
.conversation-replies button:hover{border-color:var(--gold)}
.conversation-history{padding-top:20px;border-top:1px solid var(--line);margin-top:24px}
.conversation-history button{font-size:13px}
.conversation-history button:disabled{opacity:.55;cursor:default}
.conversation-complete{color:var(--register-natural);font:15px/1.5 var(--font);margin-top:20px}
[data-dialogue-choices]{margin-top:24px}
.section-draft{font:12px/1.5 monospace;color:var(--accent);border-left:2px solid var(--gold);padding:8px 12px;margin:0 0 20px}
@media(max-width:700px){.register-grid{grid-template-columns:1fr}.conversation-panel{padding:18px}.conversation-line{grid-template-columns:54px minmax(0,1fr);gap:12px}.conversation-replies{flex-direction:column}.conversation-replies button{width:100%}.register-card>[data-register-face]{min-height:240px}}
@media(prefers-reduced-motion:reduce){button.register-card{transition:none}button.register-card:hover{transform:none}}

/* The energy control belongs to the lesson panel and inherits the active theme. */
.reply-battery {container-type:inline-size}
.reply-battery .battery-heading {
  margin:0;
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  color:var(--accent);
  font:10.8px/1.5 monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.battery-layout {
  display:grid;
  grid-template-columns:minmax(180px,310px) minmax(0,1fr);
  align-items:center;
  gap:clamp(22px,4vw,48px);
  padding-top:20px;
}
.battery-instrument {
  display:grid;
  grid-template-columns:44px auto auto;
  align-items:center;
  justify-content:center;
  gap:clamp(8px,1.1vw,18px);
  background:var(--bg);
  border:1px solid var(--line);
  padding:20px 12px 16px;
}
.battery-rocker {
  display:grid;
  border:1px solid var(--line);
  box-shadow:2px 2px var(--panel-offset);
}
.battery-rocker button {
  width:44px;
  min-height:44px;
  padding:0;
  border:0;
  border-radius:0;
  background:var(--raised);
  color:var(--accent);
  font:16px/1 monospace;
}
.battery-rocker button+button {border-top:1px solid var(--line)}
.battery-rocker button[aria-disabled=true] {opacity:.45;cursor:default}
.battery-rocker button:not([aria-disabled=true]):hover {color:var(--gold)}
.battery-rocker button:not([aria-disabled=true]):active {background:var(--gold);color:var(--bg)}
.battery-scale {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:flex-end;
  align-self:stretch;
  color:var(--muted);
  font:12px/1.5 monospace;
  text-transform:uppercase;
}
.battery-shell {
  position:relative;
  display:grid;
  grid-auto-rows:1fr;
  gap:3px;
  box-sizing:border-box;
  width:clamp(66px,7vw,98px);
  height:clamp(138px,13vw,188px);
  padding:5px;
  border:2px solid var(--accent);
  border-radius:4px;
  color:var(--accent);
}
.battery-shell::before {
  content:"";
  position:absolute;
  bottom:100%;
  left:35%;
  width:30%;
  height:7px;
  background:currentColor;
}
.battery-shell [data-charge-cell] {
  background:var(--line);
  cursor:pointer;
}
.battery-shell .is-lit {
  background:hsl(var(--battery-hue,128) 78% var(--battery-lightness));
}
.reply-battery[data-empty] .battery-shell {
  border-color:var(--register-textbook);
  color:var(--register-textbook);
}
.reply-battery[data-empty] [data-charge-cell] {background:transparent}
.battery-shell:focus-visible,.battery-rocker button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:4px;
}
.battery-readout .battery-phrase {
  margin:0;
  color:var(--text);
  font:600 clamp(25.2px,3.06vw,41.4px)/1.15 var(--display);
  overflow-wrap:break-word;
}
.battery-readout .conversation-translation {margin:8px 0 0;font-size:16.2px}
@keyframes reply-battery-blink {50%{opacity:.36}}
@media(prefers-reduced-motion:no-preference) {
  .battery-shell [data-charge-cell] {transition:background-color .22s ease}
  .reply-battery[data-blink-visible][data-low-charge] .is-lit,
  .reply-battery[data-blink-visible][data-empty] .battery-shell {
    animation:reply-battery-blink var(--battery-blink-duration) ease-in-out infinite;
  }
}
@container(max-width:570px) {
  .battery-layout {grid-template-columns:minmax(0,1fr);gap:16px}
  .battery-instrument {width:min(100%,310px);justify-self:center}
  .battery-readout {min-height:110px}
}
.concept-explorer{margin:1.2rem 0 1.8rem;border:1px solid var(--line);background:var(--panel);color:var(--text);padding:clamp(14px,2vw,24px);overflow:hidden}
.concept-explorer header h3{font-family:var(--display);font-size:1.18rem;margin:.35rem 0}.concept-explorer p{max-width:65ch;line-height:1.6}.concept-explorer button{font:inherit;color:var(--text);border:1px solid var(--line);background:var(--raised);min-height:44px;padding:.5rem .8rem;cursor:pointer}.concept-explorer button:focus-visible,.concept-explorer summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.concept-explorer button[aria-pressed=true]{background:var(--gold);color:var(--on-gold,#211625);border-color:var(--gold)}.concept-explorer button:disabled{opacity:.45;cursor:default}.concept-choices{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0}.concept-display{padding:1.2rem;background:var(--bg);border:1px solid var(--line);border-radius:4px}.concept-explanation .sentence{font-size:1.2rem;margin:.9rem 0}.concept-explorer small{display:block;color:var(--muted);font-size:.8rem}.concept-caption{font-size:.86rem;color:var(--muted)}.concept-check, .concept-explorer details{padding:.75rem 0;border-top:1px solid var(--line)}.concept-explorer summary{cursor:pointer;font-weight:600;line-height:1.6}.concept-viewfinder{max-width:270px;margin:auto;border:1px solid var(--line);border-radius:12px}.concept-live{text-align:center}.concept-live svg{width:100%;max-height:190px;fill:none;stroke:var(--text);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.concept-moving{stroke:var(--gold);transform-origin:center}.concept-live button{margin:.7rem 0}.concept-live .is-replaying .concept-moving{animation:concept-action var(--concept-motion-duration) ease-in-out 2 alternate}.concept-track{height:92px;position:relative;margin:30px 22px 15px;border-bottom:2px solid var(--line)}.concept-band{position:absolute;bottom:15px;height:22px;background:var(--gold);border-radius:12px;min-width:7px}.concept-event{position:absolute;bottom:17px;height:18px;width:6px;background:var(--on-gold,#211625);border:1px solid var(--gold);transform:translateX(-50%)}.concept-now{position:absolute;height:100%;width:2px;background:var(--text);bottom:0}.concept-now b{position:absolute;top:-10px;left:0;transform:translateX(-50%);font-size:.75rem;white-space:nowrap;background:var(--bg);padding:.2rem .3rem}.concept-period{font-weight:700}.concept-bars{height:210px;display:flex;gap:12px;align-items:stretch;padding-top:10px}.concept-explorer .concept-bar{display:flex;flex:1;min-width:0;flex-direction:column;justify-content:flex-end;align-items:center;border:0;background:none!important;color:var(--text)!important;padding:0;gap:5px}.concept-bar>span{display:block;flex-shrink:0;width:70%;max-width:65px;background:var(--line);border:1px solid var(--text);border-radius:4px 4px 0 0}.concept-bar[aria-pressed=true]>span{background:var(--gold);border-color:var(--gold)}.concept-bar small{font-size:.72rem;min-height:2.6em;text-align:center;color:var(--text)}.concept-tokens{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:26px 0 8px}.concept-token{position:relative;display:inline-block;border:1px solid var(--line);background:var(--panel);padding:.6rem .8rem;margin-top:12px;font-weight:600}.concept-token.concept-focus{background:var(--gold);color:var(--on-gold,#211625)}.concept-token .concept-marker{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);font-size:.67rem;color:var(--text);white-space:nowrap}.concept-phoneme{font-size:2.2rem;color:var(--text)}.concept-sound{text-align:center}.concept-sound button{margin:6px 3px}.concept-rhythm{display:flex;gap:20px;justify-content:center;align-items:center;margin:1rem 0}.concept-rhythm b,.concept-rhythm span{display:block}.concept-rhythm div>span{color:var(--text);letter-spacing:4px}.concept-story{list-style:none;padding:0;display:grid;gap:10px}.concept-story li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);background:var(--panel);padding:10px}.concept-story p{margin:.3rem 0}.concept-step-number{font-size:1.3rem;color:var(--muted)}.concept-move{display:grid;gap:4px}.concept-move button{font-size:.75rem}.concept-audio-status{border:1px solid var(--line);padding:.6rem}
body[data-theme=atlas] .concept-explorer{box-shadow:4px 4px 0 var(--line);border-top:3px solid var(--accent)}body[data-theme=hydra] .concept-explorer{border-radius:0 20px 0 20px}body[data-theme=moon-garden] .concept-explorer{border-radius:18px 8px 18px 8px}body[data-theme=moon-garden] .concept-display{border-radius:12px}body[data-theme=moon-garden] .concept-explorer .concept-explanation .sentence{font-family:Georgia,serif;font-style:italic}
@keyframes concept-action{from{transform:translateY(0)}to{transform:translateY(-8px)}}
@media(prefers-reduced-motion:reduce){.concept-explorer *{animation:none!important;transition:none!important}}
@media(max-width:480px){.concept-explorer{padding:12px}.concept-display{padding:12px}.concept-tokens{gap:8px}.concept-token{padding:.45rem}.concept-story li{grid-template-columns:auto 1fr}.concept-move{grid-column:2;display:flex}.concept-bars{gap:6px}.concept-rhythm{gap:12px}}

.concept-recall[open]>summary{margin-bottom:1rem}.concept-explorer [hidden]{display:none!important}

/* Reference, inventory and viewpoint boards share the normal choice controls. */
.object-board-caption{font-weight:600;margin:0 0 1rem}.object-zones{display:flex;gap:12px;align-items:stretch}.object-zone{flex:1;min-width:0;border:1px dashed var(--line);padding:14px;background:var(--panel)}.object-zone h4{font-size:.86rem;margin:0 0 .8rem;line-height:1.5}.object-items{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;min-height:125px}.object-item{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--raised);padding:10px 12px;min-width:75px;max-width:130px;text-align:center;overflow-wrap:anywhere}.object-item svg{width:54px;height:54px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.object-item span{font-size:.85rem;line-height:1.4}.object-item.is-selected{border:2px solid var(--gold)}.object-item.is-selected small{font-size:.68rem;color:var(--text);margin-top:5px}.object-speaker{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text);background:var(--raised);padding:8px}.object-speaker span[aria-hidden="true"]{color:var(--gold)}.object-empty{font-size:.9rem;color:var(--muted);padding:1rem;text-align:center}.concept-objects .concept-display{padding:1rem}.concept-objects .concept-explanation .sentence{font-size:1.1rem}
@media(max-width:540px){.object-zones{flex-direction:column}.object-zone{padding:10px}.object-items{min-height:95px}.object-item{min-width:64px;padding:8px}.object-item svg{width:44px;height:44px}.concept-objects .concept-display{padding:10px}}
/* Approved BEST workspace components, shared by authored lessons. */
/* Preview-specific extensions; original BEST visual system is embedded first. */
body[data-theme] .topics .nav-label{font:inherit!important;color:inherit!important;flex:1!important}body[data-theme] .topics .topic-submenu{margin-bottom:6px}body[data-theme] .topics .topic-submenu[hidden]{display:none}body[data-theme] .topics a{min-height:44px}body[data-theme] .topics .steps a{padding:9px 10px;font-size:12px;min-height:38px;border:1px solid transparent;color:var(--muted);background:transparent}body[data-theme] .topics .steps a.active{border-color:var(--accent);background:#68e4ef08;color:var(--gold);box-shadow:none}body[data-theme=atlas] .topics .steps a{color:#555}body[data-theme=atlas] .topics .steps a.active{background:#fff1d4;border-color:#a57628;color:#382b10}body[data-theme] .topics .nav-chevron{color:var(--accent);margin-left:auto}body[data-theme=atlas] .topics a.active .nav-chevron{color:var(--gold)}
body[data-theme] .lesson-rail .lesson-actions{grid-template-columns:1fr}body[data-theme] .lesson-rail .lesson-actions #back{width:100%}body[data-theme] .lesson-rail .lesson-actions .primary{grid-column:auto}body[data-theme] #content{min-height:680px}body[data-theme] .stage{overflow:visible}body[data-theme=atlas] .stage:before{background-image:var(--canvas-pattern);background-size:var(--canvas-pitch) var(--canvas-pitch);background-position:var(--canvas-position);opacity:1}body[data-theme=cyberpunk]{background:#19171c}body[data-theme=atlas] .overview-instruction{color:#555}.overview-card{min-height:460px}.scenario-options button{min-height:36px}.overview-card .scenario-options{margin-bottom:18px;gap:6px}.overview-card h3{font-size:23.4px}.overview-card .overview-meaning{min-height:125px;flex:1}.overview-example{min-height:145px}body[data-theme] .overview-example .sentence{font-size:19.8px;line-height:1.65}.overview-card .focus-word{padding:5px 8px}body[data-theme=atlas] .overview-card .eyebrow{color:#626262}
.demo-head-note{font:10px monospace;color:var(--muted);margin:0 0 25px}.form-switch{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 24px}.form-switch button{min-height:44px;padding:10px 16px;border:1px solid var(--line);background:var(--panel);color:var(--text)}.form-switch button[aria-pressed=true]{background:var(--gold);color:#251b0d;border-color:var(--gold)}body[data-theme=atlas] .form-switch button{color:#444;background:#eee;border-color:#aaa}body[data-theme=atlas] .form-switch button[aria-pressed=true]{background:var(--gold);color:#251b0d;border-color:#9b6b25}.demo-note{margin:20px 0 0;padding:17px 20px;border-left:2px solid var(--accent);background:#68e4ef06;font-size:14.4px;line-height:1.7}.demo-note strong{color:var(--gold)}body[data-theme=atlas] .demo-note{background:#e9e9e9;color:#505050}body[data-theme=atlas] .demo-note strong{color:#80551a}.grammar-table button{min-height:44px}.grammar-table td{overflow-wrap:anywhere}.grammar-table th:first-child{width:28%}.grammar-table th:nth-child(2){width:24%}.aux-table{display:grid;gap:10px;font-size:13px}.aux-table div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:8px 0}.aux-table b{color:var(--gold)}body[data-theme=atlas] .aux-table b{color:#80551a}body[data-theme] .visual-panel .panel-caption{font-size:14px}.demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.demo-card{background:#261c2c;border:1px solid #806842;padding:22px;min-width:0;box-shadow:3px 3px #63304f}.demo-card h3{font:500 20.7px/1.3 var(--display);margin:0 0 14px}.demo-card p{font-size:16px;line-height:1.7;margin:0 0 16px}.demo-card .sentence{font-size:20.7px}.demo-card .small{font-size:14px;color:var(--muted);margin:14px 0 0}body[data-theme=atlas] .demo-card{background:#f5f5f5;border-color:#aaa;box-shadow:3px 3px #c8c8c8}body[data-theme=atlas] .demo-card .small{color:#555}.simple-table{width:100%;border-collapse:collapse;background:var(--panel);font-size:16px;margin:20px 0}.simple-table td,.simple-table th{padding:14px 17px;text-align:left;border:1px solid var(--line)}.simple-table th{font:10px monospace;letter-spacing:1px;color:var(--gold)}body[data-theme=atlas] .simple-table{background:#efefef}body[data-theme=atlas] .simple-table th{color:#555;background:#dadada}.table-wrap{overflow:auto;max-width:100%}
.mistake-list{display:grid;gap:14px}.mistake-tip{background:#261c2c;border:1px solid var(--line);border-left:2px solid var(--cyan)}.mistake-tip summary{padding:20px 22px;display:flex;align-items:center;gap:15px;cursor:pointer;list-style:none;font:500 16.2px/1.45 var(--display)}.mistake-tip summary::-webkit-details-marker{display:none}.mistake-tip summary .tip-num{font:10px monospace;color:var(--accent);flex:none}.mistake-tip summary:after{content:'+';margin-left:auto;color:var(--accent)}.mistake-tip[open] summary:after{content:'−'}.mistake-tip .tip-body{padding:0 22px 22px 51px}.tip-body p{line-height:1.7;font-size:14.4px;margin:0 0 20px}.correction-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}.correction-pair>div{padding:15px;border:1px solid var(--line);background:#211b26}.correction-pair small{display:block;font:9px monospace;letter-spacing:1px;margin-bottom:7px}.correction-pair .bad{color:#ff9ca9}.correction-pair .good{color:#8fe0b2}.correction-pair span{font-size:17px;color:var(--text)}body[data-theme=atlas] .mistake-tip{background:#efefef;border-color:#aaa;border-left-color:#7d501d}body[data-theme=atlas] .correction-pair>div{background:#f8f8f8}body[data-theme=atlas] .correction-pair span{color:#292929}body[data-theme=atlas] .correction-pair .bad{color:#a2253b}body[data-theme=atlas] .correction-pair .good{color:#21623c}
@media(max-width:1150px){.overview-card{padding:20px 16px}.overview-card h3{font-size:21.6px}.overview-card .overview-meaning{font-size:13.5px}.overview-example .sentence{font-size:18px!important}.lesson-workspace{grid-template-columns:195px minmax(0,1fr)}}
@media(max-width:900px){body[data-theme] #content{min-height:0}body[data-nav-open=true] .lesson-rail{display:flex}.rail-topics{width:100%}.rail-controls,.rail-foot{display:none}.demo-grid{grid-template-columns:1fr}.overview-card{min-height:0}.overview-card .overview-meaning{min-height:0}.overview-example{min-height:0}.page-footer{font-size:8px}.visual-panel{display:block!important}.correction-pair{grid-template-columns:1fr}.mistake-tip .tip-body{padding-left:22px}}
@media(max-width:600px){body[data-theme] .directions{gap:12px}.direction.active{outline-offset:2px!important}.masthead .edition{font-size:8px;letter-spacing:.5px}.brand{gap:10px}.brand b{font-size:21px}.brand .brand-description{font-size:8px;letter-spacing:.8px}.intro{align-items:center;gap:12px}.intro h1{font-size:20.7px!important}.intro .eyebrow{font-size:8px;letter-spacing:.8px}body[data-theme] .language-picker{gap:5px}body[data-theme] .language-picker button{min-width:44px;min-height:44px;padding:9px;font-size:16px}.rule-meaning{font-size:14.4px!important}.map-root{margin-left:24px;width:calc(100% - 24px);margin-bottom:30px}.map-branches{display:flex;flex-direction:column;padding-left:24px;gap:18px}.route-node{min-height:110px}.map-inspector{padding:18px}.map-inspector .sentence{font-size:20.7px}.map-inspector .form-switch button{flex:1;font-size:12px;padding:10px 8px}.mistake-tip summary{padding:18px 16px;font-size:17px;gap:10px}.challenge-preview{padding:20px;gap:18px}.challenge-preview .big-number{font-size:43.2px}.table-shell{overflow:auto}.grammar-table{min-width:0;font-size:14px}.grammar-table th{font-size:8px;padding:9px 6px}.grammar-table td{padding:10px 6px}.grammar-table td:nth-child(2){font-size:17px}.grammar-table td:last-child{font-size:12px}.grammar-table button{font-size:13px}.grammar-table button span{min-width:10px}.formula-token{white-space:normal}.demo-note{font-size:13.5px}.page-footer{align-items:flex-start;flex-direction:column}.page-footer>span:last-child{text-align:left}body[data-theme=atlas] .stage:before{background-size:var(--canvas-pitch) var(--canvas-pitch)}}
@media(prefers-reduced-motion:reduce){.demo-outline{display:none}*{animation:none!important;transition:none!important}}
/* Keep grammatical emphasis readable on light surfaces. */
body[data-theme=atlas] .sentence mark{color:#373323;background:#fff1d4;border-color:#d1ab65;box-shadow:none;text-shadow:none}
body[data-theme=atlas] .sentence mark:before,body[data-theme=atlas] .sentence mark:after{border-color:#a57628}
.lesson-diagram{margin:30px 0;container-type:inline-size;}.lesson-diagram figcaption{font:12px/1.7 monospace;letter-spacing:1px;color:var(--accent);margin:0 0 22px;}.diagram-canvas{position:relative;isolation:isolate;}.diagram-levels{display:flex;flex-direction:column;gap:var(--diagram-gap);position:relative;z-index:1;}.diagram-rank{display:flex;align-items:flex-start;justify-content:center;gap:var(--diagram-gap);flex-wrap:wrap;}.diagram-card{width:var(--node-w);max-width:100%;flex:0 1 var(--node-w);min-width:0;}.diagram-card p{font-size:14px;line-height:1.65;color:var(--muted);padding:0 5px;margin:12px 0 0;}.diagram-node{background:transparent;border:0;position:relative;isolation:isolate;width:100%;min-height:var(--node-h);color:var(--text);padding:22px 14%;font:500 15.3px/1.5 var(--display);display:flex;align-items:center;justify-content:center;overflow-wrap:anywhere;}.diagram-node strong{font-weight:500;}.shape-diamond{padding:34px 25%;}.shape-ellipse{padding:28px 18%;}.node-outline{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible;}.node-outline>*{fill:var(--raised);stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke;}.diagram-node:hover .node-outline>*,.diagram-node[aria-pressed=true] .node-outline>*{stroke:var(--gold);stroke-width:2;}.diagram-node[aria-pressed=true]{color:var(--gold);}.diagram-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0;}.diagram-links marker path{fill:var(--accent);}.diagram-edge{fill:none;stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke;}.diagram-edge.is-active{stroke:var(--gold);stroke-width:1.5;}.diagram-route-key{display:grid;gap:8px;padding:18px 0 0 20px;margin:25px 0 0;border-top:1px solid var(--line);font-size:13px;color:var(--muted);}.diagram-route-key strong{color:var(--text);}.diagram-route-key li>span[aria-hidden]{color:var(--accent);padding:0 5px;}[data-direction=right] .diagram-levels{flex-direction:row;justify-content:center;align-items:flex-start;}[data-direction=right] .diagram-rank{flex-direction:column;flex:1;min-width:0;}.diagram-canvas.is-free .diagram-levels,.diagram-canvas.is-free .diagram-rank{display:contents;}.diagram-canvas.is-free .diagram-card{position:absolute;left:var(--node-x);top:var(--node-y);}

.diagram-node{flex-direction:column;gap:10px;}.node-caption{display:block;font:400 13px/1.55 var(--font);color:var(--muted);}.diagram-pulse{fill:none;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke;pointer-events:none;}.workspace-page[data-theme=atlas] .diagram-pulse{stroke:#a57628;}
.diagram-canvas.is-stacked .diagram-levels,.diagram-canvas.is-stacked .diagram-rank{flex-direction:column;align-items:center;width:100%;}.diagram-canvas.is-stacked .diagram-card{flex-basis:auto;}[data-kind=decision] .diagram-canvas.is-stacked{padding-left:28px;}
.lesson-panel:focus{outline:none;}.lesson-panel:focus-visible{outline:1px solid var(--line);outline-offset:8px;}
.workspace-page [hidden]{display:none!important}.workspace-page .brand-description{font-style:normal}.workspace-page .intro h1 span{color:inherit}.workspace-page .stage{overflow:hidden}.workspace-page [data-lesson-panel]:focus{outline:none}.workspace-page .topics [data-locale]{font:inherit!important;color:inherit!important;flex:initial!important}.workspace-page .topics .nav-label{flex:1!important}.workspace-page .rail-heading strong>[data-locale]{font:inherit;color:inherit}.workspace-page .page-footer a{color:inherit;text-decoration:none}.workspace-page .lesson-rail .rail-foot{gap:12px}
.workspace-page{}.workspace-page[data-theme=atlas]{}.workspace-page .lesson-highlight{position:relative;display:inline-block;color:var(--gold);background:#ffbd5910;border:1px solid #a9804460;padding:1px 5px;white-space:normal}.workspace-page[data-theme=atlas] .lesson-highlight{color:#373323;background:#fff1d4;border-color:#d1ab65}.workspace-page .outline-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}.workspace-page .outline-svg rect{fill:none;stroke:var(--pink);stroke-width:1.1;vector-effect:non-scaling-stroke}.workspace-page[data-theme=atlas] .outline-svg rect{stroke:#b27424}
.workspace-page .examples-grid,.workspace-page .questions-grid{margin:24px 0}.workspace-page .lesson-table-wrap{overflow:auto;max-width:100%;margin:24px 0}.workspace-page .lesson-table{width:100%;border-collapse:collapse;background:var(--raised);font-size:16px}.workspace-page .lesson-table th,.workspace-page .lesson-table td{border:1px solid var(--line);padding:14px;text-align:left}.workspace-page .lesson-table thead{font:11px/1.5 monospace;color:var(--accent)}.workspace-page .lesson-table tbody th{font-weight:500}.workspace-page .question-assembly{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0}.workspace-page .question-part{padding:7px 10px;background:var(--raised);border:1px solid var(--line);font:500 19.8px/1.4 var(--display);white-space:nowrap}.workspace-page .question-lead{color:var(--gold);border-color:var(--gold)}.workspace-page[data-theme=atlas] .question-lead{color:#7d501d;border-color:#a57628}.workspace-page .diagram-node{cursor:pointer}.workspace-page .diagram-node[aria-pressed=true] .node-outline>*{stroke:var(--accent)}.workspace-page[data-theme=atlas] .diagram-node[aria-pressed=true]{color:#4a3916}.workspace-page[data-theme=atlas] .diagram-node[aria-pressed=true] .node-outline>*{fill:#fff1d4;stroke:#a57628}.workspace-page .diagram-inspectors h3{margin:0 0 15px;font:500 21.6px var(--display)}
.workspace-page .practice-set-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.workspace-page .practice-set-tabs button{background:var(--raised);color:var(--text);border:1px solid var(--line);padding:10px 14px;min-height:44px}.workspace-page .practice-set-tabs button[aria-pressed=true]{background:var(--gold);color:#21180d;border-color:#b2843e}.workspace-page .practice-set-tabs button:disabled{opacity:.6;cursor:not-allowed}.workspace-page .practice-nav-buttons{display:flex;justify-content:space-between;gap:12px;margin-top:24px}.workspace-page .practice-dialog{max-width:min(620px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto}.workspace-page .practice-dialog .practice-actions{display:flex;gap:12px;flex-wrap:wrap}.workspace-page .practice-dialog h2{font:500 24.3px/1.3 var(--display)}.workspace-page .practice-dialog p{line-height:1.7}.workspace-page .practice-submenu button{display:block;width:100%;padding:10px;border:1px solid transparent;background:transparent;text-align:left;color:var(--muted);font:12px/1.5 var(--font)}.workspace-page .practice-submenu button[aria-pressed=true]{border-color:var(--accent);color:var(--gold)}.workspace-page[data-theme=atlas] .practice-submenu button[aria-pressed=true]{color:#7d501d;background:#fff1d4}.workspace-page .practice-submenu button:disabled{opacity:.6}.workspace-page .practice-load-retry{padding:12px 20px;background:var(--gold);color:#21180d;border:0;min-height:44px}
@container(max-width:700px){[data-direction=right] .diagram-levels{flex-direction:column;align-items:center}.diagram-rank{flex-direction:column;align-items:center;width:100%}.diagram-card{flex-basis:auto}}
@media(max-width:900px){.workspace-page .lesson-rail .rail-foot{display:flex}.workspace-page .practice-submenu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.workspace-page .lesson-table th,.workspace-page .lesson-table td{padding:10px;font-size:13px}.workspace-page .question-part{font-size:17.1px}.workspace-page .practice-set-tabs{gap:6px}.workspace-page .practice-set-tabs button{padding:8px;font-size:13px}.workspace-page .diagram-route-key{font-size:12px}.workspace-page .diagram-node{font-size:15.3px}.workspace-page .node-caption{font-size:13px}}
.workspace-page .rail-section-label [data-locale]{float:none;margin-left:0;color:inherit;font:inherit}.workspace-page .question-assembly .question-part:last-child{max-width:100%;white-space:normal}.workspace-page .intro h1{color:var(--text)}
body.workspace-page[data-theme] .intro h1 [data-locale]{color:inherit!important}body.workspace-page[data-theme=atlas] .intro h1{color:#292929}body.workspace-page[data-theme=cyberpunk] .intro h1{color:#f2f4f5}.workspace-page .rail-section-label{justify-content:flex-start;gap:0}
/* Branching flowcharts share the Future Forms context cards and sentence builder. */
.branching-flow{container-type:inline-size;margin-top:26px;scroll-margin-top:24px}
.branch-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.branch-tabs button{min-height:44px;padding:10px 16px;border:1px solid var(--line);background:var(--panel);color:var(--text);font:500 13px/1.4 var(--font)}
.branch-tabs button[aria-selected=true]{background:var(--gold);border-color:var(--gold);color:#251b0d;box-shadow:2px 2px var(--pink)}
.branch-chart:focus{outline:none}.branch-chart:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.branch-canvas{position:relative;padding:0 0 6px;isolation:isolate}
.branch-connections{position:absolute;inset:0;overflow:visible;width:100%;height:100%;pointer-events:none;color:var(--accent);z-index:0}
.branch-tree{min-width:0;display:flex;flex-direction:column;align-items:center;position:relative}
.branch-children{display:grid;width:100%;gap:18px;align-items:start;margin-top:30px}
.branch-node{width:min(var(--node-w),100%);min-height:var(--node-h);padding:12px 14px;position:relative;isolation:isolate;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border:0;background:transparent;color:var(--text);font:500 14px/1.45 var(--font);overflow-wrap:anywhere}
.branch-node strong{font:inherit;color:inherit}.branch-node small{font:8px/1.5 monospace;letter-spacing:1px;color:var(--accent)}
.branch-node .node-outline>*{fill:#2b2130;stroke:#766075;stroke-width:1}
.branch-root{box-shadow:3px 3px #63304f;font-size:18px;color:var(--gold)}
.branch-root .node-outline>*{fill:#30232a;stroke:#b1884a}.branch-root small{font-size:8px}
.branch-context{font-size:13px}.branch-context .node-outline>*{fill:#302536}
.branch-decision{font-size:13.5px}.branch-decision .node-outline>*{fill:#25202a}
.branch-result{align-items:flex-start;text-align:left;padding-right:22px;cursor:pointer;font:500 15.3px/1.45 var(--display)}
.branch-result i{font:12px var(--font);position:absolute;right:9px;top:9px;color:var(--accent)}
.branch-result small{color:var(--muted);font:8px/1.5 monospace}
.branch-result:hover .node-outline>*{stroke:var(--accent);fill:#352b28}
.branch-result.active{color:var(--gold);box-shadow:2px 2px var(--pink)}
.branch-result.active .node-outline>*{fill:#352b1d;stroke:var(--gold);stroke-width:1.4}
.branch-node.is-path:not(.active) .node-outline>*{stroke:#b1884a}
.branch-wire,.branch-pulse{fill:none;vector-effect:non-scaling-stroke;stroke:#786371;stroke-width:1}
.branch-wire.selected{stroke:var(--gold);stroke-width:1.2}.branch-pulse{stroke:var(--accent);stroke-width:1.6}
.branch-builder{margin-top:30px;box-shadow:3px 3px #63304f}.branch-builder header{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.branch-builder .form-switch{margin:0;gap:5px}.branch-builder .form-switch button{font-size:12px;padding:9px 11px}
.branch-builder .flow-sentence{margin:0}.branch-builder .formula{flex-wrap:wrap}.branch-builder .formula-token{font-size:15px;padding:8px 11px}.branch-builder .flow-form-note{font-size:12.6px}
.branch-note{margin:18px 0 0;font-size:13px;line-height:1.7;color:var(--muted)}
body[data-theme=atlas] .branch-node{color:#3d3d3d}body[data-theme=atlas] .branch-node .node-outline>*{fill:#f5f5f5;stroke:#aaa}
body[data-theme=atlas] .branch-node small{color:#656565}body[data-theme=atlas] .branch-root{box-shadow:3px 3px #c8c8c8}body[data-theme=atlas] .branch-root .node-outline>*{fill:#eaeaea;stroke:#a57628}
body[data-theme=atlas] .branch-context .node-outline>*{fill:#eee}body[data-theme=atlas] .branch-decision .node-outline>*{fill:#f1f1f1}
body[data-theme=atlas] .branch-result:hover .node-outline>*{fill:#fff1d4;stroke:#a57628}body[data-theme=atlas] .branch-result.active{color:#453217;box-shadow:2px 2px #b5b5b5}
body[data-theme=atlas] .branch-result.active .node-outline>*{fill:#fff1d4;stroke:#a57628}body[data-theme=atlas] .branch-node.is-path:not(.active) .node-outline>*{stroke:#a57628}
body[data-theme=atlas] .branch-wire{stroke:#aaa}body[data-theme=atlas] .branch-wire.selected{stroke:#98742d}body[data-theme=atlas] .branch-pulse{stroke:#6e501d}
body[data-theme=atlas] .branch-builder{box-shadow:3px 3px #c8c8c8}body[data-theme=atlas] .branch-note{color:#555}
@container(max-width:760px){.branch-children{display:flex;flex-direction:column;gap:24px;margin-top:24px;padding-left:16px}.branch-tree{width:100%}.branch-canvas{padding-left:14px}.branch-node{width:100%;font-size:14px}.branch-root{font-size:16.2px}.branch-result{min-height:80px}.branching-flow .flow-instruction{flex-direction:column;gap:7px}.branch-tabs button{flex:1;padding:10px;font-size:12px}.branch-builder{padding:18px}.branch-builder .form-switch{width:100%;flex-wrap:wrap}.branch-builder .form-switch button{flex:1;justify-content:center}.branch-builder .flow-sentence{font-size:20.7px}.branch-builder .formula-token{font-size:13px;padding:6px 8px}.branch-note{font-size:12px}}
@media(prefers-reduced-motion:reduce){.branch-pulse{display:none}}

/* Scenario descriptions and flexible card counts for meaning-first overviews. */
body[data-theme] .overview-grid-1{grid-template-columns:minmax(0,1fr)}
body[data-theme] .overview-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-theme] .overview-example .scenario-meaning{font-size:14.4px;line-height:1.65;color:var(--muted);margin:0 0 16px}
body[data-theme] .overview-grid-1 .overview-card{min-height:0}
body[data-theme] .overview-grid-1 .overview-meaning{min-height:0;flex:none}
body[data-theme] .overview-grid-1 .overview-example{min-height:0}
@media(max-width:900px){body[data-theme] .overview-grid-2{grid-template-columns:minmax(0,1fr)}}

/* Separate meaning, the selected example, and the subject comparison. */
.workspace-page .structure-explorer{margin-block:32px}
.workspace-page .structure-sequence>.sentence-board{margin:20px 0 30px;min-height:0}
.workspace-page .structure-comparison{align-items:start;gap:26px}
.workspace-page .structure-comparison .table-shell{margin:0}
.workspace-page .structure-sequence .section-label{gap:12px}

/* Interactive explanation consoles use the existing Neon / Atlas vocabulary. */
.pattern-explorer{margin-block:38px;container-type:inline-size;--pattern-shadow:#63304f}
.pattern-heading{margin-bottom:22px}
.pattern-heading .eyebrow{margin:0 0 10px;color:var(--accent);font:10px/1.5 monospace;letter-spacing:1.3px}
.pattern-heading h3{font:600 21.6px/1.3 var(--display);margin:0 0 12px}
.pattern-heading>p:last-child{max-width:75ch;font-size:14.4px;line-height:1.7;color:var(--muted);margin:0}
.pattern-workspace{display:grid;grid-template-columns:minmax(170px,210px) minmax(0,1fr);gap:22px;align-items:start}
.pattern-choices{display:flex;flex-direction:column;gap:9px;min-width:0}
.pattern-choices button{display:flex;align-items:center;gap:10px;text-align:left;min-height:58px;padding:13px 14px;background:var(--raised);color:var(--text);border:1px solid var(--line);font:500 14px/1.5 var(--font);overflow-wrap:anywhere}
.pattern-choices button>span{flex:1}.pattern-choices small{font:9px monospace;color:var(--accent)}.pattern-choices b{font:14px var(--font);color:var(--accent)}
.pattern-choices button:hover{border-color:var(--accent)}
.pattern-choices button[aria-pressed=true]{background:var(--gold);border-color:var(--gold);color:#251b0d;box-shadow:3px 3px var(--pink)}
.pattern-choices button[aria-pressed=true] :is(small,b){color:inherit}
.pattern-choices button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.pattern-results{min-width:0}
.pattern-detail{background:var(--raised);border:1px solid var(--accent);border-left:2px solid var(--gold);box-shadow:4px 4px var(--pattern-shadow)}
.pattern-console{display:flex;justify-content:space-between;gap:14px;padding:10px 20px;background:var(--gold);color:#251b0d;font:10px/1.5 monospace;letter-spacing:1px}
.pattern-body{padding:24px}
.pattern-body h4{font:500 22.5px/1.35 var(--display);color:var(--gold);margin:0 0 12px}
.pattern-meaning{font-size:14.4px;line-height:1.7;color:var(--muted);max-width:70ch;margin:0 0 22px}
.pattern-detail .formula{margin:0 0 24px;flex-wrap:wrap;gap:8px}
.pattern-detail .formula-token{font-size:15px;white-space:normal;overflow-wrap:anywhere}
.pattern-examples{display:grid;gap:16px}
.pattern-examples .sentence-board{padding:20px 22px;min-height:0;margin:0;box-shadow:none}
.pattern-examples .sentence-board:after{display:none}
.pattern-examples .sentence{font-size:26.1px;line-height:1.7;margin:0}
.pattern-caption{color:var(--muted);font-size:14px;line-height:1.6;margin:8px 0 0}
.pattern-explanation{border-top:1px solid var(--line);margin-top:24px;padding-top:20px}
.pattern-explanation .eyebrow{font:10px/1.6 monospace;letter-spacing:1px;color:var(--accent);margin:0 0 8px}
.pattern-explanation>p:last-child{font-size:15px;line-height:1.75;margin:0;color:var(--text)}
body[data-theme=atlas] .pattern-explorer{--pattern-shadow:#c8c8c8}
body[data-theme=atlas] .pattern-detail{border-color:#aaa;border-left-color:#a57628;background:#f5f5f5}
body[data-theme=atlas] .pattern-console{background:#dedede;color:#444;border-bottom:1px solid #aaa}
body[data-theme=atlas] .pattern-body h4{color:#5c411b}
body[data-theme=atlas] .pattern-choices button[aria-pressed=true]{box-shadow:3px 3px #b5b5b5;border-color:#a57628}
@container(max-width:700px){.pattern-workspace{grid-template-columns:minmax(0,1fr);gap:18px}.pattern-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pattern-choices button{font-size:13px;padding:10px;min-height:54px}.pattern-choices button:last-child:nth-child(odd){grid-column:1/-1}.pattern-body{padding:18px}.pattern-body h4{font-size:20.7px}.pattern-detail .formula-token{font-size:13px;padding:7px 9px}.pattern-examples .sentence{font-size:22.5px}.pattern-examples .sentence-board{padding:16px}.pattern-console{padding:10px 16px;font-size:9px}}
@media(max-width:700px){.workspace-page .structure-comparison{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}.pattern-explorer{margin-block:30px}.pattern-heading h3{font-size:20.7px}}
@container(max-width:420px){.workspace-page .pattern-examples .lesson-highlight{display:inline;box-decoration-break:clone;-webkit-box-decoration-break:clone}.pattern-examples .outline-svg{display:none}}

/* Keep subject labels and examples two typographic points below the verb. */
.workspace-page .grammar-table{--verb-form-size:23px;--supporting-size:calc(var(--verb-form-size) - 2pt)}
.workspace-page .grammar-table td:nth-child(2){font-size:var(--verb-form-size)}
.workspace-page .grammar-table td:last-child,.workspace-page .grammar-table button,.workspace-page .grammar-table button span{font-size:var(--supporting-size)}
.workspace-page .grammar-table button span{vertical-align:baseline}
@media(max-width:1150px){.workspace-page .grammar-table{--verb-form-size:21px}}
@media(max-width:600px){.workspace-page .grammar-table{--verb-form-size:17px}}
/* Subject groups stay together and scale to the width of their table cell. */
.workspace-page .grammar-table button{container-type:inline-size}
.workspace-page .grammar-table button span{font-size:clamp(8px,10cqw,16px);white-space:nowrap;overflow-wrap:normal}

/* Context signals share the Future Forms story card and align with the table. */
.workspace-page .context-signal-layout{align-items:start}
.workspace-page .context-signal-layout>.visual-panel{margin-top:0}
.workspace-page .context-signal .decision-story{min-width:0}
.workspace-page .context-signal .decision-event p{font-size:14px;line-height:1.5}
.workspace-page .context-signal .decision-event small{font-size:8px;letter-spacing:1px}
.workspace-page .context-signal .decision-event{padding:11px 12px}
.workspace-page .context-signal .decision-reply p{font-size:16px}
.workspace-page .context-signal .lesson-highlight{color:inherit;background:transparent;font-weight:600}
.workspace-page .context-signal .decision-link{height:26px}
@media(prefers-reduced-motion:reduce){.workspace-page .context-signal .decision-dot{display:none}}

.workspace-page .structure-subject-hint{align-self:center;margin-left:12px;color:var(--accent);font:10px/1.5 monospace;letter-spacing:1px;white-space:nowrap}

/* Keep the overview pair compact on wide screens without shrinking its type. */
@media(min-width:1200px){
 .workspace-page #overview .overview-grid-2{width:90%;max-width:1280px}
}

.workspace-page #practiceOverview{margin-bottom:22px}
body[data-theme=atlas].workspace-page .practice-unlock .eyebrow,
body[data-theme=atlas].workspace-page .practice-set-card .eyebrow{color:var(--cyan)}
/* Compact reference cards: term, meaning, then a simple example. */
.reference-group{margin:28px 0;container-type:inline-size}
.reference-heading{font:500 22.5px/1.35 var(--display);margin:0 0 12px}
.reference-description{max-width:76ch;font-size:14.4px;line-height:1.7;margin:0 0 22px;color:var(--muted)}
.reference-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.reference-card{min-width:0;display:flex;flex-direction:column;background:var(--raised);border:1px solid var(--line);border-top:2px solid var(--accent);box-shadow:3px 3px var(--pink);padding:20px}
body[data-theme=cyberpunk] #conversation-greetings .reference-card{border-top:1px solid var(--line)}
body[data-theme=cyberpunk] #conversation-introductions .reference-card{
  border:1px solid var(--pink);
  box-shadow:3px 3px 0 color-mix(in srgb,var(--cyan) 38%,var(--panel));
}
/* Morning, afternoon and evening share the conversation panel outline. */
body[data-theme=cyberpunk] #conversation-greetings .reference-card:nth-child(n+4):nth-child(-n+6){
  border-color:var(--accent);
  box-shadow:4px 4px 0 var(--panel-offset);
}
.reference-top{display:flex;align-items:baseline;gap:12px}
.reference-index{color:var(--accent);font:10px/1.5 monospace;letter-spacing:1px}
.reference-top h3,.reference-top h4{font:600 25.2px/1.25 var(--display);color:var(--text);margin:0}
.reference-meaning{font-size:14.4px;line-height:1.6;margin:12px 0 18px;color:var(--muted);flex:1}
.reference-card .reference-example{font:500 17.1px/1.65 var(--font);margin:0;padding-top:14px;border-top:1px solid var(--line)}
body[data-theme=atlas] .reference-card{box-shadow:3px 3px #c8c8c8;border-top-color:var(--accent)}
@container(max-width:780px){.reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container(max-width:480px){.reference-grid{grid-template-columns:1fr}.reference-card{padding:18px}}
/* Subject pronouns use the established grammar comparison table. */
:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table-wrap{border:1px solid var(--pink);box-shadow:4px 4px color-mix(in srgb,var(--pink) 30%,transparent)}
:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table{margin:0;table-layout:fixed}
:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table th,:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table td{border:0;border-bottom:1px solid var(--line);padding:18px 20px;line-height:1.6}
:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table thead{background:color-mix(in srgb,var(--pink) 15%,var(--raised));color:var(--gold);text-transform:uppercase;letter-spacing:1.5px}
:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table thead th:first-child{width:18%}
:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table thead th:nth-child(2){width:42%}
:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table tbody th{color:var(--accent);font:500 19.8px/1.5 monospace}
:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table td{font-size:18px}
:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table tbody tr:hover{background:color-mix(in srgb,var(--gold) 12%,var(--raised))}
body[data-theme=atlas] :is(#subject-pronouns,#names-and-noun-phrases) .lesson-table-wrap{border-color:var(--line);box-shadow:4px 4px #c8c8c8}
body[data-theme=atlas] :is(#subject-pronouns,#names-and-noun-phrases) .lesson-table thead{background:#dedede;color:#715020}
@media(max-width:600px){:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table th,:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table td{padding:12px 8px;font-size:14px;overflow-wrap:break-word}:is(#subject-pronouns,#names-and-noun-phrases) .lesson-table thead th{font-size:9px;letter-spacing:.4px}}

#names-and-noun-phrases .lesson-table thead th:first-child{width:30%}
#names-and-noun-phrases .lesson-table thead th:nth-child(2){width:22%}

/* Give nested section names room beside the progress lock. */
body[data-theme] .lesson-rail .topics .steps a[data-in-group] {
  font-size: 12px;
  padding-inline: 6px;
  gap: 4px;
}
/* Scale the complete interface at desktop CSS viewport widths. Mobile stays native.
   CSS zoom participates in layout, including controls and measured SVG diagrams. */
@media screen and (min-width:1200px){
 body[data-theme]{--desktop-scale:1.1;zoom:var(--desktop-scale)}
 body[data-theme] :is(.page-shell,.library-shell){width:calc(100% - 64px);max-width:none}
 body[data-theme] :is(.rule-meaning,.lesson-copy,.demo-note,.flow-context-copy,.flow-form-note){max-width:85ch}
 body[data-theme] .lesson-rail .topics :is(a,button){font-size:14px}
 body[data-theme] :is(.eyebrow,.rail-section-label,.rail-heading small,.console-bar,.branch-node small){font-size:10px}
 body[data-theme] :is(.branch-context,.flow-context strong){font-size:13.5px}
 body[data-theme] .theme-toggle-row{font-size:13px}
}
@media screen and (min-width:1600px){body[data-theme]{--desktop-scale:1.25}}
@media screen and (min-width:2200px){body[data-theme]{--desktop-scale:1.5}}
@media screen and (min-width:3000px){body[data-theme]{--desktop-scale:1.75}}
@media screen and (min-width:3800px){body[data-theme]{--desktop-scale:2}}
/* Sidebar hierarchy only: retain the existing Neon / Atlas course styles. */
.learning-navigation{min-width:0;padding:0 0 16px;overflow-wrap:anywhere;grid-column:1/-1}
.lesson-rail #railPosition{margin-inline-start:auto}
.learning-navigation [hidden]{display:none!important}
.learning-level-label{font-weight:400;margin:20px 0 9px}
.learning-level+.learning-level{margin-top:10px}
.learning-lesson-link{display:flex;align-items:center;gap:8px;margin:0 10px;padding:13px 10px;min-height:48px;border-bottom:1px solid var(--line);color:var(--text);font:500 15.3px/1.4 var(--font);text-decoration:none}
.learning-lesson-title{flex:1;min-width:0}
.learning-lesson-title [data-locale]{font:inherit;color:inherit}
.learning-disclosure{margin-left:auto;font-size:18px;color:var(--accent)}
.learning-draft{font:10px/1.4 monospace;color:inherit}
.learning-lesson-link:hover{background:var(--panel)}
.learning-lesson-link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.learning-lesson-link.is-current{background:var(--gold);color:#261b20;box-shadow:3px 0 var(--pink)}
.learning-lesson-link.is-current .learning-disclosure{color:inherit}
.learning-lesson-panel>.rail-topics>.rail-section-label{display:none}
body[data-theme] .learning-lesson-panel .topics{padding:6px 10px 6px 20px}
body[data-theme] .learning-lesson-panel .topics :is(a,button).active:not(.flow-nav):not(.practice-nav){background:#ffbd590d;color:var(--gold);box-shadow:inset 2px 0 var(--gold)}
body[data-theme] .learning-lesson-panel .topics :is(a,button).active span{color:inherit}
body[data-theme] .learning-lesson-panel .topics .steps a.active{border-color:var(--accent);box-shadow:none}
[data-theme=atlas] .learning-lesson-link.is-current{background:#343434;color:#f3f3f3;box-shadow:inset 3px 0 var(--gold)}
body[data-theme=atlas] .learning-lesson-panel .topics :is(a,button).active:not(.flow-nav):not(.practice-nav){color:#382b10;background:#fff1d4;box-shadow:inset 2px 0 #b88631}
body[data-theme=atlas] .learning-lesson-panel .topics .steps a.active{border-color:#a57628;box-shadow:none}
/* The standard lesson template uses the same hierarchy without workspace chrome. */
.course-sidebar .learning-lesson-panel nav{margin:6px 10px 12px 20px}
.course-sidebar .learning-level-label{padding:0 10px;font:11px/1.5 monospace;color:var(--muted)}
.course-sidebar .learning-lesson-link{padding:12px 10px;font-size:14.4px}
@media(min-width:901px){.course-sidebar .learning-navigation{max-height:calc(100dvh / var(--desktop-scale,1) - 160px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent;overscroll-behavior:contain}}
@media(max-width:900px){body[data-theme] .learning-lesson-panel .topics{display:flex;flex-direction:column}.learning-lesson-link{min-height:48px}body[data-theme] .learning-lesson-panel .topic-submenu{grid-column:auto;width:auto;min-width:0}body[data-theme] .learning-lesson-panel .steps{display:flex;flex-direction:column}body[data-theme] .learning-lesson-panel .steps :is(a,button){min-height:44px}}

/* Progress locks retain readable labels in both themes. */
.is-locked{cursor:not-allowed!important;opacity:.65}
.learning-test-dialog{background:var(--panel,#1b191a);color:var(--text,#f2f4f5);border:1px solid var(--line,#777);padding:24px;width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.learning-test-dialog::backdrop{background:#0009}
.learning-test-dialog p{line-height:1.6;margin:16px 0}
.learning-test-dialog label{display:block;margin-bottom:8px}
.learning-test-dialog input{width:100%;box-sizing:border-box;padding:12px;border:1px solid var(--line,#777);background:var(--raised,#333);color:inherit;font:inherit}
.learning-test-dialog form>div{display:flex;gap:12px;flex-wrap:wrap}
.learning-test-dialog button{min-height:44px;padding:12px 16px;border:1px solid var(--line);background:var(--raised);color:var(--text);font:inherit}
.learning-test-dialog button[type=submit]{background:var(--gold,#ffbd59);color:#21180d}



body[data-theme=cyberpunk]{--best-lock-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M7.5%2010V6.5L10%204h4l2.5%202.5V10%22%20fill%3D%22none%22%20stroke%3D%22%23ffbd59%22%20stroke-width%3D%221.6%22%20stroke-linejoin%3D%22miter%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M5%2010h14v8l-3%203H5Z%22%20fill%3D%22%23ffbd59%22%20fill-opacity%3D%22.09%22%20stroke%3D%22%23ffbd59%22%20stroke-width%3D%221.6%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22m12%2012.7%201.8%201.8-1.8%201.8-1.8-1.8Z%22%20fill%3D%22%2370ded9%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M12%2016v2%22%20stroke%3D%22%2370ded9%22%20stroke-width%3D%221.6%22/%3E%0A%20%20%20%20%20%20%20%20%3C/svg%3E")}

body[data-theme=atlas]{--best-lock-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M8%2010V7a4%204%200%200%201%208%200v3%22%20fill%3D%22none%22%20stroke%3D%22%2354575a%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%3Crect%20x%3D%225%22%20y%3D%2210%22%20width%3D%2214%22%20height%3D%2211%22%20rx%3D%222%22%20fill%3D%22%23fffaf1%22%20stroke%3D%22%2354575a%22%20stroke-width%3D%221.6%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2214.5%22%20r%3D%221.6%22%20fill%3D%22%2395601e%22/%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M12%2016v2%22%20stroke%3D%22%2395601e%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22/%3E%0A%20%20%20%20%20%20%20%20%3C/svg%3E")}

.best-lock-icon{display:inline-block;width:20px;height:20px;min-width:20px;vertical-align:middle;background:var(--best-lock-image) center/contain no-repeat}
:is([data-learning-lesson],[data-section-link],[data-topic],[data-step]).is-locked>.best-lock-icon{margin-left:auto;flex-shrink:0}
.is-locked :is(.learning-disclosure,.nav-chevron){display:none!important}
:is([data-section-link],[data-topic],[data-step]).is-locked::after{display:none!important}
.practice-submenu button:disabled{display:flex;align-items:center;gap:6px}
[data-topic].is-locked>b[aria-hidden=true]{display:none!important}

/* Native SVG cursors: transparent, no glow; text editing keeps its native cursor. */
@media (any-hover:hover) and (forced-colors:none){
body[data-theme=cyberpunk]{
--cursor-default:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%2365e8ef%22%20stroke-width%3D%222.8%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M5%204%2026%2016%2017%2019%2013%2028Z%22%2F%3E%3C%2Fsvg%3E") 5 4, default;
--cursor-interactive:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%2365e8ef%22%20stroke-width%3D%222.8%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%2016V5a2%202%200%200%201%204%200v8h4l6%206v9H11l-6-9v-3h4l3%204Z%22%2F%3E%3C%2Fsvg%3E") 14 4, pointer;
--cursor-locked:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23ff6268%22%20stroke-width%3D%222.8%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211%22%2F%3E%3Cpath%20d%3D%22m8.2%208.2%2015.6%2015.6m0-15.6L8.2%2023.8%22%2F%3E%3C%2Fsvg%3E") 16 16, not-allowed;
}
body[data-theme=atlas]{
--cursor-default:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%2323545b%22%20stroke-width%3D%222.8%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M5%204%2026%2016%2017%2019%2013%2028Z%22%2F%3E%3C%2Fsvg%3E") 5 4, default;
--cursor-interactive:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%2323545b%22%20stroke-width%3D%222.8%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M12%2016V5a2%202%200%200%201%204%200v8h4l6%206v9H11l-6-9v-3h4l3%204Z%22%2F%3E%3C%2Fsvg%3E") 14 4, pointer;
--cursor-locked:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22none%22%20stroke%3D%22%23a2253b%22%20stroke-width%3D%222.8%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2211%22%2F%3E%3Cpath%20d%3D%22m8.2%208.2%2015.6%2015.6m0-15.6L8.2%2023.8%22%2F%3E%3C%2Fsvg%3E") 16 16, not-allowed;
}
/* Keep general controls at low specificity so locked states always take priority. */
body[data-theme]{cursor:var(--cursor-default,default)}
body[data-theme] :where(a[href],button,summary,select,label[for],[role="button"],[role="link"],[data-selectable-row],[data-node]),body[data-theme] :where(a[href],button,summary,[role="button"],[role="link"],[data-selectable-row],[data-node]) *{cursor:var(--cursor-interactive,pointer)!important}
body[data-theme] :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),textarea,[contenteditable="true"]){cursor:text!important}
body[data-theme] :where(input[type="button"],input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="radio"],input[type="range"],input[type="color"],input[type="file"]){cursor:var(--cursor-interactive,pointer)!important}
body[data-theme] :is(.is-locked,:disabled,[aria-disabled="true"]),body[data-theme] :is(.is-locked,:disabled,[aria-disabled="true"]) *{cursor:var(--cursor-locked,not-allowed)!important}
}

/* One-shot approved unlock: hinged opening, two flickers, duration comes from motion-config.js. */
.is-unlocking>.best-lock-icon{margin-left:auto;flex-shrink:0}
.is-unlocking :is(.learning-disclosure,.nav-chevron){display:none!important}
:is([data-section-link],[data-topic],[data-step]).is-unlocking::after{display:none!important}
[data-topic].is-unlocking>b[aria-hidden=true]{display:none!important}
.best-lock-icon.is-opening{background:none;animation:lock-disappear var(--unlock-duration) steps(1,end) forwards}
.best-lock-icon.is-opening svg{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.best-lock-icon .unlock-neon{stroke:#ffbd59}
.best-lock-icon .unlock-atlas{stroke:#54575a}
body[data-theme=atlas] .best-lock-icon .unlock-neon,body:not([data-theme=atlas]) .best-lock-icon .unlock-atlas{display:none}
.unlock-neon .unlock-key{fill:#70ded9;stroke:none}.unlock-neon .unlock-key-stem{stroke:#70ded9}
.unlock-atlas .unlock-key{fill:#95601e;stroke:none}.unlock-atlas .unlock-key-stem{stroke:#95601e}
.unlock-shackle{transform-box:view-box;transform-origin:16.5px 10px;animation:lock-open var(--unlock-shackle-duration) cubic-bezier(.25,.1,.25,1) forwards}
.unlock-atlas .unlock-shackle{transform-origin:16px 10px}
@keyframes lock-open{to{transform:rotate(20deg)}}
@keyframes lock-disappear{0%{opacity:1}54.1667%{opacity:0}62.5%{opacity:1}70.8333%{opacity:0}79.1667%{opacity:1}91.6667%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.best-lock-icon.is-opening{animation:none;opacity:0}.unlock-shackle{animation:none}}

/* Preserve the original Back and primary action styling outside the sidebar. */
body[data-theme] .section-controls{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;margin-top:28px;padding:0 6px 6px 0}
body[data-theme] .section-controls #back{min-height:44px;padding:12px 16px;border:1px solid var(--line);background:var(--raised);color:var(--text);font:inherit;border-radius:0;box-shadow:none}
body[data-theme] .section-controls #next{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-left:auto;min-height:44px;width:180px;max-width:calc(100% - 100px);padding:11px 13px;border:0;border-radius:0;background:var(--gold);color:#22190c;font:600 11px/1.4 var(--font);text-align:left;box-shadow:3px 3px var(--pink)}
body[data-theme=atlas] .section-controls #next{border:1px solid #c29440;color:#30250e;box-shadow:none}
body[data-theme] .section-controls button:disabled{opacity:.45;cursor:not-allowed}

/* Shared defaults for lesson headings without component-specific type sizes. */
:where(.lesson-canvas, .course-main) :where(h2) { font-size: 1.35em; }
:where(.lesson-canvas, .course-main) :where(h3) { font-size: 1.053em; }
:where(.lesson-canvas, .course-main) :where(h4) { font-size: .9em; }

.learning-collection-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit}
.learning-collection-toggle strong{font:inherit;font-weight:800}
.learning-collection-toggle>span{font-size:1rem;color:var(--gold)}
.learning-collection-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.learning-level-badge{font-size:.7rem;align-self:center;opacity:.8}
[data-collection][hidden],.practice-nav-buttons[hidden]{display:none!important}

@media(max-width:900px){body[data-theme] .rail-heading[data-learning-heading]{display:block;padding:8px 14px}body[data-theme] .rail-heading[data-learning-heading] small{display:none}.learning-collection-toggle{min-height:44px}}

/* Separate the flat lesson list from the heading divider. */
.learning-navigation > [data-collection="lessons"]{padding-top:10px}
/* Neon Relay dark palette and shared decorative graphics. Light surfaces are separate. */
.relay-chrome{display:none}
body[data-theme=cyberpunk]{background:var(--bg);background-image:var(--crt-lines);background-size:auto}
body[data-theme=cyberpunk]{--lesson-edge-inset:8px}
body[data-theme=cyberpunk] .lesson{margin-right:var(--lesson-edge-inset);background:var(--panel);border:1px solid var(--line);border-radius:0;box-shadow:5px 5px var(--panel-offset)}
body[data-theme=cyberpunk] :is(.console-bar,.rail-heading,.lesson-footer,.mobile-nav-bar){background:var(--panel);color:var(--muted);border-color:var(--line);border-width:1px;box-shadow:none}
body[data-theme=cyberpunk] .console-bar :is(.console-title,#systemLabel){color:var(--muted)}
body[data-theme=cyberpunk] .lesson-rail .topic-submenu{border-left-color:var(--line);background:var(--panel)}
body[data-theme=cyberpunk] .console-bar{border-bottom:1px solid var(--line)}
body[data-theme=cyberpunk] .lesson-rail{background:var(--panel);border-right:1px solid var(--line)}
body[data-theme=cyberpunk] :is(.rail-foot,.rail-controls,.rail-steps,.masthead,.page-footer){border-color:var(--line)}
body[data-theme=cyberpunk] .rail-heading strong{color:var(--text)}
body[data-theme=cyberpunk] :is(.rail-section-label,.rail-foot,.demo-head-note,.heading-code){color:var(--muted)}
body[data-theme=cyberpunk] .stage{background:var(--bg)}
body[data-theme=cyberpunk] .stage:before{background-image:var(--crt-lines);background-size:auto;opacity:1}
body[data-theme=cyberpunk] .course-main{background:var(--bg);background-image:var(--crt-lines);background-size:auto}
/* Both lesson themes share the same folder header and the status row below the frame. */
body[data-theme] .intro { display: block; padding: 16px 0; }
body[data-theme] .relay-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.relay-path { zoom: 0.8; min-width: 0; font: 14px/1.5 monospace; color: var(--muted); }
.relay-path ol { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; padding: 0; margin: 0; list-style: none; }
.relay-path li,
.relay-path a { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.relay-path li + li::before { content: '/'; color: var(--muted); margin-right: 6px; }
.relay-path [aria-current="page"] { color: var(--text); overflow-wrap: anywhere; }
.relay-path svg { width: 22px; height: 20px; flex: none; fill: none; stroke: var(--folder-stroke); stroke-width: 1.25; stroke-linejoin: round; }
@media(max-width:700px){body[data-theme=cyberpunk]{--lesson-edge-inset:5px}}
.relay-signals { margin-inline-end:var(--lesson-edge-inset,0px); display: flex; flex: none; gap: 6px; }
body[data-theme] .motion-bar {
  flex-direction: row;
  align-items: center;
  column-gap: 12px;
  padding-inline-end: 0;
}
.motion-bar > div { min-width: 0; flex-wrap: wrap; }
.motion-bar > .relay-barcode {
  flex: none;
  width: clamp(42px, 14vw, 72px);
  height: 23px;
  margin-inline-start: auto;
  background: repeating-linear-gradient(90deg,var(--muted) 0 1px,transparent 1px 3px,var(--muted) 3px 5px,transparent 5px 7px,var(--muted) 7px 8px,transparent 8px 12px);
  opacity: .5;
}
body[data-theme] .relay-signals i{width:5px;height:5px;background:var(--cyan);opacity:.65;animation:relay-breathe var(--relay-breathe-duration) ease-in-out infinite;animation-play-state:var(--relay-play-state,paused)}
body[data-theme] .relay-signals i:nth-child(2){background:var(--gold);animation-delay:calc(var(--relay-breathe-duration) / -3)}
body[data-theme] .relay-signals i:nth-child(3){background:var(--pink);animation-delay:calc(var(--relay-breathe-duration) / -1.5)}
body[data-theme=cyberpunk] .lesson-heading{position:relative}
body[data-theme] .lesson-rail .rail-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  row-gap: 6px;
}
.lesson-rail .rail-foot #railPosition {
  grid-area: 1 / 1;
  margin: 0;
}
[data-relay-visible] { --relay-play-state: running; }
@keyframes relay-breathe{0%,100%{opacity:.25}50%{opacity:1}}
body[data-theme=cyberpunk] .lesson-heading .eyebrow{color:var(--cyan);background:transparent;border:0;padding-left:0}
body[data-theme=cyberpunk] :is(.visual-panel,.demo-card,.overview-card,.compare-card,.reference-card,.sentence-board,.table-shell,.time-path,.question-zone,.flow-detail,.map-inspector,.mistake-tip,.lesson-rule,.lesson-examples article,.library-card,.conversation-panel,.branch-builder){background:var(--panel);border:1px solid var(--line);border-radius:0;box-shadow:3px 3px var(--panel-offset)}
body[data-theme=cyberpunk] .overview-card:nth-child(n){border-color:var(--line)}
/* Earlier conversation refinements include IDs; keep those surfaces consistent. */
body[data-theme=cyberpunk] :is(#conversation-greetings,#conversation-introductions) .reference-card:nth-child(n):nth-child(n){background:var(--panel);border:1px solid var(--line);box-shadow:3px 3px var(--panel-offset)}
body[data-theme=cyberpunk] :is(.overview-example,.selected-example,.decision-event,.flow-context,.flow-leaf,.correction-pair>div,.formula-token,.question-part,.word-token,.connector-map>div,.before-sentence){background:var(--raised);border-color:var(--line);color:var(--text);box-shadow:none}
body[data-theme=cyberpunk] :is(.overview-note,.demo-note,.teaching-tip,.compare-summary){background:var(--panel);color:var(--text);border-color:var(--line);border-left-color:var(--gold)}
body[data-theme=cyberpunk] .panel-label{background:var(--raised);color:var(--muted);border-bottom:1px solid var(--line)}
body[data-theme=cyberpunk] :is(.grammar-table th,.simple-table th){background:var(--raised);color:var(--muted);border-color:var(--line)}
body[data-theme=cyberpunk] :is(.grammar-table tbody tr,.lesson-table tbody){background:var(--panel)}
body[data-theme=cyberpunk] .grammar-table td{border-color:var(--line)}
body[data-theme=cyberpunk] .learning-lesson-link.is-current{background:var(--gold);color:var(--on-gold);box-shadow:none}
body[data-theme=cyberpunk] .lesson-rail .topics :is(a,button){border-color:var(--line);color:var(--text);box-shadow:none}
body[data-theme=cyberpunk] .lesson-rail .topics :is(a,button)>span{color:var(--muted)}
body[data-theme=cyberpunk] .lesson-rail .topics :is(a,button).active,
body[data-theme=cyberpunk] .learning-lesson-panel .topics :is(a,button).active:not(.flow-nav):not(.practice-nav),
body[data-theme=cyberpunk] .lesson-rail .steps :is(a,button).active{background:var(--gold);color:var(--on-gold);border-color:var(--gold);box-shadow:none}
body[data-theme=cyberpunk] .lesson-rail .topics :is(a,button).active :is(span,b){color:inherit}
body[data-theme=cyberpunk] .lesson-rail .steps :is(a,button).active:after{color:var(--on-gold)}
body[data-theme] :is(.focus-word,.lesson-highlight,.sentence mark,.compare-card mark,.selected-example mark,.formula-token.focus,.lesson-token.is-focus,.word-token.aux){background:var(--gold);color:var(--on-gold);border:1px solid var(--gold);box-shadow:none;text-shadow:none;animation:none}
body[data-theme] :is(.focus-word,.lesson-highlight,.sentence mark,.compare-card mark,.selected-example mark) :is([data-locale],strong,b){color:inherit}
body[data-theme] :is(.focus-word,.lesson-highlight,.sentence mark,.compare-card mark,.selected-example mark,.formula-token.focus,.lesson-token.is-focus,.word-token.aux):before,body[data-theme] :is(.focus-word,.lesson-highlight,.sentence mark,.compare-card mark,.selected-example mark,.formula-token.focus,.lesson-token.is-focus,.word-token.aux):after{display:none}
body[data-theme] :is(.outline-svg,.perimeter){display:none}
body[data-theme] .focus-word .signal-underline{display:none}
body[data-theme=cyberpunk] :is(.form-switch button.active,.form-switch button[aria-pressed=true],.scenario-options button[aria-pressed=true],.scenario-options button.active,.practice-set-tabs button[aria-pressed=true],.branch-tabs button[aria-pressed=true],.flow-leaf.active,.primary,.library-open,.lesson-continue){background:var(--gold);color:var(--on-gold);border-color:var(--gold);box-shadow:none}
body[data-theme=cyberpunk] :is(.grammar-table tbody tr.active,.selectable-comparison .lesson-table tbody tr.active){background:var(--gold);color:var(--on-gold);box-shadow:none}
body[data-theme=cyberpunk] :is(.grammar-table tbody tr.active,.selectable-comparison .lesson-table tbody tr.active) :is(td,th,button,span,mark,b){color:var(--on-gold);border-color:var(--on-gold)}
body[data-theme=cyberpunk] :is(.branch-node,.diagram-node) .node-outline>*{fill:var(--panel);stroke:var(--line)}
body[data-theme=cyberpunk] :is(.branch-node.active,.diagram-node[aria-pressed=true]) .node-outline>*{fill:var(--gold);stroke:var(--gold)}
body[data-theme=cyberpunk] :is(.branch-node.active,.diagram-node[aria-pressed=true]),body[data-theme=cyberpunk] :is(.branch-node.active,.diagram-node[aria-pressed=true]) :is(small,.node-caption){color:var(--on-gold)}
body[data-theme=cyberpunk] :is(.branch-node,.diagram-node):hover .node-outline>*{stroke:var(--gold)}
body[data-theme=cyberpunk] :is(button,a,summary):focus-visible{outline:2px solid var(--gold);outline-offset:3px}
@media(hover:hover){
 body[data-theme=cyberpunk] :is(.learning-lesson-link,.topics a,.topics button,.steps a,.steps button,.scenario-options button,.form-switch button,.conversation-replies button,.conversation-history button,.practice-set-tabs button,.primary):not(:disabled):not(.is-locked):hover{outline:1px solid var(--gold);outline-offset:-1px;border-color:var(--gold)}
 body[data-theme=cyberpunk] :is(.demo-card,.overview-card,.reference-card,.compare-card,.library-card):hover{border-color:var(--gold)}
 body[data-theme=cyberpunk] .overview-card:nth-child(n):hover{border-color:var(--gold)}
 body[data-theme=cyberpunk] :is(#conversation-greetings,#conversation-introductions) .reference-card:nth-child(n):nth-child(n):hover{border-color:var(--gold)}
}
@media(max-width:600px){
 body[data-theme=cyberpunk] .masthead{height:auto;min-height:58px;padding:8px 0;row-gap:4px}
 body[data-theme] .relay-chrome { gap: 9.6px; }
 .relay-path { font-size: 12px; }
 .relay-path ol { gap: 8px 12px; }
 .relay-path li,.relay-path a { gap: 7px; }
 .relay-path li + li::before { margin-right: 0; }
 .relay-path svg { width: 17px; }
}
@media(prefers-reduced-motion:reduce){
 body[data-theme] :is(.relay-signals,.relay-signals i){animation:none;opacity:.65}
}
/* Neon Relay light surfaces inside Vector Atlas's existing gray/grid shell. */
body[data-theme=atlas] :is(.lesson-rail,.course-sidebar){
 --panel:#eaeaea;--raised:#f2f2f2;--text:#292929;--muted:#696969;--line:#b7b7b7;
 --accent:#7d501d;--cyan:#545454;--pink:#895b20;--lime:#545454;--panel-offset:#b7b7b7;
 color:var(--text);
}
body[data-theme=atlas] .lesson{border:1px solid var(--line);border-top:3px solid var(--accent);box-shadow:4px 4px var(--panel-offset)}
body[data-theme=atlas] :is(.lesson-canvas,.course-main){color:var(--text)}
body[data-theme=atlas] .console-bar{background:var(--raised);border-color:var(--line);color:var(--muted)}
body[data-theme=atlas] .console-bar :is(.console-title,#systemLabel){color:inherit}
/* Section headings stay open on the grid; lavender title bars belong to panels. */
body[data-theme=atlas] .lesson-heading .eyebrow{color:var(--accent);background:transparent}
body[data-theme=atlas] :is(.rule-title,.intro h1,.reference-top h3,.reference-top h4){color:var(--text)}
body[data-theme=atlas] :is(.intro>.eyebrow,.intro>div>.eyebrow,.page-footer,.page-footer a,.page-footer button,.motion-bar,.motion-bar span){color:var(--muted)}
body[data-theme=atlas] :is(.rule-meaning,.reference-meaning,.overview-instruction,.overview-meaning,.demo-head-note){color:var(--muted)}
body[data-theme=atlas] :is(.visual-panel,.demo-card,.overview-card,.compare-card,.reference-card,.sentence-board,.table-shell,.time-path,.question-zone,.flow-detail,.map-inspector,.mistake-tip,.lesson-rule,.lesson-examples article,.library-card,.conversation-panel,.branch-builder,.pattern-detail){background:var(--panel);border:1px solid var(--line);border-radius:0;box-shadow:4px 4px var(--panel-offset);color:var(--text)}
body[data-theme=atlas] :is(.lesson-canvas,.course-main) .question-card{background:var(--panel);border-color:var(--line);box-shadow:4px 4px var(--panel-offset);color:var(--text)}
body[data-theme=atlas] :is(.visual-panel,.conversation-panel){border-top:3px solid var(--accent)}
body[data-theme=atlas] .visual-panel:before,body[data-theme=atlas] .visual-panel:after{background:var(--accent)}
body[data-theme=atlas] .panel-label{background:var(--raised);color:var(--muted);border-bottom:1px solid var(--line);padding:10px 12px;margin:0 0 18px}
body[data-theme=atlas] :is(.reference-card,.overview-card,.compare-card):nth-child(n){border-color:var(--line)}
body[data-theme=atlas] :is(.overview-example,.selected-example,.decision-event,.flow-context,.flow-leaf,.correction-pair>div,.formula-token,.question-part,.word-token,.connector-map>div,.before-sentence){background:var(--raised);border-color:var(--line);color:var(--text);box-shadow:none}
body[data-theme=atlas] :is(.overview-note,.demo-note,.teaching-tip,.compare-summary){background:var(--panel);color:var(--text);border-color:var(--line);border-left-color:var(--accent)}
body[data-theme=atlas] .overview-note{border-top:3px solid var(--accent);box-shadow:4px 4px var(--panel-offset)}
body[data-theme=atlas] .overview-note :is(h3,p){color:var(--text)}
body[data-theme=atlas] :is(.simple-table,.lesson-table,.grammar-table){border-color:var(--line);color:var(--text)}
body[data-theme=atlas] :is(.grammar-table th,.simple-table th,.lesson-table thead){background:var(--raised);color:var(--muted);border-color:var(--line)}
body[data-theme=atlas] :is(.grammar-table tbody tr,.lesson-table tbody){background:var(--panel)}
body[data-theme=atlas] :is(.grammar-table td,.lesson-table th,.lesson-table td){border-color:var(--line)}
body[data-theme=atlas] :is(.grammar-table button,.demo-card .small,.panel-caption,.panel-foot){color:var(--muted)}
body[data-theme=atlas] :is(.panel-label span,.decision-event small,.focus-module small){color:var(--muted)}
body[data-theme=atlas] .grammar-table button span{color:inherit}
/* Small controls stay lavender. A heavier yellow outline and weight mark selection. */
body[data-theme=atlas] :is(.scenario-options button,.form-switch button,.branch-tabs button,.practice-set-tabs button,.conversation-replies button,.conversation-history button,.diagram-inspectors button,.language-picker button,.library-language button){background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:0;box-shadow:none;transition:border-color var(--relay-hover-duration) ease,box-shadow var(--relay-hover-duration) ease}
body[data-theme=atlas] :is(.scenario-options button,.form-switch button,.branch-tabs button,.practice-set-tabs button,.conversation-replies button,.diagram-inspectors button,.language-picker button,.library-language button):is([aria-pressed=true],.active){background:var(--raised);color:var(--text);border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);font-weight:700}
body[data-theme=atlas] .section-controls #back{background:var(--raised);color:var(--text);border:1px solid var(--line);box-shadow:3px 3px var(--panel-offset)}
body[data-theme=atlas] :is(.primary,.library-open,.lesson-continue){background:var(--gold);color:var(--on-gold);border-color:var(--line);box-shadow:3px 3px var(--panel-offset)}
body[data-theme=atlas] :is(.focus-word,.lesson-highlight,.sentence mark,.compare-card mark,.selected-example mark,.formula-token.focus,.lesson-token.is-focus,.word-token.aux){background:var(--gold);color:var(--on-gold);border-color:var(--gold);box-shadow:none;text-shadow:none}
body[data-theme=atlas] :is(.focus-word,.lesson-highlight,.sentence mark) [data-locale]{color:inherit}
/* Register comparisons keep their red/green meaning in both states. */
body[data-theme=atlas] .register-card :is(.register-note,.register-action){color:var(--text)}
body[data-theme=atlas] :is(.grammar-table tbody tr.active,.selectable-comparison .lesson-table tbody tr.active,.compare-card.selected-form,.pattern-choices button[aria-pressed=true],.flow-leaf.active){background:var(--gold);color:var(--on-gold);border-color:var(--gold);box-shadow:3px 3px var(--panel-offset)}
body[data-theme=atlas] :is(.grammar-table tbody tr.active,.selectable-comparison .lesson-table tbody tr.active) :is(td,th,button,span,mark,b){color:var(--on-gold);border-color:var(--line)}
body[data-theme=atlas] :is(.compare-card.selected-form,.flow-leaf.active,.pattern-choices button[aria-pressed=true]) :is(small,b,p,.scenario){color:var(--on-gold)}
body[data-theme=atlas] :is(.branch-node,.diagram-node) .node-outline>*{fill:var(--panel);stroke:var(--line)}
body[data-theme=atlas] :is(.branch-node.active,.diagram-node[aria-pressed=true]) .node-outline>*{fill:var(--gold);stroke:var(--gold)}
body[data-theme=atlas] :is(.branch-node.active,.diagram-node[aria-pressed=true]),body[data-theme=atlas] :is(.branch-node.active,.diagram-node[aria-pressed=true]) :is(small,.node-caption){color:var(--on-gold)}
body[data-theme=atlas] .branch-result.active{box-shadow:3px 3px var(--panel-offset)}
body[data-theme=atlas] :is(.branch-node,.diagram-node):hover .node-outline>*{stroke:var(--gold);stroke-width:2}
body[data-theme=atlas] .atlas-node.active .stack-face{fill:var(--gold);stroke:var(--line)}
body[data-theme=atlas] .atlas-node.active :is(.stack-top,.stack-side){fill:var(--raised);stroke:var(--line)}
body[data-theme=atlas] .atlas-node .stack-shadow{fill:var(--panel-offset)}
body[data-theme=atlas] .relay-signals i{background:var(--accent)}
body[data-theme=atlas] .relay-signals i:nth-child(2){background:var(--gold)}
body[data-theme=atlas] .relay-signals i:nth-child(3){background:var(--pink)}
body[data-theme=atlas] :is(.reference-card,.overview-card,.demo-card,.compare-card,.library-card){transition:translate var(--relay-hover-duration) ease,box-shadow var(--relay-hover-duration) ease,border-color var(--relay-hover-duration) ease}
@media(hover:hover){
 body[data-theme=atlas] :is(.reference-card,.overview-card,.demo-card,.compare-card,.library-card):nth-child(n):hover{translate:0 -4px;border-color:var(--gold);box-shadow:4px 5px var(--panel-offset)}
 body[data-theme=atlas] :is(.scenario-options button,.form-switch button,.branch-tabs button,.practice-set-tabs button,.conversation-replies button,.conversation-history button,.diagram-inspectors button,.language-picker button,.library-language button,.section-controls button):not(:disabled):hover{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
}
/* Teal focus rings retain contrast independently of the yellow selection outline. */
body[data-theme=atlas] :is(.lesson-canvas,.header-controls) :is(button,a,summary):focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(max-width:600px){
 body[data-theme=atlas] .masthead{height:auto;min-height:62px;padding:8px 0;row-gap:4px}
 body[data-theme=atlas] .panel-label{margin:0 0 16px;padding:9px 10px}
}
@media(prefers-reduced-motion:reduce){
 body[data-theme=atlas] :is(.reference-card,.overview-card,.demo-card,.compare-card,.library-card):nth-child(n):hover{translate:none}
}
/* The header scrolls with the document. The frame grows in normal flow so its
   bottom edge, sidebar footer, status row and page footer move together. */
@media screen and (scripting: enabled) {
  .lesson-page body[data-theme] .page-shell { margin-block-end: 0; }
  /* Keep the offscreen live region from adding scroll space below the footer. */
  .lesson-page .page-shell > .sr-only[role=status] { inset-block-start: 0; margin: 0; }
  .lesson-page .lesson-view {
    display: flex;
    flex-direction: column;
    height: calc((100vh + var(--lesson-extra-height, 0px)) / var(--desktop-scale, 1));
    height: calc((100dvh + var(--lesson-extra-height, 0px)) / var(--desktop-scale, 1));
  }
  .lesson-page .lesson {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
  }
  .lesson-page .lesson-view > :not(.lesson),
  .lesson-page .console-bar { flex: none; }
  .lesson-page .lesson-workspace {
    flex: 1 1 0;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
  }
  .lesson-page .lesson-rail,
  .lesson-page .lesson-canvas { min-height: 0; }
  .lesson-page .lesson-rail > :not(.learning-navigation) { flex: none; }
  .lesson-page .learning-navigation { flex: 1 1 0; min-height: 0; }
  .lesson-page body[data-theme] .stage { height: 100%; min-height: 0; overflow: clip; }
  .lesson-scroll {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .lesson-page body[data-theme] #content { flex: 1 0 auto; min-height: 0; }
  .lesson-scroll .section-controls { flex: none; }
  .lesson-scroll [data-lesson-panel] { scroll-margin-block-start: 32px; }
  /* A section bookmark selects the panel on load. Leave its page header in view. */
  .lesson-scroll [data-lesson-panel]:target { scroll-margin-block-start: 100dvh; }
  .lesson-page :is(.learning-navigation, .lesson-scroll) {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .lesson-page .learning-navigation { overscroll-behavior: contain; }
  .lesson-page .lesson-scroll { scrollbar-gutter: stable; }
  .lesson-page .lesson-scroll[data-page-first] { overflow-y: hidden; }
  .lesson-page :is(.learning-navigation, .lesson-scroll):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
}

@media screen and (scripting: enabled) and (min-width: 901px) and (min-height: 601px) {
  .lesson-page .lesson-view { --lesson-extra-height: 400px; }
}

@media screen and (scripting: enabled) and (max-width: 900px) {
  .lesson-page .lesson-workspace {
    display: grid;
    grid-template: auto minmax(0, 1fr) / minmax(0, 1fr);
  }
  .lesson-page .mobile-nav-bar { grid-area: 1 / 1; }
  .lesson-page :is(.lesson-rail, .lesson-canvas) { grid-area: 2 / 1; }
  .lesson-page body[data-nav-open=true] .lesson-rail {
    display: flex;
    flex-direction: column;
  }
  .lesson-page body[data-nav-open=true] .lesson-canvas { visibility: hidden; }
}

/* Leave room to read and navigate on short screens, including phone landscape. */
@media screen and (scripting: enabled) and (max-height: 600px) {
  .lesson-page body[data-theme] .console-bar { min-height: 0; padding-block: 4px; }
  .lesson-page #navToggle { min-height: 44px; padding-block: 4px; }
  .lesson-page body[data-theme] .motion-bar,
  .lesson-page .rail-heading,
  .lesson-page .rail-foot { padding-block: 4px; }
  .lesson-page .page-footer { flex-flow: row wrap; padding-block: 4px; }
}
@font-face {
  font-family:'Chakra Petch'; src:url('/vendor/fonts/chakra-petch-semibold.woff') format('woff');
  font-weight:600; font-style:normal; font-display:swap;
}
.hydra-meter {display:none}

/* Charcoal instruments over a low-contrast square grid. */
body[data-theme=hydra] {background:var(--bg); color:var(--text)}
body[data-theme=hydra] :is(.stage,.course-main,.library-shell) {
  background-color:var(--bg); background-image:var(--canvas-pattern); background-size:var(--canvas-pitch) var(--canvas-pitch);
}
body[data-theme=hydra] .stage::before,
body[data-theme=hydra] .frame-corner {display:none}
body[data-theme=hydra] :is(.masthead,.library-header) {
  background:var(--panel); border-top:2px solid var(--accent); border-bottom:1px solid var(--line); padding-inline:clamp(10px,1.5vw,22px);
}
body[data-theme=hydra] :is(.brand b,.library-brand b) {
  color:var(--accent); font:600 25px/1 var(--display); letter-spacing:.09em;
}
body[data-theme=hydra] :is(.brand b,.library-brand b)::after {content:'_'}
body[data-theme=hydra] .brand>span {background:var(--line)}
body[data-theme=hydra] :is(.brand,.brand-description,.page-footer) {color:var(--muted)}
body[data-theme=hydra] .lesson {
  border:1px solid var(--line); border-radius:0 16px 0 16px; background:var(--panel); box-shadow:none;
}
body[data-theme=hydra] :is(.lesson-rail,.course-sidebar,.console-bar,.rail-heading,.mobile-nav-bar,.rail-foot,.motion-bar) {
  background:var(--panel); border-color:var(--line); color:var(--muted); box-shadow:none;
}
body[data-theme=hydra] .lesson-rail {border-right:1px solid var(--line)}
body[data-theme=hydra] :is(.rail-heading strong,.console-title,.rule-title,.lesson-heading,.reference-top h3,.reference-top h4) {color:var(--text)}
body[data-theme=hydra] :is(#systemLabel,.lesson-heading .eyebrow,.reference-index) {color:var(--accent)}
body[data-theme=hydra] .lesson-heading .eyebrow {background:transparent; border:0; padding-left:0}
body[data-theme=hydra] :is(.rule-title,.course-intro h1,.library-intro h1) {
  font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.025em; text-shadow:none;
}
body[data-theme=hydra] :is(.rule-meaning,.reference-meaning,.reference-description,.overview-instruction,.overview-meaning,.demo-head-note,.motion-bar span) {color:var(--muted)}
body[data-theme=hydra] :is(.reference-top h3,.reference-top h4,.demo-card h3,.overview-card h3) {font-weight:600}
body[data-theme=hydra] :is(.reference-index,.heading-code,.rail-section-label,.card-meta,.console-bar,.panel-foot,.panel-label) {font-family:ui-monospace,monospace}
body[data-theme=hydra] .reference-index {border-color:var(--line); background:var(--raised); box-shadow:none}
body[data-theme=hydra] :is(.library-language,.language-picker) button {
  color:var(--muted); border:1px solid var(--line); background:var(--panel); box-shadow:none;
}
body[data-theme=hydra] :is(.library-language,.language-picker) button[aria-pressed=true] {
  background:var(--accent); border-color:var(--accent); color:var(--on-gold);
}
body[data-theme=hydra] :is(.topics,.topic-submenu,.practice-submenu,.rail-steps,.rail-topics,.section-controls,.page-footer) {
  border-color:var(--line); background:transparent;
}
body[data-theme=hydra] #navToggle {color:var(--text)}
body[data-theme=hydra] #navToggle > :is(span,b) {color:var(--accent)}
body[data-theme=hydra] .learning-level-label {color:var(--muted)}
body[data-theme=hydra] .learning-lesson-link {border-color:var(--line)}
body[data-theme=hydra] .learning-lesson-link.is-current {
  color:var(--on-gold); box-shadow:none; border-color:transparent;
  background:linear-gradient(45deg,var(--accent),var(--accent)) 0 0 / calc(100% - 10px) 100% no-repeat,
    linear-gradient(45deg,var(--accent) calc(100% - 7px),transparent 0) right / 11px 100% no-repeat;
}
body[data-theme=hydra] .lesson-rail .topics :is(a,button) {border-color:var(--line); color:var(--text); box-shadow:none}
body[data-theme=hydra] .lesson-rail .topics :is(a,button)>span {color:inherit}
body[data-theme=hydra] .learning-lesson-panel .topics :is(a,button).active:not(.flow-nav):not(.practice-nav),
body[data-theme=hydra] .lesson-rail .topics :is(a,button).active {
  color:var(--text); background:var(--hydra-tint); box-shadow:inset 2px 0 var(--accent); border-color:var(--line);
}
body[data-theme=hydra] .lesson-rail .steps :is(a,button).active {color:var(--text); border:1px solid var(--line); background:var(--hydra-tint)}
body[data-theme=hydra] .lesson-rail .steps :is(a,button).active::after {color:var(--accent)}
body[data-theme=hydra] .is-locked {opacity:.8}
body[data-theme=hydra] .best-lock-icon {
  --best-lock-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aebda8' stroke-width='1.6'%3E%3Cpath d='M7.5 10V6.5L10 4h4l2.5 2.5V10M5 10h14v8l-3 3H5Z'/%3E%3Cpath stroke='%23ff6e58' d='M12 13v4'/%3E%3C/svg%3E");
}
body[data-theme=hydra] .unlock-neon {stroke:var(--muted)}
body[data-theme=hydra] .unlock-key {fill:var(--accent)}
body[data-theme=hydra] .unlock-key-stem {stroke:var(--accent)}

/* Teaching and practice use the same panel edges. The short coral tab stays
   outside the text area, even on the narrowest cards. */
body[data-theme=hydra] :is(.visual-panel,.reference-card,.demo-card,.overview-card,.compare-card,.library-card,.conversation-panel,.practice-set-card,.practice-exercise,.question-card,.map-inspector,.pattern-detail,.branch-builder,.sentence-board,.question-zone,.flow-detail,.lesson-examples article) {
  position:relative; background:var(--panel); color:var(--text); border:1px solid var(--line);
  border-radius:0 18px 0 14px; box-shadow:none;
}
body[data-theme=hydra] :is(.visual-panel,.reference-card,.demo-card,.overview-card,.library-card,.conversation-panel,.practice-set-card,.practice-exercise)::before {
  content:''; position:absolute; inset:-1px auto auto 16px; width:29px; height:3px; background:var(--accent); pointer-events:none;
}
body[data-theme=hydra] .visual-panel::after {display:none}
body[data-theme=hydra] :is(.reference-card,.overview-card,.compare-card):nth-child(n) {border-color:var(--line)}
body[data-theme=hydra] :is(.overview-example,.selected-example,.decision-event,.flow-context,.flow-leaf,.correction-pair>div,.formula-token,.question-part,.word-token,.connector-map>div,.before-sentence,.table-shell,.panel-label,.time-path) {
  color:var(--text); background:var(--raised); border-color:var(--line); box-shadow:none;
}
body[data-theme=hydra] :is(.overview-note,.lesson-rule,.demo-note,.teaching-tip,.compare-summary,.course-objectives,.mistake-tip,.practice-unlock) {
  background:var(--panel); color:var(--text); border:1px solid var(--line); border-inline-start:3px solid var(--accent); box-shadow:none;
}
body[data-theme=hydra] :is(.grammar-table,.simple-table,.lesson-table,.grammar-table td,.simple-table td,.lesson-table td) {color:var(--text); border-color:var(--line)}
body[data-theme=hydra] :is(.grammar-table th,.simple-table th,.lesson-table thead,.panel-label) {color:var(--muted); background:var(--raised); border-color:var(--line)}
body[data-theme=hydra] :is(.grammar-table tbody,.lesson-table tbody) {background:var(--panel)}
body[data-theme=hydra] :is(.grammar-table,.selectable-comparison .lesson-table) tbody tr.active {
  background:var(--hydra-tint); box-shadow:inset 3px 0 var(--accent);
}
body[data-theme=hydra] :is(.grammar-table,.selectable-comparison .lesson-table) tbody tr.active :is(td,th,button) {color:var(--text)}
body[data-theme=hydra] :is(.branch-node,.diagram-node) .node-outline>* {fill:var(--panel); stroke:var(--line)}
body[data-theme=hydra] :is(.branch-node.active,.diagram-node[aria-pressed=true]) .node-outline>* {fill:var(--hydra-tint); stroke:var(--accent)}
body[data-theme=hydra] :is(.branch-node.active,.diagram-node[aria-pressed=true],.flow-context strong) {color:var(--text)}
body[data-theme=hydra] :is(.branch-wire.selected,.diagram-pulse,.branch-pulse,.flow-pulse) {stroke:var(--accent)}
body[data-theme=hydra] :is(.form-switch button,.scenario-options button,.branch-tabs button,.practice-secondary,.conversation-replies button,.conversation-history button,.section-controls button,.flow-form) {
  color:var(--text); background:var(--raised); border:1px solid var(--line); border-radius:1px 7px 1px 7px; box-shadow:none;
}
body[data-theme=hydra] :is(.form-switch button[aria-pressed=true],.scenario-options button.active,.scenario-options button[aria-pressed=true],.branch-tabs button[aria-selected=true],.pattern-choices button[aria-pressed=true],.practice-set-tabs button[aria-pressed=true],.flow-form.active,.flow-leaf.active,.section-controls .primary,.practice-primary,.library-open,.lesson-continue) {
  color:var(--on-gold); background:var(--accent); border-color:var(--accent); border-radius:1px 7px 1px 7px; box-shadow:none;
}
body[data-theme=hydra] .pattern-console {background:var(--raised); color:var(--muted); border-bottom:1px solid var(--line)}
body[data-theme=hydra] :is(.library-filter input,.library-filter select,#practiceAnswer,.practice-dialog,.practice-recap) {
  background:var(--panel); color:var(--text); border-color:var(--line);
}
body[data-theme=hydra] .practice-exercise.is-correct {--outcome-ink:var(--register-natural); --outcome-panel:var(--register-natural-surface)}
body[data-theme=hydra] .practice-exercise.is-incorrect {--outcome-ink:var(--register-textbook); --outcome-panel:var(--register-textbook-surface)}
body[data-theme=hydra] .practice-exercise.is-supported {--outcome-ink:var(--text); --outcome-panel:var(--raised)}
body[data-theme=hydra] .practice-exercise:is(.is-correct,.is-incorrect,.is-supported) {
  background:var(--outcome-panel); border-color:var(--outcome-ink); box-shadow:inset 3px 0 var(--outcome-ink);
}
body[data-theme=hydra] .practice-exercise:is(.is-correct,.is-incorrect,.is-supported) #practiceAnswer {background:var(--bg); border-color:var(--outcome-ink)}
body[data-theme=hydra] .practice-exercise:is(.is-correct,.is-incorrect,.is-supported)::before {background:var(--outcome-ink)}
body[data-theme=hydra] :is(.focus-word,.lesson-highlight,.sentence mark,.compare-card mark,.selected-example mark,.formula-token.focus,.lesson-token.is-focus,.word-token.aux) {
  background:var(--gold); color:var(--on-gold); border-color:var(--gold);
}
body[data-theme=hydra] :is(a,button,summary,input,textarea,select):focus-visible {outline:2px solid var(--text); outline-offset:3px}
body[data-theme=hydra] .register-card {border-radius:0 14px 0 12px; box-shadow:none}
body[data-theme=hydra] :is(.reference-card,.demo-card,.overview-card,.library-card,.practice-set-card,.conversation-panel):focus-within {border-color:var(--accent)}
@media (hover:hover) {
  body[data-theme=hydra] :is(.reference-card,.demo-card,.overview-card,.library-card,.practice-set-card,.conversation-panel):hover {
    border-color:var(--accent); box-shadow:0 3px 0 var(--panel-offset);
  }
  body[data-theme=hydra] :is(.reference-card,.demo-card,.overview-card,.library-card,.practice-set-card,.conversation-panel):hover::before {transform:scaleX(1.5)}
  body[data-theme=hydra] :is(.section-controls,.form-switch,.scenario-options,.conversation-replies,.practice-actions) button:not(:disabled):hover {outline:1px solid var(--text); outline-offset:2px}
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  body[data-theme=hydra] :is(.reference-card,.demo-card,.overview-card,.library-card,.practice-set-card,.conversation-panel) {
    transition:border-color var(--relay-hover-duration),box-shadow var(--relay-hover-duration);
  }
  body[data-theme=hydra] :is(.reference-card,.demo-card,.overview-card,.library-card,.practice-set-card,.conversation-panel)::before {
    transform-origin:left; transition:transform var(--relay-hover-duration) ease-out;
  }
}

/* Small peripheral instruments, independent from lesson values and progress. */
body[data-theme=hydra] .hydra-meter {
  display:inline-flex; align-items:center; gap:10px; height:20px; flex:none; margin-inline-start:auto; pointer-events:none;
}
.hydra-scale {
  position:relative; width:64px; height:10px; color:var(--line);
  border-block-end:1px solid currentColor; background:repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 8px) left bottom / 100% 4px no-repeat;
}
.hydra-scale i {
  display:block; position:absolute; left:0; bottom:0; width:5px; height:10px;
  background:var(--accent); transform:translateX(23px);
}
.hydra-bars {height:18px; display:flex; align-items:flex-end; gap:2px}
.hydra-bars i {
  --height:68%; --phase:-.4; display:block; width:4px; height:var(--height); transform-origin:bottom;
  background:repeating-linear-gradient(to top,var(--accent) 0 3px,transparent 3px 4px);
}
.hydra-bars i:nth-child(2n) {--height:95%; --phase:-.7}
.hydra-bars i:nth-child(3n) {--height:80%; --phase:-.2}
.hydra-bars i:nth-child(4n) {--height:52%; --phase:-.9}
.hydra-bars i:last-child {--height:40%; background:var(--text)}
body[data-theme=hydra] .relay-signals {gap:3px}
body[data-theme=hydra] .relay-signals i {background:var(--text); animation:none; opacity:.7}
body[data-theme=hydra] .relay-signals i:nth-child(2) {background:var(--accent)}
body[data-theme=hydra] .hydra-sweep {
  display:block; position:absolute; inset:0 0 auto; height:3px; background:var(--accent); transform-origin:left;
}
@media (prefers-reduced-motion:no-preference) {
  [data-theme=hydra] .hydra-scale i {
    animation:hydra-slider var(--hydra-slider-duration) ease-in-out infinite alternate;
    animation-play-state:var(--relay-play-state,paused);
  }
  [data-theme=hydra] .hydra-bars i {
    animation:hydra-level var(--hydra-bars-duration) ease-in-out infinite alternate;
    animation-delay:calc(var(--phase) * var(--hydra-bars-duration)); animation-play-state:var(--relay-play-state,paused);
  }
}
@keyframes hydra-slider {0%,12%{transform:translateX(4px)} 65%{transform:translateX(42px)} 100%{transform:translateX(56px)}}
@keyframes hydra-level {from{transform:scaleY(.35)} 45%{transform:scaleY(1)} to{transform:scaleY(.62)}}
@media (max-width:600px) {
  body[data-theme=hydra] .hydra-scale {display:none}
  body[data-theme=hydra] .library-header .hydra-meter {display:none}
  body[data-theme=hydra] .relay-chrome {gap:7px}
  body[data-theme=hydra] .relay-signals {display:none}
}
/* Moon Garden: quiet surfaces and explicit example treatments. Scene artwork
   and pixel art animation are never installed by selecting this theme. */
body[data-theme=moon-garden]{background:var(--bg);color:var(--text);font-family:var(--font)}
body[data-theme=moon-garden] :is(.stage,.course-main,.library-shell){background:var(--bg);color:var(--text)}
body[data-theme=moon-garden] :is(.stage::before,.frame-corner,.visual-panel::after,.visual-panel::before,.lesson-panel.is-entering::before){display:none}
body[data-theme=moon-garden] :is(.masthead,.library-header){background:var(--moon-header);color:var(--moon-header-text);border-color:var(--line);padding-inline:clamp(10px,1.5vw,22px);border-radius:5px 5px 0 0}
body[data-theme=moon-garden] :is(.brand b,.library-brand b){font-family:var(--display);color:var(--moon-header-text);letter-spacing:-.035em;text-shadow:none;box-shadow:none}
body[data-theme=moon-garden] :is(.brand-description,.brand>span,.library-brand span){color:var(--moon-header-text)}
body[data-theme=moon-garden] .lesson{background:var(--panel);border:1px solid var(--line);border-radius:20px 8px 20px 8px;box-shadow:3px 3px var(--panel-offset)}
body[data-theme=moon-garden] :is(.console-bar,.mobile-nav-bar){background:var(--moon-header);color:var(--muted);border-color:var(--line);box-shadow:none}
body[data-theme=moon-garden] :is(.console-title,#systemLabel){color:var(--muted)}
body[data-theme=moon-garden] :is(.lesson-rail,.course-sidebar,.rail-heading,.rail-foot,.rail-controls,.rail-steps,.rail-topics,.topic-submenu){background:var(--moon-header);color:var(--text);border-color:var(--line);box-shadow:none}
body[data-theme=moon-garden] .lesson-rail{border-right:1px solid var(--line)}
body[data-theme=moon-garden] :is(.rail-heading strong,.rail-section-label,.learning-level-label,.heading-code,.panel-foot,.page-footer,.page-footer a,.motion-bar,.motion-bar span){color:var(--muted)}
body[data-theme=moon-garden] :is(.rule-title,.course-intro h1,.library-intro h1){font-family:var(--display);font-weight:400;font-style:italic;letter-spacing:-.035em;color:var(--text);text-transform:none;text-shadow:none;transform:none}
body[data-theme=moon-garden] :is(.reference-heading,.reference-top h3,.reference-top h4,.overview-card h3,.demo-card h3,.library-card h2,.lesson-panel h2){font-family:var(--display);font-weight:400;font-style:normal;letter-spacing:-.02em;color:var(--text);transform:none}
body[data-theme=moon-garden] .lesson-heading{background:transparent;border:0;box-shadow:none}
body[data-theme=moon-garden] .heading-code{writing-mode:horizontal-tb;border:0;padding:0;white-space:normal;max-width:13ch;line-height:1.5}
body[data-theme=moon-garden] .lesson-heading .eyebrow{color:var(--accent);background:none;border:0;padding-left:0}
body[data-theme=moon-garden] :is(.rule-meaning,.reference-meaning,.reference-description,.overview-instruction,.overview-meaning,.demo-head-note,.lesson-copy,.scenario-meaning,.practice-feedback,.register-note,.conversation-note,.conversation-context,.conversation-translation){font-family:var(--font);font-style:normal;transform:none;color:var(--muted)}
body[data-theme=moon-garden] :is(.rule-meaning,.reference-meaning,.reference-description,.lesson-copy){max-width:70ch}
body[data-theme=moon-garden] :is(.visual-panel,.reference-card,.demo-card,.overview-card,.compare-card,.library-card,.conversation-panel,.practice-set-card,.practice-exercise,.question-card,.map-inspector,.pattern-detail,.branch-builder,.sentence-board,.question-zone,.flow-detail,.lesson-examples article){position:relative;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:32px 12px 28px 12px;box-shadow:2px 3px var(--panel-offset)}
body[data-theme=moon-garden] :is(.reference-card,.overview-card,.compare-card):nth-child(n){border-color:var(--line)}
body[data-theme=moon-garden] :is(.overview-example,.selected-example,.decision-event,.flow-context,.flow-leaf,.correction-pair>div,.formula-token,.question-part,.word-token,.connector-map>div,.before-sentence,.table-shell,.panel-label,.time-path){background:var(--raised);color:var(--text);border-color:var(--line);border-radius:6px 12px 5px 10px;box-shadow:none}
body[data-theme=moon-garden] :is(.overview-note,.lesson-rule,.demo-note,.teaching-tip,.compare-summary,.course-objectives,.mistake-tip,.practice-unlock){background:var(--panel);color:var(--text);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px 16px 8px 12px;box-shadow:none;font-family:var(--font);font-style:normal;transform:none}
body[data-theme=moon-garden] .panel-label{background:var(--raised);color:var(--muted);border-bottom:1px solid var(--line);border-radius:6px 12px 0 0}
body[data-theme=moon-garden] :is(.panel-label,.reference-index,.heading-code,.rail-section-label,.card-meta,.console-bar,.panel-foot){font-family:ui-monospace,monospace;font-style:normal;transform:none}
body[data-theme=moon-garden] .reference-index{background:var(--raised);border-color:var(--line);box-shadow:none;color:var(--accent);border-radius:50% 45% 48% 43%}

/* Fixed sibling variants: mixed-card prose stays level while backplates lean. */
body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card):nth-child(6n+1){--moon-card-tilt:-.9deg}
body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card):nth-child(6n+2){--moon-card-tilt:.65deg}
body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card):nth-child(6n+3){--moon-card-tilt:-.4deg}
body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card):nth-child(6n+4){--moon-card-tilt:.85deg}
body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card):nth-child(6n+5){--moon-card-tilt:-.65deg}
body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card):nth-child(6n+6){--moon-card-tilt:.35deg}
body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card){isolation:isolate;background:transparent;border:0;box-shadow:none}
body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card)::before{content:'';position:absolute;inset:0;z-index:-1;border:1px solid var(--line);border-radius:4px 14px 6px 12px;background:var(--panel);box-shadow:2px 3px var(--panel-offset);transform:rotate(var(--moon-card-tilt,-.75deg));pointer-events:none}
body[data-theme=moon-garden] :is(.sentence,.register-phrase,.conversation-sentence,.lesson-examples article>p:last-child){font-family:var(--display);font-style:italic;font-weight:400;letter-spacing:-.02em}
body[data-theme=moon-garden] :is(.reference-example,.examples-grid .sentence,.selected-example .sentence,.sentence-board .sentence){transform:rotate(var(--moon-card-tilt,-.75deg));transform-origin:center}
body[data-theme=moon-garden] :is(.grammar-table,.simple-table,.lesson-table,.formula,.lesson-formula,.question-assembly,.diagram-node,.branch-node,.node-caption,input,select,textarea,button){font-style:normal}
body[data-theme=moon-garden] :is(.grammar-table,.simple-table,.lesson-table,.grammar-table td,.simple-table td,.lesson-table td){color:var(--text);border-color:var(--line);transform:none}
body[data-theme=moon-garden] :is(.grammar-table th,.simple-table th,.lesson-table thead){background:var(--raised);color:var(--muted);border-color:var(--line)}
body[data-theme=moon-garden] :is(.grammar-table tbody tr,.lesson-table tbody){background:var(--panel)}
body[data-theme=moon-garden] :is(.grammar-table,.selectable-comparison .lesson-table) tbody tr.active{background:var(--accent);color:var(--on-gold);box-shadow:none}
body[data-theme=moon-garden] :is(.grammar-table,.selectable-comparison .lesson-table) tbody tr.active :is(td,th,button,span,mark,b){color:var(--on-gold);border-color:var(--on-gold)}
body[data-theme=moon-garden] :is(.branch-node,.diagram-node) .node-outline>*{fill:var(--panel);stroke:var(--moon-edge)}
body[data-theme=moon-garden] :is(.branch-node.active,.diagram-node[aria-pressed=true]) .node-outline>*{fill:var(--accent);stroke:var(--accent)}
body[data-theme=moon-garden] :is(.branch-node.active,.diagram-node[aria-pressed=true]),body[data-theme=moon-garden] :is(.branch-node.active,.diagram-node[aria-pressed=true]) :is(small,.node-caption){color:var(--on-gold)}
body[data-theme=moon-garden] :is(.branch-wire.selected,.diagram-pulse,.branch-pulse,.flow-pulse){stroke:var(--accent)}
body[data-theme=moon-garden] :is(.form-switch button,.scenario-options button,.branch-tabs button,.pattern-choices button,.practice-set-tabs button,.practice-secondary,.conversation-replies button,.conversation-history button,.section-controls button,.flow-form,.language-picker button,.library-language button){background:var(--moon-button);color:var(--text);border:1px solid var(--moon-edge);border-radius:17px 13px 18px 12px;box-shadow:none;font-family:var(--font);transform:none}
body[data-theme=moon-garden] :is(.form-switch button[aria-pressed=true],.form-switch button.active,.scenario-options button.active,.scenario-options button[aria-pressed=true],.branch-tabs button[aria-selected=true],.branch-tabs button[aria-pressed=true],.pattern-choices button[aria-pressed=true],.practice-set-tabs button[aria-pressed=true],.flow-form.active,.flow-leaf.active,.section-controls .primary,.practice-primary,.library-open,.lesson-continue,.language-picker button[aria-pressed=true],.library-language button[aria-pressed=true]){background:var(--accent);color:var(--on-gold);border-color:var(--accent);border-radius:17px 13px 18px 12px;box-shadow:none}
body[data-theme=moon-garden] .learning-lesson-link{border-color:var(--line)}
body[data-theme=moon-garden] .learning-lesson-link.is-current{background:var(--accent);color:var(--on-gold);box-shadow:none;border-radius:8px 3px 8px 3px;border-color:var(--accent)}
body[data-theme=moon-garden] .lesson-rail :is(.topics,.steps) :is(a,button){color:var(--text);border-color:var(--line);background:transparent;box-shadow:none}
body[data-theme=moon-garden] .lesson-rail :is(.topics,.steps) :is(a,button)>span{color:inherit}
body[data-theme=moon-garden] .learning-lesson-panel .topics :is(a,button).active:not(.flow-nav):not(.practice-nav),body[data-theme=moon-garden] .lesson-rail :is(.topics,.steps) :is(a,button).active{background:var(--raised);color:var(--text);border-color:var(--accent);box-shadow:inset 2px 0 var(--accent)}
body[data-theme=moon-garden] .lesson-rail .steps :is(a,button).active::after{color:var(--accent)}
body[data-theme=moon-garden] .pattern-console{background:var(--raised);color:var(--muted);border-color:var(--line);border-radius:8px 8px 0 0}
body[data-theme=moon-garden] :is(.library-filter input,.library-filter select,#practiceAnswer,.practice-dialog,.practice-recap){background:var(--panel);color:var(--text);border-color:var(--moon-edge);font-family:var(--font);border-radius:8px}
body[data-theme=moon-garden] .practice-exercise.is-correct{--outcome-ink:var(--register-natural);--outcome-panel:var(--register-natural-surface)}
body[data-theme=moon-garden] .practice-exercise.is-incorrect{--outcome-ink:var(--register-textbook);--outcome-panel:var(--register-textbook-surface)}
body[data-theme=moon-garden] .practice-exercise.is-supported{--outcome-ink:var(--text);--outcome-panel:var(--raised)}
body[data-theme=moon-garden] .practice-exercise:is(.is-correct,.is-incorrect,.is-supported){background:var(--outcome-panel);border-color:var(--outcome-ink);box-shadow:inset 3px 0 var(--outcome-ink)}
body[data-theme=moon-garden] .practice-exercise:is(.is-correct,.is-incorrect,.is-supported) #practiceAnswer{background:var(--bg);border-color:var(--outcome-ink)}
body[data-theme=moon-garden] .register-card{border-radius:14px 6px 12px 6px;box-shadow:2px 3px var(--panel-offset)}
body[data-theme=moon-garden] :is(.register-tag,.register-note,.register-action){font-style:normal;transform:none}
body[data-theme=moon-garden] :is(.focus-word,.lesson-highlight,.sentence mark,.compare-card mark,.selected-example mark,.formula-token.focus,.lesson-token.is-focus,.word-token.aux){background:var(--gold);color:var(--on-gold);border-color:var(--gold);font-style:inherit;animation:none}
body[data-theme=moon-garden] .relay-signals i{animation:none}
body[data-theme=moon-garden] .lesson-panel.is-entering{animation:none}
body[data-theme=moon-garden] :is(a,button,summary,input,textarea,select):focus-visible{outline:2px solid var(--text);outline-offset:3px}
@media(hover:hover){
 body[data-theme=moon-garden] :is(.form-switch,.scenario-options,.section-controls,.conversation-replies,.practice-actions) button:not(:disabled):hover{outline:1px solid var(--text);outline-offset:2px}
 body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card):hover::before{border-color:var(--accent)}
}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card)::before{transition:transform var(--relay-hover-duration) ease,border-color var(--relay-hover-duration) ease}
 body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card):hover::before{transform:translateY(-2px) rotate(var(--moon-card-tilt,-.75deg))}
}
@media(max-width:480px){
 body[data-theme=moon-garden] :is(.reference-example,.examples-grid .sentence,.selected-example .sentence,.sentence-board .sentence){transform:none}
 body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card)::before,body[data-theme=moon-garden] :is(.reference-card,.examples-grid .demo-card):hover::before{transform:none}
 body[data-theme=moon-garden] :is(.visual-panel,.reference-card,.demo-card,.overview-card,.compare-card,.library-card,.conversation-panel){border-radius:20px 8px 18px 8px}
}

/* A static, rounded lock inherits its surface's readable foreground. */
body[data-theme=moon-garden] .best-lock-icon:not(.is-opening){background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Crect x='5' y='10' width='14' height='11' rx='2'/%3E%3Cpath d='M12 14v4'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-theme=moon-garden] .unlock-neon{stroke:var(--text)}
body[data-theme=moon-garden] .unlock-key{fill:var(--accent)}
body[data-theme=moon-garden] .unlock-key-stem{stroke:var(--accent)}
body[data-theme=moon-garden] .section-controls #back{background:var(--moon-button);border-color:var(--moon-edge);border-radius:17px 13px 18px 12px}
body[data-theme=moon-garden] .section-controls #next{background:var(--accent);color:var(--on-gold);border-radius:17px 13px 18px 12px;box-shadow:2px 3px var(--panel-offset)}
/* The editor uses its own stable high-contrast surface while the page previews. */
body[data-theme] .palette-toggle{font:600 11px/1.2 var(--font);min-height:29px;padding:5px 9px;border:1px solid currentColor;color:var(--text);background:transparent;border-radius:4px;white-space:nowrap;cursor:pointer}
body[data-theme] .palette-panel{position:fixed;inset:78px 18px auto auto;z-index:10000;width:min(460px,calc(100vw - 28px));max-width:none;max-height:calc(100dvh - 100px);margin:0;padding:22px;overflow:auto;background:#f7f4f0;color:#292330;border:1px solid #5d5366;border-radius:16px 6px 14px 6px;box-shadow:0 10px 40px #0005;font:400 14px/1.5 'DM Sans',Arial,sans-serif;--text:#292330;--muted:#5d5366;--line:#9281a3;--panel:#f7f4f0;--raised:#e9e3ed;--gold:#ffbd59;--accent:#51445e;--on-gold:#211625;color-scheme:light}
.palette-panel:not([open]){display:none}
.palette-panel-heading{display:flex;justify-content:space-between;align-items:start;gap:16px;margin-bottom:12px}
.palette-panel .palette-panel-heading h2{font:600 20px/1.3 'DM Sans',Arial,sans-serif;margin:0;letter-spacing:0;color:#292330}
.palette-panel .palette-panel-heading p{margin:3px 0 0;font-size:12px;color:#5d5366}
.palette-panel .palette-description{font-size:13px;color:#5d5366;margin:0 0 18px}
.palette-panel button{font:600 13px/1.3 'DM Sans',Arial,sans-serif;color:#292330;background:#e9e3ed;border:1px solid #8c8095;border-radius:4px;padding:9px 12px;box-shadow:none;cursor:pointer}
.palette-panel [data-palette-close]{font-size:22px;padding:2px 10px;min-height:32px}
.palette-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.palette-field{min-width:0}
.palette-field label{display:block;font-size:12px;font-weight:500;margin-bottom:5px}
.palette-field>div{display:flex;gap:7px;align-items:center}
.palette-field input{box-sizing:border-box;min-width:0;max-width:100%;height:34px;background:#fff;color:#292330;border:1px solid #8c8095;border-radius:3px}
.palette-field input[type=color]{width:36px;padding:2px;flex:none;cursor:pointer}
.palette-field input[type=text]{font:13px/1.3 ui-monospace,monospace;width:100%;padding:5px 7px}
.palette-field input[aria-invalid=true]{border:2px solid #a2253b}
.palette-panel .palette-notice{font-size:12px;min-height:36px;margin:16px 0 8px;color:#5d5366}
.palette-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px}
.palette-actions [data-palette-reset]{margin-right:auto;background:transparent}
.palette-actions [data-palette-apply]{background:#332f46;color:#f7e9da;border-color:#332f46}
.palette-actions button:disabled{opacity:.5;cursor:default}
body[data-theme] .palette-panel :is(button,input):focus-visible{outline:2px solid #332f46!important;outline-offset:3px!important;box-shadow:none!important}
.palette-save-status{font:12px/1.4 var(--font);max-width:200px;color:var(--text)}
@media(max-width:600px){body[data-theme] .palette-panel{inset:12px 14px auto;max-height:calc(100dvh - 24px);padding:18px}.palette-actions [data-palette-reset]{flex-basis:100%;text-align:left}}
@media(any-pointer:coarse){body[data-theme] .palette-toggle,.palette-panel button,.palette-field input{min-height:44px}.palette-field input[type=color]{width:44px}.palette-field input[type=text]{font-size:16px}}
@media(max-width:380px){.palette-fields{grid-template-columns:minmax(0,1fr)}}
/* Geometry and asset URLs are appended by build-sidebar-sprites.mjs. Only the
   selected theme's background image is downloaded. Frame zero works without JS. */
body[data-theme] .rail-foot > .sidebar-sprite {
  display: block;
  grid-area: 2 / 1;
  flex: none;
  width: 128px;
  max-width: 100%;
  margin: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: 0 0;
  /* Preserve the approved art's contrast when the sidebar palette is edited. */
  background-color: var(--palette-default-sidebar);
  background-size: calc(100% * var(--sidebar-sprite-columns)) calc(100% * var(--sidebar-sprite-rows));
  border-radius: 4px;
}
/* Vector Atlas shows the wireframe directly on the sidebar surface. */
body[data-theme=atlas] .rail-foot > .sidebar-sprite { background-color: transparent; }
@media (prefers-reduced-motion: no-preference) {
  .sidebar-sprite {
    animation:
      sidebar-sprite-columns calc(var(--sidebar-sprite-duration) / var(--sidebar-sprite-rows)) steps(var(--sidebar-sprite-columns), end) infinite,
      sidebar-sprite-rows var(--sidebar-sprite-duration) steps(var(--sidebar-sprite-rows), end) infinite;
    animation-play-state: var(--relay-play-state, paused);
  }
}
/* Positions are relative to the sheet minus the viewport. Advancing one extra
   cell at 100% keeps all columns/rows on screen for exactly one frame duration. */
@keyframes sidebar-sprite-columns {
  to { background-position-x: calc(100% * var(--sidebar-sprite-columns) / (var(--sidebar-sprite-columns) - 1)); }
}
@keyframes sidebar-sprite-rows {
  to { background-position-y: calc(100% * var(--sidebar-sprite-rows) / (var(--sidebar-sprite-rows) - 1)); }
}
@media (max-height: 600px) {
  body[data-theme] .rail-foot > .sidebar-sprite { width: 96px; }
}

.sidebar-sprite{--sidebar-sprite-columns:12;--sidebar-sprite-rows:8;aspect-ratio:256 / 176}
body[data-theme="cyberpunk"] .sidebar-sprite{background-image:url('/assets/sidebar/neon-district.ae6358502fb2.webp')}
body[data-theme="atlas"] .sidebar-sprite{background-image:url('/assets/sidebar/vector-atlas.364707ac14cc.webp')}
body[data-theme="hydra"] .sidebar-sprite{background-image:url('/assets/sidebar/hydra.a28b61b0461d.webp')}
body[data-theme="moon-garden"] .sidebar-sprite{background-image:url('/assets/sidebar/moon-garden.bf8bd18e92b6.webp');image-rendering:pixelated}
/* Authored frequency instruments share the workspace palette and typography. */
.frequency-adverb-content{display:flex;flex-direction:column;min-width:0}
.frequency-adverb-content>.frequency-options{order:2}
.frequency-adverb-content>.frequency-archive{order:1}
.frequency-adverb-content>.frequency-archive-controls{order:3;margin:0 0 24px}
.frequency-adverb-content>.frequency-reading{order:4}
.frequency-adverb-content>.frequency-contexts{order:5}
.frequency-adverb-content>.frequency-caption{order:6}
body[data-theme] .frequency-pond-instrument{display:none}
body[data-theme=moon-garden] .frequency-pond-instrument{display:grid}
body:not(.is-enhanced) :is(.frequency-archive,.frequency-archive-controls),body[data-theme=moon-garden] :is(.frequency-archive,.frequency-archive-controls){display:none}
.frequency-archive{--archive-hit:var(--accent);--archive-ink:var(--on-gold);--archive-control-ink:var(--on-gold);min-width:0}
body[data-theme=atlas] .frequency-archive-controls{--archive-control-ink:#fff}
body[data-theme=hydra] .frequency-archive-controls{--archive-control-ink:#221e1b}
body[data-theme=atlas] .frequency-archive{--archive-ink:#fff;--archive-control-ink:#fff}
body[data-theme=cyberpunk] .frequency-archive{--archive-hit:var(--cyan);--archive-ink:var(--ghost-ink)}
.frequency-archive-header{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font:11px/1.5 ui-monospace,monospace;letter-spacing:.06em;color:var(--muted)}
.frequency-archive-header b{font-weight:500;font-variant-numeric:tabular-nums}
.frequency-archive-question p{margin:12px 0;font:500 17px/1.5 var(--font);color:var(--text)}
.frequency-archive-field{--archive-vertical:0;position:relative;isolation:isolate;overflow:hidden;padding:12px;background:var(--raised);border:1px solid var(--line);min-width:0}
.frequency-archive-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.frequency-archive-record{--occurrence-opacity:0;position:relative;min-width:0;min-height:90px;background:var(--panel);border:1px solid var(--line);overflow:hidden}
.frequency-archive-no,.frequency-archive-yes{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px;box-sizing:border-box;font:11px/1.4 ui-monospace,monospace;min-height:90px}
.frequency-archive-no{background:var(--panel);color:var(--muted)}
.frequency-archive-record[data-archive-lit=true] .frequency-archive-no strong{visibility:hidden}
.frequency-archive-yes{position:absolute;inset:0;pointer-events:none;background:var(--archive-hit);color:var(--archive-ink);opacity:var(--occurrence-opacity)}
.frequency-archive-label{display:flex;flex-direction:column;align-items:center;gap:3px;text-transform:uppercase}
.frequency-archive-label b{font-size:17px;font-weight:500;font-variant-numeric:tabular-nums}
.frequency-archive-record strong{font-size:12px;font-weight:500;letter-spacing:.07em}
.frequency-archive-beam{position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent);pointer-events:none;will-change:transform}
.frequency-archive-beam:before{content:'';position:absolute;right:1px;top:0;bottom:0;width:32px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 18%,transparent))}
.frequency-archive-controls{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:16px}
body[data-theme] .frequency-archive-controls button{min-height:44px;padding:10px 15px;background:var(--accent);color:var(--archive-control-ink,var(--on-gold));border:1px solid var(--accent);font:500 13px/1.4 var(--font);cursor:pointer}
.frequency-archive-controls>span{font:12px/1.5 var(--font);color:var(--muted)}
body[data-theme=atlas] .frequency-archive-field{box-shadow:3px 3px var(--panel-offset);border-top:3px solid var(--lime)}
body[data-theme=hydra] .frequency-archive-field{border-radius:16px 0 16px 0;border-top:3px solid var(--accent)}
body[data-theme=hydra] .frequency-archive-record{border-radius:9px 0 9px 0}
@container(max-width:500px){.frequency-archive-field{--archive-vertical:1;padding:8px}.frequency-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.frequency-archive-record{min-height:48px}.frequency-archive-no,.frequency-archive-yes{min-height:48px;flex-direction:row;padding:9px 8px;gap:8px}.frequency-archive-label{flex-direction:row;gap:4px}.frequency-archive-label b{font-size:11px}.frequency-archive-beam{right:0;bottom:auto;width:auto;height:2px}.frequency-archive-beam:before{left:0;right:0;top:auto;bottom:1px;width:auto;height:25px;background:linear-gradient(0deg,color-mix(in srgb,var(--accent) 18%,transparent),transparent)}}
@media(prefers-reduced-motion:reduce){.frequency-archive-beam{display:none}}
body[data-theme] .frequency-explorer{container-type:inline-size;min-width:0;margin-block:26px;padding:clamp(18px,3vw,32px);background:var(--panel);color:var(--text);border:1px solid var(--line)}
.frequency-explorer h3{margin:0 0 24px;font:500 clamp(22px,2vw,30px)/1.2 var(--display);color:var(--text)}
.frequency-instrument{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,54px)}
.frequency-dial-cell{max-width:200px;width:100%;justify-self:center}
.frequency-dial{position:relative;width:100%;aspect-ratio:1;border-radius:50%}
.frequency-dial svg{display:block;width:100%;height:100%;fill:none;stroke:var(--line);stroke-width:1}
.frequency-dial-face{fill:var(--raised)}
.frequency-ticks{stroke:var(--muted);stroke-width:1}
[data-frequency-needle]{stroke:var(--accent);stroke-width:4}
.frequency-dial strong{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font:600 16px/1.2 var(--font);color:var(--text)}
.frequency-dial input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:grab;touch-action:none}
.frequency-dial:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:4px}
.frequency-dial:has(input:active){cursor:grabbing}
.frequency-endpoints{display:flex;justify-content:space-between;font:11px/1.3 var(--font);color:var(--muted)}
.frequency-dial-help{font:11px/1.6 var(--font);color:var(--muted);text-align:center;margin:12px 0 0}
.frequency-explorer .eyebrow{font:10px/1.5 ui-monospace,monospace;letter-spacing:1.1px;color:var(--muted);margin:0 0 12px}
.frequency-visual{min-width:0}
.frequency-pond{display:block}
.frequency-pond canvas{display:block;width:100%;aspect-ratio:2/1;image-rendering:pixelated;border-radius:3px}
.frequency-options{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0}
body[data-theme] .frequency-options button{min-height:44px;max-width:100%;padding:10px 14px;border:1px solid var(--line);background:var(--raised);color:var(--text);font:500 13px/1.4 var(--font);cursor:pointer}
body[data-theme] .frequency-options button[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:var(--on-gold);box-shadow:2px 2px var(--line)}
body[data-theme] .frequency-options button:hover{border-color:var(--accent)}
.frequency-controls button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.frequency-reading{padding:22px 24px;background:var(--raised);border:1px solid var(--line);border-left:3px solid var(--accent);min-width:0}
.frequency-definition{font:400 14px/1.6 var(--font);color:var(--muted);margin:0 0 20px}
.frequency-definition strong{color:var(--text);margin-right:8px}
.frequency-explorer .sentence{margin:0 0 12px;font:500 clamp(20px,2vw,28px)/1.5 var(--display);color:var(--text);overflow-wrap:anywhere}
.frequency-placement,.frequency-caption{font:400 12px/1.65 var(--font);color:var(--muted);margin:12px 0 0}
.frequency-contexts{margin-top:22px}
.frequency-contexts .scenario-options{margin:0;flex-wrap:wrap}
.frequency-contexts button{min-height:44px}
.frequency-calendar-layout{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1fr);align-items:start;gap:26px}
.frequency-calendar-sheet{padding:18px;background:var(--raised);border:1px solid var(--line);min-width:0}
.frequency-calendar{width:100%;border-collapse:separate;border-spacing:3px;table-layout:fixed;font:13px/1.5 var(--font);text-align:center;color:var(--text)}
.frequency-calendar caption{font:500 16px/1.5 var(--display);padding:0 0 16px;color:inherit}
.frequency-calendar th{font:500 11px/1.5 var(--font);padding-bottom:12px;color:inherit}
.frequency-calendar td{position:relative;height:42px;padding:3px 0 10px;border:1px solid transparent;color:inherit}
.frequency-calendar td i{position:absolute;bottom:1px;left:0;right:0;font:8px/1.2 var(--font);visibility:hidden}
.frequency-calendar td.is-occurrence{background:color-mix(in srgb,var(--accent) 18%,transparent);border-color:var(--accent)}
.frequency-calendar td.is-occurrence i{visibility:visible}
.frequency-calendar-key{display:flex;align-items:center;gap:8px;font:11px/1.5 var(--font);margin:12px 0 0;color:inherit}
.frequency-calendar-key i{font-size:8px;font-style:normal}
body[data-theme=cyberpunk] .frequency-explorer{box-shadow:4px 4px var(--panel-offset)}
body[data-theme=atlas] .frequency-explorer{border-radius:0;box-shadow:4px 4px var(--panel-offset)}
body[data-theme=atlas] .frequency-dial svg{stroke-dasharray:2 2}
body[data-theme=atlas] .frequency-dial-face{stroke-dasharray:none}
body[data-theme=hydra] .frequency-explorer h3{border-bottom:1px solid var(--line);padding-bottom:18px}
body[data-theme=hydra] .frequency-options button{border-radius:0;box-shadow:none}
body[data-theme=moon-garden] .frequency-explorer h3{font-weight:400;font-style:italic}
body[data-theme=moon-garden] .frequency-pond{display:block}
body[data-theme=moon-garden] .frequency-reading{border:0;border-radius:7px 18px 8px 14px}
body[data-theme=moon-garden] .frequency-options button{position:relative;isolation:isolate;background:transparent;color:var(--moon-paper-ink);border-color:transparent;border-radius:1px;box-shadow:none;--paper-turn:-1.3deg;--paper-fill:var(--moon-paper);--paper-border:var(--moon-paper-edge)}
body[data-theme=moon-garden] .frequency-options button:nth-child(3n+2){--paper-turn:1.1deg}
body[data-theme=moon-garden] .frequency-options button:nth-child(3n){--paper-turn:-.4deg}
body[data-theme=moon-garden] .frequency-options button[aria-pressed=true]{background:transparent;color:var(--moon-paper-selected-ink);border-color:transparent;box-shadow:none;--paper-fill:var(--moon-paper-selected);--paper-border:var(--moon-paper-selected-edge)}
body[data-theme=moon-garden] .frequency-calendar-sheet{background:var(--moon-paper);color:var(--moon-paper-ink);border:1px solid var(--moon-paper-edge);border-radius:4px 13px 5px 8px;--accent:var(--moon-paper-calendar-accent)}
body[data-theme=moon-garden] .frequency-calendar{color:var(--moon-paper-ink)}
@container(max-width:620px){.frequency-calendar-layout{grid-template-columns:minmax(0,1fr)}.frequency-calendar-sheet{max-width:430px;width:100%;box-sizing:border-box;justify-self:center}.frequency-instrument{grid-template-columns:145px minmax(0,1fr);gap:18px}.frequency-dial strong{font-size:13px}.frequency-explorer .sentence{font-size:23px}}
@container(max-width:410px){.frequency-instrument{grid-template-columns:minmax(0,1fr);gap:24px}.frequency-dial-cell{max-width:160px}.frequency-options{gap:8px}.frequency-reading{padding:18px}.frequency-explorer .sentence{font-size:21px}.frequency-calendar-sheet{padding:12px}}

body[data-theme=atlas] .frequency-options button[aria-pressed=true]{color:#fff}
body[data-theme=moon-garden] .frequency-calendar-sheet{--text:var(--moon-paper-ink)!important;--muted:var(--moon-paper-muted)!important}
@media(max-width:480px){body[data-theme=moon-garden] .frequency-options button:nth-child(n){--paper-turn:0deg}}

body[data-theme=moon-garden] .frequency-options button::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper-fill);border:1px solid var(--paper-border);box-shadow:1px 3px var(--moon-paper-shadow);transform:rotate(var(--paper-turn));pointer-events:none}
/* One interaction surface across themes. Feedback colors are semantic tokens. */
.instruction-board{container-type:inline-size;margin-block:28px}
.instruction-words{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 16px;list-style:none;margin:0 0 28px;padding:12px 0 28px;border-bottom:1px solid var(--line)}
.instruction-words li{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0;color:var(--gold)}
.instruction-icon{display:block;width:64px;height:64px;flex:none}
.instruction-words li>span{font:600 20px/1.3 var(--display);text-align:center;color:var(--text)}
.instruction-tasks{padding:22px 26px;border:1px solid var(--line);background:var(--raised)}
.instruction-tasks h3{font:600 20px/1.4 var(--display);margin:0 0 18px;color:var(--text)}
.instruction-tasks ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 36px;padding-left:24px;margin:0;font:400 14.4px/1.7 var(--font);color:var(--text)}
.instruction-tasks li{padding-left:4px;min-width:0;overflow-wrap:anywhere}
.instruction-tasks li::marker{color:var(--gold);font-weight:600}
body[data-theme=atlas] .instruction-words li,body[data-theme=atlas] .instruction-tasks li::marker{color:var(--accent)}
body[data-theme=hydra] .instruction-tasks{border-radius:0 18px 0 0}
body[data-theme=moon-garden] .instruction-tasks{border-radius:16px 20px 16px 20px}
@container(max-width:650px){.instruction-words{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 12px}.instruction-tasks ol{grid-template-columns:minmax(0,1fr);gap:14px}.instruction-tasks{padding:20px}}
@container(max-width:340px){.instruction-words{grid-template-columns:repeat(2,minmax(0,1fr))}.instruction-icon{width:56px;height:56px}.instruction-words li>span{font-size:18px}.instruction-tasks{padding:18px 16px}}
.lesson-activity{margin-block:20px;--activity-correct:var(--register-natural);--activity-incorrect:var(--register-textbook)}
.activity-help,.activity-feedback-toggle,.activity-audio>small{font-size:.85rem;color:var(--muted);line-height:1.6}
.activity-actions{display:flex;flex-wrap:wrap;gap:8px;margin-block:18px 10px}
.activity-actions button,.listening-options button,.lesson-complete button{font:inherit;font-size:.85rem;border:1px solid var(--line);background:var(--raised);color:var(--text);padding:9px 12px;cursor:pointer}
.activity-actions button:focus-visible,.connect-card:focus-visible,.listening-options button:focus-visible,.lesson-complete button:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.activity-actions button:hover{border-color:var(--gold)}
.activity-status{min-height:1.5em;font-size:.85rem;line-height:1.6}
.activity-feedback-toggle{display:flex;align-items:center;gap:9px;margin-top:16px;cursor:pointer}
.activity-feedback-toggle input{width:18px;height:18px;accent-color:var(--gold)}
.connect-board{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(42px,8vw,100px);align-items:start;margin-top:24px;isolation:isolate}
.connect-column{display:grid;gap:16px;min-width:0}
.connect-column h3{font-family:var(--font);font-size:.95rem;margin:0 0 4px}
.connect-card{position:relative;z-index:1;width:100%;min-height:75px;display:flex;flex-direction:column;justify-content:center;gap:6px;text-align:left;padding:14px 16px;background:var(--panel);color:var(--text);border:1px solid var(--line);font-family:var(--font);font-size:1rem;line-height:1.55;cursor:pointer;overflow-wrap:anywhere}
.connect-card small{font-size:.72rem;font-weight:600;line-height:1.4}
.connect-card small:empty{display:none}
.connect-faces .connect-board{grid-template-columns:minmax(0,1fr) minmax(100px,.45fr)}
.connect-faces .connect-card{min-height:150px}
.connect-faces [data-connect-question]>span{white-space:pre-line}
.connect-faces [data-connect-answer]>span{display:flex;align-items:center;gap:12px}
.connect-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:80px;line-height:1.15}
@media(max-width:600px){.connect-faces .connect-board{grid-template-columns:minmax(0,1fr) 80px;column-gap:26px}.connect-faces .connect-card{min-height:210px;padding:10px 7px;font-size:.8rem}.connect-faces [data-connect-answer]>span{flex-direction:column;gap:4px}.connect-emoji{font-size:52px}}
.connect-card[aria-pressed=true]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.connect-card[data-result=correct]{border-color:var(--activity-correct)}
.connect-card[data-result=incorrect]{border-color:var(--activity-incorrect)}
.connect-card[data-result=correct] small{color:var(--activity-correct)}
.connect-card[data-result=incorrect] small{color:var(--activity-incorrect)}
.connect-port{position:absolute;right:-6px;top:calc(50% - 5px);width:10px;height:10px;border-radius:50%;background:var(--gold);border:2px solid var(--panel)}
[data-connect-answer] .connect-port{right:auto;left:-6px}
.connect-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.connect-preview{position:fixed;inset:0;width:100vw;height:100vh;overflow:visible;pointer-events:none;z-index:999}
.connect-preview[hidden]{display:none!important}
.connect-lines path,.connect-preview path{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.connect-lines path.correct{stroke:var(--activity-correct)}
.connect-lines path.incorrect{stroke:var(--activity-incorrect)}
.connect-lines path.connection-pulse{stroke-width:5;stroke-dasharray:10 90;filter:brightness(1.4)}
.listening-dialogue{display:grid;gap:16px;margin-block:24px}
.listening-line{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.listening-speaker{display:grid;place-items:center;border:1px solid var(--line);background:var(--raised);width:30px;height:30px;border-radius:50%;font-size:.8rem;font-weight:700}
.listening-line p{margin:0;line-height:2.3}
.listening-options{display:inline;white-space:normal}
.listening-options button{display:inline-block;margin:3px 1px;padding:4px 9px;font-size:inherit;line-height:1.5;border-radius:4px}
.listening-options button[aria-pressed=true]{border-color:var(--gold);box-shadow:inset 0 -3px var(--gold)}
.listening-line[data-result=correct] button[aria-pressed=true]{border-color:var(--activity-correct);box-shadow:inset 0 -3px var(--activity-correct)}
.listening-line[data-result=incorrect] button[aria-pressed=true]{border-color:var(--activity-incorrect);box-shadow:inset 0 -3px var(--activity-incorrect)}
.listening-feedback{font-size:.85rem;line-height:1.6!important;color:var(--muted)}
.listening-line[data-result=correct] .listening-feedback{color:var(--activity-correct)}
.listening-line[data-result=incorrect] .listening-feedback{color:var(--activity-incorrect)}
.activity-audio{display:block;max-width:450px;padding:16px;border:1px solid var(--line);background:var(--panel)}
.activity-audio .cassette-window{max-width:190px;margin:auto}
.activity-audio .cassette-state{margin:6px 0;font-size:.8rem}
.activity-audio .cassette-transport{flex-wrap:wrap;gap:8px}
.activity-transcript{white-space:pre-wrap;font-family:var(--font);font-size:.9rem;line-height:1.8}
.lesson-activity details{margin-block:18px;padding:12px;border:1px solid var(--line)}
.lesson-activity summary{cursor:pointer;font-size:.85rem}
.lesson-complete{max-width:500px;width:calc(100% - 32px);padding:28px;color:var(--text);background:var(--panel);border:1px solid var(--gold);font:inherit;line-height:1.7}
.lesson-complete::backdrop{background:#0009}
body[data-theme=hydra] .connect-card,body[data-theme=hydra] .activity-audio{border-radius:0 14px 0 0}
body[data-theme=moon-garden] .connect-card,body[data-theme=moon-garden] .activity-audio{border-radius:12px 16px 12px 16px}
body[data-theme=moon-garden] .activity-actions button{border-radius:8px}
@media(max-width:480px){.connect-board{column-gap:32px}.connect-column{gap:14px}.connect-column h3{font-size:.76rem}.connect-card{padding:10px 9px;font-size:.83rem;min-height:100px}.connect-card small{font-size:.67rem}.listening-line{grid-template-columns:24px minmax(0,1fr);gap:8px}.listening-speaker{width:24px;height:24px}.activity-actions button{flex:1 1 40%}}
/* Shared teaching surfaces: inherited palettes, finite response motion. */
.sentence-lab,.sentence-unfold,.lesson-trail{min-width:0;max-width:100%;margin:20px 0}
.sentence-lab [hidden],.sentence-unfold [hidden],.lesson-trail [hidden],.dog-companion [hidden]{display:none!important}
.sentence-lab button,.sentence-unfold button,.lesson-trail button,.dog-actions button{font:inherit;font-size:13px;min-height:44px;border:1px solid var(--line);background:var(--raised);color:var(--text);padding:9px 13px;cursor:pointer}
.sentence-lab button:focus-visible,.sentence-unfold button:focus-visible,.lesson-trail button:focus-visible,.dog-companion button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.sentence-lab button:disabled,.sentence-unfold button:disabled{opacity:.4;cursor:default}
.sentence-lab-hint,.dog-invitation{font-size:13px;line-height:1.6;color:var(--muted)}
.sentence-bank,.sentence-slots,.sentence-actions,.dog-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sentence-bank{padding:12px 0}
.sentence-bank button,.sentence-slots button{font-size:16px;overflow-wrap:anywhere;max-width:100%;cursor:grab}
.sentence-slots{min-height:76px;border-block:1px dashed var(--accent);padding:13px 0;margin:6px 0 16px}
.sentence-slots button{border-color:var(--accent);background:var(--panel)}
.sentence-placeholder{font-size:13px;color:var(--muted)}
.sentence-actions button:first-child{border-color:var(--accent)}
.assembly-feedback{min-height:28px;font-size:14px;line-height:1.6}
.assembly-feedback small{display:block;color:var(--muted);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.assembly-result{margin:12px 0 0!important;font-size:clamp(19px,2.3vw,28px)!important;line-height:1.7!important;overflow-wrap:anywhere}
.assembly-connection{display:block;height:2px;background:var(--accent);margin:20px 0 14px;transform-origin:left}
.is-correct .assembly-connection{animation:sentence-connect var(--sentence-connect-duration) ease-out both}
.sentence-unfold .sentence{min-height:64px;line-height:1.8}
.sentence-unfold [data-unfold-part]:not([hidden]){animation:sentence-part var(--sentence-reveal-duration) ease-out both}
/* Opt-in short reveal, shared across themes. No timer, score or progress write. */
.channel-lab{padding:20px;border:1px solid var(--line);background:var(--panel)}
.sentence-board:has(.channel-lab){padding:0!important;min-height:0;margin-block:20px;background:transparent!important;border:0!important;box-shadow:none!important}
.sentence-board:has(.channel-lab)::before,.sentence-board:has(.channel-lab)::after{display:none}
.sentence-board .channel-lab{margin:0}
.channel-header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
.channel-header .section-label{margin:0;font:600 11px/1.5 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.channel-header>span{font:10px/1.5 ui-monospace,monospace;letter-spacing:.04em;color:var(--muted)}
.channel-lab .channel-prompt{font:400 13px/1.6 var(--font);color:var(--muted);margin:14px 0}
.channel-progress{display:flex;gap:5px;height:5px;margin:16px 0 20px}
.channel-progress i{flex:1;background:var(--line);opacity:.5;transition:background var(--sentence-reveal-duration),opacity var(--sentence-reveal-duration)}
.channel-progress i.is-revealed{background:var(--accent);opacity:1}
.channel-lab .sentence{min-height:56px;margin:0 0 18px;overflow-wrap:anywhere}
.channel-lab .sentence-actions{padding-top:14px;border-top:1px solid var(--line)}
.channel-lab .sentence-actions button{font:500 12px/1.4 var(--font)}
.channel-lab .channel-complete{font:400 12px/1.6 var(--font);margin:14px 0 0;color:var(--text)}
@media(max-width:480px){.channel-lab{padding:15px}.channel-lab .sentence-actions button{flex:1 1 120px}.channel-header{align-items:flex-start;flex-direction:column;gap:4px}}
@media(prefers-reduced-motion:reduce){.channel-progress i{transition:none}}
.routine-builders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.routine-builders>article:only-child{grid-column:1/-1}
.routine-builders>article{padding:20px;border:1px solid var(--line);background:var(--panel)}
.routine-builders h3{font:500 19px/1.5 var(--display)}
.lesson-trail{padding:22px clamp(16px,3vw,40px);border:1px solid var(--line);background:var(--panel);position:relative}
.trail-steps{list-style:none;max-width:650px;padding:0;margin:22px auto 28px}
.trail-steps li{position:relative;width:calc(100% - 42px);margin:26px 0}
.trail-steps li:nth-child(even){margin-left:42px}
.trail-steps li+li:before{content:"";position:absolute;top:-28px;left:18px;width:42px;height:28px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);border-radius:0 0 0 24px;opacity:.7}
.trail-steps li:nth-child(even):before{left:-24px;transform:scaleX(-1)}
.trail-steps button{display:flex;align-items:center;gap:14px;text-align:left;width:100%;border:0!important;background:transparent!important;padding:0!important}
.trail-steps strong{font:500 17px/1.5 var(--display)}
.trail-stop{display:grid;place-items:center;border:1px solid var(--accent);border-radius:50%;width:40px;height:40px;flex-shrink:0;background:var(--raised);font:12px monospace}
.trail-steps [aria-current=step] .trail-stop{background:var(--accent);color:var(--bg)}
.trail-discovery{border-top:1px solid var(--line);padding-top:6px;line-height:1.7}
.trail-choices{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.trail-choices button{flex:1;min-width:120px;text-align:left}
.trail-choices button span[aria-hidden]{color:var(--accent);float:right}
.trail-arrival{font-size:13px;color:var(--muted);margin-bottom:0}
.branch-map{margin:16px 0 24px}.branch-map>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.branch-map>summary:before{content:"+";color:var(--accent)}.branch-map[open]>summary:before{content:"−"}
.branch-map .branch-canvas{margin-top:24px}.branch-builder[hidden]{display:none!important}
/* Chat history stays inside the lesson reader; replies are not scored. */
.chat-heading{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:14px 0;margin-bottom:16px;font-size:13px;color:var(--accent)}
.chat-heading small{margin-left:auto;color:var(--muted);font-size:11px}
.chat-thread{max-height:65vh;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:8px 10px 20px 0}
.chat-thread .conversation-transcript{border:0;padding:0;display:block;background:transparent}
.chat-thread .conversation-line{display:block;width:fit-content;max-width:86%;margin:0 auto 16px 0;padding:14px 18px;border:1px solid var(--line);border-radius:2px 18px 18px;background:var(--raised)}
.chat-thread .conversation-self{margin:12px 0 20px auto;border-color:var(--accent);border-radius:18px 2px 18px 18px;background:var(--panel)}
.chat-thread .conversation-speaker{display:block;font-size:10px;margin-bottom:6px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.chat-thread .conversation-line p{margin:0;line-height:1.7}
.chat-thread [data-dialogue-choices]{padding:12px 0;margin-top:8px;border-top:1px dashed var(--line)}
.chat-thread .conversation-replies{display:flex;flex-wrap:wrap;gap:8px}
.chat-thread .conversation-replies button{border-radius:12px;padding:12px 16px;min-height:44px;flex:1;min-width:min(190px,100%);text-align:left}
.chat-arriving .conversation-transcript{animation:chat-arrive var(--chat-arrive-duration) ease-out both}
/* This single companion is explicitly requested; theme colors remain inherited. */
.dog-companion{container-type:inline-size;text-align:center;width:100%;max-width:560px;margin:auto}
.dog-room{position:relative;height:clamp(190px,125cqw,270px);border-bottom:1px solid var(--line);overflow:hidden}
.concept-live .dog-pet{width:min(234px,100%);height:100%;position:relative;display:block;margin:0 auto;padding:0;box-sizing:border-box;border:0!important;background:transparent!important;cursor:pointer;z-index:1}
.dog-sprite{position:absolute;width:min(210px,90%);height:auto;aspect-ratio:181/210;left:50%;transform:translateX(-50%);bottom:5px;image-rendering:pixelated}
.dog-mat{position:absolute;bottom:5px;width:min(210px,90%);height:32px;border:1px solid var(--line);border-radius:50%;background:var(--raised);left:50%;transform:translateX(-50%)}
.dog-heart{position:absolute;right:22%;top:55px;color:var(--accent);opacity:0;transition:opacity var(--sentence-reveal-duration)}
[data-dog-state=wag] .dog-heart{opacity:1}
.dog-actions{justify-content:center}.dog-actions [aria-pressed=true]{border-color:var(--accent)}
.dog-caption .sentence{font-size:24px;line-height:1.8;margin:20px 0 0}
/* Playback activity indicator, not an audio analyser. */
.cassette-deck{width:min(100%,340px);margin:0 auto 20px;position:relative;padding:22px 24px;border:2px solid var(--line);border-radius:13px;background:var(--raised);box-shadow:4px 4px 0 var(--panel-offset,var(--panel))}
.cassette-label,.cassette-track{display:block;font:10px/1.7 monospace;letter-spacing:.12em;color:var(--muted)}
.cassette-label{padding-bottom:10px;border-bottom:1px solid var(--line)}
.cassette-window{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--bg);border:1px solid var(--line);border-radius:40px;margin:18px 0;padding:10px}
.cassette-reel{width:40px;height:40px;flex-shrink:0;border:4px dashed var(--muted);border-radius:50%;position:relative;animation:cassette-turn var(--cassette-reel-duration) linear infinite;animation-play-state:paused}
.cassette-reel:after{content:"";position:absolute;inset:9px;border:1px solid var(--accent);border-radius:50%}
.cassette-waves{display:flex;gap:4px;align-items:center;height:38px}
.cassette-waves i{display:block;width:3px;height:4px;background:var(--accent);animation:cassette-wave var(--cassette-wave-duration) ease-in-out alternate infinite;animation-play-state:paused}
.cassette-waves i:nth-child(2n){animation-delay:-.23s}.cassette-waves i:nth-child(3n){animation-delay:-.41s}
.is-playing .cassette-reel,.is-playing .cassette-waves i{animation-play-state:running}
.cassette-screws{position:absolute;inset:auto 8px 4px;text-align:left;color:var(--muted);font:10px monospace}.cassette-screws i{float:right;font-style:normal}
.cassette-transport{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:14px}
.concept-sound .cassette-transport button{min-width:0;min-height:44px;margin:0;padding:8px 6px;font-size:12px;white-space:normal;overflow-wrap:anywhere}
.cassette-transport [data-speech-stop]{grid-column:1/-1}
.cassette-transport [aria-pressed=true]{border-color:var(--accent);box-shadow:inset 0 -2px var(--accent)}
.cassette-transport button:disabled{opacity:.45;cursor:default}
.concept-sound .cassette-state{font-size:12px;line-height:1.5;margin:12px 0 2px;color:var(--muted)}
.is-playing .cassette-state{color:var(--accent)}
@keyframes sentence-connect{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sentence-part{from{opacity:0}to{opacity:1}}
@keyframes chat-arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes cassette-turn{to{transform:rotate(360deg)}}
@keyframes cassette-wave{to{height:30px}}
@media(max-width:600px){.routine-builders{grid-template-columns:1fr}.lesson-trail{padding:16px}.trail-steps strong{font-size:15px}.trail-choices{flex-direction:column}.sentence-bank button,.sentence-slots button{font-size:14px}.chat-thread .conversation-line{max-width:94%;padding:12px}.chat-heading small{max-width:50%;text-align:right}.dog-heart{right:15%}.cassette-deck{padding:16px}.cassette-window{gap:6px;padding:8px 6px}.cassette-reel{width:32px;height:32px}.cassette-reel:after{inset:6px}.cassette-waves{gap:3px}}
@media(prefers-reduced-motion:reduce){.sentence-lab *,.sentence-unfold *,.chat-arriving *,.dog-sprite,.cassette-reel,.cassette-waves i{animation:none!important;transition:none!important}}
.foundation-tool{border:1px solid var(--line);background:var(--panel);color:var(--text);padding:clamp(14px,2vw,24px);margin:1.25rem 0 1.8rem;min-width:0}
.foundation-tool h3{font-family:var(--display);font-size:1.18rem;margin:0 0 .5rem}.foundation-tool p{line-height:1.6;max-width:66ch}.foundation-tool button{font:inherit;color:var(--text);background:var(--raised);border:1px solid var(--line);min-height:44px;padding:.55rem .85rem;cursor:pointer}.foundation-tool button[aria-pressed=true],.foundation-tool button.primary{background:var(--gold);color:var(--on-gold,#211625);border-color:var(--gold)}.foundation-tool button:focus-visible,.foundation-tool summary:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.foundation-tool button:disabled{opacity:.45;cursor:default}.foundation-tool [hidden]{display:none!important}
.foundation-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(75px,1fr));gap:8px;margin:1rem 0}.foundation-tiles button{display:grid;place-items:center;align-content:center;gap:5px;min-height:82px}.foundation-tiles b{font-size:1.35rem}.foundation-tiles small{font-size:.82rem;min-height:1.25em}.foundation-board-detail,.foundation-result{padding:1rem;border:1px solid var(--line);background:var(--bg)}.foundation-audio{text-align:center}.foundation-audio p{margin:.6rem auto}.foundation-selected{font-size:2.5rem;line-height:1.1!important;font-weight:700}.foundation-guide{color:var(--muted);font-size:1rem}.foundation-audio-controls,.foundation-generator-actions,.foundation-ranges{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}.foundation-audio-controls{margin-top:1rem}.foundation-tool .foundation-audio-controls button{margin:0}.foundation-audio-state{font-size:.78rem;color:var(--muted);min-height:1.5em}.foundation-device-note{display:block;color:var(--muted);font-size:.75rem;margin-top:.8rem}
.foundation-card-audio{text-align:left}.foundation-card-audio .foundation-tiles button{margin:0}
.foundation-spelling-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.foundation-spelling-grid article{padding:1rem;border:1px solid var(--line);background:var(--bg);min-width:0}.foundation-spelling-grid h4{font-size:1.4rem;margin:.5rem 0 1rem;letter-spacing:.08em}.foundation-spelling-grid summary{cursor:pointer;font-weight:600;min-height:44px;line-height:1.5;padding:.5rem 0}.foundation-spelling{font-weight:600;letter-spacing:.03em;overflow-wrap:anywhere}.foundation-spelling-grid .foundation-guide{overflow-wrap:anywhere}.foundation-tool fieldset{margin:1rem 0;padding:0;border:0;min-width:0}.foundation-tool legend{font-weight:600;margin-bottom:.6rem}.foundation-number-choices{display:flex;flex-wrap:wrap;gap:8px}.foundation-number-choices button{min-width:44px}.foundation-equation{font-size:1.5rem}.foundation-equation strong{display:inline-block;padding:.1rem .6rem;background:var(--gold);color:var(--on-gold,#211625)}.foundation-number-name{font-size:1.5rem;font-weight:600;overflow-wrap:anywhere}.foundation-ranges{justify-content:flex-start;margin:1rem 0}.foundation-generated-number{font-size:clamp(3rem,7vw,5rem);font-weight:700;line-height:1.15!important;font-variant-numeric:tabular-nums}.foundation-generator-actions{margin:1rem 0}.foundation-prompt{font-size:.9rem}
body[data-theme=atlas] .foundation-tool{border-top:3px solid var(--accent);box-shadow:4px 4px 0 var(--line)}body[data-theme=hydra] .foundation-tool{border-radius:0 20px 0 20px}body[data-theme=moon-garden] .foundation-tool{border-radius:18px 8px 18px 8px}
@media(max-width:480px){.foundation-spelling-grid{grid-template-columns:1fr}.foundation-tool{padding:12px}.foundation-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.foundation-tiles button{padding:.5rem .2rem}.foundation-tiles small{font-size:.75rem}.foundation-board-detail,.foundation-result{padding:.75rem}}

/* Offset the digit mask so lazy hydration preserves the static number line box. */
.foundation-tool [data-number-flow]{font-variant-numeric:tabular-nums}.foundation-tool number-flow{font:inherit;color:inherit;line-height:1;vertical-align:baseline;margin-block:-.1em;--number-flow-mask-height:.1em}
/* Ghost Frequency replaces Neon District under its stable cyberpunk route.
   Shared structure and semantics remain in their owning components. */
body[data-theme=cyberpunk]{--lesson-edge-inset:0px;background:var(--bg);color:var(--text)}
body[data-theme=cyberpunk] :is(.stage,.course-main,.library-shell){background:var(--bg);background-image:none}
body[data-theme=cyberpunk] :is(.stage:before,.frame-corner,.visual-panel:after,.sentence-board:after){display:none}
body[data-theme=cyberpunk] :is(.masthead,.library-header){background:var(--bg);border-color:var(--line)}
body[data-theme=cyberpunk] :is(.brand b,.library-brand b){font-family:var(--display);font-weight:600;color:var(--cyan);letter-spacing:.07em}
body[data-theme=cyberpunk] :is(.brand-description,.edition,.page-footer){color:var(--muted)}
body[data-theme=cyberpunk] .lesson{margin-right:0;border:1px solid var(--line);border-radius:0;box-shadow:none}
body[data-theme=cyberpunk] :is(.console-bar,.rail-heading,.lesson-footer,.mobile-nav-bar,.lesson-rail,.rail-foot,.rail-controls,.rail-steps){background:var(--panel);border-color:var(--line);box-shadow:none}
body[data-theme=cyberpunk] .console-bar{background:var(--bg);font-size:10px;letter-spacing:.1em}
body[data-theme=cyberpunk] :is(#systemLabel,.console-title){color:var(--accent)}
body[data-theme=cyberpunk] .relay-path{color:var(--muted)}
body[data-theme=cyberpunk] .relay-signals i:nth-child(2){background:var(--accent)}
body[data-theme=cyberpunk] .relay-signals i:nth-child(3){background:var(--text)}
body[data-theme=cyberpunk] .motion-bar{border-top:1px solid var(--line);padding-top:14px}
body[data-theme=cyberpunk] .relay-barcode{background:repeating-linear-gradient(90deg,var(--accent) 0 1px,transparent 1px 3px,var(--accent) 3px 5px,transparent 5px 8px)}

/* Display type is reserved for headings; learning prose keeps DM Sans. */
body[data-theme=cyberpunk] :is(.rule-title,.lesson-heading h2,.course-intro h1,.library-intro h1,#lessonTitle){font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.015em;line-height:1.15;text-shadow:none;color:var(--text)}
body[data-theme=cyberpunk] :is(.lesson-heading h2,#lessonTitle,.course-intro h1,.library-intro h1){width:fit-content;background:linear-gradient(110deg,var(--cyan),var(--text) 48%,var(--accent));background-clip:text;-webkit-background-clip:text;color:transparent}
body[data-theme=cyberpunk] :is(.rule-title span,.lesson-heading h2 span,#lessonTitle span){color:inherit}
body[data-theme=cyberpunk] :is(.reference-top h3,.reference-top h4,.demo-card h3,.overview-card h3,.pattern-body h4){font-family:var(--display);font-weight:600;color:var(--text);text-shadow:none}
body[data-theme=cyberpunk] :is(.lesson-heading .eyebrow,.reference-index,.heading-code,.panel-label,.section-label,.pattern-console){font-family:ui-monospace,monospace;letter-spacing:.08em;color:var(--cyan)}
body[data-theme=cyberpunk] :is(.rule-meaning,.overview-meaning,.reference-meaning,.reference-description,.overview-instruction,.demo-head-note,.panel-caption){color:var(--muted)}

/* Flat rectangular panels and violet instrument wells. */
body[data-theme=cyberpunk] :is(.visual-panel,.demo-card,.overview-card,.compare-card,.reference-card,.sentence-board,.table-shell,.question-zone,.flow-detail,.map-inspector,.lesson-rule,.lesson-examples article,.library-card,.conversation-panel,.branch-builder,.pattern-detail,.practice-set-card,.practice-unlock,.practice-dialog,.practice-recap,.practice-exercise:not(.is-correct):not(.is-incorrect):not(.is-supported),.foundation-tool,.routine-builders>article,.lesson-trail){background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:0;box-shadow:none}
body[data-theme=cyberpunk] :is(#conversation-greetings,#conversation-introductions) .reference-card:nth-child(n):nth-child(n){background:var(--panel);border:1px solid var(--line);box-shadow:none}
body[data-theme=cyberpunk] :is(.overview-card,.reference-card,.compare-card):nth-child(n){border-color:var(--line)}
body[data-theme=cyberpunk] :is(.visual-panel,.sentence-board,.concept-live,.frequency-instrument,.frequency-reading,.pattern-console,.panel-label,.overview-example,.selected-example,.decision-event,.flow-context,.flow-leaf,.correction-pair>div,.formula-token,.question-part,.word-token,.connector-map>div,.before-sentence,.time-path){background:var(--raised);color:var(--text);border-color:var(--line);box-shadow:none}
body[data-theme=cyberpunk] :is(.panel-label,.pattern-console){border-bottom:1px solid var(--line);color:var(--muted)}
body[data-theme=cyberpunk] .panel-label span{color:inherit}
body[data-theme=cyberpunk] :is(.overview-note,.demo-note,.teaching-tip,.compare-summary,.mistake-tip){background:var(--panel);color:var(--text);border-color:var(--line);border-left:2px solid var(--cyan);box-shadow:none}
body[data-theme=cyberpunk] :is(.grammar-table,.simple-table,.lesson-table,.grammar-table td,.simple-table td,.lesson-table td,.lesson-table th){border-color:var(--line)}
body[data-theme=cyberpunk] :is(.grammar-table th,.simple-table th,.lesson-table thead){background:var(--raised);color:var(--muted)}
body[data-theme=cyberpunk] :is(.grammar-table tbody tr,.lesson-table tbody){background:var(--panel)}
body[data-theme=cyberpunk] :is(.grammar-table tbody tr.active,.selectable-comparison .lesson-table tbody tr.active){background:var(--cyan);color:var(--ghost-ink);box-shadow:none}
body[data-theme=cyberpunk] :is(.grammar-table tbody tr.active,.selectable-comparison .lesson-table tbody tr.active) :is(td,th,button,span,mark,b){color:var(--ghost-ink);border-color:var(--line)}
body[data-theme=cyberpunk] .grammar-table td:nth-child(2){color:var(--cyan)}
body[data-theme=cyberpunk] .grammar-table tr.active td:nth-child(2){color:var(--ghost-ink)}

/* Selection hierarchy: lavender navigation, mint concept choices. */
body[data-theme=cyberpunk] .learning-lesson-link.is-current{background:var(--accent);color:var(--ghost-ink);border-color:var(--accent);box-shadow:none}
body[data-theme=cyberpunk] .learning-lesson-link.is-current :is(span,b){color:inherit}
body[data-theme=cyberpunk] .lesson-rail .topics :is(a,button){color:var(--text);border-color:var(--line)}
body[data-theme=cyberpunk] .lesson-rail .topics :is(a,button).active,
body[data-theme=cyberpunk] .learning-lesson-panel .topics :is(a,button).active:not(.flow-nav):not(.practice-nav){background:var(--raised);color:var(--text);border-color:var(--line);box-shadow:inset 2px 0 var(--accent)}
body[data-theme=cyberpunk] .lesson-rail .steps :is(a,button).active{background:var(--raised);color:var(--cyan);border-color:var(--line);box-shadow:inset 2px 0 var(--cyan)}
body[data-theme=cyberpunk] .lesson-rail .steps :is(a,button).active:after{color:var(--cyan)}
body[data-theme=cyberpunk] :is(.learning-disclosure,.nav-chevron,.learning-collection-toggle>span,.theme-toggle-icon){color:var(--accent)}
body[data-theme=cyberpunk] #navToggle,body[data-theme=cyberpunk] #navToggle>span{color:var(--cyan)}
body[data-theme=cyberpunk] :is(.practice-unlock,.practice-set-card,.practice-exercise) .eyebrow{color:var(--cyan)}
body[data-theme=cyberpunk] :is(.form-switch,.scenario-options,.branch-tabs){gap:0;border:1px solid var(--line);width:fit-content;max-width:100%}
body[data-theme=cyberpunk] :is(.form-switch,.scenario-options,.branch-tabs) button{margin:0;border:0;border-right:1px solid var(--line);min-height:44px}
body[data-theme=cyberpunk] :is(.form-switch,.scenario-options,.branch-tabs) button:last-child{border-right:0}
body[data-theme=cyberpunk] :is(.form-switch button,.scenario-options button,.branch-tabs button,.pattern-choices button,.practice-set-tabs button,.practice-secondary,.conversation-replies button,.conversation-history button,.flow-form,.language-picker button,.theme-toggle,.palette-toggle,.concept-options button,.frequency-options button,.foundation-tool button){background:var(--panel);color:var(--text);border-color:var(--line);border-radius:0;box-shadow:none}
body[data-theme=cyberpunk] :is(.form-switch button.active,.form-switch button[aria-pressed=true],.scenario-options button[aria-pressed=true],.scenario-options button.active,.branch-tabs button[aria-pressed=true],.pattern-choices button[aria-pressed=true],.flow-form.active,.flow-leaf.active,.concept-options button[aria-pressed=true],.frequency-options button[aria-pressed=true]){background:var(--cyan);color:var(--ghost-ink);border-color:var(--cyan);box-shadow:none}
body[data-theme=cyberpunk] :is(.primary,.practice-primary,.library-open,.lesson-continue,.practice-set-tabs button[aria-pressed=true],.language-picker button[aria-pressed=true],.section-controls #next){background:var(--accent);color:var(--ghost-ink);border:1px solid var(--accent);border-radius:0;box-shadow:none}
body[data-theme=cyberpunk] :is(.branch-node,.diagram-node) .node-outline>*{fill:var(--panel);stroke:var(--line)}
body[data-theme=cyberpunk] :is(.branch-node.active,.diagram-node[aria-pressed=true]) .node-outline>*{fill:var(--raised);stroke:var(--cyan)}
body[data-theme=cyberpunk] :is(.branch-node.active,.diagram-node[aria-pressed=true]),body[data-theme=cyberpunk] :is(.branch-node.active,.diagram-node[aria-pressed=true]) :is(small,.node-caption){color:var(--text)}
body[data-theme=cyberpunk] :is(.branch-node,.diagram-node):hover .node-outline>*{stroke:var(--cyan)}
body[data-theme=cyberpunk] :is(button,a,summary,input):focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
body[data-theme=cyberpunk] .best-lock-icon .unlock-neon{stroke:var(--accent)}
body[data-theme=cyberpunk] .best-lock-icon{--best-lock-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c6b2ff' stroke-width='1.6'%3E%3Cpath d='M7.5 10V7a4.5 4.5 0 0 1 9 0v3M5 10h14v11H5Z'/%3E%3Cpath stroke='%23a3e7d6' d='M12 14v3'/%3E%3C/svg%3E")}
body[data-theme=cyberpunk] .theme-gallery{border-radius:0}
body[data-theme=cyberpunk] .theme-gallery-close{border-radius:0}
body[data-theme=cyberpunk] .chat-thread :is(.conversation-line,.conversation-replies button){border-radius:0;box-shadow:none}

/* Grammar and register states have priority over decorative panel styling. */
body[data-theme=cyberpunk] :is(.focus-word,.lesson-highlight,.sentence mark,.compare-card mark,.selected-example mark,.formula-token.focus,.lesson-token.is-focus,.word-token.aux){background:var(--gold);color:var(--on-gold);border:1px solid var(--gold);box-shadow:none;text-shadow:none;animation:none}
body[data-theme=cyberpunk] :is(.focus-word,.lesson-highlight) :is(span,strong,b){color:inherit}
body[data-theme=cyberpunk] .register-card{border-color:var(--register-color);box-shadow:none}

/* A finite scan marks navigation; it never covers or delays the explanation. */
.ghost-sweep{position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,var(--cyan),var(--accent));transform-origin:left;box-shadow:0 2px 12px color-mix(in srgb,var(--accent) 24%,transparent)}
body[data-theme=cyberpunk] .channel-lab{background:var(--raised);border-color:var(--line)}
body[data-theme=cyberpunk] .channel-lab .channel-header{color:var(--accent)}
body[data-theme=cyberpunk] .channel-lab [data-unfold-next]{background:var(--cyan);border-color:var(--cyan);color:var(--ghost-ink)}
body[data-theme=cyberpunk] .channel-lab .channel-progress i.is-revealed{background:var(--cyan)}
body[data-theme=cyberpunk] .channel-lab.is-complete{border-color:var(--cyan)}
body[data-theme=cyberpunk] .channel-lab .channel-complete{color:var(--cyan)}

/* Isolated miniature: never inherit the surrounding gallery's palette. */
.theme-card[data-preview-theme=cyberpunk] .theme-preview-title{font-family:var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--preview-text)}
.theme-card[data-preview-theme=cyberpunk] .theme-preview-example{background:var(--preview-panel);box-shadow:none}
.theme-card[data-preview-theme=cyberpunk] .theme-preview-number{color:var(--preview-accent)}
.theme-card[data-preview-theme=cyberpunk] .theme-preview-sentence{font-family:'DM Sans',sans-serif}
@media(hover:hover){
 body[data-theme=cyberpunk] :is(.learning-lesson-link,.topics a,.topics button,.steps a,.steps button,.scenario-options button,.form-switch button,.conversation-replies button,.conversation-history button,.practice-set-tabs button,.primary,.theme-toggle,.palette-toggle):not(:disabled):not(.is-locked):hover{outline:1px solid var(--cyan);outline-offset:-1px;border-color:var(--cyan)}
 body[data-theme=cyberpunk] :is(.demo-card,.overview-card,.reference-card,.compare-card,.library-card):hover{border-color:var(--accent)}
 body[data-theme=cyberpunk] :is(#conversation-greetings,#conversation-introductions) .reference-card:nth-child(n):nth-child(n):hover{border-color:var(--accent)}
}
@media(prefers-reduced-motion:reduce){.ghost-sweep{display:none}}
@media(forced-colors:active){body[data-theme=cyberpunk] :is(.lesson-heading h2,#lessonTitle,.course-intro h1,.library-intro h1){background:none;color:CanvasText}}
/* Shared behavior adapted from RareUI and Aceternity, using BEST theme tokens. */
.selection-track{position:relative;isolation:isolate;--selection-fill:var(--gold);--selection-ink:var(--on-gold)}
body[data-theme=cyberpunk] .selection-track{--selection-fill:var(--cyan);--selection-ink:var(--ghost-ink)}
.selection-indicator{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;background:var(--selection-fill);border:1px solid var(--selection-fill);box-sizing:border-box;transition:transform var(--selection-slide-duration) cubic-bezier(.2,.8,.2,1),width var(--selection-slide-duration) ease,height var(--selection-slide-duration) ease;border-radius:inherit}
body[data-theme] .selection-track>button{position:relative;background:transparent!important;box-shadow:none!important}
body[data-theme] .selection-track>button:is([aria-pressed=true],[aria-selected=true]){color:var(--selection-ink)!important;border-color:transparent!important}
body[data-theme=hydra] .selection-indicator{border-radius:0 10px 0 10px}
body[data-theme=moon-garden] .selection-indicator{border-radius:12px 8px 10px 8px}
.reference-card [data-expand-card],.expanded-reference-close{font:600 .85rem/1.4 var(--font);min-height:44px;padding:10px 16px;border:1px solid var(--accent);background:var(--raised);color:var(--text);cursor:pointer}
.reference-card [data-expand-card]{align-self:flex-start;margin-top:auto}
.reference-card [data-expand-card]:hover{background:var(--panel);border-color:var(--text)}
.reference-card [data-expand-card]:focus-visible,.expanded-reference-close:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.expanded-reference{box-sizing:border-box;width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px;border:1px solid var(--accent);background:var(--panel);color:var(--text);box-shadow:8px 8px 0 var(--panel-offset);overflow:auto;overscroll-behavior:contain}
.expanded-reference::backdrop{background:rgb(0 0 0 / .65)}
.expanded-reference-close{display:block;margin:0 0 16px auto}
.expanded-reference h2{font:600 1.4rem/1.3 var(--display);margin:0 0 16px}
.expanded-reference p{font-family:var(--font);line-height:1.65;overflow-wrap:anywhere}
.expanded-reference .reference-example{font-size:1.2rem;border-top:1px solid var(--line);padding-top:18px}
body[data-theme=hydra] .expanded-reference{border-radius:0 22px 0 22px}
body[data-theme=moon-garden] .expanded-reference{border-radius:22px 14px 20px 14px}
@media(prefers-reduced-motion:reduce){.selection-indicator{transition:none!important}}
/* Margin Notes: the approved light-only pencil notebook, not a dark variant. */
@font-face{font-family:'Patrick Hand';src:url('/assets/margin-notes/patrick-hand-regular.woff') format('woff');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Caveat';src:url('/assets/margin-notes/caveat-variable.woff') format('woff');font-style:normal;font-weight:400 700;font-display:swap}
body[data-theme=margin-notes]{background:var(--bg);color:var(--text);font-family:var(--font);font-size:20px;line-height:1.35;--lesson-edge-inset:0px}
body[data-theme=margin-notes] :is(.page-shell,.library-shell){background:var(--paper);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h160v160H0z' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
body[data-theme=margin-notes] :is(.stage,.course-main,.library-shell,.lesson-canvas){background-color:var(--paper);color:var(--text);background-image:none}
body[data-theme=margin-notes] :is(.stage::before,.frame-corner,.visual-panel::before,.visual-panel::after,.sentence-board::after,.relay-signals,.relay-barcode,.motion-bars,.hydra-meter,.rail-visual,.rail-signal,.lesson-panel.is-entering::before,.diagram-pulse,.branch-pulse,.flow-pulse,.decision-dot){display:none}
body[data-theme=margin-notes] :is(.masthead,.library-header){background:var(--panel);color:var(--text);border-bottom:1px solid var(--line);position:relative}
body[data-theme=margin-notes] :is(.masthead,.library-header)::after{content:'';position:absolute;left:0;right:0;bottom:2px;border-bottom:1px solid var(--line);opacity:.28;transform:rotate(-.08deg);pointer-events:none}
body[data-theme=margin-notes] :is(.brand b,.library-brand b){font:650 37px/1 var(--display);color:var(--text);letter-spacing:-1px;text-shadow:none}
body[data-theme=margin-notes] :is(.brand-description,.brand>span,.library-brand span,.edition,.page-footer){color:var(--muted);font-family:var(--font)}
body[data-theme=margin-notes] .lesson{margin-right:0;border:1px solid var(--line);background:var(--paper);border-radius:3px 5px 2px 6px;box-shadow:none}
body[data-theme=margin-notes] :is(.console-bar,.mobile-nav-bar,.lesson-rail,.rail-heading,.rail-foot,.rail-controls,.rail-steps,.rail-topics,.topic-submenu,.course-sidebar){background:var(--panel);color:var(--text);border-color:var(--line);box-shadow:none}
body[data-theme=margin-notes] :is(.console-title,#systemLabel,.relay-path,.rail-heading strong,.rail-section-label,.learning-level-label,.heading-code,.panel-foot,.page-footer a,.motion-bar,.motion-bar span){color:var(--muted);font-family:var(--font);letter-spacing:.4px}
body[data-theme=margin-notes] :is(.console-bar,.rail-section-label,.learning-level-label,.panel-foot,.page-footer,.motion-bar){font-size:13px}
body[data-theme=margin-notes] .relay-path{font-size:15px}
body[data-theme=margin-notes] :is(.lesson-heading,.course-intro,.library-intro){display:flex;gap:24px;align-items:center;background:none;border:0;box-shadow:none;position:relative;margin-bottom:42px}
body[data-theme=margin-notes] :is(.lesson-heading,.course-intro,.library-intro)>div:first-child{min-width:0;flex:1}
body[data-theme=margin-notes] :is(.rule-title,.lesson-heading h2,.course-intro h1,.library-intro h1){font:650 clamp(52px,5.3vw,78px)/1.02 var(--display);letter-spacing:-1.3px;text-transform:none;color:var(--text);text-shadow:none;transform:none;margin:8px 0 22px;background:none;position:relative;width:fit-content;max-width:100%;padding:0}
body[data-theme=margin-notes] :is(.rule-title,.lesson-heading h2,.course-intro h1,.library-intro h1)::after{content:'';position:absolute;left:1%;right:4%;bottom:-8px;height:7px;border-top:2px solid var(--doodle-blue-ink);border-bottom:1px solid color-mix(in srgb,var(--doodle-blue-ink) 38%,transparent);border-radius:50%;transform:rotate(-1.3deg);pointer-events:none}
body[data-theme=margin-notes] :is(.rule-title,.lesson-heading h2)::before{content:'';position:absolute;width:18px;height:30px;left:-21px;top:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 30'%3E%3Cpath d='m8 3 6 7M2 14l10 2m-5 11 7-6' fill='none' stroke='%23b77189' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-theme=margin-notes] :is(.rule-title span,.lesson-heading h2 span,#lessonTitle span){color:inherit}
body[data-theme=margin-notes] .heading-code{display:none}
body[data-theme=margin-notes] :is(.eyebrow,.lesson-heading .eyebrow,.section-label){font:400 14px/1.35 var(--font);color:var(--muted);letter-spacing:.8px;border:0;background:none;padding-left:0}
body[data-theme=margin-notes] :is(.rule-meaning,.lesson-copy,.overview-meaning,.demo-card p,.reference-meaning,.reference-description,.overview-instruction,.scenario-meaning,.practice-prompt,.practice-feedback,.register-note,.conversation-note,.conversation-context,.conversation-translation){font:400 20px/1.4 var(--font);color:var(--text);max-width:75ch}
body[data-theme=margin-notes] .rule-meaning{font-size:21px!important}
body[data-theme=margin-notes] :is(.reference-heading,.reference-top h3,.reference-top h4,.overview-card h3,.demo-card h3,.compare-card h3,.library-card h2,.lesson-panel h2,.practice-set-card h3){font-family:var(--font);font-size:25px;font-weight:400;font-style:normal;letter-spacing:.2px;color:var(--text);transform:none}
body[data-theme=margin-notes] :is(.lesson-panel h2.rule-title){font:650 clamp(52px,5.3vw,78px)/1.02 var(--display)}
body[data-theme=margin-notes] :is(.overview-grid,.demo-grid,.examples-grid,.reference-grid,.practice-set-grid){gap:36px 26px}
body[data-theme=margin-notes] :is(.overview-card,.demo-card,.reference-card,.compare-card,.library-card,.practice-set-card){padding:24px 22px;min-height:0;margin-top:16px}
body[data-theme=margin-notes] .overview-card .overview-meaning{min-height:0}
body[data-theme=margin-notes] :is(.visual-panel,.reference-card,.demo-card,.overview-card,.compare-card,.library-card,.conversation-panel,.practice-set-card,.practice-exercise,.question-card,.map-inspector,.pattern-detail,.branch-builder,.sentence-board,.question-zone,.flow-detail,.lesson-examples article,.foundation-tool,.routine-builders>article){position:relative;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:4px 7px 3px 6px / 6px 4px 7px 3px;box-shadow:none}
body[data-theme=margin-notes] .mn-framed{isolation:isolate;border:0;background:transparent;box-shadow:none}
body[data-theme=margin-notes] .mn-framed::before{display:none}
body[data-theme=margin-notes] .mn-pencil-frame{position:absolute;inset:0;width:100%;height:100%;fill:none;pointer-events:none;z-index:-1;overflow:visible;color:color-mix(in srgb,var(--mn-tint,var(--line)) 62%,var(--pencil-ink))}
body[data-theme=margin-notes] .mn-pencil-frame path{vector-effect:non-scaling-stroke;stroke:currentColor;stroke-linejoin:round;stroke-linecap:round}
body[data-theme=margin-notes] .mn-frame-main{stroke-width:1.25;opacity:.7}
body[data-theme=margin-notes] .mn-frame-echo{stroke-width:.55;opacity:.4}
/* The exact concave-ended, narrow ribbons from the approved final demo. */
.mn-ribbon-label{display:inline-block;position:relative;isolation:isolate;max-width:100%;padding:2px 16px 3px;line-height:1.25;background:none;border:0;border-radius:0;box-shadow:none;color:var(--text);font-weight:400}
.mn-ribbon-label .mn-ribbon-outline{position:absolute;inset:0 -1px;width:calc(100% + 2px);height:100%;overflow:visible;z-index:-1;pointer-events:none;opacity:1}
.mn-ribbon-outline path{vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.mn-ribbon-shape{fill:color-mix(in srgb,var(--ribbon-color,var(--mn-lavender)) 38%,var(--paper));stroke:color-mix(in srgb,var(--ribbon-color,var(--mn-lavender)) 66%,var(--pencil-ink));stroke-width:1}
.mn-ribbon-echo{fill:none;stroke:var(--pencil-ink);stroke-width:.55;opacity:.23}
.mn-ribbon-wash{fill:none;stroke:var(--ribbon-color,var(--mn-lavender));stroke-width:2;opacity:.24}
body[data-theme=margin-notes] .mn-ribbon-text{font:400 24px/1.25 var(--font);letter-spacing:.2px;text-transform:none}
body[data-theme=margin-notes] :is(.overview-card,.demo-card,.compare-card,.practice-set-card,.library-card)>:is(h2,h3){margin:-40px -8px 16px -7px;position:relative;z-index:1;background:var(--paper);width:fit-content;max-width:calc(100% + 14px)}
body[data-theme=margin-notes] .reference-top{margin:-39px -6px 8px;align-items:center;gap:5px;background:var(--paper);width:fit-content;max-width:calc(100% + 12px)}
body[data-theme=margin-notes] .reference-index{font:15px var(--font);color:var(--muted);background:transparent;border:0}
body[data-theme=margin-notes] .practice-set-card>.eyebrow{margin:0 0 12px}
body[data-theme=margin-notes] .practice-set-card>h3{margin:0 0 18px}
.mn-doodle{width:68px;height:68px;stroke:var(--pencil-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;overflow:visible}
.mn-doodle .mn-pencil-fine{stroke-width:1.1;opacity:.85}
.mn-pencil-echo{stroke:var(--pencil-ink);stroke-width:.75;fill:none;opacity:.42}
.mn-pencil-hatch{stroke:var(--pencil-ink);stroke-width:.65;fill:none;opacity:.5}
body[data-theme=margin-notes] .mn-hero-sketch{flex:0 0 200px;max-width:26%;align-self:center}
body[data-theme=margin-notes] .mn-hero-illustration{width:100%;height:auto;max-height:154px;display:block}
body[data-theme=margin-notes] .mn-caption{display:block;font:600 23px/1.1 var(--display);transform:rotate(2deg);margin:0 0 0 13px;color:var(--doodle-pink-ink)}
body[data-theme=margin-notes] .mn-card-doodle{float:right;width:54px;height:54px;margin:0 0 8px 12px;transform:rotate(6deg);transition:transform .2s ease-out}
body[data-theme=margin-notes] .mn-framed:hover .mn-card-doodle{transform:rotate(1deg)}
body[data-theme=margin-notes] :is(.sentence,.reference-example,.overview-example .sentence,.conversation-sentence,.register-phrase,.selected-example .sentence,.sentence-board .sentence){font:400 27px/1.4 var(--font);letter-spacing:0;transform:none;text-shadow:none;color:var(--text)}
body[data-theme=margin-notes] :is(.overview-example,.selected-example,.decision-event,.flow-context,.flow-leaf,.correction-pair>div,.formula-token,.question-part,.word-token,.connector-map>div,.before-sentence,.table-shell,.panel-label,.time-path,.concept-live,.frequency-instrument,.frequency-reading,.pattern-console){background:var(--raised);color:var(--text);border-color:var(--line);border-radius:4px 6px 3px 5px;box-shadow:none}
body[data-theme=margin-notes] :is(.overview-example,.selected-example,.sentence-board){background-color:var(--paper);background-image:repeating-linear-gradient(transparent 0px,transparent 38px,color-mix(in srgb,var(--line) 46%,transparent) 39px,transparent 40px)}
body[data-theme=margin-notes] :is(.overview-note,.lesson-rule,.demo-note,.teaching-tip,.compare-summary,.course-objectives,.mistake-tip,.practice-unlock){background:var(--panel);color:var(--text);border:1px dashed var(--line);border-left:2px solid var(--doodle-green-ink);border-radius:4px 7px 3px 6px;box-shadow:none;font:400 19px/1.4 var(--font)}
/* The legacy dark cards set their paragraph ink separately from the surface. */
body[data-theme=margin-notes] :is(.overview-note p,.question-card>header>p:last-child){color:var(--text)}
body[data-theme=margin-notes] .correction-pair .bad{color:var(--register-textbook)}
body[data-theme=margin-notes] .correction-pair .good{color:var(--register-natural)}
body[data-theme=margin-notes] :is(.panel-label,.pattern-console,.panel-caption,.micro-note,.demo-head-note,.card-meta,.tip-num,.formula,.lesson-formula,.node-caption,.diagram-route-key){font:400 16px/1.4 var(--font);color:var(--muted);letter-spacing:.3px}
body[data-theme=margin-notes] :is(.panel-label,.pattern-console){border-bottom:1px dashed var(--line);background:var(--paper)}
body[data-theme=margin-notes] .panel-label span{color:inherit}
body[data-theme=margin-notes] :is(.grammar-table,.simple-table,.lesson-table,.grammar-table td,.simple-table td,.lesson-table td,.lesson-table th){color:var(--text);border-color:var(--line);font-family:var(--font);transform:none;box-shadow:none}
body[data-theme=margin-notes] :is(.grammar-table,.simple-table,.lesson-table){background:var(--paper);font-size:19px}
body[data-theme=margin-notes] :is(.grammar-table th,.simple-table th,.lesson-table thead){background:var(--raised);color:var(--text);font:400 17px/1.4 var(--font);letter-spacing:.3px}
body[data-theme=margin-notes] :is(.grammar-table tbody tr,.lesson-table tbody){background:var(--panel)}
body[data-theme=margin-notes] :is(.grammar-table,.selectable-comparison .lesson-table) tbody tr.active{background:color-mix(in srgb,var(--mn-yellow) 32%,var(--paper));color:var(--text);box-shadow:none}
body[data-theme=margin-notes] :is(.grammar-table,.selectable-comparison .lesson-table) tbody tr.active :is(td,th,button,span,mark,b){color:var(--text);border-color:var(--line)}
body[data-theme=margin-notes] :is(.grammar-table td:nth-child(2),.aux-table b,.demo-note strong,.diagram-node[aria-pressed=true]){color:var(--doodle-blue-ink)}
body[data-theme=margin-notes] :is(.branch-node,.diagram-node){font-family:var(--font);color:var(--text);box-shadow:none}
body[data-theme=margin-notes] :is(.branch-node,.diagram-node) .node-outline>*{fill:var(--paper);stroke:var(--pencil-ink);stroke-width:1.1}
body[data-theme=margin-notes] :is(.branch-node.active,.diagram-node[aria-pressed=true]) .node-outline>*{fill:color-mix(in srgb,var(--mn-blue) 35%,var(--paper));stroke:var(--doodle-blue-ink)}
body[data-theme=margin-notes] :is(.branch-wire,.diagram-edge,.branch-connections,.connection-line){stroke:var(--pencil-ink);color:var(--pencil-ink)}
body[data-theme=margin-notes] :is(.branch-wire.selected,.diagram-edge.is-active){stroke:var(--doodle-blue-ink)}
body[data-theme=margin-notes] :is(.form-switch button,.scenario-options button,.branch-tabs button,.pattern-choices button,.practice-set-tabs button,.practice-secondary,.conversation-replies button,.conversation-history button,.section-controls button,.flow-form,.language-picker button,.library-language button,.concept-options button,.frequency-options button,.foundation-tool button,.theme-toggle,.palette-toggle,.lesson-continue,.library-open,.primary,.practice-primary){font-family:var(--font);font-size:18px;line-height:1.2;min-height:38px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:5px 3px 6px 4px / 3px 5px 2px 5px;box-shadow:1px 1px 0 color-mix(in srgb,var(--line) 40%,transparent);transform:none;position:relative}
body[data-theme=margin-notes] :is(.form-switch button[aria-pressed=true],.form-switch button.active,.scenario-options button.active,.scenario-options button[aria-pressed=true],.branch-tabs button[aria-selected=true],.branch-tabs button[aria-pressed=true],.pattern-choices button[aria-pressed=true],.practice-set-tabs button[aria-pressed=true],.flow-form.active,.flow-leaf.active,.section-controls .primary,.practice-primary,.library-open,.lesson-continue,.language-picker button[aria-pressed=true],.library-language button[aria-pressed=true],.concept-options button[aria-pressed=true],.frequency-options button[aria-pressed=true]){background:var(--choice-fill);color:var(--text);border-color:color-mix(in srgb,var(--mn-lavender) 50%,var(--text));box-shadow:1px 1px 0 -0.3px var(--doodle-pink-ink)}
/* Match the approved demo's handwritten graphite primary action. */
body[data-theme=margin-notes] .section-controls #next{background:var(--text);color:var(--paper);border:1px solid var(--pencil-ink);border-radius:6px 3px 5px 2px / 3px 6px 4px 7px;box-shadow:none;font:400 20px/1.2 var(--font)}
body[data-theme=margin-notes] .section-controls #next::after{content:'';position:absolute;inset:2px -2px -2px 1px;border:1px solid var(--pencil-ink);border-radius:4px 7px 3px 6px / 6px 4px 7px 3px;opacity:.22;pointer-events:none}
body[data-theme=margin-notes] .section-controls #next b{font-weight:400}
body[data-theme=margin-notes] .section-controls #back{background:var(--paper);color:var(--text);border-color:var(--line);border-radius:5px 3px 6px 4px}
body[data-theme=margin-notes] :is(.learning-lesson-link,.learning-lesson-group,.learning-collection-toggle){font-family:var(--font);font-size:18px}
body[data-theme=margin-notes] .learning-lesson-link{border-color:var(--line)}
body[data-theme=margin-notes] .learning-lesson-link.is-current{background:var(--choice-fill);color:var(--text);box-shadow:none;border-radius:5px 2px 6px 3px;border-color:var(--line)}
body[data-theme=margin-notes] .lesson-rail :is(.topics,.steps) :is(a,button){font-family:var(--font);font-size:17px;color:var(--text);background:transparent;border-color:var(--line);box-shadow:none}
body[data-theme=margin-notes] .lesson-rail :is(.topics,.steps) :is(a,button)>span{color:inherit}
body[data-theme=margin-notes] .lesson-rail .topics :is(a,button).active,body[data-theme=margin-notes] .learning-lesson-panel .topics :is(a,button).active:not(.flow-nav):not(.practice-nav){background:var(--choice-fill);color:var(--text);border:1px solid color-mix(in srgb,var(--mn-lavender) 50%,var(--text));box-shadow:none;border-radius:5px 2px 6px 3px}
body[data-theme=margin-notes] .lesson-rail .topics .steps a[data-in-group]{font-size:16px}
body[data-theme=margin-notes] :is(.learning-disclosure,.nav-chevron,.learning-collection-toggle>span,.theme-toggle-icon,#navToggle,#navToggle>span){color:var(--text)}
body[data-theme=margin-notes] :is(.library-filter input,.library-filter select,#practiceAnswer,.practice-dialog,.practice-recap){background:var(--paper);color:var(--text);border-color:var(--line);font-family:var(--font);font-size:20px;border-radius:5px 2px 6px 3px}
body[data-theme=margin-notes] #practiceAnswer{background-image:repeating-linear-gradient(transparent 0px,transparent 34px,color-mix(in srgb,var(--line) 46%,transparent) 35px,transparent 36px);line-height:36px}
body[data-theme=margin-notes] .practice-exercise.is-correct{--outcome-ink:var(--register-natural);--outcome-panel:var(--register-natural-surface)}
body[data-theme=margin-notes] .practice-exercise.is-incorrect{--outcome-ink:var(--register-textbook);--outcome-panel:var(--register-textbook-surface)}
body[data-theme=margin-notes] .practice-exercise.is-supported{--outcome-ink:var(--text);--outcome-panel:var(--raised)}
body[data-theme=margin-notes] .practice-exercise:is(.is-correct,.is-incorrect,.is-supported){background:var(--outcome-panel);color:var(--text);border-color:var(--outcome-ink);box-shadow:inset 3px 0 var(--outcome-ink)}
body[data-theme=margin-notes] :is(.register-card,.conversation-line){border-radius:4px 7px 3px 6px;box-shadow:none}
body[data-theme=margin-notes] .register-card{border-color:var(--register-color)}
body[data-theme=margin-notes] :is(.focus-word,.lesson-highlight,.sentence mark,.compare-card mark,.selected-example mark,.formula-token.focus,.lesson-token.is-focus,.word-token.aux){background:var(--mn-yellow);color:#302a1b;border:0;padding:1px 4px 2px;border-radius:3px 2px 5px 3px;box-shadow:none;text-shadow:none;animation:none;box-decoration-break:clone;-webkit-box-decoration-break:clone}
body[data-theme=margin-notes] :is(.focus-word,.lesson-highlight) :is(span,strong,b){color:inherit}
body[data-theme=margin-notes] :is(.outline-svg,.lesson-highlight::before,.lesson-highlight::after,.focus-word::before,.focus-word::after,.sentence mark::before,.sentence mark::after){display:none}
body[data-theme=margin-notes] [data-mn-word]{display:inline-block}
body[data-theme=margin-notes] :is(a,button,summary,input,textarea,select):focus-visible{outline:2px solid var(--doodle-blue-ink);outline-offset:3px}
body[data-theme=margin-notes] .best-lock-icon:not(.is-opening){background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='m5 10 14-.3.2 11-14 .3Z'/%3E%3Cpath d='M12 14v4'/%3E%3C/svg%3E") center/contain no-repeat}
body[data-theme=margin-notes] .unlock-neon{stroke:var(--text)}
body[data-theme=margin-notes] .unlock-key{fill:var(--doodle-blue-ink)}
body[data-theme=margin-notes] .theme-gallery{background:var(--paper);color:var(--text);border-color:var(--line);border-radius:5px 3px 6px 4px}
body[data-theme=margin-notes] .theme-gallery-heading h2{font-family:var(--display);font-size:40px}
body[data-theme=margin-notes] .theme-gallery-close{border-radius:4px 2px 5px 3px}
/* Miniature is independent of the selected surrounding theme. */
.theme-card[data-preview-theme=margin-notes] .theme-preview{font-family:'Patrick Hand',sans-serif}
.theme-card[data-preview-theme=margin-notes] .theme-preview-title{font:600 25px/1.05 'Caveat',cursive;text-transform:none;letter-spacing:0;border-bottom:1px solid var(--doodle-blue-ink);width:fit-content}
.theme-card[data-preview-theme=margin-notes] :is(.theme-preview-nav,.theme-preview-sidebar-title,.theme-preview-copy,.theme-preview-greeting,.theme-preview-sentence,.theme-preview-number){font-family:'Patrick Hand',sans-serif}
.theme-card[data-preview-theme=margin-notes] .theme-preview-example{background:var(--preview-panel);border:1px solid var(--preview-edge);box-shadow:1px 1px 0 color-mix(in srgb,var(--preview-edge) 40%,transparent);margin-top:9px;position:relative}
.theme-card[data-preview-theme=margin-notes] .theme-preview-example-heading{position:relative;isolation:isolate;width:fit-content;max-width:100%;padding:2px 8px;margin:-17px 0 5px;--ribbon-color:var(--mn-lavender)}
.theme-card[data-preview-theme=margin-notes] .theme-preview-example-heading>.mn-ribbon-outline{position:absolute;inset:0;width:100%;height:100%;z-index:-1;overflow:visible}
.theme-card[data-preview-theme=margin-notes] .mn-preview-doodle{float:right;width:30px;height:30px;margin:0 0 3px 5px}
.theme-card[data-preview-theme=margin-notes] .theme-preview-copy{font-size:10px;line-height:1.3}
.theme-card[data-preview-theme=margin-notes] .theme-preview-greeting{font-size:13px;color:var(--preview-panel-text)}
@media(hover:hover){body[data-theme=margin-notes] :is(.form-switch,.scenario-options,.section-controls,.conversation-replies,.practice-actions) button:not(:disabled):hover{outline:1px solid var(--doodle-blue-ink);outline-offset:2px}}
@media(max-width:900px){body[data-theme=margin-notes] :is(.rule-title,.lesson-heading h2,.lesson-panel h2.rule-title){font-size:62px}body[data-theme=margin-notes] .mn-hero-sketch{flex-basis:150px}body[data-theme=margin-notes] .mn-caption{font-size:20px}}
@media(max-width:600px){body[data-theme=margin-notes]{font-size:19px}body[data-theme=margin-notes] .mn-hero-sketch{display:none}body[data-theme=margin-notes] :is(.rule-title,.lesson-heading h2,.lesson-panel h2.rule-title){font-size:52px;letter-spacing:-1px}body[data-theme=margin-notes] :is(.lesson-heading,.course-intro,.library-intro){margin-bottom:34px}body[data-theme=margin-notes] .mn-ribbon-text{font-size:22px}body[data-theme=margin-notes] .mn-ribbon-label{padding:2px 13px 3px}body[data-theme=margin-notes] :is(.overview-card,.demo-card,.reference-card,.compare-card,.library-card,.practice-set-card){padding:24px 17px 20px}body[data-theme=margin-notes] :is(.rule-meaning,.lesson-copy,.overview-meaning,.demo-card p,.reference-meaning,.reference-description){font-size:19px!important}body[data-theme=margin-notes] .mn-card-doodle{width:45px;height:45px;margin-left:8px}body[data-theme=margin-notes] :is(.masthead,.library-header){gap:10px}body[data-theme=margin-notes] :is(.theme-toggle,.palette-toggle,.language-picker button){font-size:16px;min-height:44px}body[data-theme=margin-notes] :is(.grammar-table,.simple-table,.lesson-table) :is(td,th){font-size:16px}body[data-theme=margin-notes] .page-footer{font-size:11px}}
@media(prefers-reduced-motion:reduce){body[data-theme=margin-notes] .mn-doodle{transition:none;transform:none}body[data-theme=margin-notes] [data-mn-word]{animation:none!important;transform:none!important;opacity:1!important}}
@media(forced-colors:active){.mn-ribbon-shape{fill:Canvas;stroke:CanvasText}.mn-ribbon-label{color:CanvasText}body[data-theme=margin-notes] .mn-pencil-frame{color:CanvasText}}

body[data-theme=margin-notes] .rail-foot>.sidebar-sprite{display:none;animation:none}
body[data-theme=margin-notes] .mn-sidebar-doodle{grid-area:2 / 1;width:90px;height:90px;justify-self:center;transform:rotate(-6deg)}
body[data-theme=margin-notes] .lesson-panel.is-entering{animation:none}

/* Card metadata follows the ribbon instead of sharing its line. */
body[data-theme=margin-notes] .overview-card>h3{order:-1}
body[data-theme=margin-notes] .overview-card>.eyebrow{margin:0 0 14px}
body[data-theme=margin-notes] :is(.conversation-explorer h3,.register-comparison h3,.battery-heading,.channel-header .section-label){font:400 24px/1.3 var(--font);text-transform:none;color:var(--text);letter-spacing:0}
body[data-theme=margin-notes] :is(.conversation-speaker,.register-action,.register-tag,.branch-node small,.branch-builder .section-label,.flow-context .section-label){font:400 16px/1.4 var(--font);color:var(--muted);letter-spacing:.3px}
body[data-theme=margin-notes] .register-action{color:var(--register-color)}
body[data-theme=margin-notes] :is(.register-card[data-register-scan]::after,.assembly-connection){display:none}
body[data-theme=margin-notes] :is(.conversation-sentence,.selected-example .sentence,.channel-lab .sentence){font-family:var(--font)}
body[data-theme=margin-notes] :is(.channel-lab,.sentence-lab,.lesson-trail,.concept-card,.concept-response,.sound-practice,.object-board){color:var(--text);background-color:var(--panel);border-color:var(--line);box-shadow:none}
body[data-theme=margin-notes] :is(.sentence-bank button,.sentence-slots button,.sentence-actions button,.dog-actions button){font:400 18px/1.3 var(--font);border-radius:5px 3px 6px 2px;border-color:var(--line);color:var(--text);background:var(--raised)}
body[data-theme=margin-notes] :is(.channel-lab .channel-prompt,.channel-lab .channel-complete,.sentence-lab-hint,.dog-invitation){font:400 18px/1.4 var(--font)}
/* Assessed feedback must stay legible after the separate practice sheet loads. */
body[data-theme=margin-notes] :is(.practice-save-note,.practice-result-label,.practice-review-list b,.practice-inline-status,.practice-form-label,.practice-model small,.practice-progress){color:var(--muted);font-family:var(--font);font-size:17px}
body[data-theme=margin-notes] :is(.practice-progress b,.practice-recap strong,.practice-review-list button>span:first-child,.practice-hint p){color:var(--doodle-blue-ink)}
body[data-theme=margin-notes] #practiceAnswer[readonly]{color:var(--text);opacity:1}
body[data-theme=margin-notes] .practice-exercise:is(.is-correct,.is-incorrect,.is-supported) #practiceAnswer{background-color:var(--paper);color:var(--text);border-color:var(--outcome-ink)}
body[data-theme=margin-notes] :is(.answer-check,.practice-exercise.is-correct .practice-result-label,.practice-review-list .review-correct){color:var(--register-natural)}
body[data-theme=margin-notes] :is(.practice-exercise.is-incorrect .practice-result-label,.practice-review-list .review-incorrect,.practice-dialog .eyebrow,.practice-clause-feedback .bad){color:var(--register-textbook)}
body[data-theme=margin-notes] .practice-exercise.is-supported .practice-result-label{color:var(--doodle-blue-ink)}
body[data-theme=margin-notes] :is(.practice-jump,.practice-review-list,.practice-model,.practice-hint){color:var(--text);background:var(--panel);border-color:var(--line)}
body[data-theme=margin-notes] .practice-jump summary{font:400 18px/1.4 var(--font);color:var(--doodle-blue-ink)}
body[data-theme=margin-notes] :is(.practice-jump button,.practice-review-list button){background:var(--paper);color:var(--text);border:1px solid var(--line);font-family:var(--font);border-radius:4px 2px 6px 3px}
body[data-theme=margin-notes] :is(.practice-jump .jump-correct,.practice-earned){background:var(--register-natural-surface);color:var(--register-natural);border-color:var(--register-natural)}
body[data-theme=margin-notes] .practice-jump .jump-incorrect{background:var(--register-textbook-surface);color:var(--register-textbook);border-color:var(--register-textbook)}
body[data-theme=margin-notes] :is(.practice-dialog h2,.practice-recap h2){font:600 36px/1.15 var(--display);color:var(--text)}
body[data-theme=margin-notes] :is(.practice-dialog p,.practice-recap p,.practice-dialog li){font:400 19px/1.4 var(--font);color:var(--text)}
body[data-theme=margin-notes] :is(#styleCaption,.practice-task-heading label){color:var(--muted)}
body[data-theme=margin-notes] :is(#subject-pronouns,#names-and-noun-phrases) .lesson-table :is(th,td){color:var(--text);font-family:var(--font)}
body[data-theme=margin-notes] :is(#subject-pronouns,#names-and-noun-phrases) .lesson-table-wrap{border-color:var(--line);box-shadow:none}