/* ───────────────────────────────────────────────────────────────────────────
   Shibata Lab — global styles
   - CSS custom properties drive the palette (set by JS / Tweaks).
   - Glass surfaces, type ramp, layout primitives, section chrome.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* default palette — Tamagawa Night */
  --c-primary: #0B2C5C;
  --c-deep:    #061838;
  --c-a1:      #22D3EE;
  --c-a2:      #3B82F6;
  --c-a3:      #8B5CF6;

  --c-bg:      #050818;
  --c-bg-2:    #08102b;
  --c-ink:     #ECEEF6;
  --c-ink-2:   rgba(236, 238, 246, 0.74);
  --c-ink-3:   rgba(236, 238, 246, 0.52);
  --c-line:    rgba(255, 255, 255, 0.10);
  --c-line-2:  rgba(255, 255, 255, 0.06);
  --c-glass:   rgba(255, 255, 255, 0.045);
  --c-glass-2: rgba(255, 255, 255, 0.085);

  --grad-accent: linear-gradient(120deg,
    var(--c-a1) 0%, var(--c-a2) 45%, var(--c-a3) 100%);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;

  --type-display: clamp(46px, 8.4vw, 128px);
  --type-h1:      clamp(32px, 5vw, 64px);
  --type-h2:      clamp(26px, 3.6vw, 44px);
  --type-h3:      clamp(20px, 2.4vw, 28px);
  --type-body:    clamp(15px, 1.05vw, 17px);
  --type-small:   13px;
  --type-micro:   11.5px;

  --pad-x: clamp(20px, 5vw, 96px);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, .05, .35, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  /* default; Lenis takes over once it boots */
  scroll-behavior: smooth;
  background: var(--c-bg);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body {
  font-family: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont,
               "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
               Meiryo, sans-serif;
  font-feature-settings: "ss01", "cv11", "palt";
  font-size: var(--type-body);
  line-height: 1.65;
  letter-spacing: 0.005em;
  background: var(--c-bg);
  color: var(--c-ink);
  overflow-x: clip;
  min-height: 100vh;
}
body[data-lang="ja"] { letter-spacing: 0.02em; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* selection */
::selection { background: var(--c-a2); color: #fff; }

/* ── stage background: deep navy + aurora blur ────────────────────────────── */
.stage-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(55vw 55vw at 18% 12%, color-mix(in oklab, var(--c-a1) 22%, transparent), transparent 60%),
    radial-gradient(50vw 50vw at 86% 18%, color-mix(in oklab, var(--c-a3) 22%, transparent), transparent 65%),
    radial-gradient(48vw 48vw at 82% 72%, color-mix(in oklab, var(--c-a2) 22%, transparent), transparent 60%),
    radial-gradient(70vw 70vw at 30% 110%, color-mix(in oklab, var(--c-a2) 16%, transparent), transparent 60%),
    linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 100%);
  filter: saturate(120%);
}
.stage-bg::after {
  /* grain */
  content: "";
  position: absolute; inset: 0;
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── Top navigation (glass) ───────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--pad-x);
  background: rgba(5, 8, 24, 0.45);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--c-line-2);
  transition: background 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.nav[data-at-top="true"] { background: transparent; border-bottom-color: transparent; }

.nav__brand {
  display: flex; align-items: center; gap: 12px;
  font-size: var(--type-small); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-ink);
  white-space: nowrap;
}
.nav__brand .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--grad-accent);
  box-shadow: 0 0 18px color-mix(in oklab, var(--c-a2) 50%, transparent);
}

.nav__menu {
  display: flex; gap: 22px; align-items: center;
  font-size: var(--type-small); color: var(--c-ink-2);
}
.nav__menu a { position: relative; padding: 4px 0; transition: color .25s; }
.nav__menu a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: var(--grad-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-out);
}
.nav__menu a:hover { color: var(--c-ink); }
.nav__menu a:hover::after { transform: scaleX(1); }

.nav__lang {
  display: inline-flex; padding: 5px; border-radius: 999px;
  background: var(--c-glass); border: 1px solid var(--c-line);
  font-size: var(--type-micro); letter-spacing: 0.06em;
}
.nav__lang button {
  appearance: none; border: 0; background: transparent; color: var(--c-ink-2);
  padding: 4px 12px; border-radius: 999px; cursor: default; transition: all .25s;
}
.nav__lang button[aria-pressed="true"] {
  color: #fff; background: var(--grad-accent);
  box-shadow: 0 4px 14px color-mix(in oklab, var(--c-a2) 35%, transparent);
}

.nav__burger { display: none; }
@media (max-width: 880px) {
  .nav { padding: 12px 16px; }
  .nav__brand span:last-child { display: none; }
  .nav__menu {
    gap: 14px; font-size: 11.5px; flex: 1;
    overflow-x: auto; scrollbar-width: none;
    justify-content: flex-end;
    padding-right: 4px;
    mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
  .nav__menu::-webkit-scrollbar { display: none; }
  .nav__menu a { white-space: nowrap; }
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100vh; padding: 120px var(--pad-x) 100px;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.hero__canvas {
  position: absolute; inset: 0; z-index: 0;
}
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Subtle dark wedge behind the headline so the text reads, but not so
       aggressive that it kills the particles on the right side. */
    linear-gradient(120deg, rgba(5,8,24,0.55) 0%, rgba(5,8,24,0.0) 55%),
    linear-gradient(180deg, rgba(5,8,24,0.0) 0%, rgba(5,8,24,0.0) 75%,
                            rgba(5,8,24,0.55) 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 22px;
  max-width: 1100px;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--type-small); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--c-ink-2);
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px; background: var(--grad-accent);
}

.hero__title {
  font-size: var(--type-display);
  line-height: 0.96;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0;
  text-wrap: pretty;
  max-width: 22ch;
}
.hero__title em {
  font-style: normal;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Keep CJK title line atomic — never break inside the second em-wrapped phrase */
.hero__title em {
  word-break: keep-all;
  overflow-wrap: normal;
}
.hero__sub {
  max-width: 64ch;
  font-size: clamp(16px, 1.25vw, 19px);
  color: var(--c-ink-2);
  white-space: pre-line;
}

.hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; border: 1px solid var(--c-line);
  background: var(--c-glass); color: var(--c-ink);
  font-size: var(--type-small); letter-spacing: 0.04em;
  transition: all 0.35s var(--ease-out);
  position: relative; overflow: hidden;
  cursor: default;
}
.btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--grad-accent); opacity: 0;
  transition: opacity 0.35s var(--ease-out);
  z-index: -1;
}
.btn:hover { border-color: transparent; color: #fff; transform: translateY(-2px); }
.btn:hover::before { opacity: 1; }
.btn--primary {
  border-color: transparent; color: #fff;
  background: var(--grad-accent);
  box-shadow: 0 14px 40px -10px color-mix(in oklab, var(--c-a2) 60%, transparent);
}
.btn--primary::before { display: none; }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 22px 48px -10px color-mix(in oklab, var(--c-a2) 70%, transparent); }
.btn .arr { transition: transform 0.35s var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }

