@charset "UTF-8";
:root {
  --paper:#f6f5ef;
  --ink:#1d2c24;
  --forest:#163d2b;
  --lime:#c7e889;
  --muted:#627065;
  --line:#d5dbce;
  --sage:#e9eee3;
  --danger:#9a463a;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none
}

* {
  box-sizing:border-box
}

html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden
}

body {
  height:100svh;
  height:100dvh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  font-size:15px;
  line-height:1.5
}

button,input,select,textarea {
  font:inherit
}

button,a,summary,select {
  -webkit-tap-highlight-color:transparent
}

button,a,summary {
  touch-action:manipulation
}

button {
  cursor:pointer
}

button:disabled {
  cursor:default;
  opacity:.45
}

a {
  color:inherit;
  text-decoration:none
}

button,select {
  border-radius:3px
}

button {
  color:inherit
}

a:focus-visible,button:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
  outline:3px solid #78a751;
  outline-offset:4px
}

p,h1,h2,h3 {
  margin:0
}

p {
  color:var(--muted)
}

h1,h2,h3 {
  font-weight:650;
  letter-spacing:-.045em
}

em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  color:var(--forest)
}

[hidden] {
  display:none!important
}

.sr-only {
  position:fixed;
  top:0;
  left:0;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}

.js-only {
  display:none
}

.enhanced .js-only {
  display:flex
}

.skip-link {
  position:fixed;
  top:10px;
  left:12px;
  z-index:30;
  background:var(--forest);
  color:#fff;
  padding:12px;
  transform:translateY(-180%)
}

.skip-link:focus {
  transform:none
}

.site-header {
  border-bottom:1px solid var(--line);
  background:var(--paper);
  z-index:5
}

.header-inner {
  max-width:1360px;
  margin:auto;
  padding:15px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:25px;
  font-weight:750;
  letter-spacing:-1.4px;
  flex-shrink:0
}

.brand-light {
  font-weight:400;
  color:#6b796d
}

.brand-mark {
  display:flex;
  align-items:center;
  gap:4px;
  height:25px
}

.brand-mark span {
  width:5px;
  border-radius:3px;
  background:var(--forest);
  height:14px
}

.brand-mark span:nth-child(2) {
  height:25px
}

.brand-mark span:nth-child(3) {
  height:20px;
  background:#85a950
}

.tiny-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#8cae52;
  flex-shrink:0
}

.header-note {
  display:flex;
  align-items:center;
  gap:9px;
  font:10px var(--mono);
  letter-spacing:.055em;
  color:var(--muted)
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  min-height:48px;
  padding:12px 20px;
  border:1px solid transparent;
  font-size:13px;
  font-weight:650;
  white-space:nowrap;
  transition:transform 180ms ease,box-shadow 180ms ease,background 180ms ease
}

.button:hover {
  transform:translateY(-2px);
  box-shadow:0 5px 0 #173d2a18
}

.button-dark {
  background:var(--forest);
  color:#fff
}

.button-small {
  min-height:44px;
  padding:10px 15px
}

.button-lime {
  background:var(--lime);
  color:var(--forest)
}

.text-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  gap:8px;
  border-bottom:1px solid #93a08c;
  font-weight:600;
  font-size:13px;
  white-space:nowrap
}

.text-link:hover {
  color:#608a35
}

main {
  min-width:0;
  min-height:0;
  overflow:hidden
}

.chapter-deck {
  height:100%;
  width:100%;
  display:flex;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;
  scrollbar-width:none
}

.chapter-deck::-webkit-scrollbar {
  display:none
}

.chapter {
  width:100%;
  min-width:0;
  flex:0 0 100%;
  height:100%;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  overscroll-behavior-y:contain;
  scrollbar-color:#c1ccba transparent;
  scrollbar-width:thin
}

.chapter:focus-visible {
  outline-offset:-5px
}

.panel-inner {
  max-width:1320px;
  margin:0 auto;
  min-height:100%;
  padding:40px 48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
  min-width:0
}

.eyebrow {
  font:10px/1.6 var(--mono);
  letter-spacing:.12em;
  color:var(--forest);
  margin-bottom:14px
}

.chapter-heading {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:end;
  gap:60px
}

