/* docs/assets/styles.css
 *
 * One committed visual world: a dark field with light drawn through it. The
 * palette is the particle palette, so the page and the effect read as the same
 * object rather than a background behind a document.
 */

:root {
  --void: #050914;
  --ink: #0b1222;
  --ink-2: #121e33;
  --line: #26334c;
  --text: #edf2ff;
  --text-2: #bdc9df;
  --muted: #91a1bd;

  --accent: #91baff;
  --accent-deep: #775bd9;
  --secondary: #c4b0f5;

  --measure: 68ch;
  --pad: clamp(16px, 3vw, 40px);
}

* { box-sizing: border-box; }

/* `hidden` means hidden.
 *
 * The attribute is styled by the UA sheet as `display: none`, which any rule
 * with an id or a class in it outranks — so an element given `display: block`
 * here stayed on screen while its markup said `hidden`, and JavaScript setting
 * `.hidden = true` did nothing at all. It was patched three separate times for
 * three separate elements before this rule existed, and two more were still
 * wrong: an <img> with no src rendered its alt text next to the placeholder
 * that was supposed to replace it.
 *
 * One rule, so the next element to be hidden does not have to rediscover it. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
html[lang='en'] .lang-ja, html[lang='ja'] .lang-en { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: 'Helvetica Neue', Arial, 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


h1, h2, h3, .wordmark {
  font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
}

code, kbd, pre { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

a { color: var(--accent); text-decoration-color: rgba(145,186,255, 0.4); }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--pad); }

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  isolation: isolate;
  height: 100svh;
  padding: clamp(18px, 3vh, 32px) 0 clamp(22px, 4vh, 42px);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero > .wrap {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}
.hero-content { align-self: center; }
.hero-audience {
  margin: 0 0 18px;
  color: var(--secondary);
  font: 500 11px/1.4 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
}

#spellfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
}


/* Without WebGL the hero still has depth rather than a flat void. */
.no-webgl .hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 22% 18%, rgba(119,91,217, 0.24), transparent 70%),
    radial-gradient(50% 46% at 78% 66%, rgba(145,186,255, 0.18), transparent 70%);
}

.topbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 0;
}
.wordmark {
  font-size: 21px;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.toplinks { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.toplinks a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-2); text-decoration: none; }
.toplinks a:hover { color: var(--text); }
.language-toggle {
  display: inline-flex; align-items: center; justify-content: center; height: 32px;
  border: 1px solid var(--line); border-radius: 999px; padding: 0 11px;
  color: var(--text-2); background: rgba(11,18,34, 0.62); font: inherit;
  line-height: 1; cursor: pointer;
}
.language-toggle:hover { color: var(--text); border-color: var(--accent); }


