nav{background:rgba(13,13,13,.92);border-bottom:1px solid var(--line)}
nav .center a.on::after{bottom:-15px;box-shadow:none}

.hero{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:end;padding:22px 0 40px}
.hero .hero-prompt{margin:0 0 16px}
.hero-title{font-size:clamp(52px,8vw,104px);font-weight:700;letter-spacing:-.04em;line-height:.92;color:var(--fg);margin:0 0 18px;display:flex;align-items:flex-end}
body.attack .hero-title{color:var(--red)}
.blink-block{display:inline-block;width:.42em;height:.78em;background:var(--accent);margin:0 0 .07em .12em;animation:blink 1.05s steps(2) infinite}
body.attack .blink-block{background:var(--red)}
.hero-sub{font-size:13.5px;color:var(--fg-dim);max-width:600px;line-height:1.7}
.hero-sub b{color:var(--fg);font-weight:600}
.hero-sub .o{color:var(--accent)}
.hero-sub .r{color:var(--red)}

.meta-box{position:relative;border:1px dashed var(--line-2);padding:16px 18px 10px;font-size:11px}
.meta-box .bk{font-size:16px;opacity:.45;color:var(--fg-mute)}
.meta-box .bk.tl{top:-9px;left:-5px}.meta-box .bk.tr{top:-9px;right:-5px}.meta-box .bk.bl{bottom:-9px;left:-5px}.meta-box .bk.br{bottom:-9px;right:-5px}
.mb-h{display:flex;align-items:center;gap:10px;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-mute);padding-bottom:10px;margin-bottom:4px;border-bottom:1px dashed var(--line)}
.mb-h .led{width:6px;height:6px}
body.attack .mb-h{color:var(--red)}
body.attack .mb-h .led{background:var(--red);box-shadow:0 0 0 3px rgba(255,110,110,.18);animation:ledR 1s ease-in-out infinite}
.mb-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line)}
.mb-row:last-child{border-bottom:0}
.mb-row .k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute)}
.mb-row .v{color:var(--fg-dim);font-variant-numeric:tabular-nums;text-align:right}
.mb-row .a{color:var(--amber)}
.mb-row .g{color:var(--green)}
.mb-row .r{color:var(--red)}

.stat{position:relative;overflow:hidden;padding:18px 22px 34px}
.stat[data-c=o]{color:var(--accent)}.stat[data-c=g]{color:var(--green)}.stat[data-c=r]{color:var(--fg-mute)}.stat[data-c=b]{color:var(--blue)}
body.attack .stat[data-c=r]{color:var(--red)}
.mini{position:absolute;left:22px;right:22px;bottom:10px;width:calc(100% - 44px);height:18px}
.mini .l{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.45}
.mini .a{display:none}

