@font-face{font-family:Archivo;src:url("assets/fonts/Archivo-latin.woff2") format("woff2");font-style:normal;font-weight:400 800;font-display:swap}
:root{font-family:Arial,"Helvetica Neue",Helvetica,system-ui,sans-serif;color:#111111;background:#F4F6F7;font-synthesis:none;--teal:#007C85;--mint:#00C3D0;--pink:#FF2D55}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:1px solid #D9DDE0;background:#fff;border-radius:6px;color:inherit;padding:9px 14px}button:hover{background:#E5F7F9}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #00C3D0;outline-offset:3px}button:disabled{opacity:.4;cursor:default}a{color:inherit;text-underline-offset:4px}[hidden]{display:none!important}.site-header{height:84px;padding:0 5vw;border-bottom:1px solid #D9DDE0;display:flex;align-items:center;justify-content:space-between;background:#fff}.site-header a{display:flex;align-items:center;gap:14px;text-decoration:none}.brand-mark{display:block;width:48px;height:auto;flex-shrink:0;object-fit:contain}.site-header b{font-size:22px}.header-divider{height:24px;border-left:1px solid #D9DDE0;margin:0 4px}.review-label{font-size:12px;color:#68727A}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:700;color:var(--teal);margin:0 0 12px}.intro{margin:64px 0 44px}.intro h1{font-size:clamp(40px,5vw,72px);line-height:1.04;letter-spacing:-.055em;margin:0 0 24px;font-weight:650}.intro>p:last-child{font-size:19px;line-height:1.55;color:#3A4046}.intro:after{content:"";display:block;width:80px;height:5px;background:linear-gradient(90deg,var(--mint) 70%,var(--pink) 70%);margin-top:32px}#dashboard{max-width:1240px;margin:auto;padding:0 30px}.workflow-row{display:grid;grid-template-columns:260px 1fr auto;gap:32px;align-items:center;padding:28px 0;border-top:1px solid #D9DDE0}.workflow-row img{width:260px;aspect-ratio:16/9;object-fit:cover;border:1px solid #D9DDE0;border-radius:3px}.workflow-row h2{font-size:26px;font-weight:650;letter-spacing:-.025em;margin:8px 0}.workflow-row p{line-height:1.5;max-width:510px;color:#3A4046;font-size:15px;margin:8px 0}.workflow-meta{font-size:11px;letter-spacing:.1em;color:var(--teal);text-transform:uppercase;font-weight:750}.workflow-actions{display:flex;flex-direction:column;gap:9px;min-width:145px}.primary{background:#D51F47;color:#fff;border-color:#D51F47}.primary:hover{background:#BB183D}.dashboard-footer{border-top:1px solid #D9DDE0;margin:12px 0 0;padding:25px 0 40px;display:flex;justify-content:space-between;font-size:13px;color:#68727A}#player{max-width:1680px;margin:auto;padding:24px 28px}.player-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:20px}.player-heading h1{font-size:24px;margin:0;letter-spacing:-.025em}.player-heading .eyebrow{margin-bottom:6px}.player-options{display:flex;gap:8px;align-items:center;font-size:13px}.player-options>a{margin-left:10px}#presentation{background:#07131B;border-radius:6px;overflow:hidden;box-shadow:0 9px 28px #0B1A2318}#stage-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden}#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;background:#0B1A23}#viewport{position:relative;width:1920px;height:900px;overflow:hidden;background:#111}#app-camera{position:absolute;width:1600px;height:750px;transform-origin:0 0;transform:scale(1.2)}#app-frame{width:1600px;height:750px;border:0;background:#0B1A23;pointer-events:none}#hotspot{position:absolute;border:3px solid #00C3D0;border-radius:8px;box-shadow:0 0 0 3px #003D4680;background:#00C3D010;z-index:10;padding:0;transition:box-shadow .15s}#hotspot:hover{background:#00C3D028;box-shadow:0 0 0 5px #00C3D04d}#loading{position:absolute;inset:0;display:grid;place-items:center;color:#ddd;font-size:24px;background:#0B1A23;z-index:20}#guided-label{position:absolute;top:6px;right:8px;z-index:12;background:#0B1A23dd;color:#B2DCE4;font-size:10px;letter-spacing:.1em;padding:5px 8px;border-radius:3px;pointer-events:none}#annotation{height:180px;display:flex;gap:32px;padding:26px 40px;color:#fff;border-top:4px solid var(--mint);background:#0B1A23}.step-count{width:75px;height:75px;border:1px solid #FF2D55;color:#FFAAC0;font-size:38px;font-weight:400;display:grid;place-items:center;border-radius:50%;flex-shrink:0;margin-top:12px}#stage-chapter{font-size:14px;text-transform:uppercase;letter-spacing:.14em;color:#00C3D0;margin:0 0 5px}#stage-title{font-size:34px;line-height:1.17;letter-spacing:-.02em;margin:0 0 10px;font-weight:600}#stage-detail{font-size:23px;line-height:1.4;color:#D3E7EB;margin:0;max-width:1690px}#voice-wave{position:absolute;right:28px;bottom:20px;display:flex;align-items:center;gap:5px;background:#0B1A23ed;border:1px solid #386876;border-radius:7px;padding:14px 18px;color:white;z-index:14;height:65px}#voice-wave span{display:block;width:5px;height:12px;background:#00C3D0;border-radius:3px}#voice-wave span:nth-child(2n){background:#FF2D55}#voice-wave b{font-size:16px;margin-left:12px;font-weight:500}.transport{padding:14px 20px 18px;color:#E8F8FA}.timeline-row{display:flex;align-items:center;gap:14px}.timeline-row input{flex:1;accent-color:var(--mint);cursor:pointer}#time{font-size:12px;font-variant-numeric:tabular-nums;min-width:95px;text-align:right}.transport-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:12px}.transport-buttons,.mode-controls{display:flex;gap:8px;align-items:center}.transport button{color:#E8F8FA;background:#123A49;border-color:#386876;padding:8px 13px;font-size:13px}.transport button.primary{background:#D51F47;color:#FFFFFF;border-color:var(--pink);min-width:75px;font-weight:600}.mode-controls{gap:20px;font-size:13px}.mode-controls label{display:flex;align-items:center;gap:6px}.mode-controls select{background:#123A49;color:#E8F8FA;border:1px solid #386876;border-radius:4px;padding:4px}#play-state{font-size:12px;color:#A8CBD4;min-width:100px;text-align:right}.below-player{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#68727A;margin:8px 0 0}.below-player p{margin:8px 0}#step-list{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:20px 0}#step-list button{text-align:left;display:flex;gap:12px;align-items:center;font-size:13px;line-height:1.4;padding:13px}#step-list button span{font-variant-numeric:tabular-nums;color:#68727A}#step-list button[aria-current=true]{border-color:var(--teal);background:#E5F7F9}#presentation:fullscreen{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:0}#presentation:fullscreen #stage-wrap{width:min(100vw,calc((100vh - 110px)*16/9));flex-shrink:0}#presentation:fullscreen .transport{width:100%;max-width:1600px;flex-shrink:0}@media(max-width:800px){.site-header{height:64px;padding:0 18px}.review-label{display:none}.site-header a{gap:10px;font-size:12px}#dashboard{padding:0 20px}.intro{margin:40px 0 30px}.intro>p:last-child{font-size:16px}.workflow-row{grid-template-columns:110px 1fr;gap:16px}.workflow-row img{width:110px}.workflow-row h2{font-size:21px}.workflow-row p{font-size:14px}.workflow-actions{grid-column:1/-1;flex-direction:row}.workflow-actions button{flex:1}.dashboard-footer{display:block;line-height:2}.dashboard-footer a{display:block}#player{padding:18px 10px}.player-heading{align-items:flex-start;flex-direction:column;gap:12px}.player-heading h1{font-size:21px}.player-options{width:100%;font-size:11px}.player-options>a{margin-left:auto}.transport{padding:8px 10px 12px}.transport-row{flex-wrap:wrap;gap:10px}.transport-buttons{width:100%;justify-content:space-between}.transport button{padding:7px 10px}.mode-controls{font-size:11px;gap:12px}#play-state{font-size:10px;min-width:50px}.below-player{align-items:flex-start;gap:20px}.below-player p{max-width:240px}#step-list{grid-template-columns:1fr}.timeline-row{gap:5px}#time{font-size:10px;min-width:76px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Browser chrome is part of the presentation; the app below is the captured HTML. */
#browser-chrome{height:84px;width:1920px;background:#dfe4e8;color:#39434d;position:absolute;inset:0 0 auto;font-family:Arial,sans-serif;z-index:16;user-select:none}.browser-tabs{height:42px;display:flex;align-items:end;gap:7px;padding-left:8px;background:#cfd7df}.tab-search{background:#e2e7ec;border-radius:7px;height:30px;width:30px;display:grid;place-items:center;align-self:center;margin-right:5px}.browser-tab{height:36px;width:270px;display:flex;align-items:center;gap:10px;padding:0 13px;font-size:14px;border-radius:10px 10px 0 0;background:transparent}.browser-tab.active{background:#f8fafd}.browser-tab span{flex:1}.browser-tab b{font-size:19px;font-weight:400}.browser-tab i{font-style:normal;font-size:13px;font-weight:700;border-radius:3px;width:17px;height:17px;display:grid;place-items:center}.vopro-favicon{color:#00C3D0;background:#0B1A23}.procore-favicon{color:#fff;background:#ff5100}.new-tab{align-self:center;font-size:24px;margin-left:6px}.window-controls{margin-left:auto;display:flex;align-self:stretch}.window-controls span{width:48px;display:grid;place-items:center;font-size:16px}.browser-toolbar{height:42px;display:flex;align-items:center;gap:20px;padding:0 18px;background:#f8fafd;font-size:24px}.browser-toolbar>.inactive{color:#9eabb5}.address-bar{border-radius:22px;background:#e8edf3;display:flex;align-items:center;gap:12px;flex:1;padding:5px 15px;height:32px;color:#253036;font-size:15px}.address-bar svg{width:19px;height:19px;fill:none;stroke:#4d5860;stroke-width:1.5}.address-star{margin-left:auto;font-size:23px}.browser-profile{border-radius:50%;width:27px;height:27px;display:grid;place-items:center;color:#fff;background:#445773;font-size:14px}#app-camera{top:84px;height:680px}#app-frame{height:680px}#guided-label{top:89px}#demo-cursor{position:absolute;left:0;top:0;z-index:17;width:30px;height:38px;pointer-events:none;filter:drop-shadow(0 2px 1px #0006)}#demo-cursor svg{width:30px;height:38px}#demo-cursor i{position:absolute;left:-11px;top:-11px;border:3px solid #00C3D0;border-radius:50%;width:32px;height:32px;opacity:0}#demo-cursor.clicking i{opacity:.8}#hotspot{border-width:2px;background:transparent;box-shadow:0 0 0 2px #003D4633}
/* Photo form itself is styled inside the captured document. */

/* Desktop composition: the supplied wallpaper surrounds two persistent windows. */
#viewport{background:#233645;isolation:isolate}
#desktop-wallpaper{position:absolute;inset:0;background:url('assets/desktop-wallpaper.jpg') center 51%/cover no-repeat}
#desktop-shortcuts{position:absolute;left:40px;top:308px;z-index:1;display:grid;gap:24px;width:96px;user-select:none}
#desktop-shortcuts button{display:flex;flex-direction:column;align-items:center;gap:9px;padding:10px 4px 8px;border:1px solid transparent;border-radius:5px;background:transparent;color:white;font:18px/1.2 'Segoe UI',Arial,sans-serif;text-shadow:0 1px 3px #000,0 1px 8px #000b;transition:background .16s,border-color .16s}
#desktop-shortcuts button:is(:hover,.is-pointed){background:#cbd6e42b;border-color:#e7f1ff52}
#desktop-shortcuts button.is-selected{background:#95d8f04a;border-color:#c7efffb3}
.desktop-icon{width:64px;height:64px;border-radius:13px;display:grid;place-items:center;box-shadow:0 3px 9px #0005,inset 0 1px 0 #ffffff32;text-shadow:none}
.desktop-icon img{display:block;object-fit:contain;pointer-events:none}
.desktop-icon-vopro{background:#101e29;border:1px solid #4b707e}
.desktop-icon-vopro img{width:49px;height:34px}
.desktop-icon-procore{background:#ff5200;border:1px solid #ff9c68}
.desktop-icon-procore img{width:39px;height:39px}
.browser-window{position:absolute;left:0;top:0;width:1600px;height:764px;transform-origin:0 0;overflow:hidden;border-radius:10px;background:#f4f5f5;border:1px solid #b4c0cb;box-shadow:0 25px 70px #07121a70,0 3px 13px #0004;opacity:0;will-change:transform;isolation:isolate}
.browser-window[data-front=true]{box-shadow:0 32px 90px #04111a90,0 4px 18px #0006;border-color:#b7c4cf}
.browser-window:not([data-front=true]) .browser-tabs{background:#cad0d6}
.browser-window:not([data-front=true]) .browser-toolbar{background:#e8ebee}
.browser-window .browser-chrome{position:relative;width:1600px;height:84px;color:#39434d;font:14px Arial,sans-serif;user-select:none;z-index:10;background:#f8fafd}
.browser-window .browser-tabs{height:42px;background:#d4dfe9;align-items:end;padding:0 0 0 9px}
.browser-window .window-activate{display:flex;align-items:stretch;flex:1;height:42px;background:none;border:0;border-radius:0;padding:0;text-align:left;color:inherit;font:inherit}
.browser-window .window-activate:hover{background:#ffffff18}
.browser-window .browser-tab{width:300px;height:35px;background:#f8fafd;margin-top:7px}
.browser-window .window-controls{width:144px;flex:0 0 144px}
.browser-window .browser-toolbar{border-bottom:1px solid #d7dce0}
.browser-window .browser-profile{background:#445773}
.app-surface{position:relative;width:1600px;height:680px;overflow:hidden;background:#f5f6f6;isolation:isolate}
.app-frame,#app-frame{position:absolute;inset:0;width:1600px;height:680px;border:0;background:#fff;pointer-events:none;opacity:0;transform:translateY(0);will-change:transform,opacity}
.app-hotspot,#hotspot{position:absolute;border:2px solid #00C3D0;border-radius:6px;box-shadow:0 0 0 2px #003D4638;background:transparent;z-index:5;padding:0;transition:box-shadow .15s}
.app-hotspot:hover,#hotspot:hover{background:#00C3D014;box-shadow:0 0 0 4px #00C3D044}
#demo-cursor{z-index:30;filter:drop-shadow(0 2px 1px #0006)}
#demo-cursor i{width:34px;height:34px;left:-15px;top:-15px;border:2px solid #00C3D0;opacity:0}
#voice-wave{right:138px;bottom:77px;z-index:25;pointer-events:none}

.sidebar-wheel-capture{position:absolute;z-index:3;background:transparent;pointer-events:auto}.sidebar-more-control{position:absolute;z-index:4;border:0!important;border-radius:6px;background:transparent!important;padding:0;cursor:pointer}.sidebar-more-control:hover{box-shadow:inset 0 0 0 1px #68727A35}.sidebar-more-control:focus-visible{outline:2px solid #00C3D0;outline-offset:-2px}

/* Brand typography and interaction states; captured application pages keep their source styling. */
.intro h1,.workflow-row h2,.player-heading h1,#stage-title,.site-header b{font-family:Archivo,Arial,sans-serif;font-weight:700}
.intro h1{font-weight:800}#stage-number{font-family:Archivo,Arial,sans-serif;font-weight:500}
.transport button:hover{background:#1B4E60;border-color:var(--mint)}.transport button.primary:hover{background:#BB183D;border-color:var(--pink)}
.transport :is(button,input,select):focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* Playback mode switch: the label always names the current mode. */
.mode-controls #mode-toggle{display:inline-flex;align-items:center;gap:9px;min-height:36px;padding:5px 0;background:transparent;border:0;font-size:inherit;white-space:nowrap}
#mode-label{display:inline-block;min-width:10ch;text-align:left}
.mode-switch-track{position:relative;display:block;flex-shrink:0;width:40px;height:22px;border:1px solid var(--mint);border-radius:999px;background:#123A49;transition:background .18s}
.mode-switch-track>span{position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#E8F8FA;transition:transform .18s,background .18s}
#mode-toggle[aria-checked=true] .mode-switch-track{background:var(--mint)}
#mode-toggle[aria-checked=true] .mode-switch-track>span{transform:translateX(18px);background:#0B1A23}

#annotation{position:relative;padding-right:140px}.annotation-copy{flex:1;min-width:0}#annotation-logo{position:absolute;right:40px;bottom:26px;display:block;width:auto;height:32px;object-fit:contain}

/* Presenter: one automatic animation per step, with a quiet branded opening and ending. */
#stage{position:relative}#title-screen{position:absolute;inset:0;z-index:100;display:grid;place-items:center;background:#000;color:white;text-align:center}
.title-content{display:flex;flex-direction:column;align-items:center;max-width:1300px;padding:60px}
.title-brand{display:flex;align-items:center;gap:34px}.title-brand img{width:198px;height:auto}.title-brand span{font:700 130px/1 Archivo,Arial,sans-serif;letter-spacing:-5px}.title-brand sup{font-size:30px;vertical-align:top;letter-spacing:0;margin-left:10px}
.title-byline{font-size:26px;color:#b4cdd5;margin:24px 0 70px}.title-content h2{font:700 62px/1.1 Archivo,Arial,sans-serif;margin:0 0 18px}.title-content #title-description{font-size:30px;line-height:1.3;color:#d3e7eb;margin:0 0 20px}.title-project{font-size:23px;color:#00c3d0;margin:0 0 44px}
#title-begin{background:#d51f47;border:1px solid #ff2d55;color:#fff;font:600 24px Archivo,Arial,sans-serif;padding:18px 30px;border-radius:8px}
#title-begin:hover{background:#bb183d}#title-begin:focus-visible{outline:3px solid #00c3d0;outline-offset:6px}
.showing-title #annotation,.showing-title #viewport{visibility:hidden}.timeline-row progress{flex:1;width:100%;height:5px;border:0;appearance:none;background:#163845}.timeline-row progress::-webkit-progress-bar{background:#163845}.timeline-row progress::-webkit-progress-value{background:#00c3d0}.timeline-row progress::-moz-progress-bar{background:#00c3d0}
.transport-buttons #next{min-width:112px}.transport button{min-height:40px}#annotation{padding-right:40px}#annotation:has(#voice-wave:not([hidden])){padding-right:310px}#annotation #voice-wave{right:32px;bottom:32px}#annotation-logo{right:32px;bottom:32px}#annotation:has(#voice-wave:not([hidden])) #annotation-logo{display:none}

/* Chrome-like browser shell; each app is restored only when its workflow needs it. */
.browser-window .browser-tabs{background:#dfe5ed}.browser-window .browser-tab{border-radius:11px 11px 0 0;background:#f8fafd}.browser-window .browser-toolbar{background:#f8fafd}.browser-window .address-bar{background:#e8edf4}
.browser-tab .vopro-favicon{background:transparent;width:22px}.browser-tab .vopro-favicon img{display:block;width:22px;height:auto}.browser-tab .procore-favicon img{display:block;width:12px;height:12px;object-fit:contain}

/* Instructions float over the desktop, with Flowmaster's shaded lower edge. */
#viewport{height:1080px}
.browser-window{height:944px}
.app-surface,.app-frame,#app-frame{height:860px}
#annotation{position:absolute;inset:auto 0 0;z-index:35;height:auto;min-height:240px;align-items:flex-end;gap:24px;padding:76px 260px 36px 64px;border:0;background:linear-gradient(0deg,rgba(7,19,27,.98) 0%,rgba(7,19,27,.93) 55%,rgba(7,19,27,.68) 76%,rgba(7,19,27,0) 100%);pointer-events:none;opacity:0;transform:translateY(10px)}
#annotation .step-count{border:0;border-radius:0;width:52px;height:auto;margin:0 0 5px;display:block;font-size:32px;line-height:1;color:#ff6688;align-self:flex-start;padding-top:28px}
#stage-chapter{font-size:14px;line-height:1.3;letter-spacing:.12em;margin-bottom:8px}
#stage-title{font-size:40px;line-height:1.15;margin-bottom:10px;text-shadow:0 2px 16px #0006}
#stage-detail{font-size:26px;line-height:1.4;max-width:1280px;color:#d3e7eb}
#annotation[data-position=top]{inset:0 0 auto;padding-top:36px;padding-bottom:76px;background:linear-gradient(180deg,rgba(7,19,27,.98) 0%,rgba(7,19,27,.93) 55%,rgba(7,19,27,.68) 76%,rgba(7,19,27,0) 100%)}
#annotation[data-position=top] #voice-wave{top:44px;bottom:auto}
#annotation[data-position=top] #annotation-logo{top:36px;bottom:auto}
#annotation:has(#voice-wave:not([hidden])){padding-right:300px}
#annotation #voice-wave{right:32px;bottom:144px;background:#0b1a23a6;border-color:#38687680;height:60px;padding:10px 14px}
#annotation-logo{right:32px;bottom:32px;height:32px}
.transport-right{display:flex;align-items:center;justify-content:flex-end;gap:22px;margin-left:auto}
#music-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:112px;white-space:nowrap}
#music-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#music-toggle[aria-pressed=true]{color:#70edf1;border-color:#00c3d0;background:#123a49}
@media(max-width:800px){.transport-right{width:100%;justify-content:space-between;gap:12px}#play-state{text-align:left}#music-toggle{margin-left:auto}}

/* One saved theme, shared by the VoPro toolbar and the presentation switch. */
.app-theme-control{position:absolute;z-index:6;border:0!important;border-radius:6px;background:transparent!important;padding:0;cursor:pointer}
.app-theme-control:hover{box-shadow:inset 0 0 0 1px #00c3d080}
.app-theme-control:focus-visible{outline:2px solid #00c3d0;outline-offset:-2px}
#theme-toggle{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:transparent;border-color:transparent;padding:7px 8px}
#theme-toggle:hover{background:#123a49}
.theme-switch-track{width:32px;height:18px;border-radius:999px;border:1px solid #62818d;background:#163845;position:relative;flex-shrink:0}
.theme-switch-track>span{position:absolute;width:12px;height:12px;border-radius:50%;left:2px;top:2px;background:#d3e7eb;transition:transform .18s}
#theme-toggle[aria-checked=true] .theme-switch-track{background:#007c85;border-color:#00c3d0}
#theme-toggle[aria-checked=true] .theme-switch-track>span{transform:translateX(14px)}
.theme-label{min-width:4ch;text-align:left}
html[data-theme=dark]{background:#07131b;color:#e8f8fa}
html[data-theme=dark] .site-header{background:#0b1a23;border-color:#284652}
html[data-theme=dark] .header-divider,html[data-theme=dark] .workflow-row,html[data-theme=dark] .dashboard-footer{border-color:#284652}
html[data-theme=dark] :is(.review-label,.dashboard-footer,.below-player){color:#a8bdc6}
html[data-theme=dark] :is(.intro>p:last-child,.workflow-row p){color:#bdd0d7}
html[data-theme=dark] :is(.eyebrow,.workflow-meta){color:#00c3d0}
html[data-theme=dark] :is(.player-options button,.workflow-actions button:not(.primary),#step-list button){background:#12313f;border-color:#386876;color:#e8f8fa}
html[data-theme=dark] #step-list button[aria-current=true]{background:#174651;border-color:#00c3d0}
html[data-theme=dark] .browser-window[data-app=vopro]{border-color:#4b5964;background:#111314}
html[data-theme=dark] .browser-window[data-app=vopro] :is(.browser-chrome,.browser-toolbar,.browser-tab){background:#20282e;color:#dbe7ee;border-color:#3c4a52}
html[data-theme=dark] .browser-window[data-app=vopro] .browser-tabs{background:#151d24}
html[data-theme=dark] .browser-window[data-app=vopro] .address-bar{background:#303c46;color:#dbe7ee}
html[data-theme=dark] .browser-window[data-app=vopro] .address-bar svg{stroke:#a9bbc6}
html[data-theme=dark] .browser-window[data-app=vopro] :is(.app-surface,.app-frame){background:#111314}
@media(max-width:800px){.transport-right{gap:8px}#play-state{flex:1;min-width:0}#theme-toggle{flex-shrink:0;font-size:12px}#music-toggle{flex-shrink:0;margin-left:0}}

/* Compact music transport with a readable current-track label. */
.music-widget{display:flex;flex-direction:column;align-items:flex-end;gap:5px;min-width:0}
.music-buttons{display:flex;align-items:center;gap:4px}
.transport .music-buttons #music-toggle{min-width:100px;margin:0}
.transport :is(#music-previous,#music-play,#music-next){width:34px;min-width:34px;padding:7px 0;line-height:1;font-size:19px}
.transport #music-play{font-size:14px}
#music-track-name{max-width:230px;font-size:11px;line-height:1.3;color:#a8cbd4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:800px){.transport-right{flex-wrap:wrap;align-items:center}.transport-right #play-state{flex-basis:100%;text-align:right}.music-widget{margin-left:auto}.transport .music-buttons #music-toggle{min-width:92px;font-size:12px;padding:7px 9px}.transport :is(#music-previous,#music-play,#music-next){width:34px;min-width:34px}.transport #theme-toggle{padding-left:0;padding-right:0}#music-track-name{max-width:206px}}