:root {
  --paper: #f3f1e8;
  --paper-2: #ebe8dc;
  --card: #f9f8f2;
  --ink: #253d32;
  --ink-2: #4a5b50;
  --muted: #5c665d;
  --upcoming: #909c8f;
  --line: #d8dccf;
  --line-2: #c5cbbd;
  --sage: #657862;
  --sage-ink: #546a50; /* sage for text: 4.5:1 or more on paper, paper-2 and card */
  --brass: #b69b68;
  --brass-ink: #7a6331;
  --brass-soft: #ece2cc;
  --blk: #c9d2c3;
  --blk-g: #dfe3d6;
  --turn: #ece2cc;
  --scene: #14231e;
  --scene-line: #14231e;
  --band: #253d32;
  --band-edge: #253d32;
  --band-ink: #e4eddf;
  --band-muted: #a9b9a8;
  --band-line: #3b5548;
  --logo-body: #253d32;
  --logo-dot: #b69b68;
  --logo-eye: #253d32;
  --art-filter: none;
  --art-blend: multiply;
  --art-opacity: .18;
  --shadow: 0 1px 0 rgba(37, 61, 50, .04), 0 12px 32px -18px rgba(37, 61, 50, .35);
  --serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --hand: "Klee One", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14231e;
    --paper-2: #182a23;
    --card: #1b2f28;
    --ink: #e4eddf;
    --ink-2: #bccab9;
    --muted: #8fa091;
    --upcoming: #71857a;
    --line: #2b4137;
    --line-2: #395246;
    --sage: #9fb39b;
    --sage-ink: #9fb39b;
    --brass: #c9ac76;
    --brass-ink: #d6bc8a;
    --brass-soft: #33382a;
    --blk: #3a5347;
    --blk-g: #26392f;
    --turn: #3a3a2b;
    --scene: #0c1612;
    --scene-line: #395246;
    --band: #1b2f28;
    --band-edge: #c9ac76;
    --band-ink: #e4eddf;
    --band-muted: #93a595;
    --band-line: #395246;
    --logo-body: #e4eddf;
    --logo-dot: #c9ac76;
    --logo-eye: #253d32;
    --art-filter: invert(1) grayscale(1);
    --art-blend: screen;
    --art-opacity: .13;
    --shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 16px 36px -20px rgba(0, 0, 0, .7);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14231e;
  --paper-2: #182a23;
  --card: #1b2f28;
  --ink: #e4eddf;
  --ink-2: #bccab9;
  --muted: #8fa091;
  --upcoming: #71857a;
  --line: #2b4137;
  --line-2: #395246;
  --sage: #9fb39b;
  --sage-ink: #9fb39b;
  --brass: #c9ac76;
  --brass-ink: #d6bc8a;
  --brass-soft: #33382a;
  --blk: #3a5347;
  --blk-g: #26392f;
  --turn: #3a3a2b;
  --scene: #0c1612;
  --scene-line: #395246;
  --band: #1b2f28;
  --band-edge: #c9ac76;
  --band-ink: #e4eddf;
  --band-muted: #93a595;
  --band-line: #395246;
  --logo-body: #e4eddf;
  --logo-dot: #c9ac76;
  --logo-eye: #253d32;
  --art-filter: invert(1) grayscale(1);
  --art-blend: screen;
  --art-opacity: .13;
  --shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 16px 36px -20px rgba(0, 0, 0, .7);
}

