/* 통합 도구 전용 — 국내 금융 앱·상담 보고서 문법 (2026-11-06, DECISIONS D-038, 기준표 DESIGN.md).
   lib/condition.css(조건 시험 원본 사본, 생성물)의 결과·입력 스타일 위에 색·글자·배치를 덮어쓴다.
   눈에 띄는 것은 붕괴 지도 하나. 나머지는 회색 면과 여백으로 묶고, 색은 부족(빨강)·여유와 선택(파랑)에만 쓴다. */
:root {
  --bg:#ffffff;
  --surface:#f4f5f7;
  --soft:#f4f5f7;
  --ink:#1c1f24;
  --ink-2:#535a65;
  --ink-3:#8a919b;
  --line:#e3e6ea;
  --red:#d7373f;
  --red-soft:#fcebec;
  --blue:#2c64c8;
  --blue-soft:#eaf0fb;
  --focus:#2c64c8;
  --r-panel:12px;
  --r-control:8px;
}
body { background:var(--bg); font-size:15px; line-height:1.6 }
.masthead, .plan-strip, .hero, .workspace, .evidence, .reading, .page-footer { max-width:1240px }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px }
.alert { border-radius:var(--r-control); border-left-width:0 }
.page-alert { max-width:1176px }

/* 상단 막대 */
.masthead { padding:16px 32px; border-bottom:1px solid var(--line) }
.wordmark { font-size:16px; font-weight:700; letter-spacing:-.01em }
.masthead-meta { white-space:nowrap; font-size:13px }
.local-dot { background:var(--blue) }

/* 안 선택: 한 줄 선택 막대 */
.plan-strip { margin:0 auto; padding:24px 32px 0 }
.strip-title { font-size:15px; font-weight:600; color:var(--ink) }
.strip-title span { margin-left:8px; font-size:13px; font-weight:400; color:var(--ink-3) }
.plan-tabs {
  margin-top:10px; padding:4px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px;
  background:var(--surface); border-radius:var(--r-panel);
}
.plan-tab {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:4px 12px;
  padding:12px 16px; text-align:left; border-radius:var(--r-control); color:var(--ink-2);
}
.plan-tab:hover { background:rgba(255,255,255,.6) }
.plan-tab[aria-checked="true"] { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(28,31,36,.08) }
.plan-name { font-size:15px; font-weight:600; display:flex; align-items:center; gap:6px; flex-wrap:wrap }
.plan-badge { padding:1px 6px; font-size:11px; font-weight:600; color:var(--blue); background:var(--blue-soft); border-radius:4px }
/* 비율은 '선택'이 아니라 '나쁨'의 양이라 빨강·파랑을 쓰지 않고 먹색으로. 선택은 바탕(흰색)으로만 표시 */
.plan-share { font-size:15px; font-weight:700; color:var(--ink) }
.plan-tab:not([aria-checked="true"]) .plan-share { color:var(--ink-2) }
.plan-bar { grid-column:1 / -1; height:4px; border-radius:2px; background:var(--line); overflow:hidden }
.plan-bar span { display:block; height:100%; background:var(--ink-2) }
.plan-tab:not([aria-checked="true"]) .plan-bar span { background:var(--ink-3) }
.plan-summary { grid-column:1 / -1; font-size:13px; color:var(--ink-2) }
.plan-base { grid-column:1 / -1; font-size:12px; color:var(--ink-3) }