.chapter-heading>p {
  max-width:390px;
  font-size:16px;
  line-height:1.7
}

.chapter h2 {
  font-size:clamp(35px,3.7vw,58px);
  line-height:1.05
}

.micro-note,.demo-policy-note,.section-footnote {
  font-size:12px;
  line-height:1.65;
  color:var(--muted)
}

.section-footnote {
  font-family:var(--mono);
  font-size:10px
}

.demo-policy-note span {
  color:var(--forest)
}

.hero-grid {
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:65px;
  align-items:center
}

.prototype-badge {
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid #b7c3ab;
  padding:7px 10px;
  font:9px/1.3 var(--mono);
  letter-spacing:.045em;
  margin-bottom:24px
}

.prototype-badge>span:not(.tiny-dot) {
  color:#99a48f;
  margin:0 2px
}

.hero-copy h1 {
  font-size:clamp(48px,5.5vw,82px);
  line-height:1.015;
  letter-spacing:-.065em
}

.hero-copy h1 em {
  letter-spacing:-.075em
}

.hero-copy .eyebrow {
  margin-bottom:16px
}

.hero-lede {
  font-size:16px;
  line-height:1.75;
  max-width:460px;
  margin-top:22px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin:24px 0 14px
}

.hero-copy .micro-note {
  max-width:400px
}

.product-scene {
  position:relative;
  isolation:isolate;
  min-width:0;
  padding:25px 0 25px 15px
}

.scene-orbit {
  position:absolute;
  inset:0 8px;
  border:1px solid #c5d1b6;
  z-index:-1;
  pointer-events:none;
  border-radius:46%;
  transform:rotate(-12deg)
}

.orbit-two {
  inset:18px -13px 5px 22px;
  transform:rotate(11deg);
  border-color:#dfe3d5
}

.workflow-card {
  position:relative;
  background:#192c22;
  color:#eff4e9;
  box-shadow:0 22px 50px #183b221d;
  min-width:0
}

.enhanced .workflow-card {
  animation:assemble 650ms cubic-bezier(.2,.7,.2,1) both
}

.workspace-top {
  display:flex;
  align-items:center;
  gap:10px;
  padding:17px 20px;
  border-bottom:1px solid #39483a;
  font-size:13px
}

.workspace-symbol {
  display:grid;
  place-items:center;
  background:#314e32;
  border:1px solid #597341;
  color:var(--lime);
  font-weight:750;
  width:26px;
  height:26px
}

.live-label {
  font:8px var(--mono);
  letter-spacing:.08em;
  color:#c1db9d;
  border:1px solid #5a6c4d;
  padding:4px 6px;
  margin-left:auto
}

.flow-diagram {
  display:grid;
  grid-template-columns:1fr 24px 1.05fr 24px 1fr;
  align-items:center;
  padding:23px 20px
}

.flow-node {
  display:flex;
  flex-direction:column;
  gap:5px;
  min-width:0;
  border:1px solid #4b5b46;
  padding:12px 10px;
  min-height:110px;
  background:#203426;
  transition:background 200ms,border-color 200ms,transform 200ms
}

.flow-node strong {
  font-size:12px;
  letter-spacing:-.02em
}

.flow-node small {
  color:#c0cdb7;
  font-size:10px;
  line-height:1.5
}

.flow-node-main {
  background:#354d32;
  border-color:#849e54
}

.flow-node-icon {
  width:25px;
  height:25px;
  border:1px solid #63785b;
  display:grid;
  place-items:center;
  color:#d9e7cc;
  margin-bottom:4px
}

.stripe-letter {
  background:#7061bb;
  border:0;
  border-radius:50%;
  color:white;
  font-weight:700
}

.diagram-connector {
  text-align:center;
  color:var(--lime);
  position:relative;
  font-size:18px
}

.diagram-connector i {
  position:absolute;
  left:2px;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--lime);
  opacity:0;
  box-shadow:0 0 10px #c7e889
}

.activity-row {
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 20px;
  padding:14px 0;
  border-top:1px solid #39483a;
  min-width:0
}

.activity-row>div {
  min-width:0
}

.activity-row strong {
  font-size:12px;
  display:block;
  overflow-wrap:anywhere
}

.activity-row small {
  font-size:11px;
  color:#b7c6ae;
  display:block;
  margin-top:3px
}