.hero-copy { max-width: 22ch; position: relative; z-index: 1; }
h1 { font-size: clamp(42px, 8vw, 96px); font-weight: 600; line-height: 1.04; }
h1 .line { display: block; }
html[lang='ja'] .tagline {
  max-width: 40ch;
  line-height: 1.7;
}
h1 em {
  font-style: normal;
  background: linear-gradient(94deg, var(--accent) 10%, var(--secondary) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.tagline {
  position: relative;
  z-index: 1;
  margin: 26px 0 0;
  max-width: 46ch;
  font-size: clamp(17px, 2.1vw, 21px);
  color: var(--text-2);
  line-height: 1.62;
}

.actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 36px; }

.btn {
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 13px 30px;
  cursor: pointer;
  background: var(--accent);
  color: #081323;
  transition: transform 140ms ease, box-shadow 200ms ease, background-color 160ms ease;
  box-shadow: 0 0 0 0 rgba(145,186,255, 0.6);
}
.btn:hover, .btn.aircursor-hover { transform: translateY(-1px); box-shadow: 0 0 34px -6px var(--accent); }
.btn:disabled { background: var(--ink-2); color: var(--muted); cursor: progress; box-shadow: none; transform: none; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn.ghost:hover, .btn.ghost.aircursor-hover { border-color: var(--accent); box-shadow: none; }

.install {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(14, 12, 26, 0.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 10px 9px 20px;
  font-size: 14.5px;
  backdrop-filter: blur(8px);
}
.install code { color: var(--text); }
#copy {
  font: inherit; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ink-2); color: var(--text-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
}
#copy:hover, #copy.aircursor-hover { color: var(--text); border-color: var(--accent); }
#copy[data-state='copied'] { color: var(--accent); border-color: var(--accent); }
#copy[data-state='copied']::after { content: ' ✓'; }
#copy[data-state='failed']::after { content: ' — blocked'; }

.status {
  position: relative;
  z-index: 1;
  margin: 22px 0 0;
  font-size: 14.5px;
  color: var(--muted);
  min-height: 1.6em;
  max-width: 56ch;
}
.status[data-tone='ok'] { color: var(--accent); }
.status[data-tone='error'] { color: var(--secondary); }

/* ------------------------------------------------------- gesture tutorial */
.gesture-guide {
  position: absolute; right: 0;
  bottom: clamp(16px, 3vh, 30px); width: min(30vw, 330px); aspect-ratio: 1.12;
  z-index: 2; pointer-events: none;
}
.gesture-guide svg { display: block; width: 100%; height: 100%; overflow: visible; }
.tutorial-stage { opacity: 0; transform-origin: center; }
.tutorial-title { fill: var(--secondary); font: 600 19px 'IBM Plex Mono', monospace; letter-spacing: .12em; }
.hand-image { filter: drop-shadow(0 0 5px rgba(196,176,245, .28)); }
.pointer-light { animation: pointerLight 12s infinite; }
.click-light { opacity: 0; animation: clickLight 12s infinite; }
.pointer-light-halo { fill: url('#pointer-light'); }
.pointer-light-core { fill: #edf4ff; filter: drop-shadow(0 0 5px #83baff); }
.pointer-rays { fill: none; stroke: var(--accent); stroke-width: 1.25; stroke-linecap: round; }
.hand-line, .thumb-line, .cursor-line, .mouse-body, .mouse-divider, .mouse-wheel, .demo-arrow {
  fill: none; stroke: var(--secondary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 4px rgba(196,176,245, .25));
}
.cast-demo-button { fill: rgba(119,91,217, .14); stroke: var(--secondary); stroke-width: 1.8; animation: castButton 12s infinite; }
.cast-demo-label { fill: var(--secondary); font: 600 16px 'Noto Serif JP', serif; }
.demo-arrow, .cursor-line {
  fill: var(--secondary); stroke: #fff0b8; stroke-width: 1.15;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.8)) drop-shadow(0 0 5px rgba(196,176,245,.32));
}
.demo-arrow { animation: castCursor 12s ease-in-out infinite; }
.cast-ripple { fill: none; stroke: var(--accent); stroke-width: 2; transform-origin: 108px 135px; animation: castRipple 12s infinite; }
.motion-path { fill: none; stroke: rgba(196,176,245, .28); stroke-width: 1.2; stroke-dasharray: 3 6; }
.pointer-hand, .pointer-cursor { animation: pointerTravel 12s ease-in-out infinite; }
.click-ready-image { animation: clickReadyImage 12s infinite; }
.click-active-image { opacity: 0; animation: clickActiveImage 12s infinite; }
.mouse-left { fill: transparent; stroke: none; animation: mouseLeftClick 12s infinite; }
.mouse-shadow { fill: rgba(0,0,0,.72); filter: drop-shadow(0 7px 8px rgba(0,0,0,.55)); }
.mouse-body { fill: url('#mouse-metal'); stroke: var(--secondary); stroke-width: 2.2; filter: drop-shadow(0 0 5px rgba(196,176,245,.3)); }
.mouse-divider { stroke: rgba(255,224,151,.72); stroke-width: 1.25; }
.mouse-highlight { fill: none; stroke: rgba(255,239,190,.62); stroke-width: 1.5; stroke-linecap: round; }
.mouse-wheel-slot { fill: #080402; stroke: #9c742f; stroke-width: 1.1; }
.mouse-wheel { fill: #c99a42; stroke: #ffe08a; stroke-width: .8; }
.mouse-detail { fill: none; stroke: #4c3514; stroke-width: .75; }
.stage-cast { animation: stageCast 12s infinite; }
.stage-pointer { animation: stagePointer 12s infinite; }
.stage-click { animation: stageClick 12s infinite; }

/* Three stages over 12s. The right click stage that used to close this loop is
   gone: the hero screen is driven by pointing and clicking alone, so teaching a
   modifier that nothing on it responds to was teaching the wrong thing.
   That stage occupied exactly the last quarter of the old 16s loop, so every
   percentage below is the old one scaled by 16/12 -- the three remaining stages
   play at the same absolute times, and at the same speed, as before. */
@keyframes stageCast { 0%,25% { opacity: 1; } 29%,100% { opacity: 0; } }
@keyframes stagePointer { 0%,27%,63%,100% { opacity: 0; } 31%,59% { opacity: 1; } }
@keyframes stageClick { 0%,61%,100% { opacity: 0; } 66%,96% { opacity: 1; } }
@keyframes castCursor { 0%,5% { transform: translate(-25px, 24px); } 14%,21% { transform: translate(0, 0); } 25%,100% { transform: translate(8px, 8px); } }
@keyframes castButton { 0%,12%,22%,100% { fill: rgba(119,91,217,.14); stroke: var(--secondary); } 15%,19% { fill: var(--accent); stroke: #c3d9ff; } }
@keyframes castRipple { 0%,14%,20%,100% { opacity: 0; transform: scale(.25); } 16% { opacity: 1; transform: scale(1); } 19% { opacity: 0; transform: scale(2); } }
@keyframes pointerTravel { 0%,28% { transform: translate(-12px, 10px); } 39% { transform: translate(9px, -7px); } 50% { transform: translate(24px, 5px); } 61%,100% { transform: translate(-2px, -2px); } }
@keyframes pointerLight { 0%,29%,63%,100% { opacity: 0; transform: scale(.55); transform-origin: 82px 44px; } 34%,58% { opacity: 1; transform: scale(1); transform-origin: 82px 44px; } }
@keyframes clickReadyImage {
  0%,64%,72%,84%,96%,100% { opacity: 1; }
  77%,81%,89%,94% { opacity: 0; }
}
@keyframes clickActiveImage {
  0%,72%,84%,96%,100% { opacity: 0; }
  77%,81%,89%,94% { opacity: 1; }
}
@keyframes mouseLeftClick {
  0%,72%,84%,96%,100% { fill: transparent; }
  77%,81%,89%,94% { fill: var(--accent); }
}
@keyframes clickLight {
  0%,72%,84%,96%,100% { opacity: 0; transform: scale(.55); transform-origin: 82px 44px; }
  77%,81%,89%,94% { opacity: 1; transform: scale(1); transform-origin: 82px 44px; }
}

/* --------------------------------------------------------------- sections */

section.band { padding: clamp(64px, 10vw, 120px) 0; border-bottom: 1px solid var(--line); }
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 18px;
}
h2 { font-size: clamp(29px, 4.8vw, 54px); font-weight: 600; letter-spacing: -0.005em; }
.lede { max-width: var(--measure); color: var(--text-2); margin: 20px 0 0; font-size: 17px; }
p { max-width: var(--measure); }

/* ------------------------------------------------------------- playground */

/* Six panels, laid out 3x2. Fixed rather than auto-fit: they are meant to read
   as two rows of three, and auto-fit would break them into four and two at wide
   viewports. */
.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}
@media (max-width: 940px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }
.pad {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 176px;
  position: relative;
}
.pad h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.pad p { font-size: 13.5px; color: var(--muted); margin: 0; line-height: 1.55; }
.pad .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 30px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-top: auto;
}
.count.pulse { animation: pop 320ms ease; }
@keyframes pop { from { transform: scale(1.28); color: var(--secondary); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .count.pulse { animation: none; } }

.target {
  margin-top: auto;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}
.target:hover, .target.aircursor-hover { border-color: var(--accent); color: var(--text); background: rgba(145,186,255, 0.07); }
.target.lit { border-color: var(--secondary); color: var(--secondary); background: rgba(196,176,245, 0.09); border-style: solid; }

#ctx-menu {
  position: absolute; right: 18px; bottom: 62px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px; font-size: 13px; box-shadow: 0 18px 40px rgba(0,0,0,0.55); z-index: 5;
}
#ctx-menu div { padding: 6px 14px; border-radius: 6px; color: var(--text-2); }
#ctx-menu div:hover, #ctx-menu div.aircursor-hover { background: rgba(94,231,224,0.12); color: var(--text); }

#drag-track {
  margin-top: auto; position: relative; height: 42px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: 10px;
}
#t-drag {
  position: absolute; top: 4px; left: 0; width: 56px; height: 32px;
  border-radius: 7px; cursor: grab; touch-action: none;
  background: linear-gradient(140deg, var(--accent), var(--secondary));
  box-shadow: 0 4px 18px rgba(145,186,255, 0.28);
}
#t-drag.held { cursor: grabbing; box-shadow: 0 0 26px var(--secondary); }

#t-scroll {
  margin: 0; padding: 0; list-style: none; overflow-y: auto;
  max-height: 128px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--ink-2);
}
#t-scroll li {
  display: flex; gap: 12px; padding: 8px 14px; font-size: 13.5px; color: var(--text-2);
  border-bottom: 1px solid rgba(36, 31, 66, 0.6);
}
#t-scroll li:last-child { border-bottom: none; }
#t-scroll span { color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; }

