.hero{grid-template-columns:1.05fr 1fr;gap:40px}
.character-showcase{width:100%;border:1px solid #2a4148;background:radial-gradient(ellipse at 50% 32%,#173a3b88,transparent 70%),#10191f;border-radius:26px;padding:22px;overflow:hidden;min-width:0}
.showcase-title{display:flex;justify-content:space-between;align-items:center;gap:12px}
.live-badge{font-size:11px;color:#b1e7dd;padding:4px 9px;border:1px solid #375b57;border-radius:20px;white-space:nowrap}
.live-badge:before{content:'●';color:#79efdf;font-size:9px;margin-right:6px}
.character-showcase .rive-canvas{width:100%;height:auto;aspect-ratio:1;max-height:420px;touch-action:pan-y}
.demo-toolbar{display:flex;justify-content:flex-end;gap:15px;margin-block:0 15px}
.playback-control{background:transparent;border:0;color:#beced2;font-size:12px;min-height:34px;padding:5px 4px;text-decoration:underline;text-underline-offset:5px}
.demo-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0}
.character-action{background:#192c33;border:1px solid #34505a;color:#e1f6f0;border-radius:9px;min-height:44px;padding:7px 5px;font-size:13px;transition:background .15s,border-color .15s}
.character-action:hover{border-color:#79efdf;background:#203d41}
.character-action[aria-pressed=true]{background:#79efdf;color:#092824;border-color:#79efdf}
.demo-status{font-size:12px;color:#a7bcc3;min-height:36px;line-height:1.5;margin-top:14px}
.demo-details{font-size:11px;color:#94adb5;border-top:1px solid #273d44;padding-top:10px;margin-top:5px}
.demo-details summary{cursor:pointer;min-height:28px}
.demo-details p{line-height:1.8;margin:8px 0;overflow-wrap:anywhere}
.text-chat{flex-basis:100%;color:#a5e8d9;font-size:13px;text-decoration:none;margin-top:1px}
.text-chat:hover{text-decoration:underline}
.footer-links a.footer-chat{color:#79efdf}
.character-showcase [data-state=error]{min-height:350px;display:grid;align-items:center}
@media(max-width:1000px){.hero{gap:24px}.character-showcase{padding:17px}.demo-controls{gap:6px}.character-action{font-size:12px}}
@media(max-width:760px){.hero{grid-template-columns:1fr}.character-showcase{padding:18px}.hero .character-showcase{margin-top:8px}.character-showcase .rive-canvas{max-height:370px}.demo-controls{grid-template-columns:repeat(4,minmax(0,1fr))}.showcase-title .eyebrow{font-size:11px}.text-chat{margin-top:4px}}
@media(prefers-reduced-motion:reduce){.character-action{transition:none}}