/*
 * Gradespace Music: practice tools (tuner, metronome). Loaded only with the
 * blocks. Colours come from the theme palette through blocks.css's --gsmu-*
 * tokens; each design ("look", from gsmu_look()) gets its own character:
 *   classic  a white card around a night-blue instrument face, warm needle
 *   stage    the whole tool on the night colour, gold highlights
 *   staff    flat and bordered, a light face with stave lines
 *   studio   rounder, the face in the brand colour
 */

.gsmu-practice {
	--p-card: var(--gsmu-surface);
	--p-ink: var(--gsmu-ink);
	--p-muted: var(--gsmu-muted);
	--p-line: var(--gsmu-line);
	--p-chip: var(--gsmu-surface);
	--p-chip-on: var(--gsmu-brand);
	--p-chip-on-ink: var(--gsmu-on-brand);
	--p-face: var(--gsmu-night);
	--p-face-glow: color-mix(in srgb, var(--gsmu-brand) 55%, transparent);
	--p-face-ink: #fff;
	--p-face-muted: rgb(255 255 255 / 0.66);
	--p-face-line: rgb(255 255 255 / 0.16);
	--p-hand: var(--gsmu-gold);
	--p-good: #4ade80;
	--p-good-ink: #146c35;
	--p-radius: var(--wp--custom--radius--lg, 24px);
	--p-radius-in: var(--wp--custom--radius--md, 16px);
	position: relative;
	container-type: inline-size;
	max-width: 40rem;
	margin-inline: auto;
	padding: clamp(1rem, 4vw, 1.75rem);
	border: 1px solid var(--p-line);
	border-radius: var(--p-radius);
	background: var(--p-card);
	color: var(--p-ink);
	box-shadow: var(--gsmu-shadow);
	font-size: 1rem;
	line-height: 1.5;
}
.gsmu-practice.alignwide { max-width: var(--wp--style--global--wide-size, 1200px); }
.gsmu-practice p { margin: 0; }
:where(.gsmu-practice) button:where(:not(.wp-element-button)) { font: inherit; color: inherit; }
.gsmu-practice button { cursor: pointer; }
.gsmu-practice button:disabled { cursor: not-allowed; }
.gsmu-practice :focus-visible { outline: 3px solid var(--gsmu-brand); outline-offset: 2px; }
.gsmu-practice .gsmu-pi { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Header row ---------- */
.gsmu-tuner__bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1rem; }
.gsmu-practice__eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem; color: var(--gsmu-brand);
	font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.gsmu-tuner__pickers { display: flex; flex-wrap: wrap; gap: 0.6rem; flex: 1 1 18rem; justify-content: flex-end; }
.gsmu-tuner__field { display: grid; gap: 0.2rem; flex: 1 1 9rem; max-width: 15rem; font-size: 0.8125rem; font-weight: 600; color: var(--p-muted); }
.gsmu-tuner__field[hidden] { display: none; }
.gsmu-tuner__field select {
	width: 100%; min-height: 44px; padding: 0.45rem 2.2rem 0.45rem 0.8rem; border: 1px solid var(--p-line); border-radius: var(--gsmu-radius-sm);
	background: var(--p-chip) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 0.8rem center;
	color: var(--p-ink); font: inherit; font-size: 0.9375rem; font-weight: 600; appearance: none; cursor: pointer;
}
.gsmu-tuner__field select:disabled { opacity: 1; cursor: default; background-image: none; }

