/* ============================================================
   揭开黑箱 v2 · 聊天 + 调试器 + 3D 舞台
   ============================================================ */

@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-400.woff2?v=d6e4a32") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-700.woff2?v=d6e4a32") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "BB Serif"; src: url("../fonts/noto-serif-sc-900-core.woff2?v=d6e4a32") format("woff2"); font-weight: 900; font-display: swap; unicode-range: U+20-7E,U+A0,U+B7,U+D7,U+3A3,U+2014,U+2018-2019,U+201C-201D,U+2026,U+2191-2193,U+2212,U+221A,U+2248,U+2295,U+3000-3002,U+300A-300B,U+3010-3011,U+4E00,U+4E0A-4E0B,U+4E16,U+4E2A,U+4E3B,U+4E48,U+4EBA,U+4ECE,U+4F60,U+51FA,U+5230,U+52A8,U+53D1,U+56FE,U+5728,U+5730,U+573A,U+578B,U+5927,U+5B83,U+5DF1,U+5E72,U+5F00,U+5F80,U+600E,U+61C2,U+624B,U+627E,U+6309,U+63ED,U+6599,U+662F,U+672F,U+6761,U+6765,U+68A6,U+6A21,U+6D3B,U+73B0,U+7535,U+754C,U+7684,U+770B,U+7BB1,U+7EC3,U+8111,U+81EA,U+8BAD,U+8BDD,U+8BED,U+8BF4,U+8D44,U+8D70,U+8D77,U+8DD1,U+8DEF,U+91CC,U+9898,U+9ED1,U+FF01,U+FF08-FF09,U+FF0C,U+FF1A-FF1B,U+FF1F; }
@font-face { font-family: "BB Serif"; src: url("../fonts/noto-serif-sc-900-ext.woff2?v=d6e4a32") format("woff2"); font-weight: 900; font-display: swap; unicode-range: U+0-1F,U+7F-9F,U+A1-B6,U+B8-D6,U+D8-3A2,U+3A4-2013,U+2015-2017,U+201A-201B,U+201E-2025,U+2027-2190,U+2194-2211,U+2213-2219,U+221B-2247,U+2249-2294,U+2296-2FFF,U+3003-3009,U+300C-300F,U+3012-4DFF,U+4E01-4E09,U+4E0C-4E15,U+4E17-4E29,U+4E2B-4E3A,U+4E3C-4E47,U+4E49-4EB9,U+4EBB-4ECD,U+4ECF-4F5F,U+4F61-51F9,U+51FB-522F,U+5231-52A7,U+52A9-53D0,U+53D2-56FD,U+56FF-5727,U+5729-572F,U+5731-5739,U+573B-578A,U+578C-5926,U+5928-5B82,U+5B84-5DF0,U+5DF2-5E71,U+5E73-5EFF,U+5F01-5F7F,U+5F81-600D,U+600F-61C1,U+61C3-624A,U+624C-627D,U+627F-6308,U+630A-63EC,U+63EE-6598,U+659A-662E,U+6630-672E,U+6730-6760,U+6762-6764,U+6766-68A5,U+68A7-6A20,U+6A22-6D3A,U+6D3C-73AF,U+73B1-7534,U+7536-754B,U+754D-7683,U+7685-770A,U+770C-7BB0,U+7BB2-7EC2,U+7EC4-8110,U+8112-81E9,U+81EB-8BAC,U+8BAE-8BDC,U+8BDE-8BEC,U+8BEE-8BF3,U+8BF5-8D43,U+8D45-8D6F,U+8D71-8D76,U+8D78-8DD0,U+8DD2-8DEE,U+8DF0-91CB,U+91CD-9897,U+9899-9ED0,U+9ED2-FF00,U+FF02-FF07,U+FF0A-FF0B,U+FF0D-FF19,U+FF1C-FF1E,U+FF20-10FFFF; }
@font-face { font-family: "BB Serif"; src: url("../fonts/noto-serif-sc-600-core.woff2?v=d6e4a32") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+20-7E,U+A0,U+B7,U+D7,U+3A3,U+3C4,U+2013-2014,U+2018-2019,U+201C-201D,U+2026,U+2039,U+2190-2193,U+2212,U+221A,U+2248,U+2295,U+232B,U+23ED-23EE,U+25B6,U+25C0,U+25CE,U+2715,U+2726,U+27F2,U+3000-3002,U+300A-300B,U+3010-3011,U+4E00,U+4E07,U+4E09-4E0B,U+4E0D,U+4E16,U+4E24,U+4E2A,U+4E3A,U+4E48,U+4E5F-4E60,U+4E86,U+4EAE,U+4EBF,U+4ECE,U+4F1A,U+4F38,U+4F4D,U+4F53,U+4F5C,U+4F60,U+4FDD,U+4FEE,U+500D,U+503C,U+504F,U+505A,U+505C,U+5143,U+5165,U+5168,U+5177,U+5185,U+519B,U+51A0,U+51E1,U+51FA-51FB,U+51FD,U+5206,U+5230,U+5236,U+523B,U+524D,U+529B,U+52A0,U+52A8,U+5347,U+5355,U+5361,U+53BB,U+53C2,U+53CC,U+53D1,U+53E6,U+53EA,U+53F0,U+53F3,U+540C-540D,U+5411,U+547D,U+548C,U+5510,U+552E,U+5668,U+56DE,U+56FE,U+5728,U+5730,U+573A,U+5757,U+578B,U+5904,U+590D,U+5916,U+591A,U+5927,U+5931,U+5934,U+597D,U+5B50,U+5B66,U+5B83,U+5B8B-5B8C,U+5B9E,U+5BB9,U+5BF9,U+5C0F,U+5C11,U+5C40,U+5C42,U+5DE5,U+5DEE,U+5DF1,U+5E27,U+5E73,U+5E8F,U+5EA6,U+5EF6,U+5F00,U+5F55,U+5F97,U+5FAA,U+5FAE,U+5FD7,U+6001,U+600E,U+610F,U+6211,U+6216,U+624D,U+6267,U+627E,U+62D6,U+62FC,U+6307,U+6362,U+636E,U+63A2,U+63A5,U+63A7-63A8,U+63ED,U+64AD,U+64CD,U+6539,U+653E,U+6570,U+6574,U+6587,U+65B0,U+65B9,U+65CB,U+65E0,U+65E5,U+65F6,U+660E,U+662F,U+663E,U+667A,U+6682,U+66F4,U+6700,U+6709,U+672C,U+673A,U+6743,U+675F,U+6761,U+6765,U+677F,U+6784,U+6790,U+679C,U+67E5,U+67F1,U+6807,U+6839,U+683C,U+68A6,U+6982,U+6A21,U+6B21,U+6B63-6B65,U+6BB5,U+6BCF,U+6C99,U+6CA1,U+6CE8,U+6D3B,U+6D4B,U+6D4F,U+6E29,U+6E90,U+6EDA,U+6FC0,U+70B9,U+7167,U+7247,U+7269,U+7387,U+73A9,U+73AF-73B0,U+73BB,U+7406,U+7483,U+751F,U+7528,U+7531,U+753B,U+754C,U+7559,U+7684,U+76D1,U+770B,U+771F,U+773C,U+7741,U+7763,U+77E5,U+788E,U+793A,U+795E,U+79BB,U+79EF,U+79FB,U+7A0B,U+7A7A,U+7A7F,U+7AD9,U+7AE0,U+7AEF,U+7B49,U+7B54,U+7B97,U+7BB1,U+7EBF,U+7EC3,U+7EC8,U+7ECF,U+7ED3,U+7EDC,U+7EDF,U+7EF4,U+7F29,U+7F51,U+7F6E,U+80FD,U+81EA,U+821E,U+85CF,U+884C,U+8868,U+8981,U+89C1,U+89C6,U+89C8-89C9,U+89D2,U+89E3,U+8A00,U+8BA1,U+8BAD,U+8BB0,U+8BC6,U+8BCD,U+8BD5,U+8BD7,U+8BDD,U+8BE2,U+8BED,U+8BEF,U+8BF4,U+8C03,U+8D25,U+8D70,U+8DD1,U+8DDF,U+8F66,U+8F6C,U+8F6E,U+8F7D,U+8F93,U+8FC7,U+8FD0,U+8FD9,U+8FDB,U+901F,U+90A3,U+90E8,U+90FD,U+91CC-91CD,U+9274,U+9488,U+9500,U+9519,U+952E,U+95ED,U+963F,U+964D,U+968F-9690,U+96F6,U+9700,U+9762,U+9875,U+9884,U+98DE,U+9A76,U+9A7E,U+9ED1,U+9F50,U+FF01,U+FF08-FF09,U+FF0B-FF0C,U+FF1A-FF1B,U+FF1F; }
@font-face { font-family: "BB Serif"; src: url("../fonts/noto-serif-sc-600-ext.woff2?v=d6e4a32") format("woff2"); font-weight: 600; font-display: swap; unicode-range: U+0-1F,U+7F-9F,U+A1-B6,U+B8-D6,U+D8-3A2,U+3A4-3C3,U+3C5-2012,U+2015-2017,U+201A-201B,U+201E-2025,U+2027-2038,U+203A-218F,U+2194-2211,U+2213-2219,U+221B-2247,U+2249-2294,U+2296-232A,U+232C-23EC,U+23EF-25B5,U+25B7-25BF,U+25C1-25CD,U+25CF-2714,U+2716-2725,U+2727-27F1,U+27F3-2FFF,U+3003-3009,U+300C-300F,U+3012-4DFF,U+4E01-4E06,U+4E08,U+4E0C,U+4E0E-4E15,U+4E17-4E23,U+4E25-4E29,U+4E2B-4E39,U+4E3B-4E47,U+4E49-4E5E,U+4E61-4E85,U+4E87-4EAD,U+4EAF-4EBE,U+4EC0-4ECD,U+4ECF-4F19,U+4F1B-4F37,U+4F39-4F4C,U+4F4E-4F52,U+4F54-4F5B,U+4F5D-4F5F,U+4F61-4FDC,U+4FDE-4FED,U+4FEF-500C,U+500E-503B,U+503D-504E,U+5050-5059,U+505B,U+505D-5142,U+5144-5164,U+5166-5167,U+5169-5176,U+5178-5184,U+5186-519A,U+519C-519F,U+51A1-51E0,U+51E2-51F9,U+51FC,U+51FE-5205,U+5207-522F,U+5231-5235,U+5237-523A,U+523C-524C,U+524E-529A,U+529C-529F,U+52A1-52A7,U+52A9-5346,U+5348-5354,U+5356-5360,U+5362-53BA,U+53BC-53C1,U+53C3-53CB,U+53CD-53D0,U+53D2-53E5,U+53E7-53E9,U+53EB-53EF,U+53F1-53F2,U+53F4-540B,U+540E-5410,U+5412-547C,U+547E-548B,U+548D-550F,U+5511-552D,U+552F-5667,U+5669-56DD,U+56DF-56FD,U+56FF-5727,U+5729-572F,U+5731-5739,U+573B-5756,U+5758-578A,U+578C-5903,U+5905-590C,U+590E-5915,U+5917-5919,U+591B-5926,U+5928-5930,U+5932-5933,U+5935-597C,U+597E-5B4F,U+5B51-5B65,U+5B67-5B82,U+5B84-5B8A,U+5B8D-5B9D,U+5B9F-5BB8,U+5BBA-5BF8,U+5BFA-5C0E,U+5C10,U+5C12-5C3F,U+5C41,U+5C43-5DE4,U+5DE6-5DED,U+5DEF-5DF0,U+5DF2-5E26,U+5E28-5E72,U+5E74-5E8E,U+5E90-5EA5,U+5EA7-5EF5,U+5EF7-5EFF,U+5F01-5F54,U+5F56-5F96,U+5F98-5FA9,U+5FAB-5FAD,U+5FAF-5FD6,U+5FD8-6000,U+6002-600D,U+600F-610E,U+6110-6210,U+6212-6215,U+6217-624C,U+624E-6266,U+6268-627D,U+627F-62D5,U+62D7-62FB,U+62FD-6306,U+6308-6361,U+6363-636D,U+636F-63A1,U+63A3-63A4,U+63A6,U+63A9-63EC,U+63EE-64AC,U+64AE-64CC,U+64CE-6538,U+653A-653D,U+653F-656F,U+6571-6573,U+6575-6586,U+6588-65AF,U+65B1-65B8,U+65BA-65CA,U+65CC-65DF,U+65E1-65E4,U+65E6-65F5,U+65F7-660D,U+660F-662E,U+6630-663D,U+663F-6679,U+667B-6681,U+6683-66F3,U+66F5-66FF,U+6701-6708,U+670A-672B,U+672D-6739,U+673B-6742,U+6744-675E,U+6760,U+6762-6764,U+6766-677E,U+6780-6783,U+6785-678F,U+6791-679B,U+679D-67E4,U+67E6-67F0,U+67F2-6806,U+6808-6838,U+683A-683B,U+683D-68A5,U+68A7-6981,U+6983-6A20,U+6A22-6B20,U+6B22-6B62,U+6B66-6BB4,U+6BB6-6BCE,U+6BD0-6C98,U+6C9A-6CA0,U+6CA2-6CE7,U+6CE9-6D3A,U+6D3C-6D4A,U+6D4C-6D4E,U+6D50-6E28,U+6E2A-6E8F,U+6E91-6ED9,U+6EDB-6FBF,U+6FC1-70B8,U+70BA-7166,U+7168-7246,U+7248-7268,U+726A-7386,U+7388-73A8,U+73AA-73AE,U+73B1-73BA,U+73BC-7405,U+7407-7482,U+7484-751E,U+7520-7527,U+7529-7530,U+7532-753A,U+753C-754B,U+754D-7558,U+755A-7683,U+7685-76D0,U+76D2-770A,U+770C-771E,U+7720-773B,U+773D-7740,U+7742-7762,U+7764-77E4,U+77E6-788D,U+788F-7939,U+793B-795D,U+795F-79BA,U+79BC-79EE,U+79F0-79FA,U+79FC-7A0A,U+7A0C-7A79,U+7A7B-7A7E,U+7A80-7AD8,U+7ADA-7ADF,U+7AE1-7AEE,U+7AF0-7B48,U+7B4A-7B53,U+7B55-7B96,U+7B98-7BB0,U+7BB2-7EBE,U+7EC0-7EC2,U+7EC4-7EC7,U+7EC9-7ECE,U+7ED0-7ED2,U+7ED4-7EDB,U+7EDD-7EDE,U+7EE0-7EF3,U+7EF5-7F28,U+7F2A-7F50,U+7F52-7F6D,U+7F6F-80FC,U+80FE-81E9,U+81EB-821D,U+821F-85CE,U+85D0-884B,U+884D-8867,U+8869-8980,U+8982-89C0,U+89C2-89C5,U+89C7,U+89CA-89D1,U+89D3-89E2,U+89E4-89FF,U+8A01-8BA0,U+8BA2-8BAC,U+8BAE-8BAF,U+8BB1-8BC5,U+8BC7-8BCC,U+8BCE-8BD4,U+8BD6,U+8BD8-8BDC,U+8BDE-8BE1,U+8BE3-8BEC,U+8BEE,U+8BF0-8BF3,U+8BF5-8C02,U+8C04-8D24,U+8D26-8D6F,U+8D71-8DD0,U+8DD2-8DDE,U+8DE0-8F65,U+8F67-8F6B,U+8F6D,U+8F6F-8F7C,U+8F7E-8F92,U+8F94-8FC6,U+8FC8-8FCF,U+8FD1-8FD8,U+8FDA,U+8FDC-901E,U+9020-90A2,U+90A4-90E7,U+90E9-90FC,U+90FE-91CB,U+91CE-9273,U+9275-9487,U+9489-94FF,U+9501-9518,U+951A-952D,U+952F-95EC,U+95EE-963E,U+9640-964C,U+964E-968E,U+9691-96F5,U+96F7-96FF,U+9701-9761,U+9763-9874,U+9876-9883,U+9885-98DD,U+98DF-9A75,U+9A77-9A7D,U+9A7F-9ED0,U+9ED2-9F4F,U+9F51-FF00,U+FF02-FF07,U+FF0A,U+FF0D-FF19,U+FF1C-FF1E,U+FF20-10FFFF; }

