*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#13131a;--bg2:#1c1c28;--bg3:#25253a;--border:#2e2e45;--accent:#7c6af7;--accent-h:#9d8fff;--text:#d4d4e8;--text-dim:#6b6b90;--danger:#e05b5b;color:var(--text);background:var(--bg);font-family:Segoe UI,system-ui,sans-serif;font-size:13px}body{user-select:none;overflow:hidden}#app{flex-direction:column;width:100vw;height:100vh;display:flex}#titlebar{background:var(--bg2);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;height:36px;padding:0 12px;display:flex}#title-label{letter-spacing:.06em;color:var(--accent);font-size:13px;font-weight:600}#window-controls{gap:4px;display:flex}#window-controls button{width:28px;height:22px;color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;font-size:11px;transition:background .15s,color .15s;display:flex}#window-controls button:hover{background:var(--bg3);color:var(--text)}#close-btn:hover{background:var(--danger)!important;color:#fff!important}#main{flex:1;min-height:0;display:flex;overflow:hidden}#left-panel{background:var(--bg2);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:196px;padding:12px 0;display:flex;overflow-y:auto}#right-panel{background:var(--bg2);border-left:1px solid var(--border);flex-direction:column;flex-shrink:0;width:210px;padding:12px 0;display:flex;overflow-y:auto}#viewport-container{background:var(--bg);flex:1;min-width:0;position:relative}#viewport{width:100%;height:100%;display:block}#drop-overlay{background:var(--bg);z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#drop-box{border:2px dashed var(--border);text-align:center;border-radius:16px;flex-direction:column;align-items:center;gap:10px;padding:48px 64px;transition:border-color .2s,background .2s;display:flex}#drop-box.active{border-color:var(--accent);background:#7c6af70f}#drop-icon{color:var(--text-dim);font-size:48px;line-height:1}#drop-label{color:var(--text);font-size:18px;font-weight:600}#drop-sub{color:var(--text-dim);font-size:12px}#drop-formats{color:var(--text-dim);letter-spacing:.08em;margin-top:-4px;font-size:10px}.panel-section{border-bottom:1px solid var(--border);flex-direction:column;gap:8px;padding:10px 14px;display:flex}.section-title{letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:2px;font-size:10px;font-weight:700}label{color:var(--text);flex-direction:column;gap:4px;font-size:12px;display:flex}select{background:var(--bg3);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:5px;outline:none;padding:4px 6px;font-size:12px}select:focus{border-color:var(--accent)}.slider-row{align-items:center;gap:8px;display:flex}input[type=range]{accent-color:var(--accent);cursor:pointer;flex:1;height:4px}.slider-row span{text-align:right;width:32px;color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:11px}#dir-presets{gap:4px;display:flex}.dir-preset{background:var(--bg3);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;border-radius:4px;flex:1;padding:4px 0;font-size:11px;font-weight:600;transition:background .12s,border-color .12s,color .12s}.dir-preset:hover{border-color:var(--accent-h);color:var(--text)}.dir-preset.active{background:var(--accent);border-color:var(--accent);color:#fff}.locked,button.locked:hover{opacity:.4;cursor:not-allowed!important;border-color:var(--border)!important;color:var(--text-dim)!important;background:var(--bg3)!important}#free-badge{border-top:1px solid var(--border);letter-spacing:.1em;color:var(--accent);text-align:center;padding:10px 14px;font-size:9px;font-weight:700}#free-badge span{letter-spacing:.02em;color:var(--text-dim);margin-top:4px;font-weight:400;line-height:1.5;display:block}#compass-wrap{justify-content:center;padding:4px 0;display:flex}#compass-ring{flex-shrink:0;width:150px;height:150px;position:relative}#compass-ring:before{content:"";border:1px solid var(--border);border-radius:50%;width:110px;height:110px;position:absolute;top:20px;left:20px}.clabel{color:var(--text-dim);letter-spacing:.04em;pointer-events:none;font-size:9px;font-weight:700;position:absolute}.clabel-n{top:2px;left:50%;transform:translate(-50%)}.clabel-s{bottom:2px;left:50%;transform:translate(-50%)}.clabel-e{top:50%;right:2px;transform:translateY(-50%)}.clabel-w{top:50%;left:2px;transform:translateY(-50%)}.angle-dot{border:1.5px solid var(--border);background:var(--bg3);cursor:pointer;border-radius:50%;width:12px;height:12px;padding:0;transition:background .12s,border-color .12s,transform .1s;position:absolute;transform:translate(-50%,-50%)}.angle-dot:hover{border-color:var(--accent-h);transform:translate(-50%,-50%)scale(1.3)}.angle-dot.active{background:var(--accent);border-color:var(--accent)}.angle-dot.active:hover{background:var(--accent-h);border-color:var(--accent-h)}.angle-dot.cardinal{width:14px;height:14px}#dir-count{color:var(--text-dim);text-align:center;letter-spacing:.06em;font-size:10px}#export-wrap{margin-top:auto;padding:14px 14px 6px}#export-btn{background:var(--accent);color:#fff;cursor:pointer;letter-spacing:.04em;border:none;border-radius:7px;width:100%;padding:10px;font-size:13px;font-weight:600;transition:background .15s}#export-btn:hover{background:var(--accent-h)}#export-btn:active{background:var(--accent)}#status{color:var(--text-dim);text-align:center;word-break:break-all;min-height:20px;padding:4px 14px;font-size:11px}#load-wrap{justify-content:center;padding:4px 14px 14px;display:flex}#browse-btn,#drop-browse-btn{color:var(--text-dim);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:6px;padding:6px 18px;font-size:12px;transition:border-color .15s,color .15s}#browse-btn:hover,#drop-browse-btn:hover{border-color:var(--accent);color:var(--text)}#file-input{display:none}#palette-swatches{flex-wrap:wrap;gap:3px;margin-top:4px;display:flex}.swatch{border:1px solid #ffffff14;border-radius:2px;flex-shrink:0;width:14px;height:14px}.color-pick{border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:4px;flex-shrink:0;width:22px;height:22px;padding:0}.color-pick::-webkit-color-swatch-wrapper{padding:2px}.color-pick::-webkit-color-swatch{border:none;border-radius:2px}.row-label{cursor:pointer;align-items:center;flex-direction:row!important;gap:8px!important}.row-label input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;flex-shrink:0}.anim-controls{align-items:center;gap:8px;display:flex}.icon-btn{border:1px solid var(--border);background:var(--bg3);width:28px;height:28px;color:var(--text);cursor:pointer;border-radius:5px;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;transition:background .15s,border-color .15s;display:flex}.icon-btn:hover{background:var(--accent);border-color:var(--accent)}.anim-time-wrap{font-variant-numeric:tabular-nums;align-items:baseline;gap:4px;font-size:11px;display:flex}.dim{color:var(--text-dim);font-size:10px}.secondary-btn{width:100%;color:var(--text-dim);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:5px;margin-top:2px;padding:6px;font-size:12px;transition:border-color .15s,color .15s}.secondary-btn:hover{border-color:var(--accent);color:var(--text)}#snap-btns{gap:3px;margin-top:2px;display:flex}.snap-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text-dim);letter-spacing:.05em;cursor:pointer;border-radius:4px;flex:1;padding:4px 0;font-size:9px;font-weight:700;transition:background .12s,border-color .12s,color .12s}.snap-btn:hover{border-color:var(--accent-h);color:var(--text)}.snap-btn:active{background:var(--accent);border-color:var(--accent);color:#fff}#center-split{flex:1;min-width:0;display:flex}#split-divider{cursor:col-resize;background:var(--border);flex-shrink:0;width:5px;transition:background .12s}#split-divider:hover,#split-divider.dragging{background:var(--accent)}#pixel-pane{background:var(--bg);flex-direction:column;flex-shrink:0;width:300px;min-width:160px;min-height:0;display:flex}#pixel-pane-head{border-bottom:1px solid var(--border);background:var(--bg2);flex-shrink:0;justify-content:space-between;align-items:center;padding:6px 10px;display:flex}#pixel-pane-title{letter-spacing:.1em;color:var(--text-dim);font-size:9px;font-weight:700}#pixel-zoom-controls{align-items:center;gap:6px;display:flex}#px-zoom-lbl{color:var(--text-dim);text-align:center;font-variant-numeric:tabular-nums;min-width:24px;font-size:10px}.pp-size-btn{border:1px solid var(--border);background:var(--bg3);width:18px;height:18px;color:var(--text-dim);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;font-size:12px;line-height:1;transition:border-color .12s,color .12s;display:flex}.pp-size-btn:hover{border-color:var(--accent-h);color:var(--text)}#pixel-scroll{background:repeating-conic-gradient(var(--bg3) 0% 25%, var(--bg) 0% 50%) 0 0 / 12px 12px;flex:1;display:flex;overflow:auto}#pixel-preview{image-rendering:pixelated;flex-shrink:0;margin:auto}#cam-diagram{border:1px solid var(--border);pointer-events:none;background:#0d0d14d1;border-radius:50%;width:90px;height:90px;position:absolute;top:12px;right:12px}#preview-row{background:var(--bg2);border-top:1px solid var(--border);flex-shrink:0;align-items:center;gap:10px;height:100px;padding:8px 14px;display:none;overflow:auto hidden}#preview-label{letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;font-size:10px;font-weight:700}#preview-strip{align-items:center;gap:6px;display:flex}#preview-strip canvas{border:1px solid var(--border);image-rendering:pixelated;border-radius:3px}#preview-modal{z-index:200;background:#000000b8;justify-content:center;align-items:center;display:none;position:fixed;inset:0}#preview-modal.open{display:flex}#pm-box{background:var(--bg2);border:1px solid var(--border);border-radius:12px;flex-direction:column;min-width:320px;max-width:92vw;max-height:90vh;display:flex;overflow:hidden;box-shadow:0 24px 64px #0009}#pm-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}#pm-title{color:var(--text);font-size:13px;font-weight:600}#pm-close-btn{width:24px;height:24px;color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;font-size:11px;transition:background .15s,color .15s}#pm-close-btn:hover{background:var(--danger);color:#fff}#pm-canvas-wrap{background:repeating-conic-gradient(var(--bg3) 0% 25%, var(--bg) 0% 50%) 0 0 / 16px 16px;flex:1;justify-content:center;align-items:center;padding:20px;display:flex;overflow:auto}#pm-canvas{image-rendering:pixelated;border-radius:2px;max-width:calc(90vw - 40px);max-height:calc(82vh - 100px);box-shadow:0 4px 20px #00000080}#pm-footer{border-top:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}#pm-info{color:var(--text-dim);font-size:11px}#pm-actions{gap:8px;display:flex}#pm-cancel-btn,#pm-gif-btn{width:auto;margin-top:0;padding:7px 16px;font-size:12px}#pm-save-btn{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:5px;padding:7px 20px;font-size:12px;font-weight:600;transition:background .15s}#pm-save-btn:hover{background:var(--accent-h)}