/* 开始备考视图 · 舞台（t-20261011-np4t，人类选定的原型 C）
   中间一张「开始备考」，两侧两份材料（知识地图、模拟卷）斜放在桌面两边、往后退一点；
   指针移上去那份转正、往前，主卡往后让，旁边出现放大的预览；移开复位。动效只动 transform / opacity，主要在 300ms 内；
   减少动态（html.rm）时 critical 里的 .rm * 关掉全部过渡，各状态直接落到终态。
   颜色只用 kaopy.css 的 token；纸面颜色是本视图自己的变量。 */

.start-main {
  --stage-label: 72px;
  --main-w: 480px; --side-w: 324px; --side-h: 440px; --off: 416px; --stage-h: 520px;
  --paper: #FFFFFF; --paper-ink: #1C1E21; --paper-muted: #5A6068; --paper-rule: #CFD2CC;
  --stage-shade: 22, 25, 29;
  --stage-lift: 0 1px 2px rgba(22, 25, 29, .05), 0 18px 40px -18px rgba(22, 25, 29, .22);
  --stage-lift-hi: 0 2px 4px rgba(22, 25, 29, .05), 0 34px 70px -24px rgba(22, 25, 29, .30);
  --stage-lift-main: 0 1px 2px rgba(22, 25, 29, .06), 0 10px 24px -12px rgba(22, 25, 29, .16), 0 40px 80px -28px rgba(22, 25, 29, .30);
  --stage-ease: cubic-bezier(.2, .8, .2, 1);
  --stage-t: 280ms;
  --font-paper: 'Times New Roman', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', SimSun, serif;
}
:root[data-lang="en"] .start-main { --stage-label: 100px; }
[data-theme="dark"] .start-main {
  --paper: #F4F2EC; --paper-rule: #CFCBC0;
  --stage-shade: 0, 0, 0;
  --stage-lift: 0 0 0 1px var(--border), 0 18px 40px -18px rgba(0, 0, 0, .6);
  --stage-lift-hi: 0 0 0 1px var(--border-strong), 0 34px 70px -24px rgba(0, 0, 0, .7);
  --stage-lift-main: 0 0 0 1px var(--border-strong), 0 12px 28px -12px rgba(0, 0, 0, .5), 0 44px 90px -28px rgba(0, 0, 0, .75);
}

.start-main { position: relative; }
.start-main .start-back { height: 0; margin-bottom: 0; overflow: visible; }
.start-view {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: calc(100svh - var(--topbar-h) - 8px);
  padding: 8px 0 64px;
  transition: opacity 200ms ease, transform 240ms var(--stage-ease);
}
.start-view.is-away { opacity: 0; transform: scale(.985); pointer-events: none; }

/* ---------- 舞台 ---------- */
.stage { position: relative; width: 100%; max-width: 1200px; height: var(--stage-h); }
.stage-slot { position: absolute; top: 50%; perspective: 1500px; }
.stage-slot--main { z-index: 3; left: calc(50% - var(--main-w) / 2); width: var(--main-w); transform: translateY(-50%); perspective-origin: 50% 45%; }
.stage-slot--map, .stage-slot--paper { z-index: 1; width: var(--side-w); height: var(--side-h); margin-top: calc(var(--side-h) / -2); }
.stage-slot--map { left: calc(50% - var(--off) - var(--side-w) / 2); perspective-origin: calc(50% + var(--off)) 45%; }
.stage-slot--paper { left: calc(50% + var(--off) - var(--side-w) / 2); perspective-origin: calc(50% - var(--off)) 45%; }
.stage[data-focus="map"] .stage-slot--map, .stage[data-focus="paper"] .stage-slot--paper { z-index: 4; }