/* ---------- The instrument face (shared by both tools) ---------- */
.gsmu-tuner__face, .gsmu-metronome__face {
	position: relative; overflow: hidden; border-radius: var(--p-radius-in);
	background: radial-gradient(120% 85% at 50% 0%, var(--p-face-glow), transparent 62%), var(--p-face);
	color: var(--p-face-ink); isolation: isolate;
}
.gsmu-tuner__face { padding: 1.25rem 1rem 0.5rem; }
.gsmu-tuner__gauge { display: block; width: 100%; max-width: 34rem; height: auto; margin: 0 auto; overflow: visible; }
.gsmu-tuner__track { fill: none; stroke: var(--p-face-line); stroke-width: 2; }
.gsmu-tuner__zone { fill: none; stroke: var(--p-good); stroke-width: 10; stroke-linecap: round; opacity: 0.35; transition: opacity 0.25s, filter 0.25s; }
.gsmu-tuner__ticks line { stroke: var(--p-face-muted); stroke-width: 1.5; stroke-linecap: round; }
.gsmu-tuner__ticks .is-minor { opacity: 0.55; }
.gsmu-tuner__ticks .is-major { stroke: var(--p-face-ink); stroke-width: 2; opacity: 0.8; }
.gsmu-tuner__labels text { fill: var(--p-face-muted); font: 600 11px/1 var(--wp--preset--font-family--body, system-ui, sans-serif); text-anchor: middle; font-variant-numeric: tabular-nums; }
.gsmu-tuner__end { fill: var(--p-face-muted); font: 400 22px/1 var(--gsmu-font-display, serif); text-anchor: middle; }
.gsmu-tuner__needle { transform-box: view-box; transform-origin: 160px 180px; transition: transform 0.12s linear, opacity 0.3s; }
.gsmu-tuner__needle line { stroke: var(--p-hand); stroke-width: 3.5; stroke-linecap: round; }
.gsmu-tuner__needle circle { fill: var(--p-hand); stroke: var(--p-face); stroke-width: 3; }
.gsmu-tuner__readout { position: absolute; inset: auto 0 6% 0; text-align: center; pointer-events: none; }
.gsmu-tuner__note {
	display: inline-flex; align-items: flex-start; justify-content: center; font-family: var(--gsmu-font-display); font-weight: 700;
	font-size: clamp(3.75rem, 17vw, 6.25rem); line-height: 0.95; letter-spacing: -0.02em; font-variant-numeric: lining-nums; transition: color 0.25s, opacity 0.3s;
}
.gsmu-tuner__octave { align-self: flex-end; margin: 0 0 0.02em 0.05em; font-size: 0.36em; font-weight: 600; color: var(--p-face-muted); letter-spacing: 0; }
.gsmu-tuner__cents { margin-top: 0.35rem !important; color: var(--p-face-muted); font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.gsmu-tuner__cents-n { display: inline-block; min-width: 2.2em; text-align: right; color: var(--p-face-ink); font-size: 1.05rem; }
.gsmu-tuner__face[data-state="idle"] .gsmu-tuner__needle, .gsmu-tuner__face[data-state="quiet"] .gsmu-tuner__needle { opacity: 0.35; }
.gsmu-tuner__face[data-state="idle"] .gsmu-tuner__note, .gsmu-tuner__face[data-state="quiet"] .gsmu-tuner__note { opacity: 0.5; }
.gsmu-tuner__face[data-state="in-tune"] .gsmu-tuner__note, .gsmu-tuner__face[data-state="in-tune"] .gsmu-tuner__cents-n { color: var(--p-good); }
.gsmu-tuner__face[data-state="in-tune"] .gsmu-tuner__zone { opacity: 1; filter: drop-shadow(0 0 6px var(--p-good)); }
.gsmu-tuner__face[data-state="in-tune"] .gsmu-tuner__needle line, .gsmu-tuner__face[data-state="in-tune"] .gsmu-tuner__needle circle { stroke: var(--p-good); }
.gsmu-tuner__face[data-state="in-tune"] .gsmu-tuner__needle circle { fill: var(--p-good); stroke: var(--p-face); }
.gsmu-tuner__face::after { /* The in-tune glow. */
	content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; transition: opacity 0.3s;
	background: radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--p-good) 28%, transparent), transparent 70%);
}
.gsmu-tuner__face[data-state="in-tune"]::after { opacity: 1; }

.gsmu-tuner__status { margin: 0.9rem 0 0.25rem !important; min-height: 1.5em; text-align: center; font-weight: 700; font-size: 1.0625rem; color: var(--p-ink); }
.gsmu-tuner__face[data-state="in-tune"] + .gsmu-tuner__status { color: var(--p-good-ink); }

/* ---------- String buttons ---------- */
.gsmu-tuner__strings { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0.9rem 0 0; }
.gsmu-tuner__strings[hidden] { display: none; }
.gsmu-tuner__string {
	display: inline-flex; align-items: baseline; justify-content: center; gap: 0.08em; min-width: 3.25rem; min-height: 3.25rem; padding: 0.35rem 0.7rem;
	border: 1.5px solid var(--p-line); border-radius: 999px; background: var(--p-chip); color: var(--p-ink);
	font-family: var(--gsmu-font-display) !important; font-size: 1.3rem !important; font-weight: 700; line-height: 1; align-items: center;
	transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.gsmu-tuner__string small { font-family: var(--wp--preset--font-family--body, inherit); font-size: 0.6em; font-weight: 600; opacity: 0.7; align-self: flex-end; margin-bottom: 0.15em; }
.gsmu-tuner__string.is-auto { font-family: inherit !important; font-size: 0.875rem !important; letter-spacing: 0.04em; padding-inline: 1rem; }
.gsmu-tuner__string:hover { border-color: var(--gsmu-brand); }
.gsmu-tuner__string.is-target { border-color: var(--p-chip-on); box-shadow: inset 0 0 0 1.5px var(--p-chip-on); }
.gsmu-tuner__string[aria-pressed="true"] { background: var(--p-chip-on); border-color: var(--p-chip-on); color: var(--p-chip-on-ink); }

/* ---------- Footer row: start, A4 / tap ---------- */
.gsmu-tuner__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; }
.gsmu-practice__go {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; flex: 1 1 12rem; min-height: 52px;
	padding: 0.75rem 1.5rem; font-size: 1.0625rem; font-weight: 700; cursor: pointer;
}
.gsmu-practice__go .gsmu-pi { width: 1.2em; height: 1.2em; }
.gsmu-metronome__start .gsmu-pi { fill: currentColor; stroke-width: 1; }
.gsmu-practice.is-running .gsmu-practice__go { background: transparent; color: var(--p-ink); border: 2px solid currentColor; box-shadow: none; }
.gsmu-practice.is-running.gsmu-tuner .gsmu-tuner__start .gsmu-pi { color: #d93025; animation: gsmu-rec 1.6s ease-in-out infinite; }
@keyframes gsmu-rec { 50% { opacity: 0.35; } }

.gsmu-practice__stepper { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.2rem; border: 1px solid var(--p-line); border-radius: 999px; background: var(--p-chip); }
.gsmu-practice__step {
	display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--p-ink);
	transition: background 0.15s;
}
.gsmu-practice__step:hover { background: var(--gsmu-tint); }
.gsmu-practice__value { min-width: 6.5rem; text-align: center; font-variant-numeric: tabular-nums; font-size: 0.9375rem; color: var(--p-muted); }
.gsmu-practice__value strong { color: var(--p-ink); font-size: 1.125rem; }
.gsmu-practice__label { font-weight: 700; color: var(--p-ink); }

