/* Kyroxa — Layout 48 · Fullscreen Product Journey · Dark Premium Futuristic */

:root {
  --kx-bg: #0a0c10;
  --kx-bg-2: #11141a;
  --kx-surface: #161a22;
  --kx-surface-2: #1c212c;
  --kx-ink: #e8ecf4;
  --kx-ink-soft: #8b95a8;
  --kx-ink-muted: #5c6578;
  --kx-teal: #2dd4bf;
  --kx-teal-dim: #1fa896;
  --kx-teal-glow: rgba(45, 212, 191, 0.35);
  --kx-line: rgba(232, 236, 244, 0.08);
  --kx-line-strong: rgba(232, 236, 244, 0.16);
  --kx-overlay: rgba(10, 12, 16, 0.72);
  --kx-overlay-heavy: rgba(10, 12, 16, 0.88);
  --kx-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  --kx-shadow-teal: 0 8px 32px var(--kx-teal-glow);
  --kx-serif: 'Cormorant Garamond', Georgia, serif;
  --kx-sans: 'IBM Plex Sans JP', system-ui, sans-serif;
  --kx-mono: 'Space Mono', monospace;
  --kx-dock-h: 58px;
  --kx-orbit-w: 72px;
  --kx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kx-radius: 3px;
  --kx-radius-lg: 8px;
  --kx-slant: -4deg;
}

[data-theme="light"] {
  --kx-bg: #f0f2f6;
  --kx-bg-2: #e4e8ef;
  --kx-surface: #ffffff;
  --kx-surface-2: #f6f8fb;
  --kx-ink: #0d1117;
  --kx-ink-soft: #4a5568;
  --kx-ink-muted: #718096;
  --kx-teal: #0d9488;
  --kx-teal-dim: #0f766e;
  --kx-teal-glow: rgba(13, 148, 136, 0.25);
  --kx-line: rgba(13, 17, 23, 0.1);
  --kx-line-strong: rgba(13, 17, 23, 0.18);
  --kx-overlay: rgba(240, 242, 246, 0.78);
  --kx-overlay-heavy: rgba(240, 242, 246, 0.92);
  --kx-shadow: 0 24px 64px rgba(13, 17, 23, 0.12);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.kx-body {
  margin: 0;
  font-family: var(--kx-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.7;
  color: var(--kx-ink);
  background: var(--kx-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
address { font-style: normal; }
em { font-style: normal; color: var(--kx-teal); }
h1, h2, h3 { font-family: var(--kx-serif); font-weight: 600; line-height: 1.15; margin: 0 0 0.75rem; }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.kx-micro {
  font-family: var(--kx-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kx-ink-soft);
  margin-bottom: 0.75rem;
}

.kx-wrap {
  width: min(1180px, calc(100% - 2.5rem));
  margin-inline: auto;
}

.kx-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9999;
  padding: 0.75rem 1.25rem;
  background: var(--kx-teal);
  color: var(--kx-bg);
}
.kx-skip:focus { left: 1rem; top: 1rem; }

.kx-main { min-height: 60vh; }
.page-home .kx-main { padding-bottom: calc(var(--kx-dock-h) + 2rem); }

/* Buttons */
.kx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.72rem 1.4rem;
  font-family: var(--kx-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--kx-radius);
  cursor: pointer;
  transition: background 0.3s var(--kx-ease), border-color 0.3s, color 0.3s, box-shadow 0.3s, transform 0.25s;
}
.kx-btn:hover { transform: translateY(-2px); }
.kx-btn--teal {
  background: var(--kx-teal);
  color: var(--kx-bg);
  box-shadow: var(--kx-shadow-teal);
}
.kx-btn--teal:hover { background: var(--kx-teal-dim); }
.kx-btn--ghost {
  background: transparent;
  border-color: var(--kx-line-strong);
  color: var(--kx-ink);
}
.kx-btn--ghost:hover { border-color: var(--kx-teal); color: var(--kx-teal); }
.kx-btn--sm { padding: 0.5rem 0.9rem; font-size: 0.65rem; }
.kx-btn--lg { padding: 0.9rem 1.8rem; font-size: 0.75rem; }

/* Dock — floating bottom-center */
.kx-dock {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  width: min(720px, calc(100% - 2rem));
}
.kx-dock__shell {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 0.85rem 0.55rem 0.65rem;
  background: color-mix(in srgb, var(--kx-surface) 82%, transparent);
  backdrop-filter: blur(20px);
  border: 1px solid var(--kx-line-strong);
  border-radius: 999px;
  box-shadow: var(--kx-shadow);
}
.kx-dock__brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}
.kx-dock__sigil {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--kx-teal), var(--kx-teal-dim));
  color: var(--kx-bg);
  font-family: var(--kx-serif);
  font-size: 1rem;
  font-weight: 700;
  border-radius: 50%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.kx-dock__word {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.kx-dock__word strong {
  font-family: var(--kx-serif);
  font-size: 0.92rem;
  letter-spacing: 0.04em;
}
.kx-dock__word small {
  font-size: 0.58rem;
  color: var(--kx-ink-soft);
  letter-spacing: 0.06em;
}
.kx-dock__links {
  display: flex;
  gap: 0.15rem;
  flex: 1;
  justify-content: center;
}
.kx-dock__links a {
  padding: 0.45rem 0.75rem;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--kx-ink-soft);
  border-radius: 999px;
  transition: color 0.25s, background 0.25s;
}
.kx-dock__links a:hover,
.kx-dock__links a.is-active {
  color: var(--kx-teal);
  background: color-mix(in srgb, var(--kx-teal) 12%, transparent);
}
.kx-dock__actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}
.kx-dock__btn,
.kx-dock__cart {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid var(--kx-line);
  border-radius: 50%;
  color: var(--kx-ink);
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
  position: relative;
}
.kx-dock__btn:hover,
.kx-dock__cart:hover { border-color: var(--kx-teal); color: var(--kx-teal); }
.kx-dock__cart span {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-family: var(--kx-mono);
  font-size: 0.55rem;
  line-height: 16px;
  text-align: center;
  background: var(--kx-teal);
  color: var(--kx-bg);
  border-radius: 999px;
}
.kx-dock__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: 1px solid var(--kx-line);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.kx-dock__burger span {
  display: block;
  width: 14px;
  height: 1.5px;
  background: var(--kx-ink);
  margin: 0 auto;
  transition: transform 0.3s, opacity 0.3s;
}
.kx-dock__burger.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.kx-dock__burger.is-open span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

[data-theme="dark"] .kx-icon-sun { display: none; }
[data-theme="light"] .kx-icon-moon { display: none; }