.stage-card { position: relative; transition: transform var(--stage-t) var(--stage-ease); will-change: transform; }
.stage-face { position: relative; height: 100%; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--stage-lift); }
/* 光：退在后面的卡，靠里的一边暗一点；转正后光照均匀 */
.stage-face::after { content: ''; position: absolute; inset: -1px; z-index: 6; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--stage-t) ease; }
/* 抬起时的影子：只动 opacity */
.stage-card::before { content: ''; position: absolute; inset: 6% 5% 0; z-index: -1; border-radius: 24px; box-shadow: 0 40px 80px -20px rgba(var(--stage-shade), .28); opacity: 0; transition: opacity var(--stage-t) ease; }

.stage-card--side { height: 100%; }
#stageMapCard { transform: translateZ(-130px) rotateY(17deg); }
#stagePaperCard { transform: translateZ(-130px) rotateY(-17deg); }
#stageMapCard .stage-face::after { opacity: 1; background: linear-gradient(90deg, rgba(var(--stage-shade), 0) 35%, rgba(var(--stage-shade), .07)); }
#stagePaperCard .stage-face::after { opacity: 1; background: linear-gradient(270deg, rgba(var(--stage-shade), 0) 35%, rgba(var(--stage-shade), .07)); }

.stage[data-focus="map"] #stageMapCard { transform: translateX(58px) translateZ(36px) rotateY(0deg); }
.stage[data-focus="paper"] #stagePaperCard { transform: translateX(-58px) translateZ(36px) rotateY(0deg); }
.stage[data-focus="map"] #stageMapCard .stage-face::after, .stage[data-focus="paper"] #stagePaperCard .stage-face::after { opacity: 0; }
.stage[data-focus="map"] #stageMapCard::before, .stage[data-focus="paper"] #stagePaperCard::before { opacity: 1; }
.stage[data-focus="map"] #stagePaperCard { transform: translateZ(-170px) rotateY(-22deg); }
.stage[data-focus="paper"] #stageMapCard { transform: translateZ(-170px) rotateY(22deg); }

/* 主卡让位：往后退、朝外转一点，罩一层很淡的影 */
.stage-card--main { transform: translateX(0) translateZ(0) rotateY(0deg) scale(1.04); will-change: auto; }
.stage-card--main .stage-face { padding: 34px 38px 30px; box-shadow: var(--stage-lift-main); }
.stage-card--main .stage-face::after { background: rgba(var(--stage-shade), .035); }
.stage[data-focus="map"] .stage-card--main { transform: translateX(44px) translateZ(-80px) rotateY(-9deg) scale(1); }
.stage[data-focus="paper"] .stage-card--main { transform: translateX(-44px) translateZ(-80px) rotateY(9deg) scale(1); }
.stage[data-focus="map"] .stage-card--main .stage-face::after, .stage[data-focus="paper"] .stage-card--main .stage-face::after { opacity: 1; }

