:root {
  color-scheme: light;
  --ink: #18211d;
  --green: #1a2d25;
  --muted: #526056;
  --canvas: #f2f2e9;
  --paper: #f9f9f0;
  --line: #d2d8cc;
  --lime: #def783;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --sans: "Avenir Next", "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 270px; background: var(--canvas); color: var(--ink); font-family: var(--sans); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .52; }
a { color: inherit; }
:focus-visible { outline: 2px solid #407155; outline-offset: 3px; }
h1, h2, p { margin: 0; }
.icon { width: 1.15em; height: 1.15em; display: inline-block; vertical-align: middle; flex: none; }
.eyebrow, .pill, .signal { font: 700 10px/1.3 var(--mono); letter-spacing: .085em; }
.eyebrow { color: var(--muted); }
.pill { border: 1px solid var(--line); border-radius: 50px; padding: 7px 10px; white-space: nowrap; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; white-space: nowrap; }
.wordmark > span:last-child { font: 850 14px/.94 var(--sans); letter-spacing: -.04em; }
.wordmark small { display: block; margin-top: 4px; font: 700 8px/1 var(--mono); letter-spacing: .18em; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; background: var(--lime); color: var(--green); border: 1px solid #26392b; border-radius: 11px; transform: rotate(-7deg); }
.brand-mark .icon { width: 20px; height: 20px; }
.signal { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.signal i, .demo-live i, .stage-foot i { width: 7px; height: 7px; border-radius: 50%; background: #66aa58; display: inline-block; }
.signal.offline i { background: #bc6b31; }
.primary, .quiet, .code { border-radius: 8px; padding: 8px 12px; font-weight: 750; font-size: 12px; }
.primary { background: var(--lime); border: 1px solid #2c4030; color: var(--ink); }
.primary:hover:not(:disabled) { background: #ecffad; }
.quiet { background: transparent; border: 1px solid var(--line); color: inherit; }
.quiet:hover:not(:disabled) { background: #778b7217; }
[data-color="amarelo"] { --note: #ffe47f; }
[data-color="lima"] { --note: #dbf188; }
[data-color="rosa"] { --note: #ffc1d3; }
[data-color="lilas"] { --note: #dec9fc; }
[data-color="azul"] { --note: #bfe9fa; }
[data-color="laranja"] { --note: #ffc395; }
.swatch { width: 13px; height: 13px; background: var(--note); border: 1px solid #2d332b44; border-radius: 3px; display: inline-block; transform: rotate(-8deg); flex: none; }
.post-it {
  background: linear-gradient(156deg, #ffffff20, transparent 37%, #332e2512), var(--note, #ffe47f);
  color: #29291f;
  box-shadow: 0 7px 11px -6px #2a302471, inset 0 1px 0 #fff6;
  padding: .78em;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.note-caption { display: flex; align-items: center; justify-content: space-between; font: 750 .60em/1 var(--mono); letter-spacing: .09em; }
.note-caption .icon { width: 1.65em; height: 1.65em; }
.note-team { font-weight: 860; letter-spacing: -.05em; font-size: 1.37em; line-height: 1.02; margin-top: .25em; }
.note-song { font-weight: 750; font-size: .91em; line-height: 1.05; margin-top: .45em; }
.note-artist { font-size: .68em; font-weight: 600; line-height: 1.1; margin-top: .22em; }
.note-message { font-size: .75em; font-weight: 600; line-height: 1.18; font-style: italic; margin-top: .46em; }
.note-team, .note-song, .note-artist, .note-message { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.note-message { -webkit-line-clamp: 3; }

body[data-view="demo"] { background: #edf0e6; }
.demo { max-width: 1480px; margin: auto; padding: 0 clamp(16px, 4vw, 58px); }
.demo-header, .demo-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.demo-header { padding: 20px 0; border-bottom: 1px solid #c8d0c4; }
.demo-meta { display: flex; align-items: center; gap: 12px; }
.demo-intro { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 24px 0 26px; }
.demo-intro .eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.demo-intro .eyebrow span { background: #a5b29d; width: 17px; height: 1px; }
.demo-intro h1 { font-size: clamp(54px, 8vw, 110px); line-height: .83; letter-spacing: -.087em; font-weight: 880; }
.demo-intro h1 em, .phone-intro h1 em { font-style: italic; color: #456348; }
.demo-instructions { max-width: 320px; padding-bottom: 2px; }
.demo-instructions p { font-size: clamp(14px, 1.45vw, 19px); font-weight: 590; line-height: 1.32; margin-bottom: 10px; }
.demo-instructions a { font-size: 12px; font-weight: 750; text-underline-offset: 4px; }
.demo-grid { display: grid; grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); align-items: start; gap: 13px; }
.demo-panel { border: 1px solid #bec9ba; border-radius: 13px; overflow: hidden; background: var(--paper); min-width: 0; }
.panel-header { min-height: 39px; display: flex; align-items: center; justify-content: space-between; background: #f7f9ef; padding: 0 11px; border-bottom: 1px solid #ced5c8; font-size: 12px; font-weight: 800; }
.panel-header b { color: #60705e; font: 700 10px var(--mono); padding-right: 6px; }
.panel-header a { padding: 5px; }
.demo-panel iframe { display: block; width: 100%; border: 0; }
.phone-panel iframe { height: 690px; }
.wall-panel iframe { aspect-ratio: 1.85; min-height: 268px; }
.demo-footer { padding: 18px 0 24px; font: 700 9px var(--mono); letter-spacing: .09em; color: var(--muted); }

body[data-view="phone"] { background: #f8f7ed; }
.phone { max-width: 450px; margin: auto; padding: 15px 17px 22px; }
.phone-intro { padding: 18px 0 15px; position: relative; overflow: hidden; }
.phone-intro h1, .receipt h1 { font-size: clamp(46px, 13vw, 67px); font-weight: 850; line-height: .88; letter-spacing: -.077em; margin: 7px 0; }
.phone-intro > p:last-of-type, .receipt-state > p:last-child { font-size: 12px; line-height: 1.35; font-weight: 620; color: var(--muted); }
.mini-note { position: absolute; top: 29px; right: 10px; width: clamp(45px, 19vw, 73px); aspect-ratio: 1; display: grid; place-items: center; transform: rotate(12deg); background: var(--note); box-shadow: 0 6px 8px -4px #18211d68; border: 1px solid #25362720; }
.mini-note .icon:first-child { width: 51%; height: 51%; }
.mini-note .icon:last-child { position: absolute; width: 22%; height: 22%; top: 8%; right: 9%; }
.section-label { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 13px; font-weight: 810; }
.section-label b { font: 800 10px var(--mono); color: #547451; }
.search { display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #b7c5b3; border-radius: 8px; color: var(--muted); background: #fffef8; }
.search:focus-within { outline: 2px solid #87a079; }
.search input { background: transparent; border: 0; outline: none; width: 100%; min-height: 35px; padding: 5px 0; font-size: 12px; }
.songs-meta { margin: 8px 0 4px; font: 700 8px var(--mono); letter-spacing: .09em; color: var(--muted); }
.song-list { max-height: 137px; min-height: 41px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fffef8; }
.song-option { width: 100%; text-align: left; padding: 6px 8px; min-height: 41px; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: transparent; border: 0; color: var(--ink); }
.song-option:not(:first-child) { border-top: 1px solid #e5e7dc; }
.song-option:hover, .song-option[aria-pressed="true"] { background: #e8f4d9; }
.song-option:focus-visible { outline-offset: -2px; }
.song-option strong { display: block; font-size: 12px; font-weight: 780; line-height: 1.1; }
.song-option small { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; }
.pick-mark { font: 750 13px var(--mono); color: #4f6d50; padding: 2px 3px; }
.no-songs { font-size: 12px; padding: 11px 8px; color: var(--muted); }
.form-fields { display: grid; gap: 5px; margin-top: 12px; }
.form-fields .section-label { margin-bottom: 1px; }
.form-fields input, .form-fields textarea { width: 100%; border: 1px solid #b7c5b3; background: #fffef8; border-radius: 7px; padding: 7px 8px; font-size: 12px; color: var(--ink); resize: vertical; }
.preview-row { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--muted); }
.preview-row #count { margin-left: auto; font: 9px var(--mono); }
.form-alert { color: #983820; font-size: 12px; font-weight: 700; margin: 6px 0; }
.form-alert:empty { margin: 0; }
.send { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px; margin-top: 9px; }
.receipt { padding-top: 19px; }
.receipt-state h1 { margin: 7px 0 9px; }
.receipt-note { margin: 26px auto 23px; width: min(75%, 255px); min-height: 145px; font-size: 16px; transform: rotate(-5deg); }
.phone-closed { padding: 18px 0; }
.phone-closed h2 { font-size: 21px; margin-bottom: 3px; }
.phone-closed p { font-size: 12px; color: var(--muted); }
.flying-phone { pointer-events: none; position: fixed; z-index: 10; left: 50%; top: var(--takeoff); width: min(66vw, 230px); font-size: 15px; min-height: 115px; }

body[data-view="desk"] { background: #f2f4ea; }
.desk { max-width: 1080px; margin: auto; }
.desk-header, .desk-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 13px; }
.desk-header { border-bottom: 1px solid var(--line); }
.desk-header .brand-mark { width: 28px; height: 28px; border-radius: 8px; }
.desk-header .brand-mark .icon { width: 16px; height: 16px; }
.desk-tools { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 5px 9px; }
.desk-body { padding: 11px 13px 3px; }
.desk-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.desk-title h1 { font-size: clamp(26px, 5.1vw, 49px); font-weight: 850; line-height: 1.04; letter-spacing: -.062em; }
.current { min-height: 57px; padding: 8px; background: var(--green); color: #f5f9ec; border-radius: 9px; display: flex; gap: 9px; align-items: center; }
.current-icon { display: grid; place-items: center; width: 34px; height: 34px; background: #e0f58d; color: var(--green); border-radius: 7px; flex: none; }
.current-info { flex: 1; min-width: 0; }
.current-info .eyebrow { color: #d6e8b8; margin-bottom: 3px; }
.current-info strong { display: block; font-size: 14px; line-height: 1.12; overflow-wrap: anywhere; }
.current-info small { display: block; color: #dce5d6; font-size: 10px; }
.current .quiet { border-color: #e3efd675; }
.queue-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 1px 4px; color: var(--muted); font: 700 8px var(--mono); letter-spacing: .08em; }
.queue { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.queue-empty { color: var(--muted); font-size: 12px; padding: 13px 8px; }
.queue-row { padding: 6px 7px; display: flex; align-items: center; gap: 6px; }
.queue-row + .queue-row { border-top: 1px solid var(--line); }
.queue-index { color: var(--muted); font: 750 10px var(--mono); }
.queue-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.queue-info strong { display: block; font-size: 12px; }
.queue-info small { display: block; font-size: 10px; line-height: 1.2; color: var(--muted); }
.queue-info .queue-dedication { font-style: italic; margin-top: 2px; }
.queue-actions { display: flex; gap: 3px; }
.queue-row button { padding: 6px; font-size: 10px; }
.code { border: 1px dashed #8d9c8a; color: #30432f; background: #eff4e7; font-family: var(--mono); white-space: nowrap; }
.desk-alert { min-height: 13px; margin: 2px 0 0; color: #4d6551; font-size: 11px; font-weight: 700; }
.desk-footer { color: var(--muted); font: 700 8px var(--mono); letter-spacing: .08em; padding-top: 0; }
.reset { font-family: var(--sans); font-size: 10px; }

body[data-view="wall"] { background: #eaece1; overflow: hidden; }
.wall {
  height: 100dvh; width: 100%; padding: clamp(7px, 1.5vw, 29px) clamp(11px, 2.7vw, 53px);
  display: grid; grid-template-rows: minmax(0, 1fr);
  background: radial-gradient(circle at 50% 50%, #f5f5ed 3%, transparent 75%), radial-gradient(#64796748 1px, transparent 1px) 0 0 / 13px 13px, #e8ecdf;
}
.wall-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3.85fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: clamp(5px, 1.25vw, 22px); align-items: center; min-height: 0; container-type: size; }
.rail { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); align-items: center; gap: 5%; height: 100%; max-height: min(51vw, 100%); min-width: 0; }
.slot { width: 100%; height: 100%; min-width: 0; min-height: 0; position: relative; display: grid; place-items: center; }
.slot[data-label]::before { content: attr(data-label); position: absolute; inset: 7% 9%; display: grid; place-items: center; text-align: center; padding: 2px; color: #526a526e; font: 700 clamp(7px, 1.3vw, 21px) var(--mono); border: 1px dashed #72877371; border-radius: 4px; }
.slot:has(.wall-note):not(:has([data-flight]))::before { opacity: 0; }
.wall-note { position: relative; z-index: 1; width: 91%; min-width: 0; max-height: 96%; aspect-ratio: 1.13; transform: rotate(var(--tilt)); font-size: clamp(6px, 1.19vw, 23px); }
.stage-column { min-width: 0; width: 100%; max-width: max(100px, calc((100cqh - clamp(16px, 3.2vw, 48px)) * 16 / 9)); margin: auto; }
.stage-cap { display: flex; justify-content: space-between; align-items: center; gap: 6px; font: 750 clamp(6px, 1vw, 15px)/1.15 var(--mono); letter-spacing: .07em; color: #3e5344; white-space: nowrap; }
.stage { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; border: clamp(2px, .32vw, 5px) solid #23362c; border-radius: clamp(5px, 1.3vw, 19px); background: #132721; box-shadow: 0 8px 22px -12px #1222199e; }
.stage-glow, .stage-grid, .stage-disc { position: absolute; pointer-events: none; }
.stage-glow { inset: 0; background: radial-gradient(ellipse at 50% 70%, #597840aa, transparent 67%); z-index: -3; }
.stage-grid { inset: 0; background: repeating-linear-gradient(0deg, #b9db8f11 0 1px, transparent 1px 9px); z-index: -1; }
.stage-disc { z-index: -2; top: 42%; width: 75%; aspect-ratio: 1; border: 1px solid #bed68563; border-radius: 50%; box-shadow: 0 0 0 16px #d9f1a623, 0 0 0 35px #d9f1a61d, 0 0 0 58px #d9f1a618, 0 0 0 86px #d9f1a614; }
.stage-text { text-align: center; width: 95%; color: #e9f3c6; padding: 2% 5%; }
.stage-text p, .stage-text small { font: 700 clamp(6px, 1.1vw, 19px)/1 var(--mono); letter-spacing: .14em; color: #d8e8af; }
.stage-text h1 { font-size: min(7vw, 12vh); line-height: .79; margin: .13em auto .18em; font-weight: 920; letter-spacing: -.085em; text-shadow: .04em .05em 0 #0e2b21; }
.stage-text h1 span { display: block; font-style: italic; color: #d8ef80; }
.stage-text h1.stage-song { font-size: min(5vw, 9vh); line-height: .88; overflow-wrap: anywhere; }
.stage-corner { position: absolute; width: 4%; height: 7%; border: 1px solid #cbe48d9f; }
.top-left { top: 8%; left: 5%; border-right: 0; border-bottom: 0; }
.bottom-right { bottom: 8%; right: 5%; border-left: 0; border-top: 0; }
.slot-join { container-type: size; }
.wall-join {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-items: center; gap: 2cqh;
  height: min(96%, 81cqw); padding: min(4cqw, 4cqh); transform: none;
  color: #512670; text-align: center; text-decoration: none;
  font-size: clamp(6px, min(1.19vw, 9cqh), 23px); font-weight: bold;
}
.qr-wrap { display: grid; place-items: center; justify-self: center; width: min(68cqw, 60cqh); aspect-ratio: 1; padding: min(3cqw, 3cqh); background: #fff; border-radius: 3px; }
.qr-wrap img { display: block; width: 100%; height: 100%; }

@media (min-width: 620px) and (max-width: 900px) {
  .demo-grid { grid-template-columns: minmax(240px, 36%) minmax(0, 1fr); }
}
@media (max-width: 619px) {
  .demo-header { padding: 13px 0; }
  .demo-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-intro { padding-top: 19px; align-items: end; }
  .demo-intro h1 { font-size: clamp(41px, 10vw, 64px); }
  .demo-intro .eyebrow { font-size: 8px; }
  .demo-instructions { max-width: 200px; }
  .demo-instructions p { font-size: 12px; }
  .demo-meta .pill { display: none; }
  .wall-panel iframe { min-height: 223px; }
}
@media (max-width: 350px) {
  .phone { padding-right: 12px; padding-left: 12px; }
  .desk-tools .signal { display: none; }
  .desk-title .pill { font-size: 8px; }
  .queue-row { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* A pink XP desktop with the details of a 2000s personal homepage. */
:root {
  color-scheme: light;
  --ink: #351644;
  --muted: #654575;
  --canvas: #f6e2fc;
  --paper: #fff8ff;
  --line: #d9b5e4;
  --pink: #a42475;
  --plum: #6d2ca4;
  --sans: Tahoma, Verdana, Arial, sans-serif;
  --window-bar: linear-gradient(#b966dd 0%, #944ac5 16%, #7133a3 55%, #642798 77%, #8641b5 100%);
  --button-gloss: linear-gradient(#fff 0%, #ffdeef 45%, #f4a5d5 49%, #fbd2ea 100%);
  --wallpaper:
    radial-gradient(ellipse at 16% 5%, #fff8fc 0%, transparent 42%),
    radial-gradient(ellipse at 87% 15%, #e4edff 0%, transparent 48%),
    linear-gradient(145deg, #f7c6e9, #e9d4fd 58%, #facfea);
  --sparkles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath d='M12 3l1.2 4.8L18 9l-4.8 1.2L12 15l-1.2-4.8L6 9l4.8-1.2z' fill='%23fff' opacity='.8'/%3E%3Cpath d='M38 32l.8 3.2 3.2.8-3.2.8L38 40l-.8-3.2-3.2-.8 3.2-.8z' fill='%23b16abf' opacity='.26'/%3E%3Ccircle cx='39' cy='14' r='1' fill='%23fff'/%3E%3Ccircle cx='16' cy='38' r='1' fill='%23fff'/%3E%3C/svg%3E");
}

:focus-visible { outline-color: #8f2589; }
.eyebrow { color: #753969; }
.pill { background: #f1e6ff; border-color: #c2a2dc; color: #572b80; }
.wordmark > span:last-child { font-style: italic; color: #592270; }
.wordmark small { color: #7b3f80; font-style: normal; }
.brand-mark, .desk-header .brand-mark {
  background: radial-gradient(ellipse at 29% 23%, white 0%, #ffe4fc 16%, #eea9ed 42%, #b774dc 67%, #fac1f0 100%);
  color: #672e86; border: 1px solid #ab68c7; border-radius: 50%;
  box-shadow: inset 1px 1px 2px #fff, 0 2px 3px #6d328839;
}
.signal { color: #315f27; }
.signal i {
  background: radial-gradient(circle at 30% 30%, #eeffc4, #77ab37 68%);
  box-shadow: 0 0 0 1px #48802a;
}
.signal.offline { color: #884d1d; }
.signal.offline i { background: #e9a254; box-shadow: 0 0 0 1px #a55d23; }
.primary, .quiet, .code {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  text-decoration: none; border-radius: 5px;
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px #6a31782a;
}
.primary { background: var(--button-gloss); border: 1px solid #ae518f; color: #601548; }
.primary:hover:not(:disabled) { background: linear-gradient(#fff, #ffd1ef 45%, #f58fc9 49%, #fac1e1); }
.quiet { background: linear-gradient(#fff, #f0eaff 46%, #dbcef4 50%, #f1eaff); border-color: #a88cc8; color: #4d2c6b; }
.quiet:hover:not(:disabled) { background: #efe0ff; }
.code { background: #fcf6ff; border-color: #ae8ec8; color: #54216d; box-shadow: inset 0 1px 2px #d9c4e2; }

body[data-view="demo"], body[data-view="events"] { background: var(--sparkles), var(--wallpaper); background-attachment: fixed; }
.demo-header { padding: 13px 0; border-color: #b785c7; }
.demo-meta .quiet { font-size: 11px; white-space: nowrap; }
.demo-welcome {
  margin: 13px 0 14px; border: 1px solid #7835a9; border-radius: 8px 8px 5px 5px; overflow: hidden;
  box-shadow: 0 5px 0 #a167b926, 0 11px 21px #81438421;
}
.welcome-bar, .panel-header, .management-panel h2, .stage-cap {
  color: white; background: var(--window-bar);
  border-bottom: 1px solid #541d82; text-shadow: 0 1px #42146c;
}
.welcome-bar { min-height: 28px; padding: 4px 7px 4px 10px; display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: bold; }
.welcome-bar .icon { color: #ffd6ef; margin-right: 3px; }
.window-marks { display: inline-flex; align-items: center; gap: 2px; }
.window-marks :is(i, button) {
  display: grid; place-items: center; width: 15px; height: 15px; padding-bottom: 1px;
  border: 1px solid #f8deff; border-radius: 2px; font: bold 11px/1 Tahoma, sans-serif;
  color: white; background: linear-gradient(#c58be5, #7435a2); text-shadow: 0 1px #59297b;
}
.window-marks :is(i, button):last-child { background: linear-gradient(#f7abd7, #bc4a90); }
.demo-intro {
  position: relative; isolation: isolate; align-items: center; min-height: clamp(138px, 16vw, 198px);
  padding: clamp(12px, 2.1vw, 27px); overflow: hidden;
  background: var(--sparkles), linear-gradient(110deg, #fff8ff 3%, #ffd2ef 55%, #e4d5ff 100%);
}
.demo-intro h1, .management-intro h1 {
  font: bold italic clamp(48px, 7.3vw, 103px)/.9 Georgia, "Times New Roman", serif;
  letter-spacing: -.07em; color: #702497; text-shadow: 0 2px #fff, 1px 4px #c894d777;
}
.demo-intro h1 em { color: #b52c80; white-space: nowrap; }
.demo-intro .eyebrow { margin-bottom: 9px; }
.active-event {
  width: fit-content; margin-top: 11px; border: 1px solid #d4a8e1; border-radius: 3px;
  background: #fff9ffdd; padding: 4px 6px; color: #653676;
  font: bold clamp(8px, 1.12vw, 11px)/1.1 var(--mono);
}
.demo-instructions {
  max-width: 248px; padding: 10px; background: #fff8ffed; border: 1px solid #d4a3e1;
  border-radius: 5px; box-shadow: 2px 3px #b97ac62b;
}
.demo-instructions p { font-size: clamp(11px, 1.18vw, 14px); }
.demo-instructions a { padding: 6px 8px; font-size: 11px; }
.mini-disc {
  position: absolute; right: 26%; top: 50%; width: clamp(105px, 18vw, 253px); aspect-ratio: 1; z-index: -1;
  border-radius: 50%; transform: translateY(-52%) rotate(-18deg) scaleY(.86);
  background: radial-gradient(circle, #ffffff 0 9%, #c574c2 9.5% 11%, #faebff 11.5% 14%, transparent 14.5%),
    repeating-radial-gradient(circle, #fff6 0 1px, transparent 1px 4px),
    conic-gradient(from 35deg, #cda6f5, #fff1fb, #fa92cc, #a7bcf3, #fbe7ff, #ffe0be, #cda6f5);
  border: 1px solid #a775c5; box-shadow: 0 9px 21px #78359238, inset 0 0 13px #fff;
}
.mini-disc .icon { position: absolute; width: 19%; height: 19%; color: #ac4db3; filter: drop-shadow(0 1px 1px white); }
.mini-disc .icon:nth-child(1) { left: 6%; top: 7%; }
.mini-disc .icon:nth-child(2) { right: -12%; top: 26%; color: #a450b7; }
.mini-disc .icon:nth-child(3) { right: 10%; bottom: 12%; color: #bd418e; }
.demo-panel { border-color: #8a4ab0; border-radius: 7px 7px 4px 4px; box-shadow: 0 3px #a96ab736; }
.panel-header { min-height: 31px; box-shadow: inset 0 1px #ffe5ff91; }
.panel-header b { color: #f6d7ff; }
.panel-header a { padding: 1px 3px; border: 1px solid #e8c3ff; border-radius: 3px; background: linear-gradient(#b279d3, #7031a0); color: white; }
.demo-footer { margin-top: 12px; padding: 7px 8px; border: 1px solid #aa75c3; border-radius: 3px; background: linear-gradient(#fcf3ff, #e9d2f8); }

body[data-view="phone"] { background: #fff4fb; }
.desk-header { border-color: #d6b0e8; }
.phone-intro {
  margin: 9px 0 12px; padding: 11px 10px; border: 1px solid #dba7de; border-radius: 5px;
  background: var(--sparkles), linear-gradient(135deg, #fde0f1, #eee0fc);
}
.phone-intro h1, .receipt h1 { color: #692893; font: bold italic clamp(37px, 12vw, 61px)/.88 Georgia, serif; letter-spacing: -.064em; text-shadow: 0 1px #fff, 0 2px #c890d266; }
.phone-intro h1 em { color: #a92776; }
.mini-note { top: 35px; right: 10px; color: #632756; box-shadow: 0 5px 8px #70357248; }
.section-label b { color: #8b3d93; }
.search, .form-fields input, .form-fields textarea, .management input, #video-url {
  background: #fffaff; border-color: #bc91ce; color: #381a4b; border-radius: 4px;
  box-shadow: inset 0 1px 2px #dbc7e5;
}
.search:focus-within { outline-color: #b367b7; }
.search input { color: var(--ink); min-height: 39px; font-size: 14px; }
input::placeholder, textarea::placeholder { color: #715c7a; opacity: 1; }
.song-list { border-color: #c7a2dc; border-radius: 4px; background: #fffcff; max-height: 163px; }
.song-option:not(:first-child) { border-color: #ead6f1; }
.song-option:nth-child(even) { background: #fbf1ff; }
.song-option:hover, .song-option[aria-pressed="true"] { background: #f8d9ef; }
.song-option[aria-pressed="true"] strong, .pick-mark { color: #852168; }
.form-fields input, .form-fields textarea { font-size: 14px; min-height: 35px; }
.send { min-height: 41px; }
.receipt-state { padding: 12px; border: 1px solid #d5afe6; border-radius: 5px; background: var(--sparkles), linear-gradient(115deg, #fce1f0, #f1e4ff); }
.receipt-note, .wall-note { box-shadow: 0 6px 9px -3px #612f775f; }

body[data-view="desk"] { background: #f9efff; }
.desk-header { background: linear-gradient(#fffbff, #ead8f9); }
.desk-title h1 { color: #652489; }
.current { background: linear-gradient(#fdf8ff, #edddfc); color: #552277; border: 1px solid #c29ed8; border-radius: 5px; }
.current-icon { color: #752378; background: #f8d7ed; border: 1px solid #d49dce; }
.current-info .eyebrow, .current-info small { color: #694081; }
.current .quiet { border-color: #a88cc8; }
.queue { border-radius: 4px; }
.queue-row:nth-child(even) { background: #f5e9ff; }
.desk-alert { color: #72276e; }
#desk-session { padding: 7px; margin-bottom: 5px; background: #fff1d4; border-radius: 4px; color: #714300; }
.review-panel h2 { font-size: 12px; margin-bottom: 5px; }
.review-note { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px; background: #fff4e7; border-bottom: 1px solid #f2d6c4; overflow-wrap: anywhere; }
.review-note small { display: block; color: var(--muted); }
.review-note button, .current [data-action="reject-note"] { font-size: 10px; padding: 5px; }
.queue-info [data-action="reject-note"] { margin-top: 4px; }
.source-panel { border-top: 1px solid var(--line); padding: 7px 0; margin-top: 4px; font-size: 11px; }
.source-panel summary { cursor: pointer; color: #692b84; font-weight: bold; }
.source-panel form { padding: 8px 0 0; }
.source-panel label { display: block; margin-bottom: 4px; }
.source-field { display: flex; align-items: center; gap: 4px; }
.source-field input { width: 100%; min-width: 0; border: 1px solid #bc91ce; padding: 7px; }
.source-field button { flex: none; font-size: 10px; }
.source-panel p, #source-feedback { margin-top: 5px; color: var(--muted); }
.desk-footer { margin-top: 6px; }

body[data-view="wall"], .wall { background: var(--sparkles), var(--wallpaper); }
.slot[data-label]::before { color: #784687; border-color: #a773b7; background: #fff8ff73; }
.stage-cap {
  position: relative; margin: 0; padding: clamp(3px, .58vw, 9px) clamp(4px, .75vw, 12px);
  border: 1px solid #7837a2; border-radius: 5px 5px 0 0; font-family: var(--sans); letter-spacing: .02em;
}
.stage-caption { overflow: hidden; text-overflow: ellipsis; }
.stage-cap .window-marks button { width: clamp(18px, 1.6vw, 26px); height: clamp(18px, 1.6vw, 26px); padding: 0; font-size: clamp(11px, 1.2vw, 17px); }
.stage-cap .window-marks button:focus-visible { outline-color: white; }
.stage {
  border: 2px solid #8b4ab4; border-top: 0; border-radius: 0 0 4px 4px;
  background: #fae1f4; box-shadow: 0 5px 16px #9054a948, inset 0 0 0 1px #fff;
}
.stage-glow { background: radial-gradient(ellipse at 50% 80%, #fff7fd, transparent 71%), linear-gradient(150deg, #fbd0ed, #e2d0fa 62%, #f7c2e7); }
.stage-grid { background: var(--sparkles); opacity: .65; }
.stage-disc {
  top: 35%; width: 61%; border-color: #fff8; opacity: .54;
  background: repeating-radial-gradient(circle, #fff9 0 1px, transparent 1px 6px), conic-gradient(#f3bfe8, #ffe8fa, #c5b5f0, #fcfaff, #f3bfe8);
  box-shadow: 0 0 0 14px #fffbff63, 0 0 0 28px #eab2dd3d;
}
.stage-text { z-index: 1; color: var(--plum); }
.stage-text p, .stage-text small { color: #643674; }
.stage-text h1 { font-family: Georgia, serif; font-weight: bold; letter-spacing: -.077em; line-height: .81; text-shadow: 0 2px #fff, 1px 4px #bb85c888; }
.stage-text h1 span { color: var(--pink); }
.stage-corner { border-color: #a267b581; }
.stage-stickers { position: absolute; inset: 8% 6%; pointer-events: none; color: #a957ad; }
.stage-stickers .icon { position: absolute; width: 7%; height: 14%; filter: drop-shadow(1px 1px 0 #fff); }
.stage-stickers .icon:nth-child(1) { top: 18%; left: 6%; }
.stage-stickers .icon:nth-child(2) { right: 4%; top: 26%; color: #be4a94; transform: rotate(12deg); }
.stage-stickers .icon:nth-child(3) { right: 12%; bottom: 13%; width: 4%; }
#karaoke-feed, #karaoke-embed { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; background: #000; object-fit: contain; }
#karaoke-feed { z-index: 5; }
.stage:has(#karaoke-embed:not([hidden]), #karaoke-feed:not([hidden])) .stage-text { visibility: hidden; }
#capture-status:empty { display: none; }
#capture-status:not(:empty) { position: absolute; z-index: 6; right: 0; top: 100%; max-width: min(100%, 220px); padding: 5px; background: var(--paper); color: #87254d; font-size: 11px; white-space: normal; text-shadow: none; }

.management { max-width: 1480px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 58px) 40px; }
.management-intro { padding: 27px 0 21px; }
.management-intro h1 { margin: 8px 0 11px; }
.management-intro h1 span { color: #b22980; }
.management-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.management-panel { background: #fff6ff; border: 1px solid #9a64bd; border-radius: 7px 7px 4px 4px; overflow: hidden; align-self: start; }
.management-panel h2 { font-size: 14px; padding: 8px 11px; }
.event-list, #new-event { display: grid; gap: 8px; padding: 12px; }
.event-card { border: 1px solid #d3abe4; border-radius: 4px; padding: 10px; background: #fffaff; min-width: 0; }
.event-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.event-card h3 { font-size: 16px; margin: 0; overflow-wrap: anywhere; }
.event-card p, .event-card small, #new-event p { font-size: 12px; color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; }
.event-links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
#new-event label { font-weight: bold; font-size: 12px; }
#new-event input { width: 100%; min-width: 0; padding: 8px; border: 1px solid #bc91ce; }
#new-event .primary { justify-content: space-between; }
#import-status, #event-status { color: #74296f; font-size: 12px; }
#event-status:not(:empty) { padding: 0 12px 12px; }
.event-delete { color: #8a224a; }
.event-confirm { width: min(90vw, 400px); padding: 18px; border: 1px solid #9a64bd; border-radius: 7px; background: var(--paper); color: var(--ink); }
.event-confirm h2 { font-size: 18px; margin: 0 0 8px; }
.event-confirm::backdrop { background: #35164466; }
.unavailable { padding: 30px; }
.login { max-width: 365px; margin: 20px auto; border: 1px solid #7835a9; border-radius: 7px; overflow: hidden; background: var(--paper); }
.login form { display: grid; gap: 8px; padding: 15px; }
.login h1 { font-size: 20px; }
.login label { font-size: 12px; font-weight: bold; }
.login input { width: 100%; border: 1px solid #bc91ce; border-radius: 4px; padding: 8px; font-size: 14px; }

@media (max-width: 620px) {
  .demo-intro h1 { font-size: clamp(36px, 9vw, 59px); }
  .mini-disc { right: 3%; opacity: .6; }
  .management-grid { grid-template-columns: 1fr; }
}
@media (max-width: 439px) {
  .demo-intro { flex-direction: column; align-items: start; gap: 9px; }
  .demo-instructions { max-width: none; }
}
@media (min-width: 560px) and (max-width: 620px) {
  .demo { padding-inline: 12px; }
  .demo-grid { grid-template-columns: minmax(214px, 40%) minmax(0, 1fr); gap: 8px; }
}