/* Replayink — a white page on a ruled grid. One column, a hairline down each side of it, a
   hairline across the whole window between sections, and a hatched strip where one section ends
   and the next begins. Chrome is black, white and one blue; every other colour on the page is a
   mark someone made. */

:root {
  --bg: #ffffff;
  --fg: #09090b;
  --card: #ffffff;
  --muted: #f4f4f5;
  --sunk: #fafafa;
  --soft: #52525c;
  --muted-fg: #71717b;
  --border: #e4e4e7;
  --primary: #1447e6;
  --primary-fg: #eff6ff;
  --cta: #09090b;
  --cta-fg: #ffffff;
  --shadow: 0 1px 2px rgba(9, 9, 11, .05);
  --lift: 0 18px 40px -22px rgba(9, 9, 11, .28), 0 2px 6px rgba(9, 9, 11, .05);

  /* Marks. Never used for buttons, borders, headings or backgrounds. */
  --hl-yellow: #ffe45c;
  --mark: #ffe45c;
  --pin: #e5484d;
  --sel: #1447e6;
  --here: #16a34a;

  /* The names the demos were written against. */
  --paper: var(--bg);
  --paper-sunk: var(--sunk);
  --ink: var(--fg);
  --ink-soft: var(--soft);
  --ink-faint: var(--muted-fg);
  --rule: var(--border);

  --page: 64rem;
  --pad: 2rem;
  --ui: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;
}

/* Dark is the visitor's system setting unless the switch in the header says otherwise. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09090b; --fg: #fafafa; --card: #18181b; --muted: #27272a; --sunk: #111113;
    --soft: #c4c4cc; --muted-fg: #9f9fa9; --border: #26262b;
    --primary: #2b55e6; --primary-fg: #eff6ff; --cta: #fafafa; --cta-fg: #09090b;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4);
    --lift: 0 18px 40px -22px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .35);
    --sel: #7aa2ff; --pin: #ff6369;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #09090b; --fg: #fafafa; --card: #18181b; --muted: #27272a; --sunk: #111113;
  --soft: #c4c4cc; --muted-fg: #9f9fa9; --border: #26262b;
  --primary: #2b55e6; --primary-fg: #eff6ff; --cta: #fafafa; --cta-fg: #09090b;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --lift: 0 18px 40px -22px rgba(0, 0, 0, .8), 0 2px 6px rgba(0, 0, 0, .35);
  --sel: #7aa2ff; --pin: #ff6369;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* Any `display` rule of ours outranks the browser's own [hidden] { display: none }, so a row that
   is hidden in the DOM keeps painting. State it once, for everything. */
[hidden] { display: none !important; }

/* The ruled lines run the width of the window, which on a platform with classic scrollbars is a
   little wider than the page. Clip instead of scrolling sideways. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: 4.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.5 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); font-weight: 400; line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
h2 { font-size: clamp(1.875rem, 4vw, 2.25rem); font-weight: 600; line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }
h3 { font-size: 1rem; font-weight: 600; line-height: 1.5; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
button { font-family: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--hl-yellow); color: #09090b; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

.ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ================= the header ================= */

.top { position: fixed; inset: 0 0 auto 0; z-index: 50; border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease; }
.top[data-scrolled] { background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom-color: var(--border); backdrop-filter: saturate(1.4) blur(12px); }
.top-in { display: flex; align-items: center; gap: .25rem; max-width: var(--page); height: 3.5rem; margin: 0 auto; padding: 0 1rem; }
.brand { display: inline-flex; align-items: center; gap: .5rem; margin-right: auto; padding: .5rem; color: var(--fg); text-decoration: none; }
.brand .mark { width: 28px; height: 28px; }
.wm { font-size: 1.125rem; font-weight: 600; letter-spacing: -.03em; white-space: nowrap; }
.top-nav { display: flex; align-items: center; }
.top-nav a { padding: .5rem .9rem; font-size: .875rem; font-weight: 500; color: var(--fg); text-decoration: none; white-space: nowrap; border-radius: 8px; }
.top-nav a:hover { background: var(--muted); }
.top-nav a[aria-current="page"] { background: var(--muted); }
.icon-btn { display: grid; place-items: center; width: 2rem; height: 2rem; margin: 0 .35rem 0 .15rem; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--fg); cursor: pointer; }
.icon-btn:hover { background: var(--muted); }
.icon-btn .ico { width: 16px; height: 16px; }
.icon-btn .sun { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icon-btn .sun { display: block; } :root:not([data-theme="light"]) .icon-btn .moon { display: none; } }
:root[data-theme="dark"] .icon-btn .sun { display: block; }
:root[data-theme="dark"] .icon-btn .moon { display: none; }
@media (max-width: 52rem) { .top-nav { display: none; } }

/* ================= buttons ================= */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; padding: 0 .9rem; border: 1px solid transparent; border-radius: 8px;
  font: 500 .875rem/1 var(--ui); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .1s ease; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); color: var(--primary-fg); }
.btn.primary:hover { background: color-mix(in srgb, var(--primary) 88%, #000); }
.btn.outline { background: var(--card); border-color: var(--border); color: var(--fg); box-shadow: var(--shadow); }
.btn.outline:hover { background: var(--muted); }
.btn.sm { height: 2rem; padding: 0 1rem; border-radius: 999px; }
.btn.wide { width: 100%; height: 2.25rem; }
.btn.lg { height: 3rem; padding: 0 1.4rem; border-radius: 12px; font-size: 1rem; }
.btn.lg svg { width: 20px; height: 20px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.linky { padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--fg); font: 500 .8125rem/1 var(--ui); cursor: pointer; }
.linky:hover { border-bottom-color: var(--fg); }

.keycap { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px;
  background: var(--card); color: var(--fg); font: 600 .6875rem/1 var(--ui); vertical-align: 1px; }

/* ================= the grid ================= */

/* A section is the column between the two rules. Its top edge is a line across the whole window. */
.sec, .hatch { position: relative; max-width: var(--page); margin: 0 auto; border-inline: 1px solid var(--border); }
.sec::before, .hatch::before, .foot::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; margin-left: -50vw; border-top: 1px solid var(--border); pointer-events: none; }
.hero::before { content: none; }
.hatch { height: 3rem; background: repeating-linear-gradient(-45deg, transparent, transparent 12px, var(--border) 12px, var(--border) 13px); }
@media (max-width: 64rem) { .sec, .hatch { border-inline: 0; } }

/* Cells share hairlines: the gaps of the grid are the lines. */
.cells { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.cells > * { background: var(--bg); }
.cell { padding: 1.5rem; }
.cell h3 { margin-bottom: .25rem; }
.cell p, .cell li { font-size: .875rem; line-height: 1.625; color: var(--muted-fg); }

.head { padding: 3rem var(--pad); }
.head.center { text-align: center; }
.head h2 { margin-bottom: .5rem; }
.head p { color: var(--muted-fg); font-size: .9375rem; text-wrap: pretty; }
.head.center p { max-width: 36rem; margin-inline: auto; }
/* A heading that sits in the left half, with a rule down the middle of the section. */
.head.half { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.head.half > div { padding: 2.75rem var(--pad) 3rem; }
.head.half > div + div { border-left: 1px solid var(--border); }
.head.half > div.flush { padding: 0; }
.head.half p { max-width: 26rem; }

.tile { display: grid; place-items: center; width: 3rem; height: 3rem; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--fg); box-shadow: var(--shadow); }
.tile .ico { width: 20px; height: 20px; stroke-width: 1.75; }
.tile.sm { width: 2.25rem; height: 2.25rem; border-radius: 8px; }
.tile.sm .ico { width: 16px; height: 16px; }

.dots { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.dots li { position: relative; padding-left: .9rem; font-size: .9375rem; color: var(--soft); }
.dots li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--muted-fg) 60%, transparent); }

.split { display: grid; grid-template-columns: 1fr 1fr; }
.split > .text { padding: 3.75rem var(--pad); align-self: center; }
.split > .text h2 { margin-bottom: 1rem; line-height: 1.25; }
.split > .text p { color: var(--muted-fg); font-size: .9375rem; line-height: 1.6; max-width: 27rem; }
.split > .text .more { margin-top: 1.5rem; font-size: .875rem; }
.split > .art { display: grid; place-items: center; min-height: 23.5rem; padding: 2rem; border-left: 1px solid var(--border); background: var(--sunk); overflow: hidden; }

@media (max-width: 52rem) {
  :root { --pad: 1.25rem; }
  .cells { --cols: 2 !important; }
  .head.half, .split { grid-template-columns: 1fr; }
  .head.half > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .head.half > div:empty { display: none; }
  .split > .art { border-left: 0; border-top: 1px solid var(--border); }
  .split > .text { padding-block: 2.75rem; }
}
/* Three in a row do not divide by two: they go straight to one. */
@media (max-width: 52rem) { .cells.three { --cols: 1 !important; } }
@media (max-width: 34rem) { .cells { --cols: 1 !important; } }

/* ================= hero ================= */

/* Words, one button, and the page to try, with nothing around them. */
.hero { padding: 7.5rem 0 2.5rem; }
.hero-head { display: grid; justify-items: center; gap: 1.25rem; padding: 0 var(--pad); text-align: center; }
.hero-head > * { animation: rise .6s cubic-bezier(.2, .8, .25, 1) backwards; }
.hero-head > :nth-child(2) { animation-delay: .08s; }
.hero-head > :nth-child(3) { animation-delay: .16s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
.hero h1 { max-width: 19ch; font-size: clamp(2.5rem, 5.6vw, 3.75rem); font-weight: 500; line-height: 1.05; letter-spacing: -.035em; }
.hero .sub { max-width: 34rem; font-size: clamp(1rem, 2.2vw, 1.1875rem); line-height: 1.5; color: var(--muted-fg); text-wrap: balance; }
.hero-cta { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: .5rem; }
.hero-note { font-size: .875rem; color: var(--muted-fg); }

/* ================= the tour: one page, worked on together ================= */

/* Five things the extension does, as tabs over the page they happen on. The lit tab is the one
   being shown; the line under the page says what is happening and, when it is over, what to try. */
.tour { margin-top: 3.25rem; padding: 0 var(--pad); }
.tour-panel { padding: .75rem; border-radius: 22px; background: var(--muted); }
.tour-tabs { display: flex; justify-content: center; gap: .2rem; width: max-content; max-width: 100%; margin: .25rem auto 1rem; padding: .25rem; border-radius: 12px; background: color-mix(in srgb, var(--fg) 6%, transparent); }
.tour-tab { display: inline-flex; align-items: center; gap: .45rem; height: 2.1rem; padding: 0 .85rem; border: 0; border-radius: 9px; background: transparent;
  color: var(--soft); font: 500 .875rem/1 var(--ui); cursor: pointer; transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.tour-tab b { font-weight: inherit; white-space: nowrap; }
.tour-tab .ico { width: 15px; height: 15px; }
.tour-tab:hover { color: var(--fg); }
.tour-tab[aria-selected="true"] { background: var(--card); color: var(--fg); box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--fg) 6%, transparent); }

.tour-stage { border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: var(--lift); overflow: hidden; transition: border-color .4s ease; }
.tour-stage .frame { border: 0; border-radius: 0; box-shadow: none; }
#f-tour { aspect-ratio: auto; height: clamp(26rem, 46vw, 31rem); }
.tour-say { display: flex; align-items: center; gap: .7rem; min-height: 3.5rem; padding: .6rem .75rem .6rem 1.1rem; border-top: 1px solid var(--border); background: var(--sunk);
  font-size: .9375rem; line-height: 1.45; color: var(--fg); transition: background .4s ease; }