.activity-icon {
  border:1px solid #728660;
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  flex-shrink:0;
  color:var(--lime)
}

.activity-status {
  font:8px var(--mono);
  color:var(--lime);
  margin-left:auto
}

.hero-access {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 15px;
  margin:0 20px;
  background:#314d35;
  border:1px solid #819d5b;
  gap:12px;
  transition:background 220ms,border-color 220ms
}

.access-label {
  display:block;
  font:9px/1.5 var(--mono);
  letter-spacing:.08em;
  color:#c0d0b6
}

.hero-access strong {
  font-size:16px;
  letter-spacing:-.025em
}

.hero-access-icon {
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:50%;
  background:var(--lime);
  color:var(--forest);
  font-size:21px;
  flex-shrink:0
}

.hero-access[data-access="denied"] {
  background:#523b32;
  border-color:#9b6a56
}

.hero-access[data-access="denied"] .hero-access-icon {
  background:#edbeaa;
  color:#6d352d
}

.flow-timeline {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  padding:17px 20px 8px
}

.flow-timeline span {
  border-top:2px solid #41583d;
  padding-top:7px;
  color:#b5c6ab;
  font:9px/1.4 var(--mono);
  transition:color 180ms,border-color 180ms
}

.flow-timeline .is-current,.flow-timeline .is-done {
  color:var(--lime);
  border-color:var(--lime)
}

.enhanced .flow-playback {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:0 8px;
  padding:5px 20px 0
}

.play-button,.stop-button {
  border:1px solid #536b4b;
  background:transparent;
  min-height:44px;
  min-width:44px;
  padding:8px 12px;
  color:#e7f1dc;
  font-size:12px
}

.play-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px
}

.play-button:hover:not(:disabled),.stop-button:hover:not(:disabled) {
  background:#344f33
}

.play-button span {
  font-size:18px;
  color:var(--lime)
}

#flow-status {
  grid-column:1/-1;
  font:10px/1.5 var(--mono);
  color:#cee6a5;
  min-height:27px;
  padding-top:8px
}

.workspace-foot {
  font-size:10px;
  color:#b5c4aa;
  padding:0 20px 15px
}

.product-scene[data-phase="receipt"] [data-node="stripe"],.product-scene[data-phase="queue"] [data-node="flow"],.product-scene[data-phase="sync"] [data-node="flow"],.product-scene[data-phase="complete"] [data-node="app"] {
  border-color:var(--lime);
  background:#405b35;
  animation:node-flash 650ms ease both
}

.product-scene[data-phase="receipt"] .diagram-connector:nth-child(4) i,.product-scene[data-phase="sync"] .diagram-connector:nth-child(4) i,.product-scene[data-phase="complete"] .diagram-connector:nth-child(2) i {
  animation:packet 650ms ease both
}

.product-scene[data-phase="complete"] .hero-access {
  animation:decision-flash 600ms ease both
}

.chapter-workflow {
  background:#e9eee3
}

.demo-disclaimer {
  background:#f6f8ef;
  border:1px solid #d0d9c6;
  font-size:12px;
  padding:10px 14px;
  color:#52644f;
  display:flex;
  align-items:center;
  gap:10px
}

.demo-shell {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  background:#fcfcf7;
  border:1px solid #cbd4c2;
  min-width:0
}

.demo-controls {
  padding:25px;
  border-right:1px solid #d8dfcf
}

.demo-controls-head {
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:start
}

.demo-controls-head .eyebrow {
  font-size:9px
}

.demo-id {
  font:9px var(--mono);
  color:#7a8774
}

.state-label {
  font-size:13px;
  font-weight:650;
  margin:5px 0 12px
}

.state-buttons {
  display:grid;
  gap:8px
}

.state-button {
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  min-height:44px;
  padding:10px 13px;
  border:1px solid #c9d4bd;
  background:transparent;
  font-size:13px;
  transition:background 180ms,transform 180ms
}

.state-button:hover {
  background:#eff3e6;
  transform:translateX(3px)
}

.state-button[aria-pressed="true"] {
  background:#e0ebd3;
  border-color:#8aa364;
  box-shadow:inset 3px 0 #7f9f51
}

