:root {
  --color-bg: #161826; --color-surface: #232532; --color-text: #e9e9ed;
  --color-accent: #9184d9; --accent-hover: #b5abfc;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0,0,0,0.55);
  --track: #292b31; --dim: #8c90a4; --lit: #b5abfc; --lit-soft: #423a6a;
  --scrim: rgba(22,24,38,0.45); --bad: #ffa198; --ok: #6fce9f; --warn: #e8bd6b;
  --font-heading: "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}
:root[data-theme='light'] {
  --color-bg: #e4e7f5; --color-surface: #f3f5fe; --color-text: #292b31;
  --color-accent: #5d5294; --accent-hover: #423a6a;
  --color-divider: color-mix(in srgb, #292b31 16%, transparent);
  --shadow-sm: 0 0 0 1px #cfd3e5;
  --shadow-md: 0 0 0 1px #cfd3e5, 0 6px 18px rgba(41,43,49,0.10);
  --track: #cfd3e5; --dim: #606474; --lit: #5d5294; --lit-soft: #d2cefd;
  --scrim: rgba(228,231,245,0.45); --bad: #a03028; --ok: #1b7a4b; --warn: #8a5a06;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--color-bg); color: var(--color-text);
       font: 0.9375rem/1.55 var(--font-body); }
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
.page { min-height: 100vh; padding: 22.4px 22.4px 67.2px; }
.wrap, main, .live { display: flex; flex-direction: column; gap: 33.6px; }
.wrap { max-width: 1120px; margin: 0 auto; }
.wrap.narrow { max-width: 760px; }
.col { display: flex; flex-direction: column; gap: 11.2px; min-width: 0; }
.col.tight { gap: 2.8px; }
.row { display: flex; align-items: center; gap: 16.8px; flex-wrap: wrap; }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.kicker { margin: 0; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
          color: var(--dim); font-weight: 400; }
.hint { margin: 0; font-size: 0.8125rem; color: var(--dim); text-wrap: pretty; }

header.top { display: flex; align-items: center; justify-content: space-between; gap: 16.8px;
             flex-wrap: wrap; padding-bottom: 11.2px; border-bottom: 1px solid var(--color-divider); }
.brand { font-family: var(--font-heading); font-weight: 500; font-size: 1.125rem; letter-spacing: -0.015em; }
nav.top { display: flex; gap: 16.8px; font-size: 0.8125rem; }
nav.top a { color: var(--dim); }
nav.top .here { color: var(--color-accent); }
.runid, .runstate { font-family: var(--mono); font-size: 0.75rem; color: var(--dim); }
.runstate { display: flex; gap: 4px; margin: 0; }
.says-what { max-width: 46ch; }
.toggle { display: inline-flex; align-items: center; gap: 6px; background: transparent;
          color: var(--color-text); border: 1px solid var(--color-divider); border-radius: 8px;
          padding: 5.6px 11.2px; font: inherit; font-size: 0.75rem; cursor: pointer; }
.toggle:hover { border-color: var(--color-accent); color: var(--color-accent); }

.pill { font-size: 0.75rem; padding: 2.8px 11.2px; border-radius: 999px;
        border: 1px solid var(--color-divider); color: var(--dim); white-space: nowrap; }
.pill.on { border-color: var(--color-accent); color: var(--color-accent); }

.bar { display: flex; flex-direction: column; gap: 5.6px; }
.bar .rail { position: relative; height: 6px; border-radius: 999px; background: var(--track); }
.bar.lg .rail { height: 8px; }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
             background: var(--lit-soft); }
.bar .now { position: absolute; top: -4px; bottom: -4px; width: 2px;
            background: var(--lit); border-radius: 2px; }
.bar.lg .now { top: -5px; bottom: -5px; }
.bar .mark { position: absolute; top: -7px; bottom: -7px; width: 1px;
             background: var(--color-text); opacity: .55; }
.bar.lg .mark { top: -9px; bottom: -9px; }
.bar .ends { display: flex; justify-content: space-between; gap: 11.2px;
             font-family: var(--mono); font-size: 0.6875rem; color: var(--dim); }
.bar .ends .lit { color: var(--color-text); }
.bar.ok { --lit: var(--ok); } .bar.warn { --lit: var(--warn); } .bar.bad { --lit: var(--bad); }
.bar.ok, .bar.warn, .bar.bad { --lit-soft: color-mix(in srgb, var(--lit) 30%, transparent); }
.bar .causal { align-self: start; max-width: 100%; font-family: var(--mono); font-size: 0.6875rem; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 1px 16.8px; font-size: 0.75rem;
      color: var(--dim); font-family: var(--mono); overflow-x: auto; }
.kv .v { color: var(--color-text); }

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 16.8px; }
figure { margin: 0; display: flex; flex-direction: column; gap: 5.6px; }
figure img { width: 100%; display: block; border-radius: 8px; box-shadow: var(--shadow-sm); }
figcaption { font-size: 0.6875rem; color: var(--dim); font-family: var(--mono); overflow-wrap: anywhere; }
.frame { position: relative; border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-sm); }
.frame img { border-radius: 0; box-shadow: none; }
.box { position: absolute; border: 2px solid var(--lit); border-radius: 2px;
       box-shadow: 0 0 0 9999px var(--scrim); }