#shot-frame {
  margin-top: auto; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  height: 108px; border: 1px dashed var(--line); border-radius: 10px;
  background: var(--ink-2);
}
#shot-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; }
#shot-placeholder { font-size: 12.5px; color: var(--muted); }
#shot-frame.filled { border-style: solid; border-color: var(--secondary); }

/* The live selection rectangle. Drawn from the engine's region state rather
   than from raw hand positions, so what is outlined is exactly what will be
   captured -- including the few frames it deliberately trails the hands by. */
#region-box {
  position: fixed; z-index: 60; pointer-events: none;
  border: 1px solid var(--secondary);
  background: rgba(196,176,245, 0.05);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 40px rgba(196,176,245, 0.22);
}
#region-box[data-phase="pending"] {
  border-color: var(--accent); border-style: dashed;
  background: rgba(145,186,255, 0.06);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 40px rgba(145,186,255, 0.26);
}
#region-hint {
  position: absolute; left: 0; top: 100%; margin-top: 8px; white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--secondary);
  background: rgba(5,9,20, 0.82); border: 1px solid var(--line);
  border-radius: 6px; padding: 4px 9px;
}
#region-box[data-phase="pending"] #region-hint { color: var(--accent); }
/* One hand has tapped and the other is still expected. Worth its own state:
   without it a confirming tap that only half landed looks like nothing at
   all happened. */
