diff --git a/web/index.html b/web/index.html
index ae248b5..a509b4d 100644
--- a/web/index.html
+++ b/web/index.html
@@ -61,8 +61,8 @@
     </div>
   </header>
   <div id="discovery-options" hidden>
-    <label>chart <select id="chart-kind"><option value="sales">best sellers</option><option value="free">top free downloads</option></select></label>
-    <label>period <select id="chart-period"><option value="week">this week</option><option value="year">this year</option><option value="all-time">all time</option></select></label>
+    <label><span class="sr-only">chart</span><select id="chart-kind"><option value="sales">best sellers</option><option value="free">top free downloads</option></select></label>
+    <label><span class="sr-only">period</span><select id="chart-period"><option value="week">this week</option><option value="year">this year</option><option value="all-time">all time</option></select></label>
   </div>
   <button type="button" id="active-filters" hidden></button>
 
diff --git a/web/src/style.css b/web/src/style.css
index 38676de..ea666ba 100644
--- a/web/src/style.css
+++ b/web/src/style.css
@@ -86,6 +86,7 @@ body.zen #bar { display: none; }
 #discovery-options { top: 4.2rem; display: flex; gap: 0.5rem; align-items: center; }
 #discovery-options label { display: flex; align-items: center; gap: 0.35rem; color: var(--muted); font-size: 0.75rem; }
 #discovery-options select { color: var(--fg); background: #18181b; border: 1px solid #ffffff40; border-radius: 8px; padding: 0.45rem; font: inherit; }
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
 #active-filters { top: 7.3rem; padding: 0.35rem 0.7rem; background: #19191de8; border-radius: 8px; font-size: 0.75rem; white-space: nowrap; }
 body:has(#discovery-options[hidden]) #active-filters { top: 4.3rem; }
 body.zen :is(#discovery-options, #active-filters) { display: none; }
@@ -1344,6 +1345,13 @@ body.zen .content { gap: 0.3rem; }
 .bar-end { gap: 0.45rem; }
 .bar-end .icon-btn, .avatar-btn { flex-shrink: 0; border-radius: 50%; }
 #discovery-options { top: 4.8rem; }
+#discovery-options { gap: 0; padding: 0.2rem; border: 1px solid #ffffff18; border-radius: 999px; background: #161619d9; backdrop-filter: blur(12px); }
+#discovery-options label { position: relative; }
+#discovery-options label + label { border-left: 1px solid #ffffff20; }
+#discovery-options label::after { content: ''; position: absolute; right: 0.85rem; top: 50%; width: 0.35rem; height: 0.35rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
+#discovery-options select { appearance: none; min-height: 2rem; padding: 0.4rem 2rem 0.4rem 0.8rem; border: 0; border-radius: 999px; background: transparent; font-size: 0.8rem; cursor: pointer; }
+#discovery-options select:hover { background: #ffffff12; }
+#discovery-options select option { color: #fff; background: #18181b; }
 #active-filters { top: 7.8rem; }
 .time { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.75rem 0.5rem; }
 .time .cur { grid-column: 1; grid-row: 1; justify-self: start; }
@@ -1355,7 +1363,7 @@ body.zen .content { gap: 0.3rem; }
   .art { width: min(14rem, 29dvh, 58vw); }
   .card.liquid .art { margin-bottom: 1.5rem; }
   .content { margin-top: 2.5rem; }
-  #discovery-options { top: calc(max(0.6rem, env(safe-area-inset-top)) + 6.4rem); gap: 0.75rem; }
+  #discovery-options { top: calc(max(0.6rem, env(safe-area-inset-top)) + 6.4rem); gap: 0; }
   #active-filters { top: calc(max(0.6rem, env(safe-area-inset-top)) + 9.2rem); }
 }
 @media (max-width: 640px) and (max-height: 700px) {
@@ -1383,7 +1391,7 @@ button.danger:not(.link) { background: var(--danger); color: #111; }
 .content .actions {
   position: relative; inset: auto; translate: none; transform: none;
   width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
-  align-items: center; gap: 0.5rem; margin-top: 0.35rem; padding: 0.75rem 0 0;
+  align-items: center; gap: 0.5rem; margin-top: 0.65rem; padding: 0.75rem 0 0;
   border: none; border-top: 1px solid #ffffff26; border-radius: 0;
   background: none;
 }
@@ -1405,8 +1413,10 @@ button.danger:not(.link) { background: var(--danger); color: #111; }
 .byline .pill { min-height: 32px; padding: 0.3rem 0.7rem; border-radius: 8px; border-color: var(--line); background: #ffffff09; }
 body.zen .content .actions { display: none; }
 @media (min-width: 900px) and (pointer: fine) {
-  .art { width: min(calc(14 * var(--u)), 35vh); }
+  .art { width: min(calc(16 * var(--u)), 39vh); }
   .content { gap: 0.65rem; }
+  .card.liquid .art { margin-bottom: 1.25rem; }
+  .content .time { min-height: 1.2rem; }
 }
 @media (max-width: 640px) {
   .content { margin-bottom: 4.5rem; }