/* Vitro demo（fifth cut）——令牌化：五主题「学习档案」（tokens.css 单源），
   本文件零颜色字面量（色卡圆点豁免见 index.html）。层次语义：
   页面 --page / 面板 --pane（e1 海拔）/ 输入 --field / 代码面 --editor-bg /
   浮层 --glass（e3）。警告色 = --num（六色板实测 ≥4.5），freed 灰 = --delimiter。 */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--win-bg);
  background-attachment: fixed; /* glass 光斑钉视口（分叉适配见 tokens 头注） */
  color: var(--t1);
  font: 14px/1.55 var(--font-ui);
}

header { display: flex; justify-content: space-between; align-items: center; padding: 16px 24px; border-bottom: 1px solid var(--hairline); animation: rise-in var(--t-slow) var(--ease-out) backwards; }
header h1 { margin: 0; font-size: 20px; letter-spacing: .01em; color: var(--t1); }
header .sub { font-size: 12px; color: var(--t3); font-weight: normal; margin-left: 8px; }
.badges { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.badge { font-size: 11px; padding: 2px 8px; border: 1px solid var(--hairline); border-radius: 10px; color: var(--t3); background: var(--pane); }
.badge b { color: var(--accent-strong); }

/* 昼/夜组显隐（data-shade 由 setTheme/head 预置脚本随主题写入）：logo 变体
   （-light 浅底 / -dark 深底，assets 单一来源拷贝见 demo/assets/logo/README）
   与 header 快捷按钮的日/月图标共用同一机制 */
.logo { flex: none; vertical-align: -5px; margin-right: 3px; }
.logo-dark, #theme-toggle .ic-sun { display: none; }
html[data-shade="day"] .logo-dark,
html[data-shade="day"] #theme-toggle .ic-moon { display: none; }
html[data-shade="day"] .logo-light,
html[data-shade="day"] #theme-toggle .ic-sun { display: inline; }
html[data-shade="night"] .logo-dark,
html[data-shade="night"] #theme-toggle .ic-moon { display: inline; }
html[data-shade="night"] .logo-light,
html[data-shade="night"] #theme-toggle .ic-sun { display: none; }
.links { display: flex; align-items: center; gap: 10px; }
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* padding 必须显式归零：<button> 会吃到全局 button 规则的 padding，
     36px 盒被 padding 吃剩 2px 内容空间，SVG 被 flex 收缩成 2px 竖线 */
  padding: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--hairline);
  border-radius: 9px;
  /* 黑白灰策略：默认 78% 前景，hover 全亮 + 边框提亮（不走彩色 accent） */
  color: var(--t1);
  opacity: .78;
  background: transparent;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out);
}
.icon-link svg { flex: none; display: block; }
.icon-link:hover { opacity: 1; border-color: var(--t3); background: var(--pane); }

/* 设置面板：齿轮按钮下拉卡；主题五色卡 + 字号/动效 seg */
.settings-wrap { position: relative; }
.settings-panel {
  position: absolute; right: 0; top: calc(100% + 8px); width: 286px;
  background: var(--glass); border: var(--pane-border); border-radius: var(--radius);
  box-shadow: var(--float-shadow);
  padding: 6px 12px;
  z-index: 60; animation: tab-in var(--t-fast) var(--ease-out);
}
html[data-theme="glass"] .settings-panel { backdrop-filter: var(--pane-blur); }
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; }
.set-row + .set-row, .set-row + .set-col { border-top: 1px solid var(--inset-soft); border-top-style: solid; border-top-width: 1px; }
.set-col { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 9px 0; }
.set-label { font-size: 12.5px; color: var(--t1); }
.set-row .set-label { color: var(--t2); }
.seg { display: flex; background: var(--field); border: 1px solid var(--hairline); border-radius: 7px; padding: 2px; gap: 2px; }
.seg button { background: transparent; color: var(--t2); border-radius: 5px; padding: 3px 10px; font-size: 12px; box-shadow: none; }
.seg button:hover { background: var(--accent-tint); color: var(--t1); }
.seg button.on { background: var(--accent-fill); color: var(--on-accent); }
/* 主题五色卡（三色点 = win-bg/accent/t1 预览，色面字面量豁免——同 heron 豁免⑥） */
.theme-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.tcard {
  position: relative; flex: 1 0 30%;
  background: var(--pane); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 8px 6px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--t2); font-size: 11px; box-shadow: none;
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.tcard:hover { border-color: var(--t3); color: var(--t1); }
.tcard .tc-dots { display: flex; gap: 3px; }
.tcard .tc-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--hairline); }
.tcard .tc-dn { position: absolute; top: 3px; right: 5px; font-size: 9px; color: var(--t3); }
.tcard.on { border-color: var(--accent); color: var(--t1); box-shadow: 0 0 0 1px var(--accent); }

.boot-error { margin: 12px 24px; padding: 10px 14px; border: 1px solid var(--danger); border-radius: 8px; background: var(--danger-tint); color: var(--danger); }
.hidden { display: none !important; }
.muted { color: var(--t3); }
.small { font-size: 12px; }