.topo-card{border:1px solid var(--line);background:var(--bg-2);padding:16px 18px 12px}
.topo-card .bk{font-size:14px;opacity:.35;color:var(--fg-mute)}
.topo-card .bk.tl{top:6px;left:8px}.topo-card .bk.tr{top:6px;right:8px}.topo-card .bk.bl{bottom:6px;left:8px}.topo-card .bk.br{bottom:6px;right:8px}
.topo-head{padding:0 14px}
.topo-foot{border-top:1px solid var(--line);padding:10px 4px 0}
.lk.on{stroke:rgba(125,211,168,.22)}
.lk.org{stroke:rgba(255,140,66,.22)}
.lk.bad{stroke:rgba(255,110,110,.4)}
.nd rect.box{fill:var(--bg);stroke:var(--line-2)}
.nd.st-ok rect.box{stroke:#2c3b33}
.nd.st-org rect.box{stroke:#4a3324}
.nd.st-atk rect.box{stroke:var(--red);stroke-width:1}
.nd.st-bad rect.box{stroke:rgba(255,110,110,.45)}
.nd:hover rect.box,.nd.sel rect.box{stroke:var(--accent)!important}
.nd .topline{stroke-width:1}
.nd.st-ok .topline{stroke:var(--green)}
.nd.st-org .topline{stroke:var(--accent)}
.nd.st-atk .topline,.nd.st-bad .topline{stroke:var(--red)}
.nd .nm{font-weight:600}
.halo{display:none}

.banner{border:1px solid var(--line);background:var(--bg-2)}
.banner.calm{border-color:var(--line);background:var(--bg-2)}
.banner.atk{border-color:rgba(255,110,110,.35);background:#160f0f}
.bn-glyph{width:34px;height:34px;font-size:15px}
.calm .bn-glyph{border-color:rgba(125,211,168,.35)}
.atk .bn-glyph{border-color:rgba(255,110,110,.5)}
.bn-t{font-size:14px}
.atk .bn-t{font-size:13px}
.bn-time{font-size:18px}
.sim-box{display:flex;gap:6px}

.chart-card,.act-card{background:var(--bg-2);border:1px solid var(--line)}
#chart{height:220px}
#grid line{stroke:var(--line);stroke-dasharray:2 4}
.ch-acc{stroke-width:1.5}
.ch-acc-a{fill:rgba(125,211,168,.05)}
.ch-drop{stroke-width:1.5}
.ch-drop-a{fill:rgba(255,110,110,.07)}
.ch-wrap{position:relative}
.ch-x{position:absolute;top:0;bottom:0;width:1px;background:var(--line-2);opacity:0;pointer-events:none;transition:opacity .15s}
.ch-x i{position:absolute;left:-3px;width:7px;height:7px;border-radius:50%}
.ch-x .pa{background:var(--green)}
.ch-x .pd{background:var(--red)}
.ch-tip{position:absolute;top:6px;padding:6px 9px;background:var(--bg);border:1px solid var(--line-2);font-size:10.5px;color:var(--fg-dim);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.ch-tip b{font-weight:600}
.ch-tip .g{color:var(--green)}.ch-tip .r{color:var(--red)}
.ch-wrap:hover .ch-x,.ch-wrap:hover .ch-tip{opacity:1}

.act{background:var(--bg)}
.act.on{background:var(--bg)}

.vec-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.vec-h{display:flex;align-items:baseline;gap:12px;padding:0 4px 12px;border-bottom:1px solid var(--line)}
.vec-h .lay{font-size:16px;font-weight:700;color:var(--fg);letter-spacing:-.01em}
.vec-h .ln{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute)}
.vec-h .vc{margin-left:auto;font-size:10.5px;color:var(--fg-mute)}
.vec-h .vc b{color:var(--fg-dim);font-weight:600}
body.attack .vec-h .vc b{color:var(--red)}
.vrow{display:grid;grid-template-columns:8px minmax(0,1fr) auto 92px;gap:14px;align-items:center;padding:11px 4px;border-bottom:1px solid var(--line);position:relative;transition:background .2s}
.vrow:hover{background:var(--bg-2)}
.vrow .vl{width:6px;height:6px;border-radius:50%;background:var(--line-2);transition:background .3s}
.vrow.on .vl{background:var(--red);animation:blink .9s steps(2) infinite}
.vrow .vn{font-size:13px;font-weight:600;color:var(--fg-dim);transition:color .3s}
.vrow.on .vn{color:var(--fg)}
.vrow .vd{font-size:10.5px;color:var(--fg-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrow .vs{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute);border:1px solid var(--line);padding:1px 6px;white-space:nowrap}
.vrow .vs.ovh{color:var(--blue);border-color:#1f2f40}
.vrow .vs.ag{color:var(--amber);border-color:#3a3220}
.vrow .vr{text-align:right;font-size:12px;color:var(--fg-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.vrow .vr b{font-weight:600;color:var(--fg-dim)}
.vrow.on .vr b{color:var(--red)}
.vrow .vr small{display:block;font-size:9.5px;color:var(--fg-mute);margin-top:1px}
.vrow .vbar{position:absolute;left:0;bottom:-1px;height:1px;background:var(--red);width:0;transition:width .6s ease}

.ndc{background:var(--bg-2);border:1px solid var(--line);border-top:1px solid var(--green)}
.ndc.atk{border-top-color:var(--red);background:#160f0f}
.ndc.org{border-top-color:var(--accent)}
.ndc .spark{color:var(--green);height:30px}
.ndc .spark path{stroke-width:1;opacity:.7}
.ndc.atk .spark path{stroke:var(--red)}

.atk-strip{background:#170e0e}
.toast{background:var(--bg-3)}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;gap:24px;align-items:start}
  .vec-grid{grid-template-columns:1fr;gap:28px}
}
@media (max-width:560px){
  .hero-title{font-size:52px}
  .vrow{grid-template-columns:8px minmax(0,1fr) 80px}
  .vrow .vs{display:none}
}

.stat::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:currentColor;opacity:.55;transform:scaleX(.18);transform-origin:left;transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .3s}
.stat:hover::before{transform:scaleX(1);opacity:.8}
.stat:hover{background:var(--bg-2)}
.stat .k::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:8px;vertical-align:1px}
.mini .l{opacity:.85;stroke-width:1.25}
.mini .a{display:block;fill:currentColor;opacity:.07}
.blink-block{box-shadow:0 0 24px rgba(255,140,66,.4)}
body.attack .blink-block{box-shadow:0 0 24px rgba(255,110,110,.45)}
.hero-prompt::after{box-shadow:0 0 8px rgba(255,140,66,.5)}

.nd .topline{stroke-width:2}
.lpulse{fill:none;stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:lp 2.4s ease-out infinite}
.nd.st-atk .lpulse,.nd.st-bad .lpulse{stroke:#ff6e6e;animation-duration:1s}
@keyframes lp{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}
.lk.on{stroke:rgba(125,211,168,.3)}
.lk.org{stroke:rgba(255,140,66,.3)}

.banner.calm{background:linear-gradient(90deg,rgba(125,211,168,.06),var(--bg-2) 45%)}
.banner.atk{background:linear-gradient(90deg,rgba(255,110,110,.12),#160f0f 50%)}
.calm .bn-glyph{box-shadow:0 0 0 4px rgba(125,211,168,.06)}
.atk .bn-glyph{box-shadow:0 0 0 4px rgba(255,110,110,.1)}
.ndc{border-top-width:2px}
.ndc::after{content:"";position:absolute;left:0;top:-2px;height:2px;width:40%;background:currentColor;opacity:0}
.ndc .spark path{opacity:.9;stroke-width:1.25}
.ndc{position:relative;transition:background .25s}
.ndc:hover{background:var(--bg-3)}

.tln{animation:lineIn .25s ease both,newLine 1.6s ease-out both}
@keyframes newLine{0%{background:rgba(255,140,66,.09)}100%{background:transparent}}
.tln[data-l=x]{animation:lineIn .25s ease both,newLineR 1.6s ease-out both}
@keyframes newLineR{0%{background:rgba(255,110,110,.12)}100%{background:transparent}}

.vec-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:10.5px;color:var(--fg-mute);margin:-8px 0 24px}
.vec-legend .pb{margin-left:8px}
.vec-legend .pb:first-child{margin-left:0}
.vec-prot{display:flex;align-items:center;gap:0;padding:12px 4px 4px;font-size:10.5px;color:var(--fg-mute)}
.vec-prot .pm{display:block;height:3px;width:var(--w);flex-shrink:0}
.vec-prot .pm.ok{background:var(--green)}.vec-prot .pm.part{background:var(--amber)}.vec-prot .pm.no{background:var(--red)}
.vec-prot span{margin-left:12px;white-space:nowrap}
.vec-prot b{font-weight:600}
.vec-prot .g{color:var(--green)}.vec-prot .a{color:var(--amber)}.vec-prot .r{color:var(--red)}
.vrow{grid-template-columns:8px minmax(0,1fr) 74px 92px;align-items:start}
.vrow>.vl{margin-top:7px}
.vrow>.pb,.vrow>.vr{margin-top:2px}
.vrow::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;box-shadow:0 0 8px var(--accent);transition:transform .55s cubic-bezier(.22,1,.36,1)}
.vrow:hover::before{transform:scaleX(1)}
.vrow:hover .vn{color:var(--accent)}
.vrow.on:hover .vn{color:var(--red)}
.vp{font-size:10.5px;color:var(--fg-dim);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp::before{content:"↳ ";color:var(--fg-mute)}
.vsrc{color:var(--fg-mute);margin-right:6px}
.vsrc::after{content:" ·"}
.p-ok .vl{background:#2c4a3b}
.p-part .vl{background:#5a4a26}
.p-no .vl{background:#5a2c2c}
.p-ext .vl{background:#22384f}
.pb{display:inline-block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border:1px solid;text-align:center;white-space:nowrap}
.pb.ok{color:var(--green);border-color:rgba(125,211,168,.35);background:rgba(125,211,168,.06)}
.pb.part{color:var(--amber);border-color:rgba(232,194,117,.35);background:rgba(232,194,117,.06)}
.pb.no{color:var(--red);border-color:rgba(255,110,110,.35);background:rgba(255,110,110,.06)}
.pb.ext{color:var(--blue);border-color:rgba(77,157,224,.35);background:rgba(77,157,224,.06)}
.vrow.on.p-ok .vbar{background:var(--green)}
.vrow.on.p-ok .vr b{color:var(--green)}
.vrow.on.p-ok .vl{background:var(--green)}
.vrow.on.p-part .vbar{background:var(--amber)}
.vrow.on.p-part .vr b{color:var(--amber)}
.vrow.on.p-part .vl{background:var(--amber)}
@media (max-width:560px){
  .vrow{grid-template-columns:8px minmax(0,1fr) 80px}
  .vrow>.pb{display:none}
}