:root {
  color-scheme: dark;
  --ink: #e9f8f4;
  --muted: #8ba8a7;
  --deep: #041318;
  --panel: rgba(9, 35, 43, 0.78);
  --line: rgba(150, 215, 205, 0.16);
  --aqua: #67f5d2;
  --blue: #50a7ff;
  --coral: #ff8d75;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--deep); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--sans);
  background:
    radial-gradient(circle at 85% 8%, rgba(40, 139, 152, 0.22), transparent 30rem),
    radial-gradient(circle at 5% 55%, rgba(35, 86, 149, 0.18), transparent 35rem),
    var(--deep);
}

a { color: inherit; }
button, input { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--aqua); outline-offset: 4px; }

.watermark {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .22;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

.site-header, footer, #app {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

.site-header {
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -.04em;
  font-size: 1.3rem;
}

.wordmark svg { width: 30px; fill: none; stroke: var(--aqua); stroke-width: 2.7; stroke-linecap: round; }
.about-link { color: var(--muted); font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; text-decoration: none; }
.about-link:hover { color: var(--aqua); }

#app { min-height: calc(100vh - 190px); }

.hero {
  min-height: min(700px, calc(100vh - 190px));
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  align-items: center;
  gap: clamp(40px, 8vw, 120px);
  padding: 60px 0 100px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--aqua);
  font: 500 .7rem var(--mono);
  text-transform: uppercase;
  letter-spacing: .13em;
}

.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.hero h1 { margin: 0; max-width: 760px; font-size: clamp(3.5rem, 9vw, 7.6rem); line-height: .88; letter-spacing: -.075em; }
.hero h1 em { display: block; color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(233, 248, 244, .68); }
.hero-copy { margin: 34px 0 0; max-width: 570px; color: var(--muted); font-size: clamp(1rem, 2vw, 1.18rem); line-height: 1.75; }

.lookup-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(145deg, rgba(18, 54, 62, .82), rgba(7, 27, 34, .9));
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
}