main { display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; gap: 18px; padding: 20px 24px; max-width: 1560px; margin: 0 auto; }
/* 回放全宽（设置 vitro-replay-wide，默认关）：回放播放中隐藏左栏编辑区，
   可视化独占整行——暂停/停止/断点态即恢复（replaying=播放器态由 timetravel
   独占管理；replay-wide=设置态由 settings 独占管理，两 class 相与零耦合） */
body.replaying.replay-wide main { grid-template-columns: 1fr; }
body.replaying.replay-wide .editor-pane { display: none; }
/* 移动端（≤960px 与主栅格断点一致）：header 无换行规则时，brand（标题+副题
   240px+）与右侧三图标（128px+）在窄屏互相挤压折行——wrap + 副题独立成行 */
@media (max-width: 960px) {
  main { grid-template-columns: 1fr; padding: 14px 16px; }
  header { flex-wrap: wrap; gap: 8px 14px; padding: 12px 16px; }
  header h1 { font-size: 17px; }
  header .sub { display: block; margin: 3px 0 0; }
  .links { flex: none; }
  footer { padding: 10px 16px 22px; }
}
.pane {
  background: var(--pane); border: var(--pane-border); border-radius: var(--radius);
  box-shadow: var(--pane-shadow); backdrop-filter: var(--pane-blur);
  padding: 16px; min-width: 0; align-self: start;
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.editor-pane { animation: rise-in var(--t-slow) var(--ease-out) calc(var(--stagger) * 1) backwards; }
.result-pane { animation: rise-in var(--t-slow) var(--ease-out) calc(var(--stagger) * 2) backwards; }

.pane-head { display: flex; align-items: center; gap: 10px; margin: 10px 0 8px; flex-wrap: wrap; }
.pane-head h2 { font-size: 13px; margin: 0; color: var(--t3); text-transform: uppercase; letter-spacing: .06em; }
.subhead { margin-top: 18px; }
/* 自绘下拉：原生 <select> 的弹出列表由 OS 渲染（Win 上为系统菜单风格），
   无法跟随主题——闭合态/展开态全自绘（listbox 语义 + 键盘导航在 app.js） */
.pane-head .dd { flex: 1 1 auto; min-width: 0; max-width: 320px; }
.dd { position: relative; }
.dd-btn {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--field); color: var(--t1);
  border: 1px solid var(--hairline); border-radius: 7px;
  padding: 7px 10px; font-size: 13px; cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out);
  box-shadow: none; text-align: left;
}
.dd-btn:hover { border-color: var(--t3); }
.dd-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-chev { flex: none; opacity: .6; transition: transform var(--t-fast) var(--ease-out); }
.dd[data-open] .dd-chev { transform: rotate(180deg); }
.dd-list {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  max-height: 320px; overflow: auto;
  background: var(--glass); border: var(--pane-border); border-radius: 10px;
  box-shadow: var(--float-shadow); padding: 4px;
  animation: tab-in var(--t-fast) var(--ease-out);
}
html[data-theme="glass"] .dd-list { backdrop-filter: var(--pane-blur); }
.dd-opt {
  display: block; width: 100%; text-align: left;
  background: transparent; color: var(--t1);
  border: 0; border-radius: 6px; padding: 6px 10px; font-size: 13px;
  box-shadow: none;
}
.dd-opt:hover { background: var(--accent-tint); }
.dd-opt.on { background: var(--accent-fill); color: var(--on-accent); }
button { background: var(--accent-grad); color: var(--on-accent); border: 0; border-radius: 7px; padding: 7px 16px; font-size: 13px; cursor: pointer; transition: filter var(--t-fast) var(--ease-out), transform .08s ease, box-shadow var(--t-base) var(--ease-out); }
button:hover { filter: brightness(1.08); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .5; cursor: default; filter: none; }
#run-btn { padding: 7px 20px; font-weight: 600; box-shadow: var(--e1); }
#run-btn:disabled { animation: btn-pulse 1.1s ease-in-out infinite; opacity: .8; }
@keyframes btn-pulse { 50% { opacity: .45; } }
button.minor, #feed-btn { background: var(--accent-fill); color: var(--on-accent); }

/* ── 本地文件夹工作区（2026-10-05 打开本地文件夹批）────────
   chips 单行横滚（文件多不折行撑爆 pane）；dirty 点 = 修改未落盘标记；
   移动端（≤960px）入口整体隐藏——FSA 目录选择器是桌面 Chromium 能力，
   不做降级（用户拍板）。 */
.ws-bar { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.ws-name { font-size: 12px; color: var(--t3); flex: none; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-files { display: flex; gap: 6px; overflow-x: auto; flex: 1 1 auto; min-width: 0; padding: 2px; scrollbar-width: thin; }
.ws-chip { background: var(--pane); color: var(--t3); border: 1px solid var(--hairline); border-radius: 12px; padding: 2px 10px; font-size: 12px; font-family: var(--mono); white-space: nowrap; flex: none; display: inline-flex; align-items: center; gap: 5px; }
.ws-chip:hover { color: var(--t1); border-color: var(--t3); filter: none; }
.ws-chip.on { color: var(--t1); border-color: var(--accent); background: var(--accent-tint); }
.ws-chip .ws-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--num); flex: none; }
.ws-chip.dirty .ws-dot { display: block; }
#ws-save, #ws-close { padding: 4px 12px; font-size: 12px; flex: none; }
#ws-open { display: inline-flex; align-items: center; gap: 6px; }
#ws-open svg { flex: none; }

