:root{--bg: #101216;--panel: #16181e;--panel-2: #1c1f27;--border: #262a34;--text: #d8dae2;--muted: #8a8fa0;--accent: #e0784e;--accent-dim: #a05437}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{height:100%}body{background:var(--bg);color:var(--text);font:13px/1.45 -apple-system,SF Pro Text,Segoe UI,system-ui,sans-serif;overflow:hidden}#app{display:flex}#panel{width:var(--panel-w, 300px);min-width:var(--panel-w, 300px);height:100%;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--border)}#panel header{padding:16px 16px 8px}#panel h1{font-size:20px;font-weight:700;letter-spacing:.03em}#panel h1 span{color:var(--accent)}.tagline{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.14em}.toolbar{display:flex;flex-direction:column;gap:8px;padding:8px 16px 12px;border-bottom:1px solid var(--border)}.toolbar select{width:100%}.toolbar-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(34px,1fr));gap:5px}select,button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px 10px;font:inherit;cursor:pointer}select:hover,button:hover{border-color:var(--accent-dim)}button:disabled{opacity:.35;cursor:default}button:disabled:hover{border-color:var(--border)}.toolbar button{padding:6px 8px;line-height:1}#panel-resize{flex:0 0 5px;cursor:col-resize;background:var(--border);transition:background .15s}#panel-resize:hover,#panel-resize.dragging{background:var(--accent-dim)}body.resizing{cursor:col-resize;-webkit-user-select:none;user-select:none}#controls{flex:1;overflow-y:auto;padding-bottom:8px}#controls details{border-bottom:1px solid var(--border)}#controls summary{cursor:pointer;padding:9px 16px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);-webkit-user-select:none;user-select:none;list-style:none}#controls summary:before{content:"▸";display:inline-block;margin-right:7px;transition:transform .15s;color:var(--accent-dim)}#controls details[open] summary:before{transform:rotate(90deg)}.control-row{display:grid;grid-template-columns:minmax(92px,.42fr) 1fr 42px;align-items:center;gap:8px;padding:3px 16px}.control-row.hidden{display:none}.control-row label{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.control-row .value{font-family:SF Mono,ui-monospace,Menlo,monospace;font-size:11px;color:var(--muted);text-align:right}.control-row select{padding:4px 6px;font-size:12px}input[type=range]{-webkit-appearance:none;width:100%;height:18px;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:var(--border)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--accent);margin-top:-5px;border:none}input[type=range]::-webkit-slider-thumb:hover{background:#f08c60}input[type=range]::-moz-range-track{height:3px;border-radius:2px;background:var(--border)}input[type=range]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--accent);border:none}input[type=checkbox]{accent-color:var(--accent)}.export-area{padding:12px 16px;border-top:1px solid var(--border)}button.primary{width:100%;background:var(--accent);border-color:var(--accent);color:#1a0f08;font-weight:700;padding:9px;font-size:14px}button.primary:hover{background:#f08c60}.hint{margin-top:8px;color:var(--muted);font-size:11px;line-height:1.5}#viewport{flex:1;position:relative;background:radial-gradient(ellipse at 50% 35%,#232733,#14161c 65%,#0d0e12)}#viewport canvas{display:block}#stats{position:absolute;left:14px;bottom:12px;font-family:SF Mono,ui-monospace,Menlo,monospace;font-size:11px;color:var(--muted);pointer-events:none;text-shadow:0 1px 3px rgba(0,0,0,.7)}#stats b{color:var(--text);font-weight:600}#warnings{position:absolute;right:14px;bottom:12px;font-size:11px;text-align:right;pointer-events:none}#warnings .warn{display:inline-block;background:#783c148c;border:1px solid #a05437;color:#f0b090;border-radius:6px;padding:3px 9px;margin-left:6px}#warnings.computing:before{content:"⏳ growing pattern…";display:inline-block;background:#28375a8c;border:1px solid #3d5a8a;color:#9ec0f0;border-radius:6px;padding:3px 9px;margin-left:6px}#warnings .note{display:inline-block;background:#6e5a1473;border:1px solid #8a7430;color:#e8d48a;border-radius:6px;padding:3px 9px;margin-left:6px}#warnings .ok{display:inline-block;background:#1e462880;border:1px solid #3a6a4a;color:#9fd0ab;border-radius:6px;padding:3px 9px}