/* 十干女子図鑑 style.css — tools/build.js が tokens.css → base.css を連結しコメントを除いた生成物。手で編集しない（原本は src/css/） */
@property --bloom {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
:root {
  --color-primary: #2A2522;
  --color-secondary: #6B625A;
  --color-neutral: #F7F3EC;
  --color-surface: #FFFDF9;
  --color-on-surface: #2A2522;
  --color-line: #E4DCD0;
  --color-error: #A3362B;
  --color-error-wash: #F7E3DF;
  --color-kinoe-ink: #2E5B3C;      --color-kinoe-pigment: #5C9A6B;      --color-kinoe-wash: #BBDDC4;
  --color-kinoto-ink: #555E2C;     --color-kinoto-pigment: #A0B369;     --color-kinoto-wash: #D2E0AF;
  --color-hinoe-ink: #9A3525;      --color-hinoe-pigment: #E97D56;      --color-hinoe-wash: #F9C7B1;
  --color-hinoto-ink: #7A2638;     --color-hinoto-pigment: #D37D8E;     --color-hinoto-wash: #F6C2C8;
  --color-tsuchinoe-ink: #71461F;  --color-tsuchinoe-pigment: #B78851;  --color-tsuchinoe-wash: #E0C29B;
  --color-tsuchinoto-ink: #675832; --color-tsuchinoto-pigment: #CFB76A; --color-tsuchinoto-wash: #EFE0A7;
  --color-kanoe-ink: #474C50;      --color-kanoe-pigment: #9AA1A7;      --color-kanoe-wash: #BFC5C9;
  --color-kanoto-ink: #62426A;     --color-kanoto-pigment: #B99CC3;     --color-kanoto-wash: #DFCFE7;
  --color-mizunoe-ink: #1D4A78;    --color-mizunoe-pigment: #3E7FB8;    --color-mizunoe-wash: #ABCAEB;
  --color-mizunoto-ink: #0F5E66;   --color-mizunoto-pigment: #73B6BB;   --color-mizunoto-wash: #B8E2E5;
  --type-ink: var(--color-primary);
  --type-pigment: var(--color-secondary);
  --type-wash: var(--color-neutral);
  --type-wash-2: var(--color-neutral);
  --rule-on-wash: rgb(42 37 34 / .24);
  --color-glass: rgb(255 253 249 / .8);
  --color-scrim: rgb(42 37 34 / .36);
  --font-mincho: "Shippori Mincho B1", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-gothic: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-latin: "Cormorant Garamond", "Times New Roman", serif;
  --fs-display-kanji: 160px;
  --fs-display-kanji-sm: 96px;
  --fs-display-title: 72px;
  --fs-display-title-sm: 48px;
  --fs-type-name-lg: 96px;
  --fs-type-name: 64px;
  --fs-type-name-sm: 40px;
  --fs-headline-lg: 36px;
  --fs-headline-md: 26px;
  --fs-headline-sm: 20px;
  --fs-catch: 26px;
  --fs-catch-sm: 20px;
  --fs-logotype: 20px;
  --fs-body-lg: 18px;
  --fs-body-md: 16px;
  --fs-body-sm: 14px;
  --fs-input-md: 18px;
  --fs-label-lg: 16px;
  --fs-label-md: 14px;
  --fs-label-reading: 14px;
  --fs-label-plate: 16px;
  --fs-numeral: 28px;
  --fs-min: 12px;
  --fs-label-xs: 13px;
  --fs-label-plate-sm: 14px;
  --fs-catch-cell: 15px;
  --fs-svg-wheel-el: 30px;
  --fs-svg-wheel-stem: 16px;
  --index-band-h: 44px;
  --index-band-h-lg: 64px;
  --top-fv-below: 154px;
  --top-stage-h: clamp(220px, 100svh - var(--header-h-sm) - var(--index-band-h) - var(--top-fv-below), 560px);
  --top-fv-h-lg: clamp(640px, 100svh - var(--header-h), 1000px);
  --top-stage-h-tablet: 46svh;
  --stage-result-h: min(52svh, 100vw * 4 / 3);
  --stage-result-h-lg: min(80svh, 720px);
  --fluid-kanji-hero-sm: 72vw;
  --fluid-kanji-hero: min(40vw, 64svh);
  --fluid-title-vertical: clamp(46px, (var(--top-stage-h) - 32px) / 6.6, 88px);
  --fluid-title-vertical-tablet: clamp(46px, (max(var(--top-stage-h-tablet), 400px) - 64px) / 6.6, 88px);
  --fluid-title-vertical-lg: clamp(72px, (100svh - 288px) / 6.4, 104px);
  --fluid-type-name: clamp(40px, 10vw, 72px);
  --fluid-type-name-vertical: clamp(64px, 6.4vw, 104px);
  --fluid-catch-sm: min(20px, (100vw - 32px) / 17);
  --fluid-catch: clamp(20px, 2.2vw + 12px, 28px);
  --fluid-headline-lg: clamp(26px, 3vw + 14px, 40px);
  --fluid-pair-kan: clamp(32px, 9vw, 56px);
  --juukei-cell-min: 64px;
  --juukei-axis-w: 24px;
  --lh-display: 1;
  --lh-title: 1.1;
  --lh-name-sm: 1.15;
  --lh-headline-lg: 1.5;
  --lh-headline: 1.6;
  --lh-catch: 1.7;
  --lh-body-lg: 2;
  --lh-body-md: 1.9;
  --lh-body-sm: 1.8;
  --lh-input: 1.4;
  --lh-label: 1;
  --lh-label-md: 1.4;
  --lh-plate: 1.2;
  --ls-0: 0em;
  --ls-tight: 0.02em;
  --ls-base: 0.04em;
  --ls-plate: 0.06em;
  --ls-wide: 0.08em;
  --ls-label: 0.12em;
  --ls-logo-reading: 0.2em;
  --ls-reading: 0.3em;
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  --space-3xs: 2px;
  --space-xs: 4px;
  --space-2xs: 6px;
  --space-sm: 8px;
  --space-sm-plus: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-section: 128px;
  --space-section-sm: 80px;
  --gutter: 24px;
  --gutter-md: 32px;
  --gutter-sm: 16px;
  --tap-min: 44px;
  --header-h: 64px;
  --header-h-sm: 48px;
  --cta-h: 56px;
  --reading-max: 640px;
  --footer-note-max: 40em;
  --prose-fit-slop: 0.05em;
  --content-max: 1200px;
  --page-max: 1440px;
  --index-rail-w: 64px;
  --btn-secondary-h: 48px;
  --share-h: 48px;
  --select-h: 52px;
  --pill-h: 52px;
  --pill-cta-w: 280px;
  --seal-size: 48px;
  --swatch-size: 12px;
  --chip-h: 28px;
  --icon-size: 18px;
  --logo-mark-size: 24px;
  --logo-mark-size-lg: 28px;
  --fs-logotype-sm: 18px;
  --toast-offset: 80px;
  --sheet-max-w: 720px;
  --sheet-max-h: 900px;
  --glass-blur: 12px;
  --rule-w: 1px;
  --rule-w-strong: 1.5px;
  --focus-ring-w: 2px;
  --focus-ring-gap: 2px;
  --ink-filter: grayscale(1) contrast(1.06) brightness(1.03);
  --ink-filter-yang: grayscale(1) contrast(.94) brightness(1.14);
  --ink-filter-yin: grayscale(1) contrast(1.12) brightness(.98);
  --ink-filter-dim: grayscale(1) contrast(1.02) brightness(1.08) opacity(.35);
  --portrait-blend: multiply;
  --focus-x: .60;
  --focus-y: .30;
  --bloom-soft: 14%;
  --shadow-1: 0 1px 0 rgb(42 37 34 / .05), 0 10px 24px -14px rgb(42 37 34 / .22);
  --shadow-2: 0 2px 0 rgb(42 37 34 / .04), 0 24px 48px -20px rgb(42 37 34 / .28);
  --halo-paper: 0 0 2px var(--color-neutral), 0 0 8px var(--color-neutral), 0 0 14px var(--color-neutral);
  --halo-wash: none;
  --paper-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --paper-noise-opacity: .04;
  --paper-texture: url("../img/paper-512.webp");
  --paper-texture-size: 512px;
  --paper-texture-opacity: .6;
  --paper-texture-filter: grayscale(1) brightness(1.06);
  --edge-fallback-bottom: linear-gradient(to bottom, black 0 82%, transparent 100%);
  --edge-fallback-right: linear-gradient(to right, black 0 calc(100% - 48px), transparent 100%);
  --dur-instant: 120ms;
  --dur-short: 240ms;
  --dur-base: 400ms;
  --dur-long: 600ms;
  --ease-ink: cubic-bezier(.22, .8, .24, 1);
  --ease-drop: cubic-bezier(.55, .06, .68, .19);
  --ease-bloom: cubic-bezier(.16, 1, .3, 1);
  --shizuku-total: 2400ms;
  --shizuku-total-short: 1200ms;
  --shizuku-total-reduced: 500ms;
  --shizuku-force: 3000ms;
  --skip-delay: 400ms;
  --stagger: 40ms;
  --dur-fv-drop: 300ms;
  --delay-fv-today: 660ms;
  --dur-curtain-reduced: 200ms;
  --dur-ripple: 1800ms;
  --ripple-count: 2;
  --ripple-spread: 10px;
  --ripple-spread-cta: 9px;
  --ripple-w: 2px;
  --ripple-ink: .8;
  --ripple-ink-2: .6;
  --ripple-blur: .5px;
  --ease-ripple: cubic-bezier(.2, .6, .35, 1);
  --delay-ripple-fv: 400ms;
  --z-base: 1;
  --z-header: 10;
  --z-pill: 40;
  --z-paper: 50;
  --z-overlay: 100;
  --z-toast: 110;
}
[data-type] {
  --halo-wash: 0 0 1px var(--type-wash), 0 0 8px var(--type-wash), 0 0 16px var(--type-wash);
}
::backdrop {
  --color-scrim: rgb(42 37 34 / .36);
}
@font-face {
  font-family: "Shippori Mincho B1";
  src: url("../fonts/shippori-b1-600.woff2?v=433ba8d0") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shippori Mincho B1";
  src: url("../fonts/shippori-b1-800.woff2?v=31ee6652") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zenkaku-400.woff2?v=072c4259") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zenkaku-700.woff2?v=e8b580fe") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-italic-500.woff2?v=e77e507c") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
[data-type="kinoe"]      { --type-ink: var(--color-kinoe-ink);      --type-pigment: var(--color-kinoe-pigment);      --type-wash: var(--color-kinoe-wash); }
[data-type="kinoto"]     { --type-ink: var(--color-kinoto-ink);     --type-pigment: var(--color-kinoto-pigment);     --type-wash: var(--color-kinoto-wash); }
[data-type="hinoe"]      { --type-ink: var(--color-hinoe-ink);      --type-pigment: var(--color-hinoe-pigment);      --type-wash: var(--color-hinoe-wash); }
[data-type="hinoto"]     { --type-ink: var(--color-hinoto-ink);     --type-pigment: var(--color-hinoto-pigment);     --type-wash: var(--color-hinoto-wash); }
[data-type="tsuchinoe"]  { --type-ink: var(--color-tsuchinoe-ink);  --type-pigment: var(--color-tsuchinoe-pigment);  --type-wash: var(--color-tsuchinoe-wash); }
[data-type="tsuchinoto"] { --type-ink: var(--color-tsuchinoto-ink); --type-pigment: var(--color-tsuchinoto-pigment); --type-wash: var(--color-tsuchinoto-wash); }
[data-type="kanoe"]      { --type-ink: var(--color-kanoe-ink);      --type-pigment: var(--color-kanoe-pigment);      --type-wash: var(--color-kanoe-wash); }
[data-type="kanoto"]     { --type-ink: var(--color-kanoto-ink);     --type-pigment: var(--color-kanoto-pigment);     --type-wash: var(--color-kanoto-wash); }
[data-type="mizunoe"]    { --type-ink: var(--color-mizunoe-ink);    --type-pigment: var(--color-mizunoe-pigment);    --type-wash: var(--color-mizunoe-wash); }
[data-type="mizunoto"]   { --type-ink: var(--color-mizunoto-ink);   --type-pigment: var(--color-mizunoto-pigment);   --type-wash: var(--color-mizunoto-wash); }
[data-type] { --type-wash-2: var(--type-wash); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  [data-type] { --type-wash-2: color-mix(in srgb, var(--type-wash) 55%, var(--color-surface)); }
}
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--space-md);
}
@media (max-width: 1023px) and (min-height: 501px) {
  html:has(.bottom-pill) { scroll-padding-bottom: calc(var(--pill-h) + var(--space-lg) + env(safe-area-inset-bottom)); }
}
:where(a, button, summary, select, input, textarea, [tabindex]) { scroll-margin-block: var(--space-md); }
body, h1, h2, h3, h4, p, ol, ul, dl, dd, fieldset, legend, figure, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img, svg, picture { display: block; }
img { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
fieldset { border: 0; min-width: 0; }
[hidden] { display: none !important; }
dialog { color: inherit; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  min-height: 100svh;
  background: var(--color-neutral);
  color: var(--color-on-surface);
  font-family: var(--font-gothic);
  font-size: var(--fs-body-md);
  font-weight: 400;
  line-height: var(--lh-body-md);
  letter-spacing: var(--ls-base);
  line-break: strict;
  overflow-wrap: anywhere;
  overflow-x: clip;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-paper);
  pointer-events: none;
  mix-blend-mode: multiply;
}
body::before {
  background-image: var(--paper-texture);
  background-size: var(--paper-texture-size);
  filter: var(--paper-texture-filter);
  opacity: var(--paper-texture-opacity);
}
body::after {
  background-image: var(--paper-noise);
  opacity: var(--paper-noise-opacity);
}
.mincho {
  font-family: var(--font-mincho);
  font-feature-settings: "palt" 1;
}
.latin, .plate-no, .num {
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 500;
  font-feature-settings: "lnum" 1;
}
.num { font-feature-settings: "lnum" 1, "tnum" 1; }
.phrase { word-break: keep-all; overflow-wrap: normal; }
@supports (word-break: auto-phrase) {
  .phrase { word-break: auto-phrase; }
  .phrase--keep { word-break: keep-all; }
}
.balance { text-wrap: balance; }
.pretty { text-wrap: pretty; }
.prose { text-align: justify; }
.prose,
.footer-notes dd { letter-spacing: var(--ls-base); }
@supports (inline-size: round(down, 100%, 1em)) {
  .prose,
  .footer-notes dd { inline-size: min(100%, round(down, 100%, 1em + var(--ls-base)) + var(--prose-fit-slop)); }
}
.prose[data-fit~="untail"] .jz-tail,
.footer-notes dd[data-fit~="untail"] .jz-tail { white-space: normal; }
.prose[data-fit~="ragged"],
.footer-notes dd[data-fit~="ragged"] { text-align: start; }
.jz-trim { margin-inline-start: -0.5em; }
.jz-tail { white-space: nowrap; }
.jz-nobr { white-space: nowrap; }
@font-feature-values "Shippori Mincho B1" {
  @styleset { upright-excl: 1; }
}
.jz-excl { font-variant-alternates: styleset(upright-excl); }
.tate { writing-mode: vertical-rl; text-orientation: mixed; font-feature-settings: "vpal" 1; }
.catch-line { display: block; white-space: nowrap; }
.tate .catch-line { display: block; }
.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
html:not(.js) .js-only { display: none !important; }
html.js .no-js-only { display: none !important; }
html:not([data-today]) .if-today { display: none !important; }
html[data-today] .if-no-today { display: none !important; }
[data-arrival-only] { display: none; }
html[data-arrival="direct"] [data-arrival-only~="direct"],
html[data-arrival="self"] [data-arrival-only~="self"],
html[data-arrival="other"] [data-arrival-only~="other"] { display: revert; }
.you-mark,
.seal--you.you-mark { display: none; }
html[data-self="kinoe"] [data-slug="kinoe"] .you-mark,
html[data-self="kinoto"] [data-slug="kinoto"] .you-mark,
html[data-self="hinoe"] [data-slug="hinoe"] .you-mark,
html[data-self="hinoto"] [data-slug="hinoto"] .you-mark,
html[data-self="tsuchinoe"] [data-slug="tsuchinoe"] .you-mark,
html[data-self="tsuchinoto"] [data-slug="tsuchinoto"] .you-mark,
html[data-self="kanoe"] [data-slug="kanoe"] .you-mark,
html[data-self="kanoto"] [data-slug="kanoto"] .you-mark,
html[data-self="mizunoe"] [data-slug="mizunoe"] .you-mark,
html[data-self="mizunoto"] [data-slug="mizunoto"] .you-mark { display: inline-flex; }
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring-w) solid var(--color-primary);
  outline-offset: var(--focus-ring-gap);
  box-shadow: 0 0 0 var(--focus-ring-gap) var(--color-neutral);
}
.index-band:focus-visible {
  outline-offset: calc(-1 * (var(--focus-ring-gap) + var(--focus-ring-w)));
  box-shadow: inset 0 0 0 var(--focus-ring-gap) var(--color-neutral);
}
@media (max-width: 1023px) {
  .site-header .logo {
    padding-inline: var(--space-2xs);
    margin-inline: calc(-1 * var(--space-2xs));
  }
  .site-header a:focus-visible {
    outline-offset: calc(-1 * (var(--focus-ring-gap) + var(--focus-ring-w)));
    box-shadow: inset 0 0 0 var(--focus-ring-gap) var(--color-neutral);
  }
}
main:focus-visible { outline: none; box-shadow: none; }
.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: var(--z-toast);
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--fs-label-md);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }
.container {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--gutter-sm);
}
.reading-width { max-width: var(--reading-max); margin-inline: auto; }
@media (min-width: 768px) {
  .container { padding-inline: var(--gutter-md); }
}
@media (min-width: 1024px) {
  .container { padding-inline: var(--space-xl); }
}
.site-header {
  position: relative;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--header-h-sm);
  padding-inline: var(--gutter-sm);
  background: var(--color-neutral);
  color: var(--color-primary);
}
.site-header--on-color {
  position: absolute;
  inset: 0 0 auto 0;
  background: transparent;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--tap-min);
  color: var(--color-primary);
}
.logo-mark { width: var(--logo-mark-size); height: var(--logo-mark-size); flex: none; }
.logo-mark .is-type { fill: var(--type-ink); stroke: var(--type-ink); }
.site-header, .site-footer { --logo-bg: var(--color-neutral); }
.site-header--on-color { --logo-bg: var(--type-wash); }
.logo-type { display: grid; gap: var(--space-3xs); }
.logo-name {
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: var(--fs-logotype-sm);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-wide);
  font-feature-settings: "palt" 1;
  white-space: nowrap;
}
.logo-reading {
  font-size: var(--fs-min);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-logo-reading);
  white-space: nowrap;
}
.header-nav { display: flex; align-items: center; gap: var(--space-xs); }
.header-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding-inline: var(--space-sm);
  font-size: var(--fs-label-md);
  font-weight: 700;
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}
.header-nav .is-wide { display: none; }
@media (min-width: 1024px) {
  .site-header { height: var(--header-h); padding-inline: var(--space-xl); }
  .logo-mark { width: var(--logo-mark-size-lg); height: var(--logo-mark-size-lg); }
  .logo-name { font-size: var(--fs-logotype); }
  .header-nav a { padding-inline: var(--space-md); }
  .header-nav .is-wide { display: inline-flex; }
}
.site-footer {
  margin-top: var(--space-section-sm);
  padding-block: var(--space-2xl) calc(var(--space-2xl) + env(safe-area-inset-bottom));
  border-top: var(--rule-w) solid var(--color-line);
  background: var(--color-neutral);
  color: var(--color-primary);
}
.site-footer .container { display: grid; gap: var(--space-lg); }
.footer-logo { justify-self: start; }
.footer-notes { display: grid; gap: var(--space-md); max-width: var(--reading-max); }
.footer-notes dt {
  font-size: var(--fs-label-md);
  font-weight: 700;
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-wide);
}
.footer-notes dd {
  max-inline-size: var(--footer-note-max);
  margin-top: var(--space-xs);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-secondary);
  text-align: justify;
}
.footer-copy {
  font-size: var(--fs-min);
  line-height: var(--lh-body-sm);
  letter-spacing: var(--ls-wide);
  color: var(--color-secondary);
}
@media (min-width: 1024px) {
  .site-footer { margin-top: var(--space-section); }
  .site-footer .container { grid-template-columns: 1fr 2fr; align-items: start; column-gap: var(--space-2xl); }
  .footer-copy { grid-column: 1 / -1; }
}
.chapter-mark {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--fs-headline-sm);
  line-height: var(--lh-headline);
  letter-spacing: var(--ls-base);
  font-feature-settings: "palt" 1;
  color: var(--color-primary);
}
.section-heading {
  margin-top: var(--space-md);
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--fluid-headline-lg);
  line-height: var(--lh-headline-lg);
  letter-spacing: var(--ls-base);
  font-feature-settings: "palt" 1;
  color: var(--color-primary);
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}
.plate-no {
  font-size: var(--fs-label-plate);
  line-height: var(--lh-plate);
  letter-spacing: var(--ls-plate);
  color: var(--color-secondary);
}
.on-wash .plate-no { color: var(--color-primary); }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--tap-min);
  border: 0;
  border-radius: var(--radius-full);
  font-family: var(--font-gothic);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: var(--icon-size); height: var(--icon-size); flex: none; }
