@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* base palette — Studio Light, one cyan. Dark values below keep the same names, so every rule that
     reads a palette token follows the mode. --am-ink and --am-paper never change between modes. */
  --am-mist: #F5F5F7;       --am-white: #FFFFFF;      --am-stone: #E5E5EA;
  --am-line: #E5E5EA;       --am-graphite: #1E2124;   --am-graphite-raised: #2A2E32;
  --am-pewter: #5B6167;     --am-silver: #A1A1A6;     --am-subtle: #EDEDF0;
  --am-cyan: #3EC3E6;       --am-cyan-hover: #35B4D6;
  --am-watch: #E8A23A;      --am-out: #D2493F;
  --am-ink: #1E2124;        --am-paper: #FFFFFF;

  /* semantic */
  --bg-canvas: var(--am-mist);          --bg-card: var(--am-white);
  --bg-band-alt: var(--am-white);       --bg-band-dark: var(--am-graphite);
  --bg-subtle: var(--am-subtle);        --bg-on-dark: var(--am-graphite-raised);
  --bg-chip: var(--am-white);            --bg-chip-on-alt: var(--am-mist);
  --bg-card-on-alt: var(--am-mist);
  --bg-tile: var(--am-mist);             --bg-tile-on-alt: var(--am-white);
  --border-hairline: var(--am-line);
  --border-band-alt: transparent;
  --text-primary: var(--am-graphite);   --text-secondary: var(--am-pewter);   --text-tertiary: var(--am-silver);
  --text-on-dark: var(--am-mist);       --text-on-dark-secondary: var(--am-silver);
  --action-primary-bg: var(--am-cyan);  --action-primary-bg-hover: var(--am-cyan-hover);
  --action-primary-fg: var(--am-ink);
  --action-secondary-bg: var(--am-mist); --action-secondary-bg-hover: var(--am-stone);
  --chart-line: var(--am-cyan);
  --status-ideal: var(--am-cyan); --status-watch: var(--am-watch); --status-out: var(--am-out);
  --status-halo-alpha: .18;   /* halo = 0 0 0 4px status @ .18 */
  --nav-bg: rgba(245,245,247,.92); --nav-blur: 12px; --nav-height: 68px;

  /* type — Instrument Sans + JetBrains Mono (eyebrows only). Steep scale, tighter tracking as size grows. */
  --font-sans: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --type-display:  500 clamp(46px, 6.2vw, 80px)/1.0 var(--font-sans); --track-display: -0.04em;
  --type-stat:     500 64px/1 var(--font-sans);                       --track-stat: -0.04em;
  --type-headline: 500 clamp(34px, 4vw, 48px)/1.05 var(--font-sans);  --track-headline: -0.03em;
  --type-title:    500 31px/1.08 var(--font-sans);                    --track-title: -0.03em;
  --type-heading:  500 20px/1.2 var(--font-sans);                     --track-heading: -0.02em;
  --type-lead:     400 19px/1.5 var(--font-sans);
  --type-body:     400 16px/1.5 var(--font-sans);
  --type-body-sm:  400 15px/1.5 var(--font-sans);
  --type-label:    500 14px/1.2 var(--font-sans);
  --type-caption:  400 12px/1.3 var(--font-sans);
  --type-eyebrow:  500 13px/1 var(--font-mono);
  /* 2.0 scale: one oversized element per view */
  --type-display-xl:  500 clamp(58px, 9.4vw, 136px)/.9 var(--font-sans);  --track-display-xl: -0.055em;
  --type-numeral:     500 clamp(104px, 13vw, 196px)/.82 var(--font-sans); --track-numeral: -0.06em;
  --type-headline-xl: 500 clamp(42px, 5.8vw, 84px)/.96 var(--font-sans);  --track-headline-xl: -0.05em;
  --type-lead-xl:     400 clamp(18px, 1.6vw, 21px)/1.5 var(--font-sans);

  /* shape + space */
  --radius-card: 22px; --radius-tile: 14px; --radius-input: 10px; --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-16: 64px; --space-24: 96px; --space-30: 120px;
  --page-max: 1240px; --page-margin: clamp(20px, 5vw, 40px);
  --section-y: clamp(72px, 12vw, 120px); --bp-nav-collapse: 760px;

  /* depth — renders are already lit: no shadow in light, cyan glow in dark. Screens keep a soft drop. */
  --shadow-device: 0 30px 40px rgba(0,0,0,.18);
  --phone-filter: drop-shadow(0 30px 40px rgba(0,0,0,.18));
  --render-filter: none;
  --render-glow: transparent;
  --card-rim: none;
  --screen-spotlight: none;
  --card-spotlight: var(--bg-card);
  --wordmark-filter: none;

  /* range bar */
  --range-out: rgba(30,33,36,.12); --range-watch: rgba(30,33,36,.30); --range-ideal: rgba(30,33,36,.80);
  --range-height: 3px; --range-gap: 2px; --range-marker: 11px;  /* zones per chemical: ranges.json */

  /* motion */
  --ease-settle: cubic-bezier(.2,.7,.2,1);
  --dur-quick: 160ms; --dur-settle: 320ms; --dur-breathe: 2400ms;

  color-scheme: light;
}

