@font-face { font-family: "Mayo Display"; src: url('/assets/oswald-variable.woff2') format('woff2'); font-style: normal; font-weight: 200 700; font-display: swap; }

:root {
  --ink: #171714;
  --paper: #f7f1df;
  --cream: #fffaf0;
  --yellow: #f4c943;
  --yellow-hot: #ffd84d;
  --brown: #876b31;
  --muted: #766f60;
  --line: rgba(23, 23, 20, .16);
  --green: #16865b;
  --red: #c94432;
  --radius: 18px;
  --field: #fff;
  --room-bg: #ede7d6;
  --soft: #eee8d7;
  --music-bg: #f7f1df;
  --music-fg: #171714;
  --music-panel: #fffaf0;
  --music-queue: #ede7d6;
  --music-muted: #766f60;
  --music-line: rgba(23,23,20,.16);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f7f1df;
  --paper: #151512;
  --cream: #22221e;
  --brown: #f4c943;
  --muted: #bcb5a5;
  --line: rgba(255,255,255,.16);
  --green: #64d598;
  --red: #ff7968;
  --field: #2b2b25;
  --room-bg: #151512;
  --soft: #2b2b25;
  --music-bg: #151512;
  --music-fg: #fffaf0;
  --music-panel: #22221e;
  --music-queue: #151512;
  --music-muted: #bcb5a5;
  --music-line: rgba(255,255,255,.16);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--paper); }
