/* The studio shell keeps the original rendering controls, with one focused pane at a time. */
:root{--bg:#101115;--panel:#181a20;--panel2:#20232b;--line:#30333d;--accent:#d5f895;--accent2:#b4baff;--text:#f4f3ee;--muted:#a5a7b3}
body.studio{background:#101115;color:var(--text);font-size:14px;line-height:1.5}
button,input,select,textarea{font:inherit}button{touch-action:manipulation}button:hover{filter:none}button:disabled{cursor:wait}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button{transition:background .18s,border-color .18s,transform .18s;color:#182114;background:var(--accent);border:1px solid transparent;border-radius:9px;font-size:12px;min-height:40px;padding:9px 13px}
button:hover{background:#e5ffb7}button.sub{background:#252831;border:1px solid #383c48;color:#edeee9}button.sub:hover{background:#333743;border-color:#666d7d}
input[type=range]{accent-color:var(--accent);min-height:25px;margin:2px 0}input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;flex-shrink:0}
input[type=search],input[type=text],input[type=number],select,textarea{border:1px solid #3b3e49;border-radius:8px;background:#121419;color:var(--text);padding:10px;font-size:13px;min-height:42px}
textarea{font-size:22px;font-weight:750;letter-spacing:.015em;min-height:108px;line-height:1.35}label{font-size:12px;color:#b6b8c4;gap:7px}label .val,output{color:var(--accent);font-size:11px}.hint{font-size:11px;line-height:1.7;color:#a2a6b4}.subtle{color:#858b99}
.masthead{height:82px;max-width:none;padding:0 30px;border-bottom:1px solid #2b2d36;background:#15161b;gap:20px}
.studio-brand{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;font-size:16px;font-weight:800;letter-spacing:.04em;white-space:nowrap}.brand-light{font-weight:400;color:#bbbcca}.brand-symbol{font-size:42px;line-height:1;color:var(--accent)}.studio-brand small{display:block;color:#8e92a2;font-size:10px;font-weight:400;letter-spacing:.03em;margin-top:3px}
.header-actions{display:flex;align-items:center;gap:8px}.local-note{display:flex;align-items:center;gap:7px;font-size:10px;color:#9fa594;margin-right:16px}.local-note i{width:5px;height:5px;border-radius:50%;background:var(--accent)}.icon-button{padding:5px;background:transparent;border:1px solid #373a44;color:#c5c9d4;width:38px;min-height:38px;font-size:23px;font-weight:400}.icon-button:hover{background:#2e323c}.primary-small{min-width:135px}.primary-small span{margin-left:12px}.back-tools{padding:9px 12px;font-size:10px;margin-left:6px}
.app{max-width:1800px;margin:0 auto;padding:0;display:grid;grid-template-columns:268px minmax(0,1fr) 328px;gap:0;align-items:start}
.library{padding:25px 16px 20px;border-right:1px solid #2b2d36;height:calc(100dvh - 82px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:#373b48 transparent;position:sticky;top:0;background:#15171c}
.library-top{padding:0 5px;margin-bottom:20px}.eyebrow{font-size:9px;letter-spacing:.17em;font-weight:650;color:var(--accent)}.library-top h2{font-size:19px;letter-spacing:.02em;margin:7px 0 4px;font-weight:650}.library-top p{font-size:11px;color:#969baa;margin:0}.quick-steps{margin:10px 0 8px;padding:0;list-style:none;counter-reset:qs;display:grid;gap:5px}.quick-steps li{counter-increment:qs;font-size:12px;color:#d9dce5;display:flex;align-items:center;gap:8px}.quick-steps li::before{content:counter(qs);display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--accent);color:#111;font-size:10px;font-weight:700;flex:none}
.search-wrap{position:relative;display:block}.search-wrap>span{position:absolute;left:11px;top:6px;font-size:22px;color:#9499aa}.search-wrap input{padding-left:33px;font-size:11px;width:100%;background:#101217;border-color:#323540;min-height:40px}
.category-tabs{display:flex;flex-wrap:wrap;gap:5px;margin:13px 0 17px}.category-tabs button{background:transparent;border:1px solid #343742;border-radius:6px;color:#aeb2bf;min-height:29px;padding:4px 8px;font-size:10px;font-weight:500}.category-tabs button:hover{background:#272b34}.category-tabs button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#233217}
.library-count{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.library-count>span{font-size:9px;color:#8f95a3;letter-spacing:.08em}.text-button{background:transparent;color:#969dac;padding:2px 0;font-size:10px;min-height:27px;border-radius:0}.text-button:hover{background:transparent;color:var(--accent)}.text-button[aria-pressed=true]{color:var(--accent)}
.studio-presets{display:grid;grid-template-columns:1fr 1fr;gap:10px 8px}.template-card{position:relative;min-width:0;border:1px solid #303540;border-radius:9px;overflow:hidden;transition:border-color .2s,transform .2s;background:#1a1e26}.template-card:hover{border-color:#879567;transform:translateY(-2px)}.template-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.template-pick{display:block;padding:0;background:transparent;color:#e3e8ef;text-align:left;width:100%;border:0;border-radius:0}.template-pick:hover{background:#252b35}.template-pick img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:linear-gradient(130deg,#273d40,#3c3353)}.template-caption{display:block;padding:10px 8px 9px}.template-caption b{display:block;font-size:9px;font-weight:750;letter-spacing:.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.template-caption small{display:block;font-size:8px;font-weight:400;color:#9da6b6;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.favorite-button{position:absolute;top:4px;right:4px;width:24px;min-height:24px;line-height:1;padding:1px;border-radius:50%;background:#12151a8c;color:#d9deeb;font-size:15px;border:0;opacity:0}.template-card:hover .favorite-button,.favorite-button:focus-visible,.favorite-button[aria-pressed=true]{opacity:1}.favorite-button[aria-pressed=true]{color:var(--accent)}.delete-design{width:100%;min-height:28px;border-radius:0;background:#282b33;color:#c8bfbc;padding:2px;font-size:10px}.library-end{font-size:10px;line-height:1.8;text-align:center;color:#717988;padding:26px 0 4px}.empty-note{color:#9aa5b5;font-size:12px;padding:30px 6px;text-align:center}
.stage{position:sticky;top:0;display:flex;flex-direction:column;min-width:0;padding:24px 28px 30px;gap:0;max-height:calc(100dvh - 82px);overflow:auto;scrollbar-width:thin;scrollbar-color:#373b48 transparent}
.workspace-heading{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:21px;gap:12px}.workspace-heading h1{font-size:26px;line-height:1.2;font-weight:550;letter-spacing:.025em;margin:7px 0 0;overflow-wrap:anywhere}.workspace-heading .sub{font-size:10px;background:transparent;border-color:#414633;white-space:nowrap;min-height:34px;color:#d2dfba}
.canvas-meta{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:9px;color:#858d9d;margin-bottom:9px;letter-spacing:.035em}.loop-badge{color:var(--accent);font-size:9px}.loop-badge.optional{color:#a6aab6}
.stage-inner{position:relative;display:flex;justify-content:center;align-items:center;min-height:220px;border-radius:12px;border:1px solid #383d49;background:repeating-conic-gradient(#20232b 0 25%,#16191f 0 50%) 0 0/20px 20px;box-shadow:0 15px 35px #0003;width:100%;flex-shrink:0;overflow:hidden}
.preview-dock{width:100%;min-width:0;flex-shrink:0}
.studio canvas#cv{width:auto;max-width:100%}
canvas#cv{display:block;object-fit:contain;width:100%;height:auto;max-height:43vh;touch-action:pan-y}.nav-arrow{width:27px;height:40px;min-height:40px;opacity:0;font-size:23px;background:#10141e55;z-index:2;border-radius:7px;color:#fff}.stage-inner:hover .nav-arrow,.nav-arrow:focus-visible{opacity:.8}.nav-arrow.prev{left:7px}.nav-arrow.next{right:7px}
.transport{padding:12px 0 9px;gap:6px;width:100%;align-items:center}.transport button{min-height:30px;padding:5px 8px;font-size:10px;background:transparent;border-color:#353944}.transport #timecode{font-size:10px;color:#a5afbf}#seek{margin:4px 0 0;min-height:18px;cursor:pointer;accent-color:var(--accent)}.quick-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;width:100%;padding-bottom:20px}.quick-tools button{font-size:10px;min-height:31px;padding:5px 9px;background:transparent;border-color:#323844}.quick-tools [aria-pressed=true]{border-color:var(--accent);color:var(--accent)}.quick-note{font-size:8px;color:#778192;margin-left:auto}.safe-guide{position:absolute;inset:10%;border:1px dashed #ffffffe0;pointer-events:none;box-shadow:0 0 0 100px #0001}.safe-guide span{position:absolute;top:4px;left:6px;color:#fff;font-size:9px;text-shadow:0 1px 3px #000}
.variation-area{width:100%;border-top:1px solid #303440;padding:22px 0 0}.section-line{display:flex;justify-content:space-between;align-items:center;gap:12px}.section-line h2{font-size:18px;letter-spacing:.02em;font-weight:550;margin:6px 0 0}.tiny-label{font-size:9px;color:#818b9c}.variation-controls{display:flex;gap:7px;margin:17px 0 11px;flex-wrap:wrap}.generate-button{font-size:11px;background:#d1f391;flex:1}.variation-controls select{font-size:10px;width:auto;min-height:39px;padding:7px}.variation-controls .sub{font-size:10px;min-height:39px;padding:7px 10px}.lock-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:14px}.lock-row>span{font-size:9px;color:#8d96a5;margin-right:5px}.lock-row button{font-size:9px;padding:3px 8px;min-height:26px;border:1px solid #353b47;background:transparent;color:#9ca6b7;border-radius:20px}.lock-row button:before{content:'＋';margin-right:3px}.lock-row button[aria-pressed=true]{color:var(--accent);border-color:#8b9c6d;background:#253020}.lock-row button[aria-pressed=true]:before{content:'✓'}.variant-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.variant-card{position:relative;min-width:0;padding:0;overflow:hidden;border:1px solid #3d4654;border-radius:8px;background:#181c23}.variant-card img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}.variant-card span{position:absolute;bottom:5px;left:7px;font-size:9px;color:#fff;background:#10131888;padding:1px 5px;border-radius:3px}.variant-card:hover,.variant-card.selected{border-color:var(--accent)}#variationHint{margin-top:12px;font-size:10px}
.loop-review{width:100%;border:1px solid #425038;border-radius:10px;background:#171d19;padding:17px;margin:0 0 20px}.loop-review .section-line h2{font-size:16px}.loop-review>.hint{margin:10px 0}.loop-review .icon-button{border:0;width:28px;min-height:28px;font-size:22px}.seam-frames{display:flex;gap:10px;align-items:center;margin:14px 0}.seam-frames figure{margin:0;flex:1;min-width:0}.seam-frames canvas{display:block;width:100%;height:auto;max-height:180px;object-fit:contain;background:repeating-conic-gradient(#272b2e 0 25%,#171a1f 0 50%) 0 0/12px 12px;border-radius:5px}.seam-frames figcaption{color:#a6b39d;font-size:9px;margin-top:5px}.seam-frames>span{color:#a8b58c}#seamReport{font-size:10px}#seamReport.checked{color:#c2e39e}#measureSeam{white-space:nowrap;font-size:10px;min-height:32px}.loop-review .subtle{font-size:9px}
.panel{display:flex;border-left:1px solid #2b2d36;padding:0;background:#181a20;gap:0;height:calc(100dvh - 82px);position:sticky;top:0;min-width:0;overflow:hidden}.editor-tabs{display:flex;align-items:stretch;border-bottom:1px solid #30343e;flex-shrink:0;padding:8px 9px 0;gap:2px}.editor-tabs button{flex:1;background:transparent;color:#8f97a7;border-radius:0;border:0;border-bottom:2px solid transparent;min-height:47px;font-size:11px;padding:8px 3px;white-space:nowrap;font-weight:550}.editor-tabs button:hover{color:#e9eee5}.editor-tabs [aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}.editor-pane{overflow-y:auto;overscroll-behavior:contain;padding:6px 0 20px;scrollbar-width:thin;scrollbar-color:#373b48 transparent}.sec{border:0;border-bottom:1px solid #2c303a;border-radius:0;background:transparent;padding:20px 19px;gap:15px}.sec h2{font-size:12px;color:#e0e3ec;font-weight:650;letter-spacing:.025em}.sec:last-child{border-bottom:0}.row{gap:12px}.row>label{flex-basis:95px}.sec label.check{font-size:11px}.swatches{gap:5px}.swatches span{height:12px;border-radius:3px}.advanced{padding-top:11px;border-top-color:#323642}.advanced summary{font-size:11px}.advanced summary span{font-size:9px;display:block;margin:3px 0 0 14px}.detail-body{gap:13px}.detail-grid{gap:12px 10px}.detail-range>span{font-size:10px}.chips{gap:7px}.chips label.check{font-size:10px;background:#14171d;padding:8px 6px;border-color:#323847;align-items:center}.chips input{width:14px;height:14px}.chips label.check:has(input:checked){background:#263020;border-color:#7a9159}
.segmented{display:flex;gap:4px;background:#101217;padding:4px;border-radius:9px;border:1px solid #303641}.segmented button{flex:1;min-height:35px;padding:7px 2px;font-size:10px;color:#a6adbc;border-radius:6px;background:transparent}.segmented button.active{background:#353d2c;color:var(--accent);border-color:#526541}.upload-zone{padding:19px 9px;border:1px dashed #58634b;border-radius:9px;background:#1e251b;text-align:center;color:#cfdfa8;font-size:12px;font-weight:600;cursor:pointer;position:relative;gap:7px}.upload-zone:hover{background:#273221}.upload-zone:focus-within{outline:2px solid var(--accent);outline-offset:2px}.upload-zone input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.upload-zone small{font-size:9px;font-weight:400;color:#8d9b83}#logoControls,#imageControls{display:flex;flex-direction:column;gap:13px}.image-preview{position:relative}.image-preview img{display:block;width:100%;height:110px;object-fit:cover;border-radius:7px}.image-preview button{position:absolute;bottom:6px;right:6px;font-size:9px;min-height:26px;padding:3px 7px;background:#171b23d9}#imageName,#logoName{overflow-wrap:anywhere}.switch-label{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:12px}.switch-label b{display:block;font-size:14px;color:var(--accent)}.switch-label small{display:block;color:#98a68c;font-size:9px;margin-top:5px}.switch-label input{width:21px;height:21px}.loop-settings{background:#1e251b}.loop-settings .hint{font-size:10px}#loopInfo{font-size:10px;line-height:1.7;color:#bed892;background:#141a12;padding:10px;border:1px solid #3d4d32;border-radius:7px}#rec{flex:1;font-size:12px;padding:12px 8px}#png{font-size:10px}#status{font-size:11px;line-height:1.8;background:#11151b;padding:9px;border-radius:5px;min-height:30px}#exportedVideo{width:100%;max-height:220px;background:#07090d;border-radius:6px}
.mobile-nav{display:none}#studioToast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,10px);max-width:calc(100vw - 36px);padding:13px 20px;border:1px solid #5a674c;border-radius:12px;background:#26301feF;color:#e4f1d6;font-size:12px;box-shadow:0 5px 40px #0005;z-index:1000;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s}#studioToast.visible{opacity:1;transform:translate(-50%,0)}dialog{color:var(--text);background:#1b1e25;border:1px solid #49503e;border-radius:16px;padding:28px;max-width:440px;width:calc(100% - 32px);box-shadow:0 30px 100px #0008}dialog::backdrop{background:#05070bcc;backdrop-filter:blur(5px)}dialog h2{font-size:20px;font-weight:600;margin:10px 0 22px}dialog .hint{margin:13px 0 22px}dialog .row{justify-content:flex-end}.is-busy{pointer-events:none;opacity:.75}
@media(min-width:1600px){.app{grid-template-columns:310px minmax(0,1fr) 358px}.stage{padding:30px 40px}.template-caption b{font-size:10px}.template-caption small{font-size:9px}canvas#cv{max-height:48vh}}
@media(min-width:1100px) and (max-height:790px){.stage{padding-top:18px}.workspace-heading{margin-bottom:14px}.workspace-heading h1{font-size:23px}.stage-inner{min-height:160px}canvas#cv{max-height:36vh}.quick-tools{padding-bottom:13px}.variation-area{padding-top:14px}}
@media(max-width:1099px){
  .masthead{height:70px;padding:0 22px}.local-note,.back-tools{display:none}.studio-brand{font-size:14px}.studio-brand small{font-size:9px}.brand-symbol{font-size:35px}.primary-small{min-width:110px;font-size:11px}.primary-small span{margin-left:6px}
  .app{display:flex;flex-direction:column;max-width:900px;padding:0 20px}.stage{display:flex!important;position:relative;top:auto;padding:22px 0 16px;max-height:none;overflow:visible;width:100%}.workspace-heading{margin-bottom:14px}.workspace-heading h1{font-size:25px}.stage-inner{position:relative!important;top:auto!important;z-index:auto!important;box-shadow:0 14px 30px #0003!important;min-height:160px}.stage-inner canvas#cv{max-height:38vh!important}.nav-arrow{opacity:.75}.quick-note{display:none}.transport button{min-height:35px}.quick-tools{padding-bottom:14px}.variation-area{padding-top:17px}.variation-area .section-line h2{font-size:17px}
  .mobile-nav{display:flex;order:1;position:sticky;top:0;z-index:30;gap:5px;padding:8px;background:#101115f5;width:100%;border:1px solid #353946;border-radius:10px;backdrop-filter:blur(15px)}.mobile-nav button{flex:1;background:transparent;color:#9da7b8;font-size:12px;min-height:39px}.mobile-nav button.active{background:#2e3927;color:var(--accent);border-color:#50613c}
  .stage{order:0}.library,.panel{order:2;position:static;height:auto;max-height:none;width:100%;border:0;overflow:visible;margin:14px 0 28px;border-radius:12px;background:#181a20}.library{padding:20px}.library-top{margin-bottom:17px}.library-top h2{font-size:21px}.studio-presets{grid-template-columns:repeat(4,1fr);gap:13px}.template-caption b{font-size:10px}.template-caption small{font-size:9px}.favorite-button{opacity:1;min-height:30px;width:30px}.category-tabs{gap:7px}.category-tabs button{min-height:34px;font-size:11px;padding:6px 12px}.library-count>span,.text-button{font-size:11px}.editor-pane{overflow:visible;padding-bottom:10px}.editor-tabs{position:sticky;top:72px;z-index:20;background:#181a20;padding-top:6px;border-radius:12px 12px 0 0}.editor-tabs button{min-height:46px;font-size:12px}.sec{padding:22px 24px}.sec h2{font-size:14px}.row>label{flex-basis:140px}.detail-grid{grid-template-columns:repeat(3,1fr)}.advanced summary span{display:inline;margin-left:8px}.app[data-mode=library] .panel{display:none}.app[data-mode=edit] .library,.app[data-mode=export] .library{display:none}.panel{scroll-margin-top:78px}input[type=search],input[type=text],input[type=number],select,textarea{font-size:16px}.variation-controls select{font-size:12px}.search-wrap input{font-size:14px}.stage:has(.variant-card) .variation-area{padding-bottom:6px}
}
@media(max-width:599px){
  .masthead{height:66px;padding:0 13px;gap:8px}.studio-brand{font-size:11px;gap:7px;letter-spacing:.02em}.brand-symbol{font-size:29px}.studio-brand small{font-size:8px;max-width:160px}.header-actions{gap:4px}.header-actions .icon-button{width:30px;min-height:32px;font-size:21px}.primary-small{min-width:68px;font-size:10px;padding:8px}.primary-small span{display:none}.app{padding:0 13px}.stage{padding-top:19px}.workspace-heading h1{font-size:23px}.workspace-heading .sub{font-size:10px;min-height:34px}.eyebrow{font-size:8px}.canvas-meta{font-size:8px}.stage-inner{min-height:145px;border-radius:9px}.stage-inner canvas#cv{max-height:34vh!important}.transport{gap:4px}.transport button{font-size:9px;padding:5px 6px}.transport #timecode{font-size:9px}.transport #fullscreen{font-size:9px}.quick-tools{gap:5px}.quick-tools button{min-height:34px}.variation-controls{gap:6px;margin-top:13px}.generate-button{font-size:11px;min-height:41px;flex-basis:60%}.variation-controls select{flex:1;min-width:90px;font-size:12px}.variation-controls #surprise{flex:1;min-height:34px}.lock-row{margin-bottom:10px;gap:5px}.lock-row button{font-size:10px;min-height:32px;padding:4px 10px}.tiny-label{font-size:8px}.section-line h2{font-size:17px}.variant-grid{gap:6px}.variation-area{padding-top:15px}#variationHint{font-size:10px;margin-bottom:0}.library{padding:17px 13px}.library-top{padding-left:2px}.studio-presets{grid-template-columns:repeat(2,1fr);gap:12px}.template-caption{padding:11px}.template-caption b{font-size:11px}.template-caption small{font-size:10px}.favorite-button{top:6px;right:6px;min-height:34px;width:34px;font-size:20px}.category-tabs{gap:6px}.category-tabs button{min-height:34px;font-size:11px;padding:5px 11px}.sec{padding:20px 17px}.detail-grid{grid-template-columns:repeat(2,1fr)}.chips label.check{font-size:11px;min-height:42px}.chips input{width:17px;height:17px}.editor-tabs{padding-left:8px;padding-right:8px}.editor-tabs button{font-size:11px}.loop-review{padding:14px}.loop-review .section-line{gap:8px}.seam-frames{gap:8px}.loop-review .hint{font-size:10px}#studioToast{bottom:15px;padding:12px 15px;width:max-content;font-size:11px}.safe-guide span{font-size:8px}
}
@media(max-width:360px){.brand-light{display:block}.studio-brand small{display:none}.header-actions .icon-button{width:27px}.transport #fullscreen{margin-left:auto}.variation-controls select{min-width:85px}.lock-row button{padding:4px 8px}}
body.clean .masthead,body.clean .library,body.clean .panel,body.clean .workspace-heading,body.clean .canvas-meta,body.clean .mobile-nav,body.clean .variation-area,body.clean .quick-tools,body.clean .loop-review,body.clean .safe-guide{display:none!important}
body.clean .app{display:flex;min-height:100vh;padding:0;max-width:none}body.clean .stage{display:flex!important;padding:0;margin:auto;max-height:none;overflow:visible;width:100%;position:static}body.clean .stage-inner{border:0;box-shadow:none!important;background:#000;border-radius:0}body.clean canvas#cv{max-height:100vh!important}body.clean .transport{display:none}
@media(max-width:1099px){
  body.studio:not(.clean) .stage{display:contents!important}
  .workspace-heading{order:0;margin-top:20px}
  .preview-dock{order:1;position:sticky;top:0;z-index:35;background:#101115;padding-top:7px;box-shadow:0 5px 0 #101115}
  .quick-tools{order:2}.loop-review{order:3}.variation-area{order:4;margin-bottom:18px}
  .mobile-nav{order:5;top:var(--preview-height,260px)}.library,.panel{order:6}
  .editor-tabs{top:calc(var(--preview-height,260px) + 65px)}
  .panel{scroll-margin-top:calc(var(--preview-height,260px) + 76px)}
}
body.clean .preview-dock{position:static;padding:0;box-shadow:none}
#cancelExport{pointer-events:auto}
.app.is-busy{pointer-events:auto}
.template-caption b{font-size:11px}.template-caption small{font-size:10px}.category-tabs button{font-size:11px;min-height:32px}.editor-tabs button{font-size:12px}.sec h2{font-size:13px}
@media(max-width:1099px){.app[data-mode=library] .variation-area,.app[data-mode=export] .variation-area{display:none}}
.preview-dock{position:sticky;top:0;z-index:35;background:var(--bg)}
.format-bar{width:100%;padding:0 0 12px}
.format-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:12px;font-size:11px;color:#b8c0ce}
.format-heading>span{font-weight:650;letter-spacing:.04em}
.format-heading label{display:flex;align-items:center;flex-direction:row;font-size:10px;gap:7px;color:#8995a7}
.format-heading select{font-size:11px;min-height:28px;padding:3px 7px;width:90px;background:#161b22}
.ratio-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.ratio-choices button{display:flex;align-items:center;justify-content:center;gap:9px;padding:6px;min-height:44px;background:#181c23;color:#acb6c7;border:1px solid #38414e;font-size:11px;line-height:1.3}
.ratio-choices button:hover{background:#242d25;border-color:#71865b}
.ratio-choices button[aria-pressed=true]{color:var(--accent);border-color:#9db77d;background:#293321}
.ratio-choices button>span:last-child{display:flex;align-items:center;gap:7px}
.ratio-choices small{font-size:10px;opacity:.8;font-variant-numeric:tabular-nums;font-weight:500}
.ratio-icon{display:block;flex-shrink:0;width:22px;height:13px;border:1.5px solid currentColor;border-radius:2px;opacity:.8}
[data-ratio="9:16"] .ratio-icon{width:12px;height:21px}
[data-ratio="1:1"] .ratio-icon{width:17px;height:17px}
[data-ratio="4:5"] .ratio-icon{width:16px;height:20px}
.category-count{margin-left:5px;font-size:9px;opacity:.65;font-variant-numeric:tabular-nums}
@media(max-width:1300px){.ratio-choices button>span:last-child{flex-direction:column;gap:1px}}
@media(max-width:599px){.format-heading select{font-size:16px;width:99px;min-height:31px;padding:2px 5px}.format-heading{margin-bottom:6px}.format-bar{padding-bottom:10px}.ratio-choices button{font-size:10px;gap:6px;min-height:42px}.ratio-choices small{font-size:10px}.ratio-icon{width:19px;height:12px}[data-ratio="9:16"] .ratio-icon{width:11px;height:19px}[data-ratio="1:1"] .ratio-icon{width:15px;height:15px}[data-ratio="4:5"] .ratio-icon{width:14px;height:18px}}
@media(max-width:1099px) and (max-height:550px){.format-bar{padding-bottom:6px}.format-heading{margin-bottom:4px}.ratio-choices button{min-height:31px}.ratio-choices button>span:last-child{flex-direction:row;gap:4px}.format-heading select{min-height:25px;font-size:12px}.format-heading{font-size:10px}}
#contentSwitch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
#contentSwitch button{font-size:12px;min-height:40px}
.layer-position{display:flex;flex-direction:column;gap:9px;padding-top:12px;border-top:1px solid #303641}
.layer-label{font-size:11px;color:#a6adbc}
.placement-buttons{display:flex;gap:6px}
.placement-buttons button{flex:1;min-height:36px;background:#262d36;color:#dce2ed;font-size:11px;padding:6px}
.text-placement-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.text-placement-grid button{min-height:42px}
.text-placement-grid [aria-pressed=true],.motion-background-grid [aria-pressed=true]{border-color:#c1e884;background:#303e28;color:#d5f7a7}
.motion-library summary{cursor:pointer;font-size:12px;color:#dce2ed;padding:6px 0}
.motion-library summary span{display:block;font-size:10px;color:#a7c887;margin-top:6px}
.motion-library[open]>:not(summary){margin-top:14px}
.motion-background-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.motion-background-grid button{padding:0;overflow:hidden;background:#222831;color:#dce2ed;min-width:0}
.motion-background-grid img{display:block;width:100%;height:auto;aspect-ratio:16/9}
.motion-background-grid span{display:block;padding:9px 4px;font-size:10px}
#chooseBackdrop{width:100%;font-size:11px}
@media(max-width:1099px){#contentSwitch,#logoControls,.text-placement-grid{scroll-margin-top:calc(var(--preview-height,260px) + 130px)}}
body.clean .format-bar{display:none}
body.clean .preview-dock{position:static;background:transparent}
@media(max-width:1099px) and (max-height:550px){.stage-inner canvas#cv{max-height:25vh!important}.stage-inner{min-height:90px}.transport{padding-top:5px;padding-bottom:4px}.transport button{min-height:26px}.editor-tabs button{min-height:35px}.mobile-nav{padding:4px}.mobile-nav button{min-height:30px}.editor-tabs{top:calc(var(--preview-height,180px) + 43px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}