:root{--soft:#f4f2ec;--blue:#4560b8}
.figure{margin:34px 0}.figure img{display:block;width:100%;height:auto;border:1px solid var(--line);background:white}.figure figcaption{margin-top:10px;color:var(--muted);font:12px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:34px 0}.app-shot{min-height:280px;padding:12px;border:1px solid var(--line);background:#fff;overflow:hidden}.app-chrome{display:flex;justify-content:space-between;padding:3px 4px 10px;color:#74776f;font:11px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;border-bottom:1px solid #ecebe5}.board{position:relative;height:230px;background-color:#faf9f5;background-image:radial-gradient(#d7d8d1 1px,transparent 1px);background-size:14px 14px}.group{position:absolute;border:1px solid #aeb9d8;background:#f7f8fd;border-radius:6px}.group b{display:block;padding:7px 9px;color:#4963ac;font:10px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.card{position:absolute;padding:8px;border:1px solid #d8d7cf;background:#fff;box-shadow:0 1px 2px #0000000d;font:10px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.wire{position:absolute;height:1px;background:#9aa5c8;transform-origin:left center}.comparison-caption{grid-column:1/-1;margin:0;color:var(--muted);font:12px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.json{margin:30px 0;padding:20px;border:1px solid var(--line);background:var(--soft);overflow:auto;white-space:pre;color:#30332f;font:13px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace}.callout{margin:34px 0;padding:23px 25px;border-left:2px solid var(--accent);background:#f7f5ef}.callout p{margin:0;font-size:22px;line-height:1.55}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0}.button{display:inline-block;padding:11px 16px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);font:600 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;text-decoration:none}.button.primary{background:var(--accent);color:white}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin:34px 0;background:var(--line);border:1px solid var(--line)}.metric{padding:20px;background:#fff}.metric strong{display:block;font:700 30px/1.1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--accent)}.metric span{display:block;margin-top:7px;color:var(--muted);font:12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.layer-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0}.layer{padding:20px;border-top:2px solid var(--accent);background:#fff}.layer b{font:700 15px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.layer p{margin:8px 0 0;color:var(--muted);font-size:15px;line-height:1.5}.context-figure{margin:34px 0;padding:28px;border:1px solid var(--line);background:#fff}.context-row{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap}.context-pill{padding:10px 13px;border:1px solid #cdd0c9;border-radius:999px;font:12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.context-arrow{color:var(--accent)}.experiment-table{width:100%;margin:30px 0;border-collapse:collapse;font:13px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.experiment-table th,.experiment-table td{padding:12px 10px;border-bottom:1px solid var(--line);text-align:left}.experiment-table th{color:var(--muted);font-weight:600}.experiment-table td:nth-child(n+2),.experiment-table th:nth-child(n+2){text-align:right}.note{color:var(--muted);font-size:16px}.next{margin-top:54px;padding-top:24px;border-top:1px solid var(--line);font-style:italic;color:var(--muted)}
.article-cover {
  width: 100%;
  margin: 0 0 40px;
}

.article-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}

.app-screen {
  margin: 0;
}

.comparison {
  grid-template-columns: 1fr;
}

.app-screen img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--line);
  background: #fff;
}

.app-screen figcaption {
  margin-top: 8px;
  color: var(--muted);
  font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.metric-grid-two {
  grid-template-columns: repeat(2, 1fr);
}

.selector-animation {
  margin: 34px 0;
}

.selector-animation svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: #fff;
}

.selector-illustration {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}

.selector-illustration img,
.selector-illustration svg {
  display: block;
  width: 100%;
  height: auto;
}