.tour-say p { flex: 1; }
.tour-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-fg); flex: none; transition: background .3s ease; }
.tour[data-state="playing"] .tour-dot { background: var(--primary); animation: pulse 1.4s ease-in-out infinite; }
.tour[data-state="yours"] .tour-dot { background: var(--here); }
.tour[data-state="yours"] .tour-say { background: color-mix(in srgb, var(--here) 7%, var(--bg)); }
.tour[data-state="yours"] .tour-stage { border-color: color-mix(in srgb, var(--here) 45%, var(--border)); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 22%, transparent); } }
.tour-acts { display: flex; align-items: center; gap: .9rem; flex: none; }
.tour-next { height: 2rem; padding: 0 .85rem; border: 0; border-radius: 8px; background: var(--primary); color: var(--primary-fg); font: 500 .8125rem/1 var(--ui); white-space: nowrap; cursor: pointer; }
.tour-next:hover { background: color-mix(in srgb, var(--primary) 88%, #000); }
.cap { margin-top: .9rem; font-size: .8125rem; color: var(--muted-fg); text-align: center; text-wrap: balance; }

@media (max-width: 52rem) {
  .hero { padding-top: 5.5rem; }
  /* The control becomes a strip that scrolls sideways. */
  .tour-panel { padding: .5rem; border-radius: 18px; }
  .tour-tabs { justify-content: flex-start; width: auto; overflow-x: auto; scrollbar-width: none; }
  .tour-tabs::-webkit-scrollbar { display: none; }
  .tour-tab { flex: none; }
  #f-tour { height: 34rem; }
  .tour-say { flex-wrap: wrap; font-size: .875rem; }
  .tour-say p { flex-basis: calc(100% - 1.5rem); }
  .tour-acts { margin-left: auto; }
}

/* ================= the frame: every demo is the same shape ================= */

.frame { --bar: 30px; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); }
.frame-bar { position: absolute; inset: 0 0 auto 0; height: var(--bar); z-index: 4; display: flex; align-items: center; gap: .4rem; padding: 0 .8rem;
  background: var(--sunk); border-bottom: 1px solid var(--border); font-size: .6875rem; color: var(--muted-fg); }
.frame-bar > i { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex: none; }
.frame-bar .addr { display: flex; align-items: center; gap: .4rem; flex: 1; min-width: 0; margin-left: .5rem; padding: .2rem .6rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.frame-body { position: absolute; inset: var(--bar) 0 0 0; overflow: hidden; }
.frame.bare .frame-body { inset: 0; }
/* The two big demos sit in a browser window: a taller bar, the three lights lit. */
.frame.browser { --bar: 44px; }
.frame.browser .frame-bar { padding: 0 1rem; font-size: .75rem; }
.frame.browser .frame-bar > i:nth-child(1) { background: #ff5f57; }
.frame.browser .frame-bar > i:nth-child(2) { background: #febc2e; }
.frame.browser .frame-bar > i:nth-child(3) { background: #28c840; }
.frame.browser .addr { padding: .32rem .7rem; }
.frame.browser .addr::before { content: ""; flex: none; width: 10px; height: 10px; background: currentColor; opacity: .7;
  -webkit-mask: 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.4' 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") center / contain no-repeat;
  mask: 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.4' 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") center / contain no-repeat; }

/* ---- shared demo pieces ---- */

.ptr { position: absolute; left: 0; top: 0; width: 15px; height: 15px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(229, 72, 77, .92); box-shadow: 0 0 0 4px rgba(229, 72, 77, .2);
  opacity: 0; pointer-events: none; z-index: 6; transition: transform .62s cubic-bezier(.32, .72, .28, 1), opacity .3s ease; }
.ptr.on { opacity: 1; }
.ptr.tap { animation: tap .42s ease-out; }
@keyframes tap { 0% { box-shadow: 0 0 0 4px rgba(229, 72, 77, .2); } 55% { box-shadow: 0 0 0 17px rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 4px rgba(229, 72, 77, .2); } }

.dm { border-radius: .18em; padding: .04em 0; transition: background .3s ease, box-shadow .3s ease; }
.dm.hl { background: color-mix(in srgb, var(--c) 34%, transparent); box-shadow: 0 0 0 .04em color-mix(in srgb, var(--c) 34%, transparent); }
.dm.grow { animation: grow .5s cubic-bezier(.2, .8, .3, 1); }
@keyframes grow { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.dm.pulse { animation: markpulse 1.3s ease-out; }
@keyframes markpulse { 0%, 35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 60%, transparent); } }

.pin-dot { position: absolute; width: 20px; height: 20px; border-radius: 50% 50% 50% 2px; background: var(--c, var(--pin)); color: #fff; z-index: 5;
  font: 600 .625rem/20px var(--ui); text-align: center; cursor: pointer; box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .5);
  transform: scale(0); animation: pindrop .45s cubic-bezier(.2, 1.3, .4, 1) forwards; }
@keyframes pindrop { to { transform: scale(1); } }
.pin-dot.active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--pin)) 30%, transparent), 0 3px 8px -3px rgba(0, 0, 0, .5); }

.dnote { position: absolute; width: 8.5rem; padding: .5rem .6rem; z-index: 5; background: color-mix(in srgb, var(--c) 30%, var(--paper)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  font-family: var(--hand); font-size: .9375rem; line-height: 1.22; color: var(--ink); box-shadow: 0 6px 14px -9px rgba(0, 0, 0, .55);
  transform: rotate(var(--rot, -1.5deg)) scale(.6); opacity: 0; animation: drop .45s cubic-bezier(.2, 1.25, .4, 1) forwards; }
@keyframes drop { to { transform: rotate(var(--rot, -1.5deg)) scale(1); opacity: 1; } }

.av { display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; flex: none; background: var(--c); color: #fff; font: 600 .5rem/1 var(--ui); letter-spacing: .01em; }
.av.here { box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--here); }
.av.plus { background: var(--paper-sunk); color: var(--ink-soft); outline: 1px dashed var(--ink-faint); outline-offset: -1px; font-size: .6875rem; }

@keyframes pop { from { opacity: 0; transform: translateY(5px); } }
@keyframes slidein { from { opacity: 0; transform: translateX(10px); } }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

/* ---- the page in the tour's frame ---- */

/* Clipped, not hidden: a hidden box still scrolls to bring a focused field into view, and that
   would carry the toolbar and every popover off with it. The page moves only when it is told to. */
.tr-view { position: absolute; inset: 0; overflow: clip; font-family: var(--ui); }
.tr-scroll, .tr-cursors { transition: transform .8s cubic-bezier(.3, .7, .2, 1); }
.tr-scroll { position: relative; min-height: 100%; }
.tr-doc { --left: clamp(1.1rem, 9%, 7rem); width: min(31rem, 100% - 4.4rem - var(--left)); margin-left: var(--left); padding: 1.75rem 0 2.5rem; font-size: .9375rem; line-height: 1.7; color: var(--soft); }
.tr-doc .doc-title { margin: 0 0 .3rem; font-size: 1.5rem; font-weight: 600; line-height: 1.2; letter-spacing: -.025em; color: var(--fg); }
.tr-doc .byline { margin-bottom: 1.1rem; font-size: .75rem; line-height: 1.4; color: var(--muted-fg); }
.tr-doc p { margin: 0 0 .85rem; }
.tr-doc blockquote { margin: 0 0 .85rem; padding-left: .8rem; border-left: 2px solid var(--border); color: var(--muted-fg); font-style: italic; }
.tr-doc .doc-sub { margin: 1.3rem 0 .5rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.015em; color: var(--fg); }
.tr-view[data-tool="hl"] .tr-doc { cursor: text; }
.tr-view[data-tool="note"] .tr-scroll { cursor: copy; }
.tr-view[data-tool="comment"] .tr-scroll { cursor: crosshair; }
.tr-view button { font-family: inherit; }
/* While a scene is being shown the page is not the visitor's yet: a press takes it over and does nothing else. */
.tour[data-state="playing"] .tr-view { cursor: pointer; user-select: none; }
.tour[data-state="playing"] .tr-view > * { pointer-events: none; }

/* ---- the toolbar, as the extension draws it ---- */

.tr-tb { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px;
  background: var(--card); border: 1px solid var(--border); border-radius: 13px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .08); }
