/* Hack Yourself: "Pause the moment" (hyp-). Theme variables only. */
.hyp .hyp-label{margin:0 0 .7rem;font:.84rem var(--mono);color:var(--muted)}
.hyp .hyp-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.1rem}
.hyp .hyp-chip{padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);
  font:.8rem/1.3 var(--mono);cursor:pointer;transition:border-color .15s, translate .15s}
.hyp .hyp-chip:hover{border-color:var(--accent2);translate:0 -1px}
.hyp .hyp-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg)}

.hyp .hyp-trigger{margin:0 0 1rem;padding:.7rem .95rem;border-left:3px solid var(--accent3);background:var(--code);border-radius:0 8px 8px 0;
  font:600 1rem/1.5 var(--body);color:var(--fg)}

.hyp .hyp-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.hyp .hyp-card{padding:1rem 1.1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface);min-width:0}
.hyp .hyp-card--auto{opacity:.92}
.hyp .hyp-card--dbg{border-color:var(--accent2);box-shadow:3px 3px 0 var(--shadow)}
.hyp .hyp-h{margin:0 0 .6rem;font:700 .95rem var(--disp);color:var(--fg)}
.hyp .hyp-card p{margin:.55rem 0 0;font-size:.95rem;line-height:1.55}
.hyp .hyp-run{margin:0 0 .4rem!important;font:.78rem var(--mono)!important;color:var(--muted)}
.hyp .hyp-run code{padding:.1rem .45rem;border:1px solid var(--line);border-radius:5px;background:var(--code);color:var(--accent2)}
.hyp .hyp-tag{display:inline-block;margin-right:.3rem;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}
.hyp .hyp-after{color:var(--muted)}

.hyp .hyp-steps{list-style:none;margin:.5rem 0 0;padding:0;display:grid;gap:.6rem}
.hyp .hyp-step{display:none;gap:.75rem;align-items:flex-start;margin:0;padding:.6rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--code)}
.hyp .hyp-step.is-on{display:flex}
.hyp .hyp-step.is-now{border-color:var(--accent);animation:hyp-in .35s ease-out}
.hyp .hyp-step > div{min-width:0;flex:1}
.hyp .hyp-cmd{flex:none;min-width:4.6rem;padding:.1rem .45rem;border-radius:5px;background:var(--surface2);border:1px solid var(--line);
  font:600 .74rem var(--mono);color:var(--accent);text-align:center}
.hyp .hyp-step p{margin:0;font-size:.93rem;line-height:1.5}
.hyp .hyp-note{margin-top:.3rem!important;font:.74rem var(--mono)!important;color:var(--muted)}
.hyp .hyp-vars{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.3rem .8rem;font-size:.9rem;line-height:1.5}
.hyp .hyp-vars dt{margin:0;font:600 .76rem var(--mono);color:var(--accent3);padding-top:.12rem;align-self:start}
.hyp .hyp-vars dd{margin:0}
.hyp .hyp-opts{margin:0;padding-left:1.1rem}
.hyp .hyp-opts li{margin:0}

.hyp .hyp-btns{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}
.hyp .toy-btn:disabled{opacity:.45;cursor:not-allowed}

.hyp .hyp-static-title{margin:0 0 .4rem;font:700 1rem var(--disp)}
.hyp .hyp-static{margin:0;display:grid;gap:.15rem}
.hyp .hyp-static dt{font:600 .8rem var(--mono);color:var(--accent);margin-top:.7rem}
.hyp .hyp-static dd{margin:0;font-size:.95rem;line-height:1.55}

@keyframes hyp-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:reduce){.hyp .hyp-step.is-now{animation:none}}
@media (max-width:760px){
  .hyp .hyp-cols{grid-template-columns:1fr}
  .hyp .hyp-chip,.hyp .toy-btn{min-height:40px}
  .hyp .hyp-vars{grid-template-columns:1fr;gap:.1rem}
  .hyp .hyp-vars dd{margin-bottom:.4rem}
}