/* antitheft blog. Builds on the site's own design system (/system.css: tokens, .nav, .glass, .card, .pill, .btn,
   .chip, .ui-pic), so the blog and antitheft.pro read as one site. Only blog rules live here; colours come from the
   system tokens, never new ones. */

:root {
  --wrap: 1480px;                /* the blog's container: the bar and every page line up on it */
  --bar-top: 12px;                /* the floating bar's gap from the top of the window */
  --bar-h: 56px;
  --bar-clear: calc(var(--bar-top) + var(--bar-h) + 20px);   /* what sticky things and anchors keep clear of */

  /* glass material, the Apple way: ONE flat translucent tint + a strong blur that also lifts the colour behind it,
     a hairline edge you barely see, and a soft, wide shadow. No gradient fill, no bevel line, no inner glow, no rim
     highlight: those fake volume and read as 2016 CSS. Buttons on glass have no borders; only the active one is filled. */
  --gl-blur: 30px;
  --gl-sat: 180%;
  --gl-fill: light-dark(rgba(255, 255, 255, 0.62), rgba(28, 28, 32, 0.56));
  --gl-card: light-dark(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.04));
  --gl-card-hover: light-dark(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.07));
  --gl-edge: light-dark(rgba(16, 24, 44, 0.07), rgba(255, 255, 255, 0.07));
  --gl-drop: light-dark(rgba(24, 40, 84, 0.10), rgba(0, 0, 0, 0.40));
  --gl-hover: light-dark(rgba(16, 24, 44, 0.05), rgba(255, 255, 255, 0.07));
  --gl-active: light-dark(rgba(16, 24, 44, 0.08), rgba(255, 255, 255, 0.12));

  /* ambient light behind the glass: on a flat black page glass has nothing to bend and reads as a grey box */
  --amb-1: light-dark(rgba(42, 99, 207, 0.16), rgba(42, 99, 207, 0.24));
  --amb-2: light-dark(rgba(42, 99, 207, 0.07), rgba(127, 164, 232, 0.09));
  --amb-3: light-dark(rgba(42, 99, 207, 0.10), rgba(42, 99, 207, 0.12));
}

body::before {
  background:
    radial-gradient(900px 700px at 8% -10%, var(--amb-1) 0%, transparent 62%),
    radial-gradient(760px 620px at 96% 18%, var(--amb-2) 0%, transparent 60%),
    radial-gradient(1000px 760px at 50% 112%, var(--amb-3) 0%, transparent 62%),
    var(--canvas);
}