.tr-grip { display: grid; place-items: center; padding: 2px 0 3px; }
.tr-grip img { display: block; border-radius: 5px; }
.tr-btn, .tr-swatch { position: relative; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.tr-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tr-btn:hover, .tr-swatch:hover { background: var(--muted); }
.tr-btn[aria-pressed="true"], .tr-btn.open { background: var(--cta); color: var(--cta-fg); box-shadow: inset 0 -2.5px 0 var(--mark); }
.tr-btn kbd { position: absolute; right: 2px; bottom: 1px; font: 600 .5rem/1 var(--ui); color: var(--ink-faint); }
.tr-btn[aria-pressed="true"] kbd { color: color-mix(in srgb, var(--cta-fg) 65%, transparent); }
.tr-sep { width: 22px; height: 1px; margin: 3px 0; background: var(--border); }
.tr-swatch i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1.5px var(--border); }
.tr-badge { position: absolute; top: -3px; right: -4px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: #e5484d; color: #fff; font: 700 .625rem/15px var(--ui); text-align: center; }
.tr-btn.ring svg { transform-origin: 50% 12%; animation: bellring .7s ease; }
@keyframes bellring { 20% { transform: rotate(15deg); } 45% { transform: rotate(-12deg); } 70% { transform: rotate(6deg); } }
.tr-ext { position: relative; flex: none; margin: 0 .15rem 0 .5rem; overflow: visible; }
.tr-ext img { display: block; width: 20px; height: 20px; border-radius: 5px; }
.tr-ext b { position: absolute; right: -7px; bottom: -4px; min-width: 12px; height: 11px; padding: 0 2px; border-radius: 3px; background: #e5484d; color: #fff; font: 700 .5rem/11px var(--ui); text-align: center; }
.tr-ext.ring::after { content: ""; position: absolute; inset: 0; border-radius: 5px; background: linear-gradient(105deg, transparent 30%, var(--mark) 42%, var(--mark) 58%, transparent 70%) 150% 0 / 320% 100% no-repeat; animation: extsweep .75s ease-in-out 2; }
@keyframes extsweep { to { background-position: -50% 0; } }
.tr-stack { display: flex; }
.tr-stack .av { width: 14px; height: 14px; margin-left: -6px; font-size: .40625rem; box-shadow: 0 0 0 1.5px var(--card); }
.tr-stack .av:first-child { margin-left: 0; }
.tr-stack .av.here { box-shadow: 0 0 0 1px var(--card), 0 0 0 2.5px var(--here); }

/* ---- pointers: an arrow in the person's colour and their first name ---- */

.tr-cursors { position: absolute; left: 0; top: 0; width: 100%; height: 0; z-index: 20; pointer-events: none; }
.tr-cur { position: absolute; left: 0; top: 0; z-index: 8; display: flex; align-items: flex-start; opacity: 0; will-change: transform; pointer-events: none;
  transition: transform var(--ms, 760ms) cubic-bezier(.3, .7, .25, 1), opacity .3s ease; }
.tr-cur.on { opacity: 1; }
.tr-cur svg { display: block; flex: none; width: 16px; height: 16px; margin: -1px 0 0 -2px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.tr-cur span { margin: 12px 0 0 -3px; padding: 1px 6px 2px; border-radius: 9px 9px 9px 3px; background: var(--c); color: #fff; font: 600 .65625rem/1.35 var(--ui); white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.tr-cur.tap::after { content: ""; position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--c); animation: curtap .26s ease-out; }
@keyframes curtap { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }

/* ---- pins and notes ---- */

.tr-pin { width: 19px; height: 19px; padding: 0; border: 0; z-index: 6; font: 700 .625rem/19px var(--ui); }
.tr-note { width: 8.75rem; min-height: 3.5rem; z-index: 7; font-size: 1.0625rem; }
.tr-note.editing { box-shadow: 0 0 0 2px var(--c), 0 8px 18px -10px rgba(0, 0, 0, .5); }
.tr-note textarea { display: block; width: 100%; padding: 0; border: 0; outline: 0; resize: none; background: transparent; font: inherit; color: inherit; }

/* ---- popovers: a thread, the bell, people, colours ---- */

.tr-pop { position: absolute; z-index: 14; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .08);
  font: 400 .8125rem/1.4 var(--ui); color: var(--ink); }
.tr-pop button { font: inherit; color: inherit; cursor: pointer; }
.tr-pop .av { width: 20px; height: 20px; font-size: .5625rem; }
.tr-pop input[type="text"], .tr-pop input[type="email"], .tr-pop input[readonly] { flex: 1; min-width: 0; padding: .42rem .55rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--ink); font: inherit; }
.tr-pop input:focus-visible { outline: 2px solid color-mix(in srgb, var(--sel) 45%, transparent); outline-offset: 0; border-color: var(--sel); }
.tr-icon, .tr-th-head button, .tr-pop-head > button:not(.linky) { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); display: grid; place-items: center; flex: none; }
.tr-th-head button svg, .tr-pop-head > button svg, .tr-react svg, .tr-compose button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tr-th-head button:hover, .tr-pop-head > button:not(.linky):hover { background: var(--muted); color: var(--ink); }
.tr-empty { margin: 0; padding: .7rem .75rem; font-size: .78125rem; color: var(--ink-faint); }

.tr-thread { width: 17rem; max-width: calc(100% - 4.5rem); z-index: 9; opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top left; transition: opacity .2s ease, transform .25s cubic-bezier(.2, .9, .3, 1); }
.tr-thread.open { opacity: 1; transform: none; }
.tr-th-head { display: flex; align-items: center; gap: .3rem; padding: .45rem .5rem .45rem .65rem; border-bottom: 1px solid var(--border); }
.tr-th-head b { flex: 1; margin-left: .2rem; font-weight: 600; }
.tr-th-head button.on { color: var(--here); }
.tr-num { width: 20px; height: 20px; border-radius: 50%; background: var(--c); color: #fff; font: 700 .6875rem/20px var(--ui); text-align: center; flex: none; }
.tr-turn { display: flex; align-items: center; gap: .45rem; padding: .35rem .65rem; border-bottom: 1px solid var(--border); background: var(--sunk); font-size: .75rem; font-weight: 600; }
.tr-assign { display: grid; gap: 1px; padding: .4rem; border-bottom: 1px solid var(--border); }
.tr-assign p { margin: .1rem .3rem .3rem; font-size: .75rem; color: var(--ink-soft); }
.tr-assign button, .tr-picker button, .tr-colors button { display: flex; align-items: center; gap: .5rem; padding: .36rem .45rem; border: 0; border-radius: 6px; background: transparent; text-align: left; }
.tr-assign button:hover, .tr-picker button:hover, .tr-picker button.on, .tr-colors button:hover { background: var(--muted); }
.tr-msgs { display: grid; gap: .55rem; max-height: 12.5rem; overflow-y: auto; padding: .6rem .65rem .35rem; }
.tr-msgs .tr-empty { padding: .1rem 0 .3rem; }
.tr-msg { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem; }
.tr-msg.new { animation: pop .25s cubic-bezier(.2, .9, .3, 1); }
.tr-msg .who { display: block; font-size: .6875rem; font-weight: 600; color: var(--ink-soft); }
.tr-msg .who i { margin-left: .4rem; font-style: normal; font-weight: 400; color: var(--ink-faint); }
.tr-msg .txt { overflow-wrap: anywhere; }
.tr-msg .at { padding: 0 .22em; border-radius: 4px; background: color-mix(in srgb, var(--sel) 13%, transparent); color: var(--sel); font-weight: 600; }
.tr-react { position: absolute; right: 0; top: -2px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px; background: var(--card); color: var(--ink-faint); display: grid; place-items: center; opacity: 0; }
.tr-msg:hover .tr-react, .tr-react:focus-visible { opacity: 1; }
@media (hover: none) { .tr-react { opacity: .7; } }
.tr-reacts { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .3rem; }
.tr-chip { padding: .05rem .42rem; border: 1px solid var(--border); border-radius: 999px; background: var(--sunk); font-size: .75rem; }
.tr-chip.mine { border-color: var(--sel); }
.tr-chip.pick { background: var(--card); }
.tr-typing { padding: 0 .65rem .35rem; font-size: .6875rem; font-style: italic; color: var(--ink-faint); }
.tr-typing:empty, .tr-status:empty { display: none; }
.tr-picker { display: grid; margin: 0 .5rem .4rem; padding: .2rem; border: 1px solid var(--border); border-radius: 9px; }
.tr-picker b { font-weight: 500; white-space: nowrap; }
.tr-picker .inv { color: var(--sel); }
.tr-picker button > span:last-child { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .6875rem; color: var(--ink-faint); }
.tr-check { display: flex; align-items: flex-start; gap: .5rem; padding: .45rem .65rem; cursor: pointer; }
.tr-check input { flex: none; margin: .18rem 0 0; accent-color: var(--primary); }
.tr-check b { display: block; font-size: .78125rem; font-weight: 600; }
.tr-check small { display: block; font-size: .71875rem; line-height: 1.4; color: var(--ink-soft); }
.tr-widen { border-top: 1px solid var(--border); background: var(--sunk); }
.tr-compose { display: flex; gap: .35rem; padding: .5rem .55rem; border-top: 1px solid var(--border); }
.tr-compose button { width: 32px; flex: none; padding: 0; border: 0; border-radius: 8px; background: var(--primary); color: var(--primary-fg) !important; display: grid; place-items: center; }
.tr-status { padding: 0 .65rem .5rem; font-size: .6875rem; color: var(--ink-faint); }

.tr-bell, .tr-people { right: 62px; top: 8px; width: 21rem; max-width: calc(100% - 72px); max-height: calc(100% - 16px); display: flex; flex-direction: column; overflow: hidden; animation: slidein .25s cubic-bezier(.2, .9, .3, 1); }
.tr-pop-head { display: flex; align-items: center; gap: .6rem; padding: .5rem .5rem .5rem .75rem; border-bottom: 1px solid var(--border); }
.tr-pop-head > b { flex: 1; font-size: .875rem; font-weight: 600; }
.tr-tabs { display: flex; gap: .2rem; padding: .4rem .5rem; border-bottom: 1px solid var(--border); }
.tr-pop-head .tr-tabs { flex: 1; padding: 0; margin-left: -.25rem; border: 0; }
.tr-tabs button { padding: .3rem .55rem; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft) !important; font-weight: 500; }
.tr-tabs button[aria-selected="true"] { background: var(--muted); color: var(--ink) !important; font-weight: 600; }
.tr-tabs i { margin-left: .35rem; padding: 0 .3rem; border-radius: 8px; background: #e5484d; color: #fff; font: 700 .625rem/1.5 var(--ui); }
.tr-rows { overflow-y: auto; }
.tr-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .55rem; width: 100%; padding: .6rem 1.7rem .6rem .75rem; border: 0; border-bottom: 1px solid var(--border); background: transparent; text-align: left; }
.tr-row:last-child { border-bottom: 0; }
.tr-row:hover { background: var(--sunk); }
.tr-row .av { grid-row: span 3; margin-top: .1rem; }
.tr-row .l, .tr-row .pv, .tr-row .wh { grid-column: 2; }
.tr-row .l { display: flex; align-items: baseline; gap: .5rem; }
.tr-row .l b { font-weight: 500; }
.tr-row.unread .l b { font-weight: 650; }
.tr-row time { margin-left: auto; font-size: .6875rem; color: var(--ink-faint); }
.tr-row .pv { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--ink-soft); }
.tr-row .wh { font-size: .71875rem; color: var(--ink-faint); }
.tr-row .dot { position: absolute; right: .7rem; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #e5484d; }

.tr-pbody { display: grid; gap: .25rem; padding: .55rem .7rem .65rem; overflow-y: auto; }
.tr-add, .tr-link { display: flex; gap: .35rem; }
.tr-add button { padding: 0 .7rem; border: 1px solid var(--border); border-radius: 8px; background: var(--sunk); font-weight: 600; }
.tr-link input { font: .71875rem/1.2 var(--mono) !important; color: var(--ink-soft) !important; }
.tr-link button { padding: 0 .7rem; border: 0; border-radius: 8px; background: var(--primary); color: var(--primary-fg) !important; font-weight: 600; white-space: nowrap; }
.tr-sub { margin: .3rem 0 0; font-size: .6875rem; font-weight: 600; color: var(--ink-faint); }
.tr-sub span { margin-left: .4rem; font-weight: 400; }
.tr-person { display: flex; align-items: center; gap: .5rem; padding: .12rem 0; line-height: 1.3; }
.tr-person .nm { flex: 1; min-width: 0; display: grid; }
.tr-person .nm b, .tr-person .nm i { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-person .nm b { font-weight: 550; }
.tr-person .nm i { font-style: normal; font-size: .6875rem; color: var(--ink-faint); }
.tr-follow { padding: .16rem .55rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; font-size: .71875rem; font-weight: 600; color: var(--ink-soft) !important; }
.tr-follow.on { border-color: var(--cta); background: var(--cta); color: var(--cta-fg) !important; }
.tr-tag { padding: .2rem .45rem; border: 1px solid var(--border); border-radius: 6px; background: var(--sunk); font-size: .71875rem; white-space: nowrap; }
button.tr-tag::after { content: ""; display: inline-block; margin: 0 0 .15em .4em; border: 3.5px solid transparent; border-top: 4px solid var(--ink-faint); border-bottom: 0; }
.tr-tag.plain { border-color: transparent; background: transparent; color: var(--ink-faint); }
.tr-opts { display: grid; margin: 0 0 .3rem 1.75rem; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; animation: pop .18s ease-out; }
.tr-opts button { padding: .38rem .6rem; border: 0; background: transparent; text-align: left; font-size: .78125rem; }
.tr-opts button:hover { background: var(--muted); }
.tr-opts .danger { border-top: 1px solid var(--border); color: #dc2626 !important; }
.tr-live { display: flex; gap: .5rem; margin: .3rem 0 .1rem; padding: .4rem .6rem; border-radius: 8px; background: var(--sunk); font-size: .75rem; line-height: 1.45; color: var(--ink-soft); }
.tr-live i { flex: none; width: 8px; height: 8px; margin-top: .32rem; border-radius: 50%; background: var(--ink-faint); }
.tr-live.on i { background: var(--here); }
.tr-people .tr-check { padding: .2rem 0; }
.tr-fine { display: flex; align-items: baseline; gap: .8rem; margin: .3rem 0 0; font-size: .71875rem; color: var(--ink-faint); }
.tr-colors { right: 62px; display: grid; padding: .3rem; animation: slidein .2s ease-out; }
.tr-colors i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); }
/* A finger on a field smaller than 16px makes the phone zoom the whole page. */
@media (pointer: coarse) { .tr-pop input[type="text"], .tr-pop input[type="email"], .tr-note textarea { font-size: 16px; } }

.tr-pill { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); z-index: 15; display: flex; align-items: center; gap: .6rem; padding: .3rem .3rem .3rem .85rem; border-radius: 999px;
  background: #16181d; color: #fff; font: 600 .78125rem/1 var(--ui); white-space: nowrap; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5); }
.tr-pill button { padding: .32rem .65rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .2); color: inherit; font: inherit; cursor: pointer; }
.tr-toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 16; display: flex; align-items: center; gap: .75rem; max-width: calc(100% - 5rem); padding: .55rem .85rem; border-radius: 9px;
  background: #16181d; color: #fff; font: 500 .8125rem/1.3 var(--ui); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5); animation: toastin .3s cubic-bezier(.2, 1.1, .4, 1); }