.state-indicator {
  width:9px;
  height:9px;
  border-radius:50%;
  border:1px solid #8c9f7b
}

.state-button[aria-pressed="true"] .state-indicator {
  background:#719944;
  border-color:#719944
}

.analogy-card {
  display:flex;
  gap:10px;
  border-top:1px solid #dce2d4;
  margin-top:18px;
  padding-top:15px
}

.analogy-icon {
  color:#6a8453
}

.analogy-card strong {
  font-size:11px
}

.analogy-card p {
  font-size:11px;
  line-height:1.6;
  margin-top:3px
}

.demo-result {
  padding:25px;
  min-width:0
}

.result-top {
  display:flex;
  justify-content:space-between;
  gap:15px
}

.result-top .eyebrow {
  font-size:9px
}

.demo-only-tag {
  font:8px var(--mono);
  color:#789251;
  white-space:nowrap
}

.status-panel {
  display:flex;
  gap:13px;
  align-items:start;
  padding:16px 0 20px
}

.status-icon {
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#e1ead6;
  color:#477139;
  font-size:20px;
  flex-shrink:0
}

.status-panel[data-state="failed"] .status-icon,.status-panel[data-state="ended"] .status-icon {
  background:#f0ded4;
  color:#954735
}

.status-overline {
  font:9px var(--mono);
  color:#79876e
}

.status-panel h3 {
  font-size:20px;
  margin:4px 0
}

.status-panel p {
  font-size:12px;
  max-width:350px
}

.access-panel {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px;
  background:#ebf1df;
  border:1px solid #c5d3b3
}

.access-panel .access-label {
  color:#627452;
  font-size:9px
}

.access-panel strong {
  font-size:22px;
  line-height:1.3;
  letter-spacing:-.04em
}

.access-panel[data-access="denied"] {
  background:#f3e8df;
  border-color:#e4c6b6
}

.access-symbol {
  width:29px;
  height:29px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#d9e8c9;
  color:#3f672f;
  margin-left:10px;
  flex-shrink:0
}

.access-panel[data-access="denied"] .access-symbol {
  background:#eac9b8;
  color:#8b4736
}

.event-panel {
  margin-top:20px;
  border-top:1px solid #d3ddc6;
  padding-top:14px;
  min-width:0
}

.event-header {
  display:flex;
  justify-content:space-between;
  font:8px var(--mono);
  color:#708365;
  gap:10px
}

.event-line {
  display:flex;
  gap:9px;
  align-items:start;
  margin-top:10px
}

.event-line code {
  font:11px/1.6 var(--mono);
  overflow-wrap:anywhere
}

.event-bullet {
  width:6px;
  height:6px;
  flex-shrink:0;
  background:#81a35c;
  border-radius:50%;
  margin-top:5px
}

.event-bullet[data-state="failed"],.event-bullet[data-state="ended"] {
  background:#ae6d4c
}

.event-recovery {
  font-size:11px;
  line-height:1.6;
  margin:8px 0 0 15px;
  color:#6a7c5a
}

.chapter-developers {
  background:#1b3025;
  color:#edf4e6
}

.developer-grid {
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  align-items:center;
  gap:65px
}

.chapter-developers h2 em {
  color:#c5e197
}

.chapter-developers .eyebrow,.chapter-developers .text-link {
  color:#c2df99
}

.developer-copy>p:not(.eyebrow) {
  font-size:15px;
  line-height:1.75;
  color:#bfceba;
  margin-top:21px
}

.sdk-note {
  position:relative;
  border-left:2px solid #879f5c;
  margin-top:25px;
  padding:10px 0 10px 18px
}

.sdk-note>.tiny-dot {
  position:absolute;
  left:-4px;
  top:18px
}

.sdk-note strong {
  font-size:12px
}

.sdk-note p {
  color:#adc0a4;
  font-size:12px;
  line-height:1.65;
  margin-top:6px
}

.developer-copy .security-note {
  font-size:11px!important;
  margin-bottom:20px
}

.code-window {
  background:#102219;
  border:1px solid #52613f;
  box-shadow:0 20px 40px #0a1a1740;
  overflow:hidden;
  min-width:0
}

.code-window-top {
  display:flex;
  gap:10px;
  align-items:center;
  padding:12px 15px;
  border-bottom:1px solid #35462f
}

