:root{--bg: #0a0a09;--surface: #121210;--border: #2b2a26;--border-bright: #46443c;--text: #f0ede4;--text-dim: #8a877d;--accent: #ffb300;--accent-dim: #4a3300;--danger: #ff6b5e;--radius: 3px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace}.app{max-width:1100px;margin:0 auto;padding:32px 20px 40px;display:flex;flex-direction:column;gap:24px;min-height:100vh}.app-header h1{margin:0;font-size:1.5rem;font-weight:600;letter-spacing:-.01em}.app-header .prompt{color:var(--accent)}.app-header .cursor{color:var(--accent);animation:blink 1.1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.app-header .tagline{margin:6px 0 0;color:var(--text-dim);font-size:.85rem}.stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;align-items:start}.canvas-wrap{position:relative;min-width:0;width:100%;aspect-ratio:4 / 3;background:#000;border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;display:flex;align-items:center;justify-content:center;cursor:pointer}#asciiCanvas{width:100%;height:100%;display:block}.drop-hint,.permission-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:var(--text-dim);background:var(--bg);pointer-events:none;font-size:.85rem}.permission-fallback{flex-direction:column;gap:6px}.permission-sub{font-size:.8rem;margin:0}[hidden]{display:none!important}.flip-btn{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:1px solid var(--border-bright);background:#0a0a09b8;color:var(--text);font-size:1.2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.flip-btn:hover{border-color:var(--accent);color:var(--accent)}.flip-btn:active{transform:scale(.94)}@media (min-width: 721px){.mobile-only{display:none!important}}.controls{min-width:0;display:flex;flex-direction:column;gap:22px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.control-section{display:flex;flex-direction:column;gap:12px}.section-title{margin:0;font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);padding-bottom:8px}.control-group{display:flex;gap:8px;flex-wrap:wrap}.control-row{display:flex;flex-direction:column;gap:6px;font-size:.8rem}.control-row>label{color:var(--text-dim)}.control-row-head{display:flex;justify-content:space-between;align-items:baseline}.control-row-head label{color:var(--text-dim)}.control-value{color:var(--accent);font-size:.8rem;font-variant-numeric:tabular-nums}.toggle-list{display:flex;flex-direction:column;gap:2px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:.85rem;cursor:pointer}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:2px;background:var(--border-bright);border-radius:999px;outline:none}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg)}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg)}input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;border:1px solid var(--border-bright);border-radius:2px;background:transparent;cursor:pointer;position:relative}input[type=checkbox]:checked{background:var(--accent-dim);border-color:var(--accent)}input[type=checkbox]:checked:after{content:"";position:absolute;inset:3px;background:var(--accent);border-radius:1px}input[type=text]{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:var(--radius);padding:9px 10px;font-family:inherit;font-size:.85rem;width:100%}input[type=text]:focus,input[type=range]:focus-visible,.btn:focus-visible,.flip-btn:focus-visible{outline:1px solid var(--accent);outline-offset:2px}.btn{flex:1 1 auto;background:transparent;color:var(--text);border:1px solid var(--border-bright);border-radius:var(--radius);padding:10px 12px;font-family:inherit;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;transition:border-color .12s ease,background .12s ease,color .12s ease}.btn:hover{border-color:var(--accent);color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#1a1200;font-weight:600}.btn.primary:hover{background:#ffc633;color:#1a1200}.btn.stop{border-color:var(--danger);color:var(--danger)}.btn.stop:hover{background:var(--danger);color:#1a0a08}.status{min-height:1.2em;font-size:.75rem;color:var(--text-dim);margin:0}.status.error{color:var(--danger)}.app-footer{text-align:center;color:var(--text-dim);font-size:.75rem}@media (max-width: 720px){.app{padding:20px 16px 32px}.stage{grid-template-columns:1fr}}