/* ============================================================
   Cutlock — cutlock.jp
   依存ゼロ。ビルド不要。Vercel は Root Directory = site で配信する。
   ============================================================ */

:root{
  --bg:        #07080a;
  --bg-alt:    #0b0d10;
  --surface:   #101317;
  --surface-2: #161a20;
  --line:      #22272f;
  --line-soft: #191d23;

  --fg:        #e9ebee;
  --fg-mid:    #b6bcc4;
  --fg-dim:    #8d949d;

  --accent:    #ff7a2f;   /* 変更中 / レンダー中 */
  --lock:      #4fd08a;   /* 確定 / PASS */
  --cool:      #6e8cff;   /* 構造 / データ */

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 18px;

  --wrap: 1180px;
  --gut:  24px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --sans: "Noto Sans JP", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.85;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; }
code,.mono{ font-family:var(--mono); font-feature-settings:normal; }

a{ color:inherit; }
h1,h2,h3{ line-height:1.4; margin:0; letter-spacing:.01em; }
p{ margin:0; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:#0a0a0a; padding:10px 16px; border-radius:0 0 var(--r-sm) 0;
  font-weight:700; text-decoration:none;
}
.skip:focus{ left:0; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ── 背景 ───────────────────────────────────────────── */
.bg{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.bg-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%, #000 0%, transparent 78%);
}
.bg-glow{
  position:absolute; top:-28vh; left:50%; width:min(1100px,120vw); aspect-ratio:1/.62;
  transform:translate(-50%,0);
  background:
    radial-gradient(ellipse at 38% 42%, rgba(255,122,47,.20), transparent 62%),
    radial-gradient(ellipse at 66% 55%, rgba(110,140,255,.16), transparent 62%);
  filter:blur(28px);
  will-change:transform;
}

/* ── ナビ ───────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid transparent;
  transition:background .35s var(--ease), border-color .35s var(--ease), backdrop-filter .35s;
}
.nav.stuck{
  background:rgba(7,8,10,.78);
  border-bottom-color:var(--line-soft);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.nav-in{ display:flex; align-items:center; gap:20px; height:66px; }

.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:0 0 auto; }
.brand-mark{
  width:16px; height:16px; border-radius:3px; flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent),#ffb26b);
  box-shadow:0 0 0 1px rgba(255,122,47,.35), 0 0 16px rgba(255,122,47,.45);
  position:relative;
}
.brand-mark::after{
  content:""; position:absolute; left:50%; top:-5px; bottom:-5px; width:1px;
  background:var(--accent); opacity:.55; transform:translateX(-50%);
}
.brand-name{ font-weight:900; letter-spacing:.22em; font-size:13.5px; }
.brand-name.small{ font-size:12.5px; }

.nav-links{ display:flex; gap:26px; margin-left:auto; font-size:13.5px; }
.nav-links a{ color:var(--fg-dim); text-decoration:none; transition:color .2s; white-space:nowrap; }
.nav-links a:hover{ color:var(--fg); }
@media (max-width:880px){ .nav-links{ display:none; } .nav-in{ justify-content:space-between; } }

/* ── ボタン ─────────────────────────────────────────── */
.btn{
  --pad: 13px 24px;
  display:inline-flex; align-items:center; gap:9px;
  padding:var(--pad); border-radius:999px;
  font-weight:700; font-size:14.5px; text-decoration:none; white-space:nowrap;
  border:1px solid transparent;
  transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s, border-color .22s, color .22s;
}
.btn .arr{ transition:transform .22s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:linear-gradient(180deg,#ff8a44,#f26a1c);
  color:#160a02;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 8px 24px -10px rgba(255,122,47,.85);
}
.btn-primary:hover{ box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 12px 32px -10px rgba(255,122,47,1); transform:translateY(-1px); }

.btn-ghost{ border-color:var(--line); color:var(--fg-mid); background:rgba(255,255,255,.02); }
.btn-ghost:hover{ border-color:#39414c; color:var(--fg); background:rgba(255,255,255,.05); }

.btn-sm{ --pad: 9px 17px; font-size:13px; flex:0 0 auto; }
.btn-lg{ --pad: 16px 30px; font-size:16px; }

/* ── HERO ───────────────────────────────────────────── */
.hero{ padding-block:clamp(48px,7vw,96px) clamp(56px,7vw,104px); }
.hero-in{
  display:grid; gap:clamp(36px,5vw,64px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:center;
}
@media (max-width:940px){ .hero-in{ grid-template-columns:1fr; } }

.badge{
  display:inline-flex; align-items:center; gap:9px;
  border:1px solid var(--line); border-radius:999px;
  padding:6px 15px 6px 12px; margin-bottom:26px;
  font-size:12.5px; color:var(--fg-mid); background:rgba(255,255,255,.025);
}
.badge .dot{
  width:7px; height:7px; border-radius:50%; background:var(--lock); flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(79,208,138,.16);
  animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(79,208,138,.16);} 50%{ box-shadow:0 0 0 6px rgba(79,208,138,.04);} }

h1{
  font-size:clamp(31px,5vw,54px);
  font-weight:900; line-height:1.28; letter-spacing:-.005em;
  margin-bottom:24px;
}
.hl{
  background:linear-gradient(180deg,transparent 62%, rgba(255,122,47,.28) 62%);
  padding-inline:2px;
}

.lead{ font-size:clamp(15px,1.5vw,17.5px); color:var(--fg-mid); max-width:34em; }
.lead strong{ color:var(--fg); font-weight:700; }

.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:34px; }
.cta-note{ margin-top:14px; font-size:12.5px; color:var(--fg-dim); }

/* ── HERO のエディタモック ─────────────────────────── */
.hero-vis{ position:relative; }

.win{
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(180deg,#0f1216,#0a0c0f);
  box-shadow:0 40px 90px -40px #000, 0 0 0 1px rgba(255,255,255,.02) inset;
  overflow:hidden;
  will-change:transform;
}
.win-bar{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px; border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.02);
  font-size:11.5px; color:var(--fg-dim);
}
.win-dots{ display:flex; gap:6px; }
.win-dots i{ width:9px; height:9px; border-radius:50%; background:#2a2f37; }
.win-title{ font-family:var(--mono); }
.win-tag{ margin-left:auto; font-family:var(--mono); color:#666d76; }

/* ── 自動運転パネル（ヒーロー） ─────────────────────── */
.auto-body{ padding:22px 22px 20px; }

.auto-k{
  font-size:10px; color:#666d76; letter-spacing:.14em; text-transform:uppercase;
  margin-bottom:8px;
}

.auto-count{
  font-size:clamp(30px,3.4vw,42px); font-weight:700; line-height:1;
  letter-spacing:.02em; color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.auto-count.running{ color:var(--accent); }

.auto-sub{ margin-top:9px; font-size:11px; color:var(--fg-dim); }

.auto-runs{ margin-top:24px; padding-top:18px; border-top:1px solid var(--line-soft); }

.auto-run{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:6px 0; font-size:11px; color:var(--fg-dim);
  border-top:1px solid rgba(255,255,255,.03);
}
.auto-run:first-of-type{ border-top:0; }
.auto-run .at{ color:var(--fg-mid); flex:0 0 auto; }
.auto-run .ok{
  color:var(--lock); font-size:10px; font-weight:700;
  border:1px solid rgba(79,208,138,.32); border-radius:999px; padding:1px 8px; flex:0 0 auto;
}
.auto-run .cost{ color:var(--accent); }
.auto-run .took{ margin-left:auto; }

@media (max-width:520px){
  .auto-run .took{ margin-left:0; }
}

.win-foot{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:11px 14px; border-top:1px solid var(--line-soft);
  background:rgba(255,255,255,.015);
}
.stat{ display:flex; align-items:center; gap:8px; min-width:0; }
.stat-dot{
  width:7px; height:7px; border-radius:50%; flex:0 0 auto;
  background:var(--lock); box-shadow:0 0 0 3px rgba(79,208,138,.14);
  transition:background .3s, box-shadow .3s;
}
.stat-k{ font-size:11px; font-weight:700; color:var(--lock); flex:0 0 auto; transition:color .3s; }
.stat-v{
  font-size:10.5px; color:var(--fg-dim); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.stat.rendering .stat-dot{ background:var(--accent); box-shadow:0 0 0 3px rgba(255,122,47,.16); }
.stat.rendering .stat-k{ color:var(--accent); }
.undo{
  margin-left:auto; font-size:10px; color:var(--fg-dim); flex:0 0 auto;
  border:1px solid var(--line); border-radius:999px; padding:2px 10px;
}

@media (max-width:520px){ .win-tag{ display:none; } }

.vis-note{
  margin-top:12px; font-size:11px; color:#5c636c; text-align:right;
}
@media (max-width:940px){ .vis-note{ text-align:left; } }

/* ── stats ──────────────────────────────────────────── */
.stats{
  list-style:none; margin:clamp(52px,7vw,88px) 0 0; padding:26px 0 0;
  border-top:1px solid var(--line-soft);
  display:grid; gap:26px; grid-template-columns:repeat(4,1fr);
}
@media (max-width:760px){ .stats{ grid-template-columns:repeat(2,1fr); } }
.stats li{ display:flex; flex-direction:column; gap:4px; }
.stats b{ font-size:clamp(26px,3.4vw,36px); font-weight:700; line-height:1.1; letter-spacing:-.02em; }
.stats span{ font-size:12.5px; color:var(--fg-mid); line-height:1.7; }
.stats i{ font-style:normal; color:var(--fg-dim); font-size:11.5px; }

/* ── セクション共通 ─────────────────────────────────── */
.sec{ padding-block:clamp(64px,8vw,108px); position:relative; }
.sec-alt{ background:linear-gradient(180deg,transparent,var(--bg-alt) 12%,var(--bg-alt) 88%,transparent); }

.eyebrow{
  font-size:11.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin-bottom:16px;
}
.sec h2{
  font-size:clamp(25px,3.8vw,40px); font-weight:900; letter-spacing:-.005em;
  max-width:22em;
}
.sec-lead{
  margin-top:18px; max-width:44em; color:var(--fg-mid);
  font-size:clamp(14.5px,1.4vw,16.5px);
}

/* ── カード ─────────────────────────────────────────── */
.cards{ display:grid; gap:16px; margin-top:clamp(38px,5vw,60px); }
.cards.three{ grid-template-columns:repeat(3,1fr); }
.cards.two{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .cards.three,.cards.two{ grid-template-columns:1fr; } }

.card{
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
  padding:26px 24px 28px;
  transition:border-color .3s var(--ease), transform .3s var(--ease), background .3s;
}
.card:hover{ border-color:#2e353f; transform:translateY(-3px); }
.card h3{ font-size:17px; font-weight:700; margin-bottom:12px; }
.card p{ color:var(--fg-mid); font-size:14.5px; }
.card code{ color:var(--cool); font-size:.92em; }
.card strong{ color:var(--fg); }

.card-n{ display:block; font-size:11.5px; color:var(--accent); margin-bottom:14px; letter-spacing:.1em; }
.card.wide{ padding:30px 28px 32px; }
.card.wide h3{ display:flex; align-items:baseline; gap:12px; font-size:18.5px; }
.card.wide .k{
  font-size:11.5px; color:var(--accent); flex:0 0 auto;
  border:1px solid rgba(255,122,47,.32); border-radius:5px; padding:1px 7px;
}

/* proof カード */
.card.proof header{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.card.proof h3{ margin:0; }
.pass{
  margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.12em;
  color:var(--lock); border:1px solid rgba(79,208,138,.4); border-radius:999px; padding:2px 11px;
  background:rgba(79,208,138,.07);
}
.proof-out{
  display:flex; flex-direction:column; gap:5px;
  margin:16px 0; padding:13px 14px; border-radius:8px;
  background:#0a0c0f; border:1px solid var(--line-soft);
  font-size:11.5px; color:var(--fg-dim); line-height:1.7; overflow-x:auto;
}
.proof-out b{ color:var(--accent); }
.proof-out .ok{ color:var(--lock); }
.proof-note{ font-size:13.5px; }

/* ── 仕組み ─────────────────────────────────────────── */
.pipe{
  display:grid; gap:clamp(30px,5vw,72px);
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  margin-top:clamp(38px,5vw,60px);
}
@media (max-width:940px){ .pipe{ grid-template-columns:1fr; } .pipe-vis{ display:none; } }

.pipe-steps{ list-style:none; margin:0; padding:0; }
.step{
  position:relative; padding:26px 0 26px 62px;
  border-top:1px solid var(--line-soft);
  transition:opacity .45s var(--ease);
}
.anim .step{ opacity:.42; }
.anim .step.active{ opacity:1; }
.step:first-child{ border-top:0; }
.step.active{ opacity:1; }
.step-n{
  position:absolute; left:0; top:26px;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-size:11.5px;
  border:1px solid var(--line); color:var(--fg-dim);
  transition:border-color .45s var(--ease), color .45s var(--ease), background .45s, box-shadow .45s;
}
.step.active .step-n{
  border-color:var(--accent); color:var(--accent);
  background:rgba(255,122,47,.08);
  box-shadow:0 0 22px -6px rgba(255,122,47,.7);
}
.step h3{ font-size:19px; font-weight:700; margin-bottom:10px; }
.step p{ color:var(--fg-mid); font-size:14.5px; }
.step code{ color:var(--cool); font-size:.92em; }
.step strong{ color:var(--fg); }

.pipe-sticky{ position:sticky; top:110px; }
.flow{ display:flex; flex-direction:column; gap:0; }
.flow-node{
  border:1px solid var(--line-soft); border-radius:10px;
  padding:14px 16px; background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; gap:3px;
  transition:opacity .45s var(--ease), transform .45s var(--ease), border-color .45s, box-shadow .45s, background .45s;
}
.anim .flow-node{ opacity:.34; transform:scale(.985); }
.flow-node span{ font-size:12.5px; color:var(--fg); }
.flow-node em{ font-style:normal; font-size:11px; color:var(--fg-dim); font-family:var(--mono); }
.flow-node.on{
  opacity:1; transform:scale(1);
  border-color:rgba(255,122,47,.5); background:rgba(255,122,47,.06);
  box-shadow:0 0 34px -14px rgba(255,122,47,.9);
}
.flow-node.core.on{ border-color:rgba(110,140,255,.55); background:rgba(110,140,255,.07); box-shadow:0 0 34px -14px rgba(110,140,255,.9); }
.flow-node.lock.on{ border-color:rgba(79,208,138,.55); background:rgba(79,208,138,.07); box-shadow:0 0 34px -14px rgba(79,208,138,.9); }
.flow-arrow{ height:22px; display:grid; place-items:center; }
.flow-arrow i{ width:1px; height:100%; background:linear-gradient(180deg,var(--line),transparent); }

/* ── 実物ギャラリー ─────────────────────────────────── */
.reels{
  list-style:none; margin:clamp(38px,5vw,60px) 0 0; padding:0;
  display:grid; gap:20px; grid-template-columns:repeat(3,1fr);
}
@media (max-width:900px){ .reels{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .reels{ grid-template-columns:1fr; } }

.reel{ display:flex; flex-direction:column; gap:12px; min-width:0; }

.reel-frame{
  position:relative; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line-soft); background:#0a0c0f;
}
.reel-media{
  width:100%; height:100%; object-fit:cover; display:block;
}

.reel-title{ font-size:15px; font-weight:700; }
.reel-caption{
  font-size:13px; color:var(--fg-mid); line-height:1.9;
  /* 本文は長いので冒頭だけ出す */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}
.reel-tags{ font-size:11.5px; color:var(--cool); word-break:break-all; }

.reels-empty{ margin-top:clamp(38px,5vw,60px); }
.reels-empty-k{ color:var(--accent); font-weight:700; margin-bottom:10px; font-size:14px; }
.reels-empty p{ color:var(--fg-mid); font-size:14.5px; }

/* ── できること（8ステップ） ───────────────────────── */
.steps{
  list-style:none; margin:clamp(38px,5vw,60px) 0 0; padding:0;
  display:grid; gap:16px; grid-template-columns:repeat(2,1fr);
}
@media (max-width:820px){ .steps{ grid-template-columns:1fr; } }
.fstep{
  position:relative; padding:24px 24px 26px 62px;
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
  transition:border-color .3s var(--ease), transform .3s var(--ease);
}
.fstep:hover{ border-color:#2e353f; transform:translateY(-3px); }
.fstep-n{
  position:absolute; left:22px; top:26px;
  font-size:11.5px; color:var(--accent); letter-spacing:.1em;
}
.fstep h3{ font-size:16.5px; font-weight:700; margin-bottom:10px; }
.fstep p{ color:var(--fg-mid); font-size:14px; }
.fstep code{ color:var(--cool); font-size:.92em; }

/* ── 構成 ───────────────────────────────────────────── */
.stack-grid{
  display:grid; gap:16px; margin-top:clamp(38px,5vw,60px);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:start;
}
@media (max-width:900px){ .stack-grid{ grid-template-columns:1fr; } }
.stack-grid .cards{ margin-top:0; gap:16px; }

.spec{
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
  overflow:hidden;
}
.spec-row{
  display:flex; gap:18px; flex-wrap:wrap; align-items:baseline;
  padding:17px 22px; border-top:1px solid var(--line-soft);
}
.spec-row:first-child{ border-top:0; }
.spec-k{ font-size:13.5px; color:var(--fg-mid); flex:0 0 auto; min-width:11em; }
.spec-v{
  display:flex; flex-direction:column; gap:3px; min-width:0;
  font-size:14px; color:var(--fg); font-weight:500; margin-left:auto; text-align:right;
}
.spec-v em{ font-style:normal; font-size:11px; color:var(--fg-dim); }
@media (max-width:560px){
  .spec-row{ flex-direction:column; gap:6px; align-items:stretch; }
  .spec-k{ min-width:0; }
  .spec-v{ margin-left:0; text-align:left; }
}

/* ── 正直なところ ───────────────────────────────────── */
.limits{
  list-style:none; margin:clamp(38px,5vw,56px) 0 0; padding:0;
  display:grid; gap:0;
}
.limits li{
  padding:26px 0; border-top:1px solid var(--line-soft);
  display:grid; gap:10px 40px; grid-template-columns:minmax(0,15em) minmax(0,1fr);
  align-items:baseline;
}
.limits li:first-child{ border-top:0; }
@media (max-width:760px){ .limits li{ grid-template-columns:1fr; } }
.limits h3{ font-size:16.5px; font-weight:700; }
.limits p{ color:var(--fg-mid); font-size:14.5px; }

/* ── 最終CTA ────────────────────────────────────────── */
.cta-sec{ padding-block:clamp(72px,9vw,120px); }
.cta-in{
  border:1px solid var(--line-soft); border-radius:var(--r-lg);
  padding:clamp(38px,6vw,68px) clamp(24px,5vw,56px);
  text-align:center;
  background:
    radial-gradient(ellipse 70% 130% at 50% 0%, rgba(255,122,47,.14), transparent 62%),
    linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));
}
.cta-in h2{ font-size:clamp(24px,3.4vw,36px); font-weight:900; margin-inline:auto; }
.cta-in p{ margin:16px auto 30px; color:var(--fg-mid); max-width:38em; font-size:15px; }
.cta-row.center{ justify-content:center; }
[hidden]{ display:none !important; }

/* ── フッター ───────────────────────────────────────── */
.foot{ border-top:1px solid var(--line-soft); padding-block:38px 46px; }
.foot-in{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.foot-note{ font-size:12.5px; color:var(--fg-dim); line-height:1.9; }

/* ── スクロール演出 ─────────────────────────────────── */
.anim [data-r]{
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.anim [data-r].in{ opacity:1; transform:none; }
.anim [data-r-delay="1"]{ transition-delay:.08s; }
.anim [data-r-delay="2"]{ transition-delay:.16s; }
.anim [data-r-delay="3"]{ transition-delay:.24s; }
.anim [data-r-delay="4"]{ transition-delay:.32s; }

@media (prefers-reduced-motion: reduce){
  [data-r]{ opacity:1; transform:none; transition:none; }
  .step{ opacity:1; }
  .flow-node{ opacity:1; transform:none; }
  .bg-glow, .stage-art, .badge .dot, .cell, .stage-scan{ animation:none !important; }
  .btn, .card{ transition:none; }
}

/* ============================================================
   下層ページ（/apply・/admin）
   紹介ページと同じトークンを使う。ダーク固定。

   クラス名はここから下も紹介ページと同じ名前空間に入る。
   短い単語（.sub / .row / .in など）は紹介ページ側の修飾子と衝突するので使わない。
   実際 .sub は当時あった .track-head.sub（音声トラックの見出し）に当たり、
   min-height:70vh を効かせてしまった。ページ側の器は .pg 接頭辞にしてある。
   ============================================================ */

.pg{ padding-block:clamp(40px,6vw,72px) clamp(64px,9vw,120px); min-height:70vh; }
.pg-in{ max-width:860px; }
.pg-in.narrow{ max-width:520px; }

.back{
  display:inline-block; margin-bottom:26px;
  font-size:13px; color:var(--fg-dim); text-decoration:none;
  transition:color .2s;
}
.back:hover{ color:var(--fg); }

.pg h1{
  font-size:clamp(25px,3.6vw,36px); font-weight:900; letter-spacing:-.005em;
  margin-bottom:18px;
}
.pg-lead{ color:var(--fg-mid); font-size:15px; max-width:44em; margin-bottom:32px; }
.pg-lead code{ color:var(--cool); font-size:.92em; }
.pg-lead b{ color:var(--fg); }

.panel{
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
  padding:26px 24px;
}
.panel.empty{ color:var(--fg-dim); font-size:14px; }
.panel.done .done-k{ color:var(--lock); font-weight:700; margin-bottom:10px; }
.panel.done p{ color:var(--fg-mid); font-size:14.5px; }
.panel.done code{ color:var(--cool); }

/* ── フォーム ───────────────────────────────────────── */
.form{ display:flex; flex-direction:column; gap:20px; align-items:flex-start; }
.field{ display:flex; flex-direction:column; gap:7px; width:100%; }
.field-k{ font-size:13px; color:var(--fg-mid); display:flex; align-items:baseline; gap:8px; }
.field-k em{
  font-style:normal; font-size:10px; letter-spacing:.08em; color:var(--accent);
  border:1px solid rgba(255,122,47,.35); border-radius:4px; padding:0 6px;
}
.field-note{ font-size:11.5px; color:var(--fg-dim); }

.field input, .field textarea{
  width:100%; font:inherit; font-size:15px; color:var(--fg);
  background:#0a0c0f; border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; transition:border-color .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:96px; line-height:1.8; }
.field input::placeholder, .field textarea::placeholder{ color:#5c636c; }
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,122,47,.14);
}
.field input.code{ font-size:22px; letter-spacing:.4em; text-align:center; padding-block:14px; }

.row{ display:flex; gap:10px; flex-wrap:wrap; }

.hint{ font-size:13.5px; color:var(--fg-mid); line-height:1.9; }
.hint b{ color:var(--fg); }
.hint code{ color:var(--cool); font-size:.92em; }
.hint.warn{
  border-left:2px solid var(--accent); padding:2px 0 2px 12px; color:var(--fg-dim);
}

.err{
  font-size:13.5px; color:#ff9d7a;
  border:1px solid rgba(255,122,47,.34); background:rgba(255,122,47,.07);
  border-radius:8px; padding:10px 13px; width:100%;
}

.btn[disabled]{ opacity:.55; cursor:default; transform:none; }
.btn[disabled]:hover{ transform:none; }

/* ── 管理バー ───────────────────────────────────────── */
.admin-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line-soft);
}
.admin-me{ font-size:12.5px; color:var(--fg-dim); display:flex; align-items:center; gap:10px; }
.badge-n{
  font-size:11px; color:var(--accent); font-weight:700;
  border:1px solid rgba(255,122,47,.35); background:rgba(255,122,47,.08);
  border-radius:999px; padding:1px 9px;
}
.grant{ display:flex; gap:8px; margin-left:auto; }
.grant input{
  font:inherit; font-size:13px; color:var(--fg); width:min(260px,44vw);
  background:#0a0c0f; border:1px solid var(--line); border-radius:999px; padding:8px 15px;
}
.grant input::placeholder{ color:#5c636c; }
.grant input:focus{ outline:none; border-color:var(--accent); }

/* ── 申請一覧 ───────────────────────────────────────── */
.reqs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.req{
  display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start;
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.008));
  padding:18px 20px;
}
.req.pending{ border-color:rgba(255,122,47,.32); }
.req.rejected{ opacity:.62; }
.req-main{ flex:1 1 320px; min-width:0; display:flex; flex-direction:column; gap:7px; }
.req-email{ font-size:14.5px; color:var(--fg); word-break:break-all; }
.req-meta{
  display:flex; gap:14px; flex-wrap:wrap; align-items:center;
  font-size:11.5px; color:var(--fg-dim);
}
.req-purpose{ font-size:13.5px; color:var(--fg-mid); }

.st{
  font-size:10.5px; font-weight:700; letter-spacing:.1em;
  border:1px solid var(--line); border-radius:999px; padding:2px 10px; color:var(--fg-dim);
}
.st-pending{ color:var(--accent); border-color:rgba(255,122,47,.4); background:rgba(255,122,47,.07); }
.st-approved{ color:var(--lock); border-color:rgba(79,208,138,.4); background:rgba(79,208,138,.07); }

.req-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }

@media (max-width:560px){
  .grant{ margin-left:0; width:100%; }
  .grant input{ width:100%; }
  .req-actions{ margin-left:0; }
}