.hero__scroll {
  position: absolute; left: var(--pad-x); bottom: 32px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  font-size: var(--type-micro); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-ink-3);
}
.hero__scroll .bar {
  width: 1px; height: 56px; background: var(--c-ink-3); position: relative; overflow: hidden;
}
.hero__scroll .bar::after {
  content: ""; position: absolute; left: 0; right: 0; height: 18px;
  background: var(--grad-accent);
  animation: scrollPulse 2.2s var(--ease-in-out) infinite;
}
@keyframes scrollPulse {
  0% { top: -20px; } 100% { top: 100%; }
}

/* ── Hero field — interactive diagram (hero-field.jsx) ─────────────────────── */
/* Wide layout: copy holds the left column, the field lives to the right of it.
   The ring must not sit under the headline, so the copy column is capped and
   the display size steps down from the text-only hero. */
.hero--field .hero__inner { max-width: min(46%, 660px); }
.hero--field .hero__title { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.02; }
.hero--field .hero__sub   { max-width: 34ch; }
.hero--field .hero__veil {
  background:
    linear-gradient(108deg,
      color-mix(in oklab, var(--c-bg) 82%, transparent) 0%,
      color-mix(in oklab, var(--c-bg) 34%, transparent) 40%,
      transparent 60%),
    linear-gradient(180deg, transparent 72%,
      color-mix(in oklab, var(--c-bg) 55%, transparent) 100%);
}

.hfield { position: absolute; inset: 0; touch-action: pan-y; }
.hfield__cvs { position: absolute; inset: 0; z-index: 0; display: block; }
.hfield__ui  { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hfield:focus-visible { outline: none; }
.hfield:focus-visible .hfield__cvs {
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-a1) 55%, transparent);
}
/* Screen-reader-only walkthrough of the diagram. */
.hfield__sr {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Diagram labels — part names, not captions. The two that name what you are
   looking at stay; the ones that explain arrive with the panel. */
.hfield__tag {
  position: absolute; transform: translate(-50%, 0);
  font-size: var(--type-micro); letter-spacing: 0.14em;
  color: var(--c-ink-3); white-space: nowrap; pointer-events: none;
}
.hfield__tag--only { opacity: 0; transition: opacity 0.45s var(--ease-out); }
.hfield__ui.is-labelled .hfield__tag--only { opacity: 1; }
.hfield__tag--ring { transform: translate(-50%, -50%); }
.hfield__tag--ai {
  left: 0; top: 0; opacity: 0; will-change: transform;
  color: color-mix(in oklab, var(--c-a1) 72%, var(--c-ink));
}

/* Support services on the rim — the only clickable part of the field. */
.hfield__svc {
  position: absolute; transform: translate(-50%, 0);
  pointer-events: auto; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 5px 10px; border: 0; border-radius: 999px;
  background: transparent; font: inherit; color: var(--c-ink-2);
  transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.hfield__svc:hover, .hfield__svc:focus-visible {
  color: var(--c-ink); background: var(--c-glass);
}
.hfield__svc[data-open="true"] { color: var(--c-ink); }
/* The three rim nodes keep their names at rest — they are the one part of the
   figure a visitor can act on, so they say what they are. */
.hfield__svc-name { font-size: var(--type-small); letter-spacing: 0.12em; }
.hfield__svc-note {
  font-size: var(--type-micro); letter-spacing: 0.08em; color: var(--c-ink-3);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
}
.hfield__svc:hover .hfield__svc-note,
.hfield__svc:focus-visible .hfield__svc-note,
.hfield__svc[data-open="true"] .hfield__svc-note { opacity: 1; }

/* At rest the field carries one control: a quiet way in. Everything the
   diagram has to say lives behind it, so a visitor who only wants to look
   can scroll past without reading anything. */
.hfield__about {
  position: absolute; transform: translate(-50%, 0);
  display: flex; pointer-events: none;
}
.hfield__pill {
  pointer-events: auto; cursor: pointer; white-space: nowrap;
  font: inherit; font-size: var(--type-micro); letter-spacing: 0.12em;
  color: var(--c-ink-3); background: var(--c-glass);
  border: 1px solid var(--c-line); border-radius: 999px; padding: 6px 14px;
  text-decoration: none;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.hfield__pill:hover, .hfield__pill:focus-visible {
  color: var(--c-ink); border-color: var(--c-ink-3);
}
.hfield__pill--go { color: var(--c-ink); border-color: var(--c-ink-3); }
.hfield__pill:disabled { opacity: 0.32; cursor: default; }
.hfield__pill--about[aria-pressed="true"] { color: var(--c-ink); border-color: var(--c-ink-3); }
/* Erasing is quiet until you reach for it. */
.hfield__pill--act:hover, .hfield__pill--act:focus-visible {
  border-color: color-mix(in oklab, var(--c-a3) 60%, var(--c-line));
}

/* The one panel. Sits at the foot of the field so it never covers the core,
   the small AI, or the service nodes the guide points at. */
.hfield__panel {
  /* A shallow drawer along the foot of the SCREEN, not of the hero. Anchored
     to the hero it fell below the fold whenever the hero ran taller than the
     viewport, and `.hero { overflow: hidden }` cut the buttons off. Fixed to
     the viewport it is always fully visible; it closes itself once the figure
     scrolls away. `overflow: hidden` guarantees nothing paints outside it. */
  position: fixed; left: var(--pad-x); right: var(--pad-x); bottom: 62px;
  z-index: 40;
  max-height: max(190px, min(42vh, 320px)); overflow: hidden;
  padding: 10px 16px 12px;
  background: color-mix(in oklab, var(--c-bg) 84%, transparent);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  pointer-events: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.hfield__panel-top { display: flex; align-items: center; gap: 10px; flex: none; }
.hfield__legend { flex: none; }
.hfield__tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.hfield__tab {
  font: inherit; font-size: var(--type-micro); letter-spacing: 0.1em;
  color: var(--c-ink-3); background: none; border: 0; cursor: pointer;
  padding: 5px 10px; border-radius: 999px;
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.hfield__tab:hover { color: var(--c-ink-2); }
.hfield__tab[aria-selected="true"] { color: var(--c-ink); background: var(--c-glass-2); }
.hfield__panel-x {
  margin-left: auto; font: inherit; font-size: 17px; line-height: 1;
  color: var(--c-ink-3); background: none; border: 0; cursor: pointer; padding: 4px 6px;
}
.hfield__panel-x:hover { color: var(--c-ink); }
/* Only the content scrolls — the tabs and the close button stay put, so the
   panel can always be closed no matter how long the content runs. */
.hfield__pane { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
/* Two columns keep the drawer shallow on wide screens. */
.hfield__pane--2 {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 10px 28px; align-items: start; overflow-y: auto; min-height: 0;
}
.hfield__pane--2 > div { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1079px) { .hfield__pane--2 { grid-template-columns: 1fr; } }
.hfield__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The action row is a fixed foot, never part of the scroll — 前へ/次へ and
   「忘れる」 must stay reachable however long the content runs. */
.hfield__foot {
  flex: none; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 9px; border-top: 1px solid var(--c-line-2);
}

/* Legend — the colour encoding repeats 300 times, so it earns a key.
   Hovering a kind lifts only that kind on the canvas. */
.hfield__legend {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  padding: 8px 0; border-top: 1px solid var(--c-line-2);
  border-bottom: 1px solid var(--c-line-2);
  transition: background 0.3s var(--ease-out);
}
.hfield__legend.is-on { background: var(--c-glass); }
.hfield__legend-k {
  font-size: var(--type-micro); letter-spacing: 0.1em; color: var(--c-ink-3);
  margin-right: 2px;
}
.hfield__legend-i {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: var(--type-micro); letter-spacing: 0.08em;
  color: var(--c-ink-2); background: none; border: 0; padding: 2px 6px;
  border-radius: 999px; cursor: default;
}
.hfield__legend-i i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--dot);
  box-shadow: 0 0 8px color-mix(in oklab, var(--dot) 70%, transparent);
}
.hfield__legend-i:hover, .hfield__legend-i:focus-visible { color: var(--c-ink); outline: none; }

/* "How it works" — numbered markers on the parts, one sentence at a time. */
.hfield__mark {
  position: absolute; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--c-bg); background: var(--c-ink-3);
  pointer-events: auto; cursor: pointer; will-change: transform;
  transition: background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.hfield__mark.is-on {
  background: var(--c-a1);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-a1) 30%, transparent),
              0 0 18px color-mix(in oklab, var(--c-a1) 60%, transparent);
}
.hfield__step {
  margin: 0; font-size: 14px; line-height: 1.75; color: var(--c-ink);
  text-wrap: pretty; max-width: 62ch;
}
.hfield__step-n {
  display: inline-block; margin-right: 10px;
  font-size: var(--type-micro); letter-spacing: 0.12em;
  color: var(--c-a1); font-variant-numeric: tabular-nums;
}

/* What is stored — the claim is only worth the visitor's ability to check it,
   so the panel prints what localStorage actually holds. */
.hfield__local {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--c-ink);
}
.hfield__meter {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: var(--type-micro); letter-spacing: 0.12em; color: var(--c-ink-3);
}
.hfield__meter b {
  font-weight: 500; color: var(--c-ink-2); font-variant-numeric: tabular-nums;
}
.hfield__store {
  user-select: text; padding: 10px 12px;
  background: var(--c-glass); border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
}
.hfield__store-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--type-micro); color: var(--c-ink-3); letter-spacing: 0;
  padding-bottom: 8px; border-bottom: 1px solid var(--c-line-2);
}
.hfield__store-list {
  margin: 8px 0 0; display: grid; gap: 3px 20px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  font-size: var(--type-micro);
}
.hfield__store-list > div { display: flex; justify-content: space-between; gap: 16px; }
.hfield__store-list dt { color: var(--c-ink-3); letter-spacing: 0.08em; }
.hfield__store-list dd { margin: 0; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.hfield__store-why, .hfield__store-not, .hfield__store-note {
  margin: 0; font-size: var(--type-micro); line-height: 1.65;
  color: var(--c-ink-2); text-wrap: pretty; max-width: 66ch;
}
.hfield__store-note { margin-top: 9px; }
.hfield__store-not { color: var(--c-ink-3); }

/* The research — what each part of the picture is actually studying. */
.hfield__res {
  margin: 0; display: grid; gap: 10px 24px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.hfield__res dt {
  font-size: var(--type-micro); letter-spacing: 0.08em; color: var(--c-a1);
  margin-bottom: 3px;
}
.hfield__res dd {
  margin: 0; font-size: var(--type-micro); line-height: 1.65;
  color: var(--c-ink-2); text-wrap: pretty;
}
.hfield__res-note { font-size: var(--type-micro); color: var(--c-ink-3); }

/* Narrow layout: copy on top, field below it. */
@media (max-width: 1079px) {
  .hero--field {
    min-height: 100vh;
    justify-content: flex-start;
    padding: 92px var(--pad-x) 24px;
  }
  .hero--field .hero__inner { max-width: 100%; }
  .hero--field .hero__title { font-size: clamp(30px, 5.6vw, 48px); }
  .hero--field .hero__sub   { max-width: min(38ch, 100%); }
  .hero--field .hero__veil {
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--c-bg) 66%, transparent) 0%,
      color-mix(in oklab, var(--c-bg) 12%, transparent) 44%,
      transparent 68%);
  }
}
@media (max-width: 1079px) {
  .hfield__panel { bottom: 58px; max-height: min(52vh, 420px); }
}

