@font-face {
  font-family: Inter;
  src: url("./assets/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: Manrope;
  src: url("./assets/Manrope-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #0b1424;
  --panel: #14213a;
  --strata: #1c2c4c;
  --gold: #d2a64f;
  --gold-light: #e8c169;
  --paper: #ede7da;
  --muted: #babcc0;
  --rule: #ede7da26;
  --green: #80cba2;
  --font: Inter, "Helvetica Neue", Arial, sans-serif;
  --display: Manrope, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --gap: 12px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  position: relative;
  isolation: isolate;
  margin: 0;
  min-height: 100vh;
  color: var(--paper);
  background: var(--ink);
  font: 15px/1.5 var(--font);
  font-variant-numeric: tabular-nums;
}

.binary-background {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(20, minmax(0, 1fr));
  overflow: hidden;
  pointer-events: none;
  color: #e8c1694a;
  font: 11px/1.2 var(--mono);
  mask-image: linear-gradient(transparent, #000 7rem, #000 80%, transparent);
}
.binary-background > div { display: flex; justify-content: center; }
.binary-background > div:nth-child(3n) { opacity: .55; }
.binary-background > div:nth-child(4n) { opacity: .75; }
.binary-stream {
  align-self: start;
  animation: binary-rain 140s linear infinite;
}
.binary-stream span {
  display: block;
  padding-inline-end: 1.2em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: pre;
}
.binary-background.paused .binary-stream { animation-play-state: paused; }
@keyframes binary-rain {
  from { transform: translateY(-50%); }
  to { transform: translateY(0); }
}

a { color: inherit; text-decoration: none; }
button { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }
h1, h2, p { margin: 0; }
h1, h2, h3 { font-family: var(--display); }
[id] { scroll-margin-top: 18px; }
.shell { width: min(1100px, calc(100% - 48px)); margin-inline: auto; }

.site-header { background: #0b1424f5; border-bottom: 1px solid var(--rule); }
.header-inner { min-height: 63px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { width: 30px; height: 30px; flex: none; background: url("./assets/favicon.svg") center / contain no-repeat; }
.brand-wordmark { display: grid; gap: 4px; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.brand-wordmark span:first-child { font: 700 15px/1 Georgia, serif; letter-spacing: .18em; }
.brand-wordmark span:last-child { color: var(--muted); font-size: 10px; font-weight: 650; letter-spacing: .2em; }
nav { display: flex; gap: 24px; color: var(--muted); font-size: 13px; }
nav a:hover, nav a:focus-visible, .details-panel a:hover { color: var(--gold-light); }
.source-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 13px;
  border: 1px solid var(--rule);
  color: var(--gold-light);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.source-button:hover { border-color: var(--gold); }
.source-button, .status-pill, .timezone, .timezone span, .budget-track { border-radius: 999px; }

.intro { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding-block: 28px 20px; }
.incident-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.status-pill, .incident-id, .label, .tick-status, .clock-caption, .time-unit { font-size: 12px; font-weight: 550; }
.status-pill { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border: 1px solid #d2a64f59; color: var(--gold-light); background: var(--ink); }
.status-pill[data-resolved="true"] { color: var(--green); border-color: #80cba266; }
.status-dot, .tick-status > span:first-child { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .status-pill[data-resolved="false"] { animation: recovery-border 1.6s ease-in-out infinite; }
  .status-pill[data-resolved="false"] .status-dot { animation: recovery-dot 1.6s ease-in-out infinite; }
}
@keyframes recovery-border { 50% { border-color: var(--gold-light); } }
@keyframes recovery-dot { 50% { opacity: .15; } }
.incident-id { font-family: var(--mono); }
.incident-id, .label { color: var(--muted); }
h1 { margin-top: 7px; font-size: clamp(33px, 6vw, 66px); font-weight: 780; line-height: 1.07; letter-spacing: -.04em; }
h1 span { color: var(--gold-light); }
.intro p { color: var(--muted); margin-top: 6px; font-size: 14px; }
.intro-meta { display: grid; justify-items: end; gap: 4px; }
.intro-meta time { font-size: 13px; text-align: right; white-space: nowrap; }
.timezone { display: flex; align-items: center; min-height: 32px; color: var(--muted); cursor: pointer; border: 1px solid var(--rule); background: var(--ink); padding: 2px; font-size: 11px; }
.timezone span { padding: 5px 7px; }
.timezone[aria-pressed="false"] .timezone-current, .timezone[aria-pressed="true"] .timezone-other { color: var(--gold-light); background: var(--strata); }

.main-grid, .readouts, .details-grid { display: grid; gap: var(--gap); }
.main-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.readouts { grid-template-rows: repeat(2, minmax(0, auto)); }
.details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--gap); align-items: start; }
.panel { border: 1px solid var(--rule); background: var(--panel); min-width: 0; }
.panel-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--rule); }
.panel h2 { font-size: 15px; font-weight: 750; line-height: 1.3; }
.panel-header a { color: var(--gold-light); font-size: 12px; white-space: nowrap; }

.clock-panel { --clock-accent: var(--paper); border-top: 2px solid var(--gold); }
.clock-panel[data-phase="over"] { --clock-accent: var(--gold-light); }
.tick-status { display: flex; align-items: center; gap: 7px; color: var(--green); white-space: nowrap; }
.clock-content { padding: 13px 16px 15px; }
.clock-caption { margin-bottom: 8px; color: var(--clock-accent); }
.clock-face {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: clamp(3px, .8vw, 9px);
  font-size: clamp(26px, 4.8vw, 57px);
}
.clock-face.long-duration { font-size: clamp(22px, 3.6vw, 44px); }
.clock-face.extended-duration { font-size: clamp(18px, 2.8vw, 34px); }
.time-cell { display: grid; gap: 5px; text-align: center; min-width: 0; }
.time-number {
  padding: .12em 0 .15em;
  overflow: hidden;
  border: 1px solid var(--rule);
  color: var(--clock-accent);
  background: var(--ink);
  font: 560 1em/1.12 var(--font);
  letter-spacing: -.035em;
}
.time-number span { display: inline-block; }
.time-number .roll { animation: roll-in 230ms cubic-bezier(.22,.68,.38,1); }
@keyframes roll-in { from { opacity: .5; transform: translateY(.23em); } }
.time-divider { color: var(--gold); font: .62em/2.1 var(--font); }
.time-unit { color: var(--muted); }

.budget { margin-top: 13px; display: grid; gap: 5px; }
.budget-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.budget-label strong { color: var(--paper); font-weight: 650; white-space: nowrap; }
#budget-status { color: var(--clock-accent); text-align: right; }
.budget-track { height: 5px; background: var(--strata); overflow: hidden; }
#budget-fill { height: 100%; width: 0; background: var(--gold); }

.metric { padding: 11px 15px; }
.readouts .metric { display: grid; align-content: center; }
.uptime-value, .metric-value { margin-block: 5px 1px; font: 600 clamp(19px, 2.5vw, 29px)/1.2 var(--font); letter-spacing: -.03em; }
.uptime-value, .elapsed-value { font-size: clamp(23px, 3.2vw, 38px); }
.uptime-value { color: var(--gold-light); }
.uptime-value span { font-size: .62em; margin-left: 2px; }
.metric p:last-child { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.credit-panel { margin-top: var(--gap); }
.credit-panel .panel-header span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.credit-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 20px;
  padding: 14px 16px 16px;
}
.credit-form, .credit-summary { display: grid; align-content: start; gap: 12px; min-width: 0; }
.credit-form p, .credit-claim p, .credit-result p { color: var(--muted); font-size: 13px; }
.credit-form label { display: block; min-width: 0; font-size: 13px; font-weight: 600; }
.credit-users, .credit-duration-fields { display: grid; gap: 10px; }
.credit-users { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
.credit-duration-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 6px; }
.credit-duration { min-width: 0; margin: 0; padding: 0; border: 0; }
.credit-duration legend { padding: 0; font-size: 13px; font-weight: 600; }
.credit-form input {
  display: block;
  width: 100%;
  min-height: 44px;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--ink);
  color: var(--paper);
  font: 16px/1.25 var(--font);
}
.credit-optional { margin-inline-start: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.credit-fee p { margin-top: 5px; }
.credit-button {
  justify-self: start;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold-light);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.credit-button:hover { background: var(--gold); }
.credit-button:disabled { opacity: .55; cursor: default; }
.credit-summary { gap: 0; padding-left: 16px; border-left: 1px solid var(--rule); }
.credit-result { margin-bottom: 14px; padding: 11px 12px; border: 1px solid var(--rule); border-radius: 6px; background: var(--ink); }
.credit-result dl { display: grid; gap: 8px; margin: 0 0 8px; }
.credit-result dt { font-size: 12px; color: var(--muted); }
.credit-result dd { margin: 0; color: var(--gold-light); font-size: 22px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.credit-claim { display: grid; gap: 7px; }
.credit-claim h3 { margin: 0; font-size: 14px; }
.credit-claim a { justify-self: start; color: var(--gold-light); font-size: 12px; text-decoration: underline; }
.timeline { list-style: none; margin: 0; padding: 0 16px 4px; }
.timeline li { position: relative; padding: 9px 0 9px 13px; border-bottom: 1px solid var(--rule); }
.timeline li:last-child { border-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 0; top: 17px; width: 4px; height: 4px; background: var(--gold); }
.timeline time { color: var(--gold-light); font-size: 11px; }
.timeline h3 { margin: 2px 0; font-size: 14px; font-weight: 750; }
.timeline p, .methodology p { color: var(--muted); font-size: 13px; }
.methodology { display: grid; gap: 9px; padding: 11px 16px; }
.methodology a { justify-self: start; color: var(--gold-light); font-size: 12px; }
.footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding-block: 13px 16px; color: var(--muted); font-size: 11px; }
.footer a { padding-block: 5px; color: var(--gold-light); text-decoration: underline; }
.motion-button { padding: 5px 0; border: 0; background: none; color: var(--muted); text-decoration: underline; cursor: pointer; }
.motion-button:hover { color: var(--gold-light); }
.noscript { margin-top: 12px; color: var(--gold-light); }

@media (max-width: 700px) {
  :root { --gap: 8px; }
  .shell { width: calc(100% - 28px); }
  .header-inner { min-height: 53px; gap: 8px; }
  nav { display: none; }
  .intro { display: grid; padding-block: 17px 12px; gap: 9px; }
  .intro-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
  .intro-meta time { text-align: left; font-size: 12px; white-space: normal; }
  .timezone { min-height: 36px; }
  .main-grid, .details-grid { grid-template-columns: minmax(0, 1fr); }
  .credit-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .credit-summary { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--rule); }
  .readouts { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .readouts .metric { align-content: start; }
  .clock-face { font-size: clamp(29px, 8vw, 56px); }
  .clock-face.long-duration { font-size: clamp(24px, 6.5vw, 45px); }
  .clock-face.extended-duration { font-size: clamp(19px, 5vw, 35px); }
  .binary-background { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .binary-background > div:nth-child(n + 11) { display: none; }
}

@media (max-width: 390px) {
  .shell { width: calc(100% - 24px); }
  .panel-header, .clock-content, .metric, .credit-layout { padding-inline: 11px; }
  .source-button { padding-inline: 10px; font-size: 11px; }
  .brand { gap: 5px; }
  .brand-mark { width: 26px; height: 26px; }
  .brand-wordmark span:first-child { font-size: 13px; }
  .brand-wordmark span:last-child { font-size: 9px; }
  .intro-meta .label { font-size: 11px; }
  .timezone span { padding-inline: 5px; }
  .time-unit { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .binary-stream, .time-number .roll { animation: none; }
  .motion-button { display: none; }
}