:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#f5f7fb;--panel:#fff;--panel-muted:#f8fafc;--ink:#111827;--muted:#64748b;--line:#dbe3ef;--accent:#2563eb;--accent-strong:#1d4ed8;--accent-soft:#e7efff;--focus:#0f766e;--danger:#be123c}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0f172a;--panel:#111827;--panel-muted:#1e293b;--ink:#e5e7eb;--muted:#94a3b8;--line:#334155;--accent:#60a5fa;--accent-strong:#93c5fd;--accent-soft:#60a5fa2e;--focus:#5eead4}}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:radial-gradient(circle at top left, #2563eb1f, transparent 34%), var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,a{font:inherit}button,a,input{outline-color:var(--focus)}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed;opacity:.58}.workbench-shell{width:min(1500px,100%);margin:0 auto;padding:24px}.topbar{justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px;display:flex}.topbar h1{letter-spacing:0;max-width:760px;margin:4px 0 0;font-size:clamp(28px,4vw,56px);line-height:.98}.topbar-copy{max-width:740px;color:var(--muted);margin:12px 0 0;font-size:15px;line-height:1.5}.eyebrow{color:var(--accent-strong);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:12px;font-weight:800}.workbench-grid{grid-template-columns:minmax(286px,360px) minmax(0,1fr);align-items:stretch;gap:18px;display:grid}.control-rail,.preview-rail{min-width:0}.control-rail{z-index:2;flex-direction:column;gap:12px;display:flex;position:relative}.preview-rail{z-index:1;pointer-events:none;flex-direction:column;gap:10px;display:flex;position:relative}.panel{border:1px solid var(--line);background:color-mix(in srgb, var(--panel) 88%, transparent);border-radius:8px;box-shadow:0 16px 40px #0f172a12}.panel-heading{align-items:flex-start;gap:10px;padding:16px 16px 10px;display:flex}.panel-heading svg{color:var(--accent);flex:none;margin-top:1px}.panel h2{margin:0;font-size:15px;line-height:1.2}.panel p{color:var(--muted);margin:3px 0 0;font-size:13px;line-height:1.45}.upload-dropzone{background:var(--panel-muted);color:#1e3a8a;cursor:pointer;border:1px dashed #93a7c2;border-radius:8px;justify-content:center;align-items:center;gap:9px;min-height:92px;margin:0 16px 16px;font-weight:800;display:flex}.upload-dropzone input{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.asset-order-list{gap:8px;margin:0 16px 16px;display:grid}.asset-order-row{border:1px solid var(--line);background:var(--panel);border-radius:8px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;min-height:36px;padding:6px 8px 6px 10px;display:grid}.asset-order-row span{color:#334155;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:750;overflow:hidden}.asset-order-row div{gap:4px;display:inline-flex}.asset-order-row button,.inline-reset-button{border:1px solid var(--line);background:var(--panel-muted);color:#334155;border-radius:6px;justify-content:center;align-items:center;display:inline-flex}.asset-order-row button{width:28px;height:28px}.controls-panel{padding-bottom:14px}.control-group{border:0;margin:0;padding:12px 16px 0}.control-group legend,.range-control span,.text-control span,.toggle-row span{color:#334155;font-size:12px;font-weight:800}.segmented-control{border:1px solid var(--line);background:var(--panel-muted);border-radius:8px;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px;padding:4px;display:grid}.mode-control,.browser-control,.theme-control,.device-frame-control,.fit-control{grid-template-columns:repeat(2,minmax(0,1fr))}.export-format-control,.relation-control{grid-template-columns:repeat(3,minmax(0,1fr))}.segmented-control button{color:#475569;background:0 0;border-radius:6px;justify-content:center;align-items:center;gap:5px;min-height:34px;font-size:12px;font-weight:800;display:inline-flex}.segmented-control button.is-active{background:var(--panel);color:var(--accent-strong);box-shadow:0 8px 18px #0f172a1a}.swatch-row{grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px;display:grid}.swatch{aspect-ratio:1;background-position:0 0,8px 8px;background-size:16px 16px;border:2px solid #0f172a1a;border-radius:8px;width:100%}.swatch.is-active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.range-control{grid-template-columns:70px 1fr 36px;align-items:center;gap:10px;padding:14px 16px 0;display:grid}.range-control input{width:100%;accent-color:var(--accent)}.range-control output{color:var(--muted);text-align:right;font-size:12px}.stack-reset-row{padding:12px 16px 0}.inline-reset-button{min-height:34px;color:var(--accent-strong);gap:7px;padding:0 10px;font-size:12px;font-weight:800}.text-control{gap:8px;padding:12px 16px 0;display:grid}.text-control input{border:1px solid var(--line);background:var(--panel);width:100%;min-height:36px;color:var(--ink);border-radius:8px;padding:0 10px;font-size:13px}.toggle-row{align-items:center;gap:10px;padding:14px 16px 0;display:flex}.toggle-row input{width:18px;height:18px;accent-color:var(--accent)}.cta-panel{padding:16px}.cta-panel h2{margin-top:8px}.cta-panel a{min-height:36px;color:var(--accent-strong);align-items:center;gap:7px;margin-top:14px;font-size:13px;font-weight:800;text-decoration:none;display:inline-flex}.action-row{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.primary-action,.secondary-action,.icon-button{white-space:nowrap;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:40px;font-size:13px;font-weight:850;display:inline-flex}.primary-action{background:var(--accent);color:#fff;min-width:98px;padding:0 16px;box-shadow:0 14px 24px #2563eb3d}.primary-action:not(:disabled):hover{background:var(--accent-strong)}.secondary-action{background:var(--panel-muted);color:#334155;padding:0 12px}.icon-button{background:var(--panel);color:#334155;border:1px solid var(--line);width:40px}.preview-stage{pointer-events:none;background:#eef3f8;border:1px solid #94a3b873;border-radius:8px;place-items:stretch stretch;min-height:650px;display:grid;overflow:hidden}.transparent-preview{background-color:#f8fafc;background-image:linear-gradient(45deg,#94a3b847 25%,#0000 25% 75%,#94a3b847 75%),linear-gradient(45deg,#94a3b847 25%,#0000 25% 75%,#94a3b847 75%);background-position:0 0,12px 12px;background-size:24px 24px}.export-surface{pointer-events:none;place-items:center;width:100%;min-height:650px;display:grid;position:relative;overflow:hidden}.transparent-export{background:0 0}.mockup-frame{z-index:2;background:#fff;border:1px solid #0f172a1f;width:100%;max-width:920px;position:relative;overflow:hidden}.mockup-frame.mode-device,.mockup-frame.with-device-frame{background:linear-gradient(145deg,#1f2937 0%,#020617 72%);border:2px solid #101827;max-width:360px;padding:10px;box-shadow:inset 0 0 0 2px #ffffff14,0 24px 58px #0f172a3d}.mockup-frame.mode-device.device-iphone-16-pro-max,.mockup-frame.with-device-frame.device-iphone-16-pro-max{border-radius:54px!important}.mockup-frame.mode-device.device-galaxy-s25-ultra,.mockup-frame.with-device-frame.device-galaxy-s25-ultra{max-width:346px;border-radius:34px!important}.mockup-frame.mode-hero{max-width:860px;transform:perspective(1200px)rotateX(3deg)rotateY(-5deg)}.mockup-frame.mode-spotlight{border:8px solid #ffffffb8;max-width:840px;transform:translateY(-8px)}.mockup-frame.mode-stack{max-width:820px;transform:rotate(-1.5deg)}.stack-frames{z-index:2;aspect-ratio:16/10;place-items:center;width:min(92%,980px);transition:transform .16s;display:grid;position:relative}.stack-layer{width:min(82%,760px);transition:transform .16s;display:grid;position:absolute}.stack-layer .mockup-frame{width:100%;max-width:none;transform:none}.mockup-frame.mode-floating{border:0;max-width:760px;transform:perspective(1100px)rotateX(6deg)rotateY(7deg)translateY(-8px)}.spotlight-glow{z-index:1;filter:blur(10px);background:radial-gradient(circle,#ffffffe6,#60a5fa33 42%,#0000 68%);border-radius:999px;position:absolute;inset:17% 13%}.stack-card{z-index:1;aspect-ratio:16/10;background:#ffffffa3;border:1px solid #0f172a1f;border-radius:26px;width:min(72%,760px);position:absolute;box-shadow:0 26px 70px #0f172a29}.stack-card-back{transform:translate(44px,42px)rotate(4deg)}.stack-card-mid{transform:translate(-34px,25px)rotate(-5deg)}.browser-chrome{background:#f8fafc;border-bottom:1px solid #e2e8f0;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;height:42px;padding:0 12px;display:grid}.chrome-chrome .browser-chrome{background:#eef2f7;grid-template-columns:minmax(120px,.34fr) minmax(0,1fr) auto;height:46px}.chrome-chrome .browser-address{background:#fff;height:28px}.chrome-arc .browser-chrome{background:linear-gradient(90deg,#f6f3ff 0%,#eef6ff 100%);grid-template-columns:minmax(0,1fr) auto auto}.chrome-arc .browser-address{background:#ffffffc2;justify-self:start;width:min(100%,240px)}.chrome-edge .browser-chrome{background:#edf7f7;grid-template-columns:minmax(120px,.34fr) minmax(0,1fr) auto}.chrome-edge .browser-address{color:#245b5b;background:#dff2f0}.browser-tab{color:#475569;text-overflow:ellipsis;white-space:nowrap;background:#ffffffc2;border-radius:10px 10px 0 0;min-width:0;height:30px;padding:7px 12px;font-size:11px;overflow:hidden}.brand-badge{color:#475569;text-overflow:ellipsis;white-space:nowrap;background:#ffffffc2;border-radius:999px;min-width:0;height:30px;padding:7px 12px;font-size:11px;font-weight:750;overflow:hidden}.chrome-chrome .brand-badge,.chrome-edge .brand-badge{border-radius:10px 10px 0 0}.traffic-lights,.window-controls{align-items:center;gap:8px;display:inline-flex}.chrome-arc .traffic-lights{order:2}.traffic-lights span{background:#ef4444;border-radius:999px;width:10px;height:10px}.traffic-lights span:nth-child(2){background:#f59e0b}.traffic-lights span:nth-child(3){background:#22c55e}.window-controls{justify-self:end;gap:0;height:100%}.window-controls span{width:36px;height:100%;position:relative}.window-controls span:before,.window-controls span:after{content:"";background:#64748b;width:11px;height:1.5px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.window-controls span:nth-child(2):before{background:0 0;border:1.5px solid #64748b;width:10px;height:8px}.window-controls span:nth-child(3):before{transform:translate(-50%,-50%)rotate(45deg)}.window-controls span:nth-child(3):after{transform:translate(-50%,-50%)rotate(-45deg)}.theme-dark{background:#0f172a;border-color:#94a3b847}.theme-dark .browser-chrome{background:#111827;border-bottom-color:#94a3b838}.theme-dark.chrome-arc .browser-chrome{background:linear-gradient(90deg,#17132c 0%,#0f172a 100%)}.theme-dark.chrome-edge .browser-chrome{background:#0d2528}.theme-dark .browser-address,.theme-dark .browser-tab,.theme-dark .brand-badge{color:#cbd5e1;background:#1e293be0}.theme-dark .image-slot,.theme-dark .image-slot img.fit-contain{background:#020617}.theme-dark .window-controls span:before,.theme-dark .window-controls span:after{background:#cbd5e1;border-color:#cbd5e1}.theme-dark .window-controls span:nth-child(2):before{background:0 0}.browser-address{color:#64748b;text-overflow:ellipsis;white-space:nowrap;background:#e2e8f0;border-radius:999px;min-width:0;height:24px;padding:4px 10px;font-size:11px;overflow:hidden}.image-slot{aspect-ratio:16/10;background:#f8fafc;place-items:center;display:grid;position:relative;overflow:hidden}.mockup-frame.mode-device .image-slot,.mockup-frame.with-device-frame .image-slot{aspect-ratio:9/19.5;border-radius:42px;overflow:hidden}.mockup-frame.mode-device.device-galaxy-s25-ultra .image-slot,.mockup-frame.with-device-frame.device-galaxy-s25-ultra .image-slot{border-radius:25px}.mobile-brand-badge{z-index:3;pointer-events:none;background:#ffffffe6;border-radius:999px;max-width:calc(100% - 36px);height:24px;padding:5px 10px;position:absolute;top:14px;left:18px;box-shadow:0 8px 18px #0f172a1f}.device-iphone-16-pro-max .mobile-brand-badge{top:54px}.device-galaxy-s25-ultra .mobile-brand-badge{top:40px}.device-galaxy-s25-ultra .mobile-brand-badge+.mobile-browser-top,.device-iphone-16-pro-max .mobile-brand-badge+.mobile-browser-top{top:72px}.theme-dark .mobile-brand-badge{color:#cbd5e1;background:#0f172ae0;box-shadow:0 8px 18px #00000047}.mobile-browser-bar{z-index:3;pointer-events:none;align-items:center;min-height:34px;padding:5px 7px;display:flex;position:absolute;left:18px;right:18px}.mobile-browser-top{top:18px}.mobile-browser-bottom{bottom:16px}.mobile-browser-bar span{color:#475569;text-align:center;text-overflow:ellipsis;white-space:nowrap;background:#ffffffe6;border-radius:999px;width:100%;min-width:0;height:24px;padding:5px 12px;font-size:10.5px;line-height:1.25;overflow:hidden;box-shadow:0 8px 18px #0f172a1f}.theme-dark .mobile-browser-bar span{color:#cbd5e1;background:#0f172ae0;box-shadow:0 8px 18px #00000047}.mobile-browser-chrome span,.mobile-browser-edge span{text-align:left}.device-galaxy-s25-ultra .mobile-browser-top{top:40px}.device-iphone-16-pro-max .mobile-browser-top{top:54px}.device-cutout,.device-side-button{z-index:4;pointer-events:none;background:#020617;display:block;position:absolute}.dynamic-island{border-radius:999px;width:86px;height:25px;top:20px;left:50%;transform:translate(-50%)}.hole-punch{border-radius:999px;width:15px;height:15px;top:22px;left:50%;transform:translate(-50%)}.device-side-button-left{border-radius:999px 0 0 999px;width:4px;height:72px;top:28%;left:-4px}.device-side-button-right{border-radius:0 999px 999px 0;width:4px;height:96px;top:22%;right:-4px}.image-slot img{object-fit:contain;width:100%;height:100%}.image-slot img.fit-cover{object-fit:cover}.image-slot img.fit-contain{object-fit:contain;background:#fff}.empty-preview{color:#64748b;text-align:center;place-items:center;gap:12px;padding:24px;display:grid}.empty-preview p{max-width:280px;margin:0;font-size:14px;line-height:1.45}.status-line{color:#475569;min-height:22px;margin:0;font-size:13px}@media (prefers-color-scheme:dark){.control-group legend,.range-control span,.text-control span,.toggle-row span,.asset-order-row span,.asset-order-row button,.inline-reset-button,.segmented-control button,.secondary-action,.icon-button,.status-line{color:#cbd5e1}.upload-dropzone{color:#bfdbfe}}@media (max-width:980px){.workbench-shell{padding:16px}.topbar,.workbench-grid{grid-template-columns:1fr}.topbar{display:grid}.action-row{justify-content:flex-start}.workbench-grid{display:grid}.control-rail{order:2}.preview-rail{order:1}.preview-stage,.export-surface{min-height:430px}}@media (max-width:560px){.topbar h1{font-size:34px;line-height:1.02}.topbar-copy{font-size:14px}.segmented-control{grid-template-columns:1fr}.range-control{grid-template-columns:64px 1fr 32px}.preview-stage{min-height:360px}.export-surface{width:100%;min-height:360px}.stack-frames{width:100%}.stack-layer{width:84%}}