/* Orbit — right vertical journey nav */
.kx-orbit {
  position: fixed;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 850;
  width: var(--kx-orbit-w);
}
.kx-orbit__track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0.5rem;
  background: color-mix(in srgb, var(--kx-surface) 75%, transparent);
  backdrop-filter: blur(14px);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
}
.kx-orbit__label {
  font-family: var(--kx-mono);
  font-size: 0.55rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kx-ink-muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.kx-orbit__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 50vh;
  overflow-y: auto;
  scrollbar-width: none;
}
.kx-orbit__list::-webkit-scrollbar { display: none; }
.kx-orbit__list a {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  font-family: var(--kx-mono);
  font-size: 0.55rem;
  color: var(--kx-ink-muted);
  border: 1px solid var(--kx-line);
  border-radius: 50%;
  transition: border-color 0.3s, color 0.3s, background 0.3s, box-shadow 0.3s;
}
.kx-orbit__list a:hover { border-color: var(--kx-teal); color: var(--kx-teal); }
.kx-orbit__list a.is-active {
  background: var(--kx-teal);
  border-color: var(--kx-teal);
  color: var(--kx-bg);
  box-shadow: var(--kx-shadow-teal);
}
.kx-orbit__meter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 100%;
}
.kx-orbit__meter > span {
  font-family: var(--kx-mono);
  font-size: 0.7rem;
  color: var(--kx-teal);
}
.kx-orbit__fill {
  width: 3px;
  height: 48px;
  background: var(--kx-line);
  border-radius: 999px;
  overflow: hidden;
}
.kx-orbit__fill i {
  display: block;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, var(--kx-teal), var(--kx-teal-dim));
  border-radius: 999px;
  transition: height 0.4s var(--kx-ease);
}

/* Search overlay */
.kx-search {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
.kx-search.is-open { opacity: 1; visibility: visible; }
.kx-search__veil {
  position: absolute;
  inset: 0;
  background: var(--kx-overlay-heavy);
  backdrop-filter: blur(8px);
}
.kx-search__sheet {
  position: relative;
  width: min(520px, calc(100% - 2rem));
  padding: 2rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line-strong);
  border-radius: var(--kx-radius-lg);
  box-shadow: var(--kx-shadow);
  transform: translateY(-20px);
  transition: transform 0.35s var(--kx-ease);
}
.kx-search.is-open .kx-search__sheet { transform: translateY(0); }
.kx-search__form {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}
.kx-search__form input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: var(--kx-bg);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
  outline: none;
  transition: border-color 0.25s;
}
.kx-search__form input:focus { border-color: var(--kx-teal); }
.kx-search__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--kx-ink-soft);
}
.kx-search__tags button {
  padding: 0.3rem 0.65rem;
  background: var(--kx-bg);
  border: 1px solid var(--kx-line);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.72rem;
  transition: border-color 0.25s, color 0.25s;
}
.kx-search__tags button:hover { border-color: var(--kx-teal); color: var(--kx-teal); }

/* Mobile sheet */
.kx-sheet {
  position: fixed;
  inset: 0;
  z-index: 960;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s;
}
.kx-sheet.is-open { opacity: 1; visibility: visible; }
.kx-sheet__veil {
  position: absolute;
  inset: 0;
  background: var(--kx-overlay-heavy);
}
.kx-sheet__panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(320px, 85vw);
  padding: 2rem 1.5rem;
  background: var(--kx-surface);
  border-left: 1px solid var(--kx-line-strong);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transform: translateX(100%);
  transition: transform 0.4s var(--kx-ease);
}
.kx-sheet.is-open .kx-sheet__panel { transform: translateX(0); }
.kx-sheet__panel a {
  padding: 0.85rem 0;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--kx-line);
  transition: color 0.25s, padding-left 0.25s;
}
.kx-sheet__panel a:hover { color: var(--kx-teal); padding-left: 0.5rem; }
.kx-sheet__meta {
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: 0.82rem;
  color: var(--kx-ink-soft);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.kx-sheet__meta a:hover { color: var(--kx-teal); }

/* Back to top */
.kx-ascend {
  position: fixed;
  right: 1.25rem;
  bottom: calc(var(--kx-dock-h) + 2rem);
  z-index: 800;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line-strong);
  border-radius: 50%;
  color: var(--kx-ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, border-color 0.25s, color 0.25s;
}
.kx-ascend.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.kx-ascend:hover { border-color: var(--kx-teal); color: var(--kx-teal); }
.page-home .kx-ascend { bottom: calc(var(--kx-dock-h) + 2.5rem); }

/* Toast */
.kx-toast {
  position: fixed;
  bottom: calc(var(--kx-dock-h) + 1.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 980;
  padding: 0.75rem 1.5rem;
  font-family: var(--kx-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  background: var(--kx-surface-2);
  border: 1px solid var(--kx-teal);
  border-radius: var(--kx-radius);
  color: var(--kx-ink);
  box-shadow: var(--kx-shadow-teal);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s, visibility 0.35s, transform 0.35s var(--kx-ease);
  pointer-events: none;
}
.kx-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Reveal */
.kx-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--kx-ease), transform 0.7s var(--kx-ease);
}
.kx-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Journey — scroll-snap fullscreen stages */
.kx-journey {
  scroll-snap-type: y proximity;
}
.kx-stage {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.kx-stage__slant {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 80px;
  background: var(--kx-bg);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 5;
  pointer-events: none;
}
.kx-stage__slant--ignition { height: 100px; opacity: 0.6; }
.kx-stage__slant--spec { background: var(--kx-bg-2); }
.kx-stage__slant--product { background: transparent; height: 120px; }
.kx-stage__slant--distort { background: var(--kx-bg-2); }
.kx-stage__slant--pulse { background: var(--kx-bg); }
.kx-stage__slant--threshold { background: var(--kx-bg); height: 100px; }

.kx-stage__bg {
  position: absolute;
  inset: -10% 0;
  background-image: var(--stage-img);
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
}
.kx-stage__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--kx-overlay) 0%, color-mix(in srgb, var(--kx-bg) 40%, transparent) 100%);
  z-index: 1;
}
.kx-stage__overlay--heavy { background: var(--kx-overlay-heavy); }
.kx-stage__viewport {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 6rem 0 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.kx-stage__scroll-hint {
  position: absolute;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--kx-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--kx-ink-muted);
  animation: kx-float 2.5s ease-in-out infinite;
}
.kx-stage__scroll-hint i {
  display: block;
  width: 1px;
  height: 32px;
  background: linear-gradient(180deg, var(--kx-teal), transparent);
}
@keyframes kx-float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}