.tr-toast button { padding: .28rem .6rem; border: 0; border-radius: 6px; background: rgba(255, 255, 255, .2); color: inherit; font: 600 .78125rem/1 var(--ui); cursor: pointer; }

/* ================= features ================= */

.feats .cell { padding: 1.5rem 1.5rem 1.75rem; }
.feats .tile { margin-bottom: 1.35rem; }
.feats h3 { font-size: 1.125rem; font-weight: 500; letter-spacing: -.01em; margin-bottom: .5rem; }
.feats p { font-size: .8125rem; line-height: 1.6; }
/* Eight of them in one column is a long way to scroll on a phone: two abreast there. */
@media (max-width: 34rem) {
  .feats.cells { --cols: 2 !important; }
  .feats .cell { padding: 1.1rem 1rem 1.25rem; }
  .feats .tile { margin-bottom: .9rem; }
  .feats h3 { font-size: 1rem; }
}

/* ================= everything lands on the page ================= */

/* Marks from everyone, drawn in towards the one page they are all on. */
.orbit { position: relative; height: 37rem; overflow: hidden; background: radial-gradient(closest-side, color-mix(in srgb, var(--fg) 3.5%, transparent), transparent); }
.orbit .ring { position: absolute; left: 50%; top: 50%; border: 1px solid var(--border); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit .ring.a { width: 33rem; height: 33rem; border-color: color-mix(in srgb, var(--muted-fg) 32%, var(--border)); background: color-mix(in srgb, var(--fg) 1.2%, transparent); }
.orbit .ring.b { width: 16rem; height: 16rem; background: color-mix(in srgb, var(--fg) 1.5%, transparent); }
.orbit .ring.c { width: 8.75rem; height: 8.75rem; border-style: dashed; border-color: color-mix(in srgb, var(--muted-fg) 70%, transparent); animation: spin 40s linear infinite; }
.orbit .glow { position: absolute; left: 50%; top: 50%; width: 11rem; height: 11rem; transform: translate(-50%, -50%); border-radius: 50%; filter: blur(30px); opacity: .34;
  background: conic-gradient(from 20deg, #ffe45c, #7aa2ff, #f472b6, #5ee9b5, #ffe45c); }
.orbit .core { position: absolute; left: 50%; top: 50%; width: 5.5rem; height: 5.5rem; transform: translate(-50%, -50%); border-radius: 24%; box-shadow: 0 0 0 1px var(--border), 0 16px 34px -14px rgba(0, 0, 0, .55); animation: core 3.6s ease-in-out infinite; }
.orbit .core img { display: block; width: 100%; height: 100%; border-radius: inherit; }
@keyframes core { 50% { transform: translate(-50%, -50%) scale(1.07); } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.chip { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; gap: .45rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: var(--shadow), 0 10px 24px -18px rgba(9, 9, 11, .4);
  font-size: .8125rem; font-weight: 500; color: var(--fg); white-space: nowrap; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r, 0deg));
  animation: pull var(--t, 9s) cubic-bezier(.45, 0, .7, .4) var(--d, 0s) infinite backwards; }
@keyframes pull {
  0% { opacity: 0; transform: translate(calc(-50% + var(--x) * 1.08), calc(-50% + var(--y) * 1.08)) rotate(var(--r, 0deg)) scale(1.06); }
  9%, 46% { opacity: 1; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r, 0deg)) scale(1); }
  82% { opacity: 1; transform: translate(calc(-50% + var(--x) * .42), calc(-50% + var(--y) * .42)) rotate(calc(var(--r, 0deg) * -1)) scale(.82); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.25); }
}
.chip .ico { width: 15px; height: 15px; }
.chip.hl { display: grid; gap: .4rem; padding: .7rem .8rem; }
.chip.hl i { display: block; width: 6.5rem; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--muted-fg) 45%, var(--muted)); }
.chip.hl i:nth-child(2) { box-shadow: 0 0 0 5px color-mix(in srgb, #eab308 40%, transparent); background: color-mix(in srgb, var(--muted-fg) 70%, var(--muted)); width: 7.5rem; }
.chip.hl i:nth-child(3) { width: 5rem; }
.chip.slip { padding: .45rem .65rem .55rem; border-color: #f1e37e; border-radius: 2px; background: #f7efb6; font: 600 1.0625rem/1.15 var(--hand); color: #16181d; }
.chip.ask { align-items: flex-start; gap: .5rem; padding: .55rem .7rem .6rem .55rem; font-weight: 400; }
.chip.ask .p { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border-radius: 50% 50% 50% 2px; background: #e5484d; color: #fff; font: 700 .625rem/1 var(--ui); }
.chip .at { padding: 0 .22em; border-radius: 4px; background: color-mix(in srgb, var(--sel) 13%, transparent); color: var(--sel); font-weight: 600; }
.chip.cur { padding: 0; border: 0; background: none; box-shadow: none; align-items: flex-start; gap: 0; }
.chip.cur svg { flex: none; width: 18px; height: 18px; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.chip.cur span { margin: 13px 0 0 -3px; padding: 2px 8px 3px; border-radius: 10px 10px 10px 3px; background: var(--c); color: #fff; font-size: .75rem; font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.chip.bell { position: absolute; padding: .65rem; border-radius: 14px; }
.chip.bell b { position: absolute; top: -5px; right: -6px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff; font: 700 .6875rem/17px var(--ui); text-align: center; }
.chip.ok .ico { color: var(--here); }
.chip.ok, .chip.link { border-radius: 999px; padding: .5rem .85rem .5rem .7rem; }
/* The whole picture is drawn at one size and scaled to the room there is. */
.orbit-in { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
@media (max-width: 56rem) { .orbit { height: 29rem; } .orbit-in { transform: scale(.78); } }
@media (max-width: 40rem) { .orbit { height: 20rem; } .orbit-in { transform: scale(.5); } }

/* ================= on the page at the same time ================= */

/* One page with three people on it, played by js/live.js: they arrive, one highlights, one asks
   and is answered, and then the view follows him down the page. The line of the list that is
   being shown is lit. */
.live-sec { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.live-sec > .art { min-height: 34rem; }
.live-steps li { transition: color .3s ease; }
.live-steps li::before { transition: background .3s ease, transform .3s ease; }
.live-steps li.on { color: var(--fg); font-weight: 500; }
.live-steps li.on::before { background: var(--primary); transform: scale(1.6); }

.live { position: relative; width: min(31rem, 100%); border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: var(--lift); overflow: hidden; }
.live .who { display: flex; align-items: center; gap: .5rem; height: 3rem; padding: 0 1rem 0 1.1rem; border-bottom: 1px solid var(--border); font-size: .75rem; font-weight: 500; color: var(--soft); }
.live .who > i { width: 7px; height: 7px; border-radius: 50%; background: var(--here); }
/* Newcomers join on the left of whoever is already there. */
.live .who .stack { display: flex; flex-direction: row-reverse; margin-left: auto; }
.live .who .av { width: 24px; height: 24px; margin-left: -5px; font-size: .5625rem; box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--here); transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), opacity .25s ease; }
.live .who .av.p, .live .who .av.d { transform: scale(0); opacity: 0; }
.live.p-in .who .av.p, .live.d-in .who .av.d { transform: none; opacity: 1; }

.live .pg { position: relative; height: 19.5rem; overflow: hidden; transition: box-shadow .35s ease; }
.live.follow .pg { box-shadow: inset 0 0 0 2px #0ca678; }
.live .sheet { position: relative; padding: 1.3rem 1.4rem; transition: transform 1.2s cubic-bezier(.3, .7, .2, 1), opacity .35s ease; }
.live.fading .sheet { opacity: 0; }
.live .ln { position: relative; height: 7px; margin-bottom: .78rem; border-radius: 4px; background: var(--muted); }
.live .ln.t, .live .ln.t2 { width: 46%; height: 11px; margin-bottom: 1.1rem; background: color-mix(in srgb, var(--muted-fg) 35%, var(--muted)); }
.live .ln.t2 { width: 38%; margin-top: 1.5rem; }
.live .ln.s { width: 64%; }
.live .ln.m, .live .ln.f, .live .ln.g { width: 82%; }
.live .ln.c { width: 72%; }
.live .ln.m::before { content: ""; position: absolute; inset: -6px -5px; border-radius: 4px; background: color-mix(in srgb, #7c3aed 26%, transparent); transform: scaleX(0); transform-origin: left; }
.live.hl .ln.m { background: color-mix(in srgb, var(--muted-fg) 45%, var(--muted)); }
.live.hl .ln.m::before { transform: scaleX(1); transition: transform .8s cubic-bezier(.3, .7, .25, 1); }
.live .pin { position: absolute; left: -7px; top: -21px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50% 50% 50% 2px; background: #0ca678; color: #fff; font: 700 .625rem/1 var(--ui);
  box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .5); transform: scale(0); }
.live.pin-on .pin { transform: scale(1); transition: transform .4s cubic-bezier(.2, 1.4, .4, 1); }

.live .th { position: absolute; left: 1.4rem; z-index: 3; width: 15.5rem; border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--lift); font-size: .75rem; line-height: 1.4;
  opacity: 0; transform: translateY(-4px) scale(.97); transform-origin: top left; transition: opacity .25s ease, transform .3s cubic-bezier(.2, .9, .3, 1); }
.live.th-on .th { opacity: 1; transform: none; }
.live .th .m { display: none; grid-template-columns: auto 1fr; gap: .05rem .5rem; padding: .55rem .7rem; }
.live.m1 .th .m1, .live.m2 .th .m2 { display: grid; animation: pop .3s cubic-bezier(.2, .9, .3, 1); }
.live .th .m + .m, .live.m1 .th .ty { border-top: 1px solid var(--border); }
.live .th .av { grid-row: span 2; width: 20px; height: 20px; margin-top: .1rem; font-size: .5rem; }
.live .th b { font-size: .6875rem; font-weight: 600; color: var(--fg); }
.live .th .m > span:last-child { color: var(--soft); }
.live .th .ty { display: none; align-items: center; gap: .25rem; padding: .5rem .7rem; font-size: .6875rem; font-style: italic; color: var(--muted-fg); }
.live.ty-on .th .ty { display: flex; }
.live .th .ty em { display: inline-flex; gap: 3px; margin-left: .25rem; }
.live .th .ty em i { width: 4px; height: 4px; border-radius: 50%; background: var(--muted-fg); animation: dot 1.1s infinite; }
.live .th .ty em i:nth-child(2) { animation-delay: .18s; }
.live .th .ty em i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }

.live .cur { position: absolute; left: 0; top: 0; z-index: 4; display: flex; align-items: flex-start; opacity: 0; pointer-events: none; transition: transform .8s cubic-bezier(.3, .7, .25, 1), opacity .3s ease; }
.live.p-in .cur.p, .live.d-in .cur.d { opacity: 1; }
.live .cur svg { width: 17px; height: 17px; flex: none; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); }
.live .cur span { margin: 12px 0 0 -3px; padding: 1px 7px 2px; border-radius: 9px 9px 9px 3px; background: var(--c); color: #fff; font-size: .6875rem; font-weight: 600; white-space: nowrap; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }

.live .pill { position: absolute; left: 50%; top: 3.6rem; z-index: 5; display: flex; align-items: center; gap: .4rem; padding: .28rem .75rem .28rem .32rem; border-radius: 999px; background: #16181d; color: #fff;
  font-size: .75rem; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .5); opacity: 0; transform: translate(-50%, -8px); transition: opacity .3s ease, transform .3s ease; }
.live.follow .pill { opacity: 1; transform: translate(-50%, 0); }
.live .pill .av { width: 18px; height: 18px; }
@media (max-width: 52rem) { .live-sec { grid-template-columns: 1fr; } .live-sec > .art { min-height: 27rem; } }

/* ================= who sees what ================= */

/* Your page on the left, the same page as the other person gets it on the right, and between
   them what crosses over. The ways to share are listed beside it, each with its own settings;
   until the visitor picks one they are shown in turn. */
.see { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); border-top: 1px solid var(--border); }
.see-panel { display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--sunk); }
#f-see { flex: 1; aspect-ratio: auto; padding: 1.5rem; border: 0; border-radius: 0; background: none; overflow: visible; }
#f-see .frame-body { position: static; overflow: visible; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr); }
.mini-win { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); box-shadow: var(--shadow); }
.mini-bar { display: flex; align-items: center; gap: .45rem; padding: .5rem .6rem .5rem .7rem; border-bottom: 1px solid var(--border); font-size: .75rem; font-weight: 600; color: var(--soft); }
.mini-bar .see-whose { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.see-count { margin-left: auto; padding: .08rem .5rem; border-radius: 999px; background: var(--muted); font-style: normal; font-size: .6875rem; font-weight: 500; color: var(--muted-fg); white-space: nowrap; transition: background .3s ease, color .3s ease; }
.see-count.some { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--sel); }
.mini-body { position: relative; flex: 1; padding: .85rem .9rem 9.5rem; font-size: .8125rem; line-height: 1.6; color: var(--soft); }
.mini-body p { margin-bottom: .6rem; }

/* What crosses from one page to the other: nothing, behind a lock, or the thing that was chosen. */
.see-flow { position: relative; display: grid; place-items: center; }
.see-flow::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px dashed color-mix(in srgb, var(--muted-fg) 55%, transparent); }
.see-flow.open::before { border-top: 1.5px solid var(--primary); }
.see-flow > i { position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--primary); opacity: 0; }
.see-flow.go > i { animation: seego .7s ease-in-out; }
@keyframes seego { from { left: 0; opacity: 1; } to { left: 100%; opacity: 1; } }
.see-node { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--muted-fg); box-shadow: var(--shadow);
  transition: background .25s ease, color .25s ease, border-color .25s ease; }
