:root { color-scheme: dark; font-family: Inter, "Segoe UI", system-ui, sans-serif; --bg:#0d100e; --surface:#151a16; --surface-2:#1c231e; --line:#344039; --text:#f1f5f2; --muted:#a8b3ab; --green:#63d391; --amber:#f0b65a; --cyan:#64c7d8; --coral:#ef796f; --focus:#f5d06f; --touch:44px; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); }
a { color:inherit; } button, select, input { font:inherit; letter-spacing:0; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.topbar { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px clamp(16px,4vw,48px); border-bottom:1px solid var(--line); background:var(--surface); }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; } .brand>span:last-child { display:grid; } .brand small { color:var(--muted); font-size:12px; }
.brand-mark { width:36px; height:36px; display:grid; place-items:center; border:1px solid var(--green); border-radius:6px; color:var(--green); font-weight:800; }
.topbar nav { display:flex; gap:8px; } .topbar nav a { min-height:var(--touch); display:inline-flex; align-items:center; padding:0 12px; border:1px solid var(--line); border-radius:6px; text-decoration:none; font-size:13px; }
main { width:min(1440px,100%); margin:0 auto; padding:clamp(20px,4vw,48px); }
.runtime-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:end; padding-bottom:24px; border-bottom:1px solid var(--line); }
.eyebrow { color:var(--amber); font-size:11px; font-weight:800; } h1 { max-width:850px; margin:7px 0 8px; font-size:clamp(30px,5vw,64px); line-height:1.04; letter-spacing:0; } h2 { margin:4px 0 0; font-size:20px; letter-spacing:0; }
.runtime-heading p { max-width:760px; margin:0; color:var(--muted); line-height:1.6; } .boundary-list { max-width:420px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; } .boundary-list span { padding:6px 8px; border:1px solid var(--line); color:var(--cyan); font-size:10px; font-weight:750; }
.toolbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); } .toolbar button, .import-control, .speed-control { min-height:var(--touch); display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:0 14px; border:1px solid var(--line); border-radius:6px; background:var(--surface-2); color:var(--text); cursor:pointer; } .toolbar button:hover, .import-control:hover { border-color:var(--green); } .import-control input { width:1px; height:1px; opacity:0; position:absolute; } .speed-control select { min-height:32px; border:1px solid var(--line); background:var(--surface); color:var(--text); } #runtime-status { margin-left:auto; color:var(--muted); font-size:13px; }
.error-state { margin:18px 0; padding:16px; border:1px solid var(--coral); background:var(--surface); } .error-state span { display:block; margin:6px 0 12px; color:var(--muted); } .error-state button { min-height:var(--touch); border:1px solid var(--coral); background:var(--surface-2); color:var(--text); }
.catalog { padding:20px 0 4px; } .catalog .section-heading>span { color:var(--muted); font-size:12px; } .catalog-groups { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:14px; } .catalog-groups p { min-width:0; display:grid; gap:5px; margin:0; padding:12px; border-left:3px solid var(--cyan); background:var(--surface-2); } .catalog-groups strong { font-size:13px; } .catalog-groups span { color:var(--muted); font-size:11px; }
.life-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:18px 0 26px; } .life-card { min-width:0; padding:15px; border:1px solid var(--line); border-radius:6px; background:var(--surface); } .life-card header { display:flex; justify-content:space-between; gap:10px; align-items:start; } .life-card h3 { margin:0; font-size:16px; letter-spacing:0; } .life-card header span { color:var(--green); font-size:10px; font-weight:800; }
.life-card dl { display:grid; grid-template-columns:minmax(90px,34%) minmax(0,1fr); gap:7px 12px; margin:15px 0 0; font-size:11px; } .life-card dt { color:var(--muted); } .life-card dd { min-width:0; margin:0; text-align:right; overflow-wrap:anywhere; } .life-card progress { width:100%; height:7px; accent-color:var(--green); } .life-card[data-state="STRESSED"], .life-card[data-state="DEGRADED"] { border-color:var(--amber); } .life-card[data-state="DEAD"], .life-card[data-state="TERMINATED"] { border-color:var(--coral); }
.timeline { border-top:1px solid var(--line); padding-top:20px; } .section-heading { display:flex; justify-content:space-between; align-items:end; } #tick-count { color:var(--cyan); font-weight:750; } #event-list { max-height:280px; overflow:auto; margin:16px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); } #event-list li { display:grid; grid-template-columns:72px 110px 1fr; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line); color:var(--muted); font-size:12px; } #event-list strong { color:var(--text); }
@media (max-width:960px) { .runtime-heading { grid-template-columns:1fr; } .boundary-list { justify-content:flex-start; } .catalog-groups { grid-template-columns:repeat(2,minmax(0,1fr)); } .life-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .topbar { align-items:flex-start; flex-direction:column; } .topbar nav { width:100%; overflow-x:auto; } .topbar nav a { white-space:nowrap; } main { padding:18px 14px 32px; } h1 { font-size:36px; } .catalog .section-heading { align-items:flex-start; flex-direction:column; gap:6px; } .catalog-groups, .life-grid { grid-template-columns:1fr; } #runtime-status { width:100%; margin-left:0; } #event-list li { grid-template-columns:58px 86px 1fr; gap:8px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; } }