@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap";:root{--bg:#0a0a0a;--panel:#111;--panel-soft:#161616;--border:#222;--text:#f5f5f5;--text-soft:#9d9d9d;--active:#fff;--topbar-bg:#0a0a0ad6;--panel-bg-gradient:linear-gradient(165deg, #131313 0%, #101010 100%);--canvas-frame-border:#2f2f2f;--canvas-hover-border:#f0f0f0;--surface-subtle:#181818;--status-color:#d2d2d2;--upload-card-bg:#00000057;--upload-title:#f4f4f4;--upload-subtext:#d7d7d7;--upload-meta:#b2b2b2;--upload-icon-bg:#ffffffdb;--upload-icon-fg:#171717;--radius:12px;--swatch-radius:6px;--transition:.2s ease}:root[data-theme=light]{--bg:#f2f3f5;--panel:#fff;--panel-soft:#f5f5f5;--border:#dfdfdf;--text:#151515;--text-soft:#666;--active:#111;--topbar-bg:#f2f3f5db;--panel-bg-gradient:linear-gradient(170deg, #fff 0%, #f8f8f8 100%);--canvas-frame-border:#cfcfcf;--canvas-hover-border:#111;--surface-subtle:#efefef;--status-color:#444;--upload-card-bg:#12121266;--upload-title:#f4f4f4;--upload-subtext:#d7d7d7;--upload-meta:#c1c1c1;--upload-icon-bg:#ffffffeb;--upload-icon-fg:#111}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:radial-gradient(circle at 15% 0%, color-mix(in srgb, var(--surface-subtle), transparent 15%) 0%, var(--bg) 36%), var(--bg);color:var(--text);transition:background var(--transition), color var(--transition);margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,textarea{font-family:inherit}.app-shell{min-height:100svh;padding-top:72px}.topbar{z-index:20;background:var(--topbar-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;height:72px;padding:0 18px;display:flex;position:fixed;top:0;left:0;right:0}.brand-wrap h1{letter-spacing:-.03em;margin:0;font-size:1.25rem}.brand-wrap{align-items:center;gap:10px;display:flex}.brand-mark{object-fit:contain;border-radius:8px;flex-shrink:0;width:90px;height:90px}.brand-text{gap:2px;display:grid}.brand-wrap span{color:var(--text-soft);text-transform:uppercase;letter-spacing:.15em;font-size:.72rem}.action-group,.mobile-controls{align-items:center;gap:8px;display:flex}.ghost-btn,.solid-btn,.chip,.swatch{transition:all var(--transition)}.ghost-btn,.solid-btn{border:1px solid var(--border);cursor:pointer;border-radius:10px;height:36px;padding:0 14px;font-size:.82rem;font-weight:600}.icon-btn{place-items:center;width:36px;padding:0;display:grid}.theme-toggle{border-radius:14px}.theme-icon-stack{width:18px;height:18px;display:inline-block;position:relative}.theme-icon{width:18px;height:18px;transition:opacity .22s,transform .26s;position:absolute;inset:0}.theme-icon-sun{opacity:1;transform:rotate(0)scale(1)}.theme-icon-moon{opacity:0;transform:rotate(-24deg)scale(.75)}:root[data-theme=dark] .theme-icon-sun{opacity:0;transform:rotate(24deg)scale(.75)}:root[data-theme=dark] .theme-icon-moon{opacity:1;transform:rotate(0)scale(1)}.ghost-btn{color:var(--text);background:color-mix(in srgb, var(--panel), transparent 8%)}.ghost-btn:hover:not(:disabled){border-color:color-mix(in srgb, var(--text), transparent 80%);background:color-mix(in srgb, var(--panel-soft), transparent 10%)}.solid-btn{color:var(--bg);background:var(--active);border-color:var(--active)}.solid-btn:hover:not(:disabled){opacity:.9}button:disabled{opacity:.45;cursor:not-allowed}.desktop-only{display:block}.left-panel,.right-panel{background:var(--panel-bg-gradient);border:1px solid var(--border);border-radius:var(--radius);width:288px;padding:16px;position:fixed;top:84px;bottom:12px;overflow-y:auto}.left-panel{left:12px}.right-panel{right:12px}.panel-header{margin-bottom:18px}.panel-header h2{letter-spacing:-.02em;margin:0;font-size:1rem}.panel-header p{text-transform:uppercase;letter-spacing:.14em;color:var(--text-soft);margin:4px 0 0;font-size:.68rem}.panel-section{margin-bottom:18px}.section-title{letter-spacing:.13em;text-transform:uppercase;color:var(--text-soft);margin:0 0 10px;font-size:.7rem;font-weight:700}.chip-grid,.chip-list{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--border);background:color-mix(in srgb, var(--panel-soft), transparent 8%);color:var(--text);cursor:pointer;border-radius:999px;padding:8px 12px;font-size:.76rem;font-weight:600}.chip:hover:not(:disabled){border-color:color-mix(in srgb, var(--text), transparent 75%)}.chip-active{border-color:var(--active);box-shadow:0 0 0 1px color-mix(in srgb, var(--active), transparent 20%)}.slider-wrap{gap:8px;margin-bottom:12px;display:grid}.slider-wrap div{justify-content:space-between;font-size:.8rem;display:flex}.slider-wrap span{color:color-mix(in srgb, var(--text), transparent 18%)}.slider-wrap strong{color:var(--text);font-size:.75rem}input[type=range]{width:100%;accent-color:var(--active);cursor:pointer}.swatch-grid{grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;gap:8px;display:grid}.scrollable-grid{max-height:212px;padding-right:2px;overflow-y:auto}.swatch{border:1px solid var(--border);border-radius:var(--swatch-radius);cursor:pointer;background:#d8d8d8;place-items:center;width:60px;height:40px;display:grid;overflow:hidden}.swatch:hover{transform:translateY(-1px)}.swatch-active{border-color:var(--active);box-shadow:0 0 0 2px color-mix(in srgb, var(--active), transparent 45%)}.swatch-image{object-fit:cover;width:100%;height:100%;display:block}.swatch-fallback{color:#1a1a1a;letter-spacing:.12em;font-size:.62rem;font-weight:800}.ai-header{justify-content:space-between;align-items:center;display:flex}.canvas-area{place-items:center;min-height:calc(100svh - 72px);margin-left:320px;margin-right:320px;padding:20px;display:grid}.canvas-frame{border-radius:calc(var(--radius) + 4px);border:1px dashed var(--canvas-frame-border);cursor:pointer;width:min(920px,100%);transition:border-color var(--transition);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.canvas-frame:hover{border-color:var(--canvas-hover-border)}.canvas-frame.dragging{border-color:var(--active)}.upload-clear-btn{border:1px solid var(--border);background:color-mix(in srgb, var(--panel), transparent 4%);width:30px;height:30px;color:var(--text);cursor:pointer;z-index:5;border-radius:999px;place-items:center;font-size:.95rem;font-weight:700;line-height:1;display:grid;position:absolute;top:12px;right:12px}.upload-clear-btn:hover{border-color:color-mix(in srgb, var(--text), transparent 65%);background:color-mix(in srgb, var(--panel-soft), transparent 6%)}.upload-empty-state{text-align:center;background:var(--upload-card-bg);border:1px solid color-mix(in srgb, var(--upload-title), transparent 74%);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:18px;place-items:center;gap:8px;padding:22px 26px;display:grid}.upload-icon{border:1px solid color-mix(in srgb, var(--upload-title), transparent 62%);background:var(--upload-icon-bg);width:68px;height:68px;color:var(--upload-icon-fg);border-radius:999px;place-items:center;font-size:1.9rem;font-weight:300;display:grid}.upload-empty-state h3{color:var(--upload-title);margin:0;font-size:1.5rem}.upload-empty-state p{color:var(--upload-subtext);margin:0}.upload-empty-state span{letter-spacing:.12em;text-transform:uppercase;color:var(--upload-meta);font-size:.72rem}.preview-image{object-fit:contain;width:auto;height:auto;transition:all var(--transition)}.preview-video{object-fit:contain;width:auto;height:auto;transition:all var(--transition);background:#000}.preview-window{border-radius:var(--window-radius);background:#eef2f7;flex-direction:column;display:flex;position:absolute;overflow:hidden}.preview-layer{position:absolute;overflow:hidden}.preview-window-macos{background:linear-gradient(#f6f8fb 0%,#ecf0f5 100%)}.preview-window-windows{background:linear-gradient(#edf2f9 0%,#e3e9f3 100%)}.preview-window-titlebar{height:var(--titlebar-height);min-height:var(--titlebar-height);-webkit-user-select:none;user-select:none;font-size:clamp(12px, calc(var(--titlebar-px,44px) * .3), 18px);border-bottom:1px solid #23283029;justify-content:center;align-items:center;padding:0 14px;display:flex;position:relative}.preview-window-titlebar.macos{background:linear-gradient(#f3f5f8 0%,#e6ebf1 100%)}.preview-window-titlebar.windows{background:linear-gradient(#e7edf7 0%,#dbe5f2 100%)}.preview-window-title{color:#4f596a;letter-spacing:.02em;font-size:.72rem;font-weight:600}.window-controls-macos{gap:.48em;display:flex;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.window-controls-macos .dot{border-radius:999px;width:.9em;height:.9em;box-shadow:inset 0 0 0 1px #00000026}.window-controls-macos .dot.red{background:#ff605c}.window-controls-macos .dot.yellow{background:#ffbd44}.window-controls-macos .dot.green{background:#00ca4e}.window-controls-windows{color:#465062;gap:.58em;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}:root[data-theme=dark] .preview-window-macos{background:linear-gradient(#1e2127 0%,#171a20 100%)}:root[data-theme=dark] .preview-window-windows{background:linear-gradient(#171d28 0%,#131923 100%)}:root[data-theme=dark] .preview-window-titlebar{border-bottom:1px solid #ffffff29}:root[data-theme=dark] .preview-window-titlebar.macos{background:linear-gradient(#2a2f37 0%,#232833 100%)}:root[data-theme=dark] .preview-window-titlebar.windows{background:linear-gradient(#273247 0%,#1e283a 100%)}:root[data-theme=dark] .preview-window-title{color:#dbe3f1}:root[data-theme=dark] .window-controls-windows{color:#d4dded}.window-controls-windows .minimize{width:.9em;height:.9em;position:relative}.window-controls-windows .minimize:after{content:"";border-top:.12em solid;position:absolute;top:.58em;left:0;right:0}.window-controls-windows .maximize{border:.12em solid;width:.9em;height:.72em;margin-top:.06em}.window-controls-windows .close{width:.9em;height:.9em;position:relative}.window-controls-windows .close:before,.window-controls-windows .close:after{content:"";background:currentColor;width:.12em;height:.9em;position:absolute;top:0;left:.4em}.window-controls-windows .close:before{transform:rotate(45deg)}.window-controls-windows .close:after{transform:rotate(-45deg)}.preview-window-content{flex:1;width:100%;max-width:100%;max-height:100%;display:flex}.code-editor-input{min-height:200px;font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.78rem;line-height:1.55}.preview-code-card{border-radius:inherit;grid-template-columns:1fr;width:100%;height:100%;display:grid;overflow:hidden}.preview-code-card pre{white-space:pre-wrap;word-break:break-word;width:100%;height:100%;margin:0;padding:clamp(12px,3.5%,24px);font-family:SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:clamp(11px,1.3vw,16px);line-height:1.55;overflow:hidden}.preview-code-card.dark{background:linear-gradient(#06080d 0%,#050912 55%,#06080d 100%)}.preview-code-card.dark pre{color:#e6edf7}.preview-code-card.light{background:linear-gradient(#f8fafc 0%,#eff6ff 100%)}.preview-code-card.light pre{color:#1f2937}.preview-image.fitted,.preview-video.fitted{object-fit:fill;width:100%;height:100%;display:block}.preview-image.framed,.preview-video.framed{object-fit:fill;width:100%;height:100%;box-shadow:none;border-radius:0;margin:0;display:block}.status-line{color:var(--status-color);margin-top:10px;font-size:.76rem}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.drawer-overlay{opacity:0;pointer-events:none;transition:opacity var(--transition);z-index:24;background:#00000080;position:fixed;inset:0}.drawer-overlay.open{opacity:1}.mobile-drawer,.ai-drawer{background:var(--panel-bg-gradient);border:1px solid var(--border);border-radius:var(--radius) 0 0 var(--radius);z-index:25;width:min(420px,92vw);transition:transform var(--transition);padding:14px;position:fixed;top:72px;bottom:0;overflow-y:auto;transform:translate(100%)}.mobile-drawer.left{border-radius:0 var(--radius) var(--radius) 0;left:0;transform:translate(-100%)}.mobile-drawer.left.open,.mobile-drawer.right.open,.ai-drawer.open{transform:translate(0)}.mobile-drawer.right,.ai-drawer{right:0}.drawer-top{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.drawer-top h2{margin:0;font-size:1rem}.ai-helper{text-transform:uppercase;letter-spacing:.1em;color:var(--text-soft);margin:12px 0 8px;font-size:.74rem;display:block}textarea{border:1px solid var(--border);background:color-mix(in srgb, var(--panel-soft), transparent 6%);width:100%;color:var(--text);resize:vertical;min-height:90px;transition:border-color var(--transition);border-radius:10px;padding:12px}textarea:focus{border-color:var(--active);outline:none}.full-width{width:100%;margin-top:12px}:root[data-theme=light] .solid-btn{color:#fff}:root[data-theme=light] .swatch-fallback{color:#2a2a2a}:root[data-theme=light] .drawer-overlay{background:#1414144d}.spinner{border:2px solid #222;border-top-color:#777;border-radius:50%;width:16px;height:16px;animation:.9s linear infinite spin;display:inline-block}.theme-transition-layer{pointer-events:none;z-index:120;opacity:0;transform-origin:top;position:fixed;inset:0;transform:scaleY(0)}.theme-transition-layer.light{background:linear-gradient(#f6f7f8 0%,#fff 100%)}.theme-transition-layer.dark{background:linear-gradient(#0d0d0f 0%,#050505 100%)}.theme-transition-layer.active{animation:.52s cubic-bezier(.22,.61,.36,1) themeWipeTopToBottom}@keyframes themeWipeTopToBottom{0%{opacity:0;transform-origin:top;transform:scaleY(0)}45%{opacity:.92;transform-origin:top;transform:scaleY(1)}to{opacity:0;transform-origin:bottom;transform:scaleY(0)}}@keyframes spin{to{transform:rotate(360deg)}}@media (width>=1025px){.mobile-controls,.mobile-drawer{display:none}.drawer-overlay.open{pointer-events:auto}}@media (width<=1024px){.desktop-only{display:none}.canvas-area{align-content:start;margin:0;padding:16px}.canvas-frame{width:100%}.action-group{gap:6px}.action-group .ghost-btn,.action-group .solid-btn{padding:0 10px;font-size:.75rem}.drawer-overlay.open{pointer-events:auto}}@media (width<=720px){.topbar{padding:0 10px}.brand-wrap span,.action-group .ghost-btn:first-child{display:none}}