trykeyline 0.0.0-stage → 0.1.0

package/plugins/keyline/skills/keyline/glass/type/assets/prose.tsx

@@ -0,0 +1,268 @@
+/**
+ * Long-form prose renderer — the reading half of the type system.
+ *
+ * The reading column is TWO SIZES: 16px for headings, 14px for everything a
+ * reader reads. Which means size does no work below the headings, and the
+ * blocks sharing 14px have to separate on other axes — each on a different
+ * one, or they collide:
+ *
+ *   lead     leading, 1.9 against the body's 1.75
+ *   keyline  weight 500, and 36px of air on both sides
+ *   body     1.75 — the baseline the others are read against
+ *   quote    a 3px rounded bar and a 16px indent
+ *   note     13px, the faint tier, and a 1px rule
+ *
+ * The rule that produced this: A TIER MUST NEVER OUTRANK THE HEADING IT SITS
+ * UNDER. An earlier pass ran the keyline at 17px, above the 16px heading it
+ * belonged to, and the page read as though the paragraphs were shouting over
+ * the titles. Pulling everything to one size removes any chance of that
+ * returning.
+ *
+ * Spacing is deliberately asymmetric around headings: 40px above, 12px below,
+ * so a heading belongs to the paragraph that follows it rather than floating
+ * between two sections. The keyline is the one symmetric block, because it
+ * belongs to neither neighbour.
+ *
+ * Colour comes from the Glass colour guide (`glass/color/guide.md`): `gray-1000`/`gray-900` for
+ * the two upper text tiers, and the `muted`/`quiet`/`faint` tokens below them
+ * (which are deliberately NOT ramp steps — 500–800 are border values and fail
+ * as text in a light theme). `gray-500` stays on decorative marks, which carry
+ * no text. `reveal` comes from glass/motion.
+ */
+
+import { Fragment, type ReactNode } from "react";
+
+export type Block =
+  | { type: "p" | "lead" | "keyline" | "note"; text: string }
+  | { type: "h2"; text: string }
+  | { type: "quote"; text: string; cite?: string }
+  | { type: "figure"; src: string; alt: string; caption: string; aspect?: string }
+  | { type: "ul" | "ol"; items: string[] };
+
+export function Prose({ blocks }: { blocks: Block[] }) {
+  return (
+    <div className="text-[14px] leading-[1.75] text-gray-1000">
+      {blocks.map((b, i) => {
+        switch (b.type) {
+          /* The opening paragraph. Same size as the body; the 1.9 leading is
+             the entire difference, and it's what stops a piece reading as one
+             undifferentiated block from the first screen. */
+          case "lead":
+            return (
+              <p key={i} className="reveal mb-8 text-[14px] leading-[1.9] text-gray-1000">
+                {renderInline(b.text)}
+              </p>
+            );
+
+          case "p":
+            return (
+              <p key={i} className="reveal mb-6">
+                {renderInline(b.text)}
+              </p>
+            );
+
+          /* The one sentence a section is for. Authored by promoting a
+             sentence out of a paragraph and DELETING it from the paragraph —
+             a section that gains a keyline gets shorter. One per section.
+             Everything that makes it a landmark comes from weight and from
+             the 36px of air, so it can never outrank the heading above it. */
+          case "keyline":
+            return (
+              <p
+                key={i}
+                className="reveal my-9 text-[14px] font-medium leading-[1.6] text-gray-1000"
+              >
+                {renderInline(b.text)}
+              </p>
+            );
+
+          /* An aside set outside the argument — a caveat, a scope limit, a
+             piece of provenance. Its rule is 1px against the quote's 3px and
+             its type is four steps down, so two indented rules on one page
+             can't be mistaken for each other. */
+          case "note":
+            return (
+              <p
+                key={i}
+                className="reveal my-7 border-l border-gray-alpha-300 pl-4 text-[13px] leading-[1.6] text-faint"
+              >
+                {renderInline(b.text)}
+              </p>
+            );
+
+          /* 16px against 14px body — one step, and the weight, the tight
+             leading and the 40px above do the real work. This is the same
+             size as the page's own title, separated by position alone. */
+          case "h2":
+            return (
+              <h2
+                key={i}
+                className="reveal mt-10 mb-3 text-[16px] font-medium leading-[1.2] tracking-[-0.015em] text-gray-1000"
+              >
+                {renderInline(b.text)}
+              </h2>
+            );
+
+          /* The type is identical to the body around it, so THE BAR IS THE
+             ENTIRE SIGNAL — which is why it's a real one. It used to be a 2px
+             alpha-300 border, ten percent black, near enough invisible on a
+             white page; survivable only while the quote was also two steps
+             larger than the body. When you remove one signal, audit the ones
+             you left in.
+
+             A flex child rather than a border-left, because a border can't be
+             rounded on its own and a squared-off bar reads as a table rule.
+             No vertical margin on it, so flex's default `stretch` runs it the
+             full height of the quote including the citation. */
+          case "quote":
+            return (
+              <blockquote key={i} className="reveal my-9 flex gap-4">
+                <span aria-hidden className="w-[3px] shrink-0 rounded-full bg-gray-500" />
+                <div className="text-[14px] leading-[1.75] text-gray-1000">
+                  {renderInline(b.text)}
+                  {/* not-italic is required — <cite> carries UA italics that the
+                      global `em, i { font-style: normal }` rule doesn't reach. */}
+                  {b.cite && (
+                    <cite className="mt-2 block text-[13px] not-italic text-quiet">— {b.cite}</cite>
+                  )}
+                </div>
+              </blockquote>
+            );
+
+          /* Aspect ratio declared on a wrapper so the box is reserved before
+             the image loads and nothing shifts. `ring-1` rather than a border,
+             so the outline doesn't participate in the box model and the corner
+             radius stays exact.
+
+             The caption is the point of the figure, not a label on it — what
+             the thing was for, and which constraint shaped it. Set at the note
+             tier so it reads as apparatus; at body size it would compete with
+             the paragraph after it. */
+          case "figure":
+            return (
+              <figure key={i} className="reveal my-9">
+                <div className="overflow-hidden rounded-[10px] bg-gray-100 ring-1 ring-gray-alpha-300">
+                  <div style={{ aspectRatio: b.aspect ?? "16 / 9" }}>
+                    <img
+                      src={b.src}
+                      alt={b.alt}
+                      loading="lazy"
+                      decoding="async"
+                      className="h-full w-full object-cover"
+                    />
+                  </div>
+                </div>
+                <figcaption className="mt-2.5 text-[13px] leading-[1.55] text-faint">
+                  {renderInline(b.caption)}
+                </figcaption>
+              </figure>
+            );
+
+          /* marker: drops the bullets to the quiet tier. At the text colour
+             they read as a column of dark dots pulling the eye down the left
+             edge; quiet, they read as structure. space-y-2 inside vs mb-6
+             below — items belong to each other more than to what follows. */
+          case "ul":
+            return (
+              <ul key={i} className="reveal mb-6 list-disc space-y-2 pl-5 marker:text-gray-500">
+                {b.items.map((it, j) => (
+                  <li key={j}>{renderInline(it)}</li>
+                ))}
+              </ul>
+            );
+          case "ol":
+            return (
+              <ol key={i} className="reveal mb-6 list-decimal space-y-2 pl-5 marker:text-gray-500">
+                {b.items.map((it, j) => (
+                  <li key={j}>{renderInline(it)}</li>
+                ))}
+              </ol>
+            );
+
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}
+
+/**
+ * Inline markdown for **strong**, *em* and [links](/there), mapped onto the
+ * system's two axes instead of bold and italic:
+ *
+ *   **strong** → weight 500 + primary colour   (advances)
+ *   *em*       → muted colour, no slant        (recedes)
+ *
+ * This gives genuinely two-directional emphasis, which a bold-only system
+ * can't express. The semantic tags stay — screen readers still announce them.
+ *
+ * One caution specific to a two-size reading column: <strong> and the keyline
+ * are now the same weight at the same size, so a paragraph with a long bolded
+ * clause reads as a keyline that failed to get its own line. Keep strong
+ * emphasis to a few words; anything longer wants to BE a keyline.
+ *
+ * Links are here because the strongest sentences often live in data rather
+ * than JSX, and a claim that can't carry a link to its own evidence is just an
+ * assertion. One link treatment everywhere prose carries one.
+ */
+const TOKENS = /(\*\*[^*]+\*\*|\*[^*]+\*|\[[^\]]+\]\([^)\s]+\))/g;
+const LINK = /^\[([^\]]+)\]\(([^)\s]+)\)$/;
+
+const LINK_CLASS =
+  "underline decoration-gray-alpha-500 decoration-1 underline-offset-[3px] " +
+  "transition-[opacity,text-decoration-color] duration-150 ease-geist " +
+  "hover:decoration-gray-1000 hover:opacity-70";
+
+export function renderInline(text: string): ReactNode {
+  const tokens = text.split(TOKENS).filter(Boolean);
+  return (
+    <>
+      {tokens.map((tok, i) => {
+        if (tok.startsWith("**") && tok.endsWith("**")) {
+          return (
+            <strong key={i} className="font-medium text-gray-1000">
+              {tok.slice(2, -2)}
+            </strong>
+          );
+        }
+
+        const link = LINK.exec(tok);
+        if (link) {
+          const [, label, href] = link;
+          // In-app paths route through the framework's Link; everything else
+          // (mailto:, other origins, files) is a plain anchor, and an http(s)
+          // one opens away from the site.
+          const external = /^https?:/.test(href);
+          return (
+            <a
+              key={i}
+              href={href}
+              className={LINK_CLASS}
+              {...(external ? { target: "_blank", rel: "noopener" } : {})}
+            >
+              {label}
+            </a>
+          );
+        }
+
+        if (tok.startsWith("*") && tok.endsWith("*")) {
+          return (
+            <em key={i} className="text-muted">
+              {tok.slice(1, -1)}
+            </em>
+          );
+        }
+        return <Fragment key={i}>{tok}</Fragment>;
+      })}
+    </>
+  );
+}
+
+/** The same string with its markers removed — for titles, meta and plain text. */
+export function stripInlineMarkup(text: string): string {
+  return text
+    .replace(/\[([^\]]+)\]\([^)\s]+\)/g, "$1")
+    .replace(/\*\*([^*]+)\*\*/g, "$1")
+    .replace(/\*([^*]+)\*/g, "$1");
+}

