/* Yomiraku beta — the product's own tokens, lifted from the landing page so
   the thing testers use and the thing they were sold look like one product. */
:root{
  --paper:#F7F3EA; --surface:#FFFDF8; --sunk:#ECE8DF;
  --ink:#201E1A; --ink-2:#4A453D; --ink-3:#716C64;
  --rule:#DDD6CB; --rule-2:#E8E2D7;
  --moss:#285A49; --moss-2:#1E4739; --deep:#193F35;
  --vermilion:#C45A43; --ochre:#9A6F1E;
  --moss-wash:#E3ECE7; --ochre-wash:#F5EEDD; --verm-wash:#F7E7E2;
  --shadow:0 1px 2px rgba(30,25,20,.04), 0 8px 24px rgba(30,25,20,.05);
  --cta-bg:var(--moss); --cta-bg-hover:var(--moss-2); --cta-ink:#fff;
  /* the logo's own two colours. On paper the tile and the wordmark are the
     same deep green; on a dark ground the wordmark has to lift off it, so
     they part company. Named separately for exactly that reason. */
  --logo-ink:#0E3A35; --logo-tile:#0E3A35;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#17150F; --surface:#1E1C15; --sunk:#131108;
  --ink:#EDE7DA; --ink-2:#BEB7A9; --ink-3:#9C958A;
  --rule:#322E25; --rule-2:#26231B;
  --moss:#7FB89F; --moss-2:#9BCCB5; --deep:#0F2820;
  --vermilion:#E08A72; --ochre:#D2A857;
  --moss-wash:#17241E; --ochre-wash:#2A2213; --verm-wash:#2E1F1A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
  --cta-ink:#10201A;
  --logo-ink:#EDE7DA; --logo-tile:#1E4A3E;
}}
:root[data-theme="dark"]{
  --paper:#17150F; --surface:#1E1C15; --sunk:#131108;
  --ink:#EDE7DA; --ink-2:#BEB7A9; --ink-3:#9C958A;
  --rule:#322E25; --rule-2:#26231B;
  --moss:#7FB89F; --moss-2:#9BCCB5; --deep:#0F2820;
  --vermilion:#E08A72; --ochre:#D2A857;
  --moss-wash:#17241E; --ochre-wash:#2A2213; --verm-wash:#2E1F1A;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.5);
  --cta-ink:#10201A;
  --logo-ink:#EDE7DA; --logo-tile:#1E4A3E;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
  font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 22px 90px}
nav.top{background:var(--surface);border-bottom:1px solid var(--rule)}
nav.top .in{max-width:760px;margin:0 auto;padding:14px 22px;display:flex;
  align-items:center;gap:16px}
nav.top .brand{display:flex;align-items:center;text-decoration:none;
  flex:0 0 auto}
/* Sized by height, because the nav bar is what constrains it; the
   viewBox keeps the width in proportion. */
nav.top .logoimg{display:block;height:42px;width:auto}
/* Links must not wrap: 「今日」 broken across two lines reads as two words. */
nav.top a.lnk{white-space:nowrap}
@media(max-width:560px){
  /* Tile only. Three labelled links with counts do not fit beside the full
     lockup on a phone, and a wordmark clipped mid-letter is worse than a
     wordmark left out. The tile alone is still the mark. */
  nav.top .logoimg{height:34px;width:34px;border-radius:8px}
  nav.top .in{padding:9px 14px;gap:8px}
  nav.top .sp{gap:13px;font-size:12.5px}
  /* The name and level go: the name is not news, and every screen that needs
     the level shows it where the level is actually decided. */
  nav.top .who{display:none}
}
nav.top .sp{margin-left:auto;display:flex;gap:16px;font-size:13.5px}
nav.top a.lnk{color:var(--ink-2);text-decoration:none}
nav.top a.lnk:hover{color:var(--moss)}
/* The page you are on should not look like somewhere to go. */
nav.top a.lnk.here{color:var(--ink);font-weight:700}
/* How much is waiting. Zero is shown greyed rather than hidden: "practice 0"
   and "practice" look the same at a glance, and one of them is a promise. */
nav.top .ct{display:inline-block;min-width:17px;margin-left:5px;padding:0 5px;
  border-radius:9px;background:var(--moss-wash);color:var(--moss);
  font-size:11px;font-weight:700;text-align:center;line-height:17px;
  font-variant-numeric:tabular-nums}
nav.top .ct:empty{display:none}
nav.top .who{font-size:12.5px;color:var(--ink-3)}
h1{font-family:"Shippori Mincho",serif;font-weight:500;font-size:26px;
  margin:30px 0 8px;line-height:1.4}
h2{font-family:"Shippori Mincho",serif;font-weight:500;font-size:19px;margin:30px 0 10px}
p{margin:0 0 14px}
.lede{color:var(--ink-2);font-size:15px}
/* Monospace here was a stylistic tic that survived the move to English,
   where "Tap any word for its meaning" stopped reading as a caption and
   started reading as code. Body font, tabular figures for the count. */
.meta{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;margin-bottom:18px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:20px 22px;box-shadow:var(--shadow);margin:16px 0}
.cta{display:inline-block;background:var(--cta-bg);color:var(--cta-ink);
  font-family:inherit;font-size:15.5px;font-weight:600;padding:0 26px;height:46px;
  line-height:46px;border-radius:9px;border:0;text-decoration:none;cursor:pointer;
  white-space:nowrap;transition:background .18s}
.cta:hover{background:var(--cta-bg-hover)}
/* the day's stories on the home card */
.count{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;
  letter-spacing:.02em;margin:0 0 6px}
.done-list{list-style:none;margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--rule);
  font-size:14.5px}
.done-list li{display:flex;align-items:baseline;gap:8px;margin:4px 0}
.done-list .tick{color:var(--moss)}
.done-list a{color:var(--ink-2)}
.done-list .lvl{font-size:12px;color:var(--ink-3)}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ghost{background:transparent;color:var(--moss);border:1px solid var(--rule);
  font-family:inherit;font-size:13.5px;font-weight:600;padding:8px 16px;
  border-radius:8px;cursor:pointer}
.ghost:hover{background:var(--sunk)}
.pill{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 11px;
  border-radius:999px;background:var(--moss-wash);color:var(--moss)}
.empty{color:var(--ink-3);font-size:14.5px}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}