/* ── Section wrapper ──────────────────────────────────────────────────────── */
.section {
  position: relative;
  padding: clamp(80px, 11vw, 160px) var(--pad-x);
  scroll-margin-top: 80px;
}
.section__head {
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
  align-items: end; margin-bottom: clamp(40px, 6vw, 80px);
}
.section__kicker {
  font-size: var(--type-small); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-ink-3); font-variant-numeric: tabular-nums;
}
.section__title {
  font-size: var(--type-h2); letter-spacing: -0.005em; line-height: 1.08;
  margin: 12px 0 0; font-weight: 600; text-wrap: balance;
}
/* Short JA titles (e.g. 「業績」, 「更新情報」) look weak at default scale;
   bump them up so they hold the page. */
.section__title:not(:has(*)):lang(ja) { font-size: clamp(32px, 4.4vw, 56px); }
.section__sub {
  color: var(--c-ink-2); max-width: 56ch; margin: 0;
}
@media (max-width: 760px) {
  .section__head { grid-template-columns: 1fr; }
}

/* ── Glass card ───────────────────────────────────────────────────────────── */
.glass {
  background: var(--c-glass);
  border: 1px solid var(--c-line);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
          backdrop-filter: blur(22px) saturate(150%);
  border-radius: var(--r-lg);
  transition: transform 0.5s var(--ease-out),
              background 0.5s var(--ease-out),
              border-color 0.5s var(--ease-out),
              box-shadow 0.5s var(--ease-out);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.glass:hover {
  background: var(--c-glass-2);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -30px color-mix(in oklab, var(--c-a2) 30%, transparent),
              inset 0 1px 0 rgba(255,255,255,0.08);
}

/* ── About ────────────────────────────────────────────────────────────────── */
.about-grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 880px) {
  .about-grid { grid-template-columns: 1fr; }
}
.about-card { padding: clamp(24px, 3vw, 40px); }
.about-name { font-size: var(--type-h2); font-weight: 700; margin: 0 0 4px; line-height: 1.05; }
.about-namesub { color: var(--c-ink-3); font-size: var(--type-small); letter-spacing: 0.08em; }
.about-title { margin: 22px 0 8px; color: var(--c-ink); font-size: var(--type-small); font-weight: 500; }
.about-affil { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; color: var(--c-ink-2); font-size: var(--type-small); }
.about-degree { margin-top: 14px; color: var(--c-ink-3); font-size: var(--type-small); }