.see-node .ico { width: 15px; height: 15px; }
.see-flow.open .see-node { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.see-flow.go .see-node { animation: seepop .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes seepop { from { transform: scale(.7); } }

/* The marks on the other person's side are all there; the ones they are not shown have no colour. */
.see-m { border-radius: .18em; padding: .04em 0; background: color-mix(in srgb, var(--c) 34%, transparent); transition: background .45s ease; }
.see-pin { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 2px; border-radius: 50% 50% 50% 2px; background: #e5484d; color: #fff; font: 700 .5625rem/1 var(--ui); font-style: normal; vertical-align: 1px;
  transition: transform .35s cubic-bezier(.2, 1.3, .4, 1), margin .35s ease, width .35s ease; }
.see-note { position: absolute; right: .9rem; bottom: 6.3rem; width: 6.6rem; padding: .35rem .45rem; transform: rotate(2deg); background: #f7efb6; border: 1px solid #f1e37e; border-radius: 2px;
  font: 600 .9375rem/1.2 var(--hand); color: #16181d; box-shadow: 0 6px 14px -9px rgba(0, 0, 0, .55); transition: opacity .4s ease .1s, transform .4s cubic-bezier(.2, 1.2, .4, 1) .1s; }
.see-card { position: absolute; left: .7rem; right: .7rem; bottom: .7rem; padding: .45rem .55rem; border: 1px solid var(--border); border-radius: 9px; background: var(--card); font-size: .71875rem; line-height: 1.4; color: var(--fg);
  box-shadow: 0 10px 22px -16px rgba(0, 0, 0, .6); transition: opacity .4s ease, transform .4s ease; }
.see-card .at { color: var(--sel); font-weight: 600; }
.see-card small { display: block; margin-top: .3rem; padding-top: .3rem; border-top: 1px solid var(--border); font-size: .6875rem; color: var(--muted-fg); }
.see-theirs .hide.see-m { background: transparent; }
.see-theirs .hide.see-pin { transform: scale(0); width: 0; margin: 0; }
.see-theirs .hide.see-note, .see-theirs .hide.see-card { opacity: 0; transform: translateY(6px); }
.see-theirs .none { position: absolute; left: .9rem; right: .9rem; bottom: .9rem; margin: 0; font-size: .75rem; line-height: 1.4; color: var(--muted-fg); transition: opacity .3s ease; }
.see-theirs .none.hide { opacity: 0; }

/* The sentence the extension shows before it shares. */
.see-say { display: flex; align-items: center; gap: .75rem; min-height: 4.5rem; padding: .8rem 1.5rem; border-top: 1px solid var(--border); background: var(--bg); }
.see-say .ico { width: 17px; height: 17px; color: var(--muted-fg); }
.see-say p { font-size: .9375rem; line-height: 1.45; color: var(--fg); }

.see-opts { display: flex; flex-direction: column; }
.see-opt { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; border-bottom: 1px solid var(--border); transition: background .2s ease; }
.see-opt:last-child { border-bottom: 0; }
.see-opt > button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 .9rem; align-items: center; width: 100%; padding: 1.15rem 1.5rem; border: 0; background: none; text-align: left; color: var(--muted-fg); cursor: pointer; }
.see-opt .tile { grid-row: span 2; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.see-opt b { font-size: .9375rem; font-weight: 600; color: var(--fg); }
.see-opt button > span:not(.tile) { grid-column: 2; font-size: .8125rem; line-height: 1.4; }
.see-opt em { grid-column: 3; grid-row: 1 / span 2; padding: .12rem .55rem; border: 1px solid var(--border); border-radius: 999px; font-style: normal; font-size: .6875rem; font-weight: 500; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.see-opt:hover { background: var(--sunk); }
.see-opt.on { background: var(--sunk); box-shadow: inset 3px 0 0 var(--primary); }
.see-opt.on .tile { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.see-opt.on em { border-color: color-mix(in srgb, var(--primary) 35%, transparent); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--sel); }
/* While they are being shown in turn, a line under the lit one counts down to the next. */
#see[data-auto] .see-opt.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--primary); transform-origin: left; animation: seefill var(--dwell, 3.6s) linear both; }
@keyframes seefill { from { transform: scaleX(0); } }
.see-more { margin-top: -.45rem; padding: 0 .75rem 1.1rem 4.65rem; font-size: .8125rem; line-height: 1.9; color: var(--soft); }
.see-more:empty { display: none; }
.see-more label { display: inline-flex; align-items: center; gap: .45rem; line-height: 1.4; cursor: pointer; }
.see-more input { accent-color: var(--primary); }
.see-more select { margin: 0 .1rem; padding: .15rem .3rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--fg); font: 600 .78125rem/1.2 var(--ui); }
@media (max-width: 56rem) {
  .see { grid-template-columns: 1fr; }
  .see-panel { border-right: 0; border-top: 1px solid var(--border); order: 2; }
}
@media (max-width: 34rem) {
  #f-see { padding: 1rem; }
  .pair { grid-template-columns: 1fr; }
  .see-flow { height: 3.25rem; }
  .see-flow::before { left: 50%; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 1.5px dashed color-mix(in srgb, var(--muted-fg) 55%, transparent); }
  .see-flow.open::before { border-top: 0; border-left: 1.5px solid var(--primary); }
  .see-flow > i { display: none; }
  .see-opt em { display: none; }
  .see-more { padding-left: 1.5rem; }
}

/* ================= the recording: a demo people can click ================= */

/* Laid out like the tour at the top of the page: the two halves of the trick as pills, the
   recorded app in a browser window, and under it one line that says what is happening. */
.stage { padding: 0 var(--pad) 2.75rem; }
.phases { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; }
.phases li { display: inline-flex; align-items: center; gap: .5rem; height: 2.25rem; padding: 0 .95rem 0 .4rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card); box-shadow: var(--shadow);
  color: var(--soft); font-size: .875rem; font-weight: 500; transition: background .3s ease, color .3s ease, border-color .3s ease; }
.phases b { font-weight: inherit; white-space: nowrap; }
.ph-n { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--muted); font-size: .75rem; font-weight: 600; color: var(--soft); transition: background .3s ease, color .3s ease; }
.phases[data-phase="1"] li[data-p="1"], .phases[data-phase="2"] li[data-p="2"] { background: var(--cta); border-color: var(--cta); color: var(--cta-fg); }
.phases[data-phase="1"] li[data-p="1"] .ph-n { background: var(--primary); color: var(--primary-fg); }
.phases[data-phase="2"] li[data-p="2"] .ph-n { background: var(--here); color: #fff; }

.stage-card { border: 1px solid var(--border); border-radius: 16px; background: var(--card); box-shadow: var(--lift); overflow: hidden; transition: border-color .4s ease; }
.stage-card .frame { border: 0; border-radius: 0; }
/* Short enough that the app, its two pills and the line under it are all on a laptop's screen at once. */
#f-stage { aspect-ratio: auto; height: 32.5rem; }
.stage[data-state="live"] .stage-card { border-color: color-mix(in srgb, var(--here) 45%, var(--border)); }
.stage:not([data-state="live"]) .screen { user-select: none; cursor: pointer; }
/* The children are inert during playback so nothing can be typed into or navigated, but the
   screen itself must stay hit-testable: clicking it is how a viewer takes over early. */
.stage:not([data-state="live"]) .screen > * { pointer-events: none; }
.stage[data-state="live"] .screen { cursor: default; }

/* The third shadow is the dimming a note casts. It is always there and only its colour changes,
   so it fades in and out instead of being seen to shrink across the page. */
.hotspot { position: absolute; border-radius: 7px; opacity: 0; pointer-events: none; z-index: 5; box-shadow: 0 0 0 2px rgba(229, 72, 77, .55), 0 0 0 7px rgba(229, 72, 77, .14), 0 0 0 9999px rgba(26, 31, 54, 0); transition: all .5s cubic-bezier(.32, .72, .28, 1); }
/* the sweep that says: everything the author used is live now */
.scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 7; background: linear-gradient(105deg, transparent 42%, rgba(20, 71, 230, .2) 50%, transparent 58%); }
.scan.go { opacity: 1; animation: scan .72s ease-in-out; }
@keyframes scan { from { transform: translateX(-105%); } to { transform: translateX(105%); } }
/* the "press play" veil, before anything has happened */
.glass { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(1.5px); transition: opacity .45s ease, visibility .45s; }
.stage[data-state="playing"] .glass, .stage[data-state="live"] .glass, .stage[data-state="paused"] .glass { opacity: 0; visibility: hidden; }
.bigplay { display: inline-flex; align-items: center; gap: .55rem; padding: .8rem 1.4rem; border: 0; border-radius: 999px; background: var(--cta); color: var(--cta-fg); font: 500 .9375rem/1 var(--ui); cursor: pointer; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .6); }
.bigplay svg { width: 15px; height: 15px; fill: currentColor; }

