/* The Mac and Download pages. Builds on styles.css. */

.button.ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.button.ghost:hover { opacity: 1; background: rgb(118 118 128 / .1); }
.button[aria-disabled="true"] { cursor: default; opacity: .6; }
.button[aria-disabled="true"]:hover { opacity: .6; }
.eyebrow { color: var(--ink-2); font-size: .9375rem; font-weight: 500; margin-bottom: 14px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: 0; vertical-align: middle; background: rgb(118 118 128 / .14); color: var(--ink-2); }
.badge.live { background: color-mix(in srgb, #2fb760 18%, transparent); color: light-dark(#17803e, #5fd38a); }
.badge.spec { background: color-mix(in srgb, #e3a008 20%, transparent); color: light-dark(#8a5d00, #f2c14e); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.section { max-width: var(--page); margin-inline: auto; padding: clamp(80px, 11vw, 144px) var(--gutter) 0; }
.section > h2, .split h2 { font-size: clamp(1.875rem, 3.6vw, 3rem); letter-spacing: -.028em; line-height: 1.08; max-width: 20ch; }
.section > .sub { margin-top: 14px; color: var(--ink-2); max-width: 56ch; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.split p { color: var(--ink-2); margin-top: 14px; max-width: 46ch; }
.points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.points li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink-2); }
.points li::before { content: ""; width: 8px; height: 8px; margin: 8px 0 0 6px; border-radius: 50%; background: var(--ink); opacity: .7; }
.points b { color: var(--ink); font-weight: 600; }

/* ---------- The window model ----------
   One unit (--u) is one point of a 1280 × 800 window, so the sizes below are the app's own
   (Mac/Sources/Views). Each calc(N * var(--u)) is N points. */
.mw {
  --tint: #5856d6;
  --win-base: #e7e6e4; --win-mix: 6%;
  --ink: rgb(0 0 0 / .85); --ink-2: rgb(0 0 0 / .5); --ink-3: rgb(0 0 0 / .26);
  --fill: rgb(0 0 0 / .06); --fill-2: rgb(0 0 0 / .1); --selected: rgb(255 255 255 / .88);
  --panel: #fbfbfb; --edge: rgb(0 0 0 / .1); --card: #fff; --agent: #30b0c7; --live: #f5b60b;
  position: relative; container-type: inline-size; aspect-ratio: 1280 / 800; width: 100%;
  border-radius: 1.25% / 2%; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, rgb(255 255 255 / .35), transparent 30%), color-mix(in srgb, var(--tint) var(--win-mix), var(--win-base));
  color: var(--ink);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .16), 0 1px 0 rgb(255 255 255 / .5) inset, var(--shadow);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  line-height: 1.2; letter-spacing: -.005em;
  transition: background .5s ease;
  user-select: none; -webkit-user-select: none;
}
@media (prefers-color-scheme: dark) {
  .mw {
    --tint: #5e5ce6; --win-base: #2a2a2a; --win-mix: 10%;
    --ink: rgb(255 255 255 / .86); --ink-2: rgb(255 255 255 / .52); --ink-3: rgb(255 255 255 / .25);
    --fill: rgb(255 255 255 / .07); --fill-2: rgb(255 255 255 / .12); --selected: rgb(255 255 255 / .14);
    --panel: #2b2b2b; --edge: rgb(255 255 255 / .1); --card: #1e1e1e; --agent: #40c8e0;
    background: linear-gradient(180deg, rgb(255 255 255 / .04), transparent 30%), color-mix(in srgb, var(--tint) var(--win-mix), var(--win-base));
    box-shadow: 0 0 0 1px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .12) inset, var(--shadow);
  }
}
.mw[data-space="work"] { --tint: #ff9500; }
.mw[data-space="agent"] { --tint: var(--agent); --win-mix: 9%; }
.mw > * { --u: calc(100cqw / 1280); font-size: calc(13 * var(--u)); }
.mw i, .mw b, .mw u, .mw em, .mw code { font-style: normal; text-decoration: none; }
.mw svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mw svg .fill { fill: currentColor; stroke: none; }

/* Which space and page are showing. */
.mw .sp-p, .mw .sp-w, .mw .sp-a { display: none; }
.mw[data-space="personal"] .sp-p, .mw[data-space="work"] .sp-w, .mw[data-space="agent"] .sp-a { display: flex; }
.mw [data-p] { display: none; }
.mw .mw-tab[data-p] { display: flex; }
.mw[data-page="travel"] [data-p="travel"]:not(.mw-tab), .mw[data-page="docs"] [data-p="docs"]:not(.mw-tab),
.mw[data-page="supper"] [data-p="supper"]:not(.mw-tab), .mw[data-page="library"] [data-p="library"]:not(.mw-tab) { display: block; }
.mw[data-page="travel"] .mw-tab[data-p="travel"], .mw[data-page="docs"] .mw-tab[data-p="docs"],
.mw[data-page="supper"] .mw-tab[data-p="supper"], .mw[data-page="library"] .mw-tab[data-p="library"] {
  background: var(--selected); box-shadow: 0 calc(1 * var(--u)) calc(1.5 * var(--u)) rgb(0 0 0 / .08);
}

/* Sidebar: 260pt, spacing 10, rows padded 10. */
.mw-side { position: absolute; left: 0; top: 0; bottom: 0; width: calc(260 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); transition: transform .3s cubic-bezier(.25, .1, .25, 1), opacity .3s; }
.mw[data-scene="focus"] .mw-side { transform: translateX(-100%); opacity: 0; }
.mw-top { position: relative; display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(28 * var(--u)); margin-top: calc(7 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(84 * var(--u)); }
.mw-lights { position: absolute; left: calc(14 * var(--u)); top: calc(8 * var(--u)); display: flex; gap: calc(8 * var(--u)); }
.mw-lights i { display: block; width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgb(0 0 0 / .12); }
.mw-lights i:nth-child(1) { background: #ff5f57; } .mw-lights i:nth-child(2) { background: #febc2e; } .mw-lights i:nth-child(3) { background: #28c840; }
.mw-ib { display: grid; place-items: center; width: calc(28 * var(--u)); height: calc(26 * var(--u)); color: var(--ink-2); }
.mw-ib svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); }
.mw-ib.dim { color: var(--ink-3); }
.mw-ib.end { margin-left: auto; }
.mw-addr { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(32 * var(--u)); margin: 0 calc(10 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(10 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--fill); }
.mw-lock { width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: var(--ink-2); display: grid; }
.mw-host { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.mw-exts { display: flex; gap: calc(2 * var(--u)); }
/* An extension pinned in the address pill: 1Password lands here once it's added. */
.mw-exts img { display: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin-right: calc(3 * var(--u)); }
.mw[data-scene="extensions"] .mw-exts img { display: block; animation: popIn .45s cubic-bezier(.3, 1.5, .5, 1) 2.55s both; }
@keyframes popIn { from { opacity: 0; transform: scale(.2); } }
.mw-favs { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(6 * var(--u)); margin: 0 calc(10 * var(--u)); }
.mw-favs > span { display: grid; place-items: center; height: calc(42 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--fill); }
.mw-favs .fav { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.mw-list { flex-direction: column; gap: calc(2 * var(--u)); padding: 0 calc(10 * var(--u)); }
.mw-spacehead { display: flex; align-items: center; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); color: var(--ink-2); font-weight: 700; }
.mw-spacehead svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.mw .mw-tab { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(34 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(9 * var(--u)); white-space: nowrap; overflow: hidden; transition: background .2s; }
.mw-tab > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mw-today { height: 1px; margin: calc(10 * var(--u)) calc(8 * var(--u)); background: var(--fill-2); }
.mw-newtab { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(32 * var(--u)); padding: 0 calc(8 * var(--u)); color: var(--ink-2); }
.mw-newtab svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin: 0 calc(1 * var(--u)); }
.mw-badge { display: none; min-width: calc(18 * var(--u)); padding: calc(1 * var(--u)) calc(5 * var(--u)); border-radius: calc(9 * var(--u)); background: #ff3b30; color: #fff; font-size: calc(10 * var(--u)); font-weight: 700; text-align: center; }
.mw[data-lit="badges"] .mw-badge { display: block; }
/* Space switch: rows slide in from the new space's side, 35ms apart, on the app's spring. */
.mw-list > * { animation: cascade .42s cubic-bezier(.2, .9, .3, 1.05) both; }
.mw-list > :nth-child(2) { animation-delay: 35ms; } .mw-list > :nth-child(3) { animation-delay: 70ms; } .mw-list > :nth-child(4) { animation-delay: 105ms; }
.mw-list > :nth-child(5) { animation-delay: 140ms; } .mw-list > :nth-child(6) { animation-delay: 175ms; } .mw-list > :nth-child(7) { animation-delay: 210ms; }
@keyframes cascade { from { opacity: 0; transform: translateX(calc(120 * var(--u))); } }
.mw-sect { display: none; flex-direction: column; gap: calc(2 * var(--u)); margin: auto calc(10 * var(--u)) 0; }
.mw[data-scene="work"] .mw-sect { display: flex; }
.mw-sect-h { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(8 * var(--u)); color: var(--ink-2); font-size: calc(10 * var(--u)); font-weight: 600; letter-spacing: .06em; }
.mw-sect-h svg { width: calc(11 * var(--u)); height: calc(11 * var(--u)); }
.mw-sect-h svg:last-child { margin-left: auto; width: calc(10 * var(--u)); }
.mw-sect-r { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: calc(8 * var(--u)); }
.mw-sect-r i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); margin: 0 calc(4.5 * var(--u)); border-radius: 50%; background: #34c759; box-shadow: 0 0 0 calc(3 * var(--u)) rgb(52 199 89 / .18); }
.mw-sect-r.off i { background: var(--ink-3); box-shadow: none; }
.mw-sect-r.off span { color: var(--ink-2); }
.mw-sect-r span { flex: 1; }
.mw-sect-r em { color: var(--ink-2); font-size: calc(11 * var(--u)); font-variant-numeric: tabular-nums; }
.mw-bottom { display: flex; align-items: center; justify-content: space-between; height: calc(30 * var(--u)); margin: auto calc(10 * var(--u)) calc(8 * var(--u)); }
.mw[data-scene="work"] .mw-bottom { margin-top: 0; }
.mw-dots { display: flex; gap: calc(2 * var(--u)); }
.mw-dots i { display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: var(--ink-3); }
.mw-dots svg { width: calc(6 * var(--u)); height: calc(6 * var(--u)); }
.mw-dots svg * { fill: currentColor; stroke: none; }
.mw-dots i svg { clip-path: circle(50%); }
.mw[data-space="personal"] .d-p, .mw[data-space="work"] .d-w, .mw[data-space="agent"] .d-a { color: var(--ink); }
.mw[data-space="personal"] .d-p svg, .mw[data-space="work"] .d-w svg, .mw[data-space="agent"] .d-a svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); clip-path: none; }
.mw .d-a { display: none; }
.mw[data-space="agent"] .d-a { display: grid; }

/* Favicons, invented. */
.fav { display: grid; place-items: center; flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(4 * var(--u)); font-weight: 700; font-size: calc(10 * var(--u)); color: #fff; line-height: 1; overflow: hidden; }
.f-ws { background: #f2e7d3; color: #7a4a2b; font-family: ui-serif, "New York", Georgia, serif; font-size: calc(11 * var(--u)); }
.f-kitchen { background: radial-gradient(circle at 50% 58%, #e5482f 0 40%, transparent 41%), radial-gradient(circle at 50% 22%, #3f8f3a 0 16%, transparent 17%), #fff3ea; }
.f-rail { background: linear-gradient(transparent 44%, #fff 44% 56%, transparent 56%), #1f3c88; }
.f-nw { background: #2f5d50; }
.f-supper { background: #f6f3ec; color: #1c1a17; font-family: ui-serif, "New York", Georgia, serif; font-size: calc(12 * var(--u)); box-shadow: inset 0 0 0 calc(.5 * var(--u)) rgb(0 0 0 / .1); }
.f-books { background: linear-gradient(90deg, #5e5ce6 0 30%, transparent 30% 36%, #ff9f0a 36% 64%, transparent 64% 70%, #30b0c7 70%) center / 70% 70% no-repeat; }
.f-tern { background: linear-gradient(135deg, transparent 52%, #fff 52% 60%, transparent 60%), linear-gradient(45deg, transparent 52%, #fff 52% 60%, transparent 60%), #0f766e; }
.f-pine { background: linear-gradient(transparent 30%, #6b5310 30% 38%, transparent 38% 52%, #6b5310 52% 60%, transparent 60%) center / 60% 100% no-repeat, #f5c542; }
.f-forge { background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 13%), radial-gradient(circle at 35% 72%, #fff 0 12%, transparent 13%), radial-gradient(circle at 68% 45%, #fff 0 12%, transparent 13%), #24292f; }
.f-post { background: linear-gradient(160deg, transparent 50%, rgb(255 255 255 / .9) 50% 58%, transparent 58%), linear-gradient(20deg, transparent 50%, rgb(255 255 255 / .9) 50% 58%, transparent 58%), #3478f6; }

/* Page: a card inset 6pt, 9pt corners. */
.mw-page {
  position: absolute; top: calc(6 * var(--u)); bottom: calc(6 * var(--u)); left: calc(266 * var(--u)); right: calc(6 * var(--u));
  border-radius: calc(9 * var(--u)); overflow: hidden; background: #fff;
  box-shadow: 0 0 0 calc(.5 * var(--u)) rgb(0 0 0 / .12), 0 calc(1 * var(--u)) calc(3 * var(--u)) rgb(0 0 0 / .06);
  transition: left .3s cubic-bezier(.25, .1, .25, 1), right .3s cubic-bezier(.25, .1, .25, 1), box-shadow .3s;
}
.mw[data-scene="focus"] .mw-page { left: calc(6 * var(--u)); }
.mw[data-scene="notes"] .mw-page, .mw[data-scene="agent"] .mw-page { right: calc(332 * var(--u)); }
.mw-site { position: absolute; inset: 0; }
.mw-site .site { position: absolute; inset: 0; overflow: hidden; color: #1d1d1f; animation: pageIn .35s ease both; }
@keyframes pageIn { from { opacity: 0; } }
.mw[data-scene="command"] .mw-page::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / .04); }
/* Panel: 320pt, its header 38pt. Notes and Agents as the app draws them (Views/NotesPanel.swift,
   Views/RightPanel.swift): white cards with a hairline, yellow pins, the agent's yellow. */
.mw-panel { position: absolute; top: calc(6 * var(--u)); bottom: calc(6 * var(--u)); right: calc(6 * var(--u)); width: calc(320 * var(--u)); border-radius: calc(9 * var(--u)); background: var(--panel); box-shadow: 0 0 0 calc(.5 * var(--u)) var(--edge); overflow: hidden; transform: translateX(calc(100% + calc(10 * var(--u)))); transition: transform .3s cubic-bezier(.25, .1, .25, 1); }
.mw[data-scene="notes"] .mw-panel, .mw[data-scene="agent"] .mw-panel { transform: none; }
.mw-panel-h { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(6 * var(--u)) 0 calc(12 * var(--u)); }
.mw-panel-h b { display: none; font-weight: 600; }
.mw[data-scene="notes"] .t-notes, .mw[data-scene="agent"] .t-agents { display: block; }
.mw-rail { display: flex; gap: 0; margin-left: auto; padding-right: calc(6 * var(--u)); border-right: calc(.5 * var(--u)) solid var(--edge); }
.mw-rail i { display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(24 * var(--u)); border-radius: calc(6 * var(--u)); color: var(--ink-2); }
.mw-rail svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.mw[data-scene="notes"] .r-notes, .mw[data-scene="agent"] .r-agents { background: var(--fill); color: var(--ink); }
.mw-pane { display: none; flex-direction: column; gap: calc(10 * var(--u)); padding: 0 calc(10 * var(--u)) calc(10 * var(--u)); }
.mw[data-scene="notes"] .mw-pane.notes, .mw[data-scene="agent"] .mw-pane.agents { display: flex; }
.mw-pane.agents { height: calc(100% - 38 * var(--u)); }
.mw-more { display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); color: var(--ink-2); }
.mw-more svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

/* Notes: the comment tool and This Page / This Site, then the cards. */
.mw-ntools { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(2 * var(--u)) 0 calc(0 * var(--u)); }
.mw-comment { display: flex; align-items: center; gap: calc(5 * var(--u)); height: calc(24 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(99 * var(--u)); background: var(--fill); font-size: calc(12 * var(--u)); font-weight: 500; }
.mw-comment svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.mw-comment b { font-weight: 500; }
.mw-comment .c-on { display: none; }
.mw-scope { display: flex; margin-left: auto; padding: calc(2 * var(--u)); border-radius: calc(99 * var(--u)); background: var(--fill); box-shadow: inset 0 0 0 calc(.5 * var(--u)) var(--edge); }
.mw-scope b { height: calc(22 * var(--u)); line-height: calc(22 * var(--u)); padding: 0 calc(9 * var(--u)); border-radius: calc(99 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 500; color: var(--ink-2); }
.mw-scope b.on { background: var(--card); color: var(--ink); font-weight: 600; box-shadow: 0 calc(.5 * var(--u)) calc(1.5 * var(--u)) rgb(0 0 0 / .12); }
.mw-note { display: flex; flex-direction: column; gap: calc(7 * var(--u)); padding: calc(12 * var(--u)) calc(13 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--card); box-shadow: 0 0 0 calc(.5 * var(--u)) var(--edge), 0 calc(1 * var(--u)) calc(3 * var(--u)) rgb(0 0 0 / .05); font-size: calc(13 * var(--u)); line-height: 1.38; }
.mw-note .who { display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(11 * var(--u)); }
.mw-note .who b { display: flex; align-items: center; gap: calc(4 * var(--u)); font-weight: 600; }
.mw-note .who svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.mw-note .who em { color: var(--ink-3); font-size: calc(10 * var(--u)); }
.mw-note .pin, .n-pin { display: grid; place-items: center; background: var(--live); color: #1d1600; font-weight: 600; font-variant-numeric: tabular-nums; }
.mw-note .pin { width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u)); font-size: calc(10 * var(--u)); }
.mw-note .quote, .mw-note .sel { color: var(--ink-2); font-size: calc(11 * var(--u)); }
.mw-note .quote { padding-left: calc(8 * var(--u)); border-left: calc(2 * var(--u)) solid color-mix(in srgb, var(--live) 80%, transparent); }
.mw-note .sel { display: flex; align-items: center; gap: calc(5 * var(--u)); }
.mw-note .sel svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.mw-note .reply { display: flex; flex-direction: column; gap: calc(4 * var(--u)); margin-top: calc(3 * var(--u)); padding-top: calc(7 * var(--u)); border-top: calc(.5 * var(--u)) solid var(--edge); }
/* Your new note is picked, so it wears the pin's yellow. */
.mw-note.n3 { box-shadow: 0 0 0 calc(1.5 * var(--u)) color-mix(in srgb, var(--live) 80%, transparent), 0 calc(1 * var(--u)) calc(6 * var(--u)) rgb(0 0 0 / .1); }
.mw-note .typed { clip-path: inset(0 100% 0 0); }

/* The tab's yellow count of open notes. */
.mw-pins { padding: 0 calc(5 * var(--u)); min-width: calc(16 * var(--u)); height: calc(16 * var(--u)); line-height: calc(16 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--live); color: #1d1600; font-size: calc(10 * var(--u)); font-weight: 600; text-align: center; }

/* Agents: the status, Stop, and the run as it happens, one sentence per step. */
.mw-astat { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(4 * var(--u)) calc(2 * var(--u)) 0; }
.mw-astat .dot { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--live); animation: pulse 1.4s ease-in-out infinite; }
.mw-astat > span:not(.mw-stop) { display: flex; flex-direction: column; gap: calc(2 * var(--u)); margin-right: auto; }
.mw-astat b { font-size: calc(13 * var(--u)); font-weight: 600; }
.mw-astat em { display: flex; align-items: center; gap: calc(4 * var(--u)); color: var(--ink-2); font-size: calc(11 * var(--u)); }
.mw-astat em svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }
.mw-stop { height: calc(24 * var(--u)); line-height: calc(24 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(99 * var(--u)); background: linear-gradient(180deg, #ff5a4f, #f2362b); color: #fff; font-size: calc(12 * var(--u)); font-weight: 600; box-shadow: inset 0 calc(.5 * var(--u)) 0 rgb(255 255 255 / .35), 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / .15); }
.mw-acap { margin-top: calc(4 * var(--u)); color: var(--ink-2); font-size: calc(11 * var(--u)); font-weight: 600; }
.mw-run { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--card); box-shadow: 0 0 0 calc(.5 * var(--u)) var(--edge); }
.mw-run-h { display: flex; align-items: center; gap: calc(7 * var(--u)); margin-bottom: calc(2 * var(--u)); }
.mw-run-h > svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.mw-run-h b { font-size: calc(12 * var(--u)); font-weight: 600; }
.mw-run-h em { color: var(--ink-3); font-size: calc(10 * var(--u)); margin-right: auto; }
.mw-run-h i { width: calc(11 * var(--u)); height: calc(11 * var(--u)); color: var(--ink-3); display: grid; }
.mw-step { display: none; align-items: baseline; gap: calc(8 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1.35; }
.mw-step.on { display: flex; animation: rise .3s cubic-bezier(.22, 1, .36, 1) both; }
.mw-step i { flex: none; width: calc(12 * var(--u)); height: calc(10 * var(--u)); color: #34c759; display: grid; }
.mw-step i svg { stroke-width: 3.2; }
@keyframes rise { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } to { opacity: 1; transform: none; } }
@keyframes pulse { 50% { opacity: .45; } }

/* Driving: at the top of the sidebar while an agent acts. Who, what, and Stop. */
.mw-drive { display: none; align-items: center; gap: calc(8 * var(--u)); margin: 0 calc(10 * var(--u)); padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(11 * var(--u)); background: color-mix(in srgb, var(--live) 9%, transparent); box-shadow: inset 0 0 0 calc(1 * var(--u)) color-mix(in srgb, var(--live) 30%, transparent); }
.mw[data-scene="agent"] .mw-drive { display: flex; animation: driveIn .4s cubic-bezier(.2, .9, .3, 1.05) both; }
@keyframes driveIn { from { opacity: 0; transform: translateY(calc(-8 * var(--u))); } }
.mw-drive-ic { position: relative; flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); display: grid; }
.mw-drive-ic > i { position: absolute; right: calc(-2 * var(--u)); bottom: calc(-2 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--live); box-shadow: 0 0 0 calc(1 * var(--u)) #fff; animation: pulse 1.4s ease-in-out infinite; }
.mw-drive > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mw-drive b { font-size: calc(12 * var(--u)); font-weight: 600; }
.mw-drive-t { display: grid; font-size: calc(11 * var(--u)); color: var(--ink-2); }
.mw-drive-t em { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .25s; }
.mw-drive-t em.on { opacity: 1; }
.mw-drive-stop { flex: none; display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #ff3b30; color: #fff; }
.mw-drive-stop svg { width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

/* ---------- Supper, with notes pinned and an agent at work ----------
   The page is 682 × 788pt with the panel open, so the captures' CSS pixels are points (--u). */
.mw .s-sup { background: #f6f3ec; }
.s-sup .shot { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.mw[data-shot="0"] .s0, .mw[data-shot="1"] .s1, .mw[data-shot="2"] .s2, .mw[data-shot="3"] .s3, .mw[data-shot="4"] .s4 { opacity: 1; }
.s-sup > i, .s-sup > span { position: absolute; display: none; }
.n-pin { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(10 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(2 * var(--u)); font-size: calc(11 * var(--u)); box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) rgb(0 0 0 / .25); }
.n-pin.p1 { left: calc(389 * var(--u)); top: calc(76 * var(--u)); }
.n-pin.p2 { left: calc(389 * var(--u)); top: calc(282 * var(--u)); }
.n-pin.p3 { left: calc(389 * var(--u)); top: calc(609 * var(--u)); }
.n-hl { left: calc(391 * var(--u)); top: calc(99 * var(--u)); width: calc(108 * var(--u)); height: calc(25 * var(--u)); border-radius: calc(3 * var(--u)); background: rgb(250 204 21 / .32); mix-blend-mode: multiply; }
.n-box { border: calc(1.5 * var(--u)) dashed rgb(245 182 11 / .9); border-radius: calc(6 * var(--u)); }
.n-box.b2 { left: calc(389 * var(--u)); top: calc(300 * var(--u)); width: calc(250 * var(--u)); height: calc(28 * var(--u)); }
.n-box.b3 { left: calc(389 * var(--u)); top: calc(627 * var(--u)); width: calc(250 * var(--u)); height: calc(51 * var(--u)); }
.mw[data-scene="notes"] .s-sup > :is(.n-hl, .n-box) { display: block; }
.mw[data-scene="notes"] .s-sup > .n-pin { display: grid; }
.mw[data-scene="notes"] :is(.p1, .n-hl) { animation: popIn .4s cubic-bezier(.3, 1.5, .5, 1) .25s both; }
.mw[data-scene="notes"] :is(.p2, .b2) { animation: popIn .4s cubic-bezier(.3, 1.5, .5, 1) .4s both; }
.mw[data-scene="notes"] .b3 { animation: fadeIn .2s ease 1.9s both, picked .01s 2.7s forwards; }
.mw[data-scene="notes"] .p3 { animation: popIn .4s cubic-bezier(.3, 1.5, .5, 1) 2.7s both; }
.mw[data-scene="notes"] .mw-note { animation: rise .35s cubic-bezier(.22, 1, .36, 1) both; }
.mw[data-scene="notes"] .n1 { animation-delay: .25s; }
.mw[data-scene="notes"] .n2 { animation-delay: .4s; }
.mw[data-scene="notes"] .n3 { animation-delay: 2.8s; }
.mw[data-scene="notes"] .n3 .typed { animation: type 1.2s steps(24, end) 3.2s forwards; }
/* The comment tool turns yellow while you pick the Place order button. */
.mw[data-scene="notes"] .mw-comment { animation: picking 1.1s linear 1.6s; }
.mw[data-scene="notes"] .mw-comment .c-off { animation: hideWhile 1.1s linear 1.6s; }
.mw[data-scene="notes"] .mw-comment .c-on { display: inline; width: 0; overflow: hidden; animation: showWhile 1.1s linear 1.6s; }
@keyframes picking { 0%, 100% { background: var(--live); color: #1d1600; } }
@keyframes hideWhile { 0%, 100% { display: none; } }
@keyframes showWhile { 0%, 100% { width: auto; } }
@keyframes picked { to { border-style: solid; background: rgb(250 204 21 / .1); } }
@keyframes fadeIn { from { opacity: 0; } }

/* The agent: a yellow pointer that glides to what it's about to use, a ring on a field, a ripple
   on a click, and a caption at the top of the page (Agents/AgentsUI.swift). */
.a-cursor { left: calc(620 * var(--u)); top: calc(40 * var(--u)); z-index: 3; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin: calc(-4 * var(--u)) 0 0 calc(-4 * var(--u)); opacity: 0;
  filter: drop-shadow(0 calc(1 * var(--u)) calc(1.5 * var(--u)) rgb(0 0 0 / .35)) drop-shadow(0 0 calc(.6 * var(--u)) #fff);
  transition: left .32s cubic-bezier(.3, .7, .2, 1), top .32s cubic-bezier(.3, .7, .2, 1), opacity .3s; }
.a-cursor svg path { fill: var(--live); stroke: #fff; stroke-width: 1.2; }
.mw[data-scene="agent"] .s-sup > .a-cursor { display: block; }
.mw[data-scene="agent"] .s-sup > .a-cap { display: flex; }
.mw[data-scene="agent"]:not([data-step=""]):not([data-step="done"]) .a-cursor { opacity: 1; }
.mw[data-step="1"] .a-cursor { left: calc(136 * var(--u)); top: calc(111 * var(--u)); }
.mw[data-step="2"] .a-cursor { left: calc(273 * var(--u)); top: calc(471 * var(--u)); }
.mw[data-step="3"] .a-cursor { left: calc(610 * var(--u)); top: calc(316 * var(--u)); }
.mw[data-step="4"] .a-cursor { left: calc(440 * var(--u)); top: calc(452 * var(--u)); }
.mw[data-step="5"] .a-cursor, .mw[data-step="done"] .a-cursor { left: calc(440 * var(--u)); top: calc(111 * var(--u)); }
.a-ring { left: calc(100 * var(--u)); top: calc(90 * var(--u)); width: calc(72 * var(--u)); height: calc(42 * var(--u)); border-radius: calc(8 * var(--u)); border: calc(2 * var(--u)) solid var(--live); box-shadow: 0 0 0 calc(4 * var(--u)) rgb(245 182 11 / .22); }
.mw[data-step="1"] .a-ring { display: block; animation: fadeIn .2s ease .34s both, fadeOut .4s ease 1.5s forwards; }
.a-ripple { width: calc(28 * var(--u)); height: calc(28 * var(--u)); margin: calc(-14 * var(--u)) 0 0 calc(-14 * var(--u)); border-radius: 50%; border: calc(2 * var(--u)) solid var(--live); opacity: 0; }
.mw:is([data-step="2"], [data-step="3"], [data-step="4"]) .a-ripple { display: block; }
.mw[data-step="2"] .a-ripple { left: calc(273 * var(--u)); top: calc(471 * var(--u)); animation: ripple2 .45s ease-out .34s; }
.mw[data-step="3"] .a-ripple { left: calc(610 * var(--u)); top: calc(316 * var(--u)); animation: ripple3 .45s ease-out .34s; }
.mw[data-step="4"] .a-ripple { left: calc(440 * var(--u)); top: calc(452 * var(--u)); animation: ripple4 .45s ease-out .34s; }
@keyframes ripple2 { from { opacity: .9; transform: none; } to { opacity: 0; transform: scale(2.2); } }
@keyframes ripple3 { from { opacity: .9; transform: none; } to { opacity: 0; transform: scale(2.2); } }
@keyframes ripple4 { from { opacity: .9; transform: none; } to { opacity: 0; transform: scale(2.2); } }
@keyframes fadeOut { to { opacity: 0; } }
/* The note it leaves lands with its pin. */
.mw:is([data-step="5"], [data-step="done"]) .s-sup > :is(.p1, .n-hl) { display: grid; animation: popIn .4s cubic-bezier(.3, 1.5, .5, 1) .45s both; }
.a-cap { left: 50%; top: calc(10 * var(--u)); z-index: 2; display: flex; align-items: center; gap: calc(7 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: calc(99 * var(--u)); translate: -50% 0;
  background: color-mix(in srgb, var(--live) 22%, rgb(255 255 255 / .82)); color: #1d1d1f; font-size: calc(12 * var(--u)); font-weight: 500; white-space: nowrap;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 calc(.5 * var(--u)) rgb(0 0 0 / .08), 0 calc(4 * var(--u)) calc(14 * var(--u)) rgb(0 0 0 / .12); transition: opacity .3s, translate .3s; }
.mw[data-scene="agent"]:is([data-step=""], [data-step="done"]) .a-cap { opacity: 0; translate: -50% calc(-8 * var(--u)); }
.a-cap > svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); flex: none; }
.a-dot { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--live); animation: pulse 1.4s ease-in-out infinite; }
.a-cap b { display: none; font-weight: 500; }
.mw[data-step="0"] .a-cap [data-s="0"], .mw[data-step="1"] .a-cap [data-s="1"], .mw[data-step="2"] .a-cap [data-s="2"],
.mw[data-step="3"] .a-cap [data-s="3"], .mw[data-step="4"] .a-cap [data-s="4"], .mw[data-step="5"] .a-cap [data-s="5"] { display: inline; }

/* ---------- The Library (browsa://library) ---------- */
.mw .s-lib { --lb-bg: #fafaf9; padding: calc(28 * var(--u)) calc(44 * var(--u)); background: var(--lb-bg); color: var(--ink); font-size: calc(13 * var(--u)); }
@media (prefers-color-scheme: dark) { .mw .s-lib { --lb-bg: #1b1b1b; } }
.mw-page:has(.s-lib) { background: var(--card); }
.lb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(16 * var(--u)); }
.mw .lb-head h1 { margin: 0; font-size: calc(30 * var(--u)); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.lb-head p { margin-top: calc(2 * var(--u)); color: var(--ink-2); font-size: calc(14 * var(--u)); }
.lb-glass { display: flex; align-items: center; gap: calc(6 * var(--u)); flex: none; height: calc(30 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(99 * var(--u)); background: var(--fill); box-shadow: inset 0 0 0 calc(.5 * var(--u)) var(--edge), inset 0 calc(.5 * var(--u)) 0 rgb(255 255 255 / .5); font-size: calc(13 * var(--u)); font-weight: 500; }
.lb-glass svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.lb-glass.big { height: calc(34 * var(--u)); }
.lb-search { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(38 * var(--u)); margin-top: calc(14 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(99 * var(--u)); background: var(--fill); box-shadow: inset 0 0 0 calc(.5 * var(--u)) var(--edge); color: var(--ink-2); font-size: calc(14 * var(--u)); }
.lb-search svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
.lb-pack { position: relative; display: flex; align-items: center; gap: calc(22 * var(--u)); margin-top: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)); border-radius: calc(20 * var(--u)); background: var(--card); box-shadow: 0 0 0 calc(.5 * var(--u)) var(--edge), 0 calc(1 * var(--u)) calc(3 * var(--u)) rgb(0 0 0 / .03); overflow: hidden; }
.lb-search + .lb-pack { margin-top: calc(24 * var(--u)); }
.lb-pack::before { content: ""; position: absolute; inset: 0; opacity: .13; filter: blur(calc(30 * var(--u)));
  background: radial-gradient(40% 90% at 10% 20%, var(--a), transparent), radial-gradient(40% 90% at 50% 80%, var(--b), transparent), radial-gradient(40% 90% at 90% 20%, var(--c), transparent); }
.pk-a { --a: #34c759; --b: #f5b60b; --c: #ff9500; }
.pk-p { --a: #0a84ff; --b: #5e5ce6; --c: #30b0c7; }
.lb-fan { position: relative; flex: none; width: calc(106 * var(--u)); height: calc(60 * var(--u)); }
.lb-pi { position: absolute; top: calc(8 * var(--u)); left: calc(31 * var(--u)); display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(11.5 * var(--u)); color: var(--ink);
  background: radial-gradient(70% 70% at 30% 30%, color-mix(in srgb, var(--t) 34%, transparent), transparent), radial-gradient(60% 60% at 80% 85%, color-mix(in srgb, var(--t) 22%, transparent), transparent), var(--card);
  box-shadow: 0 0 0 calc(.5 * var(--u)) var(--edge), 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / .08); }
.lb-pi svg { width: calc(19 * var(--u)); height: calc(19 * var(--u)); opacity: .85; }
.lb-pi:nth-child(1) { transform: translate(calc(-24 * var(--u)), calc(2 * var(--u))) rotate(-9deg); }
.lb-pi:nth-child(2) { z-index: 1; transform: translateY(calc(-3 * var(--u))); }
.lb-pi:nth-child(3) { transform: translate(calc(24 * var(--u)), calc(2 * var(--u))) rotate(9deg); }
.t-radar { --t: #34c759; } .t-notes { --t: #f5b60b; } .t-agents { --t: #ff9500; } .t-block { --t: #0a84ff; } .t-cookie { --t: #5e5ce6; } .t-links { --t: #30b0c7; }
.lb-pt { position: relative; flex: 1; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.lb-pt b { font-size: calc(18 * var(--u)); font-weight: 600; }
.lb-pt em, .lb-sect em, .lb-ext em { color: var(--ink-2); font-size: calc(13 * var(--u)); }
.lb-sw { position: relative; width: calc(38 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(99 * var(--u)); background: #0a84ff; }
.lb-sw::after { content: ""; position: absolute; top: calc(2 * var(--u)); right: 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)) rgb(0 0 0 / .2); }
.lb-sect { display: flex; align-items: flex-end; justify-content: space-between; margin-top: calc(26 * var(--u)); }
.lb-sect > span:first-child { display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.lb-sect b { font-size: calc(17 * var(--u)); font-weight: 600; }
.lb-cap { margin: calc(12 * var(--u)) 0 calc(8 * var(--u)); color: var(--ink-2); font-size: calc(12 * var(--u)); font-weight: 600; }
.lb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(14 * var(--u)); }
.lb-ext { position: relative; display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--card); box-shadow: 0 0 0 calc(.5 * var(--u)) var(--edge); }
.lb-ext img { flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.lb-ext > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u)); }
.lb-ext b { font-size: calc(15 * var(--u)); font-weight: 600; }
.lb-ext em { line-height: 1.3; }
.lb-ext u { flex: none; display: flex; align-items: center; gap: calc(4 * var(--u)); }
.lb-ext .add { height: calc(28 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: calc(99 * var(--u)); background: linear-gradient(180deg, #3b9bff, #0a7aff); color: #fff; font-size: calc(13 * var(--u)); font-weight: 500; box-shadow: inset 0 calc(.5 * var(--u)) 0 rgb(255 255 255 / .35), 0 calc(1 * var(--u)) calc(2 * var(--u)) rgb(0 0 0 / .12); }
.lb-ext .added { color: var(--ink-2); font-size: calc(13 * var(--u)); font-weight: 500; }
.lb-ext .added svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); stroke-width: 2.4; }
.x-1password .added { display: none; }
/* Adding 1Password: a click on Add, then Added, and its icon lands in the address pill. */
.lb-cursor { position: absolute; z-index: 2; right: calc(26 * var(--u)); top: calc(34 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u)); opacity: 0; display: grid; }
.lb-cursor svg path { fill: #000; stroke: #fff; stroke-width: 1.4; }
.mw[data-scene="extensions"] .lb-cursor { animation: lbCursor 2.6s cubic-bezier(.45, 0, .25, 1) .4s both; }
@keyframes lbCursor {
  0% { opacity: 0; transform: translate(calc(220 * var(--u)), calc(180 * var(--u))); }
  15% { opacity: 1; }
  62% { transform: none; }
  68% { transform: scale(.88); }
  74%, 100% { opacity: 1; transform: none; }
}
.mw[data-scene="extensions"] .x-1password .add { animation: hideAfter .01s 2.25s forwards; }
.mw[data-scene="extensions"] .x-1password .added { display: flex; width: 0; overflow: hidden; animation: showAfter .01s 2.25s forwards; }
.mw[data-scene="extensions"] .x-1password { animation: flash 1.2s ease 2.25s; }
@keyframes hideAfter { to { display: none; } }
@keyframes showAfter { to { width: auto; } }
@keyframes flash { 30% { box-shadow: 0 0 0 calc(2 * var(--u)) #0a84ff, 0 0 0 calc(7 * var(--u)) rgb(10 132 255 / .16); } }

/* ⌘K: up to 640pt, 96pt from the top, 16pt corners (Views/CommandBar.swift). The field, the
   tools strip, then the featured commands with their keys. */
.mw-cmd {
  position: absolute; z-index: 4; top: calc(96 * var(--u)); left: calc(266 * var(--u) + (1008 * var(--u) - 600 * var(--u)) / 2); width: calc(600 * var(--u));
  border-radius: calc(16 * var(--u)); background: var(--panel); box-shadow: 0 0 0 calc(.5 * var(--u)) var(--edge), 0 calc(10 * var(--u)) calc(24 * var(--u)) rgb(0 0 0 / .18);
  opacity: 0; transform: scale(.97); transition: opacity .18s, transform .26s cubic-bezier(.2, .9, .3, 1);
}
.mw[data-scene="command"] .mw-cmd { opacity: 1; transform: none; }
.mw[data-scene="command"] .mw-page::after { background: rgb(0 0 0 / .18); }
.mw-cmd-in { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); font-size: calc(17 * var(--u)); line-height: calc(24 * var(--u)); border-bottom: calc(.5 * var(--u)) solid var(--edge); }
.mw-cmd-in svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--ink-2); flex: none; }
.mw-ph { color: var(--ink-3); position: relative; }
.mw-ph::before { content: ""; position: absolute; left: calc(-2 * var(--u)); top: calc(2 * var(--u)); bottom: calc(2 * var(--u)); width: calc(1.5 * var(--u)); background: #0a84ff; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.mw-strip { display: flex; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)); border-bottom: calc(.5 * var(--u)) solid var(--edge); }
.mw-strip > span { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); width: calc(72 * var(--u)); font-size: calc(11 * var(--u)); opacity: 0; }
.mw-strip i { display: grid; place-items: center; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: calc(10 * var(--u)); background: var(--fill); }
.mw-strip i svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.mw-strip .get-more { color: var(--ink-2); }
.mw-strip .get-more i { background: none; box-shadow: inset 0 0 0 calc(1 * var(--u)) var(--fill-2); outline: calc(1 * var(--u)) dashed var(--ink-3); outline-offset: calc(-1 * var(--u)); }
.mw-cmd-rows { display: flex; flex-direction: column; gap: calc(2 * var(--u)); padding: calc(6 * var(--u)); }
.mw-cmd-sect { padding: calc(4 * var(--u)) calc(10 * var(--u)) calc(2 * var(--u)); color: var(--ink-2); font-size: calc(11 * var(--u)); font-weight: 600; }
.mw-row { display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(34 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(9 * var(--u)); opacity: 0; }
.mw-row:has(em) { height: calc(42 * var(--u)); }
.mw-row > svg:first-child { width: calc(18 * var(--u)); height: calc(18 * var(--u)); color: var(--ink-2); flex: none; }
.mw-row > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: calc(1 * var(--u)); white-space: nowrap; }
.mw-row b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.mw-row em { color: var(--ink-2); font-size: calc(11 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
.mw-row kbd { font: inherit; font-size: calc(12 * var(--u)); color: var(--ink-2); }
.mw[data-scene="command"] :is(.mw-row, .mw-strip > span) { animation: fadeRow .22s ease both .2s; }
.mw[data-scene="command"] .mw-strip > :nth-child(n+2) { animation-delay: .24s; }
.mw[data-scene="command"] .mw-strip > :nth-child(n+4) { animation-delay: .28s; }
.mw[data-scene="command"] .mw-cmd-rows > :nth-child(n+3) { animation-delay: .3s; }
.mw[data-scene="command"] .mw-cmd-rows > :nth-child(n+5) { animation-delay: .36s; }
/* The pointer drifts down the list, as a hand on the trackpad would. */
.mw[data-scene="command"] .mw-cmd-rows > :nth-child(2) { animation: fadeRow .22s ease both .2s, hoverOn 1.2s linear 1.2s; }
.mw[data-scene="command"] .mw-cmd-rows > :nth-child(3) { animation: fadeRow .22s ease both .3s, hoverOn 1.2s linear 2.4s; }
.mw[data-scene="command"] .mw-cmd-rows > :nth-child(4) { animation: fadeRow .22s ease both .3s, hoverOn 1.2s linear 3.6s; }
@keyframes hoverOn { 0%, 99% { background: var(--fill-2); } 100% { background: none; } }
@keyframes fadeRow { from { opacity: 0; } to { opacity: 1; } }
@keyframes type { to { clip-path: inset(0 0 0 0); } }

/* Developer anatomy outline, placed by desktop.js. */
.mw-hl { position: absolute; z-index: 5; border-radius: calc(10 * var(--u)); box-shadow: 0 0 0 calc(2.5 * var(--u)) #0a84ff, 0 0 0 calc(9 * var(--u)) color-mix(in srgb, #0a84ff 18%, transparent); opacity: 0; transition: opacity .25s; pointer-events: none; }
.mw-hl.on { opacity: 1; }

/* ---------- The made-up sites ---------- */
.site { font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; background: #fff; }

/* Wander & Salt */
.s-ws { background: #fbf8f2; color: #2a211b; }
.ws-nav { display: flex; align-items: center; gap: calc(28 * var(--u)); padding: calc(18 * var(--u)) calc(36 * var(--u)); border-bottom: calc(.5 * var(--u)) solid rgb(42 33 27 / .12); }
.ws-nav b { font: 600 calc(19 * var(--u)) ui-serif, "New York", Georgia, serif; letter-spacing: -.01em; margin-right: auto; }
.ws-nav b em { font-style: italic; color: #b8582b; }
.ws-nav nav { display: flex; gap: calc(22 * var(--u)); font-size: calc(12 * var(--u)); color: rgb(42 33 27 / .7); }
.ws-nav u { padding: calc(7 * var(--u)) calc(14 * var(--u)); border-radius: calc(99 * var(--u)); background: #2a211b; color: #fbf8f2; font-size: calc(12 * var(--u)); font-weight: 500; }
.ws-article { max-width: calc(640 * var(--u)); margin: 0 auto; padding: calc(34 * var(--u)) calc(32 * var(--u)); }
.ws-kicker { font-size: calc(11 * var(--u)); letter-spacing: .12em; text-transform: uppercase; color: #b8582b; font-weight: 600; }
.mw .ws-article h1 { margin: calc(10 * var(--u)) 0 0; font: 600 calc(40 * var(--u))/1.05 ui-serif, "New York", Georgia, serif; letter-spacing: -.02em; }
.ws-by { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(14 * var(--u)); font-size: calc(12 * var(--u)); color: rgb(42 33 27 / .6); }
.ws-by i { display: block; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 50% 38%, #e9c3a5 0 26%, transparent 27%), radial-gradient(circle at 50% 100%, #b8582b 0 46%, transparent 47%), #f0e2cf; }
.ws-hero { margin: calc(22 * var(--u)) 0 0; border-radius: calc(8 * var(--u)); overflow: hidden; aspect-ratio: 640 / 300; }
.ws-hero svg { display: block; width: 100%; height: 100%; stroke: none; }
.s-aurora { animation: aurora 9s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes aurora { to { transform: translateX(-30px) scaleY(1.25); opacity: .8; } }
.ws-body { margin-top: calc(18 * var(--u)); font: calc(15 * var(--u))/1.6 ui-serif, "New York", Georgia, serif; color: rgb(42 33 27 / .86); }

/* Tern docs */
.s-tern { color: #1c2024; }
.tn-top { display: flex; align-items: center; gap: calc(20 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(22 * var(--u)); border-bottom: calc(.5 * var(--u)) solid #e4e7eb; }
.tn-top b { display: flex; align-items: center; gap: calc(8 * var(--u)); font-weight: 700; font-size: calc(15 * var(--u)); letter-spacing: -.02em; }
.tn-top b .fav { width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: calc(6 * var(--u)); }
.tn-top b em { font-weight: 400; color: #6b7480; }
.tn-search { display: flex; align-items: center; gap: calc(8 * var(--u)); width: calc(240 * var(--u)); height: calc(30 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(8 * var(--u)); background: #f2f4f6; color: #8a93a0; font-size: calc(12 * var(--u)); }
.tn-search svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
.tn-search kbd { margin-left: auto; padding: 0 calc(5 * var(--u)); border-radius: calc(4 * var(--u)); box-shadow: inset 0 0 0 calc(.5 * var(--u)) #cfd5dc; font: calc(11 * var(--u)) ui-monospace, Menlo, monospace; color: #8a93a0; }
.tn-top nav { display: flex; gap: calc(18 * var(--u)); margin-left: auto; font-size: calc(12 * var(--u)); color: #5b6470; }
.tn-body { display: flex; height: calc(100% - calc(52 * var(--u))); }
.tn-side { width: calc(190 * var(--u)); flex: none; padding: calc(18 * var(--u)) calc(14 * var(--u)); border-right: calc(.5 * var(--u)) solid #e4e7eb; display: flex; flex-direction: column; gap: calc(2 * var(--u)); font-size: calc(12 * var(--u)); color: #4b5563; }
.tn-side p { margin: calc(12 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a93a0; }
.tn-side p:first-child { margin-top: 0; }
.tn-side span { padding: calc(5 * var(--u)) calc(8 * var(--u)); border-radius: calc(6 * var(--u)); }
.tn-side span.on { background: #e6f4f1; color: #0f766e; font-weight: 600; }
.tn-main { flex: 1; min-width: 0; padding: calc(26 * var(--u)) calc(34 * var(--u)); }
.tn-crumb { font-size: calc(11 * var(--u)); color: #8a93a0; }
.mw .tn-main h1 { margin: calc(6 * var(--u)) 0 0; font-size: calc(30 * var(--u)); letter-spacing: -.025em; }
.tn-lede { margin-top: calc(10 * var(--u)); max-width: calc(520 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.55; color: #4b5563; }
.tn-code { margin: calc(18 * var(--u)) 0 0; padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(10 * var(--u)); background: #0f1720; color: #d6e2ee; font: calc(11.5 * var(--u))/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre; overflow: hidden; }
.tn-code .c { color: #6c7d8f; } .tn-code .k { color: #7cc4ff; } .tn-code .s { color: #9fe0a8; } .tn-code .f { color: #f5c26b; }
.tn-note { margin-top: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(8 * var(--u)); background: #f0f7ff; color: #3b4a5c; font-size: calc(12 * var(--u)); }
.tn-note b { color: #0a5fd6; margin-right: calc(6 * var(--u)); }
.tn-rows { margin-top: calc(14 * var(--u)); display: flex; flex-direction: column; font-size: calc(12 * var(--u)); color: #5b6470; }
.tn-rows span { display: flex; gap: calc(14 * var(--u)); padding: calc(8 * var(--u)) 0; border-top: calc(.5 * var(--u)) solid #e4e7eb; }
.tn-rows code { min-width: calc(150 * var(--u)); font: calc(11.5 * var(--u)) ui-monospace, Menlo, monospace; color: #0f766e; }

/* Paused: every loop holds its frame. */
.is-still .mw * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .mw, .mw * { transition-duration: 1ms !important; }
  .s-aurora { animation: none; }
}

/* ---------- Mac page ---------- */
.mac-hero { max-width: var(--page); margin-inline: auto; padding: clamp(20px, 3.4vw, 44px) var(--gutter) 0; }
.mac-hero .hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: clamp(24px, 5vw, 72px); align-items: end; }
.mac-hero h1 { font-size: clamp(2.625rem, 5.4vw, 4.5rem); line-height: 1.01; letter-spacing: -.04em; }
.mac-hero .hero-side > p:first-child { color: var(--ink-2); line-height: 1.42; max-width: 44ch; }
.req { margin-top: 12px; color: var(--ink-2); font-size: .875rem; }
.mac-stage { margin: clamp(28px, 3.4vw, 48px) auto 0; width: min(100%, calc((100svh - 180px) * 1.6)); }
.mac-stage .mw { animation: settle .8s cubic-bezier(.16, 1, .3, 1) .15s both; }
.scene-controls { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 26px; }
.scene-controls .t-tabs { margin: 0; overflow-x: auto; scrollbar-width: none; }
#scene-caption { color: var(--ink-2); text-align: center; max-width: 52ch; min-height: 3em; padding-inline: 8px; transition: opacity 150ms ease-in-out, transform 150ms ease-in-out, filter 150ms ease-in-out; }
#scene-caption.is-out { opacity: 0; transform: translateY(4px); filter: blur(2px); }
.scene-controls .motion { margin-top: -6px; }

/* The Library: two packs, and the extensions we've tested, with their real icons. */
.packs { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pack { position: relative; overflow: hidden; display: flex; align-items: center; gap: 26px; padding: 26px 28px; border-radius: 24px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); }
.pack::before { content: ""; position: absolute; inset: 0; opacity: .14; filter: blur(40px); pointer-events: none;
  background: radial-gradient(40% 90% at 10% 20%, var(--a), transparent), radial-gradient(40% 90% at 50% 80%, var(--b), transparent), radial-gradient(40% 90% at 90% 20%, var(--c), transparent); }
.pack.pk-a { --a: #34c759; --b: #f5b60b; --c: #ff9500; }
.pack.pk-p { --a: #0a84ff; --b: #5e5ce6; --c: #30b0c7; }
.pack > div { position: relative; }
.pack h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.pack p { margin-top: 4px; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; }
.fan { position: relative; flex: none; width: 128px; height: 76px; }
.pi { position: absolute; top: 10px; left: 37px; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px; color: var(--ink);
  background: radial-gradient(70% 70% at 30% 30%, color-mix(in srgb, var(--t) 34%, transparent), transparent), radial-gradient(60% 60% at 80% 85%, color-mix(in srgb, var(--t) 22%, transparent), transparent), var(--raised);
  box-shadow: 0 0 0 .5px var(--line), 0 1px 2px rgb(0 0 0 / .08); }
.pi svg { width: 23px; height: 23px; opacity: .85; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pi svg .fill { fill: currentColor; stroke: none; }
.pi svg .knock { stroke: var(--raised); stroke-width: 2; }
.pi:nth-child(1) { transform: translate(-30px, 3px) rotate(-9deg); }
.pi:nth-child(2) { z-index: 1; transform: translateY(-4px); }
.pi:nth-child(3) { transform: translate(30px, 3px) rotate(9deg); }
.pi.t-radar { --t: #34c759; } .pi.t-notes { --t: #f5b60b; } .pi.t-agents { --t: #ff9500; } .pi.t-block { --t: #0a84ff; } .pi.t-cookie { --t: #5e5ce6; } .pi.t-links { --t: #30b0c7; }
.lx-title { margin: clamp(36px, 4vw, 52px) 0 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink-2); letter-spacing: -.01em; }
.lx-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.lx { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); }
.lx img { flex: none; width: 44px; height: 44px; }
.lx span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lx b { font-weight: 600; line-height: 1.2; }
.lx em { font-style: normal; color: var(--ink-2); font-size: .875rem; line-height: 1.35; }
.ext-note { margin-top: 18px; color: var(--ink-2); font-size: .9375rem; max-width: 70ch; }

/* A terminal card. */
.term { border-radius: 14px; overflow: hidden; background: #141413; color: #e9e7e2; box-shadow: 0 0 0 1px rgb(255 255 255 / .06), var(--shadow); font: .875rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.term-bar { display: flex; gap: 7px; padding: 12px 14px; background: #1f1f1d; }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3a38; }
.term pre { margin: 0; padding: 18px 20px 20px; white-space: pre-wrap; word-break: break-all; }
.term .dim { color: #8f8c86; } .term .ok { color: #6fdc8c; } .term .key { color: #8ab4ff; }
.agent-visual { display: grid; }

/* The film. */
.film { position: relative; margin-top: clamp(32px, 4vw, 48px); aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(70% 90% at 30% 30%, #3a2a1f 0, transparent 70%), radial-gradient(60% 80% at 75% 70%, #2a2346 0, transparent 70%), #0d0d0c; color: #f2f1ee; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0d0d0c; }

.get { max-width: var(--page); margin: clamp(88px, 12vw, 164px) auto 0; padding: clamp(40px, 6vw, 72px) var(--gutter); text-align: center; display: grid; justify-items: center; }
.get img { width: 72px; height: 72px; margin-bottom: 22px; }
.get h2 { font-size: clamp(2.375rem, 5.4vw, 4.5rem); letter-spacing: -.038em; line-height: 1.02; }
.get > p { margin-top: 14px; color: var(--ink-2); max-width: 48ch; }
.get .actions { justify-content: center; }
.soon-note { margin-top: 18px; padding: 12px 18px; border-radius: 14px; background: rgb(118 118 128 / .1); color: var(--ink-2); font-size: .9375rem; max-width: 56ch; }
.soon-note a { color: var(--ink); }

/* ---------- Download page ---------- */
.dl-hero { max-width: var(--page); margin-inline: auto; padding: clamp(20px, 3.4vw, 44px) var(--gutter) 0; }
.dl-hero h1 { font-size: clamp(2.625rem, 5.4vw, 4.5rem); line-height: 1.01; letter-spacing: -.04em; }
.dl-hero > p { margin-top: 14px; color: var(--ink-2); font-size: 1.125rem; }
.platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: clamp(32px, 4vw, 52px); }
.platform { display: flex; flex-direction: column; border-radius: 28px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.platform-art { position: relative; aspect-ratio: 16 / 11; display: grid; place-items: center; padding: 8% 9%; overflow: hidden; }
.platform-art.duo { background: radial-gradient(70% 70% at 50% 100%, color-mix(in srgb, #ff9a5a 26%, transparent), transparent 70%), var(--ground); }
.platform-art.mac { background: radial-gradient(70% 70% at 50% 100%, color-mix(in srgb, #8b7cf6 26%, transparent), transparent 70%), var(--ground); }
.platform-art .device { width: 100%; }
.platform-art .device img { width: 100%; height: 100%; object-fit: cover; }
.platform-art .mw { box-shadow: 0 0 0 1px rgb(0 0 0 / .14), 0 30px 60px -24px rgb(30 25 20 / .4); }
.platform:hover .platform-art > * { transform: translateY(-4px); }
.platform-art > * { transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.platform-copy { padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; flex: 1; }
.platform-copy h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.026em; line-height: 1.1; }
.platform-copy > p { margin-top: 8px; color: var(--ink-2); max-width: 40ch; }
.platform-copy .actions { margin-top: auto; padding-top: 22px; }
.platform-copy .req { margin-top: 14px; }
.store-mark { display: inline-flex; align-items: center; gap: 10px; }
.store-mark svg { width: 18px; height: 18px; fill: currentColor; }
.build { max-width: var(--page); margin: clamp(56px, 8vw, 96px) auto 0; padding-inline: var(--gutter); display: grid; grid-template-columns: 7fr 5fr; gap: clamp(24px, 5vw, 72px); align-items: start; }
.build h2 { font-size: clamp(1.625rem, 3vw, 2.375rem); letter-spacing: -.026em; line-height: 1.1; }
.build p { color: var(--ink-2); }
.build p + p { margin-top: 12px; }
.build a { color: var(--ink); }

/* ---------- Developers page ---------- */
.dev-hero { max-width: var(--page); margin-inline: auto; padding: clamp(20px, 3.4vw, 44px) var(--gutter) 0; }
.dev-hero h1 { font-size: clamp(2.625rem, 5.4vw, 4.5rem); line-height: 1.01; letter-spacing: -.04em; max-width: 14ch; }
.dev-hero > p { margin-top: 18px; color: var(--ink-2); font-size: 1.125rem; max-width: 52ch; }
.crumbs { font-size: .9375rem; color: var(--ink-2); margin-bottom: 16px; }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--ink); }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 24px); margin-top: clamp(32px, 4vw, 52px); }
.way { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 2.6vw, 30px); border-radius: 22px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); text-decoration: none; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
.way:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -20px rgb(30 25 20 / .35); }
.way-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 6px; }
.way-ic svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.way:nth-child(1) .way-ic { background: #3d7bfd; } .way:nth-child(2) .way-ic { background: #e3a008; } .way:nth-child(3) .way-ic { background: #8a63f2; }
.way h3 { margin: 0; font-size: 1.25rem; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.way p { color: var(--ink-2); font-size: 1rem; }
.way .go { margin-top: auto; padding-top: 8px; font-size: .9375rem; font-weight: 500; }

.anatomy { margin-top: clamp(32px, 4vw, 52px); }
.anatomy-stage { margin: 0 auto; width: min(100%, calc((100svh - 180px) * 1.6)); }
.anatomy-caption { color: var(--ink-2); text-align: center; max-width: 52ch; min-height: 3em; padding-inline: 8px; transition: opacity 150ms ease-in-out, transform 150ms ease-in-out, filter 150ms ease-in-out; }
.anatomy-caption.is-out { opacity: 0; transform: translateY(4px); filter: blur(2px); }
.anatomy-code { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 32px); align-items: start; max-width: 960px; margin: clamp(16px, 2vw, 24px) auto 0; }
.anatomy-code .spec-note { margin-top: 0; }
.code { margin: 0; border-radius: 16px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); padding: 20px 22px; font: .78rem/1.7 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-x: auto; color: var(--ink-2); }
.code .k { color: var(--ink); } .code .s { color: light-dark(#a1460f, #f0a36b); } .code .n { color: light-dark(#0a5fd6, #8ab4ff); }
.code [data-points] { display: inline-block; border-radius: 6px; margin: 0 -4px; padding: 0 4px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.code [data-points].is-lit { background: color-mix(in srgb, #3d7bfd 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #3d7bfd 50%, transparent); }
.spec-note { margin-top: 18px; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, #e3a008 10%, transparent); color: var(--ink-2); font-size: .9375rem; }
.spec-note .badge { flex: none; margin-top: 1px; }

.wire { margin-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 12px; }
.wire-box { padding: 18px 20px; border-radius: 16px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); }
.wire-box b { display: block; font-weight: 600; }
.wire-box span { color: var(--ink-2); font-size: .9375rem; }
.wire-box code, .msgs code, .tools code, .codemap code { font: .875em ui-monospace, SFMono-Regular, Menlo, monospace; }
.wire-arrow { position: relative; width: 56px; height: 2px; background: var(--line); overflow: hidden; }
.wire-arrow::after { content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: var(--ink); animation: travel 1.6s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes travel { to { left: 100%; } }
.sub-h { margin: clamp(28px, 3vw, 40px) 0 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink-2); letter-spacing: -.01em; }
.sub-h + .msgs, .sub-h + .limits { margin-top: 14px; }
.msgs { margin-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.msgs > div { padding: 14px 16px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.msgs code { color: var(--ink); font-weight: 600; }
.msgs span { display: block; color: var(--ink-2); font-size: .875rem; margin-top: 2px; }

.tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.tools code { padding: 5px 10px; border-radius: 8px; background: rgb(118 118 128 / .12); }
.tools code.lh { background: color-mix(in srgb, #8a63f2 14%, transparent); }

.limits { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: repeat(2, 1fr); column-gap: clamp(32px, 6vw, 88px); }
.limits > div { padding: 20px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 12rem 1fr; gap: 16px; }
.limits dt { font-weight: 600; }
.limits dd { margin: 0; color: var(--ink-2); font-size: 1rem; }
.codemap { margin-top: clamp(28px, 3vw, 40px); }
.codemap table { min-width: 560px; }
.codemap a { color: var(--link); text-decoration: none; }
.codemap a:hover { text-decoration: underline; }

@media (max-width: 860px) {
  .mac-hero .hero-copy, .split, .anatomy-code, .build { grid-template-columns: minmax(0, 1fr); }
  .platforms, .ways, .limits, .packs { grid-template-columns: 1fr; }
  .msgs { grid-template-columns: repeat(2, 1fr); }
  .limits > div { grid-template-columns: 1fr; gap: 4px; }
  .wire { grid-template-columns: 1fr; justify-items: stretch; }
  .wire-arrow { width: 2px; height: 28px; justify-self: center; }
  .wire-arrow::after { left: 0; top: -30%; width: 100%; height: 30%; animation-name: travelDown; }
}
@keyframes travelDown { to { top: 100%; } }
@media (max-width: 520px) { .pack { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px; } }
@media (prefers-reduced-motion: reduce) {
  .wire-arrow::after { animation: none; }
}

/* ---------- The little things: a bento of small features ----------
   Every visual is drawn here, at rest in its "after" state, so a still or reduced-motion page
   still says what each feature does. desktop.js adds .is-on once the grid is in view (and motion
   isn't paused); each loop then plays the "before" and lands back on that state. */
.bento {
  --b-fill: rgb(118 118 128 / .12); --b-fill-2: rgb(118 118 128 / .22); --b-pane: var(--ground);
  --b-ok: light-dark(#1d8a46, #5fd38a); --b-t: 7s; --b-ease: cubic-bezier(.22, 1, .36, 1);
  margin-top: clamp(32px, 4vw, 56px);
  display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(300px, auto);
  grid-template-areas:
    "keys keys keys spaces spaces pin"
    "keys keys keys fav dl dl"
    "ads ads ads cookie cookie cookie"
    "reader reader reader link link link"
    "import import import private private archive";
}
.bt-keys { grid-area: keys; } .bt-spaces { grid-area: spaces; } .bt-pin { grid-area: pin; } .bt-fav { grid-area: fav; }
.bt-dl { grid-area: dl; } .bt-ads { grid-area: ads; } .bt-cookie { grid-area: cookie; } .bt-reader { grid-area: reader; }
.bt-link { grid-area: link; } .bt-archive { grid-area: archive; } .bt-import { grid-area: import; } .bt-private { grid-area: private; }

.bt { --hue: #5856d6; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 20px 22px 22px; border-radius: 22px; background: var(--raised); box-shadow: 0 0 0 1px var(--line); }
/* A soft wash of colour behind each drawing, like the Library's icons. */
.bt::before { content: ""; position: absolute; z-index: -1; inset: -30% -10% auto; height: 80%; background: radial-gradient(50% 50% at 50% 50%, var(--hue), transparent 70%); opacity: .13; filter: blur(20px); }
@media (prefers-color-scheme: dark) { .bt::before { opacity: .2; } }
.bt h3 { margin: 18px 0 0; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.016em; line-height: 1.25; }
.bt p { margin-top: 5px; color: var(--ink-2); font-size: .9375rem; line-height: 1.42; max-width: 46ch; }
.bt p kbd { color: var(--ink-2); }
.bt-vis { position: relative; flex: 1; min-height: 140px; display: grid; place-items: center; }
.bt-vis kbd, .bt-vis b, .bt-vis em, .bt-vis u, .bt-vis i { font-style: normal; text-decoration: none; }
.bento-note { margin-top: 20px; color: var(--ink-2); font-size: .9375rem; }

/* Pieces they share. */
.bt-vis:has(.v-chip) { padding-bottom: 30px; }
.v-chip { position: absolute; right: 0; bottom: 0; padding: 2px 8px; border-radius: 7px; background: var(--b-fill); color: var(--ink-2); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }

/* Shortcuts: big keycaps, and the cheat sheet under them. */
.bt-keys { --hue: #0a84ff; }
.bt-keys .bt-vis { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 28px; }
.v-keys { display: grid; justify-items: center; gap: 18px; }
.v-caps { display: flex; gap: 10px; }
.cap {
  display: grid; place-items: center; min-width: 76px; height: 76px; padding: 0 18px; border-radius: 16px;
  font: 500 2rem/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif; color: var(--ink);
  background: linear-gradient(180deg, var(--raised), color-mix(in srgb, var(--raised) 92%, #000));
  box-shadow: 0 0 0 1px var(--line), 0 3px 0 color-mix(in srgb, var(--ink) 14%, transparent), 0 8px 18px -8px rgb(0 0 0 / .3);
  transition: transform .12s ease, box-shadow .12s ease;
}
@media (prefers-color-scheme: dark) { .cap { background: linear-gradient(180deg, #2c2c2a, #232321); } }
.cap.is-down { transform: translateY(3px); box-shadow: 0 0 0 1px var(--line), 0 0 0 color-mix(in srgb, var(--ink) 14%, transparent), 0 3px 8px -4px rgb(0 0 0 / .3); }
.cap.is-new { animation: capIn .32s var(--b-ease) both; }
@keyframes capIn { from { opacity: 0; transform: translateY(-6px) scale(.94); } }
.v-act { font-size: 1.125rem; font-weight: 600; letter-spacing: -.015em; transition: opacity .15s, filter .15s, transform .15s; }
.v-act.is-out { opacity: 0; filter: blur(2px); transform: translateY(4px); }
.v-cheat { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 520px; }
.v-cheat span { display: inline-flex; gap: 6px; padding: 4px 9px; border-radius: 8px; background: var(--b-fill); color: var(--ink-2); font-size: .75rem; white-space: nowrap; transition: background .25s, color .25s; }
.v-cheat span kbd { color: inherit; font-weight: 600; }
.v-cheat span.on { background: color-mix(in srgb, #0a84ff 16%, transparent); color: light-dark(#0a5fd6, #7ab4ff); }

/* Pieces of the real window: the app's sidebar, favourites, panel and pages, at about 0.9 of
   its points so a corner fits a tile. Cropped by the tile's edge, like a window running off it. */
.bw {
  --tint: #5856d6; --win-base: #e7e6e4; --win-mix: 6%;
  --ink: rgb(0 0 0 / .85); --ink-2: rgb(0 0 0 / .5); --ink-3: rgb(0 0 0 / .26);
  --fill: rgb(0 0 0 / .06); --fill-2: rgb(0 0 0 / .1); --selected: rgb(255 255 255 / .9);
  --panel: #fbfbfb; --edge: rgb(0 0 0 / .1);
  position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 10px 9px;
  border-radius: 13px; color: var(--ink); font-size: 12px; line-height: 1.2; letter-spacing: -.005em;
  background: linear-gradient(180deg, rgb(255 255 255 / .35), transparent 40%), color-mix(in srgb, var(--tint) var(--win-mix), var(--win-base));
  box-shadow: 0 0 0 1px rgb(0 0 0 / .12), 0 1px 0 rgb(255 255 255 / .5) inset, 0 18px 36px -18px rgb(30 25 20 / .35);
  user-select: none; -webkit-user-select: none; overflow: hidden;
}
/* A corner of the window: it runs off the tile's right edge and fades out at the bottom. */
.bt-vis:has(.bw) { min-height: 200px; }
.bw-side, .bw-win { top: 0; bottom: 0; mask-image: linear-gradient(#000 78%, transparent); }
.bt-vis:has(.v-chip) > .bw, .bt-vis:has(.v-shield) > .bw { bottom: 28px; }
@media (prefers-color-scheme: dark) {
  .bw {
    --tint: #5e5ce6; --win-base: #2a2a2a; --win-mix: 10%;
    --ink: rgb(255 255 255 / .86); --ink-2: rgb(255 255 255 / .52); --ink-3: rgb(255 255 255 / .25);
    --fill: rgb(255 255 255 / .07); --fill-2: rgb(255 255 255 / .12); --selected: rgb(255 255 255 / .14);
    --panel: #2b2b2b; --edge: rgb(255 255 255 / .1);
    background: linear-gradient(180deg, rgb(255 255 255 / .04), transparent 40%), color-mix(in srgb, var(--tint) var(--win-mix), var(--win-base));
    box-shadow: 0 0 0 1px rgb(0 0 0 / .6), 0 0 0 1px rgb(255 255 255 / .1) inset, 0 18px 36px -18px rgb(0 0 0 / .7);
  }
}
.bw .fi { flex: none; width: 15px; height: 15px; border-radius: 3px; object-fit: contain; }
.bw-lights { display: flex; gap: 7px; padding: 2px 4px 10px; }
.bw-lights i { width: 11px; height: 11px; border-radius: 50%; box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .12); }
.bw-lights i:nth-child(1) { background: #ff5f57; } .bw-lights i:nth-child(2) { background: #febc2e; } .bw-lights i:nth-child(3) { background: #28c840; }
.bw-addr { position: relative; display: flex; align-items: center; height: 29px; margin-bottom: 8px; padding: 0 9px; border-radius: 8px; background: var(--fill); white-space: nowrap; overflow: hidden; }
.bw-addr > span { display: flex; align-items: center; gap: 8px; }
.bw-addr .fi { margin-right: 8px; }
.bw-addr > span .fi { margin-right: 0; }
.bw-tab { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 8px; border-radius: 8px; white-space: nowrap; overflow: hidden; }
.bw-tab > span { overflow: hidden; text-overflow: ellipsis; }
.bw-tab.on { background: var(--selected); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.bw-rule { flex: none; height: 1px; margin: 7px 8px; background: var(--fill-2); }
.bw-new { display: flex; align-items: center; gap: 9px; height: 28px; padding: 0 8px; color: var(--ink-2); }
.bw-new i { position: relative; width: 15px; height: 15px; }
.bw-new i::before, .bw-new i::after { content: ""; position: absolute; left: 7px; top: 2px; width: 1.4px; height: 11px; border-radius: 1px; background: currentColor; }
.bw-new i::after { transform: rotate(90deg); }

/* Spaces: the sidebar's colour and tabs change together, on the app's spring. */
.bt-spaces { --hue: #ff9f0a; }
.bw-side { top: 0; left: 0; width: 262px; }
.bt-spaces .bw-side { mask-image: none; }
.bw-swap, .bt-spaces .bw-addr { display: grid; }
.bw-swap > *, .bw-addr > span { grid-area: 1 / 1; }
.bw-list { display: flex; flex-direction: column; gap: 2px; }
.bt-spaces .sp-w { display: none; }
.bw-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 8px 6px 0; color: var(--ink-2); }
.bw-bottom > i { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px currentColor; }
.bw-bottom .bw-tune { border-radius: 2px; box-shadow: none; background: linear-gradient(currentColor 0 0) 0 3px / 100% 1.4px no-repeat, linear-gradient(currentColor 0 0) 0 7px / 100% 1.4px no-repeat, linear-gradient(currentColor 0 0) 0 11px / 100% 1.4px no-repeat; }
.bw-spaces { display: flex; align-items: center; gap: 8px; }
.bw-spaces i { display: block; width: 14px; height: 13px; background: var(--ink); clip-path: polygon(50% 0, 100% 42%, 100% 100%, 62% 100%, 62% 66%, 38% 66%, 38% 100%, 0 100%, 0 42%); }
.bw-spaces .sp-b { width: 6px; height: 6px; border-radius: 50%; clip-path: none; background: var(--ink-3); }
.bento.is-on .bt-spaces .bw-side { animation: spTint var(--b-t) ease infinite; }
.bento.is-on .bt-spaces .sp-p { animation: spOut var(--b-t) var(--b-ease) infinite; }
.bento.is-on .bt-spaces .sp-w { display: flex; animation: spIn var(--b-t) var(--b-ease) infinite; }
.bento.is-on .bw-spaces .sp-a { animation: spHouse var(--b-t) ease infinite; }
.bento.is-on .bw-spaces .sp-b { animation: spDot var(--b-t) ease infinite; }
@keyframes spTint { 0%, 40% { --tint: #5856d6; --win-mix: 6%; } 48%, 90% { --tint: #ff9500; --win-mix: 10%; } 98%, 100% { --tint: #5856d6; --win-mix: 6%; } }
@keyframes spOut { 0%, 40% { opacity: 1; transform: none; } 47%, 90% { opacity: 0; transform: translateX(-60px); } 91% { transform: translateX(60px); } 98%, 100% { opacity: 1; transform: none; } }
@keyframes spIn { 0%, 41% { opacity: 0; transform: translateX(60px); } 48%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateX(-60px); } }
@keyframes spHouse { 0%, 40%, 98%, 100% { opacity: 1; } 48%, 90% { opacity: .3; } }
@keyframes spDot { 0%, 40%, 98%, 100% { background: var(--ink-3); } 48%, 90% { background: var(--ink); } }
@property --tint { syntax: "<color>"; inherits: true; initial-value: #5856d6; }
@property --win-mix { syntax: "<percentage>"; inherits: true; initial-value: 6%; }

/* Pinning: a Today tab lifts above the rule and New Tab, into the pinned tabs. */
.bt-pin { --hue: #ff375f; }
.bw-pins { padding-top: 12px; }
.bw-pins .m { order: -1; }
.bw-pins .a { order: -3; } .bw-pins .b { order: -2; }
.bento.is-on .bw-pins .m { animation: pinUp var(--b-t) var(--b-ease) infinite; position: relative; z-index: 1; }
.bento.is-on .bw-pins :is(.bw-rule, .bw-new, .c) { animation: pinMake var(--b-t) var(--b-ease) infinite; }
.bento.is-on .bt-pin .v-chip { animation: chip var(--b-t) ease infinite; }
/* At rest the tab is pinned (order −1, above the rule). Before, it sits 32+28+15pt lower. */
@keyframes pinUp {
  0%, 26% { transform: translateY(75px); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
  34% { transform: translateY(75px) scale(1.04); box-shadow: 0 10px 20px -8px rgb(0 0 0 / .35); }
  52% { transform: scale(1.04); box-shadow: 0 10px 20px -8px rgb(0 0 0 / .35); }
  60%, 90% { transform: none; box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
  100% { transform: translateY(75px); }
}
@keyframes pinMake { 0%, 34% { transform: translateY(-32px); } 52%, 90% { transform: none; } 100% { transform: translateY(-32px); } }
@keyframes chip { 0%, 22% { opacity: .35; } 28%, 56% { opacity: 1; background: color-mix(in srgb, var(--hue) 18%, transparent); color: var(--ink); } 70%, 100% { opacity: .35; } }

/* Favourites: the app's grid of tiles; a site drops into the last, sunken slot. */
.bt-fav { --hue: #30b158; }
.bw-favs-wrap { width: 262px; padding: 12px 10px; }
.bw-favs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.bw-favs > span { display: grid; place-items: center; height: 46px; border-radius: 11px; background: var(--fill); }
.bw-favs .fi { width: 20px; height: 20px; border-radius: 4px; }
.bw-favs .slot { box-shadow: inset 0 2px 3px rgb(0 0 0 / .14), inset 0 -1px 0 rgb(255 255 255 / .5); }
@media (prefers-color-scheme: dark) { .bw-favs .slot { box-shadow: inset 0 2px 3px rgb(0 0 0 / .5), inset 0 -1px 0 rgb(255 255 255 / .08); } }
.bento.is-on .bw-favs .slot .fi { animation: favIn var(--b-t) cubic-bezier(.3, 1.5, .5, 1) infinite; }
.bento.is-on .bt-fav .v-chip { animation: chip var(--b-t) ease infinite; }
@keyframes favIn { 0%, 30% { opacity: 0; transform: translateY(-30px) scale(.6); } 42%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: scale(.6); } }

/* Downloads: the panel, one file finishing. */
.bt-dl { --hue: #0a84ff; }
.bw-panel { top: 0; left: 0; right: 0; padding: 0 0 8px; background: var(--panel); gap: 0; }
.bw-ph { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 10px 0 14px; border-bottom: .5px solid var(--edge); margin-bottom: 6px; }
.bw-ph b { font-weight: 700; font-size: 13px; }
.bw-rail { display: flex; align-items: center; gap: 2px; }
.bw-rail i { display: grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; color: var(--ink-2); }
.bw-rail i.on { background: var(--fill); color: var(--ink); }
.bw-rail i.sep { margin-left: 6px; padding-left: 6px; width: 31px; border-left: .5px solid var(--edge); border-radius: 0; }
.bw-rail svg, .bw-act svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bw-rail svg .fill, .bw-act svg .fill { fill: currentColor; stroke: none; }
.bw-file { display: flex; align-items: center; gap: 11px; padding: 7px 14px; }
.bw-file > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.bw-file b { font-weight: 500; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bw-file em { position: relative; height: 1.25em; color: var(--ink); font-size: 11px; }
.bw-file em > span { position: absolute; inset: 0; white-space: nowrap; }
.bw-file .going { opacity: 0; }
.bw-file .prog { height: 4px; margin-top: 3px; border-radius: 2px; background: var(--fill-2); overflow: hidden; display: none; }
.bw-file .prog i { display: block; height: 100%; border-radius: 2px; background: var(--ink-2); }
.bw-file .doc { flex: none; width: 21px; height: 27px; border-radius: 2px 6px 2px 2px; background: linear-gradient(225deg, var(--edge) 6px, #fff 6px); box-shadow: 0 0 0 .5px var(--edge), 0 1px 2px rgb(0 0 0 / .12); }
.bw-file .doc.pdf { background: linear-gradient(225deg, var(--edge) 6px, transparent 6px), linear-gradient(#fff 0 0) top / 100% 62% no-repeat, linear-gradient(#e2433b 0 0); }
.bw-file .doc.img { background: linear-gradient(225deg, var(--edge) 6px, transparent 6px), linear-gradient(170deg, #2a3b5c, #6b8fb8 55%, #e9c49a); }
.bw-act { flex: none; display: grid; width: 17px; height: 17px; color: var(--ink-3); }
.bw-act svg { width: 17px; height: 17px; }
.bw-act svg .knock { stroke: var(--panel); stroke-width: 2; fill: none; }
.bento.is-on .bw-file.go .prog { display: block; animation: dlBar var(--b-t) ease infinite; }
.bento.is-on .bw-file .going { animation: dlGoing var(--b-t) ease infinite; }
.bento.is-on .bw-file .done { animation: dlDone var(--b-t) ease infinite; }
.bento.is-on .bw-file .prog i { animation: dlFill var(--b-t) cubic-bezier(.4, 0, .3, 1) infinite; }
@keyframes dlGoing { 0%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes dlDone { 0%, 57% { opacity: 0; } 62%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dlBar { 0%, 56% { opacity: 1; height: 4px; } 62%, 100% { opacity: 0; height: 0; margin-top: 0; } }
@keyframes dlFill { 0%, 6% { width: 4%; } 30% { width: 46%; } 40% { width: 58%; } 56%, 100% { width: 100%; } }

/* Pages: a window corner, with a real page before and after Browsa has been at it. */
.bt-ads, .bt-cookie { --hue: #0a84ff; }
.bt-cookie { --hue: #30b158; }
.bt-reader { --hue: #c7853a; }
/* The page tiles keep the whole width of the page and scale with the tile, so nothing is cut
   off at the sides; a narrow tile drops the sidebar to give the page the room. */
.bt-vis:has(.bw-win) { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 12px; container-type: inline-size; min-height: 0; }
.bw-win { position: relative; inset: auto; flex-direction: row; gap: 6px; padding: 6px; mask-image: none; width: 100%; }
.bt-vis:has(.v-chip) > .bw-win, .bt-vis:has(.v-shield) > .bw-win { bottom: auto; }
.bw-mside { flex: none; width: 21%; display: flex; flex-direction: column; gap: 2px; padding: 4px 3px; min-width: 0; }
.bw-pg { position: relative; flex: 1; min-width: 0; aspect-ratio: 1280 / 520; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 .5px rgb(0 0 0 / .12), 0 1px 3px rgb(0 0 0 / .06); }
.bw-cap { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1280 / 800; container-type: inline-size; }
.bw-pg img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.bw-win.cookie .bw-cap { translate: 0 -37%; }
.bw-win.reader .bw-pg { aspect-ratio: 1280 / 600; }
@container (max-width: 440px) { .bw-mside { display: none; } }
.bw-pg .after { opacity: 1; }
.v-shield { position: relative; align-self: center; z-index: 2; display: inline-grid; padding: 5px 11px 5px 8px; border-radius: 99px; background: var(--raised); box-shadow: 0 0 0 1px var(--line), 0 6px 16px -6px rgb(0 0 0 / .25); font-size: .75rem; font-weight: 600; white-space: nowrap; }
.v-shield > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; justify-content: center; }
.v-shield .b { opacity: 0; color: var(--ink-2); }
.v-shield i { width: 14px; height: 14px; background: #0a84ff; clip-path: path("M7 0 13 2.2V7c0 3.6-2.6 6-6 7-3.4-1-6-3.4-6-7V2.2z"); }
.v-shield.ok i { background: var(--b-ok); clip-path: circle(50%); }
.bento.is-on .bw-pg .after { animation: after var(--b-t) var(--b-ease) infinite; }
.bento.is-on .v-shield .b { animation: before var(--b-t) var(--b-ease) infinite; }
.bento.is-on .v-shield .a { animation: after var(--b-t) var(--b-ease) infinite; }
.bento.is-on .bt-reader .v-chip { animation: chip var(--b-t) ease infinite; }
@keyframes after { 0%, 34% { opacity: 0; } 44%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes before { 0%, 34% { opacity: 1; } 44%, 92% { opacity: 0; } 100% { opacity: 1; } }

/* Ad networks don't serve to our capture Mac, so the ad is drawn into The Verge's real, empty
   leaderboard slot (1280 × 800 page: x 276, y 195, 728 × 90), in percent of the capture. */
.v-ad { position: absolute; left: 21.56%; top: 24.38%; width: 56.88%; height: 11.25%; display: grid; grid-template-columns: 1fr auto; align-content: center; column-gap: 2cqw; padding: 0 2.4cqw; border-radius: 2px; overflow: hidden; opacity: 0; color: #fff; text-align: left; background: radial-gradient(120% 140% at 85% 0%, #ff8a3d, transparent 60%), linear-gradient(100deg, #7b2ff7, #e0337a); }
.v-ad b { font: 800 2.9cqw/1.05 -apple-system, sans-serif; letter-spacing: -.02em; }
.v-ad em { grid-row: 2; font-size: 1.75cqw; opacity: .9; }
.v-ad u { grid-row: 1 / 3; grid-column: 2; align-self: center; padding: .8cqw 1.9cqw; border-radius: 99px; background: #fff; color: #7b2ff7; font-size: 1.9cqw; font-weight: 700; }
.v-ad i { position: absolute; right: .4cqw; top: .2cqw; font-size: 1.3cqw; opacity: .7; }
.bento.is-on .v-ad { animation: before var(--b-t) var(--b-ease) infinite; }
.v-ad b { white-space: nowrap; }

/* Archive: the stalest tab slips into the archive. */
.bt-archive { --hue: #af52de; }
.bw-arch { bottom: auto; padding-bottom: 44px; mask-image: none; }
.bw-arch .old { opacity: 0; transform: translate(-40px, 38px) scale(.3); }
.v-box { position: absolute; left: 80px; bottom: 12px; width: 32px; height: 22px; border-radius: 3px 3px 6px 6px; background: var(--fill-2); }
.v-box::before { content: ""; position: absolute; left: -3px; right: -3px; top: -6px; height: 7px; border-radius: 3px; background: var(--fill-2); }
.v-box::after { content: ""; position: absolute; left: 11px; right: 11px; top: 6px; height: 2.5px; border-radius: 2px; background: var(--ink-2); }
.bento.is-on .bw-arch .old { animation: archive var(--b-t) cubic-bezier(.5, 0, .3, 1) infinite; }
.bento.is-on .v-box { animation: boxBump var(--b-t) ease infinite; }
@keyframes archive { 0%, 28% { opacity: 1; transform: none; } 34% { opacity: .55; transform: none; } 50%, 94% { opacity: 0; transform: translate(-40px, 38px) scale(.3); } 100% { opacity: 1; transform: none; } }
@keyframes boxBump { 0%, 48% { transform: none; } 53% { transform: scale(1.14); } 60%, 100% { transform: none; } }

/* Clean links: the tracking tail lights up, then folds away. */
.bt-link { --hue: #ff375f; }
.bt-link .bt-vis { grid-template-rows: 1fr auto; gap: 14px; }
.v-url { align-self: end; display: flex; align-items: center; max-width: 100%; padding: 10px 16px 10px 12px; border-radius: 12px; background: var(--b-pane); box-shadow: 0 0 0 1px var(--line); font: .875rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: nowrap; overflow: hidden; }
.v-url > i { flex: none; width: 11px; height: 12px; margin-right: 10px; border-radius: 2px; background: var(--ink-2); clip-path: path("M2 5V3.5a3.5 3.5 0 0 1 7 0V5h2v7H0V5zM3.6 5h3.8V3.5a1.9 1.9 0 0 0-3.8 0z"); }
.v-url .trk { display: inline-block; max-width: 0; overflow: hidden; vertical-align: bottom; border-radius: 4px; color: light-dark(#c4223f, #ff8095); }
.v-clean { align-self: start; display: inline-flex; align-items: center; gap: 6px; color: var(--b-ok); font-size: .8125rem; font-weight: 600; }
.v-clean::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: currentColor; }
.bento.is-on .v-url .trk { animation: trk var(--b-t) cubic-bezier(.6, 0, .2, 1) infinite; }
.bento.is-on .v-clean { animation: badge var(--b-t) var(--b-ease) infinite; }
@keyframes trk { 0%, 6% { max-width: 420px; background: transparent; } 16%, 26% { max-width: 420px; background: color-mix(in srgb, #ff375f 16%, transparent); } 36%, 92% { max-width: 0; background: color-mix(in srgb, #ff375f 16%, transparent); } 100% { max-width: 420px; background: transparent; } }

/* Import: what comes across, from the browser you're leaving. */
.bt-import { --hue: #5856d6; }
.v-import { display: grid; grid-template-columns: auto minmax(60px, 1fr) auto; align-items: center; gap: 16px; width: 100%; max-width: 520px; }
.v-from { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; }
.v-from u { padding: 5px 10px; border-radius: 8px; background: var(--b-pane); box-shadow: 0 0 0 1px var(--line); font-size: .75rem; font-weight: 600; text-align: center; }
.v-from u:first-child { background: color-mix(in srgb, #5856d6 14%, var(--b-pane)); }
.v-lane { position: relative; height: 120px; }
.v-lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: repeating-linear-gradient(90deg, var(--b-fill-2) 0 4px, transparent 4px 10px); }
.v-lane i { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 3px 9px; border-radius: 99px; background: var(--raised); box-shadow: 0 0 0 1px var(--line), 0 4px 10px -4px rgb(0 0 0 / .2); font-size: .6875rem; font-weight: 600; white-space: nowrap; opacity: 0; }
.v-lane i:first-child { opacity: 1; }
.bt-import .v-import img { width: 56px; height: 56px; filter: drop-shadow(0 8px 16px rgb(30 25 20 / .25)); }
.bento.is-on .v-lane i { animation: travel var(--b-t) cubic-bezier(.45, 0, .3, 1) infinite; }
.bento.is-on .v-lane i:nth-child(2) { animation-delay: calc(var(--b-t) * .25); }
.bento.is-on .v-lane i:nth-child(3) { animation-delay: calc(var(--b-t) * .5); }
.bento.is-on .v-lane i:nth-child(4) { animation-delay: calc(var(--b-t) * .75); }
.bento.is-on .bt-import img { animation: gulp calc(var(--b-t) / 4) ease infinite; }
@keyframes travel { 0% { left: 12%; opacity: 0; } 6% { opacity: 1; } 22% { opacity: 1; } 30%, 100% { left: 78%; opacity: 0; } }
@keyframes gulp { 0%, 70% { transform: none; } 82% { transform: scale(1.07); } 100% { transform: none; } }

/* Private: a private tab, and the switches that keep things quiet. */
.bt-private { --hue: #8e8e93; }
.v-toggles { display: grid; gap: 8px; width: min(100%, 340px); }
.v-toggles > span { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--b-pane); box-shadow: 0 0 0 1px var(--line); font-size: .8125rem; }
.v-toggles b { font-weight: 500; }
.v-toggles kbd { color: var(--ink-2); font-weight: 600; font-size: .75rem; }
.v-toggles > span:first-child { background: #1c1c1e; color: #f2f1ee; box-shadow: none; }
.v-toggles > span:first-child kbd { color: rgb(242 241 238 / .6); }
@media (prefers-color-scheme: dark) { .v-toggles > span:first-child { background: color-mix(in srgb, #5e5ce6 34%, #141414); } }
.sw { position: relative; flex: none; width: 30px; height: 18px; border-radius: 9px; background: var(--b-ok); }
.sw::after { content: ""; position: absolute; top: 2px; left: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); }
.bento.is-on .sw.flip { animation: swBg var(--b-t) ease infinite; }
.bento.is-on .sw.flip::after { animation: swKnob var(--b-t) var(--b-ease) infinite; }
@keyframes swBg { 0%, 36% { background: var(--b-fill-2); } 42%, 92% { background: var(--b-ok); } 98%, 100% { background: var(--b-fill-2); } }
@keyframes swKnob { 0%, 36% { left: 2px; } 44%, 92% { left: 14px; } 98%, 100% { left: 2px; } }

/* Off the beat, so the tiles don't all move at once. */
.bento.is-on :is(.bt-pin, .bt-cookie, .bt-archive) * { animation-delay: -2.3s; }
.bento.is-on :is(.bt-fav, .bt-reader, .bt-private) * { animation-delay: -4.6s; }

/* Paused: every loop holds its frame. */
.is-still .bento * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .cap, .v-act, .v-cheat span { transition-duration: 1ms; } }

@media (max-width: 1060px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; grid-auto-flow: dense; }
  .bento > .bt { grid-area: auto; }
  .bento > :is(.bt-keys, .bt-reader, .bt-import, .bt-private, .bt-link, .bt-dl, .bt-ads, .bt-cookie) { grid-column: span 2; }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento > :is(.bt-keys, .bt-reader, .bt-import, .bt-private, .bt-link, .bt-dl, .bt-ads, .bt-cookie) { grid-column: auto; }
  .cap { min-width: 54px; height: 54px; font-size: 1.5rem; }
  .v-import { grid-template-columns: minmax(0, 1fr) auto; gap: 14px 10px; }
  .v-from { grid-column: 1 / -1; grid-template-columns: repeat(3, auto); justify-content: center; }
  .v-lane { height: 40px; }
}