package/plugins/keyline/skills/keyline/glass/type/assets/type-tokens.css

@@ -0,0 +1,414 @@
+/* ─────────────────────────────────────────────────────────────────────────
+   Typographic system — tokens
+   Drop-in for Tailwind v4 (@theme) or any CSS setup (the :root block).
+   Swap "Archivo" for your family; keep the ladder.
+
+   The ladder tops out at 18px on purpose. See glass/type/scale.md — a low
+   ceiling is what forces every template onto one scale, and it's the single
+   most consequential choice in this system.
+   ───────────────────────────────────────────────────────────────────────── */
+
+@theme {
+  /* Self-hosted, with a metric-matched fallback generated by the loader
+     (next/font, fontaine, or a hand-tuned @font-face with size-adjust). The
+     system faces after it are belt and braces for a request that never lands.
+     A bare `display: swap` without metric matching is a reflow under the
+     reader's eye — see §7 of glass/type/guide.md. */
+  --font-sans: var(--font-archivo), system-ui, -apple-system, "Helvetica Neue", sans-serif;
+
+  /* Code, commands and paths. System stack on purpose — a second webfont for
+     a handful of monospace runs isn't worth the request. A second family
+     earns a download only if it's carrying reading copy. */
+  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
+
+  /* ── Size ladder ──────────────────────────────────────────────────────
+     Each size exists for a named role. See glass/type/scale.md before
+     adding one — most new roles fit an existing size at a new leading. */
+  --text-page: 18px;       /* index-page title — the top of the ladder */
+  --text-section: 16px;    /* detail-page title · section heading · prose heading */
+  --text-copy: 14px;       /* body · lead · keyline · quote · dek · UI rows */
+  --text-summary: 13.5px;  /* collapsed summary lines — the one half-step */
+  --text-dense: 13px;      /* notes · captions · meta · facts · footer */
+  --text-code: 12.5px;     /* monospace runs, stepped down for a wider family */
+  --text-micro: 12px;      /* tags · micro-labels */
+  --text-tip: 11px;        /* tooltips · initials */
+  --text-mark: 8.5px;      /* lettermarks — recognised, not read */
+  --text-card: 7.5px;      /* card lettering — the one place 600 is allowed */
+
+  /* ── Leading: three curves, one per job ───────────────────────────────
+     Display tightens as size grows. Reading opens as passages lengthen.
+     UI collapses to 1 so fixed-height boxes centre exactly.
+
+     With the size ladder this short, leading is a ROLE SIGNAL, not a
+     refinement: lead / body / dek are the same size and differ only here. */
+  --leading-page: 1.25;
+  --leading-title: 1.3;    /* a detail-page title, which wraps to two lines */
+  --leading-heading: 1.2;  /* a section heading, which doesn't */
+  --leading-lead: 1.9;     /* the opening paragraph */
+  --leading-prose: 1.75;   /* body — the baseline the others read against */
+  --leading-read: 1.65;
+  --leading-keyline: 1.6;
+  --leading-body: 1.55;
+  --leading-tight: 1.4;
+  --leading-none: 1;
+
+  /* ── Tracking: a large-size correction ────────────────────────────────
+     Two values, 2px apart, because there are only two sizes above 14px.
+     A system tracking six steps has a scale doing too much work. */
+  --tracking-page: -0.02em;     /* 18px */
+  --tracking-heading: -0.015em; /* 16px */
+  --tracking-card: -0.01em;     /* 7.5px, set solid */
+  --tracking-mark: 0.02em;      /* tiny caps need the opposite */
+
+  /* ── Weight: two, and only two ─────────────────────────────────────── */
+  --font-weight-normal: 400;   /* all body, all prose, all quiet UI */
+  --font-weight-medium: 500;   /* headings, <strong>, active state, marks */
+  /* The one exception, and it lives below the readable floor: at 7.5px a 500
+     doesn't survive rasterisation, so the choice is 600 or nothing. One
+     instance of this in a codebase is the right number. */
+  --font-weight-card: 600;
+}
+
+/* Text colour tiers live in the Glass colour guide (`glass/color/guide.md`). The roles below
+   reference them by name:
+     primary   → --color-gray-1000   17.93:1
+     secondary → --color-gray-900     8.45:1
+     muted     → --color-muted        6.48:1
+     quiet     → --color-quiet        5.49:1
+     faint     → --color-faint        4.61:1
+
+   Only the top two are ramp steps. muted/quiet/faint are their OWN tokens,
+   because a border needs 3:1 against its surface and text needs 4.5:1 — one
+   step can't serve both. Reusing mid-ramp greys (500-800) for text fails in
+   a light theme while looking perfectly fine in dark. */
+
+@layer base {
+  body {
+    font-family: var(--font-sans);
+    font-weight: var(--font-weight-normal);
+    font-size: var(--text-copy);
+    line-height: var(--leading-body);
+
+    /* Tabular by default. In a text-heavy interface most numbers sit in a
+       column that should align — dates, timestamps, read times, clocks.
+       A live-updating number is unreadable without this. */
+    font-variant-numeric: tabular-nums;
+
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  /* Emphasis is re-mapped onto weight and colour. A separate italic file
+     fights geometric letterforms, and a 700 bold blots open prose. Keep the
+     semantic tags — only the visual mapping changed. */
+  em,
+  i {
+    font-style: normal;
+  }
+
+  /* <cite> and <blockquote> carry UA italics the rule above doesn't reach. */
+  cite {
+    font-style: normal;
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Role classes — optional. Use these, or apply the tokens inline through
+   Tailwind arbitrary values (text-[14px] leading-[1.65]) as the reference
+   implementation does. Either way the numbers come from one place.
+
+   Note how many of these share --text-copy. That's the system working: once
+   the ladder is short, a role is a (size, leading, weight, rule) tuple and
+   size is usually the part that doesn't vary.
+   ───────────────────────────────────────────────────────────────────────── */
+
+@layer components {
+  /* An index page's title. The largest role there is. */
+  .t-page {
+    font-size: var(--text-page);
+    line-height: var(--leading-page);
+    letter-spacing: var(--tracking-page);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* A detail page's title. Looser leading than a section heading because it
+     wraps; otherwise identical, and deliberately so. */
+  .t-title {
+    font-size: var(--text-section);
+    line-height: var(--leading-title);
+    letter-spacing: var(--tracking-heading);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .t-section {
+    font-size: var(--text-section);
+    line-height: var(--leading-heading);
+    letter-spacing: var(--tracking-heading);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .t-sub {
+    font-size: var(--text-copy);
+    line-height: var(--leading-tight);
+    font-weight: var(--font-weight-medium);
+  }
+
+  /* Long-form body. Same size as a UI paragraph; the leading is the whole
+     difference, and it has to be exact. */
+  .t-prose {
+    font-size: var(--text-copy);
+    line-height: var(--leading-prose);
+  }
+
+  /* The opening paragraph. Separates from .t-prose on leading alone. */
+  .t-lead {
+    font-size: var(--text-copy);
+    line-height: var(--leading-lead);
+  }
+
+  /* The one sentence a section is for. Separates on weight and on air —
+     symmetric margins, because it belongs to neither neighbour. */
+  .t-keyline {
+    font-size: var(--text-copy);
+    line-height: var(--leading-keyline);
+    font-weight: var(--font-weight-medium);
+    margin-block: 36px;
+  }
+
+  /* A standfirst. Separates from .t-lead on colour and leading — the
+     tightest pairing in the system. Check this one first if a page starts
+     to look undifferentiated. */
+  .t-dek {
+    font-size: var(--text-copy);
+    line-height: var(--leading-body);
+    color: var(--color-muted);
+  }
+
+  .t-read {
+    font-size: var(--text-copy);
+    line-height: var(--leading-read);
+  }
+
+  .t-body {
+    font-size: var(--text-copy);
+    line-height: var(--leading-body);
+  }
+
+  /* Single-line UI text in a fixed-height box. leading-none so a descender
+     can't shift the box and vertical centring is exact. */
+  .t-row {
+    font-size: var(--text-copy);
+    line-height: var(--leading-none);
+  }
+
+  .t-summary {
+    font-size: var(--text-summary);
+    line-height: var(--leading-keyline);
+  }
+
+  .t-dense {
+    font-size: var(--text-dense);
+    line-height: var(--leading-tight);
+  }
+
+  /* An aside set outside the argument — a caveat, a scope limit, a piece of
+     provenance. Its 1px rule is deliberately lighter than the pull quote's
+     3px bar: two indented rules on one page must be unmistakable. */
+  .t-note {
+    font-size: var(--text-dense);
+    line-height: var(--leading-keyline);
+    color: var(--color-faint);
+    border-left: 1px solid var(--color-gray-alpha-300);
+    padding-left: 16px;
+    margin-block: 28px;
+  }
+
+  .t-meta {
+    font-size: var(--text-dense);
+  }
+
+  .t-code {
+    font-family: var(--font-mono);
+    font-size: var(--text-code);
+    line-height: var(--leading-keyline);
+  }
+
+  .t-micro {
+    font-size: var(--text-micro);
+  }
+
+  .t-tip {
+    font-size: var(--text-tip);
+    line-height: var(--leading-none);
+  }
+
+  /* Not text — a two-or-three-letter stand-in for a logo, sized below the
+     readability floor because you recognise it rather than read it. */
+  .t-mark {
+    font-size: var(--text-mark);
+    line-height: var(--leading-none);
+    letter-spacing: var(--tracking-mark);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .t-card {
+    font-size: var(--text-card);
+    line-height: 1.2;
+    letter-spacing: var(--tracking-card);
+    font-weight: var(--font-weight-card);
+  }
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+   Imported prose — a rendered Markdown document, a CMS field, a README.
+   It arrives as an HTML string, so it can't carry utility classes. Style it
+   by element inside one scoped class, and map it onto the roles above rather
+   than letting it invent a second ladder.
+   ───────────────────────────────────────────────────────────────────────── */
+
+@layer components {
+  .prose-imported {
+    font-size: var(--text-copy);
+    line-height: var(--leading-read);
+    color: var(--color-muted);
+  }
+  /* The document starts with whatever it starts with; a leading <h2> would
+     otherwise push 44px of nothing above itself. */
+  .prose-imported > :first-child {
+    margin-top: 0;
+  }
+
+  /* Three levels, not two — an imported document nests deeper than authored
+     prose, so h4 gets a real role instead of a browser default. */
+  .prose-imported h2 {
+    margin: 44px 0 12px;
+    font-size: var(--text-section);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-heading);
+    letter-spacing: var(--tracking-heading);
+    color: var(--color-gray-1000);
+  }
+  .prose-imported h3 {
+    margin: 32px 0 10px;
+    font-size: var(--text-copy);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-tight);
+    color: var(--color-gray-1000);
+  }
+  .prose-imported h4 {
+    margin: 24px 0 8px;
+    font-size: var(--text-dense);
+    font-weight: var(--font-weight-medium);
+    line-height: var(--leading-tight);
+    color: var(--color-gray-900);
+  }
+
+  .prose-imported p,
+  .prose-imported ul,
+  .prose-imported ol,
+  .prose-imported blockquote {
+    margin: 12px 0;
+  }
+
+  /* A UA disc at 14px is far too heavy for this system. Same 3px dot as the
+     hand-rolled bullets everywhere else. */
+  .prose-imported ul {
+    list-style: none;
+    padding-left: 18px;
+  }
+  .prose-imported ul > li {
+    position: relative;
+  }
+  .prose-imported ul > li::before {
+    content: "";
+    position: absolute;
+    left: -14px;
+    top: 10px;
+    width: 3px;
+    height: 3px;
+    border-radius: 999px;
+    background: var(--color-gray-500);
+  }
+  .prose-imported ol {
+    list-style: decimal;
+    padding-left: 18px;
+  }
+  /* Tabular, so a run past 9 doesn't shift its text. */
+  .prose-imported li::marker {
+    color: var(--color-faint);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .prose-imported strong {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-gray-1000);
+  }
+
+  .prose-imported code {
+    font-family: var(--font-mono);
+    font-size: 0.87em;
+    background: var(--color-gray-100);
+    border-radius: 4px;
+    padding: 1.5px 4px;
+    color: var(--color-gray-1000);
+  }
+
+  /* Code blocks and tables are the two things a Markdown document has that a
+     designed page doesn't, and both are unbounded. Each scrolls inside its
+     own box — the page body must never scroll sideways. */
+  .prose-imported pre {
+    margin: 16px 0;
+    padding: 14px 16px;
+    background: var(--color-background-200);
+    border: 1px solid var(--color-gray-alpha-300);
+    border-radius: 12px;
+    overflow-x: auto;
+  }
+  .prose-imported pre code {
+    background: none;
+    padding: 0;
+    font-size: var(--text-code);
+    line-height: var(--leading-keyline);
+    color: var(--color-gray-900);
+  }
+
+  /* Wrap each <table> in a div with this class at render time. */
+  .prose-imported .table-scroll {
+    margin: 16px 0;
+    overflow-x: auto;
+  }
+  .prose-imported table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--text-dense);
+    line-height: 1.5;
+  }
+  .prose-imported th,
+  .prose-imported td {
+    padding: 8px 12px 8px 0;
+    text-align: left;
+    vertical-align: top;
+    border-bottom: 1px solid var(--color-gray-alpha-300);
+  }
+  .prose-imported th {
+    font-weight: var(--font-weight-medium);
+    color: var(--color-gray-1000);
+    white-space: nowrap;
+  }
+
+  .prose-imported blockquote {
+    padding-left: 14px;
+    border-left: 2px solid var(--color-gray-alpha-300);
+    color: var(--color-faint);
+  }
+  .prose-imported hr {
+    margin: 32px 0;
+    border: 0;
+    border-top: 1px solid var(--color-gray-alpha-300);
+  }
+  .prose-imported img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 12px;
+  }
+}