/* MDG Frame: theme-aware application chrome. Artwork is never recoloured. */
:root{
  --studio-bg:#071d2b;--studio-fg:#f0fbff;--studio-card:#0d2a3a;--studio-surface:#113649;
  --studio-primary:#70e8f2;--studio-on-primary:#052a34;--studio-secondary:#7026d9;--studio-muted:#b7d7e4;
  --studio-border:#36647b;--studio-input:#45758d;--studio-ring:#94f1f8;--studio-sidebar:#092431;
  --studio-tint:#103e3c;--studio-highlight:#61dfb5;--studio-danger:#ffb9c5;
  --paper:var(--studio-bg);--white:var(--studio-card);--ink:var(--studio-fg);--muted:var(--studio-muted);
  --line:color-mix(in srgb,var(--studio-border) 65%,transparent);--accent:var(--studio-primary);
  --lime:var(--studio-highlight);--selection:var(--studio-primary);--orange:var(--studio-danger);
  --panel:var(--studio-card);--sidebar-panel:var(--studio-sidebar);--panel-shadow:0 12px 35px #00000012;
  --aura-shadow:0 8px 24px color-mix(in srgb,var(--studio-primary) 15%,transparent);--hover-lift:translateY(-2px);
  --prism:color-mix(in srgb,var(--studio-primary) 65%,var(--studio-border));--header-height:80px;
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;color:var(--studio-fg);color-scheme:dark;
}
html[data-theme=light]{color-scheme:light}
html[data-glass=on]{--panel:color-mix(in srgb,var(--studio-card) 82%,transparent);--sidebar-panel:color-mix(in srgb,var(--studio-sidebar) 86%,transparent);--panel-shadow:0 18px 45px #00000020,inset 0 1px 0 #ffffff0a}
html[data-aura-lift=off]{--aura-shadow:0 0 0 transparent;--hover-lift:none}
html[data-hover-edges=off]{--prism:var(--line)}
html[data-glass=off] :is(.topbar,.h-sidebar,.rail,.library,.inspector,.v-media,.v-inspector){backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-glass=on] :is(.h-hero,.h-formats button,.h-project-card,.h-folder-card){backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body{font-size:14px;background:var(--studio-bg);color:var(--ink)}
html[data-glass=on] body{background:radial-gradient(ellipse at 90% 0,color-mix(in srgb,var(--studio-primary) 10%,transparent),transparent 48%),radial-gradient(ellipse at 10% 100%,color-mix(in srgb,var(--studio-secondary) 9%,transparent),transparent 55%),var(--studio-bg)}
html[data-theme=green][data-glass=on] body{background:radial-gradient(ellipse at 90% 0,color-mix(in srgb,var(--studio-highlight) 7%,transparent),transparent 55%),var(--studio-bg)}
:is(button,a,summary,input,select,textarea){transition:background-color .16s,border-color .16s,box-shadow .16s,transform .16s}
:is(button,a,summary,input,select,textarea):focus-visible{outline:3px solid var(--studio-ring);outline-offset:3px}
button:disabled{opacity:.45}
input:not([type=color]):not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea,.field input:not([type=color]):not([type=range]):not([type=checkbox]),.field select,.field textarea,.v-settings-form .field input:not([type=checkbox]),.v-settings-form .field select{
  background:var(--studio-bg);color:var(--ink);border-color:var(--studio-input);border-radius:8px;
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.8}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--accent)}
.button{border-radius:10px;padding:11px 17px;gap:9px;font-size:13px;font-weight:650;min-height:40px}
.button.primary,.chip.active,.h-categories button.active,.v-play{background:var(--accent);color:var(--studio-on-primary);border-color:var(--accent)}
.button.primary:hover{background:color-mix(in srgb,var(--accent) 90%,var(--studio-fg))}
.button.secondary{background:var(--studio-card);border-color:var(--line);color:var(--ink)}
.quiet-button,.icon-button{border-radius:8px;color:var(--muted)}
.quiet-button{font-size:12px;padding:8px 10px}
.icon-button{width:34px;height:34px}
@media(hover:hover){
  :is(.button.secondary,.quiet-button,.icon-button,.chip,.h-categories button,.shape-button,.text-preset,.pair-card,.palette-actions button,.layer-row,.segmented button):not(:disabled):not(.active):hover{background:color-mix(in srgb,var(--accent) 9%,var(--studio-card));color:var(--ink);box-shadow:var(--aura-shadow);border-color:var(--prism)}
  :is(.button,.h-formats button,.h-folder-card,.h-template-card,.h-project-card,.a-theme):not(:disabled):hover{box-shadow:var(--aura-shadow);transform:var(--hover-lift);outline:1px solid var(--prism);outline-offset:0}
}
.topbar{height:var(--header-height);padding:0 28px;gap:18px;background:var(--sidebar-panel);border-color:var(--line);position:relative;z-index:21;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.topbar .brand{width:auto;gap:12px;font:inherit;letter-spacing:normal;order:0}
.brand img{width:42px;height:42px;flex:none;filter:drop-shadow(0 4px 8px #00000015)}
.brand-wordmark{display:flex;flex-direction:column;gap:4px}
.brand-wordmark strong{font-size:19px;letter-spacing:-.65px;font-weight:750;line-height:1;white-space:nowrap}
.brand-wordmark small{font-size:8px;letter-spacing:1.8px;color:var(--muted);font-weight:650;line-height:1.3}
.home-mode .topbar .brand{width:auto;margin-right:auto}
#back-home{order:1;font-size:12px}.mode-switch{order:2;background:var(--studio-bg);border-color:var(--line);border-radius:10px;padding:4px}
.mode-switch button{font-size:12px;padding:7px 11px;color:var(--muted)}
.mode-switch .active{background:var(--studio-tint);color:var(--accent);box-shadow:none;border-radius:7px}
.project-heading{order:3}.project-heading input,.v-heading input{background:transparent!important;border:0;color:var(--ink)}
.save-state{font-size:10px;color:var(--muted)}.top-actions{order:4;gap:5px}
.h-top-actions{order:4;gap:10px}.h-local-pill{font-size:11px;color:var(--muted);gap:8px;margin-right:14px}
.h-top-actions #h-import svg{display:none}
.status-dot{background:var(--studio-highlight);width:6px;height:6px;box-shadow:0 0 9px color-mix(in srgb,var(--studio-highlight) 35%,transparent)}
.appearance-trigger{order:5;border:1px solid var(--line);background:var(--studio-card);border-radius:10px;min-height:40px;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;color:var(--ink);font-size:12px;flex:none}
.appearance-trigger svg{width:17px;height:17px;color:var(--accent)}
#appearance-name{font-size:10px;color:var(--muted);display:block;margin-top:2px;text-align:left}.appearance-trigger strong{font-size:11px;font-weight:600;display:block;text-align:left}
/* A clear dashboard with a persistent library and a focused creation area. */
#home-workspace{height:calc(100dvh - var(--header-height));grid-template-columns:228px minmax(0,1fr);background:transparent}
.h-sidebar{padding:28px 16px 20px;background:var(--sidebar-panel);border-color:var(--line);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.h-workspace-label{display:flex;align-items:center;gap:10px;padding:0 9px 27px;font:inherit;letter-spacing:0;color:var(--ink)}
.h-workspace-avatar{width:34px;height:34px;display:grid;place-items:center;background:var(--studio-tint);border:1px solid var(--line);border-radius:9px;color:var(--accent);font-size:15px;font-weight:750}
.h-workspace-label strong{font-size:12px;font-weight:650;display:block}.h-workspace-label small{font-size:10px;color:var(--muted);display:block;margin-top:3px}
.h-sidebar button{font-size:13px;gap:12px;padding:12px 13px;border-radius:10px;color:var(--muted);font-weight:500}
.h-sidebar button>span:first-child{width:20px;display:flex;align-items:center;justify-content:center;color:inherit}
.h-sidebar button svg,.h-folder-card svg{width:19px;height:19px}
.h-sidebar button.active{background:var(--studio-tint);color:var(--accent);box-shadow:inset 3px 0 var(--accent)}
.h-sidebar button.active>span:first-child{color:var(--accent)}
.h-sidebar button:not(.active):hover{background:var(--studio-surface);color:var(--ink)}
.h-folder-heading{font-size:10px;letter-spacing:1.2px;color:var(--muted);margin:32px 13px 10px}.h-folder-heading button{border:1px solid var(--line);width:25px;height:25px;padding:0;color:var(--muted);font-size:20px}
.h-folder-empty{font-size:11px;color:var(--muted);line-height:1.7;padding:5px 13px}
#h-folder-nav button{font-size:12px}#h-folder-nav small{font-size:10px;color:var(--muted);background:var(--studio-surface);padding:2px 6px;border-radius:5px}
.h-local-note{border-top:1px solid var(--line);color:var(--muted);font-size:11px;padding:20px 9px 0;gap:9px}.h-local-note strong{font-size:11px;color:var(--ink);font-weight:500}.h-local-note small{font-size:10px;color:var(--muted);margin-top:6px}
.h-main{padding:32px 38px 64px;overflow:auto;scrollbar-gutter:stable;background:transparent}
.h-welcome{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}
.h-welcome h2{font-size:22px;font-weight:650;letter-spacing:-.7px}.h-welcome p{font-size:12px;color:var(--muted);margin-top:5px}.h-welcome>span{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.h-hero{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:22px;min-height:330px;padding:38px 40px;border:1px solid var(--line);border-radius:22px;background:var(--panel);box-shadow:var(--panel-shadow);position:relative;overflow:hidden;isolation:isolate}
.h-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 95% 25%,color-mix(in srgb,var(--studio-secondary) 22%,transparent),transparent 55%),radial-gradient(ellipse at 70% 95%,color-mix(in srgb,var(--studio-primary) 10%,transparent),transparent 50%)}
.h-eyebrow{font-size:10px;font-weight:650;letter-spacing:2px;color:var(--accent);display:block}
.h-hero h1,.h-page-heading h1{font-family:inherit;font-size:clamp(35px,3.7vw,60px);font-weight:750;letter-spacing:-2.4px;line-height:1.08;margin:18px 0;color:var(--ink)}
.h-hero h1>span{color:var(--accent)}
.h-hero p,.h-page-heading p{font-size:13px;line-height:1.8;max-width:330px;color:var(--muted);margin:0}
.h-hero-buttons{gap:9px;margin-top:24px;flex-wrap:wrap}.h-hero-buttons .button{font-size:12px;padding:11px 15px}
.h-hero-art{position:relative;width:100%;max-width:370px;height:240px;margin:0 auto;max-height:none;min-width:0;display:block}
.h-studio-preview{position:absolute;inset:8px 10px 25px 6px;border:1px solid color-mix(in srgb,var(--studio-ring) 40%,var(--studio-border));border-radius:15px;background:var(--studio-card);box-shadow:0 24px 45px #00000035;transform:rotate(-4deg);overflow:hidden}
.h-preview-toolbar{height:26px;display:flex;align-items:center;gap:4px;padding:0 12px;border-bottom:1px solid var(--line)}.h-preview-toolbar i{width:4px;height:4px;background:var(--muted);border-radius:50%;opacity:.6}.h-preview-toolbar span{font-size:7px;letter-spacing:1.2px;margin-left:auto;color:var(--muted)}
.h-preview-design{position:relative;margin:10px;height:calc(100% - 46px);border-radius:7px;overflow:hidden;background:#101d34;display:flex;align-items:center;padding:22px}
.h-preview-design svg{position:absolute;width:100%;height:100%;inset:0}.h-preview-type{position:relative;color:#f6f6fe;font-size:30px;font-weight:800;letter-spacing:-1.5px;line-height:.97}.h-preview-type span{color:#84eff0}.h-preview-type small{display:block;font-size:6px;letter-spacing:1.8px;margin-top:15px;color:#cbd7e4;font-weight:500}
.h-art-tag{position:absolute;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--studio-card);border-radius:10px;padding:11px 14px;box-shadow:0 10px 25px #00000025;font-size:10px;font-weight:600;color:var(--ink)}.h-art-tag svg{color:var(--accent);width:16px;height:16px}
.h-art-tag.h-art-video{right:-8px;bottom:8px;transform:rotate(3deg)}.h-art-tag.h-art-design{left:-9px;top:-3px;transform:rotate(3deg)}
.h-art-video i{height:18px;width:2px;background:var(--accent);border-radius:2px;margin:0 -4px}.h-art-video i:nth-of-type(2n){height:10px;background:var(--studio-highlight)}
html[data-headline-motion=on] .h-studio-preview{animation:studio-float 7s ease-in-out infinite}html[data-headline-motion=on] .h-art-video{animation:studio-tag 8s ease-in-out infinite}
@keyframes studio-float{50%{transform:translateY(-7px) rotate(-2deg)}}@keyframes studio-tag{50%{transform:translateY(4px) rotate(-2deg)}}
.h-format-heading{font-size:12px;font-weight:650;color:var(--ink);margin:26px 0 12px;display:flex;align-items:center;gap:9px}.h-format-heading span{height:1px;flex:1;background:var(--line)}
.h-formats{gap:10px;margin:0 0 34px}.h-formats button{background:var(--panel);border-color:var(--line);border-radius:12px;padding:18px 9px 15px;min-width:0}
.h-formats button>span{display:grid;place-items:center;width:37px;height:37px;border:1px solid var(--line);border-radius:10px;margin:0 auto 12px;background:var(--studio-tint);color:var(--accent);font-size:22px}
.h-formats button svg{width:21px;height:21px}.h-formats button:nth-child(2n)>span{color:var(--studio-highlight)}
.h-formats button:hover{background:color-mix(in srgb,var(--accent) 8%,var(--studio-card));border-color:var(--prism)}
.h-formats strong{font-size:11px;font-weight:600;color:var(--ink)}.h-formats small{font-size:9px;color:var(--muted);margin-top:6px}
.h-section{margin-top:32px}.h-section-header{margin-bottom:19px;gap:15px}.h-section-header h2{font-family:inherit;font-size:20px;font-weight:650;letter-spacing:-.6px;color:var(--ink)}.h-section-header p{font-size:11px;line-height:1.7;color:var(--muted);margin-top:6px}
.h-section-header>.quiet-button{font-size:12px;white-space:nowrap;color:var(--accent)}
.h-project-controls{gap:9px;margin-bottom:18px}.h-project-controls .search-input{font-size:12px;padding:11px 13px;border-color:var(--line);margin:0}.h-project-controls select{font-size:11px;padding:10px;border-color:var(--line);border-radius:8px;background:var(--studio-bg);color:var(--ink)}.h-layout-button{background:var(--studio-card);border:1px solid var(--line);color:var(--muted);height:39px;width:39px;border-radius:8px;display:grid;place-items:center}
.h-project-grid,.h-template-grid{gap:22px 16px}.h-project-card{border-color:var(--line);background:var(--panel);border-radius:13px;box-shadow:none}.h-project-card:hover{border-color:var(--prism)}
.h-project-visual{height:180px;background:var(--studio-surface);border-radius:12px 12px 0 0}.h-project-open{padding:18px}.h-project-info{padding:16px}.h-project-title{font-size:13px;font-weight:650;color:var(--ink)}.h-project-info>small{font-size:10px;color:var(--muted);margin-top:6px}.h-project-footer{margin-top:14px;gap:8px}.h-project-footer>span{font-size:10px;color:var(--muted)}
.h-kind,.h-video-badge{background:var(--studio-card);border:1px solid var(--line);color:var(--muted);font-size:8px;border-radius:5px;padding:5px 7px}.h-select{background:var(--studio-card);border:1px solid var(--line);border-radius:5px;padding:4px}.h-select input{width:14px;height:14px}.h-star{color:var(--muted);font-size:21px}.h-star.active{color:var(--accent)}
.h-project-menu summary{color:var(--muted);border-radius:5px}.h-project-menu[open] summary{background:var(--studio-tint);color:var(--accent)}.h-project-menu>div{background:var(--studio-card);border-color:var(--line);width:175px;border-radius:9px;box-shadow:0 10px 30px #00000040}.h-project-menu button{font-size:12px;padding:10px}.h-project-menu button:hover{background:var(--studio-surface)}
.h-bulk-bar{background:var(--studio-tint);border-color:var(--line);font-size:12px;border-radius:9px}.h-bulk-bar button{background:var(--studio-card);color:var(--ink);font-size:11px;border-radius:6px}
.h-storage-note{font-size:10px;color:var(--muted);line-height:1.7;margin-top:16px}
.h-empty{background:var(--panel);border-color:var(--line);border-radius:13px;padding:34px}.h-empty>span{color:var(--accent)}.h-empty h3{font-family:inherit;font-size:20px;font-weight:600;color:var(--ink)}.h-empty p{font-size:12px;color:var(--muted)}.h-empty .button{font-size:12px}
.h-folders{gap:12px}.h-folder-card{background:var(--panel);border-color:var(--line);border-radius:11px;padding:19px 16px;gap:12px}.h-folder-card:hover{background:var(--studio-surface)}.h-folder-card>span:first-child{color:var(--accent);width:29px;display:grid;place-items:center}.h-folder-card strong{font-size:12px;color:var(--ink);font-weight:600}.h-folder-card small{font-size:10px;color:var(--muted)}.h-arrow{color:var(--muted)}
.h-first-folder{background:var(--panel);border-color:var(--line);color:var(--muted);font-size:12px;padding:18px 22px;border-radius:12px}.h-first-folder .button{font-size:12px}
.h-categories{gap:7px;margin:17px 0 22px}.h-categories button{background:var(--studio-card);border-color:var(--line);color:var(--muted);font-size:11px;padding:8px 13px}
.h-template-art{background:var(--studio-surface);border-color:var(--line);border-radius:12px;height:210px;padding:16px}.h-template-card:hover .h-template-art{transform:none;border-color:var(--prism);box-shadow:none}
.h-template-card>strong{font-size:13px;color:var(--ink);font-weight:600;margin:12px 0 6px}.h-template-card>small{font-size:10px;color:var(--muted);line-height:1.6}.h-template-search{max-width:470px}.h-empty-small{background:var(--studio-surface);color:var(--muted);font-size:12px}.h-page-heading{margin:10px 0 28px}.h-page-heading h1{font-size:42px;letter-spacing:-1.7px}.h-page-heading p{max-width:600px}
.h-error{color:var(--studio-danger);background:var(--studio-surface)}
/* Design editor and video editor use the same surfaces and control language. */
.workshop{height:calc(100dvh - var(--header-height))}.rail,.library,.inspector,.v-media,.v-inspector{background:var(--sidebar-panel);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-color:var(--line)}
.rail button{color:var(--muted);font-size:10px;border-radius:10px}.rail button:hover{background:var(--studio-surface)}.rail button.active{background:var(--studio-tint);color:var(--accent)}
.library h2,.inspector h2,.v-media h2,.v-inspector h2{font-family:inherit;font-weight:650;color:var(--ink)}.library #library-content{padding-top:24px}.subtitle,.section-label,.library-foot,.tiny-text{color:var(--muted)}.subtitle{font-size:12px}.library-foot{border-color:var(--line)}
.editor,#video-workspace{background:var(--studio-bg)}.canvas-toolbar,.editor-footer,.pages-strip,.v-header,.v-timeline{background:var(--panel);border-color:var(--line);color:var(--muted)}.breadcrumbs,.breadcrumbs strong{color:var(--muted)}
.canvas-area:not([data-surface=dark]):not([data-surface=checker]),.v-preview{background-color:var(--studio-bg);background-image:radial-gradient(color-mix(in srgb,var(--studio-muted) 24%,transparent) .7px,transparent .7px);background-size:16px 16px}
.canvas-area[data-surface=dark]{background:#202735}.canvas-area[data-surface=checker]{background-color:#e7e9e3}
.artboard-shell{box-shadow:0 12px 40px #00000030}.chip,.shape-button,.text-preset,.pair-card,.palette-option,.palette-card,.palette-actions button,.layer-row,.export-option,.v-reorder button,.v-duplicate-delete button{background:var(--studio-card);border-color:var(--line);border-radius:8px}
.chip{font-size:11px}.chip.active{color:var(--studio-on-primary)}.template-art,.upload-card,.project-preview,.page-thumb-art{background:var(--studio-surface);border-color:var(--line)}.template-card:hover .template-art{border-color:var(--prism);box-shadow:var(--aura-shadow);transform:var(--hover-lift)}
.segmented{border-color:var(--line);border-radius:8px}.segmented button.active,.layer-row.active{background:var(--studio-tint);border-color:var(--accent);color:var(--ink)}.segmented button:hover{background:var(--studio-surface)}
.note-card,.upload-zone,.v-format-notice{background:var(--studio-surface);color:var(--muted);border-color:var(--line);border-radius:9px}.color-field input[type=color]{background:var(--studio-bg);border-color:var(--line)}.add-page{color:var(--muted)}
.pair-card:hover,.text-preset:hover,.shape-button:hover{background:var(--studio-surface)}
#video-workspace{height:calc(100dvh - var(--header-height))}.v-asset-visual{background:var(--studio-surface);border-color:var(--line);border-radius:8px}.v-asset-visual span,.v-preview-caption,.v-track-label,.v-track-empty,.v-footer-note{color:var(--muted)}
.v-preview-empty h2,.v-export-progress h2{font-family:inherit;font-weight:650;letter-spacing:-1px}.v-preview-empty p{color:#c2d0df}.v-transport .quiet-button,.v-secondary-tracks button{background:var(--studio-card);border-color:var(--line);color:var(--ink);border-radius:7px}.v-clip,.v-clip.video-clip{background:var(--studio-surface);border-color:var(--line);border-radius:8px;color:var(--ink)}.v-clip.active,.v-clip.video-clip.active{background:var(--studio-tint);border-color:var(--accent)}.v-clip small{color:var(--muted)}.v-secondary-tracks button.active{border-color:var(--accent)}.v-track-empty{border-color:var(--line)}
dialog{background:var(--studio-card);border-color:var(--line);color:var(--ink);border-radius:17px;box-shadow:0 25px 90px #00000045}dialog::backdrop{background:#03071399;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}.modal-header h2{font-family:inherit;font-weight:650}.export-option:hover{background:var(--studio-surface);border-color:var(--prism)}kbd{background:var(--studio-surface);color:var(--ink);border-color:var(--line);border-radius:5px}.danger{color:var(--studio-danger)}#toast{background:var(--studio-card);border:1px solid var(--line);color:var(--ink);box-shadow:0 10px 35px #00000035;border-radius:10px}
/* The appearance drawer is modal, scrollable, and never covers a focused editor field. */
#appearance-dialog{width:460px;max-width:calc(100vw - 24px);height:calc(100dvh - 24px);max-height:calc(100dvh - 24px);margin:12px 12px 12px auto;padding:0;overflow:hidden;border-radius:20px}
#appearance-dialog[open]{display:flex;flex-direction:column}
.a-header{padding:25px 25px 20px;display:flex;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);flex:none;background:var(--panel)}.a-header>div{flex:1;min-width:0}.a-eyebrow{color:var(--accent);font-size:9px;letter-spacing:1.8px;font-weight:650}.a-header h2{font-size:25px;letter-spacing:-.9px;font-weight:650;line-height:1.2;margin:11px 0 7px}.a-header p{font-size:12px;color:var(--muted);line-height:1.6}.a-header .icon-button{flex:none}
.a-body{padding:24px;overflow:auto;min-height:0;flex:1}.a-body fieldset{border:0;padding:0;margin:0 0 28px;min-width:0}.a-body legend{font-size:14px;font-weight:650;margin-bottom:8px;padding:0}.a-description{font-size:11px;color:var(--muted);line-height:1.6;margin-bottom:14px}.a-themes{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.a-theme{position:relative;background:var(--studio-bg);border:1px solid var(--line);border-radius:11px;padding:9px;cursor:pointer;min-width:0;display:flex;flex-direction:column;transition:.16s}
.a-theme input{position:absolute;opacity:0;width:1px;height:1px}.a-theme:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.a-theme:has(input:focus-visible){outline:3px solid var(--studio-ring);outline-offset:3px}
.a-theme-preview{display:block;height:66px;border-radius:7px;background:var(--preview-bg);position:relative;overflow:hidden;border:1px solid #ffffff18}.a-theme-preview i{position:absolute;inset:8px 70% 8px 8px;background:var(--preview-card);border-radius:3px}.a-theme-preview b{position:absolute;top:14px;left:36%;width:45%;height:5px;border-radius:2px;background:var(--preview-text)}.a-theme-preview em{position:absolute;left:36%;top:26px;width:32%;height:3px;border-radius:2px;background:var(--preview-text);opacity:.5}.a-theme-preview>span{position:absolute;inset:38px 12px 8px 36%;border-radius:3px;background:linear-gradient(110deg,var(--preview-primary),var(--preview-highlight))}
.a-theme-name{font-size:11px;font-weight:650;display:flex;align-items:center;gap:4px;margin:9px 2px 4px;line-height:1.5}.a-theme small{font-size:9px;color:var(--muted);line-height:1.5;margin:0 2px 3px;min-height:27px}.a-selected{color:var(--accent);visibility:hidden;margin-left:auto}.a-theme:has(input:checked) .a-selected{visibility:visible}.a-system-preview{height:66px;border-radius:7px;background:linear-gradient(90deg,#edf2f8 50%,#19273c 50%);color:#70e5df;display:grid;place-items:center;font-size:29px;border:1px solid var(--line)}
.a-effect{display:flex;align-items:center;gap:12px;position:relative;padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer}.a-effect>span:first-child{flex:1;min-width:0}.a-effect strong{display:block;font-size:12px;font-weight:650}.a-effect small{display:block;font-size:11px;color:var(--muted);line-height:1.65;margin-top:5px}.a-effect input{position:absolute;right:0;opacity:0;width:42px;height:28px}.a-switch{width:40px;height:23px;background:var(--studio-surface);border:1px solid var(--studio-input);border-radius:20px;flex:none;position:relative;transition:.16s}.a-switch:before{content:"";width:15px;height:15px;position:absolute;left:3px;top:3px;border-radius:50%;background:var(--muted);transition:.16s}.a-effect input:checked+.a-switch{background:var(--accent);border-color:var(--accent)}.a-effect input:checked+.a-switch:before{background:var(--studio-on-primary);transform:translateX(17px)}.a-effect input:focus-visible+.a-switch{outline:3px solid var(--studio-ring);outline-offset:3px}.a-footnote{font-size:11px;line-height:1.7;color:var(--muted);background:var(--studio-surface);padding:13px 15px;border-radius:9px}
.a-footer{padding:17px 24px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;flex-wrap:wrap;background:var(--studio-card)}.a-footer .button{font-size:12px}.a-footer #appearance-status{font-size:10px;color:var(--muted);order:3;flex-basis:100%;min-height:14px}.a-footer #appearance-status:empty{display:none}
html[data-density=compact] .h-main{padding-top:23px}html[data-density=compact] .h-section{margin-top:24px}html[data-density=compact] .h-formats button{padding-top:12px;padding-bottom:12px}html[data-density=compact] .h-project-grid,html[data-density=compact] .h-template-grid{gap:16px 12px}html[data-density=compact] .h-project-info{padding:12px}html[data-density=compact] .h-sidebar button{padding-top:9px;padding-bottom:9px}html[data-density=compact] .library #library-content,html[data-density=compact] .inspector #inspector-content{padding-top:18px}html[data-density=compact] .inspector-group{padding:13px 0}html[data-density=compact] .v-media,html[data-density=compact] .v-inspector{padding-top:14px}
@media(min-width:1600px){.h-main{padding:38px 60px 70px}.h-hero{padding:44px 50px}.h-hero-art{max-width:440px;height:280px}.h-preview-type{font-size:42px}.h-hero h1{font-size:64px}.h-project-grid,.h-template-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:1150px){.topbar{padding:0 18px;gap:12px}.brand-wordmark strong{font-size:17px}.brand-wordmark small{font-size:7px;letter-spacing:1.2px}.h-local-pill{display:none}#home-workspace{grid-template-columns:205px minmax(0,1fr)}.h-main{padding:28px 26px 55px}.h-hero{padding:29px;gap:12px;min-height:310px}.h-hero h1{font-size:43px}.h-hero-art{height:215px}.h-preview-type{font-size:26px}.appearance-trigger{padding:9px}.top-actions .button{padding:10px 12px}.topbar:not(.home-mode .topbar) .brand-wordmark small{display:none}}
@media(max-width:1000px){body:not(.home-mode) .brand-wordmark{display:none}.h-hero-art{height:200px}.h-hero-buttons .button{font-size:11px;padding:10px 12px}.appearance-trigger>span{display:none}.appearance-trigger{width:39px;padding:9px}.h-formats strong{font-size:11px}.h-project-visual{height:160px}.h-template-art{height:185px}}
@media(max-width:900px){:root{--header-height:72px}.topbar{height:var(--header-height)}#home-workspace{grid-template-columns:185px minmax(0,1fr)}.h-sidebar{padding:24px 12px 16px}.h-workspace-label{padding:0 6px 22px}.h-sidebar button{font-size:12px;padding:11px;gap:9px}.h-main{padding:24px 22px 50px}.h-hero{padding:25px;min-height:280px;grid-template-columns:1fr .85fr}.h-hero h1{font-size:38px;letter-spacing:-1.7px}.h-hero p{font-size:12px}.h-hero-art{height:195px;max-width:100%}.h-preview-design{padding:14px}.h-preview-type{font-size:23px}.h-art-tag{padding:9px 10px;font-size:9px}.h-art-design{display:none}.h-art-video i{display:none}.h-section-header h2{font-size:19px}.h-formats{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.h-project-grid,.h-template-grid,.h-folders{grid-template-columns:repeat(2,minmax(0,1fr))}.h-welcome>span{display:none}.h-welcome h2{font-size:21px}.h-project-controls{flex-wrap:wrap}.h-project-controls .search-input{flex-basis:100%}.h-project-controls select{flex:1;max-width:none}.top-actions .button{font-size:11px}.mode-switch button{font-size:11px;padding:7px 9px}}
@media(max-width:730px){
  :root{--header-height:68px}.topbar{padding:0 14px;gap:8px}.brand img{width:35px;height:35px}.brand-wordmark strong{font-size:16px}.brand-wordmark small{font-size:7px;letter-spacing:1px}.topbar .brand{gap:9px}.h-top-actions{gap:7px}.h-top-actions .button{padding:9px 12px;font-size:11px;min-height:37px}.appearance-trigger{min-height:37px;width:37px;padding:8px}
  #home-workspace{display:flex;flex-direction:column}.h-sidebar{padding:11px 14px 9px;max-height:162px;flex-shrink:0;border-bottom:1px solid var(--line);border-right:0}.h-workspace-label,.h-local-note,.h-folder-empty{display:none}.h-sidebar nav{display:flex;gap:5px;overflow:auto;padding:0 0 2px}.h-sidebar nav button{width:auto;flex-shrink:0;padding:9px 10px;font-size:11px;gap:7px}.h-sidebar nav button>span:first-child{width:17px}.h-sidebar nav button svg{width:16px;height:16px}.h-sidebar button.active{box-shadow:none}.h-folder-heading{margin:10px 7px 5px;font-size:9px}.h-folder-heading button{height:22px;width:24px}#h-folder-nav{display:flex;gap:7px;overflow:auto}#h-folder-nav button{border-color:var(--line);font-size:11px;padding:7px 10px;gap:7px;width:auto;flex-shrink:0}#h-folder-nav span:first-child{width:15px}#h-folder-nav svg{width:15px;height:15px}
  .h-main{padding:24px 22px 50px;min-height:0}.h-welcome{margin-bottom:21px}.h-hero{padding:29px;min-height:285px;grid-template-columns:1fr 1fr}.h-hero-art{height:220px}.h-hero h1{font-size:43px}.h-hero p{max-width:270px}.h-hero-buttons .button{font-size:12px;padding:10px 13px}.h-preview-type{font-size:28px}.h-hero-buttons{margin-top:22px}.h-project-visual{height:170px}.h-template-art{height:200px}.h-section-header{align-items:flex-start}.h-section-header h2{font-size:20px}.h-section-header p{font-size:11px}.h-section-header>.quiet-button{font-size:11px;padding:4px}.h-first-folder{flex-wrap:wrap;padding:20px}.h-project-title{font-size:12px}.h-project-info{padding:14px}.h-project-controls select{font-size:11px}.h-folders{grid-template-columns:repeat(2,minmax(0,1fr))}
  #back-home{font-size:11px;padding:6px}.topbar .project-heading input{font-size:12px}.topbar .save-state{font-size:9px}.top-actions #undo,.top-actions #redo{display:none}.mode-switch button{padding:6px 8px;font-size:11px}.top-actions .button{font-size:11px;min-height:35px;padding:8px 10px}.topbar .mode-switch{padding:3px}.topbar:not(.home-mode .topbar){gap:7px}
}
@media(max-width:540px){.h-hero{grid-template-columns:1fr;padding:28px;min-height:285px}.h-hero-art{display:none}.h-hero h1{font-size:46px;letter-spacing:-2px}.h-hero p{max-width:100%}.h-top-actions #h-import{display:inline-flex;width:35px;padding:8px;flex:none}.h-top-actions #h-import svg{display:block;width:17px;height:17px}.h-top-actions #h-import .h-action-label{display:none}.brand-product{display:none}.h-welcome h2{font-size:21px}.h-main{padding:23px 18px 44px}.h-formats{gap:8px}.h-formats button{padding:15px 6px}.h-formats button>span{width:33px;height:33px}.h-project-grid,.h-template-grid{gap:20px 11px}.h-project-visual{height:145px}.h-project-info{padding:12px}.h-project-info>small{font-size:9px}.h-project-footer>span{font-size:9px}.h-project-footer{gap:4px}.h-template-art{height:170px;padding:12px}.h-template-card>strong{font-size:12px}.h-template-card>small{font-size:10px}.h-categories button{font-size:10px;padding:8px 11px}.h-section-header{flex-wrap:wrap}.h-section-header h2{font-size:20px}.h-section-header p{font-size:11px}.h-page-heading h1{font-size:36px}.h-folders{grid-template-columns:1fr}.h-project-menu>div{width:160px}.h-list .h-project-visual{width:105px}.brand-wordmark small{font-size:6px;letter-spacing:.7px}.brand-wordmark strong{font-size:15px}.h-top-actions .button{padding:9px 10px;font-size:11px}.home-mode .topbar .brand{margin-right:auto}.topbar .brand-wordmark{display:flex}.topbar .brand{gap:7px}.h-template-art{height:160px}.h-storage-note{font-size:10px}.v-header{flex-wrap:wrap;gap:6px}.v-header .v-heading{min-width:85px}.v-header .button{padding:8px;font-size:10px}.v-preview-empty h2{font-size:21px}}
@media(max-width:420px){body:not(.home-mode) .brand-wordmark{display:none}.h-main{padding:20px 16px 40px}.h-hero{padding:26px 23px}.h-hero h1{font-size:42px}.h-project-visual{height:128px}.h-template-art{height:145px}.h-project-footer>span{font-size:8px}.h-project-title{font-size:11px}.h-project-info{padding:11px}.h-template-card>strong{font-size:11px}.h-template-card>small{font-size:9px}.h-formats strong{font-size:10px}.topbar{padding:0 11px;gap:7px}.brand-wordmark small{max-width:120px}.brand img{width:33px;height:33px}.h-top-actions .button{font-size:10px;padding:9px;gap:5px}.appearance-trigger{width:34px;min-height:34px}.project-heading{min-width:0}.topbar .save-state{font-size:8px}.topbar #back-home{font-size:10px;padding:4px}.topbar .mode-switch button{font-size:10px;padding:6px}.a-header{padding:22px 19px 18px}.a-body{padding:21px 18px}.a-footer{padding:16px 18px}.a-header h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}html{--hover-lift:none}}
@media(max-width:540px){.home-mode .topbar .brand .brand-wordmark{display:flex}.brand-wordmark strong{font-size:14px}.brand-wordmark small{font-size:6px;letter-spacing:.5px}}
@media(max-width:420px){.h-hero h1{font-size:35px;letter-spacing:-1.5px}}
@media(max-width:360px){.brand-wordmark strong{font-size:13px}.brand-wordmark small{font-size:5.5px}.h-hero h1{font-size:31px}}
@media(max-width:360px){body:not(.home-mode) #back-home{display:none}}
@media(max-width:420px){.canvas-toolbar .quiet-button{font-size:11px;padding:8px 6px}}
@media(max-width:360px){#video-workspace{grid-template-columns:128px minmax(0,1fr)}.v-transport{gap:5px;flex-wrap:wrap}.v-transport .quiet-button{padding:7px 6px}.v-scrub{min-width:40px}.v-time{min-width:88px}}
@supports not (backdrop-filter:blur(1px)){html[data-glass=on]{--panel:var(--studio-card);--sidebar-panel:var(--studio-sidebar)}.topbar,.h-sidebar,.rail,.library,.inspector,.v-media,.v-inspector{background:var(--studio-card)}}
@media print{#appearance-dialog,.appearance-trigger{display:none!important}body{background:white!important}.print-only{color:black}}
