/* The observation curtain: live work on the dark field, a successful trace at
   the seam, and the reusable play pressed onto paper on the other side. */
html[data-design-system="halde"] .rote-bridge{
  padding:clamp(72px,8vw,124px) var(--page-gutter) clamp(64px,7vw,104px)!important;
  color:var(--text-primary);
  background:transparent!important;
}

html[data-design-system="halde"] .rote-bridge-copy{
  width:min(100%,var(--page-max));
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(310px,.64fr);
  gap:clamp(44px,7vw,124px);
  align-items:end;
  margin:0 auto clamp(38px,4.5vw,66px);
}

html[data-design-system="halde"] .landing-page .rote-bridge-copy h2.ds-title--section{
  max-width:18ch;
  margin:17px 0 0;
  color:var(--text-primary);
  text-transform:none;
}

html[data-design-system="halde"] .landing-page .rote-bridge-copy h2.ds-title--section>span{
  display:block;
}

html[data-design-system="halde"] .landing-page .rote-bridge-copy p.ds-intro-body{
  max-width:51ch;
  margin:0 0 4px;
  color:var(--text-secondary);
}

html[data-design-system="halde"] .landing-page .rote-bridge-copy .ds-eyebrow{
  font:650 11px/1.3 var(--font-technical)!important;
  letter-spacing:.1em;
}

html[data-design-system="halde"] .rote-curtain{
  --reveal:52%;
  --progress:.575;
  --live-opacity:1;
  --play-opacity:1;
  position:relative;
  width:min(100%,var(--page-max));
  min-height:clamp(610px,45vw,700px);
  margin:0 auto;
  overflow:visible;
  border:1px solid var(--border-strong);
  outline:5px solid var(--bg-page);
  color:var(--artifact-text);
  background:var(--artifact-bg);
  box-shadow:0 30px 80px color-mix(in srgb,var(--text-primary) 18%,transparent);
  isolation:isolate;
}

html[data-design-system="halde"] .rote-curtain::after{
  content:"";
  position:absolute;
  z-index:20;
  inset:0;
  pointer-events:none;
  opacity:.12;
  background-image:var(--texture-image);
  background-size:360px 360px;
  mix-blend-mode:soft-light;
}

html[data-design-system="halde"] .rote-curtain-panel{
  position:absolute;
  inset:0;
  overflow:hidden;
}

html[data-design-system="halde"] .rote-curtain-before{
  z-index:1;
  background:
    radial-gradient(circle at 28% 45%,color-mix(in srgb,var(--artifact-text) 8%,transparent),transparent 31%),
    linear-gradient(135deg,color-mix(in srgb,var(--artifact-bg-raised) 72%,var(--artifact-bg)),var(--artifact-bg) 68%);
}

