@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --ink: #f3f0e9;
  --muted: #9c9ca9;
  --night: #10111f;
  --night-2: #17182b;
  --line: rgba(255,255,255,.16);
  --faint: rgba(255,255,255,.075);
  --acid: #d6ff57;
  --coral: #ff7557;
  --violet: #a28bff;
  --cyan: #62d9e7;
  --gold: #f5ca64;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 5%, rgba(162,139,255,.11), transparent 31rem),
    radial-gradient(circle at 4% 38%, rgba(98,217,231,.055), transparent 28rem),
    var(--night);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; font: inherit; }
button:focus-visible, a:focus-visible {
  outline: 3px solid var(--acid);
  outline-offset: 4px;
}

.app-shell { min-height: 100vh; }

.masthead {
  min-height: min(92svh, 860px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 31rem);
  grid-template-rows: auto 1fr auto;
  gap: 2rem 7vw;
  align-items: end;
  padding: max(1.5rem, env(safe-area-inset-top)) clamp(1.25rem, 5vw, 5.5rem) clamp(3rem, 8vh, 6rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.masthead::before {
  content: "";
  position: absolute;
  inset: 15% 0 auto 35%;
  width: 42vw;
  height: 42vw;
  max-width: 40rem;
  max-height: 40rem;
  border: 1px solid rgba(214,255,87,.12);
  border-radius: 50%;
  box-shadow: 0 0 0 5vw rgba(162,139,255,.025), 0 0 0 10vw rgba(98,217,231,.018);
  z-index: -1;
}

.eyebrow {
  grid-column: 1 / -1;
  align-self: start;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 400 .72rem/1.3 var(--mono);
  letter-spacing: .12em;
}

h1, h2, p { margin-top: 0; }

h1 {
  margin-bottom: 0;
  max-width: 10ch;
  font-size: clamp(4.1rem, 11.5vw, 10.5rem);
  font-weight: 500;
  letter-spacing: -.085em;
  line-height: .78;
}

.lede {
  margin: 0 0 2.5rem;
  max-width: 29rem;
  color: #d2d0d3;
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.43;
  letter-spacing: -.025em;
}

.mast-actions { display: flex; align-items: center; gap: 1.4rem; }
.primary-button, .quiet-button, .demo-button, .reset-button {
  min-height: 48px;
  border: 0;
  cursor: pointer;
}

.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 3rem;
  min-width: 16rem;
  padding: .9rem 1rem .9rem 1.2rem;
  color: #17181d;
  background: var(--acid);
  font-weight: 700;
  border-radius: 100vw;
  transition: transform .2s ease, box-shadow .2s ease;
}
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(214,255,87,.12); }
.quiet-button { padding: .8rem .1rem; color: var(--muted); background: transparent; border-bottom: 1px solid var(--line); }
.quiet-button:hover { color: var(--ink); }

.hour-section {
  padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 4vw, 4rem);
  background: #eeeae3;
  color: #171821;
}

.section-head {
  width: min(100%, 92rem);
  margin: 0 auto 2.4rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}

.section-kicker {
  margin-bottom: .65rem;
  color: #65646b;
  font: 500 .72rem/1.3 var(--mono);
  letter-spacing: .12em;
}

.section-head h2, .consequence h2 {
  margin-bottom: 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -.055em;
  font-weight: 500;
}

