/* Generated by ui/scripts/sync-tokens.mjs from mikoshi/web/css/tokens.css; edit the source and run `npm run sync-tokens -w ui`. */
:root,
[data-theme="dark"] {
  --bg: #0b0c0e;
  --bg-deep: #070809;
  --surface: #15171b;
  --surface-2: #1b1e24;
  --surface-3: #22262e;
  --rail: #0f1114;
  --term: #0a0c0f;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.13);
  --text: #e8eaf0;
  --muted: #9aa1ac;
  --faint: #6b7280;
  --accent: #6e8bff;
  --accent-2: #7c5cff;
  --aurora: #4ad9c0;
  --accent-soft: rgba(110, 139, 255, 0.12);
  --accent-line: rgba(110, 139, 255, 0.4);
  --accent-2-soft: rgba(124, 92, 255, 0.12);
  --accent-2-line: rgba(124, 92, 255, 0.35);
  --aurora-soft: rgba(74, 217, 192, 0.12);
  --aurora-line: rgba(74, 217, 192, 0.35);
  --gradient: linear-gradient(180deg, var(--accent), var(--accent-2));
  --gradient-aurora: linear-gradient(135deg, var(--brand-gradient-a) 0%, var(--brand-gradient-b) 55%, var(--brand-gradient-c) 100%);
  --ok: #34c77b;
  --ok-soft: rgba(52, 199, 123, 0.12);
  --ok-line: rgba(52, 199, 123, 0.35);
  --warn: #f5a623;
  --warn-soft: rgba(245, 166, 35, 0.12);
  --warn-line: rgba(245, 166, 35, 0.4);
  --err: #ff5a5a;
  --err-soft: rgba(255, 90, 90, 0.1);
  --err-line: rgba(255, 90, 90, 0.4);
  --user-bubble: rgba(52, 199, 123, 0.16);
  --user-bubble-line: rgba(52, 199, 123, 0.35);
  --st-hover: rgba(255, 255, 255, 0.055);
  --st-press: rgba(255, 255, 255, 0.11);
  --st-sel: rgba(110, 139, 255, 0.13);
  --st-sel-press: rgba(110, 139, 255, 0.2);
  --on-accent: #ffffff;
  --on-warn: #1b1300;
  --accent-2-fg: #a893ff;
  --accent-fg: #a9b9ff;
  --err-fg: #ff9b9b;
  --scrim: rgba(0, 0, 0, 0.5);
  --scrim-strong: rgba(0, 0, 0, 0.6);
  --sunken: rgba(0, 0, 0, 0.22);
  --code-bg: rgba(255, 255, 255, 0.07);
  --head-bg: rgba(255, 255, 255, 0.035);
  --neutral-soft: rgba(255, 255, 255, 0.06);
  --accent-glow: rgba(110, 139, 255, 0.35);
  --aurora-glow: rgba(74, 217, 192, 0.35);
  --shadow-float: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-chip: 0 2px 8px rgba(0, 0, 0, 0.5);
  --traffic-free: #37c871;
  --traffic-slow: #f7b52c;
  --traffic-jam: #ff4d4d;
  --map-highway: #c9a15e;
  --map-highway-edge: #6a4e22;
  --cap-glass-bg: rgba(10, 12, 15, 0.55);
  --cap-glass-line: rgba(255, 255, 255, 0.1);
  --cap-shade: rgba(0, 0, 0, 0.42);
  --cap-shade-foot: rgba(0, 0, 0, 0.6);
  --cap-tile-shade: rgba(6, 8, 12, 0.62);
  --cap-tile-shade-soft: rgba(6, 8, 12, 0.34);
  --cap-tile-shade-edge: rgba(6, 8, 12, 0.12);
  --cap-muted-on-media: rgba(255, 255, 255, 0.82);
  --cap-flash: #ffffff;
  --cap-ripple: rgba(255, 255, 255, 0.14);
  --viewer-scrim: rgba(0, 0, 0, 0.85);
  --viewer-scrim-mid: rgba(0, 0, 0, 0.6);
  --viewer-scrim-top: 150px;
  --viewer-on-media: #ffffff;
  --viewer-muted-on-media: rgba(255, 255, 255, 0.86);
  --viewer-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  --viewer-icon-shadow: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.6));
  --media-bg: #0a0c0f;
  --viewer-bg: #070809;
  --hero-face: radial-gradient(circle at 50% 30%, var(--surface-3), var(--surface-2) 70%);
  --hero-halo: 0 0 18px var(--accent-soft);
  --brand-gradient-a: #6e8bff;
  --brand-gradient-b: #7c5cff;
  --brand-gradient-c: #4ad9c0;
  --voice-gradient-a: #7fe6ff;
  --voice-gradient-b: #8fa2ff;
  --voice-gradient-c: #9a7bff;
  --mind-stroke: #9a88ff;
  --thumb-light-bg: #f6f7f9;
  --thumb-light-card: #ffffff;
  --thumb-light-line: rgba(20, 28, 48, 0.12);
  --thumb-light-out: #d7efdf;
  --thumb-light-accent: #5b78ff;
  --thumb-dark-bg: #0b0c0e;
  --thumb-dark-card: #1b1e24;
  --thumb-dark-dock: #15171b;
  --thumb-dark-line: rgba(255, 255, 255, 0.1);
  --thumb-dark-out: #173524;
  --thumb-dark-accent: #7c5cff;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 14px;
  --fs-body: 15px;
  --fs-lg: 17px;
  --fs-title: 22px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --gutter: 12px;
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-sheet: 22px;
  --r-pill: 999px;
  --tap: 44px;
  --icon-btn: 40px;
  --icon: 20px;
  --icon-sm: 16px;
  --shadow-pop: 0 20px 50px rgba(0, 0, 0, 0.55);
  --shadow-sheet: 0 -24px 60px rgba(0, 0, 0, 0.6);
  --shadow-cta: 0 4px 14px rgba(110, 139, 255, 0.28);
  --ring: 0 0 0 3px rgba(110, 139, 255, 0.16);
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast: 120ms;
  --t-base: 180ms;
  --t-sheet: 280ms;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f6f7f9;
  --bg-deep: #eceef2;
  --surface: #ffffff;
  --surface-2: #f1f3f6;
  --surface-3: #e7eaef;
  --rail: #f0f2f5;
  --term: #f3f5f8;
  --line: rgba(20, 28, 48, 0.09);
  --line-2: rgba(20, 28, 48, 0.16);
  --text: #15171c;
  --muted: #5a6170;
  --faint: #6b7280;
  --accent: #3f5ae0;
  --accent-2: #6a45f0;
  --aurora: #0a846e;
  --accent-soft: rgba(63, 90, 224, 0.09);
  --accent-line: rgba(63, 90, 224, 0.34);
  --accent-2-soft: rgba(106, 69, 240, 0.09);
  --accent-2-line: rgba(106, 69, 240, 0.3);
  --aurora-soft: rgba(10, 132, 110, 0.1);
  --aurora-line: rgba(10, 132, 110, 0.32);
  --brand-gradient-a: #5b78ff;
  --brand-gradient-b: #7552f5;
  --brand-gradient-c: #22c3a6;
  --voice-gradient-a: #0fb3d6;
  --voice-gradient-b: #4f6af0;
  --voice-gradient-c: #7552f5;
  --mind-stroke: #6a4fe0;
  --ok: #16804a;
  --ok-soft: rgba(22, 128, 74, 0.1);
  --ok-line: rgba(22, 128, 74, 0.3);
  --warn: #9a5b00;
  --warn-soft: rgba(214, 138, 20, 0.14);
  --warn-line: rgba(176, 108, 0, 0.36);
  --err: #c62f2f;
  --err-soft: rgba(198, 47, 47, 0.08);
  --err-line: rgba(198, 47, 47, 0.32);
  --user-bubble: #e4f4ea;
  --user-bubble-line: rgba(22, 128, 74, 0.2);
  --st-hover: rgba(20, 28, 48, 0.045);
  --st-press: rgba(20, 28, 48, 0.09);
  --st-sel: rgba(63, 90, 224, 0.1);
  --st-sel-press: rgba(63, 90, 224, 0.16);
  --on-accent: #ffffff;
  --on-warn: #ffffff;
  --accent-2-fg: #5b3fd6;
  --accent-fg: #3f5ae0;
  --err-fg: #c62f2f;
  --scrim: rgba(18, 22, 34, 0.28);
  --scrim-strong: rgba(18, 22, 34, 0.42);
  --sunken: rgba(20, 28, 48, 0.035);
  --code-bg: rgba(20, 28, 48, 0.06);
  --head-bg: rgba(20, 28, 48, 0.03);
  --neutral-soft: rgba(20, 28, 48, 0.05);
  --accent-glow: rgba(63, 90, 224, 0.2);
  --traffic-free: #2cb760;
  --traffic-slow: #f5b400;
  --traffic-jam: #e8392c;
  --map-highway: #ffd978;
  --map-highway-edge: #dca33e;
  --aurora-glow: rgba(10, 132, 110, 0.2);
  --shadow-float: 0 4px 14px rgba(20, 28, 48, 0.1), 0 1px 3px rgba(20, 28, 48, 0.06);
  --shadow-chip: 0 1px 4px rgba(20, 28, 48, 0.14);
  --shadow-pop: 0 18px 44px rgba(20, 28, 48, 0.14), 0 2px 8px rgba(20, 28, 48, 0.06);
  --shadow-sheet: 0 -10px 40px rgba(20, 28, 48, 0.12);
  --shadow-cta: 0 4px 14px rgba(63, 90, 224, 0.24);
  --ring: 0 0 0 3px rgba(63, 90, 224, 0.16);
  --hero-face: radial-gradient(circle at 50% 30%, #ffffff, #f1f3f7 72%);
  --hero-halo: 0 0 0 1px rgba(20, 28, 48, 0.04);
  --gradient: linear-gradient(180deg, var(--accent), var(--accent-2));
  --gradient-aurora: linear-gradient(135deg, var(--brand-gradient-a) 0%, var(--brand-gradient-b) 55%, var(--brand-gradient-c) 100%);
  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #f6f7f9;
    --bg-deep: #eceef2;
    --surface: #ffffff;
    --surface-2: #f1f3f6;
    --surface-3: #e7eaef;
    --rail: #f0f2f5;
    --term: #f3f5f8;
    --line: rgba(20, 28, 48, 0.09);
    --line-2: rgba(20, 28, 48, 0.16);
    --text: #15171c;
    --muted: #5a6170;
    --faint: #6b7280;
    --accent: #3f5ae0;
    --accent-2: #6a45f0;
    --aurora: #0a846e;
    --accent-soft: rgba(63, 90, 224, 0.09);
    --accent-line: rgba(63, 90, 224, 0.34);
    --accent-2-soft: rgba(106, 69, 240, 0.09);
    --accent-2-line: rgba(106, 69, 240, 0.3);
    --aurora-soft: rgba(10, 132, 110, 0.1);
    --aurora-line: rgba(10, 132, 110, 0.32);
    --brand-gradient-a: #5b78ff;
    --brand-gradient-b: #7552f5;
    --brand-gradient-c: #22c3a6;
    --voice-gradient-a: #0fb3d6;
    --voice-gradient-b: #4f6af0;
    --voice-gradient-c: #7552f5;
    --mind-stroke: #6a4fe0;
    --ok: #16804a;
    --ok-soft: rgba(22, 128, 74, 0.1);
    --ok-line: rgba(22, 128, 74, 0.3);
    --warn: #9a5b00;
    --warn-soft: rgba(214, 138, 20, 0.14);
    --warn-line: rgba(176, 108, 0, 0.36);
    --err: #c62f2f;
    --err-soft: rgba(198, 47, 47, 0.08);
    --err-line: rgba(198, 47, 47, 0.32);
    --user-bubble: #e4f4ea;
    --user-bubble-line: rgba(22, 128, 74, 0.2);
    --st-hover: rgba(20, 28, 48, 0.045);
    --st-press: rgba(20, 28, 48, 0.09);
    --st-sel: rgba(63, 90, 224, 0.1);
    --st-sel-press: rgba(63, 90, 224, 0.16);
    --on-accent: #ffffff;
    --on-warn: #ffffff;
    --accent-2-fg: #5b3fd6;
    --accent-fg: #3f5ae0;
    --err-fg: #c62f2f;
    --scrim: rgba(18, 22, 34, 0.28);
    --scrim-strong: rgba(18, 22, 34, 0.42);
    --sunken: rgba(20, 28, 48, 0.035);
    --code-bg: rgba(20, 28, 48, 0.06);
    --head-bg: rgba(20, 28, 48, 0.03);
    --neutral-soft: rgba(20, 28, 48, 0.05);
    --accent-glow: rgba(63, 90, 224, 0.2);
    --traffic-free: #2cb760;
    --traffic-slow: #f5b400;
    --traffic-jam: #e8392c;
    --map-highway: #ffd978;
    --map-highway-edge: #dca33e;
    --aurora-glow: rgba(10, 132, 110, 0.2);
    --shadow-float: 0 4px 14px rgba(20, 28, 48, 0.1), 0 1px 3px rgba(20, 28, 48, 0.06);
    --shadow-chip: 0 1px 4px rgba(20, 28, 48, 0.14);
    --shadow-pop: 0 18px 44px rgba(20, 28, 48, 0.14), 0 2px 8px rgba(20, 28, 48, 0.06);
    --shadow-sheet: 0 -10px 40px rgba(20, 28, 48, 0.12);
    --shadow-cta: 0 4px 14px rgba(63, 90, 224, 0.24);
    --ring: 0 0 0 3px rgba(63, 90, 224, 0.16);
    --hero-face: radial-gradient(circle at 50% 30%, #ffffff, #f1f3f7 72%);
    --hero-halo: 0 0 0 1px rgba(20, 28, 48, 0.04);
    --gradient: linear-gradient(180deg, var(--accent), var(--accent-2));
    --gradient-aurora: linear-gradient(135deg, var(--brand-gradient-a) 0%, var(--brand-gradient-b) 55%, var(--brand-gradient-c) 100%);
    color-scheme: light;
  }
}