/* Practice and My Works share the app's light violet / lime language. */
body.practice-open .controller-3d{
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  grid-template-areas:"hardware" "display" "coach" "score";
  gap:12px;
  align-items:start;
  max-width:1120px;
}
body.practice-open .controller-3d .model-canvas-3d{
  grid-area:hardware;
  justify-self:center;
  width:100%;
  margin:0;
  filter:drop-shadow(0 12px 22px rgba(54,43,74,.1))!important;
  cursor:grab;
  touch-action:none;
}
body.practice-open .controller-3d .model-canvas-3d:active{cursor:grabbing}
body.practice-open .controller-3d .model-canvas-3d:focus-visible{outline:2px solid #7952cf;outline-offset:3px;border-radius:12px}
body.practice-open .model-display-flat{
  grid-area:display;
  width:100%;
  margin:0;
  padding:10px 0;
  overflow:visible;
  border:1px solid rgba(121,82,207,.13)!important;
  border-radius:20px;
  background:rgba(255,255,255,.76)!important;
  box-shadow:0 12px 34px rgba(55,43,75,.055)!important;
}
body.practice-open .display-deck{color:#513886;padding:4px 16px}
body.practice-open .display-deck-b{color:#7952cf;border-left:1px solid rgba(121,82,207,.13)}
body.practice-open .display-state,
body.practice-open .display-track,
body.practice-open .display-numbers small,
body.practice-open .display-footer{color:#645b70}
body.practice-open .display-deck.is-playing .display-state{color:#513886}
body.practice-open .display-state{transition:color .2s ease}
body.practice-open .display-deck.is-playing header strong::before{
  content:"";display:inline-block;width:6px;height:6px;margin:0 7px 1px 0;border-radius:50%;
  background:#baff2e;box-shadow:0 0 0 3px rgba(186,255,46,.28);
  animation:fm-play-dot 1.2s ease-in-out infinite;
}
body.practice-open .display-numbers time{color:#342942}
body.practice-open .display-numbers input[data-bpm]{border-bottom-color:rgba(121,82,207,.28)}
body.practice-open .display-adjust{color:#51475e;border-top:1px solid rgba(121,82,207,.12);margin-top:6px}
body.practice-open .display-adjust summary{font-weight:650}
body.practice-open .display-adjust summary span,
body.practice-open .display-adjust .parameter-field,
body.practice-open .display-adjust .parameter-cue,
body.practice-open .display-adjust .parameter-value small{color:#70667a}
body.practice-open .display-adjust .parameter-value{border-color:rgba(121,82,207,.2);background:rgba(255,255,255,.64)}
body.practice-open .display-adjust .parameter-value input[type=number]{color:#30263d}
body.practice-open .model-parameters{
  display:none!important;
}
body.practice-open .model-parameters .mix-balance{color:#4c3b62}
body.practice-open .model-parameters .practice-reset{background:#eee7fa;color:#513886}
body.practice-open.practice-coach-on .model-coach{
  grid-area:coach;
  width:100%;
  min-height:54px;
  margin:0;
  padding:9px 12px;
  border:1px solid rgba(121,82,207,.12);
  border-radius:16px;
  background:rgba(255,255,255,.82);
  color:#30263d;
  box-shadow:0 8px 24px rgba(55,43,75,.06);
}
body.practice-open .model-coach>span{background:#eef8d9;color:#3e5d18}
body.practice-open .model-coach>button{background:#eee7fa;color:#513886}
body.practice-open.practice-coach-on .model-ai-score{grid-area:score;width:100%;margin:0;box-shadow:none}
body.practice-open.practice-coach-on .model-ai-score:not(.is-active){display:none}
body.practice-open .mix-recorder{
  border-color:rgba(121,82,207,.14);
  background:rgba(255,255,255,.9)!important;
  box-shadow:0 8px 26px rgba(55,43,75,.07);
}
body.practice-open .mix-recorder button:not(.coach-toggle){background:#baff2e;color:#211c27}
body.practice-open .mix-recorder.is-recording button:not(.coach-toggle){background:#7952cf;color:#fff}
body.practice-open .mix-recorder .coach-toggle[aria-pressed="true"]{background:#eee7fa;color:#513886}
body.practice-open .mix-recorder .coach-toggle[aria-pressed="false"]{background:transparent;color:#655b70;border:1px solid rgba(121,82,207,.2)}

/* The works are the content; surface and controls recede behind them. */
body.works-open .my-works-panel{gap:0}
body.works-open .my-works-panel .panel-heading{
  margin:8px 0 0;
  padding:0 2px 10px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body.works-open .my-works-panel .panel-heading h3{font-size:clamp(1.2rem,4vw,1.45rem);letter-spacing:-.025em}
body.works-open .my-works-panel .panel-heading p{margin-top:4px;color:#70667a;font-size:12px;line-height:1.5}
body.works-open .my-works-panel .works-storage-note{
  display:block;
  margin:14px 0 0;
  padding:0 2px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#756c7b;
  font-size:12px;
  line-height:1.5;
  text-align:center;
}
body.works-open .my-works-panel .works-storage-note::before{
  content:"";display:inline-block;width:5px;height:5px;margin:0 7px 2px 0;border-radius:50%;background:#7952cf;
}
body.works-open .my-works-panel .works-storage-note[hidden]{display:none!important}
body.works-open .my-works-panel .works-list{grid-template-columns:minmax(0,1fr);gap:12px}
body.works-open .my-works-panel .work-swipe{min-width:0;border-radius:18px}
body.works-open .my-works-panel .work-swipe:has(.work-menu:not([hidden])){z-index:30}
body.works-open .my-works-panel .work-item.wave-work{
  min-height:108px!important;
  grid-template-columns:58px minmax(0,1fr) 36px!important;
  grid-template-rows:58px 18px!important;
  gap:6px 14px!important;
  padding:13px 15px!important;
  overflow:visible!important;
  border:1px solid rgba(65,49,87,.09)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.8)!important;
  box-shadow:0 8px 26px rgba(55,43,75,.045)!important;
  transform:none!important;
  filter:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  will-change:auto!important;
  animation:none!important;
  transition:border-color .2s ease,box-shadow .2s ease;
}
body.works-open .my-works-panel .wave-work.is-active{border-color:rgba(121,82,207,.4)!important}
body.works-open .my-works-panel .wave-work .work-cover{
  width:58px!important;height:58px!important;
  border:1px solid rgba(64,47,85,.22);
  border-radius:13px!important;
  background:radial-gradient(circle at 70% 70%,rgba(186,255,46,.56) 0 5%,transparent 20%),radial-gradient(circle at 25% 20%,#aa8de3,#60428f 52%,#251d32)!important;
  color:#fff;
  box-shadow:inset 0 1px rgba(255,255,255,.35);
}
body.works-open .my-works-panel .wave-work .work-cover::after{inset:11px;border-color:rgba(255,255,255,.35)}
body.works-open .my-works-panel .wave-work .work-cover span{top:5px;left:6px;color:rgba(255,255,255,.88);font-size:8px}
body.works-open .my-works-panel .wave-work .work-cover i{border-color:rgba(255,255,255,.42)}
body.works-open .my-works-panel .wave-work .work-cover svg{width:18px;height:18px;fill:#fff;filter:drop-shadow(0 1px 3px rgba(21,13,36,.35))}
body.works-open .my-works-panel .wave-work .work-info{align-self:center}
body.works-open .my-works-panel .wave-work .work-info strong{font-size:15px!important;font-weight:750;color:#2e2637}
body.works-open .my-works-panel .wave-work .work-info span,
body.works-open .my-works-panel .wave-work .work-info small{margin-top:3px;color:#756b7b;font-size:11px!important}
body.works-open .my-works-panel .wave-work .work-info small{color:#7051ab;font-weight:700;font-size:10px!important;letter-spacing:.025em}
body.works-open .my-works-panel .wave-work .work-menu-toggle{align-self:start;color:#665a73;background:transparent}
body.works-open .my-works-panel .wave-work .work-wave{height:18px;padding:0;color:#7651cf;opacity:.7}
body.works-open .my-works-panel .wave-work .work-wave i{max-width:3px}
body.works-open .my-works-panel .wave-work.is-playing .work-cover i{animation:fm-disc-turn 5s linear infinite}
body.works-open .my-works-panel .work-preview-card .work-cover{cursor:default}
body.works-open .my-works-panel .work-preview-card .work-menu-toggle{display:grid;place-items:center}
body.works-open .my-works-panel .work-menu{
  top:52px;right:10px;z-index:40;min-width:128px;
  display:grid;gap:5px;padding:6px;
  border:1px solid rgba(121,82,207,.16);
  background:#fff;
  box-shadow:0 16px 34px rgba(55,43,75,.16);
}
body.works-open .my-works-panel .work-menu>a,
body.works-open .my-works-panel .work-menu>button{margin:0!important}
.library-player:not(.is-expanded){cursor:pointer}
.library-player:not(.is-expanded) input[type="range"]{cursor:ew-resize}
.library-player:not(.is-expanded):focus-visible{outline:2px solid #baff2e;outline-offset:3px}
body.works-open .my-works-panel .work-menu.opens-up{top:auto;bottom:52px}
body.works-open .my-works-panel .work-menu>button[data-work-rename]{color:#342942!important}
body.works-open .my-works-panel .work-preview-card .work-menu button:disabled{opacity:.7;cursor:default}
body.works-open .my-works-panel .wave-work.is-renaming .work-info>strong,
body.works-open .my-works-panel .wave-work.is-renaming .work-info>span,
body.works-open .my-works-panel .wave-work.is-renaming .work-info>small{display:none!important}
body.works-open .my-works-panel .wave-work.is-renaming .work-menu-toggle{visibility:hidden}
.work-rename-form[hidden]{display:none!important}
body.works-open .my-works-panel .work-rename-form{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:5px;
  width:100%;margin:0;
}
body.works-open .my-works-panel .work-rename-form input{
  width:100%;min-width:0;height:38px;padding:0 9px;border:1px solid rgba(121,82,207,.3);border-radius:9px;
  background:#fff;color:#2e2637;font:600 12px/1.3 Inter,"Noto Sans SC",sans-serif;
}
body.works-open .my-works-panel .work-rename-form button{
  min-width:36px;height:38px;padding:0 6px;border:0;border-radius:9px;background:#eee7fa;color:#513886;
  font:700 11px/1 Inter,"Noto Sans SC",sans-serif;
}
body.works-open .my-works-panel .work-rename-form button[type="submit"]{background:#baff2e;color:#211c27}
body.works-open .my-works-panel .work-rename-form :focus-visible{outline:2px solid #7952cf;outline-offset:2px}
body.works-open .my-works-panel .works-empty{
  min-height:320px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:20px;
  margin:8px 0 0;
  padding:24px 18px 32px;
  border:1px solid rgba(121,82,207,.13);
  border-radius:22px;
  background:rgba(255,255,255,.55);
  box-shadow:0 12px 34px rgba(55,43,75,.045);
  text-align:center;
}
body.works-open .my-works-panel .works-empty[hidden]{display:none!important}
.works-empty-vinyl{
  position:relative;
  width:136px;height:136px;
  flex:none;align-self:center!important;margin-inline:auto;
  display:grid;place-items:center;
  border:1px solid rgba(121,82,207,.33);
  border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 11px,rgba(121,82,207,.11) 12px 13px),radial-gradient(circle at 32% 25%,rgba(255,255,255,.9),rgba(238,231,250,.72) 60%,rgba(121,82,207,.12));
  animation:fm-disc-turn 18s linear infinite;
}
.works-empty-vinyl::before{content:"";position:absolute;inset:-10px;border:1px dashed rgba(121,82,207,.18);border-radius:50%}
.works-empty-vinyl span{width:32px;height:32px;border:8px solid #baff2e;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(121,82,207,.3)}
body.works-open .my-works-panel .works-empty>div:last-child{align-self:auto}
body.works-open .my-works-panel .works-empty strong{margin:0;color:#2e2637;font-size:20px;line-height:1.3}
body.works-open .my-works-panel .works-empty p{margin:8px auto 0;color:#70667a;font-size:13px;line-height:1.6}

@media(hover:hover){
  body.works-open .my-works-panel .work-item.wave-work:not(.work-preview-card):hover{
    border-color:rgba(121,82,207,.28)!important;box-shadow:0 15px 32px rgba(55,43,75,.08)!important;
  }
}
@media(min-width:900px){
  body.practice-open .controller-3d{
    grid-template-columns:minmax(0,1.55fr) minmax(300px,.9fr);
    grid-template-areas:"hardware display" "coach score";
    gap:12px 24px;
  }
  body.practice-open.practice-wide .controller-3d{grid-template-areas:"hardware display" "coach score"!important;grid-template-rows:auto auto!important}
  body.practice-open .model-display-flat{align-self:start;grid-template-columns:1fr;padding:12px 18px}
  body.practice-open .display-deck{padding:10px 0}
  body.practice-open .display-deck-b{border-left:0;border-top:1px solid rgba(121,82,207,.13)}
  body.practice-open .model-ai-score.is-active{align-self:start}
}
@media(max-width:700px){
  body.practice-open .controller-3d{gap:10px}
  body.practice-open .model-display-flat{padding:8px 0}
  body.practice-open .display-deck{padding:3px 10px}
  body.practice-open .display-numbers input[data-bpm]{width:76px;font-size:23px}
  body.practice-open .display-track{font-size:11px}
  body.practice-open .display-deck .model-display-canvas{height:36px;margin-top:3px}
  body.practice-open .model-parameters{gap:7px;padding-inline:9px}
  body.practice-open .model-parameters .mix-balance{font-size:11px}
  body.works-open .my-works-panel .work-item.wave-work{grid-template-columns:54px minmax(0,1fr) 32px!important;grid-template-rows:54px 18px!important;gap:6px 11px!important;min-height:102px!important;padding:12px!important}
  body.works-open .my-works-panel .wave-work .work-cover{width:54px!important;height:54px!important}
  body.works-open .my-works-panel .wave-work .work-wave{height:18px}
  body.works-open .my-works-panel .works-empty{min-height:300px}
}
@media(max-width:380px){
  body.practice-open .mix-recorder small{display:none}
  body.practice-open .display-numbers input[data-bpm]{width:67px;font-size:21px}
  body.practice-open .display-deck{padding-inline:8px}
  body.practice-open .display-numbers small{font-size:10px}
  body.works-open .my-works-panel .wave-work.is-renaming .work-info{grid-column:1/-1!important;grid-row:1!important;z-index:2}
  body.works-open .my-works-panel .wave-work.is-renaming .work-cover{visibility:hidden}
}

/* Short landscape has a compact tool rail; the instrument gets the remaining view. */
@media (orientation: landscape) and (max-height: 650px) {
  .practice-stage::before { height: 50px; }
  body.practice-open.practice-landscape main { padding: 58px 12px 16px !important; overflow: hidden !important; }
  body.practice-open.practice-landscape .practice-brand { min-height: 50px; padding-inline: 12px; }
  body.practice-open.practice-landscape .practice-brand a { font-size: 20px !important; }
  body.practice-open.practice-landscape .mix-recorder {
    top: 6px !important;
    left: 146px !important;
    right: 180px !important;
    min-width: 0;
    min-height: 36px !important;
    padding: 4px 7px !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    gap: 7px;
  }
  body.practice-open.practice-landscape .mix-recorder small,
  body.practice-open.practice-landscape .mix-recorder .coach-toggle { display: none !important; }
  body.practice-open.practice-landscape .mix-recorder > div { min-width: 0; overflow: hidden; }
  body.practice-open.practice-landscape .mix-recorder > div strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
  body.practice-open.practice-landscape .mix-recorder #recordButton { min-height: 28px; padding-inline: 8px; font-size: 10px; }
  body.practice-open.practice-landscape .practice-guide-button,
  body.practice-open.practice-landscape .practice-landscape-button {
    top: 8px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding-inline: 7px !important;
    border-radius: 10px !important;
    font-size: 10px !important;
    box-shadow: none !important;
  }
  body.practice-open.practice-landscape .practice-guide-button { right: max(82px, calc(env(safe-area-inset-right) + 82px)) !important; }
  body.practice-open.practice-landscape .practice-landscape-button { right: max(8px, env(safe-area-inset-right)) !important; min-width: 66px !important; }
  body.practice-open.practice-landscape .practice-guide-button svg,
  body.practice-open.practice-landscape .practice-landscape-button svg { width: 14px; height: 14px; }
}

body.practice-open .practice-guide { max-height: calc(100vh - 84px); overflow-y: auto; }
body.practice-open .practice-guide .practice-guide-tip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  margin: 0 0 12px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.09);
  color: #f2eef7;
  font-size: 11px;
  line-height: 1.5;
}
body.practice-open .practice-guide .practice-guide-tip span:first-child {
  color: #baff2e;
  font-weight: 800;
  white-space: nowrap;
}
@media(orientation:landscape) and (max-height:650px) and (max-width:1100px){
  body.practice-open.practice-landscape .controller-3d{
    grid-template-columns:minmax(0,1.5fr) minmax(260px,.9fr)!important;
    grid-template-areas:"hardware display" "hardware coach"!important;
    grid-template-rows:auto 1fr!important;
    align-items:start;
  }
  body.practice-open.practice-landscape .controller-3d .model-canvas-3d{width:min(100%,520px);align-self:start}
  body.practice-open.practice-landscape .model-display-flat{grid-template-columns:repeat(2,minmax(0,1fr));padding:4px 8px}
  body.practice-open.practice-landscape .display-deck{padding:2px 8px}
  body.practice-open.practice-landscape .display-deck-b{border-top:0;border-left:1px solid rgba(121,82,207,.13)}
}

/* Dedicated phone-landscape composition: hardware, coach, then telemetry. */
@media (orientation: landscape) and (max-height: 650px) {
  body.practice-open.practice-landscape .controller-3d {
    display: grid !important;
    width: 100% !important;
    max-width: none !important;
    height: calc(var(--practice-height) - 74px) !important;
    min-height: 0 !important;
    grid-template-columns: minmax(0, 1fr) clamp(250px, 28vw, 280px) !important;
    grid-template-areas: "hardware display" "coach display" !important;
    grid-template-rows: minmax(0, 1fr) 44px !important;
    gap: 8px 12px !important;
    align-items: stretch !important;
    overflow: visible !important;
  }
  body.practice-open.practice-landscape .controller-3d .model-canvas-3d {
    grid-area: hardware !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    align-self: center !important;
    margin: 0 !important;
  }
  body.practice-open.practice-landscape .model-display-flat {
    grid-area: display !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-self: stretch !important;
    width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 7px 9px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(121,82,207,.45) transparent;
    border-radius: 14px !important;
  }
  body.practice-open.practice-landscape .display-deck { padding: 5px 2px !important; }
  body.practice-open.practice-landscape .display-deck-b {
    border-left: 0 !important;
    border-top: 1px solid rgba(121,82,207,.13) !important;
  }
  body.practice-open.practice-landscape .display-numbers input[data-bpm] { width: 88px; min-height: 32px; font-size: 23px; }
  body.practice-open.practice-landscape .display-adjust { display: block !important; }
  body.practice-open.practice-landscape .model-display-flat::-webkit-scrollbar { width: 5px; }
  body.practice-open.practice-landscape .model-display-flat::-webkit-scrollbar-thumb { border-radius: 5px; background: rgba(121,82,207,.45); }
  body.practice-open.practice-landscape .model-display-flat:has(.display-adjust[open]) .model-display-canvas,
  body.practice-open.practice-landscape .model-display-flat:has(.display-adjust[open]) .display-footer { display: none !important; }
  body.practice-open.practice-landscape .model-parameters,
  body.practice-open.practice-landscape .model-ai-score { display: none !important; }
  body.practice-open.practice-landscape.practice-coach-on .model-coach,
  body.practice-open.practice-landscape:not(.practice-coach-on) .model-coach {
    grid-area: coach !important;
    display: grid !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 5px 10px !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.84) !important;
    color: #30263d !important;
    overflow: hidden !important;
  }
  body.practice-open.practice-landscape .model-coach > span { font-size: 9px !important; padding: 5px 6px; }
  body.practice-open.practice-landscape .model-coach > strong {
    grid-column: auto !important;
    min-width: 0;
    overflow: hidden;
    font-size: 11px !important;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.practice-open.practice-landscape .model-coach > button { display: none !important; }
}
@keyframes fm-play-dot{50%{opacity:.45;transform:scale(.76)}}
@keyframes fm-disc-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  body.practice-open .display-deck.is-playing header strong::before,
  body.works-open .my-works-panel .work-item.wave-work,
  body.works-open .my-works-panel .wave-work.is-playing .work-cover i,
  .works-empty-vinyl{animation:none!important}
}

/* Landscape is a focused work surface; the page header/back action remains available. */
@media (orientation: landscape) {
  .app-tabbar,
  body.hub-open .app-tabbar,
  body.course-open .app-tabbar,
  body.learning-open .app-tabbar,
  body.practice-open .app-tabbar,
  body.works-open .app-tabbar { display: none !important; }
}
body.practice-open.practice-landscape .app-tabbar,
body.practice-open.practice-rotated .app-tabbar { display: none !important; }