.demo-showcase{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}.demo-style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}.demo-style-card{display:flex;flex-direction:column;gap:.3rem;padding:.85rem 1rem;border:1px solid var(--border-default);border-radius:.85rem;background:var(--bg-card);color:var(--text);text-align:left;cursor:pointer;transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease}.demo-style-card strong{font-size:.92rem;font-family:var(--font-heading)}.demo-style-card>span{font-size:.8rem;color:var(--text-muted);line-height:1.4}.demo-style-card:hover{border-color:var(--border-hover);transform:translateY(-1px);box-shadow:0 4px 12px -4px rgba(15,23,42,8%)}.demo-style-card--active{border-color:var(--accent);background:var(--accent-subtle);box-shadow:0 0 0 1px var(--accent),0 4px 16px -6px rgba(59,130,246,.2)}.demo-style-card--active:hover{border-color:var(--accent);transform:none}.demo-voice-badge{display:inline-flex;align-self:flex-start;padding:.2rem .5rem;border-radius:999px;background:var(--bg-elevated);color:var(--text-muted);font-size:.7rem;font-weight:600;margin-top:.15rem}.demo-voice-badge--dual{background:rgba(59,130,246,8%);color:var(--accent-hover)}.demo-style-card--active .demo-voice-badge{background:rgba(59,130,246,.12);color:var(--accent-hover)}.demo-player{position:relative;padding:1.25rem 1.5rem;border-radius:1rem;border:1px solid var(--border-default);background:var(--bg-card);box-shadow:0 8px 30px -12px rgba(15,23,42,.12);overflow:hidden}.demo-player__shimmer{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);opacity:0;transform:translateX(-100%);pointer-events:none}.demo-player__shimmer--active{opacity:1;transform:translateX(100%);transition:transform .25s ease}.demo-player__controls{display:flex;align-items:center;gap:1rem}.demo-player__play-btn{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:3rem;height:3rem;border:none;border-radius:50%;background:var(--primary);color:var(--text-inverted);cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.demo-player__play-btn:hover{transform:scale(1.05);box-shadow:0 4px 16px -4px rgba(15,23,42,.35)}.demo-player__play-btn:active{transform:scale(.97)}.demo-player__icon{position:absolute;display:none}.demo-player__icon--play{display:block}.demo-player__icon--pause{display:none}.demo-player__icon--spinner{display:none}.demo-player[data-state=playing] .demo-player__icon--play{display:none}.demo-player[data-state=playing] .demo-player__icon--pause{display:block}.demo-player[data-state=loading] .demo-player__icon--play{display:none}.demo-player[data-state=loading] .demo-player__icon--spinner{display:block;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.3);border-top-color:var(--text-inverted);animation:demo-spin .8s linear infinite}.demo-player__track{flex:1;display:flex;flex-direction:column;gap:.35rem}.demo-player__progress-bar{position:relative;height:6px;border-radius:999px;background:var(--bg-elevated);cursor:pointer}.demo-player__buffered,.demo-player__filled{position:absolute;inset:0;width:0;border-radius:inherit;overflow:hidden}.demo-player__buffered{background:rgba(148,163,184,.2);transition:width .3s ease}.demo-player__filled{background:var(--accent);transition:width .1s linear}.demo-player__scrubber{position:absolute;top:50%;left:0;transform:translate(-50%,-50%)scale(0);width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 1px 4px rgba(59,130,246,.4);transition:transform .15s ease,left .1s linear;pointer-events:none}.demo-player__progress-bar:hover .demo-player__scrubber{transform:translate(-50%,-50%)scale(1)}.demo-player__times{display:flex;justify-content:space-between;font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--text-muted);font-family:outfit,var(--font-body)}.demo-player__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin-top:.75rem;font-size:.85rem;color:var(--text-secondary)}.demo-player__style-label{font-weight:700;color:var(--text)}.demo-player__sep{color:var(--text-muted)}.demo-player__speakers{display:flex;gap:.5rem;margin-top:.65rem}.demo-player__speakers[hidden]{display:none}.demo-player__speaker-pill{display:inline-flex;padding:.35rem .65rem;border-radius:999px;background:var(--bg-elevated);color:var(--text-secondary);font-size:.78rem;font-weight:600;transition:background .2s ease,color .2s ease,box-shadow .2s ease}.demo-player__speaker-pill.is-speaking{background:rgba(59,130,246,.1);color:var(--accent-hover);box-shadow:0 0 0 1.5px rgba(59,130,246,.25)}.demo-player__error{margin-top:.65rem;padding:.6rem .85rem;border-radius:.6rem;background:var(--error-bg);color:var(--error);font-size:.85rem}.demo-player--error .demo-player__controls{opacity:.4;pointer-events:none}.demo-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}.demo-languages{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}.demo-lang{padding:.3rem .55rem;border-radius:999px;border:1px solid var(--border-default);background:0 0;font-size:.78rem;font-weight:600;color:var(--text-muted);font-family:inherit}button.demo-lang{cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}button.demo-lang:hover{border-color:var(--border-hover);color:var(--text)}.demo-lang--active{background:var(--bg-elevated);color:var(--text);border-color:var(--border-hover)}.demo-lang--soon{opacity:.4;border-style:dashed}.demo-lang-note{font-size:.78rem;color:var(--text-muted);margin-left:.25rem}.demo-actions{display:flex;gap:.65rem}.demo-source-note{margin-top:1.5rem;text-align:center;font-size:.82rem;color:var(--text-muted)}@keyframes demo-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:700px){.demo-style-grid{grid-template-columns:repeat(2,1fr)}.demo-player{padding:1rem}.demo-player__play-btn{width:2.6rem;height:2.6rem}.demo-player__play-btn svg{width:18px;height:18px}.demo-bottom{flex-direction:column;align-items:stretch}.demo-languages{justify-content:center}.demo-actions{justify-content:center}.demo-script-excerpt .demo-editor__line{grid-template-columns:1.5rem minmax(0,1fr);gap:.4rem;font-size:.82rem}.demo-script-excerpt .demo-editor__speaker{display:block;margin:0 0 .1rem}}@media(max-width:480px){.demo-style-grid{grid-template-columns:1fr}.demo-style-card{flex-direction:row;align-items:center;gap:.5rem;padding:.7rem .85rem}.demo-style-card strong{flex-shrink:0;min-width:6rem}.demo-style-card>span:nth-child(2){flex:1}.demo-voice-badge{margin-top:0}}