:root {
  color-scheme: dark;
  --bg: #11110f;
  --surface: #191917;
  --surface-raised: #22221f;
  --field: #10100f;
  --line: #35342f;
  --line-strong: #4a4841;
  --text: #f2efe8;
  --muted: #aaa79f;
  --faint: #74716a;
  --gold: #d7b56d;
  --gold-bright: #f0d38f;
  --red: #b74136;
  --red-bright: #dd6257;
  --success: #5dbb8a;
  --shadow: 0 18px 50px rgba(0,0,0,.28);
  --radius: 14px;
  --font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-copy: Georgia, "Times New Roman", serif;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9e6df;
  --surface: #f7f5f0;
  --surface-raised: #fffefa;
  --field: #fffefa;
  --line: #d1ccc1;
  --line-strong: #afa89a;
  --text: #272521;
  --muted: #69645c;
  --faint: #8e887d;
  --gold: #8d6728;
  --gold-bright: #704b11;
  --red: #a03d34;
  --red-bright: #8c2f28;
  --success: #18794e;
  --shadow: 0 18px 45px rgba(49,43,33,.11);
}

* { box-sizing: border-box; }

html { min-width: 320px; background: var(--bg); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 85% -10%, color-mix(in srgb, var(--red) 16%, transparent), transparent 32rem),
    linear-gradient(115deg, transparent 0 65%, color-mix(in srgb, var(--gold) 3%, transparent) 65% 65.15%, transparent 65.15%),
    var(--bg);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
}

button, textarea, select, input { font: inherit; }
button, select, input[type="radio"], input[type="checkbox"] { cursor: pointer; }
button:focus-visible, textarea:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 55%, transparent);
  outline-offset: 2px;
}

.site-header {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(18px);
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.45rem, 3vw, 2rem); line-height: 1.1; letter-spacing: -.035em; }
h2 { margin-bottom: 0; font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -.02em; }
.eyebrow, .step { margin-bottom: 4px; color: var(--gold); font-size: .75rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.privacy-note { color: var(--muted); font-size: .85rem; }

.icon-button {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--surface-raised);
}
.icon-button:hover { border-color: var(--gold); }
.icon-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }

.splitter-page { width: min(1500px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); }
section { min-width: 0; padding: clamp(24px, 4vw, 52px); }
.composer { border-right: 1px solid var(--line); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.source-count, #pieceSummary { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.source-count strong { color: var(--text); font-size: 1rem; }

#sourceText {
  width: 100%; min-height: 260px; resize: vertical; padding: 20px 22px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--text); background: var(--field);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025), var(--shadow);
  font-family: var(--font-copy); font-size: 1.08rem; line-height: 1.72;
}
#sourceText::placeholder { color: var(--faint); }

.controls { display: grid; grid-template-columns: 1.25fr .7fr 1fr; gap: 18px; margin-top: 24px; }
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend, .advanced summary { margin-bottom: 8px; color: var(--muted); font-size: .78rem; font-weight: 750; letter-spacing: .055em; text-transform: uppercase; }

.segmented { display: flex; width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.segmented label { flex: 1; min-width: 0; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { min-height: 38px; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 10px; border-radius: 7px; color: var(--muted); font-size: .82rem; font-weight: 700; text-align: center; }
.segmented input:checked + span { color: var(--text); background: var(--surface-raised); box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.segmented input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.segmented small { font-size: .72rem; color: var(--gold); }
.compact span { white-space: nowrap; }

.marker-row { display: flex; gap: 8px; }
select, #customMarker, #limit {
  height: 46px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); background: var(--field); padding: 0 12px;
}
select { width: 100%; }
.custom-marker input { width: 64px; text-align: center; }
.hidden { display: none !important; }

.advanced { grid-column: 1 / -1; padding-top: 3px; }
.advanced summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.advanced-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); }
.advanced-panel > label:not(.check-row) { color: var(--muted); font-size: .85rem; }
#limit { width: 86px; }
.check-row { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .85rem; }
.check-row input { accent-color: var(--red); width: 17px; height: 17px; }
.hint { margin: 16px 0 0; color: var(--faint); font-size: .82rem; }
kbd { padding: 2px 6px; border: 1px solid var(--line); border-bottom-color: var(--line-strong); border-radius: 5px; color: var(--muted); background: var(--surface-raised); font-family: var(--font-ui); font-size: .72rem; }

