:root { --bg:#030b12; --panel:#071923; --line:#174153; --cyan:#2de2e6; --blue:#20a4f3; --green:#40ff8d; --amber:#ffbd4a; --red:#ff4057; --text:#e6f7ff; --muted:#82a6b5; }
* { box-sizing:border-box; }
body { min-height:100vh; color:var(--text); background:radial-gradient(circle at 75% -20%,#123b4b 0,transparent 38%),var(--bg); font-family:Inter,system-ui,sans-serif; }
.panel { background:linear-gradient(145deg,rgba(10,34,46,.96),rgba(4,18,27,.97)); border:1px solid var(--line); border-radius:.45rem; box-shadow:0 10px 35px #0007,inset 0 0 25px #1dd3ff08; padding:1rem; }
.system-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; border-top:2px solid var(--cyan); }
h1 { margin:0; font-size:clamp(1.45rem,3vw,2.2rem); letter-spacing:.06em; text-transform:uppercase; }
h2 { margin:0; font-size:1rem; text-transform:uppercase; letter-spacing:.12em; }
h3 { margin:.8rem 0 .4rem; font-size:1.1rem; }
.eyebrow,.panel-heading span { color:var(--cyan); font-size:.72rem; font-weight:700; letter-spacing:.16em; }
.subtitle,.metadata,small { color:var(--muted); }
.status-grid { display:grid; grid-template-columns:repeat(2,minmax(140px,1fr)); gap:.4rem 1.4rem; font:600 .7rem/1.5 monospace; color:var(--muted); }
.status-grid strong { display:block; color:var(--text); }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.75rem; }
.online-badge { border:1px solid currentColor; border-radius:2rem; padding:.25rem .7rem; }
.network-panel { padding-bottom:.6rem; }
.network-visual { min-height:260px; border:1px solid #1c5265; overflow:hidden; background-color:#04131c; background-image:linear-gradient(#1cbad00d 1px,transparent 1px),linear-gradient(90deg,#1cbad00d 1px,transparent 1px); background-size:24px 24px; }
.network-visual svg { width:100%; height:300px; display:block; }
.connection { stroke:#176279; stroke-width:1; opacity:.35; }
.node { fill:#06131b; stroke:var(--cyan); stroke-width:2; filter:drop-shadow(0 0 3px #2de2e6); }
.layer-label,.output-label,.output-value { fill:#b9dce8; font:700 13px monospace; letter-spacing:1px; }
.output-value { fill:var(--cyan); }
.training .node { animation:pulse 1.2s infinite alternate; }
.training .connection,.classifying .connection { stroke:var(--cyan); stroke-dasharray:8 12; animation:signal .8s linear infinite; opacity:.8; }
.classifying .node { animation:pulse .3s infinite alternate; }
.output-group.winner .output-node { fill:var(--cyan); stroke:#fff; animation:winner .75s ease 2; }
.output-group.winner .output-label,.output-group.winner .output-value { fill:#fff; }
.activity-caption { text-align:center; padding:.45rem; color:var(--cyan); font:700 .75rem monospace; letter-spacing:.1em; }
@keyframes signal { to { stroke-dashoffset:-20; } } @keyframes pulse { to { filter:drop-shadow(0 0 10px #2de2e6); fill:#2de2e688; } } @keyframes winner { 50% { filter:drop-shadow(0 0 20px #fff); transform:scale(1.7); transform-origin:center; } }
.btn { border-radius:.2rem; font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.progress { height:.55rem; background:#021017; }.progress-bar { background:linear-gradient(90deg,var(--blue),var(--cyan)); }
.metrics { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }.metrics div { border-left:2px solid var(--line); padding-left:.55rem; }.metrics dt { color:var(--muted); font-size:.62rem; }.metrics dd { margin:0; font:700 .78rem monospace; }
.palette-pager { display:grid; grid-template-columns:2.25rem minmax(0,1fr) 2.25rem; align-items:stretch; gap:.5rem; }.palette-viewport { min-width:0; overflow:hidden; scroll-behavior:smooth; }.target-palette { --visible-targets:5; display:flex; gap:.55rem; width:100%; }.target-card { position:relative; flex:0 0 calc((100% - (var(--visible-targets) - 1) * .55rem) / var(--visible-targets)); min-width:0; background:#05131c; color:var(--text); border:1px solid var(--line); border-radius:.3rem; padding:.35rem; text-align:left; transition:.18s; }.palette-control { display:grid; place-items:center; min-width:0; color:var(--cyan); background:#04131c; border:1px solid var(--line); border-radius:.25rem; font:800 1.25rem monospace; transition:.18s; }.palette-control:not(:disabled):hover,.palette-control:not(:disabled):focus-visible { border-color:var(--cyan); box-shadow:0 0 12px #2de2e655; }.palette-control:disabled { color:var(--muted); opacity:.4; }.target-card[aria-disabled="true"] { opacity:.4; }.target-card:hover,.target-card:focus-visible,.target-card.selected { border-color:var(--cyan); box-shadow:0 0 15px #2de2e655; transform:translateY(-2px); }.target-card img { display:block; width:100%; aspect-ratio:1; object-fit:cover; image-rendering:pixelated; background:#000; }.target-card span,.target-card small { display:block; margin-top:.25rem; font:700 .66rem monospace; }.target-card small { color:var(--muted); font-size:.55rem; }.target-tooltip { position:absolute; z-index:5; left:.35rem; right:.35rem; bottom:.35rem; width:auto; max-width:none; padding:.5rem .6rem; color:var(--text); background:#01080df2; border:1px solid var(--cyan); border-radius:.25rem; box-shadow:0 8px 22px #000b; opacity:0; pointer-events:none; transform:translateY(.3rem); transition:opacity .15s,transform .15s; }.target-tooltip span { color:var(--muted); font-weight:500; }.target-card:hover .target-tooltip,.target-card:focus-visible .target-tooltip { opacity:1; transform:translateY(0); }
.selected-panel { text-align:center; }.target-placeholder,.pip-inactive { display:grid; place-items:center; aspect-ratio:16/10; border:1px dashed var(--line); color:var(--muted); font:700 .75rem monospace; background:#020b10; }.selected-image { width:min(100%,260px); aspect-ratio:1; object-fit:cover; image-rendering:pixelated; border:1px solid var(--cyan); background:#000; }.iff-status { display:inline-block; padding:.25rem .6rem; font:700 .7rem monospace; border:1px solid; margin-bottom:.6rem; }.iff-status.friend { color:var(--green); }.iff-status.unknown { color:var(--amber); }.iff-status.neutral { color:var(--muted); }
.result-panel { text-align:center; }.classification-value { font-size:clamp(2rem,5vw,3.5rem); font-weight:800; color:var(--cyan); text-shadow:0 0 16px #2de2e666; }.confidence-value { font:700 1rem monospace; }.low-confidence { color:var(--amber); border:1px solid var(--amber); margin:.65rem auto; padding:.3rem; font-weight:800; }.confidence-list { margin:1rem 0; }.confidence-row { display:grid; grid-template-columns:75px 1fr 54px; align-items:center; gap:.4rem; text-align:left; font:600 .62rem monospace; margin:.3rem 0; }.confidence-row div { height:5px; background:#092b38; }.confidence-row i { display:block; height:100%; background:var(--blue); }.confidence-row.winner { color:#fff; }.confidence-row.winner i { background:var(--cyan); box-shadow:0 0 8px var(--cyan); }.decision { margin-top:1rem; padding:.65rem; font-size:1.4rem; font-weight:900; border:2px solid; }.decision.engage { color:var(--red); border-color:var(--red); animation:decision 1s infinite alternate; }.decision.safe { color:var(--green); border-color:var(--green); }.decision.neutral { color:var(--muted); border-color:var(--line); } @keyframes decision { to { box-shadow:0 0 20px #ff405777; } }
.pip-panel { position:relative; }.pip-active { position:relative; opacity:1; transition:opacity .5s; }.pip-active.fade-away { opacity:0; }.pip-active video { width:100%; aspect-ratio:16/10; object-fit:cover; background:#000; border:2px solid var(--red); }.pip-label { position:absolute; left:.5rem; bottom:.55rem; background:#000c; color:var(--red); padding:.25rem .4rem; font:700 .7rem monospace; }.media-error { color:var(--amber); border:1px solid var(--amber); padding:.8rem; text-align:center; }
.welcome-shell { max-width:1050px; }.welcome-header { border-top:2px solid var(--cyan); }.welcome-lead { max-width:800px; margin-top:.75rem; color:var(--muted); font-size:clamp(.95rem,2vw,1.1rem); }.instruction-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; padding:0; list-style:none; counter-reset:instruction; }.instruction-grid li { display:grid; grid-template-columns:2.25rem minmax(0,1fr); gap:.7rem; padding:.8rem; background:#04131c; border:1px solid var(--line); border-radius:.3rem; counter-increment:instruction; }.instruction-grid li::before { content:counter(instruction); display:grid; place-items:center; align-self:start; aspect-ratio:1; color:var(--bg); background:var(--cyan); border-radius:50%; font:800 .85rem monospace; }.instruction-grid h3 { margin:0 0 .35rem; color:var(--text); font-size:.88rem; text-transform:uppercase; letter-spacing:.06em; }.instruction-grid p { margin:0; color:var(--muted); font-size:.86rem; line-height:1.5; }.instruction-grid strong { color:var(--text); }.simulation-notice { padding:1rem; text-align:center; color:var(--amber); background:#1d1408; border:1px solid var(--amber); }.simulation-notice strong,.simulation-notice span { display:block; }.welcome-continue { min-width:min(100%,320px); padding:.75rem 1.25rem; }
@media (max-width:700px) { .system-header { align-items:flex-start; flex-direction:column; }.status-grid { width:100%; }.network-visual { min-height:190px; overflow-x:auto; }.network-visual svg { min-width:700px; height:220px; }.target-palette { --visible-targets:2; }.target-card span { font-size:.72rem; }.metrics { grid-template-columns:1fr; } }
@media (max-width:700px) { .instruction-grid { grid-template-columns:1fr; }.welcome-shell { padding-left:.75rem; padding-right:.75rem; }.welcome-header,.welcome-shell>.panel { padding:.85rem; } }
@media (hover:none) { .target-tooltip { position:static; width:auto; max-width:none; padding:.3rem 0 0; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; opacity:1; transform:none; }.target-tooltip strong { display:none; } }
@media (prefers-reduced-motion:reduce) { * { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }