/* /help (templates/help*.html), after the owner's chosen round 18 of the help mockups (2026-10-26): a page per
   chapter, the chapters in a sidebar on the grid's first column, the one you are on open to its sections, and the
   article from the grid's second line to its last, its words on one reading measure. It sits on home.css and
   bar.css, so the bar, the grid, the brackets, the buttons and the light are the home page's own; sizes are in
   --u, one pixel of the 1344-wide mockup. */

@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-400.woff2?v=db71f8a28ad85015") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-500.woff2?v=5ef914e59b0047a2") format("woff2"); font-weight: 500 600; font-display: swap; }

/* Payload's diagonal hairlines at half the strength of --scan, as a layer of a container's own background, so they
   never sit over what is inside it. */
:root { --scan-half: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Cpath d='M4 0h1v1H4zM3 1h1v1H3zM2 2h1v1H2zM1 3h1v1H1zM0 4h1v1H0z' fill='%23fff' fill-opacity='.035'/%3E%3C/svg%3E");
  --pane: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)); }

.hp main, .hp section { position: relative; }
/* The sidebar from the grid's first line to its second, the article from the second to the last. */
.docs { padding-top: calc(118 * var(--u)); padding-bottom: calc(120 * var(--u)); }
.docs__in { display: grid; grid-template-columns: calc(307 * var(--u)) calc(921 * var(--u)); padding-left: calc(58 * var(--u)); align-items: start; }
/* The grid without the two lines that would run through the article (the owner's rule, 2026-10-24: no grid line
   crosses the words): the sidebar's two, and the page's last. */
.docs > .lines::after { background-image: var(--g), var(--t), var(--t), var(--t);
  background-position: calc(1286 * var(--u)) 0, calc(1286 * var(--u) - 5px) 0, calc(1286 * var(--u)) 0, calc(1286 * var(--u)) 100%; background-size: 1px 100%, 11px 1px, 1px 6px, 1px 6px; }