/* 00 · Ignition */
.kx-stage--ignition { background: radial-gradient(ellipse at 70% 30%, color-mix(in srgb, var(--kx-teal) 8%, transparent), var(--kx-bg)); }
.kx-ignition__title {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.kx-ignition__glyph {
  font-family: var(--kx-serif);
  font-size: clamp(3rem, 8vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--kx-teal);
  opacity: 0.85;
}
.kx-ignition__word {
  display: flex;
  flex-direction: column;
  padding-top: 0.5rem;
}
.kx-ignition__word em {
  font-family: var(--kx-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-style: italic;
  color: var(--kx-ink);
}
.kx-ignition__word span {
  font-family: var(--kx-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--kx-ink-soft);
  margin-top: 0.35rem;
}
.kx-ignition__deck { max-width: 38ch; color: var(--kx-ink-soft); }
.kx-ignition__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0; }
.kx-ignition__ticks {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--kx-line);
}
.kx-ignition__ticks li { display: flex; flex-direction: column; gap: 0.2rem; }
.kx-ignition__ticks em {
  font-family: var(--kx-serif);
  font-size: 1.4rem;
  color: var(--kx-teal);
  font-style: normal;
}
.kx-ignition__ticks span {
  font-family: var(--kx-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kx-ink-muted);
}
.kx-ignition__ring {
  position: relative;
  margin: 0;
}
.kx-ignition__ring img {
  width: 100%;
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-line);
  box-shadow: var(--kx-shadow);
}
.kx-ignition__ring figcaption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-family: var(--kx-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  padding: 0.35rem 0.65rem;
  background: color-mix(in srgb, var(--kx-bg) 80%, transparent);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
}
.kx-ignition__orbit {
  position: absolute;
  inset: -12%;
  border: 1px solid color-mix(in srgb, var(--kx-teal) 30%, transparent);
  border-radius: 50%;
  animation: kx-spin 24s linear infinite;
  pointer-events: none;
}
.kx-ignition__orbit span {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--kx-teal);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--kx-teal-glow);
}
.kx-ignition__orbit span:nth-child(1) { top: 10%; left: 50%; }
.kx-ignition__orbit span:nth-child(2) { bottom: 20%; right: 8%; }
.kx-ignition__orbit span:nth-child(3) { bottom: 30%; left: 5%; }
@keyframes kx-spin { to { transform: rotate(360deg); } }

/* 01 · Chronicle — cinematic orbit narrative */
.kx-stage--chronicle {
  background: var(--kx-bg-2);
  min-height: 110vh;
}
.kx-stage__slant--chronicle {
  background: linear-gradient(135deg, transparent 48%, var(--kx-teal-glow) 48%, transparent 52%);
  opacity: 0.35;
}
.kx-chronicle {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 3rem));
  margin: 0 auto;
  padding: clamp(4rem, 8vh, 6.5rem) 0 5rem;
  overflow: hidden;
}
.kx-chronicle__ghost {
  position: absolute;
  top: -0.08em;
  right: -0.04em;
  font-family: var(--kx-serif);
  font-size: clamp(9rem, 22vw, 16rem);
  font-weight: 700;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px var(--kx-line);
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}
.kx-chronicle__kanji {
  position: absolute;
  left: -0.15em;
  bottom: 8%;
  font-family: var(--kx-serif);
  font-size: clamp(6rem, 14vw, 11rem);
  font-weight: 700;
  color: var(--kx-teal);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
}
.kx-chronicle__grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
.kx-chronicle__narrative { position: relative; z-index: 2; }
.kx-chronicle__title {
  margin: 0.75rem 0 1.25rem;
  font-family: var(--kx-serif);
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.kx-chronicle__title-line {
  display: block;
}
.kx-chronicle__title-line--accent em {
  font-style: italic;
  color: var(--kx-teal);
}
.kx-chronicle__deck {
  max-width: 42ch;
  margin-bottom: 2rem;
  color: var(--kx-ink-soft);
  line-height: 1.85;
}
.kx-chronicle__nodes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.75rem;
}
.kx-chronicle__node {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0.85rem;
  align-items: center;
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--kx-radius-lg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.35s var(--kx-ease), background 0.35s var(--kx-ease), transform 0.35s var(--kx-ease);
}
.kx-chronicle__node:hover {
  background: rgba(45, 212, 191, 0.04);
  border-color: var(--kx-line);
}
.kx-chronicle__node.is-active {
  background: rgba(45, 212, 191, 0.08);
  border-color: rgba(45, 212, 191, 0.35);
  transform: translateX(6px);
}
.kx-chronicle__node-num {
  font-family: var(--kx-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--kx-ink-muted);
  transition: color 0.35s var(--kx-ease);
}
.kx-chronicle__node.is-active .kx-chronicle__node-num { color: var(--kx-teal); }
.kx-chronicle__node-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.kx-chronicle__node-copy em {
  font-family: var(--kx-serif);
  font-size: 1.1rem;
  font-style: normal;
  color: var(--kx-ink);
}
.kx-chronicle__node-copy small {
  font-family: var(--kx-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--kx-ink-muted);
  text-transform: uppercase;
}
.kx-chronicle__node-rail {
  display: none;
}
.kx-chronicle__live {
  position: relative;
  min-height: 3.2em;
  padding-left: 1rem;
  border-left: 2px solid var(--kx-teal);
}
.kx-chronicle__beat {
  position: absolute;
  inset: 0 auto auto 1rem;
  margin: 0;
  max-width: 38ch;
  font-family: var(--kx-serif);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--kx-ink-soft);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--kx-ease), transform 0.45s var(--kx-ease);
  pointer-events: none;
}
.kx-chronicle__beat.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.kx-chronicle__gate {
  position: relative;
}
.kx-chronicle__frame {
  position: relative;
  aspect-ratio: 4 / 2.75;
  overflow: hidden;
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-line-strong);
  background: var(--kx-surface);
  box-shadow: var(--kx-shadow), var(--kx-shadow-teal);
}
.kx-chronicle__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 0.7s var(--kx-ease), transform 1.1s var(--kx-ease);
}
.kx-chronicle__slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}
.kx-chronicle__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kx-chronicle__slide figcaption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.45rem 0.85rem;
  background: var(--kx-overlay-heavy);
  backdrop-filter: blur(8px);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
  font-family: var(--kx-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
}
.kx-chronicle__slide figcaption em {
  color: var(--kx-teal);
  font-style: normal;
}
.kx-chronicle__scan {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(45, 212, 191, 0.03) 2px,
    rgba(45, 212, 191, 0.03) 4px
  );
  pointer-events: none;
  mix-blend-mode: overlay;
}
.kx-chronicle__corners {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.kx-chronicle__corners i {
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: var(--kx-teal);
  border-style: solid;
  opacity: 0.7;
}
.kx-chronicle__corners i:nth-child(1) { top: 12px; left: 12px; border-width: 2px 0 0 2px; }
.kx-chronicle__corners i:nth-child(2) { top: 12px; right: 12px; border-width: 2px 2px 0 0; }
.kx-chronicle__corners i:nth-child(3) { bottom: 12px; left: 12px; border-width: 0 0 2px 2px; }
.kx-chronicle__corners i:nth-child(4) { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; }
.kx-chronicle__quote {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
  border-left: 3px solid var(--kx-teal);
  transform: translateX(-1.5rem);
  box-shadow: var(--kx-shadow);
}
.kx-chronicle__quote p {
  margin: 0;
  font-family: var(--kx-serif);
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--kx-ink);
}
.kx-chronicle__quote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--kx-mono);
  font-size: 0.65rem;
  color: var(--kx-ink-muted);
  font-style: normal;
}
.kx-chronicle__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--kx-line);
}
.kx-chronicle__progress-fill {
  display: block;
  height: 100%;
  width: 33.33%;
  background: linear-gradient(90deg, var(--kx-teal-dim), var(--kx-teal));
  box-shadow: 0 0 12px var(--kx-teal-glow);
  transition: width 0.55s var(--kx-ease), transform 0.55s var(--kx-ease);
  transform-origin: left center;
}

/* 02 · Spec Rail */
.kx-stage--specrail { background: var(--kx-bg); }
.kx-specrail {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 5rem 0;
}
.kx-specrail__head { max-width: 52ch; margin-bottom: 2.5rem; }
.kx-specrail__console {
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
  padding: 2rem;
  box-shadow: var(--kx-shadow);
}
.kx-specrail__rail { margin-bottom: 2rem; }
.kx-specrail__rail input[type="range"] {
  width: 100%;
  height: 4px;
  appearance: none;
  background: var(--kx-line);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.kx-specrail__rail input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--kx-teal);
  border-radius: 50%;
  box-shadow: var(--kx-shadow-teal);
  cursor: grab;
}
.kx-specrail__ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  gap: 0.5rem;
}
.kx-specrail__tick {
  flex: 1;
  padding: 0.5rem;
  background: var(--kx-bg);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
  font-family: var(--kx-serif);
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.kx-specrail__tick:hover,
.kx-specrail__tick.is-active {
  border-color: var(--kx-teal);
  background: color-mix(in srgb, var(--kx-teal) 12%, transparent);
  color: var(--kx-teal);
}
.kx-specrail__display { position: relative; min-height: 380px; }
.kx-specrail__panel {
  display: none;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: center;
  animation: kx-fade-in 0.45s var(--kx-ease);
}
.kx-specrail__panel.is-active { display: grid; }
@keyframes kx-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.kx-specrail__visual img {
  width: 100%;
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-line);
}
.kx-specrail__data h3 {
  font-family: var(--kx-serif);
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
}
.kx-specrail__story { color: var(--kx-ink-soft); font-size: 0.92rem; }
.kx-specrail__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1.25rem 0;
}
.kx-specrail__stats div {
  padding: 0.65rem 0.85rem;
  background: var(--kx-bg);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
}
.kx-specrail__stats dt {
  font-family: var(--kx-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kx-ink-muted);
}
.kx-specrail__stats dd {
  margin: 0.2rem 0 0;
  font-family: var(--kx-serif);
  font-size: 1.2rem;
  color: var(--kx-teal);
}
.kx-specrail__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.kx-specrail__price {
  font-family: var(--kx-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

/* 03–04 · Product Stage */
.kx-stage--product { justify-content: flex-end; }
.kx-product-stage {
  position: relative;
  z-index: 3;
  width: min(520px, calc(100% - 3rem));
  margin: 0 auto 6rem 8%;
  padding: 2.5rem;
  background: color-mix(in srgb, var(--kx-surface) 88%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--kx-line-strong);
  border-radius: var(--kx-radius-lg);
}
.kx-product-stage--right { margin-left: auto; margin-right: 8%; }
.kx-product-stage__index {
  font-family: var(--kx-mono);
  font-size: 3rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--kx-teal) 25%, transparent);
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}
.kx-product-stage__specs {
  display: flex;
  gap: 1.5rem;
  margin: 1.5rem 0;
  padding: 1rem 0;
  border-top: 1px solid var(--kx-line);
  border-bottom: 1px solid var(--kx-line);
}
.kx-product-stage__specs li { display: flex; flex-direction: column; }
.kx-product-stage__specs em {
  font-family: var(--kx-serif);
  font-size: 1.5rem;
  color: var(--kx-teal);
  font-style: normal;
}
.kx-product-stage__specs span {
  font-family: var(--kx-mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--kx-ink-muted);
}
.kx-product-stage__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* 05 · Distort */
.kx-stage--distort { background: var(--kx-bg-2); }
.kx-distort {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 5rem 0;
  align-items: center;
}
.kx-distort__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
.kx-distort__knob {
  padding: 0.55rem 1rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: 999px;
  font-family: var(--kx-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.kx-distort__knob:hover,
.kx-distort__knob.is-active {
  border-color: var(--kx-teal);
  background: color-mix(in srgb, var(--kx-teal) 15%, transparent);
  color: var(--kx-teal);
}
.kx-distort__canvas {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-line);
}
.kx-distort__canvas img {
  width: 100%;
  transition: filter 0.5s, transform 0.5s var(--kx-ease);
}
.kx-distort__mask,
.kx-distort__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 0.5s;
}
.kx-distort__mask {
  background: linear-gradient(45deg, transparent 40%, color-mix(in srgb, var(--kx-teal) 20%, transparent) 50%, transparent 60%);
  opacity: 0;
}
.kx-distort__grid {
  background-image:
    linear-gradient(var(--kx-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--kx-line) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0;
}
.kx-distort__canvas figcaption {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-family: var(--kx-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  padding: 0.35rem 0.65rem;
  background: color-mix(in srgb, var(--kx-bg) 85%, transparent);
}
.kx-distort__canvas[data-distort-state="warp"] img { filter: hue-rotate(30deg) contrast(1.2); transform: skewX(-2deg); }
.kx-distort__canvas[data-distort-state="warp"] .kx-distort__mask { opacity: 0.6; }
.kx-distort__canvas[data-distort-state="pulse"] img { animation: kx-pulse-img 2s ease-in-out infinite; }
.kx-distort__canvas[data-distort-state="pulse"] .kx-distort__grid { opacity: 0.4; }
.kx-distort__canvas[data-distort-state="fracture"] img { filter: contrast(1.4) saturate(0.3); clip-path: polygon(0 0, 100% 0, 98% 100%, 2% 100%); }
.kx-distort__canvas[data-distort-state="fracture"] .kx-distort__grid { opacity: 0.7; }
@keyframes kx-pulse-img {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.02); filter: brightness(1.15); }
}

/* 06 · Drift */
.kx-stage--drift { background: var(--kx-bg); min-height: auto; padding: 5rem 0; }
.kx-drift__head {
  width: min(680px, calc(100% - 3rem));
  margin: 0 auto 2.5rem;
  padding-left: 1.5rem;
}
.kx-drift__track {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 0 1.5rem 1rem;
}
.kx-drift__track::-webkit-scrollbar { display: none; }
.kx-drift__track.is-dragging { cursor: grabbing; }
.kx-drift__rail {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  padding-right: 2rem;
}
.kx-drift__card {
  width: 340px;
  flex-shrink: 0;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s var(--kx-ease);
  animation: kx-drift-in 0.6s var(--kx-ease) var(--drift-delay, 0s) both;
}
.kx-drift__card:hover { border-color: var(--kx-teal); transform: translateY(-6px); }
@keyframes kx-drift-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}
.kx-drift__card figure { margin: 0; overflow: hidden; }
.kx-drift__card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.5s var(--kx-ease);
}
.kx-drift__card:hover img { transform: scale(1.05); }
.kx-drift__meta { padding: 1.25rem; }
.kx-drift__grade {
  display: inline-block;
  font-family: var(--kx-mono);
  font-size: 0.65rem;
  padding: 0.2rem 0.5rem;
  background: var(--kx-teal);
  color: var(--kx-bg);
  border-radius: var(--kx-radius);
  margin-bottom: 0.5rem;
}
.kx-drift__meta h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.kx-drift__meta p { font-size: 0.85rem; color: var(--kx-ink-soft); margin-bottom: 0.75rem; }
.kx-drift__dist {
  font-family: var(--kx-mono);
  font-size: 0.68rem;
  color: var(--kx-teal);
}

/* 07 · Pulse */
.kx-stage--pulse { background: var(--kx-bg-2); }
.kx-pulse {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 5rem 0;
  align-items: start;
}
.kx-pulse__nums {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.kx-pulse__nums li {
  padding: 1.25rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
  text-align: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.kx-pulse__nums li:hover { border-color: var(--kx-teal); box-shadow: var(--kx-shadow-teal); }
.kx-pulse__count {
  display: block;
  font-family: var(--kx-serif);
  font-size: 2.4rem;
  color: var(--kx-teal);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.kx-pulse__nums em {
  font-family: var(--kx-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--kx-ink-muted);
  font-style: normal;
}
.kx-pulse__flow h3 { margin-bottom: 1.25rem; }
.kx-pulse__steps { display: flex; flex-direction: column; gap: 0.75rem; }
.kx-pulse__steps li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
  transition: border-color 0.25s, transform 0.25s;
}
.kx-pulse__steps li:hover { border-color: var(--kx-teal); transform: translateX(4px); }
.kx-pulse__step-num {
  font-family: var(--kx-mono);
  font-size: 0.72rem;
  color: var(--kx-teal);
}
.kx-pulse__steps strong { display: block; font-family: var(--kx-sans); font-size: 0.9rem; margin-bottom: 0.2rem; }
.kx-pulse__steps p { font-size: 0.8rem; color: var(--kx-ink-soft); margin: 0; }
.kx-pulse__steps img {
  width: 80px;
  height: 54px;
  object-fit: cover;
  border-radius: var(--kx-radius);
  border: 1px solid var(--kx-line);
}

/* 08 · Echo */
.kx-stage--echo { background: var(--kx-bg); min-height: 90vh; }
.kx-echo {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 5rem 0;
}
.kx-echo__head { margin-bottom: 3rem; }
.kx-echo__layers {
  position: relative;
  min-height: 380px;
  margin-bottom: 2rem;
}
.kx-echo__card {
  position: absolute;
  width: min(420px, 85%);
  margin: 0;
  padding: 1.75rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
  box-shadow: var(--kx-shadow);
  transition: transform 0.4s var(--kx-ease), border-color 0.3s, z-index 0s;
  z-index: var(--echo-z, 1);
}
.kx-echo__card--a { top: 0; left: 5%; transform: rotate(-1.5deg); }
.kx-echo__card--b { top: 80px; right: 8%; transform: rotate(1deg); }
.kx-echo__card--c { top: 200px; left: 18%; transform: rotate(-0.5deg); }
.kx-echo__card:hover {
  transform: rotate(0) translateY(-8px) scale(1.02);
  border-color: var(--kx-teal);
  z-index: 10;
}
.kx-echo__card p {
  font-family: var(--kx-serif);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.kx-echo__card footer strong { display: block; font-size: 0.88rem; }
.kx-echo__card footer span { font-size: 0.75rem; color: var(--kx-ink-soft); }
.kx-echo__depth {
  margin: 0 auto;
  max-width: 500px;
  opacity: 0.7;
}
.kx-echo__depth img {
  width: 100%;
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-line);
  filter: grayscale(30%);
}

/* 09 · Threshold */
.kx-stage--threshold { justify-content: center; text-align: center; }
.kx-threshold {
  position: relative;
  z-index: 3;
  width: min(640px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 4rem 0 6rem;
}
.kx-threshold__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0;
}
.kx-threshold__fleet { margin-top: 2.5rem; }
.kx-threshold__fleet > p {
  font-family: var(--kx-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kx-ink-muted);
  margin-bottom: 1rem;
}
.kx-threshold__strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.kx-threshold__chip {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.85rem 0.5rem 0.5rem;
  background: color-mix(in srgb, var(--kx-surface) 90%, transparent);
  border: 1px solid var(--kx-line);
  border-radius: 999px;
  font-size: 0.75rem;
  transition: border-color 0.25s, transform 0.25s;
}
.kx-threshold__chip:hover { border-color: var(--kx-teal); transform: translateY(-2px); }
.kx-threshold__chip img {
  width: 48px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--kx-radius);
}
.kx-threshold__contact {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--kx-line);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.85rem;
}
.kx-threshold__contact a:hover { color: var(--kx-teal); }

