html[data-theme] body:has(#practicePage:not([hidden])) {
  background: radial-gradient(ellipse at 55% 40%, #10212b66, transparent 65%), #080d10;
}
html[data-theme] body:has(#practicePage:not([hidden])) .shell {
  width: calc(100% - 48px);
  max-width: 1720px;
  padding: 10px 0 16px;
}
html[data-theme] body:has(#practicePage:not([hidden])) .shell > header {
  position: sticky;
  top: 0;
  z-index: 12;
  background: #080d10;
  flex-wrap: nowrap;
  gap: 14px;
}
html[data-theme] body:has(#practicePage:not([hidden])) .shell > header .brand {
  flex: 0 0 clamp(170px, 16vw, 220px);
}
html[data-theme] body:has(#practicePage:not([hidden])) .global-state {
  flex: 0 1 auto;
  order: 0;
  width: auto;
  padding: 0;
  border: 0;
  gap: 8px;
  font-size: 11px;
}
html[data-theme] body:has(#practicePage:not([hidden])) .main-nav {
  flex: 1 1 auto;
  order: 0;
  justify-content: flex-start;
}
html[data-theme] body:has(#practicePage:not([hidden])) :is(#globalRecording, #globalTuner) { display: none; }
html[data-theme] body:has(#practicePage:not([hidden]))::before,
html[data-theme] body:has(#practicePage:not([hidden]))::after,
html[data-theme] body:has(#practicePage:not([hidden])) .shell::before,
html[data-theme] body:has(#practicePage:not([hidden])) .shell::after { display: none; }
html[data-theme] body:has(#practicePage:not([hidden])) .shell > footer {
  display: none;
}
#practicePage .practice-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
html[data-theme] #practicePage[data-practice-neon] {
  --practice-cyan: #78c7d0;
  --practice-border: #304751;
  --practice-instrument-height: clamp(210px, 34vh, 370px);
  position: relative;
  padding-top: clamp(20px, 3vh, 36px);
  isolation: isolate;
}
html[data-theme] #practicePage[data-practice-neon] .page-heading {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0 0 24px;
}
html[data-theme] #practicePage[data-practice-neon] .page-heading::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, #446879, #213641);
}
html[data-theme] #practicePage[data-practice-neon] .page-heading h1 {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  color: #d5e4e9;
}
html[data-theme] #practicePage[data-practice-neon] .practice-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: clamp(20px, 4vh, 44px);
}
html[data-theme] #practicePage[data-practice-neon] .practice-cards {
  display: flex;
  gap: 0;
  border: 0;
  margin: 0;
  min-width: 0;
}
html[data-theme] #practicePage[data-practice-neon] .practice-card {
  flex: 0 1 205px;
  min-width: 170px;
  min-height: 44px;
  border: 1px solid #394252;
  border-radius: 5px;
  background: #0c131a80;
  color: #aaaec4;
  box-shadow: none;
}
html[data-theme] #practicePage[data-practice-neon] .practice-card.selected {
  color: #a9e2e6;
  background: linear-gradient(115deg, #18333c, #102027);
  border-color: var(--practice-cyan);
  box-shadow: 0 0 16px #75c7d026, inset 0 0 12px #75c7d019;
  text-shadow: 0 0 10px #75c7d04a;
}
html[data-theme] #practicePage[data-practice-neon] .practice-workspace {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
#practicePage .practice-dock { display: contents; }
html[data-theme] #practicePage[data-practice-neon] .practice-header {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
html[data-theme] #practicePage[data-practice-neon] .practice-settings {
  order: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  padding: 12px 20px;
  margin: 0;
  border: 1px solid var(--practice-border);
  border-radius: 7px;
  background: linear-gradient(110deg, #111b22, #0b1117);
  box-shadow: inset 0 1px #9abec50b;
}
#practicePage .practice-tempo {
  display: flex;
  align-items: center;
  gap: 12px;
}
html[data-theme] #practicePage[data-practice-neon] .practice-settings label {
  font-size: 14px;
  color: #b7cbd3;
}
html[data-theme] #practicePage[data-practice-neon] .practice-settings input[type=number] {
  width: 70px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  font: 30px/1 ui-monospace, monospace;
  text-align: center;
  appearance: textfield;
}
#practicePage #practiceBpm::-webkit-inner-spin-button { appearance: none; }
html[data-theme] #practicePage[data-practice-neon] .practice-settings select {
  height: 40px;
  min-width: 130px;
  border: 1px solid #405966;
  background: #0a131a;
  color: #c4d7de;
}
html[data-theme] #practicePage[data-practice-neon] .practice-tempo button {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 24px;
  background: #111d26;
  color: #bed5e0;
  border: 1px solid #44616f;
}
#practicePage .practice-record-toggle > span:first-child { color: #d995ab; }
#practicePage .practice-record-toggle { position: relative; }
#practicePage .practice-record-toggle input {
  position: absolute;
  right: 0;
  width: 64px;
  height: 34px;
  opacity: 0;
  z-index: 1;
  cursor: pointer;
}
#practicePage .practice-switch {
  display: block;
  width: 64px;
  height: 32px;
  border: 1px solid #536270;
  border-radius: 18px;
  background: #18212b;
}
#practicePage .practice-switch::before {
  content: '';
  display: block;
  width: 22px;
  height: 22px;
  margin: 4px;
  border-radius: 50%;
  background: #91a3b4;
  transition: transform 150ms;
}
#practicePage .practice-record-toggle input:checked + .practice-switch { background: #522e42; border-color: #bf819d; }
#practicePage .practice-record-toggle input:checked + .practice-switch::before { transform: translateX(30px); background: #edb4c5; }
#practicePage .practice-record-toggle input:focus-visible + .practice-switch { outline: 2px solid #d7e8f0; outline-offset: 3px; }
html[data-theme] #practicePage[data-practice-neon] #practiceConnectHint {
  display: flex;
  align-items: center;
  margin: 0;
  gap: 12px;
}
html[data-theme] #practicePage[data-practice-neon] #practiceConnect {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #69c2ca;
  background: #10262d;
  color: #a1e2e6;
  box-shadow: 0 0 14px #75c7d016, inset 0 0 12px #75c7d010;
}
#practicePage .practice-icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-theme] #practicePage[data-practice-neon] .practice-help {
  width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid #49616e;
  border-radius: 50%;
  background: transparent;
  color: #adc6d2;
  font-size: 16px;
}
html[data-theme] #practicePage[data-practice-neon] .practice-live {
  order: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(210px, 21vw, 300px);
  gap: 24px;
  border: 0;
  background: none;
}
html[data-theme] #practicePage[data-practice-neon] :is(.fret-area, .practice-hand) {
  display: grid;
  align-content: center;
  min-width: 0;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