html[data-design-system="halde"] .rote-curtain-before::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.15;
  background-image:
    linear-gradient(color-mix(in srgb,var(--artifact-rule) 36%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in srgb,var(--artifact-rule) 28%,transparent) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(90deg,#000,transparent 67%);
}

html[data-design-system="halde"] .rote-curtain-after{
  --curtain-after-ink:var(--text-on-accent);
  --curtain-after-muted:color-mix(in srgb,var(--curtain-after-ink) 70%,transparent);
  z-index:2;
  clip-path:inset(0 0 0 var(--reveal));
  color:var(--curtain-after-ink);
  background:
    radial-gradient(circle at 78% 22%,rgba(255,255,255,.78),transparent 33%),
    linear-gradient(145deg,color-mix(in srgb,var(--accent-soft) 58%,var(--bg-paper)),var(--accent-soft));
}

html[data-design-system="halde"] .curtain-live,
html[data-design-system="halde"] .curtain-play{
  position:absolute;
  inset:0;
  transition:opacity .22s ease;
}

html[data-design-system="halde"] .curtain-live{opacity:var(--live-opacity)}
html[data-design-system="halde"] .curtain-play{opacity:var(--play-opacity)}

/* At either extreme, the field that has emptied becomes the explanation.
   The midpoint stays quiet so the observed receipts and play remain primary. */
html[data-design-system="halde"] .curtain-phase-copy{
  position:absolute;
  z-index:4;
  top:34%;
  width:24%;
  pointer-events:none;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .3s ease,transform .38s cubic-bezier(.2,.8,.2,1);
}

html[data-design-system="halde"] .curtain-phase-copy small,
html[data-design-system="halde"] .curtain-phase-copy b{display:block}

html[data-design-system="halde"] .curtain-phase-copy small{
  margin-bottom:14px;
  font:720 9px/1 var(--font-technical);
  letter-spacing:.14em;
}

html[data-design-system="halde"] .curtain-phase-copy b{
  font:560 clamp(27px,2.55vw,43px)/.98 var(--font-editorial);
  letter-spacing:-.05em;
}

html[data-design-system="halde"] .curtain-phase-copy-run{
  left:72%;
  color:var(--curtain-after-ink);
}

html[data-design-system="halde"] .curtain-phase-copy-play{
  left:5%;
  color:var(--artifact-text);
}

html[data-design-system="halde"] .rote-curtain[data-phase="run"] .curtain-phase-copy-run,
html[data-design-system="halde"] .rote-curtain[data-phase="play"] .curtain-phase-copy-play{
  opacity:1;
  transform:translateY(0);
}

html[data-design-system="halde"] .curtain-scene-label{
  position:absolute;
  z-index:2;
  top:clamp(22px,2.4vw,36px);
  left:clamp(24px,2.8vw,44px);
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--artifact-muted);
  font:650 9px/1 var(--font-technical);
  letter-spacing:.12em;
}

html[data-design-system="halde"] .curtain-scene-label i{
  display:inline-flex;
  align-items:center;
  min-height:20px;
  padding:0 7px;
  color:var(--artifact-text);
  border:1px solid var(--artifact-rule);
  border-radius:99px;
  font-style:normal;
  letter-spacing:.08em;
}

html[data-design-system="halde"] .curtain-play .curtain-scene-label{
  top:clamp(14px,1.2vw,18px);
  right:clamp(24px,2.8vw,44px);
  left:auto;
  color:var(--curtain-after-muted);
}

html[data-design-system="halde"] .curtain-play .curtain-scene-label i{
  color:var(--curtain-after-ink);
  border-color:color-mix(in srgb,var(--curtain-after-ink) 48%,transparent);
}

/* Live run — ruled events, connected as work rather than drawn as boxes. */
html[data-design-system="halde"] .run-origin{
  position:absolute;
  z-index:3;
  top:15%;
  left:4.5%;
  width:20%;
}

html[data-design-system="halde"] .run-origin>small{
  color:var(--artifact-muted);
  font:650 9px/1 var(--font-technical);
  letter-spacing:.13em;
}

html[data-design-system="halde"] .run-origin>b{
  display:block;
  margin:14px 0 20px;
  color:var(--artifact-text);
  font:560 clamp(27px,2.55vw,43px)/.96 var(--font-editorial);
  letter-spacing:-.055em;
}

html[data-design-system="halde"] .run-origin>span{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--artifact-muted);
  font:590 9px/1.3 var(--font-technical);
  letter-spacing:.055em;
  text-transform:uppercase;
}

html[data-design-system="halde"] .run-origin>span i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 16%,transparent);
  animation:curtain-live-pulse 1.5s ease-in-out infinite;
}

html[data-design-system="halde"] .curtain-interaction{
  position:absolute;
  z-index:3;
  width:18%;
  min-width:180px;
  display:grid;
  grid-template-columns:32px 1fr;
  gap:11px;
  padding-top:10px;
  border-top:1px solid color-mix(in srgb,var(--artifact-rule) 82%,transparent);
  color:var(--artifact-text);
}

html[data-design-system="halde"] .curtain-interaction .interaction-no{
  color:var(--accent);
  font:680 10px/1 var(--font-technical);
}

html[data-design-system="halde"] .curtain-interaction div{min-width:0}

