/* Shared semantic palette. Individual genres change structure as well as color. */
:root {
  color-scheme: light;
  --page: #f3eee4;
  --surface: #fffcf5;
  --raised: #ece4d5;
  --ink: #302a24;
  --muted: #6b5e50;
  --border: #d5c7ae;
  --control-border: #a79578;
  --accent: #71532d;
  --accent-hover: #503a20;
  --on-accent: #fffdf7;
  --focus: #94713d;
  --hover: #eee5d4;
  --selected: #e9dfcb;
  --rank-bg: #f0e7d4;
  --track: #ded4c1;
  --danger: #a33131;
  --notice-bg: #fff0e8;
  --notice-border: #bc7c68;
  --notice-ink: #7b3324;
  --shadow-color: #46382112;
  --panel-shadow: 0 3px 14px var(--shadow-color);
  --panel-radius: 3px;
  --control-radius: 3px;
  --panel-border: 1px;
  --panel-space: 26px;
  --heading-weight: 600;
  --display-font: 'Cormorant Garamond', Georgia, serif;
  --body-font: 'Source Serif 4', Georgia, serif;
  --mono-font: Consolas, 'Courier New', monospace;
  --canvas: linear-gradient(90deg, #a1865710 1px, transparent 1px);
  --canvas-size: 64px 64px;
  --hero-art: radial-gradient(ellipse at 50% 0%, #c9ad7438, transparent 70%);
  --hero-size: cover;
  --hero-radius: 3px;
  /* Existing reader component names are aliases, never a separate palette. */
  --paper: var(--page);
  --card: var(--surface);
  --soft: var(--muted);
  --rule: var(--border);
  --link: var(--accent);
}

:root[data-theme="comedy"] {
  --page: #ffef9c; --surface: #fffdf2; --raised: #ffe3b3;
  --ink: #282229; --muted: #65504f; --border: #332a31; --control-border: #65504f;
  --accent: #9b2e22; --accent-hover: #792219; --on-accent: #fffdf2; --focus: #942b63;
  --hover: #ffe4b9; --selected: #ffddb0; --rank-bg: #fff0c2; --track: #ecd6bc;
  --panel-shadow: 5px 5px 0 #332a31; --panel-radius: 12px; --control-radius: 8px;
  --panel-border: 2px; --heading-weight: 700;
  --display-font: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --body-font: 'DM Sans', 'Segoe UI', sans-serif;
  --canvas: radial-gradient(#9b2e222c 1px, transparent 1px); --canvas-size: 18px 18px;
  --hero-art: radial-gradient(circle at 100% 0, #ffac85 0 90px, transparent 91px);
  --hero-radius: 18px 18px 48px 18px;
}

:root[data-theme="cozy"] {
  --page: #f1eadf; --surface: #fffcf5; --raised: #e6ecdf;
  --ink: #303b30; --muted: #5a6659; --border: #c2cbb7; --control-border: #809074;
  --accent: #3f634b; --accent-hover: #2c4936; --focus: #977050;
  --hover: #e6ecdf; --selected: #e1e9d8; --rank-bg: #edf0de; --track: #d4decc;
  --panel-shadow: 0 6px 20px #565f3910; --panel-radius: 22px; --control-radius: 12px;
  --display-font: 'Fraunces', Georgia, serif; --body-font: 'Nunito Sans', 'Segoe UI', sans-serif;
  --canvas: radial-gradient(ellipse at 0% 0%, #d6b39940, transparent 60%); --canvas-size: cover;
  --hero-art: radial-gradient(ellipse at 98% 100%, #d2dcc3 0 15%, transparent 15.4%), radial-gradient(ellipse at 0 0, #edcbbb60, transparent 60%);
  --hero-radius: 32px 32px 70px 32px;
}

:root[data-theme="fantasy"], :root[data-theme="horror"],
:root[data-theme="litrpg"], :root[data-theme="science-fiction"], :root[data-theme="thriller"] {
  color-scheme: dark;
  --danger: #ffb1a3; --notice-bg: #352126; --notice-border: #a76565; --notice-ink: #ffcabf;
  --shadow-color: #00000035;
}

:root[data-theme="fantasy"] {
  --page: #10251f; --surface: #19362c; --raised: #244336;
  --ink: #f3eddc; --muted: #c3c1a7; --border: #647453; --control-border: #91a17d;
  --accent: #e3c681; --accent-hover: #f5dfa8; --on-accent: #1b3023; --focus: #f3d598;
  --hover: #2a4939; --selected: #354c37; --rank-bg: #2b4230; --track: #415941;
  --panel-radius: 2px; --control-radius: 2px; --panel-space: 28px;
  --display-font: 'Cinzel', Georgia, serif;
  --canvas: radial-gradient(ellipse at 50% 0%, #44744945, transparent 60%); --canvas-size: cover;
  --hero-art: repeating-conic-gradient(from 45deg at 50% 160%, #d2b96a09 0deg 12deg, transparent 12deg 24deg);
  --hero-radius: 60px 60px 2px 2px;
}

:root[data-theme="historical"] {
  --page: #e8dec9; --surface: #f9f1dc; --raised: #e9ddc3;
  --ink: #3a3027; --muted: #6a5943; --border: #b3a081; --control-border: #8b7454;
  --accent: #7b3037; --accent-hover: #60222a; --focus: #87543a;
  --hover: #eddfc2; --selected: #e8d6b8; --rank-bg: #eee1c0; --track: #d6c7a8;
  --panel-radius: 0px; --control-radius: 0px; --panel-shadow: 3px 3px 0 #7060441c;
  --display-font: 'IM Fell English', Georgia, serif; --heading-weight: 400;
  --canvas: repeating-linear-gradient(0deg, #826c3210 0 1px, transparent 1px 5px); --canvas-size: auto;
  --hero-art: linear-gradient(90deg, #9b773512, transparent 30%, transparent 70%, #9b773512);
  --hero-radius: 0px;
}

:root[data-theme="horror"] {
  --page: #141216; --surface: #201d23; --raised: #2c252c;
  --ink: #f0e8de; --muted: #c0b2b4; --border: #61424c; --control-border: #92717b;
  --accent: #f3a19a; --accent-hover: #ffbfb4; --on-accent: #301b21; --focus: #f5c5bb;
  --hover: #37272e; --selected: #3b2930; --rank-bg: #35252a; --track: #4d343c;
  --panel-radius: 0px; --control-radius: 0px; --panel-shadow: 0 8px 25px #00000035;
  --display-font: 'UnifrakturCook', Georgia, serif; --heading-weight: 700;
  --canvas: radial-gradient(ellipse at 50% 0%, #73303d38, transparent 65%); --canvas-size: cover;
  --hero-art: linear-gradient(115deg, transparent 70%, #9e536025 70.1%, transparent 70.6%), linear-gradient(67deg, transparent 80%, #9e53601c 80.1%, transparent 80.8%);
  --hero-radius: 100px 100px 0 0;
}

:root[data-theme="litrpg"] {
  --page: #191329; --surface: #251c39; --raised: #352748;
  --ink: #f2edff; --muted: #c0b4d4; --border: #756195; --control-border: #9b89bb;
  --accent: #bde980; --accent-hover: #d5ffa0; --on-accent: #202a17; --focus: #d8a8ff;
  --hover: #3d2d55; --selected: #413152; --rank-bg: #32382e; --track: #4e405e;
  --panel-radius: 0px; --control-radius: 0px; --panel-border: 2px;
  --panel-shadow: 4px 4px 0 #110d1d; --panel-space: 22px;
  --display-font: 'Rajdhani', 'Segoe UI', sans-serif; --body-font: 'IBM Plex Sans', 'Segoe UI', sans-serif; --heading-weight: 700;
  --canvas: linear-gradient(#a58aca0b 1px, transparent 1px), linear-gradient(90deg, #a58aca0b 1px, transparent 1px); --canvas-size: 28px 28px;
  --hero-art: repeating-linear-gradient(0deg, #b994ed08 0 2px, transparent 2px 8px); --hero-radius: 0px;
}

:root[data-theme="mystery"] {
  --page: #e5ded0; --surface: #faf5e8; --raised: #e9e1cf;
  --ink: #283838; --muted: #57645e; --border: #b4b1a0; --control-border: #79877d;
  --accent: #24595b; --accent-hover: #193e40; --focus: #9a6631;
  --hover: #e2e7d9; --selected: #dbe2d4; --rank-bg: #e4e9d8; --track: #cdd9cc;
  --panel-radius: 0px 12px 2px 2px; --control-radius: 2px; --panel-shadow: 2px 4px 0 #5b644318;
  --display-font: 'Special Elite', 'Courier New', monospace; --body-font: 'IBM Plex Sans', 'Segoe UI', sans-serif; --heading-weight: 400;
  --canvas: radial-gradient(#65736222 .7px, transparent .8px); --canvas-size: 8px 8px;
  --hero-art: repeating-linear-gradient(0deg, transparent 0 31px, #526a5510 31px 32px); --hero-radius: 2px 28px 2px 2px;
}

:root[data-theme="romance"] {
  --page: #f8eaf0; --surface: #fffbfc; --raised: #f2e0e9;
  --ink: #482638; --muted: #795666; --border: #dcbacb; --control-border: #b08a9e;
  --accent: #893c61; --accent-hover: #692846; --focus: #a43d72;
  --hover: #f5dfeb; --selected: #f0d9e4; --rank-bg: #f8e6ee; --track: #e9cfdd;
  --panel-radius: 18px; --control-radius: 24px; --panel-space: 28px;
  --panel-shadow: 0 8px 28px #93476612;
  --display-font: 'Bodoni Moda', Georgia, serif;
  --canvas: radial-gradient(ellipse at 0 10%, #c7789840, transparent 45%), radial-gradient(ellipse at 100% 70%, #e5b5c64a, transparent 50%); --canvas-size: cover;
  --hero-art: radial-gradient(ellipse at 50% 120%, #e8bfd45c, transparent 70%); --hero-radius: 100px 100px 18px 18px;
}

:root[data-theme="science-fiction"] {
  --page: #091b29; --surface: #102c3e; --raised: #193b50;
  --ink: #e8f5ff; --muted: #abc6d6; --border: #3c7188; --control-border: #73a0b4;
  --accent: #86e7f1; --accent-hover: #b0f6fc; --on-accent: #082d39; --focus: #9befff;
  --hover: #20495e; --selected: #214a5a; --rank-bg: #1a3e4c; --track: #2b5269;
  --panel-radius: 2px; --control-radius: 2px; --panel-shadow: 0 0 24px #5ad0e509;
  --display-font: 'Orbitron', 'Segoe UI', sans-serif; --body-font: 'Space Grotesk', 'Segoe UI', sans-serif;
  --canvas: linear-gradient(#75cfe80b 1px, transparent 1px), linear-gradient(90deg, #75cfe80b 1px, transparent 1px); --canvas-size: 48px 48px;
  --hero-art: repeating-radial-gradient(ellipse at 95% 45%, transparent 0 47px, #86e7f118 48px 49px, transparent 50px 90px); --hero-radius: 2px;
}

:root[data-theme="thriller"] {
  --page: #191b1c; --surface: #25292a; --raised: #323738;
  --ink: #f5f2ed; --muted: #bac2bf; --border: #626d6a; --control-border: #909b98;
  --accent: #ffb274; --accent-hover: #ffc99f; --on-accent: #322115; --focus: #ffc388;
  --hover: #3b4240; --selected: #494237; --rank-bg: #3c392f; --track: #4c534f;
  --panel-radius: 0px; --control-radius: 0px; --panel-shadow: none; --panel-space: 22px;
  --display-font: 'Oswald', 'Arial Narrow', sans-serif; --body-font: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  --canvas: none; --hero-art: linear-gradient(120deg, transparent 80%, #ffb2740d 80%); --hero-radius: 0px;
}

:root[data-theme="young-adult"] {
  --page: #eae1ff; --surface: #fcf9ff; --raised: #e3d5fa;
  --ink: #35224f; --muted: #68517e; --border: #987abc; --control-border: #987abc;
  --accent: #6334ac; --accent-hover: #4b2489; --focus: #833dd6;
  --hover: #e9dcff; --selected: #ddccfa; --rank-bg: #edf1cf; --track: #d9c6f2;
  --panel-radius: 2px 24px 2px 2px; --control-radius: 5px; --panel-border: 2px;
  --panel-shadow: 5px 5px 0 #baa1d6; --display-font: 'Syne', 'Segoe UI', sans-serif; --body-font: 'DM Sans', 'Segoe UI', sans-serif; --heading-weight: 700;
  --canvas: linear-gradient(130deg, transparent 70%, #b7a2dc25 70%); --canvas-size: cover;
  --hero-art: linear-gradient(160deg, transparent 68%, #d7ee78 68%); --hero-radius: 2px 48px 2px 2px;
}

:root[data-theme="middle-grade"] {
  --page: #dcf0f5; --surface: #fffcf1; --raised: #e4edd8;
  --ink: #233e48; --muted: #506875; --border: #477b8d; --control-border: #658c9b;
  --accent: #1a6277; --accent-hover: #10495b; --focus: #886222;
  --hover: #e2f0e2; --selected: #daead5; --rank-bg: #fff0b7; --track: #c4dfdf;
  --panel-radius: 24px; --control-radius: 14px; --panel-border: 2px;
  --panel-shadow: 0 5px 0 #86b1ba; --display-font: 'Baloo 2', 'Segoe UI', sans-serif; --body-font: 'Nunito Sans', 'Segoe UI', sans-serif; --heading-weight: 700;
  --canvas: radial-gradient(#4c89952b 2px, transparent 2px); --canvas-size: 38px 38px;
  --hero-art: radial-gradient(circle at 92% 20%, #ffe18d 0 60px, transparent 61px); --hero-radius: 32px 64px 32px 32px;
}

/* Every surface consumes the same identity, including owner sign-in. */
html { background: var(--page); color: var(--ink); font-family: var(--body-font); }
.theme-changing { overflow-anchor: none; }
body { background: var(--canvas) var(--page); background-size: var(--canvas-size); min-height: 100vh; }
::selection { background: var(--accent); color: var(--on-accent); }
a { color: var(--accent); text-underline-offset: .2em; }
h1, h2, .brand-name { font-family: var(--display-font); font-weight: var(--heading-weight); line-height: 1.12; }
h2 { font-size: clamp(1.85rem, 3vw, 2.8rem); letter-spacing: -.025em; }
h3, h4 { color: var(--ink); }
header {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 32px;
  padding: 18px max(28px, calc((100vw - 1344px)/2));
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { min-width: 0; gap: 14px; }
.brand h1, .brand-name { font-size: 1.65rem; letter-spacing: -.02em; }
.mark { width: 54px; height: 54px; flex: 0 0 54px; display: block; background: none; color: var(--accent); border-radius: 0; }
.header-actions { justify-content: flex-end; flex-wrap: wrap; }
.theme-picker { display: flex; flex-direction: column; gap: 3px; margin: 0; width: 182px; justify-self: end; }
.theme-picker > span { color: var(--muted); font: 600 .6875rem/1.3 var(--body-font); letter-spacing: .12em; text-transform: uppercase; }
.theme-picker select { width: 100%; margin: 0; min-height: 40px; font: 600 .875rem/1.4 var(--body-font); padding: 7px 10px; cursor: pointer; }
main { padding-top: 36px; }
.panel, .sample { border-width: var(--panel-border); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); }
.panel { padding: var(--panel-space); }
.panel, .reading-grid > *, .results-column, .setup, .connection-bar > *, .library-editors > * { min-width: 0; }
.hero {
  position: relative; isolation: isolate; min-height: 300px; padding: 44px 48px;
  gap: 28px; border-width: var(--panel-border); border-radius: var(--hero-radius);
  background: var(--hero-art) var(--surface); background-size: var(--hero-size);
  box-shadow: var(--panel-shadow); margin-bottom: 32px;
}
.hero > div { min-width: 0; }
.hero h2 { font-size: clamp(2.4rem, 4.3vw, 3.8rem); max-width: 780px; font-weight: var(--heading-weight); line-height: 1.04; letter-spacing: -.035em; margin: 12px 0 20px; }
.hero .eyebrow { letter-spacing: .19em; font-size: .6875rem; }
.hero p:last-child { font-size: 1rem; line-height: 1.75; }
.cta { font-family: var(--body-font); font-size: .9375rem; border-radius: var(--control-radius); padding: 16px 22px; box-shadow: var(--panel-shadow); white-space: normal; flex-shrink: 0; max-width: 240px; }
.section-heading h3 { font-family: var(--display-font); font-size: 1.6rem; font-weight: var(--heading-weight); letter-spacing: -.02em; }
.eyebrow, .board th, .num, .rank { font-variant-numeric: tabular-nums; }
.board-panel .section-heading { padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.board th { font-size: .75rem; padding-top: 14px; padding-bottom: 14px; }
.board td { padding-top: 17px; padding-bottom: 17px; }
.board th:nth-child(2), .board td:nth-child(2) { min-width: 160px; }
.model-name strong { white-space: normal; }
.score-bar, .score-fill, .mini-bar, .mini-bar span { border-radius: var(--control-radius); }
.score-fill { background: var(--accent); }
.score-row, .badge, .reveal-card, .judge-block, .feedback-text, .empty { border-radius: var(--control-radius); }
.badge { white-space: normal; }
button, .button, input, textarea, select { border-radius: var(--control-radius); }
input, textarea, select { background: var(--surface); color: var(--ink); border-color: var(--control-border); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
select option { background: var(--surface); color: var(--ink); }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
input[type=range] { accent-color: var(--accent); }
.primary:hover, .cta:hover { color: var(--on-accent); }
.primary:disabled { opacity: .65; }
.story-text { font-family: var(--body-font); }
.logs pre, #prompt-content, .prompt-sent pre { font-family: var(--mono-font); }
.vote-panel { box-shadow: 0 4px 24px var(--shadow-color); }
.vote-main .primary { width: 100%; }
.intro { gap: 24px; }
.intro p { margin-top: 10px; }
.reader .reader-back { color: var(--ink); }
.reader-bar { flex-wrap: wrap; }
.reader-title { padding-top: 44px; }
.reader-title h1 { font-size: clamp(2rem, 4vw, 3.5rem); }
.reader .chapter h3 { font-family: var(--body-font); }
footer { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 20px; }

/* Genre composition and material: the identities remain recognizable in grayscale. */
[data-theme=literary] header { border-bottom: 3px double var(--border); }
[data-theme=literary] .hero { text-align: center; flex-direction: column; }
[data-theme=literary] .hero h2 { max-width: 760px; }
[data-theme=literary] .hero p:last-child { max-width: 700px; margin-inline: auto; }
[data-theme=literary] .hero::before { content: ''; width: 54px; border-top: 3px double var(--accent); }
[data-theme=literary] .hero .cta { max-width: none; padding: 13px 26px; }
[data-theme=literary] .panel, [data-theme=literary] .sample { outline: 1px solid var(--border); outline-offset: -7px; }
[data-theme=literary] .reading, [data-theme=literary] .sample-body { padding-inline: 32px; }
[data-theme=comedy] header { border-bottom: 3px solid var(--ink); }
[data-theme=comedy] .hero { border: 3px solid var(--ink); }
[data-theme=comedy] .hero h2 { font-variation-settings: 'wdth' 85; }
[data-theme=comedy] .cta { box-shadow: 4px 4px 0 var(--ink); border: 2px solid var(--ink); }
[data-theme=comedy] .badge { border: 1px solid var(--ink); border-radius: 50px; }
[data-theme=comedy] .section-heading h3 { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 7px; }
[data-theme=cozy] .hero { padding-block: 48px; }
[data-theme=cozy] .hero h2 { font-variation-settings: 'SOFT' 100, 'WONK' 1; }
[data-theme=cozy] .panel { outline: 1px dashed var(--border); outline-offset: -8px; }
[data-theme=cozy] .section-heading { border-bottom-style: dashed; }
[data-theme=cozy] .badge, [data-theme=cozy] .cta { border-radius: 24px; }
[data-theme=fantasy] header { border-bottom: 3px double var(--accent); }
[data-theme=fantasy] .hero { flex-direction: column; text-align: center; outline: 1px solid var(--border); outline-offset: -9px; }
[data-theme=fantasy] .hero h2 { font-size: clamp(2rem, 3.7vw, 3.2rem); letter-spacing: .025em; }
[data-theme=fantasy] .hero .cta { max-width: none; }
[data-theme=fantasy] .panel, [data-theme=fantasy] .sample { border-top: 3px double var(--accent); border-bottom: 3px double var(--border); }
[data-theme=fantasy] .section-heading h3 { font-size: 1.25rem; letter-spacing: .055em; }
[data-theme=historical] header { border-bottom: 5px double var(--ink); }
[data-theme=historical] .hero { flex-direction: column; text-align: center; border-block: 4px double var(--ink); }
[data-theme=historical] .hero h2 { font-size: clamp(2.5rem, 4.4vw, 3.8rem); }
[data-theme=historical] .hero .cta { max-width: none; }
[data-theme=historical] .panel { border-top: 3px double var(--ink); }
[data-theme=historical] .board th { text-transform: uppercase; letter-spacing: .06em; }
[data-theme=horror] header { border-bottom: 1px solid var(--accent); }
[data-theme=horror] .hero { text-align: center; flex-direction: column; padding-top: 52px; }
[data-theme=horror] .hero h2 { letter-spacing: 0; font-size: clamp(2.8rem, 5vw, 4.5rem); }
[data-theme=horror] .hero .cta { max-width: none; }
[data-theme=horror] .panel { border-top: 2px solid var(--accent); }
[data-theme=horror] .section-heading h3 { font-size: 1.9rem; }
[data-theme=horror] .reader-title { border-bottom-style: double; border-bottom-width: 4px; }
[data-theme=litrpg] header { border-bottom: 2px solid var(--border); box-shadow: 0 4px 0 #110d1d; }
[data-theme=litrpg] .hero { border-left: 6px solid var(--accent); }
[data-theme=litrpg] .hero h2, [data-theme=litrpg] .section-heading h3 { text-transform: uppercase; letter-spacing: .04em; }
[data-theme=litrpg] .panel { border-top: 4px solid var(--border); }
[data-theme=litrpg] .badge { border: 1px solid var(--accent); font-family: var(--mono-font); }
[data-theme=litrpg] .num, [data-theme=litrpg] .score-value { font-family: var(--mono-font); }
[data-theme=litrpg] .score-fill { background: repeating-linear-gradient(90deg, var(--accent) 0 12px, var(--track) 12px 14px); }
[data-theme=litrpg] .score-value { background: var(--accent); padding-inline: 5px; }
[data-theme=litrpg] .score-value.outside { background: var(--track); }
[data-theme=mystery] .hero { border-top: 8px solid var(--accent); }
[data-theme=mystery] .hero h2 { line-height: 1.17; letter-spacing: -.05em; }
[data-theme=mystery] .panel { border-top: 4px solid var(--accent); }
[data-theme=mystery] .section-heading { border-bottom: 2px dotted var(--border); padding-bottom: 12px; }
[data-theme=mystery] .badge { border: 1px dashed var(--accent); text-transform: uppercase; letter-spacing: .06em; }
[data-theme=mystery] .reader-title { border-bottom-style: dotted; }
[data-theme=romance] header { border-bottom: 1px solid var(--accent); }
[data-theme=romance] .hero { flex-direction: column; text-align: center; }
[data-theme=romance] .hero h2 { font-style: italic; font-synthesis: style; }
[data-theme=romance] .hero .cta { max-width: none; padding-inline: 30px; }
[data-theme=romance] .reader-title { border-bottom: 3px double var(--border); }
[data-theme=romance] .section-heading h3 { font-style: italic; font-synthesis: style; }
[data-theme=science-fiction] header { border-bottom: 1px solid var(--accent); }
[data-theme=science-fiction] .hero { border-left: 3px solid var(--accent); }
[data-theme=science-fiction] .hero h2 { font-size: clamp(1.9rem, 3.1vw, 2.9rem); letter-spacing: -.01em; line-height: 1.25; }
[data-theme=science-fiction] .panel { border-top: 2px solid var(--border); }
[data-theme=science-fiction] .section-heading h3 { font-size: 1.2rem; letter-spacing: .02em; }
[data-theme=science-fiction] .badge { border: 1px solid var(--border); border-radius: 0; }
[data-theme=science-fiction] .score-bar { height: 24px; margin: 2px 0; }
[data-theme=science-fiction] .score-value { line-height: 24px; }
[data-theme=thriller] header { border-bottom: 5px solid var(--accent); }
[data-theme=thriller] .hero { border: 0; border-left: 10px solid var(--accent); min-height: 270px; }
[data-theme=thriller] .hero h2, [data-theme=thriller] .section-heading h3 { text-transform: uppercase; letter-spacing: .01em; }
[data-theme=thriller] .hero h2 { max-width: 620px; }
[data-theme=thriller] .panel { border-width: 0 0 1px; border-top: 3px solid var(--border); }
[data-theme=thriller] .cta { border-bottom: 4px solid var(--ink); }
[data-theme=thriller] .badge { border-left: 3px solid var(--accent); text-transform: uppercase; font-size: .75rem; letter-spacing: .07em; }
[data-theme=young-adult] header { border-bottom: 2px solid var(--accent); }
[data-theme=young-adult] .hero { border-width: 2px; }
[data-theme=young-adult] .hero h2 { font-size: clamp(2.4rem, 4.5vw, 4rem); max-width: 700px; }
[data-theme=young-adult] .cta { box-shadow: 5px 5px 0 #c4de69; }
[data-theme=young-adult] .badge { background: #d7ee78; color: #35224f; border: 1px solid var(--ink); border-radius: 2px 12px 2px 2px; }
[data-theme=young-adult] .section-heading h3 { text-decoration: underline; text-decoration-color: #9fbe39; text-decoration-thickness: 5px; text-underline-offset: 6px; }
[data-theme=middle-grade] header { border-bottom: 3px solid var(--border); }
[data-theme=middle-grade] .hero { border-width: 3px; }
[data-theme=middle-grade] .hero h2 { font-size: clamp(2.5rem, 4.7vw, 4rem); }
[data-theme=middle-grade] .hero .eyebrow { font-size: .75rem; letter-spacing: .09em; }
[data-theme=middle-grade] .badge { border: 2px solid var(--border); border-radius: 16px; background: #fff0b7; color: #233e48; }
[data-theme=middle-grade] .section-heading { border-bottom: 2px dashed var(--border); padding-bottom: 12px; }

@media (max-width: 1100px) {
  header { gap: 20px; }
  .hero { flex-direction: column; align-items: flex-start; padding: 36px; }
  .hero .cta { max-width: none; }
  [data-theme=literary] .hero, [data-theme=fantasy] .hero, [data-theme=historical] .hero,
  [data-theme=horror] .hero, [data-theme=romance] .hero { align-items: center; }
}
@media (min-width: 761px) and (max-width: 980px) {
  header { grid-template-columns: minmax(0, 1fr) 182px; }
  .brand { grid-column: 1; grid-row: 1; }
  .theme-picker { grid-column: 2; grid-row: 1; }
  .header-actions {
    grid-column: 1 / -1; grid-row: 2; justify-content: flex-start;
    padding-top: 12px; border-top: 1px solid var(--border);
  }
}
@media (max-width: 760px) {
  header { grid-template-columns: minmax(0, 1fr) 158px; gap: 12px; padding: 14px 16px; }
  .brand { grid-column: 1; grid-row: 1; gap: 8px; }
  .brand h1, .brand-name { font-size: 1.2rem; }
  .mark { width: 38px; height: 38px; flex-basis: 38px; }
  .theme-picker { grid-column: 2; grid-row: 1; width: 158px; }
  .theme-picker select { padding: 7px; font-size: .8125rem; }
  .header-actions { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; gap: 20px; padding-top: 10px; border-top: 1px solid var(--border); }
  main { padding: 24px 16px; }
  .hero, [data-theme=cozy] .hero, [data-theme=horror] .hero { padding: 30px 22px; min-height: 0; }
  .hero h2 { margin-block: 10px 16px; }
  .hero .cta { align-self: stretch; text-align: center; }
  .hero p:last-child { font-size: .9375rem; }
  .panel { padding: 20px; }
  .section-heading { flex-wrap: wrap; gap: 10px; }
  .section-heading h3 { font-size: 1.4rem; }
  .intro { flex-direction: column; align-items: stretch; }
  .intro .button { white-space: normal; text-align: center; }
  .reading, [data-theme=literary] .reading, [data-theme=literary] .sample-body { padding-inline: 20px; }
  .sample-body { padding-inline: 18px; }
  .reader-bar { align-items: flex-start; }
  .reader-shell { padding-inline: 16px; }
  .three { grid-template-columns: 1fr; }
  .queue-item { flex-wrap: wrap; }
  .breakdown { grid-template-columns: 1fr; }
  .reading-size input { width: 105px; }
  footer { margin-inline: 16px; padding-inline: 0; }
}
@media (max-width: 380px) {
  header { grid-template-columns: minmax(0, 1fr) 142px; padding-inline: 12px; gap: 8px; }
  .theme-picker { width: 142px; }
  .brand h1, .brand-name { font-size: 1rem; }
  .mark { width: 30px; height: 30px; flex-basis: 30px; }
  .reader-bar { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .panel, .hero, .sample, header { border: 1px solid CanvasText; box-shadow: none; }
  .score-fill, .mini-bar span { background: Highlight; forced-color-adjust: none; }
  .score-value { color: HighlightText; }
}

/* Illustrated genre identities. All artwork is original, local, and decorative.
   Keep reading panels opaque; artwork never sits beneath story or table text. */
:root {
  --genre-art: url('/theme-art/literary.svg');
  --genre-symbol: url('/theme-art/literary-icon.svg');
  --genre-atmosphere: .18;
}
:root[data-theme=comedy] {
  --genre-art: url('/theme-art/comedy.svg');
  --genre-symbol: url('/theme-art/comedy-icon.svg');
  --genre-atmosphere: .16;
}
:root[data-theme=cozy] {
  --genre-art: url('/theme-art/cozy.svg');
  --genre-symbol: url('/theme-art/cozy-icon.svg');
}
:root[data-theme=fantasy] {
  --genre-art: url('/theme-art/fantasy.svg');
  --genre-symbol: url('/theme-art/fantasy-icon.svg');
  --genre-atmosphere: .42;
}
:root[data-theme=historical] {
  --genre-art: url('/theme-art/historical.svg');
  --genre-symbol: url('/theme-art/historical-icon.svg');
  --genre-atmosphere: .24;
}
:root[data-theme=horror] {
  --genre-art: url('/theme-art/horror.svg');
  --genre-symbol: url('/theme-art/horror-icon.svg');
  --genre-atmosphere: .4;
}
:root[data-theme=litrpg] {
  --genre-art: url('/theme-art/litrpg.svg');
  --genre-symbol: url('/theme-art/litrpg-icon.svg');
  --genre-atmosphere: .28;
}
:root[data-theme=mystery] {
  --genre-art: url('/theme-art/mystery.svg');
  --genre-symbol: url('/theme-art/mystery-icon.svg');
}
:root[data-theme=romance] {
  --genre-art: url('/theme-art/romance.svg');
  --genre-symbol: url('/theme-art/romance-icon.svg');
}
:root[data-theme=science-fiction] {
  --genre-art: url('/theme-art/science-fiction.svg');
  --genre-symbol: url('/theme-art/science-fiction-icon.svg');
  --genre-atmosphere: .38;
}
:root[data-theme=thriller] {
  --genre-art: url('/theme-art/thriller.svg');
  --genre-symbol: url('/theme-art/thriller-icon.svg');
  --genre-atmosphere: .36;
}
:root[data-theme=young-adult] {
  --genre-art: url('/theme-art/young-adult.svg');
  --genre-symbol: url('/theme-art/young-adult-icon.svg');
  --genre-atmosphere: .2;
}
:root[data-theme=middle-grade] {
  --genre-art: url('/theme-art/middle-grade.svg');
  --genre-symbol: url('/theme-art/middle-grade-icon.svg');
}

body { position: relative; isolation: isolate; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--genre-art) right top / max(100vw, 1440px) auto no-repeat;
  opacity: var(--genre-atmosphere);
  mask-image: linear-gradient(90deg, #000 0%, transparent 28%, transparent 72%, #000 100%);
}
header { position: relative; isolation: isolate; }
header::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--genre-art) 42% 45% / 720px auto no-repeat;
  opacity: .16; mask-image: linear-gradient(90deg, transparent 15%, #000 45%, transparent 78%);
}
.mark {
  width: 62px; height: 62px; flex-basis: 62px; padding: 5px;
  background: var(--raised); border: 1px solid var(--border); border-radius: 12px;
}
[data-theme=fantasy] .mark, [data-theme=historical] .mark,
[data-theme=horror] .mark { border-radius: 30px 30px 3px 3px; }
[data-theme=litrpg] .mark, [data-theme=thriller] .mark { border-radius: 0; }
[data-theme=romance] .mark { border-radius: 50%; }

:root[data-theme] .hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-content: center; justify-items: start; align-items: center;
  gap: 26px 0; min-height: 440px; padding: 44px 48px;
  text-align: left; background: var(--surface); overflow: hidden;
}
:root[data-theme] .hero::before { content: none; }
.hero::after {
  content: ''; position: absolute; inset: 0 0 0 49%; z-index: -1; pointer-events: none;
  background: var(--genre-art) center / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 18%);
}
.hero > div { grid-column: 1; grid-row: 1; }
:root[data-theme] .hero h2 { max-width: 650px; }
:root[data-theme] .hero p:last-child { margin-inline: 0; }
:root[data-theme] .hero .cta { grid-column: 1; grid-row: 2; max-width: none; }
.hero .eyebrow { display: flex; align-items: center; gap: 10px; }
.hero .eyebrow::before, .board-panel .section-heading h3::before {
  content: ''; display: inline-block; flex: 0 0 auto; width: 28px; height: 28px;
  background: var(--accent); mask: var(--genre-symbol) center / contain no-repeat;
}
.board-panel .section-heading h3 { display: flex; align-items: center; gap: 12px; }
.board-panel .section-heading h3::before { width: 32px; height: 32px; }

/* Smaller illustrated headings carry the identity through comparison and reading. */
main > .intro, .reader-title {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 28px 30px; border: 1px solid var(--border);
  border-radius: var(--panel-radius); background: var(--surface);
}
main > .intro > div { max-width: 74%; }
main > .intro::after, .reader-title::after {
  content: ''; position: absolute; inset: 0 0 0 70%; z-index: -1; pointer-events: none;
  background: var(--genre-art) center / cover no-repeat;
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.reader-title h1, .reader-title p { position: relative; max-width: 75%; overflow-wrap: anywhere; }

@media (min-width: 1600px) {
  body::before { background-size: 100vw auto; }
}
@media (max-width: 1100px) and (min-width: 761px) {
  :root[data-theme] .hero { padding: 36px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .hero::after { left: 52%; }
  :root[data-theme] .hero h2 { font-size: clamp(2.4rem, 4.5vw, 3.4rem); }
}
@media (max-width: 760px) {
  .mark { width: 42px; height: 42px; flex-basis: 42px; padding: 3px; border-radius: 8px; }
  header::before { background-position: 50% 50%; opacity: .1; }
  body::before { opacity: .12; }
  :root[data-theme] .hero {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: 190px auto auto;
    gap: 20px; min-height: 0; padding: 0 24px 28px;
  }
  .hero::after {
    inset: 0 0 auto; height: 210px; background-position: center 46%;
    mask-image: linear-gradient(#000 76%, transparent);
  }
  .hero > div { grid-column: 1; grid-row: 2; }
  :root[data-theme] .hero h2 { font-size: clamp(2rem, 8.5vw, 3rem); margin-block: 12px 16px; }
  :root[data-theme] .hero .cta { grid-column: 1; grid-row: 3; justify-self: stretch; }
  .hero .eyebrow { font-size: .625rem; letter-spacing: .14em; }
  .hero .eyebrow::before { width: 24px; height: 24px; }
  main > .intro, .reader-title { padding: 24px; border-top: 4px solid var(--accent); }
  main > .intro > div, .reader-title h1, .reader-title p { max-width: 100%; }
  main > .intro::after, .reader-title::after { content: none; }
}
@media (max-width: 380px) {
  .mark { width: 34px; height: 34px; flex-basis: 34px; }
  :root[data-theme] .hero { padding-inline: 20px; }
  .board-panel .section-heading h3 { gap: 8px; }
  .board-panel .section-heading h3::before { width: 26px; height: 26px; }
}
@media (forced-colors: active) {
  body::before, header::before, .hero::after, main > .intro::after,
  .reader-title::after, .hero .eyebrow::before, .board-panel .section-heading h3::before { display: none; }
  :root[data-theme] .hero { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding: 28px; }
  .mark { background: Canvas; color: CanvasText; }
}
@media print {
  body::before, header::before, .hero::after, main > .intro::after, .reader-title::after { display: none; }
  :root[data-theme] .hero { display: block; min-height: 0; }
  .hero .cta { margin-top: 20px; }
}

/* Responsive interaction: large controls, readable fields, and contained data tables. */
.table-scroll { max-width: 100%; overscroll-behavior-x: contain; scrollbar-color: var(--control-border) var(--raised); }
.table-scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.table-scroll-hint { display: none; }
:where(.intro, .section-heading, .reading, .sample, .queue-item, .reveal-card, .detail) {
  overflow-wrap: anywhere;
}
.scene-prompt { overflow-wrap: anywhere; }
.intro > div { min-width: 0; }
.intro .button { white-space: normal; flex-shrink: 0; max-width: 100%; }
.queue-item > div, .queue-actions, .reveal-card { min-width: 0; }
.queue-actions { flex-wrap: wrap; }
.reading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px), (pointer: coarse) {
  button, .button, .cta, select, summary, .header-actions a, .reader-back,
  .board td a { min-height: 44px; min-width: 44px; }
  button, .button, .cta, summary { overflow-wrap: anywhere; }
  .header-actions a, .reader-back, .board td a { display: inline-flex; align-items: center; padding-block: 10px; }
  .header-actions { gap: 8px 18px; }
  input:not([type=checkbox]):not([type=radio]), textarea, select,
  .theme-picker select, #prompt-content { font-size: 16px; min-height: 44px; }
  select { max-width: 100%; }
  .theme-picker select { padding-inline: 8px; }
  .text-button, .sort { padding-block: 10px; }
  summary { padding-block: 10px; }
  .choice { min-height: 44px; }
  .choice input { width: 20px; height: 20px; flex: 0 0 20px; }
}
@media (max-width: 900px) {
  .reading-grid { grid-template-columns: minmax(0, 1fr); }
  .reading .story-text { font-size: 18px; }
  .reading { margin-bottom: 0; }
  .reading-grid { margin-bottom: 24px; }
  .reading h3 { overflow-wrap: anywhere; }
  .reading-size { width: 100%; }
  .reading-size input { flex: 1; width: auto; min-width: 0; min-height: 44px; padding: 0; }
  .scene-card-head { align-items: flex-start; }
  .reveal-grid { grid-template-columns: minmax(0, 1fr); }
  .table-scroll-hint { display: block; margin: 0 0 10px; font-size: .875rem; color: var(--muted); }
  .model-toggle { align-items: center; }
  .board th { padding-block: 4px; }
  .queue-actions { gap: 8px 16px; }
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .intro { flex-direction: column; align-items: stretch; }
  .intro .button { text-align: center; }
  .queue-item { flex-wrap: wrap; }
  .run-actions > * { max-width: 100%; }
  .judge-block { padding-inline: 12px; }
  .judge-block > summary { overflow-wrap: anywhere; }
  .criteria { table-layout: fixed; }
  .criteria td:first-child { overflow-wrap: anywhere; }
  .criteria td.num { width: 80px; padding-left: 8px; }
}
@media (max-width: 760px) {
  header { grid-template-columns: minmax(0, 1fr) 176px; }
  .theme-picker { width: 176px; }
  .breakdown, .breakdown + .help { max-width: calc(100vw - 104px); }
  .criterion { grid-template-columns: minmax(0, 1fr) 44px; gap: 6px 10px; }
  .criterion-name { grid-column: 1 / -1; overflow-wrap: anywhere; }
  .criterion .mini-bar { grid-column: 1; }
  .criterion strong { grid-column: 2; }
}
@media (max-width: 480px) {
  .vote-secondary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vote-panel .run-actions > * { width: 100%; text-align: center; }
  .reader-bar { align-items: stretch; }
}
@media (max-width: 380px) {
  header { grid-template-columns: minmax(0, 1fr) 166px; }
  .theme-picker { width: 166px; }
}
@media (max-width: 900px), (max-height: 650px) {
  .vote-panel { position: static; }
}
@media (min-width: 901px) and (max-width: 1200px) {
  .table-scroll-hint { display: block; margin: 0 0 10px; font-size: .875rem; color: var(--muted); }
}

/* Markdown in samples and comparison scenes inherits the genre theme. Headings stay
   close to the body size so chapter text reads at the same scale as the page. */
.rich-text { white-space: normal; overflow-wrap: anywhere; }
.rich-text > :first-child { margin-top: 0; }
.rich-text > :last-child { margin-bottom: 0; }
.rich-text p { margin: 0 0 1em; }
.rich-text :is(h4, h5, h6) {
  font-family: inherit; color: var(--ink); font-weight: 700; line-height: 1.35;
  text-transform: none; letter-spacing: normal; border: 0;
  margin: 1.4em 0 .65em; padding: 0;
}
.rich-text h4 { font-size: 1.125em; }
.rich-text h5 { font-size: 1.0625em; }
.rich-text h6 { font-size: 1em; }
.rich-text :is(em, i) { font-synthesis: style; }
.rich-text :is(strong, b) { font-weight: 700; }
.rich-text :is(ul, ol) { margin: 0 0 1em; padding-left: 1.5em; }
.rich-text li + li { margin-top: .3em; }
.rich-text li > :is(ul, ol) { margin-block: .35em 0; }
.rich-text blockquote {
  margin: 1em 0; padding: .15em 0 .15em 1em;
  border-left: 3px solid var(--accent); color: inherit;
}
.rich-text blockquote > :last-child { margin-bottom: 0; }
.rich-text hr { width: 35%; margin: 1.75em auto; border: 0; border-top: 1px solid var(--border); }
.rich-text code { font-family: var(--mono-font); font-size: .875em; background: var(--raised); padding: .1em .25em; border-radius: 3px; }
.rich-text pre { margin: 1em 0; padding: 1em; background: var(--raised); border-radius: var(--control-radius); white-space: pre-wrap; overflow-wrap: anywhere; }
.rich-text pre code { padding: 0; background: none; }
.rich-text .table-scroll { margin-block: 1em; }
.rich-text table { min-width: 100%; font-size: .9em; }
.rich-text th, .rich-text td { padding: .6em .75em; text-align: left; min-width: 100px; }
.rich-text [data-align=left] { text-align: left; }
.rich-text [data-align=center] { text-align: center; }
.rich-text [data-align=right] { text-align: right; }

.benchmark-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; width: 280px; max-width: 100%; }
.benchmark-actions button { white-space: normal; }
.intro .benchmark-actions p { font-size: .8125rem; }
@media (max-width: 900px) {
  .benchmark-actions { width: 100%; }
}