#region-box[data-phase="pending"].half { border-style: solid; background: rgba(145,186,255, 0.14); }

#region-toast {
  position: fixed; z-index: 70; left: 50%; bottom: 28px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; max-width: min(92vw, 460px);
  padding: 10px 14px; pointer-events: none;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(5,9,20, 0.92);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .04em;
  color: var(--secondary);
  transition: opacity .18s ease, transform .18s ease;
}
#region-toast[data-tone="error"] { color: var(--accent); border-color: rgba(145,186,255, .45); }
#shot-save {
  margin-top: 10px;
  font: 500 12px/1 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink-2); color: var(--text-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px; cursor: pointer;
}
#shot-save:hover:not(:disabled), #shot-save.aircursor-hover:not(:disabled) { color: var(--text); border-color: var(--accent); }
#shot-save:disabled { color: var(--muted); cursor: not-allowed; opacity: .6; }

#region-toast-img {
  display: block; width: 84px; height: 56px; object-fit: cover;
  border: 1px solid var(--line); border-radius: 6px; background: var(--void);
}

/* ------------------------------------------------------------------ table */

.gesture-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.gesture-card {
  position: relative; min-width: 0; padding: 20px 22px 22px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(145deg, rgba(18,27,48,.94), rgba(5,9,20,.82));
}
.gesture-card::after {
  content: ''; position: absolute; inset: auto -15% -45% 30%; height: 65%;
  pointer-events: none; background: radial-gradient(ellipse, rgba(119,91,217,.13), transparent 68%);
}
.gesture-role {
  position: relative; z-index: 1; color: var(--accent);
  font: 500 10px/1.4 'IBM Plex Mono', monospace; letter-spacing: .14em;
}
.gesture-visual {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  height: 220px; margin: 4px 0 2px;
}
.gesture-visual img {
  display: block; width: min(78%, 220px); height: 100%; object-fit: contain;
  filter: drop-shadow(0 0 9px rgba(196,176,245,.18));
}
.gesture-sequence { gap: 3px; }
.gesture-sequence > img { width: 42%; height: 88%; }
.gesture-sequence > span[aria-hidden] { color: var(--secondary); font-size: 24px; }
.modifier-sequence > img { width: 31%; height: 82%; }
.gesture-result {
  padding: 6px 8px; border: 1px solid var(--accent); border-radius: 999px;
  color: var(--accent); font: 500 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .08em; white-space: nowrap; box-shadow: 0 0 14px rgba(145,186,255,.16);
}
.gesture-card h3 { position: relative; z-index: 1; font-size: 21px; }
.gesture-card p { position: relative; z-index: 1; margin: 10px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.7; }
.gesture-card-wide { grid-column: 1 / -1; }
.region-gesture-card .gesture-visual { height: 220px; min-height: 0; }
.region-gesture-card .gesture-visual img { width: 42%; height: 88%; }

.scroller { overflow-x: auto; margin-top: 40px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14.5px; }
th, td { text-align: left; padding: 13px 20px 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted); font-weight: 500; white-space: nowrap;
}
td code { font-size: 12.5px; color: var(--accent); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }

/* ------------------------------------------------------------------- code */

pre {
  background: var(--ink);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  overflow-x: auto;
  font-size: 13.5px;
  line-height: 1.7;
  margin: 28px 0 0;
  color: var(--text-2);
}
pre .k { color: var(--secondary); }
pre .s { color: var(--accent); }
pre .c { color: var(--muted); font-style: italic; }

.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 5vw, 56px); align-items: start; }

.limits { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 14px; max-width: var(--measure); }
.limits li { padding-left: 26px; position: relative; color: var(--text-2); font-size: 15px; }
.limits li::before {
  content: ''; position: absolute; left: 0; top: 0.66em;
  width: 9px; height: 9px; border-radius: 2px;
  background: var(--secondary); box-shadow: 0 0 12px rgba(196,176,245, 0.65);
}
.limits strong { color: var(--text); }

/* -------------------------------------------------------------- overlays */

