/* ============================================================
   揭开黑箱 · 大模型训练
   视觉语言沿用主页面（深色、青 / 琥珀、调试器 + 控制条），舞台换成可以平移缩放的 2D 画布
   ============================================================ */

@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, .8);
  --panel2: rgba(15, 24, 42, .9);
  --cyan: #5ef0d4;
  --amber: #ffb65c;
  --rose: #ff6b93;
  --blue: #6b9bff;
  --violet: #b39dff;
  --acc: #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;
  --dbg-w: 350px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::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: .045; 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: 16px; padding: 0 18px; border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, rgba(5, 10, 20, .9), rgba(5, 10, 20, .65)); 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(--amber); 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 { flex: none; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.site-nav a { padding: 3px 11px; border-radius: 999px; color: var(--dim); text-decoration: none; font-size: 12.5px; transition: color .2s, background .2s; white-space: nowrap; }
.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; }
.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; }
/* 右上角的全站访问量和 GitHub 按钮（js/visits.js 插入，和 app.css 里同一套） */
.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); }
@media (max-width: 560px) { .top-actions .gh-btn { width: 30px; padding: 0; } .visits svg { display: none; } .top-actions .visits { padding: 0 6px; font-size: 11px; } }
.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; }

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

.stage { position: fixed; z-index: 5; top: var(--top); left: 0; right: 0; bottom: 0; overflow: hidden; }
.gl { position: absolute; inset: 0; }
.gl canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.gl.grabbing canvas { cursor: grabbing; }
.stage-top { position: absolute; z-index: 6; top: 12px; left: 14px; right: calc(var(--dbg-w) + 28px); display: flex; align-items: flex-start; gap: 8px; pointer-events: none; }
.stage-top > * { pointer-events: auto; }
.runs { display: flex; gap: 3px; padding: 3px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.runs button { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; padding: 5px 11px; border-radius: 11px; border: 1px solid transparent; background: none; cursor: pointer; color: var(--dim); text-align: left; transition: color .2s, background .2s, border-color .2s; }
.runs button b { font-size: 12.5px; font-weight: 600; }
.runs button span { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }
.runs button i { display: none; font-style: normal; }
.runs button:hover { color: var(--ink); }
.runs button.on { color: var(--ink); background: rgba(94, 240, 212, .08); border-color: rgba(94, 240, 212, .4); }
.runs button.on span { color: var(--acc); }
.runs.off { opacity: .55; }
.runs button.loading b::after { content: " …"; animation: runsWait 1s ease-in-out infinite alternate; }
@keyframes runsWait { from { opacity: .3; } to { opacity: 1; } }
.follow, .hint-btn { 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; align-self: center; }
.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); }
.hint-btn { margin-left: auto; }
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: 7; left: 50%; bottom: 128px; 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, .94); 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, .75); z-index: 8; }
.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); } }

/* 调试器 */
.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(--amber); box-shadow: 0 0 6px var(--amber); }
.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; scrollbar-color: var(--line2) transparent; }
.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; scrollbar-width: thin; }
.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 6px 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 em { font-style: normal; color: var(--amber); }
.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); overflow-x: auto; }
.dbg-explain .shape b { color: var(--cyan); font-weight: 400; }
.dbg-explain .demo { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 6px; border: 1px dashed rgba(255, 182, 92, .55); color: var(--amber); font-size: 11px; line-height: 18px; }
.dbg-explain .dimmed { color: var(--dim); }
.dbg-explain .err { color: var(--rose); }
.dbg-explain .tok { font-size: 12.5px; padding: 0 5px; }
.dbg-explain .f { font-family: var(--mono); font-size: 12px; color: var(--ink); white-space: nowrap; }
.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; }
/* 这一步的数据分块还没到：先留着上一步的讲解并调暗（延迟一点再暗，分块很快到时不会闪） */
.dbg-explain.stale, .dbg-watch.stale { opacity: .4; transition: opacity .3s ease .25s; }

/* 词元小块（和主页面一致） */
.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-answer { --h: 34; }
.tok.r-tpl { --h: 260; }

/* 控制条 */
.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 6px 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: 92px; 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; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(94, 240, 212, .45); } 70%, 100% { box-shadow: 0 0 0 12px transparent; } }
.ctl-btn.big { width: 42px; height: 42px; border-radius: 50%; background: var(--acc); border: 0; color: #04121a; font-size: 15px; box-shadow: 0 0 14px rgba(94, 240, 212, .3); }
.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: 104px; }
.ctl-pos b { color: var(--ink); font-weight: 400; }

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

