@import "https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap";*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-family:Archivo,system-ui,sans-serif}.pf{--ink:#10151c;--surface:#ffffffe6;--surface-solid:#fff;--surface-2:#f3f5f9;--border:#e3e7ee;--border-strong:#c7ceda;--text:#1b242f;--muted:#79838f;--accent:#ea580c;--accent-ink:#fff;--ok:#16a34a;--canvas:#e9edf2;--grid:#10151c0e;--grid-strong:#10151c24;--shadow:0 8px 26px -10px #10151c38, 0 2px 6px -2px #10151c1a;--ui:"Archivo", system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;color:var(--text)}.pf.dark{--ink:#eef2f7;--surface:#141a22e6;--surface-solid:#161c25;--surface-2:#1d2530;--border:#2a323d;--border-strong:#3b4654;--text:#e8edf3;--muted:#8994a3;--accent:#fb7137;--accent-ink:#1a0f08;--canvas:#0b0f14;--grid:#ffffff0b;--grid-strong:#ffffff1c;--shadow:0 10px 34px -12px #000000a6, 0 2px 8px -3px #0000008c}.pf-stage-wrap{background-color:var(--canvas);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), linear-gradient(var(--grid-strong) 1px, transparent 1px), linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);background-size:28px 28px,28px 28px,140px 140px,140px 140px;position:fixed;inset:0}.pf-bar,.pf-panel{background:var(--surface);-webkit-backdrop-filter:blur(16px)saturate(1.5);backdrop-filter:blur(16px)saturate(1.5);border:1px solid var(--border);box-shadow:var(--shadow);font-family:var(--ui);border-radius:15px}.pf-btn{border:1px solid var(--border);background:var(--surface-2);color:var(--text);font:600 13.5px/1 var(--ui);letter-spacing:.2px;cursor:pointer;white-space:nowrap;border-radius:10px;align-items:center;gap:6px;min-height:38px;padding:8px 13px;transition:background .14s,border-color .14s,color .14s,transform 50ms,box-shadow .14s,filter .14s;display:inline-flex}.pf-btn:hover{background:var(--surface-solid);border-color:var(--border-strong)}.pf-btn:active{transform:translateY(1px)}.pf-btn:disabled{opacity:.36;cursor:not-allowed}.pf-btn.on{background:var(--ink);border-color:var(--ink);color:var(--surface-solid);box-shadow:0 3px 10px -3px #10151c73}.pf.dark .pf-btn.on{color:#10151c}.pf-btn.accent{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}.pf-btn.accent:hover{filter:brightness(1.07);background:var(--accent);border-color:var(--accent)}.pf-btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}.pf-btn.ok:hover{filter:brightness(1.07);background:var(--ok);border-color:var(--ok)}.pf-btn.snap{border-color:var(--ok);color:#15803d;background:#16a34a24}.pf.dark .pf-btn.snap{color:#86efac}.pf-sep{background:var(--border);width:1px;height:24px;margin:0 3px}.pf-swatch{cursor:pointer;border-radius:50%;width:26px;height:26px;padding:0;transition:transform .1s}.pf-swatch:hover{transform:scale(1.14)}.pf-tabs{background:var(--surface-2);border-radius:11px;gap:4px;margin-bottom:10px;padding:3px;display:flex}.pf-tab{font:800 12.5px/1 var(--ui);letter-spacing:.3px;cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:8px;flex:1;padding:9px 4px;transition:background .15s,color .15s}.pf-tab.on{background:var(--ink);color:var(--surface-solid)}.pf.dark .pf-tab.on{color:#10151c}.pf-sec{font:700 10.5px/1 var(--ui);letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin:15px 2px 7px}.pf-item{text-align:left;border:1px solid var(--border);background:var(--surface-2);width:100%;font:600 12.5px/1.25 var(--ui);cursor:pointer;color:var(--text);border-radius:9px;align-items:center;gap:8px;margin-bottom:6px;padding:8px 10px;transition:background .14s,border-color .14s,transform 50ms;display:flex}.pf-item:hover{background:var(--surface-solid);border-color:var(--border-strong)}.pf-item:active{transform:translateY(1px)}.pf-item .d{color:var(--muted);font:500 11px/1 var(--mono);white-space:nowrap;margin-left:auto}.pf-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.pf-sym{border:1px solid var(--border);background:var(--surface-2);cursor:pointer;border-radius:10px;flex-direction:column;align-items:center;gap:3px;padding:9px 4px;transition:background .14s,border-color .14s,transform 80ms;display:flex}.pf-sym:hover{background:var(--surface-solid);border-color:var(--border-strong);transform:translateY(-1px)}.pf-sym .l{font:600 9.5px/1.1 var(--ui);color:var(--text);text-align:center}.pf-drop{z-index:200;pointer-events:none;text-align:center;border:3px dashed var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--surface-solid));color:var(--accent);font:800 26px/1.2 var(--ui);letter-spacing:.3px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex;position:fixed;inset:14px}.pf-drop span{font:600 14px/1.2 var(--ui);color:var(--text);opacity:.7}.pf-acc{border-top:1px solid var(--border)}.pf-acc:first-child{border-top:none}.pf-acc-head{cursor:pointer;width:100%;font:700 11px/1 var(--ui);letter-spacing:1.1px;text-transform:uppercase;color:var(--muted);text-align:left;background:0 0;border:none;align-items:center;gap:8px;padding:11px 2px;transition:color .12s;display:flex}.pf-acc-head:hover{color:var(--text)}.pf-acc-chev{color:var(--muted);flex:none;width:9px;font-size:9px}.pf-acc-body{padding:2px 0 10px}.pf-layer{cursor:pointer;border:1px solid #0000;border-radius:8px;align-items:center;gap:5px;margin-bottom:3px;padding:5px 6px;transition:background .12s,border-color .12s;display:flex}.pf-layer:hover{background:var(--surface-2)}.pf-layer.on{background:var(--surface-2);border-color:var(--border-strong)}.pf-layer-name{font:600 12.5px/1.2 var(--ui);color:var(--text);text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.pf-layer.on .pf-layer-name{color:var(--accent)}.pf-layer-count{font:500 10px/1 var(--mono);color:var(--muted);background:var(--surface-solid);border:1px solid var(--border);border-radius:5px;flex:none;padding:2px 5px}.pf-eye{cursor:pointer;background:0 0;border:none;border-radius:6px;flex:none;padding:2px 3px;font-size:14px;line-height:1}.pf-eye:hover{background:var(--border)}.pf-readout{font:600 12px/1 var(--mono);letter-spacing:.3px;color:var(--text);background:var(--surface-2);border:1px solid var(--border);border-radius:7px;padding:6px 9px}.pf-status{font:600 11.5px/1 var(--ui);color:var(--muted);align-items:center;gap:7px;display:inline-flex}.pf-dot{border-radius:50%;flex:none;width:8px;height:8px}.pf-hint{z-index:60;background:var(--ink);color:var(--surface-solid);font:600 13px/1 var(--ui);box-shadow:var(--shadow);border-radius:12px;align-items:center;gap:10px;padding:9px 15px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.pf.dark .pf-hint{color:#10151c}.pf-modal-back{z-index:100;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0a0e1480;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.pf-modal{background:var(--surface-solid);border:1px solid var(--border);width:min(520px,92vw);max-height:85vh;color:var(--text);font-family:var(--ui);border-radius:16px;padding:24px;overflow-y:auto;box-shadow:0 26px 64px -14px #00000073}.pf-modal h3{font:800 18px/1.15 var(--ui);letter-spacing:-.2px;color:var(--text);margin:0}.pf-input{border:1px solid var(--border-strong);font:500 13px/1 var(--mono);color:var(--text);background:var(--surface-2);border-radius:9px;flex:1;padding:10px 12px}.pf-input:focus{outline:2px solid var(--accent);outline-offset:-1px}.pf-modal code{font:500 12.5px/1 var(--mono);background:var(--surface-2);border:1px solid var(--border);color:var(--text);border-radius:5px;padding:2px 6px}.pf-panel::-webkit-scrollbar{width:9px}.pf-modal::-webkit-scrollbar{width:9px}.pf-panel::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px}.pf-modal::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px}.pf-panel::-webkit-scrollbar-track{background:0 0}.pf-modal::-webkit-scrollbar-track{background:0 0}