/* Shared interface: Archivo and JetBrains Mono (SIL OFL 1.1); Material Symbols (Apache 2.0).
   Font licences: OFL-Archivo.txt and OFL-JetBrainsMono.txt. Stream overlays use separate styles. */
/* Shared controls and page layouts */
@font-face { font-family: Archivo; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; src: url("/archivo-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Archivo; font-style: normal; font-weight: 400 800; font-stretch: 62% 125%; font-display: swap; src: url("/archivo-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/jetbrains-mono-latin-ext.woff2") format("woff2"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/jetbrains-mono-latin.woff2") format("woff2"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  color-scheme: dark;
  --bg: #101214;
  --panel: #171A1D;
  --shell: #13161A;
  --raise: #1E2226;
  --line: #262A2F;
  --line-hi: #3A4047;
  --text: #E9ECE6;
  --dim: #9AA1A8;
  --faint: #737B83;
  --accent: #C6F135;
  --accent-dim: #263215;
  --action: var(--accent);
  --action-hover: #d8fa73;
  --action-ink: var(--bg);
  --bad-ink: var(--bg);
  --stop: color-mix(in srgb, var(--bad) 70%, #000);
  --stop-hover: color-mix(in srgb, var(--bad) 82%, #000);
  --disabled: #5c636b;
  --bad: #FF6B5E;
  --bad-text: #FF8F85;
  --bad-dim: #1A1312;
  --warn: #FFB547;
  --ok: var(--accent);
  --body: Archivo,"Segoe UI",system-ui,sans-serif;
  --mono: "JetBrains Mono",ui-monospace,monospace;
  --display: var(--body);
  --surface: var(--panel);
  --ink: var(--text);
  --paper: var(--bg);
  --rule: var(--line);
  --muted: var(--dim);
  --fg: var(--text);
  --accent-soft: var(--panel);
  --card: var(--panel);
  --edge: var(--line);
  --edge2: var(--line-hi);
  --amber: var(--raise);
  --amber-ink: var(--text);
  --moss: var(--accent-dim);
  --moss-ink: var(--text);
  --measure: 76rem;
  --i-sensors: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M197-197q-54-55-85.5-127.5T80-480q0-84 31.5-156.5T197-763l57 57q-44 44-69 102t-25 124q0 67 25 125t69 101l-57 57Zm113-113q-32-33-51-76.5T240-480q0-51 19-94.5t51-75.5l57 57q-22 22-34.5 51T320-480q0 33 12.5 62t34.5 51l-57 57Zm170-90q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm170 90-57-57q22-22 34.5-51t12.5-62q0-33-12.5-62T593-593l57-57q32 32 51 75.5t19 94.5q0 50-19 93.5T650-310Zm113 113-57-57q44-44 69-102t25-124q0-67-25-125t-69-101l57-57q54 54 85.5 126.5T880-480q0 83-31.5 155.5T763-197Z'/%3E%3C/svg%3E");
  --i-sensors-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M197-197q-54-55-85.5-127.5T80-480q0-84 31.5-156.5T197-763l57 57q-44 44-69 102t-25 124q0 67 25 125t69 101l-57 57Zm113-113q-32-33-51-76.5T240-480q0-51 19-94.5t51-75.5l57 57q-22 22-34.5 51T320-480q0 33 12.5 62t34.5 51l-57 57Zm170-90q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm170 90-57-57q22-22 34.5-51t12.5-62q0-33-12.5-62T593-593l57-57q32 32 51 75.5t19 94.5q0 50-19 93.5T650-310Zm113 113-57-57q44-44 69-102t25-124q0-67-25-125t-69-101l57-57q54 54 85.5 126.5T880-480q0 83-31.5 155.5T763-197Z'/%3E%3C/svg%3E");
  --i-cast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-480Zm320 320H600q0-20-1.5-40t-4.5-40h206v-480H160v46q-20-3-40-4.5T80-680v-40q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160Zm-720 0v-120q50 0 85 35t35 85H80Zm200 0q0-83-58.5-141.5T80-360v-80q117 0 198.5 81.5T360-160h-80Zm160 0q0-75-28.5-140.5t-77-114q-48.5-48.5-114-77T80-520v-80q91 0 171 34.5T391-471q60 60 94.5 140T520-160h-80Z'/%3E%3C/svg%3E");
  --i-cast-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M80-160v-120q50 0 85 35t35 85H80Zm200 0q0-83-58.5-141.5T80-360v-80q117 0 198.5 81.5T360-160h-80Zm160 0q0-75-28.5-140.5t-77-114q-48.5-48.5-114-77T80-520v-80q91 0 171 34.5T391-471q60 60 94.5 140T520-160h-80Zm160 0q0-108-41-202.5t-111.5-165Q377-598 282.5-639T80-680v-40q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H600Z'/%3E%3C/svg%3E");
  --i-videocam: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h480q33 0 56.5 23.5T720-720v180l160-160v440L720-420v180q0 33-23.5 56.5T640-160H160Zm0-80h480v-480H160v480Zm0 0v-480 480Z'/%3E%3C/svg%3E");
  --i-videocam-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h480q33 0 56.5 23.5T720-720v180l160-160v440L720-420v180q0 33-23.5 56.5T640-160H160Z'/%3E%3C/svg%3E");
  --i-widgets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M666-440 440-666l226-226 226 226-226 226Zm-546-80v-320h320v320H120Zm400 400v-320h320v320H520Zm-400 0v-320h320v320H120Zm80-480h160v-160H200v160Zm467 48 113-113-113-113-113 113 113 113Zm-67 352h160v-160H600v160Zm-400 0h160v-160H200v160Zm160-400Zm194-65ZM360-360Zm240 0Z'/%3E%3C/svg%3E");
  --i-widgets-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M666-440 440-666l226-226 226 226-226 226Zm-546-80v-320h320v320H120Zm400 400v-320h320v320H520Zm-400 0v-320h320v320H120Z'/%3E%3C/svg%3E");
  --i-pause-presentation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M360-320h80v-320h-80v320Zm160 0h80v-320h-80v320ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z'/%3E%3C/svg%3E");
  --i-pause-presentation-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M360-320h80v-320h-80v320Zm160 0h80v-320h-80v320ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Z'/%3E%3C/svg%3E");
  --i-notifications: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z'/%3E%3C/svg%3E");
  --i-notifications-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160ZM480-80q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80Z'/%3E%3C/svg%3E");
  --i-account-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q53 0 100-15.5t86-44.5q-39-29-86-44.5T480-280q-53 0-100 15.5T294-220q39 29 86 44.5T480-160Zm0-360q26 0 43-17t17-43q0-26-17-43t-43-17q-26 0-43 17t-17 43q0 26 17 43t43 17Zm0-60Zm0 360Z'/%3E%3C/svg%3E");
  --i-account-circle-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M234-276q51-39 114-61.5T480-360q69 0 132 22.5T726-276q35-41 54.5-93T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 59 19.5 111t54.5 93Zm246-164q-59 0-99.5-40.5T340-580q0-59 40.5-99.5T480-720q59 0 99.5 40.5T620-580q0 59-40.5 99.5T480-440Zm0 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E");
  --i-extension: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M352-120H200q-33 0-56.5-23.5T120-200v-152q48 0 84-30.5t36-77.5q0-47-36-77.5T120-568v-152q0-33 23.5-56.5T200-800h160q0-42 29-71t71-29q42 0 71 29t29 71h160q33 0 56.5 23.5T800-720v160q42 0 71 29t29 71q0 42-29 71t-71 29v160q0 33-23.5 56.5T720-120H568q0-50-31.5-85T460-240q-45 0-76.5 35T352-120Zm-152-80h85q24-66 77-93t98-27q45 0 98 27t77 93h85v-240h80q8 0 14-6t6-14q0-8-6-14t-14-6h-80v-240H480v-80q0-8-6-14t-14-6q-8 0-14 6t-6 14v80H200v88q54 20 87 67t33 105q0 57-33 104t-87 68v88Zm260-260Z'/%3E%3C/svg%3E");
  --i-extension-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M352-120H200q-33 0-56.5-23.5T120-200v-152q48 0 84-30.5t36-77.5q0-47-36-77.5T120-568v-152q0-33 23.5-56.5T200-800h160q0-42 29-71t71-29q42 0 71 29t29 71h160q33 0 56.5 23.5T800-720v160q42 0 71 29t29 71q0 42-29 71t-71 29v160q0 33-23.5 56.5T720-120H568q0-50-31.5-85T460-240q-45 0-76.5 35T352-120Z'/%3E%3C/svg%3E");
  --i-more-horiz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M240-400q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm240 0q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm240 0q-33 0-56.5-23.5T640-480q0-33 23.5-56.5T720-560q33 0 56.5 23.5T800-480q0 33-23.5 56.5T720-400Z'/%3E%3C/svg%3E");
  --i-help: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
  --i-arrow-drop-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
  --i-open-in-new: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h280v80H200v560h560v-280h80v280q0 33-23.5 56.5T760-120H200Zm188-212-56-56 372-372H560v-80h280v280h-80v-144L388-332Z'/%3E%3C/svg%3E");
  --i-more-vert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-160q-33 0-56.5-23.5T400-240q0-33 23.5-56.5T480-320q33 0 56.5 23.5T560-240q0 33-23.5 56.5T480-160Zm0-240q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm0-240q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Z'/%3E%3C/svg%3E");
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23c4c7c5'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");
  --checkmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23062e6f'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--text); }
a:hover { text-decoration: underline; }
a { color: var(--accent); text-decoration: none; touch-action: manipulation; }
[hidden] { display: none !important; }
.site-head { max-width: calc(var(--measure) + 48px); margin: auto; padding: 24px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand:hover { text-decoration: none; }
.site-nav { display: flex; gap: 24px; align-items: center; }
.site-nav a { color: var(--dim); font-size: 12px; }
.site-nav a[aria-current="page"] { color: var(--accent); text-decoration: underline; text-underline-offset: 6px; }
.site-nav .operator-link { border-left: 1px solid var(--line-hi); padding-left: 24px; }
.wrap { max-width: var(--measure); margin: 0px auto; padding: 28px 24px 0px; }
.wrap.narrow { max-width: 48rem; }
.head, .masthead { display: flex; justify-content: space-between; gap: 16px; border-top: 0px; border-bottom: 1px solid var(--line-hi); margin-bottom: 32px; }
p { margin: 0px 0px 16px; }
code { color: var(--text); }
.two { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(220px, 0.65fr); gap: 48px; align-items: start; }
.two > * { min-width: 0px; }
.stack > * + * { margin-top: 18px; }
.btn { cursor: pointer; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.drop { display: grid; place-items: center; gap: 8px; text-align: center; min-height: 190px; padding: 24px; border: 1px dashed var(--line-hi); cursor: pointer; color: var(--dim); }
.drop .hint { font-size: 11px; }
.drop input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0px; opacity: 0; }
.drop:focus-within { outline: 2px solid var(--accent); }
.drop.chosen { color: var(--accent); border-style: solid; }
.live { border-left: 1px solid var(--line-hi); padding-left: 24px; }
.live + .live { margin-top: 26px; }
.now { background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.now img, .now video { display: block; width: 100%; background: rgb(0, 0, 0); }
.now .cap { padding: 12px; font-size: 13px; overflow-wrap: anywhere; }
.count { font-variant-numeric: tabular-nums; }
.meta { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--dim); padding: 12px 0px; border-bottom: 1px solid var(--line); }
.meta b { font-weight: 400; color: var(--text); }
.empty { font-size: 12px; color: var(--faint); padding: 12px 0px; }
ul.plain { list-style: none; padding: 0px; margin: 0px; }
ul.plain li { padding: 16px 0px; border-bottom: 1px solid var(--line); font-size: 14px; overflow-wrap: anywhere; }
ul.plain .sub { display: block; font-size: 12px; color: var(--dim); margin-top: 4px; }
.msg { min-height: 20px; font-size: 13px; margin: 0px; }
.msg.ok { color: var(--accent); }
.dim { color: var(--dim); }
small { color: var(--dim); font-size: 12px; }
.links { margin-top: 32px; font-size: 12px; }
.links a { margin-right: 16px; }
.panel.quiet { background: transparent; border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--line); padding: 18px 0px 0px; }
.status { min-height: 20px; font-size: 13px; margin-top: 12px; }
.eyebrow { font-size: 11px; color: var(--dim); text-transform: none; letter-spacing: 0.1px; margin: 0px 0px 8px; }
.lede { color: var(--dim); margin: 8px 0px 0px; }
.rule { border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: none; border-top: 1px solid var(--line); margin: 26px 0px; }
.wordmark { font-weight: 700; color: var(--text); }
.grid { display: grid; gap: 0px; }
.watch-wrap { max-width: var(--measure); margin: auto; padding: 0px 24px; }
.broadcast-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 0px; }
.broadcast-head h1 { font-size: 14px; letter-spacing: 0px; font-weight: 400; }
.broadcast-head .eyebrow { margin: 0px; }
.signal-square { display: inline-block; width: 7px; height: 7px; background: var(--accent); margin-right: 8px; }
.broadcast-grid { display: grid; grid-template-columns: minmax(0px, 1fr) 320px; border: 1px solid var(--line); }
.broadcast-main { min-width: 0px; background: var(--panel); color: var(--text); }
.player { aspect-ratio: 16 / 9; background: rgb(16, 18, 15); position: relative; }
.player iframe { position: absolute; width: 100%; height: 100%; border: 0px; }
.player-bar { display: flex; justify-content: space-between; gap: 16px; align-items: center; padding: 14px 18px; font-size: 11px; border-top: 1px solid var(--line); color: var(--dim); }
.audio-strip { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.audio-shortcut { color: inherit; background: transparent; border: 0px; text-align: left; padding: 22px 18px; min-width: 0px; }
.audio-shortcut + .audio-shortcut { border-left: 1px solid var(--line); }
.audio-shortcut .eyebrow { color: var(--dim); display: block; }
.audio-shortcut code { font-size: clamp(15px, 1.5vw, 20px); }
.interact { background: var(--panel); border-left: 1px solid var(--line); min-width: 0px; display: flex; flex-direction: column; }
.rail-head { padding: 16px; border-bottom: 1px solid var(--line-hi); display: flex; justify-content: space-between; font-size: 12px; }
.rail-head span:last-child { color: var(--dim); }
.rail-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.rail-tabs button:hover { color: var(--accent); background: var(--accent-dim); }
.rail-content { padding: 20px 16px; flex: 1 1 0%; }
.rail-content h2 { margin-bottom: 20px; }
.rail-content label { margin-top: 16px; }
.rail-content .primary { width: 100%; margin-top: 16px; }
.rail-content code { font-size: 12px; }
.rail-content .msg { font-size: 11px; margin-top: 12px; }
.rail-note { font-size: 11px; color: var(--dim); margin-top: 16px; }
.rail-frame { width: 100%; height: 540px; border: 0px; display: block; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.feature-link { color: var(--text); min-width: 0px; }
.feature-link:hover { text-decoration: none; }
.feature-link .feature-number { font-size: 10px; color: var(--dim); margin-bottom: 18px; }
.feature-link strong { font-size: 17px; font-weight: 400; letter-spacing: -0.5px; display: flex; justify-content: space-between; gap: 8px; }
.feature-link small { display: block; font-size: 11px; margin-top: 6px; }
.embedded .site-head, .embedded .head { display: none; }
.embedded body { padding-bottom: 16px; }
.embedded .wrap { padding: 16px; max-width: none; }
.embedded .two { grid-template-columns: 1fr; gap: 22px; }
.embedded .live { border-left: 0px; border-top: 1px solid var(--line); padding: 20px 0px 0px; }
.embedded .drop { min-height: 110px; }
@media (min-width: 1500px) {
  :root { --measure: 88rem; }
  .broadcast-grid { grid-template-columns: minmax(0px, 1fr) 350px; }
}
@media (max-width: 900px) {
  .broadcast-grid { grid-template-columns: minmax(0px, 1fr) 290px; }
  .site-nav { gap: 16px; }
  .site-head { padding: 20px 24px; }
  .audio-strip { grid-template-columns: 1fr; }
  .audio-shortcut { padding: 14px 18px; }
  .audio-shortcut + .audio-shortcut { border-left: 0px; border-top: 1px solid var(--line); }
  .audio-shortcut .eyebrow { display: inline; margin-right: 10px; }
  .audio-shortcut code { font-size: 14px; }
  .two { gap: 24px; }
}
@media (max-width: 700px) {
  .site-head { padding: 18px 16px; gap: 12px; flex-wrap: wrap; }
  .site-nav { gap: 16px; }
  .site-nav .operator-link { padding-left: 16px; }
  .watch-wrap { padding: 0px 16px; }
  .broadcast-grid { grid-template-columns: 1fr; }
  .broadcast-head .eyebrow { font-size: 10px; }
  .interact { border-left: 0px; border-top: 1px solid var(--line); }
  .rail-tabs { grid-template-columns: repeat(4, 1fr); }
  .rail-frame { height: 540px; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-link { padding: 18px 12px !important; }
  .feature-link:nth-child(3) { border-left: 0px; }
  .feature-link:nth-child(n+3) { border-top: 1px solid var(--line-hi); }
  .feature-link .feature-number { margin-bottom: 10px; }
  .feature-link strong { font-size: 15px; }
  .wrap { padding: 16px; }
  .two { grid-template-columns: 1fr; gap: 28px; }
  .live { border-left: 0px; border-top: 1px solid var(--line); padding: 22px 0px 0px; }
  .head { margin-bottom: 24px; }
  .player-bar { padding: 12px; font-size: 10px; }
  .audio-strip { grid-template-columns: 1fr 1fr; }
  .audio-shortcut { padding: 14px 12px; }
  .audio-shortcut + .audio-shortcut { border-top: 0px; border-left: 1px solid var(--line); }
  .audio-shortcut .eyebrow { display: block; margin-bottom: 4px; font-size: 10px; }
  .audio-shortcut code { font-size: 12px; }
  .audio-shortcut .arrow { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
}
.interact:not(:has([role="tab"])), .feature-grid:not(:has(a)) { display: none; }
.broadcast-grid:not(:has(.interact [role="tab"])) { grid-template-columns: 1fr; }
html { background: var(--bg); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-dim); color: var(--text); }
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
button:active, .btn:active { background: color-mix(in srgb, currentcolor 12%, transparent); }
button.wide { width: 100%; }
.help::after { content: ""; width: 24px; height: 24px; background: currentcolor; mask: var(--icon) center/24px no-repeat; }
.help { display: inline-flex; align-items: center; justify-content: center; padding: 0px; border: 0px; background: transparent; color: var(--dim); font-size: 0px; flex: 0 0 auto; }
.help:hover, .help[aria-expanded="true"] { background: color-mix(in srgb,var(--dim) 8%,transparent); color: var(--dim); }
input:hover, textarea:hover, select:hover { border-color: var(--text); }
input:focus, textarea:focus, select:focus { outline-offset: 1px; outline: 0px; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
input:disabled, textarea:disabled, select:disabled { color: color-mix(in srgb,var(--text) 38%,transparent); border-color: color-mix(in srgb,var(--text) 12%,transparent); }
input::placeholder, textarea::placeholder { color: var(--dim); opacity: 0.7; }
select[multiple], select[size] { background-image: none; padding-right: 16px; }
option { background: var(--raise); color: var(--text); }
input[type="checkbox"] { appearance: none; flex: 0 0 auto; width: 18px; height: 18px; min-height: 0px; padding: 0px; margin: 3px 12px 3px 0px; border: 2px solid var(--dim); border-radius: 2px; vertical-align: middle; cursor: pointer; box-shadow: none; }
input[type="checkbox"]:checked { background: var(--accent) var(--checkmark) center/14px no-repeat; border-color: var(--accent); }
input[type="checkbox"]:focus { box-shadow: none; }
input[type="checkbox"]:disabled { border-color: color-mix(in srgb,var(--text) 38%,transparent); }
input[type="checkbox"]:checked:disabled { background-color: color-mix(in srgb,var(--text) 38%,transparent); border-color: transparent; }
input[type="radio"] { min-height: 0px; width: 20px; height: 20px; padding: 0px; margin: 2px 12px 2px 0px; accent-color: var(--accent); vertical-align: middle; }
input[type="range"] { min-height: 32px; padding: 0px; border: 0px; accent-color: var(--accent); }
input[type="range"]:focus { box-shadow: none; }
input[type="file"] { min-height: 0px; border: 0px; padding: 8px 0px; color: var(--dim); font-size: 14px; letter-spacing: 0.25px; }
input[type="file"]::file-selector-button { min-height: 40px; margin-right: 16px; padding: 0px 24px; border-radius: 20px; border: 1px solid var(--line-hi); background: transparent; color: var(--accent); font: 500 14px/20px var(--body); letter-spacing: 0.1px; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: color-mix(in srgb,var(--accent) 8%,transparent); }
input[type="color"] { width: 56px; padding: 4px; cursor: pointer; }
.panel { margin: 16px 0px; min-width: 0px; }
section > h2 { margin-bottom: 16px; }
.row > * { min-width: 0px; }
.row + label, button + label, .row + details, button + details { margin-top: 16px; }
.row > label { flex: 1 1 160px; }
.row > button { flex: 0 1 auto; }
summary { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0px 4px; margin: 0px -4px; border-radius: 8px; color: var(--text); font-weight: 500; letter-spacing: 0.1px; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; margin-left: auto; width: 24px; height: 24px; flex: 0 0 auto; background: var(--dim); mask: var(--i-arrow-drop-down) center/24px no-repeat; transition: transform 0.2s; }
details[open] > summary::after { transform: rotate(180deg); }
summary:hover { background: color-mix(in srgb,var(--text) 8%,transparent); }
details { margin: 8px 0px; }
ul { padding: 0px; list-style: none; }
li { border-bottom: 1px solid var(--line); padding: 12px 0px; min-width: 0px; overflow-wrap: anywhere; }
li:last-child { border: 0px; }
li button { min-height: 32px; padding: 0px 16px; margin: 8px 8px 0px 0px; font-size: 13px; border-radius: 16px; }
li select { width: auto; margin: 8px 0px; }
li p { margin: 8px 0px; }
.sub { color: var(--dim); }
.warn { color: var(--warn); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); }
.brand-mark { display: inline-grid; place-content: center; margin: 0px; padding: 0px; line-height: 1; letter-spacing: 0px; font-weight: 500; }
.head, .masthead { padding: 20px 0px; align-items: center; border-color: var(--line); }
.head a { font-size: 14px; }
.broadcast-grid { border-radius: 16px; overflow: hidden; }
.broadcast-head { padding: 20px 0px; }
.player-bar, .audio-strip, .audio-shortcut + .audio-shortcut { border-color: var(--line); }
.audio-shortcut code { color: var(--accent); }
.audio-shortcut .arrow { float: right; color: var(--accent); }
.player-bar a { color: var(--accent); }
.rail-tabs button { padding: 10px 0px; font-size: 11px; min-height: 48px; border: 0px; border-radius: 0px; color: var(--dim); background: transparent; }
.settings-tabs button { min-height: 48px; border: 0px; border-radius: 0px; color: var(--dim); background: transparent; }
.rail-tabs button[aria-selected="true"], .settings-tabs button[aria-selected="true"] { color: var(--accent); background: transparent; box-shadow: inset 0 -3px var(--accent); }
.rail-content { min-height: 300px; }
.feature-grid { gap: 12px; border: 0px; margin-top: 24px; }
.feature-link, .feature-link + .feature-link { background: var(--panel); border: 0px; border-radius: 16px; padding: 20px; }
.feature-link:hover { background: var(--raise); }
.feature-link .feature-number { display: none; }
.drop { border-radius: 16px; border-color: var(--line-hi); background: var(--panel); }
.drop:hover, .drop.over { border-color: var(--accent); background: color-mix(in srgb,var(--accent) 8%,var(--panel)); }
dialog::backdrop { background: rgba(0, 0, 0, 0.32); }
.chip { display: inline-flex; align-items: center; border-radius: 8px; }
.card-title { display: flex; align-items: center; }
.card-title h2 { margin: 0px; }
.ui-tooltip { position: fixed; z-index: 100; max-width: min(320px, -24px + 100vw); padding: 12px 16px; font-size: 14px; line-height: 20px; }
.snackbar { display: flex; align-items: center; min-height: 48px; max-width: min(560px, -32px + 100vw); margin: 0px; padding: 14px 16px; font-size: 14px; line-height: 20px; }
#message:empty { display: none; }
#message:not(:empty) { display: flex; }
#auth { border-top: 1px solid var(--line); padding-top: 16px; }
#hud-panel #hp-vitals { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 16px; }
.operator-page { max-width: 1440px; margin: auto; padding: 0px 24px 40px; }
.operator-page .wrap { padding: 24px 0px; }
.signin-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.signin-page .wrap { width: 100%; }
.signin-page .head { border: 0px; }
.setup-page { margin: auto; }
.setup-page section { margin-top: 16px; }
.setup-page .setup-head { border: 0px; }
.setup-page .overlay-row + .overlay-row { border-top: 1px solid var(--line); padding-top: 16px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-hi); flex: 0 0 auto; }
button[aria-pressed="true"] .dot { background: currentcolor; }
.desktop-page { padding: 0px; }
@media (max-width: 599px) {
  .feature-grid { gap: 8px; }
  .feature-link, .feature-link + .feature-link { padding: 16px !important; }
  .row > label { flex-basis: 100%; }
  .signin-page { padding: 16px; }
}
@media (max-width: 760px) {
  .operator-page { padding: 0px 16px 32px; }
  .row > label { flex-basis: 100%; }
}
.card-title .help { width: 36px; height: 36px; min-height: 36px; border: 0px; border-radius: 50%; }
.card-title .help::after { width: 20px; height: 20px; mask-size: 20px; }
.chip { color: var(--dim); font-weight: 500; letter-spacing: 0.1px; padding: 0px; min-height: 24px; gap: 6px; border: 0px; background: transparent; font-size: 12px; line-height: 18px; }
section .row { margin: 10px 0px; }
.signin-page .head { padding: 0px; margin: 0px 0px 24px; margin-bottom: 20px; }
.files-main { display: grid; grid-template-columns: minmax(280px, 0.8fr) minmax(0px, 1.2fr); gap: 32px; padding: 24px !important; max-width: 1120px !important; }
.files-main > section { margin: 0px; padding: 4px 0px 20px; background: transparent; border: 0px; border-radius: 0px; }
.files-main .card-title { margin: 0px 0px 16px; }
.files-main .card-title h2 { font-size: 20px; font-weight: 400; }
.files-main .file-list li { padding: 18px 0px; }
@media (max-width: 1023px) {
  .files-main { display: block; }
  .files-main > section + section { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 8px; }
}
@media (max-width: 599px) {
  .files-main { padding: 16px !important; }
  .files-main .card-title { margin-bottom: 12px; }
}
.page-assets .files-main { max-width: 960px; margin: auto; padding: 24px; }
.page-assets .file-list { list-style: none; padding: 0px; }
.page-assets .file-list li { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 14px 0px; border-bottom: 1px solid var(--line); }
.page-assets .file-list .file-info { min-width: 0px; overflow-wrap: anywhere; }
.page-assets .file-list .btn { flex-shrink: 0; }
.page-assets .file-path { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.page-assets progress { width: 100%; }
.page-assets #asset-form { max-width: 640px; }
@media (max-width: 480px) {
  .page-assets .files-main { padding: 16px; }
  .page-assets .file-list li { align-items: flex-start; flex-wrap: wrap; }
}
.desktop-page { max-width: none; margin: 0px; height: 100%; background: rgb(0, 0, 0); overflow: hidden; }
.desktop-page #screen { position: fixed; inset: 0px; }
.desktop-page #state { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); margin: 0px; padding: 6px 12px; border-radius: 6px; background: var(--panel); color: var(--text); font: 14px/1.3 var(--body); }
.desktop-page #state[hidden] { display: none; }
.desktop-page #control { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); margin: 0px; padding: 8px 12px; border-radius: 8px; background: var(--panel); color: var(--text); font: 14px/1.3 var(--body); display: flex; gap: 12px; align-items: center; }
.desktop-page #control[hidden] { display: none; }
.desktop-page #tools { position: fixed; top: 12px; right: 12px; z-index: 1; display: flex; gap: 8px; }
.desktop-page #clipboard-panel { position: fixed; top: 64px; right: 12px; z-index: 2; width: min(360px, -24px + 100vw); max-height: calc(-100px + 100vh); overflow: auto; margin: 0px; padding: 16px; box-sizing: border-box; background: var(--panel,var(--panel)); color: var(--text,var(--text)); border: 1px solid var(--line); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.533) 0px 8px 30px; }
.desktop-page #clipboard-panel[hidden] { display: none; }
.desktop-page #clipboard-panel textarea { min-height: 80px; resize: vertical; }
.setup-page .qr-row { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0px; }
.setup-page .qr-row figure { margin: 0px; width: 180px; }
.setup-page .qr-row svg { display: block; width: 180px; height: 180px; }
.setup-page .qr-row figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.setup-page .setup-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 8px 0px 12px; border-bottom: 1px solid var(--line-hi); }
.setup-page .setup-head h1 { font-size: 28px; margin: 0px; }
.setup-page .setup-head a { color: var(--dim); font-size: 12px; }
.setup-page #count { color: var(--dim); margin: 14px 0px 0px; }
.setup-page section[hidden] { display: none; }
.setup-page label { display: block; }
.setup-page input:not([type="checkbox"]), .setup-page select { width: 100%; }
.setup-page .value { display: flex; gap: 8px; align-items: center; margin: 6px 0px 14px; }
.setup-page .value code { border-radius: 8px; flex: 1 1 0%; padding: 10px; background: var(--raise); overflow-wrap: anywhere; min-width: 0px; }
.setup-page .value button { min-width: 64px; flex: 0 0 auto; min-height: 38px; }
.setup-page .warn { color: var(--warn); }
.setup-page .nav { display: flex; gap: 10px; margin-top: 8px; }
.setup-page .nav button { flex: 1 1 0%; min-height: 44px; }
.setup-page #phone-state.ok { color: var(--ok); }
.page-shop nav { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0px; }
.page-shop nav button { padding: 8px 12px; font-size: 11px; }
.page-shop nav button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
.page-shop ul { list-style: none; padding: 0px; }
.page-shop li { border-bottom: 1px solid var(--rule); }
.page-shop .item { width: 100%; text-align: left; background: transparent; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--rule); display: flex; gap: 16px; padding: 18px 2px; border-radius: 0px; }
.page-shop .item:hover { background: var(--panel); }
.page-shop .body { flex: 1 1 0%; min-width: 0px; }
.page-shop .name { display: block; }
.page-shop .name { font-size: 18px; }
.page-shop .desc { display: block; font-size: 14px; font-weight: 400; color: var(--muted); margin-top: 8px; }
.page-shop .cost { white-space: nowrap; color: var(--accent); }
.page-shop dialog { width: calc(100% - 32px); max-width: 500px; padding: 26px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.page-shop dialog::backdrop { background: rgba(27, 26, 23, 0.333); }
.page-shop .sub { color: var(--muted); font-size: 14px; }
.page-shop footer { color: var(--muted); font-size: 14px; margin-top: 24px; }
.page-shop .count { text-align: right; font-size: 12px; }
.page-shop .row { margin-top: 20px; }
.page-shop .note { margin: 14px 0px; }
html.demo #auth, html.demo #setup, html.demo #dc-setup, html.demo #kick-setup, html.demo #hud-panel, html.demo #op-pass, html.demo #op-revoke, html.demo #op-log, html.demo #money, html.demo .operator-brand { display: none !important; }
html { text-size-adjust: 100%; -webkit-font-smoothing: antialiased; scroll-padding-top: 72px; }
body { margin: 0px; padding: 0px 0px 48px; font: 400 14px/1.5 var(--body); letter-spacing: 0px; overflow-wrap: anywhere; }
h1 { margin: 0px; font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: 0px; }
h2 { margin: 0px 0px 16px; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: 0px; text-transform: none; }
h3 { margin: 0px 0px 6px; line-height: 20px; font-size: 16px; font-weight: 600; letter-spacing: 0px; }
code { font: inherit; overflow-wrap: anywhere; font-size: 0.9em; font-family: var(--mono); font-variant-numeric: tabular-nums; }
output, .num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
button { touch-action: manipulation; cursor: pointer; text-decoration: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-align: center; transition: background-color 0.2s, box-shadow 0.2s, color 0.2s, border-color 0.2s; min-height: 44px; padding: 0px 16px; border: 1px solid var(--line-hi); border-radius: 8px; background: transparent; color: var(--text); font: 500 14px/1.4 var(--body); letter-spacing: 0px; box-shadow: none; }
.btn { text-decoration: none; text-align: center; transition: background-color 0.2s, box-shadow 0.2s, color 0.2s, border-color 0.2s; min-height: 44px; padding: 0px 16px; border: 1px solid var(--line-hi); border-radius: 8px; background: transparent; color: var(--text); font: 500 14px/1.4 var(--body); letter-spacing: 0px; box-shadow: none; }
button:hover, .btn:hover { text-decoration: none; color: var(--text); background: var(--raise); box-shadow: none; }
button.primary, .btn.primary { background: var(--action); border-color: var(--action); color: var(--action-ink); font-weight: 600; }
button.primary:hover, .btn.primary:hover { background: var(--action-hover); color: var(--action-ink); box-shadow: none; }
button[aria-pressed="true"]:not(.danger) { background: var(--action); border-color: var(--action); color: var(--action-ink); }
button.danger { background: transparent; border-color: var(--bad); color: var(--bad-text); }
button.danger:hover { background: var(--bad-dim); color: var(--bad-text); }
button.danger[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: var(--bad-ink); }
input { touch-action: manipulation; width: 100%; max-width: 100%; background: transparent; transition: border-color 0.15s, box-shadow 0.15s; font: 400 15px/1.5 var(--body); letter-spacing: 0px; min-height: 48px; padding: 10px 12px; margin: 6px 0px 12px; border: 1px solid var(--line-hi); border-radius: 8px; background-color: var(--panel); color: var(--text); }
textarea { touch-action: manipulation; width: 100%; resize: vertical; max-width: 100%; background: transparent; transition: border-color 0.15s, box-shadow 0.15s; font: 400 15px/1.5 var(--body); letter-spacing: 0px; min-height: 48px; padding: 10px 12px; margin: 6px 0px 12px; border: 1px solid var(--line-hi); border-radius: 8px; background-color: var(--panel); color: var(--text); }
select { touch-action: manipulation; width: 100%; max-width: 100%; transition: border-color 0.15s, box-shadow 0.15s; appearance: none; background: var(--select-arrow) right 12px center/24px no-repeat; cursor: pointer; font: 400 15px/1.5 var(--body); letter-spacing: 0px; min-height: 48px; padding: 10px 12px; margin: 6px 0px 12px; border: 1px solid var(--line-hi); border-radius: 8px; background-color: var(--panel); color: var(--text); }
input[type="number"], input[type="url"] { font-family: var(--mono); }
label { display: block; margin-bottom: 6px; font-size: 13px; line-height: 1.5; letter-spacing: 0px; color: var(--dim); }
.time-zone-picker { position: relative; margin: 6px 0 12px; }
.time-zone-picker input { margin: 0; padding-right: 48px; }
.time-zone-picker .time-zone-toggle { position: absolute; top: 2px; right: 2px; width: 44px; min-height: 44px; padding: 0; border: 0; background: var(--select-arrow) center/24px no-repeat; }
.time-zone-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5; max-height: min(280px, 40dvh); overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; border: 1px solid var(--line-hi); border-radius: 8px; background: var(--panel); box-shadow: 0 8px 24px #0006; }
.time-zone-menu.above { top: auto; bottom: calc(100% + 4px); }
.time-zone-menu ul { list-style: none; margin: 0; padding: 4px; }
.time-zone-menu li { min-height: 44px; padding: 10px 12px; border-radius: 4px; overflow-wrap: anywhere; font-size: 14px; cursor: pointer; }
.time-zone-menu li:hover, .time-zone-menu li[data-active="true"] { background: var(--raise); }
.time-zone-menu li[aria-selected="true"] { color: var(--accent); }
.time-zone-menu p { margin: 12px; }
.time-zone-location { margin: 18px 0; }
.time-zone-location .row { align-items: stretch; }
.time-zone-location .row input { flex: 1 1 200px; width: auto; margin: 0; }
.time-zone-location .row button { flex: 0 0 auto; }
.time-zone-location .time-zone-credit { margin: 8px 0 0; font-size: 11px; color: var(--dim); }
.time-zone-locations { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.time-zone-locations:empty { display: none; }
.time-zone-locations li { margin: 0; padding: 0; border: 0; }
.time-zone-locations button { width: 100%; display: grid; justify-items: start; text-align: left; padding: 10px 12px; overflow-wrap: anywhere; }
.time-zone-locations button small { font-weight: 400; color: var(--dim); }
.time-zone-preview { margin: 12px 0; padding: 14px; border: 1px solid var(--line-hi); border-radius: 8px; background: var(--raise); }
.time-zone-preview p { margin: 0 0 8px; }
.time-zone-preview > strong { display: block; overflow-wrap: anywhere; margin-bottom: 8px; }
.time-zone-clocks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 14px 0; }
.time-zone-clocks span, .time-zone-clocks small { display: block; font-size: 12px; color: var(--dim); }
.time-zone-clocks time { display: block; font: 500 clamp(18px,2vw,24px)/1.7 var(--mono); font-variant-numeric: tabular-nums; }
.time-zone-preview > p:last-child { margin: 0; }
section { margin: 16px 0px; min-width: 0px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 20px; }
.panel { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 20px; }
.card-title { justify-content: space-between; margin: 0px 0px 14px; gap: 12px; }
.card-title h2 { font-size: 18px; font-weight: 600; }
.sub { font-size: 13px; line-height: 1.5; letter-spacing: 0px; }
.ok { color: var(--accent); }
.bad, .msg.bad { color: var(--bad-text); }
.help { cursor: pointer; --icon: var(--i-help); border-radius: 8px; width: 36px; height: 36px; min-height: 36px; }
.ui-tooltip { border: 1px solid var(--line-hi); border-radius: 8px; background: var(--raise); color: var(--text); box-shadow: rgba(0, 0, 0, 0.333) 0px 8px 24px; letter-spacing: 0px; }
#message { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; min-height: 48px; max-width: min(560px, -32px + 100vw); min-width: min(344px, -32px + 100vw); margin: 0px; padding: 14px 16px; font-size: 14px; line-height: 20px; border: 1px solid var(--line-hi); border-radius: 8px; background: var(--raise); color: var(--text); box-shadow: rgba(0, 0, 0, 0.333) 0px 8px 24px; letter-spacing: 0px; }
.snackbar { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 90; min-width: min(344px, -32px + 100vw); border: 1px solid var(--line-hi); border-radius: 8px; background: var(--raise); color: var(--text); box-shadow: rgba(0, 0, 0, 0.333) 0px 8px 24px; letter-spacing: 0px; }
#message.bad, .snackbar.bad { background: var(--bad-dim); color: var(--bad-text); border-color: var(--bad); }
dialog { padding: 24px; max-width: calc(100% - 32px); color: var(--text); border: 1px solid var(--line-hi); border-radius: 12px; background: var(--panel); box-shadow: rgba(0, 0, 0, 0.533) 0px 12px 48px; }
.brand { white-space: nowrap; font: 700 18px/1.4 var(--body); letter-spacing: 0px; }
.brand-mark { vertical-align: middle; font-size: 18px; border-radius: 6px; width: 30px; height: 30px; background: var(--action); color: var(--action-ink); }
.delay-metric { padding: 12px 14px; background: var(--shell); display: flex; flex-direction: column; gap: 4px; }
.delay-metric span { font-size: 11px; text-transform: uppercase; color: var(--dim); letter-spacing: 0.07em; }
.delay-metric output { font-size: 18px; }
#destinations-chip { padding: 0px; border: 0px; font: 12px/1.5 var(--mono); color: var(--dim); }
.stream-actions { flex-wrap: wrap; display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0px; }
.stream-actions > button { flex: 1 1 0%; min-height: 52px; padding: 0px 16px; font-weight: 700; font-size: 15px; }
.stream-actions > button:disabled { display: inline-flex; }
.signin-page .wrap { max-width: 420px; padding: 32px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.signin-page .brand { margin-bottom: 28px; }
.signin-page h1 { line-height: 32px; font-size: 24px; font-weight: 600; }
.setup-page { max-width: 760px; padding: 24px; }
.setup-page section { padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.account-page .wrap { max-width: 1100px; padding: 28px 24px 64px; margin: auto; }
.account-page header { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-bottom: 1px solid var(--line); margin-bottom: 32px; padding-bottom: 20px; }
.account-page header > a { font: 700 18px/1.4 var(--body); color: var(--text); }
/* Keep directory columns readable; their wrapper handles horizontal scrolling. */
.account-page table { width: 100%; min-width: 36rem; border-collapse: collapse; }
.account-page table:has(th:nth-child(6)) { min-width: 64rem; }
.account-page td { min-width: 6rem; text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.account-page th { white-space: nowrap; text-align: left; padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--dim); font-weight: 500; }
.account-page .table-wrap { overflow-x: auto; }
.account-page .box { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.account-page .row { margin: 14px 0px; }
.account-page form { margin: 0px; }
.account-page td form { min-width: 10rem; display: inline-flex; flex-wrap: wrap; gap: 6px; }
.account-page label { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.account-page .row > input { width: auto; min-width: 0px; }
.account-page .row > select { width: auto; }
.account-page h2 { margin-top: 32px; }
.account-page .state { font: 600 24px/1.4 var(--body); margin: 6px 0px; }
.account-page .muted { color: var(--dim); }
.account-page .danger { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); }
.account-page .nowrap { white-space: nowrap; }
.account-page footer { display: flex; flex-wrap: wrap; gap: 16px; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 16px; }
@media (max-width: 599px) {
  .delay-metric { background: var(--panel); }
  #message, .snackbar { bottom: calc(84px + env(safe-area-inset-bottom,0px)); }
  .setup-page { padding: 16px; }
  .setup-page section { padding: 20px 16px; }
  .account-page .wrap { padding: 20px 16px 48px; }
  .account-page .row > input { width: 100%; }
}
.legal-page { font: 400 16px/1.65 var(--body); }
.legal-page .wrap { max-width: 760px; padding: 28px 24px 72px; }
.legal-page header { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); margin-bottom: 36px; padding-bottom: 20px; }
.legal-page header > a { font-weight: 700; color: var(--text); }
.legal-page header nav a { color: var(--dim); font-size: 14px; }
.legal-page h1 { font-size: clamp(28px, 4vw, 38px); font-weight: 700; margin: 0px 0px 8px; }
.legal-page h2 { font-size: 20px; font-weight: 600; margin: 36px 0px 8px; }
.legal-page h3 { font-size: 16px; margin: 22px 0px 6px; }
.legal-page p { margin-bottom: 12px; }
.legal-page ul, .legal-page ol { list-style: revert; padding-left: 20px; margin-bottom: 12px; }
.legal-page li { border: 0px; padding: 0px; margin-bottom: 6px; }
.legal-page .updated { color: var(--dim); font: 13px var(--mono); }
.legal-page .todo { background: var(--accent-dim); padding: 0px 4px; border-radius: 3px; }
.legal-page table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 8px 0px 16px; }
.legal-page th, .legal-page td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.legal-page .table-wrap { overflow-x: auto; }
.legal-page .box { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 16px 18px; margin: 12px 0px 18px; }
.legal-page footer { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
@media (min-width: 1024px) {
  .stream-actions { position: sticky; bottom: 0px; background: var(--shell); padding-top: 12px; }
}
@media (max-width: 599px) {
  .stream-actions { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom,0px)); background: var(--bg); padding-top: 12px; z-index: 2; }
}
.landing-page .landing-block-0 { background: var(--bg); color: var(--text); font-family: Archivo, sans-serif; }
.landing-page .landing-block-1 { border-bottom: 1px solid var(--line); }
.landing-page .landing-block-2 { max-width: 1200px; margin: 0px auto; padding: 0px 24px; min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.landing-page .landing-block-3 { font-weight: 800; font-size: 18px; letter-spacing: 0.02em; }
.landing-page .landing-block-4 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 15px; }
.landing-page .landing-block-5 { color: var(--dim); text-decoration: none; }
.landing-page .landing-block-6 { display: inline-flex; align-items: center; height: 40px; padding: 0px 16px; border-radius: 8px; background: var(--action); color: var(--action-ink); text-decoration: none; font-weight: 700; }
.landing-page .landing-block-7 { max-width: 1200px; margin: 0px auto; padding: 88px 24px 56px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.landing-page .landing-block-8 { flex: 1 1 460px; min-width: 0px; display: flex; flex-direction: column; gap: 22px; }
.landing-page .landing-block-9 { margin: 0px; font-size: 56px; line-height: 1.04; font-weight: 800; letter-spacing: -0.01em; }
.landing-page .landing-block-10 { margin: 0px; font-size: 19px; line-height: 1.5; color: var(--dim); max-width: 34em; }
.landing-page .landing-block-11 { display: flex; flex-wrap: wrap; gap: 12px; }
.landing-page .landing-block-12 { display: inline-flex; align-items: center; height: 52px; padding: 0px 22px; border-radius: 10px; background: var(--action); color: var(--action-ink); text-decoration: none; font-weight: 700; font-size: 16px; }
.landing-page .landing-block-13 { display: inline-flex; align-items: center; height: 52px; padding: 0px 22px; border-radius: 10px; border: 1px solid var(--line-hi); color: var(--text); text-decoration: none; font-weight: 600; font-size: 16px; }
.landing-page .landing-block-14 { font-size: 14px; color: var(--dim); }
.landing-page .landing-block-15 { flex: 1 1 520px; min-width: 0px; aspect-ratio: 16 / 10; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.landing-page .landing-block-16 { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.landing-page .landing-block-17 { max-width: 1200px; margin: 0px auto; padding: 28px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; }
.landing-page .landing-block-18 { display: flex; flex-direction: column; gap: 4px; }
.landing-page .landing-block-19 { font-family: "JetBrains Mono", monospace; font-size: 28px; }
.landing-page .landing-block-20 { max-width: 1200px; margin: 0px auto; padding: 72px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.landing-page .landing-block-21 { border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.landing-page .landing-block-22 { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.landing-page .landing-block-23 { margin: 0px; font-size: 26px; font-weight: 700; }
.landing-page .landing-block-24 { margin: 0px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--dim); font-size: 16px; line-height: 1.45; }
.landing-page .landing-block-25 { margin: 0px; color: var(--dim); font-size: 16px; line-height: 1.5; }
.landing-page .landing-block-26 { font-weight: 600; }
.landing-page .landing-block-27 { --dot: var(--s-low); }
.landing-page .landing-block-28 { --dot: var(--s-held); }
.landing-page .landing-block-29 { --dot: var(--s-brb); }
.landing-page .landing-block-30 { --dot: var(--s-live); }
.landing-page .landing-block-31 { color: var(--muted); }
.landing-page .landing-block-32 { max-width: 1200px; margin: 0px auto; padding: 0px 24px 72px; display: flex; flex-direction: column; gap: 24px; }
.landing-page .landing-block-33 { margin: 0px; font-size: 32px; font-weight: 700; }
.landing-page .landing-block-34 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.landing-page .landing-block-35 { background: var(--bg); padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.landing-page .landing-block-36 { margin: 0px; font-size: 17px; }
.landing-page .landing-block-37 { margin: 0px; color: var(--dim); font-size: 15px; line-height: 1.45; }
.landing-page .landing-block-38 { max-width: 1200px; margin: 0px auto; padding: 0px 24px 72px; display: flex; flex-direction: column; gap: 16px; }
.landing-page .landing-block-39 { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.landing-page .landing-block-40 { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.landing-page .landing-block-41 { text-align: left; color: var(--dim); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.landing-page .landing-block-42 { padding: 14px 18px; font-weight: 500; }
.landing-page .landing-block-43 { border-top: 1px solid var(--line); background: var(--panel); }
.landing-page .landing-block-44 { padding: 14px 18px; text-align: left; }
.landing-page .landing-block-45 { padding: 14px 18px; font-family: "JetBrains Mono", monospace; }
.landing-page .landing-block-46 { padding: 14px 18px; }
.landing-page .landing-block-47 { border-top: 1px solid var(--line); }
.landing-page .landing-block-48 { padding: 14px 18px; text-align: left; font-weight: 500; }
.landing-page .landing-block-49 { padding: 14px 18px; color: var(--dim); }
.landing-page .landing-block-50 { font-size: 13px; color: var(--dim); }
.landing-page .landing-block-51 { max-width: 1200px; margin: 0px auto; padding: 0px 24px 72px; }
.landing-page .landing-block-52 { border: 1px solid var(--line-hi); border-radius: 16px; padding: 36px; display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-start; }
.landing-page .landing-block-53 { flex: 1 1 320px; display: flex; flex-direction: column; gap: 10px; }
.landing-page .landing-block-54 { display: flex; align-items: baseline; gap: 10px; }
.landing-page .landing-block-55 { font-family: "JetBrains Mono", monospace; font-size: 48px; }
.landing-page .landing-block-56 { color: var(--dim); }
.landing-page .landing-block-57 { color: var(--dim); }
.landing-page .landing-block-58 { align-self: flex-start; display: inline-flex; align-items: center; height: 52px; padding: 0px 22px; margin-top: 8px; border-radius: 10px; background: var(--action); color: var(--action-ink); text-decoration: none; font-weight: 700; }
.landing-page .landing-block-59 { flex: 1 1 320px; margin: 0px; padding: 0px; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--dim); font-size: 16px; }
.landing-page .landing-block-60 { max-width: 1200px; margin: 0px auto; padding: 0px 24px 72px; display: flex; flex-direction: column; gap: 8px; }
.landing-page .landing-block-61 { margin: 0px 0px 12px; font-size: 32px; font-weight: 700; }
.landing-page .landing-block-62 { border-top: 1px solid var(--line); padding: 16px 0px; }
.landing-page .landing-block-63 { font-size: 17px; font-weight: 600; cursor: pointer; }
.landing-page .landing-block-64 { margin: 10px 0px 0px; color: var(--dim); line-height: 1.5; }
.landing-page .landing-block-65 { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 16px 0px; }
.landing-page .landing-block-66 { max-width: 1200px; margin: 0px auto; padding: 28px 24px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: 14px; color: var(--dim); }
.landing-page .landing-block-67 { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.landing-page .screen { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 12px; overflow: hidden; background: var(--screen); color: var(--screen-fg); isolation: isolate; box-shadow: 0 0 0 1px color-mix(in srgb, var(--fg) 14%, transparent), 0 30px 60px -28px rgb(0 0 0 / .6); }
.landing-page .screen video { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; object-fit: cover; }
.landing-page .screen canvas { position: absolute; inset: 0px; width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: pixelated; z-index: 1; }
.landing-page .osd { position: absolute; inset: 0px; display: flex; flex-direction: column; justify-content: space-between; padding: 12px; pointer-events: none; z-index: 2; }
.landing-page .osd-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.landing-page .scene-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.62); font: 600 .6875rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.landing-page .scene-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--scene, #ff4b3e); }
.landing-page .osd .chip { padding: 5px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.62); font: 500 .6875rem/1 var(--mono); letter-spacing: 0.04em; }
.landing-page .brb-card { position: absolute; inset: 0px; z-index: 1; display: grid; place-content: center; text-align: center; gap: 6px; padding-bottom: 8%; background: radial-gradient(120% 90% at 50% 40%, rgb(26, 31, 38) 0%, rgb(11, 13, 16) 70%); }
.landing-page .brb-card strong { font-family: var(--display); font-stretch: 125%; font-weight: 800; font-size: clamp(2.6rem, 9vw, 4.6rem); line-height: 0.9; letter-spacing: 0.04em; }
.landing-page .brb-card span { color: var(--screen-dim); font: 500 .8125rem/1.2 var(--mono); display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.landing-page .brb-card span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgb(127, 212, 160); }
.landing-page .readouts { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; }
.landing-page .readout { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; min-width: 0px; }
.landing-page .readout .label { font-size: 0.6875rem; }
.landing-page .readout output { display: block; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-page .meter { height: 4px; border-radius: 2px; background: var(--raise); margin-top: 7px; overflow: hidden; }
.landing-page .meter i { display: block; height: 100%; width: 43%; background: var(--ok); border-radius: inherit; transition: width 0.4s; }
.landing-page .monitor-cap { color: var(--muted); }
.landing-page .monitor-cap a { color: var(--fg); text-underline-offset: 3px; }
.landing-page .demo-head { display: grid; gap: 12px; margin-bottom: clamp(24px, 3.4vw, 36px); max-width: 64ch; }
.landing-page .demo-head p, .landing-page .speed { color: var(--muted); }
.landing-page .card-offline { position: absolute; inset: 0px; z-index: 1; display: grid; place-content: center; text-align: center; gap: 4px; font: 500 .8125rem/1.3 var(--mono); color: var(--screen-dim); }
.landing-page .card-offline { background: rgb(16, 18, 21); }
.landing-page .card-offline strong { color: var(--screen-fg); font: 700 1rem/1.2 var(--body); }
.landing-page .card-privacy { position: absolute; inset: 0px; z-index: 1; display: grid; place-content: center; text-align: center; gap: 4px; font: 500 .8125rem/1.3 var(--mono); color: var(--screen-dim); background: rgb(0, 0, 0); }
.landing-page .chip.warn { background: rgb(180, 35, 47); color: rgb(255, 255, 255); }
.landing-page .chip.hold { background: rgba(0, 0, 0, 0.72); }
.landing-page #drop-kbps { margin-left: auto; }
.landing-page .tag-dot { --scene: #ff4b3e; }
.landing-page .drops { display: grid; grid-template-columns: minmax(0px, 1.1fr) minmax(0px, 0.9fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (max-width: 920px) {
  .landing-page .drops { grid-template-columns: minmax(0px, 1fr); }
}
.landing-page .drops-player { display: grid; gap: 12px; min-width: 0px; }
.landing-page .chart-box { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 8px 4px; }
.landing-page .chart-box svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; cursor: pointer; }
.landing-page .chart-box .tip { position: absolute; top: 6px; pointer-events: none; background: var(--raise); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: 500 .75rem/1.35 var(--mono); white-space: nowrap; transform: translateX(-50%); }
.landing-page .player-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.landing-page .player-controls .btn { min-height: 40px; padding: 0.5rem 0.9rem; font-size: 0.9375rem; }
.landing-page .steps-live { list-style: none; margin: 0px; padding: 0px; display: grid; gap: 4px; counter-reset: s 0; }
.landing-page .steps-live li { counter-increment: s 1; }
.landing-page .steps-live button { width: 100%; text-align: left; display: grid; grid-template-columns: 26px minmax(0px, 1fr); gap: 4px 12px; padding: 14px; border-radius: 12px; border: 1px solid transparent; background: transparent; color: var(--fg); cursor: pointer; font: inherit; }
.landing-page .steps-live button::before { content: counter(s); grid-row: span 2; font: 500 .8125rem/1.6 var(--mono); color: var(--muted); }
.landing-page .steps-live b { font-family: var(--display); font-stretch: 105%; font-size: 1.0625rem; display: inline-flex; align-items: center; gap: 8px; }
.landing-page .steps-live b i { width: 9px; height: 9px; border-radius: 2px; background: var(--dot); }
.landing-page .steps-live span { color: var(--muted); font-size: 0.9688rem; }
.landing-page .steps-live button:hover { background: var(--surface); }
.landing-page .steps-live button[aria-current="step"] { background: var(--surface); border-color: var(--line); }
.landing-page .steps-live button[aria-current="step"]::before { color: var(--accent-ink); }
.landing-page .bonding { margin-top: 16px; color: var(--muted); font-size: 0.9375rem; }
.landing-page .mode { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; padding: 3px; background: var(--surface); }
.landing-page .mode button { min-height: 36px; padding: 0px 14px; border: 0px; border-radius: 7px; background: transparent; color: var(--muted); font: 600 .875rem/1 var(--body); cursor: pointer; }
.landing-page .mode button[aria-pressed="true"] { background: var(--raise); color: var(--fg); }
.landing-page .priv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.landing-page .priv-grid { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 720px) {
  .landing-page .priv-grid { grid-template-columns: minmax(0px, 1fr); }
}
.landing-page .pane { display: grid; gap: 8px; min-width: 0px; }
.landing-page .pane-label { display: flex; justify-content: space-between; gap: 10px; }
.landing-page .pane .screen.leak { box-shadow: rgb(229, 72, 77) 0px 0px 0px 2px, rgba(0, 0, 0, 0.6) 0px 30px 60px -28px; }
.landing-page .queue { margin-block: 16px; display: grid; gap: 8px; }
.landing-page .queue-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; }
.landing-page .strip { display: grid; grid-template-columns: repeat(10, minmax(0px, 1fr)); gap: 4px; }
.landing-page .slot { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 5px; border: 1px solid var(--line); overflow: hidden; background: var(--raise); }
.landing-page .slot canvas { width: 100%; height: 100%; display: block; transition: opacity 0.45s, transform 0.45s; }
.landing-page .slot.gone { border-style: dashed; background: transparent; }
.landing-page .slot.gone canvas { opacity: 0; transform: translateY(70%) rotate(8deg); }
.landing-page .slot.leak { border-color: rgb(229, 72, 77); box-shadow: rgb(229, 72, 77) 0px 0px 0px 1px; }
.landing-page .queue-axis { display: flex; justify-content: space-between; color: var(--muted); }
.landing-page .priv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.landing-page .narration { color: var(--fg); max-width: 70ch; min-height: 3em; }
@media (prefers-reduced-motion: reduce) {
  .landing-page .slot canvas { transition: none; }
}
.landing-page { --accent-ink: var(--accent); --screen: #07080A; --screen-fg: var(--text); --screen-dim: var(--dim); --s-live: var(--accent); --s-low: var(--warn); --s-held: var(--warn); --s-brb: #3987E5; padding: 0px; font-size: 16px; }
.landing-page > div { min-height: 100dvh; }
.landing-page section { border: 0px; border-radius: 0px; background: transparent; }
.landing-page h1 { font-size: clamp(34px, 5vw, 56px); }
.landing-page h2 { font-size: 28px; }
.landing-page li { border: 0px; padding: 0px; }
.landing-header { position: sticky; top: 0px; z-index: 20; background: var(--bg); }
.landing-header > div { width: 100%; }
.landing-page .menu { position: relative; }
.landing-page #menu-button { min-height: 40px; }
.landing-page .landing-nav { position: absolute; top: calc(100% + 8px); right: 0px; padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; width: 220px; display: flex; flex-direction: column; align-items: stretch; z-index: 21; }
.landing-preview { position: relative; overflow: hidden; }
.landing-preview video { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; }
.landing-preview output { position: absolute; bottom: 16px; right: 16px; border-radius: 4px; background: rgba(16, 18, 20, 0.8); padding: 4px 8px; font: 12px var(--mono); }
.landing-page .landing-demo { max-width: 1200px; margin: auto; padding: 32px 24px 64px; border-top: 1px solid var(--line); }
.landing-demo .wrap { padding: 0px; max-width: none; }
.landing-currency { max-width: 200px; margin: 0px 0px 20px; }
.landing-page .landing-credits { max-width: 1200px; margin: auto; padding: 0px 24px 24px; color: var(--dim); font-size: 12px; }
.landing-page .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.landing-page .label { font-size: 12px; color: var(--dim); }
@media (min-width: 1000px) {
  .landing-page #menu-button { display: none; }
  .landing-page .landing-nav { position: static; flex-direction: row; align-items: center; padding: 0px; border: 0px; background: transparent; width: auto; }
}
@media (max-width: 599px) {
  .landing-page .landing-hero { padding-top: 40px; gap: 24px; }
  .landing-page .landing-hero h1 { font-size: 34px; }
  .landing-page .tier.main { padding: 24px; }
  .landing-page .landing-hero + section > div { grid-template-columns: 1fr; }
  .landing-page .landing-preview { min-height: 200px; }
}
/* Control panel: shell, navigation, settings and Live.
   Keep the mounted settings panels, sticky Privacy action and mobile overflow
   navigation intact when adjusting these layouts. */
.control-menu summary::after { content: ""; width: 24px; height: 24px; background: currentcolor; mask: var(--icon) center/24px no-repeat; }
.control-menu summary { display: inline-flex; background: transparent; color: var(--dim); font-size: 0px; flex: 0 0 auto; }
.control-menu summary::-webkit-details-marker { display: none; }
.control-menu summary:hover, .control-menu[open] summary { background: color-mix(in srgb,var(--dim) 8%,transparent); color: var(--dim); }
#scene-own button[aria-pressed="true"]::before { content: ""; width: 18px; height: 18px; background: currentcolor; mask: var(--i-check) center/18px no-repeat; }
.segmented button { flex: 1 1 0%; background: transparent; }
.segmented button:hover { background: color-mix(in srgb,var(--text) 8%,transparent); color: var(--text); }
.segmented button.danger { background: transparent; }
.segmented button[aria-pressed="true"]::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: currentcolor; mask: var(--i-check) center/18px no-repeat; }
#bgm:hover { background: transparent; }
#bgm::before { border: 2px solid var(--line-hi); }
#bgm:hover::before { background: radial-gradient(circle at 14px 50%,var(--dim) 0 8px,transparent 8.5px),var(--raise); }
#bgm:disabled { background: transparent; color: color-mix(in srgb,var(--text) 38%,transparent); }
#bgm:disabled::before { opacity: 0.38; }
.control-page { margin: 0px; }
#support-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-hi); background: var(--panel); }
#support-banner p { flex: 1 1 240px; min-width: 0; margin: 0; overflow-wrap: anywhere; font-size: 14px; }
#support-leave { margin: 0; }
.control-topbar { align-items: center; margin: 0px; border: 0px; }
.control-title { align-items: center; }
#operator-channel:empty { display: none; }
.control-actions { display: flex; align-items: center; gap: 4px; }
#open-obs::after { content: ""; width: 18px; height: 18px; background: currentcolor; mask: var(--icon) center/18px no-repeat; }
.control-menu { position: relative; margin: 0px; }
.control-menu nav { position: absolute; display: grid; border-radius: 8px; }
.control-menu a, .control-menu button { display: flex; border-radius: 0px; background: transparent; }
.control-menu a:hover, .control-menu button:hover { background: color-mix(in srgb,var(--text) 8%,transparent); color: var(--text); text-decoration: none; }
.control-status { align-items: center; }
#services:empty { display: none; }
.control-nav [role="tablist"] { display: flex; }
.control-nav [role="tab"] { display: flex; border: 0px; color: var(--dim); }
.control-nav [role="tab"]::before { content: ""; width: 56px; height: 32px; background: transparent; }
.nav-more::before { content: ""; }
.control-nav [role="tab"]::after { content: ""; position: absolute; }
.control-nav [role="tab"]:hover { color: var(--text); }
.control-nav [role="tab"]:hover::before, .nav-more:hover::before { background: color-mix(in srgb,var(--text) 8%,transparent); }
.control-nav [role="tab"][aria-selected="true"]::before, .nav-more.current::before { background: var(--accent-dim); }
.control-nav [role="tab"]:focus-visible::before, .nav-more:focus-visible::before { outline: 3px solid var(--accent); outline-offset: 2px; }
#tab-stream { --icon: var(--i-sensors); --icon-on: var(--i-sensors-fill); }
#tab-live { --icon: var(--i-cast); --icon-on: var(--i-cast-fill); }
#tab-video { --icon: var(--i-videocam); --icon-on: var(--i-videocam-fill); }
#tab-capture { --icon: var(--i-cast); --icon-on: var(--i-cast-fill); }
#tab-overlays { --icon: var(--i-widgets); --icon-on: var(--i-widgets-fill); }
#tab-brb { --icon: var(--i-pause-presentation); --icon-on: var(--i-pause-presentation-fill); }
#tab-alerts { --icon: var(--i-notifications); --icon-on: var(--i-notifications-fill); }
#tab-account { --icon: var(--i-account-circle); --icon-on: var(--i-account-circle-fill); }
#tab-more { --icon: var(--i-extension); --icon-on: var(--i-extension-fill); }
.nav-more { margin: 0px; border: 0px; display: none; }
.settings-panel > details { margin: 0px; }
@media (min-width: 1024px) {
  #tab-stream { display: none; }
}
@media (max-width: 599px) {
  .control-status::-webkit-scrollbar { display: none; }
  .control-status > *, #services > * { flex: 0 0 auto; }
  .control-nav [role="tablist"] { display: contents; }
  #tab-stream { grid-area: 6 / 1; }
  #tab-live { grid-area: 6 / 2; }
  #tab-overlays { grid-area: 6 / 3; }
  #tab-brb { grid-area: 6 / 4; }
  .nav-more { grid-area: 6 / 5; display: flex; }
  .control-nav [data-overflow] { display: none; grid-column: 1 / -1; }
  .control-nav.open::before { content: ""; position: absolute; top: 12px; left: 50%; width: 32px; height: 4px; margin-left: -16px; border-radius: 2px; background: color-mix(in srgb,var(--dim) 40%,transparent); }
  .control-nav.open [data-overflow] { color: var(--dim); }
  .control-nav.open [data-overflow]:hover { background: color-mix(in srgb,var(--text) 8%,transparent); }
  .control-nav.open [data-overflow]:last-of-type { margin-bottom: 12px; }
  .control-nav.open [data-overflow]:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
}
#services { gap: 12px; flex-wrap: wrap; }
.service { font-weight: 500; letter-spacing: 0.1px; min-height: 24px; line-height: 18px; }
.service .ok, .service .bad { font-size: 12px; }
.control-status .chip { border-left: 1px solid var(--line); padding-left: 16px; }
.segmented { border-radius: 8px; }
.segmented button + button { margin-left: -1px; border-left-color: transparent; }
#ingest-health { margin: 6px 0px 0px; }
#ingest-health li { padding: 6px 8px; border-left-width: 2px; }
#ingest-chart { height: 80px !important; }
#ingest-feeds button { min-height: 36px; font-size: 13px; padding: 0px 12px; }
#destination-list li button { min-height: 36px; margin-top: 0px; }
#delay-buttons button { padding: 0px 8px; }
.control-settings :is(#video-panel, #collections-panel) { max-width: 760px; }
#video-panel > :not(label) { grid-column: 1 / -1; }
@media (max-width: 599px) {
  .control-status .chip { border: 0px; padding: 0px; }
  #video-panel label { min-width: 0px; }
  #video-panel select { padding-left: 10px; padding-right: 32px; font-size: 14px; }
}
.nav-more::before { width: 56px; height: 32px; background: transparent; border-radius: 10px; }
.control-status .chip { font-weight: 400; border-radius: 0px; }
.control-live .card-title h2 { font-weight: 500; }
#music-card .card-title { grid-area: 1 / 1; }
#music-card #bgm-note { grid-column: 1 / -1; margin: 6px 0px 0px; }
#bgm::before { flex: 0 0 auto; border-radius: 14px; }
#bgm[aria-pressed="true"]::before { border-color: var(--accent); background: radial-gradient(circle at 30px 50%,var(--bg) 9px,transparent 10px),var(--accent); }
.signal-details #signal-card { margin: 0px; }
.signal-details #ingest-state { margin: 0px 0px 8px; }
.signal-details #ingest-health { margin-bottom: 6px; }
.settings-panel > section { margin: 0px; }
#destination-list { margin: 0px 0px 12px; }
#destination-list li { display: grid; align-items: center; }
#destination-list li > strong { grid-area: 1 / 1; }
#destination-list li > .sub { display: block; grid-area: 2 / 1; margin: 0px; font-size: 12px; }
#destination-list li > button { grid-row: 1 / span 2; margin: 0px; }
#destination-list li > button:nth-of-type(1) { grid-column: 2; }
#destination-list li > button:nth-of-type(2) { grid-column: 3; }
#destination-list li > button:nth-of-type(3) { grid-column: 4; }
#destination-list li > div { grid-column: 1 / -1; }
#destination-add { margin: 0px; padding-top: 4px; border-top: 0px; }
#destination-add > summary { justify-content: flex-start; color: var(--accent); gap: 10px; font-size: 14px; }
#destination-add > summary::before { content: "+"; width: 20px; text-align: center; font-size: 22px; font-weight: 400; }
#destination-add > summary::after { margin-left: 0px; }
#video-panel { display: grid; grid-template-columns: 1fr 1fr; max-width: none; column-gap: 18px; }
#video-current { margin: 0px 0px 18px; }
#video-panel .row { margin: 6px 0px 0px; }
#video-idle { margin: 2px 0px 12px; }
.collection-tools { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 6px; }
.collection-tools > summary { color: var(--accent); font-size: 14px; }
.collection-tools[open] > summary { margin-bottom: 12px; }
@media (max-width: 599px) {
  .control-status { scrollbar-width: none; overflow: visible; }
  #destination-list li > strong, #destination-list li > .sub { grid-column: 1 / -1; }
  #destination-list li > button { grid-row: 3; margin-top: 8px; }
  #destination-list li > button:nth-of-type(1) { grid-column: 1; }
  #destination-list li > button:nth-of-type(2) { grid-column: 2; }
  #destination-list li > button:nth-of-type(3) { grid-column: 3; }
  #video-panel { column-gap: 12px; }
}
.setup-page #delay-buttons button[aria-pressed="true"] { outline: 2px solid var(--accent); }
html.demo #throttle-panel { display: block; }
#throttle-panel { display: none; }
#throttle-panel .row button.on { outline: var(--ok) solid 2px; }
#stream-start { background: var(--action); border-color: var(--action); color: var(--action-ink); font-weight: 600; }
#stream-start:hover { background: var(--action-hover); color: var(--action-ink); box-shadow: none; }
#scene-privacy { background: transparent; border-color: var(--bad); color: var(--bad-text); }
#scene-privacy:hover { background: var(--bad-dim); color: var(--bad-text); }
#scene-privacy[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: var(--bad-ink); }
#scene-privacy[aria-pressed="true"]::before { display: none; }
.control-menu summary { align-items: center; justify-content: center; padding: 0px; border: 0px; cursor: pointer; --icon: var(--i-more-vert); list-style: none; border-radius: 8px; width: 36px; height: 36px; min-height: 36px; }
.control-page { max-width: none; padding: 0px; min-height: 100dvh; }
.control-topbar { position: sticky; top: 0px; z-index: 20; display: flex; justify-content: space-between; gap: 16px; min-height: 56px; padding: 8px 24px; border-bottom: 1px solid var(--line); background: var(--bg); }
.control-title { display: flex; min-width: 0px; gap: 14px; }
.control-title h1 { margin: 0px; font-size: 18px; line-height: 24px; font-weight: 700; }
#open-obs { --icon: var(--i-open-in-new); border-radius: 10px; min-height: 36px; color: var(--dim); border: 0px; background: transparent; margin: 0px; padding: 0px 8px; }
#open-obs:hover { background: var(--panel); color: var(--text); }
.control-menu nav { right: 0px; top: calc(100% + 4px); min-width: 224px; z-index: 30; gap: 0px; padding: 8px 0px; border: 1px solid var(--line); box-shadow: rgba(0, 0, 0, 0.533) 0px 8px 24px; background: var(--panel); }
.control-menu a, .control-menu button { align-items: center; min-height: 48px; padding: 0px 16px; margin: 0px; border: 0px; text-align: left; justify-content: flex-start; color: var(--text); letter-spacing: 0.25px; font: 400 14px/1.4 var(--body); }
#staff-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; letter-spacing: 0.1px; border: 1px solid var(--line-hi); border-radius: 6px; padding: 4px 8px; background: var(--panel); color: var(--dim); font: 12px/1.4 var(--body); }
#mod-chip { border: 1px solid var(--line-hi); border-radius: 6px; padding: 4px 8px; background: var(--panel); color: var(--dim); font: 12px/1.4 var(--body); }
.control-layout { display: grid; max-width: 1600px; margin: auto; padding: 0px; grid-template: "nav settings live" 1fr / 180px minmax(0px, 1fr) minmax(320px, 360px); gap: 0px; align-items: start; }
.control-nav { grid-area: 1 / nav / span 2; position: sticky; display: flex; flex-direction: column; min-height: calc(100dvh - 56px); top: 56px; padding: 20px 12px; border-right: 1px solid var(--line); align-items: stretch; gap: 2px; grid-row: 1; }
.control-nav [role="tablist"] { flex-direction: column; width: 100%; align-items: stretch; gap: 2px; }
.control-nav [role="tab"] { position: relative; margin: 0px; background: transparent; width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; min-height: 44px; padding: 10px 12px 10px 28px; border-radius: 8px; font: 400 14px/1.4 var(--body); letter-spacing: 0px; gap: 0px; white-space: normal; }
.nav-more { position: relative; background: transparent; color: var(--dim); --icon: var(--i-more-horiz); width: 100%; flex-direction: row; align-items: center; justify-content: flex-start; min-height: 44px; padding: 10px 12px 10px 28px; border-radius: 8px; font: 400 14px/1.4 var(--body); letter-spacing: 0px; gap: 0px; white-space: normal; }
.control-nav [role="tab"]::before { flex: 0 0 auto; transition: background-color 0.2s; border-radius: 10px; display: none; }
.nav-more::before { flex: 0 0 auto; transition: background-color 0.2s; display: none; }
.control-nav [role="tab"]::after { width: 6px; height: 6px; top: 50%; left: 12px; margin: -3px 0px 0px; border-radius: 50%; background: transparent; mask: none; }
.nav-more::after { content: ""; position: absolute; width: 6px; height: 6px; top: 50%; left: 12px; margin: -3px 0px 0px; border-radius: 50%; background: transparent; mask: none; }
.control-nav [role="tab"]:hover { background: var(--panel); }
.nav-more:hover { color: var(--text); background: var(--panel); }
.control-nav [role="tab"][aria-selected="true"], .nav-more.current { background: var(--panel); color: var(--text); font-weight: 600; }
.control-nav [role="tab"][aria-selected="true"]::after, .nav-more.current::after { background: var(--accent); mask: none; }
.control-nav [role="tab"]:focus-visible, .nav-more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.control-settings { grid-area: settings; padding: 28px; min-width: 0px; }
.settings-panel { display: grid; min-width: 0px; gap: 24px; max-width: none; }
.settings-panel > section { padding: 0px 0px 24px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0px; }
.settings-panel > section:first-child { padding-top: 0px; }
.settings-panel > section:last-child { border: 0px; padding-bottom: 0px; }
.settings-panel .card-title { margin: 0px 0px 20px; }
.settings-panel .card-title h2 { font-size: 24px; font-weight: 600; line-height: 1.25; }
.settings-panel > details { padding: 0px 0px 12px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0px; }
.control-live { grid-area: live; display: grid; min-width: 0px; grid-template-columns: minmax(0px, 1fr); align-content: start; position: sticky; top: 56px; max-width: none; min-height: calc(100dvh - 56px); padding: 24px; gap: 20px; border-top: 0px; border-right: 0px; border-bottom: 0px; border-image: none; border-left: 1px solid var(--line); border-radius: 0px; background: var(--shell); }
.control-live > section { padding: 0px; margin: 0px; border: 0px; background: transparent; border-radius: 0px; }
.control-live > section + section { padding: 0px; margin: 0px; border: 0px; }
.control-live .card-title { margin: 0px 0px 8px; }
.control-live .card-title h2 { font-size: 14px; color: var(--dim); }
.live-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.live-heading .help { width: 24px; min-height: 24px; height: 24px; margin-left: auto; }
.nav-small { display: none; }
@media (max-width: 599px) {
  .nav-wide { display: none; }
  .nav-small { display: inline; }
}
#stream-chip { display: flex; align-items: center; gap: 10px; font: 700 18px/1.4 var(--body); border: 0px; padding: 0px; color: var(--text); background: transparent; min-height: 0px; }
#stream-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--line-hi); }
#stream-chip[data-active="true"]::before { background: var(--accent); }
#stream-uptime { color: var(--dim); font: 14px/1.4 var(--mono); }
#preview, #preview-video { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; display: block; border-radius: 8px; border: 1px solid var(--line); margin: 0px; background: rgb(30, 34, 38); }
#stream-state { letter-spacing: 0px; margin: 8px 0px 0px; color: var(--dim); font-size: 13px; line-height: 1.4; }
#preview-note:empty, #bgm-note:empty { display: none; }
.control-layout:has(#panel-stream:not([hidden])) #stream-chip { display: flex; }
#scenes-card .card-title { display: flex; margin-bottom: 4px; }
#scene-state { font: 12px/1.4 var(--mono); margin: 0px 0px 8px; }
.segmented { flex-wrap: nowrap; display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; overflow: visible; border: 0px; }
.segmented button { min-width: 0px; min-height: 48px; border: 1px solid var(--line-hi); border-radius: 8px; font-weight: 700; font-size: 12px; padding: 0px 8px; color: var(--text); }
.segmented button:first-child, .segmented button:last-child { min-height: 48px; border: 1px solid var(--line-hi); border-radius: 8px; font-weight: 700; font-size: 12px; padding: 0px 8px; color: var(--text); }
.segmented button[aria-pressed="true"] { background: var(--action); color: var(--action-ink); border-color: var(--accent); }
.segmented button.danger { border-color: var(--bad); color: var(--bad-text); }
.segmented button.danger[aria-pressed="true"] { background: var(--bad); color: var(--bad-ink); }
#scene-own { display: flex; flex-wrap: wrap; margin: 8px 0px 0px; gap: 8px; }
#scene-own button { border: 1px solid var(--line); border-radius: 8px; min-height: 40px; flex: 1 1 0%; padding: 0px 10px; font-size: 12px; color: var(--dim); }
#scene-own button[aria-pressed="true"] { padding-left: 8px; background: var(--accent-dim); color: var(--text); }
.live-metrics { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--line); }
#services { margin: 0px; display: contents; }
.service { padding: 12px 14px; border: 0px; border-radius: 0px; min-width: 0px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: var(--shell); font-size: 13px; color: var(--dim); }
.service strong { font-size: 11px; font-weight: 500; color: var(--dim); letter-spacing: 0.07em; text-transform: uppercase; }
.service > div { color: var(--text); font: 15px/1.4 var(--mono); }
.service > div.bad { color: var(--bad-text); }
.service .metric-detail { color: var(--dim); font: 11px/1.4 var(--mono); }
#music-card { grid-template-columns: minmax(0px, 1fr) auto; margin: 0px; border: 0px; border-radius: 0px; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; padding: 12px 14px; background: var(--shell); flex-wrap: wrap; }
#music-card .card-title { margin: 0px; flex-basis: 100%; }
#music-card .card-title h2 { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--dim); }
#music-card .card-title .help { width: 24px; min-height: 24px; height: 24px; margin: 0px; }
#music-card .row { grid-area: 1 / 2; margin: 0px; width: 100%; }
#bgm { display: inline-flex; align-items: center; padding: 0px; border: 0px; background: transparent; font-weight: 400; letter-spacing: 0.25px; gap: 8px; font-size: 12px; min-height: 24px; color: var(--text); }
#bgm::before { content: ""; box-sizing: border-box; transition: background 0.2s, border-color 0.2s; width: 44px; height: 28px; background: radial-gradient(circle at 12px 50%,var(--line-hi) 8px,transparent 9px); display: none; }
#bgm::after { content: "Ⅱ"; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-hi); border-radius: 4px; font: 12px var(--mono); }
#bgm[aria-pressed="false"]::after { content: "▷"; }
#bgm[aria-pressed="true"] { background: transparent; color: var(--text); }
#bgm-note { margin: 0px; font-size: 11px; }
.control-status { grid-area: auto; display: flex; padding: 0px; margin: 0px; flex-wrap: wrap; gap: 4px 12px; }
.signal-details { border-top: 1px solid var(--line); padding-top: 4px; margin: 0px; }
.signal-details > summary { color: var(--dim); min-height: 40px; font-size: 13px; }
.signal-details #signal-card { border: 0px; border-radius: 0px; background: transparent; padding: 8px 0px 0px; }
.control-live:has(#stream-stop:not(:disabled)) #stream-start:disabled, .control-live:has(#stream-start:not(:disabled)) #stream-stop:disabled { display: none; }
#destination-list li { padding: 16px 0px; gap: 8px; grid-template-columns: minmax(0px, 1fr) repeat(3, auto); }
#destination-list li > strong { display: block; margin: 0px; font-weight: 600; font-size: 16px; }
#destination-list li > button { border-radius: 8px; padding: 0px 10px; min-height: 40px; }
.shared-format { display: flex; flex-direction: column; gap: 4px; margin: 0px 0px 20px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 8px; }
.shared-format span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--dim); }
.shared-format output { font: 15px/1.5 var(--mono); }
#delay-buttons { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); max-width: 420px; gap: 0px; border: 1px solid var(--line-hi); border-radius: 8px; overflow: hidden; }
#delay-buttons button { border: 0px; border-radius: 0px; font-family: var(--mono); min-height: 40px; }
#delay-buttons button + button { border-left: 1px solid var(--line-hi); }
#delay-buttons button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
@media (min-width: 1024px) {
  .control-nav #tab-stream { display: none; }
}
@media (max-width: 1023px) {
  .control-layout { grid-template-columns: 148px minmax(0px, 1fr); grid-template-areas: "nav main"; gap: 0px; padding: 0px; }
  .control-settings { grid-area: main; min-height: 0px; position: static; border: 0px; }
  .control-live { grid-area: main; min-height: 0px; position: static; border: 0px; max-width: none; }
  .control-status { padding: 0px; }
}
@media (max-width: 599px) {
  .control-page { padding-bottom: calc(76px + env(safe-area-inset-bottom,0px)); }
  .control-topbar { padding: 8px 12px; gap: 8px; }
  .control-title { gap: 8px; }
  .control-title h1 { font-size: 16px; }
  .control-title .brand-mark { width: 26px; height: 26px; font-size: 16px; }
  .control-actions { gap: 0px; }
  .control-actions > .help { display: none; }
  #open-obs { font-size: 0px; padding: 0px 6px; min-height: 36px; }
  .control-layout { display: block; padding: 0px; }
  .control-live { padding: 20px 16px; gap: 16px; min-height: 0px; border: 0px; border-radius: 0px; background: var(--bg); }
  .control-settings { padding: 20px 16px; }
  .control-nav { transition: border-radius 0.2s; position: fixed; inset: auto 0px 0px; z-index: 40; display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); align-items: start; min-height: 0px; padding: 8px 0 calc(8px + env(safe-area-inset-bottom,0px)); border-top: 1px solid var(--line); border-right: 0px; background: var(--panel); gap: 0px; }
  .control-nav [role="tab"], .nav-more { flex-direction: column; justify-content: center; align-items: center; padding: 0px; min-height: 48px; width: auto; gap: 6px; font: 500 11px/1.3 var(--body); color: var(--dim); border-radius: 0px; }
  .control-nav [role="tab"]::before, .nav-more::before { display: block; width: 20px; height: 20px; border-radius: 0px; background: currentcolor; mask: var(--icon) center/20px no-repeat; }
  .control-nav [role="tab"]::after, .nav-more::after { display: none; }
  .control-nav [role="tab"][aria-selected="true"], .nav-more.current { background: transparent; color: var(--accent); font-weight: 600; }
  .control-nav [role="tab"][aria-selected="true"]::before, .nav-more.current::before { background: currentcolor; }
  .control-nav.open { box-shadow: rgba(0, 0, 0, 0.32) 0px 0px 0px 100vmax; border-radius: 12px 12px 0px 0px; padding-top: 24px; }
  .control-nav.open [data-overflow] { display: flex; flex-direction: row; justify-content: flex-start; letter-spacing: 0.5px; min-height: 48px; margin: 0px 8px; padding: 0px 12px; border-radius: 8px; font: 400 15px/1.4 var(--body); gap: 12px; }
  .control-nav.open [data-overflow]::before { display: block; }
  .control-nav.open [data-overflow]::after { position: static; order: -1; margin: 0px; flex: 0 0 auto; display: none; }
  .control-nav.open [data-overflow][aria-selected="true"] { background: var(--raise); color: var(--accent); }
  .settings-panel .card-title h2 { font-size: 24px; }
  #services { flex-wrap: wrap; gap: 2px 12px; flex-basis: 100%; display: contents; }
  .live-metrics { background: var(--line); }
  .service, #music-card { background: var(--panel); }
  #destination-list li { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
}
#quick-privacy { min-height: 36px; padding: 0px 10px; font-size: 12px; }
.service > div.muted { color: var(--dim); }
#stream-chip[data-active="unknown"]::before { background: var(--warn); }
@media (min-width: 1024px) {
  .control-live { max-height: calc(100dvh - 56px); overflow-y: auto; }
}
#stream-state[data-normal="true"] { position: absolute; width: 1px; height: 1px; padding: 0px; margin: 0px; overflow: hidden; clip-path: inset(50%); }
.control-title > div { min-width: 0px; }
#operator-channel { margin: 0px; color: var(--dim); font: 12px/14px var(--mono); letter-spacing: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.control-actions { flex-shrink: 0; }
.control-menu .menu-identity { padding: 12px 16px; color: var(--dim); font-size: 13px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
#video-panel select { font-family: var(--mono); }
.control-page .control-nav [role="tab"]::after { display: none; }
.control-page #stream-card { position: relative; padding: 0; margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
.control-page #stream-card .live-heading { margin: 0; padding: 12px 16px; }
.control-page #stream-chip { font: 600 12px/1.4 var(--body); letter-spacing: 0.06em; }
.control-page #stream-chip[data-active="true"] { color: var(--accent); }
.control-page #stream-chip[data-active="unknown"] { color: var(--warn); }
.control-page #stream-uptime { font: 12px/1.4 var(--mono); color: var(--dim); }
.control-page .preview-frame { position: relative; background: #000; }
.control-page .preview-frame:has(#preview[hidden]) { aspect-ratio: auto; }
.control-page :is(#preview, #preview-video) { border: 0; border-radius: 0; background: #000; }
.control-page #preview-age { position: absolute; right: 10px; bottom: 8px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: #e9ece6; font: 11px/1.4 var(--mono); }
.control-page #preview-note { margin: 0; padding: 14px 16px; background: var(--shell); }
.control-page #scenes-card { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 12px 16px 14px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.control-page #scenes-card .card-title { order: 2; margin: 0; }
.control-page #scenes-card .card-title h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.control-page #scenes-card .segmented { order: 1; flex: 1 1 0; margin: 0; }
.control-page #scenes-card :is(#scene-state, #scene-error, #last-stream, #scene-own) { order: 3; flex-basis: 100%; margin: 0; }
.control-page #scene-error { color: var(--bad-text); }
.control-page #scene-state:empty { display: none; }
.control-page #scenes-card[data-stale="true"] .segmented button[aria-pressed="true"] { opacity: 0.5; }
.control-page .segmented button { background: var(--raise); border-color: var(--line-hi); color: var(--text); font-weight: 600; font-size: 13px; letter-spacing: 0; }
.control-page .segmented button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.control-page .segmented button.danger { background: transparent; border-color: color-mix(in srgb, var(--bad) 70%, transparent); color: var(--bad-text); flex: 0 0 auto; }
.control-page .segmented button.danger[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: var(--bad-ink); }
.control-page #stream-card > #plan-note, .control-page #stream-card > #stream-state { margin: 0; padding: 0 16px 12px; }
.control-page #stream-state[data-normal="true"] { display: none; }
.control-page .live-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.control-page .live-actions #music-card { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; flex: 0 1 auto; padding: 0; margin: 0; border: 0; background: transparent; }
.control-page .live-actions #music-card .card-title { flex-basis: auto; order: 1; margin: 0; gap: 6px; }
.control-page .live-actions #music-card .card-title h2 { font: 500 13px/1.4 var(--body); text-transform: none; letter-spacing: 0; color: var(--text); }
.control-page .live-actions #music-card .row { width: auto; order: 2; margin: 0; }
.control-page .live-actions #bgm-note { order: 3; flex-basis: 100%; margin: 0; }
.control-page .live-actions #bgm-note:empty { display: none; }
.control-page .live-actions .stream-actions { position: static; display: flex; gap: 8px; margin: 0; padding: 0; background: transparent; flex: 0 1 auto; }
.control-page .live-actions .stream-actions > button { flex: 0 1 auto; min-width: 140px; min-height: 44px; }
.control-page #stream-stop:not(:disabled) { background: var(--stop); border-color: transparent; color: #fff; font-weight: 600; }
.control-page #stream-stop:not(:disabled):hover { background: var(--stop-hover); color: #fff; }
.control-page #live-outputs { margin: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.control-page #live-outputs .card-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.control-page #live-outputs .card-title h2 { font: 600 15px/1.4 var(--body); color: var(--text); margin: 0; }
.control-page #live-outputs-count { font: 12px/1.4 var(--mono); color: var(--dim); }
.control-page .text-button { margin-left: auto; min-height: 32px; padding: 0 4px; border: 0; background: transparent; color: var(--dim); font-size: 13px; }
.control-page .text-button:hover { color: var(--text); background: transparent; }
.control-page #live-outputs-list { margin: 0; padding: 0; }
.control-page #live-outputs-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 0; border-top: 1px solid var(--line); margin: 0; }
.control-page #live-outputs-list li strong { font-weight: 600; overflow-wrap: anywhere; }
.control-page #live-outputs-list .detail { grid-column: 1 / -1; color: var(--dim); font-size: 12px; }
.control-page .pill { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--raise); color: var(--dim); }
.control-page .pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentcolor; }
.control-page .pill[data-tone="ok"] { background: var(--accent-dim); color: var(--accent); }
.control-page .pill[data-tone="warn"] { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.control-page .pill[data-tone="bad"] { background: color-mix(in srgb, var(--bad) 16%, transparent); color: var(--bad-text); white-space: normal; }
.control-page #live-outputs[data-unknown="true"] .pill { color: var(--warn); }
.control-page #live-outputs .shared-format { margin: 4px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); background: transparent; }
.control-page #live-outputs-empty { margin: 8px 0; }
.control-page .live-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; border: 0; background: transparent; overflow: visible; }
.control-page .live-metrics :is(.service, .delay-metric) { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.control-page .live-metrics .service strong, .control-page .delay-metric span { font: 500 12px/1.4 var(--body); text-transform: none; letter-spacing: 0; color: var(--dim); }
.control-page .live-metrics .service > div, .control-page .delay-metric output { font: 500 18px/1.4 var(--body); color: var(--text); }
.control-page .live-metrics .service > div.bad { color: var(--bad-text); }
.control-page .live-metrics .service > div.muted { color: var(--dim); }
.control-page .live-metrics .service .metric-detail { font: 12px/1.4 var(--body); }
.control-page .settings-panel:not([hidden]) { display: grid; gap: 16px; align-content: start; }
.control-page .settings-panel > section { padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.control-page .settings-panel > section + section { margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.control-page .settings-panel > details { padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); margin: 0; padding-top: 20px; border-top: 1px solid var(--line); }
.control-page .settings-panel .card-title h2 { font-size: 20px; font-weight: 600; }
.control-page .settings-panel .shared-format { background: var(--shell); }
@media (min-width: 600px) {
  .control-page .control-nav [role="tab"] { gap: 12px; padding: 10px 12px; min-height: 44px; border-radius: 10px; }
  .control-page .control-nav [role="tab"]::before { display: block; width: 20px; height: 20px; border-radius: 0; background: currentcolor; mask: var(--icon) center/20px no-repeat; transition: none; }
  .control-page .control-nav [role="tab"][aria-selected="true"] { background: var(--action); color: var(--action-ink); font-weight: 600; }
  .control-page .control-nav [role="tab"][aria-selected="true"]::before { background: currentcolor; mask-image: var(--icon-on, var(--icon)); }
  .control-page .control-nav [role="tab"]:hover:not([aria-selected="true"]) { background: var(--raise); }
}
@media (min-width: 1024px) {
  .control-page .control-nav #tab-stream { display: flex; }
  .control-page .control-layout { max-width: none; grid-template: "nav settings live" 1fr / 200px minmax(0, 1fr) minmax(300px, 340px); }
  .control-page .control-layout[data-current="tab-stream"] { grid-template: "nav live" 1fr / 200px minmax(0, 1fr); }
  .control-page .control-layout[data-current="tab-stream"] .control-settings { display: none; }
  .control-page [data-current="tab-stream"] .control-live { position: static; max-height: none; overflow: visible; min-height: calc(100dvh - 56px); padding: 28px 32px; border: 0; gap: 20px 22px; align-items: start; background: var(--bg); grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); grid-template-areas: "program outputs" "actions outputs" "metrics metrics" "signal signal"; }
  .control-page [data-current="tab-stream"] #stream-card { grid-area: program; }
  .control-page [data-current="tab-stream"] .live-actions { grid-area: actions; }
  .control-page [data-current="tab-stream"] #live-outputs { grid-area: outputs; align-self: start; }
  .control-page [data-current="tab-stream"] .live-metrics { grid-area: metrics; }
  .control-page [data-current="tab-stream"] .signal-details { grid-area: signal; }
  .control-page [data-current="tab-stream"] .control-status, .control-page .control-layout:not([data-current="tab-stream"]) :is(#live-outputs, .delay-metric, .signal-details) { display: none; }
  .control-page .control-layout:not([data-current="tab-stream"]) .live-actions { flex-direction: column; align-items: stretch; }
  .control-page .control-layout:not([data-current="tab-stream"]) #scenes-card .card-title { display: none; }
  .control-page .control-layout:not([data-current="tab-stream"]) .segmented button { font-size: 12px; padding: 0 4px; white-space: nowrap; }
  .control-page .control-layout:not([data-current="tab-stream"]) .segmented button::before { display: none; }
  .control-page .control-layout:not([data-current="tab-stream"]) .live-actions .stream-actions > button { flex: 1 1 0; min-width: 0; }
  .control-page .control-layout:not([data-current="tab-stream"]) .live-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .control-page .control-layout:not([data-current="tab-stream"]) .live-metrics :is(.service, .delay-metric) { padding: 10px 12px; }
  .control-page .control-layout:not([data-current="tab-stream"]) .live-metrics .service > div { font-size: 14px; }
}
@media (max-width: 1023px) {
  .control-page .control-live { gap: 16px; }
  .control-page .control-status { display: none; }
}
@media (max-width: 599px) {
  .control-page .live-actions .stream-actions { position: static; flex: 1 1 100%; }
  .control-page .segmented button { padding: 0 6px; white-space: nowrap; }
  .control-page .segmented button::before { display: none; }
  .control-page .live-actions .stream-actions > button { flex: 1 1 0; min-width: 0; }
  .control-page .live-metrics { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
  .control-page .live-metrics :is(.service, .delay-metric) { padding: 10px 12px; }
  .control-page .live-metrics .service > div, .control-page .delay-metric output { font-size: 15px; }
  .control-page .settings-panel > section, .control-page .settings-panel > details { padding: 16px; }
}
.control-page #destination-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 12px; }
.control-page #destination-list li > strong { grid-column: 1; grid-row: 1; }
.control-page #destination-list li > .sub { grid-column: 1; grid-row: 2; margin: 0; }
.control-page #destination-list li > button { grid-row: 1 / span 2; grid-column: auto; margin: 0; }
.control-page #destination-list li > .destination-edit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.control-page #destination-list li > .destination-edit[hidden] { display: none; }
.control-page #destination-list .destination-edit input { flex: 1 1 220px; min-width: 0; }
.control-page .switch { position: relative; width: 48px; min-width: 48px; height: 28px; min-height: 28px; padding: 0; border: 1px solid var(--line-hi); border-radius: 14px; background: var(--raise); }
.control-page .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--dim); transition: transform 0.15s; }
.control-page .switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
.control-page .switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--bg); }
.control-page .switch:hover { background: var(--line-hi); }
.control-page .switch[aria-checked="true"]:hover { background: var(--accent); filter: brightness(1.08); }
@media (prefers-reduced-motion: reduce) {
  .control-page .switch::after { transition: none; }
}
.control-page #destination-list li > .switch { width: 48px; min-width: 48px; height: 28px; min-height: 28px; max-height: 28px; padding: 0; align-self: center; flex: none; }
/* Phone remote */
.remote-head { display: flex; gap: 12px; }
.remote-head output { margin-left: auto; }
.remote-page #scenes button:hover { background: var(--raise); }
.remote-page #scenes button[aria-pressed="true"]::before { display: none; }
.remote-page #stream-controls .buttons { display: flex; }
.remote-page #err:empty { display: none; }
.remote-page.off #scenes button, .remote-page.off #music { opacity: 0.38; pointer-events: none; }
.remote-page #music .dot { border: 1px solid var(--line-hi); background: radial-gradient(circle at 11px 50%,var(--dim) 7px,transparent 8px); }
.remote-page #music[aria-pressed="true"] .dot { border-color: var(--accent); background: radial-gradient(circle at 25px 50%,var(--bg) 8px,transparent 9px),var(--accent); }
.remote-page #music .state { color: var(--dim); margin-left: auto; }
.remote-page { margin: auto; max-width: 460px; display: flex; flex-direction: column; padding: 20px 16px calc(20px + env(safe-area-inset-bottom,0px)); gap: 14px; min-height: 100dvh; }
.remote-head { justify-content: space-between; align-items: center; margin: 0px; min-height: 36px; }
.remote-head h1 { line-height: 28px; font-size: 16px; font-weight: 600; }
.remote-head a { font-size: 12px; color: var(--dim); }
.remote-page #scenes button { display: flex; align-items: center; border: 1px solid var(--line-hi); }
.remote-page #scenes button + button { border: 1px solid var(--line-hi); }
.remote-page #scenes button .dot { display: none; }
.remote-page #stream-controls { margin: 0px; }
.remote-page #stream-controls .buttons { gap: 10px; }
.remote-page #stream-controls button { border-radius: 12px; }
.remote-page #stream-stop { color: var(--bad-text); border-color: var(--bad); }
.remote-page #stream-stop:disabled { color: var(--disabled); border-color: var(--line); }
.remote-page #music[aria-pressed="true"] { background: var(--panel); border-color: var(--line); color: var(--text); }
.remote-page #music .dot { width: 38px; height: 24px; border-radius: 12px; display: none; }
.remote-page #music::before { display: grid; place-items: center; border: 1px solid var(--line-hi); font: 20px var(--mono); }
.remote-page #music[aria-pressed="true"]::before { content: "Ⅱ"; }
.remote-page #rehearsal-panel { margin: 0px; padding: 0px; border: 0px; }
.remote-page #rehearsal-panel > summary { min-height: 36px; color: var(--dim); font-size: 13px; }
#remote-uptime { color: var(--dim); font: 13px var(--mono); margin-left: auto; }
body.remote-page { gap: 12px; padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
.remote-page .remote-head { min-height: 40px; }
.remote-page .remote-state { display: flex; align-items: center; gap: 10px; }
.remote-page .remote-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-hi); border: 0; }
.remote-page[data-state="on"] .remote-state .dot { background: var(--accent); }
.remote-page[data-state="unknown"] .remote-state .dot { background: var(--warn); }
.remote-page .remote-head h1 { font: 600 26px/1.15 var(--body); letter-spacing: -0.02em; margin: 0; }
.remote-page #remote-uptime { font: 13px/1.4 var(--mono); color: var(--dim); }
.remote-page .remote-links { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: -6px; }
.remote-page .remote-links a { font-size: 13px; color: var(--dim); }
.remote-page #preview-toggle { font-size: 13px; color: var(--dim); min-height: 36px; padding: 0 2px; border: 0; background: transparent; }
.remote-page #preview-toggle:hover { color: var(--text); background: transparent; }
.remote-page #err { margin: 0px; white-space: pre-line; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); font-size: 13px; min-height: 0; }
.remote-page #remote-preview { position: relative; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #000; }
.remote-page :is(#remote-picture, #remote-video) { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.remote-page #remote-preview-age { position: absolute; right: 8px; bottom: 6px; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: #e9ece6; font: 11px/1.4 var(--mono); }
.remote-page #remote-preview-note { margin: 0; padding: 12px; color: var(--dim); font-size: 13px; background: var(--panel); }
.remote-page #remote-preview-note:empty { display: none; }
.remote-page #outputs { margin: 0; padding: 0 14px; max-height: 172px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.remote-page #outputs li { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 42px; margin: 0; padding: 0; border: 0; font-size: 14px; }
.remote-page #outputs li + li { border-top: 1px solid var(--line); }
.remote-page #outputs .phase { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dim); white-space: nowrap; }
.remote-page #outputs .phase::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentcolor; }
.remote-page #outputs .phase[data-tone="ok"] { color: var(--accent); }
.remote-page #outputs .phase[data-tone="warn"], .remote-page #outputs .phase[data-tone="unknown"] { color: var(--warn); }
.remote-page #outputs .phase[data-tone="bad"] { color: var(--bad-text); white-space: normal; text-align: right; }
.remote-page .remote-signal { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--dim); }
.remote-page .remote-signal:has(span:empty + span:empty) { display: none; }
.remote-page #remote-phone[data-tone="warn"] { color: var(--warn); }
.remote-page #scenes { display: grid; border: 0px; border-radius: 0px; background: transparent; overflow: visible; flex: 0 0 auto; grid-template-rows: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.remote-page #scenes button { gap: 16px; width: 100%; color: var(--text); letter-spacing: 0.04em; min-height: 88px; padding: 14px 16px; justify-content: flex-start; text-align: left; border-radius: 14px; background: var(--raise); font: 500 20px/1.2 var(--body); }
.remote-page #scenes button[aria-pressed="true"] { box-shadow: none; background: var(--text); border-color: var(--text); color: var(--bg); }
.remote-page #scenes #privacy { grid-column: 1 / -1; min-height: 60px; justify-content: center; font-size: 17px; border: 1px solid color-mix(in srgb, var(--bad) 70%, transparent); background: var(--bad-dim); color: var(--bad-text); }
.remote-page #scenes #privacy[aria-pressed="true"] { box-shadow: none; background: var(--bad); border-color: var(--bad); color: var(--bad-ink); }
.remote-page #music { width: 100%; display: flex; align-items: center; justify-content: flex-start; margin: 0px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--text); gap: 12px; min-height: 52px; font-size: 15px; }
.remote-page #music::before { content: "▷"; width: 32px; height: 32px; border-radius: 50%; font-size: 14px; }
.remote-page #stream-controls button { flex: 1 1 0%; min-height: 52px; font-size: 16px; font-weight: 600; }
.remote-page #stream-stop:not(:disabled) { background: var(--stop); border-color: transparent; color: #fff; }
.remote-page #stream-state[data-normal="true"] { display: none; }
/* Shared disabled control states follow components so menu buttons inherit
   the same unavailable appearance as other controls. */
button.danger:disabled:hover { color: var(--disabled); background: transparent; border-color: var(--line); }
button:disabled, button:disabled:hover { opacity: 1; color: var(--disabled); border-color: var(--line); background: transparent; box-shadow: none; cursor: default; }
button.primary:disabled, button.danger:disabled, #stream-start:disabled { color: var(--disabled); border-color: var(--line); background: transparent; box-shadow: none; cursor: default; }
.btn[aria-disabled="true"] { opacity: 1; color: var(--disabled); border-color: var(--line); background: transparent; box-shadow: none; cursor: default; }
.account-credentials dd{margin-inline:0;overflow-wrap:anywhere}

/* Owner setup above the working control room. The guide scrolls within its
   frame; the close/minimise controls remain in view at phone widths. */
#setup-overlay { width: min(760px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; }
#setup-overlay::backdrop { background: rgb(0 0 0 / 65%); }
.setup-modal-content { display: flex; flex-direction: column; max-height: calc(100dvh - 26px); min-width: 0; }
.setup-modal-content > header, .setup-modal-content > footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; flex: 0 0 auto; }
.setup-modal-content > header { border-bottom: 1px solid var(--line); }
.setup-modal-content > header h2 { margin: 0; }
.setup-modal-content > footer { border-top: 1px solid var(--line); flex-wrap: wrap; }
.setup-modal-content > footer label { display: flex; align-items: center; gap: 8px; margin: 0; }
.setup-modal-content > iframe { border: 0; width: 100%; height: min(650px, 68dvh); min-height: 160px; flex: 1 1 auto; background: var(--bg); }
.setup-close { font-size: 24px; line-height: 1; min-width: 44px; min-height: 44px; padding: 4px; }
.setup-page.setup-embedded { max-width: none; margin: 0; padding: 16px; }
.setup-embedded .setup-head { display: none; }
.setup-minimised { pointer-events: none; position: fixed; z-index: 80; width: min(320px, calc(100vw - 24px)); padding: 16px; border: 1px solid var(--accent); border-radius: 10px; color: var(--text); background: var(--panel); box-shadow: 0 8px 24px rgb(0 0 0 / 35%); overflow-wrap: anywhere; }
.setup-reminder { box-shadow: 0 4px 16px rgb(0 0 0 / 25%); }
.session-notice { margin: 12px 16px; padding: 12px 16px; border: 1px solid var(--line-hi); border-radius: 10px; color: var(--text); background: var(--panel); }
.session-notice p { margin: 0 0 8px; }
/* Private desktop layout editor, scoped to the Control room. */
.capture-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg);border:1px solid var(--edge);border-radius:var(--radius,8px);isolation:isolate}
.capture-frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.capture-picture{position:absolute;border:2px solid var(--muted);background:var(--panel);color:var(--text);touch-action:none;min-width:0;overflow:hidden;cursor:move}
.capture-frame:has(>img:not([hidden])) .capture-picture{background:transparent}
.capture-picture[data-selected=true]{border-color:var(--accent)}
.capture-picture>span:first-child{font-family:var(--mono);font-size:.75rem;background:var(--panel);padding:2px 4px}
[data-capture-resize]{position:absolute;right:0;bottom:0;min-width:44px;min-height:44px;display:grid;place-items:center;background:var(--panel);cursor:nwse-resize}
.capture-coordinates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.capture-coordinates label,.capture-coordinates input{min-width:0;width:100%;box-sizing:border-box}
/* Computer capture setup stays within the same phone-safe settings column. */
.capture-device-fields{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.capture-device-fields label,.capture-device-fields select{min-width:0;width:100%;box-sizing:border-box}
.capture-pairing{display:grid;gap:10px;max-width:100%;min-width:0;margin:16px 0;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px}
.capture-pairing code{display:block;max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;font-family:var(--mono)}
.capture-pairing [data-pair-code]{font-size:1.2rem;letter-spacing:.04em}
#capture-helper-panel fieldset{min-width:0;margin:16px 0;padding:12px;border:1px solid var(--line);border-radius:10px}
.capture-sharing{margin-top:16px}

/* Signed out: a thin bar across the top of the account and landing pages. */
.topbar { position: sticky; top: 0px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 28px; padding: 0px 16px; background: var(--action); color: var(--action-ink); font: 600 13px/1 var(--body); white-space: nowrap; }
.topbar a { color: var(--action-ink); text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar .topbar-pitch { min-width: 0px; overflow: hidden; text-overflow: ellipsis; }
.topbar nav { display: flex; gap: 16px; flex: none; }
.topbar .topbar-cta { text-decoration: underline; text-underline-offset: 3px; }
.landing-page .landing-header { top: 28px; }
@media (max-width: 560px) { .topbar .topbar-more { display: none; } }

/* The cookie question, once per browser, at the foot of an account page. */
.consent { position: sticky; bottom: 0px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 16px; background: var(--panel); border-top: 1px solid var(--line); font-size: 14px; }
.consent span { flex: 1 1 16rem; }
.consent .btn { min-height: 32px; padding: 4px 14px; }
.account-page label.check { display: inline-flex; align-items: center; gap: 6px; }
.account-page form.inline { display: inline; margin-left: 8px; }