/* outside.css - made by dev/outside/build-css.py from the Twiends design system, apps/outside/site.css,
   apps/outside/figures.css and apps/outside/x-kit.css. Edit those and run it again; never edit this file. */

:root {
    --ink: #111111;
    --ink-2: #4a4a48;
    --ink-3: #62625f;
    --on-yellow-2: #3a3a38;
    --line: #e4e4df;
    --paper: #ffffff;
    --grey: #f4f4f1;
    --yellow: #ffe45c;
    --yellow-tint: #fff8d6;
    --dot: rgba(17, 17, 17, 0.16);
    --focus: var(--ink);
    --done: #14935a;
    --done-soft: #b3efcf;
    --stop: #e0442b;
    --stop-soft: #ffbfb0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --space-14: 56px;
    --space-22: 88px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-full: 999px;
    --edge: 0 0 0 1.5px #111111;
    --edge-strong: 0 0 0 2px #111111;
    --edge-inset: inset 0 0 0 2px #111111;
    --ring: 0 0 0 2px #111111, 0 0 0 6px #ffe45c, 0 0 0 8px #111111;
    --ring-on-yellow: 0 0 0 2px #111111, 0 0 0 6px #ffffff, 0 0 0 8px #111111;
    --btn-ring: 0 0 0 3px #ffe45c, 0 0 0 5px #111111;
    --toast: 0 0 0 1.5px #111111, 3px 3px 0 #111111;
    --dock: 0 -10px 30px rgba(0, 0, 0, 0.12);
    --page-w: 1180px;
    --text-w: 640px;
    --bar-h: 60px;
    --strip-h: 54px;
    --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-logo: Gabarito, "Plus Jakarta Sans", sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}


/* Twiends: black and white like X, plus one yellow, and one dot that clears where the words sit. Every
   colour, space, radius and edge is a token from tokens.css; a class here never carries its own colour. */

body { margin: 0; font-family: var(--font-sans); font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- the page: the container every piece measures itself against, so a piece responds to the width it
        is given (a phone, a column, a preview) rather than to the window ---- */
.tw-page { container-type: inline-size; }
.tw-wrap { box-sizing: border-box; width: 100%; max-width: var(--page-w); margin-inline: auto; padding-left: max(var(--space-8), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-8), env(safe-area-inset-right, 0px)); }
@container (max-width: 759px) {
    .tw-wrap { padding-left: max(var(--space-4), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-4), env(safe-area-inset-right, 0px)); }
    .tw-hide-sm { display: none !important; }
}
@container (min-width: 760px) {
    .tw-show-sm { display: none !important; }
}
.tw-eyebrow { display: block; color: var(--ink-3); font-size: 12px; font-weight: 800; letter-spacing: .09em; line-height: 1.3; text-transform: uppercase; }

/* ---- the dot band: one dot, two grounds, five clear zones. The mask says where the dots are;
        plain .tw-dots is dots everywhere ---- */
.tw-dots { --dmask: none; position: relative; isolation: isolate; }
.tw-dots::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.3px); background-size: var(--space-3) var(--space-3); -webkit-mask-image: var(--dmask); mask-image: var(--dmask); }
.tw-on-grey { --hl: var(--yellow); background-color: var(--grey); }
.tw-on-yellow { --hl: var(--paper); background-color: var(--yellow); }
.tw-dots-middle { --dmask: radial-gradient(ellipse 65% 70% at 50% 45%, transparent 30%, #000 90%); }
.tw-dots-left { --dmask: radial-gradient(ellipse 60% 75% at 28% 45%, transparent 30%, #000 85%); }
.tw-dots-corner { --dmask: radial-gradient(circle at 100% 0%, #000 0%, transparent 60%); }
.tw-dots-bottom-left { --dmask: radial-gradient(ellipse 75% 55% at 0% 100%, transparent 35%, #000 90%); }
/* a hero that stacks, words over picture, clears the top instead: each hero sets it at its own breakpoint */
.tw-dots-top { --dmask: linear-gradient(to bottom, transparent 38%, #000 78%); }

/* ---- the highlight: yellow behind words on paper and grey, white behind words on yellow ---- */
.tw-hl { padding: 0 .05em; background: linear-gradient(transparent 55%, var(--hl, var(--yellow)) 55%, var(--hl, var(--yellow)) 92%, transparent 92%); color: inherit; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- the logo: the Overlap tile beside the wordmark ---- */
.tw-brand { display: inline-flex; align-items: center; gap: .35em; color: var(--ink); font-size: 26px; text-decoration: none; }
.tw-brand .tw-mark { width: 1.2em; height: 1.2em; }
.tw-mark { display: block; flex: none; }
.tw-mark .k { fill: var(--ink); }
.tw-mark .w { fill: var(--paper); }
.tw-mark .y { fill: var(--yellow); stroke: var(--ink); stroke-width: 3.5px; }
.tw-wordmark { font-family: var(--font-logo); font-size: 1em; font-weight: 800; letter-spacing: -.01em; line-height: 1; text-transform: lowercase; }
.tw-brand-lg .tw-wordmark { letter-spacing: -.04em; }

/* ---- buttons: every one a solid pill, so dots never show through ---- */
.tw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-full); background: var(--ink); color: var(--paper); font: inherit; font-size: 15px; font-weight: 800; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .15s; }
.tw-btn:hover { transform: translateY(-1px); }
.tw-btn svg { flex: none; width: 18px; height: 18px; }
.tw-btn-sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.tw-btn-sm svg { width: 16px; height: 16px; }
.tw-btn-lg { height: 58px; padding: 0 30px; font-size: 17.5px; }
.tw-btn-line { background: var(--paper); color: var(--ink); box-shadow: var(--edge-inset); }
.tw-btn-ring { box-shadow: var(--btn-ring); }
@media (prefers-reduced-motion: reduce) { .tw-btn { transition: none; } .tw-btn:hover { transform: none; } }

/* ---- chips (a fact, a state) and tags (a topic) ---- */
.tw-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--radius-full); background: var(--yellow-tint); color: var(--ink); font-size: 12.5px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: var(--edge); }
.tw-chip svg { flex: none; width: 14px; height: 14px; }
.tw-chip-dark { background: var(--ink); color: var(--paper); box-shadow: none; }
/* a state: ink words on a soft fill, the thin black edge and an icon, like every chip. The strong
   done and stop mark only small dots and icons, never words */
.tw-chip-done { background: var(--done-soft); }
.tw-chip-stop { background: var(--stop-soft); }
.tw-state { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 14px; font-weight: 700; }
.tw-state svg { flex: none; width: 16px; height: 16px; }
.tw-state-done svg { color: var(--done); }
.tw-state-stop svg { color: var(--stop); }
/* the backup, ink only: put tw-states-ink on a page or section. Done turns black with a yellow tick, a loss
   plain white; no new colours */
.tw-states-ink .tw-chip-done { background: var(--ink); color: var(--paper); }
.tw-states-ink .tw-chip-done svg { color: var(--yellow); }
.tw-states-ink .tw-chip-stop { background: var(--paper); color: var(--ink-2); }
.tw-states-ink .tw-state-done svg { color: var(--ink); }
.tw-states-ink .tw-state-stop { color: var(--ink-2); }
.tw-states-ink .tw-state-stop svg { color: currentColor; }
.tw-states-ink .tw-algo i { background: var(--ink); box-shadow: 0 0 0 3px var(--yellow); }
.tw-tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-full); background: var(--grey); color: var(--ink-2); font-size: 12px; font-weight: 800; line-height: 1; white-space: nowrap; }
.tw-tag-y { background: var(--yellow); color: var(--ink); box-shadow: var(--edge); }

/* ---- cards: one layer on a background. White with a thin black edge; the ring on the one that matters ---- */
.tw-card { box-sizing: border-box; border-radius: var(--radius-lg); background: var(--paper); color: var(--ink); box-shadow: var(--edge); }
.tw-card-ring { box-shadow: var(--ring); }
.tw-on-yellow .tw-card-ring { box-shadow: var(--ring-on-yellow); }
.tw-faq { display: grid; gap: 10px; align-content: start; padding: var(--space-6) 26px; }
.tw-faq-ic { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-full); background: var(--yellow); box-shadow: var(--edge); }
.tw-faq-ic svg { width: 21px; height: 21px; }
.tw-faq h3 { margin: 4px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.tw-faq p { margin: 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; }
.tw-faq p b { color: var(--ink); }

/* ---- faces ---- */
.tw-face { display: block; flex: none; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--yellow-tint); object-fit: cover; }
.tw-faces { display: flex; flex: none; }
.tw-faces img { display: block; width: 28px; height: 28px; border: 2px solid var(--paper); border-radius: var(--radius-full); background: var(--yellow-tint); object-fit: cover; }
.tw-faces img + img { margin-left: -9px; }
.tw-on-grey .tw-faces img { border-color: var(--grey); }
.tw-on-yellow .tw-faces img { border-color: var(--yellow); }
.tw-card .tw-faces img { border-color: var(--paper); }

/* ---- the top bar: white, a 2px black line under it. Signed out ends Sign in + Join free; signed in,
        Dashboard + your face in a ring ---- */
.tw-bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--paper); color: var(--ink); border-bottom: 2px solid var(--ink); }
.tw-bar-in { display: flex; align-items: center; gap: 6px; height: var(--bar-h); }
.tw-bar .tw-brand { margin-right: auto; }
.tw-bar-link { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: var(--radius-full); color: var(--ink-2); font-size: 14px; font-weight: 700; text-decoration: none; }
.tw-bar-link:hover, .tw-bar-link[aria-current="page"] { background: var(--grey); color: var(--ink); }
.tw-bar-grp { display: flex; align-items: center; gap: 6px; margin-left: 6px; }
.tw-bar .tw-btn { height: 40px; padding: 0 18px; font-size: 14px; }
.tw-me { display: inline-flex; flex: none; width: 36px; height: 36px; margin-left: 6px; overflow: hidden; border-radius: var(--radius-full); background: var(--yellow-tint); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--yellow), 0 0 0 5.5px var(--ink); }
.tw-me img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* inside a conversion hero the bar sits on the band: no ground, no line */
.tw-bar-on-band { position: static; background: transparent; border-bottom: 0; }
.tw-bar-on-band .tw-bar-in { height: 68px; }
.tw-bar-on-band .tw-bar-link:hover { background: var(--paper); }

/* ---- the sign-up strip: slim, white, one title. Hidden on a phone, where the dock takes over ---- */
.tw-strip { background: var(--paper); color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.tw-strip-in { display: flex; align-items: center; gap: 14px; min-height: var(--strip-h); padding-block: var(--space-2); }
.tw-strip-title { flex: 1; min-width: 0; color: inherit; font-size: 15px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; }
.tw-strip-title:hover { text-decoration: underline; text-underline-offset: 3px; }
@container (max-width: 759px) { .tw-strip { display: none; } }

/* ---- the phone dock: yellow, fixed to the bottom, on a phone only ---- */
.tw-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: none; align-items: center; gap: var(--space-3); padding: 10px max(var(--space-4), env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--space-4), env(safe-area-inset-left, 0px)); background: var(--yellow); color: var(--ink); border-top: 2px solid var(--ink); box-shadow: var(--dock); }
@container (max-width: 759px) { .tw-dock { display: flex; } }
.tw-dock-title { flex: 1; min-width: 0; color: inherit; font-size: 14.5px; font-weight: 800; line-height: 1.25; text-decoration: none; }

