/*! 捷特王 · jetwong.net —— 550C 开机片头 + 首页样式
 *  由 tools/build.mjs 生成，请勿手工编辑；改动请改 src/ 后重新构建。
 *  动画部分版权归 dsh-550c-boot 作者所有（MIT）：
 *  移植 Ziyang Song (@yannicksong0106)，动画与 HTML 原稿 Voidpocket (@Voidpoket)。
 */

/* ===== ① 片头样式（上游原样，仅把 shadow root 的作用域落到页面） ===== */
body{--amber:#e8a020;--amber-b:#ffc043;--amber-d:#8a5e10;--amber-fade:rgba(232,160,32,.35);--text:#d8c090;--text-dim:#8a7248;--text-faint:#4a3f28;--bg:#050403;--bg-panel:#0a0805;--bg-win:#0d0a06;--red:#e05030;--red-b:#ff7050;--green:#b8c840;--cyan:#4fd1c5;}
  *{box-sizing:border-box;margin:0;padding:0;}
  body{height:100%;}
  body{background:var(--bg);color:var(--text);font-family:"SF Mono",Menlo,Monaco,Consolas,"Courier New",monospace;font-size:12px;line-height:1.55;overflow:hidden;-webkit-font-smoothing:antialiased;}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:900;background:repeating-linear-gradient(to bottom,rgba(232,160,32,.04) 0,rgba(232,160,32,.04) 1px,transparent 1px,transparent 3px);}
  body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:899;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.85) 100%);}

  /* ===== 开机动画 ===== */
  #boot{position:fixed;inset:0;z-index:2000;background:#000;transition:opacity .55s ease;}
  #boot.fade{opacity:0;pointer-events:none;}
  #boot::before{content:"";position:fixed;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0,rgba(255,255,255,.025) 1px,transparent 1px,transparent 4px);pointer-events:none;z-index:2;}
  .boot-stage{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1;}
  .boot-stage svg{width:min(680px,90vw);height:auto;overflow:visible;}
  .white{fill:#fff;stroke:none;}
  .red{fill:#ff2d2d;stroke:none;}
  #logo.finished .white{animation:glowW 2.6s ease-in-out infinite;}
  #logo.finished .red{animation:glowR 2.6s ease-in-out infinite;}
  @keyframes glowW{0%,100%{filter:drop-shadow(0 0 6px rgba(255,255,255,.5));}50%{filter:drop-shadow(0 0 14px rgba(255,255,255,.9));}}
  @keyframes glowR{0%,100%{filter:drop-shadow(0 0 8px rgba(255,45,45,.6));}50%{filter:drop-shadow(0 0 18px rgba(255,45,45,1));}}
  .boot-text{position:absolute;left:0;right:0;bottom:12%;text-align:center;color:rgba(255,255,255,.35);font-family:"Courier New",Consolas,monospace;font-size:12px;letter-spacing:.4em;padding-left:.4em;opacity:0;}
  .boot-text.show{animation:fadeIn .6s ease forwards;}
  .boot-text .cursor{display:inline-block;width:6px;height:12px;background:#fff;margin-left:8px;vertical-align:-2px;animation:blink 1s steps(1) infinite;}
  @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
  @keyframes fadeIn{to{opacity:1;}}

  /* ===== 主界面 ===== */
  #app{height:100%;display:grid;grid-template-rows:26px 1fr 24px;padding:6px;gap:5px;opacity:0;transition:opacity .5s ease;}
  #app.visible{opacity:1;}
  #hud-top{display:flex;align-items:center;gap:14px;padding:0 10px;background:linear-gradient(180deg,#141008,#0a0805);border:1px solid var(--amber-d);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber);}
  #hud-top .brand{font-weight:700;letter-spacing:.2em;text-shadow:0 0 8px var(--amber-fade);}
  #hud-top .sep{color:var(--text-faint);}
  #hud-top .item{color:var(--text-dim);}
  #hud-top .item b{color:var(--amber);font-weight:400;}
  #hud-top .spacer{flex:1;}
  #hud-top .live{color:var(--red);animation:blink 1s steps(1) infinite;}
  #workspace{display:grid;grid-template-columns:1fr 1.7fr 1fr;grid-template-rows:1.1fr 1fr;grid-template-areas:"tele main code" "tele main node";gap:5px;min-height:0;}
  .w{position:relative;display:flex;flex-direction:column;overflow:hidden;background:var(--bg-panel);border:1px solid var(--amber-d);box-shadow:inset 0 0 30px rgba(232,160,32,.03);}
  .w::before,.w::after{content:"";position:absolute;width:8px;height:8px;border-color:var(--amber);z-index:5;pointer-events:none;}
  .w::before{top:-1px;left:-1px;border-top:2px solid;border-left:2px solid;}
  .w::after{bottom:-1px;right:-1px;border-bottom:2px solid;border-right:2px solid;}
  #w-tele{grid-area:tele;}#w-main{grid-area:main;}#w-code{grid-area:code;}#w-node{grid-area:node;}
  .w-head{flex:none;display:flex;align-items:center;gap:8px;padding:4px 8px;background:linear-gradient(180deg,#161006,#0a0805);border-bottom:1px solid var(--amber-d);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);}
  .w-head .led{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 6px var(--green);animation:pulse 1.2s infinite;}
  .w-head .led.red{background:var(--red);box-shadow:0 0 6px var(--red);}
  @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
  .w-head .tag{margin-left:auto;color:var(--text-faint);font-size:9px;letter-spacing:.1em;}
  .w-body{flex:1;overflow:auto;padding:6px 8px;min-height:0;font-size:11px;line-height:1.55;scrollbar-width:thin;scrollbar-color:rgba(232,160,32,.3) transparent;}
  .w-body::-webkit-scrollbar{width:5px;height:5px;}
  .w-body::-webkit-scrollbar-thumb{background:rgba(232,160,32,.25);}
  .dt{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;padding:1px 0;font-variant-numeric:tabular-nums;font-size:10.5px;}
  .dt .k{color:var(--text-faint);letter-spacing:.05em;}
  .dt .v{color:var(--text);text-align:right;}
  .dt .v.ok{color:var(--green);}.dt .v.warn{color:var(--amber-b);}.dt .v.bad{color:var(--red);}.dt .v.dim{color:var(--text-dim);}
  .sect{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-d);padding:6px 0 3px;border-bottom:1px dotted var(--amber-fade);margin-bottom:3px;}
  .sect:first-child{padding-top:0;}
  #mainBody{font-size:11.5px;line-height:1.6;}
  .ln{white-space:pre-wrap;word-break:break-word;}
  .ln.sys{color:var(--amber);}.ln.inf{color:var(--text-dim);}.ln.ok{color:var(--green);}
  .ln.warn{color:var(--amber-b);}.ln.bad{color:var(--red);}.ln.cmd{color:#fff;font-weight:500;}
  .ln.t{color:var(--red);font-weight:700;letter-spacing:.1em;}.ln.sub{color:var(--text-faint);padding-left:3ch;}
  #codeBody{font-size:10.5px;line-height:1.45;font-variant-numeric:tabular-nums;}
  .cln{white-space:pre;color:#a88c50;}.cln.cm{color:var(--text-faint);}
  #nodeGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px 4px;padding:2px;}
  .uav{display:flex;flex-direction:column;align-items:center;gap:1px;transition:all .3s;padding:2px 0;}
  .uav svg{width:34px;height:34px;transition:filter .3s,opacity .3s;filter:drop-shadow(0 0 3px rgba(224,80,48,.6));}
  .uav .id{font-size:7.5px;color:var(--text-faint);letter-spacing:.05em;transition:color .3s;}
  .uav .st{font-size:6.5px;letter-spacing:.05em;color:var(--red);transition:color .3s;}
  .uav.done svg{filter:drop-shadow(0 0 6px rgba(184,200,64,.8));}
  .uav.done .id{color:var(--green);}.uav.done .st{color:var(--green);}
  .uav.writing svg{animation:uavPulse .5s infinite alternate;filter:drop-shadow(0 0 7px rgba(255,192,67,1));}
  @keyframes uavPulse{from{opacity:.4}to{opacity:1}}
  #hud-bot{display:flex;align-items:center;gap:12px;padding:0 10px;background:linear-gradient(180deg,#0d0a06,#050403);border:1px solid var(--amber-d);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--text-dim);font-variant-numeric:tabular-nums;}
  #hud-bot .item b{color:var(--amber);font-weight:400;}
  #hud-bot .spacer{flex:1;}
  #hud-bot .prog{flex:0 0 220px;height:8px;background:#050403;border:1px solid var(--amber-d);position:relative;overflow:hidden;}
  #hud-bot .prog .fill{height:100%;width:0%;background:linear-gradient(90deg,var(--amber-d),var(--amber-b));box-shadow:0 0 8px var(--amber-fade);transition:width .15s linear;}
  #hud-bot .pct{color:var(--amber);font-weight:400;}
  #dim{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.15);opacity:0;pointer-events:none;transition:opacity .4s;}
  #dim.show{opacity:1;}
  .win-popup{position:fixed;z-index:500;min-width:640px;max-width:min(980px,94vw);background:var(--bg-win);border:1px solid var(--amber-d);box-shadow:0 24px 70px rgba(0,0,0,.78),0 0 0 1px rgba(0,0,0,.9),0 0 50px rgba(232,160,32,.1),inset 0 0 24px rgba(232,160,32,.02);opacity:0;transform:scale(.9) translateY(-6px);transition:opacity .22s ease, transform .22s cubic-bezier(.2,1.05,.4,1);overflow:hidden;pointer-events:none;}
  .win-popup.show{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}
  .win-popup.closing{opacity:0;transform:scale(.94) translateY(-4px);}
  .win-popup.danger{border-color:var(--red);box-shadow:0 24px 70px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.9),0 0 60px rgba(224,80,48,.22),inset 0 0 24px rgba(224,80,48,.03);}
  .win-popup.info{border-color:var(--cyan);box-shadow:0 24px 70px rgba(0,0,0,.78),0 0 0 1px rgba(0,0,0,.9),0 0 50px rgba(79,209,197,.14);}
  .wp-title{display:flex;align-items:center;gap:8px;padding:8px 14px;background:linear-gradient(180deg,#1a1208,#0e0a06);border-bottom:1px solid var(--amber-d);font-size:12px;letter-spacing:.12em;color:var(--amber);user-select:none;}
  .win-popup.danger .wp-title{background:linear-gradient(180deg,#2a0e08,#150805);border-bottom-color:rgba(224,80,48,.6);color:var(--red-b);}
  .win-popup.info .wp-title{background:linear-gradient(180deg,#08201c,#051210);border-bottom-color:rgba(79,209,197,.5);color:var(--cyan);}
  .wp-title .wp-ico{width:14px;height:14px;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;}
  .wp-title .wp-name{flex:1;font-weight:500;letter-spacing:.16em;text-transform:uppercase;}
  .wp-title .wp-controls{display:flex;gap:2px;}
  .wp-title .wp-btn{width:20px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--text-dim);border:1px solid transparent;cursor:default;transition:all .15s;}
  .wp-title .wp-btn:hover{background:rgba(232,160,32,.15);color:var(--amber-b);border-color:var(--amber-d);}
  .win-popup.danger .wp-btn:hover{background:rgba(224,80,48,.2);color:var(--red-b);border-color:rgba(224,80,48,.5);}
  .wp-body{padding:18px 22px;font-size:13px;line-height:1.65;color:var(--text);max-height:56vh;overflow:auto;}
  .wp-body::-webkit-scrollbar{width:6px;}
  .wp-body::-webkit-scrollbar-thumb{background:rgba(232,160,32,.25);}
  .wp-row{display:grid;grid-template-columns:auto 1fr;gap:8px 22px;padding:6px 0;font-size:12.5px;font-variant-numeric:tabular-nums;border-bottom:1px dotted rgba(232,160,32,.12);}
  .wp-row:last-child{border-bottom:none;}
  .wp-row .k{color:var(--text-faint);letter-spacing:.08em;text-transform:uppercase;font-size:11px;}
  .wp-row .v{color:var(--text);text-align:right;letter-spacing:.02em;}
  .wp-row .v.ok{color:var(--green);}.wp-row .v.warn{color:var(--amber-b);}.wp-row .v.bad{color:var(--red);}
  .wp-div{height:1px;margin:12px 0;background:linear-gradient(90deg,transparent,var(--amber-fade),transparent);}
  .wp-note{margin-top:14px;padding:10px 14px;background:rgba(232,160,32,.06);border-left:3px solid var(--amber);color:var(--amber-b);font-size:12px;line-height:1.65;}
  .win-popup.danger .wp-note{background:rgba(224,80,48,.08);border-left-color:var(--red);color:#f0b090;}
  .wp-log{background:#040302;border:1px solid var(--text-faint);padding:10px 12px;max-height:150px;overflow-y:auto;font-size:11.5px;line-height:1.6;color:var(--text-dim);}
  .wp-log::-webkit-scrollbar{width:5px;}
  .wp-log::-webkit-scrollbar-thumb{background:rgba(232,160,32,.2);}
  .wp-log .ll{white-space:pre-wrap;word-break:break-word;}
  .wp-log .ll.ok{color:var(--green);}.wp-log .ll.warn{color:var(--amber-b);}.wp-log .ll.bad{color:var(--red);}.wp-log .ll.hl{color:var(--amber);}
  .wp-prog{height:8px;background:#040302;border:1px solid var(--text-faint);position:relative;overflow:hidden;margin:8px 0;}
  .wp-prog .f{height:100%;width:0%;background:linear-gradient(90deg,var(--amber-d),var(--amber-b));box-shadow:0 0 8px var(--amber-fade);transition:width .2s linear;}
  .win-popup.danger .wp-prog .f{background:linear-gradient(90deg,#8a2010,var(--red-b));box-shadow:0 0 8px rgba(224,80,48,.5);}
  .wp-btns{display:flex;gap:8px;margin-top:16px;justify-content:flex-end;}
  .wp-btn-b{padding:6px 20px;background:linear-gradient(180deg,#1a1208,#0a0805);border:1px solid var(--amber-d);color:var(--amber);font-family:inherit;font-size:12px;letter-spacing:.15em;text-transform:uppercase;cursor:default;transition:all .15s;}
  .wp-btn-b:hover{background:rgba(232,160,32,.15);border-color:var(--amber);color:var(--amber-b);box-shadow:0 0 14px rgba(232,160,32,.22);}
  .wp-btn-b.primary{background:linear-gradient(180deg,#3a2408,#1a1005);border-color:var(--amber);color:var(--amber-b);}
  .wp-btn-b.primary:hover{background:rgba(232,160,32,.25);box-shadow:0 0 18px rgba(232,160,32,.42);}
  .win-popup.danger .wp-btn-b{border-color:rgba(224,80,48,.6);color:var(--red-b);}
  .win-popup.danger .wp-btn-b:hover{background:rgba(224,80,48,.2);border-color:var(--red);box-shadow:0 0 14px rgba(224,80,48,.4);}
  .win-popup.danger .wp-btn-b.primary{background:linear-gradient(180deg,#3a0e08,#1a0505);border-color:var(--red);color:#ffb090;}
  .win-popup.danger .wp-btn-b.primary:hover{background:rgba(224,80,48,.35);box-shadow:0 0 22px rgba(224,80,48,.6);}
  .wp-status{display:flex;align-items:center;gap:10px;padding:6px 14px;background:linear-gradient(180deg,#0e0a06,#080604);border-top:1px solid var(--amber-d);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);font-variant-numeric:tabular-nums;}
  .win-popup.danger .wp-status{border-top-color:rgba(224,80,48,.4);}
  .wp-status .spacer{flex:1;}
  .wp-alert-strip{height:2px;width:100%;background:repeating-linear-gradient(90deg,var(--red) 0 10px, transparent 10px 20px);animation:alertMove 1s linear infinite;}
  @keyframes alertMove{from{background-position:0 0;}to{background-position:20px 0;}}
  .wp-meter{display:flex;align-items:baseline;gap:10px;padding:8px 0;font-variant-numeric:tabular-nums;}
  .wp-meter .big{font-size:34px;color:var(--amber-b);letter-spacing:.02em;text-shadow:0 0 14px rgba(232,160,32,.5);}
  .wp-meter .unit{font-size:12px;color:var(--text-dim);letter-spacing:.06em;text-transform:uppercase;}
  .win-popup.danger .wp-meter .big{color:var(--red-b);text-shadow:0 0 14px rgba(224,80,48,.6);}
  .wp-wave{display:flex;align-items:flex-end;gap:1px;height:44px;padding:4px;background:#040302;border:1px solid var(--text-faint);}
  .wp-wave i{flex:1;background:linear-gradient(180deg,var(--amber),var(--amber-d));height:10%;transition:height .1s linear;}
  #final{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:800;padding:52px 110px;background:#0a0805;border-top:1px solid var(--amber);border-bottom:1px solid var(--amber);box-shadow:0 0 80px rgba(232,160,32,.55),0 0 180px rgba(232,160,32,.22),inset 0 0 80px rgba(232,160,32,.08);color:var(--amber-b);font-size:clamp(30px,4.4vw,58px);letter-spacing:.26em;text-align:center;text-shadow:0 0 14px rgba(232,160,32,.95),0 0 40px rgba(232,160,32,.6);white-space:nowrap;font-weight:500;clip-path:inset(0 50% 0 50%);opacity:0;transition:clip-path .48s cubic-bezier(.7,0,.2,1), opacity .2s ease;}
  #final.show{opacity:1;clip-path:inset(0 0 0 0);}
  #final::before,#final::after{content:"";position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--amber-b);box-shadow:0 0 20px 4px rgba(232,160,32,.9);opacity:0;pointer-events:none;}
  #final::before{left:50%;}#final::after{right:50%;}
  #final.show::before{animation:edgeLeft .48s cubic-bezier(.7,0,.2,1) forwards;}
  #final.show::after{animation:edgeRight .48s cubic-bezier(.7,0,.2,1) forwards;}
  @keyframes edgeLeft{0%{left:50%;opacity:1;}90%{left:0;opacity:1;}100%{left:0;opacity:0;}}
  @keyframes edgeRight{0%{right:50%;opacity:1;}90%{right:0;opacity:1;}100%{right:0;opacity:0;}}
  #hint{position:fixed;left:0;right:0;bottom:8px;z-index:700;text-align:center;font-size:10px;letter-spacing:.25em;color:var(--text-faint);opacity:0;transition:opacity .6s;pointer-events:none;text-transform:uppercase;}
  #hint.show{opacity:.7;}

/* ===== ② 增强层样式（终端质感 / 数据自洽 / 面板深度） ===== */
/* ── 终端质感 ─────────────────────────────────────────────────────────── */
		/* Cascadia Mono for Latin, NSimSun for CJK: the Windows fixed-pitch pair. */
		body{font-family:"Cascadia Mono",Consolas,NSimSun,"新宋体","Microsoft YaHei UI",monospace}
		#mainBody .ln[data-ts]::before{content:attr(data-ts);color:var(--phos-dim);margin-right:1ch}
		#mainBody::after{content:"▊";display:block;color:var(--phos);animation:blink 1.06s steps(1) infinite}
		/* Progress bars as character cells rather than a smooth gradient. */
		#hud-bot .prog{background-image:repeating-linear-gradient(90deg,var(--phos-off) 0 4px,transparent 4px 7px)}
		#hud-bot .prog .fill{background-image:repeating-linear-gradient(90deg,var(--phos) 0 4px,transparent 4px 7px);box-shadow:none}
		.wp-prog{background-image:repeating-linear-gradient(90deg,var(--phos-off) 0 4px,transparent 4px 7px)}
		.wp-prog .f{background-image:repeating-linear-gradient(90deg,var(--phos) 0 4px,transparent 4px 7px);box-shadow:none}
		.win-popup.danger .wp-prog .f{background-image:repeating-linear-gradient(90deg,var(--phos-lit) 0 4px,transparent 4px 7px)}

		/* ── 面板深度：固件注入 ───────────────────────────────────────────────── */
		#codeBody .cln::before{content:attr(data-ln) " " attr(data-addr);color:var(--phos-off);margin-right:1ch}
		#w-code .w-head .tag{font-variant-numeric:tabular-nums}
		.w-foot{flex:none;display:flex;align-items:center;gap:12px;padding:3px 8px;
		  border-top:1px solid var(--phos-off);background:var(--bg-win);
		  font-size:9px;letter-spacing:.1em;color:var(--phos-off);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
		.w-foot b{color:var(--phos-dim);font-weight:400}
		.w-foot .hex{color:var(--phos-dim);letter-spacing:.06em}

		/* ── 面板深度：集群节点 ───────────────────────────────────────────────── */
		.uav .sig{display:flex;align-items:flex-end;gap:1px;height:9px;margin-bottom:1px}
		.uav .sig i{width:2px;background:var(--phos-off);opacity:.85}
		.uav.done .sig i{background:var(--phos)}
		.uav.writing .sig i{background:var(--phos)}
		.uav .ver{font-size:5.5px;color:var(--text-faint);letter-spacing:.02em;margin-left:2px}

		/* ── 配色：默认即原作，方案可选 ────────────────────────────────────────
		   The port's palette was never the problem. The author's amber CRT IS the
		   terminal look, and four rounds of "improving" it only carried it further away.
		   So the default here overrides NOTHING: the texture and panel work borrow the
		   ported tokens (the --phos* ladder below resolves to the original amber), and
		   every structural colour the port hardcoded is lifted into a variable whose
		   default is its original literal. The default rendering is the author's own.

		   The schemes at the bottom are opt-in and chosen in Settings. Each is one block
		   of variable overrides — which is the whole point of the indirection: a colour
		   scheme is data now, not another rewrite of the animation.

		   NOTE: never put a backtick in this block. The whole sheet is one template
		   literal, so a single backtick ends it early; scripts/build.mjs refuses to
		   emit a bundle that does not parse, which is what caught this. */
		/* The texture rules speak in --phos*. With no scheme selected these ARE the
		   ported ladder, so none of them changes a thing. */
		body{
		  --phos:var(--amber);
		  --phos-lit:var(--amber-b);
		  --phos-dim:var(--text-dim);
		  --phos-off:var(--text-faint);
		  /* The Desktop window's caption strip, in this scheme. Literals on purpose:
		     client.js reads them off body and pushes them into the two DSH tokens the
		     Desktop preload measures, and a var() chain would come back unresolved. */
		  --caption-fill:#141008; --caption-symbol:#e8a020;
		  /* Structural colours the port hardcoded, as variables whose defaults are the
		     port's own literals. --glow-rgb is the one triple every tint derives from. */
		  --glow-rgb:232,160,32;
		  --head-top:#141008; --head-top-2:#161006;
		  --title-top:#1a1208; --title-bottom:#0e0a06;
		  --btn-top:#3a2408; --btn-bottom:#1a1005;
		  --uav-glow:drop-shadow(0 0 3px rgba(224,80,48,.6));
		  --uav-done-glow:drop-shadow(0 0 6px rgba(184,200,64,.8));
		  --uav-write-glow:drop-shadow(0 0 7px rgba(255,192,67,1));
		}
		/* The port's own rules, restated through those variables: identical output. */
		#hud-top{background:linear-gradient(180deg,var(--head-top),var(--bg-panel))}
		.w{box-shadow:inset 0 0 30px rgba(var(--glow-rgb),.03)}
		.w-head{background:linear-gradient(180deg,var(--head-top-2),var(--bg-panel))}
		.w-body{scrollbar-color:rgba(var(--glow-rgb),.3) transparent}
		.w-body::-webkit-scrollbar-thumb{background:rgba(var(--glow-rgb),.25)}
		#hud-bot{background:linear-gradient(180deg,var(--bg-win),var(--bg))}
		.win-popup{box-shadow:0 24px 70px rgba(0,0,0,.78),0 0 0 1px rgba(0,0,0,.9),0 0 50px rgba(var(--glow-rgb),.1),inset 0 0 24px rgba(var(--glow-rgb),.02)}
		.wp-title{background:linear-gradient(180deg,var(--title-top),var(--title-bottom))}
		.wp-title .wp-btn:hover{background:rgba(var(--glow-rgb),.15);color:var(--amber-b);border-color:var(--amber-d)}
		.wp-body::-webkit-scrollbar-thumb{background:rgba(var(--glow-rgb),.25)}
		.wp-row{border-bottom:1px dotted rgba(var(--glow-rgb),.12)}
		.wp-note{background:rgba(var(--glow-rgb),.06)}
		.wp-log::-webkit-scrollbar-thumb{background:rgba(var(--glow-rgb),.2)}
		.wp-btn-b{background:linear-gradient(180deg,var(--title-top),var(--bg-panel))}
		.wp-btn-b:hover{background:rgba(var(--glow-rgb),.15);border-color:var(--amber);color:var(--amber-b);box-shadow:0 0 14px rgba(var(--glow-rgb),.22)}
		.wp-btn-b.primary{background:linear-gradient(180deg,var(--btn-top),var(--btn-bottom))}
		.wp-btn-b.primary:hover{background:rgba(var(--glow-rgb),.25);box-shadow:0 0 18px rgba(var(--glow-rgb),.42)}
		.wp-meter .big{text-shadow:0 0 14px rgba(var(--glow-rgb),.5)}
		.wp-wave i{background:linear-gradient(180deg,var(--amber),var(--amber-d))}
		.uav svg{filter:var(--uav-glow)}
		.uav.done svg{filter:var(--uav-done-glow)}
		.uav.writing svg{filter:var(--uav-write-glow)}
		#final{background:var(--bg-panel);border-top-color:var(--amber);border-bottom-color:var(--amber);
		  box-shadow:0 0 80px rgba(var(--glow-rgb),.55),0 0 180px rgba(var(--glow-rgb),.22),inset 0 0 80px rgba(var(--glow-rgb),.08);
		  text-shadow:0 0 14px rgba(var(--glow-rgb),.95),0 0 40px rgba(var(--glow-rgb),.6)}
		#final::before,#final::after{background:var(--amber-b);box-shadow:0 0 20px 4px rgba(var(--glow-rgb),.9)}

		/* ── 配色方案（可选）────────────────────────────────────────────────────
		   Opt-in, chosen in Settings, applied as data-scheme on the overlay host.
		   Amber is the author's own and deliberately has no block: selecting it clears
		   the attribute and the defaults above take over again. */
		body[data-scheme="green"]{
		  --amber:#4ad46a; --amber-b:#a6ffbb; --amber-d:#1d5a2c; --amber-fade:rgba(74,212,106,.3);
		  --text:#8fe0a4; --text-dim:#4e8a5e; --text-faint:#27452f;
		  --bg:#010601; --bg-panel:#041007; --bg-win:#06160c;
		  --red:#ff7043; --red-b:#ffa07a; --green:#a6ffbb; --cyan:#7fe0d0;
		  --glow-rgb:74,212,106;
		  --caption-fill:#08180c; --caption-symbol:#4ad46a;
		  --head-top:#08180c; --head-top-2:#0a1c0f; --title-top:#0b1e12; --title-bottom:#05120a;
		  --btn-top:#123a1c; --btn-bottom:#08180c;
		  --uav-glow:drop-shadow(0 0 3px rgba(255,112,67,.6));
		  --uav-done-glow:drop-shadow(0 0 6px rgba(166,255,187,.8));
		  --uav-write-glow:drop-shadow(0 0 7px rgba(166,255,187,1));
		}
		body[data-scheme="cyan"]{
		  --amber:#3fc8dc; --amber-b:#a6f0ff; --amber-d:#17515e; --amber-fade:rgba(63,200,220,.3);
		  --text:#8fd4e2; --text-dim:#4d8291; --text-faint:#26454e;
		  --bg:#010608; --bg-panel:#041013; --bg-win:#06161a;
		  --red:#ff5c7a; --red-b:#ff8fa3; --green:#7ff0d0; --cyan:#a6f0ff;
		  --glow-rgb:63,200,220;
		  --caption-fill:#08181d; --caption-symbol:#3fc8dc;
		  --head-top:#08181d; --head-top-2:#0a1c22; --title-top:#0b1e24; --title-bottom:#051216;
		  --btn-top:#12383f; --btn-bottom:#08181d;
		  --uav-glow:drop-shadow(0 0 3px rgba(255,92,122,.6));
		  --uav-done-glow:drop-shadow(0 0 6px rgba(127,240,208,.8));
		  --uav-write-glow:drop-shadow(0 0 7px rgba(166,240,255,1));
		}
		body[data-scheme="white"]{
		  --amber:#c9c9c9; --amber-b:#ffffff; --amber-d:#4a4a4a; --amber-fade:rgba(255,255,255,.25);
		  --text:#c0c0c0; --text-dim:#7a7a7a; --text-faint:#3d3d3d;
		  --bg:#010101; --bg-panel:#070707; --bg-win:#0c0c0c;
		  --red:#ff5a5a; --red-b:#ff8f8f; --green:#dcdcdc; --cyan:#d0d0d0;
		  --glow-rgb:255,255,255;
		  --caption-fill:#141414; --caption-symbol:#c9c9c9;
		  --head-top:#141414; --head-top-2:#161616; --title-top:#1a1a1a; --title-bottom:#0e0e0e;
		  --btn-top:#3a3a3a; --btn-bottom:#1a1a1a;
		  --uav-glow:drop-shadow(0 0 3px rgba(255,90,90,.6));
		  --uav-done-glow:drop-shadow(0 0 6px rgba(255,255,255,.8));
		  --uav-write-glow:drop-shadow(0 0 7px rgba(255,255,255,1));
		}
		/* ── 桌面窗口的原生按钮（Desktop 专属）──────────────────────────────────
		   The Desktop shell hands Electron titleBarStyle:'hidden' plus a 40px
		   titleBarOverlay, and the OS draws the caption buttons ─ □ ✕ in the window's
		   top-right corner ABOVE the page — no z-index in this document can reach them,
		   which is why the splash adopts them instead of covering them:

		     footprint  the strip is reserved inside #hud-top, so the HUD's own
		                TIME / ● REC are not shoved under the buttons;
		     strip      client.js points the Desktop preload's probe element at a
		                transparent background, so the OS-drawn strip lets the animation
		                show through instead of sitting on an opaque bar.

		   Windows geometry comes from env(titlebar-area-width) — Chromium's reported
		   strip width (~138px at 100%) — and collapses to zero where the overlay is
		   absent. macOS has NO titleBarOverlay (the whole shell contains zero
		   "titlebar-area" hits), so the traffic lights have to be cleared with the
		   shell's own numbers: trafficLightPosition is {x:16,y:18} and the shell's own
		   darwin chrome uses a 52px strip for them, so 16 + 52 + 8px of breathing room
		   = 76px. In fullscreen macOS hides the traffic lights (and Windows hides the
		   overlay buttons), which the preload reports as html[data-fullscreen]; the
		   reservation collapses then too, mirrored onto the host by client.js.

		   A browser tab never sets data-caption at all: its window buttons live outside
		   the viewport. */
		body[data-mode="simple"]{--caption-fill:#050403}
		body[data-caption="windows"] #hud-top{padding-right:calc(100% - env(titlebar-area-width, 100%))}
		body[data-caption="windows"][data-fullscreen] #hud-top{padding-right:0}
		body[data-caption="darwin"] #hud-top{padding-left:76px}
		body[data-caption="darwin"][data-fullscreen] #hud-top{padding-left:0}

/* ===== ③ 首页样式（本站改造） ===== */
/* =========================================================================
   捷特王 · jetwong.net — 首页样式（片头结束后显示的内容）
   -------------------------------------------------------------------------
   本文件由 tools/build.mjs 追加在 550C 动画样式之后，因此可以就近覆盖动画
   原样式。设计语言刻意沿用片头的「琥珀 CRT 终端」：
     · 颜色全部走动画自带的 token（--amber / --amber-b / --bg / --text …）
     · 面板直接复用动画的 .w / .w-head / .w-body / .dt / .sect / .prog 外观
     · 顶栏底栏复用 #hud-top / #hud-bot
   改这里的任何一条规则，都会同时作用于片头与首页，风格保持统一。
   ========================================================================= */

/* ── 页面基础 ─────────────────────────────────────────────────────────── */
html,body{height:100%}
body{overflow-x:hidden;overflow-y:auto}

/* ── 片头 logo：字形由 tools/logo.mjs 生成，改用单线描边绘制 ─────────────
   上游 CSS 给 .white / .red 设的是 fill（图示化字形是细面片）；
   换成单线字形后必须改成 stroke，线宽与原作笔画相当。
   一个字母一条 path，playBoot 的逐字擦除与 #logo.finished 的辉光都照旧。 */
#logo path.white,#logo path.red{
  fill:none;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;
}
#logo path.white{stroke:#fff}
#logo path.red{stroke:#ff2d2d}

/* ── 片头覆盖层（动画挂在 body 上的一层 fixed 舞台） ───────────────────── */
#dsh550c-stage{
  position:fixed;inset:0;z-index:1000;height:100%;
  background:var(--bg);overflow:hidden;
  transition:opacity .62s ease;
}
html[data-550c="ready"] #dsh550c-stage{opacity:0;pointer-events:none}

/* ── 首页主体：未就绪前隐藏，就绪后像 CRT 上电一样显现 ─────────────────── */
#site{
  position:relative;z-index:10;
  min-height:100vh;padding:6px;
  display:flex;flex-direction:column;gap:5px;
  opacity:0;visibility:hidden;
}
html[data-550c="ready"] #site{
  opacity:1;visibility:visible;
  animation:jwCrtOn .68s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes jwCrtOn{
  0%  {opacity:0;transform:scaleY(.015);filter:brightness(3.4) contrast(.25)}
  25% {opacity:1;transform:scaleY(.55); filter:brightness(2.2) contrast(.5)}
  55% {transform:scaleY(1.02);filter:brightness(1.35) contrast(1.05)}
  100%{transform:scaleY(1);filter:none}
}
@media (prefers-reduced-motion:reduce){
  html[data-550c="ready"] #site{animation:none}
  .jw-mark,.jw-badge{animation:none}
}

/* 片头播放期间的“跳过”提示（动画自带 #hint 样式，这里只调层高与文案排版） */
#hint{z-index:2100;font-size:10px}
#hint kbd{
  font-family:inherit;border:1px solid var(--amber-d);border-radius:2px;
  padding:0 4px;color:var(--text-dim);
}
html[data-550c="ready"] #hint{display:none}

/* ── 顶栏 / 底栏 ──────────────────────────────────────────────────────── */
#site #hud-top{flex:none;min-height:26px}
#site #hud-bot{flex:none;min-height:24px;gap:10px;overflow:hidden;padding:3px 10px}
#hud-bot a{color:var(--text-dim);text-decoration:none;border-bottom:1px dotted var(--amber-fade);transition:color .15s}
#hud-bot a:hover{color:var(--amber-b)}
#hud-bot .jw-copy{color:var(--text-faint)}

/* ── 主视觉 ───────────────────────────────────────────────────────────── */
#jw-hero{
  flex:1;min-height:min(50vh,400px);position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:48px 24px;
}
.jw-grid{
  position:absolute;left:50%;bottom:-8%;width:150%;height:55%;transform:translateX(-50%);
  background:
    repeating-linear-gradient(90deg,rgba(var(--glow-rgb),.11) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(0deg,rgba(var(--glow-rgb),.11) 0 1px,transparent 1px 34px);
  -webkit-mask-image:radial-gradient(ellipse at 50% 100%,#000 0%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 100%,#000 0%,transparent 72%);
  pointer-events:none;
}
.jw-mark{
  position:relative;font-size:clamp(46px,11.5vw,128px);line-height:1.02;font-weight:500;
  color:var(--amber-b);letter-spacing:.16em;text-indent:.16em;
  animation:jwPulse 3.6s ease-in-out infinite;
}
@keyframes jwPulse{
  0%,100%{text-shadow:0 0 16px rgba(var(--glow-rgb),.50),0 0 54px rgba(var(--glow-rgb),.26)}
  50%    {text-shadow:0 0 22px rgba(255,192,67,.72),0 0 76px rgba(var(--glow-rgb),.40)}
}
.jw-sub{
  position:relative;color:var(--text-dim);text-transform:uppercase;
  font-size:clamp(10px,1.5vw,13px);letter-spacing:.44em;text-indent:.44em;
}
.jw-rule{position:relative;width:min(560px,78%);height:1px;
  background:linear-gradient(90deg,transparent,var(--amber-fade),transparent)}
.jw-lead{
  position:relative;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;font-size:clamp(13px,1.9vw,17px);
  color:var(--text);letter-spacing:.1em;
}
.jw-badge{
  padding:3px 12px;border:1px solid var(--amber);background:rgba(var(--glow-rgb),.09);
  color:var(--amber-b);text-transform:uppercase;font-size:clamp(9px,1.2vw,11px);
  letter-spacing:.26em;text-indent:.26em;animation:jwBadge 2.6s steps(1) infinite;
}
@keyframes jwBadge{0%,72%{opacity:1}73%,100%{opacity:.42}}
.jw-tag{position:relative;color:var(--text-dim);font-size:clamp(11px,1.6vw,13.5px);letter-spacing:.1em}

/* ── 信息面板 ─────────────────────────────────────────────────────────── */
#jw-panels{flex:none;display:grid;grid-template-columns:1.15fr 1fr;gap:5px}
#jw-panels .w{min-height:190px}
.jw-para{color:var(--text-dim);font-size:11.5px;line-height:1.78}
.jw-note{margin-top:8px;padding:8px 10px;background:rgba(var(--glow-rgb),.06);
  border-left:2px solid var(--amber);color:var(--amber-b);font-size:11px;line-height:1.7}

/* 字符单元进度条（与增强层的进度条同一套做法） */
.jw-prog{display:flex;align-items:center;gap:10px;margin:8px 0 2px}
.jw-prog .bar{
  flex:1;height:9px;position:relative;overflow:hidden;
  border:1px solid var(--amber-d);background:#050403;
  background-image:repeating-linear-gradient(90deg,rgba(74,63,40,.9) 0 4px,transparent 4px 7px);
}
.jw-prog .bar i{
  display:block;height:100%;width:0;
  background-image:repeating-linear-gradient(90deg,var(--amber) 0 4px,transparent 4px 7px);
  box-shadow:0 0 10px rgba(var(--glow-rgb),.35);
  transition:width 1.6s cubic-bezier(.2,.9,.15,1);
}
.jw-prog .pct{color:var(--amber);font-variant-numeric:tabular-nums;font-size:10.5px;
  letter-spacing:.1em;min-width:4ch;text-align:right}

/* ── 底栏控件 ─────────────────────────────────────────────────────────── */
#site .wp-btn-b{cursor:pointer;padding:3px 12px;font-size:10px;letter-spacing:.16em}
.jw-seg{display:inline-flex;border:1px solid var(--amber-d)}
.jw-seg button{
  padding:3px 11px;background:transparent;border:0;border-left:1px solid var(--amber-d);
  color:var(--text-dim);font-family:inherit;font-size:10px;letter-spacing:.16em;
  cursor:pointer;transition:all .15s;
}
.jw-seg button:first-child{border-left:0}
.jw-seg button:hover{background:rgba(var(--glow-rgb),.14);color:var(--amber-b)}
.jw-seg button[aria-pressed="true"]{background:rgba(var(--glow-rgb),.22);color:var(--amber-b);
  box-shadow:inset 0 0 12px rgba(var(--glow-rgb),.25)}

/* ── 配色选择（琥珀 / 绿 / 青 / 白） ──────────────────────────────────── */
.jw-ctl{display:inline-flex;align-items:center;gap:6px}
.jw-ctl-label{color:var(--text-faint);font-size:9.5px;letter-spacing:.14em}
.jw-seg button[data-scheme]::before{
  content:"";display:inline-block;width:7px;height:7px;margin-right:5px;
  vertical-align:-1px;border:1px solid rgba(255,255,255,.28);
}
.jw-seg button[data-scheme="amber"]::before{background:#e8a020}
.jw-seg button[data-scheme="green"]::before{background:#4ad46a}
.jw-seg button[data-scheme="cyan"]::before{background:#3fc8dc}
.jw-seg button[data-scheme="white"]::before{background:#c9c9c9}
.jw-seg button[data-scheme="magenta"]::before{background:#e054d0}
.jw-seg button[data-scheme="blue"]::before{background:#4a9eff}
.jw-seg button[data-scheme="violet"]::before{background:#a06bff}

/* ── 附加配色方案（本站新增） ────────────────────────────────────────────
   上游只有 琥珀（默认）/ 绿 / 青 / 白 四套；下面三套是这里加的。
   刻意写在 site.css 而不是 src/vendor/：vendor 是抽取来的上游文件，
   重跑 extract.mjs 会把它整份覆盖掉，新增的配色就没了。

   加一套 = 抄一个块换色值，然后在 index.html 加个按钮、在 glue.js 的
   SCHEMES 里登记一下。变量清单与上游一致：
     主色三级(--amber/-b/-d) + 淡色 + 文字三级 + 背景三级 + 语义色(--red/--green/--cyan)
     + --glow-rgb + 面板/标题/按钮渐变 + 无人机辉光
   注意 --glow-rgb 是必填项：站点里所有半透明主色都写成 rgba(var(--glow-rgb), …)。
   data-scheme 挂在 <body> 上（挂 <html> 会被 body 自己的 token 声明盖住）。 */
body[data-scheme="magenta"]{
  --amber:#e054d0; --amber-b:#ff9ae8; --amber-d:#5e1d54; --amber-fade:rgba(224,84,208,.3);
  --text:#e09ad8; --text-dim:#8a4d82; --text-faint:#452640;
  --bg:#080105; --bg-panel:#130510; --bg-win:#190715;
  --red:#ff5a6e; --red-b:#ff92a2; --green:#8ce8a8; --cyan:#8fd8ff;
  --glow-rgb:224,84,208;
  --caption-fill:#1a0716; --caption-symbol:#e054d0;
  --head-top:#1a0716; --head-top-2:#1e0a1a; --title-top:#220c1e; --title-bottom:#120610;
  --btn-top:#3c1440; --btn-bottom:#1a0716;
  --uav-glow:drop-shadow(0 0 3px rgba(255,90,110,.6));
  --uav-done-glow:drop-shadow(0 0 6px rgba(255,154,232,.8));
  --uav-write-glow:drop-shadow(0 0 7px rgba(255,154,232,1));
}
body[data-scheme="blue"]{
  --amber:#4a9eff; --amber-b:#a8d4ff; --amber-d:#123a66; --amber-fade:rgba(74,158,255,.3);
  --text:#9cc4e8; --text-dim:#4d6f96; --text-faint:#26384d;
  --bg:#01040a; --bg-panel:#040c18; --bg-win:#061120;
  --red:#ff6a6a; --red-b:#ffa0a0; --green:#7fe8b0; --cyan:#a8d4ff;
  --glow-rgb:74,158,255;
  --caption-fill:#081524; --caption-symbol:#4a9eff;
  --head-top:#081524; --head-top-2:#0a1a2c; --title-top:#0b1e32; --title-bottom:#05101f;
  --btn-top:#123352; --btn-bottom:#081524;
  --uav-glow:drop-shadow(0 0 3px rgba(255,106,106,.6));
  --uav-done-glow:drop-shadow(0 0 6px rgba(168,212,255,.8));
  --uav-write-glow:drop-shadow(0 0 7px rgba(168,212,255,1));
}
body[data-scheme="violet"]{
  --amber:#a06bff; --amber-b:#d0b0ff; --amber-d:#3d2266; --amber-fade:rgba(160,107,255,.3);
  --text:#c0a4e8; --text-dim:#6d5496; --text-faint:#382a4d;
  --bg:#04010a; --bg-panel:#0b0418; --bg-win:#100722;
  --red:#ff6a9a; --red-b:#ffa0c0; --green:#8ce8c0; --cyan:#b0c8ff;
  --glow-rgb:160,107,255;
  --caption-fill:#120a22; --caption-symbol:#a06bff;
  --head-top:#120a22; --head-top-2:#150c28; --title-top:#180e2e; --title-bottom:#0c071c;
  --btn-top:#2c1a4e; --btn-bottom:#120a22;
  --uav-glow:drop-shadow(0 0 3px rgba(255,106,154,.6));
  --uav-done-glow:drop-shadow(0 0 6px rgba(208,176,255,.8));
  --uav-write-glow:drop-shadow(0 0 7px rgba(208,176,255,1));
}

/* 方案变多后把配色按钮收窄，桌面上仍能一行放下 */
.jw-seg button[data-scheme]{padding:3px 8px}

/* ── 可读性：小字在 2K 屏上偏淡 ──────────────────────────────────────────
   上游的文字层级是为「全屏动画 + 暗室」调的：--text-faint 在面板底色上只有
   1.5~1.9:1，--text-dim 约 3.2~4.7:1，而 WCAG AA 对小字要求 4.5:1 ——
   2K 分辨率下这些小字（面板键名、分区标题、底栏信息）基本看不清。

   修法：只改「最终首页」的文字层级，片头（#dsh550c-stage）保持作者原色不动。
   每套配色给一组提亮值（向该方案的主文字色靠拢，色相不变），全部 ≥4.6:1；
   同时把最小的几档字号上调半档。想更亮/更暗就调下面这些值。 */
#site{
  --text-faint:#91805c;   /* 原 #4a3f28（1.94:1）→ 5.16:1 */
  --text-dim:#a1895e;     /* 原 #8a7248（4.36:1）→ 5.99:1 */
}
body[data-scheme="green"]   #site{--text-faint:#5b936a;--text-dim:#62a473}  /* 5.35 / 6.52 */
body[data-scheme="cyan"]    #site{--text-faint:#5b8d98;--text-dim:#619ba9}  /* 5.21 / 6.19 */
body[data-scheme="white"]   #site{--text-faint:#7f7f7f;--text-dim:#8f8f8f}  /* 5.00 / 6.23 */
body[data-scheme="magenta"] #site{--text-faint:#9f6998;--text-dim:#a4649c}  /* 4.69 / 4.62 */
body[data-scheme="blue"]    #site{--text-faint:#617e9b;--text-dim:#6589af}  /* 4.63 / 5.34 */
body[data-scheme="violet"]  #site{--text-faint:#8771a7;--text-dim:#886eb0}  /* 4.73 / 4.67 */

/* 小字字号上调半档（片头字号不变） */
#site .dt{font-size:11.5px}
#site .dt .k{letter-spacing:.04em}
/* 分区标题原本用 --amber-d（约 3.5:1），改用提亮后的 --text-dim */
#site .sect{font-size:10px;color:var(--text-dim)}
#site .w-head{font-size:10.5px}
#site #hud-top{font-size:11px}
#site #hud-bot{font-size:10.5px}
#site .jw-para{font-size:12px}
#site .jw-prog .pct{font-size:11px}
#site .jw-ctl-label{font-size:10px}

/* ── 自适应 ───────────────────────────────────────────────────────────── */
@media (max-width:900px){
  #hud-top .item.opt{display:none}
}
@media (max-width:820px){
  #jw-panels{grid-template-columns:1fr}
  #jw-panels .w{min-height:0}
  /* 手机上一屏放得下：hero 不再撑最小高度，交给 flex 分配 */
  #jw-hero{min-height:0;padding:28px 16px}
}
@media (max-width:640px){
  #site{padding:4px}
  .jw-ctl{gap:4px}
  .jw-ctl-label{display:none}
  .jw-seg button{padding:3px 8px;letter-spacing:.08em}
  #jw-hero{padding:32px 14px;gap:12px}
  #site #hud-bot{flex-wrap:wrap;gap:4px 10px;padding:5px 8px}
  .jw-lead{gap:8px}
}

/* ── 大屏（2K / 4K）：整体字号放大一档 ───────────────────────────────────
   布局本身是弹性的，在 2560×1440 这类屏幕上缺的是字号：基准 12px 偏小，
   小字即使对比度达标也吃力。这里按视口宽度分两档放大（片头不受影响）。
   hero 里几个 clamp() 的上限也要一起放宽，否则会被原来的 max 卡住。 */
@media (min-width:1700px){
  #site{font-size:15px}
  #site #hud-top{font-size:13px;min-height:30px}
  #site #hud-bot{font-size:12.5px;min-height:28px}
  #site .w-head{font-size:12.5px;padding:6px 10px}
  #site .sect{font-size:12px}
  #site .dt{font-size:13.5px}
  #site .jw-para{font-size:14px}
  #site .jw-prog .pct{font-size:13px}
  #site .jw-prog .bar{height:11px}
  #site .jw-ctl-label{font-size:12px}
  #site .wp-btn-b,#site .jw-seg button{font-size:12px;padding:4px 12px}
  #site .jw-seg button[data-scheme]{padding:4px 10px}
  #jw-panels .w{min-height:250px}
  #jw-hero{padding:64px 32px;gap:20px}
  .jw-mark{font-size:clamp(128px,7.6vw,196px)}
  .jw-sub{font-size:15px}
  .jw-lead{font-size:20px}
  .jw-badge{font-size:13px;padding:4px 14px}
  .jw-tag{font-size:15px}
}
@media (min-width:2400px){
  #site{font-size:17px}
  #site #hud-top{font-size:15px;min-height:34px}
  #site #hud-bot{font-size:14px;min-height:32px}
  #site .w-head{font-size:14px}
  #site .sect{font-size:13.5px}
  #site .dt{font-size:15.5px}
  #site .jw-para{font-size:16px}
  #site .jw-prog .pct{font-size:15px}
  #site .jw-ctl-label{font-size:13.5px}
  #site .wp-btn-b,#site .jw-seg button{font-size:13.5px}
  #jw-panels .w{min-height:300px}
  .jw-mark{font-size:clamp(196px,8vw,248px)}
  .jw-sub{font-size:17px}
  .jw-lead{font-size:23px}
  .jw-tag{font-size:17px}
  .jw-badge{font-size:15px}
}