*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0a0c0f;--bg-panel:#0f1115;--bg-panel-2:#13161c;--bg-input:#0d0f14;--border:#1e2330;--border-mid:#252a38;--border-light:#2e3448;--amber:#c8923a;--amber-light:#e0ab5a;--amber-dim:#c8923a2e;--amber-glow:#c8923a14;--text-primary:#d4cfc8;--text-muted:#6e7485;--text-faint:#3a3f50;--text-head:#ebe6dd;--green:#5a9e68;--font-serif:"Crimson Pro", "Palatino Linotype", Georgia, serif;--font-sc:"Cormorant SC", "Palatino Linotype", Georgia, serif;--font-mono:"JetBrains Mono", "Fira Code", Consolas, monospace;--sidebar-w:220px;--sidebar-ctrl-w:256px;--header-h:52px}html,body{background:var(--bg);height:100%;color:var(--text-primary);font-family:var(--font-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px;line-height:1.5}#app{background:var(--bg);flex-direction:column;height:100dvh;display:flex;overflow:hidden}#site-header{height:var(--header-h);border-bottom:1px solid var(--border);background:var(--bg-panel);z-index:10;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 18px;display:flex;position:relative}#site-header:before{content:"";background:linear-gradient(90deg, transparent, var(--amber), transparent);opacity:.35;height:1px;position:absolute;bottom:0;left:0;right:0}.header-left{align-items:center;gap:14px;display:flex}.header-emblem{color:var(--amber);opacity:.85;text-shadow:0 0 12px #c8923a80;font-size:22px;line-height:1}.site-title{font-family:var(--font-sc);letter-spacing:.06em;color:var(--text-head);font-size:16px;font-weight:500;line-height:1.1}.site-sub{font-family:var(--font-mono);letter-spacing:.12em;color:var(--text-muted);text-transform:uppercase;margin-top:1px;font-size:9px}.header-right{align-items:center;gap:8px;display:flex}#main-layout{grid-template-columns:var(--sidebar-w) 1fr var(--sidebar-ctrl-w);flex:1;display:grid;overflow:hidden}#sidebar-presets,#sidebar-controls{background:var(--bg-panel);border-color:var(--border);scrollbar-width:thin;scrollbar-color:var(--border-mid) transparent;padding-bottom:16px;overflow-y:auto}#sidebar-presets{border-right:1px solid var(--border)}#sidebar-controls{border-left:1px solid var(--border);padding:0 0 16px}.sidebar-section-head{background:var(--bg-panel);z-index:2;align-items:center;gap:8px;padding:12px 14px 8px;display:flex;position:sticky;top:0}.section-label{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--amber);white-space:nowrap;opacity:.9;font-size:9px}.section-rule{background:linear-gradient(90deg, var(--border-light) 0%, transparent 100%);flex:1;height:1px}#presets-grid{flex-direction:column;gap:2px;padding:4px 10px;display:flex}.preset-card{cursor:pointer;background:0 0;border:1px solid #0000;border-radius:5px;align-items:center;gap:10px;padding:6px 8px;transition:background .15s,border-color .15s;display:flex}.preset-card:hover{background:var(--bg-panel-2);border-color:var(--border-mid)}.preset-card.active{background:var(--amber-dim);border-color:var(--amber)}.preset-card.active .preset-label{color:var(--amber-light)}.preset-thumb{border:1px solid var(--border);background:#0a0c0f;border-radius:3px;flex-shrink:0;width:48px;height:40px;overflow:hidden}.preset-thumb img{object-fit:contain;width:100%;height:100%;display:block}.preset-label{font-family:var(--font-serif);color:var(--text-primary);font-size:13px;line-height:1.3}#canvas-area{background:#0a0c0f;position:relative;overflow:hidden}#canvas-area:after{content:"";pointer-events:none;z-index:1;background:radial-gradient(80% 80%,#0000 60%,#00000073 100%);position:absolute;inset:0}#main-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}#canvas-overlay{pointer-events:none;z-index:2;flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:0}#status-bar{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--border);font-family:var(--font-mono);letter-spacing:.04em;background:#0a0c0fcc;align-items:center;gap:6px;padding:7px 14px;font-size:10px;display:flex}.status-msg{color:var(--green)}.status-divider{color:var(--text-faint)}.status-label{color:var(--text-muted);letter-spacing:.1em;text-transform:uppercase;font-size:9px}.status-val{color:var(--text-primary)}.warning-msg{color:#c8823a;margin-left:4px;font-size:10px}#canvas-hint{font-family:var(--font-mono);letter-spacing:.1em;color:var(--text-faint);text-align:right;text-transform:uppercase;padding:8px 14px;font-size:9px}.ctrl-group{border-bottom:1px solid var(--border);padding:8px 14px}.ctrl-label{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);justify-content:space-between;align-items:center;margin-bottom:6px;font-size:10px;display:flex}.ctrl-val{color:var(--amber);font-family:var(--font-mono);font-size:10px}.ctrl-label-row{justify-content:space-between;align-items:center;margin-bottom:6px;display:flex}.ctrl-label-row .ctrl-label{margin-bottom:0}.mono-input,.axiom-input{background:var(--bg-input);border:1px solid var(--border-mid);width:100%;color:var(--text-head);font-family:var(--font-mono);border-radius:3px;outline:none;padding:6px 8px;font-size:12px;transition:border-color .15s}.mono-input:focus,.axiom-input:focus{border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-glow)}.select-input{background:var(--bg-input);border:1px solid var(--border-mid);width:100%;color:var(--text-head);font-family:var(--font-mono);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236e7485'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;border-radius:3px;outline:none;padding:6px 8px;font-size:11px}.select-input:focus{border-color:var(--amber)}#rules-container{flex-direction:column;gap:4px;display:flex}.rule-row{grid-template-columns:28px auto 1fr 38px 22px;align-items:center;gap:4px;display:grid}.rule-sym{background:var(--bg-input);border:1px solid var(--border-mid);color:var(--amber-light);font-family:var(--font-mono);text-align:center;border-radius:3px;outline:none;width:100%;padding:4px 0;font-size:13px;font-weight:500}.rule-sym:focus{border-color:var(--amber)}.rule-arrow{color:var(--text-faint);text-align:center;-webkit-user-select:none;user-select:none;font-size:13px;font-family:var(--font-mono)}.rule-rep{background:var(--bg-input);border:1px solid var(--border-mid);color:var(--text-head);font-family:var(--font-mono);border-radius:3px;outline:none;width:100%;min-width:0;padding:4px 6px;font-size:10px}.rule-rep:focus{border-color:var(--amber)}.rule-prob{background:var(--bg-input);border:1px solid var(--border-mid);color:var(--text-muted);font-family:var(--font-mono);border-radius:3px;outline:none;width:100%;min-width:0;padding:4px;font-size:9px}.rule-prob:focus{border-color:var(--amber)}.rule-remove{border:1px solid var(--border);color:var(--text-faint);cursor:pointer;background:0 0;border-radius:3px;padding:2px 4px;font-size:14px;line-height:1;transition:color .15s,border-color .15s}.rule-remove:hover{color:#c84040;border-color:#c84040}.btn-add-rule{border:1px solid var(--border-light);color:var(--amber);font-family:var(--font-mono);letter-spacing:.08em;cursor:pointer;background:0 0;border-radius:3px;padding:3px 8px;font-size:9px;transition:background .15s,border-color .15s}.btn-add-rule:hover{background:var(--amber-dim);border-color:var(--amber)}.slider{appearance:none;background:var(--border-mid);cursor:pointer;width:100%;height:2px;accent-color:var(--amber);border-radius:2px;outline:none}.slider::-webkit-slider-thumb{appearance:none;background:var(--amber);border:2px solid var(--bg-panel);cursor:pointer;border-radius:50%;width:12px;height:12px;transition:box-shadow .15s;box-shadow:0 0 6px #c8923a80}.slider::-webkit-slider-thumb:hover{box-shadow:0 0 10px #c8923acc}.slider::-moz-range-thumb{background:var(--amber);border:2px solid var(--bg-panel);cursor:pointer;border-radius:50%;width:12px;height:12px}.ctrl-toggles{flex-direction:column;gap:8px;display:flex}.toggle-label{cursor:pointer;font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);-webkit-user-select:none;user-select:none;align-items:center;gap:9px;font-size:10px;display:flex}.toggle-label:hover{color:var(--text-primary)}.toggle-cb{display:none}.toggle-track{background:var(--border-mid);border:1px solid var(--border-light);border-radius:8px;flex-shrink:0;width:30px;height:16px;transition:background .2s,border-color .2s;position:relative}.toggle-thumb{background:var(--text-muted);border-radius:50%;width:10px;height:10px;transition:left .2s,background .2s;position:absolute;top:2px;left:2px}.toggle-cb:checked+.toggle-track{background:var(--amber-dim);border-color:var(--amber)}.toggle-cb:checked+.toggle-track .toggle-thumb{background:var(--amber);left:16px;box-shadow:0 0 6px #c8923ab3}.btn{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border:1px solid;border-radius:3px;padding:7px 14px;font-size:10px;line-height:1;transition:background .15s,box-shadow .15s,color .15s}.btn-primary{background:var(--amber);color:#0a0c0f;border-color:var(--amber);font-weight:500}.btn-primary:hover{background:var(--amber-light);border-color:var(--amber-light);box-shadow:0 0 12px #c8923a73}.btn-amber{color:var(--amber);border-color:var(--amber);background:0 0}.btn-amber:hover{background:var(--amber-dim);box-shadow:0 0 8px #c8923a4d}.btn-ghost{color:var(--text-muted);border-color:var(--border-light);background:0 0}.btn-ghost:hover{color:var(--text-primary);border-color:var(--border-mid);background:var(--bg-panel-2)}.ctrl-actions{gap:8px;padding:12px 14px 8px;display:flex}.ctrl-actions .btn{flex:1}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--border-light)}