:root { color-scheme: dark; font-family: ui-monospace, "Cascadia Code", "DejaVu Sans Mono", Consolas, monospace; color:#d9e5dd; background:#0b100e; font-size:14px; line-height:1.5; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
body { margin:0; }
main, footer { max-width:1200px; margin:auto; padding:20px; }
h1 { font-size:clamp(24px,5vw,36px); line-height:1.2; margin:12px 0; color:#b4f7bd; }
h2 { font-size:16px; color:#80e4d0; margin:0 0 12px; }
h2::before { content:"─ "; }
h3 { font-size:15px; margin:8px 0; }
.eyebrow, .key-help { color:#a3b7a9; font-size:12px; }
.intro { color:#b8c8be; margin:8px 0; }
.prompt { color:#80e4d0; }
section { border:1px solid #506258; padding:16px; margin:16px 0; min-width:0; }
.connect { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
label { display:grid; gap:4px; color:#b8c8be; }
input, button { font:inherit; border:1px solid #6a8674; border-radius:0; padding:7px 10px; }
input { background:#070b09; color:#f1fff4; max-width:100%; min-width:0; }
.connect label { flex:1 1 240px; }
button { background:#173a2b; color:#c3fbd5; cursor:pointer; margin:3px; }
button:hover { background:#24553e; }
button:disabled { opacity:.6; cursor:default; }
.secondary { background:#17231c; color:#c7d7cc; }
a { color:#80e4d0; text-underline-offset:3px; }
:where(a,button,input,summary,[tabindex]):focus-visible { outline:3px solid #ffd866; outline-offset:3px; }
.panel-tabs { display:flex; flex-wrap:wrap; gap:4px; border-bottom:1px solid #80e4d0; padding:8px 0; }
.panel-tabs button { margin:0; background:#0b100e; }
.panel-tabs [aria-selected="true"] { color:#07110c; background:#80e4d0; font-weight:bold; }
[role="tabpanel"] { margin-top:0; border-top:0; }
.status-line { border:1px solid #80e4d0; padding:8px 12px; overflow-wrap:anywhere; }
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; }
.metric { border:1px solid #506258; padding:10px; }
.metric strong { font-size:24px; display:block; color:#b4f7bd; }
.metric span { text-transform:uppercase; font-size:12px; color:#b8c8be; }
article { border-left:2px solid #506258; background:#101b15; padding:12px; margin:12px 0; overflow-wrap:anywhere; }
p { margin:10px 0; overflow-wrap:anywhere; }
small, .muted { color:#a9beb0; }
.secret { white-space:pre-wrap; overflow-wrap:anywhere; padding:12px; border:1px dashed #ffd866; color:#ffd866; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; border:1px solid #506258; padding:12px; }
summary { cursor:pointer; padding:8px 0; color:#80e4d0; }
[role="alert"] { color:#ffb7a5; }
footer { border-top:1px solid #506258; color:#80e4d0; font-size:12px; }
footer span { display:block; color:#a9beb0; margin-top:4px; }
#blazor-error-ui { display:none; border:2px solid #ffb7a5; background:#25140e; color:#fff; padding:12px; }
@media (max-width:540px) { main,footer { padding:12px; } section { padding:12px; } .connect label { flex-basis:100%; } .panel-tabs button { flex:1 1 40%; } }
@media (forced-colors:active) { .panel-tabs [aria-selected="true"] { border:3px solid Highlight; } }