/** Shopify CDN: Minification failed

Line 2074:8 Expected identifier but found whitespace
Line 2074:9 Unexpected "var("
Line 2521:0 Unexpected "}"

**/
/* MERIDIAN — bespoke per-section LP styles */

:root {
  --bg: #FAFAFA;
  --bg-warm: #fafafa;
  --bg-cool: #f5f5f5;
  --ink: #1a1916;
  --ink-soft: #4a4640;
  --mute: #8b8780;
  --line: rgba(26, 25, 22, 0.12);
  --accent: #b48d54;
  --serif: "Noto Serif JP", "Times New Roman", serif;
  --sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
}
body.is-dark {
  --bg: #0c0d10;
  --ink: #f1efe8;
  --ink-soft: #c9c4b8;
  --mute: #7a7770;
  --line: rgba(255, 255, 255, 0.13);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; padding: 0; background: transparent; color: var(--ink); font-family: var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: color 0.6s ease;
}
body.is-dark { background: var(--bg); }

/* ─── global marble surface ─────────────────────────────────────────── */
/* Real DOM elements (#marble-bg, #marble-veins) sit between html's
   fallback color and the WebGL canvas (z:1). They form one continuous
   marble slab visible on every chapter. */
#marble-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 55% 40% at 25% 20%, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 65%),
    radial-gradient(ellipse 60% 45% at 80% 70%, rgba(245,245,245,0.6) 0%, rgba(245,245,245,0) 65%),
    linear-gradient(135deg, #ffffff 0%, #FAFAFA 55%, #f7f7f7 100%);
  pointer-events: none;
  transition: opacity 0.6s ease;
}
body.is-dark #marble-bg { opacity: 0; }

#marble-veins {
  display: none;
}
body.is-dark #marble-veins { opacity: 0; }
body { overflow: hidden; }

#three-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; transition: -webkit-mask-image 400ms ease, mask-image 400ms ease, filter 500ms ease; }
@supports (height: 100dvh) {
  #three-canvas { width: 100dvw; height: 100dvh; }
}

/* FAQ chapter — blur the 3D model behind the text so the copy reads
   without needing an opaque card. Slight desaturation pushes the model
   further back, and a noticeable brightness lift washes the backdrop
   lighter so the text in front sits on a brighter, more legible field. */
/* (FAQ chapter no longer has a 3D model behind it — the canvas is empty
   for that chapter, so no filter override is needed.) */

/* AVAILABLE chapter — soft fade across the upper third so any portion of
   the keyboard that drifts up doesn't crash into the centered headline.
   The fade is gentle: nothing is hard-cut. */
#three-canvas[data-chapter-kind="buy"] {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.6) 45%, #000 60%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.15) 30%, rgba(0,0,0,0.6) 45%, #000 60%);
}

/* ─── mini assembly HUD (bottom-left, fixed) ───────────────────────────── */
#mini-canvas {
  position: fixed;
  left: 32px;
  bottom: 32px;
  width: 220px;
  height: 200px;
  z-index: 18;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}
#mini-hud {
  position: fixed;
  left: 32px;
  bottom: 232px; /* sits just above the canvas */
  width: 220px;
  z-index: 18;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
  font-family: var(--mono);
  color: var(--ink);
  display: flex; flex-direction: column; gap: 6px;
}
.mini-hud__row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.mini-hud__eyebrow {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mute);
}
.mini-hud__count {
  font-size: 10px; letter-spacing: 0.14em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.mini-hud__label {
  font-family: var(--serif), "Noto Serif JP", serif;
  font-size: 22px; line-height: 1; letter-spacing: -0.01em;
  color: var(--ink); font-weight: 500;
  font-style: italic;
}
.mini-hud__dots {
  display: flex; gap: 6px; margin-top: 4px;
}
.mini-hud__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent; border: 1px solid var(--mute);
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.mini-hud__dot.is-on {
  background: var(--ink); border-color: var(--ink);
  transform: scale(1.05);
}
@media (max-width: 900px) {
  #mini-canvas, #mini-hud { display: none; }
}

/* Detail chapters: fade the 3D canvas on the text-column side so the model
   never reads as overlapping the headline / body copy. The fade is wide
   (35% of the viewport) so the dissolve is subtle, not a hard edge. */
#three-canvas[data-mask-side="left"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 22%, #000 45%);
          mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.35) 22%, #000 45%);
}
#three-canvas[data-mask-side="right"] {
  -webkit-mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.35) 22%, #000 45%);
          mask-image: linear-gradient(to left, transparent 0%, rgba(0,0,0,0.35) 22%, #000 45%);
}
#app { position: relative; z-index: 60; pointer-events: none; }
#app a, #app button, #app input, #app .scroller, #app .topbar, #app .progress, #app .markers, #app .annotation, #app .footer, #app .variants, #app .twk-panel, #app .cta { pointer-events: auto; }

/* Tweaks panel — remove the backdrop blur so the 3D model behind it stays sharp */
.twk-panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(250,249,247,0.96) !important; }

.meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.meta--accent { color: var(--ink); }
em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--ink-soft); }
/* Japanese glyphs don't have real italics — synthesizing a slant looks
   sloppy. Keep the color emphasis but drop the slant for any <em> that
   contains JP text. Mark with class="em-ja" or use :lang(ja). */
.em-ja, em:lang(ja) { font-style: normal; font-family: var(--serif), "Noto Serif JP", serif; }

/* topbar */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px; z-index: 20; font-family: var(--sans); font-size: 12px;
  letter-spacing: 0.04em; mix-blend-mode: difference; color: #f1efe8;
}
body.is-dark .topbar { mix-blend-mode: normal; color: var(--ink); }
.topbar__brand { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.topbar__mark { font-size: 16px; }
.topbar__name { letter-spacing: 0.18em; }
.topbar__nav { display: flex; gap: 26px; }
.topbar__nav a { color: inherit; text-decoration: none; opacity: 0.85; cursor: pointer; }
.topbar__nav a:hover { opacity: 1; }
.topbar__cta {
  appearance: none; border: 1px solid currentColor; background: transparent; color: inherit;
  font: inherit; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
}

/* progress rail */
.progress {
  position: fixed; right: 32px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  z-index: 15; font-family: var(--mono); font-size: 10px; color: var(--mute);
}
.progress__track { width: 1px; height: 140px; background: var(--line); position: relative; }
.progress__fill { position: absolute; top: 0; left: -1px; width: 3px; background: var(--ink); transition: height 0.05s linear; }
.progress__num { font-variant-numeric: tabular-nums; letter-spacing: 0.08em; }

/* chapter markers (left side) */
.markers {
  position: fixed; left: 32px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 4px; z-index: 15;
}
.markers__item {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 0; color: var(--mute);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  transition: color 0.2s, padding 0.2s;
}
.markers__dot { width: 14px; height: 1px; background: currentColor; transition: width 0.25s; }
.markers__label { opacity: 0; transform: translateX(-6px); transition: opacity 0.25s, transform 0.25s; white-space: nowrap; }
.markers__item:hover { color: var(--ink); }
.markers__item:hover .markers__dot { width: 22px; }
.markers__item:hover .markers__label { opacity: 1; transform: translateX(0); }
.markers__item.is-active { color: var(--ink); }
.markers__item.is-active .markers__dot { width: 28px; background: var(--ink); }
.markers__item.is-active .markers__label { opacity: 1; transform: translateX(0); }

/* scroller — snap per section */
.scroller {
  position: fixed; inset: 0; overflow-y: scroll; z-index: 5;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
.sec {
  height: 100vh; width: 100%;
  scroll-snap-align: start; scroll-snap-stop: always;
  position: relative;
  display: flex;
  padding: 100px 80px 80px;
}
/* text content must sit above the gradient */
.sec > * { position: relative; z-index: 2; }

/* corners helper */
.sec__corner { position: absolute; display: flex; flex-direction: column; gap: 4px; }
.sec__corner--tl { top: 100px; left: 80px; }
.sec__corner--bl { bottom: 80px; left: 80px; }
.sec__corner--br { bottom: 80px; right: 80px; align-items: flex-end; }
.sec__corner--tr { top: 100px; right: 80px; align-items: flex-end; }

/* ─── 01 hero ─── */
.sec--hero { align-items: center; justify-content: center; }
.hero__center { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.hero__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(48px, 9vw, 160px); line-height: 0.9; letter-spacing: -0.03em;
  margin: 0;
  white-space: nowrap;
}
.hero__title em { color: var(--ink-soft); }
.hero__sub { font-family: var(--sans); font-size: 14px; color: var(--ink-soft); letter-spacing: 0.02em; }

/* ─── 02 features ─── */
.sec--overview {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0 80px 64px;
  position: relative;
}
.sec--overview .features { z-index: 2; }
.features {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
  z-index: 2;
}
.features__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.features__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(56px, 6.4vw, 96px);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 4px 0 2px;
}
.features__lede {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 560px;
}
.features__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.features__grid::before {
  content: '';
  position: absolute;
  inset: 160px -64px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(250,250,250,0.82) 0%,
      rgba(250,250,250,0.72) 38%,
      rgba(250,250,250,0.38) 62%,
      rgba(250,250,250,0) 100%
    );

  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

  pointer-events: none;
  z-index: 0;
}
.feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 32px 32px 0;
  margin: 0;
  position: relative;
}
.feature + .feature {
  padding-left: 32px;
  border-left: 1px solid var(--line);
}
.feature__num {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--mute);
}
.feature__en {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
}
.feature__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 2px 0 4px;
}
.feature__lede {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 6px;
}
.feature__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.feature__list li {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.feature__list li:first-child {
  border-top: none;
  padding-top: 6px;
}
.feature__catch {
  font-family: var(--serif);
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.35;
  color: var(--accent);
  margin: 18px 0 0;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.features__foot {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: right;
}
/* ─── 03 structure ─── */
.sec--structure {
  flex-direction: row; align-items: stretch; justify-content: space-between;
  padding: 100px 80px 80px;
  position: relative;
}
.sec--structure .structure__head { z-index: 2; }
.structure__head {
  align-self: flex-end;
  max-width: 320px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 2;
}
.structure__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 4.4vw, 64px); line-height: 0.98; letter-spacing: -0.02em;
  margin: 4px 0; text-wrap: pretty;
}
.structure__lede {
  font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 280px;
}
/* annotation overlay — labels track the 3D layer positions */
.layers-anno {
  position: absolute; inset: 0; pointer-events: none;
}
.anno {
  position: absolute; left: 0; top: 0;
  transform: translate(0, -50%);
  font-family: var(--sans);
  animation: annoIn 320ms ease both;
}
@keyframes annoIn {
  from { opacity: 0; transform: translate(-6px, -50%); }
  to   { opacity: 1; transform: translate(0, -50%); }
}
.anno__dot {
  position: absolute; left: 0; top: 0;
  width: 7px; height: 7px;
  background: var(--ink); border: 1.5px solid var(--bg);
  transform: translate(-50%, -50%);
}
.anno__line {
  position: absolute; left: 0; top: 0;
  width: 80px; height: 1px; background: var(--ink); opacity: 0.6;
}
.anno__card {
  position: absolute; left: 88px; top: 0;
  transform: translateY(-50%);
  background: transparent; padding: 0; min-width: 180px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  align-items: baseline;
}
.anno__n {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--mute);
  grid-row: 1 / span 2;
  align-self: center;
}
.anno__en {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink);
}
.anno__ja { display: none; }
.anno__desc {
  font-family: var(--sans); font-size: 11px; color: var(--ink-soft); margin-top: 2px;
  white-space: nowrap;
}

