/* Six reference-driven skins. Presentation only: shared DOM, events and round state. */
html[data-theme] {
  --surface: #fffdf5; --surface-strong: #ffffff; --surface-soft: #f1f5ef; --field: #fffef9;
  --ink: #173d4d; --ink-2: #285a68; --ink-3: #536d73; --paper: #fff9eb;
  --mint: #53c4ab; --mint-deep: #216e83; --coral: #c14e64; --coral-deep: #a63652;
  --amber: #ffda83; --amber-deep: #805511; --sky: #81cee5;
  --line: #d6e2dc; --action-text: #fff; --action-a: #1e6589; --action-b: #268568;
  --success: #216645; --success-bg: #e5f5e9; --warning: #805211; --warning-bg: #fff2d5;
  --danger: #a73136; --danger-bg: #fff0f0;
  --rail-a: #fff9eb; --rail-b: #ecf7f0; --rail-c: #fcf6dd;
  --stage-a: #fffdf3; --stage-b: #ecf8f7;
  --rail-glow-1: #b9e9dc55; --rail-glow-2: #ffe3a544;
  --stage-glow-1: #92dbeb33; --stage-glow-2: #ffdc8b22;
  --rail-surface: var(--surface); --rail-surface-strong: var(--surface-strong);
  --rail-text: var(--ink); --rail-muted: var(--ink-3); --rail-border: var(--line);
  --rail-grid: #57939012; --rail-shadow: #263a4120;
  --action-edge: #16495f; --action-shadow: #28637a30;
  --shadow: 0 18px 48px #263a411a;
  --home-panel: #fffff3ed; --home-nav: #fffff3f0; --home-edge: #e6ddc4;
  --home-nav-active: linear-gradient(110deg, #248397, #298866);
  --home-active-text: #fff; --home-heading: var(--ink);
  color-scheme: light;
}
html[data-theme="ocean"] {
  --ink: #173d4d; --ink-2: #285a68; --ink-3: #536d73; --surface: #fffdf5; --paper: #fff9eb;
}
html[data-theme="sky"] {
  --ink: #583b44; --ink-2: #86435d; --ink-3: #725e67;
  --paper: #fff0ed; --surface: #fffaf7; --surface-soft: #ffedea; --field: #fffafa;
  --mint: #9bd9b6; --mint-deep: #a6395c; --coral: #c54666; --coral-deep: #a52a4b;
  --amber: #ffe391; --sky: #a4dee1; --line: #eed3d8;
  --rail-a: #ffe6e6; --rail-b: #e7fbef; --rail-c: #fff5dc;
  --stage-a: #fff1f3; --stage-b: #f4ffeb; --rail-grid: #d8869a14;
  --rail-glow-1: #ffadbd44; --rail-glow-2: #abefd24d;
  --stage-glow-1: #9fe5d033; --stage-glow-2: #ffe1a866;
  --action-a: #ae3558; --action-b: #b75038; --action-edge: #982c4b;
  --action-shadow: #d25b7730;
  --home-panel: linear-gradient(120deg, #ffe6bcf5, #ffb8d7ee);
  --home-nav: #ffffffeb; --home-edge: #fffdf2;
  --home-nav-active: linear-gradient(120deg, #fff8ad, #ffe57a);
  --home-active-text: #694126; --home-heading: #d43c5a;
}
html[data-theme="forest"] {
  --ink: #304631; --ink-2: #486042; --ink-3: #5c684f;
  --paper: #f6efd9; --surface: #fffbec; --surface-strong: #fffdf5; --surface-soft: #e9ead5; --field: #fffcef;
  --mint: #9eb984; --mint-deep: #426b44; --coral: #a9523c; --coral-deep: #954331;
  --amber: #eaca85; --sky: #a1c7b2; --line: #d7d9bb;
  --rail-a: #e5ead1; --rail-b: #f4edda; --rail-c: #e9e6c8;
  --stage-a: #fffae9; --stage-b: #ecedd9; --rail-grid: #667e3217;
  --rail-glow-1: #b8ce8e4d; --rail-glow-2: #dcc3873d;
  --stage-glow-1: #b5c89433; --stage-glow-2: #eacb992e;
  --action-a: #426b44; --action-b: #61743c; --action-edge: #324b30; --action-shadow: #4b633b33;
  --home-panel: #fff6dddf; --home-nav: #fff9e8eb; --home-edge: #d9caa6;
  --home-nav-active: linear-gradient(135deg, #496e48, #697a44);
}
html[data-theme="galaxy"] {
  --ink: #fff3d3; --ink-2: #f4d995; --ink-3: #c0cde2;
  --paper: #081b36; --surface: #152d4a; --surface-strong: #1c3858; --surface-soft: #203953; --field: #0b203b;
  --mint: #f7c870; --mint-deep: #f1cd88; --coral: #ffb3ba; --coral-deep: #f89d9f;
  --amber: #f7c870; --amber-deep: #ffdb98; --sky: #95c5f7; --line: #4f647b;
  --rail-a: #0b1d35; --rail-b: #142c49; --rail-c: #1c2941;
  --stage-a: #07162d; --stage-b: #142d4f; --rail-grid: #e9c88a12;
  --rail-glow-1: #809edb22; --rail-glow-2: #edbc5520;
  --stage-glow-1: #407ec133; --stage-glow-2: #ddaa4219;
  --action-text: #3e2c13; --action-a: #ffe4a6; --action-b: #e9b961; --action-edge: #87602b; --action-shadow: #e7b56333;
  --success: #98e7bb; --success-bg: #193d34; --warning: #ffe0a2; --warning-bg: #463a25;
  --danger: #ffbec0; --danger-bg: #472a37;
  --home-panel: linear-gradient(130deg, #26405eeb, #0d2544df);
  --home-nav: linear-gradient(100deg, #53607877, #21354cbb); --home-edge: #d5b87b6b;
  --home-nav-active: linear-gradient(120deg, #f6d88d, #edb35d); --home-active-text: #4b3214;
  --shadow: 0 18px 48px #00000044; --rail-shadow: #00000044;
  color-scheme: dark;
}
html[data-theme="sports"] {
  --ink: #eef6ff; --ink-2: #b9e9ff; --ink-3: #b0c9df;
  --paper: #071b34; --surface: #123254; --surface-strong: #193c5c; --surface-soft: #173e5e; --field: #0b2542;
  --mint: #7bdfff; --mint-deep: #91e0ff; --coral: #ffb5ac; --coral-deep: #ffb5ac;
  --amber: #fbd397; --amber-deep: #fbd397; --sky: #77c9ff; --line: #49728f;
  --rail-a: #081d37; --rail-b: #123550; --rail-c: #0c203d;
  --stage-a: #0a1d35; --stage-b: #102f49; --rail-grid: #7bddff18;
  --rail-glow-1: #238fde2b; --rail-glow-2: #39dbf423;
  --stage-glow-1: #3dbdec29; --stage-glow-2: #4485da22;
  --action-text: #163448; --action-a: #a3e9ff; --action-b: #70c9ef; --action-edge: #287493; --action-shadow: #58c7ff33;
  --success: #98e7bb; --success-bg: #193d34; --warning: #ffe0a2; --warning-bg: #463a25;
  --danger: #ffbec0; --danger-bg: #472a37;
  --home-panel: linear-gradient(135deg, #193f61ed, #0b213ae8);
  --home-nav: linear-gradient(150deg, #264d71e8, #0c2848e8); --home-edge: #7fcfff9c;
  --home-nav-active: linear-gradient(135deg, #b0efff, #64beeb); --home-active-text: #163448;
  --shadow: 0 18px 48px #00000044; --rail-shadow: #00000044;
  color-scheme: dark;
}
html[data-theme="sunny"] {
  --ink: #5c3322; --ink-2: #805139; --ink-3: #80644e;
  --paper: #faf0df; --surface: #fff8e9; --surface-strong: #fffdf6; --surface-soft: #f0e3cc; --field: #fffbee;
  --mint: #a9c591; --mint-deep: #9e4829; --coral: #af4630; --coral-deep: #94361f;
  --amber: #f2cf84; --sky: #96bdc3; --line: #dfc7aa;
  --rail-a: #f1e1c8; --rail-b: #f6eddb; --rail-c: #eae6cd;
  --stage-a: #fff8e9; --stage-b: #f4e7d4; --rail-grid: #b085531b;
  --rail-glow-1: #eec2843d; --rail-glow-2: #bfd2a433;
  --stage-glow-1: #f2d29233; --stage-glow-2: #c2d6b026;
  --action-a: #9e4829; --action-b: #ac5334; --action-edge: #78371f; --action-shadow: #9e482933;
  --home-panel: transparent; --home-nav: #fff8e9; --home-edge: #b58e59;
  --home-nav-active: #fff9db; --home-active-text: #5c3322;
}

/* Shared surfaces propagate the skin to the live question screen and every dialog. */
.draw-card, .answer-main, .example-block, .evaluation-button,
.classroom-controls button, .report-summary article, .report-table-card,
.backup-preview-grid article, .import-table-wrap, .setting-options label,
.select-row select, .select-row button, .help-steps li, .help-topic {
  color: var(--ink); background: var(--surface); border-color: var(--line);
}
.icon-button, .top-button, .mode-switch { color: var(--ink); background: var(--surface); border-color: var(--line); }
.mode-switch button { color: var(--ink-3); }
.mode-switch button[aria-pressed="true"], .primary-button, .launch-button {
  color: var(--action-text); background: linear-gradient(130deg, var(--action-a), var(--action-b));
}
.launch-button small { color: inherit; border-color: currentColor; }
.launch-button.stop { color: var(--danger); background: var(--danger-bg); box-shadow: 0 12px 0 var(--danger), 0 24px 34px var(--action-shadow); }
.evaluation-button:hover, .classroom-controls button:hover, .icon-button:hover, .top-button:hover { background: var(--surface-strong); }
.word-pronunciation, .classroom-controls span, .report-context, .backup-strip,
.secondary-button, .modal-close, .help-intro-icon { color: var(--ink); background: var(--surface-soft); border-color: var(--line); }
.modal-card, .modal-header { color: var(--ink); background: var(--paper); border-color: var(--line); }
.modal-footer { background: var(--paper); }
.setup-column textarea { color: var(--ink); background: var(--field); border-color: var(--line); }
.help-intro { background: linear-gradient(115deg, var(--surface-soft), var(--surface)); }
.select-row .danger-lite { color: var(--danger); background: var(--danger-bg); border-color: var(--line); }
.file-row label, .backup-strip label, .report-table-card .queue-toggle, .import-approval {
  color: var(--success); background: var(--success-bg); border-color: color-mix(in srgb, var(--success) 35%, var(--line));
}
.template-link { color: var(--mint-deep); }
.unit-approval, .import-warnings, .help-notice, .report-table-card .queue-toggle.active,
.import-table-wrap tr.flagged td { color: var(--warning); background: var(--warning-bg); border-color: color-mix(in srgb, var(--warning) 35%, var(--line)); }
.unit-approval small, .import-approval small { color: inherit; }
.evaluation-button.correct > span { color: var(--success); background: var(--success-bg); }
.evaluation-button.review > span { color: var(--warning); background: var(--warning-bg); }
.history-item.correct .history-outcome { color: var(--success); background: var(--success-bg); }
.history-item.review .history-outcome { color: var(--warning); background: var(--warning-bg); }
.mission-kicker b { color: var(--danger); background: var(--danger-bg); }
.round-meters div:nth-child(3) strong { color: var(--success); }
.evaluation-button.reveal > span { color: var(--mint-deep); background: var(--surface-soft); }
.answer-main strong { color: var(--coral-deep); }
.report-summary article:nth-child(3) strong { color: var(--warning); }
.report-table-card th, .import-table-wrap th { color: var(--ink-2); background: var(--surface-soft); }
.report-table-card td, .report-table-card th, .import-table-wrap td, .import-table-wrap th { border-color: var(--line); }
.empty-history { color: var(--ink-3); background: var(--surface); border-color: var(--line); }
.help-note, .help-step-number, .help-topic h3 > span { color: var(--mint-deep); background: var(--surface-soft); }
.shortcut-board { color: var(--ink); background: var(--surface-soft); border: 1px solid var(--line); }
.shortcut-board p, .shortcut-board kbd { color: var(--ink); }
.shortcut-board kbd { border-color: var(--line); background: var(--surface); }
.backup-strip button, .setup-title > div span { color: var(--action-text); background: var(--action-a); }
.end-symbol { color: #573b19; }
.skip-link { color: var(--action-text); background: var(--action-a); }
.card-index, .card-state, .draw-card > p, .mission-intro p, .class-context span,
.evaluation-button small, .classroom-controls small, .launch-dock > p,
.answer-main span, .example-block span, .example-block small,
.setup-title em, .file-row span, .setting-options small, .theme-picker legend small,
.backup-strip > div span, .modal-footer p, .report-summary span, .report-summary small,
.report-heading small, .report-table-card td small, .empty-table td,
.import-summary span, .backup-preview-copy p, .backup-preview-grid span,
.end-modal > p, .end-modal > .text-button { color: var(--ink-3); }
html[data-theme-tone="dark"] .mascot-panel { box-shadow: var(--shadow), inset 0 1px #ffffff18; }
html[data-theme-tone="dark"] .history-item { background: var(--surface); border-color: var(--line); }
html[data-theme-tone="dark"] .rail-button b { color: #4a3318; }
html[data-theme="sunny"] .draw-card, html[data-theme="forest"] .draw-card { border-style: dashed; }
html[data-theme="sports"] .draw-card { box-shadow: 0 0 0 1px #69d5ff28, 0 20px 50px #0004, inset 0 1px #a6e5ff30; }
html[data-theme="galaxy"] .draw-card { border-color: #bb9b5c80; }

/* The artwork is decorative. Every title, form and navigation button remains HTML. */
.home-screen { height: 100dvh; min-height: 0; overflow: hidden; background: var(--paper); }
.home-content { display: block; width: 100%; height: 100%; position: relative; container-type: size; isolation: isolate; }
.home-scene { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity .18s ease; pointer-events: none; user-select: none; }
.home-side-nav, .home-main, .home-hero, .home-copy, .home-mascot-wrap { display: contents; }
.home-side-nav::before { display: none; }
.home-side-nav > *, .home-copy > *, .mascot-bubble { position: absolute; z-index: 1; margin: 0; }
.home-content::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: 23.1%; border-right: 1px solid var(--home-edge); pointer-events: none; }
.home-brand { left: 2.2%; top: 4.8%; width: 19%; height: 7%; min-height: 0; gap: 1cqw; }
.home-brand .brand-orbit { flex: 0 0 3.1cqw; width: 3.1cqw; height: 3.1cqw; }
.home-brand strong { font-size: 1.9cqw; letter-spacing: -.035em; }
.home-brand small { margin-top: .2cqw; font-size: .72cqw; letter-spacing: .2em; }
.home-class-card { left: 2%; top: 14%; width: 19%; height: 12.4%; min-height: 0; padding: 1.1cqw; gap: 1cqw; grid-template-columns: 4cqw 1fr; border: 1px solid var(--home-edge); border-radius: 1.6cqw; background: var(--home-nav); box-shadow: 0 .7cqw 1.4cqw var(--rail-shadow); }
.home-class-avatar { width: 4cqw; height: 4cqw; font-size: 2.5cqw; border-radius: 1.3cqw; background: color-mix(in srgb, var(--coral) 10%, var(--surface)); }
.home-class-card strong { font-size: 1.5cqw; }.home-class-card small { font-size: .85cqw; }
.home-side-nav nav { left: 2%; top: 29%; width: 19%; height: 41%; display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(5, minmax(44px, 1fr)); gap: 1.3cqh; }
.home-side-nav nav button { min-height: 44px; height: 100%; padding: .65cqw 1cqw; gap: .8cqw; border: 1px solid var(--home-edge); border-radius: 1.2cqw; color: var(--ink); background: var(--home-nav); font-size: 1.23cqw; font-weight: 900; box-shadow: 0 .5cqw .9cqw var(--rail-shadow); }
.home-nav-icon { flex: 0 0 2.4cqw; width: 2.4cqw; height: 2.4cqw; border-radius: .7cqw; font-size: 1.55cqw; background: color-mix(in srgb, var(--surface) 50%, transparent); }
.home-nav-arrow { font-size: 1.8cqw; color: inherit; }
.home-side-nav nav button.is-active { color: var(--home-active-text); background: var(--home-nav-active); border-color: var(--home-edge); }
.home-side-nav nav button:hover { background: var(--surface-strong); border-color: var(--mint-deep); transform: translateY(-2px); }
.home-side-nav nav button:active { transform: translateY(1px); }
.home-side-nav nav button:focus-visible, .home-toolbar button:focus-visible { outline: 3px solid var(--mint-deep); outline-offset: 3px; }
.home-side-nav nav button.is-active:hover { background: var(--home-nav-active); filter: brightness(1.08); }
.home-toolbar { left: 2%; top: 73%; width: 19%; height: 7%; gap: .7cqw; }
.home-toolbar button { min-height: 44px; height: 100%; padding: .5cqw; border-radius: 1cqw; color: var(--ink); background: var(--home-nav); border-color: var(--home-edge); font-size: .92cqw; }
.home-side-note { left: 2%; bottom: 3%; width: 19%; padding: 0; font-size: .72cqw; }
.home-kicker { left: 41.5%; top: 12.7%; width: 18.5%; color: #fffcec; font: 900 1.7cqw/1.1 "Trebuchet MS", "Segoe UI", sans-serif; text-align: center; letter-spacing: -.03em; text-shadow: 0 2px 2px #10364a66; }
.home-copy h1 { left: 26%; top: 29%; width: 40%; margin: 0; font-size: 4.85cqw; line-height: 1.15; letter-spacing: -.055em; white-space: nowrap; color: var(--home-heading); text-wrap: nowrap; }
.home-copy h1 span { font-size: 1em; color: inherit; white-space: nowrap; }
.home-copy > .home-subtitle { left: 26%; top: 53.5%; width: 40%; max-width: none; margin: 0; color: var(--ink-2); font-size: 1.19cqw; line-height: 1.8; }
.home-password { left: 26%; top: 61%; width: 40%; max-width: none; min-height: 16%; margin: 0; padding: 1.25cqw 1.45cqw; border: 1px solid var(--home-edge); border-radius: 2cqw; background: var(--home-panel); box-shadow: 0 .8cqw 1.8cqw var(--rail-shadow), inset 0 1px #fff5; }
.home-password label { margin: 0 0 .65cqw; font-size: 1.08cqw; color: var(--ink); }
.password-row { display: flex; flex-direction: row; align-items: stretch; gap: 1cqw; }
.password-row input { width: 0; min-width: 0; min-height: max(44px, 6cqh); padding: 0 1cqw; font-size: 1.15cqw; border: 1px solid color-mix(in srgb, var(--home-edge) 70%, var(--mint-deep)); border-radius: 1.15cqw; color: var(--ink); background: var(--field); box-shadow: inset 0 .15cqw .45cqw var(--rail-shadow); }
.password-row input:focus { outline: 3px solid color-mix(in srgb, var(--mint-deep) 50%, transparent); outline-offset: 2px; }
.password-row button { min-height: 44px; padding: 0 1.5cqw; border-radius: 1.15cqw; font-size: 1.15cqw; color: var(--action-text); background: linear-gradient(120deg, var(--action-a), var(--action-b)); box-shadow: 0 .5cqw 1cqw var(--action-shadow), inset 0 1px #fff6; }
.home-password p { position: static; margin: .5cqw 0 0; font-size: max(12px, .8cqw); color: var(--ink-2); }
.home-password p.error { color: var(--danger); }
.home-mascot { display: none; }
.mascot-bubble { left: 87%; right: auto; top: 15%; padding: .65cqw 1cqw; font-size: .85cqw; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 1.3cqw 1.3cqw .3cqw 1.3cqw; box-shadow: 0 .5cqw 1.2cqw var(--rail-shadow); }
.home-footer { display: none; }
html[data-theme="sky"] .home-kicker { left: 26.1%; top: 9.5%; width: 8.5%; font-size: 1.6cqw; line-height: 1; transform: rotate(-10deg); }
html[data-theme="sky"] .home-copy h1 { color: #ce3e5b; -webkit-text-stroke: .5cqw #fffaf3; paint-order: stroke fill; filter: drop-shadow(.12cqw .18cqw 0 #8cbca580); }
html[data-theme="sky"] .home-copy h1 span { color: #b23155; background: none; -webkit-text-fill-color: #b23155; -webkit-text-stroke: .18cqw #fff8f1; text-shadow: .12cqw .12cqw 0 #7db79566; }
html[data-theme="sky"] .mascot-bubble { top: 17%; }
html[data-theme="galaxy"] .home-content::before { background: linear-gradient(120deg, #4c566476, #23375090); backdrop-filter: blur(9px); }
html[data-theme="galaxy"] .home-kicker { left: 29%; top: 15%; width: 20%; padding: .7cqw; border: 1px solid #ffe2a2; border-radius: 4cqw; font-size: 1.35cqw; color: #ffe2a2; box-shadow: 0 0 .7cqw #f4c36c66, inset 0 0 .6cqw #f4c36c33; }
html[data-theme="galaxy"] .home-copy h1 span { color: #ffe2a2; text-shadow: 0 0 .8cqw #e8b96345; }
html[data-theme="galaxy"] .home-password { border-color: #dcc28b; }
html[data-theme-tone="dark"] .mascot-bubble { background: #17304cda; }

/* D: a horizontal classroom bar, Tuantuan on the left, paper workspace on the right. */
html[data-home-layout="forest"] .home-content::before { inset: 0 0 auto; width: 100%; height: 11.5%; background: #fbf4e2f0; box-shadow: 0 3px 10px #5b432524; }
html[data-home-layout="forest"] .home-brand { left: 2%; top: 2.4%; width: 18%; height: 6%; }
html[data-home-layout="forest"] .home-brand strong { font-size: 1.65cqw; }
html[data-home-layout="forest"] .home-side-nav nav { left: 22%; top: 2.5%; width: 53%; height: 6.5%; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr; gap: .5cqw; }
html[data-home-layout="forest"] .home-side-nav nav button { justify-content: center; padding: .4cqw; gap: .3cqw; font-size: 1cqw; border-radius: .7cqw; }
html[data-home-layout="forest"] .home-nav-icon { flex-basis: 1.6cqw; width: 1.6cqw; height: 1.8cqw; font-size: 1.2cqw; background: transparent; }
html[data-home-layout="forest"] .home-nav-arrow { display: none; }
html[data-home-layout="forest"] .home-toolbar { left: 77%; top: 2.5%; width: 21%; height: 6.5%; }
html[data-home-layout="forest"] .home-toolbar button { font-size: 1cqw; border-radius: .7cqw; }
html[data-home-layout="forest"] .home-class-card { left: 18%; top: 85%; width: 22%; height: 9%; min-height: 62px; grid-template-columns: 3cqw 1fr; background: #fff8e8ed; }
html[data-home-layout="forest"] .home-class-avatar { width: 3cqw; height: 3cqw; font-size: 2cqw; }
html[data-home-layout="forest"] .home-class-card strong { font-size: 1.25cqw; }
html[data-home-layout="forest"] .home-kicker { left: 59%; top: 18%; width: 16%; font-size: 1.35cqw; color: #6b5535; text-shadow: none; }
html[data-home-layout="forest"] .home-copy h1 { left: 47%; top: 29%; width: 43%; font-size: 4.65cqw; color: #35462e; font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif; letter-spacing: -.04em; }
html[data-home-layout="forest"] .home-copy > .home-subtitle { left: 47%; top: 52%; width: 42%; }
html[data-home-layout="forest"] .home-password { left: 47%; top: 60%; width: 41%; padding: 1.4cqw 1.7cqw; border: 2px solid #d6c59f; border-radius: 1.4cqw; }
html[data-home-layout="forest"] .password-row { flex-direction: column; gap: .8cqw; }
html[data-home-layout="forest"] .password-row input { width: 100%; flex: auto; min-height: max(44px, 6.5cqh); }
html[data-home-layout="forest"] .password-row button { min-height: max(44px, 6.5cqh); }
html[data-home-layout="forest"] .mascot-bubble { left: 13%; top: 23%; }
html[data-home-layout="forest"] .home-side-note { display: none; }

/* E: flight-deck navigation lives on the bottom console, not a recolored sidebar. */
html[data-home-layout="cockpit"] .home-content::before { display: none; }
html[data-home-layout="cockpit"] .home-brand { left: 2%; top: 2%; width: 18%; height: 6%; }
html[data-home-layout="cockpit"] .home-brand strong { font-size: 1.55cqw; }
html[data-home-layout="cockpit"] .home-class-card { left: 22%; top: 2%; width: 15%; height: 7%; padding: .55cqw; grid-template-columns: 2.5cqw 1fr; border-radius: .7cqw; box-shadow: none; }
html[data-home-layout="cockpit"] .home-class-avatar { width: 2.5cqw; height: 2.5cqw; font-size: 1.8cqw; border-radius: .6cqw; }
html[data-home-layout="cockpit"] .home-class-card strong { font-size: 1.1cqw; }
html[data-home-layout="cockpit"] .home-class-card small { font-size: .7cqw; margin-top: .15cqw; }
html[data-home-layout="cockpit"] .home-toolbar { left: 79%; top: 2%; width: 19%; height: 6.5%; }
html[data-home-layout="cockpit"] .home-copy h1 { left: 7.5%; top: 24%; width: 38%; font-size: 4.25cqw; }
html[data-home-layout="cockpit"] .home-copy h1 span { color: #fbe5b8; }
html[data-home-layout="cockpit"] .home-copy > .home-subtitle { left: 7.5%; top: 44%; width: 37%; font-size: 1.06cqw; }
html[data-home-layout="cockpit"] .home-kicker { left: 9%; top: 15.5%; width: 18%; font-size: 1.15cqw; padding: .65cqw; color: #abedff; background: #133957; border: 1px solid #7ccdf6; border-radius: 2cqw; }
html[data-home-layout="cockpit"] .home-password { left: 7.5%; top: 52%; width: 37.5%; min-height: 13%; padding: 1cqw 1.2cqw; border-radius: 1cqw; box-shadow: 0 0 .8cqw #58b8ff36, inset 0 0 .8cqw #4a9bdd24; }
html[data-home-layout="cockpit"] .home-side-nav nav { left: 10%; top: 74%; width: 80%; height: 21%; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr; gap: 2cqw; }
html[data-home-layout="cockpit"] .home-side-nav nav button { flex-direction: column; justify-content: center; gap: 1cqh; padding: .8cqw; border-radius: 1.2cqw; font-size: 1.7cqw; box-shadow: inset 0 .2cqw .4cqw #c0ecff40, 0 .5cqw .2cqw #041222, 0 0 1.3cqw #3b99d933; }
html[data-home-layout="cockpit"] .home-nav-icon { flex: 0 0 auto; width: 4cqw; height: 4cqw; font-size: 3cqw; background: transparent; }
html[data-home-layout="cockpit"] .home-nav-arrow, html[data-home-layout="cockpit"] .home-side-note { display: none; }
html[data-home-layout="cockpit"] .mascot-bubble { left: 86%; top: 18%; }

/* F: open exercise book, five real buttons aligned with the outer bookmark tabs. */
html[data-home-layout="scrapbook"] .home-content::before { display: none; }
html[data-home-layout="scrapbook"] .home-brand { left: 2.5%; top: 2.5%; width: 21%; height: 6%; }
html[data-home-layout="scrapbook"] .home-brand strong { font-size: 1.7cqw; }
html[data-home-layout="scrapbook"] .home-class-card { left: 42%; top: 2%; width: 16%; height: 7%; padding: .5cqw; grid-template-columns: 2.5cqw 1fr; border: 0; border-radius: .7cqw; background: #fffaf0e0; box-shadow: none; }
html[data-home-layout="scrapbook"] .home-class-avatar { width: 2.5cqw; height: 2.5cqw; font-size: 1.8cqw; }
html[data-home-layout="scrapbook"] .home-class-card strong { font-size: 1.2cqw; }
html[data-home-layout="scrapbook"] .home-class-card small { font-size: .75cqw; margin-top: .1cqw; }
html[data-home-layout="scrapbook"] .home-toolbar { left: 75%; top: 2.5%; width: 22%; height: 6%; }
html[data-home-layout="scrapbook"] .home-kicker { left: 10.5%; top: 17.5%; width: 8%; font-size: 1.5cqw; line-height: 1; transform: rotate(-8deg); }
html[data-home-layout="scrapbook"] .home-copy h1 { left: 11.5%; top: 33%; width: 33%; font-size: 4cqw; line-height: 1.3; letter-spacing: -.055em; color: #633c28; }
html[data-home-layout="scrapbook"] .home-copy h1 span { color: #a9472a; }
html[data-home-layout="scrapbook"] .home-copy > .home-subtitle { left: 12%; top: 53%; width: 31%; font-size: 1cqw; line-height: 1.6; }
html[data-home-layout="scrapbook"] .home-password { left: 14%; top: 63%; width: 26%; padding: .65cqw; border: 0; border-radius: .5cqw; background: transparent; box-shadow: none; }
html[data-home-layout="scrapbook"] .home-password label { text-align: center; margin-bottom: .8cqw; }
html[data-home-layout="scrapbook"] .password-row { flex-direction: column; gap: 1cqw; }
html[data-home-layout="scrapbook"] .password-row input { width: 100%; flex: auto; min-height: max(44px, 6.5cqh); border: 1px dashed #a97d4d; border-radius: .6cqw; }
html[data-home-layout="scrapbook"] .password-row button { min-height: max(44px, 6.5cqh); border-radius: .6cqw; }
html[data-home-layout="scrapbook"] .home-side-nav nav { left: 83.6%; top: 17%; width: 13.5%; height: 66.2%; gap: 2.1cqh; }
html[data-home-layout="scrapbook"] .home-side-nav nav button { justify-content: center; padding: .5cqw; gap: .3cqw; border-color: transparent; background: transparent; color: #533c2a; box-shadow: none; font-size: 1.2cqw; }
html[data-home-layout="scrapbook"] .home-side-nav nav button:hover, html[data-home-layout="scrapbook"] .home-side-nav nav button.is-active { background: #fff9e249; border-color: #966b3b; box-shadow: inset 0 0 0 2px #fff4c877; }
html[data-home-layout="scrapbook"] .home-nav-icon { background: transparent; font-size: 1.5cqw; }
html[data-home-layout="scrapbook"] .home-nav-arrow, html[data-home-layout="scrapbook"] .home-side-note { display: none; }
html[data-home-layout="scrapbook"] .mascot-bubble { left: 71%; top: 18%; }

/* Failure-safe: art is never required for navigation or unlocking the classroom. */
html[data-art-ready="loading"] .home-scene { opacity: 0; }
html[data-art-ready="false"] .home-scene { display: none; }
html[data-art-ready="false"] .home-kicker { color: var(--ink); text-shadow: none; background: var(--surface); border-radius: 16px; padding: 12px; }
html[data-art-ready="false"] .home-mascot { display: block; position: absolute; right: 5%; top: 20%; width: 26%; height: 55%; }
html[data-art-ready="false"][data-home-layout="forest"] .home-mascot { left: 9%; right: auto; }
html[data-art-ready="false"][data-home-layout="scrapbook"] .home-mascot { right: 18%; }
html[data-art-ready="false"] .home-password { background: var(--surface); }
html[data-art-ready="false"] .home-side-nav nav button { background: var(--surface); color: var(--ink); }

/* Thumbnail selection reuses the original preview / cancel / save transaction. */
.theme-modal { width: min(1120px, 100%); }
.theme-grid { gap: 14px; }
.theme-option { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 7px; border: 2px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
.theme-option > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; background: linear-gradient(135deg, var(--preview-a), var(--preview-b)); }
.theme-option > span:last-child { padding: 10px 9px 8px; }
.theme-option b { font-size: 14px; }.theme-option small { color: var(--ink-3); font-size: 11px; line-height: 1.5; }
.theme-option:has(input:checked) { border-color: var(--mint-deep); }
.theme-option:has(input:checked)::after { width: 28px; height: 28px; color: var(--action-text); background: var(--action-a); font-size: 16px; box-shadow: 0 2px 8px #0003; }
.theme-preview-status { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--surface-soft); color: var(--ink-2); font-size: 13px; }

/* Narrow windows use a readable flowing layout, keeping all seven entries reachable. */
@media (max-width: 1050px), (max-aspect-ratio: 6/5), (max-height: 590px) {
  #homeScreen { height: 100dvh; overflow: auto; }
  #homeScreen .home-content { height: auto; min-height: 100%; padding: 22px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 18px; container-type: inline-size; }
  #homeScreen .home-content::before { display: none; }
  #homeScreen .home-scene { position: fixed; opacity: .13; object-position: center; }
  #homeScreen .home-side-nav > *, #homeScreen .home-copy > *, #homeScreen .mascot-bubble { position: static; inset: auto; width: auto; height: auto; min-height: 0; margin: 0; transform: none; }
  #homeScreen .home-brand { grid-column: 1; gap: 10px; }
  #homeScreen .home-brand .brand-orbit { flex: 0 0 40px; width: 40px; height: 40px; }
  #homeScreen .home-brand strong { font-size: 22px; }#homeScreen .home-brand small { font-size: 10px; }
  #homeScreen .home-class-card { grid-column: 2; grid-template-columns: 44px 1fr; gap: 12px; padding: 10px 14px; border-radius: 16px; background: var(--surface); }
  #homeScreen .home-class-avatar { width: 44px; height: 44px; border-radius: 12px; font-size: 28px; }
  #homeScreen .home-class-card strong { font-size: 17px; }#homeScreen .home-class-card small { font-size: 11px; }
  #homeScreen .home-side-nav nav { grid-column: 1 / -1; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 1fr; gap: 10px; }
  #homeScreen .home-side-nav nav button { min-height: 56px; flex-direction: row; justify-content: center; padding: 8px; gap: 6px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); }
  #homeScreen .home-side-nav nav button.is-active { color: var(--home-active-text); background: var(--home-nav-active); }
  #homeScreen .home-nav-icon { width: 26px; height: 26px; flex: 0 0 26px; font-size: 20px; border-radius: 8px; background: transparent; }
  #homeScreen .home-nav-arrow { display: none; }
  #homeScreen .home-toolbar { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #homeScreen .home-toolbar button { min-height: 44px; padding: 8px; font-size: 13px; border-radius: 12px; background: var(--surface); }
  #homeScreen .home-kicker { grid-column: 1 / -1; justify-self: start; padding: 9px 15px; color: var(--ink-2); background: var(--surface-soft); border: 1px solid var(--line); border-radius: 99px; font-size: 13px; text-shadow: none; box-shadow: none; }
  #homeScreen .home-copy h1 { grid-column: 1 / -1; font-size: clamp(30px, 6.6cqw, 62px); line-height: 1.25; white-space: nowrap; -webkit-text-stroke: 0; filter: none; }
  #homeScreen .home-copy h1 span { font-size: 1em; }
  #homeScreen .home-copy > .home-subtitle { grid-column: 1 / -1; color: var(--ink-2); font-size: 15px; line-height: 1.8; }
  #homeScreen .home-password { grid-column: 1 / -1; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
  #homeScreen .home-password label { margin: 0 0 12px; font-size: 15px; text-align: left; }
  #homeScreen .password-row { flex-direction: row; gap: 12px; }
  #homeScreen .password-row input { flex: 1; width: 0; min-height: 52px; padding: 0 12px; font-size: 16px; border-radius: 12px; }
  #homeScreen .password-row button { min-height: 52px; padding: 0 20px; font-size: 15px; border-radius: 12px; }
  #homeScreen .home-password p { margin-top: 10px; font-size: 13px; }
  #homeScreen .home-mascot { display: block; position: static; grid-column: 1 / -1; justify-self: center; width: 220px; height: 270px; }
  #homeScreen .mascot-bubble, #homeScreen .home-side-note { display: none; }
}
@media (max-width: 640px) {
  #homeScreen .home-content { padding: 18px; gap: 14px; }
  #homeScreen .home-brand { grid-column: 1 / -1; }
  #homeScreen .home-class-card { grid-column: 1 / -1; }
  #homeScreen .home-side-nav nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #homeScreen .home-side-nav nav button:last-child { grid-column: 1 / -1; }
  #homeScreen .password-row { flex-direction: column; }
  #homeScreen .password-row input { width: 100%; flex: auto; }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .theme-option > span:last-child { padding: 8px 3px; }.theme-option b { font-size: 12px; }.theme-option small { font-size: 10px; }
}
@media (forced-colors: active) {
  .home-scene { display: none; }
  .home-side-nav nav button, .home-toolbar button, .home-password, .theme-option { border: 2px solid ButtonText; }
  .home-copy h1, .home-copy h1 span { -webkit-text-stroke: 0; color: CanvasText !important; background: none !important; }
}