/* LYR Talk LP
   Page: the lyr.jp "darkroom" tokens (lyr-blog/src/styles/landing.css), plus a light theme
   taken from the LYR app's washi & sumi palette.
   App screens (.app): drawn from the iOS screen specs (talk-screen-foundation / conversation v0.4 / listen v0.2).
   They keep the app's light (washi) look in both page themes, like a screenshot would. */
:root {
  --bg: #08090b;
  --bg-2: #101215;
  --bg-3: #16191d;
  --fg: #f4f4f5;
  --dim: #9a9fa7;
  --faint: #7b828d;
  --line: #23262c;
  /* 変換後（読める状態）を示す色。CTA とハイライトにだけ使う */
  --accent: #8eb243;
  --marker: #FFC900; /* LYR デザインシステムの黄 (MarkerYellow・両テーマ同値)。手描きの強調線だけに使う (THEME_SYSTEM.md「黄の使い方」) */
  --accent-ink: #16200a;
  --accent-text: #8eb243;
  --glow: color-mix(in srgb, var(--accent) 10%, transparent);
  --glow-2: rgba(255, 255, 255, .05);
  --logo-filter: invert(1);
  --scheme: dark;
  --card: var(--bg-2);

  /* LYR app palette, light (washi) — values from talk-screen-foundation.md §2 / Theme.swift.
     Used only inside .app so the drawn screens never flip with the page theme. */
  --app-washi: #F5F2ED;            /* background */
  --app-card: #FFFFFF;             /* card */
  --app-text: #2F2F2F;             /* text (消炭) */
  --app-sub: rgb(47 47 47 / .8);   /* secondaryText = text 80% */
  --app-hair: rgb(47 47 47 / .2);  /* hairline = text 20% */
  --app-outline: rgb(47 47 47 / .4); /* outline = text 40% */
  --app-moss: #4A5D23;             /* moss */
  --app-shadow: 0 .125em .375em rgb(0 0 0 / .1); /* 浮かぶ札・丸の影（黒 10%・半径 6） */
  --app-serif: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif; /* brandSerif */

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Yu Gothic", YuGothic, "Noto Sans JP", sans-serif;

  --step-small: 0.875rem;
  --step-body: 1.0625rem;
  --step-lead: 1.25rem;
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 3.75rem);
  --step-hero: clamp(2.25rem, 4.6vw, 4.5rem);

  /* 左右の余白。広い画面では中身の幅を 1100px までにして中央に寄せる (2026-11-15 利用者「横に広がり過ぎ。LYR の LP のように中央へ」。
     lyr.jp のトップの中身の幅 1100px と同じ)。ヘッダー (.nav) は lyr.jp と同じく画面の端まで使うので、この値を使わない */
  --margin: max(clamp(20px, 5vw, 64px), calc((100vw - 1100px) / 2));
  --gap: clamp(16px, 2vw, 28px);
  --section: clamp(96px, 12vw, 180px);
  --radius: 14px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: var(--scheme);
}

/* Light: washi ground, sumi ink, moss for accent text (端末の設定がライトのとき) */
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F5F2ED;
    --bg-2: #ECE8E1;
    --bg-3: #E4DFD6;
    --fg: #1A1A1A;
    --dim: #55534f;
    --faint: #6b6862;
    --line: #d9d3c9;
    --accent-text: #4A5D23;
    --glow: transparent;
    --glow-2: transparent;
    --logo-filter: none;
    --scheme: light;
    --card: #FBFAF7;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
  /* 暗室に窓から光が差している程度の光（lyr.jp と同じ） */
  background:
    radial-gradient(78% 52% at 82% 4%, var(--glow) 0%, transparent 64%), /* taste-skill-ignore: brand background light from lyr.jp */
    radial-gradient(64% 46% at 6% 58%, var(--glow-2) 0%, transparent 62%), /* taste-skill-ignore: brand background light from lyr.jp */
    var(--bg);
  background-attachment: fixed;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--step-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, h2 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.14; }

/* Japanese line breaking: wrap at phrase boundaries */
:lang(ja) { word-break: auto-phrase; line-break: strict; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Buttons: one primary, the site's accent (LP requirements §9) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 14px 26px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 15px; font-weight: 650; text-decoration: none;
  border-radius: 999px; border: 1px solid transparent;
  transition: transform 160ms var(--ease-out), background-color 150ms ease, color 150ms ease;
}
.btn:hover { background: var(--fg); color: var(--bg); }
.btn:active { transform: scale(0.97); }
/* Before release the primary slot only states the status; it is not a control, so it must not look pressable. */
/* 地は文字の色 (ライトでは黒・2026-11-15 利用者「ボタンの背景を黒に」)。ダークでは白い地に暗い字になる */
.btn.is-soon { background: var(--fg); color: var(--bg); border-color: var(--fg); cursor: default; }
.btn.is-soon:hover { background: var(--fg); color: var(--bg); }
.btn.is-soon:active { transform: none; }

/* Mode label: a small tag with a thin moss line (design §4) */
.mode-tag {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 1px 10px; border: 1px solid var(--accent-text); border-radius: 999px;
  color: var(--accent-text); font-size: 13px; font-weight: 600; line-height: 1.6; white-space: nowrap;
}
.mode-name { line-height: 1; }

/* Header (lyr.jp .lp-head) */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 20px;
  padding: 18px clamp(16px, 2.5vw, 32px);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.wordmark img { height: 18px; width: auto; filter: var(--logo-filter); }
.wordmark span { font-size: 18px; font-weight: 600; letter-spacing: .02em; } /* 15 → 18px (2026-11-16 利用者「もう一回り大きく」) */
.nav nav {
  margin-left: auto; display: flex; align-items: center; gap: clamp(14px, 3vw, 30px);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .02em; /* taste-skill-ignore: lyr.jp header type */
}
.nav nav a { color: var(--dim); text-decoration: none; transition: color 150ms ease; white-space: nowrap; }
.nav nav a:hover { color: var(--fg); }