html[data-design-system="halde"] .curtain-interaction small,
html[data-design-system="halde"] .curtain-interaction em{
  display:block;
  color:var(--artifact-faint);
  font:620 8px/1.2 var(--font-technical);
  font-style:normal;
  letter-spacing:.1em;
}

html[data-design-system="halde"] .curtain-interaction b{
  display:block;
  margin:6px 0 7px;
  color:var(--artifact-text);
  font:530 clamp(14px,1.12vw,18px)/1.15 var(--font-editorial);
  letter-spacing:-.025em;
}

html[data-design-system="halde"] .curtain-interaction em{
  color:color-mix(in srgb,var(--artifact-text) 68%,transparent);
  letter-spacing:.035em;
  text-transform:uppercase;
}

html[data-design-system="halde"] .interaction-one{top:16%;left:27%}
html[data-design-system="halde"] .interaction-two{top:38%;left:25%}
html[data-design-system="halde"] .interaction-three{top:59%;left:29%}
html[data-design-system="halde"] .interaction-four{top:78%;right:auto;bottom:auto;left:31%}

html[data-design-system="halde"] .run-thread{
  position:absolute;
  z-index:2;
  left:18.5%;
  height:1px;
  transform-origin:left center;
  background:linear-gradient(90deg,var(--artifact-rule),color-mix(in srgb,var(--accent) 74%,transparent));
}

html[data-design-system="halde"] .run-thread i{
  position:absolute;
  top:-2px;
  left:0;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 80%,transparent);
  animation:curtain-thread 2.5s ease-in-out infinite;
}

html[data-design-system="halde"] .thread-one{top:29%;width:9%;transform:rotate(-22deg)}
html[data-design-system="halde"] .thread-two{top:38%;width:6.5%;transform:rotate(28deg)}
html[data-design-system="halde"] .thread-three{top:48%;width:16%;transform:rotate(40deg)}
html[data-design-system="halde"] .thread-two i{animation-delay:.35s}
html[data-design-system="halde"] .thread-three i{animation-delay:.7s}

html[data-design-system="halde"] .live-caption{
  position:absolute;
  z-index:3;
  bottom:3.5%;
  left:4.5%;
  width:min(24.5%,360px);
  margin:0;
  color:var(--artifact-muted);
  font:500 clamp(12px,.9vw,14px)/1.45 var(--font-technical);
}

/* The play is one coherent printed artifact, not a dashboard of containers. */
html[data-design-system="halde"] .kept-play{
  --document-accent:#2f6f24;
  position:absolute;
  top:8%;
  right:3.5%;
  bottom:13%;
  width:42%;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  padding:clamp(22px,2vw,32px);
  color:var(--document-text);
  border:1px solid color-mix(in srgb,var(--document-text) 34%,transparent);
  background:
    linear-gradient(90deg,transparent 0,transparent calc(100% - 1px),color-mix(in srgb,var(--document-text) 8%,transparent) calc(100% - 1px)),
    var(--document-bg);
  box-shadow:12px 14px 0 color-mix(in srgb,var(--text-on-accent) 18%,transparent),0 26px 70px color-mix(in srgb,var(--artifact-bg) 28%,transparent);
  transform:rotate(-.55deg);
  transform-origin:center;
  transition:transform .55s cubic-bezier(.2,.85,.2,1),box-shadow .55s ease;
}

html[data-design-system="halde"] .rote-curtain[data-phase="play"] .kept-play{
  transform:rotate(0);
  box-shadow:7px 8px 0 color-mix(in srgb,var(--text-on-accent) 14%,transparent),0 22px 62px color-mix(in srgb,var(--artifact-bg) 24%,transparent);
}

html[data-design-system="halde"] .kept-play header{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:20px;
  align-items:start;
  padding-bottom:clamp(14px,1.5vw,22px);
  border-bottom:2px solid var(--document-text);
}

html[data-design-system="halde"] .kept-play header small{
  color:var(--document-muted);
  font:700 8px/1 var(--font-technical);
  letter-spacing:.12em;
}

html[data-design-system="halde"] .kept-play h3{
  max-width:12ch;
  margin:9px 0 0;
  color:var(--document-text);
  font:570 clamp(25px,2.2vw,38px)/.92 var(--font-editorial);
  letter-spacing:-.055em;
}

