:root{
  --bg:#fafafc; --surface:#fff; --surface2:#f4f4f8;
  --ink:#1b1a23; --ink2:#4a4860; --muted:#6f6c85;
  --line:#e6e4ee; --line2:#d7d4e4;
  --accent:#4f46d6; --accent-soft:#eeecfd; --accent-ink:#3b34ab;
  --good:#1f7a45; --good-bg:#e6f5ec; --bad:#a83232; --bad-bg:#fbeaea;
  --shadow:0 1px 2px rgba(24,20,50,.05), 0 6px 18px rgba(24,20,50,.05);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#14131b; --surface:#1c1b25; --surface2:#232231;
    --ink:#eceaf5; --ink2:#bab7cc; --muted:#9894ad;
    --line:#2c2a3a; --line2:#3a3750;
    --accent:#a99dff; --accent-soft:#272441; --accent-ink:#c4bcff;
    --good:#6bd39a; --good-bg:#17301f; --bad:#f0918a; --bad-bg:#331a1c;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 18px rgba(0,0,0,.25);
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.25;text-wrap:balance;margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
img{max-width:100%;height:auto;display:block}   /* height:auto or the HTML height attr stretches them */
.wrap{max-width:820px;margin:0 auto;padding:0 20px}

/* top bar + tabs */
.top{border-bottom:1px solid var(--line);background:var(--surface)}
.top .wrap{display:flex;align-items:stretch;gap:16px;height:64px}
.navleft{display:flex;align-items:stretch;gap:24px;min-width:0}
.brand{display:flex;align-items:center}
.brand:hover{text-decoration:none}
.brand img{height:48px;width:auto;transition:opacity .15s}
.brand:hover img{opacity:.85}
/* tabs read as text with a thick underline, so the Play button is the only "button" */
.tabs{display:flex;gap:22px}
.tabs a{display:flex;align-items:center;white-space:nowrap;font-size:14.5px;font-weight:560;
  color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-1px;
  transition:color .12s,border-color .12s}
.tabs a:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--line2)}
.tabs a.on{color:var(--ink);font-weight:660;border-bottom-color:var(--accent)}
/* official Google Play badge, pinned right */
.gp-nav{margin-left:auto;align-self:center;display:flex;line-height:0}
.gp-nav img{width:116px;height:auto;display:block;transition:opacity .15s}
.gp-nav:hover{text-decoration:none}
.gp-nav:hover img{opacity:.82}

