/* tsubu's site: one sheet shared by every page.
   Layout: a single column of paper, 1180px wide at most, with a 16px gutter that also clears a
   phone's side bar. Colours are traditional Japanese colours (values from the Wairo Daijiten),
   chosen to sit on a cool off-white: shironeri paper, koiai ink, ruri blue, with shu and yamabuki
   as accents. Washi paper does not turn dark, so there is one deliberate look and no dark theme.
   Type: Shippori Mincho B1 for display, Zen Kaku Gothic New for body, IBM Plex Mono for data. */
:root {
  --shironeri: #f3f3f2;   /* 白練 paper */
  --koiai: #0f2350;       /* 濃藍 ink */
  --ruri: #1e50a2;        /* 瑠璃 blue */
  --konjo: #192f60;       /* 紺青 deep field */
  --shu: #eb6101;         /* 朱 accent: lines and marks, text only in 濃藍 */
  --yamabuki: #f8b500;    /* 山吹 highlight on dark fields */
  --shirooi: #c1e4e9;     /* 白藍 readings on blue */
  --ginnezu: #afafb0;     /* 銀鼠 quiet lines on dark */
  --gunjo: #4c6cb3;       /* 群青 secondary text on paper */
  --paper: var(--shironeri);
  --ink: var(--koiai);
  --rule: #d2d4d8;        /* hairlines on paper */
  --well: #e9eaec;        /* code and example wells on paper */
  --display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
html { background: var(--paper); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 15px; line-height: 1.7; -webkit-text-size-adjust: 100%; }
/* one column; the footer sits at the bottom of the window when the page is short */
.wrap { flex: 1 0 auto; display: flex; flex-direction: column; width: 100%; max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap > * { flex: 0 0 auto; }
.wrap > :nth-last-child(2) { margin-bottom: 48px; } /* the last section keeps its distance from the footer */
*, *::before, *::after { box-sizing: border-box; }
img, svg, canvas { max-width: 100%; }
a { color: var(--ruri); text-decoration-color: color-mix(in srgb, var(--ruri) 45%, transparent); text-underline-offset: 0.16em; }
a:hover { text-decoration-color: var(--ruri); }
:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }
code, kbd, pre, .mono { font-family: var(--mono); }
code { font-size: 0.92em; color: var(--ink); } /* inline code keeps the ink colour even in quiet text, so it reads on the well */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.3; text-wrap: balance; margin: 0; letter-spacing: 0; }