/* ---- the conversion hero: calm grey, dots clear in the left third, words left, the member card right ---- */
.tw-hero { overflow: hidden; }
.tw-hero-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: var(--space-12); padding-block: 28px 64px; }
.tw-hero-l { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); min-width: 0; }
.tw-hero h1 { margin: 0; font-size: clamp(38px, 5.6cqw, 68px); font-weight: 800; letter-spacing: -.05em; line-height: .98; text-wrap: balance; }
.tw-lead { max-width: 540px; margin: 0; font-size: clamp(17px, 1.6cqw, 20px); font-weight: 500; line-height: 1.5; }
.tw-hero .tw-btn-lg { margin-top: 6px; }
.tw-hero-r { position: relative; justify-self: center; width: min(100%, 380px); }
.tw-pill { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; padding: 0 14px; border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; box-shadow: var(--edge); }
.tw-pill b { font-weight: 800; }
.tw-stars { color: var(--ink); letter-spacing: 2px; }
.tw-safe { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: 14px; font-weight: 600; }
.tw-safe svg { flex: none; width: 16px; height: 16px; }
.tw-joined { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; font-weight: 600; }
.tw-joined b { font-weight: 800; font-variant-numeric: tabular-nums; }
@container (max-width: 899px) {
    .tw-hero-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-14); padding-top: var(--space-3); }
    .tw-hero.tw-dots-left { --dmask: linear-gradient(to bottom, transparent 38%, #000 78%); }
}

/* ---- the bright hero: yellow, dots clear in the left third, words left, a picture or animation right.
        Articles, tools, practice areas: pages that teach or do ---- */
.tw-bhero-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: var(--space-14); padding-block: var(--space-14) 64px; }
.tw-bhero-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tw-crumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--on-yellow-2); font-size: 13.5px; font-weight: 700; }
.tw-crumbs a { color: inherit; text-decoration: none; }
.tw-crumbs a:hover { color: var(--ink); text-decoration: underline; }
.tw-bhero h1 { margin: 0; font-size: clamp(32px, 3.7cqw, 46px); font-weight: 800; letter-spacing: -.045em; line-height: 1.04; text-wrap: balance; }
.tw-inshort { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tw-inshort li { position: relative; padding-left: 24px; font-size: 16.5px; font-weight: 600; line-height: 1.5; }
.tw-inshort li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 11px; border-radius: var(--radius-full); background: var(--hl, var(--yellow)); box-shadow: var(--edge); }
.tw-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) 10px; color: var(--on-yellow-2); font-size: 13.5px; font-weight: 600; }
.tw-meta .tw-mark { width: 28px; height: 28px; }
.tw-algo { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font-size: 12.5px; font-weight: 800; text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-algo i { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--done); box-shadow: 0 0 0 3px var(--done-soft); }
.tw-bhero-fig { min-width: 0; margin: 0; }
.tw-bhero-cap { display: grid; gap: 6px; margin-top: 26px; padding: 14px var(--space-4); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); }
.tw-bhero-cap b { font-size: 15px; font-weight: 800; line-height: 1.3; }
.tw-bhero-cap p { margin: 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
@container (max-width: 959px) {
    .tw-bhero-in { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 36px 44px; }
    .tw-bhero.tw-dots-left { --dmask: linear-gradient(to bottom, transparent 38%, #000 78%); }
}

/* ---- a post, as the race and the examples draw it ---- */
.tw-post { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); box-shadow: var(--edge); }
.tw-post.tw-card-ring { transform: translateY(-6px); box-shadow: var(--ring); }
.tw-on-yellow .tw-post.tw-card-ring { box-shadow: var(--ring-on-yellow); }
.tw-post-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tw-post-head .tw-face { width: 34px; height: 34px; }
.tw-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.tw-who b { font-size: 13.5px; font-weight: 800; }
.tw-who span { color: var(--ink-3); font-size: 12px; font-weight: 500; }
.tw-post p { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; }
.tw-badge { position: absolute; top: -12px; right: 12px; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--radius-full); background: var(--yellow); color: var(--ink); font-size: 11.5px; font-weight: 800; box-shadow: var(--edge); }
.tw-score { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); padding-top: 10px; border-top: 1px solid var(--line); }
.tw-score span { color: var(--ink-3); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tw-score b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tw-meter { height: 10px; overflow: hidden; border-radius: var(--radius-full); background: var(--grey); box-shadow: inset 0 0 0 1px var(--line); }
.tw-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.tw-meter-y > i { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---- the article: text on the left, each figure beside its section, sticky while you read it ---- */
.tw-article { display: flex; flex-direction: column; gap: 76px; padding-block: var(--space-14) 80px; }
.tw-sec { display: flex; flex-direction: column; gap: 18px; min-width: 0; max-width: 700px; }
.tw-sec-text { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tw-sec-text > * { margin: 0; }
.tw-sec h2 { font-size: clamp(26px, 3cqw, 34px); font-weight: 800; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
.tw-sec-text > p { font-size: 18px; line-height: 1.7; }
.tw-sec-text > p.tw-lead { font-size: clamp(17px, 1.6cqw, 20px); line-height: 1.5; }
.tw-sec-text a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tw-sec-text mark { padding: 0 .05em; background: linear-gradient(transparent 55%, var(--yellow) 55%, var(--yellow) 92%, transparent 92%); color: inherit; }
@container (min-width: 1000px) {
    .tw-sec { display: grid; grid-template-columns: minmax(0, var(--text-w)) minmax(0, 1fr); column-gap: var(--space-14); align-items: start; max-width: none; }
    .tw-sec > .tw-figure { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 86px); }
}
@container (max-width: 759px) {
    .tw-sec-text > p { font-size: 17px; }
}

/* ---- a figure: one layer on the grey ground, dots clear along the bottom from the left, where the caption sits ---- */
.tw-figure { margin: 0; min-width: 0; border-radius: var(--radius-lg); color: var(--ink); container-type: inline-size; }
.tw-figure-body { padding: 20px 20px 12px; }
.tw-figure-cap { max-width: 44ch; margin: 0; padding: 4px 20px 18px; color: var(--ink-2); font-size: 14px; font-weight: 600; line-height: 1.5; }
.tw-bars { display: grid; gap: 10px; }
.tw-bar-row { display: grid; grid-template-columns: minmax(0, 120px) minmax(0, 1fr) 48px; align-items: center; gap: var(--space-3); font-size: 14px; font-weight: 700; }
.tw-bar-row b { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.tw-track { height: 14px; overflow: hidden; border-radius: var(--radius-full); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.tw-track > i { display: block; min-width: 3px; height: 100%; border-radius: inherit; background: var(--ink); }
.tw-bar-row.tw-top .tw-track > i { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---- Read next: a grey band, dots in the top right corner, cards of guides and tools ---- */
.tw-next-in { display: grid; gap: 22px; padding-block: var(--space-12) var(--space-14); }
.tw-next-in h2 { margin: 4px 0 0; font-size: clamp(24px, 2.6cqw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.tw-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
@container (max-width: 899px) { .tw-next-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 559px) { .tw-next-grid { grid-template-columns: minmax(0, 1fr); } }
.tw-nx { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: var(--space-3); padding: 14px; border-radius: var(--radius-md); background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: var(--edge); transition: box-shadow .15s; }
.tw-nx:hover { box-shadow: 0 0 0 2.5px var(--ink); }
.tw-nx-ic { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-nx-ic svg { width: 20px; height: 20px; }
.tw-nx-tool .tw-nx-ic { background: var(--paper); }
.tw-nx b { display: block; font-size: 15px; font-weight: 800; line-height: 1.3; }
.tw-nx small { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }

/* ---- sections, figures and reviews on outside pages ---- */
.tw-sec-h { display: grid; justify-items: center; gap: 10px; margin-bottom: 36px; text-align: center; }
.tw-sec-h h2 { max-width: 760px; margin: 0; font-size: clamp(29px, 3.6cqw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; text-wrap: balance; }
.tw-sec-h p { max-width: 580px; margin: 0; color: var(--ink-2); font-size: 17px; }
.tw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; text-align: center; }
.tw-stat b { display: block; font-size: clamp(38px, 4.4cqw, 56px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tw-stat b span { background: linear-gradient(transparent 60%, var(--hl, var(--yellow)) 60%, var(--hl, var(--yellow)) 92%, transparent 92%); }
.tw-stat small { display: block; margin-top: 6px; color: var(--ink-2); font-size: 15.5px; font-weight: 600; }
.tw-rating { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; margin: 0; color: var(--ink-2); font-size: 16px; }
.tw-rating b { color: var(--ink); font-weight: 800; }
.tw-revs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); }
.tw-rev { display: grid; gap: 10px; align-content: start; margin: 0; padding: var(--space-4) 18px; }
.tw-rev-who { display: flex; align-items: center; gap: var(--space-3); }
.tw-rev-who b { display: block; font-size: 14.5px; font-weight: 800; }
.tw-rev-who small { color: var(--ink-2); font-size: 12.5px; font-weight: 600; }
.tw-initial { display: flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-full); background: var(--ink); color: var(--paper); font-size: 15px; font-weight: 800; line-height: 1; }
.tw-rev p { margin: 0; font-size: 14.5px; line-height: 1.5; }

/* ---- the member card: the way a hero shows a person ---- */
/* the member card: a yellow banner with chevrons in ink at 22% on a 16 by 12 tile. Chevrons are the card's
   pattern and the dots are the bands', so a card never blends into the band behind it. The yellow banner
   takes the ring with a white middle, so the ring's yellow never runs into the banner's */
.tw-profile { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); box-shadow: var(--ring-on-yellow); }
.tw-profile-ban { height: 64px; background-color: var(--yellow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M0 9 8 3 16 9' fill='none' stroke='%23111111' stroke-opacity='.22' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E"); background-size: 16px 12px; background-position: 0 2px; border-bottom: 1.5px solid var(--ink); }
/* the backup: a grey banner, and the ring goes back to black, yellow, black */
.tw-profile-grey { box-shadow: var(--ring); }
.tw-profile-grey .tw-profile-ban { background-color: var(--grey); }
.tw-profile-in { display: grid; gap: 14px; padding: 0 var(--space-5) var(--space-5); }
.tw-profile-top { display: flex; align-items: flex-end; gap: var(--space-3); margin-top: -32px; }
.tw-profile-top .tw-face { width: 72px; height: 72px; border: 4px solid var(--paper); box-shadow: var(--edge); }
.tw-profile-who { padding-bottom: 6px; line-height: 1.25; }
.tw-profile-who b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.tw-profile-who span { color: var(--ink-3); font-size: 14px; }
.tw-profile-by { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 14.5px; font-weight: 600; }
.tw-profile-by b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.tw-profile-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tw-toast { position: absolute; display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px 6px 6px; border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; box-shadow: var(--toast); }
.tw-toast img { width: 26px; height: 26px; border-radius: var(--radius-full); object-fit: cover; }
.tw-toast i { color: var(--ink-3); font-style: normal; font-weight: 600; }

/* ---- the follow list ---- */
.tw-list { display: grid; overflow: hidden; border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--edge); }
.tw-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px var(--space-3); }
.tw-row + .tw-row { border-top: 1px solid var(--line); }
.tw-row .tw-face { width: 34px; height: 34px; }
.tw-row b { display: block; overflow: hidden; font-size: 13.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.tw-row small { display: block; overflow: hidden; color: var(--ink-3); font-size: 12px; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.tw-row-lit { background: var(--yellow-tint); }

/* ---- The outside's own pieces, on top of the design system (code/Outside/, dev/docs/outside-site.md).
        dev/outside/build-css.py puts the design system's tokens and pieces and this file together into
        outside.css, the one stylesheet every outside page loads. What settles here moves into the
        design system. ---- */

@font-face {
    font-family: "Plus Jakarta Sans";
    src: url("fonts/plus-jakarta-sans.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

/* ---- the highlight is mint (Dave, 2026-10-22), in place of the design system's yellow until the design
        system is rewritten. The tokens keep their names, so every rule and figure still reads them; the
        rings take the highlight from --yellow ---- */
:root {
    --yellow: #7ee2b8;
    --yellow-tint: #e3f9ef;
    --ring: 0 0 0 2px #111111, 0 0 0 6px var(--yellow), 0 0 0 8px #111111;
    --btn-ring: 0 0 0 3px var(--yellow), 0 0 0 5px #111111;
}
.tw-logo [fill="#7ee2b8"] { fill: var(--yellow); }

/* ---- the look settled in the style lab (Dave, 2026-10-23), in place of the design system's until it is
        rewritten: the page 1220 wide, thin black edges (1px, and the rules between bands with them), reading
        words at 400 with their bold at 700 ---- */
:root {
    --page-w: 1220px;
    --edge: 0 0 0 1px #111111;
    --edge-strong: 0 0 0 1px #111111;
    --edge-inset: inset 0 0 0 1px #111111;
}
body { font-weight: 400; }
:is(.tw-prose, .tw-panel-text, .tw-faq, .tw-art-lead, .tw-lead) :is(b, strong) { font-weight: 700; }
.tw-strip { border-bottom-width: 1px; }

/* ---- the logo: the outlined lockup, so no logo font ever loads ---- */
.tw-brand .tw-logo { display: block; width: auto; height: 30px; }
@container (max-width: 759px) { .tw-bar .tw-brand .tw-logo { height: 26px; } }

/* ---- the top bar: the logo, the site's links, then Sign in at the end ---- */
.tw-bar .tw-brand { margin-right: 0; }
.tw-bar-nav { display: flex; align-items: center; gap: 2px; margin-left: var(--space-3); margin-right: auto; }
.tw-bar-glyph { display: none; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
/* on a phone the logo is its tile alone and the links are glyphs, home, Learn and the directory, so all three
   fit beside Sign in on any phone (Dave, 2026-10-24). The words stay for a screen reader. The glyphs sit
   centred in three equal columns as wide as the room beside Sign in allows, up to 180px, so they spread
   apart as the phone gets wider */
@container (max-width: 759px) {
    .tw-bar .tw-bar-in .tw-brand { flex: none; width: 30px; overflow: hidden; }
    .tw-bar .tw-bar-in .tw-logo { flex: none; max-width: none; height: 30px; }
    .tw-bar-nav { display: grid; flex: 1 1 0; grid-template-columns: repeat(3, minmax(0, 1fr)); justify-items: center; gap: 0; max-width: 180px; margin-left: var(--space-4); }
    .tw-bar-link { position: relative; justify-content: center; width: 44px; height: 44px; padding: 0; }
    .tw-bar-glyph { display: block; }
    .tw-bar-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .tw-bar .tw-btn { padding: 0 14px; }
}
@container (max-width: 359px) {
    .tw-bar-nav { margin-left: var(--space-2); }
    .tw-bar-link { width: 38px; height: 38px; }
}

/* ---- Sign in: the button goes straight to X; the arrow beside it opens the two ways in, X and the legacy
        app's manual sign-in. On a phone the menu is a sheet across the page under the bar ---- */
.tw-signin { display: inline-flex; align-items: center; }
.tw-signin .tw-btn:hover { transform: none; }
.tw-bar .tw-signin > .tw-btn { border-radius: var(--radius-full) 0 0 var(--radius-full); padding-right: 14px; }
.tw-signin-more { position: relative; }
.tw-signin-more > summary { list-style: none; user-select: none; }
.tw-signin-more > summary::-webkit-details-marker { display: none; }
.tw-bar .tw-signin-more > summary { border-radius: 0 var(--radius-full) var(--radius-full) 0; padding: 0 12px 0 10px; box-shadow: inset 1.5px 0 0 rgba(255, 255, 255, 0.3); }
.tw-signin-caret { flex: none; transition: transform .15s; }
.tw-btn .tw-signin-caret { width: 15px; height: 15px; }
.tw-signin-more[open] .tw-signin-caret { transform: rotate(180deg); }
.tw-signin-menu { position: absolute; top: calc(100% + 12px); right: 0; z-index: 2; box-sizing: border-box; width: 300px; padding: var(--space-2); border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); box-shadow: var(--toast); }
.tw-signin-menu a { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: var(--space-3); padding: 10px; border-radius: var(--radius-lg); color: var(--ink); font-size: 14.5px; font-weight: 700; line-height: 1.3; text-decoration: none; }
.tw-signin-menu a:hover, .tw-signin-menu a:focus-visible { background: var(--grey); }
.tw-signin-menu small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.tw-signin-glyph { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-lg); background: var(--grey); color: var(--ink); }
.tw-signin-glyph svg { width: 17px; height: 17px; }
.tw-signin-x .tw-signin-glyph { background: var(--ink); color: var(--paper); }
@container (max-width: 759px) {
    .tw-signin-more { position: static; }
    .tw-signin-menu { top: calc(100% + 8px); left: var(--space-2); right: var(--space-2); width: auto; }
}
@media (prefers-reduced-motion: reduce) { .tw-signin-caret { transition: none; } }

/* ---- signed in: the legacy app keeps a tw_hint cookie on .twiends.com (the layout's head puts tw-in on
        the page before the bar draws, outside.js draws the face). Sign in becomes the member's face and
        Dashboard, the face alone on a phone; the bar never turns into the promotion and the phone dock
        goes. The sign-up pieces inside a page stay as they are ---- */
.tw-bar-me { display: none; }
.tw-in .tw-bar-out { display: none; }
.tw-in .tw-bar-me { display: inline-flex; padding: 0 16px 0 6px; }
.tw-bar-face { display: grid; place-items: center; flex: none; width: 28px; height: 28px; overflow: hidden; border-radius: var(--radius-full); background: var(--yellow); color: var(--ink); font-size: 13px; font-weight: 800; }
.tw-bar-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
@container (max-width: 759px) { .tw-in .tw-bar-me { padding: 0 6px; } }
.tw-in .tw-dock { display: none; }
.tw-in .tw-has-dock .tw-foot-in { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }

/* ---- the phone dock sits outside .tw-page: a size container holds fixed children in place, so inside it
        the dock would stay at the foot of the page instead of the screen ---- */
@media (max-width: 759px) {
    .tw-dock { display: flex; }
    .tw-has-dock .tw-foot-in { padding-bottom: calc(var(--space-12) + 72px + env(safe-area-inset-bottom, 0px)); }
}

/* ---- the promotion in the top bar: once the hero has scrolled away (outside.js puts tw-promo-on on the
        page), the bar turns yellow and swaps its menu for the promotion; back at the top, the menu ---- */
.tw-bar { transition: background-color .2s; }
.tw-bar-promo { display: none; }
.tw-promo-on .tw-bar { background: var(--yellow); }
.tw-promo-on .tw-bar-in { display: none; }
.tw-promo-on .tw-bar-promo { display: flex; align-items: center; gap: var(--space-4); height: var(--bar-h); animation: tw-bar-in .25s ease-out; }
.tw-bar-promo .tw-brand { margin-right: auto; }
.tw-bar-promo-text { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; text-align: right; }
.tw-bar-promo .tw-btn { flex: none; height: 40px; padding: 0 18px; font-size: 14px; }
@keyframes tw-bar-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@container (max-width: 759px) {
    .tw-bar-promo { gap: var(--space-3); }
    .tw-bar-promo .tw-brand { flex: none; width: 26px; overflow: hidden; margin-right: 0; }    /* the tile alone */
    .tw-bar-promo .tw-logo { flex: none; max-width: none; }
    .tw-bar-promo-text { flex: 1; font-size: 13px; text-align: left; }
    .tw-bar-promo .tw-btn { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .tw-bar { transition: none; } .tw-promo-on .tw-bar-promo { animation: none; } }

/* ---- the side's promo box: on first view above Related & Popular, gone once the bar carries the promotion ---- */
/* the promotion under Related & popular pages (Dave, 2026-10-23): one title, the chart of what joining does, the
   button across the box. The box is the calm grey with dots in its top right corner and a thick black edge; the
   chart's follows are the highlight colour, edged in ink, and faint before joining */
.tw-side-join { position: relative; isolation: isolate; display: grid; gap: var(--space-3); margin-top: var(--space-8); padding: 18px; border-radius: var(--radius-lg); background: var(--grey); color: var(--ink); box-shadow: 0 0 0 2.5px var(--ink); }
.tw-side-join::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.3px); background-size: var(--space-3) var(--space-3); -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 70%); pointer-events: none; }
.tw-side-join .tw-sj-title { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; text-wrap: balance; }
.tw-side-join .tw-btn { justify-self: stretch; }
.tw-sj-chart { margin: 4px 0 0; }
.tw-sj-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tw-sj-key { display: flex; gap: 12px; font-size: 12px; font-weight: 700; }
.tw-sj-key > span { display: flex; align-items: center; gap: 5px; }
.tw-sj-key i { width: 9px; height: 9px; border-radius: 3px; background: var(--yellow); box-shadow: 0 0 0 1px var(--ink); }
.tw-sj-key .tw-sj-u i { background: var(--stop); box-shadow: none; }
.tw-sj-ex { padding: 2px 8px; border-radius: var(--radius-full); background: var(--paper); color: var(--ink-2); font-size: 11px; font-weight: 700; }
.tw-sj-plot { position: relative; margin-top: 12px; }
.tw-sj-plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.tw-sj-plot .g { stroke: currentColor; stroke-opacity: .14; stroke-width: 1; }
.tw-sj-plot .b { fill: var(--yellow); fill-opacity: .45; }
.tw-sj-plot .a { fill: var(--yellow); stroke: var(--ink); stroke-width: 1.2; }
.tw-sj-plot .u { fill: var(--stop); }
.tw-sj-plot .base { stroke: currentColor; stroke-opacity: .55; stroke-width: 1.5; }
.tw-sj-plot .join { stroke: currentColor; stroke-width: 1.6; stroke-dasharray: 3 3; }
.tw-sj-joined { position: absolute; left: 50%; top: 0; transform: translate(-50%, -35%); padding: 2px 9px; border-radius: var(--radius-full); background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 800; line-height: 16px; white-space: nowrap; }
.tw-sj-days { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; font-weight: 600; opacity: .75; }
@container (max-width: 999px) { .tw-side-join { display: none; } }

/* ---- an article's head on the calm grey dotted band: breadcrumbs and title; dots keep to the top right
        corner. The author's face sits on the band's bottom edge, half over the line, the name beside it
        below the line ---- */
.tw-art-hero { border-bottom: 2px solid var(--ink); }
.tw-art-hero-in { display: grid; justify-items: start; gap: var(--space-4); padding-block: var(--space-8) var(--space-12); }
.tw-art-hero h1 { max-width: 820px; margin: 0; font-size: clamp(34px, 4.8cqw, 56px); font-weight: 800; letter-spacing: -.045em; line-height: 1.03; text-wrap: balance; }
.tw-art-hero-by .tw-art-hero-in { padding-bottom: 0; }
.tw-art-hero .tw-byline { position: relative; z-index: 1; align-items: flex-end; gap: 12px; margin: var(--space-3) 0 -32px; }
.tw-art-hero .tw-byline img { width: 64px; height: 64px; box-shadow: 0 0 0 3px var(--paper), 0 0 0 4.5px var(--ink); }
.tw-art-hero .tw-byline span { padding-bottom: 6px; color: var(--ink-2); }
.tw-art-hero-by + .tw-doc { padding-top: calc(32px + var(--space-8)); }
.tw-art-hero-text { display: contents; }
.tw-art-hero .tw-byline i { margin: 0 8px; color: var(--ink-3); font-style: normal; }

/* the hero with the article's card picture beside its title (?look=pic on dev, being compared) */
.tw-art-hero-pic .tw-art-hero-in { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: var(--space-14); align-items: center; }
.tw-art-hero-pic .tw-art-hero-text { display: grid; justify-items: start; gap: var(--space-4); align-self: end; }
.tw-art-hero-fig { grid-column: 2; grid-row: 1; margin: 0 0 var(--space-12); }
.tw-art-hero-fig img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); background: var(--paper); box-shadow: 0 0 0 5px var(--paper), 0 0 0 6.5px var(--ink); }
@container (max-width: 899px) {
    .tw-art-hero-pic .tw-art-hero-in { grid-template-columns: minmax(0, 1fr); }
    .tw-art-hero-fig { display: none; }
}
@container (max-width: 759px) {
    .tw-art-hero-in { padding-block: var(--space-6) var(--space-8); }
    .tw-art-hero .tw-byline img { width: 52px; height: 52px; }
    .tw-art-hero .tw-byline { margin-bottom: -26px; }
    .tw-art-hero-by + .tw-doc { padding-top: calc(26px + var(--space-6)); }
}

/* ---- a wide document (the Learn hub's contents): the whole page width, no side column ---- */
.tw-doc-wide .tw-doc-art { max-width: none; }
@container (min-width: 800px) { .tw-doc-wide .tw-doc-grid { grid-template-columns: minmax(0, 1fr); } }
.tw-doc-wide .tw-prose > p, .tw-doc-wide .tw-prose .cent > p { max-width: 760px; margin-inline: auto; }
.tw-doc-wide .tw-prose .cent > h2 { margin-top: 1.4em; text-align: left; }
.tw-doc-wide .tw-prose :is(:has(> .lrn_box), .lrn_list) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tw-doc-wide .tw-prose :is(.lrn_box, .lrn_row) .title { font-size: 17px; }
@container (max-width: 759px) {
    .tw-doc-wide .tw-prose :is(:has(> .lrn_box), .lrn_list) { grid-template-columns: minmax(0, 1fr); }
    .tw-doc-wide .tw-prose :is(.lrn_box, .lrn_row) .title { font-size: 15.5px; }
}

/* ---- the footer: the logo and the trademark note, the links in three groups, the years ---- */
.tw-foot { background: var(--paper); border-top: 1px solid var(--ink); }
.tw-foot-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8) var(--space-14); padding-block: var(--space-12) calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
.tw-foot-brand { display: grid; justify-items: start; gap: var(--space-4); align-content: start; }
.tw-foot .tw-brand .tw-logo { height: 26px; }
.tw-foot-note { max-width: 460px; margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.55; }
.tw-foot-cols { display: grid; grid-template-columns: repeat(3, auto); gap: var(--space-8) var(--space-12); align-content: start; }
.tw-foot-cols div { display: grid; align-content: start; gap: 10px; }
.tw-foot-cols h2 { margin: 0 0 2px; color: var(--ink-3); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.tw-foot-cols a { color: var(--ink); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.tw-foot-cols a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tw-foot-year { grid-column: 1 / -1; margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
@container (max-width: 759px) {
    .tw-foot-in { grid-template-columns: minmax(0, 1fr); }
    .tw-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}

/* ---- a document: an article or an ordinary page, in the reading column ---- */
.tw-doc { padding-block: var(--space-8) var(--space-14); }
.tw-doc .tw-crumbs { margin-bottom: var(--space-5); color: var(--ink-3); }
.tw-doc .tw-crumbs a:hover { color: var(--ink); }
.tw-doc-art { max-width: var(--text-w); }
.tw-doc-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
.tw-doc-head h1 { margin: 0; font-size: clamp(32px, 4.2cqw, 46px); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; text-wrap: balance; }
.tw-byline { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-2); font-size: 14.5px; font-weight: 700; }
.tw-byline img { width: 36px; height: 36px; border-radius: var(--radius-full); object-fit: cover; box-shadow: var(--edge); }

/* the document and its side column: Related & popular pages beside the text on a wide page, held in view
   while you read; after the text on a narrower one */
.tw-doc-grid { display: grid; gap: var(--space-12); }
.tw-doc-side { display: grid; align-content: start; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--ink); }
.tw-doc-side h2 { margin: 0; }
/* the related pages (Dave, 2026-10-23): a bold heading in sentence case, then plain rows, no box, each a square
   picture (or the icon) and its title, small */
.tw-doc-side-h { display: block; color: var(--ink); font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.tw-doc-side-list { display: grid; gap: 14px; }
.tw-doc-side .tw-nx { grid-template-columns: 34px 1fr; padding: 0; border-radius: 0; background: none; box-shadow: none; }
.tw-doc-side .tw-nx:hover { box-shadow: none; }
.tw-doc-side .tw-nx:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tw-doc-side .tw-nx-ic { width: 34px; height: 34px; border-radius: 10px; }
.tw-doc-side .tw-nx b { font-size: 13.5px; font-weight: 600; }
/* a related page with a card picture shows it in place of the icon */
.tw-doc-side .tw-nx-pic { grid-template-columns: 52px minmax(0, 1fr); }
.tw-nx-pic img { display: block; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; box-shadow: inset 0 0 0 1px var(--line); }
/* the home page as a related page: the logo's tile in a picture's place, drawn whole rather than cropped */
.tw-nx-home img { object-fit: contain; box-shadow: none; }

/* ---- the closing call at an article's end: the side box's words on the calm grey band ---- */
.tw-closer { border-top: 1px solid var(--ink); }
.tw-closer-in { display: grid; justify-items: center; gap: var(--space-3); padding-block: var(--space-14); text-align: center; }
.tw-closer h2 { margin: 0; font-size: clamp(26px, 3.2cqw, 38px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; text-wrap: balance; }
.tw-closer p { margin: 0 0 var(--space-3); color: var(--ink-2); font-size: 18px; }
.tw-closer + .tw-foot { border-top: 0; }
/* from 800 across, the column, the gap and the rail are fixed shares of the page (Dave, 2026-10-23), so all
   three shrink together: 680 + 136 + 340 at the full 1220, 433 + 87 + 216 at an 800px window; one column under
   that. The rail is held in view beside the text; its promotion box still hides under 1000. A page with no
   rail (page.html) keeps its reading column */
@container (min-width: 800px) {
    .tw-doc-grid { grid-template-columns: minmax(0, 680fr) minmax(0, 340fr); column-gap: 11.765%; }
    .tw-doc-grid > .tw-doc-art { max-width: none; }
    .tw-doc-side { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 86px); align-self: start; padding-top: 0; border-top: 0; }
}

/* ---- prose: a document's body as written, headings, lists, tables, pictures and notes ---- */
.tw-prose { font-size: 18px; line-height: 1.6; overflow-wrap: break-word; }
.tw-prose > * { margin: 0 0 1.05em; }
.tw-prose > :last-child { margin-bottom: 0; }
.tw-prose h1, .tw-prose h2 { margin: 1.7em 0 .5em; font-size: clamp(24px, 2.6cqw, 30px); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance; }
.tw-prose h3 { margin: 1.5em 0 .4em; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.tw-prose h4, .tw-prose h5 { margin: 1.3em 0 .3em; font-size: 18px; font-weight: 800; line-height: 1.3; }
.tw-prose > h2:first-child, .tw-prose > h3:first-child { margin-top: 0; }
/* A LINK IN WORDS PEOPLE READ (Dave, 2026-10-21): green #3e9a7b at 450, no underline until you point at it.
   One rule for the articles, their leads, the home page's panels, the sections and the questions; buttons,
   cards and pictures that are links keep their own look */
:root { --link: #3e9a7b; --link-weight: 450; }
:is(.tw-prose, .tw-art-lead, .tw-panel-text, .tw-sec-text, .tw-lead, .tw-faq) a:not(.tw-btn, .lrn_box, .lrn_row, .tw-pic, .tw-chap, .tw-nx) { color: var(--link); font-weight: var(--link-weight); text-decoration: none; }
:is(.tw-prose, .tw-art-lead, .tw-panel-text, .tw-sec-text, .tw-lead, .tw-faq) a:not(.tw-btn, .lrn_box, .lrn_row, .tw-pic, .tw-chap, .tw-nx):hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tw-prose strong, .tw-prose b { font-weight: 700; }
.tw-prose ul, .tw-prose ol { padding-left: 1.35em; }
.tw-prose li { margin: .35em 0; }
.tw-prose li > p { margin: .3em 0; }
.tw-prose ol > li::marker { font-weight: 800; }
/* a picture in a body wears a white double ring (Dave, 2026-10-23); the lists, chapters, comparisons and the X
   kit's pieces keep their own */
.tw-prose img { display: block; max-width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: 0 0 0 2px var(--ink), 0 0 0 6px var(--paper), 0 0 0 8px var(--ink); }
.tw-prose p > img:only-child { margin-block: .4em; }
.tw-prose figure { margin-inline: 0; }
.tw-prose figcaption { margin-top: 8px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.tw-prose blockquote { margin-inline: 0; padding: 14px 18px; border-radius: var(--radius-lg); background: var(--grey); }
.tw-prose blockquote > :last-child { margin-bottom: 0; }
.tw-prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.tw-prose th, .tw-prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tw-prose th { border-bottom: 2px solid var(--ink); font-weight: 800; }
.tw-prose code { padding: .1em .3em; border-radius: 4px; background: var(--grey); font-family: var(--font-mono); font-size: .88em; }
.tw-prose pre { overflow-x: auto; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--grey); }
.tw-prose pre code { padding: 0; background: none; }
.tw-prose hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line); }
/* an example post in an article's text, as X would show it: the design system's post card, its face round */
.tw-prose .tw-post { max-width: 460px; margin-block: 0 1.4em; }
.tw-prose .tw-post .tw-face { border-radius: var(--radius-full); box-shadow: none; }
.tw-prose .tw-post p { margin: 0; font-size: 15.5px; font-weight: 500; line-height: 1.5; }
@container (max-width: 759px) { .tw-prose { font-size: 17px; } }

/* the legacy articles' note box: one layer, the yellow tint with the thin black edge */
.tw-prose .tip-box { padding: 18px 20px; border-radius: var(--radius-lg); background: var(--yellow-tint); box-shadow: var(--edge); }
.tw-prose .tip-box > * { margin: 0 0 .7em; }
.tw-prose .tip-box > :last-child { margin-bottom: 0; }
.tw-prose .tip-box h3, .tw-prose .tip-box h4 { margin: 0 0 .35em; font-size: 18px; }

/* a picture in a body (Dave, 2026-10-23): the picture at its own size, up to the text width, on the calm grey
   dotted ground. The ground is a margin round it, 44px above and below and --pic-side at either side, centred
   on the text, so a picture the width of the text has its ground out past the text in the margins: 50px, or
   the room beside the text where that is less (the gutter on a phone), so it stays on the page. It meets the
   text above and below with no space. Its edges fade unevenly, most at two sides, a different fade on each of
   five pictures in turn, so pictures in a row never fade alike; the ground and its dots are one layer (::before)
   so the fade never reaches the picture. "left" pictures sit beside the text on a wide page */
.tw-prose { --pic-gut: max(var(--space-8), env(safe-area-inset-left, 0px)); }
@container (max-width: 759px) { .tw-prose { --pic-gut: max(var(--space-4), env(safe-area-inset-left, 0px)); } }
.tw-prose .tw-pic { --pic-side: min(50px, max(var(--pic-gut), (100cqw - var(--page-w)) / 2 + var(--pic-gut))); position: relative; isolation: isolate; display: block; margin: 1.5em 0; padding: 44px; border-radius: 14px; }
.tw-prose .tw-pic::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(circle, var(--dot) 1px, transparent 1.3px) 0 0 / var(--space-3) var(--space-3), var(--pic-ground, var(--grey)); -webkit-mask-image: var(--pic-fade); mask-image: var(--pic-fade); mask-composite: intersect; pointer-events: none; }
.tw-prose .tw-pic img { margin-inline: auto; background: var(--paper); }
body { overflow-x: clip; }        /* a ground out past the text never scrolls the page sideways */
.tw-prose .tw-pic:not(.tw-pic-left) { box-sizing: border-box; width: fit-content; max-width: calc(100% + 2 * var(--pic-side)); margin: 0 calc(-1 * var(--pic-side)); padding-inline: var(--pic-side); left: calc(50% + var(--pic-side)); translate: -50% 0; }
.tw-prose .tw-pic:not(.tw-pic-left) figcaption { contain: inline-size; }
/* an X kit figure sizes itself from the text width (it has no width of its own to hug), so its ground is the
   text width and the sides; this outweighs x-kit.css's own padding */
.tw-prose .tw-pic.tw-xfig { width: calc(100% + 2 * var(--pic-side)); padding: 44px var(--pic-side); }
.tw-prose > :is(p, ul, ol):has(+ .tw-pic:not(.tw-pic-left)) { margin-bottom: 0; }
/* the five fades: black keeps the ground, clear lets the page through; the left and right fade across the
   ground beside the picture (shares of --pic-side), the top and bottom in % of the ground, and the two meet */
.tw-prose .tw-pic { --pic-fade: linear-gradient(to right, transparent, #000 calc(var(--pic-side) * 1.067), #000 calc(100% - var(--pic-side) * .267), transparent), linear-gradient(to bottom, transparent, #000 10%, #000 62%, transparent); }
.tw-prose .tw-pic:nth-child(5n + 2 of .tw-pic) { --pic-fade: linear-gradient(to right, transparent, #000 calc(var(--pic-side) * .267), #000 calc(100% - var(--pic-side) * 1), transparent), linear-gradient(to bottom, transparent, #000 36%, #000 88%, transparent); }
.tw-prose .tw-pic:nth-child(5n + 3 of .tw-pic) { --pic-fade: linear-gradient(to right, transparent, #000 calc(var(--pic-side) * 1.2), #000 calc(100% - var(--pic-side) * .4), transparent), linear-gradient(to bottom, transparent, #000 38%, #000 90%, transparent); }
.tw-prose .tw-pic:nth-child(5n + 4 of .tw-pic) { --pic-fade: linear-gradient(to right, transparent, #000 calc(var(--pic-side) * .4), #000 calc(100% - var(--pic-side) * 1.133), transparent), linear-gradient(to bottom, transparent, #000 8%, #000 60%, transparent); }
.tw-prose .tw-pic:nth-child(5n + 5 of .tw-pic) { --pic-fade: linear-gradient(to right, transparent, #000 calc(var(--pic-side) * .6), #000 calc(100% - var(--pic-side) * 1), transparent), linear-gradient(to bottom, transparent, #000 42%, #000 92%, transparent); }
@container (min-width: 760px) {
    .tw-prose .tw-pic-left { float: left; max-width: 45%; margin: .3em 24px 1em 0; }
    .tw-prose h2, .tw-prose h3 { clear: both; }
}
.tw-prose .source { margin-top: -.6em; color: var(--ink-3); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.tw-prose .cent { text-align: center; }
.tw-prose .tw-intro { margin-bottom: 1.6em; color: var(--ink-2); font-size: 19px; }

/* the legacy article lists (the Learn hub's sections, its cards, and its Blog, its rows, drawn the same; Dave
   2026-10-23): one article a row, its picture small at the left and its title, a hairline
   under each, no box; two across on a wide page */
.tw-prose :has(> .lrn_box), .tw-prose .lrn_list { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 48px; text-align: left; }
.tw-prose .lrn_list { margin-top: 2rem; }
.tw-prose :is(.lrn_box, .lrn_row) { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; column-gap: var(--space-4); padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.tw-prose .lrn_box .pic { display: block; }
.tw-prose :is(.lrn_box .pic, .lrn_row) img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); box-shadow: none; }
.tw-prose :is(.lrn_box, .lrn_row) .title { font-size: 15.5px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; text-align: left; }
.tw-prose :is(.lrn_box, .lrn_row):hover .title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

/* a video: full width, its own shape */
.tw-prose .lrn_vid { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--edge); }
.tw-prose .lrn_vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* the legacy pages' marked words: good, bad and so-so in the state colours, underlined, and the code a
   page offers to copy (an infographic's embed) */
.tw-prose .tw-good { color: var(--done); font-weight: 700; }
.tw-prose .tw-bad { color: var(--stop); font-weight: 700; }
.tw-prose .tw-meh { color: #b86a00; font-weight: 700; }
.tw-prose .tw-u { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tw-prose .tw-embed { box-sizing: border-box; display: block; width: 100%; min-height: 96px; padding: 12px 14px; border: 0; border-radius: var(--radius-md); background: var(--grey); color: var(--ink-2); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; resize: vertical; box-shadow: inset 0 0 0 1px var(--line); }

/* buttons in a body (the status pages' Rules, Terms, Home) */
.tw-prose .tw-btn { text-decoration: none; }
.tw-prose .tw-btn:hover { text-decoration: none; }
.tw-prose .tw-btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* the legacy guides' "don't do this" label, and their side-by-side comparison cards */
.tw-prose .warning { display: inline-block; margin-bottom: .2em; padding: 3px 12px; border-radius: var(--radius-full); background: var(--stop-soft); color: var(--stop); font-size: 13px; font-weight: 800; line-height: 1.4; }
.tw-prose :has(> .compare) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.tw-prose :has(> .compare) > :not(.compare) { grid-column: 1 / -1; margin: 0; }
.tw-prose .compare { padding: 12px; border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--edge); font-size: 15px; line-height: 1.4; text-align: center; }
.tw-prose .compare img { width: 100%; margin-bottom: 10px; border-radius: 8px; box-shadow: none; }
.tw-prose .compare p { margin: 0 0 4px; }

/* ---- a page's own promotion in its head (the keyword pages): its words, then Sign in ---- */
.tw-art-sub { max-width: 760px; margin: calc(var(--space-2) * -1) 0 0; color: var(--ink-2); font-size: clamp(19px, 2.2cqw, 24px); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
.tw-art-lead { max-width: 720px; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.tw-art-lead > * { margin: 0 0 .6em; }
.tw-art-lead > :last-child { margin-bottom: 0; }
/* a lead's words the legacy site kept off phones (its hide_mobile) stay off them */
@container (max-width: 480px) { .tw-art-lead .hide_mobile { display: none; } }

/* ---- a chaptered guide: the chapter cards after the intro, then each chapter opens on the calm grey
        dotted ground with its picture, number and title, and its sections follow in the text column ---- */
.tw-prose :where(.tw-intro, .tw-chapter, .tw-chapter-sec, .tw-chapter-lead) > * { margin: 0 0 1.05em; }
.tw-prose :where(.tw-intro, .tw-chapter, .tw-chapter-sec, .tw-chapter-lead) > :last-child { margin-bottom: 0; }
.tw-prose .tw-chapters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); margin-block: 1.6em 2.6em; }
.tw-prose .tw-chap { display: grid; grid-template-columns: 56px 1fr; align-items: center; column-gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--radius-md); background: var(--paper); color: var(--ink); line-height: 1.25; text-decoration: none; box-shadow: var(--edge); }
.tw-prose .tw-chap:hover { box-shadow: 0 0 0 2.5px var(--ink); }
.tw-prose .tw-chap img { grid-row: span 2; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; box-shadow: none; }
.tw-prose .tw-chap-num { align-self: end; color: var(--ink-3); font-size: 13px; font-weight: 800; }
.tw-prose .tw-chap b { align-self: start; font-size: 15px; }
.tw-prose .tw-chapter { margin-top: 2.8em; }
.tw-prose .tw-chapter, .tw-prose .tw-chapter-sec[id] { scroll-margin-top: 84px; }
.tw-prose .tw-chapter-head { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-6); margin-bottom: 1.8em; padding: 26px 28px; border-radius: var(--radius-lg); background: var(--grey); box-shadow: var(--edge); }
.tw-prose .tw-chapter-head::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.3px); background-size: var(--space-3) var(--space-3); -webkit-mask-image: radial-gradient(ellipse 70% 90% at 100% 0, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 90% at 100% 0, #000 30%, transparent 75%); pointer-events: none; }
.tw-prose .tw-chapter-head img { grid-column: 2; grid-row: 1 / span 3; width: 116px; height: 116px; border-radius: 18px; object-fit: cover; box-shadow: var(--edge); }
.tw-prose .tw-chapter-num { grid-column: 1; margin: 0 0 4px; color: var(--ink-2); font-size: 14px; font-weight: 800; }
.tw-prose .tw-chapter-head h2 { grid-column: 1; margin: 0; }
.tw-prose .tw-chapter-lead { grid-column: 1 / -1; margin-top: 16px; font-size: 17px; }
.tw-prose .tw-chapter-sec + .tw-chapter-sec { margin-top: 2em; }
@container (max-width: 759px) {
    .tw-prose .tw-chapter-head { padding: 20px; column-gap: var(--space-4); }
    .tw-prose .tw-chapter-head img { width: 72px; height: 72px; border-radius: 14px; }
}

/* ---- a guide in one column (layout: guide, Dave 2026-10-23), made for a phone as the legacy guides were: the
        intro and the chapter cards, then each chapter opens on a full-width band of the highlight colour with its
        dots, like a page's hero (its picture round in the double ring the hero's card has, its number, title and
        lead), and its sections follow as full-width bands, white and calm grey in turn. Every band keeps its
        words in one column on the left, in line with the logo (Dave, 2026-10-23), by its padding, so the body
        needs no wrapper of its own; the space on the right is for the floating panel to come ---- */
.tw-guide-doc { --guide-w: 700px; --guide-gut: max(var(--space-8), env(safe-area-inset-left, 0px)); --guide-l: max(var(--guide-gut), (100% - var(--page-w)) / 2 + var(--guide-gut)); }
.tw-guide-doc > :is(.tw-intro, .tw-chapters), .tw-guide-doc :is(.tw-chapter-head, .tw-chapter-sec) { box-sizing: border-box; padding-left: var(--guide-l); padding-right: max(var(--guide-gut), 100% - var(--guide-l) - var(--guide-w)); }
.tw-guide-doc.tw-prose > *, .tw-guide-doc .tw-chapter, .tw-guide-doc .tw-chapter > *, .tw-guide-doc .tw-chapter-sec + .tw-chapter-sec { margin: 0; }
.tw-guide-doc > .tw-intro { padding-top: var(--space-12); }
.tw-guide-doc > .tw-chapters { padding-block: var(--space-8) var(--space-14); }
/* the chapter list as the legacy guide drew it: each chapter's picture round, its number and title under it */
.tw-guide-doc .tw-chapters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); }
.tw-guide-doc .tw-chap { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; padding: 0; background: none; box-shadow: none; text-align: center; }
.tw-guide-doc .tw-chap:hover { box-shadow: none; }
.tw-guide-doc .tw-chap img { grid-row: auto; width: 100%; max-width: 160px; height: auto; aspect-ratio: 1; margin-bottom: var(--space-4); border-radius: var(--radius-full); transition: transform .15s; }
.tw-guide-doc .tw-chap:hover img { transform: translateY(-3px); }
.tw-guide-doc .tw-chap-num { align-self: auto; margin-bottom: 4px; font-size: 12px; letter-spacing: .09em; text-transform: uppercase; }
.tw-guide-doc .tw-chap b { align-self: auto; font-size: 15.5px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
.tw-guide-doc .tw-chap:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .tw-guide-doc .tw-chap img { transition: none; } }
/* a chapter's band: on a phone or a tablet its picture leads, the dots in the corner across from it; on a
   computer the picture sits big in the band's right side, past the column, as a page's hero has its picture,
   and the words have the column to themselves (Dave, 2026-10-23) */
.tw-guide-doc .tw-chapter-head { --hl: var(--paper); grid-template-columns: minmax(0, 1fr); padding-block: var(--space-14); border-radius: 0; background: var(--yellow); box-shadow: none; }
.tw-guide-doc .tw-chapter-head::before { border-radius: 0; -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 60%); mask-image: radial-gradient(circle at 100% 0%, #000 0%, transparent 60%); }
.tw-guide-doc .tw-chapter-head img { grid-column: 1; grid-row: auto; width: 168px; height: 168px; margin: 8px 0 var(--space-6) 8px; border-radius: var(--radius-full); background: var(--paper); box-shadow: var(--ring-on-yellow); }
.tw-guide-doc .tw-chapter-num { margin-bottom: 6px; color: var(--on-yellow-2); }
.tw-guide-doc .tw-chapter-head h2 { font-size: clamp(30px, 4cqw, 42px); letter-spacing: -.04em; line-height: 1.08; }
.tw-guide-doc .tw-chapter-lead { margin-top: var(--space-6); color: var(--on-yellow-2); font-size: 18px; }
.tw-guide-doc .tw-chapter-lead :is(b, strong) { color: var(--ink); }
.tw-guide-doc .tw-chapter-head a:not(.tw-btn) { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tw-guide-doc .tw-chapter-sec { padding-block: var(--space-12); }
.tw-guide-doc .tw-chapter-sec:nth-of-type(even) { background: var(--grey); }
/* what sits on the calm grey in a white band sits on white in a grey one */
.tw-guide-doc .tw-chapter-sec:nth-of-type(even) :is(blockquote, pre, code, .tw-embed) { background-color: var(--paper); }
.tw-guide-doc .tw-chapter-sec:nth-of-type(even) .tw-pic { --pic-ground: var(--paper); }
.tw-guide-doc .tw-chapter-sec > :is(h3:first-child, .warning:first-child + h3) { margin: 0 0 .6em; font-size: clamp(23px, 2.6cqw, 28px); letter-spacing: -.03em; line-height: 1.2; }
.tw-guide-doc .tw-chapter-sec > .warning:first-child { margin-bottom: .5em; }
@container (min-width: 1100px) {
    /* the words in rows 2 to 4, an even row above and below them, so they sit level with the picture's middle */
    .tw-guide-doc .tw-chapter-head { grid-template-columns: minmax(0, var(--guide-w)) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--space-12); padding-right: var(--guide-l); }
    .tw-guide-doc .tw-chapter-head::before { -webkit-mask-image: radial-gradient(ellipse 60% 75% at 28% 45%, transparent 30%, #000 85%); mask-image: radial-gradient(ellipse 60% 75% at 28% 45%, transparent 30%, #000 85%); }
    .tw-guide-doc .tw-chapter-head img { grid-column: 2; grid-row: 1 / -1; align-self: center; justify-self: center; width: min(100% - 16px, 300px); height: auto; aspect-ratio: 1; margin: 8px; }
    .tw-guide-doc .tw-chapter-num { grid-row: 2; }
    .tw-guide-doc .tw-chapter-head h2 { grid-row: 3; }
    .tw-guide-doc .tw-chapter-lead { grid-column: 1; grid-row: 4; }
}
@container (max-width: 759px) {
    .tw-guide-doc { --guide-gut: max(var(--space-4), env(safe-area-inset-left, 0px)); }
    .tw-guide-doc > .tw-intro { padding-top: var(--space-8); }
    .tw-guide-doc > .tw-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-4); padding-block: var(--space-8) var(--space-12); }
    .tw-guide-doc .tw-chap img { max-width: 150px; margin-bottom: var(--space-3); }
    /* an odd one out at the end sits in the middle */
    .tw-guide-doc .tw-chap:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .tw-guide-doc .tw-chapter-head { padding-block: var(--space-12); }
    .tw-guide-doc .tw-chapter-head img { width: 128px; height: 128px; }
    .tw-guide-doc .tw-chapter-lead { margin-top: var(--space-5); font-size: 17px; }
    .tw-guide-doc .tw-chapter-sec { padding-block: var(--space-8) var(--space-12); }
}

/* the guide's chapters beside it, held in view with the promotion */
.tw-doc-side-toc { display: grid; margin-bottom: var(--space-3); border-left: 2px solid var(--line); }
.tw-doc-side-toc a { padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--ink-2); font-size: 14.5px; font-weight: 700; line-height: 1.3; text-decoration: none; }
.tw-doc-side-toc a:hover { border-left-color: var(--ink); color: var(--ink); }

/* ---- pages drawn in bands (the landing template): the home page, pricing, press, contact ---- */
.tw-land h2 { margin: 0; font-size: clamp(28px, 3.4cqw, 40px); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; text-wrap: balance; }
.tw-land h2 a, .tw-land .tw-hero h1 a { color: inherit; text-decoration: none; }
.tw-land .tw-btn-lg small { font-size: .75em; font-weight: 700; }

/* the home page's hero, centred as the live page draws it: the heading, you with your count and a few faces
   round you, faces flying in from the whole band (figures/stargate.js, into .tw-sg-sky), the press logos, then
   the button sitting on the band's bottom edge. --x/--y place a face round you on a computer, --sx/--sy on a
   phone; --c/--r pick the face from /img/stargate/people.webp (dev/outside/avatars/build-avatars.py).
   The flying faces pass over the logos and under the heading, you and the button (Dave, 2026-10-23) */
.tw-home-hero { overflow: visible; overflow-x: clip; z-index: 1; }
/* the home page has no ink lines, to try (Dave, 2026-10-22): none between its bands, so none under the top bar
   or over the footer either, and its pictures sit in a white ring alone */
.tw-page:has(.tw-home-hero) .tw-bar { border-bottom: 0; }
.tw-page:has(.tw-home-hero) .tw-foot { border-top: 0; }
.tw-sg-sky { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
/* on a computer you sit centred between the heading and the logos (Dave, 2026-10-23): --sg-space from the
   heading to the top of your white ring, and the same from its bottom to the logos, which is the count's
   16px gap and 24px line less the 5px ring (35px) less than the margin over the logos. The space over the
   heading and under the logos gives way on a short screen */
.tw-home-hero-in { --sg-space: 100px; position: relative; display: grid; justify-items: center; padding-top: clamp(40px, 7vh, 72px); text-align: center; }
.tw-home-hero h1 { position: relative; z-index: 2; max-width: 940px; margin: 0; font-size: clamp(34px, 5cqw, 60px); font-weight: 800; letter-spacing: -.045em; line-height: 1.1; text-wrap: balance; }
.tw-home-hero h1 a { white-space: nowrap; }
.tw-sg { position: relative; z-index: 2; display: grid; justify-items: center; gap: 16px; margin: calc(var(--sg-space) + 5px) 0 0; }
.tw-sg-you { position: relative; width: 116px; height: 116px; }
.tw-sg-you img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; border-radius: var(--radius-full); background: var(--paper); box-shadow: 0 0 0 5px var(--paper), 0 0 0 8px var(--yellow), 0 0 0 9.5px var(--ink); }
/* your count, in bold words on the band (Dave, 2026-10-23, in place of a white pill) */
.tw-sg-count { font-size: 18px; font-weight: 800; letter-spacing: -.01em; line-height: 24px; }
.tw-sg b { font-variant-numeric: tabular-nums; }
.tw-sg-face { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: var(--radius-full); background: url(/img/stargate/people.webp) calc(var(--c) * -56px) calc(var(--r) * -56px) / 672px auto no-repeat; transform: translate(var(--x), var(--y)); }
.tw-sg-new { opacity: var(--o, .9); }
.tw-sg-go { opacity: 0; transform: translate(0, 0) scale(.35); transition: transform 1.2s cubic-bezier(.55, 0, .8, .3), opacity 1.2s cubic-bezier(.9, 0, 1, .6); }
.tw-home-cta { position: relative; z-index: 3; }
/* its margins named through the hero, to outweigh .tw-hero .tw-btn-lg's */
.tw-home-hero .tw-home-cta { margin: clamp(36px, 5.5vh, 52px) 0 -29px; }
/* on the highlight band (Dave, 2026-10-22) you sit in a white ring, and the button's ring is white and ink */
.tw-home-hero.tw-on-yellow .tw-sg-you img { box-shadow: 0 0 0 5px var(--paper); }
.tw-home-hero.tw-on-yellow .tw-btn-ring { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
/* on a phone the band fills the first screen (100svh is the screen with the browser's bars showing, so it ends
   at the fold) and runs down it: the heading, you, the button under you, the logos at its foot, with the room
   left over shared between the gaps (the fr rows, each at least the row gap either side of it), so nothing
   bunches at the top of a tall phone (Dave, 2026-10-24). The heading, you, the faces and the button grow with
   the screen's height, the heading no wider than keeps "Responsibly & Free" on one line. --sx/--sy place a
   face round you as a share of the room at your sides (--sg-rx, as far out as the phone's width allows) and
   above and below you (--sg-ry, from your size) */
@container (max-width: 759px) {
    .tw-home-hero { --sg-u: clamp(88px, 13svh, 132px); --sg-face: 44px; --sg-rx: min(calc(50cqw - var(--sg-face) / 2 - 10px), calc(var(--sg-u) * 1.75)); --sg-ry: calc(var(--sg-u) * .68); }
    .tw-home-hero-in { grid-template-rows: minmax(0, .6fr) auto minmax(0, 1fr) auto minmax(0, .9fr) auto minmax(0, 1.3fr) auto; row-gap: 14px; min-height: calc(100vh - var(--bar-h)); min-height: calc(100svh - var(--bar-h)); padding-block: var(--space-2) var(--space-6); }
    .tw-home-hero h1 { grid-row: 2; font-size: clamp(30px, min(calc((100cqw - 32px) / 8.6), 4.6svh), 46px); }
    .tw-sg { grid-row: 4; margin: 0; }
    .tw-home-hero .tw-home-cta { grid-row: 6; height: clamp(58px, 6.6svh, 64px); margin: 0; font-size: clamp(17.5px, 2.05svh, 19px); }
    .tw-sg-you { width: var(--sg-u); height: var(--sg-u); }
    .tw-sg-count { font-size: clamp(17px, 2.1svh, 20px); }
    .tw-sg-face { width: var(--sg-face); height: var(--sg-face); margin: calc(var(--sg-face) / -2) 0 0 calc(var(--sg-face) / -2); background-position: calc(var(--c) * -1 * var(--sg-face)) calc(var(--r) * -1 * var(--sg-face)); background-size: calc(var(--sg-face) * 12) auto; }
    .tw-sg-you .tw-sg-face { transform: translate(calc(var(--sx) * var(--sg-rx)), calc(var(--sy) * var(--sg-ry))); }
}
/* a face in whole pixels, so its neighbour in people.webp never shows at its edge */
@supports (width: round(1.5px, 1px)) {
    @container (max-width: 759px) { .tw-home-hero { --sg-face: round(calc(var(--sg-u) * .46), 1px); } }
}

/* the press: the five logos in the hero (Dave, 2026-10-23), opening the press page in a new tab. They are
   images/seen/*_f.png, the grey *_g.png shapes filled with the deep forest #173c32 */
.tw-press { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-8); margin-top: calc(var(--sg-space) - 35px); opacity: .82; }
.tw-press img { display: block; width: auto; height: 23px; }
@container (max-width: 759px) {
    .tw-press { grid-row: 8; gap: var(--space-3) var(--space-5); margin-top: 0; }
    .tw-press img { height: clamp(18px, 2.3svh, 22px); }
}
/* the intro video: a button under the first panel's words, a little apart from them (outside.js opens it) */
.tw-video-open { justify-self: start; margin-top: var(--space-3); display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 19px; font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.tw-video-open svg { width: 30px; height: 30px; }
/* the dialog is the player's size (a modal dialog with width: auto fills the screen): the video's shape at
   82% of the screen's height, or the screen's width less the gutters when that is narrower (100% is the
   screen without its scrollbar, which 100vw is not) */
.tw-video { width: min(100% - 32px, min(82vh, 760px) * 1000 / 1782); max-width: none; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--ink); box-shadow: var(--edge); overflow: visible; }
.tw-video::backdrop { background: rgb(17 17 17 / .7); }
.tw-video-frame { aspect-ratio: 1000 / 1782; }
.tw-video-frame iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); }
.tw-video-close { position: absolute; top: -14px; right: -14px; width: 40px; height: 40px; border: 0; border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font-size: 26px; line-height: 1; box-shadow: var(--edge); cursor: pointer; }

/* the home page's panels: the words, and a picture of the app in a ring; the picture swaps sides. They take
   the page's full width (Dave, 2026-10-22), the words 4 parts to the picture's 3, about 590 and 440 at the
   widest, so a line stays easy to read; the questions below share the split */
.tw-panel-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr); align-items: center; gap: clamp(var(--space-12), 7cqw, var(--space-22)); padding-block: var(--space-22); }
.tw-panel-alt .tw-panel-pic { order: -1; }
.tw-panel-alt .tw-panel-in { grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); }
.tw-panel-text { display: grid; gap: var(--space-5); }
.tw-panel-text p { margin: 0; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.tw-panel-text b { color: var(--ink); font-weight: 700; }
.tw-panel-pic { display: block; }
.tw-panel-pic img { display: block; width: 100%; height: auto; border-radius: var(--radius-full); background: var(--paper); box-shadow: 0 0 0 6px var(--paper); }
@container (max-width: 759px) {
    .tw-panel-in, .tw-panel-alt .tw-panel-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-14); }
    .tw-panel-alt .tw-panel-pic { order: 0; }
    .tw-panel-pic { justify-self: center; width: min(100%, 300px); }
    .tw-panel-pic img { border-radius: var(--radius-lg); box-shadow: none; background: none; }
    .tw-panel-text p { font-size: 17px; }
}

/* the two guides: big round pictures straight on the highlight band, as the live page has them */
.tw-home-guides { padding-block: var(--space-22); }
.tw-home-guides-head { display: grid; justify-items: center; gap: var(--space-5); max-width: 880px; margin: 0 auto var(--space-14); text-align: center; }
.tw-home-guides-head p { margin: 0; color: var(--on-yellow-2); font-size: 18px; line-height: 1.65; }
.tw-home-guides-head b { color: var(--ink); font-weight: 800; }
.tw-guide-row { display: flex; justify-content: center; gap: var(--space-22); }
.tw-guide { display: grid; justify-items: center; align-content: start; gap: 4px; width: 280px; color: var(--ink); text-align: center; text-decoration: none; }
.tw-guide img { width: 220px; height: 220px; margin-bottom: var(--space-6); border-radius: var(--radius-full); background: var(--paper); box-shadow: 0 0 0 5px var(--paper); transition: transform .15s; }
.tw-guide:hover img { transform: translateY(-3px); }
.tw-guide h3 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.tw-guide:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.tw-guide p { margin: 0; color: var(--on-yellow-2); font-size: 15.5px; }
@container (max-width: 759px) {
    .tw-home-guides { padding-block: var(--space-14); }
    .tw-home-guides-head { margin-bottom: var(--space-8); }
    .tw-home-guides-head p { font-size: 17px; }
    .tw-guide-row { gap: var(--space-4); }
    .tw-guide { width: 160px; }
    .tw-guide img { width: 132px; height: 132px; margin-bottom: var(--space-3); }
    .tw-guide h3 { font-size: 17px; }
    .tw-guide p { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .tw-guide img { transition: none; } }

/* the home page's questions: one list in the live page's order, across the full width, each question beside
   its answer in the panels' split */
.tw-home-faq-in { padding-block: var(--space-22); }
.tw-home-q { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr); gap: 6px clamp(var(--space-12), 7cqw, var(--space-22)); padding-block: var(--space-6); border-top: 1px solid var(--line); }
.tw-home-q:first-child { padding-top: 0; border-top: 0; }
.tw-home-q:last-child { padding-bottom: 0; }
.tw-home-q h3 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.tw-home-q p { margin: 0; color: var(--ink-2); font-size: 17px; line-height: 1.65; }
@container (max-width: 759px) {
    .tw-home-faq-in { padding-block: var(--space-14); }
    .tw-home-q { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-5); }
    .tw-home-q h3 { font-size: 18px; }
    .tw-home-q p { font-size: 16px; }
}

/* the closing call: one line and the button */
.tw-close-in { display: grid; justify-items: center; gap: var(--space-6); padding-block: var(--space-14); text-align: center; }
.tw-home-close .tw-close-in { gap: var(--space-8); padding-block: var(--space-22); }

/* ---- a centred hero on the calm grey band (contact, the 404) and a plain band. The featured promotion page
        (/feature) has its own, apps/outside/feature.css, since 2026-10-23 ---- */
.tw-centre-hero { display: grid; justify-items: center; gap: var(--space-4); padding-block: var(--space-12) var(--space-14); text-align: center; }
.tw-centre-hero h1 { max-width: 900px; margin: 0; font-size: clamp(36px, 5cqw, 60px); font-weight: 800; letter-spacing: -.05em; line-height: 1.02; text-wrap: balance; }
.tw-centre-hero .tw-lead { max-width: 640px; }
.tw-band { padding-block: var(--space-14); }
@container (max-width: 759px) { .tw-band { padding-block: var(--space-12); } }

/* press (Dave, 2026-10-23): everything on the logo's line, not centred. The hero's words, then the logos in deep
   forest as the home page draws them (images/seen/*_f.png); the mentions two across, each a row with the
   publication over what it wrote and an arrow out */
.tw-press-hero { display: grid; justify-items: start; gap: var(--space-4); padding-block: var(--space-12) var(--space-14); }
.tw-press-hero h1 { max-width: 820px; font-size: clamp(36px, 5cqw, 60px); }
.tw-press-hero .tw-lead { max-width: 600px; }
.tw-press-hero .tw-lead a { color: var(--ink); font-weight: 700; text-decoration: underline 2px; text-underline-offset: 3px; }
.tw-press-logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); margin-top: var(--space-6); opacity: .82; }
.tw-press-logos img { display: block; width: auto; height: 28px; }
.tw-press-head { display: grid; gap: var(--space-3); max-width: var(--text-w); margin-bottom: var(--space-8); }
.tw-press-head p { margin: 0; color: var(--ink-2); font-size: 18px; line-height: 1.6; }
.tw-mentions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-12); margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.tw-mentions li { border-bottom: 1px solid var(--line); }
.tw-mentions a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-4); row-gap: 2px; padding: 18px 0; color: var(--ink); text-decoration: none; }
.tw-mentions b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.tw-mentions span { color: var(--ink-3); font-size: 15px; font-weight: 600; }
.tw-mentions a::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--out) center / contain no-repeat; mask: var(--out) center / contain no-repeat; --out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
.tw-mentions a:hover b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
@container (max-width: 759px) {
    .tw-press-hero { padding-block: var(--space-8) var(--space-12); }
    .tw-press-logos { gap: var(--space-3) var(--space-5); margin-top: var(--space-4); }
    .tw-press-logos img { height: 21px; }
    .tw-press-head { margin-bottom: var(--space-6); }
    .tw-press-head p { font-size: 17px; }
    .tw-mentions { grid-template-columns: minmax(0, 1fr); }
    .tw-mentions a { padding: 16px 0; }
}