/* Word pages (/words, /words/<level>, /words/<slug>). words.py puts the landing page's colour tokens above this. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15.5px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; }
[lang="ja"] { font-family: var(--hand); }
h1, h2, h3 { text-wrap: balance; margin: 0; line-height: 1.15; }
a[rel="license"] { white-space: nowrap; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); }

/* Header, buttons and footer, as on the landing page */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 12px; }
.lockup { display: block; width: 120px; height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); font-size: 14px; }
.site-nav a { text-decoration: none; color: var(--ink-2); }
.site-nav a:hover { color: var(--ink); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.button:hover { background: color-mix(in srgb, var(--ink) 88%, var(--brass)); }
.button svg { width: 14px; height: 14px; }
.site-nav .button { min-height: 38px; padding: 0 16px; color: var(--paper); }
.button.light { background: var(--band-ink); color: var(--band); border-color: var(--band-ink); }
.site-nav button.button { font-size: 13.5px; }
.nw { white-space: nowrap; }
.button.light:hover { background: #fff; }
@media (max-width: 640px) { .site-nav .optional { display: none; } }
/* Chrome extensions install only on a computer: phones and tablets get a way to send themselves the link instead. */
.on-phone { display: none !important; }
@media (max-width: 760px), (pointer: coarse) { .on-computer { display: none !important; } .on-phone { display: flex !important; } }
.send-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.site-footer { padding-block: 40px 56px; border-top: 1px solid var(--line); margin-top: clamp(48px, 7vw, 88px); }
.cta + .site-footer { border-top: 0; margin-top: 0; }
.site-footer .lockup { width: 104px; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; }
.site-footer nav { display: flex; gap: 8px 20px; flex-wrap: wrap; font-size: 13.5px; }
.site-footer nav a { color: var(--ink-2); text-decoration: none; }
.site-footer nav a:hover { color: var(--ink); }
.credits { margin-top: 22px; font-size: 12.5px; line-height: 1.6; color: var(--muted); max-width: 92ch; }

/* Shared parts */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-block: 20px 0; font-size: 13.5px; color: var(--muted); }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .crumbs .last { display: none; } }
.level { color: var(--level); font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .level { color: var(--level-bright); } }
:root[data-theme="dark"] .level { color: var(--level-bright); }

/* Word page */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: 20px clamp(36px, 5vw, 56px); }
.art { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-2); background: var(--paper-2); box-shadow: var(--shadow); aspect-ratio: 16 / 9; }
.art img { width: 100%; height: 100%; object-fit: cover; }
.tag { font-size: 14px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 30px; }
.level-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--level); color: var(--level); font-weight: 700; font-size: 13.5px; letter-spacing: .02em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .level-pill { color: var(--level-bright); border-color: var(--level-bright); } }
:root[data-theme="dark"] .level-pill { color: var(--level-bright); border-color: var(--level-bright); }
.tag .estimate { font-size: 13px; color: var(--muted); }
.tag a { color: var(--muted); text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.tag a:hover { color: var(--ink); text-decoration-color: currentColor; }
.word { container-type: inline-size; }
/* The headword fills its column at most: long words (あけましておめでとうございます) get smaller rather than wrapping. */
/* --hw is the headword's size, from the characters on its longer line (--chars, set by words.py). */
.word h1, .word .meaning { --hw: max(34px, min(116px, calc(97cqi / var(--chars, 2)))); }
.word h1 { font-family: var(--hand); font-weight: 600; font-size: var(--hw); line-height: 1.12; letter-spacing: .02em; margin: 0 0 0 -.05em; word-break: auto-phrase; }
.word h1 ruby, .word h1 rt { ruby-align: center; }
.word h1 rt { font-family: var(--sans); font-weight: 500; font-size: max(14px, .19em); letter-spacing: .04em; color: var(--ink-2); padding-bottom: 0; position: relative; top: calc(var(--hw) * .055); }
.romaji { font-size: clamp(18px, 1.7vw, 20px); letter-spacing: .03em; color: var(--ink-2); margin-top: 6px; }
.word h1:has(wbr) + .romaji { margin-top: 12px; }
.meaning { font-family: var(--serif); font-weight: 700; font-size: min(clamp(32px, 3.6vw, 46px), max(24px, calc(var(--hw) * .6))); line-height: 1.1; margin-top: 10px; text-wrap: balance; }
.note { margin-top: 16px; color: var(--ink-2); max-width: 52ch; text-wrap: pretty; }
/* Japanese inside English text: Klee One is lighter and smaller than the sans around it. */
.note [lang="ja"], section h2 [lang="ja"] { font-weight: 600; font-size: 1.05em; color: var(--ink); }
.note-credit { display: block; margin-top: 4px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; align-items: start; } }