.legend { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; color: #6c6b71; font: 400 .72rem/1 var(--mono); }
.legend span { display: inline-flex; align-items: center; gap: .42rem; }
.dot { width: .52rem; height: .52rem; border-radius: 50%; }
.dot-work { background: #694fc8; }
.dot-care { background: #dd6043; }
.dot-school { background: #008e9d; }
.dot-errand { background: #b58611; }

.simulation-card {
  width: min(100%, 92rem);
  margin: 0 auto;
  overflow: hidden;
  background: #111220;
  color: var(--ink);
  border-radius: 1.1rem;
  box-shadow: 0 2rem 5rem rgba(14,13,20,.17);
}

.status-strip {
  min-height: 4.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1.2rem .8rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.status-strip p { margin: 0; color: #b8b6c1; font: 400 .76rem/1.5 var(--mono); }
.demo-button {
  flex: 0 0 auto;
  padding: .7rem 1.1rem;
  color: #14151d;
  background: var(--acid);
  border-radius: 100vw;
  font: 600 .75rem/1 var(--mono);
}

.braid-stage {
  position: relative;
  height: clamp(29rem, 53vw, 47rem);
  min-height: 29rem;
  overflow: hidden;
  touch-action: pan-y;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 25%,
    radial-gradient(ellipse at center, rgba(162,139,255,.11), transparent 48%);
}

#braidCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.hour-axis {
  position: absolute;
  left: 5%; right: 5%; top: 50%;
  height: 1px;
  display: flex;
  justify-content: space-between;
  background: rgba(255,255,255,.26);
}
.hour-axis span {
  transform: translate(-50%, -1.65rem);
  color: rgba(255,255,255,.45);
  font: 300 .65rem/1 var(--mono);
}
.hour-axis span:last-child { transform: translate(50%, -1.65rem); }

.crossings { position: absolute; inset: 0; }
.crossing {
  --x: 50%;
  --shift: 0px;
  position: absolute;
  left: var(--x);
  top: 50%;
  width: 4.2rem;
  min-height: 4.2rem;
  padding: 0;
  transform: translate(calc(-50% + var(--shift)), -50%);
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
  z-index: 5;
}
.crossing::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 1rem;
  height: 1rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--node-color, var(--acid));
  border: 3px solid #111220;
  box-shadow: 0 0 0 1px var(--node-color, var(--acid)), 0 0 1.4rem rgba(214,255,87,.1);
  transition: width .25s ease, height .25s ease, box-shadow .25s ease;
}
.crossing:hover::before, .crossing:focus-visible::before { width: 1.35rem; height: 1.35rem; }
.crossing.is-affected::before { animation: knotPulse .85s ease 2; }
.crossing.is-selected::before { box-shadow: 0 0 0 7px rgba(214,255,87,.12), 0 0 2rem var(--node-color); }
.crossing.has-propagation::before { box-shadow: 0 0 0 5px rgba(214,255,87,.09), 0 0 1.8rem var(--node-color); }
.crossing-label {
  position: absolute;
  left: 50%;
  top: calc(50% + 1.35rem);
  width: 8.6rem;
  transform: translateX(-50%);
  color: #cac8d1;
  text-align: center;
  font: 400 .67rem/1.3 var(--mono);
  pointer-events: none;
}
.crossing-label b { display: block; margin-bottom: .15rem; color: #f6f3ee; font-weight: 500; }
.crossing-label em { color: var(--node-color); font-style: normal; }

.stage-caption {
  position: absolute;
  left: 1.2rem; right: 1.2rem; bottom: 1rem;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.3);
  font: 300 .62rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.readout {
  display: grid;
  grid-template-columns: minmax(11rem, .75fr) 2fr auto;
  gap: 1.4rem;
  align-items: center;
  min-height: 8.4rem;
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--line);
}
.readout-number { display: flex; align-items: baseline; gap: .65rem; }
.readout-number > span { color: var(--acid); font-size: clamp(2.6rem, 5vw, 4.8rem); font-weight: 500; letter-spacing: -.07em; line-height: 1; }
.readout-number small { max-width: 5rem; color: var(--muted); font: 400 .66rem/1.3 var(--mono); }
.readout-sentence { margin: 0; color: #d5d2d8; font-size: clamp(.95rem, 1.5vw, 1.18rem); line-height: 1.45; }
.reset-button { padding: .75rem .1rem; background: transparent; border-bottom: 1px solid var(--line); color: #aaa8b2; font: 400 .72rem/1.2 var(--mono); }
.reset-button:disabled { opacity: .3; cursor: default; }

.consequence {
  min-height: 90vh;
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(20rem, 1.15fr);
  gap: clamp(3rem, 10vw, 10rem);
  align-items: center;
  padding: clamp(5rem, 12vw, 11rem) clamp(1.25rem, 8vw, 9rem);
  background: var(--night);
}
.consequence-copy { align-self: start; position: sticky; top: 4rem; }
.consequence .section-kicker { color: var(--acid); }
.consequence h2 { max-width: 13ch; }
.consequence-copy > p:last-child { max-width: 33rem; margin: 2rem 0 0; color: var(--muted); line-height: 1.65; }

.chain-list { list-style: none; margin: 0; padding: 0; counter-reset: chain; }
.chain-list li {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 1.1rem;
  min-height: 8.5rem;
  padding: 1.8rem 0 2rem 2.2rem;
  border-top: 1px solid var(--line);
  counter-increment: chain;
  opacity: .55;
  transform: translateY(.3rem);
  transition: opacity .5s ease, transform .5s ease;
}
.chain-list li::before {
  content: counter(chain, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.95rem;
  color: rgba(255,255,255,.35);
  font: 300 .6rem/1 var(--mono);
}
.chain-list li::after {
  content: "";
  position: absolute;
  left: .65rem;
  top: 2.75rem;
  bottom: -1px;
  width: 1px;
  background: linear-gradient(var(--violet), rgba(162,139,255,.08));
}
.chain-list li.is-live { opacity: 1; transform: none; }
.chain-time { color: var(--acid); font: 400 .7rem/1.5 var(--mono); }
.chain-list p { margin: 0; font-size: clamp(1.05rem, 2vw, 1.42rem); line-height: 1.42; letter-spacing: -.02em; }
.chain-note { margin: 1rem 0 0 2.2rem; color: var(--muted); font: 400 .69rem/1.5 var(--mono); }

footer {
  min-height: 15rem;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  padding: 3rem clamp(1.25rem, 5vw, 5rem);
  border-top: 1px solid var(--line);
  color: #777783;
  font: 300 .68rem/1.6 var(--mono);
}
footer p { max-width: 36rem; }
footer a { color: #b9b7c0; }

.toast {
  position: fixed;
  left: 50%; bottom: max(1.2rem, env(safe-area-inset-bottom));
  z-index: 20;
  max-width: calc(100vw - 2rem);
  padding: .8rem 1.1rem;
  transform: translate(-50%, 2rem);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 100vw;
  opacity: 0;
  pointer-events: none;
  color: #171821;
  background: var(--acid);
  box-shadow: 0 1rem 3rem rgba(0,0,0,.25);
  font: 500 .72rem/1.3 var(--mono);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@keyframes knotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,255,87,.18), 0 0 .5rem var(--node-color); }
  45% { box-shadow: 0 0 0 14px rgba(214,255,87,0), 0 0 2rem var(--node-color); }
}

@media (max-width: 760px) {
  .masthead {
    min-height: 92svh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 2rem;
    padding-bottom: 2.2rem;
  }
  .masthead::before { inset: 24% auto auto 47%; width: 70vw; height: 70vw; }
  .eyebrow { flex: 0 0 auto; }
  h1 { margin-top: auto; font-size: clamp(4rem, 23vw, 6.5rem); }
  .lede { margin: 0; font-size: 1.08rem; }
  .mast-actions { justify-content: space-between; }
  .primary-button { min-width: 0; flex: 1; gap: 1rem; }

  .hour-section { padding: 4rem .7rem; }
  .section-head { align-items: flex-start; flex-direction: column; padding: 0 .55rem; }
  .section-head h2 { font-size: 2.4rem; }
  .legend { gap: .6rem 1rem; }
  .simulation-card { border-radius: .85rem; }
  .status-strip { align-items: flex-start; padding: 1rem; }
  .status-strip p { max-width: 12rem; }
  .demo-button { min-height: 48px; padding: .6rem .8rem; }
  .braid-stage { height: 34rem; }
  .hour-axis { left: 3%; right: 3%; }
  .hour-axis span { font-size: .55rem; }
  .hour-axis span:not(:first-child):not(:last-child) { visibility: hidden; }
  .crossing { width: 3.65rem; min-height: 3.65rem; }
  .crossing::after {
    content: "";
    position: absolute;
    inset: .38rem;
    border: 1px dashed rgba(255,255,255,.2);
    border-radius: 50%;
  }
  .crossing-label { top: calc(50% + 1.15rem); width: 5.1rem; font-size: .56rem; opacity: .62; }
  .crossing:nth-child(even) .crossing-label { top: auto; bottom: calc(50% + 1.15rem); }
  .crossing:not(.is-selected):not(.is-affected) .crossing-label em { display: none; }
  .crossing.is-selected, .crossing.is-affected { z-index: 9; }
  .crossing.is-selected .crossing-label, .crossing.is-affected .crossing-label {
    padding: .3rem .38rem;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: .4rem;
    opacity: 1;
    background: rgba(17,18,32,.9);
  }
  .crossing-label b { overflow-wrap: anywhere; }
  .readout { grid-template-columns: 1fr auto; gap: 1rem; padding: 1rem; }
  .readout-number > span { font-size: 3.25rem; }
  .readout-sentence { grid-column: 1 / -1; grid-row: 2; }
  .reset-button { max-width: 8rem; }

  .consequence { min-height: auto; grid-template-columns: 1fr; gap: 4rem; padding: 5rem 1.35rem; }
  .consequence-copy { position: static; }
  .chain-list li { grid-template-columns: 4.4rem 1fr; padding-left: 1.8rem; }
  .chain-note { margin-left: 1.8rem; }
  footer { min-height: auto; flex-direction: column; padding: 2.5rem 1.35rem 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}