:root{--bg:#090b10;--surface:#10131a;--surface-2:#151922;--surface-3:#1b202b;--panel:#0f1218;--line:rgba(255,255,255,.085);--line-strong:rgba(255,255,255,.14);--text:#f5f7fb;--muted:#929bad;--accent:#8367ff;--accent-2:#38d3ff;--lime:#b8ff6a;--danger:#ff7272;--sidebar:82px;--panel-w:340px;color-scheme:dark}html[data-theme=light]{--bg:#eef0f4;--surface:#fff;--surface-2:#f6f7f9;--surface-3:#e8ebf1;--panel:#fff;--line:rgba(19,27,45,.1);--line-strong:rgba(19,27,45,.16);--text:#111521;--muted:#697387;color-scheme:light}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.studio-shell{height:100%;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr) var(--panel-w);grid-template-rows:60px minmax(0,1fr);grid-template-areas:"top top top" "tools work settings"}.studio-topbar{grid-area:top;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 92%,transparent);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 14px 0 18px;position:relative;z-index:30}.studio-brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--text);font-weight:760;width:max-content}.studio-brand small{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.13em;border-left:1px solid var(--line);padding-left:9px}.brand-mark{position:relative;width:26px;height:26px;display:inline-block;transform:rotate(-4deg)}.brand-mark i{position:absolute;display:block;border-radius:6px;background:linear-gradient(135deg,var(--accent),var(--accent-2))}.brand-mark i:nth-child(1){width:16px;height:10px;left:1px;top:3px}.brand-mark i:nth-child(2){width:14px;height:11px;right:0;top:8px;opacity:.8}.brand-mark i:nth-child(3){width:12px;height:9px;left:4px;bottom:1px;opacity:.6}.topbar-center,.topbar-actions{display:flex;align-items:center;gap:6px}.topbar-actions{justify-self:end}.icon-button,.text-button,.view-button,.zoom-value{border:1px solid transparent;background:transparent;border-radius:9px;height:34px;min-width:34px;padding:0 9px;color:var(--muted)}.icon-button:hover:not(:disabled),.text-button:hover:not(:disabled),.view-button:hover:not(:disabled),.zoom-value:hover:not(:disabled){background:var(--surface-2);color:var(--text)}button:disabled{opacity:.36;cursor:not-allowed}.icon-button.compact{height:28px;min-width:28px;padding:0}.text-button{font-size:12px}.toolbar-separator{width:1px;height:20px;background:var(--line);margin:0 4px}.local-badge{font-size:10px;color:#c9ffc0;border:1px solid rgba(106,211,119,.18);background:#54c46214;padding:6px 9px;border-radius:99px}.local-badge i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#70dc7e;margin-right:5px}.export-top-button{height:36px;border:0;border-radius:10px;padding:0 15px;background:linear-gradient(135deg,var(--accent),#6355ef);color:#fff;font-size:12px;font-weight:700;box-shadow:0 10px 24px #7c5cff38}.export-top-button span{margin-left:7px}.tool-sidebar{grid-area:tools;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;overflow:hidden;z-index:20}.tool-sidebar-scroll{overflow-y:auto;overflow-x:hidden;width:100%;padding:10px 0;scrollbar-width:none}.tool-nav{width:100%;height:61px;border:0;background:transparent;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative}.tool-nav span{font-size:17px;line-height:1;width:30px;height:28px;border-radius:9px;display:grid;place-items:center}.tool-nav small{font-size:9px}.tool-nav:hover{color:var(--text)}.tool-nav.active{color:#cbbfff}.tool-nav.active:before{content:"";position:absolute;left:0;width:3px;height:28px;border-radius:0 4px 4px 0;background:var(--accent)}.tool-nav.active span{background:#7c5cff29;box-shadow:inset 0 0 0 1px #7c5cff33}.sidebar-help{width:30px;height:30px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;text-decoration:none;color:var(--muted);font-size:12px;margin:8px 0 14px}.workspace{grid-area:work;min-width:0;display:grid;grid-template-rows:45px minmax(0,1fr) 28px;overflow:hidden;background:var(--bg)}.workspace-toolbar{border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 13px}.file-meta{min-width:0;font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px}.file-meta-name{color:var(--text);max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-meta-badge{padding:3px 6px;border:1px solid var(--line);border-radius:6px;font-size:9px;text-transform:uppercase}.view-actions{display:flex;align-items:center;gap:3px}.view-button{font-size:10px;height:28px}.view-button.active{background:var(--surface-2);color:var(--text);border-color:var(--line)}.zoom-value{font-size:9px;height:28px;min-width:44px}.canvas-area{position:relative;overflow:hidden;display:grid;place-items:center;background-image:radial-gradient(circle at 50% 40%,rgba(124,92,255,.055),transparent 38%)}.empty-state{text-align:center;max-width:520px;padding:30px;display:flex;flex-direction:column;align-items:center}.drop-visual{width:110px;height:96px;position:relative;margin-bottom:25px}.drop-layer{position:absolute;width:74px;height:58px;border:1px solid var(--line-strong);border-radius:16px;left:18px;top:18px;background:var(--surface)}.layer-back{transform:translate(-15px,-10px) rotate(-9deg);opacity:.4}.layer-mid{transform:translate(15px,-5px) rotate(8deg);opacity:.65}.layer-front{display:grid;place-items:center;background:linear-gradient(145deg,var(--surface-2),var(--surface));box-shadow:0 18px 40px #00000040}.layer-front span{width:35px;height:35px;border-radius:11px;display:grid;place-items:center;background:#7c5cff26;color:#bbaeff;font-size:19px}.empty-state h1{font-size:24px;letter-spacing:-.03em;margin:0}.empty-state p{font-size:13px;color:var(--muted);max-width:430px;margin:9px 0 22px}.empty-actions{display:flex;gap:8px}.primary-action,.secondary-action{border-radius:11px;padding:10px 15px;font-size:12px;font-weight:700}.primary-action{border:0;background:linear-gradient(135deg,var(--accent),#6355ef);color:#fff}.secondary-action{border:1px solid var(--line);background:var(--surface)}.empty-state>small{color:var(--muted);font-size:9px;margin-top:18px}.preview-stage{width:100%;height:100%;display:grid;place-items:center;padding:30px;overflow:auto}.preview-stage.hidden,.empty-state.hidden,.modal-backdrop.hidden{display:none}.canvas-checker{position:relative;box-shadow:0 24px 60px #00000059;line-height:0;transform-origin:center;background-color:#d4d4d4;background-image:linear-gradient(45deg,#bdbdbd 25%,transparent 25%),linear-gradient(-45deg,#bdbdbd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bdbdbd 75%),linear-gradient(-45deg,transparent 75%,#bdbdbd 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.canvas-checker canvas{display:block;max-width:none}.pixel-picker{position:absolute;width:18px;height:18px;border:2px solid white;border-radius:50%;box-shadow:0 0 0 1px #000,0 3px 12px #0006;pointer-events:none;display:none;transform:translate(-50%,-50%)}.drop-overlay{position:absolute;inset:14px;border:1px dashed rgba(124,92,255,.6);border-radius:18px;background:#0f0c23c7;backdrop-filter:blur(12px);display:none;place-items:center;z-index:15}.drop-overlay.visible{display:grid}.drop-overlay div{display:flex;flex-direction:column;align-items:center}.drop-overlay span{font-size:36px;color:#cbbfff}.drop-overlay b{font-size:16px}.drop-overlay small{font-size:10px;color:#b1a9cf;margin-top:5px}.workspace-status{border-top:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 10px;font-size:8px;color:var(--muted)}.status-spacer{flex:1}.workspace-status i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#70dc7e;margin-right:4px}.settings-panel{grid-area:settings;border-left:1px solid var(--line);background:var(--panel);display:grid;grid-template-rows:62px minmax(0,1fr) auto;overflow:hidden;z-index:20}.settings-head{border-bottom:1px solid var(--line);padding:12px 16px;display:flex;align-items:center;justify-content:space-between}.settings-kicker{display:block;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;font-size:8px}.settings-head h2{font-size:15px;margin:3px 0 0}.settings-scroll{overflow-y:auto;padding:14px 15px 24px;scrollbar-width:thin;scrollbar-color:var(--surface-3) transparent}.panel-section{padding:2px 0 18px;border-bottom:1px solid var(--line);margin-bottom:16px}.panel-section:last-child{border:0}.panel-section-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.panel-section-title h3{font-size:10px;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin:0}.panel-section-title button{border:0;background:transparent;color:var(--accent-2);font-size:9px}.field{margin-bottom:12px}.field:last-child{margin-bottom:0}.field-label{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin-bottom:6px}.field-label span:last-child{color:var(--muted)}.select-control,.text-control,.number-control{width:100%;height:36px;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:0 10px;font-size:11px;outline:none}.select-control:focus,.text-control:focus,.number-control:focus{border-color:#7c5cff80;box-shadow:0 0 0 3px #7c5cff14}.dual-input{display:grid;grid-template-columns:1fr 28px 1fr;gap:6px;align-items:center}.dual-input>span{color:var(--muted);text-align:center;font-size:10px}.input-with-unit{position:relative}.input-with-unit input{padding-right:30px}.input-with-unit span{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:9px;color:var(--muted)}.range-row{display:grid;grid-template-columns:1fr 42px;gap:8px;align-items:center}.range-control{appearance:none;width:100%;height:4px;background:var(--surface-3);border-radius:99px;outline:none}.range-control::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 2px 7px #0000004d}.range-value{height:28px;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;display:grid;place-items:center;font-size:9px;color:var(--muted)}.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border:1px solid var(--line);border-radius:10px;padding:3px;background:var(--surface-2);gap:3px}.segmented button{height:29px;border:0;border-radius:7px;background:transparent;font-size:9px;color:var(--muted)}.segmented button.active{background:var(--surface-3);color:var(--text);box-shadow:0 2px 8px #0000001a}.option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}.option-card{min-height:52px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:8px;text-align:left}.option-card b{display:block;font-size:10px}.option-card small{display:block;font-size:8px;color:var(--muted);margin-top:2px}.option-card.active{border-color:#7c5cff80;background:#7c5cff1a}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.toggle-row div b{font-size:10px;display:block}.toggle-row div small{font-size:8px;color:var(--muted)}.switch{width:35px;height:20px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line);position:relative;padding:0}.switch:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;left:2px;top:2px;transition:.18s}.switch.active{background:var(--accent)}.switch.active:after{left:17px}.rotation-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.rotation-buttons button{height:38px;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;font-size:14px}.rotation-buttons button:hover{border-color:var(--line-strong);background:var(--surface-3)}.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;max-width:126px}.position-grid button{height:30px;border:1px solid var(--line);background:var(--surface-2);border-radius:7px}.position-grid button.active{background:#7c5cff26;border-color:#7c5cff73}.color-row{display:grid;grid-template-columns:38px 1fr;gap:8px}.color-input{width:38px;height:36px;border:1px solid var(--line);padding:3px;background:var(--surface-2);border-radius:9px}.preset-list{display:grid;gap:6px}.preset-item{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:9px;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:8px;text-align:left}.preset-icon{width:30px;height:30px;border-radius:8px;background:var(--surface-3);display:grid;place-items:center;font-size:10px}.preset-item b{display:block;font-size:10px}.preset-item small{display:block;color:var(--muted);font-size:8px}.preset-item>span:last-child{font-size:8px;color:var(--muted)}.preset-item:hover,.preset-item.active{border-color:#7c5cff66}.palette-list{display:grid;gap:8px}.palette-color{display:grid;grid-template-columns:38px 1fr auto;gap:8px;align-items:center;border:1px solid var(--line);background:var(--surface-2);border-radius:10px;padding:7px}.palette-swatch{height:28px;border-radius:7px;box-shadow:inset 0 0 0 1px #ffffff1f}.palette-color code{font-size:9px}.palette-color button{border:0;background:transparent;color:var(--muted);font-size:9px}.picker-info{border:1px dashed var(--line-strong);border-radius:10px;padding:12px;text-align:center;color:var(--muted);font-size:9px}.export-dock{border-top:1px solid var(--line);padding:12px 14px 14px;background:var(--panel)}.export-summary{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:9px}.export-summary span{font-size:8px;color:var(--muted);display:block}.export-summary b{font-size:10px}.size-saving{color:var(--lime)!important}.download-button{width:100%;height:48px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--accent),#6355ef);color:#fff;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr 1fr;grid-template-areas:"title icon" "sub icon";padding:8px 12px;text-align:left;box-shadow:0 12px 28px #7c5cff33}.download-button span{grid-area:title;font-size:11px;font-weight:700;align-self:end}.download-button small{grid-area:sub;font-size:8px;color:#ffffffad}.download-button b{grid-area:icon;align-self:center;font-size:16px}.download-button:disabled{background:var(--surface-3);box-shadow:none;color:var(--muted)}.mobile-close,.mobile-tools-button{display:none}.toast-region{position:fixed;left:96px;bottom:42px;z-index:100;display:flex;flex-direction:column;gap:8px}.toast{min-width:240px;max-width:360px;border:1px solid var(--line-strong);background:#10131aed;backdrop-filter:blur(16px);border-radius:12px;padding:11px 13px;box-shadow:0 15px 40px #00000059;display:flex;gap:9px;align-items:flex-start;animation:toast-in .25s ease}.toast i{width:20px;height:20px;border-radius:7px;background:#70dc7e21;color:#70dc7e;display:grid;place-items:center;font-style:normal;font-size:10px}.toast b{font-size:10px;display:block}.toast small{font-size:8px;color:var(--muted);display:block;margin-top:2px}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}}.modal-backdrop{position:fixed;inset:0;z-index:200;background:#030509b8;backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px}.export-modal-card{width:min(500px,100%);background:var(--surface);border:1px solid var(--line-strong);border-radius:22px;padding:24px;box-shadow:0 30px 100px #00000080;position:relative}.modal-close{position:absolute;right:14px;top:14px;width:30px;height:30px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2)}.modal-kicker{font-size:8px;text-transform:uppercase;color:var(--accent-2);letter-spacing:.15em}.export-modal-card h2{font-size:22px;margin:5px 0 15px}.export-preview{height:210px;border-radius:14px;display:grid;place-items:center;overflow:hidden;background-color:#d4d4d4;background-image:linear-gradient(45deg,#bdbdbd 25%,transparent 25%),linear-gradient(-45deg,#bdbdbd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bdbdbd 75%),linear-gradient(-45deg,transparent 75%,#bdbdbd 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.export-preview canvas{max-width:100%;max-height:100%}.export-modal-info{margin-top:14px}.export-modal-info>div:first-child{display:grid;grid-template-columns:80px 1fr;align-items:center;font-size:10px;color:var(--muted)}.export-modal-info input{height:35px;border:1px solid var(--line);background:var(--surface-2);border-radius:9px;padding:0 10px;font-size:11px}.export-stats{display:flex;gap:8px;margin-top:10px}.export-stats span{flex:1;text-align:center;border:1px solid var(--line);background:var(--surface-2);border-radius:8px;padding:7px;font-size:9px;color:var(--muted)}.modal-download{width:100%;height:45px;border:0;border-radius:11px;background:linear-gradient(135deg,var(--accent),#6355ef);color:#fff;font-size:11px;font-weight:700;margin-top:14px}.modal-download span{float:right}.modal-privacy{display:block;text-align:center;color:var(--muted);font-size:8px;margin-top:9px}@media(max-width:980px){:root{--panel-w:300px}.local-badge{display:none}.file-meta-name{max-width:150px}}@media(max-width:760px){body{overflow:hidden}.studio-shell{grid-template-columns:66px minmax(0,1fr);grid-template-rows:56px minmax(0,1fr);grid-template-areas:"top top" "tools work"}.studio-topbar{grid-template-columns:1fr auto;padding:0 10px}.topbar-center,.studio-brand small{display:none}.settings-panel{position:fixed;right:0;top:56px;bottom:0;width:min(340px,92vw);transform:translate(105%);transition:.25s;box-shadow:-20px 0 60px #00000059}.settings-panel.open{transform:translate(0)}.mobile-close{display:block}.topbar-actions .icon-button{display:none}.export-top-button{height:34px}.tool-sidebar{z-index:22}.tool-nav{height:58px}.workspace{grid-template-rows:42px minmax(0,1fr) 26px}.workspace-toolbar{padding:0 7px}.file-meta-badge,.file-meta>span:nth-child(n+3){display:none}.view-button{display:none}.preview-stage{padding:16px}.empty-state h1{font-size:21px}.empty-state p{font-size:11px}.empty-actions{flex-direction:column;width:100%;max-width:220px}.mobile-tools-button{display:block;position:fixed;right:12px;bottom:12px;z-index:25;border:1px solid rgba(255,255,255,.16);background:#14171fe6;backdrop-filter:blur(12px);border-radius:11px;padding:9px 12px;font-size:10px}.toast-region{left:78px;right:10px;bottom:52px}.toast{min-width:0}.modal-backdrop{padding:10px}.export-modal-card{padding:20px}.export-preview{height:160px}}@media(max-width:480px){:root{--sidebar:58px}.tool-nav small{font-size:8px}.tool-nav span{font-size:15px}.studio-brand{font-size:13px}.workspace-status{gap:8px}.workspace-status span:nth-child(2),.workspace-status span:nth-child(3){display:none}.export-top-button{padding:0 11px}.export-top-button span{display:none}}.is-hidden{display:none!important}.secondary-action.full{width:100%;height:38px}