/* one language at a time: the switch sets data-lang on <html> and the stylesheet hides the others */
:root:not([data-lang="zh"]):not([data-lang="ja"]) :is(.zh, .ja) { display: none !important; }
:root[data-lang="zh"] :is(.en, .ja) { display: none !important; }
:root[data-lang="ja"] :is(.en, .zh) { display: none !important; }
:root[data-lang="zh"] body { font-family: var(--body), "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; }
:root[data-lang="ja"] body { line-break: strict; }

/* masthead and navigation. Links are set like tsubu segments: a dotted line under each, and the
   current page on a solid band, which is how the library marks the segment being spoken. */
.mast { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-block: 22px 14px; }
.mark { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: 0.02em; margin: 0; text-decoration: none; color: var(--ink); display: inline-flex; align-items: baseline; gap: 0.3em; }
.mark .kanji { font-size: 0.8em; color: var(--ruri); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.nav a { color: var(--ink); text-decoration: none; padding: 1px 0.3em; border-bottom: 2px dotted var(--gunjo); }
.nav a:hover { border-bottom-style: solid; }
.nav a[aria-current="page"] { background: var(--ruri); color: var(--paper); border-radius: 3px; border-bottom-color: transparent; }
.nav .langs { display: inline-flex; border: 1px solid var(--gunjo); border-radius: 999px; overflow: hidden; }
.nav .lang { font: inherit; font-size: 13px; font-weight: 500; color: var(--ink); background: none; border: 0; padding: 1px 9px; cursor: pointer; }
.nav .lang + .lang { border-left: 1px solid var(--gunjo); }
.nav .lang:hover { background: var(--well); }
.nav .lang[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lede { margin: 0; max-width: 60ch; font-size: 15px; }

/* sentences drawn on the paper itself, without a preset: the site's own colour groups, so that
   every state, applied or not, meets the thresholds (the label grains are never applied) */
.label .kanji .tsubu, .layer .tsubu, .facts .sent .tsubu, .stage.paper .tsubu { --tsubu-backdrop: #f3f3f2; --tsubu-text-color: var(--ink); --tsubu-ruby-color: var(--ruri); --tsubu-underline-color: var(--gunjo);
  --tsubu-current-bg: var(--ruri); --tsubu-current-color: var(--paper); --tsubu-current-ruby-color: var(--ruri); --tsubu-current-underline-color: var(--shirooi); --tsubu-past-color: var(--gunjo); --tsubu-past-ruby-color: var(--gunjo); }

/* section labels: a kanji drawn by tsubu at 22px, then the title at 13px; the proportion is the
   same on every page, so the rule outranks the running-text heading sizes */
h2.label, .prose h2.label, .api h2.label { display: flex; gap: 12px; align-items: baseline; margin: 0 0 12px; font-size: 13px; letter-spacing: 0.06em; color: var(--gunjo); font-family: var(--body); font-weight: 500; line-height: 1.4; }
.prose h2.label { margin-top: 44px; }
.prose h2.label:first-child { margin-top: 0; }
.label .kanji { font-family: var(--display); font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: 0; --tsubu-ruby-size: 0.45em; --tsubu-ruby-color: var(--ruri); --tsubu-underline-color: transparent; --tsubu-ruby-reserve: 0.2em; }
.label .kanji .tsubu { line-height: 1.2; }

/* running text */
.page-title { font-size: clamp(30px, 4.6vw, 44px); margin: 18px 0 6px; }
.page-lede { margin: 0 0 28px; max-width: 64ch; font-size: 16px; color: var(--ink); }
.prose > p, .prose > ul, .prose > ol { max-width: 68ch; }
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 14px; }
.prose li { margin: 0 0 4px; }
.prose h2 { font-size: 26px; margin: 44px 0 12px; }
.prose h3 { font-size: 19px; margin: 28px 0 10px; }
.prose code { background: var(--well); padding: 0.05em 0.3em; border-radius: 3px; }
.prose pre code { background: none; padding: 0; }
pre { margin: 0 0 16px; padding: 14px 16px; background: var(--well); border-radius: 4px; overflow-x: auto; font-size: 13px; line-height: 1.6; color: var(--ink); tab-size: 2; }
pre .c { color: var(--ruri); font-style: italic; } pre .s { color: #a34300; } pre .k { font-weight: 700; } /* comment, string (shu darkened to 5:1 on the well), keyword */
.muted { color: var(--gunjo); }
.small { font-size: 13px; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
.api table { table-layout: fixed; min-width: 720px; }
.api col.c1 { width: 8.3333%; } .api col.c2 { width: 16.6667%; } .api col.c3 { width: 25%; } .api col.c4 { width: 33.3333%; } .api col.c8 { width: 66.6667%; } .api col.c10 { width: 83.3333%; }
.api td code, .api th code { white-space: normal; overflow-wrap: break-word; }
.cell-head { display: none; }
/* On a phone a table's rows stack: the name, then each value, labelled with its column. */
@media (max-width: 600px) {
  .api table { min-width: 0; table-layout: auto; }
  .api colgroup, .api thead { display: none; }
  .api tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--rule); }
  .api td { display: block; padding: 2px 0; border: 0; }
  .api td:first-child { font-weight: 700; }
  .api .cell-head { display: inline; margin-right: 6px; font-size: 12px; letter-spacing: 0.04em; color: var(--gunjo); }
}
.table-wrap { overflow-x: auto; margin: 0 0 16px; }
th, td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--rule); }
th { font-weight: 700; font-family: var(--body); font-size: 13px; letter-spacing: 0.04em; color: var(--gunjo); }
td code, th code { white-space: nowrap; }

/* two columns of text and example that stack on a phone */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 40px; align-items: start; }
.cols > * { min-width: 0; }
@media (max-width: 760px) { .cols { grid-template-columns: minmax(0, 1fr); } }