/* ---------- 1. Hero ---------- */
.hero {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  padding: clamp(32px, 5vw, 80px) var(--margin) 0;
}
.hero-copy { grid-column: 1 / span 6; padding-bottom: 48px; }
.hero-title { font-size: var(--step-hero); letter-spacing: -0.03em; line-height: 1.1; }
.hero-title > span { display: block; white-space: nowrap; }
.hero-lead { margin-top: 28px; max-width: 28em; font-size: var(--step-lead); line-height: 1.6; }


.hero .btn { margin-top: 28px; }

/* ヒーロー全体の背景 = テーブルを真上から見た横長の写真 (2026-11-15 利用者「スマホの大きさを保ったまま周りを拡大」「ヒーロー全体を背景に」)。
   写真は左 0〜48% を文字のための何もない大理石、横 56〜78% を iPhone の置き場として生成した。
   iPhone は幅 230px (前の版と同じ大きさ)。中心を横 71% に置き、真上に店員・真下に旅行者の手、右にカップとクロワッサンが来る */
.hero-stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-table { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.hero-player { position: absolute; left: 71%; top: 50%; width: 230px; translate: -50% -50%; border-radius: 16% / 7.4%; }
.hero-stage .hero-phone { width: 100%; filter: drop-shadow(0 14px 22px rgb(0 0 0 / .28)); }
@media (min-width: 761px) {
  /* 背景は明るい大理石なので、ページがダークでもヒーローの文字はアプリの明るい配色で描く */
  /* 写真をヘッダーの下まで敷く (2026-11-15 利用者「半透明の白い帯は今のままで、一番上でかぶってる状態で」)。
     ヘッダーの高さ 84px (上下の余白 18px × 2 + アイコン 48px) だけヒーローを上へ引き上げ、その分を上の余白に足す */
  .hero {
    --nav-h: 84px;
    margin-top: calc(-1 * var(--nav-h));
    padding-top: calc(var(--nav-h) + clamp(32px, 5vw, 80px));
    min-height: clamp(600px, 100svh, 940px); align-content: center; padding-bottom: clamp(32px, 5vw, 80px);
  }
  /* 写真の上の文字はライトの配色に固定する。文字はライトの --fg・--dim と同じ値 (アプリの消炭 #2F2F2F では薄い・2026-11-16 利用者) */
  .hero-copy { --fg: #1A1A1A; --dim: #55534f; --line: var(--app-hair); --bg: var(--app-washi); color: var(--fg); padding-bottom: 0; }
}
/* 録画が入るまでの仮の画面。消えている iPhone の画面と同じ黒 */
.hero-screen { background: #000; }
.hero-screen video { display: block; width: 100%; height: 100%; object-fit: cover; background: #000; }
/* 押して始める (2026-11-15 利用者の案)。状態は data-state = idle (待ち受け) / playing / paused / ended */
/* 止まっている間は画面のどこを押しても始まる。再生中は苔色の丸 (.hero-btn) だけが止める */
.hero-player:not([data-state="playing"]) { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hero-btn {
  position: absolute; left: 50%; top: 91.25%; width: max(16.5%, 44px); aspect-ratio: 1; translate: -50% -50%;
  padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.hero-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html:not(.js) .hero-btn { display: none; }
/* 止めている間と見終わった後は、録画の中の一時停止の印の上に、同じ大きさの苔色の丸と ▶ を重ねて「再生」のボタンに戻す (2026-11-15 利用者)。
   大きさは録画の丸と同じ 画面の幅 × 16.5% (= 16.5cqi。.phone-screen は inline-size のコンテナ) */
/* 苔の丸は録画の上に常に重ね、印 (マイク・一時停止) だけを入れ替える。アプリの TalkMainControl と同じ動き (2026-11-16 利用者「ぬるっと・実際の使用感に合わせて」):
   - 印の入れ替え = SwiftUI の .contentTransition(.symbolEffect(.replace)) (古い印が縮んで消え、新しい印が少し弾んで現れる)
   - 押している間 = PressScaleStyle (0.98 倍・easeOut 0.15 秒)
   印の画像はアプリの録画から切り抜いた本物 (白の 1 色)。丸の色は録画に写った苔 (62, 80, 28) で、下の録画の丸と継ぎ目なく重なる */
.hero-btn-face {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 16.5cqi; height: 16.5cqi; border-radius: 50%; overflow: hidden;
  background: rgb(62 80 28);
  transition: scale 150ms ease-out;
}
.hero-btn:active .hero-btn-face { scale: .98; }
.hero-btn-face img {
  position: absolute; left: 50%; top: 50%; width: 103%; height: 103%; translate: -50% -50%; /* 切り抜きは 102px・丸は 99px */
  opacity: 1; scale: 1;
  transition: opacity 180ms ease-out 90ms, scale 340ms cubic-bezier(0.34, 1.56, 0.64, 1) 90ms; /* 現れる側: 少し待って、弾んで大きくなる */
}
.hero-btn-face img.is-pause,
.hero-player[data-state="playing"] .hero-btn-face img.is-mic {
  opacity: 0; scale: .4;
  transition: opacity 140ms ease-in, scale 180ms ease-in; /* 消える側: すぐに縮んで消える */
}
.hero-player[data-state="playing"] .hero-btn-face img.is-pause { opacity: 1; scale: 1; transition: opacity 180ms ease-out 90ms, scale 340ms cubic-bezier(0.34, 1.56, 0.64, 1) 90ms; }
@media (prefers-reduced-motion: reduce) { .hero-btn-face, .hero-btn-face img { transition: none !important; } }
html:not(.js) .hero-btn-face { display: none; }
/* 録画の開始ボタンの位置: 録画 588×1280 で中心 (294, 1168)・直径 97px → 横 50%・縦 91.25%・幅 16.5% */
.hero-ring {
  position: absolute; left: 50%; top: 91.25%; width: 16.5%; aspect-ratio: 1; translate: -50% -50%;
  border: 2px solid var(--app-moss); border-radius: 50%; pointer-events: none;
  opacity: 0; animation: hero-pulse 1.8s var(--ease-out) infinite;
}
@keyframes hero-pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.7); opacity: 0; } }
/* 案内の吹き出し: iPhone の下から上を指す (2026-11-15 利用者の見本)。写真の上で読めるよう、▶ と同じ系統の半透明の黒に白・細い白の縁 */
.hero-hint {
  position: absolute; left: 50%; top: calc(100% + 18px); translate: -50% 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 20px 10px 14px; border-radius: 999px;
  background: rgba(30, 30, 30, .72); border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  font-size: 15px; font-weight: 600; line-height: 1.4; white-space: nowrap; cursor: pointer; /* 吹き出しを押しても始まる (押した先は .hero-player の中) */
}
.hero-hint::before { /* 上向きの尖り */
  content: ""; position: absolute; left: 50%; top: -9px; width: 16px; height: 9px; translate: -50% 0;
  background: inherit; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.hero-hint-ico { width: 22px; height: 22px; flex: none; }
.hero-player:not([data-state="idle"]):not([data-state="ended"]) :is(.hero-ring, .hero-hint) { display: none; }
html:not(.js) :is(.hero-ring, .hero-hint) { display: none; }
@media (prefers-reduced-motion: reduce) { .hero-ring { animation: none; opacity: .7; } }
/* 音のボタン: 押して始めると音が出る (押した後なのでブラウザも音を許す)。消したい人のために右下に置く。▶ と同じ半透明の黒に白・押せる大きさは 44px */
.hero-sound {
  position: absolute; right: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 16px 0 12px;
  border: 0; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform 150ms var(--ease-out);
}
.hero-sound:active { transform: scale(0.97); }
.hero-sound:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hero-sound-ico { width: 20px; height: 20px; flex: none; }
html:not(.js) .hero-sound { display: none; }

/* ---------- App screens (drawn, not images) ---------- */
.app {
  --app-fs: 16px;
  font-size: var(--app-fs);
  font-family: var(--sans);
  line-height: 1.5;
  color: var(--app-text);
  color-scheme: light;
  background: var(--app-washi);
  border: 1px solid var(--line);
  border-radius: 2em;
  width: min(25em, 100%);
  position: relative;
}
.app ::selection { background: var(--app-moss); color: var(--app-card); }

/* 対面 (conversation v0.4): white cards on washi, the top one turned 180° */
.talk {
  display: grid; gap: .5em; padding: .75em;
  grid-template-rows: minmax(9em, 1fr) auto minmax(11.5em, 1.25fr);
}
.tk-card {
  background: var(--app-card);
  border-radius: 1.25em;
  padding: 1em 1.125em 1.125em;
  transition: background-color 250ms ease, box-shadow 250ms ease;
}
.tk-them { transform: rotate(180deg); }
.tk-me { padding-bottom: 5.25em; } /* keeps the last line clear of the floating button (92pt in the app) */
/* 向かいの人の最新の発言: 和紙の地＋苔の枠 1.5pt / 自分の発言: 細い枠 (hairline). Inset shadow so the size never shifts. */
.tk-card.is-target { background: var(--app-washi); box-shadow: inset 0 0 0 1.5px var(--app-moss); }
.tk-card.is-speaker { box-shadow: inset 0 0 0 1px var(--app-hair); }
.tk-lang { font-size: .8125em; color: var(--app-sub); }
.tk-main { margin-top: .45em; font-size: 1.375em; font-weight: 600; line-height: 1.4; min-height: 1.4em; overflow-wrap: anywhere; }
.tk-sub { margin-top: .4em; font-size: .9375em; color: var(--app-sub); line-height: 1.5; min-height: 1.5em; }

.tk-bar {
  display: grid; grid-template-columns: 5.625em minmax(0, 1fr) 5.625em; /* 両脇 90pt で言語の組を中央に */
  align-items: center; min-height: 2.75em;
}
.tk-side { display: flex; align-items: center; gap: .875em; padding-inline: .5em; }
.tk-side.is-end { justify-content: flex-end; gap: .25em; padding-right: 0; }
.tk-ico { display: block; width: 1.25em; height: 1.25em; color: var(--app-text); flex: none; }
.tk-ico.is-moss { color: var(--app-moss); }
.tk-pair { text-align: center; font-size: .9375em; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 主操作: 下の中央に浮かぶ苔の丸 68pt・白い印 26pt (foundation §4) */
.tk-fab {
  position: absolute; left: 50%; bottom: 1.25em; translate: -50% 0;
  width: 4.25em; height: 4.25em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--app-moss); color: var(--app-card); box-shadow: var(--app-shadow);
}
.tk-fab svg { width: 1.625em; height: 1.625em; }

/* 聞き取り (listen v0.2): closed source line, one-way bar, full-height translation card */
/* 聞き取っている間だけ動く（苔）。止めているときは薄く止まる (outline) */

/* 新しい文 24pt・semibold・text、前の文 19pt・secondaryText。確定前の訳は 0.55 */

/* ---------- Section heads ---------- */
.sec-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 0 var(--margin); align-items: end;
}
.sec-head h2 { grid-column: 1 / span 6; font-size: var(--step-head); }
.sec-head p { grid-column: 8 / -1; max-width: 30em; }

/* ---------- 3–4. 対面・聞き取り: 使っている様子 (ekto 式: 場面の写真の枠に iPhone を重ね、画面の中で字幕が進む) ---------- */
.demo-sec {
  margin-top: var(--section); padding: 0 var(--margin);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 72px); align-items: center;
}
.demo-sec.is-face .demo-figure { order: -1; } /* 対面は 枠｜説明、聞き取りは 説明｜枠 */
.demo-text h2 { margin-top: 18px; font-size: var(--step-head); }
/* 2 つのモードの見出しだけ、要の言葉を苔色に (2026-11-16 利用者)。苔は LYR の主の色。押せるものではないので、下線や枠は付けない */
.h-key { color: var(--accent-text); }
.demo-lead { margin-top: 22px; max-width: 30em; }
.demo-points { list-style: none; margin: 24px 0 0; padding: 0; max-width: 30em; border-top: 1px solid var(--line); }
.demo-points li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 600;
}
.demo-points li::before {
  content: ""; width: 12px; height: 7px; flex: none;
  border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg) translateY(-3px);
}
/* 見出し + 一行の説明の形 (対面の節) */
.demo-points.is-detail li { padding: 14px 0; }
.pt { display: grid; gap: 2px; }
.br-pc { display: inline; } /* PC だけの改行 (スマホは折り返しに任せる) */
.demo-note { margin-top: 12px; max-width: 34em; font-size: 12px; line-height: 1.6; color: var(--faint); }
.pt-desc { font-weight: 400; font-size: 15px; line-height: 1.6; color: var(--dim); }
/* スマホは見出しだけにして短くする (2026-11-15 利用者「スマホ版は説明を省略」) */
@media (max-width: 760px) { .pt-desc { display: none; } .demo-points li, .demo-points.is-detail li { padding: 7px 0; font-size: 15px; line-height: 1.5; } } /* 聞き取りの節の 3 つも同じ大きさにそろえる */

