/* Shiberu blog: the article body (.prose). Loaded by public post and
   changelog pages and by the staff editor's preview pane. Every rule sits
   under .prose and the colour tokens are set on .prose itself, so neither
   site's own tokens reach in or out. Light only, like the landing page.
   The fonts and --font-* stacks come from the page's own stylesheet
   (blog/site.css on public pages, supervisor/staff.css on the staff site). */

.prose {
  --p-ink: #173047;
  --p-ink-soft: #3f5566;
  --p-muted: #56697a;
  --p-surface: #fffdf7;
  --p-surface-2: #fff6e8;
  --p-border: rgba(23, 48, 71, 0.13);
  --p-border-strong: rgba(23, 48, 71, 0.24);
  --p-link: #1f6b4b;
  --p-link-hover: #174f38;
  --p-accent: #ff6b57;
  --p-eyebrow: #a93325;
  --p-code-bg: #f5eee2;
  --p-code-ink: #23384a;
  --p-shadow: 0 1px 2px rgba(23, 48, 71, 0.06), 0 12px 32px rgba(23, 48, 71, 0.08);
  --p-note: #2a65a3;
  --p-tip: #246b4b;
  --p-important: #7a4fc2;
  --p-warning: #8a5100;
  --p-caution: #b3402f;
  --p-tok-keyword: #a3337a;
  --p-tok-string: #1f7a4a;
  --p-tok-comment: #5c6872; /* 4.95:1 on the code background */
  --p-tok-number: #9a5000;
  --p-tok-name: #2357a6;
  --p-tok-type: #7a4fc2;
  color-scheme: light;
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.75;
  color: var(--p-ink);
  overflow-wrap: break-word;
}
.prose :lang(ja), .prose:lang(ja), .prose :lang(zh), .prose:lang(zh) { line-height: 1.95; line-break: strict; }
.prose:lang(ko), .prose :lang(ko) { word-break: keep-all; }
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol, .prose dl, .prose figure, .prose .table-wrap, .prose pre, .prose blockquote, .prose aside { margin: 0 0 1.3em; }
.prose a { color: var(--p-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
.prose a:hover { color: var(--p-link-hover); text-decoration-thickness: 2px; }
/* No scroll-margin: the page (html scroll-padding-top) already clears its sticky header. */
.prose h2, .prose h3, .prose h4 { color: var(--p-ink); line-height: 1.25; text-wrap: balance; }
.prose h1 { font-family: var(--font-display); font-weight: 400; font-size: 36px; line-height: 1.15; }
.prose h2 { font-family: var(--font-display); font-weight: 400; font-size: 32px; letter-spacing: -0.01em; margin: 2em 0 0.55em; }
.prose h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.005em; margin: 1.8em 0 0.5em; }
.prose h4 { font-size: 18px; font-weight: 700; margin: 1.6em 0 0.4em; }
/* CJK: the regional serif at its regular weight (site.css --font-display). */
.prose h2:lang(ja), .prose h2:lang(ko), .prose h2:lang(zh) { letter-spacing: 0; font-size: 27px; line-height: 1.35; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li { margin: 0.35em 0; }
.prose li::marker { color: var(--p-muted); }
.prose li > ul, .prose li > ol { margin: 0.35em 0 0; }
.prose strong { font-weight: 700; }
.prose hr { border: 0; border-top: 1px solid var(--p-border-strong); margin: 2.4em 0; }
.prose blockquote { border-left: 4px solid var(--p-border-strong); padding: 0.1em 0 0.1em 1.1em; color: var(--p-ink-soft); font-style: normal; }
.prose blockquote > :last-child { margin-bottom: 0; }
.prose img { max-width: 100%; height: auto; border-radius: 16px; display: block; margin: 0 auto; }
.prose figure { margin-left: 0; margin-right: 0; }
/* A picture never takes more than most of a screen: a portrait screenshot
   sits centred at its own shape, not 1.7 screens tall. The renderer marks
   the pictures the cap binds (tall: in the 720px column; tall-phone: on a
   phone too). The cap is a definite height, so the box has its shape from
   width/height before the file arrives; contain guards a narrow column. */
@media (min-width: 768px) { .prose figure > img.tall { height: min(80vh, 760px); width: auto; object-fit: contain; } }
.prose figure > img.tall-phone { height: min(80vh, 760px); width: auto; object-fit: contain; }
.prose figcaption { margin-top: 10px; text-align: center; color: var(--p-muted); font-size: 15px; line-height: 1.5; }
.prose video { width: 100%; height: auto; border-radius: 16px; background: #000; display: block; }
.prose dt { font-weight: 700; }
.prose dd { margin: 0 0 0.8em 1.2em; }
.prose del { color: var(--p-muted); }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--p-code-bg); color: var(--p-code-ink); padding: 0.12em 0.38em; border-radius: 6px; }
.prose pre { background: var(--p-code-bg); color: var(--p-code-ink); border: 1px solid var(--p-border); border-radius: 14px; padding: 16px 18px; overflow-x: auto; font-size: 15px; line-height: 1.6; }
.prose pre code { background: none; padding: 0; font-size: inherit; border-radius: 0; }
.prose ruby rt { font-size: 0.56em; color: var(--p-ink-soft); font-weight: 500; }
.hide-ruby .prose rt, .hide-ruby .prose rp { display: none; }

/* Tables scroll sideways in their frame; a soft shadow at an edge shows
   there is more that way (the cover gradients scroll with the table). */
.prose .table-wrap {
  overflow-x: auto; border: 1px solid var(--p-border); border-radius: 14px;
  background:
    linear-gradient(to right, var(--p-surface) 40%, rgba(255, 253, 247, 0)) left center / 48px 100% no-repeat local,
    linear-gradient(to left, var(--p-surface) 40%, rgba(255, 253, 247, 0)) right center / 48px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(23, 48, 71, 0.18), rgba(23, 48, 71, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(23, 48, 71, 0.18), rgba(23, 48, 71, 0)) right center / 14px 100% no-repeat scroll,
    var(--p-surface);
}
.prose table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.5; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--p-border); text-align: left; vertical-align: top; }
/* Phones: columns keep a readable width (the table scrolls instead of
   wrapping one word per line); the last, usually the notes, gets more so
   its rows stay short. Wider screens size columns by their content. */