html[data-design-system="halde"] .play-stamp{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  flex:none;
  border:1px solid var(--document-text);
  border-radius:50%;
  color:var(--document-text);
  font:760 8px/1.25 var(--font-technical);
  letter-spacing:.08em;
  text-align:center;
  transform:rotate(8deg);
}

html[data-design-system="halde"] .kept-play ol{
  flex:1;
  margin:0;
  padding:0;
  list-style:none;
}

html[data-design-system="halde"] .kept-play li{
  min-height:clamp(52px,4.5vw,62px);
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 58px;
  gap:10px;
  align-items:center;
  border-bottom:1px solid var(--document-rule);
}

html[data-design-system="halde"] .play-step-no{
  color:var(--document-accent);
  font:760 9px/1 var(--font-technical);
}

html[data-design-system="halde"] .kept-play li b,
html[data-design-system="halde"] .kept-play li small{display:block}

html[data-design-system="halde"] .kept-play li b{
  margin-bottom:3px;
  color:var(--document-text);
  font:560 clamp(12px,.92vw,15px)/1.1 var(--font-editorial);
  letter-spacing:-.02em;
}

html[data-design-system="halde"] .kept-play li small{
  color:var(--document-muted);
  font:560 clamp(7px,.58vw,9px)/1.3 var(--font-technical);
}

html[data-design-system="halde"] .play-modality{
  display:inline-flex;
  align-items:center;
  min-height:14px;
  margin-top:5px;
  padding:2px 5px 1px;
  color:var(--document-text);
  border:1px solid var(--document-rule);
  background:color-mix(in srgb,var(--document-bg) 72%,var(--accent));
  font:760 6px/1 var(--font-technical);
  letter-spacing:.12em;
}

html[data-design-system="halde"] .play-step-status{
  display:grid;
  justify-items:end;
  gap:6px;
  font-family:var(--font-technical);
  font-style:normal;
  text-align:right;
}

html[data-design-system="halde"] .play-step-status i{
  color:var(--document-text);
  font:760 6px/1 var(--font-technical);
  font-style:normal;
  letter-spacing:.09em;
  white-space:nowrap;
}

html[data-design-system="halde"] .play-step-status em{
  color:var(--document-muted);
  font:720 7px/1 var(--font-technical);
  font-style:normal;
  letter-spacing:.08em;
}

html[data-design-system="halde"] .play-contract-line{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  padding:10px 0;
  border-bottom:1px solid var(--document-text);
  color:var(--document-text);
  font:620 clamp(7px,.58vw,9px)/1.3 var(--font-technical);
}

html[data-design-system="halde"] .play-contract-line span{display:flex;gap:7px}
html[data-design-system="halde"] .play-contract-line small{color:var(--document-muted);font:inherit}

html[data-design-system="halde"] .kept-play footer{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "uri uri"
    ". version";
  align-items:center;
  gap:9px 16px;
  padding-top:11px;
  color:var(--document-text);
  font:600 clamp(8px,.68vw,10px)/1 var(--font-technical);
}

html[data-design-system="halde"] .kept-play footer>span{
  grid-area:uri;
  min-width:0;
  overflow-wrap:anywhere;
}

html[data-design-system="halde"] .kept-play footer>.audited-stamp{
  grid-area:audit;
  justify-self:start;
}

html[data-design-system="halde"] .kept-play footer i{
  grid-area:version;
  justify-self:end;
  color:var(--document-muted);
  font-style:normal;
  letter-spacing:.08em;
}

html[data-design-system="halde"] .audited-stamp{
  display:inline-grid;
  place-items:center;
  padding:6px 9px 5px;
  color:var(--document-accent);
  border:2px solid currentColor;
  box-shadow:inset 0 0 0 1px var(--document-bg),inset 0 0 0 2px currentColor;
  font:820 8px/1 var(--font-technical);
  letter-spacing:.14em;
  transform:rotate(-4deg);
}

