@font-face { font-family: "Outfit"; font-weight: 300; src: url("/lab/vendor/fonts/outfit/outfit-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 400; src: url("/lab/vendor/fonts/outfit/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; src: url("/lab/vendor/fonts/outfit/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; src: url("/lab/vendor/fonts/outfit/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; src: url("/lab/vendor/fonts/outfit/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 800; src: url("/lab/vendor/fonts/outfit/outfit-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; src: url("/lab/vendor/fonts/dm-mono/dm-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; src: url("/lab/vendor/fonts/dm-mono/dm-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --bg: #070d18;
  --panel: rgba(9, 19, 36, 0.72);
  --panel-b: rgba(126, 196, 255, 0.14);
  --ink: #e8f1fb;
  --ink2: #9fb3c9;
  --ink3: #6b8099;
  --cyan: #62e4ff;
  --amber: #ffb24a;
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --sans: "Outfit", var(--cjk);
  --mono: "DM Mono", ui-monospace, var(--cjk);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#leaders { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
#labels { position: fixed; inset: 0; pointer-events: none; z-index: 3; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#ui > * { pointer-events: auto; }
body.ui-off #ui, body.ui-off #labels, body.ui-off #leaders { display: none; }

/* ---------- 左上：标题与读数 ---------- */
#intro { position: absolute; left: 28px; top: 24px; width: 332px; pointer-events: none; }
#intro > * { pointer-events: auto; }
.kicker { font: 600 11px/1 var(--sans); letter-spacing: 0.22em; color: var(--cyan); text-transform: uppercase; opacity: 0.9; }
h1 { margin: 12px 0 10px; font: 700 34px/1.14 var(--sans); letter-spacing: 0.02em; text-shadow: 0 2px 24px rgba(0,0,0,0.5); }
h1 span { display: block; }
h1 .accent { color: var(--amber); }
.hook { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink2); max-width: 330px; text-shadow: 0 1px 12px rgba(0,0,0,0.6); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.card { background: var(--panel); border: 1px solid var(--panel-b); border-radius: 12px; padding: 10px 11px 9px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); position: relative; overflow: hidden; }
.card .k { font-size: 11px; color: var(--ink2); white-space: nowrap; }
.card .v { margin-top: 6px; display: flex; align-items: baseline; gap: 4px; }
.card .v b { font: 500 23px/1 var(--mono); color: var(--cyan); letter-spacing: -0.02em; transition: color .3s; }
.card .v i { font: normal 11px var(--sans); color: var(--ink3); }
.card .sub { margin-top: 4px; font: 11px var(--mono); color: var(--ink3); }
.card.warn .v b { color: #9ff3ff; text-shadow: 0 0 12px rgba(98,228,255,0.7); }
.card .bar { position: relative; height: 3px; margin-top: 7px; background: rgba(255,255,255,0.08); border-radius: 2px; }
.card .bar span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--cyan); border-radius: 2px; transition: width .3s; }
.card .bar em { position: absolute; top: -3px; width: 2px; height: 9px; background: var(--amber); left: 41.6%; border-radius: 1px; }
.narr { margin-top: 10px; background: var(--panel); border: 1px solid var(--panel-b); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; line-height: 1.72; color: #cfdced; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.narr b { color: #fff; font-weight: 600; }
.narr .num { font-family: var(--mono); color: var(--cyan); }
.narr.flash { animation: flash .6s ease; }
@keyframes flash { from { border-color: rgba(98,228,255,0.6); } to { border-color: var(--panel-b); } }

/* ---------- 右上：控制面板 ---------- */
#panel { position: absolute; right: 22px; top: 22px; width: 280px; background: var(--panel); border: 1px solid var(--panel-b); border-radius: 16px; padding: 14px 14px 12px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.drawer-handle { display: none; }
.grp { margin-bottom: 13px; }
.grp:last-child { margin-bottom: 0; }
.grp.row { display: flex; gap: 6px; align-items: center; }
.grp.row .seg { flex: 1; }
.lbl { font-size: 11.5px; color: var(--ink2); margin-bottom: 7px; display: flex; justify-content: space-between; }
.lbl .num { font-family: var(--mono); color: var(--cyan); margin-left: auto; margin-right: 10px; }
.fold-h { width: 100%; border: 0; background: none; padding: 0; cursor: pointer; font-family: var(--sans); text-align: left; align-items: center; }
.fold-h:hover { color: var(--ink); }
.caret { width: 7px; height: 7px; border-right: 1.5px solid var(--ink3); border-bottom: 1.5px solid var(--ink3); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.fold-h .num + .caret { margin-left: 0; }
.fold-h > .caret:only-of-type { margin-left: auto; }
.grp.closed .caret { transform: rotate(-45deg); }
.grp.closed .body { display: none; }
.grp.closed .lbl { margin-bottom: 0; }
.body > * + * { margin-top: 8px; }
.body input[type=range] + .ticks { margin-top: 2px; }
.seg { display: flex; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 3px; gap: 2px; }
.seg button, .presets button, .icon, #btn-hide { font-family: var(--sans); cursor: pointer; }
.seg button { flex: 1; border: 0; background: transparent; color: var(--ink2); font-size: 12px; padding: 7px 4px; border-radius: 7px; transition: background .2s, color .2s; white-space: nowrap; }
.seg button:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
.seg button.on { background: linear-gradient(180deg, rgba(98,228,255,0.22), rgba(98,228,255,0.1)); color: #fff; box-shadow: inset 0 0 0 1px rgba(98,228,255,0.35); }
#seg-storage button.on[data-v="cycle"] { background: linear-gradient(180deg, rgba(255,178,74,0.26), rgba(255,178,74,0.1)); box-shadow: inset 0 0 0 1px rgba(255,178,74,0.4); }
input[type=range] { width: 100%; -webkit-appearance: none; appearance: none; height: 22px; background: transparent; margin: 0; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan) var(--p, 0%), rgba(255,255,255,0.1) var(--p, 0%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(98,228,255,0.25), 0 2px 6px rgba(0,0,0,0.4); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); }
input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 0; }
.ticks { display: flex; justify-content: space-between; font: 10px var(--mono); color: var(--ink3); margin-top: 2px; }
.presets { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.presets button { border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); color: var(--ink); font-size: 12.5px; padding: 8px 6px; border-radius: 9px; transition: all .2s; }
.presets button:hover { border-color: rgba(255,178,74,0.5); background: rgba(255,178,74,0.08); }
.presets button.on { border-color: rgba(255,178,74,0.7); background: rgba(255,178,74,0.14); }
.icon { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: var(--ink); font-size: 15px; }
.icon:hover { border-color: rgba(98,228,255,0.5); }

#btn-hide { position: absolute; right: 22px; bottom: 22px; border: 1px solid var(--panel-b); background: var(--panel); color: var(--ink2); font-size: 12px; padding: 8px 12px; border-radius: 10px; backdrop-filter: blur(10px); }
#btn-hide:hover { color: #fff; }

/* ---------- 3D 标注 ---------- */
.tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; font-size: 12px; padding: 5px 10px 5px 9px; border-radius: 999px; background: rgba(8, 18, 34, 0.82); border: 1px solid rgba(126,196,255,0.25); color: var(--ink); box-shadow: 0 4px 18px rgba(0,0,0,0.35); display: flex; gap: 7px; align-items: center; will-change: transform; }
.tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.tag .val { font-family: var(--mono); color: var(--cyan); }
.tag .hint { font-size: 10.5px; color: #1a1206; background: var(--amber); border-radius: 999px; padding: 1px 7px; font-weight: 600; }
.tag.amber { border-color: rgba(255,178,74,0.4); }
.tag.amber .dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
#leaders line { stroke: rgba(170, 220, 255, 0.55); stroke-width: 1; }
#leaders circle { fill: #fff; }

/* ---------- 帮助 ---------- */
#help { position: fixed; inset: 0; background: rgba(3,7,14,0.55); display: flex; align-items: center; justify-content: center; z-index: 20; backdrop-filter: blur(4px); }
#help[hidden] { display: none; }
.help-card { position: relative; width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; background: rgba(10,20,38,0.96); border: 1px solid var(--panel-b); border-radius: 18px; padding: 22px 26px; font-size: 13.5px; line-height: 1.7; color: #cfdced; }
.help-card h2 { font-size: 15px; margin: 4px 0 8px; color: #fff; }
.help-card h2 + ul { margin-top: 0; }
.help-card ul { padding-left: 18px; margin: 0 0 16px; }
.help-card li { margin-bottom: 4px; }
.help-card .simp li { color: var(--ink2); }
.help-card kbd { font-family: var(--mono); background: rgba(255,255,255,0.1); padding: 0 6px; border-radius: 4px; }
.help-card .close { position: absolute; right: 12px; top: 10px; border: 0; background: none; color: var(--ink2); font-size: 22px; cursor: pointer; }

#nogl { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: 16px; line-height: 1.8; color: var(--ink); background: radial-gradient(circle at 50% 40%, #13243d, #070d18); z-index: 50; }
#nogl[hidden] { display: none; }

/* ---------- 手机 ---------- */
@media (max-width: 699px) {
  #intro { left: 0; top: 0; right: 0; width: auto; padding: 12px 14px 10px; background: linear-gradient(180deg, rgba(7,13,24,0.92) 0%, rgba(7,13,24,0.75) 70%, rgba(7,13,24,0) 100%); }
  .kicker { font-size: 9.5px; }
  h1 { font-size: 22px; margin: 7px 0 5px; }
  h1 span { display: inline; }
  h1 .accent::before { content: " "; }
  .hook { font-size: 12px; margin-bottom: 8px; line-height: 1.5; }
  .cards { gap: 6px; }
  .card { padding: 7px 8px; border-radius: 10px; }
  .card .k { font-size: 10px; }
  .card .v b { font-size: 17px; }
  .card .sub { display: none; }
  .narr { position: fixed; left: 10px; right: 10px; bottom: 54px; margin: 0; font-size: 12px; line-height: 1.6; padding: 8px 11px; background: rgba(9, 19, 36, 0.86); }
  #panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; border-radius: 18px 18px 0 0; padding: 0 14px calc(12px + env(safe-area-inset-bottom)); transform: translateY(calc(100% - 46px)); transition: transform .35s cubic-bezier(.2,.8,.2,1); max-height: 72vh; overflow: auto; }
  #panel.open { transform: none; }
  .drawer-handle { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0 10px; font-size: 12px; color: var(--ink2); cursor: pointer; }
  .drawer-handle span { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.25); }
  #panel.open .narr-m { display: block; }
  #btn-hide { display: none; }
  .tag { font-size: 10.5px; padding: 3px 8px; }
}