/* 船橋電子エンジニアリング 試作LP（2026-11-07）
   スマホ最優先。縦にスワイプすると各場面が画面単位で切り替わる（CSS scroll snap、縦のみ）。
   場面: 1 悩みと人物（真っ黒） → 2 画面いっぱいのメッセージ画面（架空の会話例） → 3 業務アプリの画面イメージ
         → 4 対応例・進め方 → 5 私たち・メンバー → 6 悩みを入れる欄 → 全画面の会話画面（試作）
   本人の最新訂正「中途半端にスワイプできちゃうのダメ」に従い、html に scroll-snap-type: y mandatory を付け、
   各場面を scroll-snap-align: start / scroll-snap-stop: always にした。横送りはしない。
   場面が画面より長いとき（短い画面・文字拡大）は、場面の中を通常どおりスクロールできる（snap領域が
   画面より大きい場合は、その中の任意の位置が有効な停止位置になる仕様）。
   入力欄にフォーカス中と会話画面を開いている間は、JSが html.snap-off を付けて snap を止める。
   reduced-motion では snap を proximity に弱め、浮かび上がりの動きは止めて最初から全部表示する。
   JSが無い場合も全内容が表示され、snap はCSSだけで働く。音声の自動再生なし。 */

:root {
  --bg: #000000;
  --bg-2: #070707;
  --bg-3: #0f0f0f;
  --panel: #151515;
  --panel-2: #1d1d1d;
  --line: #2a2a2a;
  --line-2: #3a3a3a;
  --text: #ffffff;
  --muted: #b5b5b5;
  --muted-2: #8a8a8a;
  --accent: #5fd3c0;
  --accent-ink: #052521;
  --accent-deep: #0f766e;
  --gutter: 20px;
  --wrap: 1040px;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic Medium", "Yu Gothic", "Meiryo", "Noto Sans JP", system-ui, sans-serif;
}

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* 画面単位の切り替え。縦だけ。横送りはしない */
  scroll-snap-type: y mandatory;
}

/* 入力中・会話画面を開いている間は切り替えを止める（JSが付ける） */
html.snap-off {
  scroll-snap-type: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.8;
  font-feature-settings: "palt" 1;
  overflow-wrap: anywhere;
  line-break: strict;
  overflow-x: clip;
}

body.has-dialog {
  overflow: hidden;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 700;
  letter-spacing: 0.02em;
  word-break: auto-phrase;
  text-wrap: balance;
}

img,
svg {
  display: block;
}

a {
  color: var(--text);
  text-underline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
}

main:focus {
  outline: none;
}

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

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-weight: 700;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.ico {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.br-narrow {
  display: none;
}

/* ===== 場面の共通 ===== */
.scene {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  /* 各場面の先頭で止まる。弾いても1場面ずつ進む */
  scroll-snap-align: start;
  scroll-snap-stop: always;
  padding: clamp(64px, 12vh, 120px) var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.scene-inner {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.scene-inner-wide {
  max-width: var(--wrap);
}

.scene-label {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.scene-title {
  margin-top: 10px;
  font-size: clamp(1.5rem, 5.6vw, 2.25rem);
  line-height: 1.45;
}

.fiction-note,
.member-note,
.team-note,
.ask-note,
.ask-hint {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.7;
}

.fiction-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 4px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.fiction-note::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* 見えたら浮かび上がる（JSが有効なときだけ隠す。reduced-motion では常時表示） */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* ===== 場面1：悩みと人物 ===== */
.scene-hero {
  justify-content: space-between;
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: 0;
  background: var(--bg);
}

.hero-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  filter: invert(1);
  opacity: 0.85;
}

.brand-name {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* 悩みの文：広告の問いかけではなく、本人の頭の中の言葉。太すぎず、少し間を空けて置く */
.hero-copy {
  margin-top: clamp(28px, 8vh, 80px);
  text-align: center;
}

.scene-hero h1 {
  font-size: clamp(1.625rem, 7vw, 2.75rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--text);
  text-wrap: wrap;
}

.hero-sub {
  margin-top: 10px;
  color: var(--muted);
  font-size: clamp(0.9375rem, 3.8vw, 1.125rem);
  line-height: 1.7;
  letter-spacing: 0.03em;
}

.hero-figure {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 16px;
}

/* 人物画像（941×1673）は上の約4割が黒い余白で、頭は上から約42%の位置にある。
   高さを画面比で決めて cover で切ると、縦長でない画面で頭が切れる。
   そこで「上の37%だけを切り落とす」比率（941 : 1673×0.63）を固定し、
   幅の方を画面の高さに合わせて縮める。これで頭が欠けることはなく、縦横どちらでも全身の見え方が同じになる。 */
.hero-img {
  width: min(100%, 52vh);
  width: min(100%, 52svh);
  height: auto;
  aspect-ratio: 941 / 1054;
  object-fit: cover;
  object-position: center bottom;
}

.hero-caption {
  position: absolute;
  right: 0;
  bottom: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.78);
  color: #d6d6d6;
  font-size: 0.75rem;
  line-height: 1.6;
}

.scroll-hint {
  position: absolute;
  bottom: calc(10px + env(safe-area-inset-bottom));
  left: 50%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  color: var(--muted-2);
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  transform: translateX(-50%);
  pointer-events: none;
}

.scroll-hint .ico {
  width: 20px;
  height: 20px;
  animation: hint-bob 2.2s ease-in-out infinite;
}

@keyframes hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(4px); opacity: 1; }
}

/* ===== 場面2：画面いっぱいのメッセージ画面（架空の会話例） =====
   見出しや説明を先に立てず、スマホの画面全体を会話UIにする。上に相手（会社）の名前、
   中央に会話、下に入力欄の形だけ。相談者は冒頭の人物画像を円形に切り抜いた顔、会社側はロゴ。 */
.scene-chat {
  justify-content: stretch;
  padding: 0;
  background: var(--bg-2);
}

.chatui {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  max-width: 520px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0 auto;
  padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.chatui-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid var(--line);
}

.chatui-name {
  flex: 1;
  min-width: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}

.chatui-tag {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.9;
}

/* 顔・ロゴの丸いアイコン */
.avatar {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar-co {
  background: var(--text);
}

.avatar-co img {
  width: 72%;
  height: 72%;
}

/* 人物画像（941×1673）の顔のあたり（横 約230〜750px、縦 約700〜1220px）だけを丸く見せる。
   枠の幅に対して画像を180%に拡大し、左上の位置をずらして顔を中央に置く。 */
.avatar-person {
  background: #1a1a1a;
}

.avatar-person img {
  position: absolute;
  top: -135%;
  left: -44%;
  width: 180%;
  max-width: none;
  height: auto;
}

.bubbles {
  display: grid;
  flex: 1;
  align-content: center;
  gap: 10px;
  padding: 12px 0 8px;
}

.bubble {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: end;
  gap: 8px;
  max-width: 92%;
}

.bubble .avatar {
  width: 32px;
  height: 32px;
}

.bubble p {
  padding: 9px 13px;
  border-radius: 18px;
  font-size: 0.9375rem;
  line-height: 1.65;
}

.bubble-fde {
  justify-self: start;
}

.bubble-fde p {
  border-bottom-left-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
}

.bubble-you {
  grid-template-columns: minmax(0, 1fr) 32px;
  justify-self: end;
}

.bubble-you .avatar {
  order: 2;
}

.bubble-you p {
  order: 1;
  justify-self: end;
  border-bottom-right-radius: 6px;
  background: var(--accent);
  color: var(--accent-ink);
}

.chatui-compose {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted-2);
  font-size: 0.875rem;
}

.chatui-note {
  margin-top: 8px;
  color: var(--muted-2);
  font-size: 0.75rem;
  line-height: 1.6;
  text-align: center;
}

.app-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.9;
}

/* 画面に入ったとき、会話が順に出る（JS有効時のみ。reduced-motion では最初から全部表示） */
.js .bubbles [data-reveal]:nth-child(2).is-in { transition-delay: 0.15s; }
.js .bubbles [data-reveal]:nth-child(3).is-in { transition-delay: 0.3s; }
.js .bubbles [data-reveal]:nth-child(4).is-in { transition-delay: 0.45s; }
.js .bubbles [data-reveal]:nth-child(5).is-in { transition-delay: 0.6s; }
.js .bubbles [data-reveal]:nth-child(6).is-in { transition-delay: 0.75s; }

/* ===== 場面3：業務アプリの画面イメージ ===== */
.scene-app {
  background: var(--bg-3);
}

.scene-app .scene-inner {
  max-width: 820px;
}

