Molecule Design Guide

@@ -10,7 +10,7 @@   * { box-sizing:border-box; margin:0; padding:0; }   html, body { background:var(--bg); color:var(--body);     font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-    scrollbar-width:none; -ms-overflow-style:none; overflow:hidden; }+    scrollbar-width:none; -ms-overflow-style:none; }   html::-webkit-scrollbar, body::-webkit-scrollbar { width:0; height:0; display:none; }   #wrap { max-width:880px; margin:0 auto; padding:24px 20px 40px; }   h2 { color:var(--text); font-size:25px; margin:8px 0 6px; letter-spacing:-.01em; }@@ -34,7 +34,7 @@   .pagehead h1 { color:var(--text); font-size:33px; margin:6px 0 8px; letter-spacing:-.02em; }   .sub { color:var(--muted); max-width:640px; }   .rule { height:3px; width:64px; background:var(--accent); border-radius:2px; margin:16px 0 0; }-  .tabs { display:flex; gap:12px; margin:24px 0 26px; }+  .tabs { display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 26px; }   .tab { background:var(--surface); border:1.5px solid var(--border); border-radius:999px;     color:var(--text); font:600 14.5px/1 inherit; font-family:inherit; padding:12px 26px;     cursor:pointer; transition:border-color .15s, box-shadow .15s, color .15s; }@@ -78,6 +78,12 @@   .count { color:var(--muted); font-size:12.5px; min-width:46px; text-align:right; }   .srcnote { color:var(--muted); font-size:13px; }   .secdiv { border:none; border-top:1px solid var(--border); margin:32px 0 0; }+  @media (max-width: 700px) {+    #wrap { padding:18px 12px 32px; }+    .fig img { max-height:300px; }+    .tab { padding:10px 18px; font-size:13.5px; }+    .deckbar { flex-wrap:wrap; }+  }   footer { color:var(--muted); font-size:12.5px; margin-top:34px; border-top:1px solid var(--border); padding-top:12px; } </style></head><body> <div id="wrap">@@ -512,7 +518,7 @@     var el = document.getElementById(id);     if (el) el.scrollIntoView({behavior: 'smooth', block: 'start'});   }-  document.querySelectorAll('.tab, .jumplink').forEach(function(b) {+  document.querySelectorAll('.tab[data-go], .jumplink').forEach(function(b) {     b.addEventListener('click', function(e) { e.preventDefault(); go(b.dataset.go); });   });   var n = 1, N = 11;