:root{--ink:#17141b;--paper:#eee9df;--hot:#ef4b23;--line:#17141b42}*{box-sizing:border-box}html{background:var(--paper)}body{color:var(--ink);background:var(--paper);margin:0;font-family:Arial,Helvetica,sans-serif;overflow:hidden}button,input,select{font:inherit}button,summary,input,select{touch-action:manipulation}main{flex-direction:column;height:100svh;padding:18px clamp(14px,3vw,52px) 12px;display:flex;overflow:hidden}header,footer{letter-spacing:.08em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:18px;max-width:1480px;margin:auto;font:700 10px/1.2 ui-monospace,monospace;display:flex}header{border-bottom:1px solid var(--ink);flex:none;width:100%;padding-bottom:12px}.brand{letter-spacing:-.06em;font-size:clamp(19px,2.6vw,32px)}.brand>span{background:var(--hot);border-radius:50%;width:.56em;height:.56em;margin-right:7px;display:inline-block}.workspace{grid-template-columns:minmax(240px, var(--preview-share)) 9px minmax(320px, 1fr);border:1px solid var(--ink);flex:auto;width:100%;max-width:1480px;min-height:0;margin:12px auto;display:grid;overflow:hidden}.visual-panel{flex-direction:column;min-width:0;min-height:0;padding:11px;display:flex}.visual-head{letter-spacing:.04em;justify-content:space-between;gap:12px;margin-bottom:11px;font:700 10px/1.2 ui-monospace,monospace;display:flex}.live:before{content:"";background:#777;border-radius:50%;width:7px;height:7px;margin-right:7px;display:inline-block}.live.active:before{background:var(--hot);box-shadow:0 0 0 4px #ef4b2326}.canvas-wrap{background:var(--ink);flex:auto;place-items:center;min-height:0;padding:7px;display:grid;overflow:hidden}.canvas-wrap canvas{object-fit:contain;image-rendering:auto;width:100%;height:100%;display:block}.explanation{opacity:.65;max-width:72ch;margin:11px 0 0;font:500 11px/1.45 ui-monospace,monospace}.splitter{z-index:3;border:0;border-right:1px solid var(--ink);border-left:1px solid var(--ink);cursor:col-resize;touch-action:none;background:#17141b12;width:9px;height:100%;padding:0;position:relative}.splitter:before{content:"";position:absolute;inset:0 -5px}.splitter span{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);width:3px;height:42px;position:absolute;top:50%;left:2px;transform:translateY(-50%)}.splitter:focus-visible{outline:2px solid var(--hot);outline-offset:-2px}.controls{overscroll-behavior:contain;flex-direction:column;min-width:0;min-height:0;display:flex;overflow-y:auto}.global-controls{border-bottom:1px solid var(--ink);grid-template-columns:repeat(4,1fr);gap:0 14px;padding:8px 14px;display:grid}.control{text-transform:uppercase;gap:6px;padding:8px 0;font:700 9px/1 ui-monospace,monospace;display:grid}.control-head{grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;min-width:0;display:grid}.control-head output{color:var(--hot)}.control>input[type=range]{width:100%;accent-color:var(--hot);cursor:ew-resize;margin:0}.resolution-control select{border:1px solid var(--ink);background:var(--paper);min-width:0;padding:5px;font:700 9px/1 ui-monospace,monospace}.color-controls{border-bottom:1px solid var(--ink);padding:8px 14px}.palette-picker{border:0;margin:0;padding:0}.palette-picker legend{text-transform:uppercase;width:100%;margin-bottom:6px;font:700 9px/1 ui-monospace,monospace}.palette-picker legend>span{float:left;padding-top:5px}.palette-picker legend .lock-toggle{float:right}.palette-grid{clear:both;grid-template-columns:repeat(4,1fr);gap:5px;display:grid}.palette-grid button{border:1px solid var(--line);min-width:0;color:var(--ink);cursor:pointer;background:0 0;padding:4px}.palette-grid button.selected{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.palette-grid b{text-align:left;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;margin-top:4px;font:700 8px/1 ui-monospace,monospace;display:block;overflow:hidden}.palette-swatch{height:9px;display:flex}.palette-swatch i{flex:1}.true-values-control{border-top:1px solid var(--line);text-transform:uppercase;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:7px;margin-top:7px;padding-top:7px;font:700 9px/1 ui-monospace,monospace;display:grid}.true-values-control span{min-width:0}.true-values-control b,.true-values-control small{display:block}.true-values-control small{opacity:.55;text-overflow:ellipsis;white-space:nowrap;margin-top:3px;font-size:7px;overflow:hidden}.value-toggle{border:1px solid var(--ink);min-width:42px;height:23px;color:var(--ink);text-transform:uppercase;cursor:pointer;background:0 0;font:700 8px/1 ui-monospace,monospace}.value-toggle.active{color:var(--paper);background:var(--ink)}.preset-controls{border-bottom:1px solid var(--ink);grid-template-columns:minmax(90px,1fr) auto minmax(110px,1fr) auto;gap:6px;padding:8px 14px;display:grid}.preset-controls input,.preset-controls select,.preset-controls button{border:1px solid var(--ink);min-width:0;height:29px;color:var(--ink);background:var(--paper);padding:5px 7px;font:700 8px/1 ui-monospace,monospace}.preset-controls button{cursor:pointer;text-transform:uppercase}.preset-controls button:disabled{cursor:default;opacity:.35}.clipboard-controls{grid-column:1/-1;grid-template-columns:1fr 1fr;gap:6px;display:grid}.preset-status{color:var(--hot);grid-column:1/-1;font:700 8px/1.2 ui-monospace,monospace}.preset-status:empty{display:none}.lock-toggle{border:1px solid var(--line);width:19px;height:19px;color:var(--ink);cursor:pointer;background:0 0;place-items:center;padding:2px;display:grid}.lock-toggle svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:12px;height:12px}.lock-toggle.locked{border-color:var(--hot);color:var(--paper);background:var(--hot)}.lock-toggle:focus-visible{outline:2px solid var(--hot);outline-offset:1px}.algorithm-control{border-bottom:1px solid var(--ink)}.control-group-head{border-bottom:1px solid var(--line);letter-spacing:.04em;text-transform:uppercase;justify-content:space-between;align-items:center;padding:6px 14px;font:700 8px/1 ui-monospace,monospace;display:flex}.algorithm-grid{grid-template-columns:repeat(4,1fr);display:grid}.algorithm-grid button{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer;background:0 0;min-width:0;padding:9px 4px}.algorithm-grid button:nth-child(4n){border-right:0}.algorithm-grid button:nth-child(n+5){border-bottom:0}.algorithm-grid b,.algorithm-grid span{font:700 9px/1.2 ui-monospace,monospace;display:block}.algorithm-grid b{color:var(--hot);margin-bottom:5px}.algorithm-grid span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.algorithm-grid button.selected{color:var(--paper);background:var(--ink)}.operators{grid-template-columns:1fr 1fr;display:grid}.operators details{border-right:1px solid var(--line);border-bottom:1px solid var(--line)}.operators details:nth-child(2n){border-right:0}.operators summary{cursor:pointer;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:11px;font:700 9px/1 ui-monospace,monospace;list-style:none;display:grid}.operators summary::-webkit-details-marker{display:none}.operators summary b{color:#fff;background:var(--hot);place-items:center;width:28px;height:28px;display:grid}.operators summary span{opacity:.55}.operators summary em{font-style:normal}.operator-body{border-top:1px solid var(--line);padding:0 11px 8px}.operator-body .control{padding:7px 0}.space-picker{border:0;margin:8px 0 4px;padding:0}.space-picker legend,.wave-picker legend{text-transform:uppercase;width:100%;font:700 9px/1 ui-monospace,monospace}.space-picker legend{margin-bottom:6px}.space-picker legend>span,.wave-picker legend>span{float:left;padding-top:5px}.space-picker legend .lock-toggle,.wave-picker legend .lock-toggle{float:right}.space-grid{clear:both;grid-template-columns:repeat(4,1fr);display:grid}.space-grid button{border:1px solid var(--line);text-transform:uppercase;cursor:pointer;background:0 0;border-right:0;min-width:0;padding:7px 2px;font:700 8px/1 ui-monospace,monospace}.space-grid button:last-child{border-right:1px solid var(--line)}.space-grid button.selected{color:var(--paper);background:var(--ink)}.space-grid button:hover{color:var(--hot)}.wave-picker{border:0;border-top:1px solid var(--line);margin:5px 0 0;padding:8px 0 0}.wave-picker legend{padding:0 0 6px}.wave-grid{clear:both;grid-template-columns:1fr 1fr;gap:5px;display:grid}.wave-grid button{border:1px solid var(--line);min-width:0;color:var(--ink);cursor:pointer;background:#ffffff1f;padding:4px}.wave-grid button.selected{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:#ef4b231a}.wave-grid button:hover{border-color:var(--hot)}.wave-icon{width:100%;height:38px;display:block}.wave-grid span,.wave-grid code{text-overflow:ellipsis;white-space:nowrap;text-align:left;display:block;overflow:hidden}.wave-grid span{text-transform:uppercase;margin-top:3px;font:700 8px/1.2 ui-monospace,monospace}.wave-grid code{opacity:.56;margin-top:2px;font:500 7px/1.2 ui-monospace,monospace}.actions{z-index:2;border-top:1px solid var(--ink);background:var(--paper);grid-template-columns:1.2fr 1fr 1fr;margin-top:auto;display:grid;position:sticky;bottom:0}.actions button{border:0;border-right:1px solid var(--ink);text-transform:uppercase;cursor:pointer;background:0 0;min-height:54px;font:700 9px/1 ui-monospace,monospace}.actions button:last-child{border:0}.actions .primary{color:#fff;background:var(--hot)}footer{border-top:1px solid var(--ink);flex:none;width:100%;padding-top:10px}@media (width<=850px){.workspace{grid-template-columns:1fr;grid-template-rows:minmax(150px, var(--preview-share)) 9px minmax(0, 1fr)}.visual-panel{padding:8px}.splitter{border:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);cursor:row-resize;width:100%;height:9px}.splitter:before{inset:-5px 0}.splitter span{border:0;border-right:1px solid var(--ink);border-left:1px solid var(--ink);width:42px;height:3px;top:2px;left:50%;transform:translate(-50%)}.explanation{display:none}}@media (width<=520px){main{padding:10px 9px 8px}header{padding-bottom:8px}header p{display:none}.workspace{margin:8px auto}.visual-head{margin-bottom:7px;font-size:8px}.global-controls{grid-template-columns:1fr 1fr}.palette-grid{grid-template-columns:repeat(2,1fr)}.preset-controls{grid-template-columns:minmax(0,1fr) auto}.operators{grid-template-columns:1fr}.operators details{border-right:0}.operators details:not([open]) summary{min-height:46px}.actions button{min-height:51px}.algorithm-grid span{font-size:8px}footer{align-items:flex-start;padding-top:7px;font-size:8px}footer span:last-child{text-align:right}}