.app {
  margin: 24px auto 0;
  border: 1px solid var(--line-2);
  border-radius: 20px;
  background: var(--panel);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.app-title {
  font-size: 0.9375rem;
  font-weight: 700;
}

.app-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.app-side {
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.app-main {
  padding: 16px;
}

.app-h {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.app-conds {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.app-conds li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 4px 12px;
  border-radius: 10px;
  background: var(--panel-2);
  font-size: 0.875rem;
  line-height: 1.4;
}

.app-conds strong {
  color: var(--accent);
}

.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.9375rem;
  font-weight: 700;
}

.grid {
  display: grid;
  grid-template-columns: 30px repeat(7, minmax(0, 1fr));
  gap: 3px;
  margin-top: 10px;
}

.cell {
  display: grid;
  place-items: center;
  min-height: 30px;
  border-radius: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
}

.c-h {
  min-height: 22px;
  color: var(--muted-2);
  font-size: 0.75rem;
}

.c-n {
  color: var(--muted);
}

.c-day {
  background: #e6f6f2;
  color: var(--accent-ink);
}

.c-night {
  background: var(--accent-deep);
  color: var(--text);
}

.c-off {
  background: #262626;
  color: #b0b0b0;
}

.app-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.75rem;
}

.app-legend .cell {
  width: 24px;
  min-height: 22px;
  font-size: 0.6875rem;
}

.app-foot {
  margin-top: 10px;
  color: var(--muted-2);
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* ===== 場面4：対応例・進め方 ===== */
.scene-cases {
  background: var(--bg-2);
}

.member-note {
  margin-top: 14px;
  padding: 10px 14px;
  border-left: 3px solid var(--line-2);
}

.case-list {
  display: grid;
  gap: 12px;
  margin-top: 24px;
}

.case {
  padding: 18px 18px 20px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}

.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.9;
}

.tag-role {
  background: var(--panel-2);
  color: var(--muted);
}

.case h3 {
  margin-top: 12px;
  font-size: 1.125rem;
  line-height: 1.5;
}

.case-facts {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.case-facts dt {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
}

.case-facts dd {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

.sub-title {
  margin-top: 40px;
  font-size: 1.25rem;
}

.process {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.process li {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-areas:
    "num title"
    "num text";
  gap: 2px 14px;
  padding: 16px 60px 16px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
}

.step-num {
  grid-area: num;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

.step-ico {
  position: absolute;
  top: 16px;
  right: 16px;
  color: var(--accent);
}

.process h4 {
  grid-area: title;
  font-size: 1.0625rem;
  line-height: 1.5;
}

.process p {
  grid-area: text;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* ===== 場面5：私たち・メンバー ===== */
.scene-team {
  background: var(--bg-3);
}

.team-lead {
  margin-top: 14px;
  color: var(--muted);
  font-size: 1rem;
}

.facts {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.facts div {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
}

.facts dt {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
}

.facts dd {
  margin-top: 2px;
  font-size: 0.9375rem;
  font-weight: 700;
}

.members {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.member {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  padding: 18px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
}

.member-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--panel-2);
  color: var(--accent);
  font-size: 1.375rem;
  font-weight: 700;
}

.member-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  font-size: 1.25rem;
  line-height: 1.3;
}

.member-kana {
  color: var(--muted-2);
  font-size: 0.8125rem;
}

.member-range-title {
  margin-top: 8px;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
}

.member-range {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.member-range li {
  padding: 0 10px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.9;
}

.member-pending {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed var(--line-2);
  border-radius: 12px;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.7;
}

.pending-tag {
  display: inline-block;
  margin-right: 8px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.8;
  vertical-align: middle;
}

.team-note {
  margin-top: 14px;
}

/* ===== 場面6：悩みを入れる欄（ChatGPTの入力欄に近い見た目） ===== */
.scene-ask {
  background: linear-gradient(180deg, var(--bg-3) 0%, var(--bg) 35%);
  padding-bottom: 0;
}

.scene-ask .scene-inner {
  max-width: 720px;
  text-align: center;
}

.ask-lead {
  margin-top: 14px;
  color: var(--muted);
}

.ask-form {
  margin-top: 24px;
  text-align: left;
}

.ask-box {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 10px 10px 18px;
  border: 1px solid var(--line-2);
  border-radius: 28px;
  background: var(--panel);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ask-box:focus-within {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text);
}

.ask-input {
  flex: 1;
  min-width: 0;
  min-height: 28px;
  max-height: 160px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.6;
  resize: none;
  outline: none;
}

.ask-input::placeholder {
  color: var(--muted-2);
}

.ask-send {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 14px 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.ask-send[aria-disabled="true"] {
  opacity: 0.35;
}

.ask-send .ico {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.ask-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.quick {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.quick:hover {
  border-color: var(--text);
  color: var(--text);
}

.ask-note {
  margin-top: 14px;
}

.ask-mail {
  margin-top: 28px;
  font-size: 1rem;
}

.ask-mail a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

.ask-hint {
  margin-top: 6px;
}

.site-footer {
  margin-top: clamp(48px, 10vh, 96px);
  padding: 24px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  color: var(--muted-2);
  font-size: 0.8125rem;
  text-align: center;
}

/* ===== 全画面の会話画面（試作） =====
   上に 戻る／題と「未接続」の帯／閉じる。その下に 文字↔声 の切り替え。
   中央はやり取りの記録、下は入力欄（文字）または円形の表示と 話す／終了（声）。
   AI・音声・マイク・外部通信は未接続。返答は固定の見本で、各発言に札を付ける。 */
.chat {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

.chat::backdrop {
  background: rgba(0, 0, 0, 0.8);
}

.chat:not([open]) {
  display: none;
}

.chat.is-fallback[open] {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 300;
}

.chat-screen {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-width: 820px;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg);
}

.chat-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.chat-back,
.chat-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}

.chat-close {
  width: 44px;
  padding: 0;
  border-radius: 50%;
}

.chat-back:hover,
.chat-close:hover {
  background: var(--panel-2);
}

.chat-back .ico {
  width: 22px;
  height: 22px;
}

.chat-heading {
  min-width: 0;
  text-align: center;
}

.chat-title {
  font-size: 1.0625rem;
  line-height: 1.4;
}

.chat-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-top: 4px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.9;
}

.chat-badge::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.chat-modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  max-width: 320px;
  margin: 12px auto 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
}

.mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.mode-btn .ico {
  width: 20px;
  height: 20px;
}

.mode-btn[aria-pressed="true"] {
  background: var(--text);
  color: var(--bg);
}

.chat-body {
  flex: 1;
  min-height: 0;
  margin-top: 12px;
  padding: 4px 2px;
  overflow-y: auto;
}

.chat-log {
  display: grid;
  gap: 10px;
}

.msg {
  max-width: 88%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.msg-you {
  justify-self: end;
  border-bottom-right-radius: 6px;
  background: var(--accent);
  color: var(--accent-ink);
}

.msg-demo {
  justify-self: start;
  border: 1px dashed var(--line-2);
  border-bottom-left-radius: 6px;
  background: var(--panel);
  color: var(--text);
}

.msg-demo p {
  margin-top: 4px;
}

.msg-tag {
  display: inline-block;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.8;
}

.msg-note {
  max-width: none;
  justify-self: center;
  padding: 2px 10px;
  color: var(--muted-2);
  font-size: 0.8125rem;
  text-align: center;
}

.msg-pending {
  padding: 12px 18px;
}

.msg-dots {
  display: inline-flex;
  gap: 6px;
  height: 20px;
  align-items: center;
}

.msg-dots i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: dot-blink 1.1s ease-in-out infinite;
}

.msg-dots i:nth-child(2) { animation-delay: 0.18s; }
.msg-dots i:nth-child(3) { animation-delay: 0.36s; }

@keyframes dot-blink {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

.chat-compose {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.chat-compose[hidden],
.chat-voice[hidden] {
  display: none;
}

.chat-input-row {
  display: flex;
  gap: 8px;
}

.chat-input {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  padding: 10px 18px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
}

.chat-input::placeholder {
  color: var(--muted-2);
}

.chat-input:focus-visible {
  border-color: var(--text);
  outline-offset: 1px;
}

.chat-send {
  display: grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
}

.chat-send[aria-disabled="true"],
.voice-btn[aria-disabled="true"],
.voice-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* 声の画面：GPT Voice風の円形の表示と 話す／終了（見本。マイクは使わない） */
.chat-voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.voice-orb {
  position: relative;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
}

.orb-ring {
  position: absolute;
  inset: 0;
  border: 2px solid var(--line-2);
  border-radius: 50%;
  opacity: 0.9;
  transition: border-color 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.orb-ring-2 {
  inset: 14px;
  opacity: 0.6;
}

.orb-core {
  position: relative;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff 0, #d9d9d9 55%, #9a9a9a 100%);
  color: var(--bg);
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.18);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.orb-icon {
  width: 44px;
  height: 44px;
  stroke-width: 1.6;
}

.orb-bars {
  position: absolute;
  display: none;
  align-items: center;
  gap: 6px;
  height: 48px;
}

.orb-bars i {
  display: block;
  width: 8px;
  height: 18px;
  border-radius: 999px;
  background: currentColor;
}

.voice-orb[data-state="listening"] .orb-core {
  background: radial-gradient(circle at 35% 30%, #a9f0e3 0, var(--accent) 55%, var(--accent-deep) 100%);
  color: var(--accent-ink);
  box-shadow: 0 0 80px rgba(95, 211, 192, 0.35);
  transform: scale(1.04);
}

.voice-orb[data-state="listening"] .orb-ring {
  border-color: var(--accent);
  animation: orb-pulse 1.6s ease-out infinite;
}

.voice-orb[data-state="listening"] .orb-ring-2 {
  animation-delay: 0.5s;
}

.voice-orb[data-state="thinking"] .orb-core {
  background: var(--panel-2);
  color: var(--text);
  box-shadow: none;
}

.voice-orb[data-state="thinking"] .orb-icon {
  opacity: 0.35;
}

.voice-orb[data-state="thinking"] .orb-ring-1 {
  border-style: dashed;
  border-color: var(--accent);
  animation: orb-spin 2.4s linear infinite;
}

.voice-orb[data-state="thinking"] .orb-ring-2 {
  opacity: 0;
}

.voice-orb[data-state="speaking"] .orb-core {
  background: #ffffff;
  color: var(--bg);
  box-shadow: 0 0 80px rgba(255, 255, 255, 0.3);
}

.voice-orb[data-state="speaking"] .orb-icon {
  opacity: 0;
}

.voice-orb[data-state="speaking"] .orb-bars {
  display: flex;
}

.voice-orb[data-state="speaking"] .orb-bars i {
  animation: orb-bar 0.9s ease-in-out infinite;
}

.voice-orb[data-state="speaking"] .orb-bars i:nth-child(2) { animation-delay: 0.12s; }
.voice-orb[data-state="speaking"] .orb-bars i:nth-child(3) { animation-delay: 0.24s; }
.voice-orb[data-state="speaking"] .orb-bars i:nth-child(4) { animation-delay: 0.36s; }
.voice-orb[data-state="speaking"] .orb-bars i:nth-child(5) { animation-delay: 0.48s; }

.voice-orb[data-state="speaking"] .orb-ring {
  border-color: #ffffff;
}

.voice-orb[data-state="ended"] .orb-core {
  background: var(--panel-2);
  color: var(--muted-2);
  box-shadow: none;
}

.voice-orb[data-state="ended"] .orb-ring {
  border-color: var(--line);
}

@keyframes orb-pulse {
  0% { transform: scale(0.92); opacity: 0.9; }
  100% { transform: scale(1.12); opacity: 0; }
}

@keyframes orb-spin {
  to { transform: rotate(360deg); }
}

@keyframes orb-bar {
  0%, 100% { height: 14px; }
  50% { height: 44px; }
}

.voice-state {
  min-height: 1.6em;
  margin-top: 12px;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.voice-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}

.voice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.voice-btn .ico {
  width: 22px;
  height: 22px;
}

.voice-btn-talk {
  flex: 1 1 60%;
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}

.voice-btn-talk[aria-pressed="true"] {
  background: var(--bg);
  border-color: var(--text);
  color: var(--text);
}

.voice-btn-end {
  background: var(--panel);
  border-color: var(--line-2);
  color: var(--text);
}

.voice-btn-end:hover:not(:disabled) {
  background: var(--panel-2);
}

.chat-foot {
  margin-top: 10px;
  color: var(--muted-2);
  font-size: 0.75rem;
  line-height: 1.7;
  text-align: center;
}

.chat-foot a {
  color: var(--muted);
}

/* ===== タブレット以上 ===== */
@media (min-width: 700px) {
  :root {
    --gutter: 32px;
  }

  .app-body {
    grid-template-columns: 240px minmax(0, 1fr);
  }

  .app-side {
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .case-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .members {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chat-screen {
    padding-right: 24px;
    padding-left: 24px;
  }
}

/* ===== PC ===== */
@media (min-width: 960px) {
  :root {
    --gutter: 48px;
  }

  .scene {
    padding-top: clamp(80px, 12vh, 140px);
    padding-bottom: clamp(80px, 12vh, 140px);
  }

  /* 最初の画面：左に文、右下に人物。黒い余白を広く取る */
  .scene-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "brand brand"
      "copy figure";
    align-items: end;
    column-gap: 40px;
    width: 100%;
    max-width: 1160px;
    margin: 0 auto;
    padding-top: calc(28px + env(safe-area-inset-top));
  }

  .hero-brand {
    grid-area: brand;
  }

  .hero-copy {
    grid-area: copy;
    align-self: center;
    margin-top: 0;
    padding-bottom: 12vh;
    text-align: left;
  }

  .scene-hero h1 {
    font-size: clamp(2.125rem, 3.4vw, 3rem);
    line-height: 1.45;
  }

  .hero-sub {
    font-size: 1.125rem;
  }

  .hero-figure {
    grid-area: figure;
    display: flex;
    justify-content: center;
    align-self: end;
    margin-top: 0;
  }

  /* PCも同じ比率（上37%を切り落とす）のまま、高さ82svhに収まる幅にする */
  .hero-img {
    width: min(100%, 73vh);
    width: min(100%, 73svh);
    height: auto;
  }

  .scroll-hint {
    bottom: 20px;
    left: 25%;
  }

  .chatui {
    max-width: 560px;
    border-right: 1px solid var(--line);
    border-left: 1px solid var(--line);
    padding-right: 20px;
    padding-left: 20px;
  }

  .process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .process li {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "num"
      "title"
      "text";
    gap: 10px 0;
    padding: 20px 18px 20px;
  }

  .step-ico {
    top: 20px;
    right: 18px;
  }
}

/* ===== 幅360px前後の小さいスマホ ===== */
@media (max-width: 380px) {
  :root {
    --gutter: 16px;
  }

  .scene-hero h1 {
    font-size: 1.75rem;
  }

  .bubble {
    font-size: 0.875rem;
  }

  .grid {
    grid-template-columns: 24px repeat(7, minmax(0, 1fr));
    gap: 2px;
  }

  .cell {
    min-height: 28px;
    font-size: 0.75rem;
  }
}

/* 縦が短い画面（スマホ横向きなど）：人物の幅を抑えて文を読めるようにする（比率は同じなので頭は切れない） */
@media (max-height: 560px) {
  .hero-img {
    width: min(100%, 42vh);
    width: min(100%, 42svh);
  }
}

/* 高さが小さいスマホの会話画面（声の表示）：円と操作を小さくし、やり取りの欄を残す */
@media (max-height: 700px) {
  .chat-modes {
    margin-top: 8px;
  }

  .chat-modes .mode-btn {
    min-height: 40px;
  }

  .chat-body {
    margin-top: 8px;
  }

  .chat-voice {
    margin-top: 6px;
    padding-top: 8px;
  }

  .voice-orb {
    width: 108px;
    height: 108px;
  }

  .orb-ring-2 {
    inset: 10px;
  }

  .orb-core {
    width: 76px;
    height: 76px;
  }

  .orb-icon {
    width: 30px;
    height: 30px;
  }

  .orb-bars {
    height: 36px;
  }

  @keyframes orb-bar {
    0%, 100% { height: 10px; }
    50% { height: 32px; }
  }

  .voice-state {
    margin-top: 6px;
    font-size: 0.8125rem;
  }

  .voice-controls {
    margin-top: 8px;
    gap: 8px;
  }

  .voice-btn {
    min-height: 44px;
    padding: 6px 16px;
    font-size: 0.9375rem;
  }

  .chat-foot {
    margin-top: 6px;
    font-size: 0.6875rem;
    line-height: 1.5;
  }
}

/* ===== 動きを減らす設定：全内容を最初から表示し、動きを止める ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* 動きを減らす設定では、画面単位の切り替えを弱める（近くでだけ止まる）。内容はすべて見られる */
  html {
    scroll-snap-type: y proximity;
  }

  .scene {
    scroll-snap-stop: normal;
  }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .voice-orb[data-state="listening"] .orb-ring {
    border-width: 4px;
  }

  .voice-orb[data-state="speaking"] .orb-bars i:nth-child(odd) {
    height: 36px;
  }

  .msg-dots i {
    opacity: 0.7;
  }
}
/* Codex: smartphone scenes occupy one fixed stage; no inter-scene scroll. */
html.story-mode, .story-mode body { height:100%; overflow:hidden; scroll-snap-type:none; }
.story-mode main > .scene { position:fixed; inset:0; height:100dvh; min-height:0; overflow-y:auto; overscroll-behavior:contain; visibility:hidden; pointer-events:none; justify-content:flex-start; }
.story-mode main > .scene.is-active { visibility:visible; pointer-events:auto; }
.story-mode .scene-hero { justify-content:space-between; overflow:hidden; }
.story-mode .scene-hero .hero-copy { margin-top:24px; }
.story-mode .hero-img { max-height:58dvh; width:auto; max-width:100%; }
.story-mode .chatui { min-height:100%; }
.story-mode .bubbles { align-content:start; padding-top:24px; }
.story-mode .bubble-you { grid-template-columns:32px minmax(0,1fr); justify-self:start; }
.story-mode .bubble-you .avatar { grid-column:1; grid-row:1; }
.story-mode .bubble-you p { grid-column:2; grid-row:1; }
.story-mode [data-reveal] { opacity:1; transform:none; }
.story-nav { position:fixed; z-index:15; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); display:flex; gap:6px; }
.story-nav button { background:#151515e8; border:1px solid #555; border-radius:50%; width:40px; height:40px; color:white; }
body.has-dialog .story-nav { display:none; }
.story-morph { position:fixed; z-index:30; overflow:hidden; pointer-events:none; background:#000; }
.story-morph img { width:100%; height:100%; object-fit:cover; object-position:center bottom; }
/* One utterance per gesture, in the same fixed conversation stage. */
.story-mode .bubbles > li[hidden] { display:none; }
.story-mode .chatui { height:100%; min-height:0; max-width:none; padding:24px; }
.story-mode .bubbles { display:block; flex:none; padding-top:36px; }
.story-mode .bubble { max-width: min(100%, 560px); align-items:start; }
.story-mode .bubble p { font-size:clamp(1rem, 3.6vw, 1.375rem); }
.story-mode .bubble .avatar { width:48px; height:48px; }
.story-mode .bubble-you, .story-mode .bubble-fde { grid-template-columns:48px minmax(0,1fr); gap:16px; }
.story-mode .chatui-compose { display:none; }
.story-mode .scene-hero .hero-copy { position:absolute; top:13%; left:20px; right:20px; margin:0; }
.story-mode .hero-figure { position:absolute; bottom:8%; left:0; height:60%; margin:0; align-items:end; }
.story-mode .hero-img { height:100%; width:auto; max-height:none; max-width:100%; object-fit:contain; }
.story-mode .hero-caption { bottom:0; right:24px; }
.story-mode .scene-hero h1 { font-size:clamp(1.6rem, 5.5vw, 2.75rem); }
.story-mode .story-nav button:disabled { opacity:.3; }
.story-mode .hero-img { object-fit:cover; object-position:center bottom; aspect-ratio:941 / 1054; }
/* The same face travels to the upper-right conversation position. */
.story-mode .bubble-you { margin-left:auto; grid-template-columns:minmax(0,1fr) 48px; }
.story-mode .bubble-you .avatar { grid-column:2; grid-row:1; }
.story-mode .bubble-you p { grid-column:1; grid-row:1; }
.story-mode .bubbles > li:not([hidden]) + li:not([hidden]) { margin-top:24px; }
.story-mode .chatui { height:auto; min-height:100%; padding-bottom:88px; }
/* Cover and a full-screen working view. */
.scene-cover { background:#070a09; color:#f4f8f6; padding:32px 26px 70px; }
.story-mode main > .scene-cover { justify-content:space-between; }
.cover-brand { display:flex; align-items:center; gap:10px; font-size:12px; letter-spacing:.04em; }
.cover-brand img { width:32px; height:32px; object-fit:contain; }
.cover-content { margin:auto 0; padding:48px 0; }
.cover-eyebrow { color:#a7c7bb; font-size:13px; margin-bottom:24px; }
.cover-content h1 { font-size:clamp(36px,9vw,76px); line-height:1.35; letter-spacing:-.045em; font-weight:700; }
.cover-lead { margin-top:26px; color:#acb9b3; font-size:15px; line-height:1.9; }
.cover-start { display:flex; align-items:center; justify-content:space-between; gap:40px; max-width:360px; background:#b9f5d7; color:#092519; padding:18px 22px; border-radius:6px; margin-top:36px; font-size:16px; font-weight:700; text-decoration:none; }
.cover-start:hover { background:#d5ffe9; }
.cover-start:active { transform:translateY(2px); }
.scene-cover .cover-content { text-align:center; margin:auto; width:100%; }
.scene-cover .cover-content h1 { font-size:clamp(27px,4.5vw,52px); line-height:1.65; letter-spacing:.01em; }
.scene-cover .cover-start { flex-direction:column; justify-content:center; gap:24px; max-width:none; width:fit-content; margin:32px auto 0; padding:12px; background:transparent; color:#acb9b3; font-size:clamp(13px,2vw,16px); font-weight:400; box-shadow:none; }
.scene-cover .cover-start:hover { color:#d5ffe9; background:transparent; }
.scene-cover .cover-start > span { font-size:28px; color:#b9f5d7; }
.scene-cover .cover-welcome { color:#9eafa5; font-size:13px; letter-spacing:.04em; margin-bottom:30px; }
.scene-cover .cover-content h1 { font-size:clamp(29px,4.8vw,66px); line-height:1.5; letter-spacing:-.035em; }
.cover-intro { font-size:clamp(13px,1.4vw,17px); line-height:2; color:#adbdb3; margin-top:28px; }
.scene-cover .cover-start { margin-top:36px; font-size:12px; gap:16px; }
.cover-colophon { width:100%; display:flex; justify-content:space-between; gap:16px; padding-top:16px; border-top:1px solid #304139; color:#83988b; font-size:10px; margin-bottom:24px; }
@media(max-width:600px) { .cover-colophon { flex-direction:column; gap:4px; } .scene-cover .cover-content { padding:22px 0; } }
@media(max-height:700px) { .scene-cover .cover-welcome { margin-bottom:16px; } .cover-intro { margin-top:16px; } .scene-cover .cover-start { margin-top:18px; } .cover-colophon { display:none; } }
.cover-foot { color:#7d9389; font-size:12px; }
.story-mode .scene-hero #hero-title { font-size:clamp(1.6rem,5.5vw,2.75rem); line-height:1.45; }
.story-mode main > .scene-app { padding:0; background:#111916; }
.scene-app .scene-inner { max-width:none; margin:0; }
.scene-app .app { margin:0; border:0; border-radius:0; box-shadow:none; min-height:100dvh; background:#111916; }
.scene-app .app-bar { padding:24px 20px 18px; background:#111916; }
.scene-app .app-title { font-size:20px; letter-spacing:-.035em; }
.scene-app .app-badge { font-size:10px; white-space:nowrap; }
.scene-app .app-body { display:grid; grid-template-columns:minmax(0,1fr); max-width:1400px; margin:auto; }
.scene-app .app-side { padding:20px; border-bottom:1px solid #2a3b33; }
.scene-app .app-conds { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.scene-app .app-conds li { display:flex; flex-direction:column; align-items:flex-start; gap:6px; padding:12px; border-radius:4px; background:#1b2922; font-size:12px; }
.scene-app .app-conds li:last-child { grid-column:1 / -1; flex-direction:row; align-items:center; }
.scene-app .app-conds strong { color:#b9f5d7; font-size:18px; }
.scene-app .app-conds li:last-child strong { font-size:13px; }
.scene-app .app-btn { border:0; border-radius:4px; background:#b9f5d7; color:#092519; justify-content:space-between; padding:12px 16px; min-height:44px; cursor:pointer; }
.scene-app .app-main { padding:20px 20px 76px; }
.scene-app .grid { gap:4px; margin-top:14px; }
.scene-app .grid .cell { min-height:clamp(27px,4.4dvh,46px); border-radius:3px; }
.scene-app .grid .c-h { min-height:20px; }
.scene-app .c-night { background:#365d4c; }
.scene-app .c-off { background:#1e2a24; color:#9cac9f; }
.scene-app .app-foot { font-size:12px; color:#a8b7ae; }
@media(min-width:768px) {
 .scene-cover { padding:40px max(40px,10vw) 70px; }
 .scene-app .app-bar { padding:28px 40px; }
 .scene-app .app-body { grid-template-columns:300px minmax(0,1fr); min-height:calc(100dvh - 85px); }
 .scene-app .app-side { padding:36px 24px; border-right:1px solid #2a3b33; border-bottom:0; }
 .scene-app .app-conds { grid-template-columns:1fr; gap:12px; }
 .scene-app .app-conds li { flex-direction:row; align-items:center; min-height:60px; }
 .scene-app .app-main { padding:36px 40px 76px; }
 .scene-app .grid .cell { min-height:clamp(42px,7dvh,72px); }
 .scene-app .grid .c-h { min-height:30px; }
}
@media(max-height:740px) and (max-width:767px) {
 .scene-app .app-bar { padding:16px 16px 12px; }
 .scene-app .app-side { padding:12px 16px; }
 .scene-app .app-conds li { padding:8px 10px; gap:3px; }
 .scene-app .app-main { padding:12px 16px 64px; }
 .scene-app .grid { margin-top:8px; gap:3px; }
 .scene-app .app-legend { margin-top:6px; }
 .cover-content { padding:24px 0; }
 .cover-content h1 { font-size:36px; }
 .cover-eyebrow { margin-bottom:16px; }
 .cover-lead { margin-top:18px; }
 .cover-start { margin-top:24px; }
}
@media(max-width:767px) {
 .scene-app .app-side { padding:14px 20px; }
 .scene-app .app-conds li { padding:8px 10px; gap:2px; min-height:0; }
 .scene-app .app-main { padding-top:14px; }
 .scene-app .grid .cell { min-height:clamp(24px,3.8dvh,34px); }
 .scene-app .grid .c-h { min-height:18px; }
}
@media(max-height:620px) and (max-width:767px) {
 .scene-app .app-bar { padding:12px 16px; }
 .scene-app .app-title { font-size:18px; }
 .scene-app .app-side { padding:8px 16px; }
 .scene-app .app-conds { gap:5px; margin-top:6px; }
 .scene-app .app-conds li { flex-direction:row; align-items:center; padding:7px; font-size:10px; }
 .scene-app .app-conds strong { font-size:14px; white-space:nowrap; }
 .scene-app .app-btn { min-height:40px; padding:8px 12px; margin-top:8px; }
 .scene-app .app-main { padding:8px 16px 56px; }
 .scene-app .app-foot { font-size:10px; margin-top:5px; }
}
/* Requirement-to-interface sequence and individual project scenes. */
.story-mode .scene-hero.is-morphing, .story-mode .scene-hero.is-morphing * { visibility:hidden !important; }
.story-mode .scene-hero .hero-sub { max-width:480px; margin:16px auto 0; font-size:clamp(14px,3.8vw,18px); line-height:1.7; }
.story-mode .hero-figure { bottom:5%; height:54%; }
.chat-topic { color:#a6c5b7; font-size:12px; line-height:1.5; margin-top:3px; }
.story-mode .chatui-top { position:sticky; top:0; z-index:2; background:#000; padding:12px 0; }
.story-mode .chatui { padding-top:8px; }
.story-mode .bubble p { font-size:clamp(15px,3.9vw,19px); line-height:1.8; }
.requirement-story { padding:16px 20px; border-bottom:1px solid #365d4c; background:#1c3227; }
.requirement-count { color:#99b9a9; font-size:11px; }
.requirement-story p { font-size:13px; color:#c3d2ca; margin-top:6px; line-height:1.5; }
.requirement-story strong { display:block; color:#b9f5d7; font-size:18px; margin-top:6px; }
.requirement-trace { position:fixed; z-index:35; pointer-events:none; background:#b9f5d7; box-shadow:0 0 12px #b9f5d7; }
#app[data-requirement="0"] .app-conds li:not(.requirement-leave), #app[data-requirement="0"] .app-btn,
#app[data-requirement="1"] .app-btn { opacity:.25; }
#app[data-requirement="0"] .grid .cell:not(.c-h):not(.c-n), #app[data-requirement="1"] .grid .cell:not(.c-h):not(.c-n) { color:transparent; background:#1e2a24; }
#app[data-requirement="0"] .requirement-leave, #app[data-requirement="1"] .app-conds li:not(.requirement-leave) { outline:1px solid #b9f5d7; outline-offset:1px; }
.scene-app .app-bar { padding-top:16px; padding-bottom:12px; }
.scene-app .app-conds li { transition:opacity .2s; }
.scene-app .app-main { padding-bottom:70px; }
.story-mode main > .project-scene { padding:40px 24px 76px; justify-content:center; gap:26px; }
.project-copy h2 { font-size:clamp(28px,6.6vw,48px); line-height:1.4; letter-spacing:-.035em; margin:14px 0; }
.project-copy > p:last-child { font-size:14px; line-height:1.85; color:#b8c5ca; }
.project-copy .scene-label { font-size:12px; }
.project-demo { width:100%; max-width:700px; border:1px solid #33454e; border-radius:10px; overflow:hidden; background:#14232b; }
.demo-toolbar { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #33454e; font-size:13px; font-weight:700; gap:8px; }
.demo-toolbar span { font-size:9px; font-weight:400; color:#a6b5bd; }
.project-credit { font-size:12px; color:#93a5ad; line-height:1.7; max-width:700px; }
.project-crm { background:#0c1822; }
.project-crm .scene-label { color:#a7d4f6; }
.contact-row { margin:18px; display:flex; align-items:center; gap:12px; }
.contact-symbol { width:44px; height:48px; background:#b5d7ec; color:#203a4e; display:grid; place-items:center; border-radius:3px; font-size:24px; }
.contact-row strong,.contact-row small { display:block; }
.contact-row small { color:#9eb4c1; font-size:11px; margin-top:4px; }
.contact-link { margin-left:auto; color:#b5d7ec; font-size:24px; }
.deal-row { margin:0 18px; padding:16px 0; border-top:1px solid #33454e; display:flex; justify-content:space-between; gap:8px; font-size:13px; }
.deal-row span { color:#a7d4f6; }
.deal-track { display:flex; gap:6px; margin:0 18px 18px; }
.deal-track span { flex:1; padding:10px 4px; font-size:11px; text-align:center; background:#1e3442; color:#9eb4c1; }
.deal-track .current { background:#b5d7ec; color:#193344; }
.crm-notes { display:flex; justify-content:space-between; padding:16px; background:#10202b; font-size:10px; color:#9eb4c1; }
.project-shift { background:#101e17; }
.project-shift .project-demo { background:#1a2b21; border-color:#3a5140; }
.rule-tags { display:flex; gap:6px; padding:18px 16px; }
.rule-tags span { flex:1; background:#304a39; padding:8px 4px; text-align:center; font-size:11px; }
.schedule-strips { padding:0 16px; }
.schedule-strips > div { display:grid; grid-template-columns:22px repeat(5,1fr); gap:5px; margin-bottom:5px; }
.schedule-strips span,.schedule-strips em,.schedule-strips i,.schedule-strips b { display:grid; place-items:center; height:36px; font-size:12px; font-style:normal; }
.schedule-strips span { background:#cbe1c9; color:#213425; border-radius:3px; }
.schedule-strips em { background:#466a50; border-radius:3px; }
.schedule-strips i { background:#26392c; color:#9db49e; border-radius:3px; }
.shift-demo > p { font-size:11px; color:#a4baa7; padding:16px; }
.project-stock { background:#221c18; }
.project-stock .scene-label { color:#e4b991; }
.project-stock .project-demo { background:#302720; border-color:#594739; }
.project-stock .project-copy > p:last-child { color:#c9bcb0; }
.product-row { padding:20px; display:flex; align-items:center; gap:20px; }
.garment { width:72px; height:76px; display:grid; place-items:center; background:#d2b69a; color:#59432e; font-size:52px; font-weight:700; }
.product-row strong,.product-row small,.product-row span { display:block; }
.product-row small { color:#c6af98; font-size:10px; }
.product-row strong { margin:6px 0; }
.product-row span { color:#c6af98; font-size:12px; }
.stock-connection { padding:12px 20px; background:#3c3026; font-size:12px; color:#e4c4a6; display:flex; justify-content:space-between; }
.ledger { padding:8px 20px 20px; }
.ledger > div { display:grid; grid-template-columns:1fr 1fr 1fr; border-bottom:1px solid #594739; padding:12px 0; font-size:12px; }
.ledger > div:first-child { color:#bda891; font-size:10px; }
@media(min-width:900px) {
 .story-mode main > .project-scene { display:grid; grid-template-columns:1fr 1.2fr; align-content:center; align-items:center; padding:70px 8vw; gap:30px 6vw; }
 .project-credit { grid-column:2; }
 .project-copy h2 { font-size:clamp(32px,3.4vw,52px); }
 .project-demo { min-height:340px; }
 .requirement-story { padding:16px 40px; }
 .scene-app .app-body { min-height:calc(100dvh - 200px); }
}
@media(max-height:740px) and (max-width:767px) {
 .requirement-story { padding:10px 16px; }
 .requirement-story strong { font-size:16px; }
 .requirement-story p { font-size:12px; }
 .story-mode main > .project-scene { justify-content:flex-start; gap:18px; padding-top:24px; }
 .project-copy h2 { font-size:26px; }
}
@media(max-width:767px) and (min-height:741px) {
 .scene-app .app-conds li { flex-direction:row; align-items:center; padding:10px; font-size:11px; gap:4px; min-height:42px; }
 .scene-app .app-conds strong { font-size:16px; white-space:nowrap; }
 .scene-app .grid .cell { min-height:28px; }
 .scene-app .grid .c-h { min-height:18px; }
 .scene-app .app-main { padding-bottom:64px; }
}
/* The same person closes the consultation story before the portfolio. */
.story-mode main > .scene-resolution { padding:0; overflow:hidden; background:#000; }
.resolution-image { position:absolute; width:100%; height:100%; inset:0; object-fit:contain; object-position:center bottom; }
.resolution-copy { position:absolute; z-index:1; top:12%; left:24px; right:24px; text-align:center; }
.resolution-copy > p:first-child { font-size:22px; line-height:1.6; }
.resolution-copy h2 { font-size:clamp(32px,8vw,54px); line-height:1.4; letter-spacing:-.04em; }
.resolution-sub { margin-top:16px; color:#b8c7bd; font-size:14px; }
.resolution-note { position:absolute; z-index:1; bottom:68px; right:20px; color:#9baba2; font-size:10px; }
@media(min-width:768px) { .resolution-copy { top:10%; } }
@media(max-height:620px) { .resolution-copy { top:7%; } .resolution-copy h2 { font-size:28px; } .resolution-sub { margin-top:8px; font-size:12px; } }
.story-mode main > .scene-spec { background:#101c17; justify-content:center; padding:32px 24px 80px; }
.spec-inner { width:100%; max-width:640px; margin:auto; }
.spec-inner h2 { font-size:clamp(32px,8vw,52px); line-height:1.4; margin:16px 0; }
.spec-lead { color:#acbfb4; font-size:14px; line-height:1.8; }
.spec-list { list-style:none; margin:26px 0; padding:0; }
.spec-list li { padding:16px 0; border-bottom:1px solid #354a3e; }
.spec-list span { font-size:18px; font-weight:700; color:#b9f5d7; }
.spec-list p { font-size:13px; margin-top:6px; line-height:1.7; color:#bac8c0; }
.spec-agree { font-size:14px; line-height:1.8; margin-bottom:20px; }
.spec-next { width:100%; display:flex; justify-content:space-between; background:#b9f5d7; color:#10281c; padding:16px; border:0; border-radius:4px; font-weight:700; cursor:pointer; }
.build-heading { padding:18px 20px; background:#1c3227; border-bottom:1px solid #365d4c; }
.build-heading span { display:block; font-size:12px; color:#b1c6b9; }
.build-heading strong { display:block; font-size:20px; margin-top:4px; color:#b9f5d7; }
.story-mode main > .scene-delivery { padding:20px 24px 80px; background:#09110e; }
.delivery-top { display:flex; align-items:center; gap:12px; border-bottom:1px solid #304039; padding:8px 0 18px; }
.delivery-top img { background:white; border-radius:50%; padding:4px; }
.delivery-top h2 { font-size:14px; }
.delivery-top p { font-size:11px; color:#9db4a6; margin-top:4px; }
.delivery-thread { width:100%; max-width:640px; margin:0 auto; }
.delivery-date { font-size:12px; color:#9bb0a3; text-align:center; margin:28px 0; }
.delivery-message { background:#202f27; padding:18px; border-radius:4px 20px 20px 20px; max-width:460px; }
.delivery-message > p { font-size:15px; line-height:1.8; }
.delivered-app { display:block; color:#142e20; background:#d8f5e5; padding:18px; border-radius:8px; margin-top:16px; text-decoration:none; }
.delivery-app-icon { display:block; font-size:28px; }
.delivered-app strong { display:block; font-size:20px; margin:6px 0; }
.delivered-app > span:not(.delivery-app-icon) { font-size:11px; }
.delivered-app b { display:block; border-top:1px solid #a8c9b7; padding-top:12px; margin-top:14px; font-size:14px; }
.delivery-reply { display:flex; gap:12px; align-items:flex-start; margin:28px 0 0 auto; max-width:440px; }
.delivery-reply p { background:#70d8b4; color:#10251c; padding:16px; border-radius:18px 4px 18px 18px; font-size:14px; line-height:1.8; }
.delivery-reply img { flex:none; border-radius:50%; object-fit:cover; object-position:center 61%; }
.delivery-followup { margin-top:32px; color:#a7bcae; font-size:14px; line-height:1.9; text-align:center; }
.return-delivery { border:1px solid #729780; border-radius:4px; color:#c5e7d2; background:transparent; padding:8px; font-size:11px; cursor:pointer; }
.return-delivery[hidden] { display:none; }
@media(max-height:700px) { .story-mode main > .scene-spec { justify-content:flex-start; } .spec-list { margin:18px 0; } .spec-list li { padding:12px 0; } }
/* Usable planner and requirement cards that become its controls. */
.scene-app .app { background:#f3f6f4; color:#1a3327; }
.scene-app .app-bar { background:#fff; border-bottom:1px solid #d7e2da; color:#183c2a; flex-wrap:wrap; }
.scene-app .app-badge { color:#52665a; background:#eef3ef; }
.planner-body { padding:18px 16px 76px; max-width:1200px; margin:auto; }
.planner-setup { display:grid; grid-template-columns:1fr; gap:10px; }
.planner-import,.planner-rules { background:white; border:1px solid #d5e0d8; border-radius:8px; padding:14px; }
.planner-import h3,.planner-rules summary,.planner-plan h3 { font-size:14px; font-weight:700; line-height:1.5; }
.planner-import p { color:#607468; font-size:12px; margin:4px 0 10px; }
.planner-import button { background:#eaf5ee; color:#235a3b; border:1px solid #b6d5c0; border-radius:5px; padding:10px 14px; font-size:12px; cursor:pointer; }
.planner-rules summary { cursor:pointer; }
.planner-rules summary > span { display:block; font-size:12px; font-weight:400; color:#627768; margin-top:5px; }
.rule-inputs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.rule-inputs label { font-size:12px; }
.rule-inputs input { display:block; width:100%; margin-top:6px; border:1px solid #acbeb0; background:white; color:#183c2a; border-radius:4px; padding:8px; }
.planner-plan { margin-top:20px; }
.plan-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.plan-heading p { font-size:12px; color:#667a6d; margin-top:4px; }
#shift-replay { background:#216b45; color:white; border:0; border-radius:6px; padding:12px 14px; white-space:nowrap; font-size:13px; cursor:pointer; }
.planner-status { font-size:12px; color:#36684a; margin:12px 0 6px; min-height:18px; }
.schedule-scroll { overflow-x:auto; padding-bottom:4px; }
.scene-app .grid { min-width:336px; grid-template-columns:28px repeat(7,minmax(40px,1fr)); gap:4px; margin-top:10px; }
.scene-app .grid .cell { border-radius:5px; min-height:44px; font-size:13px; border:0; }
.scene-app .grid .c-h { min-height:24px; color:#5e7365; }
.scene-app .grid .c-n { color:#344c3c; }
.scene-app .grid button { cursor:pointer; outline-offset:2px; }
.scene-app .grid button:hover { box-shadow:inset 0 0 0 2px #4c8261; }
/* 白い業務画面と編集パネルの中では、暗い版の淡いアクセント（#5fd3c0）のリングが見えにくい。深い緑に固定する */
.scene-app :focus-visible, .shift-editor :focus-visible { outline-color:#216b45; }
.scene-app .grid .c-day { background:#dceddf; color:#235839; }
.scene-app .grid .c-night { background:#435b7d; color:white; }
.scene-app .grid .c-off { background:#e3e8e5; color:#4f6156; }
.scene-app .app-legend { color:#52675a; }
/* 凡例のセルは .grid の外。表本体と同じ色にする（ベースの .c-day/.c-night/.c-off は暗い版用） */
.scene-app .app-legend .c-day { background:#dceddf; color:#235839; }
.scene-app .app-legend .c-night { background:#435b7d; color:#ffffff; }
.scene-app .app-legend .c-off { background:#e3e8e5; color:#4f6156; }
.planner-note { font-size:12px; color:#5f6e65; margin-top:12px; }
.shift-editor { position:fixed; z-index:45; bottom:0; left:0; right:0; background:white; box-shadow:0 -8px 32px #0003; padding:22px 20px max(24px,env(safe-area-inset-bottom)); color:#1a3327; }
.shift-editor[hidden] { display:none; }
.shift-editor p { font-weight:700; font-size:16px; }
.shift-editor > div { display:flex; gap:8px; margin-top:16px; }
.shift-editor button { flex:1; border:1px solid #adc4b4; background:#eef5f0; color:#21482e; border-radius:6px; padding:14px 8px; cursor:pointer; }
.requirement-flight { position:fixed; z-index:40; display:flex; align-items:center; padding:10px; background:#b9f5d7; color:#173d27; border:1px solid #75bd93; border-radius:7px; font-weight:700; pointer-events:none; overflow:hidden; box-sizing:border-box; }
.scene-app .return-delivery { color:#235a3b; border-color:#a3c2ae; }
.story-mode main > .scene-delivery { padding:0; background:#000; }
#delivery .chatui { padding:8px 24px 90px; }
#delivery-additions[hidden] { display:none; }
#delivery-additions .bubble { display:grid; margin-top:22px; }
#delivery-additions .delivery-message { margin:0; padding:16px; max-width:none; font-size:14px; }
#delivery-additions .delivery-message > p { margin:0; padding:0; background:none; color:#e4eee7; font-size:14px; }
#delivery-additions .delivered-app { padding:12px; margin-top:12px; }
#delivery-additions .delivered-app strong { font-size:17px; }
#delivery-additions .delivered-app > span { font-size:10px; }
#delivery-additions .delivery-date { margin:20px 0; }
.avatar { position:relative; flex-shrink:0; }
.avatar.avatar-smile img { position:absolute; left:-50%; top:-128%; width:200%; height:auto; max-width:none; object-fit:initial; }
@media(min-width:900px) {
 .planner-body { padding:26px 32px 76px; }
 .planner-setup { grid-template-columns:1fr 1fr; }
 .scene-app .grid .cell { min-height:54px; }
 .plan-heading h3 { font-size:20px; }
 .planner-plan { margin-top:28px; }
 #delivery .chatui { max-width:800px; margin:auto; }
}
@media(max-height:700px) { .planner-body { padding-top:12px; } .planner-import,.planner-rules { padding:10px 12px; } }
#delivery-additions .bubble[hidden] { display:none; }
/* Thoughts recede behind the central worry and person. */
.worry-cloud { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; user-select:none; }
.worry-cloud span { position:absolute; white-space:nowrap; color:#adbab4; opacity:.19; font-size:clamp(13px,3.7vw,24px); font-weight:500; letter-spacing:.03em; }
.worry-cloud span:nth-child(1) { top:30%; left:5%; transform:rotate(-8deg); font-size:clamp(19px,5.4vw,34px); opacity:.23; }
.worry-cloud span:nth-child(2) { top:35%; right:5%; transform:rotate(7deg); }
.worry-cloud span:nth-child(3) { top:43%; left:-3%; transform:rotate(-4deg); }
.worry-cloud span:nth-child(4) { top:26%; right:-4%; transform:rotate(4deg); font-size:clamp(12px,3.3vw,21px); opacity:.13; }
.worry-cloud span:nth-child(5) { top:51%; right:2%; transform:rotate(8deg); opacity:.22; }
.worry-cloud span:nth-child(6) { top:39%; left:8%; transform:rotate(-5deg); font-size:clamp(16px,4.4vw,28px); opacity:.16; }
.worry-cloud span:nth-child(7) { top:59%; left:1%; transform:rotate(-8deg); }
.worry-cloud span:nth-child(8) { top:63%; right:-7%; transform:rotate(4deg); opacity:.15; }
.worry-cloud span:nth-child(9) { top:71%; left:-5%; transform:rotate(-4deg); font-size:clamp(12px,3.4vw,22px); }
.worry-cloud span:nth-child(10) { top:77%; right:-3%; transform:rotate(6deg); opacity:.13; }
.worry-cloud span:nth-child(11) { top:85%; left:2%; transform:rotate(-6deg); opacity:.13; }
.worry-cloud span:nth-child(12) { top:91%; right:4%; transform:rotate(4deg); opacity:.12; }
.story-mode .scene-hero .hero-copy,.scene-hero .hero-brand { z-index:2; }
.story-mode .scene-hero .hero-figure { z-index:1; }
.story-mode .scene-hero .hero-img { mask-image:linear-gradient(to bottom,transparent 0%,#000 22%); }
@media(min-width:768px) { .worry-cloud { left:15%; right:15%; } }
.scene-scope { background:#122019; }
.scope-list { list-style:none; padding:0; margin:28px 0; display:grid; gap:22px; }
.scope-list li { padding-bottom:20px; border-bottom:1px solid #344b3b; }
.scope-list h3 { font-size:20px; color:#b9f5d7; }
.scope-list p,.scope-note { font-size:14px; line-height:1.9; color:#b9c8bf; margin-top:10px; }
.story-mode main > .company-story { padding:48px 26px 84px; justify-content:center; background:#0e1914; }
.story-inner { max-width:760px; width:100%; margin:auto; }
.company-story h2 { font-size:clamp(29px,7.2vw,48px); line-height:1.4; letter-spacing:-.035em; margin:16px 0 28px; }
.experience-lines { border-left:2px solid #79b799; padding-left:18px; margin-bottom:26px; }
.experience-lines p { font-size:clamp(14px,3.8vw,20px); line-height:1.8; color:#c5d8cd; margin:10px 0; }
.story-prose,.value-story p,.person-story > p { font-size:14px; line-height:1.95; color:#b8c9be; }
.story-source { color:#80968a; font-size:12px; line-height:1.7; margin-top:14px; }
.story-bridge { color:#b9f5d7; font-size:16px; line-height:1.8; margin-top:28px; }
.story-mode main > .story-values { background:#17251d; }
.value-story { display:grid; gap:24px; }
.value-story h3 { font-size:18px; color:#d9efdf; margin-bottom:8px; }
.value-story article { border-bottom:1px solid #344a3b; padding-bottom:20px; }
.person-story { border-top:1px solid #344a3b; padding:22px 0; }
.person-heading { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.person-heading h3 { font-size:20px; }
.person-heading p { color:#91ad9b; font-size:11px; margin-top:4px; }
.person-story .person-link { color:#b9e1c9; margin-top:10px; }
@media(max-height:740px) { .story-mode main > .company-story { justify-content:flex-start; padding-top:30px; } }
.story-mode main > .company-overview { background:#0b1712; }
.overview-lead { font-size:15px; line-height:1.9; color:#c3d2c8; max-width:650px; }
.overview-capabilities { margin:28px 0; display:grid; gap:18px; }
.overview-capabilities article { border-left:2px solid #699c7d; padding-left:18px; }
.overview-capabilities article > span { font-size:11px; color:#91ae9c; }
.overview-capabilities h3 { font-size:21px; line-height:1.5; margin:4px 0 6px; color:#d4f3df; }
.overview-capabilities p { font-size:13px; line-height:1.8; color:#acbfb2; }
.overview-close { border-top:1px solid #2f4536; padding-top:20px; font-size:13px; line-height:1.9; color:#c7e4d1; }
@media(min-width:900px) { .company-overview .story-inner { max-width:1000px; } .overview-capabilities { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin:36px 0; } }
/* Build the interface only after each requirement arrives. Preserve layout while hidden. */
#app.is-building[data-build-stage="0"] .planner-import,
#app.is-building[data-build-stage="0"] .planner-rules,
#app.is-building[data-build-stage="1"] .planner-rules,
#app.is-building[data-build-stage="0"] .planner-plan,
#app.is-building[data-build-stage="1"] .planner-plan,
#app.is-building[data-build-stage="2"] .planner-plan { visibility:hidden; }
#app.is-building:not([data-build-stage="4"]) .grid button { visibility:hidden; }
#app.is-building .planner-body { pointer-events:none; }
#app.is-building .planner-note { visibility:hidden; }
.inquiry-trap{position:absolute!important;left:-10000px!important;width:1px;height:1px;opacity:0}
.inquiry-dialog{box-sizing:border-box;border:0;background:#101715;color:#f3f6f4;width:min(100%,640px);max-width:100%;height:100dvh;max-height:100dvh;margin:auto;padding:clamp(24px,6vw,56px);overflow-y:auto}
.inquiry-dialog::backdrop{background:rgba(0,0,0,.84)}
.inquiry-inner{max-width:500px;margin:auto;padding:20px 0 40px}
.inquiry-inner h2{font-size:clamp(24px,5vw,34px);line-height:1.5;margin:20px 0}
.inquiry-inner p{line-height:1.8;color:#b8c7bf}
.inquiry-inner blockquote{margin:24px 0 32px;padding:16px 20px;border-left:2px solid #97ddb6;background:#1b2721;overflow-wrap:anywhere;white-space:pre-wrap}
#contact-form label{display:block;margin:20px 0 8px;font-size:14px}
#contact-form label span{color:#9baa9f;font-size:12px;margin-left:8px}
#contact-form input{box-sizing:border-box;width:100%;padding:15px;border:1px solid #52665a;border-radius:8px;background:#18221c;color:white;font:inherit;font-size:16px}
.contact-submit,.contact-skip{width:100%;min-height:48px;border-radius:8px;font:inherit;cursor:pointer;padding:12px;margin-top:12px}
.contact-submit{background:#b9f2d0;color:#14241b;border:0;font-weight:700}
.contact-skip{background:transparent;color:#c1cec6;border:1px solid #46574c}
#ask-status,#contact-status{font-size:14px;line-height:1.7;overflow-wrap:anywhere}
#ask-send:disabled,.contact-submit:disabled{opacity:.5;cursor:wait}

/* 2026-11-08: invite the visitor to generate the sample themselves. */
.plan-heading { flex-wrap:wrap; }
#shift-replay { width:100%; min-height:64px; padding:18px 24px; font-size:20px; font-weight:700; border-radius:12px; box-shadow:0 5px 0 #164d31; }
#shift-replay:active { transform:translateY(3px); box-shadow:0 2px 0 #164d31; }
#shift-replay:focus-visible { outline:3px solid #216b45; outline-offset:5px; }
#app:not(.has-shift) .schedule-scroll,
#app:not(.has-shift) .app-legend { display:none; }

/* Requirement cards keep their identity while becoming real controls. */
.requirement-flight.morph-card { display:block; padding:0; background:#14251d; border:1px solid #759c84; color:#b9f5d7; font-weight:400; }
.morph-source { position:absolute; inset:0; padding:16px 0; }
.morph-source span { font-size:18px; font-weight:700; }
.morph-source p { font-size:13px; line-height:1.7; margin-top:6px; color:#bac8c0; }
.morph-card .morph-target { position:absolute; inset:0; margin:0; opacity:0; width:100%; height:100%; box-sizing:border-box; color:#183c2a; }
.morph-card .planner-plan { padding:0; background:#f3f6f4; }
.morph-card .schedule-scroll,.morph-card .app-legend { display:none; }
.fde-summary { max-width:720px; }
.company-overview #team-title { font-size:clamp(28px,5.5vw,48px); letter-spacing:-.035em; line-height:1.45; margin:20px 0 24px; }
.fde-fullname { font-size:14px; color:#a4b6aa; letter-spacing:.08em; }
.fde-services { font-size:13px; color:#a4b6aa; margin-top:28px; line-height:1.8; }

.morph-source { padding:12px; }
.morph-source p { color:inherit; }
.morph-target .plan-heading button { width:100%; min-height:64px; padding:18px 24px; font-size:20px; font-weight:700; border:0; border-radius:12px; background:#216b45; color:white; box-shadow:0 5px 0 #164d31; }

.fde-approach { font-size:14px; line-height:1.9; color:#bac8c0; margin-top:24px; }
.fde-summary .fde-fullname { margin-top:24px; }

/* Case studies: context, delivered work and personal responsibility. */
.story-mode main > .case-detail { justify-content:flex-start; gap:22px; padding-top:32px; }
.case-content { width:100%; max-width:700px; }
.case-facts { margin:24px 0 0; }
.case-facts > div { padding:14px 0; border-top:1px solid #41514e; }
.case-facts dt { font-size:12px; font-weight:700; color:#a8dbbc; margin-bottom:7px; }
.case-facts dd { margin:0; font-size:14px; line-height:1.85; color:#e1e8e3; }
.case-facts .case-role { border-left:3px solid #a8dbbc; padding-left:14px; }
.case-more { margin-top:16px; border-bottom:1px solid #41514e; padding-bottom:14px; }
.case-more summary { cursor:pointer; min-height:44px; display:list-item; align-content:center; font-size:14px; }
.case-more p { font-size:14px; line-height:1.85; color:#bbc9c1; margin-top:10px; }
.case-map { width:100%; max-width:700px; padding:22px; background:#ffffff08; border:1px solid #41514e; border-radius:12px; }
.case-map > p { font-size:12px; color:#aabbb0; }
.case-map ol { list-style:none; padding:0; margin:18px 0; }
.case-map li { padding:16px 12px; background:#ffffff09; border-radius:7px; font-size:15px; text-align:center; }
.case-map li + li { margin-top:25px; position:relative; }
.case-map li + li::before { content:'↓'; position:absolute; top:-23px; left:50%; color:#a8dbbc; }
.case-detail .project-credit { width:100%; }
.crm-showcase { width:100%; min-width:0; align-self:start; }
.crm-view-tabs { display:flex; gap:0; border-bottom:1px solid #53665c; margin-bottom:16px; }
.crm-view-tabs button { flex:1; padding:14px 8px; border:0; border-bottom:3px solid transparent; background:transparent; color:#afbeb4; font:inherit; font-size:14px; cursor:pointer; }
.crm-view-tabs button[aria-selected="true"] { color:#c9f7dc; border-bottom-color:#a8dbbc; font-weight:700; }
.crm-view-tabs button:focus-visible { outline:2px solid #c9f7dc; outline-offset:2px; }
#crm-screen { margin:0; }
#crm-screen-image { display:block; width:100%; height:auto; border:1px solid #52665b; border-radius:6px; }
#crm-screen figcaption { margin-top:18px; text-align:left; }
#crm-screen-title { font-size:17px; line-height:1.7; color:#e1eee6; }
#crm-screen-description { font-size:14px; line-height:1.8; color:#b9c8be; margin:8px 0 12px; }
#crm-screen figcaption span { display:block; font-size:12px; line-height:1.7; color:#9cafa3; }
.crm-prototype-link { display:inline-block; margin-top:16px; font-size:13px; color:#c9f7dc; text-underline-offset:4px; }
@media(min-width:900px) { .story-mode main > .project-crm { grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); align-content:start; align-items:start; padding:44px 5vw 80px; column-gap:4vw; } }
.inquiry-chat-header { display:flex; align-items:center; gap:12px; margin:28px 0 20px; font-size:14px; font-weight:700; }
.inquiry-chat-header img { border-radius:50%; }
.scene-ask .inquiry-greeting { background:#203029; border-radius:4px 18px 18px 18px; padding:18px 22px; max-width:620px; text-align:left; line-height:1.8; }
.scene-ask .inquiry-thread { width:100%; height:auto; max-height:none; max-width:none; margin:24px 0; padding:0; border-radius:0; background:transparent; overflow:visible; }
.inquiry-thread[hidden] { display:none; }
.inquiry-thread .inquiry-inner { max-width:none; padding:0; display:flex; flex-direction:column; align-items:flex-start; }
.inquiry-thread .scene-label { display:none; }
.inquiry-thread #inquiry-summary { order:-1; align-self:flex-end; max-width:85%; margin:0 0 24px; border:0; border-radius:18px 4px 18px 18px; background:#b9f5d7; color:#11291d; }
.inquiry-thread h2 { font-size:20px; margin:0 0 12px; }
.inquiry-thread #contact-form { width:min(100%,620px); margin-top:20px; padding:22px; border-radius:4px 18px 18px 18px; background:#203029; }
.inquiry-thread .contact-skip { width:auto; padding:12px 22px; }
.scene-ask .ask-box { margin-top:24px; }
.inquiry-thread #contact-form { background:transparent; padding:0; width:100%; }
.fde-question { display:flex; align-items:flex-start; gap:12px; text-align:left; margin:24px 0; }
.fde-question img { border-radius:50%; flex-shrink:0; }
.fde-question span { background:#203029; padding:16px 20px; border-radius:4px 18px 18px 18px; }
.inquiry-thread .contact-answer { background:#b9f5d7; color:#11291d; padding:16px 20px; border-radius:18px 4px 18px 18px; margin:16px 0 16px auto; width:fit-content; max-width:85%; overflow-wrap:anywhere; }
.inquiry-thread [hidden] { display:none!important; }
/* Contact replies live in a conversation, with one compact reply composer. */
.is-contact-chat > .scene-inner { width:100%; max-width:1000px; padding-top:0; }
.is-contact-chat > .scene-inner > .scene-label,
.is-contact-chat #ask-title,.is-contact-chat .inquiry-greeting,
.is-contact-chat .ask-mail,.is-contact-chat .ask-hint,.is-contact-chat .site-footer { display:none; }
.is-contact-chat .inquiry-chat-header { position:sticky; top:0; z-index:5; background:#0b100e; margin:0; padding:18px 0; border-bottom:1px solid #2b3b32; }
.is-contact-chat .inquiry-thread { margin:24px 0 0; }
.inquiry-thread .fde-ack { background:#203029; padding:16px 20px; border-radius:4px 18px 18px 18px; font-size:15px; font-weight:400; line-height:1.8; max-width:85%; text-align:left; }
.inquiry-thread #inquiry-receipt { font-size:11px; color:#8d9e93; text-align:left; }
.chat-reply-bar { position:sticky; bottom:0; display:flex; align-items:center; gap:10px; padding:12px 0; background:#0b100e; margin-top:28px; }
.chat-reply-bar label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.chat-reply-bar #email-step { flex:1; min-width:0; }
#contact-form .chat-reply-bar input { flex:1; min-width:0; margin:0; border-radius:24px; padding:13px 18px; }
#contact-form .chat-reply-bar .contact-submit { flex:none; width:46px; min-height:46px; height:46px; padding:0; margin:0; border-radius:50%; font-size:24px; }
.inquiry-thread .contact-privacy { font-size:11px; text-align:left; color:#8d9e93; }
.inquiry-thread .contact-skip { border:0; text-decoration:underline; font-size:12px; padding:8px 0; margin:0; min-height:40px; }
.inquiry-thread #contact-status { text-align:left; }
.is-contact-chat .fde-question { font-size:15px; }
/* Desktop uses the landscape canvas, with readable text and working space. */
@media (min-width: 1000px) {
 .story-mode main > .scene-hero { display:block; max-width:none; padding:32px 8vw 80px; }
 .story-mode .scene-hero .hero-copy, .story-mode .scene-hero .hero-figure { grid-area:auto; padding-bottom:0; }
 .story-mode .scene-hero .hero-copy { top:32%; left:8vw; right:52%; text-align:left; }
 .story-mode .scene-hero .hero-sub { margin:24px 0 0; }
 .story-mode .scene-hero .hero-figure { left:48%; width:48%; height:78%; bottom:0; }
 .worry-cloud { left:46%; right:0; }
 .story-mode .chatui, #delivery .chatui { width:100%; max-width:1160px; margin:auto; padding:24px 40px 88px; }
 .story-mode .bubble { max-width:72%; }
 .story-mode .bubbles { padding-top:28px; }
 .spec-inner { max-width:1120px; }
 .spec-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin:44px 0; }
 .spec-list li { padding:24px 0; }
 .spec-list span { font-size:21px; }
 .spec-list p { font-size:16px; }
 .spec-next { max-width:480px; min-height:60px; }
 .resolution-copy { left:8vw; right:52%; top:35%; text-align:left; }
 .resolution-image { left:44%; width:56%; }
 .company-story .story-inner { max-width:1100px; }
 .company-overview .fde-summary { max-width:900px; }
 .value-story { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; }
 .member-stories .story-inner { display:grid; grid-template-columns:1fr 1fr; column-gap:48px; }
 .member-stories .story-inner > h2, .member-stories .story-inner > .scene-label { grid-column:1 / -1; }
 .case-content h2 { font-size:clamp(32px,3.2vw,48px); }
 .case-facts dd { font-size:16px; }
 .inquiry-dialog { width:min(900px,90vw); height:auto; max-height:90dvh; border-radius:12px; }
 .inquiry-inner { max-width:720px; padding:0; }
}
@media(min-width:900px) { .story-mode main > .case-detail { align-content:center; padding-top:50px; } .case-map { align-self:center; } .case-detail .project-credit { grid-column:1 / -1; } }
#facility-screen { margin:0; }
#facility-screen-image { display:block; width:100%; height:auto; border:1px solid #52665b; border-radius:6px; }
#facility-screen figcaption { margin-top:18px; text-align:left; }
#facility-screen-title { font-size:17px; line-height:1.7; color:#e1eee6; }
#facility-screen-description { font-size:14px; line-height:1.8; color:#b9c8be; margin:8px 0 12px; }
#facility-screen figcaption span { display:block; font-size:12px; line-height:1.7; color:#9cafa3; }

@media(min-width:900px) { .story-mode main > .project-facility { grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); align-content:start; align-items:start; padding:44px 5vw 80px; column-gap:4vw; } }

#apparel-screen { margin:0; }
#apparel-screen-image { display:block; width:100%; height:auto; border:1px solid #52665b; border-radius:6px; }
#apparel-screen figcaption { margin-top:18px; text-align:left; }
#apparel-screen-title { font-size:17px; line-height:1.7; color:#e1eee6; }
#apparel-screen-description { font-size:14px; line-height:1.8; color:#b9c8be; margin:8px 0 12px; }
#apparel-screen figcaption span { display:block; font-size:12px; line-height:1.7; color:#9cafa3; }

@media(min-width:900px) { .story-mode main > .project-stock { grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr); align-content:start; align-items:start; padding:44px 5vw 80px; column-gap:4vw; } }

/* Keep the conversation history above the delayed delivery message. */
#delivery .bubbles { display:block; }
#delivery #delivery-additions { min-height:70dvh; padding-top:0; padding-bottom:80px; }
#delivery .chatui { min-height:100%; }

.talk-pause { margin-left:auto;flex-shrink:0;border:1px solid #93a69b;border-radius:6px;background:transparent;color:inherit;padding:8px 10px;font:inherit;font-size:12px;cursor:pointer; }
#delivery .talk-pause { display:none; }
.talk-typing p { display:flex;align-items:center;gap:10px;font-size:12px!important; }
.story-mode .talk-typing:not([hidden]) { display:flex; }
#delivery-additions .talk-typing:not([hidden]) { display:flex; }
.talk-typing p { width:auto;white-space:nowrap; }
.typing-dots { display:inline-flex;gap:4px; }
.typing-dots i { width:5px;height:5px;background:currentColor;border-radius:50%;animation:typing-pulse 900ms infinite alternate; }
.typing-dots i:nth-child(2) { animation-delay:150ms; }
.typing-dots i:nth-child(3) { animation-delay:300ms; }
@keyframes typing-pulse { from { opacity:.3;transform:translateY(0); } to { opacity:1;transform:translateY(-3px); } }
@media(prefers-reduced-motion:reduce) { .typing-dots i { animation:none; } }