/* One shared source shelf, one workspace, one focused tool. */
:root { --flux-sticky-top: 72px; --ark-edge: #263750; }
html { scroll-padding-top: 155px; }
body { background: #080f1d; }
.header { max-width: 1280px; margin: auto; padding: 18px 28px 16px; }
.header .brand { font-size: 25px; letter-spacing: -.9px; }
.header .brand svg { color: #80aaff; }
:root[data-theme] .header .intro { padding-top: 14px; gap: 12px; }
:root[data-theme] .header .intro h1 { font-size: 20px; }
:root[data-theme] .header .intro > p { font-size: 11px; }
main { max-width: 1180px; padding: 20px 28px 0; }
#audio-library { margin-bottom: 18px; }
#audio-library:has(.library-manager[open]) { z-index: 35; }
.boot-message { display: none; color: #aabbd6; font-size: 12px; padding: 20px; }
.studio-loading .boot-message { display: block; }
.studio-loading #audio-library:empty { display: none; }
.studio-loading .game > :not(.toolbar) { display: none; }
.game { border-color: var(--ark-edge); box-shadow: 0 16px 55px #0002; }
:root[data-theme] .game::before { opacity: .75; }
:root[data-theme] .toolbar { position: sticky; top: 0; z-index: 25; height: 64px; padding: 0 22px; background: #0e192bf5; backdrop-filter: blur(20px); box-shadow: 0 5px 18px #0002; }
.workspace-caption { font-size: 9px; letter-spacing: .9px; line-height: 1.5; color: #9daec8; }
:root[data-theme] .workspace-tabs { padding: 3px; border-radius: 10px; background: #091323; }
:root[data-theme] .workspace-tabs button { padding: 9px 28px; border-radius: 7px; font-size: 12px; }
.practice-subtabs { padding: 10px 22px; gap: 8px; }
.practice-subtabs button { font-size: 12px; padding: 9px 13px; }
#mic-panel { padding: 0 22px 22px; }
#mic-panel .mic-intro { display: none; }
#mic-panel .mic-workspaces { margin: 0 -22px 18px; padding: 10px 22px; background: none; border: 0; border-bottom: 1px solid var(--ark-edge); border-radius: 0; gap: 8px; }
#mic-panel .mic-workspaces button { flex: 0 1 auto; padding: 9px 15px; min-height: 37px; font-size: 12px; font-weight: 500; }
#mic-panel .mic-workspaces button[aria-selected=true] { background: #1a2c49; box-shadow: inset 0 0 0 1px #345789; color: #c1d7ff; }
.mic-mode-row { margin-top: 0; }
.mic-mode-help { font-size: 10px; }
.mic-status { margin-bottom: 10px; }
.mic-pitch-dock { border-color: #35517a; }
.mic-view-tabs button, .clip-view-tabs button { font-size: 11px; }
.mic-view-tabs, .clip-view-tabs { gap: 6px; }
.mic-view .piano-view { border-color: var(--ark-edge); }
.clip-heading h2, .match-heading h2 { font-size: 21px; }
.page-footer { padding: 19px 0 24px; color: #8b9bb6; border-color: #1b2a40; }
.below-game { padding: 13px 0; }
.steps { display: none !important; }
input[type=range] { accent-color: #77a5ff; }
button:focus-visible, a:focus-visible, summary:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid #86b4ff; outline-offset: 4px; }
[role=tabpanel] { scroll-margin-top: 145px; }
@media (max-width: 800px) {
  :root[data-theme] .header .intro > p { width: 100%; }
  .workspace-caption { max-width: 180px; font-size: 8px; }
}
@media (max-width: 650px) {
  :root { --flux-sticky-top: 68px; }
  .header { padding: 14px 16px 13px; }
  .header .brand { font-size: 22px; }
  :root[data-theme] .header .intro { padding-top: 11px; gap: 7px 10px; }
  :root[data-theme] .header .intro h1 { font-size: 17px; }
  :root[data-theme] .header .intro > p { font-size: 10px; }
  main { padding: 14px 12px 0; }
  #audio-library { margin-bottom: 13px; }
  .library-heading p { display: none; }
  .library-current > label { display: none; }
  .library-current { padding-top: 10px; }
  :root[data-theme] .toolbar { height: 60px; padding: 0 12px; border-radius: 12px 12px 0 0; }
  :root[data-theme] .workspace-tabs button { padding: 9px 17px; font-size: 11px; }
  .workspace-caption { max-width: 105px; font-size: 7px; letter-spacing: .4px; }
  .practice-subtabs { padding: 9px 12px; gap: 5px; }
  .practice-subtabs button { font-size: 11px; padding: 9px 6px; }
  #mic-panel { padding: 0 12px 17px; }
  #mic-panel .mic-workspaces { margin: 0 -12px 14px; padding: 9px 12px; gap: 4px; }
  #mic-panel .mic-workspaces button { flex: 1; font-size: 10px; padding: 8px 5px; }
  .mic-view-tabs button, .clip-view-tabs button { font-size: 10px; padding-left: 6px; padding-right: 6px; }
  .mic-view-tabs, .clip-view-tabs { gap: 3px; }
  .page-footer { font-size: 8px; gap: 12px; }
}