diff --git a/assets/style.css b/assets/style.css
index adf48bf..c7d4641 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -170,3 +170,40 @@ html:not(.ppcb-authed) body{overflow:hidden}
 #ppcb-gate input:focus{border-color:var(--acc)}
 .gate-go{width:100%;justify-content:center;margin-top:4px}
 .gate-msg{font-family:var(--mono);font-size:13px;margin-top:14px;min-height:18px}
+
+/* fix: hidden viz panels must actually hide (display:flex was overriding [hidden]) */
+.vizpanel[hidden]{display:none !important}
+
+/* ---------- mobile ---------- */
+@media(max-width:820px){
+  body{font-size:16px}
+  .wrap{padding:0 18px}
+  .top .wrap{gap:14px;height:56px}
+  nav.main{gap:16px}
+  nav.main a{font-size:13px}
+  .credits{font-size:12px;padding:6px 10px}
+  .hero{min-height:76vh}
+  .sec{padding:60px 0}
+  .vals{gap:22px;margin-top:40px}
+  .detail{grid-template-columns:1fr;gap:26px;padding:26px 0 60px}
+  .viz,.viewer{position:static}
+  .vizpanel,.viewer{height:56vh;min-height:320px}
+  .grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
+  .pins{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
+  .dactions{gap:8px}
+  .searchbar input{font-size:16px}
+}
+@media(max-width:540px){
+  .top .wrap{gap:10px}
+  nav.main{gap:12px}
+  nav.main a{font-size:12px}
+  .brand small{display:none}
+  .credits{display:none}
+  .hero h1{font-size:clamp(34px,10vw,56px)}
+  .grid{grid-template-columns:1fr}
+  .row2{grid-template-columns:1fr}
+  .viztabs{width:100%}
+  .viztabs button{flex:1;padding:9px 8px;text-align:center}
+  .assets{gap:12px;font-size:12px}
+  .gate-h{font-size:24px}
+}