#tooltip { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; max-width: 320px; padding: 10px 12px; border-radius: 10px; background: rgba(10, 16, 30, .96); 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); }
#tooltip .a { font-family: var(--mono); color: var(--amber); }
#tooltip table { border-collapse: collapse; margin-top: 4px; font-family: var(--mono); font-size: 11.5px; }
#tooltip td { padding: 1px 8px 1px 0; }
#tooltip td.tg { color: var(--amber); }
#toasts { position: fixed; z-index: 50; left: 16px; bottom: 118px; display: flex; flex-direction: column-reverse; gap: 10px; width: min(340px, calc(100vw - 36px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 12px; text-align: left; cursor: pointer; padding: 9px 12px; 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); }
.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; }
.codex { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 20px; background: rgba(2, 5, 12, .74); 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); 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; }

/* ---------------- 玻璃小模型的 3D 舞台（js/glass3d/；引擎和推理页共用） ---------------- */

.gl3 { position: absolute; inset: 0; }
.gl3 canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.gl3.grabbing canvas { cursor: grabbing; }
body.g3d .gl { display: none; }
body:not(.g3d) .gl3, body:not(.g3d) .ghud, body:not(.g3d) .gboard { display: none; }
/* 标签层自成一层（z-index）：CSS2DRenderer 给每个标签设的排序 z-index 不会压过调试器 / 浮层；和 ../../css/app.css 同一条 */
.css2d { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.stage-hint .h3d, .stage-hint .h2d { display: contents; }
body.g3d .stage-hint .h2d, body:not(.g3d) .stage-hint .h3d { display: none; }

/* 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 small { font-family: var(--mono); color: var(--dim); font-size: 10px; margin-left: 4px; }
.lbl b { color: var(--ink); font-weight: 600; }
.lbl.part { font-size: 11px; color: var(--ink); border-color: rgba(94, 240, 212, .3); font-family: var(--mono); }
.lbl.part.on { border-color: var(--amber); }
.lbl.num { font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; color: var(--ink2); }
.lbl.big { font-family: var(--mono); font-size: 15px; padding: 3px 10px; color: #fff; border-color: rgba(255, 182, 92, .5); }
.lbl.big small { display: block; margin: 0; font-size: 9.5px; }
.lbl.title { font-family: var(--serif); font-weight: 600; font-size: 15px; 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.gc { color: var(--violet); border-color: rgba(179, 157, 255, .45); }
.lbl.gt { color: var(--violet); border-color: rgba(179, 157, 255, .4); }
.lbl.gsel { color: var(--amber); border-color: rgba(255, 182, 92, .6); font-size: 11.5px; }
.lbl.gsel b { color: #fff; }

/* 监视器（左上角）和算式板（底部） */
.ghud { position: absolute; z-index: 4; top: 64px; left: 14px; width: 330px; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: boardin .5s var(--ease); }
.ghud.compact { width: 260px; }
.ghud canvas, .gboard canvas { display: block; }
/* 算式板在底部时，知识碎片的提示挪到左上角，免得压住算式（窄屏上算式板在顶部，提示照旧在下面） */
@media (min-width: 901px) { body.g-board #toasts { bottom: auto; top: 128px; } }
.gboard { position: absolute; z-index: 4; left: 14px; right: calc(var(--dbg-w) + 28px); bottom: 104px; border-radius: 16px; overflow: hidden auto; max-height: calc(100% - 200px); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); scrollbar-width: thin; scrollbar-color: var(--line2) transparent; animation: boardin .5s var(--ease); }
.dbg.folded ~ .gboard { right: 14px; }
@keyframes boardin { from { opacity: 0; transform: translateY(10px); } }
/* 3D 舞台缺数据时：顶部一个小提示（延迟一点再淡入，数据很快到时不会闪） */
.wait-pill { position: absolute; z-index: 6; left: calc((100% - var(--dbg-w) - 28px) / 2); top: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--panel); border: 1px solid rgba(255, 182, 92, .45); color: var(--ink2); font-size: 12.5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .3s; }
.wait-pill.on { opacity: 1; }
.wait-pill .spin { width: 14px; height: 14px; border-width: 2px; }
@media (max-width: 900px) {
  .ghud { top: 56px; left: 8px; right: 8px; width: auto; }
  .gboard { top: 56px; bottom: auto; left: 8px; right: 8px; max-height: 44vh; border-radius: 14px; }
  .dbg.folded ~ .gboard { right: 8px; }
  .wait-pill { left: 50%; top: 100px; }
  .lbl { font-size: 10.5px; padding: 1px 6px; }
  .lbl.part { font-size: 10px; }
  .lbl small { font-size: 9px; }
}

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