/* Rim footer */
.kx-rim {
  position: relative;
  background: var(--kx-bg-2);
  border-top: 1px solid var(--kx-line);
  margin-top: 0;
  padding-top: 4rem;
}
.kx-rim__cut {
  position: absolute;
  top: -60px;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--kx-bg-2);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  z-index: 1;
}
.page-home .kx-rim__cut { background: var(--kx-bg); }
.page-home .kx-rim { background: var(--kx-bg); border-top: none; }
.kx-rim__grid {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 3rem;
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding-bottom: 2.5rem;
}
.kx-rim__logo span {
  font-family: var(--kx-serif);
  font-size: 1.5rem;
  display: block;
}
.kx-rim__logo em {
  font-family: var(--kx-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--kx-ink-soft);
}
.kx-rim__brand > p {
  margin: 1rem 0 1.5rem;
  font-size: 0.88rem;
  color: var(--kx-ink-soft);
  max-width: 38ch;
}
.kx-rim__letter label {
  display: block;
  font-family: var(--kx-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.kx-rim__letter-row {
  display: flex;
  gap: 0.5rem;
}
.kx-rim__letter-row input {
  flex: 1;
  padding: 0.65rem 0.85rem;
  background: var(--kx-bg);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
  outline: none;
}
.kx-rim__letter-row input:focus { border-color: var(--kx-teal); }
.kx-rim__bands {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.kx-rim__band h3 {
  font-family: var(--kx-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kx-teal);
  margin-bottom: 1rem;
}
.kx-rim__band nav,
.kx-rim__studio {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.85rem;
  color: var(--kx-ink-soft);
}
.kx-rim__band a:hover { color: var(--kx-teal); }
.kx-rim__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border-top: 1px solid var(--kx-line);
  font-family: var(--kx-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--kx-ink-muted);
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
}

/* Inner pages */
.kx-page {
  padding: 2rem 0 4rem;
  padding-bottom: calc(var(--kx-dock-h) + 3rem);
}
.kx-page-head {
  display: grid;
  gap: 1.5rem;
  padding: 3rem 0 2.5rem;
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
}
.kx-page-head--center { text-align: center; }
.kx-page-head--center .kx-page-head__lead { margin-inline: auto; }
.kx-page-head--split {
  grid-template-columns: 1fr 1.1fr;
  align-items: center;
}
.kx-page-head__lead {
  max-width: 52ch;
  color: var(--kx-ink-soft);
  font-size: 0.95rem;
}
.kx-page-head__media img {
  width: 100%;
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-line);
}

/* Shop */
.kx-shop-hero {
  position: relative;
  min-height: 280px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 2.5rem;
  overflow: hidden;
}
.kx-shop-hero__bg {
  position: absolute;
  inset: 0;
  margin: 0;
}
.kx-shop-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.45);
}
.kx-shop-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--kx-bg) 0%, transparent 60%);
}
.kx-shop-hero__copy {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding: 3rem 0 2.5rem;
}
.kx-shop-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: start;
}
.kx-shop-rail {
  position: sticky;
  top: 2rem;
  padding: 1.5rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
}
.kx-shop-rail__accent {
  margin: -1.5rem -1.5rem 1rem;
  overflow: hidden;
  border-radius: var(--kx-radius-lg) var(--kx-radius-lg) 0 0;
}
.kx-shop-rail__accent img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  opacity: 0.6;
}
.kx-shop-rail h2 { font-size: 1rem; margin-bottom: 1rem; }
.kx-shop-rail__pills {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.kx-shop-rail__pill {
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: var(--kx-bg);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.kx-shop-rail__pill:hover,
.kx-shop-rail__pill.is-active {
  border-color: var(--kx-teal);
  color: var(--kx-teal);
  background: color-mix(in srgb, var(--kx-teal) 10%, transparent);
}
.kx-shop-rail__sort {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--kx-line);
}
.kx-shop-rail__sort label {
  display: block;
  font-family: var(--kx-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
  color: var(--kx-ink-muted);
}
.kx-shop-rail__sort select {
  width: 100%;
  padding: 0.5rem;
  background: var(--kx-bg);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
  cursor: pointer;
}
.kx-shop-rail__count {
  margin-top: 1rem;
  font-family: var(--kx-mono);
  font-size: 0.65rem;
  color: var(--kx-teal);
}
.kx-shop-deck {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.kx-shop-card {
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s var(--kx-ease), box-shadow 0.3s;
}
.kx-shop-card:hover {
  border-color: var(--kx-teal);
  transform: translateY(-4px);
  box-shadow: var(--kx-shadow-teal);
}
.kx-shop-card.is-hidden { display: none; }
.kx-shop-card--tall .kx-shop-card__img img { height: 220px; }
.kx-shop-card__img {
  position: relative;
  margin: 0;
  overflow: hidden;
}
.kx-shop-card__img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  transition: transform 0.5s var(--kx-ease);
}
.kx-shop-card:hover .kx-shop-card__img img { transform: scale(1.06); }
.kx-shop-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-family: var(--kx-serif);
  font-size: 0.9rem;
  padding: 0.25rem 0.55rem;
  background: color-mix(in srgb, var(--kx-bg) 85%, transparent);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
}
.kx-shop-card__body { padding: 1.15rem; }
.kx-shop-card__body h2 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.kx-shop-card__story {
  font-size: 0.82rem;
  color: var(--kx-ink-soft);
  margin-bottom: 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kx-shop-card__spec {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.78rem;
}
.kx-shop-card__spec dt { color: var(--kx-ink-muted); font-family: var(--kx-mono); font-size: 0.58rem; }
.kx-shop-card__spec dd { margin: 0; color: var(--kx-teal); }
.kx-shop-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--kx-line);
}
.kx-shop-card__foot strong {
  font-family: var(--kx-mono);
  font-size: 0.78rem;
}
.kx-shop-card__actions { display: flex; gap: 0.35rem; }
.kx-shop-flow {
  margin-top: 4rem;
  padding: 2.5rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
}
.kx-shop-flow__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin: 1.5rem 0;
}
.kx-shop-flow__steps li {
  padding: 1.25rem;
  background: var(--kx-bg);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
}
.kx-shop-flow__steps span {
  font-family: var(--kx-mono);
  font-size: 0.7rem;
  color: var(--kx-teal);
  display: block;
  margin-bottom: 0.5rem;
}
.kx-shop-flow__steps h3 { font-size: 0.95rem; margin-bottom: 0.35rem; }
.kx-shop-flow__steps p { font-size: 0.82rem; color: var(--kx-ink-soft); margin: 0; }
.kx-shop-flow__note {
  font-size: 0.82rem;
  color: var(--kx-ink-muted);
  font-family: var(--kx-mono);
}

