/* Akari · generated by scripts/build-css.mjs. Do not edit. */
@layer akari.reset, akari.tokens, akari.base, akari.components, akari.utilities;

/* Generated by scripts/build-tokens.mjs from tokens/*.tokens.json. Do not edit. */
@layer akari.tokens {
  :where(:root) {
    --ak-font-body: "Zen Kaku Gothic New", "Akari Gothic Fallback", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
    --ak-font-display: "Shippori Mincho B1", "Akari Mincho Fallback", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --ak-font-mono: "DM Mono", "Akari Mono Fallback", ui-monospace, "SFMono-Regular", "Menlo", monospace;
    --ak-heading-display-fluid: 6;
    --ak-heading-display-leading: 1.1;
    --ak-heading-display-max: 56px;
    --ak-heading-display-min: 32px;
    --ak-heading-entry-fluid: 4;
    --ak-heading-entry-leading: 1.15;
    --ak-heading-entry-max: 34px;
    --ak-heading-entry-min: 26px;
    --ak-heading-section-fluid: 4;
    --ak-heading-section-leading: 1.15;
    --ak-heading-section-max: 36px;
    --ak-heading-section-min: 26px;
    --ak-heading-subsection-leading: calc(4 / 3);
    --ak-heading-subsection-size: 1.5rem;
    --ak-heading-title-fluid: 6;
    --ak-heading-title-leading: 1.15;
    --ak-heading-title-max: 52px;
    --ak-heading-title-min: 32px;
    --ak-leading-body: 1.6;
    --ak-leading-ja: 1.75;
    --ak-leading-snug: 1.35;
    --ak-leading-tight: 1.15;
    --ak-font-size-2xl: 30px;
    --ak-font-size-2xs: 11px;
    --ak-font-size-3xl: 40px;
    --ak-font-size-4xl: 56px;
    --ak-font-size-base: 16px;
    --ak-font-size-lg: 18px;
    --ak-font-size-sm: 14px;
    --ak-font-size-xl: 22px;
    --ak-font-size-xs: 12px;
    --ak-font-weight-bold: 700;
    --ak-font-weight-medium: 500;
    --ak-font-weight-regular: 400;
    --ak-font-weight-semibold: 600;
    --ak-layout-block-gap: 40px;
    --ak-layout-gutter: 16px;
    --ak-layout-page: 1120px;
    --ak-layout-section-gap: 80px;
    --ak-duration-base: 200ms;
    --ak-duration-fast: 120ms;
    --ak-duration-slow: 360ms;
    --ak-ease-exit: cubic-bezier(0.4, 0, 1, 1);
    --ak-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ak-radius-control: 2px;
    --ak-radius-pill: 999px;
    --ak-radius-surface: 2px;
    --ak-space-0: 0px;
    --ak-space-0-5: 4px;
    --ak-space-1: 8px;
    --ak-space-1-5: 12px;
    --ak-space-2: 16px;
    --ak-space-3: 24px;
    --ak-space-4: 32px;
    --ak-space-5: 40px;
    --ak-space-6: 48px;
    --ak-space-8: 64px;
    --ak-space-10: 80px;
    --ak-space-12: 96px;
    --ak-space-16: 128px;
    --ak-heading-display: clamp(32px, 6vw, 56px);
    --ak-heading-entry: clamp(26px, 4vw, 34px);
    --ak-heading-section: clamp(26px, 4vw, 36px);
    --ak-heading-subsection: 1.5rem;
    --ak-heading-title: clamp(32px, 6vw, 52px);
  }

  :where(:root, [data-theme="light"], .light) {
    --ak-accent: #c4532f;
    --ak-bg: #f6f5f1;
    --ak-border: #dcdad3;
    --ak-border-strong: #85837b;
    --ak-danger: #a8322d;
    --ak-focus: #23467a;
    --ak-info: #23467a;
    --ak-on-accent: #ffffff;
    --ak-on-danger: #ffffff;
    --ak-on-primary: #ffffff;
    --ak-primary: #23467a;
    --ak-primary-hover: #1c3a66;
    --ak-success: #1f6b45;
    --ak-surface: #ffffff;
    --ak-surface-sidebar: #f0efea;
    --ak-surface-subtle: #eeede7;
    --ak-text: #1b1d22;
    --ak-text-accent: #af4522;
    --ak-text-glass: #3d414b;
    --ak-text-link: #23467a;
    --ak-text-muted: #5d6270;
    --ak-warning: #7d5c00;
    --ak-cat-1: #385dad;
    --ak-cat-2: #097347;
    --ak-cat-3: #9f66db;
    --ak-cat-4: #a37e07;
    --ak-cat-5: #0490a2;
    --ak-cat-6: #b6351c;
    --ak-div-1: #23467a;
    --ak-div-2: #4a6fa2;
    --ak-div-3: #97afd0;
    --ak-div-4: #cfcdc6;
    --ak-div-5: #dc9e84;
    --ak-div-6: #b04a26;
    --ak-div-7: #7a2c12;
    --ak-seq-1: #e6ecf4;
    --ak-seq-2: #b7c8df;
    --ak-seq-3: #7f9dc4;
    --ak-seq-4: #4a6fa2;
    --ak-seq-5: #23467a;
    --ak-focus-width: 2px;
    --ak-map-background: #f6f5f1;
    --ak-map-boundary: #a8a69e;
    --ak-map-building: #e8e6df;
    --ak-map-feature-line: #ffffff;
    --ak-map-label: #5d6270;
    --ak-map-label-halo: #f6f5f1;
    --ak-map-landcover: #eeede7;
    --ak-map-park: #e6eae0;
    --ak-map-road: #ffffff;
    --ak-map-road-casing: #dcdad3;
    --ak-map-water: #dde5ee;
    --ak-shadow-overlay: 0px 4px 16px 0px rgb(27 29 34 / 0.08);
    --ak-shadow-raised: 0px 1px 2px 0px rgb(27 29 34 / 0.06);
    color-scheme: light;
  }

  @media (prefers-color-scheme: dark) {
    :where(:root:not([data-theme="light"], .light)) {
      --ak-accent: #e47a57;
      --ak-bg: #1b1d22;
      --ak-border: #353941;
      --ak-border-strong: #6b717d;
      --ak-danger: #fc8f82;
      --ak-focus: #8fb0e0;
      --ak-info: #8fb0e0;
      --ak-on-accent: #1b0f0a;
      --ak-on-danger: #1b0a09;
      --ak-on-primary: #0f1622;
      --ak-primary: #8fb0e0;
      --ak-primary-hover: #a6c1e8;
      --ak-success: #6cc497;
      --ak-surface: #24272d;
      --ak-surface-sidebar: #16181d;
      --ak-surface-subtle: #22252d;
      --ak-text: #ebe9e3;
      --ak-text-accent: #e47a57;
      --ak-text-glass: #c9ccd3;
      --ak-text-link: #8fb0e0;
      --ak-text-muted: #9aa0ad;
      --ak-warning: #e0b44a;
      --ak-cat-1: #547deb;
      --ak-cat-2: #238053;
      --ak-cat-3: #9853bc;
      --ak-cat-4: #ae861d;
      --ak-cat-5: #00a5b8;
      --ak-cat-6: #c64333;
      --ak-div-1: #9dbbe6;
      --ak-div-2: #6189c0;
      --ak-div-3: #3f5f8a;
      --ak-div-4: #3a3f4a;
      --ak-div-5: #8e4630;
      --ak-div-6: #c96a48;
      --ak-div-7: #f0a98c;
      --ak-seq-1: #1e2836;
      --ak-seq-2: #2b3f5c;
      --ak-seq-3: #3f5f8a;
      --ak-seq-4: #6189c0;
      --ak-seq-5: #9dbbe6;
      --ak-focus-width: 2px;
      --ak-map-background: #1b1d22;
      --ak-map-boundary: #4a4f5b;
      --ak-map-building: #1e2128;
      --ak-map-feature-line: #121419;
      --ak-map-label: #9aa0ad;
      --ak-map-label-halo: #121419;
      --ak-map-landcover: #161920;
      --ak-map-park: #161d1b;
      --ak-map-road: #2a2e37;
      --ak-map-road-casing: #1a1d24;
      --ak-map-water: #18202c;
      --ak-shadow-overlay: 0px 4px 16px 0px rgb(0 0 0 / 0.5);
      --ak-shadow-raised: 0px 1px 2px 0px rgb(0 0 0 / 0.4);
      color-scheme: dark;
    }
  }

  :where([data-theme="dark"], .dark) {
    --ak-accent: #e47a57;
    --ak-bg: #1b1d22;
    --ak-border: #353941;
    --ak-border-strong: #6b717d;
    --ak-danger: #fc8f82;
    --ak-focus: #8fb0e0;
    --ak-info: #8fb0e0;
    --ak-on-accent: #1b0f0a;
    --ak-on-danger: #1b0a09;
    --ak-on-primary: #0f1622;
    --ak-primary: #8fb0e0;
    --ak-primary-hover: #a6c1e8;
    --ak-success: #6cc497;
    --ak-surface: #24272d;
    --ak-surface-sidebar: #16181d;
    --ak-surface-subtle: #22252d;
    --ak-text: #ebe9e3;
    --ak-text-accent: #e47a57;
    --ak-text-glass: #c9ccd3;
    --ak-text-link: #8fb0e0;
    --ak-text-muted: #9aa0ad;
    --ak-warning: #e0b44a;
    --ak-cat-1: #547deb;
    --ak-cat-2: #238053;
    --ak-cat-3: #9853bc;
    --ak-cat-4: #ae861d;
    --ak-cat-5: #00a5b8;
    --ak-cat-6: #c64333;
    --ak-div-1: #9dbbe6;
    --ak-div-2: #6189c0;
    --ak-div-3: #3f5f8a;
    --ak-div-4: #3a3f4a;
    --ak-div-5: #8e4630;
    --ak-div-6: #c96a48;
    --ak-div-7: #f0a98c;
    --ak-seq-1: #1e2836;
    --ak-seq-2: #2b3f5c;
    --ak-seq-3: #3f5f8a;
    --ak-seq-4: #6189c0;
    --ak-seq-5: #9dbbe6;
    --ak-focus-width: 2px;
    --ak-map-background: #1b1d22;
    --ak-map-boundary: #4a4f5b;
    --ak-map-building: #1e2128;
    --ak-map-feature-line: #121419;
    --ak-map-label: #9aa0ad;
    --ak-map-label-halo: #121419;
    --ak-map-landcover: #161920;
    --ak-map-park: #161d1b;
    --ak-map-road: #2a2e37;
    --ak-map-road-casing: #1a1d24;
    --ak-map-water: #18202c;
    --ak-shadow-overlay: 0px 4px 16px 0px rgb(0 0 0 / 0.5);
    --ak-shadow-raised: 0px 1px 2px 0px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }

  @media (prefers-contrast: more) {
    :where(:root:not([data-contrast="normal"])) {
      --ak-accent: #8f3519;
      --ak-bg: #ffffff;
      --ak-border: #6b6f78;
      --ak-border-strong: #3d414b;
      --ak-danger: #8a1f1a;
      --ak-focus: #1a3561;
      --ak-info: #1a3561;
      --ak-on-accent: #ffffff;
      --ak-on-danger: #ffffff;
      --ak-on-primary: #ffffff;
      --ak-primary: #1a3561;
      --ak-primary-hover: #12284b;
      --ak-success: #13502f;
      --ak-surface: #ffffff;
      --ak-surface-sidebar: #f6f5f1;
      --ak-surface-subtle: #ebeae4;
      --ak-text: #0b0c0f;
      --ak-text-accent: #8f3519;
      --ak-text-glass: #3d414b;
      --ak-text-link: #1a3561;
      --ak-text-muted: #3d414b;
      --ak-warning: #5c4300;
      --ak-cat-1: #385dad;
      --ak-cat-2: #097347;
      --ak-cat-3: #9f66db;
      --ak-cat-4: #a8820a;
      --ak-cat-5: #0498ab;
      --ak-cat-6: #b6351c;
      --ak-div-1: #23467a;
      --ak-div-2: #4a6fa2;
      --ak-div-3: #97afd0;
      --ak-div-4: #cfcdc6;
      --ak-div-5: #dc9e84;
      --ak-div-6: #b04a26;
      --ak-div-7: #7a2c12;
      --ak-seq-1: #e6ecf4;
      --ak-seq-2: #b7c8df;
      --ak-seq-3: #7f9dc4;
      --ak-seq-4: #4a6fa2;
      --ak-seq-5: #23467a;
      --ak-focus-width: 3px;
      --ak-map-background: #f6f5f1;
      --ak-map-boundary: #a8a69e;
      --ak-map-building: #e8e6df;
      --ak-map-feature-line: #ffffff;
      --ak-map-label: #5d6270;
      --ak-map-label-halo: #f6f5f1;
      --ak-map-landcover: #eeede7;
      --ak-map-park: #e6eae0;
      --ak-map-road: #ffffff;
      --ak-map-road-casing: #dcdad3;
      --ak-map-water: #dde5ee;
      --ak-shadow-overlay: 0px 4px 16px 0px rgb(27 29 34 / 0.08);
      --ak-shadow-raised: 0px 1px 2px 0px rgb(27 29 34 / 0.06);
      color-scheme: light;
    }
  }

  :where([data-contrast="more"]) {
    --ak-accent: #8f3519;
    --ak-bg: #ffffff;
    --ak-border: #6b6f78;
    --ak-border-strong: #3d414b;
    --ak-danger: #8a1f1a;
    --ak-focus: #1a3561;
    --ak-info: #1a3561;
    --ak-on-accent: #ffffff;
    --ak-on-danger: #ffffff;
    --ak-on-primary: #ffffff;
    --ak-primary: #1a3561;
    --ak-primary-hover: #12284b;
    --ak-success: #13502f;
    --ak-surface: #ffffff;
    --ak-surface-sidebar: #f6f5f1;
    --ak-surface-subtle: #ebeae4;
    --ak-text: #0b0c0f;
    --ak-text-accent: #8f3519;
    --ak-text-glass: #3d414b;
    --ak-text-link: #1a3561;
    --ak-text-muted: #3d414b;
    --ak-warning: #5c4300;
    --ak-cat-1: #385dad;
    --ak-cat-2: #097347;
    --ak-cat-3: #9f66db;
    --ak-cat-4: #a8820a;
    --ak-cat-5: #0498ab;
    --ak-cat-6: #b6351c;
    --ak-div-1: #23467a;
    --ak-div-2: #4a6fa2;
    --ak-div-3: #97afd0;
    --ak-div-4: #cfcdc6;
    --ak-div-5: #dc9e84;
    --ak-div-6: #b04a26;
    --ak-div-7: #7a2c12;
    --ak-seq-1: #e6ecf4;
    --ak-seq-2: #b7c8df;
    --ak-seq-3: #7f9dc4;
    --ak-seq-4: #4a6fa2;
    --ak-seq-5: #23467a;
    --ak-focus-width: 3px;
    --ak-map-background: #f6f5f1;
    --ak-map-boundary: #a8a69e;
    --ak-map-building: #e8e6df;
    --ak-map-feature-line: #ffffff;
    --ak-map-label: #5d6270;
    --ak-map-label-halo: #f6f5f1;
    --ak-map-landcover: #eeede7;
    --ak-map-park: #e6eae0;
    --ak-map-road: #ffffff;
    --ak-map-road-casing: #dcdad3;
    --ak-map-water: #dde5ee;
    --ak-shadow-overlay: 0px 4px 16px 0px rgb(27 29 34 / 0.08);
    --ak-shadow-raised: 0px 1px 2px 0px rgb(27 29 34 / 0.06);
    color-scheme: light;
  }

  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :where(:root:not([data-contrast="normal"]):not([data-theme="light"], .light)) {
      --ak-accent: #f4a688;
      --ak-bg: #000000;
      --ak-border: #8a909c;
      --ak-border-strong: #c9ccd3;
      --ak-danger: #ffaba1;
      --ak-focus: #b5cdf0;
      --ak-info: #b5cdf0;
      --ak-on-accent: #000000;
      --ak-on-danger: #000000;
      --ak-on-primary: #000000;
      --ak-primary: #b5cdf0;
      --ak-primary-hover: #d0e0f7;
      --ak-success: #9be0bb;
      --ak-surface: #0b0c0f;
      --ak-surface-sidebar: #0b0c0f;
      --ak-surface-subtle: #1c1f26;
      --ak-text: #ffffff;
      --ak-text-accent: #f4a688;
      --ak-text-glass: #c9ccd3;
      --ak-text-link: #b5cdf0;
      --ak-text-muted: #c9ccd3;
      --ak-warning: #f3d27e;
      --ak-cat-1: #547deb;
      --ak-cat-2: #0d7b4c;
      --ak-cat-3: #8f4ab3;
      --ak-cat-4: #ae861d;
      --ak-cat-5: #00a5b8;
      --ak-cat-6: #c13c00;
      --ak-div-1: #9dbbe6;
      --ak-div-2: #6189c0;
      --ak-div-3: #3f5f8a;
      --ak-div-4: #3a3f4a;
      --ak-div-5: #8e4630;
      --ak-div-6: #c96a48;
      --ak-div-7: #f0a98c;
      --ak-seq-1: #1e2836;
      --ak-seq-2: #2b3f5c;
      --ak-seq-3: #3f5f8a;
      --ak-seq-4: #6189c0;
      --ak-seq-5: #9dbbe6;
      --ak-focus-width: 3px;
      --ak-map-background: #121419;
      --ak-map-boundary: #4a4f5b;
      --ak-map-building: #1e2128;
      --ak-map-feature-line: #121419;
      --ak-map-label: #9aa0ad;
      --ak-map-label-halo: #121419;
      --ak-map-landcover: #161920;
      --ak-map-park: #161d1b;
      --ak-map-road: #2a2e37;
      --ak-map-road-casing: #1a1d24;
      --ak-map-water: #18202c;
      --ak-shadow-overlay: 0px 4px 16px 0px rgb(0 0 0 / 0.5);
      --ak-shadow-raised: 0px 1px 2px 0px rgb(0 0 0 / 0.4);
      color-scheme: dark;
    }
  }

  @media (prefers-contrast: more) {
    :where(:root:not([data-contrast="normal"]):is([data-theme="dark"], .dark)) {
      --ak-accent: #f4a688;
      --ak-bg: #000000;
      --ak-border: #8a909c;
      --ak-border-strong: #c9ccd3;
      --ak-danger: #ffaba1;
      --ak-focus: #b5cdf0;
      --ak-info: #b5cdf0;
      --ak-on-accent: #000000;
      --ak-on-danger: #000000;
      --ak-on-primary: #000000;
      --ak-primary: #b5cdf0;
      --ak-primary-hover: #d0e0f7;
      --ak-success: #9be0bb;
      --ak-surface: #0b0c0f;
      --ak-surface-sidebar: #0b0c0f;
      --ak-surface-subtle: #1c1f26;
      --ak-text: #ffffff;
      --ak-text-accent: #f4a688;
      --ak-text-glass: #c9ccd3;
      --ak-text-link: #b5cdf0;
      --ak-text-muted: #c9ccd3;
      --ak-warning: #f3d27e;
      --ak-cat-1: #547deb;
      --ak-cat-2: #0d7b4c;
      --ak-cat-3: #8f4ab3;
      --ak-cat-4: #ae861d;
      --ak-cat-5: #00a5b8;
      --ak-cat-6: #c13c00;
      --ak-div-1: #9dbbe6;
      --ak-div-2: #6189c0;
      --ak-div-3: #3f5f8a;
      --ak-div-4: #3a3f4a;
      --ak-div-5: #8e4630;
      --ak-div-6: #c96a48;
      --ak-div-7: #f0a98c;
      --ak-seq-1: #1e2836;
      --ak-seq-2: #2b3f5c;
      --ak-seq-3: #3f5f8a;
      --ak-seq-4: #6189c0;
      --ak-seq-5: #9dbbe6;
      --ak-focus-width: 3px;
      --ak-map-background: #121419;
      --ak-map-boundary: #4a4f5b;
      --ak-map-building: #1e2128;
      --ak-map-feature-line: #121419;
      --ak-map-label: #9aa0ad;
      --ak-map-label-halo: #121419;
      --ak-map-landcover: #161920;
      --ak-map-park: #161d1b;
      --ak-map-road: #2a2e37;
      --ak-map-road-casing: #1a1d24;
      --ak-map-water: #18202c;
      --ak-shadow-overlay: 0px 4px 16px 0px rgb(0 0 0 / 0.5);
      --ak-shadow-raised: 0px 1px 2px 0px rgb(0 0 0 / 0.4);
      color-scheme: dark;
    }
  }

  @media (prefers-color-scheme: dark) {
    :where(:root[data-contrast="more"]:not([data-theme="light"], .light)) {
      --ak-accent: #f4a688;
      --ak-bg: #000000;
      --ak-border: #8a909c;
      --ak-border-strong: #c9ccd3;
      --ak-danger: #ffaba1;
      --ak-focus: #b5cdf0;
      --ak-info: #b5cdf0;
      --ak-on-accent: #000000;
      --ak-on-danger: #000000;
      --ak-on-primary: #000000;
      --ak-primary: #b5cdf0;
      --ak-primary-hover: #d0e0f7;
      --ak-success: #9be0bb;
      --ak-surface: #0b0c0f;
      --ak-surface-sidebar: #0b0c0f;
      --ak-surface-subtle: #1c1f26;
      --ak-text: #ffffff;
      --ak-text-accent: #f4a688;
      --ak-text-glass: #c9ccd3;
      --ak-text-link: #b5cdf0;
      --ak-text-muted: #c9ccd3;
      --ak-warning: #f3d27e;
      --ak-cat-1: #547deb;
      --ak-cat-2: #0d7b4c;
      --ak-cat-3: #8f4ab3;
      --ak-cat-4: #ae861d;
      --ak-cat-5: #00a5b8;
      --ak-cat-6: #c13c00;
      --ak-div-1: #9dbbe6;
      --ak-div-2: #6189c0;
      --ak-div-3: #3f5f8a;
      --ak-div-4: #3a3f4a;
      --ak-div-5: #8e4630;
      --ak-div-6: #c96a48;
      --ak-div-7: #f0a98c;
      --ak-seq-1: #1e2836;
      --ak-seq-2: #2b3f5c;
      --ak-seq-3: #3f5f8a;
      --ak-seq-4: #6189c0;
      --ak-seq-5: #9dbbe6;
      --ak-focus-width: 3px;
      --ak-map-background: #121419;
      --ak-map-boundary: #4a4f5b;
      --ak-map-building: #1e2128;
      --ak-map-feature-line: #121419;
      --ak-map-label: #9aa0ad;
      --ak-map-label-halo: #121419;
      --ak-map-landcover: #161920;
      --ak-map-park: #161d1b;
      --ak-map-road: #2a2e37;
      --ak-map-road-casing: #1a1d24;
      --ak-map-water: #18202c;
      --ak-shadow-overlay: 0px 4px 16px 0px rgb(0 0 0 / 0.5);
      --ak-shadow-raised: 0px 1px 2px 0px rgb(0 0 0 / 0.4);
      color-scheme: dark;
    }
  }

  :where([data-contrast="more"]:is([data-theme="dark"], .dark)) {
    --ak-accent: #f4a688;
    --ak-bg: #000000;
    --ak-border: #8a909c;
    --ak-border-strong: #c9ccd3;
    --ak-danger: #ffaba1;
    --ak-focus: #b5cdf0;
    --ak-info: #b5cdf0;
    --ak-on-accent: #000000;
    --ak-on-danger: #000000;
    --ak-on-primary: #000000;
    --ak-primary: #b5cdf0;
    --ak-primary-hover: #d0e0f7;
    --ak-success: #9be0bb;
    --ak-surface: #0b0c0f;
    --ak-surface-sidebar: #0b0c0f;
    --ak-surface-subtle: #1c1f26;
    --ak-text: #ffffff;
    --ak-text-accent: #f4a688;
    --ak-text-glass: #c9ccd3;
    --ak-text-link: #b5cdf0;
    --ak-text-muted: #c9ccd3;
    --ak-warning: #f3d27e;
    --ak-cat-1: #547deb;
    --ak-cat-2: #0d7b4c;
    --ak-cat-3: #8f4ab3;
    --ak-cat-4: #ae861d;
    --ak-cat-5: #00a5b8;
    --ak-cat-6: #c13c00;
    --ak-div-1: #9dbbe6;
    --ak-div-2: #6189c0;
    --ak-div-3: #3f5f8a;
    --ak-div-4: #3a3f4a;
    --ak-div-5: #8e4630;
    --ak-div-6: #c96a48;
    --ak-div-7: #f0a98c;
    --ak-seq-1: #1e2836;
    --ak-seq-2: #2b3f5c;
    --ak-seq-3: #3f5f8a;
    --ak-seq-4: #6189c0;
    --ak-seq-5: #9dbbe6;
    --ak-focus-width: 3px;
    --ak-map-background: #121419;
    --ak-map-boundary: #4a4f5b;
    --ak-map-building: #1e2128;
    --ak-map-feature-line: #121419;
    --ak-map-label: #9aa0ad;
    --ak-map-label-halo: #121419;
    --ak-map-landcover: #161920;
    --ak-map-park: #161d1b;
    --ak-map-road: #2a2e37;
    --ak-map-road-casing: #1a1d24;
    --ak-map-water: #18202c;
    --ak-shadow-overlay: 0px 4px 16px 0px rgb(0 0 0 / 0.5);
    --ak-shadow-raised: 0px 1px 2px 0px rgb(0 0 0 / 0.4);
    color-scheme: dark;
  }

  :where(:root[data-accent], [data-theme="light"][data-accent], .light[data-accent]) {
    --ak-primary: oklch(from var(--ak-brand) min(l, 0.5) c h);
    --ak-primary-hover: oklch(from var(--ak-brand) calc(min(l, 0.5) - 0.06) c h);
    --ak-on-primary: #ffffff;
    --ak-focus: oklch(from var(--ak-brand) min(l, 0.5) c h);
    --ak-text-link: oklch(from var(--ak-brand) min(l, 0.5) c h);
  }

  @media (prefers-color-scheme: dark) {
    :where(:root:not([data-theme="light"], .light)[data-accent]) {
      --ak-primary: oklch(from var(--ak-brand) max(l, 0.74) c h);
      --ak-primary-hover: oklch(from var(--ak-brand) calc(max(l, 0.74) + 0.06) c h);
      --ak-on-primary: #000000;
      --ak-focus: oklch(from var(--ak-brand) max(l, 0.74) c h);
      --ak-text-link: oklch(from var(--ak-brand) max(l, 0.74) c h);
    }
  }

  :where([data-theme="dark"][data-accent], .dark[data-accent]) {
    --ak-primary: oklch(from var(--ak-brand) max(l, 0.74) c h);
    --ak-primary-hover: oklch(from var(--ak-brand) calc(max(l, 0.74) + 0.06) c h);
    --ak-on-primary: #000000;
    --ak-focus: oklch(from var(--ak-brand) max(l, 0.74) c h);
    --ak-text-link: oklch(from var(--ak-brand) max(l, 0.74) c h);
  }

  @media (prefers-contrast: more) {
    :where(:root:not([data-contrast="normal"])[data-accent]) {
      --ak-primary: oklch(from var(--ak-brand) min(l, 0.5) c h);
      --ak-primary-hover: oklch(from var(--ak-brand) calc(min(l, 0.5) - 0.06) c h);
      --ak-on-primary: #ffffff;
      --ak-focus: oklch(from var(--ak-brand) min(l, 0.5) c h);
      --ak-text-link: oklch(from var(--ak-brand) min(l, 0.5) c h);
    }
  }

  :where([data-contrast="more"][data-accent]) {
    --ak-primary: oklch(from var(--ak-brand) min(l, 0.5) c h);
    --ak-primary-hover: oklch(from var(--ak-brand) calc(min(l, 0.5) - 0.06) c h);
    --ak-on-primary: #ffffff;
    --ak-focus: oklch(from var(--ak-brand) min(l, 0.5) c h);
    --ak-text-link: oklch(from var(--ak-brand) min(l, 0.5) c h);
  }

  @media (prefers-contrast: more) and (prefers-color-scheme: dark) {
    :where(:root:not([data-contrast="normal"]):not([data-theme="light"], .light)[data-accent]) {
      --ak-primary: oklch(from var(--ak-brand) max(l, 0.74) c h);
      --ak-primary-hover: oklch(from var(--ak-brand) calc(max(l, 0.74) + 0.06) c h);
      --ak-on-primary: #000000;
      --ak-focus: oklch(from var(--ak-brand) max(l, 0.74) c h);
      --ak-text-link: oklch(from var(--ak-brand) max(l, 0.74) c h);
    }
  }

  @media (prefers-contrast: more) {
    :where(:root:not([data-contrast="normal"]):is([data-theme="dark"], .dark)[data-accent]) {
      --ak-primary: oklch(from var(--ak-brand) max(l, 0.74) c h);
      --ak-primary-hover: oklch(from var(--ak-brand) calc(max(l, 0.74) + 0.06) c h);
      --ak-on-primary: #000000;
      --ak-focus: oklch(from var(--ak-brand) max(l, 0.74) c h);
      --ak-text-link: oklch(from var(--ak-brand) max(l, 0.74) c h);
    }
  }

  @media (prefers-color-scheme: dark) {
    :where(:root[data-contrast="more"]:not([data-theme="light"], .light)[data-accent]) {
      --ak-primary: oklch(from var(--ak-brand) max(l, 0.74) c h);
      --ak-primary-hover: oklch(from var(--ak-brand) calc(max(l, 0.74) + 0.06) c h);
      --ak-on-primary: #000000;
      --ak-focus: oklch(from var(--ak-brand) max(l, 0.74) c h);
      --ak-text-link: oklch(from var(--ak-brand) max(l, 0.74) c h);
    }
  }

  :where([data-contrast="more"]:is([data-theme="dark"], .dark)[data-accent]) {
    --ak-primary: oklch(from var(--ak-brand) max(l, 0.74) c h);
    --ak-primary-hover: oklch(from var(--ak-brand) calc(max(l, 0.74) + 0.06) c h);
    --ak-on-primary: #000000;
    --ak-focus: oklch(from var(--ak-brand) max(l, 0.74) c h);
    --ak-text-link: oklch(from var(--ak-brand) max(l, 0.74) c h);
  }

  :where(:root, [data-theme], .light, .dark, [data-contrast]) {
    --ak-button-font-weight: var(--ak-font-weight-medium);
    --ak-button-ghost-bg-hover: var(--ak-surface-subtle);
    --ak-button-ghost-border: var(--ak-border-strong);
    --ak-button-ghost-fg: var(--ak-text);
    --ak-button-padding-x: var(--ak-space-2);
    --ak-button-padding-y: var(--ak-space-1-5);
    --ak-button-primary-bg: var(--ak-primary);
    --ak-button-primary-bg-hover: var(--ak-primary-hover);
    --ak-button-primary-fg: var(--ak-on-primary);
    --ak-button-radius: var(--ak-radius-control);
    --ak-card-bg: var(--ak-surface);
    --ak-card-border: var(--ak-border);
    --ak-card-fg: var(--ak-text);
    --ak-card-padding: var(--ak-space-3);
    --ak-card-radius: var(--ak-radius-surface);
    --ak-focus-ring-color: var(--ak-focus);
    --ak-focus-ring-width: var(--ak-focus-width);
    --ak-input-bg: var(--ak-surface);
    --ak-input-border: var(--ak-border-strong);
    --ak-input-border-focus: var(--ak-focus);
    --ak-input-fg: var(--ak-text);
    --ak-input-placeholder: var(--ak-text-muted);
    --ak-input-radius: var(--ak-radius-control);
    --ak-seal-color: var(--ak-accent);
    --ak-segmented-active-bg: var(--ak-text);
    --ak-segmented-active-fg: var(--ak-surface);
    --ak-segmented-border: var(--ak-border-strong);
    --ak-segmented-fg: var(--ak-text-muted);
    --ak-sparkline-area: var(--ak-seq-2);
    --ak-sparkline-baseline: var(--ak-border);
    --ak-sparkline-line: var(--ak-primary);
    --ak-sparkline-marker: var(--ak-accent);
    --ak-stat-delta: var(--ak-text-accent);
    --ak-stat-label: var(--ak-text-muted);
    --ak-stat-value: var(--ak-text);
    --ak-tag-bg: var(--ak-surface);
    --ak-tag-fg: var(--ak-text-accent);
    --ak-tag-radius: var(--ak-radius-pill);
  }

  @media (prefers-reduced-motion: reduce) {
    :where(:root) {
      --ak-duration-base: 0ms;
      --ak-duration-fast: 0ms;
      --ak-duration-slow: 0ms;
    }
  }
}

