/* Practice is a peer of Studio, sharing the song without duplicating controllers. */
body[data-page=practice] .site-content { width:calc(100% - 32px); max-width:none; margin:8px auto; }
.practice-page-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:44px; margin-bottom:6px; }
.practice-page-header>div { min-width:0; }
.practice-page-header h1 { margin:0; font-size:1.1rem; }
#sitePracticeSong { margin:.25rem 0 0; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.practice-page-header>.site-button { flex-shrink:0; padding:6px 13px; font-size:.8rem; }
#sitePracticeTabs { margin:0 0 8px; gap:1.2rem; }
#sitePracticeTabs button { min-height:39px; padding:6px 3px 9px; font-size:.83rem; }
#sitePractice>.site-mode { min-width:0; }
#sitePractice>.site-transport { position:static; }
.site-video-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.site-video-preview-heading h2 { margin:0; }
#videoPreviewPlay { flex-shrink:0; font-size:.85rem; }
#videoPreviewInfo { margin:.7rem 0 1rem; }
#siteVideoActions { margin:.8rem 0 0; flex-shrink:0; }
#siteVideoStatus { flex-shrink:0; font-size:.78rem; color:var(--ink-soft); }
#siteVideoStatus p { margin:.6rem 0 0; }
#siteVideoCanvas .rain-canvas { width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
body.site-focus #sitePractice { height:calc(100dvh - 24px); min-height:0; }
body.site-focus .practice-page-header { display:none; }
@media(min-width:801px) {
  #sitePractice { display:flex; flex-direction:column; min-height:560px; height:calc(100dvh - 108px); }
  #sitePractice>.site-mode { flex:1; min-height:0; overflow:auto; }
  #sitePractice>.site-workspace { align-items:stretch; }
  #sitePractice .site-work-main,#sitePractice .site-inspector { min-height:0; overflow:auto; }
  #sitePractice[data-practice-mode=play] { height:auto; }
  #sitePractice .site-tabs,.practice-page-header,#sitePractice .site-transport { flex-shrink:0; }
}
@media(max-width:800px) {
  body[data-page=practice] .site-content { width:calc(100% - 16px); }
  .site-header .site-navigation { width:100%; gap:1rem; overflow-x:auto; justify-content:center; }
  .site-header .site-navigation a { white-space:nowrap; flex-shrink:0; }
  .site-video-preview-heading { align-items:start; flex-wrap:wrap; gap:.6rem; }
  .site-video-preview-heading h2 { font-size:1.1rem; }
}
@media(max-width:360px) { .site-header .site-navigation { gap:.8rem; justify-content:flex-start; }.site-header .site-navigation a { font-size:.83rem; } }