/*
 * Musicshake Studio for the web (2026-09-24) — the look of the Musicshake Studio iOS app.
 * Numbers are Studio's SwiftUI points (1pt = 1 CSS px): blocks 53.3, gap 1.4, pitch 54.7, radius 7.
 */
:root {
	--accent: #29B6F6; --accent2: #0A84FF; --gold: #FFD166; --cash: #06D6A0; --red: #FF3B30;
	--pink: #FF5FA2;   /* the Track window's auto preview button (owner 2026-10-05; the EP badge's pink: white reads on it) */
	--bg: #0D0D14; --s1: #161622; --s2: #1F1F2E; --s3: #2A2A3D;
	--t1: #FFFFFF; --t2: #A0A0B8; --t3: #5A5A78;
	--cell: 53.3px; --gap: 1.4px; --pitch: 54.7px; --r: 7px;
	--safe-t: env(safe-area-inset-top, 0px); --safe-r: env(safe-area-inset-right, 0px);
	--safe-b: env(safe-area-inset-bottom, 0px); --safe-l: env(safe-area-inset-left, 0px);
	--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--t1); font: 15px/1.3 var(--font); overflow: hidden; overscroll-behavior: none; }
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg.i { width: 1em; height: 1em; fill: currentColor; display: block; }

/* ---- screen ---------------------------------------------------------------------------------------------- */
#studio { position: fixed; inset: 0; display: flex; flex-direction: column; padding: var(--safe-t) var(--safe-r) 0 var(--safe-l); }
#studio .logo { position: absolute; top: var(--safe-t); left: 0; right: 0; height: 85px; display: flex; justify-content: center; pointer-events: none; }

/* the block section uses the whole screen; the bottom controls float over it (the padding lets the last rows scroll
   above them; --bottom-h is measured in main.js) */
#studio .main { position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; z-index: 1;
	padding-bottom: var(--bottom-h, 0px); }
#studio .main::-webkit-scrollbar { display: none; }
#studio .main .spacer { height: 97px; }   /* logo 85 + 12 */
#studio .bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding-bottom: calc(16px + var(--safe-b)); pointer-events: none; }
#studio .bottom::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: linear-gradient(to bottom, rgba(13, 13, 20, 0), rgba(13, 13, 20, .35) 45%, rgba(13, 13, 20, .5)); }
#studio .bottom .songbtn, #studio .bottom .bar > * { pointer-events: auto; }
#studio .bottom .analyzer { pointer-events: none; }

/* ---- sequencer -------------------------------------------------------------------------------------------- */
/* the same gap to both page edges at every width: twice the gap between the blocks */
.seq { position: relative; display: flex; align-items: flex-start; margin: 0 calc(var(--gap) * 2) 8px;}
.seq .col { flex: none; width: var(--cell); position: relative; z-index: 4;}
.seq .corner { width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 19.2px; }
/* the part numbers sit right above the blocks: the same gap as between block rows */
.seq .parts, .seq .col .corner { margin-bottom: .7px; }
.seq .tbtn { display: block; width: var(--cell); height: var(--cell); margin: .7px 0; position: relative; }
.seq .tbtn img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.seq .tbtn.muted img { opacity: .4; }
.seq .plus { width: var(--cell); height: var(--cell); border-radius: var(--r); background: rgba(41, 182, 246, .07); border: 1px dashed rgba(41, 182, 246, .3); display: flex; align-items: center; justify-content: center; color: rgba(41, 182, 246, .6); transition: transform .15s;}
.seq .plus:active { transform: scale(.88); }
.seq .col .plus { margin: .7px 0 8px; }
.seq .h { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; position: relative; touch-action: pan-x pan-y; }
.seq .h::-webkit-scrollbar { display: none; }
.seq .h.locked { overflow-x: hidden; }
.seq .content { position: relative; padding: 0 0 8px 1.4px; width: max-content; }   /* left: the gap after the track column; right: none (the page gap is the .seq margin) */
.seq .parts { display: flex; gap: var(--gap); }
.seq .row { display: flex; gap: var(--gap); padding: .7px 0; }
.seq .ghost { width: var(--cell); height: var(--cell); flex: none; }

.pbtn { flex: none; width: var(--cell); height: var(--cell); border-radius: var(--r); background: rgba(41, 182, 246, .10); border: 1px solid rgba(41, 182, 246, .25);
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0 3px; position: relative; }
.pbtn .n { font: 600 13px/1 var(--mono); color: var(--accent); display: flex; align-items: center; gap: 2px; }
.pbtn .n svg { font-size: 8px; }
.pbtn .c { font: 700 10px/1 var(--mono); color: rgba(41, 182, 246, .5); max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: clip; }
.pbtn.onechord .c { display: none; }   /* an app with one chord set (a remix app): no progression to show or change */

/* blocks: 4 designs (Settings > Block style). --tc = the track colour */
.blk { flex: none; width: var(--cell); height: var(--cell); border-radius: var(--r); position: relative; overflow: hidden; background: var(--s2); }
.blk .dot { position: absolute; right: 5px; bottom: 5px; width: 10px; height: 10px; background: url(../img/block/Dot.png) center / contain no-repeat; display: none; }
.blk .v { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; font: 700 10px var(--mono); color: var(--tc); opacity: .95; }
.blk.on.vari .dot { display: block; }
.blk.muted .dot, .blk.muted .v { display: none; }
/* A. Image (Studio default) */
.st-image .blk.on { background: var(--s3) var(--img) center / cover no-repeat; }
.st-image .blk.on.muted { background-image: none; }
.st-image .blk.on.muted::before { content: ""; position: absolute; inset: 0; background: var(--img) center / cover no-repeat; opacity: .35; }
/* B. Color (Studio) */
.st-color .blk.on { background: color-mix(in srgb, var(--tc) 40%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 80%, transparent); }
.st-color .blk.on.muted { background: var(--s3); box-shadow: none; }
.st-color .blk.on.vari .dot { display: none; }
.st-color .blk.on.vari .v { display: flex; }
/* C. Neon (web): dark tile, glowing outline in the track colour */
.st-neon .blk { background: #14141e; }
.st-neon .blk.on { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--tc) 22%, #0b0b12) 0%, #0b0b12 75%);
	box-shadow: inset 0 0 0 1.5px var(--tc), inset 0 0 10px color-mix(in srgb, var(--tc) 55%, transparent), 0 0 7px color-mix(in srgb, var(--tc) 45%, transparent); }

/* D. Glass (web): frosted gradient tile with a top highlight */

.st-glass .blk.on { background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 75%, #fff 10%) 0%, color-mix(in srgb, var(--tc) 55%, #000 10%) 55%, color-mix(in srgb, var(--tc) 35%, #000 35%) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .10); }
.st-glass .blk.on::after { content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 42%; border-radius: 5px 5px 12px 12px; background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); }

/* playhead */
/* the playhead: a 3px line over the blocks, dragged by itself (a 20px invisible grip around it) */
.seq .ph-line { position: absolute; top: 54px; bottom: 8px; background: var(--accent); z-index: 5;
	touch-action: none; cursor: ew-resize;}
.seq .ph-line::before { content: ""; position: absolute; top: 0; bottom: 0; left: -9px; right: -9px; }
.seq.playing .ph-line, .seq .ph-line.drag { opacity: 1; }

/* moving a part / a track (long press, then drag) */
.moving { position: relative; z-index: 25; }
.pbtn.moving::after, .tbtn.moving::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); background: rgba(41, 182, 246, .2); box-shadow: inset 0 0 0 1.5px rgba(41, 182, 246, .85); }
.blk.moving { opacity: .9; }

/* long-press HUDs */
.hud { position: absolute; z-index: 40; background: var(--s2); border: 1px solid rgba(41, 182, 246, .5); border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
	display: flex; align-items: center; pointer-events: none; transition: opacity .12s, transform .12s; }
.hud.hud-v { flex-direction: column; gap: 12px; padding: 12px 10px; }
.hud.hud-h { gap: 14px; padding: 9px 14px; }   /* (not .h: .seq .h is the block rows' scroller and took the menu out of its place) */
.hud span { font-size: 14px; color: rgba(255, 255, 255, .3); display: flex; transition: color .1s, font-size .1s; }
.hud span.on { font-size: 18px; color: var(--accent); }
.hud span.del.on { color: var(--red); }
.hud span.dim { opacity: .35; }

/* per-track volume panels (corner button) */
.vpanel { position: absolute; z-index: 20; height: 42px; width: 202px; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--s2); border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .24), inset 0 0 0 1px color-mix(in srgb, var(--tc) 35%, transparent); animation: vp-in .28s cubic-bezier(.2, .9, .3, 1); }
.wide .vpanel { width: 242px; }
@keyframes vp-in { from { opacity: 0; transform: translateX(-12px); } }
.vpanel .mute { width: 30px; height: 34px; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--tc); flex: none; }
.vpanel.muted .mute { color: var(--t3); background: rgba(42, 42, 61, .55); }
.vpanel input { flex: 1 1 auto; min-width: 0; accent-color: var(--tc); height: 22px; }
.vpanel.muted input { accent-color: var(--s3); }
.vpanel .val { width: 28px; text-align: right; font: 500 11px var(--mono); color: var(--t2); flex: none; }
.vcatch { position: absolute; inset: 0; z-index: 19; }

/* ---- bottom: song title, analyzer, control bar ---------------------------------------------------------- */
.songbtn { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 auto; padding: 8px 16px 6px; }
.songbtn .t { display: flex; align-items: center; gap: 8px; font: 600 18px var(--font); max-width: 90vw; }
.songbtn .t .ti { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the saved-songs button: a round accent chip after the title */
.songbtn .t .u { flex: none; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	color: var(--accent); font-size: 19px; background: rgba(41, 182, 246, .16); box-shadow: inset 0 0 0 1px rgba(41, 182, 246, .45); }
.songbtn .t .u svg { stroke: currentColor; stroke-width: 1.2px; }   /* a bolder chevron */
/* the up arrow nudges upward twice every 6 seconds: a hint that the saved songs slide up from here */
.songbtn .t .u svg { animation: nudge-up 6s ease-in-out infinite; }
@keyframes nudge-up { 0%, 24%, 100% { transform: translateY(0); } 6% { transform: translateY(-4px); } 12% { transform: translateY(0); } 18% { transform: translateY(-4px); } }
.songbtn:active .t .u { background: rgba(41, 182, 246, .3); }
.songbtn .t::before { content: ""; flex: none; width: 26px; }   /* balances the chip: the title itself stays centred */
.songbtn .bpm { font-size: 12px; color: var(--t2); }
/* width/left set from the menu capsule (main.js); the song name is laid over the lower part of the analyzer (no
   empty gap above the menu when the music stops) */
.analyzer { display: block; width: calc(100% - 40px); max-width: none; height: 90px; margin: 0 auto 4px; position: relative; z-index: 0; }
#studio .bottom > .songbtn { position: absolute; z-index: 1; top: 27px; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; }
.bar { display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto; padding: 0 20px; }
/* wide: play | menu | undo redo help — an empty space before play as wide as redo + help keeps the menu on the page's
   centre line (under the song name); the bar grows by the same amount so the menu keeps its width */
.wide .bar { max-width: calc(628px + 2 * (44px + 10px)); }
.wide .bar > .play { margin-left: calc(2 * (44px + 10px)); }
.pill { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--s1); box-shadow: inset 0 0 0 1px var(--s3), 0 6px 12px rgba(0, 0, 0, .35);
	display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 17px; transition: transform .2s; }
.pill:active { transform: scale(.88); }
.pill.dim { color: var(--t2); opacity: .6; }
.undo-wrap { position: relative; flex: none; }
.ustack { position: absolute; left: 0; bottom: calc(100% + 8px); display: flex; flex-direction: column; gap: 8px; z-index: 10; transform-origin: bottom center; animation: pop-in .28s cubic-bezier(.3, 1.3, .5, 1); }
.ustack[hidden] { display: none; }
#studio.wide .ustack { display: none; }
.capsule { flex: 1 1 auto; min-width: 0; height: 58px; display: flex; padding: 6px 10px; border-radius: 999px; background: var(--s1);
	box-shadow: inset 0 0 0 1px var(--s3), 0 10px 24px rgba(0, 0, 0, .5); }