.window-dots {
  display:flex;
  gap:4px
}

.window-dots i {
  width:4px;
  height:4px;
  background:#718857;
  border-radius:50%
}

.file-name {
  font:9px var(--mono);
  color:#b8cba1
}

.copy-button {
  margin-left:auto;
  border:1px solid #4d633c;
  background:transparent;
  color:#d7e8bb;
  min-height:44px;
  padding:6px 11px;
  font-size:11px
}

.code-tabs {
  display:flex;
  border-bottom:1px solid #34452c;
  padding:0 15px;
  gap:18px
}

.code-tab {
  min-height:44px;
  background:transparent;
  border:0;
  border-bottom:2px solid transparent;
  color:#9fb68b;
  padding:10px 0;
  font:11px var(--mono)
}

.code-tab[aria-selected="true"] {
  color:#d4eaa8;
  border-color:#b8da80
}

.code-context {
  font:10px/1.5 var(--mono);
  color:#9db489;
  padding:13px 18px 0
}

.code-panel {
  outline-offset:-4px!important
}

.code-panel pre {
  margin:0;
  padding:15px 18px 12px;
  max-height:385px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:#4a6242 transparent;
  font:11px/1.75 var(--mono);
  color:#d1e4b6;
  tab-size:2
}

.code-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 18px 14px;
  gap:12px;
  color:#8fa67c;
  font:9px var(--mono)
}

#copy-status {
  font:10px/1.5 var(--mono);
  color:#c1db99;
  min-height:18px;
  padding:0 18px 8px
}

.deck-footer {
  border-top:1px solid var(--line);
  background:var(--paper);
  z-index:5
}

.deck-navigation {
  display:flex;
  align-items:center;
  gap:28px;
  max-width:1360px;
  margin:auto;
  padding:12px 40px 6px;
  min-width:0
}

.chapter-tabs {
  display:flex;
  align-items:stretch;
  gap:6px;
  overflow-x:auto;
  scrollbar-width:none;
  min-width:0;
  flex:1
}

.chapter-tabs::-webkit-scrollbar {
  display:none
}

.chapter-tabs a {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  min-width:78px;
  flex-shrink:0;
  padding:9px 12px;
  font-size:12px;
  border:1px solid transparent;
  transition:background 180ms,color 180ms
}

.chapter-tabs a span {
  font:9px var(--mono);
  color:#79866e
}

.chapter-tabs a:hover {
  background:#e9eee0
}

.chapter-tabs a[aria-selected="true"] {
  background:#e2ebd5;
  border-color:#9ab176;
  color:var(--forest)
}

.deck-controls {
  align-items:center;
  gap:7px;
  flex-shrink:0
}

.deck-controls button {
  border:1px solid #bbc9aa;
  background:transparent;
  min-height:44px;
  min-width:44px;
  padding:8px;
  font-size:18px
}

.deck-controls button:hover:not(:disabled) {
  background:#e7eedc
}

#motion-toggle {
  font:10px var(--mono);
  min-width:88px;
  padding:8px 9px
}

.chapter-position {
  font:10px var(--mono);
  color:#647656;
  padding:0 7px;
  white-space:nowrap
}

.deck-meta {
  max-width:1360px;
  margin:auto;
  padding:1px 40px 11px;
  display:flex;
  justify-content:space-between;
  font:9px/1.5 var(--mono);
  color:#65765b;
  gap:15px
}

.chapter-progress {
  height:3px;
  background:#e3e8d9
}

.chapter-progress span {
  display:block;
  width:16.6667%;
  height:100%;
  background:#91b457;
  transition:width 300ms ease
}

.no-js-note {
  font-size:11px;
  padding:6px 15px;
  border-top:1px solid var(--line)
}

@keyframes assemble {
  from {
    opacity:.35;
    transform:translateY(20px) rotate(.8deg)
  }
  to {
    opacity:1;
    transform:translateY(0) rotate(0)
  }
}

@keyframes node-flash {
  0% {
    box-shadow:0 0 0 0 #bbdf7340
  }
  50% {
    box-shadow:0 0 0 6px #bbdf731c
  }
  100% {
    box-shadow:0 0 0 0 #bbdf7300
  }
}

