.demo-player-backdrop{position:fixed;z-index:5400;inset:0;display:grid;place-items:center;padding:18px;background:rgba(2,6,23,.88)}.demo-player{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:min(980px,100%);max-height:calc(100vh - 36px);overflow:hidden;border:1px solid var(--border-strong);border-radius:14px;background:var(--bg-elevated);box-shadow:var(--shadow-xl)}.demo-player>header,.demo-player>footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px}.demo-player>header small{color:var(--accent-primary);font-size:7px;font-weight:900}.demo-player>header p{color:var(--text-muted);font-size:8px}.demo-player button{min-height:36px;padding:0 10px;border:1px solid var(--border-subtle);border-radius:6px;background:var(--bg-subtle);color:var(--text-primary)}.demo-player .is-primary{border-color:var(--accent-primary);background:var(--accent-primary);color:#fff}.demo-progress{height:4px;background:var(--bg-subtle)}.demo-progress i{display:block;height:100%;background:var(--accent-primary);transition:width 180ms ease}.demo-player>main{display:grid;grid-template-columns:260px 1fr;min-height:360px;border-block:1px solid var(--border-subtle)}.demo-player>main>aside{display:grid;align-content:start;gap:5px;padding:14px;border-right:1px solid var(--border-subtle)}.demo-player>main>aside span{padding:8px;border-radius:5px;color:var(--text-muted);font-size:8px}.demo-player>main>aside span.active{background:var(--accent-light);color:var(--accent-primary)}.demo-player>main>aside span.done{color:var(--color-success)}.demo-player>main>section{padding:26px}.demo-player>main h3{margin:8px 0;font-size:20px}.demo-target{display:grid;place-items:center;min-height:150px;margin:20px 0;border:2px dashed var(--accent-primary);border-radius:10px;background:var(--accent-light);color:var(--accent-primary);font-weight:850}.demo-target .svg-icon{width:32px;height:32px}.demo-mode-tabs{display:flex;gap:6px}.demo-player>footer{justify-content:flex-end}@media(prefers-reduced-motion:reduce){.demo-progress i{transition:none}}@media(max-width:700px){.demo-player>main{grid-template-columns:1fr}.demo-player>main>aside{display:none}.demo-player>header{align-items:flex-start}.demo-player>footer{overflow-x:auto}}