: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}
@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;}
/* 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}}
/* Shared by Future Forms, workspace lessons and the standard presentation. */
:root {
  --gold:#ffbd59;
  --folder-stroke:var(--gold);
  --font:'Satoshi',Arial,sans-serif;
  --display:'General Sans','Satoshi',sans-serif;
}

/* Approved light-only Margin Notes demo, November 2026. */
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] {
  /* The public cyberpunk ID stays stable when replacing Neon District. */
  --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;
  /* Light background controls. Larger opacity values make the grid darker. */
  --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;
}

/* Hydra, from the Coral · Phosphor style study. Gold stays reserved for grammar. */
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;
}

/* Moon Garden includes the approved sleepy-cat sprite; the requested pond is lesson-scoped. */
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;
}
.framework-page{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font);}
.framework-page[data-theme=atlas]{}
.framework-page *{box-sizing:border-box;}.framework-page [hidden]{display:none!important;}.framework-page a{color:inherit;text-decoration:none;}.framework-page button,.framework-page input,.framework-page select{font:inherit;}.framework-page button{cursor:pointer;}.framework-page button:disabled{opacity:.5;cursor:default;}.framework-page :is(button,a,input,select,summary):focus-visible{outline:2px solid var(--accent);outline-offset:4px;}.framework-page .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}.framework-page .skip{position:absolute;top:-100px;left:20px;z-index:20;background:var(--gold);color:#21180d;padding:10px;}.framework-page .skip:focus{top:10px;}
.library-shell{width:min(1390px,calc(100% - 64px));margin:auto;}.library-header{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);}.library-brand{display:flex;gap:22px;align-items:center;}.library-brand b{font-size:27px;letter-spacing:2px;color:var(--gold);}.library-brand span{font:10px/1.5 monospace;letter-spacing:1.5px;border-left:1px solid var(--line);padding-left:20px;color:var(--muted);}.library-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}.library-tools>a,.library-language button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--panel);padding:8px 14px;font:600 14px/1.3 var(--font);color:var(--text);}.library-tools a[aria-current=true],.library-language button[aria-pressed=true]{background:var(--gold);color:#21180d;border-color:#b2843e;}.library-language{display:flex;gap:6px;margin-left:10px;}.library-language button{min-width:52px;}.library-eyebrow{font:11px/1.6 monospace;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin:0 0 12px;}.library-intro{padding:64px 0 40px;max-width:900px;}.library-intro h1,.course-intro h1{font:500 clamp(27px,3.96vw,49.5px)/1.12 var(--display);letter-spacing:-1px;margin:0 0 20px;}.library-intro>p:last-child,.course-intro>p:last-child{font-size:18px;line-height:1.7;max-width:880px;color:var(--muted);margin:0;}
.library-filter{display:flex;gap:18px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}.library-filter label{display:grid;gap:8px;font-size:13px;}.library-filter label:first-child{flex:1;}.library-filter input,.library-filter select{background:var(--panel);border:1px solid var(--line);color:var(--text);min-height:48px;padding:10px 14px;width:100%;border-radius:0;}.library-filter select{min-width:130px;}.library-count{font:11px monospace;letter-spacing:1px;color:var(--muted);margin:24px 0 16px;}.library-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px;}.library-card{border:1px solid var(--line);padding:28px;background:var(--panel);position:relative;display:flex;flex-direction:column;max-width:660px;}.library-card:before{position:absolute;left:-1px;top:-1px;width:50px;height:3px;background:var(--gold);content:'';}.card-meta{display:flex;justify-content:space-between;color:var(--accent);font:11px monospace;letter-spacing:1px;}.library-card h2{font:500 27px/1.25 var(--display);margin:28px 0 12px;}.library-card>p{color:var(--muted);margin:0 0 16px;}.library-card ul{margin:0 0 30px;padding-left:20px;color:var(--muted);}.library-open{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding:13px 18px;background:var(--gold);color:#21180d!important;min-height:48px;box-shadow:3px 3px var(--pink);font-weight:600;}.library-open:hover{background:#ffcc7f;}.library-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:24px 0;margin-top:60px;font:10px/1.6 monospace;color:var(--muted);}.draft-banner{border:1px solid #bd914c;background:#ffbd5915;padding:14px 20px;font:12px monospace;margin-top:20px;}
.library-breadcrumb{display:flex;justify-content:space-between;gap:16px;font:12px/1.5 monospace;color:var(--muted);padding:28px 0;}.library-breadcrumb a{color:var(--accent);}.course-intro{padding:14px 0 34px;}.course-layout{display:grid;grid-template-columns:230px minmax(0,1fr);border:1px solid var(--line);align-items:start;background:var(--panel);}.course-sidebar{padding:24px 16px;position:sticky;top:0;}.course-sidebar nav{display:grid;gap:8px;}.course-sidebar a{display:flex;align-items:center;gap:10px;min-height:48px;padding:12px;border:1px solid transparent;border-bottom-color:var(--line);font-size:14px;line-height:1.4;}.course-sidebar a>small{font:10px monospace;flex:none;color:var(--muted);}.course-sidebar a>span[aria-hidden]{margin-left:auto;color:var(--accent);}.course-sidebar a[aria-current=step]{background:var(--gold);color:#21180d;border-color:var(--gold);box-shadow:3px 3px var(--pink);}.course-sidebar a[aria-current=step] :is(small,span[aria-hidden]){color:inherit;}.course-main{min-width:0;border-left:1px solid var(--line);padding:30px;min-height:650px;background-image:linear-gradient(#ffffff02 1px,transparent 1px),linear-gradient(90deg,#ffffff02 1px,transparent 1px);background-size:42px 42px;}.course-objectives{border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:28px;}.course-objectives ul{padding-left:20px;margin:0;color:var(--muted);font-size:14px;}.lesson-panel{position:relative;min-width:0;}.lesson-panel h2{font:500 27px/1.2 var(--display);margin:0 0 24px;}.lesson-panel+.lesson-panel{margin-top:40px;padding-top:24px;border-top:1px solid var(--line);}.is-enhanced .lesson-panel{margin-top:0;padding-top:0;border-top:0;}.lesson-copy{font-size:16.2px;line-height:1.8;margin:18px 0;}.lesson-rule{border:1px solid var(--line);border-left:3px solid var(--gold);padding:22px;margin:24px 0;background:var(--raised);}.lesson-highlight{background:#ffbd590a;color:var(--gold);border:1px solid #a9804460;padding:1px 6px;display:inline-block;position:relative;}.lesson-highlight .outline-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}.outline-svg rect{fill:none;stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke;}.lesson-formula{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:24px 0;}.lesson-token{padding:8px 14px;border:1px solid var(--line);background:var(--raised);}.lesson-token.is-focus{background:var(--gold);color:#21180d;border-color:#b2843e;font-weight:600;}.formula-separator{color:var(--accent);}.lesson-examples{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:18px;margin:24px 0;}.lesson-examples article{border:1px solid var(--line);padding:22px;background:var(--raised);}.lesson-examples article>p:last-child{font-size:19.8px;line-height:1.7;margin:14px 0 0;}.lesson-continue{background:var(--gold);color:#21180d;border:1px solid #b2843e;padding:14px 22px;min-height:48px;margin:30px 0 0;box-shadow:3px 3px var(--pink);}.lesson-table-wrap{max-width:100%;overflow-x:auto;}.lesson-table{width:100%;border-collapse:collapse;font-size:16px;}.lesson-table th,.lesson-table td{padding:16px;border:1px solid var(--line);text-align:left;min-width:140px;}.lesson-table thead{font:12px/1.6 monospace;text-transform:uppercase;letter-spacing:1px;color:var(--accent);}.lesson-table tbody th{font-weight:500;}.lesson-table tbody{background:var(--raised);}
.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);}
.lesson-panel.is-entering{animation:lesson-reveal .28s ease-out;}.lesson-panel.is-entering:before{content:'';position:absolute;left:0;top:-8px;width:100%;height:1px;background:var(--accent);transform-origin:left;animation:lesson-scan .5s ease-out;pointer-events:none;}@keyframes lesson-reveal{from{opacity:.6;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes lesson-scan{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.framework-page[data-theme=atlas] .library-brand b{color:var(--text);box-shadow:inset 0 -4px var(--gold);}.framework-page[data-theme=atlas] .library-card{box-shadow:4px 4px #abb0ab;}.framework-page[data-theme=atlas] .library-open,.framework-page[data-theme=atlas] .lesson-continue{box-shadow:3px 3px #8a938a;}.framework-page[data-theme=atlas] .course-sidebar{background:#d5d9d5;}.framework-page[data-theme=atlas] .course-sidebar a[aria-current=step]{background:#333735;color:#f2f4f5;border-color:#333735;box-shadow:inset 3px 0 var(--gold);}.framework-page[data-theme=atlas] .course-main{background-color:var(--canvas-surface);background-image:var(--canvas-pattern);background-size:var(--canvas-pitch) var(--canvas-pitch);background-position:var(--canvas-position);}.framework-page[data-theme=atlas] .lesson-highlight{background:#fff1d4;color:#523e19;}.framework-page[data-theme=atlas] .diagram-node[aria-pressed=true]{color:#4a3916;}.framework-page[data-theme=atlas] .diagram-node[aria-pressed=true] .node-outline>*{fill:#fff1d4;stroke:#a57628;}.framework-page[data-theme=atlas] .lesson-panel.is-entering:before{height:12px;background:radial-gradient(circle,#333 1.1px,transparent 1.5px) 0 0/20px 12px;}
.framework-page .practice-set-tabs{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0;}.framework-page .practice-set-tabs button{background:var(--raised);color:var(--text);border:1px solid var(--line);padding:10px 14px;min-height:44px;}.framework-page .practice-set-tabs button[aria-pressed=true]{background:var(--gold);color:#21180d;border-color:#b2843e;}.framework-page .practice-nav-buttons{display:flex;justify-content:space-between;gap:12px;margin-top:24px;}.framework-page .practice-load-retry{min-height:44px;background:var(--gold);color:#21180d;border:0;padding:12px 20px;}.framework-page .practice-dialog{max-width:min(580px,calc(100% - 32px));}.framework-page .practice-dialog .practice-actions{display:flex;gap:12px;flex-wrap:wrap;}.framework-page .practice-dialog h2{font:500 24.3px/1.3 var(--display);}.framework-page .practice-dialog p{line-height:1.7;}
@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;}[data-direction=right] .diagram-rank{width:100%;align-items:center;}}
@media(max-width:900px){.course-layout{grid-template-columns:1fr;}.course-sidebar{position:static;border-bottom:1px solid var(--line);}.course-sidebar nav{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));}.course-main{border-left:0;padding:24px;}.library-header{align-items:flex-start;flex-direction:column;padding:18px 0;gap:16px;}.library-tools{width:100%;}.library-language{margin-left:auto;}}
@media(max-width:600px){.library-shell{width:calc(100% - 28px);}.library-brand{gap:12px;}.library-brand span{font-size:8px;padding-left:12px;}.library-intro{padding-top:36px;}.library-intro h1,.course-intro h1{font-size:30.6px;}.library-intro>p:last-child,.course-intro>p:last-child{font-size:15.3px;}.library-card{padding:22px;}.library-filter{gap:10px;}.library-filter select{min-width:100px;}.course-main{padding:20px 14px;}.course-sidebar{padding:18px 12px;}.course-sidebar nav{grid-template-columns:1fr 1fr;}.course-sidebar a{font-size:12px;padding:10px 8px;}.lesson-panel h2{font-size:24.3px;}.lesson-copy{font-size:17px;}.lesson-rule{padding:18px;}.library-footer{flex-direction:column;gap:8px;}.library-breadcrumb{font-size:10px;}.diagram-card{max-width:100%;}.lesson-table th,.lesson-table td{padding:12px;min-width:120px;}}
@media(prefers-reduced-motion:reduce){.framework-page *, .framework-page *:before{animation:none!important;scroll-behavior:auto!important;}}
.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;}.framework-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;}
/* Shared display controls. Every registered style appears in the preview gallery. */
.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}

/* The modal uses the active theme. Its cards each own an isolated token scope. */
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}
}
/* 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}
}
@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}
/* 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}