.about-bio { font-size: clamp(15px, 1.15vw, 18px); line-height: 1.78; color: var(--c-ink-2); text-wrap: pretty; }
.about-alt {
  margin-top: 20px; padding: 16px 18px; border-radius: var(--r-md);
  background: linear-gradient(120deg,
    color-mix(in oklab, var(--c-a1) 12%, transparent),
    color-mix(in oklab, var(--c-a3) 12%, transparent));
  border: 1px solid var(--c-line);
  font-size: var(--type-small); color: var(--c-ink);
}
.about-alt b {
  letter-spacing: 0.08em; text-transform: uppercase;
  font-size: var(--type-micro); display: block; margin-bottom: 6px;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 600;
}

.about-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--c-glass); border: 1px solid var(--c-line);
  font-size: var(--type-micro); letter-spacing: 0.04em; color: var(--c-ink-2);
  transition: all .3s var(--ease-out);
}
.chip:hover { color: var(--c-ink); border-color: rgba(255,255,255,0.25); transform: translateY(-2px); }
.chip svg { width: 12px; height: 12px; }

/* ── Keyword ticker (Now exploring belt) ──────────────────────────────────── */
.ticker {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 24px;
  margin-top: -60px; margin-bottom: -20px;
  padding: 16px var(--pad-x);
  border-top: 1px solid var(--c-line-2);
  border-bottom: 1px solid var(--c-line-2);
  background: rgba(5, 8, 24, 0.6);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
          backdrop-filter: blur(12px) saturate(140%);
  overflow: hidden;
}
.ticker__label {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--type-micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-ink-3);
}
.ticker__label::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-a1);
  box-shadow: 0 0 12px var(--c-a1);
  animation: tickerPulse 1.8s ease-in-out infinite;
}
@keyframes tickerPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.15); }
}
.ticker__track {
  flex: 1; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent);
}
.ticker__row {
  display: flex; gap: 32px; align-items: center;
  animation: tickerMarquee 60s linear infinite;
  width: max-content;
}
@keyframes tickerMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.ticker__chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--type-small); letter-spacing: 0.04em;
  color: var(--c-ink-2);
  white-space: nowrap;
}
.ticker__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--grad-accent);
}

/* ── Manifesto (sticky horizontal sequence of 3 principles) ───────────────── */
.manifesto {
  position: relative;
  /* Tall wrapper enables sticky-scroll behavior.
     stage = 100vh, each transition adds 80vh of scroll space,
     plus 30vh tail so card 3 has time to settle at center. */
  height: calc(100vh + (var(--m-len, 3) - 1) * 80vh + 30vh);
  padding: 0 var(--pad-x);
  background:
    radial-gradient(80vw 60vw at 50% 50%,
      color-mix(in oklab, var(--c-a2) 14%, transparent), transparent 60%);
}
.manifesto__rule {
  position: absolute; left: var(--pad-x); right: var(--pad-x); top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line), transparent);
}
.manifesto__stage {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
.manifesto__head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: clamp(24px, 4vh, 56px);
}
.manifesto__kicker {
  font-size: var(--type-micro); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-ink-3);
}
.manifesto__count {
  font-variant-numeric: tabular-nums;
  font-size: var(--type-small); letter-spacing: 0.12em;
  color: var(--c-ink-3);
}
.manifesto__count em {
  font-style: normal; font-weight: 600;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: clamp(20px, 2.4vw, 28px);
  margin-right: 4px;
}

.manifesto__viewport {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  /* Cards stack on top of each other; we move them with transform. */
}
.manifesto__card {
  grid-column: 1; grid-row: 1;
  width: 100%; max-width: 900px;
  text-align: center;
  padding: 0 24px;
  /* No transition — opacity & transform track scroll position directly.
     A 60Hz scroll already produces smooth motion; a CSS transition on top
     just lags + restarts on every scroll event. */
  will-change: transform, opacity;
}
.manifesto__no {
  font-size: clamp(60px, 12vw, 160px); line-height: 1;
  font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
  opacity: 0.32;
}
.manifesto__title {
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1.15; letter-spacing: -0.012em;
  margin: 0 auto 20px; font-weight: 600;
  text-wrap: balance;
  max-width: 18ch;
}
.manifesto__body {
  font-size: clamp(15px, 1.4vw, 19px); line-height: 1.78;
  color: var(--c-ink-2); margin: 0 auto;
  text-wrap: pretty;
  max-width: 52ch;
}

.manifesto__nav {
  display: flex; gap: 10px; justify-content: center;
  margin-top: clamp(24px, 4vh, 48px);
}
.manifesto__dot {
  width: 56px; height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px; overflow: hidden;
  position: relative;
}
.manifesto__dotfill {
  position: absolute; inset: 0;
  background: var(--grad-accent);
  width: 0%;
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .manifesto {
    height: auto;
    padding: clamp(96px, 12vw, 180px) var(--pad-x);
  }
  .manifesto__stage { position: static; height: auto; }
  .manifesto__viewport { display: flex; flex-direction: column; gap: 48px; }
  .manifesto__card {
    transform: none !important; opacity: 1 !important; filter: none !important;
  }
  .manifesto__nav { display: none; }
}

@media (max-width: 880px) {
  .manifesto {
    height: calc(100vh + (var(--m-len, 3) - 1) * 100vh);
  }
}

/* ── Research theme cards ─────────────────────────────────────────────────── */
.themes {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.6vw, 22px);
}
.theme {
  position: relative;
  grid-column: span 6;
  padding: clamp(22px, 2.6vw, 34px);
  min-height: 260px;
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
}
/* Feature card spans full width and gets a thicker accent edge */
.theme--feature {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(24px, 4vw, 56px);
  min-height: 360px;
  align-items: center;
  padding: clamp(28px, 3.4vw, 44px);
}
.theme--feature::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-accent);
  opacity: 0.85;
}
.theme__feature-text {
  display: flex; flex-direction: column; gap: 14px;
}
.theme--feature .theme__title { font-size: clamp(26px, 2.4vw, 34px); }
.theme--feature .theme__sub   { font-size: clamp(15px, 1.2vw, 17px); }
.theme__diagram {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 12px 32px rgba(0,0,0,0.4));
}
@media (max-width: 980px) {
  .theme--feature { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .theme { grid-column: span 12; }
}

.theme__no {
  position: absolute; top: 18px; right: 22px;
  font-size: var(--type-micro); letter-spacing: 0.16em; color: var(--c-ink-3);
}
.theme__icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, color-mix(in oklab, var(--c-a1) 35%, transparent),
                                       color-mix(in oklab, var(--c-a3) 35%, transparent));
  border: 1px solid var(--c-line);
  color: #fff;
}
.theme__title { font-size: clamp(20px, 1.6vw, 24px); font-weight: 600; margin: 0; line-height: 1.2; }
.theme__sub   { font-size: var(--type-small); color: var(--c-ink-2); margin: -4px 0 0; }
.theme__body  { font-size: var(--type-small); color: var(--c-ink-2); line-height: 1.7; }
.theme__kw {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;
}
.theme__kw span {
  font-size: 11px; letter-spacing: 0.04em;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--c-line);
  color: var(--c-ink-2);
  white-space: nowrap;
  max-width: 100%;
}