.box .tag { position: absolute; left: 0; top: -24px; white-space: nowrap;
            background: var(--color-bg); border: 1px solid var(--lit); border-radius: 4px;
            padding: 1px 6px; font-family: var(--mono); font-size: 0.6875rem; color: var(--color-text); }

.panel { background: var(--color-surface); border-radius: 14px; box-shadow: var(--shadow-md);
         padding: 22.4px; display: flex; flex-direction: column; gap: 16.8px; }
.acts { display: flex; gap: 8.4px; flex-wrap: wrap; }
.acts form { display: inline; }
.btn { background: transparent; border-radius: 8px; padding: 8.4px 22.4px; font: inherit;
       font-family: var(--font-heading); font-weight: 500; font-size: 0.875rem; cursor: pointer;
       color: var(--dim); border: 1px solid var(--color-divider); }
.btn:hover { color: var(--color-text); border-color: var(--color-text); }
.btn.ok { color: var(--color-accent); border-color: var(--color-accent); }
.btn.ok:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent);
                color: var(--color-accent); border-color: var(--color-accent); }
.btn.sm { padding: 5.6px 14px; font-size: 0.8125rem; }

footer.bot { display: flex; gap: 16.8px; flex-wrap: wrap; font-family: var(--mono); font-size: 0.6875rem;
             color: var(--dim); padding-top: 11.2px; border-top: 1px solid var(--color-divider); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.hero { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr);
        gap: 33.6px; align-items: start; }
@media (max-width: 820px) { .hero { grid-template-columns: minmax(0,1fr); } }
.hero h2 { margin: 0; font-family: var(--font-heading); font-weight: 500; font-size: 2rem;
           line-height: 1.12; letter-spacing: -0.015em; text-wrap: pretty; }
.lede { margin: 0; max-width: 52ch; color: var(--dim); font-size: 0.875rem; text-wrap: pretty; }
.lede .mono { color: var(--color-text); }
.pills { display: flex; gap: 8.4px; flex-wrap: wrap; margin-top: 5.6px; }

.big { display: flex; align-items: flex-end; gap: 11.2px; flex-wrap: wrap; }
.big .n { font-family: var(--mono); font-size: 3.625rem; line-height: 1;
          letter-spacing: -0.02em; color: var(--lit); }
.big .u { font-family: var(--mono); font-size: 0.875rem; color: var(--dim); padding-bottom: 8px; }

.flow { display: flex; align-items: stretch; gap: 8.4px; flex-wrap: wrap; }
.step { flex: 1 1 150px; min-width: 0; background: var(--color-surface); border-radius: 8px;
        box-shadow: var(--shadow-sm); border-left: 2px solid var(--lit);
        padding: 11.2px 16.8px; display: flex; flex-direction: column; gap: 2.8px; }