.gsmu-practice__msg { margin-top: 1rem !important; padding: 0.85rem 1rem; border-radius: var(--gsmu-radius-sm); background: #fdecea; color: #7a1a13; font-weight: 600; }
.gsmu-practice__msg[hidden] { display: none; }
.gsmu-practice__privacy { display: flex; align-items: flex-start; gap: 0.55rem; margin-top: 1.1rem !important; padding-top: 1rem; border-top: 1px solid var(--p-line); color: var(--p-muted); font-size: 0.875rem; }
.gsmu-practice__privacy .gsmu-pi { width: 1.05rem; height: 1.05rem; margin-top: 0.15rem; color: var(--gsmu-brand); }
.gsmu-practice__privacy kbd {
	flex: none; padding: 0.05rem 0.5rem; border: 1px solid var(--p-line); border-bottom-width: 2px; border-radius: 6px;
	background: var(--p-chip); color: var(--p-ink); font: 600 0.75rem/1.5 inherit; font-family: inherit;
}
.gsmu-practice__hint { margin-top: 0.6rem !important; color: var(--p-muted); font-size: 0.875rem; }
.gsmu-practice__hint[hidden] { display: none; }

/* ---------- Metronome ---------- */
.gsmu-metronome__face { padding: 1.5rem 1rem 1.25rem; text-align: center; }
.gsmu-metronome__beats { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(0.4rem, 2vw, 0.75rem); margin: 0 0 1.1rem; padding: 0; list-style: none; }
.gsmu-metronome__beats li {
	display: grid; place-items: center; width: clamp(2.3rem, 9vw, 2.9rem); aspect-ratio: 1; margin: 0; border: 2px solid var(--p-face-line); border-radius: 999px;
	color: var(--p-face-muted); font-size: 0.875rem; font-weight: 700; transition: background 0.08s, border-color 0.08s, color 0.08s;
}
.gsmu-metronome__beats[data-beats="6"] li:nth-child(4) { margin-left: clamp(0.4rem, 3vw, 1.25rem); }
.gsmu-metronome__beats li.is-accent { border-color: color-mix(in srgb, var(--p-hand) 70%, transparent); color: var(--p-face-ink); }
.gsmu-metronome__beats li.is-on { background: var(--p-face-ink); border-color: var(--p-face-ink); color: var(--p-face); }
.gsmu-metronome__beats li.is-on.is-accent { background: var(--p-hand); border-color: var(--p-hand); color: var(--p-face); }
.gsmu-metronome__beats li.is-pulse { animation: gsmu-beat 0.18s ease-out; }
@keyframes gsmu-beat { from { transform: scale(1.22); } to { transform: scale(1); } }
.gsmu-metronome__tempo { display: flex; align-items: baseline; justify-content: center; gap: 0.4rem; }
.gsmu-metronome__bpm { font-family: var(--gsmu-font-display); font-size: clamp(3.75rem, 16vw, 5.75rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.gsmu-metronome__unit { color: var(--p-face-muted); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.14em; }
.gsmu-metronome__marking { margin-top: 0.15rem !important; min-height: 1.5em; color: var(--p-hand); font-family: var(--gsmu-font-display); font-style: italic; font-size: 1.125rem; }
.gsmu-metronome__slider { display: flex; align-items: center; gap: 0.6rem; max-width: 26rem; margin: 1rem auto 0; }
.gsmu-metronome__slider .gsmu-practice__step { flex: none; border: 1.5px solid var(--p-face-line); color: var(--p-face-ink); }
.gsmu-metronome__slider .gsmu-practice__step:hover { background: rgb(255 255 255 / 0.1); }
.gsmu-metronome__range {
	--gsmu-fill: 30%; flex: 1; height: 44px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer;
}
.gsmu-metronome__range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(to right, var(--p-hand) var(--gsmu-fill), var(--p-face-line) var(--gsmu-fill)); }
.gsmu-metronome__range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--p-face-line); }
.gsmu-metronome__range::-moz-range-progress { height: 6px; border-radius: 99px; background: var(--p-hand); }
.gsmu-metronome__range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border: 4px solid var(--p-face); border-radius: 50%; background: var(--p-hand); box-shadow: 0 0 0 2px var(--p-hand); }
.gsmu-metronome__range::-moz-range-thumb { width: 18px; height: 18px; border: 4px solid var(--p-face); border-radius: 50%; background: var(--p-hand); box-shadow: 0 0 0 2px var(--p-hand); }
.gsmu-metronome__range:focus-visible { outline: none; }
.gsmu-metronome__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--p-hand), 0 0 0 6px color-mix(in srgb, var(--p-hand) 40%, transparent); }

.gsmu-metronome__options { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 1.25rem; margin-top: 1.25rem; }
.gsmu-metronome__opt { display: grid; gap: 0.35rem; }
.gsmu-metronome__opt-label { font-size: 0.8125rem; font-weight: 600; color: var(--p-muted); }
.gsmu-practice__seg { display: inline-flex; flex-wrap: wrap; gap: 0.2rem; padding: 0.2rem; border: 1px solid var(--p-line); border-radius: 999px; background: var(--p-chip); }
.gsmu-practice__seg button {
	min-width: 2.9rem; min-height: 40px; padding: 0.3rem 0.8rem; border: 0; border-radius: 999px; background: transparent; color: var(--p-ink);
	font-weight: 700; font-variant-numeric: tabular-nums; transition: background 0.15s, color 0.15s;
}
.gsmu-practice__seg button:hover:not(:disabled) { background: var(--gsmu-tint); }
.gsmu-practice__seg button[aria-pressed="true"] { background: var(--p-chip-on); color: var(--p-chip-on-ink); }
.gsmu-practice__seg button:disabled { opacity: 0.38; }
.gsmu-practice__switch { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.gsmu-practice__switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gsmu-practice__switch-ui { position: relative; flex: none; width: 2.75rem; height: 1.6rem; border-radius: 99px; background: var(--p-line); transition: background 0.15s; }
.gsmu-practice__switch-ui::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 0.3); transition: transform 0.15s; }
.gsmu-practice__switch input:checked + .gsmu-practice__switch-ui { background: var(--p-chip-on); }
.gsmu-practice__switch input:checked + .gsmu-practice__switch-ui::after { transform: translateX(1.15rem); }
.gsmu-practice__switch input:focus-visible + .gsmu-practice__switch-ui { outline: 3px solid var(--gsmu-brand); outline-offset: 2px; }
.gsmu-practice__tap {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; flex: 1 1 10rem; min-height: 52px; padding: 0.7rem 1.25rem;
	border: 2px solid var(--p-line); border-radius: 999px; background: var(--p-chip); color: var(--p-ink); font-weight: 700 !important;
	transition: border-color 0.15s, background 0.15s;
}
.gsmu-practice__tap:hover { border-color: var(--gsmu-brand); }
.gsmu-practice__tap.is-pulse { animation: gsmu-tap 0.25s ease-out; }
@keyframes gsmu-tap { from { background: var(--gsmu-tint); border-color: var(--gsmu-brand); } }