.lookup-card label { display: block; margin-bottom: 14px; font: 500 .72rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.handle-input { display: flex; border-bottom: 1px solid rgba(233,248,244,.35); }
.handle-input:focus-within { border-color: var(--aqua); }
.handle-input span { padding: 15px 2px; color: var(--aqua); font: 1rem var(--mono); }
.handle-input input { width: 100%; padding: 15px 8px; border: 0; outline: 0; color: var(--ink); background: transparent; font: 1rem var(--mono); }
.handle-input input::placeholder { color: #587477; }
.lookup-card button, .primary-button {
  width: 100%;
  margin-top: 24px;
  padding: 15px 20px;
  border: 1px solid var(--aqua);
  border-radius: 2px;
  color: #032019;
  background: var(--aqua);
  cursor: pointer;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease;
}
.lookup-card button:hover, .primary-button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(103,245,210,.18); }
.lookup-note { margin: 18px 0 0; color: #718e8f; font-size: .78rem; line-height: 1.5; }

.page-head { padding: 58px 0 34px; }
.back-link { color: var(--muted); text-decoration: none; font: .75rem var(--mono); }
.back-link:hover { color: var(--aqua); }
.page-head h1 { margin: 22px 0 5px; overflow-wrap: anywhere; font-size: clamp(2.2rem, 7vw, 5.2rem); line-height: 1; letter-spacing: -.065em; }
.identity { color: var(--muted); font: .78rem var(--mono); }

.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 35px 0 0; border: 1px solid var(--line); }
.summary-stat { min-width: 0; padding: 22px; border-right: 1px solid var(--line); }
.summary-stat:last-child { border: 0; }
.summary-stat strong { display: block; font-size: clamp(1.4rem, 4vw, 2.1rem); letter-spacing: -.05em; }
.summary-stat span, .metric span { display: block; margin-top: 6px; color: var(--muted); font: .65rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }

.section-label { margin: 52px 0 18px; color: var(--muted); font: .7rem var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.activity-list { display: grid; gap: 12px; padding-bottom: 80px; }
.activity-card {
  display: grid;
  grid-template-columns: 150px 1fr minmax(150px, 240px) 26px;
  align-items: center;
  gap: 28px;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel);
  text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.activity-card:hover { transform: translateX(4px); border-color: rgba(103,245,210,.48); background: rgba(13,45,53,.92); }
.card-date { font: .76rem var(--mono); color: var(--muted); }
.card-date strong { display: block; margin-bottom: 5px; color: var(--ink); font: 700 1rem var(--sans); }
.card-metrics { display: flex; gap: clamp(20px, 5vw, 60px); }
.card-metric strong { display: block; font-size: 1.28rem; letter-spacing: -.04em; }
.card-metric span { color: var(--muted); font: .62rem var(--mono); text-transform: uppercase; }
.spark { width: 100%; height: 46px; overflow: visible; }
.spark polyline { fill: none; stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; }
.spark line { stroke: rgba(255,255,255,.08); }
.arrow { color: var(--aqua); font-size: 1.5rem; }

.detail-title { display: flex; align-items: end; justify-content: space-between; gap: 30px; }
.detail-title h1 { margin-bottom: 0; }
.date-block { flex: none; color: var(--muted); font: .8rem/1.7 var(--mono); text-align: right; }
.metrics-grid { display: grid; grid-template-columns: repeat(6, 1fr); margin: 34px 0 18px; border: 1px solid var(--line); }
.metric { min-width: 0; padding: 24px 20px; border-right: 1px solid var(--line); }
.metric:last-child { border: 0; }
.metric strong { font-size: clamp(1.25rem, 3vw, 2rem); letter-spacing: -.05em; }

.chart-panel { padding: 28px; border: 1px solid var(--line); background: var(--panel); }
.chart-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.chart-head h2 { margin: 0; font-size: 1rem; }
.legend { display: flex; gap: 18px; color: var(--muted); font: .65rem var(--mono); }
.legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--blue); }
.legend i.slow { background: var(--coral); }
.pace-chart { height: 190px; display: flex; align-items: stretch; gap: clamp(2px, .55vw, 8px); border-bottom: 1px solid var(--line); }
.pace-column { position: relative; flex: 1; min-width: 2px; }
.pace-bar { position: absolute; inset-inline: 0; bottom: 0; min-height: 3px; background: linear-gradient(to top, #237ca7, var(--aqua)); opacity: .9; }
.pace-column:nth-child(5n) .pace-bar { background: linear-gradient(to top, #684f67, var(--coral)); }
.pace-column::after { content: attr(data-index); position: absolute; top: calc(100% + 8px); left: 50%; translate: -50%; color: #668082; font: .55rem var(--mono); opacity: 0; }
.pace-column:nth-child(5n)::after, .pace-column:last-child::after { opacity: 1; }

.lengths { margin-bottom: 80px; }
.length-row { display: grid; grid-template-columns: 48px 1.2fr 1fr 1fr 1fr; align-items: center; gap: 15px; min-height: 68px; border-bottom: 1px solid var(--line); }
.length-row:hover { background: rgba(103,245,210,.025); }
.length-number { color: var(--aqua); font: .72rem var(--mono); }
.length-value strong { display: block; font-size: .94rem; }
.length-value span { color: var(--muted); font: .59rem var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.confidence { justify-self: end; padding: 5px 8px; border: 1px solid var(--line); color: var(--muted); font: .58rem var(--mono); text-transform: uppercase; }
.source-note { margin: 30px 0 80px; color: var(--muted); font: .68rem/1.7 var(--mono); overflow-wrap: anywhere; }

.empty, .error-view, .loading-view { min-height: 55vh; display: grid; place-content: center; text-align: center; }
.empty h2, .error-view h1 { margin: 0 0 12px; font-size: clamp(2rem, 7vw, 4rem); letter-spacing: -.055em; }
.empty p, .error-view p, .loading-view p { max-width: 500px; color: var(--muted); line-height: 1.7; }
.error-view .primary-button { display: inline-block; width: auto; text-decoration: none; }
.loader { width: 52px; height: 16px; margin: auto; border-top: 2px solid var(--aqua); border-bottom: 2px solid var(--blue); animation: swim 1s ease-in-out infinite alternate; }
@keyframes swim { to { transform: translateX(20px) skewX(-18deg); } }

footer { display: flex; justify-content: space-between; gap: 20px; padding: 34px 0 45px; border-top: 1px solid var(--line); color: #607c7d; font: .65rem/1.5 var(--mono); }
footer a:hover { color: var(--aqua); }

@media (max-width: 760px) {
  .site-header, footer, #app { width: min(100% - 28px, 1180px); }
  .site-header { height: 72px; }
  .about-link { display: none; }
  .hero { display: block; min-height: auto; padding: 60px 0 90px; }
  .lookup-card { margin-top: 55px; padding: 24px; }
  .summary-grid { grid-template-columns: 1fr 1fr; }
  .summary-stat:nth-child(2) { border-right: 0; }
  .summary-stat:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .activity-card { grid-template-columns: 1fr 22px; gap: 18px; padding: 20px; }
  .card-metrics { grid-column: 1; gap: 25px; }
  .spark { grid-column: 1 / -1; grid-row: 3; }
  .arrow { grid-column: 2; grid-row: 1 / 3; }
  .detail-title { display: block; }
  .date-block { margin-top: 16px; text-align: left; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .metric { border-bottom: 1px solid var(--line); }
  .metric:nth-child(2n) { border-right: 0; }
  .metric:nth-last-child(-n+2) { border-bottom: 0; }
  .chart-panel { padding: 20px 14px 28px; }
  .chart-head { display: block; }
  .legend { margin-top: 10px; }
  .length-row { grid-template-columns: 34px 1fr 1fr; gap: 10px; padding: 12px 0; }
  .length-row .length-value:nth-child(4) { grid-column: 2; }
  .confidence { grid-column: 3; grid-row: 2; }
  footer { display: block; }
  footer span { display: block; margin-top: 7px; }
}