:root {
  --bg: #060d1a;
  --ink: #e9eff9;
  --ink2: #b4bed2;
  --dim: #7a859e;
  --faint: #4b5572;
  --line: rgba(150, 180, 230, .11);
  --line2: rgba(150, 180, 230, .2);
  --line3: rgba(150, 180, 230, .34);
  --panel: rgba(10, 17, 31, .78);
  --panel2: rgba(15, 24, 42, .9);
  --cyan: #5ef0d4;
  --amber: #ffb65c;
  --rose: #ff6b93;
  --blue: #6b9bff;
  --violet: #b39dff;
  --acc: #5ef0d4;
  --r-system: #8fa6d6;
  --r-user: #5ee4f0;
  --r-assistant: #ffb65c;
  --r-tpl: #b39dff;
  /* 一次乘加的四种角色：输入 x / 权重 W / 乘积 / 结果 y（3D 舞台、算式板、讲解面板共用） */
  --c-x: #7cc4ff;
  --c-w: #c9a2ff;
  --c-p: #ffb65c;
  --c-y: #5ef0d4;
  --serif: "BB Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --top: 56px;
  --chat-w: 392px;
  --dbg-w: 340px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}
/* 英文模式：拉丁字体排在中文字体前面（全站统一；否则英文里的弯引号、撇号会落到中文字体上显示成全角） */
:root:lang(en) {
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "DejaVu Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", "Noto Serif", "DejaVu Serif", "BB Serif", "Noto Serif SC", serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
::selection { background: rgba(94, 240, 212, .3); }
.mono { font-family: var(--mono); }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

#bg { position: fixed; inset: 0; z-index: 0; }
.grain { position: fixed; inset: -50%; z-index: 1; pointer-events: none; opacity: .05; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation: grain 1.2s steps(4) infinite; }
@keyframes grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* ---------------- 顶栏 ---------------- */

.topbar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--top); display: flex; align-items: center; gap: 18px; padding: 0 18px; border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, rgba(5, 10, 20, .88), rgba(5, 10, 20, .6)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; flex: none; }
.brand-cube { position: relative; width: 20px; height: 20px; transform-style: preserve-3d; animation: spin 14s linear infinite; }
.brand-cube i { position: absolute; inset: 3px; border: 1.5px solid var(--acc); border-radius: 3px; opacity: .8; }
.brand-cube i:nth-child(2) { transform: rotateY(60deg); opacity: .5; }
.brand-cube i:nth-child(3) { transform: rotateX(60deg); opacity: .35; }
@keyframes spin { to { transform: rotateY(360deg) rotateX(360deg); } }
.brand-en { font-family: var(--mono); font-weight: 700; font-size: 12.5px; letter-spacing: .28em; }
.brand-zh { font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--ink2); padding-left: 12px; border-left: 1px solid var(--line2); }
/* 站点导航：推理 / 训练 / 多模态 / 智能体（四个页面共用） */
.site-nav { display: flex; align-items: center; gap: 2px; flex: none; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.site-nav a { padding: 4px 11px; border-radius: 999px; color: var(--dim); text-decoration: none; font-size: 13px; transition: color .2s, background .2s; }
.site-nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.site-nav a[aria-current="page"] { color: #04121a; background: var(--acc); font-weight: 600; }
body.mode-inspect .site-nav { display: none; }
/* 中 / EN 切换（js/i18n.js 的 mountLangSwitch） */
.lang-switch { display: inline-flex; flex: none; padding: 2px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .02); }
.lang-switch button { border: 0; background: none; padding: 0 8px; height: 28px; border-radius: 999px; color: var(--dim); font: 600 11.5px/1 var(--mono); cursor: pointer; transition: color .2s, background .2s; }
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { color: #04121a; background: var(--acc); }
.lang-switch { align-items: center; }
.lang-switch .ls-globe { flex: none; margin: 0 2px 0 7px; color: var(--dim); }
.lang-switch .ls-short { display: none; }
@media (max-width: 1100px) { .lang-switch .ls-long, .lang-switch .ls-globe { display: none; } .lang-switch .ls-short { display: inline; } }
.crumbs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; overflow: hidden; white-space: nowrap; font-size: 13px; }
.crumbs button { border: 0; background: none; padding: 4px 8px; border-radius: 8px; color: var(--dim); cursor: pointer; transition: color .2s, background .2s; }
.crumbs button:hover { color: var(--ink); background: rgba(255, 255, 255, .05); }
.crumbs button.on { color: var(--ink); font-weight: 600; }
.crumbs button.on .d { color: var(--acc); }
.crumbs .d { font-family: var(--mono); font-size: 10.5px; margin-right: 5px; color: var(--faint); }
.crumbs .sep { color: var(--faint); }
.top-actions { display: flex; gap: 8px; flex: none; }
.gh-btn { padding: 0; width: 34px; text-decoration: none; }
.gh-btn:hover { color: var(--ink); border-color: var(--acc); }
.visits { cursor: default; gap: 5px; color: var(--dim); }
.visits b { font-weight: 400; color: var(--ink2); }
.hud-btn { position: relative; height: 34px; min-width: 34px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); cursor: pointer; font-family: var(--mono); font-size: 12px; color: var(--ink2); transition: border-color .2s, color .2s; }
.hud-btn:hover { border-color: var(--line3); color: var(--ink); }
.codex-btn { color: var(--amber); }
.codex-btn .ring { position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; background: conic-gradient(var(--amber) calc(var(--p, 0) * 360deg), transparent 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
#btnSound { padding: 0; width: 34px; }
#btnSound .wave { display: none; }
#btnSound.on { color: var(--acc); border-color: rgba(94, 240, 212, .5); }
#btnSound.on .wave { display: block; }
#btnSound.on .mute { display: none; }

/* ---------------- 主体布局 ---------------- */

.app { position: fixed; z-index: 5; top: var(--top); left: 0; right: 0; bottom: 0; display: flex; }
.chat { position: relative; z-index: 2; flex: 0 0 100%; max-width: 100%; display: flex; flex-direction: column; transition: flex-basis .8s var(--ease), max-width .8s var(--ease), background .6s; }
.stage { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; background: #050b17; opacity: 0; transition: opacity .7s ease .15s; }
body.mode-inspect .chat { flex-basis: var(--chat-w); max-width: var(--chat-w); background: rgba(6, 11, 22, .82); border-right: 1px solid var(--line2); }
body.mode-inspect .stage { opacity: 1; }
body.mode-chat .stage { pointer-events: none; }

/* ---------------- 聊天 ---------------- */

.chat-head, .chat-log, .composer { width: 100%; max-width: 820px; margin: 0 auto; }
body.mode-inspect .chat-head, body.mode-inspect .chat-log, body.mode-inspect .composer { max-width: none; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; }
.avatar { position: relative; flex: none; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(140deg, #13213a, #050a14); border: 1px solid rgba(94, 240, 212, .55); box-shadow: inset 0 0 14px rgba(94, 240, 212, .2); display: grid; place-items: center; }
.avatar i { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 10px var(--acc); animation: breathe 3s ease-in-out infinite; }
.avatar.busy i { animation: breathe .6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(.6); opacity: .6; } }
.chat-title { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.chat-title b { font-size: 15px; }
.chat-title span { font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-close { display: none; margin-left: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line2); background: none; color: var(--ink2); cursor: pointer; }
.chat-log { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 20px 20px; display: flex; flex-direction: column; gap: 18px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.msg { animation: msgin .5s var(--ease); }
@keyframes msgin { from { opacity: 0; transform: translateY(10px); } }
.msg.user { align-self: flex-end; max-width: 88%; }
.msg.user .bubble { padding: 9px 12px; border-radius: 16px 16px 4px 16px; background: rgba(94, 228, 240, .1); border: 1px solid rgba(94, 228, 240, .28); display: flex; flex-wrap: wrap; gap: 3px; }
.msg.bot { display: flex; gap: 12px; align-items: flex-start; max-width: 100%; }
.msg.bot .avatar { width: 28px; height: 28px; border-radius: 8px; margin-top: 2px; }
.bot-body { flex: 1; min-width: 0; }
.bot-text { font-size: 15.5px; line-height: 1.8; color: var(--ink); word-break: break-word; }
.bot-text .rt { transition: background .3s, color .3s; border-radius: 3px; }
.bot-text .rt.fresh { animation: fresh .6s ease-out; }
@keyframes fresh { from { color: var(--amber); text-shadow: 0 0 12px var(--amber); } }
.msg.inspected .bot-text .rt { box-shadow: inset 0 -1px 0 rgba(255, 182, 92, .25); }
.msg.inspected .bot-text .rt.cur { background: rgba(255, 182, 92, .22); color: #fff; }
.bot-text .pending { color: var(--faint); }
.bot-text .caret { display: inline-block; width: 7px; height: 1.05em; vertical-align: -.16em; margin-left: 2px; background: var(--amber); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typing { display: inline-flex; gap: 4px; padding: 8px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--dim); animation: typing 1s ease-in-out infinite; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { transform: translateY(-4px); background: var(--acc); } }
.bot-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.bot-meta .stat { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.peek { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 8px; border-radius: 999px; border: 1px solid rgba(94, 240, 212, .45); background: rgba(94, 240, 212, .08); color: var(--acc); cursor: pointer; font-size: 13px; transition: background .2s, box-shadow .2s, transform .2s var(--ease); }
.peek:hover { background: rgba(94, 240, 212, .16); box-shadow: 0 0 20px rgba(94, 240, 212, .25); transform: translateY(-1px); }
.peek b { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--acc); color: #04121a; font-weight: 900; font-size: 14px; line-height: 1; }
.msg.inspected .peek { background: var(--acc); color: #04121a; }
.msg.inspected .peek b { background: #04121a; color: var(--acc); }
.intro-card { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line2); background: linear-gradient(135deg, rgba(94, 240, 212, .06), rgba(10, 17, 31, .6)); font-size: 14px; color: var(--ink2); line-height: 1.75; }
.intro-card h1 { margin: 0 0 6px; font-family: var(--serif); font-weight: 900; font-size: 26px; letter-spacing: .04em; color: var(--ink); }
.intro-card b { color: var(--ink); }
.intro-card .key { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--acc); color: #04121a; font-weight: 900; font-size: 14px; vertical-align: -3px; }
.intro-card .spec { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--dim); }
.intro-card .spec b { color: var(--ink2); font-weight: 400; }

/* 词元小块 */
.tok { --h: 180; display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 6px; background: hsla(var(--h), 70%, 60%, .13); border: 1px solid hsla(var(--h), 75%, 66%, .38); color: hsl(var(--h), 85%, 86%); font-family: var(--sans); font-size: 14px; line-height: 1.4; white-space: pre; }
.tok .ws { font-style: normal; opacity: .45; font-size: .8em; font-family: var(--mono); }
.tok.sp { font-family: var(--mono); font-size: 11px; --h: 260; }
.tok.r-user { --h: 186; }
.tok.r-assistant { --h: 34; }
.tok.r-system { --h: 222; }

/* ---------------- 输入法 ---------------- */

.composer { padding: 10px 20px 16px; border-top: 1px solid var(--line); background: linear-gradient(to top, rgba(6, 11, 22, .95), rgba(6, 11, 22, .6)); }
.cmp-row { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 18px; border: 1px solid var(--line2); background: rgba(8, 14, 28, .85); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
.cmp-plus { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(94, 240, 212, .5); background: rgba(94, 240, 212, .1); color: var(--acc); font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .2s, box-shadow .2s, opacity .2s; }
.cmp-plus:not(:disabled):hover { background: rgba(94, 240, 212, .2); box-shadow: 0 0 20px rgba(94, 240, 212, .3); }
.cmp-plus:disabled { opacity: .3; cursor: default; }
.cmp-plus.glow { animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(94, 240, 212, .5); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }
.cmp-input { flex: 1; min-width: 0; min-height: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 6px; font-size: 15px; }
.cmp-input .ph { color: var(--faint); font-size: 14px; padding-left: 4px; }
.cmp-input .tok { animation: popin .35s var(--ease); }
@keyframes popin { 0% { transform: translateY(-14px) scale(.6); opacity: 0; } 60% { transform: translateY(2px) scale(1.06); } }
.cmp-input .cur { display: inline-block; width: 2px; height: 20px; background: var(--acc); animation: blink 1s steps(1) infinite; }
.cmp-icon { flex: none; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line2); background: none; color: var(--ink2); cursor: pointer; font-size: 15px; }
.cmp-icon:hover { color: var(--ink); border-color: var(--line3); }
.cmp-send { flex: none; width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--acc); color: #04121a; font-size: 19px; font-weight: 900; cursor: pointer; transition: opacity .2s, transform .2s var(--ease), box-shadow .2s; box-shadow: 0 0 20px rgba(94, 240, 212, .35); }
.cmp-send:disabled { opacity: .2; box-shadow: none; cursor: default; }
.cmp-send:not(:disabled):hover { transform: translateY(-1px); }
.cmp-cands { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 2px 0; min-height: 46px; max-height: min(38vh, 320px); overflow-y: auto; scrollbar-width: thin; }
.cmp-cands .lab { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--faint); margin-right: 4px; }
.cand { display: inline-flex; align-items: baseline; gap: 5px; height: 32px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); color: var(--ink); font-size: 14.5px; cursor: pointer; transition: background .2s, border-color .2s, transform .2s var(--ease); animation: candin .35s var(--ease) backwards; }
.cand:hover { background: rgba(94, 240, 212, .1); border-color: rgba(94, 240, 212, .5); transform: translateY(-2px); }
.cand i { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--faint); }
.cand.done { border-color: rgba(94, 240, 212, .6); color: var(--acc); }
@keyframes candin { from { opacity: 0; transform: translateY(6px); } }
.cand-more { margin-left: auto; border: 0; background: none; color: var(--dim); font-size: 12.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.qlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; width: 100%; padding-top: 4px; }
.qlist button { text-align: left; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); color: var(--ink2); font-size: 13.5px; cursor: pointer; }
.qlist button:hover { color: var(--ink); border-color: rgba(94, 240, 212, .45); }

/* ---------------- 舞台 ---------------- */

.gl { position: absolute; inset: 0; }
.gl canvas { display: block; width: 100%; height: 100%; outline: none; }
.gl.grab { cursor: grab; }
.gl.grabbing { cursor: grabbing; }
.css2d { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }   /* z-index 让标签层自成一层：CSS2DRenderer 给每个标签设的排序 z-index 不会再压过调试器 / 算式板 */
.stage-top { position: absolute; top: 12px; left: 14px; right: calc(var(--dbg-w) + 28px); display: flex; justify-content: flex-start; pointer-events: none; }
.stage-strip { display: none; }
.stage-top { gap: 8px; align-items: flex-start; }
.follow, .hint-btn { pointer-events: auto; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink2); font-size: 12.5px; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: border-color .2s, color .2s; }
.follow { border-color: rgba(255, 182, 92, .6); color: var(--amber); animation: toastin .5s var(--ease); }
.follow:hover, .hint-btn:hover { color: var(--ink); border-color: var(--line3); }
kbd { display: inline-block; min-width: 18px; padding: 0 5px; margin: 0 2px; border-radius: 5px; border: 1px solid var(--line3); border-bottom-width: 2px; font-family: var(--mono); font-size: 10.5px; line-height: 17px; text-align: center; color: var(--ink); background: rgba(255, 255, 255, .04); }
.stage-hint { position: absolute; z-index: 6; left: 50%; top: 56px; transform: translate(calc(-50% - var(--dbg-w) / 2), -8px); width: min(560px, calc(100% - var(--dbg-w) - 60px)); display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 12px 16px; border-radius: 14px; background: rgba(8, 14, 28, .92); border: 1px solid var(--line2); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); font-size: 12.5px; color: var(--ink2); opacity: 0; pointer-events: none; transition: opacity .35s, transform .45s var(--ease); }
.stage-hint.on { opacity: 1; transform: translate(calc(-50% - var(--dbg-w) / 2), 0); }
.stage-hint b { width: 100%; font-family: var(--serif); font-weight: 600; font-size: 14px; color: var(--ink); }
.stage-hint .sep { width: 100%; height: 0; }
.stage-loading { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--ink2); font-size: 14px; background: rgba(5, 11, 23, .7); z-index: 5; }
.spin { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line2); border-top-color: var(--acc); animation: rot .8s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }

/* 注意力头选择 */
.heads { position: absolute; left: 14px; top: 14px; z-index: 4; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.heads .eyebrow { display: block; margin-bottom: 8px; }
.heads-grid { display: grid; grid-template-columns: repeat(8, auto); gap: 6px 4px; }
.hgrp { display: flex; flex-direction: column; gap: 3px; padding: 3px; border-radius: 8px; border: 1px dashed transparent; }
.hgrp:hover { border-color: var(--line2); }
.hgrp span { font-family: var(--mono); font-size: 9px; color: var(--faint); text-align: center; }
.hbtn { width: 32px; height: 24px; border-radius: 6px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); font-family: var(--mono); font-size: 10.5px; color: var(--ink2); cursor: pointer; position: relative; overflow: hidden; }
.hbtn i { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--acc); opacity: .7; }
.hbtn.on { border-color: var(--acc); color: var(--acc); background: rgba(94, 240, 212, .12); }
.heads .avg { margin-top: 8px; width: 100%; height: 26px; border-radius: 8px; border: 1px solid var(--line2); background: none; color: var(--ink2); font-size: 12px; cursor: pointer; }
.heads .avg.on { border-color: var(--acc); color: var(--acc); }

/* 调试器 */
.dbg { position: absolute; z-index: 4; top: 14px; right: 14px; bottom: 124px; width: var(--dbg-w); display: flex; flex-direction: column; border-radius: 16px; background: var(--panel); border: 1px solid var(--line2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0, 0, 0, .4); overflow: hidden; transition: bottom .5s var(--ease); }
.dbg.folded { bottom: auto; }
.dbg.folded .dbg-body { display: none; }
.dbg-h { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.dbg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 8px var(--rose); }
.dbg-sub { font-size: 11px; color: var(--dim); }
.dbg-fold { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line2); background: none; color: var(--ink2); cursor: pointer; }
.dbg-body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.code { margin: 0; padding: 10px 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.75; color: var(--dim); border-bottom: 1px solid var(--line); overflow-x: auto; }
.code .ln { display: block; padding: 0 12px 0 0; white-space: pre; position: relative; transition: background .25s, color .25s; }
.code .ln .no { display: inline-block; width: 30px; text-align: right; margin-right: 10px; color: var(--faint); user-select: none; }
.code .ln .bp { position: absolute; left: 3px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; }
.code .ln.cur { background: rgba(255, 182, 92, .13); color: var(--ink); }
.code .ln.cur .no { color: var(--amber); }
.code .ln.cur .bp { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.code .ln.cur::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--amber); }
.code .kw { color: #c792ea; }
.code .fn { color: #82aaff; }
.code .cm { color: #56627e; font-style: italic; }
.code .nu { color: #f78c6c; }
.dbg-explain { padding: 12px 14px; font-size: 13.5px; line-height: 1.75; color: var(--ink2); border-bottom: 1px solid var(--line); }
.dbg-explain b { color: var(--ink); }
.dbg-explain .shape { margin: 4px 0 8px; padding: 7px 9px; border-radius: 8px; background: rgba(94, 240, 212, .06); border: 1px solid rgba(94, 240, 212, .2); font-family: var(--mono); font-size: 11px; line-height: 1.75; color: var(--ink2); }
.dbg-explain .shape b { color: var(--cyan); font-weight: 400; }
.dbg-explain .dimmed { color: var(--dim); }
.lbl small { font-family: var(--mono); color: var(--dim); font-size: 10px; margin-left: 4px; }
.dbg-explain em { font-style: normal; color: var(--amber); }
.dbg-explain .tok { font-size: 12.5px; padding: 0 5px; }
.dbg-watch { padding: 10px 14px 14px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-family: var(--mono); font-size: 11.5px; }
.dbg-watch .k { color: var(--dim); }
.dbg-watch .v { color: var(--cyan); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbg-watch .wh { grid-column: 1 / -1; font-size: 10px; letter-spacing: .14em; color: var(--faint); margin-bottom: 2px; }

/* 控制条 */
.ctl { position: absolute; z-index: 4; left: 14px; right: calc(var(--dbg-w) + 28px); bottom: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.ctl > * { pointer-events: auto; }
.ctl-track { display: flex; gap: 2px; align-items: flex-end; max-width: 100%; height: 14px; overflow: hidden; padding: 0 4px; }
.ctl-track i { flex: none; width: 5px; height: 6px; border-radius: 2px; background: var(--line3); cursor: pointer; transition: height .2s, background .2s; }
.ctl-track i.done { background: rgba(94, 240, 212, .45); }
.ctl-track i.cur { height: 14px; background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.ctl-track i:hover { height: 12px; }
.ctl-bar { display: flex; align-items: center; gap: 14px; padding: 7px 10px; border-radius: 18px; background: var(--panel2); border: 1px solid var(--line2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); max-width: 100%; }
.ctl-depth, .ctl-play, .ctl-speed { display: flex; align-items: center; gap: 4px; }
.ctl-depth { padding-right: 12px; border-right: 1px solid var(--line); }
.ctl-play { padding-right: 12px; border-right: 1px solid var(--line); }
.ctl-dname { min-width: 88px; text-align: center; font-size: 12.5px; color: var(--ink); line-height: 1.2; }
.ctl-dname small { display: block; font-family: var(--mono); font-size: 9.5px; color: var(--dim); letter-spacing: .1em; }
.ctl-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); color: var(--ink); cursor: pointer; font-size: 14px; display: grid; place-items: center; transition: background .2s, border-color .2s, opacity .2s; }
.ctl-btn:hover:not(:disabled) { border-color: var(--line3); background: rgba(255, 255, 255, .07); }
.ctl-btn:disabled { opacity: .25; cursor: default; }
.ctl-btn.plus { border-color: rgba(94, 240, 212, .55); color: var(--acc); font-weight: 900; font-size: 18px; }
.ctl-btn.plus:not(:disabled) { animation: pulse 2.4s ease-out infinite; }
.ctl-btn.big { width: 42px; height: 42px; border-radius: 50%; background: var(--acc); border: 0; color: #04121a; font-size: 15px; box-shadow: 0 0 20px rgba(94, 240, 212, .35); }
.ctl-btn.big:hover:not(:disabled) { background: #8af5e1; }
.ctl-speed button { height: 28px; min-width: 38px; padding: 0 6px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--dim); font-family: var(--mono); font-size: 11.5px; cursor: pointer; }
.ctl-speed button:hover { color: var(--ink); }
.ctl-speed button.on { color: var(--acc); border-color: rgba(94, 240, 212, .45); background: rgba(94, 240, 212, .08); }
.ctl-pos { font-size: 11px; color: var(--dim); line-height: 1.35; min-width: 96px; }
.ctl-pos b { color: var(--ink); font-weight: 400; }

/* ---------------- 3D 标签（CSS2D） ---------------- */

.lbl { pointer-events: none; font-family: var(--sans); font-size: 11.5px; color: var(--ink2); white-space: nowrap; padding: 2px 8px; border-radius: 6px; background: rgba(6, 12, 24, .72); border: 1px solid var(--line2); transition: opacity .4s; }
.lbl.part { font-size: 11px; color: var(--ink); border-color: rgba(94, 240, 212, .35); }
.lbl.part small { font-family: var(--mono); color: var(--dim); font-size: 10px; margin-left: 4px; }
.lbl.lens { font-size: 11px; display: flex; align-items: center; gap: 6px; border-color: rgba(255, 182, 92, .3); }
.lbl.lens .l { font-family: var(--mono); color: var(--dim); font-size: 10px; }
.lbl.lens .p { font-family: var(--mono); color: var(--amber); font-size: 10.5px; }
.lbl.lens.on { border-color: var(--amber); box-shadow: 0 0 14px rgba(255, 182, 92, .3); }
.lbl.bar { text-align: center; padding: 3px 7px; }
.lbl.bar .t { display: block; font-size: 13px; color: var(--ink); }
.lbl.bar .p { display: block; font-family: var(--mono); font-size: 10px; color: var(--amber); }
.lbl.bar.win { border-color: var(--amber); box-shadow: 0 0 16px rgba(255, 182, 92, .45); }
.lbl.bar.cut { opacity: .35; }
.lbl.num { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; color: var(--ink); }
.lbl.num.pos { color: var(--amber); border-color: rgba(255, 182, 92, .35); }
.lbl.num.neg { color: var(--blue); border-color: rgba(107, 155, 255, .35); }
.lbl.big { font-family: var(--mono); font-size: 16px; padding: 4px 10px; color: #fff; border-color: rgba(255, 182, 92, .5); }
.lbl.title { font-family: var(--serif); font-weight: 600; font-size: 14px; color: var(--ink); background: none; border: 0; text-shadow: 0 2px 10px #000; }
.lbl.hint { font-size: 11px; color: var(--dim); background: none; border: 0; text-shadow: 0 1px 6px #000; }
.lbl.hide { opacity: 0 !important; }
.lbl.tag { font-size: 11.5px; padding: 2px 8px; color: var(--ink); }
.lbl.tag.x { border-color: rgba(124, 196, 255, .55); }
.lbl.tag.w { border-color: rgba(201, 162, 255, .55); }
.lbl.tag.p { border-color: rgba(255, 182, 92, .55); }
.lbl.tag.y { border-color: rgba(94, 240, 212, .6); font-family: var(--mono); color: var(--c-y); }
.lbl.tag.s { border-color: rgba(255, 107, 147, .55); color: #ff8fab; }
.lbl.tag.e { border-color: rgba(255, 182, 92, .55); color: var(--amber); }
.lbl.tag.m { border-color: rgba(94, 240, 212, .55); color: var(--cyan); }

/* 角色颜色：和 3D 舞台里的颜色一一对应 */
.cx { color: var(--c-x); }
.cw { color: var(--c-w); }
.cp { color: var(--c-p); }
.cy { color: var(--c-y); }

/* ---------------- 算式板（一次乘加 / 比特） ---------------- */

.board { position: absolute; z-index: 4; left: 14px; right: calc(var(--dbg-w) + 28px); bottom: 104px; max-height: min(470px, calc(100% - 290px)); display: flex; flex-direction: column; border-radius: 16px; background: rgba(8, 13, 25, .9); border: 1px solid var(--line2); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); container-type: inline-size; overflow: hidden; font-size: 13px; line-height: 1.55; color: var(--ink2); animation: boardin .5s var(--ease); }
@keyframes boardin { from { opacity: 0; transform: translateY(14px); } }
.dbg.folded ~ .board { right: 14px; }
.board.folded .bd-scroll { display: none; }
.board .dim { color: var(--dim); font-size: 12px; }
.bd-wait { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; }
.bd-wait .spin { width: 16px; height: 16px; border-width: 2px; }
.bd-h { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.bd-where { min-width: 0; flex: 0 1 auto; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 英文标题比中文长：放不下时折成两行，不截断 */
:root:lang(en) .bd-where { white-space: normal; line-height: 1.3; }
.bd-steps { display: flex; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; flex: none; }
.bd-steps li { display: flex; align-items: center; gap: 5px; padding: 2px 9px 2px 3px; border-radius: 999px; border: 1px solid var(--line2); font-size: 11.5px; color: var(--dim); white-space: nowrap; transition: background .3s, color .3s, border-color .3s; }
.bd-steps li b { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: 10px; background: rgba(255, 255, 255, .06); }
.bd-steps li.done { color: var(--ink2); }
.bd-steps li.done b { background: rgba(94, 240, 212, .2); color: var(--acc); }
.bd-steps li.on { color: #1d1306; background: var(--amber); border-color: var(--amber); font-weight: 600; }
.bd-steps li.on b { background: rgba(0, 0, 0, .18); color: #1d1306; }
.bd-fold { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--line2); background: none; color: var(--ink2); cursor: pointer; }
.bd-scroll { min-height: 0; overflow-y: auto; padding: 10px 14px 12px; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
.bd-cap { margin: 0 0 10px; font-size: 14px; line-height: 1.65; color: var(--ink); }
.bd-cap b { font-weight: 600; }
.bd-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 20px; }
@container (min-width: 600px) { .bd-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.bd-fx { margin-bottom: 6px; font-family: var(--mono); font-size: 17px; line-height: 1.45; color: var(--ink); }
.bd-fx .op { font-size: 21px; margin-left: 2px; }
.bd-fx .lim { font-size: 10px; color: var(--dim); margin-right: 4px; }
.bd-fx small { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--dim); }

.bd-tbl { font-family: var(--mono); font-size: 12.5px; line-height: 1.42; }
.bd-tr { display: grid; grid-template-columns: 3.4em minmax(4.6em, 1fr) .9em minmax(5em, 1fr) .9em minmax(4.6em, 1fr) minmax(34px, .8fr); align-items: center; gap: 0 4px; padding: 0 6px; border-radius: 6px; cursor: pointer; transition: background .2s; }
.bd-tr > span { text-align: right; white-space: nowrap; }
.bd-tr .i { color: var(--faint); }
.bd-tr .o { color: var(--faint); text-align: center; }
.bd-tr:not(.bd-th):hover { background: rgba(255, 255, 255, .05); }
.bd-th { cursor: default; font-size: 10.5px; color: var(--dim); }
.bd-th .cx, .bd-th .cw, .bd-th .cp { opacity: .85; }
.bd-tr .cp, .bd-tr .bar { transition: opacity .25s; }
.bd-tr.pend .cp, .bd-tr.pend .bar { opacity: 0; }
.bd-tr.pend .cx, .bd-tr.pend .cw { opacity: .7; }
.bd-tr.cur { background: rgba(255, 182, 92, .14); }
.bd-tr.cur .cx, .bd-tr.cur .cw { opacity: 1; font-weight: 700; }
.bd-tr.sel { border-radius: 0 6px 6px 0; box-shadow: inset 3px 0 0 var(--c-w); }
.bd-rest { margin-top: 2px; border-top: 1px dashed var(--line2); border-radius: 0 0 6px 6px; padding-top: 2px; }
.bd-rest .rest-t { grid-column: 2 / 6; text-align: left; font-family: var(--sans); color: var(--ink2); }
.bd-rest .rest-t small { margin-left: 6px; font-size: 11px; color: var(--dim); }
.bd-rest:not(.done) .cp, .bd-rest:not(.done) .bar { opacity: 0; }
.bd-tr .bar { position: relative; height: 8px; }
.bd-tr .bar::before { content: ""; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line2); }
.bd-tr .bar i { position: absolute; top: 0; bottom: 0; border-radius: 2px; background: var(--c-p); }
.bd-tr .bar i.pos { left: 50%; }
.bd-tr .bar i.neg { right: 50%; opacity: .7; }

.bd-acc { padding: 9px 12px 10px; border-radius: 12px; border: 1px solid rgba(255, 182, 92, .3); background: rgba(255, 182, 92, .05); transition: border-color .4s, background .4s; }
.bd-acc.final { border-color: rgba(94, 240, 212, .55); background: rgba(94, 240, 212, .06); }
.bd-acc-k { font-size: 11.5px; color: var(--dim); }
.bd-acc-v { font-family: var(--mono); font-size: 20px; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; }
.bd-acc-v .eq { color: var(--dim); }
.bd-acc-v b { display: inline-block; font-weight: 700; }
.bd-acc.final .bd-acc-v b { color: var(--c-y); }
.bd-meter { position: relative; height: 6px; margin-top: 6px; border-radius: 3px; background: rgba(255, 255, 255, .06); }
.bd-meter .zero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--line3); }
.bd-meter b { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; border-radius: 3px; background: var(--c-p); transition: left .2s, width .2s, background .4s; }
.bd-acc.final .bd-meter b { background: var(--c-y); }
.bd-pn { display: none; grid-template-columns: 1fr 1fr; gap: 2px 10px; margin-top: 8px; font-size: 11.5px; color: var(--dim); }
.bd-pn.on { display: grid; animation: boardin .4s var(--ease); }
.bd-pn b { font-family: var(--mono); font-weight: 400; }
.bd-pn-bar { grid-column: 1 / -1; display: flex; gap: 2px; height: 6px; }
.bd-pn-bar i { border-radius: 2px; background: var(--c-p); }
.bd-pn-bar i.neg { opacity: .55; }
.bd-pn em { grid-column: 1 / -1; font-style: normal; }
.bd-chart { margin: 8px 0 0; }
.bd-chart svg { display: block; overflow: visible; }
.bd-chart figcaption, .bd-silu figcaption { font-size: 10.5px; line-height: 1.45; color: var(--dim); }
.ch-zero { stroke: var(--line3); stroke-width: 1; }
.ch-total { stroke: var(--c-y); stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; }
.ch-r { stroke: var(--c-w); stroke-width: 1; stroke-dasharray: 2 3; opacity: .8; }
.ch-line { fill: none; stroke: var(--c-p); stroke-width: 2; stroke-linejoin: round; }
.ch-dash { stroke: var(--c-p); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .7; }
.ch-end { fill: var(--c-y); }
.bd-dest { margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line2); opacity: .32; transition: opacity .4s; }
.bd-dest.on { opacity: 1; }
.bd-dest-h { font-size: 12.5px; color: var(--ink); }
.bd-dest p { margin: 4px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink2); }
.bd-big { font-family: var(--mono); font-size: 15px; color: var(--ink); opacity: .25; transition: opacity .4s; }
.bd-big.on { opacity: 1; }
.bd-vec { position: relative; height: 12px; margin: 6px 0 2px; }
.bd-vec .segs { display: flex; gap: 2px; height: 100%; }
.bd-vec .segs i { flex: 1; border-radius: 2px; background: rgba(94, 240, 212, .1); }
.bd-vec .segs i.hot { background: rgba(94, 240, 212, .32); }
.bd-vec b { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--c-y); box-shadow: 0 0 8px var(--c-y); }
.bd-fly { position: absolute; z-index: 3; pointer-events: none; font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--c-p); text-shadow: 0 0 10px rgba(255, 182, 92, .7); }

.bd-rope { display: none; }
.bd-rope.on { display: block; animation: boardin .4s var(--ease); }
.board .gone { display: none !important; }
.bd-rp { margin-bottom: 10px; font-size: 12.5px; line-height: 1.65; }
.bd-rp b { display: block; color: var(--ink); }
.board code { display: block; margin-top: 3px; font-family: var(--mono); font-size: 13px; color: var(--ink); white-space: normal; }
.bd-rp small { display: block; color: var(--dim); font-size: 11.5px; }
.bd-rp2 { display: flex; gap: 12px; align-items: flex-start; }
.bd-dial { flex: none; }
.bd-dial text, .bd-silu text { fill: var(--dim); font-size: 8.5px; font-family: var(--sans); }
.dl-before { stroke: var(--dim); stroke-width: 2; stroke-dasharray: 3 3; }
.dl-after { stroke: var(--c-y); stroke-width: 2.5; }
.dl-dot { fill: var(--c-y); }

.bd-ins { display: grid; gap: 6px; margin-bottom: 8px; font-family: var(--mono); font-size: 15px; color: var(--ink); }
.bd-ins small { display: block; font-family: var(--sans); font-size: 11.5px; color: var(--dim); }
.bd-silu { margin: 0; }
.bd-silu svg { display: block; max-width: 320px; }
.ch-silu { fill: none; stroke: var(--c-x); stroke-width: 2; }
.ch-ball { fill: #fff; }
.bd-silu .guide line { stroke: var(--dim); stroke-dasharray: 3 3; }
.bd-silu .guide { opacity: 0; transition: opacity .4s; }
.bd-silu .guide.on { opacity: 1; }
.bd-eqs > div { margin-bottom: 10px; opacity: .28; transition: opacity .4s; }
.bd-eqs > div.on { opacity: 1; }
.bd-eqs small { display: block; font-size: 11.5px; color: var(--dim); }
.bd-eqs code { font-size: 14px; }

.board .s { color: #ff8fab; }
.board .e { color: var(--amber); }
.board .m { color: var(--cyan); }
.bd-bitrow { margin-bottom: 4px; }
.bd-bits { --bw: 26px; display: flex; gap: 10px; }
.bd-bits .g { display: flex; gap: 3px; }
.board .bd-bit { width: var(--bw); height: calc(var(--bw) * 1.25); padding: 0; border-radius: 6px; border: 1px solid; background: rgba(255, 255, 255, .03); font-family: var(--mono); font-size: 14px; color: var(--dim); cursor: pointer; transition: background .2s, color .2s, transform .15s; }
.board .bd-bit:hover { transform: translateY(-2px); }
.board .bd-bit.s { border-color: rgba(255, 107, 147, .5); }
.board .bd-bit.e { border-color: rgba(255, 182, 92, .5); }
.board .bd-bit.m { border-color: rgba(94, 240, 212, .45); }
.board .bd-bit.one { color: #fff; }
.board .bd-bit.s.one { background: rgba(255, 107, 147, .3); }
.board .bd-bit.e.one { background: rgba(255, 182, 92, .3); }
.board .bd-bit.m.one { background: rgba(94, 240, 212, .25); }
.board .bd-bit.flip { outline: 2px solid #fff; outline-offset: 1px; }
.bd-bitk { --bw: 26px; display: flex; gap: 10px; margin-top: 3px; font-size: 11px; }
.bd-bitk span { flex: none; text-align: center; white-space: nowrap; }
.bd-bitk .s { width: var(--bw); }
.bd-bitk .e { width: calc(var(--bw) * 8 + 21px); }
.bd-bitk .m { width: calc(var(--bw) * 7 + 18px); }
@container (max-width: 470px) { .bd-bits, .bd-bitk { --bw: 18px; } .bd-bits, .bd-bitk { gap: 6px; } .board .bd-bit { font-size: 12px; } .bd-bitk .e { width: calc(var(--bw) * 8 + 21px); } }
.bd-dec { display: flex; flex-direction: column; gap: 1px; margin: 8px 0 6px; font-family: var(--mono); font-size: 12px; }
.bd-bfx { font-size: 14px; }
.bd-bfx small { display: block; color: var(--dim); }
.bd-eff-h { margin-bottom: 4px; font-size: 11.5px; letter-spacing: .1em; color: var(--dim); }
.bd-ef { display: flex; gap: 0 10px; align-items: baseline; padding: 1px 0; font-family: var(--mono); font-size: 13px; }
.bd-ef .k { flex: none; width: 7.5em; }
.bd-ef .v { display: flex; flex-wrap: wrap; gap: 0 8px; align-items: baseline; min-width: 0; }
.bd-ef .k { font-family: var(--sans); font-size: 12px; color: var(--dim); }
.bd-ef .to { color: var(--faint); }
.bd-ef b { color: #fff; }
.bd-ef small { color: var(--amber); font-size: 11px; }
.bd-eff p { margin: 6px 0 0; font-size: 12px; line-height: 1.6; }
.bd-reset { margin-top: 8px; height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line3); background: none; color: var(--ink2); font-size: 12px; cursor: pointer; }
.bd-reset:hover { color: var(--ink); }
body.has-board.mode-inspect #toasts { top: calc(var(--top) + 60px); bottom: auto; flex-direction: column; }
body.has-board .heads { display: none; }
/* 算式板出现时，知识碎片的提示只留最新的一条，免得挡住舞台 */
body.has-board #toasts .toast:nth-child(n+2) { display: none; }

/* ---------------- 提示、图鉴 ---------------- */

#tooltip { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; max-width: 300px; padding: 10px 12px; border-radius: 10px; background: rgba(10, 16, 30, .95); border: 1px solid var(--line3); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); font-size: 13px; line-height: 1.55; color: var(--ink2); opacity: 0; transition: opacity .15s; }
#tooltip.on { opacity: 1; }
#tooltip b { color: var(--ink); }
#tooltip .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; color: var(--dim); display: block; margin-bottom: 2px; }
#tooltip .v { font-family: var(--mono); color: var(--acc); }
#toasts { position: fixed; z-index: 50; top: calc(var(--top) + 14px); right: 18px; transition: left .5s, right .5s; display: flex; flex-direction: column; gap: 10px; width: min(340px, calc(100vw - 36px)); pointer-events: none; }
body.mode-inspect #toasts { right: auto; top: auto; left: calc(var(--chat-w) + 16px); bottom: 118px; flex-direction: column-reverse; }
@media (max-width: 900px) { body.mode-inspect #toasts { left: 10px; bottom: auto; top: calc(var(--top) + 60px); } }
body.mode-inspect .t-text { display: none; }
body.mode-inspect .toast { padding: 9px 12px; }
.toast { pointer-events: auto; display: flex; gap: 12px; text-align: left; cursor: pointer; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(40, 30, 10, .94), rgba(14, 18, 30, .96)); border: 1px solid rgba(255, 182, 92, .45); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); animation: toastin .7s var(--ease); color: var(--ink); }
.toast.out { animation: toastout .6s ease forwards; }
@keyframes toastin { from { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes toastout { to { opacity: 0; transform: translateX(40px); } }
.t-icon { font-size: 20px; color: var(--amber); text-shadow: 0 0 14px var(--amber); }
.t-body { display: flex; flex-direction: column; gap: 1px; }
.t-k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--amber); }
.t-title { font-family: var(--serif); font-weight: 600; font-size: 16px; }
.t-text { font-size: 12.5px; color: var(--ink2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.codex { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(2, 5, 12, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity .35s; }
.codex.on { opacity: 1; pointer-events: auto; }
.cx-panel { width: min(1040px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; background: rgba(9, 14, 27, .97); border: 1px solid var(--line2); border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); overflow: hidden; }
.cx-head { display: flex; align-items: center; gap: 24px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.cx-head h2 { margin: 4px 0 0; font-family: var(--serif); font-weight: 900; font-size: 26px; letter-spacing: .04em; }
.cx-progress { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-family: var(--mono); color: var(--amber); }
.cx-bar { width: 160px; height: 4px; border-radius: 4px; background: var(--line2); overflow: hidden; }
.cx-bar i { display: block; height: 100%; background: var(--amber); box-shadow: 0 0 10px var(--amber); transition: width .8s var(--ease); }
.cx-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: none; cursor: pointer; color: var(--ink2); }
.cx-grid { overflow-y: auto; padding: 18px 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cx-card { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.cx-card h4 { margin: 0 0 4px; font-size: 14.5px; font-family: var(--serif); font-weight: 600; }
.cx-card p { margin: 0; font-size: 13px; color: var(--ink2); line-height: 1.6; }
.cx-card .where { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--dim); margin-bottom: 4px; }
.cx-card.found { border-color: rgba(255, 182, 92, .3); background: linear-gradient(135deg, rgba(255, 182, 92, .07), transparent 60%); }
.cx-card.found h4 { color: #ffd9a6; }
.cx-card.locked h4 { color: var(--faint); letter-spacing: .2em; }
.cx-foot { display: flex; align-items: center; gap: 20px; padding: 14px 24px; border-top: 1px solid var(--line); }
.cx-foot p { margin: 0; flex: 1; font-size: 12px; color: var(--dim); }
.linkish { background: none; border: 0; color: var(--dim); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 13px; }
.noscript { position: fixed; inset: 0; display: grid; place-items: center; z-index: 100; }

/* ---------------- 窄屏 ---------------- */

@media (max-width: 1180px) {
  :root { --dbg-w: 300px; --chat-w: 340px; }
}
@media (max-width: 900px) {
  :root { --top: 52px; }
  .brand-zh { display: none; }
  .site-nav a { padding: 3px 8px; font-size: 12px; }
  .crumbs { font-size: 12px; }
  .crumbs button { padding: 4px 5px; }
  body.mode-inspect .chat { position: absolute; inset: 0; max-width: none; flex-basis: auto; transform: translateX(-100%); transition: transform .5s var(--ease); z-index: 10; }
  body.mode-inspect.chat-open .chat { transform: none; }
  body.mode-inspect .chat-close { display: grid; place-items: center; }
  .stage { position: absolute; inset: 0; }
  .stage-top { right: 14px; flex-wrap: wrap; }
  .hint-btn { display: none; }
  .stage-hint { transform: translate(-50%, -8px); width: calc(100% - 24px); top: 110px; }
  .stage-hint.on { transform: translate(-50%, 0); }
  .stage-strip { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; max-height: 3.6em; overflow: hidden; padding: 6px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line2); font-size: 13px; pointer-events: auto; cursor: pointer; }
  .dbg { top: auto; left: 10px; right: 10px; width: auto; bottom: 128px; max-height: 42vh; }
  .dbg.folded { bottom: 128px; }
  .ctl { left: 8px; right: 8px; bottom: 8px; }
  .ctl-bar { flex-wrap: wrap; justify-content: center; gap: 6px 10px; padding: 7px; }
  .ctl-depth, .ctl-play { padding-right: 8px; }
  .ctl-speed button { min-width: 32px; padding: 0 3px; }
  .ctl-pos { display: none; }
  .heads { top: auto; bottom: 200px; left: 10px; transform: scale(.85); transform-origin: left bottom; }
  .board { top: 64px; bottom: auto; left: 8px; right: 8px; max-height: min(36vh, 330px); border-radius: 14px; }
  .dbg.folded ~ .board { right: 8px; }
  .bd-h { flex-wrap: wrap; row-gap: 6px; padding: 7px 8px 7px 12px; }
  .bd-where { flex: 1 1 0; }
  .bd-steps { order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .bd-steps li { font-size: 10.5px; }
  .bd-scroll { padding: 8px 10px 10px; }
  .bd-cap { font-size: 13px; line-height: 1.55; margin-bottom: 6px; }
  /* 手机上先看累加器和结果落点，清单在下面，往下滑 */
  .bd-body { display: flex; flex-direction: column; gap: 8px; }
  .bd-side { order: -1; }
  .bd-bits-body .bd-side { order: 0; }
  .bd-acc { padding: 6px 10px 7px; }
  .bd-acc-k { font-size: 11px; }
  .bd-dest { margin-top: 6px; padding-top: 6px; }
  .bd-fx small { display: none; }
  .bd-tbl { font-size: 12px; }
  .bd-tr { grid-template-columns: 2.9em minmax(4.2em, 1fr) .8em minmax(4.6em, 1fr) .8em minmax(4.2em, 1fr) 24px; padding: 0 2px; }
  .bd-silu svg { height: 84px; }
  .bd-chart { display: none; }
  .bd-fx { font-size: 15px; }
  .bd-acc-v { font-size: 18px; }
  .chat-log { padding: 8px 14px 16px; }
  .composer { padding: 8px 12px 12px; }
}

@media (max-width: 560px) {
  .brand-en { display: none; }
  .brand { gap: 0; }
  .topbar { gap: 8px; padding: 0 10px; }
  .site-nav a { padding: 3px 7px; }
  .top-actions { gap: 5px; }
  .top-actions .hud-btn { height: 30px; min-width: 30px; padding: 0 8px; }
  .top-actions .gh-btn { width: 30px; padding: 0; }
  .visits svg { display: none; }
  .codex-btn { width: 30px; padding: 0; }
  .codex-btn #codexCount { display: none; }
  body.mode-chat .crumbs { display: none; }
}
/* 五个页面的导航：窄屏上收紧链接和右上角按钮的间距（推理页右上角还有访问量和 GitHub） */
@media (max-width: 420px) {
  .brand { display: none; }
  .topbar { gap: 6px; padding: 0 8px; }
  .site-nav a { padding: 3px 4px; font-size: 11px; }
  .top-actions { gap: 4px; }
  .top-actions .visits { padding: 0 5px; font-size: 10.5px; }
}
@media (max-width: 374px) {
  .topbar { gap: 4px; padding: 0 6px; }
  .site-nav { padding: 2px; }
  .site-nav a { padding: 3px 3px; font-size: 10.5px; }
  .top-actions { gap: 3px; }
  .top-actions .hud-btn { height: 28px; min-width: 28px; }
  .top-actions .gh-btn, .codex-btn, #btnSound { width: 28px; }
}
/* 导航放不下时（平板、手机、英文更长）：导航可以缩窄、左右滑；右侧按钮永远不被挤出去 */
.site-nav { flex: 0 1 auto; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav a { flex: none; white-space: nowrap; }
.top-actions { flex: none; }
@media (max-width: 1100px) {
  .site-nav { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------------- 拖动调整面板宽度（js/resize.js；训练页不引用本文件，样式另有一份在 train/css/train.css） ---------------- */

.pane-grip { position: absolute; z-index: 8; top: 0; bottom: 0; width: 10px; cursor: ew-resize; touch-action: none; outline: none; }
.pane-grip.l { right: -5px; }
/* 调试器是 overflow: hidden 的：手柄贴着它的左边缘放在里面 */
.pane-grip.r { left: 0; width: 8px; }
.pane-grip::before { content: ""; position: absolute; top: 0; bottom: 0; left: 4px; width: 2px; border-radius: 2px; background: linear-gradient(to bottom, transparent, var(--acc) 12%, var(--acc) 88%, transparent); box-shadow: 0 0 8px rgba(94, 240, 212, .5); opacity: 0; transition: opacity .2s ease .08s; }
.pane-grip.r::before { left: 0; top: 14px; bottom: 14px; }
.pane-grip:hover::before { opacity: .55; }
.pane-grip:focus-visible::before { opacity: .9; width: 3px; }
.pane-grip.on::before { opacity: 1; transition-delay: 0s; }
body.pane-drag { cursor: ew-resize; user-select: none; -webkit-user-select: none; }
body.pane-drag * { cursor: ew-resize !important; transition: none !important; }
body.mode-chat .pane-grip, .dbg.folded > .pane-grip, body.dbg-folded .dbg > .pane-grip { display: none; }
@media (max-width: 900px) { .pane-grip { display: none; } }
/* 面板拖宽以后舞台变窄：控制条按自己能用的宽度先收紧，再藏起位置读数、深度名（顶栏面包屑里有），
   还放不下才折成两行（会压到算式板，所以各页留出的宽度让它尽量不走到这一步）。窄屏另有一套，不受影响 */
@media (min-width: 901px) {
  .ctl { container-type: inline-size; }
  @container (max-width: 730px) {
    .ctl-bar { gap: 6px 10px; }
    .ctl-depth, .ctl-play { padding-right: 8px; }
    .ctl-speed button { min-width: 32px; padding: 0 3px; }
  }
  @container (max-width: 660px) { .ctl-pos { display: none; } }
  @container (max-width: 560px) { .ctl-dname { display: none; } }
  @container (max-width: 460px) { .ctl-bar { flex-wrap: wrap; justify-content: center; } }
}