/* ═══════════════════════════════════════════════════════════════════════════
   WrapScribe documentation — shared stylesheet for /docs/*
   ───────────────────────────────────────────────────────────────────────────
   Two halves, one file, loaded by all four docs pages *before* their inline
   <style> so a page can override anything here without !important:

     A. Docs layout — the sticky ToC rail, the three-page switcher, prose
        measure, badges, control rows, prev/next, the shortcut table.
     B. The .mk-* mock-UI kit — CSS/HTML miniatures of the real macOS app.
        No screenshots: the pill, copy card, selection bubble and meeting card
        are excluded from screen recordings by default (OverlayCapture), so a
        capture of them does not exist to take.

   The kit's contract, in one line: every mock is
     <figure class="mk" style="--w:520">
       <div class="mk-win" role="img" aria-label="One sentence.">…</div>
       <figcaption>The same sentence.</figcaption>
     </figure>
   `--w` is the app window's real width in points. `.mk-win` turns that into a
   design-pixel unit, `--u`, which every size inside a mock is expressed in:
   `calc(N * var(--u))` where N is the number the Swift source uses. A mock
   therefore renders at 1:1 when the column is wide enough and shrinks
   proportionally when it isn't — never larger than life, never re-drawn.

   Colours: the site tokens (--ink/--muted/--line/--plate/--blue) plus the
   macOS greys the app inherits from the system. Light appearance only, like
   the rest of wrapscribe.com. Every var() carries a literal fallback so the
   kit still draws if this sheet is ever used on a page without the tokens.

   Full markup snippets for every primitive: docs/SITE-DOCS.md → "Kit usage".
   ═══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   A. DOCS LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */

/* Docs run wider than the rest of the site (--maxw is 1024) because the rail
   costs 236 + 56 before the prose starts. 1180 − 44 padding − 236 − 56 leaves
   an 844px content column; prose is measured to 720 inside it.

   Written twice on purpose. The container is <div class="wrap docs-wrap">, and
   the page's own .wrap{max-width:var(--maxw)} is a single class like this one
   but lives in the inline <style>, which loads *after* this sheet — so a lone
   .docs-wrap loses on source order and the docs get capped at 1024. That is
   not a cosmetic loss: the content column comes out at 688px, narrower than
   the 720px prose measure it is supposed to hold, mock-ups drawn at --w:760
   stop rendering 1:1, and the .docs-nextprev row below (also 1180) hangs 78px
   wider than the content above it. The compound selector wins on specificity
   instead, in either order and without !important. */
.docs-wrap,
.wrap.docs-wrap{max-width:1180px}

.docs{display:grid;grid-template-columns:minmax(0,1fr)}

/* Rail hidden below 1000px — the <details class="toc-m"> takes over there. */
.toc-rail{display:none}