.step.err { border-left-color: var(--bad); }
.step .name { font-size: 0.8125rem; font-family: var(--font-heading); font-weight: 500;
              overflow-wrap: anywhere; }
.step .br { font-family: var(--mono); font-size: 0.75rem; color: var(--lit); overflow-wrap: anywhere; }
.step.err .br { color: var(--bad); }
.step .ms { font-family: var(--mono); font-size: 0.6875rem; color: var(--dim); }
.arrow { align-self: center; color: var(--dim); font-size: 1rem; }
.pending { flex: 1 1 150px; min-width: 0; border: 1px dashed var(--color-divider); border-radius: 8px;
           padding: 11.2px 16.8px; display: flex; align-items: center; gap: 8.4px;
           font-family: var(--mono); font-size: 0.75rem; color: var(--dim); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lit);
       animation: pulse 1.1s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .25 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; opacity: 1; } }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 8.4px; }
.ghost { border: 1px dashed var(--color-divider); border-radius: 8px; padding: 8.4px 11.2px;
         display: flex; flex-direction: column; gap: 1px; font-family: var(--mono); }
.ghost .t { font-size: 0.75rem; color: var(--dim); }
.ghost .r { font-size: 0.6875rem; color: var(--dim); opacity: .75; overflow-wrap: anywhere; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px,1fr)); gap: 16.8px; }
.card { background: var(--color-surface); border-radius: 8px; box-shadow: var(--shadow-sm);
        padding: 16.8px; display: flex; flex-direction: column; gap: 11.2px; }
.card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 11.2px; }
.card .head .name { font-family: var(--font-heading); font-weight: 500; font-size: 1rem;
                    overflow-wrap: anywhere; }
.card .head .ms { font-family: var(--mono); font-size: 0.6875rem; color: var(--dim); white-space: nowrap; }
.verdict, .err { font-family: var(--mono); font-size: 0.75rem;
                 border-top: 1px solid var(--color-divider); padding-top: 8.4px;
                 overflow-wrap: anywhere; }
.verdict { color: var(--lit); }
.err { color: var(--bad); }

.cta { background: var(--color-surface); border-radius: 14px; box-shadow: var(--shadow-md);
       padding: 22.4px; display: flex; flex-wrap: wrap; align-items: center;
       justify-content: space-between; gap: 16.8px; }
.cta .t { font-family: var(--font-heading); font-weight: 500; font-size: 1.25rem; }
.cta .s { font-size: 0.8125rem; color: var(--dim); text-wrap: pretty; }

.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th { text-align: left; font-weight: 400; font-size: 0.6875rem; letter-spacing: 0.14em;
            text-transform: uppercase; color: var(--dim); padding: 5.6px 11.2px;
            border-bottom: 1px solid var(--color-divider); }
.table td { padding: 11.2px; border-bottom: 1px solid var(--color-divider); vertical-align: top; }
.table td:has(> a) { position: relative; }
.table td > a::after { content: ''; position: absolute; inset: 0; }
.table tbody tr:has(a):hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.thumb { width: 90px; height: 60px; object-fit: cover; border-radius: 4px;
         box-shadow: var(--shadow-sm); }
.field { display: flex; gap: 8.4px; flex-wrap: wrap; align-items: end; }
.field label { font-size: 0.75rem; color: var(--dim); }
.input { min-height: 36px; max-width: 100%; padding: 6px 10px; font: inherit; font-size: 0.875rem;
         color: var(--color-text); caret-color: var(--color-accent); background: var(--color-bg);
         border: 1px solid var(--color-divider); border-radius: 8px; }
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input::placeholder { color: var(--dim); opacity: 1; }
.input::file-selector-button { margin-right: 8.4px; padding: 4px 11.2px; font: inherit;
                               font-size: 0.8125rem; color: var(--dim); background: transparent;
                               border: 1px solid var(--color-divider); border-radius: 6px;
                               cursor: pointer; }
