:root{color-scheme:dark}#mobile-nav,#mobile-nav-shade{display:none}#connection-status{position:fixed;z-index:1000;top:env(safe-area-inset-top,0px);left:0;right:0;padding:12px 18px;background:#493b20;color:#fff4da;font-size:13px;text-align:center}#connection-status[hidden]{display:none}.install-app{width:100%;margin:12px 0}#install-help{width:min(420px,calc(100% - 32px));max-height:85dvh;overflow:auto;border:1px solid #34433c;border-radius:24px;background:#10171a;color:#edf4f0;padding:28px;font:16px system-ui}#install-help::backdrop{background:#000b}#install-help img{border-radius:16px}#install-help h2{font-size:25px;letter-spacing:-.8px}#install-help p,#install-help li{color:#b9c6bf;line-height:1.65}#install-help li{margin:12px 0}#install-help button{width:100%;min-height:48px;border:0;border-radius:12px;background:#bdebcf;color:#10251b;font-weight:650}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}:focus-visible{outline:2px solid #bdebcf;outline-offset:3px}
@media(max-width:820px){
 html{scroll-padding-top:80px}body{overflow-x:clip}#app>main{margin-left:0;padding-bottom:calc(80px + env(safe-area-inset-bottom,0px));min-height:100dvh;min-width:0}.content{padding:20px 16px 28px;max-width:100%}.content>*{min-width:0}.topbar{position:sticky;top:0;z-index:19;min-height:calc(60px + env(safe-area-inset-top,0px));height:auto;padding:calc(8px + env(safe-area-inset-top,0px)) 14px 8px;background:#0b1015f5!important;backdrop-filter:blur(12px);gap:8px}.topbar .slash,.topbar>div>.muted,.topbar-right .local-status{display:none}.topbar-right{gap:6px}.topbar-right [data-action="monthly-recap"],.topbar-right [data-action="cloud-logout"]{display:none}.topbar .btn.small{min-height:44px;font-size:11px;padding:8px 10px}.topbar strong{font-size:13px}.mobile-menu{margin-right:4px}
 #mobile-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:35;bottom:0;left:0;right:0;padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left));background:#0b1015f5;border-top:1px solid #ffffff16;backdrop-filter:blur(14px)}#mobile-nav a,#mobile-nav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:48px;background:transparent;border:0;border-radius:12px;color:#99a6a0;font:11px system-ui;text-decoration:none}#mobile-nav .active,#mobile-nav button[aria-expanded=true]{color:#c7efda;background:#21332b}#mobile-nav a:active,#mobile-nav button:active{transform:scale(.96)}
 .sidebar{z-index:40!important;inset:0 auto 0 0;width:min(310px,85vw)!important;max-height:100dvh;padding-top:calc(22px + env(safe-area-inset-top,0px));padding-bottom:env(safe-area-inset-bottom,0px);overflow-y:auto;background:#0b1015!important}.sidebar nav{overflow:auto;overscroll-behavior:contain;min-height:0}.sidebar .nav-link{min-height:46px;font-size:14px}.sidebar .workspace{margin:18px 0}.sidebar .sidebar-note{display:none}.sidebar .profile{padding:12px 0}.mobile-nav-open #mobile-nav-shade{display:block;position:fixed;inset:0;z-index:39;background:#0009;border:0;width:100%;height:100%}.mobile-nav-open{overflow:hidden}
 .btn,.btn.small,.icon-btn,.segmented button,.editor-tabs button,.category-tabs button,.media-kind button{min-height:44px}.icon-btn{min-width:44px}input:not([type=checkbox]):not([type=range]),select,textarea{font-size:16px!important;min-height:44px}input[type=checkbox]{min-width:20px;min-height:20px}input[type=range]{min-height:36px}dialog{max-height:calc(100dvh - 32px - env(safe-area-inset-top));overscroll-behavior:contain}#modal{width:calc(100% - 20px);max-width:620px;padding:22px 18px;border-radius:22px}.form-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start;gap:14px}.page-heading h1{font-size:30px}.page-heading>.actions{gap:8px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.metric{padding:16px}.metric>strong{font-size:24px}.table-wrap{overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.table-wrap table{min-width:620px}.two-grid{grid-template-columns:1fr}
 .studio-layout,.curated-layout{display:flex!important;flex-direction:column;gap:18px}.stage-column,.editor-panel{width:100%;min-width:0}.studio-toolbar{flex-wrap:wrap!important}.stage-selector{width:100%!important}.stage-selector select{max-width:100%!important}.stage{min-height:0}.stage canvas{max-height:52dvh!important;max-width:100%}.editor-panel{position:static!important}.editor-tabs{position:sticky;top:calc(60px + env(safe-area-inset-top));z-index:10;background:#10151a;overflow-x:auto}.editor-tabs button{flex:1;font-size:12px!important;white-space:nowrap}#panel-content{max-height:none!important;overflow:visible!important}.background-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-height:480px;overflow:auto;overscroll-behavior:contain}.category-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}.category-tabs button{flex-shrink:0}.export-bar{flex-wrap:wrap;gap:8px}.export-bar button{flex:1;min-height:48px}.share-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.scene-controls{grid-template-columns:1fr}.admin{padding:14px}.admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin .admin-tools{gap:8px}.admin input,.admin select{min-width:0!important}.admin-stats strong{padding:12px;font-size:24px}.admin-card>div+div{padding:10px}.admin-card label{font-size:13px}.admin-preview{aspect-ratio:1}.admin-tabs .btn{font-size:12px;padding:8px}.admin dialog{padding:20px}#toast{bottom:calc(90px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px)}body.has-scene .card,body.has-scene .metric{backdrop-filter:none}main.clerk-auth{margin:0;padding-top:28px;padding-bottom:28px}body:has(.clerk-auth){padding-top:calc(20px + env(safe-area-inset-top));padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}
@media(max-width:380px){.topbar-right [data-action="workspace-scenes"]{display:none}.admin-grid{grid-template-columns:1fr}.content{padding-inline:12px}.metric>strong{font-size:21px}}
@media(prefers-reduced-motion:no-preference){.btn,.icon-btn,#mobile-nav a,#mobile-nav button{transition:background-color .16s,color .16s,transform .16s}.sidebar.mobile-open{animation:drawer-in .2s ease-out}@keyframes drawer-in{from{transform:translateX(-100%)}to{transform:translateX(0)}}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

.mobile-signout{display:none}@media(max-width:820px){.mobile-signout{display:flex;width:100%;margin:8px 0}.keyboard-open #mobile-nav{display:none}}

/* Restrained compositor-only motion; no delay before the route is usable. */
.clip-placeholder{display:grid;place-items:center;width:100%;height:100%;min-height:80px;background:#12191e;color:#9aa7a0}
@media(prefers-reduced-motion:no-preference){
 #content{animation:desk-enter .22s cubic-bezier(.2,.7,.2,1) both}
 #content .stats-grid>.metric{animation:desk-enter .28s cubic-bezier(.2,.7,.2,1) both}
 #content .stats-grid>.metric:nth-child(2){animation-delay:25ms}
 #content .stats-grid>.metric:nth-child(3){animation-delay:50ms}
 #content .stats-grid>.metric:nth-child(4){animation-delay:75ms}
 #modal[open]{animation:sheet-enter .24s cubic-bezier(.2,.8,.2,1) both}
 .btn:active,.background-pick:active,.share-template:active{transform:scale(.975)}
 .editor-tabs button,.segmented button,.share-template{transition:background-color .18s,color .18s,border-color .18s,transform .18s}
 @keyframes desk-enter{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
 @keyframes sheet-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
}
@media(max-width:820px){
 #mobile-nav:before{content:'';position:absolute;top:8px;left:8px;width:calc((100% - 16px)/5);height:48px;border-radius:12px;background:#21332b;transform:translateX(calc(var(--active-tab,0)*100%));pointer-events:none}
 #mobile-nav a,#mobile-nav button{position:relative;z-index:1}
 #mobile-nav .active{background:transparent}
 #modal[open]{margin:auto 0 0;width:100%;max-width:none;max-height:90dvh;border-radius:24px 24px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
@media(max-width:820px) and (prefers-reduced-motion:no-preference){#mobile-nav:before{transition:transform .24s cubic-bezier(.2,.8,.2,1)}}
@media(max-width:820px){.topbar-right [data-action="scene-resume-sound"]{min-width:44px;width:44px;padding:8px;font-size:0}.topbar-right [data-action="scene-resume-sound"]:before{content:"♪";font-size:18px}.topbar>div:first-child{min-width:0}.topbar-right{flex-shrink:0}}