:root{--demo-scale:.62;--demo-gap:12px;--demo-radius:26px;--demo-hit:44px;--demo-accent:#79a2ff;--demo-ink:#ededf0;--demo-muted:#969ca9;--demo-line:#343844;--demo-ease:cubic-bezier(.22,.9,.24,1)}.demo-symbols,.demo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.scene .hero-actions{padding:24px 24px 0;border-top:1px solid var(--line);margin-top:20px}.scene-trial{padding:0 20px 24px}.demo-stage{padding:0 24px 0;position:relative}.demo-strip{display:flex;align-items:flex-start;justify-content:center;min-width:136px;min-height:44px;margin:0 auto;background:none;border:0;padding:0;cursor:pointer}.demo-strip span{width:136px;height:5px;background:#9da7bc;border-radius:0 0 4px 4px;transition:background .2s}.demo-strip:hover span{background:var(--demo-accent)}.demo-panel{position:relative;display:flex;max-width:780px;margin:0 auto;background:#000;border:1px solid var(--demo-line);border-radius:var(--demo-radius);padding:12px 22px 24px 8px;min-height:302px;height:302px;text-align:left;transition:opacity .2s var(--demo-ease),transform .2s var(--demo-ease);overflow:hidden}.demo-panel.is-collapsed{opacity:0;transform:translateY(-12px);visibility:hidden}.demo-rail{position:relative;display:flex;flex-direction:column;flex:none;width:56px;gap:0;align-items:center}.demo-tab{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;flex:none;padding:0;border:0;border-radius:11px;background:none;color:var(--demo-muted);cursor:pointer}.demo-marker{position:absolute;left:6px;top:0;width:44px;height:44px;border-radius:11px;background:#20232c;transition:transform .25s var(--demo-ease)}.demo-tab.active{color:var(--demo-ink)}.demo-tab:hover{color:var(--demo-ink)}.demo-tab svg,.demo-panel svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}.demo-dot{position:absolute;right:7px;bottom:5px;width:6px;height:6px;border-radius:50%;background:#72bf78}.demo-content{flex:1;min-width:0;padding-left:12px}.demo-view{height:100%;display:flex;flex-direction:column;min-width:0}.demo-view[hidden]{display:none}.demo-heading{display:flex;align-items:center;gap:12px;min-height:44px;flex:none}.demo-heading h2{font-size:16px;line-height:1.4;letter-spacing:0;margin:0;flex:1;white-space:nowrap;font-weight:650}.demo-text{background:none;border:0;padding:8px 0;min-height:44px;color:var(--demo-muted);font:inherit;font-size:12px;white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:5px}.demo-text:hover{color:var(--demo-ink)}.demo-text svg{width:15px;height:15px}.demo-meta{font-size:11px;color:var(--demo-muted)}.demo-list{overflow:auto;min-height:0;flex:1;scrollbar-width:thin;scrollbar-color:#2b2d35 transparent}.demo-task{display:flex;align-items:center;gap:12px;min-height:52px;border-radius:14px;padding:2px 4px 2px 0;cursor:grab;border:1px solid transparent}.demo-task:hover,.demo-task.done{background:transparent}.demo-task-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;border:0;background:none;color:#111c15;cursor:pointer;position:relative}.demo-task-toggle:before{content:'';width:21px;height:21px;border:1.5px solid #626977;border-radius:50%;position:absolute}.demo-task-toggle svg{opacity:0;position:relative;width:15px;height:15px;z-index:1}.demo-task.done .demo-task-toggle:before{background:#72bf78;border-color:#72bf78}.demo-task.done .demo-task-toggle svg{opacity:1}.demo-task-label{font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.demo-task.done .demo-task-label{color:#828895;text-decoration:line-through}.demo-icon{background:none;border:0;color:var(--demo-muted);width:44px;height:44px;flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:12px}.demo-icon:hover{background:#242730;color:var(--demo-ink)}.demo-remove{opacity:.4}.demo-task:hover .demo-remove,.demo-remove:focus-visible{opacity:1}.demo-task.dragging{opacity:.4}.demo-task.drop-target{border-top-color:var(--demo-accent)}.demo-form{display:flex;gap:8px;padding:0 0 8px;flex:none}.demo-form[hidden]{display:none}.demo-form input{font:inherit;font-size:13px;min-width:0;width:100%;height:44px;background:#191c23;border:1px solid var(--demo-line);color:var(--demo-ink);border-radius:9px;padding:10px 12px}.demo-form .demo-text{padding:0 6px}.demo-panel button:focus-visible,.demo-strip:focus-visible,.demo-panel input:focus-visible{outline:2px solid var(--demo-accent);outline-offset:-2px}.demo-record{display:flex;flex-direction:column;text-align:left;width:100%;min-height:52px;padding:10px 12px;gap:3px;font:inherit;font-size:13px;background:none;border:0;border-radius:12px;color:var(--demo-ink);cursor:pointer;overflow-wrap:anywhere}.demo-record:hover,.demo-record:focus-visible{background:#1b1e25}.demo-record strong{font-size:13px;font-weight:600}.demo-record span{font-size:12px;color:var(--demo-muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.demo-help,.demo-empty{font-size:12px;color:var(--demo-muted);margin:12px 0}.demo-feedback{max-width:780px;margin:16px auto 0;padding:0 24px;text-align:left}.demo-feedback>label{font-size:11px;color:var(--demo-muted);display:block}.demo-feedback output{display:block;font-size:13px;color:var(--demo-ink);overflow-wrap:anywhere;margin:4px 0;min-height:24px}.demo-feedback p{font-size:11px;color:var(--demo-muted);margin:6px 0;min-height:32px}.demo-music{display:flex;align-items:stretch;gap:20px;margin-top:6px}.demo-cover{display:flex;align-items:center;justify-content:center;width:104px;height:104px;flex:none;border-radius:14px;background:linear-gradient(135deg,#24324e,#151c2a);color:var(--demo-accent)}.demo-cover svg{width:40px;height:40px}.demo-track{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1;font-size:12px;color:var(--demo-muted)}.demo-track strong{font-size:16px;color:var(--demo-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.demo-timeline{display:flex;align-items:center;gap:8px;margin-top:auto;font-size:10px}.demo-timeline progress{width:100%;height:4px;appearance:none;border:0;background:#343844;border-radius:4px;overflow:hidden}.demo-timeline progress::-webkit-progress-bar{background:#343844}.demo-timeline progress::-webkit-progress-value{background:var(--demo-accent)}.demo-controls{display:flex;justify-content:center;align-items:center;gap:16px;margin-top:12px}.demo-play{border-radius:50%;background:#ededf0;color:#0c0d10}.demo-play:hover{background:#fff;color:#0c0d10}.demo-vpn{display:flex;flex-direction:column;align-items:center;gap:10px;margin:auto 0;font-size:13px}.demo-vpn span{color:var(--demo-muted);font-size:11px;text-align:center}.demo-vpn-button{width:76px;height:76px;border-radius:50%;border:1px solid var(--demo-line);background:#191c23;color:#8b92a3;cursor:pointer;display:flex;align-items:center;justify-content:center}.demo-vpn-button svg{width:32px;height:32px}.demo-vpn-button.on{color:var(--demo-accent);background:#192840;border-color:#557ac1}.demo-video-layout{display:flex;align-items:center;gap:20px;min-height:0;flex:1}.demo-video-frame{position:relative;overflow:hidden;aspect-ratio:16/9;width:52%;max-height:100%;border-radius:12px;background:#182333;display:flex;align-items:center;justify-content:center;flex:none}.demo-video-frame>span{position:absolute;bottom:10px;font-size:10px;color:#b6c5de}.demo-video-play{position:relative;background:#0008;color:white;border-radius:50%;z-index:1}.demo-video-copy{font-size:13px;min-width:0}.demo-video-copy p{font-size:12px;color:var(--demo-muted);margin:6px 0}.video-wide .demo-video-frame{width:auto;max-width:100%;height:100%;margin:auto}.video-wide .demo-video-copy{display:none}@media(max-width:760px){.demo-stage{padding:0 12px}.demo-panel{height:318px;min-height:318px;border-radius:20px;padding:12px 10px 18px 4px}.demo-content{padding-left:4px}.demo-rail{width:44px;gap:4px}.demo-tab{height:44px;min-height:44px;width:44px}.demo-marker{width:44px;height:44px;left:0}.demo-heading{gap:8px;flex-wrap:wrap;margin-bottom:6px;min-height:44px}.demo-heading h2{font-size:14px;min-width:100%;flex:none}.demo-heading>.demo-meta{margin-top:-2px}.demo-heading .demo-text{min-height:44px;padding:4px 0;font-size:10px}.demo-heading h2:only-child{min-width:0}.demo-task{gap:2px}.demo-task-label{font-size:12px}.demo-task-toggle{width:44px;height:44px}.demo-remove{width:44px;height:44px}.demo-task-toggle:before{width:18px;height:18px}.demo-task-toggle svg{width:13px;height:13px}.demo-record{font-size:12px;padding:10px 4px}.demo-record strong{font-size:12px}.demo-feedback{padding:0 18px}.scene .hero-actions{gap:8px;padding:20px 16px 0}.demo-cover{width:64px;height:64px}.demo-cover svg{width:28px;height:28px}.demo-music{gap:10px;margin-top:6px}.demo-track strong{font-size:13px}.demo-track>span{font-size:10px}.demo-timeline{margin-top:12px;gap:4px}.demo-controls{margin-top:16px;gap:10px}.demo-video-layout{flex-direction:column;justify-content:center;gap:12px}.demo-video-frame{width:100%;max-height:140px}.demo-video-copy{font-size:11px}.demo-video-copy p{display:none}.demo-video-copy .demo-meta{font-size:10px}.video-wide .demo-video-frame{width:100%;height:auto;max-height:100%}.demo-form{gap:4px}.demo-form input{padding:8px;font-size:11px}.demo-form .demo-text{font-size:10px}.demo-vpn-button{width:64px;height:64px}}@media(prefers-reduced-motion:reduce){.demo-panel,.demo-marker,.demo-strip span{transition:none}}
@media(max-width:760px){.demo-task-label{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.4;overflow-wrap:anywhere}}

/* Standalone interactive TopPanel; reserved height prevents CTA jumps. */
#panel-demo.scene{background:none;border:0;border-radius:0;overflow:visible;margin-top:40px}
.demo-stage{position:relative;height:calc(302px * var(--demo-scale));padding:0}
.demo-stage .demo-panel{position:absolute;top:0;left:50%;width:calc(100% - 24px);max-width:780px;transform:translateX(-50%) scale(var(--demo-scale));transform-origin:50% 0;box-shadow:0 16px 48px #0005}
.demo-stage .demo-panel.is-collapsed{transform:translateX(-50%) scale(var(--demo-scale)) translateY(-12px);pointer-events:none}
.demo-stage .demo-strip{position:absolute;top:0;left:50%;transform:translateX(-50%);z-index:2}
.demo-stage .demo-strip span{background:#000;width:calc(136px * var(--demo-scale));height:5px;border:1px solid #343844;border-top:0;box-shadow:none}
.demo-stage .demo-strip:hover span{border-color:var(--demo-accent)}
.demo-stage .demo-strip[aria-expanded=true]{pointer-events:none}
.demo-stage .demo-strip[aria-expanded=true] span{opacity:0}
.demo-hint{margin:20px auto 0;max-width:480px;padding:0 12px;font-size:12px;color:var(--demo-muted)}
#panel-demo .hero-actions{border:0;margin-top:24px;padding-top:0}
#panel-demo .scene-trial{padding-bottom:0}
@media(max-width:760px){.demo-stage{height:318px}.demo-stage .demo-panel{width:100%}#panel-demo.scene{margin-top:32px}.demo-hint{font-size:11px;max-width:280px}}

.demo-video-frame{background:#000}.demo-video-frame video{width:100%;height:100%;display:block;object-fit:contain;border-radius:inherit}.demo-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#0009;z-index:2}.demo-video-frame.started .demo-video-play{display:none}.demo-video-error{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:16px;font-size:12px;color:#fff;background:#000c}.demo-video-error[hidden]{display:none}.demo-toast{position:absolute;right:22px;bottom:12px;font-size:11px;padding:6px 10px;background:#171d29;color:#d9e4f5;border-radius:8px;pointer-events:none}.demo-toast[hidden]{display:none}@media(max-width:760px){:root{--demo-scale:1}.demo-toast{bottom:6px;right:10px;font-size:10px}}

/* A neutral demo field remains visible when TopPanel is collapsed. */
:root{--demo-field:#202126;--cta-neon:#ad78ff;--cta-neon-glow:rgba(155,76,255,.24)}
.demo-stage{max-width:680px;margin:0 auto;height:calc(302px * var(--demo-scale) + 40px);background:var(--demo-field);border-radius:18px;box-shadow:inset 0 0 0 1px #ffffff0a}
.demo-stage .demo-panel{width:780px;max-width:none}
#panel-demo .hero-actions{flex-direction:column;gap:12px;align-items:center;padding-left:16px;padding-right:16px}
#panel-demo .hero-actions .button{width:300px;max-width:100%;min-height:48px;background:#08070b;color:#eee4ff;border:1px solid var(--cta-neon);box-shadow:0 0 18px var(--cta-neon-glow),inset 0 0 12px rgba(155,76,255,.06);transition:background .2s,border-color .2s,box-shadow .2s}
#panel-demo .hero-actions .button:hover{background:#130c20;border-color:#d0acff;box-shadow:0 0 26px rgba(155,76,255,.38),inset 0 0 16px rgba(155,76,255,.1)}
#panel-demo .hero-actions .button:focus-visible{outline-color:var(--cta-neon)}
@media(max-width:760px){.demo-stage{height:342px;border-radius:20px}.demo-stage .demo-panel{width:100%}}

/* Dark violet capsules with a single restrained neon outline. */
#panel-demo .hero-actions .button{position:relative;min-height:56px;padding:14px 24px;border:1px solid #8e45d4;border-radius:999px;background:linear-gradient(180deg,#100b16 0%,#170d21 55%,#2a1041 100%);color:#faf2ff;box-shadow:0 0 20px rgba(154,44,255,.24),inset 0 -4px 12px rgba(117,28,192,.12)}
#panel-demo .hero-actions .button:hover{border-color:#b86af5;background:linear-gradient(180deg,#180e23 0%,#21112f 55%,#381451 100%);box-shadow:0 0 25px rgba(170,65,255,.34)}

/* Website demo mirrors the application's video actions. */
.demo-vpn-button.on{color:#72bf78;background:#101e13;border:2px solid #72bf78;box-shadow:0 0 18px rgba(114,191,120,.12)}
.demo-vpn-button.on + #demo-vpn-status{color:#8ad58f}
#demo-view-video{position:relative}.demo-video-layout{position:relative}
.demo-video-frame iframe{width:100%;height:100%;border:0;display:block;border-radius:inherit;background:#000}
.demo-video-frame > [hidden],#demo-video-empty[hidden],#demo-floating-notice[hidden],#demo-video-link-form[hidden]{display:none!important}
.demo-video-icons{display:none}.video-wide.has-video .demo-video-icons{display:flex;position:absolute;right:0;top:50%;transform:translateY(-50%);flex-direction:column;gap:4px;width:32px}
.demo-video-icons .demo-icon{width:32px;height:32px;border-radius:8px}.demo-video-icons svg{width:18px;height:18px}
#demo-view-video .on{color:var(--demo-accent)}#demo-view-video button:disabled{opacity:.3;cursor:default}
.video-wide .demo-heading .demo-text{display:none}.video-wide .demo-video-copy{display:none}
.video-wide .demo-video-frame{width:min(var(--demo-user-width,380px),calc(100% - 44px));height:auto;margin:0 44px 0 auto;flex:none}
.demo-video-small-actions{display:flex;gap:4px;margin-top:12px}.demo-video-small-actions .demo-icon{width:32px;height:32px}
#demo-video-grip{display:none;position:absolute;right:2px;bottom:2px;z-index:3;width:24px;height:24px;border-radius:6px;cursor:nwse-resize;color:#fff;opacity:.35;filter:drop-shadow(0 1px 2px #000);touch-action:none;background:#0005}
.video-wide #demo-video-grip{display:flex}#demo-video-grip:hover,.resizing #demo-video-grip{opacity:1}
.video-wide .demo-video-frame:hover{outline:1.5px solid #ffffff59;box-shadow:0 0 0 1px #0008}
#demo-video-return{display:none;position:absolute;left:8px;top:8px;z-index:4;width:32px;height:32px;background:#000b;color:#fff}
#demo-video-empty{border:1px dashed #44404c;background:none;color:var(--demo-muted);border-radius:12px;width:100%;height:100%;font:inherit;font-size:13px;cursor:pointer}
#demo-view-video:not(.has-video) .demo-video-copy,#demo-view-video:not(.has-video) .demo-heading #demo-video-size,#demo-view-video:not(.has-video) .demo-heading #demo-video-pin,#demo-view-video:not(.has-video) .demo-heading #demo-video-watch{display:none}
#demo-video-link-form{position:absolute;inset:44px 0 0;z-index:5;display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid #44324f;border-radius:12px;background:#131017;font-size:13px;box-shadow:0 8px 20px #0008}
#demo-video-link-form input{min-width:0;width:100%;height:40px;border:1px solid #584369;border-radius:7px;background:#09070d;color:#eee;font:inherit;padding:8px}
#demo-video-link-form>div{display:flex;gap:14px;flex-wrap:wrap}#demo-video-link-error{font-size:11px;color:#f8a8bc;margin:0}

.video-wide .demo-video-layout{padding-right:44px;justify-content:center}.video-wide .demo-video-frame{width:min(var(--demo-user-width,380px),100%);margin:0;max-width:100%}
@media(max-width:760px){.video-wide .demo-video-layout{padding-right:40px}.video-wide .demo-video-frame{width:min(var(--demo-user-width,380px),100%);margin:0}}

/* Player geometry and watch visibility follow the desktop renderer. */
.demo-stage .demo-panel{width:var(--player-panel-w,780px);height:var(--player-panel-h,302px);min-height:0;transition:width .36s var(--demo-ease),height .36s var(--demo-ease),background-color .25s,opacity .2s var(--demo-ease),transform .2s var(--demo-ease)}
.demo-is-video .demo-rail{width:56px;gap:2px}.demo-is-video .demo-tab{width:34px;height:34px;min-height:34px}.demo-is-video .demo-tab svg{width:18px;height:18px}.demo-is-video .demo-marker{width:34px;height:34px;left:11px}
.demo-marker{background:#1a1a1f;border:0;box-shadow:none}
.demo-tab:focus-visible{outline:0!important}.demo-tab:focus-visible svg{filter:drop-shadow(0 0 3px #b8b8c8);color:#fff}
.demo-is-video #demo-view-video,.demo-is-video .demo-video-layout{position:static!important}
.demo-is-video .demo-video-frame{position:absolute;left:var(--player-video-x);top:var(--player-video-y);width:var(--player-video-w);height:var(--player-video-h);max-width:none;max-height:none;margin:0;aspect-ratio:auto;background:#000;transition:left .36s var(--demo-ease),top .36s var(--demo-ease),width .36s var(--demo-ease),height .36s var(--demo-ease)}
.demo-is-video .demo-video-copy{position:absolute;left:400px;right:22px;top:86px}
.demo-video-large #demo-view-video>.demo-heading{visibility:hidden;pointer-events:none}
.demo-video-large.has-video .demo-video-icons,.demo-video-large .has-video .demo-video-icons{display:flex;position:absolute;left:var(--player-icons-x);right:auto;top:var(--player-icons-y);width:32px;transform:translateY(-50%);transition:left .36s var(--demo-ease),top .36s var(--demo-ease)}
.demo-stage.demo-watch .demo-panel.is-collapsed{opacity:1;visibility:visible;transform:translateX(-50%) scale(var(--demo-scale));background-color:transparent;border-color:transparent;box-shadow:none;pointer-events:none}
.demo-watch.is-collapsed .demo-rail,.demo-watch.is-collapsed .demo-content>:not(#demo-view-video),.demo-watch.is-collapsed #demo-view-video>*:not(.demo-video-layout),.demo-watch.is-collapsed .demo-video-copy,.demo-watch.is-collapsed .demo-video-icons{opacity:0;visibility:hidden;pointer-events:none}
.demo-watch.is-collapsed .demo-video-frame{visibility:visible;opacity:1;pointer-events:auto}
.demo-watch #demo-floating-notice{display:none!important}.demo-watch #demo-video-return{display:flex;width:26px;height:26px;left:6px;top:6px;border-radius:8px}
.watch-active.is-detached .demo-heading,.watch-active.is-detached .demo-video-copy,.watch-active.is-detached .demo-video-icons{visibility:hidden;pointer-events:none}
.demo-panel.resizing,.demo-panel.resizing *{transition:none!important}
@media(max-width:760px){.demo-stage .demo-panel{width:var(--player-panel-w,100%);height:var(--player-panel-h,318px)}.demo-is-video .demo-rail{width:44px;gap:4px}.demo-is-video .demo-tab{width:44px;height:44px;min-height:44px}.demo-is-video .demo-marker{left:0;width:44px;height:44px}.demo-is-video .demo-video-copy{left:60px;right:10px;top:230px}.demo-video-large .has-video .demo-video-icons{flex-direction:row;gap:4px;top:var(--player-icons-y);transform:none;width:auto}.demo-video-large .demo-video-copy{display:none}}
@media(prefers-reduced-motion:reduce){.demo-stage .demo-panel,.demo-is-video .demo-video-frame,.demo-video-large .demo-video-icons{transition:none}}

.watch-active.is-detached{height:0!important;min-height:0}

@media(min-width:761px){.demo-is-video .demo-rail{gap:calc(2px * var(--player-controls-scale,1))}.demo-is-video .demo-tab{width:calc(34px * var(--player-controls-scale,1));height:calc(34px * var(--player-controls-scale,1));min-height:calc(34px * var(--player-controls-scale,1));border-radius:calc(11px * var(--player-controls-scale,1))}.demo-is-video .demo-tab svg{width:calc(18px * var(--player-controls-scale,1));height:calc(18px * var(--player-controls-scale,1))}.demo-is-video .demo-marker{width:calc(34px * var(--player-controls-scale,1));height:calc(34px * var(--player-controls-scale,1));left:calc((56px - 34px * var(--player-controls-scale,1)) / 2);border-radius:calc(11px * var(--player-controls-scale,1))}.demo-video-large .has-video .demo-video-icons{gap:calc(4px * var(--player-controls-scale,1))}.demo-video-large .demo-video-icons .demo-icon{width:calc(32px * var(--player-controls-scale,1));height:calc(32px * var(--player-controls-scale,1))}.demo-video-large .demo-video-icons svg{width:calc(18px * var(--player-controls-scale,1));height:calc(18px * var(--player-controls-scale,1))}}

/* VPN uses the application's horizontal power button / status layout. */
.demo-vpn{flex-direction:row;justify-content:flex-start;align-items:center;gap:24px;margin:auto 0;text-align:left}
.demo-vpn-button{width:120px;height:120px;flex:none;background:#1a1a1f;border:1.5px solid #34343c;color:#75757f;transition:background-color .25s,border-color .25s,color .25s}.demo-vpn-button svg{width:48px;height:48px}
.demo-vpn-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;height:120px;padding:3px 0}.demo-vpn-info strong{font-size:20px;line-height:1.3}.demo-vpn-info span{font-size:15px;line-height:1.35;margin-top:6px;text-align:left}.demo-vpn-info .demo-text{margin-top:auto;font-size:14px;padding:0;min-height:36px}
#demo-view-tasks .demo-heading{gap:12px}#demo-clear{margin-left:24px;padding-left:8px}
.demo-task.done .demo-task-toggle:before{background:#4ade80;border-color:#4ade80;box-shadow:0 0 10px #4ade8045}.demo-task.done .demo-task-toggle{color:#082613}
/* Real cover, dark transport and a separate volume control, like the desktop player. */
#demo-view-music .demo-music{gap:24px;margin-top:6px}.demo-cover{position:relative;overflow:hidden;width:148px;height:148px;display:block;background:#1a1a1f;border-radius:14px}
.demo-cover img{position:absolute;max-width:none;width:589.6552%;height:auto;left:-59.7701%;top:-45.977%;display:block;pointer-events:none}
.demo-track{height:148px;gap:0}.demo-track strong{font-size:18px;line-height:1.3;font-weight:600}.demo-track>span{font-size:15px;line-height:1.35;margin-top:4px}
.demo-timeline{font-size:12px;gap:10px;line-height:15px;margin-top:auto;font-variant-numeric:tabular-nums}.demo-timeline>span{min-width:32px;flex:none}#demo-duration{text-align:right}
#demo-progress,#demo-volume{--range-fill:0%;appearance:none;-webkit-appearance:none;min-width:0;flex:1;width:100%;height:28px;margin:0;border:0;outline-offset:3px;background:transparent;cursor:pointer}
#demo-progress::-webkit-slider-runnable-track,#demo-volume::-webkit-slider-runnable-track{height:6px;border-radius:4px;background:linear-gradient(to right,#96949b 0 var(--range-fill),#2a2a31 var(--range-fill) 100%)}
#demo-progress::-webkit-slider-thumb,#demo-volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:6px;margin-top:0;border:0;border-radius:4px;background:#96949b}
#demo-progress::-moz-range-track,#demo-volume::-moz-range-track{height:6px;border-radius:4px;background:#2a2a31}#demo-progress::-moz-range-progress,#demo-volume::-moz-range-progress{height:6px;border-radius:4px;background:#96949b}#demo-progress::-moz-range-thumb,#demo-volume::-moz-range-thumb{width:14px;height:6px;border:0;border-radius:4px;background:#96949b}
.demo-controls{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);gap:18px;margin:0}.demo-controls .demo-icon{color:#b4b3bc}.demo-controls svg{fill:currentColor;stroke:none;width:24px;height:24px}.demo-controls .demo-play{width:56px;height:56px;background:#1f1f26;color:#ededf0;border-radius:50%}.demo-controls .demo-play:hover{background:#2b2b33;color:#fff}.demo-controls .demo-play svg{width:30px;height:30px}
.demo-volume{position:absolute;right:22px;bottom:24px;height:56px;display:flex;align-items:center;gap:8px;width:174px}.demo-volume .demo-icon{width:28px;height:40px;color:#b4b3bc}#demo-volume{width:138px;flex:1}#demo-volume::-webkit-slider-runnable-track{height:4px}#demo-volume::-webkit-slider-thumb{height:4px;width:10px}#demo-volume::-moz-range-track,#demo-volume::-moz-range-progress,#demo-volume::-moz-range-thumb{height:4px}
@media(max-width:760px){.demo-vpn{gap:14px}.demo-vpn-button{width:96px;height:96px}.demo-vpn-button svg{width:38px;height:38px}.demo-vpn-info{height:110px}.demo-vpn-info strong{font-size:15px}.demo-vpn-info span{font-size:11px}.demo-vpn-info .demo-text{font-size:12px;min-height:44px}#demo-clear{margin-left:14px;padding-left:0}#demo-view-tasks .demo-heading h2{min-width:100%}#demo-view-tasks .demo-heading .demo-text{font-size:10px}#demo-view-tasks .demo-heading{gap:8px}.demo-cover{width:84px;height:84px}.demo-track{height:84px}.demo-track strong{font-size:13px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}.demo-track>span{font-size:11px}#demo-view-music .demo-music{gap:12px}.demo-timeline{gap:4px;font-size:10px}.demo-timeline>span{min-width:24px}.demo-controls{bottom:80px;gap:10px}.demo-controls .demo-play{width:48px;height:48px}.demo-volume{bottom:20px;left:60px;right:12px;width:auto;height:44px}.demo-volume .demo-icon{height:44px;width:44px}#demo-volume{height:44px}.demo-vpn-info{flex:1}}
@media(prefers-reduced-motion:reduce){.demo-vpn-button{transition:none}}

#demo-vpn-toggle:focus-visible{outline:2px solid currentColor;outline-offset:-2px}

.demo-cover img{position:static;width:100%;height:100%;object-fit:cover}.demo-track-source{font-size:11px;color:var(--demo-muted);align-self:flex-start;margin-top:8px;text-decoration:none}.demo-track-source:hover{color:var(--demo-ink)}#demo-audio{display:none}#demo-music-error{position:absolute;bottom:4px;left:76px;right:22px;margin:0;font-size:10px;color:#f8a8bc}#demo-music-error[hidden]{display:none}#demo-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.demo-record{user-select:text}@media(max-width:760px){.demo-track-source{font-size:10px;line-height:1.4;margin-top:10px;max-width:100%}#demo-music-error{left:60px;font-size:9px}}
.demo-tab{outline:none}