/* 첫 화면: 지도(왼쪽) + 결과 요약(오른쪽) */
.hero {
  margin:0 auto; padding:16px 32px 0;
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; align-items:start;
}
.atlas { margin:0; min-width:0; padding:24px; background:var(--surface); border-radius:var(--r-panel) }
.atlas-head { display:flex; flex-direction:column; gap:2px; margin-bottom:16px }
.atlas-title { font-size:20px; font-weight:700; letter-spacing:-.01em }
.atlas-source { font-size:13px; color:var(--ink-3) }
.atlas-body { display:grid; grid-template-columns:72px minmax(0,1fr); grid-template-rows:auto auto }
.axis-y-col { display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; padding-right:10px; text-align:right; font-size:12px; color:var(--ink-3) }
.axis-name { color:var(--ink-2); font-weight:600; line-height:1.35 }
.axis-x-row { grid-column:2; display:flex; justify-content:space-between; gap:12px; padding-top:6px; font-size:12px; color:var(--ink-3) }
.atlas-plot { position:relative; min-width:0 }
#atlas-svg { display:block; width:100%; height:auto; aspect-ratio:3 / 2; border-radius:var(--r-control); background:#fff; cursor:crosshair }
#atlas-svg:focus { outline:none }
#atlas-svg:focus-visible { outline:2px solid var(--focus); outline-offset:3px }
.atlas-hint {
  position:absolute; left:10px; top:8px; padding:2px 8px; font-size:12px; color:var(--ink-2);
  background:rgba(255,255,255,.85); border-radius:6px; pointer-events:none;
}
body:not([data-ready]) .atlas-hint { display:none }
.contour { fill:none; stroke:var(--ink); stroke-opacity:.22 }
.crash-line { fill:none; stroke:var(--red); stroke-linecap:round; stroke-linejoin:round }
.here { transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .2s }
.here-halo { fill:#fff; fill-opacity:.9; stroke:var(--ink); stroke-width:1.25 }
.here-dot { fill:var(--ink) }
.here[data-exact="false"] .here-dot { fill:#fff; stroke:var(--ink); stroke-width:2 }
.leader-line { stroke:var(--ink); stroke-width:1.5; stroke-dasharray:5 4 }
.leader-end { fill:var(--red); stroke:#fff; stroke-width:1.5 }
@media (prefers-reduced-motion: reduce) { .here { transition:none } }

.atlas-reading { margin-top:14px; padding-left:72px; font-size:14px; color:var(--ink); max-width:none }
.atlas-foot { margin-top:12px; padding-left:72px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px }
.legend-title { margin:0 0 6px; font-size:12px; color:var(--ink-2); max-width:none }
.legend { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--ink-3) }
.legend li { display:flex; align-items:center; gap:6px }
.legend li::before { content:''; width:12px; height:12px; border-radius:3px; background:var(--swatch) }
.legend li.crash { color:var(--red); font-weight:600 }
.legend li.crash::before { width:16px; height:3px; border-radius:2px; background:var(--red) }
.map-tabs { margin-top:20px; padding-left:72px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.map-tab { display:flex; flex-direction:column; gap:6px; padding:0; text-align:left; font-size:12px; color:var(--ink-3) }
.map-tab svg { display:block; width:100%; height:auto; aspect-ratio:3 / 2; border-radius:6px; background:#fff; outline:1px solid var(--line); outline-offset:-1px }
.map-tab:hover svg { outline-color:var(--ink-3) }
.map-tab[aria-selected="true"] { color:var(--ink); font-weight:600 }
.map-tab[aria-selected="true"] svg { outline:2px solid var(--blue); outline-offset:-2px }

/* 결과 요약 */
.hero .result-panel { grid-column:2; grid-row:1; padding:24px; background:var(--surface); border-radius:var(--r-panel) }
.status-tag { font-size:13px; font-weight:600; color:var(--ink-3) }
.status-tag[data-state="ok"] { color:var(--blue) }
.headline { margin-top:6px; font-size:26px; font-weight:700; line-height:1.4; letter-spacing:-.01em }
.spread-note { margin-top:10px; font-size:14px; color:var(--ink-2); max-width:none }
#results { margin-top:16px }
.verdict { font-size:13px }
.verdict-symbol { background:var(--blue) }
.metrics {
  margin-top:20px; display:block; padding:4px 20px; border-top:0;
  background:#fff; border-radius:var(--r-control);
}
.metrics > div, .metrics > div + div {
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:2px 12px;
  padding:14px 0; border-left:0; border-bottom:1px solid var(--line);
}
.metrics > div:last-child { border-bottom:0 }
.metrics dt { grid-column:1; grid-row:1; font-size:14px; color:var(--ink-2) }
.metric-value { grid-column:2; grid-row:1; margin:0; font-size:17px; font-weight:700; text-align:right; letter-spacing:0 }
.metric-detail { grid-column:1 / -1; font-size:12px; color:var(--ink-3) }
.metrics > div:first-child { display:block; padding-top:16px }
.metrics > div:first-child .metric-value { margin-top:4px; font-size:32px; text-align:left; letter-spacing:-.01em }
.cause-note { margin-top:14px; font-size:13px }

/* 차트 + 조건 */
.workspace { padding:56px 32px 0; grid-template-columns:minmax(0,1fr) 360px; gap:40px; border-top:0 }
.workspace .chart-section { grid-column:1; grid-row:1; margin-top:0; min-width:0 }
.workspace .input-panel { grid-column:2; grid-row:1; padding:20px; background:var(--surface); border-radius:var(--r-panel) }
.chart-title h2, .input-panel h2, .evidence h2, .reading h2 { font-size:20px; font-weight:700; letter-spacing:-.01em }
.chart-title p { margin-top:2px }
.segmented { padding:3px; background:var(--surface); border-radius:var(--r-control) }
.segmented button { padding:5px 12px; border-radius:6px; font-size:13px; color:var(--ink-2) }
.segmented button[aria-pressed="true"] { background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 2px rgba(28,31,36,.08) }
.cash-path { stroke:var(--blue); stroke-width:2 }
.focus-line { stroke:var(--blue) }
.focus-dot { stroke:var(--blue) }
.month-inspector input { accent-color:var(--blue) }
.chart-events button { text-decoration-color:var(--ink-3) }
.audit-details { margin-top:20px }
.panel-title { display:flex; justify-content:space-between; align-items:baseline }
.text-button { padding:0; font-size:13px; color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--ink-3); text-underline-offset:3px }
.text-button:hover:not(:disabled) { color:var(--ink); text-decoration-color:var(--ink) }
.text-button:disabled { opacity:.5 }
.input-group { margin-top:20px }
.input-group-header h3 { font-size:14px; font-weight:600; color:var(--ink); border-bottom:0; padding-bottom:0 }
.field { margin-top:14px; padding:12px 14px; background:#fff; border-radius:var(--r-control) }
.input-shell input { background:var(--surface); border:1px solid transparent; border-radius:6px; padding:4px 8px }
.input-shell input:hover:not(:disabled) { border-color:var(--line) }
.input-shell input:focus { border-color:var(--blue); background:#fff }
.dial { accent-color:var(--blue) }
.dial-wrap { position:relative }
.tick { position:absolute; top:4px; width:2px; height:14px; margin-left:-1px; border-radius:1px; background:var(--red); pointer-events:none }
.field[data-locked="true"] .tick { opacity:.4 }
.form-status { margin-top:14px }

/* 실험 결과: 먼저 깨지는 조합 + AI 비교 차트 */
.evidence {
  margin:0 auto; padding:64px 32px 0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:40px;
}
.caption { margin-top:2px; font-size:13px; color:var(--ink-3) }
.nearest { margin:16px 0 0; padding:4px 20px 4px 44px; background:var(--surface); border-radius:var(--r-panel) }
.nearest > li { padding:12px 0; border-bottom:1px solid var(--line) }
.nearest > li:last-child { border-bottom:0 }
.nearest > li::marker { font-weight:700; color:var(--ink-3) }
.changes { list-style:none; margin:0; padding:0; font-size:14px }
.near-result { margin-top:4px; font-size:13px; color:var(--red) }
.ai-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap }
.ai-metrics { flex:0 1 auto; max-width:100%; flex-wrap:wrap }
.ai-chart { margin-top:16px; min-height:260px }
.ai-chart svg { display:block }
.ai-chart text { font-family:var(--font); font-size:12px; fill:var(--ink-3) }
.ai-grid { stroke:var(--line) }
.ai-band { fill:var(--blue); fill-opacity:.1 }
.ai-line { fill:none; stroke-linejoin:round }
.ai-line.ai-active { stroke:var(--blue); stroke-width:2.5 }
.ai-line.ai-random { stroke:var(--ink-3); stroke-width:1.5; stroke-dasharray:6 4 }
.ai-line.ai-lhs { stroke:#b4bcc7; stroke-width:1.5 }
.ai-pt.ai-active { fill:var(--blue) }
.ai-pt.ai-random { fill:var(--ink-3) }
.ai-pt.ai-lhs { fill:#b4bcc7 }
.ai-chart .ai-label { font-weight:600 }
.ai-chart .ai-label.ai-active { fill:var(--blue) }
.ai-chart .ai-label.ai-lhs { fill:#8a939f }
.ai-worse-ring { fill:none; stroke:var(--red); stroke-width:2 }
.ai-worse { margin-top:8px; font-size:13px; color:var(--ink-2) }

/* 읽는 법 */
.reading { margin:0 auto; padding:64px 32px 48px }
.reading-list { margin-top:16px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 40px }
.reading-list div { display:grid; grid-template-columns:96px minmax(0,1fr); gap:12px; padding:14px 0; border-top:1px solid var(--line) }
.reading-list dt { font-size:14px; font-weight:600 }
.reading-list dd { font-size:14px; color:var(--ink-2); max-width:62ch }
.page-footer { padding:20px 32px 40px; border-top:1px solid var(--line) }
.page-footer a { color:var(--ink-2) }
.page-footer p + p, .dev-details { margin-top:8px }
.dev-details summary { font-size:13px; color:var(--ink-3); cursor:pointer }
.dev-details p { margin-top:6px; font-size:12px; color:var(--ink-3) }

@media (max-width:1080px) {
  .hero { grid-template-columns:minmax(0,1fr) }
  .hero .result-panel { grid-column:1; grid-row:auto }
  .evidence { grid-template-columns:minmax(0,1fr); gap:48px }
}
@media (max-width:960px) {
  .workspace { grid-template-columns:minmax(0,1fr) }
  .workspace .chart-section, .workspace .input-panel { grid-column:1; grid-row:auto }
  .reading-list { grid-template-columns:minmax(0,1fr) }
}
@media (max-width:640px) {
  .intro-lead { font-size:17px }
  .intro-steps { grid-template-columns:minmax(0,1fr) }
  .intro, .masthead, .plan-strip, .hero, .workspace, .evidence, .reading, .page-footer { padding-left:16px; padding-right:16px }
  .masthead { padding-top:14px; padding-bottom:14px }
  .masthead-meta { white-space:normal }
  .plan-tabs { grid-template-columns:minmax(0,1fr) }
  .plan-tab { padding:10px 12px }
  .atlas, .hero .result-panel { padding:16px }
  .atlas-body { grid-template-columns:48px minmax(0,1fr) }
  .axis-y-col { font-size:11px; padding-right:6px }
  .atlas-reading, .atlas-foot, .map-tabs { padding-left:0 }
  .atlas-foot { flex-direction:column }
  .atlas-hint { display:none }
  .atlas-title { font-size:18px }
  .headline { font-size:21px }
  .metrics { padding:4px 14px }
  .metrics > div:first-child .metric-value { font-size:27px }
  .workspace { padding-top:40px }
  .workspace .input-panel { padding:16px }
  .evidence { padding-top:48px }
  .nearest { padding-left:36px; padding-right:14px }
  .reading { padding-top:48px }
  .reading-list div { grid-template-columns:minmax(0,1fr); gap:4px }
}

/* 시작 영상은 화면을 채우고 제목은 영상 위에 둔다. */
:root { --ink-3:#636d7b }
.intro {
  position:relative; height:100vh; height:100svh; padding:0;
}
.intro h1 {
  position:absolute; z-index:1; top:clamp(12px, 4vh, 40px); left:clamp(12px, 4vw, 64px);
  padding:8px 14px; background:#fffffff2; border-radius:var(--r-control); pointer-events:none;
  font-size:clamp(26px, 4vw, 54px); font-weight:700; letter-spacing:-.045em; line-height:1.2;
}
.guide-button {
  display:inline-flex; align-items:center; min-height:44px; padding:8px 14px;
  border:1px solid var(--line); border-radius:var(--r-control); font-weight:600;
}
.guide-button { background:#fff; color:var(--ink) }
.guide-button:hover { background:var(--surface) }
#intro-video {
  display:block; width:100%; height:100%; object-fit:cover; object-position:58% center;
  background:var(--surface);
}
#plans-heading, #workbench, #risk-map { scroll-margin-top:20px }
.plan-strip { padding-top:8px }
.plan-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px }
.plan-tab { display:block; padding:8px 12px; border:1px solid transparent; font-weight:600 }
.plan-tab[aria-checked="true"] { border-color:var(--blue); background:var(--blue-soft); color:var(--blue); box-shadow:none }
.plan-tab-name { display:block }
.plan-tab-sub { display:block; margin-top:2px; font-size:13px; font-weight:400; color:var(--ink-2) }
.plan-tab[aria-checked="true"] .plan-tab-sub { color:var(--blue) }
.plan-intro { margin-top:6px; font-size:14px; color:var(--ink-2) }
.plan-intro strong { color:var(--ink) }
.plan-detail { margin-top:10px; font-size:14px; line-height:1.6; color:var(--ink) }
.plan-detail:empty { display:none }
.workspace { display:block; margin:0 auto; padding-top:20px }
.workspace .result-panel { padding:20px; background:var(--surface); border-radius:var(--r-panel); margin:0 }
.masthead-meta { font-size:12px; color:var(--ink-2); margin-bottom:4px }
.headline { font-size:clamp(21px, 3vw, 25px); line-height:1.45 }
#results { margin-top:8px }
.metrics { margin:8px 0; padding:0; background:transparent }
.metrics > div { display:block; border-bottom:0; padding:4px 0 }
.metrics dt { font-size:13px }
.metrics .metric-value { text-align:left; font-size:30px; overflow-wrap:anywhere }
.result-details .metric-value { font-size:20px }
.result-explanation { margin-top:8px; font-size:13px; color:var(--ink-2) }
.result-explanation summary, .chart-section > summary, .evidence-details > summary, .reading > summary {
  cursor:pointer; font-weight:600;
}
.result-explanation[open] > summary { margin-bottom:8px }
.scope-note, .plan-comparison { margin-top:8px; color:var(--ink-2) }
.plan-comparison { padding-left:20px }
.workspace .input-panel { margin-top:12px; padding:0; background:transparent; overflow:visible }
.input-panel > summary {
  width:fit-content; cursor:pointer; border:1px solid var(--line); padding:9px 14px;
  border-radius:var(--r-control); font-weight:600;
}
.input-panel[open] > summary { margin-bottom:12px }
.input-panel .panel-title { justify-content:flex-end }
.field { margin-top:10px; padding:10px 12px }
.input-group { margin-top:16px }
.condition-summary, .workspace .form-status { margin-top:6px; font-size:13px; color:var(--ink-2) }
.hero { display:block; padding-top:24px }
.atlas { padding:20px; background:var(--surface) }
.atlas-body { max-width:800px }
.atlas-reading { max-width:850px }
.map-tabs { max-width:700px }
.atlas-title { font-size:20px }
.chart-wrap { max-width:1240px; margin:0 auto; padding:24px 32px 0 }
.chart-section { margin:0 }
.chart-section[open] > summary { margin-bottom:16px }
.evidence { display:block; padding-top:28px }
.evidence-details { margin-top:8px }
.evidence-details .near-col, .evidence-details .ai-col { margin-top:16px }
.reading { padding-top:24px }
@media(max-width:640px) {
  .plan-tabs { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .plan-tab { padding:8px 4px; text-align:center; font-size:13px }
  .plan-tab-sub { font-size:12px }
  .chart-wrap { padding-left:16px; padding-right:16px }
  .atlas { padding:16px }
}

/* 웹 설명과 15초 사용법은 시작 영상 바로 아래 본문에 펼쳐 둔다. */
.about { max-width:1240px; margin:0 auto; padding:32px 32px 0 }
.about-title { font-size:clamp(20px, 2.4vw, 26px); font-weight:700; scroll-margin-top:20px }
.about-lead { margin-top:8px; font-size:clamp(15px, 1.6vw, 18px); color:var(--ink) }
.about-points { margin-top:8px; padding-left:20px; font-size:14px; line-height:1.6; color:var(--ink-2) }
.about-points li + li { margin-top:2px }
.about .guide-motion { margin-top:20px }
.guide-motion { display:flex; flex-direction:column; width:100%; margin:0 }
.gm-head { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; font-size:16px; font-weight:600 }
.gm-head span { font-size:12px; font-weight:400; color:var(--ink-3) }
.gm-stage {
  display:grid; grid-template-rows:minmax(0,1fr); height:clamp(260px, 42vw, 440px);
  margin-top:8px; background:var(--surface); border-radius:var(--r-panel);
}
.gm-scene {
  grid-area:1 / 1; display:grid; grid-template-columns:minmax(180px, 25%) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr); gap:clamp(12px, 2vw, 32px); align-items:center;
  padding:clamp(12px, 2vw, 28px); opacity:0; visibility:hidden; transition:opacity .5s, visibility .5s;
}
.gm-scene.on { opacity:1; visibility:visible }
.gm-step { font-size:13px; font-weight:600; color:var(--blue) }
.gm-title { margin-top:6px; font-size:clamp(20px, 2.5vw, 36px); font-weight:700; line-height:1.3 }
.gm-text { margin-top:8px; font-size:clamp(14px, 1.4vw, 20px); color:var(--ink-2) }
.gm-figure { display:block; width:100%; height:100%; min-height:0; overflow:visible }
.gm-grid { stroke:var(--line); stroke-width:1 }
.gm-line { fill:none; stroke:var(--blue); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1 }
.gm-line.gm-neg { stroke:var(--red) }
.gm-ghost { fill:none; stroke:#c9d6ee; stroke-width:2 }
.gm-zero { stroke:var(--ink-3); stroke-dasharray:4 5 }
.gm-dot circle { fill:#fff; stroke:var(--blue); stroke-width:2 }
.gm-hit { fill:var(--red); opacity:0 }
.gm-label text, .gm-label-t { font-size:13px; fill:var(--ink-2) }
.gm-safe { fill:#d9e4f7 }
.gm-short { fill:#f6cfd2 }
.gm-boundary { fill:none; stroke:var(--red); stroke-width:3; stroke-dasharray:1; stroke-dashoffset:1 }
.gm-area { font-size:18px; font-weight:600 }
.gm-area-safe { fill:var(--blue) } .gm-area-short { fill:#a8262d }
.gm-now { fill:var(--ink) }
.gm-slider { position:relative; height:4px; margin-top:16px; background:var(--line); border-radius:2px }
.gm-slider i { position:absolute; top:-6px; left:15%; width:16px; height:16px; background:#fff; border:3px solid var(--blue); border-radius:50% }
.gm-scene.on .gm-line { animation:gm-draw 2.6s .3s forwards }
.gm-scene.on .gm-line.gm-neg { animation-delay:2.4s; animation-duration:1.2s }
.gm-scene.on .gm-hit { animation:gm-show .3s 2.3s forwards }
.gm-scene.on .gm-boundary { animation:gm-draw 2s .4s forwards }
.gm-scene.on .gm-slider i { animation:gm-slide 2s .4s forwards }
.guide-motion.paused .gm-scene * { animation-play-state:paused }
@keyframes gm-draw { to { stroke-dashoffset:0 } }
@keyframes gm-show { to { opacity:1 } }
@keyframes gm-slide { to { left:75% } }
.gm-controls { display:flex; align-items:center; gap:12px; margin-top:12px }
.gm-controls input { flex:1; min-width:0; accent-color:var(--blue) }
.gm-btn { padding:6px 14px; border-radius:var(--r-control); background:var(--ink); color:#fff; font-size:13px }
.gm-btn-sub { background:var(--surface); color:var(--ink) }
.gm-time { font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap }
.gm-note { margin-top:8px; font-size:12px; color:var(--ink-3) }
@media (prefers-reduced-motion: reduce) {
  .gm-scene { transition:none }
  .gm-scene.on .gm-line, .gm-scene.on .gm-boundary, .gm-scene.on .gm-hit, .gm-scene.on .gm-slider i { animation-duration:.01s; animation-delay:0s }
}
@media (max-width:640px) {
  .about { padding:24px 16px 0 }
  .gm-stage { height:auto; min-height:320px }
  .gm-scene { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; align-content:center; gap:24px }
  .gm-figure { height:auto; aspect-ratio:460 / 250 }
  .gm-controls { flex-wrap:wrap; gap:8px }
  .gm-controls input { flex-basis:100%; order:3 }
}