.demo-live{margin:0 0 var(--space-8);color:var(--works-ink)}.demo-live-inner{max-width:960px;padding:var(--space-7) var(--space-6);border:1px solid var(--works-line);border-radius:var(--radius-lg);background:var(--works-panel);margin:0 auto}.demo-live-kicker{font-family:var(--font-display);margin:0 0 var(--space-3);font-weight:700;font-size:var(--text-label);letter-spacing:.12em;text-transform:uppercase;color:var(--works-muted)}.demo-live h2{margin:0 0 var(--space-3);font:700 var(--text-h3) / 1.3 var(--font-display);color:var(--works-ink)}.demo-live-lead{margin:0 0 var(--space-6);font-size:var(--text-small);color:var(--works-muted);max-width:62ch;line-height:1.9}.demo-live-scroll-hint{display:none}.demo-live-routes{margin:0 0 var(--space-5);gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));padding:0;list-style:none;display:grid}.demo-live-routes a{min-height:var(--tap-min);background:color-mix(in srgb, var(--works-ink) 4%, transparent);gap:var(--space-2);height:100%;padding:var(--space-4);border:1px solid var(--works-line);border-radius:var(--radius-md);color:var(--works-ink);text-decoration:none;transition:border-color .2s;display:grid}.demo-live-routes a:hover{border-color:var(--color-amber-bright)}.demo-live-routes strong{color:var(--works-ink);align-items:center;gap:var(--space-2);font-size:var(--text-body);display:flex}.demo-live-routes span{font-size:var(--text-caption);color:var(--works-muted);line-height:1.7}.demo-live-note{font-size:var(--text-caption);color:var(--works-muted);margin:0;line-height:1.8}@media (prefers-reduced-motion:reduce){.demo-live-routes a{transition:none}}.case-ui .demo-live{margin-block:var(--space-8);padding-inline:var(--hub-space)}.demo-live-compact{background:#14100d;margin:0}.demo-live-compact .demo-live-inner{background:0 0;border:0;border-radius:0;max-width:1280px;padding:14px clamp(16px,3vw,40px)}.demo-live-compact .demo-live-kicker{display:none}.demo-live-compact h2{margin-bottom:8px;font-size:14px}.demo-live-compact .demo-live-routes{gap:8px;margin-bottom:6px;padding-bottom:4px;display:flex;overflow-x:auto}.demo-live-compact .demo-live-routes li{flex:none}.demo-live-compact .demo-live-routes a{border-radius:6px;min-height:44px;padding:10px 14px}.demo-live-compact .demo-live-routes strong{font-size:13px}.demo-live-compact .demo-live-note{max-width:90em;font-size:12px;line-height:1.65}@media (max-width:600px){.demo-live-compact .demo-live-scroll-hint{color:var(--works-muted);margin:0 0 6px;font-size:12px;line-height:1.65;display:block}}