/* Shared light design system for the hub, Battle and Debate. Council keeps its navy and gold.
   Tokens first, then the few components all three pages share. Pastels on surfaces only; text is
   always ink on a light surface or white on a deep accent. Contrast checked in tools/contrast.js. */
:root {
  --surface: #FFFFFF;
  --sage: #E7F0E8; --lavender: #EDE8F7; --ice: #E7F0FA; --sand: #F3EDE2;
  --ink: #222B35; --muted: #56616D; --faint: #8A94A0;
  --divider: #D8DEE5; --input-border: #8A94A0;
  --violet: #5D4B82; --violet-deep: #46376A;
  --plum: #4E2A5E; --plum-deep: #3B1F47;
  --navy: #0b1228; --gold: #c9a84c; --champagne: #B4975A;
  --focus: #2D5BE3;
  --radius: 18px; --radius-sm: 12px;
  --shadow: 0 1px 2px rgba(34,43,53,.04), 0 12px 32px -12px rgba(34,43,53,.14);
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-ui: 'DM Sans', system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--canvas); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font-ui); font-size: 1rem; line-height: 1.55; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: var(--violet); }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .wrap { padding: 0 28px; } }


/* ---- Palettes at 50% colour, 50% light (her call, 24 Oct). The default is "iris". Switch with
   ?palette=NAME or data-palette on <html>. Each block sets the canvas, the two action colours
   (primary, second), the three tints and the four aurora blobs; every component reads the tokens. ---- */