html[data-design-system="halde"] .play-dividends{
  position:absolute;
  right:3.5%;
  bottom:3.4%;
  width:42%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,22px);
  color:var(--curtain-after-ink);
}

html[data-design-system="halde"] .play-dividends span{
  font:540 clamp(8px,.65vw,10px)/1.25 var(--font-technical);
}

html[data-design-system="halde"] .play-dividends b{
  display:block;
  margin-bottom:4px;
  font-size:.9em;
  letter-spacing:.09em;
}

/* Observations travel through the curtain and settle beside the play steps. */
html[data-design-system="halde"] .curtain-trace-tokens{
  position:absolute;
  z-index:11;
  inset:0;
  pointer-events:none;
}

html[data-design-system="halde"] .trace-token{
  position:absolute;
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:31px;
  padding:0 10px 0 9px;
  transform:translate(-50%,-50%) rotate(calc((.5 - var(--token-progress)) * 1.2deg));
  color:var(--document-text);
  border:1px solid color-mix(in srgb,var(--document-text) 58%,transparent);
  background:var(--document-bg);
  box-shadow:3px 3px 0 color-mix(in srgb,var(--artifact-bg) 18%,transparent),0 8px 18px color-mix(in srgb,var(--artifact-bg) 18%,transparent);
  font:700 8px/1 var(--font-technical);
  letter-spacing:.07em;
  text-transform:uppercase;
  will-change:left,top;
}

html[data-design-system="halde"] .trace-token i{
  color:#2f6f24;
  font-style:normal;
  font-size:9px;
}

html[data-design-system="halde"] .trace-token.is-kept{
  color:var(--document-text);
  border-color:color-mix(in srgb,var(--document-text) 72%,transparent);
  background:var(--document-bg);
  box-shadow:3px 3px 0 color-mix(in srgb,var(--artifact-bg) 18%,transparent),0 7px 16px color-mix(in srgb,var(--artifact-bg) 16%,transparent);
}

html[data-design-system="halde"] .trace-token.is-kept::after{
  content:"✓";
  margin-left:2px;
  color:#2f6f24;
  font:800 9px/1 var(--font-technical);
}

html[data-design-system="halde"] .curtain-observation-band{
  position:absolute;
  z-index:22;
  top:0;
  left:50%;
  width:auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 12px;
  transform:translate(-50%,calc(-100% - 12px));
  color:var(--text-secondary);
  border:0;
  border-radius:0;
  background:var(--bg-page);
  box-shadow:none;
  font:680 10px/1 var(--font-technical);
  letter-spacing:.1em;
  text-align:center;
}

html[data-design-system="halde"] .curtain-observation-band>span,
html[data-design-system="halde"] .curtain-observation-band>b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:20px;
  box-sizing:border-box;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  white-space:nowrap;
}

html[data-design-system="halde"] .curtain-observation-band>span:first-child{
  color:var(--text-secondary);
  background:transparent;
}

html[data-design-system="halde"] .curtain-observation-band>b{
  color:var(--accent);
  background:transparent;
}

html[data-design-system="halde"] .curtain-observation-band>span:last-child{
  color:var(--text-secondary);
  background:transparent;
}

html[data-design-system="halde"] .curtain-observation-band>i{
  color:var(--text-tertiary);
  font-style:normal;
  font-weight:500;
}

html[data-design-system="halde"] .curtain-observation-band::before,
html[data-design-system="halde"] .curtain-observation-band::after{
  content:none;
}
html[data-design-system="halde"] .curtain-observation-band b{font:inherit}

html[data-design-system="halde"] .rote-curtain-line{
  position:absolute;
  z-index:9;
  top:0;
  bottom:0;
  left:var(--reveal);
  width:3px;
  transform:translateX(-1.5px);
  pointer-events:none;
  background:linear-gradient(180deg,transparent 2%,var(--document-bg) 12%,var(--document-bg) 88%,transparent 98%);
  box-shadow:-1px 0 0 var(--document-text),1px 0 0 var(--document-text),0 0 22px color-mix(in srgb,var(--document-bg) 34%,transparent);
}

