@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
/* RealPTE design system v3 — "light studio"
   Single light theme by choice: airy cool-white canvas, soft aurora washes, white cards
   with layered shadows, one sunset accent, geometric sans, mono numbers.
   Depth comes from light and shadow, never from a dark background. */
:root {
  color-scheme: light;
  --paper: #F7F8FB;
  --paper-2: #EEF1F6;
  --card: #FFFFFF;
  --card-2: #F4F6FA;
  --ink: #0B1220;
  --ink-2: #3D4758;
  --mute: #6B7585;
  --line: rgba(11,18,32,.07);
  --line-2: rgba(11,18,32,.13);
  /* Brand colour lives only in these tokens; every page reads them. Three palettes below, switch with ?theme=indigo|blue|teal */
  --ember: #4B45E0;
  --ember-2: #7C79FF;
  --ember-ink: #FFFFFF;
  --ember-soft: #EEEDFF;
  --ember-deep: #3A33B8;
  --grad: linear-gradient(135deg, #4B45E0 0%, #6F7DFF 100%);
  --glow: rgba(75,69,224,.30);
  --wash-1: #E6E4FF;
  --wash-2: #DEEBFF;
  --wash-3: #E9E7FF;
  --stage-glow: rgba(111,125,255,.42);
  --rec: #FF3B30;              /* recording red: only the mic button and the live dot */
  --rec-2: #FF6B61;
  --rec-soft: #FFE5E3;
  --rec-glow: rgba(255,59,48,.35);
  --blue: #3B82F6;
  --blue-soft: #E8F0FF;
  --violet: #8B5CF6;
  --violet-soft: #F0E9FF;
  --good: #15934A;
  --good-soft: #DCF7E6;
  --warn: #C8720A;
  --warn-soft: #FFF1D6;
  --bad: #D92D20;
  --bad-soft: #FFE4E0;
  --room: #FFFFFF;
  --room-2: #F4F6FA;
  --room-ink: #0B1220;
  --room-mute: #6B7585;
  --deck: #0F1420;
  --deck-2: #1B2232;
  --deck-ink: #F3F5F9;
  --deck-mute: #8A94A6;
  --sh-1: 0 1px 2px rgba(11,18,32,.05), 0 1px 3px rgba(11,18,32,.04);
  --sh-2: 0 2px 4px rgba(11,18,32,.03), 0 18px 50px -18px rgba(11,18,32,.18);
  --sh-3: 0 4px 10px rgba(11,18,32,.04), 0 40px 90px -30px rgba(11,18,32,.30);
  --shadow: var(--sh-2);
  --f-display: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Plus Jakarta Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 22px;
  --r-s: 12px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--f-display); margin: 0; letter-spacing: -0.025em; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 6px; }

.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--sh-1); font-family: var(--f-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 8px var(--glow); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wrap { width: min(1200px, 100%); margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); }