.input::file-selector-button:hover { color: var(--color-accent); border-color: var(--color-accent); }
details > summary, .stages .raw { cursor: pointer; font-family: var(--mono); font-size: 0.6875rem;
                    color: var(--dim); letter-spacing: 0.06em; }
details > summary:hover { color: var(--color-accent); }
details pre { margin: 8.4px 0 0; padding: 11.2px; border-radius: 8px; background: var(--color-bg);
              box-shadow: var(--shadow-sm); font-family: var(--mono); font-size: 0.6875rem;
              color: var(--color-text); overflow-x: auto; }

.timeline { display: flex; flex-direction: column; }
.tl { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 16.8px; }
.tl .rail { position: relative; display: flex; justify-content: center; }
.tl .rail::before { content: ''; position: absolute; top: 0; bottom: 0; width: 1px;
                    background: color-mix(in srgb, var(--color-text) 30%, transparent); }
.tl:first-child .rail::before { top: 16px; }
.tl:last-child .rail::before { bottom: calc(100% - 16px); }
.tl .node { position: relative; margin-top: 12px; width: 9px; height: 9px; border-radius: 50%;
            background: var(--track); box-shadow: 0 0 0 3px var(--color-bg); }
.tl.promoted .node { background: var(--color-accent); }
.tl .entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16.8px;
             align-items: start; padding: 5.6px 0 22.4px; min-width: 0; }
@media (max-width: 620px) { .tl .entry { grid-template-columns: minmax(0, 1fr); } }
.tl .facts { display: flex; flex-direction: column; gap: 8.4px; min-width: 0; }

.queue { display: flex; flex-direction: column; gap: 16.8px; }
.tl .top, .queue .top { display: flex; align-items: center; gap: 11.2px; flex-wrap: wrap;
                        font-family: var(--mono); font-size: 0.75rem; color: var(--dim); }
.queue .foot { display: flex; align-items: center; justify-content: space-between; gap: 16.8px;
               flex-wrap: wrap; }

/* a hidden tooltip must leave the flow entirely: `visibility: hidden` keeps its box, and an
   absolutely positioned box past the right edge grows the page's scroll width on a phone */
.tip { position: relative; cursor: help; border-bottom: 1px dotted var(--dim); }
.tip::after { content: attr(data-tip); display: none; position: absolute; left: 0;
              bottom: calc(100% + 6px); z-index: 5; width: max-content;
              max-width: min(34ch, 68vw); padding: 6px 9px; border-radius: 6px;
              background: var(--color-surface); color: var(--color-text);
              box-shadow: var(--shadow-md); font-family: var(--font-body); font-size: 0.75rem;
              font-weight: 400; line-height: 1.35; text-transform: none; letter-spacing: normal;
              white-space: normal; text-align: left; }
.tip:hover::after { display: block; }
.stage .m .tip::after { left: auto; right: 0; }

.stages { display: flex; flex-direction: column; gap: 5.6px; margin-top: 8.4px; }
.stage { display: flex; align-items: baseline; justify-content: space-between; gap: 11.2px;
         flex-wrap: wrap; padding-bottom: 5.6px; border-bottom: 1px solid var(--color-divider); }
.stage .q { font-size: 0.8125rem; color: var(--color-text); text-wrap: pretty; }
.stage .m { font-family: var(--mono); font-size: 0.75rem; color: var(--dim); white-space: nowrap; }
.stage .m b { font-weight: 500; color: var(--lit); }


figcaption .note { display: block; margin-top: 2px; font-family: var(--font-body);
                   text-wrap: pretty; }

.alert { display: flex; flex-direction: column; gap: 2.8px; background: var(--color-surface);
         border-radius: 8px; padding: 11.2px 16.8px; box-shadow: 0 0 0 1px var(--bad);
         font-size: 0.8125rem; text-wrap: pretty; }
.alert .why { font-family: var(--mono); font-size: 0.75rem; color: var(--bad); }