/* Present mode. Sizes use --u (1% of a 16:9 frame height) so text holds >= 32px at 1080p. */
.lc-btn-present { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  background: var(--teal); color: #03161a; font: 700 13px/1 var(--font); }
html[lang="ja"] .lc-btn-present { font-family: var(--jp); }
.lc-btn-present:hover { background: var(--teal-hi); }
.lc-btn-present:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 2px; }

.lc-root[data-mode="present"] .lc-hero,
.lc-root[data-mode="present"] .lc-scrim,
.lc-root[data-mode="present"] .lc-legend,
.lc-root[data-mode="present"] .lc-dock,
.lc-root[data-mode="present"] .lc-caption,
.lc-root[data-mode="present"] .lc-exit,
.lc-root[data-mode="present"] .lc-btn-present { display: none; }
.lc-root[data-mode="present"] .lc-stage { cursor: pointer; }

.lcp { position: absolute; inset: 0; z-index: 5; pointer-events: none; --u: min(1vh, 0.5625vw); color: #fff; font-family: var(--font); }
html[lang="ja"] .lcp { font-family: var(--jp); }
.lcp[hidden] { display: none; }
.lcp-scrim { position: absolute; inset: 0; transition: background 0.8s; }
.lcp[data-side="left"] .lcp-scrim { background: linear-gradient(90deg, rgba(5, 6, 15, 0.92) 0%, rgba(5, 6, 15, 0.7) 34%, rgba(5, 6, 15, 0) 60%); }
.lcp[data-side="right"] .lcp-scrim { background: linear-gradient(270deg, rgba(5, 6, 15, 0.92) 0%, rgba(5, 6, 15, 0.7) 34%, rgba(5, 6, 15, 0) 60%); }

.lcp-content { position: absolute; top: 50%; transform: translateY(-52%); width: min(46%, calc(96 * var(--u))); display: flex; flex-direction: column; gap: calc(2.4 * var(--u)); }
.lcp[data-side="left"] .lcp-content { left: calc(8 * var(--u)); }
.lcp[data-side="right"] .lcp-content { right: calc(8 * var(--u)); }
.lcp-content > *, .lcp-content p, .lcp-content h2, .lcp-content ul { margin: 0; }

.lcp [data-step] { opacity: 0; transform: translateY(calc(1.8 * var(--u))); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.lcp [data-step].is-in { opacity: 1; transform: none; }
.lcp svg [data-step] { transform: none; }
.lcp-content.no-anim [data-step], .lcp-content.no-anim * { transition: none !important; }

.lcp-eyebrow { font: 600 calc(3 * var(--u))/1.3 var(--mono); letter-spacing: 0.06em; color: var(--teal-hi); text-wrap: balance; }
html[lang="ja"] .lcp-eyebrow { font-family: var(--jp); letter-spacing: 0; }
.lcp-h1 { font-size: calc(8.4 * var(--u)); line-height: 1.02; font-weight: 700; letter-spacing: -0.015em; text-wrap: balance; }
.lcp-h { font-size: calc(7 * var(--u)); line-height: 1.04; font-weight: 700; letter-spacing: -0.01em; text-wrap: balance; }
html[lang="ja"] .lcp-h1, html[lang="ja"] .lcp-h { line-height: 1.25; font-size: calc(6.2 * var(--u)); }
.lcp-sub { font-size: calc(3.8 * var(--u)); line-height: 1.3; color: #d5dbf2; text-wrap: pretty; }
.lcp-p { font-size: calc(3.6 * var(--u)); line-height: 1.35; color: #eef2ff; text-wrap: pretty; }
.lcp-accent { font-size: calc(4.2 * var(--u)); line-height: 1.25; font-weight: 700; color: var(--teal-hi); text-wrap: balance; }
.lcp-site { font: 600 calc(3 * var(--u))/1 var(--mono); color: #c3cae4; }
.lcp-presenter { display: flex; flex-direction: column; gap: calc(0.6 * var(--u)); font-size: calc(3.4 * var(--u)); }
.lcp-presenter span { color: #c3cae4; font-size: calc(3 * var(--u)); }

.lcp-stat { display: flex; flex-direction: column; gap: calc(0.8 * var(--u)); }
.lcp-stat-row { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: calc(1.6 * var(--u)); }
.lcp-num { font-size: calc(10 * var(--u)); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; letter-spacing: -0.02em; }
.lcp-unit { font-size: calc(3.6 * var(--u)); color: #d5dbf2; }
.lcp-label { font-size: calc(3.6 * var(--u)); line-height: 1.3; color: var(--teal-hi); font-weight: 600; }

.lcp-list { list-style: none; padding: 0; display: grid; gap: calc(1.4 * var(--u)); }
.lcp-list li { position: relative; padding-left: calc(3.4 * var(--u)); font-size: calc(3.6 * var(--u)); line-height: 1.3; }
.lcp-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: calc(1.6 * var(--u)); height: calc(0.4 * var(--u)); background: #ff2d78; border-radius: 2px; }

.lcp-flow { display: flex; flex-wrap: wrap; align-items: center; gap: calc(1.4 * var(--u)); }
.lcp-node { font-size: calc(3.4 * var(--u)); font-weight: 600; padding: calc(1 * var(--u)) calc(2.2 * var(--u)); border-radius: 999px; border: 2px solid rgba(2, 175, 166, 0.55); color: #dffcf9; transition: background 0.4s, color 0.4s, border-color 0.4s; }
.lcp-node.is-done { border-color: var(--teal); }
.lcp-node.is-active { background: var(--teal); border-color: var(--teal); color: #03161a; }
.lcp-arrow { font-size: calc(3.4 * var(--u)); color: var(--teal-hi); }

.lcp-group { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.lcp-group-title { font: 600 calc(3 * var(--u))/1 var(--mono); color: var(--teal-hi); letter-spacing: 0.04em; }
html[lang="ja"] .lcp-group-title { font-family: var(--jp); }
.lcp-chips { display: flex; flex-wrap: wrap; gap: calc(1 * var(--u)); }
.lcp-chip { font-size: calc(3 * var(--u)); line-height: 1.2; padding: calc(0.9 * var(--u)) calc(1.8 * var(--u)); border-radius: calc(0.8 * var(--u)); border: 1.5px solid rgba(255, 255, 255, 0.26); background: rgba(5, 6, 15, 0.5); }
.lcp-badges .lcp-chip { border-color: var(--teal); background: rgba(2, 175, 166, 0.16); font-weight: 700; color: #e9fffd; }
.lcp-outputs .lcp-chip { border-style: dashed; }

.lcp-donut { display: grid; grid-template-columns: calc(30 * var(--u)) minmax(0, 1fr); gap: calc(3 * var(--u)); align-items: center; }
.lcp-donut-svg { width: 100%; height: auto; overflow: visible; }
.lcp-seg, .lcp-outer circle { transition: stroke-dasharray 1.2s cubic-bezier(0.3, 0.7, 0.2, 1); }
.lcp-arrowhead { opacity: 0; transition: opacity 0.4s 1s; }
.lcp-outer.is-in .lcp-arrowhead { opacity: 1; }
.lcp-donut-center { fill: #fff; font: 700 22px var(--font); }
html[lang="ja"] .lcp-donut-center { font-family: var(--jp); }
.lcp-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(1.2 * var(--u)); }
.lcp-legend li { display: grid; grid-template-columns: calc(2 * var(--u)) calc(9 * var(--u)) minmax(0, 1fr); align-items: center; gap: calc(1.2 * var(--u)); font-size: calc(3 * var(--u)); line-height: 1.2; }
.lcp-legend li.lcp-legend-outer { grid-template-columns: calc(2 * var(--u)) auto minmax(0, 1fr); margin-top: calc(0.6 * var(--u)); }
.lcp-sw { width: calc(2 * var(--u)); height: calc(2 * var(--u)); border-radius: 3px; }
.lcp-sw-line { height: calc(0.5 * var(--u)); }
.lcp-pct { font-weight: 700; font-variant-numeric: tabular-nums; font-size: calc(3.4 * var(--u)); }
.lcp-legend-outer .lcp-pct { color: #ff7a87; }

.lcp-bar { position: absolute; left: calc(8 * var(--u)); right: calc(8 * var(--u)); bottom: calc(3.4 * var(--u)); display: flex; align-items: center; gap: calc(2 * var(--u)); pointer-events: auto; }
.lcp-progress { flex: 1; display: flex; gap: 6px; }
.lcp-segbar { all: unset; cursor: pointer; flex: 1; height: 16px; display: flex; align-items: center; }
.lcp-segbar::before { content: ""; position: absolute; }
.lcp-segbar { position: relative; }
.lcp-segbar::after { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); }
.lcp-segbar i { position: relative; z-index: 1; display: block; height: 4px; border-radius: 2px; background: var(--teal-hi); transition: width 0.5s ease; }
.lcp-segbar:hover::after { background: rgba(255, 255, 255, 0.4); }
.lcp-segbar:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 2px; border-radius: 3px; }
.lcp-count { font: 600 calc(2.4 * var(--u))/1 var(--mono); color: #d5dbf2; font-variant-numeric: tabular-nums; min-width: 6ch; text-align: right; }
.lcp-btn { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px; background: rgba(12, 15, 36, 0.8); border: 1px solid rgba(2, 175, 166, 0.4); color: #eef2ff; }
.lcp-btn:hover { border-color: var(--teal); }
.lcp-btn:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 2px; }

/* Wide chapters (cards) */
.lcp.is-wide .lcp-content { width: min(64%, calc(124 * var(--u))); }
.lcp.is-wide[data-side="left"] .lcp-scrim { background: linear-gradient(90deg, rgba(5, 6, 15, 0.92) 0%, rgba(5, 6, 15, 0.75) 50%, rgba(5, 6, 15, 0) 80%); }
.lcp-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(2 * var(--u)); }
.lcp-card { padding: calc(2.2 * var(--u)); border-radius: calc(1.1 * var(--u)); border: 1.5px solid rgba(2, 175, 166, 0.45); background: rgba(5, 6, 15, 0.62); display: flex; flex-direction: column; gap: calc(0.8 * var(--u)); }
.lcp-card-t { margin: 0; font-size: calc(3.4 * var(--u)); font-weight: 700; color: var(--teal-hi); line-height: 1.2; }
.lcp-card-b { margin: 0; font-size: calc(3 * var(--u)); line-height: 1.3; color: #eef2ff; text-wrap: pretty; }
.lcp-list-teal li::before { background: var(--teal-hi); }
.lcp-contacts { display: flex; flex-wrap: wrap; gap: calc(3 * var(--u)); }

/* AI recommendation + teleoperation console */
.lcp-ai, .lcp-tele { border-radius: calc(1.3 * var(--u)); background: rgba(5, 6, 15, 0.78); padding: calc(2.2 * var(--u)) calc(2.6 * var(--u)); display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.lcp-ai { border: 2px solid #fff; box-shadow: 0 0 calc(3 * var(--u)) rgba(255, 255, 255, 0.18); }
.lcp-ai-head, .lcp-tele-head { display: flex; align-items: center; gap: calc(1.2 * var(--u)); font: 600 calc(2.6 * var(--u))/1 var(--mono); color: var(--teal-hi); }
html[lang="ja"] .lcp-ai-head, html[lang="ja"] .lcp-tele-head { font-family: var(--jp); }
.lcp-ai-dot { width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff; }
.lcp-ai-sim { margin-left: auto; color: #c3cae4; font-size: calc(2.2 * var(--u)); text-transform: uppercase; letter-spacing: 0.06em; }
.lcp-ai-t { margin: 0; font-size: calc(3.4 * var(--u)); font-weight: 700; line-height: 1.25; }
.lcp-ai-b { margin: 0; font-size: calc(3.1 * var(--u)); line-height: 1.35; color: #d5dbf2; }
.lcp-tele { border: 2px solid rgba(2, 175, 166, 0.55); transition: border-color 0.3s, box-shadow 0.3s; }
.lcp-tele.is-warn { border-color: #ff2d78; box-shadow: 0 0 calc(3 * var(--u)) rgba(255, 45, 120, 0.35); }
.lcp-tele-row { display: flex; align-items: baseline; justify-content: space-between; gap: calc(2 * var(--u)); }
.lcp-tele-val { font: 700 calc(7 * var(--u))/1 var(--mono); font-variant-numeric: tabular-nums; }
.lcp-tele-status { font-size: calc(3 * var(--u)); font-weight: 700; color: #2ee59d; }
.lcp-tele.is-warn .lcp-tele-status { color: #ff7aa6; }
.lcp-gauge { position: relative; height: calc(1.2 * var(--u)); border-radius: 999px; background: rgba(255, 255, 255, 0.12); }
.lcp-gauge i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #2ee59d; transition: width 0.4s, background 0.3s; }
.lcp-tele.is-warn .lcp-gauge i { background: #ff2d78; }
.lcp-gauge b { position: absolute; left: 50%; top: calc(-0.6 * var(--u)); bottom: calc(-0.6 * var(--u)); width: 2px; background: #fff; }
.lcp-tele-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: calc(1 * var(--u)) calc(3 * var(--u)); font-size: calc(3 * var(--u)); color: #d5dbf2; }

/* Hide text (H), sheets, blank, resume, toast */
.lcp.is-hidden .lcp-content, .lcp.is-hidden .lcp-scrim { opacity: 0; }
.lcp.is-hidden .lcp-bar { opacity: 0.25; }
.lcp-content, .lcp-bar { transition: opacity 0.4s; }
.lcp-sheet { position: absolute; z-index: 20; inset: 0; background: rgba(5, 6, 15, 0.9); backdrop-filter: blur(8px); padding: 48px clamp(20px, 6vw, 96px); overflow: auto; color: #fff; }
.lcp-sheet[hidden] { display: none; }
.lcp-sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.lcp-sheet-head h2 { margin: 0; font-size: 28px; }
.lcp-grid-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.lcp-gcard { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; min-height: 96px; border-radius: 12px; border: 1px solid rgba(2, 175, 166, 0.4); background: rgba(12, 15, 36, 0.8); }
.lcp-gcard:hover { border-color: var(--teal-hi); }
.lcp-gcard:focus-visible { outline: 2px solid var(--teal-hi); outline-offset: 2px; }
.lcp-gcard[aria-current="true"] { background: rgba(2, 175, 166, 0.22); border-color: var(--teal); }
.lcp-gnum { font: 600 14px/1 var(--mono); color: var(--teal-hi); }
.lcp-gtitle { font-size: 20px; font-weight: 700; line-height: 1.2; }
.lcp-keys { margin: 0; display: grid; gap: 12px; max-width: 640px; }
.lcp-keys div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; align-items: center; }
.lcp-keys dt { display: flex; gap: 6px; }
.lcp-keys dd { margin: 0; font-size: 18px; color: #d5dbf2; }
.lcp-keys kbd { font: 600 14px/1 var(--mono); padding: 7px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.06); }
.lcp-blank { position: absolute; inset: 0; z-index: 40; background: #000; cursor: pointer; }
.lcp-blank[hidden] { display: none; }
.lcp-resume { position: absolute; z-index: 7; left: 50%; bottom: 24px; transform: translateX(-50%); }
.lcp-resume[hidden] { display: none; }
.lcp-toast { position: absolute; z-index: 30; left: 50%; top: 84px; transform: translateX(-50%); padding: 12px 20px; border-radius: 999px; background: rgba(12, 15, 36, 0.92); border: 1px solid var(--teal); color: #fff; font: 600 15px/1.2 var(--font); }
.lcp-toast[hidden] { display: none; }
.lcp-btn:disabled { opacity: 0.4; cursor: progress; }

@media (max-width: 720px) {
  .lcp-cards { grid-template-columns: minmax(0, 1fr); }
  .lcp-bar [data-p="presenter"], .lcp-bar [data-p="help"] { display: none; }
  .lcp { --u: 4px; }
  .lcp[data-side] .lcp-scrim { background: linear-gradient(0deg, rgba(5, 6, 15, 0.95) 0%, rgba(5, 6, 15, 0.8) 45%, rgba(5, 6, 15, 0) 75%); }
  .lcp[data-side] .lcp-content { left: 18px; right: 18px; width: auto; top: auto; bottom: 80px; transform: none; max-height: 62%; overflow: hidden; }
  .lcp-donut { grid-template-columns: 120px minmax(0, 1fr); }
  .lcp-bar { left: 14px; right: 14px; bottom: 16px; }
  .lcp-count { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .lcp [data-step] { transform: none; transition: opacity 0.3s; }
  .lcp-seg, .lcp-outer circle { transition: none; }
}