/* boardcast website: a conversation becomes a drawing, on a field of ink and colour. */

@font-face {
  font-family: 'Excalifont';
  src: url('./fonts/excalifont-latin.woff2') format('woff2');
  font-display: block;
}
/* DM Sans and JetBrains Mono, Latin and Latin Extended, from Fontsource. */
@font-face {
  font-family: 'DM Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url('./fonts/dm-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url('./fonts/dm-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('./fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('./fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  --bg: #000;
  --l1: #070707;
  --l2: #0e0e0e;
  --l3: #1a1a1a;
  --fg: #f2f2f2;
  --grey: #c4c4c4;
  --dim: #8a8a8a;
  --faint: #555;
  --hair: #262626;
  --link: #9fb4ff;
  --accent: #ff5a36;
  --hero-teal: #248e8c80;
  --hero-coral: #e3583b94;
  --hero-gold: #dba62c94;
  --sans: 'DM Sans Variable', system-ui, sans-serif;
  --mono: 'JetBrains Mono Variable', ui-monospace, monospace;
  --hand: 'Excalifont', cursive;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
/* The ground: grey dots dithering a slowly drifting field, drawn by crates/site/src/ground.rs. It is the
   page's only dot screen. */
.ground { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
body { color: var(--fg); font-family: var(--sans); font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--fg); color: var(--bg); }
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.label { font: 400 11px var(--mono); color: var(--dim); letter-spacing: .04em; text-transform: lowercase; }

/* ———————————————— navigation, as a product manual ———————————————— */
nav.top { position: relative; z-index: 3; display: grid; grid-template-columns: 1.1fr repeat(4, 1fr) .9fr; gap: 28px; padding: 32px 0 0; align-items: start; }
.brand { font-size: 30px; font-weight: 500; line-height: 1.05; letter-spacing: 0; text-transform: uppercase; }
.nav-item { display: grid; grid-template-columns: 54px 1fr; gap: 12px; cursor: pointer; }
.nav-item svg { width: 54px; height: 54px; }
.nav-item b { display: block; font-size: 22px; font-weight: 500; line-height: 1; letter-spacing: .01em; text-transform: uppercase; }
.nav-item span { display: block; margin-top: 12px; font-size: 15px; line-height: 1.4; color: var(--link); }
.nav-item span em { display: block; font-style: normal; }
.nav-item span em:hover { color: var(--fg); }
.nav-item span a { display: block; color: var(--link); }
.nav-item span a:hover { color: var(--fg); }
.about { font-size: 11px; line-height: 1.6; }

/* Pictograms: solid blocks and lines, which assemble as they come into view and grey on hover. */
.pict * { transition: fill .25s, stroke .25s, transform .8s cubic-bezier(.2,.9,.2,1), opacity .4s; }
.pict .f { fill: var(--fg); } .pict .s { fill: none; stroke: var(--fg); } .pict .h { fill: var(--bg); } .pict .r { fill: var(--accent); }
.pict.parked * { opacity: 0; }
.nav-item:hover .pict .f, .card:hover .pict .f { fill: var(--grey); }
.nav-item:hover .pict .s, .card:hover .pict .s { stroke: var(--grey); }

/* ———————————————— the drawing sheet around everything ———————————————— */
/* The margin around the sheet is paper on every side: content and the hero's colours stop at the frame. */
.frame { position: fixed; inset: 12px; z-index: 30; pointer-events: none; border: 1px solid var(--hair); box-shadow: 0 0 0 12px var(--bg); }
.ruler { position: absolute; font: 400 9px var(--mono); color: var(--faint); }
.ruler.top { left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(90deg, var(--hair) 0 1px, transparent 1px calc(100% / 48)) 0 0 / 100% 5px no-repeat; }
.ruler.left { top: 0; bottom: 0; left: 0; width: 14px; background: repeating-linear-gradient(180deg, var(--hair) 0 1px, transparent 1px calc(100% / 32)) 0 0 / 5px 100% no-repeat; }
.ruler span { position: absolute; }
.ruler.top span { top: 5px; transform: translateX(-50%); }
.ruler.left span { left: 5px; transform: translateY(-50%); }
/* The timeline along the bottom: the page is the meeting, and scrolling plays it. */
.titleblock { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 31; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; height: 38px; background: var(--bg); border-top: 1px solid var(--hair); }
.titleblock.on-hero { visibility: hidden; }
.titleblock > div { padding: 0 16px; white-space: nowrap; }
.titleblock b { color: var(--fg); font-weight: 400; }
.tb-clock b { font-variant-numeric: tabular-nums; }
.tb-no { color: var(--accent); }
.tb-track { position: relative; display: flex; gap: 3px; align-items: flex-end; height: 24px; padding: 0 44px 0 0 !important; margin: 0 16px; }
.tb-seg { position: relative; flex: 1 1 0; height: 4px; background: var(--l3); transition: background .3s; }
.tb-seg.past { background: var(--faint); }
.tb-seg em, .tb-fin { position: absolute; bottom: 9px; left: 0; font: 400 9px var(--mono); font-style: normal; color: var(--dim); }
.tb-fin { left: auto; right: 0; bottom: 0; line-height: 4px; }
.tb-head { position: absolute; top: 2px; bottom: -6px; width: 1px; margin-left: -.5px; background: var(--accent); z-index: 1; transition: left .12s linear; }
.tb-head::before { content: ''; position: absolute; top: 0; left: -3px; width: 7px; height: 7px; background: var(--accent); }
.titleblock div.appearance-cell { display: flex; align-self: stretch; padding: 0; border-left: 1px solid var(--hair); }
#theme-toggle { display: grid; place-items: center; width: 38px; height: 100%; padding: 0; border: 0; background: var(--bg); color: var(--fg); cursor: pointer; }
#theme-toggle svg { width: 20px; height: 20px; }
#theme-toggle:hover { background: var(--fg); color: var(--bg); }
.titleblock .flip { display: inline-block; animation: flip .35s cubic-bezier(.2,.8,.2,1); }
@keyframes flip { from { transform: translateY(70%); opacity: 0; } }

/* ———————————————— hero: said first, then written with a pen ———————————————— */
.hero { position: relative; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* The colour fades out at the top and bottom of the sheet rather than ending on the page's own colour,
   so the ground runs on under it into the next sheet without a seam. */
.hero::before { background:
  radial-gradient(ellipse at 3% 55%, var(--hero-teal), transparent 65%),
  radial-gradient(ellipse at 100% 65%, var(--hero-gold), transparent 60%),
  radial-gradient(ellipse at 65% 30%, var(--hero-coral), transparent 75%);
  mask-image: linear-gradient(180deg, transparent, #000 22%, #000 70%, transparent); }
.hero .wrap { position: relative; }
.hero-intro { display: grid; grid-template-columns: 1.55fr 1fr; gap: 60px; align-items: center; padding: 32px 0 28px; }
.hero-writing { position: relative; min-width: 0; }
.said { display: flex; gap: 12px; align-items: center; min-height: 26px; font: 400 11px var(--mono); color: var(--grey); text-transform: none; }
.said .who { width: 22px; height: 22px; display: inline-grid; place-items: center; border: 1px solid var(--faint); color: var(--fg); font-size: 11px; }
.said q { color: var(--fg); quotes: '“' '”'; }
.said q.typing::after { content: '▍'; color: var(--dim); animation: blink .8s steps(2) infinite; }
.ink { display: block; width: 100%; height: 200px; overflow: visible; margin: 12px 0 0; }
.ink .w { fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ink .w.big { stroke-width: 3.4; }
.ink .w.a { stroke: var(--accent); }
.ink .w.note { stroke: var(--grey); stroke-width: 1.6; }
.ink .tip { fill: var(--bg); stroke: var(--fg); stroke-width: 1.5; }
.ink .tip-dot { fill: var(--fg); }
.hit { position: absolute; }
[data-circle] { cursor: crosshair; }

/* Circling anything on the page. */
.lasso-layer { position: fixed; inset: 0; z-index: 40; pointer-events: none; width: 100%; height: 100%; }
.lasso-layer path { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .6s; }
.lasso-layer path.out { opacity: 0; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 41; transform: translate(-50%, 20px); opacity: 0; transition: opacity .3s, transform .3s; background: var(--fg); color: var(--bg); padding: 10px 14px; font: 400 12px var(--mono); white-space: nowrap; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast b { font-weight: 400; background: var(--bg); color: var(--fg); padding: 1px 6px; margin-right: 8px; }
body.drawing-lasso { user-select: none; cursor: crosshair; }
@media (max-width: 1080px) { .tb-rev, .tb-sheet { display: none; } .titleblock { grid-template-columns: auto minmax(0, 1fr) auto; } }
.hero-copy h1 { max-width: 15ch; font-size: clamp(28px, 2.8vw, 40px); font-weight: 500; letter-spacing: -.01em; line-height: 1.08; text-transform: uppercase; }
.hero-copy p { margin-top: 18px; max-width: 36ch; font-size: 15px; line-height: 1.65; color: var(--grey); }
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.cta a { display: inline-flex; gap: 22px; justify-content: space-between; align-items: center; padding: 12px 16px; border: 1px solid var(--fg); font-size: 14px; }
.cta a.solid { background: var(--fg); color: var(--bg); }
/* The second action, outlined in the accent: what to do next without competing with the first. */
.cta a.line { border-color: var(--accent); color: var(--accent); }
.cta a.line:hover { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.cta a:hover { background: var(--grey); border-color: var(--grey); color: var(--bg); }
.hero-rail { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 0; }
.hero-rail p { font-size: 18px; letter-spacing: -.02em; }
.hero-rail .label { display: flex; gap: 28px; }
.hero-rail .label span::before { content: '+'; color: var(--accent); margin-right: 8px; }
.replay-open { border: 0; background: none; padding: 0; color: var(--grey); cursor: pointer; }
.replay-open:hover { color: var(--fg); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --hero-teal: #5ab8b955; --hero-coral: #f8a08777; --hero-gold: #eccb6077; }
}
:root[data-theme="light"] { --hero-teal: #5ab8b955; --hero-coral: #f8a08777; --hero-gold: #eccb6077; }

/* The live sample, in a thin frame, below the opening on a wide screen. */
.try { border: 1px solid var(--hair); background: var(--bg); scroll-margin-top: 44px; box-shadow: 0 20px 70px #00000018; }
.try iframe { display: block; width: 100%; height: clamp(340px, 44vh, 400px); border: 0; background: var(--l1); }
.try-foot { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-top: 1px solid var(--hair); font-size: 10px; }
/* On a phone the English sample plays behind the opening instead, faint, and fading out at the top and bottom. */
.hero-board { display: none; position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; border: 0; pointer-events: none;
  opacity: .2; mask-image: linear-gradient(transparent 4%, #000 22%, #000 62%, transparent 92%); }
.phone-only { display: none !important; }
@media (max-width: 760px) {
  .try, .wide-only { display: none !important; }
  .hero-board { display: block; }
  .phone-only { display: inline-flex !important; }
}

/* Keep the demo readable; shorter viewports scroll through the first sheet. */
@media (min-width: 1081px) {
  .hero > .wrap { display: flex; flex-direction: column; min-height: 100svh; }
  .hero > .wrap > :not(.try) { flex-shrink: 0; }
  .try { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .try-foot { flex-shrink: 0; }
  .try iframe { flex: 1; height: 0; min-height: 600px; }
}
@media (min-width: 1081px) and (max-height: 960px) {
  .hero-intro { padding-top: 20px; padding-bottom: 20px; }
  .ink { height: 160px; }
  .hero-copy h1 { font-size: 34px; }
  .hero-copy p { margin-top: 12px; font-size: 14px; }
  .cta { margin-top: 16px; }
  .hero-rail { padding-top: 16px; padding-bottom: 16px; }
}

/* Each sheet after the app stands on its own: at least a screen tall, its content in the middle. */
@media (min-width: 1081px) {
  .sheet-page { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-top: 72px; padding-bottom: 72px; }
  .sheet-page.block { padding-top: 72px; }
  /* Sheet 02 holds still while the scroll plays the meeting along its timeline. */
  .sig-scroll { height: 280vh; }
  .sig-pin { position: sticky; top: 0; }
  /* Room above the timeline for the cursor's clock. */
  #signals .head { padding-bottom: 40px; }
}
@media (min-width: 1081px) and (max-height: 960px) {
  .sheet-page, .sheet-page.block { padding-top: 40px; padding-bottom: 40px; }
  .sheet-page .head { padding-bottom: 20px; }
}

/* Cards are numbered in order, the number in the accent. */
.card .k b, .dot-card .label b { margin-right: 6px; font-weight: 400; color: var(--accent); }

/* ———————————————— signals: one meeting, four lines ———————————————— */
/* Top only: the sides are .wrap's padding. */
section.block { padding-top: 140px; }
/* A heading is always its two written lines: it takes the width it needs and the text beside it the rest. */
.head { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: end; padding-bottom: 28px; }
.head h2 { font-size: clamp(36px, 4.6vw, 72px); font-weight: 500; letter-spacing: -.02em; line-height: 1; white-space: nowrap; text-transform: uppercase; }
.head h2 em { font-style: normal; color: var(--dim); }
.head p { font-size: 15px; line-height: 1.65; color: var(--grey); max-width: 30em; }
.head-side .cta { margin-top: 18px; }
.signals { position: relative; border-top: 1px solid var(--fg); cursor: crosshair; user-select: none; }
/* The timeline's paper, under the caption too. It fades into the ground at its sides and below, so the dots
   thin out towards it instead of being cut off at a hard edge. The sheet keeps it behind its own text. */
.sig-pin { isolation: isolate; }
/* The paper reaches past the sheet's sides; the section clips it there, so the page never scrolls sideways. */
.sig-scroll { overflow-x: clip; }
.signals::before { content: ''; position: absolute; z-index: -1; inset: 0 -56px -150px; background: var(--bg); pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent), linear-gradient(180deg, #000 calc(100% - 72px), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent), linear-gradient(180deg, #000 calc(100% - 72px), transparent);
  mask-composite: intersect; }
.row { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--hair); height: 92px; align-items: center; }
.row .name { font-size: 20px; font-weight: 300; }
.row .name small { display: block; margin-top: 4px; }
.row svg { width: 100%; height: 92px; overflow: visible; }
.row .line { fill: none; stroke: var(--fg); stroke-width: 1.1; }
.row .seg { stroke-width: 3; stroke-linecap: round; }
.row text { font: 400 10px var(--mono); fill: var(--dim); }
.row .tick { stroke: var(--fg); stroke-width: 1; }
.row .mark { fill: var(--accent); }
.row .mark-label { fill: var(--accent); }
.signals .cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--fg); left: 0; opacity: 0; transition: opacity .2s; pointer-events: none; }
.signals:hover .cursor, .signals.auto .cursor { opacity: 1; }
.signals .cursor .t { position: absolute; top: -26px; left: 8px; font: 400 11px var(--mono); white-space: nowrap; }
.caption { display: grid; grid-template-columns: 220px 1fr; padding: 18px 0; min-height: 76px; }
.caption p { font-size: 22px; font-weight: 300; }
.caption p b { font: 400 12px var(--mono); color: var(--dim); margin-right: 12px; }
.draw-in { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s cubic-bezier(.3,.1,.2,1); }
.in .draw-in { stroke-dashoffset: 0; }
.pop { opacity: 0; transition: opacity .5s; }
.in .pop { opacity: 1; }

/* ———————————————— the app, pinned while the chapters scroll ———————————————— */
.story { position: relative; height: 640vh; margin-top: 120px; }
.pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.pin .wrap { width: 100%; display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center; }
.chapter { position: relative; height: 300px; }
/* The old chapter leaves before the new one arrives, so the two never overlap. */
.chapter article { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity .18s, transform .18s; }
.chapter article.on { opacity: 1; transform: none; transition: opacity .4s .18s, transform .4s .18s; }
.chapter .n { font: 400 12px var(--mono); color: var(--dim); }
.chapter h3 { margin-top: 16px; font-size: 40px; font-weight: 500; letter-spacing: -.015em; line-height: 1; text-transform: uppercase; }
.chapter p { margin-top: 18px; font-size: 15px; line-height: 1.7; color: var(--grey); }
.chapter kbd { font: 400 12px var(--mono); border: 1px solid var(--faint); padding: 1px 6px; color: var(--fg); }
.tabs { position: absolute; left: 0; right: 0; bottom: 28px; }
.tabs .wrap { display: flex !important; gap: 28px; }
.tabs span { position: relative; padding-bottom: 8px; font: 400 12px var(--mono); color: var(--dim); }
.tabs span::after { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: calc(var(--k, 0) * 100%); background: var(--fg); }
.tabs span.on { color: var(--fg); }
.tabs .auto { margin-left: auto; margin-right: 320px; font-style: normal; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .4s; }
.tabs .auto::before { content: ''; border-left: 7px solid var(--accent); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.tabs .auto.on { opacity: 1; }

/* The app's window, sized and coloured as the app draws it (crates/ui/src/app.rs), its sidebar put away. */
.app { --app-surface: var(--bg); --app-hover: var(--l2); --app-shadow: 0 4px 6px -1px rgb(0 0 0 / .5), 0 2px 4px -2px rgb(0 0 0 / .5);
  position: relative; min-width: 0; border: 1px solid var(--hair); background: var(--app-surface); }
:root[data-theme="light"] .app { --app-shadow: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .app { --app-shadow: 0 4px 6px -1px rgb(0 0 0 / .08), 0 2px 4px -2px rgb(0 0 0 / .08); } }
.app svg { flex: none; }
.app-ico { display: grid; place-items: center; width: 26px; height: 26px; color: var(--fg); }
.app-ico svg { width: 14px; height: 14px; }
.app-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--hair); }
.app-title { display: flex; min-width: 0; overflow: hidden; gap: 12px; align-items: center; height: 40px; padding: 0 4px 0 8px; border-bottom: 1px solid var(--hair); }
.app-title .name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: 400; }
/* A red dot and the meeting's clock while it listens; a grey square for the time recorded once it stops. */
.rec { display: flex; gap: 8px; align-items: center; font: 400 12px var(--mono); color: var(--accent); }
.rec::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.rec.off { color: var(--dim); } .rec.off::before { border-radius: 0; background: var(--dim); }
.app-chip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 1px solid var(--hair); border-radius: 2px; font-size: 12px; color: var(--grey); white-space: nowrap; }
.app-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.app-chip.hot { color: var(--accent); } .app-chip.hot::before { background: var(--accent); }
.app-end { margin-left: auto; display: flex; align-items: center; gap: 4px; padding-right: 4px; }
.app-btn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border-radius: 2px; font-size: 14px; font-weight: 400; white-space: nowrap; transition: background .2s; }
.app-btn svg { width: 14px; height: 14px; }
.app-btn.active { background: var(--l3); }
.app-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: min(560px, 64vh); }
.canvas { position: relative; container-type: inline-size; overflow: hidden; background-color: var(--l1);
  background-image: radial-gradient(circle, var(--hair) 1px, transparent 1.2px); background-size: 24px 24px; background-position: 12px 12px; }
.canvas svg.board { position: absolute; left: 36px; top: 34px; width: calc(100% - 72px); height: calc(100% - 140px); overflow: visible; z-index: 1; }
.board .stroke { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.6; }
.board .ink { stroke: var(--board-ink); } .board .thick { stroke-width: 3.4; } .board .accent { stroke: var(--accent); }
.board .lasso { stroke: var(--fg); stroke-width: 1.4; opacity: .8; }
.board .hand { font-family: var(--hand); fill: var(--board-ink); }
.board .sel { fill: none; stroke: var(--link); stroke-width: 1; stroke-dasharray: 3 3; }
.marks { position: absolute; z-index: 3; display: flex; border: 1px solid var(--hair); border-radius: 4px; background: var(--app-surface); box-shadow: var(--app-shadow); opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s; font-size: 12px; }
.marks.on { opacity: 1; transform: none; }
.marks span { padding: 6px 10px; color: var(--grey); }
.marks span.hit { background: var(--fg); color: var(--bg); }

/* What floats over the board's lower edge: the zoom at its corner, the tools in the middle. */
.app-float { position: absolute; z-index: 4; bottom: 12px; display: flex; align-items: center; border: 1px solid var(--hair); border-radius: 4px; background: var(--app-surface); box-shadow: var(--app-shadow); white-space: nowrap; }
.app-zoom { left: 12px; height: 32px; padding: 0 10px; gap: 14px; font: 400 11px var(--mono); color: var(--grey); }
.app-zoom svg { width: 12px; height: 12px; color: var(--fg); }
.app-tools { left: 50%; transform: translateX(-50%); height: 44px; padding: 0 4px; }
.app-live, .app-replay { display: flex; align-items: center; gap: 2px; }
.app-replay { display: none; width: min(560px, calc(100cqi - 140px)); }
.app-tools.on .app-live { display: none; }
.app-tools.on .app-replay { display: flex; }
.app-tool { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 2px; font-size: 14px; font-weight: 400; transition: background .2s; }
.app-tool.icon { width: 34px; padding: 0; justify-content: center; }
.app-tool svg { width: 16px; height: 16px; }
.app-tool.off { opacity: .4; }
.app-tool.active { background: var(--l3); }
.app-tools .app-sep { height: 20px; }
/* Red with the level beside it while it listens; black, with its key, when it does not. */
.mic { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 2px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 400; }
.mic .dot { width: 10px; height: 10px; background: #fff; }
.mic kbd { display: none; align-items: center; height: 18px; padding: 0 5px; border: 1px solid currentColor; border-radius: 2px; font: 400 10px var(--mono); opacity: .55; }
.meter { display: flex; gap: 2px; height: 18px; align-items: flex-end; }
.meter i { width: 3px; height: 3px; background: #fff; transition: height .08s; }
.mic.off { background: var(--fg); color: var(--bg); }
.mic.off .dot { border-radius: 50%; background: var(--accent); }
.mic.off .meter { display: none; } .mic.off kbd { display: flex; }
/* The replay's bar, in place of the tools: pause, where it is in the meeting, speed, and a fork from there. */
.app-replay .play { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 2px; background: var(--fg); color: var(--bg); }
.app-replay .play svg { width: 14px; height: 14px; }
.app-replay .rb-track { position: relative; flex: 1; height: 4px; margin: 0 12px; border-radius: 2px; background: var(--hair); }
.app-replay .rb-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--fg); }
.app-replay .rb-knob { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid var(--fg); background: var(--app-surface); }
.app-replay .rb-time { padding: 0 4px; font: 400 11px var(--mono); color: var(--grey); }
/* The zoom gives way first, as the tools need the board's width. */
@container (max-width: 780px) { .app-zoom { display: none; } }
@container (max-width: 560px) {
  .app-zoom, .app-live .icon, .app-live .app-sep, .mic kbd, .app-replay .app-tool, .app-replay .app-sep { display: none !important; }
  .app-replay { width: calc(100cqi - 40px); }
}

/* The panel beside the board, on its transcript: each line under its speaker's badge, outlined until it is drawn. */
.side { border-left: 1px solid var(--hair); display: flex; flex-direction: column; min-height: 0; background: var(--app-surface); }
.app-tabs { display: flex; align-items: center; gap: 20px; height: 40px; flex: none; padding: 0 4px 0 16px; border-bottom: 1px solid var(--hair); }
.app-tabs > span { display: flex; align-items: center; gap: 6px; height: 100%; border-bottom: 2px solid transparent; font-size: 14px; color: var(--grey); }
.app-tabs > span.on { border-color: var(--fg); color: var(--fg); font-weight: 500; }
.app-tabs small { font: 400 10px var(--mono); color: var(--dim); }
.app-tabs .app-ico { margin-left: auto; border: 0; }
.transcript { list-style: none; padding: 16px; display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; overflow: hidden; }
.transcript li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px; }
.transcript li.gone { display: none; }
.transcript .who { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border: 1px solid var(--pi); border-radius: 10px; font: 500 10px var(--sans); color: var(--pi); transition: background .3s; }
.transcript li.drawn .who { background: var(--pb); border-color: var(--pb); }
.transcript .nm { font-size: 12px; font-weight: 600; }
.transcript p { grid-column: 1 / -1; font-size: 14px; line-height: 1.5; font-weight: 400; }
.transcript li.live p::after { content: '▍'; animation: blink .8s steps(2) infinite; color: var(--dim); }
@keyframes blink { 50% { opacity: 0; } }
/* The app's badge colours for the first three speakers, light and dark. */
.who.p0 { --pb: #3a1424; --pi: #f7a3c4; } .who.p1 { --pb: #142640; --pi: #a8c8ff; } .who.p2 { --pb: #12301f; --pi: #8ee0b0; }
:root[data-theme="light"] .who.p0 { --pb: #fcd7ea; --pi: #a61e4d; } :root[data-theme="light"] .who.p1 { --pb: #d6e6ff; --pi: #1c4f9c; } :root[data-theme="light"] .who.p2 { --pb: #d4f5e7; --pi: #1f7a45; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .who.p0 { --pb: #fcd7ea; --pi: #a61e4d; } :root:not([data-theme="dark"]) .who.p1 { --pb: #d6e6ff; --pi: #1c4f9c; } :root:not([data-theme="dark"]) .who.p2 { --pb: #d4f5e7; --pi: #1f7a45; }
}
.input { flex: none; padding: 12px; border-top: 1px solid var(--hair); }
.input span { display: flex; align-items: center; height: 32px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 2px; font-size: 14px; color: var(--dim); }

/* ———————————————— during: cards ———————————————— */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 320px; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.card { position: relative; background: var(--bg); padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.card .pict { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; }
.card .k { position: absolute; top: 24px; left: 24px; }
/* A card's name is a step below the section headings: written as a word, not in capitals. */
.card h4 { font-size: 22px; font-weight: 500; letter-spacing: -.01em; line-height: 1; }
.card p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: var(--grey); max-width: 30em; }
.card .art { position: absolute; inset: 56px 24px 110px; display: grid; place-items: center; }
.w4 { grid-column: span 4; } .w2 { grid-column: span 2; }
.art-lasso svg { width: 100%; height: 100%; overflow: visible; }
.art-lasso .word { font-family: var(--hand); font-size: 32px; fill: var(--board-ink); }
.art-lasso .loop { fill: none; stroke: var(--fg); stroke-width: 1.4; stroke-linecap: round; }
.art-lasso .link { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; }
.lsay { position: absolute; top: 18px; right: 0; display: grid; justify-items: end; gap: 6px; }
#lsay { font-size: 15px; color: var(--fg); min-height: 1.2em; }
.voice { display: grid; grid-template-columns: 28px 76px 1fr; gap: 12px; align-items: center; width: 270px; font-size: 13px; color: var(--grey); margin: 6px 0; }
.voice b { width: 28px; height: 28px; border: 1px solid var(--faint); display: grid; place-items: center; font: 400 11px var(--mono); color: var(--fg); }
.voice .wave { height: 24px; display: flex; gap: 3px; align-items: center; }
.voice .wave i { width: 2px; height: 3px; background: var(--faint); animation: lv2 .7s ease-in-out infinite alternate; }
.voice.quiet .wave i { animation-play-state: paused; }
.voice:not(.quiet) b { background: var(--fg); color: var(--bg); }
@keyframes lv2 { to { height: 22px; background: var(--fg); } }
.voice-line { margin-top: 14px; padding-left: 40px; min-height: 1.4em; font-size: 14px; color: var(--fg); }
/* Three boxes and two links on the first row; under each box, what it has right now. */
.chain { display: grid; grid-template-columns: auto 30px auto 30px auto; align-items: center; justify-items: center; gap: 10px 8px; font-size: 13px; }
.chain em { font-style: normal; height: 20px; display: flex; align-items: center; }
.chain .lv { grid-column: 1; gap: 3px; }
.chain .lv i { width: 2px; height: 3px; background: var(--faint); animation: lv2 .6s ease-in-out infinite alternate; }
.chain .lv i:nth-child(2n) { animation-delay: .2s; } .chain .lv i:nth-child(3n) { animation-delay: .4s; }
#asr-w { grid-column: 3; font: 400 11px var(--mono); color: var(--grey); }
#board-w { grid-column: 5; font: 400 17px var(--hand); color: var(--board-ink); }
.chain span { padding: 8px 12px; border: 1px solid var(--faint); }
.chain i { width: 30px; height: 1px; background: linear-gradient(90deg, var(--grey) 50%, transparent 50%) 0 0 / 6px 1px; animation: flow .5s linear infinite; }
@keyframes flow { to { background-position: 6px 0; } }
.cloud { margin-top: 18px; text-align: center; font: 400 12px var(--mono); color: var(--dim); text-decoration: line-through; text-decoration-color: var(--accent); }
.scrub { width: 100%; }
.scrub .mini { display: grid; align-content: start; gap: 2px; height: 84px; margin-bottom: 10px; font: 400 14px/1.2 var(--hand); color: var(--board-ink); }
.scrub .mini b { font-weight: 400; font-size: 17px; }
.scrub .mini [data-at] { opacity: 0; transition: opacity .25s; }
.scrub .mini [data-at].on { opacity: 1; }
.scrub .mini del[data-at] { opacity: 1; text-decoration: none; }
.scrub .mini del.on { text-decoration: line-through 2px var(--accent); }
.scrub .mini em { font-style: normal; color: var(--accent); }
.scrub .mini ins { text-decoration: none; }
.scrub .bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; }
.scrub .bars i { flex: 1; background: var(--l3); }
/* What has played, drawn in the accent like a chart. */
.scrub .bars i.past { background: var(--accent); }
.scrub .time { margin-top: 6px; display: flex; justify-content: space-between; }
/* Export: four pages, each a small picture of what that format holds. Fanned at rest, laid out side by side on hover. */
.files { position: relative; width: 84px; height: 112px; }
.files > div { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 9px 8px; border: 1px solid var(--faint); background: var(--bg); overflow: hidden; transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.files > div:nth-child(1) { transform: translate(-66px, 8px) rotate(-8deg); }
.files > div:nth-child(2) { transform: translate(-22px, 0) rotate(-2.5deg); }
.files > div:nth-child(3) { transform: translate(22px, 0) rotate(2.5deg); }
.files > div:nth-child(4) { transform: translate(66px, 8px) rotate(8deg); }
.card:hover .files > div:nth-child(1) { transform: translate(-138px, -6px); }
.card:hover .files > div:nth-child(2) { transform: translate(-46px, -6px); }
.card:hover .files > div:nth-child(3) { transform: translate(46px, -6px); }
.card:hover .files > div:nth-child(4) { transform: translate(138px, -6px); }
.files i { display: block; font-style: normal; }
.files b { margin-top: auto; font: 400 11px var(--mono); }
.files .f-md i { font: 400 7px/1.25 var(--mono); color: var(--grey); white-space: nowrap; }
.files .f-md .t { color: var(--fg); }
.files .flow { display: flex; align-items: center; margin-top: 2px; }
.files .flow s { width: 16px; height: 9px; border: 1px solid var(--grey); }
.files .flow u { width: 10px; height: 1px; background: var(--grey); }
.files .h { font: 400 14px/1 var(--hand); color: var(--board-ink); }
.files .ln { height: 1px; width: 80%; background: var(--grey); }
.files .ln + .ln { width: 62%; }
.files .ln.x { background: var(--accent); }
.files .pen { height: 2px; width: 70%; background: var(--accent); transform-origin: left; }
.files .bar { position: relative; margin-top: 6px; height: 1px; background: var(--faint); }
.files .bar::after { content: ''; position: absolute; top: -3px; left: 30%; width: 1px; height: 7px; background: var(--fg); }
@media (prefers-reduced-motion: no-preference) {
  .files .pen { animation: pen 2.4s cubic-bezier(.4,0,.2,1) infinite; }
  .files .bar::after { animation: playhead 4s linear infinite; }
}
@keyframes pen { 0% { transform: scaleX(0); } 55%, 85% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes playhead { from { left: 0; } to { left: 100%; } }

/* ———————————————— after: dot-matrix outputs ———————————————— */
.dots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.dot-card { background: var(--bg); padding: 24px; height: 380px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.dot-card canvas { position: absolute; left: 0; right: 0; top: 0; height: 250px; width: 100%; }
.dot-card h4 { font-size: 20px; font-weight: 500; letter-spacing: -.01em; }
.dot-card p { margin-top: 8px; font-size: 13px; color: var(--grey); line-height: 1.6; min-height: 3.2em; } /* Two lines for every card, so the titles above line up whatever the text. */

.specs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--fg); }
.specs dl { display: grid; grid-template-columns: 170px 1fr; }
.specs dt, .specs dd { padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.specs dt { font: 400 12px var(--mono); color: var(--dim); padding-top: 17px; }
.specs dl + dl { padding-left: 40px; }
/* Downloads: each package with its real size, and how to open it the first time. The one for this computer is marked. */
.dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); margin-top: 48px; }
.dl a { position: relative; background: var(--bg); padding: 36px 32px 28px; display: flex; flex-direction: column; transition: background .2s, color .2s; }
.dl-top { display: grid; gap: 14px; justify-items: start; padding-right: 72px; }
/* Systems keep their own names: macOS, Windows, Linux. */
.dl b { font-size: clamp(30px, 3.4vw, 50px); font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.dl .here { display: none; color: var(--accent); }
.dl a.this .here { display: inline; }
.dl a.this { box-shadow: inset 0 3px 0 var(--accent); }
.dl ul { list-style: none; margin: 26px 0 22px; }
.dl li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 14px; color: var(--grey); }
.dl li:first-child { color: var(--fg); }
.dl li em { font: 400 12px var(--mono); font-style: normal; color: var(--dim); white-space: nowrap; }
.dl p { margin-top: auto; }
.dl a > i { position: absolute; right: 32px; top: 40px; font: 400 13px var(--mono); font-style: normal; }
.dl a:hover { background: var(--fg); color: var(--bg); }
.dl a:hover li, .dl a:hover li em, .dl a:hover .label { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 25%, transparent); }
.dl a:hover .here { color: var(--accent); }
/* The last sheet: the reader's own said line, and a blank board the pen writes on. */
.now { padding-top: 160px; padding-bottom: 120px; }
/* The site's map, which a phone shows at the end in place of the navigation at the top. */
.phone-sitemap { display: none; }
@media (max-width: 600px) {
  .phone-sitemap { display: block; }
  .phone-sitemap .sitemap { margin-top: 0; }
}
.now .said .who { width: auto; padding: 0 6px; }
.now .blank { margin-top: 18px; height: clamp(200px, 26vw, 320px); border: 1px solid var(--hair); background-color: var(--l1); }
.now .blank .ink { height: 100%; margin: 0; }
.now-foot { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--grey); }
.now-foot a { color: var(--fg); border-bottom: 1px solid var(--faint); }
.now-foot a:hover { border-color: var(--fg); }

@media (max-width: 1080px) {
  /* A tablet keeps the brand and the four items in one row, each a little smaller. */
  nav.top { grid-template-columns: auto repeat(4, minmax(0, 1fr)); gap: 20px; padding-top: 28px; } .about { display: none; }
  .brand { font-size: 24px; padding-right: 8px; }
  .nav-item { grid-template-columns: 32px 1fr; gap: 10px; } .nav-item svg { width: 32px; height: 32px; }
  .nav-item b { font-size: 17px; } .nav-item span { margin-top: 8px; font-size: 13px; }
  .hero-intro { gap: 32px; grid-template-columns: 1.2fr 1fr; }
  .ink { height: 200px; }
  .said #said-time { display: none; }
  .head, .specs { grid-template-columns: 1fr; }
  .specs dl + dl { padding-left: 0; }
  .pin .wrap { grid-template-columns: 1fr; gap: 16px; } .chapter { height: 150px; } .chapter h3 { font-size: 34px; } .chapter p { display: none; }
  .app-body { grid-template-columns: 1fr; } .side { display: none; }
  .bento { grid-template-columns: 1fr; } .w4, .w2 { grid-column: auto; }
  .dots { grid-template-columns: 1fr 1fr; }
  .row { grid-template-columns: 110px 1fr; } .caption { grid-template-columns: 110px 1fr; } .row .name { font-size: 16px; }
  .try iframe { height: clamp(560px, 70svh, 720px); }
}
@media (max-width: 760px) {
  /* A phone puts the brand on its own line and the items two by two under it. */
  nav.top { grid-template-columns: 1fr 1fr; gap: 20px 16px; } .brand { grid-column: 1 / -1; }
  .hero-intro { grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
  .hero-copy h1 { max-width: 23ch; font-size: 34px; }
  .hero-copy p { max-width: 48ch; }
  .hero-rail { align-items: flex-start; flex-direction: column; gap: 14px; }
  .hero-rail .label { flex-wrap: wrap; gap: 12px 20px; }
}
@media (max-width: 600px) {
  /* Sides only: the sections set their own top and bottom. */
  .wrap { padding-left: 20px; padding-right: 20px; } .dots, .dl { grid-template-columns: 1fr; } .app-title .app-chip, .app-end .app-btn:not(#b-replay), .app-end .app-sep { display: none; }
  /* The sheet's furniture stays out of the way of a narrow screen. */
  /* The rulers and the title block with its track are left out: a phone follows the system's theme. */
  .ruler, .titleblock { display: none; }
  .frame { inset: 6px; }
  nav.top { grid-template-columns: 1fr; padding-top: 24px; } .nav-item { display: none; }
  .said { gap: 8px; font-size: 10px; }
  .said .who { flex-shrink: 0; }
  .frame { box-shadow: 0 0 0 6px var(--bg); }
  /* The handwriting is as tall as its two lines; only a pointer that can circle needs room for the note. */
  .ink { height: 92px; }
  .ink .w.big { stroke-width: 2.4; }
  /* The first screen is the opening alone: below the name, the said line, the handwriting and the offer fill
     the rest of the screen, and the sample starts below it. */
  .hero-intro { gap: clamp(28px, 6svh, 56px); min-height: calc(100svh - 100px); align-content: center; padding-top: 8px; padding-bottom: 40px; }
  .replay-open { margin-top: 10px; }
  .hero-copy h1 { font-size: clamp(28px, 4.2svh, 36px); }
  .hero-copy p { margin-top: 10px; font-size: 14px; line-height: 1.6; }
  .cta { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; }
  .cta a { gap: 12px; padding: 12px 14px; }
  section.block { padding-top: 96px; }
  .head { gap: 16px; } .head h2 { font-size: min(40px, 8.4vw); }
  /* The timeline's backdrop reaches only as far as the page's sides, or the page would scroll sideways. */
  .signals::before { left: -20px; right: -20px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent), linear-gradient(180deg, #000 calc(100% - 72px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent), linear-gradient(180deg, #000 calc(100% - 72px), transparent); }
  .row { grid-template-columns: 64px 1fr; height: 72px; } .row svg { height: 72px; } .row .name { font-size: 14px; } .row .name small { display: none; }
  .caption { grid-template-columns: 64px 1fr; } .caption p { font-size: 17px; }
  .pin .wrap { gap: 12px; } .chapter { height: 112px; } .chapter h3 { font-size: 28px; margin-top: 10px; }
  .app-title { gap: 10px; } .app-body { height: min(440px, 56vh); }
  .canvas svg.board { left: 12px; top: 28px; width: calc(100% - 24px); }
  .tabs { bottom: 14px; } .tabs .wrap { gap: 12px; overflow: hidden; } .tabs span { font-size: 10px; white-space: nowrap; } .tabs .auto { display: none; }
  /* On a phone each card is as tall as its picture and words, so the two never overlap. */
  .bento { grid-auto-rows: auto; } .card { min-height: 300px; } .card h4 { font-size: 26px; }
  .card .art { position: relative; inset: auto; margin: 44px 0 22px; min-height: 120px; }
  .files { transform: scale(.78); }
  .specs dl { grid-template-columns: 110px 1fr; }
  .dl a { padding: 28px 20px; }
  .now { padding-top: 96px; padding-bottom: 80px; }

}

@media (max-width: 360px) { .files { transform: scale(.64); } }
@media (max-width: 600px) and (any-pointer: fine) { .ink { height: 135px; } }