/* The compatibility strip proves portability. This compact bridge defines
   the object before the anatomy section opens it up. */
html[data-design-system="halde"] .play-definition-bridge{padding:clamp(36px,4vw,58px) var(--page-gutter) clamp(28px,3vw,42px);color:var(--text-primary);background:var(--bg-page)}
html[data-design-system="halde"] .play-definition-inner{width:min(100%,var(--page-max));display:grid;grid-template-columns:minmax(180px,.48fr) minmax(0,1.52fr);align-items:start;gap:clamp(34px,6vw,96px);margin:0 auto;padding-bottom:clamp(28px,3vw,42px);border-bottom:1px solid var(--border-default)}
html[data-design-system="halde"] .play-definition-inner>.ds-eyebrow{padding-top:8px;color:var(--accent);font-size:10px;white-space:nowrap}
html[data-design-system="halde"] .play-definition-inner h2{max-width:18ch;margin:0;color:var(--text-primary);font-size:clamp(32px,3.4vw,52px);font-weight:610;line-height:.96;letter-spacing:-.045em}
html[data-design-system="halde"] .play-definition-inner p{max-width:62ch;margin:18px 0 0;color:var(--text-secondary);font-size:clamp(15px,1.25vw,19px);line-height:1.5}

html[data-design-system="halde"] .play-anatomy-payoff{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:clamp(46px,5vw,76px);padding:0 clamp(22px,3vw,42px);border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong)}
html[data-design-system="halde"] .play-anatomy-payoff strong{font-size:clamp(26px,2.8vw,42px);font-weight:610;letter-spacing:-.04em}
html[data-design-system="halde"] .play-anatomy-payoff a{min-width:clamp(250px,24vw,360px);min-height:68px;display:inline-flex;align-items:center;justify-content:space-between;gap:22px;padding:0 24px;color:#111;border:1px solid #111;background:#a8ff2f;font:800 clamp(10px,.85vw,13px)/1 var(--font-technical);letter-spacing:.07em;text-decoration:none;box-shadow:8px 8px 0 color-mix(in srgb,var(--text-primary) 13%,transparent);transition:transform 140ms ease,box-shadow 140ms ease}
html[data-design-system="halde"] .play-anatomy-payoff a i{font-size:22px;font-style:normal}
html[data-design-system="halde"] .play-anatomy-payoff a:is(:hover,:focus-visible){transform:translate(-3px,-3px);box-shadow:11px 11px 0 color-mix(in srgb,var(--text-primary) 18%,transparent);outline:none}
html[data-design-system="halde"] .play-anatomy-payoff a:active{transform:translate(1px,1px);box-shadow:4px 4px 0 color-mix(in srgb,var(--text-primary) 18%,transparent)}

/* The home route keeps a 144px navigation rail above 980px. Collapse the
   anatomy before its two minimum-width columns can outrun the remaining
   content canvas on tablet-landscape and compressed desktop viewports. */
@media (max-width:1120px){
}

@media (max-width:620px){
  html[data-design-system="halde"] .play-definition-bridge{padding:36px 18px 28px}
  html[data-design-system="halde"] .play-definition-inner{grid-template-columns:1fr;gap:14px;padding-bottom:28px}
  html[data-design-system="halde"] .play-definition-inner>.ds-eyebrow{padding-top:0}
  html[data-design-system="halde"] .play-definition-inner h2{font-size:clamp(32px,10vw,42px)}
  html[data-design-system="halde"] .play-definition-inner p{margin-top:14px;font-size:15px}
  html[data-design-system="halde"] .play-anatomy-payoff{min-height:0;align-items:flex-start;flex-direction:column;margin-top:38px;padding:24px 0}
  html[data-design-system="halde"] .play-anatomy-payoff strong{font-size:30px}
  html[data-design-system="halde"] .play-anatomy-payoff a{width:100%;min-width:0;min-height:68px;box-sizing:border-box}
}

/* The problem, named before the mechanism: four cards, each opening with a
   small dark screen that shows the symptom in one glance. */
html[data-design-system="halde"] .problem-stage{padding:clamp(36px,4vw,58px) var(--page-gutter) clamp(12px,2vw,24px);color:var(--text-primary);background:var(--bg-page)}
html[data-design-system="halde"] .problem-inner{width:min(100%,var(--page-max));display:grid;grid-template-columns:minmax(180px,.48fr) minmax(0,1.52fr);align-items:start;gap:clamp(34px,6vw,96px);margin:0 auto;padding-bottom:clamp(40px,4vw,56px);border-bottom:1px solid var(--border-default)}
html[data-design-system="halde"] .problem-inner>.ds-eyebrow{padding-top:8px;color:var(--accent);font-size:10px;white-space:nowrap}
html[data-design-system="halde"] .problem-inner h2{max-width:18ch;margin:0;color:var(--text-primary);font-size:clamp(32px,3.4vw,52px);font-weight:610;line-height:.96;letter-spacing:-.045em}
html[data-design-system="halde"] .problem-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:clamp(26px,2.8vw,40px) 0 0;padding:0 14px 14px 0;list-style:none}
html[data-design-system="halde"] .problem-grid li{min-width:0;display:flex;flex-direction:column;border:1px solid var(--border-strong);background:var(--bg-surface);box-shadow:8px 8px 0 color-mix(in srgb,var(--text-primary) 10%,transparent);transition:transform 160ms ease,box-shadow 160ms ease}
html[data-design-system="halde"] .problem-grid li:nth-child(even){transform:translateY(16px)}
html[data-design-system="halde"] .problem-grid li:hover{transform:translate(-3px,-3px);box-shadow:11px 11px 0 color-mix(in srgb,var(--text-primary) 14%,transparent)}
html[data-design-system="halde"] .problem-grid li:nth-child(even):hover{transform:translate(-3px,13px)}
html[data-design-system="halde"] .problem-body{display:flex;flex-direction:column;gap:12px;padding:18px 18px 22px}
html[data-design-system="halde"] .problem-body header{display:flex;align-items:baseline;gap:10px}
html[data-design-system="halde"] .problem-body i{color:var(--accent);font:750 10px/1 var(--font-technical);font-style:normal;letter-spacing:.08em}
html[data-design-system="halde"] .problem-body strong{font:750 11px/1.2 var(--font-technical);letter-spacing:.1em;text-transform:uppercase}
html[data-design-system="halde"] .problem-body p{margin:0;color:var(--text-secondary);font-size:14px;line-height:1.5}