/* ── Research map (D3 force graph) ────────────────────────────────────────── */
.map-wrap {
  position: relative; height: clamp(440px, 56vw, 640px);
  border-radius: var(--r-lg); overflow: hidden;
}
.map-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.map-wrap svg:active { cursor: grabbing; }
.map-hint {
  position: absolute; left: 18px; bottom: 14px;
  font-size: var(--type-micro); letter-spacing: 0.12em; color: var(--c-ink-3);
  text-transform: uppercase;
}
.map-legend {
  position: absolute; right: 18px; top: 14px;
  display: flex; gap: 14px; font-size: var(--type-micro); color: var(--c-ink-2);
}
.map-legend .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
}
.map-node circle { transition: transform .25s var(--ease-out), opacity .25s; cursor: pointer; }
.map-node text { fill: var(--c-ink); font-size: 11px; letter-spacing: 0.02em; pointer-events: none; }
.map-node--theme text { font-weight: 600; font-size: 12.5px; }
.map-node--theme circle { filter: drop-shadow(0 0 12px color-mix(in oklab, var(--c-a2) 60%, transparent)); }
/* Non-theme labels hidden until the node is hovered; eliminates dense
   collisions in the static view. */
.map-node:not(.map-node--theme) .map-node__label {
  opacity: 0;
  transition: opacity .2s var(--ease-out);
}
.map-node:not(.map-node--theme):hover .map-node__label,
.map-node:not(.map-node--theme).is-focused .map-node__label {
  opacity: 1;
}
.map-node.is-dim text { opacity: 0.18; }
.map-node.is-dim circle { opacity: 0.18; }
.map-node.is-theme-focused circle {
  filter: drop-shadow(0 0 18px var(--c-a1));
  stroke-width: 3 !important;
}
.map-link { stroke: rgba(255,255,255,0.16); stroke-width: 1px; transition: stroke .3s; }
.map-link.is-dim { stroke-opacity: 0.05; }

/* ── Infographics gallery ─────────────────────────────────────────────────── */
.gallery-group { margin-bottom: clamp(40px, 5vw, 72px); }
.gallery-group:last-child { margin-bottom: 0; }
.gallery-group__head {
  display: flex; align-items: baseline; gap: 18px;
  margin-bottom: clamp(18px, 2vw, 28px);
}
.gallery-group__year {
  font-size: clamp(28px, 3vw, 40px); font-weight: 600; letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gallery-group__count {
  font-size: var(--type-micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-ink-3);
  white-space: nowrap;
}
.gallery-group__rule {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--c-line) 0%, transparent 100%);
}

.gallery {
  column-count: 2; column-gap: clamp(14px, 1.6vw, 22px);
}
@media (max-width: 760px) { .gallery { column-count: 1; } }
.gallery-item {
  display: block; break-inside: avoid; margin: 0 0 clamp(14px, 1.6vw, 22px);
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  cursor: default;
  /* button reset */
  appearance: none; padding: 0; background: transparent;
  width: 100%; text-align: left; color: inherit; font: inherit;
}
.gallery-item img {
  width: 100%; height: auto; transition: transform 0.8s var(--ease-out);
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 20px; color: #fff;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.9) 100%);
  transform: translateY(8%); opacity: 0.92; transition: opacity .3s, transform .5s var(--ease-out);
}
.gallery-item:hover .gallery-cap { transform: translateY(0); opacity: 1; }
.gallery-cap b { font-size: clamp(15px, 1.1vw, 17px); display: block; margin-bottom: 4px; }
.gallery-cap span { font-size: var(--type-micro); color: rgba(255,255,255,0.7); }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: rgba(2, 4, 12, 0.85);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  padding: clamp(28px, 6vw, 72px);
  animation: fadeIn 0.3s var(--ease-out);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox img { max-width: 100%; max-height: 80vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
.lightbox-caption { color: #fff; text-align: center; padding-top: 18px; max-width: 64ch; font-size: var(--type-small); }
.lightbox-btn {
  position: fixed; appearance: none; border: 1px solid var(--c-line);
  background: rgba(0,0,0,0.5); color: #fff;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  transition: all .25s; cursor: default;
}
.lightbox-btn:hover { background: rgba(255,255,255,0.12); transform: scale(1.05); }
.lightbox-btn--close { top: 24px; right: 24px; }
.lightbox-btn--prev  { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-btn--next  { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-btn--prev:hover { transform: translateY(-50%) scale(1.05); }
.lightbox-btn--next:hover { transform: translateY(-50%) scale(1.05); }

/* ── Publications ─────────────────────────────────────────────────────────── */
.pub-controls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin-bottom: 28px;
}
.pub-search {
  flex: 1; min-width: 220px;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--c-glass); border: 1px solid var(--c-line);
}
.pub-search input {
  flex: 1; appearance: none; border: 0; background: transparent;
  color: var(--c-ink); font: inherit; font-size: var(--type-small);
  outline: none;
}
.pub-search svg { width: 14px; height: 14px; color: var(--c-ink-3); }

.pub-tag {
  appearance: none; border: 1px solid var(--c-line); cursor: default;
  background: var(--c-glass); color: var(--c-ink-2);
  padding: 8px 14px; border-radius: 999px;
  font-size: var(--type-micro); letter-spacing: 0.04em;
  transition: all .25s;
}
.pub-tag[aria-pressed="true"] {
  color: #fff; border-color: transparent; background: var(--grad-accent);
}
.pub-tag:hover { color: var(--c-ink); }
select.pub-tag {
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
select.pub-tag option { background: #0e1230; color: #fff; }

.pub-list { list-style: none; padding: 0; margin: 0; }
.pub {
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: 18px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--c-line-2);
  transition: background .4s;
}
.pub:hover { background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent 70%); }
.pub-year {
  font-variant-numeric: tabular-nums; color: var(--c-ink-3);
  font-size: var(--type-small); letter-spacing: 0.04em;
}
.pub-title { font-size: clamp(15px, 1.1vw, 17px); line-height: 1.55; margin: 0 0 4px; text-wrap: pretty; }
.pub-authors { font-size: var(--type-small); color: var(--c-ink-2); margin: 0 0 4px; }
.pub-venue { font-size: var(--type-small); color: var(--c-ink-3); font-style: italic; margin: 0; }
.pub-meta { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.pub-badge {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--c-line);
  color: var(--c-ink-2);
}
.pub-badge--first { background: color-mix(in oklab, var(--c-a3) 28%, transparent); border-color: transparent; color: #fff; }
.pub-badge--peer { background: color-mix(in oklab, var(--c-a1) 28%, transparent); border-color: transparent; color: #fff; }
.pub-empty { padding: 30px 0; text-align: center; color: var(--c-ink-3); }

@media (max-width: 720px) {
  .pub { grid-template-columns: 64px 1fr; }
  .pub-meta { grid-column: 1 / -1; }
}

/* ── Publications CTA card (researchmap link) ─────────────────────────────── */
.pub-card {
  display: grid; grid-template-columns: 1fr auto; gap: 36px;
  padding: clamp(28px, 4vw, 56px);
  align-items: center; text-decoration: none;
}
.pub-card__kicker {
  font-size: var(--type-micro); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-ink-3); margin-bottom: 14px;
}
.pub-card__title {
  font-size: clamp(24px, 2.6vw, 38px); line-height: 1.18; margin: 0 0 16px;
  font-weight: 600; letter-spacing: -0.005em; text-wrap: balance;
}
.pub-card__title em {
  font-style: normal;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pub-card__sub { color: var(--c-ink-2); margin: 0 0 22px; max-width: 60ch; }
.pub-card__cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--type-small); letter-spacing: 0.04em; color: var(--c-ink);
}
.pub-card__cta .arr { transition: transform .35s var(--ease-out); }
.pub-card:hover .pub-card__cta .arr { transform: translateX(6px); }
.pub-card__right {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 28px;
  padding: 24px 28px; border-radius: var(--r-md);
  background: rgba(255,255,255,0.03); border: 1px solid var(--c-line);
  min-width: 240px;
}
.pub-card__stat b {
  display: block; font-size: clamp(28px, 3vw, 40px); font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.pub-card__stat span {
  font-size: var(--type-micro); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-ink-3); margin-top: 4px; display: inline-block;
}
@media (max-width: 760px) {
  .pub-card { grid-template-columns: 1fr; gap: 24px; }
  .pub-card__right { min-width: 0; }
}

/* ── Projects / KAKENHI strip ─────────────────────────────────────────────── */
.projects { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 40px; }
@media (max-width: 760px) { .projects { grid-template-columns: 1fr; } }
.project { padding: 24px 26px; }
.project__fund { font-size: var(--type-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-3); margin: 0 0 8px; }
.project__title { font-size: clamp(17px, 1.3vw, 20px); margin: 0; line-height: 1.4; }
.project__meta { display: flex; gap: 16px; margin-top: 10px; font-size: var(--type-small); color: var(--c-ink-2); }

/* ── Access ───────────────────────────────────────────────────────────────── */
.access-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px);
}
@media (max-width: 820px) { .access-grid { grid-template-columns: 1fr; } }
.map-iframe-wrap {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--c-line);
  height: 100%; min-height: 320px;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.7) contrast(0.85);
}
.map-iframe-wrap iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; }