/* 链接分享条（2026-10-09 批）：生成后常驻——剪贴板被拒（非安全上下文 /
   权限拒绝）时它是唯一的手动复制出口，故不做自动消失。长度提示在前
   （源码→链接的字符数对照，用户据此判断这条链接值不值得发）。 */
#share-btn { display: inline-flex; align-items: center; gap: 6px; }
#share-btn svg { flex: none; }
.share-row { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; }
.share-len { font-size: 12px; color: var(--t3); flex: none; white-space: nowrap; }
.share-out { flex: 1 1 auto; min-width: 0; background: var(--pane); color: var(--t2); border: 1px solid var(--hairline); border-radius: 8px; padding: 4px 8px; font-family: var(--mono); font-size: 12px; }
.share-out:focus { border-color: var(--accent); outline: none; }
#share-copy { padding: 4px 12px; font-size: 12px; flex: none; }
@media (max-width: 960px) { .ws-ui { display: none !important; } }

.pill { font-size: 12px; padding: 3px 10px; border-radius: 12px; border: 1px solid var(--hairline); background: var(--pane); transition: color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); display: inline-flex; align-items: center; gap: 6px; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.pill.idle { color: var(--t3); }
.pill.busy { color: var(--num); }
.pill.busy::before, .pill.wait::before { animation: pill-blink 1s ease-in-out infinite; }
@keyframes pill-blink { 50% { opacity: .25; } }
.pill.ok { color: var(--ok); border-color: var(--ok); }
.pill.err { color: var(--danger); border-color: var(--danger); }
.pill.wait { color: var(--num); border-color: var(--num); }

.blurb { color: var(--t3); font-size: 12.5px; margin: 4px 0 8px; }
/* 编辑器三层叠加（F-1b①），修订版：软换行 + 高度自适应内容。
   架构 = 外层 .editor-wrap 统一滚动（min/max 高度随内容伸缩）+
   .editor-lay 内 static 高亮层撑高 + textarea absolute 覆盖。
   软换行对齐的硬前提是两层恒等宽——textarea 自身不滚（overflow:hidden，
   高度恒等于内容），滚动条只在 wrap 上，宽度永不挤压文本区。
   对齐契约：同 font/line-height/padding/tab-size + 同为 pre-wrap/
   break-word 的换行规则；textarea 的左 padding（60px）= hl 的 12px +
   行盒的 48px 行号区。字号由 --ed-fs 统一驱动（设置面板可调）。 */
.editor-wrap { position: relative; display: flex; flex-direction: column; min-height: 200px; max-height: min(600px, 65vh); background: var(--editor-bg); border: 1px solid var(--hairline); border-radius: 8px; overflow-y: auto; transition: border-color var(--t-base) var(--ease-out); }
.editor-wrap:focus-within { border-color: var(--accent); }
.editor-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.editor-wrap::-webkit-scrollbar-thumb { background: var(--delimiter); border-radius: 5px; }
.editor-wrap::-webkit-scrollbar-thumb:hover { background: var(--t3); }
.editor-lay { position: relative; flex: 1; }
#editor-hl { margin: 0; min-height: 100%; padding: 10px 12px; font: var(--ed-fs)/1.5 var(--mono); white-space: pre-wrap; word-break: normal; overflow-wrap: break-word; tab-size: 4; color: var(--code-text); }
#editor-hl .cl { position: relative; padding-left: 48px; min-height: 1.5em; }
#editor-hl .ln { position: absolute; left: 0; top: 0; width: 40px; text-align: right; color: var(--t3); opacity: .55; }
#editor-hl .cl.cur .ln { color: var(--accent-strong); opacity: 1; font-weight: 600; }
#editor-hl .syn-key { color: var(--kw); }
#editor-hl .syn-str { color: var(--str); }
#editor-hl .syn-num { color: var(--num); }
#editor-hl .syn-com { color: var(--cmt); font-style: italic; }
#editor-hl .syn-pre { color: var(--num); } /* 预处理行并入暖橙数字系（映射约定见 tokens 头注） */
#editor { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; color: transparent; caret-color: var(--t1); border: 0; outline: none; padding: 10px 12px 10px 60px; font: var(--ed-fs)/1.5 var(--mono); white-space: pre-wrap; word-break: normal; overflow-wrap: break-word; tab-size: 4; resize: none; overflow: hidden; }
#editor::selection { color: transparent; background: color-mix(in srgb, var(--editor-selection) 60%, transparent); }
/* 选区背景必须半透明：双层编辑器（透明 textarea + 底层高亮层）里，
   textarea 的选区色画在上层——不透明会把高亮文字全糊住（2026-10-03
   换肤批回归：原 30% 透明 accent 被换成不透明 Monaco 衍生色）。 */
/* 行跳转高亮闪烁（F-1b②）：直接挂在目标行盒上，随折行高度/滚动位置自然跟随 */
#editor-hl .cl.flash-on { animation: line-flash 1.2s ease-out forwards; border-radius: 3px; }
@keyframes line-flash {
  0% { background: transparent; }
  12%, 45% { background: var(--accent-tint); }
  70% { background: transparent; }
  82% { background: var(--accent-tint); }
  100% { background: transparent; }
}

