/* Quiet dark glass: broad surfaces carry blur; nested controls stay crisp. */
.intro-pending .volume-control{opacity:0}
/* Desktop 110% sizing, with the same fixed top anchor and unscaled phone layout. */
@supports(zoom:1.1){
  @media(min-width:701px) and (hover:hover) and (pointer:fine){
    :root[data-desktop-ui] main{zoom:1.1;min-height:calc(100svh / 1.1);padding-top:max(28px,calc((100svh / 1.1 - 800px)/2))}
    :root[data-desktop-ui] .language,:root[data-desktop-ui] dialog{zoom:1.1}
  }
  @media(min-width:701px) and (max-height:935px) and (hover:hover) and (pointer:fine){
    :root[data-desktop-ui] main{max-width:610px;padding-top:max(16px,calc((100svh / 1.1 - 710px)/2));padding-bottom:10px}
    :root[data-desktop-ui] .identity{margin-bottom:13px}
    :root[data-desktop-ui] h1{font-size:60px;margin-bottom:10px}
    :root[data-desktop-ui] .bio{margin-bottom:12px}
    :root[data-desktop-ui] .socials a{width:38px;height:38px}
    :root[data-desktop-ui] .tab{padding:12px 5px}
    :root[data-desktop-ui] .catalog-body{padding:11px}
    :root[data-desktop-ui] .search-field{height:38px}
    :root[data-desktop-ui] .filter-button{min-height:38px}
    :root[data-desktop-ui] .tracks{min-height:308px}
    :root[data-desktop-ui] .track{min-height:56px}
    :root[data-desktop-ui] .track.expanded{min-height:92px}
    :root[data-desktop-ui] .cover{width:40px;height:40px}
    :root[data-desktop-ui] .pagination{padding-top:10px}
  }
  @media(min-width:701px) and (max-height:780px) and (hover:hover) and (pointer:fine){
    :root[data-desktop-ui] main{padding-top:max(10px,calc((100svh / 1.1 - 660px)/2));padding-bottom:4px}
    :root[data-desktop-ui] .identity{margin-bottom:10px}
    :root[data-desktop-ui] h1{margin-bottom:8px}
    :root[data-desktop-ui] .bio{line-height:1.65;margin-bottom:9px}
    :root[data-desktop-ui] .socials a{width:34px;height:34px}
    :root[data-desktop-ui] .tab{padding:10px 5px}
    :root[data-desktop-ui] .catalog-body{padding:9px}
    :root[data-desktop-ui] .search-field{height:36px}
    :root[data-desktop-ui] .filter-button{min-height:36px}
    :root[data-desktop-ui] .tracks{min-height:268px}
    :root[data-desktop-ui] .track{min-height:48px}
    :root[data-desktop-ui] .track.expanded{min-height:84px}
    :root[data-desktop-ui] .cover{width:36px;height:36px}
    :root[data-desktop-ui] .pagination{padding-top:8px}
  }
  @media(min-width:701px) and (max-height:620px) and (hover:hover) and (pointer:fine){
    :root[data-desktop-ui] main{padding-top:8px}
    :root[data-desktop-ui] h1{font-size:45px}
    :root[data-desktop-ui] .bio{line-height:1.5}
    :root[data-desktop-ui] .socials a{width:30px;height:30px}
    :root[data-desktop-ui] .tab{padding:8px 5px}
    :root[data-desktop-ui] .search-field{height:32px}
    :root[data-desktop-ui] .filter-button{min-height:32px}
    :root[data-desktop-ui] .tracks{min-height:243px}
    :root[data-desktop-ui] .track{min-height:43px}
    :root[data-desktop-ui] .track.expanded{min-height:80px}
    :root[data-desktop-ui] .cover{width:30px;height:30px}
    :root[data-desktop-ui] .page{height:26px}
  }
}
/* Reserve scrollbar width, and anchor the composition independently of catalog height. */
:root{scrollbar-gutter:auto}
main{overflow-anchor:none}
.identity,.catalog{flex-shrink:0}
@media(min-width:701px){
  main{justify-content:flex-start;padding-top:max(28px,calc((100svh - 800px)/2));padding-bottom:16px}
}
/* Fit the expanded five-row player on ordinary laptop displays. */
@media(min-width:701px) and (max-height:850px){
  main{max-width:610px;padding-top:max(16px,calc((100svh - 710px)/2));padding-bottom:10px}
  .identity{margin-bottom:13px}
  h1{font-size:60px;margin-bottom:10px}
  .bio{margin-bottom:12px}
  .socials a,.socials button{width:38px;height:38px}
  .tab{padding:12px 5px}
  .catalog-body{padding:11px}
  .search-field{height:38px}
  .filter-button{min-height:38px}
  .tracks{min-height:308px}
  .track{min-height:56px}
  .track.expanded{min-height:92px}
  .cover{width:40px;height:40px}
  .pagination{padding-top:10px}
}
@media(min-width:701px) and (max-height:620px){
  main{padding-top:12px;padding-bottom:10px}
  .identity{margin-bottom:10px}
  h1{font-size:45px;margin-bottom:5px}
  .bio{margin-bottom:8px}
  .socials a,.socials button{width:32px;height:32px}
  .tab{padding:10px}
  .catalog-body{padding:9px}
  .tracks{min-height:255px}
  .track{min-height:47px}
  .track.expanded{min-height:83px}
  .cover{width:33px;height:33px}
  .pagination{padding-top:8px}
}
:root{
  --line:rgba(255,255,255,.085);
  --edge-top:rgba(255,255,255,.15);
  --edge-side:rgba(255,255,255,.095);
  --edge-bottom:rgba(255,255,255,.055);
}
.glass,.search-field{
  border:1px solid var(--line);
  border-color:var(--edge-top) var(--line) var(--edge-bottom) var(--edge-side);
  background:rgba(15,15,17,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.catalog{border-radius:4px;box-shadow:inset 0 1px 0 #ffffff06,0 8px 28px #00000024}
.tabs{border-radius:3px 3px 0 0;overflow:hidden;border-bottom-color:var(--line)}
.tab{border-radius:0;border-right-color:var(--line)}
.tab[aria-selected=true]{background:rgba(255,255,255,.075);box-shadow:inset 0 1px 0 #ffffff12}
.tab:hover:not(:disabled){background-color:rgba(255,255,255,.045);border-color:var(--line)}
.tab[aria-selected=true]:hover{background-color:rgba(255,255,255,.085)}
.track{
  border-radius:3px;
  border-color:rgba(255,255,255,.11) rgba(255,255,255,.065) rgba(255,255,255,.045) rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
}
.track.expanded{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.14)}
.track.playing{border-color:rgba(255,255,255,.18)}
.socials .glass,.catalog button.glass,.search-field{
  border-radius:2px;
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.socials .glass{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:rgba(15,15,17,.48)}
.cover,.cover img{border-radius:2px}
.cover{border-color:rgba(255,255,255,.13)}
.search-field:focus-within{border-color:rgba(255,255,255,.28)}
.glass:is(button,a):hover:not(:disabled),.daw-chip:hover:not(:disabled){background-color:rgba(255,255,255,.065);border-color:rgba(255,255,255,.22)}
.filter-button[aria-expanded=true],.daw-chip[aria-pressed=true]{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.22)}
.page[aria-current=page]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.27);box-shadow:inset 0 1px 0 #ffffff12}
.filters,dialog.glass{
  border-radius:4px;
  border:1px solid var(--line);
  border-color:rgba(255,255,255,.16) rgba(255,255,255,.09) rgba(255,255,255,.065) rgba(255,255,255,.12);
  background:rgba(15,15,17,.86);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 #ffffff06,0 10px 30px #00000038;
}
dialog::backdrop{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.filter-field input,.filter-field select,.daw-chip,.formats button,.close{
  border-radius:2px;
}
.filter-field input,.filter-field select,.daw-chip,.formats button{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.1);
  border-top-color:rgba(255,255,255,.15);
  border-bottom-color:rgba(255,255,255,.065);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.glowing:not(#name),[data-glow]:not(#name):hover{
  border-color:rgba(255,255,255,.26);
  box-shadow:0 0 14px rgba(255,255,255,.075),inset 0 1px 0 rgba(255,255,255,.055);
  text-shadow:0 0 10px rgba(255,255,255,.2);
}
@supports not ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))){
  .catalog,.filters,dialog.glass{background:rgba(15,15,17,.94)}
}
@media(prefers-reduced-motion:reduce){
  .glowing:not(#name),[data-glow]:not(#name):hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.025);text-shadow:none}
}
/* Small, feathered reflection and a very shallow optical bend; no text blur. */
.cursor-glass-sheen,.cursor-glass-lens{display:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  :root[data-cursor-glass] .cursor-glass-host:not(dialog):not(.filters){position:relative}
  :root[data-cursor-glass] .cursor-glass-lens{
    display:block;position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;
  }
  :root[data-cursor-glass] .cursor-glass-refraction{
    position:absolute;left:var(--glass-x);top:var(--glass-y);width:160px;height:140px;
    transform:translate(-50%,-50%);pointer-events:none;opacity:0;
    -webkit-backdrop-filter:url('#cursor-glass-warp');backdrop-filter:url('#cursor-glass-warp');
    -webkit-mask-image:radial-gradient(ellipse closest-side,#000 0%,rgba(0,0,0,.75) 42%,rgba(0,0,0,.15) 76%,transparent 100%);
    mask-image:radial-gradient(ellipse closest-side,#000 0%,rgba(0,0,0,.75) 42%,rgba(0,0,0,.15) 76%,transparent 100%);
  }
  :root[data-cursor-glass] .cursor-glass-sheen{
    display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none;
    opacity:0;overflow:hidden;
    background:radial-gradient(ellipse 88px 76px at var(--glass-x) var(--glass-y),rgba(255,255,255,.065) 0%,rgba(255,255,255,.035) 22%,rgba(255,255,255,.012) 50%,rgba(255,255,255,.003) 76%,transparent 100%);
  }
  :root[data-cursor-glass] .cursor-glass-sheen::after{
    content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    border:1px solid rgba(255,255,255,.16);
    -webkit-mask-image:radial-gradient(ellipse 112px 94px at var(--glass-x) var(--glass-y),#000 0%,rgba(0,0,0,.5) 38%,transparent 90%);
    mask-image:radial-gradient(ellipse 112px 94px at var(--glass-x) var(--glass-y),#000 0%,rgba(0,0,0,.5) 38%,transparent 90%);
  }
}

@supports(zoom:1.1){@media(min-width:701px) and (max-height:780px) and (hover:hover) and (pointer:fine){
  :root[data-desktop-ui] .track{min-height:44px;padding:5px 7px}
  :root[data-desktop-ui] .tracks{min-height:248px}
  :root[data-desktop-ui] .bio{line-height:1.5;margin-bottom:7px}
  :root[data-desktop-ui] .identity{margin-bottom:8px}
}}

.bio,.tab,.search-field input,.filter-button,.download,.filter-field>span,.reset-filters,.notice,.empty,.status,.eyebrow,.download-license,#download-status{font-family:Unbounded,Bahnschrift,Arial,sans-serif}