@keyframes packet {
  0% {
    transform:translateX(16px);
    opacity:0
  }
  20% {
    opacity:1
  }
  80% {
    opacity:1
  }
  100% {
    transform:translateX(-4px);
    opacity:0
  }
}

@keyframes decision-flash {
  0% {
    box-shadow:inset 0 0 0 1px #d5ee9c80
  }
  100% {
    box-shadow:inset 0 0 0 5px #d5ee9c00
  }
}

@media(min-width:1600px) {
  .panel-inner {
    max-width:1440px;
    padding:45px 60px
  }
  .hero-copy h1 {
    font-size:90px
  }
  .flow-node {
    min-height:125px;
    padding:16px
  }
  .workflow-card {
    max-width:620px
  }
}

@media(max-width:1180px) {
  .panel-inner {
    padding:32px 34px
  }
  .hero-grid,.developer-grid {
    gap:35px
  }
  .hero-copy h1 {
    font-size:clamp(45px,5.9vw,69px)
  }
  .deck-navigation {
    gap:15px;
    padding-right:24px;
    padding-left:24px
  }
  .deck-meta {
    padding-left:24px;
    padding-right:24px
  }
  .chapter-tabs a {
    padding:9px 10px;
    min-width:73px;
    font-size:11px;
    gap:5px
  }
  .chapter-tabs a span {
    font-size:8px
  }
  .chapter-heading {
    gap:30px
  }
  .flow-node {
    padding:10px 7px
  }
  .demo-controls,.demo-result {
    padding:20px
  }
}

@media(max-width:800px) {
  .header-inner {
    padding:11px 20px
  }
  .header-note {
    display:none
  }
  .brand {
    font-size:23px
  }
  .button-small {
    font-size:11px;
    padding:10px 12px
  }
  .panel-inner {
    padding:25px 24px;
    gap:20px
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:25px
  }
  .hero-copy h1 {
    font-size:clamp(42px,7.6vw,61px);
    line-height:1.02
  }
  .prototype-badge {
    margin-bottom:16px;
    font-size:8px;
    padding:6px 8px
  }
  .hero-copy .eyebrow {
    font-size:9px;
    margin-bottom:10px
  }
  .hero-lede {
    font-size:14px;
    line-height:1.6;
    margin-top:15px;
    max-width:520px
  }
  .hero-actions {
    margin:18px 0 9px;
    gap:16px
  }
  .hero-actions .button {
    font-size:12px;
    min-height:44px;
    padding:10px 15px
  }
  .hero-actions .text-link {
    font-size:12px
  }
  .hero-copy .micro-note {
    font-size:10px
  }
  .product-scene {
    max-width:600px;
    width:100%;
    justify-self:center;
    padding:10px 0 12px
  }
  .workspace-top {
    padding:12px 15px
  }
  .flow-diagram {
    padding:15px;
    grid-template-columns:1fr 20px 1.05fr 20px 1fr
  }
  .flow-node {
    min-height:82px;
    padding:8px
  }
  .flow-node-icon {
    width:22px;
    height:22px;
    margin:0
  }
  .flow-node small {
    font-size:9px
  }
  .flow-node strong {
    font-size:11px
  }
  .activity-row {
    margin:0 15px;
    padding:10px 0
  }
  .activity-row small {
    font-size:10px
  }
  .hero-access {
    margin:0 15px;
    padding:10px 12px
  }
  .hero-access strong {
    font-size:14px
  }
  .hero-access-icon {
    width:27px;
    height:27px;
    font-size:18px
  }
  .flow-timeline {
    padding:12px 15px 7px;
    gap:6px
  }
  .flow-timeline span {
    font-size:8px;
    padding-top:5px
  }
  .enhanced .flow-playback {
    padding:0 15px
  }
  .workspace-foot {
    padding:0 15px 10px;
    font-size:9px
  }
  #flow-status {
    font-size:9px;
    min-height:25px
  }
  .play-button,.stop-button {
    font-size:11px;
    padding:8px
  }
  .chapter-heading {
    grid-template-columns:1fr;
    gap:15px
  }
  .chapter-heading>p {
    font-size:14px;
    max-width:520px
  }
  .chapter h2 {
    font-size:39px
  }
  .eyebrow {
    font-size:9px;
    margin-bottom:10px
  }
  .developer-grid,.next-grid {
    grid-template-columns:1fr;
    gap:28px
  }
  .developer-copy>p:not(.eyebrow) {
    font-size:14px;
    margin-top:16px
  }
  .sdk-note {
    margin-top:18px
  }
  .code-panel pre {
    max-height:380px;
    font-size:10px
  }
  .code-window-top {
    padding:8px 12px
  }
  .deck-navigation {
    display:grid;
    grid-template-columns:1fr;
    gap:5px;
    padding:7px 16px 4px
  }
  .chapter-tabs {
    width:100%;
    gap:4px;
    min-height:44px
  }
  .chapter-tabs a {
    gap:6px;
    font-size:11px;
    padding:9px 10px;
    min-width:80px
  }
  .enhanced .deck-controls {
    display:grid!important;
    grid-template-columns:1fr auto 44px 44px;
    gap:7px
  }
  .deck-controls #motion-toggle {
    justify-self:start;
    min-width:94px
  }
  .deck-meta {
    font-size:9px;
    padding:0 18px 7px
  }
  .deck-meta>span:last-child {
    display:none
  }
  .chapter-position {
    font-size:10px
  }
  .demo-shell {
    grid-template-columns:1fr
  }
  .demo-controls {
    border-right:0;
    border-bottom:1px solid #d8dfcf;
    padding:18px
  }
  .demo-result {
    padding:18px
  }
  .state-buttons {
    grid-template-columns:1fr 1fr;
    gap:7px
  }
  .state-button {
    font-size:11px;
    padding:9px;
    gap:7px;
    line-height:1.35
  }
  .analogy-card {
    display:none
  }
  .status-panel {
    padding:12px 0 16px
  }
  .status-panel h3 {
    font-size:19px
  }
  .status-panel p {
    font-size:11px
  }
  .access-panel strong {
    font-size:21px
  }
  .event-panel {
    margin-top:15px
  }
  .demo-disclaimer {
    font-size:10px;
    padding:9px 11px
  }
  .demo-policy-note {
    font-size:10px
  }
  .status-overline {
    font-size:8px
  }
  .chapter-heading h2 {
    font-size:38px
  }
}