/* Stylized map link (replaces unreliable embedded iframe) */
.access-map-card {
  position: relative; display: block; overflow: hidden;
  min-height: 320px; text-decoration: none; cursor: default;
  border-radius: var(--r-lg);
}
.access-map-svg {
  display: block; width: 100%; height: 100%; min-height: 320px;
}
.access-map-cta {
  position: absolute; left: 18px; bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(5,8,24,0.6); border: 1px solid var(--c-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: var(--type-micro); letter-spacing: 0.06em; color: var(--c-ink);
  transition: transform .35s var(--ease-out), background .35s;
  white-space: nowrap;
}
.access-map-card:hover .access-map-cta {
  transform: translateY(-3px);
  background: rgba(5,8,24,0.85);
}
.access-map-card:hover .access-map-svg circle[r="34"] {
  filter: drop-shadow(0 0 12px rgba(59,130,246,0.6));
}
.access-card { padding: clamp(24px, 3vw, 36px); }
.access-card h4 { margin: 24px 0 6px; font-size: var(--type-small); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink-3); font-weight: 500; }
.access-card p { margin: 0; color: var(--c-ink-2); }

/* ── News ─────────────────────────────────────────────────────────────────── */
.news-list { display: flex; flex-direction: column; }
.news-item {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--c-line-2);
  transition: background .4s;
}
.news-item:hover { background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent 70%); }
.news-date {
  font-variant-numeric: tabular-nums; color: var(--c-ink-3);
  font-size: var(--type-small); letter-spacing: 0.04em;
}
.news-title { margin: 0 0 6px; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.35; }
.news-body { color: var(--c-ink-2); margin: 0; font-size: var(--type-small); line-height: 1.7; text-wrap: pretty; }
.news-tags { display: flex; gap: 6px; margin-top: 10px; }
.news-tags span {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; color: var(--c-ink-3);
  border: 1px solid var(--c-line);
}
@media (max-width: 720px) { .news-item { grid-template-columns: 1fr; } }

/* ── Contact / Footer ─────────────────────────────────────────────────────── */
.contact {
  text-align: center; padding: clamp(80px, 12vw, 160px) var(--pad-x);
}
.contact__big {
  font-size: clamp(40px, 6vw, 84px); line-height: 1.05; font-weight: 700;
  margin: 16px auto; max-width: 18ch; text-wrap: balance;
}
.contact__big em {
  font-style: normal;
  background: var(--grad-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.contact__body { max-width: 56ch; margin: 0 auto 28px; color: var(--c-ink-2); }
.contact__links {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}

.footer {
  border-top: 1px solid var(--c-line-2);
  padding: 40px var(--pad-x);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: var(--type-micro); color: var(--c-ink-3); letter-spacing: 0.04em;
}
.footer a:hover { color: var(--c-ink); }

/* ── Tweaks trigger (visible toggle for the production site) ──────────────── */
.tweaks-trigger {
  position: fixed; right: 18px; bottom: 18px; z-index: 2147483645;
  appearance: none; border: 1px solid var(--c-line);
  background: rgba(5, 8, 24, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  color: var(--c-ink);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  font: 500 12px/1 "Inter", "Noto Sans JP", system-ui, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: default;
  transition: transform .35s var(--ease-out),
              background .35s var(--ease-out),
              border-color .35s var(--ease-out);
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
}
.tweaks-trigger:hover {
  transform: translateY(-2px);
  background: rgba(5, 8, 24, 0.9);
  border-color: rgba(255, 255, 255, 0.25);
}
.tweaks-trigger[aria-pressed="true"] {
  background: var(--grad-accent);
  border-color: transparent;
  color: #fff;
}
.tweaks-trigger svg { opacity: 0.85; }
@media (max-width: 640px) {
  .tweaks-trigger { right: 12px; bottom: 12px; padding: 9px 12px; }
}

/* ── Accessibility primitives ─────────────────────────────────────────────── */
.skip-link {
  position: fixed; top: -100px; left: 12px; z-index: 2147483647;
  padding: 10px 16px; border-radius: 8px;
  background: #fff; color: #050818;
  font: 600 14px/1 "Inter", "Noto Sans JP", system-ui, sans-serif;
  text-decoration: none;
  transition: top .2s var(--ease-out);
}
.skip-link:focus { top: 12px; outline: 2px solid var(--c-a1); outline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--c-a1);
  outline-offset: 3px;
  border-radius: 4px;
}
/* Disable outline on non-keyboard focus (default in modern browsers) */
:focus:not(:focus-visible) { outline: none; }

/* ── Reading progress bar (top edge) ──────────────────────────────────────── */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 2147483646; pointer-events: none;
  background: transparent;
}
.read-progress__bar {
  height: 100%; width: 100%;
  background: var(--grad-accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.12s linear;
  box-shadow: 0 0 10px color-mix(in oklab, var(--c-a1) 70%, transparent);
}

/* ── Brand mark (mini-grid replacing the single nav dot) ──────────────────── */
.brand-mark {
  width: 22px; height: 22px;
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--c-a2) 50%, transparent));
}
.brand-mark__dot { animation: bmPulse 2.6s ease-in-out infinite; }
.brand-mark__core { transform-origin: center; animation: bmCorePulse 2.6s ease-in-out infinite; }
@keyframes bmPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
@keyframes bmCorePulse {
  0%, 100% { transform: scale(0.92); }
  50%      { transform: scale(1.08); }
}