.demo-frame {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; justify-content: center;
  padding: clamp(28px, 3vw, 40px) 0;
  border-radius: 24px; /* 縁は写真そのもの。線と地は付けない（写真の上に iPhone の 1 段だけを重ねる） */
}
/* 写真は少し暗くして、iPhone の画面を主役にする */
.demo-photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; filter: brightness(.78); }
.is-listen .demo-photo { object-position: 96% 30%; }
.is-listen .phone { margin-left: 36%; } /* 講義の写真は人物が中央にいるので、写真を左へ寄せ、iPhone を右へ寄せて顔を隠さない */

/* iPhone の枠: 幅 402pt × 高さ 874pt (iPhone 17) の比。画面の中は 1em = 画面の幅 / 25 で、アプリの寸法 (pt) をそのまま em で描く */
/* 縁の厚みは iPhone 自身の幅の 3.2% にそろえる (2026-11-15 利用者「縁の厚みをヒーローと同じに」)。
   padding の % は親の幅で決まり、枠の広い対面・聞き取りでは縁が倍ほど厚くなっていたので、iPhone をコンテナにして cqi (= 自身の幅の 1%) で書く */
.phone {
  width: min(60%, 300px); padding: 0; container-type: inline-size;
  background: var(--app-text); border-radius: 16% / 7.4%;
}
.phone > .phone-screen { margin: 3.2cqi; }
.phone-screen { aspect-ratio: 402 / 874; overflow: hidden; border-radius: 13% / 6%; container-type: inline-size; }
.phone .app {
  font-size: 10px; font-size: calc(100cqi / 25);
  width: 100%; height: 100%; border: 0; border-radius: 0;
  padding: 3.6em .75em .75em;
}
.phone .app::before { /* Dynamic Island */
  content: ""; position: absolute; top: .75em; left: 50%; translate: -50% 0;
  width: 7.8em; height: 2.3em; border-radius: 1.15em; background: var(--app-text);
}
.phone .talk { grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); }
.phone .tk-card { overflow: hidden; }
/* 話している間: 文字は出さず「聞いている」印だけ (アプリは話し終えてから書き起こしと訳を一度に出す) */
.tk-card.is-listening [data-main] { color: var(--app-outline); letter-spacing: .2em; }
.phone .tk-main { font-size: 1.625em; } /* 訳文 26pt (foundation §3) */
.phone .tk-me { padding-bottom: 5.75em; } /* 下を 92pt 空ける */


/* ---------- 5. Scenes (lyr.jp .lp-card) ---------- */
.show { margin-top: var(--section); }
.show-row {
  margin-top: 48px;
  display: flex; gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--margin) 24px;
  scroll-padding: 0 var(--margin);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.scene {
  flex: 0 0 min(400px, 82vw);
  margin: 0; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.scene-photo { aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); }
.scene-photo img { width: 100%; height: 100%; object-fit: cover; }
.scene-body { padding: 18px 20px 22px; display: grid; gap: 6px; align-content: start; }
.scene-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
/* 場面名は札の下の行にそろえる (2026-11-15 利用者: 短い名前だけ札の横に並ぶのは不ぞろい) */
/* 場面名は文字の幅だけ苔の明るい色で塗る (2026-11-16 利用者: 文字を選んだときの見え方 = ::selection と同じ色) */
.scene-name {
  font-size: 18px; font-weight: 650; letter-spacing: -.01em; line-height: 1.4;
  padding: 0 .2em; margin-left: -.2em; background: var(--accent); color: var(--accent-ink);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.st-pair { font-size: var(--step-small); color: var(--accent-text); }
.scene-desc { font-size: 15px; color: var(--dim); }
@media (min-width: 1101px) {
  /* 場面は対面の 4 つ (聞き取りの場面は旅行ではないので 2026-11-15 に外した)。3 列だと 3＋1 で 1 枚だけ下に残るので 4 列 */
  .show-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; padding-bottom: 0; }
}

