/* Hestia brand · "Learn by the hearth" (01.11.2026)
   Structure borrowed from the Leomen playbook (surface ladder instead of borders, one loud action colour, eyebrows,
   serif-italic accent word, number rows without boxes, glow on the primary). Colours, type and mark are Hestia's own.
   Jade = every action. Ember = the flame and progress. Gold = what you collect. Warm night, never pure black. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@500;600&family=Fraunces:ital,opsz,wght@0,9..144,600;1,9..144,400;1,9..144,500&family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&display=swap');

:root{
  --bg:#100C0A; --s1:#17120F; --s2:#1D1714; --s3:#251E1A; --s4:#2F2621;
  --line:rgba(255,236,220,.07); --line-strong:rgba(255,236,220,.13);
  --ink:#F8F2EB; --muted:#CDBFB2; --subtle:#A39282;
  --go:#3BD6A2; --go-deep:#22B585; --go-ink:#03251A; --aqua-text:#5FE3B6; --aqua-soft:rgba(59,214,162,.12); --aqua-line:rgba(59,214,162,.42);
  --ember:#FF7A3D; --ember-2:#FFB547; --ember-soft:rgba(255,122,61,.13); --ember-line:rgba(255,122,61,.42);
  --gold:#EDBE57; --gold-soft:rgba(237,190,87,.12); --gold-line:rgba(237,190,87,.4); --gold-ink:#2A1C08;
  --bad:#FF6B6B; --bad-text:#FF9090; --bad-soft:rgba(255,107,107,.11); --warn:#F7B54A;
  --sky:#140D12; --star:#FFF1D6; --star-glow:rgba(255,181,71,.6); --cline:rgba(59,214,162,.35);
  --display:'Geist',system-ui,-apple-system,sans-serif; --body:'Geist',system-ui,-apple-system,sans-serif;
  --serif:'Fraunces',Georgia,serif; --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --r:18px; --r-sm:12px;
  --card:0 1px 0 0 rgba(255,240,225,.05) inset,0 1px 2px rgba(0,0,0,.35),0 14px 30px -18px rgba(0,0,0,.7);
  --glow-go:0 0 0 1px rgba(59,214,162,.3),0 10px 30px -10px rgba(59,214,162,.55);
  --glow-ember:0 0 0 1px rgba(255,122,61,.25),0 10px 30px -12px rgba(255,122,61,.5);
  color-scheme:dark;
}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]){
  --bg:#F7F1E8; --s1:#FFFCF7; --s2:#FBF6EE; --s3:#FFFFFF; --s4:#EFE5D8;
  --line:rgba(60,35,20,.09); --line-strong:rgba(60,35,20,.16);
  --ink:#2A1D15; --muted:#5E4C40; --subtle:#7A685B;
  --go:#18B783; --go-deep:#0E9A6C; --go-ink:#FFFFFF; --aqua-text:#0B7F5A; --aqua-soft:rgba(14,154,108,.1); --aqua-line:rgba(14,154,108,.38);
  --ember:#D9561C; --ember-2:#E8902A; --ember-soft:rgba(217,86,28,.1); --ember-line:rgba(217,86,28,.35);
  --gold:#9A6C12; --gold-soft:rgba(237,190,87,.2); --gold-line:rgba(154,108,18,.38); --gold-ink:#2A1C08;
  --bad-text:#B4232F; --bad-soft:rgba(180,35,47,.07);
  --card:0 1px 0 0 rgba(255,255,255,.7) inset,0 1px 2px rgba(60,35,20,.06),0 12px 28px -18px rgba(60,35,20,.28);
  --glow-go:0 0 0 1px rgba(14,154,108,.25),0 10px 26px -12px rgba(14,154,108,.45);
  color-scheme:light; } }
:root[data-theme="light"]{
  --bg:#F7F1E8; --s1:#FFFCF7; --s2:#FBF6EE; --s3:#FFFFFF; --s4:#EFE5D8;
  --line:rgba(60,35,20,.09); --line-strong:rgba(60,35,20,.16);
  --ink:#2A1D15; --muted:#5E4C40; --subtle:#7A685B;
  --go:#18B783; --go-deep:#0E9A6C; --go-ink:#FFFFFF; --aqua-text:#0B7F5A; --aqua-soft:rgba(14,154,108,.1); --aqua-line:rgba(14,154,108,.38);
  --ember:#D9561C; --ember-2:#E8902A; --ember-soft:rgba(217,86,28,.1); --ember-line:rgba(217,86,28,.35);
  --gold:#9A6C12; --gold-soft:rgba(237,190,87,.2); --gold-line:rgba(154,108,18,.38); --gold-ink:#2A1C08;
  --bad-text:#B4232F; --bad-soft:rgba(180,35,47,.07);
  --card:0 1px 0 0 rgba(255,255,255,.7) inset,0 1px 2px rgba(60,35,20,.06),0 12px 28px -18px rgba(60,35,20,.28);
  --glow-go:0 0 0 1px rgba(14,154,108,.25),0 10px 26px -12px rgba(14,154,108,.45);
  color-scheme:light; }

/* base type */
html,body{font-family:var(--body);letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.025em}
h2{font-size:26px!important;line-height:1.15}
.serif,.say{font-family:var(--serif)}
.say{font-style:italic;font-weight:400;letter-spacing:-.01em}
.it{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ember);letter-spacing:-.01em}
.mono,.pill,.score,.stats b,.srow2 b{font-family:var(--mono);font-feature-settings:"tnum"}

