/* QUEEZE base and play screen */
html, body { background: var(--qz-page, #0b0c10); }
.qz-site { color: var(--qz-text, #f2f3f7); font-family: var(--qz-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif); min-height: 100dvh; }
.qz-site *, .qz-site *::before, .qz-site *::after { box-sizing: border-box; }
.qz-screen { max-width: 560px; margin: 0 auto; padding: 20px 16px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 18px; }
.qz-title { font-size: 28px; font-weight: 800; letter-spacing: 0.08em; margin: 0; }
.qz-title-accent { color: var(--qz-accent, #ff3d81); }
.qz-lead { color: var(--qz-muted, #9aa1b2); margin: 0; font-size: 15px; line-height: 1.45; }
.qz-card { background: var(--qz-surface, #16181f); border: 1px solid var(--qz-line, #2a2e39); border-radius: var(--qz-radius, 16px); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.qz-card-title { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--qz-muted, #9aa1b2); margin: 0; }
.qz-site [hidden] { display: none !important; }
.qz-back { color: var(--qz-muted, #9aa1b2); text-decoration: none; font-size: 14px; font-weight: 600; align-self: flex-start; padding: 6px 0; }
.qz-back::before { content: "\2039\00a0"; }
.qz-back:hover, .qz-back:focus-visible { color: var(--qz-text, #f2f3f7); }
.qz-home { min-height: 100dvh; justify-content: center; align-items: stretch; text-align: center; }
.qz-title--big { font-size: 44px; letter-spacing: 0.14em; }
.qz-lead--center { text-align: center; }
.qz-pulse { position: relative; width: 160px; height: 160px; margin: 0 auto 8px; }
.qz-pulse-dot { position: absolute; inset: 50px; border-radius: 50%; background: linear-gradient(135deg, var(--qz-accent, #ff3d81), var(--qz-accent-2, #31d0ff)); }
.qz-pulse-ring { position: absolute; inset: 50px; border-radius: 50%; border: 2px solid var(--qz-accent, #ff3d81); animation: qz-pulse 1.875s ease-out infinite; }
.qz-pulse-ring--late { animation-delay: 0.9375s; border-color: var(--qz-accent-2, #31d0ff); }
@keyframes qz-pulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qz-pulse-ring { animation: none; opacity: 0.4; transform: scale(1.6); } }
.qz-card-heading { font-size: 18px; font-weight: 700; margin: 0; }
.qz-prose h3 { font-size: 15px; font-weight: 700; margin: 8px 0 0; }
.qz-prose p { margin: 0; color: var(--qz-muted, #9aa1b2); font-size: 15px; line-height: 1.55; }
.qz-intro-video { width: 100%; aspect-ratio: 1 / 1; border-radius: 12px; background: #000; display: block; }
.qz-btn-accent { background: var(--qz-accent, #ff3d81); border-color: var(--qz-accent, #ff3d81); color: #1a0410; }
.qz-terms-actions { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); background: var(--qz-page, #0b0c10); padding: 8px 0; }
.qz-choices { display: flex; flex-direction: column; gap: 8px; }
.qz-row { display: flex; gap: 8px; flex-wrap: wrap; }
.qz-btn { appearance: none; border: 1px solid var(--qz-line, #2a2e39); background: transparent; color: var(--qz-text, #f2f3f7); font: inherit; font-weight: 600; font-size: 15px; padding: 12px 16px; min-height: 48px; border-radius: 12px; cursor: pointer; flex: 1 1 0; text-align: center; text-decoration: none; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.qz-site a.qz-btn { display: flex; align-items: center; justify-content: center; color: var(--qz-text, #f2f3f7); }
.qz-site a.qz-btn-primary { color: #1a0410; }
.qz-screen > .qz-btn { flex: 0 0 auto; }
.qz-btn:hover { border-color: var(--qz-muted, #9aa1b2); }
.qz-btn:focus-visible { outline: 2px solid var(--qz-accent-2, #31d0ff); outline-offset: 2px; }
.qz-btn.is-active { background: var(--qz-accent-2, #31d0ff); border-color: var(--qz-accent-2, #31d0ff); color: #06131a; }
.qz-btn-primary { background: var(--qz-accent, #ff3d81); border-color: var(--qz-accent, #ff3d81); color: #1a0410; font-size: 18px; min-height: 60px; flex: 1 1 100%; }
.qz-btn-primary.is-active { background: transparent; color: var(--qz-accent, #ff3d81); border-color: var(--qz-accent, #ff3d81); }
.qz-btn[disabled] { opacity: 0.5; cursor: default; }
.qz-field { display: flex; flex-direction: column; gap: 6px; }
.qz-input { min-height: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--qz-line, #2a2e39); background: #0b0c10; color: inherit; font: inherit; width: 100%; box-sizing: border-box; }
.qz-input:focus-visible { outline: 2px solid #35c9ff; outline-offset: 1px; }
.qz-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.qz-check input { width: 20px; height: 20px; flex: 0 0 auto; margin: 0; }
.qz-acct-points { font-size: 28px; font-weight: 700; margin: 0; }
.qz-acct-qr { width: min(240px, 70vw); margin: 0 auto; border-radius: 12px; overflow: hidden; background: #fff; line-height: 0; }
.qz-acct-qr svg { width: 100%; height: auto; display: block; }
.qz-acct-code { text-align: center; font-size: 22px; font-weight: 700; letter-spacing: 0.18em; margin: 0; }
.qz-acct-redeem-form { display: flex; flex-direction: column; gap: 12px; }
.qz-acct-scanner { width: 100%; border-radius: 12px; background: #000; }
.qz-store-list { display: flex; flex-direction: column; gap: 16px; }
.qz-store-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.qz-store-name { margin: 0; font-size: 20px; }
.qz-store-price { font-weight: 700; color: #ff3d81; white-space: nowrap; }
.qz-store-price.is-owned { color: #35c9ff; }
.qz-mode-row { margin-top: 12px; }
.qz-mode-row .qz-mode { flex: 1 1 0; }
.qz-engine { margin-top: 14px; display: grid; gap: 6px; }
.qz-engine-label { font-weight: 700; }
.qz-engine-row .qz-engine-choice { flex: 1 1 0; }
.qz-engine-state { margin: 0; font-size: .9em; min-height: 1.2em; }
.qz-band-start { display: grid; gap: 10px; }
.qz-band-start[hidden], .qz-band-room[hidden] { display: none; }
.qz-band-joinrow { display: grid; grid-template-columns: 1fr 96px auto; gap: 8px; }
.qz-band-code { text-transform: uppercase; letter-spacing: 2px; }
.qz-band-room { display: grid; gap: 10px; }
.qz-band-roomcode { margin: 0; font-size: 20px; font-weight: 700; }
.qz-band-room .qz-hint { margin: 0; overflow-wrap: anywhere; }
.qz-band-peers { display: grid; gap: 8px; }
.qz-band-peer { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; }
.qz-band-peer-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-chords { margin-top: 12px; }
.qz-hint { color: var(--qz-muted, #9aa1b2); font-size: 14px; margin: 0 0 10px; }
.qz-guitar { margin-top: 12px; display: grid; gap: 12px; }
.qz-guitar[hidden] { display: none; }
.qz-instr { margin-top: 12px; display: grid; gap: 10px; }
.qz-instr[hidden] { display: none; }
.qz-instr .qz-hint { margin: 0; }
.qz-instr-body { display: grid; gap: 10px; }
.qz-instr-title { margin: 0; font-weight: 700; }
.qz-instr-sound:empty { display: none; }
.qz-instr-levels .qz-ilevel { flex: 1 1 0; }
.qz-instr-notes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qz-instr-notes .qz-izone { flex: 1 1 52px; min-width: 0; padding: 10px 0; }
.qz-instr-notes .qz-iwin-prev, .qz-instr-notes .qz-iwin-next { flex: 0 0 44px; padding: 10px 0; }
.qz-ibow { display: grid; place-items: center; min-height: 84px; padding: 12px; border: 2px dashed rgba(255,255,255,0.35); border-radius: 14px; background: rgba(255,229,0,0.06); font-size: 14px; text-align: center; touch-action: none; user-select: none; -webkit-user-select: none; cursor: ew-resize; }
.qz-ivalve { display: grid; place-items: center; min-height: 110px; padding: 12px; border: 2px dashed rgba(255,255,255,0.35); border-radius: 14px; background: linear-gradient(to top, rgba(246,193,58,0.04), rgba(246,193,58,0.18)); font-size: 14px; text-align: center; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.qz-ibounce { display: grid; place-items: center; min-height: 110px; padding: 12px; border: 2px dashed rgba(255,255,255,0.35); border-radius: 14px; background: linear-gradient(to top, rgba(201,138,18,0.06), rgba(201,138,18,0.22)); font-size: 14px; text-align: center; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.qz-ibreath.is-on { background: #f6c13a; color: #1b1530; }
.qz-ipiano { display: grid; gap: 8px; }
.qz-ipiano-row { display: flex; flex-wrap: wrap; gap: 6px; }
.qz-ipiano-row .qz-ipkey { flex: 1 1 44px; min-width: 0; padding: 14px 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.qz-ipiano-keys .qz-ipnote { background: #fffdf5; color: #1b1530; }
.qz-ipiano-keys .qz-ipnote.is-on, .qz-ipedal.is-on { background: #f6c13a; color: #1b1530; }
.qz-ipluck { display: grid; place-items: center; min-height: 110px; padding: 12px; border: 2px dashed rgba(255,255,255,0.35); border-radius: 14px; background: linear-gradient(to top, rgba(200,105,43,0.06), rgba(200,105,43,0.24)); font-size: 14px; text-align: center; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.qz-ibow:focus-visible, .qz-ivalve:focus-visible, .qz-ibounce:focus-visible, .qz-ipluck:focus-visible { outline: 3px solid #ffe500; outline-offset: 3px; }
.qz-ipedal { touch-action: none; user-select: none; -webkit-user-select: none; }
.qz-isynth { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,0.04); }
.qz-iknob-wrap, .qz-syn-try-macro { display: grid; grid-template-columns: 7.5em 1fr; gap: 8px; align-items: center; font-size: 14px; }
.qz-iknob-wrap input, .qz-syn-try-macro input { width: 100%; }
.qz-isynth .qz-hint { margin: 0; overflow-wrap: anywhere; }
.qz-syn-try { display: grid; gap: 10px; margin-bottom: 14px; }
.qz-syn-try .qz-hint { margin: 0; }
.qz-syn-try-notes .qz-syn-try-note { flex: 1 1 0; touch-action: none; }
.qz-iwin-count { font-size: 13px; min-width: 28px; text-align: center; }
.qz-guitar .qz-hint { margin: 0; }
.qz-gbanks .qz-gbank { flex: 1 1 0; }
.qz-gnotes-list { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.qz-gnotes-list .qz-gnote { padding: 10px 0; font-size: 13px; min-width: 0; }
.qz-guitar .qz-control input { grid-column: 1 / -1; width: 100%; accent-color: #ff3d81; }
.qz-chords[hidden] { display: none; }
.qz-chords-list .qz-chord { flex: 1 1 0; min-width: 40px; padding-left: 0; padding-right: 0; }
.qz-btn-small { min-height: 40px; padding: 8px 10px; font-size: 14px; }
.qz-rec-list { display: flex; flex-direction: column; gap: 12px; }
.qz-rec-item { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--qz-line, #2a2e39); padding-top: 12px; }
.qz-rec-name { font-size: 14px; }
.qz-meter { height: 10px; border-radius: 6px; background: var(--qz-line, #2a2e39); overflow: hidden; }
.qz-meter-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--qz-accent-2, #31d0ff), var(--qz-accent, #ff3d81)); transition: width 0.06s linear; }
.qz-beats { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.qz-beat { height: 8px; border-radius: 4px; background: var(--qz-line, #2a2e39); }
.qz-beat.is-on { background: var(--qz-accent, #ff3d81); }
.qz-control { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; }
.qz-control-label { font-size: 15px; font-weight: 600; }
.qz-control-value { font-size: 14px; color: var(--qz-muted, #9aa1b2); font-variant-numeric: tabular-nums; }
.qz-slider { grid-column: 1 / -1; width: 100%; height: 36px; accent-color: var(--qz-accent, #ff3d81); margin: 0; }
.qz-slider-plain { grid-column: 1 / -1; width: 100%; height: 36px; accent-color: var(--qz-accent-2, #31d0ff); margin: 0; }
.qz-stage { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #000; border-radius: 12px; overflow: hidden; display: none; }
.qz-stage.is-on { display: block; }
.qz-stage video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.qz-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.qz-stage.is-person { outline: 2px solid var(--qz-accent-2, #31d0ff); outline-offset: -2px; }
.qz-status { color: var(--qz-muted, #9aa1b2); font-size: 14px; margin: 0; min-height: 20px; }
.qz-status.is-error { color: #ff7a7a; }
.qz-band-qr { width: 168px; max-width: 60%; margin: 8px 0; border-radius: 8px; overflow: hidden; line-height: 0; }
.qz-band-qr svg { width: 100%; height: auto; display: block; }
.qz-band-skeleton { width: 96px; height: 72px; border-radius: 6px; flex: none; }
.qz-mic-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.qz-mic .qz-control-label { display: block; margin-top: 8px; }
.qz-mic-note { min-width: 44px; flex: 0 0 auto; }
.qz-mic-note:not(.is-active) { opacity: .45; }
.qz-select { min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid rgba(127,127,127,.35); background: transparent; color: inherit; font: inherit; }
.qz-select option { color: #111; }
/* 3D figure (qz-13) */
.qz-figure { position: relative; width: 100%; aspect-ratio: 4 / 3; max-height: 62vh; margin-top: 12px; border-radius: 14px; overflow: hidden; background: radial-gradient(circle at 50% 35%, #232842 0%, #0b0c10 75%); }
.qz-figure[hidden] { display: none; }
.qz-figure-canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; }
.qz-figure-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 12px; }
.qz-figure-group { gap: 6px; }
.qz-figure-group[hidden] { display: none; }
.qz-camera-card { position: relative; }
/* figure only: the camera picture keeps running for the pose, but is not shown */
.qz-camera-card.is-figure-only .qz-stage { position: absolute; left: 0; top: 0; width: 2px; height: 2px; min-height: 0; opacity: 0.01; overflow: hidden; pointer-events: none; }
.qz-camera-card.is-figure-only .qz-figure { margin-top: 0; }
/* figure builder (page /avatar) */
.qz-builder-preview .qz-figure { margin-top: 0; max-height: 52vh; }
.qz-builder-group + .qz-builder-group { margin-top: 18px; }
.qz-builder-group[hidden] { display: none; }
.qz-builder-choices { flex-wrap: wrap; gap: 8px; align-items: center; }
.qz-builder-choices .qz-btn { flex: 0 0 auto; }
.qz-swatch { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); padding: 0; cursor: pointer; }
.qz-swatch.is-active { border-color: #fff; box-shadow: 0 0 0 3px #31d0ff; }
.qz-builder-color { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.qz-builder-range { flex: 1 1 200px; min-height: 44px; }
.qz-figure-link { display: inline-block; margin-top: 10px; }
.qz-figure-link::before { content: none; }
/* step sequencer (qz-14) */
.qz-steps-grid { overflow-x: auto; padding-bottom: 6px; margin: 10px 0 12px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.25) transparent; }
.qz-steps-row { display: grid; grid-template-columns: 30px repeat(16, minmax(17px, 1fr)); gap: 3px; margin-bottom: 3px; min-width: 350px; align-items: center; }
.qz-steps-note { font-size: 12px; color: rgba(255,255,255,0.7); }
.qz-steps-cell { height: 34px; padding: 0; border-radius: 6px; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.05); cursor: pointer; }
.qz-steps-cell.is-beat { background: rgba(255,255,255,0.11); }
.qz-steps-cell.is-active { background: #31d0ff; border-color: #31d0ff; }
.qz-steps-cell.is-now { box-shadow: 0 0 0 2px #ff3d81; }
.qz-steps-cell.is-now.is-active { background: #fff; }
.qz-steps-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; margin-top: 14px; }
.qz-steps-field { display: flex; flex-direction: column; gap: 4px; }
.qz-steps-label { font-size: 12px; color: rgba(255,255,255,0.7); }

.qz-mic-meter { flex: 1; min-width: 80px; height: 10px; border-radius: 5px; background: rgba(127,127,127,.25); overflow: hidden; align-self: center; }
.qz-mic-level { height: 100%; width: 0; background: currentColor; transition: width .08s linear; }
.qz-mic-toggle.is-active { outline: 2px solid currentColor; }

/* s3: AdSense banner (desktop only, QZ_Banner) and the desktop hint in the store */
.qz-banner { display: block; width: 100%; max-width: 970px; min-height: 90px; margin: 40px auto 0; }
.qz-ad-desktop { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.qz-ad-desktop img { width: 132px; height: 132px; border-radius: 12px; background: #0d0a17; padding: 6px; flex: none; }
.qz-ad-desktop p { margin: 0 0 8px; max-width: 44ch; }

/* ca-2: offers (partner clip, rewarded ad, own clip) and the running clip */
.qz-ad-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.qz-ad-offer { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "pts name" "pts left"; align-items: center; gap: 0 12px; padding: 12px 14px; text-align: left; font: inherit; color: var(--qz-ink, #0d0a17); background: var(--qz-offer, var(--qz-lime, #b6ff2e)); border: var(--qz-edge, 3px solid #000); border-radius: 16px; box-shadow: 4px 4px 0 #000; cursor: pointer; transition: transform .12s; }
.qz-ad-offer:hover:not(:disabled), .qz-ad-offer:focus-visible { transform: rotate(-1.5deg) scale(1.03); }
.qz-ad-offer:focus-visible { outline: 3px solid var(--qz-yellow, #ffe500); outline-offset: 3px; }
.qz-ad-offer:disabled { opacity: .5; cursor: default; box-shadow: none; }
.qz-ad-offer-partner { --qz-offer: var(--qz-yellow, #ffe500); }
.qz-ad-offer-network { --qz-offer: var(--qz-accent-2, #00e5ff); }
.qz-ad-offer-points { grid-area: pts; font-family: var(--qz-display, Impact, sans-serif); font-size: 34px; line-height: 1; }
.qz-ad-offer-name { grid-area: name; font-weight: 800; font-size: 16px; }
.qz-ad-offer-left { grid-area: left; font-size: 13px; font-weight: 700; opacity: .8; }
.qz-site .qz-ad-video { width: 100%; max-width: 520px; aspect-ratio: 1 / 1; margin: 0 auto; display: block; background: #000; border: var(--qz-edge, 3px solid #000); border-radius: 18px; object-fit: cover; cursor: pointer; }
.qz-ad-clipbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; width: 100%; max-width: 520px; margin: 0 auto; }
/* ca-3: /admin/ads clips and partner report */
.qz-aa-sub { margin: 10px 0 0; font-size: 15px; font-weight: 800; }
.qz-aa-cliplist { display: flex; flex-direction: column; gap: 10px; }
.qz-aa-clip { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 12px; align-items: center; padding: 8px; border: 2px solid rgba(255,255,255,.12); border-radius: 12px; }
.qz-aa-clip.is-off { opacity: .55; }
.qz-aa-clip img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; background: #000; }
.qz-aa-clip-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qz-aa-clip-text small { color: var(--qz-muted, #d3cbe8); font-size: 12px; }
@media (max-width: 560px) { .qz-aa-clip { grid-template-columns: 56px 1fr; } .qz-aa-clip img { width: 56px; height: 56px; } }
.qz-aa-clipform { display: flex; flex-direction: column; gap: 12px; }
.qz-aa-clipform label, .qz-aa-report label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.qz-aa-clipform small { font-weight: 600; color: var(--qz-muted, #d3cbe8); }
.qz-aa-preview { width: 100%; max-width: 320px; aspect-ratio: 1 / 1; background: #000; border-radius: 12px; }
.qz-aa-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qz-aa-table th, .qz-aa-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(255,255,255,.12); }
.qz-ad-label { font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--qz-muted, #d3cbe8); }