section h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); }
.study { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 64px; border-top: 1px solid var(--line); padding-top: clamp(28px, 4vw, 44px); }
@media (min-width: 1000px) { .study:has(.kanji) { grid-template-columns: minmax(0, 1fr) 300px; } .study .kanji { grid-column: 2; grid-row: 1; } .study .examples { grid-column: 1; grid-row: 1; }
  /* The kanji panel stays beside the sentences while they scroll. */
  .study .kanji { position: sticky; top: 88px; align-self: start; }
  /* The pager lines up with the sentences' column. */
  .word-page main:has(.kanji) .pager { max-width: min(820px, calc(100% - 364px)); } }
.kanji { padding-bottom: 28px; }
@media (max-width: 999px) { .kanji { padding-top: 28px; border-top: 1px solid var(--line); margin-top: 8px; } .kanji li:last-child { border-bottom: 0; } }
/* One row per kanji: the character, its meaning, and its on (katakana) and kun readings. */
.kanji ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 32px; }
@media (min-width: 1000px) { .kanji ul { grid-template-columns: 1fr; } }
.kanji li { display: flex; align-items: center; gap: 18px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.kanji-char { font-size: 46px; line-height: 1; font-weight: 600; flex: none; }
.kanji-text { display: grid; gap: 2px; min-width: 0; }
.kanji-meaning { font-size: 15.5px; color: var(--ink); }
.kanji-readings { display: grid; gap: 1px; font-size: 15px; color: var(--ink-2); margin-top: 2px; }
.kanji-readings > span { font-family: var(--hand); color: var(--ink-2); }
.kanji-readings .label { display: inline-block; min-width: 34px; font-family: var(--sans); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kanji-readings b { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--brass) 22%, transparent); border-radius: 4px; padding: 0 3px; }
.kanji-readings .oku { color: var(--muted); }
.examples { max-width: 820px; }
.examples-head { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; }
.toggles { display: flex; gap: 8px; }
.toggles button { min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--ink-2); font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.toggles button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.toggles button[aria-pressed="true"] { color: var(--ink); border-color: var(--ink-2); }
.toggles button[aria-pressed="true"]::before { background: currentColor; }
@media (pointer: coarse) { .toggles button { min-height: 44px; } }
.ja .phrase { white-space: nowrap; }
.examples ol { list-style: none; margin: 8px 0 0; padding: 0; }
.examples li { padding-block: 20px; border-bottom: 1px solid var(--line); }
.examples li:last-child { border-bottom: 0; }
.hide-furigana .ja rt { visibility: hidden; }
.hide-en .en:not(.shown) { position: relative; width: fit-content; min-width: 14em; max-width: 100%; color: transparent; background: var(--paper-2); border-radius: 6px; cursor: pointer; user-select: none; }
.hide-en .en:not(.shown)::after { content: "Show English"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--ink-2); }
.hide-en .en:not(.shown) span { color: transparent; }
.ja { font-size: clamp(22px, 2.6vw, 28px); line-height: 2.05; line-break: strict; }
.ja rt { font-family: var(--sans); font-weight: 500; font-size: max(11px, .42em); letter-spacing: 0; color: var(--ink-2); }
/* A reading stays centred over its word rather than spreading the kanji apart; site.js lets it overhang nearby kana. */
.ja ruby { ruby-align: center; }
/* The word being learned is in orange (N2's level colour, darkened to 4.5:1 on paper), with no underline. */
:root { --target: #ab4a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --target: #ff9340; } }
:root[data-theme="dark"] { --target: #ff9340; }
.ja mark { background: none; color: var(--target); }
.en { font-size: 16.5px; color: var(--ink-2); margin-top: 2px; }
.credit { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.credit a { color: var(--ink-2); text-underline-offset: 3px; }

/* The extension band */
.cta { background: var(--band); color: var(--band-ink); border-top: 2px solid var(--band-edge); margin-inline: calc(50% - 50vw); padding-block: clamp(36px, 5vw, 56px); }
.cta-inner { max-width: 1240px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "copy shot" "actions shot"; gap: 22px clamp(32px, 5vw, 72px); align-items: start; }
.cta-copy { grid-area: copy; align-self: end; }
.cta-actions { grid-area: actions; }
.cta-shot { grid-area: shot; margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--band-line); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6); align-self: center; }
.cta-shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.cta h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 2.8vw, 34px); color: var(--band-ink); }
.cta p { color: var(--band-muted); margin-top: 12px; max-width: 54ch; text-wrap: pretty; }
.store { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.store span { font-size: 13.5px; color: var(--band-muted); }
.store span a { color: var(--band-ink); text-underline-offset: 3px; }
@media (max-width: 760px) { .cta-inner { grid-template-columns: 1fr; grid-template-areas: "copy" "shot" "actions"; } .store .button { width: 100%; } }

/* Previous / all / next */
.pager { padding-top: clamp(20px, 3vw, 32px); border-top: 1px solid var(--line); max-width: 820px; display: grid; gap: 14px; justify-items: start; }
.pager-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100%; }
.pager a { text-decoration: none; }
.pager .prev, .pager .next { display: grid; gap: 0 12px; padding: 14px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--card); }
.pager .next { text-align: right; }
.pager-cards a:hover { border-color: var(--ink-2); }
.dir { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--brass-ink); }
.n-word { font-size: 24px; font-weight: 600; line-height: 1.4; }
.n-meaning { font-size: 13.5px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pager .all { font-size: 14px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.word-page main { padding-bottom: clamp(40px, 6vw, 64px); }
.n-meaning span { white-space: nowrap; }

/* Level pages and the index */
.level-head { padding-block: 24px clamp(28px, 4vw, 40px); max-width: 780px; }
.level-head h1 { font-family: var(--serif); font-weight: 700; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.1; }
.level-head p { color: var(--ink-2); margin-top: 14px; font-size: 16.5px; }
.level-head p a { color: var(--ink); text-underline-offset: 3px; }
.levels, .jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
/* The kana links stay in reach under the header while a long list scrolls. */
.jump { position: sticky; top: 62px; z-index: 10; margin-top: 0; padding-block: 10px; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.levels a, .jump a { min-width: 44px; min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 999px; text-decoration: none; font-size: 14.5px; }
.levels a[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.jump a { font-size: 17px; }
.jump a[aria-current] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (max-width: 640px) {
  /* All ten kana rows fit one line at 360px and up, so nothing is hidden off the edge. */
  .jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px; padding-block: 8px; border-bottom: 0; box-shadow: 0 1px 0 var(--line); }
  .jump::-webkit-scrollbar { display: none; }
  .jump a { flex: 1 0 32px; min-width: 32px; min-height: 36px; padding: 0; font-size: 16px; }
}
.row { scroll-margin-top: 128px; padding-top: 28px; }
.row h2 { font-family: var(--hand); font-weight: 600; font-size: 30px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.list { list-style: none; margin: 0; padding: 0; columns: 3 260px; column-gap: 32px; }
.list li { break-inside: avoid; }
.list a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); text-decoration: none; }
.list a:hover .l-meaning { color: var(--ink); }
.l-word { font-size: 20px; font-weight: 600; }
.l-reading { font-size: 13px; color: var(--ink-2); }
.l-meaning { font-size: 14px; color: var(--ink-2); }
.level-page main, .index-page main { padding-bottom: clamp(48px, 7vw, 88px); }
.level-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.level-cards a { display: grid; gap: 6px; height: 100%; padding: 22px 24px; border: 1px solid var(--line-2); border-radius: 14px; background: var(--card); text-decoration: none; box-shadow: var(--shadow); }
.level-cards a:hover { border-color: var(--ink-2); }
.c-head { display: flex; align-items: baseline; gap: 12px; }
.level-cards .level { font-size: 30px; line-height: 1; }
.c-title { font-family: var(--serif); font-weight: 700; font-size: 20px; }
.c-count { color: var(--ink-2); font-size: 14px; }
.c-sample { font-size: 20px; line-height: 1.4; letter-spacing: .04em; color: var(--ink-2); display: flex; gap: 4px 14px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 640px) { .level-cards a { padding: 16px 18px; } .c-sample { font-size: 17px; } }

/* In the dark theme the extension band is lifted off the page, which is nearly the same green. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cta { background: #22392f; } }
:root[data-theme="dark"] .cta { background: #22392f; }