/* 大数值输入（步数上限等）直接键入，原生步进箭头无用且在暗色下刺眼——隐藏 */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* 会话配置折叠条：低频设置（设一次不动）收起让位给高频的诊断区 */
.cfg-details { margin-top: 16px; border-top: 1px solid var(--hairline); }
.cfg-details summary {
  cursor: pointer; padding: 9px 0 7px; list-style: none;
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--t3);
  text-transform: uppercase; letter-spacing: .06em;
  transition: color var(--t-fast) var(--ease-out);
}
.cfg-details summary::-webkit-details-marker { display: none; }
.cfg-details summary::before { content: "▸"; font-size: 11px; transition: transform var(--t-fast) var(--ease-out); }
.cfg-details summary:hover { color: var(--t1); }
.cfg-details[open] summary::before { transform: rotate(90deg); }
.cfg-details .config-grid { margin: 4px 0 10px; }

/* 会话配置：字段式网格——数字字段纵排标签、输入框等宽并排；
   chk 独立一格，应用行与 argv 跨满整行；容器 = pane 内嵌分组（inset 描边） */
.config-grid { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 10px; align-items: end; font-size: 12.5px; padding: 12px; background: var(--pane); border-radius: 8px; box-shadow: var(--inset-soft); }
.config-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--t3); white-space: nowrap; }
.config-grid .chk { flex-direction: row; align-items: center; gap: 5px; font-size: 12.5px; color: var(--t1); align-self: center; justify-self: start; padding-bottom: 2px; }
.config-grid input[type=number] { width: 100%; background: var(--field); color: var(--t1); border: 1px solid var(--hairline); border-radius: 5px; padding: 4px 7px; font: 12px var(--mono); transition: border-color var(--t-fast) var(--ease-out); }
.config-grid input[type=number]:hover, .config-grid input[type=number]:focus { border-color: var(--t3); }
.config-grid .cfg-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.config-grid .cfg-argv { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; font-size: 12px; color: var(--num); font-family: var(--mono); }
.config-grid .cfg-argv input { flex: 1; min-width: 0; }
#stdin-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; animation: rise-in var(--t-base) var(--ease-out); }
#stdin-row label { color: var(--num); font: 12px var(--mono); }
#stdin-box { flex: 1; background: var(--field); color: var(--t1); border: 1px solid var(--num); border-radius: 6px; padding: 6px 10px; font: 13px var(--mono); }
/* 挂起等输入态（#28 10-07 登记②）：accent 描边 + 底色——「程序在等你」一眼可辨 */
#stdin-row.need-input #stdin-box { border-color: var(--accent-fill); background: var(--accent-tint); }
#stdin-row.need-input label { color: var(--accent-fill); }

/* tabs：下划线指示器式——active 侧 accent 色下划线 scaleX 展开，hover 半程预览；
   页面切换淡入上移（display 切换靠 animation 触发） */
.tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--hairline); padding-bottom: 0; margin-bottom: 4px; }
.tab { background: transparent; color: var(--t3); border: 0; border-radius: 7px 7px 0 0; padding: 8px 14px; font-size: 13px; position: relative; transition: color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out); }
.tab::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 1px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform var(--t-base) var(--ease-out), background-color var(--t-base) var(--ease-out); }
.tab:hover { color: var(--t1); background: var(--accent-tint); }
.tab:hover::after { transform: scaleX(.45); }
.tab.active { color: var(--accent-strong); background: transparent; }
.tab.active::after { transform: scaleX(1); }
.tabpage:not(.hidden) { animation: tab-in var(--t-base) var(--ease-out); }
@keyframes tab-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.row { display: flex; gap: 12px; padding: 6px 0 10px; flex-wrap: wrap; }
.stat { flex: 0 1 180px; background: var(--field); border: 1px solid var(--hairline); border-radius: 10px; padding: 10px 16px 12px; transition: border-color var(--t-base) var(--ease-out); }
.stat:hover { border-color: var(--accent); }
.stat label { display: block; font-size: 11px; color: var(--t3); letter-spacing: .04em; }
.stat b { font-size: 24px; font-family: var(--mono); line-height: 1.3; color: var(--t1); }

.stdout { background: var(--editor-bg); border: 1px solid var(--hairline); border-radius: 8px; padding: 10px 12px; min-height: 46px; max-height: 360px; overflow: auto; font: 13px/1.5 var(--mono); white-space: pre-wrap; margin: 0; color: var(--code-text); }
.stdout.empty { color: var(--t3); }
/* 内容更新淡入（F-1b②：stdout/数字增量淡入——JS 在重渲染时重触发） */
.flash-in { animation: flash-in .35s var(--ease-out); }
@keyframes flash-in { from { opacity: 0; } }

.trap { margin-top: 12px; padding: 12px 14px; background: var(--danger-tint); border: 1px solid var(--danger); border-radius: 8px; font: 13px/1.6 var(--mono); white-space: pre-wrap; color: var(--code-text); }

.note { margin-top: 10px; padding: 8px 12px; background: var(--accent-tint); border: 1px dashed var(--accent); border-radius: 8px; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; color: var(--accent-strong); }
.stderr { margin-top: 10px; padding: 8px 12px; background: var(--danger-tint); border: 1px dashed var(--danger); border-radius: 8px; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; color: var(--danger); }
.diag .fix { margin-top: 3px; color: var(--ok); font-size: 12px; }
#argv-box { background: var(--field); color: var(--t1); border: 1px solid var(--hairline); border-radius: 5px; padding: 4px 8px; font: 12px var(--mono); transition: border-color var(--t-fast) var(--ease-out); }
#argv-box:hover, #argv-box:focus { border-color: var(--t3); }

.diag-list { max-height: 40vh; overflow: auto; font-size: 12.5px; }
.diag { padding: 4px 8px; border-left: 3px solid var(--num); margin-bottom: 4px; background: var(--field); border-radius: 0 6px 6px 0; animation: rise-in .25s var(--ease-out) backwards; animation-delay: min(calc(var(--i, 0) * var(--stagger)), 280ms); transition: background-color var(--t-fast) var(--ease-out); }
@keyframes rise-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.diag.jumpy { cursor: pointer; }
.diag.jumpy:hover { background: var(--accent-tint); }
.diag.jumpy .loc { text-decoration: underline dotted; text-underline-offset: 2px; }
.diag.warning { border-left-color: var(--num); }
.diag.error { border-left-color: var(--danger); }
.diag .code { font-family: var(--mono); color: var(--warn-code, var(--num)); margin-right: 8px; }
.diag.error .code { color: var(--danger); }
.diag .loc { color: var(--t3); margin-right: 8px; font-size: 11.5px; }
.pp-trace { margin-top: 6px; padding: 6px 8px; background: var(--editor-bg); border: 1px dashed var(--hairline); border-radius: 6px; }
.pp-title { color: var(--accent-strong); font-size: 11.5px; margin-bottom: 4px; }
.pp-line { font: 12px/1.6 var(--mono); color: var(--t1); }

.mem-stats { display: flex; gap: 14px; font-size: 12px; color: var(--t1); flex-wrap: wrap; padding: 6px 0; }
.band-wrap { margin: 8px 0; }
.band-label { font-size: 11.5px; color: var(--t3); margin-bottom: 3px; }
.band { position: relative; height: 26px; background: var(--field); border: 1px solid var(--hairline); border-radius: 6px; overflow: hidden; }
.blk { position: absolute; top: 0; height: 100%; min-width: 2px; opacity: .92; transition: left .45s var(--ease-out), width .45s var(--ease-out), background-color .45s var(--ease-out), border-color .45s var(--ease-out), opacity .15s ease; }
/* 内存三段映射（tokens 头注约定）：global=accent / heap=ok / stack=num 暖橙 */
.blk.global { background: var(--accent); }
.blk.heap { background: var(--ok); }
.blk.stack { background: var(--num); }
.blk.freed { background: var(--delimiter); border: 1px solid var(--danger); box-sizing: border-box; }
.blk:hover { opacity: 1; outline: 1px solid var(--t1); }
.band .muted.center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; }

.quar { margin: 8px 0; }
.quar-bar { height: 8px; background: var(--field); border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; }
.quar-bar div { height: 100%; background: var(--danger); width: 0; transition: width .3s var(--ease-out); }

.mem-table { width: 100%; border-collapse: separate; border-spacing: 0; font: 12px/1.5 var(--mono); margin-top: 6px; border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.mem-table th { text-align: left; color: var(--t3); font-weight: normal; border-bottom: 1px solid var(--hairline); padding: 5px 8px; background: var(--field); }
.mem-table td { padding: 4px 8px; border-bottom: 1px solid var(--hairline); }
.mem-table tr:last-child td { border-bottom: 0; }
.mem-table tr.freed td { color: var(--t3); }
.mem-table tr.freed td:nth-child(6) { color: var(--danger); }

/* 细滚动条统一（输出/诊断/手册/编辑器外的次级滚动面） */
.stdout::-webkit-scrollbar, .diag-list::-webkit-scrollbar, .cat-list::-webkit-scrollbar { width: 8px; height: 8px; }
.stdout::-webkit-scrollbar-thumb, .diag-list::-webkit-scrollbar-thumb, .cat-list::-webkit-scrollbar-thumb { background: var(--delimiter); border-radius: 4px; }
.stdout::-webkit-scrollbar-thumb:hover, .diag-list::-webkit-scrollbar-thumb:hover, .cat-list::-webkit-scrollbar-thumb:hover { background: var(--t3); }

/* 诊断手册 */
#cat-search { width: 100%; background: var(--field); color: var(--t1); border: 1px solid var(--hairline); border-radius: 6px; padding: 7px 10px; font: 13px var(--mono); margin: 6px 0; }
#cat-stats { margin-bottom: 6px; }
.cat-list { max-height: 560px; overflow: auto; /* F-1b②：details 展开渐变——渐进增强，不支持的内核原地展开 */ interpolate-size: allow-keywords; }
.cat-group { margin-bottom: 10px; }
.cat-head { font-size: 12px; color: var(--accent-strong); margin: 8px 0 4px; }
.cat-card { border: 1px solid var(--hairline); border-radius: 6px; margin-bottom: 4px; background: var(--pane); transition: border-color var(--t-base) var(--ease-out); }
.cat-card[open] { border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); }
.cat-card::details-content { height: 0; overflow: clip; transition: height .3s var(--ease-out), content-visibility .3s ease allow-discrete; }
.cat-card[open]::details-content { height: auto; }
.cat-card summary { cursor: pointer; padding: 6px 10px; font-size: 13px; list-style-position: inside; color: var(--t1); }
.cat-card summary:hover { color: var(--accent-strong); }
.cat-card .icon-svg { vertical-align: -5px; margin-right: 7px; }
.icon-missing { font-size: 11px; opacity: 0.6; margin-right: 7px; }
#trap-box .icon-svg, #note-box .icon-svg { vertical-align: -5px; margin-right: 3px; }
.cat-card .code { font-family: var(--mono); color: var(--warn-code, var(--num)); margin-right: 6px; }
.cat-body { padding: 4px 12px 8px; font-size: 12.5px; color: var(--t1); }
.cat-body p { margin: 4px 0; }
.cat-body .causes { color: var(--t3); font-size: 12px; }