/* About */
.kx-about-story__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.kx-about-story figure { margin: 0; }
.kx-about-story img {
  width: 100%;
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-line);
}
.kx-about-story figcaption {
  margin-top: 0.5rem;
  font-family: var(--kx-mono);
  font-size: 0.62rem;
  color: var(--kx-ink-muted);
}
.kx-about-mission { margin-top: 4rem; }
.kx-about-mission__quote {
  margin: 1.5rem 0 2rem;
  padding: 1.5rem;
  background: var(--kx-surface);
  border-left: 3px solid var(--kx-teal);
  border-radius: 0 var(--kx-radius) var(--kx-radius) 0;
}
.kx-about-mission__quote p {
  font-family: var(--kx-serif);
  font-size: 1.1rem;
  margin: 0;
}
.kx-about-mission__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
.kx-about-mission__grid article {
  padding: 1.5rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
  transition: border-color 0.3s;
}
.kx-about-mission__grid article:hover { border-color: var(--kx-teal); }
.kx-about-mission__glyph {
  font-family: var(--kx-serif);
  font-size: 2rem;
  color: var(--kx-teal);
  display: block;
  margin-bottom: 0.5rem;
}
.kx-about-timeline { margin-top: 4rem; }
.kx-about-timeline__rail {
  margin-top: 2rem;
  border-left: 2px solid var(--kx-line);
  padding-left: 2rem;
}
.kx-about-timeline__rail li {
  position: relative;
  padding-bottom: 2rem;
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 1.25rem;
  align-items: start;
}
.kx-about-timeline__rail li::before {
  content: '';
  position: absolute;
  left: -2.45rem;
  top: 0.35rem;
  width: 10px;
  height: 10px;
  background: var(--kx-teal);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--kx-bg);
}
.kx-about-timeline__rail time {
  font-family: var(--kx-mono);
  font-size: 0.72rem;
  color: var(--kx-teal);
}
.kx-about-timeline__rail h3 { font-size: 1rem; margin-bottom: 0.25rem; }
.kx-about-timeline__rail p { font-size: 0.85rem; color: var(--kx-ink-soft); margin: 0; }
.kx-about-timeline__rail img {
  width: 120px;
  border-radius: var(--kx-radius);
  border: 1px solid var(--kx-line);
}
.kx-about-cta {
  margin-top: 4rem;
  text-align: center;
  padding: 3rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
}
.kx-about-cta__actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* FAQ */
.kx-faq { margin-top: 1rem; }
.kx-faq__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.kx-faq__tab {
  padding: 0.6rem 1.1rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.kx-faq__tab:hover,
.kx-faq__tab.is-active {
  border-color: var(--kx-teal);
  background: color-mix(in srgb, var(--kx-teal) 12%, transparent);
  color: var(--kx-teal);
}
.kx-faq__panel { display: none; }
.kx-faq__panel.is-active { display: block; }
.kx-faq__item {
  margin-bottom: 0.65rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
  overflow: hidden;
  transition: border-color 0.25s;
}
.kx-faq__item[open] { border-color: var(--kx-teal); }
.kx-faq__item summary {
  padding: 1rem 1.25rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kx-faq__item summary::-webkit-details-marker { display: none; }
.kx-faq__item summary::after {
  content: '+';
  font-family: var(--kx-mono);
  color: var(--kx-teal);
  transition: transform 0.25s;
}
.kx-faq__item[open] summary::after { transform: rotate(45deg); }
.kx-faq__item p {
  padding: 0 1.25rem 1rem;
  font-size: 0.9rem;
  color: var(--kx-ink-soft);
  margin: 0;
}
.kx-faq-cta {
  margin-top: 3rem;
  text-align: center;
  padding: 2.5rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
}

/* Contact */
.kx-contact__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.kx-contact__studio { margin: 0 0 1.25rem; }
.kx-contact__studio img {
  width: 100%;
  border-radius: var(--kx-radius-lg);
  border: 1px solid var(--kx-line);
}
.kx-contact__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.25rem 0;
  font-size: 0.88rem;
}
.kx-contact__list li {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.5rem;
}
.kx-contact__list li > span:first-child {
  font-family: var(--kx-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--kx-ink-muted);
}
.kx-contact__list a:hover { color: var(--kx-teal); }
.kx-contact__map {
  border-radius: var(--kx-radius-lg);
  overflow: hidden;
  border: 1px solid var(--kx-line);
}
.kx-contact__map iframe { display: block; border: 0; }
.kx-contact__form {
  padding: 2rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
}
.kx-contact__form h2 { font-size: 1.2rem; margin-bottom: 1.25rem; }
.kx-field { margin-bottom: 1rem; }
.kx-field label {
  display: block;
  font-size: 0.82rem;
  margin-bottom: 0.35rem;
}
.kx-field label span { color: var(--kx-teal); }
.kx-field input,
.kx-field select,
.kx-field textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  background: var(--kx-bg);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
  outline: none;
  transition: border-color 0.25s;
}
.kx-field input:focus,
.kx-field select:focus,
.kx-field textarea:focus { border-color: var(--kx-teal); }
.kx-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.82rem;
  margin-bottom: 1.25rem;
  cursor: pointer;
}
.kx-checkbox input { margin-top: 0.2rem; accent-color: var(--kx-teal); }
.kx-checkbox a { color: var(--kx-teal); text-decoration: underline; }

