/* Northern-lights theme: a night sky with a slow aurora behind the header, the same greens, teals and violets as accents. */
:root {
  --bg: #f3f4f8; --card: #ffffff; --ink: #141826; --muted: #5f6678; --line: #e1e3ec;
  --a1: #2de2a6; --a2: #22c1e0; --a3: #8b5cf6; --a4: #ec4899;
  --accent: #0e9f8a; --accent-ink: #ffffff; --soft: #e6f7f3;
  --sky: #070b1f; --sky-ink: #eef2ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #090d1c; --card: #11172b; --ink: #e8ebf7; --muted: #9aa3bd; --line: #232b45;
    --accent: #3fe0b8; --accent-ink: #04131a; --soft: #13293a;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }

/* ---- header: night sky + aurora */
.hero { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #121a46 0%, var(--sky) 60%); color: var(--sky-ink); padding: 64px 0 52px; isolation: isolate; }
.hero::before, .hero::after { content: ""; position: absolute; inset: -40% -20%; z-index: -1; filter: blur(48px); opacity: .7; }
.hero::before { background: conic-gradient(from 200deg at 30% 60%, transparent 0deg, var(--a1) 40deg, var(--a2) 90deg, transparent 140deg, var(--a3) 220deg, transparent 300deg); animation: drift 18s ease-in-out infinite alternate; }
.hero::after { background: conic-gradient(from 20deg at 75% 40%, transparent 0deg, var(--a3) 50deg, var(--a4) 80deg, transparent 130deg, var(--a1) 250deg, transparent 320deg); opacity: .45; animation: drift 24s ease-in-out infinite alternate-reverse; }
@keyframes drift { 0% { transform: translate3d(-4%, 0, 0) rotate(0deg) scaleY(.8); } 100% { transform: translate3d(5%, 3%, 0) rotate(12deg) scaleY(1.1); } }
.stars { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(1px 1px at 12% 22%, #fff9, transparent), radial-gradient(1px 1px at 68% 12%, #fff8, transparent), radial-gradient(1.5px 1.5px at 84% 64%, #fffa, transparent), radial-gradient(1px 1px at 33% 78%, #fff7, transparent), radial-gradient(1px 1px at 52% 40%, #fff6, transparent), radial-gradient(1.5px 1.5px at 6% 66%, #fff8, transparent), radial-gradient(1px 1px at 92% 30%, #fff7, transparent); }
.eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: 13px; margin: 0 0 12px; background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3)); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.hero h1 { font-size: clamp(32px, 5.5vw, 56px); line-height: 1.08; margin: 0 0 18px; max-width: 15em; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.lede { font-size: 18px; max-width: 40em; opacity: .92; margin: 0 0 20px; }
.device { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 13px; padding: 4px 11px; border-radius: 99px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.chip.ok::before { content: "● "; color: var(--a1); } .chip.off::before { content: "● "; color: #fbbf24; }
@media (prefers-reduced-motion: reduce) { .hero::before, .hero::after { animation: none; } }

/* ---- content */
main { padding: 30px 16px 60px; }
h2 { font-size: 22px; margin: 0 0 4px; } h3 { font-size: 17px; margin: 0; }
.muted { color: var(--muted); font-size: 14px; }
.section-head { margin-bottom: 16px; max-width: 46em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; margin-bottom: 28px; }
.model { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 8px; transition: transform .18s, box-shadow .18s; font: inherit; color: inherit; text-align: left; }
.model:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(34,193,224,.45); }
.model.sel { border-color: transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(135deg, var(--a1), var(--a2), var(--a3), var(--a4)) border-box; border: 2px solid transparent; box-shadow: 0 12px 36px -14px rgba(139,92,246,.55); }
.model h3 { font-size: 19px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { font-size: 12px; padding: 2px 9px; border-radius: 99px; background: var(--soft); color: var(--ink); }
.badge.top { background: linear-gradient(90deg, var(--a1), var(--a2)); color: #04131a; font-weight: 600; }
.model p { margin: 0; font-size: 14px; }
.wer { display: flex; gap: 16px; font-size: 13px; color: var(--muted); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); }
.wer b { color: var(--ink); font-size: 16px; }
#more { justify-content: center; align-items: center; text-align: center; border-style: dashed; }

.panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin-bottom: 20px; box-shadow: 0 20px 50px -30px rgba(20,24,60,.35); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
button { font: inherit; font-size: 14px; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button:hover:not(:disabled) { border-color: var(--a2); box-shadow: 0 0 0 3px rgba(34,193,224,.15); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: linear-gradient(120deg, var(--a1), var(--a2) 55%, var(--a3)); color: #04131a; border: 0; font-weight: 600; }
.bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: 16px 0; }
.bar div { height: 100%; width: 0; background: linear-gradient(90deg, var(--a1), var(--a2), var(--a3), var(--a4)); transition: width .2s; }
.inputs { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.big { font-size: 16px; padding: 12px 18px; display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--a4); }
#rec.on { background: var(--a4); color: #fff; border-color: var(--a4); } #rec.on .dot { background: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.samples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.samples button { font-size: 13px; padding: 7px 10px; }
.meter { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.meter div { flex: 1; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; position: relative; }
#level { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, var(--a1), var(--a3)); }
.result { margin-top: 20px; }
.result-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; }
.out { min-height: 96px; font-size: 19px; line-height: 1.65; padding: 16px; border-radius: 12px; background: var(--bg); white-space: pre-wrap; border-left: 4px solid; border-image: linear-gradient(var(--a1), var(--a3)) 1; }
.out.muted { font-size: 16px; }
.timing { font-size: 14px; color: var(--muted); margin: 10px 0 0; }
.timing b { background: linear-gradient(90deg, var(--accent), var(--a3)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 16px; }
.ref { font-size: 14px; margin: 6px 0 0; }
.table-wrap { overflow-x: auto; margin-top: 12px; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; border-top: 0; }
td.t { min-width: 260px; font-size: 15px; }
td.n { white-space: nowrap; }
.hidden { display: none !important; }
footer { margin-top: 30px; }
@media (max-width: 600px) { .hero { padding: 42px 0 34px; } .lede { font-size: 16px; } .panel { padding: 16px; } .big { flex: 1; justify-content: center; } }

/* ---- offline check */
.proof { border-radius: 18px; padding: 22px; margin-bottom: 20px; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(120deg, var(--a1), var(--a2), var(--a3), var(--a4)) border-box; border: 2px solid transparent; display: grid; gap: 14px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 12px; background: var(--bg); }
.steps li div { display: grid; gap: 2px; }
.tick { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 14px; font-weight: 700; }
.steps li:nth-child(1) .tick::after { content: "1"; } .steps li:nth-child(2) .tick::after { content: "2"; } .steps li:nth-child(3) .tick::after { content: "3"; }
.steps li.done .tick { border: 0; background: linear-gradient(135deg, var(--a1), var(--a2)); color: #04131a; }
.steps li.done .tick::after { content: "✓"; }
.steps li.done { box-shadow: inset 0 0 0 1px var(--a1); }
.proof-state { margin: 0; font-size: 15px; min-height: 1.4em; }
.proof-state.win { font-weight: 600; background: linear-gradient(90deg, var(--accent), var(--a3)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 17px; }

/* ---- language flags */
.topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.topline .eyebrow { margin: 0; }
.langs { display: flex; gap: 6px; margin-left: auto; }
.flag { padding: 3px; border-radius: 7px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); line-height: 0; opacity: .55; }
.flag svg { width: 30px; height: 20px; border-radius: 3px; display: block; }
.flag[aria-pressed="true"] { opacity: 1; border-color: var(--a1); box-shadow: 0 0 0 2px rgba(45,226,166,.35); }
.flag:hover:not(:disabled) { opacity: 1; }

/* ---- airplane-mode call-out at the top */
.callout { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 8px 16px; border-radius: 99px; font-size: 15px; font-weight: 600; color: #04131a; text-decoration: none;
  background: linear-gradient(110deg, var(--a1), var(--a2) 50%, var(--a3)); box-shadow: 0 6px 24px -8px rgba(45,226,166,.6); }
.callout::before { content: "✈"; font-size: 16px; }
.callout:hover { filter: brightness(1.08); }

/* ---- playback of the transcribed audio */
.playback { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.playback audio { flex: 1; min-width: 240px; height: 40px; }

/* ---- funding logos */
.funding { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 14px; }
.funding img { display: block; height: auto; border-radius: 4px; }
.funding p { flex: 1 1 220px; margin: 0; }

/* ---- sample source / attribution */
.sample-src { flex-basis: 100%; font-size: 12px; color: var(--muted); }
.sample-src a { color: inherit; }
.badge.rec { background: transparent; border: 1px solid var(--a1); color: var(--ink); }