/* 引擎与协议 */
.methods { display: flex; flex-direction: column; gap: 3px; }
.method { display: grid; grid-template-columns: 220px 1fr 90px; gap: 10px; padding: 4px 8px; background: var(--field); border-radius: 6px; font-size: 12.5px; align-items: baseline; }
.method .m-name { font: 12px var(--mono); color: var(--accent-strong); }
.method .m-desc { color: var(--t1); }
.method .m-use.yes { color: var(--ok); text-align: right; }
.method .m-use.no { color: var(--t3); text-align: right; font-size: 11.5px; }
.cap-box { font-size: 12.5px; color: var(--t1); }
.ledger { padding: 3px 0; border-bottom: 1px solid var(--hairline); }
.ledger .code { font: 12px var(--mono); color: var(--num); margin-right: 8px; }

/* 动画演示（帧采集播放器）：控件条 / 阶段说明 / 事件时间轴 */
.anim-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; }
.anim-ctrl .dd-btn { padding: 5px 8px; font-size: 12.5px; }
#anim-speed { width: 92px; flex: none; }
#anim-seek { flex: 1; min-width: 120px; accent-color: var(--accent); cursor: pointer; }
.anim-phase { padding: 8px 12px; background: var(--accent-tint); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; font: 12.5px/1.6 var(--mono); color: var(--accent-strong); margin-bottom: 8px; min-height: 20px; }
/* 回放空态卡：比 subhead 的 muted hint 显眼一级（虚线框 + accent 底——
   引导用户按下采集或回内容页选课；有数据后由 stepRender 撤下） */
.replay-empty { margin: 2px 0 10px; padding: 12px 14px; border: 1.5px dashed var(--hairline); border-radius: 8px; background: var(--accent-tint); color: var(--t2); font-size: 13px; line-height: 1.6; }
.replay-empty b { color: var(--accent-strong); }
/* 时间旅行：调用栈链（main → fib → …） */
.step-stack { font: 12.5px/1.7 var(--mono); color: var(--t1); padding: 4px 0; }
.step-stack .frm { display: inline-block; padding: 2px 9px; background: var(--field); border: 1px solid var(--hairline); border-radius: 6px; margin: 2px 0; }
.step-stack .frm .ln { color: var(--t3); margin-left: 6px; font-size: 11px; }
.step-stack .arrow { color: var(--t3); margin: 0 6px; }
/* 时间旅行：调用树 SVG（step 流 call_stack 重建；当前帧节点 accent 高亮）
   画布 = 细网格（--grid 令牌），节点 = 双行胶囊（函数名 + 首参实值），
   当前帧节点 accent-fill 反色 + 光晕；边 = 垂直贝塞尔 + 已走提亮 + 端点圆点 */
