:root { font-family: Arial, Helvetica, sans-serif; color: #111; background: #fff; font-synthesis: none; }
* { box-sizing: border-box; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
body { margin: 0; -webkit-text-size-adjust: 100%; }
button, input, textarea { font: inherit; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #a6242b; outline-offset: 3px; }
button:disabled { cursor: default; opacity: .4; }
[hidden] { display: none !important; }
.welcome-shell { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; background: #f4f3ef; }
.welcome-card { width: min(100%, 430px); padding: 32px; border: 1px solid #ddd9d1; border-radius: 12px; background: #fff; box-shadow: 0 16px 45px rgba(50, 45, 35, .08); }
.welcome-card h1 { font-size: 36px; }
.welcome-copy { color: #625f59; line-height: 1.55; margin: 14px 0 24px; }
.welcome-card input { width: 100%; min-height: 50px; border: 1px solid #c9c4ba; border-radius: 7px; padding: 10px 12px; margin-bottom: 16px; }
.welcome-card .display-button { width: 100%; margin-top: 4px; }
.link-button { display: block; margin: 16px auto 0; border: 0; background: transparent; color: #6f2027; text-decoration: underline; }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; margin: 0 0 18px; }
.expiry-setting { display: flex; align-items: center; gap: 7px; margin: 0 auto 0 0; color: #625f59; font-size: 11px; }
.cue-card { position: relative; background: var(--card-bg, #fff); color: var(--card-fg, #000); font-family: var(--card-font, Arial), Helvetica, sans-serif; overflow: hidden; container-type: inline-size; }
.cue-card::after { content: ''; position: absolute; inset: 2.5%; border: max(1px, .13cqw) solid var(--card-fg, #111); pointer-events: none; }
.cue-card[data-border="off"]::after { display: none; }
.cue-card[data-kind="blank"]::after, .cue-card[data-kind="blank"] .festival-logo { display: none; }
.cue-area { position: absolute; inset: 7% 7% 22%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cue-type { width: 100%; font-weight: var(--card-weight, 900); text-align: center; line-height: .98; white-space: pre-wrap; overflow-wrap: anywhere; letter-spacing: -.035em; }
.cue-type .number { display: block; line-height: .88; letter-spacing: -.055em; }
.cue-type .unit { display: block; font-size: .235em; line-height: 1.2; letter-spacing: .015em; margin-top: .19em; }
.cue-type .prefix { display: block; font-size: .28em; line-height: 1.2; letter-spacing: 0; margin-bottom: .12em; }
.cue-type .main { display: block; line-height: .93; }
.cue-type .number, .cue-type .unit, .cue-type .prefix, .cue-type .main { white-space: nowrap; }
.cue-card[data-kind="countdown"] .cue-type { font-variant-numeric: tabular-nums; letter-spacing: -.055em; white-space: nowrap; }
.festival-logo { position: absolute; right: 5.2%; bottom: 5%; width: 19%; height: 14%; }
.festival-logo img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.logo-picker { margin-top: 18px; padding: 15px; background: #fff; border: 1px solid #ddd9d1; border-radius: 9px; }
.logo-options { display: grid; grid-template-columns: 1fr 1fr 1.45fr; gap: 8px; }
.logo-options button { min-height: 52px; padding: 8px 5px; border: 1px solid #c9c4ba; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 700; }
.logo-options button[aria-pressed="true"] { border: 2px solid #a6242b; background: #fffafa; }
.logo-upload { margin-top: 13px; }
.logo-upload input { width: 100%; min-height: 48px; font-size: 13px; }
.logo-upload input::file-selector-button { min-height: 45px; border: 1px solid #bbb5aa; border-radius: 5px; background: #fff; padding: 8px 12px; margin-right: 8px; }
body.display { width: 100%; height: 100vh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.display #app, .display .cue-card { width: 100%; height: 100%; }
.display .cue-card { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.display-tools { position: fixed; z-index: 2; left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); opacity: 0; transition: opacity .2s; }
.display-tools.visible, .display-tools:focus-within { opacity: 1; }
.display-tools button { width: 48px; height: 48px; background: #fff; border: 1px solid #bbb; border-radius: 6px; color: #555; font-size: 25px; }
body.control { background: #f4f3ef; min-height: 100vh; padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.control-shell { width: min(100% - 32px, 620px); margin: 0 auto; padding-top: max(23px, env(safe-area-inset-top)); }
.control-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; color: #625f59; margin: 0 0 5px; }
h1 { font-size: 25px; line-height: 1.05; margin: 0; letter-spacing: -.055em; }
.connection { font-size: 11px; color: #625f59; text-align: right; line-height: 1.5; padding-top: 2px; }
.connection strong { font-weight: 700; display: block; }
.connection strong::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; background: #a3906d; vertical-align: middle; }
.connection[data-ready="true"] strong::before { background: #3d6c4b; }
.connection small { font-size: 10px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.section-head h2 { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.live-badge { color: #a6242b; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.live-panel { border: 1px solid #ddd9d1; border-radius: 9px; overflow: hidden; background: #fff; }
.live-panel .cue-card { aspect-ratio: 16 / 9; }
.live-caption { border-top: 1px solid #e8e5df; padding: 10px 12px; font-size: 12px; display: flex; justify-content: space-between; gap: 12px; }
.live-caption span:first-child { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-caption small { color: #777; white-space: nowrap; }
.select-section { margin-top: 28px; }
.section-help { font-size: 12px; color: #6c6861; line-height: 1.45; margin: 0 0 14px; }
.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.preset { position: relative; border: 1px solid #d5d1c8; border-radius: 8px; background: #fff; min-height: 78px; padding: 10px 5px; font-size: 12px; font-weight: 700; line-height: 1.2; }
.preset .preset-number { display: block; font-size: 30px; letter-spacing: -.05em; line-height: 1; margin-bottom: 2px; }
.preset .preset-unit { font-size: 9px; letter-spacing: .04em; }
.preset[aria-pressed="true"] { border: 2px solid #a6242b; background: #fffafa; padding: 9px 4px; }
.preset[aria-pressed="true"]::after { content: ''; position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: #a6242b; }
.preset:last-child { grid-column: span 3; min-height: 53px; }
.staged { margin-top: 22px; }
.staged .cue-card { aspect-ratio: 16 / 9; border-radius: 5px; box-shadow: 0 0 0 1px #ddd9d1; }
.staged-note { font-size: 10px; font-weight: 800; color: #8e6b2d; letter-spacing: .08em; }
.custom-editor { margin-top: 15px; }
label { font-size: 12px; font-weight: 700; display: block; margin-bottom: 7px; }
textarea { width: 100%; min-height: 142px; resize: vertical; border: 1px solid #c9c4ba; border-radius: 7px; padding: 12px; background: #fff; font-size: 17px; line-height: 1.4; color: #111; }
.field-note { font-size: 11px; color: #6c6861; margin-top: 6px; line-height: 1.4; }
.timer-box { background: #fff; border: 1px solid #ddd9d1; border-radius: 9px; padding: 15px; margin-top: 16px; }
.timer-readout { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.timer-readout strong { font-size: 32px; font-variant-numeric: tabular-nums; letter-spacing: -.06em; }
.timer-readout span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #6c6861; }
.duration-row { display: flex; gap: 9px; align-items: end; }
.duration-field { width: 75px; }
.duration-field label { font-size: 10px; color: #6c6861; }
.duration-field input { width: 100%; min-height: 47px; border: 1px solid #c9c4ba; border-radius: 6px; font-size: 19px; padding: 8px; }
.secondary { min-height: 48px; border: 1px solid #bbb5aa; border-radius: 6px; background: #fff; font-size: 12px; font-weight: 700; padding: 9px 14px; }
.duration-row .secondary { flex: 1; }
.timer-buttons { display: flex; gap: 9px; margin-top: 12px; }
.timer-buttons button { flex: 1; }
.timer-buttons .start { background: #171717; color: #fff; border-color: #171717; }
.notice { padding: 11px 12px; margin: 16px 0; border-left: 3px solid #a6242b; background: #fff; color: #74232a; font-size: 12px; line-height: 1.5; }
.support-note { font-size: 11px; color: #777169; margin: 26px 0 14px; line-height: 1.5; }
.support-note a { color: #4a4640; }
.display-bar { position: fixed; bottom: 0; inset-inline: 0; background: #fff; border-top: 1px solid #dedad2; padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); z-index: 5; }
.display-bar-inner { width: min(100%, 588px); margin: auto; display: flex; gap: 15px; align-items: center; }
.display-summary { flex: 1; min-width: 0; }
.display-summary .eyebrow { font-size: 9px; }
.display-summary strong { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.display-button { min-width: 132px; min-height: 57px; border: 0; border-radius: 7px; background: #a6242b; color: #fff; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
/* Compact control workspace */
body.control { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
body.control[data-control-theme="dark"] { background: #171817; color: #f4f3ef; }
body.control[data-control-theme="dark"] .control-brand,
body.control[data-control-theme="dark"] .section-head h2 { color: #f4f3ef; }
body.control[data-control-theme="dark"] .menu-toggle,
body.control[data-control-theme="dark"] .app-menu,
body.control[data-control-theme="dark"] .app-menu button,
body.control[data-control-theme="dark"] .tab-strip button[aria-selected="true"],
body.control[data-control-theme="dark"] .viewport-tabs button[aria-selected="true"],
body.control[data-control-theme="dark"] .preset,
body.control[data-control-theme="dark"] .settings-card,
body.control[data-control-theme="dark"] .settings-preview,
body.control[data-control-theme="dark"] .secondary,
body.control[data-control-theme="dark"] select,
body.control[data-control-theme="dark"] textarea,
body.control[data-control-theme="dark"] input { background: #292b29; color: #f4f3ef; border-color: #535650; }
body.control[data-control-theme="dark"] .app-menu button:hover,
body.control[data-control-theme="dark"] .app-menu button:focus-visible { background: #3a3d39; }
body.control[data-control-theme="dark"] .tab-strip,
body.control[data-control-theme="dark"] .viewport-tabs { background: #242624; border-color: #535650; }
body.control[data-control-theme="dark"] .display-bar { background: #171817; border-color: #444741; }
body.control[data-control-theme="dark"] .save-state,
body.control[data-control-theme="dark"] .support-note,
body.control[data-control-theme="dark"] .connection,
body.control[data-control-theme="dark"] .asset-group > span { color: #c7c9c3; }
@media (prefers-color-scheme: dark) {
  body.control[data-control-theme="system"] { background: #171817; color: #f4f3ef; }
  body.control[data-control-theme="system"] .control-brand,
  body.control[data-control-theme="system"] .section-head h2 { color: #f4f3ef; }
  body.control[data-control-theme="system"] .menu-toggle,
  body.control[data-control-theme="system"] .app-menu,
  body.control[data-control-theme="system"] .app-menu button,
  body.control[data-control-theme="system"] .tab-strip button[aria-selected="true"],
  body.control[data-control-theme="system"] .viewport-tabs button[aria-selected="true"],
  body.control[data-control-theme="system"] .preset,
  body.control[data-control-theme="system"] .settings-card,
  body.control[data-control-theme="system"] .settings-preview,
  body.control[data-control-theme="system"] .secondary,
  body.control[data-control-theme="system"] select,
  body.control[data-control-theme="system"] textarea,
  body.control[data-control-theme="system"] input { background: #292b29; color: #f4f3ef; border-color: #535650; }
  body.control[data-control-theme="system"] .app-menu button:hover,
  body.control[data-control-theme="system"] .app-menu button:focus-visible { background: #3a3d39; }
  body.control[data-control-theme="system"] .tab-strip,
  body.control[data-control-theme="system"] .viewport-tabs { background: #242624; border-color: #535650; }
  body.control[data-control-theme="system"] .display-bar { background: #171817; border-color: #444741; }
  body.control[data-control-theme="system"] .save-state,
  body.control[data-control-theme="system"] .support-note,
  body.control[data-control-theme="system"] .connection,
  body.control[data-control-theme="system"] .asset-group > span { color: #c7c9c3; }
}
.control-shell { width: min(100% - 16px, 980px); padding-top: max(7px, env(safe-area-inset-top)); }
.control-header { position: relative; min-height: 38px; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.control-brand { font-size: 17px; font-weight: 900; letter-spacing: -.035em; }
.menu-toggle { min-width: 52px; height: 36px; border: 1px solid #c9c4ba; border-radius: 7px; background: #fff; padding: 0 9px; font-size: 11px; font-weight: 800; line-height: 1; }
.app-menu { position: absolute; z-index: 30; top: 39px; right: 0; display: grid; min-width: 190px; padding: 5px; border: 1px solid #cdc8be; border-radius: 8px; background: #fff; box-shadow: 0 12px 30px rgba(30, 25, 18, .15); }
.app-menu button { min-height: 38px; border: 0; border-radius: 5px; background: #fff; padding: 7px 10px; text-align: left; font-size: 12px; }
.app-menu button:hover, .app-menu button:focus-visible { background: #f1eee8; }
.tab-strip { display: none; gap: 4px; margin: 0 0 7px; padding: 3px; border-radius: 8px; background: #e8e5de; }
.tab-strip button, .viewport-tabs button { flex: 1; min-height: 34px; border: 0; border-radius: 6px; background: transparent; color: #6b665e; font-size: 11px; font-weight: 800; letter-spacing: .07em; }
.tab-strip button[aria-selected="true"], .viewport-tabs button[aria-selected="true"] { background: #fff; color: #171717; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.viewport-section { min-width: 0; }
.viewport-tabs { display: flex; gap: 3px; margin-bottom: 5px; padding: 3px; border: 1px solid #d7d2c8; border-radius: 8px; background: #ece9e3; }
.viewport-tabs button[aria-selected="true"]:first-child { color: #a6242b; }
.viewport-tabs button[aria-selected="true"] { color: #fff; font-weight: 900; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.viewport-tabs button[data-card-view="live"][aria-selected="true"] { background: #a6242b; color: #fff; }
.viewport-tabs button[data-card-view="preview"][aria-selected="true"] { background: #155f9d; color: #fff; }
.viewport-panel .cue-card { aspect-ratio: 16 / 9; }
.viewport-panel { position: relative; }
.viewport-panel[data-card-panel="live"]:not([hidden]) { outline: 3px solid #a6242b; outline-offset: -3px; }
.viewport-panel[data-card-panel="preview"]:not([hidden]) { outline: 3px solid #155f9d; outline-offset: -3px; }
.viewport-badge { position: absolute; z-index: 3; top: 7px; right: 7px; padding: 2px 5px; border: 1px solid rgba(255,255,255,.38); border-radius: 4px; background: rgba(20,20,20,.24); color: rgba(255,255,255,.72); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-shadow: 0 1px 2px rgba(0,0,0,.7); pointer-events: none; }
.live-badge-overlay { background: rgba(166,36,43,.36); }
.viewport-panel[data-card-panel="preview"] .viewport-badge { background: rgba(21,95,157,.36); }
.live-panel { border-radius: 7px; }
.live-caption { min-height: 30px; padding: 6px 9px; font-size: 10px; }
.cue-workspace { display: grid; gap: 7px; }
.select-section, .staged { margin-top: 0; }
.cue-actions { display: grid; grid-template-columns: minmax(0, 1fr) clamp(88px, 24vw, 138px); gap: 6px; align-items: stretch; }
.cue-selector-stack { display: grid; grid-template-rows: auto auto; gap: 4px; min-width: 0; }
.preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.preset { min-height: 40px; padding: 3px; border-radius: 6px; font-size: 10px; font-weight: 900; }
.preset .preset-number { font-size: 21px; margin: 0; }
.preset .preset-unit { font-size: 7px; }
.preset[aria-pressed="true"] { padding: 2px 1px; }
.preset:last-child { grid-column: auto; min-height: 40px; }
.custom-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(62px, .34fr); gap: 4px; min-width: 0; }
.custom-row textarea { min-width: 0; min-height: 40px; height: 40px; resize: none; padding: 8px; font-size: 12px; line-height: 1.2; }
.custom-select { width: 100%; }
.display-adjacent { width: 100%; min-width: 0; height: 100%; border-radius: 8px; letter-spacing: .02em; }
.custom-editor { margin-top: 4px; }
textarea { min-height: 74px; padding: 8px; font-size: 14px; }
.timer-box { margin-top: 4px; padding: 8px; border-radius: 7px; }
.timer-readout { margin-bottom: 7px; }
.timer-readout strong { font-size: 24px; }
.duration-row { gap: 5px; }
.duration-field { width: 64px; }
.duration-field input, .secondary { min-height: 36px; }
.duration-field input { font-size: 15px; padding: 5px; }
.timer-buttons { gap: 5px; margin-top: 6px; }
.logo-picker { margin-top: 5px; padding: 8px; border-radius: 7px; }
.logo-picker > label { margin-bottom: 4px; }
.asset-group { margin-top: 7px; }
.asset-group > span { display: block; margin-bottom: 4px; color: #6c6861; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.logo-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.logo-options button { min-height: 34px; padding: 4px; font-size: 10px; }
.private-logo-options:empty::after { content: 'No uploads yet'; grid-column: 1 / -1; color: #777169; font-size: 10px; padding: 4px 0; }
.upload-toggle { width: 100%; margin-top: 4px; }
.logo-upload { margin-top: 7px; }
.logo-upload input { min-height: 36px; font-size: 11px; }
.logo-upload input::file-selector-button { min-height: 33px; padding: 4px 8px; }
.settings-grid { display: grid; gap: 7px; }
.settings-card, .settings-preview { padding: 10px; border: 1px solid #ddd9d1; border-radius: 8px; background: #fff; }
.settings-preview { margin-top: 7px; }
.settings-preview .cue-card { width: min(100%, 440px); aspect-ratio: 16 / 9; margin: auto; border-radius: 5px; }
.save-state { color: #6c6861; font-size: 9px; }
.compact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.compact-fields label { margin: 0; font-size: 10px; }
.compact-fields select { width: 100%; min-height: 34px; margin-top: 3px; border: 1px solid #c9c4ba; border-radius: 5px; background: #fff; padding: 4px 6px; font-size: 11px; }
.custom-colors { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; grid-column: 1 / -1; }
.custom-colors input[type="color"] { display: block; width: 100%; height: 34px; margin-top: 3px; border: 1px solid #c9c4ba; border-radius: 5px; background: #fff; }
.range-field { display: flex; align-items: center; gap: 5px; min-height: 34px; }
.range-field input { min-width: 0; width: 100%; }
.range-field output { min-width: 34px; font-size: 9px; }
.check-row { display: flex; align-items: center; gap: 6px; min-height: 34px; margin: 0; font-size: 10px; }
.settings-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 8px; }
.settings-actions .secondary { padding: 4px; font-size: 10px; }
.support-note { margin: 8px 0 0; font-size: 9px; }
.display-bar { padding: 5px max(8px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.display-bar-inner { width: min(100%, 964px); gap: 8px; }
.display-summary { display: grid; gap: 1px; }
.display-summary > strong { font-size: 11px; }
.connection { display: flex; align-items: center; gap: 8px; padding: 0; text-align: left; line-height: 1.2; }
.connection strong { font-size: 9px; }
.connection small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 8px; }
.status-message { height: 2.4em; overflow: hidden; color: #74232a; font-size: 9px; line-height: 1.2; overflow-wrap: anywhere; }
.status-message:empty::before { content: '\00a0'; }
.status-message[data-kind="success"] { color: #375a42; }
.display-button { min-width: 0; min-height: 48px; font-size: 15px; }
.display-button.display-adjacent { min-height: 124px; font-size: clamp(14px, 4.2vw, 20px); }
@media (min-width: 700px) {
  body.control { padding-bottom: 68px; }
  .control-shell { padding-top: 9px; }
  .tab-strip { display: flex; width: min(360px, 100%); }
  .cue-workspace { grid-template-columns: minmax(0, 1.15fr) minmax(270px, .85fr); align-items: start; }
  .viewport-section { grid-row: span 2; }
  .preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-grid { grid-template-columns: 1.2fr .8fr; }
  .compact-fields { grid-template-columns: repeat(3, 1fr); }
  .custom-colors { grid-column: auto; grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }