.watch-room-tool,.watch-room-tool *{box-sizing:border-box}.watch-room-tool{--wr-bg: var(--tt-bg, oklch(97% .008 255));--wr-surface: var(--tt-surface, oklch(99% .004 255));--wr-surface-muted: var(--tt-surface-muted, oklch(94% .012 255));--wr-ink: var(--tt-ink, oklch(22% .025 255));--wr-muted: var(--tt-muted, oklch(48% .025 255));--wr-line: var(--tt-line, oklch(86% .016 255));--wr-accent: var(--tt-accent, oklch(52% .14 250));--wr-accent-strong: var(--tt-accent-strong, oklch(43% .15 250));--wr-accent-soft: var(--tt-accent-soft, oklch(93% .035 250));--wr-danger: var(--tt-danger, oklch(52% .17 28));--wr-danger-soft: var(--tt-danger-soft, oklch(95% .025 28));width:100%;color:var(--wr-ink);font:inherit;container:watch-room / inline-size}.watch-room-tool button,.watch-room-tool input{min-height:2.75rem;border-radius:.5rem;font:inherit}.watch-room-tool button,.watch-room-tool a{-webkit-tap-highlight-color:transparent}.watch-room-tool button{cursor:pointer}.watch-room-tool button:disabled{cursor:not-allowed;opacity:.52}.watch-room-tool button:focus-visible,.watch-room-tool input:focus-visible,.watch-room-tool a:focus-visible,.watch-room-tool label:has(input:focus-visible){outline:.1875rem solid color-mix(in oklch,var(--wr-accent) 42%,transparent);outline-offset:.125rem}.watch-room-tool input{width:100%;border:.0625rem solid var(--wr-line);background:var(--wr-surface);color:var(--wr-ink);padding:.625rem .75rem}.watch-room-tool input::placeholder{color:var(--wr-muted);opacity:1}.watch-room-tool input:hover{border-color:color-mix(in oklch,var(--wr-muted) 70%,var(--wr-line))}.watch-room-tool input:focus-visible{border-color:var(--wr-accent)}.watch-room-tool .watch-room-tool__lobby{display:grid;gap:2rem;max-width:48rem;margin-inline:auto}.watch-room-tool .watch-room-tool__lobby-note{display:flex;align-items:center;gap:.625rem;min-height:2.75rem;border-block:.0625rem solid var(--wr-line);color:var(--wr-muted);font-size:.875rem}.watch-room-tool .watch-room-tool__lobby-note>span{width:.5rem;height:.5rem;border-radius:50%;background:var(--wr-accent)}.watch-room-tool .watch-room-tool__lobby-form{display:grid;gap:1.5rem}.watch-room-tool .watch-room-tool__field{display:grid;gap:.5rem}.watch-room-tool .watch-room-tool__field>label,.watch-room-tool .watch-room-tool__youtube-form>label,.watch-room-tool .watch-room-tool__chat-form>label{color:var(--wr-ink);font-size:.875rem;font-weight:650}.watch-room-tool .watch-room-tool__field>p{margin:0;color:var(--wr-muted);font-size:.875rem;line-height:1.5}.watch-room-tool .watch-room-tool__field--code input{font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.watch-room-tool .watch-room-tool__mode-picker{display:grid;gap:.75rem;min-width:0;margin:0;padding:0;border:0}.watch-room-tool .watch-room-tool__mode-picker>legend{margin-bottom:.5rem;padding:0;font-size:.875rem;font-weight:650}.watch-room-tool .watch-room-tool__mode-option{position:relative;display:flex;min-height:5rem;align-items:center;gap:.75rem;border:.0625rem solid var(--wr-line);border-radius:.625rem;background:var(--wr-surface);padding:.875rem;cursor:pointer}.watch-room-tool .watch-room-tool__mode-option:hover{border-color:color-mix(in oklch,var(--wr-accent) 50%,var(--wr-line))}.watch-room-tool .watch-room-tool__mode-option:has(input:checked){border-color:var(--wr-accent);background:var(--wr-accent-soft)}.watch-room-tool .watch-room-tool__mode-option:has(input:disabled){cursor:not-allowed;opacity:.55}.watch-room-tool .watch-room-tool__mode-option>input{flex:0 0 auto;width:1.125rem;min-height:1.125rem;margin:0;accent-color:var(--wr-accent)}.watch-room-tool .watch-room-tool__mode-option>span{display:grid;min-width:0;gap:.25rem}.watch-room-tool .watch-room-tool__mode-option strong{font-size:1rem}.watch-room-tool .watch-room-tool__mode-option small{color:var(--wr-muted);font-size:.8125rem;line-height:1.4}.watch-room-tool .watch-room-tool__primary{display:flex;width:100%;align-items:center;justify-content:center;gap:.625rem;border:.0625rem solid var(--wr-accent-strong);background:var(--wr-accent);color:#f5f9fc;padding:.75rem 1rem;font-weight:700}.watch-room-tool .watch-room-tool__primary:hover{background:var(--wr-accent-strong)}.watch-room-tool .watch-room-tool__primary:active{transform:translateY(.0625rem)}.watch-room-tool .watch-room-tool__primary svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.watch-room-tool .watch-room-tool__error{margin:-.5rem 0 0;border:.0625rem solid color-mix(in oklch,var(--wr-danger) 35%,var(--wr-line));border-radius:.5rem;background:var(--wr-danger-soft);color:var(--wr-danger);padding:.75rem;font-size:.875rem;line-height:1.5}.watch-room-tool .watch-room-tool__disclosure{display:grid;gap:0;margin:0;border-top:.0625rem solid var(--wr-line)}.watch-room-tool .watch-room-tool__disclosure>div{display:grid;gap:.25rem;border-bottom:.0625rem solid var(--wr-line);padding-block:1rem}.watch-room-tool .watch-room-tool__disclosure dt{font-size:.8125rem;font-weight:700}.watch-room-tool .watch-room-tool__disclosure dd{margin:0;color:var(--wr-muted);font-size:.875rem;line-height:1.55}.watch-room-tool .watch-room-tool__state{display:grid;max-width:38rem;min-height:22rem;place-content:center;justify-items:start;gap:.75rem;margin-inline:auto;border-block:.0625rem solid var(--wr-line);padding:2rem 0}.watch-room-tool .watch-room-tool__state>span{width:.75rem;height:.75rem;border-radius:50%;background:var(--wr-danger)}.watch-room-tool .watch-room-tool__state>span.is-loading{background:var(--wr-accent);animation:watch-room-pulse 1.2s ease-in-out infinite}.watch-room-tool .watch-room-tool__state>p{margin:0;color:var(--wr-muted);font-size:.8125rem;font-weight:700;letter-spacing:.08em}.watch-room-tool .watch-room-tool__state>h2{max-width:30ch;margin:0;font-size:1.25rem;line-height:1.45}.watch-room-tool .watch-room-tool__state>a{display:inline-flex;min-height:2.75rem;align-items:center;color:var(--wr-accent-strong);font-weight:700;text-underline-offset:.2em}.watch-room-tool .watch-room-tool__live{display:grid;gap:1rem;min-width:0}.watch-room-tool .watch-room-tool__room-bar{display:grid;gap:.75rem;border-block:.0625rem solid var(--wr-line);padding-block:.75rem}.watch-room-tool .watch-room-tool__room-bar>div:first-child{display:flex;align-items:center;gap:.5rem}.watch-room-tool .watch-room-tool__room-bar>div:first-child p{margin:0;color:var(--wr-muted);font-size:.8125rem;font-weight:650}.watch-room-tool .watch-room-tool__live-dot{width:.5rem;height:.5rem;border-radius:50%;background:#20a04e}.watch-room-tool .watch-room-tool__invite{display:flex;min-width:0;align-items:center;gap:.5rem}.watch-room-tool .watch-room-tool__invite>span{color:var(--wr-muted);font-size:.75rem}.watch-room-tool .watch-room-tool__invite>strong{color:var(--wr-ink);font-size:1rem;font-variant-numeric:tabular-nums;letter-spacing:.12em}.watch-room-tool .watch-room-tool__invite>button,.watch-room-tool .watch-room-tool__leave,.watch-room-tool .watch-room-tool__sync-row button,.watch-room-tool .watch-room-tool__youtube-form button,.watch-room-tool .watch-room-tool__chat-form button{border:.0625rem solid var(--wr-line);background:var(--wr-surface);color:var(--wr-ink);padding:.5rem .75rem;font-size:.875rem;font-weight:650}.watch-room-tool .watch-room-tool__invite>button:hover,.watch-room-tool .watch-room-tool__sync-row button:hover,.watch-room-tool .watch-room-tool__youtube-form button:hover,.watch-room-tool .watch-room-tool__chat-form button:hover{border-color:var(--wr-accent);color:var(--wr-accent-strong)}.watch-room-tool .watch-room-tool__leave{justify-self:start;border-color:color-mix(in oklch,var(--wr-danger) 35%,var(--wr-line));color:var(--wr-danger)}.watch-room-tool .watch-room-tool__leave:hover{background:var(--wr-danger-soft)}.watch-room-tool .watch-room-tool__room-notice{display:flex;align-items:center;justify-content:space-between;gap:.75rem;border:.0625rem solid var(--wr-line);border-radius:.5rem;background:var(--wr-accent-soft);padding:.5rem .75rem}.watch-room-tool .watch-room-tool__room-notice.is-error{border-color:color-mix(in oklch,var(--wr-danger) 35%,var(--wr-line));background:var(--wr-danger-soft);color:var(--wr-danger)}.watch-room-tool .watch-room-tool__room-notice p{margin:0;font-size:.875rem;line-height:1.45}.watch-room-tool .watch-room-tool__room-notice button{flex:0 0 2.75rem;border:0;background:transparent;color:currentColor;font-size:1.25rem}.watch-room-tool .watch-room-tool__live-grid{display:grid;min-width:0;gap:1rem}.watch-room-tool .watch-room-tool__stage,.watch-room-tool .watch-room-tool__participants,.watch-room-tool .watch-room-tool__chat{min-width:0;border:.0625rem solid var(--wr-line);border-radius:.625rem;background:var(--wr-surface)}.watch-room-tool .watch-room-tool__stage{display:grid;align-content:start;gap:1rem;padding:1rem}.watch-room-tool .watch-room-tool__section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.watch-room-tool .watch-room-tool__section-head>div{display:grid;gap:.125rem}.watch-room-tool .watch-room-tool__section-head p,.watch-room-tool .watch-room-tool__section-head h2{margin:0}.watch-room-tool .watch-room-tool__section-head p{color:var(--wr-muted);font-size:.75rem}.watch-room-tool .watch-room-tool__section-head h2{font-size:1.25rem;letter-spacing:-.02em}.watch-room-tool .watch-room-tool__section-head>span{border:.0625rem solid var(--wr-line);border-radius:999px;color:var(--wr-muted);padding:.25rem .5rem;font-size:.6875rem;font-weight:700}.watch-room-tool .watch-room-tool__section-head--compact{border-bottom:.0625rem solid var(--wr-line);padding:.875rem 1rem}.watch-room-tool .watch-room-tool__section-head--compact h2{font-size:1rem}.watch-room-tool .watch-room-tool__youtube-form{display:grid;gap:.5rem}.watch-room-tool .watch-room-tool__youtube-form>div,.watch-room-tool .watch-room-tool__chat-form>div{display:grid;gap:.5rem}.watch-room-tool .watch-room-tool__player-wrap{overflow:hidden;border-radius:.5rem;background:#0c1219;aspect-ratio:16 / 9}.watch-room-tool .watch-room-tool__player{width:100%;height:100%}.watch-room-tool .watch-room-tool__player iframe{display:block;width:100%;height:100%;border:0}.watch-room-tool .watch-room-tool__player-empty{display:grid;height:100%;place-content:center;justify-items:center;gap:.5rem;color:#d9dfe6;padding:1.25rem;text-align:center}.watch-room-tool .watch-room-tool__player-empty>span{display:grid;width:2.75rem;height:2.75rem;place-items:center;border:.0625rem solid oklch(50% .02 255);border-radius:50%;color:#9bbbdd;padding-left:.125rem}.watch-room-tool .watch-room-tool__player-empty strong{font-size:1rem}.watch-room-tool .watch-room-tool__player-empty p{max-width:38ch;margin:0;color:#979faa;font-size:.8125rem;line-height:1.5}.watch-room-tool .watch-room-tool__sync-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.watch-room-tool .watch-room-tool__sync-row p{margin:0;color:var(--wr-muted);font-size:.8125rem;line-height:1.4}.watch-room-tool .watch-room-tool__side{display:grid;min-width:0;gap:1rem}.watch-room-tool .watch-room-tool__participants>ul{display:grid;max-height:14rem;gap:0;overflow-y:auto;margin:0;padding:.375rem 1rem;list-style:none}.watch-room-tool .watch-room-tool__participants li{display:grid;grid-template-columns:2.25rem minmax(0,1fr) .5rem;align-items:center;gap:.625rem;min-height:3.5rem;border-bottom:.0625rem solid var(--wr-line)}.watch-room-tool .watch-room-tool__participants li:last-child{border-bottom:0}.watch-room-tool .watch-room-tool__avatar{display:grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:50%;background:var(--wr-accent-soft);color:var(--wr-accent-strong);font-size:.8125rem;font-weight:750}.watch-room-tool .watch-room-tool__participants li>span:nth-child(2){display:grid;min-width:0;gap:.125rem}.watch-room-tool .watch-room-tool__participants li strong{overflow:hidden;font-size:.875rem;text-overflow:ellipsis;white-space:nowrap}.watch-room-tool .watch-room-tool__participants li small{color:var(--wr-muted);font-size:.6875rem}.watch-room-tool .watch-room-tool__participants li>i{width:.5rem;height:.5rem;border-radius:50%;background:var(--wr-line)}.watch-room-tool .watch-room-tool__participants li>i.is-connected{background:#20a04e}.watch-room-tool .watch-room-tool__chat{display:grid;grid-template-rows:auto minmax(12rem,1fr) auto;min-height:24rem}.watch-room-tool .watch-room-tool__messages{display:grid;align-content:start;gap:.75rem;overflow-y:auto;margin:0;padding:1rem;list-style:none}.watch-room-tool .watch-room-tool__messages>li{display:grid;gap:.25rem;max-width:92%;justify-self:start}.watch-room-tool .watch-room-tool__messages>li.is-mine{justify-self:end}.watch-room-tool .watch-room-tool__messages>li>div{display:flex;align-items:baseline;gap:.375rem}.watch-room-tool .watch-room-tool__messages>li.is-mine>div{justify-content:flex-end}.watch-room-tool .watch-room-tool__messages strong{font-size:.75rem}.watch-room-tool .watch-room-tool__messages time{color:var(--wr-muted);font-size:.625rem;font-variant-numeric:tabular-nums}.watch-room-tool .watch-room-tool__messages>li>p{margin:0;border:.0625rem solid var(--wr-line);border-radius:.5rem;background:var(--wr-surface-muted);padding:.5rem .625rem;font-size:.875rem;line-height:1.5;overflow-wrap:anywhere;white-space:pre-wrap}.watch-room-tool .watch-room-tool__messages>li.is-mine>p{border-color:color-mix(in oklch,var(--wr-accent) 30%,var(--wr-line));background:var(--wr-accent-soft)}.watch-room-tool .watch-room-tool__messages>li.watch-room-tool__messages-empty{max-width:none;align-self:center;justify-self:center;color:var(--wr-muted);text-align:center}.watch-room-tool .watch-room-tool__messages>li.watch-room-tool__messages-empty>p{border:0;background:transparent;padding:0;font-size:.75rem}.watch-room-tool .watch-room-tool__chat-form{display:grid;gap:.375rem;border-top:.0625rem solid var(--wr-line);padding:.75rem}.watch-room-tool .watch-room-tool__chat-form>label{position:absolute;width:.0625rem;height:.0625rem;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@container watch-room (min-width: 34rem){.watch-room-tool .watch-room-tool__mode-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.watch-room-tool .watch-room-tool__mode-picker>legend{grid-column:1 / -1}.watch-room-tool .watch-room-tool__disclosure>div{grid-template-columns:6rem minmax(0,1fr);gap:1rem}.watch-room-tool .watch-room-tool__room-bar{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}.watch-room-tool .watch-room-tool__invite{justify-self:center}.watch-room-tool .watch-room-tool__leave{justify-self:end}.watch-room-tool .watch-room-tool__youtube-form>div,.watch-room-tool .watch-room-tool__chat-form>div{grid-template-columns:minmax(0,1fr) auto}}@container watch-room (min-width: 62rem){.watch-room-tool .watch-room-tool__live-grid{grid-template-columns:minmax(0,1fr) 20rem;align-items:stretch}.watch-room-tool .watch-room-tool__stage{padding:1.25rem}.watch-room-tool .watch-room-tool__side{grid-template-rows:auto minmax(0,1fr)}.watch-room-tool .watch-room-tool__chat{min-height:0;max-height:42rem}}@media(prefers-color-scheme:dark){.watch-room-tool{--wr-bg: var(--tt-bg, oklch(16% .014 255));--wr-surface: var(--tt-surface, oklch(20% .016 255));--wr-surface-muted: var(--tt-surface-muted, oklch(24% .018 255));--wr-ink: var(--tt-ink, oklch(91% .012 255));--wr-muted: var(--tt-muted, oklch(70% .02 255));--wr-line: var(--tt-line, oklch(32% .018 255));--wr-accent: var(--tt-accent, oklch(68% .12 250));--wr-accent-strong: var(--tt-accent-strong, oklch(78% .09 250));--wr-accent-soft: var(--tt-accent-soft, oklch(28% .045 250));--wr-danger: var(--tt-danger, oklch(72% .13 28));--wr-danger-soft: var(--tt-danger-soft, oklch(27% .04 28))}}@media(prefers-reduced-motion:reduce){.watch-room-tool .watch-room-tool__state>span.is-loading{animation:none}}@keyframes watch-room-pulse{0%,to{opacity:.38;transform:scale(.86)}50%{opacity:1;transform:scale(1)}}