#cursor {
  position: fixed; top: 0; left: 0;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(236, 233, 245, 0.9);
  background: rgba(145,186,255, 0.12);
  pointer-events: none; opacity: 0; z-index: 2147483000;
  will-change: transform, opacity;
  transition: width 90ms ease, height 90ms ease, border-color 90ms ease, background-color 90ms ease;
}
#cursor::after {
  content: ''; position: absolute; inset: 50% auto auto 50%;
  width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: #fff;
}
#cursor[data-mode='aim']   { width: 21px; height: 21px; border-color: var(--accent); box-shadow: 0 0 22px -2px var(--accent); }
#cursor[data-mode='press'] { width: 15px; height: 15px; border-color: var(--secondary); background: var(--secondary); box-shadow: 0 0 30px -2px var(--secondary); }
#cursor[data-mode='grab']  { width: 34px; height: 34px; border-color: var(--secondary); box-shadow: 0 0 30px -6px var(--secondary); }
#cursor[data-modifier='on'] { outline: 2px solid var(--secondary); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { #cursor { transition: none; } }


#hud {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  display: flex; gap: 4px; z-index: 2147482000;
  background: rgba(7, 6, 15, 0.86); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 8px; backdrop-filter: blur(10px);
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
}
#hud span { padding: 3px 12px; border-radius: 999px; color: var(--muted); white-space: nowrap; }
#hud b { color: var(--accent); font-weight: 500; }

#preview {
  position: fixed; right: 18px; bottom: 18px; width: 200px; height: 113px;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  background: #000; z-index: 2147482000; pointer-events: none;
}
#preview video,
#preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
/* The skeleton is the only readout that says whether the tracker can actually
   see the hand, which is the first thing anyone checks when nothing responds. */
#preview canvas { pointer-events: none; }
/* The mouse must keep working while tracking is on — otherwise there is no
   way to reach the Stop button. Only the hero hides the system cursor, and only
   while a hand is actually driving the page. */
.tracking.hand-live .hero { cursor: none; }

footer { padding: clamp(48px, 8vw, 88px) 0; color: var(--muted); font-size: 14px; }
footer a { color: var(--text-2); }
.footrow { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: baseline; }

@media (max-width: 640px) {
  .gesture-grid { grid-template-columns: 1fr; }
  .gesture-visual { height: 190px; }
  #preview { width: 132px; height: 74px; }
  #hud { font-size: 10.5px; }
  .topbar { margin-bottom: 0; }
  .gesture-guide { width: 46vw; opacity: .72; }
}

@media (max-height: 760px) and (min-width: 700px) {
  .hero { padding-top: 16px; padding-bottom: 16px; }
  .topbar { margin-bottom: 0; }
  h1 { font-size: clamp(42px, 10vh, 76px); }
  .tagline { margin-top: 15px; font-size: 15px; line-height: 1.5; max-width: 52ch; }
  .actions { margin-top: 20px; }
  .status { margin-top: 12px; }
  .gesture-guide { width: min(36vw, 360px); bottom: 14px; }
}

