:root{color:#f3edf3;background:#0a080c;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #0a080c;--panel: #100d13;--panel-2: #151118;--line: rgba(255, 255, 255, .08);--muted: #8d8491;--soft: #b9afb9;--accent: #eb6db2;--accent-bright: #ff93cc}*{box-sizing:border-box}html,body,#root{width:100%;min-width:320px;min-height:100%;margin:0}body{overflow:hidden;background:var(--bg)}button,input{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app-shell{height:100vh;min-height:640px;background:var(--bg);position:relative;overflow:hidden}.topbar{height:66px;padding:0 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#0b090df0}.brand,.topbar-actions{display:flex;align-items:center}.brand{gap:11px}.brand-mark{width:34px;height:34px;border:1px solid rgba(255,255,255,.12);border-radius:10px;display:grid;place-items:center;color:#141016;background:linear-gradient(145deg,#f8d8e9,#ef7dbb);box-shadow:0 0 28px #eb6db226}.brand-name{font-size:14px;font-weight:800;letter-spacing:.14em}.brand-divider{width:1px;height:18px;background:var(--line);margin-left:2px}.brand-subtitle{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;letter-spacing:.18em;color:#756d78}.topbar-actions{gap:10px}.privacy-chip{height:32px;padding:0 12px;border:1px solid rgba(103,193,141,.17);border-radius:999px;display:flex;align-items:center;gap:6px;color:#83c99f;background:#469e6a12;font-size:11px}.icon-button,.primary-button{border:1px solid var(--line);cursor:pointer;transition:.16s ease}.icon-button{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#151117;color:var(--soft)}.icon-button:hover{border-color:#ffffff29;background:#1d171e}.primary-button{height:36px;padding:0 15px;display:flex;align-items:center;gap:8px;border-radius:9px;border-color:#f187c1;background:linear-gradient(180deg,#f391c7,#df65a7);color:#1c1119;font-size:12px;font-weight:750;box-shadow:0 8px 28px #dd519e29}.primary-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 32px #dd519e40}.primary-button:disabled{cursor:not-allowed;opacity:.36;filter:grayscale(.4)}.workspace{height:calc(100vh - 66px);display:grid;grid-template-columns:276px minmax(360px,1fr) 300px}.left-panel,.right-panel{background:var(--panel);min-width:0}.left-panel{border-right:1px solid var(--line);padding:22px 18px 28px}.right-panel{border-left:1px solid var(--line);padding:22px 19px 30px}.panel-scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#322a34 transparent}.panel-scroll::-webkit-scrollbar{width:6px}.panel-scroll::-webkit-scrollbar-thumb{background:#322a34;border-radius:99px}.panel-heading{display:flex;align-items:flex-start;justify-content:space-between;color:#706873;margin-bottom:18px}.panel-heading h2{margin:4px 0 0;color:#e8e0e8;font-size:15px;font-weight:650}.eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8px;letter-spacing:.18em;color:#69616d}.upload-card{width:100%;min-height:104px;border:1px dashed rgba(235,109,178,.28);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:linear-gradient(145deg,#eb6db20e,#ffffff04);cursor:pointer;transition:.16s ease}.upload-card:hover{border-color:#eb6db28c;background:#eb6db216}.upload-card:disabled{cursor:progress;opacity:.68}.upload-card>span{color:var(--accent-bright);margin-bottom:2px}.upload-card strong{font-size:12px;font-weight:650}.upload-card small{color:var(--muted);font-size:10px}.file-card{display:grid;grid-template-columns:48px minmax(0,1fr) 26px;gap:10px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:11px;background:#171319}.file-card img{width:48px;height:48px;object-fit:cover;border-radius:7px;background:#272029}.file-card-copy{display:flex;flex-direction:column;gap:5px;min-width:0}.file-card-copy strong{font-size:11px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.file-card-copy span{color:var(--muted);font-size:9px}.file-card button{width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}.file-card button:hover{color:#fff;background:#ffffff0f}.section-label{margin:24px 0 11px;display:flex;align-items:center;justify-content:space-between;color:#817885}.section-label>span{text-transform:uppercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.1em;font-size:9px}.preset-list{display:flex;flex-direction:column;gap:8px}.preset-card{position:relative;width:100%;padding:7px;border:1px solid var(--line);border-radius:11px;background:#151117;display:grid;grid-template-columns:56px minmax(0,1fr) 18px;align-items:center;gap:10px;text-align:left;cursor:pointer;transition:.15s ease}.preset-card:hover{background:#1a151c;border-color:#ffffff21}.preset-card.is-active{border-color:#ef7aba7a;background:linear-gradient(90deg,#eb6db21c,#171218);box-shadow:inset 2px 0 0 var(--accent)}.preset-swatch{width:56px;height:42px;border-radius:7px;position:relative;overflow:hidden}.preset-swatch:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:skew(-22deg) translate(-30%)}.preset-swatch i{position:absolute;left:6px;bottom:4px;z-index:1;font:700 8px/1 ui-monospace,monospace;color:#ffffffd1}.preset-copy{display:flex;min-width:0;flex-direction:column;gap:4px}.preset-copy strong{font-size:11px;font-weight:650}.preset-copy small{color:var(--muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preset-check{width:16px;height:16px;display:grid;place-items:center;border-radius:50%;color:#160d14;background:transparent}.preset-card.is-active .preset-check{background:var(--accent-bright)}.privacy-note{margin-top:22px;padding:12px;display:flex;gap:10px;border:1px solid rgba(100,182,132,.13);border-radius:10px;color:#77bd92;background:#3d87580b}.privacy-note div{display:flex;flex-direction:column;gap:3px}.privacy-note strong{font-size:10px}.privacy-note span{color:#708279;font-size:8px;line-height:1.5}.canvas-area{min-width:0;background:#0c090e;display:grid;grid-template-rows:47px minmax(0,1fr) 34px;overflow:hidden}.canvas-toolbar,.canvas-footer{display:flex;align-items:center;justify-content:space-between;padding:0 17px;border-color:var(--line);color:#716975}.canvas-toolbar{border-bottom:1px solid var(--line)}.canvas-footer{border-top:1px solid var(--line);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8px;letter-spacing:.08em}.canvas-footer>span{display:flex;align-items:center;gap:6px}.status-dot{width:5px;height:5px;border-radius:50%;background:#74c790;box-shadow:0 0 8px #74c7908c}.canvas-meta{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8px;letter-spacing:.08em}.segmented-control{padding:3px;display:flex;gap:2px;border:1px solid var(--line);border-radius:8px;background:#100c12}.segmented-control button{height:25px;padding:0 9px;display:flex;align-items:center;gap:5px;border:0;border-radius:5px;background:transparent;color:#776f7a;font-size:9px;cursor:pointer}.segmented-control button.is-active{background:#28212a;color:#eee7ee;box-shadow:0 2px 9px #0003}.segmented-control button:disabled{opacity:.35;cursor:not-allowed}.preview-stage{position:relative;overflow:hidden;min-height:0;background:radial-gradient(circle at 50% 45%,#201922,#100c12 52%,#0a080b)}.preview-stage:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;opacity:.23;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:38px 38px}.preview-stage.is-dragging{box-shadow:inset 0 0 0 2px var(--accent)}.preview-host{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2}.preview-host.is-hidden{display:none}.pixi-canvas{display:block;width:100%!important;height:100%!important}.fallback-canvas{display:none;position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100% - 54px);max-height:calc(100% - 54px);width:auto;height:auto;box-shadow:0 24px 70px #0000006e}.fallback-canvas.is-visible{display:block}.stage-grid{position:absolute;z-index:4;top:27px;right:27px;bottom:27px;left:27px;pointer-events:none;border:1px solid rgba(255,255,255,.035)}.stage-grid:before,.stage-grid:after{content:"";position:absolute;background:#ffffff09}.stage-grid:before{width:1px;height:100%;left:50%}.stage-grid:after{height:1px;width:100%;top:50%}.empty-state{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%);width:min(310px,calc(100% - 48px));min-height:210px;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px dashed rgba(255,255,255,.12);border-radius:18px;background:#100c12a8;cursor:pointer;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);transition:.18s ease}.empty-state:hover{border-color:#eb6db27a;background:#1d141dc2;transform:translate(-50%,-50%) scale(1.01)}.empty-state-icon{width:58px;height:58px;display:grid;place-items:center;border-radius:17px;color:var(--accent-bright);background:linear-gradient(145deg,#f489c424,#eb6db209);border:1px solid rgba(241,135,194,.18);margin-bottom:15px}.empty-state-title{font-size:15px;font-weight:650}.empty-state-copy{margin-top:7px;font-size:9px;color:var(--muted)}.empty-state-action{margin-top:19px;padding:8px 14px;border-radius:8px;color:#170e15;background:#eb80ba;font-size:10px;font-weight:750}.stage-badge{position:absolute;z-index:6;top:15px;height:25px;padding:0 9px;border:1px solid rgba(255,255,255,.08);border-radius:999px;display:flex;align-items:center;gap:6px;color:#a99fab;background:#0b080cb8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}.stage-badge-left{left:15px}.stage-badge-right{right:15px}.live-dot{width:5px;height:5px;border-radius:50%;background:var(--accent-bright);box-shadow:0 0 7px var(--accent)}.render-pulse{position:absolute;z-index:7;left:50%;bottom:16px;width:38px;height:3px;border-radius:999px;background:linear-gradient(90deg,transparent,var(--accent),transparent);animation:renderPulse .65s ease-in-out infinite alternate}@keyframes renderPulse{0%{opacity:.25;transform:translate(-50%) scaleX(.5)}to{opacity:1;transform:translate(-50%) scaleX(1)}}.control-section{border-top:1px solid var(--line);padding-top:1px;margin-top:17px}.control-section:first-of-type{border-top:0;margin-top:0}.right-panel .section-label{margin-top:17px}.crop-control,.format-row{padding:3px;display:grid;gap:3px;border:1px solid var(--line);background:#0e0b10;border-radius:9px}.crop-control{grid-template-columns:repeat(3,1fr)}.format-row{grid-template-columns:repeat(2,1fr)}.crop-control button,.format-row button{height:29px;border:0;border-radius:6px;background:transparent;color:#786f7b;font-size:9px;cursor:pointer}.crop-control button.is-active,.format-row button.is-active{background:#29212b;color:#f2ebf2;box-shadow:0 2px 10px #00000038}.slider-stack{padding-bottom:3px}.slider-row{display:block;margin-bottom:13px}.slider-copy{display:flex;justify-content:space-between;align-items:center;margin-bottom:7px;font-size:9px;color:#b7adb8}.slider-copy output{color:#776f7b;font:8px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.slider-row input[type=range]{--progress: 50%;width:100%;height:3px;display:block;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:999px;background:linear-gradient(90deg,var(--accent) var(--progress),#332b35 var(--progress));cursor:pointer}.slider-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;border:2px solid #100c12;background:#f2d7e7;box-shadow:0 0 0 1px #ffffff21,0 2px 7px #0009}.slider-row input[type=range]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;border:2px solid #100c12;background:#f2d7e7}.export-section{padding-bottom:14px}.compact-slider{margin:14px 1px 0}.output-edge-slider{margin-bottom:16px}.drop-overlay{position:fixed;z-index:50;top:0;right:0;bottom:0;left:0;padding:26px;display:grid;place-items:center;background:#080609c7;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}.drop-overlay:before{content:"";position:absolute;top:24px;right:24px;bottom:24px;left:24px;border:2px dashed rgba(242,132,193,.55);border-radius:22px}.drop-overlay>div{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--accent-bright)}.drop-overlay strong{color:#fff;font-size:18px}.drop-overlay span{color:var(--muted);font-size:10px}.toast{position:fixed;z-index:60;left:50%;bottom:24px;transform:translate(-50%);min-height:38px;padding:0 14px;border:1px solid rgba(109,194,141,.22);border-radius:10px;display:flex;align-items:center;gap:8px;color:#a9dbba;background:#152219f0;box-shadow:0 14px 50px #00000059;font-size:10px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.toast.is-error{border-color:#ed627845;color:#f1a5b0;background:#2f141af2}@media(max-width:1050px){.workspace{grid-template-columns:240px minmax(340px,1fr) 270px}.brand-subtitle,.brand-divider{display:none}}@media(max-width:820px){body{overflow:auto}.app-shell{height:auto;min-height:100vh;overflow:visible}.topbar{position:sticky;z-index:20;top:0}.privacy-chip{display:none}.workspace{height:auto;display:flex;flex-direction:column}.left-panel,.right-panel{border:0}.left-panel{order:2;border-top:1px solid var(--line)}.canvas-area{order:1;height:68vh;min-height:520px}.right-panel{order:3;border-top:1px solid var(--line)}.preset-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:520px){.topbar{height:60px;padding:0 12px}.workspace{min-width:0}.brand-name{font-size:12px}.primary-button{padding:0 11px}.primary-button svg{display:none}.canvas-area{min-height:470px;height:64vh}.left-panel,.right-panel{padding-left:14px;padding-right:14px}.preset-list{grid-template-columns:1fr}.stage-grid{top:17px;right:17px;bottom:17px;left:17px}.fallback-canvas{max-width:calc(100% - 34px);max-height:calc(100% - 34px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}