/* Cart */
.kx-cart__layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2rem;
  align-items: start;
}
.kx-cart__items {
  padding: 1.5rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
  min-height: 200px;
}
.kx-cart__empty {
  text-align: center;
  padding: 3rem 1rem;
}
.kx-cart__empty p { color: var(--kx-ink-soft); margin-bottom: 1rem; }
.kx-cart-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--kx-line);
}
.kx-cart-item:last-child { border-bottom: none; }
.kx-cart-item img {
  width: 100px;
  height: 68px;
  object-fit: cover;
  border-radius: var(--kx-radius);
  border: 1px solid var(--kx-line);
}
.kx-cart-item h3 { font-size: 0.95rem; margin-bottom: 0.25rem; }
.kx-cart-item__price {
  font-family: var(--kx-mono);
  font-size: 0.82rem;
  color: var(--kx-teal);
  margin: 0;
}
.kx-cart-remove {
  margin-top: 0.5rem;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--kx-mono);
  font-size: 0.65rem;
  color: var(--kx-ink-muted);
  cursor: pointer;
  text-decoration: underline;
}
.kx-cart-remove:hover { color: #f87171; }
.kx-cart-qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.kx-cart-qty button {
  width: 28px;
  height: 28px;
  background: var(--kx-bg);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
  cursor: pointer;
  transition: border-color 0.25s;
}
.kx-cart-qty button:hover { border-color: var(--kx-teal); }
.kx-cart-qty span {
  font-family: var(--kx-mono);
  font-size: 0.82rem;
  min-width: 1.5rem;
  text-align: center;
}
.kx-cart__summary {
  position: sticky;
  top: 2rem;
  padding: 1.5rem;
  background: var(--kx-surface);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius-lg);
}
.kx-cart__summary h2 { font-size: 1.1rem; margin-bottom: 1.25rem; }
.kx-cart__totals div {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--kx-line);
}
.kx-cart__totals dt { color: var(--kx-ink-soft); }
.kx-cart__totals dd { margin: 0; font-family: var(--kx-mono); }
.kx-cart__total-row {
  margin-top: 0.5rem;
  padding-top: 0.75rem !important;
  border-bottom: none !important;
  font-weight: 600;
}
.kx-cart__total-row dd { color: var(--kx-teal); font-size: 1rem; }
.kx-cart__coupon { margin: 1.25rem 0; }
.kx-cart__coupon label {
  display: block;
  font-family: var(--kx-mono);
  font-size: 0.65rem;
  margin-bottom: 0.4rem;
}
.kx-cart__coupon-row {
  display: flex;
  gap: 0.5rem;
}
.kx-cart__coupon-row input {
  flex: 1;
  padding: 0.55rem 0.75rem;
  background: var(--kx-bg);
  border: 1px solid var(--kx-line);
  border-radius: var(--kx-radius);
}
.kx-cart__coupon-hint {
  font-size: 0.75rem;
  color: var(--kx-ink-muted);
  margin-top: 0.5rem;
}
.kx-cart__checkout { width: 100%; margin-top: 0.5rem; }
.kx-cart__note {
  font-size: 0.72rem;
  color: var(--kx-ink-muted);
  margin-top: 1rem;
  line-height: 1.5;
}

/* Legal */
.kx-legal-head {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--kx-line);
  margin-bottom: 2rem;
}
.kx-legal-updated {
  font-family: var(--kx-mono);
  font-size: 0.72rem;
  color: var(--kx-ink-muted);
}
.kx-legal-body section {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--kx-line);
}
.kx-legal-body section:last-child { border-bottom: none; }
.kx-legal-body h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--kx-teal);
}
.kx-legal-body h3 { font-size: 1rem; margin: 1.25rem 0 0.5rem; }
.kx-legal-body p,
.kx-legal-body li {
  font-size: 0.9rem;
  color: var(--kx-ink-soft);
  line-height: 1.75;
}
.kx-legal-body ul { list-style: disc; padding-left: 1.5rem; margin: 0.75rem 0; }
.kx-legal-body a { color: var(--kx-teal); text-decoration: underline; }

/* Responsive */
@media (max-width: 1100px) {
  .kx-orbit { display: none; }
  .kx-stage__viewport,
  .kx-chronicle__grid,
  .kx-distort,
  .kx-pulse,
  .kx-specrail__panel.is-active { grid-template-columns: 1fr; }
  .kx-product-stage,
  .kx-product-stage--right { margin: 0 auto 4rem; width: calc(100% - 2.5rem); }
  .kx-page-head--split,
  .kx-about-story__grid,
  .kx-contact__split,
  .kx-cart__layout,
  .kx-shop-layout { grid-template-columns: 1fr; }
  .kx-shop-rail { position: static; }
  .kx-shop-flow__steps { grid-template-columns: 1fr 1fr; }
  .kx-rim__grid { grid-template-columns: 1fr; }
  .kx-rim__bands { grid-template-columns: 1fr 1fr; }
  .kx-about-mission__grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .kx-dock { width: calc(100% - 1.25rem); bottom: 0.75rem; }
  .kx-dock__links { display: none; }
  .kx-dock__burger { display: flex; }
  .kx-dock__word small { display: none; }
  .kx-ignition__title { flex-direction: column; }
  .kx-ignition__ticks { flex-wrap: wrap; gap: 1rem; }
  .kx-chronicle__grid { grid-template-columns: 1fr; gap: 2rem; }
  .kx-chronicle__ghost { font-size: 6rem; right: 0; opacity: 0.25; }
  .kx-chronicle__kanji { display: none; }
  .kx-chronicle__quote { transform: none; margin-top: 1.25rem; }
  .kx-chronicle__node.is-active { transform: none; }
  .kx-echo__card { position: relative; width: 100%; margin-bottom: 1rem; transform: none !important; }
  .kx-echo__layers { min-height: auto; }
  .kx-echo__card--a, .kx-echo__card--b, .kx-echo__card--c { top: auto; left: auto; right: auto; }
  .kx-pulse__nums { grid-template-columns: 1fr; }
  .kx-pulse__steps li { grid-template-columns: auto 1fr; }
  .kx-pulse__steps img { display: none; }
  .kx-shop-flow__steps { grid-template-columns: 1fr; }
  .kx-shop-deck { grid-template-columns: 1fr; }
  .kx-about-timeline__rail li { grid-template-columns: 1fr; }
  .kx-about-timeline__rail img { display: none; }
  .kx-rim__bands { grid-template-columns: 1fr; }
  .kx-cart-item { grid-template-columns: 80px 1fr; }
  .kx-cart-qty { grid-column: 1 / -1; justify-content: flex-end; }
  .kx-faq__tabs { flex-direction: column; }
  .kx-specrail__ticks { flex-wrap: wrap; }
  .kx-specrail__tick { flex: 0 0 calc(20% - 0.5rem); }
  .kx-threshold__strip { flex-direction: column; align-items: center; }
}

@media (max-width: 480px) {
  .kx-dock__shell { padding: 0.45rem 0.6rem; gap: 0.5rem; }
  .kx-btn--lg { width: 100%; }
  .kx-threshold__actions { flex-direction: column; }
  .kx-about-cta__actions { flex-direction: column; }
  .kx-ascend { right: 0.75rem; bottom: calc(var(--kx-dock-h) + 1rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kx-reveal { opacity: 1; transform: none; transition: none; }
  .kx-ignition__orbit { animation: none; }
  .kx-stage__scroll-hint { animation: none; }
  .kx-journey { scroll-snap-type: none; }
}