:root{--bg:#0a0a0a;--panel:#141414;--panel-2:#1c1c1c;--border:#262626;--text:#e6e6e6;--text-dim:#888;--accent:#0f8;--radius:8px;--gap:12px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0}button{font:inherit;cursor:pointer}h1,h2,h3{margin:0;font-weight:600}.app{grid-template-columns:300px 1fr;height:100vh;display:grid;position:relative;overflow:hidden}.controls{background:var(--panel);border-right:1px solid var(--border);flex-direction:row;min-width:0;display:flex;overflow:hidden}.rail{background:var(--panel-2);gap:8px;display:none}.rail-btn{background:var(--panel);border:1px solid var(--border);min-width:56px;min-height:44px;color:var(--text);text-transform:lowercase;cursor:pointer;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:4px 10px;font-size:12px;font-weight:500;transition:background .12s,border-color .12s,color .12s;display:flex}.rail-btn:active:not(:disabled){background:#222}.rail-btn:disabled{opacity:.35;cursor:not-allowed}.rail-btn.recording{color:#f66;border-color:#ff3b3b}.rail-btn.recording .rec-dot{animation:1s ease-in-out infinite pulse}.rail-time{font-variant-numeric:tabular-nums;color:#f99;font-size:10px}.controls-panel{flex-direction:column;flex:1;gap:22px;min-width:0;padding:20px;display:flex;overflow:hidden auto}.controls-panel>.control-group:last-child{margin-top:auto;padding-top:12px}.controls-header h1{letter-spacing:-.01em;font-size:20px}.controls-header .subtitle{color:var(--text-dim);margin:2px 0 0;font-size:13px}.control-group{flex-direction:column;gap:10px;display:flex}.control-group h2{letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-size:11px;font-weight:500}.btn{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);text-align:center;padding:8px 12px;font-size:13px;transition:border-color .12s,background .12s}.btn:hover{border-color:#444}.btn.active{border-color:var(--accent);color:var(--accent)}.btn.primary{background:var(--accent);color:#000;border-color:var(--accent);font-weight:600}.btn.primary:hover{filter:brightness(1.1)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn.record{justify-content:center;align-items:center;gap:6px;display:inline-flex}.btn.record.recording{color:#f66;border-color:#ff3b3b}.rec-dot{background:#ff3b3b;border-radius:50%;width:8px;height:8px;display:inline-block}.rec-dot.idle{background:#666}.btn.record.recording .rec-dot{animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.75)}}.button-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.button-stack-half{flex-direction:column;gap:8px;width:calc(50% - 4px);display:flex}.full-width{width:100%;margin-top:8px}select,.text-input{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);font:inherit;width:100%;padding:8px 10px;font-size:13px}.color-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.color-row label{color:var(--text-dim);flex-direction:column;gap:6px;font-size:12px;display:flex}.color-row input[type=color]{border:1px solid var(--border);border-radius:var(--radius);background:var(--panel-2);cursor:pointer;width:100%;height:36px;padding:2px}.slider{flex-direction:column;gap:4px;display:flex}.slider-top{justify-content:space-between;font-size:12px;display:flex}.slider-top span:first-child{color:var(--text)}.slider-value{color:var(--text-dim);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--accent)}.stage{min-width:0;position:relative;overflow:hidden}.m-controls{display:none}@media (width<=640px){.app{grid-template-columns:1fr}.controls{display:none}.stage{margin-bottom:calc(108px + env(safe-area-inset-bottom,0))}.rail{border-top:1px solid var(--border);z-index:25;padding:8px 12px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0));height:calc(64px + env(safe-area-inset-bottom,0));flex-direction:row;justify-content:space-around;align-items:center;display:flex;position:fixed;bottom:0;left:0;right:0}.rail-btn{flex:1;max-width:80px}.m-controls{left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom,0));z-index:24;display:block;position:fixed}.m-chips{-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border);scrollbar-width:none;background:#141414eb;flex-direction:row;gap:6px;padding:6px 12px;display:flex;overflow:auto hidden}.m-chips::-webkit-scrollbar{display:none}.m-chip{background:var(--panel);border:1px solid var(--border);min-height:36px;color:var(--text);text-transform:lowercase;cursor:pointer;white-space:nowrap;border-radius:999px;flex:none;align-items:center;gap:6px;padding:0 12px;font-size:12px;font-weight:500;transition:background .12s,border-color .12s,color .12s;display:inline-flex}.m-chip.active{border-color:var(--accent);color:var(--accent)}.m-chip-icon{justify-content:center;width:36px;padding:0}.m-swatch{border:1px solid #ffffff40;border-radius:50%;width:14px;height:14px}.m-input-overlay{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.m-chip-select{appearance:none;text-overflow:ellipsis;white-space:nowrap;background-image:linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);background-position:calc(100% - 14px),calc(100% - 9px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;max-width:130px;padding-right:26px;font-family:inherit;overflow:hidden}label.m-chip{position:relative}.m-slider-strip{-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border);background:#141414eb;padding:10px 14px 12px}.m-slider{flex-direction:column;gap:6px;display:flex}.m-slider-head{color:var(--text);align-items:center;gap:8px;font-size:12px;display:flex}.m-slider-val{color:var(--text-dim);font-variant-numeric:tabular-nums;margin-left:auto}.m-slider-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;padding:0 4px;font-size:20px;line-height:1}.m-slider input[type=range]{width:100%;accent-color:var(--accent)}}.ascii-canvas-wrap{width:100%;height:100%}.ascii-canvas{width:100%;height:100%;display:block}.offscreen{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute;left:-9999px}.welcome{color:var(--text-dim);flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex;position:absolute;inset:0}.welcome h2{color:var(--text);font-size:18px}.welcome p{margin:0;font-size:14px}.error-toast{color:#ff8080;border-radius:var(--radius);background:#2a1515;border:1px solid #522;padding:8px 14px;font-size:13px;position:absolute;top:16px;left:50%;transform:translate(-50%)}.thanks-backdrop{z-index:100;background:#0009;justify-content:center;align-items:center;animation:.14s ease-out fadeIn;display:flex;position:fixed;inset:0}.thanks-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;width:min(380px,90vw);padding:28px 28px 24px;animation:.18s cubic-bezier(.34,1.56,.64,1) popIn;position:relative;box-shadow:0 20px 60px #00000080}.thanks-card h2{margin:0 0 8px;font-size:22px}.thanks-card p{color:var(--text-dim);margin:0 0 18px;font-size:14px;line-height:1.45}.thanks-card strong{color:var(--accent);font-weight:500}.thanks-links{flex-direction:column;gap:8px;display:flex}.thanks-links .btn{text-decoration:none;transition:border-color .16s,color .16s,background .16s,box-shadow .16s}.thanks-links .btn:hover{border-color:var(--accent);color:var(--accent);box-shadow:0 0 14px color-mix(in srgb, var(--accent) 55%, transparent)}.thanks-close{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:22px;line-height:1;position:absolute;top:10px;right:12px}.thanks-close:hover{color:var(--text);background:var(--panel-2)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}