:root{--bg:#101216;--panel:#1a1e24;--panel2:#22272e;--line:#2e343c;--text:#dde2e8;--muted:#9aa3ad;--accent:#4da3ff;--accent-ink:#06121f}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;font:13px/1.45 Segoe UI,system-ui,-apple-system,Arial,sans-serif;overflow:hidden}#app{flex-direction:column;height:100vh;display:flex}#top{background:var(--panel);border-bottom:1px solid var(--line);flex:none;align-items:center;gap:14px;height:46px;padding:0 14px;display:flex}#logo{letter-spacing:2px;align-items:center;gap:8px;font-size:13px;font-weight:700;display:flex}#logo svg{width:18px;height:18px}#top .sep{background:var(--line);width:1px;height:22px}#histInfo{color:var(--muted);font-size:12px}#main{flex:auto;min-height:0;display:flex}#rail{background:var(--panel);border-right:1px solid var(--line);flex-direction:column;flex:none;align-items:center;gap:6px;width:58px;padding:10px 6px;display:flex}.tbtn{width:42px;height:42px;color:var(--text);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;display:flex;position:relative}.tbtn:hover{background:var(--panel2);border-color:var(--line)}.tbtn.active{border-color:var(--accent);color:#cfe5ff;background:#2a3441}.tbtn svg{width:20px;height:20px}#rail .sep{background:var(--line);width:34px;height:1px;margin:4px 0}#stage{background:#0b0d10;flex:auto;min-width:0;position:relative;overflow:hidden}#canvasWrap{justify-content:center;align-items:center;display:flex;position:absolute;inset:0}#canvasBox{line-height:0;position:relative;box-shadow:0 8px 40px #0000008c}#view,#before{max-width:100%;max-height:100%;display:block}#before{pointer-events:none;position:absolute;top:0;left:0}#before:not(.on){display:none}#splitHandle{cursor:ew-resize;z-index:5;justify-content:center;align-items:center;width:22px;margin-left:-11px;display:none;position:absolute;top:0;bottom:0}#splitHandle.on{display:flex}#splitHandle:before{content:"";background:#fffc;width:2px;position:absolute;top:0;bottom:0;left:10px}#splitHandle span{color:#222;z-index:1;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;font-size:11px;display:flex;box-shadow:0 1px 4px #00000080}#cropLayer{z-index:4;display:none;position:absolute;inset:0}#cropLayer.on{display:block}#cropBox{cursor:move;outline:1.5px solid #7ec3ff;position:absolute;box-shadow:0 0 0 9999px #060a0e8c}#cropBox .grid{pointer-events:none;position:absolute;inset:0}#cropBox .grid:before,#cropBox .grid:after{content:"";background:#ffffff47;position:absolute}#cropBox .grid:before{width:1px;box-shadow:calc(33.33% * 3 - 33.33% + 1px) 0 0 0 #ffffff47;top:0;bottom:0;left:33.33%}#cropBox .grid:after{height:1px;top:33.33%;left:0;right:0}.hnd{background:#fff;border:1px solid #4da3ff;border-radius:2px;width:11px;height:11px;position:absolute}.hnd[data-h=nw]{cursor:nwse-resize;top:-6px;left:-6px}.hnd[data-h=n]{cursor:ns-resize;margin-left:-5.5px;top:-6px;left:50%}.hnd[data-h=ne]{cursor:nesw-resize;top:-6px;right:-6px}.hnd[data-h=e]{cursor:ew-resize;margin-top:-5.5px;top:50%;right:-6px}.hnd[data-h=se]{cursor:nwse-resize;bottom:-6px;right:-6px}.hnd[data-h=s]{cursor:ns-resize;margin-left:-5.5px;bottom:-6px;left:50%}.hnd[data-h=sw]{cursor:nesw-resize;bottom:-6px;left:-6px}.hnd[data-h=w]{cursor:ew-resize;margin-top:-5.5px;top:50%;left:-6px}#panel{background:var(--panel);border-left:1px solid var(--line);flex-direction:column;flex:none;gap:14px;width:262px;padding:14px 14px 10px;display:flex;overflow-y:auto}#panel h3{letter-spacing:1.4px;color:var(--muted);font-size:11px;font-weight:600}.slider{flex-direction:column;gap:5px;display:flex}.slider .lab{color:var(--text);justify-content:space-between;font-size:12px;display:flex}.slider .lab b{font-weight:600}.slider .lab .val{color:var(--muted);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--accent);background:0 0;height:22px}#presets{grid-template-columns:1fr 1fr 1fr;gap:6px;display:grid}#presets button,#aspects button{background:var(--panel2);color:var(--text);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:6px 4px;font-size:11px}#presets button:hover,#aspects button:hover{border-color:#55606c}#presets button.active,#aspects button.active{border-color:var(--accent);color:#cfe5ff;background:#2a3441}#aspects{flex-wrap:wrap;gap:6px;display:flex}#aspects button{padding:5px 8px}#cropHint{color:var(--muted);font-size:11px;display:none}#cropHint.on{display:block}#bottom{background:var(--panel);border-top:1px solid var(--line);flex:none;align-items:center;gap:8px;height:44px;padding:0 12px;display:flex}#bottom button{background:var(--panel2);color:var(--text);border:1px solid var(--line);cursor:pointer;border-radius:6px;align-items:center;gap:6px;height:30px;padding:0 10px;font-size:12px;display:inline-flex}#bottom button:hover{border-color:#55606c}#bottom button.active{border-color:var(--accent);color:#cfe5ff;background:#2a3441}#bottom button svg{width:15px;height:15px}#bottom button:disabled{opacity:.4;cursor:default}#bottom .grow{flex:auto}#exportBtn{background:var(--accent);color:var(--accent-ink);border:none;padding:0 14px;font-weight:700}#exportBtn:hover{background:#6cb5ff}#info{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}#keys{position:relative}#keysPop{border:1px solid var(--line);z-index:20;width:300px;color:var(--text);background:#20252c;border-radius:8px;padding:12px;font-size:12px;display:none;position:absolute;bottom:38px;right:0;box-shadow:0 8px 30px #0009}#keysPop.on{display:block}#keysPop h4{letter-spacing:1.2px;color:var(--muted);margin-bottom:6px;font-size:11px}#keysPop table{border-collapse:collapse;width:100%}#keysPop td{padding:2px 0}#keysPop td:last-child{text-align:right;color:var(--muted)}kbd{background:#2b323b;border:1px solid #3a424c;border-radius:3px;padding:0 5px;font:11px/17px inherit}