/* intro */
.intro{padding:44px 0 26px}
.intro h1{font-size:clamp(28px,5.2vw,40px);letter-spacing:-.02em;font-weight:720;margin-bottom:12px}
.intro p{color:var(--ink2);font-size:17.5px;max-width:62ch;margin:0}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.pill{font-size:13px;font-weight:550;color:var(--ink2);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.pill b{color:var(--ink);font-variant-numeric:tabular-nums}

/* practice */
.practice{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:22px;box-shadow:var(--shadow);margin:26px 0 8px}
.practice h2{color:var(--muted);font-weight:600;margin-bottom:16px;
  text-transform:uppercase;font-size:12.5px;letter-spacing:.09em}
.q-word{font-size:26px;font-weight:700;letter-spacing:-.01em;margin:0 0 4px}
.q-ex{color:var(--muted);font-style:italic;margin:0 0 16px;font-size:15px}
.opt{display:block;width:100%;text-align:left;background:var(--surface2);border:1.5px solid var(--line);
  border-radius:10px;padding:11px 14px;margin:8px 0;font:inherit;font-size:15px;color:var(--ink);
  cursor:pointer;transition:border-color .12s,background .12s}
.opt:hover:enabled{border-color:var(--accent);background:var(--accent-soft)}
.opt.right{background:var(--good-bg);border-color:var(--good);color:var(--good);font-weight:600}
.opt.wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.q-bar{display:flex;justify-content:space-between;color:var(--muted);font-size:13px;margin-top:14px;
  font-variant-numeric:tabular-nums}
.q-again{font:inherit;font-size:14px;font-weight:600;color:var(--accent);background:none;border:0;
  cursor:pointer;padding:0;margin-top:6px}

/* controls */
.controls{position:sticky;top:0;z-index:9;background:var(--bg);padding:16px 0 12px;
  border-bottom:1px solid var(--line);margin-top:34px}
.search{position:relative}
.search input{width:100%;padding:12px 14px 12px 40px;border-radius:11px;border:1.5px solid var(--line2);
  background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  color:var(--muted);pointer-events:none}
.search kbd{position:absolute;right:11px;top:50%;transform:translateY(-50%);font:inherit;font-size:11px;
  color:var(--muted);border:1px solid var(--line2);border-radius:5px;padding:2px 6px;background:var(--surface2)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.chip{font:inherit;font-size:13.5px;font-weight:550;color:var(--ink2);background:var(--surface);
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;display:flex;gap:7px;
  align-items:center;transition:.12s}
.chip span{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--line2)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.on span{color:rgba(255,255,255,.75)}
.alpha{display:flex;flex-wrap:wrap;gap:4px;margin-top:11px}
.alpha a{font-size:12.5px;font-weight:600;color:var(--ink2);padding:3px 8px;border-radius:6px}
.alpha a:hover{background:var(--accent-soft);color:var(--accent-ink);text-decoration:none}
.count{color:var(--muted);font-size:13.5px;margin:12px 2px 0;font-variant-numeric:tabular-nums}

/* word list */
.list{padding-bottom:20px}
.lt{font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--muted);margin:28px 0 10px;
  padding-bottom:7px;border-bottom:1px solid var(--line);scroll-margin-top:150px;
  display:flex;justify-content:space-between}
.lt-n{font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums}
.w{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:14px 16px;
  margin:8px 0;scroll-margin-top:150px}
.w:target{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.w-h{display:flex;align-items:baseline;gap:10px}
.w-t{font-style:normal;font-weight:680;font-size:17.5px;letter-spacing:-.01em;color:var(--ink)}
.w-t:hover{color:var(--accent);text-decoration:none}
.w-p{font-size:12.5px;font-weight:550;color:var(--accent-ink);background:var(--accent-soft);
  border-radius:5px;padding:2px 7px;flex:none}
.w-lk{margin-left:auto;color:var(--line2);font-size:13px;opacity:0;transition:.12s}
.w:hover .w-lk,.w-lk:focus{opacity:1}
.w-lk:hover{color:var(--accent);text-decoration:none}
.w-d{margin:6px 0 0;color:var(--ink)}
.w-e{margin:5px 0 0;color:var(--muted);font-style:italic;font-size:14.5px}
.empty{text-align:center;color:var(--muted);padding:40px 0}

/* store badges (official artwork, unmodified).
   The two buttons sit on one baseline: the Google PNG carries ~10px of required
   clear space below its button at this size, which the negative margin cancels,
   and the "coming soon" label is taken out of flow so it can't lift Apple's badge. */
.badges{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;padding-bottom:22px}
.badges img{display:block;height:auto;max-width:100%}
.gp-body{display:inline-flex;line-height:0;margin-bottom:-10px}
.gp-body:hover{text-decoration:none}
.gp-body img{width:155px;transition:opacity .15s}
.gp-body:hover img{opacity:.82}
.ios-soon{position:relative;display:inline-flex;line-height:0}
.ios-soon img{width:120px;opacity:.38;filter:grayscale(1)}
.ios-soon em{position:absolute;top:100%;left:0;right:0;margin-top:7px;text-align:center;
  font-style:normal;font-size:11px;font-weight:660;letter-spacing:.07em;line-height:1;
  text-transform:uppercase;color:var(--muted)}
.ghero .ios-soon em{color:#6f6157}   /* hero is light in both themes */

/* teaser strip on the word list page */
.teaser{border-top:1px solid var(--line);background:var(--surface);margin-top:20px;padding:44px 0}
.teaser h2{font-size:clamp(20px,3.2vw,25px);letter-spacing:-.015em;margin-bottom:10px}
.teaser p{color:var(--ink2);max-width:60ch;margin:0 0 20px}
.teaser .row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.teaser .more{font-weight:600;font-size:15px}
.tshots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 24px;max-width:500px}
.tshots img{border:1px solid var(--line2);border-radius:12px;width:100%;
  box-shadow:0 2px 6px rgba(24,20,50,.08),0 10px 24px rgba(24,20,50,.10)}

/* game page hero — a deliberately light "poster" section; it keeps its own
   colours in both themes because the artwork is a cream painting */
.ghero{background:#fbf5eb url('/img/hero-bg.jpg') center bottom/cover no-repeat;
  color:#2a2320;border-bottom:1px solid rgba(60,40,20,.08)}
.ghero-in{display:grid;grid-template-columns:1.04fr .96fr;gap:44px;align-items:center;
  padding:52px 20px 60px}
.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 14px;
  font-size:12.5px;font-weight:700;letter-spacing:.16em;color:#a8863c}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(168,134,60,.55),transparent)}
.ghero h1{font-family:Georgia,"Times New Roman",serif;font-weight:700;
  font-size:clamp(30px,4.6vw,50px);line-height:1.1;letter-spacing:-.015em;color:#241d2e;margin-bottom:16px}
.ghero h1 em{font-style:normal;color:#7d2b3a}
.ghero .lede{color:#5b5048;font-size:17px;max-width:46ch;margin:0 0 26px}
.feats{display:flex;gap:24px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 28px}
.feats li{width:98px;text-align:center}
.fi{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(168,134,60,.45);
  display:grid;place-items:center;margin:0 auto 9px;color:#a8863c;background:rgba(255,255,255,.45)}
.fi svg{width:21px;height:21px}
.feats b{display:block;font-size:10.5px;font-weight:750;letter-spacing:.07em;color:#3a2f28}
.feats em{display:block;font-style:normal;font-size:11.5px;color:#6f6157;margin-top:3px;line-height:1.35}
/* real device render with the screenshot perspective-warped into its screen;
   the angle is baked into the image, so the shadow follows its alpha */
.ghero-art{display:flex;justify-content:center}
.phone{width:min(272px,82%);height:auto;
  filter:drop-shadow(12px 22px 30px rgba(45,28,64,.26)) drop-shadow(3px 5px 9px rgba(45,28,64,.16))}
/* screenshot gallery: horizontal scroll-snap, the app-store pattern for tall portrait shots */
.gallery{position:relative;margin:32px 0 8px}
.gscroll{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;padding:4px 2px 16px;scroll-padding-left:2px;
  scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.gscroll::-webkit-scrollbar{height:8px}
.gscroll::-webkit-scrollbar-track{background:transparent}
.gscroll::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px}
.gshot{flex:0 0 228px;margin:0;scroll-snap-align:start}
.gshot img{width:100%;height:auto;border:1px solid var(--line2);border-radius:14px;
  box-shadow:0 2px 6px rgba(24,20,50,.08),0 12px 28px rgba(24,20,50,.12)}
.gshot figcaption{margin-top:11px;font-size:13.5px;color:var(--ink2);line-height:1.45;text-align:center}
.gnav{position:absolute;top:210px;z-index:2;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line2);background:var(--surface);color:var(--ink);
  font-size:19px;line-height:0;cursor:pointer;box-shadow:var(--shadow);
  display:grid;place-items:center;transition:opacity .15s,background .15s}
.gnav:hover{background:var(--surface2)}
.gnav.prev{left:-14px}
.gnav.next{right:-14px}
.gnav[disabled]{opacity:0;pointer-events:none}
@media (hover:none){.gnav{display:none}}   /* touch devices just swipe */
.sec{padding:38px 0 0}
.sec h2{font-size:clamp(20px,3.2vw,25px);letter-spacing:-.015em;margin-bottom:12px}
.sec p{color:var(--ink2);max-width:64ch}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.card h3{font-size:15.5px;font-weight:660;margin-bottom:5px}
.card p{font-size:14.5px;color:var(--ink2);margin:0}
.cta{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;
  text-align:center;margin:38px 0 10px;box-shadow:var(--shadow)}
.cta h2{font-size:22px;margin-bottom:8px}
.cta p{color:var(--ink2);margin:0 0 18px}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}

/* single-word pages */
.crumb{display:flex;gap:7px;align-items:center;flex-wrap:wrap;padding:22px 0 0;
  font-size:13.5px;color:var(--muted)}
.crumb a{color:var(--muted)}
.crumb a:hover{color:var(--accent)}
.wd{padding:14px 0 8px}
.wd h1{font-size:clamp(34px,6vw,52px);letter-spacing:-.02em;font-weight:720;margin-bottom:8px}
.wd .pos{display:inline-block;font-size:13px;font-weight:600;color:var(--accent-ink);
  background:var(--accent-soft);border-radius:6px;padding:3px 10px;margin-bottom:18px}
.wd .def{font-size:21px;line-height:1.5;color:var(--ink);margin:0 0 18px;max-width:52ch}
.wd .ex{border-left:3px solid var(--line2);padding:2px 0 2px 16px;margin:0 0 8px;
  font-style:italic;color:var(--ink2);font-size:17px;max-width:56ch}
.wsec{margin-top:34px}
.wsec h2{font-size:16px;font-weight:660;margin-bottom:12px}
.wsec h2 span{color:var(--muted);font-weight:500}
.wq{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:18px 20px;
  box-shadow:var(--shadow)}
.wq p{margin:0 0 12px;font-size:15px;color:var(--ink2)}
.wq button{display:block;width:100%;text-align:left;background:var(--surface2);
  border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;margin:8px 0;
  font:inherit;font-size:15px;color:var(--ink);cursor:pointer;transition:.12s}
.wq button:hover:enabled{border-color:var(--accent);background:var(--accent-soft)}
.wq button.right{background:var(--good-bg);border-color:var(--good);color:var(--good);font-weight:600}
.wq button.wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.nots{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.nots li{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;color:var(--ink2);font-size:15px}
.nots li b{color:var(--muted);font-weight:600;font-size:12px;letter-spacing:.05em;
  text-transform:uppercase;display:block;margin-bottom:2px}
.rel{display:flex;flex-wrap:wrap;gap:8px}
.rel a{background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:7px 15px;font-size:14.5px;font-weight:550;color:var(--ink)}
.rel a:hover{border-color:var(--accent);color:var(--accent-ink);text-decoration:none;
  background:var(--accent-soft)}
.wcta{margin:34px 0 10px;padding:20px 22px;background:var(--surface);border:1px solid var(--line);
  border-radius:13px}
.wcta p{margin:0 0 14px;color:var(--ink2)}
.wnav{display:flex;justify-content:space-between;gap:14px;margin:30px 0 6px;font-size:14.5px}

footer{padding:34px 0 46px;color:var(--muted);font-size:13.5px;text-align:center}
.hidden{display:none!important}
@media (max-width:640px){
  .gshot{flex-basis:186px}
  .tshots{grid-template-columns:repeat(3,1fr);max-width:340px}
  .cards{grid-template-columns:1fr}
  .search kbd{display:none}
  .intro{padding:32px 0 20px}
  .ghero-in{grid-template-columns:1fr;gap:30px;padding:36px 20px 44px;text-align:center}
  .ghero .lede{margin-inline:auto}
  .eyebrow{justify-content:center}
  .eyebrow::after{display:none}
  .feats{justify-content:center;gap:18px}
  .badges{justify-content:center}
  .ghero-art{order:-1}
  .phone{width:min(208px,58%);filter:drop-shadow(8px 14px 22px rgba(45,28,64,.24))}
}
/* phones: drop the wordmark so the tabs and the CTA both stay on one line */
@media (max-width:600px){
  .top .wrap{gap:12px}
  .navleft{gap:0}
  .brand{display:none}
  .tabs{gap:18px}
  .tabs a{font-size:14px}
  .gp-nav img{width:104px}
}
@media (max-width:400px){
  .tabs{gap:14px}
  .tabs a{font-size:13.5px}
  .gp-nav img{width:94px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ── guides ── prose column, narrower than the word list for readability.
   ~68ch is the usual comfortable measure for running text. */
.post{max-width:68ch;padding-top:34px;padding-bottom:56px}
.post h1{font-size:34px;line-height:1.2;margin:0 0 10px}
.post h2{font-size:21px;line-height:1.3;margin:34px 0 10px}
.post p,.post li{font-size:17px;line-height:1.7}
.post p{margin:0 0 16px}
.post ul{margin:0 0 18px;padding-left:22px}
.post li{margin-bottom:9px}
.post .lede{font-size:19px;line-height:1.6}
.post .crumb{font-size:14px;margin:0 0 14px}
.post .meta{font-size:14px;opacity:.65;margin:0 0 26px}
.post a{text-decoration:underline;text-underline-offset:2px}
.post .wordlist li b{text-transform:lowercase}
.postlist{list-style:none;padding:0;margin:26px 0 0}
.postlist li{margin-bottom:22px}
.postlist li a{font-size:20px;text-decoration:none}
.postlist li a:hover{text-decoration:underline}
.postlist li span{display:block;font-size:16px;line-height:1.6;opacity:.75;margin-top:4px}
.post-cta{margin-top:44px;padding:22px;border-radius:14px;border:1px solid rgba(128,128,128,.28)}
.post-cta p{font-size:16px;margin:0 0 14px}
@media (max-width:600px){
  .post h1{font-size:27px}
  .post h2{font-size:19px}
  .post p,.post li{font-size:16px}
  .post .lede{font-size:17.5px}
}