html {scroll-behavior:smooth;scroll-padding-top:28px;} body {margin:0;}
:root {
  --ink:#0f1210;
  --paper:#f3f3ec;
  --green:#53db76;
  --green-bright:#58e07b;
  --green-deep:#50d873;
  --muted:#b2b5ab;
  --line:rgba(243,243,236,.22);
  font-family:var(--font-text);
  font-weight:var(--text-weight);
  color:var(--ink);
  background:var(--ink);
  font-synthesis:none
}
*:where(:not(.motion-block, .motion-block *)) {
  box-sizing:border-box
}
html:where(:not(.motion-block, .motion-block *)) {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body:where(:not(.motion-block, .motion-block *)) {
  margin:0
}
a:where(:not(.motion-block, .motion-block *)) {
  color:inherit;
  text-decoration:none
}
button:where(:not(.motion-block, .motion-block *)) {
  font:inherit;
  cursor:pointer
}
button:where(:not(.motion-block, .motion-block *)),a:where(:not(.motion-block, .motion-block *)),summary:where(:not(.motion-block, .motion-block *)) {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible:where(:not(.motion-block, .motion-block *)),button:focus-visible:where(:not(.motion-block, .motion-block *)),summary:focus-visible:where(:not(.motion-block, .motion-block *)) {
  outline:3px solid #5fb775;
  outline-offset:7px
}
.dark:where(:not(.motion-block, .motion-block *)) {
  background:var(--ink);
  color:var(--paper)
}
.paper:where(:not(.motion-block, .motion-block *)) {
  background:var(--paper)
}
h1:where(:not(.motion-block, .motion-block *)),h2:where(:not(.motion-block, .motion-block *)),h3:where(:not(.motion-block, .motion-block *)),p:where(:not(.motion-block, .motion-block *)) {
  margin:0
}
h1:where(:not(.motion-block, .motion-block *)),h2:where(:not(.motion-block, .motion-block *)),h3:where(:not(.motion-block, .motion-block *)) {
  font-family:var(--font-display);
  font-weight:var(--display-weight);
  letter-spacing:var(--display-track)
}
h2:where(:not(.motion-block, .motion-block *)) {
  font-size:clamp(48px,6.3vw,94px);
  line-height:1.02
}
p:where(:not(.motion-block, .motion-block *)) {
  line-height:1.5
}
section:where(:not(.motion-block, .motion-block *)),footer:where(:not(.motion-block, .motion-block *)) {
  padding:90px 4.3%
}
.eyebrow:where(:not(.motion-block, .motion-block *)) {
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.075em;
  line-height:1.5
}
.text-link:where(:not(.motion-block, .motion-block *)) {
  display:inline-flex;
  gap:35px;
  align-items:center;
  font-size:14px;
  padding-bottom:7px;
  border-bottom:1px solid currentColor
}
.text-link span:where(:not(.motion-block, .motion-block *)) {
  font-size:19px
}
.button:where(:not(.motion-block, .motion-block *)) {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  padding:19px 24px;
  min-height:58px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:500
}
.button span:where(:not(.motion-block, .motion-block *)) {
  font-size:21px
}
.button:hover:where(:not(.motion-block, .motion-block *)) {
  filter:brightness(.91)
}
.light:where(:not(.motion-block, .motion-block *)) {
  background:var(--paper);
  color:var(--ink)
}
.green:where(:not(.motion-block, .motion-block *)) {
  background:var(--green);
  color:var(--ink)
}
.outline:where(:not(.motion-block, .motion-block *)) {
  border-color:var(--line);
  color:var(--paper);
  background:transparent
}
.skip:where(:not(.motion-block, .motion-block *)) {
  position:fixed;
  top:-100px;
  left:20px;
  padding:15px;
  background:var(--green);
  z-index:100
}
.skip:focus:where(:not(.motion-block, .motion-block *)) {
  top:10px
}
.site-header:where(:not(.motion-block, .motion-block *)) {
  padding:26px 4.3%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--paper);
  border-bottom:1px solid var(--line)
}
.brand:where(:not(.motion-block, .motion-block *)) {
  display:flex;
  gap:12px;
  font-size:17px;
  line-height:1;
  letter-spacing:-.045em
}
.brand svg:where(:not(.motion-block, .motion-block *)) {
  width:35px;
  height:35px;
  stroke:var(--green);
  fill:none;
  stroke-width:1.4
}
.site-header nav:where(:not(.motion-block, .motion-block *)) {
  display:flex;
  align-items:center;
  gap:36px;
  font-size:13px
}
.nav-start:where(:not(.motion-block, .motion-block *)) {
  border:1px solid var(--line);
  padding:13px 17px
}
.nav-start span:where(:not(.motion-block, .motion-block *)) {
  margin-left:25px
}
.hero:where(:not(.motion-block, .motion-block *)) {
  padding-top:33px;
  padding-bottom:0;
  overflow:hidden
}
.hero-top:where(:not(.motion-block, .motion-block *)) {
  display:flex;
  justify-content:space-between
}
.status-dot:where(:not(.motion-block, .motion-block *)) {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--green);
  margin-right:10px
}
.hero h1:where(:not(.motion-block, .motion-block *)) {
  position:relative;
  z-index:1;
  font-size:clamp(78px,10.8vw,160px);
  line-height:.94;
  margin-top:65px;
  letter-spacing:-.065em
}
.hero-bottom:where(:not(.motion-block, .motion-block *)) {
  display:grid;
  grid-template-columns:35% 65%;
  min-height:400px;
  position:relative
}
.hero-copy:where(:not(.motion-block, .motion-block *)) {
  z-index:2;
  padding-top:40px;
  max-width:340px
}
.hero-copy p:where(:not(.motion-block, .motion-block *)) {
  font-size:20px;
  line-height:1.4;
  margin-bottom:30px
}
.hero-copy .text-link:where(:not(.motion-block, .motion-block *)) {
  margin-top:25px;
  display:flex;
  width:max-content
}
.hero-art:where(:not(.motion-block, .motion-block *)) {
  position:relative;
  margin-top:-238px;
  margin-right:-80px;
  min-height:600px;
  pointer-events:none
}
.hero-art img:where(:not(.motion-block, .motion-block *)) {
  width:100%;
  height:100%;
  object-fit:contain;
  transform:rotate(-12deg);
  animation:drift 18s ease-in-out infinite;
  will-change:transform
}
.art-caption:where(:not(.motion-block, .motion-block *)) {
  position:absolute;
  bottom:43px;
  right:80px;
  color:var(--muted);
  font-size:10px
}
.hero-baseline:where(:not(.motion-block, .motion-block *)) {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding:21px 0;
  font-size:11px;
  color:var(--muted)
}
.section-top:where(:not(.motion-block, .motion-block *)) {
  display:flex;
  justify-content:space-between;
  align-items:start;
  margin-bottom:35px
}
.section-top>p:last-child:not(:first-child):where(:not(.motion-block, .motion-block *)) {
  font-size:17px;
  color:var(--muted)
}
.loop-section:where(:not(.motion-block, .motion-block *)) {
  padding-bottom:50px
}
.loop-section h2:where(:not(.motion-block, .motion-block *)) {
  font-size:clamp(60px,7.2vw,104px)
}
.loop-workspace:where(:not(.motion-block, .motion-block *)) {
  display:grid;
  grid-template-columns:56% 44%;
  gap:0;
  margin-top:50px;
  align-items:center
}
.loop-visual:where(:not(.motion-block, .motion-block *)) {
  position:relative;
  aspect-ratio:600/540;
  max-width:700px
}
.loop-lines:where(:not(.motion-block, .motion-block *)) {
  width:100%;
  height:100%;
  fill:none;
  stroke:#3c493f;
  stroke-width:1
}
.loop-lines .inner-orbit:where(:not(.motion-block, .motion-block *)) {
  stroke:#223326;
  stroke-dasharray:2 8
}
.loop-lines .orbit-direction:where(:not(.motion-block, .motion-block *)) {
  stroke:var(--green)
}
.repair-line:where(:not(.motion-block, .motion-block *)) {
  stroke:#58e07b;
  stroke-dasharray:4 5;
  opacity:.5
}
.lesson-line:where(:not(.motion-block, .motion-block *)) {
  stroke:var(--green);
  opacity:.5
}
.task-center:where(:not(.motion-block, .motion-block *)) {
  position:absolute;
  left:32%;
  right:32%;
  top:35%;
  text-align:center
}
.task-center strong:where(:not(.motion-block, .motion-block *)) {
  display:block;
  font-size:clamp(27px,3vw,43px);
  font-weight:400;
  letter-spacing:-.045em;
  line-height:1.06;
  margin:15px 0
}
.task-center>.eyebrow:where(:not(.motion-block, .motion-block *)) {
  color:var(--green)
}
.task-inputs:where(:not(.motion-block, .motion-block *)) {
  font-size:11px;
  line-height:1.5;
  color:var(--muted)
}
.stage:where(:not(.motion-block, .motion-block *)) {
  position:absolute;
  color:var(--paper);
  background:var(--ink);
  border:1px solid #4e5c52;
  padding:13px 18px;
  min-width:112px;
  display:flex;
  gap:10px;
  align-items:center;
  font-size:15px;
  transform:translate(-50%,-50%)
}
.stage span:where(:not(.motion-block, .motion-block *)) {
  font:10px var(--font-mono);
  color:var(--muted)
}
.stage[aria-pressed=true]:where(:not(.motion-block, .motion-block *)) {
  background:var(--green);
  color:var(--ink);
  border-color:var(--green)
}
.stage[aria-pressed=true] span:where(:not(.motion-block, .motion-block *)) {
  color:var(--ink)
}
.stage-0:where(:not(.motion-block, .motion-block *)) {
  left:50%;
  top:15.4%
}
.stage-1:where(:not(.motion-block, .motion-block *)) {
  left:79.3%;
  top:39%
}
.stage-2:where(:not(.motion-block, .motion-block *)) {
  left:68.2%;
  top:77.1%
}
.stage-3:where(:not(.motion-block, .motion-block *)) {
  left:31.8%;
  top:77.1%
}
.stage-4:where(:not(.motion-block, .motion-block *)) {
  left:20.7%;
  top:39%
}
.repair-label:where(:not(.motion-block, .motion-block *)),.lesson-label:where(:not(.motion-block, .motion-block *)) {
  position:absolute;
  font:10px var(--font-mono);
  color:#b0c8b6
}
.repair-label:where(:not(.motion-block, .motion-block *)) {
  left:39%;
  top:68%
}
.lesson-label:where(:not(.motion-block, .motion-block *)) {
  left:18%;
  top:22%;
  transform:rotate(-40deg)
}
.loop-detail:where(:not(.motion-block, .motion-block *)) {
  border-top:1px solid var(--line);
  padding-top:21px;
  padding-left:0;
  margin-left:10%;
  align-self:center
}
.detail-number:where(:not(.motion-block, .motion-block *)) {
  font:11px var(--font-mono);
  color:var(--muted);
  margin-bottom:37px
}
.loop-detail h3:where(:not(.motion-block, .motion-block *)) {
  font-size:64px;
  margin:10px 0 18px
}
.stage-content>p:not(.eyebrow):where(:not(.motion-block, .motion-block *)) {
  font-size:18px;
  max-width:400px;
  min-height:81px;
  color:#c7cbbf
}
.stage-output:where(:not(.motion-block, .motion-block *)) {
  border-top:1px solid var(--line);
  margin-top:27px;
  padding-top:16px;
  display:flex;
  flex-direction:column;
  gap:7px
}
.stage-output span:where(:not(.motion-block, .motion-block *)) {
  font:10px var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.1em
}
.stage-output strong:where(:not(.motion-block, .motion-block *)) {
  font-size:15px;
  font-weight:400;
  color:var(--paper)
}
.loop-detail>.text-link:where(:not(.motion-block, .motion-block *)) {
  margin-top:15px;
  font-size:12px
}
.replay-row:where(:not(.motion-block, .motion-block *)) {
  display:flex;
  align-items:center;
  gap:17px;
  margin-top:35px
}
.replay-row .button:where(:not(.motion-block, .motion-block *)) {
  padding:12px 16px;
  gap:25px;
  min-height:45px
}
.replay-row p:where(:not(.motion-block, .motion-block *)) {
  font-size:10px;
  color:var(--muted)
}
.release-line:where(:not(.motion-block, .motion-block *)) {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:24px 0;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:20px;
  align-items:center
}
.release-line p:where(:not(.motion-block, .motion-block *)) {
  font-size:15px
}
.release-line p strong:where(:not(.motion-block, .motion-block *)) {
  color:var(--green);
  font-weight:400
}
.release-line>span:last-child:where(:not(.motion-block, .motion-block *)) {
  font-size:11px;
  color:var(--muted)
}
details summary:where(:not(.motion-block, .motion-block *)) {
  list-style:none;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:22px;
  align-items:center
}
details summary:where(:not(.motion-block, .motion-block *))::-webkit-details-marker {
  display:none
}
details[open] summary>span:where(:not(.motion-block, .motion-block *)) {
  transform:rotate(45deg)
}
.sources summary:where(:not(.motion-block, .motion-block *)) {
  font-size:13px;
  padding:24px 0
}
.sources ol:where(:not(.motion-block, .motion-block *)) {
  padding-left:20px;
  font-size:14px;
  line-height:2;
  color:var(--muted)
}
.sources a:where(:not(.motion-block, .motion-block *)) {
  text-decoration:underline;
  color:var(--paper)
}
.case-section:where(:not(.motion-block, .motion-block *)) {
  padding-top:94px
}
.case-section .section-top:where(:not(.motion-block, .motion-block *)) {
  margin-bottom:60px
}
.case-grid:where(:not(.motion-block, .motion-block *)) {
  display:grid;
  grid-template-columns:60% 40%;
  gap:0
}
.case-grid h2:where(:not(.motion-block, .motion-block *)) {
  font-size:clamp(48px,5.4vw,78px)
}
.case-copy:where(:not(.motion-block, .motion-block *)) {
  padding-left:10%;
  padding-top:8px
}
.case-copy p:where(:not(.motion-block, .motion-block *)) {
  font-size:17px;
  margin-bottom:20px
}
.muted:where(:not(.motion-block, .motion-block *)) {
  color:#62665a
}
.case-flow:where(:not(.motion-block, .motion-block *)) {
  margin-top:70px;
  display:flex;
  align-items:center;
  border-top:1px solid #c6c9be;
  padding-top:30px;
  justify-content:space-between;
  gap:16px
}
.case-flow div:where(:not(.motion-block, .motion-block *)) {
  display:flex;
  flex-direction:column;
  gap:10px
}
.case-flow span:where(:not(.motion-block, .motion-block *)) {
  font:11px var(--font-mono);
  color:#686c62
}
.case-flow strong:where(:not(.motion-block, .motion-block *)) {
  font-size:35px;
  letter-spacing:-.05em;
  font-weight:400
}
.case-flow small:where(:not(.motion-block, .motion-block *)) {
  font-size:12px
}
.case-flow i:where(:not(.motion-block, .motion-block *)) {
  font-size:26px;
  font-style:normal
}
.skills-section:where(:not(.motion-block, .motion-block *)) {
  padding-top:25px
}
.skills-heading:where(:not(.motion-block, .motion-block *)) {
  display:flex;
  justify-content:space-between;
  padding-top:45px;
  border-top:1px solid #b8bbb1;
  margin-bottom:60px
}
.skills-heading h2:where(:not(.motion-block, .motion-block *)) {
  width:58%;
  font-size:clamp(48px,5.2vw,75px)
}
.skill-rows a:where(:not(.motion-block, .motion-block *)) {
  display:grid;
  grid-template-columns:22% 30% 1fr 30px;
  align-items:center;
  gap:10px;
  padding:31px 0;
  border-top:1px solid #b8bbb1;
  transition:padding .2s,background .2s
}
.skill-rows a:last-child:where(:not(.motion-block, .motion-block *)) {
  border-bottom:1px solid #b8bbb1
}
.skill-rows a:hover:where(:not(.motion-block, .motion-block *)) {
  background:#e9ecdf;
  padding-left:14px;
  padding-right:14px
}
.skill-rows strong:where(:not(.motion-block, .motion-block *)) {
  font-size:29px;
  letter-spacing:-.045em;
  font-weight:400
}
.skill-rows a>span:nth-of-type(2):where(:not(.motion-block, .motion-block *)) {
  font-size:14px;
  color:#565950
}
.skill-rows b:where(:not(.motion-block, .motion-block *)) {
  font-size:24px;
  font-weight:400
}
.library-link:where(:not(.motion-block, .motion-block *)) {
  margin-top:30px
}
.start-section:where(:not(.motion-block, .motion-block *)) {
  background:var(--green);
  color:var(--ink)
}
.start-section h2:where(:not(.motion-block, .motion-block *)) {
  font-size:clamp(65px,8.5vw,122px);
  margin-top:0
}
.start-bottom:where(:not(.motion-block, .motion-block *)) {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:55px;
  gap:15%
}
.start-bottom>p:where(:not(.motion-block, .motion-block *)) {
  font-size:clamp(21px,1.9vw,30px);
  max-width:20em
}
.start-actions:where(:not(.motion-block, .motion-block *)) {
  display:flex;
  flex-direction:column;
  gap:13px
}
.start-actions .green:where(:not(.motion-block, .motion-block *)) {
  background:var(--ink);
  color:var(--paper)
}
.start-actions .outline:where(:not(.motion-block, .motion-block *)) {
  border-color:#498d5a;
  color:var(--ink)
}
.start-actions .text-link:where(:not(.motion-block, .motion-block *)) {
  width:max-content;
  margin-top:13px
}
.faq-section:where(:not(.motion-block, .motion-block *)) {
  display:grid;
  grid-template-columns:42% 58%;
  gap:0
}
.faq-section h2:where(:not(.motion-block, .motion-block *)) {
  font-size:clamp(56px,6.4vw,104px)
}
.faqs details:where(:not(.motion-block, .motion-block *)) {
  border-top:1px solid #b8bbb1;
  padding:24px 0
}
.faqs details:last-child:where(:not(.motion-block, .motion-block *)) {
  border-bottom:1px solid #b8bbb1
}
.faqs summary:where(:not(.motion-block, .motion-block *)) {
  font-size:clamp(20px,1.7vw,27px);
  letter-spacing:-.02em
}
.faqs details p:where(:not(.motion-block, .motion-block *)) {
  max-width:34em;
  margin-top:24px;
  font-size:clamp(18px,1.3vw,21px);
  color:#565950
}
.faqs details a:where(:not(.motion-block, .motion-block *)) {
  text-decoration:underline
}
footer:where(:not(.motion-block, .motion-block *)) {
  padding-top:40px;
  padding-bottom:25px;
  overflow:hidden
}
.footer-top:where(:not(.motion-block, .motion-block *)),.footer-bottom:where(:not(.motion-block, .motion-block *)) {
  display:flex;
  justify-content:space-between;
  font-size:12px
}
.footer-wordmark:where(:not(.motion-block, .motion-block *)) {
  font-size:clamp(95px,16.5vw,250px);
  letter-spacing:-.07em;
  line-height:.83;
  padding:85px 0 65px
}
.footer-wordmark span:where(:not(.motion-block, .motion-block *)) {
  display:block;
  color:#73786b
}
.footer-bottom:where(:not(.motion-block, .motion-block *)) {
  border-top:1px solid var(--line);
  padding-top:22px;
  color:var(--muted);
  font-size:11px
}
@keyframes drift {
  0%,100% {
    transform:translateY(0) rotate(-12deg)
  }
  50% {
    transform:translateY(-14px) rotate(-7deg)
  }
}
@media(min-width:1600px) {
  section:where(:not(.motion-block, .motion-block *)),footer:where(:not(.motion-block, .motion-block *)),.site-header:where(:not(.motion-block, .motion-block *)) {
    padding-left:max(4.3%,calc((100vw - 1500px)/2));
    padding-right:max(4.3%,calc((100vw - 1500px)/2))
  }
}
@media(max-width:1100px) {
  .hero-art:where(:not(.motion-block, .motion-block *)) {
    margin-top:-150px;
    margin-right:-90px;
    min-height:510px
  }
  .hero-bottom:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:40% 60%
  }
  .hero-copy p:where(:not(.motion-block, .motion-block *)) {
    font-size:18px
  }
  .loop-workspace:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:55% 45%
  }
  .loop-detail:where(:not(.motion-block, .motion-block *)) {
    margin-left:7%
  }
  .stage:where(:not(.motion-block, .motion-block *)) {
    min-width:100px;
    padding:11px 12px;
    font-size:13px
  }
  .replay-row:where(:not(.motion-block, .motion-block *)) {
    align-items:start;
    flex-direction:column;
    gap:10px
  }
  .replay-row p br:where(:not(.motion-block, .motion-block *)) {
    display:none
  }
  .loop-detail h3:where(:not(.motion-block, .motion-block *)) {
    font-size:54px
  }
  .skill-rows a:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:20% 33% 1fr 25px
  }
  .skill-rows strong:where(:not(.motion-block, .motion-block *)) {
    font-size:25px
  }
  .case-copy:where(:not(.motion-block, .motion-block *)) {
    padding-left:6%
  }
  .case-grid h2:where(:not(.motion-block, .motion-block *)) {
    font-size:55px
  }
  .case-flow small:where(:not(.motion-block, .motion-block *)) {
    font-size:11px
  }
  .release-line:where(:not(.motion-block, .motion-block *)) {
    justify-content:start
  }
  .hero-note:where(:not(.motion-block, .motion-block *)) {
    display:none
  }
}
@media(max-width:800px) {
  section:where(:not(.motion-block, .motion-block *)),footer:where(:not(.motion-block, .motion-block *)) {
    padding:65px 24px
  }
  .site-header:where(:not(.motion-block, .motion-block *)) {
    padding:22px 24px
  }
  .site-header nav:where(:not(.motion-block, .motion-block *)) {
    gap:22px
  }
  .site-header .github:where(:not(.motion-block, .motion-block *)) {
    display:none
  }
  .hero:where(:not(.motion-block, .motion-block *)) {
    padding-top:30px;
    padding-bottom:0
  }
  .hero h1:where(:not(.motion-block, .motion-block *)) {
    font-size:clamp(72px,12vw,100px);
    margin-top:50px
  }
  .hero-bottom:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:45% 55%;
    min-height:380px
  }
  .hero-art:where(:not(.motion-block, .motion-block *)) {
    margin-top:-90px;
    margin-right:-120px;
    min-height:420px
  }
  .art-caption:where(:not(.motion-block, .motion-block *)) {
    display:none
  }
  .hero-copy:where(:not(.motion-block, .motion-block *)) {
    padding-top:35px
  }
  .hero-copy p:where(:not(.motion-block, .motion-block *)) {
    font-size:17px
  }
  .hero-copy .button:where(:not(.motion-block, .motion-block *)) {
    gap:22px;
    padding:16px 20px
  }
  .loop-workspace:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:1fr 1fr;
    align-items:start;
    margin-top:40px
  }
  .loop-visual:where(:not(.motion-block, .motion-block *)) {
    margin:25px -20px 0 -17px
  }
  .stage:where(:not(.motion-block, .motion-block *)) {
    min-width:auto;
    padding:10px;
    font-size:12px;
    gap:6px
  }
  .stage span:where(:not(.motion-block, .motion-block *)) {
    font-size:9px
  }
  .task-center strong:where(:not(.motion-block, .motion-block *)) {
    font-size:26px
  }
  .task-inputs:where(:not(.motion-block, .motion-block *)) {
    font-size:9px
  }
  .task-center .eyebrow:where(:not(.motion-block, .motion-block *)) {
    font-size:9px
  }
  .repair-label:where(:not(.motion-block, .motion-block *)),.lesson-label:where(:not(.motion-block, .motion-block *)) {
    font-size:8px
  }
  .loop-detail:where(:not(.motion-block, .motion-block *)) {
    margin-left:12%;
    padding-top:15px
  }
  .detail-number:where(:not(.motion-block, .motion-block *)) {
    margin-bottom:22px
  }
  .loop-detail h3:where(:not(.motion-block, .motion-block *)) {
    font-size:45px
  }
  .stage-content>p:not(.eyebrow):where(:not(.motion-block, .motion-block *)) {
    font-size:16px
  }
  .stage-output:where(:not(.motion-block, .motion-block *)) {
    margin-top:20px
  }
  .loop-detail>.text-link:where(:not(.motion-block, .motion-block *)) {
    margin-top:0
  }
  .replay-row:where(:not(.motion-block, .motion-block *)) {
    margin-top:22px
  }
  .case-grid:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:1fr
  }
  .case-copy:where(:not(.motion-block, .motion-block *)) {
    padding-left:0;
    max-width:500px;
    margin-top:35px
  }
  .case-flow:where(:not(.motion-block, .motion-block *)) {
    gap:10px;
    flex-wrap:wrap
  }
  .case-flow strong:where(:not(.motion-block, .motion-block *)) {
    font-size:28px
  }
  .case-flow small:where(:not(.motion-block, .motion-block *)) {
    max-width:110px;
    line-height:1.5
  }
  .skills-heading:where(:not(.motion-block, .motion-block *)) {
    gap:30px
  }
  .skill-rows a:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:20% 37% 1fr 20px
  }
  .skill-rows strong:where(:not(.motion-block, .motion-block *)) {
    font-size:22px
  }
  .skill-rows a>span:nth-of-type(2):where(:not(.motion-block, .motion-block *)) {
    font-size:12px
  }
  .skill-rows .eyebrow:where(:not(.motion-block, .motion-block *)) {
    font-size:9px
  }
  .start-bottom:where(:not(.motion-block, .motion-block *)) {
    gap:8%
  }
  .start-bottom>p:where(:not(.motion-block, .motion-block *)) {
    font-size:21px
  }
  .start-actions .button:where(:not(.motion-block, .motion-block *)) {
    gap:12px;
    padding:17px
  }
  .faq-section:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:36% 64%;
    gap:0
  }
  .faq-section h2:where(:not(.motion-block, .motion-block *)) {
    font-size:56px
  }
  .faqs summary:where(:not(.motion-block, .motion-block *)) {
    font-size:20px
  }
  .section-top>p:last-child:not(:first-child):where(:not(.motion-block, .motion-block *)) {
    font-size:14px
  }
  .footer-wordmark:where(:not(.motion-block, .motion-block *)) {
    padding:70px 0
  }
  .hero-baseline:where(:not(.motion-block, .motion-block *)) {
    font-size:9px
  }
}
@media(max-width:560px) {
  section:where(:not(.motion-block, .motion-block *)),footer:where(:not(.motion-block, .motion-block *)) {
    padding:59px 22px
  }
  .site-header:where(:not(.motion-block, .motion-block *)) {
    padding:20px 22px
  }
  .brand:where(:not(.motion-block, .motion-block *)) {
    font-size:15px;
    gap:8px
  }
  .brand svg:where(:not(.motion-block, .motion-block *)) {
    width:30px;
    height:30px
  }
  .site-header nav>a:not(.nav-start):where(:not(.motion-block, .motion-block *)) {
    display:none
  }
  .nav-start:where(:not(.motion-block, .motion-block *)) {
    font-size:12px;
    padding:11px 12px
  }
  .nav-start span:where(:not(.motion-block, .motion-block *)) {
    margin-left:15px
  }
  .hero:where(:not(.motion-block, .motion-block *)) {
    padding-top:27px;
    padding-bottom:0
  }
  .hero h1:where(:not(.motion-block, .motion-block *)) {
    font-size:clamp(60px,15.8vw,87px);
    margin-top:45px
  }
  .hero .eyebrow:where(:not(.motion-block, .motion-block *)) {
    font-size:9px
  }
  .hero-bottom:where(:not(.motion-block, .motion-block *)) {
    display:flex;
    flex-direction:column;
    min-height:0
  }
  .hero-copy:where(:not(.motion-block, .motion-block *)) {
    padding-top:28px;
    max-width:290px
  }
  .hero-copy p:where(:not(.motion-block, .motion-block *)) {
    font-size:17px;
    margin-bottom:22px
  }
  .hero-copy .text-link:where(:not(.motion-block, .motion-block *)) {
    position:relative;
    z-index:2;
    font-size:12px;
    margin-top:20px
  }
  .hero-art:where(:not(.motion-block, .motion-block *)) {
    height:305px;
    min-height:0;
    width:calc(100% + 65px);
    margin:-35px -35px -13px;
    align-self:center
  }
  .hero-baseline:where(:not(.motion-block, .motion-block *)) {
    padding:18px 0;
    gap:20px;
    line-height:1.5
  }
  .hero-baseline span:last-child:where(:not(.motion-block, .motion-block *)) {
    display:none
  }
  h2:where(:not(.motion-block, .motion-block *)) {
    font-size:53px
  }
  .section-top:where(:not(.motion-block, .motion-block *)) {
    gap:30px;
    margin-bottom:28px
  }
  .section-top>p:last-child:not(:first-child):where(:not(.motion-block, .motion-block *)) {
    max-width:135px;
    font-size:12px
  }
  .loop-section h2:where(:not(.motion-block, .motion-block *)) {
    font-size:54px
  }
  .loop-workspace:where(:not(.motion-block, .motion-block *)) {
    display:flex;
    flex-direction:column;
    margin-top:20px
  }
  .loop-visual:where(:not(.motion-block, .motion-block *)) {
    width:100%;
    margin:10px 0 0;
    max-width:none
  }
  .stage:where(:not(.motion-block, .motion-block *)) {
    padding:10px 9px;
    font-size:12px
  }
  .task-center strong:where(:not(.motion-block, .motion-block *)) {
    font-size:27px
  }
  .repair-label:where(:not(.motion-block, .motion-block *)) {
    top:67%;
    left:36%
  }
  .loop-detail:where(:not(.motion-block, .motion-block *)) {
    margin:5px 0 0;
    width:100%;
    padding-top:21px
  }
  .detail-number:where(:not(.motion-block, .motion-block *)) {
    margin-bottom:22px
  }
  .loop-detail h3:where(:not(.motion-block, .motion-block *)) {
    font-size:49px
  }
  .stage-content>p:not(.eyebrow):where(:not(.motion-block, .motion-block *)) {
    min-height:0;
    font-size:17px;
    max-width:none
  }
  .stage-output:where(:not(.motion-block, .motion-block *)) {
    margin-top:25px;
    margin-bottom:20px;
    padding-bottom:5px
  }
  .replay-row:where(:not(.motion-block, .motion-block *)) {
    flex-direction:row;
    align-items:center;
    margin-top:24px
  }
  .replay-row p:where(:not(.motion-block, .motion-block *)) {
    font-size:9px
  }
  .replay-row p br:where(:not(.motion-block, .motion-block *)) {
    display:block
  }
  .release-line:where(:not(.motion-block, .motion-block *)) {
    margin-top:15px;
    gap:12px;
    padding:24px 0
  }
  .release-line p:where(:not(.motion-block, .motion-block *)) {
    font-size:13px
  }
  .sources ol:where(:not(.motion-block, .motion-block *)) {
    font-size:13px;
    line-height:1.7
  }
  .sources li:where(:not(.motion-block, .motion-block *)) {
    margin-bottom:10px
  }
  .case-section .section-top:where(:not(.motion-block, .motion-block *)) {
    flex-direction:column;
    gap:20px;
    margin-bottom:34px
  }
  .case-grid h2:where(:not(.motion-block, .motion-block *)) {
    font-size:47px
  }
  .case-copy p:where(:not(.motion-block, .motion-block *)) {
    font-size:16px
  }
  .case-flow:where(:not(.motion-block, .motion-block *)) {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-top:33px
  }
  .case-flow i:where(:not(.motion-block, .motion-block *)) {
    display:none
  }
  .case-flow small:where(:not(.motion-block, .motion-block *)) {
    max-width:none
  }
  .case-flow strong:where(:not(.motion-block, .motion-block *)) {
    font-size:33px
  }
  .skills-section:where(:not(.motion-block, .motion-block *)) {
    padding-top:0
  }
  .skills-heading:where(:not(.motion-block, .motion-block *)) {
    display:block;
    padding-top:40px;
    margin-bottom:35px
  }
  .skills-heading h2:where(:not(.motion-block, .motion-block *)) {
    width:100%;
    font-size:49px;
    margin-top:25px
  }
  .skill-rows a:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:1fr 24px;
    gap:12px;
    padding:23px 0
  }
  .skill-rows .eyebrow:where(:not(.motion-block, .motion-block *)) {
    grid-column:1;
    font-size:10px
  }
  .skill-rows strong:where(:not(.motion-block, .motion-block *)) {
    grid-column:1;
    font-size:29px
  }
  .skill-rows a>span:nth-of-type(2):where(:not(.motion-block, .motion-block *)) {
    grid-column:1;
    font-size:14px
  }
  .skill-rows b:where(:not(.motion-block, .motion-block *)) {
    grid-column:2;
    grid-row:1/4
  }
  .start-section h2:where(:not(.motion-block, .motion-block *)) {
    font-size:clamp(42px,12vw,58px)
  }
  .start-bottom:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:1fr;
    gap:30px;
    margin-top:30px
  }
  .start-bottom>p:where(:not(.motion-block, .motion-block *)) {
    font-size:20px
  }
  .start-actions .button:where(:not(.motion-block, .motion-block *)) {
    padding:19px 20px
  }
  .faq-section:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:1fr;
    gap:32px
  }
  .faq-section h2:where(:not(.motion-block, .motion-block *)) {
    font-size:56px
  }
  .faqs summary:where(:not(.motion-block, .motion-block *)) {
    font-size:20px
  }
  .footer-top:where(:not(.motion-block, .motion-block *)) {
    font-size:10px;
    gap:15px
  }
  .footer-wordmark:where(:not(.motion-block, .motion-block *)) {
    font-size:20vw;
    padding:62px 0 45px
  }
  .footer-bottom:where(:not(.motion-block, .motion-block *)) {
    font-size:9px;
    gap:30px
  }
}
@media(prefers-reduced-motion:reduce) {
  html:where(:not(.motion-block, .motion-block *)) {
    scroll-behavior:auto
  }
  *:where(:not(.motion-block, .motion-block *)),*:where(:not(.motion-block, .motion-block *)):before,*:where(:not(.motion-block, .motion-block *)):after {
    animation:none!important;
    transition:none!important
  }
  .hero-art img:where(:not(.motion-block, .motion-block *)) {
    will-change:auto
  }
}
html[data-paused] .hero-art img:where(:not(.motion-block, .motion-block *)) {
  animation-play-state:paused
}
.loop-visual[data-route=repair] .repair-line:where(:not(.motion-block, .motion-block *)),.loop-visual[data-route=lesson] .lesson-line:where(:not(.motion-block, .motion-block *)) {
  opacity:1;
  stroke-width:3;
  filter:drop-shadow(0 0 5px #58e07b)
}
.loop-visual[data-route=repair] .repair-label:where(:not(.motion-block, .motion-block *)),.loop-visual[data-route=lesson] .lesson-label:where(:not(.motion-block, .motion-block *)) {
  color:var(--green);
  font-weight:bold
}
.hero+.loop-section:where(:not(.motion-block, .motion-block *)) {
  border-top:1px solid var(--line)
}
.skill-rows a:where(:not(.motion-block, .motion-block *)) {
  grid-template-columns:22% 28% 1fr 68px
}
.skill-rows b:where(:not(.motion-block, .motion-block *)) {
  display:flex;
  align-items:center;
  gap:7px
}
.skill-rows b small:where(:not(.motion-block, .motion-block *)) {
  font:10px var(--font-mono)
}
.hero-art img:where(:not(.motion-block, .motion-block *)) {
  filter:brightness(1.3)
}
@media(max-width:800px) and (min-width:561px) {
  .skill-rows a:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:18% 30% 1fr 62px
  }
}
@media(max-width:560px) {
  .skill-rows a:where(:not(.motion-block, .motion-block *)) {
    grid-template-columns:1fr 68px
  }
  .skill-rows b:where(:not(.motion-block, .motion-block *)) {
    grid-column:2;
    grid-row:1/4
  }
}
/* Progressive enhancement: source notes remain open when JavaScript is absent. */
[hidden]:where(:not(.motion-block, .motion-block *))  {
  display: none !important;
}
.stage:disabled:where(:not(.motion-block, .motion-block *))  {
  cursor: default;
}
.featured-skill:where(:not(.motion-block, .motion-block *))  {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8%;
  border-top: 1px solid #b8bbb1;
  padding: 38px 0 42px;
}
.featured-skill h3:where(:not(.motion-block, .motion-block *))  {
  font-size: clamp(38px, 4vw, 58px);
  margin-top: 17px;
}
.featured-mark:where(:not(.motion-block, .motion-block *))  {
  display: block;
  color: #3e784d;
  font-size: 64px;
  line-height: 1;
  margin-top: 20px;
}
.featured-copy p:where(:not(.motion-block, .motion-block *))  {
  font-size: 18px;
  max-width: 510px;
}
.featured-copy .text-link:where(:not(.motion-block, .motion-block *))  {
  margin-top: 28px;
}
/* Keep the circular diagram spacious on tablets. */
@media (min-width: 801px) and (max-width: 1100px)  {
  .loop-workspace:where(:not(.motion-block, .motion-block *))  {
    grid-template-columns: 58% 42%;
  }
  .task-center strong:where(:not(.motion-block, .motion-block *))  {
    font-size: 30px;
    margin: 10px 0;
  }
  .task-inputs:where(:not(.motion-block, .motion-block *))  {
    font-size: 10px;
  }
  .repair-label:where(:not(.motion-block, .motion-block *))  {
    top: 66%;
    left: 38%;
    font-size: 9px;
  }
}
/* Compact screens use a connected stage list, with inputs above the controls. */
@media (max-width: 800px)  {
  .loop-workspace:where(:not(.motion-block, .motion-block *))  {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 36px;
    align-items: start;
  }
  .loop-visual:where(:not(.motion-block, .motion-block *))  {
    aspect-ratio: auto;
    margin: 0;
    width: 100%;
  }
  .loop-lines:where(:not(.motion-block, .motion-block *))  {
    display: none;
  }
  .task-center:where(:not(.motion-block, .motion-block *))  {
    position: static;
    text-align: left;
    margin-bottom: 25px;
  }
  .task-center strong:where(:not(.motion-block, .motion-block *))  {
    font-size: 31px;
    margin: 9px 0;
  }
  .task-center strong br:where(:not(.motion-block, .motion-block *))  {
    display: none;
  }
  .task-center .eyebrow:where(:not(.motion-block, .motion-block *))  {
    font-size: 10px;
  }
  .task-inputs:where(:not(.motion-block, .motion-block *))  {
    display: block;
    font-size: 12px;
    line-height: 1.7;
  }
  .stage-buttons:where(:not(.motion-block, .motion-block *))  {
    position: relative;
    display: grid;
    gap: 12px;
    padding-left: 22px;
  }
  .stage-buttons:where(:not(.motion-block, .motion-block *))::before  {
    content: '';
    position: absolute;
    left: 6px;
    top: 24px;
    bottom: 24px;
    width: 1px;
    background: #57765f;
  }
  .stage:where(:not(.motion-block, .motion-block *))  {
    position: relative;
    inset: auto;
    transform: none;
    width: 100%;
    min-height: 48px;
    padding: 13px 16px;
    gap: 14px;
    font-size: 15px;
  }
  .stage:where(:not(.motion-block, .motion-block *))::before  {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    left: -20px;
    border-radius: 50%;
    background: #57765f;
  }
  .stage[aria-pressed=true]:where(:not(.motion-block, .motion-block *))::before  {
    background: var(--green);
  }
  .stage span:where(:not(.motion-block, .motion-block *))  {
    font-size: 11px;
  }
  .repair-label:where(:not(.motion-block, .motion-block *)), .lesson-label:where(:not(.motion-block, .motion-block *))  {
    position: static;
    display: block;
    transform: none;
    font-size: 11px;
    line-height: 1.5;
    padding: 12px 0 0 22px;
  }
  .loop-visual[data-route=repair] .repair-label:where(:not(.motion-block, .motion-block *)), .loop-visual[data-route=lesson] .lesson-label:where(:not(.motion-block, .motion-block *))  {
    border-left: 2px solid var(--green);
    padding-left: 20px;
  }
  .loop-detail:where(:not(.motion-block, .motion-block *))  {
    margin: 0;
    width: 100%;
    align-self: start;
  }
}
@media (max-width: 560px)  {
  .loop-workspace:where(:not(.motion-block, .motion-block *))  {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .featured-skill:where(:not(.motion-block, .motion-block *))  {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 28px;
  }
  .featured-mark:where(:not(.motion-block, .motion-block *))  {
    display: none;
  }
  .featured-copy p:where(:not(.motion-block, .motion-block *))  {
    font-size: 17px;
  }
}

[data-scroll-layer] { padding:0; margin:0; border:0; }


html[data-smooth-scroll] .hero {padding-top:130px;}
/* Scroll-driven sections mount inside .motion-block roots; the page-wide rules above skip those subtrees. */
.motion-block {font-family:var(--font-text);line-height:1.5;}
.motion-block, .motion-block *, .motion-block *::before, .motion-block *::after {box-sizing:border-box;}
.motion-block :is(h2,p) {margin:0;}
:where(.motion-block) h2 {font-weight:inherit;} /* :where keeps it below any class rule, so .pillar-word sets its own weight */
/* Screen-reader copy that splitText() (text-effects.mjs) keeps beside its aria-hidden split spans. */
.fx-sr {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.motion-fallback {padding:90px 5%;background:#0d120e;color:#f3f3ec;}
.motion-fallback h2 {font-size:clamp(40px,6vw,90px);line-height:1.05;margin-bottom:30px;}
.motion-fallback p {font-size:22px;max-width:700px;}
/* Film grain. assets/grain.png comes from generate-grain.mjs; nine stepped tile offsets
   every 30 ms read as moving grain. effects.mjs adds the fixed overlay on the homepage.
   The half-pixel shift resamples the tile, softening the overlay grain by about a quarter. */
.grain-overlay {position:fixed;inset:0;z-index:12;pointer-events:none;background:url("assets/grain.png") repeat;opacity:0;transform:translateX(.5px);transition:opacity .5s ease-in-out;animation:grain-jitter .27s steps(1,end) infinite;}
@keyframes grain-jitter {
  0% {background-position:0 0}
  11.1% {background-position:-97px 43px}
  22.2% {background-position:61px -128px}
  33.3% {background-position:-23px -71px}
  44.4% {background-position:117px 89px}
  55.5% {background-position:-139px 17px}
  66.6% {background-position:29px 113px}
  77.7% {background-position:-67px -37px}
  88.8% {background-position:83px -101px}
}
@media (prefers-reduced-motion:reduce) {.grain-overlay {animation:none;}}