.story-demo {
  scroll-margin-top:6rem;
  margin-top:2rem;
  padding:clamp(1rem,3vw,1.5rem);
  border:1px solid #62d6d580;
  border-radius:var(--radius);
  background:linear-gradient(145deg,#102a3c,#081724);
  box-shadow:0 1.25rem 3rem #0004;
}
.story-demo-head {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.25rem;
}
.story-demo-head h3 { max-width:28ch; margin:.35rem 0; }
.story-demo-head p { max-width:58ch; margin:0; color:var(--muted); }
.demo-state {
  display:inline-flex;
  flex:none;
  align-items:center;
  min-height:1.75rem;
  border:1px solid #ffb36b99;
  border-radius:99px;
  padding:.25rem .6rem;
  color:var(--warm-bright);
  font:700 .7rem/1 ui-monospace,monospace;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.demo-tabs,.demo-actions {
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
}
.demo-tabs { margin-bottom:1rem; }
.demo-control {
  min-height:2.75rem;
  border:1px solid #52798c;
  border-radius:.5rem;
  padding:.55rem .8rem;
  background:#10283a;
  color:var(--text);
  font:700 .82rem/1.2 ui-monospace,monospace;
  cursor:pointer;
}
.demo-control:hover:not(:disabled),.demo-control[aria-pressed="true"] {
  border-color:var(--cyan);
  background:#153c4b;
}
.demo-control.primary { border-color:var(--cyan); background:var(--cyan); color:#06202a; }
.demo-control.warm { border-color:#c98e65; color:var(--warm-bright); background:#29232a; }
.demo-control:disabled { cursor:not-allowed; opacity:.42; }
.demo-workspace {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(16rem,.95fr);
  gap:1rem;
  margin:1rem 0;
}
.demo-surface {
  min-width:0;
  padding:1rem;
  border:1px solid #41667a;
  border-radius:.7rem;
  background:#071724;
}
.demo-surface h4 {
  margin:0 0 .7rem;
  color:#e9fbfc;
  font:700 .85rem/1.25 ui-monospace,monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.demo-surface p { color:var(--muted); }
.demo-surface code,.demo-output {
  overflow-wrap:anywhere;
  color:#9cf4ed;
  font:.8rem/1.5 ui-monospace,monospace;
}
.demo-output {
  display:block;
  min-height:4.5rem;
  margin:.75rem 0 0;
  padding:.8rem;
  border:1px solid #386173;
  border-radius:.5rem;
  background:#06121d;
  white-space:pre-wrap;
}
.demo-status-copy {
  margin:.8rem 0 0;
  padding:.75rem 0 .75rem .9rem;
  border-left:3px solid var(--warm);
  color:#f2d7bd!important;
}
.demo-table { width:100%; border-collapse:collapse; font-size:.85rem; }
.demo-table th,.demo-table td { padding:.55rem .35rem; border-bottom:1px solid #41627680; text-align:left; vertical-align:top; }
.demo-table th { color:#bdeeed; font:700 .68rem/1.2 ui-monospace,monospace; letter-spacing:.05em; text-transform:uppercase; }
.demo-table td { color:var(--muted); }
.demo-table td:last-child { color:#eefafa; }
.demo-checks { display:grid; gap:.45rem; margin:0; padding:0; list-style:none; }
.demo-checks li { padding:.55rem .65rem; border:1px solid #385d70; border-radius:.45rem; color:#cfe4e9; font-size:.82rem; }
.demo-checks .pass { border-color:#62c9aa; color:#bff4e2; }
.demo-checks .hold,.demo-checks .blocked { border-color:#d49570; color:#ffd0b0; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; }
.field-grid label { display:grid; gap:.3rem; color:#cfe7eb; font:700 .72rem/1.25 ui-monospace,monospace; letter-spacing:.04em; text-transform:uppercase; }
.field-grid select {
  width:100%;
  min-height:2.75rem;
  border:1px solid #52798c;
  border-radius:.45rem;
  padding:.45rem;
  background:#0d2435;
  color:var(--text);
  font:inherit;
}
.field-grid select:focus-visible { outline:3px solid var(--warm); outline-offset:3px; }
.step-trail { display:grid; gap:.45rem; margin:0; padding:0; list-style:none; }
.step-trail li { display:flex; justify-content:space-between; gap:1rem; padding:.55rem .65rem; border:1px solid #395e70; border-radius:.45rem; color:#cbdde3; font-size:.83rem; }
.step-trail b { color:#9cece7; font:700 .72rem/1.3 ui-monospace,monospace; }
.concept-scene {
  position:relative;
  display:grid;
  min-height:17rem;
  place-items:center;
  overflow:hidden;
  border:1px solid #4f8a9c;
  border-radius:.8rem;
  background:radial-gradient(circle at 50% 120%,#1f7d7b 0,transparent 45%),linear-gradient(180deg,#0b334c,#071724);
}
.concept-scene::before,.concept-scene::after {
  position:absolute;
  content:"";
  width:15rem;
  height:15rem;
  border:1px solid #8ff5ed55;
  border-radius:50%;
}
.concept-scene::after { width:9rem; height:9rem; }
.concept-scene strong { position:relative; z-index:1; max-width:12ch; color:#e6fffb; font:700 1.6rem/1.05 ui-monospace,monospace; text-align:center; }
.concept-scene span { position:absolute; z-index:1; border:1px solid #85eae46b; border-radius:99px; padding:.25rem .5rem; background:#0a2431; color:#c7efec; font:.7rem/1.2 ui-monospace,monospace; }
.concept-scene span:nth-of-type(1) { top:12%; left:9%; }
.concept-scene span:nth-of-type(2) { top:22%; right:8%; }
.concept-scene span:nth-of-type(3) { bottom:12%; left:18%; }
.concept-path { display:grid; gap:.55rem; margin:0; padding:0; list-style:none; counter-reset:concept; }
.concept-path li { display:grid; grid-template-columns:1.8rem 1fr; gap:.6rem; color:var(--muted); }
.concept-path li::before { counter-increment:concept; content:"0" counter(concept); color:var(--cyan); font:700 .72rem/1.5 ui-monospace,monospace; }
.is-demo-active { outline:3px solid var(--warm); outline-offset:3px; }
.dialog-poster {
  width:min(calc(100% - 2rem),42rem);
  border:1px solid #b7dc83;
  border-radius:1rem;
  padding:0;
  color:var(--text);
  background:#0a1922;
  box-shadow:0 2rem 7rem #000b;
}
.dialog-poster::backdrop { background:#031019d9; backdrop-filter:blur(4px); }
.dialog-poster-inner { padding:1rem; }
.dialog-poster .demo-actions { justify-content:flex-end; margin-top:1rem; }
.enhanced-only { display:none; }
.js .enhanced-only { display:block; }
@media (max-width:760px) {
  .story-demo,[id] { scroll-margin-top:9rem; }
  .demo-workspace,.field-grid { grid-template-columns:1fr; }
  .demo-control { flex:1 1 9rem; }
}
@media (prefers-reduced-motion:reduce) {
  .story-demo * { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}