/* VMET · Unslop by Damir Sokolovsky · https://heydamir.design/unslop · CC BY 4.0.
   One authoritative layout layer; footage carries the color, not interface decoration. */
:root{--cut-bg:#111;--cut-panel:#191919;--cut-raised:#252525;--cut-line:#333;--cut-muted:#aaa;--cut-ink:#f5f5f3;--font-body:'Golos Text','Segoe UI',sans-serif}
*{box-sizing:border-box}
html{scroll-padding-top:24px}
body{margin:0;background:var(--cut-bg);color:var(--cut-ink);font-family:var(--font-body);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:500;line-height:1.2;text-wrap:balance}
h1{letter-spacing:-.035em}h2,h3{letter-spacing:-.02em}
p,li{line-height:1.7}small,.helper,.note{font-size:13px;line-height:1.65}
button,input,select,textarea{font-family:inherit;font-size:14px}
button,.button,.ws-primary,.ws-outline{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;line-height:1.4;border-radius:8px;white-space:normal;touch-action:manipulation;box-shadow:none}
button:disabled{opacity:.45;cursor:not-allowed}
input:not([type=range]):not([type=checkbox]):not([type=color]):not([type=file]),select,textarea{width:100%;min-height:44px;border:1px solid #444;border-radius:8px;padding:10px 12px;color:#f5f5f3;background:#151515;font-size:15px;line-height:1.6;min-width:0}
textarea{resize:vertical}
select{color-scheme:dark;padding-right:32px}
:where(a,button,input,select,textarea):focus-visible{outline:2px solid #ddd;outline-offset:3px}
:where(.ws-primary,.button.primary,button.primary){background:#f5f5f3;color:#151515;border-color:#f5f5f3}
.ws-outline,.button.secondary{border:1px solid #555;background:transparent;color:#eee}
[hidden]{display:none!important}
::selection{background:#ddd;color:#111}
.container{width:100%;max-width:1440px;margin-inline:auto;padding-inline:48px}
/* Header participates in flow: it can no longer cover page headings. */
.site-header,.site-header.nav{position:relative;inset:auto;transform:none;width:100%;max-width:1440px;min-height:88px;height:auto;margin:0 auto;padding:20px 48px;display:flex;gap:24px;align-items:center;background:#111;border:0}
.site-header .main-nav{display:flex;align-items:center;justify-content:center;gap:8px;padding:0;border:0;margin:0 auto;order:initial;width:auto}
.site-header .main-nav a{padding:8px 12px;min-height:40px;font-size:14px;border-radius:6px;color:#aaa}
.site-header .main-nav a[aria-current=page]{color:#fff;background:#222}
.site-header .brand-lockup{gap:12px}.brand-lockup img{width:36px;height:40px}.brand-lockup>span{font-size:18px;line-height:1.1}.brand-lockup small{font-size:13px;line-height:1.1;margin-top:4px}
.header-actions{gap:12px;margin:0;display:flex;align-items:center}
.site-header .editor-link{font-size:14px!important;min-height:44px;display:inline-flex;gap:8px;width:auto;padding:0}
.site-header .editor-link svg{display:block;width:18px;height:18px}
.site-header .account-button{width:44px;min-width:44px;height:44px;padding:0;background:#222;border:0;border-radius:8px}
.ref-hero.taste-intro{padding-top:64px!important;padding-bottom:80px!important;min-height:0;height:auto;display:block}
.taste-intro>.wrap{height:auto;display:block}
.taste-intro .hero-text{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center;height:auto}
.taste-intro h1{font-size:clamp(40px,4.4vw,64px);line-height:1.08;max-width:17ch;letter-spacing:-.045em;margin:0}
.taste-intro-copy>p{font-size:17px;color:#aaa;max-width:44ch;margin:24px 0 28px}
.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.taste-intro .hero-film{margin:0;padding:0;border:0;border-radius:12px;overflow:hidden;background:#171717;align-self:center;min-height:0}
.taste-intro .hero-video>video{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:none;object-fit:contain;background:#080808;border:0;border-radius:0}
.taste-intro .hero-film .film-caption{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:12px 16px;gap:12px;background:#191919;color:#aaa;font-size:12px;position:static}
.film-caption span{width:auto;flex:0 1 auto}.film-caption span:first-child{color:#ddd}
.ref-section{min-height:0;height:auto;padding-block:72px;border:0}
.taste-workflow,.taste-plans,.taste-faq{height:auto;min-height:0}
.taste-workflow>.wrap,.taste-faq>.wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start;align-content:start}
.ref-section h2{font-size:36px;line-height:1.2;letter-spacing:-.03em;margin:0 0 20px}
.taste-section-copy p{font-size:16px;color:#aaa;margin-bottom:24px;max-width:44ch}
.taste-editor-sample{padding:0;border:0;background:transparent;border-radius:0;overflow:hidden}
.taste-editor-sample>img{display:block;width:100%;border-radius:10px}
.taste-sample-toolbar{display:flex;justify-content:space-between;gap:16px;padding:0 0 12px;font-size:13px;color:#aaa}
.taste-price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.taste-price-grid>article{padding:28px;border:0;background:#1a1a1a;border-radius:12px;display:flex;flex-direction:column}
.taste-price-grid>article:nth-child(2){background:#242424}
.taste-price-grid h3{font-size:20px}.taste-price-grid .t-stat{font-size:44px;line-height:1.2;margin:24px 0 12px;letter-spacing:-.04em}.taste-price-grid .t-stat span{font-size:14px;color:#aaa;letter-spacing:0}
.taste-price-grid ul{padding-left:18px;margin:20px 0 28px;color:#bbb;font-size:14px}.taste-price-grid li{padding:6px 0;border:0}.taste-price-grid .button{margin-top:auto}
.taste-faq details{padding:20px 0;border:0;border-bottom:1px solid #2b2b2b}
.taste-faq summary{font-size:17px;cursor:pointer}.taste-faq details p{font-size:15px;color:#aaa;padding-top:12px;max-width:58ch}
.taste-faq .button{margin-top:24px}
.site-footer,.site-footer.closing{min-height:0;height:auto;border:0;padding-top:64px;padding-bottom:32px;gap:32px}
.site-footer.closing>.wrap{gap:40px}.site-footer.closing .footer-mast{font-size:clamp(56px,9vw,120px);line-height:1.05;letter-spacing:-.055em}
.taste-legal{padding:0;border:0;display:flex;justify-content:space-between;gap:32px}.taste-legal .taste-proof{display:none}.taste-legal .footer-note{grid-column:auto;grid-row:auto}
.page-intro{padding-top:48px;padding-bottom:40px;min-height:0}.page-intro h1{font-size:48px;line-height:1.15;margin:0 0 20px;max-width:24ch}.page-intro>p{font-size:17px;color:#aaa;max-width:64ch;margin:12px 0}.page-intro .small-muted{font-size:13px}
.filter-bar{display:flex;gap:8px;flex-wrap:wrap;padding:0;margin:0 0 28px}
.filter-bar button{border:0;border-radius:8px;background:#1b1b1b;color:#bbb;font-size:14px}
.filter-bar button[aria-pressed=true]{background:#eee;color:#111}
.examples-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.example-card,.example-card:first-child{grid-column:auto;background:transparent;border:0;border-radius:0;padding:0;min-width:0}
.example-card video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;border:0;border-radius:10px;background:#080808;filter:none}
.example-card>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:20px 0 0}
.example-card h2{font-size:19px;margin:0}.example-card span{font-size:12px;color:#aaa;white-space:nowrap}.example-card p{font-size:14px;color:#aaa;padding:0;margin:8px 0}.example-card>a{font-size:14px;text-decoration:underline;display:inline-flex;align-items:center;min-height:44px}
.ref-final{height:auto;min-height:0;padding-block:64px}.product-logo{background:transparent;border:0}
/* Workspace: one grid, no inherited fixed sidebar plus extra left margin. */
.ws-shell{display:grid;grid-template-columns:240px minmax(0,1fr);width:100%;max-width:none;margin:0;min-height:100svh}
.ws-sidebar{position:sticky;inset:auto;top:0;left:auto;width:auto;height:100svh;overflow-y:auto;display:flex;padding:28px 16px;gap:24px;background:#151515;border:0;z-index:25;transform:none}
.ws-main{margin:0;width:100%;min-width:0}
.ws-main main{padding:32px;max-width:1440px;width:100%;margin:auto;--gutter:32px}
.ws-brand{padding-inline:8px}.ws-space{border:0;padding:12px 8px;margin:0}
.ws-sidebar nav{gap:4px}.ws-sidebar nav a{min-height:40px;padding:8px 12px;border-radius:6px;gap:12px;font-size:14px;color:#aaa}
.ws-sidebar nav a.active{background:#292929;color:#f5f5f3}.ws-sidebar nav a.active::before{display:none}
.ws-sidebar nav svg{width:18px;min-width:18px;height:18px;stroke-width:1.5}
.ws-bottom{margin-top:auto}.ws-bottom p{font-size:12px;color:#999;line-height:1.65}
.ws-header{min-height:72px;height:auto;padding:12px 32px;border:0;background:#111;gap:16px}
.ws-header-actions{gap:16px;flex-wrap:wrap}.ws-header .ws-primary{padding:10px 16px}.ws-menu{display:none}
.ws-heading{margin-bottom:28px}.ws-heading h1,.workspace-hero h1{font-size:32px;line-height:1.2;letter-spacing:-.03em;max-width:none}
.ws-heading p{font-size:15px;color:#aaa;margin-top:12px}
.workspace-hero{display:flex;flex-direction:column;gap:0;margin:0;padding:0;max-width:none;text-align:left}
.workspace-hero h1{margin:0 0 12px}.workspace-hero>p{margin:0 0 28px;max-width:64ch;font-size:16px;color:#aaa}
.start-composer{display:flex;flex-direction:column;gap:20px;min-height:0;margin:0;padding:24px;background:#1c1c1c;border:0;border-radius:12px;box-shadow:none}
.start-composer .idea-label{font-size:14px;color:#ddd;margin:0;padding:0;line-height:1.4}
.start-composer textarea{width:100%;min-height:104px;margin:0;padding:0!important;border:0!important;border-radius:0;background:transparent!important;font-size:16px;line-height:1.7}
.start-composer textarea:focus-visible{outline:0}
.start-composer:focus-within{outline:1px solid #777;outline-offset:0}
.start-composer .workspace-model{display:flex;flex-direction:column;gap:8px;align-items:start;width:min(100%,440px);margin:0;padding:0;border:0;background:none;font-size:13px}
.workspace-model select{width:100%;max-width:none}
.start-composer-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0;margin:0;border:0}
.start-composer-bottom>span{font-size:13px;max-width:none;color:#aaa;line-height:1.6}
.subscription-banner{grid-area:auto;margin:16px 0 0;padding:0;border:0;font-size:14px;display:inline-block;min-height:32px}
.idea-chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.idea-chips button{font-size:13px;min-height:36px;padding:8px 12px;background:#222;border:0;border-radius:6px}
.quick-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border:0;margin:32px 0 40px;padding:0}
.quick-card{border:0;border-radius:10px;background:#1a1a1a;padding:20px;min-width:0}
.quick-card h3{font-size:15px;letter-spacing:0}.quick-card p{font-size:13px;color:#aaa;line-height:1.6}
.section-title{margin:32px 0 20px}.section-title h2{font-size:22px}.section-title a{font-size:13px}
.ws-empty{background:#191919;border:0;border-radius:10px;padding:40px 24px}.ws-empty h2{font-size:20px}.ws-empty p{font-size:14px;max-width:48ch;margin:12px auto 20px}
.project-grid,.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.template-card,.project-card{border:0;background:#1b1b1b;border-radius:12px;overflow:hidden;min-width:0}
.template-art{aspect-ratio:16/10;padding:0!important;position:relative;overflow:hidden;background:#111}
.template-art img{display:block;width:100%;height:100%;object-fit:cover!important;filter:none;opacity:1;transform:none!important}
.template-art .template-preview-button{position:absolute;inset:auto 12px 12px auto;min-height:40px;padding:8px 12px;border:1px solid #666;background:#151515;color:#fff;font-size:13px;border-radius:8px}
.template-body,.project-info{padding:20px}.template-tag{font-size:12px;color:#aaa}.template-body h3{font-size:18px;line-height:1.4;margin:8px 0;letter-spacing:0}.template-body p{font-size:13px;color:#aaa;margin:8px 0 20px}.template-body .ws-outline{width:100%;min-height:44px}
.ws-toolbar{display:flex;gap:24px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:24px 0}
.ws-tabs{display:flex;flex-wrap:wrap;gap:4px}.ws-tabs button{border:0;background:transparent;font-size:14px;padding:8px 12px;min-height:40px;border-radius:6px}
.ws-tabs button.selected{background:#292929;color:#fff}
.ws-search{display:flex;align-items:center;min-height:44px;padding:0 12px;background:#1c1c1c;border:0;border-radius:8px;width:240px;max-width:100%}
.ws-search input{background:transparent!important;border:0!important;min-height:44px;padding:8px!important;font-size:14px}
.ws-footer{border:0;margin-top:40px;padding:24px 0;font-size:12px;color:#999;gap:16px}
.ws-footer>span{font-size:14px}
.profile-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
.profile-form,.profile-context,.account-section,.account-subscription{padding:24px;background:#1a1a1a;border:0;border-radius:12px;max-width:none}
.profile-form h2,.profile-context h2,.account-section h2{font-size:20px;margin-bottom:24px}
.profile-form label{display:flex;flex-direction:column;gap:8px;margin:20px 0;font-size:14px}
.profile-context dl{gap:12px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.profile-context dd{overflow-wrap:anywhere}
.account-tabs{display:flex;gap:24px;flex-wrap:nowrap;overflow-x:auto;margin:24px 0;border:0}
.account-tabs a{min-height:44px;flex:0 0 auto}
.account-section+.account-section{margin-top:24px;border:0;padding-top:24px}
.account-note,.profile-message{font-size:13px;color:#aaa;line-height:1.65}
.account-error{border:0;background:#292929;padding:16px;border-radius:8px}.account-error:empty,.profile-message:empty{display:none}
.brand-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.ws-card{padding:24px;border:0;background:#1a1a1a;border-radius:12px}
.brand-form label{font-size:14px;gap:8px;margin:20px 0}
.brand-form .ws-form-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
input[type=color]{height:48px;min-height:48px;padding:8px;border:1px solid #444;border-radius:8px;max-width:100%;width:100%}
.brand-preview{border:0;border-radius:12px;padding:32px;min-height:400px}.brand-preview h2{font-size:36px;line-height:1.25;margin:24px 0}.brand-preview>span{font-size:13px}.brand-preview p{font-size:16px}
.login-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;padding:32px 0;align-items:center}
.login-copy h1{font-size:44px;line-height:1.15;letter-spacing:-.035em}.login-copy p{font-size:16px;color:#aaa}
.login-panel{padding:28px;background:#1b1b1b;border:0;border-radius:12px}
.login-panel h2{font-size:24px;margin-bottom:16px}
.email-login-form{display:grid;gap:16px}.email-login-form label{display:flex;flex-direction:column;gap:8px;font-size:14px}
.auth-message{font-size:13px;min-height:24px;line-height:1.65;color:#aaa}
.auth-alternatives{display:grid;gap:12px;margin-top:20px;padding-top:0;border:0}
.auth-alternatives a,.auth-alternatives button{width:100%;min-height:44px}
.auth-code-box{display:grid;gap:12px}.auth-code-box input[name=code]{font-size:24px;letter-spacing:.2em;text-align:center}
.pricing-card{border:0;background:#1a1a1a;padding:24px;border-radius:12px}.pricing-card.featured{background:#242424}
.ai-settings-grid{gap:24px}.ai-settings-form label{font-size:14px;line-height:1.6}
.template-preview-dialog{width:min(1000px,calc(100% - 32px));padding:24px}
.template-preview-dialog video{display:block;width:100%;max-height:65svh;object-fit:contain;background:#080808;margin:20px 0}
dialog,.ws-dialog{background:#1c1c1c;color:#eee;border:1px solid #555;border-radius:16px;padding:24px;max-height:90svh;overflow:auto}
dialog::backdrop{background:rgb(0 0 0 / .75)}
.ws-dialog label{display:flex;flex-direction:column;gap:8px;margin:20px 0;font-size:14px}.ws-dialog p{font-size:13px;line-height:1.65}.ws-dialog-actions{gap:12px;flex-wrap:wrap}
@media(hover:hover){.ws-sidebar nav a:hover,.site-header .main-nav a:hover{background:#252525;color:#fff}.ws-outline:hover,.button.secondary:hover{background:#292929}.ws-primary:hover,.button.primary:hover{background:#ddd;color:#111}.template-card:hover,.project-card:hover,.quick-card:hover{transform:none;border:0}.template-card:hover .template-art img{transform:none}}
@media(max-width:1199px){.container{padding-inline:32px}.site-header,.site-header.nav{padding-inline:32px}.taste-intro .hero-text{gap:32px}.taste-workflow>.wrap,.taste-faq>.wrap{gap:40px}.examples-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.template-grid,.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1023px){
 .ws-shell{display:block}.ws-sidebar{display:none;position:fixed;inset:0 auto 0 0;top:0;width:256px;height:100svh;box-shadow:0 0 0 100vmax rgb(0 0 0 / .6)}
 .ws-sidebar.shown{display:flex;transform:none}.ws-menu{display:inline-flex;width:44px;min-width:44px;padding:0}
 .ws-main{width:100%;margin:0}.ws-header{padding-inline:24px}.ws-main main{padding:28px 24px}
 .site-header .main-nav{gap:0}.site-header .editor-link{font-size:13px!important}
 .profile-grid{grid-template-columns: minmax(0,1fr)}
 .taste-intro .hero-text{grid-template-columns:minmax(0,1fr);gap:32px}.taste-intro h1{max-width:20ch}
 .taste-workflow>.wrap,.taste-faq>.wrap{grid-template-columns:minmax(0,1fr);gap:32px}
 .ref-hero.taste-intro{padding-top:40px!important;padding-bottom:48px!important}
}
@media(max-width:767px){
 .container{padding-inline:24px}.site-header,.site-header.nav{padding:16px 24px;gap:16px;flex-wrap:wrap;min-height:80px}
 .site-header .main-nav{order:3;width:100%;justify-content:flex-start;margin:0;border:0}
 .site-header .header-actions{margin-left:auto}.site-header .editor-link{font-size:0!important;width:32px;padding:0}.site-header .editor-link svg{display:block}
 .taste-intro h1{font-size:40px;max-width:18ch}
 .ref-section{padding-block:48px}.ref-section h2{font-size:30px}
 .taste-price-grid{grid-template-columns:minmax(0,1fr)}.taste-price-grid>article{padding:24px}
 .page-intro{padding-top:32px;padding-bottom:28px}.page-intro h1{font-size:36px}
 .examples-grid{grid-template-columns:minmax(0,1fr);gap:32px}
 .ws-header-actions{gap:8px}.ws-header .header-account{max-width:120px}
 .ws-heading h1,.workspace-hero h1{font-size:28px}
 .workspace-hero>p{font-size:15px;margin-bottom:24px}
 .quick-actions{grid-template-columns:minmax(0,1fr);gap:12px;margin-block:24px 32px}
 .quick-card{padding:20px}.quick-card p{margin:4px 0 0}
 .start-composer{padding:20px;gap:16px}.start-composer-bottom{gap:16px;flex-wrap:wrap}
 .start-composer-bottom>span{font-size:12px}.start-composer .workspace-model{width:100%}
 .template-grid,.project-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .brand-form{grid-template-columns:minmax(0,1fr)}.brand-preview{min-height:300px;padding:24px}.brand-preview h2{font-size:28px}
 .login-layout{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:16px}.login-copy h1{font-size:36px}
 .taste-legal{flex-direction:column;gap:20px}.site-footer.closing .footer-mast{font-size:56px}
}
@media(max-width:639px){
 .container{padding-inline:20px}.site-header,.site-header.nav{padding-inline:20px}
 .site-header .brand-lockup>span{font-size:16px}.brand-lockup img{width:32px;height:36px}
 .taste-intro h1{font-size:36px}.taste-intro-copy>p{font-size:16px;margin:20px 0 24px}
 .hero-buttons .button{font-size:13px;padding:10px 14px}.taste-intro .hero-film .film-caption{font-size:11px;padding:12px}
 .ws-main main{padding:24px 16px}.ws-header{padding-inline:16px}
 .template-grid,.project-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .template-art{aspect-ratio:16/10}.template-body{padding:20px}
 .ws-toolbar{gap:16px}.ws-search{width:100%;max-width:none}
 .profile-context dl{grid-template-columns:minmax(0,1fr)}.profile-context dd{text-align:left;margin:0 0 8px}
 .ws-header .header-account-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:112px}
 .site-footer.closing .footer-mast{font-size:48px}.site-footer .footer-note{font-size:12px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Studio: footage, timeline and controls each have their own plane. */
.topbar { background: #161616; min-height: 72px; border-bottom: 1px solid #343434; }
.topbar .brand { border-right-color: #343434; }
.topbar .project-heading input { border-color: transparent; background: transparent; }
.topbar .project-heading input:hover,.topbar .project-heading input:focus { background: #222; border-color: #555; }
.top-actions button:not(.primary) { background: #202020; border-color: #363636; }
.app-layout { background: #101010; }
.media-panel,.chat-panel { background: #151515; border-color: #303030; }
.media-panel .panel-heading h2,.chat-panel .panel-heading h2 { font-size: 14px; font-weight: 500; }
.media-panel .upload-zone { background: #1d1d1d; border-color: #4a4a4a; border-radius: 10px; min-height: 144px; }
.media-panel .upload-zone:hover { border-color: #aaa; background: #222; }
.media-filter { gap: 4px; }
.media-filter button { padding: 8px 10px; min-height: 36px; border-radius: 6px; }
.media-filter button[aria-pressed=true] { background: #333; border-color: #555; }
.asset-item { background: #1d1d1d; border-color: #333; }
.settings-heading { padding-top: 24px; margin-top: 24px; }
.style-grid button { background: #1b1b1b; border-color: #3a3a3a; border-radius: 8px; font-weight: 400; }
.style-grid button[aria-pressed=true] { background: #333; border-color: #ccc; }
.viewer-toolbar { background: #151515; padding-block: 12px; }
.viewer-toolbar .local-badge { color: #aaa; background: #222; border: 1px solid #333; }
.viewer { border-color: #303030; border-radius: 8px; background: #080808; }
.playback { padding-block: 12px; border-bottom: 1px solid #303030; }
.playback #play { border-radius: 8px; width: 44px; height: 44px; min-width: 44px; padding: 0; }
.playback .timecode { font-size: 12px; }
.timeline-panel { background: #161616; padding-top: 16px; }
.timeline-heading { gap: 12px; }
.timeline-heading button { background: #222; border: 1px solid #383838; min-height: 36px; padding: 8px 10px; font-size: 12px; }
.timeline-ruler { color: #999; font-size: 11px; }
.timeline-clips { gap: 6px; }
.timeline-clip { background: #242424; border-color: #444; border-left: 3px solid #888; border-radius: 6px; }
.timeline-clip.selected { border-color: #eee; background: #303030; }
.audio-track { background: #1e1e1e; border-color: #3b3b3b; }
.inspector { background: #151515; }
.inspector-tabs button { min-height: 40px; border-radius: 6px; color: #aaa; }
.inspector-tabs button[aria-pressed=true] { color: #fff; background: #303030; }
.chat-panel .model-picker { background: #1c1c1c; border-color: #3b3b3b; }
.chat-composer { background: #222; border-color: #555; border-radius: 12px; }
.chat-composer textarea { background: transparent!important; border: 0!important; padding: 8px 4px!important; }
.chat-composer:focus-within { border-color: #aaa; }
.chat-composer textarea:focus-visible { outline: none; }
.chat-composer #chat-send { min-width: 44px; width: 44px; height: 44px; padding: 0; border-radius: 8px; }
.chat-panel .quick-prompts button { background: #222; border-color: #444; border-radius: 6px; }
.message { line-height: 1.7; }
dialog { background: #1b1b1b; border: 1px solid #555; border-radius: 16px; }
dialog::backdrop { background: rgb(0 0 0 / .75); }

/* Mobile task switching keeps the three studio panels reachable without a long page. */
.taste-intro .hero-film .film-caption { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:12px; padding:12px 8px 4px; min-height:36px; height:auto; }
.taste-intro .hero-film .film-caption span { flex:0 1 auto; width:auto; max-width:none; }
@media(min-width:1200px) {
 .ref-hero.taste-intro { padding-top:88px!important; }
}
@media(max-width:767px) {
 .mobile-panels { display:flex!important; position:sticky; top:0; z-index:15; padding:8px 16px; gap:8px; background:#181818; border-bottom:1px solid #444; }
 .mobile-panels button { min-height:40px; color:#aaa; border-radius:6px; }
 .mobile-panels button[aria-pressed=true] { background:#333; color:#fff; border-color:#666; }
 .app-layout { display:block; }
 .app-layout .media-panel,.app-layout .chat-panel { display:none; }
 body.mobile-media .app-layout .media-panel { display:block; }
 body.mobile-chat .app-layout .chat-panel { display:flex; min-height:calc(100svh - 56px); }
 body.mobile-media .app-layout .edit-panel,body.mobile-chat .app-layout .edit-panel { display:none; }
 .topbar #save-status { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
 .topbar .project-heading { min-width:0; max-width:calc(100% - 56px); }
 .topbar .project-heading input { width:100%; }
 .account-tabs { display:flex; flex-wrap:nowrap; overflow-x:auto; gap:24px; margin:20px 0 24px; }
 .account-tabs a { flex:0 0 auto; min-height:44px; }
}
@media(max-width:639px) {
 .taste-intro .hero-film .film-caption { font-size:10px; padding:10px 4px 4px; gap:8px; }
 .taste-intro .hero-film .film-caption span:last-child { text-align:right; }
}