/* 生成：tools/build_screens.py ← V2-holo-glass/frames；勿手改，改稿后重跑。顺序：tokens → 各屏（#sN 作用域）→ V2 皮肤（#app 作用域，同权重后写者胜，等同原帧 skin 在后） */
/* 彩砂跳（暂定名）UI Tokens v1 · 赛博霓虹 —— 说明见 ../../UI-TOKENS-v1.md */
@font-face{font-family:"JBMono";src:url("../assets/fonts/JetBrainsMono-sub.woff2") format("woff2");font-weight:100 800}
:root{
  /* 底色 */
  --c-bg:#0B0F1A;  --c-bg-2:#0F1526;  --c-bg-hud:#0D1322;
  --c-card:rgba(20,28,48,.78); --c-card-solid:#141C30;
  --c-line:rgba(0,229,255,.28); --c-line-strong:rgba(0,229,255,.7); --c-line-dim:rgba(143,163,192,.22);
  --c-grid:rgba(0,229,255,.055);
  /* 文字 */
  --c-text:#EAF2FF; --c-text-2:#8FA3C0; --c-text-3:#5A6A86; --c-on-primary:#04101C;
  /* 强调 */
  --c-accent:#00E5FF;       /* 主强调＝青 */
  --c-accent-2:#FF2D95;     /* 次强调＝品红（最佳/纪录/失败） */
  --c-ok:#00E5FF; --c-warn:#FF2D95;
  --c-lock:#5A6A86;
  /* 游戏四色：色相+亮度双区分（Y 相对亮度：黄 .76 > 青 .63 > 品红 .25 > 紫 .17） */
  --g-cyan:#00E5FF;   /* 纹理：实心 */
  --g-yellow:#FFE14D; /* 纹理：斜条纹 */
  --g-magenta:#FF2D95;/* 纹理：圆点 */
  --g-violet:#7C4DFF; /* 纹理：空心双线 */
  --c-finish:#F5FBFF; /* 终点光门：白，不与四色混淆 */
  /* 字体 */
  --font:"PingFang SC","Noto Sans CJK SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --mono:"JBMono","JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  /* 圆角 / 间距 / 尺寸 */
  --r-s:6px; --r-m:10px; --r-l:14px; --r-pill:999px;
  --page-x:24px; --btn-h:56px; --btn-h-s:48px; --hit-min:44px; --safe-top:44px;
  --glow-cyan:0 0 0 1px rgba(0,229,255,.35),0 0 18px rgba(0,229,255,.35);
  --glow-mag:0 0 0 1px rgba(255,45,149,.4),0 0 18px rgba(255,45,149,.3);
}
*{box-sizing:border-box;margin:0;padding:0}

#app{font-family:var(--font);color:var(--c-text);background:var(--c-bg);-webkit-font-smoothing:antialiased;position:relative}
/* 背景：网格 + 顶部紫色辉光 + 扫描线 */
.cyber{background:
  radial-gradient(120% 55% at center -8%,rgba(124,77,255,.28),transparent 60%),
  radial-gradient(90% 40% at center 108%,rgba(0,229,255,.12),transparent 60%),
  linear-gradient(var(--c-grid) 1px,transparent 1px) 0 0/28px 28px,
  linear-gradient(90deg,var(--c-grid) 1px,transparent 1px) 0 0/28px 28px,
  var(--c-bg)}
.cyber::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:60;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
/* HUD 角标：四角 L 形 */
.brk{--bc:var(--c-accent);--bl:12px;--bw:2px}
.brk::before{content:"";position:absolute;inset:-5px;pointer-events:none;z-index:2;background-image:
 linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),
 linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),
 linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc)),
 linear-gradient(var(--bc),var(--bc)),linear-gradient(var(--bc),var(--bc));
 background-repeat:no-repeat;
 background-size:var(--bl) var(--bw),var(--bw) var(--bl),var(--bl) var(--bw),var(--bw) var(--bl),var(--bl) var(--bw),var(--bw) var(--bl),var(--bl) var(--bw),var(--bw) var(--bl);
 background-position:0 0,0 0,100% 0,100% 0,0 100%,0 100%,100% 100%,100% 100%}
/* 卡片 */
.card{background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--r-l);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 0 16px rgba(0,229,255,.06)}
/* 按钮 */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:var(--btn-h);border-radius:var(--r-m);
  font-family:var(--font);font-size:18px;font-weight:700;letter-spacing:1px;border:0;position:relative}
