/* QUEEZE play screen "Orbit" (qz-33): full screen, symbol row, fan lanes. Script QZ_Orbit builds the nodes. */
html.qz-orbit-page, html.qz-orbit-page body { overflow: hidden; overscroll-behavior: none; }
html.qz-orbit-page .qz-top, html.qz-orbit-page .ao-phone-tabs, html.qz-orbit-page .ao-phone-top { display: none !important; }
html.qz-orbit-page body { padding-bottom: 0 !important; }
.qz-site .qz-screen.qz-playui.qz-orbit-on { height: var(--qz-ui-h, 100dvh); }
.qz-orbit-on .qz-ui-top, .qz-orbit-on .qz-ui-bottom { display: none !important; }
.qz-site .qz-orbit-on .qz-ui-stage .qz-stage, .qz-site .qz-orbit-on .qz-ui-stage .qz-figure { top: calc(var(--qz-orb-top, 64px) + 6px); bottom: var(--qz-orb-bottom, 300px); }
.qz-site .qz-orbit-on .qz-ui-side { top: calc(var(--qz-orb-top, 64px) + 10px); bottom: calc(var(--qz-orb-bottom, 300px) - 10px); left: 4px; right: 4px; }
.qz-orbit-on .qz-ui-stage-hint { top: auto; bottom: calc(var(--qz-orb-rowh, 96px) + 18px); transform: translateX(-50%); width: calc(100% - 40px); font-size: 15px; opacity: .8; }
.qz-orbit-on .qz-ui-sheet { z-index: 6; }
/* qz-39a: the floor of the stage runs on to the bottom edge (QZ_Avatar lets the canvases grow below the figure
   box); a dark shade rises from the bottom under the symbol row, every open lane deepens it under itself */
