:root[data-theme="clay-club"] {
  color-scheme: light;
  --ink: #f8f1e7;
  --panel: #fffaf2;
  --edge: #ccb9a3;
  --paper: #342a22;
  --soft: #705947;
  --faint: #806851;
  --lamp: #9e3f29;
  --cyan: #27685f;
  --danger: #a93637;
  --line: #ddccba;
  --ink-rgb: 248,241,231;
  --panel-rgb: 255,250,242;
  --paper-rgb: 52,42,34;
  --lamp-rgb: 158,63,41;
  --cyan-rgb: 39,104,95;
  --danger-rgb: 169,54,55;
  --faint-rgb: 128,104,81;
}
:root[data-theme="poolside"] {
  color-scheme: light;
  --ink: #edf8f1;
  --panel: #fbfef8;
  --edge: #a4c8b8;
  --paper: #163e3a;
  --soft: #42695e;
  --faint: #53756b;
  --lamp: #14655d;
  --cyan: #ac3f4c;
  --danger: #a93637;
  --line: #c7ded1;
  --ink-rgb: 237,248,241;
  --panel-rgb: 251,254,248;
  --paper-rgb: 22,62,58;
  --lamp-rgb: 20,101,93;
  --cyan-rgb: 172,63,76;
  --danger-rgb: 169,54,55;
  --faint-rgb: 83,117,107;
}
:root[data-theme="lemon-serve"] {
  color-scheme: light;
  --ink: #fffbe9;
  --panel: #fffef7;
  --edge: #c7c7aa;
  --paper: #203250;
  --soft: #56617a;
  --faint: #5f6880;
  --lamp: #244fc7;
  --cyan: #246d56;
  --danger: #a93637;
  --line: #dcdcc5;
  --ink-rgb: 255,251,233;
  --panel-rgb: 255,254,247;
  --paper-rgb: 32,50,80;
  --lamp-rgb: 36,79,199;
  --cyan-rgb: 36,109,86;
  --danger-rgb: 169,54,55;
  --faint-rgb: 95,104,128;
}
:root[data-theme="night-match"] {
  color-scheme: dark;
  --ink: #101d32;
  --panel: #182942;
  --edge: #49627e;
  --paper: #edf3ff;
  --soft: #adbed7;
  --faint: #91a6c2;
  --lamp: #b7ec55;
  --cyan: #7fdcfa;
  --danger: #f0a494;
  --line: #344b67;
  --ink-rgb: 16,29,50;
  --panel-rgb: 24,41,66;
  --paper-rgb: 237,243,255;
  --lamp-rgb: 183,236,85;
  --cyan-rgb: 127,220,250;
  --danger-rgb: 240,164,148;
  --faint-rgb: 145,166,194;
}
:root[data-theme="black-cherry"] {
  color-scheme: dark;
  --ink: #25141f;
  --panel: #341f2c;
  --edge: #7c546b;
  --paper: #fae9ed;
  --soft: #c8a4b2;
  --faint: #b18b9a;
  --lamp: #f4adbb;
  --cyan: #b7ce91;
  --danger: #f0a494;
  --line: #603c50;
  --ink-rgb: 37,20,31;
  --panel-rgb: 52,31,44;
  --paper-rgb: 250,233,237;
  --lamp-rgb: 244,173,187;
  --cyan-rgb: 183,206,145;
  --danger-rgb: 240,164,148;
  --faint-rgb: 177,139,154;
}
:root[data-theme="classic"] { color-scheme: dark; --faint: #908779; --faint-rgb: 144,135,121; }
:root:not([data-theme]), :root[data-theme]:not([data-theme="classic"]) {
  --serif-display: 'Outfit', ui-sans-serif, system-ui, sans-serif;
  --serif-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --lamp-deep: var(--lamp);
  --danger-soft: var(--danger);
  --glow: rgba(var(--lamp-rgb), .12);
  --live-edge: var(--edge);
  caret-color: var(--lamp);
  scrollbar-color: var(--edge) var(--ink);
}
html:not([data-theme]) body, html[data-theme]:not([data-theme="classic"]) body { background-image: none; }
html:not([data-theme]) body::before, html[data-theme]:not([data-theme="classic"]) body::before { box-shadow: none; }
.settings-menu .settings-panel {
  z-index: 40;
  width: min(19.5rem, calc(100vw - 2.4rem));
  max-height: calc(100vh - 7rem);
  max-height: calc(100dvh - 7rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Theme picker: a collapsed Theme row; inside, System and Classic, then light
   looks on the left and dark on the right, then a collapsed More themes. */
.theme-menu { margin: .45rem .4rem .35rem; padding: 0 0 .35rem; border-bottom: 1px solid var(--line); }
.theme-menu > summary, .theme-more > summary { display: flex; align-items: center; gap: .5rem; min-height: 40px; color: var(--soft); font: 500 .85rem/1.4 var(--serif-body); cursor: pointer; list-style: none; }
.theme-menu > summary::-webkit-details-marker, .theme-menu > summary::marker, .theme-more > summary::-webkit-details-marker, .theme-more > summary::marker { display: none; }
.theme-menu > summary::after, .theme-more > summary::after { content: '›'; margin-left: auto; font-size: 1.1rem; line-height: 1; transition: transform .2s; }
.theme-menu[open] > summary::after, .theme-more[open] > summary::after { transform: rotate(90deg); }
.theme-menu > summary:focus-visible, .theme-more > summary:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
.theme-current { margin-left: auto; color: var(--faint); font-size: .78rem; }
.theme-menu > summary:has(.theme-current)::after { margin-left: .4rem; }
.settings-panel .theme-picker { min-width: 0; margin: 0; padding: .15rem 0 .1rem; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; }
.theme-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme-column { display: grid; gap: .3rem; align-content: start; }
.theme-option { position: relative; display: flex; align-items: center; gap: .45rem; min-width: 0; min-height: 40px; padding: .25rem .45rem; border: 1px solid var(--edge); border-radius: 2px; color: var(--paper); font: .82rem/1.2 var(--serif-body); cursor: pointer; }
.theme-option span:not(.theme-swatch) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.theme-option:hover { background: rgba(var(--lamp-rgb,219,164,73),.06); }
.theme-option:has(input:checked) { border-color: var(--lamp); background: rgba(var(--lamp-rgb,219,164,73),.1); box-shadow: inset 0 0 0 1px var(--lamp); }
/* The radio stays in the page for keyboards and screen readers. */
.theme-option input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.theme-option:has(input:focus-visible) { outline: 2px solid var(--lamp); outline-offset: 2px; }
.theme-swatch { width: .95rem; height: .95rem; border-radius: 50%; background: var(--swatch-paper); border: 3px solid var(--swatch-accent); flex: 0 0 auto; }
.theme-mode { display: none; }
html:not([data-theme]) .settings-menu > summary, html[data-theme]:not([data-theme="classic"]) .settings-menu > summary { position: relative; }
html:not([data-theme]) .settings-gear, html[data-theme]:not([data-theme="classic"]) .settings-gear { opacity: 0; }
html:not([data-theme]) .settings-menu > summary::after, html[data-theme]:not([data-theme="classic"]) .settings-menu > summary::after {
  content: '';
  position: absolute;
  width: 1.35em;
  height: 1.35em;
  background: var(--lamp);
  mask: url('gear.svg') center / contain no-repeat;
  -webkit-mask: url('gear.svg') center / contain no-repeat;
  pointer-events: none;
}

/* Looks that match the alca.bet landing page. Generated by the looks spec
   (contrast-checked: body text >= 7:1, other text >= 4.5:1). */
:root:not([data-theme]), :root[data-theme="clay"]:not([data-theme="classic"]) {
  color-scheme: light;
  --ink: #f6e3d6;
  --panel: #fbefe6;
  --edge: #b9856b;
  --paper: #2b1a14;
  --soft: #63402f;
  --faint: #744e3e;
  --lamp: #a3402a;
  --cyan: #2c5a47;
  --danger: #a3212a;
  --line: #e3c3ae;
  --ink-rgb: 246,227,214;
  --panel-rgb: 251,239,230;
  --paper-rgb: 43,26,20;
  --lamp-rgb: 163,64,42;
  --cyan-rgb: 44,90,71;
  --danger-rgb: 163,33,42;
  --faint-rgb: 116,78,62;
  --serif-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --serif-body: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
}
:root[data-theme="lawn"]:not([data-theme="classic"]) {
  color-scheme: light;
  --ink: #f1f6ec;
  --panel: #ffffff;
  --edge: #8fa982;
  --paper: #1e2d19;
  --soft: #44543e;
  --faint: #52624b;
  --lamp: #3b6a28;
  --cyan: #a42b42;
  --danger: #a3212a;
  --line: #d6e3cd;
  --ink-rgb: 241,246,236;
  --panel-rgb: 255,255,255;
  --paper-rgb: 30,45,25;
  --lamp-rgb: 59,106,40;
  --cyan-rgb: 164,43,66;
  --danger-rgb: 163,33,42;
  --faint-rgb: 82,98,75;
  --serif-display: 'Instrument Serif', Georgia, serif;
  --serif-body: 'Figtree', ui-sans-serif, system-ui, sans-serif;
}
:root[data-theme="draw-sheet"]:not([data-theme="classic"]) {
  color-scheme: light;
  --ink: #eef2f6;
  --panel: #fbfcfd;
  --edge: #8d9db2;
  --paper: #111827;
  --soft: #3f3f46;
  --faint: #50505a;
  --lamp: #1e3a8a;
  --cyan: #b42828;
  --danger: #a3212a;
  --line: #d6dee8;
  --ink-rgb: 238,242,246;
  --panel-rgb: 251,252,253;
  --paper-rgb: 17,24,39;
  --lamp-rgb: 30,58,138;
  --cyan-rgb: 180,40,40;
  --danger-rgb: 163,33,42;
  --faint-rgb: 80,80,90;
  --serif-display: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --serif-body: 'Archivo', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}
:root[data-theme="stringbed"]:not([data-theme="classic"]) {
  color-scheme: light;
  --ink: #f4f6f9;
  --panel: #ffffff;
  --edge: #9aa5b4;
  --paper: #1c1f26;
  --soft: #474e5b;
  --faint: #565d6b;
  --lamp: #2455d6;
  --cyan: #4a7a0c;
  --danger: #b3261e;
  --line: #e0e5ec;
  --ink-rgb: 244,246,249;
  --panel-rgb: 255,255,255;
  --paper-rgb: 28,31,38;
  --lamp-rgb: 36,85,214;
  --cyan-rgb: 74,122,12;
  --danger-rgb: 179,38,30;
  --faint-rgb: 86,93,107;
  --serif-display: 'Unbounded', ui-sans-serif, system-ui, sans-serif;
  --serif-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
}
:root[data-theme="summer-poster"]:not([data-theme="classic"]) {
  color-scheme: light;
  --ink: #fde6cf;
  --panel: #fff8f0;
  --edge: #c4895d;
  --paper: #0f4a50;
  --soft: #2c5c61;
  --faint: #3a676b;
  --lamp: #b2305f;
  --cyan: #9a4a06;
  --danger: #a3212a;
  --line: #f0cfb0;
  --ink-rgb: 253,230,207;
  --panel-rgb: 255,248,240;
  --paper-rgb: 15,74,80;
  --lamp-rgb: 178,48,95;
  --cyan-rgb: 154,74,6;
  --danger-rgb: 163,33,42;
  --faint-rgb: 58,103,107;
  --serif-display: 'Shrikhand', Georgia, serif;
  --serif-body: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
}
:root[data-theme="night-session"]:not([data-theme="classic"]) {
  color-scheme: dark;
  --ink: #0a1426;
  --panel: #10213d;
  --edge: #34507a;
  --paper: #f2f6ff;
  --soft: #bccadf;
  --faint: #94a8c7;
  --lamp: #e3f25c;
  --cyan: #8ec8ff;
  --danger: #ff9a8a;
  --line: #1d3253;
  --ink-rgb: 10,20,38;
  --panel-rgb: 16,33,61;
  --paper-rgb: 242,246,255;
  --lamp-rgb: 227,242,92;
  --cyan-rgb: 142,200,255;
  --danger-rgb: 255,154,138;
  --faint-rgb: 148,168,199;
  --serif-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --serif-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
}
:root[data-theme="line-call"]:not([data-theme="classic"]) {
  color-scheme: dark;
  --ink: #0c1418;
  --panel: #122229;
  --edge: #335660;
  --paper: #e7eef0;
  --soft: #b7c7cc;
  --faint: #91a8af;
  --lamp: #f0f36b;
  --cyan: #ff8a7e;
  --danger: #ff9d94;
  --line: #1c343b;
  --ink-rgb: 12,20,24;
  --panel-rgb: 18,34,41;
  --paper-rgb: 231,238,240;
  --lamp-rgb: 240,243,107;
  --cyan-rgb: 255,138,126;
  --danger-rgb: 255,157,148;
  --faint-rgb: 145,168,175;
  --serif-display: 'Rajdhani', 'Arial Narrow', sans-serif;
  --serif-body: 'Rajdhani', 'Arial Narrow', sans-serif;
}
:root[data-theme="scoreboard"]:not([data-theme="classic"]) {
  color-scheme: dark;
  --ink: #0b0b0c;
  --panel: #151517;
  --edge: #4b4b53;
  --paper: #f2eee6;
  --soft: #bdb8ae;
  --faint: #948f86;
  --lamp: #ffb000;
  --cyan: #46e585;
  --danger: #ff7a6e;
  --line: #26262b;
  --ink-rgb: 11,11,12;
  --panel-rgb: 21,21,23;
  --paper-rgb: 242,238,230;
  --lamp-rgb: 255,176,0;
  --cyan-rgb: 70,229,133;
  --danger-rgb: 255,122,110;
  --faint-rgb: 148,143,134;
  --serif-display: 'Doto', ui-monospace, monospace;
  --serif-body: 'Inter Tight', ui-sans-serif, system-ui, sans-serif;
}
:root[data-theme="constellation"]:not([data-theme="classic"]) {
  color-scheme: dark;
  --ink: #0c0a26;
  --panel: #17143d;
  --edge: #4b4592;
  --paper: #f3f0ff;
  --soft: #c3bdeb;
  --faint: #9d96d2;
  --lamp: #f2d38b;
  --cyan: #6fe3e8;
  --danger: #ff9fb0;
  --line: #241f52;
  --ink-rgb: 12,10,38;
  --panel-rgb: 23,20,61;
  --paper-rgb: 243,240,255;
  --lamp-rgb: 242,211,139;
  --cyan-rgb: 111,227,232;
  --danger-rgb: 255,159,176;
  --faint-rgb: 157,150,210;
  --serif-display: 'Syne', ui-sans-serif, system-ui, sans-serif;
  --serif-body: 'Figtree', ui-sans-serif, system-ui, sans-serif;
}
:root[data-theme="terminal"]:not([data-theme="classic"]) {
  color-scheme: dark;
  --ink: #0f111a;
  --panel: #151826;
  --edge: #454d70;
  --paper: #d9dde9;
  --soft: #aeb4c9;
  --faint: #878fab;
  --lamp: #c3e88d;
  --cyan: #82aaff;
  --danger: #ff8095;
  --line: #20243a;
  --ink-rgb: 15,17,26;
  --panel-rgb: 21,24,38;
  --paper-rgb: 217,221,233;
  --lamp-rgb: 195,232,141;
  --cyan-rgb: 130,170,255;
  --danger-rgb: 255,128,149;
  --faint-rgb: 135,143,171;
  --serif-display: 'JetBrains Mono', ui-monospace, monospace;
  --serif-body: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Quiet signature textures from each look's landing page. They sit behind the
   content only; text, tables and forms stay on flat color. */
html:not([data-theme]) body, html[data-theme="clay"]:not([data-theme="classic"]) body { background-image: radial-gradient(rgba(163, 64, 42, .07) 1px, transparent 1.3px); background-size: 9px 9px; }
html[data-theme="lawn"]:not([data-theme="classic"]) body { background-image: repeating-linear-gradient(90deg, rgba(59, 106, 40, .045) 0 120px, transparent 120px 240px); }
html[data-theme="draw-sheet"]:not([data-theme="classic"]) body { background-image: linear-gradient(rgba(30, 58, 138, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 58, 138, .07) 1px, transparent 1px); background-size: 24px 24px; }
html[data-theme="stringbed"]:not([data-theme="classic"]) body { background-image: linear-gradient(rgba(74, 122, 12, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 122, 12, .05) 1px, transparent 1px); background-size: 16px 16px; }
html[data-theme="summer-poster"]:not([data-theme="classic"]) body { background-image: linear-gradient(var(--lamp) 0 6px, transparent 6px); }
html[data-theme="night-session"]:not([data-theme="classic"]) body { background-image: radial-gradient(900px 480px at 50% -120px, rgba(242, 246, 255, .09), transparent 70%); background-repeat: no-repeat; }
html[data-theme="line-call"]:not([data-theme="classic"]) body { background-image: linear-gradient(rgba(231, 238, 240, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(231, 238, 240, .04) 1px, transparent 1px); background-size: 64px 64px; }
html[data-theme="scoreboard"]:not([data-theme="classic"]) body { background-image: radial-gradient(circle, rgba(255, 255, 255, .045) 1.3px, transparent 1.7px); background-size: 8px 8px; }
html[data-theme="constellation"]:not([data-theme="classic"]) body { background-image: radial-gradient(1px 1px at 12% 18%, rgba(243, 240, 255, .55), transparent 60%), radial-gradient(1px 1px at 72% 12%, rgba(243, 240, 255, .4), transparent 60%), radial-gradient(1.5px 1.5px at 38% 64%, rgba(243, 240, 255, .45), transparent 60%), radial-gradient(1px 1px at 88% 58%, rgba(243, 240, 255, .4), transparent 60%); background-size: 420px 420px, 380px 380px, 520px 520px, 460px 460px; }

/* Display faces that only work in capitals or need room. */
html:not([data-theme]) .wordmark, html[data-theme="clay"] .wordmark, html[data-theme="clay"] h1 { font-weight: 400; text-transform: uppercase; letter-spacing: .02em; }
html[data-theme="night-session"] .wordmark, html[data-theme="night-session"] h1 { font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }
html[data-theme="scoreboard"] .wordmark, html[data-theme="scoreboard"] h1 { font-weight: 900; }
html[data-theme="lawn"] h1, html[data-theme="lawn"] .wordmark { font-weight: 400; }
html[data-theme="summer-poster"] h1, html[data-theme="summer-poster"] .wordmark { font-weight: 400; }
html[data-theme="line-call"] body { font-weight: 500; }
html[data-theme="draw-sheet"] h1 { font-stretch: 75%; font-weight: 800; text-transform: uppercase; }

/* Group labels and the nested More themes row. */
.theme-group { margin: .3rem 0 0; color: var(--faint); font: 600 .66rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.theme-more { grid-column: 1 / -1; margin-top: .25rem; border-top: 1px solid var(--line); }
.theme-more-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; padding-bottom: .1rem; }
.theme-swatch-system { background: linear-gradient(135deg, var(--swatch-paper) 50%, var(--swatch-accent) 50%); border-color: var(--edge); }