:root{--bg: #0e1015;--panel: #161a22;--panel-2: #1f2530;--fg: #e6e8ee;--muted: #8b93a4;--accent: #7cd1ff;--accent-2: #ffb86b;--live: #6bdc8e;--danger: #ff6b8a;--warn: #ffb86b}*{box-sizing:border-box}html,body{margin:0;background:radial-gradient(1000px 500px at 50% -200px,rgba(124,209,255,.08),transparent 70%),var(--bg);color:var(--fg);font-family:ui-sans-serif,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.4;min-height:100vh}main{max-width:760px;margin:0 auto;padding:36px 24px 80px}header.hero{display:flex;align-items:baseline;gap:16px;margin-bottom:4px}header.hero h1{margin:0;font-size:22px}.block-line{display:flex;gap:10px;align-items:center;color:var(--muted);margin-bottom:24px}.block-line code{font-family:ui-monospace,JetBrains Mono,Menlo,monospace;color:var(--fg);font-size:14px}.live-dot{width:8px;height:8px;border-radius:50%;background:#444;transition:background .2s}.live-dot.on{background:var(--live);box-shadow:0 0 #6bdc8ecc;animation:pulse 1.6s ease-out infinite}@keyframes pulse{0%{box-shadow:0 0 #6bdc8e99}70%{box-shadow:0 0 0 10px #6bdc8e00}to{box-shadow:0 0 #6bdc8e00}}.now{background:var(--panel);border:1px solid #232a36;border-radius:10px;padding:18px 20px;margin-bottom:18px;opacity:.55;transition:opacity .2s}.now.on{opacity:1;border-color:var(--accent)}.now .label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}.now .name{font-size:32px;font-family:ui-monospace,JetBrains Mono,Menlo,monospace;margin:4px 0 12px;word-break:break-word}.now .queue{color:var(--muted);font-size:12px;margin-top:8px;font-family:ui-monospace,Menlo,monospace;min-height:16px}.char-viz{display:flex;flex-wrap:wrap;gap:4px;min-height:40px;font-family:ui-monospace,JetBrains Mono,Menlo,monospace}.char-viz .char{padding:6px 10px;border-radius:6px;background:var(--panel-2);border:1px solid #232a36;color:var(--muted);font-size:18px;transition:background-color 80ms linear,color 80ms linear,border-color 80ms linear,transform 80ms ease-out;white-space:pre}.char-viz .char.active{background:var(--accent);color:#06121c;border-color:var(--accent);transform:translateY(-1px)}.char-viz .char.dim{opacity:.35}.scope{display:block;width:100%;height:100px;margin-top:12px;background:#0a0d12;border:1px solid #232a36;border-radius:8px}.controls{display:flex;gap:10px;align-items:center;margin:18px 0;flex-wrap:wrap}button{padding:12px 18px;border-radius:10px;border:1px solid #2a3140;background:var(--panel-2);color:var(--fg);cursor:pointer;font-size:15px}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);color:#06121c;border-color:transparent;font-weight:600}.hidden{display:none!important}.status{color:var(--muted);font-size:13px;min-height:20px;margin-bottom:18px;font-family:ui-monospace,Menlo,monospace}.status.error{color:var(--danger)}.status.warn{color:var(--warn)}.recent{background:var(--panel);border:1px solid #232a36;border-radius:10px;padding:14px 18px;margin-bottom:18px}.recent h2{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:0 0 10px}.recent ul{list-style:none;margin:0;padding:0}.recent li{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;border-bottom:1px solid #232a36}.recent li:last-child{border-bottom:none}.recent li a{color:var(--accent);font-family:ui-monospace,Menlo,monospace;font-size:14px;text-decoration:none;word-break:break-word}.recent li a:hover{text-decoration:underline}.recent li .meta{color:var(--muted);font-family:ui-monospace,Menlo,monospace;font-size:12px;flex-shrink:0;margin-left:12px}.recent .empty{color:var(--muted);font-size:13px;padding:6px 0}details.settings{background:var(--panel);border:1px solid #232a36;border-radius:10px;padding:12px 18px}details.settings summary{cursor:pointer;color:var(--muted);-webkit-user-select:none;user-select:none}details.settings[open] summary{color:var(--fg)}.field{display:grid;grid-template-columns:130px 1fr 56px;gap:10px;align-items:center;margin-top:12px}.field label{color:var(--muted);font-size:13px}.field input[type=range]{width:100%}.field .val{text-align:right;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--accent)}.field input[type=text]{background:var(--panel-2);border:1px solid #2a3140;color:var(--fg);border-radius:6px;padding:8px 10px;font:inherit;font-family:ui-monospace,Menlo,monospace;font-size:12px;grid-column:2 / span 2}.hint{margin-top:6px;margin-left:140px;color:var(--muted);font-size:12px}