/* ---------- 主卡：开始备考（字段与提交不变，标签在左） ---------- */
.stage-card--main .ask-title { font-size: 30px; font-weight: var(--fw-strong); line-height: 1.2; letter-spacing: -.01em; text-align: center; }
.stage-card--main .ask-form { display: flex; flex-direction: column; gap: 0; margin-top: 24px; }
.stage-card--main .q-card { border: 0; background: none; }
.stage-card--main .q-col { min-width: 0; padding: 0; }
.stage-card--main .ask-form .q-row { grid-template-columns: var(--stage-label) minmax(0, 1fr); align-items: start; min-height: 0; padding: 7px 0; gap: 4px 12px; border: 0; }
.stage-card--main .ask-form .q-row > label { padding-top: 10px; color: var(--muted); font-size: var(--fs-ui); font-weight: var(--fw-regular); line-height: 20px; }
.stage-card--main .input { height: 40px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: var(--fs-ui); }
.stage-card--main .input::placeholder { opacity: .75; }
.stage-card--main .input:hover:not(:focus) { border-color: var(--border-strong); }
.stage-card--main .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.stage-card--main .field.has-error .input { border-color: var(--danger); }
.stage-card--main .field-error { margin-top: 1px; }
.stage-card--main .time-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.stage-card--main #examDays { width: 84px; font-variant-numeric: tabular-nums; }
.stage-card--main #examDate { width: 156px; }
.stage-card--main .days-preview { flex-basis: 100%; color: var(--faint); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.stage-card--main .days-preview:empty { display: none; }
.stage-card--main .days-preview strong { color: var(--muted); font-weight: var(--fw-strong); }
.stage-card--main .seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface-subtle); }
.stage-card--main .seg button { height: 34px; padding: 0 13px; border: 0; border-radius: 8px; background: none; color: var(--muted); font: inherit; font-size: var(--fs-ui); white-space: nowrap; cursor: pointer; transition: background-color 140ms ease, color 140ms ease; }
.stage-card--main .seg button.is-on { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(var(--stage-shade), .10); }
.stage-card--main .with-unit { display: flex; align-items: center; gap: 8px; }
.stage-card--main .with-unit .input { width: 92px; font-variant-numeric: tabular-nums; }
.stage-card--main .with-unit .caption { color: var(--muted); font-size: var(--fs-ui); }
.stage-card--main .basis-chips { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 2px; }
.stage-card--main .chip { height: 36px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-ui); white-space: nowrap; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
.stage-card--main .chip:hover { border-color: var(--border-strong); }
.stage-card--main .chip.is-selected { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--accent-soft); color: var(--accent-strong); }
.stage-card--main .chip:focus-visible, .stage-card--main .seg button:focus-visible { border-radius: var(--r-pill); }
.stage-card--main .choice-other { margin-top: 8px; }
.stage-card--main .ask-actions { display: flex; margin-top: 16px; }
.stage-card--main .ask-actions .btn { width: 100%; height: 46px; font-size: 15px; }