.results { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.results-heading { align-items: center; }
.result-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
button { border: 0; }
.primary-button, .secondary-button, .copy-button { min-height: 42px; border-radius: 9px; font-weight: 800; }
.primary-button { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; color: #fff; background: var(--red); box-shadow: 0 6px 18px color-mix(in srgb, var(--red) 25%, transparent); }
.primary-button:hover:not(:disabled) { background: var(--red-bright); }
.primary-button svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.primary-button kbd { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.25); background: rgba(0,0,0,.16); }
.secondary-button { padding: 0 12px; color: var(--muted); border: 1px solid var(--line); background: transparent; }
.secondary-button:hover:not(:disabled) { color: var(--text); border-color: var(--line-strong); }
button:disabled { cursor: not-allowed; opacity: .42; }

.empty-state { min-height: 350px; display: grid; place-content: center; justify-items: center; color: var(--faint); text-align: center; }
.empty-state p { max-width: 280px; }
.empty-glyph { margin-bottom: 12px; color: var(--gold); font-size: 2rem; opacity: .7; }
.pieces { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: pieces; }
.piece { counter-increment: pieces; display: grid; grid-template-columns: 40px minmax(0,1fr) auto; gap: 12px; align-items: stretch; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-raised); transition: opacity .18s, border-color .18s, transform .18s; }
.piece::before { content: counter(pieces, decimal-leading-zero); display: grid; place-items: start center; padding-top: 10px; color: var(--faint); font-size: .74rem; font-weight: 800; letter-spacing: .07em; }
.piece.sent { opacity: .52; border-color: color-mix(in srgb, var(--success) 45%, var(--line)); }
.piece.current { border-color: var(--gold); transform: translateX(-3px); }
.piece-body { min-width: 0; }
.piece textarea { width: 100%; min-height: 76px; display: block; resize: vertical; padding: 10px 12px; border: 0; border-radius: 7px; color: var(--text); background: var(--field); font-family: var(--font-copy); font-size: .96rem; line-height: 1.55; }
.piece-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; color: var(--faint); font-size: .72rem; }
.piece-meta .safe { color: var(--success); }
.copy-button { align-self: center; width: 42px; padding: 0; display: grid; place-items: center; color: var(--text); border: 1px solid var(--line); background: var(--field); }
.copy-button:hover { color: var(--gold-bright); border-color: var(--gold); }
.copy-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

