:root{color-scheme:dark;--bg: #101012;--panel: #17171a;--raised: #202025;--raised-hover: #2a2a30;--line: #2b2b31;--text: #e8e8ec;--muted: #8d8d98;--faint: #5f5f6a;--radius: 6px;--panel-width: 304px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font:13px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.app{display:grid;grid-template-columns:minmax(0,1fr) var(--panel-width);grid-template-rows:100%;height:100%;overflow:hidden}.workspace{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0;padding:16px 24px 24px;gap:12px;position:relative}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.toolbar-group{display:flex;align-items:center;gap:10px}.segmented{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.history{display:inline-flex;gap:4px}.history button{width:26px;height:26px;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);font-size:13px;line-height:1;cursor:pointer}.history button:hover:not(:disabled){color:var(--text)}.history button:disabled{color:var(--line);cursor:default}.segmented button{padding:5px 12px;border:0;background:var(--panel);color:var(--muted);font:inherit;font-variant-numeric:tabular-nums;cursor:pointer}.segmented button+button{border-left:1px solid var(--line)}.segmented button:hover{color:var(--text)}.segmented button[aria-pressed=true]{background:var(--text);color:var(--bg)}.seed{display:flex;align-items:center;gap:8px;color:var(--faint)}.seed label{font-size:10px;letter-spacing:.08em;text-transform:uppercase}.seed input{width:8ch;padding:4px 7px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);color:var(--muted);font:inherit;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.seed input:focus{color:var(--text);outline:1px solid var(--faint)}.stage{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;min-height:0;gap:10px}.pattern-canvas{height:100%;width:auto;max-width:100%;aspect-ratio:1;background:#08080a;border:1px solid var(--line);border-radius:2px}.stage-readout{display:flex;gap:14px;margin:0;color:var(--faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;font-variant-numeric:tabular-nums}.panel{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;padding:18px 18px 20px;background:var(--panel);border-left:1px solid var(--line);overflow:hidden}.panel-body{display:flex;flex-direction:column;gap:18px;min-height:0;overflow-y:auto;padding-right:4px;margin-right:-4px}.panel-foot{display:flex;flex-direction:column;gap:8px}.panel-head h1{margin:0;font-size:14px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.section{display:flex;flex-direction:column;gap:10px}.section-head{display:flex;align-items:baseline;justify-content:space-between}.section h2{margin:0;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.field{display:grid;grid-template-columns:68px 1fr;align-items:center;gap:10px}.field label{color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}select{width:100%;padding:6px 8px;background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);font:inherit}.macros{gap:14px}.macro{display:flex;flex-direction:column;gap:3px}.macro-head{display:flex;align-items:baseline;justify-content:space-between}.macro-head label{font-size:12px;letter-spacing:.01em}.macro-value{color:var(--faint);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-variant-numeric:tabular-nums}.macro input[type=range]{width:100%;margin:0;accent-color:#dcdce2;cursor:pointer}.macro-ends{display:flex;justify-content:space-between;color:var(--faint);font-size:9.5px}.swatches{display:flex;gap:4px;height:30px}.swatch{position:relative;flex:1;border:1px solid var(--line);border-radius:4px;cursor:pointer}.swatch:hover{border-color:var(--faint)}.swatch input[type=color]{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;opacity:0;border:0;padding:0;cursor:pointer}.stepper{display:inline-flex;align-items:center;gap:2px}.stepper button{width:26px;height:26px;background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);font:inherit;line-height:1;cursor:pointer}.stepper button:hover:not(:disabled){background:var(--raised-hover)}.stepper button:disabled{color:var(--faint);cursor:default}.stepper output{min-width:26px;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}.link-button{padding:0;background:none;border:0;color:var(--muted);font:inherit;font-size:11px;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.link-button:hover{color:var(--text)}.mutation{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:14px;padding:16px 24px 24px;background:color-mix(in srgb,var(--bg) 94%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.mutation-head{display:flex;align-items:center;gap:20px}.mutation-head h2{margin:0;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.mutation-strength{display:flex;align-items:center;gap:10px;margin-right:auto}.mutation-strength label{color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}.mutation-strength input[type=range]{width:200px;margin:0;accent-color:#dcdce2;cursor:pointer}.mutation-tier{min-width:26ch;color:var(--faint);font-size:11px}.variants{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;min-height:0;justify-items:center}.variant{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:5px;min-width:0;min-height:0;padding:0;background:none;border:0;color:var(--faint);font:inherit;cursor:pointer}.variant canvas{height:100%;width:auto;max-width:100%;aspect-ratio:1;background:#08080a;border:1px solid var(--line);border-radius:2px;justify-self:center}.variant:hover canvas{border-color:var(--muted)}.variant[aria-pressed=true] canvas{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}.variant-label{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;text-align:center}.variant:hover .variant-label{color:var(--muted)}.mutation-foot{display:flex;align-items:baseline;justify-content:space-between;gap:16px}.export{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:grid;place-items:center;padding:24px;background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.export-card{display:flex;flex-direction:column;gap:14px;width:min(420px,100%);padding:18px 20px 20px;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 18px 48px #00000073}.export-head{display:flex;align-items:center;justify-content:space-between}.export-head h2{margin:0;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}.export .field{grid-template-columns:56px 1fr}.export .segmented{width:100%}.export .segmented button{flex:1}.export-sizes{display:flex;flex-direction:column;gap:6px}.export-custom,.export input[type=range]{width:100%;margin:0;accent-color:#dcdce2}.export-custom{padding:6px 8px;background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-variant-numeric:tabular-nums}.export-note{margin:0;color:var(--faint);font-size:10.5px;line-height:1.5}.export-warn{color:var(--muted);font-weight:600}.export-progress{height:3px;background:var(--raised);border-radius:2px;overflow:hidden}.export-progress span{display:block;height:100%;background:var(--text);transition:width .12s linear}.export-message{margin:0;color:var(--muted);font-size:11px}.export-message.error{color:#e8a0a0}.export-go{padding:10px;background:var(--text);color:var(--bg);border:0;border-radius:var(--radius);font:inherit;font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.export-go:hover:not(:disabled){background:#fff}.export-go:disabled{background:var(--raised);color:var(--muted);cursor:default}.panel-foot .primary{padding:10px;background:var(--text);color:var(--bg);border:0;border-radius:var(--radius);font:inherit;font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.panel-foot .primary:hover{background:#fff}.panel-foot .secondary{padding:9px;background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);font:inherit;font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}.panel-foot .secondary:hover{background:var(--raised-hover)}.hint{margin:0;color:var(--faint);font-size:10.5px}kbd{padding:1px 4px;background:var(--raised);border:1px solid var(--line);border-radius:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}:focus-visible{outline:2px solid #dcdce2;outline-offset:1px}