html[data-theme] #practicePage[data-practice-neon] .practice-hand {
  padding-left: 24px;
  border-left: 1px solid #263e4a;
}
html[data-theme] #practicePage[data-practice-neon] #fretboard {
  height: var(--practice-instrument-height);
}
html[data-theme] #practicePage[data-practice-neon] #fretboard svg {
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: visible;
}
#practicePage .board-structure .neck-body { fill: url(#practiceNeckShade); stroke: #4d7181; }
#practicePage .board-structure .neck-grain { fill: url(#practiceNeckGrain); stroke: none; }
#practicePage .board-structure .neck-edge { fill: url(#practiceNeckEdge); stroke: #577684; stroke-width: .6; }
#practicePage .board-structure text { fill: #adc4d0; font: 13px sans-serif; }
#practicePage .fret-wire { stroke: #577380; stroke-width: 1.5; }
#practicePage .guitar-string { stroke: #a0b9c3; }
#practicePage .fret-inlay { fill: #90acbc; }
#practicePage .practice-finger { color: var(--finger-color); }
#practicePage .finger-ring { fill: #0b141c; stroke: currentColor; stroke-width: 1.7; opacity: .9; }
#practicePage .finger-halo { fill: var(--finger-glow); opacity: .2; }
#practicePage .finger-bloom { fill: none; stroke: currentColor; stroke-width: 5; opacity: 0; }
#practicePage .practice-finger text { fill: currentColor; font: 500 14px sans-serif; opacity: 1; }
#practicePage .practice-finger.is-current .finger-ring { stroke-width: 2; opacity: 1; fill: currentColor; }
#practicePage .practice-finger.is-current .finger-halo { opacity: .45; }
#practicePage .practice-finger.is-current text { opacity: 1; fill: #081318; }
#practicePage .practice-hand svg { width: 100%; height: var(--practice-instrument-height); overflow: visible; }
#practicePage .hand-outline { fill: url(#practiceHandShade); stroke: #91adbc; stroke-width: 1.7; stroke-linejoin: round; }
#practicePage .hand-haze { fill: none; stroke: #81b9c7; stroke-width: 8; stroke-linejoin: round; opacity: 0; }
#practicePage .hand-nails { fill: #192c37; stroke: #809ba9; stroke-width: 1; }
#practicePage .practice-hand .finger-ring { fill: #10222c; opacity: .9; }
#practicePage .practice-hand .practice-finger.is-current .finger-ring { fill: currentColor; opacity: 1; }
#practicePage :is(.board-glow, .board-trails) { display: none; pointer-events: none; }
#practicePage .board-glow { fill: none; stroke: #78c7d0; stroke-linecap: round; stroke-linejoin: round; }
#practicePage .board-aura { stroke-width: 14; opacity: .025; }
#practicePage .board-haze { stroke-width: 5; opacity: .09; }
#practicePage .finger-trails { color: var(--finger-color); }
#practicePage .trail-halo { fill: var(--finger-glow); }
#practicePage .trail-ring { fill: none; stroke: currentColor; stroke-width: 1.6; }
#practicePage[data-stage=playing] :is(.board-glow, .board-trails) { display: inline; }
#practicePage[data-stage=playing] .guitar-string { stroke: #9ccbd0; }
#practicePage[data-stage=playing] .fret-wire { stroke: #648e99; }
#practicePage[data-stage=playing] .board-structure .neck-body { fill: #0b161d; stroke: #6aabb5; }
#practicePage[data-stage=playing] .finger-halo { opacity: .38; }
#practicePage[data-stage=playing] .finger-bloom { opacity: .07; }
#practicePage[data-stage=playing] .practice-finger.is-current .finger-halo { opacity: 1; }
#practicePage[data-stage=playing] .practice-finger.is-current .finger-bloom { opacity: .25; }
#practicePage[data-stage=playing] .hand-haze { opacity: .12; }
html[data-theme] #practicePage[data-practice-neon][data-practice-kind=chromatic] :is(.pitch-panel, .position-label, .phase-line, .bend-finger) { display: none; }
html[data-theme] #practicePage[data-practice-neon][data-practice-kind=bend] :is(.practice-hand, .board-fingers) { display: none; }
html[data-theme] #practicePage[data-practice-neon][data-practice-kind=bend] .practice-live { grid-template-columns: minmax(0, 1fr) minmax(300px, .5fr); }
html[data-theme] #practicePage[data-practice-neon] #practiceProgress { order: 3; margin: 0; height: 3px; }
html[data-theme] #practicePage[data-practice-neon] #practiceProgressText { order: 4; margin-top: -6px; text-align: right; }
html[data-theme] #practicePage[data-practice-neon] .practice-controls {
  order: 5;
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  min-height: 56px;
}
html[data-theme] #practicePage[data-practice-neon] .practice-controls :is(#practiceStart, #practiceStop, #practiceResume) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-width: 200px;
  padding: 12px 28px;
  border: 1px solid #7ad2db;
  background: #10242c;
  color: #a9e8ed;
  border-radius: 6px;
  font-size: 20px;
  box-shadow: 0 0 15px #6ac5d022, inset 0 0 10px #6ac5d017;
}
html[data-theme] #practicePage[data-practice-neon] #practiceStart:disabled {
  color: #768991;
  border-color: #394d56;
  background: #10191e;
  box-shadow: none;
  opacity: 1;
}
#practicePage .practice-play-icon { width: 0; height: 0; border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 15px solid currentColor; }
#practicePage .practice-stop-icon { width: 16px; height: 16px; background: currentColor; border-radius: 1px; }
#practicePage .practice-volume { order: 6; border: 1px solid var(--practice-border); border-radius: 5px; padding: 0 16px; }
#practicePage .practice-volume > summary { color: #bed0db; padding: 10px 0; }
#practicePage .practice-volume > summary .practice-icon { vertical-align: middle; margin-right: 8px; }
html[data-theme] #practicePage[data-practice-neon] .compact-mixer { display: grid; width: 100%; max-width: none; margin: 0; padding: 12px 0; background: none; border: 0; }
html[data-theme] #practicePage[data-practice-neon] .result-panel { order: 7; margin: 0; padding-top: 16px; }
html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-live { order: 1; }
html[data-theme] #practicePage[data-practice-neon][data-practice-kind] :is(#practiceProgress, #practiceProgressText) { display: none; }
html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-dock {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  order: 5;
  min-width: 0;
  margin-top: 10px;
  padding: 20px 24px;
  border: 1px solid #304e5c;
  border-radius: 10px;
  background: linear-gradient(110deg, #11212ba6, #0b151e99);
  box-shadow: inset 0 1px #8bb6c30a;
}
html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-settings {
  grid-area: auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 30px);
  padding: 0;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-settings > label {
  border-left: 1px solid #2a4351;
  padding-left: clamp(16px, 2vw, 30px);
  min-height: 44px;
  white-space: nowrap;
}
html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-volume {
  position: relative;
  order: 1;
  padding: 0 24px;
  border: 0;
  border-left: 1px solid #2a4351;
  border-right: 1px solid #2a4351;
  border-radius: 0;
}
html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-volume > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  font-size: 14px;
  white-space: nowrap;
  list-style: none;
}
#practicePage[data-practice-kind] .practice-volume > summary::-webkit-details-marker { display: none; }
#practicePage[data-practice-kind] .practice-volume > summary .practice-icon { margin: 0; }
#practicePage[data-practice-kind] .practice-volume > summary::after { content: ''; width: 6px; height: 6px; margin: 0 2px 4px 8px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
#practicePage[data-practice-kind] .practice-volume[open] > summary::after { transform: rotate(225deg); margin-bottom: 0; }
html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-volume .compact-mixer {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: calc(100% + 24px);
  width: min(640px, calc(100vw - 80px));
  padding: 20px;
  border: 1px solid #3c5d6b;
  border-radius: 8px;
  background: #0c1922;
  box-shadow: 0 12px 30px #0009;
}
html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-controls { grid-area: auto; order: 2; }
html[data-theme] #practicePage[data-practice-neon][data-practice-kind] #practiceStart {
  min-width: 176px;
  min-height: 56px;
  background: linear-gradient(120deg, #173640, #0e232d);
  box-shadow: 0 0 16px #79d3db26, inset 0 0 12px #79d3db1c;
  font-size: 22px;
}
html[data-theme] #practicePage[data-practice-neon][data-practice-kind] #practiceStart:disabled {
  background: #10191e;
  box-shadow: none;
}
#practicePage[data-stage=blackout] :is(.page-heading, .practice-toolbar, .practice-live, .practice-dock) { animation: practice-neon-off 700ms linear both; pointer-events: none; }
@keyframes practice-neon-off {
  0%, 15% { opacity: 1; }
  24%, 36% { opacity: .08; }
  42%, 52% { opacity: .85; }
  65%, 100% { opacity: 0; }
}
html[data-theme] #practicePage[data-practice-neon][data-practice-kind]:is([data-stage=count], [data-stage=playing], [data-stage=paused]) [data-practice-setup] { display: none !important; }
html[data-theme] #practicePage[data-practice-neon][data-practice-kind]:is([data-stage=count], [data-stage=playing], [data-stage=paused]) .practice-dock {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
html[data-theme] #practicePage[data-practice-neon][data-practice-kind=chromatic]:is([data-stage=count], [data-stage=playing], [data-stage=paused]) .practice-live {
  min-height: calc(100dvh - var(--practice-header-height, 80px) - 160px);
  align-items: center;
  padding-top: 16px;
}
html[data-theme] #practicePage[data-practice-neon]:is([data-stage=count], [data-stage=playing], [data-stage=paused]) :is(.fret-area, .practice-hand) { background: transparent; border-color: transparent; box-shadow: none; }
html[data-theme] #practicePage[data-practice-neon][data-stage=playing] .fret-area {
  background: radial-gradient(ellipse at 50% 50%, #78c7d00a, #78c7d004 48%, transparent 72%);
}
html[data-theme] #practicePage[data-practice-neon][data-stage=playing] .practice-hand {
  background: radial-gradient(ellipse at 50% 45%, #78c7d00d, transparent 70%);
}
html[data-theme] #practicePage[data-practice-neon][data-stage=playing] #practiceStop {
  box-shadow: 0 0 12px #78c7d02e, 0 0 32px #78c7d01c, inset 0 0 12px #78c7d012;
}
html[data-theme] #practicePage[data-practice-neon][data-stage=playing] :is(.practice-live, #practiceStop) { animation: practice-instrument-on 160ms ease-out both; }
@keyframes practice-instrument-on { from { opacity: .65; } to { opacity: 1; } }
html[data-theme] #practicePage[data-practice-neon]:is([data-stage=count], [data-stage=playing], [data-stage=paused]) .practice-controls { justify-content: center; }
html[data-theme] #practicePage[data-practice-neon][data-stage=count] :is(.practice-live, .practice-controls) { visibility: hidden; }
#practicePage .practice-countdown {
  position: fixed;
  inset: var(--practice-header-height, 80px) 0 0;
  z-index: 10;
  display: grid;
  place-content: center;
  justify-items: center;
  background: #080d10;
}
#practicePage .practice-countdown svg { display: block; width: min(70vw, 580px); height: auto; overflow: visible; }
#practicePage .practice-count-tube { animation: home-logo-on var(--count-duration, .48s) linear both; }
#practicePage .practice-count-tube text {
  font: italic 200 200px 'Segoe UI', sans-serif;
  fill: #a6e0e6;
  stroke: #d0f6f7;
  stroke-width: .7px;
  paint-order: stroke;
  filter: drop-shadow(0 0 5px #6bc7d08a) drop-shadow(0 0 20px #6bc7d04a);
}
#practicePage .practice-countdown[data-start=true] text { font-size: 100px; }
#practicePage #practiceCancel { background: none; border: 1px solid #314851; color: #97afb9; padding: 8px 22px; margin-top: 24px; }
#practicePage [hidden] { display: none !important; }
@media (max-height: 780px) {
  html[data-theme] #practicePage[data-practice-neon] { padding-top: 18px; --practice-instrument-height: clamp(180px, 32vh, 245px); }
  html[data-theme] #practicePage[data-practice-neon] .page-heading { margin-bottom: 18px; }
  html[data-theme] #practicePage[data-practice-neon] .practice-toolbar { margin-bottom: 18px; }
  html[data-theme] #practicePage[data-practice-neon] .practice-workspace { gap: 9px; }
  html[data-theme] #practicePage[data-practice-neon] .practice-settings { padding-block: 8px; }
  html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-dock { padding: 14px 20px; }
  html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-settings { padding: 0; }
  html[data-theme] #practicePage[data-practice-neon][data-practice-kind]:is([data-stage=count], [data-stage=playing], [data-stage=paused]) .practice-dock { padding: 0; }
}
@media (max-width: 1350px) {
  html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-dock { gap: 16px; padding-inline: 18px; }
  html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-settings { gap: 16px; }
  html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-settings > label { padding-left: 16px; }
  html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-volume { padding-inline: 16px; }
  #practicePage .practice-tempo { gap: 8px; }
}
@media (max-width: 1000px) {
  html[data-theme] body:has(#practicePage:not([hidden])) .shell { width: calc(100% - 24px); }
  html[data-theme] #practicePage[data-practice-neon] .practice-settings { gap: 14px; }
  html[data-theme] #practicePage[data-practice-neon] .practice-live { grid-template-columns: minmax(0, 1fr) 170px; gap: 8px; }
  html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-dock { grid-template-columns: minmax(0, 1fr) auto; }
  html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-settings { grid-column: 1 / -1; flex-wrap: wrap; }
  html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-volume { border-left: 0; border-right: 0; padding: 0; }
  html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-volume .compact-mixer { right: auto; left: 0; }
  html[data-theme] #practicePage[data-practice-neon][data-practice-kind] .practice-controls { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  #practicePage[data-stage=playing] .board-trails { display: none; }
  #practicePage[data-stage=blackout] :is(.page-heading, .practice-toolbar, .practice-live, .practice-dock) { animation: none; opacity: 0; }
  html[data-theme] #practicePage[data-practice-neon][data-stage=playing] :is(.practice-live, #practiceStop),
  #practicePage .practice-count-tube { animation: none; }
  #practicePage .practice-switch::before { transition: none; }
}