.capsule button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #fff; }
.capsule button svg { font-size: 18px; }
.capsule button span { font: 600 12px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.capsule button:active { opacity: .6; }
.capsule .compose svg { color: var(--gold); }
/* phones: the top-right ? is the help button; the bar keeps play | 4 buttons | undo redo */
#studio:not(.wide) .bar > .redo, #studio:not(.wide) .bar > .guide { display: none; }
@media (max-width: 899px) { .capsule .compose .long { display: none; } .capsule .compose .short { display: inline; } }
@media (max-width: 480px) {
	.bar { gap: 6px; padding: 0 10px; }
	.capsule { padding: 6px 2px; }
	.capsule button { gap: 2px; }
	.capsule button span { font-size: 10px; font-weight: 600; letter-spacing: -.2px; }
	.capsule .compose .long { display: none; }
}
@media (min-width: 900px) { .capsule .compose .short { display: none; } }
.circle-ic { width: 36px; height: 36px; border-radius: 50%; background: rgba(22, 22, 34, .7); display: flex; align-items: center; justify-content: center; color: var(--t2); font-size: 17px; }

/* ---- windows (sheets), popovers, alerts, toast ------------------------------------------------------------ */
.scrim { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .45); animation: fade .35s; }
.scrim.closing { animation: fade-out .35s forwards; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.sheet { position: fixed; z-index: 101; left: 50%; transform: translateX(-50%); width: min(100vw, 560px); background: var(--bg); display: flex; flex-direction: column;
	top: calc(var(--safe-t) + 22px); bottom: 0; border-radius: 12px 12px 0 0; box-shadow: 0 -4px 30px rgba(0, 0, 0, .5); animation: sheet-up .5s cubic-bezier(.32, .72, 0, 1); overflow: hidden; }
/* every window: up from the bottom of the screen like an iOS sheet, and back down when it closes */
@keyframes sheet-up { from { transform: translate(-50%, 100vh); } }
@keyframes sheet-down { to { transform: translate(-50%, 100vh); } }
.sheet.closing { animation: sheet-down .35s cubic-bezier(.32, .72, 0, 1) forwards; pointer-events: none; }
@media (min-width: 740px) and (min-height: 600px) {
	.sheet { top: max(40px, calc(var(--safe-t) + 24px)); bottom: max(40px, calc(var(--safe-b) + 24px)); border-radius: 14px; }
}
.sheet .grab { flex: none; width: 36px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); margin: 6px auto 0; }
.sheet .sh-head { flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 6px 12px 10px; gap: 8px; }
.sheet .sh-head .l { justify-self: start; display: flex; gap: 8px; }
.sheet .sh-head .r { justify-self: end; display: flex; gap: 8px; }
.sheet .sh-head h2 { margin: 0; font: 700 20px var(--font); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet .sh-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px calc(16px + var(--safe-b));}
.popover { position: fixed; z-index: 111; width: min(360px, calc(100vw - 20px)); overflow: hidden; animation: fade .18s; display: flex; flex-direction: column;}
.popover .pv-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 16px;}
.popover .pv-head { gap: 10px; }
.popover .pv-head b { font: 600 18px var(--font); white-space: nowrap; word-break: keep-all; }   /* (one line: Korean titles must not break letter by letter) */
.popover .pv-list { max-height: 360px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.popover .pv-foot { display: flex; gap: 10px; padding: 12px; background: var(--s1); }
.popover .pv-foot button { flex: 1; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.popover .pv-foot .no { background: var(--s3); color: #fff; }
.popover .pv-foot .ok { background: var(--accent); color: #fff; }
.popover .pv-foot .ok:disabled { background: rgba(41, 182, 246, .35); color: rgba(255, 255, 255, .45); }

.playbtn { flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgba(41, 182, 246, .12); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.playbtn.on { background: var(--accent); color: #fff; }
.alert-box { position: fixed; z-index: 121; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(40, 40, 52, .96); border-radius: 14px; overflow: hidden; text-align: center; box-shadow: 0 20px 50px rgba(0, 0, 0, .6);}
.alert-box .ab-t { font-weight: 600; font-size: 17px;}

.alert-box .ab-b { display: flex;}
.alert-box .ab-b button { flex: 1;}

.alert-box .ab-b button.destructive { color: var(--red); }
.alert-box .ab-b button.bold { font-weight: 600; }
.toast { position: fixed; z-index: 130; left: 16px; right: 16px; margin: 0 auto; text-align: center; font-weight: 600;}
@keyframes toast-in { from { opacity: 0; transform: translateY(20px); } }
.loading { position: fixed; inset: 0; z-index: 90; background: rgba(13, 13, 20, .48); display: flex; align-items: center; justify-content: center; }
.loading .card { padding: 18px; border-radius: 12px; background: var(--s1); box-shadow: inset 0 0 0 1px rgba(42, 42, 61, .8); }
.spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid rgba(41, 182, 246, .25); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Part window (ChordVariationView) ------------------------------------------------------------------------ */

.empty { color: var(--t3); text-align: center; padding: 30px 0; }

/* ---- Change Track window (TrackVariationView) ------------------------------------------------------------------- */
.sheet { --acc: var(--accent); }
.cat-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font: 700 22px var(--font); max-width: 100%; }
.cat-btn img { width: 28px; height: 28px; object-fit: contain; }
.cat-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-btn i { font-size: 13px; display: flex; }
.tsearch { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; border-radius: 10px; background: var(--s2); color: var(--t3);}
.tsearch[hidden] { display: none; }
.tsearch input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: #fff; font: 15px var(--font); }
.tlist { margin: 0 -16px; padding-bottom: 90px; }
.trow { display: flex; align-items: center; gap: 12px; padding: 11px 16px; cursor: pointer; border-bottom: 1px solid var(--s2); }
.trow.cur { background: color-mix(in srgb, var(--acc) 8%, transparent); }
.trow.open { background: color-mix(in srgb, var(--acc) 14%, transparent); border-bottom: 0; }
.trow.na { background: rgba(31, 31, 46, .75); }
.trow.hid { opacity: .55; }
/* admin: an unshown pattern / tone (users don't see it): dimmed, a dashed outline and an UNSHOWN tag */
.trow.hid { outline: 1px dashed rgba(255, 255, 255, .35); outline-offset: -3px; border-radius: 10px; }
/* an unshown tone looks like an unshown pattern row (owner 2026-10-04): the dashed outline around the whole row, the tag right after the name */
.tone.hid { opacity: .55; outline: 1px dashed rgba(255, 255, 255, .35); outline-offset: -3px; border-radius: 10px; }
.tone.hid .tapply span { flex: 0 1 auto; }
.unshown { font: 700 9px/1 var(--font); letter-spacing: .06em; color: #ffb4b4; border: 1px solid rgba(255, 140, 140, .6); border-radius: 4px; padding: 2px 4px; margin-left: 6px; font-style: normal; vertical-align: 2px; white-space: nowrap; }
.trow .tinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.trow .tn { display: flex; align-items: center; gap: 6px; font: 600 15px var(--font); }
.trow.na .tn { color: var(--t3); }
.trow .tn span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.trow .lock { color: var(--gold); font-size: 9px; display: flex; }
/* premium patterns: PREMIUM (outlined, not bought) → PURCHASE (the picked one) → a crown (bought, or kept by this track) */
/* PREMIUM is a badge (outlined, small); PURCHASE is a button (a glossy gold pill, as inviting as Variation). The picked row's
   badge turns into the button (.morph: once, as the pattern is picked) */
.trow .tn .prem { flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 17px; width: 70px;
	padding: 0 5px 0 5.6px; border-radius: 4px; font: 800 8.5px/1 var(--font); letter-spacing: .6px; font-style: normal; color: #ffc93c; border: 1px solid rgba(255, 201, 60, .85); }
.trow .tn .pslot { flex: none; width: 102px; height: 17px; }   /* (the badge's place: PURCHASE starts at the same left edge) */
.trackwin .trow .pbuy { position: absolute; top: 50%; margin-top: -15px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
	height: 30px; padding: 0 12px 0 12.6px; border: 0; border-radius: 999px; font: 800 12px/1 var(--font); letter-spacing: .6px; color: #2a1d00; cursor: pointer;   /* (Variation's size and its centre on the row) */
	background: linear-gradient(180deg, #ffe08a 0%, #ffc93c 48%, #eeac1f 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(120, 70, 0, .25), 0 3px 10px rgba(0, 0, 0, .3); }
.trackwin .trow .pbuy:active { transform: scale(.94); }
/* the badge grows into the button: from the badge's line, size and look to the button on the row's centre, in one motion */
.trackwin .trow .pbuy.morph { animation: pbuy-morph .55s cubic-bezier(.25, .9, .3, 1.12) both, pbuy-glow 2.8s ease-in-out .55s infinite; }
.trackwin .trow .pbuy.morph > span { animation: pbuy-text .55s ease-out both; }
@keyframes pbuy-morph {
	0% { margin-top: calc(-8.5px - var(--dy, 0px)); height: 17px; padding: 0 5px 0 5.6px; border-radius: 4px; font-size: 8.5px; color: #ffc93c;
		background: rgba(255, 201, 60, 0); box-shadow: inset 0 0 0 1px rgba(255, 201, 60, .85), 0 0 0 rgba(0, 0, 0, 0); }
	55% { color: #2a1d00; }
	100% { margin-top: -15px; height: 30px; padding: 0 12px 0 12.6px; border-radius: 999px; font-size: 12px; color: #2a1d00; } }
@keyframes pbuy-text { 0% { opacity: .55; } 100% { opacity: 1; } }
/* Variation while PURCHASE shows: the arrows only (a round 30px button); it shrinks as PURCHASE appears, grows back after a purchase */
.trackwin .trow .tvar .tvl { display: inline-block; overflow: hidden; white-space: nowrap; max-width: 90px; transition: none; }
.trackwin .trow .tvar.compact { width: 30px; padding: 0; gap: 0; justify-content: center; }
.trackwin .trow .tvar.compact .tvl { max-width: 0; opacity: 0; }
.trackwin .trow .tvar.compact.shrink { animation: tvar-shrink .55s cubic-bezier(.25, .9, .3, 1) both, tvar-glow-acc 3.2s ease-in-out .55s infinite; }
.trackwin .trow .tvar.compact.shrink .tvl { animation: tvl-out .45s ease-in both; }
.trackwin .trow .tvar.grow { animation: tvar-grow .5s cubic-bezier(.25, .9, .3, 1) both, tvar-glow-acc 3.2s ease-in-out .5s infinite; }
.trackwin .trow .tvar.grow .tvl { animation: tvl-in .5s ease-out both; }
@keyframes tvar-shrink { 0% { width: 102px; padding: 0 8px 0 12px; } 100% { width: 30px; padding: 0; } }
@keyframes tvar-grow { 0% { width: 30px; padding: 0; } 100% { width: 102px; padding: 0 8px 0 12px; } }
@keyframes tvl-out { 0% { max-width: 90px; opacity: 1; } 100% { max-width: 0; opacity: 0; } }
@keyframes tvl-in { 0% { max-width: 0; opacity: 0; } 100% { max-width: 90px; opacity: 1; } }
.trow .tn .pown { flex: none; display: inline-flex; color: #ffc93c; filter: drop-shadow(0 0 3px rgba(255, 201, 60, .4)); }
.trow .tn .pown svg { width: 13px; height: 13px; }
.trow .na-i { color: var(--t3); font-style: normal; font-size: 12px; }
.trow .ts { font-size: 12px; color: color-mix(in srgb, var(--acc) 80%, transparent); }
.trow.na .ts { color: var(--t3); }
.trow .heart { flex: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--t3); font-size: 15px; }
.trow .heart.on { color: rgba(255, 59, 48, .85); }

.tones { margin-left: 20px; background: var(--s2); border-left: 3px solid color-mix(in srgb, var(--acc) 55%, transparent); padding: 6px 0; display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--s2); }
.tone { display: flex; align-items: center; gap: 12px; padding: 7px 16px 7px 10px; }
.tone.sel { background: color-mix(in srgb, var(--acc) 10%, transparent); }
.tone .playbtn { background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--acc); }
.tone .playbtn.on { background: var(--acc); color: #fff; }
.tone .tapply { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; text-align: left; font: 600 15px var(--font); color: var(--t2); }
.tone.sel .tapply { color: #fff; }
.tone .tapply span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tone .ck { color: var(--acc); font-size: 13px; opacity: 0; display: flex; }
.tone.sel .ck { opacity: 1; }
.tnone { font-size: 12px; color: var(--t3); padding: 10px 16px; margin: 0; }
.tload { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0; color: var(--t2); font-size: 13px; }
.tload.small { padding: 14px 0; }
.tempty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 50px 0; color: var(--t3); font-size: 15px; }
.tempty svg { font-size: 30px; }
.vcard { position: absolute; left: 16px; right: 16px; bottom: calc(8px + var(--safe-b)); background: var(--s1); border-radius: 16px; padding: 9px 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 -6px 20px rgba(13, 13, 20, .9); }
.vcard .vh { display: flex; align-items: center; gap: 6px; font: 600 15px var(--font); color: var(--t2); }
.vcard .vh svg { font-size: 12px; color: var(--t3); }
.vcard .vh b { margin-left: auto; font: 500 11px var(--mono); color: var(--acc); }
.vcard input { accent-color: var(--acc); width: 100%; }
.vcard.closed input { display: none; }
.vcard.closed .vh svg { transform: rotate(180deg); }
/* category picker / filter: the half-height sheets */
.sheet.half { top: auto; height: min(62vh, 560px); }
@media (min-width: 740px) and (min-height: 600px) { .sheet.half { top: auto; bottom: max(40px, calc(var(--safe-b) + 24px)); height: min(62vh, 560px); } }
.catgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 12px 0; }
@media (min-width: 500px) { .catgrid { grid-template-columns: repeat(6, 1fr); } }
.catcell { display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 82px; font: 600 12px var(--font); transition: transform .15s; }
.catcell:active { transform: scale(.88); }
.catcell img { width: 54px; height: 54px; object-fit: contain; border-radius: 14px; }
.catcell.sel img { box-shadow: 0 0 0 2px var(--accent); }
.catcell.sel span { color: var(--accent); }
.sheet h4 { margin: 18px 0 10px; font: 600 15px var(--font); color: var(--t2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip2 { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font: 600 12px var(--font); color: var(--t2); background: var(--s2); }
.chip2 svg { font-size: 10px; }
.chip2.sel { color: var(--acc); background: color-mix(in srgb, var(--acc) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent); }
/* long-press menu */
.asheet { position: fixed; z-index: 116; left: 50%; bottom: calc(10px + var(--safe-b)); transform: translateX(-50%); width: min(420px, calc(100vw - 20px)); display: flex; flex-direction: column; gap: 8px; animation: sheet-up2 .25s cubic-bezier(.2, .9, .3, 1); }
@keyframes sheet-up2 { from { transform: translate(-50%, 40px); opacity: 0; } }
.asheet .as-t { background: rgba(40, 40, 52, .96); border-radius: 14px 14px 0 0; padding: 12px 16px; font-size: 13px; color: var(--t2); text-align: center; margin-bottom: -8px; }
.asheet .as-l { background: rgba(40, 40, 52, .96); border-radius: 0 0 14px 14px; overflow: hidden; display: flex; flex-direction: column; }
.asheet .as-i { display: flex; align-items: center; gap: 12px; padding: 14px 18px; font-size: 17px; color: #fff; border-top: 1px solid rgba(255, 255, 255, .08); text-align: left; }
.asheet .as-i svg { font-size: 18px; color: var(--accent); }
.asheet .as-i.danger, .asheet .as-i.danger svg { color: var(--red); }
.asheet .as-i:disabled { opacity: .45; cursor: default; }
.asheet .as-i em { margin-left: auto; font-size: 12px; font-style: normal; color: var(--t2); }
.asheet .as-c { background: rgba(40, 40, 52, .96); border-radius: 14px; padding: 14px; font: 600 17px var(--font); color: #0A84FF; }

/* ---- forms, Saved Songs, New Song, Publish, Login (SavedSongsSheet, NewSongView, PublishSheetView) ------------ */
.form { display: flex; flex-direction: column; padding: 12px 0 24px; }
.form label { margin: 16px 0 8px; font: 600 12px var(--font); color: var(--t3); text-transform: uppercase; letter-spacing: .5px; }
.form input, .form textarea, .tfbox input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 0; background: var(--s2); color: #fff; font: 15px var(--font); outline: 0; caret-color: var(--accent); -webkit-user-select: text; user-select: text; resize: none; }
.form input:focus, .form textarea:focus, .tfbox input:focus { box-shadow: 0 0 0 1px rgba(41, 182, 246, .5); }
.form .lead, .terms .lead { color: var(--t2); margin: 0 0 4px; font-size: 15px; line-height: 1.45; }
.form .err, .tfbox .err { color: var(--red); font-size: 13px; margin: 10px 0 0; }
.form .sub { color: var(--t2); font-size: 13px; text-align: center; margin: 16px 0 0; }
.form .sub a { color: var(--accent); }
.primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 12px; background: linear-gradient(90deg, #29B6F6, #0A84FF); color: #fff; font: 600 15px var(--font); transition: transform .2s; }
.primary:active { transform: scale(.96); }
.primary:disabled { background: var(--s3); color: rgba(255, 255, 255, .5); transform: none; cursor: default; }
.secondary { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: 12px; background: rgba(41, 182, 246, .12); color: var(--accent); font: 600 15px var(--font); }
.primary.wide { width: 100%; margin-top: 24px; padding: 14px; border-radius: 14px; }
.form.login .primary { margin-top: 20px; }
/* saved songs */
.slots { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 90px; }
.slot { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--s1); cursor: pointer; }
.slot.sel { background: rgba(41, 182, 246, .22); box-shadow: inset 0 0 0 1.5px rgba(41, 182, 246, .85); }
.slot.empty-slot { box-shadow: inset 0 0 0 1px rgba(42, 42, 61, .55); }
.slot .badge { flex: none; width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font: 600 15px var(--font); background: rgba(41, 182, 246, .15); color: var(--accent); }
.slot.sel .badge { background: var(--accent); color: var(--bg); }
.slot.empty-slot .badge { background: var(--s2); color: var(--t3); }
.slot .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.slot .info b { font: 600 15px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot .info small { font-size: 12px; color: var(--t3); }
.slot.sel .info small { color: rgba(41, 182, 246, .82); }
.slot .info em { font-style: normal; color: var(--t3); font-size: 15px; }
.slot .more, .slot .plusc { flex: none; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--t3); font-size: 15px; }
.buyslot { position: absolute; left: 16px; right: 16px; bottom: calc(12px + var(--safe-b)); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: 12px; background: var(--accent); color: var(--bg); font: 600 15px var(--font); }
/* rename dialog */
.tfbox { position: fixed; z-index: 121; left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(480px, calc(100vw - 40px)); padding: 24px; border-radius: 16px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--s3), 4px 4px 15px rgba(0, 0, 0, .5); animation: fade .18s; }
.tfbox h3 { margin: 0 0 16px; text-align: center; font: 600 18px var(--font); }
.tfbox input { height: 48px; }
.tfbox .row { display: flex; gap: 12px; margin-top: 18px; }
.tfbox .row button { flex: 1; }
/* new song */
.art-card { display: flex; align-items: center; gap: 16px; padding: 14px; border-radius: 16px; background: var(--s1); }
.art-card .art { width: 80px; height: 80px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: rgba(255, 255, 255, .35); flex: none; }
.art-card b { display: block; font: 600 18px var(--font); }
.art-card b.ph { color: var(--t3); }
.art-card small { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--t2); }
.art-card small i { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.ggrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ggrid button { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 600 9px var(--font); color: var(--t3); }
.ggrid button i { width: 44px; height: 44px; border-radius: 50%; background: var(--s2); display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--t2); }
.ggrid button.sel { color: var(--gc); }
.ggrid button.sel i { background: color-mix(in srgb, var(--gc) 22%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gc) 55%, transparent); color: var(--gc); }
.bpms { display: flex; gap: 8px; }
.bpms button { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12px 0; border-radius: 10px; background: var(--s2); }
.bpms b { font: 700 18px var(--mono); color: var(--t2); }
.bpms small { font: 600 9px var(--font); color: var(--t3); }
.bpms button.sel { background: var(--accent); box-shadow: inset 0 0 0 1px rgba(41, 182, 246, .5); }
.bpms button.sel b { color: #fff; }
.bpms button.sel small { color: rgba(255, 255, 255, .7); }
.bpms button:disabled { opacity: .3; cursor: default; }   /* a BPM the genre has no songs at (Hiphop / R&B: 120, 140) */
/* publish */
.publish .cover { position: relative; align-self: center; width: 120px; height: 120px; margin-top: 8px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 40px; color: rgba(255, 255, 255, .6); }
.publish .cover .img { position: absolute; inset: 0; border-radius: 20px; background: center / cover no-repeat; }
.publish .cover.has i { display: none; }
.publish .cover::after { content: ""; position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230D0D14' d='M3 17.2V21h3.8l11-11-3.8-3.8-11 11zM20.7 7a1 1 0 0 0 0-1.4l-2.3-2.3a1 1 0 0 0-1.4 0l-1.8 1.8 3.8 3.8L20.7 7z'/%3E%3C/svg%3E") center / 15px no-repeat; box-shadow: 0 0 0 3px var(--bg); }
.publish .chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.publish .chips::-webkit-scrollbar { display: none; }
.publish .chip2 { flex: none; }
.imggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; padding: 12px 0; }
.imggrid button { aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--s2); }
.imggrid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.terms { display: flex; flex-direction: column; gap: 14px; padding: 12px 8px 24px; max-width: 520px; margin: 0 auto; }
.terms h3 { margin: 0; font: 700 24px var(--font); }
.terms small { font: 600 12px var(--font); color: var(--t2); }
.terms .tbox { white-space: pre-wrap; background: var(--s1); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--s3); padding: 14px; font-size: 12px; line-height: 1.6; color: var(--t2); max-height: 38vh; overflow-y: auto; -webkit-user-select: text; user-select: text; }
.terms .agree { display: flex; align-items: center; gap: 10px; font: 600 15px var(--font); }
.terms .agree svg { font-size: 20px; color: var(--t3); }
.terms .agree.on svg { color: var(--accent); }
.terms .go:disabled { opacity: .45; background: linear-gradient(90deg, #29B6F6, #0A84FF); color: #fff; }
.pubov { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center;}
.pubov .card { border-radius: 16px; background: var(--s2); display: flex; flex-direction: column; align-items: center;}
.pubov .bar { display: block; width: 220px; max-width: none; height: 4px; margin: 0; padding: 0; gap: 0; border-radius: 2px; overflow: hidden;}   /* not the toolbar .bar (its 20px padding left the rail empty at both ends) */
.pubov .bar i { display: block; height: 100%; width: 0; transition: width .2s;}
.pubov small { font-size: 12px;}

/* ---- Discovery / Library / player (DiscoveryView, SongListRow, MiniPlayer, SongDetailView, ArtistProfileView) ---- */
.seg { display: inline-flex; width: 190px; padding: 2px; border-radius: 9px; background: rgba(118, 118, 128, .24); }
.seg button { flex: 1; padding: 6px 0; border-radius: 7px; font: 600 13px var(--font); color: #fff; }
.seg button.on { background: #636366; }
.disc { display: flex; flex-direction: column; gap: 28px; padding: 8px 0 100px; }
.sech { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sech b { font: 600 18px var(--font); }
.sech .more { display: flex; align-items: center; gap: 3px; font: 600 12px var(--font); color: var(--t3); }
.sech .more svg { font-size: 10px; }
.pager { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; }
.pager::-webkit-scrollbar { display: none; }
.pager .pg { flex: none; width: 100%; height: 400px; scroll-snap-align: start; }
.srow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid rgba(42, 42, 61, .5); }
.srow:last-child { border-bottom: 0; }
.srow .rk { width: 24px; text-align: center; font: 600 15px var(--mono); color: var(--t3); flex: none; }
.srow .rk.top { color: var(--gold); }
.cv { flex: none; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .4); font-size: 15px; }
.cv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.srow .si { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.srow .si b { font: 600 15px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow.now .si b { color: var(--accent); }
.srow .si small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--t2); white-space: nowrap; overflow: hidden; }
.srow .si small svg { font-size: 8px; color: var(--t3); }
.srow .si .d { width: 3px; height: 3px; border-radius: 50%; background: var(--t3); flex: none; }

.srow .like { flex: none; display: flex; align-items: center; color: var(--t3); padding: 6px;}
.srow .like svg { font-size: 14px; }
.srow .like.on { color: var(--accent); }
.car { display: flex; gap: 14px; overflow-x: auto; padding: 8px 16px; margin: 0 -16px; scrollbar-width: none; align-items: flex-start; }
.car::-webkit-scrollbar { display: none; }
.car .ci { flex: none; width: 110px; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: .5; transition: opacity .4s; text-align: center; }

.car .ci.on { opacity: 1; }
.car .ci.on .cv { width: 110px; height: 110px; margin-top: 0;}
.car .ci b, .car .ci small { width: 100%; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car .ci b { font-weight: 400; color: var(--t2); }
.car .ci.on b { font-weight: 600; color: #fff; }
.car .ci small { color: var(--t3); }
.mini { position: absolute; left: 16px; right: 16px; bottom: calc(16px + var(--safe-b)); height: 64px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 16px; background: var(--s1); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); z-index: 5; animation: toast-in .3s; }
.mini[hidden] { display: none; }
.mini .mm { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; }
.mini .mm .cv { border-radius: 8px; }
.mini .mm span:last-child { min-width: 0; display: flex; flex-direction: column; }
.mini b { font: 600 15px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini small { font-size: 12px; color: var(--t2); }
.mini .mp { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex: none; }
.mini .mx { width: 28px; height: 28px; border-radius: 50%; background: var(--s2); color: var(--t3); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }

.dl, .al { margin: 0 -16px; padding-bottom: 100px; }
.sbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.sbar[hidden] { display: none; }
.sbar .scope { display: flex; align-items: center; gap: 3px; font: 600 12px var(--font); color: var(--accent); white-space: nowrap; }
.sbar input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 0; background: var(--s2); color: #fff; font: 15px var(--font); outline: 0; }
.sbar .cancel { font: 600 15px var(--font); color: var(--accent); }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.fchips button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(41, 182, 246, .12); color: var(--accent); font: 600 12px var(--font); }
.fchips svg { font-size: 9px; }
.empty small { font-size: 12px; }
.sdetail.closing { animation: detail-down .35s cubic-bezier(.32, .72, 0, 1) forwards; }
.sdetail { position: fixed; z-index: 105; overflow-y: auto; padding: var(--safe-t) 0 calc(24px + var(--safe-b));}
.sd-top { display: flex; align-items: center; gap: 8px; padding: 10px 16px; }
.sd-top span { flex: 1; }
.sd-body { display: flex; flex-direction: column; align-items: center; padding: 20px 20px 0; max-width: 560px; margin: 0 auto; }
.sd-body .disc { width: 190px; height: 190px; border-radius: 50%; overflow: hidden; background: var(--s2); display: flex; align-items: center; justify-content: center; font-size: 60px; color: rgba(255, 255, 255, .3); margin-top: 20px;}
.sd-body .disc img { width: 100%; height: 100%; object-fit: cover; }
.sd-body .disc.spin { animation: spin 4s linear infinite; }
.sd-body .prog { margin-top: 24px;}
.sd-body .track { position: relative; cursor: pointer; touch-action: none;}
.sd-body .track i { position: absolute; left: 0;}
.sd-body .track b { position: absolute; top: 50%; border-radius: 50%;}
.sd-body .tt { justify-content: space-between; margin-top: 6px; font: 500 11px var(--mono);}
.sd-body h2 { margin: 16px 0 6px; font: 700 24px var(--font); text-align: center; }

.sd-body .ar i { border-radius: 50%;}
.sd-body .tr { display: flex; align-items: center; margin: 20px 0;}
.sd-body .tr .pv, .sd-body .tr .nx { color: #fff;}
.sd-body .tr .nx:disabled { color: var(--t3); }
.sd-body .tr .pp { border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.sd-body .info { width: 100%; display: flex;}
.sd-body .info div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;}
.sd-body .info div:first-child { border-left: 0; }
.sd-body .info b { font: 600 15px var(--font); }
.sd-body .info small { font-size: 12px; color: var(--t3); }
.sd-body .artist { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;}
.sd-body .artist > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.sd-body .artist b { font: 600 15px var(--font); }
.sd-body .artist small { font-size: 12px; color: var(--t3); }
.av { width: 48px; height: 48px; border-radius: 50%; background: var(--s2); display: flex; align-items: center; justify-content: center; font: 700 18px var(--font); flex: none; }
.av.big { box-shadow: 0 6px 16px rgba(41, 182, 246, .4);}
.artistp { flex-direction: column; align-items: center;}
.artistp h3 { margin: 6px 0 0; font: 700 24px var(--font); }
.artistp .pill { font-size: 12px; color: var(--t3); background: var(--s2); padding: 3px 10px; border-radius: 999px; }
.artistp .stats { width: 100%; display: flex; background: var(--s1); border-radius: 14px; padding: 14px 0; margin-top: 10px; }
.artistp .stats div { flex: 1; display: flex; flex-direction: column; align-items: center; }
.artistp .stats b { font: 600 18px var(--font); }
.artistp .stats small { font-size: 12px; color: var(--t3); }
.artistp h4 { align-self: flex-start; }

/* ---- My Page / Settings / Store / Admin (MyPageView, SettingsView, StoreView, AdminView) --------------------- */
.sheet.mypage { background: linear-gradient(180deg, rgba(41, 182, 246, .3), var(--bg) 300px), var(--bg); }
.badge-host { position: relative; }
/* the unread mark (bell, My Page): a red-coral dot with a soft glow, no dark ring; it pulses twice as it appears */
.badge-host.badge::after, #studio .bar .mypage.badge::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #ff8a80 0%, #ff453a 55%, #e0281e 100%);
	box-shadow: 0 0 6px rgba(255, 69, 58, .65), inset 0 0.5px 0 rgba(255, 255, 255, .5); animation: ubadge-in 1.6s ease-out 2; }
.badge-host.badge::after { top: 4px; right: 4px; }
@keyframes ubadge-in { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1.25); opacity: 1; } 45% { transform: scale(1); } 100% { transform: scale(1); box-shadow: 0 0 6px rgba(255, 69, 58, .65), inset 0 .5px 0 rgba(255, 255, 255, .5); } }
@media (prefers-reduced-motion: reduce) { .badge-host.badge::after, #studio .bar .mypage.badge::after { animation: none; } }
.prof { display: flex; align-items: center; gap: 18px; padding: 20px 0; }
.prof .pr { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.prof .nm { display: flex; align-items: center; gap: 8px; }
.prof .nm b { font: 600 15px var(--font); }
.lv { display: inline-flex; align-items: center; background: linear-gradient(90deg, #FFD166, #FF9F43); color: #000;}
.lv svg { font-size: 9px; }
.prof .xp { height: 5px; border-radius: 3px; background: var(--s2); overflow: hidden; }
.prof .xp i { display: block; height: 100%; background: linear-gradient(90deg, #FFD166, #FF9F43); }
.prof .xpt { font-size: 11px; color: var(--t3); }
.prof .bal { display: flex; gap: 10px; margin-top: 4px; }
.prof .bal button { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 10px 0; border-radius: 12px; background: rgba(22, 22, 34, .72); }
.prof .bal b { font: 600 15px var(--font); }
.prof .bal .note b { color: var(--gold); }
.prof .bal .cash b { color: var(--cash); }
.prof .bal small { font-size: 12px; color: var(--t3); }
.card { background: var(--s1); border-radius: 16px; margin: 4px 0 20px; overflow: hidden; }
.card .rowt { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; font: 600 15px var(--font); text-align: left; color: #fff; text-decoration: none; }
.card .rowt > svg:first-child { width: 28px; font-size: 16px; color: var(--accent); }
.card .rowt.link > svg:last-child { margin-left: auto; font-size: 13px; color: var(--t3); }
.card .div { height: 1px; background: var(--s3); margin-left: 56px; }
.lims { display: flex; padding: 0 16px 14px; }
.lims div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; border-left: 1px solid rgba(42, 42, 61, .5); }
.lims div:first-child { border-left: 0; }
.lims small { font-size: 12px; color: var(--t3); }
.lims b { font: 600 15px var(--mono); }
.acts { display: flex; flex-direction: column; gap: 12px; padding: 0 16px 16px; }
.act { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--bg); }
.act > i { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); font-size: 14px; }
.act > div { flex: 1; min-width: 0; }
.act .at { display: flex; justify-content: space-between; margin-bottom: 8px; }
.act .at b { font: 600 15px var(--font); }
.act .at small { font: 600 12px var(--font); color: var(--c); }
.act .bar { height: 4px; border-radius: 2px; background: var(--s2); overflow: hidden; }
.act .bar span { display: block; height: 100%; background: var(--c); }
.caps { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; }
.caps button { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--s3); font: 600 13px var(--font); }
.caps button.on { background: var(--accent); color: var(--bg); box-shadow: none; }
.sheet .hl { margin: 0 -16px; }   /* (in windows only: .blk.hl is a half-muted block) */
.hrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--s2); }
.hrow.unread { background: rgba(41, 182, 246, .04); }
.hrow > i { width: 40px; height: 40px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(41, 182, 246, .15); color: var(--accent); font-size: 16px; }
.hrow > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hrow b { font: 400 13px var(--font); color: #fff; }
.hrow small { font-size: 12px; color: var(--t3); }
.hrow em { font: 600 12px var(--font); font-style: normal; white-space: nowrap; }
.hrow em.pos { color: var(--cash); }
.hrow em.neg { color: var(--accent); }
.set .srow2 { width: 100%; display: flex; align-items: center; gap: 12px; padding: 18px 16px; border-bottom: 1px solid var(--s2); font: 600 15px var(--font); text-align: left; color: #fff; text-decoration: none; }
.set .srow2:last-child { border-bottom: 0; }
.set .srow2 > svg:first-child, .set .srow2 .t svg { width: 28px; font-size: 16px; color: var(--accent); flex: none; }
.set .srow2 > svg:last-child { margin-left: auto; font-size: 13px; color: var(--t3); }
.set .srow2 em { margin-left: auto; font-size: 12px; color: var(--t3); font-style: normal; }
.set .srow2:disabled { opacity: .5; }
.set .srow2.out, .set .srow2.out svg { color: var(--red); }
.set .srow2.col { flex-direction: column; align-items: stretch; gap: 12px; }
.set .srow2 .t { display: flex; align-items: center; gap: 12px; }
.segs { display: grid; gap: 8px;}
.segs button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 12px; background: var(--s2); font: 600 12px var(--font); color: var(--t2); }
.segs button.on { background: rgba(41, 182, 246, .15); color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.segs .bs { width: 34px; height: 34px; border-radius: 7px; display: block; }
.bs-image { background: #2A2A3D url(../img/block/Drum.png) center / cover; }
.bs-color { background: rgba(45, 154, 114, .4); box-shadow: inset 0 0 0 1px rgba(45, 154, 114, .8); }
.bs-neon { background: radial-gradient(circle at 50% 40%, #183a30, #0b0b12 75%); box-shadow: inset 0 0 0 1.5px #2D9A72, 0 0 6px rgba(45, 154, 114, .5); }
.bs-glass { background: linear-gradient(160deg, #58c19c, #26765a 55%, #173f31); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.sw { margin-left: auto; position: relative; width: 51px; height: 31px; flex: none; }
.sw input { opacity: 0; width: 0; height: 0; position: absolute; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: #39393D; transition: background .2s; cursor: pointer; }
.sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; transition: transform .2s; }
.sw input:checked + i { background: #34C759; }
.sw input:checked + i::after { transform: translateX(20px); }

.bals { display: flex; padding: 12px 0 16px;}
.bals .b { flex: 1; display: flex; padding: 10px 14px; border-radius: 12px;}
.bals .b span { display: flex; flex-direction: column; }
.bals small { font-size: 12px; color: var(--t3); }
.bals b { font: 600 15px var(--font); }
.bals .note { background: rgba(255, 209, 102, .08); box-shadow: inset 0 0 0 1px rgba(255, 209, 102, .2); color: var(--gold); }
.bals .cash { background: rgba(6, 214, 160, .08); box-shadow: inset 0 0 0 1px rgba(6, 214, 160, .2); color: var(--cash); }
.scats { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; overflow-x: auto; padding: 8px 0; background: var(--s2); border-bottom: 1px solid var(--s3); scrollbar-width: none; }
.scats button { flex: none; padding: 8px 14px; border-radius: 999px; background: var(--s3); color: var(--t3); font: 600 12px var(--font); }
.scats button.on { background: linear-gradient(90deg, #29B6F6, #0A84FF); color: #fff; }
.pgrid2 { display: grid; gap: 12px; padding: 16px 0;}
.prod { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; background: var(--s1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 10%, transparent); text-align: left; }
.prod .pi { border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent);}
.prod b { font: 600 15px var(--font); }
.prod small { font-size: 12px; color: var(--t3); }
.prod .pp { display: flex; gap: 8px; flex-wrap: wrap; }
.prod em { font: 600 13px var(--font); font-style: normal; }
.prod em.c { color: var(--cash); }
.prod em.n { color: var(--gold); }
.prod s { color: var(--t2); font-weight: 400; margin-right: 3px; }

.purch { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 20px; }
.purch .pi.big { width: 80px; height: 80px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.purch > b { font: 600 18px var(--font); }
.purch > p { margin: 0; color: var(--t2); text-align: center; }
.purch h4 { align-self: stretch; margin: 12px 0 0; }
.purch .pm { align-self: stretch; display: flex; flex-direction: column; gap: 8px; }
.purch .pm button { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--s2); text-align: left; }
.purch .pm button.on { background: rgba(41, 182, 246, .06); box-shadow: inset 0 0 0 1px rgba(41, 182, 246, .3); }
.purch .pm i { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--t3); flex: none; }
.purch .pm button.on i { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 5px var(--bg), inset 0 0 0 10px var(--accent); }
.purch .pm span { display: flex; flex-direction: column; }
.purch .pm small { color: var(--t2); font-size: 12px; }
.paycard { margin: 8px 16px; padding: 12px; border-radius: 10px; background: var(--s2); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 35%, transparent); display: flex; flex-direction: column; gap: 10px; color: var(--t3); font-size: 12px; }
.paycard .ph { display: flex; align-items: center; gap: 8px; color: var(--gold); }
.paycard .ph b { color: #fff; font: 600 12px var(--font); }
.paycard .pbtns { display: flex; gap: 8px; }
.paycard .pbtns button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 0; border-radius: 8px; background: color-mix(in srgb, var(--acc) 12%, transparent); color: var(--acc); font: 600 13px var(--font); }
.sd-body .buy { width: 100%; }
.sd-body .buy .primary.wide { margin-top: 16px; }
.sd-body .owned { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 8px 12px; border-radius: 12px; background: rgba(41, 182, 246, .12); color: var(--accent); font: 600 12px var(--font); }
.sheet.admin .atabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 12px; scrollbar-width: none; position: sticky; top: 0; background: var(--bg); z-index: 2; }
.sheet.admin .atabs button { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--s1); box-shadow: inset 0 0 0 1px var(--s3); font: 600 12px var(--font); }
.sheet.admin .atabs button.on { background: var(--accent); color: var(--bg); box-shadow: none; }
.anote { font-size: 12px; color: var(--t2); line-height: 1.5; }
.af { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--s1); }
.af span { flex: 1; font-size: 14px; color: var(--t2); }
.af input { width: 110px; padding: 8px 10px; border-radius: 8px; border: 0; background: var(--s2); color: #fff; font: 14px var(--mono); text-align: right; -webkit-user-select: text; user-select: text; }
.af input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--accent); }
.acard { background: var(--s1); border-radius: 12px; padding: 12px; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.acard small { color: var(--t3); font-size: 12px; }
.acard p { margin: 0; font: 13px var(--mono); }
.acard code { font-size: 11px; color: var(--t2); word-break: break-all; }
/* admin › Traffic */
.sheet.admin .trange { display: flex; gap: 6px; margin: 0 0 10px; }
.sheet.admin .trange button { padding: 6px 12px; border-radius: 999px; background: var(--s2); font: 600 12px var(--font); }
.sheet.admin .trange button.on { background: var(--accent); color: var(--bg); }
.sheet.admin .tsum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sheet.admin .tsum div { background: var(--s1); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sheet.admin .tsum b { font: 700 18px var(--mono); }
.sheet.admin .tsum small { color: var(--t3); font-size: 11px; }
.sheet.admin .tday { display: grid; grid-template-columns: 44px 1fr 48px; grid-template-rows: auto auto; align-items: center; column-gap: 8px; padding: 4px 0; }
.sheet.admin .tday span { font: 12px var(--mono); color: var(--t2); }
.sheet.admin .tday i { display: block; height: 8px; min-width: 2px; border-radius: 4px; background: var(--accent); }
.sheet.admin .tday b { font: 600 13px var(--mono); text-align: right; }
.sheet.admin .tday small { grid-column: 2 / 4; color: var(--t3); font-size: 11px; }
.sheet.admin .trow2 { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 3px 0; }
.sheet.admin .trow2 span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--t2); }
.acard.urow .utest { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--t2, rgba(255, 255, 255, .7)); margin-top: 8px; }
.acard.urow .uin, .asearch { display: flex; gap: 8px; align-items: center; }
.asearch input, .acard.urow input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 0; background: var(--s2); color: #fff; font: 14px var(--font); -webkit-user-select: text; user-select: text; }
.asearch .primary { padding: 10px 14px; white-space: nowrap; }
.acard.prow2 { flex-direction: row; align-items: center; }
.acard.prow2 b { flex: 1; }
/* while the first song loads (the page's spinner is up): no empty grid or placeholder title */
body:has(#studio-splash) .seq, body:has(#studio-splash) .songbtn { visibility: hidden; }

/* ---- liquid glass: the menu capsule and the round buttons of the bottom bar ------------------------------------------
   a faint tint over a blurred, saturated backdrop; a bright rim that catches the light at the top-left and bottom-right
   (a 1px gradient border cut out with a mask); a soft sheen over the upper half; a floating shadow */
#studio .bar .capsule, #studio .bar .pill, #studio .songbtn .t .u {
	position: relative; isolation: isolate;
	background: linear-gradient(to bottom, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));
	-webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .38), 0 1px 2px rgba(0, 0, 0, .25), inset 0 0 0 .5px rgba(255, 255, 255, .06);
}
#studio .bar .capsule::before, #studio .bar .pill::before, #studio .songbtn .t .u::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
	background: linear-gradient(135deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .14) 28%, rgba(255, 255, 255, .04) 55%, rgba(255, 255, 255, .12) 78%, rgba(255, 255, 255, .5));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
#studio .bar .capsule::after, #studio .bar .pill::after, #studio .songbtn .t .u::after {
	content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; z-index: -1;
	background: radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%);
}
#studio .bar .pill.dim { opacity: 1; color: rgba(160, 160, 184, .6); }   /* a disabled button keeps its glass; only the icon dims */
/* the song name and tempo: plain text with a thin, soft dark edge and halo, readable over any blocks */
#studio .bottom > .songbtn .ti { text-shadow: 0 0 1px rgba(0, 0, 0, .55), 0 0 7px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .5); }
#studio .bottom > .songbtn .bpm { color: #D2D2E4; text-shadow: 0 0 1px rgba(0, 0, 0, .5), 0 0 6px rgba(0, 0, 0, .5), 0 2px 3px rgba(0, 0, 0, .6), 0 3px 8px rgba(0, 0, 0, .45); }
/* the saved-songs chip is glass too (a little larger so the rim reads) */
#studio .songbtn .t .u { width: 30px; height: 30px; color: #6FD0FF; }
#studio .songbtn .t::before { width: 30px; }
#studio .bottom > .songbtn .ti { padding: 8px 10px; margin: -8px -10px; }   /* room for the halo inside the ellipsis box (no clipped edge) */
#studio .bottom > .songbtn { gap: 0; }   /* the tempo sits close under the name */
#studio .bottom > .songbtn .bpm { margin-top: -3px; }
#studio .bar .pill.play svg { font-size: 23px; }   /* a bigger play/pause icon (the button keeps its size) */
#studio .pill.undo svg, #studio .pill.redo svg, #studio .pill.redo2 svg { font-size: 21px; }   /* a little bigger undo/redo icons */
/* the arrows sit low and to one side inside their 24-unit box: nudged so the drawn shape is centred in the button */
#studio .pill.undo svg { transform: translate(-.5px, -1.4px); }
#studio .pill.redo svg, #studio .pill.redo2 svg { transform: translate(.5px, -1.4px); }
/* the bottom buttons' icons and labels get the same drop shadow as the song name */
#studio .bar .capsule button span { text-shadow: 0 2px 3px rgba(0, 0, 0, .6), 0 3px 8px rgba(0, 0, 0, .45); }
#studio .bar svg { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .55)) drop-shadow(0 3px 5px rgba(0, 0, 0, .35)); }
#studio .bar .capsule button span { padding: 4px 6px; margin: -4px -6px; max-width: calc(100% + 12px); }   /* room for the shadow inside the ellipsis box (no clipped edge) */
/* instrument buttons repeat every 54.7px like the block rows: their .7px margins must not collapse (flex column) */
.seq .col .tracks { display: flex; flex-direction: column; }

/* ---- themes (Settings > Theme): the instrument buttons and the part numbers follow the blocks' theme ---------------
   keys: color = "Neon" (default), neon = "Flash", glass = "Glass", image = "Image". --tc = the track colour; the
   part numbers use the accent colour. Image keeps the picture buttons; the others draw a tile + the white glyph. */
.seq .tbtn { border-radius: var(--r); overflow: hidden; }
.seq .tbtn .g { position: absolute; inset: 0; display: none; background: var(--glyph) center / 80% no-repeat; pointer-events: none; }
#studio:not(.st-image) .seq .tbtn img { display: none; }
#studio:not(.st-image) .seq .tbtn .g { display: block; }
#studio:not(.st-image) .seq .tbtn.muted { filter: saturate(.25); opacity: .55; }
/* Neon */

.st-color .pbtn { background: color-mix(in srgb, var(--accent) 22%, transparent); border-color: color-mix(in srgb, var(--accent) 75%, transparent); }
.st-color .pbtn .n { color: #fff; }
.st-color .pbtn .c { color: color-mix(in srgb, var(--accent) 85%, #fff); }
/* Flash: dark tile, glowing outline; the glyph glows in the track colour */
.st-neon .seq .tbtn {
	box-shadow: inset 0 0 0 1.5px var(--tc), inset 0 0 10px color-mix(in srgb, var(--tc) 55%, transparent);}

.st-neon .pbtn { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 20%, #0b0b12) 0%, #0b0b12 75%); border: 0;
	box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 6px color-mix(in srgb, var(--accent) 40%, transparent); }

/* Glass: frosted gradient tile with a top highlight */

.st-glass .seq .tbtn::after, .st-glass .pbtn::after { content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 42%; border-radius: 5px 5px 12px 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); pointer-events: none; }
.st-glass .pbtn { border: 0; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 70%, #fff 10%) 0%, color-mix(in srgb, var(--accent) 50%, #000 10%) 55%, color-mix(in srgb, var(--accent) 30%, #000 35%) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -1px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .10); }
.st-glass .pbtn .n { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.st-glass .pbtn .c { color: rgba(255, 255, 255, .8); }
/* Image: the part numbers on the glossy black block picture (the colour blocks' design, in black) */
.st-image .pbtn { background: none; border: 0; }
.st-image .pbtn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: url(../img/block/Chord.png) center / cover no-repeat; filter: brightness(.6); }   /* darker than the picture */
.st-image .pbtn > * { position: relative; }
.st-image .pbtn .n { color: rgba(235, 235, 245, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.st-image .pbtn .c { color: rgba(255, 255, 255, .18); }   /* the chord: there if you look, not competing */
/* the speaker corner on the same dark black tile, with a light-grey speaker */
.st-image .seq .corner { position: relative; isolation: isolate; border-radius: var(--r); color: rgba(220, 220, 232, .85); }
.st-image .seq .corner::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
	background: url(../img/block/Chord.png) center / cover no-repeat; filter: brightness(.6); }
/* the + buttons (add track / add part) follow the theme as empty, inactive-looking slots */
.seq .plus { position: relative; font-size: 22px; }
.seq .plus svg { stroke: currentColor; stroke-width: 1.3px; stroke-linejoin: round; }   /* a bold +: the thin cross gets an outline */
.st-color .seq .plus { background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--accent) 48%, transparent); color: color-mix(in srgb, var(--accent) 72%, transparent); }
.st-neon .seq .plus { background: #0e0e17; border: 1px dashed color-mix(in srgb, var(--accent) 50%, transparent); color: color-mix(in srgb, var(--accent) 75%, transparent);
	box-shadow: inset 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent); }
.st-neon .seq .plus svg { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent) 60%, transparent)); }
.st-glass .seq .plus { border: 0;}
.st-image .seq .plus { border: 0; background: none; color: rgba(190, 190, 210, .75); }
.st-image .seq .plus::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
	background: url(../img/block/Chord.png) center / cover no-repeat; filter: brightness(.55); opacity: .7; }
.st-image .seq .plus { isolation: isolate; }
/* Neon / Flash / Glass: the part numbers and the speaker corner in neutral grey tiles (like Image's black ones):
   white number, faint chord, grey speaker — the colour stays with the blocks */
.st-color .pbtn, .st-color .seq .corner { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .2); box-shadow: none; }
.st-neon .pbtn, .st-neon .seq .corner { border: 0;}
.st-glass .pbtn, .st-glass .seq .corner { border: 0;}
.st-glass .seq .corner { position: relative; }
.st-glass .seq .corner::after { content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 42%; border-radius: 5px 5px 12px 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); pointer-events: none; }
#studio:not(.st-image) .seq .corner { border-radius: var(--r); color: rgba(220, 220, 232, .85); }
#studio:not(.st-image) .pbtn .n { color: rgba(235, 235, 245, .92); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
#studio:not(.st-image) .pbtn .c { color: rgba(255, 255, 255, .18); }
/* instrument buttons: dark tiles lit in the track colour (like the Image theme's pictures), the colour still says
   the category */
.st-color .seq .tbtn { background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 55%, #101018) 0%, color-mix(in srgb, var(--tc) 22%, #0a0a10) 70%, color-mix(in srgb, var(--tc) 12%, #07070b) 100%);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 60%, transparent); }
.st-glass .seq .tbtn { background: linear-gradient(145deg, color-mix(in srgb, var(--tc) 60%, #15151e) 0%, color-mix(in srgb, var(--tc) 26%, #0b0b12) 65%, color-mix(in srgb, var(--tc) 12%, #06060a) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .08); }
/* Flash: the inside is a clean dark core with the glow running along the inner edge (a neon tube in a frame) and a
   faint top sheen — the outline is unchanged */
.st-neon .blk.on, .st-neon .seq .tbtn {
	box-shadow: inset 0 0 0 1.5px var(--tc), inset 0 0 12px 2px color-mix(in srgb, var(--tc) 55%, transparent), inset 0 0 3px 1px color-mix(in srgb, var(--tc) 80%, transparent),
		0 0 7px color-mix(in srgb, var(--tc) 45%, transparent);}
.st-neon .blk.on.muted { background: #14141e; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 30%, transparent); }
/* ---- Glass theme: liquid glass (replaces the earlier gradient tiles) ------------------------------------------------
   a translucent body tinted with the track colour, a bright rim (light at the top-left and bottom-right), a curved
   top sheen, a glow near the bottom where light passes through, a floating shadow. Empty slots: faint clear glass;
   part numbers / speaker: neutral clear glass. (No backdrop blur: behind the grid is a plain background, and blurring
   every block would cost too much on iPad.) */
.st-glass .blk, .st-glass .seq .tbtn, .st-glass .pbtn, .st-glass .seq .corner, .st-glass .seq .plus { position: relative; isolation: isolate; }
.st-glass .blk { box-shadow: none;}

.st-glass .pbtn, .st-glass .seq .corner, .st-glass .seq .plus {
	border: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); box-shadow: 0 5px 12px rgba(0, 0, 0, .3); }
.st-glass .seq .plus { background: rgba(255, 255, 255, .04); box-shadow: none; color: rgba(255, 255, 255, .6); }
/* the rim: a 1px gradient border cut out with a mask */
.st-glass .blk::before, .st-glass .seq .tbtn::before, .st-glass .pbtn::before, .st-glass .seq .corner::before, .st-glass .seq .plus::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);}
.st-glass .blk:not(.on)::before, .st-glass .seq .plus::before { opacity: .35; }
/* the sheen */
.st-glass .blk.on::after, .st-glass .seq .tbtn::after, .st-glass .pbtn::after, .st-glass .seq .corner::after {
	content: ""; position: absolute; inset: 1px; left: 1px; right: 1px; top: 1px; height: auto; border-radius: inherit; pointer-events: none; z-index: 1;}
.st-glass .blk .dot, .st-glass .blk .v, .st-glass .seq .tbtn .g, .st-glass .pbtn > *, .st-glass .seq .corner > *, .st-glass .seq .plus > * { position: relative; z-index: 2; }
.st-glass .blk .dot { position: absolute; }
.st-glass .seq .tbtn .g { position: absolute; }
/* muted: the glass stays, the colour fades */
.st-glass .blk.on.muted { background: linear-gradient(to bottom, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: 0 3px 8px rgba(0, 0, 0, .25); }
.st-glass .blk.on.muted::after { display: block; opacity: .5; }
/* Glass, balanced: thinner glass (background images show through), the track colour softened with grey, and a level
   rim — lit along the top, even down both sides, a faint glint at the bottom (the diagonal rim looked tilted) */
.st-glass .blk.on, .st-glass .seq .tbtn { --tg: color-mix(in srgb, var(--tc) 72%, #9a9aae);
	background: linear-gradient(to bottom, color-mix(in srgb, var(--tg) 52%, rgba(255, 255, 255, .1)), color-mix(in srgb, var(--tg) 28%, transparent));
	box-shadow: 0 4px 10px rgba(0, 0, 0, .25), inset 0 -6px 12px color-mix(in srgb, var(--tg) 30%, transparent); }
.st-glass .blk::before, .st-glass .seq .tbtn::before, .st-glass .pbtn::before, .st-glass .seq .corner::before, .st-glass .seq .plus::before {
	background: linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .2) 22%, rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, .22) 100%); }
.st-glass .blk.on::after, .st-glass .seq .tbtn::after, .st-glass .pbtn::after, .st-glass .seq .corner::after {
	background: radial-gradient(130% 60% at 50% -8%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 60%); }
.st-glass .blk { background: rgba(255, 255, 255, .03); }
.st-glass .pbtn, .st-glass .seq .corner { background: linear-gradient(to bottom, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); box-shadow: 0 4px 10px rgba(0, 0, 0, .22); }
/* a wider playhead, with a thin dark edge so it stands out on any theme and block colour */
.seq .ph-line { width: 5px; margin-left: -2.5px; border-radius: 3px; opacity: .9;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 8px rgba(41, 182, 246, .6); }
.seq.playing .ph-line { opacity: 1; }
.seq .ph-line.drag { width: 6px; margin-left: -3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), 0 0 12px rgba(41, 182, 246, .85); }
/* Flash: a faint neon wash inside (the track colour), a little stronger in the middle */
.st-neon .blk.on, .st-neon .seq .tbtn { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40%),
	radial-gradient(90% 90% at 50% 50%, color-mix(in srgb, var(--tc) 20%, #08080d) 0%, color-mix(in srgb, var(--tc) 11%, #08080d) 100%); }
/* Flash: the instrument buttons keep the plain dark core (darker than the blocks); the part numbers and the speaker
   corner get the neon-tube treatment in white */
.st-neon .seq .tbtn { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40%), #08080d; }
.st-neon .pbtn, .st-neon .seq .corner { background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40%), #0a0a10;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8), inset 0 0 12px 2px rgba(255, 255, 255, .2), inset 0 0 3px 1px rgba(255, 255, 255, .45),
		0 0 8px rgba(255, 255, 255, .3); }
.st-neon .pbtn .n { color: #fff; text-shadow: 0 0 6px rgba(255, 255, 255, .7), 0 0 2px rgba(255, 255, 255, .9); }
.st-neon .seq .corner { color: #fff; }
.st-neon .seq .corner svg { filter: drop-shadow(0 0 4px rgba(255, 255, 255, .6)); }
/* the glyphs were cut from the full pictures: at 100% they are exactly the Image theme's size */
.seq .tbtn .g { background-size: 100% 100%; }
.st-neon .seq .tbtn .g { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
/* Flash: the instrument drawing glows like a neon tube — a bright core, a stronger glow in the track colour
   (the button outline is unchanged) */
.st-neon .seq .tbtn .g {
	filter: drop-shadow(0 0 1.5px var(--tc)) drop-shadow(0 0 4px var(--tc)) drop-shadow(0 0 8px color-mix(in srgb, var(--tc) 70%, transparent));}
/* (the glow must sit outside the mask: the drawing is masked on an inner layer, the glow is on its parent) */
.st-neon .seq .tbtn .g { background: none; -webkit-mask: none; mask: none; }
.st-neon .seq .tbtn .g::before { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--tc) 55%, #fff);
	-webkit-mask: var(--glyph) center / 100% 100% no-repeat; mask: var(--glyph) center / 100% 100% no-repeat; }
/* ---- backgrounds (one per theme, the lowest layer) and the eng site's logo floating on it -------------------------- */
/* its own fixed layer behind the page, reaching past the top and bottom edges (status bar, browser bars, bounce),
   so the image covers the whole screen */
body { background: transparent; }
body::before { content: ""; position: fixed; left: 0; right: 0; top: -120px; bottom: -120px; z-index: -1; pointer-events: none;
	background: var(--bg) center / cover no-repeat; }
html[data-bg=neon] body::before { background-image: url(../img/bg/neon.jpg?v=3); }
html[data-bg=flash] body::before { background-image: url(../img/bg/flash.jpg?v=2); }
html[data-bg=glass] body::before { background-image: url(../img/bg/glass.jpg?v=2); }
html[data-bg=image] body::before { background-image: url(../img/bg/image.jpg?v=2); }
#studio .logo { align-items: center; }
#studio .logo img { height: auto; width: min(300px, 66vw); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55)); }
/* the strip under the browser's toolbar (iPad Chrome/Safari) shows only the page's base colour, never a fixed layer:
   each theme's base colour is the top colour of its background, so it blends in */
html[data-bg=neon] { background: #1c2150; }
html[data-bg=flash] { background: #0e1017; }
html[data-bg=glass] { background: #223c5c; }
html[data-bg=image] { background: #302f37; }
/* the grid floats on the background with no panel of its own: no rounded clipping, no column backing */
.seq { border-radius: 0; overflow: visible; }
.seq .col { background: transparent; }
#studio .logo img[src*="-neon"], #studio .logo img[src*="-flash"], #studio .logo img[src*="-glass"], #studio .logo img[src*="-image"] { width: min(314px, 69vw); }   /* those files have room for the glow: letters stay the same size */
#studio .logo img[src*="-image"] { filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .3)); }   /* the glossy logo keeps just a light shadow */
/* Settings > Background previews */
.segs.bgs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.segs.bgs button { padding: 10px 2px; font-size: 11px; }
.segs .bgp { width: 34px; height: 44px; border-radius: 7px; display: block; background: center / cover no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.segs .bgp-auto { background: linear-gradient(135deg, #1a2350 0 25%, #0e1017 25% 50%, #2b4a6e 50% 75%, #302f37 75%); }
.segs .bgp-neon { background-image: url(../img/bg/thumb/neon.jpg?v=2); }
.segs .bgp-flash { background-image: url(../img/bg/thumb/flash.jpg?v=1); }
.segs .bgp-glass { background-image: url(../img/bg/thumb/glass.jpg?v=1); }
.segs .bgp-image { background-image: url(../img/bg/thumb/image.jpg?v=1); }
html[data-bg=sky] body::before { background-image: url(../img/bg/sky.jpg?v=2); }
html[data-bg=sky] { background: #1e4174; }
.segs .bgp-sky { background-image: url(../img/bg/thumb/sky.jpg?v=1); }

/* ---- Stone theme: physical glossy go stones on a wooden board -------------------------------------------------------
   blocks = stones in the track colour; instrument buttons = white stones with the drawing printed in the track colour;
   part numbers / speaker = black stones; empty slots = shallow dimples */
.segs { grid-template-columns: repeat(5, 1fr); }
.segs .bs-stone { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0%, #ececf0 40%, #b4b5bd 100%);
	box-shadow: 0 3px 5px rgba(0, 0, 0, .35); }
html[data-bg=wood] body::before { background-image: url(../img/bg/wood.jpg?v=3); }
html[data-bg=wood] { background: #906a3c; }
.segs .bgp-wood { background-image: url(../img/bg/thumb/wood.jpg?v=1); }
.st-stone .blk, .st-stone .seq .tbtn, .st-stone .pbtn, .st-stone .seq .corner, .st-stone .seq .plus { border-radius: 50%; border: 0; overflow: visible; }
/* empty slot: a shallow dimple in the board */
.st-stone .blk { background: radial-gradient(circle at 50% 60%, rgba(0, 0, 0, .06), rgba(0, 0, 0, .16) 70%, rgba(0, 0, 0, .05) 100%);
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .12); }
/* a stone: convex shading, rim darkening, a soft contact shadow; the shine is ::after */

.st-stone .blk.on::after, .st-stone .seq .tbtn::after, .st-stone .pbtn::after, .st-stone .seq .corner::after {
	content: ""; position: absolute; left: 20%; top: 11%; width: 36%; height: 22%; border-radius: 50%; pointer-events: none;
	background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%); transform: rotate(-24deg); }
.st-stone .blk.on.muted { opacity: .75;}
.st-stone .blk.on.vari .dot { display: block; background: rgba(255, 255, 255, .7); border-radius: 50%; width: 6px; height: 6px; margin-right: -3px;}
/* white stones: the instrument buttons, drawing printed in the track colour */
.st-stone .seq .tbtn { background: radial-gradient(circle at 36% 30%, #ffffff 0%, #eeeef2 42%, #b3b4bc 100%);
	box-shadow: 0 4px 6px rgba(0, 0, 0, .38), 0 1px 1px rgba(0, 0, 0, .3), inset 0 -3px 6px rgba(0, 0, 0, .12); }
.st-stone .seq .tbtn .g { background: var(--tc); -webkit-mask: var(--glyph) center / 74% no-repeat; mask: var(--glyph) center / 74% no-repeat;
	filter: saturate(1.3) brightness(.8); }
.st-stone .seq .tbtn.muted { filter: saturate(.2); opacity: .6; }
/* black stones: part numbers, speaker */
.st-stone .pbtn, .st-stone .seq .corner { background: radial-gradient(circle at 36% 30%, #62626c 0%, #22222a 42%, #060608 100%);
	box-shadow: 0 4px 6px rgba(0, 0, 0, .45), 0 1px 1px rgba(0, 0, 0, .3); }
.st-stone .pbtn::after, .st-stone .seq .corner::after { background: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 70%); }
.st-stone .pbtn .n { color: #f2f2f6; text-shadow: none; }
.st-stone .pbtn .c { color: rgba(255, 255, 255, .22); font-size: 9px; }
.st-stone .seq .corner { color: rgba(235, 235, 245, .9); }
/* +: a dimple with a pale + */
.st-stone .seq .plus { background: rgba(0, 0, 0, .12); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3); color: rgba(255, 240, 220, .6); }
#studio.st-stone .seq .corner { border-radius: 50%; }   /* beats the other themes' corner rule */
/* Stone: the colour stones shaded like real polished stones — a crisp specular spot and a faint wide sheen, the colour
   deepening to the rim, a little light passing through at the bottom, a contact shadow away from the light */
.st-stone .blk.on { --c: color-mix(in srgb, var(--tc) 88%, #7a7a82);
	box-shadow: 2px 5px 6px rgba(0, 0, 0, .45), 1px 2px 2px rgba(0, 0, 0, .35), inset -2px -3px 5px rgba(0, 0, 0, .28), inset 1px 1px 2px rgba(255, 255, 255, .18);}
.st-stone .blk.on::after { display: none; }   /* the shine is part of the stone now */
/* Stone: no two stones alike — each has its own shade (--sh hue, --sb brightness), shine position (--sx/--sy) and a
   natural grain at its own offset (--gx/--gy); set per block in main.js */
.st-stone .blk.on {
	background:
		radial-gradient(ellipse var(--rw, 13%) var(--rh, 10%) at var(--sx, 33%) var(--sy, 25%), rgba(255, 255, 255, var(--ra, .95)) 0, rgba(255, 255, 255, calc(var(--ra, .95) - .08)) 28%, rgba(255, 255, 255, .3) 55%, rgba(255, 255, 255, 0) 100%),
		radial-gradient(ellipse 70% 45% at calc(var(--sx, 33%) + 7%) calc(var(--sy, 25%) - 3%), rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 70%),
		url(../img/block/stone-grain.png?v=2) var(--gx, 0) var(--gy, 0) / 256px 256px,
		radial-gradient(ellipse 55% 28% at 62% 90%, color-mix(in srgb, var(--c) 72%, #fff 28%), rgba(255, 255, 255, 0) 75%),
		radial-gradient(circle at 42% 36%, color-mix(in srgb, var(--c) 80%, #fff) 0%, var(--c) 38%, color-mix(in srgb, var(--c) 60%, #000) 78%, color-mix(in srgb, var(--c) 35%, #000) 100%);
	filter: hue-rotate(var(--sh, 0deg)) brightness(var(--sb, 1)); }
.st-stone .blk.on.muted { filter: saturate(.2) brightness(.8); }
.st-stone .blk.on.vari .dot { right: 9%; bottom: auto; top: 50%; margin: -3px 0 0; }   /* variation mark at 3 o'clock */

/* ---- 10 more backgrounds ---- */
html[data-bg=retro] body::before { background-image: url(../img/bg/retro.jpg?v=2); }
html[data-bg=retro] { background: #0e0922; }
.segs .bgp-retro { background-image: url(../img/bg/thumb/retro.jpg?v=1); }
html[data-bg=kraft] body::before { background-image: url(../img/bg/kraft.jpg?v=2); }
html[data-bg=kraft] { background: #553f28; }
.segs .bgp-kraft { background-image: url(../img/bg/thumb/kraft.jpg?v=1); }
html[data-bg=carbon] body::before { background-image: url(../img/bg/carbon.jpg?v=2); }
html[data-bg=carbon] { background: #383c43; }
.segs .bgp-carbon { background-image: url(../img/bg/thumb/carbon.jpg?v=1); }
html[data-bg=candy] body::before { background-image: url(../img/bg/candy.jpg?v=2); }
html[data-bg=candy] { background: #684e69; }
.segs .bgp-candy { background-image: url(../img/bg/thumb/candy.jpg?v=1); }
html[data-bg=chalkboard] body::before { background-image: url(../img/bg/chalkboard.jpg?v=2); }
html[data-bg=chalkboard] { background: #1d2b25; }
.segs .bgp-chalkboard { background-image: url(../img/bg/thumb/chalkboard.jpg?v=1); }
html[data-bg=ocean] body::before { background-image: url(../img/bg/ocean.jpg?v=2); }
html[data-bg=ocean] { background: #144d72; }
.segs .bgp-ocean { background-image: url(../img/bg/thumb/ocean.jpg?v=1); }
html[data-bg=galaxy] body::before { background-image: url(../img/bg/galaxy.jpg?v=4); }
html[data-bg=galaxy] { background: #0b0b18; }
.segs .bgp-galaxy { background-image: url(../img/bg/thumb/galaxy.jpg?v=1); }
html[data-bg=city] body::before { background-image: url(../img/bg/city.jpg?v=4); }
html[data-bg=city] { background: #0e0b17; }
.segs .bgp-city { background-image: url(../img/bg/thumb/city.jpg?v=2); }
html[data-bg=forest] body::before { background-image: url(../img/bg/forest.jpg?v=2); }
html[data-bg=forest] { background: #485c53; }
.segs .bgp-forest { background-image: url(../img/bg/thumb/forest.jpg?v=1); }
html[data-bg=marble] body::before { background-image: url(../img/bg/marble.jpg?v=2); }
html[data-bg=marble] { background: #18171c; }
.segs .bgp-marble { background-image: url(../img/bg/thumb/marble.jpg?v=1); }

/* ---- 5 more themes ------------------------------------------------------------------------------------------------ */
.st-pixel .blk.on.muted, .st-paper .blk.on.muted, .st-metal .blk.on.muted, .st-jelly .blk.on.muted, .st-chalk .blk.on.muted { filter: saturate(.2) brightness(.75); }

/* Pixel: 8-bit tiles with hard bevels */
.segs .bs-pixel { border-radius: 0; background: #2d9a72; box-shadow: inset 4px 4px 0 #7fd8b6, inset -4px -4px 0 #1a5c44; }
#studio.st-pixel .blk, #studio.st-pixel .seq .tbtn, #studio.st-pixel .pbtn, #studio.st-pixel .seq .corner, #studio.st-pixel .seq .plus { border-radius: 0; border: 0; }
.st-pixel .blk { background: #16161f; box-shadow: inset 0 0 0 2px #22222e; }
.st-pixel .blk.on, .st-pixel .seq .tbtn { background: var(--tc);
	box-shadow: inset 4px 4px 0 color-mix(in srgb, var(--tc) 55%, #fff), inset -4px -4px 0 color-mix(in srgb, var(--tc) 55%, #000), 0 0 0 2px #0a0a10; }
.st-pixel .blk.on::after { content: ""; position: absolute; left: 8px; top: 8px; width: 6px; height: 6px; background: rgba(255, 255, 255, .7); }
.st-pixel .seq .tbtn { background: color-mix(in srgb, var(--tc) 55%, #101018); }
.st-pixel .pbtn, .st-pixel .seq .corner { background: #3a3a4e; box-shadow: inset 4px 4px 0 #5c5c76, inset -4px -4px 0 #24243a, 0 0 0 2px #0a0a10; }
.st-pixel .seq .plus { background: transparent; box-shadow: inset 0 0 0 2px #3a3a50; color: #6a6a8a; }
.st-pixel .pbtn .n { text-shadow: 2px 2px 0 #000; }

/* Paper: matte coloured cards with a folded corner and paper grain */
.segs .bs-paper { border-radius: 3px; background: linear-gradient(135deg, #f08a5d, #e27447); box-shadow: 0 2px 3px rgba(0, 0, 0, .35); }
#studio.st-paper .blk, #studio.st-paper .seq .tbtn, #studio.st-paper .pbtn, #studio.st-paper .seq .corner, #studio.st-paper .seq .plus { border-radius: 3px; border: 0; }
.st-paper .blk { background: rgba(255, 245, 225, .05); box-shadow: inset 0 0 0 1px rgba(255, 245, 225, .12); }
.st-paper .blk.on { background: url(../img/block/paper-grain.png?v=1) 0 0 / 128px, linear-gradient(135deg, color-mix(in srgb, var(--tc) 82%, #fff 18%), color-mix(in srgb, var(--tc) 88%, #3a2a1a));
	box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .28); }
.st-paper .blk.on::after, .st-paper .seq .tbtn::after { content: ""; position: absolute; right: 0; top: 0; width: 13px; height: 13px; pointer-events: none;
	background: linear-gradient(225deg, rgba(0, 0, 0, .35) 0 50%, rgba(255, 255, 255, .45) 50% 100%); box-shadow: -1px 1px 2px rgba(0, 0, 0, .25); }
.st-paper .seq .tbtn { background: url(../img/block/paper-grain.png?v=1) 0 0 / 128px, #f3ecdf; box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .28); }
.st-paper .seq .tbtn .g { background: var(--tc); -webkit-mask: var(--glyph) center / 100% no-repeat; mask: var(--glyph) center / 100% no-repeat; filter: brightness(.8) saturate(1.2); }
.st-paper .pbtn, .st-paper .seq .corner { background: url(../img/block/paper-grain.png?v=1) 0 0 / 128px, #cfb28a; box-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 4px 8px rgba(0, 0, 0, .25); }
.st-paper .pbtn .n { color: #3b2a1a; text-shadow: none; }
.st-paper .pbtn .c { color: rgba(59, 42, 26, .35); }
.st-paper .seq .corner { color: #3b2a1a; }
.st-paper .seq .plus { background: transparent; box-shadow: none; outline: 1.5px dashed rgba(255, 245, 225, .35); outline-offset: -3px; color: rgba(255, 245, 225, .6); }

/* Metal: anodised brushed-metal pads */
.bs-metal { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, rgba(0, 0, 0, .06) 1px 2px), linear-gradient(180deg, #7fd8b6, #2d9a72 55%, #1a5c44);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 3px rgba(0, 0, 0, .4); }
.st-metal .blk { background: linear-gradient(180deg, #111216, #1b1d22); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .05); }
.st-metal .blk.on, .st-metal .seq .tbtn {
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .05) 1px 2px),
		linear-gradient(180deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .15) 100%),
		linear-gradient(180deg, color-mix(in srgb, var(--tc) 75%, #fff) 0%, var(--tc) 50%, color-mix(in srgb, var(--tc) 60%, #000) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .4), 0 2px 3px rgba(0, 0, 0, .5); }
.st-metal .seq .tbtn { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, rgba(0, 0, 0, .05) 1px 2px),
	linear-gradient(180deg, #e3e6ec 0%, #b7bcc5 50%, #8a909b 100%); }
.st-metal .seq .tbtn .g { background: color-mix(in srgb, var(--tc) 70%, #000); -webkit-mask: var(--glyph) center / 100% no-repeat; mask: var(--glyph) center / 100% no-repeat;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .5)); }
.st-metal .pbtn, .st-metal .seq .corner { border: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, rgba(0, 0, 0, .05) 1px 2px), linear-gradient(180deg, #4a4e57, #2b2e35 55%, #1c1e23);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 3px rgba(0, 0, 0, .5); }
.st-metal .seq .plus { background: linear-gradient(180deg, #111216, #1b1d22); border: 0; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6); color: #6b707a; }

/* Jelly: soft translucent gummy squares */
.segs .bs-jelly { border-radius: 12px; background: linear-gradient(180deg, #7fe0bb, #2d9a72); box-shadow: inset 0 -4px 6px #1a6a4e, inset 0 3px 5px rgba(255, 255, 255, .6), 0 3px 8px rgba(45, 154, 114, .5); }
#studio.st-jelly .blk, #studio.st-jelly .seq .tbtn, #studio.st-jelly .pbtn, #studio.st-jelly .seq .corner, #studio.st-jelly .seq .plus { border-radius: 16px; border: 0; }
.st-jelly .blk { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.st-jelly .blk.on, .st-jelly .seq .tbtn {
	background: radial-gradient(ellipse 70% 40% at 50% 105%, color-mix(in srgb, var(--tc) 55%, #fff) 0%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg, color-mix(in srgb, var(--tc) 72%, #fff) 0%, color-mix(in srgb, var(--tc) 85%, transparent) 60%, color-mix(in srgb, var(--tc) 80%, #000 20%) 100%);
	box-shadow: inset 0 -5px 9px color-mix(in srgb, var(--tc) 55%, #000), inset 0 3px 6px rgba(255, 255, 255, .55), 0 5px 12px color-mix(in srgb, var(--tc) 40%, transparent); }
.st-jelly .blk.on::after, .st-jelly .seq .tbtn::after { content: ""; position: absolute; left: 18%; right: 18%; top: 7%; height: 26%; border-radius: 50%; pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)); }
.st-jelly .pbtn, .st-jelly .seq .corner { background: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(200, 190, 230, .16)); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .18), inset 0 3px 6px rgba(255, 255, 255, .35); }
.st-jelly .seq .plus { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .15); color: rgba(255, 255, 255, .6); }

/* Chalk: chalk-drawn blocks on a slate */
.segs .bs-chalk { background: url(../img/block/chalk-dust.png?v=1) 0 0 / 128px, #4a6a5c; box-shadow: inset 0 0 0 2px #cfe8dc; border-radius: 6px; }
#studio.st-chalk .blk, #studio.st-chalk .seq .tbtn, #studio.st-chalk .pbtn, #studio.st-chalk .seq .corner, #studio.st-chalk .seq .plus { border-radius: 7px; border: 0; }
.st-chalk .blk { background: transparent; box-shadow: inset 0 0 0 1px rgba(230, 240, 235, .1); }
.st-chalk .blk.on { background: url(../img/block/chalk-dust.png?v=1) var(--gx, 0) var(--gy, 0) / 160px, color-mix(in srgb, var(--tc) 55%, rgba(240, 240, 240, .25));
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 45%, #fff); }
.st-chalk .seq .tbtn { background: url(../img/block/chalk-dust.png?v=1) 0 0 / 160px, transparent; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tc) 45%, #fff); }
.st-chalk .seq .tbtn .g { background: color-mix(in srgb, var(--tc) 45%, #fff); -webkit-mask: var(--glyph) center / 100% no-repeat; mask: var(--glyph) center / 100% no-repeat; opacity: .9; }
.st-chalk .pbtn, .st-chalk .seq .corner { background: url(../img/block/chalk-dust.png?v=1) 0 0 / 160px, transparent; box-shadow: inset 0 0 0 2px rgba(235, 240, 238, .75); }
.st-chalk .pbtn .n { font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", var(--font); color: #eef3f0; text-shadow: 0 0 2px rgba(255, 255, 255, .4); }
.st-chalk .seq .plus { background: transparent; box-shadow: none; outline: 1.5px dashed rgba(235, 240, 238, .4); outline-offset: -3px; color: rgba(235, 240, 238, .6); }
/* (these beat the shared "white numbers" rule) */
#studio.st-paper .pbtn .n { color: #3b2a1a; text-shadow: none; }
#studio.st-paper .pbtn .c { color: rgba(59, 42, 26, .38); }
#studio.st-paper .seq .corner { color: #3b2a1a; }
#studio.st-chalk .pbtn .n { font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", var(--font); color: #eef3f0; text-shadow: 0 0 2px rgba(255, 255, 255, .4); }

/* ---- Crystal: the Glass theme with more solid, fully saturated colour (rim, sheen and shadow from Glass) ---- */
.bs-crystal { background: linear-gradient(to bottom, #4fd6a4, #1f8a62); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 6px rgba(0, 0, 0, .35); }

.st-crystal .blk.on::after, .st-crystal .seq .tbtn::after { background: radial-gradient(130% 60% at 50% -8%, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 60%); }
/* Crystal, see-through like the bottom menu: the saturated colour is translucent over a blurred, colour-boosted
   backdrop. The backdrop is a PRE-BLURRED copy of the background (owner 2026-10-05): main.js ("Crystal glass") blurs the
   background once (blur 14px, saturate 180% — the backdrop-filter this replaces) into --glass, and each lit block and
   track button shows it as its lowest layer exactly where the real background lies behind it: --gpx/--gpy the element's
   place (measured when the grid's layout changes), --gsx/--gsy the grid's scroll (one variable per scroller), --gmx/--gmy a
   drag in progress, --gw/--gh the background's own box. No live backdrop blur any more, for everyone: 100+ blurred layers
   made the pointer stutter on an iPad Pro with a mouse (every move re-rendered each one). */
.st-crystal .blk.on, .st-crystal .seq .tbtn {
	box-shadow: 0 4px 10px rgba(0, 0, 0, .25), inset 0 -6px 12px color-mix(in srgb, var(--tc) 35%, transparent), inset 0 0 0 .5px rgba(255, 255, 255, .12); }
/* (#studio: these beat Glass's own block / muted backgrounds, which are shorthands) */
#studio.st-crystal .blk.on, #studio.st-crystal .seq .tbtn {
	background-color: transparent; background-repeat: no-repeat; background-origin: border-box; background-clip: border-box;
	background-position: 0 0, calc(var(--gsx, 0px) - var(--gpx, 0px) - var(--gmx, 0px)) calc(var(--gsy, 0px) - var(--gpy, 0px) - var(--gmy, 0px));
	background-size: 100% 100%, var(--gw, 100vw) var(--gh, 100vh); }
#studio.st-crystal .blk.on {
	background-image: linear-gradient(to bottom, color-mix(in srgb, var(--tc) 62%, rgba(255, 255, 255, .12)) 0%, color-mix(in srgb, var(--tc) 48%, transparent) 55%, color-mix(in srgb, var(--tc) 40%, rgba(0, 0, 0, .12)) 100%), var(--glass, none); }
#studio.st-crystal .seq .tbtn {
	background-image: linear-gradient(to bottom, color-mix(in srgb, var(--tc) 50%, rgba(0, 0, 0, .1)) 0%, color-mix(in srgb, var(--tc) 38%, rgba(0, 0, 0, .25)) 100%), var(--glass, none); }
#studio.st-crystal .blk.on.muted { background-image: linear-gradient(to bottom, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)), var(--glass, none); }   /* muted: Glass's clear tint */
/* (a half-muted block's silent half: its own small backdrop blur goes too — behind its 80% dark cover the block is already
   frosted; it was the last live blur inside the grid) */
#studio.st-crystal .blk .half { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---- liquid-glass windows (Saved Songs, Discovery; UI.sheet({glass: true})) ----------------------------------------
   the page shows through, blurred and colour-boosted, under a dark tint; a bright rim along the top edge fading down
   the sides; a soft sheen across the top */
.sheet.lg { background: linear-gradient(180deg, rgba(38, 38, 56, .5) 0%, rgba(18, 18, 28, .62) 60%, rgba(12, 12, 20, .7) 100%);
	-webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
	box-shadow: 0 -4px 30px rgba(0, 0, 0, .45), inset 0 0 0 .5px rgba(255, 255, 255, .08); isolation: isolate; }
.sheet.lg::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 3;
	background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .14) 12%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .1) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sheet.lg::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; pointer-events: none; z-index: -1; border-radius: inherit;
	background: radial-gradient(120% 100% at 50% -30%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%); }
.scrim:has(+ .sheet.lg) { background: rgba(0, 0, 0, .28); }   /* a lighter dim: the glass does the separating */
/* phones with room: a window starts at the middle of the logo (the lower half is covered, the upper half still shows
   the main screen behind); short screens keep the higher start */
@media (max-width: 739px) and (min-height: 600px) { .sheet { top: calc(var(--safe-t) + 43px); } }
/* ---- glass rows, cards and the buy-slot button inside the liquid-glass windows ------------------------------------
   a light glass tint with a level top-lit rim; text kept bright with a soft shadow so it reads over anything */
.sheet.lg .slot, .sheet.lg .srow, .sheet.lg .card, .sheet.lg .buyslot { position: relative; isolation: isolate; }
.sheet.lg .slot, .sheet.lg .srow, .sheet.lg .card {
	background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04));
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.sheet.lg .srow { margin-bottom: 8px;}
.sheet.lg .slot::before, .sheet.lg .srow::before, .sheet.lg .card::before, .sheet.lg .buyslot::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
	background: linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, .05) 65%, rgba(255, 255, 255, .14) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sheet.lg .slot.empty-slot { box-shadow: none;}
.sheet.lg .slot.empty-slot::before { opacity: .45; }
.sheet.lg .slot.sel { background: linear-gradient(180deg, rgba(41, 182, 246, .34), rgba(41, 182, 246, .16)); box-shadow: 0 4px 12px rgba(0, 0, 0, .2); }
.sheet.lg .slot.sel::before { background: linear-gradient(180deg, rgba(160, 225, 255, .9), rgba(41, 182, 246, .5) 40%, rgba(41, 182, 246, .35)); }
/* text: bright, with a soft shadow */
.sheet.lg .slot .info b, .sheet.lg .srow .si b, .sheet.lg .sech b, .sheet.lg h2 { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.sheet.lg .slot .info small, .sheet.lg .srow .si small, .sheet.lg .slot .info em { color: rgba(235, 235, 245, .75); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.sheet.lg .slot.sel .info small { color: #bfe9ff; }
.sheet.lg .srow .rk { color: rgba(235, 235, 245, .7); }
.sheet.lg .srow .rk.top { color: var(--gold); }
.sheet.lg .srow .like, .sheet.lg .slot .more, .sheet.lg .slot .plusc, .sheet.lg .sech .more { color: rgba(235, 235, 245, .7); }
.sheet.lg .srow .like.on { color: var(--accent); }
.sheet.lg .slot .badge { background: rgba(41, 182, 246, .2); color: #8fd8ff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.sheet.lg .slot.sel .badge { background: var(--accent); color: #0d0d14; }
.sheet.lg .slot.empty-slot .badge { background: rgba(255, 255, 255, .06); color: rgba(235, 235, 245, .45); }
/* the buy-slot button: blue glass */
.sheet.lg .buyslot {
	color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);}

.sheet.lg .buyslot::after { content: ""; position: absolute; inset: 1px; border-radius: inherit; pointer-events: none; z-index: -1;
	background: radial-gradient(120% 70% at 50% -20%, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 60%); }
/* the buy-slot button keeps its own placement (pinned at the bottom, 16px from each side) */
.sheet.lg .buyslot { position: absolute; }
/* saved-song rows: darker glass */
.sheet.lg .slot { background: linear-gradient(180deg, rgba(20, 20, 32, .55), rgba(8, 8, 16, .62)); }
.sheet.lg .slot.empty-slot { background: rgba(10, 10, 18, .3); }

/* the long-press / … menu as a glass popover next to its row */
.scrim.clear { background: transparent; animation: none; }
.asheet.pop { left: 0; top: 0; bottom: auto; transform: none; width: 230px; gap: 0; border-radius: 14px; overflow: hidden;
	background: linear-gradient(180deg, rgba(44, 44, 62, .72), rgba(24, 24, 36, .8)); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .5), inset 0 0 0 .5px rgba(255, 255, 255, .15), inset 0 1px 0 rgba(255, 255, 255, .25); animation: pop-in .18s cubic-bezier(.2, .9, .3, 1); }
@keyframes pop-in { from { opacity: 0; transform: scale(.9); } }
.asheet.pop .as-t, .asheet.pop .as-l { background: transparent; border-radius: 0; margin: 0; }
.asheet.pop .as-t { padding: 10px 14px 8px; font-size: 12px; text-align: left;}
.asheet.pop .as-i { padding: 12px 14px; font-size: 15px; }
.asheet.pop .as-i svg { font-size: 16px; }
/* the buy-slot button: the same glass as the selected slot */
.sheet.lg .buyslot { background: linear-gradient(180deg, rgba(41, 182, 246, .34), rgba(41, 182, 246, .16));
	-webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.sheet.lg .buyslot::before { background: linear-gradient(180deg, rgba(160, 225, 255, .9), rgba(41, 182, 246, .5) 40%, rgba(41, 182, 246, .35)); }
.sheet.lg .buyslot::after { display: none; }
/* window header buttons (✕ ? ↑ …): 44px liquid-glass circles with a 17px icon (the iOS toolbar size) */
.sheet .sh-head .circle-ic { width: 44px; height: 44px; font-size: 17px; }   /* (their glass: the window kit, at the end) */
.sheet .sh-head .circle-ic::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .16) 30%, rgba(255, 255, 255, .06) 65%, rgba(255, 255, 255, .2) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sheet .sh-head .circle-ic:active { transform: scale(.92); }
/* glass windows: the header (grab, title, buttons) floats over the list, which uses the whole window and scrolls up
   under it; a soft dark fade behind the header keeps the title readable */
.sheet.lg .grab { position: absolute; left: 50%; top: 0; margin-left: -18px; z-index: 6; }
.sheet.lg .sh-head { position: absolute; left: 0; right: 0; top: 0; z-index: 5; padding-top: 17px;}
.sheet.lg .sh-head > * { pointer-events: auto; }
.sheet.lg .sh-body { padding-top: 76px; }
.sheet.lg .slots { padding-top: 4px; }
/* content sliding under the header is softly blurred, fading out downward (the iOS scroll-edge effect) */
/* (content sliding under a window's header is blurred: the window kit, at the end) */
.sheet.lg .sh-head { isolation: isolate; }
.sheet.lg .sh-head { background: none; }   /* no dark band: only the scroll-edge blur */
/* the bottom scroll-edge blur (mirror of the header's): content softly blurs as it scrolls under the window's bottom */
.sheet.lg .edge-b { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; border-radius: inherit;
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);}
.sheet.lg .buyslot { z-index: 7; }
/* the PUBLISH button: a glowing blue-glass pill with a shine sweeping across every few seconds; narrow screens keep
   the up-arrow circle */
.sheet .sh-head .circle-ic.pubbtn { width: auto; padding: 0 16px 0 13px; gap: 6px; border-radius: 22px; overflow: hidden;
	color: #fff; font: 700 13px/1 var(--font); letter-spacing: 1px; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	background: linear-gradient(180deg, rgba(41, 182, 246, .55), rgba(10, 132, 255, .4));
	animation: pub-glow 3.2s ease-in-out infinite; }
.sheet .sh-head .circle-ic.pubbtn svg { font-size: 15px; }
/* the shine sweeping across Publish, Change Track's Variation and a changed ✓ (window kit) */
.sheet .sh-head .circle-ic.pubbtn::after, .trackwin .trow .tvar::after, .trackwin .trow .pbuy::after, .circle-ic.done.dirty::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, var(--gk-shine, .55)), rgba(255, 255, 255, 0)); transform: skewX(-18deg);
	animation: pub-shine 3.2s ease-in-out infinite; }
.trackwin .trow .tvar::after { --gk-shine: .5; }
@keyframes pub-shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@keyframes pub-glow { 0%, 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, .3), 0 0 0 0 rgba(41, 182, 246, 0); }
	50% { box-shadow: 0 6px 16px rgba(0, 0, 0, .3), 0 0 16px 2px rgba(41, 182, 246, .55); } }
@media (max-width: 359px) {
	.sheet .sh-head .circle-ic.pubbtn svg { display: block !important; }
	.sheet .sh-head .circle-ic.pubbtn { width: 44px; padding: 0; border-radius: 50%; }
	.sheet .sh-head .circle-ic.pubbtn span { display: none; }
	.sheet .sh-head .circle-ic.pubbtn svg { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .sheet .sh-head .circle-ic.pubbtn, .sheet .sh-head .circle-ic.pubbtn::after { animation: none; } }
/* with the PUBLISH pill the title takes all the space between the button groups (not a symmetric column) */
.sheet .sh-head:has(.pubbtn) { grid-template-columns: auto 1fr auto; }
@media (max-width: 479px) {
	.sheet .sh-head:has(.pubbtn) h2 { font-size: 18px; }
	.sheet .sh-head .circle-ic.pubbtn:not(:only-child) svg { display: none; }   /* phones: just the word */
	.sheet .sh-head .circle-ic.pubbtn { padding: 0 14px; }
}
@media (min-width: 560px) { .sheet .sh-head:has(.pubbtn) { grid-template-columns: 1fr auto 1fr; } }   /* room enough: the title centred in the window */
.sheet.lg .buyslot { padding-top: 0; padding-bottom: 0;}   /* the same height as a slot */
/* the top area is a swipe-down-to-close handle */
.sheet .sh-head, .sheet .grab { touch-action: none; }
.sheet.lg .sh-head { pointer-events: auto; }
/* saved songs: the number cell lit (like the selected slot's); empty slot: faded capitals and a hint */
.sheet.lg .slot[data-i] .badge { background: var(--accent); color: #0d0d14; box-shadow: 0 0 10px rgba(41, 182, 246, .45), inset 0 1px 0 rgba(255, 255, 255, .35); }
.sheet.lg .slot.empty-slot .info em { font: 600 13px var(--font); letter-spacing: 1.2px; color: rgba(235, 235, 245, .38); text-shadow: none; }
.sheet.lg .slot.empty-slot .info small { color: rgba(235, 235, 245, .3); text-shadow: none; }
.sheet.lg .slot.empty-slot .plusc { color: rgba(235, 235, 245, .35); }
@media (max-width: 359px) { .sheet .sh-head:has(.pubbtn) h2 { font-size: 16px; } }   /* very narrow: the capitals still fit */

/* a window opened over another one, sized to its content (never full height: the window underneath stays in view) */
.sheet.fit { top: auto; }   /* height set from its content (mypage.js fitHeight) */

/* stacked windows: the one underneath shrinks back and dims */
.sheet { transition: transform .35s cubic-bezier(.32, .72, 0, 1), filter .35s; transform-origin: 50% 0; }
.sheet.behind { transform: translateX(-50%) scale(.93); }
.sheet > .behind-dim { position: absolute; inset: 0; z-index: 20; border-radius: inherit; background: rgba(0, 0, 0, .4); pointer-events: none; animation: fade .2s; }   /* (the dimming: a layer, not filter: brightness) */
/* the Store has its own colour: a warm gold glow from the top */
.sheet.store { background: radial-gradient(120% 260px at 50% 0, rgba(255, 209, 102, .2), rgba(255, 209, 102, 0) 100%), var(--s2); }
.sheet.store .sh-head h2 { color: #FFD98A; }
.store .scats { overflow-x: auto; scrollbar-width: none; }
.store .scats::-webkit-scrollbar { display: none; }
.store .scats button { flex: none; }
a.prod.mc { text-decoration: none; color: inherit; }
.sheet.store .scats { background: rgba(30, 28, 38, .9); border-bottom-color: rgba(255, 255, 255, .06); }

/* ---- the Store as a liquid-glass window, with its gold glow ---- */
.sheet.lg.store { background: radial-gradient(120% 260px at 50% 0, rgba(255, 209, 102, .2), rgba(255, 209, 102, 0) 100%),
	linear-gradient(180deg, rgba(38, 38, 56, .5) 0%, rgba(18, 18, 28, .62) 60%, rgba(12, 12, 20, .7) 100%); }
.sheet.lg.store .scats { top: 0; border-bottom: 0;}
.sheet.lg.store .bals .b, .sheet.lg.store .prod { position: relative; isolation: isolate; }
.sheet.lg.store .prod { background: linear-gradient(180deg, rgba(20, 20, 32, .55), rgba(8, 8, 16, .62)); box-shadow: 0 4px 12px rgba(0, 0, 0, .18); }
.sheet.lg.store .bals .note { background: linear-gradient(180deg, rgba(255, 209, 102, .16), rgba(255, 209, 102, .06)); box-shadow: none; }
.sheet.lg.store .bals .cash { background: linear-gradient(180deg, rgba(6, 214, 160, .16), rgba(6, 214, 160, .06)); box-shadow: none; }
.sheet.lg.store .prod::before, .sheet.lg.store .bals .b::before {
	content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 1;
	background: linear-gradient(180deg, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, .12) 30%, rgba(255, 255, 255, .05) 65%, rgba(255, 255, 255, .14) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sheet.lg.store .prod b { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.sheet.lg.store .prod small, .sheet.lg.store .bals small { color: rgba(235, 235, 245, .7); }
.sheet.lg.store .scats button:not(.on) { color: rgba(235, 235, 245, .8); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .15);}

 .sheet.lg.store .scats button:not(.on) { background: #2b2a38; }
/* a shorter bottom blur (it softened the prices on the cards), and room after the last item to scroll clear of it */

.sheet.lg .sh-body { padding-bottom: calc(16px + var(--safe-b)); }
.sheet.lg.store .pgrid2 { padding-bottom: 0; }   /* the space under the last cards = the 16px side margin */
.sheet.lg .edge-b { height: 60px; -webkit-mask: linear-gradient(0deg, #000 20%, transparent 100%); mask: linear-gradient(0deg, #000 20%, transparent 100%); }
/* the page itself never scrolls (iOS handed a drag that a window couldn't use to the whole page, which then stayed
   shifted): body pinned, window lists keep their scrolling to themselves */
.sheet .sh-body { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.sheet .scats, .sheet.lg.store .scats { position: static; }   /* not sticky: a sticky element in a scrolling list of a blurred window stopped iOS finger scrolling */
.sheet.lg.store .scats { background: transparent; margin: 0; padding: 4px 0 0; }
/* a list that fits entirely is still scrollable by a hair: iOS gives its elastic bounce inside the window instead of
   handing the drag to the page */
.sheet .sh-body::after { content: ""; display: block;}
.sheet .sh-body::after { height: calc(2px + var(--fill, 0px)); }   /* see ui.js: every list scrollable (iOS bounce) */

/* ---- forms in glass windows (Publish …): glass inputs, chips and a blue-glass main button ---- */
.sheet.lg .form label { color: rgba(235, 235, 245, .65); }
.sheet.lg .form input, .sheet.lg .form textarea { background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), inset 0 1px 0 rgba(255, 255, 255, .06); }
.sheet.lg .form input:focus, .sheet.lg .form textarea:focus { box-shadow: inset 0 0 0 1px rgba(41, 182, 246, .7), 0 0 0 3px rgba(41, 182, 246, .18); }
.sheet.lg .chip2:not(.sel) { background: rgba(255, 255, 255, .08); color: rgba(235, 235, 245, .8); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .15); }
.sheet.lg .publish .cover { box-shadow: 0 8px 22px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.sheet.lg .publish .cover::after { box-shadow: 0 0 0 3px rgba(20, 20, 30, .9); }
.sheet.lg .form .primary.wide { position: relative; isolation: isolate; background: linear-gradient(180deg, rgba(41, 182, 246, .42), rgba(41, 182, 246, .2));
	-webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.sheet.lg .form .primary.wide::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
	background: linear-gradient(180deg, rgba(160, 225, 255, .9), rgba(41, 182, 246, .5) 40%, rgba(41, 182, 246, .35));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sheet.lg .form .primary.wide:disabled { opacity: .5; }
/* the terms window (after Publish): same glass, the terms box a darker glass well */
.sheet.lg .terms { padding: 4px 4px 16px; gap: 12px; }
.sheet.lg .terms h3 { font: 700 20px var(--font); letter-spacing: .5px; color: #fff; margin-top: 4px; }   /* same as the window title */
@media (max-width: 379px) { .sheet.lg .terms h3 { font-size: 16px; letter-spacing: 0; } }
@media (max-width: 339px) { .sheet.lg .terms h3 { font-size: 14.5px; } }
.terms ol.tbox { white-space: normal; margin: 0; padding: 14px 16px 14px 34px; display: flex; flex-direction: column; gap: 12px; }
.terms ol.tbox li { padding-left: 2px; }
.terms ol.tbox li::marker { font-weight: 700; color: rgba(235, 235, 245, .5); }
.terms ol.tbox b { display: block; margin-bottom: 2px; font: 700 13.5px var(--font); color: rgba(255, 255, 255, .95); }
.sheet.lg .terms .tbox { font-size: 13px; line-height: 1.55;}
.sheet.lg .terms .lead, .sheet.lg .terms small { color: rgba(235, 235, 245, .65); }
.sheet.lg .terms .tbox { background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .06); border-radius: 14px; color: rgba(235, 235, 245, .75); max-height: 34vh; }
.sheet.lg .terms .agree { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .92); text-align: left; }
.sheet.lg .terms .agree.on { background: rgba(41, 182, 246, .16); box-shadow: inset 0 0 0 1px rgba(41, 182, 246, .55); }
.sheet.lg .terms .agree svg { color: rgba(235, 235, 245, .45); flex: none; }
.sheet.lg .terms .agree.on svg { color: #29B6F6; }

/* Free Images (from Publish): glass tiles */
.sheet.lg .imggrid { gap: 10px; padding: 4px 2px 16px; }
.sheet.lg .imggrid button { position: relative; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: 0 4px 12px rgba(0, 0, 0, .3); transition: transform .15s; }
.sheet.lg .imggrid button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22); }
.sheet.lg .imggrid button:active { transform: scale(.94); }

/* ---- pinned bottom buttons (Buy Slot, Publish, Agree): one size, 46px, 14px corners ---- */
.sheet.lg .buyslot { height: 46px; border-radius: 14px; }
.sheet .footbtn { position: absolute; left: 16px; right: 16px; bottom: calc(12px + var(--safe-b)); width: auto; margin: 0; z-index: 7; }
.sheet.has-foot .sh-body { padding-bottom: calc(46px + 28px + var(--safe-b)); }
/* ---- window titles and action buttons in capitals, across the app ---- */
.sheet .sh-head h2, .primary, .buyslot, .footbtn, .alert-box .ab-b button, .asheet .as-c { text-transform: capitalize; letter-spacing: 0; }   /* Title Case: every word starts with a capital */
@media (max-width: 379px) { .sheet .sh-head h2 { font-size: 16px; letter-spacing: 0; } }   /* capitals are wider: narrow phones get a smaller title */
/* the pinned Publish button keeps the blue glass (it left the .form) — the same material as Buy Slot */
.sheet.lg .footbtn { isolation: isolate; background: linear-gradient(180deg, rgba(41, 182, 246, .34), rgba(41, 182, 246, .16));
	-webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); color: #fff; }
.sheet.lg .footbtn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
	background: linear-gradient(180deg, rgba(160, 225, 255, .9), rgba(41, 182, 246, .5) 40%, rgba(41, 182, 246, .35));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sheet.lg .footbtn:disabled { opacity: .5; }
@media (max-width: 339px) { .sheet .sh-head h2 { font-size: 14.5px; } }

/* ---- alerts and the publishing card: the same glass as the popovers ---- */
.alert-box, .pubov .card {
	background: linear-gradient(180deg, rgba(48, 48, 68, .72), rgba(24, 24, 36, .82)); -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
	border-radius: 20px; box-shadow: 0 20px 50px rgba(0, 0, 0, .55), inset 0 0 0 .5px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .28); }
.alert-box { width: min(290px, calc(100vw - 48px)); animation: alert-in .22s cubic-bezier(.2, .9, .3, 1); }
@keyframes alert-in { from { opacity: 0; transform: translate(-50%, -50%) scale(1.08); } }
.alert-box .ab-t { padding: 20px 18px 4px; color: #fff; }
.alert-box .ab-t:empty { padding-top: 12px; }
.alert-box .ab-m { padding: 4px 18px 18px; font-size: 14px; line-height: 1.45; color: rgba(235, 235, 245, .8); }
.alert-box .ab-b { border-top: .5px solid rgba(255, 255, 255, .16); }
.alert-box .ab-b button { height: 48px; color: #64D2FF; font-weight: 600; font-size: 16px; }
.alert-box .ab-b button + button { border-left: .5px solid rgba(255, 255, 255, .16); }
.alert-box .ab-b button:active { background: rgba(255, 255, 255, .08); }
.scrim:has(+ .alert-box) { background: rgba(0, 0, 0, .35); }
.pubov { background: rgba(0, 0, 0, .35); }
.pubov .card { padding: 26px 30px 22px; gap: 14px; animation: alert-in2 .22s cubic-bezier(.2, .9, .3, 1); }
@keyframes alert-in2 { from { opacity: 0; transform: scale(1.08); } }
.pubov .card b { font: 700 17px var(--font); color: #fff; }
.pubov .bar { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .1); }
.pubov .bar i { background: linear-gradient(90deg, #29B6F6, #64D2FF); }
.pubov small { font: 600 13px var(--font); color: rgba(235, 235, 245, .7); font-variant-numeric: tabular-nums; }
.pubov .pcancel { margin-top: 2px; min-width: 120px; height: 38px; padding: 0 18px; border-radius: 19px; font: 600 14px var(--font); letter-spacing: 0; text-transform: capitalize; color: rgba(255, 255, 255, .9);
	background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .18); transition: opacity .2s; }
.pubov .pcancel:active { background: rgba(255, 255, 255, .18); }
.pubov .pcancel:disabled { opacity: .35; }

/* notifications (+30 NOTE · 게시 보상, saved, …): a glass capsule sized to its text */
.toast { width: fit-content; max-width: min(480px, calc(100vw - 32px)); padding: 12px 20px; border-radius: 22px; color: #fff; font-size: 14px;
	background: linear-gradient(180deg, rgba(48, 48, 68, .72), rgba(24, 24, 36, .82)); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 0 0 .5px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .28); }
/* ...at the top of the app: slides down in, slides back up out */
.toast { top: calc(10px + var(--safe-t)); bottom: auto; animation: toast-down .38s cubic-bezier(.2, .9, .3, 1); transition: transform .36s cubic-bezier(.4, 0, .9, .5), opacity .16s ease-in .22s; }   /* slide first, fade at the very end */
@keyframes toast-down { from { transform: translateY(calc(-100% - 20px - var(--safe-t))); opacity: .4; } }
.toast.out { transform: translateY(calc(-100% - 20px - var(--safe-t))); opacity: 0; }

/* ---- every window is glass (UI.sheet default): the solid surfaces inside become translucent layers ---- */
.sheet.lg { --s1: rgba(255, 255, 255, .05); --s2: rgba(255, 255, 255, .08); --s3: rgba(255, 255, 255, .13); }
.sheet.lg .act { background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .1); }
.sheet.lg.admin .atabs { position: static; background: transparent; }   /* no solid strip on glass (sticky + blur upset iOS scrolling before) */
.popover { --s1: rgba(255, 255, 255, .05); --s2: rgba(255, 255, 255, .08); --s3: rgba(255, 255, 255, .13);
	background: linear-gradient(180deg, rgba(48, 48, 68, .74), rgba(24, 24, 36, .84)); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
	border-radius: 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, .5), inset 0 0 0 .5px rgba(255, 255, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .26); }
/* Song Detail (now playing, full screen): glass over the app, the genre colour washing in from the top */
.sdetail { --s1: rgba(255, 255, 255, .05); --s2: rgba(255, 255, 255, .08); --s3: rgba(255, 255, 255, .13);}

/* windows opened from Song Detail (Log in, …) come above it, not behind */
.scrim.over-detail { z-index: 106; }
.sheet.over-detail { z-index: 107; }

/* ---- comments (Song Detail) ---- */
.sd-body .cmts { width: 100%; padding-top: 14px;}
.cmts .ch { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.cmts .ch b { font: 700 17px var(--font); }
.cmts .ch small { font: 600 13px var(--font); color: var(--t3); }
.cmts .clogin { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 14px; color: rgba(255, 255, 255, .85); font: 600 14px var(--font);
	background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16); }
.cmts .crto { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font: 600 12px var(--font); color: #64D2FF; }
.cmts .crto button { font-size: 14px; color: var(--t2); padding: 4px; }
.cmts .cin { display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 20px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16); }
.cmts .cin:focus-within { box-shadow: inset 0 0 0 1px rgba(41, 182, 246, .7), 0 0 0 3px rgba(41, 182, 246, .15); }
.cmts textarea { flex: 1; min-height: 20px; max-height: 120px; padding: 7px 0; resize: none; border: 0; outline: 0; background: transparent; color: #fff; font: 15px/1.35 var(--font); }
.cmts .csend { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #29B6F6, #0A84FF); color: #fff; font-size: 15px; }
.cmts .csend:disabled { opacity: .35; }
.cmts .cn { display: block; min-height: 4px; margin: 4px 14px 0; text-align: right; font: 600 11px var(--font); color: var(--t3); }
.cmts .cn.over { color: var(--red); }
.cmts .cl { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.cmts .ci { display: flex; gap: 10px; }
.cmts .ci.rep { margin-left: 42px; }
.cmts .cav { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--s2); }
.cmts .ci.rep .cav { width: 26px; height: 26px; }
.cmts .cb { flex: 1; min-width: 0; }
.cmts .cm { display: flex; align-items: baseline; gap: 8px; }
.cmts .cm b { font: 600 13px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmts .cm small { flex: none; font-size: 11px; color: var(--t3); }
.cmts .cb p { margin: 3px 0 0; font-size: 14px; line-height: 1.45; color: rgba(235, 235, 245, .88); white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: text; user-select: text; }
.cmts .ci.hid p { color: var(--t3); font-style: italic; }
.cmts .ca { display: flex; gap: 14px; margin-top: 4px; }
.cmts .ca button { font: 600 12px var(--font); color: var(--t2); padding: 2px 0; }
.cmts .ca button.danger { color: var(--red); }
.cmts .cempty { margin: 6px 0; text-align: center; color: var(--t3); font-size: 13px; }
.cmts .cmore { width: 100%; margin-top: 14px; height: 40px; border-radius: 12px; font: 600 13px var(--font); color: #64D2FF; background: rgba(255, 255, 255, .05); }

/* ---- half off: the silent half of a block is shaded; while sliding, the half you slide toward is previewed ---- */
.blk .half { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 3; display: none; pointer-events: none;}
.blk.on.hl:not(.muted) .half { display: block; left: 0; }
.blk.on.hr:not(.muted) .half { display: block; right: 0; }
.blk.on.pl .half, .blk.on.pr .half { display: block; outline: 1px dashed rgba(255, 255, 255, .45); outline-offset: -3px;}
.blk.on.pl .half { left: 0; right: auto; }
.blk.on.pr .half { right: 0; left: auto; }

/* ---- own cover image: "Review" badge on the Publish cover; Admin > Cover Review grid ---- */
.publish .cover .rv { display: none; position: absolute; left: 8px; bottom: 8px; padding: 3px 7px; border-radius: 8px; font: 700 10px var(--font); letter-spacing: .5px; text-transform: uppercase;
	color: #fff; background: rgba(13, 13, 20, .6); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.publish .cover.own .rv { display: block; }
.acovers { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.acover { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14); min-width: 0; }
.acover img, .acover .ph { width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; background: rgba(0, 0, 0, .25); }
.acover .ph { display: flex; align-items: center; justify-content: center; font: 700 12px var(--font); text-transform: uppercase; color: var(--t3); }
.acover b { font: 600 13px var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acover small { font-size: 11px; color: var(--t3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acover .ab2 { display: flex; gap: 6px; margin-top: 4px; }
.acover .ab2 button { flex: 1; height: 32px; border-radius: 10px; font: 600 12px var(--font); }
.acover .ok { background: rgba(6, 214, 160, .2); color: #06D6A0; box-shadow: inset 0 0 0 .5px rgba(6, 214, 160, .5); }
.acover .no { background: rgba(255, 77, 109, .16); color: #FF4D6D; box-shadow: inset 0 0 0 .5px rgba(255, 77, 109, .45); }
.acover.done { opacity: .55; }
.acover.busy { opacity: .4; pointer-events: none; }

/* Settings > Language: a two-way switch */
.srow2.lang .lseg { margin-left: auto; display: flex; padding: 3px; border-radius: 12px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12); }
.srow2.lang .lseg button { padding: 6px 12px; border-radius: 9px; font: 600 13px var(--font); color: var(--t2); }
.srow2.lang .lseg button.on { color: #fff; background: rgba(41, 182, 246, .3); box-shadow: inset 0 0 0 .5px rgba(160, 225, 255, .6); }

/* Admin: every section button in view (they wrap onto more lines instead of a sideways scroll) */
.sheet.admin .atabs { flex-wrap: wrap; overflow: visible; }

/* ---- image editor (Your Image): the picture moves / zooms inside a square frame ---- */
.crop { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 2px 0 12px; }
.crop .lead { margin: 0; text-align: center; font-size: 13px; color: rgba(235, 235, 245, .65); }
.crop .cv { position: relative; width: min(100%, 360px, calc(100vh - 420px), calc(100dvh - 420px)); min-width: 180px; aspect-ratio: 1; overflow: hidden; border-radius: 18px; background: #000; touch-action: none; cursor: grab;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .45); -webkit-user-select: none; user-select: none; }
.crop .cv:active { cursor: grabbing; }
.crop .cv img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; pointer-events: none; -webkit-user-drag: none; }
.crop .cv .fr { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
	background: linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)) 33.33% 0 / 1px 100% no-repeat, linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)) 66.66% 0 / 1px 100% no-repeat,
		linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)) 0 33.33% / 100% 1px no-repeat, linear-gradient(rgba(255, 255, 255, .18), rgba(255, 255, 255, .18)) 0 66.66% / 100% 1px no-repeat; }
.crop .zr { display: flex; align-items: center; gap: 12px; width: min(100%, 360px); color: rgba(235, 235, 245, .7); font-size: 18px; }
.crop .zr svg { flex: none; cursor: pointer; padding: 4px; box-sizing: content-box; }
.crop .zr input { flex: 1; accent-color: #29B6F6; }

/* alert text: kept line breaks, red warnings, highlighted amounts */
.alert-box .ab-m { white-space: pre-line; }
.alert-box .ab-m .ab-red { color: #FF6B81; font-weight: 700; }
.alert-box .ab-m .ab-hl { color: #fff; font-weight: 700; background: rgba(41, 182, 246, .22); padding: 0 5px; border-radius: 6px; box-shadow: inset 0 0 0 .5px rgba(160, 225, 255, .5); }

/* a main button that is not ready yet (something essential missing): shown inactive, turns active when ready */
.primary.idle, .footbtn.idle, .tfbox button.idle { opacity: .45; filter: saturate(.6); box-shadow: none; }
.purch .pm button.short small em { font-style: normal; color: #FF6B81; font-weight: 600; }
.purch .pm button.short { opacity: .75; }
/* image editor: filter row (a thumbnail of the photo per filter) */
.crop .fl { display: flex; gap: 8px; width: min(100%, 420px); overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.crop .fl::-webkit-scrollbar { display: none; }
.crop .fl button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 11px var(--font); color: rgba(235, 235, 245, .7); }
.crop .fl img { width: 56px; height: 56px; object-fit: cover; border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.crop .fl button.on { color: #fff; }
.crop .fl button.on img { box-shadow: 0 0 0 2px #29B6F6, 0 0 12px rgba(41, 182, 246, .5); }

/* ---- Discovery / Library: shelves (one pattern for every song list) ---- */
.shelves { display: flex; flex-direction: column; gap: 26px; padding: 6px 0 110px; }
.shelf .sech { justify-content: flex-start; gap: 8px; margin-bottom: 4px; }
.shelf .sech b { font: 700 19px var(--font); }
.shelf .sech .cnt { font: 600 13px var(--font); color: rgba(235, 235, 245, .5); }
.shelf .sech .more { margin-left: auto; }
.shelf .empty { margin: 6px 0; padding: 14px 0; text-align: left; font-size: 13px; color: rgba(235, 235, 245, .5); }
.shelf.full { padding: 0 0 110px; }
.libin { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(41, 182, 246, .12); box-shadow: inset 0 0 0 .5px rgba(160, 225, 255, .4); }
.libin p { flex: 1; margin: 0; font-size: 13px; line-height: 1.4; color: rgba(235, 235, 245, .85); }
.libin .primary { flex: none; height: 38px; padding: 0 16px; }
/* the mini player: its own solid glass (it floats over the list) */
.sheet.lg .mini { -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); z-index: 8;}
.sheet.lg .mini b { color: #fff; }

.sheet.lg .mini .mp { color: #fff; }
.sheet.lg .mini .mx { background: rgba(255, 255, 255, .12); color: rgba(235, 235, 245, .8); }
.shelf .sech .more[hidden] { display: none; }
/* the mini player: the song's genre colour (so it stands out from the glass) with the analyzer behind its content */
.sheet.lg .mini { overflow: hidden; background: linear-gradient(115deg, color-mix(in srgb, var(--gc, #7B61FF) 78%, #150f33) 0%, color-mix(in srgb, var(--gc, #7B61FF) 40%, #0f0b24) 100%);
	box-shadow: 0 10px 30px color-mix(in srgb, var(--gc, #7B61FF) 40%, rgba(0, 0, 0, .5)), inset 0 0 0 .5px rgba(255, 255, 255, .28), inset 0 1px 0 rgba(255, 255, 255, .3); }
.sheet.lg .mini .viz { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60%; pointer-events: none; }
.sheet.lg .mini .mm, .sheet.lg .mini .mp, .sheet.lg .mini .mx { position: relative; z-index: 1; }
.sheet.lg .mini b, .sheet.lg .mini small { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.sheet.lg .mini small { color: rgba(255, 255, 255, .78); }
/* song rows (every song list): the original list — no box around each song, the original spacing and divider
   (the Saved Songs glass styling had turned them into boxes) */
.sheet.lg .srow { background: none; box-shadow: none; border-radius: 0; margin: 0; padding: 12px 16px; border-bottom: 1px solid rgba(42, 42, 61, .5); }
.sheet.lg .srow::before, .sheet.lg .srow::after { display: none; }
.sheet.lg .srow:last-child { border-bottom: 0; }
/* My Library shelves (and See all): rows span the window like Discovery's lists (the window padding + the row padding doubled the margin) */
.sheet.lg .shelf .srow { margin: 0 -16px; }

/* song lists: plays (headphones) and comments (bubble) after the artist; one heart size on every page */
.srow .si small .st { display: inline-flex; align-items: center; gap: 3px; }
.srow .si small .st svg { font-size: 11px; color: rgba(235, 235, 245, .6); }
.srow .like { font-size: 13px; gap: 5px; }
.srow .like svg, .sdetail .sd-top .like svg, .heart svg { font-size: 20px; }

/* NEW: songs posted within the last N days (Admin > Song List): a small, quiet tag */
.srow .si b .newb { display: inline-block; vertical-align: 2px; margin-right: 5px; padding: 0 3px; border-radius: 3px; font: 700 8px/12px var(--font); letter-spacing: .4px; font-style: normal;
	color: #64D2FF; box-shadow: inset 0 0 0 .5px rgba(100, 210, 255, .7); }
/* TOP 300: year / week */

/* search: a glass pill with the scope switch */
.sheet.lg .sbar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.sheet.lg .sbar[hidden] { display: none; }
.sheet.lg .sbar .scope { flex: none; display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border-radius: 20px; font: 600 13px var(--font); color: #fff;
	background: rgba(41, 182, 246, .2); box-shadow: inset 0 0 0 .5px rgba(160, 225, 255, .55); }
.sheet.lg .sbar .scope svg { font-size: 10px; }
.sheet.lg .sbar .sin { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; border-radius: 20px; background: rgba(255, 255, 255, .08);
	box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); color: rgba(235, 235, 245, .6);}
.sheet.lg .sbar .sin:focus-within { box-shadow: inset 0 0 0 1px rgba(41, 182, 246, .7), 0 0 0 3px rgba(41, 182, 246, .15); }
.sheet.lg .sbar .sin input { flex: 1; min-width: 0; height: 100%; padding: 0; border-radius: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 15px var(--font); -webkit-appearance: none; }
.sheet.lg .sbar .cancel { flex: none; font: 600 14px var(--font); color: #64D2FF; padding: 0 4px; }
/* My Publishings: edit / remove on each song */
.srow .own { flex: none; display: flex; gap: 2px; }
.srow .own button { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: rgba(235, 235, 245, .75); }
.srow .own button:active { background: rgba(255, 255, 255, .1); }
.srow .own .od { color: rgba(255, 107, 129, .85); }
.fpage { padding: 0 0 12px; }
/* the Filter window: compact, so the whole filter fits on a phone */
.fpage h4 { margin: 10px 0 7px; font-size: 14px; }
.fpage h4:first-child { margin-top: 0; }
.fpage .chips { gap: 6px; }
.fpage .chip2 { padding: 6px 11px; font-size: 12.5px; }

/* Discovery section headers: the same as My Library (title, count right after it, See all at the end) */
.disc .sech { justify-content: flex-start; gap: 8px; }
.disc .sech b { font: 700 19px var(--font); }
.disc .sech .cnt { font: 600 13px var(--font); color: rgba(235, 235, 245, .5); }
.disc .sech .more { margin-left: auto; }
/* the Featured slider keeps one height while its albums grow / shrink (the lists below stay still) */
.car { min-height: 178px; }
/* a list page's title: the count right after it */
.sheet .sh-head h2 .hcnt { margin-left: 7px; font: 600 14px var(--font); letter-spacing: 0; text-transform: none; color: rgba(235, 235, 245, .55); text-shadow: none; }
/* TOP 300: one small week button, and the year / week picker */
.wbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0 0 10px; padding: 0 12px; border-radius: 16px; font: 600 13px var(--font); color: #fff;
	background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2); flex-direction: row-reverse; }
.wbtn svg { font-size: 10px; color: rgba(235, 235, 245, .7); }
.wpick { display: flex; flex-direction: column; gap: 14px; padding-bottom: 12px; }
.wpick .now { align-self: flex-start; }
.wpick .yrs, .wpick .wks { display: flex; flex-wrap: wrap; gap: 6px; }
.wpick button { height: 32px; padding: 0 12px; border-radius: 16px; font: 600 13px var(--font); color: rgba(235, 235, 245, .85); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16); }
.wpick button.on { color: #fff; background: rgba(41, 182, 246, .3); box-shadow: inset 0 0 0 .5px rgba(160, 225, 255, .6); }
.wpick .yrs { padding-bottom: 12px; border-bottom: .5px solid rgba(255, 255, 255, .1); }
/* search: the button inside the box (mouse users) */
.sheet.lg .sbar .sin { padding: 0 4px 0 14px; }
.sheet.lg .sbar .sin .sgo { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff;
	background: linear-gradient(180deg, #29B6F6, #0A84FF); }
/* TOP 300's week button in the header (right of the title) and the picker's week buttons */
.sheet .sh-head .wbtn { display: inline-flex; flex-direction: row; align-items: center; gap: 5px; height: 34px; margin: 0; padding: 0 12px; border-radius: 17px; white-space: nowrap;
	font: 600 13px var(--font); text-transform: none; color: #fff; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.sheet .sh-head .wbtn svg { font-size: 10px; color: rgba(235, 235, 245, .7); }
.wpick .wks button { height: auto; padding: 6px 12px; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.wpick .wks button small { font: 500 10px var(--font); color: rgba(235, 235, 245, .55); }
/* a song just liked, arriving in the Likes list */
@keyframes justin { from { background: rgba(41, 182, 246, .28); } to { background: transparent; } }
.srow.justin { animation: justin 1.8s ease-out; }

/* ---- Featured slider: every album keeps its full size; the ones not in front are scaled down (a transform: smooth,
   no layout work per frame, no hairline at the edges, nothing around it moves) ---- */
.car .ci .cv { width: 110px; height: 110px; margin-top: 0; border-radius: 15px; transform: scale(.727); transform-origin: 50% 100%;
	transition: transform .45s cubic-bezier(.3, .7, .2, 1), box-shadow .45s; will-change: transform; backface-visibility: hidden; box-shadow: none; }
.car .ci.on .cv { transform: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .45); }
.car .ci .cv img { display: block; }

/* ---- the mini player: floats above the Discovery window and its pages (not above Song Detail) ---- */
body > .mini { position: fixed; z-index: 119; left: 50%; right: auto; bottom: calc(14px + var(--safe-b)); width: calc(min(100vw, 560px) - 32px); height: 68px; transform: translateX(-50%);
	display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-radius: 18px;
	background: linear-gradient(115deg, color-mix(in srgb, var(--gc, #7B61FF) 52%, #120e28) 0%, color-mix(in srgb, var(--gc, #7B61FF) 26%, #0c0a1c) 100%);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .5), inset 0 0 0 .5px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .22);}
body > .mini[hidden] { display: none; }
body:has(.sdetail) > .mini { visibility: hidden; pointer-events: none; }   /* Song Detail is the full player (hidden, not display:none: the arrow's animation keeps running and is there when it comes back) */
body > .mini.in { animation: mini-up .42s cubic-bezier(.2, .9, .3, 1); }
@keyframes mini-up { from { transform: translate(-50%, 140%); opacity: .3; } }
body > .mini.out { animation: mini-down .34s cubic-bezier(.32, .72, 0, 1) forwards; pointer-events: none; }   /* the slide up, reversed: moves at once, settles at the end */
@keyframes mini-down { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, 140%); opacity: .3; } }
/* the analyzer fills the player and fades out to the left, right and bottom edges */
body > .mini .viz { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent), linear-gradient(0deg, transparent, #000 30%);
	mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent), linear-gradient(0deg, transparent, #000 30%);
	-webkit-mask-composite: source-in; mask-composite: intersect; }
body > .mini .mm, body > .mini .mp, body > .mini .mx { position: relative; z-index: 1; }
body > .mini b { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
body > .mini small { color: rgba(255, 255, 255, .75); text-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
body > .mini .mp { color: #fff;}
body > .mini .mx { background: rgba(255, 255, 255, .14);}
/* pages keep room at the bottom while the player shows */
body.mini-on .sheet .sh-body { padding-bottom: calc(100px + var(--safe-b)); }
body > .mini .viz { opacity: .56; }   /* the mini player's analyzer only (the main analyzer unchanged) */
body > .mini .mm > span:not(.cv) { min-width: 0; display: flex; flex-direction: column; }   /* title over artist (the chevron now follows them) */
body > .mini .mm > span:not(.cv) b, body > .mini .mm > span:not(.cv) small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the mini player opens the full player: an up arrow floats above it, drifting upward. The player no longer clips
   (the arrow sits outside it); the analyzer rounds its own corners instead */
body > .mini { overflow: visible; }
body > .mini .viz { border-radius: 18px; }
/* a big, bold double arrow, half see-through, fading out at its bottom */
body > .mini .hint { position: absolute; z-index: 1; left: 50%; top: -50px; width: 64px; height: 46px; margin-left: -32px; display: flex; align-items: center; justify-content: center;
	font-size: 38px; color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); animation: hint-up 1.8s ease-in-out infinite;
	-webkit-mask-image: linear-gradient(to top, transparent 0%, #000 65%); mask-image: linear-gradient(to top, transparent 0%, #000 65%); }
@keyframes hint-up { 0% { transform: translateY(8px); opacity: 0; } 30% { opacity: .55; } 70% { transform: translateY(-4px); opacity: .55; } 100% { transform: translateY(-10px); opacity: 0; } }
/* the mini player's play / pause and close: glass buttons like the windows' header buttons (play / pause larger, easy to tap) */
body > .mini .mp, body > .mini .mx { flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; isolation: isolate; color: #fff;
	background: linear-gradient(to bottom, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
	-webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .3), inset 0 0 0 .5px rgba(255, 255, 255, .08); transition: transform .12s; }
body > .mini .mp::before, body > .mini .mx::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .16) 30%, rgba(255, 255, 255, .06) 65%, rgba(255, 255, 255, .2) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
body > .mini .mp { width: 36px; height: 36px; font-size: 17px; }
body > .mini .mx { width: 36px; height: 36px; font-size: 14px; color: rgba(235, 235, 245, .85); }
body > .mini .mp:active, body > .mini .mx:active { transform: scale(.92); }

/* ---- the full player (Song Detail): the same glass as the windows ---- */

.sdetail .sd-top .circle-ic { width: 44px; height: 44px; font-size: 17px; position: relative; isolation: isolate; color: rgba(235, 235, 245, .88);
	background: linear-gradient(to bottom, rgba(255, 255, 255, .14), rgba(255, 255, 255, .04));
	-webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%); box-shadow: 0 6px 16px rgba(0, 0, 0, .3), inset 0 0 0 .5px rgba(255, 255, 255, .06); }
.sdetail .sd-top .circle-ic::before, .sd-body .tr button::before, .sd-body .info::before, .sd-body .artist::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, .14) 30%, rgba(255, 255, 255, .05) 65%, rgba(255, 255, 255, .18) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.sdetail .sd-top .circle-ic:active, .sd-body .tr button:active { transform: scale(.92); }
.sd-body .disc { box-shadow: 0 18px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .18), 0 0 0 7px rgba(255, 255, 255, .05); }

.sd-body .tt { color: rgba(235, 235, 245, .6); }
.sd-body h2 { color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); }

.sd-body .tr { gap: 28px; }
.sd-body .tr button { position: relative; isolation: isolate; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; transition: transform .12s;
	background: linear-gradient(to bottom, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04));
	-webkit-backdrop-filter: blur(20px) saturate(185%); backdrop-filter: blur(20px) saturate(185%); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.sd-body .tr .pv, .sd-body .tr .nx { width: 50px; height: 50px; font-size: 22px; }
.sd-body .tr .nx:disabled { opacity: .4; }
.sd-body .tr .pp { width: 72px; height: 72px; font-size: 28px; color: #fff;}
.sd-body .info, .sd-body .artist { position: relative; isolation: isolate; border-radius: 16px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03)); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }

.sd-body .info b { color: #fff; }
.sd-body .info small, .sd-body .artist small { color: rgba(235, 235, 245, .6); }
.sd-body .artist { margin-top: 14px; padding: 12px 14px; border-top: 0; }
.sd-body .artist .av { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.sd-body .buy .primary.wide { position: relative; isolation: isolate; color: #fff; background: linear-gradient(180deg, rgba(41, 182, 246, .42), rgba(41, 182, 246, .2));
	-webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 0 0 .5px rgba(160, 225, 255, .6); }
.sd-body .cmts { border-top: .5px solid rgba(255, 255, 255, .12);}

/* ---- the full player: the same window as Discovery / Store / Saved Songs (glass panel, rounded top, the Studio logo
   showing above it, a dimmed backdrop, a grab handle) instead of a full-screen layer ---- */
.sdetail { inset: auto; left: 50%; width: min(100vw, 560px); top: calc(var(--safe-t) + 22px); bottom: 0; transform: translateX(-50%); border-radius: 12px 12px 0 0;
	padding-top: 0; animation: detail-up .5s cubic-bezier(.32, .72, 0, 1);
	-webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); isolation: isolate;}
@media (max-width: 739px) and (min-height: 600px) { .sdetail { top: calc(var(--safe-t) + 43px); } }
@media (min-width: 740px) and (min-height: 600px) { .sdetail { top: max(40px, calc(var(--safe-t) + 24px)); bottom: max(40px, calc(var(--safe-b) + 24px)); border-radius: 14px; } }
.sdetail::before { content: ""; position: sticky; display: block; top: 0;}

@keyframes detail-up { from { transform: translate(-50%, 100vh); } }
@keyframes detail-down { to { transform: translate(-50%, 100vh); } }
.sdetail .grab { border-radius: 3px;}
.sdetail .sd-top { touch-action: none;}
.scrim.sd-scrim { z-index: 104; background: rgba(0, 0, 0, .28); }
/* the full player's glass takes the player's drifting colour (set in real time with the mini player: --ph) */
.sdetail { background: linear-gradient(180deg, hsl(var(--ph, 230) 45% 30% / .6) 0%, hsl(calc(var(--ph, 230) + 18) 40% 18% / .66) 45%, rgba(12, 12, 20, .72) 100%); }
/* ---- the full player's record: the service's signature object. Nearly the width of the player (at most 440px, about
   half the screen height so the controls still fit), the song's image over the whole disc, fine grooves, a centre
   hole, and a still sheen over the spinning disc ---- */
.sd-body .vinyl { position: relative; flex: none; aspect-ratio: 1; border-radius: 50%;
	box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .16), 0 0 0 8px rgba(255, 255, 255, .04);}
.sd-body .vinyl .vd { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center;
	font-size: 110px; color: rgba(255, 255, 255, .55); background: radial-gradient(circle at 50% 50%, #2a2a3a, #0e0e16);}
.sd-body .vinyl .vd img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-body .vinyl .vd::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;   /* grooves */
	background: repeating-radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0 2.5px, rgba(0, 0, 0, .04) 2.5px 3px), radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .3) 100%); }
.sd-body .vinyl .gloss { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;   /* a still sheen: the disc turns under it */
	background: linear-gradient(135deg, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, .06) 30%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .08) 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), inset 0 2px 0 rgba(255, 255, 255, .22); }
.sd-body .vinyl .hole { position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, #0b0b12 0 38%, rgba(20, 20, 30, .92) 40%, rgba(40, 40, 56, .85) 100%);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 0 0 7px rgba(0, 0, 0, .25), 0 2px 8px rgba(0, 0, 0, .5); }
/* the record sits as far from the top of the full player as from its sides (20px): the handle and the buttons float
   over it (the round disc leaves the corners free for the buttons) */
.sdetail .grab { position: absolute; z-index: 3; left: 50%; top: 0; width: 160px; height: 26px; margin: 0 0 0 -80px; background: none; touch-action: none; }
.sd-body .vinyl { touch-action: pan-y; }   /* up: the player scrolls natively; down at the top: pulled to close (discovery.js) */
.sdetail .grab::before { content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: rgba(255, 255, 255, .3); }
.sdetail .sd-top { position: absolute; z-index: 2; left: 0; right: 0; top: 0; padding: 10px 12px; pointer-events: none; }
.sdetail .sd-top button { pointer-events: auto; }

.sd-body .vinyl { margin-top: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* the record's top gap always equals its side gaps: both are (player width - record width) / 2 */
.sdetail { --pw: min(100vw, 560px); --dw: min(calc(var(--pw) - 40px), 440px, 54vh); }

.sd-body .vinyl { width: var(--dw); }
.sd-body .vinyl, .sd-body .vinyl img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }   /* a long press is ours (turbo) */
/* the panel's glass edge is an inset shadow on the panel itself: the ::after ring scrolled with the content in WebKit
   (a positioned child of a scroller), so its edges slid through the player as white lines while dragging */

.sdetail { box-shadow: 0 -4px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .42), inset 0 0 0 1px rgba(255, 255, 255, .1); }
/* the close chevron: bigger and bold (the icon is a filled path; a stroke of the same colour thickens it) */
.sdetail .sd-top .down svg { font-size: 27px; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; }
/* the full player's analyzer: over the lower half of the record (a half disc: it does not turn), the same curve as the
   mini player's, drawn there while the full player is open; its top fades into the image */
.sd-body .vinyl .sdviz { position: absolute; height: 50%; pointer-events: none; will-change: transform; opacity: .9;}
/* not cut to the circle: the analyzer overlaps the record, running the player's full width over its lower half
   (the curve's ends fade out towards the sides, its top into the image, its bottom into the player) */
.sd-body .vinyl .sdviz { left: calc((var(--dw) - var(--pw)) / 2); width: var(--pw); border-radius: 0;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%);
	-webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 35%, #000 72%, transparent 100%), linear-gradient(to right, transparent 0, #000 18%, #000 82%, transparent 100%); mask-composite: intersect; }
/* the full player's progress: one simple glowing line. A hairline for the whole song, a thicker line for the part
   played, and the thickest point at its end (the knob); soft white glow, the knob's halo breathing slowly; no times.
   The track stays a tall invisible strip so it is easy to touch and drag. */
.sd-body .track { height: 26px; border-radius: 0; background: none; box-shadow: none; }
.sd-body .track::before { position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; border-radius: 1px;
	background: rgba(255, 255, 255, .38);}
.sd-body .track i { top: 50%; bottom: auto; height: 3px; margin-top: -1.5px; border-radius: 2px; background: #fff;}
.sd-body .track b { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; background: #fff;}
.sd-body .track b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .55) 0, rgba(220, 230, 255, .2) 40%, rgba(255, 255, 255, 0) 70%); animation: knob-halo 2.4s ease-in-out infinite; pointer-events: none; }
@keyframes knob-halo { 0%, 100% { opacity: .45; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
.sd-body .tt { display: none; }
/* softer: the whole line 30% less opaque, the lines themselves slightly blurred, a wider glow */

/* softer again: 30% less opaque again (.7 x .7), more blur, a wider glow */
.sd-body .track { opacity: .49; }
.sd-body .track::before { filter: blur(.9px); box-shadow: 0 0 14px rgba(255, 255, 255, .45); }
.sd-body .track i { filter: blur(1.4px); box-shadow: 0 0 9px rgba(255, 255, 255, .9), 0 0 26px rgba(255, 255, 255, .6), 0 0 56px rgba(200, 220, 255, .45); }
.sd-body .track b { filter: blur(1.2px); box-shadow: 0 0 14px #fff, 0 0 30px rgba(255, 255, 255, .8), 0 0 60px rgba(210, 225, 255, .55); }
/* the analyzer and the progress line sit 100px higher together, over the record (the title and controls below keep
   their place); the line in front */
.sd-body .vinyl .sdviz { bottom: 60px; }   /* the analyzer alone: 40px lower than the line's lift */
.sd-body .prog { position: relative; top: -80px; z-index: 2; }   /* the line: 80px higher (100, then 20 back down) */
.sd-body .prog { width: calc((100% - 40px) * .448); }   /* the progress line: 44.8% of its first length (70%, 80%, 80%), centred */
/* the progress line shows only while the music plays, fading in and out with the analyzer (which rises with the
   sound and sinks away in about a second when it stops); hidden, it cannot be touched */
.sd-body .prog { opacity: 0; pointer-events: none; transition: opacity 1s ease-out; }
.sd-body .prog.on { opacity: 1; pointer-events: auto; transition-duration: .6s; }
/* the full player never scrolls sideways: the turning disc's square image (round only by its rounded corners) reaches
   past the player at an angle, and the browser counted those corners as width to scroll to on narrow screens */
.sdetail { overflow-x: hidden; }
.sd-body .vinyl .vd { will-change: auto; }
.sd-body .vinyl .vd .spin { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
/* the line (hairline + the thicker played part) fades out at both ends; the knob does not. The line is drawn in its own
   layer (.ln: the track's width, tall enough for the glow, not touchable) so the fade can apply to it alone */
.sd-body .track::before { content: none; }
.sd-body .track .ln { position: absolute; left: 0; right: 0; top: -40px; bottom: -40px; pointer-events: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%); }
.sd-body .track .ln::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; border-radius: 1px;
	background: rgba(255, 255, 255, .38); box-shadow: 0 0 14px rgba(255, 255, 255, .45); filter: blur(.9px); }
/* the gap above the record is the side gap but at least 40px (a narrow phone had only 20px: tight), and the song name
   starts the same distance below the record. Below it the progress line keeps its layout slot (24px + 26px; it is
   drawn higher, over the record) and the title its 16px margin; 4px is the title's line spacing above its letters */
.sdetail { --tg: max(calc((var(--pw) - var(--dw)) / 2), 40px); }
.sdetail .sd-body { padding-top: var(--tg); }
.sd-body .prog { margin-bottom: calc(var(--tg) - 70px); }
/* the full player's artist name: a little bigger, a button with the songs icon (opens the user's songs) */
.sd-body .ar { display: inline-flex; align-items: center; margin: 2px 0 0; padding: 4px 8px; border-radius: 10px; font: 600 17px var(--font); background: none;}
.sd-body .ar i { width: 8px; height: 8px; flex: none; }
.sd-body .ar svg { font-size: 19px; color: rgba(235, 235, 245, .6); }
.sd-body .ar:active { background: rgba(255, 255, 255, .08); }
/* a user's songs: picture, name and number of songs on top, then the song rows (no badge, no stats panel) */
.artistp { display: block; gap: 0; padding-top: 4px; }
.artistp .ah { display: flex; align-items: center; gap: 14px; padding: 4px 0 14px; }
/* the artist window's header: a small picture, the name (+ badge) and the song count, in place of the title */
.sheet .sh-head h2 .ahd { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; text-transform: none; }   /* (a nickname is shown as written, not title-cased) */
.sh-head h2 .ahd .av, .sh-head h2 .ahd .aimg { width: 34px; height: 34px; border-radius: 50%; flex: none; }
.sh-head h2 .ahd .av { display: flex; align-items: center; justify-content: center; font: 700 15px var(--font); background: rgba(255, 255, 255, .12); color: rgba(235, 235, 245, .9); }
.sh-head h2 .ahd .aimg { display: none; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.sh-head h2 .ahd .aimg.on { display: block; }
.sh-head h2 .ahd .aimg.on + .av { display: none; }
.sh-head h2 .ahd .atx { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.15; }
.sh-head h2 .ahd .anm { font: 700 17px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sh-head h2 .ahd .sc { font: 500 12px var(--font); color: rgba(235, 235, 245, .6); }
.artistp .ah .av, .artistp .ah .aimg { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.artistp .ah .av { display: flex; align-items: center; justify-content: center; font: 700 26px var(--font); background: rgba(255, 255, 255, .12); color: rgba(235, 235, 245, .9); }
.artistp .ah .aimg { display: none; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
.artistp .ah .aimg.on { display: block; }
.artistp .ah .aimg.on + .av { display: none; }
.artistp .ah h3 { margin: 0; font: 700 22px var(--font); }
.artistp .ah small { font-size: 14px; color: rgba(235, 235, 245, .6); }
.artistp .al { width: calc(100% + 32px); margin-left: -16px; }
/* the full player's song info (BPM, genre, plays, likes, length): plain text, no glass panel */
.sd-body .info { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; isolation: auto;}
.sd-body .info::before { content: none; }
.sd-body .info div { border-left: 0; }
/* the artist name: bigger, right under the title, with a small round arrow (opens the user's songs) */
.sd-body h2 { margin-bottom: 0; }
.sd-body .ar { margin-top: 0; font-size: 20px; gap: 8px; color: rgba(235, 235, 245, .88); }
.sd-body .ar em { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-style: normal;
	background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); }
.sd-body .ar em svg { font-size: 16px; color: rgba(235, 235, 245, .85); }
/* more room between the song info and the comments */
.sd-body .cmts { margin-top: 30px; }
/* the scroll-edge blur at the top, as the windows have, but lighter and shorter (nothing sits up there but the handle
   and the buttons): it stays at the top while the player scrolls, taking no room */
.sdetail::before { z-index: 2; pointer-events: none;}
/* the maker's level beside their name (where the genre dot was) */
.sd-body .ar .lv { width: auto; height: auto; border-radius: 6px; padding: 2px 6px; font: 700 12px var(--font); font-style: normal; letter-spacing: .02em;
	color: rgba(235, 235, 245, .9); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22); }
/* the play button: a quieter, less saturated blue */
.sd-body .tr .pp { background: linear-gradient(180deg, rgba(120, 160, 195, .42), rgba(120, 160, 195, .16)); box-shadow: 0 8px 22px rgba(0, 0, 0, .35), 0 0 18px rgba(120, 160, 195, .16);
	-webkit-backdrop-filter: blur(20px) saturate(110%); backdrop-filter: blur(20px) saturate(110%); }
/* the song info: one row that scrolls sideways (BPM, plays, likes, length, posted, genre, mood, theme); its right end
   fades and a double arrow drifts right while there is more (as the mini player's arrow drifts up) */
.sd-body .info { position: relative; padding: 6px 0; }
.sd-body .info .ir { display: flex; flex-direction: row; align-items: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; touch-action: pan-x pan-y; overscroll-behavior-x: contain;
	-webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%); mask-image: linear-gradient(to right, #000 78%, transparent 100%); }
.sd-body .info .ir::-webkit-scrollbar { display: none; }
.sd-body .info .ir > div { border-left: 0; padding: 0 4px;}
.sd-body .info .ir b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sd-body .info.end .ir { -webkit-mask-image: none; mask-image: none; }
.sd-body .info .ihint { position: absolute; right: -4px; top: 50%; margin-top: -12px; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
	font-size: 20px; color: #fff; pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); transition: opacity .3s;}
.sd-body .info.end .ihint { animation: none;}
@keyframes hint-right { 0% { transform: translateX(-8px); opacity: 0; } 30% { opacity: .55; } 70% { transform: translateX(4px); opacity: .55; } 100% { transform: translateX(10px); opacity: 0; } }
/* the description: 4 lines, the last two fading, "more" shows all of it */

.sd-body .desc p { margin: 0; white-space: pre-line; font: 400 14px/1.5 var(--font); color: rgba(235, 235, 245, .78); max-height: 6em; overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%); }
.sd-body .desc .more { margin-top: 4px; padding: 4px 0; font: 600 14px var(--font); color: rgba(235, 235, 245, .9); background: none; }
.sd-body .desc.all p { max-height: none; -webkit-mask-image: none; mask-image: none; }
.sd-body .desc.all .more { display: none; }
/* the top scroll-edge blur, clearly visible over the record's top edge: stronger and taller */

/* the description: one quiet line (the first line, dimmed) that opens the whole text in its own window */
.sd-body .desc { display: flex; align-items: center; width: 100%; margin-top: 12px; padding: 10px 2px; background: none; color: rgba(235, 235, 245, .5); font: 400 14px var(--font);}
.sd-body .desc[hidden] { display: none; }
.sd-body .desc span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic;}
.sd-body .desc svg { flex: none; font-size: 16px; opacity: .8; }
.sd-body .desc:active { color: rgba(235, 235, 245, .8); }
.descfull { margin: 4px 0 8px; white-space: pre-line; font: 400 15px/1.65 var(--font); color: rgba(235, 235, 245, .88); }
/* the top scroll-edge blur: the same as the windows' headers (10px, fading over the lower half) */
.sdetail::before { height: 76px; margin-bottom: -76px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	-webkit-mask: linear-gradient(180deg, #000 55%, transparent 100%); mask: linear-gradient(180deg, #000 55%, transparent 100%); }
/* closing to show a user's songs: slower, so it reads as a move, not a glitch */
.sdetail.closing.slow { animation-duration: .6s; }
.scrim.sd-scrim.closing.slow { animation-duration: .6s; }
/* a song change inside the player (the CD changer): the new player lies over the old one without glass of its own */
.sdetail.swapin { animation: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
.sdetail.swapin::before { content: none; }
.sdetail.swapout .sd-top, .sdetail.swapout .grab, .sdetail.swapout .tr { visibility: hidden; }
.sdetail.swapout .vinyl, .sdetail.swapin .vinyl { transform-origin: 50% 240%; }   /* the arm's pivot: well below the record */
.sdetail.swapout .vinyl { animation: cd-out .8s cubic-bezier(.55, 0, .8, .4) forwards; }
.sdetail.swapin .vinyl { animation: cd-in .8s cubic-bezier(.2, .7, .3, 1) .3s both; }
@keyframes cd-out { to { transform: rotate(42deg); } }
@keyframes cd-in { from { transform: rotate(-42deg); } }
.sdetail.swapout .sd-body h2, .sdetail.swapout .sd-body .ar { animation: txt-out .5s ease-in forwards; }
.sdetail.swapin .sd-body h2, .sdetail.swapin .sd-body .ar { animation: txt-in .55s ease-out .25s both; }
@keyframes txt-out { to { transform: translateX(120%); opacity: 0; } }
@keyframes txt-in { from { transform: translateX(-120%); opacity: 0; } }
.sdetail.swapout .sd-body .prog, .sdetail.swapout .sd-body .info, .sdetail.swapout .sd-body .desc, .sdetail.swapout .sd-body .buy, .sdetail.swapout .sd-body .cmts { animation: fade-out .6s ease forwards; }
.sdetail.swapin .sd-body .info, .sdetail.swapin .sd-body .desc, .sdetail.swapin .sd-body .buy, .sdetail.swapin .sd-body .cmts { animation: fade .6s ease .2s both; }
.sdetail.swapped:not(.closing) { animation: none; }   /* a player that came in by a song change: no entrance slide afterwards */
/* ---- the three category colours, the same everywhere: genre, mood, theme (the full player's song info, the Publish
   and Filter chips, the filter's active pills, New Song's genres) ---- */
:root { --c-genre: #5AC8FA; --c-mood: #FF9F6B; --c-theme: #C69CFF; }
.publish .chips.g, .fpage .chips.k-genre { --acc: var(--c-genre); }
.publish .chips.m, .fpage .chips.k-mood { --acc: var(--c-mood); }
.publish .chips.th, .fpage .chips.k-theme { --acc: var(--c-theme); }
.fchips button[data-k=genre] { color: var(--c-genre); background: color-mix(in srgb, var(--c-genre) 14%, transparent); }
.fchips button[data-k=mood] { color: var(--c-mood); background: color-mix(in srgb, var(--c-mood) 14%, transparent); }
.fchips button[data-k=theme] { color: var(--c-theme); background: color-mix(in srgb, var(--c-theme) 14%, transparent); }
.ggrid button { --gc: var(--c-genre); }
/* the full player: the same scroll-edge blur at the bottom as the windows have (content softens as it scrolls under) */
.sdetail::after { content: ""; position: sticky; display: block; inset: auto; left: 0; bottom: 0; height: 96px; margin-top: -96px; padding: 0; z-index: 3; border-radius: 0;
	pointer-events: none; background: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
	-webkit-mask: linear-gradient(0deg, #000 45%, transparent 100%); mask: linear-gradient(0deg, #000 45%, transparent 100%); -webkit-mask-composite: source-over; mask-composite: add; }
.sdetail.swapin::after { content: none; }
/* the song info: each item a fixed width, so a wider player shows more of them (all of them when they fit) */
.sd-body .info .ir > div { flex: 0 0 84px; min-width: 0; }
/* the bottom blur reaches the window's very edge: the player's bottom padding moves inside its content (a sticky
   element stops at the scroller's padding, which left a 24px strip without blur) */
.sdetail { padding-bottom: 0; }
.sdetail .sd-body { padding-bottom: calc(24px + var(--safe-b)); }
/* the description centred: the preview line (icon, text, arrow as one centred group) and the whole text in its window */
.sd-body .desc { justify-content: center; text-align: center; }
.sd-body .desc span { flex: 0 1 auto; }
.descfull { text-align: center; }
/* the description preview: its line centred, and under it (when there is more to read) a double arrow drifting down,
   the mini player's up arrow turned over */
.sd-body .desc { flex-direction: column; gap: 2px; padding-bottom: 4px; }
.sd-body .desc .dline { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; }
.sd-body .desc .dt { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: italic; }
.sd-body .desc .dhint { display: flex; align-items: center; justify-content: center; height: 24px; font-size: 22px; font-style: normal; color: #fff;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));}
.sd-body .desc .dhint[hidden] { display: none; }
.sd-body .desc .dhint svg { opacity: 1; font-size: 22px; }
@keyframes hint-down { 0% { transform: translateY(-8px); opacity: 0; } 30% { opacity: .55; } 70% { transform: translateY(4px); opacity: .55; } 100% { transform: translateY(10px); opacity: 0; } }
/* the full player's two hint arrows are still (no drift): the description's down arrow, with room above it, and the
   song info's right arrow */
.sd-body .desc .dhint { animation: none; opacity: .55; margin-top: 12px; }
.sd-body .info .ihint { animation: none; opacity: .55; }
.sd-body .info.end .ihint { opacity: 0; }
/* ---- Store: what NOTE and M-Cash are (in their boxes), a picture of each product, the user's current limit ---- */

.bals .b > svg { font-size: 22px; flex: none; margin-top: 2px; }
.bals .b em { margin-top: 3px; font: 400 11px/1.35 var(--font); font-style: normal; color: rgba(235, 235, 245, .62); }
.prod .pi { height: 76px; overflow: hidden; }
.prod .pi .art { width: 100%; height: 100%; max-width: 150px; padding: 6px 0; }
.purch .pi.big .art { width: 64px; height: 40px; }
.prod small.have { margin-top: -6px; color: color-mix(in srgb, var(--c) 70%, #fff); font-weight: 600; }
.sheet.lg.store .prod small.have { color: color-mix(in srgb, var(--c) 60%, #fff); }
/* My Page: the two balances carry their currency icon */
.mypage .bal button > svg { font-size: 18px; margin-bottom: 2px; }
.prod em { display: inline-flex; align-items: center; gap: 4px; }
.prod em svg { font-size: 14px; }
.purch .pm .pmic { font-size: 18px; flex: none; }
.purch .pm button[data-m=note] .pmic { color: var(--gold); }
.purch .pm button[data-m=cash] .pmic { color: var(--cash); }
/* ---- inactive blocks look inactive in every theme: the dark themes' empty blocks were nearly solid (Neon, Flash,
   Image, Pixel, Metal); now see-through like the bright themes', with a faint edge so the grid still reads ---- */
.st-color .blk:not(.on), .st-image .blk:not(.on) { background: rgba(31, 31, 46, .36); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .07); }
.st-neon .blk:not(.on) { background: rgba(20, 20, 30, .36); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .07); }
.st-pixel .blk:not(.on) { background: rgba(22, 22, 31, .36); box-shadow: inset 0 0 0 2px rgba(34, 34, 46, .55); }
.st-metal .blk:not(.on) { background: linear-gradient(180deg, rgba(17, 18, 22, .42), rgba(27, 29, 34, .3)); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3), 0 1px 0 rgba(255, 255, 255, .04); }
/* the theme's logo always on top of the grid (it was under the scrolling blocks); it never takes a tap */
#studio .logo { z-index: 2; }
/* Store: each balance box = icon, name and amount, then what the currency is on the right */

.bals .b > em { padding-left: 10px; border-left: .5px solid rgba(255, 255, 255, .14);}
/* a product's name with how many the user has now on its right, in colour */
.prod .pn { display: flex; align-items: baseline; justify-content: space-between;}
.prod .pn .have { font: 700 11.5px var(--font); font-style: normal; color: #7FDBFF; white-space: nowrap; }
/* the balance boxes one above the other, full width, so the explanation has room beside the amount */

.prod .pn b { font-size: 14px; min-width: 0; text-overflow: ellipsis;}
.pgrid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* one-line names never widen a column past the window */
.prod { min-width: 0; }
.pgrid2 .prod { padding: 12px 10px; }
.prod .pn { gap: 5px; }
.prod .pn .have { font-size: 10.5px; letter-spacing: -.1px; }
@media (max-width: 360px) { .prod .pn { flex-wrap: wrap; } .prod .pn b { white-space: normal; overflow: visible; } }   /* the smallest phones: the count goes under the name rather than cutting it */
/* the main grid always scrolls by a hair (see main.js: --mfill), so a short song springs with the finger */
#studio .main::after { content: ""; display: block; height: calc(2px + var(--mfill, 0px)); }
#studio .main { overscroll-behavior-y: auto; }
/* the balance boxes as before (side by side: icon, name, amount); what each currency is squeezed small into the box's
   empty right side */
.bals { flex-direction: row; gap: 12px; }
.bals .b { align-items: center;}
.bals .b > span { min-width: 0; flex: none; }
.bals .b > em { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; text-align: right; font: 400 10px/1.25 var(--font); font-style: normal; color: rgba(235, 235, 245, .6); }
.bals .b { gap: 8px;}
@media (max-width: 349px) { .bals .b > em { display: none; } }   /* no empty space to use on the smallest phones */
/* Store: "?" under each explanation opens both boxes (the longer explanations; NOTE's "Full reward list") */

.bals .b { flex-wrap: wrap; row-gap: 0; }
.bals .b .bx { flex: 1; min-width: 0; display: flex;}
.bals .b .bx em { margin: 0; padding: 0; border: 0; text-align: right; font: 400 10px/1.25 var(--font); font-style: normal; color: rgba(235, 235, 245, .6);}
.bals .b .bq { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; color: rgba(235, 235, 245, .85);
	background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.bals .b.open .bq { background: rgba(255, 255, 255, .28); color: #fff; }
.bals .b .bmore { display: none; flex: 0 0 100%; margin-top: 10px; padding-top: 10px; border-top: .5px solid rgba(255, 255, 255, .14); }
.bals .b.open .bmore { display: block; animation: fade .25s; }
.bals .b .bmore p { margin: 0; font: 400 12.5px/1.45 var(--font); color: rgba(235, 235, 245, .85); }
.bals .b .rlist { display: flex; align-items: center; gap: 6px; width: 100%; margin-top: 10px; padding: 8px 10px; border-radius: 10px; font: 600 12.5px var(--font); color: var(--gold);
	background: rgba(255, 209, 102, .12); box-shadow: inset 0 0 0 .5px rgba(255, 209, 102, .3); }
.bals .b .rlist span { flex: 1; text-align: left; }
.bals .b .rlist svg { font-size: 13px; }
@media (max-width: 349px) { .bals .b .bx em { display: none; } }
/* the NOTE reward list */

.rewards .rw { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: .5px solid rgba(255, 255, 255, .08); }
.rewards .rw span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rewards .rw b { font: 500 14.5px var(--font); }
.rewards .rw small { font-size: 12px; color: rgba(235, 235, 245, .55); }
.rewards em { display: inline-flex; align-items: center; gap: 4px; font: 700 14px var(--font); font-style: normal; color: var(--gold); white-space: nowrap; }
.rewards em svg { font-size: 14px; }

.bals { align-items: stretch; }
.bals .b { align-content: flex-start; }
/* the short explanation and its "?" side by side: one line when the box has room (full-size Store), two lines when narrow */
.bals .b { container-type: inline-size; padding-left: 12px; padding-right: 10px; }
.bals .b .bx { flex-direction: row; align-items: center; justify-content: flex-end; gap: 6px; }
.bals .b .bx em { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.bals .b .bq { flex: none; }
@container (min-width: 200px) { .bals .b .bx em { white-space: nowrap; display: block; text-overflow: ellipsis; } }   /* the box's inner width: ~236px at full size */
.bals .b .bx em { flex: 0 1 auto; min-width: 0; }
/* narrow boxes: two rows — the name and amount, then the explanation with its "?" across the box */
@container (max-width: 199px) {
	.bals .b .bx { flex: 0 0 100%; justify-content: space-between; margin-top: 6px; }
	.bals .b .bx em { display: block; white-space: normal; text-align: left; -webkit-line-clamp: unset; }
}
/* the reward list's section titles stand out (an icon on a gold-tinted band with an accent bar), and the level bonus
   note sits in its own soft box */
.rewards h4 { display: flex; align-items: center; gap: 8px; margin: 20px 0 4px; padding: 8px 12px; font: 700 13.5px var(--font); letter-spacing: .02em;}
.rewards h4:first-child { margin-top: 4px; }
.rewards h4 svg { font-size: 15px; }
.rewards .rnote { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 4px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.45;
	color: #BFE9FF; background: rgba(90, 200, 250, .1); box-shadow: inset 0 0 0 .5px rgba(90, 200, 250, .35); }
.rewards .rnote svg { flex: none; font-size: 16px; margin-top: 1px; color: #7FDBFF; }
/* amounts read "+10 NOTE ♫"; a table reward (e.g. chart ranks) lists its lines under its name */
.rewards em svg { margin-left: 2px; }
.rewards .rw.rt { border-bottom: 0; padding-bottom: 4px; }
.rewards .rks { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; padding: 0 0 10px; border-bottom: .5px solid rgba(255, 255, 255, .08); }
.rewards .rk { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: rgba(235, 235, 245, .8); }
/* the reward list's section titles in the app's glass (as the Store's cards / the player's buttons): a light gradient,
   blur, a thin bright edge ring, a soft shadow; white text, the icon keeps the NOTE gold */
.rewards h4 { position: relative; isolation: isolate; color: rgba(255, 255, 255, .92); border-radius: 12px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
	-webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); box-shadow: 0 4px 14px rgba(0, 0, 0, .22); }
.rewards h4::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
	background: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .12) 35%, rgba(255, 255, 255, .05) 65%, rgba(255, 255, 255, .16) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.rewards h4 svg { color: var(--gold); }
/* a product name is never cut: when "You have N" does not fit beside it, it drops under it (still on the right) */
.prod .pn { flex-wrap: wrap; row-gap: 2px; }
.prod .pn b { white-space: normal; overflow: visible; }
.prod .pn .have { margin-left: auto; }
/* each item's "?" (bottom right) opens its explanation inside the card */
.pgrid2 { align-items: start; }
.prod .pp { align-items: center; }
.prod .pq { margin-left: auto; width: 20px; height: 20px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; cursor: pointer;
	color: rgba(235, 235, 245, .85); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.prod.open .pq { background: rgba(255, 255, 255, .28); color: #fff; }
.prod .pinfo { display: none; margin: 2px 0 0; padding-top: 10px; border-top: .5px solid rgba(255, 255, 255, .14); font: 400 12.5px/1.45 var(--font); color: rgba(235, 235, 245, .85); white-space: normal; }
.prod.open .pinfo { display: block; animation: fade .25s; }
/* the record's label: the small glass Musicshake mark just above the centre hole (never inside it), on the spinning image */
.sd-body .vinyl .vd .spin img.label { position: absolute; inset: auto; left: 50%; height: auto; object-fit: contain; pointer-events: none;}
   /* its bottom edge just clear of the hole's ring */
/* the record's label: the Image theme's logo set in a ring hugging the centre hole (musicshake-logo-ring.svg: the
   letters' feet at 64% of its radius, so 19.4% of the disc puts them just outside the hole's ring) */
.sd-body .vinyl .vd .spin img.label { top: 50%; bottom: auto; transform: translate(-50%, -50%);}
/* the logo as a word on an arc over the hole (letters together, 60% smaller): the ring image is 16.6% of the disc */
.sd-body .vinyl .vd .spin img.label { width: 16.6%; }
   /* plain letters, a thin dark edge to stand out from any cover */
   /* the record's logo: plain letters, no shadow */
.sd-body .vinyl .vd .spin img.label { filter: none; }   /* the record's logo: plain letters with a hairline grey outline (in the SVG), no shadow */
.sd-body .vinyl .vd .spin img.label { opacity: .5; }   /* the record's logo half transparent */
/* a help popover (text only), e.g. Discovery's "?" */
.popover.tip { width: min(300px, calc(100vw - 20px)); }
.popover.tip .pv-head { padding: 8px 8px 8px 14px; }
.popover.tip .pv-head b { font-size: 16px; }
.popover.tip .pv-head .circle-ic { width: 30px; height: 30px; font-size: 12px; }
.popover.tip .pv-list { padding: 12px 14px 14px; max-height: min(calc(100vh - 170px), 560px); }   /* help: the whole explanation at once on a phone; short screens still scroll */
.popover.tip p { margin: 0; font: 400 14px/1.5 var(--font); color: rgba(235, 235, 245, .88); }
.popover .pv-foot:empty { display: none; }   /* no buttons: no footer band (it showed as a second, off-colour layer at the bottom) */
.popover { isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }   /* iOS: the blurred backdrop clipped to the rounded box (no square layer behind it) */
/* a help popover's sentences, one per line with a bullet */
.popover.tip .tipl { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.popover.tip .tipl li { position: relative; padding-left: 14px; font: 400 14px/1.5 var(--font); color: rgba(235, 235, 245, .88); }
.popover.tip .tipl li::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: rgba(235, 235, 245, .7); }
/* the finger hint (once a minute, 10 s, in place of the double arrow): twice the size, half opaque, its tip on the
   player's middle two thirds of the way across, tapping it with a ripple; it never takes a tap itself */
body > .mini .tap { position: absolute; z-index: 2; left: 66.7%; top: 50%; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
body > .mini .tap .hand { position: absolute; font-size: 64px; left: -33px; top: -48px; color: #fff; opacity: .5; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5));
	transform: rotate(180deg); animation: hint-tap 1.6s ease-in-out infinite; }
body > .mini .tap .rip { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, .8);
	opacity: 0; animation: hint-rip 1.6s ease-out infinite; }
@keyframes hint-tap { 0%, 100% { transform: rotate(180deg) translateY(10px); } 35% { transform: rotate(180deg) translateY(0); } 45% { transform: rotate(180deg) translateY(-1px) scale(.94); } 60% { transform: rotate(180deg) translateY(6px); } }
@keyframes hint-rip { 0%, 38% { transform: scale(.3); opacity: 0; } 45% { transform: scale(.5); opacity: .6; } 100% { transform: scale(2.2); opacity: 0; } }
body > .mini.tapping .tap { opacity: 1; }
body > .mini .hint { transition: opacity .5s; }
body > .mini.tapping .hint { pointer-events: none;}
@media (prefers-reduced-motion: reduce) { body > .mini .tap .hand, body > .mini .tap .rip { animation: none; } }
body > .mini.tapping .hint { animation: none; opacity: 0; }   /* its own drift animates opacity: stopped while the finger shows */
/* a menu's "?" (e.g. the cover's Free / Your Image menu): at the right of its title row */
.asheet .as-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.asheet .as-q { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px;
	color: rgba(235, 235, 245, .85); background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25); }
/* behind a "?" help box: everything else dimmed (the box stays bright above it) */
.pv-dim { background: rgba(0, 0, 0, .55); animation: fade .2s; }
/* ---- My Page (2026-09-26): the profile picture (30% larger, tap to change), the level mark, My Items, the histories ---- */
.av.big { width: 114px; height: 114px; font-size: 46px; }
.prof .pimg { position: relative; flex: none; padding: 0; overflow: visible; cursor: pointer; }
.prof .pimg img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.prof .pimg.has .ini { visibility: hidden; }
.prof .pimg .pedit { position: absolute; right: 2px; bottom: 2px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-style: normal;
	color: #fff; background: var(--accent); box-shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 0 0 2px rgba(13, 13, 20, .9); }
.prof .pimg .prev { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); padding: 2px 8px; border-radius: 999px; white-space: nowrap; font: 700 11px var(--font); font-style: normal;
	color: #1a1300; background: var(--gold); box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.prof .pimg .prev[hidden] { display: none; }
/* the level mark: one format everywhere ("Lv.N" in a small rounded tag); My Page keeps its gold, the player its glass */
.lv { gap: 0; padding: 2px 6px; border-radius: 6px; font: 700 12px var(--font); letter-spacing: .02em; }
.lv svg { display: none; }
/* My Items: the glass panel only holds the counts (four) */
.card.items .rowt { padding: 14px 16px 10px; }
.lims.four div { padding: 0 2px; text-align: center; }
.lims.four small { line-height: 1.2; }
/* the histories: two tabs side by side, the list right under them (Currency first) */
.htabs { display: flex; gap: 8px; margin: 18px 0 10px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12); }
.htabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 6px; border-radius: 10px; font: 600 14px var(--font); color: rgba(235, 235, 245, .7); }
.htabs button svg { font-size: 15px; }
.htabs button.on { color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .25), 0 2px 8px rgba(0, 0, 0, .25); }
.hbox .hl { margin: 0 -16px; }
.hbox .caps { padding-top: 0; }
/* each label in the same two-line area, centred in it both ways; so the numbers under them stay on one line */
.lims.four div { justify-content: flex-start; }
.lims.four small { min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
/* the profile picture: no blue glow; a soft dark shadow and a thin glass ring, like the app's other glass pieces */
.prof .av.big { box-shadow: 0 8px 22px rgba(0, 0, 0, .45), 0 0 0 2px rgba(255, 255, 255, .22), 0 0 0 3px rgba(0, 0, 0, .25); }
/* unread notifications: a dot on the main screen's My Page button too (as on the bell) */
#studio .bar .mypage { position: relative; }
#studio .bar .mypage.badge::after { top: 5px; left: calc(50% + 7px); }
/* Alerts: always the full fitted height (top 110px free, My Page showing above it), however few notifications */
.sheet.alerts .sh-body > * { min-height: 100vh; }
/* Settings: a 90% window over My Page; its rows sit on the window itself (no inner glass panel) */
.sheet.settings .sh-body > * { min-height: calc(100vh - 200px); }
.sheet.settings .card.set { background: none; box-shadow: none; border-radius: 0; margin: 0 -16px; -webkit-backdrop-filter: none; backdrop-filter: none; }
.sheet.settings .card.set::before { content: none; }
/* Privacy Policy / Terms of Service in a window: readable text */
.legal-doc { padding: 4px 2px 24px; font: 400 14px/1.6 var(--font); color: rgba(235, 235, 245, .86); overflow-wrap: anywhere; }
.legal-doc h2, .legal-doc h3, .legal-doc h4, .legal-doc b, .legal-doc strong { color: #fff; }
.legal-doc h2 { font-size: 17px; margin: 22px 0 8px; } .legal-doc h3, .legal-doc h4 { font-size: 15px; margin: 18px 0 6px; }
.legal-doc p { margin: 0 0 12px; } .legal-doc ul, .legal-doc ol { padding-left: 20px; margin: 0 0 12px; }
.legal-doc a { color: var(--accent); }
.legal-doc .block { background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 0 12px !important; }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 13px; } .legal-doc td, .legal-doc th { border: .5px solid rgba(255, 255, 255, .15); padding: 6px; vertical-align: top; }
/* Feedback form */
.fbform { display: flex; flex-direction: column; padding: 4px 0 20px;}
.fbform h4 { margin: 8px 0 2px; font: 600 13px var(--font); color: rgba(235, 235, 245, .6); }
.fbcats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fbcats button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: 14px; font: 600 13px var(--font); color: rgba(235, 235, 245, .85);
	background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); }
.fbcats button svg { font-size: 20px; color: rgba(235, 235, 245, .7); }
.fbcats button.on { color: #fff; background: rgba(41, 182, 246, .2); box-shadow: inset 0 0 0 1px rgba(41, 182, 246, .7); }
.fbcats button.on svg { color: var(--accent); }
.fbform textarea { min-height: 180px; resize: vertical; padding: 12px 14px; border-radius: 14px; border: 0; font: 400 15px/1.5 var(--font); color: #fff;
	background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .18); }
.fbform .fbn { align-self: flex-end; font-size: 11px; color: rgba(235, 235, 245, .45); }
.fbform .send { margin-top: 6px; }
.fbform .fbnote { font-size: 12px; color: rgba(235, 235, 245, .5);}
/* ---- Feedback, in the app's style: headings like Settings' rows, glass buttons and fields ---- */
.fbform { gap: 10px; }
.fbform .fbh { display: flex; align-items: center; gap: 12px; margin: 10px 0 2px; font: 600 15px var(--font); color: #fff; }
.fbform .fbh > svg { width: 28px; font-size: 16px; color: var(--accent); flex: none; }
.fbform .fbh .fbn { margin-left: auto; font: 400 11px var(--font); color: rgba(235, 235, 245, .45); }
.gbtn, .gin { position: relative; isolation: isolate; border: 0; color: rgba(235, 235, 245, .9);
	background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 0 0 .5px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .18); }
.fbcats .gbtn { border-radius: 16px;}
.fbcats .gbtn svg { font-size: 20px; color: rgba(235, 235, 245, .75); }
.fbcats .gbtn.on { color: #fff; background: linear-gradient(180deg, rgba(41, 182, 246, .42), rgba(41, 182, 246, .18)); box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 0 0 .5px rgba(160, 225, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .25); }
.fbcats .gbtn.on svg { color: #fff; }
.fbform .gin { width: 100%; border-radius: 14px; padding: 12px 14px; font: 400 15px/1.5 var(--font); color: #fff; outline: none; }
.fbform textarea.gin { min-height: 170px; resize: vertical; }
.fbform .gin:focus { box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(160, 225, 255, .7); }
.fbform .gin.bad { box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 107, 129, .8); }
.fbform .fbnote { margin: -2px 0 6px; text-align: left; }
.gbtn.primaryg { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 50px; margin-top: 8px; border-radius: 16px; font: 600 16px var(--font); color: #fff;
	background: linear-gradient(180deg, rgba(41, 182, 246, .5), rgba(41, 182, 246, .22)); box-shadow: 0 8px 20px rgba(0, 0, 0, .3), inset 0 0 0 .5px rgba(160, 225, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .3); }
.gbtn.primaryg.idle { opacity: .45; filter: saturate(.6); }
/* the category buttons: text only, lower; the message box's hint clearly dimmer than typed text */
.fbcats .gbtn { padding: 11px 6px; justify-content: center; line-height: 1.25; }

.fbform .gin::placeholder { color: rgba(235, 235, 245, .2); }   /* the hint toned down further */
.fbform { padding-top: 0; }
.fbform .fbh:first-child { margin-top: 0; }   /* "Category" right under the window's title */
/* ---- Simple / Pro (Settings > Screen) ---- */
/* Simple: the part buttons show only their number (centred); no variation marks on blocks */
#studio.ui-simple .pbtn .c { display: none; }
#studio.ui-simple .pbtn { gap: 0; }
#studio.ui-simple .blk .v { display: none; }   /* (Simple keeps the variation dot; Pro shows the number instead) */
/* Pro: every theme shows the variation number (v1, v2…) in the block's corner, readable on any block */
#studio.ui-pro .blk.on.vari .dot { display: none; }
/* Pro: the variation number (v1, v2…) in the middle of the block, drawn in each theme's own way */
#studio.ui-pro .blk.on.vari .v { display: flex; position: absolute; inset: 0; z-index: 3; align-items: center; justify-content: center; pointer-events: none;
	font: 700 13px/1 var(--mono); letter-spacing: .02em; color: #fff;}
#studio.ui-pro .blk.muted .v { display: none; }
/* Pro: each instrument icon carries its track number in the centre (owner 2026-10-03), the size of the blocks' v1, v2…, readable
   over any icon: white with a dark outline and a soft shadow */
.seq .tbtn .tno { display: none; }
#studio.ui-pro .seq .tbtn .tno { display: flex; position: absolute; inset: 0; z-index: 4; align-items: center; justify-content: center; pointer-events: none;
	font: 800 11px/1 var(--mono); color: #fff; letter-spacing: -.02em;
	-webkit-text-stroke: 2.5px rgba(0, 0, 0, .88); paint-order: stroke fill;   /* (a dark outline under the white: readable over any icon, owner 2026-10-04) */
	text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 1px 4px rgba(0, 0, 0, .7); }
#studio.ui-pro .seq .tbtn.muted .tno { opacity: .6; }

/* ---- the volume window (tap the speaker at the top left) in each theme's own look ---- */
.st-color .vpanel { background: rgba(12, 12, 22, .88); box-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 0 0 1px color-mix(in srgb, var(--tc) 80%, transparent), 0 0 12px color-mix(in srgb, var(--tc) 35%, transparent); }
.st-neon .vpanel { background: #0b0b12; border-radius: 10px; box-shadow: 0 0 0 1.5px var(--tc), 0 0 14px color-mix(in srgb, var(--tc) 60%, transparent), inset 0 0 10px color-mix(in srgb, var(--tc) 25%, transparent); }
.st-neon .vpanel .val { color: var(--tc); text-shadow: 0 0 6px var(--tc); }
.st-glass .vpanel { border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06)); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .25), inset 0 0 0 .5px rgba(255, 255, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .4); }
.st-glass .vpanel .val { color: rgba(255, 255, 255, .85); }
.st-image .vpanel { border-radius: 12px; background: rgba(20, 20, 28, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 16px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .12); }
.st-stone .vpanel { border-radius: 21px; background: radial-gradient(circle at 30% 30%, #3b3530, #1d1a17 80%); box-shadow: 0 4px 10px rgba(0, 0, 0, .5), inset 0 2px 3px rgba(255, 255, 255, .12), inset 0 -2px 4px rgba(0, 0, 0, .5); }
.st-pixel .vpanel { border-radius: 0; background: #16161f; box-shadow: 0 0 0 2px var(--tc), 4px 4px 0 rgba(0, 0, 0, .55); }
.st-pixel .vpanel .mute { border-radius: 0; }
.st-paper .vpanel { border-radius: 4px; background: #efe3cb; box-shadow: 0 3px 8px rgba(60, 40, 10, .35), inset 0 0 0 1px rgba(120, 90, 50, .25); }
.st-paper .vpanel .val { color: #5a4630; } .st-paper .vpanel .mute { color: color-mix(in srgb, var(--tc) 80%, #3a2a18); }
.st-metal .vpanel { border-radius: 8px; background: linear-gradient(180deg, #3a3e46, #1d2026); box-shadow: 0 4px 10px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(0, 0, 0, .6); }
.st-metal .vpanel .val { color: #cfd6de; }
.st-jelly .vpanel { border-radius: 21px; background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 55%, #fff 25%), color-mix(in srgb, var(--tc) 70%, #000 10%));
	box-shadow: 0 6px 14px color-mix(in srgb, var(--tc) 35%, transparent), inset 0 2px 0 rgba(255, 255, 255, .55), inset 0 -3px 6px rgba(0, 0, 0, .18); }
.st-jelly .vpanel .val, .st-jelly .vpanel .mute { color: #fff; }
.st-chalk .vpanel { border-radius: 8px; background: rgba(28, 44, 36, .9); box-shadow: 0 4px 10px rgba(0, 0, 0, .4), inset 0 0 0 1.5px rgba(235, 240, 230, .55); }
.st-chalk .vpanel .val { color: rgba(235, 240, 230, .85); font-family: var(--font); }
/* ---- Part window (2026-09-27): glass rows, all 8 bars on one line, a flashing preview button, the bar grid ---- */

.partwin .sh-head .pvsel { max-width: 140px; }
.partwin .sh-head .pvsel span { overflow: hidden; text-overflow: ellipsis; }
.pvmenu .pv-list { gap: 6px; }
.pvmenu .pvopt { text-align: left; padding: 11px 14px; border-radius: 12px; font: 500 15px var(--font); color: rgba(235, 235, 245, .88); background: rgba(255, 255, 255, .06); }
.pvmenu .pvopt.on { color: #fff; background: rgba(41, 182, 246, .22); box-shadow: inset 0 0 0 1px rgba(160, 225, 255, .55); }
.plist2 { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 16px; }
.prow2 { position: relative; isolation: isolate; display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 12px; border-radius: 14px;
	background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16); }
.prow2.sel { background: linear-gradient(180deg, rgba(41, 182, 246, .3), rgba(41, 182, 246, .12)); box-shadow: inset 0 0 0 1px rgba(160, 225, 255, .6), 0 4px 12px rgba(0, 0, 0, .25); }
.prow2 .pmain2 { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; padding: 6px 0; }
.prow2 .pnum2 { flex: none; width: 24px; font: 700 12px var(--mono); color: rgba(235, 235, 245, .5); }
.prow2.sel .pnum2 { color: #fff; }
/* the progression's short name (owner 2026-10-06: a song's title, else a genre or a word it calls to mind) before its chords:
   one column wide on every row, so the chords line up */
.prow2 .ptag { flex: none; width: 92px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 700 12.5px var(--font); color: rgba(235, 235, 245, .92); }
.prow2.sel .ptag { color: #fff; }
@media (max-width: 480px) { .prow2 .ptag { width: 76px; font-size: 12px; } }
.prow2 .pbars { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 12px var(--mono); color: rgba(235, 235, 245, .82);
	-webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); }
.prow2 .cbar { display: inline; padding: 0 7px; border-left: 1px solid rgba(255, 255, 255, .18); }
.prow2 .cbar:first-child { padding-left: 0; border-left: 0; }
.prow2 .cbar b { font-weight: 600; } .prow2 .cbar b + b { margin-left: 6px; }
.prow2.sel .pbars { color: #fff; }
.prow2 .pstat, .prow2 .pinfo2 { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
	background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); }
.prow2 .pinfo2 { font: 700 14px Georgia, serif; font-style: italic; color: rgba(235, 235, 245, .8); }
.prow2 .pinfo2.on { color: #fff; background: rgba(41, 182, 246, .35); }
.prow2 .pstat.live { background: rgba(41, 182, 246, .55); animation: pstat-flash 1.1s ease-in-out infinite; }
/* i: the 8 bars as a grid — 4 across (2 rows), 2 across on phones */
.pdetail { display: grid; gap: 6px; margin: -2px 0 6px; padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .1); animation: fade .2s;}
.pdetail .pcell { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12); min-width: 0; }
.pdetail .pcell small { font: 600 10px var(--mono); color: rgba(235, 235, 245, .45); }
.pdetail .pcell span { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.pdetail .pcell b { font: 700 14px var(--mono); color: #fff; }
/* the new chord progressions (owner 2026-10-06): a NEW tag after the number; the details name it, its genre, and that only
   MIDI / drums / rap / FX tracks play over it. The tag sits under the number (the number column keeps its width) */
.prow2 .pnum2 .pnew { display: block; width: max-content; margin-top: 2px; padding: 0 3px; border-radius: 3px; font: 700 8px/12px var(--font); letter-spacing: .4px; font-style: normal;
	color: #64D2FF; box-shadow: inset 0 0 0 .5px rgba(100, 210, 255, .7); }
.pdetail .ptitle { grid-column: 1 / -1; font: 700 14px var(--font); color: #fff; padding: 2px 2px 4px; }
.pdetail .ptitle small { font: 600 12px var(--font); color: rgba(235, 235, 245, .6); }
.pdetail .ptitle p { margin: 4px 0 0; font: 500 12px var(--font); color: #64D2FF; }
@media (max-width: 480px) { .pdetail { grid-template-columns: repeat(2, 1fr); } }
/* sliding switches (UI.slideSeg): the highlight is one element that glides; the buttons sit on it */
.sseg { position: relative; isolation: isolate; }
.sseg > .sthumb { position: absolute; z-index: 0; pointer-events: none; transition: left .32s cubic-bezier(.32, .72, 0, 1), width .32s cubic-bezier(.32, .72, 0, 1); }
.sseg > button { position: relative; z-index: 1; transition: color .25s; }
.sseg > button.on { background: none !important; box-shadow: none !important; }
/* Part window header: the preview-sound selector as a pill of the header buttons' glass (same 44px height) */
.sheet .sh-head .circle-ic.pvsel { width: auto; max-width: 150px; padding: 0 12px 0 15px; gap: 6px; border-radius: 22px; font: 600 14px var(--font); color: rgba(235, 235, 245, .9); }
.sheet .sh-head .circle-ic.pvsel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet .sh-head .circle-ic.pvsel svg { color: rgba(235, 235, 245, .65); flex: none;}
/* Part / Change Track / Block Variation: a much stronger top blur, so the list sliding under the title and buttons
   stays out of their way */
.sheet .sh-head .circle-ic.done.dirty { color: #fff; background: linear-gradient(180deg, rgba(41, 182, 246, .5), rgba(41, 182, 246, .24)); }
/* Block Variation rows: the variation number as its tag, the name after it */

/* the strong top blur, defined in full (every glass window, whatever its size class) */
.sheet.pickwin .sh-head { isolation: isolate; background: none; z-index: 3; }   /* (it floats over the list, as in every large window) */
/* ---- Change Track in the app's glass: each pattern a glass card, its tones inside it; the Volume card clear of the list ---- */
.trackwin .tlist { display: flex; flex-direction: column;}
.trackwin .trow { position: relative;}

.trackwin .trow.open { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 22%, transparent), color-mix(in srgb, var(--acc) 12%, transparent));}
.trackwin .trow.na { background: rgba(255, 255, 255, .03); }
.trackwin .tones { margin-top: -8px;}

.trackwin .tsearch { border-radius: 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2); }
.trackwin .vcard { border-radius: 18px; background: linear-gradient(180deg, rgba(40, 40, 58, .82), rgba(22, 22, 34, .9)); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
	box-shadow: 0 -6px 24px rgba(0, 0, 0, .45), inset 0 0 0 .5px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .2); }

/* the variation number per theme */
#studio.st-color.ui-pro .blk.on.vari .v { color: #fff; text-shadow: 0 0 6px var(--tc), 0 0 2px var(--tc); }                                  /* Neon: lit in the track colour */
#studio.st-neon.ui-pro .blk.on.vari .v { color: var(--tc); text-shadow: 0 0 4px var(--tc), 0 0 10px var(--tc); font-weight: 800; }                  /* Flash: a neon tube */
#studio.st-glass.ui-pro .blk.on.vari .v { color: rgba(255, 255, 255, .95); font-family: var(--font); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }   /* Glass / Crystal: etched white */
#studio.st-image.ui-pro .blk.on.vari .v { color: #fff; font-family: var(--font); text-shadow: 0 0 3px rgba(0, 0, 0, .9), 0 1px 2px rgba(0, 0, 0, .9); }   /* Image: outlined over the picture */
#studio.st-stone.ui-pro .blk.on.vari .v { color: rgba(255, 255, 255, .78); font-family: var(--font); text-shadow: 0 -1px 0 rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .25); }   /* Stone: carved */
#studio.st-pixel.ui-pro .blk.on.vari .v { color: #fff; font: 700 11px/1 ui-monospace, monospace; letter-spacing: 1px; text-shadow: 1px 1px 0 #000, 2px 2px 0 rgba(0, 0, 0, .35); }   /* Pixel: blocky with a hard shadow */
#studio.st-paper.ui-pro .blk.on.vari .v { color: rgba(40, 28, 16, .78); font: italic 700 11px/1 Georgia, serif; text-shadow: 0 1px 0 rgba(255, 255, 255, .25); }   /* Paper: ink */
#studio.st-metal.ui-pro .blk.on.vari .v { color: #eef2f6; font-family: var(--font); letter-spacing: .06em; text-shadow: 0 1px 0 rgba(0, 0, 0, .7), 0 -1px 0 rgba(255, 255, 255, .15); }   /* Metal: stamped */
#studio.st-jelly.ui-pro .blk.on.vari .v { color: #fff; font: 800 11px/1 var(--font); text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }                  /* Jelly: soft and round */
#studio.st-chalk.ui-pro .blk.on.vari .v { color: rgba(240, 245, 235, .92); font: 700 11px/1 var(--font); text-shadow: 0 0 1px rgba(255, 255, 255, .6), 0 0 3px rgba(255, 255, 255, .25); }   /* Chalk: chalky */
/* (stronger still: the list fades out well before it reaches the title and buttons) */
/* Discovery: the playing song's row shows a small flashing equalizer left of its buttons; admins see a Hidden tag */
.srow .nowi { display: none; flex: none; align-items: flex-end; gap: 2px; height: 14px; margin-right: 2px; }
.srow.now .nowi { display: flex; }
.srow .nowi b { width: 3px; border-radius: 1px; background: var(--accent); animation: nowi 0.9s ease-in-out infinite; }
.srow .nowi b:nth-child(1) { height: 60%; animation-delay: -.3s; } .srow .nowi b:nth-child(2) { height: 100%; animation-delay: -.6s; } .srow .nowi b:nth-child(3) { height: 45%; }
@keyframes nowi { 0%, 100% { transform: scaleY(.35); opacity: .55; } 50% { transform: scaleY(1); opacity: 1; } }
.srow .nowi b { transform-origin: bottom; }
.srow .hidb { display: inline-block; margin-right: 6px; padding: 1px 6px; border-radius: 5px; font: 700 10px var(--font); font-style: normal; vertical-align: 2px; color: #1a1300; background: var(--gold); }
.srow.gone { transition: opacity .25s, transform .25s; opacity: 0; transform: translateX(30px); }
/* 2. Reset draws the eye the moment it becomes available: a pop, then a soft pulsing ring while a change is pending */

   /* the Publish button's glow and shine */

/* 3. the pickers' top fade: Discovery's dreamy scroll-edge blur (no tint), a little stronger and deeper */
/* the pickers' rows ease their glass in and out */
.pickwin .prow2, .pickwin .trow { transition: background-color .25s, box-shadow .25s, opacity .25s; }
/* 4. Block Variation: a compact glass panel beside its block; the block glows while it is being edited */
.bvcatch { position: fixed; inset: 0; z-index: 110; }
.bvpop { z-index: 111; max-height: min(380px, calc(100vh - 20px)); display: flex; flex-direction: column; border-radius: 18px; overflow: hidden;
	background: linear-gradient(180deg, rgba(48, 48, 68, .94), rgba(24, 24, 36, .97)); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .5), inset 0 0 0 .5px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .24); animation: fade .18s;}
.bvpop .bvhead { flex: none;}
.bvpop .bvhead b { flex: 1;}

.bvpop .bvlist { flex: 1 1 auto; min-height: 60px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: block; padding: 2px 8px 8px; }   /* (a plain block: a flex list could collapse to nothing in Safari) */
.bvpop .bvlist > .prow2 + .prow2 { margin-top: 6px; }
.bvpop .prow2 { padding: 4px 6px 4px 10px; border-radius: 11px; }
.bvpop .prow2 .pmain2 { padding: 5px 0; gap: 8px; }
.bvpop .pnum2.vnum { width: 26px; font: 700 11px var(--mono); color: rgba(235, 235, 245, .55); }
.bvpop .prow2.sel .pnum2.vnum { color: #fff; }
.bvpop .pbars { -webkit-mask-image: none; mask-image: none; font: 600 13px var(--font); }
.bvpop .prow2 .pstat { width: 28px; height: 28px; font-size: 11px; }
#studio .blk.bvtarget { z-index: 5; outline: 2px solid #fff; outline-offset: 1px; animation: bvtarget 1.4s ease-in-out infinite; }
@keyframes bvtarget { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55), 0 0 14px rgba(255, 255, 255, .35); } 50% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0), 0 0 22px rgba(255, 255, 255, .55); } }
/* 5. the variation numbers, quieter: like the chord text on the part buttons */
#studio.ui-pro .blk.on.vari .v { opacity: .3; font-size: 11px; }
/* a held block: ‹ › above it, nudging outward; the side the finger slides to lights up */
.bhint { position: fixed; z-index: 120; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px 5px; border-radius: 14px;
	color: #fff; font-size: 15px; background: rgba(22, 22, 34, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 0 0 .5px rgba(255, 255, 255, .25); animation: bhint-in .2s cubic-bezier(.2, 1.4, .4, 1); }
.bhint i { display: flex; opacity: .75; transition: opacity .15s, color .15s; }
.bhint .hl-l { animation: bhint-l 1s ease-in-out infinite; }
.bhint .hl-r { animation: bhint-r 1s ease-in-out infinite; }
.bhint.l .hl-l, .bhint.r .hl-r { opacity: 1; color: var(--accent); animation: none; transform: scale(1.25); }
.bhint.l .hl-r, .bhint.r .hl-l { opacity: .25; }
@keyframes bhint-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes bhint-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes bhint-in { from { opacity: 0; transform: translateY(6px) scale(.8); } }
@media (prefers-reduced-motion: reduce) { .bhint, .bhint i { animation: none !important; } }
/* the hint says what the slide does: HALF MUTE over the two arrows */
.bhint b { font: 800 10px/1 var(--font); letter-spacing: .12em; color: rgba(235, 235, 245, .9); white-space: nowrap; }
.bhint span { display: flex; gap: 14px; }

/* the variation dot (Simple): every theme draws it in its own way — bottom right (Stone: at 3 o'clock) */
#studio .blk.on.vari .dot { display: block; z-index: 3; width: 6px; height: 6px; right: 6px; bottom: 6px; border-radius: 50%; background: rgba(255, 255, 255, .8); box-shadow: 0 0 2px rgba(0, 0, 0, .35); }
#studio.st-color .blk.on.vari .dot { background: color-mix(in srgb, var(--tc) 55%, #fff);}   /* Neon: lit in the block's colour */
#studio.st-neon .blk.on.vari .dot { background: var(--tc);}                                     /* Flash: the tube's colour */
#studio.st-glass .blk.on.vari .dot { background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .3); }   /* Glass / Crystal: a clear bead */
#studio.st-image .blk.on.vari .dot { background: #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .55); }                                              /* Image: outlined over the picture */
#studio.st-stone .blk.on.vari .dot { right: 9%; bottom: auto; top: 50%; margin: -3px 0 0; background: rgba(255, 255, 255, .75); box-shadow: 0 1px 1px rgba(0, 0, 0, .35); }   /* Stone: 3 o'clock */
#studio.st-pixel .blk.on.vari .dot { width: 5px; height: 5px; border-radius: 0; background: rgba(0, 0, 0, .45); box-shadow: none; }                     /* Pixel: one dark pixel */
#studio.st-paper .blk.on.vari .dot { background: rgba(40, 28, 16, .7); box-shadow: none; }                                                            /* Paper: an ink dot */
#studio.st-metal .blk.on.vari .dot { width: 7px; height: 7px; background: radial-gradient(circle at 35% 35%, #fff, #9aa3ad 60%, #59616b); box-shadow: 0 1px 1px rgba(0, 0, 0, .6); }   /* Metal: a rivet */
#studio.st-jelly .blk.on.vari .dot { width: 7px; height: 7px; background: radial-gradient(circle at 35% 35%, #fff, rgba(255, 255, 255, .7)); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }   /* Jelly: a glossy bead */
#studio.st-chalk .blk.on.vari .dot { background: rgba(240, 245, 235, .9); box-shadow: 0 0 2px rgba(255, 255, 255, .6); }                              /* Chalk: a chalk dot */
#studio.ui-pro .blk.on.vari .dot, #studio .blk.muted .dot { display: none; }

/* Stone: the round stone's own half (a semicircle) */
#studio.st-stone .blk.on.hl .half, #studio.st-stone .blk.on.pl .half { border-radius: 100% 0 0 100% / 50% 0 0 50%; }
#studio.st-stone .blk.on.hr .half, #studio.st-stone .blk.on.pr .half { border-radius: 0 100% 100% 0 / 0 50% 50% 0; }
/* the mini player's progress line: the full player's (a faded hairline, the glowing played part, the breathing knob),
   smaller, along the analyzer's bottom; it only shows where the song is (no seeking here) and fades with the music */
body > .mini .mprog { position: absolute; left: 40%; right: 20%; bottom: 4px; height: 8px; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1s ease-out; }
body > .mini .mprog.on { opacity: .62; transition-duration: .6s; }
body > .mini .mprog .ln { position: absolute; left: 0; right: 0; top: -20px; bottom: -20px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 78%, transparent 100%); }
body > .mini .mprog .ln::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; background: rgba(255, 255, 255, .4); box-shadow: 0 0 10px rgba(255, 255, 255, .4); filter: blur(.6px); }
body > .mini .mprog i { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: #fff; filter: blur(.8px);
	box-shadow: 0 0 6px rgba(255, 255, 255, .9), 0 0 16px rgba(255, 255, 255, .55), 0 0 32px rgba(200, 220, 255, .4); }
body > .mini .mprog b { position: absolute; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #fff; filter: blur(.6px);
	box-shadow: 0 0 8px #fff, 0 0 18px rgba(255, 255, 255, .75), 0 0 36px rgba(210, 225, 255, .5); }
body > .mini .mprog b::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .55) 0, rgba(220, 230, 255, .2) 40%, rgba(255, 255, 255, 0) 70%); animation: knob-halo 2.4s ease-in-out infinite; }
/* half mute: the silent half is cut away — an empty slot where it was (dim, a dashed ghost of its outline) with a small
   speaker-off mark; the half that plays keeps its full colour. While sliding, the half about to rest is previewed */
.blk .half { background: rgba(16, 16, 28, .8); -webkit-backdrop-filter: blur(4px) saturate(40%); backdrop-filter: blur(4px) saturate(40%); box-shadow: none; outline: 0; animation: none; }
.blk .half::before { content: ""; position: absolute; inset: 3px; border-radius: inherit; border: 1px dashed rgba(255, 255, 255, .3); }
.blk .half::after { content: ""; position: absolute; left: 50%; top: 50%;}
.blk.on.hl .half, .blk.on.pl .half { border-radius: inherit; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.blk.on.hr .half, .blk.on.pr .half { border-radius: inherit; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.blk.on.hl .half::before { right: 0; border-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.blk.on.hr .half::before { left: 0; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.blk.on.pl .half, .blk.on.pr .half { background: rgba(16, 16, 28, .55); animation: half-pv .7s ease-in-out infinite alternate; }
.blk.on.pl .half::before { right: 0; border-right: 0; } .blk.on.pr .half::before { left: 0; border-left: 0; }
@keyframes half-pv { from { background-color: rgba(16, 16, 28, .3); } to { background-color: rgba(16, 16, 28, .6); } }   /* (the colour pulses, not the opacity: an opacity animation puts the rounded overlay on a layer Safari may draw square — as the preview button did) */
#studio.st-paper .blk .half { background: rgba(236, 226, 206, .85); }
#studio.st-paper .blk .half::before { border-color: rgba(59, 42, 26, .35); }

#studio.st-stone .blk .half::before { display: none; }   /* (round: no dashed box) */
/* the variation dot, quiet: half-see-through like the v1 numbers, no strong glow */

#studio.st-color .blk.on.vari .dot { box-shadow: 0 0 3px var(--tc); }
#studio.st-neon .blk.on.vari .dot { box-shadow: 0 0 2px var(--tc); }
/* a repeat part: the repeat loop right after the number, same colour and weight as the number (no badge, no new colour) */
.pbtn .n svg.rpt { font-size: 13px; margin-left: 3px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
/* the variation dot: fainter still */
#studio .blk.on.vari .dot { opacity: .2; }
/* pickers' top: a heavier, glowing blur — the text sliding under it becomes soft light, not letters behind the title */
/* the glow of the text under the header: a drop-shadow on the row's content (it follows the letters). A text-shadow was
   cut off by the names' own clipping (two-line clamp) into a visible rectangle */

/* half mute: the speaker-off mark bigger and clearer */
.blk .half::after { background: rgba(255, 255, 255, .88); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .6));}
#studio.st-paper .blk .half::after { background: rgba(59, 42, 26, .8); filter: none; }
/* the mini player's progress line: Pro only (Settings > Screen) */
body:not(:has(#studio.ui-pro)) > .mini .mprog { display: none; }
/* half mute: the speaker-off mark redrawn — a plain speaker, a clear gap, then a separate X (it read as one shape) */
.blk .half::after { width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 9h4l5.5-4.5v15L6 15H2z'/%3E%3Cpath d='m16 9.5 5 5m0-5-5 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 9h4l5.5-4.5v15L6 15H2z'/%3E%3Cpath d='m16 9.5 5 5m0-5-5 5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* ---- Change Track, plainer: no card under each pattern — the text straight on the window, a hairline between rows
   (as in Discovery); the current pattern and the chosen tone in the category's colour ---- */
.trackwin .tlist { margin: 0 -16px; gap: 0; padding: 0 0 130px; }
.trackwin .trow { isolation: auto; border-radius: 0; background: none; box-shadow: none; padding: 12px 12px 12px 16px; border-bottom: 1px solid rgba(42, 42, 61, .5); }

.trackwin .trow.na { opacity: .6; }
.trackwin .tones { margin: 0; background: none; border-left: 0;}

.trackwin .trow .heart, .trackwin .tone .playbtn { box-shadow: none; }
/* the category's icon in the title: the bare instrument glyph in its colour (no tile behind it) */
.cat-btn .cg { flex: none; width: 26px; height: 26px; background: var(--acc); -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
/* the Volume card: a label and its value (it no longer folds) */
.vcard .vh { cursor: default; }
/* Choose a Category: each one as the theme's own track button */
.catgrid .tbx { display: block; margin: 0; overflow: visible; border-radius: 0; --cell: 54px; --r: 8px; }
.catgrid .tbx .tbtn { margin: 0; }
.catgrid:not(.st-image) .tbx .tbtn img { display: none; }
.catgrid:not(.st-image) .tbx .tbtn .g { display: block; }
.catcell .tbx .tbtn img { border-radius: 0; box-shadow: none; }
.catcell.sel .tbx .tbtn { outline: 2px solid var(--accent); outline-offset: 3px; }
.catcell .cn { text-align: center; }
.catcell.sel .cn { color: var(--accent); }
/* ---- Change Track: the picked pattern has a soft accent wash (no bar, no check). An open pattern and its tones are one
   piece: a single softly tinted rounded block with a faint accent outline. Tones are numbered; the picked one is shown
   quietly — its number and name in the accent — with the preview button beside it ---- */
.trackwin .trow.cur { box-shadow: none; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 16%, transparent), transparent 75%); }
.trackwin .trow.cur .tn { color: var(--acc); font-weight: 700; }
.trackwin .trow.open, .trackwin .tones { margin-left: 8px; margin-right: 8px; border-bottom: 0;}
.trackwin .trow.open { border-radius: 14px 14px 0 0; margin-top: 6px; padding-left: 12px; padding-right: 8px; }

.trackwin .tones { border-radius: 0 0 14px 14px; margin-bottom: 6px; }
   /* a hairline between the pattern and its tones */
.trackwin .tone { display: flex; align-items: center; gap: 8px; padding: 2px 0; min-height: 40px; border-radius: 0; background: none; box-shadow: none; margin: 0; }
.trackwin .tone .tapply { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; font: 600 15px var(--font); color: rgba(235, 235, 245, .72); }
.trackwin .tone .tno { flex: none; width: var(--tnw, 20px); text-align: right; font: 600 12px var(--mono); color: rgba(235, 235, 245, .38); }
.trackwin .tone.sel .tapply { color: var(--acc); }
.trackwin .tone.sel .tno { color: var(--acc); }
.trackwin .tone .pstat { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
	background: color-mix(in srgb, var(--acc) 35%, rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); }
.trackwin .tone .pstat.live { animation: pstat-flash 1.1s ease-in-out infinite; }
/* the search box's Search button */
.tsearch .tgo { flex: none; padding: 7px 14px; border-radius: 999px; font: 700 13px var(--font); color: #fff; background: color-mix(in srgb, var(--acc, #29B6F6) 55%, rgba(255, 255, 255, .08));
	box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35); }
.tsearch { padding: 6px 6px 6px 14px; }
/* Change Track's header holds three buttons at the left now (Filter, Search, Reset): smaller buttons and title so the
   category's name fits */
.trackwin .sh-head .circle-ic { width: 38px; height: 38px; font-size: 15px; }
.trackwin .sh-head .l, .trackwin .sh-head .r { gap: 6px; }
.sheet .sh-head > .headrow { grid-column: 1 / -1; margin: 4px 0 0; }   /* a header row (UI.headRow: the search bars) */
.trackwin .sh-head .tsearch, .sheet .sh-head .sbar .sin, .sheet .sh-head .sbar .scope { -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); }
.trackwin .cat-btn { min-width: 0;}
.trackwin .cat-btn .cg { width: 22px; height: 22px; }
.trackwin .sh-head h2 { min-width: 0; }
/* performance: while a window is open, the main screen's own animations (hint arrows, glows) pause — under the windows'
   glass every moving pixel is re-blurred on every frame */
body:has(.sheet:not(.closing)) #studio *, body:has(.sheet:not(.closing)) #studio *::before, body:has(.sheet:not(.closing)) #studio *::after { animation-play-state: paused !important; }
/* the picked pattern's Variation button (opens / closes its tone list) and its preview button while the tones are closed */
.trackwin .trow .tvar { flex: none; display: flex; align-items: center; height: 30px; border-radius: 999px; font: 700 12px var(--font); color: #fff;
	background: color-mix(in srgb, var(--acc) 30%, rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--acc) 60%, rgba(255, 255, 255, .3));}
.trackwin .trow .tvar svg { font-size: 10px; }
.trackwin .trow .tvar.on { background: color-mix(in srgb, var(--acc) 50%, rgba(255, 255, 255, .06)); }
.trackwin .trow .pstat { flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
	background: color-mix(in srgb, var(--acc) 35%, rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3); }
.trackwin .trow .pstat.live { animation: pstat-flash 1.1s ease-in-out infinite; }
.trackwin .trow { gap: 8px; }
/* Change Track's volume, folded: a small button at the bottom right — a speaker over a tiny slider picture (it shows the
   level, it is not a control); tap to open the full card, which folds back with its own button */
.trackwin .vcard .vmini { display: none; }
.trackwin .vcard.vsmall { left: auto; padding: 0;}
.trackwin .vcard.vsmall .vh, .trackwin .vcard.vsmall input { display: none; }
.trackwin .vcard.vsmall .vmini { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff;}
.trackwin .vcard .mk { position: relative; display: block; width: 30px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.trackwin .vcard .mk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--acc); }
.trackwin .vcard .mk b { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, .5); }
.trackwin .vcard .vh { gap: 8px; }
.trackwin .vcard .vfold { flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.trackwin .vcard .vh b { margin-left: auto; }

/* the picked row's buttons, left to right: Variation, Preview, Favorite */
.trackwin .trow .tvar { margin-left: 4px; }
/* the Variation button's double chevron: big and bold, bobbing gently while closed; up (still) while the tones are open */
.trackwin .trow .tvar { gap: 5px; padding: 0 8px 0 12px; }
.trackwin .trow .tvar svg.dchev { font-size: 15px; animation: dchev 1.2s ease-in-out infinite; }
.trackwin .trow .tvar.on svg.dchev { transform: rotate(180deg); animation: none; }
@keyframes dchev { 0%, 100% { transform: translateY(-1.5px); opacity: .8; } 50% { transform: translateY(2px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .trackwin .trow .tvar svg.dchev { animation: none; } }
/* the full Volume card, taller now that it folds away: a bigger label, a thick track and a large knob */
.trackwin .vcard:not(.vsmall) { padding: 14px 18px 16px; gap: 12px; }
.trackwin .vcard:not(.vsmall) .vh { font-size: 17px; }
.trackwin .vcard:not(.vsmall) .vh b { font-size: 14px; }
.trackwin .vcard input[type=range] { -webkit-appearance: none; appearance: none; height: 30px; background: none; margin: 0; }
.trackwin .vcard input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--acc) 0 var(--pct, 50%), rgba(255, 255, 255, .16) var(--pct, 50%)); }
.trackwin .vcard input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.trackwin .vcard input[type=range]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--acc); }
.trackwin .vcard input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .45), 0 0 0 3px color-mix(in srgb, var(--acc) 45%, transparent); }
.trackwin .vcard input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
.trackwin.vol-mini .tlist { padding-bottom: 90px; }
.trackwin:not(.vol-mini) .tlist { padding-bottom: 150px; }
/* the picked pattern's row while its preview plays: Discovery's little equalizer after its name, in the category colour */
.trackwin .trow .nowi { display: none; flex: none; align-items: flex-end; gap: 2px; height: 14px; margin: 0 2px 0 0; }
.trackwin .trow.playing .nowi { display: inline-flex; }
.trackwin .trow .nowi b { width: 3px; border-radius: 1px; background: var(--acc); transform-origin: bottom; animation: nowi .9s ease-in-out infinite; }
.trackwin .trow .nowi b:nth-child(1) { height: 60%; animation-delay: -.3s; } .trackwin .trow .nowi b:nth-child(2) { height: 100%; animation-delay: -.6s; } .trackwin .trow .nowi b:nth-child(3) { height: 45%; }
.trackwin .trow .tn { align-items: center; }
/* the folded volume button: a circle */
.trackwin .vcard.vsmall { border-radius: 50%;}
.trackwin .vcard.vsmall .vmini { gap: 6px; font-size: 18px; border-radius: 50%; }
.trackwin .vcard.vsmall .mk { width: 24px; }
/* the Variation button: the Publish button's glow and sweeping shine */
.trackwin .trow .tvar { position: relative; overflow: hidden; animation: pub-glow 3.2s ease-in-out infinite; }
/* PURCHASE: a small, soft gold glow that breathes, and a faint sweep (not Variation's blue glow) */
.trackwin .trow .pbuy { overflow: hidden; animation: pbuy-glow 2.8s ease-in-out infinite; }
.trackwin .trow .pbuy::after { --gk-shine: .55; }   /* (the strong sweep, as every lit button) */
@keyframes pbuy-glow {
	0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(120, 70, 0, .25), 0 3px 10px rgba(0, 0, 0, .3), 0 0 0 0 rgba(255, 201, 60, 0); }
	50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(120, 70, 0, .25), 0 3px 10px rgba(0, 0, 0, .3), 0 0 8px 1px rgba(255, 201, 60, .5); } }
@media (prefers-reduced-motion: reduce) { .trackwin .trow .tvar, .trackwin .trow .tvar::after, .trackwin .trow .pbuy, .trackwin .trow .pbuy::after, .trackwin .trow .tvar.shrink, .trackwin .trow .tvar.grow, .trackwin .trow .tvar .tvl { animation: none; } }
/* Variation's glow stays around Variation: a tight glow (the Publish one spread over the preview button beside it and
   tinted half of it), and the preview button sits above it */
.trackwin .trow .tvar { margin-right: 2px;}
.trackwin .trow .pstat { position: relative; z-index: 1; }
/* the folded volume circle: the same gap at the right and at the bottom */
.trackwin .vcard.vsmall { right: 16px; bottom: 16px; }
/* ✕ beside ✓ (cancel / confirm): a plain button, no highlight or animation */
.circle-ic.cancel { animation: none; }
.bvpop .bvhead b { padding-left: 8px;}
/* Change Track's volume: the circle grows into the card and shrinks back (width, height and corners animate; the
   contents fade in once it has room) */
.trackwin .vcard { left: auto; right: 16px; width: calc(100% - 32px); height: 98px; box-sizing: border-box;
	transition: width .34s cubic-bezier(.32, .72, 0, 1), height .34s cubic-bezier(.32, .72, 0, 1), border-radius .34s cubic-bezier(.32, .72, 0, 1), bottom .34s cubic-bezier(.32, .72, 0, 1), padding .34s; }
.trackwin .vcard.vsmall { width: 58px; height: 58px; }
.trackwin .vcard:not(.vsmall) .vh, .trackwin .vcard:not(.vsmall) input { animation: fade .3s .12s both; }
.trackwin .vcard.vsmall .vmini { animation: fade .25s .1s both; }
@media (prefers-reduced-motion: reduce) { .trackwin .vcard { transition: none; } }
/* the value in the same size as "Volume" */
.trackwin .vcard:not(.vsmall) .vh b { font: 600 17px var(--font); }
/* the picked tone (the tone list open): a glass panel */
.trackwin .tone.sel { border-radius: 12px;}
/* the full Volume card: "Volume  64" together at the left; at the right a round glass button in the category's colour
   with arrows pointing in (back to the small button) */
.trackwin .vcard:not(.vsmall) .vh b { margin-left: 2px; color: var(--acc); }
.trackwin .vcard .vfold { margin-left: auto; margin-right: -6px; width: 34px; height: 34px; font-size: 14px; color: #fff;
	box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 10px rgba(0, 0, 0, .35); transition: transform .15s;}
.trackwin .vcard .vfold:active { transform: scale(.88); }
.trackwin .vcard .vfold { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 38%, rgba(24, 24, 36, .85)), color-mix(in srgb, var(--acc) 18%, rgba(14, 14, 22, .9))); }   /* (dark enough for the white arrows on any category colour) */
.trackwin .vcard .vh .vfold svg { color: #fff; font-size: 14px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }   /* (not the grey of the old header icons) */
/* ---- Change Track: opening the tone list must not move anything in the pattern's row. The box around the row and its
   tones is drawn as a layer behind them (::before), inset 8px from the list's sides — the row keeps exactly its own
   padding and height. Inside the box the tones have the same room left and right, and so does the picked tone's glass ---- */
.trackwin .trow.open, .trackwin .tones { margin: 0; background: none; box-shadow: none; border-radius: 0; position: relative; isolation: isolate; }
.trackwin .trow.open { padding: 12px 12px 12px 16px; border-bottom: 1px solid transparent; }
.trackwin .trow.open::before { content: ""; position: absolute; left: 8px; right: 8px; top: 4px; bottom: -1px; z-index: -1; pointer-events: none; border-radius: 14px 14px 0 0;
	background: color-mix(in srgb, var(--acc) 9%, transparent);
	box-shadow: inset 1px 0 0 color-mix(in srgb, var(--acc) 28%, transparent), inset -1px 0 0 color-mix(in srgb, var(--acc) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--acc) 28%, transparent); }
.trackwin .trow.open.cur { background: none; }
.trackwin .trow.open.cur::before { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 20%, transparent), color-mix(in srgb, var(--acc) 9%, transparent) 75%); }
.trackwin .tones { padding: 6px 20px 16px; border-bottom: 1px solid rgba(42, 42, 61, .5); }
.trackwin .tones::before { content: ""; display: block; position: absolute; left: 8px; right: 8px; top: 0; bottom: 8px; height: auto; margin: 0; z-index: -1; pointer-events: none; border-radius: 0 0 14px 14px;
	background: color-mix(in srgb, var(--acc) 9%, transparent);
	box-shadow: inset 1px 0 0 color-mix(in srgb, var(--acc) 28%, transparent), inset -1px 0 0 color-mix(in srgb, var(--acc) 28%, transparent), inset 0 -1px 0 color-mix(in srgb, var(--acc) 28%, transparent); }
.trackwin .tones::after { position: absolute; left: 20px; right: 20px; top: 0; height: 1px; background: color-mix(in srgb, var(--acc) 18%, transparent); pointer-events: none;}   /* the hairline between the pattern and its tones */

/* the picked tone's glass: one layer that slides to the new tone (every tone keeps the same size, picked or not) */
.trackwin .tone.sel { margin: 0; padding: 2px 0; background: none; box-shadow: none; }
.trackwin .tone { position: relative; z-index: 1; }
.trackwin .tones .tsel { position: absolute; left: 12px; right: 12px; top: 0; height: 0; z-index: 0; pointer-events: none; border-radius: 12px; opacity: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .05));
	box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .3), inset 0 1px 0 rgba(255, 255, 255, .22), 0 4px 12px rgba(0, 0, 0, .25);
	transition: transform .32s cubic-bezier(.32, .72, 0, 1), height .32s cubic-bezier(.32, .72, 0, 1), opacity .2s; }
@media (prefers-reduced-motion: reduce) { .trackwin .tones .tsel { transition: none; } }
/* the Part / Track windows' selection sliding to the new pick (a ghost of the selection, behind the rows) */
.slidesel-host { position: relative; }
.slidesel-host > :not(.slidesel) { position: relative; z-index: 1; }
.slidesel { position: absolute; top: 0; z-index: 0; pointer-events: none; display: block; }
.prow2.slid, .trow.slid { background: transparent !important; box-shadow: none !important; }
/* the preview-sound list: as wide as its longest name (not the 360px of other popovers) */
.popover.pvmenu { width: max-content; max-width: calc(100vw - 20px);}
.pvmenu .pvopt { white-space: nowrap; }
.popover.pvmenu { min-width: 120px; }
.popover.pvmenu .pv-list { padding: 8px; }
/* the preview-sound list's title on two lines ("Preview / sound"), so the names still set the width */
.popover.pvmenu .pv-head { padding: 10px 8px 4px 14px; align-items: flex-start; gap: 6px; }
.popover.pvmenu .pv-head b { width: min-content; font-size: 15px; line-height: 1.2; }
.popover.pvmenu .pv-head .circle-ic { width: 28px; height: 28px; font-size: 12px; flex: none; }
/* Part window, the whole progression (i): 4 bars a line, fewer on narrow screens */
.pdetail { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 340px) { .pdetail { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 270px) { .pdetail { grid-template-columns: repeat(2, 1fr); } }
/* ✓ in the choosing windows: a plain button like the ✕ beside it until something is changed; then blue, with the
   Publish button's glow and sweeping shine (back to plain if the change is undone) */
.circle-ic.done { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .circle-ic.done.dirty, .circle-ic.done.dirty::after { animation: none; } }
/* ✓ (changed): a natural glow — never fully off, a close soft light and a wide faint haze breathing slowly, over the
   button's own drop shadow and glass edge (the Publish glow went from nothing to a strong ring: it looked switched on/off) */
.circle-ic.done.dirty { animation: done-glow 4.2s ease-in-out infinite; }
@keyframes done-glow {
	0%, 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, .3), inset 0 0 0 .5px rgba(160, 225, 255, .35), 0 0 6px rgba(41, 182, 246, .22), 0 0 18px rgba(41, 182, 246, .10); }
	50% { box-shadow: 0 6px 16px rgba(0, 0, 0, .3), inset 0 0 0 .5px rgba(160, 225, 255, .5), 0 0 9px rgba(64, 196, 255, .34), 0 0 26px rgba(41, 182, 246, .16); }
}
/* a popover's own drop shadow (opt.shadow): a soft, deep shadow under the box, on its own layer */
.pv-shadow { position: fixed; z-index: 110; border-radius: 14px; pointer-events: none; animation: fade .18s;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 6px 14px rgba(0, 0, 0, .35), 0 0 0 .5px rgba(0, 0, 0, .25); }
/* the preview-sound list's unselected items: the same glass as the Part window's unselected progressions (fill + hairline) */
.pvmenu .pvopt:not(.on) { background: linear-gradient(180deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .16); }
/* a popover list that springs back when dragged (see the preview-sound list) */
.popover .pv-list.bounce { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.popover .pv-list.bounce::-webkit-scrollbar { display: none; }
/* the preview button's "playing" pulse without fading the whole button: an opacity animation put the button on a layer of
   its own, which Safari drew as a square (until a scroll repainted it) inside the glass windows. Now only the ring pulses
   and the icon dims a little; the button itself stays a plain, round-clipped circle */
@keyframes pstat-flash { 0%, 100% { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .4), 0 0 0 0 rgba(41, 182, 246, .55); } 50% { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .4), 0 0 0 7px rgba(41, 182, 246, 0); } }
.pstat.live svg { animation: pstat-icon 1.1s ease-in-out infinite; }
@keyframes pstat-icon { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
.pstat { overflow: hidden; }
/* Change Track: no line between the open pattern and its first tone */
.trackwin .tones::after { content: none; display: none; }
/* Change Track's Filter: "Genre" closer to the window's title */
.tfilter .sh-body > h4:first-child { margin-top: 3px; }
/* the tone list's own scroll area (a long list scrolls inside the box; the box's glass stays in place) */
.trackwin .tones .tscroll { position: relative; margin: 0 -8px; padding: 0 8px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.trackwin .tones .tscroll::-webkit-scrollbar { display: none; }
.trackwin .tones .tscroll .tsel { left: 0; right: 0; }
.trackwin .tones .tscroll { padding-top: 2px; padding-bottom: 2px; }   /* (room for the picked glass's 2px overhang: a short list does not scroll) */
/* a header button that is "on" (e.g. Search while the search box is open): the ✓'s blue glass, white icon */
.sheet .sh-head .circle-ic.lit { color: #fff; background: linear-gradient(180deg, rgba(41, 182, 246, .5), rgba(41, 182, 246, .24));
	box-shadow: 0 6px 16px rgba(0, 0, 0, .3), inset 0 0 0 .5px rgba(160, 225, 255, .45); }
/* Change Track: the lit Search button in the category's colour (as Variation and the box's own Search button) */
.trackwin .sh-head .circle-ic.lit { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 62%, rgba(255, 255, 255, .12)), color-mix(in srgb, var(--acc) 32%, rgba(255, 255, 255, .04)));
	box-shadow: 0 6px 16px rgba(0, 0, 0, .3), inset 0 0 0 .5px color-mix(in srgb, var(--acc) 65%, rgba(255, 255, 255, .35)); }
/* Change Track: the category's colour everywhere — Variation's glow, the preview button's ring, the lit ✓ */
.trackwin .trow .tvar { animation-name: tvar-glow-acc; }
@keyframes tvar-glow-acc { 0%, 100% { box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--acc) 60%, rgba(255, 255, 255, .3)), 0 0 0 0 transparent; }
	50% { box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--acc) 60%, rgba(255, 255, 255, .3)), 0 0 6px 0 color-mix(in srgb, var(--acc) 60%, transparent); } }
.trackwin .pstat.live { background: color-mix(in srgb, var(--acc) 60%, rgba(255, 255, 255, .08)); animation-name: pstat-flash-acc; }
@keyframes pstat-flash-acc { 0%, 100% { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .4), 0 0 0 0 color-mix(in srgb, var(--acc) 60%, transparent); }
	50% { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .4), 0 0 0 7px color-mix(in srgb, var(--acc) 0%, transparent); } }
.trackwin .sh-head .circle-ic.done.dirty { background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 62%, rgba(255, 255, 255, .12)), color-mix(in srgb, var(--acc) 32%, rgba(255, 255, 255, .04))); animation-name: done-glow-acc; }
@keyframes done-glow-acc {
	0%, 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, .3), inset 0 0 0 .5px color-mix(in srgb, var(--acc) 50%, rgba(255, 255, 255, .35)), 0 0 6px color-mix(in srgb, var(--acc) 30%, transparent), 0 0 18px color-mix(in srgb, var(--acc) 14%, transparent); }
	50% { box-shadow: 0 6px 16px rgba(0, 0, 0, .3), inset 0 0 0 .5px color-mix(in srgb, var(--acc) 70%, rgba(255, 255, 255, .35)), 0 0 9px color-mix(in srgb, var(--acc) 45%, transparent), 0 0 26px color-mix(in srgb, var(--acc) 20%, transparent); }
}
.trackwin .trow .pstat.live, .trackwin .tone .pstat.live { animation-name: pstat-flash-acc; }   /* (as specific as the older rule) */
/* Change Track's category title is clearly a button: a glass pill (like the Part window's instrument pill), the
   chevron white and bold in a small disc of the category's colour, nudging once as the window opens */

.trackwin .cat-btn .cchev { flex: none; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
	background: linear-gradient(180deg, color-mix(in srgb, var(--acc) 85%, #fff 10%), color-mix(in srgb, var(--acc) 70%, #000 10%));
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(255, 255, 255, .35); }
.trackwin .cat-btn .cchev svg { stroke: currentColor; stroke-width: 1.2px;}
@keyframes cchev-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2.5px); } }
@media (prefers-reduced-motion: reduce) { .trackwin .cat-btn .cchev svg { animation: none; } }
   /* (every category name fits, "Strings" too) */
/* narrow phones (under 390px): room for the category's name — no glyph in the pill, smaller header buttons and text */
@media (max-width: 389px) {
	.trackwin .sh-head .circle-ic { width: 34px; height: 34px; font-size: 14px; }
	.trackwin .sh-head .l, .trackwin .sh-head .r { gap: 4px; }
	.trackwin .cat-btn { font-size: 16px; gap: 4px; padding: 4px 4px 4px 10px; }
	.trackwin .cat-btn .cg { display: none; }
	.trackwin .cat-btn .cchev { width: 20px; height: 20px; font-size: 11px; }
}
   /* ("Purchased", the longest name, fits on a 390px iPhone with its glyph) */
@media (max-width: 340px) { .trackwin .cat-btn { font-size: 15px; padding-left: 8px; } .trackwin .sh-head .l, .trackwin .sh-head .r { gap: 3px; } }
/* up to 399px (iPhone 13/14/15…): slightly smaller header buttons (the glyph stays); under 375px the glyph goes */
@media (max-width: 399px) { .trackwin .sh-head .circle-ic { width: 34px; height: 34px; font-size: 14px; } .trackwin .sh-head .l, .trackwin .sh-head .r { gap: 4px; } }
@media (max-width: 340px) { .trackwin .cat-btn { font-size: 14px; } }   /* (the smallest phones: every name fits) */
/* Change Track's category title: plain text again (no pill); the chevron keeps its disc of the category colour and
   moves gently — the chevron bobs, the disc breathes a soft glow (shadow, not opacity) */
.trackwin .cat-btn { padding: 6px 0; border-radius: 0; background: none; box-shadow: none; font-size: 18px; gap: 7px; }
.trackwin .cat-btn:active { transform: none; opacity: .7; }
.trackwin .cat-btn .cchev { animation: cchev-glow 2.4s ease-in-out infinite; }
.trackwin .cat-btn .cchev svg { animation: cchev-bob 2.4s ease-in-out infinite; }
@keyframes cchev-bob { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(2.5px); } 40% { transform: translateY(-.5px); } }
@keyframes cchev-glow { 0%, 100% { box-shadow: 0 1px 3px rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(255, 255, 255, .35), 0 0 0 0 color-mix(in srgb, var(--acc) 0%, transparent); }
	30% { box-shadow: 0 1px 3px rgba(0, 0, 0, .35), inset 0 0 0 .5px rgba(255, 255, 255, .35), 0 0 8px 1px color-mix(in srgb, var(--acc) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { .trackwin .cat-btn .cchev, .trackwin .cat-btn .cchev svg { animation: none; } }
@media (max-width: 389px) { .trackwin .cat-btn { font-size: 16px; } }
@media (max-width: 340px) { .trackwin .cat-btn { font-size: 14px; } }
   /* the preview pill's down arrow, bigger (same colour) */
.sheet .sh-head .circle-ic.pvsel svg { font-size: 18px; margin-right: -3px; }   /* (the chevron only fills part of its box: 18px reads clearly bigger) */
/* ---- Block Variation's header as every window's: floating over the list (the list scrolls under it), Discovery's light
   blur behind it, the title centred between equal side columns, ✕ ✓ as glass header buttons ---- */
.bvpop { position: fixed; }
.bvpop .bvhead { position: absolute; left: 0; right: 0; top: 0; z-index: 3; isolation: isolate; display: grid; align-items: center; gap: 4px; padding: 10px 8px 8px; background: none;}
.bvpop .bvhead b { grid-column: 2; text-align: center; padding: 0; font: 700 15px var(--font); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bvpop .bvhead .bvr { grid-column: 3; display: flex; justify-content: flex-end;}
.bvpop .bvhead .circle-ic.done.dirty { color: #fff; background: var(--gk-lit); }
.bvpop .bvlist { padding-top: 58px; }   /* (the list starts below the floating header, and scrolls under it) */
/* room for the whole title, still centred: a slightly wider panel and slimmer side columns */
.bvpop { width: min(300px, calc(100vw - 20px)); }
.bvpop .bvhead { grid-template-columns: 70px 1fr 70px; }
.bvpop .bvhead .circle-ic { width: 32px; height: 32px; font-size: 13px; }
.bvpop .bvhead .bvr { gap: 5px; }
/* ---- popovers (Preview sound, the "?" help boxes) with the sub-windows' header: floating over the content, Discovery's
   light blur behind it, a glass ✕; the content scrolls under it (fading there) and springs back when dragged ---- */
.popover .pv-head { position: absolute; left: 0; right: 0; top: 0; z-index: 3; isolation: isolate; border-bottom: 0; background: none; }
.popover .pv-list { overscroll-behavior: contain; scrollbar-width: none; }
.popover .pv-list::-webkit-scrollbar { display: none; }
/* the glass menus' title wraps when it is long (e.g. "Buy this song? …"): shown in full, never cut with … */
.asheet.pop .as-t { white-space: pre-line; overflow: visible; text-overflow: clip; line-height: 1.4; overflow-wrap: anywhere; }

/* ================================================================================================================
   WINDOW KIT — the one definition of the windows' shared look (full windows, fitted windows, Block Variation, popovers).
   Change a value here and every window follows. (Sizes, and each window's own content, stay with the window.)
   ================================================================================================================ */
:root {
	--gk-glass: linear-gradient(to bottom, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04));   /* a glass button's surface */
	--gk-glass-blur: blur(20px) saturate(185%);
	--gk-glass-shadow: 0 6px 16px rgba(0, 0, 0, .3), inset 0 0 0 .5px rgba(255, 255, 255, .06);
	--gk-head-blur: blur(10px);                                                  /* the floating header's blur (Discovery's) */
	--gk-head-reach: -14px;                                                      /* how far it reaches below the header */
	--gk-head-mask: linear-gradient(180deg, #000 55%, transparent 100%);
	--gk-lit: linear-gradient(180deg, rgba(41, 182, 246, .5), rgba(41, 182, 246, .24));   /* a lit button (✓ after a change, Search while open) */
}
/* the floating header: what slides under it is blurred, fading out just below it */
.sheet.lg .sh-head::before, .bvpop .bvhead::before, .popover .pv-head::before { content: ""; position: absolute; inset: 0 0 var(--gk-head-reach); z-index: -1; pointer-events: none;
	background: none; -webkit-backdrop-filter: var(--gk-head-blur); backdrop-filter: var(--gk-head-blur); -webkit-mask: var(--gk-head-mask); mask: var(--gk-head-mask); }
/* the header's round glass buttons */
.sheet .sh-head .circle-ic, .bvpop .bvhead .circle-ic, .popover .pv-head .circle-ic { position: relative; isolation: isolate; color: rgba(235, 235, 245, .85);
	background: var(--gk-glass); -webkit-backdrop-filter: var(--gk-glass-blur); backdrop-filter: var(--gk-glass-blur); box-shadow: var(--gk-glass-shadow); }

/* ---- a song's video (reel.js): the Instagram button beside the like, the window with its preview and Save ---------- */
.sdetail .sd-top .insta svg { font-size: 20px; }
.sdetail .sd-top .insta[hidden] { display: none; }
.reel { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 4px 0 24px; }
.reel .rv { height: min(56vh, 520px); aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #0b0b12;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .45), inset 0 0 0 .5px rgba(255, 255, 255, .16); }
.reel .rv canvas, .reel .rv video { display: block; width: 100%; height: 100%; object-fit: contain; }
.reel .rs { margin: 0; font: 500 14px var(--font); color: rgba(235, 235, 245, .75); font-variant-numeric: tabular-nums; text-align: center; }
.reel .rbar { width: min(260px, 70%); height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.reel .rbar i { display: block; width: 0; height: 100%; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .8); }
.reel .rig, .reel .rsave { width: min(320px, 100%); margin-top: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.reel .rig { background: linear-gradient(100deg, rgba(253, 29, 29, .55), rgba(225, 48, 108, .55) 45%, rgba(131, 58, 180, .55)); color: #fff; }   /* Instagram's colours, in the app's glass */
.reel .rig svg { font-size: 20px; }
.reel .rsave.sec { padding: 12px; border-radius: 14px; font: 600 15px var(--font); color: rgba(235, 235, 245, .9); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .2); }
.reel .rn { margin: 0; max-width: 340px; font: 400 13px/1.45 var(--font); color: rgba(235, 235, 245, .6); text-align: center; }
.reel .rcap { width: min(340px, 100%); display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .14); }
.reel .rcap p { flex: 1; margin: 0; min-width: 0; white-space: pre-line; overflow-wrap: anywhere; font: 400 13px/1.45 var(--font); color: rgba(235, 235, 245, .82); -webkit-user-select: text; user-select: text; }
.reel .rcopy { flex: none; padding: 6px 12px; border-radius: 10px; font: 600 13px var(--font); color: #fff; background: rgba(255, 255, 255, .14); }

/* Admin: the passkey bar (API v1 passkeys) */
.admin .apk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 2px 12px; font-size: 13px; color: var(--t2, #aab); }
.admin .apk:empty { display: none; }
.admin .apk .apk-t { flex: 1 1 100%; }
.admin .apk .pill { padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .08); color: inherit; font: inherit; font-weight: 600; }
.admin .apk .apk-req { display: inline-flex; align-items: center; gap: 6px; }

/* the start screen while logged out (the Studio needs a login; Discovery opens over it) */
.gate { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px 16px;
	background: radial-gradient(120% 90% at 50% 0%, rgba(41, 182, 246, .18), transparent 60%), var(--bg); }
.gate .gcard { width: min(100%, 440px); text-align: center; display: flex; flex-direction: column; gap: 18px; }
.gate h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.5px; }
.gate h1 b { color: var(--accent); }
.gate .glead { margin: 0; color: var(--t2, rgba(255, 255, 255, .7)); font-size: 15px; line-height: 1.5; }
.gate .gtut { border-radius: 14px; overflow: hidden; background: var(--s1); min-height: 200px; }
.gate .gask { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.gate .gask > b { font-size: 18px; }
.gate .gyes { padding: 14px; font-size: 16px; border-radius: 12px; }
.gate .gcode { padding: 13px 14px; font-size: 16px; border-radius: 12px; border: 1px solid var(--line, rgba(255, 255, 255, .2)); background: var(--s1); color: inherit; text-align: center; letter-spacing: .5px; }
.gate .gmail { word-break: break-all; }
.gate .gsub { margin: 0; font-size: 13px; color: var(--t2, rgba(255, 255, 255, .6)); }
.gate .gsub a { color: var(--accent); }
.gate .glink { background: none; border: 0; color: var(--accent); font-size: 15px; padding: 8px; cursor: pointer; }

/* the tag after a nickname (API badge): the official admin account */
.ubadge { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 4px; font: 700 9px/1.4 var(--font); letter-spacing: .5px; font-style: normal; vertical-align: 1px; background: rgba(255, 255, 255, .16); color: #fff; }
.ubadge.admin { background: var(--accent); color: #fff; }
/* the crown: the bottom of the DRAWN crown on the nickname's baseline (owner 2026-10-04): the icon box puts it on the line, and the
   crown sits 2.2px above its box's bottom (the 24-unit path's own margin, at 13px), so it moves down by that */
.ucrown { display: inline-flex; margin-left: 2px; vertical-align: baseline; align-self: baseline; position: relative; top: var(--crown-dy, 2.2px); font-style: normal; color: #ffc93c; filter: drop-shadow(0 0 3px rgba(255, 201, 60, .45)); }
.srow .si small .ucrown { margin-left: -4px; --crown-dy: .2px; }   /* (a flex line: its baseline alignment sits the icon 2px low) */   /* (that line is a flex row with a 6px gap: the crown stays 2px from the nickname) */
.ucrown svg, .srow .si small .ucrown svg { width: 13px; height: 13px; font-size: inherit; color: #ffc93c; fill: currentColor; opacity: 1; }

/* ---- performance (2026-10-02): decorative motion runs only while it shows something. Every frame of any animation
   re-renders the large blurred glass around it (the full player, the windows): a paused player kept the page at full
   CPU through a finger hint at opacity 0, the list's "now playing" bars and the progress knob's halo */
body > .mini:not(.tapping) .tap .hand, body > .mini:not(.tapping) .tap .rip { animation: none; }   /* the hint: only while it shows */
body:has(.sdetail) > .mini .tap, body:has(.sdetail) > .mini .hint { animation: none; display: none; }   /* (the full player covers the mini player) */
body:not(.pplay) .srow .nowi b, body:not(.pplay) .sd-body .track b::after, body:not(.pplay) > .mini .mprog b::after { animation-play-state: paused; }

/* ---- Settings > Auto Composer Settings (2026-10-02): genre and tempo, each with Random ---------------------------------- */
.set .composer .clab { color: var(--t3); font: 600 12px var(--font); margin: 2px 0 -4px; }
.set .composer .segs.cg { grid-template-columns: repeat(4, 1fr); }
.set .composer .segs.ct { grid-template-columns: repeat(5, 1fr); }
.set .composer .segs button { flex-direction: row; justify-content: center; gap: 4px; padding: 10px 2px; }
.set .composer .segs.ct button b { font: 700 14px var(--mono); }
.set .composer .segs.ct button small { font: 600 9px var(--font); opacity: .7; }
.set .composer .segs button .rnd { font-style: normal; font-size: 13px; }
.set .composer .segs button:disabled { opacity: .3; cursor: default; }

/* ---- the composing robot (Composer, 2026-10-02): in the middle of the screen while a song is composed (at least ~2.6 s) -- */
.robo { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; background: rgba(8, 8, 14, .35);
	opacity: 0; transition: opacity .3s ease; pointer-events: auto; }
.robo.in { opacity: 1; }
.robo.out { opacity: 0; }
.robo .rcard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 34px 22px; border-radius: 26px; min-width: 220px;
	background: linear-gradient(180deg, rgba(40, 40, 60, .78), rgba(20, 20, 32, .86)); -webkit-backdrop-filter: blur(22px) saturate(160%); backdrop-filter: blur(22px) saturate(160%);
	box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .22), 0 18px 50px rgba(0, 0, 0, .45); transform: scale(.94); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.robo.in .rcard { transform: none; }
.robo .rcard b { font: 700 16px var(--font); color: #fff; margin-top: 4px; }
.robo .rcard .step { font: 500 13px var(--font); color: rgba(235, 235, 245, .7); min-height: 18px; }
.robo .rbot { width: 132px; height: 132px; overflow: visible; }
.robo .rbot .head { fill: #3a3f5c; stroke: rgba(255, 255, 255, .35); stroke-width: 1.5; }
.robo .rbot .face { fill: #12141f; }
.robo .rbot .eye { fill: #6ee7ff; filter: drop-shadow(0 0 4px rgba(110, 231, 255, .9)); transform-box: fill-box; transform-origin: center; animation: robo-blink 3s infinite, robo-look 2.6s ease-in-out infinite; }
.robo .rbot .ant { stroke: rgba(255, 255, 255, .5); stroke-width: 2.5; stroke-linecap: round; }
.robo .rbot .bulb { fill: #ff6b9a; filter: drop-shadow(0 0 5px rgba(255, 107, 154, .9)); animation: robo-bulb 1.1s ease-in-out infinite; }
.robo .rbot .body { fill: #4a5072; stroke: rgba(255, 255, 255, .25); stroke-width: 1.2; }
.robo .rbot .arm rect { fill: #5b628a; }
.robo .rbot .arm { transform-box: fill-box; }
.robo .rbot .arm.l { transform-origin: 100% 50%; animation: robo-tap .36s ease-in-out infinite alternate; }
.robo .rbot .arm.r { transform-origin: 0% 50%; animation: robo-tap .36s ease-in-out .18s infinite alternate; }
.robo .rbot .keys { fill: #1b1d2b; stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.robo .rbot .key { fill: #e9ecff; animation: robo-key 1.4s steps(1) infinite; }
.robo .rbot .key.k1 { animation-delay: -.2s; } .robo .rbot .key.k2 { animation-delay: -.5s; } .robo .rbot .key.k3 { animation-delay: -.9s; }
.robo .rbot .key.k4 { animation-delay: -.35s; } .robo .rbot .key.k5 { animation-delay: -1.1s; } .robo .rbot .key.k6 { animation-delay: -.7s; }
.robo .notes { position: absolute; left: 50%; top: 18px; width: 0; height: 0; pointer-events: none; }
.robo .notes i { position: absolute; font-style: normal; font-size: 18px; color: #ffd166; opacity: 0; text-shadow: 0 0 8px rgba(255, 209, 102, .7); animation: robo-note 1.8s ease-out infinite; }
.robo .notes i:nth-child(1) { left: -58px; animation-delay: 0s; } .robo .notes i:nth-child(2) { left: 40px; color: #6ee7ff; animation-delay: .45s; }
.robo .notes i:nth-child(3) { left: -30px; color: #ff6b9a; animation-delay: .9s; } .robo .notes i:nth-child(4) { left: 24px; color: #a29bfe; animation-delay: 1.35s; }
@keyframes robo-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes robo-look { 0%, 100% { translate: -1.5px 0; } 50% { translate: 1.5px 0; } }
@keyframes robo-bulb { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes robo-tap { from { transform: rotate(-10deg) translateY(-1px); } to { transform: rotate(8deg) translateY(2px); } }
@keyframes robo-key { 0%, 70% { fill: #e9ecff; } 71%, 85% { fill: #6ee7ff; } 86%, 100% { fill: #e9ecff; } }
@keyframes robo-note { 0% { transform: translate(0, 70px) scale(.7) rotate(-8deg); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(var(--nx, 6px), -10px) scale(1.1) rotate(10deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .robo *, .robo .rbot * { animation: none !important; } .robo .notes { display: none; } }


/* Performance Monitor (Settings): tiny, top right, never in the way of a touch (owner 2026-10-05: the iOS layout). One size for
   every line; labels neutral, values green / yellow / red; the dot at the top left: the worst colour shown */
.perfmon { position: fixed; z-index: 9999; right: max(6px, env(safe-area-inset-right)); top: calc(env(safe-area-inset-top, 0px) + 4px); pointer-events: none;
	font: 600 10px/1.4 var(--mono, ui-monospace, monospace); color: rgba(235, 235, 245, .8); background: rgba(0, 0, 0, .62); padding: 4px 7px 4px 14px; border-radius: 7px; white-space: nowrap; }
.perfmon small { font-size: inherit; }
.perfmon b { font-weight: 700; color: #fff; } .perfmon .g { color: #4cd964; } .perfmon .y { color: #ffd166; } .perfmon .r { color: #ff6b6b; }
.perfmon .pmdot { position: absolute; left: 5px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: #4cd964; }
.perfmon .pmdot.y { background: #ffd166; } .perfmon .pmdot.r { background: #ff6b6b; }

/* the MIDI tone list (owner 2026-10-04): DEEP (the same sound with the deep reverb) at the row's end */
.trackwin .tone.hasdeep { display: flex; align-items: center; }
.trackwin .tone.hasdeep .tapply { flex: 1; min-width: 0; }
.trackwin .tone .tdeep { flex: none; position: relative; z-index: 1; margin-right: 8px; height: 26px; padding: 0 9px; border-radius: 13px; font: 800 10px/1 var(--font); letter-spacing: .08em;
	color: rgba(235, 235, 245, .6); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.trackwin .tone .tdeep.on { color: #0b0b12; background: var(--acc); box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 55%, transparent); }

/* the MIDI tone list as Track window items (owner 2026-10-04: hundreds of tones): the instrument's badge and the name in the
   item's size, the style below in the item's small size, the row exactly as tall as a pattern row (the same padding and a
   1px border where the pattern rows have their hairline; tests/tone_style_rows_test.py measures both). The text inherits the
   list's line height, as the pattern rows do (the button's own font would reset it). The audio tracks' list is unchanged */
.trackwin .tones.midi .tone, .trackwin .tones.midi .tone.sel { padding: 12px 0; min-height: 0; border-bottom: 1px solid transparent; }
.trackwin .tones.midi .tone .tapply { line-height: inherit; }
.trackwin .tones.midi .tone .tapply .tinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; overflow: hidden; white-space: normal; text-overflow: clip; }
.trackwin .tones.midi .tone .tapply .tn { flex: none; display: flex; align-items: center; gap: 6px; min-width: 0; overflow: visible; white-space: normal; font: 600 15px var(--font); }
.trackwin .tones.midi .tone .tapply .tnm { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.trackwin .tones.midi .tone .tapply .ts { flex: none; font-size: 12px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: color-mix(in srgb, var(--acc) 80%, transparent); }
.trackwin .tones.midi .tone.hid .tapply .tnm { flex: 0 1 auto; }
/* the instrument badge (development only): its short name in a small rounded tag, a colour per family (--fc), on a dark
   fill of its own so it reads on every theme and background */
.fam { --fc: #8E8E93; flex: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 26px; height: 15px; padding: 0 4px; border-radius: 5px;
	font: 800 9px/1 var(--font); letter-spacing: .02em; font-style: normal; white-space: nowrap; color: color-mix(in srgb, var(--fc) 40%, #fff);
	background: color-mix(in srgb, var(--fc) 30%, rgba(12, 12, 20, .82)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fc) 75%, transparent); }
/* the Style / Instrument filter buttons (development only), left of Variation on the MIDI track's picked performance; lit
   while they filter. The title gives way (one line, an ellipsis) so they and Variation always fit; under 360px Variation
   keeps only its arrows (the compact form PURCHASE uses). As tall as Variation (owner 2026-10-05) */
.trackwin .trow .tflt { flex: none; display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 6px 0 8px; border-radius: 999px; white-space: nowrap;
	font: 700 12px/1 var(--font); color: rgba(235, 235, 245, .82); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }   /* (Variation's label: 700 12px, owner 2026-10-05) */
.trackwin .trow .tflt.on { color: #fff; background: color-mix(in srgb, var(--acc) 35%, rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 70%, transparent); }
.trackwin .trow .tflt .fchev { display: flex; font-size: 8px; opacity: .75; }
.trackwin .trow .tflt .fam { margin-left: -3px; }
.trackwin .trow .tflt + .tflt { margin-left: -4px; }
.trackwin .trow.mfrow .tinfo { overflow: hidden; }
.trackwin .trow.mfrow .tn > span { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trackwin .trow.mfrow .ts { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 359px) { .trackwin .trow.mfrow .tvar:not(.compact) { width: 30px; padding: 0; gap: 0; justify-content: center; } .trackwin .trow.mfrow .tvar .tvl { display: none; } }
.popover.mfmenu .pvopt { display: flex; align-items: center; gap: 8px; }
.popover.mfmenu .pv-list { max-height: none; }   /* Style / Inst.: the whole list when it fits (windows.js filterMenu sizes it to the screen) */

/* auto preview (owner 2026-10-05; a long press on a Track window item's preview button): the button as in a normal preview
   (a spinner, then pause), only pink (--pink) while it runs; the selection itself moves from item to item (no ring of its own) */
.trackwin .trow .pstat.auto { background: var(--pink); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .45); }
.trackwin .trow .pstat.auto.live { background: var(--pink); animation-name: pstat-flash-pink; }
@keyframes pstat-flash-pink { 0%, 100% { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .45), 0 0 0 0 color-mix(in srgb, var(--pink) 65%, transparent); }
	50% { box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .45), 0 0 0 7px color-mix(in srgb, var(--pink) 0%, transparent); } }
/* admin tone marks (owner 2026-10-05): the tag after the name in the mark's colour; no mark (the rules unshow it): UNSHOWN */
.unshown[data-mark="distorted"] { color: #FFB86B; border-color: rgba(255, 159, 10, .75); }
.unshown[data-mark="misfit"] { color: #D7A8FF; border-color: rgba(191, 90, 242, .75); }
.unshown[data-mark="weak"] { color: #C8C8D4; border-color: rgba(200, 200, 212, .6); }
.tone.hid[data-mark="distorted"] { outline-color: rgba(255, 159, 10, .6); }
.tone.hid[data-mark="misfit"] { outline-color: rgba(191, 90, 242, .6); }

/* ---- performance with a mouse / trackpad (2026-10-05) ------------------------------------------------------------------
   Owner's report: an iPad Pro (120 Hz, large screen) with a Bluetooth mouse — the pointer stuttered and fps fell to 0 while it
   moved. Crystal gave every lit block and track button its own live backdrop blur (100+ layers re-rendered on every move).
   Since 2026-10-05 Crystal uses a pre-blurred copy of the background instead (see "Crystal, see-through" above), for mouse
   and touch alike — no per-device switch. The bottom bar's few glass buttons keep their blur. */
/* the playhead moves by transform on a layer of its own (main.js): no layout or repaint of the blocks under it each frame */
.seq .ph-line { left: 0; will-change: transform; }

/* ---- the full player with a mouse (2026-10-05) ---------------------------------------------------------------------
   Owner's report: an iPad Pro 12.9 (M1, ProMotion) with a Bluetooth mouse — the full player at 60 fps while the mouse
   rested, falling to 0 while it moved (the iPad mini by touch was fine). Each pointer move draws a new frame, and each frame
   re-renders every live backdrop-filter: the player's glass (blur 30px over ~560 x 1290 px) lay over the Discovery window's
   (the same size again, nested), with seven glass buttons on top. Now (discovery.js "the full player's glass, made once"):
   - the player's glass is ONE picture of what lies behind it, blurred once (--sdglass: the page background through the
     windows' scrims, glass and tints, then the player's own blur(30px) saturate(170%)), placed where the screen is behind it
     (--sdgx / --sdgy, the screen's size --sdgw / --sdgh); its drifting colour (--ph) lies over it as before. .sdcopy is set
     when the picture is ready (from the cache: before the first frame); without it the live glass stays, as before
   - the windows the settled player covers completely are hidden (.sd-hid, shown again the moment it moves or closes), and
     whatever stays under it (the Studio, the hidden mini player) pauses its animations
   - its glass buttons have no blur of their own: behind them is that smooth picture (blurring it again showed the same)
   Still live: the two scroll-edge bands (top 76px, bottom 96px: small; the top one is the soft edge over the record).
   What looks different: the faint wash of the Discovery list's covers and the Studio's blocks no longer shows through the
   player's glass (the picture holds the background, the windows' scrims, glass and tints, not their contents). */
.sdetail.sdcopy:not(.swapin) { -webkit-backdrop-filter: none; backdrop-filter: none;
	background: linear-gradient(180deg, hsl(var(--ph, 230) 45% 30% / .6) 0%, hsl(calc(var(--ph, 230) + 18) 40% 18% / .66) 45%, rgba(12, 12, 20, .72) 100%),
		var(--sdglass) var(--sdgx, 0px) var(--sdgy, 0px) / var(--sdgw, 100vw) var(--sdgh, 100vh) no-repeat #12121c;
	background-origin: border-box; }
.sdetail.sdcopy .sd-top .circle-ic, .sdetail.sdcopy .sd-body .tr button, .sdetail.sdcopy .sd-body .buy .primary.wide { -webkit-backdrop-filter: none; backdrop-filter: none; }
body:has(.sdetail) .sheet.sd-hid { visibility: hidden; }
body:has(.sdetail) .sheet.sd-hid *, body:has(.sdetail) .sheet.sd-hid *::before, body:has(.sdetail) .sheet.sd-hid *::after,
body:has(.sdetail) #studio *, body:has(.sdetail) #studio *::before, body:has(.sdetail) #studio *::after,
body:has(.sdetail) > .mini *, body:has(.sdetail) > .mini *::before, body:has(.sdetail) > .mini *::after { animation-play-state: paused !important; }

/* an admin dragging a MIDI performance or tone into order (windows.js dragOrder, owner 2026-10-05): it lifts over the others */
.trackwin .trow.dragging, .trackwin .tones.dragging, .trackwin .tone.dragging { position: relative; z-index: 6; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); -webkit-user-select: none; user-select: none; cursor: grabbing; }
.trackwin .tone.dragging { background: rgba(255, 255, 255, .1); border-radius: 12px; }
/* the Track window's filter button while a style filters the list (owner 2026-10-05: the filter is a dropdown of styles) */
.trackwin .sh-head .circle-ic.on { color: #fff; background: color-mix(in srgb, var(--acc, #29b6f6) 42%, rgba(255, 255, 255, .08)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc, #29b6f6) 70%, transparent); }

/* the full player's scroll-edge blur, graduated (owner 2026-10-06: it came on in one step — a single blur layer under a fading
   mask is full strength wherever it shows, so content crossed into it all at once). Three layers instead, each a stronger blur
   over a shorter stretch at the very edge; stacked, the blur grows smoothly toward the edge (2 + 4 + 8 px ~ 9 px at the edge,
   as the old 10 px). Small bands (76 / 96 px high): about three times the old band's pixels, still a fraction of a frame */
.sdetail::before, .sdetail::after { content: none; display: none; }
.sdetail > .sdpb { position: sticky; display: block; left: 0; right: 0; z-index: 2; pointer-events: none; }
.sdetail > .sdpb.t { top: 0; height: 76px; margin-bottom: -76px; }
.sdetail > .sdpb.b { bottom: 0; height: 96px; margin-top: -96px; z-index: 3; }
.sdetail.swapin > .sdpb.b { display: none; }
.sdpb i { position: absolute; inset: 0; }
.sdpb.t i:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); mask: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%); }
.sdpb.t i:nth-child(2) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask: linear-gradient(180deg, #000 0%, #000 30%, transparent 72%); mask: linear-gradient(180deg, #000 0%, #000 30%, transparent 72%); }
.sdpb.t i:nth-child(3) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask: linear-gradient(180deg, #000 0%, #000 12%, transparent 45%); mask: linear-gradient(180deg, #000 0%, #000 12%, transparent 45%); }
.sdpb.b i:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); -webkit-mask: linear-gradient(0deg, #000 0%, #000 50%, transparent 100%); mask: linear-gradient(0deg, #000 0%, #000 50%, transparent 100%); }
.sdpb.b i:nth-child(2) { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); -webkit-mask: linear-gradient(0deg, #000 0%, #000 28%, transparent 68%); mask: linear-gradient(0deg, #000 0%, #000 28%, transparent 68%); }
.sdpb.b i:nth-child(3) { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); -webkit-mask: linear-gradient(0deg, #000 0%, #000 10%, transparent 42%); mask: linear-gradient(0deg, #000 0%, #000 10%, transparent 42%); }
/* the Track window's volume card (mini and full) above the list (owner 2026-10-06: a tap on the mini volume button went to the
   row underneath — the rows' play buttons have z-index 1, the card had none) and above the bottom scroll-edge blur (4) */
.trackwin .vcard { z-index: 5; }
/* Admin > Payments / Refunds (2026-10-07): a user's orders, a Refund button on each refundable PayPal payment */
.acard .ords { margin-top: 8px; }
.acard .ord { position: relative; padding: 9px 92px 9px 0; border-top: 1px solid rgba(255, 255, 255, .09); font-size: 13px; line-height: 1.45; }
.acard .ord small { opacity: .7; }
.acard .ord .rf { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding: 6px 14px; min-height: 0; }
/* Admin > Feedback (2026-10-07): one inbox for every app */
.fbbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.acard.fb .fbh { margin-bottom: 6px; } .acard.fb .fbsrc { font-family: ui-monospace, Menlo, monospace; color: #7fd0ff; }
.acard.fb .fbc, .acard.fb .fbrt { white-space: pre-wrap; font-size: 13px; line-height: 1.45; opacity: .92; }
.acard.fb .fbr { margin-top: 8px; padding: 8px 10px; border-left: 3px solid #29b6f6; background: rgba(41, 182, 246, .08); border-radius: 4px; }
.acard.fb .fbin { width: 100%; box-sizing: border-box; margin-top: 8px; }
.acard.fb .fbbtn { display: flex; gap: 8px; margin-top: 6px; }