.ss-demo{min-width:0}.ss-demo__panel{display:grid;gap:var(--space-6);max-width:520px}.ss-site .ss-demo [hidden]{display:none}.ss-demo__swap{justify-self:start;padding:0;border:0;background:0 0;color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer}.ss-demo__file{display:flex;align-items:baseline;gap:var(--space-3);padding-bottom:var(--space-3);border-bottom:1px solid var(--line)}.ss-demo__name{overflow:hidden;color:var(--ink);font-size:var(--fs-sm);font-weight:600;text-overflow:ellipsis;white-space:nowrap}.ss-demo__meta{color:var(--faint);font-family:var(--mono);font-size:var(--fs-xs);white-space:nowrap}.ss-demo__file .ss-demo__swap{margin-left:auto}.ss-demo__bar{height:4px;background:var(--track)}.ss-demo__bar span{display:block;width:0;height:100%;background:var(--accent);transition:width .2s}.ss-demo__steps{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none;color:var(--faint);font-size:var(--fs-sm)}.ss-demo__steps li{display:flex;align-items:center;gap:var(--space-3)}.ss-demo__steps li:before{content:"";flex:none;width:10px;height:10px;border:2px solid var(--track);border-radius:50%}.ss-demo__steps .is-done{color:var(--text)}.ss-demo__steps .is-done:before{border-color:var(--ink);background:var(--ink)}.ss-demo__steps .is-now{color:var(--ink);font-weight:600}.ss-demo__steps .is-now:before{border-color:var(--accent);background:var(--accent)}.ss-demo__ready{display:flex;align-items:center;gap:var(--space-2);margin:0;color:var(--ink);font-size:var(--fs-md);font-weight:600}.ss-demo__ready:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--status-done)}.ss-demo__player{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line)}.ss-demo__play{display:grid;flex:none;place-items:center;width:44px;height:44px;border:1px solid var(--ink);background:var(--bg);cursor:pointer}.ss-demo__play:before{content:"";margin-left:3px;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid var(--ink)}.ss-demo__play[aria-pressed=true]:before{box-sizing:content-box;width:4px;height:14px;margin-left:0;border:0;border-right:4px solid var(--ink);border-left:4px solid var(--ink)}.ss-demo__play:focus-visible,.ss-demo__swap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ss-demo__scrub{flex:1;height:4px;background:var(--track);cursor:pointer}.ss-demo__scrub span{display:block;width:0;height:100%;background:var(--ink)}.ss-demo__video{display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);background:var(--ink)}.ss-demo__transcript{max-height:16rem;overflow-y:auto;padding:var(--space-3);border:1px solid var(--line)}.ss-demo__transcript:empty{display:none}.ss-demo__transcript p{margin:0 0 var(--space-2)}