.selector-illustration svg {
  position: absolute;
  inset: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.selector-illustration .illustration-step,
.selector-illustration .illustration-selection {
  fill: none;
  stroke: var(--blue);
  stroke-width: 7;
  opacity: 0;
}

.selector-illustration .proposed-move {
  opacity: 0;
  animation: highlight-spatial 10s ease-in-out infinite;
}

.selector-illustration .event-target-group,
.selector-illustration .anchor-marker {
  fill: none;
  stroke: var(--blue);
  stroke-width: 7;
  opacity: 0;
  animation: highlight-event 10s ease-in-out infinite;
}

.selector-illustration .event-target-group {
  stroke-dasharray: 15 12;
}

.selector-illustration .proposed-move path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.selector-illustration .proposed-move text {
  fill: var(--blue);
  font: 700 32px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.selector-illustration .proposed-move rect {
  fill: #fff7c8;
  fill-opacity: .58;
  stroke: var(--blue);
  stroke-width: 6;
  stroke-dasharray: 15 12;
}

.selector-illustration .spatial-neighbor {
  opacity: .48;
}

.selector-illustration .neighbor-frame {
  fill: none;
  stroke: #aeb1aa;
  stroke-width: 5;
}

.selector-illustration .neighbor-note {
  fill: #fff7c8;
  stroke: #e1d9ad;
  stroke-width: 2;
}

.selector-illustration .neighbor-fold {
  fill: #eee2a3;
}

.selector-illustration .illustration-step {
  animation: illustration-step 10s ease-in-out infinite;
}

.selector-illustration .illustration-selection {
  stroke-dasharray: 18 16;
  animation: illustration-selection 10s ease-in-out infinite;
}

.selector-illustration .step-event {
  animation: highlight-event 10s ease-in-out infinite;
}

.selector-illustration .step-group {
  animation: highlight-group 10s ease-in-out infinite;
}

.selector-illustration .step-dependency,
.selector-illustration .step-shared {
  animation: highlight-relations 10s ease-in-out infinite;
}

.selector-illustration .step-spatial {
  animation: highlight-spatial 10s ease-in-out infinite;
}

.selector-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.selector-steps li {
  min-width: 0;
  padding: 0;
  background: #fff;
  opacity: 1;
}

.selector-steps button {
  width: 100%;
  min-height: 100%;
  padding: 13px 12px;
  border: 0;
  border-top: 4px solid transparent;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.selector-steps button:hover {
  background: #f4f6fb;
  background-clip: padding-box;
}

.selector-steps li.is-selected {
  color: #29469d;
  background: #e8efff;
  box-shadow: inset 0 4px var(--blue);
}

.selector-steps button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}

.selector-steps b,
.selector-steps span {
  display: block;
}

.selector-steps b {
  font: 700 11px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.selector-steps span {
  margin-top: 5px;
  color: var(--muted);
  font: 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.selector-steps li:nth-child(1) { animation: explain-one 10s ease-in-out infinite; }
.selector-steps li:nth-child(2) { animation: explain-two 10s ease-in-out infinite; }
.selector-steps li:nth-child(3) { animation: explain-three 10s ease-in-out infinite; }
.selector-steps li:nth-child(4) { animation: explain-four 10s ease-in-out infinite; }
.selector-steps li:nth-child(5) { animation: explain-five 10s ease-in-out infinite; }

@keyframes illustration-step {
  0%, 8%, 54%, 100% { opacity: 0; }
  14%, 44% { opacity: .78; }
}

@keyframes highlight-event {
  0%, 17%, 100% { opacity: 0; }
  2%, 14% { opacity: .78; }
}

@keyframes highlight-group {
  0%, 13%, 32%, 100% { opacity: 0; }
  17%, 29% { opacity: .78; }
}

@keyframes highlight-relations {
  0%, 27%, 57%, 100% { opacity: 0; }
  33%, 52% { opacity: .78; }
}

@keyframes highlight-spatial {
  0%, 51%, 72%, 100% { opacity: 0; }
  57%, 68% { opacity: .78; }
}

@keyframes illustration-selection {
  0%, 67%, 96%, 100% { opacity: 0; stroke-dashoffset: 120; }
  73%, 93% { opacity: .72; stroke-dashoffset: 0; }
}

@keyframes explain-one {
  0%, 1%, 15%, 100% { color: var(--ink); background: #fff; box-shadow: inset 0 0 var(--blue); }
  2%, 14% { color: #29469d; background: #e8efff; box-shadow: inset 0 4px var(--blue); }
}

@keyframes explain-two {
  0%, 16%, 30%, 100% { color: var(--ink); background: #fff; box-shadow: inset 0 0 var(--blue); }
  17%, 29% { color: #29469d; background: #e8efff; box-shadow: inset 0 4px var(--blue); }
}

@keyframes explain-three {
  0%, 32%, 53%, 100% { color: var(--ink); background: #fff; box-shadow: inset 0 0 var(--blue); }
  33%, 52% { color: #29469d; background: #e8efff; box-shadow: inset 0 4px var(--blue); }
}

@keyframes explain-four {
  0%, 56%, 69%, 100% { color: var(--ink); background: #fff; box-shadow: inset 0 0 var(--blue); }
  57%, 68% { color: #29469d; background: #e8efff; box-shadow: inset 0 4px var(--blue); }
}

@keyframes explain-five {
  0%, 72%, 94%, 100% { color: var(--ink); background: #fff; box-shadow: inset 0 0 var(--blue); }
  73%, 93% { color: #29469d; background: #e8efff; box-shadow: inset 0 4px var(--blue); }
}

.selector-animation figcaption {
  margin-top: 10px;
  color: var(--muted);
  font: 12px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}


.before-after {
  margin: 34px 0;
}

.before-after .figure {
  margin: 0 0 28px;
}

.response-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 12px;
  margin: 30px 0 38px;
}

.response-comparison > div > b {
  font: 700 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.response-comparison > div {
  min-width: 0;
}

.response-comparison .json {
  max-width: 100%;
  height: auto;
  margin: 8px 0 0;
  overflow-x: auto;
  white-space: pre;
}

@media (max-width: 650px) {
  .article-cover {
    width: 100%;
    margin: 0 0 38px;
  }

  .metric-grid-two,
  .response-comparison {
    grid-template-columns: 1fr;
  }

  .selector-steps {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .selector-illustration .illustration-step {
    animation: none;
    opacity: .72;
  }

  .selector-illustration .event-target-group,
  .selector-illustration .anchor-marker,
  .selector-illustration .proposed-move {
    animation: none;
    opacity: .72;
  }

  .selector-illustration .proposed-move {
    animation: none;
    opacity: .72;
  }

  .selector-steps li:nth-child(n) {
    animation: none;
    opacity: 1;
  }

  .selector-illustration .illustration-selection {
    animation: none;
    opacity: .72;
    stroke-dashoffset: 0;
  }

}

@media (max-width: 650px) {
  .callout p {
    font-size: 20px;
  }

  .experiment-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}