:root{--bg:#0a1020;--panel:#131e34;--panel2:#0e192d;--line:#304361;--txt:#edf4ff;--muted:#a8b8d3;--cyan:#63deeb;--gold:#ffc477;--green:#7ee0b4;--red:#ff8995;--blue:#94b7ff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(ellipse at 15% 0%,#1c3153 0,#0a1020 54%);color:var(--txt);font-family:system-ui,-apple-system,"Microsoft YaHei",sans-serif;line-height:1.58}
header,main,footer{max-width:1180px;margin:auto}
header{padding:32px 20px 20px}
.eyebrow{font-size:12px;letter-spacing:.15em;color:var(--cyan);font-weight:800}
h1{font-size:clamp(27px,4vw,43px);line-height:1.16;margin:9px 0 12px}
h2{font-size:20px;margin:0 0 14px}
h3{font-size:15px;margin:0 0 7px}
p{margin:7px 0}
.muted,.small{color:var(--muted)}
.small{font-size:12px}
main{padding:0 20px 34px;display:grid;gap:15px}
.card{background:linear-gradient(145deg,rgba(20,31,53,.98),rgba(13,23,41,.98));border:1px solid var(--line);border-radius:17px;padding:20px;box-shadow:0 12px 28px #0002}
section{scroll-margin-top:14px}
nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
nav a{color:#dbeaff;text-decoration:none;border:1px solid var(--line);background:#111e34;padding:7px 10px;border-radius:999px;font-size:12px}
nav a:hover{border-color:var(--cyan)}
.tag{display:inline-block;color:var(--cyan);font-weight:800;font-size:11px;letter-spacing:.08em;margin-bottom:8px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.block{display:block;width:100%;text-align:left;border:1px solid #304968;background:#142641;border-radius:12px;padding:12px;color:inherit;font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.block:hover{border-color:var(--cyan);background:#172b47}
.block.active{border-color:var(--cyan);background:#143a43;box-shadow:inset 0 0 0 1px var(--cyan)}
.block b{display:block;font-size:13px}
.block span{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.flow .block{text-align:center;min-height:82px;display:flex;flex-direction:column;justify-content:center;align-items:center}
.arrow{text-align:center;color:var(--cyan);font-size:20px;padding:5px}
.formula{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;background:#091426;border:1px solid #2a3e5d;border-radius:10px;padding:11px 13px;margin:8px 0;overflow-wrap:anywhere;font-size:13px}
.formula strong{color:var(--cyan)}
.callout{border-left:3px solid var(--cyan);background:#0c1b30;border-radius:0 10px 10px 0;padding:11px 13px;font-size:13px;margin-top:10px}
ul{padding-left:20px;margin:7px 0}
li{margin:4px 0}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{border-bottom:1px solid #2c3d59;text-align:left;padding:9px;vertical-align:top}
.table th{color:#d8e7ff;background:#111d32}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
.control{display:grid;grid-template-columns:1fr auto;gap:3px 12px;margin:12px 0}
.control label{font-size:13px}
.control output{font-size:13px;color:var(--cyan);font-weight:800;font-variant-numeric:tabular-nums}
.control input{grid-column:1/3;width:100%;accent-color:var(--cyan)}
select{background:#12233c;color:var(--txt);border:1px solid #334b6b;border-radius:8px;padding:5px 8px;font:inherit;font-size:13px}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
.metric{background:#091426;border:1px solid #263958;border-radius:11px;padding:11px}
.metric .l{font-size:11px;color:var(--muted)}
.metric .v{font-size:clamp(18px,2.5vw,25px);font-weight:850;font-variant-numeric:tabular-nums}
.metric .u{font-size:10px;color:var(--muted)}
button{font:inherit;cursor:pointer}
.btn{background:#172b47;color:var(--txt);border:1px solid #385170;border-radius:10px;padding:9px 12px;text-align:left;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--cyan)}
.btn.active{border-color:var(--cyan);background:#143a43}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.mini{background:#12233c;color:var(--txt);border:1px solid #334b6b;border-radius:8px;padding:5px 10px;font-size:12px}
.mini:hover{border-color:var(--cyan)}
canvas{display:block;width:100%;height:auto;background:#081323;border:1px solid #263958;border-radius:11px}
.pill{display:inline-block;background:#143a43;color:#91f1df;padding:3px 8px;border-radius:99px;font-size:11px;font-weight:800;margin-bottom:9px}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.sigbar{position:relative;margin:14px 0 6px}
.sigbar svg{width:100%;height:40px;display:block}
.spark{animation:spark 3.2s linear infinite}
@keyframes spark{from{transform:translateX(22px)}to{transform:translateX(872px)}}
.sigbar-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding:0 4px}
.mod-detail{margin-top:12px;border:1px solid #2a3e5d;background:#0c1b30;border-radius:12px;padding:14px;font-size:13px;min-height:64px}
.mod-detail h3{color:var(--cyan);margin-bottom:8px}
.kv{display:grid;grid-template-columns:58px 1fr;gap:6px;margin:4px 0;font-size:12px}
.kv span{color:var(--muted)}
.kv p{margin:0}
.jump{display:inline-block;margin-top:8px;font-size:12px;color:var(--cyan);text-decoration:none;border-bottom:1px dashed var(--cyan)}
.bar{height:10px;background:#0a1729;border:1px solid #263958;border-radius:99px;overflow:hidden;margin:6px 0}
.bar i{display:block;height:100%;width:0;background:var(--green);transition:width .15s,background .15s}
.bar.bad i{background:var(--red)}
.chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px;margin:10px 0}
.chain span{background:#0f1e33;border:1px solid #2a3e5d;border-radius:8px;padding:4px 9px;color:var(--muted);transition:.15s}
.chain span.on{background:#143a43;border-color:var(--cyan);color:#c9fbff;font-weight:700}
.dual{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.dnode{background:#0f1e33;border:1px solid #2a3e5d;border-radius:10px;padding:8px 12px;font-size:12px;position:relative;transition:.2s}
.dnode.off{opacity:.32;text-decoration:line-through}
.dnode.hot{border-color:var(--cyan);background:#143a43;box-shadow:0 0 0 1px var(--cyan) inset}
.darrow{color:var(--muted);font-size:14px}
.order{display:grid;gap:8px;margin:8px 0}
.order-item{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#12233c;border:1px solid #334b6b;border-radius:10px;padding:8px 12px;font-size:13px}
.order-item.ok{border-color:var(--green)}
.order-item.bad{border-color:var(--red)}
.order-btns{display:flex;gap:4px}
.order-btns button{background:#0f1e33;color:var(--txt);border:1px solid #334b6b;border-radius:7px;width:26px;height:26px;line-height:1;font-size:12px}
.order-btns button:hover{border-color:var(--cyan)}
.quiz{display:grid;gap:8px}
.quiz button.q{background:#12233c;color:var(--txt);border:1px solid #334b6b;border-radius:10px;padding:10px;text-align:left}
.quiz button.q:hover{border-color:var(--cyan)}
.quiz button.q[aria-pressed="true"]{border-color:var(--cyan);background:#143a43}
.feedback{min-height:25px;color:var(--green);font-size:13px}
footer{padding:0 20px 28px;font-size:12px;color:var(--muted)}
@media(max-width:780px){
  .grid,.grid3,.grid2{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr 1fr}
  .card{padding:15px}
  .metrics{grid-template-columns:1fr 1fr}
  .table{font-size:12px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}
@media print{
  nav,.btnrow,.control input,button{display:none!important}
  .card{break-inside:avoid;box-shadow:none}
  body{background:#fff;color:#000}
  .card{background:#fff;border-color:#999}
}