:root{--bg: #0d0f14;--surface: #161a22;--surface-alt: #1e2430;--border: #2a3240;--text: #e8ecf3;--muted: #94a0b4;--accent: #6c8cff;--danger: #ff6b6b;--ok: #4ade80;--warn: #fbbf24;--radius: 12px;color-scheme:dark}*{box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--border);background:var(--surface-alt);color:var(--text);border-radius:var(--radius);padding:.55rem 1rem;font:inherit;cursor:pointer;min-height:44px}.button:hover:not(:disabled){border-color:var(--accent)}.button:disabled{opacity:.45;cursor:not-allowed}.button--primary{background:var(--accent);border-color:var(--accent);color:#0d0f14;font-weight:600}.button--quiet{background:transparent;color:var(--muted);font-size:.8rem;padding:.35rem .7rem}.button--quiet:hover:not(:disabled){color:var(--text)}.button--danger{border-color:var(--danger);color:var(--danger)}.button--danger:hover:not(:disabled){background:var(--danger);border-color:var(--danger);color:#0d0f14}.gate{min-height:100%;display:grid;place-items:center;padding:1.5rem}.gate__card{width:min(380px,100%);display:flex;flex-direction:column;gap:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.75rem}.gate__title{margin:0;font-size:1.75rem}.gate__subtitle{margin:0 0 .5rem;color:var(--muted)}.gate__error{margin:0;padding:.55rem .75rem;border:1px solid var(--danger);border-radius:var(--radius);color:var(--danger);font-size:.9rem}.gate__input,.chat__input{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:.7rem .9rem;font:inherit;min-height:44px;width:100%}.gate__input:focus-visible,.chat__input:focus-visible,.button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;gap:1rem;padding:1rem}.app__header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}.app__brand{margin:0;font-size:1.25rem;letter-spacing:.02em}.app__meta{display:flex;flex-wrap:wrap;gap:.5rem}.badge{border:1px solid var(--border);border-radius:999px;padding:.2rem .7rem;font-size:.8rem;color:var(--muted);background:var(--surface)}.badge--ok{color:var(--ok);border-color:var(--ok)}.badge--warn{color:var(--warn);border-color:var(--warn)}.app__actions{display:flex;align-items:center;gap:.25rem}.app__confirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;background:var(--surface);border:1px solid var(--danger);border-radius:var(--radius);padding:.75rem 1rem}.app__confirm-text{margin:0;font-size:.9rem}.app__confirm-actions{display:flex;gap:.5rem}.app__error{margin:0;color:var(--danger)}.app__layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:1rem;align-items:stretch;flex:1;min-height:0;overflow:hidden}.app__main{display:flex;flex-direction:column;gap:1rem;min-width:0;min-height:0;overflow:hidden}.app__side{display:flex;min-width:0;min-height:0;height:100%}.player{background:var(--surface);border:1px solid var(--border);border-radius:16px;flex:0 0 auto}.player__stage{position:relative;background:#000;aspect-ratio:16 / 9;border-radius:16px 16px 0 0;overflow:hidden}.player__video{width:100%;height:100%;display:block;object-fit:contain}.player__overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;background:#0d0f14b8;text-align:center;padding:1rem}.player__overlay--idle{color:var(--muted)}.player__overlay--held{background:#0d0f148c;gap:.35rem}.player__held-title{font-size:1.1rem;font-weight:600}.player__held-note{color:var(--muted);font-size:.9rem;max-width:28ch}.player__spinner{width:32px;height:32px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.player__spinner{animation:none}}.player__bar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem}.player__status{color:var(--muted);font-size:.9rem}.player__controls{display:flex;align-items:center;gap:.5rem}.player-settings{position:relative}.player-settings__toggle{padding:.55rem .8rem;font-size:1.15rem;line-height:1}.player-settings__menu{display:flex;flex-direction:column;gap:.75rem;background:var(--surface);border:1px solid var(--border);padding:.75rem}.player-settings__menu--popover{position:absolute;right:0;bottom:calc(100% + .5rem);z-index:25;width:16rem;max-height:min(20rem,50vh);overflow-y:auto;border-radius:var(--radius);box-shadow:0 16px 40px #0000008c}.player-settings__menu--sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;max-height:70dvh;overflow-y:auto;overscroll-behavior:contain;border-top:1px solid var(--border);border-radius:16px 16px 0 0;padding:.75rem .75rem 1.25rem;box-shadow:0 -16px 40px #0000008c}.player-settings__sheet-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.player-settings__sheet-title{font-weight:600}.player-settings__section{display:flex;flex-direction:column;gap:.15rem}.player-settings__section-title{margin:0 0 .15rem;color:var(--muted);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase}.player-settings__option{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:transparent;border:1px solid transparent;border-radius:var(--radius);color:var(--text);font:inherit;font-size:.9rem;padding:.5rem .6rem;min-height:44px;cursor:pointer}.player-settings__option:hover{background:var(--surface-alt)}.player-settings__option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.player-settings__option--active{border-color:var(--accent)}.player-settings__check{flex:0 0 1rem;color:var(--accent);text-align:center}.player-settings__option-label{overflow-wrap:anywhere}.catalogue{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.5rem;min-height:0;overflow-y:auto}.catalogue__item{display:flex;align-items:center;gap:.6rem;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:.6rem .75rem;font:inherit;cursor:pointer;min-height:44px}.catalogue__item:disabled{opacity:.4;cursor:not-allowed}.catalogue__item--active{border-color:var(--accent)}.catalogue__order{color:var(--muted);font-variant-numeric:tabular-nums}.catalogue__title{font-size:.9rem;overflow-wrap:anywhere}.catalogue-sheet{flex:0 0 auto}.catalogue-sheet__summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:.55rem .9rem;min-height:44px;cursor:pointer;list-style:none}.catalogue-sheet__summary::-webkit-details-marker{display:none}.catalogue-sheet__summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.catalogue-sheet__label{color:var(--muted);font-size:.85rem;white-space:nowrap}.catalogue-sheet__current{font-weight:600;text-align:right;overflow-wrap:anywhere}.catalogue-sheet__current:after{content:" ▾";color:var(--muted)}.catalogue-sheet[open] .catalogue-sheet__current:after{content:" ▴"}.catalogue-sheet__panel{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;flex-direction:column;gap:.5rem;max-height:70dvh;overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border-top:1px solid var(--border);border-radius:16px 16px 0 0;padding:.75rem;box-shadow:0 -16px 40px #0000008c}.catalogue-sheet__panel-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.catalogue-sheet__panel-title{font-weight:600}.catalogue--sheet{grid-template-columns:minmax(0,1fr);overflow-y:visible}.chat{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:16px;flex:1;width:100%;height:100%;min-height:0;overflow:hidden}.chat__header{padding:.75rem 1rem;border-bottom:1px solid var(--border);font-weight:600}.chat__stream{position:relative;flex:1;min-height:0;display:flex}.chat__messages{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}.chat__jump{position:absolute;left:50%;bottom:.75rem;transform:translate(-50%);border:1px solid var(--accent);background:var(--accent);color:#0d0f14;border-radius:999px;padding:.35rem .9rem;font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;box-shadow:0 6px 18px #00000073}.chat__empty{color:var(--muted);margin:auto}.chat__message{background:var(--surface-alt);border-radius:var(--radius);padding:.5rem .7rem;max-width:85%}.chat__message--own{align-self:flex-end;background:#24304d}.chat__author{font-size:.75rem;color:var(--muted)}.chat__body{margin:.15rem 0;overflow-wrap:anywhere}.chat__time{font-size:.7rem;color:var(--muted)}.chat__composer-shell{position:relative;border-top:1px solid var(--border)}.chat__composer{display:flex;align-items:center;gap:.5rem;padding:.75rem}.chat__icon-button{flex:0 0 auto;padding:.55rem .7rem;line-height:1}.chat__alert{display:flex;align-items:center;gap:.5rem;margin:0;padding:.5rem .75rem;font-size:.85rem;color:var(--danger)}.chat__alert--muted{color:var(--muted)}.chat__retry{border:1px solid var(--border);background:var(--surface-alt);color:var(--text);border-radius:999px;padding:.15rem .7rem;font:inherit;font-size:.8rem;cursor:pointer}.chat__recorder{display:flex;flex:1;align-items:center;gap:.5rem;min-width:0}.chat__rec-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:pulse 1.2s ease-in-out infinite}.chat__rec-time{font-variant-numeric:tabular-nums;color:var(--muted)}@keyframes pulse{50%{opacity:.25}}@media(prefers-reduced-motion:reduce){.chat__rec-dot{animation:none}}.audio{display:flex;align-items:center;gap:.5rem;margin:.25rem 0;min-width:190px}.audio__toggle{flex:0 0 auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:.75rem;line-height:1;cursor:pointer}.audio__track{flex:1;height:6px;border-radius:999px;background:var(--border);cursor:pointer;touch-action:none}.audio__track:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.audio__progress{height:100%;border-radius:999px;background:var(--accent)}.audio__time{flex:0 0 auto;font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}.emoji-popover{position:absolute;bottom:calc(100% + .5rem);right:.75rem;z-index:20;border-radius:12px;overflow:hidden;box-shadow:0 16px 40px #0000008c}.emoji-popover__picker{--background: var(--surface);--border-color: var(--border);--button-active-background: var(--surface-alt);--button-hover-background: var(--surface-alt);--category-font-color: var(--muted);--indicator-color: var(--accent);--input-border-color: var(--border);--input-font-color: var(--text);--input-placeholder-color: var(--muted);--outline-color: var(--accent);--num-columns: 8;height:320px;width:300px;max-width:100%}@media(max-width:900px){.app__layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}.app__main{min-height:0;overflow:visible}.app__side{min-height:0}.player__stage{max-height:45vh;max-height:45dvh}.emoji-popover{left:.75rem;right:.75rem}.emoji-popover__picker{width:100%;height:300px}}