/*! Mix Painter — © 2026 Daniel Mor. All rights reserved. See LICENSE.txt · third-party notices: THIRD_PARTY_LICENSES.md */*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}:root{--bg: #1a1a1c;--panel: #222225;--panel2: #2a2a2e;--border: #333337;--border2: #444448;--text: #e8e8ea;--muted: #888890;--accent: #5b7fff;--accent2: #a78bfa;--danger: #ff5f5f;--success: #4ade80;--panel-w: clamp(196px, 17vw, 264px);--color-h: calc(286px * var(--ui));--toolbar-w: calc(48px * var(--ui));--topbar-h: calc(40px * var(--ui));--node-h: calc(244px * var(--ui));--timeline-h: calc(34px * var(--ui));--node-params-w: calc(300px * var(--ui));--radius: 6px;--ui: 1;--sel-bg: rgba(255, 255, 255, .05);--sel-bg-strong: rgba(255, 255, 255, .08)}html,body{overscroll-behavior:none;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:DM Sans,sans-serif;font-size:calc(13px * var(--ui))}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}*{scrollbar-width:thin;scrollbar-color:var(--border2) transparent}@keyframes app-fade-in{0%{opacity:0}to{opacity:1}}#app{display:grid;grid-template-columns:var(--toolbar-w) 1fr var(--panel-w);grid-template-rows:var(--topbar-h) 1fr var(--timeline-h) var(--node-h);height:100vh;animation:app-fade-in .4s ease both}#topbar{grid-column:2 / 3;grid-row:1;position:relative;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:flex-start;gap:0;padding:0 clamp(8px,1vw,14px) 0 14px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;z-index:10;container-type:inline-size}#topbar::-webkit-scrollbar{display:none}.top-left{display:flex;align-items:center;gap:12px;flex:0 0 auto;z-index:2}.tb-brand{display:flex;align-items:center;justify-content:center;width:100%;height:var(--topbar-h);border-bottom:1px solid var(--border);flex-shrink:0}.tb-brand:hover{opacity:.85}.brand-logo{width:26px;height:26px;display:block}.menubar{display:flex;gap:2px;flex-shrink:0}.menu-btn{background:transparent;border:none;color:var(--muted);font-family:DM Sans,sans-serif;font-size:calc(13px * var(--ui));padding:4px 10px;border-radius:5px;cursor:pointer}.menu-btn:hover,.menu-btn.active{background:#2e2e33;color:var(--text)}.menu-dropdown{min-width:150px}.topbar-divider{width:1px;height:20px;background:var(--border);margin:0 13px;flex-shrink:0}#top-info-icon{width:30px;height:30px}@container (max-width: 1000px){.top-left{gap:6px}.topbar-divider{margin:0 3px}.menu-btn{padding:4px 6px}#top-info-icon{width:24px;height:24px}#top-info-icon svg{width:14px;height:14px}}.brush-controls{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-start;gap:10px;min-width:0;padding:0 clamp(0px,1vw,28px);visibility:hidden}.brush-controls.ready{visibility:visible}.brush-controls .ctrl-sym{flex:0 0 auto;gap:8px}.brush-controls .ctrl-sym label{flex:0 0 auto;overflow:visible;text-overflow:clip}.bc-divider{width:1px;height:18px;background:var(--border);flex:0 0 auto}.sym-seg{display:inline-flex;align-items:center;gap:1px;background:#1f1f22;border:1px solid var(--border);border-radius:var(--radius);padding:2px;flex:0 0 auto}.sym-opt{position:relative;display:inline-flex;align-items:center;justify-content:center;width:26px;height:22px;border:none;background:transparent;color:var(--muted);border-radius:4px;cursor:pointer;transition:background .1s,color .1s}.sym-opt svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.sym-opt:hover{color:var(--text);background:var(--panel2)}.sym-opt.on{color:#fff}@container (max-width: 720px){.sym-opt{width:22px}.sym-opt svg{width:14px;height:14px}}.ctrl{display:flex;align-items:center;gap:clamp(2px,.4vw,6px);flex:0 1 auto;min-width:calc(64px * var(--ui))}.ctrl label{font-size:calc(10px * var(--ui));color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-family:DM Mono,monospace;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ctrl label.ctrl-ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:visible;color:var(--muted)}.ctrl label.ctrl-ico svg{width:15px;height:15px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.ctrl input[type=range]{flex:1 999 110px;width:auto;min-width:calc(24px * var(--ui));max-width:190px;-webkit-appearance:none;height:calc(4px * var(--ui));border-radius:99px;background:var(--border2);outline:none;cursor:pointer}.ctrl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:calc(13px * var(--ui));height:calc(13px * var(--ui));border-radius:50%;background:var(--text);border:2px solid var(--bg);cursor:pointer}.ctrl span{font-family:DM Mono,monospace;font-size:calc(11px * var(--ui));color:var(--text);flex:0 0 auto;width:3.4ch;text-align:left}.ctrl select{flex:1 999 110px;width:auto;min-width:calc(56px * var(--ui));background:var(--panel2);color:var(--text);border:1px solid var(--border2);border-radius:6px;padding:3px 6px;font-family:DM Mono,monospace;font-size:calc(11px * var(--ui));cursor:pointer;outline:none}.ctrl .tex-trigger{flex:1 999 110px;width:auto;min-width:calc(56px * var(--ui));height:24px;display:flex;align-items:center;background:var(--panel2);border:1px solid var(--border2);border-radius:6px;padding:2px 6px;cursor:pointer;outline:none}.ctrl .tex-trigger:hover,.ctrl .tex-trigger.active{border-color:var(--border)}.ctrl .tex-trigger>canvas{width:100%;height:16px;display:block}.tex-menu{padding:4px}.tex-menu .tex-opt{display:flex;align-items:center;gap:8px;width:100%;padding:4px 6px;background:none;border:0;border-radius:6px;cursor:pointer;color:var(--text);font-family:DM Mono,monospace;font-size:calc(11px * var(--ui));text-align:left}.tex-menu .tex-opt:hover{background:var(--panel2)}.tex-menu .tex-opt.checked{background:#5b7ffff2;color:#fff}.tex-menu .tex-opt>canvas{width:120px;height:18px;flex:0 0 auto}@container (max-width: 600px){.ctrl label{font-size:calc(9px * var(--ui));letter-spacing:0}.ctrl span{width:22px;font-size:calc(10px * var(--ui))}.ctrl input[type=range]{min-width:24px}}@container (max-width: 480px){.ctrl{gap:4px}.ctrl span{width:18px}.ctrl input[type=range]{min-width:18px}}#toolbar{grid-row:1 / -1;grid-column:1;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:0 0 6px;gap:0;overflow:hidden;min-height:0}.tools-scroll-wrap{position:relative;flex:1 1 auto;width:100%;min-height:0;overflow:hidden;margin-top:8px}.toolbar-tools{display:flex;flex-direction:column;align-items:center;height:100%;width:100%;gap:0;overflow-y:auto;overflow-x:hidden;min-width:0;scrollbar-width:none}.toolbar-tools::-webkit-scrollbar{width:0;height:0;display:none}.tools-fade{position:absolute;left:0;right:0;height:22px;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:3}.tools-fade.show{opacity:1}.tools-fade-top{top:0;background:linear-gradient(to bottom,var(--panel) 10%,rgba(34,34,37,0))}.tools-fade-bottom{bottom:0;background:linear-gradient(to top,var(--panel) 10%,rgba(34,34,37,0))}.toolbar-bottom{flex-shrink:0;width:100%;display:flex;flex-direction:column;align-items:center;padding:0}#info-btn{width:36px;height:36px;border:none;background:transparent;border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .12s;position:relative}#info-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}#info-btn:hover{background:#2e2e33;color:var(--text)}#info-modal{display:none;position:fixed;bottom:10px;left:56px;z-index:20000}#info-modal.open{display:block}#info-modal-box{background:var(--panel);border:1px solid var(--border2);border-radius:12px;padding:18px 20px 16px;width:300px;box-shadow:0 16px 48px #0009;animation:info-pop .14s ease}@keyframes info-pop{0%{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}#info-modal-box p{font-size:calc(13px * var(--ui));color:var(--text);line-height:1.55;margin-bottom:12px;-webkit-user-select:text;user-select:text}#info-modal-box p.muted{font-size:calc(11px * var(--ui));color:var(--muted);font-family:DM Mono,monospace;margin-bottom:0}.info-support-row{display:flex;gap:8px}#info-patreon-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px 10px 12px;border-radius:9px;color:var(--text);font-family:DM Sans,sans-serif;font-size:calc(11px * var(--ui));font-weight:500;cursor:pointer;text-decoration:none;transition:all .12s}#info-patreon-btn{background:linear-gradient(135deg,#ff5c38,#d13354 55%,#6e1a2e);border:none;color:#fff}#info-patreon-btn:hover{background:linear-gradient(135deg,#ff6d4c,#e13c60 55%,#832238)}.tb-sep{width:24px;height:1px;min-height:1px;background:var(--border2);margin:8px 0;flex-shrink:0}.tb-btn{width:36px;height:36px;flex-shrink:0;border:none;background:transparent;border-radius:var(--radius);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .12s;position:relative}.tb-btn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.tb-btn:hover{background:#2e2e33;color:var(--text)}.tb-btn.active{background:var(--sel-bg-strong);color:#fff}#tb-tooltip{position:fixed;background:#111;color:#fff;border:1px solid var(--border2);padding:3px 8px;border-radius:4px;font-size:calc(11px * var(--ui));font-family:DM Sans,sans-serif;white-space:nowrap;pointer-events:none;z-index:9999;display:none}#info-tooltip{position:absolute;background:#111;color:#fff;border:1px solid var(--border2);padding:6px 12px;border-radius:5px;font-size:calc(12px * var(--ui));font-family:DM Sans,sans-serif;white-space:nowrap;z-index:9999;display:none;gap:14px;align-items:center;pointer-events:none;box-shadow:0 4px 12px #00000080}.info-tt-item{display:flex;align-items:center;gap:6px}.info-tt-item svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}#canvas-wrap{touch-action:none;grid-row:2;grid-column:2;position:relative;overflow:hidden;background:#2a2a2e;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:20px 20px;display:flex;align-items:center;justify-content:center}#canvas-container{position:relative;box-shadow:0 8px 40px #0009}#main-canvas{display:block;position:absolute;top:0;left:0;pointer-events:none}#draw-canvas{display:block}#resize-ring{position:fixed;box-sizing:border-box;border-radius:50%;border:1.5px solid rgba(255,255,255,.7);pointer-events:none;display:none;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #00000080}#brush-cursor{position:fixed;top:0;left:0;box-sizing:border-box;border-radius:50%;border:1px solid rgba(255,255,255,.5);box-shadow:0 0 0 1px #00000059;pointer-events:none;display:none;z-index:9998;will-change:transform}#hard-ring{position:fixed;top:0;left:0;pointer-events:none;display:none;z-index:9999;will-change:transform}#resize-hud{position:fixed;bottom:60px;left:50%;transform:translate(-50%);background:#000000bf;backdrop-filter:blur(8px);border:1px solid var(--border2);border-radius:10px;padding:5px 14px;font-family:DM Mono,monospace;font-size:calc(12px * var(--ui));color:var(--text);pointer-events:none;display:none;z-index:9999;white-space:nowrap}#picker-hud{display:none;position:fixed;z-index:10000;pointer-events:none;background:#000c;border:1px solid var(--border2);border-radius:var(--radius);padding:6px;align-items:center;gap:8px}#picker-color{width:20px;height:20px;border-radius:4px;border:1px solid #111}#picker-readout{display:flex;flex-direction:column;line-height:1.3}#picker-hex{color:var(--text);font-family:DM Mono,monospace;font-size:calc(11px * var(--ui))}#picker-rgb{color:var(--muted, #888890);font-family:DM Mono,monospace;font-size:calc(10px * var(--ui));letter-spacing:.2px}#drop-overlay{position:fixed;inset:0;z-index:30000;display:none;align-items:center;justify-content:center;background:#141416b8;backdrop-filter:blur(2px);pointer-events:none}#drop-overlay.show{display:flex}.drop-overlay-msg{padding:22px 36px;border:2px dashed rgba(255,255,255,.5);border-radius:14px;background:#ffffff0f;color:var(--text);font-size:calc(16px * var(--ui));font-family:DM Sans,sans-serif}#right-panel{grid-row:1 / -1;grid-column:3;background:var(--panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;z-index:20;position:relative}.p-section{padding:12px;border-bottom:1px solid var(--border);flex:0 0 auto;height:var(--color-h);min-height:0;display:flex;flex-direction:column;overflow:hidden}.p-section>.p-label,.p-section>.color-slider,.p-section>.color-row{flex:0 0 auto}#panel-resizer{position:absolute;top:0;bottom:0;left:0;width:8px;cursor:col-resize;z-index:40;touch-action:none}#panel-resizer:after{content:"";position:absolute;top:0;bottom:0;left:0;width:1px;background:transparent;transition:background .12s}#panel-resizer.dragging:after{background:#ffffff29}#panel-vsplit{flex:0 0 auto;position:relative;height:7px;margin-top:-4px;margin-bottom:-3px;cursor:row-resize;z-index:40;touch-action:none}#panel-vsplit:after{content:"";position:absolute;left:0;right:0;top:3px;height:1px;background:transparent;transition:background .12s}#panel-vsplit.dragging:after{background:#ffffff29}body.panel-resizing-x,body.panel-resizing-x *{cursor:col-resize!important}body.panel-resizing-y,body.panel-resizing-y *{cursor:row-resize!important}.p-label{font-size:calc(10px * var(--ui));color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;font-family:DM Mono,monospace}#sv-canvas{width:100%;flex:1 1 auto;min-height:48px;height:auto;border-radius:var(--radius);cursor:crosshair;display:block}.color-slider{width:100%;height:12px;border-radius:99px;margin-top:6px;cursor:pointer;display:block}.color-row{display:flex;gap:8px;align-items:center;margin-top:10px;--swatch: 32px}#current-swatch{width:var(--swatch);height:var(--swatch);border-radius:50%;border:1px solid var(--border2);flex-shrink:0;position:relative;background-image:linear-gradient(45deg,#555 25%,transparent 25%),linear-gradient(-45deg,#555 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#555 75%),linear-gradient(-45deg,transparent 75%,#555 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}#current-swatch>span{display:block;width:100%;height:100%;border-radius:inherit}#sec-swatch{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;z-index:2;background-image:linear-gradient(45deg,#555 25%,transparent 25%),linear-gradient(-45deg,#555 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#555 75%),linear-gradient(-45deg,transparent 75%,#555 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0;border:1.5px solid var(--panel)}#sec-swatch-color{display:block;width:100%;height:100%;border-radius:inherit}#hex-input{flex:1;min-width:0;width:100%;height:var(--swatch);background:#111113;border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:DM Mono,monospace;font-size:calc(12px * var(--ui));padding:6px 8px;outline:none;text-transform:uppercase}#hex-input:focus{border-color:#fff6}#layers-wrap{flex:1 1 0;display:flex;flex-direction:column;overflow:hidden;min-height:0}#graph-wrap{flex:1 1 0;display:flex;flex-direction:column;overflow:hidden;min-height:0;border-top:1px solid var(--border)}#graph-params{padding:2px 12px 10px}#graph-params .graph-node-label{display:block;margin:8px 0 2px;text-align:center;opacity:.55;font-size:calc(10px * var(--ui));text-transform:uppercase;letter-spacing:.06em}.layers-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px}.layers-scroll{flex:1;overflow-y:auto;overflow-x:hidden}.layers-scroll::-webkit-scrollbar{width:4px}.layers-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}.layer-item{display:flex;flex-direction:row;align-items:center;padding:0;cursor:pointer;border-bottom:1px solid var(--border);border-left:2px solid transparent;transition:background .1s}.layer-item:hover{background:var(--panel2)}.layer-item.selected{background:var(--sel-bg)}.layer-item.active{background:var(--sel-bg-strong);border-left-color:#ffffff59}.layer-item.dragging{opacity:.45}.layer-drop-line{position:fixed;height:2px;background:var(--accent);border-radius:2px;box-shadow:0 0 6px var(--accent);z-index:10002;pointer-events:none;display:none}.layer-item.active .layer-name,.layer-item.selected .layer-name{color:var(--text)}.layer-row1{display:flex;align-items:center;gap:6px;width:100%;min-width:0}.layer-name{flex:1;font-size:calc(12px * var(--ui));color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.layer-name-input{flex:1;min-width:0;font-family:DM Sans,sans-serif;font-size:calc(12px * var(--ui));color:var(--text);background:#111113;border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:2px 5px;outline:none;-webkit-user-select:text;user-select:text}.layer-blend-label{font-family:DM Mono,monospace;font-size:calc(9px * var(--ui));color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;flex-shrink:0;opacity:.6}.layer-graph-label{font-family:DM Mono,monospace;font-size:calc(9px * var(--ui));color:var(--accent2);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;flex-shrink:0;opacity:.75}.layer-warn{font-size:calc(12px * var(--ui));line-height:1;color:#fbbf24;flex-shrink:0;cursor:help}.layer-row2{display:flex;align-items:center;gap:6px;margin-top:5px;min-width:0}.layer-thumbs{display:flex;align-items:center;gap:4px;flex:0 0 auto;padding-left:10px}.layer-strength-sl{flex:1;min-width:0;-webkit-appearance:none;height:2px;border-radius:99px;background:var(--border2);outline:none;cursor:pointer}.layer-strength-sl::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;border-radius:50%;background:var(--muted);border:1.5px solid var(--bg);cursor:pointer}.layer-item.active .layer-strength-sl::-webkit-slider-thumb{background:#fff}.layer-strength-v{font-family:DM Mono,monospace;font-size:calc(10px * var(--ui));color:var(--muted);width:22px;text-align:center;flex-shrink:0}.layer-thumb{width:32px;height:24px;border-radius:3px;border:1px solid var(--border2);flex-shrink:0;overflow:hidden;background:#fff;background-image:linear-gradient(45deg,#ccc 25%,transparent 25%),linear-gradient(-45deg,#ccc 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ccc 75%),linear-gradient(-45deg,transparent 75%,#ccc 75%);background-size:6px 6px;background-position:0 0,0 3px,3px -3px,-3px 0;position:relative}.layer-thumb canvas{position:absolute;top:0;left:0;width:100%;height:100%}.layer-ops{display:flex;gap:2px;flex-shrink:0;width:22px;justify-content:flex-end}.layer-op{width:22px;height:22px;border:none;padding:0;background:transparent;border-radius:4px;cursor:pointer;color:var(--muted);font-size:calc(13px * var(--ui));display:flex;align-items:center;justify-content:center}.layer-op:hover{background:#ffffff14;color:var(--text)}.layer-op svg{pointer-events:none;width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}#layer-actions{display:flex;gap:4px;padding:8px 10px;border-top:1px solid var(--border);flex-shrink:0}.la-btn{flex:1;padding:5px 0;border:1px solid var(--border2);border-radius:5px;background:transparent;color:var(--muted);cursor:pointer;transition:all .1s;display:flex;align-items:center;justify-content:center}.la-btn:hover{background:#ffffff0f;color:var(--text)}.la-btn.danger:hover{background:#ff5f5f1a;color:var(--danger);border-color:var(--danger)}.la-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.blend-btn{display:flex;align-items:center;gap:4px;background:#111113;border:1px solid var(--border);border-radius:5px;color:var(--text);padding:3px 6px 3px 8px;font-size:calc(11px * var(--ui));font-family:DM Sans,sans-serif;outline:none;cursor:pointer;max-width:140px}.blend-btn:hover,.blend-btn.active{border-color:var(--border2);background:#16161a}.blend-btn #blend-btn-label,.blend-btn>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.blend-caret{width:13px;height:13px;flex-shrink:0;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.blend-menu{max-height:320px;overflow-y:auto;min-width:150px}.blend-menu button.checked{color:#fff}.blend-menu button.checked:after{content:"✓";margin-left:auto;font-size:calc(11px * var(--ui));color:#fff}.layers-head-actions{display:flex;align-items:center;gap:6px;min-width:0}.blend-btn{min-width:0}.graph-btn{max-width:124px}.graph-menu{min-width:210px;padding:6px}.graph-menu-search{width:100%;box-sizing:border-box;background:#111113;border:1px solid var(--border2);border-radius:5px;color:var(--text);font-family:DM Sans,sans-serif;font-size:calc(12px * var(--ui));padding:6px 8px;outline:none;margin-bottom:4px}.graph-menu-search:focus{border-color:var(--accent)}.graph-menu-search::placeholder{color:var(--muted)}.graph-menu-list{max-height:280px;overflow-y:auto}.graph-menu button.kbd{background:#ffffff1a}.graph-menu button.checked{color:#fff}.graph-menu button.checked:after{content:"✓";margin-left:auto;font-size:calc(11px * var(--ui));color:#fff}.graph-menu-empty{padding:8px 10px;color:var(--muted);font-size:calc(12px * var(--ui));text-align:center}.context-menu{position:fixed;max-height:calc(100vh - 16px);overflow-y:auto;min-width:156px;background:var(--panel);border:1px solid var(--border2);border-radius:8px;padding:4px;box-shadow:0 10px 34px #0000008c;z-index:10001;font-size:calc(12px * var(--ui))}.context-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:7px 10px;border:none;background:transparent;color:var(--text);cursor:pointer;border-radius:5px;text-align:left;font-family:DM Sans,sans-serif;font-size:calc(12px * var(--ui))}.context-menu button .cm-key{margin-left:auto;color:var(--muted);font-family:DM Mono,monospace;font-size:calc(10px * var(--ui))}.context-menu button:hover:not(:disabled){background:#ffffff14}.context-menu button.danger:hover:not(:disabled){background:#ff5f5f1f;color:var(--danger)}.context-menu button:disabled{opacity:.35;cursor:default}.context-menu .cm-sep{height:1px;background:var(--border);margin:4px 0}.context-menu .cm-name::placeholder{color:var(--muted)}.context-menu .cm-name:focus{border-color:var(--muted)}#startup-screen{position:absolute;inset:0;z-index:1000;background:transparent;display:flex;align-items:center;justify-content:center}#ui-blocker{position:fixed;inset:0;z-index:-1;background:transparent;cursor:default}.startup-box{background:#000;border:1px solid #000000;border-radius:0;padding:32px;width:460px;max-width:94vw;box-shadow:0 8px 40px #0009}.startup-actions{display:flex;gap:22px;margin-bottom:22px}.primary-start-btn,.startup-open{flex:1 1 0;min-width:0;aspect-ratio:1 / .9;padding:16px;background:transparent;border:1px solid var(--border2);border-radius:10px;color:var(--muted);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:background .12s ease,border-color .12s ease,color .12s ease;font-size:calc(14px * var(--ui));font-family:DM Sans,sans-serif;font-weight:400}.primary-start-btn .sa-label,.startup-open .sa-label{letter-spacing:.01em}.primary-start-btn svg,.startup-open svg{width:52px;height:52px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:color .12s ease,transform .12s ease}.primary-start-btn:hover,.startup-open:hover{background:#ffffff0f;border-color:var(--border2);color:var(--text)}.primary-start-btn:hover svg,.startup-open:hover svg{transform:scale(1.04)}.startup-custom{display:flex;align-items:stretch;background:transparent;border:1px solid var(--border2);border-radius:8px;transition:border-color .12s ease;overflow:hidden}.startup-custom:focus-within{border-color:var(--border2)}.res-field{flex:1 1 0;min-width:0;display:flex;align-items:center;padding:0 14px;transition:background .12s ease}.res-field:focus-within{background:#1d1d20}.startup-custom input[type=number]{flex:1 1 0;width:100%;min-width:0;background:transparent;border:none;border-radius:0;color:#fff;font-family:DM Mono,monospace;font-size:calc(15px * var(--ui));padding:12px 0;outline:none;text-align:center;-webkit-user-select:text;user-select:text;-moz-appearance:textfield;appearance:textfield}.startup-custom input[type=number]::-webkit-inner-spin-button,.startup-custom input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.custom-x{flex-shrink:0;display:flex;align-items:center;justify-content:center;padding:0 14px;color:var(--muted);font-family:DM Mono,monospace;font-size:calc(13px * var(--ui));border-left:1px solid #2a2a2e;border-right:1px solid #2a2a2e}.startup-sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.size-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 4px;background:transparent;border:1px solid var(--border2);border-radius:8px;color:var(--muted);cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease;font-family:DM Sans,sans-serif}.size-btn:hover{background:#ffffff0f;border-color:var(--border2);color:var(--text)}.size-btn .sp-name{font-size:calc(14px * var(--ui));font-weight:500;letter-spacing:.02em}.size-btn .sp-dim{font-family:DM Mono,monospace;font-size:calc(10px * var(--ui));opacity:.7;white-space:nowrap}#startup-file-input,#img-file-input{display:none}.startup-hint{margin-top:24px;padding-top:16px;border-top:1px solid #1a1a1c;text-align:center;font-size:calc(12px * var(--ui));color:var(--muted);font-family:DM Sans,sans-serif;display:flex;align-items:center;justify-content:center;gap:8px}.startup-hint svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}.layers-scroll,.layer-item{position:relative}.wire-overlay{position:absolute;left:0;top:0;width:100%;pointer-events:none;overflow:visible;z-index:4}.wire-overlay .wire{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:.92;pointer-events:stroke}.wire-overlay .wire:hover{stroke:var(--accent2);stroke-width:3;cursor:pointer}.wire-overlay .wire-live{stroke-dasharray:4 3;opacity:.8;pointer-events:none}.wire-overlay .wire-end{fill:var(--accent)}.layer-strip{flex:0 0 52px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;padding:7px 6px;border-right:1px solid var(--border)}.layer-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;padding:6px 10px}.port-bar{display:flex;justify-content:space-between;align-items:center;height:8px;pointer-events:none}.lp{width:7px;height:7px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--border2);background:var(--panel);opacity:.5;z-index:6;cursor:crosshair;pointer-events:auto;transition:opacity .1s,transform .1s}.lp:hover{opacity:1;transform:scale(1.3)}.lp-connected{opacity:1}.lp-inert{opacity:.14;cursor:default}.lp-inert:hover{opacity:.14;transform:none}.layer-graph-row{display:flex;align-items:center;gap:6px;margin-top:5px;padding-left:38px;min-width:0}.graph-badge{font-family:DM Mono,monospace;font-size:calc(9px * var(--ui));letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:#000;border:1px solid var(--border2);border-radius:4px;padding:1px 5px;white-space:nowrap}.graph-axis-opt{font-family:DM Mono,monospace;font-size:calc(9px * var(--ui));color:var(--muted);background:#111113;border:1px solid var(--border);border-radius:4px;padding:1px 4px;cursor:pointer;white-space:nowrap}.graph-axis-opt:hover{border-color:var(--border2);color:var(--text)}.graph-axis-opt.on{color:#fff;background:var(--sel-bg-strong);border-color:var(--border2)}body.wiring,body.wiring *{cursor:crosshair!important}#timeline{grid-row:3;grid-column:2;display:flex;align-items:center;gap:12px;height:var(--timeline-h);padding:0 10px;background:var(--panel);border-top:1px solid var(--border);font-family:DM Mono,monospace;font-size:calc(10px * var(--ui));letter-spacing:.06em;color:var(--muted);overflow:hidden}#timeline .tl-btn,#timeline .tl-track,#timeline .tl-read,#timeline .tl-unit,#timeline .tl-grp>span{-webkit-user-select:none;user-select:none}#timeline.inert{color:var(--border2)}#timeline .tl-grp{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}#timeline .tl-btn{width:24px;height:22px;padding:0;border:0;border-radius:4px;background:transparent;color:var(--muted);cursor:pointer;font-size:calc(12px * var(--ui));line-height:1;display:inline-flex;align-items:center;justify-content:center}#timeline .tl-btn:hover{color:var(--text)}#timeline .tl-btn.active{color:var(--accent)}#timeline .tl-track{position:relative;flex:1 1 auto;height:100%;min-width:60px;cursor:pointer;touch-action:none}#timeline .tl-rail{position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:var(--border2)}#timeline .tl-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent)}#timeline.inert .tl-fill{background:var(--border2)}#timeline .tl-head{position:absolute;top:50%;left:0;width:9px;height:9px;margin-left:-4.5px;transform:translateY(-50%);border-radius:50%;background:var(--text)}#timeline.inert .tl-head{background:var(--muted)}#timeline .tl-read{flex:0 0 auto;white-space:nowrap;font-variant-numeric:tabular-nums}#timeline .tl-num{width:38px;height:20px;box-sizing:border-box;text-align:right;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font:inherit;padding:0 5px;outline:none;user-select:text}