:root {
  color-scheme: dark;
  --green: #00d95a;
  --amber: #f4b400;
  --red: #ff3b3b;
  --unknown: #6f777c;
  --ink: #f4f3ef;
  --muted: #8a9490;
  --state: var(--green);
  --state-soft: rgba(0, 217, 90, .11);
  --state-border: rgba(0, 217, 90, .34);
}
* { box-sizing: border-box; }
html { background: #090b0c; }
body { margin: 0; min-width: 320px; background: #090b0c; color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, a { font: inherit; }
button { color: inherit; }
.state-degraded { --state: var(--amber); --state-soft: rgba(244, 180, 0, .1); --state-border: rgba(244, 180, 0, .34); }
.state-fault { --state: var(--red); --state-soft: rgba(255, 59, 59, .1); --state-border: rgba(255, 59, 59, .38); }
.demo-shell { width: min(1500px, 100%); min-height: 100vh; margin: 0 auto; background: radial-gradient(circle at 28% -10%, rgba(0, 217, 90, .055), transparent 31%), #0b0d0e; }
.simulation-banner { display: flex; justify-content: space-between; gap: 20px; padding: 9px clamp(18px, 4vw, 56px); background: #212628; border-bottom: 1px solid #363d40; color: #9ca5a1; font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.simulation-banner span:first-child { color: var(--green); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 26px clamp(18px, 4vw, 56px); border-bottom: 1px solid #262b2d; }
.brand img { display: block; width: clamp(190px, 19vw, 270px); height: auto; }
.site-meta { display: flex; align-items: center; gap: clamp(22px, 3.5vw, 56px); }
.site-meta div { display: grid; gap: 4px; }
.site-meta span, .site-meta time { color: #68716d; font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.site-meta strong { font-size: 13px; font-weight: 650; }
.site-meta time { min-width: 76px; color: #aeb6b2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.status-hero { display: flex; align-items: center; justify-content: space-between; gap: 34px; margin: 26px clamp(18px, 4vw, 56px) 0; padding: 26px 28px; border: 1px solid var(--state-border); border-radius: 17px; background: linear-gradient(90deg, var(--state-soft), rgba(17, 20, 21, .9) 42%); box-shadow: inset 4px 0 0 var(--state); transition: border-color .22s, background .22s, box-shadow .22s; }
.status-heading { display: flex; align-items: center; gap: 18px; }
.status-heading .status-icon { width: 18px; height: 18px; box-shadow: 0 0 18px color-mix(in srgb, var(--state) 38%, transparent); }
.status-heading p, .section-title p, .device-panel-heading p { margin: 0 0 5px; color: var(--state); font-size: 9px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.status-heading h1 { margin: 0; font-size: clamp(25px, 3.2vw, 42px); line-height: 1.05; letter-spacing: -.035em; }
.status-heading span { display: block; margin-top: 7px; color: #929b97; font-size: 13px; }
.scenario-control { display: grid; gap: 9px; justify-items: end; }
.scenario-control > span { color: #69726e; font-size: 9px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.scenario-control > div { display: flex; padding: 4px; border: 1px solid #303638; border-radius: 11px; background: #0d0f10; }
.scenario-control button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 0; border-radius: 7px; background: transparent; color: #7c8581; font-size: 11px; font-weight: 700; cursor: pointer; }
.scenario-control button:hover { color: #e8eae8; }
.scenario-control button.active { background: #292e31; color: #f4f3ef; }
.status-icon { display: inline-block; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--unknown); }
.status-healthy { background: var(--green); }
.status-degraded { background: var(--amber); }
.status-fault { background: var(--red); }
.dependency-icon { display: block; flex: 0 0 auto; width: 15px; height: 15px; fill: none; stroke: #9ba4a8; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: 18px; padding: 26px clamp(18px, 4vw, 56px); }
.monitor-column { min-width: 0; }
.section-title, .device-panel-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 13px; }
.section-title h2, .device-panel-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.02em; }
.section-title > span, .device-panel-heading > span { color: #626b67; font-size: 10px; }
.group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.group-card { padding: 17px; border: 1px solid #2e3436; border-radius: 13px; background: #151819; }
.group-card.group-degraded { border-color: rgba(244, 180, 0, .35); }
.group-card.group-fault { border-color: rgba(255, 59, 59, .42); }
.group-card.group-unknown { border-color: rgba(111, 119, 124, .58); }
.group-heading { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px; }
.group-heading h3 { margin: 0 0 3px; font-size: 14px; }
.group-heading p { margin: 0; color: #747d79; font-size: 10px; }
.group-heading > strong { color: #d7dcda; font-size: 24px; font-weight: 500; }
.group-heading > strong small { color: #59615e; font-size: 12px; }
.group-line { height: 3px; margin-top: 15px; overflow: hidden; border-radius: 3px; background: #2b3032; }
.group-line i { display: block; width: 100%; height: 100%; background: var(--green); }
.group-degraded .group-line i { width: 80%; background: var(--amber); }
.group-fault .group-line i { width: 54%; background: var(--red); }
.group-unknown .group-line i { width: 0; background: var(--unknown); }
.device-panel { margin-top: 22px; padding: 18px; border: 1px solid #2b3032; border-radius: 15px; background: #121415; }
.device-panel-heading { align-items: center; }
.device-table { display: grid; gap: 5px; }
.device-table button { display: grid; grid-template-columns: 12px minmax(150px, 1.2fr) minmax(210px, 1.7fr) 70px 110px 15px; align-items: center; gap: 12px; width: 100%; padding: 12px 11px; border: 1px solid transparent; border-radius: 9px; background: #181b1d; text-align: left; cursor: pointer; }
.device-table button:hover, .device-table button.selected { border-color: #3b4346; background: #1d2123; }
.device-table button.dependency-row { background: #171a1b; }
.device-table button.dependency-row .device-summary { color: #9ba4a8; }
.device-name { display: grid; gap: 3px; }
.device-name strong { font-size: 12px; }
.device-name small, .device-summary, .device-latency { color: #75807b; font-size: 10px; }
.device-latency { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
.chevron { color: #66706b; font-size: 19px; }
.health-bars { display: inline-flex; align-items: end; gap: 3px; height: 18px; }
.health-bars i { display: block; width: 6px; border-radius: 1px; background: #32383a; }
.health-bars i:nth-child(3n + 1) { height: 8px; }
.health-bars i:nth-child(3n + 2) { height: 12px; }
.health-bars i:nth-child(3n + 3) { height: 16px; }
.health-bars .bar-healthy { background: var(--green); }
.health-bars .bar-degraded { background: var(--amber); }
.health-bars .bar-fault { background: var(--red); }
.detail-panel { align-self: start; position: sticky; top: 18px; padding: 20px; border: 1px solid #343a3d; border-radius: 15px; background: linear-gradient(180deg, #1b1f21, #141718); }
.detail-kicker { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid #343a3d; color: #68716e; font-size: 9px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.detail-kicker span:first-child { color: var(--green); }
.detail-status { display: flex; align-items: center; gap: 12px; padding: 20px 0 14px; }
.detail-status .status-icon { width: 12px; height: 12px; }
.detail-status h2 { margin: 0 0 5px; font-size: 17px; }
.detail-status p { margin: 0; color: #828b87; font-size: 10px; }
.detail-panel > .health-bars { display: flex; width: 100%; gap: 4px; margin-bottom: 18px; }
.detail-panel > .health-bars i { flex: 1; }
.dependency-explanation, .cause-explanation { margin: 0 0 17px; padding: 12px; border: 1px solid #3b4245; border-radius: 9px; background: #111415; }
.cause-explanation { border-color: rgba(255, 59, 59, .35); }
.dependency-explanation > div, .cause-explanation > div { display: flex; align-items: center; gap: 8px; color: #c6cdca; font-size: 10px; }
.dependency-explanation p, .cause-explanation p { margin: 10px 0 8px; color: #8e9894; font-size: 10px; line-height: 1.5; }
.dependency-explanation button { padding: 0; border: 0; background: transparent; color: #d8ddda; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dependency-explanation dl, .cause-explanation dl { margin: 0; }
.dependency-explanation dl div, .cause-explanation dl div { padding: 6px 0 0; border: 0; }
.detail-panel dl { margin: 0; }
.detail-panel dl div { display: flex; justify-content: space-between; gap: 18px; padding: 9px 0; border-bottom: 1px solid #2a3032; }
.detail-panel dt { color: #737c78; font-size: 10px; }
.detail-panel dd { margin: 0; color: #d4d9d6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; text-align: right; }
.check-history { margin-top: 18px; padding: 12px; border-radius: 9px; background: #101213; }
.check-history div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: #727b77; font-size: 9px; }
.check-history strong { color: #cbd1ce; font-weight: 650; }
.engineering-strip { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0 clamp(18px, 4vw, 56px); border: 1px solid #282e30; border-radius: 12px; background: #101213; }
.engineering-strip div { display: grid; gap: 4px; padding: 13px 16px; border-right: 1px solid #282e30; }
.engineering-strip div:last-child { border: 0; }
.engineering-strip span { color: #5e6763; font-size: 8px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.engineering-strip strong { color: #9da6a2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; font-weight: 500; }
.demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 26px clamp(18px, 4vw, 56px) 31px; color: #646d69; font-size: 10px; }
.demo-footer p { max-width: 760px; margin: 0; line-height: 1.55; }
.demo-footer strong { color: #8d9692; }
.demo-footer a { display: inline-flex; gap: 12px; align-items: center; padding: 10px 13px; border: 1px solid #343b3d; border-radius: 8px; color: #d9dddb; font-size: 10px; font-weight: 700; text-decoration: none; }
.demo-footer a:hover { border-color: var(--green); }
.demo-footer a span { color: var(--green); font-size: 16px; }
.state-line { height: 4px; background: var(--state); transition: background .22s; }
@media (max-width: 1050px) {
  .workspace { grid-template-columns: 1fr; }
  .detail-panel { position: static; }
  .engineering-strip { grid-template-columns: repeat(3, 1fr); }
  .engineering-strip div:nth-child(3) { border-right: 0; }
  .engineering-strip div:nth-child(n + 4) { border-top: 1px solid #282e30; }
}
@media (max-width: 760px) {
  .simulation-banner span:last-child, .site-meta div { display: none; }
  .topbar { padding-block: 19px; }
  .site-meta { margin-left: auto; }
  .status-hero { align-items: stretch; flex-direction: column; padding: 20px; }
  .scenario-control { justify-items: start; }
  .scenario-control > div { width: 100%; }
  .scenario-control > div { display: grid; grid-template-columns: 1fr 1fr; }
  .scenario-control button { justify-content: center; padding-inline: 7px; }
  .group-grid { grid-template-columns: 1fr; }
  .device-panel { padding: 12px; }
  .device-panel-heading > span { display: none; }
  .device-table button { grid-template-columns: 12px 1fr auto 14px; }
  .device-summary, .device-latency { display: none; }
  .health-bars { justify-self: end; }
  .engineering-strip { grid-template-columns: 1fr 1fr; }
  .engineering-strip div, .engineering-strip div:nth-child(3) { border-right: 1px solid #282e30; border-top: 1px solid #282e30; }
  .engineering-strip div:nth-child(1), .engineering-strip div:nth-child(2) { border-top: 0; }
  .engineering-strip div:nth-child(2n) { border-right: 0; }
  .demo-footer { align-items: flex-start; flex-direction: column; }
}