Ban px from stylesheets: every length rem/em off the responsive root

Only the :root font-size definition itself stays absolute - it is the
base everything derives from. Embed-card inline styles in the editor
follow the same rule; already-stored embeds keep their old px inline
styles until re-edited.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

prosekit-editor.js

@@ -129,15 +129,15 @@ function defineGiteaRepoEmbed() {
           'data-description': description,
           'data-url': url,
           style:
-            'display:block;border:1px solid #ddd;border-radius:8px;' +
-            'padding:12px 16px;margin:8px 0;font-family:inherit;',
+            'display:block;border:0.06em solid #ddd;border-radius:0.5em;' +
+            'padding:0.75em 1em;margin:0.5em 0;font-family:inherit;',
         },
         [
           'a',
           { href: url, style: 'font-weight:600;text-decoration:none;color:inherit;' },
           `${owner}/${repo}`,
         ],
-        ['div', { style: 'opacity:0.7;font-size:0.9em;margin-top:4px;' }, description],
+        ['div', { style: 'opacity:0.7;font-size:0.9rem;margin-top:0.25em;' }, description],
       ]
     },
   })

style/main.css

@@ -57,6 +57,9 @@
 
   --radius: 1.1rem;
 
+  /* The single place absolute units are allowed: this IS the base every
+     other length derives from (rem/em everywhere else - px is banned in
+     stylesheets). First line is the fallback for engines without lvmin. */
   font-size: 17px;
   font-size: max(12px, calc(2.1lvmin + 3pt));
 }
@@ -112,7 +115,7 @@ main.not-found {
 /* hero */
 
 .hero {
-  max-width: 780px;
+  max-width: 46rem;
   margin: 0 auto;
   padding: 4rem 1.5rem 2.5rem;
   display: flex;
@@ -200,7 +203,7 @@ main.not-found {
   z-index: 1;
   padding: 0 1.5rem 3.5rem;
   gap: 0.6rem;
-  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.8);
+  text-shadow: 0 0.12em 1.4em rgba(0, 0, 0, 0.8);
 }
 
 /* Softens the otherwise hard cut where the full-bleed canvas meets the
@@ -229,7 +232,7 @@ main.not-found {
   gap: 1.25rem;
 }
 
-@media (max-width: 700px) {
+@media (max-width: 43.75rem) {
   .alternatives {
     padding: 0;
     gap: 3.5rem;
@@ -263,7 +266,7 @@ main.not-found {
 .question-nav a {
   color: var(--ink-dim);
   text-decoration: none;
-  border-bottom: 1px solid var(--line);
+  border-bottom: 0.06rem solid var(--line);
 }
 
 .question-nav a:hover {
@@ -293,7 +296,7 @@ main.not-found {
 
 .alt-card {
   background: var(--paper-raised);
-  border: 1px solid var(--line);
+  border: 0.06rem solid var(--line);
   border-radius: var(--radius);
   padding: 1.75rem 1.9rem;
 }
@@ -363,7 +366,7 @@ main.not-found {
 }
 
 .feature {
-  border-left: 3px solid var(--feature-accent, transparent);
+  border-left: 0.18rem solid var(--feature-accent, transparent);
 }
 
 .feature-icon {
@@ -413,7 +416,7 @@ textarea {
   font: inherit;
   color: var(--ink);
   background: var(--paper);
-  border: 1px solid var(--line);
+  border: 0.06rem solid var(--line);
   border-radius: 0.6rem;
   padding: 0.65rem 0.8rem;
   width: 100%;
@@ -438,12 +441,12 @@ input:focus,
 textarea:focus {
   outline: none;
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-soft);
+  box-shadow: 0 0 0 0.18rem var(--accent-soft);
 }
 
 .prosekit-wrap {
   background: var(--paper);
-  border: 1px solid var(--line);
+  border: 0.06rem solid var(--line);
   border-radius: 0.6rem;
   overflow: hidden;
 }
@@ -452,7 +455,7 @@ textarea:focus {
   display: flex;
   gap: 0.2rem;
   padding: 0.4rem;
-  border-bottom: 1px solid var(--line);
+  border-bottom: 0.06rem solid var(--line);
   flex-wrap: wrap;
 }
 
@@ -461,7 +464,7 @@ textarea:focus {
   font-size: 0.9rem;
   color: var(--ink-dim);
   background: transparent;
-  border: 1px solid transparent;
+  border: 0.06rem solid transparent;
   border-radius: 0.4rem;
   padding: 0.3rem 0.55rem;
   cursor: pointer;
@@ -491,7 +494,7 @@ textarea:focus {
 
 .prosekit-wrap:focus-within {
   border-color: var(--accent);
-  box-shadow: 0 0 0 3px var(--accent-soft);
+  box-shadow: 0 0 0 0.18rem var(--accent-soft);
 }
 
 /* ProseKit's typography.css (loaded from esm.sh at mount time) sets
@@ -566,7 +569,7 @@ textarea:focus {
 }
 
 .alt-submit:active {
-  transform: translateY(1px);
+  transform: translateY(0.06em);
 }
 
 .alt-submit:disabled {
@@ -597,7 +600,7 @@ textarea:focus {
 
 .resource-raw {
   background: var(--paper);
-  border: 1px solid var(--line);
+  border: 0.06rem solid var(--line);
   border-radius: 0.6rem;
   padding: 0.8rem;
   font-size: 0.82rem;
@@ -611,7 +614,7 @@ textarea:focus {
 }
 
 .answer-row {
-  border: 1px solid var(--line);
+  border: 0.06rem solid var(--line);
   border-radius: 0.8rem;
   padding: 1rem 1.1rem;
   display: grid;
@@ -624,7 +627,7 @@ textarea:focus {
 
 .answer-fields {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
   gap: 0.5rem 1rem;
 }
 
@@ -674,7 +677,7 @@ textarea:focus {
 }
 
 .item-card {
-  border: 1px solid var(--line);
+  border: 0.06rem solid var(--line);
   border-radius: 0.8rem;
   padding: 1rem 1.1rem;
   display: grid;
@@ -736,8 +739,8 @@ textarea:focus {
   font-size: 0.85rem;
   color: var(--ink);
   background: var(--paper);
-  border: 1px solid var(--line);
-  border-radius: 999px;
+  border: 0.06rem solid var(--line);
+  border-radius: 999rem;
   padding: 0.4rem 0.9rem;
   cursor: pointer;
   transition: border-color 120ms, color 120ms, background 120ms;
@@ -759,7 +762,7 @@ textarea:focus {
   cursor: not-allowed;
 }
 
-@media (max-width: 640px) {
+@media (max-width: 40rem) {
   .hero {
     padding: 3rem 1.25rem 2rem;
   }