/* ---------- 6. Languages ---------- */
.langs {
  margin-top: var(--section);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 0 var(--margin);
}
.langs-intro { grid-column: 1 / -1; } /* 見出しを 1 行に。札はその下に全幅で並べる (lyr.jp と同じ縦の並び) */
.langs-intro h2 { font-size: var(--step-head); }
.langs-intro p { margin-top: 22px; max-width: 26em; }
.langs-body { grid-column: 1 / -1; margin-top: clamp(16px, 2.5vw, 28px); max-width: 760px; }
/* lyr.jp の .bt-chips と同じ札 (地 bg-2・細い線・丸・13px) */
.langs-lead { margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--dim); }
.lang-chips { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.lang-chips li { background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--fg); }
/* 指すと少し大きくなり、場面名のハイライトと同じ色 (地 --accent・字 --accent-ink) になる (2026-11-16 利用者) */
.lang-chips li { transition: transform 160ms var(--ease-out), background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .lang-chips li:hover { transform: scale(1.08); background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
}
@media (prefers-reduced-motion: reduce) { .lang-chips li { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } .lang-chips li:hover { transform: none; } }
.lang-more { margin-top: 8px; }
.lang-more > summary, .qa > summary { list-style: none; cursor: pointer; }
.lang-more > summary::-webkit-details-marker, .qa > summary::-webkit-details-marker { display: none; }
.lang-more > summary {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--accent-text); font-weight: 600;
}
/* Plus that turns into a minus when open */
.lang-more > summary::before, .qa > summary::before {
  content: ""; flex: none; width: 12px; height: 12px;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat, /* taste-skill-ignore: plus mark, two bars */
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat; /* taste-skill-ignore: plus mark, two bars */
}
.lang-more[open] > summary::before, .qa[open] > summary::before {
  background: linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat; /* taste-skill-ignore: minus mark */
}
.lang-more[open] .lang-list { margin-top: 4px; }