/* eyebrows: small, uppercase, the brand colour */
.lbl,.kicker,.navlbl{font-family:var(--display);font-weight:600;letter-spacing:.09em;text-transform:uppercase}
.lbl{color:var(--ember-2);font-size:12px}
:root[data-theme="light"] .lbl{color:var(--ember)}
@media (prefers-color-scheme: light){ :root:not([data-theme="dark"]) .lbl{color:var(--ember)} }
.kicker{color:var(--aqua-text)}

/* surfaces: a ladder, lit from above, almost no borders */
.card{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--card)}
.card.next{background:radial-gradient(120% 90% at 0% 0%,rgba(59,214,162,.13),transparent 60%),linear-gradient(180deg,var(--s2),var(--s1));border-color:var(--aqua-line)}
.ghost{background:var(--s2);border:1px solid var(--line-strong);border-radius:999px;font-weight:600}
.go{border-radius:999px;background:linear-gradient(180deg,#4BE4B0,var(--go) 55%,var(--go-deep));color:var(--go-ink);font-family:var(--display);font-weight:700;letter-spacing:-.01em;box-shadow:var(--glow-go)}
:root[data-theme="light"] .go{background:linear-gradient(180deg,#21C990,var(--go) 55%,var(--go-deep))}
.go[disabled]{background:var(--s4);color:var(--subtle)}
.field{border-radius:14px;border:1.5px solid var(--line-strong);background:var(--s1)}
.field:focus{border-color:var(--go);box-shadow:0 0 0 4px var(--aqua-soft)}
.pill{background:var(--s2);border:1px solid var(--line)}
.pill.ember{background:var(--ember-soft);border-color:var(--ember-line);color:var(--ember-2)}
.lang{background:var(--s2);border:1px solid var(--line)}
.lang[aria-pressed="true"]{background:var(--s3);border-color:var(--gold-line);box-shadow:0 0 0 3px var(--gold-soft)}
.tabs{background:color-mix(in srgb,var(--bg) 88%,transparent);border-top:1px solid var(--line)}
.tabs button[aria-current="page"]{color:var(--ink)}
.tabs button[aria-current="page"] svg{color:var(--ember)}
.tabs button[aria-current="page"]::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--ember);margin-top:1px}
.ovtop{background:var(--bg);border-bottom:1px solid var(--line)}
.bar{background:var(--s4)} .bar i{background:linear-gradient(90deg,var(--go),var(--ember-2))}
.mopt,.tile{border-radius:16px;background:var(--s2);border:1.5px solid var(--line-strong)}
.win{border-radius:18px}
.fb{border-radius:14px}

/* the wordmark: "hestia", the i carries a small flame */
.wordmark{font-family:var(--serif);font-weight:600;font-size:40px;letter-spacing:-.03em;line-height:1;display:inline-flex;align-items:flex-end}
.wordmark .wm-i{position:relative;display:inline-block}
.wordmark .wm-flame{position:absolute;left:50%;top:.04em;width:.3em;height:.36em;transform:translateX(calc(-50% + .045em))}
.tagline{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:18px;margin:8px 0 22px}

/* Today: greeting header + a number row without boxes (Leomen pattern, our words) */
.hello{margin:4px 2px 14px}
.hello .lbl{display:block;margin-bottom:6px}
.hello h1{font-size:30px;line-height:1.1;margin:0}
.hello .say{font-size:17px;color:var(--muted);margin-top:8px}
.nums{display:grid;grid-template-columns:repeat(3,1fr);margin:6px 0 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nums div{padding:12px 6px;text-align:center}
.nums div+div{border-left:1px solid var(--line)}
.nums b{display:block;font-family:var(--mono);font-size:21px;font-weight:600;color:var(--ink)}
.nums span{font-size:12px;color:var(--subtle);letter-spacing:.02em}
.nums .em b{color:var(--ember-2)}
.hearthrow{display:flex;align-items:center;gap:12px}