@media(max-width:360px) {
  .panel-inner {
    padding:22px 18px
  }
  .header-inner {
    padding:10px 17px
  }
  .brand {
    font-size:21px
  }
  .header-inner>.button {
    font-size:10px;
    padding:10px
  }
  .hero-copy h1 {
    font-size:41px
  }
  .hero-lede {
    font-size:13px
  }
  .hero-actions {
    gap:10px
  }
  .hero-actions .button {
    font-size:11px;
    padding:10px 12px
  }
  .hero-actions .text-link {
    font-size:11px
  }
  .flow-node small {
    font-size:8px
  }
  .flow-node {
    padding:7px 5px
  }
  .flow-diagram {
    padding:12px
  }
  .activity-row strong {
    font-size:11px
  }
  .activity-row small {
    font-size:9px
  }
  .chapter h2,.chapter-heading h2 {
    font-size:34px
  }
  .chapter-tabs a {
    font-size:10px;
    min-width:75px
  }
  .copy-button {
    font-size:10px;
    padding:7px
  }
  .file-name {
    font-size:8px
  }
}

@media(max-height:720px) and (min-width:801px) {
  .panel-inner {
    padding-top:24px;
    padding-bottom:24px;
    gap:16px
  }
  .hero-copy h1 {
    font-size:58px
  }
  .prototype-badge {
    margin-bottom:14px
  }
  .hero-lede {
    font-size:14px;
    margin-top:15px
  }
  .hero-actions {
    margin:16px 0 10px
  }
  .hero-copy .eyebrow {
    margin-bottom:10px
  }
  .product-scene {
    padding-top:12px;
    padding-bottom:12px
  }
  .flow-diagram {
    padding:16px
  }
  .flow-node {
    min-height:88px
  }
  .workspace-top {
    padding:12px 16px
  }
  .activity-row {
    padding:10px 0
  }
  .hero-access {
    padding:10px 12px
  }
  .flow-timeline {
    padding-top:12px
  }
  .chapter h2 {
    font-size:41px
  }
  .chapter-heading>p {
    font-size:14px
  }
  .demo-controls,.demo-result {
    padding:17px
  }
  .analogy-card {
    display:none
  }
  .code-panel pre {
    max-height:270px
  }
}

