/* The only design-token definition. Component rules reference these values. */
:root {
  color-scheme: light;
  --color-page: #F9F8F5;
  --color-card: #FFFEFC;
  --color-scene: #F7F5F0;
  --color-title: #172B51;
  --color-body: #30343B;
  --color-muted: #788398;
  --color-accent: #3263E8;
  --color-border: #E9E8E4;
  --radius-card: 24px;
  --radius-scene: 16px;
  --radius-control: 12px;
  --space-card: 24px;
  --space-section: 28px;
  --space-page: 24px;
  --space-scene: 18px;
  --space-aux: 28px;
  --space-expanded: 12px;
  --font-ip: 1rem;
  --font-scene: 1.1875rem;
  --font-question: 2rem;
  --font-question-small: 1.875rem;
  --font-question-overflow: 1.78125rem;
  --font-question-large-min: 42px;
  --font-question-large-cap: 48px;
  --font-aux: .875rem;
  --font-meta: .8125rem;
  --weight-ip: 600;
  --weight-body: 400;
  --weight-question: 650;
  --weight-control: 500;
  --line-ip: 1.4;
  --line-scene: 1.6;
  --line-question: 1.4;
  --line-control: 1.5;
  --line-action: 1.4;
  --icon-action: 22px;
  --icon-small: 16px;
  --icon-stroke: 1.8px;
  --touch-min: 44px;
  --transition-color: 120ms;
  --space-feedback: 44px;
  --icon-follow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 18l-4 3V6a3 3 0 013-3h12a3 3 0 013 3v9a3 3 0 01-3 3H7zM7 8h10M7 12h6' fill='none' stroke='currentColor' stroke-width='1.8' vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-angle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 18h6M10 21h4M8 14a7 7 0 118 0c-1 1-1 2-1 3H9c0-1 0-2-1-3z' fill='none' stroke='currentColor' stroke-width='1.8' vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.8' vector-effect='non-scaling-stroke' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  margin: 0; position: fixed; inset: 0; width: 100%; height: var(--app-height, 100dvh);
  overflow: hidden; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--color-page); color: var(--color-title); overscroll-behavior: none;
}
button, select { font: inherit; }
button {
  cursor: pointer; touch-action: manipulation; min-width: var(--touch-min); min-height: var(--touch-min);
  padding: 8px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control);
  background: transparent; color: inherit;
}
button:disabled { cursor: default; opacity: .5; }
button:focus-visible, select:focus-visible, .card-viewport:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.quiet { border: 0; color: var(--color-muted); font-size: var(--font-aux); font-weight: var(--weight-control); line-height: var(--line-control); }
.topbar {
  width: 100%; max-width: 640px; margin: 0 auto; flex-shrink: 0; display: flex;
  align-items: center; justify-content: space-between; gap: 10px; min-height: 52px;
  padding: 4px var(--space-page);
}
.ip-name { font-size: var(--font-ip); font-weight: var(--weight-ip); line-height: var(--line-ip); color: var(--color-title); }
.top-actions { display: flex; align-items: center; }
.top-actions .quiet { padding: 8px; }
#settings-open { font-size: 1.35rem; line-height: 1; }
.stage { width: 100%; max-width: 640px; margin: 0 auto; flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 var(--space-page); }
.card-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y pinch-zoom; }
.card-track { position: relative; width: 100%; height: 100%; will-change: transform; }
.question-card { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; overflow-wrap: anywhere; touch-action: pan-y pinch-zoom; }
.card-track > .previous { left: calc(-100% - 12px); right: auto; }
.card-track > .next { left: calc(100% + 12px); right: auto; }
.card-content { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom; scrollbar-width: thin; padding-bottom: 18px; }
#question-detail, .adjacent .card-content > div {
  padding: 0; background: transparent; border: 0;
  border-radius: 0; box-shadow: none;
}
.no-scene h1 { margin-top: var(--short-question-gap, 0px); }
.no-scene .card-meta { margin-bottom: 0; }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: var(--touch-min); margin-bottom: var(--space-card); font-size: var(--font-meta); font-weight: var(--weight-body); line-height: var(--line-control); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.copy-button { display: flex; align-items: center; gap: 6px; border: 0; padding: 8px 0 8px 10px; font-size: var(--font-meta); font-weight: var(--weight-body); line-height: var(--line-control); color: var(--color-muted); }
.copy-icon, .action-icon { display: flex; align-items: center; justify-content: center; }
svg { fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
svg path, svg circle, svg rect { vector-effect: non-scaling-stroke; }
.copy-icon svg { width: var(--icon-small); height: var(--icon-small); }
.scenario-block { display: flex; flex-direction: column; margin-bottom: var(--space-section); padding: var(--space-scene); background: var(--color-scene); border-radius: var(--radius-scene); }
.scenario { margin: 0; font-size: var(--font-scene); font-weight: var(--weight-body); line-height: var(--line-scene); color: var(--color-body); white-space: pre-wrap; }
.scenario-scroll { overscroll-behavior: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom; }
.scenario-cue { margin: 10px 0 0; color: var(--color-muted); font-size: var(--font-meta); font-weight: var(--weight-body); line-height: var(--line-control); }
.scene-scroll .scenario-scroll { max-height: var(--scene-height); overflow: auto; }
.scene-scroll .card-content { overflow: hidden; }
.scenario-cue[data-mode=jump] { order: -1; margin: 0 0 8px; }
.scene-jump { font-size: var(--font-meta); color: var(--color-accent); border: 0; padding: 6px 0; }
h1 { margin: 0; font-size: var(--question-size, var(--font-question)); font-weight: var(--weight-question); line-height: var(--line-question); color: var(--color-title); white-space: pre-wrap; overflow-wrap: anywhere; }
#follow-section, #angles-section, .neighbour-angles { margin-top: var(--space-aux); }
#follow-section:not([hidden]) + #angles-section { margin-top: 0; }
.angles-toggle { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: var(--radius-control); background: transparent; padding: 10px 0; text-align: left; font-size: var(--font-aux); font-weight: var(--weight-control); line-height: var(--line-control); color: var(--color-muted); }
.angles-toggle::before { content: ''; width: var(--icon-small); height: var(--icon-small); flex: none; background: currentColor; mask: var(--aux-icon) center/contain no-repeat; -webkit-mask: var(--aux-icon) center/contain no-repeat; }
#follow-toggle, .adjacent section:first-of-type .angles-toggle { --aux-icon: var(--icon-follow); }
#angles-toggle, .adjacent section:last-of-type .angles-toggle { --aux-icon: var(--icon-angle); }
.angles-toggle::after { content: ''; width: var(--icon-small); height: var(--icon-small); margin-left: auto; flex: none; background: currentColor; mask: var(--icon-chevron) center/contain no-repeat; -webkit-mask: var(--icon-chevron) center/contain no-repeat; }
.angles-toggle[aria-expanded=true]::after { transform: rotate(180deg); }
#follow-list, #angles-list { padding: var(--space-expanded); margin-top: var(--space-expanded); background: var(--color-scene); border-radius: var(--radius-control); }
#follow-list p, .angle-item p { margin: 0; font-size: var(--font-ip); font-weight: var(--weight-body); line-height: 1.7; color: var(--color-body); white-space: pre-wrap; overflow-wrap: anywhere; }
#follow-list p + p { margin-top: var(--space-expanded); }
.angle-item { margin-bottom: 18px; }
.angle-item:last-child { margin-bottom: 0; }
.angle-item h2 { font-size: var(--font-ip); font-weight: var(--weight-ip); line-height: var(--line-control); color: var(--color-title); margin: 0 0 var(--space-expanded); }
.operation-dock { width: 100%; max-width: 640px; margin: 0 auto; flex-shrink: 0; position: relative; background: var(--color-card); padding: var(--space-feedback) var(--space-page) 0; }
.state-feedback { position: absolute; top: 0; left: var(--space-page); right: var(--space-page); min-height: 24px; display: flex; gap: 8px; align-items: center; justify-content: center; background: var(--color-card); color: var(--color-muted); font-size: var(--font-meta); line-height: var(--line-control); }
.state-feedback:has(#state-message:empty):has(#state-retry[hidden]) { visibility: hidden; }
.state-feedback button { font-size: inherit; }
.actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.actions button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 66px; border: 0; background: transparent; color: var(--color-muted); font-size: var(--font-aux); font-weight: var(--weight-control); line-height: var(--line-action); padding: 8px 4px; transition: color var(--transition-color); }
.actions button[aria-pressed=true] { color: var(--color-accent); }
.action-icon svg { width: var(--icon-action); height: var(--icon-action); }
.action-icon .shot-check { visibility: hidden; }
.actions button[aria-pressed=true] .shot-check { visibility: visible; }
.screen-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 4px 16px; font-size: var(--font-meta); font-weight: var(--weight-body); line-height: var(--line-control); color: var(--color-muted); }
.screen-footer > * { min-width: 0; }
.screen-footer > :last-child { text-align: right; }
.progress { font-variant-numeric: tabular-nums; }
.persistence-note { margin: 0 0 10px; font-size: var(--font-meta); line-height: var(--line-control); color: var(--color-muted); flex-shrink: 0; }
.warning { padding: 12px; border: 1px solid var(--color-border); background: var(--color-scene); color: var(--color-body); border-radius: var(--radius-control); font-size: var(--font-aux); line-height: var(--line-control); max-height: 25%; overflow: auto; flex-shrink: 0; }
.muted, .prototype-note, .export-section p { color: var(--color-muted); font-size: var(--font-aux); line-height: 1.7; }
dialog { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-card); width: min(92vw,480px); max-height: calc(var(--app-height,100dvh) - 40px); overflow: auto; overscroll-behavior: contain; color: var(--color-title); background: var(--color-card); }
dialog::backdrop { background: var(--color-title); opacity: .25; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 20px; }
h2 { font-size: 1.25rem; margin: 0; } h3 { font-size: var(--font-ip); }
label { display: block; font-size: var(--font-aux); font-weight: var(--weight-ip); margin: 20px 0 8px; }
select { width: 100%; min-height: 48px; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-card); color: var(--color-title); }
.export-section { border-top: 1px solid var(--color-border); margin-top: 22px; padding-top: 10px; }
.export-buttons { display: flex; gap: 10px; } .export-buttons button { flex: 1; }
.record-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.record-tabs button { font-size: var(--font-meta); padding: 8px 4px; }
.record-tabs button[aria-selected=true] { color: var(--color-accent); border-color: var(--color-accent); }
#records-status { font-size: var(--font-aux); line-height: 1.7; color: var(--color-muted); }
#records-list { list-style: none; margin: 12px 0; padding: 0; } #records-list li { margin-bottom: 10px; }
.record-question { width: 100%; text-align: left; padding: 14px; font-size: var(--font-ip); line-height: 1.7; overflow-wrap: anywhere; }
#toast { position: fixed; left: 50%; bottom: calc(120px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--color-title); color: var(--color-card); padding: 10px 16px; border-radius: var(--radius-control); max-width: 90vw; min-width: 120px; text-align: center; font-size: var(--font-aux); opacity: 0; pointer-events: none; transition: opacity var(--transition-color); }
#toast.visible { opacity: 1; } [hidden] { display: none!important; }
@media(max-height:640px) { .screen-footer { padding-top: 8px; padding-bottom: 10px; } }
@media(prefers-reduced-motion:reduce) { * { transition: none!important; } }