/* contact: one card holding the form */
.tw-form { display: grid; gap: 8px; max-width: 620px; margin-inline: auto; padding: var(--space-6); }
.tw-form label { margin-top: 8px; font-size: 14.5px; font-weight: 800; }
.tw-form input, .tw-form textarea { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; box-shadow: var(--edge-inset); }
.tw-form input:focus, .tw-form textarea:focus { outline: none; box-shadow: 0 0 0 4px var(--yellow), var(--edge-inset); }
.tw-form textarea { min-height: 140px; resize: vertical; }
.tw-form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tw-form-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.tw-form-note { margin: 0; font-size: 15px; font-weight: 700; }
.tw-form-ok { color: var(--done); }
.tw-form-bad { color: var(--stop); }

/* ---- an article opened like the conversion page (its "figure" fact): the title and the big sign-in button left,
        a picture of its topic right, on the highlight colour ---- */
.tw-art-cv { overflow: hidden; }
.tw-art-cv-in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: var(--space-12); padding-block: 40px 72px; }
.tw-art-cv-l { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); min-width: 0; }
.tw-art-cv h1 { margin: 0; font-size: clamp(34px, 4.4cqw, 54px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.tw-art-cv-go { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); margin-top: var(--space-5); }
.tw-art-cv .tw-btn svg { width: 18px; height: 18px; flex: none; }
.tw-art-cv.tw-on-yellow .tw-btn-ring { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.tw-art-cv .tw-byline img { width: 36px; height: 36px; }
.tw-art-cv .tw-byline i { margin: 0 8px; font-style: normal; }
.tw-art-cv .tw-art-lead { max-width: 540px; color: var(--on-yellow-2); font-size: 17px; line-height: 1.6; }
.tw-art-cv .tw-art-lead a:not(.tw-btn) { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.tw-art-cv-r { position: relative; justify-self: center; width: min(100%, 400px); }
.tw-art-cv + .tw-doc { padding-top: var(--space-12); }
@container (max-width: 899px) {
    .tw-art-cv-in { grid-template-columns: minmax(0, 1fr); gap: var(--space-14); padding-top: 24px; }
}

/* the figure on the right is drawn from figures.css */

/* ---- a tool in an article's hero place (the article template's tool fact, outside/_partials/tools/): half and
        half from 1000 across, the tool's options on white on the left and what it makes on mint with dots on
        the right, held in view while the left scrolls (Dave, 2026-10-21). Narrower, one column: the options,
        then what it makes, unless the tool's own styles say otherwise. outside.js counts it as the page's hero ---- */
.tw-tool { border-bottom: 2px solid var(--ink); }
.tw-tool-split { display: grid; }
.tw-tool-l { min-width: 0; background: var(--paper); }
.tw-tool-l-in { box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-5); max-width: 620px; margin-inline: auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.tw-tool-r { min-width: 0; background: var(--done-soft); }
.tw-tool-r-in { box-sizing: border-box; display: grid; gap: var(--space-3); align-content: start; max-width: 560px; margin-inline: auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.tw-tool-head { display: grid; gap: var(--space-2); }
.tw-tool-head h1 { margin: 0; font-size: clamp(30px, 4.2cqw, 46px); font-weight: 800; letter-spacing: -.045em; line-height: 1.02; text-wrap: balance; }
.tw-tool-lead { max-width: 480px; margin: 0; color: var(--ink-2); font-size: clamp(15.5px, 1.5cqw, 17.5px); font-weight: 500; line-height: 1.5; }
.tw-tool-h { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tw-tool + .tw-doc { padding-top: var(--space-12); }
@container (min-width: 1000px) {
    .tw-tool-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100svh - var(--bar-h)); }
    .tw-tool-l-in { margin: 0 0 0 auto; padding: var(--space-12) clamp(32px, 4vw, 64px); }
    .tw-tool-r { border-left: 2px solid var(--ink); }
    .tw-tool-r-in { position: sticky; top: var(--bar-h); min-height: calc(100svh - var(--bar-h)); align-content: center; margin: 0 auto 0 0; padding: var(--space-12) clamp(32px, 4vw, 64px); }
}
@container (max-width: 999px) {
    .tw-tool-r { border-top: 2px solid var(--ink); }
}

/* ---- the 404: the centred hero on the calm grey band, and the way back ---- */
.tw-missing { padding-block: 96px 112px; }
.tw-missing-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: var(--space-3) 0 0; }

/* figures.css - the pictures that open an article (its "figure" fact, outside/_partials/figures/<figure>.html),
   put after site.css in outside.css by dev/outside/build-css.py. Each figure is one or two cards of X as the
   article's topic would show them, each in its own double ring, with notices of what happened on their edges.
   A figure brings its words and its numbers; every style it needs is a piece of this kit, so the figures read as
   one set. Lengths a figure varies (a bar's height, a fill's width) it passes as --h and --w on the element. */

/* ---- the frame, and the notices on its edges ---- */
.tw-fig { position: relative; margin: 0; }
.tw-fig .tw-toast { z-index: 2; box-shadow: var(--toast); }
.tw-fig-t1 { right: 22px; top: -28px; }
.tw-fig-t2 { right: -34px; top: 50%; transform: translateY(-50%); }
.tw-fig-t3 { left: 26px; bottom: -30px; }
.tw-fig-t4 { left: -30px; top: 30%; }
@container (max-width: 480px) {
    .tw-fig-t1 { right: 8px; }
    .tw-fig-t2 { right: -4px; }
    .tw-fig-t3 { display: none; }
    .tw-fig-t4 { left: -4px; }
}
.tw-toast-ic { display: flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--yellow); box-shadow: var(--edge); }
.tw-toast-ic svg { width: 14px; height: 14px; }
.tw-toast-ic.tw-fdone { background: var(--done-soft); }
.tw-toast-ic.tw-fstop { background: var(--stop-soft); }

/* ---- a card: white, its own double ring (black, white, black on yellow; black, yellow, black on grey) ---- */
.tw-fstack { position: relative; display: grid; gap: 30px; margin: 0; }
.tw-fc { position: relative; box-sizing: border-box; min-width: 0; padding: 16px 18px; border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.45; box-shadow: var(--ring-on-yellow); }
.tw-on-grey .tw-fc { box-shadow: var(--ring); }
.tw-fc p { margin: 0; }
.tw-fc-in { margin-left: 40px; }
.tw-fc-out { margin-right: 40px; }
.tw-fc-h { display: flex; align-items: center; gap: 9px; margin: -2px 0 12px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.tw-fc-h svg { flex: none; width: 19px; height: 19px; }
.tw-fc-h img { flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); object-fit: cover; }
.tw-fc-h small { margin-left: auto; color: var(--ink-3); font-size: 12.5px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.tw-fc-t { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.tw-fc-sub { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.tw-fc-rule { margin: 12px -18px; border: 0; border-top: 1px solid var(--line); }
.tw-fc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-top: 12px; }
.tw-fc > * + .tw-fchips, .tw-fc > * + .tw-fnote, .tw-fc > * + .tw-fstats, .tw-fc > * + .tw-fmeter-row, .tw-fc > * + .tw-fh, .tw-fc > * + .tw-fcheck, .tw-fc > * + .tw-fplot { margin-top: 12px; }
.tw-fc > .tw-fc-h + * { margin-top: 0; }
.tw-fc-h small svg { width: 13px; height: 13px; vertical-align: -2px; }
.tw-fbig { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tw-fgood { color: var(--done); font-weight: 800; }
.tw-fbad { color: var(--stop); font-weight: 800; }
.tw-fmute { color: var(--ink-3); }
.tw-fstrike { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.tw-fc .tw-faces img { border-color: var(--paper); }

/* an arrow from one card to the next, sitting in the gap between them */
.tw-farrow { position: relative; z-index: 1; display: flex; justify-content: center; margin: -24px 0; color: var(--ink); }
.tw-farrow svg { box-sizing: border-box; width: 30px; height: 30px; padding: 5px; border-radius: var(--radius-full); background: var(--paper); box-shadow: var(--edge); }

/* a stamp across a card: what X, or common sense, makes of it; --y moves it off the words under it */
.tw-fstamp { position: absolute; z-index: 1; right: 16px; top: var(--y, 46%); padding: 4px 12px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .92); color: var(--stop); font-size: 15px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; box-shadow: inset 0 0 0 3px var(--stop); transform: translateY(-50%) rotate(-8deg); }

/* ---- people: a row each, face, name and a button or a number ---- */
.tw-frows { display: grid; margin: 0 -18px; }
.tw-fc-h + .tw-frows, .tw-ftabs + .tw-frows { margin-top: -4px; }
.tw-frow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 18px; }
.tw-frow + .tw-frow { border-top: 1px solid var(--line); }
.tw-frows-wide .tw-frow { grid-template-columns: 52px minmax(0, 1fr) auto; }
.tw-frow-lit { background: var(--yellow-tint); }
.tw-frow-dim { opacity: .5; }
.tw-frow > img, .tw-frow > .tw-tp-ph, .tw-fav { width: 36px; height: 36px; border-radius: var(--radius-full); object-fit: cover; }
.tw-frow > .tw-tp-ph svg { width: 18px; height: 18px; }
.tw-frow b { display: block; overflow: hidden; font-size: 13.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.tw-frow small { display: block; overflow: hidden; color: var(--ink-3); font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.tw-frow-n { color: var(--ink); font-size: 15px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.tw-frow-v { font-size: 13.5px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.tw-fav { display: flex; flex: none; align-items: center; justify-content: center; background: var(--grey); color: #9a9a94; box-shadow: inset 0 0 0 1.5px var(--line); }
.tw-fav svg { width: 18px; height: 18px; }
.tw-fav-ink { background: var(--ink); color: var(--paper); box-shadow: none; font-size: 13px; font-weight: 800; }
.tw-fav-y { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 13px; font-weight: 800; }
.tw-fav-sq { border-radius: 9px; }

/* the stand-in face for "you" at the member card's size */
.tw-fig .tw-profile-top .tw-tp-ph { width: 72px; height: 72px; border: 4px solid var(--paper); box-shadow: var(--edge); }
.tw-fig .tw-profile-top .tw-tp-ph::after { inset: 4px; }
.tw-fig .tw-profile-top .tw-tp-ph svg { width: 34px; height: 34px; }
.tw-fig .tw-profile-top img.tw-face { width: 72px; height: 72px; border: 4px solid var(--paper); box-shadow: var(--edge); }
.tw-profile-bio { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.5; }
.tw-profile-n { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-3); font-size: 14px; font-weight: 600; }
.tw-profile-n b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- buttons, small, as X draws them ---- */
.tw-fbtn { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: var(--radius-full); background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 800; line-height: 1; white-space: nowrap; }
.tw-fbtn svg { width: 14px; height: 14px; }
.tw-fbtn-line { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fbtn-y { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fbtn-stop { background: var(--stop); color: var(--paper); }
.tw-fbtn-lg { height: 36px; padding: 0 16px; font-size: 13.5px; }
.tw-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-fchips .tw-chip { height: 26px; padding: 0 10px; font-size: 12px; }

/* ---- numbers: tiles, bars, a line, a meter ---- */
.tw-fstats { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 8px; }
.tw-fstat { display: grid; align-content: start; gap: 1px; min-width: 0; padding: 9px 11px; border-radius: var(--radius-md); background: var(--grey); }
.tw-fstat small { overflow: hidden; color: var(--ink-3); font-size: 11.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.tw-fstat b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tw-fstat i { color: var(--done); font-size: 11.5px; font-style: normal; font-weight: 800; }
.tw-fstat i.tw-fbad { color: var(--stop); }
.tw-fstat-lit { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fstat-lit small { color: var(--on-yellow-2); }

.tw-fbars { display: flex; align-items: flex-end; gap: 6px; height: 88px; border-bottom: 1.5px solid var(--ink); }
.tw-fbars i { flex: 1; height: var(--h); min-height: 4px; border-radius: 4px 4px 0 0; background: var(--yellow-tint); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fbars i.on { background: var(--yellow); }
.tw-fbars i.ink { background: var(--ink); }
.tw-fbars-x { display: flex; gap: 6px; margin-top: 5px; }
.tw-fbars-x span { flex: 1; overflow: hidden; color: var(--ink-3); font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; }

.tw-fh { display: grid; gap: 9px; }
.tw-fh-row { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.tw-fh-row > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tw-fh-row > i { display: block; height: 12px; overflow: hidden; border-radius: var(--radius-full); background: var(--grey); box-shadow: inset 0 0 0 1px var(--line); }
.tw-fh-row > i::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: var(--radius-full); background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fh-row.ink > i::before { background: var(--ink); box-shadow: none; }
.tw-fh-row.dim > i::before { background: var(--yellow-tint); }
.tw-fh-row > b { min-width: 3ch; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

.tw-fplot { position: relative; }
.tw-fline { display: block; width: 100%; height: auto; overflow: visible; }
.tw-fline .a { fill: var(--yellow-tint); }
.tw-fline .l { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tw-fline .d { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.tw-fline .g { fill: none; stroke: var(--line); stroke-width: 1; }
.tw-fline .p { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; }
.tw-fline .k { fill: var(--ink); }
.tw-fline text { fill: var(--ink-3); font-family: var(--font-sans); font-size: 11px; font-weight: 700; }
.tw-fpin { position: absolute; left: var(--x); top: var(--y); padding: 3px 8px; border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font-size: 11.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; box-shadow: var(--edge); transform: translate(-50%, -100%); }
.tw-fpin-ink { background: var(--ink); color: var(--paper); box-shadow: none; }

.tw-fmeter { height: 10px; overflow: hidden; border-radius: var(--radius-full); background: var(--grey); box-shadow: inset 0 0 0 1px var(--line); }
.tw-fmeter::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: var(--radius-full); background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fmeter-stop::before { background: var(--stop); box-shadow: none; }
.tw-fmeter-ink::before { background: var(--ink); box-shadow: none; }
.tw-fmeter-row { display: grid; gap: 5px; }
.tw-fmeter-row + .tw-fmeter-row { margin-top: 10px; }
.tw-fmeter-row > span { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; }
.tw-fmeter-row > span b { font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---- settings: a value and its name, a field, a switch ---- */
.tw-fkv { display: grid; margin: 0 -18px; }
.tw-fkv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; }
.tw-fkv > div + div { border-top: 1px solid var(--line); }
.tw-fkv b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-fkv svg { flex: none; width: 17px; height: 17px; }

.tw-ffield { display: grid; gap: 5px; }
.tw-ffield + .tw-ffield { margin-top: 10px; }
.tw-ffield > small { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.tw-ffield > span { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--ink-3); font-size: 14.5px; font-weight: 600; }
.tw-ffield > span svg { flex: none; width: 17px; height: 17px; margin-left: auto; }
.tw-ffield > span em { color: var(--ink-3); font-style: normal; }
.tw-ffield-tall > span { align-items: flex-start; padding: 9px 12px; font-size: 14px; font-weight: 500; line-height: 1.45; }
.tw-ffield-on > span { box-shadow: 0 0 0 3px var(--yellow), inset 0 0 0 2px var(--ink); }
.tw-ffield-ok > span svg { color: var(--done); }
.tw-ffield-bad > span { box-shadow: 0 0 0 3px var(--stop-soft), inset 0 0 0 2px var(--stop); }
.tw-ffield-bad > span svg { color: var(--stop); }
.tw-ffield > em { color: var(--ink-3); font-size: 12px; font-style: normal; font-weight: 600; }

.tw-ftog { position: relative; flex: none; width: 36px; height: 22px; border-radius: var(--radius-full); background: var(--grey); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-ftog::after { content: ""; position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--ink); }
.tw-ftog-on { background: var(--yellow); }
.tw-ftog-on::after { left: 18px; }

/* ---- messages, a notice, a list of steps ---- */
.tw-fdm { display: grid; gap: 7px; }
.tw-fdm p { justify-self: start; max-width: 84%; padding: 8px 13px; border-radius: 18px 18px 18px 5px; background: var(--grey); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.4; }
.tw-fdm p.me { justify-self: end; border-radius: 18px 18px 5px 18px; background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fdm small { justify-self: end; margin-top: -3px; color: var(--ink-3); font-size: 11.5px; font-weight: 700; }
.tw-fdm small.them { justify-self: start; }

.tw-fnote { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--yellow-tint); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.tw-fnote svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.tw-fnote b { font-weight: 800; }
.tw-fnote-stop { background: color-mix(in srgb, var(--stop-soft) 40%, var(--paper)); }
.tw-fnote-stop svg { color: var(--stop); }
.tw-fnote-done { background: color-mix(in srgb, var(--done-soft) 45%, var(--paper)); }
.tw-fnote-done svg { color: var(--done); }
.tw-fnote-plain { background: var(--grey); box-shadow: none; }

.tw-fcheck { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tw-fcheck li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; }
.tw-fcheck li > i { display: flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 12px; font-style: normal; font-weight: 800; }
.tw-fcheck li > i svg { width: 14px; height: 14px; }
.tw-fcheck li.done > i { background: var(--ink); color: var(--yellow); box-shadow: none; }
.tw-fcheck li.now > i { background: var(--yellow); }
.tw-fcheck li.stop > i { background: var(--stop); color: var(--paper); box-shadow: none; }
.tw-fcheck li.todo { color: var(--ink-3); }
.tw-fcheck li.todo > i { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.tw-fcheck small { margin-left: auto; padding-left: 8px; color: var(--ink-3); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tw-fmark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--ink); color: var(--yellow); font-size: 10.5px; font-style: normal; font-weight: 800; line-height: 1; vertical-align: 2px; }

/* ---- a screen's furniture: tabs, a search box, an address bar, lines of text ---- */
.tw-ftabs { display: flex; margin: -6px -18px 4px; border-bottom: 1px solid var(--line); }
.tw-ftabs span { flex: 1; padding: 4px 4px 10px; color: var(--ink-3); font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; }
.tw-ftabs span.on { color: var(--ink); font-weight: 800; box-shadow: inset 0 -3px 0 var(--ink); }
.tw-fsearch { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border-radius: var(--radius-full); background: var(--grey); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 14px; font-weight: 700; }
.tw-fsearch svg { flex: none; width: 17px; height: 17px; color: var(--ink-3); }
.tw-fsearch + * { margin-top: 12px; }
.tw-fsearch > svg:last-child:not(:first-child) { margin-left: auto; color: var(--ink); }
.tw-furl { display: flex; align-items: center; gap: 6px; margin: -4px 0 14px; }
.tw-furl i { flex: none; width: 9px; height: 9px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-furl span { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; height: 26px; margin-left: 6px; padding: 0 11px; overflow: hidden; border-radius: var(--radius-full); background: var(--grey); color: var(--ink-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tw-furl span svg { flex: none; width: 12px; height: 12px; }
.tw-flines { display: grid; gap: 7px; }
.tw-flines i { display: block; width: var(--w, 100%); height: 8px; border-radius: var(--radius-full); background: var(--grey); }
.tw-fc > * + .tw-flines { margin-top: 10px; }
.tw-ftools { display: flex; align-items: center; gap: 13px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink); }
.tw-ftools > svg { flex: none; width: 18px; height: 18px; }
.tw-ftools > small { margin-left: auto; color: var(--ink-3); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-ftools > small + .tw-fbtn { margin-left: 0; }
.tw-ftools > .tw-fbtn { margin-left: auto; }

/* ---- a post, as X draws it: the thread's card and what a post can carry ---- */
/* the thread: posts by "you", each in its own double-bordered card, stacked, joined by a double line that runs
   behind the cards (so it shows only in the gap and never crosses their edges), as X joins a thread */
.tw-thread { position: relative; isolation: isolate; display: grid; gap: 34px; margin: 0; }
.tw-thread::before { content: ""; position: absolute; left: 33px; top: 36px; bottom: 40px; z-index: -1; width: 4px; border-inline: 2px solid var(--ink); background: var(--paper); }
.tw-tp { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 16px 18px 14px; border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); box-shadow: var(--ring-on-yellow); }
.tw-on-grey .tw-tp { box-shadow: var(--ring); }
.tw-tp-ph { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--yellow-tint); color: #8d8d85; box-shadow: var(--edge); }
.tw-tp-ph::after { content: ""; position: absolute; inset: 3px; border: 1.5px dashed #b9b9b0; border-radius: var(--radius-full); }
.tw-tp-ph svg { width: 20px; height: 20px; }
.tw-tp > img { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; }
.tw-tp > .tw-fav { width: 40px; height: 40px; }
.tw-tp-main { min-width: 0; }
.tw-tp-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; line-height: 1.3; }
.tw-tp-who b { flex: none; font-size: 14px; font-weight: 800; }
.tw-tp-who span { overflow: hidden; color: var(--ink-3); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.tw-tp p { margin: 3px 0 9px; font-size: 14.5px; font-weight: 500; line-height: 1.45; }
.tw-tp-num { color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.tw-tp-acts { display: flex; gap: 20px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-tp-acts span { display: inline-flex; align-items: center; gap: 5px; }
.tw-tp-acts svg { width: 15px; height: 15px; }
.tw-tp-acts .on { color: var(--ink); font-weight: 800; }
.tw-tp-top { display: flex; align-items: center; gap: 6px; margin: -3px 0 5px; color: var(--ink-3); font-size: 12px; font-weight: 700; }
.tw-tp-top svg { flex: none; width: 14px; height: 14px; }
.tw-tp-tick { display: inline-block; flex: none; width: 15px; height: 15px; margin-left: 2px; color: var(--ink); vertical-align: -2px; }
.tw-tp-hash { font-weight: 700; background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tw-tp-media { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--radius-md); background: var(--yellow-tint); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.tw-tp-media > svg { width: 34px; height: 34px; }
.tw-tp-media-dots { background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 12px 12px; }
.tw-tp-media-y { background-color: var(--yellow); }
.tw-tp-media b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-align: center; }
.tw-tp-media .tw-chip { position: absolute; left: 8px; bottom: 8px; height: 22px; padding: 0 8px; font-size: 11px; }
.tw-tp-q { display: grid; gap: 2px; margin: 0 0 10px; padding: 9px 12px 10px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--line); }
.tw-tp-q .tw-tp-who b { font-size: 13px; }
.tw-tp-q .tw-tp-who span { font-size: 12px; }
.tw-tp .tw-tp-q p { margin: 0; font-size: 13.5px; }
.tw-tp-poll { display: grid; gap: 6px; margin: 2px 0 8px; }
.tw-tp-opt { position: relative; isolation: isolate; display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px; overflow: hidden; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.tw-tp-opt::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--w); background: var(--grey); }
.tw-tp-opt b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tw-tp-opt.on { font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-tp-opt.on::before { background: var(--yellow); }
.tw-tp-meta { margin: 0 0 9px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.tw-tp-dim { opacity: .5; }

/* ---- the Learn hub's pictures: the guide's own cartoons, small in a list of chapters, as a hand of cards, or one
        framed whole ---- */
.tw-frows-pics .tw-frow { grid-template-columns: 64px minmax(0, 1fr) auto; }
.tw-frow > img.tw-fthumb { width: 64px; height: 36px; border-radius: var(--radius-md); box-shadow: var(--edge); }
.tw-fdeck { display: grid; margin: 0; padding: 24px 42px 16px; }
.tw-fdeck > .tw-fc { grid-area: 1 / 1; overflow: hidden; padding: 0; }
.tw-fdeck > .tw-fc:nth-child(1) { transform: translate(-40px, 16px) rotate(-9deg); }
.tw-fdeck > .tw-fc:nth-child(2) { transform: translate(40px, 8px) rotate(7deg); }
.tw-fdeck > .tw-fc:last-child { z-index: 1; }
.tw-fcard img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-bottom: 1.5px solid var(--ink); }
.tw-fcard b { display: block; padding: 11px 14px 2px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.tw-fcard small { display: flex; align-items: center; gap: 6px; padding: 0 14px 13px; color: var(--ink-3); font-size: 12px; font-weight: 700; }
.tw-fcard small svg { flex: none; width: 13px; height: 13px; }
.tw-fphoto { overflow: hidden; padding: 0; }
.tw-fphoto img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
@container (max-width: 480px) {
    .tw-frows-pics .tw-frow { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; }
    .tw-frow > img.tw-fthumb { width: 48px; height: 27px; }
    .tw-fdeck { padding-inline: 18px; }
    .tw-fdeck > .tw-fc:nth-child(1) { transform: translate(-12px, 12px) rotate(-6deg); }
    .tw-fdeck > .tw-fc:nth-child(2) { transform: translate(12px, 6px) rotate(5deg); }
}

/* x-kit.css - X as it looks today, drawn in our style: posts, a post's own page, a profile, people, a menu, the
   composer, search and notifications. An article shows these in place of screenshots, so a picture never dates
   and can point at the part the words talk about (dev/docs/article-refresh.md; every piece, with its HTML, at
   /x-kit on dev). dev/outside/build-css.py puts it after figures.css in outside.css.
   An article's body is plain HTML, not a template, so everything here is classes and no script: the icons are
   masks drawn in the colour of the words (tw-xi tw-xi-reply), and the action bar draws its own (tw-x-a-reply).
   Point at a part with tw-x-hl (a block: a yellow halo with a black edge) or tw-x-mark (words: a yellow marker),
   number it with data-n="1" (a black and yellow disc on its corner, matched by tw-x-key under the picture), and
   fade the parts that don't matter with tw-x-dim. */

/* ---- the stage: an X picture in an article sits in the grey dotted box (.tw-pic), one card or a few ---- */
.tw-prose .tw-xfig { display: grid; justify-items: center; gap: 22px; padding: 28px 18px 22px; }
.tw-prose .tw-xfig > figcaption { justify-self: stretch; margin: -4px 0 0; color: var(--ink-2); text-align: center; }
.tw-xfig-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 22px; width: 100%; max-width: 640px; align-items: start; }
.tw-xfig-row > .tw-x { max-width: none; }
.tw-xstack { display: grid; justify-items: start; width: 100%; max-width: 500px; }        /* a card and the menu it opens */
.tw-xstack > .tw-x-pop { margin-left: 22%; }
@container (max-width: 480px) { .tw-prose .tw-xfig { padding: 22px 12px 16px; } }

/* ---- a card of X: white, X's own grey rules inside, our thin black edge outside ---- */
.tw-x { position: relative; box-sizing: border-box; width: 100%; max-width: 500px; border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.45; text-align: left; box-shadow: var(--edge); }
:where(.tw-x) p { margin: 0; }                                            /* no weight, so every piece's own margin wins */
.tw-x:not(.tw-x-menu) { container: tw-x / inline-size; }                 /* so a narrow card can tighten its action bar */
.tw-prose .tw-x img { display: block; margin: 0; border-radius: 0; background: none; box-shadow: none; }
.tw-prose .tw-x .tw-x-av { border-radius: var(--radius-full); }
.tw-x b { font-weight: 800; }
.tw-x > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.tw-x > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.tw-x > :is(.tw-x-post, .tw-x-person, .tw-x-notif) + :is(.tw-x-post, .tw-x-person, .tw-x-notif, .tw-x-tools, .tw-x-more-row) { border-top: 1px solid var(--line); }
.tw-x-rows > .tw-x-row + .tw-x-row { border-top: 1px solid var(--line); }

/* ---- the icons: one mask each (the --xi- list at the end of this file) ---- */
.tw-xi { display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -3px; }

/* ---- a post: the face in a column of its own, then the name line, the words, what's attached, the actions ---- */
.tw-x-post { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 12px 16px 10px; }
.tw-x-av { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; }
span.tw-x-av { display: flex; align-items: center; justify-content: center; background: var(--yellow); color: var(--ink); font-size: 15px; font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-x-main { min-width: 0; }
.tw-x-ctx { display: flex; align-items: center; gap: 6px; margin: -2px 0 3px; color: var(--ink-3); font-size: 13px; font-weight: 700; }
.tw-x-ctx .tw-xi { width: 15px; height: 15px; }
.tw-x-who { display: flex; align-items: center; gap: 4px; min-width: 0; line-height: 1.3; white-space: nowrap; }
.tw-x-who b { overflow: hidden; text-overflow: ellipsis; }
.tw-x-who > span { overflow: hidden; color: var(--ink-3); text-overflow: ellipsis; }
.tw-x-who > span + span { flex: none; }
.tw-x-who .tw-xi-badge { width: 17px; height: 17px; color: var(--ink); vertical-align: 0; }
.tw-x-who .tw-xi-more { flex: none; margin-left: auto; color: var(--ink-3); }
.tw-x-who > b { flex: 0 1 auto; min-width: 2.2em; }
.tw-x-who > b + .tw-xi-badge + span, .tw-x-who > b + span { flex: 0 50 auto; min-width: 1.5em; }
.tw-x-who-2 { flex-wrap: wrap; row-gap: 0; }
.tw-x-who.tw-x-who-2 > span:first-of-type { flex: 0 0 100%; }
.tw-x-to { margin: 1px 0 2px; color: var(--ink-3); font-size: 14px; }
.tw-x-to b { color: var(--link); font-weight: 600; }
.tw-x-text { margin-top: 2px; overflow-wrap: break-word; }
.tw-x-text > p + p { margin-top: .55em; }
.tw-x-text a, .tw-x-text .tw-x-at { color: var(--link); font-weight: 600; }
.tw-x-more-link { display: block; margin-top: 2px; color: var(--link); font-size: 14px; font-weight: 600; }

/* what a post can carry: photos, a quoted post, a link card or a small card of numbers */
.tw-x-media { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 2px; margin-top: 10px; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
.tw-x-media img { width: 100%; height: 100%; aspect-ratio: var(--ar, 16 / 9); object-fit: cover; }
.tw-x-quote { margin-top: 10px; padding: 10px 12px 11px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule, #cfcfc8); }
.tw-x-quote .tw-x-who { gap: 5px; font-size: 14.5px; }
.tw-x-quote .tw-x-av { width: 20px; height: 20px; }
.tw-x-quote span.tw-x-av { font-size: 10px; box-shadow: inset 0 0 0 1px var(--ink); }
.tw-x-quote .tw-x-text { margin-top: 3px; font-size: 14.5px; }
.tw-x-quote .tw-x-media { margin-top: 8px; border-radius: 10px; }
.tw-x-card { margin-top: 10px; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule, #cfcfc8); }
.tw-x-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.tw-x-card-row + .tw-x-card-row { border-top: 1px solid var(--line); }
.tw-x-card-row > span { color: var(--ink-2); }
.tw-x-card-row > b { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tw-x-card-row small { display: block; color: var(--ink-3); font-size: 12.5px; }

/* the action bar: reply, repost, like, views, bookmark, share, each its own icon and count */
.tw-x-acts { display: flex; align-items: center; justify-content: space-between; gap: 6px; max-width: 440px; margin-top: 8px; color: var(--ink-3); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-x-a { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 2px; border-radius: var(--radius-full); white-space: nowrap; }
.tw-x-a::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.tw-x-a.on { color: var(--ink); font-weight: 800; }
.tw-x-a-reply { --i: var(--xi-reply); }
.tw-x-a-repost { --i: var(--xi-repost); }
.tw-x-a-like { --i: var(--xi-like); }
.tw-x-a-like.on { --i: var(--xi-liked); }
.tw-x-a-views { --i: var(--xi-views); }
.tw-x-a-bookmark { --i: var(--xi-bookmark); }
.tw-x-a-bookmark.on { --i: var(--xi-bookmarked); }
.tw-x-a-share { --i: var(--xi-share); }
@container tw-x (max-width: 380px) {
    .tw-x-acts { gap: 2px; font-size: 12px; }
    .tw-x-a { gap: 3px; padding: 0; }
    .tw-x-a::before { width: 16px; height: 16px; }
}
@container tw-x (max-width: 270px) { .tw-x-acts > :is(.tw-x-a-bookmark, .tw-x-a-share) { display: none; } }

/* a post on its own page: the face and name in a row, the words full width and bigger, then the time, the counts
   and the actions between rules */
.tw-x-big { align-items: center; padding-top: 14px; }
.tw-x-big > :not(.tw-x-av, .tw-x-main) { grid-column: 1 / -1; }
.tw-x-big > .tw-x-text { margin-top: 12px; font-size: 17px; line-height: 1.45; }
.tw-x-big > .tw-x-quote, .tw-x-big > .tw-x-media, .tw-x-big > .tw-x-card { margin-top: 12px; }
.tw-x-time { margin-top: 12px; color: var(--ink-3); font-size: 14px; }
.tw-x-time b { color: var(--ink); }
.tw-x-counts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.tw-x-counts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tw-x-big > .tw-x-acts { max-width: none; margin-top: 10px; padding: 8px 4px 0; border-top: 1px solid var(--line); justify-content: space-around; }

/* a thread: a line from one face down to the next (::before, so a number on the post keeps ::after), and no rule between the posts */
.tw-x-post.tw-x-line { position: relative; }
.tw-x-post.tw-x-line::before { content: ""; position: absolute; left: 35px; top: 58px; bottom: -12px; width: 2px; border-radius: 2px; background: var(--x-rule, #cfcfc8); }
.tw-x > .tw-x-line + .tw-x-post { border-top: 0; }

/* ---- the screen's top bar: back, a title, or the search field ---- */
.tw-x-bar { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 6px 16px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 800; }
.tw-x-bar .tw-xi { width: 20px; height: 20px; }
.tw-x-bar-end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.tw-x-field { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; height: 38px; padding: 0 14px; border-radius: var(--radius-full); background: var(--grey); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font-size: 15px; font-weight: 500; }
.tw-x-field > span { overflow: hidden; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.tw-x-field .tw-xi { width: 17px; height: 17px; }

/* ---- tabs: the words in a row, the open one bold and underlined ---- */
.tw-x-tabs { display: flex; overflow: hidden; border-bottom: 1px solid var(--line); }
.tw-x-tabs > span { position: relative; flex: 1 0 auto; padding: 13px 14px 12px; color: var(--ink-3); font-size: 14.5px; font-weight: 700; text-align: center; white-space: nowrap; }
.tw-x-tabs > .on { color: var(--ink); font-weight: 800; }
.tw-x-tabs > .on::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(56px, 70%); height: 4px; border-radius: 4px; background: var(--ink); transform: translateX(-50%); }

/* ---- buttons, as X draws them ---- */
.tw-x-btn { box-sizing: border-box; display: inline-flex; flex: none; align-items: center; justify-content: center; height: 34px; padding: 0 16px; border-radius: var(--radius-full); background: var(--ink); color: var(--paper); font-size: 14.5px; font-weight: 800; line-height: 1; white-space: nowrap; }
.tw-x-btn-line { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--x-rule, #cfcfc8); }
.tw-x-btn-off { opacity: .5; }

/* ---- a menu that opens from a post: one row each, an icon and the words. tw-x-pop lays it over the card above,
        under the icon that opened it ---- */
.tw-x-menu { width: max-content; min-width: 200px; max-width: 100%; padding: 6px 0; border-radius: 14px; }
.tw-x-menu > span { display: flex; align-items: center; gap: 12px; padding: 10px 18px; font-size: 15px; font-weight: 700; }
.tw-x-menu > span .tw-xi { width: 19px; height: 19px; }
.tw-x-pop { z-index: 2; margin-top: -12px; box-shadow: var(--edge), 0 10px 26px rgba(0, 0, 0, .14); }

/* ---- the composer: the box you write in, what you're quoting under it, the tools and Post ---- */
.tw-x-ph { color: var(--ink-3); font-size: 18px; font-weight: 500; }
.tw-x-typed { font-size: 17px; }
.tw-x-typed::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; background: var(--ink); vertical-align: -.18em; }
.tw-x-tools { display: flex; align-items: center; gap: 16px; padding: 10px 16px 12px 68px; color: var(--ink); }
.tw-x-tools .tw-xi { width: 19px; height: 19px; }
.tw-x-tools .tw-x-btn { margin-left: auto; }
.tw-x-tools .tw-x-off { opacity: .35; }

/* ---- a profile: the banner (ours: yellow with the member card's chevrons), the face over its edge, the button,
        the name, bio, details, the counts and the tabs ---- */
.tw-x-banner { height: 110px; background-color: var(--yellow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M0 9 8 3 16 9' fill='none' stroke='%23111111' stroke-opacity='.22' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E"); background-size: 16px 12px; background-position: 0 2px; }
img.tw-x-banner { width: 100%; object-fit: cover; }
.tw-x-pro-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -42px; padding: 0 16px; }
.tw-x-pro-top .tw-x-av { width: 80px; height: 80px; border: 4px solid var(--paper); background: var(--paper); }
.tw-x-pro-top span.tw-x-av { font-size: 28px; box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px var(--paper); border: 0; }
.tw-x-pro { padding: 10px 16px 0; }
.tw-x-pro .tw-x-who { font-size: 19px; }
.tw-x-pro .tw-x-who > span { font-size: 15px; }
.tw-x-bio { margin-top: 10px; }
.tw-x-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; color: var(--ink-3); font-size: 14px; }
.tw-x-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.tw-x-meta .tw-xi { width: 16px; height: 16px; }
.tw-x-pro .tw-x-counts { margin: 10px 0 4px; padding: 0; border: 0; }

/* ---- people: Who to follow, a followers list, likes: face, name and bio, the button ---- */
.tw-x-person { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 12px 16px; }
.tw-x-person > .tw-x-btn { align-self: center; height: 32px; padding: 0 14px; font-size: 14px; }
.tw-x-person .tw-x-bio { margin-top: 3px; font-size: 14px; }
.tw-x-follows { margin-left: 4px; padding: 1px 5px; border-radius: 4px; background: var(--grey); color: var(--ink-3); font-size: 11.5px; font-weight: 700; }
.tw-x-more-row { display: block; padding: 13px 16px; color: var(--link); font-size: 14.5px; font-weight: 600; }

/* ---- a notification: what happened as an icon on the left, the faces, the words, the post it's about ---- */
.tw-x-notif { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 12px 16px; }
.tw-x-notif > .tw-xi { justify-self: end; width: 26px; height: 26px; color: var(--ink); }
.tw-x-faces { display: flex; gap: 6px; margin-bottom: 8px; }
.tw-x-faces .tw-x-av { width: 32px; height: 32px; }
.tw-x-notif .tw-x-text { color: var(--ink-3); }

/* ---- settings: a list of rows (a title, a line under it, the chevron), a section heading, a field, a switch ---- */
.tw-x-rows { display: grid; }
.tw-x-rows-h { padding: 14px 16px 6px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.tw-x-rows-sub { padding: 0 16px 10px; color: var(--ink-3); font-size: 13.5px; }
.tw-x-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 12px 16px; }
.tw-x-row > .tw-xi:first-child { width: 20px; height: 20px; color: var(--ink-2); }
.tw-x-row > :not(.tw-xi):first-child { grid-column: 1 / 3; }
.tw-x-row b { display: block; font-size: 15px; font-weight: 700; }
.tw-x-row small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.35; }
.tw-x-row > .tw-xi:last-child { width: 16px; height: 16px; color: var(--ink-3); }
.tw-x-row-stop b { color: var(--stop); }
.tw-x-field-box { margin: 10px 16px; padding: 7px 12px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--x-rule, #cfcfc8); }
.tw-x-field-box small { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12.5px; }
.tw-x-field-box span { display: block; font-size: 16px; }
.tw-x-field-box.on { box-shadow: inset 0 0 0 2px var(--ink); }
.tw-x-field-box.on small { color: var(--ink); }
.tw-x-hint { padding: 0 16px 10px; color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.tw-x-hint.ok { color: var(--done); }
.tw-x-hint.bad { color: var(--stop); }
.tw-x-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--radius-full); background: var(--x-rule, #cfcfc8); }
.tw-x-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.tw-x-switch.on { background: var(--ink); }
.tw-x-switch.on::after { left: 19px; }
.tw-x-check { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--ink-3); }
.tw-x-check.on { background: var(--ink); box-shadow: none; }
.tw-x-check.on::after { content: ""; width: 10px; height: 5px; margin-top: -3px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(-45deg); }
.tw-x-foot { padding: 12px 16px 16px; }
.tw-x-foot .tw-x-btn { width: 100%; }
.tw-x-btn-stop { background: var(--stop); color: var(--paper); }

/* ---- a dialog X puts over the screen: a title, the words, the buttons stacked ---- */
.tw-x-dialog { max-width: 340px; padding: 22px 22px 18px; border-radius: 16px; box-shadow: var(--edge), 0 10px 30px rgba(0, 0, 0, .16); }
.tw-x-dialog > b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.tw-x-dialog > p { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.tw-x-dialog > .tw-x-btns { display: grid; gap: 10px; margin-top: 18px; }
.tw-x-dialog .tw-x-btn { width: 100%; height: 40px; }

/* ---- a notice X shows on a screen: a protected account, a limit, a label ---- */
.tw-x-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; margin: 10px 16px; padding: 10px 12px; border-radius: 10px; background: var(--grey); font-size: 13.5px; line-height: 1.4; }
.tw-x-notice > .tw-xi { width: 18px; height: 18px; margin-top: 1px; }
.tw-x-notice b { display: block; font-size: 14px; }

/* ---- Chat (direct messages): bubbles, theirs on the left in grey, yours on the right in ink, the box to type in ---- */
.tw-x-chat { display: grid; gap: 6px; padding: 14px 16px; }
.tw-x-msg { max-width: 78%; padding: 8px 12px; border-radius: 18px 18px 18px 4px; background: var(--grey); font-size: 14.5px; line-height: 1.4; justify-self: start; }
.tw-x-msg.me { border-radius: 18px 18px 4px 18px; background: var(--ink); color: var(--paper); justify-self: end; }
.tw-x-msg-time { color: var(--ink-3); font-size: 12px; justify-self: end; }
.tw-x-msg-time.them { justify-self: start; }
.tw-x-compose-bar { display: flex; align-items: center; gap: 12px; margin: 4px 12px 12px; padding: 8px 14px; border-radius: var(--radius-full); background: var(--grey); color: var(--ink-3); font-size: 15px; }
.tw-x-compose-bar .tw-xi { width: 18px; height: 18px; color: var(--ink); }
.tw-x-compose-bar span { flex: 1; }

/* ---- pointing: tw-x-hl rings a block, tw-x-mark marks words, data-n numbers either, tw-x-dim fades the rest ---- */
.tw-x .tw-x-hl { position: relative; z-index: 1; border-radius: var(--radius-md); box-shadow: 0 0 0 3px var(--yellow), 0 0 0 4.5px var(--ink); }
.tw-x-quote.tw-x-hl, .tw-x-card.tw-x-hl, .tw-x-media.tw-x-hl { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule, #cfcfc8), 0 0 0 3px var(--yellow), 0 0 0 4.5px var(--ink); }
.tw-x-a.tw-x-hl, .tw-x-btn.tw-x-hl { border-radius: var(--radius-full); }
.tw-x-a.tw-x-hl { padding: 0 6px; background: var(--yellow); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.tw-x-tabs > .tw-x-hl, .tw-x-menu > .tw-x-hl { border-radius: 0; background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-x-tabs > .tw-x-hl { font-weight: 800; }
.tw-x-mark { padding: 0 2px; border-radius: 3px; background: var(--yellow); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tw-x [data-n] { position: relative; }
.tw-x [data-n]::after { content: attr(data-n); position: absolute; z-index: 3; top: -13px; right: -13px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--ink); color: var(--yellow); font-size: 13px; font-weight: 800; font-style: normal; line-height: 1; letter-spacing: 0; box-shadow: 0 0 0 2px var(--paper); }
.tw-x .tw-x-a[data-n]::after { top: -11px; right: -11px; width: 20px; height: 20px; font-size: 11.5px; }   /* an action is close under the words: a smaller disc */
.tw-x .tw-x-mark[data-n]::after { position: static; display: inline-flex; width: 19px; height: 19px; margin-left: 5px; font-size: 11.5px; vertical-align: 1px; box-shadow: none; }   /* words: the number rides at their end */
.tw-x .tw-x-tabs > [data-n]::after { top: 50%; right: 10px; bottom: auto; left: auto; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--ink); transform: translateY(-50%); }
.tw-x-dim { opacity: .38; }

/* the key under a picture: its numbers, each with a line of what it shows */
.tw-prose .tw-x-key { display: grid; gap: 6px; margin: 2px auto 0; padding: 0; max-width: 500px; list-style: none; color: var(--ink-2); font-size: 14.5px; font-weight: 600; line-height: 1.4; text-align: left; counter-reset: tw-x-key; }
.tw-prose .tw-x-key > li { position: relative; margin: 0; padding-left: 34px; counter-increment: tw-x-key; }
.tw-prose .tw-x-key > li::before { content: counter(tw-x-key); position: absolute; left: 0; top: -2px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--ink); color: var(--yellow); font-size: 13px; font-weight: 800; }

/* ======== the component library: what the <x-...> tags draw (code/Outside/OutsideX.cs, outside/_partials/x/,
   dev/docs/x-kit.md, every piece at /x-kit/library on dev). Written by hand, these classes work the same. ======== */

/* ---- themes: ours (the default: X's layout in our ink, yellow for pointing), X's own colours, X's dark. A theme
        on a figure or a card re-colours its cards by changing the tokens the pieces are drawn with; the figure's own
        stage and caption stay ours ---- */
.tw-x { --x-rule: #cfcfc8; --x-like: var(--ink); --x-repost: var(--ink); --x-mark: var(--ink); --x-badge: var(--ink); --x-gold: #c99a06; --x-grey: #829aab; --x-blue: var(--ink); --x-pen: #111111; }
.tw-x-th-x .tw-x, .tw-x.tw-x-th-x {
    --ink: #0f1419; --ink-2: #0f1419; --ink-3: #536471; --line: #eff3f4; --paper: #ffffff; --grey: #eff3f4; --link: #1d9bf0;
    --x-rule: #cfd9de; --x-like: #f91880; --x-repost: #00ba7c; --x-mark: #1d9bf0; --x-badge: #1d9bf0; --x-gold: #e2b719; --x-grey: #829aab; --x-blue: #1d9bf0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400;
}
.tw-x-th-dark .tw-x, .tw-x.tw-x-th-dark {
    --ink: #e7e9ea; --ink-2: #e7e9ea; --ink-3: #71767b; --line: #2f3336; --paper: #000000; --grey: #202327; --link: #1d9bf0;
    --x-rule: #536471; --x-like: #f91880; --x-repost: #00ba7c; --x-mark: #1d9bf0; --x-badge: #1d9bf0; --x-gold: #e2b719; --x-grey: #829aab; --x-blue: #1d9bf0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400;
}
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-text, :is(.tw-x-th-x, .tw-x-th-dark) .tw-x-who > span { font-weight: 400; }
:is(.tw-x-th-x, .tw-x-th-dark) :is(.tw-x-who b, .tw-x-btn, .tw-x-tabs > .on) { font-weight: 700; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-acts { font-weight: 400; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-a.on { font-weight: 400; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-tabs > .on::after { background: var(--x-blue); }
.tw-x-th-dark .tw-x, .tw-x.tw-x-th-dark { box-shadow: 0 0 0 1.5px #111111; }
/* pointing stays ours in every theme: black and yellow, so a mark reads the same on any screen */
:is(.tw-x-th-x, .tw-x-th-dark) [data-n]::after, :is(.tw-x-th-x, .tw-x-th-dark) .tw-x-key > li::before { background: var(--x-pen); color: var(--yellow); }
.tw-x-th-dark .tw-x-hl { box-shadow: 0 0 0 3px var(--yellow), 0 0 0 4.5px #ffffff !important; }
.tw-x-th-dark .tw-x-a.tw-x-hl, .tw-x-th-dark .tw-x-tabs > .tw-x-hl, .tw-x-th-dark .tw-x-menu > .tw-x-hl { color: #111111; }

/* states in colour: a like is pink, a repost green, a bookmark blue in X's themes; ink and bold in ours */
.tw-x-a-like.on { color: var(--x-like); }
.tw-x-a-repost.on { color: var(--x-repost); }
.tw-x-a-bookmark.on { color: var(--x-blue); }
.tw-x .tw-xi-badge { color: var(--x-badge); }
.tw-x .tw-x-badge-gold { color: var(--x-gold); }
.tw-x .tw-x-badge-grey { color: var(--x-grey); }
.tw-x-aff { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }

/* ---- words: a marker on words in a post (<mark>), @names in colour (made by the kit), a label on a part ---- */
.tw-x mark { padding: 0 2px; border-radius: 3px; background: var(--yellow); color: #111111; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tw-x-at { color: var(--link); font-weight: 600; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-at { color: var(--x-blue); font-weight: 400; }
.tw-x-tag { position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 9px); padding: 4px 9px 5px; border-radius: 7px; background: #111111; color: var(--yellow); font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: 0; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.tw-x-tag::after { content: ""; position: absolute; left: 50%; top: 100%; border: 5px solid transparent; border-top-color: #111111; transform: translateX(-50%); }
.tw-x-tag-below > .tw-x-tag { top: calc(100% + 9px); bottom: auto; }
.tw-x-tag-below > .tw-x-tag::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #111111; }
:where(.tw-x [data-xp]) { position: relative; }                       /* so a label (tw-x-tag) sits on its part; anything placed absolutely keeps that */
.tw-x-err { display: inline-block; padding: 4px 8px; border-radius: 4px; background: #ffe1db; color: #a1260f; font: 600 12.5px/1.4 ui-monospace, Consolas, monospace; white-space: pre-wrap; }

/* ---- faces: a square one for an organisation, the dashed one for "you", X's default for no photo, initials on a tint ---- */
.tw-x .tw-x-av.tw-x-av-org, .tw-prose .tw-x .tw-x-av.tw-x-av-org { border-radius: 22%; }
span.tw-x-av-you { background: var(--yellow-tint); box-shadow: inset 0 0 0 1.5px #b9b9b0; }
span.tw-x-av-you::after { content: ""; width: 46%; height: 46%; background: #8d8d85; -webkit-mask: var(--xi-user) center / contain no-repeat; mask: var(--xi-user) center / contain no-repeat; }
span.tw-x-av-default { overflow: hidden; align-items: flex-end; background: #cfd9de; box-shadow: none; }
span.tw-x-av-default::after { content: ""; width: 100%; height: 86%; background: radial-gradient(circle at 50% 30%, #fff 0 19%, transparent 19.5%), radial-gradient(ellipse 42% 34% at 50% 100%, #fff 0 99%, transparent 100%); }
span.tw-x-av-mint { background: var(--done-soft); }
span.tw-x-av-coral { background: var(--stop-soft); }
span.tw-x-av-grey { background: var(--grey); }
span.tw-x-av-ink { background: #111111; color: var(--yellow); box-shadow: none; }
.tw-x-th-dark span.tw-x-av { color: #111111; }

/* ---- photos, as X lays them out: one at its own shape, two side by side, three (one tall, two stacked), four in a
        square. A photo can be a placeholder: a tint with an icon or a few words, for a picture we don't have ---- */
.tw-x-media.tw-x-m2, .tw-x-media.tw-x-m3, .tw-x-media.tw-x-m4 { aspect-ratio: 16 / 9; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tw-x-m2 > * { grid-row: 1 / 3; }
.tw-x-m3 > :first-child { grid-row: 1 / 3; }
.tw-x-media.tw-x-m2 img, .tw-x-media.tw-x-m3 img, .tw-x-media.tw-x-m4 img { aspect-ratio: auto; }
.tw-x-media > * { position: relative; min-width: 0; min-height: 0; }
.tw-x-media > .tw-x-ph-img { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: var(--ar, 16 / 9); padding: 10px; background: var(--grey); background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 12px 12px; color: var(--ink-3); font-size: 13px; font-weight: 700; text-align: center; }
.tw-x-m2 > .tw-x-ph-img, .tw-x-m3 > .tw-x-ph-img, .tw-x-m4 > .tw-x-ph-img { aspect-ratio: auto; }
.tw-x-ph-img.tw-x-ph-yellow { background-color: var(--yellow-tint); }
.tw-x-ph-img.tw-x-ph-mint { background-color: var(--done-soft); }
.tw-x-ph-img.tw-x-ph-coral { background-color: var(--stop-soft); }
.tw-x-ph-img.tw-x-ph-ink { background: #111111; color: var(--yellow); }
.tw-x-ph-img > .tw-xi { width: 26px; height: 26px; }
.tw-x-badge-alt, .tw-x-badge-gif, .tw-x-dur { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .77); color: #fff; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .02em; }
.tw-x-badge-alt + .tw-x-badge-gif { left: 42px; }

/* a video: its poster, the play button in the middle, how long it runs, and views under it */
.tw-x-video { position: relative; margin-top: 10px; overflow: hidden; border-radius: 14px; background: #111111; box-shadow: 0 0 0 1px var(--line); }
.tw-x-video > img, .tw-x-video > .tw-x-ph-img { width: 100%; aspect-ratio: var(--ar, 16 / 9); object-fit: cover; }
.tw-x-video > .tw-x-ph-img { display: block; background: #2a2a28; background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1.4px); background-size: 12px 12px; }
.tw-x-video::after { content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border-radius: var(--radius-full); background: var(--x-blue, #111) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='white'/%3E%3C/svg%3E") 56% 50% / 26px no-repeat; box-shadow: 0 0 0 3px #fff; transform: translate(-50%, -50%); }
.tw-x-video.tw-x-gif::after { content: none; }
.tw-x-views-line { margin-top: 6px; color: var(--ink-3); font-size: 13px; }

/* a link card: the picture with its site on it, the site again under it; small, the picture beside the words */
.tw-x-link { display: block; margin-top: 10px; }
.tw-x-link-box { position: relative; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule); }
.tw-x-link-box > img, .tw-x-link-box > .tw-x-ph-img { display: flex; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
.tw-x-link-box > .tw-x-ph-img { align-items: center; justify-content: center; background: var(--grey); background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 12px 12px; color: var(--ink-3); }
.tw-x-link-title { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); overflow: hidden; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .77); color: #fff; font-size: 13px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; }
.tw-x-link-from { margin-top: 4px; color: var(--ink-3); font-size: 13px; }
.tw-x-link-sm .tw-x-link-box { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; }
.tw-x-link-sm .tw-x-link-box > img, .tw-x-link-sm .tw-x-link-box > .tw-x-ph-img { height: 100%; aspect-ratio: 1; border-right: 1px solid var(--x-rule); }
.tw-x-link-sm .tw-x-link-words { padding: 10px 12px; font-size: 14px; line-height: 1.35; }
.tw-x-link-words small { display: block; color: var(--ink-3); font-size: 13px; }

/* a poll: the choices, then the votes and the time left. Open, each choice is a button; closed, a bar of its share */
.tw-x-poll { display: grid; gap: 8px; margin-top: 10px; }
.tw-x-choice { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; padding: 0 12px; overflow: hidden; border-radius: 6px; font-size: 15px; font-weight: 600; z-index: 0; }
.tw-x-choice::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--w, 0%); border-radius: 6px; background: var(--x-poll, #e7e7e1); }
.tw-x-choice.on::before { background: var(--x-poll-on, var(--yellow)); }
.tw-x-choice.on { font-weight: 800; }
.tw-x-choice > span:last-child { font-variant-numeric: tabular-nums; }
.tw-x-choice .tw-xi { width: 15px; height: 15px; margin-left: 6px; vertical-align: -2px; }
.tw-x-poll-open .tw-x-choice { justify-content: center; border-radius: var(--radius-full); color: var(--link); box-shadow: inset 0 0 0 1.5px var(--link); }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-poll-open .tw-x-choice { color: var(--x-blue); box-shadow: inset 0 0 0 1px var(--x-blue); }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-choice { --x-poll: #cfd9de; --x-poll-on: #8ecdf8; }
.tw-x-th-dark .tw-x-choice { --x-poll: #333639; --x-poll-on: #1a8cd8; }
.tw-x-poll-foot { color: var(--ink-3); font-size: 14px; }

/* a Community Note under a post: X's box, its heading, the words, where they come from, the rating line */
.tw-x-note { margin-top: 10px; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule); font-size: 14.5px; }
.tw-x-note-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 2px; font-weight: 800; }
.tw-x-note-h .tw-xi { width: 18px; height: 18px; }
.tw-x-note-t { padding: 4px 12px 10px; }
.tw-x-note-src { display: block; margin-top: 6px; color: var(--link); font-weight: 600; }
.tw-x-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px; }
.tw-x-note-foot .tw-x-btn { height: 28px; padding: 0 12px; font-size: 13px; }

/* ---- a post's extras: the end of the name line (Grok, Ad, ...), the edited mark, the photo tag line, subscribers,
        Boost ---- */
.tw-x-who > .tw-x-end { display: flex; flex: none; align-items: center; gap: 12px; margin-left: auto; overflow: visible; color: var(--ink-3); }
.tw-x-who > .tw-x-end .tw-xi-more { margin-left: 0; }
.tw-x-who .tw-x-ad { color: var(--ink-3); font-size: 13px; }
.tw-x-who .tw-xi-edit { width: 14px; height: 14px; color: var(--ink-3); }
.tw-x-who .tw-xi-grok { width: 17px; height: 17px; }
.tw-x-tagged { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--ink-3); font-size: 13.5px; }
.tw-x-tagged .tw-xi { width: 15px; height: 15px; }
.tw-x-sub { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--ink-3); font-size: 13px; }
.tw-x-edited { margin-top: 10px; color: var(--ink-3); font-size: 14px; }
.tw-x-edited b { color: var(--link); font-weight: 600; }
.tw-x-boost { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: var(--grey); font-size: 14px; }
.tw-x-boost .tw-x-btn { height: 30px; padding: 0 14px; font-size: 13.5px; }
.tw-x-ib { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1.5px var(--x-rule); color: var(--ink); }
.tw-x-ib .tw-xi { width: 18px; height: 18px; }
.tw-x-reply-box { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.tw-x-reply-box .tw-x-ph { font-size: 17px; }
.tw-x-reply-box .tw-x-btn { height: 34px; }
.tw-x-showmore { display: block; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--link); font-size: 14.5px; font-weight: 600; text-align: center; }
.tw-x-showmore.tw-x-spam { color: var(--ink-3); text-align: left; }

/* ---- the screen's top: a title with a line under it, the home bar (your face, the logo, a button) ---- */
.tw-x-bar-t { display: grid; line-height: 1.2; }
.tw-x-bar-t small { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.tw-x-bar-home { justify-content: space-between; }
.tw-x-bar-home .tw-x-av { width: 32px; height: 32px; font-size: 12px; }
.tw-x-logo { display: inline-block; width: 24px; height: 24px; background: var(--ink); -webkit-mask: var(--xi-xlogo) center / contain no-repeat; mask: var(--xi-xlogo) center / contain no-repeat; }
.tw-x-bar .tw-x-btn { height: 32px; padding: 0 16px; font-size: 14px; }
.tw-x-tabs > [data-n] { padding-right: 38px; }
.tw-x-tabs-scroll { overflow-x: auto; scrollbar-width: none; }

/* the pill that says new posts are waiting, over the top of the timeline */
.tw-x-pill-wrap { display: flex; justify-content: center; padding: 10px 0 2px; }
.tw-x-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: var(--radius-full); background: var(--x-blue); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.tw-x .tw-x-pill { background: #111111; }
.tw-x-th-x .tw-x-pill, .tw-x-th-dark .tw-x-pill { background: #1d9bf0; }
.tw-x-pill .tw-xi { width: 16px; height: 16px; }
.tw-x-pill .tw-x-av { width: 24px; height: 24px; margin-left: -8px; box-shadow: 0 0 0 2px currentColor; font-size: 9px; }
.tw-x-pill .tw-x-av:first-of-type { margin-left: 0; }
.tw-x-pill .tw-x-av { color: #111111; }

/* ---- a phone: the frame, the status bar, the screen (whatever is inside), the tab bar, the Post button ---- */
.tw-x.tw-x-phone { display: flex; flex-direction: column; max-width: 340px; padding: 0; overflow: hidden; border-radius: 34px; box-shadow: 0 0 0 1.5px #111111, 0 0 0 6px var(--paper), 0 0 0 7.5px #111111; }
.tw-x-status { display: flex; flex: none; align-items: center; justify-content: space-between; height: 38px; padding: 4px 24px 0 28px; font-size: 14px; font-weight: 700; }
.tw-x-status i { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.tw-x-status i b { width: 3px; border-radius: 1px; background: currentColor; }
.tw-x-status i b:nth-child(1) { height: 4px; } .tw-x-status i b:nth-child(2) { height: 6px; } .tw-x-status i b:nth-child(3) { height: 8px; } .tw-x-status i b:nth-child(4) { height: 11px; }
.tw-x-status u { position: relative; display: inline-block; width: 22px; height: 11px; margin-left: 6px; border-radius: 3px; box-shadow: 0 0 0 1.5px currentColor; text-decoration: none; }
.tw-x-status u::after { content: ""; position: absolute; inset: 2px 6px 2px 2px; border-radius: 1px; background: currentColor; }
.tw-x-screen-box { position: relative; flex: 1; min-height: 0; }
.tw-x-screen { position: relative; min-height: 0; overflow: hidden; }
.tw-x-screen.tw-x-cut { max-height: var(--h, 520px); -webkit-mask: linear-gradient(#000 calc(100% - 60px), transparent); mask: linear-gradient(#000 calc(100% - 60px), transparent); }
.tw-x-screen > .tw-x-post:first-child, .tw-x-screen > .tw-x-notif:first-child { border-top: 0; }
.tw-x-screen > :is(.tw-x-post, .tw-x-person, .tw-x-notif, .tw-x-trend, .tw-x-convo, .tw-x-listrow) + :is(.tw-x-post, .tw-x-person, .tw-x-notif, .tw-x-trend, .tw-x-convo, .tw-x-listrow) { border-top: 1px solid var(--line); }
.tw-x-fab { position: absolute; right: 16px; bottom: 74px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: var(--radius-full); background: var(--x-blue); color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.tw-x .tw-x-fab { background: #111111; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-fab { background: #1d9bf0; }
.tw-x-fab .tw-xi { width: 24px; height: 24px; }
.tw-x-home-ind { flex: none; width: 120px; height: 4px; margin: 2px auto 8px; border-radius: 4px; background: var(--ink); }

/* the tab bar along a phone's foot: Home, Search, Grok, Notifications, Chat; the open one filled in, a count on one */
.tw-x-nav { display: flex; flex: none; justify-content: space-around; align-items: center; height: 52px; border-top: 1px solid var(--line); background: var(--paper); }
.tw-x-nav > span { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); color: var(--ink); }
.tw-x-nav .tw-xi { width: 24px; height: 24px; }
.tw-x-nav > span:not(.on) .tw-xi { opacity: .82; }
.tw-x-nav > span.on .tw-xi { --sw: 3; filter: drop-shadow(0 0 .4px currentColor) drop-shadow(0 0 .4px currentColor); }
.tw-x-count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--x-blue); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--paper); }
.tw-x .tw-x-count { background: #111111; color: var(--yellow); }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-count { background: #1d9bf0; color: #fff; }
.tw-x-nav > span.tw-x-hl { box-shadow: 0 0 0 3px var(--yellow), 0 0 0 4.5px #111111; }

/* ---- X on a computer: the menu down the left, the timeline in the middle, the side on the right. It folds to icons,
        then drops the side, as the picture gets narrower ---- */
.tw-x.tw-x-web { max-width: 980px; overflow: hidden; container: tw-x-web / inline-size; }                 /* the frame measures; its inside lays out */
.tw-x-web-in { display: grid; grid-template-columns: auto minmax(0, 1fr) 250px; }
.tw-x-rail { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-right: 1px solid var(--line); }
.tw-x-rail > span { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: var(--radius-full); font-size: 17px; font-weight: 500; white-space: nowrap; }
.tw-x-rail > span.on { font-weight: 800; }
.tw-x-rail .tw-xi { width: 23px; height: 23px; }
.tw-x-rail > span { position: relative; }
.tw-x-rail .tw-x-count { top: 1px; right: auto; left: 26px; }
.tw-x-side .tw-x-person { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 10px 14px; }
.tw-x-side .tw-x-person .tw-x-av { width: 36px; height: 36px; }
.tw-x-side .tw-x-person > .tw-x-btn { height: 30px; padding: 0 12px; font-size: 13.5px; }
.tw-x-side .tw-x-person .tw-x-who { flex-wrap: wrap; }
.tw-x-side .tw-x-person .tw-x-who > span:first-of-type { flex-basis: 100%; }
.tw-x-rail > .tw-x-logo-row { padding: 8px 12px 10px; }
.tw-x-rail > .tw-x-btn { justify-content: center; height: 44px; margin-top: 10px; font-size: 16px; }
.tw-x-col { min-width: 0; border-right: 1px solid var(--line); container: tw-x / inline-size; }
.tw-x-col > :is(.tw-x-post, .tw-x-person, .tw-x-notif) + :is(.tw-x-post, .tw-x-person, .tw-x-notif) { border-top: 1px solid var(--line); }
.tw-x-side { display: grid; align-content: start; gap: 14px; padding: 10px 14px; }
.tw-x-side > .tw-x-field { flex: none; }
.tw-x-box { overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.tw-x-box-h { padding: 12px 14px 4px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.tw-x-box > p { padding: 0 14px 10px; color: var(--ink-2); font-size: 14px; }
.tw-x-box > .tw-x-btn { margin: 0 14px 14px; }
@container tw-x-web (max-width: 860px) { .tw-x-web-in { grid-template-columns: auto minmax(0, 1fr); } .tw-x-web .tw-x-side { display: none; } .tw-x-col { border-right: 0; } }
@container tw-x-web (max-width: 640px) { .tw-x-rail > span > :not(.tw-xi, .tw-x-logo, .tw-x-av) { display: none; } .tw-x-rail > .tw-x-btn { width: 44px; padding: 0; font-size: 0; } .tw-x-rail > .tw-x-btn::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--xi-compose) center / contain no-repeat; mask: var(--xi-compose) center / contain no-repeat; } }

/* ---- a profile: the round icon buttons beside Follow, who you know that follows them, a square face ---- */
.tw-x-pro-btns { display: flex; align-items: center; gap: 8px; }
.tw-x-known { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink-3); font-size: 13.5px; line-height: 1.35; }
.tw-x-known .tw-x-faces { flex: none; margin: 0; gap: 0; }
.tw-x-known .tw-x-faces .tw-x-av { width: 20px; height: 20px; margin-left: -6px; box-shadow: 0 0 0 2px var(--paper); font-size: 8px; }
.tw-x-known .tw-x-faces .tw-x-av:first-child { margin-left: 0; }
.tw-x-pro-top .tw-x-av.tw-x-av-org { border-radius: 16px; }
.tw-x-who .tw-x-follows { flex: none; white-space: nowrap; }
.tw-x-who-2 .tw-x-follows { margin-left: 0; }
@container tw-x (max-width: 360px) { .tw-x-person .tw-x-who { flex-wrap: wrap; row-gap: 2px; } .tw-x-person .tw-x-who > span:first-of-type { flex-basis: auto; } }
.tw-x-cat { color: var(--ink-3); font-size: 14px; }

/* a card that opens over a name you point at: the face, the button, the name, the bio, the counts, who you know */
.tw-x.tw-x-hover { max-width: 300px; padding: 14px 16px 16px; border-radius: 16px; box-shadow: var(--edge), 0 10px 30px rgba(0, 0, 0, .16); }
.tw-x-hover-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tw-x-hover-top .tw-x-av { width: 64px; height: 64px; font-size: 22px; }
.tw-x-hover .tw-x-bio { margin-top: 8px; font-size: 14.5px; }
.tw-x-hover .tw-x-counts { margin: 10px 0 0; padding: 0; border: 0; }

/* ---- notifications: the icon in the colour of what happened (in X's themes), the words, a time ---- */
.tw-x-notif > .tw-xi-liked { color: var(--x-like); }
.tw-x-notif > .tw-xi-repost { color: var(--x-repost); }
.tw-x-notif > .tw-xi-user, .tw-x-notif > .tw-xi-follow { color: var(--x-blue); }
.tw-x-notif > .tw-xi-bell, .tw-x-notif > .tw-xi-star { color: var(--x-blue); }
.tw-x-notif > .tw-xi-xlogo { color: var(--ink); }
.tw-x-notif .tw-x-faces .tw-x-av { font-size: 12px; }
.tw-x-notif-t { color: var(--ink); }

/* ---- writing: who can reply, the ring that counts the characters, + to add a post to a thread ---- */
.tw-x-audience { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 0 0 10px; border-bottom: 1px solid var(--line); color: var(--link); font-size: 14px; font-weight: 700; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-audience { color: var(--x-blue); }
.tw-x-audience .tw-xi { width: 16px; height: 16px; }
.tw-x-ring { --p: 0; flex: none; width: 22px; height: 22px; border-radius: var(--radius-full); background: conic-gradient(var(--x-ring, var(--ink)) calc(var(--p) * 1%), var(--line) 0); -webkit-mask: radial-gradient(circle, transparent 7px, #000 7.5px); mask: radial-gradient(circle, transparent 7px, #000 7.5px); }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-ring { --x-ring: #1d9bf0; }
.tw-x-ring.tw-x-ring-near { --x-ring: #ffd400; }
.tw-x-ring.tw-x-ring-over { --x-ring: #f4212e; }
.tw-x-tools > .tw-x-ring { margin-left: auto; }
.tw-x-tools > .tw-x-ring + .tw-x-sep { width: 1px; height: 24px; background: var(--line); }
.tw-x-tools > .tw-x-ring ~ .tw-x-btn { margin-left: 0; }
.tw-x-tools .tw-x-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1.5px var(--x-rule); }
.tw-x-tools .tw-x-add .tw-xi { width: 14px; height: 14px; }
.tw-x-typed:empty::after { margin-left: 0; }
.tw-x-typed.tw-x-still::after { content: none; }
.tw-x-compose-to { margin: 0 0 4px; color: var(--ink-3); font-size: 14px; }
.tw-x-compose-to b { color: var(--link); font-weight: 600; }

/* ---- a menu row in red (Delete, Block, Report), a tick on the one chosen; a sheet that rises from a phone's foot ---- */
.tw-x-menu > .tw-x-stop { color: var(--stop); }
.tw-x-th-x .tw-x-menu > .tw-x-stop, .tw-x-th-dark .tw-x-menu > .tw-x-stop, .tw-x-menu.tw-x-th-x > .tw-x-stop, .tw-x-menu.tw-x-th-dark > .tw-x-stop { color: #f4212e; }
.tw-x-menu > span > .tw-x-tick { width: 18px; height: 18px; margin-left: auto; color: var(--x-blue); }
.tw-x-menu-h { padding: 8px 18px 4px; font-size: 17px; font-weight: 800; }
.tw-x-menu-sub { padding: 0 18px 8px; color: var(--ink-3); font-size: 14px; }
.tw-x.tw-x-sheet { max-width: 380px; padding: 8px 0 14px; border-radius: 22px 22px 0 0; box-shadow: var(--edge), 0 -6px 24px rgba(0, 0, 0, .12); }
.tw-x-sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: var(--x-rule); }
.tw-x-sheet > span { display: flex; align-items: center; gap: 14px; padding: 12px 20px; font-size: 16px; font-weight: 700; }
.tw-x-sheet > span .tw-xi { width: 21px; height: 21px; }
.tw-x-sheet > .tw-x-btn { display: flex; width: calc(100% - 40px); height: 44px; margin: 10px 20px 0; }
.tw-x.tw-x-sheet > .tw-x-btn { border-radius: var(--radius-full); }
.tw-x-sheet > .tw-x-hl { border-radius: 0; background: var(--yellow); color: #111111; box-shadow: inset 0 0 0 1.5px #111111; }

/* ---- Chat: the top of a conversation, a post shared in a bubble, the list of conversations ---- */
.tw-x-chat-top { display: grid; justify-items: center; gap: 2px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.tw-x-chat-top .tw-x-av { width: 56px; height: 56px; margin-bottom: 4px; font-size: 20px; }
.tw-x-chat-top small { color: var(--ink-3); font-size: 13.5px; }
.tw-x-msg > .tw-x-quote { margin: 4px 0 2px; background: var(--paper); color: var(--ink); }
.tw-x-msg.me > .tw-x-quote { box-shadow: none; }
.tw-x-msg-read { color: var(--ink-3); font-size: 12px; justify-self: end; }
.tw-x-convo { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 16px; }
.tw-x-convo .tw-x-av { width: 48px; height: 48px; }
.tw-x-convo-t { overflow: hidden; color: var(--ink-3); font-size: 14.5px; white-space: nowrap; text-overflow: ellipsis; }
.tw-x-convo.on .tw-x-convo-t { color: var(--ink); font-weight: 700; }
.tw-x-convo.on .tw-x-who::after { content: ""; flex: none; width: 9px; height: 9px; margin-left: auto; border-radius: var(--radius-full); background: var(--x-blue); }
.tw-x .tw-x-convo.on .tw-x-who::after { background: #111111; }

/* ---- Explore: what's trending, each a line of where, the topic, how many posts ---- */
.tw-x-trends-h { padding: 12px 16px 6px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.tw-x-trend { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 16px; }
.tw-x-trend small { display: block; color: var(--ink-3); font-size: 13px; }
.tw-x-trend b { display: block; font-size: 15px; font-weight: 800; }
.tw-x-trend > .tw-xi { width: 18px; height: 18px; color: var(--ink-3); }
.tw-x-trend-faces { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--ink-3); font-size: 13px; }
.tw-x-trend-faces .tw-x-av { width: 18px; height: 18px; margin-left: -6px; box-shadow: 0 0 0 1.5px var(--paper); }
.tw-x-trend-faces .tw-x-av:first-child { margin-left: 0; }

/* ---- Lists, Communities and Bookmarks: a row with a picture, a header with a banner and Join, folders ---- */
.tw-x-listrow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 16px; }
.tw-x-listrow > .tw-x-list-img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--yellow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M0 9 8 3 16 9' fill='none' stroke='%23111111' stroke-opacity='.22' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E"); background-size: 16px 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.tw-x-listrow b { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 800; }
.tw-x-listrow b .tw-xi { width: 14px; height: 14px; }
.tw-x-listrow small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; color: var(--ink-3); font-size: 13.5px; }
.tw-x-listrow small .tw-x-av { width: 16px; height: 16px; font-size: 7px; }
.tw-x-listrow > .tw-xi { width: 20px; height: 20px; color: var(--x-blue); }
.tw-x-listrow > .tw-x-btn { height: 32px; padding: 0 14px; font-size: 14px; }
.tw-x-comm-banner { height: 120px; background: var(--grey); background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 12px 12px; }
img.tw-x-comm-banner { width: 100%; object-fit: cover; }
.tw-x-comm { padding: 12px 16px 14px; }
.tw-x-comm-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tw-x-comm-h b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.tw-x-comm-members { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-3); font-size: 14px; }
.tw-x-comm-members b { color: var(--ink); }
.tw-x-folders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 16px; }
.tw-x-folder { display: grid; align-content: end; gap: 2px; min-height: 84px; padding: 10px 12px; border-radius: 14px; background: var(--grey); font-size: 15px; font-weight: 800; }
.tw-x-folder small { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.tw-x-folder.on { background: var(--yellow); color: #111111; }
.tw-x-folder.on small { color: #3a3a38; }
.tw-x-th-x .tw-x-folder.on, .tw-x-th-dark .tw-x-folder.on { background: #1d9bf0; color: #fff; }

/* ---- numbers: a post's or an account's analytics, a grid of figures with what they count ---- */
.tw-x-stats { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 1px; background: var(--line); }
.tw-x-stat { display: grid; gap: 2px; padding: 12px 16px; background: var(--paper); }
.tw-x-stat small { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.tw-x-stat b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tw-x-stat i { color: var(--done); font-size: 12.5px; font-style: normal; font-weight: 700; }
.tw-x-stat i.down { color: var(--stop); }
.tw-x-spark { display: block; width: calc(100% - 32px); height: 46px; margin: 8px 16px 12px; }
.tw-x-spark polyline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tw-x-spark polygon { fill: var(--yellow); opacity: .45; }

/* ---- the panel a check opens, an app asking for your account, a QR code, a site's Follow button, a business's spot ---- */
.tw-x-panel { padding: 18px 20px 20px; }
.tw-x-panel > .tw-xi { width: 34px; height: 34px; margin-bottom: 8px; }
.tw-x-panel > b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.tw-x-panel > p { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; }
.tw-x-panel > .tw-x-btn { width: 100%; height: 40px; margin-top: 16px; }
.tw-x-perms { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.tw-x-perms > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; font-size: 14px; line-height: 1.4; }
.tw-x-perms > li > .tw-xi { width: 18px; height: 18px; margin-top: 1px; }
.tw-x-perms > li b { display: block; font-size: 14.5px; }
.tw-x-perms > li.no { color: var(--ink-3); }
.tw-x-perms-h { margin-top: 16px; font-size: 15px; font-weight: 800; }
.tw-x-app { display: flex; align-items: center; gap: 12px; }
.tw-x-app > .tw-x-av { width: 48px; height: 48px; border-radius: 12px; }
.tw-x-app small { display: block; color: var(--ink-3); font-size: 13.5px; }
.tw-x-qr { display: grid; justify-items: center; gap: 10px; padding: 22px 20px 20px; text-align: center; }
.tw-x-qr-code { position: relative; width: 168px; height: 168px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px #111111; }
.tw-x-qr-code svg { display: block; width: 100%; height: 100%; }
.tw-x-qr-code .tw-x-av { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; box-shadow: 0 0 0 4px #fff; transform: translate(-50%, -50%); }
.tw-x-qr small { color: var(--ink-3); font-size: 14px; }
.tw-x-qr-btns { display: flex; gap: 10px; }
.tw-x-sitebtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: var(--radius-full); background: #0f1419; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; }
.tw-x-sitebtn::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--xi-xlogo) center / contain no-repeat; mask: var(--xi-xlogo) center / contain no-repeat; }
.tw-x-sitebtn-count { display: inline-flex; align-items: center; height: 28px; margin-left: 6px; padding: 0 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px #cfd9de; color: #0f1419; font-size: 12.5px; font-weight: 600; }
.tw-x-spot { margin: 10px 16px 4px; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule); }
.tw-x-spot-map { height: 96px; background: #e8efe4; background-image: linear-gradient(90deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%), linear-gradient(transparent 40%, #fff 40%, #fff 46%, transparent 46%), linear-gradient(120deg, transparent 60%, #d4e4f2 60%); position: relative; }
.tw-x-spot-map::after { content: ""; position: absolute; left: 50%; top: 44%; width: 26px; height: 26px; background: var(--stop); -webkit-mask: var(--xi-place) center / contain no-repeat; mask: var(--xi-place) center / contain no-repeat; transform: translate(-50%, -50%); }
.tw-x-spot-rows { display: grid; gap: 6px; padding: 10px 12px; font-size: 14px; }
.tw-x-spot-rows > span { display: flex; align-items: center; gap: 8px; }
.tw-x-spot-rows .tw-xi { width: 16px; height: 16px; color: var(--ink-3); }
.tw-x-spot-rows .ok { color: var(--done); font-weight: 700; }
.tw-x-spot-btns { display: flex; gap: 8px; padding: 0 12px 12px; }
.tw-x-spot-btns .tw-x-btn { flex: 1; height: 32px; font-size: 13.5px; }

/* ---- Spaces and Articles: a live audio room's card, an article's cover and title ---- */
.tw-x-space { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #7856ff; color: #fff; }
.tw-x .tw-x-space { background: #111111; color: #fff; }
.tw-x-th-x .tw-x-space, .tw-x-th-dark .tw-x-space { background: #7856ff; }
.tw-x-space-live { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tw-x-space-live::before { content: ""; width: 14px; height: 10px; background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 6px, transparent 6px 8px, currentColor 8px 10px, transparent 10px 12px, currentColor 12px 14px); -webkit-mask: linear-gradient(transparent 0 0); }
.tw-x-space b { display: block; margin: 6px 0 10px; font-size: 18px; line-height: 1.25; }
.tw-x-space-foot { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.tw-x-space-foot .tw-x-av { width: 22px; height: 22px; margin-left: -8px; box-shadow: 0 0 0 1.5px currentColor; color: #111111; font-size: 9px; }
.tw-x-space-foot .tw-x-av:first-child { margin-left: 0; }
.tw-x-space-foot .tw-x-btn { margin-left: auto; height: 30px; background: #fff; color: #111111; }
.tw-x-article { margin-top: 10px; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule); }
.tw-x-article > img, .tw-x-article > .tw-x-ph-img { display: flex; width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
.tw-x-article-w { padding: 10px 12px 12px; }
.tw-x-article-w small { display: flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tw-x-article-w b { display: block; margin-top: 3px; font-size: 17px; font-weight: 800; line-height: 1.25; }
.tw-x-article-w p { margin-top: 4px; color: var(--ink-3); font-size: 14px; }

/* ---- notices over the picture: what someone did (a face, the icon, the words), or X's own bar at the foot.
        Placed at a corner or an edge of the figure; several at one place stack ---- */
.tw-x-toasts { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.tw-x-toasts.tr { top: 12px; right: 12px; align-items: flex-end; }
.tw-x-toasts.tl { top: 12px; left: 12px; align-items: flex-start; }
.tw-x-toasts.br { bottom: 12px; right: 12px; align-items: flex-end; flex-direction: column-reverse; }
.tw-x-toasts.bl { bottom: 12px; left: 12px; align-items: flex-start; flex-direction: column-reverse; }
.tw-x-toasts.t { top: 12px; left: 50%; align-items: center; transform: translateX(-50%); }
.tw-x-toasts.b { bottom: 14px; left: 50%; align-items: center; flex-direction: column-reverse; transform: translateX(-50%); }
.tw-x-toasts.r { top: 50%; right: 8px; align-items: flex-end; transform: translateY(-50%); }
.tw-x-toasts.l { top: 50%; left: 8px; align-items: flex-start; transform: translateY(-50%); }
.tw-x-toasts.out.tr { top: -16px; right: 18px; } .tw-x-toasts.out.tl { top: -16px; left: 18px; }
.tw-x-toasts.out.br { bottom: -16px; right: 18px; } .tw-x-toasts.out.bl { bottom: -16px; left: 18px; }
.tw-x-toast { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 5px 13px 5px 5px; border-radius: var(--radius-full); background: #ffffff; color: #111111; font-family: var(--font-sans); font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 0; white-space: nowrap; box-shadow: var(--toast); }
.tw-x-toast > .tw-x-av, .tw-x-toast > img { width: 26px; height: 26px; border-radius: var(--radius-full); object-fit: cover; font-size: 10px; }
.tw-x-toast > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.tw-x-toast i { color: #4a4a48; font-style: normal; font-weight: 600; }
.tw-x-toast-ic { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: -18px; margin-top: 16px; border-radius: var(--radius-full); background: var(--yellow); color: #111111; box-shadow: 0 0 0 2px #fff; transform: scale(.62); transform-origin: 0 100%; }
.tw-x-toast-ic .tw-xi { width: 16px; height: 16px; }
.tw-x-toast-ic.like { background: #ffd1e6; } .tw-x-toast-ic.repost { background: var(--done-soft); } .tw-x-toast-ic.follow { background: #cbe9ff; }
.tw-x-toast.tw-x-sys { gap: 10px; padding: 10px 16px; border-radius: 6px; background: #1d9bf0; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.5px; font-weight: 400; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.tw-x-toast.tw-x-sys b { font-weight: 700; }
.tw-xfig .tw-x-toast.tw-x-sys { background: #111111; }
.tw-xfig.tw-x-th-x .tw-x-toast.tw-x-sys, .tw-xfig.tw-x-th-dark .tw-x-toast.tw-x-sys { background: #1d9bf0; }

/* ---- small parts the pieces share ---- */
.tw-x-a > [data-xc]:empty, .tw-x-count:empty { display: none; }
.tw-x-big { position: relative; }
.tw-x-big-end { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 12px; color: var(--ink-3); }
.tw-x-big-end .tw-x-btn { height: 32px; padding: 0 16px; font-size: 14px; color: var(--paper); }
.tw-x-big-end .tw-x-btn-line { color: var(--ink); }
.tw-x-big-end .tw-xi { width: 18px; height: 18px; }
.tw-x-quote-gone { color: var(--ink-3); font-size: 14.5px; background: var(--grey); box-shadow: none; }
.tw-x-media > .tw-x-photo { display: block; }
.tw-x-media.tw-x-m2 img, .tw-x-media.tw-x-m3 img, .tw-x-media.tw-x-m4 img { height: 100%; }
.tw-x-media > .tw-x-tag, .tw-x-video > .tw-x-tag, .tw-x-link-box > .tw-x-tag { top: 8px; bottom: auto; left: 8px; transform: none; }
.tw-x-media > .tw-x-tag::after, .tw-x-video > .tw-x-tag::after { content: none; }
.tw-x-bar > .tw-x-av { width: 32px; height: 32px; font-size: 12px; }
.tw-x-bar-t > span { display: inline-flex; align-items: center; gap: 4px; }
.tw-x-row-v { color: var(--ink-3); font-size: 14px; }
.tw-x-pro-face { position: relative; display: inline-flex; border-radius: var(--radius-full); }
.tw-x-fab { bottom: 16px; }
.tw-x-space-live { display: flex; align-items: center; gap: 6px; }
.tw-x-space-live::before { content: none; }
.tw-x-space-live .tw-xi { width: 15px; height: 15px; }
.tw-x-compose .tw-x-main { min-height: 52px; }
.tw-x-compose .tw-x-ph { padding-top: 6px; }
.tw-x-compose .tw-x-typed { padding-top: 6px; }
.tw-x-tools .tw-x-btn { flex: none; }
@container tw-x (max-width: 460px) {
    .tw-x-tools { gap: 11px; padding-left: 16px; }
    .tw-x-tools > .tw-x-ic:nth-child(n+5) { display: none; }
}
@container tw-x (max-width: 300px) { .tw-x-tools > .tw-x-ic:nth-child(n+3), .tw-x-tools > .tw-x-sep, .tw-x-tools > .tw-x-add { display: none; } }
.tw-x-tools > .tw-x-sep, .tw-x-tools > .tw-x-add { flex: none; }
.tw-x-tools > .tw-x-ring[hidden] + .tw-x-sep, .tw-x-tools > .tw-x-ring[hidden] + .tw-x-sep + .tw-x-add { display: none; }
.tw-x-tools > .tw-x-ring[hidden] ~ .tw-x-btn { margin-left: auto; }
.tw-x-known .tw-x-faces { margin-bottom: 0; }
.tw-x-notif-t b { font-weight: 800; }
.tw-x-trend .tw-x-at { color: inherit; font-weight: inherit; }
.tw-x-perms > li.tw-x-hl { border-radius: 6px; padding: 4px 6px; margin: -4px -6px; }
.tw-x-chat .tw-x-msg { margin: 0; }
.tw-x-convo .tw-x-who { gap: 4px; }
/* an image in an article's column keeps the kit's shape: the column's own rule gives every image a frame and a margin */
.tw-prose .tw-x > img:first-child { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.tw-prose .tw-x .tw-x-listrow > .tw-x-list-img { border-radius: 12px; }
.tw-prose .tw-x .tw-x-aff { border-radius: 3px; }
.tw-prose .tw-x-toast img, .tw-x-toast img { margin: 0; box-shadow: none; background: none; }
.tw-xfig { position: relative; }
.tw-xfig-bare { display: grid; justify-items: center; gap: 18px; margin: 0; }
/* the website a Follow button sits on: a browser's bar, the page's lines */
.tw-x.tw-x-site { max-width: 420px; overflow: hidden; }
.tw-x-site-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--grey); }
.tw-x-site-bar > i { width: 9px; height: 9px; border-radius: var(--radius-full); background: #d6d6cf; }
.tw-x-site-bar > span { flex: 1; margin-left: 8px; padding: 3px 10px; border-radius: var(--radius-full); background: var(--paper); color: var(--ink-3); font-size: 12.5px; }
.tw-x-site-page { display: grid; gap: 8px; padding: 16px 18px 18px; }
.tw-x-site-page > b { font-size: 18px; font-weight: 800; }
.tw-x-site-page > span { height: 8px; border-radius: 4px; background: var(--grey); }
.tw-x-site-page > span.short { width: 60%; }
.tw-x-sitebtn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 6px; }
.tw-x-sitebtn, .tw-x-sitebtn-count { flex: none; white-space: nowrap; }

/* ---- X as it is in October 2026 (research of 2026-10-21: x-web's code and stylesheet, X's posts, the Help Center) ---- */
/* media and quoted posts at 16px corners, a quoted post's face at 24px */
.tw-x-media, .tw-x-quote, .tw-x-video, .tw-x-link-box, .tw-x-note, .tw-x-article { border-radius: 16px; }
.tw-x-quote .tw-x-av { width: 24px; height: 24px; }
.tw-x-quote span.tw-x-av { font-size: 11px; }
/* the action bar under a post: the four counted actions spread, bookmark and share together at the right */
.tw-x-post:not(.tw-x-big) .tw-x-acts { justify-content: flex-start; gap: 8px; max-width: none; }
.tw-x-post:not(.tw-x-big) .tw-x-acts > .tw-x-a { flex: 1 0 auto; }
.tw-x-post:not(.tw-x-big) .tw-x-acts > .tw-x-a-bookmark, .tw-x-post:not(.tw-x-big) .tw-x-acts > .tw-x-a-share { flex: none; margin-left: 6px; }
.tw-x-big > .tw-x-acts { justify-content: space-between; padding-inline: 8px; }
/* two to four photos in a row you swipe: each 8px corners, 4px apart, running off the edge when they don't fit */
.tw-x-media.tw-x-swipe { display: flex; gap: 4px; overflow: hidden; border-radius: 0; box-shadow: none; aspect-ratio: 100 / 68; }
.tw-x-swipe > * { flex: 0 0 72%; height: 100%; overflow: hidden; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.tw-x-swipe-2 > * { flex-basis: calc(50% - 2px); }
.tw-x-media.tw-x-swipe img, .tw-x-swipe > .tw-x-ph-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.tw-x-swipe > .tw-x-ph-img { display: flex; }
/* a content warning over photos */
.tw-x-media > .tw-x-warn { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; border-radius: inherit; background: rgba(0, 0, 0, .55); color: #fff; text-align: center; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.tw-x-warn .tw-xi { width: 28px; height: 28px; }
.tw-x-warn b { font-size: 17px; font-weight: 700; }
.tw-x-warn small { max-width: 300px; font-size: 13px; opacity: .85; }
.tw-x-warn .tw-x-btn { position: absolute; right: 12px; bottom: 12px; height: 30px; padding: 0 14px; background: rgba(255, 255, 255, .9); color: #111; box-shadow: none; font-size: 13.5px; }
.tw-x-media:has(> .tw-x-warn) { position: relative; }
/* the labels under a post: Subscribers, Made with AI, Paid partnership, Boosted; and Translated from */
.tw-x-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; color: var(--ink-3); font-size: 13px; }
.tw-x-labels > span { display: inline-flex; align-items: center; gap: 4px; }
.tw-x-labels .tw-xi { width: 14px; height: 14px; }
.tw-x-labels > .tw-x-subs { padding: 2px 8px; border-radius: var(--radius-full); background: #fae0fa; color: #c936cc; font-weight: 700; }
.tw-x-transl { display: flex; align-items: center; gap: 5px; margin: 1px 0 3px; color: var(--ink-3); font-size: 13px; }
.tw-x-transl .tw-xi { width: 14px; height: 14px; }
.tw-x-transl b { color: var(--link); font-weight: 600; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-transl b { color: var(--x-blue); }
/* under a post's own page: how replies are sorted, and View quotes */
.tw-x-sortrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; font-weight: 600; }
.tw-x-sortrow > span { display: inline-flex; align-items: center; gap: 4px; }
.tw-x-sortrow > span:first-child .tw-xi { transform: rotate(90deg); }
.tw-x-sortrow .tw-xi { width: 13px; height: 13px; }
/* the new posts row on the web (Show 12 posts) */
.tw-x-showrow { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--link); font-size: 15px; font-weight: 600; text-align: center; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-showrow { color: var(--x-blue); }
/* notifications: the time after the sentence, the post's photo at the right */
.tw-x-notif-time { color: var(--ink-3); font-weight: 500; }
.tw-x-notif.tw-x-notif-img { grid-template-columns: 40px minmax(0, 1fr) 64px; }
.tw-x-notif-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.tw-prose .tw-x .tw-x-notif-thumb { width: 64px; height: 64px; border-radius: 10px; }
.tw-x-notif-t .tw-xi-badge { width: 15px; height: 15px; margin: 0 2px; vertical-align: -2px; }
.tw-x-notif > .tw-xi-reply { color: #ff7a00; }
/* Chat: All and Requests, round bubbles, a sent tick */
.tw-x-chips { display: flex; gap: 8px; padding: 4px 16px 10px; border-bottom: 1px solid var(--line); }
.tw-x-chips > span { padding: 6px 14px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--x-rule); font-size: 14px; font-weight: 700; }
.tw-x-chips > span.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.tw-x-msg { border-radius: 20px; }
.tw-x-msg.me { border-radius: 20px; background: var(--x-blue); }
.tw-x .tw-x-msg.me { background: #111111; color: #fff; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-msg.me { background: #1d9bf0; color: #fff; }
.tw-x-msg-time .tw-xi { width: 13px; height: 13px; vertical-align: -2px; }
/* a Community Note still gathering ratings */
.tw-x-note-preview { box-shadow: none; outline: 1.5px dashed var(--x-rule); outline-offset: -1.5px; }
.tw-x-note-h { background: var(--grey); padding-bottom: 8px; }
.tw-x-note-h .tw-xi { color: var(--x-blue); }
.tw-x .tw-x-note-h .tw-xi { color: var(--ink); }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-note-h .tw-xi { color: #1d9bf0; }
/* the follow button's other states: Unfollow (pointed at, in red), Pending, Subscribe (plum) */
.tw-x-btn-unfollow { background: transparent; color: #f4212e; box-shadow: inset 0 0 0 1.5px #fdc9ce; }
.tw-x-btn-sub { background: #c936cc; color: #fff; }
/* X's own notice at the foot of the screen: dark, see-through, blurred (x-web) */
.tw-x-toast.tw-x-sys, .tw-xfig .tw-x-toast.tw-x-sys, .tw-xfig.tw-x-th-x .tw-x-toast.tw-x-sys, .tw-xfig.tw-x-th-dark .tw-x-toast.tw-x-sys { border-radius: 12px; background: rgba(34, 34, 34, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, .25); font-family: var(--font-sans); font-weight: 600; }
/* About this account */
.tw-x-about { padding-bottom: 6px; }
.tw-x-about-top { display: grid; justify-items: center; gap: 2px; padding: 16px 16px 10px; text-align: center; }
.tw-x-about-top .tw-x-av { width: 64px; height: 64px; margin-bottom: 6px; font-size: 22px; }
.tw-x-about-top b { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 800; }
.tw-x-about-top small { color: var(--ink-3); font-size: 14px; }

/* ---- asked for by the refresh drafts (2026-10-21) ---- */
/* the default face and the reader's dashed face keep their own ground in a profile's header (the header paints faces white) */
.tw-x-pro-top span.tw-x-av.tw-x-av-default { background: #cfd9de; }
.tw-x-pro-top span.tw-x-av.tw-x-av-you { background: var(--yellow-tint); }
/* a grey header, and a suspended account's notice */
.tw-x-banner.tw-x-banner-grey { background: #cfd9de; background-image: none; }
.tw-x-gone { margin: 14px 0 18px; }
.tw-x-gone > b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.tw-x-gone > p { margin-top: 6px; color: var(--ink-3); font-size: 15px; }
/* a post's time can be pointed at; a number on a piece that clips its corners sits inside the corner */
.tw-x-who > .tw-x-when { flex: none; }
.tw-x-who > .tw-x-when.tw-x-hl { padding: 0 3px; background: var(--yellow); color: #111111; }
.tw-x :is(.tw-x-media, .tw-x-video, .tw-x-link-box, .tw-x-note, .tw-x-article, .tw-x-space)[data-n]::after { top: 8px; right: 8px; box-shadow: 0 0 0 2px #fff; }
.tw-x-media.tw-x-swipe[data-n]::after { position: absolute; }
.tw-x-ph-img { position: relative; box-sizing: border-box; }

/* ---- the second round asked for by the refresh drafts (2026-10-21) ---- */
/* narrow posts drop the bookmark first, then share (X drops the bookmark under 290px) */
@container tw-x (max-width: 340px) { .tw-x-acts > .tw-x-a-bookmark { display: none; } }
/* Chat's time inside the bubble, the sent tick after it */
.tw-x-msg-in { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; font-size: 11.5px; opacity: .72; vertical-align: -1px; white-space: nowrap; }
.tw-x-msg-in .tw-xi { width: 12px; height: 12px; }
.tw-x-msg-time { justify-self: end; }
/* the views on a post's own page, pointable */
.tw-x-time > .tw-x-views b { color: var(--ink); }
.tw-x-time > :is(span).tw-x-hl { padding: 0 3px; background: var(--yellow); color: #111111; }
.tw-x-time > .tw-x-hl b { color: #111111; }
/* an icon that can be pointed at sits in a span (an icon is a mask, and a mask would clip its ring): the ring goes there */
.tw-x-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; border-radius: var(--radius-full); }
.tw-x .tw-x-ic.tw-x-hl, .tw-x .tw-x-add.tw-x-hl { background: var(--yellow); color: #111111; box-shadow: 0 0 0 4px var(--yellow), 0 0 0 5.5px #111111; }
.tw-x-tools .tw-x-ic .tw-xi { width: 19px; height: 19px; }
.tw-x-tools > .tw-x-ic.tw-x-off { opacity: .35; }
/* a person row with its ... */
.tw-x-person:has(.tw-x-person-dots) { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
.tw-x-person-dots { align-self: center; width: 26px; height: 26px; margin-right: 2px; color: var(--ink-3); }
.tw-x-person-dots .tw-xi { width: 18px; height: 18px; }
/* the iOS profile's two pills under Followed by */
.tw-x-pro-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 6px; }
.tw-x-pro-pills .tw-x-btn { width: 100%; }
/* the composer's line under a photo */
.tw-x-tagline { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; color: var(--link); font-size: 13.5px; font-weight: 600; }
.tw-x-tagline > span { display: inline-flex; align-items: center; gap: 4px; }
.tw-x-tagline .tw-xi { width: 15px; height: 15px; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-tagline { color: var(--x-blue); }
/* Edit profile: cameras over the header and the photo, the fields */
.tw-x-edit-banner { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; background-color: #cfd9de; background-image: none; }
.tw-x-cam { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: rgba(15, 20, 25, .75); color: #fff; }
.tw-x-cam .tw-xi { width: 20px; height: 20px; }
.tw-x-edit-face { position: relative; }
.tw-x-edit-face > .tw-x-cam { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tw-x-edit { padding: 6px 0 8px; }
.tw-x-edit .tw-x-field-box span { min-height: 1.4em; }
.tw-x-edit-born { padding-top: 6px; }
/* X's follow window */
.tw-x.tw-x-intent { max-width: 360px; }
.tw-x-intent-body { display: grid; justify-items: center; gap: 4px; padding: 16px 20px 20px; text-align: center; }
.tw-x-intent-body > .tw-x-logo { width: 22px; height: 22px; margin-bottom: 6px; }
.tw-x-intent-body > .tw-x-av { width: 64px; height: 64px; margin-bottom: 4px; font-size: 22px; }
.tw-x-intent-body > b { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 800; }
.tw-x-intent-body > small { color: var(--ink-3); font-size: 14px; }
.tw-x-intent-body > p { margin-top: 4px; font-size: 14.5px; }
.tw-x-intent-body > .tw-x-counts { justify-content: center; margin: 8px 0 6px; padding: 0; border: 0; }
.tw-x-intent-body > .tw-x-btn { width: 100%; height: 40px; }

/* ---- motion: what the player (apps/outside/x-play.js) switches on. Nothing moves for anyone who asks for less ---- */
[data-x-play] { position: relative; }
.tw-xfig[data-x-play] { overflow: visible; }
@keyframes tw-x-pop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 65% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes tw-x-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes tw-x-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes tw-x-up { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tw-x-away { to { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes tw-x-rise { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -70px) scale(1.15); } }
@keyframes tw-x-press { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(.72); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes tw-x-ripple { 0% { opacity: .55; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }
@keyframes tw-x-blink { 50% { opacity: 0; } }
@keyframes tw-x-grow { from { box-shadow: 0 0 0 0 var(--yellow), 0 0 0 0 #111111; } }
.tw-x-a.tw-x-pop::before { animation: tw-x-pop .45s cubic-bezier(.2, .9, .3, 1.3); }
.tw-x-a.tw-x-pop::after { content: ""; position: absolute; left: -3px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: var(--radius-full); box-shadow: 0 0 0 2px currentColor; animation: tw-x-ring .5s ease-out forwards; pointer-events: none; }
.tw-x-a[data-n].tw-x-pop::after { content: attr(data-n); animation: none; }
.tw-x-bump { display: inline-block; animation: tw-x-pop .4s ease-out; }
.tw-x-in { animation: tw-x-in .45s cubic-bezier(.2, .8, .3, 1) both; }
.tw-x-toast.tw-x-in { animation: tw-x-up .35s cubic-bezier(.2, .8, .3, 1.2) both; }
.tw-x-toast.tw-x-away { animation: tw-x-away .3s ease-in forwards; }
.tw-x-hl.tw-x-grow { animation: tw-x-grow .35s ease-out; }
.tw-x-typed.tw-x-typing::after { animation: tw-x-blink 1s steps(1) infinite; }
.tw-x-float { position: absolute; z-index: 5; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--x-like); -webkit-mask: var(--xi-liked) center / contain no-repeat; mask: var(--xi-liked) center / contain no-repeat; animation: tw-x-rise 1.3s ease-out forwards; pointer-events: none; }
.tw-x .tw-x-float, .tw-x-float { background: #111111; }
.tw-x-th-x .tw-x-float, .tw-x-th-dark .tw-x-float { background: #f91880; }
.tw-x-float.tw-x-float-y { background: var(--yellow); filter: drop-shadow(0 0 1px #111) drop-shadow(0 0 0 #111); }
.tw-x-finger { position: absolute; z-index: 7; left: 0; top: 0; width: 34px; height: 34px; border-radius: var(--radius-full); background: rgba(17, 17, 17, .22); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 3.5px rgba(17, 17, 17, .55); transform: translate(-50%, -50%); transition: left .55s cubic-bezier(.4, 0, .2, 1), top .55s cubic-bezier(.4, 0, .2, 1), opacity .25s; pointer-events: none; opacity: 0; }
.tw-x-finger.on { opacity: 1; }
.tw-x-finger.tw-x-press { animation: tw-x-press .32s ease-out; }
.tw-x-finger.tw-x-press::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border-radius: var(--radius-full); background: rgba(17, 17, 17, .3); animation: tw-x-ripple .5s ease-out forwards; }
.tw-x-replay { position: absolute; z-index: 8; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border: 0; border-radius: var(--radius-full); background: #111111; color: var(--yellow); font: 700 12.5px/1 var(--font-sans); cursor: pointer; opacity: 0; transition: opacity .2s; }
.tw-x-replay::before { content: "\21BB"; font-size: 14px; }
[data-x-play].tw-x-done .tw-x-replay, [data-x-play]:hover .tw-x-replay { opacity: 1; }
.tw-x-replay:focus-visible { opacity: 1; outline: 2px solid #111111; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .tw-x-a.tw-x-pop::before, .tw-x-a.tw-x-pop::after, .tw-x-bump, .tw-x-in, .tw-x-toast.tw-x-in, .tw-x-hl.tw-x-grow, .tw-x-typed.tw-x-typing::after { animation: none; }
    .tw-x-float, .tw-x-finger { display: none; }
}

/* ---- the icons, as masks: 24 by 24, a 2px line, round ends. Made by dev/outside/refresh/x-icons.py; edit that, not this ---- */
:root {
    --xi-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H10l-5 4V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
    --xi-repost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3l3 3-3 3'/%3E%3Cpath d='M4 11V9a3 3 0 0 1 3-3h13'/%3E%3Cpath d='M7 21l-3-3 3-3'/%3E%3Cpath d='M20 13v2a3 3 0 0 1-3 3H4'/%3E%3C/svg%3E");
    --xi-like: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E");
    --xi-liked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.6s-7.9-4.7-7.9-10.6a4.8 4.8 0 0 1 7.9-3.6 4.8 4.8 0 0 1 7.9 3.6c0 5.9-7.9 10.6-7.9 10.6z'/%3E%3C/svg%3E");
    --xi-views: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-8M9.3 20V6M14.7 20v-6M20 20V9'/%3E%3C/svg%3E");
    --xi-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h11v16l-5.5-4-5.5 4z'/%3E%3C/svg%3E");
    --xi-bookmarked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 3h13v18.2L12 16.6l-6.5 4.6z'/%3E%3C/svg%3E");
    --xi-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M5 15v4a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E");
    --xi-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='1.9'/%3E%3Ccircle cx='12' cy='12' r='1.9'/%3E%3Ccircle cx='19' cy='12' r='1.9'/%3E%3C/svg%3E");
    --xi-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11 6l-6 6 6 6'/%3E%3C/svg%3E");
    --xi-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    --xi-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
    --xi-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M7.6 12.3l3 3 5.8-6.4' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Cpath mask='url%28%23m%29' d='M12.00 1.00L14.43 2.92L17.50 2.47L18.65 5.35L21.53 6.50L21.08 9.57L23.00 12.00L21.08 14.43L21.53 17.50L18.65 18.65L17.50 21.53L14.43 21.08L12.00 23.00L9.57 21.08L6.50 21.53L5.35 18.65L2.47 17.50L2.92 14.43L1.00 12.00L2.92 9.57L2.47 6.50L5.35 5.35L6.50 2.47L9.57 2.92z'/%3E%3C/svg%3E");
    --xi-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17z'/%3E%3Cpath d='M14.5 7.5l3 3'/%3E%3C/svg%3E");
    --xi-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6l-1 6 3 3H7l3-3z'/%3E%3Cpath d='M12 16v5'/%3E%3C/svg%3E");
    --xi-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M20.5 16l-5-5-9 8.5'/%3E%3C/svg%3E");
    --xi-gif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M10.5 9.5H8.3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1.9v-2.3H9'/%3E%3Cpath d='M13 9.5v5'/%3E%3Cpath d='M17 9.5h-2v5M15 12h1.6'/%3E%3C/svg%3E");
    --xi-poll: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h9M5 12h14M5 18h6'/%3E%3C/svg%3E");
    --xi-smile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 14a4 4 0 0 0 7 0'/%3E%3Cpath d='M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
    --xi-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
    --xi-place: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
    --xi-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
    --xi-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
    --xi-follow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M2.5 21c.8-4.2 3.8-6.6 7.5-6.6 1.6 0 3 .4 4.2 1.2'/%3E%3Cpath d='M19 14v6M16 17h6'/%3E%3C/svg%3E");
    --xi-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c.8-4.2 4-6.6 8-6.6s7.2 2.4 8 6.6'/%3E%3C/svg%3E");
    --xi-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
    --xi-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
    --xi-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5L12 4l8 6.5V20h-5.5v-6h-5v6H4z'/%3E%3C/svg%3E");
    --xi-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5L12 13l8.5-6.5'/%3E%3C/svg%3E");
    --xi-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M5 15l4.5-5 3.5 3 6-7'/%3E%3C/svg%3E");
    --xi-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    --xi-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E");
    --xi-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3C/svg%3E");
    --xi-mute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h4l5-4v13l-5-4H4z'/%3E%3Cpath d='M17 9.5l4 5M21 9.5l-4 5'/%3E%3C/svg%3E");
    --xi-block: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
    --xi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h12l-2 4 2 4H5'/%3E%3C/svg%3E");
    --xi-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
    --xi-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M16 7l3 3'/%3E%3C/svg%3E");
    --xi-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E");
    --xi-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E");
    --xi-ad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4h3l7 5V5L6 10z'/%3E%3Cpath d='M17 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E");
    --xi-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10 14'/%3E%3Cpath d='M21 3l-7 18-4-7-7-4z'/%3E%3C/svg%3E");
    --xi-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --xi-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.5h.01'/%3E%3C/svg%3E");
    --xi-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E");
    --xi-hash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h15M4 15h15M10 4L8 20M16 4l-2 16'/%3E%3C/svg%3E");
    --xi-at: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M15.5 12v1.5a2.5 2.5 0 0 0 5 0V12a8.5 8.5 0 1 0-3.5 6.9'/%3E%3C/svg%3E");
    --xi-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
    --xi-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --xi-plus-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
    --xi-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17'/%3E%3Cpath d='M12 3.5c2.5 2.6 3.6 5.4 3.6 8.5S14.5 17.9 12 20.5C9.5 17.9 8.4 15.1 8.4 12S9.5 6.1 12 3.5z'/%3E%3C/svg%3E");
    --xi-frown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 16a4 4 0 0 1 7 0'/%3E%3Cpath d='M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
    --xi-user-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M2.5 21c.8-4.2 3.8-6.6 7.5-6.6 1.6 0 3 .4 4.2 1.2'/%3E%3Cpath d='M17 14.5l4 4M21 14.5l-4 4'/%3E%3C/svg%3E");
    --xi-thread: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Cpath d='M6 8.5v7'/%3E%3Cpath d='M11 6h9M11 18h9'/%3E%3C/svg%3E");
    --xi-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5a2.1 2.1 0 0 0-3-3L5 17z'/%3E%3C/svg%3E");
    --xi-grok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Cpath d='M16.5 7.5l-9 9'/%3E%3Cpath d='M9 7.5h-1.5v1.5M16.5 15v1.5H15'/%3E%3C/svg%3E");
    --xi-xlogo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.2 3h5.3l12.3 18h-5.3z'/%3E%3Cpath d='M19.6 3h-2.1l-5.8 6.6 1.1 1.6zM4.3 21h2.1l5.9-6.8-1.1-1.6z'/%3E%3C/svg%3E");
    --xi-compose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --xi-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0'/%3E%3Cpath d='M12 17.5V21'/%3E%3C/svg%3E");
    --xi-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.2-5.8 6.5-5.8s5.9 2.2 6.5 5.8'/%3E%3Cpath d='M15.5 4.8a3.5 3.5 0 0 1 0 6.4'/%3E%3Cpath d='M17.5 14.6c2.2.7 3.6 2.6 4 5.4'/%3E%3C/svg%3E");
    --xi-notes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E");
    --xi-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --xi-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.5 6 .8-4.4 4.1 1.1 5.9L12 17l-5.3 2.8 1.1-5.9-4.4-4.1 6-.8z'/%3E%3C/svg%3E");
    --xi-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E");
    --xi-user-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M2.5 21c.8-4.2 3.8-6.6 7.5-6.6 1.6 0 3 .4 4.2 1.2'/%3E%3Cpath d='M16 17h6'/%3E%3C/svg%3E");
    --xi-translate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6h9M8 4v2M5.5 6c.7 3.4 3 6.2 6 7.5'/%3E%3Cpath d='M10.5 6c-.7 3.4-3 6.2-6 7.5'/%3E%3Cpath d='M12.5 20l4-9 4 9M14 17h5'/%3E%3C/svg%3E");
    --xi-qr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Cpath d='M14 14h2v2M20 14v2M14 20h6M18 17v1'/%3E%3C/svg%3E");
    --xi-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-2.5h6L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
    --xi-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 13.5h6L10 21l8-10.5h-6z'/%3E%3C/svg%3E");
    --xi-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a7.5 7.5 0 0 1-11 6.6L4 20l1.5-4.6A7.5 7.5 0 1 1 20 11.5z'/%3E%3C/svg%3E");
    --xi-bookmark-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7V5.5a1 1 0 0 1 1-1h5l2 2h8a1 1 0 0 1 1 1V18a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1z'/%3E%3Cpath d='M10 10h5v6l-2.5-1.8L10 16z'/%3E%3C/svg%3E");
    --xi-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='17' height='12.5' rx='2'/%3E%3Cpath d='M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3.5 12.5h17'/%3E%3C/svg%3E");
    --xi-unlock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.7-1.5'/%3E%3C/svg%3E");
    --xi-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6a10 10 0 0 1 1.4-.1c6 0 9.5 6.1 9.5 6.1a17 17 0 0 1-3 3.6M6.6 6.9C4 8.6 2.5 12 2.5 12S6 18.5 12 18.5a9.6 9.6 0 0 0 4.4-1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
    --xi-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 7L3.5 12l5 5M15.5 7l5 5-5 5'/%3E%3C/svg%3E");
    --xi-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
    --xi-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c.6 4.4 2.3 6.4 7.5 7.5-5.2 1.1-6.9 3.1-7.5 7.5-.6-4.4-2.3-6.4-7.5-7.5 5.2-1.1 6.9-3.1 7.5-7.5z'/%3E%3C/svg%3E");
    --xi-reply-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H10l-5 4V6a1 1 0 0 1 1-1z'/%3E%3Cpath d='M4 3l16 18'/%3E%3C/svg%3E");
    --xi-window: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");
}
.tw-xi-reply { --i: var(--xi-reply); }
.tw-xi-repost { --i: var(--xi-repost); }
.tw-xi-like { --i: var(--xi-like); }
.tw-xi-liked { --i: var(--xi-liked); }
.tw-xi-views { --i: var(--xi-views); }
.tw-xi-bookmark { --i: var(--xi-bookmark); }
.tw-xi-bookmarked { --i: var(--xi-bookmarked); }
.tw-xi-share { --i: var(--xi-share); }
.tw-xi-more { --i: var(--xi-more); }
.tw-xi-back { --i: var(--xi-back); }
.tw-xi-close { --i: var(--xi-close); }
.tw-xi-search { --i: var(--xi-search); }
.tw-xi-badge { --i: var(--xi-badge); }
.tw-xi-quote { --i: var(--xi-quote); }
.tw-xi-pin { --i: var(--xi-pin); }
.tw-xi-image { --i: var(--xi-image); }
.tw-xi-gif { --i: var(--xi-gif); }
.tw-xi-poll { --i: var(--xi-poll); }
.tw-xi-smile { --i: var(--xi-smile); }
.tw-xi-clock { --i: var(--xi-clock); }
.tw-xi-place { --i: var(--xi-place); }
.tw-xi-link { --i: var(--xi-link); }
.tw-xi-calendar { --i: var(--xi-calendar); }
.tw-xi-follow { --i: var(--xi-follow); }
.tw-xi-user { --i: var(--xi-user); }
.tw-xi-bell { --i: var(--xi-bell); }
.tw-xi-lock { --i: var(--xi-lock); }
.tw-xi-home { --i: var(--xi-home); }
.tw-xi-mail { --i: var(--xi-mail); }
.tw-xi-chart { --i: var(--xi-chart); }
.tw-xi-chev { --i: var(--xi-chev); }
.tw-xi-settings { --i: var(--xi-settings); }
.tw-xi-trash { --i: var(--xi-trash); }
.tw-xi-mute { --i: var(--xi-mute); }
.tw-xi-block { --i: var(--xi-block); }
.tw-xi-flag { --i: var(--xi-flag); }
.tw-xi-shield { --i: var(--xi-shield); }
.tw-xi-key { --i: var(--xi-key); }
.tw-xi-phone { --i: var(--xi-phone); }
.tw-xi-list { --i: var(--xi-list); }
.tw-xi-ad { --i: var(--xi-ad); }
.tw-xi-send { --i: var(--xi-send); }
.tw-xi-eye { --i: var(--xi-eye); }
.tw-xi-info { --i: var(--xi-info); }
.tw-xi-warn { --i: var(--xi-warn); }
.tw-xi-hash { --i: var(--xi-hash); }
.tw-xi-at { --i: var(--xi-at); }
.tw-xi-download { --i: var(--xi-download); }
.tw-xi-plus { --i: var(--xi-plus); }
.tw-xi-plus-circle { --i: var(--xi-plus-circle); }
.tw-xi-globe { --i: var(--xi-globe); }
.tw-xi-frown { --i: var(--xi-frown); }
.tw-xi-user-x { --i: var(--xi-user-x); }
.tw-xi-thread { --i: var(--xi-thread); }
.tw-xi-edit { --i: var(--xi-edit); }
.tw-xi-grok { --i: var(--xi-grok); }
.tw-xi-xlogo { --i: var(--xi-xlogo); }
.tw-xi-compose { --i: var(--xi-compose); }
.tw-xi-mic { --i: var(--xi-mic); }
.tw-xi-people { --i: var(--xi-people); }
.tw-xi-notes { --i: var(--xi-notes); }
.tw-xi-tick { --i: var(--xi-tick); }
.tw-xi-star { --i: var(--xi-star); }
.tw-xi-play { --i: var(--xi-play); }
.tw-xi-user-minus { --i: var(--xi-user-minus); }
.tw-xi-translate { --i: var(--xi-translate); }
.tw-xi-qr { --i: var(--xi-qr); }
.tw-xi-camera { --i: var(--xi-camera); }
.tw-xi-bolt { --i: var(--xi-bolt); }
.tw-xi-chat { --i: var(--xi-chat); }
.tw-xi-bookmark-folder { --i: var(--xi-bookmark-folder); }
.tw-xi-briefcase { --i: var(--xi-briefcase); }
.tw-xi-unlock { --i: var(--xi-unlock); }
.tw-xi-eye-off { --i: var(--xi-eye-off); }
.tw-xi-code { --i: var(--xi-code); }
.tw-xi-arrow-up { --i: var(--xi-arrow-up); }
.tw-xi-sparkle { --i: var(--xi-sparkle); }
.tw-xi-reply-off { --i: var(--xi-reply-off); }
.tw-xi-window { --i: var(--xi-window); }