@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap";:root{color:#171916;font-synthesis:none;--paper:#c8c8b9;--line:#282a25;--acid:#d9ff38;--purple:#8e4db0;background:#777b73;font-family:IBM Plex Mono,Courier New,monospace}*{box-sizing:border-box}body{background:repeating-linear-gradient(0deg,#ffffff06 0 1px,#0000 1px 4px),#737870;min-width:320px;min-height:100vh;margin:0}button,select,input{font:inherit}button{color:inherit}.app-shell{background:var(--paper);border:2px solid #111;width:min(1460px,100% - 28px);margin:14px auto;box-shadow:7px 7px #292c29}.titlebar{border-bottom:2px solid var(--line);background:repeating-linear-gradient(90deg,#0000 0 7px,#00000008 7px 8px),#d3d3c3;justify-content:space-between;align-items:center;min-height:78px;padding:10px 14px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-mark{background:#111;border:2px solid #000;place-items:center;width:49px;height:49px;display:grid;overflow:hidden;box-shadow:inset -5px -5px #45304d}.brand-mark svg{width:39px;height:39px;image-rendering:pixelated}h1{letter-spacing:-1px;margin:0;font-size:26px;line-height:1}.brand p{letter-spacing:1.5px;margin:5px 0 0;font-size:9px}.header-actions{align-items:center;gap:9px;display:flex}.memory{background:#b9baad;border:1px solid #777;padding:7px 8px;font-size:9px}.format-select{letter-spacing:.6px;gap:2px;font-size:7px;font-weight:700;display:grid}.format-select select{background:#deded0;border:1px solid #555;min-width:88px;padding:4px 5px;font-size:9px}button{cursor:pointer;background:#deded0;border:1px solid #1e201c;box-shadow:2px 2px #454741}button:disabled{opacity:.38;cursor:not-allowed;transform:none;box-shadow:1px 1px #777}button:active{transform:translate(1px,1px);box-shadow:1px 1px #454741}.primary{background:var(--acid);letter-spacing:.7px;padding:11px 16px;font-weight:700}.workspace{grid-template-columns:268px minmax(420px,1fr) 248px;min-height:690px;display:grid}.panel{background:#bfc0b1}.left-panel{border-right:2px solid var(--line)}.right-panel{border-left:2px solid var(--line)}.panel-title{background:#adafa1;border-top:1px solid #e7e7d8;border-bottom:1px solid #555;align-items:center;height:43px;display:flex}.panel-title:first-child{border-top:0}.panel-title span{width:39px;color:var(--acid);background:#242621;align-self:stretch;place-items:center;font-size:11px;display:grid}.panel-title h2{letter-spacing:1.5px;margin:0 0 0 11px;font-size:12px}.hint{color:#54564f;margin:11px 12px;font-size:9px;line-height:1.5}.brush-grid{scrollbar-color:#252822 #a7a99b;grid-template-columns:repeat(3,1fr);gap:4px;max-height:326px;padding:0 8px 10px;display:grid;overflow:auto}.brush{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:42px;padding:4px 2px;font-size:6.5px;line-height:1.05;display:flex;overflow:hidden}.brush span{text-align:center;font-size:15px;line-height:1}.brush.active{color:#fff;outline:2px solid var(--acid);outline-offset:-4px;background:#282a26;box-shadow:2px 2px #707269}.brush.active span{color:var(--acid)}.brush-parameters{background:#b6b8aa;border-top:1px solid #8b8d82;grid-template-columns:1fr 1fr;padding:3px 5px 9px;display:grid}.brush-parameters .slider{padding:7px 6px 4px}.brush-parameters .slider input{margin-top:6px}.brush-parameters .check-control{grid-column:1/3;margin:6px 6px 3px}.placement-lab{background:#b7b9aa;grid-template-columns:1fr 1fr;padding:9px 8px 11px;display:grid}.placement-grid{grid-column:1/3;grid-template-columns:repeat(3,1fr);gap:5px;display:grid}.placement-grid button{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:43px;padding:5px 3px;font-size:8px;display:flex;box-shadow:1px 1px #666}.placement-grid button b{font-size:16px;line-height:1}.placement-grid button.active{color:#fff;outline:2px solid var(--acid);outline-offset:-3px;background:#292b27}.placement-grid button.active b{color:var(--acid)}.placement-lab>p{color:#55574f;text-align:center;grid-column:1/3;min-height:20px;margin:7px 3px 1px;font-size:7px;line-height:1.35}.placement-lab .slider{padding:7px 6px 4px}.placement-lab .slider input{margin-top:6px}.radio-list{gap:9px;padding:10px 12px 14px;display:grid}.radio-list label{cursor:pointer;align-items:center;gap:8px;font-size:10px;display:flex}.radio-list input{display:none}.radio-list i{background:#ddd;border:1px solid #333;width:12px;height:12px}.radio-list input:checked+i{background:var(--purple);box-shadow:inset 0 0 0 2px #ddd}.area-lab{background:#b7b9aa;gap:7px;padding:9px 10px 11px;display:grid}.area-toggle{cursor:pointer;background:#d7d8c9;border:1px solid #555;grid-template-columns:14px 1fr auto;align-items:center;gap:7px;padding:8px;font-size:8px;font-weight:700;display:grid;box-shadow:2px 2px #777}.area-toggle input{display:none}.area-toggle i{background:#ececdd;border:1px solid #333;width:13px;height:13px}.area-toggle.active{color:#fff;outline:2px solid var(--acid);outline-offset:-3px;background:#292b27}.area-toggle.active i{background:var(--acid);box-shadow:inset 0 0 0 3px #292b27}.area-toggle small{color:#666}.area-toggle.active small{color:var(--acid)}.area-options{gap:7px;transition:opacity .12s;display:grid}.area-options.disabled{opacity:.38}.area-options>label{grid-template-columns:62px 1fr;align-items:center;gap:5px;font-size:7px;font-weight:700;display:grid}.area-lab select{background:#deded0;border:1px solid #555;width:100%;min-width:0;padding:5px 4px;font-size:8px}.area-lab select:disabled{cursor:not-allowed}.area-lab>small{color:#575951;letter-spacing:.25px;text-align:center;min-height:18px;font-size:6.5px;line-height:1.35}.symmetry-lab{background:#b7b9aa;grid-template-columns:1fr 1fr;align-items:center;padding:7px 6px 10px;display:grid}.symmetry-lab .check-control{grid-column:1/3;margin:5px 6px}.symmetry-lab .slider{grid-column:1/3;padding:7px 6px 4px}.symmetry-lab>small{color:#575951;letter-spacing:.3px;text-align:center;grid-column:1/3;padding:4px 4px 0;font-size:6.5px}.slider{grid-template-columns:1fr auto;align-items:center;padding:11px 12px 5px;font-size:9px;font-weight:600;display:grid}.slider output{color:var(--acid);background:#2b2d29;padding:3px 5px}.slider input{appearance:none;background:#73766e;border:0;grid-column:1/3;width:100%;height:4px;margin:9px 0 0}.slider input::-webkit-slider-thumb{appearance:none;background:#e5e5d7;border:2px solid #292b27;width:11px;height:17px;box-shadow:1px 1px #777}.slider.disabled{opacity:.38;cursor:not-allowed}.slider.disabled output{color:#96998f}.slider input:disabled{cursor:not-allowed}.slider input:disabled::-webkit-slider-thumb{background:#999b92}.check-control{cursor:pointer;background:#aaac9f;border:1px solid #73766e;grid-template-columns:14px 1fr auto;align-items:center;gap:7px;margin:10px 12px 13px;padding:9px;font-size:9px;font-weight:700;display:grid}.check-control input{display:none}.check-control i{background:#deded0;border:1px solid #333;width:13px;height:13px}.check-control input:checked+i{background:var(--purple);box-shadow:inset 0 0 0 3px #deded0}.check-control small{color:#595b54;letter-spacing:.5px;font-size:7px}.check-control input:not(:checked)~small{color:#1d5b42}.check-control.disabled{opacity:.38;cursor:not-allowed}.stage-column{background:#373a36;flex-direction:column;min-width:0;padding:14px;display:flex}.screen-bezel{background:#171916;border:2px solid #070807;flex-direction:column;flex:1;min-height:0;padding:9px 9px 8px;display:flex;box-shadow:inset 0 0 0 2px #5b5e56}.screen-label{letter-spacing:1px;color:#8c9185;grid-template-columns:1fr auto 1fr;padding:0 2px 8px;font-size:9px;display:grid}.screen-label .performance{color:#aeb4a6}.screen-label .live,.screen-label span:last-child{text-align:right}.screen-label .live{color:var(--acid)}.canvas-wrap{flex:1;justify-content:center;align-items:center;min-height:0;display:flex;position:relative}.canvas-wrap canvas{aspect-ratio:4/3;width:auto;max-width:100%;height:auto;min-height:0;max-height:100%;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair;touch-action:none;background:#05050a;border:0;outline:1px solid #000;flex:none}.canvas-wrap.fit-width{grid-template-columns:minmax(0,1fr);place-content:safe center stretch;place-items:start stretch;width:100%;display:grid;overflow:hidden auto}.canvas-wrap.fit-width canvas{grid-area:1/1;width:100%;max-width:none;height:auto;max-height:none}.mask-overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.canvas-wrap.fit-width .mask-overlay{grid-area:1/1;align-self:start;width:100%;height:auto;position:relative;inset:auto}.mask-overlay>*{fill:#d9ff3814;stroke:var(--acid);stroke-width:2px;stroke-dasharray:7 4;vector-effect:non-scaling-stroke;filter:drop-shadow(2px 2px #111)}.screen-help{text-align:center;color:#777d71;letter-spacing:1.3px;padding-top:7px;font-size:8px}.transport{background:#afb0a3;border:2px solid #20221f;border-top:0;flex-wrap:wrap;align-items:center;gap:8px;min-height:55px;padding:8px;display:flex}.transport button{min-width:68px;height:35px;font-size:14px;font-weight:700}.transport button span{font-size:9px}.transport .pause{background:var(--acid)}.transport .play{background:#8ff0b0}.transport .recording{color:#111;background:#ff5f5f}.transport .output-live,.transport .preview-fill.active{background:var(--acid);outline-offset:-4px;outline:2px solid #292b27}.transport .preview-fill{min-width:84px}.transport .output-status{color:#6c1f2a;max-width:155px;font-size:7px;font-weight:700;line-height:1.25}.transport .spacer{flex:1}.palette-preview{border:2px solid #333;grid-template-columns:repeat(8,1fr);height:45px;margin:10px 12px;display:grid;box-shadow:2px 2px #777}.palette-preview span{min-width:0}.model-switch{grid-template-columns:1fr 1fr;margin:0 12px 8px;display:grid}.model-switch button{box-shadow:none;padding:6px;font-size:9px}.model-switch button.active{color:var(--acid);background:#292b27}.oscillator-bank{background:#aaac9f;border:1px solid #666;margin:0 12px 3px}.oscillator{border-bottom:1px solid #777;grid-template-columns:22px 1fr;gap:3px 6px;padding:5px 6px;display:grid}.oscillator:last-child{border-bottom:0}.oscillator strong{color:var(--acid);background:#292b27;grid-row:1/5;place-items:center;font-size:12px;display:grid}.oscillator select{background:#deded0;border:1px solid #444;width:100%;margin:0;padding:3px 4px;font-size:8px}.oscillator label{grid-template-columns:54px 1fr;align-items:center;gap:4px;font-size:7px;display:grid}.oscillator label span{justify-content:space-between;display:flex}.oscillator label b{color:#57306b}.oscillator input{appearance:none;background:#71746c;width:100%;height:3px;margin:0}.oscillator input::-webkit-slider-thumb{appearance:none;background:var(--acid);border:1px solid #292b27;width:8px;height:11px}.cycle-controls>.slider{padding-top:6px}.cycle-controls>.slider input{margin-top:6px}.index-map{background:#b1b2a5;border:1px solid #777;align-items:end;gap:5px;margin:8px 12px;padding:7px 5px 5px;display:flex}.axis{text-align:center;font-size:8px}.axis span{font-size:6px}.bars{border-bottom:1px solid #444;flex:1;align-items:end;gap:2px;height:34px;display:flex}.bars b{flex:1;min-width:2px;transition:none}.info-box{color:#efefe0;border-left:5px solid var(--purple);background:#292b27;margin:8px 12px;padding:9px}.info-box strong{color:var(--acid);font-size:8px}.info-box p{margin:5px 0 0;font-size:7px;line-height:1.4}.cycle-button{background:var(--acid);width:calc(100% - 24px);margin:0 12px 10px;padding:8px;font-size:8px;font-weight:700}.background-control{background:#aaac9f;border:1px solid #777;grid-template-columns:1fr auto;align-items:center;gap:8px;margin:0 12px 8px;padding:6px 7px;font-size:7px;font-weight:700;display:grid}.background-control label{cursor:pointer;align-items:center;gap:6px;display:flex}.background-control input[type=color]{background:#deded0;border:1px solid #333;width:30px;height:20px;padding:1px}.background-control input[type=color]:disabled{opacity:.35}.background-control input[type=checkbox]{accent-color:var(--purple);margin:0}footer{color:#c4c8b9;letter-spacing:.7px;background:#22241f;border-top:2px solid #111;justify-content:space-between;align-items:center;height:32px;padding:0 12px;font-size:8px;display:flex}footer span:first-child{color:var(--acid)}@media (width>=1001px){html,body,#root{height:100%;overflow:hidden}.app-shell{flex-direction:column;height:calc(100vh - 12px);margin:6px auto;display:flex;box-shadow:5px 5px #292c29}.titlebar{flex:none;min-height:60px;padding:6px 10px}.brand{gap:9px}.brand-mark{width:42px;height:42px}.brand-mark svg{width:33px;height:33px}h1{font-size:22px}.brand p{margin-top:3px;font-size:8px}.primary{padding:9px 13px}.workspace{flex:1;min-height:0}.panel{scrollbar-width:thin;scrollbar-color:#55584f #a7a99b;min-height:0;overflow:hidden auto}.panel-title{z-index:2;height:35px;position:sticky;top:0}.panel-title span{width:34px;font-size:9px}.panel-title h2{margin-left:9px;font-size:10px}.hint{margin:6px 9px;font-size:8px;line-height:1.3}.brush-grid{gap:3px;max-height:238px;padding:0 6px 6px}.brush{min-height:36px;padding:3px 2px}.brush span{font-size:13px}.brush-parameters{padding:2px 4px 5px}.brush-parameters .slider,.placement-lab .slider{padding:5px 5px 3px}.brush-parameters .slider input,.placement-lab .slider input{margin-top:4px}.placement-lab{padding:6px 6px 7px}.placement-grid{gap:4px}.placement-grid button{min-height:38px;padding:4px 3px}.placement-lab>p{min-height:16px;margin:4px 2px 0}.symmetry-lab{padding:4px 5px 6px}.symmetry-lab .check-control{margin:3px 5px}.symmetry-lab .slider{padding:5px 5px 3px}.symmetry-lab>small{padding-top:2px}.area-lab{gap:5px;padding:6px 8px 7px}.area-toggle{padding:6px}.area-lab select{padding:4px}.area-lab>small{min-height:14px}.slider{padding:7px 9px 4px}.slider input{margin-top:6px}.slider input::-webkit-slider-thumb{height:15px}.check-control{margin:6px 9px 7px;padding:7px}.stage-column{min-height:0;padding:8px}.screen-bezel{padding:7px 7px 6px}.screen-label{padding-bottom:5px}.screen-help{padding-top:5px}.transport{flex:none;gap:6px;min-height:47px;padding:6px}.transport button{min-width:64px;height:32px}.palette-preview{height:38px;margin:7px 9px}.model-switch,.background-control{margin:0 9px 6px}.oscillator-bank{margin:0 9px 2px}.oscillator{padding:4px 5px}.cycle-controls>.slider{padding-top:5px}.index-map{margin:6px 9px;padding:5px}.info-box{margin:6px 9px;padding:7px}.cycle-button{width:calc(100% - 18px);margin:0 9px 7px;padding:7px}footer{flex:none;height:24px;font-size:7px}}@media (width<=1000px){.workspace{grid-template-columns:230px minmax(400px,1fr)}.right-panel{border-left:0;border-top:2px solid var(--line);grid-column:1/3;grid-template-columns:180px 180px 1fr;align-items:start;padding-bottom:10px;display:grid}.right-panel .panel-title{grid-area:1/1}.right-panel .hint{grid-area:2/1}.palette-preview{grid-area:1/2/3}.model-switch{grid-area:1/3;margin-top:8px}.background-control{grid-area:2/3}.oscillator-bank{grid-area:3/1/auto/3}.cycle-controls{grid-area:3/3}.index-map{grid-area:4/1}.info-box{grid-area:4/2}.cycle-button{grid-area:4/3;align-self:center}.oscillator{grid-template-columns:22px 1fr}.oscillator-bank{grid-template-columns:repeat(3,1fr);display:grid}.oscillator{border-bottom:0;border-right:1px solid #777}.oscillator:last-child{border-right:0}}@media (width<=720px){.app-shell{border-left:0;border-right:0;width:100%;margin:0}.titlebar{align-items:flex-start}.memory{display:none}.header-actions{flex-wrap:wrap;justify-content:flex-end;gap:5px}.format-select select{min-width:74px}.primary{font-size:9px}.workspace{flex-direction:column;display:flex}.stage-column{order:-1;min-height:0}.screen-bezel{flex:none}.canvas-wrap{aspect-ratio:4/3;flex:none}.screen-bezel canvas{aspect-ratio:4/3;flex:none;width:100%;height:auto}.screen-label{grid-template-columns:1fr 1fr}.screen-label .performance{display:none}.panel{border:0!important}.left-panel{grid-template-columns:1fr 1fr;display:grid}.left-panel .hint,.left-panel .brush-grid,.left-panel .radio-list,.left-panel .slider{grid-column:auto}.left-panel .panel-title,.area-lab,.brush-parameters,.placement-lab,.symmetry-lab{grid-column:1/3}.brush-grid{max-height:260px}.right-panel{display:block}footer span:last-child{display:none}}