@layer base, layout, components, motion, responsive;
@layer base {
  :root { color-scheme:light; --ink:#202336; --muted:#74798d; --paper:#f7f8fc; --line:#e8eaf2; --violet:#7058e8; --lilac:#c6bcff; --dark:#171927; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-synthesis:none; }
  * { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--dark); font-size:14px; line-height:1.5; } button,input,textarea,select { font:inherit; } button,a,input,textarea { -webkit-tap-highlight-color:transparent; } button,select { cursor:pointer; } a { color:inherit; text-decoration:none; } button { color:inherit; } button:disabled { cursor:not-allowed; opacity:.5; } :focus-visible { outline:3px solid #a695fa; outline-offset:3px; } h1,h2,h3,p { margin:0; } h1 { font-size:clamp(28px,3vw,38px); font-weight:700; letter-spacing:-1.4px; line-height:1.2; } h2 { font-size:21px; letter-spacing:-.6px; font-weight:650; } h3 { font-size:14px; font-weight:650; } small { font-size:11px; } svg { width:20px; height:20px; flex-shrink:0; vertical-align:middle; } [hidden] { display:none!important; } .muted { color:var(--muted); } .eyebrow { display:block; font-size:10px; letter-spacing:1.5px; font-weight:700; text-transform:uppercase; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link { position:fixed; top:-80px; left:20px; padding:12px; background:white; z-index:100; border-radius:8px; } .skip-link:focus { top:12px; } .boot { min-height:100vh; display:grid; place-content:center; gap:8px; color:white; font-size:24px; } .boot span { font-size:14px; color:var(--lilac); }
}
@layer layout {
  .shell { min-height:100vh; padding-left:232px; background:var(--dark); } .sidebar { position:fixed; inset:0 auto 0 0; width:232px; min-height:100dvh; z-index:40; padding:30px 18px 22px; display:flex; flex-direction:column; color:#9a9fb9; background:var(--dark); border-right:1px solid #ffffff08; } .brand { display:flex; align-items:center; gap:10px; color:#f6f5ff; padding:0 12px; font-size:20px; letter-spacing:-.8px; font-weight:700; } .brand-mark { display:grid; place-items:center; width:33px; height:36px; background:linear-gradient(145deg,#b0a0ff,#775ce0); color:white; border-radius:11px; box-shadow:0 4px 16px #9f86ff28; } .brand-mark svg { width:22px; } .nav-label { margin:42px 14px 12px; font-size:10px; letter-spacing:1.6px; color:#616981; } .navigation { display:grid; gap:6px; } .nav-link { display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:10px; font-size:13px; font-weight:550; } .nav-link svg { width:18px; } .nav-link:hover { background:#ffffff07; color:white; } .nav-link.active { background:#7560dc20; color:#c6baff; box-shadow:inset 3px 0 #a791ff; } .nav-link.active::after { content:''; margin-left:auto; width:5px; height:5px; background:#a791ff; border-radius:50%; } .sidebar-bottom { margin-top:auto; } .sidebar-note { background:linear-gradient(125deg,#2e2846,#212333); border:1px solid #a58bdd18; padding:18px; border-radius:14px; margin:24px 4px; font-size:12px; } .sidebar-note .spark { display:block; color:#c6baff; margin-bottom:10px; } .sidebar-note strong { display:block; color:#edebf8; font-size:13px; } .sidebar-note p { color:#9095ad; margin:6px 0 16px; } .sidebar-note button { background:none; border:0; padding:0; color:#c6baff; font-size:11px; } .profile { display:flex; gap:10px; align-items:center; border-top:1px solid #ffffff0e; padding:20px 8px 0; } .profile-text { flex:1; min-width:0; } .profile-text strong { color:#eceaf8; display:block; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .profile-text span { font-size:10px; color:#858ba4; } .avatar { width:34px; height:34px; display:grid; place-items:center; background:#ebe7ff; color:#6b55ce; border-radius:11px; font-size:11px; font-weight:700; flex-shrink:0; } .workspace { min-width:0; min-height:100vh; background:var(--paper); } .topbar { display:flex; min-height:72px; align-items:center; justify-content:space-between; gap:16px; padding:0 36px; border-bottom:1px solid var(--line); background:#ffffffcc; } .breadcrumb { display:flex; align-items:center; gap:12px; font-size:11px; color:#9398a9; } .breadcrumb strong { font-weight:550; color:#41465e; } .top-actions { display:flex; gap:20px; align-items:center; } .connection { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--muted); } .connection::before { content:''; width:6px; height:6px; border-radius:50%; background:#a4abba; } .connection.online::before { background:#3db08e; box-shadow:0 0 0 3px #3db08e13; } .connection.offline::before { background:#d7a14f; } main { max-width:1600px; padding:32px 36px 24px; margin:auto; } .page-heading { display:flex; justify-content:space-between; align-items:start; gap:24px; margin-bottom:30px; } .page-heading .eyebrow { color:var(--violet); margin-bottom:10px; } .page-heading p { font-size:13px; color:var(--muted); max-width:580px; margin-top:10px; } .heading-tag { display:none; } .studio-heading { display:flex; gap:24px; align-items:center; justify-content:space-between; margin-bottom:28px; } .studio-heading .eyebrow { color:var(--violet); margin-bottom:9px; } .studio-heading h1 { font-size:30px; letter-spacing:-1px; } .studio-heading p { color:var(--muted); font-size:12px; margin-top:8px; } .channel-chip { display:flex; align-items:center; gap:10px; flex-shrink:0; background:white; border:1px solid var(--line); padding:10px 13px; border-radius:14px; } .channel-chip strong { display:block; font-size:12px; } .channel-chip span { font-size:10px; color:var(--muted); } .channel-chip > svg { width:16px; color:#37a88b; margin-left:8px; } .studio-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; } .studio-main { display:grid; gap:24px; min-width:0; } #caller:empty { display:none; } .studio-rail { display:grid; gap:18px; position:sticky; top:22px; } .studio-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:24px; } .stack { display:grid; gap:20px; } .panel { border:1px solid var(--line); background:#fff; border-radius:16px; box-shadow:0 3px 12px #24274503; overflow:hidden; } .panel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 24px; border-bottom:1px solid var(--line); } .panel-header p { color:var(--muted); font-size:12px; margin-top:5px; } .panel-body { padding:24px; } .page-footer { display:flex; justify-content:space-between; gap:15px; padding-top:22px; margin-top:28px; color:#989dad; font-size:10px; border-top:1px solid var(--line); }
}
@layer components {
  .button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 14px; border:1px solid #e5e6ee; border-radius:9px; background:white; font-size:11px; font-weight:600; line-height:1.5; min-height:38px; } .button svg { width:15px; height:15px; } .button:hover:not(:disabled) { background:#f7f5ff; border-color:#d1c7f8; } .button:active:not(:disabled) { transform:scale(.98); } .button.primary { color:white; background:#2e3148; border-color:#2e3148; } .button.primary:hover:not(:disabled) { background:#454762; } .button.violet { background:var(--violet); border-color:var(--violet); color:white; box-shadow:0 4px 10px #7058e825; } .button.violet:hover:not(:disabled) { background:#5e44d6; } .button.light { background:var(--lilac); border-color:var(--lilac); } .button.wide { width:100%; } .text-button { border-color:transparent; color:var(--muted); box-shadow:none; } .icon-button { display:inline-grid; place-items:center; border:0; background:transparent; border-radius:8px; padding:7px; color:inherit; } .icon-button:hover { background:#8a7cd415; } .icon-button.mobile-signout { display:none; } .link-button { border:0; background:none; color:var(--violet); padding:0; font-size:12px; font-weight:550; } .badge { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; border-radius:6px; padding:4px 7px; font-size:9px; color:#7c70a0; background:#f0edfb; font-weight:650; } .badge.live { color:#26876d; background:#e6f8f1; } .badge.live::before { content:''; width:5px; height:5px; border-radius:50%; background:#38b38e; } .badge.ended { background:#edeef4; color:#7d8296; } input,textarea,select { width:100%; padding:11px 12px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:#fafbfe; } input:hover,textarea:hover,select:hover { border-color:#c8c2df; } input:focus,textarea:focus,select:focus { border-color:#9a85ed; outline:2px solid #ac9bf326; } input[readonly] { cursor:default; } textarea { min-height:260px; resize:vertical; font-size:13px; line-height:1.9; } .field { display:grid; gap:8px; margin-bottom:20px; } .field label,label { font-size:12px; font-weight:600; } .field small { color:var(--muted); } .field-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; } .round-tools { display:flex; flex-wrap:wrap; gap:8px; } .form-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .editor-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 24px 20px; } .editor-heading > .button { flex-shrink:0; white-space:nowrap; } .editor-heading .eyebrow { color:var(--violet); font-size:9px; margin-bottom:8px; } .editor-heading p { color:var(--muted); font-size:11px; margin-top:6px; } .collection-mark { display:grid; place-items:center; border-radius:13px; width:44px; height:44px; background:#f3efff; color:#9985db; transform:rotate(-8deg); } .editor-title { display:grid; gap:7px; padding:0 24px 22px; } .editor-title label { font-size:10px; color:var(--muted); } .editor-title input { background:white; font-size:15px; font-weight:600; padding:12px 14px; } .editor-toolbar { border-top:1px solid var(--line); display:flex; gap:12px; align-items:center; padding:20px 24px 10px; } .search-field { display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:#fafbfe; border-radius:9px; padding-left:12px; flex:1; min-width:0; color:#a2a6b7; } .search-field svg { width:15px; } .search-field input { border:0; background:none; font-size:11px; min-width:0; } .collection-meta { display:flex; justify-content:space-between; gap:12px; padding:5px 24px 16px; font-size:10px; color:#9a9eaf; } #phrase-count { font-weight:650; color:#646a82; } .moment-collection { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0 24px 24px; max-height:420px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#d8d2ec transparent; overscroll-behavior:contain; } .moment-card { min-width:0; background:#fbfbfe; border:1px solid #e9eaf3; border-radius:12px; padding:12px 12px 14px; position:relative; } .moment-card:hover { border-color:#c7bcef; background:#faf8ff; box-shadow:0 3px 10px #7355d908; } .moment-card:focus-within { border-color:#9e87ec; background:#fbf9ff; box-shadow:0 0 0 3px #9e87ec12; } .moment-card-top { display:flex; gap:8px; align-items:center; height:22px; margin-bottom:10px; } .moment-number { font-variant-numeric:tabular-nums; font-size:10px; color:#a095be; font-weight:600; } .moment-label { font-size:7px; letter-spacing:1px; color:#a9adbf; } .remove-moment { margin-left:auto; border:0; width:24px; height:24px; padding:0; background:none; border-radius:6px; color:#a7a9b9; font-size:18px; line-height:1; } .remove-moment:hover { color:#bc5567; background:#fcecf0; } .moment-card textarea { background:none; border:0; border-radius:0; font-size:14px; font-weight:550; padding:0; color:#3e425a; line-height:1.6; min-height:64px; height:64px; resize:none; overflow-y:auto; } .moment-card textarea:focus { outline:none; } .moment-card textarea::placeholder { font-size:10px; color:#a8a9bd; font-weight:400; } .collection-footer { border-top:1px dashed var(--line); display:flex; align-items:center; justify-content:space-between; gap:8px; padding:16px 24px; } .collection-footer .button { padding:7px 10px; min-height:32px; font-size:10px; } .save-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 24px; background:#fcfcff; border-top:1px solid var(--line); } .draft-status { display:flex; align-items:center; gap:7px; color:#697587; font-size:11px; font-weight:550; } .draft-status::before { content:''; width:6px; height:6px; border-radius:50%; background:#5aaf91; } .draft-status.unsaved::before { background:#d6a04f; } .save-bar small { color:#9297a9; font-size:9px; display:block; margin-top:4px; } .save-note { display:flex; gap:6px; align-items:center; font-size:9px; color:#a1a5b8; } .save-note svg { width:12px; height:12px; } .search-empty { padding:30px; text-align:center; font-size:12px; color:var(--muted); } .settings-fold > summary { cursor:pointer; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; font-size:13px; font-weight:600; } .settings-fold summary span { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:11px; font-weight:400; } .settings-fold .moment-editor { border:0; border-top:1px solid var(--line); border-radius:0; } .settings-fold[open] > summary { border-bottom:1px solid var(--line); } .rail-description { font-size:10px; margin-top:7px; } .studio-rail .panel-body { padding:21px; } .share-link { display:flex; align-items:center; gap:8px; padding:8px 9px; border:1px solid var(--line); border-radius:8px; background:#fafbfe; margin:16px 0; } .share-link input { padding:0; border:0; outline:none; background:none; min-width:0; font-size:10px; color:#676d84; } .share-link .icon-button svg { width:16px; } .studio-rail .round-tools .button { flex:1; padding:10px 7px; font-size:10px; } .rail-link { display:flex; align-items:center; gap:8px; margin-top:18px; border-top:1px solid var(--line); padding-top:14px; color:#81869d; font-size:10px; } .rail-link svg { width:14px; height:14px; } .rail-link svg:last-child { margin-left:auto; } .hint { font-size:11px; color:var(--muted); } .stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:white; border:1px solid var(--line); border-radius:14px; padding:16px 10px; } .stat { padding:0 8px; border-right:1px solid var(--line); } .stat:last-child { border:0; } .stat span { display:flex; align-items:center; gap:4px; color:#8c91a4; font-size:8px; white-space:nowrap; } .stat svg { width:11px; height:11px; } .stat strong { display:block; font-size:24px; font-weight:600; margin-top:7px; letter-spacing:-1px; } .stat small { font-size:10px; margin-left:4px; }
  .preview-panel { background:white; border:1px solid var(--line); border-radius:16px; padding:16px; } .preview-header { display:flex; align-items:center; justify-content:space-between; color:#74798e; font-size:11px; margin-bottom:14px; } .preview-header > span:first-child { display:flex; gap:7px; align-items:center; } .preview-header svg { width:15px; } .preview-expand { display:flex; align-items:center; justify-content:center; gap:7px; width:100%; border:0; background:#f7f5fc; border-radius:7px; color:#8a7ba7; font-size:10px; padding:9px; margin-top:12px; } .preview-expand:hover { color:var(--violet); background:#efebfa; } .preview-expand svg { width:12px; height:12px; } .preview-dialog-heading { display:flex; justify-content:space-between; align-items:center; } #close-preview { font-size:24px; line-height:1; width:32px; height:32px; } #board-preview { max-width:620px; } #board-preview .preview-square { font-size:12px; } .preview-note { font-size:9px; color:#9a9daf; margin-top:12px; text-align:center; } .preview { position:relative; overflow:hidden; padding:22px; color:#e8e5fb; background:linear-gradient(155deg,#302d49,#242439); border-radius:12px; } .preview::before { content:''; position:absolute; top:-60px; right:-70px; width:180px; height:180px; border:30px solid #bca2ff08; border-radius:50%; pointer-events:none; } .preview-top { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#af9fde; margin-bottom:15px; } .preview-top .eyebrow { font-size:7px; letter-spacing:1.3px; } .preview-top svg { width:16px; } .preview h2 { font-size:20px; color:#f7f4ff; margin-bottom:4px; overflow-wrap:anywhere; } .preview > p { font-size:10px; color:#9c97b5; } .preview-label { display:grid; grid-template-columns:repeat(5,1fr); text-align:center; margin:20px 0 7px; font-size:9px; color:#b5a5e1; } .bingo-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; } .preview-square { display:grid; place-items:center; aspect-ratio:1; min-width:0; background:#ffffff08; border:1px solid #ffffff0b; border-radius:5px; padding:4px; font-size:10px; text-align:center; line-height:1.35; color:#d5cee9; overflow-wrap:anywhere; } .preview-square.free { background:#b4a1f6; color:#392b63; border-color:#b4a1f6; font-size:9px; font-weight:700; } .preview-square.free svg { display:block; margin:auto; width:15px; height:15px; } .preview-bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:17px; font-size:8px; color:#a49abf; } .preview-bottom svg { width:11px; height:11px; } .studio-rail .preview { padding:15px; } .studio-rail .preview h2 { font-size:16px; } .studio-rail .preview > p,.studio-rail .preview-top { display:none; } .studio-rail .preview-square { font-size:8px; } .studio-rail .preview-label { margin-top:16px; } .studio-rail .preview-bottom { display:none; } .host-checklist { padding:4px 8px; color:#8d93a9; font-size:10px; } .host-checklist .eyebrow { font-size:8px; color:#a3a7b7; margin-bottom:12px; } .host-checklist > div { display:flex; align-items:center; gap:10px; margin:10px 0; } .host-checklist > div span { color:#a596cb; font-size:9px; } .how-card { padding:22px; } .how-card h3 { display:flex; align-items:center; gap:8px; margin-bottom:16px; } .how-card h3 svg { color:var(--violet); width:17px; } .step { display:flex; gap:12px; margin:14px 0; color:var(--muted); font-size:12px; } .step-number { display:grid; place-items:center; flex-shrink:0; width:24px; height:24px; border-radius:8px; color:var(--violet); background:#f0ebff; font-size:10px; } .step strong { color:#555b73; } .notice { padding:15px 18px; border:1px solid #ddd6f2; border-radius:12px; background:#f1edfc; color:#7d6b9b; font-size:12px; margin-bottom:20px; } .notice.error { background:#fdf0f0; color:#aa5360; border-color:#f0d7db; } .caller-toolbar { display:flex; align-items:center; gap:12px; padding:0 24px 20px; } .caller-toolbar .segmented { flex-shrink:0; } .caller-toolbar .segmented button { font-size:10px; padding:7px 11px; } .call-list { max-height:620px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#d8d2ec transparent; overscroll-behavior:contain; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:4px 24px 24px; } .call-square { display:grid; gap:12px; text-align:left; border:1px solid var(--line); background:#fafbfe; padding:16px; border-radius:12px; min-width:0; } .call-square strong { font-size:13px; font-weight:550; overflow-wrap:anywhere; } .call-state { color:var(--violet); font-size:10px; } .call-square:hover:not(:disabled) { border-color:#b1a1ee; background:#f6f2ff; transform:translateY(-2px); box-shadow:0 6px 16px #7058e810; } .call-square.called { background:#edf9f4; border-color:#d8eee4; opacity:1; } .called .call-state { color:#469b7c; }
  .empty-state { text-align:center; padding:48px 24px; } .empty-icon { display:grid; place-items:center; width:54px; height:54px; margin:0 auto 20px; border-radius:17px; background:#f0ebff; color:var(--violet); } .empty-state h2 { margin-bottom:10px; } .empty-state p { color:var(--muted); max-width:400px; margin:0 auto 24px; font-size:13px; } .channel-form { display:flex; gap:10px; max-width:460px; margin:auto; } .channel-form input { min-width:0; } .channel-form .button { flex-shrink:0; } .room-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; margin-top:24px; } .room-card { padding:24px; } .room-card:hover { transform:translateY(-3px); box-shadow:0 8px 25px #3f356910; } .room-card-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; } .room-card h3 { font-size:19px; margin-bottom:6px; } .room-card p { color:var(--muted); font-size:12px; margin-bottom:24px; } .viewer-context { display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:12px; padding:14px 18px; background:#efedfa; border:1px solid #e3ddf6; border-radius:12px; margin-bottom:24px; color:#827398; } .viewer-context > span { display:flex; gap:8px; align-items:center; } .viewer-context strong { color:#5f4b88; } .play-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr); gap:24px; align-items:start; } .board-letters { display:grid; grid-template-columns:repeat(5,1fr); text-align:center; margin-bottom:10px; color:var(--violet); letter-spacing:2px; font-size:12px; font-weight:650; } .square { position:relative; aspect-ratio:1; min-width:0; border:1px solid #e5dfef; border-radius:10px; background:#faf8fd; padding:8px; text-align:center; font-size:12px; line-height:1.4; overflow-wrap:anywhere; } .square:disabled { opacity:1; } .square.available { background:#eee8fc; border-color:#ac95db; cursor:pointer; } .square.available::after { content:''; position:absolute; top:8px; right:8px; width:5px; height:5px; border-radius:50%; background:var(--violet); } .square.available:hover { background:#e4dafb; transform:translateY(-2px); } .square.marked { background:#dcd0f6; border-color:#bba5e1; color:#5c458d; font-weight:600; } .square.marked::after { content:'✓'; position:absolute; top:4px; right:6px; font-size:10px; } .square.free { background:#2e2c45; color:#c1aff3; border-color:#2e2c45; } .square.free svg { display:block; margin:0 auto 5px; width:22px; } .square.winning { color:white; background:var(--violet); border-color:var(--violet); } .board-status { display:flex; justify-content:space-between; gap:20px; margin-top:22px; color:var(--muted); font-size:11px; } .board-status strong { color:var(--violet); } .activity-item { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); font-size:12px; } .activity-item:last-child { border:0; } .activity-item svg { width:15px; color:var(--violet); } .activity-item .badge { margin-left:auto; } .rank-controls { display:flex; align-items:end; flex-wrap:wrap; gap:16px; margin-bottom:24px; } .rank-controls .field { margin:0; flex:1; max-width:360px; } .rank-controls .channel-form { max-width:none; margin:0; } .segmented { display:flex; border:1px solid var(--line); background:#edeef5; border-radius:10px; padding:4px; } .segmented button { border:0; background:none; color:var(--muted); border-radius:7px; padding:9px 14px; font-size:11px; } .segmented button.active { background:white; color:var(--ink); box-shadow:0 2px 6px #25234208; } .rank-layout { display:grid; grid-template-columns:minmax(0,1fr) 270px; gap:24px; align-items:start; } table { border-collapse:collapse; width:100%; text-align:left; } th { background:#fbfbfe; font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:1px; color:var(--muted); padding:16px 24px; } td { padding:18px 24px; border-top:1px solid var(--line); font-size:12px; } td:last-child,th:last-child { text-align:right; } .table-player { display:flex; align-items:center; gap:12px; font-weight:600; } .table-player .avatar { width:30px; height:30px; font-size:10px; } .rank-first { font-weight:700; color:var(--violet); } .table-scroll { overflow-x:auto; } .podium { text-align:center; padding:28px; background:linear-gradient(145deg,#efebff,#e4dcfa); border:1px solid #dfd6f5; border-radius:16px; } .podium .eyebrow { color:#9481bb; margin-bottom:22px; } .podium > svg { width:38px; height:38px; color:#8665bf; margin-bottom:15px; } .podium h2 { overflow-wrap:anywhere; } .podium .score { color:#7955b1; font-size:38px; margin-top:18px; font-weight:600; letter-spacing:-1px; } .podium p { color:#9683b4; font-size:11px; } .demo-switch { margin-top:26px; border:1px dashed #d7dbe7; border-radius:12px; background:#ffffff55; padding:14px 18px; color:#9297ab; font-size:10px; } .demo-switch summary { cursor:pointer; } .demo-switch summary span { margin-left:10px; color:#a3a8b9; } .demo-switch .round-tools { margin-top:15px; } #toast { position:fixed; bottom:24px; left:calc(50% + 116px); transform:translate(-50%,10px); background:#2c2b43; color:#fff; border:1px solid #ffffff16; padding:13px 19px; border-radius:12px; font-size:12px; box-shadow:0 8px 35px #211b4930; max-width:calc(100vw - 40px); z-index:90; opacity:0; pointer-events:none; } #toast.visible { opacity:1; transform:translate(-50%,0); } dialog { max-width:540px; width:calc(100% - 32px); max-height:calc(100dvh - 48px); border:1px solid var(--line); border-radius:20px; padding:0; color:var(--ink); box-shadow:0 20px 100px #211b4930; } dialog::backdrop { background:#17172c65; backdrop-filter:blur(4px); } .dialog-content { padding:28px; } .dialog-content .eyebrow { color:var(--violet); margin-bottom:10px; } .dialog-content p { margin:10px 0 20px; color:var(--muted); font-size:12px; } .dialog-content ol { padding-left:20px; color:var(--muted); font-size:13px; } .dialog-content li { padding:7px 0 7px 5px; } .dialog-actions { display:flex; justify-content:end; gap:10px; margin-top:20px; }
}
@layer motion {
  .button,.nav-link,.moment-card,.call-square,.square,.room-card,.icon-button { transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease; } #toast { transition:opacity .2s ease,transform .2s ease; } .studio-heading,.page-heading { animation:arrive .4s ease both; } .moment-editor,.studio-rail,.call-panel,.board-panel { animation:arrive .45s ease both; } .studio-rail { animation-delay:.07s; } .moment-card { animation:card-in .25s ease both; } dialog[open] { animation:arrive .2s ease both; } .square.winning { animation:bingo-glow .8s ease both; }
  @keyframes arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } } @keyframes card-in { from { opacity:.5; transform:scale(.98); } to { opacity:1; transform:scale(1); } } @keyframes bingo-glow { from { box-shadow:0 0 0 5px #7058e850; } to { box-shadow:0 0 0 0 transparent; } }
  @media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
}
@layer responsive {
  @media(min-width:1700px) { .studio-layout { grid-template-columns:minmax(0,1fr) 350px; } .moment-collection { grid-template-columns:repeat(4,minmax(0,1fr)); } }
  @media(max-width:1250px) { .shell { padding-left:200px; } .sidebar { width:200px; padding:26px 12px 18px; } .brand { font-size:18px; padding:0 10px; } main { padding:28px 24px; } .topbar { padding:0 24px; } .studio-layout { grid-template-columns:minmax(0,1fr) 285px; gap:18px; } .moment-collection { grid-template-columns:repeat(2,minmax(0,1fr)); } .studio-heading h1 { font-size:27px; } .channel-chip { padding:8px 10px; } .channel-chip > svg { display:none; } #toast { left:calc(50% + 100px); } }
  @media(max-width:1050px) { .shell { padding-left:78px; } .sidebar { width:78px; padding:24px 12px; } .brand { justify-content:center; padding:0; } .brand-name,.nav-label,.sidebar-note,.profile-text,.profile .icon-button,.nav-link span { display:none; } .navigation { margin-top:38px; } .nav-link { justify-content:center; padding:14px 0; } .nav-link.active::after { display:none; } .nav-link.active { box-shadow:none; } .profile { justify-content:center; padding:20px 0 0; } .studio-heading h1 { font-size:26px; } .studio-grid { grid-template-columns:1fr 1fr; } .rank-layout { grid-template-columns:minmax(0,1fr) 220px; } .play-grid { grid-template-columns:1fr; } .play-grid > .stack { grid-template-columns:1fr 1fr; } #activity { grid-column:1/-1; grid-template-columns:1fr 1fr; } #toast { left:calc(50% + 39px); } }
  @media(max-width:850px) { .studio-layout { grid-template-columns:1fr; } .studio-rail { position:static; grid-template-columns:1fr 1fr; align-items:start; } .studio-rail .preview-panel { grid-column:2; grid-row:1/4; } .host-checklist { display:none; } .moment-collection { grid-template-columns:repeat(3,minmax(0,1fr)); } .channel-chip { background:transparent; border:0; } .channel-chip .avatar { display:none; } .studio-heading { gap:12px; } .rank-layout { grid-template-columns:1fr; } .rank-layout > .stack { grid-template-columns:1fr 1fr; } .call-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
  @media(max-width:620px) { .shell { padding-left:0; padding-top:60px; } .sidebar { width:100%; min-height:0; height:60px; inset:0 0 auto; flex-direction:row; align-items:center; justify-content:space-between; padding:0 18px; border-bottom:1px solid #ffffff0c; } .brand { font-size:16px; gap:7px; } .brand-name { display:block; } .brand-mark { width:26px; height:28px; border-radius:8px; } .brand-mark svg { width:18px; } .navigation { display:flex; margin:0; gap:6px; } .nav-link { padding:9px 11px; border-radius:8px; } .nav-link svg { width:17px; } .sidebar-bottom { display:none; } .topbar { min-height:56px; padding:0 18px; } .breadcrumb { font-size:10px; gap:7px; } .top-actions { gap:6px; } .top-actions .button { min-height:30px; padding:6px 9px; font-size:10px; } .top-actions .button span { display:none; } .connection { font-size:0; gap:0; margin-right:6px; } .icon-button.mobile-signout { display:inline-grid; } .mobile-signout svg { width:15px; } main { padding:24px 18px; } .studio-heading { display:block; margin-bottom:22px; } .studio-heading .eyebrow { font-size:8px; } .studio-heading h1 { font-size:25px; } .studio-heading p { font-size:11px; } .channel-chip { display:inline-flex; padding:0; margin-top:16px; gap:8px; } .channel-chip .avatar { display:grid; width:25px; height:25px; border-radius:7px; font-size:9px; } .channel-chip > div { display:flex; align-items:center; gap:8px; } .channel-chip strong { font-size:11px; } .channel-chip span { font-size:9px; background:#eeeafa; border-radius:5px; padding:3px 6px; } .studio-layout { gap:18px; } .moment-collection { grid-template-columns:repeat(2,minmax(0,1fr)); padding:0 16px 18px; gap:9px; } .moment-card { padding:10px; } .moment-card textarea { font-size:13px; } .moment-label { font-size:6px; letter-spacing:.7px; } .editor-heading { padding:20px 16px 18px; gap:12px; } .editor-heading h2 { font-size:19px; } .editor-heading p { font-size:10px; } .collection-mark { width:36px; height:36px; } .editor-title { padding:0 16px 18px; } .editor-toolbar { padding:16px 16px 10px; gap:8px; } .editor-toolbar > .button { padding:10px; font-size:10px; } .collection-meta { padding:4px 16px 14px; align-items:start; } #collection-hint { font-size:8px; max-width:155px; text-align:right; } .collection-footer { padding:14px 16px; flex-wrap:wrap; gap:12px; } .collection-footer .round-tools { gap:6px; } .collection-footer .button { font-size:9px; padding:6px 9px; } .collection-footer .text-button { padding:0; min-height:24px; } .save-bar { padding:16px; gap:8px; } .save-note { display:none; } .save-bar small { max-width:180px; font-size:8px; } .save-bar .button { font-size:10px; padding:10px 12px; flex-shrink:0; } .studio-rail { grid-template-columns:1fr; } .studio-rail .preview-panel { grid-column:auto; grid-row:auto; } .studio-rail .preview-square { font-size:10px; } .studio-rail .preview { padding:20px; } .studio-rail .preview h2 { font-size:21px; } .studio-rail .preview-label { margin-top:20px; } .studio-rail .preview-note { font-size:10px; } .stat span { font-size:9px; } .stat strong { font-size:26px; } .stats { padding:18px 12px; } .caller-toolbar { flex-wrap:wrap; padding:0 16px 16px; } .caller-toolbar .search-field { flex-basis:100%; } .call-list { max-height:480px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; padding:0 16px 16px; } .call-square { padding:13px; } .call-square strong { font-size:12px; } .page-heading { margin-bottom:24px; } .page-heading p { font-size:12px; } .page-heading .eyebrow { font-size:8px; } .studio-grid,.play-grid,.play-grid > .stack,.rank-layout > .stack,#activity { grid-template-columns:1fr; } .panel-body { padding:18px; } .panel-header { padding:18px; } .viewer-context { align-items:start; flex-direction:column; gap:9px; font-size:11px; } .square { font-size:10px; border-radius:7px; padding:5px; } .square.free svg { width:16px; height:16px; } .board-status { font-size:10px; gap:12px; } .bingo-grid { gap:4px; } .board-status > span:last-child { flex-shrink:0; } .rank-controls { gap:12px; } .rank-controls .field { flex-basis:100%; max-width:none; } th,td { padding:14px 12px; font-size:11px; } th { font-size:8px; } .table-player { gap:8px; } .table-player .avatar { width:24px; height:24px; font-size:8px; } .page-footer { font-size:8px; } #toast { left:50%; width:max-content; font-size:11px; } .empty-state { padding:34px 18px; } .channel-form { flex-direction:column; } .rank-controls .channel-form { flex-direction:row; } .dialog-content { padding:22px; } .dialog-content textarea { min-height:230px; } .demo-switch summary span { font-size:9px; } }
}

#community-leaderboard-dialog{max-width:760px;background:#fff;color:#29283e;overflow-y:auto}#community-leaderboard-dialog .preview-dialog-heading{gap:16px;margin-bottom:24px}#community-leaderboard-dialog h2{font-size:24px;overflow-wrap:anywhere}#community-leaderboard-dialog [data-close-rankings]{font-size:28px;flex-shrink:0}#community-leaderboard-dialog .rank-controls label{display:grid;gap:8px;font-size:13px;flex:1}#community-leaderboard-dialog select{width:100%;min-height:44px}#community-leaderboard-dialog td,#community-leaderboard-dialog th{padding:14px 12px}#community-leaderboard-dialog td:nth-child(2){overflow-wrap:anywhere}#community-leaderboard-dialog .dialog-content{padding:24px}@media(max-width:480px){#community-leaderboard-dialog h2{font-size:20px}#community-leaderboard-dialog .dialog-content{padding:16px}#community-leaderboard-dialog td,#community-leaderboard-dialog th{padding:12px 6px}}