html[data-design-system="halde"] .problem-screen{min-height:104px;display:grid;align-content:center;gap:7px;margin:0;padding:14px;color:#e8e8e6;border-bottom:1px solid #383836;background:#050505;font:600 10px/1.4 var(--font-technical)}
html[data-design-system="halde"] .problem-screen span{min-width:0;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px}
html[data-design-system="halde"] .problem-screen i{color:#8d8d87;font-style:normal;font-size:8px;letter-spacing:.1em}
html[data-design-system="halde"] .problem-screen code{overflow:hidden;color:#e8e8e6;font:inherit;text-overflow:ellipsis;white-space:nowrap}
html[data-design-system="halde"] .problem-screen b{color:#ff6b32;font-weight:800}
html[data-design-system="halde"] .problem-screen small{margin-top:4px;color:#8d8d87;font-size:7px;letter-spacing:.1em}
html[data-design-system="halde"] .problem-screen--cost em{display:block;width:var(--w);height:6px;background:#adff2f}
html[data-design-system="halde"] .problem-screen--cost span:nth-child(2) em{background:#ff6b32}
html[data-design-system="halde"] .problem-screen--rule span:first-child code{color:#adff2f}
html[data-design-system="halde"] .problem-screen--rule span:nth-child(2) code{text-decoration:none}
html[data-design-system="halde"] .problem-screen--share{grid-template-columns:1fr 1fr;column-gap:14px}
html[data-design-system="halde"] .problem-screen--share span{grid-template-columns:26px minmax(0,1fr)}
html[data-design-system="halde"] .problem-screen--share code{color:#4d4d49}
html[data-design-system="halde"] .problem-screen--share .is-on code{color:#adff2f}

/* Two stacked definition claims: what Rote is, then what a Play is. */
html[data-design-system="halde"] .play-definition-inner+.play-definition-inner{padding-top:clamp(28px,3vw,42px)}

@media (max-width:980px){
  html[data-design-system="halde"] .problem-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:620px){
  html[data-design-system="halde"] .problem-stage{padding:36px 18px 12px}
  html[data-design-system="halde"] .problem-inner{grid-template-columns:1fr;gap:14px;padding-bottom:28px}
  html[data-design-system="halde"] .problem-inner>.ds-eyebrow{padding-top:0}
  html[data-design-system="halde"] .problem-inner h2{font-size:clamp(32px,10vw,42px)}
  html[data-design-system="halde"] .problem-grid{grid-template-columns:1fr;gap:12px;padding:0 10px 10px 0}
  html[data-design-system="halde"] .problem-grid li:nth-child(even){transform:none}
  html[data-design-system="halde"] .problem-grid li:nth-child(even):hover{transform:translate(-3px,-3px)}
}

/* Definition claims: words on the left, a dark artifact on the right that
   shows the claim happening. Same screen language as the hero receipt. */
html[data-design-system="halde"] .play-definition-claim{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);align-items:center;gap:clamp(28px,4vw,64px)}
html[data-design-system="halde"] .play-definition-claim>*{min-width:0}
html[data-design-system="halde"] .play-definition-screen{margin:0;color:#e8e8e6;border:1px solid #383836;background:#050505;box-shadow:8px 8px 0 color-mix(in srgb,var(--text-primary) 9%,transparent);font:600 10px/1.4 var(--font-technical)}
html[data-design-system="halde"] .play-definition-screen>header{min-height:34px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid #2f2f2c;font:650 8px/1 var(--font-technical);letter-spacing:.1em}
html[data-design-system="halde"] .play-definition-screen>header i{color:#b8b8b4;font-style:normal}
html[data-design-system="halde"] .play-definition-screen>header span{text-align:center;color:#e8e8e6}
html[data-design-system="halde"] .play-definition-screen>header b{color:#adff2f}
html[data-design-system="halde"] .play-definition-screen ol{display:grid;gap:0;margin:0;padding:8px 14px;list-style:none}
html[data-design-system="halde"] .play-definition-screen li{min-height:28px;display:grid;align-items:center;gap:10px;border-top:1px solid #1e1e1c}
html[data-design-system="halde"] .play-definition-screen li:first-child{border-top:0}
html[data-design-system="halde"] .play-definition-screen li i{color:#8d8d87;font-style:normal;font-size:8px;letter-spacing:.1em}
html[data-design-system="halde"] .play-definition-screen li code{overflow:hidden;color:#e8e8e6;font:inherit;text-overflow:ellipsis;white-space:nowrap}
html[data-design-system="halde"] .play-definition-screen li b{font-size:8px;letter-spacing:.08em;text-align:right}
html[data-design-system="halde"] .play-definition-screen>footer{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid #383836;background:#0b0d08}
html[data-design-system="halde"] .play-definition-screen>footer span{color:#adff2f;font-size:8px;letter-spacing:.1em}
html[data-design-system="halde"] .play-definition-screen>footer strong{color:#e8e8e6;font-weight:600;font-size:10px}

html[data-design-system="halde"] .play-definition-screen--rote li{grid-template-columns:26px minmax(0,1fr) auto}
html[data-design-system="halde"] .play-definition-screen--rote .is-kept b{color:#adff2f}
html[data-design-system="halde"] .play-definition-screen--rote .is-kept code{color:#f1f1ed}
html[data-design-system="halde"] .play-definition-screen--rote .is-dropped code{color:#5d5d58;text-decoration:line-through;text-decoration-color:#ff6b32}
html[data-design-system="halde"] .play-definition-screen--rote .is-dropped b{color:#ff6b32}

html[data-design-system="halde"] .play-definition-screen--play li{grid-template-columns:44px minmax(0,1fr) 16px minmax(0,1fr)}
html[data-design-system="halde"] .play-definition-screen--play li code{color:#8d8d87}
html[data-design-system="halde"] .play-definition-screen--play li em{color:#ff6b32;font-style:normal;text-align:center}
html[data-design-system="halde"] .play-definition-screen--play li strong{overflow:hidden;color:#adff2f;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
html[data-design-system="halde"] .play-definition-screen--play .is-fixed em{color:#8d8d87}
html[data-design-system="halde"] .play-definition-screen--play .is-fixed strong{color:#e8e8e6}

@media (max-width:980px){
  html[data-design-system="halde"] .play-definition-claim{grid-template-columns:1fr;gap:24px}
}
@media (max-width:620px){
  html[data-design-system="halde"] .play-definition-screen li{min-height:26px}
  html[data-design-system="halde"] .play-definition-screen--play li{grid-template-columns:40px minmax(0,1fr) 14px minmax(0,1fr)}
}

/* Anatomy as the real file: a sticky classic window of eight excerpts on
   the left, eight verb-led beats scrolling past on the right. */
html[data-design-system="halde"] .play-anatomy-stage{padding:clamp(34px,4vw,58px) var(--page-gutter) clamp(76px,8vw,124px)!important;color:var(--text-primary);background:var(--bg-page)!important}
html[data-design-system="halde"] .play-anatomy-inner{width:min(100%,var(--page-max));margin:0 auto}
html[data-design-system="halde"] .play-anatomy-intro{max-width:64ch;margin-bottom:clamp(36px,4vw,56px)}
html[data-design-system="halde"] .play-anatomy-intro .ds-eyebrow{display:block;margin-bottom:22px;color:var(--accent);font-size:10px;white-space:nowrap}
html[data-design-system="halde"] .landing-page .play-anatomy-intro .ds-title--section{max-width:24ch;margin:0;font-size:clamp(36px,3.6vw,56px);line-height:.94;letter-spacing:-.045em}

html[data-design-system="halde"] .play-file{display:grid;grid-template-columns:minmax(380px,1.05fr) minmax(320px,.95fr);gap:clamp(36px,5vw,88px);align-items:start}
html[data-design-system="halde"] .play-file-window{--font-technical:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;position:sticky;top:96px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;max-height:calc(100vh - 128px);color:#111;border:1.5px solid #111;background:#fff;font:400 13px/1.55 var(--font-technical)}
html[data-design-system="halde"] .play-file-window>header{display:flex;align-items:center;gap:10px;min-height:36px;padding:0 12px;border-bottom:1.5px solid #111;font:600 11px/1 var(--font-technical);letter-spacing:.08em}
html[data-design-system="halde"] .play-file-window>header i{font-style:normal;font-size:12px}
html[data-design-system="halde"] .play-file-window>header span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-design-system="halde"] .play-file-window>header .stripes{flex:1 1 auto;min-width:24px;height:12px;background:repeating-linear-gradient(180deg,#111 0 1.5px,transparent 1.5px 3.5px)}
html[data-design-system="halde"] .play-file-window>header b{color:#ff5a1f;font-weight:600;white-space:nowrap}
html[data-design-system="halde"] .play-file-auto{appearance:none;margin-left:4px;padding:5px 7px;color:#111;border:1.5px solid #111;border-radius:0;background:#fff;font:700 9px/1 var(--font-technical);letter-spacing:.12em;cursor:pointer}
html[data-design-system="halde"] .play-file-auto[aria-pressed="false"]{color:#fff;background:#ff5a1f}
html[data-design-system="halde"] .play-file-auto:is(:hover,:focus-visible){box-shadow:2px 2px 0 #111;outline:none}
/* Display only: the beats drive the scroll position, the wheel never gets trapped here. */
html[data-design-system="halde"] .play-file-window-body{position:relative;overflow:hidden;scroll-behavior:auto}
html[data-design-system="halde"] .play-file-block{padding:14px 16px 16px;border-top:1px dotted rgba(17,17,17,.3);opacity:.34;transition:opacity .28s ease,background-color .28s ease,box-shadow .28s ease}
html[data-design-system="halde"] .play-file-block:first-child{border-top:0}
html[data-design-system="halde"] .play-file-block>header{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;font:600 10px/1 var(--font-technical);letter-spacing:.1em}
html[data-design-system="halde"] .play-file-block>header i{color:#5b6068;font-style:normal}
html[data-design-system="halde"] .play-file-block>header span{color:#111}
html[data-design-system="halde"] .play-file-block>header em{margin-left:auto;color:#5b6068;font-style:normal;font-weight:400;letter-spacing:.02em}
html[data-design-system="halde"] .play-file-block pre{margin:0;overflow-x:auto}
html[data-design-system="halde"] .play-file-block code{color:#111;font:400 12.5px/1.6 var(--font-technical);white-space:pre}
html[data-design-system="halde"] .play-file-block.is-active{opacity:1;background:#fff3ee;box-shadow:inset 3px 0 0 #ff5a1f}
html[data-design-system="halde"] .play-file-window>footer{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:0 12px;border-top:1.5px solid #111;font:600 10px/1 var(--font-technical);letter-spacing:.1em}
html[data-design-system="halde"] .play-file-window>footer span{color:#5b6068}
html[data-design-system="halde"] .play-file-window>footer a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;color:#fff;border:1.5px solid #111;background:#ff5a1f;text-decoration:none;font:700 10px/1 var(--font-technical);letter-spacing:.1em}
html[data-design-system="halde"] .play-file-window>footer a i{font-style:normal}
html[data-design-system="halde"] .play-file-window>footer a:is(:hover,:focus-visible){box-shadow:3px 3px 0 #111;outline:none}

html[data-design-system="halde"] .play-file-beats{display:grid;gap:0;margin:0;padding:0;list-style:none}
html[data-design-system="halde"] .play-file-beats li{position:relative;border-top:1px solid var(--border-default);transition:background-color .3s ease,box-shadow .3s ease}
html[data-design-system="halde"] .play-file-beats li.is-active{background:#fff3ee;box-shadow:inset 3px 0 0 #ff5a1f}
html[data-design-system="halde"] .play-file-beats li.is-active::after{content:"";position:absolute;left:0;right:auto;bottom:-1px;width:0;height:2px;background:#ff5a1f}
html[data-design-system="halde"] .play-file-beats[data-auto="on"] li.is-active::after{animation:play-file-cycle 7s linear forwards}
@keyframes play-file-cycle{from{width:0}to{width:100%}}
html[data-design-system="halde"] .play-file-beats li:first-child{border-top:0}
html[data-design-system="halde"] .play-file-beats button{appearance:none;width:100%;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto auto;column-gap:14px;row-gap:8px;padding:clamp(18px,2.2vh,26px) clamp(16px,1.6vw,24px);color:inherit;border:0;border-radius:0;background:transparent;font:inherit;text-align:left;cursor:pointer;transition:opacity .25s ease}
html[data-design-system="halde"] .play-file-beats i{grid-row:1/4;color:#ff5a1f;font:700 11px/1.3 var(--font-technical);font-style:normal;letter-spacing:.1em;padding-top:.6em}
html[data-design-system="halde"] .play-file-beats strong{font:400 clamp(22px,1.9vw,30px)/1.1 var(--font-editorial);letter-spacing:-.035em;text-transform:none}
html[data-design-system="halde"] .play-file-beats small{width:max-content;padding:5px 7px;border:1px solid var(--border-strong);color:var(--text-secondary);font:600 9px/1 var(--font-technical);letter-spacing:.1em}
html[data-design-system="halde"] .play-file-beats p{max-width:44ch;max-height:0;margin:0;overflow:hidden;opacity:0;color:var(--text-secondary);font-size:15px;line-height:1.45;transition:max-height .35s ease,opacity .3s ease,margin .35s ease}
html[data-design-system="halde"] .play-file-beats li.is-active p{max-height:96px;margin-top:2px;opacity:1}
html[data-design-system="halde"] .play-file-beats li:not(.is-active) button{opacity:.55}
html[data-design-system="halde"] .play-file-beats li:not(.is-active) button:hover{opacity:.9}
html[data-design-system="halde"] .play-file-beats button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
html[data-design-system="halde"] .play-file-beats li.is-active i{color:#ff5a1f}
html[data-design-system="halde"] .play-file-beats li.is-active small{border-color:#ff5a1f;color:#ff5a1f}

html[data-design-system="halde"] .play-anatomy-payoff{min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:clamp(46px,5vw,76px);padding:0 clamp(22px,3vw,42px);border-top:1px solid var(--border-strong);border-bottom:1px solid var(--border-strong)}
html[data-design-system="halde"] .play-anatomy-payoff strong{font-size:clamp(26px,2.8vw,42px);font-weight:400;letter-spacing:-.04em}
html[data-design-system="halde"] .play-anatomy-payoff-note{max-width:44ch;color:var(--text-secondary);font-size:15px;line-height:1.45}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-file-window{color:#f1f1ed;border-color:#f1f1ed;background:#0a0a09}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-file-window>header,html[data-design-system="halde"][data-resolved-theme="dark"] .play-file-window>footer{border-color:#f1f1ed;color:#f1f1ed}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-file-window>header .stripes{background:repeating-linear-gradient(180deg,#f1f1ed 0 1.5px,transparent 1.5px 3.5px)}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-file-block>header span,html[data-design-system="halde"][data-resolved-theme="dark"] .play-file-block code{color:#f1f1ed}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-file-block.is-active{background:rgba(255,90,31,.12)}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-file-block{border-top-color:rgba(241,241,237,.3)}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-file-beats li.is-active{background:rgba(255,90,31,.12)}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-file-auto{color:#f1f1ed;border-color:#f1f1ed;background:#0a0a09}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-file-auto[aria-pressed="false"]{color:#fff;background:#ff5a1f}

@media (max-width:1120px){
  html[data-design-system="halde"] .play-file{grid-template-columns:1fr;gap:28px}
  html[data-design-system="halde"] .play-file-window{position:static;max-height:none}
  html[data-design-system="halde"] .play-file-window-body{overflow:visible}
  html[data-design-system="halde"] .play-file-block{opacity:1}
  html[data-design-system="halde"] .play-file-beats li:not(.is-active) button{opacity:1}
  html[data-design-system="halde"] .play-file-beats button{padding:18px 16px}
  html[data-design-system="halde"] .play-file-beats p{max-height:none;margin-top:2px;opacity:1}
}
@media (max-width:620px){
  html[data-design-system="halde"] .play-anatomy-stage{padding:38px 18px 58px!important}
  html[data-design-system="halde"] .landing-page .play-anatomy-intro .ds-title--section{font-size:clamp(32px,10vw,42px)}
  html[data-design-system="halde"] .play-file-block code{font-size:11.5px}
  html[data-design-system="halde"] .play-file-beats button{grid-template-columns:34px minmax(0,1fr)}
  html[data-design-system="halde"] .play-file-beats strong{font-size:22px}
  html[data-design-system="halde"] .play-anatomy-payoff{flex-direction:column;align-items:flex-start;padding:24px 0}
}

/* A section eyebrow with a chip that names the problem card it answers. */
html[data-design-system="halde"] .eyebrow-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-bottom:22px}
html[data-design-system="halde"] .eyebrow-row>.ds-eyebrow.lab{display:inline-block;margin:0}
html[data-design-system="halde"] .answers-tag{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid color-mix(in srgb,var(--accent) 45%,var(--border-default));color:var(--accent);font:750 8px/1 var(--font-technical);letter-spacing:.1em;white-space:nowrap}
html[data-design-system="halde"] .answers-tag::before{content:'↑';font-size:10px}

/* Annotated screen: the claim on the left, the window on the right, and
   three handwritten notes pinned to the window's corners. No arrows. */
html[data-design-system="halde"] .play-definition-claim--annotated{display:grid;grid-template-columns:minmax(0,.86fr) minmax(360px,1.14fr);gap:clamp(28px,4vw,64px);align-items:center}
html[data-design-system="halde"] .play-definition-claim--annotated .play-definition-copy{padding:0;text-align:left}
html[data-design-system="halde"] .play-definition-inner h2 .claim-quiet{display:block;color:var(--text-tertiary);font-weight:inherit}
html[data-design-system="halde"] .play-definition-scene{position:relative;display:block;padding:0}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen{margin:0}

/* The classic window: white, black hairline, striped title bar, mono ink. */
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote{color:#111;border:1.5px solid #111;border-radius:0;background:#fff;box-shadow:none;overflow:visible;font:500 13px/1.5 var(--font-technical)}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote>header{display:flex;align-items:center;gap:10px;min-height:34px;padding:0 10px;border-bottom:1.5px solid #111;font:600 11px/1 var(--font-technical);letter-spacing:.08em;color:#111}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote>header i{color:#111;font-style:normal;font-size:12px}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote>header span{color:#111;text-align:center}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote>header b{color:#ff5a1f;font-weight:600}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote>header .stripes{flex:1 1 auto;height:12px;background:repeating-linear-gradient(180deg,#111 0 1.5px,transparent 1.5px 3.5px)}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote ol{padding:10px 14px}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote li{min-height:28px;border-top:1px dotted rgba(17,17,17,.25)}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote li:first-child{border-top:0}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote li i{color:#8a8a86}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote .is-kept code,
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote .is-kept b{color:#111}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote .is-dropped code{color:#b3b3ad;text-decoration:line-through;text-decoration-color:#ff5a1f}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote .is-dropped b{color:#ff5a1f}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote>footer{padding:10px 14px;border-top:1.5px solid #111;background:#fff}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote>footer span{color:#ff5a1f}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote>footer strong{color:#111}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-definition-scene .play-definition-screen--rote{color:#f1f1ed;background:#0a0a09;border-color:#f1f1ed}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-definition-scene .play-definition-screen--rote>header,
html[data-design-system="halde"][data-resolved-theme="dark"] .play-definition-scene .play-definition-screen--rote>footer{border-color:#f1f1ed;background:#0a0a09;color:#f1f1ed}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-definition-scene .play-definition-screen--rote>header :is(i,span){color:#f1f1ed}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-definition-scene .play-definition-screen--rote>header .stripes{background:repeating-linear-gradient(180deg,#f1f1ed 0 1.5px,transparent 1.5px 3.5px)}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-definition-scene .play-definition-screen--rote :is(.is-kept code,.is-kept b,>footer strong){color:#f1f1ed}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-definition-scene .play-definition-screen--rote li{border-top-color:rgba(241,241,237,.28)}

@media (max-width:1120px){
  html[data-design-system="halde"] .play-definition-claim--annotated .play-definition-copy{padding-left:0}
  html[data-design-system="halde"] .play-definition-scene{grid-template-columns:1fr;gap:12px}
  html[data-design-system="halde"] .play-definition-scene .play-definition-screen{grid-column:1;grid-row:auto}
  html[data-design-system="halde"] .play-definition-scene .anno{grid-column:1!important;grid-row:auto!important;margin:0;text-align:left}
  html[data-design-system="halde"] .play-definition-scene .anno span{max-width:none;margin:0;transform:none}
  html[data-design-system="halde"] .play-definition-scene .anno svg{display:none}
  html[data-design-system="halde"] .play-definition-scene .anno--play{display:block;padding:0}
}

/* Two-tone claim and the traced columns in the recorded run. */
html[data-design-system="halde"] .play-definition-inner h2 .claim-quiet{color:var(--text-tertiary);font-weight:inherit}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote li{grid-template-columns:28px minmax(0,1fr) 62px 70px 96px 76px;gap:0 10px;align-items:baseline}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote li em{color:#8a8a86;font:400 12px/1.5 var(--font-technical);font-style:normal;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote li b{display:contents}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote li b u{grid-column:5;color:#ff5a1f;text-decoration:none;font:400 12px/1.5 var(--font-technical);letter-spacing:0;text-transform:none;text-align:right;white-space:nowrap}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote li b::after{content:attr(data-status);grid-column:6;font:600 9px/1.5 var(--font-technical);letter-spacing:.1em;text-align:right;color:#111}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote .is-dropped b::after{color:#ff5a1f}
html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote .is-dropped em{color:#ff5a1f}
html[data-design-system="halde"][data-resolved-theme="dark"] .play-definition-scene .play-definition-screen--rote li em{color:#8a8a86}
@media (max-width:620px){
  html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote li{grid-template-columns:22px minmax(0,1fr) auto}
  html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote li em{display:none}
  html[data-design-system="halde"] .play-definition-scene .play-definition-screen--rote li b u{display:none}
}

/* Phone widths: the file window must never widen its section. The code
   scrolls inside each block; the traced claim stacks under its title. */
html[data-design-system="halde"] .play-file,html[data-design-system="halde"] .play-file>*,html[data-design-system="halde"] .play-file-window,html[data-design-system="halde"] .play-file-window-body,html[data-design-system="halde"] .play-file-block{min-width:0;max-width:100%}
html[data-design-system="halde"] .play-file-block pre{max-width:100%;box-sizing:border-box}
@media (max-width:980px){
  html[data-design-system="halde"] .play-definition-claim--annotated{grid-template-columns:minmax(0,1fr)}
  html[data-design-system="halde"] .play-definition-claim--annotated>*{min-width:0}
}
html[data-design-system="halde"] .play-file-window{grid-template-columns:minmax(0,1fr)}
html[data-design-system="halde"] .play-file-window>*{min-width:0;max-width:100%}
html[data-design-system="halde"] .play-file-window>header{overflow:hidden}
html[data-design-system="halde"] .play-file-window>header span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}