/* Text-local gradients — fade only behind each text block, not the whole section.
   Each container gets a gradient on the side it sits (bottom/left/right) so the
   3D model remains visible in the open space. */

/* 01 HERO — center block: bottom-of-section fade */
.hero__center {
  position: relative;
}
.hero__center::before {
  content: '';
  position: absolute;
  inset: -18px -28px;

  background: radial-gradient(
    ellipse 52% 58% at 50% 72%,
    rgba(255,255,255,0.98) 0%,
    rgba(255,255,255,0.92) 22%,
    rgba(255,255,255,0.72) 42%,
    rgba(255,255,255,0.28) 60%,
    rgba(255,255,255,0) 74%
  );

  filter: blur(8px);

  pointer-events: none;
  z-index: -1;
}

/* 02 FEATURES — container at bottom: gradient fades up from bottom */
.features {
  position: relative;
}
.features::before {
  content: '';
  position: absolute;
  inset: -60px -80px 0;
  background: linear-gradient(to bottom, transparent 0%, var(--bg) 55%);
  pointer-events: none;
  z-index: -1;
}

/* 03 STRUCTURE — head at bottom-left: fade from bottom */
.structure__head {
  position: relative;
}
.structure__head::before {
  content: '';
  position: absolute;
  inset: -40px -48px;
  background: radial-gradient(ellipse 120% 150% at 30% 100%, var(--bg) 30%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}

/* 04-07 DETAIL — text column: fade toward model side */
.detail__col {
  position: relative;
}
.detail__col::before {
  content: '';
  position: absolute;
  inset: -40px -64px;
  background: radial-gradient(ellipse 110% 120% at 50% 50%, var(--bg) 35%, transparent 75%);
  pointer-events: none;
  z-index: -1;
}
.sec__h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 5vw, 76px); line-height: 0.96; letter-spacing: -0.02em; margin: 12px 0 14px;
  text-wrap: pretty;
}
.sec__h2--big { font-size: clamp(64px, 8vw, 120px); text-align: center; }
.sec__lede { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 460px; }
.sec__lede--center { text-align: center; max-width: 480px; margin: 8px auto 0; }
.sec__center { margin: auto; text-align: center; }

.stack { list-style: none; margin: 0; padding: 0; max-width: 540px; border-top: 1px solid var(--line); }
.stack__row {
  display: grid; grid-template-columns: 56px 1fr 1fr; gap: 24px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  transition: padding-left 0.3s;
}
.stack__row:hover { padding-left: 8px; }
.stack__n { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: 0.1em; }
.stack__k { font-family: var(--sans); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.stack__ja { font-family: var(--serif); font-size: 22px; color: var(--ink-soft); }

/* ─── detail (case / pcba / switches / caps) ─── */
.sec--detail { align-items: center; }
.sec--detail.sec--side-left  { justify-content: flex-start; }
.sec--detail.sec--side-right { justify-content: flex-end; }
.detail__col {
  max-width: 460px;
  display: flex; flex-direction: column; gap: 18px;
}
.detail__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4vw, 64px); line-height: 0.94; letter-spacing: -0.02em; margin: 4px 0 6px;
  white-space: nowrap;
}
.detail__body { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; max-width: 420px; }

.callouts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 32px;
  margin: 16px 0 0; padding: 0;
}
.callout { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 10px; margin: 0; }
.callout dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.callout dd { margin: 0; font-size: 13px; color: var(--ink); line-height: 1.4; }

/* 06 KEYCAPS — callouts stacked vertically (single column) */
.sec--detail-caps .callouts { grid-template-columns: 1fr; gap: 14px; }

/* faint giant background type — placed on the SAME side as the text column
   (away from the 3D model) so it never overlaps the model and creates the
   see-through bug. */
.detail__big {
  position: absolute;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(180px, 22vw, 360px); line-height: 0.9; letter-spacing: -0.04em;
  color: var(--ink); opacity: 0.06;
  pointer-events: none; user-select: none;
  bottom: 4vh;
}
.sec--side-left  .detail__big { left: 4vw;  right: auto; }
.sec--side-right .detail__big { right: 4vw; left:  auto; }

/* ─── 07 voices — E3 Index + Cards. Apple/Linear/Arc-style. ─── */
.sec--voices {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 0;
  padding: 72px 0 56px 0;
  overflow: hidden;
  background: transparent;
}

/* ── B + C + D entry animation — initial state (before is-in) ─────────── */
/* D · whole-section focus: blur + slight scale, releases on is-in */
.sec--voices {
  filter: blur(10px);
  transform: scale(1.04);
  opacity: 0;
  transition:
    filter 1.1s cubic-bezier(.22,.61,.36,1),
    transform 1.1s cubic-bezier(.22,.61,.36,1),
    opacity .9s ease-out;
}
.sec--voices.is-in {
  filter: blur(0);
  transform: scale(1);
  opacity: 1;
}

/* C · index column slides up, title rises, rows drop in one by one */
.voices__meta,
.voices__title,
.voices__indexFoot {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease-out, transform .9s cubic-bezier(.22,.61,.36,1);
}
.sec--voices.is-in .voices__meta { transition-delay: .15s; opacity: 1; transform: none; }
.sec--voices.is-in .voices__title { transition-delay: .25s; opacity: 1; transform: none; }
.sec--voices.is-in .voices__indexFoot { transition-delay: .9s; opacity: 1; transform: none; }

/* C · row slide-in, staggered top→bottom */
.voices__row {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .55s ease-out,
    transform .65s cubic-bezier(.22,.61,.36,1),
    color .3s ease;
}
.sec--voices.is-in .voices__row {
  opacity: 1;
  transform: none;
  transition-delay: calc(.45s + var(--row-i, 0) * .07s);
}
/* keep color transition snappy after entry (override the long one above) */
.sec--voices.is-in .voices__row { transition: color .3s ease, opacity .55s ease-out, transform .65s cubic-bezier(.22,.61,.36,1); }

/* B · cards fly in from depth, center first then sides */
.sec--voices:not(.is-in) .voice-card {
  opacity: 0;
  transform: translateY(40px) scale(.88);
  filter: blur(6px);
}
.sec--voices.is-in .voice-card {
  transition:
    opacity .85s ease-out,
    transform .95s cubic-bezier(.22,.61,.36,1),
    filter .85s ease-out,
    box-shadow .6s cubic-bezier(.22,.61,.36,1);
}
.sec--voices.is-in .voice-card { transition-delay: .68s; } /* side cards */
.sec--voices.is-in .voice-card.is-center { transition-delay: .5s; }
.voices__index {
  padding: 0 24px 0 64px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.voices__meta {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mute, #9a958a);
  margin-bottom: 14px;
}
.voices__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4vw, 64px);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 4px 0 6px;
  white-space: nowrap;
  color: var(--ink);
}
.voices__title em { font-style: italic; color: inherit; }