/* Small modern reset. `ak-` / akari are replaced from akari.config.json at build time. */
@layer akari.reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100dvh; -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
}

/* Base typography for EN + JA. */
@layer akari.base {
  html {
    background: var(--ak-bg);
    color: var(--ak-text);
    font-family: var(--ak-font-body);
    font-size: var(--ak-font-size-base);
    line-height: var(--ak-leading-body);
    font-kerning: normal;
  }
  /* Japanese: more leading, slight tracking, keep words intact where the browser supports it. */
  :lang(ja) { line-height: var(--ak-leading-ja); letter-spacing: 0.02em; line-break: strict; word-break: auto-phrase; }
  body { background: var(--ak-bg); color: var(--ak-text); }

  h1, h2, h3, h4 {
    font-family: var(--ak-font-display);
    font-weight: var(--ak-font-weight-semibold);
    line-height: var(--ak-leading-tight);
    letter-spacing: -0.01em;
    text-wrap: balance;
  }
  /* Proportional kana metrics (palt) tighten JA headings set in Mincho. */
  :lang(ja) :is(h1, h2, h3, h4), :is(h1, h2, h3, h4):lang(ja) { font-feature-settings: "palt" 1; letter-spacing: 0.04em; line-height: var(--ak-leading-snug); }
  h1 { font-size: var(--ak-font-size-3xl); }
  h2 { font-size: var(--ak-font-size-2xl); }
  h3 { font-size: var(--ak-font-size-xl); }
  h4 { font-size: var(--ak-font-size-lg); }
  p, li { text-wrap: pretty; }
  small { font-size: var(--ak-font-size-sm); }
  code, kbd, samp, pre { font-family: var(--ak-font-mono); font-size: 0.92em; }
  table, time, data, output { font-variant-numeric: tabular-nums; }

  a { color: var(--ak-text-link); text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  hr { border: 0; border-top: 1px solid var(--ak-border); }
  ::selection { background: var(--ak-seq-2); color: var(--ak-text); }

  :focus-visible {
    outline: var(--ak-focus-ring-width) solid var(--ak-focus-ring-color);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* Plain-HTML components (Spring/Thymeleaf, Vue, static pages). Tokens only; no JS required. */
@layer akari.components {
  /* Layout */
  .ak-page { max-width: var(--ak-layout-page); margin-inline: auto; padding-inline: max(var(--ak-layout-gutter), env(safe-area-inset-left, 0px)); padding-block: var(--ak-space-8); }
  .ak-stack { display: flex; flex-direction: column; gap: var(--ak-stack-gap, var(--ak-space-2)); }
  .ak-stack[data-gap="1"] { --ak-stack-gap: var(--ak-space-1); }
  .ak-stack[data-gap="3"] { --ak-stack-gap: var(--ak-space-3); }
  .ak-stack[data-gap="4"] { --ak-stack-gap: var(--ak-space-4); }
  .ak-stack[data-gap="6"] { --ak-stack-gap: var(--ak-space-6); }
  .ak-stack[data-direction="row"] { flex-direction: row; flex-wrap: wrap; align-items: center; }

  /* Long-form text: the core of React <Prose>. First and last children sit flush. */
  .ak-prose { max-width: 68ch; display: grid; gap: var(--ak-space-2); }
  .ak-prose h2 { font-size: var(--ak-font-size-xl); margin-top: var(--ak-space-4); }
  .ak-prose h3 { font-size: var(--ak-font-size-lg); margin-top: var(--ak-space-2); }
  .ak-prose :is(ul, ol) { padding-left: 1.25rem; display: grid; gap: var(--ak-space-0-5); }
  .ak-prose > :first-child { margin-top: 0; }
  .ak-prose > :last-child { margin-bottom: 0; }

  .ak-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ak-space-2); padding-block: var(--ak-space-1-5); border-bottom: 1px solid var(--ak-border); }
  .ak-brand { display: inline-flex; align-items: center; gap: var(--ak-space-1); font-family: var(--ak-font-display); font-weight: var(--ak-font-weight-semibold); color: var(--ak-text); text-decoration: none; }

  /* Panel / card */
  .ak-panel { background: var(--ak-card-bg); color: var(--ak-card-fg); border: 1px solid var(--ak-card-border); border-radius: var(--ak-card-radius); padding: var(--ak-card-padding); min-width: 0; }
  .ak-eyebrow { font-family: var(--ak-font-mono); font-size: var(--ak-font-size-2xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ak-text-muted); }

  /* Button */
  .ak-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ak-space-1);
    font: var(--ak-button-font-weight) var(--ak-font-size-sm)/1 var(--ak-font-body);
    padding: var(--ak-button-padding-y) var(--ak-button-padding-x);
    border-radius: var(--ak-button-radius); border: 1px solid var(--ak-button-primary-bg);
    background: var(--ak-button-primary-bg); color: var(--ak-button-primary-fg); text-decoration: none;
    transition: background-color var(--ak-duration-fast) var(--ak-ease-standard), border-color var(--ak-duration-fast) var(--ak-ease-standard);
  }
  .ak-btn:hover { background: var(--ak-button-primary-bg-hover); border-color: var(--ak-button-primary-bg-hover); }
  .ak-btn[data-variant="ghost"] { background: transparent; color: var(--ak-button-ghost-fg); border-color: var(--ak-button-ghost-border); }
  .ak-btn[data-variant="ghost"]:hover { background: var(--ak-button-ghost-bg-hover); }
  .ak-btn:disabled, .ak-btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

  /* Tag */
  .ak-tag { display: inline-flex; align-items: center; font-family: var(--ak-font-mono); font-size: var(--ak-font-size-2xs); letter-spacing: 0.04em; color: var(--ak-tag-fg); background: var(--ak-tag-bg); border: 1px solid currentColor; border-radius: var(--ak-tag-radius); padding: 3px 8px; white-space: nowrap; }

  /* Form */
  .ak-label { display: block; font-size: var(--ak-font-size-sm); font-weight: var(--ak-font-weight-medium); margin-bottom: var(--ak-space-0-5); }
  .ak-input { width: 100%; background: var(--ak-input-bg); color: var(--ak-input-fg); border: 1px solid var(--ak-input-border); border-radius: var(--ak-input-radius); padding: 9px 12px; font-size: var(--ak-font-size-sm); }
  .ak-input::placeholder { color: var(--ak-input-placeholder); }
  .ak-input:focus-visible { border-color: var(--ak-input-border-focus); }
  .ak-input[aria-invalid="true"] { border-color: var(--ak-danger); }
  .ak-hint { font-size: var(--ak-font-size-xs); color: var(--ak-text-muted); margin-top: var(--ak-space-0-5); }
  .ak-hint[data-tone="danger"] { color: var(--ak-danger); }

  /* Segmented control: buttons carry aria-pressed */
  .ak-segmented { display: inline-flex; border: 1px solid var(--ak-segmented-border); border-radius: var(--ak-radius-control); overflow: hidden; }
  .ak-segmented > button { font: var(--ak-font-weight-medium) var(--ak-font-size-xs)/1 var(--ak-font-body); border: 0; background: transparent; color: var(--ak-segmented-fg); padding: 7px 10px; }
  .ak-segmented > button[aria-pressed="true"] { background: var(--ak-segmented-active-bg); color: var(--ak-segmented-active-fg); }
  .ak-segmented > button:focus-visible { outline-offset: -2px; }

  /* Stat */
  .ak-stat-label { font-size: var(--ak-font-size-xs); color: var(--ak-stat-label); }
  .ak-stat-value { font-family: var(--ak-font-display); font-size: 34px; line-height: 1.1; color: var(--ak-stat-value); font-variant-numeric: tabular-nums; }
  .ak-stat-value small { font-size: 15px; color: var(--ak-stat-label); }
  .ak-stat-delta { font-family: var(--ak-font-mono); font-size: var(--ak-font-size-xs); color: var(--ak-stat-delta); }

  /* Map legend: <div class="ak-legend" data-steps="5"><i></i>…</div> */
  .ak-legend { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: 14px; border-radius: var(--ak-radius-control); overflow: hidden; gap: 1px; background: var(--ak-bg); }
  .ak-legend-labels { display: flex; justify-content: space-between; font-family: var(--ak-font-mono); font-size: var(--ak-font-size-2xs); color: var(--ak-text-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

  /* Seal mark (hanko) */
  .ak-seal { color: var(--ak-seal-color); flex: none; }

  /* Vertical-text accent (縦書き) */
  .ak-vert { writing-mode: vertical-rl; font-family: var(--ak-font-display); font-size: var(--ak-font-size-xs); letter-spacing: 0.3em; color: var(--ak-text-muted); }

  /* Bilingual content: <span class="ak-en">…</span><span class="ak-ja" lang="ja">…</span> */
  :root:not(:lang(ja)) .ak-ja, :root:lang(ja) .ak-en { display: none; }
}

@layer akari.utilities {
  .ak-display { font-family: var(--ak-font-display); }
  .ak-mono { font-family: var(--ak-font-mono); }
  .ak-num { font-variant-numeric: tabular-nums; }
  .ak-muted { color: var(--ak-text-muted); }
  .ak-accent { color: var(--ak-text-accent); }
  .ak-measure { max-width: 68ch; }
  :lang(ja) .ak-measure, .ak-measure:lang(ja) { max-width: 40em; }
  .ak-balance { text-wrap: balance; }
  .ak-surface { background: var(--ak-surface); }
  .ak-hairline { border: 1px solid var(--ak-border); }
  .ak-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
}