/* Production layout: the same midnight, silver and violet as the galaxy. */
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 10px 18px; background: var(--text); color: var(--void); }
.skip-link:focus { top: 12px; }
.hero { height: 100svh; min-height: 0; background: #020610; }
.hero > .wrap { max-width: 1480px; padding-inline: clamp(24px, 5vw, 84px); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, #020610b3, #02061022 54%, transparent 76%), linear-gradient(0deg, #050914, transparent 18%); }
.hero-content { position: absolute; left: clamp(24px,5vw,84px); top: 30%; width: min(680px,59%); padding: 0; }
.hero .hero-copy { max-width: 680px; transition: opacity .5s ease; }
.hero[data-phase="compression"] .hero-copy { opacity: .15; }
.hero[data-phase="silence"] .hero-copy,
.hero[data-phase="rupture"] .hero-copy { opacity: 0; }
.hero h1 { font-family: Georgia, 'Noto Serif JP', serif; font-weight: 400; font-size: clamp(58px,5.75vw,91px); letter-spacing: -.035em; line-height: 1.07; }
.hero h1 em { background: linear-gradient(110deg, #e6f4ff, #a8b6ff 55%, #ddacf1); background-clip: text; -webkit-background-clip: text; }
.hero-translation { margin: 24px 0 0; color: #d4dff4; font-size: 14px; line-height: 1.9; letter-spacing: .12em; text-shadow: 0 1px 14px #020610; }
.hero-product-note { display: block; margin-top: 14px; color: #91a4c2; font-size: 10px; line-height: 1.7; letter-spacing: .045em; }
.hero .gesture-guide { display: block; right: 5%; top: auto; bottom: 25px; width: min(23vw,330px); opacity: .88; }
.hero .toplinks { font-size: 12px; }
.hero .header-cta { min-height: 38px; padding: 0 16px; border: 1px solid #cddcff88; border-radius: 999px; color: #eef4ff; background: #060c1e70; backdrop-filter: blur(10px); }
.hero .header-cta:hover, .hero .header-cta.aircursor-hover { background: #182946aa; color: white; text-decoration: none; }
.hero-controls { position: absolute; right: clamp(24px,5vw,84px); bottom: 96px; z-index: 2; width: min(325px,42vw); text-align: right; }
.hero-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.hero-content .hero-actions { align-items: flex-start; margin-top: 28px; }
.hero-actions .btn { border: 1px solid #cddcff88; border-radius: 999px; padding: 13px 19px; min-height: 46px; background: #060c1e70; color: #eef4ff; font-size: 11px; font-weight: 400; backdrop-filter: blur(10px); box-shadow: none; }
.hero-actions .btn:hover, .hero-actions .btn.aircursor-hover { background: #182946aa; box-shadow: 0 0 30px #82b2ff1c; }
.hero .privacy-line { justify-content: flex-end; margin-top: 14px; color: #8299b8; font-size: 8px; letter-spacing: .04em; }
.hero .status { margin: 12px 0 0 auto; min-height: 3.4em; max-width: 325px; color: #aebed8; font-size: 11px; line-height: 1.7; }
.hero-content .privacy-line { justify-content: flex-start; margin-top: 11px; }
.hero-content .status { margin: 8px 0 0; max-width: 38ch; min-height: 3.2em; text-align: left; }
.galaxy-fallback { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-foot { position: absolute; bottom: 20px; left: clamp(24px,5vw,84px); right: clamp(24px,5vw,84px); display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; font: 8px/1.9 'IBM Plex Mono', monospace; letter-spacing: .16em; color: var(--text-2); }
.hero-foot a { color: inherit; text-decoration: none; }
.galaxy-controls { display: flex; gap: 18px; align-items: center; }
.galaxy-controls button { color: var(--text-2); font: inherit; cursor: pointer; background: transparent; border: 1px solid #758ca24d; padding: 8px 12px; border-radius: 99px; letter-spacing: .05em; }
.galaxy-controls button:hover { color: white; border-color: var(--accent); }
.privacy-line { display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 11px; margin-top: 18px; }
.package-strip { min-height: 72px; display: flex; align-items: center; justify-content: center; gap: clamp(18px,3vw,48px); padding: 12px var(--pad); border-bottom: 1px solid var(--line); background: #08101e; color: #aab9d1; font: 10px/1.5 'IBM Plex Mono', monospace; letter-spacing: .08em; }
.package-strip-proof { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.package-strip .install { padding: 7px 8px 7px 16px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.package-strip a { color: #d4dff4; text-decoration: none; white-space: nowrap; }
.package-strip a:hover, .package-strip a.aircursor-hover { color: white; text-decoration: underline; text-underline-offset: 5px; }
section.band { padding-inline: var(--pad); }
section.band h2 {
  font-family: Georgia, 'Times New Roman', 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
  letter-spacing: -.035em; font-weight: 400; line-height: 1.12; max-width: 22ch;
}
.section-intro { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.section-intro p { max-width: 38ch; color: var(--text-2); font-size: 15px; }
.setup-grid { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; padding: 0; margin: 48px 0 0; counter-reset: setup; }
.setup-grid li { counter-increment: setup; border-top: 1px solid var(--line); padding-top: 24px; }
.setup-grid li::before { content: '0' counter(setup); color: var(--secondary); font: 12px 'IBM Plex Mono', monospace; }
.setup-grid svg { display: block; width: 100%; height: 126px; margin: 20px 0; color: var(--accent); }
.setup-grid h3 { font: 500 20px/1.4 'Helvetica Neue', Arial, sans-serif; letter-spacing: -.02em; }
.setup-grid p { color: var(--text-2); font-size: 14px; }
.setup-note { color: var(--muted); font-size: 13px; margin-top: 32px; }
.resource-links { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 28px; font-size: 13px; }
.resource-links a { text-underline-offset: 5px; }
.copy-citation { background: var(--ink-2); color: var(--text); border: 1px solid var(--line); border-radius: 99px; font: inherit; font-size: 12px; padding: 9px 16px; cursor: pointer; margin-top: 18px; }
.copy-citation:hover { border-color: var(--accent); }
.copy-feedback { margin-left: 12px; color: var(--secondary); font-size: 12px; }
.gesture-visual img { filter: hue-rotate(175deg) saturate(.55) drop-shadow(0 0 14px #8dbbff20); }
.hand-image { filter: hue-rotate(175deg) saturate(.55); }
.gesture-card { background: linear-gradient(145deg,#101a30,#070c18); }
.gesture-card h3, .pad h3 { font-family: 'Helvetica Neue', Arial, 'Noto Sans JP', sans-serif; }
.pad { background: linear-gradient(140deg,#0e1729,#080e1b); }
.two-col > * { min-width: 0; }
footer.wrap { padding-inline: var(--pad); }
@media (min-width: 1000px) {
  .gesture-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .gesture-card { grid-column: span 2; }
  .gesture-card:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 700px) {
  .hero { min-height: 880px; height: auto; }
  .hero > .wrap { min-height: 840px; }
  .hero .topbar { align-items: flex-start; gap: 16px; }
  .hero .toplinks { flex-wrap: wrap; gap: 7px 16px; font-size: 11px; }
  .hero .hero-content { align-self: start; padding: 64px 0 190px; }
  .hero .hero-copy { max-width: 100%; }
  .hero h1 { font-size: clamp(44px,11vw,68px); }
  .hero .tagline { font-size: 15px; }
  .hero .actions { gap: 12px; margin-top: 24px; }
  .hero .install { font-size: 12px; padding-left: 14px; }
  .hero .gesture-guide { width: 140px; bottom: 70px; right: 7%; opacity: .8; }
  .hero-foot { align-items: start; bottom: 16px; font-size: 9px; }
  .galaxy-controls { gap: 8px; flex-wrap: wrap; justify-content: end; }
  .galaxy-controls button { font-size: 9px; padding: 7px 9px; }
  .setup-grid { grid-template-columns: 1fr; gap: 32px; }
  .setup-grid svg { height: 108px; }
  .section-intro { display: block; }
  .two-col { grid-template-columns: minmax(0,1fr); }
  .hero::after { background: linear-gradient(90deg,#0206109c,transparent), linear-gradient(0deg,#050914,transparent 25%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stage-pointer { opacity: 1; }
  .hero[data-phase] .hero-copy { opacity: 1; }
}

/* Product surfaces: stable targets, visible hand hover, and a direct install path. */
.hero h1 {
  font-family: Georgia, 'Times New Roman', 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
  font-weight: 400; letter-spacing: -.035em; font-size: clamp(58px,5.75vw,91px); line-height: 1.07;
}
.hero h1 em { font-style: italic; font-weight: 400; }
.hero .hero-copy { max-width: 680px; }
.hero .hero-audience { display: flex; align-items: center; gap: 10px; letter-spacing: .1em; }
.release-dot, .console-dot { width: 6px; height: 6px; flex-shrink: 0; background: #8de2cf; border-radius: 50%; box-shadow: 0 0 12px #8de2cf70; }
.hero .tagline { font-size: 15px; max-width: 43ch; color: #d4dff4; }
.hero .actions { max-width: 620px; }
.hero .install { flex-basis: 75%; width: max-content; justify-content: space-between; border-radius: 12px; }
.package-proof { margin: 12px 0 0; font-size: 11px; color: var(--muted); }
.package-proof a { color: var(--text-2); text-underline-offset: 3px; }
.btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; padding: 12px 22px; text-decoration: none; }
.btn:hover, .btn.aircursor-hover { transform: none; }
.npm-cta { background: #edf3ff; color: #101c32; box-shadow: none; }
.hero .toplinks a, .language-toggle { min-height: 44px; }
.hero .toplinks { gap: 18px; }
.hero .gesture-guide { opacity: .88; top: auto; bottom: 25px; }
.try-first { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.try-first .btn { margin-top: 24px; }
.try-first .lede { font-size: 16px; }
.try-console { padding: 28px; border: 1px solid #52699070; border-radius: 24px; background: radial-gradient(ellipse at top right,#6448ae24,transparent 70%),#0d1526; box-shadow: 0 25px 100px #01040b70; }
.console-caption { display: flex; justify-content: space-between; align-items: center; font: 11px 'IBM Plex Mono', monospace; color: var(--text-2); }
#try-target { width: 100%; min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; margin: 26px 0; border: 1px solid #91baff60; border-radius: 18px; color: var(--text); background: linear-gradient(145deg,#5269a144,#3e275a33); font-family: inherit; font-size: 20px; font-weight: 500; line-height: 1.4; cursor: pointer; }
.trial-orbit { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; border: 1px solid #abc5ff60; color: #d8e5ff; font-size: 36px; background: #9abaff16; }
#try-target > *, .btn > *, .galaxy-controls button > *, .toplinks a > *, .copy-citation > *, [data-copy-install] > * { pointer-events: none; }
#try-target:is(:hover,.aircursor-hover), #try-target:has(.aircursor-hover) { background: linear-gradient(145deg,#6478c178,#62439877); border-color: #c6daff; }
.has-clicked .console-dot { background: #afffe1; box-shadow: 0 0 20px #72e6b7; }
#try-result { min-height: 3em; font-size: 14px; color: #c8d4ec; }
.trial-convert { display: grid; gap: 16px; border-top: 1px solid var(--line); padding-top: 24px; font-size: 13px; }
.trial-convert a:first-child { color: #edf3ff; font-weight: 600; font-size: 16px; }
.trial-convert a { text-underline-offset: 4px; }
.gesture-feedback { font-size: 13px; line-height: 1.7; min-height: 3.4em; color: #b8a5eb; }
.hand-pressing-control #cursor { box-shadow: 0 0 0 6px #a1d9ff30,0 0 25px #8abaff; }
.btn:has(.aircursor-hover), .btn.aircursor-hover, .toplinks a.aircursor-hover, .language-toggle.aircursor-hover, .galaxy-controls button.aircursor-hover, .copy-citation.aircursor-hover, [data-copy-install].aircursor-hover { outline: 2px solid #c4dbff; outline-offset: 4px; }
a.aircursor-hover { color: #f0e3ff; text-decoration: underline; text-underline-offset: 5px; }
.npm-cta.aircursor-hover { color: #101c32; }
.install-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; background: linear-gradient(120deg,#182740,#1b1833); border: 1px solid #60749980; padding: 22px 24px; border-radius: 16px; margin-top: 32px; }
.install-banner code { flex: 1; color: #f0f4ff; font-size: 18px; }
[data-copy-install] { min-height: 44px; padding: 10px 16px; border: 1px solid #9bb9ec66; color: #e5efff; border-radius: 9px; background: #152741; cursor: pointer; }
[data-copy-install][data-state=copied]::after { content: ' ?'; }
.install-banner a { font-size: 13px; }
#install-feedback { min-height: 1.5em; font-size: 13px; color: #a8d9ca; }
.citation-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 28px; font-size: 13px; color: var(--text-2); }
#hud { pointer-events: none; }
#faq details { max-width: 900px; border-bottom: 1px solid var(--line); padding: 22px 0; }
#faq details:first-of-type { margin-top: 28px; }
#faq summary { min-height: 44px; cursor: pointer; font-size: 17px; color: var(--text); }
#faq details p { color: var(--text-2); font-size: 15px; margin: 12px 0 8px; }
#faq summary.aircursor-hover, #faq summary:has(.aircursor-hover) { color: var(--accent); }
#copy, .copy-citation, #shot-save { min-height: 44px; }
@media (max-width: 800px) {
  .try-first { grid-template-columns: 1fr; gap: 32px; }
  .hero .toplinks { gap: 4px 14px; }
}
@media (max-width: 700px) {
  .hero { min-height: 970px; }
  .hero > .wrap { min-height: 930px; }
  .hero .hero-content { padding-top: 44px; padding-bottom: 200px; }
  .hero h1 { font-size: clamp(44px,11vw,66px); letter-spacing: -.065em; }
  .hero .hero-audience { font-size: 8px; }
  .hero .tagline { font-size: 15px; }
  .hero .install { flex-basis: 100%; }
  .hero .gesture-guide { bottom: 75px; width: 125px; }
  .try-console { padding: 22px; }
  .install-banner { padding: 18px; gap: 12px; }
  .install-banner code { flex-basis: 100%; font-size: 16px; }
  .package-proof { font-size: 10px; }
}

@media (max-width: 700px) {
  .hero .topbar { flex-wrap: nowrap; align-items: center; }
  .hero .toplinks { margin-left: auto; flex-wrap: nowrap; gap: 8px; }
  .hero .toplinks a { display: none; }
  .hero .toplinks a.header-cta { display: inline-flex; min-height: 36px; padding-inline: 12px; font-size: 9px; }
  .hero .language-toggle { flex: 0 0 auto; }
  .hero { height: 100svh; min-height: 0; padding-block: 18px; }
  .hero > .wrap { min-height: 0; }
  .hero .hero-content { left: 5%; top: 27%; width: 90%; padding: 0; }
  .hero .hero-copy { max-width: 100%; }
  .hero h1 { font-size: clamp(39px,9.7vw,57px); line-height: 1.08; letter-spacing: -.045em; }
  .hero-translation { margin-top: 18px; max-width: 28em; font-size: 10px; line-height: 1.8; letter-spacing: .09em; }
  .hero-product-note { margin-top: 11px; max-width: 220px; font-size: 8px; }
  .hero-content .hero-actions { margin-top: 20px; }
  .hero-controls { right: 5%; bottom: 116px; width: min(255px,76vw); }
  .hero-actions { gap: 8px; }
  .hero-actions .btn { min-height: 42px; padding: 11px 15px; font-size: 10px; }
  .hero-experience-action { min-height: 32px; font-size: 9px; }
  .hero .privacy-line { margin-top: 8px; font-size: 7px; }
  .hero .status { margin-top: 7px; min-height: 3.2em; font-size: 9px; }
  .hero-foot { bottom: 18px; font-size: 6px; }
  .galaxy-controls button { font-size: 7px; padding: 6px 8px; }
  .hero .gesture-guide { display: block; top: auto; right: 5%; bottom: 86px; width: 125px; opacity: .76; }
  .package-strip { justify-content: flex-start; gap: 16px; min-height: 64px; overflow-x: auto; padding-inline: 18px; }
  .package-strip-proof { display: none; }
  .package-strip .install { flex: 0 0 auto; font-size: 11px; }
}