:root{--desk-a: #8f8f8f;--desk-b: #c9c9c9;--platinum: #dcdcdc;--platinum-hi: #ffffff;--platinum-sh: #8a8a8a;--win: #ffffff;--ink: #0a0a0a;--blue: #2a55c8;--blue-hi: #5b82e8;--blue-pin: #c2d0f2;--blue-bg: #eef2fc;--orange: #ff5a00;--gray-3: #9a958d;--gray-4: #5c5953;--mono: "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace;--ui: "Helvetica Neue", Helvetica, Arial, "Geneva", sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--platinum);color:var(--ink);font-family:var(--mono);font-size:12px;-webkit-font-smoothing:antialiased}#app{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;gap:14px;padding:0 12px;height:30px;border-bottom:1px solid var(--ink);background:var(--platinum-hi);box-shadow:inset 0 -2px 0 var(--platinum)}.logo{font-family:var(--ui);font-size:16px;font-weight:800;letter-spacing:1px}.logo b{color:var(--orange)}.tag{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--gray-4)}.topbar-right{margin-left:auto;display:flex;gap:8px}.layout{flex:1;display:flex;min-height:0}.stage{flex:1;display:flex;align-items:center;justify-content:center;padding:28px;overflow:auto;background-color:var(--desk-b);background-image:linear-gradient(45deg,var(--desk-a) 25%,transparent 25%,transparent 75%,var(--desk-a) 75%),linear-gradient(45deg,var(--desk-a) 25%,transparent 25%,transparent 75%,var(--desk-a) 75%);background-size:4px 4px;background-position:0 0,2px 2px}.stage.dragging .window{outline:3px solid var(--orange);outline-offset:2px}.stage-inner{display:flex;flex-direction:column;align-items:center;gap:10px}.drop-hint{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--gray-4);background:var(--platinum-hi);border:1px dashed var(--gray-3);border-radius:9px;padding:5px 12px}.stage.dragging .drop-hint{color:#fff;background:var(--orange);border-color:var(--ink)}.window{border:1px solid var(--ink);background:var(--platinum);box-shadow:3px 3px #00000059}.winbar{display:flex;align-items:center;gap:6px;height:20px;padding:0 6px;border-bottom:1px solid var(--ink);background-color:var(--blue-bg);background-image:repeating-linear-gradient(to bottom,var(--blue-pin) 0 1px,transparent 1px 2px)}.close-box{width:11px;height:11px;background:var(--platinum-hi);border:1px solid var(--ink);box-shadow:inset 0 0 0 1px var(--platinum);cursor:pointer}.close-box:hover{background:var(--orange)}.win-title{margin:0 auto;padding:0 10px;font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.5px;background:var(--blue-bg)}.canvas-wrap{padding:3px;background:var(--win);line-height:0;overflow:hidden;cursor:grab;touch-action:none}.canvas-wrap.panning{cursor:grabbing}.output{display:block;max-width:min(58vw,1000px);max-height:calc(100vh - 160px);image-rendering:pixelated;border:1px solid var(--platinum-sh)}.panel-left{width:220px;flex:none;border-right:1px solid var(--ink);background:var(--platinum);overflow-y:auto;display:flex;flex-direction:column}.sidebar{width:330px;flex:none;border-left:1px solid var(--ink);background:var(--platinum);overflow-y:auto;display:flex;flex-direction:column}.panel{border-bottom:1px solid var(--platinum-sh);padding:10px}.phead{display:flex;align-items:center;justify-content:space-between;height:18px;padding:0 6px;margin-bottom:10px;border:1px solid var(--ink);background-color:var(--blue-bg);background-image:repeating-linear-gradient(to bottom,var(--blue-pin) 0 1px,transparent 1px 2px);font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:1px;color:var(--ink)}.phead>span{background:var(--blue-bg);padding:0 4px}.palette{display:grid;grid-template-columns:1fr 1fr;gap:6px}.panel-left .palette{grid-template-columns:1fr;gap:4px}.panel-left .palette.two{grid-template-columns:1fr 1fr}.panel-left .palette.two .btn.chip{text-align:center}.panel-left .btn.chip{text-align:left}.panel-left .panel{padding:8px 10px}.btn{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.3px;padding:4px 12px;border:1px solid var(--ink);border-radius:9px;background:linear-gradient(var(--platinum-hi),var(--platinum));color:var(--ink);cursor:pointer}.btn:active{background:var(--ink);color:var(--platinum-hi)}.btn:disabled{opacity:.4;cursor:default;pointer-events:none}.btn.primary{background:linear-gradient(var(--blue-hi, #5b82e8),var(--blue));color:#fff;box-shadow:0 0 0 2px var(--platinum),0 0 0 3px var(--ink)}.btn.primary:active{background:var(--blue)}.btn.chip{text-align:center;padding:5px 8px;border-radius:7px;letter-spacing:0}.btn.chip:hover{background:linear-gradient(var(--blue-pin),#aebfe8)}.btn.mini{padding:1px 8px;font-size:9px;border-radius:6px}.preset-row{display:flex;gap:4px;align-items:stretch;margin-top:4px}.preset-row .btn.chip{flex:1;text-align:left}.search{width:100%;box-sizing:border-box;font-family:var(--ui);font-size:11px;padding:4px 8px;border:1px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#00000059}.modal{width:320px;max-width:92vw;border:1px solid var(--ink);background:var(--platinum);box-shadow:4px 4px #0006}.modal-title{height:22px;display:flex;align-items:center;justify-content:center;font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:1px;border-bottom:1px solid var(--ink);background-color:var(--blue-bg);background-image:repeating-linear-gradient(to bottom,var(--blue-pin) 0 1px,transparent 1px 2px)}.modal-body{padding:12px;display:flex;flex-direction:column;gap:9px}.modal-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.modal-check{justify-content:flex-start;gap:7px}.modal-label{font-family:var(--ui);font-size:11px;color:var(--ink)}.modal-input{font-family:var(--ui);font-size:11px;padding:2px 6px;border:1px solid var(--ink);border-radius:6px;background:#fff;color:var(--ink);min-width:130px}.modal-color{width:40px;height:22px;padding:0;border:1px solid var(--ink);border-radius:6px;background:#fff;cursor:pointer}.modal-divider{font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:1.5px;color:var(--gray-4);border-top:1px solid var(--platinum-sh);padding-top:8px;margin-top:2px}.modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:10px 12px;border-top:1px solid var(--platinum-sh)}.save-modal{width:420px}.save-img{display:block;max-width:100%;max-height:62vh;margin:0 auto;border:1px solid var(--ink);background:#fff;-webkit-touch-callout:default;-webkit-user-select:auto;user-select:auto}.save-hint{font-family:var(--ui);font-size:11px;line-height:1.5;color:var(--ink);text-align:center}.help-body{gap:6px}.help-row{display:flex;align-items:center;gap:10px}.help-row .kbd{flex:none;min-width:132px;font-family:var(--mono);font-size:10px;font-weight:700;padding:2px 7px;text-align:center;background:var(--platinum-hi);color:var(--ink);border:1px solid var(--ink);border-radius:5px;box-shadow:0 1px 0 var(--platinum-sh)}.help-row .help-desc{font-family:var(--ui);font-size:11px;color:var(--ink)}.btn.chip.filter-chip{display:flex;align-items:center;justify-content:space-between;gap:6px}.filter-chip .chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.filter-chip .star{font-size:11px;line-height:1;opacity:.4;flex:none}.filter-chip .star:hover{opacity:1}.filter-chip .star.on{opacity:1;color:var(--blue)}.ibtn{font-family:var(--mono);width:20px;height:18px;border:1px solid var(--ink);border-radius:5px;background:linear-gradient(var(--platinum-hi),var(--platinum));cursor:pointer;font-size:10px;line-height:1}.ibtn:active{background:var(--ink);color:var(--platinum-hi)}.fcard{border:1px solid var(--ink);margin-top:8px;background:var(--win);box-shadow:1px 1px #0003}.fcard.off{opacity:.5}.fcard-bar{cursor:grab;-webkit-user-select:none;user-select:none}.fcard.dragging-card .fcard-bar{cursor:grabbing}.drag-ghost{position:fixed;z-index:300;left:0;top:0;transform:translate(14px,10px);pointer-events:none;background:var(--platinum);border:1px solid var(--ink);border-radius:4px;box-shadow:2px 2px #0000004d;overflow:hidden;opacity:.97}.drag-thumb{display:block;width:120px;height:auto;background:#fff;image-rendering:pixelated}.drag-ghost-label{padding:3px 8px;font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--ink);background:var(--blue-bg);border-top:1px solid var(--ink)}.drag-ghost-label i{font-style:normal;color:var(--gray-4);margin-right:5px}.fcard.dragging-card{opacity:.4}.fcard.drop-target{box-shadow:0 -2px 0 var(--orange)}.fcard.terminal{box-shadow:0 0 0 1px var(--orange),1px 1px #0003}.fcard-bar{display:flex;align-items:center;justify-content:space-between;height:18px;padding:0 5px;touch-action:none;background-color:var(--blue-bg);background-image:repeating-linear-gradient(to bottom,var(--blue-pin) 0 1px,transparent 1px 2px);border-bottom:1px solid var(--ink)}.fcard-title{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.3px;background:var(--blue-bg);padding-right:6px}.fcard-title i{color:var(--orange);font-style:normal;margin-right:5px}.fcard-tools{display:flex;gap:3px}.fcard-body{padding:8px;display:flex;flex-direction:column;gap:8px}.ctl{display:grid;grid-template-columns:74px 1fr 40px;align-items:center;gap:8px;font-size:11px}.ctl-label{color:var(--gray-4);letter-spacing:.3px}.ctl-val{text-align:right;color:var(--ink)}.ctl.ctl-toggle{grid-template-columns:74px auto}.ctl.ctl-text{grid-template-columns:74px 1fr}.ctl-slider{position:relative}.ctl-ticks{position:relative;height:13px;margin-top:2px}.ctl-tick{position:absolute;transform:translate(-50%);top:0;font-family:var(--mono);font-size:9px;line-height:1;padding:1px 3px;color:var(--gray-4);background:var(--platinum-hi);border:1px solid var(--platinum-sh);border-radius:3px;cursor:pointer}.ctl-tick:hover{color:#fff;background:var(--blue);border-color:var(--ink)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:var(--win);border:1px solid var(--platinum-sh);cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:16px;background:linear-gradient(var(--platinum-hi),var(--platinum));border:1px solid var(--ink);border-radius:3px;cursor:pointer}input[type=range]::-moz-range-thumb{width:11px;height:16px;background:linear-gradient(var(--platinum-hi),var(--platinum));border:1px solid var(--ink);border-radius:3px;cursor:pointer}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:15px;height:15px;border:1px solid var(--ink);border-radius:3px;background:linear-gradient(var(--platinum-hi),var(--platinum));cursor:pointer}input[type=checkbox]:checked{background:var(--blue)}input[type=checkbox]:checked:after{content:"✓";color:#fff;font-size:11px;display:block;text-align:center;line-height:13px}input[type=text],select{font-family:var(--mono);font-size:11px;padding:3px 6px;border:1px solid var(--ink);border-radius:3px;background:var(--win);color:var(--ink);width:100%}select{cursor:pointer}.empty{font-size:11px;color:var(--gray-3);line-height:1.5;margin:4px 2px}.mask-ctl{display:flex;align-items:center;gap:6px;width:100%}.mask-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:var(--gray-4)}::-webkit-scrollbar{width:14px;height:14px}::-webkit-scrollbar-thumb{background:linear-gradient(90deg,var(--platinum-hi),var(--platinum));border:1px solid var(--ink)}::-webkit-scrollbar-track{background:var(--win);border-left:1px solid var(--platinum-sh)}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%) translateY(8px);z-index:200;max-width:86vw;padding:7px 14px;font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:.3px;color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:9px;box-shadow:2px 2px #00000059;opacity:0;pointer-events:none;transition:opacity .18s,transform .18s}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.chip-preview{position:fixed;left:0;top:0;z-index:150;background:var(--platinum);border:1px solid var(--ink);border-radius:4px;box-shadow:3px 3px #00000059;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .12s}.chip-preview.show{opacity:1}.chip-preview canvas{display:block;width:150px;height:auto;background:#fff;image-rendering:pixelated}.chip-preview-label{padding:3px 8px;font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.3px;background:var(--blue-bg);border-top:1px solid var(--ink)}.mobile-tabs{display:none}@media (max-width: 860px){.topbar{flex-wrap:wrap;height:auto;padding:6px 10px;gap:6px 10px}.topbar .tag{display:none}.topbar-right{width:100%;margin-left:0;flex-wrap:wrap;gap:6px}.topbar-right .btn{padding:4px 9px}.layout{flex-direction:column}.stage{order:0;flex:none;height:42vh;padding:12px}.output{max-width:92vw;max-height:34vh}.mobile-tabs{order:1;display:flex;flex:none;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--platinum)}.mobile-tabs .btn.tab{flex:1;border:none;border-radius:0;padding:10px;font-size:11px;background:var(--platinum);color:var(--ink)}.mobile-tabs .btn.tab+.btn.tab{border-left:1px solid var(--platinum-sh)}.mobile-tabs .btn.tab.on{background:var(--blue-bg);box-shadow:inset 0 -3px 0 var(--blue)}.mobile-tabs .btn.tab:active{background:var(--blue-bg);color:var(--ink)}.panel-left,.sidebar{order:2;width:auto;flex:1 1 auto;min-height:0;border:none;max-height:none}.layout[data-tab=filters] .sidebar,.layout[data-tab=stack] .panel-left{display:none}}