@import"https://fonts.googleapis.com/css2?family=PT+Mono&display=swap";:root{--sp: 8px;--bg: #141414;--surface: #000;--elevated: #000;--border: #272727;--border-focus: #272727;--text: #e0e0e0;--text-muted: #666;--accent: #888;--left-w: 430px;--controls-h: 300px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;font-family:PT Mono,monospace;background:var(--bg);color:var(--text)}#app{display:grid;grid-template-columns:var(--left-w) var(--sp) 1fr;grid-template-rows:1fr;height:100vh;padding:var(--sp)}#leftPane{grid-column:1;grid-row:1;display:flex;flex-direction:column;min-height:0;align-items:center}#headerBrand{flex:0 0 auto;font-size:20px;padding:var(--sp) 0 var(--sp) 0;white-space:nowrap}#headerBrandLink{color:var(--text);text-decoration:none}.controlLine{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px}#controlPanel{flex-wrap:nowrap;flex:0 0 auto;display:flex;gap:4px var(--sp);max-height:var(--controls-h);overflow-y:auto;overflow-x:hidden;font-size:11px;color:var(--accent);padding-bottom:2px;flex-direction:column;align-items:center}#controlPanel::-webkit-scrollbar,#rules::-webkit-scrollbar,#errorsList::-webkit-scrollbar,#canvasWrap::-webkit-scrollbar{width:6px;height:6px}#controlPanel::-webkit-scrollbar-track,#rules::-webkit-scrollbar-track,#errorsList::-webkit-scrollbar-track,#canvasWrap::-webkit-scrollbar-track{background:var(--bg)}#controlPanel::-webkit-scrollbar-thumb,#rules::-webkit-scrollbar-thumb,#errorsList::-webkit-scrollbar-thumb,#canvasWrap::-webkit-scrollbar-thumb{background:var(--border)}#canvasWrap::-webkit-scrollbar-corner{background:var(--bg)}#hSplitter{flex:0 0 var(--sp);cursor:row-resize}#rulesEditor{flex:1 1 0;width:100%;min-height:0;position:relative;overflow:hidden;background:var(--elevated);border:1px solid var(--border)}#rules{position:absolute;inset:0;width:100%;height:100%;font:13px/1.6 PT Mono,monospace;background:transparent;color:var(--text);border:none;padding:var(--sp);resize:none;outline:none;tab-size:4;z-index:1}#rulesEditor.coloredActive #rules{color:transparent;caret-color:var(--text)}#rules::selection{background:#264f78}#rulesHighlight{position:absolute;inset:0;font:13px/1.6 PT Mono,monospace;padding:var(--sp);margin:0;border:none;background:transparent;overflow:hidden;white-space:pre-wrap;word-break:break-all;tab-size:4;pointer-events:none;z-index:0;display:none}#errorsPanel{flex:0 0 auto;background:var(--surface);border:1px solid var(--border);margin-top:var(--sp);min-height:56px;max-height:160px;display:flex;flex-direction:column;width:-webkit-fill-available;width:stretch}#errorsPanel.hidden{display:none}#errorsHeader{height:22px;padding:0 6px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#d97f7f}.errorsCloseBtn{all:unset;width:12px;text-align:center;cursor:pointer;color:var(--text-muted)}#errorsList{overflow:auto;padding:6px;font-size:11px;line-height:1.5;color:#c7a7a7;white-space:pre-wrap}#splitter{grid-column:2;grid-row:1;cursor:col-resize}#canvasWrap{grid-column:3;grid-row:1;overflow:auto;background:var(--surface);border:1px solid var(--border);min-height:0;display:grid;justify-items:start;align-items:start}#canvasWrap.canvasWrapCentered{justify-items:center}#canvas-holder{transform-origin:0 0;width:max-content}#canvas{transform-origin:50% 0%;display:block;image-rendering:pixelated}#controlPanel label{display:flex;align-items:center;gap:calc(var(--sp) / 2);white-space:nowrap}.checkboxControl{display:flex;align-items:center;gap:6px}.checkboxControl input[type=checkbox]{width:11px;height:11px;appearance:none;-webkit-appearance:none;background:var(--elevated);border:1px solid var(--border);cursor:pointer;flex-shrink:0}.checkboxControl input[type=checkbox]:checked{background:var(--elevated);box-shadow:inset 0 0 0 2px var(--bg),inset 0 0 0 999px var(--accent)}#controlPanel input[type=number]{width:52px;padding:4px 16px 4px 6px;font:11px PT Mono,monospace;background:var(--elevated);color:var(--text);border:1px solid var(--border);outline:none;appearance:textfield;-moz-appearance:textfield}#controlPanel input[type=number]:disabled{color:var(--text-muted)}#controlPanel input[type=number]::-webkit-outer-spin-button,#controlPanel input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}#seed{width:88px}#seedBand{width:72px}#controlPanel select{width:56px;height:23px;padding:2px 18px 2px 4px;font:11px PT Mono,monospace;background:var(--elevated);color:var(--text);border:1px solid var(--border);outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.selectControl{position:relative;display:inline-flex;align-items:center}.selectArrow{position:absolute;right:4px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}.controlButton{padding:4px 10px;font:11px PT Mono,monospace;cursor:pointer;border:1px solid var(--border);background:var(--surface);color:var(--text);white-space:nowrap}.controlButton:active{background:var(--border)}.numberControl{position:relative;display:inline-flex;align-items:center}.numberSpinButtons{position:absolute;right:0;top:50%;transform:translateY(-50%);display:flex;flex-direction:column}.numberSpinButton{all:unset;width:15px;height:10px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer}.numberSpinButton:active{color:var(--accent)}.numberSpinIcon{width:9px;height:5px;display:block;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.numberControlDisabled .numberSpinButtons{opacity:.35;pointer-events:none}#info{position:relative;display:inline-block;font-size:10px;color:var(--text-muted)}#info.infoCopyable{cursor:pointer}#info.infoCopyable:hover:not(.infoCopied):after{content:"click to copy rule";position:absolute;left:0;top:calc(100% + 4px);padding:1px 4px;font-size:9px;color:var(--text);background:var(--surface);border:1px solid var(--border);white-space:nowrap;pointer-events:none;z-index:20}#info.infoCopied:after{content:"copied";position:absolute;left:0;top:calc(100% + 4px);padding:1px 4px;font-size:9px;color:var(--text);background:var(--elevated);border:1px solid var(--border);white-space:nowrap;pointer-events:none;z-index:20}#simInfo{font-size:10px;color:var(--text-muted);white-space:nowrap}.controlSep{color:var(--border)}#app.dragging,#app.dragging *{-webkit-user-select:none;user-select:none}#errorsHeaderBtns{display:flex;gap:18px}@media(orientation:portrait){html,body{overflow:auto}#app{display:flex;flex-direction:column;height:auto;min-height:100vh}#leftPane{flex:0 0 auto;width:100%}#controlPanel{max-height:none;width:100%;margin-bottom:var(--sp)}#hSplitter{display:none}#rulesEditor{flex:0 0 450px}#rules{height:100%}#splitter{display:none}#canvasWrap{min-height:800px;margin-top:var(--sp)}}