footer { display: flex; justify-content: space-between; gap: 16px; padding: 22px clamp(20px,4vw,64px); border-top: 1px solid var(--line); color: var(--faint); font-size: .76rem; }
footer p { margin: 0; }
a { color: var(--gold); }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 10; transform: translate(-50%, 20px); padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); background: var(--surface-raised); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .2s ease; font-size: .85rem; font-weight: 700; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media (max-width: 1050px) {
  .splitter-page { grid-template-columns: 1fr; }
  .composer { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 700px) {
  .site-header { min-height: 78px; }
  .privacy-note { display: none; }
  section { padding: 24px 18px; }
  .section-heading, .results-heading { align-items: flex-start; }
  .controls { grid-template-columns: 1fr; }
  .advanced { grid-column: auto; }
  .result-actions { justify-content: flex-start; }
  #pieceSummary { width: 100%; }
  .piece { grid-template-columns: 30px minmax(0,1fr); }
  .copy-button { grid-column: 2; width: 100%; }
  footer { flex-direction: column; padding-inline: 18px; }
}

@media (max-width: 480px) {
  .section-heading { display: block; }
  .source-count { margin-top: 8px; }
  .segmented { flex-direction: column; }
  .primary-button { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Each palette has a separately composed light and dark variant. */
:root { --focus: #f0d38f; --button-text: #fff; --overlay: #0009; --faint: #aaa79f; --red-bright: #b94338; }
:root[data-theme="light"] { --focus: #704b11; --faint: #69645c; }
:root[data-palette="ash"][data-theme="dark"] {
  --bg:#141619; --surface:#1c1f24; --surface-raised:#272b31; --field:#111419;
  --text:#f0f2f5; --muted:#b1b9c5; --faint:#b1b9c5; --line:#444b56; --line-strong:#727e90;
  --gold:#e3a6a6; --gold-bright:#ffd0d0; --red:#a33643; --red-bright:#b8404f; --focus:#f0b9c0; --success:#82d7ad;
}
:root[data-palette="ash"][data-theme="light"] {
  --bg:#e5e8ed; --surface:#f3f5f8; --surface-raised:#ffffff; --field:#ffffff;
  --text:#222833; --muted:#525d6c; --faint:#525d6c; --line:#b7c0ce; --line-strong:#7b8798;
  --gold:#8f2939; --gold-bright:#702030; --red:#963044; --red-bright:#7c2336; --focus:#8f2939; --success:#196643;
}
:root[data-palette="shiverpeaks"][data-theme="dark"] {
  --bg:#111b25; --surface:#192733; --surface-raised:#223644; --field:#101e29;
  --text:#edf6fc; --muted:#acc5d5; --faint:#acc5d5; --line:#3d596e; --line-strong:#6e94ad;
  --gold:#8fd1f2; --gold-bright:#c7eeff; --red:#246c98; --red-bright:#2877a5; --focus:#a5e2ff; --success:#7ddaca;
}
:root[data-palette="shiverpeaks"][data-theme="light"] {
  --bg:#e3edf4; --surface:#f3f8fc; --surface-raised:#ffffff; --field:#ffffff;
  --text:#203645; --muted:#476477; --faint:#476477; --line:#b3c9d9; --line-strong:#7395ad;
  --gold:#195e86; --gold-bright:#124565; --red:#23668e; --red-bright:#194f70; --focus:#145a83; --success:#186853;
}
:root[data-palette="grove"][data-theme="dark"] {
  --bg:#111c18; --surface:#19291f; --surface-raised:#243a2d; --field:#101e16;
  --text:#eef5e9; --muted:#b3c8b2; --faint:#b3c8b2; --line:#415d47; --line-strong:#789a76;
  --gold:#b8d68b; --gold-bright:#e0efb5; --red:#396b47; --red-bright:#477c53; --focus:#d0eca4; --success:#8bd9b0;
}
:root[data-palette="grove"][data-theme="light"] {
  --bg:#e6ecdf; --surface:#f4f7ef; --surface-raised:#fcfff8; --field:#fcfff8;
  --text:#263829; --muted:#50674e; --faint:#50674e; --line:#b7c8ab; --line-strong:#7a9772;
  --gold:#436626; --gold-bright:#314e1b; --red:#386443; --red-bright:#294f33; --focus:#395e20; --success:#246140;
}
[hidden] { display:none !important; }
:root[data-palette="flame"][data-theme="dark"] {
  --bg:#12100e; --surface:#1d1814; --surface-raised:#2b221c; --field:#100e0c;
  --text:#f7eddd; --muted:#c4afa0; --faint:#c4afa0; --line:#604637; --line-strong:#99715a;
  --gold:#f2a15b; --gold-bright:#ffc48a; --red:#a7461f; --red-bright:#b34c23;
  --focus:#ffc48a; --success:#a8cf91;
}
:root[data-palette="flame"][data-theme="light"] {
  --bg:#eee3d4; --surface:#f7eddf; --surface-raised:#fbf2e6; --field:#fbf2e6;
  --text:#30251e; --muted:#705444; --faint:#705444; --line:#c5a68c; --line-strong:#93664b;
  --gold:#94401b; --gold-bright:#742e17; --red:#9d3e1d; --red-bright:#7f301b;
  --focus:#923715; --success:#43652d;
}
.source-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
#clearAll { font-size:.82rem; }
@media (max-width:480px) { .source-actions { justify-content:flex-start; margin-top:12px; } }
:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.segmented input:focus-visible + span { outline:3px solid var(--focus); }
button:focus-visible, textarea:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible { outline-color:var(--focus); }
.primary-button { color:var(--button-text); }
.piece.sent { opacity:1; border-style:dashed; }
.piece.sent::before { color:var(--success); }
.page-shell { margin-left:236px; min-width:0; }
.controls { grid-template-columns:repeat(2,minmax(0,1fr)); }
.marker-row select { min-width:85px; }
main { min-width:0; min-height:65vh; }
.sidebar { position:fixed; inset:0 auto 0 0; z-index:20; width:236px; padding:28px 16px; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; gap:24px; }
.sidebar-top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 10px 16px; border-bottom:1px solid var(--line); }
.brand-name { color:var(--muted); font-weight:700; letter-spacing:.08em; font-size:.72rem; line-height:1.3; }
.sidebar nav { display:grid; gap:8px; }
.sidebar nav a { display:flex; align-items:center; gap:12px; min-height:48px; border:1px solid transparent; border-radius:9px; padding:10px; color:var(--muted); text-decoration:none; font-size:.86rem; font-weight:650; }
.sidebar svg { flex:none; width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }
.sidebar nav a:hover { color:var(--text); background:var(--surface-raised); }
.sidebar nav a[aria-current] { color:var(--gold-bright); border-color:var(--line-strong); background:var(--surface-raised); box-shadow:inset 3px 0 var(--gold); font-weight:850; }
#sidebarToggle { flex:none; width:34px; height:34px; padding:6px; border-radius:7px; color:var(--muted); background:transparent; }
#sidebarToggle svg { width:18px; height:18px; }
.sidebar-note { color:var(--muted); font-size:.75rem; line-height:1.7; padding:0 10px; margin:auto 0 0; }
.site-header { padding:22px 32px; gap:16px; flex-wrap:wrap; }
.page-title { flex:1; min-width:180px; }
.header-actions { gap:10px; }
.theme-select { font-size:.7rem; color:var(--muted); display:flex; align-items:center; gap:10px; }
.theme-select select { width:155px; height:40px; font-size:.8rem; }
.mode-button { width:auto; border-radius:9px; padding:0 12px; display:flex; gap:7px; font-size:.78rem; }
.home-page, .resources-page { max-width:1200px; margin:auto; padding:42px clamp(20px,4vw,52px); }
.home-page > h2, .resources-page > h2 { font-family:var(--font-copy); font-size:clamp(1.7rem,3vw,2.35rem); font-weight:500; margin:10px 0 20px; letter-spacing:-.035em; }
.intro { max-width:760px; color:var(--muted); line-height:1.8; font-size:1rem; }
.home-cards { display:grid; grid-template-columns:1.1fr 1fr; gap:22px; margin:30px 0; }
.feature-card, .resource-card { padding:26px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); min-width:0; }
h3 { margin:0 0 12px; font-size:1.25rem; letter-spacing:-.025em; }
.feature-card p:not(.step), .project-note p { color:var(--muted); font-size:.93rem; line-height:1.8; }
.feature-card a { display:inline-flex; align-items:center; padding:10px 14px; text-decoration:none; gap:12px; font-size:.85rem; }
.feature-card .local-note { font-size:.75rem; margin:14px 0 0; }
.project-note { max-width:820px; margin-top:36px; padding-left:24px; border-left:2px solid var(--gold); }
.project-note h3 { font-size:1rem; }
.resource-note { color:var(--muted); font-size:.82rem; max-width:820px; line-height:1.7; }
.race-index { display:flex; flex-wrap:wrap; gap:10px; margin:24px 0; }
.race-index a { padding:7px 16px; border:1px solid var(--line-strong); border-radius:30px; text-decoration:none; font-size:.85rem; }
.race-index a:hover { background:var(--surface-raised); }
.resource-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; margin-bottom:24px; }
.resource-card { scroll-margin:20px; }
.resource-card ul { list-style:none; margin:0; padding:0; }
.resource-card li { border-top:1px solid var(--line); padding:14px 0; }
.resource-card li:last-child { padding-bottom:0; }
.resource-card li a { font-weight:700; text-underline-offset:3px; }
.resource-card li p { color:var(--muted); font-size:.85rem; line-height:1.65; margin:5px 0 0; }
.spoiler { display:block; color:var(--muted); font-size:.72rem; margin-top:6px; }
.resource-card .step { letter-spacing:.06em; font-size:.65rem; }
.mobile-only { display:none; }
.skip-link { position:fixed; top:8px; left:8px; z-index:50; padding:10px 18px; background:var(--surface-raised); transform:translateY(-160%); }
.skip-link:focus { transform:none; }
footer { flex-wrap:wrap; }
.toast { max-width:calc(100% - 32px); text-align:center; }
@media (min-width:761px) {
  :root[data-sidebar="collapsed"] .sidebar { width:76px; padding-inline:12px; }
  :root[data-sidebar="collapsed"] .page-shell { margin-left:76px; }
  :root[data-sidebar="collapsed"] .sidebar .nav-label { display:none; }
  :root[data-sidebar="collapsed"] .sidebar-top { flex-direction:column; padding-inline:0; }
  :root[data-sidebar="collapsed"] .brand-name { font-size:.65rem; letter-spacing:.04em; }
  :root[data-sidebar="collapsed"] #sidebarToggle svg { transform:rotate(180deg); }
}
@media (max-width:1400px) {
  .splitter-page { grid-template-columns:1fr; }
  .composer { border-right:0; border-bottom:1px solid var(--line); }
}
@media (max-width:1050px) { .home-cards, .resource-grid { grid-template-columns:1fr; } }
@media (max-width:760px) {
  .page-shell { margin-left:0; }
  .mobile-only { display:inline-flex; align-items:center; justify-content:center; }
  .sidebar { width:min(290px,85vw); visibility:hidden; transform:translateX(-100%); }
  .drawer-open .sidebar { visibility:visible; transform:none; }
  .drawer-open { overflow:hidden; }
  #sidebarToggle { display:none; }
  .sidebar-note { margin-top:auto; }
  .drawer-backdrop { position:fixed; inset:0; z-index:15; background:var(--overlay); }
  .site-header { padding:18px; gap:14px; }
  .site-header .eyebrow { font-size:.6rem; letter-spacing:.1em; }
  .header-actions { width:100%; justify-content:flex-end; }
  .home-page, .resources-page { padding:28px 18px; }
  .feature-card, .resource-card { padding:22px; }
  .home-cards { gap:16px; }
  .project-note { padding-left:16px; }
  .controls { grid-template-columns:1fr; }
}