html[data-design-system="halde"] .rote-curtain .rote-curtain-line>span{
  position:absolute;
  top:50%;
  left:50%;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  transform:translate(-50%,-50%);
  color:var(--document-bg)!important;
  border:1px solid var(--document-bg)!important;
  border-radius:50%!important;
  background:var(--document-text)!important;
  box-shadow:0 2px 10px color-mix(in srgb,var(--artifact-bg) 36%,transparent)!important;
  font:720 12px/1 var(--font-technical);
}

html[data-design-system="halde"] .rote-curtain.is-playing .rote-curtain-line>span{
  animation:curtain-handle 1.45s ease-in-out infinite;
}

html[data-design-system="halde"] .rote-curtain-input{
  position:absolute;
  z-index:10;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:.001;
  cursor:ew-resize;
  appearance:none;
  touch-action:pan-y;
}

html[data-design-system="halde"] .rote-curtain-input:focus-visible{outline:0}
html[data-design-system="halde"] .rote-curtain:has(.rote-curtain-input:focus-visible){outline:3px solid var(--text-primary);outline-offset:6px}
html[data-design-system="halde"] .rote-curtain-input::-webkit-slider-thumb{width:68px;height:68px;appearance:none}
html[data-design-system="halde"] .rote-curtain-input::-moz-range-thumb{width:68px;height:68px;border:0;background:transparent}

html[data-design-system="halde"] .rote-curtain-foot{
  width:min(100%,var(--page-max));
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  margin:0 auto;
  padding:18px 2px 0;
}

html[data-design-system="halde"] .curtain-drag-hint{
  color:var(--text-secondary);
  font:650 9px/1 var(--font-technical);
  letter-spacing:.09em;
}

html[data-design-system="halde"] .trace-replay{
  min-height:34px;
  padding:8px 0 7px;
  color:var(--text-secondary);
  border:0;
  border-bottom:1px solid var(--border-strong);
  background:transparent;
  box-shadow:inset 0 -2px 0 var(--accent);
  font:650 9px/1 var(--font-technical);
  letter-spacing:.09em;
  text-transform:uppercase;
}

html[data-design-system="halde"] .trace-replay:is(:hover,:focus-visible){color:var(--text-primary);background:var(--bg-surface)}

@keyframes curtain-live-pulse{50%{opacity:.55;box-shadow:0 0 0 9px color-mix(in srgb,var(--accent) 5%,transparent)}}
@keyframes curtain-thread{0%{left:0;opacity:0}18%{opacity:1}82%{opacity:1}100%{left:100%;opacity:0}}
@keyframes curtain-handle{50%{box-shadow:0 0 0 2px var(--document-text),0 0 0 5px color-mix(in srgb,var(--document-bg) 18%,transparent),0 7px 18px color-mix(in srgb,var(--artifact-bg) 30%,transparent)}}

@media (max-width:1040px){
  html[data-design-system="halde"] .rote-bridge-copy{grid-template-columns:1fr;gap:24px}
  html[data-design-system="halde"] .rote-bridge-copy p{max-width:60ch}
  html[data-design-system="halde"] .kept-play{right:3%;width:42%}
  html[data-design-system="halde"] .play-dividends{right:3%;width:42%}
  html[data-design-system="halde"] .curtain-interaction{width:20%}
  html[data-design-system="halde"] .trace-token b{display:none}
  html[data-design-system="halde"] .trace-token{padding-inline:6px}
}

/* On narrow screens the same idea becomes a natural reading sequence. The
   curtain interaction retires, but its observed-trace hinge remains visible. */
