@charset "UTF-8";
:root {
  color-scheme:dark;
  --bg:#111111;
  --surface:#171717;
  --text:#eeeeee;
  --muted:#aaaaaa;
  --faint:#888888;
  --accent:#eeeeee;
  --line:#333333;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:Arial,Helvetica,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased
}
::selection {
  background:var(--accent);
  color:var(--bg)
}
a {
  color:inherit;
  text-decoration:none
}
a:focus-visible,summary:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:7px
}
a:hover {
  color:var(--accent)
}
p,h1,h2,h3,figure {
  margin:0
}
.shell {
  max-width:1600px;
  padding:0 5%;
  margin:auto
}
.skip {
  position:absolute;
  left:1rem;
  top:-8rem;
  z-index:20;
  background:var(--accent);
  color:var(--bg);
  padding:.7rem 1rem
}
.skip:focus {
  top:1rem
}
.site-header {
  display:flex;
  align-items:center;
  gap:2rem;
  min-height:116px;
  border-bottom:1px solid var(--line)
}
.wordmark {
  font-family:Georgia,"Times New Roman",serif;
  font-size:2.8rem;
  font-weight:400;
  letter-spacing:-.08em;
  line-height:1;
  white-space:nowrap
}
.wordmark span {
  font-size:.42em;
  vertical-align:-.27em;
  letter-spacing:0
}
.header-descriptor {
  font: .75rem/1.7 var(--mono);
  letter-spacing:.06em
}
.header-descriptor span {
  color:var(--faint)
}
nav {
  display:flex;
  gap:2rem;
  margin-left:auto;
  font-size:.875rem
}
nav a {
  padding:.6rem 0
}
.edition {
  font:.75rem var(--mono);
  color:var(--faint);
  margin-left:2rem
}
.hero {
  min-height:640px;
  display:grid;
  grid-template-columns:1.08fr 1fr;
  align-items:center;
  gap:3.4rem;
  padding:5rem 0 4.5rem
}
.eyebrow {
  font:.75rem/1.6 var(--mono);
  letter-spacing:.08em;
  color:var(--accent)
}
.tiny-cross {
  font-size:1.125rem;
  margin-right:.65rem
}
h1 {
  font-size:clamp(2.8rem,4.7vw,4.8rem);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-.052em;
  margin:1.65rem 0 1.9rem
}
h1 em {
  font-family:Georgia,"Times New Roman",serif;
  color:var(--accent);
  font-weight:400;
  letter-spacing:-.05em
}
.hero-intro {
  font-size:clamp(1.15rem,1.6vw,1.4rem);
  line-height:1.45
}
.hero-description {
  max-width:25rem;
  color:var(--muted);
  margin-top:1rem;
  line-height:1.7
}
.explore {
  margin-top:2rem;
  display:inline-flex;
  align-items:center;
  gap:2.8rem;
  border-bottom:1px solid #777777;
  font-size:.875rem;
  padding:.5rem 0
}
.explore span {
  font-size:1.4rem;
  color:var(--accent)
}
.topology {
  width:100%;
  align-self:center
}
.figure-top {
  display:flex;
  justify-content:space-between;
  font:.75rem var(--mono);
  color:var(--faint);
  padding-bottom:1rem;
  border-bottom:1px solid var(--line)
}
.topology svg {
  display:block;
  width:100%;
  height:auto;
  margin:1rem 0
}
.graph-stage[data-interactive] {
  cursor:grab;
  touch-action:pan-y;
  user-select:none
}
.graph-stage[data-dragging] {
  cursor:grabbing
}
.graph-stage:focus-visible,.graph-controls button:focus-visible {
  outline:2px solid var(--text);
  outline-offset:5px
}
.graph-stage[data-interactive] .contour {
  display:none
}
.graph-controls {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:0 0 1rem;
  font:.75rem/1.6 var(--mono);
  color:var(--faint)
}
.graph-actions {
  display:flex;
  gap:.5rem;
  margin-left:auto
}
.graph-controls[hidden] {
  display:none
}
.graph-controls button {
  flex-shrink:0;
  background:transparent;
  color:var(--muted);
  font:.875rem/1.5 var(--mono);
  border:1px solid var(--line);
  padding:.45rem .7rem;
  cursor:pointer
}
.graph-controls button:hover {
  color:var(--text);
  border-color:var(--muted)
}
.graph-controls button[aria-pressed="true"] {
  border-color:var(--text);
  background:var(--text);
  color:var(--bg)
}
@media(pointer:coarse) {
  .graph-controls button {
    min-height:44px
  }
}
.axis {
  stroke:#666666;
  stroke-width:1;
  stroke-dasharray:2 8;
  opacity:.25
}
.contour {
  fill:#eeeeee;
  fill-opacity:.025;
  stroke:#666666;
  stroke-dasharray:3 6;
  stroke-width:1
}
.edges {
  fill:none;
  stroke:#999999;
  stroke-width:1.1;
  opacity:.7
}
.nodes {
  fill:var(--accent);
  stroke:var(--bg);
  stroke-width:2
}
.signal {
  pointer-events:none
}
.signal-trail {
  fill:none;
  stroke:#ffffff;
  stroke-width:1.5;
  stroke-linecap:round
}
.signal-head,.signal-halo {
  fill:#ffffff;
  stroke:none
}
.graph-label {
  fill:#aaaaaa;
  font:12px var(--mono);
  letter-spacing:.4px
}
.component {
  transition:opacity .3s
}
.component-2 {
  opacity:.65
}
.component-3 {
  opacity:.75
}
.component-4 {
  opacity:.85
}
.topology[data-highlight] .component {
  opacity:.25
}
.topology[data-highlight="1"] .component-1,.topology[data-highlight="2"] .component-2,.topology[data-highlight="3"] .component-3,.topology[data-highlight="4"] .component-4 {
  opacity:1
}
.origin {
  fill:none;
  stroke:#aaaaaa;
  stroke-width:1;
  opacity:.65
}
figcaption {
  border-top:1px solid var(--line);
  padding-top:1rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  font:.75rem/1.5 var(--mono);
  color:var(--faint)
}
figcaption span:first-child {
  color:var(--accent)
}
figcaption span:last-child {
  max-width:12rem;
  text-align:right;
  font-size:.75rem
}
.index-rule {
  display:flex;
  align-items:center;
  gap:2rem;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:1.2rem 0;
  font:.75rem/1.6 var(--mono);
  color:var(--muted);
  letter-spacing:.025em
}
.index-rule span:nth-child(2) {
  margin-left:auto;
  color:var(--faint)
}
.index-rule span:last-child {
  font-size:1.2rem;
  color:var(--accent)
}
.experiments {
  padding:5rem 0 4.5rem
}
.section-heading {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
  margin-bottom:2.5rem
}
.section-heading .eyebrow {
  grid-column:1/-1
}
h2 {
  font-weight:400;
  font-size:clamp(2rem,3vw,3rem);
  letter-spacing:-.04em;
  line-height:1.2
}
.section-heading>p:last-child {
  color:var(--muted);
  max-width:26rem;
  justify-self:end;
  align-self:end
}
.experiment {
  border-top:1px solid var(--line)
}
.experiment:last-child {
  border-bottom:1px solid var(--line)
}
summary {
  display:grid;
  grid-template-columns:2rem 1fr 1.15fr 6.4rem 1.2rem;
  align-items:center;
  gap:1.5rem;
  padding:2rem .2rem;
  cursor:pointer;
  list-style:none;
  transition:background .2s
}
summary::-webkit-details-marker {
  display:none
}
summary:hover {
  background:#ffffff03
}
summary:hover h3,.experiment[open] h3 {
  color:var(--accent)
}
.experiment-number {
  font:.75rem var(--mono);
  color:var(--faint);
  align-self:start;
  padding-top:.7rem
}
h3 {
  font-size:1.75rem;
  line-height:1.3;
  font-weight:400;
  letter-spacing:-.035em;
  transition:color .2s
}
.experiment-title>span {
  display:block;
  font:.75rem/1.5 var(--mono);
  letter-spacing:.025em;
  color:var(--faint);
  margin-top:.6rem
}
summary>p {
  font-size:1rem;
  line-height:1.55;
  color:var(--muted);
  max-width:24rem
}
.stage {
  font:.875rem var(--mono);
  color:var(--muted);
  justify-self:end
}
.expand {
  font-size:1.5rem;
  color:var(--accent);
  line-height:1;
  transition:transform .2s
}
.experiment[open] .expand {
  transform:rotate(45deg)
}
.experiment-detail {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem 3rem;
  padding:.2rem 8.5rem 2.5rem 3.7rem;
  color:var(--muted)
}
.detail-label {
  font:.75rem/1.5 var(--mono);
  letter-spacing:.05em;
  color:var(--accent);
  display:block;
  margin-bottom:.65rem
}
.experiment-detail>p {
  font-size:1.125rem;
  color:var(--text)
}
.address {
  grid-column:1/-1;
  border-top:1px solid var(--line);
  padding-top:1rem
}
code {
  font:.875rem/1.6 var(--mono);
  overflow-wrap:anywhere
}
.experiment-note {
  font:.75rem/1.6 var(--mono);
  color:var(--faint);
  margin-top:1.4rem
}
.idea {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:7rem;
  align-items:center;
  border-top:1px solid var(--line);
  padding:5rem 0 6rem
}
.idea-mark {
  text-align:center;
  font:clamp(11rem,22vw,22rem)/.9 Georgia,"Times New Roman",serif;
  color:var(--accent);
  letter-spacing:-.08em
}
.idea-mark>span {
  font-size:.42em;
  vertical-align:-.27em;
  letter-spacing:0
}
.idea-mark>div {
  font:.75rem/1.6 var(--mono);
  letter-spacing:.09em;
  color:var(--faint);
  margin-top:3rem
}
.idea-copy .eyebrow {
  margin-bottom:1.35rem
}
.idea-copy>p:not(.eyebrow) {
  margin-top:1.4rem;
  color:var(--muted);
  max-width:36rem
}
.idea-copy>.idea-closing {
  color:var(--text)!important
}
footer {
  min-height:125px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:2rem;
  font-size:.875rem;
  color:var(--muted)
}
footer>div {
  display:flex;
  align-items:center;
  gap:2rem
}
footer .wordmark {
  color:var(--text);
  font-size:2.2rem
}
footer>div>span>a {
  border-bottom:1px solid var(--line)
}
.footer-note {
  margin-left:auto;
  font:.75rem/1.5 var(--mono);
  color:var(--faint)
}
.back-top {
  font-size:.875rem;
  white-space:nowrap
}
@media(min-width:1600px) {
  .hero {
    min-height:740px
  }
}
@media(max-width:1100px) {
  .shell {
    padding:0 4%
  }
  .hero {
    gap:2rem
  }
  .edition {
    display:none
  }
  .header-descriptor {
    font-size:.75rem
  }
  .hero h1 {
    font-size:3.35rem
  }
  .experiment-detail {
    padding-right:3.7rem
  }
  summary {
    grid-template-columns:1.5rem 1fr 1.05fr 1.2rem;
    gap:1rem
  }
  .stage {
    display:none
  }
  .idea {
    gap:3rem
  }
  footer {
    flex-wrap:wrap;
    padding:2rem 0
  }
  .footer-note {
    display:none
  }
}
@media(max-width:760px) {
  .shell {
    padding:0 6%
  }
  .site-header {
    min-height:90px;
    gap:1.25rem
  }
  .header-descriptor {
    display:none
  }
  nav {
    gap:1.4rem
  }
  .hero {
    grid-template-columns:1fr;
    gap:3rem;
    padding:3.5rem 0 2.5rem
  }
  .hero h1 {
    font-size:clamp(2.45rem,7.4vw,3.7rem);
    margin-top:1.5rem
  }
  .hero-intro {
    font-size:1.25rem
  }
  .hero-description {
    max-width:30rem
  }
  .topology {
    max-width:560px;
    justify-self:center
  }
  .index-rule {
    gap:1rem;
    align-items:start
  }
  .index-rule span:first-child {
    max-width:12rem
  }
  .index-rule span:nth-child(2) {
    display:none
  }
  .index-rule span:last-child {
    margin-left:auto
  }
  .experiments {
    padding:3.5rem 0
  }
  .section-heading {
    display:block
  }
  .section-heading h2 {
    margin:1rem 0
  }
  .section-heading>p:last-child {
    max-width:24rem
  }
  .section-heading {
    margin-bottom:2rem
  }
  summary {
    grid-template-columns:1.25rem 1fr 1.2rem;
    gap:.6rem 1rem;
    padding:1.5rem 0
  }
  h3 {
    font-size:1.6rem
  }
  .experiment-number {
    grid-column:1;
    grid-row:1;
    padding-top:.5rem
  }
  .experiment-title {
    grid-column:2;
    grid-row:1
  }
  summary>p {
    grid-column:2;
    grid-row:2;
    margin-top:.6rem
  }
  .expand {
    grid-column:3;
    grid-row:1
  }
  .experiment-detail {
    grid-template-columns:1fr;
    gap:1.5rem;
    padding:.5rem 0 2rem 2.25rem
  }
  .address {
    grid-column:1
  }
  .idea {
    grid-template-columns:1fr;
    gap:3rem;
    padding:3.5rem 0 4rem
  }
  .idea-mark {
    text-align:left;
    font-size:10rem
  }
  .idea-mark>div {
    display:inline-block;
    max-width:9rem;
    margin-left:1rem;
    margin-top:0;
    line-height:1.8;
    letter-spacing:.06em
  }
  .idea-copy h2 {
    font-size:2.15rem
  }
  footer {
    gap:1.5rem;
    justify-content:space-between
  }
  footer>div {
    align-items:start;
    gap:1.4rem;
    max-width:16rem
  }
  footer>div>span {
    max-width:11rem
  }
  .back-top {
    margin-left:auto
  }
  .desktop-break {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  * {
    transition:none!important
  }
}