@media (max-width: 760px) {
  .prose th { min-width: 8.5em; }
  .prose th:last-child:not(:first-child) { min-width: 15em; }
}
.prose thead th { background: rgba(255, 238, 214, 0.55); font-weight: 700; }
.prose tbody tr:last-child td { border-bottom: 0; }

.prose .footnotes { font-size: 15px; color: var(--p-ink-soft); }
.prose .footnotes-sep { margin: 2.4em 0 1.2em; }
.prose .footnote-ref a { text-decoration: none; font-size: 0.8em; }
/* A raised footnote mark never pushes its line down. */
.prose sup, .prose sub { line-height: 0; }

/* The tone bar is drawn inside the rounded box (a thick border-left bent
   round the corners and thinned into the 1px border). */
.prose .callout { --tone: var(--p-note); position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--tone) 34%, transparent); background: color-mix(in srgb, var(--tone) 7%, var(--p-surface)); border-radius: 14px; padding: 14px 18px 2px 22px; }
.prose .callout::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tone); }
.prose .callout-title { margin: 0 0 6px; font-weight: 700; color: var(--tone); font-size: 15.5px; }
.prose .callout p { margin-bottom: 0.9em; }
.prose .callout-tip { --tone: var(--p-tip); }
.prose .callout-important { --tone: var(--p-important); }
.prose .callout-warning { --tone: var(--p-warning); }
.prose .callout-caution { --tone: var(--p-caution); }
/* "In short": the summary box at the top of a post. */
.prose .callout-tldr { --tone: var(--p-eyebrow); border-color: rgba(241, 201, 118, 0.7); background: #fffaf0; border-radius: 16px; padding: 16px 22px 4px 26px; font-size: 17.5px; line-height: 1.65; }
.prose .callout-tldr .callout-title { text-transform: uppercase; letter-spacing: 0.08em; font-size: 12.5px; }
.prose .callout-tldr .callout-title:lang(ja), .prose .callout-tldr .callout-title:lang(ko), .prose .callout-tldr .callout-title:lang(zh) { text-transform: none; letter-spacing: 0.02em; font-size: 14px; }

/* App links inside a post: the landing's cream card with a coral button. */
.prose .cta { background: #fffaf0; border: 1px solid rgba(241, 201, 118, 0.7); border-radius: 20px; padding: 22px 24px; text-align: center; }
.prose .cta p { margin: 0 0 10px; }
.prose .cta p:last-child { margin-bottom: 0; }
.prose .cta-title { font-family: var(--font-display); font-size: 26px; line-height: 1.2; color: var(--p-ink); }
.prose .cta-title:lang(ja), .prose .cta-title:lang(ko), .prose .cta-title:lang(zh) { font-size: 22px; }
.prose .cta-body { color: var(--p-ink-soft); font-size: 16px; line-height: 1.6; }
.prose .cta-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.prose .store-badge { display: inline-block; line-height: 0; }
.prose .store-badge img { height: 44px; width: auto; border-radius: 0; margin: 0; }
.prose .button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--p-accent); color: var(--p-ink); font-weight: 700; text-decoration: none; }
.prose .button:hover { background: #ff7f6d; color: var(--p-ink); }

.prose .yt { position: relative; }
.prose .yt-link { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.prose .yt-link img, .prose .yt iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; border-radius: 0; }
.prose .yt iframe { aspect-ratio: 16 / 9; border-radius: 16px; }
.prose .yt-play { position: absolute; left: 50%; top: 50%; width: 72px; height: 50px; transform: translate(-50%, -50%); background: rgba(23, 23, 23, 0.82); border-radius: 14px; transition: background-color 120ms ease; }
.prose .yt-play::after { content: ""; position: absolute; left: 29px; top: 15px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.prose .yt-link:hover .yt-play { background: #ff0033; }
.prose .yt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prose .embed-error { color: var(--p-caution); font-weight: 600; }

/* Pygments (classprefix "tok-") */
.prose [class^="tok-k"] { color: var(--p-tok-keyword); }
.prose [class^="tok-s"] { color: var(--p-tok-string); }
.prose [class^="tok-c"] { color: var(--p-tok-comment); font-style: italic; }
.prose [class^="tok-m"] { color: var(--p-tok-number); }
.prose .tok-nf, .prose .tok-fm, .prose .tok-na, .prose .tok-nt { color: var(--p-tok-name); }
.prose .tok-nc, .prose .tok-kt, .prose .tok-nb, .prose .tok-bp { color: var(--p-tok-type); }
.prose .tok-gi { color: var(--p-tok-string); }
.prose .tok-gd { color: var(--p-caution); }
.prose .tok-err { color: inherit; border: 0; }

@media (max-width: 520px) {
  .prose { font-size: 17px; }
  .prose h2 { font-size: 27px; }
}