.voices__list {
  border-top: 1px solid var(--line, rgba(26,25,22,.08));
}
.voices__row {
  display: grid; grid-template-columns: 28px 1fr 16px;
  gap: 14px; align-items: center;
  width: 100%;
  padding: 16px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line, rgba(26,25,22,.08));
  text-align: left;
  cursor: pointer;
  color: var(--mute, #9a958a);
  transition: color .3s ease;
  font: inherit;
}
.voices__row.is-on { color: var(--ink, #1a1916); }
.voices__rowIdx {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.1em;
}
.voices__rowName {
  font-family: var(--sans, -apple-system, 'SF Pro Display', 'Inter', sans-serif);
  font-size: 14px; font-weight: 500; letter-spacing: -0.005em;
}
.voices__rowRule {
  display: inline-block;
  width: 4px; height: 1px;
  background: currentColor;
  transition: width .35s ease;
}
.voices__row.is-on .voices__rowRule { width: 16px; }

.voices__indexFoot {
  margin-top: auto;
  padding-top: 24px; padding-right: 16px;
  border-top: 1px solid rgba(26,25,22,.08);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--mute, #bcb6a8);
  display: flex; flex-direction: column; gap: 6px;
}

/* RIGHT — cards stage */
.voices__stage {
  position: relative;
  overflow: hidden;
  min-width: 0;
  display: flex; flex-direction: column;
  touch-action: pan-y; /* let vertical page scroll, we own horizontal */
  cursor: grab;
}
.voices__stage:active { cursor: grabbing; }
.voices__cards {
  position: relative;
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 24px;
  padding: 0 64px 0 32px;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  user-select: none;
  -webkit-user-select: none;
}

/* ─────────────────────────────────────────────────────────────────
   Voices · pager variants (5)
   All variants live in `.voices__pagerSlot` at bottom of stage.
   Shared layout: padding-x matches stage rail, generous bottom space.
   ───────────────────────────────────────────────────────────────── */

.voices__pagerSlot {
  padding: 18px 64px 12px 32px;
  margin-top: 8px;
  min-height: 110px;
  display: flex;
  align-items: flex-end;
}

/* shared: smooth font + tabular numerals */
.vp { width: 100%; font-feature-settings: "tnum", "lnum"; font-variant-numeric: tabular-nums lining-nums; }

/* ── A · COUNTER ─────────────────────────────────────────────── */
.vp-counter {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: end;
  gap: 12px;
}
.vp-counter__now {
  font-family: var(--serif, 'Spectral', Georgia, serif);
  font-size: clamp(64px, 7.2vw, 108px);
  line-height: 0.85; font-weight: 300; letter-spacing: -0.02em;
  color: var(--ink, #1a1916); min-width: 1.2ch;
}
.vp-counter__div {
  font-family: var(--serif, 'Spectral', Georgia, serif);
  font-size: clamp(40px, 4.5vw, 64px); line-height: 1; font-weight: 200;
  color: rgba(26,25,22,.32); padding-bottom: 10px;
}
.vp-counter__all {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em;
  color: var(--mute, #9a958a); padding-bottom: 18px;
}
.vp-counter__progress {
  align-self: end; height: 1px;
  background: rgba(26,25,22,.12);
  position: relative; overflow: hidden;
  margin: 0 0 24px 8px;
}
.vp-counter__fill {
  position: absolute; inset: 0; background: var(--ink, #1a1916);
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}
.vp-counter__arrows {
  display: flex; align-self: end; padding-bottom: 14px;
  border-bottom: 1px solid rgba(26,25,22,.12);
}
.vp-counter__arrows button {
  appearance: none; background: transparent; border: none;
  padding: 10px 14px; cursor: pointer; color: var(--ink, #1a1916);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .55; transition: opacity .2s ease;
}
.vp-counter__arrows button:first-child { border-right: 1px solid rgba(26,25,22,.12); }
.vp-counter__arrows button:hover { opacity: 1; }
.vp-counter__arrows svg { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.vp-counter__arrows button:first-child:hover svg { transform: translateX(-3px); }
.vp-counter__arrows button:last-child:hover svg { transform: translateX(3px); }

/* ── B · TRACK ───────────────────────────────────────────────── */
.vp-track {
  display: flex; align-items: center; gap: 18px;
  padding-bottom: 18px;
}
.vp-track__nav {
  appearance: none; background: transparent; border: none;
  padding: 6px 4px; cursor: pointer;
  font: inherit; font-family: var(--mono);
  font-size: 13px; color: var(--mute, #9a958a);
  transition: color .2s ease, transform .25s cubic-bezier(.22,.61,.36,1);
}
.vp-track__nav:hover { color: var(--ink, #1a1916); }
.vp-track__nav--prev:hover { transform: translateX(-3px); }
.vp-track__nav--next:hover { transform: translateX(3px); }
.vp-track__rail {
  flex: 1 1 auto; display: flex; gap: 14px;
}
.vp-track__tick {
  flex: 1 1 0; min-width: 0; height: 28px;
  appearance: none; background: transparent; border: none; padding: 0;
  cursor: pointer; position: relative;
  display: flex; align-items: center;
}
.vp-track__tick::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(26,25,22,.14); transform: translateY(-50%);
  transition: height .25s ease, background .25s ease;
}
.vp-track__tick:hover::before { height: 2px; background: rgba(26,25,22,.32); }
.vp-track__tick.is-past::before { background: rgba(26,25,22,.5); }
.vp-track__tick.is-on::before { height: 2px; background: rgba(26,25,22,.18); }
.vp-track__tickFill {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; background: var(--ink, #1a1916);
  transform: scaleX(0); transform-origin: left center;
  translate: 0 -50%; will-change: transform;
}

/* ── C · FLIP ────────────────────────────────────────────────── */
.vp-flip {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px; padding-bottom: 16px;
}
.vp-flip__nav {
  appearance: none; background: transparent; border: none;
  padding: 8px 0; cursor: pointer;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em;
  color: rgba(26,25,22,.45); position: relative;
  transition: color .25s ease;
}
.vp-flip__nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--ink, #1a1916);
  transform: scaleX(.18); transform-origin: left center;
  transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.vp-flip__nav--next::after { transform-origin: right center; }
.vp-flip__nav:hover { color: var(--ink, #1a1916); }
.vp-flip__nav:hover::after { transform: scaleX(1); }
.vp-flip__core {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: end; gap: 18px;
}
.vp-flip__num, .vp-flip__name {
  position: relative; overflow: hidden;
  height: 1.05em;
}
.vp-flip__num {
  font-family: var(--serif, 'Spectral', Georgia, serif);
  font-size: clamp(56px, 6vw, 88px); line-height: 1;
  font-weight: 300; letter-spacing: -0.02em;
  color: var(--ink, #1a1916);
  height: 1em;
}
.vp-flip__num span {
  display: inline-block;
  animation: vp-flip-in .6s cubic-bezier(.22,.61,.36,1) both;
}
.vp-flip__name {
  font-family: var(--sans); font-size: 13px;
  font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink, #1a1916);
  padding-bottom: 8px;
}
.vp-flip__name span {
  display: inline-block;
  animation: vp-flip-in .55s cubic-bezier(.22,.61,.36,1) both .04s;
}
.vp-flip__name em {
  font-style: normal; color: var(--mute, #9a958a);
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; margin-left: 8px;
}
@keyframes vp-flip-in {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.vp-flip__bar {
  align-self: end; height: 1px;
  background: rgba(26,25,22,.12);
  position: relative; overflow: hidden; margin-bottom: 22px;
}
.vp-flip__barFill {
  position: absolute; inset: 0; background: var(--ink, #1a1916);
  transform: scaleX(0); transform-origin: left center; will-change: transform;
}

/* ── D · SPLIT ───────────────────────────────────────────────── */
.vp-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch; gap: 0;
  padding-bottom: 14px;
}
.vp-split__side {
  appearance: none; background: transparent; border: none;
  padding: 4px 18px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  transition: opacity .3s ease;
}
.vp-split__side--now { padding-left: 0; }
.vp-split__side--next {
  text-align: right; align-items: flex-end;
  padding-right: 0; opacity: .42;
}
.vp-split__side--next:hover { opacity: .9; }
.vp-split__caption {
  font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.24em; color: var(--mute, #9a958a);
}
.vp-split__name {
  font-family: var(--serif, 'Spectral', Georgia, serif);
  font-size: clamp(28px, 3vw, 44px); line-height: 1;
  font-weight: 300; letter-spacing: -0.01em;
  color: var(--ink, #1a1916);
  display: inline-block;
  animation: vp-flip-in .6s cubic-bezier(.22,.61,.36,1) both;
}
.vp-split__role {
  font-family: var(--sans); font-size: 11px;
  color: var(--mute, #9a958a);
}
.vp-split__divider {
  width: 1px; align-self: stretch;
  background: rgba(26,25,22,.14);
  position: relative; margin: 0 32px; overflow: hidden;
}
.vp-split__progress {
  position: absolute; inset: 0;
  background: var(--ink, #1a1916);
  transform: scaleY(0); transform-origin: top center;
  will-change: transform;
}

/* ── E · GLYPH ───────────────────────────────────────────────── */
.vp-glyph {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end; gap: 24px;
  padding-bottom: 18px;
}
.vp-glyph__label {
  font-family: var(--serif, 'Spectral', Georgia, serif);
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1;
  font-weight: 400; letter-spacing: -0.01em;
  color: var(--ink, #1a1916);
  display: inline-block;
  animation: vp-flip-in .55s cubic-bezier(.22,.61,.36,1) both;
}
.vp-glyph__label em {
  font-style: normal; font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--mute, #9a958a); margin-left: 8px;
}
.vp-glyph__row {
  display: flex; gap: 10px; align-items: flex-end;
  padding-bottom: 6px;
}
.vp-glyph__bar {
  appearance: none; background: transparent; border: none; padding: 0;
  width: 2px; height: 18px; cursor: pointer;
  position: relative; overflow: hidden;
  transition: height .35s cubic-bezier(.22,.61,.36,1), width .25s ease;
}
.vp-glyph__bar::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(26,25,22,.18);
}
.vp-glyph__bar:hover { height: 26px; }
.vp-glyph__bar:hover::before { background: rgba(26,25,22,.5); }
.vp-glyph__bar.is-on {
  width: 3px; height: 38px;
}
.vp-glyph__bar.is-on::before { background: rgba(26,25,22,.18); }
.vp-glyph__fill {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  background: var(--ink, #1a1916);
  transform: scaleY(0); transform-origin: bottom center;
  will-change: transform;
}
.vp-glyph__count {
  justify-self: end;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.18em; color: var(--mute, #9a958a);
}

/* dark theme tweaks */
body.is-dark .vp-counter__progress,
body.is-dark .vp-flip__bar,
body.is-dark .vp-split__divider,
body.is-dark .vp-track__tick::before { background: rgba(255,255,255,.14); }
body.is-dark .vp-counter__fill,
body.is-dark .vp-flip__barFill,
body.is-dark .vp-split__progress,
body.is-dark .vp-track__tickFill,
body.is-dark .vp-glyph__fill { background: rgba(255,255,255,.92); }
body.is-dark .vp-counter__arrows,
body.is-dark .vp-counter__arrows button:first-child { border-color: rgba(255,255,255,.14); }
body.is-dark .vp-glyph__bar::before { background: rgba(255,255,255,.18); }
body.is-dark .vp-glyph__bar.is-on::before { background: rgba(255,255,255,.18); }
.voices__edgeFade {
  position: absolute; top: 0; right: 0;
  width: 64px; height: 100%;
  pointer-events: none;
  background: linear-gradient(270deg, var(--bg-cool) 0%, rgba(226,223,210,0) 100%);
  z-index: 2;
}

/* card */
.voice-card {
  flex: 0 0 300px;
  height: 440px;
  background: #ffffff;
  border: 1px solid rgba(26,25,22,.12);
  border-radius: 18px;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 10px 30px -16px rgba(20,18,14,.15);
  display: flex; flex-direction: column;
  opacity: 0.78;
  transform: scale(.96);
  transition: all .6s cubic-bezier(.22,.61,.36,1);
  overflow: hidden;
}
.voice-card.is-center {
  flex: 0 0 400px;
  height: 520px;  padding: 26px;
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 30px 70px -30px rgba(20,18,14,.28);
}
.voice-card__photo {
  aspect-ratio: 13 / 10;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1916;
  margin-bottom: 16px;
  flex: 0 0 auto;
}
.voice-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center top;
  display: block;
  filter: contrast(1.02);
}
.voice-card__meta {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.2em;
  color: var(--mute, #bcb6a8);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.voice-card__quote {
  font-family: var(--sans, -apple-system, 'SF Pro Display', 'Inter', sans-serif);
  font-size: 15px; line-height: 1.5; font-weight: 500;
  letter-spacing: -0.008em;
  margin: 0 0 16px;
  flex: 1 1 auto;
  color: var(--ink, #1a1916);
  text-wrap: pretty;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
}
.voice-card.is-center .voice-card__quote {
  font-size: 21px;
  line-height: 1.45;
  -webkit-line-clamp: 6;
}

/* side cards: clickable to step prev/next */
.voice-card--side { cursor: pointer; }
.voice-card--side:hover {
  /* gentle lift on hover, but the side scale is set elsewhere via slot */
  filter: brightness(1.02);
}

.voice-card__foot {
  border-top: 1px solid rgba(26,25,22,.08);
  padding-top: 12px;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.voice-card__name {
  font-family: var(--sans, -apple-system, 'SF Pro Display', 'Inter', sans-serif);
  font-size: 16px; font-weight: 600;
  font-style: normal; letter-spacing: -0.005em;
  color: var(--ink);
  text-transform: none;
}
.voice-card.is-center .voice-card__name { font-size: 19px; letter-spacing: -0.01em; }
.voice-card__role {
  font-family: var(--sans, -apple-system, 'SF Pro Display', 'Inter', sans-serif);
  font-size: 12px;
  color: var(--mute, #9a958a);
  margin-top: 4px;
  text-transform: none; letter-spacing: 0;
}
.voice-card.is-center .voice-card__role { font-size: 13px; margin-top: 5px; }
.voice-card__stars {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.05em;
  color: var(--mute, #bcb6a8);
  white-space: nowrap;
}

/* dark-mode polish */
body.is-dark .sec--voices {
  background: linear-gradient(180deg, #1a1916 0%, #14130f 100%);
}
body.is-dark .voice-card {
  background: #1f1d18;
  border-color: rgba(255,255,255,.10);
}
body.is-dark .voice-card__photo { background: #0f0e0b; }
body.is-dark .voice-card__foot,
body.is-dark .voices__row,
body.is-dark .voices__list { border-color: rgba(255,255,255,.08); }
body.is-dark .voices__edgeFade {
  background: linear-gradient(270deg, #14130f 0%, rgba(20,19,15,0) 100%);
}

/* ─── 07g BUY ─── */
.sec--buy {
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  gap: 28px;
  /* Bottom-bias the copy block so headline + price + button sit in the
     lower half of the viewport. The 3D model in chapter 9 is also
     positioned even lower so it floats just above the copy block as a
     subtle product silhouette. */
  padding: 80px 80px 120px;
}
.buy__head {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 620px;
}
.buy__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5vw, 72px); line-height: 0.96; letter-spacing: -0.02em;
  margin: 0; text-wrap: pretty;
}
.buy__lede {
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
  margin: 0; max-width: 480px;
}
.buy__price {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 18px 32px;
}
.buy__priceValue {
  font-family: var(--serif); font-size: clamp(32px, 3.5vw, 52px);
  letter-spacing: 0.01em;
}
.buy__row {
  display: flex;
  justify-content: center;
  gap: 12px;
}

@media (max-width: 900px) {
  .sec--voices { grid-template-columns: 320px 1fr; }
  .voices__index { padding-left: 32px; }
  .voice-card { flex-basis: 260px; height: 400px; }
  .voice-card.is-center { flex-basis: 340px; height: 470px; }
}

.buy-btn {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 28px;
  min-width: 220px;
  max-width: 280px;
  border: 1px solid rgba(0,0,0,0.18);
  background: #FAFAFA;
  color: var(--ink);
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.buy-btn:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.4); }
.buy-btn--primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.buy-btn--primary:hover { background: var(--ink); color: var(--bg); transform: translateY(-1px); }
.buy-btn__label { font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
.buy-btn__host { font-size: 10.5px; opacity: 0.7; letter-spacing: 0.04em; text-transform: uppercase; }

/* ─── 08 faq ─── */
.sec--spec {
  align-items: stretch; justify-content: center;
  gap: 0;
  padding-top: 120px; padding-bottom: 80px;
  overflow: hidden;
}
.spec__col {
  flex: 1; max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 14px;
  height: calc(100vh - 200px);
  overflow-y: auto;
  /* Text-priority paper card. The blurred 3D model behind sits low in
     contrast; this card lifts the FAQ copy onto a clearly legible
     surface without going fully opaque — you can still feel the model
     ghosted behind. Soft drop shadow gives it a subtle "floating
     document" feel. */
  background: rgba(255, 255, 255, 0.68);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(6px) saturate(1.05);
  -webkit-backdrop-filter: blur(6px) saturate(1.05);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 36px 10px 36px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 18px 50px -22px rgba(20, 16, 8, 0.18),
    0 2px 6px rgba(20, 16, 8, 0.04);
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.spec__col::-webkit-scrollbar { width: 4px; }
.spec__col::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

/* FAQ accordion */
.faq {
  list-style: none; margin: 18px 0 0; padding: 0;
  border-top: 1px solid var(--line);
}
.faq__section-head {
  list-style: none;
  font-family: var(--serif), "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--ink);
  padding: 36px 0 14px;
  border-bottom: 1px solid var(--line);
}
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  width: 100%; padding: 18px 0;
  display: grid; grid-template-columns: 32px 1fr 20px; gap: 16px; align-items: baseline;
  text-align: left; color: var(--ink); font: inherit;
  transition: padding-left 0.3s ease;
}
.faq__q:hover { padding-left: 6px; }
.faq__item.is-open .faq__q { padding-left: 6px; }
.faq__n {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--mute);
}
.faq__qText { display: flex; flex-direction: column; gap: 3px; }
.faq__qJa {
  font-family: var(--serif), "Noto Serif JP", serif;
  font-size: 19px; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink);
  font-weight: 500;
}
.faq__qEn {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em;
  color: var(--mute);
}
.faq__chev {
  font-family: var(--serif); font-size: 22px; line-height: 1;
  color: var(--ink-soft); justify-self: end;
  transition: transform 0.3s ease, color 0.3s ease;
}
.faq__item.is-open .faq__chev { color: var(--accent); }
.faq__a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(.22,.61,.36,1);
  visibility: hidden;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; visibility: visible; }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > p {
  overflow: hidden; min-height: 0;
  margin: 0; padding: 0 0 22px 48px;
  font-size: 13.5px; line-height: 1.65; color: var(--ink-soft);
  max-width: 460px; text-wrap: pretty;
}

/* spec footer */
.specFoot {
  margin-top: 36px; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 10px;
}
.specFoot__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.specFoot__link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.specFoot__link:hover { color: var(--accent); border-color: var(--accent); }

.cta {
  appearance: none; border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 14px 22px; border-radius: 999px; cursor: pointer; transition: opacity 0.2s;
}
.cta:hover { opacity: 0.85; }

/* variants */
.variants { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.variant {
  display: flex; align-items: center; gap: 14px;
  appearance: none; border: 0; background: transparent; padding: 12px 0;
  border-bottom: 1px solid var(--line); cursor: pointer;
  color: var(--ink); font-family: var(--sans); font-size: 13px; text-align: left;
  transition: padding 0.3s ease;
}
.variant:hover { padding-left: 8px; }
.variant.is-active { padding-left: 12px; }
.variant.is-active::after { content: "●"; margin-left: auto; color: var(--accent); font-size: 8px; }
.variant__swatch { width: 28px; height: 28px; border-radius: 50%; border: 0.5px solid var(--line); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.variant__label { flex: 1; }

/* annotation */
.annotation { position: fixed; pointer-events: none; z-index: 30; transform: translate(-50%, -50%); font-family: var(--sans); }
.annotation__dot { position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid var(--bg); transform: translate(-50%, -50%); box-shadow: 0 0 0 1px var(--ink); }
.annotation__line { position: absolute; left: 0; top: 0; width: 60px; height: 1px; background: var(--ink); transform-origin: 0 0; }
.annotation__card { position: absolute; left: 70px; top: -34px; background: var(--bg); border: 1px solid var(--line); padding: 10px 14px; min-width: 200px; white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,0.06); }
.annotation__en { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; color: var(--mute); }
.annotation__ja { font-family: var(--serif); font-size: 22px; font-weight: 500; color: var(--ink); margin-top: 2px; }
.annotation__desc { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }

/* footer */
.footer { height: auto; min-height: 40vh; padding: 60px 80px; display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; border-top: 1px solid var(--line); scroll-snap-align: end; }
.footer__col { display: flex; flex-direction: column; gap: 12px; }
.footer__mark { font-family: var(--serif); font-size: 22px; letter-spacing: 0.04em; }
.footer__small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.footer__email { display: flex; gap: 0; border-bottom: 1px solid var(--ink); }
.footer__email input { appearance: none; border: 0; background: transparent; font: inherit; padding: 8px 0; min-width: 240px; color: var(--ink); outline: none; }
.footer__email button { appearance: none; border: 0; background: transparent; color: var(--ink); cursor: pointer; padding: 0 8px; font-size: 16px; }

/* responsive */
@media (max-width: 900px) {
  .sec { padding: 80px 24px 60px; }
  .sec__corner--tl, .sec__corner--bl { left: 24px; }
  .sec__corner--br, .sec__corner--tr { right: 24px; }
  .sec__corner--bl, .sec__corner--br { bottom: 24px; }
  .topbar { padding: 16px 20px; }
  .topbar__nav { display: none; }
  .markers { display: none; }
  .progress { right: 16px; }
  .callouts { grid-template-columns: 1fr; }
  .sec--spec { flex-direction: column; gap: 32px; align-items: stretch; padding-top: 80px; padding-bottom: 60px; overflow: visible; }
  .spec__col { height: auto; max-width: none; padding-right: 0; overflow-y: visible; }
  .footer { padding: 40px 24px; flex-direction: column; align-items: stretch; }
}

/* ─── 08 CUSTOM ─── */
.sec--custom {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 28px;
  padding: 88px 64px 56px;
}
.custom__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.custom__headLeft { display: flex; flex-direction: column; gap: 10px; }
.custom__title {
  font-family: var(--serif);
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.95; letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0;
  color: var(--accent);
}
.custom__title em { font-style: italic; color: var(--accent); }
.custom__viewAll {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
  border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.custom__viewAll:hover { color: var(--ink); border-color: var(--ink); }

.custom__grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: stretch;
}

/* feature card (left) */
.custom-feat {
  position: relative;
  background: #14130f;
  color: #f1efe8;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 480px;
}
.custom-feat__art {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 28px 16px;
  background: linear-gradient(180deg, #1c1b17 0%, #0e0d0a 100%);
}
.custom-feat__body {
  padding: 18px 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
  background: #0e0d0a;
}
.custom-feat__body .meta { color: #a89870; }
.custom-feat__title {
  font-family: var(--serif);
  font-size: 26px; line-height: 1.05; letter-spacing: -0.01em;
  font-weight: 400; color: #efc35a;
  margin: 0;
}
.custom-feat__title em { color: #efc35a; }
.custom-feat__lede {
  font-size: 12.5px; line-height: 1.55; color: rgba(241,239,232,0.72);
  margin: 0;
}
.custom-feat__lede em { color: #efc35a; font-style: italic; }
.custom-feat__cta {
  margin-top: 6px;
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(241,239,232,0.06);
  border: 1px solid rgba(241,239,232,0.16);
  color: #f1efe8;
  font-size: 12px; letter-spacing: 0.04em;
  padding: 10px 18px; border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}
.custom-feat__cta:hover { background: rgba(241,239,232,0.12); border-color: rgba(241,239,232,0.32); }
.custom-feat__arrow { font-size: 13px; }

/* product cards (right) */
.custom-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.custom-card {
  position: relative;
  background: var(--bg);
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
}
.custom-card__badge {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ink); color: var(--bg);
  padding: 4px 8px;
}
.custom-card__art {
  position: relative;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse at 50% 60%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(135deg, #f3efe6 0%, #e2dccd 100%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.custom-card__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  appearance: none; border: 0;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--ink);
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0;
  transition: opacity 0.2s, background 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.custom-card__nav--prev { left: 8px; }
.custom-card__nav--next { right: 8px; }
.custom-card:hover .custom-card__nav { opacity: 1; }
.custom-card__nav:hover { background: #fff; }

.custom-card__meta {
  padding: 14px 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.custom-card__shop {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute);
}
.custom-card__name {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em; line-height: 1.35;
  color: var(--ink);
  text-transform: uppercase;
}
.custom-card__priceRow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 4px;
}
.custom-card__price {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.custom-card__ja {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink-soft);
}
.custom-card__stock {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}
.custom-card__stockDot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6b8b4d;
}
.custom-card__stock--low { color: #b8651e; }
.custom-card__stock--low .custom-card__stockDot { background: #d68a3a; }

/* CSS-painted keyboard silhouette */
.kbs {
  width: 88%;
  aspect-ratio: 14 / 5.5;
  border-radius: 8px;
  padding: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 18px 30px -16px rgba(0,0,0,0.45);
  position: relative;
}
.kbs__plate {
  width: 100%; height: 100%;
  border-radius: 4px;
  padding: 4px;
  display: flex; align-items: center;
}
.kbs__grid {
  width: 100%;
  display: grid;
  gap: 2.2px;
  grid-auto-rows: 1fr;
  grid-template-rows: repeat(5, 1fr);
}
.kbs__cap {
  border-radius: 2px;
  aspect-ratio: 1 / 1;
  box-shadow:
    inset 0 -0.5px 0 rgba(0,0,0,0.18),
    inset 0 0.5px 0 rgba(255,255,255,0.18);
}
.kbs__cap--space { aspect-ratio: 6 / 1; }
.kbs__cap--mod { aspect-ratio: 1 / 1; opacity: 0.7; }
.kbs__usb {
  position: absolute; top: -2px; left: 50%;
  width: 10px; height: 4px;
  background: rgba(0,0,0,0.4);
  border-radius: 0 0 2px 2px;
  transform: translateX(-50%);
}

@media (max-width: 1100px) {
  .sec--custom { padding: 80px 36px 48px; }
  .custom__grid { grid-template-columns: 1fr; }
  .custom-feat { min-height: 380px; }
  .custom-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sec--custom { padding: 64px 20px 40px; }
  .custom-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ─── 08 CUSTOM — Variant A: CONFIGURATOR ─── */
.sec--customA {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 28px;
  padding: 80px 64px 56px;
}
.cfg__head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: end;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.cfg__num {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(120px, 14vw, 220px); line-height: 0.85;
  color: var(--ink); letter-spacing: -0.04em;
  margin-bottom: -10px;
}
.cfg__heading { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; }
.cfg__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 1; letter-spacing: -0.02em;
  margin: 0; color: var(--ink);
}
.cfg__title em { font-style: italic; color: var(--accent); }
.cfg__lede { font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 540px; }
.cfg__lede em { font-style: italic; color: var(--ink-soft); }

.cfg__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.cfg__slot { display: flex; flex-direction: column; gap: 12px; }
.cfg__slotHead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.cfg__slotN { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute); }
.cfg__slotName { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.cfg__slotJa { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--ink-soft); }

.cfg__opts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cfg__opt {
  appearance: none; border: 1px solid var(--line); background: transparent;
  width: 100%; padding: 12px 14px;
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 12px;
  cursor: pointer; text-align: left;
  transition: border-color 0.2s, background 0.2s, padding 0.2s;
  font: inherit;
}
.cfg__opt:hover { border-color: rgba(26,25,22,0.32); padding-left: 16px; }
.cfg__opt.is-on {
  border-color: var(--ink);
  background: rgba(26,25,22,0.04);
}
.cfg__sw {
  width: 14px; height: 14px; border-radius: 50%;
  border: 0.5px solid rgba(0,0,0,0.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.cfg__optBody { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg__optLabel { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--ink); letter-spacing: -0.005em; }
.cfg__optSub { font-family: var(--mono); font-size: 10.5px; color: var(--mute); letter-spacing: 0.04em; }
.cfg__optDelta {
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}
.cfg__opt.is-on .cfg__optDelta { color: var(--accent); }

.cfg__foot {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
}
.cfg__totalBlock {
  display: grid; grid-template-columns: auto auto; column-gap: 16px; row-gap: 4px;
  align-items: baseline;
}
.cfg__totalBlock .meta { grid-column: 1; }
.cfg__totalValue {
  grid-column: 2; grid-row: 1 / span 2;
  font-family: var(--serif); font-size: clamp(36px, 4vw, 56px);
  line-height: 1; font-weight: 400; letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  align-self: center;
  transition: color 0.3s;
}
.cfg__totalNote { grid-column: 1; font-family: var(--mono); font-size: 10px; color: var(--mute); letter-spacing: 0.06em; }
.cfg__cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 28px;
  background: var(--ink); color: var(--bg);
  font-family: var(--sans); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
  border-radius: 999px;
  transition: transform 0.2s, opacity 0.2s;
}
.cfg__cta:hover { transform: translateY(-1px); opacity: 0.92; }
.cfg__ctaArrow { font-size: 14px; }

/* ─── 08 CUSTOM — Variant B: OWNER STORIES ─── */
.sec--customB {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 28px;
  padding: 80px 64px 56px;
}
.stories__head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.stories__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.02em;
  margin: 0; color: var(--ink);
}
.stories__title em { font-style: italic; color: var(--accent); }
.stories__lede { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 540px; }

.stories__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.story { display: flex; flex-direction: column; gap: 14px; }
.story__photo {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 14px;
  overflow: hidden;
}
.story__photo::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 12px, rgba(0,0,0,0.04) 12px 24px),
    radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 60%);
  mix-blend-mode: overlay;
}
.story__photoTag {
  position: relative;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  background: rgba(0,0,0,0.36);
  padding: 4px 8px;
}
.story__body { display: flex; flex-direction: column; gap: 6px; }
.story__nameRow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.story__name { font-family: var(--serif); font-size: 22px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); font-weight: 500; }
.story__place { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.story__job { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); letter-spacing: 0.02em; }
.story__quote { margin: 8px 0 4px; padding: 0; font-family: var(--serif); font-size: 16px; line-height: 1.4; color: var(--ink); border-left: 2px solid var(--accent); padding-left: 12px; text-wrap: pretty; }
.story__quote em { font-style: italic; color: var(--ink); }
.story__build {
  display: flex; flex-direction: column; gap: 4px;
  padding-top: 10px; border-top: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.04em;
}

/* ─── 08 CUSTOM — Variant C: ATELIER ─── */
.sec--customC {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) 1.2fr;
  gap: 48px;
  padding: 80px 64px 56px;
  align-items: stretch;
}
.atelier__left { display: flex; flex-direction: column; gap: 14px; position: relative; }
.atelier__stamp {
  position: absolute; top: 0; right: 0;
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  border: 1px solid var(--accent); padding: 8px 12px;
  text-align: right;
  transform: rotate(2deg);
  opacity: 0.85;
}
.atelier__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(44px, 5.4vw, 80px); line-height: 0.92; letter-spacing: -0.02em;
  margin: 4px 0 0; color: var(--ink); max-width: 9ch;
}
.atelier__title em { font-style: italic; color: var(--accent); }
.atelier__lede { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 18px; max-width: 380px; }
.atelier__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-top: auto;
  background:
    radial-gradient(ellipse at 70% 30%, rgba(180,141,84,0.22) 0%, rgba(180,141,84,0) 60%),
    linear-gradient(135deg, #2a2722 0%, #14130f 100%);
  display: flex; align-items: flex-end; padding: 14px;
}
.atelier__photo::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 6px);
  mix-blend-mode: overlay;
}
.atelier__photoTag {
  position: relative;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(241,239,232,0.78);
}

.atelier__steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.atelier__step {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.atelier__stepN {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 36px; line-height: 1; color: var(--accent);
}
.atelier__stepBody { display: flex; flex-direction: column; gap: 4px; }
.atelier__stepHead { display: flex; align-items: baseline; gap: 14px; }
.atelier__stepT { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); }
.atelier__stepJa { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-soft); }
.atelier__stepD { font-family: var(--sans); font-size: 13px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 520px; }
.atelier__stepHours {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ink); padding: 4px 10px;
  border: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

/* ─── 08 CUSTOM — Variant D: PRESS ─── */
.sec--customD {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  padding: 80px 64px 56px;
}
.press__head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.press__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.02em;
  margin: 0; color: var(--ink);
}
.press__title em { font-style: italic; color: var(--accent); }
.press__lede { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 540px; }

.press__list { list-style: none; margin: 0; padding: 0; }
.press__item {
  display: grid;
  grid-template-columns: 48px 200px 1fr 24px;
  gap: 28px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: padding 0.25s ease;
}
.press__item:hover { padding-left: 12px; }
.press__num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute); }
.press__pubName { font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1; color: var(--ink); font-weight: 500; }
.press__pubMeta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; color: var(--mute); margin-top: 6px; text-transform: uppercase; }
.press__quote { margin: 0; padding: 0; font-family: var(--serif); font-size: 18px; line-height: 1.4; color: var(--ink-soft); text-wrap: pretty; max-width: 760px; }
.press__quote em { font-style: italic; color: var(--ink-soft); }
.press__arrow { font-family: var(--serif); font-size: 22px; color: var(--mute); justify-self: end; transition: color 0.2s, transform 0.25s; }
.press__item:hover .press__arrow { color: var(--ink); transform: translateX(4px); }

@media (max-width: 1100px) {
  .sec--customA, .sec--customB, .sec--customD { padding: 72px 32px 48px; }
  .cfg__grid { grid-template-columns: repeat(2, 1fr); }
  .stories__grid { grid-template-columns: repeat(2, 1fr); }
  .sec--customC { grid-template-columns: 1fr; gap: 28px; padding: 72px 32px 48px; }
  .press__item { grid-template-columns: 36px 160px 1fr 24px; gap: 18px; }
}

/* ─── 08 CUSTOM — Variant E: HORIZONTAL ACCORDION ─── */
.sec--customE {
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  padding: 72px 48px 48px;
  background: transparent;
  color: var(--ink);
}
.acc__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.acc__headLeft .meta, .acc__headRight .meta { color: var(--mute); }
.acc__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(40px, 5.2vw, 76px); line-height: 0.95; letter-spacing: -0.02em;
  margin: 6px 0 0; color: var(--ink);
}
/* Editions accordion has its own layered backgrounds — no gradient needed */
.acc__headRight { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; text-align: right; }
.acc__hint {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mute);
}

/* the rail */
.acc__rail {
  flex: 1 1 auto;
  display: flex;
  gap: 4px;
  height: 100%;
  min-height: 0;
}
.acc-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
  overflow: hidden;
  transition: flex-grow 0.55s cubic-bezier(.22,.61,.36,1);
}
.acc-panel.is-on { flex-grow: 4.2; }
.acc-panel:not(.is-on) { flex-grow: 0.85; }

/* marble veining — a layered SVG-y feel via radial-gradients */
.acc-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: 0.9;
  pointer-events: none;
}

/* product art */
.acc-panel__art {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 8% 4%;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.acc-panel.is-on .acc-panel__art { opacity: 1; }
.acc-panel__art .kbs {
  width: min(78%, 720px);
  filter: drop-shadow(0 24px 32px rgba(0,0,0,0.22));
}
/* product photo (placeholder for now). Cover-fits the panel so the image
   reads as the dominant visual, with a slight transition for hover and
   a soft grayscale on inactive panels so the active one feels selected. */
.acc-panel__photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  filter: saturate(0.92) contrast(0.98);
  transition: filter 0.5s ease, transform 0.5s ease;
}
.acc-panel:not(.is-on) .acc-panel__photo {
  filter: blur(18px) saturate(0.45) contrast(0.9) brightness(1.18);
  transform: scale(1.08);
}
.acc-panel:not(.is-on) .acc-panel__dim {
  background: rgba(255,255,255,0.62);
}

/* legibility scrim:
   - inactive panels: a faint wash so they read as marble paper
   - active panel: a focused bottom-left vignette behind the title block,
     not a full bottom band, so the rest of the marble breathes */
.acc-panel__dim {
  position: absolute; inset: 0;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
  transition: opacity 0.45s ease, background 0.45s ease;
  opacity: 1;
  z-index: 1;
}
.acc-panel.is-on .acc-panel__dim {
  opacity: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.28) 40%, transparent 70%);
}

/* compact (collapsed) state */
.acc-panel__compact {
  position: absolute;
  left: 0; right: 0;
  bottom: 24px;
  display: flex; flex-direction: column; align-items: center;
  gap: 18px;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.acc-panel.is-on .acc-panel__compact { opacity: 0; }
.acc-panel__idx {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.acc-panel__vName {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* expanded overlay — sits above the dim scrim */
.acc-panel__open {
  position: absolute;
  left: 28px; right: 28px;
  z-index: 2;
  bottom: 28px;
  display: flex; flex-direction: column; gap: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s ease 0.1s, transform 0.55s cubic-bezier(.22,.61,.36,1) 0.1s;
}
.acc-panel.is-on .acc-panel__open { opacity: 1; transform: none; }
.acc-panel__tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}
.acc-panel__store {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255,255,255,0.6);
  margin-bottom: 6px;
}
.acc-panel__name {
  font-family: var(--sans); font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700; letter-spacing: 0.01em;
  color: #fff; line-height: 1.2;
}
.acc-panel__price {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.75); margin-top: 10px;
}
  color: var(--ink); line-height: 1; margin-top: 2px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.acc-panel__ja {
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--ink-soft);
}
.acc-panel__desc {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
  color: var(--ink);
  margin: 8px 0 0; max-width: 380px;
  text-wrap: pretty;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}

/* footer */
.acc__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.acc__progress {
  display: flex; gap: 0;
  flex: 1 1 auto;
}
.acc__tick {
  appearance: none; border: 0; background: transparent;
  color: var(--mute);
  flex: 1 1 0;
  text-align: left;
  padding: 8px 12px 8px 0;
  display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid transparent;
  margin-top: -17px;
  cursor: pointer;
  font: inherit;
  transition: color 0.3s, border-color 0.3s;
}
.acc__tick.is-on {
  color: var(--ink);
  border-top-color: var(--accent);
}
.acc__tickN { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; }
.acc__tickL { font-family: var(--sans); font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }

.acc__cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: var(--ink); color: var(--bg);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; border-radius: 999px;
  transition: transform 0.2s, opacity 0.2s;
  white-space: nowrap;
}
.acc__cta:hover { transform: translateY(-1px); opacity: 0.92; }
.acc__ctaArrow { font-size: 14px; }

@media (max-width: 1100px) {
  .sec--customE { padding: 64px 24px 40px; }
  .acc-panel.is-on { flex-grow: 3.2; }
  .acc-panel__open { left: 16px; right: 16px; bottom: 18px; }
  .acc-panel__name { font-size: 28px; }
  .acc__progress { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   SHARP EDGES OVERRIDE
   Strip every border-radius from the design surface (Tweaks UI excluded).
   Keep silhouettes, swap softness for precision.
   --------------------------------------------------------------------------- */
:where(body) *:not(.tweaks-panel, .tweaks-panel *) {
  border-radius: 0 !important;
}

/* Decorative dots on chapter markers / caps / progress: square caps look
   intentional, but increase contrast slightly so they still read as ticks. */
.markers__dot,
.cap,
.cap__top,
.acc__bar,
.acc__step,
.cfg__bar,
.cfg__step {
  /* keep their declared sizes/colors; the override above zeroes the radius */
}

/* Topbar CTA: was a pill, now a stark slab. Tighten letter-spacing to compensate. */
.topbar__cta { letter-spacing: 0.16em; }

/* Buy buttons: square slabs read as labels, not chips. Add a hairline frame so
   they don't dissolve when the radius drops. */
.buy-btn { border: 1px solid currentColor; }
.buy-btn--primary { border-color: var(--ink); }

/* ───────────────────────────────────────────────────────────────────
   COMPREHENSIVE RESPONSIVE — tablet & mobile
   ─────────────────────────────────────────────────────────────────── */

/* Use dynamic viewport units on mobile so iOS browser chrome doesn't clip */
@supports (height: 100dvh) {
  .sec { height: 100dvh; }
  .scroller { height: 100dvh; }
}

/* On mobile/tablet, sections can be taller than the viewport when content
   stacks vertically. Switch height → min-height and drop hard snap so each
   section flows naturally without overlapping the next. */
/* Mobile/tablet: keep the desktop behaviour — each section is exactly one
   viewport tall and hard-snaps. No internal scroll, no overflow. */
@media (max-width: 1024px) {
  .sec {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
  }
  @supports (height: 100dvh) {
    .sec { height: 100dvh; }
  }
  .scroller { scroll-snap-type: y mandatory; }
}

/* ── TABLET (≤ 1024px) ────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sec--structure { padding: 88px 40px 64px; }
  .sec--overview { padding: 0 40px 56px; }
  .sec--buy { padding: 80px 40px 100px; }
  .features__grid { gap: 0; }
  .feature { padding: 24px 20px 28px 0; }
  .feature + .feature { padding-left: 20px; }
  .anno__card { min-width: 160px; }
  .anno__line { width: 56px; }
  .anno__card { left: 64px; }
}

/* ── MOBILE (≤ 720px) ─────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* Topbar — compact */
  .topbar { padding: 14px 18px; font-size: 10px; }
  .topbar__name { letter-spacing: 0.14em; font-size: 11px; }
  .topbar__mark { font-size: 14px; }
  .topbar__cta { padding: 8px 12px; font-size: 10px; letter-spacing: 0.12em; }

  /* Section base */
  .sec { padding: 72px 20px 56px; }
  .sec__corner--tl { top: 72px; left: 20px; }
  .sec__corner--tr { top: 72px; right: 20px; }
  .sec__corner--bl { bottom: 20px; left: 20px; }
  .sec__corner--br { bottom: 20px; right: 20px; }
  .markers { display: none; }
  .progress { right: 12px; }
  .progress__num { font-size: 10px; }

  /* Hide mini-canvas HUD on mobile (already hidden ≤900px, reinforced) */
  #mini-canvas, #mini-hud { display: none; }

  /* ── HERO ── */
  .hero__title { font-size: clamp(40px, 13vw, 96px); }
  .hero__sub { font-size: 12px; padding: 0 20px; }

  /* ── FEATURES (02) ── */
  .sec--overview { padding: 80px 20px 56px; justify-content: center; }
  .features { gap: 20px; }
  .features__title { font-size: clamp(40px, 11vw, 64px); }
  .features__lede { font-size: 14px; }
  .features__grid {
    grid-template-columns: 1fr;
    border-bottom: 1px solid var(--line);
  }
  .feature {
    padding: 20px 0 24px;
    border-top: 1px solid var(--line);
  }
  .feature:first-child { border-top: none; }
  .feature + .feature {
    padding-left: 0;
    border-left: none;
  }
  .feature__title { font-size: 24px; }
  .feature__list li { font-size: 14px !important; padding: 10px 0; }
  .feature__catch { font-size: 18px !important; }

  /* ── STRUCTURE (03) ── */
  .sec--structure {
    padding: 80px 20px 80px;
    flex-direction: column;
    justify-content: flex-end;
  }
  .structure__head {
    align-self: stretch;
    max-width: none;
  }
  .structure__title { font-size: clamp(34px, 9vw, 48px); }
  .structure__lede { font-size: 13px; max-width: none; }
  /* Hide layered annotations on mobile — too cramped to be useful */
  .layers-anno { display: none; }

  /* ── DETAIL (04-07: case/pcba/switches/caps) ── */
  .sec--detail {
    justify-content: flex-end !important;
    align-items: stretch;
    padding: 80px 20px 80px;
  }
  .detail__col {
    max-width: none;
    align-self: flex-end;
    width: 100%;
  }
  .detail__title {
    font-size: clamp(32px, 9vw, 48px);
    white-space: normal;
  }
  .detail__body { font-size: 13.5px; max-width: none; }
  .detail__col::before {
    inset: -24px -28px;
  }
  /* Mobile: the side-mask hides ~45% of the canvas width, and detail text
     is stacked at the BOTTOM (not the side). So clear the side mask and use
     only a mild bottom-area mask that fades to transparent where the text
     column sits. */
  #three-canvas[data-mask-side="left"],
  #three-canvas[data-mask-side="right"] {
    -webkit-mask-image: none;
            mask-image: none;
  }
  #three-canvas[data-chapter-kind="detail"] {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,0.35) 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 50%, rgba(0,0,0,0.35) 80%, transparent 100%);
  }

  /* ── VOICES (07 / レビュー) ── */
  .sec--voices {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    padding: 56px 0 28px;
    gap: 14px;
    /* keep 100vh sections content-bounded on mobile */
    overflow: hidden;
  }
  .voices__index {
    padding: 0 20px;
    gap: 4px;
  }
  .voices__meta { margin-bottom: 6px; }
  .voices__title {
    font-size: clamp(30px, 8.4vw, 44px);
    line-height: 0.96;
    margin: 0;
  }
  /* the index column on desktop is a flex column with a margin-top:auto foot;
     in stacked mobile this stretches awkwardly — keep it tight */
  .voices__indexFoot { display: none; }
  .voices__list { display: none; }

  /* stage — fill remaining viewport */
  .sec--voices .voices__stage {
    padding: 0;
    min-height: 0;
  }
  /* on mobile: show only the active (center) card.
     The pager + swipe gestures (bound to the stage) drive navigation. */
  .voices__cards {
    padding: 0;
    gap: 0;
    transform: none !important;
    justify-content: center;
    overflow: hidden;
  }
  .voice-card.voice-card--side { display: none !important; }
  .voice-card.is-center {
    flex: 0 0 auto !important;
    width: min(92vw, 480px);
    height: auto !important;
    min-height: 0;
    max-height: calc(100svh - 220px);
    padding: 16px;
    border-radius: 14px;
    opacity: 1;
    transform: none;
  }
  .voice-card__photo {
    aspect-ratio: 10 / 9;
    margin-bottom: 12px;
    border-radius: 10px;
  }
  .voice-card__quote {
    font-size: 13.5px;
    margin: 0 0 12px;
    -webkit-line-clamp: 4;
  }
  .voice-card.is-center .voice-card__quote {
    font-size: 16px;
    line-height: 1.4;
    -webkit-line-clamp: 5;
  }
  .voice-card.is-center .voice-card__name { font-size: 16px; }
  .voice-card.is-center .voice-card__role { font-size: 12px; margin-top: 3px; }
  .voice-card__foot { padding-top: 10px; }

  /* edge fade: shrink so it doesn't eat the center card */
  .voices__edgeFade { width: 24px; }

  /* pager: collapse the desktop rail padding (32px / 64px) to mobile gutters */
  .voices__pagerSlot {
    padding: 10px 20px 14px;
    margin-top: 0;
    min-height: 0;
  }

  /* A · counter — keep big serif but allow it to scale down */
  .vp-counter { gap: 8px; align-items: center; }
  .vp-counter__now { font-size: clamp(44px, 13vw, 64px); }
  .vp-counter__div { font-size: clamp(28px, 7vw, 40px); padding-bottom: 4px; }
  .vp-counter__all { padding-bottom: 8px; font-size: 11px; }
  .vp-counter__progress { margin: 0 0 12px 4px; }
  .vp-counter__arrows { padding-bottom: 6px; }
  .vp-counter__arrows button { padding: 8px 10px; }
  .vp-counter__arrows svg { width: 18px; height: 8px; }

  /* B · track — tighter spacing */
  .vp-track { gap: 10px; padding-bottom: 8px; }
  .vp-track__rail { gap: 8px; }
  .vp-track__nav { font-size: 12px; padding: 4px 2px; }

  /* C · flip — compress core */
  .vp-flip { gap: 12px; padding-bottom: 8px; }
  .vp-flip__core { gap: 10px; }
  .vp-flip__num { font-size: clamp(40px, 12vw, 64px); }
  .vp-flip__name { font-size: 12px; padding-bottom: 4px; }
  .vp-flip__name em { display: block; margin-left: 0; margin-top: 2px; }
  .vp-flip__bar { margin-bottom: 14px; }
  .vp-flip__nav { font-size: 9px; letter-spacing: 0.18em; }

  /* D · split — keep both sides but shrink names + divider gutter */
  .vp-split { padding-bottom: 8px; }
  .vp-split__side { padding: 2px 8px; gap: 4px; }
  .vp-split__name { font-size: clamp(20px, 6.4vw, 30px); }
  .vp-split__role { font-size: 10px; }
  .vp-split__caption { font-size: 8px; letter-spacing: 0.18em; }
  .vp-split__divider { margin: 0 12px; }

  /* E · glyph — collapse 3-col grid into a centered two-row layout */
  .vp-glyph {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding-bottom: 8px;
    text-align: center;
  }
  .vp-glyph__label {
    font-size: clamp(18px, 5.4vw, 24px);
    justify-self: center;
  }
  .vp-glyph__label em { display: block; margin-left: 0; margin-top: 2px; }
  .vp-glyph__row { justify-self: center; gap: 8px; padding-bottom: 0; }
  .vp-glyph__count {
    display: none;
  }

  /* ── EDITIONS (09) — switch horizontal accordion to vertical stack ── */
  .sec--customE {
    padding: 72px 20px 48px;
    height: auto;
    min-height: 100vh;
  }
  .acc__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .acc__headRight { align-items: flex-start; text-align: left; }
  .acc__title { font-size: clamp(34px, 10vw, 56px); }
  .acc__hint { display: none; }
  .acc__rail {
    flex-direction: column;
    min-height: 0;
    gap: 8px;
  }
  .acc-panel {
    flex: 0 0 auto;
    height: 180px;
    width: 100%;
  }
  .acc-panel.is-on { flex-grow: 0; height: 320px; }
  .acc-panel:not(.is-on) { flex-grow: 0; }
  .acc-panel__compact {
    flex-direction: row;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    left: 24px;
    right: 24px;
    justify-content: space-between;
    align-items: center;
  }
  .acc-panel__vName {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 14px;
  }
  .acc-panel__open { left: 20px; right: 20px; bottom: 20px; }
  .acc-panel__name { font-size: 18px; }
  .acc__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .acc__progress { display: none; }
  .acc__cta { justify-content: center; }

  /* ── FAQ (10) ── */
  .sec--spec {
    padding: 72px 20px 56px;
    flex-direction: column;
    gap: 24px;
    overflow: hidden;
  }
  .spec__col {
    padding-right: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .sec__h2 { font-size: clamp(36px, 9vw, 52px); }
  .faq__q {
    grid-template-columns: 28px 1fr 16px;
    gap: 12px;
    padding: 16px 0;
  }
  .faq__qJa { font-size: 15.5px; }
  .faq__a > p { padding: 0 0 18px 40px; font-size: 13.5px; }
  .faq__section-head {
    padding: 24px 0 10px;
    font-size: 17px;
  }
  }

  /* ── AVAILABLE (11) ── */
  .sec--buy { padding: 80px 20px 100px; }
  .buy__title { font-size: clamp(36px, 10vw, 56px); }
  .buy__row { width: auto; padding: 0; }
  .buy-btn { width: auto; }

  /* Tweaks panel — keep it on-screen */
  .twk-panel { right: 12px !important; bottom: 12px !important; max-width: calc(100vw - 24px); }
}

/* ── SMALL MOBILE (≤ 420px) ───────────────────────────────────────── */
@media (max-width: 420px) {
  .topbar__cta { display: none; }
  .hero__title { font-size: 42px; }
  .features__title { font-size: 38px; }
  .acc-panel { height: 140px; }
  .acc-panel.is-on { height: 260px; }
  .voice-card.is-center {
    width: min(94vw, 420px);
    max-height: calc(100svh - 200px);
  }
  .voice-card__quote { font-size: 13px; -webkit-line-clamp: 3; }
  .voice-card.is-center .voice-card__quote { font-size: 15px; -webkit-line-clamp: 4; }
  .vp-counter__now { font-size: clamp(40px, 14vw, 56px); }
  .vp-flip__num { font-size: clamp(36px, 13vw, 56px); }
  .vp-split__name { font-size: clamp(18px, 6vw, 26px); }
  .vp-glyph__label { font-size: clamp(16px, 5vw, 20px); }
}

/* ── LANDSCAPE PHONE / SHORT VIEWPORT (low height) for VOICES ─────── */
@media (max-width: 720px) and (max-height: 720px) {
  .sec--voices { padding: 40px 0 20px; gap: 10px; }
  .voices__title { font-size: clamp(24px, 6vw, 32px); }
  .voice-card,
  .voice-card.is-center {
    max-height: calc(100svh - 180px);
  }
  .voice-card__photo { aspect-ratio: 10 / 9; }
  .voice-card__quote { -webkit-line-clamp: 3; font-size: 12.5px; }
  .voice-card.is-center .voice-card__quote { -webkit-line-clamp: 3; font-size: 14px; }
  .voices__pagerSlot { padding: 6px 16px 8px; }
  .vp-counter__now { font-size: clamp(36px, 10vw, 48px); line-height: 0.85; }
  .vp-flip__num { font-size: clamp(32px, 9vw, 44px); }
}

/* ── LANDSCAPE PHONE (low height) ─────────────────────────────────── */
@media (max-height: 560px) and (orientation: landscape) {
  .sec { padding: 56px 32px 40px; }
  .hero__title { font-size: clamp(48px, 8vh, 80px); }
  .features__title, .structure__title, .detail__title,
  .voices__title, .acc__title, .sec__h2, .buy__title {
    font-size: clamp(28px, 6vh, 44px);
  }
  .feature__list li { padding: 8px 0; }
  .sec--customE { height: auto; min-height: 100vh; }
}

@media (max-width: 768px) {
  .sec--overview {
    min-height: 180vh;
    height: auto;
    scroll-snap-align: start;
  }

  .features {
    height: auto;
    min-height: 190vh;
    padding-bottom: 120px;
  }

  .features__grid {
    display: block;
  }

  .feature {
    min-height: auto;
    padding: 28px 0;
  }
}
.sec,
.hero,
.features,
.structure,
.detail,
.spec {
  background: transparent !important;
}

.sec::before,
.hero::before,
.features::before,
.structure::before,
.detail::before,
.spec::before {
  background: transparent !important;
}
/* Editions：閉じてるパネルも画像をうっすら表示して白blurにする */
.acc-panel:not(.is-on) .acc-panel__art {
  opacity: 0.32 !important;
}

.acc-panel:not(.is-on) .acc-panel__photo {
  filter: blur(22px) saturate(0.45) contrast(0.85) brightness(1.25) !important;
  transform: scale(1.16) !important;
}

.acc-panel:not(.is-on) .acc-panel__dim {
  background: rgba(255,255,255,0.72) !important;
  z-index: 1;
}

.acc-panel::before {
  z-index: 2;
}

.acc-panel__compact {
  z-index: 3;
}
.acc-panel:not(.is-on) .acc-panel__art {
  opacity: 0.5 !important;
}

.acc-panel:not(.is-on) .acc-panel__photo {
  filter:
    blur(28px)
    saturate(0.75)
    contrast(0.92)
    brightness(1.08) !important;

  transform: scale(1.12) !important;
}

.acc-panel:not(.is-on) .acc-panel__dim {
  background: rgba(255,255,255,0.38) !important;
}
.footer bg-theme-bg text-theme-text {
  display: none !important;
}
body:has(a[href="/pages/custom-keyboard"]) .shopify-section-group-footer-group,
body:has(a[href="/pages/custom-keyboard"]) footer {
  display: none !important;
}
#three-canvas {
  width: 100%;
}
.hero-buy-btn {
  margin-top: 120px !important;
}
/* LPのReactレイヤーがヘッダーメニューのhover判定を邪魔しないようにする */
.header,
.shopify-section-header,
.header-wrapper,
.main-header,
.main-nav__child {
  z-index: 9999 !important;
}

.main-nav__child.has-motion {
  transition-delay: 0s !important;
  animation-delay: 0s !important;
  transition-duration: .08s !important;
  animation-duration: .08s !important;
}
#app {
  z-index: 2 !important;
}

.scroller {
  z-index: 1 !important;
}

#three-canvas {
  z-index: 0 !important;
}