body { min-height: 100%; margin: 0; color: var(--ink); background: var(--paper); font-family: "Segoe UI", Arial, sans-serif; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

.home-view { min-height: 100svh; overflow: hidden; }
.home-nav { position: absolute; z-index: 5; top: 0; left: 0; right: 0; height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 70px); }
.nav-actions { display: flex; align-items: center; gap: 22px; }
.wordmark, .room-brand { display: inline-flex; align-items: center; gap: 11px; font-family: Impact, "Arial Black", sans-serif; letter-spacing: -.02em; }
.wordmark img { width: 46px; height: 46px; object-fit: cover; object-position: 50% 10%; border-radius: 50%; background: var(--yellow); border: 2px solid var(--ink); }
.wordmark span { font-size: 19px; }
.text-action { padding: 10px 0; border: 0; border-bottom: 2px solid var(--ink); background: transparent; font-weight: 800; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 13px; border: 1.5px solid var(--ink); border-radius: 999px; background: transparent; font-size: 11px; font-weight: 800; }
.theme-toggle [data-theme-icon] { font-size: 15px; line-height: 1; }
html[data-theme="dark"] .home-nav .text-action, html[data-theme="dark"] .home-nav .theme-toggle { color: #171714; border-color: #171714; }
html[data-theme="dark"] .home-nav .wordmark { color: #f7f1df; }

.hero { position: relative; min-height: min(860px, 100svh); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr); align-items: center; overflow: hidden; padding: 110px clamp(24px, 7vw, 120px) 110px; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(circle at 77% 42%, #fff7c5 0 12%, transparent 36%), linear-gradient(118deg, var(--paper) 0 54%, var(--yellow) 54% 100%); }
.hero::after { content: ""; position: absolute; z-index: -1; width: 66vw; height: 66vw; max-width: 920px; max-height: 920px; right: -20vw; top: 50%; transform: translateY(-50%); border: 2px solid rgba(23,23,20,.14); border-radius: 50%; box-shadow: 0 0 0 80px rgba(255,255,255,.12), 0 0 0 160px rgba(255,255,255,.08); }
.hero-copy { position: relative; z-index: 2; max-width: 760px; animation: introUp .7s cubic-bezier(.2,.8,.2,1) both; }
.eyebrow { margin: 0 0 18px; color: var(--brown); font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.hero h1, .music-intro h1 { margin: 0; max-width: 860px; font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: clamp(56px, 7.25vw, 118px); font-weight: 540; line-height: 1.04; letter-spacing: .035em; text-transform: uppercase; }
.hero-lede { max-width: 560px; margin: 26px 0 0; font-size: clamp(18px, 2vw, 25px); line-height: 1.35; }
.hero-button { display: inline-flex; align-items: center; gap: 56px; min-height: 62px; margin-top: 34px; padding: 0 22px 0 28px; border: 2px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--cream); font-weight: 900; box-shadow: 8px 8px 0 var(--yellow); transition: transform .18s ease, box-shadow .18s ease; }
.hero-button:hover { transform: translate(-3px,-3px); box-shadow: 12px 12px 0 var(--yellow); }
.hero-button span { font-size: 23px; }
.hero-mascot { position: relative; z-index: 1; display: grid; place-items: center; align-self: stretch; animation: mascotIn .85s .12s cubic-bezier(.2,.8,.2,1) both; }
.hero-mascot img { position: relative; width: min(50vw, 650px); max-height: 72svh; object-fit: contain; filter: drop-shadow(0 30px 28px rgba(67,45,10,.24)); transform: rotate(2deg); }
.mascot-halo { position: absolute; width: min(42vw, 520px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.7); filter: blur(1px); }
.hero-note { position: absolute; z-index: 3; left: clamp(24px, 7vw, 120px); bottom: 30px; display: flex; align-items: center; gap: 14px; max-width: 480px; color: var(--muted); font-size: 13px; }
.hero-note strong { padding: 7px 10px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); white-space: nowrap; }
.how-it-works { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--cream); }
.how-it-works article { min-height: 230px; padding: 42px clamp(25px, 4vw, 68px); border-right: 1px solid var(--line); }
.how-it-works article:last-child { border-right: 0; }
.how-it-works span { color: var(--brown); font-size: 12px; font-weight: 900; }
.how-it-works h2 { margin: 28px 0 8px; font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: 30px; font-weight: 560; letter-spacing: .045em; line-height: 1.08; text-transform: uppercase; }
.how-it-works p { max-width: 340px; margin: 0; color: var(--muted); line-height: 1.55; }

.brand-dialog { width: min(520px, calc(100% - 28px)); padding: 0; border: 2px solid var(--ink); border-radius: 24px; background: var(--cream); box-shadow: 18px 18px 0 rgba(23,23,20,.25); }
.brand-dialog::backdrop { background: rgba(23,23,20,.64); backdrop-filter: blur(8px); }
.brand-dialog form { position: relative; padding: 38px; }
.brand-dialog h2 { margin: 0 0 28px; font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: 38px; font-weight: 560; letter-spacing: .04em; line-height: 1.08; text-transform: uppercase; }
.brand-dialog label { display: flex; justify-content: space-between; margin: 18px 0 8px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.brand-dialog label small { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.brand-dialog input { width: 100%; min-height: 54px; padding: 0 16px; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--field); outline: none; }
.brand-dialog input:focus { box-shadow: 0 0 0 4px rgba(244,201,67,.4); }
.slug-field { display: flex; align-items: center; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--field); overflow: hidden; }
.slug-field span { padding-left: 14px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.slug-field input { min-width: 80px; padding-left: 2px; border: 0; border-radius: 0; box-shadow: none !important; }
.dialog-close { position: absolute; z-index: 2; top: 18px; right: 18px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; font-size: 25px; }
.shuffle-button { margin: 8px 0 0; padding: 0; border: 0; background: transparent; color: var(--brown); font-size: 12px; font-weight: 800; text-decoration: underline; }
.dialog-primary { width: 100%; min-height: 58px; margin-top: 24px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); color: #171714; font-weight: 900; }
.dialog-primary:disabled { opacity: .55; cursor: wait; }
.dialog-fineprint { margin: 14px 12px 0; color: var(--muted); font-size: 12px; line-height: 1.45; text-align: center; }
.form-error { min-height: 20px; margin: 10px 0 -10px; color: var(--red); font-size: 13px; font-weight: 700; }
.join-dialog { text-align: center; }
.join-dialog label { text-align: left; }
.join-mark { width: 90px; height: 90px; margin: -4px auto 18px; object-fit: cover; object-position: 50% 5%; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); }
.join-dialog h2 span { color: var(--brown); }
.audio-output-dialog { width: min(560px, calc(100% - 24px)); }
.audio-output-intro { margin: -12px 0 18px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.audio-route-help { display: grid; gap: 9px; }
.audio-route-help section { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.audio-route-help strong, .audio-route-help span { display: block; }
.audio-route-help strong { font-size: 12px; }
.audio-route-help span { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.audio-output-note { margin: 14px 2px 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

.room-view { height: 100dvh; min-height: 100svh; overflow: hidden; background: var(--room-bg); }
.room-header { height: 70px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 18px; border-bottom: 2px solid #171714; background: var(--yellow); color: #171714; }
.room-brand { gap: 9px; font-size: 16px; }
.room-brand img { width: 40px; height: 40px; object-fit: cover; object-position: 50% 7%; border: 1.5px solid var(--ink); border-radius: 50%; background: white; }
.room-title { display: flex; align-items: baseline; gap: 10px; }
.room-title span { font-size: 10px; font-weight: 900; letter-spacing: .13em; }
.room-title strong { font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: 20px; font-weight: 570; letter-spacing: .04em; }
.room-title i { display: inline-flex; align-items: center; gap: 6px; color: #0b5d40; font-size: 11px; font-style: normal; font-weight: 900; }
.room-title i.is-connecting { color: #171714; }
.room-title i.is-connecting::before { content: ""; width: 10px; height: 10px; flex: 0 0 auto; border: 2px solid rgba(23,23,20,.26); border-top-color: #171714; border-radius: 50%; animation: spin .72s linear infinite; }
.room-title i.is-error { color: #9d251f; }
.room-title i.is-error::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.room-actions { display: flex; justify-content: flex-end; gap: 8px; }
.room-actions button { min-height: 38px; padding: 0 14px; border: 1.5px solid #171714; border-radius: 999px; background: transparent; color: #171714; font-size: 12px; font-weight: 900; }
.room-actions .accent-small { background: #171714; color: white; }
.music-action-short { display: none; }
.room-grid { --left: 300px; --middle: 340px; height: calc(100dvh - 70px); display: grid; grid-template-columns: var(--left) 7px var(--middle) 7px minmax(360px, 1fr); background: var(--cream); }
.room-grid > aside, .room-grid > section { min-width: 0; overflow: hidden; }
.voice-panel, .people-panel, .chat-panel { display: flex; flex-direction: column; background: var(--cream); }
.voice-panel { padding: 22px; overflow-y: auto !important; }
.people-panel { padding: 22px 18px; }
.chat-panel { position: relative; isolation: isolate; padding: 22px 22px 14px; }
.column-resizer { position: relative; cursor: col-resize; background: rgba(23,23,20,.08); }
.column-resizer::after { content: ""; position: absolute; inset: 0 2px; background: var(--ink); opacity: .25; transition: opacity .15s; }
.column-resizer:hover::after, .column-resizer.is-dragging::after { opacity: 1; }
.panel-heading { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.panel-heading span { display: block; margin-bottom: 4px; color: var(--brown); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.panel-heading strong { display: block; font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: 24px; font-weight: 560; letter-spacing: .055em; line-height: 1.08; text-transform: uppercase; }
.panel-heading.inline { display: flex; align-items: end; justify-content: space-between; }
.panel-heading em { color: var(--muted); font-size: 11px; font-style: normal; font-weight: 800; }
.local-meter { position: relative; height: 128px; margin: 18px 0; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 14px; background: #181a17; color: white; }
.local-meter canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.local-meter > span { position: absolute; left: 12px; bottom: 10px; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.meter-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 100%, rgba(244,201,67,.3), transparent 60%); }
.mode-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.mode-switch button { min-height: 38px; border: 0; border-radius: 7px; background: transparent; font-size: 11px; font-weight: 800; }
.mode-switch button.is-active { background: var(--ink); color: var(--cream); }
.talk-button { min-height: 84px; margin: 12px 0 20px; border: 2px solid var(--ink); border-radius: 14px; background: var(--yellow); color: #171714; box-shadow: 0 5px 0 var(--ink); transition: transform .08s, box-shadow .08s, background .12s; }
.talk-button span, .talk-button small { display: block; }
.talk-button span { font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: 18px; font-weight: 570; letter-spacing: .045em; }
.talk-button small { margin-top: 3px; font-size: 10px; font-weight: 700; }
.talk-button.is-talking { transform: translateY(5px); box-shadow: 0 0 0 var(--ink); background: #64d598; }
.control-label { margin: 4px 0 6px; color: var(--muted); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.voice-panel select { width: 100%; min-height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--field); }
.audio-output-control { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 58px; margin-top: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); color: var(--ink); text-align: left; }
.audio-output-icon { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--ink); border-radius: 50%; background: var(--yellow); color: #171714; font-size: 12px; font-weight: 900; letter-spacing: -.12em; }
.audio-output-control strong, .audio-output-control small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audio-output-control strong { font-size: 11px; }
.audio-output-control small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.audio-output-control em { color: var(--brown); font-size: 9px; font-style: normal; font-weight: 900; text-transform: uppercase; }
.audio-output-control:hover { border-color: var(--ink); }
.media-publish-controls { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.media-publish-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.media-publish-heading span { color: var(--brown); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.media-publish-heading small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.media-publish-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 10px; }
.media-publish-actions button { min-height: 42px; padding: 0 9px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); font-size: 10px; font-weight: 900; }
.media-publish-actions button i { margin-right: 5px; color: var(--muted); font-size: 8px; font-style: normal; }
.media-publish-actions button.is-active { border-color: #171714; background: var(--yellow); color: #171714; }
.media-publish-actions button.is-active i { color: var(--red); }
.media-publish-actions button:disabled { opacity: .52; cursor: wait; }
.media-publish-controls .control-label { display: block; }
.processing-list { margin-top: 18px; border-top: 1px solid var(--line); }
.processing-list label { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.processing-list strong, .processing-list small { display: block; }
.processing-list strong { font-size: 12px; }
.processing-list small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.processing-list input { position: absolute; opacity: 0; }
.processing-list i { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border: 1px solid var(--ink); border-radius: 999px; background: #d8d1bf; }
.processing-list i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); transition: transform .18s; }
.processing-list input:checked + i { background: var(--yellow); }
.processing-list input:checked + i::after { transform: translateX(16px); }
.manual-gain { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--soft); }
.manual-gain > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.manual-gain label { font-size: 11px; font-weight: 900; }
.manual-gain output { min-width: 47px; padding: 3px 7px; border-radius: 999px; background: var(--yellow); color: #171714; font-size: 10px; font-weight: 900; text-align: center; }
.manual-gain input { width: 100%; margin: 10px 0 5px; accent-color: var(--yellow); cursor: ew-resize; }
.manual-gain small { display: block; color: var(--muted); font-size: 9px; line-height: 1.4; }
.quality-note { margin: auto 0 0; padding-top: 14px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.quality-note b { color: var(--green); }
.people-list { overflow: auto; padding: 10px 0; }
.person { --voice-level: 0; display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; column-gap: 11px; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.person-avatar-shell { position: relative; grid-row: 1 / span 2; display: grid; place-items: center; width: 58px; height: 58px; isolation: isolate; }
.person-avatar { position: relative; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: 18px; font-weight: 600; transition: background .12s, box-shadow .12s, transform .12s; }
.speaker-particles { position: absolute; z-index: 1; inset: 50%; pointer-events: none; }
.speaker-particles i { --px: 0px; --py: -37px; position: absolute; width: 7px; height: 7px; margin: -3.5px; border: 1px solid var(--cream); border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); opacity: 0; }
.speaker-particles i:nth-child(2) { --px: 29px; --py: -27px; }
.speaker-particles i:nth-child(3) { --px: 39px; --py: 3px; }
.speaker-particles i:nth-child(4) { --px: 25px; --py: 33px; }
.speaker-particles i:nth-child(5) { --px: -26px; --py: 33px; }
.speaker-particles i:nth-child(6) { --px: -39px; --py: 2px; }
.speaker-particles i:nth-child(7) { --px: -28px; --py: -27px; }
.person-copy strong, .person-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-copy strong { font-size: 13px; }
.person-copy span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.person-copy { min-width: 0; padding-right: 4px; }
.person-audio { grid-column: 2; display: grid; gap: 7px; min-width: 0; margin-top: 5px; }
.person-scope { display: flex; align-items: center; justify-content: flex-start; gap: 3px; height: 20px; overflow: hidden; }
.person-scope i { width: 3px; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--muted) 54%, transparent); transform: scaleY(max(.12, var(--voice-level))); transform-origin: center; transition: transform 70ms linear, background 100ms; }
.person-scope i:nth-child(2n) { transform: scaleY(max(.2, calc(var(--voice-level) * .72))); }
.person-scope i:nth-child(3n) { transform: scaleY(max(.14, calc(var(--voice-level) * .46))); }
.person-volume { display: grid; grid-template-columns: minmax(54px,auto) minmax(60px,1fr) auto; align-items: center; column-gap: 7px; color: var(--muted); font-size: 9px; font-weight: 900; text-transform: none; }
.person-volume span { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.person-volume input { width: 100%; height: 16px; margin: 0; accent-color: var(--green); cursor: pointer; }
.person-volume output { font-variant-numeric: tabular-nums; }
.person.is-speaking .person-avatar { background: #64d598; color: #10271d; box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 35%, transparent), 0 0 30px color-mix(in srgb, var(--green) 62%, transparent); transform: scale(calc(1 + var(--voice-level) * .1)); animation: speakerHalo .58s ease-in-out infinite alternate; }
.person.is-speaking .person-scope i { background: var(--green); animation: scopePulse .34s ease-in-out infinite alternate; }
.person.is-speaking .person-scope i:nth-child(2n) { animation-delay: -.13s; }
.person.is-speaking .person-scope i:nth-child(3n) { animation-delay: -.24s; }
.person.is-speaking .speaker-particles i { animation: speakerParticle .8s ease-out infinite; animation-delay: calc(var(--particle-index, 0) * -.09s); }
.person.is-speaking .speaker-particles i:nth-child(2) { animation-delay: -.12s; }
.person.is-speaking .speaker-particles i:nth-child(3) { animation-delay: -.24s; }
.person.is-speaking .speaker-particles i:nth-child(4) { animation-delay: -.36s; }
.person.is-speaking .speaker-particles i:nth-child(5) { animation-delay: -.48s; }
.person.is-speaking .speaker-particles i:nth-child(6) { animation-delay: -.6s; }
.person.is-speaking .speaker-particles i:nth-child(7) { animation-delay: -.72s; }
.person.is-connecting .person-avatar { box-shadow: 0 0 0 5px color-mix(in srgb, var(--yellow) 38%, transparent); animation: connectingPulse .8s ease-in-out infinite alternate; }
.person.is-connecting .person-scope i { background: var(--yellow); animation: scopePulse .48s ease-in-out infinite alternate; }
.person.is-connecting .person-scope i:nth-child(2n) { animation-delay: -.16s; }
.person.is-connecting .person-scope i:nth-child(3n) { animation-delay: -.3s; }
@keyframes speakerParticle { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 22% { opacity: calc(.28 + var(--voice-level)); } 100% { opacity: 0; transform: translate(var(--px),var(--py)) scale(1.15); } }
@keyframes scopePulse { from { filter: brightness(.9); } to { filter: brightness(1.45); } }
@keyframes speakerHalo { from { box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 30%, transparent), 0 0 18px color-mix(in srgb, var(--green) 44%, transparent); } to { box-shadow: 0 0 0 9px color-mix(in srgb, var(--green) 14%, transparent), 0 0 36px color-mix(in srgb, var(--green) 72%, transparent); } }
.empty-state { display: grid; place-items: center; margin: auto; color: var(--muted); text-align: center; }
.empty-state > span { font-size: 50px; color: var(--brown); }
.empty-state strong { color: var(--ink); }
.empty-state p { max-width: 220px; margin: 7px 0 0; font-size: 12px; }

.room-view.has-visual-media .room-grid { grid-template-columns: clamp(240px,16vw,300px) 7px clamp(220px,15vw,300px) 7px minmax(420px,1fr) clamp(300px,22vw,390px); }
.media-panel { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #161714; color: #fffaf0; animation: mediaPanelIn .32s cubic-bezier(.2,.8,.2,1) both; }
.media-panel-heading { min-height: 72px; display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 16px 20px 14px; border-bottom: 1px solid rgba(255,255,255,.15); }
.media-panel-heading span { display: block; margin-bottom: 4px; color: var(--yellow); font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.media-panel-heading strong { display: block; max-width: min(46vw,760px); overflow: hidden; font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: 22px; font-weight: 560; letter-spacing: .055em; line-height: 1.08; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.media-health { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; color: #92e4ae; font-size: 9px; font-weight: 850; }
.media-health i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }
.media-health[data-level="2"] { color: var(--yellow); }
.media-health[data-level="3"], .media-health[data-level="4"] { color: #ff7968; }
.media-stage { flex: 1; min-height: 0; overflow: auto; padding: 16px 18px 8px; scrollbar-color: var(--yellow) rgba(255,255,255,.08); }
.media-focus { position: relative; display: grid; min-height: min(52vh,620px); overflow: hidden; border: 1px solid rgba(255,255,255,.2); border-radius: 15px; background: #050604; box-shadow: 0 18px 45px rgba(0,0,0,.3); isolation: isolate; }
.media-focus-video { position: absolute; inset: 0; display: grid; place-items: center; background: #050604; }
.media-focus-video video { width: 100%; height: 100%; object-fit: contain; background: #050604; }
.media-focus.is-camera .media-focus-video video { object-fit: cover; }
.media-focus-meta { position: absolute; z-index: 3; left: 12px; bottom: 11px; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 112px); padding: 7px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(5,6,4,.78); backdrop-filter: blur(8px); }
.media-focus-meta strong, .media-focus-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-focus-meta strong { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.media-focus-meta span { color: #c9c4b7; font-size: 9px; }
.media-fullscreen { position: absolute; z-index: 3; right: 11px; bottom: 11px; min-height: 34px; padding: 0 11px; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(5,6,4,.78); color: #fffaf0; font-size: 9px; font-weight: 850; backdrop-filter: blur(8px); }
.media-fullscreen:hover { border-color: var(--yellow); color: var(--yellow); }
.media-strip, .camera-section { margin-top: 15px; }
.media-strip-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.media-strip-heading span { color: var(--yellow); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.media-strip-heading em { color: #9d988c; font-size: 9px; font-style: normal; }
.media-tile-row { display: grid; grid-auto-columns: minmax(170px, 23%); grid-auto-flow: column; gap: 9px; overflow-x: auto; padding-bottom: 5px; scroll-snap-type: x proximity; }
.media-tile, .camera-tile { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: 11px; background: #090a08; color: #fffaf0; cursor: pointer; isolation: isolate; scroll-snap-align: start; }
.media-tile { aspect-ratio: 16 / 9; }
.camera-tile { min-height: 108px; aspect-ratio: 16 / 10; }
.media-tile.is-focused, .camera-tile.is-focused { border-color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.media-tile video, .camera-tile video { width: 100%; height: 100%; object-fit: cover; background: #050604; pointer-events: none; }
.media-tile video { object-fit: contain; }
.media-tile-label { position: absolute; z-index: 2; left: 7px; right: 7px; bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 7px; padding: 5px 7px; border-radius: 999px; background: rgba(5,6,4,.76); font-size: 8px; font-weight: 850; backdrop-filter: blur(7px); }
.media-tile-label strong, .media-tile-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-tile-label span { color: #92e4ae; }
.camera-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 9px; }
.media-control-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 12px 12px; padding: 9px; border: 1px solid rgba(255,255,255,.14); border-radius: 13px; background: #0d0e0c; }
.media-control-bar button { min-width: 94px; min-height: 38px; padding: 0 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; background: #20211e; color: #fffaf0; font-size: 9px; font-weight: 850; }
.media-control-bar button i { margin-right: 5px; color: #aaa598; font-size: 8px; font-style: normal; }
.media-control-bar button.is-active { border-color: var(--yellow); color: var(--yellow); }
.media-control-bar button.is-active i { color: #ff6554; }
.media-notice { flex: 0 0 auto; margin: 0 18px 8px; padding: 9px 12px; border-left: 3px solid var(--yellow); background: rgba(244,201,67,.12); color: #e4dfd2; font-size: 9px; line-height: 1.45; }
.person-media-state { display: inline-flex !important; align-items: center; gap: 4px; color: var(--brown) !important; font-weight: 800; }
.person-media-state::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
@keyframes mediaPanelIn { from { opacity: 0; transform: translateY(10px); } }
.message-list { flex: 1; overflow: auto; padding: 18px 4px 10px; scroll-behavior: smooth; }
.image-drop-overlay { position: absolute; z-index: 12; inset: 12px; display: grid; place-items: center; border: 3px dashed var(--ink); border-radius: 18px; background: color-mix(in srgb, var(--yellow) 88%, transparent); color: #171714; pointer-events: none; opacity: 0; transform: scale(.985); transition: opacity .14s ease, transform .14s ease; }
.image-drop-overlay > div { max-width: 360px; padding: 18px 22px; border: 2px solid #171714; border-radius: 14px; background: var(--yellow); box-shadow: 8px 8px 0 rgb(23 23 20 / 22%); text-align: center; }
.image-drop-overlay strong, .image-drop-overlay span { display: block; }
.image-drop-overlay strong { font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: 25px; font-weight: 560; letter-spacing: .045em; text-transform: uppercase; }
.image-drop-overlay span { margin-top: 7px; font-size: 10px; font-weight: 750; line-height: 1.45; }
.chat-panel.is-drag-over .image-drop-overlay { opacity: 1; transform: scale(1); }
.message { max-width: min(76%, 620px); margin: 0 0 16px; }
.message.is-own { margin-left: auto; }
.message-meta { display: flex; gap: 8px; margin: 0 4px 5px; color: var(--muted); font-size: 10px; }
.message.is-own .message-meta { justify-content: flex-end; }
.message-bubble { padding: 11px 14px; border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; background: var(--field); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.message.is-own .message-bubble { border-color: var(--ink); border-radius: 16px 4px 16px 16px; background: var(--yellow); color: #171714; }
.message-bubble .chat-link { color: inherit; font-weight: 850; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.message-bubble .chat-link:hover { text-decoration-thickness: 2.5px; }
.message-bubble img { max-width: 100%; max-height: 420px; border-radius: 10px; object-fit: contain; }
.image-caption { margin-top: 7px; font-size: 11px; font-weight: 700; }
.message.is-roll { max-width: min(92%, 700px); }
.message.is-roll .message-bubble { padding: 0; overflow: hidden; white-space: normal; }
.roll-result-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; padding: 14px 16px 11px; border-bottom: 1px solid currentColor; }
.roll-result-kicker { font-size: 10px; font-weight: 950; letter-spacing: .14em; }
.roll-result-total { font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: clamp(30px, 4vw, 48px); font-weight: 650; line-height: .9; text-align: right; }
.roll-values { display: flex; flex-wrap: wrap; gap: 5px; padding: 12px 16px; }
.roll-value { display: grid; place-items: center; min-width: 29px; height: 29px; padding: 0 6px; border: 0; clip-path: polygon(50% 0, 92% 18%, 100% 62%, 73% 100%, 27% 100%, 0 62%, 8% 18%); background: color-mix(in srgb, white 52%, transparent); font-size: 11px; font-weight: 950; line-height: 1; }
.roll-equation { padding: 0 16px 13px; color: color-mix(in srgb, currentColor 68%, transparent); font-size: 10px; font-weight: 800; }
.hope-dice-result { display: flex; align-items: center; gap: 10px; padding: 16px; }
.result-die-wrap { display: grid; justify-items: center; gap: 4px; }
.result-die-wrap small { font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.result-die { display: grid; place-items: center; width: 58px; height: 58px; clip-path: polygon(50% 0, 75% 7%, 94% 25%, 100% 50%, 94% 75%, 75% 94%, 50% 100%, 25% 94%, 6% 75%, 0 50%, 6% 25%, 25% 7%); font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: 29px; font-weight: 650; }
.result-die-fear { background: #111; color: #fff; }
.result-die-hope { border: 2px solid #111; background: #fff; color: #111; }
.static-result-die { --die-size: 78px; --die-value-top: 54%; position: relative; flex: 0 0 auto; display: block; width: var(--die-size); height: var(--die-size); isolation: isolate; }
.static-result-die-shape { position: absolute; z-index: 0; inset: 0; display: block; width: 100%; max-width: none; height: 100%; max-height: none; object-fit: contain; filter: drop-shadow(0 calc(var(--die-size) * .1) calc(var(--die-size) * .07) rgba(0,0,0,.38)); pointer-events: none; user-select: none; }
.static-result-die-value { position: absolute; z-index: 1; top: var(--die-value-top); left: 50%; display: block; color: #171714; font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: calc(var(--die-size) * .38); font-weight: 650; line-height: 1; text-align: center; text-shadow: 0 1px 0 #ffe782, 0 0 calc(var(--die-size) * .025) rgba(255,237,161,.9); transform: translate(-50%,-50%); }
.static-result-die.has-2-digit-value .static-result-die-value { font-size: calc(var(--die-size) * .34); }
.static-result-die.has-3-digit-value .static-result-die-value { font-size: calc(var(--die-size) * .27); }
.static-result-die.has-4-digit-value .static-result-die-value { font-size: calc(var(--die-size) * .21); }
.static-result-die-fear .static-result-die-value { color: #fffaf0; text-shadow: 0 1px 1px #000, 0 0 calc(var(--die-size) * .04) #000; }
.static-result-die-hope .static-result-die-value { color: #171714; text-shadow: 0 1px 0 #fff, 0 0 calc(var(--die-size) * .035) #fff; }
.static-result-die-d4 { --die-value-top: 58%; }
.static-result-die-d6, .static-result-die-d10 { --die-value-top: 53%; }
.static-result-die-d8, .static-result-die-d100, .static-result-die-generic { --die-value-top: 54%; }
.static-result-die-d12 { --die-value-top: 52.5%; }
.static-result-die-d20 { --die-value-top: 54.5%; }
.static-result-die-kind { position: absolute; z-index: 2; left: 50%; bottom: -2%; color: #171714; font-size: calc(var(--die-size) * .1); font-weight: 950; letter-spacing: .04em; line-height: 1; transform: translateX(-50%); }
.static-result-die.is-compact { --die-size: 54px; }
.roll-values { gap: 16px; }
.roll-values .static-result-die { --die-size: 104px; }
.roll-values:has(.static-result-die:only-child) .static-result-die { --die-size: 122px; }
.roll-values.is-many .static-result-die { --die-size: 62px; }
.roll-values.is-swarm .static-result-die { --die-size: 46px; }
.hope-dice-result .static-result-die { --die-size: 108px; }
.roll-operator { font-family: "Mayo Display", sans-serif; font-size: 28px; font-weight: 500; }
.roll-modifier { padding: 7px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: 12px; font-weight: 950; }
.roll-outcome-fear .roll-result-heading { background: #111; color: #fff; }
.roll-outcome-hope .roll-result-heading { background: #fff; color: #111; }
.roll-outcome-critical .roll-result-heading { background: var(--yellow-hot); color: #111; }

.dice-tray { position: absolute; z-index: 30; inset: 0; overflow: hidden; background: transparent; perspective: 1000px; pointer-events: none; opacity: 1; transition: opacity .35s ease; }
.dice-tray::before { content: none; }
.dice-stage { position: absolute; inset: 0; overflow: hidden; transform-style: preserve-3d; }
.dice-stage .dice-box-canvas { display: block; width: 100% !important; height: 100% !important; outline: 0; }
.dice-landed-results { position: absolute; z-index: 3; inset: clamp(22px, 7%, 72px) 18px 112px; display: flex; align-content: center; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(9px, 2.4vw, 24px); overflow: hidden; opacity: 0; transform: translateY(-8px) scale(.96); }
.dice-landed-results.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.dice-landed-results .static-result-die { --die-size: clamp(88px, 22vmin, 154px); filter: drop-shadow(0 16px 10px rgba(0,0,0,.42)); }
.dice-landed-results:has(.static-result-die:nth-child(4)) .static-result-die { --die-size: clamp(64px, 14vmin, 104px); }
.dice-landed-results.is-many { gap: clamp(5px, 1.2vw, 12px); }
.dice-landed-results.is-many .static-result-die { --die-size: clamp(42px, 8.5vmin, 70px); }
.dice-landed-results.is-swarm { gap: 4px; }
.dice-landed-results.is-swarm .static-result-die { --die-size: clamp(30px, 5.5vmin, 46px); }
.dice-landed-results.is-swarm .static-result-die::before, .dice-landed-results.is-swarm .static-result-die::after, .dice-landed-results.is-swarm .static-result-die > i { display: block; }
.rolling-die { --die-size: 58px; position: absolute; top: 0; left: 0; display: grid; place-items: center; width: var(--die-size); height: var(--die-size); opacity: 0; transform-style: preserve-3d; clip-path: polygon(50% 0, 91% 20%, 100% 64%, 72% 100%, 28% 100%, 0 64%, 9% 20%); background: conic-gradient(from 18deg at 50% 44%, #fff8dd 0 12%, #d8bf76 12% 25%, #fffdf2 25% 38%, #bda45e 38% 50%, #f9e6aa 50% 63%, #d4ba70 63% 75%, #fff7db 75% 88%, #c7ab61 88% 100%); color: #111; filter: drop-shadow(0 12px 8px rgba(0,0,0,.28)); backface-visibility: visible; will-change: transform, opacity; }
.rolling-die::before { content: ""; position: absolute; inset: 7%; clip-path: inherit; border: max(1px, calc(var(--die-size) * .025)) solid rgba(17,17,17,.45); background: conic-gradient(from 90deg, transparent, rgba(255,255,255,.62), transparent 38%, rgba(0,0,0,.16), transparent 72%); }
.rolling-die::after { content: ""; position: absolute; inset: 0; clip-path: polygon(50% 0, 53% 42%, 100% 64%, 56% 58%, 72% 100%, 50% 63%, 28% 100%, 44% 58%, 0 64%, 47% 42%); background: rgba(0,0,0,.12); mix-blend-mode: multiply; }
.rolling-die-value { position: relative; z-index: 2; display: grid; place-items: center; min-width: 54%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.84); font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: max(12px, calc(var(--die-size) * .38)); font-weight: 650; line-height: 1; box-shadow: 0 1px 4px rgba(0,0,0,.22); }
.rolling-die > small { position: absolute; z-index: 3; right: 17%; bottom: 11%; font-size: max(5px, calc(var(--die-size) * .12)); font-weight: 950; opacity: .7; }
.rolling-die-d4 { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.rolling-die-d6 { clip-path: inset(3% round 18%); }
.rolling-die-d8 { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.rolling-die-d10, .rolling-die-d12 { clip-path: polygon(50% 0, 75% 7%, 94% 25%, 100% 50%, 94% 75%, 75% 94%, 50% 100%, 25% 94%, 6% 75%, 0 50%, 6% 25%, 25% 7%); }
.rolling-die-d20 { clip-path: polygon(50% 0, 88% 16%, 100% 52%, 78% 90%, 50% 100%, 22% 90%, 0 52%, 12% 16%); }
.rolling-die-d100 { clip-path: polygon(50% 0, 79% 9%, 96% 35%, 96% 65%, 79% 91%, 50% 100%, 21% 91%, 4% 65%, 4% 35%, 21% 9%); }
.rolling-die-fear { background: conic-gradient(from 18deg at 50% 44%, #111 0 12%, #444 12% 25%, #050505 25% 38%, #555 38% 50%, #161616 50% 63%, #3b3b3b 63% 75%, #050505 75% 88%, #292929 88% 100%); color: #fff; }
.rolling-die-fear::before { border-color: rgba(255,255,255,.5); }
.rolling-die-fear::after { background: rgba(255,255,255,.12); mix-blend-mode: screen; }
.rolling-die-fear .rolling-die-value { background: rgba(0,0,0,.72); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.rolling-die-hope { background: conic-gradient(from 18deg at 50% 44%, #fff 0 12%, #d8d8d8 12% 25%, #fff 25% 38%, #bebebe 38% 50%, #f7f7f7 50% 63%, #d0d0d0 63% 75%, #fff 75% 88%, #c5c5c5 88% 100%); }
.dice-tray.is-rolling .rolling-die { animation: diceToss var(--duration) cubic-bezier(.16,.72,.18,1) var(--delay) both; }
.dice-tray.is-many .rolling-die { filter: drop-shadow(0 6px 4px rgba(0,0,0,.23)); }
.dice-tray.is-swarm .rolling-die::before, .dice-tray.is-swarm .rolling-die::after, .dice-tray.is-swarm .rolling-die > small { display: none; }
.dice-outcome { position: absolute; z-index: 4; left: 50%; bottom: 22px; display: grid; justify-items: center; min-width: min(360px, calc(100% - 34px)); padding: 10px 24px 12px; border: 2px solid #111; border-radius: 18px; background: var(--yellow-hot); color: #111; opacity: 0; transform: translate(-50%, 18px) scale(.94); box-shadow: 0 12px 32px rgba(0,0,0,.25); transition: opacity .22s ease, transform .28s cubic-bezier(.2,.9,.2,1.2); }
.dice-outcome small { font-size: 9px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.dice-outcome strong { font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: clamp(30px, 5vw, 54px); font-weight: 650; line-height: .95; }
.dice-outcome-values { max-width: min(520px, calc(100vw - 80px)); margin-top: 5px; overflow: hidden; font-size: 10px; font-weight: 850; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.dice-tray.is-settled .dice-outcome { opacity: 1; transform: translate(-50%, 0) scale(1); }
.dice-tray.is-leaving { opacity: 0; }

@keyframes diceToss {
  0% { opacity: 0; transform: translate3d(var(--sx), var(--sy), 320px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(.72); }
  10% { opacity: 1; }
  48% { opacity: 1; transform: translate3d(var(--mx), var(--my), 105px) rotateX(var(--spin-x)) rotateY(var(--spin-y)) rotateZ(var(--spin-z)) scale(1.08); }
  72% { transform: translate3d(var(--ex), calc(var(--ey) - 36px), 32px) rotateX(calc(var(--spin-x) + 150deg)) rotateY(calc(var(--spin-y) + 110deg)) rotateZ(calc(var(--spin-z) + 80deg)) scale(.98); }
  86% { transform: translate3d(var(--ex), calc(var(--ey) + 8px), 0) rotateX(18deg) rotateY(-12deg) rotateZ(var(--rest-z)) scale(1.04,.92); }
  93% { transform: translate3d(var(--ex), calc(var(--ey) - 11px), 15px) rotateX(-10deg) rotateY(8deg) rotateZ(var(--rest-z)) scale(.98,1.03); }
  100% { opacity: 1; transform: translate3d(var(--ex), var(--ey), 0) rotateX(0deg) rotateY(0deg) rotateZ(var(--rest-z)) scale(1); }
}
@keyframes connectingPulse { to { box-shadow: 0 0 0 9px color-mix(in srgb, var(--yellow) 18%, transparent); transform: scale(1.035); } }
.typing-note { min-height: 24px; padding: 4px 2px; color: var(--muted); font-size: 10px; }
.message-form { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.image-button { display: grid; place-items: center; width: 42px; height: 42px; border: 1.5px solid var(--ink); border-radius: 50%; background: transparent; font-size: 25px; font-weight: 400; cursor: pointer; }
.message-form textarea { max-height: 120px; min-height: 44px; resize: none; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--field); outline: none; }
.message-form textarea:focus { border-color: var(--ink); }
.message-form button { min-height: 42px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 12px; font-weight: 900; }
.upload-rule { margin: 7px 0 0 50px; color: var(--muted); font-size: 9px; }
.storage-tools { display: grid; justify-items: end; gap: 6px; }
.storage-tools button { padding: 4px 8px; border: 1px solid var(--ink); border-radius: 999px; background: var(--yellow); color: #171714; font-size: 8px; font-weight: 900; }
.storage-tools button:disabled { opacity: .58; cursor: wait; }
.voice-retry { position: fixed; z-index: 70; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 28px); min-height: 44px; margin: 0; padding: 9px 18px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--yellow); color: #171714; box-shadow: 0 8px 28px rgb(0 0 0 / 24%); font-size: 11px; font-weight: 900; cursor: pointer; transform: translateX(-50%); }
.voice-retry.is-audio { bottom: max(78px, calc(env(safe-area-inset-bottom) + 54px)); background: var(--green); color: #071c13; }

/* High-contrast controls and authored yellow surfaces stay readable in both themes. */
.talk-button, .dialog-primary, .message.is-own .message-bubble, .message.is-own .image-caption,
.roll-standard, .roll-hope, .roll-equation { color: #171714; }
html[data-theme="dark"] .message.is-own .message-bubble,
html[data-theme="dark"] .talk-button,
html[data-theme="dark"] .dialog-primary { color: #171714; }
.mode-switch button.is-active, .message-form button, .toast { background: var(--ink); color: var(--paper); }
html[data-theme="dark"] .mode-switch button.is-active,
html[data-theme="dark"] .message-form button,
html[data-theme="dark"] .toast { color: #171714; }
html[data-theme="dark"] .message-form textarea { color: #f7f1df; }
input[type="range"] { accent-color: #126445; }
.person-volume input[type="range"] { appearance: none; height: 16px; background: transparent; }
.person-volume input[type="range"]::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 34%, transparent); }
.person-volume input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; margin-top: -5.5px; border: 2px solid var(--cream); border-radius: 50%; background: #126445; box-shadow: 0 0 0 1px var(--ink); }
.person-volume input[type="range"]::-moz-range-track { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 34%, transparent); }
.person-volume input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border: 2px solid var(--cream); border-radius: 50%; background: #126445; box-shadow: 0 0 0 1px var(--ink); }
.mobile-tabs { display: none; }
.toast { position: fixed; z-index: 50; left: 50%; bottom: 24px; max-width: min(460px, calc(100% - 28px)); padding: 12px 18px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast.is-error { background: var(--red); }
.remote-audio { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }

.music-body { min-height: 100svh; background: var(--music-bg); color: var(--music-fg); }
.music-header { height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(20px, 4vw, 64px); border-bottom: 1px solid var(--music-line); }
.music-header .wordmark img { background: var(--yellow); }
.music-header-actions { display: flex; align-items: center; gap: 16px; }
.music-header-actions > div { text-align: right; }
.music-header-actions > div span, .music-header-actions > div strong { display: block; }
.music-header-actions > div span { color: var(--brown); font-size: 9px; font-weight: 900; letter-spacing: .14em; }
.music-header .theme-toggle { border-color: currentColor; }
.music-console { min-height: calc(100svh - 76px); display: grid; grid-template-columns: minmax(260px,.8fr) minmax(420px,1.15fr) minmax(300px,1fr); }
.music-console > section { padding: clamp(28px,4vw,64px); border-right: 1px solid var(--music-line); }
.music-console > section:last-child { border-right: 0; }
.music-intro { display: flex; flex-direction: column; justify-content: center; background: var(--music-panel); }
.music-intro .eyebrow { color: var(--brown); }
.music-intro h1 { font-size: clamp(50px,5.5vw,94px); }
.music-intro > p:last-child { max-width: 440px; color: var(--music-muted); line-height: 1.55; }
.music-deck { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--yellow); color: #171714; }
.record-art { position: relative; width: min(290px, 68%); aspect-ratio: 1; border: 3px solid #171714; border-radius: 50%; background: #25251f; animation: spin 9s linear infinite paused; }
.record-art.is-playing { animation-play-state: running; }
.record-art img { position: absolute; inset: 22%; width: 56%; height: 56%; object-fit: cover; object-position: 50% 6%; border-radius: 50%; background: white; }
.record-art i { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border-radius: 50%; background: var(--yellow); transform: translate(-50%,-50%); }
.music-now { width: 100%; margin-top: 28px; text-align: center; }
.music-now span { color: var(--brown); font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.music-now h2 { margin: 7px auto 5px; font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: clamp(25px,3vw,42px); font-weight: 620; letter-spacing: .005em; }
.music-now p { margin: 0; color: #6c592d; font-size: 12px; }
.music-progress { width: min(420px,100%); max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transform: translateY(-4px); transition: max-height .28s ease, margin-top .28s ease, opacity .2s ease, transform .28s ease; }
.music-progress.is-active { max-height: 58px; margin-top: 19px; opacity: 1; transform: translateY(0); }
.music-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 7px; color: #4b3d1e; font-size: 9px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.music-progress-copy strong { min-width: 34px; color: #171714; text-align: right; }
.music-progress-track { position: relative; height: 7px; overflow: hidden; border: 1.5px solid #171714; border-radius: 999px; background: rgba(255,250,240,.52); }
.music-progress-track i { position: absolute; inset: 0 auto 0 0; width: 8%; border-radius: inherit; background: #171714; transition: width .24s cubic-bezier(.2,.8,.2,1), background .2s ease; }
.music-progress.is-complete .music-progress-track i { background: #237645; }
.music-progress.is-error .music-progress-track i { background: #a82f2f; }
.music-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 20px 0 18px; }
.music-controls button { width: 44px; height: 44px; border: 1.5px solid #171714; border-radius: 50%; background: transparent; color: #171714; }
.music-controls .music-play { width: 66px; height: 66px; background: #171714; color: white; font-size: 20px; }
.music-controls button:disabled, .music-deck input[type=range]:disabled { opacity: .38; cursor: wait; }
.music-link-form { width: min(520px,100%); }
.music-link-form > label { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.music-link-form > input { width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid #171714; border-radius: 10px; background: #fffaf0; color: #171714; outline: none; }
.music-link-form > input:focus { box-shadow: 0 0 0 4px rgba(23,23,20,.15); }
.music-link-form > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.music-link-form button { min-height: 42px; border: 1.5px solid #171714; border-radius: 999px; background: transparent; color: #171714; font-size: 11px; font-weight: 900; }
.music-link-form button:first-child { background: #171714; color: #fffaf0; }
.music-link-form button:disabled { opacity: .55; cursor: wait; }
.music-link-form.is-busy input { box-shadow: inset 0 0 0 1px rgba(23,23,20,.1); }
.music-deck input[type=range] { width: min(330px, 90%); margin-top: 22px; accent-color: #171714; }
.music-queue { background: var(--music-queue); }
.music-queue .panel-heading { border-color: var(--music-line); }
.music-queue .panel-heading span { color: var(--yellow); }
.music-queue ol { margin: 18px 0; padding: 0; list-style: none; }
.music-queue li { display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--music-line); color: var(--music-muted); font-size: 12px; cursor: pointer; }
.music-queue li.is-current { color: var(--yellow); }
.music-queue li.is-pending { opacity: .8; cursor: wait; }
.music-queue li.is-pending > span:first-child { animation: musicPendingPulse 1s ease-in-out infinite alternate; }
.music-queue li strong, .music-queue li small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-queue li strong { color: var(--music-fg); }
.music-queue li small { margin-top: 3px; color: var(--music-muted); font-size: 10px; }
.music-queue > p { color: var(--music-muted); font-size: 12px; }

@keyframes introUp { from { opacity: 0; transform: translateY(24px); } }
@keyframes mascotIn { from { opacity: 0; transform: translate(40px,20px) rotate(5deg) scale(.94); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes musicPendingPulse { to { color: var(--yellow); transform: translateX(3px); } }

@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr .8fr; padding-left: 28px; padding-right: 12px; }
  .hero h1 { font-size: clamp(52px,9vw,90px); }
  .room-header { grid-template-columns: auto 1fr auto; }
  .room-title { justify-content: center; }
  .room-title span, .room-title i { display: none; }
  .room-title i.is-connecting, .room-title i.is-error { display: inline-flex; font-size: 0; }
  .room-title i.is-connecting::before { width: 12px; height: 12px; }
  .room-brand span { display: none; }
  .room-actions #shareRoomButton { display: none; }
  .room-grid { --left: 260px; --middle: 280px; grid-template-columns: var(--left) 6px var(--middle) 6px minmax(320px,1fr); }
  .music-console { grid-template-columns: 1fr 1.3fr; }
  .music-queue { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.14); }
}

@media (max-width: 1180px) and (min-width: 901px) {
  .room-view.has-visual-media .mobile-tabs { height: 58px; display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; padding: 5px 8px; border-bottom: 2px solid var(--ink); background: var(--soft); }
  .room-view.has-visual-media .mobile-tabs button { position: relative; display: grid; grid-template-columns: 9px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 5px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); color: var(--ink); text-align: left; }
  .room-view.has-visual-media .mobile-tabs button i { grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 7px; font-style: normal; }
  .room-view.has-visual-media .mobile-tabs button strong { font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: 12px; font-weight: 570; letter-spacing: .055em; line-height: 1; text-transform: uppercase; }
  .room-view.has-visual-media .mobile-tabs button span { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 750; white-space: nowrap; }
  .room-view.has-visual-media .mobile-tabs button.is-active { border-color: #171714; background: var(--yellow); color: #171714; box-shadow: inset 0 -4px 0 #171714; }
  .room-view.has-visual-media .room-grid { height: calc(100dvh - 128px); display: block; overflow: hidden; touch-action: pan-y pinch-zoom; }
  .room-view.has-visual-media .room-grid > [data-panel] { display: none; height: 100%; overflow: auto; overscroll-behavior: contain; }
  .room-view.has-visual-media .room-grid > [data-panel].mobile-active { display: flex; }
  .room-view.has-visual-media .column-resizer { display: none; }
  .room-view.has-visual-media .media-panel { overflow: hidden; }
  .room-view.has-visual-media .media-focus { min-height: min(58vh,640px); }
}

@media (max-width: 900px) {
  .home-nav { height: 70px; padding: 0 18px; }
  .wordmark img { width: 39px; height: 39px; }
  .hero { min-height: 100svh; grid-template-columns: 1fr; align-items: start; padding: 102px 20px 90px; }
  .hero::before { background: linear-gradient(180deg, var(--paper) 0 58%, var(--yellow) 58% 100%); }
  .hero-copy { z-index: 3; }
  .hero h1 { font-size: clamp(48px,15vw,76px); }
  .hero-lede { max-width: 390px; font-size: 17px; }
  .hero-button { min-height: 56px; margin-top: 24px; }
  .hero-mascot { position: absolute; right: 8px; bottom: 34px; width: 74vw; height: 48vh; opacity: .94; }
  .hero-mascot img { width: 100%; max-height: 100%; }
  .mascot-halo { width: 70vw; }
  .hero-note { left: 20px; right: 38%; bottom: 24px; display: block; font-size: 10px; }
  .hero-note strong { display: inline-block; margin-bottom: 5px; }
  .how-it-works { grid-template-columns: 1fr; }
  .how-it-works article { min-height: 0; padding: 30px 24px; border-right: 0; border-bottom: 1px solid var(--line); }
  .how-it-works article:last-child { border-bottom: 0; }
  .how-it-works h2 { margin-top: 14px; }
  .brand-dialog form { padding: 32px 22px 26px; }
  .slug-field span { font-size: 12px; }
  .room-view { padding-bottom: env(safe-area-inset-bottom); }
  .room-header { height: 56px; grid-template-columns: auto minmax(0,1fr) auto; gap: 7px; padding: 0 max(8px, env(safe-area-inset-left)) 0 max(8px, env(safe-area-inset-right)); }
  .room-brand img { width: 34px; height: 34px; }
  .room-title { min-width: 0; justify-content: center; }
  .room-title strong { display: block; max-width: 100%; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
  .room-actions { gap: 5px; }
  .room-actions .accent-small { min-height: 36px; padding: 0 11px; font-size: 10px; }
  .music-action-long { display: none; }
  .music-action-short { display: inline; }
  .room-actions .theme-room-label { display: none; }
  .room-actions .theme-toggle { width: 36px; min-height: 36px; padding: 0; }
  .mobile-tabs { height: 58px; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; padding: 5px 6px; border-bottom: 2px solid var(--ink); background: var(--soft); }
  .room-view.has-visual-media .mobile-tabs { grid-template-columns: repeat(4,1fr); }
  .mobile-tabs button { position: relative; display: grid; grid-template-columns: 9px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--field); color: var(--ink); text-align: left; }
  .mobile-tabs button i { grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: 7px; font-style: normal; }
  .mobile-tabs button strong { font-family: "Mayo Display", "Arial Narrow", sans-serif; font-size: 12px; font-weight: 570; letter-spacing: .055em; line-height: 1; text-transform: uppercase; }
  .mobile-tabs button span { margin-top: 3px; color: var(--muted); font-size: 8px; font-weight: 750; white-space: nowrap; }
  .mobile-tabs button.is-active { border-color: #171714; background: var(--yellow); color: #171714; box-shadow: inset 0 -4px 0 #171714; }
  .mobile-tabs button.is-active i, .mobile-tabs button.is-active span { color: #4e3b10; }
  .room-grid { height: calc(100dvh - 114px - env(safe-area-inset-bottom)); display: block; overflow: hidden; touch-action: pan-y pinch-zoom; }
  .room-grid > [data-panel] { display: none; height: 100%; overflow: auto; overscroll-behavior: contain; }
  .room-grid > [data-panel].mobile-active { display: flex; }
  .room-grid > [data-panel].mobile-slide-right { animation: mobileSlideRight .26s cubic-bezier(.2,.8,.2,1); }
  .room-grid > [data-panel].mobile-slide-left { animation: mobileSlideLeft .26s cubic-bezier(.2,.8,.2,1); }
  .column-resizer { display: none; }
  .voice-panel, .people-panel, .chat-panel { padding: 14px; }
  .media-panel { padding: 0; }
  .media-panel-heading { min-height: 57px; padding: 11px 13px 10px; }
  .media-panel-heading strong { max-width: 66vw; font-size: 18px; }
  .media-stage { padding: 10px 10px 5px; }
  .media-focus { min-height: min(47vh,460px); border-radius: 12px; }
  .media-focus-meta { left: 8px; bottom: 8px; max-width: calc(100% - 96px); padding: 6px 8px; }
  .media-fullscreen { right: 8px; bottom: 8px; min-height: 32px; padding: 0 9px; }
  .media-tile-row { grid-auto-columns: minmax(148px,42%); }
  .camera-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .camera-tile { min-height: 92px; }
  .media-control-bar { margin: 0 8px max(8px,env(safe-area-inset-bottom)); padding: 7px; }
  .media-control-bar button { min-width: 0; flex: 1; padding: 0 7px; }
  .media-notice { margin: 0 10px 7px; }
  .panel-heading { padding-bottom: 12px; }
  .panel-heading strong { font-size: 21px; }
  .local-meter { height: 108px; margin: 13px 0; }
  .talk-button { min-height: 74px; margin: 10px 0 16px; }
  .processing-list { margin-top: 13px; }
  .processing-list label { padding: 11px 0; }
  .quality-note { padding-bottom: max(2px, env(safe-area-inset-bottom)); }
  .people-list { overflow: visible; }
  .person { grid-template-columns: 52px minmax(0,1fr); column-gap: 9px; padding: 12px 2px; }
  .person-avatar-shell { width: 52px; height: 52px; }
  .person-avatar { width: 43px; height: 43px; }
  .person-audio { min-width: 0; }
  .person-volume { grid-template-columns: minmax(44px,72px) minmax(50px,1fr) 34px; column-gap: 5px; }
  .chat-panel { overflow: hidden !important; }
  .chat-panel .panel-heading.inline { align-items: start; gap: 8px; }
  .chat-panel .panel-heading strong { font-size: 20px; }
  .storage-tools { flex: 0 0 auto; max-width: 88px; }
  .message-list { padding-top: 12px; }
  .message { max-width: 94%; }
  .message-form { grid-template-columns: 40px minmax(0,1fr) auto; gap: 6px; }
  .image-button { width: 40px; height: 40px; }
  .message-form button { padding: 0 14px; }
  .upload-rule { display: none; }
  .voice-retry { top: 122px; bottom: auto; min-height: 40px; padding: 7px 14px; font-size: 10px; }
  .toast { top: 172px; bottom: auto; max-width: calc(100% - 24px); padding: 9px 13px; border-radius: 12px; font-size: 10px; line-height: 1.35; transform: translate(-50%, -10px); }
  .toast.is-visible { transform: translate(-50%, 0); }
  .audio-output-dialog form { max-height: calc(100dvh - 24px); overflow: auto; padding: 30px 20px 22px; }
  .audio-output-dialog h2 { padding-right: 30px; font-size: 30px; }
  .music-header { height: 64px; padding: 0 16px; }
  .music-header .wordmark span { display: inline; font-size: 15px; }
  .music-console { display: block; }
  .music-console > section { padding: 32px 22px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .music-intro { min-height: 48svh; }
  .music-intro h1 { font-size: 58px; }
  .music-deck { min-height: 78svh; }
}

@keyframes mobileSlideRight { from { opacity: .72; transform: translateX(24%); } to { opacity: 1; transform: translateX(0); } }
@keyframes mobileSlideLeft { from { opacity: .72; transform: translateX(-24%); } to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}