/* ---------- Designs ---------- */
/* Stage Lights: the whole tool on the night colour, in gold. */
.gsmu-practice.is-look-stage {
	--p-card: color-mix(in srgb, var(--gsmu-night) 94%, #fff);
	--p-ink: #fff;
	--p-muted: rgb(255 255 255 / 0.72);
	--p-line: rgb(255 255 255 / 0.16);
	--p-chip: rgb(255 255 255 / 0.05);
	--p-chip-on: var(--gsmu-gold);
	--p-chip-on-ink: var(--gsmu-night);
	--p-face: var(--gsmu-night);
	--p-face-glow: color-mix(in srgb, var(--gsmu-gold) 22%, transparent);
	--p-good-ink: var(--p-good);
	border-color: rgb(255 255 255 / 0.08);
	box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.55);
	background: radial-gradient(80% 60% at 85% 0%, color-mix(in srgb, var(--gsmu-accent) 22%, transparent), transparent 60%), var(--p-card);
}
.gsmu-practice.is-look-stage .gsmu-practice__eyebrow, .gsmu-practice.is-look-stage .gsmu-practice__privacy .gsmu-pi { color: var(--gsmu-gold); }
.gsmu-practice.is-look-stage .gsmu-tuner__face, .gsmu-practice.is-look-stage .gsmu-metronome__face { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08); }
.gsmu-practice.is-look-stage .gsmu-practice__step:hover, .gsmu-practice.is-look-stage .gsmu-practice__seg button:hover:not(:disabled) { background: rgb(255 255 255 / 0.1); }
.gsmu-practice.is-look-stage .gsmu-tuner__string:hover, .gsmu-practice.is-look-stage .gsmu-practice__tap:hover { border-color: var(--gsmu-gold); }
.gsmu-practice.is-look-stage :focus-visible { outline-color: var(--gsmu-gold); }
.gsmu-practice.is-look-stage .gsmu-tuner__field select { background-color: rgb(255 255 255 / 0.06); color: #fff; }
.gsmu-practice.is-look-stage .gsmu-tuner__field select option { color: #111; }
.gsmu-practice.is-look-stage .gsmu-practice__switch-ui { background: rgb(255 255 255 / 0.22); }
.gsmu-practice.is-look-stage .gsmu-practice__tap.is-pulse { animation-name: gsmu-tap-stage; }
@keyframes gsmu-tap-stage { from { background: rgb(255 255 255 / 0.16); border-color: var(--gsmu-gold); } }

/* The Staff: flat and bordered; a light face with stave lines. */
.gsmu-practice.is-look-staff {
	--p-face: var(--gsmu-surface);
	--p-face-glow: transparent;
	--p-face-ink: var(--gsmu-ink);
	--p-face-muted: var(--gsmu-muted);
	--p-face-line: var(--gsmu-line);
	--p-hand: var(--gsmu-brand);
	--p-good: #157f3b;
	--p-good-ink: #157f3b;
	--p-chip-on: var(--gsmu-ink);
	--p-chip-on-ink: var(--gsmu-surface);
	--p-radius: 6px;
	--p-radius-in: 4px;
	box-shadow: none;
	border-color: var(--gsmu-ink);
}
.gsmu-practice.is-look-staff .gsmu-tuner__face, .gsmu-practice.is-look-staff .gsmu-metronome__face {
	border: 1px solid var(--gsmu-line);
	background:
		repeating-linear-gradient(to bottom, transparent 0, transparent 13px, color-mix(in srgb, var(--gsmu-ink) 9%, transparent) 13px, color-mix(in srgb, var(--gsmu-ink) 9%, transparent) 14px) center 58% / 100% 71px no-repeat,
		var(--p-face);
}
.gsmu-practice.is-look-staff .gsmu-tuner__face { background-position: center 76%, 0 0; }
.gsmu-practice.is-look-staff .gsmu-metronome__face { background-position: center 49%, 0 0; }
.gsmu-practice.is-look-staff .gsmu-tuner__string, .gsmu-practice.is-look-staff .gsmu-practice__seg, .gsmu-practice.is-look-staff .gsmu-practice__seg button,
.gsmu-practice.is-look-staff .gsmu-practice__stepper, .gsmu-practice.is-look-staff .gsmu-practice__tap { border-radius: 4px; }
.gsmu-practice.is-look-staff .gsmu-tuner__needle circle { stroke: var(--gsmu-surface); }
.gsmu-practice.is-look-staff .gsmu-metronome__beats li.is-on { background: var(--gsmu-ink); border-color: var(--gsmu-ink); color: var(--gsmu-surface); }
.gsmu-practice.is-look-staff .gsmu-metronome__beats li.is-on.is-accent { background: var(--gsmu-brand); border-color: var(--gsmu-brand); color: #fff; }
.gsmu-practice.is-look-staff .gsmu-metronome__slider .gsmu-practice__step:hover { background: var(--gsmu-tint); }
.gsmu-practice.is-look-staff .gsmu-tuner__face[data-state="in-tune"] .gsmu-tuner__zone { filter: none; }

/* Studio Colour: rounder, the face in the brand colour. */
.gsmu-practice.is-look-studio {
	--p-face: var(--gsmu-brand);
	--p-face-glow: color-mix(in srgb, var(--gsmu-accent) 45%, transparent);
	--p-face-muted: rgb(255 255 255 / 0.78);
	--p-face-line: rgb(255 255 255 / 0.28);
	--p-chip: var(--gsmu-surface);
	--p-radius: 32px;
	--p-radius-in: 26px;
	--p-good: #7ef0a8;
	border: 0;
	background: var(--gsmu-tint);
	box-shadow: none;
}
.gsmu-practice.is-look-studio .gsmu-tuner__face, .gsmu-practice.is-look-studio .gsmu-metronome__face {
	background: radial-gradient(60% 70% at 100% 0%, var(--p-face-glow), transparent 70%), radial-gradient(50% 60% at 0% 100%, color-mix(in srgb, var(--gsmu-gold) 35%, transparent), transparent 70%), var(--p-face);
}
.gsmu-practice.is-look-studio .gsmu-tuner__string { border-color: transparent; box-shadow: 0 1px 2px rgb(20 16 30 / 0.08); }
.gsmu-practice.is-look-studio .gsmu-tuner__string.is-target { border-color: var(--gsmu-brand); }
.gsmu-practice.is-look-studio .gsmu-practice__seg, .gsmu-practice.is-look-studio .gsmu-practice__stepper, .gsmu-practice.is-look-studio .gsmu-practice__tap { border-color: transparent; }
.gsmu-practice.is-look-studio .gsmu-practice__privacy { border-top-color: color-mix(in srgb, var(--gsmu-brand) 18%, transparent); }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.gsmu-practice *, .gsmu-practice *::after { animation: none !important; transition: none !important; }
}
.gsmu-practice.is-reduced .gsmu-tuner__needle { transition: none; }

/* ---------- Wider screens ---------- */
@media (min-width: 600px) {
	.gsmu-tuner__face { padding: 1.5rem 1.5rem 0.75rem; }
	.gsmu-practice__go { flex: 0 1 auto; min-width: 13rem; }
	.gsmu-practice__tap { flex: 0 1 auto; }
}

/* ---------- Narrow (phones, narrow columns) ---------- */
@container (max-width: 34rem) {
	.gsmu-tuner__pickers { flex-basis: 100%; }
	.gsmu-tuner__field { max-width: none; flex-basis: 100%; }
	.gsmu-tuner__strings { flex-wrap: nowrap; gap: 0.3rem; }
	.gsmu-tuner__string { flex: 1 1 0; min-width: 0; max-width: 3.4rem; padding-inline: 0.2rem; font-size: 1.15rem !important; }
	.gsmu-tuner__string.is-auto { flex: none; max-width: none; padding-inline: 0.7rem; font-size: 0.8125rem !important; }
	.gsmu-tuner__face { padding: 0.9rem 0.5rem 0.25rem; }
	.gsmu-practice__go, .gsmu-practice__tap, .gsmu-practice__stepper { flex: 1 1 100%; }
	.gsmu-practice__stepper { justify-content: space-between; }
	.gsmu-metronome__options { display: grid; justify-content: stretch; }
	.gsmu-practice__seg { display: flex; }
	.gsmu-practice__seg button { flex: 1; }
}

/* ---------- Without the licence ---------- */
.gsmu-practice-locked { max-width: 40rem; margin-inline: auto; padding: 0.85rem 1rem; border: 1px dashed var(--gsmu-line); border-radius: var(--gsmu-radius-sm); color: var(--gsmu-muted); font-size: 0.9375rem; }
.gsmu-practice-upsell .gsc-lic-upsell {
	display: flex; gap: 1rem; max-width: 40rem; margin-inline: auto; padding: 1.5rem; border: 1px dashed color-mix(in srgb, var(--gsmu-brand) 45%, transparent);
	border-radius: var(--gsmu-radius); background: var(--gsmu-tint); color: var(--gsmu-ink); font-size: 0.9375rem; line-height: 1.55;
}
.gsmu-practice-upsell .gsc-lic-upsell__icon {
	flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--gsmu-brand); font-size: 0; color: transparent;
	-webkit-mask: none; position: relative;
}
.gsmu-practice-upsell .gsc-lic-upsell__icon::before {
	content: ""; position: absolute; inset: 0.6rem; background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%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' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gsmu-practice-upsell .gsc-lic-upsell p { margin: 0 0 0.5rem; }
.gsmu-practice-upsell .gsc-lic-upsell__eyebrow { color: var(--gsmu-brand); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.gsmu-practice-upsell .gsc-lic-upsell__title { margin: 0 0 0.4rem; font-family: var(--gsmu-font-display); font-size: 1.4rem; line-height: 1.2; }
.gsmu-practice-upsell .gsc-lic-upsell__more { color: var(--gsmu-muted); }
.gsmu-practice-upsell .gsc-lic-upsell__note { color: var(--gsmu-muted); font-size: 0.8125rem; }
.gsmu-practice-upsell .gsc-lic-upsell__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 !important; }
.gsmu-practice-upsell .button {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0.4rem 1rem; border: 1.5px solid var(--gsmu-brand); border-radius: 999px;
	background: transparent; color: var(--gsmu-brand); font-weight: 600; text-decoration: none;
}
.gsmu-practice-upsell .button-primary { background: var(--gsmu-brand); color: #fff; }