@media(min-width:1000px){
  .docs{grid-template-columns:236px minmax(0,1fr);gap:56px;align-items:start}
  /* align-items:start is load-bearing: a stretched grid item cannot stick.
     So is body{overflow-x:clip} on the page — overflow-x:hidden would make
     the body a scroll container and kill position:sticky outright. */
  .toc-rail{display:block;position:sticky;top:48px;max-height:calc(100vh - 48px);
    overflow:auto;padding:34px 0 48px;scrollbar-width:thin;
    scrollbar-color:var(--line,#d2d2d7) transparent;overscroll-behavior:contain}
  .toc-rail::-webkit-scrollbar{width:6px}
  .toc-rail::-webkit-scrollbar-thumb{background:var(--line,#d2d2d7);border-radius:3px}
  .toc-m{display:none}
}

/* ── the three-page switcher ─────────────────────────────────────────────── */
.docs-switch{display:flex;gap:3px;padding:3px;margin:0 0 20px;border-radius:10px;
  background:var(--plate,#f5f5f7)}
.docs-switch a{flex:1;min-width:0;text-align:center;padding:6px 4px;border-radius:7px;
  font-size:12px;font-weight:500;color:var(--muted,#6e6e73);white-space:nowrap;
  transition:color .18s var(--ease,ease),background .18s var(--ease,ease)}
.docs-switch a:hover{color:var(--ink,#1d1d1f)}
.docs-switch a[aria-current="page"]{background:var(--white,#fff);color:var(--ink,#1d1d1f);
  font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.10)}

/* ── the table of contents ───────────────────────────────────────────────── */
.toc-h{margin:0 0 8px;padding-left:10px;font-size:11px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted,#6e6e73)}
.toc ol{list-style:none;margin:0;padding:0}
.toc li{margin:0}
.toc a{display:block;padding:5px 10px;border-left:2px solid transparent;
  border-radius:0 6px 6px 0;font-size:13px;line-height:1.4;color:var(--muted,#6e6e73);
  transition:color .15s var(--ease,ease),border-color .15s var(--ease,ease),background .15s var(--ease,ease)}
.toc a:hover{color:var(--ink,#1d1d1f);background:var(--plate,#f5f5f7)}
/* Set by docs.js as you scroll; also the styling hook for a page that wants a
   row marked without JS. */
.toc a[aria-current]{color:var(--blue-lo,#0060c4);font-weight:600;
  border-left-color:var(--blue,#0071e3)}
/* Second level: h3s under their h2. */
.toc ol ol{margin:0 0 6px}
.toc ol ol a{padding-left:22px;font-size:12.5px}
/* An h2 whose h3 is current stays bold. */
.toc li.is-open>a{color:var(--ink,#1d1d1f);font-weight:600}

/* Collapsible groups — the Settings rail wraps each tab's h3 list in a
   <details>; docs.js keeps only the current one open. Everything degrades to
   "all open" with JS off. */
.toc details{margin:0}
.toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;
  padding:5px 10px;font-size:12px;color:var(--muted,#6e6e73);border-radius:6px}
.toc summary::-webkit-details-marker{display:none}
.toc summary::marker{content:""}
.toc summary:hover{color:var(--ink,#1d1d1f);background:var(--plate,#f5f5f7)}
.toc summary::after{content:"";width:5px;height:5px;flex:none;margin-left:auto;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:translateY(-1px) rotate(45deg);transition:transform .18s var(--ease,ease)}
.toc details[open]>summary::after{transform:translateY(1px) rotate(225deg)}
/* Plain group labels above a run of h2 rows (Dictation · Features · System). */
.toc-g{margin:16px 0 4px;padding-left:10px;font-size:10.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--muted,#6e6e73);opacity:.8}

/* ── the compact "On this page" below 1000px ─────────────────────────────── */
.toc-m{margin:26px 0 6px;border:1px solid var(--line,#d2d2d7);border-radius:12px;
  padding:0;background:var(--white,#fff)}
.toc-m>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  padding:12px 16px;font-size:14px;font-weight:600;color:var(--ink,#1d1d1f)}
.toc-m>summary::-webkit-details-marker{display:none}
.toc-m>summary::marker{content:""}
.toc-m>summary::after{content:"";width:6px;height:6px;margin-left:auto;
  border-right:1.6px solid var(--muted,#6e6e73);border-bottom:1.6px solid var(--muted,#6e6e73);
  transform:translateY(-2px) rotate(45deg);transition:transform .18s var(--ease,ease)}
.toc-m[open]>summary::after{transform:translateY(1px) rotate(225deg)}
.toc-m nav{padding:0 10px 12px}
.toc-m ol{list-style:none;margin:0;padding:0}
.toc-m a{display:block;padding:6px 8px;border-radius:7px;font-size:14px;
  color:var(--muted,#6e6e73)}
.toc-m a:hover{color:var(--ink,#1d1d1f);background:var(--plate,#f5f5f7)}
.toc-m ol ol a{padding-left:22px;font-size:13.5px}
.toc-m details>summary{list-style:none;padding:6px 8px;font-size:13px;
  color:var(--muted,#6e6e73);cursor:pointer}
.toc-m details>summary::-webkit-details-marker{display:none}

/* ── the prose column ────────────────────────────────────────────────────── */
.docs-body{min-width:0;padding:30px 0 12px}
.docs-body>section{padding:38px 0 6px;border-top:1px solid var(--line,#d2d2d7)}
.docs-body>section:first-of-type{border-top:0;padding-top:0}

/* Prose measure. Figures are deliberately not capped — a mock is drawn at the
   app's real width — and .mk-wide may take the whole 844px column.

   Every prose rule below stops at the edge of a mock-up. Inside .mk-win the
   kit's own type scale (.mk-cap, .mk-t1, .mk-title …) has to win, and a
   one-class kit selector (0,1,0) loses to `.docs-body p` (0,1,1) — measured:
   .mk-cap rendered at 16.5px instead of 11, and `p+p` opened 14px gaps the
   app has nowhere. `:not(.mk-win *)` keeps the prose rules out of mocks
   without restating the kit one class heavier. */
.docs-body p:not(.mk-win *),.docs-body ul:not(.mk-win *),.docs-body ol:not(.mk-win *),
.docs-body dl:not(.mk-win *),.docs-body h2,.docs-body h3,.docs-body h4,
.docs-body blockquote{max-width:720px}

.docs-body h2{margin:0 0 14px;font-size:26px;font-weight:600;letter-spacing:-.02em;
  line-height:1.2;color:var(--ink,#1d1d1f);text-wrap:balance}
.docs-body h3{margin:34px 0 10px;font-size:18.5px;font-weight:600;letter-spacing:-.013em;
  line-height:1.3;color:var(--ink,#1d1d1f)}
.docs-body h2+h3{margin-top:24px}
.docs-body p:not(.mk-win *){font-size:16.5px;line-height:1.68;color:var(--muted,#6e6e73);text-wrap:pretty}
.docs-body p:not(.mk-win *)+p{margin-top:14px}
.docs-body b:not(.mk-win *),.docs-body strong:not(.mk-win *){color:var(--ink,#1d1d1f);font-weight:600}
.docs-body a:not(.mk-win *){color:var(--blue-lo,#0060c4)}
.docs-body a:not(.mk-win *):hover{text-decoration:underline}
.docs-body ul:not(.mk-win *),.docs-body ol:not(.mk-win *){margin:16px 0 0;padding:0;list-style:none;display:grid;gap:11px}
.docs-body li:not(.mk-win *){position:relative;padding-left:19px;font-size:16px;line-height:1.62;
  color:var(--muted,#6e6e73);text-wrap:pretty}
.docs-body li:not(.mk-win *)::before{content:"";position:absolute;left:0;top:10px;width:5px;height:5px;
  border-radius:50%;background:var(--line,#d2d2d7)}
.docs-body ol:not(.mk-win *){counter-reset:docs-ol}
.docs-body ol:not(.mk-win *)>li{counter-increment:docs-ol}
.docs-body ol:not(.mk-win *)>li::before{content:counter(docs-ol) ".";width:auto;height:auto;top:0;
  background:none;color:var(--line,#d2d2d7);font-size:14px;font-weight:600}
.docs-body ul:not(.mk-win *)+p,.docs-body ol:not(.mk-win *)+p{margin-top:16px}
.docs-body code:not(.mk-win *){font:500 14.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--plate,#f5f5f7);border-radius:5px;padding:1px 6px;color:var(--ink,#1d1d1f)}

/* The one cross-link that closes a section ("How it works →" / "Set your
   shortcuts →"): a standalone line, arrow as a pseudo-element so a screen
   reader never reads it twice. */
.docs-body .xref{margin-top:20px;font-size:15px}
.docs-body .xref a{display:inline-flex;align-items:center;gap:7px;font-weight:500}
.docs-body .xref a::after{content:"→";font-size:14px;transition:transform .18s var(--ease,ease)}
.docs-body .xref a:hover::after{transform:translateX(2px)}

/* A paragraph that carries a deep-link id (a banner, an option list) is not
   a control row, but a support link must still visibly land on it: the same
   3px rule + fading tint the rows use, drawn outside the text box. */
.docs-body .anchored{position:relative}
.docs-body .anchored:target::before{content:"";position:absolute;z-index:-1;
  inset:-6px -12px -6px -14px;border-left:3px solid var(--blue,#0071e3);border-radius:6px;
  animation:ctl-land 1.2s ease-out both}

/* The A–Z index reads down column one, then column two — columns, not a grid. */
.docs-body .docs-index{display:block;max-width:720px;margin:18px 0 0;padding:0;
  column-count:2;column-gap:34px;list-style:none}
.docs-body .docs-index li{break-inside:avoid;padding-left:0;margin:0 0 6px;font-size:15px}
.docs-body .docs-index li::before{content:none}
@media(max-width:560px){.docs-body .docs-index{column-count:1}}

/* 48px of sticky nav plus room, so a deep link never lands under it —
   headings, sections, and every control row / anchored paragraph / figure
   that carries an id. */
.docs-body h2,.docs-body h3,.docs-body section,.docs-body [id]{scroll-margin-top:64px}

/* The line under the hero sub. */
.stamp{margin-top:20px;font-size:13.5px;color:var(--muted,#6e6e73)}

/* ── badges ──────────────────────────────────────────────────────────────── */
/* Pro/Alpha ride on a heading (and its ToC row); Syncs/This Mac ride on a
   control row. Same chip shape throughout. */
.pro,.alpha{display:inline-block;vertical-align:.14em;margin-left:9px;padding:2px 8px;
  border-radius:980px;font-size:11px;font-weight:600;letter-spacing:.005em;line-height:1.45}
.pro{background:rgba(0,113,227,.10);color:var(--blue-lo,#0060c4)}
.alpha{background:rgba(120,72,209,.12);color:#6534bd}
.toc .pro,.toc .alpha,.toc-m .pro,.toc-m .alpha{margin-left:6px;padding:1px 6px;font-size:9.5px}

.tag{display:inline-block;padding:1px 7px;border-radius:980px;font-size:10.5px;
  font-weight:600;line-height:1.5;border:1px solid var(--line,#d2d2d7);
  color:var(--muted,#6e6e73);background:var(--white,#fff)}
.tag-sync{border-color:rgba(0,113,227,.34);color:var(--blue-lo,#0060c4)}
.tag-mac{border-color:var(--line,#d2d2d7);color:var(--muted,#6e6e73)}

/* ── control rows (Settings) ─────────────────────────────────────────────── */
/* One <dl class="ctls"> per card; one .ctl per control, id'd so support can
   deep-link a single switch. */
.ctls{max-width:720px;margin:20px 0 0;padding:0}
.ctl{border-top:1px solid var(--hair,rgba(0,0,0,.08));border-left:3px solid transparent;
  padding:14px 0 14px 13px;scroll-margin-top:64px;
  transition:border-color .2s var(--ease,ease)}
.ctl:first-child{border-top:0}
.ctl dt{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:0}
.ctl dd{margin:5px 0 0;font-size:15px;line-height:1.6;color:var(--muted,#6e6e73);
  max-width:640px;text-wrap:pretty}
.ctl-label{font-size:15.5px;font-weight:600;color:var(--ink,#1d1d1f)}
.ctl-meta{font-size:12.5px;color:var(--muted,#6e6e73)}
.ctl-meta i{font-style:normal;opacity:.4;padding:0 5px}
.ctl-meta b{font-weight:600}
.ctl-anchor{opacity:0;font-size:13px;color:var(--muted,#6e6e73);
  transition:opacity .15s var(--ease,ease)}
.ctl:hover .ctl-anchor,.ctl-anchor:focus-visible,.ctl:target .ctl-anchor{opacity:1}
.ctl-anchor:hover{color:var(--blue,#0071e3)}
@media(min-width:700px){
  .ctl dt{flex-wrap:nowrap}
  .ctl-meta{margin-left:auto;text-align:right;white-space:nowrap}
}
/* A deep link has to visibly land somewhere. */
.ctl:target{border-left-color:var(--blue,#0071e3);animation:ctl-land 2.8s var(--ease,ease) both}
@keyframes ctl-land{
  0%,55%{background:rgba(0,113,227,.06)}
  100%{background:transparent}
}

/* ── generic two-column reference table (what syncs, A–Z index) ──────────── */
.docs-table-wrap{max-width:720px;margin:20px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
table.docs-table,table.docs-kbd{width:100%;border-collapse:collapse;text-align:left;
  font-size:14.5px;line-height:1.5}
.docs-table th,.docs-kbd th{padding:0 14px 8px 0;border-bottom:1px solid var(--line,#d2d2d7);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted,#6e6e73);white-space:nowrap}
.docs-table td,.docs-kbd td{padding:10px 14px 10px 0;vertical-align:top;
  border-bottom:1px solid var(--hair,rgba(0,0,0,.08));color:var(--muted,#6e6e73)}
.docs-table td:first-child,.docs-kbd td:first-child{color:var(--ink,#1d1d1f);font-weight:500}
.docs-table a{color:var(--blue-lo,#0060c4)}
.docs-table a:hover{text-decoration:underline}

/* The keyboard-shortcut table is real text, not a mock — find-in-page and
   copy have to work on it. */
.docs-kbd-wrap{max-width:720px;margin:20px 0 0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.docs-kbd kbd{display:inline-block;min-width:22px;padding:2px 7px;border-radius:6px;
  background:var(--white,#fff);border:1px solid var(--line,#d2d2d7);
  box-shadow:0 1px 0 rgba(0,0,0,.08);
  font:500 13px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  color:var(--ink,#1d1d1f);text-align:center;white-space:nowrap}
.docs-kbd kbd+kbd{margin-left:4px}

/* ── prev / next ─────────────────────────────────────────────────────────── */
.docs-nextprev{max-width:1180px;margin:0 auto;padding:8px 22px 88px;
  display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dnp{display:block;padding:16px 20px;border:1px solid var(--line,#d2d2d7);border-radius:14px;
  transition:border-color .2s var(--ease,ease),transform .2s var(--ease,ease)}
.dnp:hover{border-color:var(--blue,#0071e3);transform:translateY(-1px)}
.dnp span{display:block;font-size:12px;color:var(--muted,#6e6e73);margin-bottom:3px}
.dnp b{font-size:16.5px;font-weight:600;letter-spacing:-.012em;color:var(--ink,#1d1d1f)}
.dnp.next{text-align:right}
@media(max-width:640px){.docs-nextprev{grid-template-columns:1fr;padding-bottom:64px}}


/* ══════════════════════════════════════════════════════════════════════════
   B. THE .mk-* MOCK-UI KIT
   ══════════════════════════════════════════════════════════════════════════ */

/* ── the frame and its design-pixel unit ─────────────────────────────────── */
/* The figure is the scroll box: once --u hits its floor the mock is wider
   than a phone's column, and a sideways scroll beats an unreadable smudge.
   The caption sticks to the visible left edge so it never scrolls away. */
figure.mk{container-type:inline-size;margin:26px 0 8px;overflow-x:auto;overscroll-behavior-x:contain}
figure.mk figcaption{position:sticky;left:0;max-width:720px;margin-top:10px;font-size:13px;line-height:1.5;
  color:var(--muted,#6e6e73);text-wrap:pretty}

/* --u is one design pixel: 1px when the column can afford the app's real
   width, less when it can't — down to a floor of .7px, where 13pt body text
   is still 9px and legible; below that the figure scrolls instead (measured:
   a 760-wide window in a 331px phone column would otherwise render at 5.7px).
   --w is the app window's width in points and is set per figure; --dot is
   the traffic-light diameter (12 is macOS; small window mocks can pass 7,
   the size the site's own /download mocks use). */
.mk-win{--u:clamp(.7px,calc(100cqw / var(--w)),1px);--dot:12;
  width:calc(var(--w) * var(--u));
  border-radius:calc(11 * var(--u));
  border:max(.5px,calc(1 * var(--u))) solid var(--line,#d2d2d7);
  overflow:hidden;background:#fff;color:#1d1d1f;text-align:left;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  font:calc(13 * var(--u))/1.35 -apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
/* Same box, no chrome — for a mock that is not a window (an alert, the
   menu-bar menu, a floating overlay). Keeps --u and the role="img" contract. */
.mk-win.mk-bare{border:0;background:transparent;box-shadow:none;border-radius:0;overflow:visible}
/* A desktop-ish backdrop for floating UI that needs something to float over. */
.mk-win.mk-stage{background:linear-gradient(168deg,#fcfcfd 0%,#ececee 100%);
  display:grid;place-items:center;padding:calc(26 * var(--u))}
/* Opt in to the full 844px content column instead of the 720px prose measure. */
.mk-wide{max-width:none}

/* ── window chrome ───────────────────────────────────────────────────────── */
.mk-bar{position:relative;display:flex;align-items:center;gap:calc(8 * var(--u));
  height:calc(28 * var(--u));padding:0 calc(11 * var(--u));
  background:linear-gradient(180deg,#fcfcfd,#eeeef0);
  border-bottom:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.07)}
.mk-dot{width:calc(var(--dot) * var(--u));height:calc(var(--dot) * var(--u));
  border-radius:50%;flex:none}
.mk-dot.r{background:#ff5f57}
.mk-dot.y{background:#febc2e}
.mk-dot.g{background:#28c840}
.mk-dot.off{background:rgba(0,0,0,.14)}
.mk-title{position:absolute;left:calc(90 * var(--u));right:calc(90 * var(--u));
  text-align:center;font-size:calc(13 * var(--u));font-weight:600;color:#3c3c43;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-toolbar{display:flex;align-items:center;gap:calc(10 * var(--u));
  height:calc(38 * var(--u));padding:0 calc(14 * var(--u));background:#fbfbfc;
  border-bottom:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.07);
  font-size:calc(12.5 * var(--u));color:#6e6e73}

/* ── sidebar shell ───────────────────────────────────────────────────────── */
.mk-shell{display:grid;grid-template-columns:calc(var(--side,220) * var(--u)) minmax(0,1fr)}
.mk-side{display:flex;flex-direction:column;gap:calc(1 * var(--u));
  padding:calc(8 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u));
  background:#f7f7f9;
  border-right:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.08)}
.mk-side-h{padding:calc(12 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u));
  font-size:calc(11 * var(--u));font-weight:700;letter-spacing:calc(.8 * var(--u));
  text-transform:uppercase;color:#8a8a8f}
.mk-nav-i{display:flex;align-items:center;gap:calc(9 * var(--u));
  height:calc(34 * var(--u));padding:0 calc(8 * var(--u));
  border-radius:calc(7 * var(--u));font-size:calc(13 * var(--u));color:#2c2c30}
.mk-nav-i .mk-i{width:calc(15 * var(--u));height:calc(15 * var(--u));color:#6e6e73}
.mk-nav-i.is-on{background:rgba(0,0,0,.07);font-weight:600}
.mk-nav-i.is-on .mk-i{color:#1d1d1f}
.mk-side-foot{margin-top:auto;padding-top:calc(6 * var(--u));
  border-top:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.07)}

/* ── page body ───────────────────────────────────────────────────────────── */
/* 24pt page padding, 22pt between blocks — WSDesign.pagePadding / .sectionSpacing. */
.mk-body{display:flex;flex-direction:column;gap:calc(22 * var(--u));
  padding:calc(24 * var(--u));min-width:0}
/* The wizard's own content box: 40 horizontal / 32 vertical (SetupView). */
.mk-pad{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(var(--g,16) * var(--u));
  padding:calc(32 * var(--u)) calc(40 * var(--u));text-align:center;min-width:0}
.mk-head{display:flex;flex-direction:column;gap:calc(4 * var(--u))}
.mk-h{font-size:calc(26 * var(--u));font-weight:700;letter-spacing:calc(-.5 * var(--u));
  color:#1d1d1f}
.mk-sub{font-size:calc(13 * var(--u));color:#6e6e73}

/* Type inside a mock. .mk-t1 is a step/sheet title, .mk-t2 its body copy,
   .mk-cap the small grey line under a field. */
.mk-t1{font-size:calc(22 * var(--u));font-weight:700;letter-spacing:calc(-.3 * var(--u));
  line-height:1.25;color:#1d1d1f}
.mk-t1.xl{font-size:calc(30 * var(--u))}
.mk-t2{font-size:calc(13 * var(--u));line-height:1.45;color:#3c3c43}
.mk-cap{font-size:calc(11 * var(--u));line-height:1.42;color:#8a8a8f}
.mk-cap.warn{color:#b26a00}
/* A vertical run of anything, full width of its parent. */
.mk-stack{display:flex;flex-direction:column;align-items:stretch;
  gap:calc(var(--g,10) * var(--u));width:100%;min-width:0;text-align:left}
.mk-stack .mk-row+.mk-row{border-top:0}
/* The green "✓ Granted" pair. */
.mk-ok{display:inline-flex;align-items:center;gap:calc(5 * var(--u));flex:none;
  font-size:calc(12.5 * var(--u));font-weight:500;color:#1a7a2b}

/* ── cards, rows, tiles, lists ───────────────────────────────────────────── */
.mk-card{padding:calc(16 * var(--u));border-radius:calc(12 * var(--u));
  background:rgba(0,0,0,.025);
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.09)}
.mk-card.plain{background:#fff}
.mk-card-h{display:flex;align-items:center;gap:calc(9 * var(--u));
  margin-bottom:calc(10 * var(--u));font-size:calc(14 * var(--u));font-weight:600}
.mk-ico{display:grid;place-items:center;flex:none;
  width:calc(22 * var(--u));height:calc(22 * var(--u));border-radius:calc(6 * var(--u));
  background:rgba(0,113,227,.12);color:#0071e3}
.mk-ico.lg{width:calc(34 * var(--u));height:calc(34 * var(--u));border-radius:calc(8 * var(--u))}
.mk-ico.lg .mk-i{width:calc(16 * var(--u));height:calc(16 * var(--u))}
.mk-ico.grey{background:rgba(0,0,0,.06);color:#6e6e73}

.mk-row{display:flex;align-items:center;gap:calc(12 * var(--u));
  padding:calc(10 * var(--u)) 0;min-width:0}
.mk-row+.mk-row{border-top:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.07)}
.mk-row-t{flex:1;min-width:0}
.mk-row-t b{display:block;font-size:calc(13 * var(--u));font-weight:600;color:#1d1d1f}
.mk-row-t span{display:block;margin-top:calc(2 * var(--u));
  font-size:calc(11.5 * var(--u));line-height:1.4;color:#6e6e73}
.mk-row-c{flex:none;display:flex;align-items:center;gap:calc(8 * var(--u))}

.mk-tiles{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
  gap:calc(12 * var(--u))}
.mk-tile{padding:calc(14 * var(--u));border-radius:calc(12 * var(--u));
  background:rgba(0,0,0,.025);
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.09)}
.mk-tile b{display:block;font-size:calc(24 * var(--u));font-weight:700;
  letter-spacing:calc(-.5 * var(--u))}
.mk-tile span{display:block;margin-top:calc(3 * var(--u));font-size:calc(10.5 * var(--u));
  font-weight:600;letter-spacing:calc(.5 * var(--u));text-transform:uppercase;color:#8a8a8f}

.mk-empty{display:grid;place-items:center;gap:calc(8 * var(--u));text-align:center;
  padding:calc(28 * var(--u)) calc(24 * var(--u));border-radius:calc(12 * var(--u));
  border:max(.5px,calc(1 * var(--u))) dashed rgba(0,0,0,.16);
  font-size:calc(12.5 * var(--u));color:#8a8a8f}
.mk-empty .mk-i{width:calc(22 * var(--u));height:calc(22 * var(--u))}

.mk-grid{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));
  gap:calc(12 * var(--u))}

.mk-list{display:flex;flex-direction:column}
.mk-list .mk-row{padding:calc(9 * var(--u)) calc(2 * var(--u))}
.mk-st{display:inline-flex;align-items:center;flex:none;
  padding:calc(2 * var(--u)) calc(8 * var(--u));border-radius:980px;
  font-size:calc(10.5 * var(--u));font-weight:600;
  background:rgba(0,0,0,.06);color:#6e6e73}
.mk-st.ok{background:rgba(40,200,64,.18);color:#1a7a2b}
.mk-st.run{background:rgba(0,113,227,.12);color:#0060c4}
.mk-st.warn{background:rgba(255,159,10,.20);color:#8a5200}
.mk-st.bad{background:rgba(255,59,48,.14);color:#b3261e}

/* ── controls ────────────────────────────────────────────────────────────── */
.mk-sw{position:relative;flex:none;width:calc(38 * var(--u));height:calc(22 * var(--u));
  border-radius:980px;background:rgba(0,0,0,.16)}
.mk-sw::after{content:"";position:absolute;top:calc(2 * var(--u));left:calc(2 * var(--u));
  width:calc(18 * var(--u));height:calc(18 * var(--u));border-radius:50%;background:#fff;
  box-shadow:0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.25)}
.mk-sw.on{background:#0071e3}
.mk-sw.on::after{left:calc(18 * var(--u))}

.mk-seg{display:inline-flex;gap:calc(2 * var(--u));flex:none;padding:calc(2 * var(--u));
  border-radius:calc(7 * var(--u));background:rgba(0,0,0,.06)}
.mk-seg span{padding:calc(3 * var(--u)) calc(11 * var(--u));border-radius:calc(5.5 * var(--u));
  font-size:calc(12 * var(--u));color:#3c3c43;white-space:nowrap}
.mk-seg span.is-on{background:#fff;font-weight:600;
  box-shadow:0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,0,0,.14)}

.mk-slider{display:flex;align-items:center;gap:calc(10 * var(--u));flex:none;
  width:calc(var(--sw,160) * var(--u))}
.mk-slider i{position:relative;flex:1;height:calc(4 * var(--u));border-radius:980px;
  background:rgba(0,0,0,.13)}
.mk-slider i::before{content:"";position:absolute;top:0;bottom:0;left:0;
  width:var(--fill,40%);border-radius:980px;background:#0071e3}
.mk-slider i::after{content:"";position:absolute;top:50%;left:var(--fill,40%);
  width:calc(15 * var(--u));height:calc(15 * var(--u));
  margin:calc(-7.5 * var(--u)) 0 0 calc(-7.5 * var(--u));border-radius:50%;background:#fff;
  box-shadow:0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(0,0,0,.32)}
.mk-val{flex:none;min-width:calc(34 * var(--u));text-align:right;
  font-size:calc(12 * var(--u));color:#6e6e73}

.mk-picker{display:inline-flex;align-items:center;gap:calc(9 * var(--u));flex:none;
  padding:calc(4 * var(--u)) calc(9 * var(--u));border-radius:calc(6 * var(--u));
  background:#fff;border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.15);
  box-shadow:0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.05);
  font-size:calc(12.5 * var(--u));color:#1d1d1f;white-space:nowrap}
.mk-picker::after{content:"";width:calc(6 * var(--u));height:calc(6 * var(--u));flex:none;
  border-right:calc(1.4 * var(--u)) solid #6e6e73;
  border-bottom:calc(1.4 * var(--u)) solid #6e6e73;
  transform:translateY(calc(-2 * var(--u))) rotate(45deg)}

.mk-radio{position:relative;flex:none;width:calc(20 * var(--u));height:calc(20 * var(--u));
  border-radius:50%;background:#fff;
  border:calc(1.5 * var(--u)) solid rgba(0,0,0,.26)}
.mk-radio.on{background:#0071e3;border-color:#0071e3}
.mk-radio.on::after{content:"";position:absolute;left:calc(6 * var(--u));top:calc(3.6 * var(--u));
  width:calc(4.6 * var(--u));height:calc(8.6 * var(--u));
  border:solid #fff;border-width:0 calc(1.8 * var(--u)) calc(1.8 * var(--u)) 0;
  transform:rotate(43deg)}

.mk-field{display:flex;align-items:center;gap:calc(6 * var(--u));min-width:0;
  height:calc(24 * var(--u));padding:0 calc(8 * var(--u));
  border-radius:calc(6 * var(--u));background:#fff;
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.18);
  box-shadow:inset 0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.04);
  font-size:calc(12.5 * var(--u));color:#1d1d1f}
.mk-field.ph{color:#a1a1a6}
.mk-field.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:calc(.3 * var(--u))}
.mk-field.tall{height:auto;align-items:flex-start;
  padding:calc(6 * var(--u)) calc(8 * var(--u));line-height:1.5}
.mk-field.wide{width:100%}
.mk-cr{width:calc(1.5 * var(--u));height:calc(12 * var(--u));background:#0071e3;flex:none}

.mk-editor{padding:calc(10 * var(--u)) calc(12 * var(--u));border-radius:calc(8 * var(--u));
  background:#fff;border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.14);
  font:calc(12 * var(--u))/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:#3c3c43;white-space:pre-wrap}

/* A single key-cap, and the recorder chip that holds one or more of them. */
.mk-key{display:inline-flex;align-items:center;justify-content:center;
  min-width:calc(22 * var(--u));height:calc(20 * var(--u));padding:0 calc(6 * var(--u));
  border-radius:calc(5 * var(--u));background:#fff;
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.16);
  box-shadow:0 calc(1 * var(--u)) 0 rgba(0,0,0,.09);
  font-size:calc(11.5 * var(--u));font-weight:500;color:#2c2c30;white-space:nowrap}
.mk-caps{display:inline-flex;align-items:center;gap:calc(4 * var(--u));flex:none;
  min-height:calc(26 * var(--u));padding:calc(4 * var(--u)) calc(7 * var(--u));
  border-radius:calc(7 * var(--u));background:rgba(0,0,0,.04);
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.10)}
.mk-caps.add{border-style:dashed;color:#8a8a8f;font-size:calc(11.5 * var(--u));
  font-weight:500;gap:calc(4 * var(--u))}
.mk-caps.rec{background:rgba(0,113,227,.10);border-color:#0071e3;color:#6e6e73;
  font-size:calc(11.5 * var(--u));font-weight:500}
.mk-caps.rec::before{content:"";width:calc(6 * var(--u));height:calc(6 * var(--u));
  border-radius:50%;background:#ff3b30;flex:none}

/* One shortcut row in the Setup wizard / Shortcuts & Input: name + description
   on the left, the chip and its pencil / overflow buttons on the right. */
.mk-rec{display:flex;align-items:center;gap:calc(12 * var(--u));
  padding:calc(10 * var(--u)) calc(12 * var(--u));border-radius:calc(9 * var(--u));
  background:rgba(0,0,0,.03);
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.07)}
.mk-rec+.mk-rec{margin-top:calc(10 * var(--u))}
/* Picked, in a list you pick one row from (the overlay-style rows). */
.mk-rec.sel{border-color:#0071e3;box-shadow:inset 0 0 0 calc(1 * var(--u)) #0071e3}
.mk-icb{display:grid;place-items:center;flex:none;
  width:calc(26 * var(--u));height:calc(26 * var(--u));border-radius:50%;
  background:rgba(0,0,0,.06);color:#6e6e73;font-size:calc(12 * var(--u));line-height:1}
.mk-icb.plain{background:transparent}
.mk-icb .mk-i{width:calc(12 * var(--u));height:calc(12 * var(--u))}

.mk-pos{display:grid;grid-template-columns:repeat(3,calc(28 * var(--u)));
  grid-auto-rows:calc(21 * var(--u));gap:calc(4 * var(--u));flex:none}
.mk-pos i{border-radius:calc(4 * var(--u));background:rgba(0,0,0,.06);
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.09)}
.mk-pos i.on{background:#0071e3;border-color:#0071e3}

.mk-swatches{display:flex;gap:calc(10 * var(--u));flex:none}
.mk-swatch{width:calc(22 * var(--u));height:calc(22 * var(--u));border-radius:50%;
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.12)}
.mk-swatch.on{box-shadow:0 0 0 calc(2 * var(--u)) #fff,0 0 0 calc(4 * var(--u)) #0071e3}

.mk-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;
  gap:calc(6 * var(--u));height:calc(24 * var(--u));padding:0 calc(12 * var(--u));
  border-radius:calc(6 * var(--u));background:#fff;
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.16);
  box-shadow:0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(0,0,0,.05);
  font-size:calc(12.5 * var(--u));color:#1d1d1f;white-space:nowrap}
.mk-btn.pri{background:#0071e3;border-color:transparent;color:#fff;font-weight:500;
  box-shadow:0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0,113,227,.32)}
.mk-btn.lg{height:calc(28 * var(--u));min-width:calc(120 * var(--u));
  padding:0 calc(18 * var(--u));border-radius:calc(7 * var(--u))}
.mk-btn.off{opacity:.4}
.mk-btn.link{height:auto;padding:0;background:none;border:0;box-shadow:none;
  color:#6e6e73;font-size:calc(11 * var(--u))}

.mk-chip{display:inline-flex;align-items:center;gap:calc(5 * var(--u));flex:none;
  padding:calc(3 * var(--u)) calc(9 * var(--u));border-radius:980px;background:#fff;
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.14);
  font-size:calc(11.5 * var(--u));color:#3c3c43;white-space:nowrap}
.mk-chip.on{background:rgba(0,113,227,.10);border-color:transparent;color:#0060c4;
  font-weight:600}

/* ── states ──────────────────────────────────────────────────────────────── */
.mk-banner{display:flex;gap:calc(10 * var(--u));padding:calc(14 * var(--u));
  border-radius:calc(12 * var(--u));font-size:calc(12 * var(--u));line-height:1.5}
.mk-banner .mk-i{width:calc(14 * var(--u));height:calc(14 * var(--u));
  margin-top:calc(2 * var(--u))}
.mk-banner b{display:block;margin-bottom:calc(5 * var(--u));
  font-size:calc(14 * var(--u));font-weight:600}
.mk-banner .mk-row-c{margin-top:calc(10 * var(--u))}
.mk-banner.warn{background:rgba(255,159,10,.10);color:#7a4b00}
.mk-banner.warn b,.mk-banner.warn .mk-i{color:#b26a00}
.mk-banner.stop{background:rgba(255,59,48,.09);color:#8f2019}
.mk-banner.stop b,.mk-banner.stop .mk-i{color:#c0271d}

.mk-lock{display:grid;justify-items:center;gap:calc(10 * var(--u));text-align:center;
  padding:calc(30 * var(--u)) calc(24 * var(--u));border-radius:calc(12 * var(--u));
  background:rgba(0,0,0,.025);
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.09)}
.mk-lock .mk-i{width:calc(26 * var(--u));height:calc(26 * var(--u));color:#8a8a8f}
.mk-lock b{font-size:calc(15 * var(--u));font-weight:600}
.mk-lock span{max-width:calc(340 * var(--u));font-size:calc(12.5 * var(--u));
  line-height:1.5;color:#6e6e73}

/* A macOS alert: 260pt wide, app icon, bold message, informative text, and
   buttons — side by side for two, stacked full-width for three. */
.mk-alert{display:grid;justify-items:center;gap:calc(8 * var(--u));text-align:center;
  width:calc(var(--aw,260) * var(--u));margin:0 auto;
  padding:calc(18 * var(--u)) calc(18 * var(--u)) calc(14 * var(--u));
  border-radius:calc(12 * var(--u));background:rgba(247,247,249,.98);
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.10);
  box-shadow:0 calc(18 * var(--u)) calc(48 * var(--u)) rgba(0,0,0,.26)}
.mk-alert b{font-size:calc(13 * var(--u));font-weight:700;line-height:1.35}
.mk-alert p{margin:0;font-size:calc(11 * var(--u));line-height:1.45;color:#3c3c43}
.mk-alert .mk-btns{display:flex;justify-content:flex-end;gap:calc(8 * var(--u));
  width:100%;margin-top:calc(6 * var(--u))}
.mk-alert .mk-btns.col{flex-direction:column-reverse}
.mk-alert .mk-btns.col .mk-btn{width:100%}
.mk-appicon{display:grid;place-items:center;flex:none;
  width:calc(var(--ai,52) * var(--u));height:calc(var(--ai,52) * var(--u));
  border-radius:calc(var(--ai,52) * var(--u) * .225);color:#fff;
  background:linear-gradient(158deg,#3a3a3f 0%,#232327 42%,#141417 100%);
  box-shadow:0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.18)}
.mk-appicon .mk-i{width:52%;height:52%}
.mk-warnbadge{position:absolute;right:calc(-4 * var(--u));bottom:calc(-2 * var(--u));
  width:calc(22 * var(--u));height:calc(22 * var(--u));border-radius:50%;
  display:grid;place-items:center;background:#ff9f0a;color:#fff}

/* ── floating UI ─────────────────────────────────────────────────────────── */
/* The recording pill: 25pt tall, 20pt control circles (RecordingOverlay). */
.mk-pill{display:inline-flex;align-items:center;gap:calc(11 * var(--u));
  height:calc(25 * var(--u));padding:0 calc(12 * var(--u));border-radius:980px;
  background:rgba(28,28,32,.97);
  border:max(.5px,calc(1 * var(--u))) solid rgba(255,255,255,.14);
  box-shadow:0 calc(16 * var(--u)) calc(36 * var(--u)) rgba(0,0,0,.32);
  color:#c7c7cc;font-size:calc(12 * var(--u));white-space:nowrap}
/* Three states. .rec pulls the padding in because the ✕ / ✓ circles sit at the
   ends; .txn is spinner + label; .chip carries a persistent Update/Later pair. */
.mk-pill.rec{gap:calc(10 * var(--u));padding:0 calc(5 * var(--u))}
.mk-pill.txn{gap:calc(9 * var(--u))}
.mk-pill.chip{padding:0 calc(6 * var(--u)) 0 calc(13 * var(--u))}
.mk-circ{display:grid;place-items:center;flex:none;
  width:calc(20 * var(--u));height:calc(20 * var(--u));border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff}
.mk-circ .mk-i{width:calc(9 * var(--u));height:calc(9 * var(--u))}
.mk-pchip{display:inline-flex;align-items:center;flex:none;height:calc(16 * var(--u));
  padding:0 calc(9 * var(--u));border-radius:980px;background:rgba(255,255,255,.16);
  color:#fff;font-size:calc(10.5 * var(--u));font-weight:500}
.mk-pchip.pri{background:#0071e3}
.mk-spin{flex:none;width:calc(12 * var(--u));height:calc(12 * var(--u));border-radius:50%;
  border:calc(1.5 * var(--u)) solid rgba(255,255,255,.25);border-top-color:#fff;
  animation:mk-spin .9s linear infinite}
@keyframes mk-spin{to{transform:rotate(360deg)}}

/* The waveform, copied bar for bar from the landing page's .wave. */
.mk-wave{display:flex;align-items:center;gap:calc(3 * var(--u));height:calc(14 * var(--u))}
.mk-wave i{width:calc(3 * var(--u));border-radius:calc(2 * var(--u));background:#fff;
  animation:mk-bar 1.05s ease-in-out infinite}
.mk-wave i:nth-child(1){height:calc(4.5 * var(--u));animation-delay:0s}
.mk-wave i:nth-child(2){height:calc(9 * var(--u));animation-delay:.08s}
.mk-wave i:nth-child(3){height:calc(13.5 * var(--u));animation-delay:.16s}
.mk-wave i:nth-child(4){height:calc(7 * var(--u));animation-delay:.24s}
.mk-wave i:nth-child(5){height:calc(11 * var(--u));animation-delay:.32s}
.mk-wave i:nth-child(6){height:calc(5 * var(--u));animation-delay:.4s}
.mk-wave i:nth-child(7){height:calc(8.5 * var(--u));animation-delay:.48s}
@keyframes mk-bar{0%,100%{transform:scaleY(.42)}50%{transform:scaleY(1)}}

/* A little Mac screen, drawn to the proportions of the app's own overlay-style
   thumbnail (OverlayStylePreview: 110×56, 8pt menu bar, 26×8 notch). */
.mk-scr{position:relative;flex:none;overflow:hidden;
  width:calc(var(--sw,110) * var(--u));height:calc(var(--sh,56) * var(--u));
  border-radius:calc(6 * var(--u));background:#f4f4f6;
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.15)}
.mk-scr .mk-mb{position:absolute;left:0;right:0;top:0;height:calc(8 * var(--u));
  background:rgba(0,0,0,.10)}
.mk-scr .mk-tabs{position:absolute;left:calc(6 * var(--u));right:calc(6 * var(--u));
  top:calc(12 * var(--u));display:flex;gap:calc(3 * var(--u))}
.mk-scr .mk-tabs i{flex:1;height:calc(5 * var(--u));border-radius:calc(1.5 * var(--u));
  background:rgba(0,0,0,.18)}
.mk-notch{position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:calc(26 * var(--u));height:calc(8 * var(--u));background:#000;
  border-radius:0 0 calc(3 * var(--u)) calc(3 * var(--u))}
/* The minimalist band: the notch plus 26pt, exactly menu-bar tall. */
.mk-band{position:absolute;left:50%;top:0;transform:translateX(-50%);
  display:flex;align-items:center;padding:0 calc(4 * var(--u));
  width:calc(52 * var(--u));height:calc(8 * var(--u));background:#000;
  border-radius:0 0 calc(3 * var(--u)) calc(3 * var(--u))}
/* The floating pill, well clear of the menu bar. */
.mk-fpill{position:absolute;left:50%;top:calc(27 * var(--u));transform:translateX(-50%);
  display:grid;place-items:center;
  width:calc(48 * var(--u));height:calc(15 * var(--u));border-radius:980px;background:#000}
.mk-mwave{display:flex;align-items:center;gap:calc(1.5 * var(--u))}
.mk-mwave i{width:calc(1.5 * var(--u));border-radius:980px;background:rgba(255,255,255,.8)}
.mk-mwave i:nth-child(1){height:calc(2.7 * var(--u))}
.mk-mwave i:nth-child(2){height:calc(5.4 * var(--u))}
.mk-mwave i:nth-child(3){height:calc(3.6 * var(--u))}
.mk-mwave i:nth-child(4){height:calc(6 * var(--u))}
.mk-mwave i:nth-child(5){height:calc(3.3 * var(--u))}

/* The copy card (380pt wide) and the selection assistant's bubble and panel. */
.mk-copy{width:calc(380 * var(--u));max-width:100%;padding:calc(14 * var(--u));
  border-radius:calc(16 * var(--u));background:rgba(28,28,32,.94);
  border:max(.5px,calc(1 * var(--u))) solid rgba(255,255,255,.12);
  box-shadow:0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(0,0,0,.34);
  color:#f5f5f7;font-size:calc(12 * var(--u));line-height:1.5}
.mk-copy .mk-copy-h{display:flex;align-items:center;gap:calc(8 * var(--u));
  font-size:calc(12.5 * var(--u));font-weight:600;color:#fff}
.mk-copy .mk-copy-t{margin-top:calc(10 * var(--u));padding:calc(10 * var(--u));
  border-radius:calc(10 * var(--u));background:rgba(255,255,255,.07);color:#e5e5ea}
.mk-copy .mk-row-c{margin-top:calc(12 * var(--u));justify-content:flex-end;display:flex}

.mk-bubble{display:grid;place-items:center;flex:none;
  width:calc(28 * var(--u));height:calc(28 * var(--u));border-radius:50%;
  background:#0071e3;color:#fff;
  box-shadow:0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.28)}
.mk-bubble .mk-i{width:calc(13 * var(--u));height:calc(13 * var(--u))}

.mk-panel{width:calc(380 * var(--u));max-width:100%;padding:calc(12 * var(--u));
  border-radius:calc(18 * var(--u));background:rgba(0,0,0,.92);
  border:max(.5px,calc(1 * var(--u))) solid rgba(255,255,255,.10);
  box-shadow:0 calc(22 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.4);
  color:#e5e5ea;font-size:calc(12 * var(--u))}
.mk-tabs-cap{display:inline-flex;gap:calc(2 * var(--u));padding:calc(2 * var(--u));
  border-radius:980px;background:rgba(255,255,255,.09)}
.mk-tabs-cap span{padding:calc(3 * var(--u)) calc(12 * var(--u));border-radius:980px;
  font-size:calc(11.5 * var(--u));color:#c7c7cc}
.mk-tabs-cap span.is-on{background:rgba(255,255,255,.18);color:#fff;font-weight:600}
.mk-panel .mk-opt{display:flex;align-items:center;gap:calc(9 * var(--u));
  padding:calc(7 * var(--u)) calc(8 * var(--u));border-radius:calc(9 * var(--u));
  color:#e5e5ea}
.mk-panel .mk-opt.is-on{background:rgba(255,255,255,.10)}
.mk-panel .mk-opt .mk-i{width:calc(13 * var(--u));height:calc(13 * var(--u));color:#9b9ba0}

/* The "Record this meeting" card and the live meeting pill. */
.mk-meet{width:calc(340 * var(--u));max-width:100%;padding:calc(14 * var(--u));
  border-radius:calc(16 * var(--u));background:rgba(28,28,32,.96);
  border:max(.5px,calc(1 * var(--u))) solid rgba(255,255,255,.12);
  box-shadow:0 calc(20 * var(--u)) calc(44 * var(--u)) rgba(0,0,0,.34);
  color:#e5e5ea;font-size:calc(12 * var(--u));line-height:1.45}
.mk-meet b{display:block;color:#fff;font-size:calc(13 * var(--u));font-weight:600}
.mk-split{display:flex;align-items:stretch;margin-top:calc(12 * var(--u));
  border-radius:980px;overflow:hidden;background:#0071e3;color:#fff;
  font-size:calc(11.5 * var(--u));font-weight:500}
.mk-split>span{padding:calc(6 * var(--u)) calc(14 * var(--u))}
.mk-split>span+span{border-left:max(.5px,calc(1 * var(--u))) solid rgba(255,255,255,.28);
  display:grid;place-items:center;padding:calc(6 * var(--u)) calc(9 * var(--u))}
.mk-meet-pill{display:inline-flex;align-items:center;gap:calc(12 * var(--u));
  height:calc(30 * var(--u));padding:0 calc(6 * var(--u)) 0 calc(14 * var(--u));
  border-radius:980px;background:rgba(28,28,32,.97);
  border:max(.5px,calc(1 * var(--u))) solid rgba(255,255,255,.14);
  box-shadow:0 calc(16 * var(--u)) calc(36 * var(--u)) rgba(0,0,0,.32);
  color:#e5e5ea;font-size:calc(12 * var(--u));white-space:nowrap}
.mk-reddot{width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%;
  background:#ff3b30;flex:none}

/* The menu-bar menu (AppDelegate's AppKit NSMenu). */
.mk-menu{width:calc(var(--mw,236) * var(--u));padding:calc(5 * var(--u));
  border-radius:calc(10 * var(--u));background:rgba(250,250,252,.98);
  border:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.12);
  box-shadow:0 calc(12 * var(--u)) calc(34 * var(--u)) rgba(0,0,0,.24);
  font-size:calc(13 * var(--u));color:#1d1d1f}
.mk-menu i.sep{display:block;height:max(.5px,calc(1 * var(--u)));margin:calc(5 * var(--u)) calc(9 * var(--u));
  background:rgba(0,0,0,.10)}
.mk-mi{display:flex;align-items:center;gap:calc(8 * var(--u));
  padding:calc(4 * var(--u)) calc(9 * var(--u));border-radius:calc(5 * var(--u))}
.mk-mi .mk-i{width:calc(12 * var(--u));height:calc(12 * var(--u));color:#6e6e73}
.mk-mi span{margin-left:auto;color:#8a8a8f;font-size:calc(12 * var(--u))}
.mk-mi.dim{color:#8a8a8f}
.mk-mi.is-on{background:#0071e3;color:#fff}
.mk-mi.is-on .mk-i,.mk-mi.is-on span{color:#fff}

/* ── the wizard ──────────────────────────────────────────────────────────── */
.mk-dots{position:absolute;left:50%;transform:translateX(-50%);
  display:flex;gap:calc(8 * var(--u))}
.mk-dots i{width:calc(8 * var(--u));height:calc(8 * var(--u));border-radius:50%;
  background:rgba(0,0,0,.24)}
.mk-dots i.on{background:#0071e3}
.mk-wiz-foot{position:relative;display:flex;align-items:center;gap:calc(10 * var(--u));
  padding:calc(20 * var(--u));background:#f2f2f4;
  border-top:max(.5px,calc(1 * var(--u))) solid rgba(0,0,0,.10)}
.mk-fill{flex:1}

/* ── icon glyphs ─────────────────────────────────────────────────────────── */
/* Used as <svg class="mk-i"><use href="#i-mic"/></svg>. The <symbol> block is
   pasted once per page — see docs/SITE-DOCS.md → "Kit usage". */
svg.defs{position:absolute;width:0;height:0;overflow:hidden}
.mk-i{display:block;flex:none;width:calc(14 * var(--u));height:calc(14 * var(--u));
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mk-i.fill{fill:currentColor;stroke:none}


/* ══════════════════════════════════════════════════════════════════════════
   Reduced motion — nothing in the docs moves if the reader says so.
   ══════════════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .docs *,.docs-nextprev *,figure.mk *,.toc-m *{
    animation:none!important;transition:none!important}
  /* Frozen mid-level so a still waveform still reads as a waveform. */
  .mk-wave i{transform:scaleY(.72)}
}