.step-tree {
  position: relative; /* 常驻信息卡的定位基准 */
  overflow: hidden; padding: 8px 4px; min-height: 240px; height: 360px;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  background-color: var(--field);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 18px 18px;
  border: 1px solid var(--hairline); border-radius: 8px;
}
.step-tree svg { display: block; }
#tree-viewport { transition: transform var(--t-base) var(--ease-out); } /* 帧间镜头平滑跟随 */
#tree-viewport.dragging { transition: none; } /* 拖拽即时 */
.step-tree .edge, .step-tree .nd rect { vector-effect: non-scaling-stroke; } /* 概览缩小下描边不随 scale 变细 */
.step-tree .edge { stroke: var(--delimiter); stroke-width: 1.5; fill: none; opacity: .55; }
.step-tree .edge.walked { stroke: var(--accent); stroke-width: 2; opacity: 1; }
.step-tree .dot { fill: var(--accent); }
.step-tree .nd rect { fill: var(--pane); stroke: var(--hairline); stroke-width: 1.2; transition: fill var(--t-fast) var(--ease-out), stroke var(--t-fast) var(--ease-out); }
.step-tree .nd text { text-anchor: middle; font-family: var(--mono); }
.step-tree .nd .tname { fill: var(--t1); font-size: 11.5px; font-weight: 600; }
.step-tree .nd .targ { fill: var(--t3); font-size: 10px; }
.step-tree .nd.visited rect { stroke: var(--accent); }
.step-tree .nd.visited .targ { fill: var(--accent-strong); }
.step-tree .nd.cur rect { fill: var(--accent-fill); stroke: var(--accent); filter: drop-shadow(0 0 7px var(--accent-tint)) drop-shadow(0 1px 3px var(--sh-key)); }
.step-tree .nd.cur .tname { fill: var(--on-accent); }
.step-tree .nd.cur .targ { fill: var(--on-accent); opacity: .85; }
/* 数组状态柱状图：随帧刷新（指令级半交换态可见=白箱卖点） */
#array-viz { display: flex; gap: 14px; flex-wrap: wrap; }
#array-viz .av-item { flex: 1 1 260px; min-width: 220px; }
#array-viz .av-name { font: 11px var(--mono); color: var(--t3); margin-bottom: 3px; }
#array-viz .av-chart {
  display: flex; align-items: flex-end; gap: 6px; height: 116px;
  background: var(--field); border: 1px solid var(--hairline);
  border-radius: 8px; padding: 8px 8px 0;
}
#array-viz .av-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
#array-viz .av-bar { width: 100%; min-height: 2px; background: var(--accent); opacity: .82; border-radius: 3px 3px 0 0; transition: height var(--t-base) var(--ease-out); }
#array-viz .av-num { font: 10px var(--mono); color: var(--t2); margin: 3px 0 4px; }

