:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  background: #0d0c13;
  color: #f5f2ff;
}

* { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  margin: 0;
  min-width: 0;
  background:
    radial-gradient(circle at 15% 0%, #352357 0, transparent 28rem),
    #0d0c13;
}

main {
  width: min(1040px, calc(100% - 1.25rem));
  margin: 0 auto;
  padding: 1.25rem 0 1rem;
}

header { max-width: 760px; }

.eyebrow {
  margin: 0 0 0.35rem;
  color: #60dfbe;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(1.55rem, 5vw, 2.45rem);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

header > p:not(.eyebrow) {
  margin: 0.6rem 0 0;
  color: #c9c1dc;
  font-size: 0.92rem;
  line-height: 1.5;
}

.comparison-key {
  padding-left: 0.7rem;
  border-left: 3px solid #60dfbe;
  color: #e7e1f3;
}

.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1rem 0;
}

button {
  padding: 0.55rem 0.82rem;
  border: 1px solid #75658f;
  border-radius: 999px;
  background: #171323;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

button:hover, button:focus-visible { border-color: #60dfbe; }
button[aria-pressed="true"] { border-color: #60dfbe; background: #173a34; }
button:disabled { opacity: 0.55; cursor: default; }

#phase {
  flex: 1 1 15rem;
  color: #c9c1dc;
  font-size: 0.86rem;
}

.strategy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.strategy-card {
  min-width: 0;
  padding: 0.65rem;
  border: 1px solid #423858;
  border-radius: 12px;
  background: rgb(18 16 26 / 90%);
}

.strategy-card.is-working { border-color: #ffb454; }
.strategy-card.is-cache-hit { border-color: #60dfbe; }

.strategy-card h2 {
  margin: 0 0 0.5rem;
  font-size: clamp(0.86rem, 3vw, 1.05rem);
}

.data-product {
  min-height: 3.6em;
  margin: -0.15rem 0 0.55rem;
  color: #bdb5cc;
  font-size: 0.68rem;
  line-height: 1.3;
}

.data-product strong { color: #f5f2ff; }

.call-topology {
  display: flex;
  align-items: stretch;
  gap: 0.3rem;
  min-height: 3.25rem;
  margin-bottom: 0.55rem;
}

.topology-step {
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-width: 0;
  padding: 0.32rem;
  border: 1px solid #514764;
  border-radius: 7px;
  background: #15121e;
  color: #a9a1ba;
  font-size: 0.64rem;
  line-height: 1.2;
  text-align: center;
}

.topology-step.is-complete {
  border-color: #4f9f92;
  background: #173a34;
  color: #edfff9;
}

.topology-step.is-active {
  border-color: #ffb454;
  box-shadow: 0 0 0 2px rgb(255 180 84 / 18%);
}

.topology-arrow {
  align-self: center;
  color: #75658f;
  font-size: 0.8rem;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(16, minmax(0, 1fr));
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #4d455f;
  border-radius: 7px;
  background: #12101a;
}

.tile {
  min-width: 0;
  border-right: 1px solid rgb(77 69 95 / 32%);
  border-bottom: 1px solid rgb(77 69 95 / 32%);
}

.tile.impassable {
  background:
    linear-gradient(135deg, transparent 38%, #55496b 39% 61%, transparent 62%),
    #272230;
}

.tile.field-covered {
  background:
    radial-gradient(circle, rgb(164 132 255 / 55%) 0 24%, transparent 27%),
    #292241;
}

.tile.route-0 { background: #7d68b7; }
.tile.route-1 { background: #4f9f92; }
.tile.route-2 { background: #a86f48; }
.tile.start { box-shadow: inset 0 0 0 2px #60dfbe; }
.tile.goal { box-shadow: inset 0 0 0 2px #ffb454; }

.card-phase {
  min-height: 2.6em;
  margin: 0.45rem 0 0;
  color: #c9c1dc;
  font-size: 0.76rem;
  line-height: 1.3;
}

.reported {
  margin-top: 1rem;
  padding: 0.8rem;
  border: 1px solid #423858;
  border-radius: 12px;
  background: rgb(18 16 26 / 90%);
}

.reported h2 { margin: 0 0 0.65rem; font-size: 1rem; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.76rem; }
th, td { padding: 0.5rem; border-top: 1px solid #342d45; text-align: left; }
th { color: #60dfbe; vertical-align: bottom; }
td { color: #ddd7e8; vertical-align: top; line-height: 1.4; }
.source-link { margin: 0.8rem 0 0; font-size: 0.82rem; }
a { color: #c7b2ff; }

@media (max-width: 520px) {
  main { width: min(100% - 0.75rem, 510px); padding-top: 0.75rem; }
  .strategy-grid { grid-template-columns: 1fr; }
  .strategy-grid { gap: 0.45rem; }
  .strategy-card { padding: 0.42rem; }
  .call-topology {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr));
    min-height: 0;
    gap: 0.2rem;
  }
  .topology-arrow { display: none; }
  .topology-step { min-height: 1.7rem; font-size: 0.58rem; }
  .card-phase { font-size: 0.67rem; }
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; }
  tr { padding: 0.45rem 0; border-top: 1px solid #342d45; }
  td { padding: 0.15rem 0; border: 0; }
  td:first-child { color: #60dfbe; font-weight: 700; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}