/* ------------------------------------------------------------------ the sidebar */
.side { position: sticky; top: calc(108 * var(--u)); max-height: calc(100vh - 130 * var(--u)); overflow: auto; padding: calc(20 * var(--u)) calc(28 * var(--u)) calc(40 * var(--u)) 0; scrollbar-width: none; }
.side::-webkit-scrollbar { display: none; }
.side__search { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(12 * var(--u)); margin-bottom: calc(26 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.11); border-radius: calc(10 * var(--u)); background: rgba(10, 10, 12, 0.55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.side__search svg { flex: none; width: calc(15 * var(--u)); height: calc(15 * var(--u)); fill: none; stroke: #8E9298; stroke-width: 1.6; }
.side__search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: 450 calc(14 * var(--u))/1 var(--sans); }
.side__search input::placeholder { color: #7D8188; }
.side__search input::-webkit-search-cancel-button { display: none; }
.side__search kbd { margin-left: auto; padding: 3px 5px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 4px; font: 400 calc(11 * var(--u))/1 var(--mono); color: #7D8188; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side a { position: relative; display: block; text-decoration: none; transition: color 160ms var(--ease); }
/* Help home: the title over the chapters, in the sans and not between their rules (the owner, 2026-10-26). */
.side .side__home { margin-bottom: calc(10 * var(--u)); padding: calc(10 * var(--u)) 0; font: 550 calc(16 * var(--u))/1.3 var(--sans); letter-spacing: -0.01em; color: #D7D9DD; }
.side__home:hover, .side__home[aria-current="page"] { color: #fff; }
.side__group { border-top: 1px solid rgba(255, 255, 255, 0.07); }
.side__group:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
/* A chapter is one link, its name and its arrow, so the hover outline takes in the whole row (the owner,
   2026-10-26). The arrow opens or closes its sections here instead of following the link (help.js). */
.side .side__head { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)) 0; font: 400 calc(11.5 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #B9BCC2; }
.side .side__head:hover { color: #fff; }
.side__head b { font-weight: 400; color: var(--tally-hi); }
.side__arrow { margin-left: auto; display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(12 * var(--u)); cursor: pointer; }
.side__arrow i { width: 7px; height: 7px; border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; opacity: 0.6; transform: rotate(45deg) translateY(-2px); transition: transform 200ms var(--ease); }
.side__group.is-open .side__arrow i, .side__group.is-searching .side__arrow i { transform: rotate(225deg) translate(-2px, 0); }
.side__group ul { display: none; padding-bottom: calc(10 * var(--u)); }
.side__group.is-open ul, .side__group.is-searching ul { display: block; }
.side__group li a { padding: calc(6 * var(--u)) 0 calc(6 * var(--u)) calc(14 * var(--u)); font: 450 calc(14.5 * var(--u))/1.35 var(--sans); color: #A4A8AF; }
.side__group li a:hover { color: #fff; }
/* Where you are: the help home, or the section being read, white, with the tally's mark on the grid's first line. */
.side__group li a.is-on { color: #fff; font-weight: 550; }
.side__home[aria-current="page"]::before, .side__group li a.is-on::before { content: ""; position: absolute; left: calc(-58 * var(--u) - 1px); top: calc(50% - 9 * var(--u)); width: 3px; height: calc(18 * var(--u));
  background: var(--tally); box-shadow: 0 0 10px rgba(250, 76, 51, 0.7); }
.side__none { font: 400 calc(13 * var(--u))/1.5 var(--sans); color: var(--muted); }

/* ------------------------------------------------------------------ the article */
.art { grid-column: 2; min-width: 0; padding-top: calc(20 * var(--u)); color: #C9CCD1; font: 450 calc(16.5 * var(--u))/1.68 var(--sans); }
/* One measure for a chapter: words, steps, drawings, tables, the film and the rules between sections, so nothing
   runs wider than the rest. The help home keeps the full width for its cards. */
.hp:not(.hp--home) .art > *, .hp:not(.hp--home) .art [data-tabs] > * { max-width: calc(680 * var(--u)); }
.art__crumb { margin: 0; font: 400 calc(12 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
/* Above .art b, which would make the number white. */
.art .art__crumb b { font-weight: 400; color: var(--tally-hi); }
.art h1 { margin: calc(18 * var(--u)) 0 0; font: 600 calc(44 * var(--u))/1.06 var(--sans); letter-spacing: -0.032em; color: #F3F3F3; }
.art__lead { margin: calc(16 * var(--u)) 0 0; font: 450 calc(19 * var(--u))/1.55 var(--sans); color: #B9BCC2; }
.art h2 { margin: calc(56 * var(--u)) 0 0; padding-top: calc(28 * var(--u)); border-top: 1px solid rgba(255, 255, 255, 0.08); font: 600 calc(26 * var(--u))/1.2 var(--sans); letter-spacing: -0.02em; color: #fff; scroll-margin-top: calc(110 * var(--u)); }
.art h3 { margin: calc(30 * var(--u)) 0 0; font: 600 calc(18 * var(--u))/1.3 var(--sans); color: #fff; scroll-margin-top: calc(110 * var(--u)); }
.art p { margin: calc(14 * var(--u)) 0 0; }
.art ul, .art ol { margin: calc(12 * var(--u)) 0 0; padding-left: 1.2em; }
.art li + li { margin-top: calc(6 * var(--u)); }
.art li::marker { color: #6E727A; }
/* A plain list is a set of separate answers, each opening in bold. The base reset took its bullets away and the
   answers ran together like one paragraph (the owner, 2026-10-31), so each gets a square tally mark, the site's own, and room above it. */
.art ul:not([class]) { list-style: none; padding-left: 0; }
.art ul:not([class]) > li { position: relative; padding-left: calc(24 * var(--u)); }
.art ul:not([class]) > li + li { margin-top: calc(14 * var(--u)); }
.art ul:not([class]) > li::before { content: ""; position: absolute; left: calc(3 * var(--u)); top: calc(0.84em - 3px); width: 6px; height: 6px; background: var(--tally); }
.art b { font-weight: 600; color: #fff; }
.art a { color: #E7E9EC; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.art a:hover { text-decoration-color: var(--tally); }
/* No link in running text breaks across lines: the hover magnet (mesh.js) draws one box round a link, and a link
   on two lines got a box across both (the owner, 2026-10-26). */
.art p a, .art li a, .art td a { white-space: nowrap; }
.art code { padding: 2px 5px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); font: 400 0.86em/1 var(--mono); color: #E7E9EC; }
/* What a reader clicks or reads on a screen of ours or the app's: the name as it is there, and a path through menus. */
.ui { font-weight: 600; color: #fff; }
.path { font-weight: 550; color: #fff; }
.path i { margin: 0 0.25em; font-style: normal; color: #6E727A; }

/* Numbered steps on a rule, after Clerk's quickstart: the number in a small viewfinder, the line down to the next. */
.art .steps { list-style: none; margin: calc(24 * var(--u)) 0 0; padding: 0; counter-reset: s; }
.steps > li { position: relative; padding: 0 0 calc(30 * var(--u)) calc(52 * var(--u)); counter-increment: s; }
.art .steps > li + li { margin-top: 0; }
.steps > li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: calc(30 * var(--u)); height: calc(30 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(10, 10, 12, 0.7); font: 500 calc(12 * var(--u))/1 var(--mono); color: var(--tally-hi); }
.steps > li::after { content: ""; position: absolute; left: calc(15 * var(--u)); top: calc(38 * var(--u)); bottom: calc(8 * var(--u)); width: 1px; background: rgba(255, 255, 255, 0.1); }
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps__t { display: block; padding-top: calc(3 * var(--u)); font: 600 calc(17.5 * var(--u))/1.4 var(--sans); color: #fff; }
.steps > li > p:first-of-type { margin-top: calc(6 * var(--u)); }

/* Callouts: a pane with the corners, its kind in the tally's mono. */
.call { position: relative; margin: calc(24 * var(--u)) 0 0; padding: calc(16 * var(--u)) calc(20 * var(--u)) calc(18 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--scan-half), var(--pane), rgba(10, 10, 12, 0.55); font-size: calc(15.5 * var(--u)); }
.call__k { display: block; font: 500 calc(11.5 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tally-hi); }
.call--note .call__k { color: #9FA3AA; }
.art .call p { margin-top: calc(8 * var(--u)); }
.art .call p:first-of-type { margin-top: calc(10 * var(--u)); }

/* The site's pill switch (/download's), for Premiere Pro or After Effects, Mac or Windows, iPhone or Android. */
.seg { display: inline-flex; margin-top: calc(22 * var(--u)); padding: calc(4 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; background: rgba(10, 10, 12, 0.55);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); }
.seg button { height: calc(34 * var(--u)); padding: 0 calc(16 * var(--u)); border: 0; border-radius: 999px; background: none; color: #8E9298; font: 500 calc(13.5 * var(--u))/1 var(--sans); cursor: pointer;
  transition: background-color 240ms var(--ease), color 240ms var(--ease); }
.seg button:hover { color: #E7E9EC; }
.seg button[aria-pressed="true"] { color: #fff; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.16); }
[data-tabs] [data-tab]:not(.is-on) { display: none; }

/* Pictures: what the screen shows, drawn, in a pane with the corners, the caption its footer. */
.fig { position: relative; display: grid; place-items: center; margin: calc(20 * var(--u)) 0 0; padding: calc(28 * var(--u)) calc(28 * var(--u)) 0; border: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--scan-half), radial-gradient(70% 90% at 50% 120%, rgba(250, 76, 51, 0.14), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)), rgba(8, 8, 10, 0.6); }
.fig figcaption { justify-self: stretch; margin: calc(26 * var(--u)) calc(-28 * var(--u)) 0; padding: calc(13 * var(--u)) calc(20 * var(--u)); border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28); font: 450 calc(13.5 * var(--u))/1.45 var(--sans); color: #9A9EA5; }
.figs { display: flex; flex-wrap: nowrap; gap: calc(22 * var(--u)); align-items: center; justify-content: center; }
.figs .d-pn { width: 290px; }
.figs .d-phone { flex: none; }

/* Tables: hairline rows, the heads in mono. */
.tbl { width: 100%; margin: calc(20 * var(--u)) 0 0; border-collapse: collapse; font-size: calc(14.5 * var(--u)); line-height: 1.45; }
.tbl th { padding: 0 calc(12 * var(--u)) calc(10 * var(--u)) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); text-align: left; font: 400 calc(11 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tbl td { padding: calc(11 * var(--u)) calc(12 * var(--u)) calc(11 * var(--u)) 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); vertical-align: top; }
.tbl td:first-child { font-weight: 550; color: #fff; white-space: nowrap; }
.tbl td:first-child a { color: #fff; text-decoration: none; }
.tbl td:first-child a:hover { text-decoration: underline; text-decoration-color: var(--tally); }
.chip { display: inline-block; margin-left: 6px; padding: 2px 5px; border: 1px solid rgba(250, 76, 51, 0.5); font: 500 9.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tally-hi); vertical-align: 2px; }

/* A connection type: its heading with the panel's own glyph, then a note in mono. */
.conn-h { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.conn-h svg { flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: #C6C9CE; stroke-linejoin: round; stroke-linecap: round; }
.art .meta { margin-top: calc(10 * var(--u)); font: 400 calc(12 * var(--u))/1.6 var(--mono); color: var(--muted); }
.meta b { font-weight: 400; color: #C9CCD1; }

/* The chapter's film under its title: a still, the play button, and what it shows. */
.vid { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: #000; }
.art .vid { text-decoration: none; }
.vid img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; transition: transform 600ms var(--ease), opacity 300ms var(--ease); }
.vid:hover img { transform: scale(1.02); opacity: 1; }
.vid::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.8)); }
.vid__play { position: absolute; z-index: 2; left: 50%; top: 50%; display: grid; place-items: center; width: calc(68 * var(--u)); height: calc(68 * var(--u)); margin: calc(-34 * var(--u)) 0 0 calc(-34 * var(--u)); border-radius: 50%;
  background: rgba(250, 76, 51, 0.92); box-shadow: 0 0 0 8px rgba(250, 76, 51, 0.18), 0 10px 40px rgba(250, 76, 51, 0.45); transition: transform 220ms var(--ease); }
.vid:hover .vid__play { transform: scale(1.06); }
.vid__play svg { width: 38%; height: 38%; margin-left: 6%; fill: #fff; }
.vid__cap { position: absolute; z-index: 2; left: calc(20 * var(--u)); right: calc(20 * var(--u)); bottom: calc(16 * var(--u)); }
.vid__cap b { display: block; font: 600 calc(18 * var(--u))/1.3 var(--sans); color: #fff; }
.vid__cap span { font: 400 calc(11.5 * var(--u))/1.6 var(--mono); letter-spacing: 0.06em; color: #C9CCD1; }
.art > .vid { margin-top: calc(30 * var(--u)); }

/* The end of a page: a person to write to, then Previous bottom-left and Next bottom-right across the article's
   whole width (the owner, 2026-10-26). */
.art .stuck { margin-top: calc(22 * var(--u)); font: 400 calc(12.5 * var(--u))/1.6 var(--mono); color: var(--muted); }
.art .stuck a { color: #E7E9EC; }
.hp .art > .pn { display: flex; justify-content: space-between; gap: calc(16 * var(--u)); max-width: none; margin-top: calc(56 * var(--u)); }
.pn a { position: relative; display: block; width: calc(300 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--scan-half), var(--pane), rgba(10, 10, 12, 0.55); text-decoration: none; transition: border-color 200ms var(--ease); }
.pn a:hover { border-color: rgba(255, 255, 255, 0.24); }
.pn small { display: block; font: 400 calc(11 * var(--u))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.pn span { display: block; margin-top: calc(8 * var(--u)); font: 550 calc(16 * var(--u))/1.3 var(--sans); color: #fff; }
.pn .pn__next { margin-left: auto; text-align: right; }

/* ------------------------------------------------------------------ the help home */
.hp--home .art h1 { font-size: calc(52 * var(--u)); }
.hp--home .art__lead { max-width: calc(614 * var(--u)); }
/* Intercom's cards, three side by side: an icon, a title, a line, and what is behind it. */
.ov-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(12 * var(--u)); margin-top: calc(22 * var(--u)); }
.ic { position: relative; display: grid; align-content: start; padding: calc(22 * var(--u)) calc(24 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--scan-half), var(--pane), rgba(10, 10, 12, 0.55); transition: border-color 220ms var(--ease); }
.art .ic { text-decoration: none; }
.ic:hover { border-color: rgba(255, 255, 255, 0.24); }
.ic::after { opacity: 0.6; }
.ic__icon { display: grid; place-items: center; width: calc(54 * var(--u)); height: calc(54 * var(--u)); margin-bottom: calc(18 * var(--u)); border-radius: calc(14 * var(--u));
  background: radial-gradient(80% 80% at 30% 20%, rgba(250, 76, 51, 0.35), rgba(250, 76, 51, 0.06)); box-shadow: inset 0 0 0 1px rgba(250, 76, 51, 0.35); color: #FFB3A6; }
.ic__icon svg { width: 46%; height: 46%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ic__t { font: 600 calc(19 * var(--u))/1.3 var(--sans); color: #fff; }
.ic__p { margin-top: calc(4 * var(--u)); font: 450 calc(15 * var(--u))/1.55 var(--sans); color: #A9ADB4; }
.ic__m { margin-top: calc(10 * var(--u)); font: 400 calc(11.5 * var(--u))/1 var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.ic:hover .ic__t::after { content: " →"; color: var(--tally-hi); }
/* The tutorial, with the shorter films listed beside it, as Codecademy lists its lessons. */
.ov-vid { display: grid; grid-template-columns: calc(602 * var(--u)) 1fr; gap: calc(24 * var(--u)); align-items: start; margin-top: calc(22 * var(--u)); }
.art .vlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.art .vlist li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.art .vlist a { position: relative; display: block; padding: calc(14 * var(--u)) 0 calc(14 * var(--u)) calc(40 * var(--u)); text-decoration: none; white-space: normal; }
.vlist a::before { content: ""; position: absolute; left: 0; top: calc(17 * var(--u)); width: calc(26 * var(--u)); height: calc(26 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 50%;
  background: no-repeat center / 40% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 3.4 12.6 8 5 12.6Z' fill='%23fff'/%3E%3C/svg%3E");
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease); }
.vlist a:hover::before { background-color: var(--tally); border-color: var(--tally); }
.vlist b { display: block; font: 550 calc(15.5 * var(--u))/1.35 var(--sans); color: #fff; }
.vlist span { display: block; margin-top: calc(3 * var(--u)); font: 400 calc(11.5 * var(--u))/1.4 var(--mono); color: var(--muted); }
/* Teachable's cards: two ways to reach a person. */
.ov-two { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); margin-top: calc(22 * var(--u)); }
.tc { position: relative; display: flex; flex-wrap: wrap; align-items: center; column-gap: calc(16 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid rgba(255, 255, 255, 0.09);
  background: var(--scan-half), var(--pane), rgba(10, 10, 12, 0.55); }
.tc .ic__icon { width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin: 0; border-radius: calc(12 * var(--u)); }
.tc b { font: 600 calc(19 * var(--u))/1.3 var(--sans); }
.art .tc p { flex-basis: 100%; margin-top: calc(14 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.55; color: #A9ADB4; }
.tc .button { margin-top: calc(18 * var(--u)); height: calc(42 * var(--u)); font-size: calc(14.5 * var(--u)); }
.art .tc .button { text-decoration: none; }

/* Where the light draws a container's dark (data-veil, mesh.js), the container keeps its sheen and hairlines and
   drops its own dark, as /download's pane does, so the specks a hover gathers round a button inside it shine over
   it at full strength. */
.has-veils .ic, .has-veils .tc, .has-veils .pn a, .has-veils .call { background: var(--scan-half), var(--pane); }
.has-veils .fig { background: var(--scan-half), radial-gradient(70% 90% at 50% 120%, rgba(250, 76, 51, 0.14), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)); }

/* ------------------------------------------------------------------ drawn screens */
/* Schematics, not screenshots, as the panel's own guides are: one set serves every version and both platforms. They
   wear the brand's tally where the apps draw their system blue (the owner, 2026-10-26). */

/* The Window menu as Premiere draws it on a Mac: the menu, Extensions open, its submenu level with it. */
.d-mac { font: 450 13px/1 -apple-system, BlinkMacSystemFont, "IBM Plex Sans", sans-serif; color: #EDEDEF; }
.d-mac__bar { display: flex; gap: 20px; margin-bottom: 6px; padding: 7px 14px; border-radius: 6px; background: rgba(255, 255, 255, 0.06); }
.d-mac__bar span.is-on { margin: -3px -8px; padding: 3px 8px; border-radius: 5px; background: rgba(255, 255, 255, 0.18); }
.d-mac__menus { display: flex; align-items: flex-start; }
.d-mac__list { width: 230px; padding: 5px; border-radius: 10px; background: rgba(42, 42, 46, 0.97); box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.24), 0 18px 40px rgba(0, 0, 0, 0.6); }
.d-mac__list div { display: flex; align-items: center; justify-content: space-between; height: 24px; padding: 0 10px; border-radius: 5px; }
.d-mac__list div.is-dim { color: #75777D; }
.d-mac__list div.is-on { background: var(--tally); color: #fff; }
.d-mac__list hr { height: 1px; margin: 5px 10px; border: 0; background: rgba(255, 255, 255, 0.12); }
.d-mac__list em { display: block; width: 64%; height: 7px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); }
.d-mac__sub { width: 170px; margin: 68px 0 0 -6px; }
.d-mac__sub--settings { margin-top: 34px; }
.d-mac--settings[data-os-fig="win"] .d-mac__sub--settings { margin-top: 152px; }
.d-mac--settings .d-mac__bar b { font-weight: 700; }

/* A drawing whose parts are numbered (data-n), each number a tally badge on its part's corner, and the numbered
list under it its legend, the same badges in the same order (the owner, 2026-10-27: the list named parts the drawing
did not show, and nothing said which was which). */
.d-anno [data-n] { position: relative; }
.d-anno [data-n]::before { content: attr(data-n); position: absolute; z-index: 2; left: -23px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; border-radius: 50%; background: var(--tally);
  box-shadow: 0 0 0 2px #0F1013, 0 0 10px rgba(250, 76, 51, 0.6); text-align: center; font: 600 9.5px/17px var(--mono); letter-spacing: 0; text-transform: none; color: #fff; }
/* Each number sits in the margin beside its part and never over it: to the left as a rule, to the right for a part
   on the right edge (data-at="r"), and above for the header's icons (the owner, 2026-10-27). */
.d-anno [data-n][data-at="r"]::before { left: auto; right: -23px; }
.d-anno .d-pn__top [data-n]::before { left: 50%; top: -15px; margin-left: -8.5px; }
.art .legend { list-style: none; margin: calc(20 * var(--u)) 0 0; padding: 0; counter-reset: l; }
/* A legend continued after a figure keeps counting (an ol's start, which a counter does not read by itself). */
.art .legend[start="4"] { counter-reset: l 3; }
.art .legend li { position: relative; padding-left: calc(34 * var(--u)); counter-increment: l; }
.art .legend li + li { margin-top: calc(10 * var(--u)); }
.legend li::before { content: counter(l); position: absolute; left: 0; top: calc(4 * var(--u)); width: calc(20 * var(--u)); height: calc(20 * var(--u)); border-radius: 50%; background: var(--tally);
  text-align: center; font: 600 calc(11 * var(--u))/calc(20 * var(--u)) var(--mono); color: #fff; }

/* Premiere Pro's and After Effects' settings, after the panel's guides (panel/cep/index.html, guide__shot). */
.d-pref { width: 470px; padding: 16px; border-radius: 8px; background: #232323; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 50px rgba(0, 0, 0, 0.6); font: 400 11.5px/1.3 -apple-system, "IBM Plex Sans", sans-serif; color: #D6D6D6; }
.d-pref__t { margin-bottom: 12px; font-size: 13px; font-weight: 600; color: #fff; }
.d-pref__sub { margin: 10px 0 4px; font-size: 10.5px; color: #A8A8A8; }
.d-pref i { display: inline-block; width: 12px; height: 12px; border: 1px solid #6B6B6B; border-radius: 3px; background: #1A1A1A; vertical-align: -2px; }
.d-pref i.is-on { border-color: var(--tally); background: var(--tally) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6.2 5 8.2 9 4' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); }
.d-pref__row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.d-pref__tbl { margin: 10px 0; border: 1px solid #3A3A3A; border-radius: 4px; }
.d-pref__h, .d-pref__r { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; align-items: center; padding: 6px 10px; }
.d-pref__h span:not(:first-child), .d-pref__r span:not(:first-child) { text-align: center; }
.d-pref__h { background: #2C2C2C; font-size: 10px; color: #A8A8A8; }
.d-pref__r + .d-pref__r { border-top: 1px solid #333; }
.d-pref__r.is-lit { border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(250, 76, 51, 0.75); color: #fff; }
.d-pref__r b { font-weight: 600; color: #fff; }
.d-pref__r em { display: block; width: 70%; height: 7px; border-radius: 3px; background: #3A3A3A; }
.d-pref__r--ae { grid-template-columns: 1fr 1fr; }
.d-pref__r--ae span:last-child { display: flex; align-items: center; gap: 7px; text-align: left; }

/* The Tethery panel, as it draws itself (the owner's screenshot, 2026-10-26): a header, then cards. */
.d-pn { width: 300px; padding: 14px; border-radius: 10px; background: #0F1013; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 50px rgba(0, 0, 0, 0.6); font: 400 11px/1.3 "IBM Plex Sans", var(--sans); color: #C8CACE; }
.d-pn__top { display: flex; align-items: center; gap: 10px; }
.d-pn__top img { width: 66px; margin-right: auto; }
.d-pn__top b { margin-right: auto; font-size: 12px; font-weight: 600; color: #fff; }
.d-pn__back { width: 10px; height: 10px; fill: none; stroke: #9A9DA3; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.d-pn__ic { display: grid; place-items: center; width: 15px; height: 15px; border: 1.3px solid #9A9DA3; border-radius: 50%; font-size: 9px; font-weight: 600; color: #9A9DA3; }
.d-pn__k { width: 17px; height: 17px; fill: none; stroke: #9A9DA3; stroke-width: 1.4; stroke-linecap: round; }
.d-pn__pill { margin-left: 8px; padding: 4px 9px; border: 1px solid #45474D; border-radius: 99px; font: 500 9px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #C8CACE; }
.d-pn__pill.is-wait { border-color: #E8B436; color: #E8B436; }
.d-pn__card { margin-top: 12px; padding: 12px; border: 1px solid #2B2D32; border-radius: 9px; background: #17181C; }
.d-pn__lab { display: flex; align-items: center; gap: 7px; font: 500 9px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #9A9DA3; }
.d-pn__lab u { margin-left: auto; font: 400 8.5px/1 "IBM Plex Sans", var(--sans); letter-spacing: 0; text-transform: none; color: #9A9DA3; text-decoration-color: #55585E; text-underline-offset: 2px; }
.d-pn__ref { width: 13px; height: 13px; border: 1px solid #3A3C42; border-radius: 50%; }
.d-pn__sel { display: flex; align-items: center; gap: 7px; margin-top: 9px; padding: 8px 10px; border: 1px solid #2B2D32; border-radius: 6px; background: #0F1013; }
.d-pn__sel i { width: 7px; height: 7px; border-radius: 50%; background: #5ED07E; }
.d-pn__sel svg { width: 12px; height: 12px; fill: none; stroke: #C8CACE; stroke-linecap: round; }
.d-pn__sel b { font-weight: 500; color: #fff; }
.d-pn__sel span { color: #9A9DA3; }
.d-pn__v { margin-left: auto; width: 10px; height: 10px; fill: none; stroke: #9A9DA3; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.d-pn__go { margin-top: 10px; padding: 9px; border-radius: 6px; background: #EC5B4A; text-align: center; font-size: 11.5px; font-weight: 600; color: #1A0A07; }
.d-pn__go.is-lit { box-shadow: 0 0 0 3px rgba(250, 76, 51, 0.28), 0 0 18px rgba(250, 76, 51, 0.45); }
.d-pn__go--end { border: 1px solid rgba(236, 91, 74, 0.8); background: none; color: #F36A55; }
.d-pn__go--ghost { border: 1px solid #3A3C42; background: #1F2024; color: #E8E8EA; }
.d-pn__row { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; }
.d-pn__row span { color: #9A9DA3; }
.d-pn__row b { font: 400 10px/1.3 var(--mono); color: #E6E8EB; }
.d-pn__state { color: #fff; font-size: 12px; font-weight: 500; }
.d-pn__state small { display: block; margin-top: 3px; font-size: 10px; font-weight: 400; color: #9A9DA3; }
.d-pn__hint { margin-top: 10px; font-size: 10px; color: #9A9DA3; }
.d-pn__code { margin-top: 12px; text-align: center; font: 600 21px/1 var(--mono); letter-spacing: 0.18em; color: #fff; }
.d-pn__link { display: flex; justify-content: space-between; margin-top: 8px; padding: 7px 10px; border: 1px solid #2B2D32; border-radius: 6px; background: #0F1013; font: 400 9.5px/1.2 var(--mono); }
.d-qr { width: 128px; margin: 12px auto 0; padding: 10px; }
.d-qr img { display: block; width: 100%; }

/* The rest of the panel, as panel/cep/index.html draws it: the Stream settings
rows with the chosen one's controls under them, the offset's controls, and the devices. */
.d-pn__q { display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid #3A3C42; border-radius: 50%; font-size: 8px; letter-spacing: 0; color: #9A9DA3; }
.d-pn__stat { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px; margin-top: 8px; padding: 9px 10px; border: 1px solid #2B2D32; border-radius: 6px; background: #0F1013; }
.d-pn__stat.is-on { border-color: #45474D; }
.d-pn__stat span { font: 500 8.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #9A9DA3; }
.d-pn__stat b { font: 500 12px/1 var(--mono); color: #fff; }
.d-pn__stat small { grid-column: 1 / -1; font-size: 9.5px; color: #9A9DA3; }
.d-pn__bar { grid-column: 1 / -1; display: block; height: 3px; border-radius: 2px; background: #2B2D32; }
.d-pn__bar i { display: block; height: 100%; border-radius: 2px; background: #6B6E75; }
.d-pn__tile { margin-top: 8px; padding: 10px; border: 1px solid #2B2D32; border-radius: 6px; background: #0F1013; }
.d-pn__card > .d-pn__tile:first-child { margin-top: 0; }
.d-pn__tile p { margin: 0; font-size: 10.5px; color: #C8CACE; }
.d-pn__tilehead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.d-pn__rungs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.d-pn__rungs span { display: grid; place-items: center; align-content: center; height: 40px; border: 1px solid #2B2D32; border-radius: 6px; background: #17181C; font-size: 11px; color: #E6E8EB; }
.d-pn__rungs span.is-on { border-color: #EC5B4A; background: rgba(236, 91, 74, 0.12); color: #F36A55; }
.d-pn__rungs small { font: 400 8.5px/1.2 var(--mono); color: #9A9DA3; }
.d-pn__seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 10px; padding: 2px; border: 1px solid #2B2D32; border-radius: 6px; background: #17181C; }
.d-pn__seg span { padding: 6px; border-radius: 4px; text-align: center; font-size: 10.5px; color: #9A9DA3; }
.d-pn__seg span.is-on { background: #2B2D32; color: #fff; }
.d-pn__min { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 10.5px; color: #C8CACE; }
.d-pn__stepper { display: flex; align-items: center; gap: 8px; }
.d-pn__stepper i, .d-pn__sync i, .d-pn__pending i { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid #3A3C42; border-radius: 5px; background: #1F2024; font-style: normal; font-size: 10px; color: #E6E8EB; }
.d-pn__stepper b { font: 500 11px/1 var(--mono); color: #fff; }
.d-pn__sync { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 12px; }
.d-pn__sync b { min-width: 70px; padding: 5px 0; border: 1px solid #45474D; border-radius: 5px; text-align: center; font: 500 13px/1 var(--mono); color: #fff; }
.d-pn__sync b small { font-size: 9px; color: #9A9DA3; }
.d-pn__pending { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 10px; color: #E8B436; }
.d-pn__pending span { margin-right: auto; }
.d-pn__pending i.is-primary { border-color: #EC5B4A; background: #EC5B4A; color: #1A0A07; font-weight: 600; }
.d-pn__count { margin-left: 4px; font-weight: 500; color: #C8CACE; }
.d-pn__share { display: flex; align-items: center; gap: 7px; margin-left: auto; font: 400 9.5px/1 "IBM Plex Sans", var(--sans); letter-spacing: 0; text-transform: none; color: #9A9DA3; }
.d-pn__sw { position: relative; flex: none; width: 24px; height: 14px; border-radius: 99px; background: #3A3C42; }
.d-pn__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 10px; height: 10px; border-radius: 50%; background: #C8CACE; }
.d-pn__sw.is-on { background: var(--tally); }
.d-pn__sw.is-on::after { left: 12px; background: #fff; }
.d-pn__viewer { margin-top: 10px; padding-bottom: 10px; border-bottom: 1px solid #2B2D32; }
.d-pn__viewer:last-child { padding-bottom: 0; border-bottom: 0; }
/* The panel as it has looked since 2026-10-30 (panel.css, tethery.app's dress): square cards in the viewfinder's
   corners, square controls and tags, and the switch inside a card round, as the help's own is. */
.d-pn, .d-pn__card, .d-pn__sel, .d-pn__go, .d-pn__link, .d-pn__stat, .d-pn__tile, .d-pn__rungs span, .d-pn__pill,
.d-pn__stepper i, .d-pn__sync i, .d-pn__pending i, .d-pn__sync b, .d-pn__bar, .d-pn__bar i { border-radius: 0; }
.d-pn__card { position: relative; }
.d-pn__notes { margin: 8px 0 12px; padding: 0; list-style: none; }
.d-pn__notes li { position: relative; padding: 0 0 6px 12px; font-size: 10.5px; color: #E6E8EB; }
.d-pn__notes li::before { content: ""; position: absolute; left: 1px; top: 0.5em; width: 4px; height: 4px; border-radius: 50%; background: #5ED07E; }
.d-pn__card::after { content: ""; position: absolute; inset: -1px; pointer-events: none; background-repeat: no-repeat;
  background-image: var(--b), var(--b), var(--b), var(--b), var(--b), var(--b), var(--b), var(--b);
  background-size: 8px 1px, 1px 8px, 8px 1px, 1px 8px, 8px 1px, 1px 8px, 8px 1px, 1px 8px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%; }
.d-pn__seg, .d-pn__seg span { border-radius: 999px; }
.d-pn__viewer span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #fff; }
.d-pn__viewer small { display: block; margin-top: 4px; font: 400 9.5px/1.3 var(--mono); color: #9A9DA3; }
.d-pn__pen { width: 11px; height: 11px; fill: none; stroke: #9A9DA3; stroke-width: 1.1; stroke-linejoin: round; }
.d-pn__lab--sub { margin-top: 14px; }

/* A phone, small: the code screen, or the phone's own settings. */
.d-phone { width: 210px; height: 410px; padding: 8px; border-radius: 34px; background: linear-gradient(145deg, #3a3d44, #121317 45%, #2a2c31); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 60px -20px rgba(0, 0, 0, 0.9); }
.d-phone__s { position: relative; height: 100%; overflow: hidden; border-radius: 27px; background: radial-gradient(90% 50% at 85% 8%, rgba(250, 76, 51, 0.2), transparent 70%), #050608; font: 400 11px/1.4 "IBM Plex Sans", var(--sans); color: #E6E9ED; }
.d-phone__isl { position: absolute; top: 8px; left: 50%; width: 64px; height: 19px; margin-left: -32px; border-radius: 12px; background: #000; }
.d-join { position: absolute; inset: 70px 16px auto; text-align: center; }
.d-join img { width: 70px; }
.d-join b { display: block; margin-top: 26px; font-size: 15px; font-weight: 600; color: #fff; }
.d-join p { margin: 6px 0 0; font-size: 10px; color: #9A9EA5; }
.d-boxes { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
.d-boxes span { display: grid; place-items: center; width: 30px; height: 38px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 7px; font: 600 17px/1 var(--mono); color: #fff; }
.d-boxes span.is-cur { border-color: var(--tally); box-shadow: 0 0 0 3px rgba(250, 76, 51, 0.2); }
.d-join__go { margin-top: 18px; padding: 10px; border-radius: 10px; background: #E8452E; font-size: 11px; font-weight: 600; color: #fff; }
.d-join__scan { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 9px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 10px; font-size: 11px; font-weight: 500; color: #fff; }
.d-join__scan svg { width: 13px; height: 13px; fill: none; stroke: #F36A55; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.d-set { position: absolute; inset: 44px 0 0; padding: 0 12px; font: 400 11.5px/1.3 -apple-system, "IBM Plex Sans", sans-serif; }
.d-set__nav { text-align: center; font-size: 12px; font-weight: 600; color: #fff; }
.d-set__nav span { float: left; font-weight: 400; color: var(--tally-hi); }
.d-set__cap { margin: 16px 8px 5px; font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; color: #8A8D93; }
.d-set__grp { border-radius: 10px; background: #1C1C1F; }
.d-set__grp + .d-set__grp { margin-top: 14px; }
.d-set__row { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 10px; color: #fff; }
.d-set__row + .d-set__row { border-top: 0.5px solid rgba(255, 255, 255, 0.12); }
.d-set__row em { font-style: normal; color: #8A8D93; }
.d-set__row.is-lit { border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(250, 76, 51, 0.7); }
.d-set__note { margin: 6px 8px 14px; font-size: 9px; color: #8A8D93; }
.d-sw { position: relative; width: 32px; height: 19px; border-radius: 99px; background: #3A3A3E; }
.d-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; }
.d-sw.is-on { background: var(--tally); }
.d-sw.is-on::after { left: 15px; }
.d-set--android { font-family: Roboto, "IBM Plex Sans", sans-serif; }
.d-set--android .d-set__nav { padding-left: 4px; text-align: left; font-size: 15px; font-weight: 400; }
.d-set--android .d-set__grp { margin-top: 12px; background: none; }
.d-set--android .d-set__row { flex-wrap: wrap; min-height: 44px; }
.d-set--android .d-set__row + .d-set__row { border: 0; }
.d-set--android .d-set__row small { flex-basis: 100%; margin-top: -10px; padding-bottom: 6px; font-size: 9.5px; color: #9AA0A6; }

/* The panel's Connection list, with the panel's own glyphs. */
.d-picker { width: 320px; padding: 6px; border-radius: 9px; background: #232428; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 50px rgba(0, 0, 0, 0.6); font: 400 11.5px/1.3 "IBM Plex Sans", var(--sans); color: #E6E8EB; }
.d-picker div { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px; }
.d-picker div.is-on { background: rgba(255, 255, 255, 0.07); }
.d-picker svg { width: 16px; height: 16px; fill: none; stroke: #C6C9CE; stroke-linejoin: round; stroke-linecap: round; }
.d-picker small { font: 400 10px/1 var(--mono); color: #8C8F95; }
.d-picker div.is-off { color: #75787E; }
.d-picker div.is-off small { color: #F36A55; }

/* The account page's computers. */
.d-acct { width: 330px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.1); background: #0C0D10; font: 400 11.5px/1.4 var(--sans); color: #C9CCD1; }
.d-acct > b { display: block; margin-bottom: 8px; font-size: 14px; color: #fff; }
.d-acct div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.d-acct div span { display: block; color: #fff; }
.d-acct div small { display: block; font: 400 10px/1.4 var(--mono); color: #8C8F95; }
.d-acct div em { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 7px; font-size: 11px; font-style: normal; color: #fff; }

/* ------------------------------------------------------------------ a phone */
.docs__menu, .docs__scrim { display: none; }
@media (max-width: 899px) {
  .docs { padding-top: 100px; padding-bottom: 116px; }
  .docs__in { display: block; padding: 0 20px; }
  /* The sidebar becomes a drawer from below, opened from a bar at the foot of the window: the chapter before, this
     page with its number and how many sections, and the chapter after (the owner's pick of round 19, B, 2026-10-27,
     refined with emil-design-eng: every part answers a press, the drawer rises on the iOS drawer curve and leaves
     faster, and a drag or a flick down closes it). */
  /* A rounded rectangle (the owner, 2026-10-27, over a pill and a square), 20px in from the edges, which keeps its
     corners inside a phone's rounded screen when the browser's bars go. */
  .docs__menu { position: fixed; z-index: 61; left: max(20px, env(safe-area-inset-left)); right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
    display: grid; grid-template-columns: 52px 1fr 52px; height: 52px;
    border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; overflow: hidden; background: rgba(14, 15, 18, 0.84); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.6); }
  .docs__step, .docs__open { display: grid; place-items: center; border: 0; background: none; color: #C8CACE; text-decoration: none;
    transition: transform 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; }
  .docs__step svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .docs__step.is-none { opacity: 0.25; }
  .docs__step:active { transform: scale(0.92); }
  .docs__open { align-content: center; min-width: 0; padding: 0 6px; border-left: 1px solid rgba(255, 255, 255, 0.08); border-right: 1px solid rgba(255, 255, 255, 0.08); color: #fff; }
  .docs__open:active { transform: scale(0.97); }
  .docs__open span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 14.5px/1.15 var(--sans); }
  .docs__open small { margin-top: 4px; font: 400 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .docs__open span b { margin-right: 7px; font: 400 12px/1 var(--mono); letter-spacing: 0.06em; color: var(--tally-hi); }
  .docs__scrim { display: block; position: fixed; z-index: 69; inset: 0; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity 200ms ease; }
  .is-menu .docs__scrim { opacity: 1; pointer-events: auto; transition-duration: 300ms; }
  :root { --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); }
  .side { position: fixed; z-index: 70; top: auto; left: 0; right: 0; bottom: 0; height: min(80vh, 660px); max-height: none; padding: 30px 22px max(28px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px 20px 0 0; background: #0B0C0F; box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.7);
    transform: translateY(104%); transition: transform 200ms var(--ease-out); will-change: transform; touch-action: pan-y; }
  .side::before { content: ""; position: absolute; top: 10px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background: rgba(255, 255, 255, 0.22); }
  .is-menu .side { transform: none; transition: transform 420ms var(--ease-drawer); }
  .side__search kbd { display: none; }
  /* Safari on an iPhone zooms the page into any field whose words are smaller than 16px when it is tapped;
     at 16px it does not, and the page keeps its size (the owner, 2026-10-27). */
  .side__search { height: 44px; }
  .side__search input { font-size: 16px; }
  .side .side__home { font-size: 17px; }
  .side .side__head { padding: 14px 0; font-size: 12px; }
  .side__arrow { width: 32px; }
  .side__group li a { padding: 9px 0; font-size: 16px; }
  .side__home[aria-current="page"]::before, .side__group li a.is-on::before { left: -22px; }
  .art { padding-top: 18px; font-size: 16px; }
  .art h1, .hp--home .art h1 { margin-top: 14px; font-size: clamp(30px, 8.6vw, 38px); }
  .art__lead { font-size: 17px; }
  .art h2 { margin-top: 44px; padding-top: 22px; font-size: 22px; scroll-margin-top: 140px; }
  .art h3 { font-size: 17px; }
  .art__crumb { font-size: 11px; }
  .steps > li { padding-left: 44px; padding-bottom: 26px; }
  .steps > li::before { width: 28px; height: 28px; font-size: 11.5px; }
  .steps > li::after { left: 14px; top: 36px; }
  .steps__t { font-size: 17px; }
  .call { padding: 14px 16px 16px; font-size: 15px; }
  .call__k { font-size: 11px; }
  .fig { padding: 20px 12px 0; overflow: hidden; }
  .fig figcaption { margin: 20px -12px 0; padding: 11px 14px; font-size: 13px; }
  .figs { flex-wrap: wrap; gap: 26px; }
  /* A table is a list of rows on a phone: the name, then each cell under it. */
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl { font-size: 14.5px; }
  .tbl thead { display: none; }
  .tbl tr { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  .tbl tr:first-child { border-top: 1px solid rgba(255, 255, 255, 0.14); }
  .tbl td { padding: 0; border: 0; }
  .tbl td + td { margin-top: 4px; color: #A9ADB4; }
  .tbl td:first-child { white-space: normal; }
  .conn-h svg { width: 20px; height: 20px; }
  .art .meta { font-size: 11.5px; }
  .vid__play { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
  .vid__cap { left: 14px; right: 14px; bottom: 12px; }
  .vid__cap b { font-size: 16px; }
  .vid__cap span { font-size: 10.5px; }
  .art .stuck { font-size: 12px; }
  .hp .art > .pn { gap: 10px; }
  .pn a { flex: 1; width: auto; }
  .pn small { font-size: 10.5px; }
  .pn span { font-size: 16px; }
  .ov-cards, .ov-vid, .ov-two { grid-template-columns: 1fr; }
  .ov-cards .ic { grid-template-columns: 46px 1fr; column-gap: 14px; padding: 18px 16px; }
  .ov-cards .ic__icon { grid-row: 1 / span 3; width: 46px; height: 46px; margin: 0; border-radius: 12px; }
  .ic__t { font-size: 18px; }
  .ic__p { font-size: 14.5px; }
  .ic__m { font-size: 11px; }
  .art .vlist a { padding: 13px 0 13px 38px; }
  .vlist a::before { top: 15px; width: 26px; height: 26px; }
  .vlist b { font-size: 15.5px; }
  .vlist span { font-size: 11.5px; }
  .tc { padding: 20px 18px; }
  .tc .ic__icon { width: 40px; height: 40px; }
  .tc b { font-size: 18px; }
  .art .tc p { font-size: 14.5px; }
  .tc .button { height: 46px; font-size: 15px; }
  .d-mac { margin: -20px -40px; transform: scale(0.78); transform-origin: center; }
  .d-pref { width: 100%; padding: 12px; font-size: 10.5px; }
  .d-pref__h { font-size: 9px; }
  .d-pn { width: 100%; max-width: 300px; }
  .d-picker { width: 100%; max-width: 320px; }
  .d-acct { width: 100%; }
}
/* The address row's arrow sits after the address, and Copy at the row's end. */
.d-pn__link .d-pn__v { margin: 0 auto 0 6px; }

/* What to tap in each Home Screen step: /download's pictures (download.css .dl-art), alone in the figure at the
size they have inside /download's phone, with Safari's toolbar in the tally rather than its blue, as every drawing
here is. */
.fig .dl-art { flex: none; width: calc(254 * var(--u)); height: calc(260 * var(--u)); margin: 0; }
.fig .dl-art__tools { color: var(--tally-hi); }
@media (max-width: 899px) { .fig .dl-art { width: 100%; max-width: 300px; height: 260px; } }
/* In the header, room for the numbers above the icons. */
.d-anno .d-pn__top { gap: 16px; margin-top: 10px; }
/* The address row opened: Online or Local, each with its note, the chosen one lit. */
.d-pn__link.is-open { border-color: #45474D; }
.d-pn__menu { margin-top: 4px; padding: 4px; border: 1px solid #2B2D32; border-radius: 6px; background: #17181C; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5); }
.d-pn__menu div { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; row-gap: 3px; align-items: center; padding: 7px 8px; border-radius: 4px; }
.d-pn__menu div.is-on { background: #26272B; }
.d-pn__menu span { font: 400 9.5px/1.2 var(--mono); color: #E6E8EB; }
.d-pn__menu small { grid-column: 2; font-size: 9.5px; color: #9A9DA3; }
.d-pn__tag { padding: 2px 5px; border: 1px solid #45474D; border-radius: 4px; font: 500 7.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #C8CACE; }
/* The Connection list's dots, as the panel's: green for a link that is up, red for one that has gone. */
.d-picker div { grid-template-columns: 8px 18px 1fr auto; }
.d-pn__dot { width: 7px; height: 7px; border-radius: 50%; background: #5ED07E; box-shadow: 0 0 6px rgba(94, 208, 126, 0.6); }
.d-picker div.is-gone .d-pn__dot { background: var(--tally); box-shadow: none; }
.d-picker div.is-gone { color: #9A9DA3; }
/* The round arrow beside Connection. */
.d-pn__ref { display: grid; place-items: center; width: 15px; height: 15px; border: 1px solid #3A3C42; border-radius: 50%; }
.d-pn__ref svg { width: 8px; height: 8px; fill: none; stroke: #C8CACE; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
/* Previous and Next name the chapter by its number too, in the tally's mono, as the sidebar does. */
.pn span b { margin-right: calc(8 * var(--u)); font: 400 0.8em/1 var(--mono); color: var(--tally-hi); }
/* A chapter's name and number together, the part of its row that goes to its page. */
.side__name { display: flex; gap: calc(8 * var(--u)); }
/* The row opens and closes its chapter, and only the name goes to the page, so only the name lights as a link does;
the rest of the row shows a hand for opening. */
.side .side__head { cursor: pointer; }
.side .side__head:hover { color: #B9BCC2; }
.side .side__head:hover .side__arrow, .side .side__head .side__name:hover { color: #fff; }

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .side, .is-menu .side { transform: none; opacity: 0; pointer-events: none; transition: opacity 150ms ease; }
  .is-menu .side { opacity: 1; pointer-events: auto; }
}

/* The phone's viewer (viewer/index.html and viewer.css, rendered with sample values on 2026-10-27): the picture, and
the panel a tap brings up from the foot of the screen, in the viewer's own colours. Drawn small inside a phone and at
reading size on its own (.d-hud--card), from one set of rules scaled by --k. */
.d-phone__pic { position: absolute; left: 0; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.d-phone__pic--zoom { transform: scale(2.4); transform-origin: 52% 42%; }
.d-phone__crop { position: absolute; left: 0; right: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.d-hud { --k: 1; position: absolute; left: 0; right: 0; bottom: 0; padding: calc(9px * var(--k)) calc(9px * var(--k)) calc(14px * var(--k)); border-top: 1px solid #2A303A;
  background: rgba(23, 26, 32, 0.94); font: 400 calc(7px * var(--k))/1.3 "IBM Plex Sans", var(--sans); color: #E6E9ED; text-align: left; }
.d-hud--card { --k: 1.6; position: relative; width: 340px; padding-bottom: calc(10px * var(--k)); border: 1px solid #2A303A; border-radius: 10px; box-shadow: 0 24px 50px rgba(0, 0, 0, 0.6); }
.d-hud__head { display: flex; align-items: center; gap: calc(4px * var(--k)); }
.d-hud__id { flex: 1; min-width: 0; }
.d-hud__id small { display: block; font-size: calc(6.5px * var(--k)); color: #8A93A0; }
.d-hud__id b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(9.5px * var(--k)); font-weight: 500; color: #fff; }
.d-hud__acts { display: flex; gap: calc(4px * var(--k)); }
.d-ib { display: grid; place-items: center; width: calc(17px * var(--k)); height: calc(17px * var(--k)); border: 1px solid #2A303A; border-radius: calc(4px * var(--k)); color: #8A93A0; }
.d-ib svg { width: calc(8px * var(--k)); height: calc(8px * var(--k)); }
.d-ib.is-on { border-color: var(--tally); color: var(--tally-hi); background: rgba(250, 76, 51, 0.12); }
.d-tele { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(7px * var(--k)) calc(6px * var(--k)); margin: calc(9px * var(--k)) 0 0; }
.d-tele dt { font: 500 calc(5.5px * var(--k))/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #8A93A0; }
.d-tele dd { margin: calc(3px * var(--k)) 0 0; font: 400 calc(7.5px * var(--k))/1.25 var(--mono); color: #E6E9ED; white-space: nowrap; }
.d-tele dd small { display: block; font-size: calc(6.5px * var(--k)); color: #8A93A0; }
.d-tele dd svg { width: calc(7px * var(--k)); height: calc(7px * var(--k)); margin-right: calc(2px * var(--k)); vertical-align: -0.1em; fill: none; stroke: currentColor; stroke-linecap: round; }
.d-chip { display: inline-flex; align-items: center; gap: calc(3px * var(--k)); padding: calc(2px * var(--k)) calc(5px * var(--k)) calc(2px * var(--k)) calc(4px * var(--k)); border: 1px solid; border-radius: 99px;
  font: 500 calc(5.5px * var(--k))/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.d-chip::before { content: ""; width: calc(4px * var(--k)); height: calc(4px * var(--k)); border-radius: 50%; background: currentColor; }
.d-chip--ok { border-color: rgba(76, 195, 138, 0.45); background: rgba(76, 195, 138, 0.1); color: #4CC38A; }
.d-chip--play { border-color: rgba(250, 76, 51, 0.45); background: rgba(250, 76, 51, 0.1); color: var(--tally-hi); }
/* The app sending, in its own colours, as the viewer has it. */
.d-app { display: inline-block; padding: calc(2px * var(--k)) calc(6px * var(--k)); border: 1px solid rgba(153, 153, 255, 0.35); border-radius: 99px; background: #2A0845;
  font: 400 calc(7px * var(--k))/1.2 "IBM Plex Sans", var(--sans); color: #9999FF; }
.d-hud--card > .d-tele:first-child { margin-top: 0; }
.d-app--ae { background: #00005B; }
.d-hud__note { margin: calc(8px * var(--k)) 0 0; font-size: calc(6.5px * var(--k)); color: #8A93A0; }
/* Settings, the panel's second page: a back chevron and the title, two buttons, then groups of rows. */
.d-hud__page { display: flex; align-items: center; gap: calc(6px * var(--k)); font-size: calc(10px * var(--k)); font-weight: 500; color: #fff; }
.d-hud__page svg { width: calc(9px * var(--k)); height: calc(9px * var(--k)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d-hud__btns { display: grid; grid-template-columns: 1fr 1fr; gap: calc(5px * var(--k)); margin-top: calc(8px * var(--k)); }
.d-hud__btns span { padding: calc(6px * var(--k)) 0; border: 1px solid #2A303A; border-radius: calc(6px * var(--k)); text-align: center; font-size: calc(7.5px * var(--k)); font-weight: 500; }
.d-hud__btns span.is-on { border-color: var(--tally); color: var(--tally-hi); background: rgba(250, 76, 51, 0.1); }
.d-hud__lab { margin: calc(9px * var(--k)) 0 calc(4px * var(--k)) calc(1px * var(--k)); font: 500 calc(5.5px * var(--k))/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: #8A93A0; }
.d-hud__grp { border: 1px solid #2A303A; border-radius: calc(6px * var(--k)); }
.d-hud__row { display: flex; align-items: center; justify-content: space-between; gap: calc(6px * var(--k)); padding: calc(5px * var(--k)) calc(7px * var(--k)); }
.d-hud__row + .d-hud__row { border-top: 1px solid #2A303A; }
.d-hud__row span { font-size: calc(7.5px * var(--k)); }
.d-hud__row small { display: block; margin-top: calc(1px * var(--k)); font-size: calc(6px * var(--k)); color: #8A93A0; }
.d-hud__row i { flex: none; position: relative; width: calc(18px * var(--k)); height: calc(10px * var(--k)); border-radius: 99px; background: #2A303A; }
.d-hud__row i::after { content: ""; position: absolute; top: calc(1.5px * var(--k)); left: calc(1.5px * var(--k)); width: calc(7px * var(--k)); height: calc(7px * var(--k)); border-radius: 50%; background: #8A93A0; }
.d-hud__row i.is-on { background: rgba(250, 76, 51, 0.4); }
.d-hud__row i.is-on::after { left: auto; right: calc(1.5px * var(--k)); background: var(--tally); }
.d-hud__row em { font-style: normal; color: #8A93A0; }
/* What stays on the picture: the overlays at the top left, and the tags and the zoom across the top. */
.d-ovs { position: absolute; top: 34px; left: 9px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.d-ovs span { padding: 2px 4px; border-radius: 2px; background: rgba(15, 17, 21, 0.72); font: 400 6.5px/1 var(--mono); letter-spacing: 0.04em; color: #E6E9ED; }
.d-ovs b { font-weight: 500; color: #fff; }
.d-ovs svg { display: block; width: 7px; height: 7px; fill: currentColor; }
.d-tag { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); display: flex; gap: 4px; padding: 3px 7px; border: 1px solid #2A303A; border-radius: 99px; background: rgba(23, 26, 32, 0.94);
  white-space: nowrap; font: 400 6px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #8A93A0; }
.d-tag b { font-weight: 400; color: var(--tally-hi); }
.d-tag b + span::before { content: "\2014  "; }
/* A swipe to the other app's session: its last frame coming in over this one, and a dot per session. */
.d-phone__in { position: absolute; left: 62%; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; box-shadow: -10px 0 24px rgba(0, 0, 0, 0.7); }
.d-pager { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 4px 6px; border-radius: 99px; background: rgba(15, 17, 21, 0.6); }
.d-pager i { width: 4px; height: 4px; border-radius: 50%; background: rgba(230, 233, 237, 0.35); }
.d-pager i.is-on { background: #E6E9ED; }
.d-pager i.is-near { background: #E6E9ED; transform: scale(1.35); }
/* The Invite sheet: the whole screen, the code, the QR, and the link in a field with Copy. */
.d-sheet { --k: 1; position: absolute; inset: 34px 10px 0; text-align: left; font: 400 7.5px/1.35 "IBM Plex Sans", var(--sans); color: #E6E9ED; }
.d-sheet p { margin: 8px 0 0; color: #8A93A0; }
.d-sheet__code { margin-top: 12px; text-align: center; font: 600 17px/1 var(--mono); letter-spacing: 0.18em; color: #fff; }
.d-sheet .d-qr { width: 104px; margin-top: 8px; padding: 6px; }
.d-sheet__field { display: flex; align-items: center; gap: 4px; margin-top: 8px; padding: 6px 6px; border: 1px solid #2A303A; border-radius: 6px; font: 400 6.5px/1 var(--mono); }
.d-sheet__field em { padding: 2px 4px; border: 1px solid #45474D; border-radius: 3px; font-style: normal; font-size: 5.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #C8CACE; }
.d-sheet__field span { min-width: 0; font-size: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.d-sheet__field b { margin-left: auto; padding-left: 6px; border-left: 1px solid #2A303A; font: 500 7px/1 "IBM Plex Sans", var(--sans); color: #fff; }
/* A number on a phone's part goes in the margin beside the phone, since the screen clips what leaves it: a mark at the
   part's height on the phone's edge carries it (data-at="r" for the right). */
.d-phone { position: relative; }
.d-anno .d-mark[data-n] { position: absolute; left: 0; width: 0; height: 0; }
.d-anno .d-mark[data-n][data-at="r"] { left: auto; right: 0; }
.d-anno .d-hud__acts [data-n]::before { left: 50%; top: -19px; margin: 0 0 0 -8.5px; }
.d-anno .d-hud__acts { margin-top: 12px; }
@media (max-width: 899px) {
  .d-hud--card { --k: 1.45; width: 100%; max-width: 310px; }
}

/* Session notifications: a row of Settings ringed, the phone's own permission prompt over the viewer (iOS's alert,
its buttons in the tally where iOS draws blue), and the lock screen with the notification on it (/pricing's
.lock, home.css, at a phone's whole size). */
.d-hud__grp.is-lit { border-color: var(--tally); box-shadow: 0 0 0 2px rgba(250, 76, 51, 0.25); }
.d-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); }
.d-alert { position: absolute; top: 50%; left: 50%; width: 150px; transform: translate(-50%, -50%); overflow: hidden; border-radius: 14px; background: rgba(44, 44, 48, 0.96);
  text-align: center; font: 400 7px/1.35 -apple-system, BlinkMacSystemFont, "IBM Plex Sans", sans-serif; color: #EDEDF0; }
.d-alert b { display: block; padding: 12px 12px 0; font-size: 8.5px; font-weight: 600; color: #fff; }
.d-alert p { margin: 4px 0 0; padding: 0 12px 12px; color: #C9C9CE; }
.d-alert__btns { display: grid; grid-template-columns: 1fr 1fr; border-top: 0.5px solid rgba(255, 255, 255, 0.18); }
.d-alert__btns span { padding: 8px 0; font-size: 8.5px; color: var(--tally-hi); }
.d-alert__btns span + span { border-left: 0.5px solid rgba(255, 255, 255, 0.18); font-weight: 600; }
.d-alert__btns span.is-lit { box-shadow: inset 0 0 0 1.5px var(--tally); border-radius: 0 0 14px 0; }
.d-phone--top { height: 236px; padding-bottom: 0; border-radius: 34px 34px 0 0; }
.d-phone--top .d-phone__s { border-radius: 27px 27px 0 0; }
/* The phone's top half rises from the caption, as /pricing's lock screen rises from its card's foot. */
.fig--rise figcaption { margin-top: 0; }
.d-lock { position: absolute; inset: 0; padding: 46px 10px 0; background: radial-gradient(80% 60% at 30% 10%, #3b2a4a, transparent 70%), radial-gradient(80% 70% at 90% 90%, #3a1e18, transparent 70%), #121218; }
.d-lock__date { text-align: center; font: 500 9px/1 -apple-system, BlinkMacSystemFont, var(--sans); color: rgba(255, 255, 255, 0.8); }
.d-lock__time { margin-top: 4px; text-align: center; font: 300 46px/1 -apple-system, BlinkMacSystemFont, var(--sans); color: rgba(255, 255, 255, 0.92); }
.d-lock__note { display: flex; gap: 7px; margin-top: 26px; padding: 8px; border-radius: 13px; background: rgba(40, 40, 46, 0.78); text-align: left; }
.d-lock__note img { flex: none; width: 22px; height: 22px; border-radius: 5px; }
.d-lock__note > div { flex: 1; min-width: 0; }
.d-lock__note p { margin: 0; font: 400 7.5px/1.35 -apple-system, BlinkMacSystemFont, var(--sans); color: #EDEDF0; }
.d-lock__note p:first-child { display: flex; justify-content: space-between; }
.d-lock__note p:first-child span { color: #9A9AA2; }
.d-lock__note .d-lock__title { font-weight: 600; }
/* An app's row in iOS Settings: its icon, then its name. */
.d-set__app { display: flex; align-items: center; gap: 7px; }
.d-set__app i, .d-set__app img { flex: none; width: 17px; height: 17px; border-radius: 4px; }
.d-set__row em { font-size: 9.5px; }

/* Free against full (License and account): the version's column in the tally, and still a table on a phone, where a
table is otherwise a list of rows, because the two columns are the point. */
.tbl--vs th:nth-child(n+2) { width: 34%; }
.tbl--vs th:last-child { color: var(--tally-hi); }
.art .tbl--vs + .tc { margin-top: calc(24 * var(--u)); }
@media (max-width: 899px) {
  .tbl.tbl--vs { display: table; font-size: 13.5px; }
  .tbl--vs thead { display: table-header-group; }
  .tbl--vs tbody { display: table-row-group; }
  .tbl--vs tr, .tbl--vs tr:first-child { display: table-row; padding: 0; border: 0; }
  .tbl--vs td, .tbl--vs td + td { display: table-cell; margin: 0; padding: 10px 8px 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  .tbl--vs td + td { color: #A9ADB4; }
}

/* A callout's icon (call-icon), the cards' tile at a callout's size, on the left with the words beside it. */
.call:has(> .call__ic) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(16 * var(--u)); align-items: start; }
.call > .call__ic { grid-row: 1 / span 9; width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin: calc(2 * var(--u)) 0 0; border-radius: calc(11 * var(--u)); }
.call:has(> .call__ic) > :not(.call__ic) { grid-column: 2; }
@media (max-width: 899px) {
  .call > .call__ic { width: 36px; height: 36px; border-radius: 10px; }
  .call:has(> .call__ic) { column-gap: 13px; }
}

/* The installer's own screens (installer/ui, photographed through its preview at 760 by 520), drawn as its window. */
.fig .shot { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 24px 50px rgba(0, 0, 0, 0.6); }
.figs .shot { flex: 1 1 0; min-width: 0; }
@media (max-width: 899px) { .figs .shot { flex-basis: 100%; } }

/* The panel's License page (panel/cep/index.html, page-licence): its sentence, the key field with Paste, and the key
icon ringed where the panel's header has it. */
.d-pn__lead { margin: 12px 0 0; font-size: 10.5px; line-height: 1.45; color: #C8CACE; }
.d-pn__keyrow { display: flex; gap: 6px; margin-top: 7px; }
.d-pn__field { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid #45474D; border-radius: 6px; background: #0F1013; font: 400 9.5px/1.2 var(--mono); color: #E6E8EB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-pn__small { flex: none; padding: 7px 10px; border: 1px solid #3A3C42; border-radius: 6px; background: #1F2024; font-size: 10px; color: #E8E8EA; }
.d-pn__ring { display: grid; place-items: center; padding: 3px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--tally), 0 0 12px rgba(250, 76, 51, 0.5); }

/* A command or a path in a box of its own, its Copy at the end (help-cmd); the text keeps to one line and scrolls
inside the box when it is longer than the column. Several in a .cmds stack sit close, a box each. */
.cmd { display: flex; align-items: stretch; margin: calc(12 * var(--u)) 0 0; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; background: rgba(8, 8, 10, 0.7); overflow: hidden; }
.art .cmd code { flex: 1; min-width: 0; overflow-x: auto; padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: 0; background: none; white-space: pre; font: 400 calc(13 * var(--u))/1.5 var(--mono); color: #E7E9EC; scrollbar-width: thin; }
.cmd__copy { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 0 calc(14 * var(--u)); border: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.04);
  color: #C8CACE; font: 500 calc(12.5 * var(--u))/1 var(--sans); cursor: pointer; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.cmd__copy:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.cmd__copy:active { background: rgba(255, 255, 255, 0.13); }
.cmd__copy svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.cmd__copy.is-done { color: #5ED07E; }
.cmds { display: grid; gap: 6px; margin-top: calc(12 * var(--u)); }
.cmds .cmd { margin: 0; }
.steps .cmd { margin-top: calc(10 * var(--u)); }
@media (max-width: 899px) {
  .art .cmd code { padding: 11px 12px; font-size: 12.5px; }
  .cmd__copy { padding: 0 12px; font-size: 12.5px; }
}

/* The help home's Popular links: the list in two columns, each with an arrow where the films' list has play. */
.art .vlist--popular { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(28 * var(--u)); margin-top: calc(22 * var(--u)); border-top: 0; }
.vlist--popular li:nth-child(-n+2) { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.vlist--popular a::before { background-size: 46%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 4l4 4-4 4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
@media (max-width: 899px) {
  .art .vlist--popular { grid-template-columns: 1fr; }
  .vlist--popular li:nth-child(2) { border-top: 0; }
}