/* 常驻信息卡：画布右上角浮层，跟随当前帧刷新（事件/位置/步/局部变量） */
.node-card {
  position: absolute; top: 10px; right: 10px; width: 196px;
  background: var(--glass); border: var(--pane-border); border-radius: 10px;
  box-shadow: var(--e2); padding: 8px 10px; z-index: 5; pointer-events: none;
}
html[data-theme="glass"] .node-card { backdrop-filter: var(--pane-blur); }
.node-card p { margin: 2px 0; font: 11px/1.5 var(--mono); color: var(--t2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node-card .nc-ev { color: var(--accent-strong); font-weight: 700; font-size: 11.5px; }
.node-card .nc-grp { color: var(--t3); font-size: 10.5px; } /* 帧身份（粒度批）：合并 K 条指令 / 语句内 m/K */
.node-card .nc-fn { color: var(--t1); }
.node-card .nc-var { color: var(--t1); }
.node-card .nc-head {
  /* 整卡 pointer-events:none（不挡画布拖拽缩放），仅卡头恢复可点——收纳开关 */
  pointer-events: auto;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; color: var(--t3); font-size: 10px;
  border-bottom: 1px solid var(--hairline); padding-bottom: 4px; margin-bottom: 4px;
}
.node-card .nc-head:hover { color: var(--t1); }
.node-card .nc-fold { font-size: 9px; }
.node-card .nc-codebox {
  margin-top: 6px; background: var(--editor-bg);
  border: 1px solid var(--hairline); border-radius: 6px;
  padding: 4px 0; font: 10.5px/1.7 var(--mono); overflow: hidden;
}
.node-card .nc-code { padding: 0 6px; color: var(--t2); white-space: pre; }
.node-card .nc-code .n { display: inline-block; width: 20px; color: var(--t3); opacity: .6; }
.node-card .nc-code.on { background: var(--accent-tint); color: var(--t1); }
.node-card .nc-code.on .n { color: var(--accent-strong); opacity: 1; font-weight: 600; }
/* 移动端：画布窄，信息卡收窄避让（默认宽 196px 会盖住 2/3 画布） */
@media (max-width: 960px) {
  .node-card { width: 132px; padding: 6px 8px; }
  .node-card p { font-size: 10px; }
  .node-card .nc-code { font-size: 9.5px; }
}

#ref-box { font-size: 13px; color: var(--t1); }
#ref-box .match { color: var(--ok); font-weight: 600; }
#ref-box .mismatch { color: var(--danger); font-weight: 600; }
.ref-pre { background: var(--editor-bg); border: 1px solid var(--hairline); border-radius: 6px; padding: 8px 10px; font: 12px/1.5 var(--mono); white-space: pre-wrap; color: var(--code-text); }

footer { max-width: 1560px; margin: 0 auto; padding: 12px 24px 28px; color: var(--t3); font-size: 12px; border-top: 1px solid var(--hairline); animation: rise-in var(--t-slow) var(--ease-out) calc(var(--stagger) * 4) backwards; }
footer code { color: var(--t1); }
footer p { margin: 6px 0; }

/* ── rose 新拟物质感层（#28 换肤批补）──────────────────────
   「奶油手账」的精髓 = 色板之外还有凹陷/凸起手感：输入件与仪表槽
   内凹（inset-soft 双影）、面板子卡外凸（neu-raised 双影）。只对
   rose 生效；其余四主题无此钩子，形态零变化。 */
html[data-theme="rose"] input,
html[data-theme="rose"] select,
html[data-theme="rose"] .dd-btn,
html[data-theme="rose"] #stdin-box,
html[data-theme="rose"] #argv-box,
html[data-theme="rose"] #cat-search,
html[data-theme="rose"] .band,
html[data-theme="rose"] .quar-bar,
html[data-theme="rose"] .config-grid { box-shadow: var(--inset-soft); }
html[data-theme="rose"] .stat,
html[data-theme="rose"] .tcard,
html[data-theme="rose"] .seg,
html[data-theme="rose"] .pill { box-shadow: var(--neu-raised); }

/* ── 全局体验面 ──────────────────────────────────────────
   主题切换平滑（只上大面元素；时长走动效令牌 --t-base） */
body, header, .pane, .band, .stdout, .editor-wrap,
input, select, .ref-pre, .cat-card, .quar-bar, .seg, .tcard {
  transition: background-color var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
/* 键盘可达性：焦点环统一走 focus-visible（编辑器由 wrap 的 focus-within 代管） */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 动效降级：系统"减少动态效果"或设置面板关闭动效时全部动画瞬时完成 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
}

/* vis_events 行标记（编辑器左缘竖条——与 .cur 当前行并存） */
#editor-hl .cl.vis-on::before { content: ""; position: absolute; left: 40px; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--accent); opacity: .9; }

/* 常驻信息卡算法段（algorithm_step 的 display_name/phase/description） */
.node-card .nc-algo { color: var(--accent-strong); font-weight: 600; font-size: 11px; white-space: normal; }
.node-card .nc-algo .nc-algo-desc { color: var(--t2); font-weight: 400; display: block; white-space: normal; }

/* 断点行标记（行号红点——引擎 breakpoints.set 的 UI 入口） */
#editor-hl .cl.bp-on .ln { position: relative; color: var(--danger); font-weight: 700; cursor: pointer; }
#editor-hl .cl.bp-on .ln::after { content: ""; position: absolute; left: 22px; top: 50%; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--danger); }
#editor-hl .ln { cursor: pointer; }

/* 引擎跳转控件（step.seek 消费） */
.eng-seek { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; }
.eng-seek input[type="number"] { width: 84px; background: var(--field); color: var(--t1); border: 1px solid var(--hairline); border-radius: 6px; padding: 4px 7px; font: 12px var(--mono); }

/* ── 课程档案树（2026-10-04 课程式重构：heron 式章节树——内容入口归一）── */
.course-search { width: 100%; margin: 6px 0 8px; background: var(--field); color: var(--t1); border: 1px solid var(--hairline); border-radius: 7px; padding: 5px 9px; font-size: 12px; }
.course-search:focus { outline: none; border-color: var(--accent); }
.course-tree { display: flex; flex-direction: column; gap: 2px; max-height: 34vh; overflow-y: auto; margin-bottom: 8px; padding-right: 2px; }
.crs-group { border-radius: 8px; }
.crs-chap { display: flex; align-items: center; gap: 7px; width: 100%; background: var(--pane); color: var(--t1); border: 1px solid var(--hairline); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; cursor: pointer; text-align: left; }
.crs-chap:hover { border-color: var(--chip, var(--accent)); }
.crs-cchip { width: 8px; height: 8px; border-radius: 50%; background: var(--chip, var(--accent)); flex: none; }
.crs-badge { margin-left: auto; font-size: 10.5px; color: var(--t3); background: var(--field); border-radius: 8px; padding: 0 6px; }
.crs-chev { width: 13px; height: 13px; color: var(--t3); transition: transform var(--t-fast) var(--ease-out); flex: none; }
.crs-group.closed .crs-chev { transform: rotate(-90deg); }
.crs-group.closed .crs-lessons { display: none; }
.crs-lessons { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 6px 8px; }
.crs-lesson { display: flex; align-items: center; gap: 7px; padding: 4px 8px; border-radius: 6px; font-size: 12px; color: var(--t2); cursor: pointer; }
.crs-lesson:hover { background: var(--accent-tint); color: var(--t1); }
.crs-lesson.sub { padding-left: 26px; font-size: 11.5px; color: var(--t3); }
.crs-ring { position: relative; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--hairline); flex: none; transition: all var(--t-fast) var(--ease-out); }
/* 打勾态 = 外环 + 中缝 + 芯点（三层）。中缝**不得**用 box-shadow inset 挖 ——
   原实现 `inset 0 0 0 2.5px var(--pane)` 拿面板底色当遮挡色，glass 主题的
   --pane 是 rgba(255,255,255,0.065) 半透明，挡不住 --ok ⇒ 缝消失、整体糊成
   实心绿点（2026-10-10 用户报「深夜书房与其余四主题不一致」实锤）。改为伪元素
   画芯点、中缝直接透出父级背景（主题无关，五主题形态一致）。 */
.crs-ring::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: var(--ok); opacity: 0; transition: opacity var(--t-fast) var(--ease-out); }
.crs-lesson.done .crs-ring { border-color: var(--ok); }
.crs-lesson.done .crs-ring::after { opacity: 1; }
.crs-lesson.done { color: var(--t1); }
/* 章 chip 色（tokens --chip-1..5 的类形态——避免模板字符串内联 style 被 lint 静态抽取器截断） */
.crs-chip1 { --chip: var(--chip-1); }
.crs-chip2 { --chip: var(--chip-2); }
.crs-chip3 { --chip: var(--chip-3); }
.crs-chip4 { --chip: var(--chip-4); }
.crs-chip5 { --chip: var(--chip-5); }