/* The line under the app. While it plays this is the player: play, how far along, and a way to
   take over. Once the page is the viewer's it only says so. */
.bar { position: relative; z-index: 9; display: flex; align-items: center; gap: .7rem; min-height: 3.5rem; padding: .6rem .75rem .6rem 1rem; border-top: 1px solid var(--border); background: var(--sunk);
  font-size: .9375rem; line-height: 1.45; transition: background .4s ease; }
.stage[data-state="live"] .bar { background: color-mix(in srgb, var(--here) 7%, var(--bg)); }
.bar-play { display: grid; place-items: center; width: 30px; height: 30px; flex: none; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--card); color: var(--fg); box-shadow: var(--shadow); cursor: pointer; }
.bar-play svg { width: 12px; height: 12px; margin-left: 1px; fill: currentColor; }
.bar-play.is-playing svg { display: none; }
.bar-play.is-playing::after { content: ""; width: 8px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.bar .tour-dot { display: none; background: var(--here); }
.bar-say { flex: 1; }
.bar-say span, .bar #takeover, .bar #replay { display: none; }
.stage[data-state="idle"] .bar-say [data-s="idle"], .stage[data-state="playing"] .bar-say [data-s="playing"],
.stage[data-state="paused"] .bar-say [data-s="paused"], .stage[data-state="live"] .bar-say [data-s="live"] { display: inline; }
.stage[data-state="playing"] #takeover, .stage[data-state="live"] #replay { display: block; }
.stage[data-state="live"] .bar-play, .stage[data-state="live"] .time { display: none; }
.stage[data-state="live"] .bar .tour-dot { display: block; }
.bar #replay { margin-right: .4rem; }
.time { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--muted-fg); }
/* How far along it is, drawn on the strip's top edge, with a chapter for every recorded step:
   a press on one drops you in after it. */
.track-wrap { position: absolute; left: 0; right: 0; top: -2px; height: 3px; transition: opacity .3s ease; }
.track { position: absolute; inset: 0; background: var(--border); overflow: hidden; }
.fill { height: 100%; width: 0; background: var(--primary); transition: width .35s linear; }
.chapters { position: absolute; inset: 0; pointer-events: none; }
.tick { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; padding: 0; border: 2px solid var(--card); border-radius: 50%; background: var(--muted-fg); cursor: pointer; pointer-events: auto; transition: transform .15s ease, background .25s ease; }
.tick:hover, .tick:focus-visible { transform: scale(1.3); background: var(--fg); }
.tick.done { background: var(--primary); }
/* The last one stands on the end of the line, which is the edge of the card: it is kept inside it. */
.tick:last-child { margin-left: -14px; }
.stage[data-state="live"] .track-wrap { opacity: 0; pointer-events: none; }
.stage[data-state="live"] .tick { pointer-events: none; }
/* 16:10 of a phone is a strip too short for a dashboard. The sidebar goes and the table drops its
   wider columns there, so the frame gets the height the page needs instead. */
