/* DMT University home, round 3G: stop interactions 1, 2, 3, 4, 5, 7, 8. Page-local, never touches scrollcraft.css. Palette soot, chalk, amber. */
.stp-off{display:none!important}
.sc-copy .stp-tag,.sc-copy .stp-meter,.sc-copy .stp-benchcap,.sc-copy .stp-src{font:600 .85rem/1.35 var(--text);color:var(--stone);margin:.2em 0 .5em}

/* stop 1: two cards you turn over */
.stp-cards{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:0 0 .7rem;perspective:900px}
.stp-card{position:relative;min-height:5.6rem;padding:0;background:none;border:0;color:var(--chalk);font:inherit;text-align:left;cursor:pointer;border-radius:8px}
.stp-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.25rem;padding:.75rem .9rem;border:1px solid #EEECE666;border-radius:8px;background:#ffffff0a;backface-visibility:hidden;transition:transform .5s var(--ease),border-color .25s var(--ease)}
.stp-front b{font:700 1.05rem var(--text)}.stp-front small{color:var(--stone);font-size:.8rem}
.stp-back{transform:rotateY(180deg);font:400 .88rem/1.35 var(--text);background:#121312;overflow:auto}
.stp-back b{color:var(--amber);font-weight:700}
.stp-card[aria-pressed="true"] .stp-front{transform:rotateY(180deg)}
.stp-card[aria-pressed="true"] .stp-back{transform:none}
.stp-card:hover .stp-face{border-color:var(--chalk)}
.stp-card.lit .stp-face{border-color:var(--amber)}
.stp-card.lit .stp-front b::after{content:"  \2715";color:var(--amber)}

/* stop 2: volume knob for the noise */
.stp-noise{margin:0 0 .6rem}
.stp-shout{font:400 clamp(1.4rem,2.6vw,2rem)/1 var(--display);color:var(--chalk);letter-spacing:.01em;margin:0 0 .3rem;transform-origin:left center;transition:transform .35s var(--ease),color .35s var(--ease),opacity .35s var(--ease)}
.stp-wave{display:flex;align-items:center;gap:3px;height:22px;margin:0 0 .25rem}
.stp-wave i{display:block;width:3px;height:100%;background:var(--amber);border-radius:2px;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.stp-wave i:nth-child(odd){height:55%}.stp-wave i:nth-child(3n){height:80%}.stp-wave i:nth-child(5n){height:30%}
.stp-noise[data-level="2"] .stp-shout{transform:scale(.8);color:var(--stone)}
.stp-noise[data-level="1"] .stp-shout{transform:scale(.6);color:var(--grey)}
.stp-noise[data-level="0"] .stp-shout{transform:scale(.45);color:var(--grey);opacity:.45}
.stp-noise[data-level="2"] .stp-wave i{transform:scaleY(.55);opacity:.7}
.stp-noise[data-level="1"] .stp-wave i{transform:scaleY(.25);opacity:.45}
.stp-noise[data-level="0"] .stp-wave i{transform:scaleY(.08);opacity:.3}
.stp-vol{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin:0 0 .5rem}
.stp-vol label{font:600 .9rem var(--text);color:var(--stone)}
.stp-vol input[type="range"]{flex:1 1 8rem;min-width:7rem;height:44px;margin:0;accent-color:var(--amber);cursor:pointer}
.stp-down{min-height:44px;padding:.5rem .9rem;font-size:.9rem}
.stp-down:disabled{opacity:.4;cursor:default}
.stp-qs{margin:0 0 .4rem;padding-left:1.3em;font-size:clamp(.95rem,1.1vw,1.05rem);line-height:1.45}
.stp-qs li[hidden]{display:none}
.stp-qs li::marker{color:var(--amber);font-weight:700}
.stp-wired{font:600 1rem/1.4 var(--text);color:var(--chalk);border-left:1px solid var(--amber);padding-left:.8rem;margin:0 0 .4rem}
.stp-wired[hidden]{display:none}

/* stop 3: type to ELIZA */
.stp-term{margin:0 0 .6rem}
.stp-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .5rem}
.stp-chip{min-height:44px;cursor:pointer;background:#ffffff0a;color:var(--stone);border:1px solid #C4C2BB55;border-radius:999px;padding:.45rem .85rem;font:600 .82rem/1.2 var(--text);transition:border-color .25s var(--ease),color .25s var(--ease)}
.stp-chip:hover{border-color:var(--chalk);color:var(--chalk)}
.stp-say{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.stp-say label{flex:1 0 100%;font:600 .9rem var(--text);color:var(--stone)}
.stp-say input{flex:1 1 10rem;min-width:0;min-height:44px;box-sizing:border-box;padding:.5rem .8rem;font:400 1rem "Source Sans 3",monospace;color:var(--chalk);background:#000000a0;border:1px solid #EEECE666;border-radius:6px;caret-color:var(--amber)}
.stp-say input::placeholder{color:var(--grey)}
.stp-say input:focus{outline:2px solid var(--amber);outline-offset:2px;border-color:var(--amber)}
.stp-say .lbtn{padding-inline:1rem}
#rule-result{font-family:"Source Sans 3",monospace;letter-spacing:.01em}
#rule-result mark{background:#FFC24733;color:var(--amber);padding:0 .15em;border-radius:3px}
#rule-result .el-r{color:var(--stone);font-size:.9rem}

/* stop 4: build the command center piece by piece */
.stp-bench{display:block;width:min(100%,22rem);height:auto;margin:0 0 .15rem}
.stp-bench .ln{fill:none;stroke:var(--stone);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stp-bench .ln.dash{stroke-dasharray:4 6;stroke:#C4C2BB66}
.stp-bench .amber{fill:var(--amber)}
.stp-bench [data-piece]:not([data-piece="table"]){opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.stp-bench [data-piece].in{opacity:1;transform:none}
.stp-bench.done .ln{stroke:var(--chalk)}
.stp-bench.done [data-piece="table"] .ln:not(.dash){stroke:var(--amber)}

/* stop 5: weigh the futures */
.stp-scale{position:relative;width:min(100%,15rem);aspect-ratio:900/662;margin:0 0 .1rem}
.stp-scale img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 2px 6px #000)}
.stp-post{clip-path:inset(22% 0 0 0)}
.stp-beam{clip-path:inset(0 0 78% 0);transform-origin:50% 16%;transition:transform .6s var(--ease)}
.stp-points{margin:.2rem 0 .3rem;padding-left:1.1em;font-size:clamp(.92rem,1.05vw,1rem);line-height:1.4;max-width:40ch}
.stp-points li{margin:0 0 .35em}
.stp-points li::marker{color:var(--amber)}
.stp-points b{color:var(--amber);font-weight:700}
.stp-src[hidden]{display:none}

/* stop 7: press the stamp */
.stp-press{position:relative;width:9rem;height:9.6rem;margin:0 0 .5rem;cursor:pointer;user-select:none;-webkit-user-select:none}
.stp-stamp{position:absolute;left:50%;bottom:2.9rem;width:3.4rem;height:auto;translate:-50% 0;transform-origin:50% 100%;transition:transform .22s var(--ease);filter:drop-shadow(0 6px 10px #000)}
.stp-ring{position:absolute;left:50%;bottom:0;translate:-50% 0;width:8.6rem;height:2.7rem;display:grid;place-items:center;box-sizing:border-box;padding:.2rem .5rem;border:2px solid var(--amber);border-radius:50%;opacity:0;scale:.6;transform:rotate(-5deg);transition:opacity .25s var(--ease) .18s,scale .25s var(--ease) .18s}
.stp-ink{display:block;max-width:7.2rem;text-align:center;font:400 .48rem/1.2 var(--display);color:var(--amber);text-transform:uppercase;letter-spacing:.03em;overflow:hidden;max-height:1.75rem}
.stp-light{position:absolute;left:50%;bottom:-.3rem;translate:-50% 0;width:9rem;height:1.6rem;border-radius:50%;background:radial-gradient(closest-side,#FFC24755,transparent);opacity:0;transition:opacity .4s var(--ease)}
.stp-press.down .stp-stamp{transform:translateY(2.2rem)}
.stp-press.printed .stp-stamp{transform:translateY(.4rem)}
.stp-press.printed .stp-ring,.stp-press.printed .stp-light{opacity:1;scale:1}
#stamp{font:600 .95rem/1.4 var(--text);color:var(--amber);margin:0}

/* stop 8: eight stamps you can step back on */
.stp-path{display:flex;gap:.35rem;margin:0 0 .5rem}
.stp-step{flex:0 0 44px;width:44px;height:44px;border-radius:50%;cursor:pointer;background:#ffffff0a;color:var(--stone);border:1.5px solid #C4C2BB66;font:700 .95rem var(--text);padding:0;transition:border-color .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease)}
.stp-step:hover{border-color:var(--chalk);color:var(--chalk)}
.stp-step.acted{background:#FFC2471f;border-color:var(--amber);color:var(--amber)}
.stp-step[aria-current="step"]{border-style:dashed;color:var(--chalk)}

@media (max-width:860px){
  .stp-cards{grid-template-columns:1fr}
  .stp-card{min-height:4.4rem}
  .stp-scale{width:min(100%,11rem)}
  .stp-shout{font-size:1.3rem}
  .stp-path{gap:.25rem;justify-content:space-between}
  .stp-step{flex:0 0 44px}
  .stp-bench{max-height:28vh}
}
/* Optional examples stay native and keyboard-operable, never a reading gate. */
.stp-optional{margin:0 0 .35rem}
.stp-proof img{display:block;max-width:100%;width:auto;height:auto;max-height:220px;object-fit:contain;margin:8px 0}
.stp-optional>summary{min-height:44px;box-sizing:border-box;padding:10px 0;cursor:pointer;font:600 17px/24px var(--text);color:var(--amber)}
.stp-optional>summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
@media(max-width:899px){
 .sc-copy p,.sc-copy .stp-qs,.sc-copy .stp-points{font-size:17px;line-height:1.5}
 .sc-copy h2{margin-bottom:8px}
 .sc-copy p{margin-bottom:8px}
 .stp-path{flex-wrap:wrap;justify-content:flex-start;gap:4px}
 .stp-scale{width:90px;float:right;margin:0 0 4px 10px}
 .stp-bench{width:160px;max-height:75px;margin:0}
 .stp-press{height:90px;width:100px;float:right;margin:0 0 4px 8px}
 .stp-stamp{width:35px;bottom:26px}
 .stp-ring{width:100px;height:28px}
 .stp-wave{display:none}
 .stp-shout{font-size:20px}
 .stp-vol{gap:4px;margin-bottom:4px}
 .stp-vol input[type=range]{flex-basis:100px;min-width:80px}
 .sc-copy .stp-src{font-size:17px;line-height:1.35;overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){
  .stp-face,.stp-shout,.stp-wave i,.stp-bench [data-piece],.stp-beam,.stp-stamp,.stp-ring,.stp-light,.stp-step,.stp-chip{transition:none!important}
  .stp-cards{perspective:none}
  .stp-face{backface-visibility:visible}
  .stp-card .stp-back{display:none}
  .stp-card[aria-pressed="true"] .stp-front{display:none;transform:none}
  .stp-card[aria-pressed="true"] .stp-back{display:flex;transform:none}
  .stp-noise .stp-shout{transform:none!important;font-size:1.2rem}
  .stp-noise[data-level="3"] .stp-shout{font-size:1.9rem}
  .stp-noise[data-level="2"] .stp-shout{font-size:1.5rem}
  .stp-wave i{transform:none!important}
  .stp-beam{transform:none!important}
  .stp-press.down .stp-stamp{transform:none}
  .stp-bench [data-piece]{transform:none}
}