/* QUEEZE patch designer (sy-4): knobs with a value ring, a modulation ring and a live dot; source chips; keys. */
.qz-site .qz-screen.qz-syn { max-width: 1120px; }
.qz-site .qz-syn > .qz-title, .qz-site .qz-syn > .qz-lead, .qz-site .qz-syn > .qz-back { max-width: 560px; }
.qz-site .qz-syn-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.qz-site .qz-syn-name { flex: 1 1 220px; }
.qz-site .qz-syn-saved, .qz-site .qz-syn-account, .qz-site .qz-syn-engine { color: var(--qz-muted); font-size: 13px; }
.qz-site .qz-syn-library { flex: 1 1 220px; }
.qz-site .qz-syn-start { width: 100%; }

.qz-site .qz-syn-sources { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qz-site .qz-syn-source { position: relative; display: inline-flex; flex-direction: column; gap: 4px; min-width: 84px; padding: 8px 12px 10px; font: inherit; font-weight: 800; font-size: 13px; color: var(--qz-ink); background: var(--qz-lime); border: var(--qz-edge); border-radius: 999px; box-shadow: 3px 3px 0 #000; cursor: grab; touch-action: none; user-select: none; }
.qz-site .qz-syn-source.is-armed { background: var(--qz-yellow); transform: rotate(-2deg) scale(1.05); box-shadow: 4px 4px 0 var(--qz-accent), 4px 4px 0 3px #000; }
.qz-site .qz-syn-source:focus-visible { outline: 3px solid var(--qz-yellow); outline-offset: 3px; }
.qz-site .qz-syn-meter-track { display: block; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, 0.25); overflow: hidden; }
.qz-site .qz-syn-meter { display: block; height: 100%; width: 100%; background: #000; transform-origin: left center; transform: scaleX(0); transition: transform 0.06s linear; }
.qz-site .qz-syn-hands { display: flex; flex-wrap: wrap; gap: 10px 16px; width: 100%; margin-top: 6px; }
.qz-site .qz-syn-hand { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--qz-muted); min-width: 120px; flex: 1 1 120px; }
.qz-site .qz-syn-range { width: 100%; accent-color: var(--qz-accent); }
.qz-syn-ghost { position: fixed; z-index: 1000; pointer-events: none; transform: translate(-50%, -130%) rotate(-4deg); padding: 6px 12px; font-family: var(--qz-font, sans-serif); font-weight: 800; font-size: 13px; color: #0d0a17; background: #ffe500; border: 3px solid #000; border-radius: 999px; box-shadow: 3px 3px 0 #000; }

.qz-site .qz-syn-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.qz-site .qz-syn-panel { background: var(--qz-surface-2); border: 3px solid #000; border-radius: 16px; padding: 10px 12px 14px; box-shadow: 5px 5px 0 var(--c, #000); }
.qz-site .qz-syn-panel-title { font-family: var(--qz-display); font-weight: 400; font-size: 18px; letter-spacing: 0.02em; color: var(--qz-yellow); margin: 0 0 8px; cursor: default; }
/* panel names as tilted stickers in the panel's colour (qz-36) */
.qz-site .qz-syn-panel > .qz-syn-panel-title { display: inline-block; padding: 3px 10px 2px; font-size: 16px; color: #0d0a17; background: var(--c, var(--qz-yellow)); border: 2px solid #000; border-radius: 8px; box-shadow: 2px 2px 0 #000; transform: rotate(-1.5deg); margin: 0 0 12px; }
.qz-site details.qz-syn-panel > summary { cursor: pointer; margin: 0; list-style: none; }
.qz-site details.qz-syn-panel > summary::-webkit-details-marker { display: none; }
.qz-site details.qz-syn-panel > summary::after { content: ' ▾'; }
.qz-site details.qz-syn-panel:not([open]) > summary::after { content: ' ▸'; }
.qz-site details.qz-syn-panel[open] > summary { margin-bottom: 12px; }
.qz-site .qz-syn-controls { display: flex; flex-wrap: wrap; gap: 12px 6px; align-items: flex-start; }
.qz-site .qz-syn-panel--fx .qz-syn-controls { justify-content: space-around; }
.qz-site .qz-syn-panel--waves .qz-syn-choice { flex: 1 1 calc(50% - 6px); }
/* easy mode: three columns on wide screens, the envelope (five knobs) takes two of them */
.qz-site .qz-syn-panels:has(.qz-syn-panel--easy) { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.qz-site .qz-syn-panel--easy .qz-syn-knob { width: 68px; }
@media (min-width: 1000px) { .qz-site .qz-syn-panel--shape { grid-column: span 2; } }
.qz-site .qz-syn-fxpair { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qz-site .qz-syn-fxpair .qz-syn-toggle { align-self: center; min-width: 88px; }
.qz-site .qz-syn-panel .qz-syn-toggle.is-active { background: var(--c, var(--qz-yellow)); color: #0d0a17; }

/* knobs (qz-36): a coloured cap with a black edge, hard shadow and a notch inside a glowing value ring */
.qz-site .qz-syn-knob { display: flex; flex-direction: column; align-items: center; width: 74px; gap: 3px; }
.qz-site .qz-syn-dial { width: 60px; height: 60px; border-radius: 50%; cursor: ns-resize; touch-action: none; }
.qz-site .qz-syn-dial:focus-visible { outline: 3px solid var(--qz-yellow); outline-offset: 2px; }
.qz-site .qz-syn-dial svg { width: 60px; height: 60px; display: block; overflow: visible; }
.qz-site .qz-syn-track, .qz-site .qz-syn-value, .qz-site .qz-syn-mod { fill: none; stroke-linecap: round; }
.qz-site .qz-syn-track { stroke: #0d0a17; stroke-width: 8; stroke-dasharray: 103.67 200; }
.qz-site .qz-syn-mod { stroke: var(--qz-lime); stroke-width: 11; opacity: 0.45; }
.qz-site .qz-syn-knob:not(.is-modulated) .qz-syn-mod { display: none; }
.qz-site .qz-syn-value { stroke: var(--c, var(--qz-accent-2)); stroke-width: 5; filter: drop-shadow(0 0 3px var(--c, #31d0ff)); }
.qz-site .qz-syn-capshadow { fill: #000; }
.qz-site .qz-syn-cap { fill: var(--c, var(--qz-accent-2)); stroke: #000; stroke-width: 2.5; transition: fill .12s; }
.qz-site .qz-syn-capshine { fill: rgba(255, 255, 255, 0.4); }
.qz-site .qz-syn-notch { stroke: #0d0a17; stroke-width: 4; stroke-linecap: round; }
.qz-site .qz-syn-dial:hover .qz-syn-cap, .qz-site .qz-syn-dial:focus-visible .qz-syn-cap { fill: color-mix(in srgb, var(--c, #31d0ff) 75%, #fff); }
.qz-site .qz-syn-dial:active .qz-syn-cap { fill: #fff; }
@media (prefers-reduced-motion: reduce) { .qz-site .qz-syn-cap { transition: none; } }
.qz-site .qz-syn-live { fill: var(--qz-yellow); stroke: #000; stroke-width: 1.5; display: none; }
.qz-site .qz-syn-knob.is-modulated .qz-syn-value { stroke: #fff; }
.qz-site .qz-syn-knob-label { font-size: 12px; line-height: 1.2; text-align: center; color: #fff; }
.qz-site .qz-syn-knob-value { font-size: 11px; color: var(--qz-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qz-site .qz-syn.is-dragging .qz-syn-knob.is-target .qz-syn-dial,
.qz-site .qz-syn.is-arming .qz-syn-knob.is-target .qz-syn-dial { box-shadow: 0 0 0 3px var(--qz-lime); cursor: crosshair; }
.qz-site .qz-syn .qz-syn-knob.is-drop .qz-syn-dial { box-shadow: 0 0 0 5px var(--qz-yellow); }
.qz-site .qz-syn-knob.is-armed-route .qz-syn-knob-label { color: var(--qz-yellow); }
.qz-site .qz-syn-choice { display: flex; flex-direction: column; gap: 2px; min-width: 120px; flex: 1 1 120px; }
.qz-site .qz-syn-select { min-height: 40px; font-size: 14px; }
.qz-site .qz-syn-toggle { align-self: center; }

.qz-site .qz-syn-routes { display: flex; flex-direction: column; gap: 8px; }
.qz-site .qz-syn-route { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(100px, 1fr) 52px auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 12px; background: var(--qz-surface-2); }
.qz-site .qz-syn-route.is-armed { box-shadow: inset 0 0 0 2px var(--qz-yellow); }
.qz-site .qz-syn-route-name { font-size: 13px; overflow-wrap: anywhere; }
.qz-site .qz-syn-route-amount { font-size: 12px; color: var(--qz-muted); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) {
  .qz-site .qz-syn-route { grid-template-columns: 1fr 52px auto auto; }
  .qz-site .qz-syn-route-name { grid-column: 1 / -1; }
}

.qz-site .qz-syn-keybar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* keyboard | own sequences (qz-35) */
.qz-site .qz-syn-view { display: inline-flex; width: max-content; max-width: 100%; justify-self: start; align-self: flex-start; margin: 2px 0 12px; border: 2px solid #000; border-radius: 999px; overflow: hidden; background: #1a1430; box-shadow: 3px 3px 0 #000; }
.qz-site .qz-syn-viewbtn { min-height: 40px; padding: 0 16px; border: 0; background: transparent; color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.qz-site .qz-syn-viewbtn + .qz-syn-viewbtn { border-left: 2px solid #000; }
.qz-site .qz-syn-viewbtn.is-on { background: var(--qz-yellow, #ffe500); color: #0d0a17; }
.qz-site .qz-syn-viewbtn:focus-visible { outline: 3px solid var(--qz-yellow, #ffe500); outline-offset: -5px; }
.qz-site .qz-syn-seqs { display: none; position: relative; margin-top: 10px; }
.qz-site .qz-syn-keycard.is-seqs .qz-syn-seqs { display: block; }
.qz-site .qz-syn-keycard.is-seqs .qz-syn-keys, .qz-site .qz-syn-keycard.is-seqs .qz-syn-keys-hint,
.qz-site .qz-syn-keycard.is-seqs .qz-syn-down, .qz-site .qz-syn-keycard.is-seqs .qz-syn-up, .qz-site .qz-syn-keycard.is-seqs .qz-syn-octave { display: none; }
/* picking a sequence by its picture (qz-36); on phones the list is a dropdown, 2 across, 2.5 rows high */
.qz-site .qz-syn-seqhead { display: flex; gap: 12px; align-items: stretch; }
.qz-site .qz-syn-seqtrigger { position: relative; flex: 1 1 auto; min-width: 0; max-width: 340px; cursor: default; }
.qz-site .qz-syn-seqtrigger:hover { transform: none; box-shadow: 4px 4px 0 var(--qz-accent), 4px 4px 0 3px #000; }
.qz-site .qz-syn-seqcaret { display: none; }
.qz-site .qz-syn-seqplay { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 96px; width: auto; padding: 8px 12px; color: #0d0a17; background: var(--qz-lime, #b6ff3a); border: 3px solid #000; border-radius: 14px; box-shadow: 4px 4px 0 #000; font-weight: 800; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; }
.qz-site .qz-syn-seqplay-icon { font-size: 24px; line-height: 1; }
.qz-site .qz-syn-seqplay.is-on { color: #fff; background: var(--qz-accent, #ff3d81); }
.qz-site .qz-syn-seqplay:focus-visible { outline: 3px solid var(--qz-yellow, #ffe500); outline-offset: 2px; }
.qz-site .qz-syn-seqgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.qz-site .qz-syn-seqopt { min-width: 0; }
.qz-site .qz-syn-seqopt.is-playing .qz-seq-item-name::before { content: '▶ '; }
.qz-site .qz-syn-seqtools { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 16px; }
.qz-site .qz-syn-pitch, .qz-site .qz-syn-tempo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qz-site .qz-syn-tool-label { font-size: 12px; font-weight: 800; color: var(--qz-muted); text-transform: uppercase; letter-spacing: .06em; }
.qz-site .qz-syn-tool-unit { font-size: 12px; color: var(--qz-muted); }
.qz-site .qz-syn-trsteps { display: inline-flex; align-items: center; gap: 6px; }
.qz-site .qz-syn-trsteps .qz-btn { flex: 0 0 auto; width: auto; min-width: 44px; }
.qz-site .qz-syn-trvalue { min-width: 56px; height: 44px; padding: 0 8px; color: #fff; background: #0d0a17; border: 2px solid #000; border-radius: 12px; font-family: var(--qz-display); font-size: 20px; font-variant-numeric: tabular-nums; cursor: pointer; }
.qz-site .qz-syn-trvalue.is-moved { color: #0d0a17; background: var(--qz-yellow, #ffe500); box-shadow: 2px 2px 0 #000; }
.qz-site .qz-syn-trvalue:focus-visible { outline: 3px solid var(--qz-yellow, #ffe500); outline-offset: 2px; }
.qz-site .qz-syn-bpm { width: 84px; min-height: 44px; padding: 0 10px; border: 2px solid #000; border-radius: 12px; background: #fff; color: #0d0a17; font-weight: 800; font-size: 16px; }
@media (max-width: 600px) {
  .qz-site .qz-syn-seqtrigger { max-width: none; padding-right: 44px; cursor: pointer; }
  .qz-site .qz-syn-seqcaret { display: grid; place-items: center; position: absolute; right: 10px; top: 50%; width: 26px; height: 26px; border-radius: 50%; font-size: 15px; color: var(--qz-yellow, #ffe500); background: #0d0a17; transform: translateY(-50%); transition: transform .15s; }
  .qz-site .qz-syn-seqtrigger[aria-expanded="true"] .qz-syn-seqcaret { transform: translateY(-50%) rotate(180deg); }
  .qz-site .qz-syn-seqgrid { display: none; position: absolute; left: 0; right: 0; z-index: 20; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; padding: 8px; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y proximity; background: #1a1430; border: 3px solid #000; border-radius: 16px; box-shadow: 5px 5px 0 #000; }
  .qz-site .qz-syn-seqgrid.is-open { display: grid; }
  .qz-site .qz-syn-seqgrid .qz-seq-item { height: 96px; box-sizing: border-box; overflow: hidden; box-shadow: 3px 3px 0 #000; scroll-snap-align: start; }
  .qz-site .qz-syn-seqplay { min-width: 76px; }
  .qz-site .qz-syn-seqtools { gap: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) { .qz-site .qz-syn-seqcaret { transition: none; } }

/* own sounds in play and sequencer (sy-5b) */
.qz-site .qz-sound-link { display: inline-block; margin: 8px 0 4px; color: var(--qz-yellow); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.qz-site .qz-instruments-own { align-self: center; font-size: 13px; color: var(--qz-muted); margin: 0 4px 0 8px; }
.qz-site .qz-instrument--own { border-style: dashed; }

/* wavetable editor (sy-5) */
.qz-site .qz-wave { display: flex; flex-direction: column; gap: 10px; }
.qz-site .qz-wave-head, .qz-site .qz-wave-start, .qz-site .qz-wave-importrow, .qz-site .qz-wave-textrow, .qz-site .qz-wave-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qz-site .qz-wave .qz-btn-small { width: auto; }
.qz-site .qz-wave-osc.is-active { background: var(--qz-yellow); color: #0d0a17; }
.qz-site .qz-wave-label { font-size: 13px; color: var(--qz-muted); margin-right: 4px; }
.qz-site .qz-wave-file { position: relative; overflow: hidden; cursor: pointer; }
.qz-site .qz-wave-file:focus-within { outline: 3px solid var(--qz-yellow); outline-offset: 2px; }
.qz-site .qz-wave-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.qz-site .qz-wave-count, .qz-site .qz-wave-morphcount, .qz-site .qz-wave-mode, .qz-site .qz-wave-lang, .qz-site .qz-wave-textcount { width: auto; min-height: 40px; }
.qz-site .qz-wave-text { flex: 1 1 220px; min-height: 40px; }
.qz-site .qz-wave-mic.is-active { background: var(--qz-accent); color: #fff; }
.qz-site .qz-wave-speak { background: var(--qz-yellow); color: #0d0a17; }
.qz-site .qz-wave-preset { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--qz-muted); cursor: pointer; }
.qz-site .qz-wave-presetbox { width: 20px; height: 20px; accent-color: var(--qz-accent); }
.qz-site .qz-wave-canvas { display: block; width: 100%; height: 220px; background: #0d0a17; border: var(--qz-edge); border-radius: 14px; box-shadow: 4px 4px 0 #000; cursor: crosshair; touch-action: none; }
.qz-site .qz-wave-bars { display: block; width: 100%; height: 110px; background: #0d0a17; border: var(--qz-edge); border-radius: 12px; cursor: ns-resize; touch-action: none; }
.qz-site .qz-wave-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 8px; }
.qz-site .qz-wave-thumb { flex: 0 0 auto; width: 56px; height: 40px; padding: 3px; background: var(--qz-surface-2); border: 2px solid #000; border-radius: 8px; cursor: pointer; }
.qz-site .qz-wave-thumb.is-active { background: var(--qz-lime); box-shadow: 2px 2px 0 #000; }
.qz-site .qz-wave-thumb:focus-visible { outline: 3px solid var(--qz-yellow); outline-offset: 2px; }
.qz-site .qz-wave-thumb-canvas { display: block; width: 100%; height: 100%; pointer-events: none; }
@media (max-width: 520px) { .qz-site .qz-wave-canvas { height: 170px; } }
.qz-site .qz-syn-keybar .qz-btn { flex: 0 0 auto; width: auto; min-width: 44px; }
.qz-site .qz-syn-octave { font-family: var(--qz-display); font-size: 20px; min-width: 40px; text-align: center; }
.qz-site .qz-syn-keys { position: relative; display: flex; height: 120px; margin-top: 10px; overflow-x: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.qz-site .qz-syn-key { flex: 0 0 auto; width: 40px; height: 100%; margin: 0; padding: 0; background: #fff; border: 2px solid #000; border-radius: 0 0 8px 8px; cursor: pointer; }
.qz-site .qz-syn-key.is-black { width: 28px; height: 62%; margin: 0 -14px; z-index: 1; background: #0d0a17; border-color: #000; }
.qz-site .qz-syn-key.is-down { background: var(--qz-accent-2); }
.qz-site .qz-syn-key.is-black.is-down { background: var(--qz-accent); }
@media (max-width: 520px) { .qz-site .qz-syn-key { width: 32px; } .qz-site .qz-syn-key.is-black { width: 22px; margin: 0 -11px; } }