*{margin:0;padding:0;box-sizing:border-box}:root{color-scheme:dark;--bg: #0e0e12;--panel: #17171f;--border: #2a2a38;--text: #ececf1;--muted: #8f8fa3;--accent: #a970ff;--accent-dim: #7c4dcc}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif}.app{display:grid;grid-template-columns:1fr 280px;grid-template-rows:auto 1fr;grid-template-areas:"header header" "stage queue";height:100vh}.channel-bar{grid-area:header;display:flex;align-items:center;gap:1.5rem;padding:.75rem 1.25rem;background:var(--panel);border-bottom:1px solid var(--border)}.logo{font-size:1.1rem;font-weight:700;color:var(--accent);white-space:nowrap}.channel-form{display:flex;gap:.5rem}.channel-form input{background:var(--bg);border:1px solid var(--border);border-radius:6px;color:var(--text);padding:.45rem .75rem;font-size:.95rem;width:220px}.channel-form input:focus{outline:none;border-color:var(--accent)}.channel-form button,.pick-button{background:var(--accent);color:#fff;border:none;border-radius:6px;padding:.45rem 1rem;font-size:.95rem;font-weight:600;cursor:pointer}.channel-form button:hover,.pick-button:hover{background:var(--accent-dim)}.status{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted);margin-left:auto}.status-dot{width:9px;height:9px;border-radius:50%;background:#666}.status-connected .status-dot{background:#3fca6b}.status-connecting .status-dot{background:#e8b93d;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.3}}.stage{grid-area:stage;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;padding:2rem}.word-display{display:flex;flex-direction:column;align-items:center;gap:.75rem;animation:pop .25s ease-out}@keyframes pop{0%{transform:scale(.85);opacity:0}}.word{font-size:clamp(3rem,10vw,7rem);font-weight:800;letter-spacing:.02em;text-transform:lowercase}.word.placeholder{color:var(--muted)}.attribution{font-size:1.15rem;color:var(--muted)}.attribution strong{color:var(--accent)}.pick-button{font-size:1.15rem;padding:.75rem 2rem;display:flex;align-items:center;gap:.75rem}.pick-button .hint{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;background:#fff3;border-radius:4px;padding:.15rem .4rem}.auto-cycle{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:.5rem;color:var(--muted);font-size:.95rem}.auto-toggle{display:flex;align-items:center;gap:.45rem;cursor:pointer;-webkit-user-select:none;user-select:none}.auto-toggle input{accent-color:var(--accent);width:1rem;height:1rem;cursor:pointer}.auto-slider{width:160px;accent-color:var(--accent);cursor:pointer}.auto-value{min-width:3rem;color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}.family-toggle{color:var(--muted);font-size:.9rem;margin-top:-1rem}.auto-countdown{margin-left:.5rem}.auto-countdown strong{color:var(--accent);font-variant-numeric:tabular-nums}.auto-progress{flex-basis:100%;max-width:320px;margin:.25rem auto 0;height:4px;border-radius:2px;background:var(--border);overflow:hidden}.auto-progress-fill{height:100%;background:var(--accent);transform-origin:left;transition:transform 1s linear}.chat-hint{color:var(--muted);font-size:.9rem}.chat-hint code{background:var(--panel);border:1px solid var(--border);border-radius:4px;padding:.1rem .35rem;color:var(--accent)}.queue{grid-area:queue;background:var(--panel);border-left:1px solid var(--border);padding:1rem;overflow-y:auto}.queue-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.queue-header h2{font-size:.95rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.clear-button{background:none;border:1px solid var(--border);border-radius:4px;color:var(--muted);font-size:.75rem;padding:.2rem .5rem;cursor:pointer}.clear-button:hover{color:var(--text);border-color:var(--muted)}.queue-empty{color:var(--muted);font-size:.9rem}.queue-list{list-style:none;display:flex;flex-direction:column;gap:.4rem}.queue-list li{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.45rem .7rem}.queue-list li:first-child{border-color:var(--accent-dim)}.queue-word{font-weight:600}.queue-user{font-size:.8rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:700px){.app{grid-template-columns:1fr;grid-template-areas:"header" "stage" "queue";grid-template-rows:auto 1fr auto}.queue{border-left:none;border-top:1px solid var(--border);max-height:35vh}}