/* QUEEZE pop design (qz-21): loud colours, fat type, hard shadows. Fonts: SIL OFL 1.1. */
@font-face { font-family: "QZ Display"; src: url("/pub/api/files/download/qz-LilitaOne-Regular.woff2/6af85a52ce7b8fd9a8377a99") format("woff2"); font-display: swap; }
@font-face { font-family: "QZ Black"; src: url("/pub/api/files/download/qz-PassionOne-Black.woff2/6af85a52ce7b8fd9a8377a9a") format("woff2"); font-display: swap; }
@font-face { font-family: "QZ Text"; font-weight: 600; src: url("/pub/api/files/download/qz-Poppins-SemiBold.woff2/6af85a52ce7b8fd9a8377a9b") format("woff2"); font-display: swap; }
@font-face { font-family: "QZ Text"; font-weight: 700 900; src: url("/pub/api/files/download/qz-Poppins-Bold.woff2/6af85a52ce7b8fd9a8377a9c") format("woff2"); font-display: swap; }

.qz-site {
  --qz-page: #0d0a17; --qz-surface: #1b1530; --qz-surface-2: #251d40; --qz-line: #000;
  --qz-text: #fff; --qz-muted: #d3cbe8; --qz-ink: #0d0a17;
  --qz-accent: #ff2e88; --qz-accent-2: #00e5ff; --qz-yellow: #ffe500; --qz-lime: #b6ff2e; --qz-violet: #8a4dff; --qz-orange: #ff7a1a;
  --qz-font: "QZ Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --qz-display: "QZ Display", "QZ Black", Impact, "Arial Black", sans-serif;
  --qz-radius: 18px; --qz-edge: 3px solid #000;
  font-family: var(--qz-font); font-weight: 600; color: var(--qz-text);
  background:
    radial-gradient(60vmax 50vmax at -10% -10%, rgba(255, 46, 136, 0.30), transparent 60%),
    radial-gradient(55vmax 45vmax at 110% 35%, rgba(0, 229, 255, 0.20), transparent 60%),
    radial-gradient(50vmax 40vmax at 40% 120%, rgba(138, 77, 255, 0.32), transparent 60%),
    radial-gradient(rgba(255, 255, 255, 0.07) 1.2px, transparent 1.3px) 0 0 / 22px 22px,
    var(--qz-page);
  background-attachment: fixed;
}
html, body { background: #0d0a17; }
.qz-site ::selection { background: var(--qz-yellow); color: var(--qz-ink); }

/* type */
.qz-site .qz-title { font-family: var(--qz-display); font-weight: 400; font-size: clamp(38px, 10vw, 56px); line-height: 0.95; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; text-shadow: 3px 3px 0 var(--qz-accent), 6px 6px 0 #000; transform: rotate(-2deg); transform-origin: left center; margin: 4px 0 2px; }
.qz-site .qz-lead { color: var(--qz-muted); font-size: 16px; line-height: 1.5; }
.qz-site .qz-card-title { font-family: var(--qz-display); font-weight: 400; font-size: 20px; letter-spacing: 0.02em; color: var(--qz-ink); background: var(--qz-yellow); align-self: flex-start; padding: 3px 12px 2px; border: var(--qz-edge); border-radius: 10px; transform: rotate(-2deg); box-shadow: 3px 3px 0 #000; }
.qz-site .qz-card-heading, .qz-site .qz-store-name { font-family: var(--qz-display); font-weight: 400; font-size: 24px; letter-spacing: 0.01em; }
.qz-site .qz-prose h3 { font-family: var(--qz-display); font-weight: 400; font-size: 20px; color: var(--qz-yellow); }
.qz-site .qz-prose p, .qz-site .qz-hint, .qz-site .qz-status { color: var(--qz-muted); }

/* cards: thick black edge, coloured hard shadow, colour changes from card to card */
.qz-site .qz-card { background: var(--qz-surface); border: var(--qz-edge); border-radius: var(--qz-radius); box-shadow: 7px 7px 0 var(--qz-card-shadow, var(--qz-accent)); padding: 18px; }
.qz-site .qz-screen > .qz-card:nth-of-type(4n+2) { --qz-card-shadow: var(--qz-accent-2); }
.qz-site .qz-screen > .qz-card:nth-of-type(4n+3) { --qz-card-shadow: var(--qz-lime); }
.qz-site .qz-screen > .qz-card:nth-of-type(4n+4) { --qz-card-shadow: var(--qz-violet); }
.qz-site .qz-screen > .qz-card:nth-of-type(4n+2) .qz-card-title { background: var(--qz-accent-2); transform: rotate(1.5deg); }
.qz-site .qz-screen > .qz-card:nth-of-type(4n+3) .qz-card-title { background: var(--qz-lime); }
.qz-site .qz-screen > .qz-card:nth-of-type(4n+4) .qz-card-title { background: var(--qz-accent); transform: rotate(1.5deg); }
.qz-site .qz-screen { gap: 24px; padding-top: 12px; }

/* buttons: sticker look, pressed in on tap */
.qz-site .qz-btn { font-family: var(--qz-font); font-weight: 800; font-size: 15px; color: #fff; background: var(--qz-surface-2); border: var(--qz-edge); border-radius: 14px; box-shadow: 4px 4px 0 #000; transition: transform 0.08s, box-shadow 0.08s, background 0.12s; }
.qz-site a.qz-btn { color: #fff; }
.qz-site .qz-btn:hover { border-color: #000; background: #312658; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #000; }
.qz-site .qz-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }
.qz-site .qz-btn:focus-visible { outline: 3px solid var(--qz-yellow); outline-offset: 3px; }
.qz-site .qz-btn.is-active { background: var(--qz-accent-2); border-color: #000; color: var(--qz-ink); }
.qz-site .qz-btn-primary, .qz-site a.qz-btn-primary { font-family: var(--qz-display); font-weight: 400; font-size: 26px; letter-spacing: 0.03em; text-transform: uppercase; min-height: 64px; background: var(--qz-yellow); color: var(--qz-ink); box-shadow: 6px 6px 0 var(--qz-accent), 6px 6px 0 3px #000; transform: rotate(-1deg); }
.qz-site .qz-btn-primary:hover { background: #fff04d; transform: rotate(-1deg) translate(-1px, -1px); }
.qz-site .qz-btn-primary:active { transform: rotate(-1deg) translate(4px, 4px); box-shadow: 1px 1px 0 var(--qz-accent), 1px 1px 0 3px #000; }
.qz-site .qz-btn-primary.is-active { background: var(--qz-accent); color: #fff; border-color: #000; }
.qz-site .qz-btn-accent { background: var(--qz-accent); color: #fff; border-color: #000; }
.qz-site .qz-btn[disabled] { opacity: 0.45; box-shadow: none; transform: none; }
.qz-site .qz-btn-small { font-size: 13px; box-shadow: 3px 3px 0 #000; }

/* fields */
.qz-site .qz-input, .qz-site .qz-select { border: var(--qz-edge); border-radius: 12px; background: #0d0a17; color: #fff; font-weight: 700; min-height: 46px; box-shadow: inset 2px 2px 0 rgba(255,255,255,0.06); }
.qz-site .qz-input:focus-visible, .qz-site .qz-select:focus-visible { outline: 3px solid var(--qz-accent-2); outline-offset: 1px; }
.qz-site .qz-slider { accent-color: var(--qz-accent); }
.qz-site .qz-slider-plain { accent-color: var(--qz-accent-2); }
.qz-site .qz-control-label { font-weight: 800; }
.qz-site .qz-control-value { color: var(--qz-yellow); font-weight: 800; }
.qz-site .qz-check input { accent-color: var(--qz-accent); }

/* meters, beat dots, steps */
.qz-site .qz-meter { height: 14px; border: var(--qz-edge); border-radius: 8px; background: #0d0a17; }
.qz-site .qz-meter-bar { background: linear-gradient(90deg, var(--qz-lime), var(--qz-yellow) 55%, var(--qz-accent)); }
.qz-site .qz-beat { height: 10px; border-radius: 3px; background: #2e2547; }
.qz-site .qz-beat.is-on { background: var(--qz-yellow); box-shadow: 0 0 10px var(--qz-yellow); }
.qz-site .qz-steps-cell { border: 2px solid #000; background: #2a2145; border-radius: 7px; }
.qz-site .qz-steps-cell.is-beat { background: #382c5c; }
.qz-site .qz-steps-cell.is-active { background: var(--qz-lime); border-color: #000; box-shadow: inset -2px -3px 0 rgba(0,0,0,0.25); }
.qz-site .qz-steps-cell.is-now { box-shadow: 0 0 0 3px var(--qz-yellow); }
.qz-site .qz-steps-cell.is-now.is-active { background: #fff; }
.qz-site .qz-steps-note, .qz-site .qz-steps-label { color: var(--qz-muted); font-weight: 800; }

/* store, account */
.qz-site .qz-store-price { color: var(--qz-yellow); font-family: var(--qz-display); font-weight: 400; font-size: 22px; }
.qz-site .qz-store-price.is-owned { color: var(--qz-lime); }
.qz-site .qz-acct-points { font-family: var(--qz-display); font-weight: 400; font-size: 48px; color: var(--qz-yellow); text-shadow: 3px 3px 0 #000; }
.qz-site .qz-acct-links { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.qz-site .qz-acct-links .qz-btn { flex: 1 1 100%; }
.qz-site .qz-link { appearance: none; background: none; border: 0; padding: 6px 0; font: inherit; font-size: 14px; font-weight: 700; color: var(--qz-accent-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qz-site .qz-link:hover, .qz-site .qz-link:focus-visible { color: var(--qz-yellow); }
.qz-site .qz-link:focus-visible { outline: 2px solid var(--qz-accent-2); outline-offset: 2px; }
.qz-site .qz-acct-email-shown { margin-top: -6px; }
.qz-site .qz-acct-code { font-family: var(--qz-display); font-weight: 400; font-size: 30px; color: var(--qz-accent-2); }
.qz-site .qz-acct-qr, .qz-site .qz-band-qr { border: var(--qz-edge); box-shadow: 5px 5px 0 var(--qz-accent); }
.qz-site .qz-figure, .qz-site .qz-stage, .qz-site .qz-intro-video { border: var(--qz-edge); }
.qz-site .qz-swatch.is-active { border-color: #000; box-shadow: 0 0 0 3px var(--qz-yellow); }

/* links that point somewhere */
.qz-site .qz-back { color: var(--qz-accent-2); font-weight: 800; }
.qz-site .qz-back:hover { color: var(--qz-yellow); }
/* the page-top "back to start" links: the header bar does that now */
.qz-site .qz-screen > .qz-back:first-child { display: none; }

/* ---------------------------------------------------------------- header bar and menu (layout QZ_Header) */
.qz-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: rgba(13, 10, 23, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: var(--qz-edge); box-shadow: 0 3px 0 var(--qz-accent); }
.qz-top-inner { width: 100%; max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.qz-menu-btn { appearance: none; width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-content: center; gap: 5px; background: var(--qz-yellow); border: var(--qz-edge); border-radius: 14px; box-shadow: 3px 3px 0 #000; cursor: pointer; padding: 0; }
.qz-menu-btn span { display: block; width: 22px; height: 4px; border-radius: 2px; background: #000; }
.qz-menu-btn span:nth-child(2) { width: 15px; }
.qz-menu-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.qz-menu-btn:focus-visible, .qz-brand:focus-visible, .qz-top-play:focus-visible, .qz-menu-link:focus-visible, .qz-menu-close:focus-visible { outline: 3px solid var(--qz-accent-2); outline-offset: 3px; }
.qz-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; margin-right: auto; }
.qz-brand-word { font-family: var(--qz-display); font-size: 28px; line-height: 1; letter-spacing: 0.02em; text-shadow: 2px 2px 0 var(--qz-accent); }
.qz-logo { position: relative; width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%; border: 7px solid var(--qz-yellow); box-shadow: 0 0 0 2px #000, inset 0 0 0 2px #000; }
.qz-logo::after { content: ""; position: absolute; left: 4%; top: 44%; width: 38%; height: 38%; border-radius: 50%; background: var(--qz-accent); box-shadow: 0 0 0 2px #000; }
.qz-top-play { font-family: var(--qz-display); font-size: 18px; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; color: var(--qz-ink); background: var(--qz-accent); border: var(--qz-edge); border-radius: 999px; padding: 8px 18px 7px; box-shadow: 3px 3px 0 #000; }
.qz-site a.qz-top-play { color: #fff; }
.qz-top-play:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.qz-top-play[hidden] { display: none; }

.qz-menu-backdrop { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.6); opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.qz-menu { position: fixed; z-index: 81; top: 0; bottom: 0; left: 0; width: min(86vw, 360px); display: flex; flex-direction: column; gap: 6px; padding: calc(16px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom)); background: var(--qz-yellow); color: var(--qz-ink); border-right: var(--qz-edge); box-shadow: 8px 0 0 var(--qz-accent); transform: translateX(calc(-100% - 12px)); transition: transform 0.25s cubic-bezier(.2, .9, .3, 1.15); overflow-y: auto; visibility: hidden; }
.qz-menu-open .qz-menu { transform: none; visibility: visible; }
.qz-menu-open .qz-menu-backdrop { opacity: 1; pointer-events: auto; }
.qz-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.qz-menu-word { font-family: var(--qz-display); font-size: 34px; line-height: 1; color: var(--qz-ink); }
.qz-menu-close { appearance: none; width: 44px; height: 44px; border: var(--qz-edge); border-radius: 12px; background: #fff; color: #000; font: 900 22px/1 var(--qz-font); cursor: pointer; box-shadow: 3px 3px 0 #000; }
.qz-menu-link { display: flex; align-items: center; justify-content: space-between; font-family: var(--qz-display); font-size: 30px; line-height: 1.1; text-transform: uppercase; color: var(--qz-ink); text-decoration: none; padding: 8px 12px; border: 3px solid transparent; border-radius: 14px; transform: rotate(-1deg); }
.qz-site a.qz-menu-link { color: var(--qz-ink); }
.qz-menu-link:nth-of-type(even) { transform: rotate(1deg); }
.qz-menu-link::after { content: "\2192"; font-family: var(--qz-font); font-weight: 900; font-size: 22px; opacity: 0; transition: opacity 0.12s, transform 0.12s; }
.qz-menu-link:hover, .qz-menu-link.is-here { background: #000; color: var(--qz-yellow); }
.qz-site a.qz-menu-link:hover, .qz-site a.qz-menu-link.is-here { color: var(--qz-yellow); }
.qz-menu-link:hover::after, .qz-menu-link.is-here::after { opacity: 1; }
.qz-menu-link--hot { background: var(--qz-accent); border-color: #000; box-shadow: 4px 4px 0 #000; }
.qz-site a.qz-menu-link--hot { color: #fff; }
.qz-menu-small { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding-top: 16px; border-top: 3px solid #000; }
.qz-menu-small a { color: var(--qz-ink); font-weight: 800; }
.qz-site .qz-menu-small a { color: var(--qz-ink); }
.qz-menu .qz-lang { flex: 0 0 auto; min-height: 38px; padding: 6px 12px; background: #fff; color: #000; font-size: 13px; }
.qz-menu .qz-lang.is-active { background: #000; color: var(--qz-yellow); }
body.qz-menu-open { overflow: hidden; }

/* ---------------------------------------------------------------- running ticker */
.qz-ticker { overflow: hidden; border-block: var(--qz-edge); background: var(--qz-accent); color: #fff; transform: rotate(-2deg); margin: 6px -24px; box-shadow: 0 4px 0 #000; }
.qz-ticker-track { display: flex; width: max-content; animation: qz-ticker 14s linear infinite; }
.qz-ticker-text { font-family: var(--qz-display); font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; padding: 6px 0 4px; }
@keyframes qz-ticker { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- home */
.qz-site .qz-home { justify-content: flex-start; padding-top: 18px; gap: 22px; overflow-x: clip; }
.qz-site .qz-pulse { width: 150px; height: 150px; margin: 6px auto 0; }
.qz-site .qz-pulse-dot { inset: 32px; background: none; border: 17px solid var(--qz-yellow); box-shadow: 0 0 0 3px #000, inset 0 0 0 3px #000, 6px 6px 0 3px #000; animation: qz-bounce 0.47s ease-in-out infinite alternate; }
.qz-site .qz-pulse-dot::after { content: ""; position: absolute; left: 2%; top: 42%; width: 40%; height: 40%; border-radius: 50%; background: var(--qz-accent); box-shadow: 0 0 0 3px #000; }
.qz-site .qz-pulse-ring { inset: 32px; border: 4px solid var(--qz-accent); }
.qz-site .qz-pulse-ring--late { border-color: var(--qz-accent-2); }
@keyframes qz-bounce { from { transform: scale(1) rotate(-6deg); } to { transform: scale(1.06) rotate(4deg); } }
.qz-site .qz-title--big { font-size: clamp(68px, 21vw, 128px); text-align: center; transform: rotate(-4deg); transform-origin: center; text-shadow: 4px 4px 0 var(--qz-accent), 8px 8px 0 var(--qz-accent-2), 12px 12px 0 #000; margin: 0; }
.qz-site .qz-lead--center { font-size: 17px; color: #fff; max-width: 30ch; margin: 0 auto; }
.qz-site .qz-home .qz-btn-primary { font-size: 34px; min-height: 78px; }
.qz-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; text-align: left; }
.qz-site a.qz-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 118px; padding: 14px; color: var(--qz-ink); text-decoration: none; background: var(--qz-tile, var(--qz-accent-2)); border: var(--qz-edge); border-radius: 18px; box-shadow: 5px 5px 0 #000; transition: transform 0.08s, box-shadow 0.08s; overflow: hidden; }
.qz-site a.qz-tile:nth-child(odd) { transform: rotate(-1.2deg); }
.qz-site a.qz-tile:nth-child(even) { transform: rotate(1.2deg); }
.qz-site a.qz-tile:hover { transform: rotate(0) translate(-2px, -2px); box-shadow: 7px 7px 0 #000; }
.qz-site a.qz-tile:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }
.qz-site a.qz-tile:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.qz-tile-name { font-family: var(--qz-display); font-size: clamp(18px, 5.6vw, 26px); line-height: 1; text-transform: uppercase; overflow-wrap: anywhere; hyphens: auto; }
.qz-tile-sub { font-size: 13px; font-weight: 700; line-height: 1.3; }
.qz-tile-mark { position: absolute; top: -6px; right: 4px; font-family: var(--qz-display); font-size: 64px; line-height: 1; opacity: 0.22; color: #000; pointer-events: none; }
.qz-tile--seq { --qz-tile: var(--qz-lime); }
.qz-tile--sets { --qz-tile: var(--qz-accent-2); }
.qz-tile--figure { --qz-tile: var(--qz-accent); }
.qz-site a.qz-tile--figure, .qz-site a.qz-tile--intro { color: #fff; }
.qz-tile--figure .qz-tile-mark, .qz-tile--intro .qz-tile-mark { color: #fff; }
.qz-tile--intro { --qz-tile: var(--qz-violet); }
.qz-tile--account { --qz-tile: var(--qz-yellow); }
.qz-tile--settings { --qz-tile: #fff; }
.qz-tile--settings .qz-tile-name { font-size: clamp(14px, 4.2vw, 19px); overflow-wrap: normal; hyphens: manual; }
.qz-home-foot { display: flex; justify-content: center; gap: 18px; font-size: 14px; }
.qz-site .qz-home-foot a { color: var(--qz-muted); font-weight: 700; }

/* ---------------------------------------------------------------- sequencer (/sequencer) */
.qz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qz-seq-namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qz-site .qz-seq-name { flex: 1 1 200px; font-family: var(--qz-display); font-weight: 400; font-size: 24px; letter-spacing: 0.02em; color: var(--qz-yellow); }
.qz-seq-saved { font-size: 12px; font-weight: 800; color: var(--qz-lime); }
.qz-seq-grid { display: grid; gap: 12px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.qz-seq-block { display: grid; gap: 4px; padding: 8px; background: #0d0a17; border: var(--qz-edge); border-radius: 14px; }
.qz-seq-row { display: grid; grid-template-columns: 32px repeat(16, minmax(0, 1fr)); gap: 3px; align-items: center; }
.qz-seq-row > .qz-seq-cell:nth-child(4n+2) { margin-left: 3px; }
.qz-seq-note { font-size: 11px; font-weight: 800; color: var(--qz-muted); }
.qz-seq-cell { height: 34px; min-width: 0; padding: 0; border: 2px solid #000; border-radius: 7px; background: #2a2145; cursor: pointer; transition: background 0.06s, transform 0.06s; }
.qz-seq-cell.is-beat { background: #3a2d63; }
.qz-seq-cell:focus-visible { outline: 3px solid var(--qz-accent-2); outline-offset: 1px; }
.qz-seq-row:nth-child(1) { --qz-row: var(--qz-accent); }
.qz-seq-row:nth-child(2) { --qz-row: var(--qz-orange); }
.qz-seq-row:nth-child(3) { --qz-row: var(--qz-yellow); }
.qz-seq-row:nth-child(4) { --qz-row: var(--qz-lime); }
.qz-seq-row:nth-child(5) { --qz-row: var(--qz-accent-2); }
.qz-seq-row:nth-child(6) { --qz-row: var(--qz-violet); }
/* a note start: the colored part is as high as its velocity (--vel 0.11..1) */
.qz-seq-cell.is-active { position: relative; background: linear-gradient(to top, var(--qz-row) calc(var(--vel, 1) * 100%), color-mix(in srgb, var(--qz-row) 30%, #0d0a17) 0); box-shadow: inset -2px -3px 0 rgba(0, 0, 0, 0.3); }
/* a held step: the same color, a bit darker, joined to its neighbours */
.qz-seq-cell.is-held { position: relative; background: color-mix(in srgb, var(--qz-row) 72%, #0d0a17); border-left-color: transparent; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.qz-seq-cell.joins-next { border-right-color: transparent; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.qz-seq-cell.joins-next::after { content: ''; position: absolute; top: -2px; bottom: -2px; right: -12px; width: 12px; background: color-mix(in srgb, var(--qz-row) 72%, #0d0a17); border-top: 2px solid #000; border-bottom: 2px solid #000; pointer-events: none; z-index: 1; }
/* the end of a note can be dragged: a small grip */
.qz-seq-cell.is-end::before { content: ''; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 3px; border-radius: 2px; background: rgba(0, 0, 0, 0.55); pointer-events: none; }
.qz-seq-grid.is-vel { touch-action: none; }
.qz-seq-grid.is-vel .qz-seq-cell.is-active, .qz-seq-grid.is-vel .qz-seq-cell.is-held { cursor: ns-resize; }
.qz-seq-grid:not(.is-vel) .qz-seq-cell.is-end { cursor: ew-resize; }
.qz-seq-toolgroup { display: flex; gap: 6px; }
.qz-seq-toolgroup .qz-btn { flex: 1 1 0; }
.qz-seq-toolhint { margin: 2px 0 0; font-size: 12px; }
.qz-seq-toolfield { grid-column: 1 / -1; }
.qz-seq-mini i.held { opacity: 0.6; }
.qz-seq-cell.is-now { outline: 3px solid #fff; outline-offset: -1px; }
.qz-seq-cell.is-now.is-active { transform: scale(1.12); background: #fff; }
.qz-seq-cell.is-now.is-held { background: color-mix(in srgb, var(--qz-row) 50%, #fff); }
.qz-seq-block--8 .qz-seq-row { grid-template-columns: 30px repeat(8, minmax(0, 1fr)); gap: 4px; }
.qz-seq-block--8 .qz-seq-cell { height: 36px; }
.qz-seq-block--8 .qz-seq-row > .qz-seq-cell:nth-child(4n+2) { margin-left: 4px; }
.qz-seq-tools .qz-btn { flex: 1 1 auto; }
.qz-seq-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px 14px; }
/* gen-3: drum patterns on /sequencer */
.qz-drumed-body { display: grid; gap: 12px; }
.qz-drumed-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qz-site .qz-drumed-name { flex: 1 1 200px; font-family: var(--qz-display); font-weight: 400; font-size: 22px; letter-spacing: 0.02em; color: var(--qz-yellow); }
.qz-drumed-hint { margin: 0; font-size: 12px; }
.qz-drumed .qz-drumed-row { grid-template-columns: 52px repeat(16, minmax(0, 1fr)); }
.qz-drumed .qz-seq-block--8 .qz-drumed-row { grid-template-columns: 48px repeat(8, minmax(0, 1fr)); }
.qz-drumed .qz-dcell { height: 26px; }
.qz-drumed .qz-seq-block--8 .qz-dcell { height: 30px; }
.qz-drumed-lane { font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--qz-row); }
.qz-dcell.is-odd { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.35) 0 3px, transparent 3px 7px), linear-gradient(to top, var(--qz-row) calc(var(--vel, 1) * 100%), color-mix(in srgb, var(--qz-row) 30%, #0d0a17) 0); }
/* gen-4: note sequences (free notes) as a piano roll */
.qz-seqed.is-notes .qz-seq-grid:not(.qz-drumed-grid), .qz-seqed.is-notes .qz-seq-toolfield, .qz-seqed.is-notes .qz-seq-length, .qz-seqed.is-notes .qz-seq-random, .qz-seqed.is-notes .qz-seq-clear,
.qz-seqed.is-notes .qz-seq-field:has(.qz-seq-key), .qz-seqed.is-notes .qz-seq-field:has(.qz-seq-scale), .qz-seqed:not(.is-notes) .qz-seq-field:has(.qz-seq-role) { display: none; }
.qz-seq-roll:empty { display: none; }
.qz-seq-roll { display: flex; flex-direction: column; gap: 6px; }
.qz-seq-roll-box { position: relative; height: 200px; border-radius: 14px; overflow: hidden; background: #0d0a17; border: 2px solid rgba(255,255,255,0.12); }
.qz-seq-roll-beat { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.07); }
.qz-seq-roll-beat.is-bar { background: rgba(255,255,255,0.22); }
.qz-seq-roll-note { position: absolute; min-height: 3px; border-radius: 3px; background: var(--qz-accent, #ff3d8b); box-shadow: 0 0 0 1px rgba(0,0,0,0.35) inset; }
.qz-seq-roll-now { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; opacity: 0; transition: left 0.06s linear; }
.qz-seq-roll-now.is-on { opacity: 0.8; }
.qz-seq-roll-range { margin: 0; font-size: 12px; }
.qz-card-subtitle { margin: 6px 0 0; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--qz-muted); }
.qz-seq-field { display: flex; flex-direction: column; gap: 4px; }
.qz-seq-label { font-size: 12px; font-weight: 800; color: var(--qz-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.qz-seq-sets { gap: 8px; }
.qz-seq-sets .qz-btn { flex: 0 0 auto; }
.qz-seq-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.qz-seq-item { appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px; text-align: left; font: inherit; color: #fff; background: var(--qz-surface-2); border: var(--qz-edge); border-radius: 14px; box-shadow: 4px 4px 0 #000; cursor: pointer; }
.qz-seq-item:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #000; }
.qz-seq-item:focus-visible { outline: 3px solid var(--qz-yellow); outline-offset: 2px; }
.qz-seq-item.is-active { background: var(--qz-yellow); color: var(--qz-ink); box-shadow: 4px 4px 0 var(--qz-accent), 4px 4px 0 3px #000; }
.qz-seq-item-name { font-family: var(--qz-display); font-size: 18px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.qz-seq-item-meta { font-size: 12px; font-weight: 700; opacity: 0.85; }
.qz-seq-mini { display: grid; gap: 1px; width: 100%; margin-top: 4px; }
.qz-seq-mini-row { display: flex; gap: 1px; }
.qz-seq-mini-row i { flex: 1 1 0; height: 4px; border-radius: 1px; background: rgba(255, 255, 255, 0.14); }
.qz-seq-mini-row i.on { background: var(--qz-lime); }
.qz-seq-item.is-active .qz-seq-mini-row i { background: rgba(0, 0, 0, 0.15); }
.qz-seq-item.is-active .qz-seq-mini-row i.on { background: #000; }

/* the sequences of the playing set (/play) */
.qz-seqs-list { display: grid; gap: 8px; }
.qz-seqs-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 8px 8px 8px 12px; background: #0d0a17; border: var(--qz-edge); border-radius: 12px; }
.qz-seqs-dot { width: 12px; height: 12px; border-radius: 50%; background: #3a2d63; border: 2px solid #000; }
.qz-seqs-item.is-playing .qz-seqs-dot { background: var(--qz-lime); box-shadow: 0 0 10px var(--qz-lime); }
.qz-seqs-name { font-family: var(--qz-display); font-size: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-site .qz-seqs-remove { flex: 0 0 auto; min-width: 40px; }
.qz-seqs-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.qz-seqs-row .qz-select { flex: 1 1 200px; }
.qz-site .qz-seqs-row .qz-btn { flex: 0 0 auto; }

/* mixer (/play, qz-28) */
.qz-mixer-targets { display: grid; gap: 8px; margin-bottom: 12px; }
.qz-mix-targetrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.qz-mix-targetlabel { font-weight: 700; min-width: 110px; }
.qz-mix-targets { display: flex; gap: 6px; flex-wrap: wrap; }
.qz-mixer-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.qz-mix-tile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 8px; padding: 10px; background: #0d0a17; border: var(--qz-edge); border-radius: 12px; }
.qz-mix-name { font-family: var(--qz-display); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qz-site .qz-mix-toggle { min-width: 64px; }
.qz-mix-tile .qz-mix-level { grid-column: 1 / -1; width: 100%; }
.qz-mix-value { grid-column: 1 / -1; font-size: 13px; opacity: .8; }
.qz-mix-follow { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 13px; }
.qz-mix-tile.is-off { opacity: .55; }
.qz-mix-tile.is-off .qz-mix-toggle { background: #3a2d63; }
.qz-mix-tile.is-pending { border-color: var(--qz-lime); animation: qz-mix-blink 1s steps(2) infinite; }
@keyframes qz-mix-blink { 50% { box-shadow: 0 0 0 2px var(--qz-lime); } }
.qz-mix-noseqs { grid-column: 1 / -1; }

/* play screen "stage first" (qz-29): stage as background, glass layers above it, sheets from below */
.qz-site .qz-screen.qz-playui { position: relative; max-width: none; width: 100%; margin: 0; padding: 0; height: var(--qz-ui-h, calc(100dvh - 64px)); min-height: 420px; overflow: hidden; display: block; }
.qz-ui-stage { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 30%, #2a1650 0%, #0d0a17 60%, #05040a 100%); }
.qz-site .qz-ui-stage .qz-stage, .qz-site .qz-ui-stage .qz-figure { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.qz-ui-stage .qz-stage canvas { object-fit: contain; }
/* qz-31c: the picture lies between the header and the mixer, so the whole figure (feet too) stays visible */
.qz-site .qz-ui-stage .qz-stage, .qz-site .qz-ui-stage .qz-figure { top: calc(8px + var(--qz-ui-top-h, 56px)); bottom: calc(8px + var(--qz-ui-bottom-h, 140px)); height: auto; }
.qz-ui-stage .qz-figure[hidden] { display: none; }
.qz-ui-stage-hint { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: min(calc(100% - 200px), 420px); margin: 0; text-align: center; font-family: var(--qz-display); font-size: 20px; line-height: 1.3; color: #fff; opacity: .55; pointer-events: none; }
.qz-glass { background: rgba(13, 10, 23, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 2px solid rgba(0, 0, 0, .55); border-radius: 16px; }
.qz-ui-layer { position: absolute; z-index: 2; transition: opacity .6s ease; }
.qz-playui.is-focus .qz-ui-layer { opacity: .25; }
.qz-ui-top { top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 8px; }
.qz-ui-setname { font-family: var(--qz-display); font-size: 16px; color: var(--qz-yellow); margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.qz-site .qz-ui-top .qz-btn { flex: 0 0 auto; width: auto; min-width: 0; min-height: 40px; margin: 0; padding: 6px 12px; font-size: 14px; box-shadow: 3px 3px 0 #000; }
.qz-site .qz-ui-top .qz-meter { flex: 1 1 60px; max-width: 120px; margin: 0; }
.qz-site .qz-ui-top .qz-beats { flex: 0 1 auto; margin: 0; }
.qz-site .qz-ui-top .qz-play-status { flex: 1 1 100%; font-size: 12px; min-height: 0; }
.qz-site .qz-ui-top .qz-play-status:empty { display: none; }
/* qz-30: the four sliders as slim pills at the stage's edges (left: filter, resonance; right: feedback, pitch) */
.qz-site .qz-ui-side { left: 8px; right: 8px; top: calc(12px + var(--qz-ui-top-h, 60px)); bottom: calc(12px + var(--qz-ui-bottom-h, 196px)); padding: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
.qz-site .qz-ui-side .qz-card, .qz-site .qz-ui-bottom .qz-card { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.qz-site .qz-ui-controls { height: 100%; display: grid; grid-template-columns: 72px 1fr 72px; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a . c" "b . d"; gap: 8px; }
.qz-ui-controls .qz-card-title { display: none; }
.qz-ui-controls .qz-control:has(.qz-slider--cutoff) { grid-area: a; }
.qz-ui-controls .qz-control:has(.qz-slider--resonance) { grid-area: b; }
.qz-ui-controls .qz-control:has(.qz-slider--feedback) { grid-area: c; }
.qz-ui-controls .qz-control:has(.qz-slider--pitch) { grid-area: d; }
/* qz-31c: each slider is a glowing bow at the edge; the range input lies invisible on top (drag, keys, readers) */
.qz-site .qz-ui-controls .qz-control { position: relative; pointer-events: auto; min-height: 0; padding: 0; margin: 0; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; --arc-c: var(--qz-accent); }
.qz-site .qz-ui-controls .qz-arcctl--resonance { --arc-c: var(--qz-accent-2); }
.qz-site .qz-ui-controls .qz-arcctl--feedback { --arc-c: var(--qz-yellow); }
.qz-site .qz-ui-controls .qz-arcctl--pitch { --arc-c: var(--qz-lime); }
.qz-site .qz-ui-controls .qz-control-label, .qz-site .qz-ui-controls .qz-control-value { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.qz-site .qz-ui-controls .qz-slider { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; min-height: 0; margin: 0; opacity: 0; writing-mode: vertical-lr; direction: rtl; touch-action: none; cursor: ns-resize; }
.qz-arc { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.qz-arc path { fill: none; stroke-linecap: round; stroke-width: 9px; }
.qz-arc-track { stroke: rgba(255, 255, 255, .16); }
.qz-arc-fill { stroke: var(--arc-c); filter: drop-shadow(0 0 6px var(--arc-c)); transition: stroke-dasharray .08s linear; }
.qz-arc-sym { position: absolute; top: 50%; left: 58%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; color: #fff; text-shadow: 0 0 8px var(--arc-c), 0 1px 2px #000; }
.qz-arcctl.is-right .qz-arc-sym { left: 42%; }
.qz-arc-sym b { font-size: 24px; line-height: 1; color: var(--arc-c); }
.qz-arc-sym small { font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.qz-arcctl.is-active .qz-arc path { stroke-width: 13px; }
.qz-arcctl.is-active .qz-arc-sym small { font-size: 13px; color: var(--arc-c); }
.qz-arcctl:focus-within .qz-arc-track { stroke: var(--qz-yellow); }
/* qz-46: arcs of synth controls an instrument does not use fade out (QZ_PlayUI sets is-unused) */
.qz-site .qz-ui-controls .qz-arcctl { transition: opacity .25s ease; }
.qz-site .qz-ui-controls .qz-arcctl.is-unused { opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.qz-ui-bottom { left: 8px; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 8px; }
.qz-site .qz-ui-mixer { padding: 6px 8px; }
.qz-site .qz-ui-mixer.qz-glass { background: rgba(13, 10, 23, .62); border: 2px solid rgba(0, 0, 0, .55); }
.qz-ui-mixer .qz-mixer-targets { margin-bottom: 6px; }
.qz-ui-mixer .qz-mix-targetlabel { min-width: 0; font-size: 12px; }
.qz-ui-mixer .qz-mix-noseqs { display: none; }
.qz-ui-mixer .qz-mixer-tiles { scrollbar-width: thin; scrollbar-color: var(--qz-accent) transparent; }
.qz-ui-mixer .qz-mixer-tiles::-webkit-scrollbar { height: 4px; }
.qz-ui-mixer .qz-mixer-tiles::-webkit-scrollbar-thumb { background: var(--qz-accent); border-radius: 2px; }
/* qz-30: mixer tiles = loop machine (tap on/off, drag up/down = volume, long press = details) */
.qz-site .qz-ui-mixer .qz-mixer-tiles { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity; }
.qz-ui-mixer .qz-mix-tile { position: relative; flex: 0 0 104px; min-height: 64px; padding: 6px 8px; overflow: hidden; scroll-snap-align: start; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-x; background: linear-gradient(to top, rgba(255, 61, 129, .45) calc(var(--qz-lvl, .66) * 100%), rgba(5, 4, 10, .55) calc(var(--qz-lvl, .66) * 100%)); }
.qz-ui-mixer .qz-mix-tile:focus-visible { outline: 3px solid var(--qz-yellow); outline-offset: 2px; }
.qz-ui-mixer .qz-mix-tile.is-dragging { box-shadow: 0 0 0 2px var(--qz-yellow); }
.qz-ui-mixer .qz-mix-tile.is-off { opacity: .5; }
.qz-ui-mixer .qz-mix-name { grid-column: 1 / -1; font-size: 14px; white-space: normal; line-height: 1.1; }
.qz-site .qz-ui-mixer .qz-mix-toggle { grid-column: 1 / -1; justify-self: start; min-width: 0; min-height: 0; padding: 2px 8px; font-size: 11px; box-shadow: none; pointer-events: none; }
.qz-ui-mixer .qz-mix-tile.is-expanded .qz-mix-toggle { pointer-events: auto; }
.qz-ui-mixer .qz-mix-level, .qz-ui-mixer .qz-mix-follow, .qz-ui-mixer .qz-mix-value { display: none; }
.qz-ui-mixer .qz-mix-tile.is-expanded { flex-basis: 210px; cursor: default; background: rgba(5, 4, 10, .85); box-shadow: 0 0 0 2px var(--qz-accent-2); }
.qz-ui-mixer .qz-mix-tile.is-expanded .qz-mix-level, .qz-ui-mixer .qz-mix-tile.is-expanded .qz-mix-value { display: block; }
.qz-ui-mixer .qz-mix-tile.is-expanded .qz-mix-follow { display: flex; }
.qz-ui-mixer .qz-mix-tile--seq:not(.is-off)::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--qz-beat, 0) * 100%); background: var(--qz-lime); }
.qz-mix-add { flex: 0 0 56px; min-height: 64px; border: 2px dashed rgba(255, 255, 255, .4); border-radius: 12px; background: transparent; color: #fff; font-size: 28px; cursor: pointer; }
.qz-mix-add:focus-visible { outline: 3px solid var(--qz-yellow); }
/* qz-31: contrast on bright camera pictures, no blur over a live picture (cost on phones) */
.qz-playui.is-live .qz-glass, .qz-playui.is-live .qz-ui-sheet { -webkit-backdrop-filter: none; backdrop-filter: none; }
.qz-playui.is-live .qz-glass { background-color: rgba(13, 10, 23, .74); }
.qz-playui.is-bright .qz-glass, .qz-playui.is-bright .qz-ui-mixer .qz-mix-tile { background-color: rgba(13, 10, 23, .9); border-color: #000; }
.qz-playui.is-bright .qz-arc-track { stroke: rgba(0, 0, 0, .45); }
/* qz-51c: the slider layer spans the whole stage; the dark glass of the live picture made it a veil over the figure */
.qz-playui.is-live .qz-ui-side.qz-glass, .qz-playui.is-bright .qz-ui-side.qz-glass { background-color: transparent; border-color: transparent; }
.qz-playui.is-bright.is-focus .qz-ui-layer { opacity: .45; }
.qz-ui-setname, .qz-ui-open, .qz-ui-controls .qz-control-label, .qz-ui-controls .qz-control-value { text-shadow: 0 1px 2px rgba(0, 0, 0, .8); }
.qz-ui-targets { padding: 10px; }
/* phone tab bar of the platform (ao-phone-tabs) in the QUEEZE look: dark glass, pink edge, yellow pop for the
   active tab; links keep their colour after a visit (the bar guessed grey ink and visited colours before) */
html.ao-phone, .ao-phone-tabs, .ao-phone-top { --ao-phone-surface: #0d0a17; --ao-phone-ink: #ffffff; --ao-phone-accent: #ffe500; --ao-phone-line: #ff3d81; }
/* qz-34f: like the symbol row of /play - round symbols with a ring in their own colour, small capitals below,
   the active one filled, black edge and pop shadow */
.ao-phone-tabs { gap: 2px; padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(13, 10, 23, .97); border-top: 3px solid #000; box-shadow: 0 -3px 0 #ff3d81, 0 -10px 24px rgba(255, 61, 129, .16); }
.ao-phone-tabs .ao-phone-tab, .ao-phone-tabs .ao-phone-tab:link, .ao-phone-tabs .ao-phone-tab:visited { --c: #ff3d81; height: auto; min-height: 58px; gap: 5px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: rgba(255, 255, 255, .78); text-decoration: none; opacity: 1; font-family: var(--qz-font, system-ui, sans-serif); font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ao-phone-tabs .ao-phone-tab:nth-child(5n+2) { --c: #ffe500; }
.ao-phone-tabs .ao-phone-tab:nth-child(5n+3) { --c: #b6ff3a; }
.ao-phone-tabs .ao-phone-tab:nth-child(5n+4) { --c: #31d0ff; }
.ao-phone-tabs .ao-phone-tab:nth-child(5n+5) { --c: #a070ff; }
.ao-phone-tabs .ao-phone-tab .ao-phone-icon { width: 40px; height: 40px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--c); display: grid; place-items: center; font-size: 21px; color: #fff; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.ao-phone-tabs .ao-phone-tab-label { text-shadow: 0 1px 2px #000; white-space: nowrap; }
@media (max-width: 374px) { .ao-phone-tabs .ao-phone-tab, .ao-phone-tabs .ao-phone-tab:link, .ao-phone-tabs .ao-phone-tab:visited { font-size: 8.5px; letter-spacing: .03em; } .ao-phone-tabs .ao-phone-tab .ao-phone-icon { width: 36px; height: 36px; font-size: 19px; } }
.ao-phone-tabs .ao-phone-tab:hover .ao-phone-icon { transform: translateY(-1px); }
.ao-phone-tabs .ao-phone-tab:active .ao-phone-icon { transform: scale(.94); }
.ao-phone-tabs .ao-phone-tab.is-active, .ao-phone-tabs .ao-phone-tab.is-active:visited { background: none; box-shadow: none; transform: none; color: #fff; }
.ao-phone-tabs .ao-phone-tab.is-active .ao-phone-icon { background: var(--c); color: #0d0a17; border: 2.5px solid #000; box-shadow: 3px 3px 0 #000; transform: translateY(-2px); }
.ao-phone-tabs .ao-phone-tab.is-active .ao-phone-tab-label { color: var(--c); }
.ao-phone-tabs .ao-phone-tab:focus-visible { outline: none; }
.ao-phone-tabs .ao-phone-tab:focus-visible .ao-phone-icon { outline: 3px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .ao-phone-tabs .ao-phone-tab .ao-phone-icon { transition: none; } .ao-phone-tabs .ao-phone-tab.is-active .ao-phone-icon { transform: none; } }
/* qz-31c: lean phone view: only start, camera and recording up top; one row of tiles; the stage gets the rest */
@media (max-width: 719px) {
  .qz-site .qz-ui-top .qz-ui-setname, .qz-site .qz-ui-top .qz-meter, .qz-site .qz-ui-top .qz-beats { display: none; }
  .qz-ui-top { justify-content: center; flex-wrap: nowrap; gap: 6px; padding: 4px 6px; }
  .qz-site .qz-ui-top .qz-btn { min-height: 38px; padding: 4px 9px; font-size: 12px; white-space: nowrap; }
  .qz-site .qz-ui-top .qz-play-status:not(.is-error) { display: none; }
  .qz-site .qz-ui-top .qz-play-status.is-error { position: absolute; left: 6px; right: 6px; top: 100%; margin-top: 4px; padding: 4px 8px; border-radius: 8px; background: rgba(13, 10, 23, .9); }
  .qz-site .qz-ui-controls { grid-template-columns: 60px 1fr 60px; }
  .qz-ui-bottom { gap: 4px; }
  .qz-site .qz-ui-mixer { padding: 4px 6px; }
  .qz-ui-mixer .qz-mix-tile { flex-basis: 84px; min-height: 48px; padding: 4px 6px; }
  .qz-ui-mixer .qz-mix-name { font-size: 12px; }
  .qz-mix-add { flex-basis: 44px; min-height: 48px; font-size: 22px; }
  .qz-ui-open { min-height: 44px; font-size: 11px; }
  .qz-ui-open::before { font-size: 18px; }
}
.qz-ui-stage-hint { color: #fff; opacity: .7; }
@media (prefers-reduced-transparency: reduce) {
  .qz-glass, .qz-ui-controls .qz-control, .qz-ui-sheet { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(13, 10, 23, .95) !important; }
}
@media (forced-colors: active) {
  .qz-glass, .qz-ui-controls .qz-control, .qz-mix-tile, .qz-ui-sheet { border: 1px solid CanvasText; }
  .qz-ui-open.is-active { outline: 2px solid Highlight; }
}
.qz-ui-dock { display: flex; justify-content: space-around; gap: 4px; padding: 4px; }
.qz-ui-open { flex: 1 1 0; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 0; border-radius: 12px; background: transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.qz-ui-open::before { font-size: 20px; line-height: 1; }
.qz-ui-open--sound::before { content: '\1F3B5'; }
.qz-ui-open--camera::before { content: '\1F4F7'; }
.qz-ui-open--mic::before { content: '\1F3A4'; }
.qz-ui-open--band::before { content: '\1F465'; }
.qz-ui-open--more::before { content: '\22EF'; }
.qz-ui-open.is-active { background: var(--qz-accent); color: #000; }
.qz-ui-open:focus-visible, .qz-ui-close:focus-visible { outline: 3px solid var(--qz-yellow); outline-offset: 2px; }
.qz-ui-sheet { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; max-height: 78%; overflow-y: auto; overscroll-behavior: contain; padding: 0 10px 12px; background: rgba(13, 10, 23, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 3px solid var(--qz-accent); border-radius: 18px 18px 0 0; transform: translateY(105%); visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
.qz-ui-sheet.is-open { transform: translateY(0); visibility: visible; transition: transform .28s ease, visibility 0s; }
.qz-ui-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0 8px; background: inherit; }
.qz-site .qz-ui-close { flex: 0 0 auto; width: 44px; min-width: 44px; height: 44px; padding: 0; margin: 0; }
.qz-ui-sheet-title { margin: 0; font-family: var(--qz-display); font-size: 22px; }
.qz-ui-sheet .qz-card { margin: 0 0 10px; }
.qz-ui-more-links { gap: 8px; }
@media (min-width: 720px) {
  .qz-site .qz-ui-controls { grid-template-columns: 84px 1fr 84px; }
  .qz-playui.has-sheet .qz-ui-side { right: calc(24px + min(440px, 46%)); }
  .qz-ui-bottom { left: 8px; right: 8px; }
  .qz-ui-sheet { left: auto; right: 8px; top: calc(16px + var(--qz-ui-top-h, 60px)); bottom: calc(16px + var(--qz-ui-bottom-h, 196px)); width: min(440px, 46%); max-height: none; border-radius: 18px; border: 3px solid var(--qz-accent); transform: translateX(110%); }
  .qz-ui-sheet.is-open { transform: translateX(0); }
}

@media (min-width: 720px) {
  .qz-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qz-site .qz-screen { max-width: 640px; }
}
/* qz-39: what happens with the data on the device (QZ_Own) – a sticker card above everything */
html.qz-own-open, html.qz-own-open body { overflow: hidden; }
.qz-own-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(5, 4, 10, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.qz-own { width: min(100%, 440px); max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: 22px 20px 18px; color: #fff; font-family: var(--qz-font, system-ui, sans-serif); background: var(--qz-surface-2, #1c1530); border: var(--qz-edge, 3px solid #000); border-radius: 22px; box-shadow: 8px 8px 0 var(--qz-accent, #ff2e88), 8px 8px 0 3px #000; }
.qz-own-title { margin: 0 0 8px; font-family: var(--qz-display, Impact, sans-serif); font-weight: 400; font-size: 30px; line-height: 1.05; color: var(--qz-yellow, #ffe500); text-shadow: 3px 3px 0 #000; transform: rotate(-1.5deg); transform-origin: left; }
.qz-own-lead { margin: 0 0 12px; font-size: 16px; line-height: 1.4; }
.qz-own-list { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.qz-own-list li { padding: 6px 12px; border-radius: 999px; background: var(--qz-accent-2, #31d0ff); color: var(--qz-ink, #0d0a17); border: 2px solid #000; font-weight: 800; font-size: 13px; box-shadow: 2px 2px 0 #000; }
.qz-own-list li:nth-child(3n+2) { background: var(--qz-lime, #b6ff3c); }
.qz-own-list li:nth-child(3n) { background: var(--qz-yellow, #ffe500); }
.qz-own-group { margin: 0 0 14px; }
.qz-own-ask { margin: 0 0 8px; font-weight: 800; font-size: 14px; }
.qz-own-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.qz-site .qz-own-choices .qz-btn { flex: 1 1 140px; min-height: 44px; }
.qz-own-note { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; border: 2px solid #ff3b3b; background: rgba(255, 59, 59, .14); font-size: 14px; font-weight: 700; }
.qz-own-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.qz-site .qz-own-actions .qz-btn { width: 100%; min-height: 50px; font-size: 16px; }
.qz-own-hint { margin: 12px 0 0; font-size: 13px; line-height: 1.4; color: var(--qz-muted, #cfc6ea); }
.qz-own-status { margin: 10px 0 0; min-height: 1em; font-size: 14px; font-weight: 700; }
.qz-own-status:empty { display: none; }
.qz-own-status.is-error { color: #ff8a8a; }
@media (prefers-reduced-motion: reduce) { .qz-own-title { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .qz-ticker-track, .qz-site .qz-pulse-dot { animation: none; }
  .qz-menu, .qz-menu-backdrop { transition: none; }
  .qz-mix-tile.is-pending { animation: none; box-shadow: 0 0 0 2px var(--qz-lime); }
  .qz-ui-sheet, .qz-ui-sheet.is-open, .qz-ui-layer { transition: none; }
}