@media (max-width: 1180px) {
  :root { --dbg-w: 310px; }
  .brand-zh { display: none; }
}
@media (max-width: 900px) {
  :root { --top: 52px; }
  .topbar { gap: 10px; padding: 0 12px; }
  .brand-en { display: none; }
  .site-nav a { padding: 3px 8px; font-size: 12px; }
  .crumbs { display: none; }
  .hud-btn.codex-btn { padding: 0 9px; }
  .stage-top { right: 14px; }
  .hint-btn { display: none; }
  .runs button { padding: 4px 9px; }
  /* 三章的按钮在窄屏上平分一行，只留章名 */
  .runs { width: 100%; }
  .runs button { flex: 1; min-width: 0; align-items: center; padding: 5px 6px; }
  .runs button b, .runs button span { display: none; }
  .runs button i { display: block; font-size: 12px; font-weight: 600; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stage-hint { transform: translate(-50%, -8px); width: calc(100% - 24px); top: 64px; }
  .stage-hint.on { transform: translate(-50%, 0); }
  .dbg { top: auto; left: 10px; right: 10px; width: auto; bottom: 100px; max-height: 42vh; }
  .dbg.folded { bottom: 100px; }
  .dbg-h { padding: 8px 12px; }
  .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: 44px; padding: 0 3px; }
  .ctl-speed button:not(.on) { display: none; }
  .ctl-speed button.on::after { content: " ›"; opacity: .6; }
  .ctl-bar { flex-wrap: nowrap; gap: 6px; }
  .ctl-depth, .ctl-play { padding-right: 6px; }
  .ctl-dname { min-width: 70px; font-size: 11.5px; }
  .ctl-btn { width: 32px; height: 32px; }
  .ctl-btn.big { width: 40px; height: 40px; }
  .ctl-pos { display: none; }
  #toasts { left: 10px; right: 10px; width: auto; top: auto; bottom: 160px; flex-direction: column; }
  .toast { padding: 7px 10px; }
  .t-title { font-size: 14px; }
}
@media (max-width: 420px) {
  .brand { display: none; }
  .site-nav a { padding: 3px 5px; font-size: 11.5px; }
  .top-actions { gap: 5px; }
}
@media (max-width: 374px) {
  .topbar { gap: 6px; padding: 0 8px; }
  .site-nav a { padding: 3px 3px; font-size: 11px; }
}

/* 导航放不下时（平板、手机、英文更长）：导航可以缩窄、左右滑；右侧按钮永远不被挤出去 */
.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；和 ../css/app.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; }
.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; }
.dbg.folded > .pane-grip { display: none; }
@media (max-width: 900px) { .pane-grip { display: none; } }
/* 调试器拖宽以后：控制条按自己能用的宽度先收紧，再藏起位置读数、深度名，还放不下才折成两行（窄屏另有一套，不受影响） */
@media (min-width: 901px) {
  .ctl { container-type: inline-size; }
  @container (max-width: 760px) {
    .ctl-bar { gap: 6px 10px; }
    .ctl-depth, .ctl-play { padding-right: 8px; }
    .ctl-speed button { min-width: 32px; padding: 0 3px; }
  }
  @container (max-width: 680px) { .ctl-pos { display: none; } }
  @container (max-width: 570px) { .ctl-dname { display: none; } }
  @container (max-width: 470px) { .ctl-bar { flex-wrap: wrap; justify-content: center; } }
}

/* ---------------- 中 / EN 切换（../../js/i18n.js 的 mountLangSwitch；和 ../css/app.css 里那一段相同） ---------------- */

.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; } }
html[lang="en"] .brand-zh { display: none; }   /* 英文模式：TRAINING 已经说明了是哪一页，把位置让给面包屑 */
/* 英文模式：拉丁字体排在中文字体前面（中文字体里的弯引号、撇号是全角的，夹在英文里会空出一大块）；诗句等中文照常落到后面的中文字体 */
html[lang="en"] { --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", "DejaVu Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }

/* ---------------- 第二章：唐宋诗小模型的 3D 机器（js/tiny3d/；引擎和推理页、玻璃小模型共用） ---------------- */

