/* Shared viewport rules for dense desktop workspaces and high-resolution displays. */
html{
  min-width:0;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body.tw-page{
  min-width:0;
  overflow-wrap:anywhere;
}

body.tw-page-studio{min-width:900px}

body.tw-page .tw-navigation-header,
body.tw-page .app-header,
body.tw-page .profile-header{
  max-width:100%;
}

@media (min-width:2200px){
  body.tw-page-studio{
    --tw-studio-library-width:clamp(260px,12vw,360px);
    --tw-studio-properties-width:clamp(290px,14vw,420px);
  }

  body.tw-page .tw-navigation-header,
  body.tw-page .app-header,
  body.tw-page .profile-header{
    padding-inline:clamp(24px,1.7vw,72px)!important;
  }

  body.tw-page-projects .workspace{width:min(94vw,2400px)}
  body.tw-page-music .workspace{width:min(94vw,2600px)}
  body.tw-page-operations .workspace,
  body.tw-page-remote .workspace{width:min(96vw,3000px)}
  body.tw-page-player .operator-shell,
  body.tw-page-player .toast{width:min(94vw,2600px)}
  body.tw-page-profile .profile-workspace{width:min(92vw,960px)}

  body.tw-page-studio .engineering-shell{
    grid-template-columns:var(--tw-studio-library-width) minmax(0,1fr) var(--tw-studio-properties-width);
  }

  body.tw-page-studio .studio-app.library-collapsed .engineering-shell{
    grid-template-columns:minmax(0,1fr) var(--tw-studio-properties-width);
  }

  body.tw-page-studio .studio-app.properties-collapsed .engineering-shell{
    grid-template-columns:var(--tw-studio-library-width) minmax(0,1fr);
  }

  body.tw-page-studio .studio-app.library-collapsed.properties-collapsed .engineering-shell{
    grid-template-columns:minmax(0,1fr);
  }

  body.tw-page-studio .library-panel,
  body.tw-page-studio .properties-panel{
    padding:clamp(16px,1vw,28px);
  }
}

@media (min-width:2200px) and (min-height:1200px){
  :root{font-size:clamp(16px,.68vw,21px)}
}

@media (min-width:3400px){
  body.tw-page-studio{
    --tw-studio-library-width:clamp(320px,11vw,440px);
    --tw-studio-properties-width:clamp(340px,12vw,480px);
  }

  body.tw-page-projects .workspace{width:min(92vw,2800px)}
  body.tw-page-music .workspace{width:min(92vw,3000px)}
  body.tw-page-operations .workspace,
  body.tw-page-remote .workspace{width:min(94vw,3400px)}
  body.tw-page-player .operator-shell,
  body.tw-page-player .toast{width:min(92vw,3000px)}

}

@media (min-width:3400px) and (min-height:1800px){
  :root{font-size:clamp(19px,.56vw,22px)}
}

@media (max-width:899px){
  body.tw-page-studio{min-width:0}
}