/* ---------- 两侧卡：共用 ---------- */
/* 景深：镜头对焦在主卡，两侧卡的插图（地图、卷子）轻微虚化、降饱和；标题和说明保持清晰。转正的那张与转正同步变清晰 */
.stage-card--side .mapwin, .stage-card--side .fan { filter: blur(1.2px) saturate(.72); opacity: .78; transition: filter var(--stage-t) ease, opacity var(--stage-t) ease; }
.stage[data-focus="map"] #stageMapCard .mapwin, .stage[data-focus="paper"] #stagePaperCard .fan { filter: none; opacity: 1; }
.stage-card--side .stage-face { display: flex; flex-direction: column; padding: 22px 22px 16px; overflow: hidden; }
.stage-hit { position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; border-radius: 18px; background: none; cursor: pointer; }
.stage-hit:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.stage-head { position: relative; pointer-events: none; }
.stage-title { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: var(--fw-strong); line-height: 1.3; }
.stage-go { width: 18px; height: 18px; fill: none; stroke: var(--accent-strong); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: translateX(-4px); transition: opacity 200ms ease, transform 200ms var(--stage-ease); }
.stage[data-focus="map"] #stageMapCard .stage-go, .stage[data-focus="paper"] #stagePaperCard .stage-go { opacity: 1; transform: none; }
.stage-sub { margin-top: 4px; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---------- 知识地图卡：产品里地图页的一角（原型 C 的画法）。整张图从根节点往右展开 根 → 单元 → 小节 → 知识点，
   镜头取根节点附近一块，分支和连线由卡片边缘裁出；转正后推近到单元与小节两列 ---------- */
.mapwin { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 16px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--canvas); pointer-events: none; }
.mapwin-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 32px; padding: 0 12px; border-bottom: 1px solid var(--border); background: var(--surface); font-size: 11.5px; }
.mapwin-name { flex: none; font-weight: var(--fw-strong); }
.mapwin-count { min-width: 0; overflow: hidden; color: var(--faint); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.mapwin-view { position: relative; flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent 99%); mask-image: linear-gradient(90deg, #000 78%, transparent 99%); }
.skm-cam {
  --s: .5; --tx: 0px; --ty: 0px; --s-hi: .66; --tx-hi: 0px; --ty-hi: 0px;
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  transform: translate(var(--tx), var(--ty)) scale(var(--s));
  transition: transform 360ms var(--stage-ease);
}
.stage[data-focus="map"] .skm-cam { transform: translate(var(--tx-hi), var(--ty-hi)) scale(var(--s-hi)); }
.skm-grid.skm-grid--cam { grid-template-columns: 108px 176px 206px 340px; column-gap: 40px; row-gap: 9px; padding: 24px 28px; font-size: 14px; }
.skm-grid--cam .skm-unit { grid-column: 2; padding: 8px 12px; }
.skm-grid--cam .skm-sub { grid-column: 3; gap: 7px; padding: 6px 8px 6px 10px; font-size: 14px; }
.skm-grid--cam .skm-sub::before { content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.skm-grid--cam .skm-sub > span { flex: 1; min-width: 0; }
.skm-grid--cam .skm-pts { grid-column: 4; gap: 6px; padding: 4px 0 4px 10px; }
.skm-grid--cam .skm-chip { padding: 1px 10px; font-size: 12px; white-space: nowrap; }
.skm-src { display: inline-block; width: 10px; height: 12px; margin-left: 5px; vertical-align: -1px; fill: var(--surface); stroke: var(--faint); stroke-width: 1.2; stroke-linejoin: round; }
.skm-root { position: relative; grid-column: 1; align-self: center; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: var(--surface); font-weight: var(--fw-strong); text-align: center; }
.skm-wires path { fill: none; stroke-width: 1.5; stroke-opacity: .55; }
.skm-no { margin-right: 6px; color: var(--muted); font-variant-numeric: tabular-nums; font-weight: var(--fw-regular); }
.skm-badge { flex: none; padding: 0 7px; border: 1px solid color-mix(in srgb, var(--br) 40%, var(--surface)); border-radius: var(--r-pill); background: color-mix(in srgb, var(--br) 14%, var(--surface)); font-size: 12px; font-style: normal; font-variant-numeric: tabular-nums; }

/* ---------- 模拟卷卡：三份真卷扇形叠放（原型 C 的比例：卷宽约为扇区的 2/3，两侧各错开 1/5、转 8.5°，转角出卡边由卡面裁掉）；按扇区宽度换算，各宽度比例不变 ---------- */
.fan { position: relative; z-index: 2; flex: 1; min-height: 0; margin-top: 12px; container-type: inline-size; pointer-events: none; }
.sheet {
  --sw: 66cqw; --rot: 0deg; --dx: 0cqw; --dy: 0px; --k: .3;
  position: absolute; top: 14px; left: calc(50% - var(--sw) / 2); width: var(--sw); aspect-ratio: 1 / 1.414; overflow: hidden;
  border-radius: 3px; background: var(--paper);
  box-shadow: 0 0 0 1px rgba(var(--stage-shade), .10), 0 10px 24px -12px rgba(var(--stage-shade), .35);
  transform-origin: 50% 100%; transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
  transition: transform 240ms var(--stage-ease), box-shadow 240ms ease;
  pointer-events: auto; cursor: pointer;
}
.sheet[data-i="0"] { z-index: 3; }
.sheet[data-i="1"] { z-index: 1; --dx: -20cqw; --dy: 8px; --rot: -8.5deg; }
.sheet[data-i="2"] { z-index: 2; --dx: 20cqw; --dy: 8px; --rot: 8.5deg; }
.fan.has-hot .sheet[data-i="1"] { --dx: -23.6cqw; --rot: -10deg; }
.fan.has-hot .sheet[data-i="2"] { --dx: 23.6cqw; --rot: 10deg; }
.fan .sheet.is-hot { z-index: 5; --dy: -10px; }
.fan .sheet.is-hot[data-i="1"] { --dx: -18.2cqw; --rot: -4deg; }
.fan .sheet.is-hot[data-i="2"] { --dx: 18.2cqw; --rot: 4deg; }
.sheet .paper { position: absolute; top: 0; left: 0; width: 520px; transform-origin: 0 0; transform: scale(var(--k)); pointer-events: none; }

/* ---------- 卷面（缩略、放大、窄屏整页共用一份排版） ---------- */
.paper { padding: 40px 44px 44px; background: var(--paper); color: var(--paper-ink); font-family: var(--font-paper); font-size: 13.5px; line-height: 1.75; text-align: left; }
.p-title { font-size: 19px; font-weight: 700; line-height: 1.45; text-align: center; letter-spacing: .02em; }
.p-meta { margin-top: 6px; color: var(--paper-muted); font-size: 12.5px; text-align: center; }
.p-meta span + span::before { content: ''; display: inline-block; width: 18px; }
.p-ident { display: flex; justify-content: center; gap: 22px; margin-top: 14px; color: var(--paper-muted); font-size: 12.5px; }
.p-ident i { display: inline-block; width: 72px; margin-left: 4px; border-bottom: 1px solid var(--paper-rule); }
.p-score { width: 100%; margin: 14px 0 18px; border-collapse: collapse; font-size: 12px; text-align: center; }
.p-score td, .p-score th { height: 24px; border: 1px solid var(--paper-rule); font-weight: 400; }
.p-score th { color: var(--paper-muted); }
.p-sec { margin-top: 16px; }
.p-sec-t { font-size: 14.5px; font-weight: 700; }
.p-sec-i { margin-top: 2px; color: var(--paper-muted); font-size: 12.5px; line-height: 1.65; }
.p-q { margin-top: 10px; }
.p-q-no { font-weight: 700; }
.p-q-pt { color: var(--paper-muted); }
.paper p { margin: 0; }
.p-q p + p { margin-top: 4px; }
.p-opts { display: grid; gap: 1px; margin-top: 4px; padding-left: 1.5em; }
.p-opts.is-short { grid-template-columns: repeat(4, max-content); column-gap: 28px; }
.p-fig { margin: 8px 0 2px; }
.p-fig svg { display: block; width: 100%; height: auto; }
.p-fig figcaption { color: var(--paper-muted); font-size: 12px; text-align: center; }
.paper .katex { font-size: 1.05em; }
.p-math.is-display { display: block; margin: 4px 0; text-align: center; }
.p-math.is-display .katex { font-size: 1.12em; }

/* ---------- 放大预览：卷面在主卡左半边，地图在主卡右半边。
   指针只有在卡片、预览和两者之间的走廊里时保持打开（js/entry-start-stage.js 的 inZone），出了这片区域立即收起；
   里层 .stage-preview-box 是看得见的纸面，本身可滚动（滚轮、触控板、拖动、方向键），点一下进入 ---------- */
.stage-preview {
  --pv-h: min(620px, calc(100svh - 120px));
  position: absolute; top: 50%; z-index: 6;
  height: var(--pv-h); margin-top: calc(var(--pv-h) / -2);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease, transform 260ms var(--stage-ease);
  cursor: pointer;
}
.stage-preview.is-on { opacity: 1; transform: none; pointer-events: auto; }
.stage-preview.is-dragging { cursor: grabbing; }
.stage-preview-box { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 6px; }
.stage-preview--paper {
  right: calc(50% - 116px); width: 470px;
  transform: translateX(16px) scale(.97); transform-origin: 100% 50%;
}
.stage-preview--paper .stage-preview-box { background: var(--paper); box-shadow: 0 0 0 1px rgba(var(--stage-shade), .10), 0 40px 90px -30px rgba(var(--stage-shade), .45); }
.stage-preview--map {
  left: calc(50% - 116px); width: min(680px, calc(50% + 100px));
  transform: translateX(-16px) scale(.97); transform-origin: 0 50%;
}
.stage-preview--map .stage-preview-box { border: 1px solid var(--border); border-radius: 14px; background: var(--canvas); box-shadow: var(--stage-lift-hi); }
.stage-preview-scroll { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; outline: none; }
.stage-preview--paper .paper { display: none; }
.stage-preview--paper .paper.is-on { display: block; padding-bottom: 96px; }
.stage-preview-box::after { content: ''; position: absolute; inset: auto 0 0; z-index: 2; height: 84px; pointer-events: none; }
.stage-preview--paper .stage-preview-box::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--paper) 0%, transparent), var(--paper) 62%); }
.stage-preview--map .stage-preview-box::after { background: linear-gradient(to bottom, color-mix(in srgb, var(--canvas) 0%, transparent), var(--canvas) 62%); }
.stage-preview-foot { position: absolute; inset: auto 0 14px; z-index: 3; display: flex; justify-content: center; gap: 10px; color: var(--muted); font-family: var(--font-sans); font-size: var(--fs-caption); pointer-events: none; }
.stage-preview--paper .stage-preview-foot { color: var(--paper-muted); }
.stage-preview-foot b { color: var(--accent-strong); font-weight: var(--fw-strong); }
.stage-preview--paper .stage-preview-foot b { color: #174BB8; }
.stage-preview-head { flex: none; padding: 16px 22px 12px; border-bottom: 1px solid var(--border); background: var(--surface); }
.stage-preview-title { font-size: 15px; font-weight: var(--fw-strong); line-height: 1.35; }
.stage-preview-meta { margin-top: 2px; color: var(--faint); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }

/* 地图：单元、小节、知识点三列，分支颜色与连线和产品地图页一致 */
.skm-grid {
  position: relative; display: grid; grid-template-columns: 158px 180px minmax(0, 1fr); column-gap: 30px; row-gap: 8px; align-items: center;
  padding: 18px 22px 72px; color: var(--ink); font-size: 13px; line-height: 1.35;
}
.skm-wires { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.skm-unit { --br: var(--map-branch-1); position: relative; grid-column: 1; padding: 7px 10px; border: 2px solid var(--br); border-radius: 8px; background: color-mix(in srgb, var(--br) 10%, var(--surface)); font-weight: var(--fw-strong); }
.skm-unit .skm-no { color: inherit; opacity: .6; }
.skm-sub { --br: var(--map-branch-1); position: relative; grid-column: 2; display: flex; align-items: center; padding: 5px 8px 5px 9px; border: 1px solid var(--border-strong); border-left: 4px solid var(--br); border-radius: 8px; background: var(--surface); font-size: 12.5px; }
.skm-pts { --br: var(--map-branch-1); position: relative; grid-column: 3; min-width: 0; display: flex; flex-wrap: wrap; gap: 5px; padding: 3px 0 3px 9px; border-left: 2px solid var(--br); }
.skm-chip { padding: 1px 9px; border: 1px solid color-mix(in srgb, var(--br) 35%, var(--border)); border-radius: var(--r-pill); background: var(--surface); color: var(--muted); font-size: 11.5px; line-height: 1.5; min-width: 0; max-width: 100%; }

.skm-tip {
  position: absolute; top: 0; left: 0; z-index: 4; display: grid; gap: 1px; max-width: 320px;
  padding: 7px 11px 8px; border-radius: 8px; background: var(--ink); color: var(--surface);
  box-shadow: 0 8px 20px -8px rgba(var(--stage-shade), .45);
  font-size: var(--fs-caption); line-height: 1.5; pointer-events: none;
}
.skm-tip[hidden] { display: none; }
.skm-tip b { color: color-mix(in srgb, var(--surface) 62%, var(--ink)); font-weight: var(--fw-regular); }
.stage-preview--map .skm-chip[data-src]:hover { border-color: var(--br); color: var(--ink); }

/* ---------- 或者，直接问一个问题 ---------- */
.start-ask { display: flex; flex-direction: column; align-items: center; width: 100%; min-height: 40px; margin-top: 28px; }
.start-ask-toggle { padding: 6px 10px; border: 0; border-radius: var(--r-sm); background: none; color: var(--faint); font: inherit; font-size: 13px; opacity: .9; cursor: pointer; transition: color 140ms ease, opacity 140ms ease; }
.start-ask-toggle:hover { color: var(--ink); opacity: 1; }
.start-ask-toggle[hidden], .start-ask-line[hidden] { display: none; }
.start-ask-line { width: min(460px, 100%); animation: start-rise 200ms var(--stage-ease); }
.start-ask-line .input { width: 100%; height: 42px; padding: 0 18px; border-color: var(--border); border-radius: var(--r-pill); font-size: var(--fs-ui); }
.start-ask-line .input:hover:not(:focus) { border-color: var(--border-strong); }
.start-ask-status { margin-top: 6px; color: var(--faint); font-size: var(--fs-caption); text-align: center; }
.start-ask-status:empty { display: none; }
@keyframes start-rise { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- 进入后的界面：课程名、资料、开始生成 ---------- */
.tile-panel { position: fixed; inset: var(--topbar-h) 0 0; z-index: 30; display: grid; place-items: center; padding: 16px 20px 64px; overflow-y: auto; overscroll-behavior: contain; background: var(--canvas); }
.tile-panel[hidden] { display: none; }
.tile-panel[data-kind="map"] .for-paper, .tile-panel[data-kind="paper"] .for-map,
.stage-sheetview[data-kind="map"] .for-paper, .stage-sheetview[data-kind="paper"] .for-map { display: none; }
.tile-panel-card { position: relative; width: min(500px, 100%); padding: 32px 34px 26px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--stage-lift-hi); animation: panel-in 280ms var(--stage-ease) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.panel-close { position: absolute; top: 14px; right: 14px; }
.panel-title { padding-right: 40px; font-size: 24px; font-weight: var(--fw-strong); line-height: 1.25; outline: none; }
.panel-form { display: grid; gap: 18px; margin-top: 22px; }
.panel-field { gap: 6px; }
.panel-field > label { color: var(--muted); font-size: 13px; }
.panel-field .input { height: 40px; border-color: var(--border); border-radius: 10px; }
.panel-field .input:hover:not(:focus) { border-color: var(--border-strong); }
.drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 16px 20px; border: 1.5px dashed var(--border-strong); border-radius: 14px; background: var(--canvas); text-align: center; font-size: var(--fs-ui); transition: border-color 140ms ease, background-color 140ms ease; }
.drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.drop-ic { width: 22px; height: 22px; margin-bottom: 4px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.drop-pick { padding: 0; border: 0; background: none; color: var(--accent-strong); font: inherit; font-weight: var(--fw-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
.drop-hint { color: var(--faint); font-size: var(--fs-caption); }
.panel-files { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.panel-files:empty { display: none; }
.panel-file {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 10px;
  min-height: 38px; padding: 4px 4px 4px 12px;
  border: 1px solid var(--border); border-radius: 10px; font-size: 13px;
  animation: start-rise 180ms var(--stage-ease);
}
.panel-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-file-meta { color: var(--faint); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 失败的那一行：文件名一行，原因另起一行（原因长时不再把文件名挤没） */
.panel-file.is-failed { grid-template-columns: minmax(0, 1fr) 28px; row-gap: 2px; padding-block: 6px; }
.panel-file.is-failed .panel-file-name { grid-column: 1; grid-row: 1; }
.panel-file.is-failed .panel-file-x { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
.panel-file.is-failed .panel-file-meta { grid-column: 1; grid-row: 2; color: var(--danger); white-space: normal; }
.panel-file.is-done .panel-file-meta { color: var(--success); }
.panel-file-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform 150ms linear; }
.panel-file-x { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--r-sm); background: none; color: var(--faint); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.panel-file-x:hover { background: var(--surface-subtle); color: var(--ink); }
.panel-file-x:disabled { visibility: hidden; }
.panel-start { width: 100%; height: 44px; font-size: 15px; }
.panel-note { margin-top: -8px; color: var(--faint); font-size: var(--fs-caption); line-height: 1.5; text-align: center; }
.panel-error { color: var(--danger); font-size: var(--fs-ui); line-height: 1.55; }
.panel-error:empty { display: none; }

/* ---------- 窄屏：整页预览 ---------- */
.stage-sheetview { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--canvas); animation: start-rise 220ms var(--stage-ease); }
.stage-sheetview[hidden] { display: none; }
.stage-sheetview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.stage-sheetview-body { flex: 1; overflow: auto; padding: 16px; overscroll-behavior: contain; }
.stage-sheetview-body .paper { max-width: 560px; margin: 0 auto; padding: 26px 20px 32px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(var(--stage-shade), .08); }
.stage-sheetview-body .skm-grid { grid-template-columns: 1fr; row-gap: 6px; padding: 4px 0 24px; }
.stage-sheetview-body .skm-unit { grid-column: 1; grid-row: auto !important; margin-top: 10px; }
.stage-sheetview-body .skm-sub { grid-column: 1; grid-row: auto !important; margin-left: 16px; }
.stage-sheetview-body .skm-pts { grid-column: 1; grid-row: auto !important; margin-left: 30px; }
html.is-sheetview, html.is-sheetview body { overflow: hidden; }

/* ---------- 中等宽度：舞台收紧 ---------- */
@media (max-width: 1180px) {
  .start-main { --main-w: 440px; --side-w: 288px; --side-h: 424px; --off: 374px; --stage-label: 64px; }
  .stage-card--main .stage-face { padding: 30px 30px 26px; }
  .stage-card--main .chip { padding: 0 11px; font-size: 13px; }
  .stage-card--main .seg button { padding: 0 11px; font-size: 13px; }
  .stage-preview--paper { width: 430px; right: calc(50% - 96px); }
  .stage-preview--map { left: calc(50% - 96px); }
}
@media (max-width: 1040px) {
  .start-main { --main-w: 424px; --side-w: 270px; --side-h: 410px; --off: 358px; }
  .stage-card--main .stage-face { padding: 28px 26px 24px; }
  .stage-card--side .stage-face { padding: 20px 18px 14px; }
  .stage-card--main .chip { padding: 0 10px; }
  .skm-grid:not(.skm-grid--cam) { grid-template-columns: 140px 160px minmax(0, 1fr); column-gap: 24px; }
}

/* ---------- 手机与窄屏：平铺，不做纵深 ---------- */
@media (max-width: 860px) {
  .start-main .start-back { height: auto; margin-bottom: 8px; }
  .start-view { justify-content: flex-start; min-height: 0; padding-top: 8px; }
  .stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; height: auto; max-width: 560px; }
  .stage-slot { position: static; width: auto; height: auto; margin: 0; transform: none; perspective: none; }
  .stage-slot--main { grid-column: 1 / -1; order: -1; }
  .stage-card, .stage[data-focus] .stage-card { transform: none !important; }
  .stage-card::before, .stage-face::after { display: none; }
  .stage-card--side .mapwin, .stage-card--side .fan { filter: none; opacity: 1; }
  .stage-card--main .stage-face { box-shadow: var(--stage-lift); }
  .stage-card--main .stage-face { padding: 22px 18px 20px; }
  .stage-card--main .ask-title { font-size: 26px; }
  .stage-card--main .ask-form .q-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .stage-card--main .ask-form .q-row > :not(label) { grid-column: 1; }
  .stage-card--main .ask-form .q-row > label { padding-top: 0; }
  .stage-card--side .stage-face { height: 236px; padding: 14px 12px 10px; border-radius: 14px; }
  .stage-hit { border-radius: 14px; }
  .stage-title { font-size: 15px; }
  .stage-sub { display: none; }
  .stage-go { opacity: 1; transform: none; width: 15px; height: 15px; }
  .mapwin { margin-top: 10px; border-radius: 9px; }
  .mapwin-bar { height: 24px; padding: 0 8px; font-size: 10px; }
  .mapwin-count { display: none; }
  /* 窄屏点卡片里的示例看整页；示例上方的按钮层让给示例 */
  .mapwin { pointer-events: auto; position: relative; z-index: 2; cursor: pointer; }
  .fan { margin-top: 6px; }
  .sheet { top: 6px; }
  .sheet[data-i="1"], .sheet[data-i="2"] { --dy: 4px; }
  .stage-preview { display: none; }
  .start-ask { margin-top: 22px; }
  .tile-panel { place-items: start center; padding-top: 12px; }
  .tile-panel-card { padding: 26px 18px 22px; }
}