/* Studio finish: quiet working surfaces, red interaction, graphic grunge branding. */
:root{--studio-line:#343434;--studio-red:#ef2637}
body>header{border-bottom:1px solid #292929;background:#090909}
button,.button{transition:background-color .16s,border-color .16s,box-shadow .16s,transform .16s;touch-action:manipulation}
button:not(:disabled):active{transform:scale(.97)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid #fff;outline-offset:3px}
button:disabled{cursor:default}
body .stage,body.tools-open .workspace>.stage{background:radial-gradient(ellipse at center,#242424 0,#111 62%,#0d0d0d 100%);border:1px solid #333;border-radius:16px}
body .canvaswrap{outline:1px solid #ffffff16;border-radius:7px;box-shadow:0 12px 40px #0008}
.workspace .sectionhead h1{letter-spacing:.02em}
body .transport{gap:10px}
#clock{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px;min-width:84px;text-align:right}
body .transport #restart{flex:0 0 40px;width:40px;min-height:40px;background:#202020;border:1px solid #404040;color:#eee;font-size:23px}
body .transport input{min-width:20px;cursor:pointer}
body .previewtools button{min-height:40px;width:40px}
#selectionname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body .quickbar{gap:8px}body .quickbar button{white-space:nowrap;font-size:13px}
#toolsheet{border-color:#373737;background:#121212}
#toolsheet .sheetheading{border-bottom:1px solid #303030;background:#151515}
#toolsheet .sheetheading h2{font-size:21px;letter-spacing:.02em}
#toolsheet .sheetheading button{min-height:40px;padding:8px 18px;border-radius:8px}
#toolsheet .templates,#toolsheet[data-view=templates] .templates{gap:10px;padding:2px 2px 8px}
#toolsheet .templates button,#toolsheet[data-view=templates] .templates button{flex-basis:126px;min-height:0;height:160px;padding:8px;gap:8px;border:1px solid #414141;border-radius:10px;background:#1b1b1b;box-shadow:none;white-space:normal}
#toolsheet .templates .templatepreview{display:flex;align-items:center;justify-content:center;width:100%;height:112px;flex:0 0 112px;background:linear-gradient(140deg,#262626,#090909);border-radius:5px;overflow:hidden;color:#ff4652;margin:0;padding:0}
#toolsheet .templatepreview svg{height:106px;width:auto;display:block}
#toolsheet .templates .templatename{font-family:inherit;font-size:14px;line-height:1.2;font-weight:600;color:#eee}
#toolsheet .templates button.selected{border-color:#ff4c59;background:#32181c;box-shadow:0 0 0 1px #ff4c59}
#toolsheet .templates button.selected:after{top:12px;right:12px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#ef2637;color:#fff;font-size:14px}
#toolsheet .detailcard{background:#1c1c1c;border:1px solid #404040;border-radius:10px}
#toolsheet .detailcard.added{border-color:#ba424c;background:#29191c}
#toolsheet .detailicon{border-radius:8px;background:#2c2325;color:#ff808a}
#toolsheet .detailmain{border:0;background:transparent}
#toolsheet .addtoggle{border-radius:50%;width:40px;min-height:40px}
#toolsheet .filters button{border-radius:8px}
#toolsheet .filters button.active{background:#3a1920;border-color:#ff6673}
#toolsheet .palettechip{border:1px solid #555;border-radius:8px}
#toolsheet .palettechip.selected{outline:2px solid #fff;outline-offset:2px}
.durationpresets button[aria-pressed=true]{background:#451d23;border-color:#ff6673;color:#fff}
#toolsheet input:not([type=range]):not([type=file]):not([type=checkbox]),#toolsheet select{border-radius:8px;background:#0e0e0e;border-color:#484848;font-size:16px;min-height:44px}
#toolsheet .upload{border-radius:10px;background:#231619;border-color:#d85b65}
body .appdock{background:#101010;border-color:#303030}
body .appdock button{border-radius:10px}
body .appdock button span{display:flex;align-items:center;justify-content:center;width:24px;height:24px}
body .appdock svg{display:block;width:24px;height:24px}
body .appdock button[aria-pressed=true]{color:#ff7b85;background:#32191e}
#status.notice{border:1px solid #555;box-shadow:0 8px 30px #0007}
@media(hover:hover){#toolsheet .templates button:hover{border-color:#ff808a;background:#2a2022}body .appdock button:hover{background:#252025;color:#fff}}
@media(max-width:1023px){
 :root{--tool-height:clamp(246px,33dvh,290px)}
 #toolsheet[data-view=templates] #sheethost{overflow-y:hidden}
 #toolsheet[data-view=templates] #editorcontrols{padding:10px 14px}
 body .workspace,body.tools-open .workspace{padding-inline:10px}
 body .stage #expandpreview{right:8px;bottom:8px;width:40px;min-height:40px;background:#181818e8}
 body .appdock{padding-inline:6px}
 body .transport{gap:7px}
 body .transport #restart{flex-basis:36px;width:36px;min-height:40px}
}
@media(min-width:1024px){
 body .workspace,body.tools-open .workspace{padding:18px 28px;gap:8px}
 body .workspace>.stage,body.tools-open .workspace>.stage{padding:16px}
 body .appdock button{font-size:12px;flex-basis:78px}
 #toolsheet .templates button,#toolsheet[data-view=templates] .templates button{height:222px;gap:12px}
 #toolsheet .templates .templatepreview{height:166px;flex-basis:166px}
 #toolsheet .templatepreview svg{height:158px}
 #toolsheet .sheetheading{min-height:70px}
 #editorcontrols{padding:18px}
 body .transport{background:#171717;border:1px solid #353535;border-radius:12px;padding:6px 12px;min-height:56px;height:56px}
}
@media(prefers-reduced-motion:no-preference){
 #toolsheet[open]{animation:studio-enter .18s ease-out}
 @keyframes studio-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}