.glass {
  background: var(--gl-fill);
  border: 1px solid var(--gl-edge);
  -webkit-backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat));
  backdrop-filter: blur(var(--gl-blur)) saturate(var(--gl-sat));
  box-shadow: 0 10px 40px -12px var(--gl-drop);
}
/* the bar and the theme switch use the liquid glass from /system.css (.glass.lg) and /liquid-glass.js */
/* panels in the page (cards, CTA) sit on the page, not over it: the same material, clearer, no float shadow */
.card.glass, .cta.glass { background: var(--gl-card); box-shadow: none; transition: background-color 0.2s ease; }
.card::before { display: none; }   /* system.css's top-lit hover sheen: the same fake-volume trick */
a.card.glass:hover { background: var(--gl-card-hover); box-shadow: none; }
@media (prefers-reduced-transparency: reduce) {
  .glass { background: var(--glass-solid); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

.blog { padding: clamp(28px, 4vw, 64px) var(--gutter) clamp(56px, 7vw, 120px); max-width: var(--wrap); margin-inline: auto; }

/* ---- the bar: floats inside the container instead of spanning the window ---- */
.nav {
  position: sticky; top: var(--bar-top); z-index: 40;
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter));
  height: var(--bar-h); margin: var(--bar-top) auto 0;
  padding-inline: 20px 10px;
  border-radius: 18px;
}
.nav .wordmark-name { font-size: 17px; letter-spacing: -0.02em; }
/* buttons on the bar: no outline, a tint on hover, the current one filled, install a solid accent capsule */
.nav .pill { height: 34px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: transparent; font-size: 12px; }
.nav .pill:hover { background: var(--gl-hover); }
.nav .pill.is-here { color: var(--ink); background: var(--gl-active); }
.nav .pill--accent { color: #fff; background: var(--accent); }
.nav .pill--accent .ui-pic { color: #fff; }
.nav .pill--accent:hover { background: var(--accent); filter: brightness(1.1); }
.nav-sep { display: none; }

/* ---- the theme switch, as on the antitheft page (next.css), in the same glass ---- */
.theme-fab {
  position: fixed; z-index: 45; right: 26px; bottom: 22px;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center;
  width: 72px; height: 38px; padding: 3px;
  border-radius: 999px;
  color: var(--muted);
}
.theme-fab::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 32px; height: 30px; border-radius: 999px;
  background: var(--gl-active);
  transition: transform 0.3s var(--ease);
}
.theme-fab .ui-pic { position: relative; font-size: 17px; transition: color 0.2s ease; }
.theme-fab:hover { color: var(--ink); }
.theme-fab::before { transform: translateX(32px); }
.theme-fab .fab-moon { color: var(--ink); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-fab::before { transform: none; }
  :root:not([data-theme="dark"]) .theme-fab .fab-sun { color: var(--ink); }
  :root:not([data-theme="dark"]) .theme-fab .fab-moon { color: inherit; }
}
:root[data-theme="light"] .theme-fab::before { transform: none; }
:root[data-theme="light"] .theme-fab .fab-sun { color: var(--ink); }
:root[data-theme="light"] .theme-fab .fab-moon { color: inherit; }
:root[data-theme="dark"] .theme-fab::before { transform: translateX(32px); }
:root[data-theme="dark"] .theme-fab .fab-moon { color: var(--ink); }
:root[data-theme="dark"] .theme-fab .fab-sun { color: inherit; }
@media (hover: none) { .theme-fab { right: 14px; bottom: 14px; } }

/* ---- index head, topic chips ---- */
.blog-head { display: flex; flex-direction: column; gap: 16px; max-width: 760px; margin-bottom: clamp(24px, 3vw, 40px); }
.blog-head .lede { max-width: 62ch; }
.kicker, .crumbs { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.kicker { color: var(--accent-2); text-transform: lowercase; }
.kicker .ui-pic { font-size: 15px; }
.crumbs a { transition: color 0.15s ease; }
.crumbs a:hover { color: var(--accent-2); }
.crumbs span[aria-hidden] { opacity: 0.5; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.chip-link {
  display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
  border-radius: 999px;
  background: var(--gl-card);
  font-size: 13.5px; color: var(--muted);
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.chip-link .ui-pic { font-size: 15px; }
.chip-link:hover { color: var(--ink); background: var(--gl-active); }
.chip-link:active { transform: scale(0.97); }
.chip-link.is-here { color: var(--ink); background: color-mix(in srgb, var(--accent) 22%, transparent); }

/* ---- ```articles: compact preview cards linking to the full guides (cover thumb left, text right) ---- */
.minis { display: flex; flex-direction: column; gap: 10px; margin: 1.6em 0; }
.prose .minis > * + * { margin-top: 0; }
.minis-h { font-size: 17px; font-weight: 650; margin-bottom: 4px !important; }
.prose .mini { display: grid; grid-template-columns: 176px minmax(0, 1fr); align-items: center; gap: 18px; padding: 10px; border-radius: 16px; border: 1px solid var(--gl-edge); background: var(--gl-card); color: var(--ink); text-decoration: none; transition: background-color 0.2s ease, transform 0.2s var(--ease); }
.prose .mini:hover { background: var(--gl-card-hover); transform: translateY(-1px); }
.mini-art { display: grid; place-items: center; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.prose .mini-art img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border: 0; border-radius: 0; max-width: none; }
.mini-art--icon .ui-pic { font-size: 34px; color: var(--accent-2); }
.mini-copy { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 8px; }
.mini-cat { font: 600 10.5px/1.2 var(--font-mono); letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent-2); }
.mini-draft { font-style: normal; margin-left: 6px; padding: 1px 6px; border-radius: 6px; color: var(--ink); background: color-mix(in srgb, var(--warning) 30%, transparent); }
.mini-copy strong { font-size: 16.5px; font-weight: 650; line-height: 1.3; }
.mini-hook { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.mini-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--accent-2); }
.mini-go .ui-pic { font-size: 14px; transition: transform 0.2s var(--ease); }
.prose .mini:hover .mini-go .ui-pic { transform: translateX(3px); }
.mini.is-missing { display: block; padding: 14px 16px; border-style: dashed; border-color: color-mix(in srgb, var(--warning) 60%, transparent); }
.mini.is-missing span { display: block; font-size: 13.5px; color: var(--muted); }
@media (max-width: 560px) { .prose .mini { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; } .mini-hook { display: none; } }

/* ---- theme-matched covers: the dark render in dark mode, the light render in light mode (OS setting or the pinned
   theme switch, the same selectors system.css uses). Both are lazy, so only the shown one is downloaded. ---- */
.th-light { display: none !important; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .th-light { display: block !important; }
  :root:not([data-theme="dark"]) .th-dark { display: none !important; }
}
:root[data-theme="light"] .th-light { display: block !important; }
:root[data-theme="light"] .th-dark { display: none !important; }

/* ---- cards ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(16px, 1.6vw, 24px); }
.featured { margin-bottom: clamp(16px, 1.6vw, 24px); }
.bcard { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-card); }
.bcard-art { aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.bcard-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.bcard:hover .bcard-art img { transform: scale(1.03); }
/* no hero yet: the topic's pictogram over the accent bloom, so a card is never an empty box */
.bcard-art--icon {
  background:
    radial-gradient(120% 90% at 15% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 60%);
}
.bcard-art--icon .ui-pic { font-size: clamp(44px, 4vw, 64px); color: color-mix(in srgb, var(--accent-2) 80%, transparent); }
.bcard-copy { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.bcard-cat { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-2); }
.bcard-title { font-size: 20px; font-weight: 700; line-height: 1.22; letter-spacing: -0.02em; text-wrap: balance; }
.bcard-desc { font-size: 15px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.bcard-meta { margin-top: auto; padding-top: 6px; font-size: 11.5px; color: var(--muted); }
.bcard--big { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.bcard--big .bcard-art { aspect-ratio: auto; min-height: 320px; border-bottom: 0; border-right: 1px solid var(--line); }
.bcard--big .bcard-copy { justify-content: center; padding: clamp(24px, 3vw, 48px); gap: 14px; }
.bcard--big .bcard-title { font-size: clamp(24px, 2.4vw, 36px); line-height: 1.1; letter-spacing: -0.03em; }
.bcard--big .bcard-desc { font-size: 16.5px; }
.bcard--big .bcard-meta { margin-top: 8px; }
.bcard--big .bcard-art--icon .ui-pic { font-size: clamp(64px, 7vw, 112px); }

.more { display: flex; justify-content: center; margin-top: 40px; }
.more .btn[aria-busy="true"] { opacity: .6; pointer-events: none; }
.more + .pager { margin-top: 16px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 40px; font-size: 12px; color: var(--muted); }
.empty { padding: 48px 0; font-size: 17px; color: var(--muted); }
.empty a { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

/* ---- article ---- */
.post { max-width: var(--wrap); }
.article-head { display: flex; flex-direction: column; gap: 16px; max-width: 920px; margin: 0 auto clamp(24px, 3vw, 40px); }
.article-title { font-size: clamp(32px, 3.6vw, 54px); font-weight: 700; line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; }
.article-meta { font-size: 12px; color: var(--muted); }
.article-hero { max-width: 1200px; margin: 0 auto clamp(28px, 3.5vw, 48px); border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); }
.article-hero img { display: block; width: 100%; height: auto; }

.article-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 820px; margin-inline: auto; }

/* reading progress: a thin bar on narrow screens, a rail beside the text on wide ones. Flat: a hairline that fills with
   the accent as you read, one dot per section (filled once passed, ringed while you are in it). Set from blog.js. */
.read-bar { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.read-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.toc { display: none; }
@media (min-width: 1180px) {
  .read-bar { display: none; }
  .article-grid { grid-template-columns: 210px minmax(0, 800px); max-width: none; justify-content: center; gap: 56px; }
  .article-grid:not(:has(.toc)) { grid-template-columns: minmax(0, 820px); }
  .toc { display: block; position: sticky; top: var(--bar-clear); align-self: start; max-height: calc(100dvh - var(--bar-clear) - 24px); overflow: auto; scrollbar-width: none; }
  .toc::-webkit-scrollbar { display: none; }
}
/* the head: a progress ring with the percentage, and the time left. The list: every section is its own progress bar
   (story-style), its number turns into a check once you have read it, the one you are in is lit. */
.toc-head { display: flex; align-items: center; gap: 14px; padding: 0 0 20px 0; }
.toc-ringbox { position: relative; flex: none; width: 52px; height: 52px; }
.toc-ring { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.toc-ring circle { fill: none; stroke-width: 4; }
.toc-ring-t { stroke: var(--line); }
.toc-ring-f { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: calc(150.8 * (1 - var(--p, 0))); }
.toc-pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.toc-meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.toc-left { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.toc-sec { font-size: 11.5px; color: var(--muted); text-transform: lowercase; }
.toc-list { list-style: none; margin: 0; padding: 0; counter-reset: toc; display: flex; flex-direction: column; gap: 4px; }
.toc-list li { counter-increment: toc; }
.toc-list a { display: flex; align-items: flex-start; gap: 12px; padding: 9px 10px 9px 6px; margin-left: -6px; border-radius: var(--r-ctl); font-size: 14px; line-height: 1.35; color: var(--muted); transition: color 0.2s ease, background 0.2s ease; }
.toc-list a:hover { color: var(--ink); background: var(--btn-fill); }
.toc-n { flex: none; position: relative; width: 20px; height: 20px; margin-top: -1px; display: grid; place-items: center; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); }
.toc-n::before { content: counter(toc, decimal-leading-zero); }
.toc-b { flex: 1; min-width: 0; display: block; }
.toc-bar { display: block; height: 3px; margin-top: 8px; border-radius: 2px; background: var(--line); overflow: hidden; transition: height 0.2s ease; }
.toc-bar b { display: block; height: 100%; background: var(--accent); transform: scaleX(var(--s, 0)); transform-origin: left; }
.toc-list li.is-done a { color: color-mix(in srgb, var(--ink) 72%, var(--muted)); }
.toc-list li.is-done .toc-n::before { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); transform: rotate(-45deg); }
.toc-list li.is-done .toc-bar b { background: var(--good); }
.toc-list li.is-here a { color: var(--ink); font-weight: 600; background: color-mix(in srgb, var(--accent) 9%, transparent); }
.toc-list li.is-here .toc-n { color: var(--accent-2); font-weight: 700; }
.toc-list li.is-here .toc-bar { height: 4px; margin-top: 7px; }
.toc.is-finished .toc-ring-f { stroke: var(--good); }
@media (prefers-reduced-motion: reduce) { .toc-list a, .toc-bar { transition: none; } }

/* ---- prose: long reading, so larger and calmer than the landing page ---- */
.prose { font-size: 18px; line-height: 1.72; min-width: 0; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(25px, 2.2vw, 31px); line-height: 1.18; letter-spacing: -0.025em; scroll-margin-top: var(--bar-clear); text-wrap: balance; }
.prose h3 { margin-top: 1.8em; font-size: 21px; line-height: 1.3; letter-spacing: -0.015em; scroll-margin-top: var(--bar-clear); }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose p, .prose li { text-wrap: pretty; }
.prose a { color: var(--accent-2); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color 0.15s ease; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong { font-weight: 650; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--accent-2); }
/* numbered lists are the step-by-step how-tos: a numbered badge per step */
.prose ol { list-style: none; padding-left: 0; counter-reset: step; }
.prose ol > li { position: relative; padding-left: 46px; counter-increment: step; }
.prose ol > li + li { margin-top: 0.8em; }
.prose ol > li::before {
  content: counter(step); position: absolute; left: 0; top: 0.1em;
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px;
  font: 600 13px/1 var(--font-mono); color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
/* GFM task lists: a checklist */
.prose li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.4em; }
.prose input[type="checkbox"] { accent-color: var(--accent); width: 17px; height: 17px; margin: 0 10px 0 0; vertical-align: -3px; }
.prose code { font-family: var(--font-mono); font-size: 0.86em; padding: 0.12em 0.4em; border-radius: 6px; background: var(--hover-tint); border: 1px solid var(--line); overflow-wrap: anywhere; }
.prose pre { padding: 18px 20px; border-radius: var(--r-ctl); background: light-dark(#10182c, #050507); color: #e8ecf5; overflow-x: auto; font-size: 14px; line-height: 1.6; border: 1px solid var(--line); }
.prose pre code { padding: 0; border: 0; background: none; font-size: inherit; color: inherit; overflow-wrap: normal; }
.prose blockquote { margin-inline: 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--accent); color: var(--muted); font-size: 19px; }
.prose img { display: block; max-width: 100%; height: auto; margin-inline: auto; border-radius: var(--r-ctl); border: 1px solid var(--line); }
.prose hr { border: 0; height: 1px; background: var(--line); margin-block: 2.4em; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-ctl); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.prose th, .prose td { padding: 11px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.prose thead th { border-top: 0; font-weight: 650; background: var(--hover-tint); }

/* ---- callouts: > [!QUICK] [!TIP] [!NOTE] [!WARNING] [!POWER] ---- */
.callout { --c: var(--accent); margin-block: 1.6em; padding: 18px 22px; border-radius: var(--r-card); border: 1px solid color-mix(in srgb, var(--c) 30%, var(--line)); background: color-mix(in srgb, var(--c) 7%, transparent); }
.callout-k { display: block; font: 600 11.5px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--c) 75%, var(--ink)); }
.callout-t { margin-top: 8px; font-size: 18px; font-weight: 650; line-height: 1.4; }
.callout-body { margin-top: 8px; font-size: 17px; line-height: 1.65; }
.callout-body > * + * { margin-top: 0.8em; }
.callout-body:empty { display: none; }
/* the short version: a standard neutral box, no colour tint, just a header over the answer */
.callout--quick { --c: var(--muted); padding: 20px 26px 22px; background: var(--btn-fill); border-color: var(--line); }
.callout--quick .callout-k { padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 12px; letter-spacing: 0.05em; color: var(--ink); }
.callout--quick .callout-body { margin-top: 14px; font-size: 18px; }
.callout--tip { --c: var(--good); }
.callout--warning { --c: var(--warning); }
.callout--note { --c: var(--muted); }
/* the power-user box: collapsed by default, so a beginner reads past it and a power user opens it */
.callout--power { --c: var(--accent-2); padding: 0; background: var(--btn-fill); border-color: var(--line); }
.callout--power summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; padding: 16px 48px 16px 22px; cursor: pointer; list-style: none; position: relative; }
.callout--power summary::-webkit-details-marker { display: none; }
.callout--power summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: var(--muted); -webkit-mask: url(/img/pict/chevron-down.svg) center / contain no-repeat; mask: url(/img/pict/chevron-down.svg) center / contain no-repeat;
  transition: transform 0.25s var(--ease);
}
.callout--power[open] summary::after { transform: rotate(180deg); }
.callout--power .callout-t { margin: 0; font-size: 16.5px; }
.callout--power .callout-body { padding: 0 22px 20px; margin: 0; font-size: 16px; }

/* ---- CTA box ([cta] in the body, and the one closing the article) ---- */
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; margin-block: 2em; padding: clamp(22px, 2.6vw, 32px); border-radius: var(--r-card); position: relative; overflow: hidden; }
/* solid brand blue with white type and a white button, the same as the versus block's CTA */
.cta.glass { background: var(--accent); border: 0; color: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--accent) 80%, #000); }
.cta > * { position: relative; }
.cta-copy { display: flex; flex-direction: column; gap: 8px; }
.cta-k { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.82); }
.cta-k .ui-pic { font-size: 16px; }
.prose .cta-title, .cta-title { margin: 0; font-size: clamp(21px, 1.9vw, 25px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; color: #fff; }
.prose .cta-text, .cta-text { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, 0.85); max-width: 54ch; }
.cta-actions { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.prose .cta-actions a { text-decoration: none; }
.prose .cta .btn { justify-content: center; height: 50px; background: #fff; color: var(--accent); font-weight: 700; }
.prose .cta .btn:hover { filter: none; transform: translateY(-1px); }
.cta-second, .prose .cta-second { text-align: center; font-size: 13.5px; color: rgba(255, 255, 255, 0.82); transition: color 0.15s ease; }
.cta-second:hover, .prose .cta-second:hover { color: #fff; }
@media (max-width: 720px) { .cta { grid-template-columns: minmax(0, 1fr); } .cta-actions { align-items: stretch; } }

/* ---- visuals: ```chart, ```flow, ```svg (package viz) ----
   Palette validated with the dataviz checks (lightness band, chroma, colour-blind separation, contrast) against the
   page canvas in both modes: slot 1 is the brand accent, 2 and 3 only appear with 2+ series. A single series is the
   accent alone; "highlight" turns the rest gray. Status colours (--critical, --good) only where they mean harm or
   stopped, always with an icon and a word. Light-mode slots 2-3 sit under 3:1, so every plot also has direct labels
   and a table. */
:root {
  --viz-1: #2a63cf;
  --viz-2: light-dark(#eb6834, #d95926);
  --viz-3: light-dark(#1baf7a, #199e70);
  --viz-muted: light-dark(#bcc3d0, #3b3c44);
  --viz-grid: light-dark(rgba(16, 24, 44, 0.08), rgba(255, 255, 255, 0.08));
}
.viz { margin: 2em 0; padding: clamp(18px, 2.4vw, 26px); border-radius: var(--r-card); background: var(--gl-card); border: 1px solid var(--gl-edge); }
.prose .viz > * + * { margin-top: 0; }
.viz-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; }
.viz-title { font-size: 17px; font-weight: 650; line-height: 1.35; letter-spacing: -0.01em; }
.viz-sub { font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.viz-source { margin-top: 16px !important; font: 11.5px/1.4 var(--font-mono); color: var(--muted); }
.viz-table { margin-top: 10px !important; font-size: 13px; }
.viz-table summary { cursor: pointer; font: 11.5px var(--font-mono); color: var(--muted); width: max-content; }
.viz-table summary:hover { color: var(--ink); }
.viz-table .table-wrap { margin-top: 10px; }
.prose .viz-table table { font-size: 13.5px; }
.prose .viz-table td:not(:first-child), .prose .viz-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.viz-error { margin: 1.6em 0; padding: 14px 18px; border-radius: var(--r-ctl); font: 13px/1.5 var(--font-mono); color: var(--ink); background: color-mix(in srgb, var(--critical) 12%, transparent); border: 1px solid color-mix(in srgb, var(--critical) 40%, transparent); }

/* bar: label | bar + value; one row per item, 14px bars with a 4px rounded end */
.vbar { display: flex; flex-direction: column; gap: 10px; }
.vbar-row { display: grid; grid-template-columns: minmax(90px, 32%) minmax(0, 1fr); align-items: center; gap: 14px; }
.vbar-label { font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.vbar-track { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vbar-fill { flex: 0 0 auto; width: calc(var(--w) * 0.82); min-width: 2px; height: 14px; border-radius: 0 4px 4px 0; background: var(--viz-1); }
.vbar-val { font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--ink); }
.vbar-row.is-lo .vbar-fill { background: var(--viz-muted); }
.vbar-row.is-lo .vbar-val, .vbar-row.is-lo .vbar-label { color: var(--muted); }
@media (max-width: 560px) { .vbar-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }

/* shared plot: gridlines with ticks on the left, x labels below */
.vplot { position: relative; height: 220px; margin-left: 52px; }
.vgrid { position: absolute; inset: 0; pointer-events: none; }
.vgrid-line { position: absolute; left: 0; right: 0; bottom: var(--y); height: 1px; background: var(--viz-grid); }
.vgrid-line em { position: absolute; right: calc(100% + 10px); top: -8px; font: normal 11px/1 var(--font-mono); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.vx { position: relative; display: flex; justify-content: space-around; margin: 10px 0 0 52px; font: 11.5px/1.3 var(--font-mono); color: var(--muted); text-align: center; }

/* column: 24px max, rounded cap, value on the cap */
.vcol-bars { position: absolute; inset: 0; display: flex; justify-content: space-around; align-items: flex-end; }
.vcol-c { flex: 1; display: flex; justify-content: center; align-items: flex-end; height: 100%; }
.vcol-bar { position: relative; width: min(24px, 60%); height: var(--h); min-height: 2px; border-radius: 4px 4px 0 0; background: var(--viz-1); }
.vcol-bar em { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); font: normal 600 12px/1 var(--font-display); color: var(--ink); white-space: nowrap; }
.vcol-c.is-lo .vcol-bar { background: var(--viz-muted); }
.vcol-c.is-lo .vcol-bar em { color: var(--muted); font-weight: 500; }
.vcol + .viz-source { margin-top: 12px !important; }

/* line: 2px strokes that stay 2px however the plot stretches, a 10% wash under a single series, round HTML points */
.vline .vx { display: block; height: 16px; }
.vline .vx span { position: absolute; left: var(--x); transform: translateX(-50%); white-space: nowrap; }
.vline .vx span:first-child { transform: none; }
.vline .vx span:last-child { transform: translateX(-100%); }
.vline-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vline-path { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.vline-area { fill: var(--viz-1); opacity: 0.1; stroke: none; }
.vpt { position: absolute; left: var(--x); top: var(--y); width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; }
.vpt::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--canvas); opacity: 0; transition: opacity 0.15s ease; }
.vpt:hover::after, .vpt.is-end::after { opacity: 1; inset: 8px; }
.vpt em { position: absolute; left: calc(100% - 4px); top: 50%; transform: translateY(-50%); font: normal 600 12.5px/1 var(--font-display); color: var(--ink); white-space: nowrap; }
.vlegend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -6px 0 16px !important; padding: 0 !important; list-style: none !important; font-size: 13.5px; color: var(--ink); }
.prose .vlegend li { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
.vkey { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.vkey--line { width: 16px; height: 2px; border-radius: 1px; }

/* donut: 22px ring, a surface gap between parts, legend with the shares */
.vdonut { display: flex; align-items: center; gap: clamp(20px, 4vw, 44px); flex-wrap: wrap; }
.vdonut-svg { width: 170px; height: 170px; flex-shrink: 0; }
.vdonut-svg circle { fill: none; stroke: var(--c); stroke-width: 22; }
.prose .vdonut-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 180px; flex: 1; }
.prose .vdonut-legend li { margin: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 15px; }
.vdonut-v { font-weight: 650; }

/* stat tiles: the number is the chart */
.vstat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.vstat-tile { display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 4px 0; }
.vstat--1 .vstat-v { font-size: clamp(44px, 6vw, 64px); }
.vstat-v { font-size: clamp(30px, 3.4vw, 40px); font-weight: 650; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.vstat-l { font-size: 15px; line-height: 1.4; color: var(--ink); }
.vstat-n { font-size: 13px; line-height: 1.4; color: var(--muted); }
.viz--stat:not(:has(.viz-head)) { padding-block: 22px; }

/* flow: numbered steps joined by arrows; harm in the critical colour, the stop in the good colour, each with icon + word */
.prose .flow { list-style: none; margin: 0; padding: 0; counter-reset: none; display: grid; gap: 12px; }
.prose .flow > li { margin: 0; padding: 0; }
.prose .flow > li::before { content: none; }
/* always top to bottom: a numbered badge per step, a line joining the badges, the step's drawn screen under its text */
.prose .flow { gap: 0; }
.flow-step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding-bottom: 26px !important; }
.flow-step:last-child { padding-bottom: 0 !important; }
.flow-step:not(:last-child)::after { content: ""; position: absolute; left: 15.5px; top: 38px; bottom: 6px; width: 1px; background: var(--viz-grid); }
.flow-n { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; font: 600 13px/1 var(--font-mono); color: var(--accent-2); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.flow-n .ui-pic { font-size: 16px; }
.flow-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 5px; }
.flow-k { font: 600 10.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.flow-t { font-size: 16px; font-weight: 600; line-height: 1.4; }
.flow-note { font-size: 14px; line-height: 1.5; color: var(--muted); }
.flow-step--bad .flow-n { color: var(--critical); background: color-mix(in srgb, var(--critical) 14%, transparent); }
.flow-step--bad .flow-k { color: color-mix(in srgb, var(--critical) 75%, var(--ink)); }
.flow-step--block .flow-n, .flow-step--safe .flow-n { color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.flow-step--block .flow-k, .flow-step--safe .flow-k { color: color-mix(in srgb, var(--good) 70%, var(--ink)); }
.flow-screen { display: block; margin-top: 10px; }

/* drawn screens: a "screenshot" made of markup, the giveaway ringed and numbered. Every interface is a generic one
   (a video site, a search page, a chat app, a code host, an installer, a system prompt) built from the shapes people
   know, never a copy of a real product. Only the Run box and the fake human check keep the real look (the attack
   uses them). Dark mode: lighter surfaces and a visible edge, so window, bar, fields and keycaps read as layers. */
.mock {
  --mk-bg: light-dark(#ffffff, #26262e); --mk-bar: light-dark(#eef1f6, #32323b); --mk-field: light-dark(#f2f4f8, #34343e);
  --mk-edge: light-dark(rgba(16, 24, 44, 0.1), rgba(255, 255, 255, 0.14)); --mk-soft: light-dark(rgba(16, 24, 44, 0.06), rgba(255, 255, 255, 0.07));
  max-width: 520px; border-radius: 12px; overflow: hidden; background: var(--mk-bg); border: 1px solid var(--mk-edge);
  box-shadow: 0 14px 34px -20px var(--gl-drop), 0 0 0 1px light-dark(transparent, rgba(0, 0, 0, 0.4)); font-size: 14px; line-height: 1.45; color: var(--ink);
}
.mock em, .mock b { font-style: normal; }
.mock b { font-weight: 650; }
.mock .ui-pic { flex-shrink: 0; }
.mk-bar, .mk-title { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px; background: var(--mk-bar); border-bottom: 1px solid var(--mk-edge); }
/* title bar: [controls left] [title] [controls right]; where the title sits depends on the platform */
.mk-title { display: grid; grid-template-columns: 1fr auto 1fr; font-size: 12.5px; font-weight: 600; }
.mk-tt { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-cl { justify-self: start; display: inline-flex; }
.mk-cr { justify-self: end; display: inline-flex; }

/* ---- platforms: each screen is drawn as it looks on data-plat (windows | mac | linux); blog.js switches the ones
   that follow the reader's system. Only that platform's controls, prompt and labels are shown. ---- */
.mock .c-win, .mock .c-mac, .mock .c-lin { display: none; }
.mock[data-plat="windows"] .c-win, .mock[data-plat="mac"] .c-mac, .mock[data-plat="linux"] .c-lin { display: inline-flex; align-items: center; }
/* window controls: Windows minimise / maximise / close on the right, macOS three lights on the left, Linux one round close */
.mk-wctl { gap: 16px; color: var(--muted); font-size: 13px; }
.mk-wctl .ui-pic:nth-child(2) { font-size: 11px; }
.mk-lights { gap: 7px; }
.mk-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.mk-lights i:nth-child(2) { background: #febc2e; }
.mk-lights i:nth-child(3) { background: #28c840; }
.mk-lclose { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--muted) 22%, transparent); color: var(--ink); font-size: 12px; }
/* Windows: title on the left, square-ish window, the bar one with the window, footer buttons on a grey band, default first */
.mock[data-plat="windows"] { border-radius: 8px; font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif; }
.mock[data-plat="windows"] .mk-title { grid-template-columns: 0 1fr auto; gap: 0; min-height: 34px; background: var(--mk-bg); font-weight: 400; }
.mock[data-plat="windows"] .mk-tt { justify-self: start; }
.mock[data-plat="windows"] .mk-fbtn { border-radius: 4px; }
/* macOS: lights left, title centred, default button rightmost, no footer band */
.mock[data-plat="mac"] { border-radius: 12px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif; }
.mock[data-plat="mac"] .mk-title { min-height: 32px; }
.mock[data-plat="mac"] .mk-foot, .mock[data-plat="linux"] .mk-foot { flex-direction: row-reverse; justify-content: flex-start; border-top: 0; background: none; padding-top: 2px; }
.mock[data-plat="mac"] .mk-fbtn { border-radius: 6px; min-width: 70px; }
/* Linux (GNOME-style): one header bar with the title centred and a round close, roomier, rounded buttons */
.mock[data-plat="linux"] { border-radius: 14px; font-family: Cantarell, Ubuntu, "Noto Sans", "DejaVu Sans", system-ui, sans-serif; }
.mock[data-plat="linux"] .mk-title { min-height: 42px; background: var(--mk-bg); }
.mock[data-plat="linux"] .mk-fbtn { border-radius: 8px; border-color: transparent; }
/* a web page keeps its own font whatever the system */
.mock--browser .mk-body { font-family: var(--font-display); }
.mock--terminal[data-plat="windows"] { --mk-bg: #0c0c0c; --mk-bar: #1f1f1f; }
.mock--terminal[data-plat="windows"] .mk-title { background: var(--mk-bar); color: #cccccc; }
.mock--terminal[data-plat="linux"] { --mk-bg: #1d1d20; --mk-bar: #2a2a2e; }
.mock--terminal[data-plat="linux"] .mk-title { background: var(--mk-bar); }
.mock--terminal .mk-wctl, .mock--terminal .mk-lclose { color: #c7cbd3; }
/* browser: back, forward, reload, the address, a menu */
.mk-navbtns { display: inline-flex; gap: 10px; color: var(--muted); font-size: 15px; }
.mk-url { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--mk-bg); font: 12.5px var(--font-mono); }
.mk-url > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-url .ui-pic { font-size: 12px; color: var(--muted); }
.mk-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; }
.mk-h { font-size: 18px; font-weight: 650; line-height: 1.3; letter-spacing: -0.01em; }
.mk-p { font-size: 14px; }
.mk-btn { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }
.mk-input { align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--mk-edge); background: var(--mk-field); font: 12.5px var(--font-mono); overflow-wrap: anywhere; }
.mk-input > span:first-child { flex: 1; min-width: 0; }
.mk-check { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; }
.mk-check > i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 13px; }
.prose .mk-code, .mk-code { align-self: stretch; display: block; padding: 8px 10px; border-radius: 8px; border: 0; background: var(--mk-field); font: 12.5px var(--font-mono); overflow-wrap: anywhere; }
.mk-link { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.mk-alert { align-self: stretch; display: flex; align-items: flex-start; gap: 8px; padding: 9px 11px; border-radius: 8px; font-size: 13px; background: color-mix(in srgb, var(--warning) 14%, transparent); }
.mk-alert .ui-pic { font-size: 15px; margin-top: 1px; color: var(--warning); }
/* a window's buttons: one row in its footer, right-aligned, the first one the default */
.mk-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--mk-soft); background: color-mix(in srgb, var(--mk-bar) 55%, var(--mk-bg)); }
.mk-fbtn { display: inline-flex; align-items: center; min-width: 76px; justify-content: center; padding: 6px 14px; border-radius: 8px; background: var(--mk-field); border: 1px solid var(--mk-edge); font-size: 13px; font-weight: 550; }
.mk-fbtn.is-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.mk-fbtn.is-ghost { margin-right: auto; background: none; border-color: transparent; color: var(--muted); }
/* a system prompt: its icon beside the message */
.mk-body--icon { flex-direction: row; gap: 14px; }
.mk-dicon { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 22px; }
.mk-dicon--warn { color: var(--warning); background: color-mix(in srgb, var(--warning) 15%, transparent); }
.mk-dicon--bad { color: var(--critical); background: color-mix(in srgb, var(--critical) 13%, transparent); }
.mk-dicon--info { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mk-dcol { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.mk-body--icon .mk-h { font-size: 16px; }
/* name / value rows: a publisher, a file origin */
.mk-fields { align-self: stretch; display: flex; flex-direction: column; border-radius: 10px; background: var(--mk-field); padding: 2px 12px; }
.mk-field { display: flex; gap: 12px; padding: 7px 0; font-size: 13px; }
.mk-field + .mk-field { border-top: 1px solid var(--mk-soft); }
.mk-field em { width: 92px; flex-shrink: 0; color: var(--muted); }
.mk-field > span { min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
.mk-field.is-bad { margin-inline: -8px; padding-inline: 8px; }
/* a file: downloaded, attached, or in a downloads list */
.mk-file { align-self: stretch; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--mk-field); }
.mk-ficon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; font-size: 20px; color: var(--accent-2); background: var(--mk-bg); border: 1px solid var(--mk-soft); }
.mk-fname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-fname b { font-size: 13.5px; overflow-wrap: anywhere; }
.mk-fname em { font-size: 12px; color: var(--muted); }
.mk-fact { flex-shrink: 0; padding: 5px 12px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 600; }
/* progress: what it says it is doing, and the bar */
.mk-prog { align-self: stretch; display: flex; flex-direction: column; gap: 7px; }
.mk-progt { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.mk-progt em { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.mk-bar2 { height: 6px; border-radius: 99px; background: var(--mk-field); overflow: hidden; }
.mk-bar2 i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.mk-prog.is-bad { padding: 6px 8px; margin: -6px -8px; }
/* app icons in a file window; with a target, the arrow of "drag this onto that" */
.mk-tiles { align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 16px 8px; border-radius: 10px; background: var(--mk-field); }
.mk-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 112px; text-align: center; font-size: 12.5px; }
.mk-appicon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; background: var(--accent); color: #fff; font-size: 24px; font-weight: 700; }
.mk-appicon.is-folder { background: color-mix(in srgb, var(--muted) 30%, var(--mk-bg)); color: var(--ink); font-size: 26px; }
.mk-drag { color: var(--muted); font-size: 22px; }
/* setup wizard: the product's tile on a side rail, the page beside it */
.mk-wiz { display: flex; }
.mk-wizside { flex-shrink: 0; width: 112px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 10px; background: color-mix(in srgb, var(--accent) 10%, var(--mk-bg)); border-right: 1px solid var(--mk-soft); text-align: center; }
.mk-wizside em { font-size: 11.5px; line-height: 1.35; color: var(--muted); }
.mk-wiz .mk-body { flex: 1; min-width: 0; padding: 20px 18px 22px; }
/* plain text editor: menu line, numbered lines */
.mk-tname { gap: 7px; }
.mk-tname .ui-pic { font-size: 14px; color: var(--muted); }
.mk-menu { display: flex; gap: 16px; padding: 5px 12px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--mk-soft); }
.mk-tbody { display: flex; flex-direction: column; padding: 10px 14px 14px 0; font: 12.5px/1.65 var(--font-mono); }
.mk-tline { display: flex; gap: 12px; min-height: 1.65em; }
.mk-tline em { width: 34px; flex-shrink: 0; text-align: right; color: color-mix(in srgb, var(--muted) 70%, transparent); user-select: none; }
.mk-tline > span { min-width: 0; overflow-wrap: anywhere; }
.mk-tline.is-h > span { font-weight: 700; }
.mock .mk-tline.is-bad { box-shadow: none; }
.mk-tline.is-bad > span { padding: 0 5px; margin-left: -5px; border-radius: 6px; box-shadow: 0 0 0 2px var(--critical); }
/* terminal: always dark, like the real thing */
.mock--terminal { --mk-bg: #0d0f14; --mk-bar: #1c2029; --mk-edge: rgba(255, 255, 255, 0.16); background: var(--mk-bg); color: #d6deeb; }
.mock--terminal .mk-title { color: #98a1b3; border-bottom-color: rgba(255, 255, 255, 0.07); }
.mock--terminal .mk-body { gap: 4px; font: 12.5px/1.6 var(--font-mono); }
.mk-line em { font-style: normal; color: #7fa4e8; margin-right: 8px; }
.mk-out { color: #98a1b3; }
.mk-line, .mk-out { overflow-wrap: anywhere; }
.mk-line.is-bad, .mk-out.is-bad { padding: 2px 6px; margin: -2px -6px; }

/* avatars: an initial in one of five tones from the system palette, picked from the name */
.mk-av { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; font-weight: 700; }
.mk-av--0 { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 20%, var(--mk-bg)); }
.mk-av--1 { color: color-mix(in srgb, var(--good) 75%, var(--ink)); background: color-mix(in srgb, var(--good) 20%, var(--mk-bg)); }
.mk-av--2 { color: color-mix(in srgb, var(--warning) 75%, var(--ink)); background: color-mix(in srgb, var(--warning) 22%, var(--mk-bg)); }
.mk-av--3 { color: color-mix(in srgb, var(--critical) 70%, var(--ink)); background: color-mix(in srgb, var(--critical) 16%, var(--mk-bg)); }
.mk-av--4 { color: var(--ink); background: color-mix(in srgb, var(--muted) 26%, var(--mk-bg)); }

/* chat app: who you talk to, the conversation, the message box */
.mk-chathead { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--mk-bar); border-bottom: 1px solid var(--mk-edge); }
.mk-chathead .mk-av { width: 36px; height: 36px; font-size: 15px; }
.mk-chatwho { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mk-chatname { display: inline-flex; align-items: center; align-self: flex-start; font-size: 14px; }
.mk-chatname.is-bad { padding: 1px 6px; margin: -1px -6px; }
.mk-chatwho > em { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-chaticons { display: inline-flex; gap: 14px; color: var(--muted); font-size: 17px; }
.mock--chat .mk-body { gap: 8px; padding: 16px 14px; }
.mk-msg { max-width: 86%; display: flex; align-items: flex-end; gap: 8px; }
.mk-msg .mk-av { width: 26px; height: 26px; font-size: 11.5px; }
.mk-bubble { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 16px 16px 16px 5px; background: var(--mk-field); overflow-wrap: anywhere; }
.mk-bubble > em { align-self: flex-end; font-size: 10.5px; color: var(--muted); }
.mk-msg.is-me { align-self: flex-end; }
.mk-msg.is-me .mk-bubble { border-radius: 16px 16px 5px 16px; background: var(--accent); color: #fff; }
.mk-msg.is-me .mk-bubble > em { color: rgba(255, 255, 255, 0.75); }
.mock .mk-msg.is-bad, .mock .mk-msg.is-good { box-shadow: none; }
.mk-msg.is-bad .mk-bubble { box-shadow: 0 0 0 2px var(--critical); }
.mk-cardlink { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.mk-cardprev { display: flex; flex-direction: column; margin-top: 6px; border-radius: 10px; overflow: hidden; background: var(--mk-bg); border: 1px solid var(--mk-soft); }
.mk-cardart { height: 64px; background:
  radial-gradient(70px 40px at 75% 100%, color-mix(in srgb, var(--warning) 70%, transparent), transparent),
  linear-gradient(160deg, transparent 55%, color-mix(in srgb, var(--critical) 55%, #000) 55.5%),
  #1a1418; }
.mk-cardtxt { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; font-size: 12.5px; }
.mk-cardtxt em { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.mk-cardtxt b { font-size: 13.5px; }
.mk-cardtxt span { color: var(--muted); }
.mk-compose { display: flex; align-items: center; gap: 10px; margin: 0 12px 12px; padding: 8px 12px; border-radius: 999px; background: var(--mk-field); color: var(--muted); font-size: 13px; }
.mk-compose span { flex: 1; }
.mk-compose .ui-pic { font-size: 16px; }
.mk-compose .ui-pic:last-child { color: var(--accent-2); }

/* web pages: a site's header, search, results, a video, comments, a game page, a code host */
.mk-nav { align-self: stretch; display: flex; align-items: center; gap: 9px; margin: -18px -18px 4px; padding: 11px 18px; border-bottom: 1px solid var(--mk-soft); font-size: 14px; }
.mk-logo { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 12.5px; font-weight: 700; }
.mk-navlinks { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted); }
.mk-navlinks .ui-pic { font-size: 16px; }
.mk-search { align-self: stretch; display: flex; flex-direction: column; gap: 10px; margin-bottom: 2px; padding-bottom: 2px; border-bottom: 1px solid var(--mk-soft); }
.mk-sbox { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--mk-edge); background: var(--mk-bg); box-shadow: 0 2px 8px -4px var(--gl-drop); font-size: 14px; }
.mk-sbox .ui-pic { color: var(--muted); font-size: 15px; }
.mk-sbox > span { flex: 1; }
.mk-stabs { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); }
.mk-stabs > span { display: inline-flex; align-items: center; gap: 5px; padding-bottom: 7px; }
.mk-stabs .is-on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); }
.mk-stabs .ui-pic { font-size: 14px; }
.mk-res { align-self: stretch; display: flex; flex-direction: column; gap: 3px; padding: 4px 0; }
.mk-res.is-ad { padding: 10px 12px; border-radius: 10px; background: var(--mk-field); }
.mk-ressrc { display: flex; align-items: center; gap: 9px; }
.mk-fav { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mk-bg); border: 1px solid var(--mk-edge); font-size: 11.5px; font-weight: 700; color: var(--accent-2); }
.mk-resurl { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mk-resurl b { font-size: 13px; font-weight: 550; }
.mk-resurl em { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.mk-adtag { margin-left: auto; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); background: color-mix(in srgb, var(--muted) 22%, transparent); }
.mk-rest { font-size: 16.5px; font-weight: 550; line-height: 1.3; color: var(--accent-2); }
.mk-ress { font-size: 13px; color: var(--muted); }
.mk-res.is-bad:not(.is-ad) { padding: 8px 10px; margin: -4px -10px; }
/* video page: a dark player with the thumbnail's own caption */
.mk-player { position: relative; align-self: stretch; aspect-ratio: 16 / 9; margin: -18px -18px 4px; border-radius: 0; overflow: hidden; display: flex; align-items: flex-start; padding: 22px 24px; background:
  radial-gradient(60% 80% at 85% 70%, color-mix(in srgb, var(--critical) 40%, transparent), transparent 70%),
  radial-gradient(50% 70% at 10% 100%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 70%), #0d0e13; color: #fff; }
.mk-thumb { max-width: 74%; font-size: clamp(18px, 4.2vw, 24px); font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; text-transform: uppercase; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5); }
.mk-play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); font-size: 26px; }
.mk-dur { position: absolute; right: 10px; bottom: 14px; padding: 2px 6px; border-radius: 5px; background: rgba(0, 0, 0, 0.75); font: 600 11.5px var(--font-mono); }
.mk-seek { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, 0.25); }
.mk-seek i { display: block; width: 18%; height: 100%; background: var(--accent); }
.mk-chan { align-self: stretch; display: flex; align-items: center; gap: 10px; }
.mk-chan .mk-av { width: 36px; height: 36px; font-size: 15px; }
.mk-chanwho { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.mk-chanwho em { font-size: 12px; color: var(--muted); }
.mk-follow { padding: 6px 14px; border-radius: 999px; background: var(--ink); color: var(--mk-bg); font-size: 12.5px; font-weight: 650; }
.mk-cmt { align-self: stretch; display: flex; gap: 10px; }
.mk-cmtbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.mk-cmthead { display: flex; align-items: baseline; gap: 8px; }
.mk-cmthead b { font-size: 12.5px; }
.mk-cmthead em { font-size: 11.5px; color: var(--muted); }
.mk-cmtacts { display: flex; align-items: center; gap: 14px; margin-top: 3px; font-size: 12px; color: var(--muted); }
.mk-cmtacts .ui-pic { font-size: 14px; }
.mk-cmt.is-bad { padding: 8px 10px; margin: -8px -10px; }
/* game page: dark key art with the title over it, a rating, download buttons */
.mk-banner { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 150px; margin: -18px -18px 4px; padding: 18px 20px; overflow: hidden; color: #fff; background: #120d10; }
.mk-scene { position: absolute; inset: 0; }
.mk-scene i { position: absolute; inset: 0; }
.mk-scene i:nth-child(1) { background: radial-gradient(55% 75% at 70% 95%, color-mix(in srgb, var(--warning) 85%, #ff5a1f) 0%, transparent 70%); opacity: 0.85; }
.mk-scene i:nth-child(2) { background: #2a1416; clip-path: polygon(0 100%, 0 62%, 14% 44%, 26% 58%, 40% 30%, 55% 56%, 68% 40%, 82% 60%, 100% 38%, 100% 100%); opacity: 0.9; }
.mk-scene i:nth-child(3) { background: #0b0809; clip-path: polygon(0 100%, 0 80%, 18% 66%, 34% 78%, 52% 62%, 70% 80%, 86% 70%, 100% 82%, 100% 100%); }
.mk-banner b { position: relative; font-size: 26px; font-weight: 800; letter-spacing: 0.14em; line-height: 1.1; }
.mk-banner em { position: relative; font-size: 13px; color: rgba(255, 255, 255, 0.8); }
.mk-rating { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.mk-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--warning); font-size: 15px; }
.mk-stars b { margin-left: 6px; font-size: 13px; color: var(--ink); }
.mk-rating > span:last-of-type { color: var(--muted); font-style: italic; }
.mk-dl { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; border-radius: 10px; background: var(--accent); color: #fff; }
.mk-dl > .ui-pic { font-size: 19px; }
.mk-dl > span { display: flex; flex-direction: column; line-height: 1.2; }
.mk-dl b { font-size: 13.5px; }
.mk-dl em { font-size: 11.5px; opacity: 0.8; }
.mk-dl.is-alt { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--mk-edge); }
/* code host: owner / project, its tabs, the file list */
.mk-repo { align-self: stretch; display: flex; flex-direction: column; gap: 10px; margin: -18px -18px 0; padding: 14px 18px 0; border-bottom: 1px solid var(--mk-soft); }
.mk-reponame { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14.5px; }
.mk-reponame .ui-pic { color: var(--muted); font-size: 16px; }
.mk-reponame > span:not(.mk-chip) { color: var(--accent-2); }
.mk-reponame i { color: var(--muted); font-style: normal; }
.mk-reponame b { color: var(--accent-2); }
.mk-chip { padding: 1px 8px; border-radius: 999px; border: 1px solid var(--mk-edge); font-size: 11px; color: var(--muted); }
.mk-repo .mk-stabs { margin-bottom: -1px; }
.mk-items { align-self: stretch; display: flex; flex-direction: column; border-radius: 10px; border: 1px solid var(--mk-edge); overflow: hidden; }
.mk-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; }
.mk-item + .mk-item { border-top: 1px solid var(--mk-soft); }
.mk-item .ui-pic { font-size: 16px; color: var(--muted); }
.mk-item b { font-weight: 550; }
.mk-item em { margin-left: auto; font-size: 12px; color: var(--muted); text-align: right; }
.mock .mk-item.is-bad { border-radius: 0; box-shadow: inset 0 0 0 2px var(--critical); }

/* email */
.mk-mailhead { padding: 12px 18px; background: var(--mk-bar); border-bottom: 1px solid var(--gl-edge); display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.mk-mailrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mk-mailrow em { width: 56px; flex-shrink: 0; font-style: normal; font-size: 12px; color: var(--muted); }
.mock--popup { max-width: 400px; }
.mock--installer { max-width: 500px; }
/* the giveaway: a ring in the harm colour (or the good colour) and a numbered pin matching the notes below */
.is-bad.mk-url, .is-bad.mk-title, .is-bad.mk-mailrow, .mock .is-bad { box-shadow: 0 0 0 2px var(--critical); border-radius: 8px; }
.mock .is-good { box-shadow: 0 0 0 2px var(--good); border-radius: 8px; }
.is-bad.mk-url { border-radius: 999px; }
.is-bad.mk-mailrow { padding-inline: 6px; }
.mock .mk-title.is-bad { box-shadow: inset 0 0 0 2px var(--critical); border-radius: 12px 12px 0 0; }
/* marked text gets room inside its ring, pulled back out so it stays aligned with the unmarked lines */
.mk-p.is-bad, .mk-p.is-good, .mk-h.is-bad, .mk-h.is-good, .mk-link.is-bad, .mk-link.is-good, .mk-check.is-bad, .mk-rating.is-bad { padding: 4px 8px; margin: -4px -8px; }
.mk-pin { flex-shrink: 0; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; border-radius: 50%; font: 600 10.5px/1 var(--font-mono); font-style: normal; color: #fff; background: var(--critical); vertical-align: 2px; }
.mk-pin--good { background: var(--good); }
.mk-pin--info { background: var(--accent); }
/* on a filled blue button the blue pin would vanish: it turns white */
.mk-fbtn.is-primary .mk-pin--info, .mk-dl:not(.is-alt) .mk-pin--info, .mk-btn .mk-pin--info, .mk-msg.is-me .mk-pin--info { background: #fff; color: var(--accent); }
/* on a block (a result, a player, a file) the pin sits on the ring's corner */
.mk-res, .mk-player, .mk-banner, .mk-tiles { position: relative; }
.mk-ressrc > .mk-pin, .mk-player > .mk-pin, .mk-banner > .mk-pin, .mk-tiles > .mk-pin { position: absolute; top: 8px; right: 8px; margin: 0; }
.mk-res.is-ad .mk-adtag { margin-right: 22px; }
.mk-res.is-bad:not(.is-ad) .mk-ressrc > .mk-pin { top: 6px; right: 6px; }
/* edge-to-edge blocks (a site header, a player, key art, a project header) ring inside, above their artwork */
.mock .mk-nav.is-bad, .mock .mk-player.is-bad, .mock .mk-banner.is-bad, .mock .mk-repo.is-bad { box-shadow: none; border-radius: 0; outline: 2px solid var(--critical); outline-offset: -2px; }
.mk-player > .mk-pin, .mk-banner > .mk-pin { z-index: 1; }
.prose .mk-notes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.prose .mk-notes > li { margin: 0; padding: 0; display: flex; align-items: flex-start; gap: 10px; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.prose .mk-notes > li::before { content: none; }
.mk-notes .mk-pin { width: 20px; height: 20px; margin: 1px 0 0; font-size: 11px; }
.prose .mk-notes { gap: 8px; margin-top: 12px; }

/* the human-check widget fake pages copy (Cloudflare's look: checkbox, label, orange wordmark), always light like the original */
.mk-captcha { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 360px; height: 66px; padding: 0 14px; border-radius: 4px; border: 1px solid #e0e0e0; background: #fafafa; color: #232323; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.mk-cbox { flex-shrink: 0; width: 26px; height: 26px; border-radius: 3px; border: 2px solid #8a8a8a; background: #fff; }
.mk-clabel { flex: 1; font-size: 14px; white-space: nowrap; }
.mk-cbrand { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mk-cbrand b { font: 800 11px/1 system-ui, sans-serif; letter-spacing: 0.06em; color: #f38020; }
.mk-cbrand em { font-style: normal; font-size: 9px; color: #6b6b6b; }
.mock .mk-captcha.is-bad { box-shadow: 0 0 0 2px var(--critical); }
/* keycaps: "Press [Win] + [R]" */
.mk-keys { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 14px; }
.mk-keys span { margin-right: 4px; }
.mk-keys kbd { display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 9px; border-radius: 6px; border: 1px solid light-dark(rgba(16, 24, 44, 0.18), rgba(255, 255, 255, 0.22)); border-bottom-width: 3px; background: var(--mk-field); font: 600 12.5px var(--font-mono); color: var(--ink); }
.mk-keys i { font-style: normal; color: var(--muted); }
.mock .mk-keys.is-bad { padding: 4px 8px; margin: -4px -8px; }

/* Windows' Run box (Win + R), drawn as Windows draws it: light, square, Segoe, blue default button */
.mock--run { max-width: 440px; border-radius: 8px; background: #fff; color: #1b1b1b; border-color: #c9c9c9; font-family: "Segoe UI", system-ui, sans-serif; }
.mk-wtitle { display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 6px 0 14px; font-size: 12.5px; background: #fff; border-bottom: 1px solid #ececec; }
.mk-wtitle .ui-pic { font-size: 13px; color: #555; }
.mk-wbody { display: flex; flex-direction: column; gap: 14px; padding: 16px 16px 14px; background: #f3f3f3; }
.mk-wrow { display: flex; align-items: flex-start; gap: 14px; }
.mk-wrow p { margin: 0; font-size: 13px; line-height: 1.45; }
.mk-wicon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 4px; background: linear-gradient(135deg, #3b8de0, #1a5fb4); box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px #9bbbe0; }
.mk-wopen { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.mock--run .mk-input { flex: 1; border-radius: 3px; border: 1px solid #8a8a8a; background: #fff; color: #1b1b1b; font-size: 12px; }
.mk-wbtns { display: flex; justify-content: flex-end; gap: 8px; }
.mk-wbtns span { min-width: 72px; padding: 5px 12px; border-radius: 4px; border: 1px solid #c4c4c4; background: #fdfdfd; text-align: center; font-size: 12.5px; }
.mk-wbtns .is-primary { border-color: #005fb8; background: #005fb8; color: #fff; }

/* Windows 11's User Account Control prompt, light like the real one in either theme: a yellow header for an unknown
   publisher (grey when verified, as Microsoft colour-codes it), the program, its rows, then Yes and the default No */
.mock--uac { max-width: 456px; border-radius: 8px; overflow: hidden; background: #fff; color: #1b1b1b; border-color: #c9c9c9; font-family: "Segoe UI", system-ui, sans-serif; }
.mk-uhead { padding: 10px 12px 16px 24px; background: #fdf0c6; }
.mk-uhead.is-verified { background: #e6e6e6; }
.mk-utop { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.mk-utop .ui-pic { font-size: 13px; color: #444; }
.mk-uq { margin: 14px 12px 0 0; font-size: 19px; line-height: 1.32; font-weight: 400; }
.mk-ubody { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 20px 24px 24px; font-size: 13px; }
.mk-uapp { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 17px; }
.mk-uapp .ui-pic { font-size: 30px; color: #3b6fb5; }
.mk-ufield.is-bad, .mk-uapp.is-bad { padding: 2px 6px; margin-inline: -6px; }
.mk-ulink { margin-top: 14px; color: #0b5cad; }
.mk-ufoot { display: flex; gap: 10px; padding: 20px 24px; background: #f3f3f3; }
.mk-ufoot span { flex: 1; padding: 6px 0; border-radius: 4px; border: 1px solid #d1d1d1; background: #fdfdfd; text-align: center; font-size: 13px; }
.mk-ufoot .is-primary { border-color: #005fb8; background: #005fb8; color: #fff; }

/* Microsoft Defender SmartScreen's "Windows protected your PC": a solid blue page, white text, outlined buttons */
.mock--smartscreen { max-width: 480px; border-radius: 6px; overflow: hidden; background: #0f5ca8; color: #fff; border-color: #0b4a88; font-family: "Segoe UI", system-ui, sans-serif; }
.mk-ss { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 28px 22px; font-size: 14px; line-height: 1.45; }
.mk-ss p { margin: 0; }
.mk-sstop { align-self: flex-end; margin-right: -16px; }
.mk-sstop .ui-pic { font-size: 14px; color: #fff; }
.mk-ssh { font-size: 28px; font-weight: 300; line-height: 1.2; }
.mk-sslink { text-decoration: underline; text-underline-offset: 3px; }
.mk-ssrow.is-bad { padding: 2px 6px; margin-inline: -6px; }
.mk-ssfoot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 28px 22px; }
.mk-ssfoot span { min-width: 110px; padding: 6px 14px; border: 2px solid #fff; text-align: center; font-size: 14px; }

/* macOS's own password prompt: light rounded panel, a lock, the bold question, two fields, Cancel and blue OK */
.mock--macauth { max-width: 300px; border-radius: 14px; background: #ececec; color: #1d1d1f; border-color: #c8c8c8; font-family: -apple-system, "SF Pro Text", system-ui, sans-serif; }
.mk-ma { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 18px 16px; text-align: center; font-size: 12.5px; }
.mk-ma p { margin: 0; }
.mk-malock .ui-pic { font-size: 44px; color: #6e6e73; }
.mk-mah { font-size: 13.5px; font-weight: 700; }
.mk-mah.is-bad { padding: 2px 6px; }
.mk-mafield { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; }
.mk-mafield em { font-style: normal; color: #6e6e73; font-size: 11.5px; }
.mock--macauth .mk-input { align-self: stretch; border-radius: 6px; border: 1px solid #c8c8c8; background: #fff; color: #1d1d1f; font-size: 12.5px; }
.mk-mabtns { align-self: stretch; display: flex; gap: 8px; margin-top: 6px; }
.mk-mabtns span { flex: 1; padding: 4px 0; border-radius: 6px; background: #fff; border: 1px solid #c8c8c8; text-align: center; }
.mk-mabtns .is-primary { background: #0a7aff; border-color: #0a7aff; color: #fff; }

/* per-OS variants of a step: tabs synced across the whole flow (blog.js picks the visitor's system) */
.mk-os { display: flex; flex-direction: column; gap: 10px; }
.mk-tabs { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 10px; background: light-dark(var(--gl-card), #1e1e24); border: 1px solid light-dark(rgba(16, 24, 44, 0.1), rgba(255, 255, 255, 0.12)); }
.mk-tab { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 7px; font: 12px var(--font-mono); color: var(--muted); transition: color 0.15s ease, background-color 0.15s ease; }
.mk-tab img { width: 15px; height: 15px; }
.mk-tab img + img { margin-left: -3px; }
/* the antitheft alert per system follows the same choice as the screens */
.vs-osalert { display: none; }
.vs-osalert.is-on { display: block; }
.mk-tab:hover { color: var(--ink); }
.mk-tab.is-on { color: #fff; background: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.mk-panel { display: none; }
.mk-panel.is-on { display: block; }

/* ---- ```versus: the CTA after an attack, three blocks read top to bottom.
   1 danger: solid deep red, what was just stolen as icon tiles, the consequence.
   2 with antitheft: calm card, the app's real alert stopping it, three checks.
   3 call to action: solid brand blue, one line, three icon points, a white button.
   Solid colours, no tints over tints: each block says one thing in one colour. */
.vs { display: flex; flex-direction: column; gap: 12px; margin: 2.6em 0; }
.prose .vs > * + * { margin-top: 0; }
.vs-danger, .vs-safe, .vs-cta { border-radius: 20px; padding: clamp(22px, 3vw, 34px); }
.vs-tag { display: inline-flex; align-items: center; gap: 8px; font: 600 11.5px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.vs-tag .ui-pic { font-size: 16px; }
.vs-h { margin-top: 10px !important; font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.vs-ic { flex-shrink: 0; display: grid; place-items: center; }
/* the lists reset themselves, not through .vs: the danger block also renders inside a flow step (loot:) */
.prose .vs-loot, .prose .vs-checks, .prose .vs-feats { list-style: none; padding: 0; }
.prose .vs-loot > li, .prose .vs-checks > li, .prose .vs-feats > li { margin: 0; }
.prose .vs-loot > li::marker, .prose .vs-checks > li::marker, .prose .vs-feats > li::marker { content: none; }

/* 1. danger */
.vs-danger { --vs-red: light-dark(color-mix(in srgb, var(--critical) 78%, #000), color-mix(in srgb, var(--critical) 58%, #000)); background: var(--vs-red); color: #fff; }
.flow-screen > .vs-danger { display: block; padding: clamp(20px, 2.6vw, 28px); }
.vs-danger .vs-h { margin-top: 0 !important; }   /* the heading opens the block (no tag above it) */
.vs-danger .vs-tag { color: rgba(255, 255, 255, 0.8); }
.prose .vs-loot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 22px 0 0; }
.prose .vs-loot li { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.1); }
.vs-loot .vs-ic { width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--vs-red); }
.vs-loot .vs-ic .ui-pic { font-size: 20px; }
.vs-loot strong { display: block; font-size: 15.5px; font-weight: 650; line-height: 1.3; }
.vs-loot em { display: block; margin-top: 3px; font-style: normal; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); }
.vs-foot { display: flex; align-items: center; gap: 10px; margin-top: 20px !important; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.2); font-size: 16.5px; font-weight: 650; line-height: 1.4; }
.vs-foot .ui-pic { flex-shrink: 0; font-size: 20px; }

/* 2. with antitheft */
.vs-safe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 32px; background: light-dark(#ffffff, #17171b); border: 1px solid var(--gl-edge); }
.vs-safe .vs-tag { color: color-mix(in srgb, var(--good) 75%, var(--ink)); }
.vs-safe .vs-tag .ui-pic { color: var(--good); }
.prose .vs-checks { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 0; }
.prose .vs-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; line-height: 1.45; }
.vs-checks .vs-ic { width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); }
.vs-checks .vs-ic .ui-pic { font-size: 14px; }
.vs-alert .notif-card { width: 384px; max-width: 100%; zoom: 0.92; box-shadow: inset 0 1px 0 var(--glass-hi), 0 26px 50px -26px var(--glass-drop); }

/* 3. call to action */
.vs-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 32px; background: var(--accent); color: #fff; }
.vs-cta-h { grid-column: 1 / -1; font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.prose .vs-feats { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.prose .vs-feats li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; line-height: 1.4; }
.vs-feats .vs-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.16); }
.vs-feats .vs-ic .ui-pic { font-size: 18px; }
.vs-act { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.prose .vs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 12px; background: #fff; color: var(--accent); font-size: 16px; font-weight: 700; text-decoration: none; transition: transform 0.2s var(--ease), box-shadow 0.2s ease; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.45); }
.prose .vs-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, 0.5); }
.vs-btn .ui-pic { font-size: 18px; }
.prose .vs-gh { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.prose .vs-gh:hover { color: #fff; }
.vs-gh .ui-pic { font-size: 15px; }
@media (max-width: 760px) {
  .prose .vs-loot { grid-template-columns: minmax(0, 1fr); }
  .vs-safe, .vs-cta { grid-template-columns: minmax(0, 1fr); }
  .vs-alert { display: flex; justify-content: center; }
  .vs-alert .notif-card { zoom: 0.86; }
}
/* the "Touched" owner mark: these three live in the antitheft page's next.css, not app-ui.css, so they are repeated
   here; the border/margin/size resets keep the article's own img rule (.prose img) off the 22px logo */
.notif-fact-touched { display: flex; align-items: center; gap: 8px; }
.notif-touched-app { flex-shrink: 0; display: grid; }
.notif-touched-app .sup-logo { display: block; width: 22px; height: 22px; max-width: none; margin: 0; padding: 3px; border: 0; border-radius: 0; background: none; box-shadow: none; object-fit: contain; }

/* svg infographics: colour through these classes so the drawing follows the theme */
.viz--svg { padding: clamp(12px, 2vw, 20px); }
.vz { display: block; width: 100%; height: auto; font-family: var(--font-display); fill: var(--ink); }
.vz text { fill: var(--ink); }
.vz .vz-ink { fill: var(--ink); } .vz .vz-muted { fill: var(--muted); } .vz .vz-accent { fill: var(--accent); }
.vz .vz-accent2 { fill: var(--accent-2); } .vz .vz-bad { fill: var(--critical); } .vz .vz-good { fill: var(--good); }
.vz .vz-warn { fill: var(--warning); } .vz .vz-panel { fill: var(--gl-card-hover); } .vz .vz-line { fill: var(--viz-grid); }
.vz .vz-s-ink { stroke: var(--ink); fill: none; } .vz .vz-s-muted { stroke: var(--muted); fill: none; }
.vz .vz-s-accent { stroke: var(--accent); fill: none; } .vz .vz-s-bad { stroke: var(--critical); fill: none; }
.vz .vz-s-good { stroke: var(--good); fill: none; } .vz .vz-s-line { stroke: var(--viz-grid); fill: none; }
.vz .vz-mono { font-family: var(--font-mono); }

/* ---- FAQ, sources, related ---- */
.faq { margin-top: 2.4em; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary { position: relative; padding: 18px 40px 18px 0; font-size: 18px; font-weight: 650; line-height: 1.4; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 4px; top: 22px; width: 16px; height: 16px;
  background: var(--muted); -webkit-mask: url(/img/pict/plus.svg) center / contain no-repeat; mask: url(/img/pict/plus.svg) center / contain no-repeat;
  transition: transform 0.25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a { padding: 0 0 20px; font-size: 17px; color: var(--muted); }
.faq-a > * + * { margin-top: 0.7em; }

.sources { margin-top: 2.4em; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.sources-k { font-size: 11.5px; color: var(--muted); text-transform: lowercase; }
.prose .sources ol { counter-reset: none; padding-left: 1.4em; list-style: decimal; margin-top: 10px; }
.prose .sources ol > li { padding-left: 0; }
.prose .sources ol > li::before { content: none; }
.prose .sources a { color: var(--muted); overflow-wrap: anywhere; }
/* the short version ([!QUICK]) is no longer a box at the top: it waits here, collapsed, just above the sources */
.short-fold { margin-top: 2.4em; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.short-fold summary { cursor: pointer; list-style: none; font-size: 11.5px; color: var(--muted); text-transform: lowercase; }
.short-fold summary::-webkit-details-marker { display: none; }
.short-fold summary::before { content: "+ "; }
.short-fold[open] summary::before { content: "- "; }
.short-body { margin-top: 10px; font-size: 16px; line-height: 1.6; }
.short-fold + .sources { margin-top: 1.4em; }

.related { margin-top: clamp(56px, 7vw, 104px); }
.related-h { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.025em; margin-bottom: 24px; }

/* ---- preview bar (drafts only) ---- */
.preview-bar { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--wrap) - 2 * var(--gutter)); margin: 12px auto 0; padding: 10px 18px; border-radius: var(--r-ctl); font-size: 12px; color: var(--ink); background: color-mix(in srgb, var(--warning) 16%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 40%, transparent); }
.preview-bar a { text-decoration: underline; }
.preview-notes { margin-top: 6px; }
.preview-notes summary { cursor: pointer; }
.preview-notes pre { margin: 8px 0 0; white-space: pre-wrap; font: inherit; color: var(--muted); }

/* ---- footer, as on the antitheft page ---- */
.foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 20px var(--gutter); font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); }
.foot-motto { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.foot-links { display: inline-flex; gap: 20px; flex-wrap: wrap; }
.foot-link { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); transition: color 0.15s ease; }
.foot-link .ui-pic { font-size: 15px; }
.foot-link:hover { color: var(--ink); }

@media (max-width: 860px) {
  .bcard--big { grid-template-columns: minmax(0, 1fr); }
  .bcard--big .bcard-art { min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .prose { font-size: 17px; }
  .prose ol > li { padding-left: 40px; }
  .nav-links .pill:not(.pill--accent) > span { display: inline; }
  .nav-links .pill:not(.pill--accent) { padding: 0 9px 0 8px; }
  .nav-links .pill[href="/"] { display: none; }
  .nav { padding-inline: 16px 8px; border-radius: 16px; }
}
@media (max-width: 420px) { .nav .wordmark-by { display: none; } }