/* NERI Design System v2 — 正本（docs/NERI_DESIGN_SYSTEM.md）。
 * 本体 index.html と lp/index.html の両方がこの1枚を読む（見せている UI と実物を同じ部品にする）。
 * 方向: Premium / Dark / Minimal / Executive / Calm を土台に、2026-09-05 オーナー指示で
 * 「もっと派手に」＝宇宙船 HUD(格子・走査線・中枢の輝き)を前に出す方向へ改訂。
 * レイアウト・情報密度・タイポは Calm/Executive のまま。派手さは「動きのあるレイヤー」の
 * 存在感（#gl3d・.bgfx・#core の不透明度とグロー）だけで足す。意味のないネオン濫用はしない。
 * ★magic value を足さない。色・余白・角・動きは全部ここのトークンから。
 * ★@media は基本ルールの**後**に書く（前に書くと一度も効かない）。 */

:root{
  --nx-bg:#07090c; --nx-bg-2:#0d1117; --nx-bg-3:#141a22;
  --nx-line:rgba(255,255,255,.08); --nx-line-2:rgba(255,255,255,.16);
  --nx-fg:#f2f5f8; --nx-fg-2:#aab4c0; --nx-fg-3:#6b7785;
  --nx-accent:#5ac8fa; --nx-accent-2:#c9a96e;
  --nx-ok:#5fd39a; --nx-warn:#f0b35a; --nx-err:#ff7a7a; --nx-wait:#b79cff;
  --nx-r-s:8px; --nx-r-m:14px; --nx-r-l:22px;
  --nx-shadow:0 12px 40px rgba(0,0,0,.45); --nx-blur:14px;
  --nx-s-1:4px; --nx-s-2:8px; --nx-s-3:12px; --nx-s-4:16px; --nx-s-5:24px; --nx-s-6:32px; --nx-s-7:48px; --nx-s-8:72px;
  --nx-t-display:clamp(44px,6vw,96px); --nx-t-h1:clamp(32px,4vw,56px); --nx-t-h2:clamp(24px,2.6vw,36px);
  --nx-t-body:17px; --nx-t-label:11px;
  --nx-font-jp:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Hiragino Sans','Noto Sans JP',sans-serif;
  --nx-font-en:'Inter',-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;
  --nx-font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --nx-ease:cubic-bezier(.2,.8,.2,1); --nx-fast:160ms; --nx-mid:320ms; --nx-slow:640ms;
  --nx-z-core:5; --nx-z-panel:20; --nx-z-modal:40; --nx-z-toast:60;
  --nx-core-size:120px;
}

/* ===== v1 トークンの写像 =====
 * index.html の 2,000 行の CSS は --cyan / --bg / --glow / --orb を参照している。
 * ここで v2 の値へ写すことで、全画面を一度に落ち着いた黒・白・1アクセントへ移す。
 * （同じ :root の詳細度。このファイルは inline <style> の**後**に読むので後勝ち） */
:root{
  --bg:var(--nx-bg); --bg2:var(--nx-bg-2);
  --panel:rgba(13,17,23,.74);
  --line:var(--nx-line-2); --line2:var(--nx-line);
  --cyan:var(--nx-accent); --bright:#e6f4fb; --text:var(--nx-fg); --label:var(--nx-fg-2); --dim:var(--nx-fg-3);
  --mono:var(--nx-font-mono); --orb:var(--nx-font-en);
  --glow:0 0 10px rgba(90,200,250,.22);
}

/* ===== HUD を前に出す（2026-09-05 オーナー指示、同日「もっと強く」で再調整） =====
 * 格子(.floor/.ceil)・走査線(.stream)・光条(.beam)は隠さず残す。中枢(#core)の輝きも上げる。 */
.bgfx::before{opacity:.95}
#core{opacity:.92;filter:saturate(1.2) brightness(1.08)}
#coreveil{opacity:.68}
.hud{opacity:1}
.hud .hudttl{letter-spacing:.24em}
.brand{font-family:var(--nx-font-en);font-weight:700;letter-spacing:.3em;text-shadow:none;color:var(--nx-fg)}
.brand small{color:var(--nx-fg-3);letter-spacing:.1em;font-size:10px}
.brand img{filter:none;opacity:.9}
.tagline{color:var(--nx-fg-3);letter-spacing:.14em}
.top-clock{font-family:var(--nx-font-en);font-weight:500;text-shadow:none;color:var(--nx-fg-2);font-variant-numeric:tabular-nums}
.topbar{border-bottom-color:var(--nx-line)}
.menubtn{background:var(--nx-bg-3);border-color:var(--nx-line-2);color:var(--nx-fg)}
.state-en{font-family:var(--nx-font-en);font-weight:600;letter-spacing:.34em;text-shadow:none;color:var(--nx-fg-2);font-size:12px}
.state-jp{color:var(--nx-fg-3);letter-spacing:.24em}
.state-tag{display:flex;flex-direction:column;align-items:center;gap:6px}
.reactor-wrap{height:auto;min-height:150px;align-items:center;padding:10px 0 8px}

/* ===== NERI Core — 状態そのものを見せる輪（Logo ではない） =====
 * data-state: idle listening understanding planning permission executing verifying completed failed speaking */
.nx-core{position:relative;width:var(--nx-core-size);height:var(--nx-core-size);border-radius:50%;
  --nx-core-c:var(--nx-fg-3);display:block;flex:none;pointer-events:none;
  transition:filter var(--nx-mid) var(--nx-ease)}
/* ★2026-09-05 オーナー指示: 中枢(#core、待機=青/聞く=シアン/考える=紫/話す=金)の色そのもので
 * 状態は伝わるので、その手前に重なって見えるこの小さな輪は要らない（邪魔なだけだった）。
 * 消すのは in-app 画面の #nxCore だけ。.nx-core は LP のデモ表示にも使っているため
 * クラスごとは消さない。data-state を書き込む側(index.html)は触らなくてよい
 * （非表示要素に data 属性を立てても無害）。テキスト(READY/待機中)はそのまま残す。 */
#nxCore{display:none}
.nx-core::before{ /* 外輪 */
  content:'';position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--nx-core-c);opacity:.85;
  box-shadow:0 0 24px 2px color-mix(in srgb,var(--nx-core-c) 45%,transparent);
  transition:opacity var(--nx-mid) var(--nx-ease),border-color var(--nx-mid) var(--nx-ease)}
.nx-core::after{ /* 芯 */
  content:'';position:absolute;left:50%;top:50%;width:28%;height:28%;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--nx-core-c);
  box-shadow:0 0 52px 12px color-mix(in srgb,var(--nx-core-c) 65%,transparent);
  transition:background var(--nx-mid) var(--nx-ease),box-shadow var(--nx-mid) var(--nx-ease)}
.nx-core .nx-arc{ /* 回る弧（実行中だけ） */
  position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;
  border-top-color:var(--nx-core-c);opacity:0}
.nx-core[data-state="idle"]{--nx-core-c:var(--nx-fg-3);animation:nx-breathe 4s var(--nx-ease) infinite}
.nx-core[data-state="listening"]{--nx-core-c:var(--nx-accent)}
.nx-core[data-state="listening"]::before{animation:nx-listen 1.4s var(--nx-ease) infinite}
.nx-core[data-state="understanding"]{--nx-core-c:var(--nx-accent)}
.nx-core[data-state="understanding"]::after{animation:nx-converge 1.2s var(--nx-ease) infinite}
.nx-core[data-state="planning"]{--nx-core-c:var(--nx-wait)}
.nx-core[data-state="planning"]::after{animation:nx-converge 1.6s var(--nx-ease) infinite}
.nx-core[data-state="permission"]{--nx-core-c:var(--nx-accent-2)}
.nx-core[data-state="permission"]::before{animation:nx-blink 1.2s steps(1) infinite}
.nx-core[data-state="executing"]{--nx-core-c:var(--nx-accent)}
.nx-core[data-state="executing"] .nx-arc{opacity:1;animation:nx-spin 1.6s linear infinite}
.nx-core[data-state="verifying"]{--nx-core-c:var(--nx-ok)}
.nx-core[data-state="verifying"]::before{animation:nx-listen .9s var(--nx-ease) 2}
.nx-core[data-state="completed"]{--nx-core-c:var(--nx-ok);animation:nx-pop var(--nx-slow) var(--nx-ease) 1}
.nx-core[data-state="failed"]{--nx-core-c:var(--nx-err);animation:nx-shrink var(--nx-slow) var(--nx-ease) 1}
.nx-core[data-state="speaking"]{--nx-core-c:var(--nx-accent)}
.nx-core[data-state="speaking"]::after{animation:nx-speak .9s var(--nx-ease) infinite}
@keyframes nx-breathe{0%,100%{filter:brightness(.9)}50%{filter:brightness(1.15)}}
@keyframes nx-listen{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.18);opacity:0}}
@keyframes nx-converge{0%{transform:translate(-50%,-50%) scale(1.25);opacity:.5}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes nx-blink{0%,49%{opacity:.9}50%,100%{opacity:.25}}
@keyframes nx-spin{to{transform:rotate(360deg)}}
@keyframes nx-pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes nx-shrink{0%{transform:scale(1)}40%{transform:scale(.88)}100%{transform:scale(1)}}
@keyframes nx-speak{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.22)}}

/* ===== Execution Timeline — 工程だけを見せる（思考は見せない） ===== */
.nx-exec{width:100%;display:flex;flex-direction:column;gap:2px;margin:2px 0 4px;
  font-family:var(--nx-font-jp);font-size:12.5px;color:var(--nx-fg-2);
  border-left:1.5px solid var(--nx-line-2);padding-left:var(--nx-s-3)}
.nx-exec-step{display:flex;align-items:center;gap:var(--nx-s-2);min-height:22px;
  animation:nx-stepin var(--nx-mid) var(--nx-ease) both}
.nx-exec-step .nx-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--nx-fg-3);margin-left:-16.5px;
  box-shadow:0 0 0 3px var(--nx-bg)}
.nx-exec-step[data-phase="understanding"] .nx-dot,
.nx-exec-step[data-phase="executing"] .nx-dot{background:var(--nx-accent)}
.nx-exec-step[data-phase="planning"] .nx-dot{background:var(--nx-wait)}
.nx-exec-step[data-phase="permission"] .nx-dot{background:var(--nx-accent-2)}
.nx-exec-step[data-phase="completed"] .nx-dot{background:var(--nx-ok)}
.nx-exec-step[data-phase="failed"] .nx-dot{background:var(--nx-err)}
.nx-exec-step.live .nx-dot{animation:nx-listen 1.2s var(--nx-ease) infinite}
.nx-exec-step .nx-lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nx-exec-step .nx-res{flex:none;font-size:11px;color:var(--nx-fg-3);letter-spacing:.04em}
.nx-exec-step[data-verify="ok"] .nx-res{color:var(--nx-ok)}
.nx-exec-step[data-verify="failed"] .nx-res{color:var(--nx-err)}
.nx-exec-step[data-verify="unknown"] .nx-res{color:var(--nx-warn)}
.nx-exec-step[data-risk="2"] .nx-lbl::after,.nx-exec-step[data-risk="3"] .nx-lbl::after{
  content:'外へ届く';margin-left:8px;font-size:10px;color:var(--nx-accent-2);letter-spacing:.08em}
.nx-exec-sum{display:flex;align-items:center;gap:var(--nx-s-2);min-height:22px;color:var(--nx-fg);
  background:none;border:0;padding:0;font:inherit;cursor:pointer;text-align:left}
.nx-exec-sum .nx-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--nx-ok);margin-left:-16.5px;box-shadow:0 0 0 3px var(--nx-bg)}
.nx-exec.failed .nx-exec-sum .nx-dot{background:var(--nx-err)}
.nx-exec.unknown .nx-exec-sum .nx-dot{background:var(--nx-warn)}
.nx-exec-sum .nx-n{color:var(--nx-fg-3);font-size:11px}
.nx-exec.done .nx-exec-step{display:none}
.nx-exec.done.open .nx-exec-step{display:flex}
.nx-exec:not(.done) .nx-exec-sum{display:none}
@keyframes nx-stepin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ===== バッジ（AVAILABLE / BETA / COMING）。実装していない物を「使える」と見せない ===== */
.nx-badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;
  font-family:var(--nx-font-en);font-size:var(--nx-t-label);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--nx-line-2);color:var(--nx-fg-2);background:var(--nx-bg-3)}
.nx-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.nx-badge[data-status="available"]{color:var(--nx-ok);border-color:color-mix(in srgb,var(--nx-ok) 40%,transparent)}
.nx-badge[data-status="beta"]{color:var(--nx-accent);border-color:color-mix(in srgb,var(--nx-accent) 40%,transparent)}
.nx-badge[data-status="coming"]{color:var(--nx-fg-3)}

/* ===== Display Mode — 大型ディスプレイ（3m 先で読める） =====
 * body.nx-display は ?display=1 かメニューから。計器・小さな札・候補チップを消し、Core と本文を大きくする。 */
#nxDisplayExit{display:none;position:fixed;right:18px;bottom:18px;z-index:var(--nx-z-toast);
  align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;cursor:pointer;
  background:var(--nx-bg-3);border:1px solid var(--nx-line-2);color:var(--nx-fg-2);font:13px var(--nx-font-jp)}
body.nx-display #nxDisplayExit{display:inline-flex}
body.nx-display .hud,body.nx-display #hudbar,body.nx-display .tagline,body.nx-display #quota,
body.nx-display .chips,body.nx-display #interim,body.nx-display #avfullExit{display:none}
body.nx-display .reactor-wrap{min-height:300px;padding:28px 0 12px}
body.nx-display .nx-core{--nx-core-size:200px}
body.nx-display .state-en{font-size:18px;letter-spacing:.4em}
body.nx-display .state-jp{font-size:15px;letter-spacing:.2em}
body.nx-display #chat{width:100%;max-width:1160px;margin:0 auto;font-size:22px;padding:12px 24px 16px}
body.nx-display #chat .msg{font-size:22px;line-height:1.6}
body.nx-display #chat .card{zoom:1.25}
body.nx-display .nx-exec{font-size:16px}
body.nx-display .brand{font-size:18px}
body.nx-display .top-clock{font-size:22px}
body.nx-display .dockrow{max-width:1160px;margin:0 auto;width:100%}

/* ===== 動きを止めたい人には色だけで伝える ===== */
@media (prefers-reduced-motion:reduce){
  .nx-core,.nx-core::before,.nx-core::after,.nx-core .nx-arc,.nx-exec-step,.nx-exec-step .nx-dot{animation:none !important}
}
@media (max-width:767px){
  :root{--nx-core-size:84px}
  .reactor-wrap{min-height:112px;padding:6px 0 4px}
  .nx-exec{font-size:12px}
}

/* ===== v1 の直書き色を v2 へ（トークンを通っていなかった箇所） ===== */
.dock{background:linear-gradient(to top,rgba(7,9,12,.92),transparent);border-top-color:var(--nx-line)}
#textin:focus{border-color:var(--nx-accent);box-shadow:0 0 0 3px rgba(90,200,250,.18)}
.menusheet{background:linear-gradient(160deg,rgba(20,26,34,.98),rgba(13,17,23,.99));box-shadow:var(--nx-shadow)}
#menu::before{background:rgba(7,9,12,.72)}

/* ===== 中枢まわりの仕上げ =====
 * 3D の格子（#gl3d）は取れた端末ではそのまま見せる（HUD の主役）。 */
body.nx-display #core{opacity:.85}
/* Core の輪が明るい絵の上でも読めるよう、輪の内側にだけ薄い地を敷く */
.nx-core{background:radial-gradient(circle,rgba(7,9,12,.8) 0 32%,rgba(7,9,12,.28) 55%,transparent 72%)}
/* 起動の幕 */
#boot{background:radial-gradient(ellipse at 50% 45%,#10161e 0%,#07090c 70%)}
.boot-title{font-family:var(--nx-font-en);font-weight:700;text-shadow:none;color:var(--nx-fg)}
.boot-sub{color:var(--nx-fg-3)}
.boot-ring::before{border-color:var(--nx-line-2)}
.boot-core{background:radial-gradient(circle,#e6f4fb 0%,var(--nx-accent) 45%,rgba(90,200,250,0) 75%);box-shadow:0 0 28px rgba(90,200,250,.45)}