.qz-site .qz-orbit-on .qz-ui-stage .qz-figure { overflow: visible; background: none; }
.qz-orbit-on .qz-ui-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--qz-orb-rowh, 96px) + 110px); background: linear-gradient(to top, rgba(5, 4, 10, .92) 0, rgba(5, 4, 10, .7) 38%, rgba(5, 4, 10, .3) 70%, rgba(5, 4, 10, 0) 100%); pointer-events: none; }
.qz-orb-side.qz-orbit-on .qz-ui-stage::after { height: 120px; }
.qz-orb-lane:not(.is-right):not(.is-left) { background: linear-gradient(to top, rgba(5, 4, 10, .55), rgba(5, 4, 10, .35) 80%, rgba(5, 4, 10, .12)); border-radius: 28px; box-shadow: 0 6px 34px 18px rgba(5, 4, 10, .38); }
.qz-orb-lane.is-down { background: linear-gradient(to bottom, rgba(5, 4, 10, .55), rgba(5, 4, 10, .12)); }
.qz-orb-lane.is-right, .qz-orb-lane.is-left { background: rgba(5, 4, 10, .42); border-radius: 30px; box-shadow: 0 0 30px 16px rgba(5, 4, 10, .34); }
/* qz-34 steering ball: lies on the figure while the camera is off */
.qz-ball { position: absolute; z-index: 3; width: 64px; height: 64px; margin: -32px 0 0 -32px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.qz-ball[hidden] { display: none; }
.qz-ball::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(0,229,255,.28) 45%, rgba(138,77,255,.18) 75%, rgba(138,77,255,0)); box-shadow: 0 0 24px rgba(0,229,255,.45), inset 0 0 0 2px rgba(255,255,255,.45); animation: qz-ball-pulse 1.6s ease-in-out infinite; }
.qz-ball-core { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 0 10px #00e5ff; }
.qz-ball.is-held { cursor: grabbing; }
.qz-ball.is-held::before { animation: none; transform: scale(1.18); box-shadow: 0 0 34px rgba(0,229,255,.7), inset 0 0 0 2px #fff; }
/* qz-34c foot balls: smaller, warm colours (right = drums, orange; left = sequences, lime), number = choice */
.qz-ball--foot { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
.qz-ball--fr::before { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(255,145,40,.32) 45%, rgba(255,90,40,0)); box-shadow: 0 0 22px rgba(255,145,40,.5), inset 0 0 0 2px rgba(255,255,255,.4); }
.qz-ball--fl::before { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(170,255,60,.3) 45%, rgba(120,220,40,0)); box-shadow: 0 0 22px rgba(170,255,60,.45), inset 0 0 0 2px rgba(255,255,255,.4); }
.qz-ball--foot .qz-ball-core { width: 22px; height: 22px; margin: -11px 0 0 -11px; background: rgba(255,255,255,.6); box-shadow: 0 0 8px rgba(255,255,255,.6); }
.qz-ball--fr .qz-ball-core { box-shadow: 0 0 10px #ff9128; }
.qz-ball--fl .qz-ball-core { box-shadow: 0 0 10px #aaff3c; }
.qz-ball-num { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font: 700 13px/1 system-ui, sans-serif; color: #1a1030; text-align: center; pointer-events: none; }
.qz-ball--foot.is-on .qz-ball-core { background: #fff; }
.qz-ball--fl.is-seq::before { box-shadow: 0 0 30px rgba(170,255,60,.75), inset 0 0 0 3px #aaff3c; }
.qz-ball--fr.is-held::before { box-shadow: 0 0 32px rgba(255,145,40,.75), inset 0 0 0 2px #fff; }
.qz-ball--fl.is-held::before { box-shadow: 0 0 32px rgba(170,255,60,.75), inset 0 0 0 2px #fff; }
.qz-ball:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@keyframes qz-ball-pulse { 0%, 100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .qz-ball::before { animation: none; } }
/* gt-5 guitar without camera: strum area right of the body, chord bar at the top of the stage */
.qz-gstrum { position: absolute; z-index: 2; left: 64%; width: 22%; top: 38%; height: 28%; padding: 0; border: 2px dashed rgba(255,255,255,.22); border-radius: 22px; background: repeating-linear-gradient(-60deg, rgba(255,255,255,.05) 0 10px, rgba(255,255,255,0) 10px 22px); color: rgba(255,255,255,.55); cursor: ns-resize; touch-action: none; -webkit-tap-highlight-color: transparent; }
.qz-gstrum[hidden], .qz-gbar[hidden] { display: none; }
.qz-gstrum-label { position: absolute; left: 0; right: 0; bottom: 8px; font: 800 11px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.qz-gstrum:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.qz-gstrum.is-down { animation: qz-gstrum-down .22s ease-out; }
.qz-gstrum.is-up { animation: qz-gstrum-up .22s ease-out; }
@keyframes qz-gstrum-down { from { background-color: rgba(255,214,0,.28); box-shadow: inset 0 -18px 24px -12px rgba(255,214,0,.6); } to { background-color: transparent; box-shadow: none; } }
@keyframes qz-gstrum-up { from { background-color: rgba(0,229,255,.24); box-shadow: inset 0 18px 24px -12px rgba(0,229,255,.6); } to { background-color: transparent; box-shadow: none; } }
.qz-gbar { position: absolute; z-index: 4; left: 50%; bottom: 104px; transform: translateX(-50%); display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 999px; background: rgba(5,4,10,.55); max-width: calc(100% - 24px); }
.qz-gbar-btn { min-width: 44px; min-height: 44px; padding: 0 10px; border: 2px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(26,16,48,.85); color: #fff; font: 800 15px/1 system-ui, sans-serif; touch-action: none; cursor: pointer; }
.qz-gbar-btn.is-active { background: #ffd600; color: #1a1030; border-color: #fff; }
.qz-gbar-btn.is-held { box-shadow: 0 0 16px rgba(255,214,0,.8); }
.qz-gbar-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.qz-gbar-now { padding: 8px 16px; font: 900 18px/1 system-ui, sans-serif; color: #ffd600; }
@media (prefers-reduced-motion: reduce) { .qz-gstrum.is-down, .qz-gstrum.is-up { animation: none; } }
/* the arcs follow the value at once (a transition restarted on every camera frame made them lag) */
.qz-orbit-on .qz-arc-fill { transition: none; }
.qz-orbit-on.qz-orb-lanes-open .qz-ui-stage-hint { opacity: 0; pointer-events: none; transition: opacity .2s; }

/* slimmer arcs (Tino: "kleiner und chicer") */
.qz-site .qz-orbit-on .qz-ui-controls { grid-template-columns: 58px 1fr 58px; grid-template-areas: "c . a" "d . b"; }
.qz-orbit-on .qz-arc path { stroke-width: 5px; }
.qz-orbit-on .qz-arc-fill { filter: drop-shadow(0 0 3px var(--arc-c)); }
.qz-orbit-on .qz-arcctl.is-active .qz-arc path { stroke-width: 9px; }
.qz-orbit-on .qz-arc-sym b { font-size: 16px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--arc-c); background: rgba(13, 10, 23, .6); text-shadow: none; }
.qz-orbit-on .qz-arc-sym small { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; font-weight: 800; }

/* layer */
.qz-orbit { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-family: var(--qz-font, "QZ Text", system-ui, sans-serif); color: #fff; }
.qz-orbit button, .qz-orbit a { pointer-events: auto; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.qz-orb-ic { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.qz-orbit button:focus-visible, .qz-orbit a:focus-visible { outline: 3px solid var(--qz-yellow, #ffe500); outline-offset: 3px; }
.qz-orb-glass, .qz-orb-btn, .qz-orb-set, .qz-orb-sym, .qz-orb-chip .qz-orb-pic, .qz-orb-chip .qz-orb-cover, .qz-orb-targetbtn, .qz-orb-tchip { background: rgba(13, 10, 23, .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.qz-playui.is-live .qz-orbit * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.qz-playui.is-live .qz-orb-btn, .qz-playui.is-live .qz-orb-set, .qz-playui.is-live .qz-orb-sym, .qz-playui.is-bright .qz-orb-btn, .qz-playui.is-bright .qz-orb-set, .qz-playui.is-bright .qz-orb-sym { background-color: rgba(13, 10, 23, .8); }

/* top bar */
.qz-orb-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 6px; display: grid; grid-template-columns: 42px 42px 1fr 42px 42px; gap: 6px; align-items: center; }
.qz-orb-btn { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .2); display: grid; place-items: center; padding: 0; margin: 0; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.qz-site a.qz-orb-btn, .qz-site a.qz-orb-btn:visited { color: #fff; }
.qz-orb-badge { position: absolute; right: -4px; top: -4px; min-width: 17px; height: 17px; padding: 0 4px; box-sizing: border-box; border-radius: 9px; border: 1.5px solid #000; background: var(--qz-orange, #ff7a1a); color: #0d0a17; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.qz-orb-badge[hidden] { display: none; }
.qz-orb-set { justify-self: center; height: 36px; max-width: 100%; padding: 0 14px; border-radius: 18px; border: 1.5px solid rgba(255, 255, 255, .2); display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
.qz-orb-setname { font-family: var(--qz-display, Impact, sans-serif); font-weight: 400; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qz-orb-set[aria-expanded="true"] { border-color: #00e5ff; }
.qz-orb-beats { display: flex; gap: 3px; flex: 0 0 auto; }
.qz-orb-beats i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.qz-orb-beats i.is-on { background: var(--qz-yellow, #ffe500); }
.qz-orb-bpm { font-size: 12px; font-weight: 800; color: #cfc6ea; flex: 0 0 auto; }
.qz-orb-rec { border-color: rgba(255, 59, 59, .85); }
.qz-orb-recdot { width: 16px; height: 16px; border-radius: 50%; background: #ff3b3b; transition: border-radius .15s; }
.qz-orb-rec.is-on { background: #ff3b3b; border-color: #000; animation: qz-orb-rec 1s ease-in-out infinite; }
.qz-orb-rec.is-on .qz-orb-recdot { background: #fff; border-radius: 3px; width: 13px; height: 13px; }
@keyframes qz-orb-rec { 50% { box-shadow: 0 0 0 6px rgba(255, 59, 59, .3); } }
.qz-orb-topslot { grid-column: 5; grid-row: 2; justify-self: center; display: contents; }
.qz-orb-narrow .qz-orb-topslot { display: block; margin-top: 6px; }
.qz-orb-topslot .qz-orb-cell { position: relative; }

/* arcs target: Set | Loops | Beide */
.qz-orb-target { position: absolute; left: 50%; top: calc(var(--qz-orb-top, 64px) + 2px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.qz-orb-targetbtn { height: 28px; padding: 0 12px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, .25); display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.qz-orb-targetbtn svg { width: 22px; height: 12px; fill: none; stroke-width: 2.4; stroke-linecap: round; }
.qz-orb-targetbtn[aria-expanded="true"] { border-color: #fff; }
.qz-orb-targetchips, .qz-orb-strip { display: flex; gap: 6px; }
.qz-orb-targetchips[hidden], .qz-orb-strip[hidden], .qz-orb-toast[hidden] { display: none; }
.qz-orb-tchip { min-width: 44px; height: 32px; padding: 0 10px; border-radius: 16px; border: 1.5px solid rgba(255, 255, 255, .3); font-size: 11px; font-weight: 800; cursor: pointer; }
.qz-orb-tchip.is-on { background: #fff; color: #0d0a17; border: 2px solid #000; }
.qz-orb-strip { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--qz-orb-rowh, 96px) + 10px); max-width: calc(100% - 24px); overflow-x: auto; padding: 2px; }
.qz-orb-toast { position: absolute; left: 12px; right: 12px; top: calc(var(--qz-orb-top, 64px) + 40px); padding: 8px 12px; border-radius: 12px; background: rgba(13, 10, 23, .92); border: 2px solid #ff3b3b; font-size: 13px; font-weight: 700; text-align: center; }

/* symbol row */
.qz-orb-row { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: center; align-items: flex-start; gap: clamp(2px, 1.2vw, 14px); }
.qz-orb-cell { --c: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 44px; flex: 0 0 auto; }
.qz-orb-name { font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 1px 2px #000; pointer-events: none; }
.qz-orb-sym { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--c); display: grid; place-items: center; padding: 0; margin: 0; cursor: pointer; touch-action: none; box-sizing: border-box; transition: transform .12s; }
.qz-orb-sym.is-open { background: var(--c); color: #0d0a17; border: 2.5px solid #000; box-shadow: 2px 2px 0 #000; }
.qz-orb-sym--drums.is-open, .qz-orb-sym--look.is-open { color: #fff; }
.qz-orb-sym.is-muted:not(.is-open) { opacity: .65; }
.qz-orb-sym.is-dragging { transform: scale(1.12); }
.qz-orb-ring { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; transform: translate(-50%, -50%) rotate(-90deg); pointer-events: none; }
.qz-orb-ring svg { width: 100%; height: 100%; overflow: visible; }
.qz-orb-ring circle { fill: none; stroke-width: 3; stroke-linecap: round; }
.qz-orb-ring-track { stroke: rgba(255, 255, 255, .12); }
.qz-orb-play { flex: 0 0 auto; width: 60px; height: 60px; margin: -8px 4px 0; border-radius: 50%; border: 3px solid #000; background: var(--qz-yellow, #ffe500); color: #0d0a17; box-shadow: 4px 4px 0 var(--qz-accent, #ff2e88); display: grid; place-items: center; padding: 0; cursor: pointer; }
.qz-orb-play svg { width: 28px; height: 28px; fill: currentColor; }
.qz-orb-play .qz-orb-play-stop { display: none; }
.qz-orb-play.is-running { background: var(--qz-accent, #ff2e88); color: #fff; box-shadow: 4px 4px 0 var(--qz-yellow, #ffe500); }
.qz-orb-play.is-running .qz-orb-play-go { display: none; }
.qz-orb-play.is-running .qz-orb-play-stop { display: block; }
.qz-orb-play:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #000; }

/* lanes: a column of chips straight above the symbol (several can be open) */
.qz-orb-lane { --c: #fff; position: absolute; width: 56px; display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; max-height: calc(var(--qz-orb-zone, 210px) + 30px); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; padding: 2px 0; animation: qz-orb-fan .18s ease-out; }
.qz-orb-lane::-webkit-scrollbar { display: none; }
/* qz-34g: a lane longer than the room scrolls in whole chips, the top fades to show there is more */
.qz-orb-lane.is-more { scroll-snap-type: y mandatory; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px); mask-image: linear-gradient(to bottom, transparent 0, #000 22px); }
.qz-orb-lane.is-more .qz-orb-chip { scroll-snap-align: end; }
/* grouped lane (Spiel): one row per family, the rows stack upwards from the symbol, the first chip stays above it */
.qz-orb-lane.is-grouped { width: auto; align-items: flex-start; padding: 2px 6px 2px 0; }
.qz-orb-group { display: flex; flex-direction: row; gap: 2px; flex: 0 0 auto; }
.qz-orb-lane.is-more .qz-orb-group { scroll-snap-align: end; }
.qz-orb-lane.is-grouped .qz-orb-lanetitle { align-self: flex-start; min-width: 56px; text-align: center; white-space: nowrap; padding: 0 4px 0 12px; box-sizing: border-box; position: relative; z-index: 1; }
.qz-orb-lane.is-right .qz-orb-group, .qz-orb-lane.is-left .qz-orb-group, .qz-orb-lane.is-down .qz-orb-group { display: contents; }
.qz-orb-lane[hidden] { display: none; }
.qz-orb-lane.is-down { flex-direction: column; max-height: 50%; }
.qz-orb-lane.is-right, .qz-orb-lane.is-left { width: auto; height: 60px; flex-direction: row; max-height: none; max-width: 30%; overflow-x: auto; overflow-y: hidden; }
.qz-orb-lane.is-left { flex-direction: row-reverse; }
@keyframes qz-orb-fan { from { opacity: 0; transform: translateY(10px) scale(.92); } }
.qz-orb-lanetitle { font-size: 8px; font-weight: 800; letter-spacing: .14em; color: var(--c); text-transform: uppercase; text-shadow: 0 1px 2px #000; order: 99; }
.qz-orb-lane.is-down .qz-orb-lanetitle { order: -1; }
.qz-orb-lane.is-right .qz-orb-lanetitle, .qz-orb-lane.is-left .qz-orb-lanetitle { display: none; }
.qz-orb-chip { position: relative; flex: 0 0 auto; width: 56px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; touch-action: none; }
.qz-orb-pic, .qz-orb-cover { width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; display: grid; place-items: center; border: 1.5px solid color-mix(in srgb, var(--c) 65%, transparent); }
.qz-orb-pic .qz-orb-ic { width: 19px; height: 19px; }
.qz-orb-cover { border-radius: 12px; border: 2px solid #000; color: #0d0a17; font-family: var(--qz-display, Impact, sans-serif); font-size: 15px; letter-spacing: .02em; opacity: .75; }
.qz-orb-chip.is-on .qz-orb-pic { background: var(--c); color: #0d0a17; border: 2.5px solid #000; box-shadow: 2px 2px 0 #000; }
.qz-orb-lane--drums .qz-orb-chip.is-on .qz-orb-pic, .qz-orb-lane--look .qz-orb-chip.is-on .qz-orb-pic { color: #fff; }
.qz-orb-chip.is-on .qz-orb-cover { opacity: 1; outline: 3px solid #fff; outline-offset: 1px; }
.qz-orb-chip.is-wait .qz-orb-pic { border: 2px dashed var(--c); color: var(--c); animation: qz-orb-wait .5s ease-in-out infinite alternate; }
@keyframes qz-orb-wait { to { opacity: .5; } }
/* gen-6: a chip that cannot be used yet (rolling without account or points): grey, a tap still explains why */
.qz-orb-chip.is-off .qz-orb-pic { filter: grayscale(1); opacity: .45; }
.qz-orb-chip.is-off .qz-orb-chipname { opacity: .55; }
.qz-orb-chip.is-action .qz-orb-pic { border: 1.5px dashed rgba(255, 255, 255, .5); }
.qz-orb-chip .qz-orb-ring { top: 20px; width: 46px; height: 46px; }
.qz-orb-chip.is-dragging .qz-orb-pic { transform: scale(1.1); }
.qz-orb-chipname { width: 56px; overflow: hidden; white-space: nowrap; font-size: 9px; font-weight: 700; line-height: 1.25; text-align: center; text-shadow: 0 1px 2px #000; }
.qz-orb-chipname > span { display: inline-block; }
.qz-orb-chipname.is-long { text-align: left; }
.qz-orb-chipname.is-long > span { padding-left: 2px; animation: qz-orb-run var(--qz-run-t, 4s) ease-in-out 1s infinite alternate; }
@keyframes qz-orb-run { 0%, 15% { transform: translateX(0); } 85%, 100% { transform: translateX(var(--qz-run, 0)); } }

/* phone on its side: symbols in two columns at the edges, lanes fan sideways */
.qz-orb-side .qz-orb-row { top: 64px; bottom: 0; padding: 0; display: block; }
.qz-orb-side .qz-orb-cell { position: absolute; }
.qz-orb-side .qz-orb-cell--set { left: calc(14px + env(safe-area-inset-left, 0px)); top: 6%; }
.qz-orb-side .qz-orb-cell--spiel { left: calc(14px + env(safe-area-inset-left, 0px)); top: 34%; }
.qz-orb-side .qz-orb-cell--drums { left: calc(14px + env(safe-area-inset-left, 0px)); top: 62%; }
.qz-orb-side .qz-orb-cell--loops { right: calc(14px + env(safe-area-inset-right, 0px)); top: 6%; }
.qz-orb-side .qz-orb-cell--mic { right: calc(14px + env(safe-area-inset-right, 0px)); top: 34%; }
.qz-orb-side .qz-orb-cell--look { right: calc(14px + env(safe-area-inset-right, 0px)); top: 62%; }
.qz-orb-side .qz-orb-play { position: absolute; left: 50%; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); margin: 0 0 0 -28px; width: 56px; height: 56px; }
.qz-site .qz-orbit-on.qz-orb-side .qz-ui-side { left: calc(50% - 210px); right: calc(50% - 210px); bottom: 70px; }
.qz-site .qz-orbit-on.qz-orb-side .qz-ui-stage .qz-stage, .qz-site .qz-orbit-on.qz-orb-side .qz-ui-stage .qz-figure { bottom: 70px; }
.qz-orb-side .qz-orb-strip { bottom: 72px; }
.qz-orb-side .qz-orb-top { grid-template-columns: 42px 42px 1fr 42px 42px; padding-left: calc(12px + env(safe-area-inset-left, 0px)); padding-right: calc(12px + env(safe-area-inset-right, 0px)); }
.qz-orb-side .qz-ui-stage-hint { display: none; }
.qz-site .qz-playui.qz-orbit-on.qz-orb-side { min-height: 0; height: 100vh; height: 100dvh; }

/* wide screens: same row, a bit roomier */
@media (min-width: 720px) and (min-height: 600px) {
  .qz-orb-row { gap: 18px; }
  .qz-orb-cell { width: 54px; }
  .qz-orb-sym { width: 50px; height: 50px; }
  .qz-orb-cell > .qz-orb-sym .qz-orb-ring { width: 62px; height: 62px; }
  .qz-orb-top { max-width: 720px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .qz-orb-lane, .qz-orb-chipname.is-long > span, .qz-orb-rec.is-on, .qz-orb-chip.is-wait .qz-orb-pic { animation: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .qz-orbit * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .qz-orb-btn, .qz-orb-set, .qz-orb-sym, .qz-orb-pic, .qz-orb-targetbtn, .qz-orb-tchip { background-color: rgba(13, 10, 23, .95); }
}