:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#f4f6f7;background:#0b1118;font-synthesis:none;text-rendering:optimizeLegibility;color-scheme:dark;--page: #0b1118;--surface: #111a24;--surface-raised: #172330;--surface-soft: #1d2a37;--line: rgba(224, 235, 240, .12);--line-strong: rgba(224, 235, 240, .2);--text: #f4f6f7;--muted: #8e9ca5;--muted-strong: #bdc8ce;--accent: #df8b73;--accent-soft: rgba(223, 139, 115, .16);--shadow: rgba(3, 8, 13, .38)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100dvh;background:var(--page)}button,input,textarea,select{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.62}[inert]{pointer-events:none;-webkit-user-select:none;user-select:none}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.app-shell{min-height:100dvh;background:radial-gradient(circle at 93% 8%,rgba(76,106,123,.1),transparent 25rem),var(--page)}.app-header{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px clamp(18px,4vw,58px);border-bottom:1px solid var(--line)}.brand-lockup,.header-actions,.workspace-kicker,.panel-kicker,.section-heading,.field-label-row,.canvas-caption,.color-control,.upload-button,.secondary-button,.export-button{display:flex;align-items:center}.brand-lockup{gap:12px}.brand-mark{display:grid;width:35px;height:35px;place-items:center;border:1px solid rgba(223,139,115,.7);border-radius:11px;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.08em}.brand-name,.brand-caption,.workspace-kicker,.workspace-note,.panel-intro p,.field-help,.file-name,.canvas-caption,.status-message,.section-heading h2,.workspace-heading h1{margin:0}.brand-name{color:var(--text);font-size:13px;font-weight:700;letter-spacing:.04em}.brand-caption,.workspace-note{margin-top:3px;color:var(--muted);font-size:11px}.header-actions{gap:20px}.format-picker{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.format-picker>span{flex:0 0 auto}.format-picker .styled-select{width:82px;flex:0 0 82px}.styled-select{position:relative;width:100%}.select-trigger{display:flex;width:100%;min-height:42px;align-items:center;justify-content:space-between;gap:10px;padding:0 12px;overflow:hidden;border:1px solid var(--line-strong);border-radius:9px;color:var(--text);background:var(--surface);font-size:12px;font-weight:700;text-align:left;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}.select-trigger:hover,.styled-select.is-open .select-trigger{border-color:var(--accent);background:var(--surface-raised)}.styled-select.is-open .select-trigger{box-shadow:0 0 0 3px var(--accent-soft)}.select-trigger>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select-chevron{flex:0 0 auto;color:var(--muted-strong);transition:transform .18s ease,color .18s ease}.styled-select.is-open .select-chevron{color:var(--accent);transform:rotate(180deg)}.select-menu{position:absolute;z-index:40;top:calc(100% + 8px);right:0;left:0;display:grid;gap:4px;max-height:280px;padding:6px;overflow-y:auto;border:1px solid var(--line-strong);border-radius:12px;background:#111a24f5;box-shadow:0 20px 45px #03080d70,inset 0 1px #ffffff0f;-webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%)}.format-picker .select-menu{right:auto;left:50%;width:142px;transform:translate(-50%)}.select-option{display:flex;width:100%;min-height:36px;align-items:center;justify-content:space-between;gap:12px;padding:0 10px;border:1px solid transparent;border-radius:8px;color:var(--muted-strong);background:transparent;font-size:12px;text-align:left;transition:color .16s ease,background-color .16s ease,border-color .16s ease}.select-option:hover,.select-option.is-active{border-color:#df8b7342;color:var(--text);background:var(--accent-soft)}.select-option.is-selected{color:var(--accent)}.canvas-spec{color:var(--muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;letter-spacing:.03em}.export-button,.upload-button,.secondary-button{justify-content:center;gap:9px;border:0;border-radius:10px;font-weight:700;transition:transform .18s ease,background-color .18s ease,border-color .18s ease}.export-button{min-height:42px;padding:0 15px;color:#201512;background:var(--accent);box-shadow:0 8px 24px #df8b732e}.export-button:hover:not(:disabled),.upload-button:hover,.secondary-button:hover{transform:translateY(-1px)}.export-button:active:not(:disabled),.upload-button:active,.secondary-button:active{transform:translateY(1px) scale(.985)}.editor-layout{display:grid;grid-template-columns:minmax(275px,330px) minmax(0,1fr);gap:clamp(24px,4vw,68px);width:min(1500px,100%);margin:0 auto;padding:clamp(24px,4vw,58px)}.control-panel{align-self:start;padding:5px 0 20px}.panel-intro{padding-bottom:22px;border-bottom:1px solid var(--line)}.panel-kicker,.workspace-kicker{gap:8px;color:var(--accent);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.panel-intro p{max-width:255px;margin-top:14px;color:var(--muted-strong);font-size:14px;line-height:1.65}.control-section{padding:24px 0;border-bottom:1px solid var(--line)}.section-heading{gap:10px;margin-bottom:18px;color:var(--muted-strong)}.section-heading svg{color:var(--accent)}.section-heading h2{font-size:13px;font-weight:700;letter-spacing:.02em}.section-number{color:var(--accent);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;font-weight:700;letter-spacing:.08em}.upload-button,.secondary-button{width:100%;min-height:42px;padding:0 13px;color:var(--text);background:var(--surface-raised);border:1px solid var(--line-strong)}.upload-button:hover,.secondary-button:hover{background:var(--surface-soft);border-color:#df8b738f}.secondary-button{min-height:36px;margin-top:12px;color:var(--muted-strong);font-size:12px;font-weight:600}.field-help,.file-name{margin-top:10px;color:var(--muted);font-size:11px;line-height:1.5}.file-name{overflow:hidden;color:var(--accent);text-overflow:ellipsis;white-space:nowrap}.text-field,.range-field,.color-field{display:grid;gap:8px;margin-top:14px;color:var(--muted-strong);font-size:11px;font-weight:700}.text-field:first-of-type,.range-field:first-of-type{margin-top:0}textarea,select{width:100%;border:1px solid var(--line-strong);border-radius:9px;color:var(--text);background:var(--surface);transition:border-color .18s ease,background-color .18s ease}textarea{min-height:74px;resize:vertical;padding:11px 12px;line-height:1.55}select{min-height:42px;padding:0 12px}textarea:hover,select:hover{border-color:#e0ebf04d}textarea:focus,select:focus{border-color:var(--accent);background:var(--surface-raised);outline:none}.field-label-row{justify-content:space-between;gap:10px}output,code{color:var(--accent);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;font-weight:700}input[type=range]{width:100%;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:999px;background:var(--surface-soft)}input[type=range]::-webkit-slider-thumb{width:14px;height:14px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:2px solid var(--page);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:2px solid var(--page);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent)}.range-control{display:grid;grid-template-columns:minmax(0,1fr) 58px;align-items:center;gap:12px}.range-number{width:58px;min-height:30px;padding:5px 7px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--text);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;font-weight:700;text-align:right}.range-number:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px #df8b731f}.range-number::-webkit-inner-spin-button,.range-number::-webkit-outer-spin-button{margin:0}.inline-fields{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:14px}.color-field{align-content:start}.color-control{min-height:32px;gap:8px}input[type=color]{width:32px;height:32px;padding:0;overflow:hidden;border:1px solid var(--line-strong);border-radius:8px;background:transparent}input[type=color]::-webkit-color-swatch-wrapper{padding:3px}input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}.status-message{display:flex;gap:8px;align-items:flex-start;margin-top:18px;padding:11px 12px;border-radius:9px;font-size:11px;line-height:1.5}.status-success{color:#b5d9c8;background:#49856726}.status-error{color:#f2b7a7;background:#a1463529}.status-icon{display:block;width:16px;height:16px;flex:0 0 15px}.workspace{min-width:0;align-self:center;padding:clamp(0px,2vw,24px) 0}.workspace-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.workspace-heading h1{max-width:520px;margin-top:12px;color:var(--text);font-size:clamp(22px,3vw,38px);font-weight:670;letter-spacing:-.04em;line-height:1.13}.workspace-note{padding-bottom:4px;white-space:nowrap}.cover-frame{width:100%;max-width:1040px;margin-left:auto}.cover-canvas{position:relative;width:100%;overflow:hidden;isolation:isolate;aspect-ratio:16 / 9;container-type:inline-size;border:1px solid rgba(223,232,235,.22);border-radius:16px;background:#78919b;box-shadow:0 24px 60px var(--shadow),0 1px #ffffff14 inset}.cover-image,.cover-placeholder,.cover-scrim{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.cover-image{display:block;object-fit:cover}.cover-placeholder{background:radial-gradient(circle at 74% 15%,rgba(250,238,231,.7) 0 3%,transparent 3.2%),radial-gradient(ellipse at 71% 16%,rgba(255,247,241,.42) 0 4%,transparent 4.3%),linear-gradient(180deg,#a6c0c8,#d6c1c2 47%,#667985 70%,#101d27)}.cover-placeholder:before,.cover-placeholder:after{position:absolute;top:40%;right:0;bottom:0;left:0;content:"";clip-path:polygon(0 55%,12% 34%,20% 47%,32% 12%,48% 58%,63% 30%,76% 51%,86% 28%,100% 54%,100% 100%,0 100%);background:#324851}.cover-placeholder:after{top:58%;right:0;bottom:0;left:0;clip-path:polygon(0 41%,18% 25%,31% 52%,52% 20%,69% 50%,82% 30%,100% 45%,100% 100%,0 100%);background:#152631}.cover-scrim{z-index:1;background:linear-gradient(180deg,#09111605,#040c1252)}.glass-strip{position:absolute;z-index:2;top:var(--strip-y);left:50%;display:grid;width:var(--strip-width);min-height:24%;place-items:center;padding:clamp(24px,5cqw,68px) clamp(24px,7cqw,110px);overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.6);border-radius:var(--strip-radius);background:linear-gradient(135deg,rgba(255,255,255,calc(var(--strip-opacity) + .04)),rgba(255,255,255,calc(var(--strip-opacity) * .55)));box-shadow:inset 0 1px #ffffff7a,inset 0 -1px #ffffff1f,0 22px 50px #0812183d;-webkit-backdrop-filter:blur(var(--strip-blur)) saturate(145%);backdrop-filter:blur(var(--strip-blur)) saturate(145%);transform:translate(-50%,-50%)}.glass-strip:before{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;content:"";background:radial-gradient(circle at 20% 0%,rgba(255,255,255,.42),transparent 35%),linear-gradient(90deg,rgba(255,255,255,.16),transparent 45%,rgba(255,255,255,.13));pointer-events:none}.glass-copy{width:100%;color:var(--cover-text-color);font-family:var(--cover-font);text-align:center}.glass-copy h2,.glass-copy p{margin:0;overflow-wrap:anywhere}.glass-copy h2{font-size:clamp(16px,var(--cover-font-size),90px);font-weight:700;letter-spacing:-.045em;line-height:1.18}.glass-copy p{margin-top:clamp(10px,1.4cqw,22px);color:var(--cover-text-color);font-size:clamp(12px,var(--cover-subtitle-size),40px);font-weight:500;line-height:1.35;opacity:.8}.canvas-caption{justify-content:space-between;padding:10px 2px 0;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.export-progress-backdrop{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:16px;background:#040a0fb8;-webkit-backdrop-filter:blur(8px) saturate(115%);backdrop-filter:blur(8px) saturate(115%)}.export-progress-modal{width:min(420px,calc(100vw - 32px));padding:25px 24px 24px;overflow:hidden;border:1px solid rgba(224,235,240,.18);border-radius:16px;background:linear-gradient(145deg,#172330f5,#0d161ff5);box-shadow:0 26px 70px #03080d8c,inset 0 1px #ffffff12;-webkit-backdrop-filter:blur(20px) saturate(130%);backdrop-filter:blur(20px) saturate(130%)}.export-progress-header{min-width:0}.export-progress-header h2{margin:0;color:var(--text);font-size:18px;font-weight:700;letter-spacing:-.02em}.export-progress-format{margin:8px 0 0;color:var(--accent);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.export-progress-file{margin:10px 0 0;overflow:hidden;color:var(--muted-strong);font-size:12px;line-height:1.5;text-overflow:ellipsis;white-space:nowrap}.export-progress-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:24px}.export-progress-note{min-width:0;margin:0;color:var(--muted-strong);font-size:11px;line-height:1.5}.export-progress-percent{flex:0 0 auto;margin:0;color:var(--accent);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:13px;font-weight:800}.export-progress-track{position:relative;height:8px;margin-top:10px;overflow:hidden;border-radius:999px;background:#e0ebf01f;box-shadow:inset 0 1px 2px #03080d4d}.export-progress-fill{position:relative;height:100%;width:0;overflow:hidden;border-radius:inherit;background:linear-gradient(90deg,#c96f5c,var(--accent));box-shadow:0 0 18px #df8b7359;transition:width .24s ease-out}.export-progress-fill:after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.32) 50%,transparent 80%);animation:export-progress-shimmer 1.8s ease-in-out infinite}.export-progress-timing{display:grid;gap:5px;margin-top:14px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;line-height:1.5}.export-progress-timing p{margin:0}.export-progress-timing p:first-child{color:var(--muted-strong)}.export-cancel-button{display:flex;width:100%;min-height:40px;align-items:center;justify-content:center;gap:8px;margin-top:20px;border:1px solid var(--line-strong);border-radius:10px;color:var(--muted-strong);background:#e0ebf00f;font-size:12px;font-weight:700;transition:color .16s ease,background-color .16s ease,border-color .16s ease}.export-cancel-button:hover{border-color:#df8b738c;color:var(--text);background:var(--accent-soft)}@keyframes export-progress-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.export-progress-fill,.export-progress-fill:after{animation:none;transition:none}}@media(prefers-reduced-transparency:reduce){.export-progress-backdrop{background:#040a0feb;-webkit-backdrop-filter:none;backdrop-filter:none}.export-progress-modal{background:#172330;-webkit-backdrop-filter:none;backdrop-filter:none}}@media(prefers-reduced-transparency:reduce){.glass-strip{background:#e1ecede6;-webkit-backdrop-filter:none;backdrop-filter:none}.glass-copy{color:var(--cover-text-color)}.glass-copy p{color:var(--cover-text-color);opacity:.72}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media(max-width:900px){.editor-layout{grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:28px;padding:28px}.canvas-spec{display:none}}@media(max-width:767px){.app-header{align-items:flex-start;padding:16px 18px}.header-actions{flex:0 0 auto;gap:8px}.format-picker>span{display:none}.format-picker .styled-select{width:70px;flex-basis:70px}.format-picker .select-trigger{min-height:38px;padding:0 7px;font-size:10px}.export-button{min-height:38px;padding:0 11px;font-size:12px}.export-button svg:last-child{display:none}.editor-layout{display:flex;flex-direction:column;gap:18px;padding:22px 18px 40px}.workspace{order:-1;padding:0}.workspace-heading{display:block;margin-bottom:18px}.workspace-heading h1{max-width:300px;font-size:25px}.workspace-note{margin-top:10px;padding:0}.cover-canvas{border-radius:12px}.control-panel{padding-top:10px}.control-section{padding:22px 0}}