/* ---------- 7. Talk Pass ---------- */
.pass { margin-top: var(--section); padding: 0 var(--margin); }
.pass-intro h2 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); }
.pass-intro h2 span { white-space: nowrap; }
.pass-intro p { margin-top: 16px; max-width: 30em; }
.pass-cards {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px;
}
.pass-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 28px 28px 30px;
  display: flex; flex-direction: column;
}
/* 指すと少し大きく (2026-11-15 利用者)。マウスなど「指せる」端末だけ。触る端末は押している間だけ */
.pass-card { transition: transform 200ms var(--ease-out), border-color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .pass-card:hover { transform: scale(1.03); border-color: var(--accent); } }
@media (hover: none) { .pass-card:active { transform: scale(1.03); border-color: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .pass-card { transition: border-color 200ms ease; } .pass-card:hover, .pass-card:active { transform: none; } }
.pass-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
/* While prices are unannounced the period leads; once set, the price takes this slot (with the per-day figure under it). */
.pass-period { margin-top: 20px; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.pass-use { margin-top: 8px; }
.pass-price { margin-top: 2px; color: var(--dim); }

.pass-common { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.pass-common-title { font-size: var(--step-small); font-weight: 600; color: var(--dim); }
.pass-common ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.pass-common li { display: inline-flex; align-items: center; gap: 10px; }
.pass-common li::before {
  content: ""; width: 14px; height: 8px; flex: none;
  border-left: 2px solid var(--accent-text); border-bottom: 2px solid var(--accent-text);
  transform: rotate(-45deg) translateY(-2px);
}
.pass-renew { margin-top: 14px; font-weight: 650; }
.pass-note { margin-top: 10px; max-width: 46em; color: var(--dim); font-size: var(--step-small); }

/* ---------- 8. FAQ (native details: works without script, Enter/Space toggles) ---------- */
.faq {
  margin-top: var(--section);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  padding: 0 var(--margin);
}
.faq-heading { grid-column: 1 / span 4; font-size: var(--step-head); align-self: start; }
.faq-list { grid-column: 6 / -1; }
.qa:first-child { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa > summary {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 0;
  font-size: var(--step-body); font-weight: 600; line-height: 1.55;
  transition: color 150ms ease;
}
.qa > summary::before { color: var(--dim); }
.qa > summary:hover::before, .qa[open] > summary::before { color: var(--accent-text); }
.qa > p { padding: 0 0 20px 26px; max-width: 36em; }

/* ---------- 9. CTA ---------- */
.cta {
  margin-top: var(--section);
  background: var(--bg-2);
  border-block: 1px solid var(--line);
  padding: clamp(112px, 14vw, 200px) var(--margin);
}
.cta h2 { font-size: var(--step-hero); line-height: 1.1; letter-spacing: -0.03em; }
.cta h2 span { white-space: nowrap; }
/* 「LYR Talk」の下の黄の一筆 (2026-11-15 利用者の指示書と見本)。SVG の path で描き、画面に入ったら左から右へ引く。
   線の幅は文字の大きさに追従 (0.2em、スマホ 39px → 約 8px・PC 72px → 約 14px)。文字には重ねず、文字の直下に置く */
.cta h2 .cta-mark { position: relative; display: inline-block; }
.cta-line {
  position: absolute; left: -.1em; top: calc(100% - .12em); width: calc(100% + .2em); height: .34em; /* 文字幅より左右に少しはみ出させる */
  overflow: visible; pointer-events: none;
}
.cta-line path {
  /* 太さは viewBox の単位で書く (高さ 24 = .34em なので 14 ≈ .2em)。vector-effect: non-scaling-stroke と pathLength を併用すると、
     ブラウザによって破線の長さが画面の長さで数えられ、線が途中 (「l」の下) で止まった (2026-11-16 利用者) ため使わない */
  fill: none; stroke: var(--marker); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
html.js .cta-mark:not(.is-drawn) .cta-line path { stroke-dashoffset: 1; }
@media (prefers-reduced-motion: reduce) {
  .cta-line path { transition: none; }
  html.js .cta-mark:not(.is-drawn) .cta-line path { stroke-dashoffset: 0; }
}
/* 見出しの右の飛行機 (2026-11-15 利用者「黒で・機体が右上を向く」)。形は Material Icons の flight (Apache 2.0)。上向きの形を 45° 回して右上へ。
   色は見出しと同じ (ライトでは黒。ダークでは見出しと同じ明るい色にしないと消えるため) */
.cta-plane { display: inline-block; width: .85em; height: .85em; margin-left: .15em; vertical-align: -.08em; fill: currentColor; transform: rotate(45deg); }
.cta p { margin-top: 22px; max-width: 32em; color: var(--dim); }
.cta .btn { margin-top: 32px; }

/* Footer (lyr.jp: quiet, line on top) */
.foot { padding: 0 var(--margin) 48px; }
.foot-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap);
  padding: 56px 0 48px;
}
.foot-nav { grid-column: 9 / span 4; display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 4px 16px; font-size: 15px; }
.foot-nav a { display: flex; align-items: center; min-height: 36px; text-decoration: none; color: var(--dim); transition: color 150ms ease; }
.foot-nav a:hover { color: var(--fg); }
.foot-big {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 40px;
}
.foot-big .small { font-size: var(--step-small); color: var(--faint); }

/* Motion is limited to what happens inside the drawn screens (design §4) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* Tablet */
@media (max-width: 1100px) {
  .langs-intro { grid-column: 1 / -1; }
  .langs-body { grid-column: 1 / -1; }
  .faq-heading { grid-column: 1 / -1; margin-bottom: 28px; }
  .faq-list { grid-column: 1 / -1; }
  .pass-cards { gap: 14px; }
  .pass-card { padding: 22px 20px 24px; }
  .foot-nav { grid-column: 8 / -1; }
}

/* Phone */
@media (max-width: 760px) {
  .nav { padding: 14px 16px; }
  .nav nav a { display: none; }
  .hero { display: block; padding-top: 16px; }
  .hero-title { font-size: min(10.5vw, 2.75rem); }
  .hero-lead { font-size: 16px; margin-top: 14px; line-height: 1.65; }
      .hero .btn { margin-top: 16px; width: 100%; min-height: 48px; padding: 10px 20px; }
    .hero-copy { padding-bottom: 20px; }
  /* スマホは画面の幅いっぱい。縦を 4:5 に詰めて、最初の画面に iPhone が収まるようにする */
  /* スマホは文字の下に写真の枠 (画面の幅いっぱい)。枠の高さは iPhone + 上下の余白に合わせ、最初の画面にマイクのボタンまで入れる (2026-11-15 利用者「スマホのレスポンシブ対応」)。
     iPhone の幅は 46% を上限に、背の低い画面では (画面の高さ − 文字の部分 ≈ 360px) × 0.44 に縮める (iPhone の高さ ≈ 幅 × 2.25)。
     例: 390×844 → 179px (46%)、360×640 → 123px。写真は横 71% (iPhone の置き場) が枠の中央に来るよう寄せる */
  .hero-stage {
    position: relative; inset: auto; z-index: auto; margin: 0 calc(var(--margin) * -1);
    display: grid; justify-items: center; padding: 18px 0 78px; /* 下は吹き出し (高さ ≈ 40px + 尖り) の分を空ける */
  }
  .hero-table { object-position: 88% 50%; }
  /* スマホの iPhone の幅は 1 つの値にそろえる (ヒーロー・対面・聞き取り。2026-11-15 利用者「2・3 個目を 1 個目に統一」) */
  :root { --m-phone: max(120px, min(46vw, calc((100svh - 360px) * 0.44))); }
  .hero-player { position: relative; left: auto; top: auto; translate: none; width: var(--m-phone); }
  /* 小さい iPhone の画面でも札が画面の幅に収まるよう、文字を画面の幅に合わせて縮める (13px が上限)。音のボタンも少し詰めて iPhone に重ねない */
  .hero-hint { top: calc(100% + 14px); font-size: 14px; padding: 8px 16px 8px 12px; }
  .hero-sound { right: 12px; top: 12px; bottom: auto; padding: 0 12px 0 10px; font-size: 13px; gap: 6px; } /* 下は iPhone と重なるので右上へ */

  /* 説明 → 枠 の縦並び。枠は画面の幅いっぱい近くまで広げ、iPhone の字が読める大きさにする (画面の幅 ≈ 290px → 訳文 ≈ 19px) */
  .demo-sec { display: block; }
  .br-pc { display: none; }
  /* 対面の節: スマホは速さの注記を実演の画像の下へ (2026-11-16 利用者)。説明の箱を display: contents にして、注記だけ並びを後ろへ送る */
  .demo-sec.is-face { display: flex; flex-direction: column; align-items: stretch; } /* PC の align-items: center を打ち消す */
  .demo-sec.is-face .demo-text { display: contents; }
  .demo-sec.is-face .demo-figure { order: 1; }
  .demo-sec.is-face .demo-note { order: 2; margin-top: 14px; }
  .demo-figure { margin-top: 28px; }
  .demo-frame { margin-inline: calc(16px - var(--margin)); padding: 24px 0; border-radius: 18px; }
  .phone { width: 80%; }
  /* 聞き取りも対面と同じ大きさ (iPhone 50%) にそろえる (2026-11-15 利用者)。人物が写真の中央にいるので、iPhone を左へ寄せ、
     写真を寄せて人物を右に出す (枠 ≈ 358×410 で写真の幅 ≈ 615px。object-position 40% で人物の顔が枠の右 3/4 あたりに来る) */
  .is-listen .phone { width: var(--m-phone); margin-left: 0; margin-right: 42%; }
  .is-listen .demo-photo { object-position: 40% 30%; }
  /* 対面の写真は 2 人の顔が左右の端 (横 27%・73%) にある。細い枠でも顔が iPhone の外に出るよう、iPhone を小さくして枠を横に広く使う */
  .is-face .phone { width: var(--m-phone); }

  .sec-head { display: block; }
  .sec-head p { margin-top: 16px; }

  .show-row { margin-top: 28px; }


  /* スマホも 3 枚を横に並べる (2026-11-15 利用者)。縦に場所を取らないよう小さなカードにし、
     「1 日間」の大きな字はパスの名前と同じことなので出さない */
  .pass-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
  .pass-card { padding: 14px 12px 16px; border-radius: 16px; }
  .pass-card h3 { font-size: 16px; }
  .pass-period { display: none; }
  .pass-use { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--dim); }
  .pass-common { margin-top: 20px; padding-top: 16px; }
  .pass-common ul { gap: 6px 18px; margin-top: 8px; font-size: 14px; }
  .pass-renew { margin-top: 10px; font-size: 14px; }

  .qa > summary { font-size: 16px; }
  .qa > p { padding-left: 26px; }

  .cta { padding: 104px 16px; }
  .cta h2 { font-size: 10vw; }
  .cta h2 > span { display: block; } /* スマホは「次の旅に」で改行する (2026-11-15 利用者)。中の .cta-mark は inline-block のまま */
  /* 飛行機は 2 行の右に、2 行分の大きさで置く (2026-11-15 利用者)。2 行の高さ = 1.1em × 2 ≈ 2.2em なので 1.9em */
  .cta h2 { position: relative; width: fit-content; padding-right: 2.2em; }
  .cta-plane { position: absolute; right: 0; top: 50%; width: 1.9em; height: 1.9em; margin: 0; translate: 0 -50%; }
  .cta .btn { width: 100%; }

  .foot-grid { display: none; } /* スマホはページ内のリンクを省き、コピーライトだけにする (2026-11-15 利用者) */
  .foot-big { border-top: 0; padding-top: 32px; }
}

/* LYR Talk のアプリのアイコン (アプリの AppIcon と同じ絵。2026-11-15 利用者「LYR Talk のアイコンに置き換えて」)。角は iOS のアイコンに近い丸め */
.wordmark .talk-icon { width: 48px; height: 48px; border-radius: 22.37%; display: block; filter: none; } /* 40 → 48px (2026-11-16) */

/* フッターのロゴ (アイコンと LYR Talk) は外した (2026-11-15 利用者「フッターのロゴはいらない」)。その分、上の「次の旅に LYR Talk」の高さを取る */

/* 画面を押して一時停止・再開 (2026-11-15 利用者: 一時停止のボタンと「動作イメージ」の注記は外した)。止めている間だけ中央に ▶ */
.demo-frame { position: relative; }
.phone-screen { position: relative; }
.demo-frame[role="button"] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.demo-frame[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.demo-paused {
  position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; pointer-events: none;
  background: rgba(0, 0, 0, .18); opacity: 0; transition: opacity 160ms ease-out; border-radius: inherit;
}
.demo-paused svg { width: 64px; height: 64px; padding: 20px 18px 20px 22px; box-sizing: border-box; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; }
.demo-frame.is-paused[role="button"] .demo-paused { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .demo-paused { transition: none; } .demo-frame.is-paused .demo-paused { opacity: 0; } }

/* ---------- 対面の画面 (録画 2026-11-15 に合わせて描き直し・利用者「録画をもとに忠実に」) ----------
   1em = 画面の幅の 1/402 = 1pt。寸法は録画 (588×1280px = 402×874pt、1pt ≈ 1.463px) から測った値 */
.fx {
  position: absolute; inset: 0; overflow: hidden;
  font-size: calc(100cqi / 402); line-height: 1.35;
  background: var(--app-washi); color: var(--app-text);
}
.fx p { margin: 0; }
.fx-status { position: absolute; inset: 0 0 auto; height: 54em; }
.fx-time { position: absolute; left: 2.5625em; top: 1.5625em; font-size: 16em; font-weight: 600; line-height: 1; letter-spacing: -.01em; } /* 位置は 左 41pt・上 25pt (文字 16pt の em で書く) */
.fx-island { position: absolute; left: 50%; top: 11em; width: 126em; height: 37em; translate: -50% 0; border-radius: 19em; background: #000; }
.fx-sys { position: absolute; right: 26em; top: 25em; display: flex; align-items: center; gap: 6em; }
.fx-sys svg { width: 17em; height: 12em; }
.fx-batt { width: 25em; height: 12em; border-radius: 3.5em; border: 1em solid rgb(47 47 47 / .4); padding: 1.5em; display: block; }
.fx-batt i { display: block; width: 70%; height: 100%; border-radius: 2em; background: var(--app-text); }
.fx-panel { position: absolute; left: 12em; right: 12em; height: 345em; border-radius: 18em; background: var(--app-card); overflow: hidden; }
.fx-panel.is-them { top: 70em; rotate: 180deg; }
.fx-panel.is-me { top: 488em; height: 344em; }
.fx-lang { position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: 1.27em 1.8em .55em; background: var(--app-card); font-size: 11em; color: var(--app-sub); } /* 余白は 14pt・20pt・6pt (文字 11pt の em で書く) */
.fx-list {
  list-style: none; margin: 0; position: absolute; left: 0; right: 0; top: 34em; bottom: 0;
  padding: 4em 12em 14em; display: flex; flex-direction: column; gap: 10em; overflow: hidden;
}
.fx-panel.is-me .fx-list { padding-bottom: 92em; } /* 浮かぶ丸 (直径 68pt) の分を空ける */
.fx-msg { max-width: 86%; flex: none; }
.fx-main { font-size: 13.5em; font-weight: 600; }
.fx-sub { margin-top: .35em; font-size: 10.5em; color: var(--app-sub); }
/* 自分の発言: 右寄せ・白地に細い線 */
.fx-msg.is-own { align-self: flex-end; text-align: right; padding: 9em 12em 10em; border: 1em solid var(--app-hair); border-radius: 14em; max-width: 72%; }
/* 受け取った発言: 左寄せ・地なし。いちばん新しいものだけ和紙の地 + 苔の線 1.5pt で大きく */
.fx-msg.is-recv { align-self: flex-start; padding: 0 4em; }
.fx-msg.is-recv .fx-main { font-weight: 700; }
.fx-msg.is-latest { padding: 11em 15em 12em; background: var(--app-washi); border: 1.5em solid var(--app-moss); border-radius: 14em; }
.fx-msg.is-latest .fx-main { font-size: 18em; }
/* 話している間の「聞いています」の印 (アプリは話し終えてから書き起こしと訳を一度に出す) */
.fx-pill { align-self: center; flex: none; display: flex; gap: 3em; align-items: center; padding: 7em 11em; border-radius: 12em; background: rgb(47 47 47 / .07); }
.fx-pill i { width: 4em; height: 4em; border-radius: 50%; background: var(--app-outline); }
.fx-bar {
  position: absolute; left: 0; right: 0; top: 425em; height: 52em;
  display: grid; grid-template-columns: 46em 46em minmax(0, 1fr) 46em 46em; align-items: center; justify-items: center; padding: 0 10em;
}
.fx-ico { width: 22em; height: 22em; color: var(--app-text); }
.fx-img { display: block; height: auto; } /* 幅は録画で測った pt (1em = 1pt) を style で指定 */
.fx-ico.is-moss { color: var(--app-moss); width: 26em; height: 26em; }
.fx-pair { font-size: 15em; font-weight: 600; white-space: nowrap; }
.fx-fab {
  position: absolute; left: 50%; top: 798em; width: 68em; height: 68em; translate: -50% -50%;
  display: grid; place-items: center; border-radius: 50%; background: var(--app-moss); color: #fff;
  box-shadow: 0 2em 8em rgb(0 0 0 / .18);
}
.fx-fab svg { width: 26em; height: 26em; }

/* ---------- 聞き取りの全画面 (アプリの ListenFullScreen・ListenLinesView に合わせて描き直し 2026-11-16 利用者「画面設計書を確認して」) ----------
   1em = 1pt (.fx と同じ)。白い地に、上に原文・下に訳。上の帯は 設定・波形・閉じる。印は録画から切り抜いた本物 (設定・波形) */
.lx { position: absolute; inset: 0; overflow: hidden; font-size: calc(100cqi / 402); line-height: 1.3; background: var(--app-card); color: var(--app-text); }
.lx p { margin: 0; }
.lx-top { position: absolute; left: 12em; right: 12em; top: 62em; height: 44em; display: flex; align-items: center; justify-content: space-between; }
.lx-top > .fx-img { margin-left: 11em; } /* 押せる範囲 44pt の中央に印 */
/* 波形: 録画の印 (waveform) を型にして色を塗る。聞き取り中は苔、声を拾っている間は左から順に濃くなる (symbolEffect .variableColor.iterative の近似) */
.lx-wave {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 28em; height: 31.4em;
  -webkit-mask: url("assets/ls-ico-waveform.png") center / contain no-repeat; mask: url("assets/ls-ico-waveform.png") center / contain no-repeat;
  background: var(--app-moss);
}
.lx-wave.is-live {
  background: linear-gradient(90deg, rgb(74 93 35 / .35) 0 30%, var(--app-moss) 45% 55%, rgb(74 93 35 / .35) 70% 100%) 0 0 / 300% 100%;
  animation: lx-wave 900ms linear infinite;
}
@keyframes lx-wave { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .lx-wave.is-live { animation: none; background: var(--app-moss); } }
.lx-close { width: 44em; height: 44em; display: grid; place-items: center; }
.lx-close svg { width: 32em; height: 32em; padding: 9em; border-radius: 50%; background: rgb(118 118 128 / .12); color: var(--app-sub); }
/* 原文 2 : 訳 3。文は ListenLinesView と同じ: 最新は大きく濃く、前の文は小さく薄く。確定前の訳は 0.55 */
.lx-lines { list-style: none; margin: 0; position: absolute; left: 0; right: 0; padding: 4em 20em 12em; display: flex; flex-direction: column; gap: 12em; overflow: hidden; }
.lx-lines.is-src { top: 110em; height: 286em; justify-content: flex-end; }
.lx-lines.is-out { top: 409em; bottom: 34em; padding-bottom: 92em; justify-content: flex-end; }
.lx-lines li { flex: none; font-weight: 600; color: var(--app-sub); transition: opacity 200ms ease-out; }
.lx-lines.is-src li { font-size: 17em; }
.lx-lines.is-src li:last-child { font-size: 20em; color: var(--app-text); }
.lx-lines.is-out li { font-size: 19em; }
.lx-lines.is-out li:last-child { font-size: 24em; color: var(--app-text); }
.lx-lines li.is-draft { opacity: .55; }
.lx-lines.is-out li.is-hint { margin: auto 0; align-self: center; text-align: center; font-size: 17em; color: var(--app-sub); } /* 訳がまだ無い時の案内 (中央・17pt・secondaryText) */
.lx-divider { position: absolute; left: 20em; right: 20em; top: 397em; height: 1px; background: var(--app-hair); }