.gl3t { position: absolute; inset: 0; }
.gl3t canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.gl3t.grabbing canvas { cursor: grabbing; }
body.t3d .gl { display: none; }
body:not(.t3d) .gl3t, body:not(.t3d) .t3hud, body:not(.t3d) .t3side, body:not(.t3d) .t3board, body:not(.t3d) .t3pill { display: none; }
body.t3d .stage-hint .h3d { display: contents; }
body.t3d .stage-hint .h2d { display: none; }
.t3hud { position: absolute; z-index: 4; top: 64px; left: 14px; width: 340px; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: boardin .5s var(--ease); }
.t3hud.compact { width: 260px; }
.t3side { position: absolute; z-index: 4; top: 244px; left: 14px; width: 340px; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: boardin .5s var(--ease); }
.t3hud canvas, .t3side canvas, .t3board canvas { display: block; }
.t3board { position: absolute; z-index: 4; left: 14px; right: calc(var(--dbg-w) + 28px); bottom: 104px; border-radius: 16px; overflow: hidden auto; max-height: calc(100% - 200px); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); scrollbar-width: thin; scrollbar-color: var(--line2) transparent; animation: boardin .5s var(--ease); }
.dbg.folded ~ .t3board { right: 14px; }
@media (min-width: 901px) { body.t3-board #toasts { bottom: auto; top: 128px; } }
@media (max-height: 760px) { .t3side { display: none; } }
.lbl.t3p { font-size: 10.5px; }
.lbl.t3p small { display: block; margin: 1px 0 0; }
.lbl.t3l { font-size: 14px; color: var(--ink2); }
.lbl.t3lens { color: var(--acc); font-size: 10.5px; }
.lbl.t3w { white-space: normal; max-width: 300px; text-align: center; }
.lbl.t3dim { color: var(--dim); }
.lbl.t3g small { display: block; margin: 0; }
.lbl.t3mag { color: #ffd9a6; border-color: rgba(255, 209, 138, .5); }
.lbl.t3t5 { font-size: 10px; padding: 0 5px; color: var(--ink2); }
.lbl.t3t5.ok { color: var(--green); border-color: rgba(142, 224, 122, .5); }
@media (max-width: 900px) {
  .t3hud { top: 56px; left: 8px; right: 8px; width: auto; }
  .t3hud.compact { width: auto; }
  .t3board { top: 56px; bottom: auto; left: 8px; right: 8px; max-height: 44vh; border-radius: 14px; }
  .dbg.folded ~ .t3board { right: 8px; }
  .lbl.t3w { max-width: 200px; }
}

/* ---------------- 第三章 · Qwen3-0.6B 微调的 3D 舞台（js/qwen3d/；引擎和推理页共用） ---------------- */

.q3 { position: absolute; inset: 0; }
.q3 canvas { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
.q3.grabbing canvas { cursor: grabbing; }
body.q3d .gl { display: none; }
body:not(.q3d) .q3, body:not(.q3d) .qhud, body:not(.q3d) .qboard { display: none; }
body.q3d .stage-hint .h3d { display: contents; }
body.q3d .stage-hint .h2d, body.q3d .stage-hint .h3d > span:last-child { display: none; }
/* 逻辑透镜读数（和推理页同一套）+ 这一章自己的几种标签 */
.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); }
.lbl.qm { color: var(--dim); border-color: rgba(122, 133, 158, .35); }
.lbl.qa { color: var(--amber); border-color: rgba(255, 182, 92, .5); }
.lbl.qp { color: #9fb2d8; border-color: rgba(143, 166, 214, .35); border-style: dashed; }
.lbl.qg { color: var(--rose); border-color: rgba(255, 107, 147, .4); }
.lbl.qb { font-size: 10.5px; color: var(--ink); }
.lbl.qb b { color: #8ee07a; font-family: var(--mono); font-weight: 600; margin-left: 4px; }
.lbl.qb.on { border-color: var(--amber); }
.lbl.qc { color: var(--ink2); padding: 4px 8px; }
.lbl.qc i { display: block; font-style: normal; font-family: var(--sans); font-size: 9.5px; color: var(--dim); margin-bottom: 2px; }
.lbl.qc span { display: block; line-height: 1.45; }
.lbl.qc span b { margin-left: 8px; font-weight: 600; color: var(--ink2); }
.lbl.qc span.ok, .lbl.qc span.ok b { color: #8ee07a; }
.lbl.qr { color: var(--ink2); border-color: rgba(179, 157, 255, .35); }
/* 监视器（左上角）和算式板（底部）：和玻璃小模型那一章同样的位置 */
.qhud { position: absolute; z-index: 4; top: 64px; left: 14px; width: 320px; border-radius: 14px; overflow: hidden; box-shadow: 0 14px 34px rgba(0, 0, 0, .4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: boardin .5s var(--ease); }
.qhud canvas, .qboard canvas { display: block; }
.qboard { position: absolute; z-index: 4; left: 14px; right: calc(var(--dbg-w) + 28px); bottom: 104px; border-radius: 16px; overflow: hidden auto; max-height: calc(100% - 200px); box-shadow: 0 18px 44px rgba(0, 0, 0, .45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); scrollbar-width: thin; scrollbar-color: var(--line2) transparent; animation: boardin .5s var(--ease); }
.dbg.folded ~ .qboard { right: 14px; }
@media (min-width: 901px) { body.q-board #toasts { bottom: auto; top: 128px; } }
@media (max-width: 900px) {
  .qhud { top: 56px; left: 8px; right: 8px; width: auto; }
  .qboard { top: 56px; bottom: auto; left: 8px; right: 8px; max-height: 44vh; border-radius: 14px; }
  .dbg.folded ~ .qboard { right: 8px; }
  body.q3d .lbl.big { font-size: 12px; padding: 2px 7px; }
}