@media (max-width:700px){
  html[data-design-system="halde"] .rote-bridge{padding-inline:18px!important}
  html[data-design-system="halde"] .rote-curtain{display:grid;min-height:0;overflow:visible;outline-width:3px;background:var(--border-strong)}
  html[data-design-system="halde"] .rote-curtain-panel{position:relative;inset:auto;overflow:hidden}
  html[data-design-system="halde"] .curtain-live,
  html[data-design-system="halde"] .curtain-play{opacity:1}
  html[data-design-system="halde"] .rote-curtain-before{min-height:610px}
  html[data-design-system="halde"] .rote-curtain-after{min-height:720px;clip-path:none;border-top:42px solid var(--document-bg)}
  html[data-design-system="halde"] .rote-curtain-after::before{
    content:"TRACE  ·  ROTE KEEPS WHAT HAPPENED  ↓";
    position:absolute;
    z-index:6;
    top:-29px;
    left:18px;
    color:var(--document-text);
    font:760 8px/1 var(--font-technical);
    letter-spacing:.09em;
  }
  html[data-design-system="halde"] .curtain-play{position:relative;min-height:678px}
  html[data-design-system="halde"] .curtain-interaction{width:24%}
  html[data-design-system="halde"] .kept-play{top:64px;right:5%;bottom:96px;width:90%;transform:rotate(-.35deg)}
  html[data-design-system="halde"] .play-dividends{right:5%;bottom:25px;width:90%}
  html[data-design-system="halde"] .curtain-trace-tokens,
  html[data-design-system="halde"] .curtain-phase-copy,
  html[data-design-system="halde"] .curtain-observation-band,
  html[data-design-system="halde"] .rote-curtain-line,
  html[data-design-system="halde"] .rote-curtain-input{display:none}
  html[data-design-system="halde"] .rote-curtain-foot{align-items:flex-start;flex-direction:column;gap:8px}
}

@media (max-width:620px){
  html[data-design-system="halde"] .rote-bridge{padding-top:62px!important}
  html[data-design-system="halde"] .rote-curtain-before{min-height:640px}
  html[data-design-system="halde"] .run-origin{top:13%;left:6%;width:42%}
  html[data-design-system="halde"] .run-origin>b{font-size:clamp(25px,8vw,36px)}
  html[data-design-system="halde"] .curtain-interaction{width:47%;min-width:0;grid-template-columns:25px 1fr}
  html[data-design-system="halde"] .interaction-one{top:17%;left:51%}
  html[data-design-system="halde"] .interaction-two{top:38%;left:44%}
  html[data-design-system="halde"] .interaction-three{top:59%;left:49%}
  html[data-design-system="halde"] .interaction-four{top:auto;right:auto;bottom:14%;left:49%}
  html[data-design-system="halde"] .run-thread{left:33%}
  html[data-design-system="halde"] .thread-one{top:29%;width:22%}
  html[data-design-system="halde"] .thread-two{top:39%;width:18%}
  html[data-design-system="halde"] .thread-three{top:47%;width:24%}
  html[data-design-system="halde"] .live-caption{left:6%;bottom:3%;width:38%;font-size:10px}
  html[data-design-system="halde"] .rote-curtain-after{min-height:760px}
  html[data-design-system="halde"] .curtain-play{min-height:718px}
  html[data-design-system="halde"] .kept-play{top:58px;right:4%;bottom:120px;width:92%;padding:22px 18px}
  html[data-design-system="halde"] .kept-play h3{font-size:clamp(26px,8vw,35px)}
  html[data-design-system="halde"] .play-stamp{width:56px;height:56px;font-size:7px}
  html[data-design-system="halde"] .kept-play li{min-height:66px;grid-template-columns:25px minmax(0,1fr) 54px}
  html[data-design-system="halde"] .kept-play li small{font-size:7px}
  html[data-design-system="halde"] .play-contract-line{grid-template-columns:1fr;gap:5px}
  html[data-design-system="halde"] .kept-play footer{gap:8px 12px}
  html[data-design-system="halde"] .play-dividends{right:4%;bottom:26px;width:92%;gap:9px}
  html[data-design-system="halde"] .play-dividends span{font-size:7px}
}

@media (prefers-reduced-motion:reduce){
  html[data-design-system="halde"] .run-origin>span i,
  html[data-design-system="halde"] .run-thread i,
  html[data-design-system="halde"] .rote-curtain-line>span{animation:none}
  html[data-design-system="halde"] .kept-play,
  html[data-design-system="halde"] .curtain-live,
  html[data-design-system="halde"] .curtain-play,
  html[data-design-system="halde"] .curtain-phase-copy{transition:none}
}