/* ── Ask an AI ────────────────────────────────────────────────────────────────
   A floating way to hand this site to whichever AI the visitor already uses.
   It stacks above the Tweaks trigger, which owns the very corner. */
.askai {
  position: fixed; right: 18px; bottom: 66px; z-index: 2147483643;
  animation: askaiIn 0.6s var(--ease-out) both;
}
@keyframes askaiIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.askai__btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  border: 1px solid var(--c-line); background: rgba(5, 8, 24, 0.7);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
          backdrop-filter: blur(16px) saturate(160%);
  color: var(--c-ink); font: inherit;
  font-size: var(--type-micro); letter-spacing: 0.12em;
  transition: transform 0.3s var(--ease-out), background 0.3s var(--ease-out),
              border-color 0.3s var(--ease-out);
}
.askai__btn:hover, .askai__btn:focus-visible {
  transform: translateY(-2px);
  background: rgba(5, 8, 24, 0.9);
  border-color: color-mix(in oklab, var(--c-a1) 45%, var(--c-line));
}
.askai__btn svg { color: var(--c-a1); flex: none; }

.askai__panel {
  position: absolute; right: 0; bottom: 52px;
  width: min(400px, calc(100vw - 36px));
  max-height: min(72vh, 560px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: color-mix(in oklab, var(--c-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
          backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8);
  outline: none;
}
.askai__head { display: flex; align-items: baseline; gap: 10px; }
.askai__title {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--c-ink);
  letter-spacing: 0.02em;
}
.askai__x {
  margin-left: auto; font: inherit; font-size: 17px; line-height: 1;
  color: var(--c-ink-3); background: none; border: 0; cursor: pointer;
  padding: 2px 4px;
}
.askai__x:hover { color: var(--c-ink); }
.askai__lead {
  margin: 0; font-size: var(--type-micro); line-height: 1.6; color: var(--c-ink-2);
  text-wrap: pretty;
}

.askai__intents {
  margin: 0; padding: 0; border: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.askai__intents legend {
  padding: 0 0 6px; font-size: var(--type-micro); letter-spacing: 0.12em;
  color: var(--c-ink-3);
}
.askai__intent {
  text-align: left; cursor: pointer; font: inherit; font-size: 13px;
  padding: 8px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--c-line); background: var(--c-glass);
  color: var(--c-ink-2);
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out),
              background 0.25s var(--ease-out);
}
.askai__intent:hover { color: var(--c-ink); }
.askai__intent[aria-pressed="true"] {
  color: var(--c-ink);
  border-color: color-mix(in oklab, var(--c-a1) 55%, transparent);
  background: color-mix(in oklab, var(--c-a1) 12%, transparent);
}

.askai__free { display: flex; flex-direction: column; gap: 6px; }
.askai__free span {
  font-size: var(--type-micro); letter-spacing: 0.12em; color: var(--c-ink-3);
}
.askai__free input {
  font: inherit; font-size: 13px; color: var(--c-ink);
  padding: 9px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--c-line); background: rgba(0, 0, 0, 0.25);
}
.askai__free input::placeholder { color: var(--c-ink-3); }
.askai__free input:focus-visible {
  outline: none; border-color: color-mix(in oklab, var(--c-a1) 55%, transparent);
}

.askai__send { display: flex; flex-direction: column; gap: 7px; }
.askai__send-k {
  font-size: var(--type-micro); letter-spacing: 0.12em; color: var(--c-ink-3);
}
/* Four names on one line at the panel's width — tightened so Perplexity,
   the longest, does not fall to a row of its own. */
.askai__providers { display: flex; flex-wrap: wrap; gap: 6px; }
.askai__provider {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 10px; border-radius: 999px;
  border: 1px solid var(--c-line); background: var(--c-glass);
  color: var(--c-ink); font-size: var(--type-micro); letter-spacing: 0.06em;
  text-decoration: none;
  transition: border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.askai__provider:hover, .askai__provider:focus-visible {
  border-color: color-mix(in oklab, var(--c-a1) 55%, transparent);
  background: var(--c-glass-2);
}
.askai__provider svg { color: var(--c-ink-3); flex: none; }

.askai__note {
  margin: 0; padding-top: 10px; border-top: 1px solid var(--c-line-2);
  font-size: var(--type-micro); line-height: 1.55; color: var(--c-ink-3);
  text-wrap: pretty;
}

@media (max-width: 760px) {
  .askai { right: 12px; bottom: 62px; }
  .askai__panel { right: -6px; width: calc(100vw - 24px); }
}

/* ── Language-hint pill ───────────────────────────────────────────────────── */
.lang-hint {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 2147483644; pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(5,8,24,0.7); border: 1px solid var(--c-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: var(--type-micro); letter-spacing: 0.06em; color: var(--c-ink-2);
  animation: hintIn 0.6s var(--ease-out) 1s both,
             hintOut 0.6s var(--ease-out) 7.4s forwards;
}
@keyframes hintIn {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes hintOut {
  to { opacity: 0; transform: translate(-50%, 16px); }
}
.lang-hint kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--c-ink);
}
@media (pointer: coarse) { .lang-hint { display: none; } }

/* ── Magnetic button wrapper ──────────────────────────────────────────────── */
.magnetic {
  display: inline-flex;
  /* Outer takes the cursor-pull; inner takes the hover scale.
     Layering them prevents transform conflicts. */
  will-change: transform;
}
.magnetic__inner {
  display: inline-flex; align-items: center; gap: 10px;
}

/* ── Expanded Footer ──────────────────────────────────────────────────────── */
.footer-x {
  position: relative; margin-top: 60px;
  border-top: 1px solid var(--c-line);
  padding: clamp(48px, 6vw, 80px) var(--pad-x) 32px;
  background:
    radial-gradient(60vw 50vw at 18% 100%,
      color-mix(in oklab, var(--c-a2) 10%, transparent), transparent 60%);
}
.footer-x__top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  margin-bottom: 48px;
}
.footer-x__brand { max-width: 460px; }
.footer-x__title {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 600; margin: 0 0 8px;
  letter-spacing: -0.005em;
}
.footer-x__sub {
  color: var(--c-ink-3);
  font-size: var(--type-small);
  margin: 0 0 24px;
}
.footer-x__github {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--c-glass); border: 1px solid var(--c-line);
  font-size: var(--type-small); color: var(--c-ink);
  transition: all .3s var(--ease-out);
}
.footer-x__github:hover {
  border-color: rgba(255,255,255,0.25); transform: translateY(-2px);
  background: var(--c-glass-2);
}
.footer-x__heading {
  font-size: var(--type-micro); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--c-ink-3); margin: 0 0 16px; font-weight: 500;
}
.footer-x__col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.footer-x__col a {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-ink-2); font-size: var(--type-small);
  transition: color .25s;
}
.footer-x__col a:hover { color: var(--c-ink); }
.footer-x__col svg { opacity: 0.5; }
.footer-x__bottom {
  display: flex; justify-content: space-between; align-items: center;
  gap: 18px; flex-wrap: wrap;
  padding-top: 28px;
  border-top: 1px solid var(--c-line-2);
  font-size: var(--type-micro); color: var(--c-ink-3); letter-spacing: 0.04em;
}
.footer-x__stamps { display: flex; gap: 22px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .footer-x__top { grid-template-columns: 1fr; gap: 36px; }
}

