.mdi .sc,.ov{font-family:'JetBrains Mono',monospace}#banner-strip,#tool-options,#workspace,.menu-dropdown,body,html{overflow:hidden}#bgc,#fgc{width:19px;height:19px;transition:border-color .1s}#mc,.menu-item:hover .menu-dropdown{display:block}.os,.osel{outline:0}#banner-placeholder,.ph,.wlc-recent-label,.wlc-sub{text-transform:uppercase}.os,.rsl{-webkit-appearance:none}.ov,.rv{text-align:right}*{margin:0;padding:0;box-sizing:border-box;user-select:none}body,html{width:100%;height:100%;background:#0d0d0d;color:#e8e8e8;font-family:Syne,sans-serif;display:flex;flex-direction:column}::-webkit-scrollbar{width:5px;height:5px}#topbar,.app-logo{height:42px;display:flex;align-items:center}::-webkit-scrollbar-track{background:#0d0d0d}::-webkit-scrollbar-thumb{background:#2e2e2e;border-radius:3px}#topbar{background:#111;border-bottom:1px solid #2a2a2a;flex-shrink:0;z-index:100}.app-logo{padding:0 14px;gap:7px;border-right:1px solid #2a2a2a;flex-shrink:0;text-decoration:none}.app-logo-icon,.menu-bar{align-items:center;display:flex}.app-logo-icon{width:22px;height:22px;background:linear-gradient(135deg,#4f8ef7 0,#a25cf7 100%);border-radius:5px;justify-content:center;font-size:11px;font-weight:700;color:#fff;letter-spacing:-.5px;flex-shrink:0}.menu-dropdown,.ob{border:1px solid #333}.app-logo-text{font-size:13px;font-weight:600;color:#fff;letter-spacing:-.3px;white-space:nowrap}.mdi,.menu-item{font-size:12px;cursor:pointer}.app-logo-text span{color:#7eb6ff}.wlc-btn svg,.wlc-title span{color:#5b9cf6}.menu-bar{height:100%}.menu-item{padding:0 13px;height:100%;display:flex;align-items:center;font-weight:500;color:silver;position:relative;transition:color .1s,background .1s}#banner-close,#bgc,#fgc,.menu-dropdown{position:absolute}.menu-item:hover{color:#fff;background:#1e1e1e}.menu-dropdown{display:none;top:100%;left:0;background:#181818;min-width:188px;z-index:2000;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.85);margin-top:1px}#banner-close,#banner-strip,#canvas-area,#left-tools,#tool-options,#workspace,.mdi,.og,.tb{display:flex}#banner-strip,#canvas-area,#canvas-container,#color-swatches,.tb{position:relative}.mdi{padding:7px 14px;font-weight:400;color:#d0d0d0;justify-content:space-between;align-items:center;transition:background .08s}#tool-options,.ob,.ol,.osel,.ov{font-size:11px}.wlc-icon,.wlc-title{font-weight:700;letter-spacing:-1px}#zoom-display,.ol{color:#888;white-space:nowrap}.ob,.tb{transition:.1s;cursor:pointer}.mdi:hover{background:#252525;color:#fff}.mdi .sc{color:#555;font-size:10px}.menu-dropdown hr{border:none;border-top:1px solid #242424;margin:3px 0}#tool-options{flex:1;align-items:center;gap:12px;padding:0 16px;border-left:1px solid #2a2a2a;height:100%}.og{align-items:center;gap:6px}.os{width:72px;height:3px;background:#2e2e2e;border-radius:2px;cursor:pointer}.os::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#5b8df0;cursor:pointer;border:1.5px solid #0d0d0d}.ov{color:#e8e8e8;min-width:28px}.ob,.osel,.tb[title]:hover::after{font-family:Syne,sans-serif}.ob{padding:3px 8px;background:#1e1e1e;border-radius:4px;color:silver}.ob:hover{background:#2a2a2a;color:#fff;border-color:#444}.ob.active{background:#1a2d52;border-color:#4070c0;color:#7eb6ff}.li:hover,.osel,.osel option{background:#1a1a1a}.osel{border:1px solid #333;border-radius:4px;color:#c8c8c8;padding:3px 6px;cursor:pointer}#tnm{color:#fff;font-size:12px;font-weight:600;white-space:nowrap;min-width:56px}#banner-placeholder,#zoom-display{font-size:11px;font-family:'JetBrains Mono',monospace}#zoom-display{padding:0 14px;border-left:1px solid #2a2a2a;flex-shrink:0}#banner-strip{height:52px;background:#000;border-bottom:1px solid #1e1e1e;align-items:center;justify-content:center;flex-shrink:0;gap:12px}#banner-placeholder{display:flex;align-items:center;gap:10px;border:1px dashed #2a2a2a;border-radius:5px;padding:0 28px;height:38px;font-weight:500;color:#fff;letter-spacing:.08em}#banner-close{right:12px;top:50%;transform:translateY(-50%);width:24px;height:24px;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;color:#fff;opacity:.4;font-size:14px;transition:opacity .1s}#banner-close:hover,.wlc-btn:hover svg{opacity:1}#workspace{flex:1}#left-tools{width:46px;background:#111;border-right:1px solid #2a2a2a;flex-direction:column;align-items:center;padding:8px 0 4px;gap:2px;flex-shrink:0;overflow-y:auto}.tb{width:34px;height:34px;align-items:center;justify-content:center;border-radius:6px;color:#707070;font-size:15px;border:1px solid transparent;flex-shrink:0}.tb:hover{color:#fff;background:#202020}.tb.active{color:#7eb6ff;background:#122040;border-color:#1e4080}.tb[title]:hover::after{content:attr(title);position:absolute;left:44px;top:50%;transform:translateY(-50%);background:#1a1a1a;border:1px solid #333;color:#e8e8e8;font-size:11px;font-weight:500;padding:5px 9px;border-radius:5px;white-space:nowrap;z-index:3000;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.7)}.td{width:24px;height:1px;background:#222;margin:4px 0;flex-shrink:0}#color-swatches{width:32px;height:32px;margin-top:auto;flex-shrink:0}#bgc{bottom:0;right:0;border:1.5px solid #444;border-radius:3px;cursor:pointer}#bgc:hover{border-color:#888}#fgc{top:0;left:0;border:2px solid #aaa;border-radius:3px;cursor:pointer;box-shadow:0 0 0 2px #111}#sel-overlay,#text-input-overlay{display:none;border:1px dashed #5b8df0;position:absolute}#fgc:hover{border-color:#fff}#canvas-area{flex:1;overflow:auto;background:0 0/20px 20px,0 10px/20px 20px,10px -10px/20px 20px,-10px 0/20px 20px #0d0d0d;align-items:flex-start;justify-content:flex-start;background-image:linear-gradient(45deg,#141414 25%,transparent 25%),linear-gradient(-45deg,#141414 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#141414 75%),linear-gradient(-45deg,transparent 75%,#141414 75%)}#canvas-container{margin:40px;box-shadow:0 8px 64px rgba(0,0,0,.95),0 0 0 1px #2e2e2e;flex-shrink:0}#mc{background:#000}#sel-overlay{background:rgba(91,141,240,.05);pointer-events:none}#text-input-overlay{background:0 0;outline:0;color:inherit;font-family:inherit;resize:none;padding:2px;z-index:50;min-width:80px;overflow:hidden}#hxi,#hxl,.rl,.rv,.wlc-recent-label,.wlc-sub{font-family:'JetBrains Mono',monospace}#welcome-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;z-index:10;pointer-events:none;background:#000}#file-input,#welcome-screen.hidden{display:none}.wlc-logo{display:flex;flex-direction:column;align-items:center;gap:12px}.ph,.wlc-icon{align-items:center}.wlc-icon{width:64px;height:64px;background:linear-gradient(135deg,#4f8ef7 0,#a25cf7 100%);border-radius:16px;display:flex;justify-content:center;font-size:24px;color:#fff;box-shadow:0 0 40px rgba(79,142,247,.35)}#hxr,#statusbar,.wlc-btn{background:#0d0d0d}.wlc-btn,.wlc-recent{flex-direction:column;display:flex}.wlc-title{font-size:42px;color:#fff;line-height:1}.ph,.pv,.rl,.wlc-btn-label{font-weight:600}.wlc-sub{font-size:13px;color:#fff;opacity:.35;margin-top:-4px;letter-spacing:.06em}.wlc-actions{display:flex;gap:14px;pointer-events:all}.wlc-btn{align-items:center;gap:10px;padding:22px 28px;border:1px solid #2a2a2a;border-radius:12px;cursor:pointer;transition:.15s;min-width:134px}#hxr,.pvs,.rr{gap:6px}.wlc-btn:hover{background:#111;border-color:#4f8ef7;transform:translateY(-3px);box-shadow:0 10px 40px rgba(0,0,0,.8),0 0 20px rgba(79,142,247,.15)}.wlc-btn svg{opacity:.85}.wlc-btn-label{font-size:12px;color:#fff;white-space:nowrap}.ph,.pv,.rl,.rv,.wlc-btn-sub{font-size:10px}.wlc-btn-sub{color:#fff;opacity:.3;margin-top:-6px}.wlc-recent{align-items:center;gap:6px;pointer-events:none}.wlc-recent-label{font-size:10px;color:#fff;opacity:.22;letter-spacing:.08em}#right-panel{width:220px;background:#111;border-left:1px solid #2a2a2a;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}.ps{border-bottom:1px solid #1e1e1e}.ph{padding:9px 13px;color:#888;letter-spacing:.1em;display:flex;justify-content:space-between;background:#0f0f0f}.pc{padding:8px 12px 12px}#cwc{width:100%;aspect-ratio:1;border-radius:5px;cursor:crosshair;display:block;border:1px solid #222}.rr{display:flex;align-items:center;margin-top:6px}#hxi,.rsl{flex:1;outline:0}#hxr,.laa,.pvs{margin-top:8px}.rl{width:10px}.rsl{height:3px;border-radius:2px;cursor:pointer}#statusbar,.pv{height:24px;display:flex}.rsl::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#e0e0e0;cursor:pointer;border:1.5px solid #111}.rv{color:#aaa;width:24px}#hxl,.pv{color:#555}#hxr{display:flex;align-items:center;padding:5px 9px;border:1px solid #2a2a2a;border-radius:5px}#hxl{font-size:11px}#hxi,.li.active .lnm{color:#fff}#hxi{background:0 0;border:none;font-size:12px;width:0;letter-spacing:.05em}.pvs{display:flex}.pv{flex:1;border-radius:4px;border:1px solid #2a2a2a;cursor:pointer;align-items:center;justify-content:center;transition:.1s;letter-spacing:.04em}.lab,.lnm,.si span{font-weight:500}.pv:hover{border-color:#555;color:#888}#ll{display:flex;flex-direction:column;gap:2px}.li{display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:5px;cursor:pointer;border:1px solid transparent}.li.active{background:#122040;border-color:#1e4080}.lth{width:28px;height:20px;border-radius:3px;border:1px solid #2e2e2e;overflow:hidden;flex-shrink:0;background:#fff}.lth canvas{width:100%;height:100%}.lnm{flex:1;font-size:11px;color:silver}.lv{width:16px;height:16px;display:flex;align-items:center;justify-content:center;color:#555;font-size:12px;transition:color .1s}.hi,.lab{font-size:11px;cursor:pointer}.lv:hover{color:#aaa}.laa{display:flex;gap:4px}.lab{flex:1;padding:5px;background:#171717;border:1px solid #2a2a2a;border-radius:4px;color:#888;text-align:center;font-family:Syne,sans-serif;transition:.1s}.lab:hover{background:#202020;color:#e0e0e0;border-color:#3a3a3a}.hi{padding:5px 7px;color:#666;border-radius:4px;display:flex;align-items:center;gap:6px;transition:background .08s}.hi:hover{background:#1a1a1a;color:#aaa}.hi.current{color:#7eb6ff;background:#0e1e38}.hd{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}#statusbar{border-top:1px solid #222;align-items:center;padding:0 14px;gap:20px;flex-shrink:0}.si{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#555}.si span{color:#999}.si strong{color:#c8c8c8}.cursor-crosshair,.cursor-crosshair *{cursor:crosshair!important}.cursor-move *{cursor:move!important}.cursor-text *{cursor:text!important}.cursor-grab *{cursor:grab!important}.cursor-grabbing *{cursor:grabbing!important}.cursor-zoom-in *{cursor:zoom-in!important}.cursor-zoom-out *{cursor:zoom-out!important}