/* Aurora wash: soft multi-hue light, never a dark ground */
.aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .75; }
.aurora .p { width: 760px; height: 560px; left: -180px; top: -200px; background: radial-gradient(closest-side, #FFD2BF, transparent); animation: drift 16s ease-in-out infinite alternate; }
.aurora .v { width: 680px; height: 520px; right: -200px; top: -140px; background: radial-gradient(closest-side, #DCD2FF, transparent); animation: drift 20s ease-in-out infinite alternate-reverse; }
.aurora .s { width: 620px; height: 480px; left: 35%; top: 260px; background: radial-gradient(closest-side, #CFE6FF, transparent); animation: drift 24s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(40px, 24px) scale(1.06); } }
.dots { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(11,18,32,.10) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(ellipse 60% 55% at 50% 0%, #000 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 0%, #000 20%, transparent 70%); pointer-events: none; }

/* Nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; padding-top: 14px; pointer-events: none; }
.nav-in { pointer-events: auto; display: flex; align-items: center; gap: 24px; height: 60px; padding: 0 10px 0 18px; border-radius: 999px; background: rgba(255,255,255,.74); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 0 rgba(11,18,32,.04), 0 14px 40px -16px rgba(11,18,32,.22); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); }
.brand { display: inline-flex; align-items: baseline; gap: 0; font-family: var(--f-display); font-weight: 800; font-size: 22px; letter-spacing: -0.04em; line-height: 1; color: var(--ink); }
.brand .mark { width: 28px; height: 28px; margin-right: 9px; border-radius: 9px; background: var(--grad); box-shadow: 0 6px 16px -4px var(--glow); position: relative; }
.brand .mark::after { content: ""; position: absolute; left: 9px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
/* Countdown / status clock: number dead-centred, label outside the circle */
.clock { display: grid; justify-items: center; gap: 6px; flex: none; }
.clock .c { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.clock .c svg { position: absolute; inset: 0; width: 72px; height: 72px; transform: rotate(-90deg); }
.clock .c circle { fill: none; stroke-width: 6; }
.clock .c .bg { stroke: var(--paper-2); }
.clock .c .fg { stroke: var(--ember); stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 0; transition: stroke-dashoffset 1s linear; }
.clock.live .c .fg { stroke: var(--rec); }
.clock .c b { font-family: var(--f-mono); font-size: 24px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; position: relative; }
.clock small { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
.brand b { color: var(--ember); font-weight: 800; }
.nav-links { display: flex; gap: 2px; font-size: 14.5px; color: var(--ink-2); }
.nav-links a { padding: 8px 13px; border-radius: 999px; transition: background .15s ease, color .15s ease; }
.nav-links a:hover { color: var(--ink); background: var(--paper-2); }
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--paper-2); font-weight: 600; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lang { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; font-size: 13px; color: var(--ink-2); background: var(--card); }
.lang span { font-family: var(--f-mono); font-size: 12px; color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 600; font-size: 14.5px; white-space: nowrap; transition: transform .15s ease, box-shadow .2s ease, background .15s ease, border-color .15s ease; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad); color: var(--ember-ink); box-shadow: 0 10px 24px -8px var(--glow), 0 1px 0 rgba(255,255,255,.35) inset; }
.btn-primary:hover { box-shadow: 0 14px 30px -8px var(--glow), 0 1px 0 rgba(255,255,255,.35) inset; transform: translateY(-1px); }
.btn-ghost { border-color: var(--line-2); background: var(--card); color: var(--ink); box-shadow: var(--sh-1); }
.btn-ghost:hover { border-color: rgba(11,18,32,.22); transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #1b2437; }
.btn-sm { height: 34px; padding: 0 14px; font-size: 13px; }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--card); align-items: center; justify-content: center; }
.menu-btn svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; }
.drawer { display: none; pointer-events: auto; margin-top: 10px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--sh-2); padding: 10px 18px 18px; }
.drawer.open { display: block; }
.drawer a { display: block; padding: 12px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
.drawer .row { display: flex; gap: 10px; padding-top: 14px; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-right .btn-ghost, .nav-right .lang { display: none; }
  .menu-btn { display: inline-flex; }
}

/* Surfaces */
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); }
.card.lift { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.card.lift:hover { transform: translateY(-4px); box-shadow: var(--sh-2); border-color: var(--line-2); }
.card.deep { box-shadow: var(--sh-2); }
.card.hot { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: 0 24px 60px -24px var(--glow); }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .02em; border: 1px solid var(--line); color: var(--ink-2); background: var(--card); white-space: nowrap; }
.chip.sp { border-color: transparent; background: var(--violet-soft); color: #6D28D9; }
.chip.wr { border-color: transparent; background: var(--good-soft); color: #166534; }
.chip.rd { border-color: transparent; background: #FFEDE6; color: #C2410C; }
.chip.ls { border-color: transparent; background: var(--warn-soft); color: #92400E; }
.chip.new { border-color: transparent; background: var(--ember-soft); color: #1D4ED8; font-weight: 600; }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 7px; font-family: var(--f-mono); font-size: 12px; font-weight: 500; }
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.ember { background: var(--ember-soft); color: #1D4ED8; }

/* Score bars (GSE 10–90) */
.skill { display: grid; grid-template-columns: 92px 1fr 36px; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); }
.skill .bar { position: relative; height: 8px; border-radius: 999px; background: var(--paper-2); overflow: visible; }
.skill .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: linear-gradient(90deg, #3D4758, #0B1220); }
.skill .bar i.e { background: var(--grad); box-shadow: 0 4px 12px -2px var(--glow); }
.skill .bar b { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ember); border-radius: 2px; }
.skill .v { text-align: right; font-weight: 700; color: var(--ink); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding-block: 40px 56px; color: var(--mute); font-size: 14px; background: #fff; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.foot h4 { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 10px; font-weight: 600; }
.foot a { display: block; padding: 4px 0; }
.foot a.brand { display: inline-flex; padding: 0; }
.foot a:hover { color: var(--ink); }
.foot .legal { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 13px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

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

/* ---------- Palettes ---------- */
:root[data-theme="blue"] { --ember: #1A6DF0; --ember-2: #4C8DFF; --ember-soft: #E6EFFF; --ember-deep: #1D4ED8; --grad: linear-gradient(135deg, #1A6DF0 0%, #4C8DFF 100%); --glow: rgba(26,109,240,.32); --wash-1: #DCE8FF; --wash-2: #E6DEFF; --wash-3: #D9EAFF; --stage-glow: rgba(76,141,255,.45); }
:root[data-theme="ember"] { --ember: #FF5A2E; --ember-2: #FF9A3D; --ember-soft: #FFEDE6; --ember-deep: #C2410C; --grad: linear-gradient(135deg, #FF5A2E 0%, #FF9A3D 100%); --glow: rgba(255,90,46,.32); --wash-1: #FFE1D2; --wash-2: #E6DEFF; --wash-3: #FFE9DC; --stage-glow: rgba(255,154,61,.40); }
:root[data-theme="teal"] { --ember: #0F766E; --ember-2: #2BB3A3; --ember-soft: #DDF3EF; --ember-deep: #0B5A54; --grad: linear-gradient(135deg, #0F766E 0%, #2BB3A3 100%); --glow: rgba(15,118,110,.28); --wash-1: #DCF3EE; --wash-2: #E2ECFF; --wash-3: #E0F4EF; --stage-glow: rgba(43,179,163,.35); }

/* ---------- Language switcher (globe button + sheet) and the one-time offer bar ---------- */
.langbtn { height: 36px; padding: 0 10px 0 8px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--sh-1); color: var(--ink-2); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; flex: none; cursor: pointer; }
.langbtn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.langbtn:hover { color: var(--ink); border-color: rgba(11,18,32,.25); }
.langov { position: fixed; inset: 0; z-index: 90; background: transparent; opacity: 0; transition: opacity .2s; }
@media (max-width: 640px) { .langov { background: rgba(11,18,32,.28); backdrop-filter: blur(2px); } }
.langov.on { opacity: 1; }
.langsheet { position: fixed; z-index: 91; background: #fff; border-radius: 18px; box-shadow: 0 0 0 1px var(--line-2), var(--sh-3); padding: 14px 10px 12px; width: min(360px, calc(100vw - 32px)); right: 16px; top: 72px; opacity: 0; transform: translateY(-6px) scale(.98); transition: opacity .2s, transform .2s cubic-bezier(.2,.7,.2,1); }
.langsheet.on { opacity: 1; transform: none; }
.langsheet .lh { display: flex; justify-content: space-between; align-items: center; padding: 0 8px 4px; }
.langsheet .lh b { font-size: 15px; font-weight: 700; }
.langsheet .lh button { width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; }
.langsheet p { font-size: 12.5px; color: var(--mute); padding: 0 8px 10px; line-height: 1.5; }
.langsheet .lrow { display: grid; grid-template-columns: 1fr auto 20px; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 10px; border-radius: 12px; border: 0; background: transparent; font: inherit; cursor: pointer; }
.langsheet .lrow:hover { background: var(--paper-2); }
.langsheet .lrow .nn { font-size: 15px; font-weight: 600; color: var(--ink); }
.langsheet .lrow .en { font-size: 12.5px; color: var(--mute); }
.langsheet .lrow .tick { color: var(--ember); font-weight: 700; opacity: 0; }
.langsheet .lrow.on { background: var(--ember-soft); } .langsheet .lrow.on .tick { opacity: 1; }
@media (max-width: 640px) { .langsheet { right: 0; left: 0; top: auto; bottom: 0; width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); transform: translateY(20px); } }
.langbar { position: sticky; top: 0; z-index: 95; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; padding: 9px 16px; background: var(--ink); color: #fff; font-size: 13.5px; line-height: 1.4; }
.langbar button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.langbar button.y { background: #fff; color: var(--ink); border-color: #fff; }
html[data-lang="hi"] body, html[data-lang="ne"] body { font-family: "Plus Jakarta Sans", "Noto Sans Devanagari", system-ui, sans-serif; }
html[data-lang="zh"] body { font-family: "Plus Jakarta Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
.gloss { display: block; margin-top: 4px; font-size: 13px; color: var(--mute); line-height: 1.5; }
.gloss:empty { display: none; }

/* phone: the globe button is icon-only, the nav keeps the primary button and the menu */
@media (max-width: 480px) { .langbtn .cur { display: none; } .langbtn { padding: 0 9px; } .nav-right { gap: 6px; } }
.aurora { overflow: hidden; }

/* phones: the nav keeps logo, globe, one primary button and the menu */
@media (max-width: 420px) { .nav-right { gap: 6px; } .nav-right .btn-primary { padding: 0 12px; font-size: 13.5px; } .nav-in { gap: 8px; } .brand { font-size: 19px; } }

.avatar-link .avatar, .nav .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; font-weight: 600; }

/* =====================================================================
   Design system v4 · "ink" — warm ivory ground, near-black ink for every action,
   one signature colour used sparingly (logo, the hero phrase, small marks).
   On the practice screens the only colours left are the meaningful ones:
   red = lost marks, amber = slightly off, green = right, red mic = recording.
   Signatures: ?theme=ink-amber | ink-forest | ink-cobalt
   ===================================================================== */
:root[data-theme^="ink"] {
  --paper: #F6F3EE; --paper-2: #ECE7DF; --card: #FFFFFF; --card-2: #FAF8F4;
  --ink: #16140F; --ink-2: #4A453D; --mute: #7D766B;
  --line: rgba(22,20,15,.08); --line-2: rgba(22,20,15,.15);
  --sh-1: 0 1px 2px rgba(22,20,15,.05);
  --sh-2: 0 1px 2px rgba(22,20,15,.04), 0 18px 40px -22px rgba(22,20,15,.22);
  --sh-3: 0 2px 6px rgba(22,20,15,.04), 0 40px 80px -36px rgba(22,20,15,.32);
  --ember: #16140F; --ember-2: #3A352D; --ember-ink: #FFFFFF; --ember-soft: #EFEBE4; --ember-deep: #16140F;
  --grad: linear-gradient(#16140F, #16140F); --glow: transparent;
  --violet: #6B6458; --violet-soft: #F1EDE6;
  --good: #1E7A45; --good-soft: #E1F2E7; --warn: #B7660C; --warn-soft: #FBEEDC; --bad: #C8321F; --bad-soft: #FBE5E1;
  --wash-2: #EFE9DF; --wash-3: #F1ECE4;
}
:root[data-theme="ink-amber"]  { --sig: #E25E14; --sig-2: #F2913A; --sig-soft: #FBE7D6; --wash-1: #FBE7D6; --stage-glow: rgba(242,145,58,.28); }
:root[data-theme="ink-forest"] { --sig: #1D6A50; --sig-2: #3F9B77; --sig-soft: #DDEFE6; --wash-1: #E2EFE8; --stage-glow: rgba(63,155,119,.22); }
:root[data-theme="ink-cobalt"] { --sig: #2B3FD6; --sig-2: #5468F2; --sig-soft: #E2E5FB; --wash-1: #E4E6F8; --stage-glow: rgba(84,104,242,.20); }

/* Actions: solid ink, no coloured glow */
:root[data-theme^="ink"] .btn-primary { background: var(--ink); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 16px -10px rgba(22,20,15,.6); }
:root[data-theme^="ink"] .btn-primary:hover { background: #2A261F; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 10px 20px -12px rgba(22,20,15,.7); }
:root[data-theme^="ink"] .btn-ghost { background: #fff; }
/* The signature colour appears only here */
:root[data-theme^="ink"] .brand .mark { background: var(--sig); box-shadow: none; }
:root[data-theme^="ink"] .brand b { color: var(--sig); }
:root[data-theme^="ink"] .eyebrow::before { background: var(--sig); box-shadow: none; }
:root[data-theme^="ink"] .grad-text { background: none; color: var(--sig); -webkit-text-fill-color: var(--sig); font-family: "Instrument Serif", "Songti SC", "Noto Serif SC", "STSong", serif; font-style: italic; font-weight: 400; letter-spacing: -0.015em; }
:root[data-theme^="ink"] .hero h1 .grad-text .w { background: none; color: var(--sig); -webkit-text-fill-color: var(--sig); }
:root[data-theme^="ink"] .hero h1 { letter-spacing: -0.04em; }
/* Ground: quieter light, warm, one hint of the signature */
:root[data-theme^="ink"] .aurora i { opacity: .55; filter: blur(80px); }
:root[data-theme^="ink"] .aurora .p { background: radial-gradient(closest-side, var(--sig-soft), transparent); }
:root[data-theme^="ink"] .aurora .v { background: radial-gradient(closest-side, #EDE6DA, transparent); }
:root[data-theme^="ink"] .aurora .s { background: radial-gradient(closest-side, #F3EEE6, transparent); }
:root[data-theme^="ink"] .dots { background-image: radial-gradient(rgba(22,20,15,.08) 1px, transparent 1px); }
:root[data-theme^="ink"] .nav-in { background: rgba(255,255,255,.82); border-color: rgba(22,20,15,.06); }
/* Labels: neutral fills; the four sections keep a small coloured dot instead of a coloured pill */
:root[data-theme^="ink"] .chip { background: #fff; color: var(--ink-2); }
:root[data-theme^="ink"] .chip.sp, :root[data-theme^="ink"] .chip.wr, :root[data-theme^="ink"] .chip.rd, :root[data-theme^="ink"] .chip.ls { background: var(--paper-2); color: var(--ink-2); }
:root[data-theme^="ink"] .chip.sp::before, :root[data-theme^="ink"] .chip.wr::before, :root[data-theme^="ink"] .chip.rd::before, :root[data-theme^="ink"] .chip.ls::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
:root[data-theme^="ink"] .chip.sp::before { background: #8A6BD1; } :root[data-theme^="ink"] .chip.wr::before { background: #2E8B57; } :root[data-theme^="ink"] .chip.rd::before { background: #D9822B; } :root[data-theme^="ink"] .chip.ls::before { background: #3C7DC4; }
:root[data-theme^="ink"] .chip.new, :root[data-theme^="ink"] .pill.ember { background: var(--sig-soft); color: var(--sig); }
/* Cards: hairline border, highlighted plan gets an ink outline instead of a gradient ring */
:root[data-theme^="ink"] .card.hot { background: #fff; border: 1.5px solid var(--ink); box-shadow: var(--sh-2); }
:root[data-theme^="ink"] .tile .ico { background: var(--paper-2) !important; color: var(--ink) !important; box-shadow: none !important; }
:root[data-theme^="ink"] .final { background: var(--ink) !important; box-shadow: var(--sh-3) !important; }
:root[data-theme^="ink"] .final::before { background: radial-gradient(ellipse, color-mix(in srgb, var(--sig) 45%, transparent), transparent 60%) !important; opacity: .7; }
:root[data-theme^="ink"] .final .btn { background: #fff; color: var(--ink); }
/* Teaching panels: warm neutral instead of lavender */
:root[data-theme^="ink"] .meaning, :root[data-theme^="ink"] .l1 { background: var(--card-2); color: var(--ink-2); border: 1px solid var(--line); }
:root[data-theme^="ink"] .peekme, :root[data-theme^="ink"] .explain .sec.me, :root[data-theme^="ink"] .pin { background: var(--card-2); border: 1px solid var(--line); }
:root[data-theme^="ink"] .peekme span, :root[data-theme^="ink"] .pin .ph { color: var(--sig); }
:root[data-theme^="ink"] .msg.q { background: var(--ink); box-shadow: none; }
:root[data-theme^="ink"] .coach .tt::before { background: var(--sig); box-shadow: 0 0 0 4px var(--sig-soft); }
:root[data-theme^="ink"] .rail .new, :root[data-theme^="ink"] .rail button[aria-current="true"] .new { background: var(--sig-soft); color: var(--sig); }

/* Signature phrase: italic serif only where italics exist (Latin script); Chinese upright serif, Devanagari upright sans */
html[lang="zh"]:is([data-theme^="ink"]) .grad-text { font-style: normal; font-family: "Songti SC", "Noto Serif SC", "STSong", serif; font-weight: 600; letter-spacing: 0; }
html[lang="hi"]:is([data-theme^="ink"]) .grad-text, html[lang="ne"]:is([data-theme^="ink"]) .grad-text { font-style: normal; font-family: inherit; font-weight: 800; }
:root[data-theme^="ink"] .hist .in { fill: var(--sig); }
:root[data-theme^="ink"] .hist .zero { stroke: var(--ink); }
:root[data-theme^="ink"] .spark i.hot { background: var(--sig); }