/* an example: a sentence drawn by tsubu on a surface, with a small transport under it.
   The web fonts have a content area of about 1.45em; tsubu draws the highlight and the underline
   from the em box of the text (see "The em box" in tsubu.css), so nothing here needs to move the
   readings. A little more line height and reserve than the defaults keep the examples airy. */
.stage .tsubu, .facts .sent .tsubu { --tsubu-line-height: 1.9; --tsubu-ruby-reserve: 0.45em; }
.ex { margin: 16px 0 24px; }
.stage { position: relative; padding: 24px 26px 28px; border-radius: 6px; background: #ffffff; font-family: var(--body); font-size: clamp(22px, 3.2vw, 34px); overflow: hidden; }
.stage[data-tsubu-theme="dark"] { background: #0f172a; }
.stage[data-tsubu-theme="media"] { background: linear-gradient(165deg, #fffbeb 0%, #fcd34d 30%, #ea580c 55%, #1e3a8a 80%, #020617 100%); padding: 34px 28px 36px; }
.stage.paper { background: var(--paper); font-family: var(--display); font-weight: 700; --tsubu-ruby-weight: 500; --tsubu-ruby-size: 0.42em; }
.stage.vertical { height: 380px; display: flex; justify-content: flex-end; }
.transport { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-block: 10px 0; font-size: 13px; }
.transport button, .btn { font: inherit; font-size: 13px; font-weight: 500; color: var(--paper); background: var(--ink); border: 0; border-radius: 999px; padding: 5px 15px; cursor: pointer; }
.btn.quiet { color: var(--ink); background: none; border: 1px solid var(--gunjo); }
.transport input[type=range], .ctl input[type=range] { flex: 1; min-width: 120px; accent-color: var(--ruri); margin: 0; }
.transport output, .ctl output { font-family: var(--mono); font-variant-numeric: tabular-nums; min-width: 6ch; font-size: 13px; }
.transport label, .ctl label { display: inline-flex; align-items: center; gap: 6px; }
.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; margin: 8px 0 0; }
.ctl select, .ctl input[type=number], .ctl input[type=text] { font: inherit; font-size: 13px; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: 3px 6px; }
.ctl input[type=checkbox], .ctl input[type=radio], .transport input[type=checkbox] { accent-color: var(--ruri); margin: 0; }
.readout { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.readout .ok { color: #1a6b3a; } .readout .bad { color: #b13a00; }
textarea.json { width: 100%; min-height: 220px; font-family: var(--mono); font-size: 12.5px; line-height: 1.5; color: var(--ink); background: #fff; border: 1px solid var(--rule); border-radius: 4px; padding: 10px 12px; resize: vertical; tab-size: 2; }
.err { margin: 6px 0 0; font-family: var(--mono); font-size: 12px; color: #b13a00; min-height: 1.5em; overflow-wrap: anywhere; }

/* cards for the gallery and for the home page's pointers */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.card { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.card h3 { font-size: 16px; font-family: var(--body); font-weight: 700; margin: 0; }
.card .stage { font-size: clamp(20px, 2.4vw, 26px); flex: 1; }
.card .meta { font-family: var(--mono); font-size: 12px; color: var(--gunjo); margin: 0; }
.card .meta .fail { color: #b13a00; }
.pointer { display: block; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 4px; text-decoration: none; color: var(--ink); background: #fff; }
.pointer:hover { border-color: var(--ruri); }
.pointer b { display: block; font-family: var(--display); font-size: 18px; margin: 0 0 4px; }
.pointer span { font-size: 14px; color: var(--ink); }

footer.foot { margin-top: auto; padding-block: 32px 40px; border-top: 1px solid var(--rule); font-size: 12.5px; color: var(--gunjo); display: flex; flex-wrap: wrap; gap: 6px 24px; justify-content: space-between; }
footer.foot a { color: var(--gunjo); }
@media (max-width: 600px) { .mark { font-size: 22px; } body { font-size: 14.5px; } .stage { padding: 18px 16px 22px; } }
@media (prefers-reduced-motion: no-preference) { .nav a, .btn, .transport button { transition: background-color 120ms, border-color 120ms; } }