@media(max-width:820px){
  body{flex-direction:column-reverse}
  .rail{width:100%;height:calc(64px + env(safe-area-inset-bottom));flex-direction:row;padding:0 14px env(safe-area-inset-bottom);justify-content:space-around;border-right:0;border-top:1px solid var(--line)}
  .logo{display:none}
  .rail nav{flex-direction:row;margin:0}
  .rail .add,.me{width:42px;height:42px}
  .rail .end{display:flex;margin:0}
  .view{padding:18px 16px}
  .deck{grid-template-columns:minmax(0,1fr);gap:20px}
  .card{padding:18px;border-radius:26px}
  .sleeve{width:clamp(150px,calc(100dvh - 500px),100%)}
  .mini{bottom:12px;left:12px;right:12px}
  .toast{bottom:calc(80px + env(safe-area-inset-bottom))}
  dialog{max-height:88dvh;overflow:auto}
}
@media(max-height:560px) and (min-width:821px){
  .rail{padding:12px 0}
  .rail nav{margin-top:14px}
  .view{padding-top:16px;padding-bottom:16px}
}
@media(max-width:560px){
  .row{grid-template-columns:44px 1fr auto;gap:12px;padding:8px}
  .cv{width:44px;height:44px}
  .dur{display:none}
  .acts button{width:32px;height:32px;font-size:17px}
  .head h1{font-size:44px}
  .tools .search{min-width:100%}
  .knob{grid-template-columns:70px 1fr 46px}
  body.focus .card{grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "info" "seek" "ctrl"}
  body.focus .sleeve{justify-self:center;width:clamp(120px,min(68vw,36dvh),300px);margin-top:50px}
  body.focus .info{padding-right:0}
  body.focus h1{font-size:clamp(24px,7vw,32px)}
}
@media(pointer:coarse){
  input[type=range]{height:30px}
  input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-8px}
  input[type=range]::-moz-range-thumb{width:20px;height:20px}
  body.focus #seek::-webkit-slider-thumb{width:16px;height:16px;margin-top:-5.5px}
  body.focus #seek::-moz-range-thumb{width:16px;height:16px}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important}
}