@media (max-width: 62rem) { #f-stage { height: 34rem; } }
@media (max-width: 44rem) {
  #f-stage { height: 36rem; }
  .bar { flex-wrap: wrap; font-size: .875rem; }
  .bar-say { flex-basis: calc(100% - 3rem); }
  .bar .time { margin-left: auto; }
}

/* ---- the recorded app: a payments dashboard ---- */

/* Drawn to the pixel like the dashboard it stands in for, in px rather than the page's rem, so it
   reads as an app someone was using and not as a diagram of one. Always light: it is a page that
   was recorded, and the recording keeps the colour scheme the author had. */
.screen {
  --sd-ink: #30313d; --sd-text: #353a44; --sd-mute: #687385; --sd-faint: #87909f;
  --sd-line: #e3e8ee; --sd-line2: #ebeef1; --sd-sunk: #f6f8fa; --sd-hover: #f0f2f5;
  --sd-purple: #2563eb; --sd-purple-dk: #1447e6; --sd-purple-bg: #e8effe;
  --sd-green: #006908; --sd-green-bg: #d7f7c2; --sd-red: #b3093c; --sd-red-bg: #ffe7f2;
  --sd-gray: #545969; --sd-gray-bg: #ebeef1; --sd-orange: #c84801; --sd-orange-bg: #ffe0c2;
  --sd-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  position: relative; display: flex; height: 100%; background: #fff; color: var(--sd-text);
  font: 400 14px/1.4 var(--sd-font); letter-spacing: -.005em; text-align: left;
}
.screen svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.screen a { color: inherit; text-decoration: none; cursor: pointer; }
.screen button { font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; }

.sd-side { width: 204px; flex: none; display: flex; flex-direction: column; background: var(--sd-sunk); border-right: 1px solid var(--sd-line2); padding: 12px 10px 10px; }
.sd-acct { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; font-weight: 600; font-size: 14px; color: var(--sd-ink); text-align: left; }
.sd-acct:hover { background: var(--sd-hover); }
.sd-acct-logo { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: #1a1f36; color: #fff; font-size: 12px; font-weight: 700; }
.sd-acct-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-acct svg { width: 14px; height: 14px; color: var(--sd-faint); }
.sd-nav { display: flex; flex-direction: column; gap: 1px; margin-top: 14px; }
.sd-nav a, .sd-side-foot a { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; font-weight: 500; font-size: 14px; color: var(--sd-text); }
.sd-nav a svg, .sd-side-foot a svg { color: var(--sd-mute); }
.sd-nav a:hover, .sd-side-foot a:hover { background: var(--sd-hover); }
.sd-nav a.on { color: var(--sd-purple-dk); background: transparent; }
.sd-nav a.on svg { color: var(--sd-purple-dk); }
.sd-navgroup { margin: 14px 8px 4px; font-size: 12px; font-weight: 600; color: var(--sd-mute); }
.sd-side-foot { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sd-line2); display: flex; flex-direction: column; gap: 1px; }

.sd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.sd-top { display: flex; align-items: center; gap: 12px; height: 50px; padding: 0 24px; flex: none; }
.sd-search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 1px solid var(--sd-line); border-radius: 6px; color: var(--sd-mute); font-size: 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, .03); cursor: text; }
.sd-search span { flex: 1; }
.sd-search kbd { font: 500 11px/1 var(--sd-font); color: var(--sd-mute); border: 1px solid var(--sd-line); border-radius: 4px; padding: 3px 5px; background: var(--sd-sunk); }
.sd-topright { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sd-testmode { display: inline-flex; align-items: center; gap: 8px; margin-right: 8px; font-size: 13px; font-weight: 500; color: var(--sd-mute); cursor: pointer; }
.sd-testmode i { width: 28px; height: 16px; border-radius: 10px; background: #d5dbe1; position: relative; }
.sd-testmode i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.sd-iconbtn { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--sd-mute); }
.sd-iconbtn:hover { background: var(--sd-hover); color: var(--sd-ink); }
.sd-createbtn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; margin-left: 4px; border: 1px solid var(--sd-line); border-radius: 6px; background: #fff; font-weight: 500; font-size: 14px; color: var(--sd-ink); box-shadow: 0 1px 1px rgba(0, 0, 0, .04); }
.sd-createbtn:hover { background: var(--sd-sunk); }
.sd-ava { width: 28px; height: 28px; margin-left: 8px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #5b8cff, #1447e6); color: #fff; font-size: 11px; font-weight: 600; }

.sd-view { flex: 1; min-height: 0; overflow: auto; padding: 6px 24px 0; }
.sd-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.sd-pagehead .sd-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--sd-ink); }
.sd-btns { display: flex; align-items: center; gap: 8px; }
.sd-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--sd-line); border-radius: 6px; background: #fff; font-weight: 500; font-size: 14px; color: var(--sd-ink); box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 2px 5px rgba(60, 66, 87, .06); white-space: nowrap; }
.sd-btn:hover { background: var(--sd-sunk); }
.sd-btn.icon { width: 32px; padding: 0; justify-content: center; font-size: 16px; letter-spacing: .05em; }
.sd-btn.primary { background: var(--sd-purple-dk); border-color: var(--sd-purple-dk); color: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 2px 5px rgba(60, 66, 87, .1); }
.sd-btn.primary:hover { background: #1039c2; }
.sd-btn svg { width: 14px; height: 14px; }
.sd-btn.shake { animation: nudge .45s ease; }

.sd-tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--sd-line2); margin-bottom: 12px; }
.sd-tabs a { padding: 6px 0 10px; font-weight: 500; font-size: 14px; color: var(--sd-mute); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sd-tabs a:hover { color: var(--sd-ink); }
.sd-tabs a.on { color: var(--sd-purple-dk); border-color: var(--sd-purple-dk); }
.sd-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sd-filters span { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 8px 0 10px; border: 1px dashed #c0c8d2; border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--sd-text); cursor: pointer; }
.sd-filters span:hover { background: var(--sd-sunk); }
.sd-filters span svg { width: 13px; height: 13px; color: var(--sd-mute); }
.sd-filters .more { border-style: solid; padding-left: 8px; }

.sd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sd-table th { text-align: left; font-weight: 600; font-size: 12px; color: var(--sd-mute); padding: 6px 8px; border-bottom: 1px solid var(--sd-line2); white-space: nowrap; }
.sd-table td { padding: 0 8px; height: 37px; border-bottom: 1px solid var(--sd-line2); white-space: nowrap; color: var(--sd-text); }
.sd-table tbody tr { cursor: pointer; transition: background .12s ease; }
.sd-table tbody tr:hover { background: var(--sd-sunk); }
.sd-table .amt { font-weight: 600; color: var(--sd-ink); font-variant-numeric: tabular-nums; width: 1%; }
.sd-table .cur { font-weight: 400; color: var(--sd-mute); font-size: 12px; margin-left: 2px; }
/* The column the frame has no room for. */
.sd-table .desc { display: none; }
.sd-table .date { color: var(--sd-mute); }
.sd-table .more { color: var(--sd-faint); text-align: right; width: 1%; font-size: 16px; letter-spacing: .05em; }
.sd-table .more:hover { color: var(--sd-ink); }
.sd-tablefoot { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; font-size: 13px; color: var(--sd-mute); }
.sd-pager { display: flex; gap: 6px; }
.sd-pager button { height: 28px; padding: 0 10px; border: 1px solid var(--sd-line); border-radius: 6px; background: #fff; font-size: 13px; font-weight: 500; color: var(--sd-faint); }

.sd-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 4px; font-size: 12px; font-weight: 500; white-space: nowrap; vertical-align: middle; }
.sd-badge i { width: 12px; height: 12px; border-radius: 50%; position: relative; flex: none; }
.sd-badge.succeeded { color: var(--sd-green); background: var(--sd-green-bg); }
.sd-badge.succeeded i { background: var(--sd-green); }
.sd-badge.succeeded i::after { content: ""; position: absolute; left: 3px; top: 2.5px; width: 4px; height: 6px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.sd-badge.refunded, .sd-badge.partial { color: var(--sd-gray); background: var(--sd-gray-bg); }
.sd-badge.refunded i, .sd-badge.partial i { background: var(--sd-gray); }
.sd-badge.refunded i::after, .sd-badge.partial i::after { content: ""; position: absolute; left: 3px; top: 3.5px; width: 5px; height: 5px; border: solid #fff; border-width: 1.5px 0 0 1.5px; border-radius: 3px 0 0 0; }
.sd-badge.failed, .sd-badge.disputed { color: var(--sd-red); background: var(--sd-red-bg); }
.sd-badge.failed i, .sd-badge.disputed i { background: var(--sd-red); }
.sd-badge.failed i::after { content: ""; position: absolute; left: 5px; top: 2px; width: 2px; height: 5px; background: #fff; box-shadow: 0 6px 0 #fff; }
.sd-badge.disputed i::after { content: "!"; position: absolute; inset: 0; color: #fff; font: 700 9px/12px var(--sd-font); text-align: center; }
.sd-badge.bump { animation: badgein .5s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes badgein { 0% { transform: scale(.8); opacity: 0; } }
.sd-card { display: inline-grid; place-items: center; width: 26px; height: 17px; margin-right: 8px; border-radius: 3px; vertical-align: -3px; font-size: 7.5px; font-weight: 800; letter-spacing: .02em; font-style: italic; }
.sd-card.visa { background: #1a1f71; color: #fff; }
.sd-card.amex { background: #2671b9; color: #fff; font-style: normal; font-size: 6.5px; }
.sd-card.mc { grid-template-columns: 1fr 1fr; gap: 0; background: #f4f4f4; border: 1px solid var(--sd-line); padding: 0 5px; }
.sd-card.mc i { width: 9px; height: 9px; border-radius: 50%; background: #eb001b; }
.sd-card.mc i + i { background: #f79e1b; margin-left: -4px; opacity: .92; }

.sd-crumbs { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--sd-mute); margin-bottom: 14px; }
.sd-crumbs a { font-weight: 500; color: var(--sd-purple-dk); }
.sd-crumbs a:hover { text-decoration: underline; }
.sd-crumbs svg { width: 12px; height: 12px; color: var(--sd-faint); }
.sd-crumbs span { font-family: var(--mono); font-size: 12px; }
.sd-dethead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sd-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sd-mute); margin-bottom: 4px; }
.sd-eyebrow svg { width: 14px; height: 14px; }
.sd-amount { display: flex; align-items: center; gap: 8px; }
.sd-amount b { font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: var(--sd-ink); font-variant-numeric: tabular-nums; }
.sd-amount .cur { font-size: 16px; font-weight: 500; color: var(--sd-mute); margin-right: 4px; }
.sd-summary { display: flex; margin: 0 0 20px; padding: 0; border-top: 1px solid var(--sd-line2); border-bottom: 1px solid var(--sd-line2); }
.sd-summary > div { padding: 12px 20px 12px 0; margin-right: 20px; border-right: 1px solid var(--sd-line2); }
.sd-summary > div:last-child { border-right: 0; }
.sd-summary dt { font-size: 12px; font-weight: 500; color: var(--sd-mute); margin-bottom: 3px; }
.sd-summary dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--sd-ink); }
.sd-summary dd a { color: var(--sd-purple-dk); }
.sd-risk { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-right: 6px; padding: 0 5px; border-radius: 4px; background: var(--sd-green-bg); color: var(--sd-green); font-size: 12px; font-weight: 600; }
.sd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.sd-cols .sd-h { margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--sd-line2); font-size: 16px; font-weight: 600; line-height: 1.18; letter-spacing: -.01em; color: var(--sd-ink); }
.sd-cols .sd-h + * { margin-bottom: 20px; }
.sd-timeline { list-style: none; margin: 0; padding: 0 0 0 20px; position: relative; }
.sd-timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; border-left: 1px dashed #c0c8d2; }
.sd-timeline li { position: relative; padding-bottom: 12px; font-size: 13px; }
.sd-timeline li::before { content: ""; position: absolute; left: -20px; top: 3px; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 2px solid #c0c8d2; }
.sd-timeline li.ok::before { background: var(--sd-green); border-color: var(--sd-green); }
.sd-timeline li.rf::before { background: var(--sd-gray); border-color: var(--sd-gray); }
.sd-timeline li b { display: block; font-weight: 500; color: var(--sd-ink); }
.sd-timeline li span { color: var(--sd-mute); font-size: 12px; }
.sd-timeline li em { display: block; font-style: normal; color: var(--sd-mute); font-size: 12px; margin-top: 2px; }
.sd-timeline li.new { animation: rowin .45s ease; }
@keyframes rowin { 0% { opacity: 0; transform: translateY(-6px); } }
.sd-kv { margin: 0; display: grid; gap: 0; }
.sd-kv > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 5px 0; font-size: 13px; }
.sd-kv dt { color: var(--sd-mute); }
.sd-kv dd { margin: 0; color: var(--sd-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-kv dd.mono { font-family: var(--mono); font-size: 12px; }
.sd-check { color: var(--sd-green); font-weight: 500; }

.sd-modal { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(26, 31, 54, .5); animation: fade .2s ease; }
.sd-dialog { width: min(440px, calc(100% - 32px)); background: #fff; border-radius: 10px; box-shadow: 0 15px 35px rgba(60, 66, 87, .2), 0 5px 15px rgba(0, 0, 0, .12); padding: 20px 24px 20px; animation: pop .22s cubic-bezier(.2, 1.1, .4, 1); }
.sd-dialog-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sd-dialog .sd-h { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: var(--sd-ink); }
.sd-x { width: 28px; height: 28px; margin-right: -6px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--sd-mute); }
.sd-x:hover { background: var(--sd-hover); color: var(--sd-ink); }
.sd-hint { margin: 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--sd-mute); }
.sd-field { display: block; margin-bottom: 14px; position: relative; }
.sd-field > span { display: block; font-size: 13px; font-weight: 500; color: var(--sd-ink); margin-bottom: 6px; }
.sd-field small { display: block; margin-top: 6px; font-size: 12px; color: var(--sd-mute); }
.sd-field small b { font-weight: 500; color: var(--sd-ink); }
.sd-field small.err { color: var(--sd-red); }
.sd-input { display: flex; align-items: center; height: 36px; border: 1px solid var(--sd-line); border-radius: 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, .03); background: #fff; transition: box-shadow .15s ease, border-color .15s ease; }
.sd-input:focus-within, .sd-input.focus { border-color: var(--sd-purple); box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.sd-input i { padding: 0 8px 0 12px; font-style: normal; color: var(--sd-mute); }
.sd-input em { padding: 0 12px 0 8px; font-style: normal; font-size: 12px; font-weight: 500; color: var(--sd-mute); }
.sd-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 500 14px/1 var(--sd-font); color: var(--sd-ink); font-variant-numeric: tabular-nums; padding: 0; }
.sd-select { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--sd-line); border-radius: 6px; background: #fff; box-shadow: 0 1px 1px rgba(0, 0, 0, .03); font-size: 14px; color: var(--sd-mute); text-align: left; transition: box-shadow .15s ease, border-color .15s ease; }
.sd-select[data-value]:not([data-value=""]) { color: var(--sd-ink); }
.sd-select.open, .sd-select:focus-visible { outline: 0; border-color: var(--sd-purple); box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }
.sd-select svg { width: 14px; height: 14px; color: var(--sd-faint); }
.sd-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 2; margin: 0; padding: 4px; list-style: none; background: #fff; border-radius: 8px; box-shadow: 0 0 0 1px rgba(60, 66, 87, .08), 0 8px 24px rgba(60, 66, 87, .18); animation: pop .18s cubic-bezier(.2, 1.1, .4, 1); }
.sd-menu li { padding: 7px 10px; border-radius: 5px; font-size: 14px; color: var(--sd-ink); cursor: pointer; }
.sd-menu li:hover, .sd-menu li.hover { background: var(--sd-purple-bg); color: var(--sd-purple-dk); }
.sd-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.sd-toast { position: absolute; left: 50%; bottom: 20px; z-index: 5; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 14px 9px 12px; border-radius: 8px; background: #1a1f36; color: #fff; font-size: 13px; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); animation: toastin .3s cubic-bezier(.2, 1.1, .4, 1); white-space: nowrap; }
.sd-toast svg { width: 14px; height: 14px; color: #5ce09b; stroke-width: 2; }

/* ---- what the player draws over the page ---- */

/* The author's note on a step, and the spotlight the hotspot casts while it is up: everything
   but the control it is about dims. */
.callout { position: absolute; z-index: 6; max-width: 250px; padding: 9px 12px 10px; border-radius: 8px; background: #fff; border: 1px solid #d5dbe1; border-left: 3px solid #e5484d; color: #30313d;
  font: 400 12.5px/1.45 var(--ui); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .4); opacity: 0; transform: translateY(5px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.callout.on { opacity: 1; transform: none; }
.callout b { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #e5484d; margin-bottom: 2px; }
.hotspot.spot { opacity: 1; background: transparent; border-color: transparent; box-shadow: 0 0 0 3px rgba(229, 72, 77, .7), 0 0 0 7px rgba(229, 72, 77, 0), 0 0 0 9999px rgba(26, 31, 54, .42); transition: box-shadow .3s ease, left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
/* A control the recording never used has no recorded answer, so the player says so, next to it. */
.cold-tip { position: absolute; z-index: 6; max-width: 260px; padding: 8px 11px; border-radius: 7px; background: #1a1f36; color: #fff; font: 400 12px/1.45 var(--ui); box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.cold-tip.on { opacity: 1; transform: none; }
.cold-tip b { color: #fff; }
.screen .cold { outline: 2px solid rgba(102, 112, 133, .5); outline-offset: 1px; border-radius: 4px; }
.screen .nudge { animation: nudge .45s ease; }
.screen .lit { box-shadow: 0 0 0 3px rgba(229, 72, 77, .55); border-radius: 6px; transition: box-shadow .4s ease; }
.sd-table tr.lit { box-shadow: inset 0 0 0 2px rgba(229, 72, 77, .55); }

@media (max-width: 62rem) {
  .sd-side { width: 190px; }
  .sd-kv dd.mono { display: none; }
  .sd-summary > div:last-child { display: none; }
  .sd-cols { grid-template-columns: 1fr; gap: 12px; }
  .sd-cols > div:last-child { display: none; }
}
@media (max-width: 44rem) {
  .sd-side { display: none; }
  .sd-top { padding: 0 14px; }
  .sd-view { padding: 8px 14px 0; }
  .sd-table .date, .sd-filters span:nth-child(n+3), .sd-search kbd, .sd-testmode, .sd-createbtn { display: none; }
  .sd-summary > div:nth-child(n+3) { display: none; }
}

/* ================= private until you share ================= */

.local { position: relative; display: grid; justify-items: center; gap: 1.35rem; width: min(21rem, 100%); }
.local .box { width: 100%; padding: 1.1rem 1.2rem 1.2rem; border: 1px solid var(--border); border-radius: 14px; background: var(--card); box-shadow: var(--lift); }
.local .box > b { display: flex; align-items: center; gap: .5rem; margin-bottom: .8rem; font-size: .8125rem; font-weight: 600; }
.local .box > b .ico { width: 15px; height: 15px; }
.local .box ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.local .box li { display: flex; align-items: center; gap: .55rem; font-size: .8125rem; color: var(--soft); }
.local .box li .ico { width: 14px; height: 14px; color: var(--here); }
.local .out { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; width: 100%; }
.local .out span { position: relative; padding: .6rem .7rem; border: 1px dashed color-mix(in srgb, var(--muted-fg) 60%, transparent); border-radius: 12px; font-size: .75rem; line-height: 1.35; color: var(--muted-fg); text-align: center; }
.local .out span b { display: block; font-weight: 600; color: var(--fg); }
.local .out span::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 1.35rem; border-left: 1px dashed color-mix(in srgb, var(--muted-fg) 60%, transparent); }

/* ================= free ================= */

.plans { display: grid; grid-template-columns: 1fr 1fr; }
.plans > .text { padding: 2.75rem var(--pad) 3rem; }
.plans > .text small { display: block; margin-bottom: 1.25rem; font-size: .875rem; color: var(--muted-fg); }
.plans > .text h2 { margin-bottom: 1rem; font-size: clamp(2rem, 4.4vw, 2.5rem); line-height: 1.15; }
.plans > .text p { max-width: 27rem; font-size: .9375rem; line-height: 1.6; color: var(--muted-fg); }
.plans > .cols { display: grid; grid-template-columns: 1fr 1fr; border-left: 1px solid var(--border); }
.plan + .plan { border-left: 1px solid var(--border); }
.plan-top { padding: 1.75rem 1rem 1.5rem; border-bottom: 1px solid var(--border); }
.plan-top small { display: inline-block; margin-bottom: 1.6rem; padding: .12rem 0; border: 1px solid transparent; border-radius: 6px; font-size: .75rem; font-weight: 600; color: var(--muted-fg); }
.plan-top small.tag { padding-inline: .5rem; border-color: color-mix(in srgb, var(--here) 35%, transparent); background: color-mix(in srgb, var(--here) 12%, transparent); color: var(--here); }
.plan-top .price { display: flex; align-items: baseline; gap: .5rem; font-size: 2.25rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.plan-top .price span { font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--muted-fg); }
.plan-top p { min-height: 2.9rem; margin: .7rem 0 1.4rem; font-size: .875rem; color: var(--muted-fg); }
.plan-list { padding: 1.5rem 1rem 1.75rem; }
.plan-list > b { display: block; margin-bottom: 1rem; font-size: .75rem; font-weight: 500; color: var(--muted-fg); }
.plan-list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.plan-list li { display: flex; gap: .55rem; font-size: .875rem; line-height: 1.4; }
.plan-list li .ico { width: 15px; height: 15px; margin-top: .15rem; }
@media (max-width: 52rem) {
  .plans { grid-template-columns: 1fr; }
  .plans > .cols { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 30rem) {
  .plans > .cols { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--border); }
}

/* ================= footer ================= */

.foot { position: relative; }
.foot-in { max-width: var(--page); margin: 0 auto; padding: 4rem 1.5rem 2rem; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; padding-bottom: 3.5rem; }
.foot-about p { max-width: 20rem; margin: 1.1rem 0 1.4rem; font-size: .9375rem; line-height: 1.55; color: var(--muted-fg); }
.foot-about .brand { padding: 0; }
.foot-about .mark { width: 26px; height: 26px; }
.foot-about .btn { border-radius: 999px; height: 2rem; padding: 0 1rem; }
.foot-col b { display: block; margin: .35rem 0 1.4rem; font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.foot-col a { display: block; margin-bottom: .85rem; font-size: .9375rem; color: var(--muted-fg); text-decoration: none; }
.foot-col a:hover { color: var(--fg); }
.foot-end { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .9375rem; color: var(--muted-fg); }
@media (max-width: 52rem) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-about { grid-column: 1 / -1; } }

/* ================= document pages: guides, privacy, terms, support =================
   The same column and the same rules. The head is a cell of its own; under it, the contents sit
   in a narrow cell beside the prose on a wide screen and above it on a narrow one. */

.legal { padding-top: 3.5rem; }
.legal-head { padding: 4rem var(--pad) 3rem; background: radial-gradient(40rem 16rem at 30% 0, color-mix(in srgb, var(--fg) 5%, transparent), transparent 70%); }
.legal-head .eyebrow { display: inline-block; margin-bottom: 1.4rem; padding: .22rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--card); box-shadow: var(--shadow); font-size: .75rem; font-weight: 500; }
.legal-head h1 { max-width: 44rem; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; margin-bottom: 1.1rem; }
.legal-head .lead { max-width: 42rem; font-size: 1.0625rem; line-height: 1.6; color: var(--muted-fg); }
.legal-head .lead code { font: .86em var(--mono); padding: .08em .36em; border: 1px solid var(--border); border-radius: 5px; background: var(--muted); color: var(--fg); }
.legal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-top: 1.4rem; font-size: .8125rem; color: var(--muted-fg); }
.legal-meta span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; margin-right: .75rem; border-radius: 50%; background: currentColor; vertical-align: middle; }
.legal-grid { display: grid; grid-template-columns: 16rem minmax(0, 1fr); align-items: start; border-top: 1px solid var(--border); }

.doc-toc { position: sticky; top: 3.5rem; max-height: calc(100vh - 3.5rem); overflow-y: auto; padding: 2rem 1.25rem 2rem var(--pad); font-size: .8125rem; }
.doc-toc p { margin-bottom: .9rem; font-size: .75rem; font-weight: 600; color: var(--fg); }
.doc-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.doc-toc a { display: flex; gap: .6rem; padding: .34rem 0 .34rem .9rem; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted-fg); text-decoration: none; line-height: 1.4; transition: color .12s ease, border-color .12s ease; }
.doc-toc a:hover { color: var(--fg); }
.doc-toc a[aria-current] { color: var(--fg); font-weight: 500; border-left-color: var(--fg); }
.doc-toc a span { flex: none; min-width: 1.1em; font-variant-numeric: tabular-nums; }

.doc { min-width: 0; padding: 2.25rem var(--pad) 3.5rem; border-left: 1px solid var(--border); font-size: 1rem; line-height: 1.7; color: var(--soft); }
.doc > * { max-width: 41rem; }
.doc p { margin-bottom: 1.1rem; }
.doc strong { font-weight: 600; color: var(--fg); }
.doc h2 { display: flex; align-items: baseline; gap: .75rem; margin: 3rem 0 1rem; padding-top: 2.5rem; border-top: 1px solid var(--border); font-size: 1.5rem; line-height: 1.25; letter-spacing: -.02em; color: var(--fg); scroll-margin-top: 4.5rem; text-wrap: balance; }
.doc > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.doc h2 .num { flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--card); box-shadow: var(--shadow); font: 600 .8125rem/1 var(--ui); letter-spacing: 0; transform: translateY(-.12em); }
.doc h3 { margin: 2.1rem 0 .6rem; font-size: 1.0625rem; color: var(--fg); scroll-margin-top: 4.5rem; }
.doc .anchor { margin-left: .45rem; color: var(--muted-fg); font-weight: 400; font-size: .8em; text-decoration: none; opacity: 0; transition: opacity .12s ease; }
.doc h2:hover .anchor, .doc h3:hover .anchor, .doc .anchor:focus-visible { opacity: 1; }
.doc ul, .doc ol { list-style: none; margin: 0 0 1.35rem; padding: 0; }
.doc ol { counter-reset: step; }
.doc li { position: relative; padding-left: 1.3rem; margin-bottom: .55rem; }
.doc li::before { content: ""; position: absolute; left: .2rem; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: color-mix(in srgb, var(--muted-fg) 60%, transparent); }
.doc ol > li { counter-increment: step; padding-left: 2.25rem; }
.doc ol > li::before { content: counter(step); left: 0; top: .15em; width: 1.5rem; height: 1.5rem; border: 1px solid var(--border); border-radius: 7px; background: var(--card); color: var(--fg); font: 600 .75rem/1.4rem var(--ui); text-align: center; }
.doc figure { margin: 1.75rem 0 2rem; max-width: none; }
.doc figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--lift); }
.doc a { color: var(--fg); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--fg) 35%, transparent); text-underline-offset: .2em; }
.doc a:hover { text-decoration-color: var(--fg); }
.doc code { font: .86em var(--mono); padding: .08em .36em; border: 1px solid var(--border); border-radius: 5px; background: var(--muted); color: var(--fg); overflow-wrap: anywhere; }
.doc-callout { margin: 1.6rem 0 1.9rem; padding: 1.1rem 1.3rem; border: 1px solid var(--border); border-radius: 12px; background: var(--sunk); box-shadow: inset 3px 0 0 var(--mark); font-size: .9375rem; line-height: 1.65; }
.doc-callout.warn { box-shadow: inset 3px 0 0 var(--pin); }
.doc-callout p:last-child { margin-bottom: 0; }
.doc .qa { padding: 1.15rem 0; border-top: 1px solid var(--border); scroll-margin-top: 4.5rem; }
.doc h2 + .qa { border-top: 0; padding-top: .25rem; }
.doc .qa h3 { margin: 0 0 .35rem; font-size: 1rem; }
.doc .qa p { margin: 0; }
.doc .to-top { margin: 3rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: .8125rem; }
.doc .to-top a { color: var(--muted-fg); text-decoration: none; }
@media (max-width: 56rem) {
  .legal-grid { grid-template-columns: minmax(0, 1fr); }
  .legal-head { padding-top: 2.75rem; }
  .doc-toc { position: static; max-height: none; padding: 1.5rem var(--pad); border-bottom: 1px solid var(--border); }
  .doc { border-left: 0; }
}

/* ================= less motion ================= */

@media (prefers-reduced-motion: reduce) {
  .hero-head > *, .orbit .ring.c, .orbit .core, .live .th .ty em i { animation: none; }
  .chip { animation: none; }
  .tr-scroll, .tr-cursors, .tr-cur { transition: none; }
  .tr-bell, .tr-people, .tr-colors, .tr-opts, .tr-msg.new, .tr-toast { animation: none; }
  .tr-ext.ring::after { content: none; }
}

/* ================= the 404 page ================= */

/* The address that was asked for, marked the way the product marks a line of text. */
.nf-path { padding: .08em .32em; border-radius: 3px; background: var(--hl-yellow); color: #09090b; font: .9em var(--mono); overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nf-go { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.75rem; }
.nf-cells code { font: .86em var(--mono); color: var(--fg); overflow-wrap: anywhere; }
.nf-cells a { color: var(--fg); }