refactor

index.html

@@ -11,10 +11,6 @@
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js"></script>
 
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap">
-
 <style>
     /* Fluid base size: every rem below scales with the viewport width
        (14px floor on phones, 18px cap on large screens) */
@@ -36,22 +32,19 @@
 
     :root {
         --accent: #1a9850;
+        --accent-soft: #e8f5ec;
         --border: #e2e2e0;
-        --rule: #1d1d1b;
         --muted: #6b6b68;
-        --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
-    }
-
-    h1, h3 {
-        font-family: var(--serif);
-        font-weight: 600;
+        --surface: #fafaf9;
     }
 
-    /* Sections are separated by a rule, not boxed */
     .card {
-        border-top: 1px solid var(--rule);
-        padding-top: 14px;
-        margin-top: 40px;
+        background: white;
+        border: 1px solid var(--border);
+        border-radius: 14px;
+        padding: clamp(18px, 2.2vw, 32px) clamp(20px, 3vw, 44px);
+        margin-top: 24px;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
     }
 
     .cardHeader {
@@ -69,16 +62,33 @@
 
     .status {
         font-size: 0.8125rem;
-        color: var(--muted);
+        padding: 4px 12px;
+        border-radius: 999px;
+        border: 1px solid transparent;
         overflow-wrap: anywhere;
     }
 
-    .status.ok b {
-        color: #1d1d1b;
+    .status:empty {
+        display: none;
+    }
+
+    .status.ok {
+        background: var(--accent-soft);
+        color: #146c3a;
+        border-color: #bfe3cb;
+    }
+
+    .status.loading,
+    .status.custom {
+        background: #f1f1ef;
+        color: var(--muted);
+        border-color: var(--border);
     }
 
     .status.error {
+        background: #fdecea;
         color: #a52a1f;
+        border-color: #f5c6c0;
     }
 
     .field {
@@ -106,20 +116,22 @@
     .card input[type="number"] {
         font: inherit;
         font-size: 0.875rem;
-        height: 36px;
-        padding: 0 10px;
-        border: 1px solid #bdbdba;
-        border-radius: 3px;
+        height: 38px;
+        padding: 0 12px;
+        border: 1px solid #cfcfcc;
+        border-radius: 8px;
         background: white;
         width: 100%;
         box-sizing: border-box;
+        transition: border-color 0.15s, box-shadow 0.15s;
     }
 
     .card select:focus,
     .card input[type="text"]:focus,
     .card input[type="number"]:focus {
         outline: none;
-        border-color: #1d1d1b;
+        border-color: var(--accent);
+        box-shadow: 0 0 0 3px rgba(26, 152, 80, 0.15);
     }
 
     .sources {
@@ -133,37 +145,43 @@
     .divider {
         color: var(--muted);
         font-size: 0.8125rem;
-        height: 36px;
+        height: 38px;
         display: flex;
         align-items: center;
-        font-style: italic;
     }
 
     .inputGroup {
         display: flex;
-        gap: 8px;
+    }
+
+    .inputGroup input[type="text"] {
+        border-radius: 8px 0 0 8px;
     }
 
     .inputGroup button {
         font: inherit;
         font-size: 0.875rem;
-        height: 36px;
-        padding: 0 16px;
-        border: 1px solid #1d1d1b;
-        border-radius: 3px;
-        background: #1d1d1b;
+        font-weight: 600;
+        height: 38px;
+        padding: 0 18px;
+        border: 1px solid var(--accent);
+        border-radius: 0 8px 8px 0;
+        background: var(--accent);
         color: white;
         cursor: pointer;
+        margin-left: -1px;
     }
 
     .inputGroup button:hover {
-        background: #444;
+        background: #137a40;
     }
 
     .sectionLabel {
-        margin: 26px 0 10px;
-        font-size: 0.875rem;
-        font-weight: 600;
+        margin: 22px 0 10px;
+        font-size: 0.75rem;
+        letter-spacing: 0.06em;
+        text-transform: uppercase;
+        color: var(--muted);
     }
 
     .archGrid {
@@ -172,15 +190,20 @@
         gap: 16px;
     }
 
-    /* Architecture summary as a plain line: "GQA · R = 1/4" */
     #archSummary {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
         margin-top: 12px;
-        font-size: 0.8125rem;
-        color: var(--muted);
     }
 
-    .chip + .chip::before {
-        content: " · ";
+    .chip {
+        font-size: 0.75rem;
+        padding: 3px 10px;
+        border-radius: 999px;
+        background: white;
+        border: 1px solid var(--border);
+        color: #444;
     }
 
     @media (max-width: 700px) {
@@ -213,19 +236,19 @@
 
     .badge {
         font-size: 0.8125rem;
+        font-weight: 600;
         font-variant-numeric: tabular-nums;
-    }
-
-    .badge::before {
-        content: "= ";
-        color: var(--muted);
+        padding: 2px 10px;
+        border-radius: 6px;
+        background: var(--accent-soft);
+        color: #146c3a;
     }
 
     #ninSlider {
         width: 100%;
         display: block;
         margin-top: 10px;
-        accent-color: #1d1d1b;
+        accent-color: var(--accent);
     }
 
     #ninLabels {
@@ -260,14 +283,18 @@
     }
 
     .eyebrow {
-        font-size: 0.875rem;
-        color: var(--muted);
+        font-size: 0.75rem;
+        font-weight: 700;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: var(--accent);
     }
 
     .hero h1 {
-        font-size: 2.25rem;
-        line-height: 1.15;
-        margin: 4px 0 10px;
+        font-size: 1.875rem;
+        line-height: 1.2;
+        margin: 6px 0 8px;
+        letter-spacing: -0.01em;
     }
 
     .lede {
@@ -288,7 +315,7 @@
         display: grid;
         /* Theta card as wide as its one-line rows; the formula takes the rest */
         grid-template-columns: minmax(0, 1fr) auto;
-        gap: 48px;
+        gap: 20px;
         align-items: stretch;
     }
 
@@ -300,7 +327,7 @@
 
     .card h3 {
         margin: 0 0 16px;
-        font-size: 1.25rem;
+        font-size: 1.0625rem;
     }
 
     /* Always a single line: everything inside is sized in em, and
@@ -335,7 +362,7 @@
         justify-content: space-between;
         gap: 0.33em;
         padding: 0.55em 0.78em 0.45em;
-        border-radius: 2px;
+        border-radius: 0.55em;
         border: 1.5px solid var(--c);
         background-color: color-mix(in srgb, var(--c) 16%, white);
     }
@@ -414,6 +441,7 @@
         display: inline-block;
         width: 10px;
         height: 10px;
+        border-radius: 3px;
         background: var(--c);
         margin-right: 8px;
         vertical-align: middle;
@@ -427,12 +455,11 @@
 
     /* ---------- About ---------- */
     .about {
-        margin: 48px 0 12px;
+        margin: 32px 0 12px;
     }
 
     .about p {
         line-height: 1.6;
-        max-width: 75ch;
     }
 
     .about a {
@@ -471,8 +498,11 @@
 
     .bibtex pre {
         margin: 0;
-        padding: 2px 70px 2px 14px;
-        border-left: 2px solid var(--border);
+        padding: 14px 16px;
+        padding-right: 80px;
+        background: white;
+        border: 1px solid var(--border);
+        border-radius: 8px;
         font-size: 0.8125rem;
         line-height: 1.5;
         overflow-x: auto;
@@ -480,18 +510,24 @@
 
     .copyBtn {
         position: absolute;
-        top: 0;
-        right: 0;
+        top: 8px;
+        right: 8px;
         font: inherit;
-        font-size: 0.8125rem;
-        padding: 0;
-        border: none;
-        background: none;
-        color: #146c3a;
-        text-decoration: underline;
+        font-size: 0.75rem;
+        font-weight: 600;
+        padding: 4px 12px;
+        border: 1px solid var(--border);
+        border-radius: 6px;
+        background: var(--surface);
+        color: #333;
         cursor: pointer;
     }
 
+    .copyBtn:hover {
+        border-color: var(--accent);
+        color: var(--accent);
+    }
+
     /* Model shown under each plot title, kept in sync by setStatus() */
     #plots h4 {
         margin-bottom: 4px;