.btn-primary{background:linear-gradient(90deg,#00E5FF,#00A8FF);color:var(--c-on-primary);box-shadow:0 0 22px rgba(0,229,255,.45),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-secondary{background:rgba(0,229,255,.06);color:#BFF6FF;border:1.5px solid var(--c-line-strong);box-shadow:0 0 12px rgba(0,229,255,.15),inset 0 0 12px rgba(0,229,255,.06);font-weight:400}
.btn-ghost{background:transparent;color:var(--c-text-2);height:var(--hit-min);font-weight:400;font-size:15px}
.btn .mono{font-weight:700}
.muted{color:var(--c-text-2)} .weak{color:var(--c-text-3)} .acc{color:var(--c-accent)} .acc2{color:var(--c-accent-2)}
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:6px;font-family:var(--mono);font-size:12px;letter-spacing:1px}
.label{font-family:var(--mono);font-size:11px;letter-spacing:2px;color:var(--c-text-3);text-transform:uppercase}

#s1 .legend{position:absolute;left:0;right:0;display:flex;justify-content:center;gap:14px}
#s1 .legend span{display:flex;align-items:center;gap:5px}
#s1 .legend em{font-style:normal;font-size:11px;color:var(--c-text-3)}
#s1 .w{position:absolute;inset:0;transform:translateY(28px)}
#s1 .meta{position:absolute;left:24px;right:24px;top:64px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--c-text-3)}
#s1 .meta b{color:var(--c-accent);font-weight:700}
#s1 .title{position:absolute;left:0;right:0;top:94px;text-align:center;font-size:38px;font-weight:700;letter-spacing:4px;color:#F4FDFF;text-shadow:0 0 12px rgba(0,229,255,.55),0 0 2px rgba(0,229,255,.9)}
#s1 .title small{display:inline-block;vertical-align:middle;margin-left:8px;font-size:11px;font-weight:400;letter-spacing:1px;color:var(--c-text-2);border:1px solid var(--c-line-dim);border-radius:4px;padding:1px 6px;text-shadow:none}
#s1 .art{position:absolute;left:0;right:0;margin:0 auto;top:166px;width:236px;height:236px;padding:8px;--bl:14px}
#s1 .art img{width:100%;height:100%;display:block;border:1px solid var(--c-line);box-shadow:0 0 24px rgba(124,77,255,.35)}
#s1 .tag{position:absolute;left:0;right:0;top:420px;text-align:center;font-size:15px;color:var(--c-text-2);letter-spacing:1px}
#s1 .act{position:absolute;left:24px;right:24px;top:462px;display:flex;flex-direction:column;gap:14px}
#s1 .foot{position:absolute;left:0;right:0;top:612px;text-align:center;font-size:13px;color:var(--c-text-3);letter-spacing:1px}
#s1 .ver{position:absolute;left:0;right:0;bottom:24px;text-align:center}
#s2 .w{position:absolute;inset:0;transform:translateY(24px)}
#s2 .head{position:absolute;left:12px;right:24px;top:52px;height:48px;display:flex;align-items:center}
#s2 .back{width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--c-accent)}
#s2 .head h1{flex:1;text-align:center;margin-right:36px;font-size:22px;font-weight:700;letter-spacing:2px}
#s2 .sub{position:absolute;left:0;right:0;top:108px;text-align:center;font-size:14px;color:var(--c-text-2)}
#s2 .seg{position:absolute;left:115px;width:160px;top:136px;display:flex;gap:4px}
#s2 .seg i{flex:1;height:4px;border-radius:2px;background:rgba(143,163,192,.18)}
#s2 .path{position:absolute;left:0;top:160px;width:390px;height:350px}
#s2 .node{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(20,28,48,.85);border:1px solid var(--c-line-dim);font-family:var(--mono);font-size:22px;font-weight:700;color:var(--c-text-3)}
#s2 .node svg{margin-top:2px}
#s2 .node.on{border:1.5px solid var(--c-accent);color:#E6FDFF;box-shadow:0 0 0 4px rgba(0,229,255,.1),0 0 22px rgba(0,229,255,.45);text-shadow:0 0 8px rgba(0,229,255,.8)}
#s2 .nl{position:absolute;margin-top:-10px;font-size:13px;color:var(--c-text-3);white-space:nowrap}
#s2 .nl.on{color:var(--c-text)}
#s2 .nl em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--c-text-3);margin-top:2px}
#s2 .info{position:absolute;left:24px;right:24px;top:530px;padding:14px 16px}
#s2 .info .r{display:flex;align-items:center;gap:10px}
#s2 .info .r b{font-size:18px}
#s2 .info .r .mono{margin-left:auto;font-size:13px;color:var(--c-text-2)}
#s2 .info p{margin-top:8px;font-size:14px;color:var(--c-text-2)}
#s2 .info .m{margin-top:8px;font-family:var(--mono);font-size:12px;color:var(--c-text-3);letter-spacing:.5px}
#s2 .cta{position:absolute;left:24px;right:24px;top:650px}
#s3 .hud{position:absolute;left:0;right:0;top:0;height:172px;background:linear-gradient(#0B0F1A,#0D1322);z-index:10}
#s3 .r1{position:absolute;left:16px;right:16px;top:46px;height:48px;display:flex;align-items:center;justify-content:space-between}
#s3 .brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:1px}
#s3 .brand svg{filter:drop-shadow(0 0 4px rgba(0,229,255,.8))}
#s3 .pause{height:44px;width:104px;border-radius:var(--r-m);border:1.5px solid var(--c-line-strong);background:rgba(0,229,255,.06);font-family:var(--font);font-size:16px;color:#BFF6FF;box-shadow:0 0 10px rgba(0,229,255,.15)}
#s3 .r2{position:absolute;left:12px;right:12px;top:100px;height:60px;display:flex;align-items:center;gap:8px}
#s3 .stat{width:96px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:var(--r-m)}
#s3 .stat span{font-size:12px;color:var(--c-text-2)}
#s3 .stat b{font-size:24px;font-weight:700;line-height:1.2}
#s3 .lvl{flex:1;text-align:center}
#s3 .lvl b{display:block;font-size:18px;font-weight:700}
#s3 .lvl span{display:block;margin-top:5px;font-size:12px;color:var(--c-text-2)}
#s3 .prog{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(0,229,255,.15)}
#s3 .prog i{display:block;height:2px;background:var(--c-accent);box-shadow:0 0 8px var(--c-accent)}
#s3 .field{position:absolute;left:0;top:172px;display:block}
#s3 .bot{position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(#0D1322,#0B0F1A);z-index:10;border-top:1px solid var(--c-line-dim);text-align:center}
#s3 .bot .d{position:absolute;top:14px;width:18px;height:18px}
#s3 .bot p{position:absolute;left:0;right:0;top:44px;font-size:13px;color:var(--c-text-2)}
#s3 .scrim{position:absolute;inset:0;z-index:30;background:rgba(5,8,16,.72);backdrop-filter:blur(3px)}
#s3 .panel{position:absolute;left:28px;right:28px;top:176px;z-index:31;padding:26px 22px 20px;border-radius:16px;text-align:center;background:rgba(15,21,38,.94);--bl:14px}
#s3 .panel .label{letter-spacing:4px;color:var(--c-accent)}
#s3 .panel h2{margin-top:6px;font-size:26px;font-weight:700;letter-spacing:3px}
#s3 .panel .s{margin-top:6px;font-size:14px;color:var(--c-text-2)}
#s3 .nums{margin:18px 0 20px;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--c-line-dim);border-bottom:1px solid var(--c-line-dim);padding:12px 0}
#s3 .nums span{display:block;font-size:12px;color:var(--c-text-2)}
#s3 .nums b{display:block;font-size:26px;font-weight:700;font-family:var(--mono)}
#s3 .btns{display:flex;flex-direction:column;gap:12px}
#s3 .tgs{margin-top:16px;display:flex;gap:10px}
#s3 .tg{flex:1;height:44px;border-radius:var(--r-m);border:1px solid var(--c-line-dim);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:15px}
#s3 .sw{width:38px;height:22px;border-radius:11px;background:rgba(0,229,255,.25);border:1px solid var(--c-accent);position:relative;box-shadow:0 0 8px rgba(0,229,255,.4)}
#s3 .sw::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:999px;background:var(--c-accent)}
#s3 .panel .hint{margin-top:14px;font-size:12px;color:var(--c-text-3)}
#s5 .w{position:absolute;inset:0;transform:translateY(40px)}
#s5 .crumb{position:absolute;left:0;right:0;top:66px;text-align:center;font-size:13px;color:var(--c-text-2)}
#s5 .st{position:absolute;left:0;right:0;top:92px;text-align:center}
#s5 .hero{position:absolute;left:24px;right:24px;top:136px;display:flex;gap:18px;align-items:center}
#s5 .thumb{position:relative;width:120px;height:120px;padding:5px;flex:none;--bl:10px}
#s5 .thumb img{width:100%;height:100%;display:block;border:1px solid var(--c-line)}
#s5 .hero h2{font-size:19px;font-weight:700}
#s5 .score{font-family:var(--mono);font-weight:700;font-size:60px;line-height:1.05;margin:4px 0 2px}
#s5 .hero p{font-size:14px;color:var(--c-text-2)}
#s5 .pg{position:absolute;left:24px;right:24px;top:280px;padding:14px 16px}
#s5 .pg .r{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--c-text-2)}
#s5 .pg .r b{font-family:var(--mono);font-size:20px;color:var(--c-text)}
#s5 .bar{margin-top:10px;height:6px;border-radius:3px;background:rgba(143,163,192,.18);position:relative}
#s5 .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
#s5 .bar .fl{position:absolute;right:-2px;top:-5px;width:2px;height:16px;background:#F5FBFF;box-shadow:0 0 6px #F5FBFF}
#s5 .pg p{margin-top:8px;font-size:12px;color:var(--c-text-3)}
#s5 .top3{position:absolute;left:24px;right:24px;top:394px;padding:12px 0 14px}
#s5 .top3 .h{text-align:center;margin-bottom:8px}
#s5 .top3 .g{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
#s5 .top3 span{display:block;font-size:12px;color:var(--c-text-2)}
#s5 .top3 b{display:block;font-family:var(--mono);font-size:22px;margin-top:4px}
#s5 .act{position:absolute;left:24px;right:24px;top:508px;display:flex;flex-direction:column;gap:14px}
#s5 .foot{position:absolute;left:0;right:0;top:654px;text-align:center;font-size:13px;color:var(--c-text-3)}
#s6 .w{position:absolute;inset:0;transform:translateY(40px)}
#s6 .crumb{position:absolute;left:0;right:0;top:66px;text-align:center;font-size:13px;color:var(--c-text-2)}
#s6 .st{position:absolute;left:0;right:0;top:92px;text-align:center}
#s6 .hero{position:absolute;left:24px;right:24px;top:136px;display:flex;gap:18px;align-items:center}
#s6 .thumb{position:relative;width:120px;height:120px;padding:5px;flex:none;--bl:10px}
#s6 .thumb img{width:100%;height:100%;display:block;border:1px solid var(--c-line)}
#s6 .hero h2{font-size:19px;font-weight:700}
#s6 .score{font-family:var(--mono);font-weight:700;font-size:60px;line-height:1.05;margin:4px 0 2px}
#s6 .hero p{font-size:14px;color:var(--c-text-2)}
#s6 .pg{position:absolute;left:24px;right:24px;top:280px;padding:14px 16px}
#s6 .pg .r{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--c-text-2)}
#s6 .pg .r b{font-family:var(--mono);font-size:20px;color:var(--c-text)}
#s6 .bar{margin-top:10px;height:6px;border-radius:3px;background:rgba(143,163,192,.18);position:relative}
#s6 .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
#s6 .bar .fl{position:absolute;right:-2px;top:-5px;width:2px;height:16px;background:#F5FBFF;box-shadow:0 0 6px #F5FBFF}
#s6 .pg p{margin-top:8px;font-size:12px;color:var(--c-text-3)}
#s6 .top3{position:absolute;left:24px;right:24px;top:394px;padding:12px 0 14px}
#s6 .top3 .h{text-align:center;margin-bottom:8px}
#s6 .top3 .g{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
#s6 .top3 span{display:block;font-size:12px;color:var(--c-text-2)}
#s6 .top3 b{display:block;font-family:var(--mono);font-size:22px;margin-top:4px}
#s6 .act{position:absolute;left:24px;right:24px;top:508px;display:flex;flex-direction:column;gap:14px}
#s6 .foot{position:absolute;left:0;right:0;top:654px;text-align:center;font-size:13px;color:var(--c-text-3)}
#s6 .big{position:absolute;left:0;right:0;top:130px;text-align:center}
#s6 .big h2{font-size:26px;font-weight:700;letter-spacing:2px}
#s6 .cnt{position:absolute;left:0;right:0;top:180px;display:flex;justify-content:center;align-items:center;gap:12px}
#s6 .cnt .n{font-family:var(--mono);font-weight:700;font-size:64px;line-height:1;color:#E6FDFF;text-shadow:0 0 16px rgba(0,229,255,.8)}
#s6 .cnt .n small{font-size:30px;color:var(--c-text-2);text-shadow:none}
#s6 .rec{position:absolute;left:0;right:0;top:258px;text-align:center;font-size:14px;color:var(--c-text-2)}
#s6 .rec .chip{margin-left:6px;height:22px;background:rgba(255,45,149,.12);border:1px solid var(--c-accent-2);color:var(--c-accent-2)}
#s6 .unl{position:absolute;left:24px;right:24px;top:300px;height:56px;padding:0 16px;display:flex;align-items:center;gap:12px;font-size:15px}
#s6 .unl b{color:var(--c-accent)}
#s6 .unl .mono{margin-left:auto;font-size:12px;color:var(--c-text-3)}
#s6 .top3{top:372px}
#s6 .act2{position:absolute;left:24px;right:24px;top:486px}
#s6 .row2{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
#s6 .foot{top:632px}
/* V2 skin（§2 去毛玻璃） */
:root{--c-bg:#07070C;--c-bg-2:#0B0A14;--c-bg-hud:#0B0A14;--c-card:rgba(255,255,255,.06);--c-card-solid:#16151F;
 --c-line:rgba(200,182,255,.34);--c-line-strong:rgba(200,182,255,.8);--c-line-dim:rgba(200,190,255,.16);--c-grid:rgba(200,182,255,.03);
 --c-text:#F5F3FF;--c-text-2:#B4B0CC;--c-text-3:#9A96B4;--c-on-primary:#140F2A;--c-accent:#C8B6FF;--c-accent-2:#FF7EC7;--c-lock:#9A96B4}
.cyber{background:
  radial-gradient(55% 30% at 92% 6%,rgba(127,246,255,.20),transparent 70%),
  radial-gradient(60% 34% at 0% 34%,rgba(200,182,255,.17),transparent 70%),
  radial-gradient(70% 30% at 100% 70%,rgba(150,120,255,.12),transparent 70%),
  radial-gradient(90% 30% at 30% 104%,rgba(160,120,255,.20),transparent 70%),
  #07070C}
#app.skin::before{content:"";position:absolute;left:-20%;top:-10%;width:90%;height:36%;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.05) 45%,rgba(200,182,255,.08) 50%,transparent 62%);filter:blur(6px)}
.cyber::after{background:radial-gradient(rgba(255,255,255,.035) .6px,transparent .9px) 0 0/3px 3px}
#app .card{background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.035)),rgba(22,21,31,.72);border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 12px 32px rgba(0,0,0,.5),0 0 24px rgba(200,182,255,.08)}
#app .stat.card{position:relative}
#app .card::after,#app .btn-secondary::after,#app .pause::after,#app .node.on::after{content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(220,208,255,.95),rgba(127,246,255,.65) 45%,rgba(255,255,255,.14) 70%,rgba(200,182,255,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
#app .btn-secondary::after,#app .pause::after,#app .node.on::after{inset:-1.5px;padding:1.5px;background:linear-gradient(90deg,#C8B6FF,#7FF6FF)}
#app .node.on::after{background:linear-gradient(135deg,#FFFFFF,#C8B6FF 45%,#7FF6FF)}
#app .btn-primary{background:linear-gradient(100deg,#FFFFFF 0%,#EDE6FF 30%,#C8B6FF 62%,#BFF9FF 100%);color:#140F2A;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 26px rgba(200,182,255,.5),0 0 60px rgba(127,246,255,.18),inset 0 1px 0 #fff,inset 0 -2px 0 rgba(90,60,180,.18)}
#app .btn-primary::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.75) 24%,transparent 32%,transparent 60%,rgba(127,246,255,.35) 70%,transparent 80%)}
#app .btn-secondary{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(22,21,31,.60);border:1.5px solid transparent;color:#EFEBFF;box-shadow:0 0 16px rgba(200,182,255,.14),inset 0 1px 0 rgba(255,255,255,.14)}
#app .brk{--bc:#D9CCFF}
#app .brk::before{filter:drop-shadow(0 0 3px rgba(127,246,255,.7))}
#app .acc{color:#C8B6FF}
#app .meta{color:var(--c-text-3)}
#app .meta b{color:#7FF6FF}
#app .title{background:linear-gradient(95deg,#FFFFFF 10%,#E3D8FF 40%,#C8B6FF 60%,#9FF8FF 88%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 0 10px rgba(200,182,255,.55)) drop-shadow(0 0 22px rgba(127,246,255,.25))}
#app .title small{-webkit-text-fill-color:#B4B0CC;border-color:rgba(200,182,255,.3)}
#app .art img{border:1px solid rgba(220,210,255,.6);box-shadow:0 0 0 1px rgba(127,246,255,.25),0 0 30px rgba(200,182,255,.45),0 0 60px rgba(127,246,255,.15)}
#app .legend em{color:var(--c-text-3)}
#app .back{color:#C8B6FF}
#app .seg i{background:rgba(200,190,255,.16)}
#app .node{background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,.02)),rgba(22,21,31,.60);border-color:rgba(200,190,255,.22);color:var(--c-text-3)}
#app .node.on{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(200,182,255,.10));border:1.5px solid transparent;color:#FFFFFF;
  text-shadow:0 0 8px rgba(200,182,255,.9);box-shadow:0 0 0 4px rgba(200,182,255,.10),0 0 26px rgba(200,182,255,.45),0 0 44px rgba(127,246,255,.18)}
#app .nl{color:var(--c-text-3)}
#app .nl.on{color:var(--c-text)}
#app .nl em{color:var(--c-text-3)}
#app .info .chip{border-color:#C8B6FF!important;color:#C8B6FF!important}
#app .hud{background:linear-gradient(#07070C,#0B0A14);box-shadow:0 1px 0 rgba(200,182,255,.18)}
#app .brand svg{filter:drop-shadow(0 0 4px rgba(200,182,255,.8))}
#app .pause{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)),rgba(22,21,31,.60);border:1.5px solid transparent;color:#EFEBFF;box-shadow:0 0 14px rgba(200,182,255,.2)}
#app .prog{background:rgba(200,182,255,.14)}
#app .prog i{background:linear-gradient(90deg,#C8B6FF,#7FF6FF);box-shadow:0 0 10px rgba(200,182,255,.8)}
#app .bot{background:linear-gradient(#0B0A14,#07070C);border-top-color:rgba(200,182,255,.2)}
#app .scrim{background:rgba(6,5,12,.80)}
#app .panel{background:linear-gradient(135deg,rgba(44,40,68,.80),rgba(18,16,30,.82))}
#app .panel .label{color:#C8B6FF}
#app .sw{background:linear-gradient(90deg,rgba(200,182,255,.35),rgba(127,246,255,.3));border-color:#C8B6FF;box-shadow:0 0 8px rgba(200,182,255,.45)}
#app .sw::after{background:#FFFFFF}
#app .tg{border-color:rgba(200,190,255,.22);background:rgba(255,255,255,.03)}
#app .st .chip{background:rgba(200,182,255,.12)!important;border-color:#C8B6FF!important;color:#E3D8FF!important;box-shadow:0 0 12px rgba(200,182,255,.3)!important}
#app .st .chip[style*="accent-2"]{background:rgba(255,126,199,.10)!important;border-color:#FF7EC7!important;color:#FF9ED4!important;box-shadow:none!important}
#app .thumb img{border-color:rgba(220,210,255,.6);box-shadow:0 0 18px rgba(200,182,255,.4)}
#app .bar{background:rgba(200,190,255,.16)}
#app .cnt .n{color:#FFFFFF;text-shadow:0 0 16px rgba(200,182,255,.9),0 0 36px rgba(127,246,255,.4)}
#app .rec .chip{background:rgba(255,126,199,.12);border-color:#FF7EC7;color:#FF9ED4}
#app .unl b{color:#C8B6FF}
/* 运行时外壳 */
html,body{margin:0;height:100%;background:#07070C;overflow:hidden}
#app{position:absolute;left:50%;top:50%;width:390px;height:844px;overflow:hidden;transform-origin:50% 50%;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.screen{position:absolute;inset:0;display:none}.screen.on{display:block}
#s3 #cv{touch-action:none;width:390px;height:592px}
button{cursor:pointer}