.demo-hero .hero__lead{max-inline-size:760px}
.demo-disclosure{max-inline-size:760px;margin-block-start:24px;padding-inline-start:16px;border-inline-start:2px solid var(--accent-on-light);color:var(--text-muted-light);font-size:.92rem}
.demo-jump{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;max-inline-size:920px;margin-block-start:38px;background:var(--rule-light);border:1px solid var(--rule-light)}
.demo-jump a{display:flex;gap:12px;align-items:center;min-inline-size:0;padding:18px;background:var(--surface-paper);font-weight:700;text-decoration:none;color:var(--text-primary-light)}
.demo-jump a:hover{background:color-mix(in srgb,var(--surface-paper) 92%,var(--accent-on-light))}
.demo-jump span{font-family:var(--font-mono);font-size:.72rem;color:var(--accent-on-light);letter-spacing:.08em}
.demo-scenario{scroll-margin-block-start:92px}
.demo-heading{max-inline-size:800px}
.demo-heading .lead{margin-block-start:20px}
.demo-brief{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block-start:1px solid var(--rule-light);margin:44px 0 0}
.demo-brief>div{min-inline-size:0;padding:20px 20px 20px 0;border-block-end:1px solid var(--rule-light)}
.demo-brief>div+div{padding-inline-start:20px;border-inline-start:1px solid var(--rule-light)}
.demo-brief dt{font-family:var(--font-mono);font-size:.7rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--accent-on-light)}
.demo-brief dd{margin:10px 0 0;color:var(--text-muted-light);line-height:1.55}
.storyboard{margin-block-start:48px}
.storyboard__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.storyboard__grid li{min-inline-size:0;border:1px solid var(--rule-light);background:var(--surface-paper)}
.storyboard__grid picture{display:block;aspect-ratio:4/5;overflow:hidden;background:color-mix(in srgb,var(--surface-paper) 90%,var(--surface-night))}
.storyboard__grid img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.storyboard__detail picture{position:relative}
.storyboard__detail img{transform:scale(1.45);object-position:52% 58%}
.storyboard__grid div{padding:18px}
.storyboard__grid span,.demo-output__label{display:block;font-family:var(--font-mono);font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-on-light)}
.storyboard__grid p{margin-block-start:8px;color:var(--text-muted-light)}
.storyboard figcaption{margin-block-start:14px;font-size:.82rem;color:var(--text-muted-light)}
.demo-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.75fr);gap:clamp(40px,7vw,96px);align-items:start}
.demo-brief--stacked{grid-template-columns:1fr;margin-block-start:34px}
.demo-brief--stacked>div,.demo-brief--stacked>div+div{padding:16px 0;border-inline-start:0}
.demo-panel{min-inline-size:0;padding:clamp(22px,4vw,34px);border:1px solid var(--rule-light);background:var(--surface-paper)}
.demo-panel label{display:block;margin-block-end:9px;font-weight:700}
.demo-panel select{inline-size:100%;min-block-size:48px;border:1px solid var(--rule-light);border-radius:0;background:var(--ls-white);color:var(--text-primary-light);font:inherit;padding:10px 42px 10px 12px}
.demo-panel select:focus-visible{outline:2px solid var(--accent-on-light);outline-offset:2px}
.demo-panel>.btn{inline-size:100%;justify-content:center;margin-block-start:18px}
.demo-field+.demo-field{margin-block-start:20px}
.demo-actions{display:flex;flex-wrap:wrap;gap:12px;margin-block-start:24px}
.demo-actions .btn{flex:1;justify-content:center}
.demo-reset{min-block-size:44px;padding:10px 14px;border:0;border-block-end:1px solid currentColor;background:transparent;color:var(--text-primary-light);font:inherit;font-weight:700;cursor:pointer}
.demo-feedback{min-block-size:1.5em;margin-block-start:14px;color:var(--text-muted-light);font-size:.88rem}
.demo-output{margin-block-start:16px;padding:20px;border-inline-start:3px solid var(--accent-on-light);background:color-mix(in srgb,var(--surface-paper) 90%,var(--accent-on-light))}
.demo-output[hidden]{display:none}
.demo-output p{margin-block-start:8px}
.demo-output h3{margin-block-start:8px;font-size:1.45rem}
.demo-output dl{margin-block-start:18px;border-block-start:1px solid var(--rule-light)}
.demo-output dl div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding-block:9px;border-block-end:1px solid var(--rule-light)}
.demo-output dl dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted-light)}
.demo-output dl dd{margin:0}
.demo-limit{margin-block-start:18px;padding-block-start:14px;border-block-start:1px solid var(--rule-light);font-size:.78rem;line-height:1.5;color:var(--text-muted-light)}
[aria-invalid="true"]{border-color:var(--accent-on-light)!important;box-shadow:0 0 0 1px var(--accent-on-light)}

@media (max-width:900px){
  .demo-split{grid-template-columns:1fr}
  .demo-brief{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-brief>div:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .demo-brief--stacked{grid-template-columns:1fr}
  .demo-brief--stacked>div{padding-inline:0!important;border-inline-start:0!important}
}
@media (max-width:650px){
  .demo-jump,.storyboard__grid,.demo-brief{grid-template-columns:1fr}
  .demo-jump a{padding:15px}
  .demo-brief>div,.demo-brief>div+div{padding:16px 0;border-inline-start:0}
  .storyboard__grid{gap:22px}
  .demo-panel{padding:20px 16px}
  .demo-actions{display:grid}
}
@media (prefers-reduced-motion:reduce){.demo-scenario{scroll-behavior:auto}}