:root { --canvas: #EFE9F8; --sand: #E7DFF3; --a1: #A98BE8; --a2: #7FD1A4; --a3: #F2C94C; --a4: #7FB6F0; --tint-battle: #E9DEF6; --line-battle: #CDB9EA; --line-debate: #B9E0C8; }
[data-palette="champagne"] { --canvas: #F7E8CB; --sand: #F0DDB6; --violet: #14213D; --violet-deep: #0b1228; --plum: #8A5A14; --plum-deep: #6E4610; --lavender: #F6DFA8; --sage: #F6D2C4; --ice: #D9E6F6; --focus: #14213D; --a1: #E6B94A; --a2: #F0A58F; --a3: #8FB7E8; --a4: #F3D37A; --tint-battle: #F7E3B4; --line-battle: #E2C274; --line-debate: #E8B9A8; }
[data-palette="porcelain"] { --canvas: #E6EEF9; --sand: #DCE6F4; --violet: #1F4FD8; --violet-deep: #163CA8; --plum: #14213D; --plum-deep: #0b1228; --lavender: #D3E0F6; --sage: #DCE4F0; --ice: #CFDFF8; --focus: #1F4FD8; --a1: #6FA3EE; --a2: #AEB9CC; --a3: #3F73E0; --a4: #9CC2F5; --tint-battle: #D6E2F6; --line-battle: #A9C2EA; --line-debate: #B9C8DE; }
[data-palette="rose"] { --canvas: #F8E3E0; --sand: #F3D6D2; --violet: #2B2D33; --violet-deep: #141518; --plum: #B04A5A; --plum-deep: #8E3A48; --lavender: #F6CFCB; --sage: #F8D9C2; --ice: #EBDDE2; --focus: #B04A5A; --a1: #EE9A9A; --a2: #F4B98E; --a3: #C89BB4; --a4: #F2CFA0; --tint-battle: #F8D7D3; --line-battle: #E9A9A5; --line-debate: #EBBE9E; }
[data-palette="navy"] { --canvas: #E8EDF8; --sand: #DDE4F2; --violet: #0b1228; --violet-deep: #050913; --plum: #9A7B2E; --plum-deep: #7C6223; --lavender: #D7DFF2; --sage: #F0E2B4; --ice: #CFDAF2; --focus: #2D5BE3; --a1: #7F93C9; --a2: #E2BE63; --a3: #A3B7E6; --a4: #D9C27A; --tint-battle: #F0E2B4; --line-battle: #D8BE6E; --line-debate: #AFBFE0; }
[data-palette="sunset"] { --canvas: #FBE7D6; --sand: #F6D9C1; --violet: #3B1F47; --violet-deep: #2A1533; --plum: #D9542B; --plum-deep: #B64221; --lavender: #F9D3B8; --sage: #E9D2F2; --ice: #FBE0C8; --focus: #3B1F47; --a1: #F28C6B; --a2: #F6B84B; --a3: #9B6BD3; --a4: #F7D08A; --tint-battle: #FBD9C0; --line-battle: #F0A98B; --line-debate: #D3B6E6; }
[data-palette="emerald"] { --canvas: #E3F1EA; --sand: #D5E8DD; --violet: #0F3D33; --violet-deep: #082A23; --plum: #B8862E; --plum-deep: #946B22; --lavender: #D6ECE2; --sage: #C7E7D7; --ice: #F0E6C4; --focus: #0F3D33; --a1: #3FAE8A; --a2: #D4B255; --a3: #7CC8B0; --a4: #B8E3D0; --tint-battle: #F0E6C4; --line-battle: #D7BE7A; --line-debate: #9ED4BC; }
[data-palette="peacock"] { --canvas: #DFEDEE; --sand: #CFE3E4; --violet: #0E4F5A; --violet-deep: #083740; --plum: #6B3FA0; --plum-deep: #522E7E; --lavender: #DCD4F0; --sage: #C9E6E2; --ice: #F2E6BF; --focus: #0E4F5A; --a1: #2FA3A8; --a2: #8E5BD6; --a3: #E9C25A; --a4: #7FD1C8; --tint-battle: #E2D9F3; --line-battle: #B9A6E0; --line-debate: #96CFC8; }
[data-palette="orchid"] { --canvas: #F3E4F2; --sand: #ECD5EA; --violet: #5B1E63; --violet-deep: #41154A; --plum: #C9318A; --plum-deep: #A1266E; --lavender: #F3CDE8; --sage: #F8D9C9; --ice: #E6D8F4; --focus: #5B1E63; --a1: #E463B4; --a2: #9D5BD9; --a3: #F6A87A; --a4: #F0B6DE; --tint-battle: #F6D4EA; --line-battle: #E59CCB; --line-debate: #EFB9A3; }
[data-palette="sapphire"] { --canvas: #E1E8F7; --sand: #D3DCF1; --violet: #1B3C9E; --violet-deep: #122B74; --plum: #B48A2C; --plum-deep: #8F6D22; --lavender: #CFDAF5; --sage: #F3E6BF; --ice: #D7E2F8; --focus: #1B3C9E; --a1: #3F63D6; --a2: #E3BE5E; --a3: #7FA0EE; --a4: #FFFFFF; --tint-battle: #F3E6BF; --line-battle: #DBC27A; --line-debate: #A9BCEB; }
[data-palette="coral"] { --canvas: #FBEFE3; --sand: #F7E3CF; --violet: #1F3A3D; --violet-deep: #132628; --plum: #E8664F; --plum-deep: #C4513D; --lavender: #FBD9CE; --sage: #CFEFE3; --ice: #FBEBB8; --focus: #1F3A3D; --a1: #F58A72; --a2: #5FCFB0; --a3: #F7D46A; --a4: #FDC9B8; --tint-battle: #FBD9CE; --line-battle: #F2A894; --line-debate: #93DCC4; }
[data-palette="aubergine"] { --canvas: #F1E4EA; --sand: #EAD6DF; --violet: #4A1E4F; --violet-deep: #35153A; --plum: #C98A2E; --plum-deep: #A26E22; --lavender: #ECD3E2; --sage: #F6E2C2; --ice: #F6D7D7; --focus: #4A1E4F; --a1: #9B4D9E; --a2: #E8B04E; --a3: #E98FA6; --a4: #D9B3D8; --tint-battle: #F6E2C2; --line-battle: #E0BC7A; --line-debate: #DFB1CC; }
[data-palette="midnight"] { --canvas: #D9E1F4; --sand: #CBD5EE; --violet: #0b1228; --violet-deep: #050913; --plum: #C9A84C; --plum-deep: #A6882F; --lavender: #C7D2EF; --sage: #EEDFAF; --ice: #BFCDEF; --focus: #2D5BE3; --a1: #5B6FB8; --a2: #E0B94F; --a3: #8DA3E0; --a4: #FFFFFF; --tint-battle: #EEDFAF; --line-battle: #D1B55E; --line-debate: #9BAEDD; }

/* Aurora mesh, light edition: slow colour blobs behind glass. One per page. */
.aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; filter: blur(64px); opacity: 1; }
.aurora .blob { position: absolute; border-radius: 50%; will-change: transform; }
.aurora .b1 { width: 60vmax; height: 60vmax; left: -18vmax; top: -24vmax; background: radial-gradient(circle, var(--a1), transparent 65%); animation: drift1 28s ease-in-out infinite alternate; }
.aurora .b2 { width: 48vmax; height: 48vmax; right: -14vmax; top: 4vmax; background: radial-gradient(circle, var(--a2), transparent 65%); animation: drift2 34s ease-in-out infinite alternate; }
.aurora .b3 { width: 44vmax; height: 44vmax; left: 28vw; bottom: -22vmax; background: radial-gradient(circle, var(--a3), transparent 65%); animation: drift1 40s ease-in-out infinite alternate-reverse; }
.aurora .b4 { width: 36vmax; height: 36vmax; left: 55vw; top: -10vmax; background: radial-gradient(circle, var(--a4), transparent 65%); animation: drift2 44s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(8vmax, 6vmax) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-7vmax, -5vmax) scale(.92); } }
@media (max-width: 640px) { .aurora { filter: blur(44px); } .aurora .b3, .aurora .b4 { display: none; } }
@media (prefers-reduced-motion: reduce) { .aurora .blob { animation: none; } }
.grain { position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: .045; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }
.glass { background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 1px 2px rgba(34,43,53,.04), 0 24px 60px -24px rgba(70,55,106,.22), inset 0 1px 0 rgba(255,255,255,.9); }
.tilt { transform-style: preserve-3d; will-change: transform; position: relative; }
.sheen { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.45) 50%, transparent 60%); transform: translateX(-130%); }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.split .w > span { display: inline-block; transform: translateY(110%); }
.btn::after { content: ""; position: absolute; inset: 0; transform: translateX(-130%); background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); pointer-events: none; }
.btn { position: relative; overflow: hidden; }
.btn:hover::after { transition: transform .7s ease; transform: translateX(130%); }

/* Nav */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.62); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,.9); box-shadow: 0 8px 30px -22px rgba(34,43,53,.35); transition: background .3s, border-color .3s, box-shadow .3s; }
.nav.scrolled { background: rgba(255,255,255,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: rgba(216,222,229,.8); box-shadow: 0 8px 30px -20px rgba(34,43,53,.25); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 12px; }
.brand { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; color: var(--violet); text-decoration: none; letter-spacing: .01em; white-space: nowrap; }
.brand img { width: 30px; height: 30px; vertical-align: -8px; margin-right: 8px; border-radius: 8px; }
.nav-links { display: none; align-items: center; gap: 4px; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: .95rem; font-weight: 600; padding: 9px 13px; border-radius: 999px; }
.nav-links a:hover { color: var(--violet); background: var(--surface); }
.nav-links a[aria-current="page"] { color: #fff; background: var(--violet); box-shadow: none; }
.nav-links .sep { width: 1px; height: 22px; background: var(--input-border); opacity: .5; margin: 0 8px; }
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--divider); background: var(--surface); border-radius: 12px; color: var(--ink); cursor: pointer; }
.nav-sheet { display: none; border-top: 1px solid var(--divider); background: var(--canvas); padding: 10px 16px 18px; }
.nav-sheet a { display: block; padding: 13px 4px; color: var(--ink); text-decoration: none; font-size: 1.05rem; border-bottom: 1px solid var(--divider); }
.nav-sheet[data-open="true"] { display: block; }
@media (min-width: 900px) { .nav-links { display: flex; } .nav-toggle, .nav-sheet { display: none !important; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent; font-weight: 500; font-size: .95rem; text-decoration: none; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary, .btn-plum { color: #fff; background-image: linear-gradient(110deg, var(--violet) 0%, var(--plum) 50%, var(--violet) 100%); background-size: 220% 100%; background-position: 0% 0; transition: background-position .6s ease, transform .18s ease, box-shadow .3s ease; box-shadow: 0 10px 28px -12px color-mix(in srgb, var(--plum) 70%, transparent); }
.btn-plum { background-image: linear-gradient(110deg, var(--plum) 0%, var(--violet) 50%, var(--plum) 100%); }
.btn-primary:hover, .btn-plum:hover { background-position: 100% 0; box-shadow: 0 16px 40px -12px color-mix(in srgb, var(--plum) 85%, transparent); }
/* The hero pair: big, saturated, alive. */
.btn-hero { min-height: 64px; padding: 0 38px; font-size: 1.08rem; font-weight: 600; letter-spacing: .01em; }
@media (max-width: 480px) { .btn-hero { min-height: 58px; padding: 0 28px; font-size: 1rem; width: 100%; } }
.btn-hero.btn-primary { animation: heroGlow 3.2s ease-in-out infinite; }
@keyframes heroGlow { 0%, 100% { box-shadow: 0 14px 36px -14px color-mix(in srgb, var(--plum) 75%, transparent); } 50% { box-shadow: 0 18px 54px -10px color-mix(in srgb, var(--violet) 85%, transparent), 0 0 0 6px color-mix(in srgb, var(--a1) 25%, transparent); } }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.btn-ring { color: var(--ink); background: linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)) padding-box, conic-gradient(from var(--ang), var(--violet), var(--plum), var(--a3), var(--a1), var(--violet)) border-box; border: 2px solid transparent; animation: ringSpin 5s linear infinite; }
.btn-ring:hover { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--ang), var(--violet), var(--plum), var(--a3), var(--a1), var(--violet)) border-box; }
@keyframes ringSpin { to { --ang: 360deg; } }
@keyframes shimmer { from { background-position: 0% 0; } to { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .btn-hero.btn-primary, .btn-ring { animation: none; } }
.btn-navy { background: var(--navy); color: var(--gold); }
.btn-navy:hover { background: #121b3a; }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--divider); }
.btn-ghost:hover { border-color: var(--faint); }
.btn-quiet { background: transparent; color: var(--muted); border-color: transparent; min-height: 40px; padding: 0 12px; }
.btn-quiet:hover { color: var(--ink); background: var(--surface); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .875rem; }

/* Cards and chips */
.card { background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius); box-shadow: var(--shadow); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--divider); color: var(--muted); background: var(--surface); }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.chip[data-state="live"] { color: #1F5B3A; border-color: #BFDCC9; background: #EEF6F0; } .chip[data-state="live"]::before { background: #2E8B57; }
.chip[data-state="preview"] { color: #4B3A73; border-color: #D5CBEA; background: var(--lavender); } .chip[data-state="preview"]::before { background: var(--violet); }
.chip[data-state="soon"] { color: var(--muted); }
.eyebrow { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Form controls */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: .875rem; font-weight: 500; color: var(--ink); }
.input, .select, .textarea { width: 100%; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--input-border); border-radius: var(--radius-sm); padding: 12px 14px; min-height: 48px; }
.textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px; background: var(--sand); border-radius: 999px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.seg span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: .9rem; font-weight: 500; color: var(--muted); cursor: pointer; }
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(34,43,53,.12); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.help { font-size: .85rem; color: var(--muted); }

/* Session shell: compact header, the exchange as the focus, one input area */
.session-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--divider); flex-wrap: wrap; }
.session-head .meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-width: 0; }
.session-head .meta strong { font-weight: 600; font-size: .95rem; }
.session-head .meta span { font-size: .85rem; color: var(--muted); }
.exchange { display: flex; flex-direction: column; gap: 14px; padding: 22px 0 10px; min-height: 40vh; }
.bubble { max-width: 46rem; padding: 14px 18px; border-radius: 20px; line-height: 1.55; font-size: 1.05rem; position: relative; }
.bubble.user { align-self: flex-end; background: var(--surface); border: 1px solid var(--divider); border-bottom-right-radius: 8px; }
.bubble.ai { align-self: flex-start; border-bottom-left-radius: 8px; }
.bubble .who { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.bubble.system { align-self: center; background: transparent; color: var(--muted); font-size: .9rem; text-align: center; padding: 6px 12px; }
.thinking { display: inline-flex; gap: 5px; align-items: center; height: 1.2em; }
.thinking i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .35; animation: blink 1.2s infinite; }
.thinking i:nth-child(2) { animation-delay: .2s; } .thinking i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: .9; } }
.composer { position: sticky; bottom: 0; background: linear-gradient(to top, var(--canvas) 70%, rgba(250,250,247,0)); padding: 12px 0 14px; }
.composer .box { background: var(--surface); border: 1px solid var(--input-border); border-radius: 22px; padding: 8px 8px 8px 14px; display: flex; flex-direction: column; gap: 8px; }
.composer .box:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(45,91,227,.18); }
.composer textarea { border: 0; outline: 0; resize: none; font: inherit; font-size: 1.05rem; line-height: 1.5; min-height: 52px; max-height: 40vh; padding: 8px 4px; background: transparent; color: var(--ink); width: 100%; }
.composer .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.composer .row .left, .composer .row .right { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--divider); background: var(--surface); color: var(--ink); cursor: pointer; }
.icon-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.icon-btn:disabled { opacity: .45; cursor: not-allowed; }
.voice-state { font-size: .8rem; color: var(--muted); min-width: 7ch; }
.voice-state[data-state="listening"] { color: #B3261E; font-weight: 600; }
.voice-state[data-state="speaking"] { color: var(--violet); font-weight: 600; }
.notice { background: var(--sand); border: 1px solid #E6DCC8; color: var(--ink); border-radius: var(--radius-sm); padding: 12px 14px; font-size: .95rem; }
.notice.error { background: #FBEDEC; border-color: #F0C7C3; }
.notice.mock { background: #FFF4D6; border-color: #F1D9A0; }
.drawer { position: fixed; inset: auto 0 0 0; max-height: 80vh; overflow: auto; background: var(--surface); border-top-left-radius: 22px; border-top-right-radius: 22px; box-shadow: 0 -20px 60px rgba(34,43,53,.18); transform: translateY(100%); transition: transform .3s ease; z-index: 50; padding: 18px 20px 28px; }
.drawer[data-open="true"] { transform: none; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
@media (min-width: 900px) { .drawer { inset: 72px 24px auto auto; width: 420px; max-height: calc(100vh - 100px); border-radius: var(--radius); transform: translateX(110%); } }
.scores { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .scores { grid-template-columns: repeat(4, 1fr); } }
.score { background: var(--canvas); border: 1px solid var(--divider); border-radius: var(--radius-sm); padding: 12px; }
.score b { display: block; font-size: 1.4rem; font-family: var(--font-display); }
.score small { display: block; color: var(--muted); font-size: .78rem; }
.bar { height: 6px; border-radius: 3px; background: var(--divider); overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--violet); }
.kv { display: grid; gap: 10px; }
.kv dt { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.kv dd { margin: 2px 0 0; }
footer.site { border-top: 1px solid var(--divider); padding: 28px 0 40px; color: var(--muted); font-size: .875rem; }
footer.site a { color: var(--muted); }
footer.site .row { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; }
.hidden { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }