/* AI CAD 生成ライブ — 展示会ブース用
   面の明度は4段だけ持つ。色を増やさず、質感を1枚重ねる。 */

:root {
  --l0: #080b10;   /* 最暗・ページ地 */
  --l1: #0d1117;   /* パネル地 */
  --l2: #141b24;   /* 一段持ち上げ */
  --l3: #1e2833;   /* 罫・境界 */

  --ink:      #e8eef5;
  --ink-dim:  #9aa8b8;
  --ink-mute: #64748b;

  --accent:  #59b0ff;   /* 3D側 */
  --accent2: #7ee0c0;   /* 2D側 */
  --warn:    #ffc95c;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --ease: cubic-bezier(0.4, 0.4, 0, 1);

  --jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium",
        "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--l0);
  color: var(--ink);
  font-family: var(--jp);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* 質感を1枚だけ重ねる（色は増やさない） */
.grain {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

body > * { position: relative; z-index: 1; }

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.35;
  margin: 0;
}

/* ── ヘッダ ───────────────────────────── */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--l3);
  background: linear-gradient(180deg, var(--l1), var(--l0));
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 13px; }

.brand-mark {
  width: 32px; height: 32px;
  color: var(--accent);
  flex: none;
}

.brand-text { display: flex; flex-direction: column; gap: 2px; }
.brand-text strong { font-size: 17px; letter-spacing: 0.04em; }
.brand-text span { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.03em; }

.filters { display: flex; gap: 6px; }

.filter {
  appearance: none;
  border: 1px solid var(--l3);
  background: transparent;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 13px;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.filter:hover { color: var(--ink); border-color: #2c3a4a; }
.filter.is-on {
  color: var(--l0);
  background: var(--ink);
  border-color: var(--ink);
  font-weight: 700;
}

main { flex: 1; }

/* ── 事例グリッド ─────────────────────── */

.catalog { padding: 34px 28px 8px; }

.catalog-head { margin-bottom: 18px; }
.catalog-head h2 { font-size: 21px; }
.catalog-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-mute); }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 14px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  appearance: none;
  border: 1px solid var(--l3);
  background: var(--l1);
  color: inherit;
  font-family: inherit;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: transform .28s var(--ease), border-color .28s var(--ease), background .28s var(--ease);
}
.card:hover { transform: translateY(-3px); border-color: #33475c; background: var(--l2); }
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.card[hidden] { display: none; }

.card-thumb {
  aspect-ratio: 4 / 3;
  background: var(--l2);
  display: block;
  width: 100%;
  object-fit: cover;
  border-bottom: 1px solid var(--l3);
}

.card-thumb-fallback {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, rgba(89,176,255,.07), transparent 60%),
    var(--l2);
  border-bottom: 1px solid var(--l3);
  color: var(--ink-mute);
  font-size: 12px;
  letter-spacing: .08em;
}

.card-body { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 6px; }

.card-cat {
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.card-cat.manufacturing { color: var(--accent); }
.card-cat.architecture { color: var(--accent2); }

.card-title { font-size: 15px; font-weight: 700; line-height: 1.4; }
.card-sub { font-size: 12px; color: var(--ink-dim); line-height: 1.55; }

.card-stats {
  margin-top: 4px;
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--ink-mute);
  font-family: var(--mono);
}

.card.is-pending { opacity: .45; cursor: not-allowed; }
.card.is-pending:hover { transform: none; }

/* ── ステージ ─────────────────────────── */

.stage { padding: 12px 28px 40px; }
.stage[hidden] { display: none; }

.stage-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 0 18px;
  flex-wrap: wrap;
}

.stage-badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: .14em;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--l3);
  color: var(--ink-dim);
  margin-bottom: 8px;
}
.stage-badge.manufacturing { color: var(--accent); border-color: rgba(89,176,255,.4); }
.stage-badge.architecture { color: var(--accent2); border-color: rgba(126,224,192,.4); }

.stage-title h2 { font-size: 25px; }
.stage-title p { margin: 5px 0 0; font-size: 13px; color: var(--ink-dim); }

.back {
  appearance: none;
  border: 1px solid var(--l3);
  background: transparent;
  color: var(--ink-dim);
  font-family: inherit;
  font-size: 13px;
  padding: 8px 15px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.back:hover { color: var(--ink); border-color: #33475c; }

/* 2ペイン */
.panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.pane {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--l3);
  border-radius: var(--r-md);
  background: var(--l1);
  overflow: hidden;
  min-height: 0;
}

.pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--l3);
  background: var(--l2);
}
.pane-head h3 { font-size: 13px; letter-spacing: .06em; }

.pane-meter {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.pane-2d .pane-meter { color: var(--accent2); }
.pane-3d .pane-meter { color: var(--accent); }

.pane-body {
  position: relative;
  height: clamp(320px, 46vh, 560px);
  overflow: hidden;
}

.pane-foot {
  padding: 8px 14px;
  border-top: 1px solid var(--l3);
  font-size: 11px;
  color: var(--ink-mute);
}

.pane-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-mute);
  font-size: 13px;
}

/* 2D: 図面は白地の方が読める（紙に寄せる） */
.pane-2d .pane-body {
  background: #f4f6f8;
  display: grid;
  place-items: center;
}
.pane-2d .pane-body svg {
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  margin: 12px;
  display: block;
}
.pane-2d .pane-empty { background: #f4f6f8; color: #64748b; }

.pane-3d .pane-body {
  background:
    radial-gradient(120% 90% at 50% 0%, #16202c 0%, var(--l1) 55%, #070a0e 100%);
}
.pane-3d canvas { display: block; width: 100%; height: 100%; }

/* ── トランスポート ───────────────────── */

.transport {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid var(--l3);
  border-radius: var(--r-md);
  background: var(--l1);
  flex-wrap: wrap;
}

.play {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #06131f;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
  transition: filter .2s var(--ease);
  flex: none;
}
.play:hover { filter: brightness(1.1); }
.play svg { width: 15px; height: 15px; flex: none; }
.play .ico-pause { display: none; }
.play.is-playing .ico-play { display: none; }
.play.is-playing .ico-pause { display: block; }

.scrub {
  appearance: none;
  flex: 1 1 220px;
  height: 4px;
  border-radius: 999px;
  background: var(--l3);
  cursor: pointer;
}
.scrub::-webkit-slider-thumb {
  appearance: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--l1);
  box-shadow: 0 0 0 1px var(--l3);
}
.scrub::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--l1);
}

.speeds { display: flex; gap: 4px; flex: none; }
.speed {
  appearance: none;
  border: 1px solid var(--l3);
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--mono);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.speed.is-on { color: var(--ink); border-color: #3c5064; background: var(--l2); }

.loop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-mute);
  cursor: pointer;
  flex: none;
}
.loop input { accent-color: var(--accent); }

/* ── 下段: コード + 事実 ──────────────── */

.lower {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 14px;
  margin-top: 14px;
}

.codewrap {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--l3);
  border-radius: var(--r-md);
  background: var(--l1);
  overflow: hidden;
  min-width: 0;
}

.code {
  margin: 0;
  padding: 14px 16px;
  height: clamp(230px, 30vh, 380px);
  overflow: auto;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.68;
  color: #c9d6e4;
  tab-size: 4;
  white-space: pre;
}

.code .ln {
  display: block;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.code .ln.on { opacity: 1; transform: none; }
.code .ln.head { color: #7ee0c0; }

.tk-kw  { color: #ff9ec4; }
.tk-str { color: #a5e6a0; }
.tk-num { color: #ffc95c; }
.tk-com { color: #5c7085; font-style: italic; }
.tk-def { color: #59b0ff; }

.cursor {
  display: inline-block;
  width: 7px;
  height: 1em;
  background: var(--accent);
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

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

.fact-block {
  border: 1px solid var(--l3);
  border-radius: var(--r-md);
  background: var(--l1);
  padding: 14px 16px;
}
.fact-block h3 {
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-mute);
  margin-bottom: 9px;
}
.fact-block p { margin: 0; font-size: 13px; line-height: 1.85; color: var(--ink-dim); }

.highlights { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.highlights li {
  font-size: 12.5px;
  color: var(--ink-dim);
  padding-left: 17px;
  position: relative;
  line-height: 1.6;
}
.highlights li::before {
  content: "";
  position: absolute;
  left: 3px; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

.checks { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.check-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--l2);
}
.check-row:last-child { border-bottom: none; padding-bottom: 0; }
.check-name { color: var(--ink-dim); }
.check-val { font-family: var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.check-ok { color: var(--accent2); }
.check-ng { color: var(--warn); }

.outputs { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.outputs li {
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 10px;
  border: 1px solid var(--l3);
  border-radius: var(--r-sm);
  color: var(--ink-dim);
}
.outputs li b { color: var(--accent); font-weight: 700; }

/* ── フッタ ───────────────────────────── */

.colophon {
  padding: 26px 28px 34px;
  border-top: 1px solid var(--l3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.colophon p { margin: 0; font-size: 11px; color: var(--ink-mute); line-height: 1.7; }
.colophon-brand { letter-spacing: .2em; color: var(--ink-dim) !important; }

/* ── 立ち上がり（1種類だけ・箇所を増やす） ── */

.rise { opacity: 0; transform: translateY(10px); animation: rise .5s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ── 狭幅では組みを変える（縮めない） ──── */

@media (max-width: 900px) {
  .masthead { padding: 14px 16px; }
  .catalog { padding: 24px 16px 6px; }
  .stage { padding: 10px 16px 32px; }
  .colophon { padding: 22px 16px 30px; }

  .panes { grid-template-columns: 1fr; }
  .lower { grid-template-columns: 1fr; }

  .pane-body { height: clamp(260px, 38vh, 400px); }
  .code { height: 220px; }

  .cards { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
  .card-title { font-size: 14px; }
  .stage-title h2 { font-size: 20px; }

  .transport { gap: 10px; }
  .scrub { flex-basis: 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .cursor { animation: none; }
}

@media print {
  .grain, .transport, .filters, .back { display: none; }
  body { background: #fff; color: #000; }
}