.motion-off * {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}

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

@media(max-width:800px) {
  .chapter-home .hero-grid {
    padding-top:20px;
    padding-bottom:16px;
    gap:16px
  }
  .hero-copy h1 {
    font-size:40px
  }
  .chapter-home .hero-lede {
    font-size:13px
  }
  .chapter-home .product-scene {
    padding:0
  }
  .chapter-home .workspace-top {
    padding-top:8px;
    padding-bottom:8px
  }
  .chapter-home .flow-node-icon {
    display:none
  }
  .chapter-home .flow-node {
    min-height:58px;
    justify-content:center
  }
  .chapter-home .flow-diagram {
    padding:12px 15px
  }
  .chapter-home .activity-row {
    display:none
  }
  .chapter-home .hero-access {
    padding-top:8px;
    padding-bottom:8px
  }
  .chapter-home .flow-timeline {
    padding-top:10px
  }
  .chapter-home .hero-actions {
    margin-top:14px
  }
  .chapter-home .scene-orbit {
    inset:-8px 8px
  }
  .chapter-home .orbit-two {
    inset:4px -8px
  }
}

#code-context {
  font:10px/1.6 var(--mono);
  color:#b4c89b;
  padding:0 18px 14px;
  overflow-wrap:anywhere
}

.event-panel>summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:44px;
  cursor:pointer;
  list-style:none;
  font-size:11px;
  font-weight:600
}

.event-panel>summary::-webkit-details-marker {
  display:none
}

.event-panel>summary span {
  font-size:17px;
  transition:transform 180ms
}

.event-panel[open]>summary span {
  transform:rotate(45deg)
}

.event-data {
  padding:7px 0 5px
}

@media(max-width:800px) {
  .chapter-workflow .panel-inner {
    gap:13px
  }
  .chapter-workflow .chapter-heading>p {
    display:none
  }
  .chapter-workflow .chapter-heading h2 {
    font-size:33px
  }
  .chapter-workflow .chapter-heading .eyebrow {
    margin-bottom:7px
  }
  .demo-controls-head .eyebrow {
    margin-bottom:0
  }
  .demo-controls {
    padding:14px 16px
  }
  .demo-result {
    padding:14px 16px
  }
  .state-label {
    margin:5px 0 10px
  }
  .result-top .eyebrow {
    margin-bottom:0
  }
  .status-panel {
    padding:9px 0 13px
  }
  .status-panel p {
    font-size:11px
  }
  .status-panel h3 {
    margin-top:2px;
    margin-bottom:3px
  }
  .status-overline {
    font-size:7px
  }
  .event-panel {
    margin-top:10px;
    padding-top:4px
  }
  .access-panel {
    padding:11px 13px
  }
  .demo-policy-note {
    font-size:10px
  }
  .demo-disclaimer {
    font-size:10px
  }
  .chapter-workflow .demo-only-tag {
    font-size:7px
  }
  .chapter-workflow .demo-policy-note {
    max-width:480px
  }
  .chapter-workflow .demo-controls-head .eyebrow {
    font-size:8px
  }
}

.deck-meta>span {
  white-space:nowrap
}

.chapter[data-scrollable="true"]:not([data-scroll-position="end"]) {
  box-shadow:inset 0 -12px 14px -15px #28442180
}

@media(max-width:800px) {
  .chapter-home .flow-node {
    min-height:44px;
    padding:5px 7px;
    gap:3px
  }
  .chapter-home .flow-diagram {
    padding:7px 15px
  }
  .chapter-home .workspace-symbol {
    width:22px;
    height:22px
  }
  .chapter-home .flow-timeline {
    padding-top:6px;
    padding-bottom:5px
  }
  .chapter-home .flow-timeline span {
    padding-top:3px
  }
  .chapter-home #flow-status {
    min-height:20px;
    padding-top:5px
  }
  .chapter-home .workspace-foot {
    display:none
  }
  .chapter-home .workflow-card {
    padding-bottom:6px
  }
}