.btn--primary {
  height: var(--cta-h);
  padding-inline: var(--space-lg);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--fs-label-lg);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
}
.btn--primary:hover { background: var(--color-secondary); }
.btn--primary[aria-disabled="true"] { cursor: progress; }
.btn--type { background: var(--type-ink); }
.btn--type:hover { background: var(--color-primary); }
.btn--secondary {
  height: var(--btn-secondary-h);
  padding-inline: var(--space-md);
  border: var(--rule-w) solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--fs-label-md);
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-wide);
}
.btn--secondary:hover { border-color: var(--color-primary); }
.btn--quiet {
  padding-inline: var(--space-sm);
  background: transparent;
  color: var(--color-primary);
  font-size: var(--fs-label-md);
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-wide);
  text-decoration: underline;
  text-underline-offset: var(--space-xs);
  text-decoration-thickness: var(--rule-w);
}
.btn--share {
  height: var(--share-h);
  padding-inline: var(--space-md);
  border: var(--rule-w) solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-primary);
  font-size: var(--fs-label-md);
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-wide);
}
.btn--block { display: flex; width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: background-color var(--dur-short) var(--ease-ink), border-color var(--dur-short) var(--ease-ink); }
}
.chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--chip-h);
  padding-inline: var(--space-sm-plus);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--type-ink);
  font-size: var(--fs-label-md);
  font-weight: 700;
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}
.chip--sumi {
  border: var(--rule-w) solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
}
.swatch {
  display: inline-block;
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: 50%;
  background: var(--type-pigment);
  flex: none;
}
.seal {
  display: inline-grid;
  place-items: center;
  width: var(--seal-size);
  height: var(--seal-size);
  border-radius: var(--radius-sm);
  background: var(--type-ink);
  color: var(--color-surface);
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: var(--fs-headline-md);
  line-height: var(--lh-display);
  font-feature-settings: "palt" 1;
}
.seal--you {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 2.6em;
  padding: var(--space-3xs) var(--space-2xs);
  border: var(--rule-w-strong) solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-mincho);
  font-size: var(--fs-label-md);
  font-weight: 600;
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-base);
}
.on-wash { background: var(--type-wash); color: var(--color-primary); }
.pf {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--pf-ratio, 4 / 5);
  border-radius: var(--radius-sm);
  --pf-at: calc(var(--focus-x) * 100%) calc(var(--focus-y) * 100%);
}
.pf-layer {
  position: absolute;
  inset: 0;
  mix-blend-mode: var(--portrait-blend);
}
.pf-layer > picture, .pf-layer img { width: 100%; height: 100%; }
.pf-layer img {
  object-fit: cover;
  object-position: calc(var(--focus-x) * 100%) calc(var(--focus-y) * 100%);
}
.pf-ink {
  --bloom: 0%;
  filter: var(--pf-ink-filter, var(--ink-filter));
  -webkit-mask-image: radial-gradient(circle at var(--pf-at), transparent calc(var(--bloom) - var(--bloom-soft)), black var(--bloom));
  mask-image: radial-gradient(circle at var(--pf-at), transparent calc(var(--bloom) - var(--bloom-soft)), black var(--bloom));
}
.pf-color {
  --bloom: 0%;
  -webkit-mask-image: radial-gradient(circle at var(--pf-at), black calc(var(--bloom) - var(--bloom-soft)), transparent var(--bloom));
  mask-image: radial-gradient(circle at var(--pf-at), black calc(var(--bloom) - var(--bloom-soft)), transparent var(--bloom));
}
.pf--yang { --pf-ink-filter: var(--ink-filter-yang); }
.pf--yin { --pf-ink-filter: var(--ink-filter-yin); }
.is-color > .pf > .pf-layer, .pf.is-color > .pf-layer, .is-color .pf > .pf-layer { --bloom: 150%; }
@media (prefers-reduced-motion: no-preference) {
  .pf-layer { transition: --bloom var(--dur-short) var(--ease-ink); }
  .is-color > .pf > .pf-layer, .pf.is-color > .pf-layer, .is-color .pf > .pf-layer { transition-duration: var(--dur-base); transition-timing-function: var(--ease-bloom); }
}
.pf-layer img { color: transparent; }
.index-band {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  min-height: var(--index-band-h);
  border-block: var(--rule-w) solid var(--color-line);
  background: var(--color-neutral);
  color: var(--color-primary);
}
.index-band__cell {
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--rule-w);
  min-width: 0;
  padding-block: var(--space-3xs);
  border-inline-start: var(--rule-w) solid var(--color-line);
  font-family: var(--font-mincho);
  font-weight: 800;
  font-size: var(--fs-headline-sm);
  line-height: var(--lh-display);
  font-feature-settings: "palt" 1;
}
.index-band__cell:first-child { border-inline-start: 0; }
.index-band__cell .plate-no { font-size: var(--fs-label-plate-sm); line-height: var(--lh-display); }
.index-band__reading { display: none; font-family: var(--font-gothic); font-weight: 400; font-size: var(--fs-label-xs); letter-spacing: var(--ls-logo-reading); }
.index-band__cell.is-current { background: var(--type-ink); color: var(--color-surface); }
.index-band__cell.is-current .plate-no { color: var(--color-surface); }
html[data-today="kinoe"] .index-band--today [data-slug="kinoe"],
html[data-today="kinoto"] .index-band--today [data-slug="kinoto"],
html[data-today="hinoe"] .index-band--today [data-slug="hinoe"],
html[data-today="hinoto"] .index-band--today [data-slug="hinoto"],
html[data-today="tsuchinoe"] .index-band--today [data-slug="tsuchinoe"],
html[data-today="tsuchinoto"] .index-band--today [data-slug="tsuchinoto"],
html[data-today="kanoe"] .index-band--today [data-slug="kanoe"],
html[data-today="kanoto"] .index-band--today [data-slug="kanoto"],
html[data-today="mizunoe"] .index-band--today [data-slug="mizunoe"],
html[data-today="mizunoto"] .index-band--today [data-slug="mizunoto"] { background: var(--color-primary); color: var(--color-surface); }
html[data-today="kinoe"] .index-band--today [data-slug="kinoe"] .plate-no,
html[data-today="kinoto"] .index-band--today [data-slug="kinoto"] .plate-no,
html[data-today="hinoe"] .index-band--today [data-slug="hinoe"] .plate-no,
html[data-today="hinoto"] .index-band--today [data-slug="hinoto"] .plate-no,
html[data-today="tsuchinoe"] .index-band--today [data-slug="tsuchinoe"] .plate-no,
html[data-today="tsuchinoto"] .index-band--today [data-slug="tsuchinoto"] .plate-no,
html[data-today="kanoe"] .index-band--today [data-slug="kanoe"] .plate-no,
html[data-today="kanoto"] .index-band--today [data-slug="kanoto"] .plate-no,
html[data-today="mizunoe"] .index-band--today [data-slug="mizunoe"] .plate-no,
html[data-today="mizunoto"] .index-band--today [data-slug="mizunoto"] .plate-no { color: var(--color-surface); }
@media (min-width: 1024px) {
  .index-band--lg { min-height: var(--index-band-h-lg); }
  .index-band--lg .index-band__reading { display: block; }
}
.bottom-pill {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-sm-plus) + env(safe-area-inset-bottom));
  z-index: var(--z-pill);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  height: var(--pill-h);
  padding: var(--space-xs);
  border-radius: var(--radius-full);
  background: var(--color-glass);
  color: var(--color-primary);
  box-shadow: var(--shadow-2);
  transform: translateX(-50%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.1);
}
.bottom-pill > a, .bottom-pill > button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding-inline: var(--space-md);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  font-size: var(--fs-label-md);
  font-weight: 700;
  letter-spacing: var(--ls-wide);
  white-space: nowrap;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bottom-pill { background: var(--color-surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .bottom-pill { background: var(--color-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (max-height: 500px) {
  .bottom-pill { display: none; }
}
.toast {
  position: fixed;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 2 * var(--gutter-sm));
  bottom: calc(var(--toast-offset) + env(safe-area-inset-bottom));
  z-index: var(--z-toast);
  padding: var(--space-sm-plus) var(--space-lg);
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-surface);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  text-align: center;
  white-space: pre-line;
  transform: translateX(-50%);
  pointer-events: none;
}
.toast:empty { display: none; }
.sheet {
  width: min(100% - 2 * var(--gutter-sm), var(--sheet-max-w));
  max-height: min(88svh, var(--sheet-max-h));
  margin: auto auto 0;
  padding: var(--space-lg);
  border: 0;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--color-surface);
  color: var(--color-on-surface);
  box-shadow: var(--shadow-2);
}
.sheet::backdrop { background: var(--color-scrim); }
@media (min-width: 768px) {
  .sheet { margin: auto; border-radius: var(--radius-xl); }
}
@media (prefers-reduced-motion: no-preference) {
  .sheet[open] { animation: sheet-in var(--dur-short) var(--ease-ink); }
  @keyframes sheet-in {
    from { opacity: 0; transform: translateY(var(--space-lg)); }
    to { opacity: 1; transform: none; }
  }
}
.notfound { padding-top: var(--space-2xl); }
.notfound__inner { display: grid; justify-items: start; gap: var(--space-md); }
.notfound__heading { margin-top: 0; }
.notfound__lead { max-width: var(--reading-max); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.notfound__band { margin-top: var(--space-2xl); }
@media (min-width: 1024px) {
  .notfound { padding-top: var(--space-3xl); }
}
.noscript-note {
  padding: var(--space-md);
  border: var(--rule-w) solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}