/* Legacy `.footer` retained for backward compatibility but unused now. */
.footer { display: none; }

/* ── Light theme (prefers-color-scheme: light) ────────────────────────────── */
/* When the user's OS prefers light, swap to the Vercel-Mono-ish neutral palette
   automatically.  The Tweaks panel selection still wins (palette stored in
   localStorage); this block only fires when the JS-applied palette hasn't been
   set yet at boot — implemented in app.jsx, this CSS just provides a
   declarative fallback for pure-CSS renders. */
@media (prefers-color-scheme: light) {
  :root[data-os-theme="auto"] {
    --c-bg:      #FAFAFA;
    --c-bg-2:    #F3F4F8;
    --c-ink:     #0A0A0A;
    --c-ink-2:   rgba(10, 10, 10, 0.74);
    --c-ink-3:   rgba(10, 10, 10, 0.52);
    --c-line:    rgba(10, 10, 10, 0.10);
    --c-line-2:  rgba(10, 10, 10, 0.06);
    --c-glass:   rgba(255, 255, 255, 0.65);
    --c-glass-2: rgba(255, 255, 255, 0.85);
  }
  :root[data-os-theme="auto"] body { color: var(--c-ink); }
  :root[data-os-theme="auto"] .stage-bg {
    background:
      radial-gradient(55vw 55vw at 18% 12%, color-mix(in oklab, var(--c-a1) 12%, transparent), transparent 60%),
      radial-gradient(50vw 50vw at 86% 18%, color-mix(in oklab, var(--c-a3) 12%, transparent), transparent 65%),
      linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 100%);
  }
  :root[data-os-theme="auto"] .nav { background: rgba(255, 255, 255, 0.6); }
}

/* ── Print styles ─────────────────────────────────────────────────────────── */
@media print {
  :root {
    --c-bg: #ffffff; --c-bg-2: #ffffff;
    --c-ink: #111111; --c-ink-2: #333333; --c-ink-3: #555555;
    --c-line: #cccccc; --c-line-2: #e5e5e5;
  }
  body { background: #fff !important; color: #111 !important; }
  .stage-bg, .cursor, .hero__canvas, .hfield, .ticker, .tweaks-trigger, .twk-panel, .askai,
  .read-progress, .lang-hint, .skip-link, .nav__lang, .hero__scroll {
    display: none !important;
  }
  .nav {
    position: static !important;
    background: transparent !important;
    border-bottom: 1px solid #ccc !important;
    padding: 12px 24px !important;
  }
  .nav__menu { display: none; }
  .hero {
    min-height: auto !important;
    padding: 24px 0 !important;
    page-break-after: always;
  }
  .hero__title { color: #111 !important; }
  .hero__title em { color: #111 !important; background: none !important;
                    -webkit-text-fill-color: #111 !important; }
  .section, .manifesto, .footer-x { padding: 24px 0 !important; }
  .manifesto { height: auto !important; }
  .manifesto__stage { position: static !important; height: auto !important; }
  .manifesto__viewport { display: flex !important; flex-direction: column; gap: 32px; }
  .manifesto__card { transform: none !important; opacity: 1 !important; filter: none !important;
                     text-align: left !important; }
  .manifesto__no, .gallery-group__year, .contact__big em, .pub-card__title em {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: #111 !important;
  }
  .glass {
    background: #fff !important; border: 1px solid #ccc !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
  }
  a { color: #0B2C5C !important; text-decoration: underline; }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em; color: #555;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .map-wrap, .access-map-card { page-break-inside: avoid; }
  .theme--feature { grid-template-columns: 1fr !important; }
  .theme__diagram { display: none !important; }
}

/* ── Reveal animations (scroll-driven) ────────────────────────────────────── */
/* Final state (opacity:1, transform:none) is asserted explicitly on .is-in so
   the page is readable even when the browser pauses CSS animations (hidden
   tabs, preview iframes, prefers-reduced-motion).  The keyframes are pure
   visual sugar layered on top. */
@keyframes revealIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.reveal {
  opacity: 0;
  transform: translateY(28px);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  animation: revealIn 0.85s var(--ease-out);
}
.reveal[data-d="1"].is-in { animation-delay:  80ms; }
.reveal[data-d="2"].is-in { animation-delay: 160ms; }
.reveal[data-d="3"].is-in { animation-delay: 240ms; }
.reveal[data-d="4"].is-in { animation-delay: 320ms; }
.reveal[data-d="5"].is-in { animation-delay: 400ms; }

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ── Cursor follower (subtle) ─────────────────────────────────────────────── */
.cursor {
  position: fixed; top: 0; left: 0; width: 320px; height: 320px;
  pointer-events: none; z-index: 1; opacity: 0.42;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--c-a2) 35%, transparent), transparent 70%);
  mix-blend-mode: screen;
  transition: opacity .4s;
}
@media (pointer: coarse) { .cursor { display: none; } }


/* ── Active research projects (compact cards under .themes) ─────────────── */
.proj-list__head { margin: clamp(40px, 5vw, 64px) 0 18px; }
.proj-list__title {
  margin: 0 0 6px;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.proj-list__sub {
  margin: 0;
  color: var(--c-ink-3);
  font-size: var(--type-small);
  line-height: 1.6;
  max-width: 64ch;
}
.proj-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.4vw, 18px);
}
@media (max-width: 1100px) { .proj-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .proj-list { grid-template-columns: 1fr; } }
.proj-item {
  padding: clamp(16px, 1.8vw, 22px);
  display: flex; flex-direction: column; gap: 10px;
}
.proj-item__partner {
  font-size: var(--type-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}
.proj-item__title {
  margin: 0;
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  line-height: 1.35;
}
.proj-item__body {
  margin: 0;
  font-size: var(--type-small);
  color: var(--c-ink-2);
  line-height: 1.65;
}
.proj-item__kw {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;
}
.proj-item__kw span {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-glass);
  border: 1px solid var(--c-line);
  color: var(--c-ink-3);
}


/* ── Flash highlight (used when scrolling from the research map) ──────────── */
@keyframes flashRing {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c-a2) 70%, transparent); }
  40%  { box-shadow: 0 0 0 8px color-mix(in oklab, var(--c-a2) 35%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c-a2) 0%, transparent); }
}
.is-flash {
  animation: flashRing 1.4s var(--ease-out);
  outline: 1px solid color-mix(in oklab, var(--c-a2) 60%, transparent);
  outline-offset: 2px;
  transition: outline-color .4s;
}