/* Studio Dark. Keep the two blocks identical: the first follows the OS, the second is the saved choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --am-mist: #16191D;       --am-white: #22272D;      --am-stone: #2B3138;
    --am-line: #2B3138;       --am-graphite: #F5F5F7;   --am-graphite-raised: #E5E5EA;
    --am-pewter: #A9AFB6;     --am-silver: #6B7177;     --am-subtle: #2E343B;
    --am-out: #E0574D;
    --bg-band-alt: #1B1E22;   --border-band-alt: var(--am-line);
    --bg-chip: var(--am-subtle);   --bg-chip-on-alt: var(--am-subtle);   --bg-card-on-alt: var(--am-white);
    --bg-tile: var(--am-subtle);   --bg-tile-on-alt: var(--am-subtle);
    --action-secondary-bg: var(--am-subtle);   --action-secondary-bg-hover: var(--am-line);
    --text-on-dark-secondary: #5B6167;
    --nav-bg: rgba(22,25,29,.82);
    --shadow-device: 0 0 0 1px rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.05), 0 30px 40px rgba(0,0,0,.45);
    --render-filter: drop-shadow(0 0 56px rgba(62,195,230,.24));
    --render-glow: radial-gradient(closest-side, rgba(62,195,230,.26), rgba(62,195,230,0));
    --card-rim: inset 0 0 0 1px rgba(255,255,255,.05);
    --phone-filter: drop-shadow(0 30px 40px rgba(0,0,0,.45));
    --screen-spotlight: radial-gradient(48% 30% at 50% 32%, rgba(255,255,255,.22), rgba(255,255,255,.07) 55%, rgba(255,255,255,0));
    --card-spotlight: radial-gradient(48% 28% at 50% 30%, rgba(255,255,255,.16), rgba(255,255,255,0)), #22272D;
    --wordmark-filter: brightness(0) invert(.96);
    --range-out: rgba(245,245,247,.12); --range-watch: rgba(245,245,247,.30); --range-ideal: rgba(245,245,247,.80);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --am-mist: #16191D;       --am-white: #22272D;      --am-stone: #2B3138;
  --am-line: #2B3138;       --am-graphite: #F5F5F7;   --am-graphite-raised: #E5E5EA;
  --am-pewter: #A9AFB6;     --am-silver: #6B7177;     --am-subtle: #2E343B;
  --am-out: #E0574D;
  --bg-band-alt: #1B1E22;   --border-band-alt: var(--am-line);
  --bg-chip: var(--am-subtle);   --bg-chip-on-alt: var(--am-subtle);   --bg-card-on-alt: var(--am-white);
  --bg-tile: var(--am-subtle);   --bg-tile-on-alt: var(--am-subtle);
  --action-secondary-bg: var(--am-subtle);   --action-secondary-bg-hover: var(--am-line);
  --text-on-dark-secondary: #5B6167;
  --nav-bg: rgba(22,25,29,.82);
  --shadow-device: 0 0 0 1px rgba(255,255,255,.12), 0 0 0 1px rgba(255,255,255,.05), 0 30px 40px rgba(0,0,0,.45);
  --render-filter: drop-shadow(0 0 56px rgba(62,195,230,.24));
  --render-glow: radial-gradient(closest-side, rgba(62,195,230,.26), rgba(62,195,230,0));
  --card-rim: inset 0 0 0 1px rgba(255,255,255,.05);
  --phone-filter: drop-shadow(0 30px 40px rgba(0,0,0,.45));
  --screen-spotlight: radial-gradient(48% 30% at 50% 32%, rgba(255,255,255,.22), rgba(255,255,255,.07) 55%, rgba(255,255,255,0));
  --card-spotlight: radial-gradient(48% 28% at 50% 30%, rgba(255,255,255,.16), rgba(255,255,255,0)), #22272D;
  --wordmark-filter: brightness(0) invert(.96);
  --range-out: rgba(245,245,247,.12); --range-watch: rgba(245,245,247,.30); --range-ideal: rgba(245,245,247,.80);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--am-graphite); outline-offset: 3px; }
img[src$="/amano-wordmark-graphite.svg"] { filter: var(--wordmark-filter); }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 12px 20px; border-radius: 0 0 var(--radius-input) 0;
  background: var(--action-primary-bg); color: var(--action-primary-fg);
  font: var(--type-label); text-decoration: none;
}
.skip-link:focus { left: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}