/* ==========================================================================
   Plotwise website, draft 0.43. One stylesheet, written from scratch in 0.38.
   Bound by the Plotwise colours only. Inter is the one typeface.
   1 Tokens  2 Base  3 Layout  4 Type  5 Keys and links  6 Header  7 Footer
   8 Sections  9 Hero  11 Chart  12 Ledger  13 Gallery and principles
   14 Why now  15 Steps  16 Page heads  17 Forms  18 Questions  19 Documents
   20 Sign in  21 Reveal  22 Narrow screens  23 The two requests (ported)
   24 Home 0.40: folder, founder, principles, requests, decide, library
   25 App windows  26 The example, ported from 0.35  27 The example, refined for 0.41
   ========================================================================== */

/* ---------- 1 Tokens ---------- */
:root {
  --ink: #302E2B;
  --paper: #F0F0F0;
  --white: #FFFFFF;
  --desk: #E4E3E0;
  --red: #CC3641;
  --red-text: #B62E39;
  --red-wash: #F6DFE1;
  --green: #2F6B4C;
  --green-vivid: #15803D;
  --green-wash: #E3EEE7;
  --blue-1: #93B4D9;
  --blue-2: #7398C6;
  --blue-3: #4F74A0;
  --blue-wash: #E4ECF6;
  --ink-2: #66635F;
  --ink-3: #726F6A;
  --on-ink: #F0F0F0;
  --on-ink-2: #A8A49E;

  --hair: rgba(48, 46, 43, 0.10);
  --hair-2: rgba(48, 46, 43, 0.18);
  --hair-ink: rgba(240, 240, 240, 0.12);
  --lift-sm: 0 0 0 0.5px rgba(48, 46, 43, 0.12), 0 1px 2px rgba(48, 46, 43, 0.06);
  --lift: 0 0 0 0.5px rgba(48, 46, 43, 0.12), 0 2px 4px rgba(48, 46, 43, 0.04), 0 24px 48px -24px rgba(48, 46, 43, 0.28);
  --ink-grad: linear-gradient(180deg, #3A3835, #262422);

  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --max: 1280px;
  --gut: clamp(20px, 4.2vw, 56px);
  --sec: clamp(56px, 6vw, 88px);
  /* 0.40: radii follow app handoff 0.4 (modules 10, controls 7 to 8, shells 12 to 14) */
  --r: 10px;
  --r-lg: 14px;
  --r-key: 9px;
  /* 0.40: firmer headings, nearer the app's crispness. Set back to 340 / 360 to return to 0.39. */
  --w-display: 450;
  --w-head: 460;
  --blueprint: #4F74A0;
  --blueprint-hi: #6489B5;
  --brick: #B24A3B;
  --graphite: #3A3835;
}

/* ---------- 2 Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16.5px/1.6 var(--font); font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.on-ink :focus-visible, .sec--ink :focus-visible, .ftr :focus-visible, .signin__plate :focus-visible { outline-color: var(--on-ink); }
::selection { background: var(--blue-wash); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: var(--white); text-decoration: none; font-size: 15px; }
.skip-link:focus { top: 12px; }
.anchor-compat { display: block; position: relative; top: -88px; }

/* ---------- 3 Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- 4 Type ---------- */
.display { font-size: min(62px, 8.8cqi); line-height: 1.04; font-weight: var(--w-display); letter-spacing: -0.035em; }
.display .l { display: block; white-space: nowrap; }
.h1 { font-size: clamp(34px, 3.6vw, 50px); line-height: 1.06; font-weight: var(--w-display); letter-spacing: -0.032em; }
.h2 { font-size: clamp(28px, 2.6vw, 38px); line-height: 1.1; font-weight: var(--w-head); letter-spacing: -0.028em; text-wrap: balance; }
.lede { font-size: clamp(17px, 1.25vw, 19px); line-height: 1.55; color: var(--ink-2); letter-spacing: -0.008em; }
.label { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.2; font-weight: 500; color: var(--ink-2); }
.label b { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.label::after { content: ""; width: 28px; height: 1px; background: var(--hair-2); }
.sec--ink .label, .sec--ink .label b { color: var(--on-ink-2); }
.sec--ink .label::after { background: var(--hair-ink); }

/* ---------- 5 Keys and links ---------- */
.key { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 22px; border: 0; border-radius: var(--r-key); background: var(--ink-grad); color: var(--white); font-size: 15.5px; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; cursor: pointer; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.14); transition: transform 160ms var(--ease), background 160ms var(--ease); white-space: nowrap; }
.key:hover { background: linear-gradient(180deg, #4A4743, #2E2C29); }
.key:active { transform: translateY(1px); }
.key--sm { min-height: 38px; padding: 0 16px; font-size: 14.5px; }
.key--light { background: var(--paper); color: var(--ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 1px 2px rgba(0, 0, 0, 0.3); }
.key--light:hover { background: var(--white); }
.key--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair-2); }
.key--ghost:hover { background: rgba(48, 46, 43, 0.05); }
.keys { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.go { display: inline-flex; align-items: center; gap: 8px; font-size: 15.5px; font-weight: 500; text-decoration: none; color: inherit; }
.go span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--hair-2); transition: text-decoration-color 160ms var(--ease); }
.go::after { content: "\2192"; transition: transform 160ms var(--ease); }
.go:hover span { text-decoration-color: currentColor; }
.go:hover::after { transform: translateX(3px); }
.sec--ink .go span, .ftr .go span { text-decoration-color: rgba(240, 240, 240, 0.35); }
.prose a, .faq a, .doc a, .qa a, .formside a { text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--hair-2); }
.prose a:hover, .faq a:hover, .doc a:hover, .formside a:hover { text-decoration-color: currentColor; }

/* ---------- 6 Header ---------- */
/* 0.40: a floating glass bar, centred, in place of the full-width header. The band around it is
   transparent and lets clicks through; only the bar itself takes them. */
.hdr { position: sticky; top: 0; z-index: 50; padding-top: 12px; pointer-events: none; }
.hdr .hdr__in { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 18px; width: fit-content; max-width: calc(100% - 2 * var(--gut)); margin-inline: auto; padding: 6px 6px 6px 14px; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: saturate(1.6) blur(18px); backdrop-filter: saturate(1.6) blur(18px); box-shadow: 0 0 0 0.5px var(--hair-2), 0 1px 2px rgba(48, 46, 43, 0.05), 0 10px 28px -16px rgba(29, 28, 26, 0.35); transition: box-shadow 220ms var(--ease), background 220ms var(--ease); }
/* 0.42: the bar steps aside while it would cover the How it works example (site.js section 4). */
.hdr { transition: transform 280ms var(--ease), opacity 200ms var(--ease), visibility 0s linear 0s; }
html.nav-off .hdr { transform: translateY(-120%); opacity: 0; visibility: hidden; transition: transform 280ms var(--ease), opacity 200ms var(--ease), visibility 0s linear 280ms; }
html.is-scrolled .hdr .hdr__in { background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 0.5px var(--hair-2), 0 2px 4px rgba(48, 46, 43, 0.06), 0 16px 36px -18px rgba(29, 28, 26, 0.45); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.brand img { width: 38px; }
.hdr .brand { gap: 8px; font-size: 16.5px; }
.hdr .brand img { width: 26px; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav ul { list-style: none; display: flex; align-items: center; gap: 0; margin-right: 6px; }
.nav-link, .nav-login { display: inline-flex; align-items: center; min-height: 38px; padding: 0 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color 160ms var(--ease), background 160ms var(--ease); }
.nav-link:hover, .nav-login:hover { color: var(--ink); background: rgba(48, 46, 43, 0.05); }
.nav-link { position: relative; }
.nav-link[aria-current="page"] { color: var(--ink); }
/* The current-page dot sits under the word, so the bar keeps the same width and place on every page. */
.nav-link[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--ink); }
.menu-toggle { display: none; }
.pill-key .key-text-short { display: none; }

/* ---------- 7 Footer ---------- */
.ftr { background: var(--ink); color: var(--on-ink); padding: clamp(64px, 7vw, 96px) 0 32px; }
.sec--ink + .ftr, main:has(> .sec--ink:last-child) + .ftr { padding-top: 0; }
.ftr__grid { display: grid; gap: 40px 32px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sec--ink + .ftr .ftr__grid, main:has(> .sec--ink:last-child) + .ftr .ftr__grid { padding-top: clamp(56px, 6vw, 80px); border-top: 1px solid var(--hair-ink); }
.ftr__brand { grid-column: span 5; display: grid; gap: 18px; align-content: start; justify-items: start; }
.ftr__brand .brand { color: var(--on-ink); }
.ftr__brand p { max-width: 34ch; color: var(--on-ink-2); font-size: 15.5px; line-height: 1.55; }
.ftr__brand .go { color: var(--on-ink); font-size: 15px; }
.ftr nav { grid-column: span 2; }
.ftr nav:first-of-type { grid-column: 7 / span 2; }
.ftr h2 { margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--on-ink-2); }
.ftr ul { list-style: none; display: grid; gap: 2px; }
.ftr li a { display: inline-flex; min-height: 32px; align-items: center; font-size: 15px; text-decoration: none; color: var(--on-ink); opacity: 0.86; }
.ftr li a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.ftr__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: clamp(56px, 6vw, 88px); padding-top: 22px; border-top: 1px solid var(--hair-ink); font-size: 13px; color: var(--on-ink-2); }
/* 0.40: the name set very large and pressed into the Ink, cut by the bottom of the page */
.ftr { overflow: hidden; padding-bottom: 0; }
.ftr__mark { margin: clamp(40px, 5vw, 72px) 0 calc(-0.2em); font-size: min(376px, calc((100vw - 2 * var(--gut)) / 3.42)); line-height: 0.9; font-weight: 600; letter-spacing: -0.065em; white-space: nowrap; color: #383633; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.07), 0 -1px 0 rgba(0, 0, 0, 0.45); user-select: none; }
body:has(main[data-page="login"]) .hdr, body:has(main[data-page="login"]) .ftr { display: none; }

/* ---------- 8 Sections ---------- */
.sec { padding-block: var(--sec); }
.sec--paper { background: var(--paper); }
.sec--ink { background: var(--ink); color: var(--on-ink); }
.sec--top0 { padding-top: 0; }
.sh { display: grid; gap: 18px 32px; margin-bottom: clamp(32px, 3.5vw, 48px); }
.sh .label { grid-column: 1 / -1; }
@media (min-width: 1000px) {
  .sh { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
  .sh__p { padding-bottom: 6px; }
}
.sh__t { max-width: 20ch; }
.sh__p { max-width: 46ch; }

/* ---------- 9 Hero ---------- */
.hero { padding: clamp(20px, 2.5vw, 40px) 0 clamp(56px, 6vw, 88px); }
.hero__grid { display: grid; gap: 56px clamp(32px, 4vw, 72px); align-items: end; }
@media (min-width: 1100px) { .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.hero__text { display: grid; gap: 26px; padding-bottom: clamp(8px, 3vw, 48px); container-type: inline-size; }
.hero__text .lede { max-width: 46ch; }
.hero__fig { position: relative; margin: 0; }
.hero__ph { position: relative; overflow: hidden; border-radius: 18px; height: clamp(420px, calc(100svh - 190px), 600px); background: var(--desk); box-shadow: var(--lift); }
.hero__ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.hero__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(29, 28, 26, 0) 55%, rgba(29, 28, 26, 0.3)); }
.hero__cap { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.trace { position: absolute; left: clamp(-64px, -4vw, -16px); bottom: clamp(36px, 5vw, 56px); z-index: 2; width: min(330px, 84%); padding: 12px; border-radius: 16px; background: rgba(255, 255, 255, 0.86); -webkit-backdrop-filter: saturate(1.6) blur(20px); backdrop-filter: saturate(1.6) blur(20px); box-shadow: 0 0 0 0.5px rgba(48, 46, 43, 0.14), 0 30px 60px -24px rgba(29, 28, 26, 0.5); }
.trace__q { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px; background: var(--white); box-shadow: var(--lift-sm); font-size: 13.5px; font-weight: 500; }
.trace__q img { width: 18px; flex: none; }
.trace__list { list-style: none; display: grid; gap: 2px; margin: 10px 0 0; }
.trace__list li { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 8px; font-size: 13px; }
.trace__list li i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.trace__list li span { color: var(--ink-3); font-size: 12px; }
.trace__list li.is-key { background: var(--red-wash); }
.trace__list li.is-key i { background: var(--red); }
.trace__list li.is-key span { color: var(--red-text); font-weight: 500; }
.trace__a { margin-top: 10px; padding: 11px 12px; border-radius: 10px; background: var(--white); box-shadow: var(--lift-sm); font-size: 13px; line-height: 1.45; }
.trace__a b { display: block; margin-bottom: 3px; font-size: 12px; font-weight: 500; color: var(--ink-3); }

/* ---------- 11 Chart: the cost of the missed condition ---------- */
.cq { display: grid; gap: 20px; }
@media (min-width: 1000px) { .cq { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: stretch; } }
.chart__body { display: grid; gap: 18px; align-items: center; }
@media (min-width: 1100px) { .chart__body { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.chart { display: grid; gap: 14px; align-content: start; padding: clamp(18px, 2vw, 26px); border-radius: var(--r); background: var(--white); box-shadow: var(--lift); }
.chart__h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.chart__h p { max-width: 26ch; font-size: 15px; font-weight: 550; line-height: 1.35; letter-spacing: -0.01em; }
.chart__tot { text-align: right; }
.chart__tot b { display: block; font-size: clamp(30px, 2.8vw, 40px); line-height: 1; font-weight: 330; letter-spacing: -0.04em; color: var(--green-vivid); font-variant-numeric: tabular-nums; }
.chart__tot span { font-size: 12.5px; color: var(--ink-3); }
.chart svg { width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.chart .g line { stroke: rgba(48, 46, 43, 0.09); stroke-width: 0.7; }
.chart .g text { font-size: 10px; fill: var(--ink-3); }
.chart .area { fill: rgba(21, 128, 61, 0.09); }
.chart .line { fill: none; stroke: var(--green-vivid); stroke-width: 2; stroke-linejoin: round; }
.chart .m circle { fill: var(--white); stroke: var(--green-vivid); stroke-width: 1.5; }
.chart .m text { font-size: 9.5px; font-weight: 700; fill: var(--green-vivid); }
.reasons { list-style: none; display: grid; }
.reasons li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--hair); }
.reasons li:last-child { border-bottom: 0; padding-bottom: 0; }
.reasons i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--green-vivid); box-shadow: inset 0 0 0 1.25px var(--green-vivid); }
.reasons b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.reasons span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.reasons span b { color: var(--ink); }
.reasons strong { font-size: 13.5px; font-weight: 600; color: var(--green-vivid); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cq__ph { position: relative; margin: 0; min-height: 280px; overflow: hidden; border-radius: var(--r); background: var(--desk); }
.cq__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cq__ph figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255, 255, 255, 0.88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: 13px; line-height: 1.45; box-shadow: 0 0 0 0.5px rgba(48, 46, 43, 0.12); }
.cq__ph figcaption b { display: block; font-weight: 600; }
.ev { display: grid; gap: 20px clamp(32px, 4vw, 64px); margin-top: clamp(24px, 2.5vw, 32px); padding-top: 20px; border-top: 1px solid var(--hair-2); }
@media (min-width: 900px) { .ev { grid-template-columns: 1fr 1fr; } }
.ev__k { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ev__f { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: baseline; }
.ev__f b { grid-row: 1 / 3; display: block; font-size: clamp(30px, 2.6vw, 38px); line-height: 1; font-weight: 330; letter-spacing: -0.04em; }
.ev__f p { max-width: 44ch; font-size: 15px; line-height: 1.5; }
.ev__f small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.ev__f small a { color: var(--ink-2); }

/* ---------- 12 Ledger: the work arising from one request ---------- */
.work { display: grid; gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 1000px) { .work { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.work__text { display: grid; gap: 22px; align-content: start; justify-items: start; }
.work__text .h2 { max-width: 16ch; }
.work__text p { max-width: 44ch; color: var(--ink-2); }
.ledger { border-radius: var(--r); background: var(--white); box-shadow: var(--lift); overflow: hidden; }
.ledger__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--hair); }
.ledger__h b { font-size: 15px; font-weight: 600; }
.ledger__h span { font-size: 13px; color: var(--ink-3); }
.ledger table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ledger th { padding: 10px 20px 4px; text-align: left; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.ledger td { padding: 8px 20px; border-top: 1px solid var(--hair); }
.ledger td:nth-child(2), .ledger th:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.ledger td:last-child, .ledger th:last-child { text-align: right; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: rgba(48, 46, 43, 0.06); color: var(--ink-2); }
.tag--add { background: var(--blue-wash); color: var(--blue-3); }
.tag--red { background: var(--red-wash); color: var(--red-text); }
.tag--green { background: var(--green-wash); color: var(--green); }
.tag--open { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); }
.ledger__lines { padding: 4px 20px 18px; background: var(--paper); border-top: 1px solid var(--hair); }
.ledger__lines > p { padding: 10px 0 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.ledger__line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 8px 12px; margin-bottom: 5px; border-radius: 9px; background: var(--white); box-shadow: inset 2px 0 0 var(--blue-3), var(--lift-sm); font-size: 14px; }
.ledger__line span { color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ledger__line b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger__tot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-top: 10px; }
.ledger__tot b { font-size: 32px; line-height: 1; font-weight: 330; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }

/* ---------- 13 Gallery and principles ---------- */
.gal { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: clamp(10px, 1.2vw, 16px); }
.gal figure { position: relative; overflow: hidden; margin: 0; border-radius: 14px; background: var(--desk); }
.gal img { width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.gal figure:hover img { transform: scale(1.025); }
.gal figure { height: clamp(200px, 19vw, 260px); }
.pr3 { list-style: none; display: grid; gap: 24px clamp(24px, 3vw, 48px); margin-top: clamp(28px, 3vw, 36px); }
@media (min-width: 900px) { .pr3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pr3 li { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid var(--hair-2); align-content: start; }
.pr3 b { font-size: 17px; font-weight: 550; letter-spacing: -0.015em; }
.pr3 p { font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 38ch; }

/* ---------- 14 Why now ---------- */
.why__grid { display: grid; gap: 32px clamp(32px, 5vw, 96px); }
@media (min-width: 1000px) { .why__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } }
.why__t { max-width: 16ch; color: var(--on-ink); }
.why__b { display: grid; gap: 16px; }
.why__b p { max-width: 44ch; color: var(--on-ink-2); }
.why__b .keys { margin-top: 14px; }
.why__b .go { color: var(--on-ink); }

/* ---------- 15 Steps (How it works) ---------- */
.steps { list-style: none; display: grid; gap: clamp(56px, 6.5vw, 96px); }
.step { display: grid; gap: 32px clamp(40px, 6vw, 104px); align-items: center; }
@media (min-width: 960px) {
  .step { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .step:nth-child(even) .step__text { order: 2; }
}
.step__n { display: block; margin-bottom: 6px; font-size: clamp(52px, 5vw, 76px); line-height: 0.9; font-weight: 200; letter-spacing: -0.06em; color: var(--desk); font-variant-numeric: tabular-nums; }
.step__text .label { margin-top: 18px; }
.step__text .h2 { max-width: 16ch; margin: 0 0 16px; }
.step__text p { max-width: 44ch; color: var(--ink-2); }
.step__view { display: grid; gap: 8px; padding: clamp(16px, 2.2vw, 28px); border-radius: 18px; background: var(--paper); }
.card { display: grid; gap: 6px; padding: 16px 18px; border-radius: 12px; background: var(--white); box-shadow: var(--lift-sm); min-width: 0; }
.card__k { font-size: 12.5px; font-weight: 500; color: var(--ink-3); }
.card > b { font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: -0.012em; }
.card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; color: var(--ink-2); }
.card--dec { box-shadow: inset 0 0 0 1px rgba(47, 107, 76, 0.4), var(--lift-sm); }
.card--dec .card__k { color: var(--green); }
.links { position: relative; list-style: none; display: grid; gap: 6px; padding-left: 24px; }
.links::before { content: ""; position: absolute; left: 10px; top: -10px; bottom: 22px; width: 1px; background: var(--hair-2); }
.links li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 14px; border-radius: 10px; background: var(--white); box-shadow: var(--lift-sm); }
.links li::before { content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 1px; background: var(--hair-2); }
.links b { min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.links span { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.ico { width: 13px; height: 16px; border-radius: 2px; background: var(--white); box-shadow: inset 0 0 0 1px rgba(48, 46, 43, 0.32); }
.ico--folder { width: 18px; height: 14px; border-radius: 2px 4px 4px 4px; background: linear-gradient(180deg, var(--blue-1), var(--blue-2)); box-shadow: none; }
.ico--mail { width: 18px; height: 13px; }
.rows { list-style: none; display: grid; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 9px 0; border-top: 1px solid var(--hair); }
.rows li:first-child { border-top: 0; padding-top: 6px; }
.rows b { font-size: 14px; font-weight: 600; }
.rows span { grid-column: 1; font-size: 13px; color: var(--ink-2); }
.rows .tag { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.fees { list-style: none; display: grid; }
.fees li { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14px; }
.fees li:first-child { border-top: 0; padding-top: 6px; }
.fees span { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.fees b { font-weight: 600; }
.fees em { font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--hair-2); }
.total span { font-size: 13px; color: var(--ink-2); }
.total b { font-size: 30px; line-height: 1; font-weight: 330; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }

/* Work and fees: the five steps, usually and with Plotwise */
.lanes { overflow: hidden; border-radius: var(--r); background: var(--white); box-shadow: var(--lift); }
.lanes table { width: 100%; border-collapse: collapse; }
.lanes th, .lanes td { padding: 12px 22px; text-align: left; vertical-align: top; border-top: 1px solid var(--hair); font-size: 14.5px; }
.lanes thead th { border-top: 0; padding-block: 18px 14px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.lanes thead th:nth-child(3) { color: var(--ink); }
.lanes tbody th { width: 24%; font-weight: 600; }
.lanes tbody th span { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.lanes td { width: 38%; }
.lanes td:nth-child(3) { background: rgba(240, 240, 240, 0.6); }
.lanes .stack-sm { display: grid; gap: 4px; justify-items: start; }
.lanes .amt { font-size: 26px; line-height: 1; font-weight: 330; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.lanes .amt--nil { color: var(--ink-3); }
.lanes .ln { display: flex; justify-content: space-between; gap: 16px; width: min(100%, 260px); font-size: 14px; }
.lanes .ln b { font-variant-numeric: tabular-nums; }
.lanes .muted { color: var(--ink-3); }
.note { margin-top: 20px; font-size: 14px; color: var(--ink-3); max-width: 70ch; }

/* ---------- 16 Page heads ---------- */
.ph { padding: clamp(40px, 5vw, 80px) 0 clamp(40px, 4vw, 64px); }
.ph__in { display: grid; gap: 22px; justify-items: start; }
.ph .h1 { max-width: 20ch; }
.ph .lede { max-width: 56ch; }
.split { display: grid; gap: 48px clamp(40px, 6vw, 104px); align-items: start; }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.split--center { align-items: center; }
.split__text { display: grid; gap: 22px; align-content: start; justify-items: start; }
.ticks { list-style: none; display: grid; margin-top: 8px; width: 100%; }
.ticks li { display: grid; gap: 3px; padding: 16px 0; border-top: 1px solid var(--hair); font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.ticks li:last-child { border-bottom: 1px solid var(--hair); }
.ticks b { font-size: 16px; font-weight: 600; color: var(--ink); }
.photo { position: relative; overflow: hidden; margin: 0; border-radius: 20px; background: var(--desk); box-shadow: var(--lift); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo--tall { aspect-ratio: 5 / 4; max-height: 520px; }
.photo--fees { aspect-ratio: 4 / 3; width: 100%; max-width: 460px; justify-self: center; }
.principles { list-style: none; display: grid; gap: 0 clamp(32px, 4vw, 64px); counter-reset: p; }
@media (min-width: 800px) { .principles { grid-template-columns: 1fr 1fr; } }
.principles li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; padding: 20px 0; border-top: 1px solid var(--hair-2); counter-increment: p; }
.principles li::before { content: counter(p, decimal-leading-zero); grid-row: 1 / 3; font-size: 13px; font-weight: 500; color: var(--ink-3); padding-top: 4px; font-variant-numeric: tabular-nums; }
.principles b { font-size: 17px; font-weight: 550; letter-spacing: -0.015em; }
.principles p { font-size: 15.5px; line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.facts { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: clamp(32px, 3.5vw, 48px); padding-top: 24px; border-top: 1px solid var(--hair-2); }
.facts dt { font-size: 13px; color: var(--ink-3); }
.facts dd { margin-top: 4px; font-size: 20px; font-weight: 400; letter-spacing: -0.02em; }

/* ---------- 17 Forms ---------- */
.formcard { border-radius: var(--r); background: var(--white); box-shadow: var(--lift); overflow: hidden; }
.formcard__h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 18px 26px; border-bottom: 1px solid var(--hair); }
.formcard__h b { font-size: 15px; font-weight: 600; }
.formcard__h span { font-size: 13px; color: var(--ink-3); }
.form { display: grid; padding: 6px 26px 26px; }
.form__pair { display: grid; gap: 0 28px; }
@media (min-width: 640px) { .form__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.field { display: grid; gap: 4px; padding: 16px 0 8px; border-bottom: 1px solid var(--hair-2); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.field:focus-within { border-bottom-color: var(--ink); box-shadow: 0 1px 0 var(--ink); }
.field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.field .optional { margin-left: 6px; font-weight: 400; color: var(--ink-3); }
.field .hint { font-size: 13px; color: var(--ink-3); }
.input { width: 100%; min-height: 34px; padding: 4px 0; border: 0; background: transparent; font-size: 17px; outline: none; }
textarea.input { min-height: 88px; resize: vertical; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 24px; cursor: pointer; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2366635F' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 2px center / 10px 6px; }
.form .keys { margin-top: 24px; }
.field--error { border-bottom-color: var(--red); }
.field-error { margin-top: 4px; font-size: 13.5px; color: var(--red-text); }
.form-banner, .form-result { margin-top: 18px; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; }
.form-banner--error { background: var(--red-wash); color: var(--red-text); }
.form-result { background: var(--paper); }
.form-result .label { margin-bottom: 4px; }
.form-result .label::after { display: none; }
.formside { display: grid; gap: 18px; padding-top: 4px; }
.formside h2 { font-size: 15px; font-weight: 600; color: var(--ink); }
.steps3 { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; counter-reset: s; }
.steps3 li { counter-increment: s; padding: 12px 13px; border-radius: 12px; background: var(--paper); font-size: 14px; line-height: 1.4; }
.steps3 li::before { content: counter(s); display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--ink-3); }

/* ---------- 18 Questions ---------- */
.faqs { display: grid; gap: 48px clamp(40px, 5vw, 80px); align-items: start; }
@media (min-width: 1000px) { .faqs { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.faqs .h2 { margin-bottom: 20px; }
.faq details { border-top: 1px solid var(--hair-2); }
.faq details:last-child { border-bottom: 1px solid var(--hair-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 17px 0; cursor: pointer; list-style: none; font-size: 17px; font-weight: 500; letter-spacing: -0.012em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 17px; font-weight: 400; transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 48px 22px 0; color: var(--ink-2); max-width: 60ch; }
.qa { display: none; flex-direction: column; height: 430px; border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 0.5px var(--hair-2); overflow: hidden; }
.qa.is-live { display: flex; }
.qa__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--white); border-bottom: 1px solid var(--hair); }
.qa__logo { width: 24px; }
.qa__id { display: grid; line-height: 1.25; }
.qa__id strong { font-size: 14.5px; font-weight: 600; }
.qa__id span { font-size: 12.5px; color: var(--ink-3); }
.qa__x { display: none; }
.qa__body { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px; overflow-y: auto; }
.qa__bubble { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; }
.qa__bubble--bot { align-self: flex-start; background: var(--white); border-bottom-left-radius: 4px; box-shadow: var(--lift-sm); }
.qa__bubble--user { align-self: flex-end; background: var(--ink); color: var(--white); border-bottom-right-radius: 4px; }
.qa__typing { align-self: flex-start; font-size: 13px; color: var(--ink-3); }
.qa__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qa__chip { padding: 7px 12px; border: 0; border-radius: 999px; background: var(--white); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 13.5px; cursor: pointer; text-align: left; }
.qa__chip:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.qa__input { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 16px; background: var(--white); border-top: 1px solid var(--hair); }
.qa__input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 15px; }
.qa__send { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink-grad); color: var(--white); cursor: pointer; }
.qa__send svg { width: 16px; }

/* ---------- 19 Documents (Data and privacy, Privacy notice) ---------- */
.doc section { display: grid; gap: 14px 32px; padding: 32px 0; border-top: 1px solid var(--hair-2); }
.doc section:last-child { border-bottom: 1px solid var(--hair-2); }
@media (min-width: 900px) { .doc section { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.doc h2 { font-size: 19px; font-weight: 550; letter-spacing: -0.015em; }
.doc .prose { display: grid; gap: 14px; max-width: 64ch; color: var(--ink-2); }
.doc ul { display: grid; gap: 8px; padding-left: 20px; }
.draft { padding-left: 14px; font-size: 14.5px; color: var(--ink-3); border-left: 2px solid var(--hair-2); }
.draft::before { content: "To complete. "; font-weight: 600; color: var(--ink-2); }

/* ---------- 20 Sign in ---------- */
.signin { display: grid; min-height: 100svh; padding: 12px; gap: 12px; background: var(--desk); }
@media (min-width: 960px) { .signin { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.signin__plate { display: grid; grid-template-rows: auto 1fr auto; gap: 40px; padding: clamp(28px, 4vw, 56px); border-radius: 18px; background: linear-gradient(180deg, #353330, #1D1C1A); color: var(--on-ink); }
.signin__plate .brand { color: var(--on-ink); }
.signin__mid { align-self: center; display: grid; gap: 18px; }
.signin__title { max-width: 12ch; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.04; font-weight: 340; letter-spacing: -0.04em; }
.signin__lead { max-width: 36ch; color: var(--on-ink-2); }
.signin__foot { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--on-ink-2); }
.signin__panel { position: relative; display: grid; place-items: center; padding: 80px 24px 40px; border-radius: 18px; background: var(--white); }
.signin__back { position: absolute; left: 20px; top: 18px; padding: 8px 12px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
.signin__back:hover { background: rgba(48, 46, 43, 0.05); color: var(--ink); }
.signin__card { display: grid; gap: 16px; width: min(380px, 100%); }
.signin__h { font-size: 30px; line-height: 1.1; font-weight: 400; letter-spacing: -0.03em; }
.signin__field { display: grid; gap: 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.signin__field input { height: 46px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); font-size: 16px; color: var(--ink); outline: none; }
.signin__field input:focus { box-shadow: inset 0 0 0 1.5px var(--ink); }
.signin__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--ink-2); }
.signin__check { display: inline-flex; align-items: center; gap: 8px; }
.signin__or { text-align: center; font-size: 13px; color: var(--ink-3); }
.signin__note { font-size: 14px; color: var(--ink-2); text-align: center; }
.signin .key { width: 100%; }

/* 404 */
.nf { min-height: 62vh; display: grid; align-content: center; }

/* ---------- 21 Reveal: content settles in as it comes into view, once ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 800ms var(--ease), transform 800ms var(--ease); }
  html.js [data-reveal].is-in { opacity: 1; transform: none; }
  html.js [data-seq] > * { opacity: 0; transform: translateY(8px); transition: opacity 450ms var(--ease), transform 450ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms + 150ms); }
  html.js [data-seq].is-in > * { opacity: 1; transform: none; }
  html.js .win { transform: translateY(10px) scale(0.98); }
  html.js [data-seq].is-in > .win { transform: none; }
  html.js [data-loop]:not(.is-in) *, html.js [data-loop]:not(.is-in) *::before, html.js [data-loop]:not(.is-in) *::after { animation-play-state: paused !important; }
  html.js .chart .line { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1800ms var(--ease) 300ms; }
  html.js .chart.is-in .line { stroke-dashoffset: 0; }
  html.js .chart .area { opacity: 0; transition: opacity 900ms var(--ease) 1500ms; }
  html.js .chart.is-in .area { opacity: 1; }
  html.js .chart .m { opacity: 0; transition: opacity 400ms var(--ease); }
  html.js .chart.is-in .m { opacity: 1; }
  html.js .chart.is-in .m1 { transition-delay: 700ms; } html.js .chart.is-in .m2 { transition-delay: 1150ms; }
  html.js .chart.is-in .m3 { transition-delay: 1350ms; } html.js .chart.is-in .m4 { transition-delay: 1850ms; }
}

/* ---------- 22 Narrow screens ---------- */
@media (max-width: 1023.98px) {
  .menu-toggle { display: inline-flex; order: 3; }
  .nav { gap: 8px; }
  .hdr .hdr__in { width: calc(100% - 2 * var(--gut)); }
  .nav { margin-left: auto; }
  .nav ul { position: absolute; left: 0; right: 0; top: calc(100% + 8px); flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 6px 18px 14px; border-radius: var(--r-lg); background: rgba(255, 255, 255, 0.98); box-shadow: 0 0 0 0.5px var(--hair-2), 0 24px 40px -20px rgba(29, 28, 26, 0.35); }
  .nav ul[hidden] { display: none; }
  .nav ul .nav-link { min-height: 54px; padding: 0 2px; border-radius: 0; font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--hair); }
  .nav ul .nav-link:hover { background: transparent; }
  .ftr__brand { grid-column: 1 / -1; }
  .ftr nav, .ftr nav:first-of-type { grid-column: span 4; }
  .trace { left: 16px; }
}
@media (max-width: 759.98px) {
  .chart .g text { font-size: 11px; }
  .chart .m text { font-size: 9px; }
  .reasons span b { display: block; }
  .gal { grid-template-columns: 1fr 1fr; } .gal .c { display: none; } .gal figure { height: 200px; }
  .lanes thead { display: none; }
  .lanes tr { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
  .lanes tr:first-child { border-top: 0; }
  .lanes tbody th { grid-column: 1 / -1; width: auto; padding: 16px 16px 2px; border-top: 0; }
  .lanes td { width: auto; border-top: 0; padding: 8px 16px 16px; }
  .lanes td::before { content: attr(data-k); display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
  .lanes .amt { font-size: 24px; }
  .steps3 { grid-template-columns: 1fr; }
}
@media (max-width: 559.98px) {
  .nav-login { padding: 0 8px; }
  .pill-key .key-text-long { display: none; }
  .pill-key .key-text-short { display: inline; }
  .hdr .key--sm { padding: 0 14px; }
  .menu-toggle { padding: 0 14px; }
  .ftr li a { font-size: 14px; }
  .links li { grid-template-columns: 18px minmax(0, 1fr); row-gap: 1px; }
  .links span { grid-column: 2; }
  .ledger th, .ledger td { padding-inline: 14px; }
  .ledger__h, .ledger__lines { padding-inline: 14px; }
  .trace { position: relative; left: auto; bottom: auto; width: auto; margin: -64px 12px 0; }
  .hero__ph { height: 360px; }
  .form { padding-inline: 18px; }
  .formcard__h { padding-inline: 18px; }
}
@media (max-width: 379.98px) { .brand span { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- 23 The request, by hand and with the record (ported from draft 0.37) ----------
   The diagram the founder preferred, brought across unchanged: every rule that styled it in
   0.37, in the same order, with the tokens it used scoped to .tw4. It opens on a complete frame
   and its loop runs once it is in view (site.js section 5). */
.tw4 { --boundary-red: #CC3641; --deep-red: #8E2129; --desk: #E4E3E0; --ease: cubic-bezier(0.2, 0, 0, 1); --fold: #0A6FE8; --folder-blue: #93B4D9; --folder-blue-back: #4F74A0; --folder-blue-low: #7398C6; --font-mono: var(--font-sans); --font-sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; --frame: linear-gradient(180deg, #FBFBFA 0%, #F4F4F2 100%); --gap: 24px; --green: #2F6B4C; --green-vivid: #15803D; --hair: rgba(48, 46, 43, 0.10); --hair-2: rgba(48, 46, 43, 0.16); --ink: #302E2B; --ink-3: #726F6A; --ink-grad: linear-gradient(180deg, #47443F 0%, #2C2A27 100%); --key-grad: linear-gradient(180deg, #FFFFFF 0%, #F5F5F3 100%); --lamp-red: #F06A73; --lift-sm: 0 0 0 0.5px rgba(48, 46, 43, 0.14), 0 1px 2px rgba(48, 46, 43, 0.07); --paper: #F0F0F0; --ph-line: #DEDCD8; --plate-label: #A8A49E; --record-grad: linear-gradient(180deg, #D03A45 0%, #BE2F3A 100%); --red-wash: #F6DFE1; --rule: #D8D6D2; --rule-strong: #BDB9B3; --sage: #E8F0FD; --secondary-ink: #66635F; --shine: inset 0 1px 0 rgba(255, 255, 255, 0.95); --text-red: #B62E39; --white: #FFFFFF; }
.tw4__ln { display: block; height: 5px; width: var(--w, 80%); border-radius: 3px; background: var(--ph-line); }
.tw4__mono, .tw4__crumb, .tw4__k { font: 500 10px/1.2 var(--font-mono); color: var(--secondary-ink); letter-spacing: 0.02em; }
.tw4__pill { display: inline-flex; align-items: center; gap: 5px; justify-self: start; align-self: center; padding: 3px 7px; border: 1px solid var(--ink); border-radius: 999px; font: 500 9px/1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); background: var(--white); white-space: nowrap; }
.tw4__pill--red::before, .tw4__pill--dash::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--boundary-red); }
.tw4__pill--dash { border-style: dashed; border-color: var(--boundary-red); }
.tw4__chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border: 1px solid var(--ink); border-radius: 999px; font: 500 9.5px/1.3 var(--font-mono); color: var(--ink); background: var(--white); white-space: nowrap; }
.tw4__chip::after { content: "\2197"; font-size: 8.5px; }
.tw4__chip--pick { background: var(--ink); color: var(--paper); }
.tw4__rec { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 5px; background: var(--boundary-red); color: var(--white); font: 500 11.5px/1 var(--font-sans); box-shadow: 0 2px 0 var(--deep-red); white-space: nowrap; }
.tw4__rec i { width: 8px; height: 8px; border-radius: 999px; border: 1.25px solid var(--white); }
.tw4__stg { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 999px; box-shadow: inset 0 0 0 1.25px currentColor; }
.tw4__stg--done { background: var(--green); box-shadow: none; }
.tw4__stg--on { background: var(--ink); box-shadow: none; }
.tw4 { margin: 0; display: grid; gap: 18px; }
.tw4__head { display: grid; gap: 8px var(--gap); }
@media (min-width: 1000px) {
  .tw4__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
}
.tw4__head p { color: var(--secondary-ink); max-width: 60ch; }
.tw4__grid { display: grid; gap: 12px; }
@media (min-width: 960px) {
  .tw4__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.tw4__panel { display: grid; grid-template-rows: auto 1fr auto; border-radius: 8px; overflow: hidden; background: var(--desk); min-width: 0; box-shadow: 0 0 0 1px var(--rule); }
.tw4__bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--ink); color: var(--paper); }
.tw4__bar b { font-weight: 500; font-size: 14.5px; }
.tw4__bar > span:last-child { margin-left: auto; font: 500 11px/1 var(--font-mono); color: var(--plate-label); }
.tw4__lamp { width: 8px; height: 8px; border-radius: 999px; background: var(--fold); }
.tw4__lamp--off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lamp-red); }
.tw4__mac { position: relative; height: 380px; overflow: hidden; background: linear-gradient(160deg, #D3D6D8 0%, #C3C8CB 60%, #B8BEC2 100%); }
.tw4__menu { position: absolute; z-index: 25; left: 0; right: 0; top: 0; height: 18px; display: flex; align-items: center; gap: 10px; padding: 0 10px; background: rgba(255, 255, 255, 0.72); }
.tw4__apple { width: 8px; height: 8px; border-radius: 2px; background: var(--ink); }
.tw4__ml { display: block; width: var(--w); height: 4px; border-radius: 2px; background: rgba(48, 46, 43, 0.5); }
.tw4__clock { margin-left: auto; font: 500 9px/1 var(--font-mono); color: var(--ink); }
.tw4__fd { position: absolute; width: 48px; display: grid; justify-items: center; gap: 3px; font: 500 8px/1.1 var(--font-mono); color: var(--ink); text-align: center; white-space: nowrap; }
.tw4__fd i { width: 30px; height: 22px; border-radius: 2px 5px 3px 3px; background: #8FB6EA; box-shadow: inset 0 4px 0 #B3CFF3; }
.tw4__fd--doc i { width: 20px; height: 26px; border-radius: 1px; background: var(--white); box-shadow: inset 0 0 0 1px var(--rule-strong), inset 0 -6px 0 var(--paper); }
.tw4__win { position: absolute; display: grid; grid-template-rows: auto 1fr; background: var(--white); border-radius: 6px; border: 1px solid rgba(48, 46, 43, 0.18); box-shadow: 0 14px 28px -14px rgba(20, 20, 20, 0.55); overflow: hidden; }
.tw4__tb { display: flex; align-items: center; gap: 4px; height: 17px; padding: 0 7px; background: #ECEBE8; border-bottom: 1px solid var(--rule); }
.tw4__tb i { width: 6px; height: 6px; border-radius: 999px; background: #CFCCC7; }
.tw4__tb b { margin-left: 6px; font: 500 8.5px/1 var(--font-mono); color: var(--secondary-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw4__mail { display: grid; align-content: start; gap: 7px; padding: 9px; }
.tw4__mail > span { display: flex; align-items: center; gap: 6px; }
.tw4__dot { flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--fold); }
.tw4__dot--off { background: var(--rule-strong); }
.tw4__dirs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 8px; align-content: start; }
.tw4__dirs i { height: 17px; border-radius: 2px 4px 3px 3px; background: #8FB6EA; box-shadow: inset 0 3px 0 #B3CFF3; }
.tw4__w3 { grid-template-rows: auto auto 1fr; }
.tw4__tabs { display: flex; gap: 2px; padding: 3px 6px 0; background: #ECEBE8; }
.tw4__tabs i { flex: 1; height: 13px; border-radius: 4px 4px 0 0; background: #DAD8D4; }
.tw4__tabs i.is-on { background: var(--white); }
.tw4__url { margin: 4px 8px 0; height: 8px; border-radius: 4px; background: var(--paper); }
.tw4__page { display: grid; align-content: start; gap: 6px; padding: 8px; }
.tw4__pdf { display: grid; align-content: start; gap: 7px; padding: 10px; background: #F7F7F5; }
.tw4__cond { justify-self: start; margin-top: 30px; padding: 2px 5px; border: 1px solid var(--rule-strong); border-radius: 3px; font: 500 8.5px/1.2 var(--font-mono); color: var(--secondary-ink); }
.tw4__sheet { margin: 6px; background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px); background-size: 100% 12px, 25% 100%; box-shadow: inset 0 0 0 1px var(--rule-strong); }
.tw4__dwg { margin: 6px; box-shadow: inset 0 0 0 1px var(--rule-strong); background: linear-gradient(var(--ink) 0 0) 20% 30% / 60% 1px no-repeat, linear-gradient(var(--ink) 0 0) 20% 30% / 1px 50% no-repeat, repeating-linear-gradient(45deg, transparent 0 6px, rgba(48, 46, 43, 0.1) 6px 7px); }
.tw4__reply { display: grid; align-content: start; gap: 6px; padding: 8px 9px; }
.tw4__sent { justify-self: end; padding: 2px 7px; border: 1px solid var(--ink); border-radius: 999px; font: 500 8.5px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.tw4__toast { position: absolute; z-index: 22; right: 8px; width: 148px; display: flex; gap: 8px; padding: 7px 9px; border-radius: 7px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 20px -10px rgba(20, 20, 20, 0.5); font-size: 10px; line-height: 1.25; color: var(--secondary-ink); }
.tw4__toast b { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink); }
.tw4__toast i { flex: none; width: 16px; height: 16px; border-radius: 4px; background: var(--ink); }
.tw4__n1 { top: 24px; }
.tw4__n2 { top: 66px; }
.tw4__miss { position: absolute; z-index: 24; left: 56%; top: 54%; padding: 4px 9px; border: 1px solid var(--boundary-red); border-radius: 999px; background: var(--red-wash); color: var(--text-red); font: 500 9.5px/1.2 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; }
.tw4__dock { position: absolute; z-index: 23; left: 50%; bottom: 6px; transform: translateX(-50%); display: flex; gap: 5px; padding: 4px 6px; border-radius: 8px; background: rgba(255, 255, 255, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
.tw4__dock i { position: relative; width: 20px; height: 20px; border-radius: 5px; background: #DAD8D4; }
.tw4__dock i:nth-child(2n) { background: #CFCCC7; }
.tw4__dock b { position: absolute; top: -4px; right: -5px; min-width: 13px; height: 13px; padding: 0 3px; border-radius: 999px; background: var(--boundary-red); color: var(--white); font: 500 7.5px/13px var(--font-sans); text-align: center; }
.tw4__cursor { position: absolute; z-index: 30; left: 50%; top: 50%; opacity: 0; pointer-events: none; }
.tw4__cursor path { fill: var(--ink); stroke: var(--white); stroke-width: 1.4; stroke-linejoin: round; }
.tw4__w1 { z-index: 2; }
.tw4__w2 { z-index: 3; }
.tw4__w3 { z-index: 4; }
.tw4__w4 { z-index: 5; }
.tw4__w5 { z-index: 6; }
.tw4__w6 { z-index: 7; }
.tw4__w7 { z-index: 8; }
.tw4__desk { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 10px; height: 380px; padding: 12px; }
.tw4__app { display: grid; align-content: start; gap: 8px; padding: 12px 14px; background: var(--white); border-radius: 6px; box-shadow: 0 0 0 1px var(--rule); min-width: 0; }
.tw4__ah { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; }
.tw4__ah b { grid-column: 1; font-weight: 500; font-size: 15px; line-height: 1.2; }
.tw4__ah .tw4__pill { grid-column: 2; grid-row: 1 / span 2; }
.tw4__stgs { display: flex; align-items: center; gap: 14px; padding-bottom: 7px; border-bottom: 1px solid var(--rule); font-size: 12px; color: var(--secondary-ink); white-space: nowrap; overflow: hidden; }
.tw4__stgs > span { display: inline-flex; align-items: center; gap: 6px; }
.tw4__stgs .is-on { color: var(--ink); font-weight: 500; }
.tw4__linked { margin-left: auto; font: 500 10px/1 var(--font-mono); }
.tw4__linked i { font-style: normal; padding: 2px 6px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); }
.tw4__cnd { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 5px; font-size: 12.5px; }
.tw4__cnd b { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--ink); border-radius: 999px; font: 500 9.5px/1 var(--font-mono); }
.tw4__cnd--await { outline: 1.25px dashed var(--boundary-red); outline-offset: -1.25px; }
.tw4__cnd--found { background: var(--sage); box-shadow: inset 3px 0 0 var(--ink); }
.tw4__act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--rule); }
.tw4__act .tw4__rec { margin-left: auto; }
.tw4__flow { position: relative; list-style: none; margin: 0; padding: 0 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; align-items: center; background: var(--white); border-radius: 6px; box-shadow: 0 0 0 1px var(--rule); }
.tw4__flow::before { content: "The request, as a flow"; position: absolute; left: 12px; top: 10px; font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secondary-ink); }
.tw4__rail { position: absolute; left: 12px; right: 12px; top: calc(50% - 5px); width: calc(100% - 24px); height: 10px; z-index: 0; }
.tw4__rail line { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.tw4__fn { position: relative; z-index: 1; display: grid; gap: 3px; padding: 8px 9px; background: var(--white); border: 1px solid var(--rule-strong); border-radius: 5px; min-width: 0; }
.tw4__fk { font: 500 8.5px/1.1 var(--font-mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--secondary-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw4__fn b { font-weight: 500; font-size: 13px; white-space: nowrap; }
.tw4__fn--key { background: var(--sage); border-color: var(--ink); }
.tw4__fn--dec { border: 1.5px solid var(--ink); }
.tw4__pulse { position: absolute; z-index: 2; left: 12px; top: calc(50% - 4px); width: 8px; height: 8px; margin-left: -4px; border-radius: 999px; background: var(--boundary-red); opacity: 0; }
.tw4__read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; background: var(--white); border-top: 1px solid var(--rule); }
.tw4__read > div { display: grid; gap: 5px; align-content: start; padding: 9px 14px 11px; min-width: 0; }
.tw4__read > div + div { border-left: 1px solid var(--rule); }
.tw4__read dt { font: 500 9.5px/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--secondary-ink); }
.tw4__read dd { margin: 0; display: flex; align-items: center; gap: 7px; min-height: 18px; font-size: 14.5px; font-weight: 500; }
.tw4__read .dm { height: 14px; color: var(--ink); }
.tw4__bad { color: var(--text-red); }
.tw4__bad::before { content: ""; width: 7px; height: 7px; border-radius: 999px; border: 1.25px dashed var(--boundary-red); }
.tw4__good::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ink); }
.tw4__meter { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--paper); overflow: hidden; }
.tw4__meter i { display: block; width: 92%; height: 100%; background: var(--boundary-red); }
.tw4__meter--short i { width: 22%; background: var(--ink); }
@media (max-width: 639.98px) {
  .tw4__mac { height: 300px; }
  .tw4__toast, .tw4__cursor { display: none; }
  .tw4__miss { left: auto; right: 8px; }
  .tw4__bar > span:last-child { display: none; }
  .tw4__desk { height: auto; }
  .tw4__flow { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 32px 10px 10px; }
  .tw4__rail, .tw4__pulse { display: none; }
  .tw4__stgs .tw4__linked { display: none; }
  .tw4__read > div { padding: 9px 9px 11px; }
}
@keyframes tw4-w1 { 0%, 3.99% { opacity: 0; transform: translateY(8px) scale(0.97); } 6.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-w2 { 0%, 11.99% { opacity: 0; transform: translateY(8px) scale(0.97); } 14.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-w3 { 0%, 19.99% { opacity: 0; transform: translateY(8px) scale(0.97); } 22.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-w4 { 0%, 27.99% { opacity: 0; transform: translateY(8px) scale(0.97); } 30.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-w5 { 0%, 37.99% { opacity: 0; transform: translateY(8px) scale(0.97); } 40.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-w6 { 0%, 45.99% { opacity: 0; transform: translateY(8px) scale(0.97); } 48.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-w7 { 0%, 55.99% { opacity: 0; transform: translateY(8px) scale(0.97); } 58.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-n1 { 0%, 15.99% { opacity: 0; transform: translateY(-6px); } 18.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-n2 { 0%, 33.99% { opacity: 0; transform: translateY(-6px); } 36.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-cur { 0% { left: 50%; top: 105%; opacity: 0; } 2% { opacity: 1; } 3.5%, 6% { left: 25%; top: 30%; } 11.5%, 14% { left: 44%; top: 34%; } 19.5%, 22% { left: 35%; top: 50%; } 27.5%, 30% { left: 66%; top: 30%; } 37.5%, 40% { left: 60%; top: 60%; } 45.5%, 48% { left: 23%; top: 66%; } 55.5%, 58% { left: 75%; top: 72%; } 68% { left: 75%; top: 72%; opacity: 1; } 72%, 100% { left: 75%; top: 72%; opacity: 0; } }
@keyframes tw4-sent { 0%, 61.99% { opacity: 0; } 65%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes tw4-miss { 0%, 65.99% { opacity: 0; transform: translateY(4px) scale(1.1); } 68.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-readh { 0%, 69.99% { opacity: 0; } 73%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes tw4-meter { 0%, 4% { width: 0; } 70%, 93% { width: 92%; } 97%, 100% { width: 0; } }
@keyframes tw4-app { 0%, 2.99% { opacity: 0; transform: translateY(5px); } 5.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-a1 { 0%, 11.99% { opacity: 0; transform: translateY(4px); } 14.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-a2 { 0%, 19.99% { opacity: 0; transform: translateY(4px); } 22.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-a3 { 0%, 27.99% { opacity: 0; transform: translateY(4px); } 30.5%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-press { 0%, 33% { transform: none; box-shadow: 0 2px 0 var(--deep-red); } 34.5%, 36% { transform: translateY(2px); box-shadow: 0 0 0 var(--deep-red); } 38%, 100% { transform: none; box-shadow: 0 2px 0 var(--deep-red); } }
@keyframes tw4-f1 { 0%, 5.5% { opacity: 0.35; } 7.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0.35; } }
@keyframes tw4-f2 { 0%, 13.5% { opacity: 0.35; } 15.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0.35; } }
@keyframes tw4-f3 { 0%, 21.5% { opacity: 0.35; } 23.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0.35; } }
@keyframes tw4-f4 { 0%, 35.5% { opacity: 0.35; } 37.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0.35; } }
@keyframes tw4-f5 { 0%, 43.5% { opacity: 0.35; } 45.5%, 93% { opacity: 1; } 97%, 100% { opacity: 0.35; } }
@keyframes tw4-pulse { 0%, 5% { left: 12px; opacity: 0; } 6% { opacity: 1; } 44% { left: calc(100% - 12px); opacity: 1; } 47%, 100% { left: calc(100% - 12px); opacity: 0; } }
@keyframes tw4-readr { 0%, 49.99% { opacity: 0; } 53%, 93% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes tw4-meter2 { 0%, 4% { width: 0; } 30%, 93% { width: 22%; } 97%, 100% { width: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .tw4__w1 { animation: tw4-w1 14s var(--ease) infinite both; }
  .tw4__w2 { animation: tw4-w2 14s var(--ease) infinite both; }
  .tw4__w3 { animation: tw4-w3 14s var(--ease) infinite both; }
  .tw4__w4 { animation: tw4-w4 14s var(--ease) infinite both; }
  .tw4__w5 { animation: tw4-w5 14s var(--ease) infinite both; }
  .tw4__w6 { animation: tw4-w6 14s var(--ease) infinite both; }
  .tw4__w7 { animation: tw4-w7 14s var(--ease) infinite both; }
  .tw4__n1 { animation: tw4-n1 14s var(--ease) infinite both; }
  .tw4__n2 { animation: tw4-n2 14s var(--ease) infinite both; }
  .tw4__cursor { animation: tw4-cur 14s cubic-bezier(0.45, 0, 0.2, 1) infinite both; }
  .tw4__sent { animation: tw4-sent 14s var(--ease) infinite both; }
  .tw4__miss { animation: tw4-miss 14s var(--ease) infinite both; }
  .tw4__panel--hand .tw4__read dd { animation: tw4-readh 14s var(--ease) infinite both; }
  .tw4__meter i { animation: tw4-meter 14s linear infinite both; }
  .tw4__app { animation: tw4-app 14s var(--ease) infinite both; }
  .tw4__a1 { animation: tw4-a1 14s var(--ease) infinite both; }
  .tw4__a2 { animation: tw4-a2 14s var(--ease) infinite both; }
  .tw4__a3 { animation: tw4-a3 14s var(--ease) infinite both; }
  .tw4__rec { animation: tw4-press 14s linear infinite both; }
  .tw4__f1 { animation: tw4-f1 14s var(--ease) infinite both; }
  .tw4__f2 { animation: tw4-f2 14s var(--ease) infinite both; }
  .tw4__f3 { animation: tw4-f3 14s var(--ease) infinite both; }
  .tw4__f4 { animation: tw4-f4 14s var(--ease) infinite both; }
  .tw4__f5 { animation: tw4-f5 14s var(--ease) infinite both; }
  .tw4__pulse { animation: tw4-pulse 14s linear infinite both; }
  .tw4__panel--rec .tw4__read dd { animation: tw4-readr 14s var(--ease) infinite both; }
  .tw4__meter--short i { animation: tw4-meter2 14s linear infinite both; }
}
@media (prefers-reduced-motion: reduce) {
  .tw4__cursor, .tw4__pulse { display: none; }
}
.tw4__panel { background: linear-gradient(180deg, #F3F3F1 0%, #EAE9E6 100%); border: 0; border-radius: 12px; box-shadow: 0 0 0 0.5px rgba(48, 46, 43, 0.14), 0 1px 2px rgba(48, 46, 43, 0.05), 0 18px 40px -18px rgba(48, 46, 43, 0.28), var(--shine); }
.tw4__bar { background: var(--frame); color: var(--ink); border-bottom: 1px solid var(--hair); padding: 10px 14px; }
.tw4__bar b { font-weight: 600; font-size: 13.5px; letter-spacing: -0.005em; }
.tw4__bar > span:last-child { color: var(--ink-3) !important; font: 400 12px/1 var(--font-sans) !important; }
.tw4__lamp { width: 7px; height: 7px; background: var(--ink); }
.tw4__lamp--off { background: transparent; box-shadow: inset 0 0 0 1.4px var(--boundary-red); }
.tw4__read { background: var(--white); border-top: 1px solid var(--hair); }
.tw4__read > div + div { border-left-color: var(--hair) !important; }
.tw4__app, .tw4__flow { border: 0 !important; border-radius: 10px; box-shadow: var(--lift-sm), var(--shine); }
.tw4__fn { border: 0 !important; border-radius: 8px; box-shadow: var(--lift-sm); }
.tw4__fn--key { box-shadow: 0 0 0 1px var(--folder-blue-back), var(--lift-sm); }
.tw4__bar > span:last-child, .tw4__chip, .tw4__clock, .tw4__cnd b, .tw4__cond, .tw4__fd, .tw4__fk, .tw4__flow::before, .tw4__linked, .tw4__miss, .tw4__mono, .tw4__crumb, .tw4__k, .tw4__pill, .tw4__read dt, .tw4__sent, .tw4__tb b { letter-spacing: 0.005em; font-feature-settings: "tnum" 1; }
.tw4__fk, .tw4__flow::before, .tw4__miss, .tw4__pill, .tw4__read dt, .tw4__sent { text-transform: none; letter-spacing: 0.005em; }
.tw4__chip, .tw4__cnd b, .tw4__fn--dec, .tw4__linked i, .tw4__pill, .tw4__sent { border-color: var(--hair-2); }
.tw4__grid { gap: 16px; }
.tw4__mac { height: auto; min-height: 250px; }
.tw4__read > div { padding: 5px 14px 7px; }
.tw4__read dd { font-size: 13.5px; min-height: 16px; }
.tw4__panel--rec { grid-template-rows: auto auto auto auto; }
.tw5 { display: grid; grid-template-rows: auto auto 1fr; gap: 7px; min-height: 0; padding: 10px 12px 10px; background: linear-gradient(180deg, #F7F7F5, #EFEEEB); }
.tw5__ask { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 10px; border-radius: 10px; background: var(--white); box-shadow: var(--lift-sm), var(--shine); }
.tw5__ask img { width: 18px; flex: none; }
.tw5__q { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; }
.tw5__typed { display: inline-block; max-width: 100%; overflow: hidden; vertical-align: bottom; border-right: 1.5px solid var(--ink); padding-right: 2px; }
.tw5__send { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--ink-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,0.16); position: relative; }
.tw5__send::after { content: ""; position: absolute; left: 8.5px; top: 7px; width: 6px; height: 6px; border-left: 1.5px solid #fff; border-top: 1.5px solid #fff; transform: rotate(45deg); }
.tw5__trace { display: grid; gap: 5px; position: relative; }
.tw5__status { position: absolute; right: 2px; top: -1px; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-3); opacity: 0; }
.tw5__spin { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(48,46,43,0.2); border-top-color: var(--ink); animation: tw5-spin 0.8s linear infinite; }
@keyframes tw5-spin { to { transform: rotate(360deg); } }
.tw5__hits { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tw5__hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 6px; padding: 5px 8px 6px; border-radius: 7px; background: var(--white); box-shadow: var(--lift-sm); font-size: 11px; line-height: 1.3; color: var(--secondary-ink); min-width: 0; }
.tw5__hit b { grid-row: 1; grid-column: 1; font-weight: 600; font-size: 11.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw5__hit em { grid-row: 1; grid-column: 2; font-style: normal; font-size: 10px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.tw5__hit > span { grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw5__hit--key { box-shadow: 0 0 0 1px rgba(204,54,65,0.5), var(--lift-sm); }
.tw5__hit--key em { color: var(--text-red); }
.tw5__hit mark { background: #F9EDA0; color: var(--ink); padding: 0 3px; border-radius: 3px; }
.tw5__doc { width: 10px; height: 12px; fill: #fff; stroke: var(--secondary-ink); stroke-width: 0.9; }
.tw5__ans { align-self: end; display: grid; gap: 5px; padding: 9px 11px 10px; border-radius: 12px 12px 12px 4px; background: var(--white); box-shadow: var(--lift-sm), var(--shine); }
.tw5__who { font-size: 10.5px; color: var(--ink-3); }
.tw5__ans p { margin: 0; font-size: 12px; line-height: 1.4; }
.tw5__foot { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.tw5__cite { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px 0 5px; border-radius: 6px; font-size: 10.5px; font-weight: 500; background: var(--key-grad); box-shadow: var(--lift-sm); }
.tw5__rec { margin-left: auto; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font-size: 11px; font-weight: 500; color: #fff; background: var(--record-grad); }
.tw5__flow { position: relative; list-style: none; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 8px 12px 9px; background: var(--white); border-top: 1px solid var(--hair); }
.tw5__fn { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 7px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--white); box-shadow: var(--lift-sm); }
.tw5__fn span { grid-column: 2; font-size: 9.5px; color: var(--ink-3); line-height: 1.1; }
.tw5__fn b { grid-column: 2; font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.tw5__fn--key { box-shadow: 0 0 0 1px var(--folder-blue-back), var(--lift-sm); }
.tw5__ico { grid-row: 1 / 3; width: 16px; height: 16px; border-radius: 4px; }
.tw5__ico--doc { background: #fff; box-shadow: inset 0 0 0 1px var(--hair-2); }
.tw5__ico--folder { border-radius: 2px 4px 4px 4px; background: linear-gradient(180deg, var(--folder-blue), var(--folder-blue-low)); }
.tw5__ico--mark { border-radius: 50%; box-shadow: inset 0 0 0 2px var(--boundary-red); }
.tw5__ico--stamp { box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw5__ico--fee { background: linear-gradient(90deg, var(--ink) 0 60%, var(--green) 60% 80%, #ddd 80%); height: 7px; border-radius: 3px; align-self: center; }
.tw5__rail { position: absolute; left: 22px; right: 22px; top: 50%; height: 1px; background: var(--hair-2); }
.tw5__dot { position: absolute; top: -3px; left: 92%; width: 7px; height: 7px; border-radius: 50%; background: var(--boundary-red); box-shadow: 0 0 0 3px rgba(204,54,65,0.18); }
.tw4__grid { zoom: 0.86; gap: 52px; }
@media (min-width: 1000px) {
  .tw4__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 44.72px; }
}
.tw4__read { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tw4__read dd.tw4__cash { font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.tw4__cash--lost { color: var(--text-red); }
.tw4__cash--saved { color: var(--green-vivid); }
@media (max-width: 599.98px) {
  .tw4__read { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw4__read > div:nth-child(3) { border-left: 0; }
  .tw4__read > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (prefers-reduced-motion: no-preference) {
  .tw4[data-loop] *, .tw4[data-loop] *::before, .tw4[data-loop] *::after { animation-delay: -12.32s !important; }
  .tw5__spin { animation-delay: 0s !important; }
}
.tw4__bar b { font-size: 14px; }
.tw4__bar > span:last-child { font-size: 12.5px; }
.tw4__read dt { font-size: 12px; letter-spacing: 0; text-transform: none; }
.tw4__read dd { font-size: 15px; }
.tw5__q { font-size: 14px; }
.tw5__hit { font-size: 12.5px; }
.tw5__hit b { font-size: 13.5px; }
.tw5__hit em { font-size: 11.5px; }
.tw5__status, .tw5__who { font-size: 12px; }
.tw5__ans p { font-size: 13.5px; }
.tw5__cite { height: 22px; font-size: 12px; }
.tw5__rec { height: 24px; font-size: 12.5px; }
.tw5__fn span { font-size: 11px; }
.tw5__fn b { font-size: 13.5px; }
@keyframes tw5-type { 0%, 2% { width: 0; } 22%, 93% { width: 100%; } 97%, 100% { width: 0; } }
@keyframes tw5-status { 0%, 23.99% { opacity: 0; } 26%, 44% { opacity: 1; } 47%, 100% { opacity: 0; } }
@keyframes tw5-h1 { 0%, 25.99% { opacity: 0; transform: translateY(6px); } 29.00%, 93.00% { opacity: 1; transform: none; } 97.00%, 100% { opacity: 0; transform: none; } }
@keyframes tw5-h2 { 0%, 28.99% { opacity: 0; transform: translateY(6px); } 32.00%, 93.00% { opacity: 1; transform: none; } 97.00%, 100% { opacity: 0; transform: none; } }
@keyframes tw5-h3 { 0%, 31.99% { opacity: 0; transform: translateY(6px); } 35.00%, 93.00% { opacity: 1; transform: none; } 97.00%, 100% { opacity: 0; transform: none; } }
@keyframes tw5-h4 { 0%, 34.99% { opacity: 0; transform: translateY(6px); } 38.00%, 93.00% { opacity: 1; transform: none; } 97.00%, 100% { opacity: 0; transform: none; } }
@keyframes tw5-h5 { 0%, 37.99% { opacity: 0; transform: translateY(6px); } 41.00%, 93.00% { opacity: 1; transform: none; } 97.00%, 100% { opacity: 0; transform: none; } }
@keyframes tw5-h6 { 0%, 40.99% { opacity: 0; transform: translateY(6px); } 44.00%, 93.00% { opacity: 1; transform: none; } 97.00%, 100% { opacity: 0; transform: none; } }
@keyframes tw5-ans { 0%, 46.99% { opacity: 0; transform: translateY(8px); } 50.00%, 93.00% { opacity: 1; transform: none; } 97.00%, 100% { opacity: 0; transform: none; } }
@keyframes tw5-rec { 0%, 54% { box-shadow: 0 0 0 0 rgba(204,54,65,0); } 57% { box-shadow: 0 0 0 5px rgba(204,54,65,0.22); } 62%, 100% { box-shadow: 0 0 0 0 rgba(204,54,65,0); } }
@keyframes tw5-f1 { 0%, 3.99% { opacity: 0.38; } 6.50%, 93.00% { opacity: 1; } 100% { opacity: 0.38; } }
@keyframes tw5-f2 { 0%, 29.99% { opacity: 0.38; } 32.50%, 93.00% { opacity: 1; } 100% { opacity: 0.38; } }
@keyframes tw5-f3 { 0%, 35.99% { opacity: 0.38; } 38.50%, 93.00% { opacity: 1; } 100% { opacity: 0.38; } }
@keyframes tw5-f4 { 0%, 54.99% { opacity: 0.38; } 57.50%, 93.00% { opacity: 1; } 100% { opacity: 0.38; } }
@keyframes tw5-f5 { 0%, 61.99% { opacity: 0.38; } 64.50%, 93.00% { opacity: 1; } 100% { opacity: 0.38; } }
@keyframes tw5-dot { 0%, 4% { left: 6%; opacity: 0; } 6% { opacity: 1; } 30% { left: 26%; } 36% { left: 50%; } 55% { left: 70%; } 62%, 92% { left: 92%; opacity: 1; } 96%, 100% { left: 92%; opacity: 0; } }
@keyframes tw4-cashh { 0%, 79.99% { opacity: 0; transform: translateY(4px); } 83%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes tw4-cashr { 0%, 63.99% { opacity: 0; transform: translateY(4px); } 67%, 93% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .tw5__h1 { animation: tw5-h1 14s linear infinite; }
  .tw5__h2 { animation: tw5-h2 14s linear infinite; }
  .tw5__h3 { animation: tw5-h3 14s linear infinite; }
  .tw5__h4 { animation: tw5-h4 14s linear infinite; }
  .tw5__h5 { animation: tw5-h5 14s linear infinite; }
  .tw5__h6 { animation: tw5-h6 14s linear infinite; }
  .tw5__ans { animation: tw5-ans 14s linear infinite; }
  .tw5__f1 { animation: tw5-f1 14s linear infinite; }
  .tw5__f2 { animation: tw5-f2 14s linear infinite; }
  .tw5__f3 { animation: tw5-f3 14s linear infinite; }
  .tw5__f4 { animation: tw5-f4 14s linear infinite; }
  .tw5__f5 { animation: tw5-f5 14s linear infinite; }
  .tw5__typed { animation: tw5-type 14s steps(42) infinite; }
  .tw5__status { animation: tw5-status 14s linear infinite; }
  .tw5__rec { animation: tw5-rec 14s linear infinite; }
  .tw5__dot { animation: tw5-dot 14s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
  .tw4__panel--hand .tw4__read dd.tw4__cash { animation: tw4-cashh 14s var(--ease) infinite both; }
  .tw4__panel--rec .tw4__read dd.tw4__cash { animation: tw4-cashr 14s var(--ease) infinite both; }
}

/* ---------- 24 Home 0.40 ---------- */
/* Status capsule with one dot, the only colour on it (app 0.4) */
.lamp { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; background: rgba(48, 46, 43, 0.06); color: var(--ink-2); }
.lamp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); }
.lamp--red { background: var(--red-wash); color: var(--red-text); }
.lamp--red::before { background: var(--red); }
.lamp--green { background: var(--green-wash); color: var(--green); }
.lamp--green::before { background: var(--green-vivid); }
.lamp--open { background: transparent; box-shadow: inset 0 0 0 1px var(--hair-2); }
.lamp--open::before { background: transparent; box-shadow: inset 0 0 0 1.25px var(--ink-3); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips span { padding: 2px 8px; border-radius: 6px; background: var(--white); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 12px; font-weight: 500; line-height: 1.5; color: var(--ink); white-space: nowrap; }

/* Hero: the tagline beside the project record, made into a 0.4 project folder */
.hero40 { padding: clamp(32px, 4.5vw, 72px) 0 clamp(48px, 5vw, 72px); }
.hero40__grid { display: grid; gap: 64px clamp(32px, 5vw, 88px); align-items: center; }
@media (min-width: 1100px) { .hero40__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.hero40 .hero__text { padding-bottom: 0; }

/* 0.43: filing-folder proportions, wider than tall, with the front panel covering most of the back. */
.folder { --rise: 0px; position: relative; justify-self: center; width: 100%; max-width: 540px; aspect-ratio: 1.28 / 1; margin: 0; isolation: isolate; }
.folder__tab { position: absolute; z-index: 1; left: 0; top: 0; display: flex; align-items: center; gap: 8px; height: 9%; width: 40%; padding: 0 16px 2%; border-radius: 12px 16px 0 0; background: var(--blueprint-hi); color: var(--white); font-size: 13px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; }
.folder__tab span { opacity: 0.72; font-variant-numeric: tabular-nums; }
.folder__back { position: absolute; z-index: 1; left: 0; right: 0; top: 8.5%; bottom: 0; border-radius: 0 16px 16px 16px; background: linear-gradient(180deg, var(--blueprint-hi), var(--blueprint) 70%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 40px 70px -36px rgba(29, 28, 26, 0.6), 0 2px 6px rgba(29, 28, 26, 0.12); }
.sheet { position: absolute; z-index: 2; border-radius: 6px; background: var(--white); box-shadow: 0 0 0 0.5px rgba(48, 46, 43, 0.14), 0 1px 2px rgba(29, 28, 26, 0.1), 0 14px 26px -16px rgba(29, 28, 26, 0.5); transform: translateY(var(--rise)) rotate(var(--rot, 0deg)); transition: transform 700ms var(--ease); }
.sheet__k { font-size: 10.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.sheet--dwg { --rot: -2.5deg; left: 4%; width: 44%; top: 14%; height: 62%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 6px; padding: 8px; }
.sheet--dwg img { width: 100%; height: 100%; object-fit: contain; }
.sheet__tb { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--hair-2); font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; }
.sheet__tb b { font-weight: 600; color: var(--ink); }
.sheet--letter { --rot: 2deg; left: 36%; width: 30%; top: 12%; height: 50%; display: grid; gap: 7px; align-content: start; padding: 14px; }
.sheet--letter b { font-size: 12.5px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; }
.sheet--letter i { display: block; height: 5px; width: var(--w, 100%); border-radius: 3px; background: var(--desk); }
.sheet--cond { --rot: -1.5deg; right: 5%; width: 33%; top: 16%; height: 40%; display: grid; gap: 4px; align-content: start; padding: 12px 14px; box-shadow: inset 3px 0 0 var(--red), 0 0 0 0.5px rgba(48, 46, 43, 0.14), 0 14px 26px -16px rgba(29, 28, 26, 0.5); }
.sheet--cond b { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.sheet__q { font-size: 11.5px; line-height: 1.4; color: var(--ink-2); }
/* 0.43: a short front pocket, so the sheets and the photograph above it stay in view. */
.folder__front { position: absolute; z-index: 4; left: 0; right: 0; top: 76%; bottom: 0; overflow: hidden; border-radius: 12px 12px 14px 14px; background: linear-gradient(180deg, var(--blueprint-hi), var(--blueprint)); box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5), 0 -10px 24px -14px rgba(29, 28, 26, 0.45); }
.folder__front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); }
/* The site photograph, a print standing in the folder in front of the sheets. Cropped from the top
   (sky) so the building fills it. */
.folder__photo { position: absolute; z-index: 3; right: 6%; width: 48%; top: 41%; height: 47%; padding: 6px; border-radius: 8px; background: var(--white); box-shadow: 0 0 0 0.5px rgba(48, 46, 43, 0.14), 0 18px 30px -16px rgba(29, 28, 26, 0.55); transform: translateY(var(--rise)) rotate(1.5deg); transition: transform 700ms var(--ease); }
.folder__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 68%; border-radius: 4px; }
.folder__label { position: absolute; z-index: 1; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.92); }
.folder__label .lamp { margin-left: auto; background: rgba(255, 255, 255, 0.18); color: var(--white); }
.folder__label .lamp::before { background: var(--white); }
.folder:hover { --rise: -8px; }
@media (prefers-reduced-motion: no-preference) {
  html.js .sheet { animation: sheet-in 1100ms var(--ease) backwards; }
  html.js .sheet--letter { animation-delay: 120ms; }
  html.js .sheet--cond { animation-delay: 240ms; }
}
@keyframes sheet-in { from { transform: translateY(26%) rotate(0deg); } }


/* The architect behind it, on site */
.fp { display: grid; overflow: hidden; border-radius: var(--r-lg); background: var(--ink); color: var(--on-ink); }
@media (min-width: 900px) { .fp { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: 560px; } }
.fp__text { display: grid; gap: 18px; align-content: end; justify-items: start; padding: clamp(28px, 4.5vw, 64px); }
.fp__text .h2 { max-width: 17ch; color: var(--on-ink); margin-bottom: 4px; }
.fp__text p { max-width: 50ch; color: var(--on-ink-2); }
.fp__text .go { margin-top: 6px; color: var(--on-ink); }
.fp .go span { text-decoration-color: rgba(240, 240, 240, 0.35); }
.fp__ph { position: relative; margin: 0; min-height: 440px; background: #1D1C1A; }
.fp__ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; }
.fp__ph figcaption { position: absolute; left: 14px; bottom: 14px; padding: 6px 10px; border-radius: 8px; background: rgba(29, 28, 26, 0.6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--on-ink); font-size: 12.5px; }

/* Four principles. Each label sits beside its chapter and scrolls with it until it reaches its
   place under the labels before it, where it stays; the four leave together at the end. A sticky
   grid item is held within its grid area, so each label spans from its own chapter to the last,
   and its bottom margin shortens that area so all four release at the same moment. */
.chap__grid { display: grid; gap: clamp(80px, 9vw, 128px) clamp(32px, 5vw, 80px); }
.chap__lab { display: none; }
@media (min-width: 1100px) {
  .chap__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .chap__item { grid-column: 2; }
  .chap__lab { --h: 44px; grid-column: 1; position: sticky; top: calc(112px + var(--n) * var(--h)); align-self: start; display: flex; align-items: center; gap: 14px; height: var(--h); margin-bottom: calc((3 - var(--n)) * var(--h)); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink-3); text-decoration: none; transition: color 240ms var(--ease); }
  .chap__lab i { min-width: 12px; font-style: normal; font-size: 13px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; transition: color 240ms var(--ease); }
  .chap__lab:hover, .chap__lab[aria-current] { color: var(--ink); }
  .chap__lab[aria-current] i { color: var(--ink); }
}
.chap__item { display: grid; gap: clamp(24px, 2.6vw, 36px); align-content: start; min-width: 0; scroll-margin-top: 96px; }
.chap__h { display: grid; gap: 14px; }
.chap__h .h2 { max-width: 22ch; }
.chap__h .lede { max-width: 64ch; }
.chap__item .ev { margin-top: 0; }
.chap__go { justify-self: start; }

/* The project record, as the app shows it */
.rec__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 360px; }
.rec__side { list-style: none; display: grid; gap: 2px; align-content: start; padding: 12px 10px; background: var(--paper); border-right: 1px solid var(--hair); }
.rec__side li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 7px; font-size: 13.5px; color: var(--ink-2); }
.rec__side li span { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rec__side li.is-on { background: var(--white); color: var(--ink); font-weight: 500; box-shadow: var(--lift-sm); }
.ico--dec, .ico--open { width: 14px; height: 14px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px var(--green); }
.ico--open { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.rec__main { display: grid; gap: 12px; align-content: start; padding: 14px; min-width: 0; }
.rec__list { list-style: none; display: grid; gap: 2px; }
.rec__list li { display: grid; grid-template-columns: auto 52px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; white-space: nowrap; }
.rec__list li.is-on { background: var(--blue-wash); }
.rec__list b { font-weight: 600; font-variant-numeric: tabular-nums; }
.rec__list em { font-style: normal; font-size: 12.5px; color: var(--ink-3); }
.rec__card { display: grid; gap: 12px; padding: 14px 16px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--hair-2); }
.rec__row b { font-size: 15px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.rec__card dl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 9px 14px; font-size: 13.5px; line-height: 1.5; }
.rec__card dt { color: var(--ink-3); }
.rec__card dd { margin: 0; min-width: 0; }
.rec__card dd .lamp { margin-right: 6px; }

/* The requests a practice already handles, on photographs */
.req { display: grid; gap: 16px; }
@media (min-width: 900px) { .req { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.req__c { position: relative; margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--r-lg); background: var(--desk); }
.req__c img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.req__c:hover img { transform: scale(1.03); }
.req__c figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; display: grid; gap: 6px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); box-shadow: 0 0 0 0.5px rgba(48, 46, 43, 0.12); }
.req__c figcaption > b { font-size: 16px; font-weight: 600; letter-spacing: -0.012em; }
/* Three lines held for every card, so the three panels are the same size. */
.req__p { min-height: calc(3 * 1.45em); font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.req__ui { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 7px 8px 7px 10px; border-radius: 8px; background: var(--white); box-shadow: var(--lift-sm); font-size: 13px; }
.req__ui em { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; font-weight: 600; }
.req__ui small { font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Plotwise prepares. You decide. */
.decide { display: grid; gap: 40px clamp(40px, 6vw, 104px); }
@media (min-width: 1000px) { .decide { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.decide__text { display: grid; gap: 18px; justify-items: start; }
.decide__text .h2 { max-width: 14ch; color: var(--on-ink); }
.decide__text p { max-width: 42ch; color: var(--on-ink-2); }
.decide__text .keys { margin-top: 8px; }
.decide__qs { display: grid; gap: 0 40px; }
@media (min-width: 700px) { .decide__qs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.decide__qs > div { padding: 20px 0 22px; border-top: 1px solid var(--hair-ink); }
.decide__qs dt { margin-bottom: 6px; font-size: 16.5px; font-weight: 550; letter-spacing: -0.012em; color: var(--on-ink); }
.decide__qs dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--on-ink-2); }
.decide__qs dd a { color: var(--on-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(240, 240, 240, 0.35); white-space: nowrap; }
.decide__qs dd a:hover { text-decoration-color: currentColor; }

/* Why now, beside the project library */
.why40__grid { display: grid; gap: 56px clamp(40px, 6vw, 104px); align-items: center; }
@media (min-width: 1000px) { .why40__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.why40__text { display: grid; gap: 16px; justify-items: start; }
.why40__text .h2 { max-width: 18ch; margin-bottom: 6px; }
.why40__text p { max-width: 48ch; color: var(--ink-2); }
.why40__text .keys { margin-top: 10px; }
.lib { position: relative; justify-self: center; width: 100%; max-width: 460px; aspect-ratio: 1 / 0.84; }
.lib__f { position: absolute; height: 70%; border-radius: 0 14px 14px 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 -6px 18px -12px rgba(29, 28, 26, 0.5), 0 30px 50px -30px rgba(29, 28, 26, 0.55); }
.lib__tab { position: absolute; left: 0; bottom: 100%; width: 38%; height: 22px; border-radius: 10px 14px 0 0; background: inherit; }
.lib__n { position: absolute; z-index: 1; left: 14px; top: 10px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.9); white-space: nowrap; }
.lib__f img { position: absolute; left: 0; right: 0; bottom: 0; top: 40px; width: 100%; height: calc(100% - 40px); object-fit: cover; object-position: 50% 30%; border-radius: 0 0 14px 14px; }
.lib__f--graphite { left: 0; right: 12%; top: 6%; background: linear-gradient(180deg, #4A4743, var(--graphite)); }
.lib__f--brick { left: 6%; right: 6%; top: 19%; background: linear-gradient(180deg, #C25A4A, var(--brick)); }
.lib__f--blue { left: 12%; right: 0; top: 32%; background: linear-gradient(180deg, var(--blueprint-hi), var(--blueprint)); }

/* ---------- 25 App windows ---------- */
.aw { overflow: hidden; min-width: 0; border-radius: 12px; background: var(--white); box-shadow: var(--lift); }
.aw__bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; background: linear-gradient(180deg, #FBFBFA, #F1F1EF); border-bottom: 1px solid var(--hair); font-size: 13px; white-space: nowrap; }
.aw__dots { display: flex; gap: 7px; }
.aw__dots i { width: 11px; height: 11px; border-radius: 50%; background: #DEDCD8; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12); }
.aw__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.aw__meta { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }

/* 0.40 narrow screens */
@media (max-width: 1099.98px) {
  .folder { max-width: 520px; }
}
@media (max-width: 759.98px) {
  .rec__body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .rec__side { display: none; }
  .rec__list li { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .rec__list .lamp { display: none; }
  .rec__card dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rec__card dd { margin-bottom: 8px; }
  .aw__meta { display: none; }
  .sheet--letter b { font-size: 11px; }
  .sheet--cond b { font-size: 13px; }
  .sheet__q { font-size: 10.5px; }
}
@media (max-width: 479.98px) {
  .sheet--cond { width: 40%; height: 44%; padding: 10px; }
  .sheet__q { display: none; }
  .folder__tab { width: 66%; font-size: 12px; }
}

/* ---------- 26 The example, ported from 0.35 ----------
   Every rule that styled the How it works example in draft 0.35, in the same order, kept to the
   demo's own selectors and with the tokens it used scoped to .hdemo (as section 23 does for the
   two requests). Extracted from 0.35 site.css; refine in section 27, not here. */
.hdemo { --bar-grad: linear-gradient(180deg, #353330 0%, #1D1C1A 100%); --boundary-red: #CC3641; --ease: cubic-bezier(0.2, 0, 0, 1); --font-mono: var(--font-sans); --font-sans: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; --green: #2F6B4C; --green-wash: #D7E6DA; --hair-2: rgba(48, 46, 43, 0.16); --hover: #F6F5F3; --ink: #302E2B; --ink-3: #726F6A; --ink-grad: linear-gradient(180deg, #47443F 0%, #2C2A27 100%); --lamp-red: #F06A73; --lift-sm: 0 0 0 0.5px rgba(48, 46, 43, 0.14), 0 1px 2px rgba(48, 46, 43, 0.07); --matrix: #8FB9F4; --note: #F5E8A3; --note-text: #6B5D1E; --paper: #F0F0F0; --plate-label: #A8A49E; --plate-line: #4A4743; --red-wash: #F6DFE1; --rule: #D8D6D2; --rule-strong: #BDB9B3; --sage: #E8F0FD; --sage-line: #B5CFF5; --secondary-ink: #66635F; --shine: inset 0 1px 0 rgba(255, 255, 255, 0.95); --text-red: #B62E39; --white: #FFFFFF; }
.hdemo { --hd-desk: #E4E3E0; --hd-ph: #DEDCD8; display: grid; gap: 8px; align-content: start; min-width: 0; }
.hdemo:not(.is-js) .hd-tabs, .hdemo:not(.is-js) .hd-cursor { display: none; }
.hd-key { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); box-shadow: 0 2px 0 0 var(--ink); font: 500 12.5px/1 var(--font-sans); cursor: default; white-space: nowrap; justify-self: start; transition: transform 120ms, box-shadow 120ms; }
.hd-key.is-press { transform: translateY(2px); box-shadow: 0 0 0 0 var(--ink); }
.hd-key--sm { height: 24px; padding: 0 9px; font-size: 11.5px; border-radius: 7px; }
.hd-key--ink { background: var(--ink); color: var(--paper); box-shadow: 0 2px 0 0 #121110; }
.hd-key--red { height: 38px; padding: 0 16px; font-size: 14px; background: var(--boundary-red); border-color: #8E1F28; color: var(--white); box-shadow: 0 2px 0 0 #8E1F28; }
.hd-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hd-frame { position: relative; user-select: none; -webkit-user-select: none; height: 484px; background: var(--hd-desk); border-radius: 14px; overflow: hidden; }
.hd-scene { position: absolute; inset: 6px; display: grid; grid-template-rows: 44px minmax(0, 1fr); gap: 6px; min-width: 0; }
.hd-scene[hidden] { display: none; }
.hdemo.is-js .hd-scene:not([hidden]) { animation: hd-in 350ms var(--ease); }
.hd-body { display: grid; grid-template-columns: 30px minmax(0, 1fr) 200px; gap: 6px; min-height: 0; }
.hd-main { position: relative; background: var(--paper); border-radius: 10px; overflow: hidden; min-width: 0; padding: 10px 12px; display: grid; gap: 9px; align-content: start; }
.hd-view { position: absolute; inset: 0; padding: 10px 12px; display: grid; gap: 9px; align-content: start; opacity: 0; visibility: hidden; transition: opacity 300ms var(--ease), visibility 0s linear 300ms; }
.hd-view.is-current, .hdemo:not(.is-js) .hd-view:first-child { opacity: 1; visibility: visible; transition: opacity 300ms var(--ease); }
.hd-fp { display: flex; align-items: stretch; background: var(--ink); color: var(--paper); border-radius: 10px; overflow: hidden; min-width: 0; }
.hd-fp__brand { display: grid; place-items: center; padding: 0 12px; border-right: 1px solid var(--plate-line); }
.hd-fp__brand img { width: 30px; height: auto; }
.hd-fp__cell { display: grid; align-content: center; gap: 4px; padding: 0 12px; border-right: 1px solid var(--plate-line); min-width: 0; }
.hd-fp__k { font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--plate-label); white-space: nowrap; }
.hd-fp__v { display: flex; align-items: center; gap: 7px; font: 500 12px/1 var(--font-sans); white-space: nowrap; }
.hd-fp__v .dm { height: 14px; width: auto; }
.hd-fp__v--red { color: var(--lamp-red); }
.hd-fp__fill { flex: 1 1 0; min-width: 0; border-right: 1px solid var(--plate-line); }
.hd-lampdot { width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--lamp-red); display: inline-block; }
.hd-lampdot--half { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1.25px var(--ink); }
.hd-lampdot--onink { background: linear-gradient(90deg, var(--paper) 50%, transparent 50%); box-shadow: inset 0 0 0 1.25px var(--paper); }
.hd-lampdot--off { background: transparent; box-shadow: inset 0 0 0 1.25px var(--ink); }
.hd-ln { display: block; height: 6px; width: var(--w, 100%); max-width: 100%; border-radius: 3px; background: var(--hd-ph); flex: none; }
.hd-ln--pa { background: #5E5B57; }
.hd-mono { font: 500 10.5px/1.3 var(--font-mono); color: var(--secondary-ink); }
.hd-ref { font: 400 10.5px/1.2 var(--font-mono); color: var(--secondary-ink); white-space: nowrap; }
.hd-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; min-width: 0; }
.hd-head > span:first-child { display: grid; gap: 4px; min-width: 0; }
.hd-head b { display: flex; align-items: center; gap: 10px; font: 400 21px/1.1 var(--font-sans); letter-spacing: -0.01em; white-space: nowrap; }
.hd-pill { display: inline-flex; align-items: center; gap: 5px; height: 19px; padding: 0 7px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); font: 500 9px/1 var(--font-sans); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; justify-self: start; color: var(--ink); }
.hd-pill::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--ink); flex: none; }
.hd-pill--red::before { background: var(--boundary-red); }
.hd-pill--green::before { background: var(--green); }
.hd-pill--half::before { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); box-shadow: inset 0 0 0 1px var(--ink); }
.hd-pill--off { border-color: var(--rule-strong); color: #8E8A85; }
.hd-pill--off::before { background: transparent; box-shadow: inset 0 0 0 1px #8E8A85; }
.hd-rpill { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); font: 500 10px/1 var(--font-mono); color: var(--ink); white-space: nowrap; justify-self: start; }
.hd-rpill::after { content: "\2197"; margin-left: 3px; font-size: 9.5px; }
.hd-rpill--red { border-color: var(--boundary-red); color: var(--text-red); }
.hd-chips { display: flex; gap: 5px; flex-wrap: nowrap; }
.hd-chips span { height: 22px; padding: 0 9px; border: 1px solid var(--ink); border-radius: 999px; font: 500 11px/20px var(--font-sans); white-space: nowrap; background: var(--white); }
.hd-chips span.is-on { background: var(--ink); color: var(--paper); }
.hd-chips--sm span { height: 19px; padding: 0 7px; font-size: 10px; line-height: 17px; }
.hd-box { background: var(--white); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 8px 10px; display: grid; gap: 7px; min-width: 0; align-content: start; }
.hd-box__h { display: flex; align-items: center; gap: 7px; font: 500 12.5px/1.2 var(--font-sans); white-space: nowrap; }
.hd-box__h > .hd-pill, .hd-box__h > .hd-chips { margin-left: auto; }
.hdemo .bub { width: 18px; height: 18px; font-size: 10px; }
.hd-tabstrip { display: flex; gap: 14px; border-bottom: 1px solid var(--rule); font: 500 11.5px/1 var(--font-sans); color: var(--secondary-ink); white-space: nowrap; overflow: hidden; }
.hd-tabstrip span { padding-bottom: 7px; }
.hd-tabstrip span.is-on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); }
.hd-cap { position: absolute; left: 48px; bottom: 10px; z-index: 6; margin: 0; padding: 7px 12px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 12px/1.2 var(--font-sans); max-width: calc(100% - 270px); }
.hd-date { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.hd-date__d { display: grid; justify-items: center; gap: 3px; width: 38px; padding: 5px 0 4px; border: 1px solid var(--ink); border-radius: 6px; font: 500 8.5px/1 var(--font-mono); text-transform: uppercase; }
.hd-date__d .dm { height: 15px; width: auto; }
.hd-fbar { display: flex; gap: 2px; height: 22px; }
.hd-fbar i { flex: var(--f) 1 0; min-width: 0; background: var(--ink); border-radius: 2px; transform-origin: left center; transition: transform 600ms var(--ease); }
.hd-fbar i:nth-child(2) { background: var(--green); }
.hd-fbar i:nth-child(3) { background: repeating-linear-gradient(135deg, var(--ink) 0 1.5px, var(--white) 1.5px 5px); box-shadow: inset 0 0 0 1px var(--ink); }
.hd-fbar i:nth-child(4) { background: transparent; border: 1.25px dashed var(--ink); }
.hd-postit { position: absolute; right: 14px; bottom: 16px; z-index: 4; width: 164px; display: grid; gap: 8px; padding: 0 10px 12px; background-color: var(--note); background-image: radial-gradient(rgba(48, 46, 43, 0.13) 0.8px, transparent 1.1px); background-size: 6px 6px; border: 1.25px solid var(--ink); box-shadow: 4px 4px 0 0 var(--ink); transform: rotate(-2.5deg); transform-origin: 70% 0; }
.hd-postit::before { content: ""; position: absolute; top: -10px; left: 50%; width: 54px; height: 16px; transform: translateX(-50%) rotate(3deg); background: rgba(240, 240, 240, 0.78); border: 1px dashed rgba(48, 46, 43, 0.4); }
.hd-postit::after { content: ""; position: absolute; right: -1.25px; bottom: -1.25px; width: 18px; height: 18px; background: linear-gradient(135deg, #DCCB74 0 50%, var(--ink) 50% 100%); }
.hd-postit__h { display: flex; align-items: center; gap: 7px; margin: 0 -10px; padding: 7px 10px; background: var(--ink); color: var(--note); font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }
.hd-postit__h .dm { height: 12px; width: auto; }
.hd-todo { display: flex; align-items: center; gap: 7px; }
.hd-todo i { width: 11px; height: 11px; flex: none; border: 1.25px solid var(--ink); border-radius: 2px; background: rgba(255, 255, 255, 0.4); }
.hd-todo.is-done i { background: var(--ink); box-shadow: inset 0 0 0 2px var(--note); }
.hd-todo .hd-ln { background: rgba(48, 46, 43, 0.24); flex: 1 1 auto; width: auto; }
.hd-todo.is-done .hd-ln { opacity: 0.45; }
.hd-todo .hd-ref { color: var(--note-text); font-size: 10px; }
.hdemo.is-js .hd-postit[data-show] { transition: opacity 200ms var(--ease), transform 420ms cubic-bezier(0.3, 1.5, 0.5, 1), visibility 0s; }
.hdemo.is-js .hd-postit[data-show]:not(.is-on) { transform: rotate(8deg) scale(1.25); }
.hd-ev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--rule); }
.hd-sheet { position: relative; height: 318px; background: var(--white); border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; }
.hd-sheet img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 20%; }
.hd-mark { position: absolute; border: 2px solid var(--boundary-red); border-radius: 8px; background: rgba(246, 223, 225, 0.35); }
.hd-mark__n { position: absolute; top: -10px; left: -10px; width: 20px; height: 20px; border-radius: 999px; background: var(--boundary-red); color: var(--white); display: grid; place-items: center; font: 500 10px/1 var(--font-mono); }
.hd-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.hd-opt { display: grid; gap: 7px; padding: 8px 10px; background: var(--white); border: 1px solid var(--rule-strong); border-radius: 10px; min-width: 0; }
.hd-opt.is-picked { border: 1.5px solid var(--ink); box-shadow: 0 2px 0 0 var(--ink); }
.hd-opt__h { display: flex; align-items: center; gap: 7px; min-height: 20px; font: 500 12.5px/1 var(--font-sans); white-space: nowrap; }
.hd-tag { margin-left: auto; padding: 4px 7px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 8.5px/1 var(--font-sans); letter-spacing: 0.05em; text-transform: uppercase; }
.hd-opt__aff { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.hd-opt__aff .hd-mono { margin-right: 4px; }
.hd-fees { gap: 9px; }
.hd-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hd-legend > span { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; min-width: 0; }
.hd-legend > span > .hd-mono { font-size: 9.5px; white-space: nowrap; }
.hd-legend b { flex: 1 0 100%; font: 400 15px/1.1 var(--font-sans); white-space: nowrap; }
.hd-key-sw { width: 9px; height: 9px; background: var(--ink); border-radius: 1px; }
.hd-key-sw--green { background: var(--green); }
.hd-key-sw--hatch { background: repeating-linear-gradient(135deg, var(--ink) 0 1px, var(--white) 1px 3px); box-shadow: inset 0 0 0 1px var(--ink); }
.hd-key-sw--open { background: transparent; border: 1px dashed var(--ink); border-radius: 999px; }
.hdemo.is-js .hd-fees:not(.is-hl) .hd-fbar i { transform: scaleX(0); }
.hd-fbar i:nth-child(2) { transition-delay: 150ms; }
.hd-fbar i:nth-child(3) { transition-delay: 300ms; }
.hd-fbar i:nth-child(4) { transition-delay: 450ms; }
.hd-sched { background: var(--white); border: 1px solid var(--rule-strong); border-radius: 10px; overflow: hidden; }
.hd-sched__h, .hd-sr { display: grid; grid-template-columns: 46px minmax(0, 1fr) 70px 58px 82px; gap: 8px; align-items: center; padding: 6px 10px; }
.hd-sched__h { font: 500 9.5px/1 var(--font-mono); color: var(--secondary-ink); padding-block: 7px; }
.hd-sr { border-top: 1px solid var(--rule); transition: background 300ms, box-shadow 300ms; }
.hd-sr--sel.is-hl { background: #FBF3F4; box-shadow: inset 3px 0 0 var(--lamp-red); }
.hd-sr .hd-pill { height: 17px; padding: 0 6px; font-size: 8px; }
.hd-cls { justify-self: start; height: 18px; padding: 0 6px; border: 1px solid; border-radius: 4px; font: 500 9.5px/16px var(--font-mono); white-space: nowrap; }
.hd-cls--red { background: var(--red-wash); border-color: #E3AEB3; color: var(--text-red); }
.hd-cls--note { background: var(--note); border-color: #D6C46A; color: var(--note-text); }
.hd-cls--sage { background: var(--sage); border-color: var(--sage-line); color: var(--ink); }
.hd-cls--green { background: var(--green-wash); border-color: #A6C6AE; color: var(--green); }
.hd-fee { font: 400 12px/1 var(--font-sans); text-align: right; white-space: nowrap; }
.hd-trace { position: relative; height: 236px; background: var(--white); border: 1px solid var(--rule-strong); border-radius: 10px; }
.hd-trace__h { position: absolute; left: 10px; top: 8px; }
.hd-trace__in { position: absolute; inset: 28px 12px 8px; }
.hd-trace__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hd-trace__svg path { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; transition: stroke 300ms; }
.hd-trace__svg path.is-hl { stroke: var(--ink); animation: hd-flow 900ms linear infinite; }
.hd-node { position: absolute; width: 27%; height: 26px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; gap: 5px; padding: 0 6px; background: var(--white); border: 1.25px solid var(--rule-strong); border-radius: 999px; font: 500 10.5px/1 var(--font-mono); color: #8E8A85; white-space: nowrap; overflow: hidden; transition: border-color 300ms, color 300ms, background 300ms; }
.hd-node.is-hl { border-color: var(--ink); color: var(--ink); }
.hd-node--dec { width: 26%; height: auto; flex-direction: column; gap: 5px; padding: 8px 6px; border-radius: 10px; font-size: 13px; }
.hd-node--dec .hd-mono { font-size: 9.5px; color: inherit; }
.hd-node--dec.is-hl { border: 1.5px solid var(--boundary-red); color: var(--text-red); background: #FDF6F7; }
.hd-chat { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--white); border-radius: 10px; overflow: hidden; }
.hd-chat__head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--rule); }
.hd-chat__head img { width: 22px; height: auto; }
.hd-chat__head > span { display: grid; gap: 3px; min-width: 0; }
.hd-chat__head b { font: 500 12.5px/1 var(--font-sans); }
.hd-chat__head > span > span { font: 500 9.5px/1.2 var(--font-mono); letter-spacing: 0.04em; color: var(--secondary-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-chat__body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 9px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; background: var(--paper); }
.hd-day { align-self: center; font: 500 9.5px/1 var(--font-mono); color: var(--secondary-ink); }
.hd-msg { display: grid; gap: 5px; padding: 9px; border-radius: 10px; min-width: 0; }
.hd-msg--you { align-self: flex-end; width: 78%; background: var(--ink); border-bottom-right-radius: 3px; }
.hd-msg--bot { align-self: stretch; background: var(--white); border-bottom-left-radius: 3px; }
.hd-who { font: 500 9px/1.2 var(--font-mono); letter-spacing: 0.04em; color: var(--secondary-ink); padding-bottom: 2px; }
.hd-cites { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 3px; }
.hd-status { display: flex; align-items: center; gap: 6px; font: 500 10px/1 var(--font-mono); color: var(--secondary-ink); }
.hd-spin { width: 9px; height: 9px; border-radius: 999px; border: 1.25px solid var(--ink); border-right-color: transparent; animation: hd-spin 800ms linear infinite; }
.hd-chip { align-self: flex-start; padding: 5px 9px; border: 1px solid var(--ink); border-radius: 999px; background: var(--white); font: 500 11px/1 var(--font-sans); }
.hd-compose { display: flex; align-items: center; gap: 6px; padding: 8px; border-top: 1px solid var(--rule); }
.hd-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; height: 32px; padding: 0 9px; border: 1px solid var(--rule-strong); border-radius: 9px; font: 400 11.5px/1 var(--font-sans); color: var(--secondary-ink); white-space: nowrap; overflow: hidden; }
.hd-send { width: 24px; height: 24px; flex: none; border-radius: 999px; background: var(--ink); display: grid; place-items: center; }
.hd-send::after { content: "\2191"; color: var(--white); font: 500 12px/1 var(--font-sans); }
.hdemo.is-js .hd-msg--answer.is-on > .hd-ln { animation: hd-grow 520ms var(--ease) both; }
.hdemo.is-js .hd-msg--answer.is-on > .hd-ln:nth-child(3) { animation-delay: 300ms; }
.hdemo.is-js .hd-msg--answer.is-on > .hd-ln:nth-child(4) { animation-delay: 600ms; }
.hdemo.is-js .hd-msg--answer.is-on > .hd-ln:nth-child(5) { animation-delay: 900ms; }
.hd-cursor { position: absolute; left: 0; top: 0; z-index: 20; width: 20px; height: 24px; pointer-events: none; opacity: 0; transition: transform 750ms cubic-bezier(0.45, 0, 0.2, 1), opacity 250ms; }
.hd-cursor svg { display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); }
.hd-cursor path { fill: var(--ink); stroke: var(--white); stroke-width: 1.4; stroke-linejoin: round; }
.hd-cursor.is-on { opacity: 1; }
.hd-cursor.no-anim { transition: none; }
.hd-cursor::before { content: ""; position: absolute; left: -10px; top: -10px; width: 24px; height: 24px; border-radius: 999px; border: 2px solid var(--lamp-red); opacity: 0; }
.hd-cursor.is-click::before { animation: hd-ring 500ms ease-out; }
.hdemo.is-js [data-show]:not(.is-on) { opacity: 0; visibility: hidden; transform: translateY(4px); }
.hdemo.is-js [data-show] { transition: opacity 300ms var(--ease), transform 300ms var(--ease), visibility 0s; }
.hdemo.is-js [data-hide]:not(.is-on) { display: none; }
.hdemo:not(.is-js) [data-hide] { display: none; }
.hdemo.is-js .hd-msg[data-show]:not(.is-on), .hdemo.is-js .hd-status[data-show]:not(.is-on), .hdemo.is-js .hd-chip[data-show]:not(.is-on) { display: none; }
.hdemo.is-js .hd-fp [data-show]:not(.is-on), .hdemo.is-js .hd-chat__head [data-show]:not(.is-on), .hdemo.is-js .hd-field [data-show]:not(.is-on) { display: none; }
.hd-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.hd-tab { position: relative; overflow: hidden; display: grid; gap: 6px; justify-items: start; align-content: start; padding: 9px 10px 11px; border: 1px solid var(--ink); border-radius: 10px; background: var(--white); color: var(--ink); cursor: pointer; text-align: left; font: 500 12px/1.2 var(--font-sans); }
.hd-tab .dm { height: 14px; width: auto; }
.hd-tab:hover { background: var(--hover); }
.hd-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.hd-tab__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lamp-red); transform: scaleX(0); transform-origin: left center; }
.hd-tab__bar.is-run { animation: hd-prog var(--hd-dur, 8s) linear forwards; }
.hdemo.is-paused .hd-tab__bar { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hd-view, .hdemo.is-js [data-show], .hd-sr, .hd-fbar i { transition: none; } }
@media (prefers-reduced-motion: reduce) { .hdemo.is-js .hd-scene:not([hidden]), .hd-trace__svg path.is-hl, .hd-spin, .hd-tab__bar.is-run, .hdemo.is-js .hd-msg--answer.is-on > .hd-ln { animation: none; } }
@media (prefers-reduced-motion: reduce) { .hd-cursor { display: none; } }
@media (max-width: 1199.98px) { .hdemo { max-width: 880px; } }
@media (max-width: 639.98px) { .hd-frame { height: 556px; } }
@media (max-width: 639.98px) { .hd-scene { grid-template-rows: 40px minmax(0, 1fr); } }
@media (max-width: 639.98px) { .hd-fp__fill { display: none; } }
@media (max-width: 639.98px) { .hd-fp__v > span:not(.hd-lampdot) { display: none; } }
@media (max-width: 639.98px) { .hd-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 168px; } }
@media (max-width: 639.98px) { .hd-compose { display: none; } }
@media (max-width: 639.98px) { .hd-head b { font-size: 18px; } }
@media (max-width: 639.98px) { .hd-cap { left: 12px; bottom: 182px; max-width: calc(100% - 24px); } }
@media (max-width: 639.98px) { .hd-postit { width: 146px; right: 10px; bottom: 10px; } }
@media (max-width: 639.98px) { .hd-legend { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639.98px) { .hd-sched__h, .hd-sr { grid-template-columns: 44px minmax(0, 1fr) 66px 54px; } }
@media (max-width: 639.98px) { .hd-sched__h > :last-child, .hd-sr > .hd-pill { display: none; } }
@media (max-width: 639.98px) { .hd-node { font-size: 9px; padding: 0 3px; width: 29%; } }
@media (max-width: 639.98px) { .hd-node--dec { font-size: 11px; width: 28%; } }
@media (max-width: 639.98px) { .hd-sheet { height: 230px; } }
@media (max-width: 639.98px) { .hd-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .hd-tab { font-size: 11.5px; padding: 8px; } }
@media (max-width: 639.98px) { .hd-tag { display: none; } }
.hd-frame { border: 0; border-radius: 0; }
.hd-tab__bar { height: 4px; background: var(--matrix); }
.hdemo--wide { max-width: none !important; scroll-margin-top: 16px; }
.hdemo--wide .hd-frame { height: 600px; }
.hdemo--wide .hd-body { grid-template-columns: 30px minmax(0, 1fr) 270px; }
.hdemo--wide .hd-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hdemo--wide .hd-cap { max-width: calc(100% - 350px); }
.hdemo--wide .hd-head b { font-size: 24px; }
.ex-list, .ex-checks { gap: 0; padding: 4px 14px; }
.ex-req { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 76px auto; gap: 12px; align-items: center; padding: 11px 4px; border-top: 1px solid var(--rule); transition: background 300ms var(--ease), box-shadow 300ms var(--ease); }
.ex-req:first-child { border-top: 0; }
.ex-req.is-hl { background: #FBF3F4; box-shadow: inset 3px 0 0 var(--lamp-red); }
.hdemo.is-js .ex-req--new[data-show]:not(.is-on) { transform: translateY(-10px); }
.ex-split { display: grid; gap: 10px; align-items: start; }
@media (min-width: 1000px) { .ex-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
@media (min-width: 1000px) { .ex-split--viewer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } }
.ex-quote { gap: 8px; }
.ex-mini { display: flex; align-items: center; gap: 10px; }
.ex-viewer { display: grid; gap: 6px; }
.ex-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ex-sheet { height: 360px; }
.ex-mail { display: grid; gap: 10px; align-content: start; height: 360px; padding: 16px; background: var(--white); border: 1px solid var(--ink); border-radius: 6px; }
.ex-mail__flag { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 11.5px/1 var(--font-mono); }
.ex-trace { height: 440px; }
.ex-trace .hd-node:not(.hd-node--dec) { height: 32px; font-size: 11.5px; }
.ex-trace .hd-node:not(.hd-node--dec) { width: 24%; }
.ex-trace .ex-node--src { width: 20%; }
.ex-trace .hd-node--dec:not(.ex-node--src) { width: 28%; }
.ex-trace .hd-node--dec.is-hl:not(.ex-node--red) { border: 1.5px solid var(--ink); color: var(--ink); background: var(--white); }
.ex-check { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--rule); }
.ex-check:first-child { border-top: 0; }
.ex-check > i:first-child { width: 14px; height: 14px; border: 1.25px solid var(--ink); border-radius: 3px; }
.ex-check.is-done > i:first-child { background: var(--ink); box-shadow: inset 0 0 0 2.5px var(--white); }
.ex-check--await { margin: 6px 0; padding: 11px 10px; border: 1.25px dashed var(--boundary-red); border-radius: 8px; }
.ex-check--await > i:first-child { border-color: var(--boundary-red); }
.ex-check__t { font: 500 13px/1.2 var(--font-sans); }
.ex-check__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 4px 8px; }
.ex-postit { right: 26px; bottom: 26px; }
.ex-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ex-col { min-height: 170px; }
.ex-col--red { border-color: #E3AEB3; background: #FDF7F8; }
.ex-col--note { border-color: #D6C46A; background: #FDFAEC; }
.ex-col .hd-box__h { white-space: normal; flex-wrap: wrap; }
.ex-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 8px; background: var(--white); border: 1px solid var(--rule); border-radius: 7px; }
.ex-go.is-hl { background: var(--ink); color: var(--paper); }
.ex-opts { grid-template-columns: 1fr 1fr; }
.ex-opt { transition: border-color 250ms var(--ease), box-shadow 250ms var(--ease), background 250ms var(--ease); }
.ex-opt.is-hl { border: 1.5px solid var(--ink); box-shadow: 0 2px 0 0 var(--ink); background: #F4F8F5; }
.ex-record { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ex-record__key { height: 30px; font-size: 12.5px; }
.ex-dec { display: grid; gap: 9px; padding: 12px 14px; background: var(--white); border: 1px solid var(--ink); border-left: 3px solid var(--ink); border-radius: 8px; }
.ex-dec__h { display: flex; align-items: center; gap: 10px; font: 500 14px/1.25 var(--font-sans); }
.ex-dec__h .hd-pill { margin-left: auto; }
.ex-dec__by { display: flex; align-items: center; gap: 8px; }
.ex-av { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: var(--paper); font: 500 9px/1 var(--font-mono); }
@media (max-width: 999.98px) { .ex-split--viewer .ex-viewer, .ex-split > .hd-box + .hd-box { display: none; } }
@media (max-width: 999.98px) { .ex-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 999.98px) { .ex-col { min-height: 0; } }
@media (max-width: 639.98px) { .hdemo--wide .hd-frame { height: 600px; } }
@media (max-width: 639.98px) { .hdemo--wide .hd-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 168px; } }
@media (max-width: 639.98px) { .hdemo--wide .hd-cap { max-width: calc(100% - 24px); } }
@media (max-width: 639.98px) { .hdemo--wide .hd-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639.98px) { .ex-req { grid-template-columns: auto auto minmax(0, 1fr) auto; } }
@media (max-width: 639.98px) { .ex-req .hd-mono { display: none; } }
@media (max-width: 639.98px) { .ex-check { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (max-width: 639.98px) { .ex-check .hd-rpill { display: none; } }
@media (max-width: 639.98px) { .ex-opts { grid-template-columns: 1fr; } }
@media (max-width: 639.98px) { .ex-opt:nth-child(2) { display: none; } }
@media (max-width: 639.98px) { .ex-trace .hd-node { font-size: 9.5px; padding: 0 4px; } }
.wf .hd-rpill { height: 16px; padding: 0 5px; font-size: 9px; }
.wf .hd-ref { font-size: 9.5px; }
@media (max-width: 639.98px) { .ex-trace { height: auto; } }
@media (max-width: 639.98px) { .ex-trace .hd-trace__in { position: static; display: grid; gap: 6px; padding: 30px 10px 10px; } }
@media (max-width: 639.98px) { .ex-trace .hd-trace__svg { display: none; } }
@media (max-width: 639.98px) { .ex-trace .hd-node, .ex-trace .hd-node--dec { position: static; transform: none; width: auto !important; height: auto; flex-direction: row; justify-content: flex-start; gap: 8px; padding: 6px 9px; font-size: 10.5px; } }
@media (max-width: 639.98px) { .ex-trace .hd-node .hd-pill { margin-left: auto; } }
.hdemo--wide .hd-frame { height: 700px; }
.hdemo--wide .hd-scene { inset: 70px 6px 6px 236px; grid-template-rows: minmax(0, 1fr); }
.hdemo--wide .hd-body { grid-template-columns: minmax(0, 1fr) 300px; }
.hdemo--wide .hd-cap { left: 14px; max-width: calc(100% - 340px); }
.hdemo--wide .hd-view { padding: 16px 20px; gap: 12px; }
.hdemo--wide .hd-head b { font-size: 26px; }
.ex-fp { position: absolute; left: 6px; right: 6px; top: 6px; height: 58px; }
.ex-fp__brand { gap: 10px; padding: 0 18px; }
.ex-fp__brand img { width: 34px; }
.ex-fp__brand b { font: 500 15.5px/1 var(--font-sans); }
.ex-fp .hd-fp__cell { padding: 0 16px; }
.ex-fp .hd-fp__v { font-size: 13.5px; }
.ex-fp .hd-fp__v .dm { height: 17px; }
.ex-chev { width: 7px; height: 7px; margin: -3px 0 0 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.ex-fp__tools { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-left: 1px solid var(--plate-line); }
.ex-fp__search { position: relative; width: 32px; height: 32px; border: 1px solid var(--plate-line); border-radius: 999px; }
.ex-fp__search::before { content: ""; position: absolute; left: 9px; top: 8px; width: 9px; height: 9px; border: 1.5px solid var(--paper); border-radius: 999px; }
.ex-fp__search::after { content: ""; position: absolute; left: 18px; top: 20px; width: 6px; border-top: 1.5px solid var(--paper); transform: rotate(45deg); }
.ex-fp__av { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; background: var(--paper); color: var(--ink); font: 500 10px/1 var(--font-mono); font-style: normal; }
.ex-side { position: absolute; left: 6px; top: 70px; bottom: 6px; width: 224px; display: flex; flex-direction: column; gap: 3px; padding: 14px 10px 12px; background: var(--white); border-radius: 10px; }
.ex-side__back { padding: 2px 8px 12px; font: 500 13.5px/1 var(--font-sans); text-decoration: underline; text-underline-offset: 3px; }
.ex-side__back::before { content: "\2039"; margin-right: 8px; text-decoration: none; display: inline-block; }
.ex-side__proj { display: grid; gap: 3px; margin-bottom: 12px; padding: 8px; background: var(--sage); border-radius: 8px; }
.ex-side__img { height: 74px; margin-bottom: 6px; border: 1px solid var(--sage-line); border-radius: 5px; overflow: hidden; }
.ex-side__img img, .ex-photo img, .ex-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; display: block; }
.ex-side__proj b { font: 500 14px/1.2 var(--font-sans); }
.ex-side__nav { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 7px; font: 500 14px/1 var(--font-sans); transition: background 250ms var(--ease), color 250ms var(--ease); }
.ex-side__nav .hd-mono { font-size: 10.5px; }
.ex-badge { margin-left: auto; min-width: 28px; height: 20px; padding: 0 7px; border: 1px solid var(--rule-strong); border-radius: 999px; font: 500 10px/18px var(--font-mono); text-align: center; }
.ex-badge--red { border-color: var(--boundary-red); color: var(--text-red); }
.hdemo--wide:is([data-current="request"], [data-current="sources"], [data-current="trace"], [data-current="open"]) [data-nav="requests"], .hdemo--wide[data-current="scope"] [data-nav="fees"], .hdemo--wide[data-current="decide"] [data-nav="decisions"], .hdemo--wide:not([data-current]) [data-nav="decisions"] { background: var(--ink); color: var(--paper); }
.ex-side__nav .hd-mono { color: inherit; opacity: 0.7; }
.ex-side__foot { margin-top: auto; display: grid; gap: 12px; padding: 12px 10px 2px; border-top: 1px solid var(--rule); font: 500 13.5px/1 var(--font-sans); }
.ex-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 92px)); gap: 6px; margin-top: 4px; }
.ex-photo { height: 64px; border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden; background: var(--white); }
.ex-photo--b img { object-position: 88% 70%; transform: scale(1.4); }
.ex-photo--ph { background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(48, 46, 43, 0.08) 6px 7px), var(--white); }
.ex-ev-photo { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.ex-thumb { width: 54px; height: 32px; border: 1px solid var(--rule-strong); border-radius: 4px; overflow: hidden; }
@media (max-width: 999.98px) { .ex-side { display: none; } }
@media (max-width: 999.98px) { .hdemo--wide .hd-scene { left: 6px; } }
@media (max-width: 639.98px) { .hdemo--wide .hd-frame { height: 660px; } }
@media (max-width: 639.98px) { .ex-m-hide, .ex-fp__tools, .ex-fp__brand b { display: none; } }
@media (max-width: 639.98px) { .ex-fp { height: 48px; } }
@media (max-width: 639.98px) { .hdemo--wide .hd-scene { inset: 60px 6px 6px 6px; } }
@media (max-width: 639.98px) { .hdemo--wide .hd-body { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639.98px) { .hdemo--wide .hd-view { padding: 12px; } }
@media (max-width: 639.98px) { .hdemo--wide .hd-head b { font-size: 20px; } }
@media (max-width: 639.98px) { .ex-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ex-fp__brand { display: flex; align-items: center; }
.ex-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 999.98px) { .ex-row3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 999.98px) { .ex-row3 > :not(:first-child) { display: none; } }
.intro0__demo > .hdemo { width: 100%; max-width: 840px; }
.hd-stg { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 999px; box-shadow: inset 0 0 0 1.25px currentColor; }
.hd-stg--on { background: var(--ink); box-shadow: none; }
.hd-tabstrip--stg > span { display: inline-flex; align-items: center; gap: 5px; }
.hd-tabstrip--stg .hd-stg { width: 6px; height: 6px; }
.hd-linked { margin-left: auto; gap: 5px; font: 500 9px/1 var(--font-mono); color: var(--secondary-ink); }
.hd-linked i { font-style: normal; padding: 2px 6px; border: 1px solid var(--ink); border-radius: 999px; color: var(--ink); }
.dm-n { font-family: var(--font-sans); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.005em; white-space: nowrap; }
.dm-n--red { color: var(--lamp-red); }
.dm-n--green { color: var(--green); }
.ex-side__nav .hd-mono { display: none; }
.ex-side__nav[aria-current], .ex-side__nav.is-on { background: var(--ink-grad); box-shadow: 0 1px 2px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,0.14); }
.ex-side__proj { background: linear-gradient(180deg, #FFFFFF, #F8F8F7); box-shadow: var(--lift-sm), var(--shine); }
.ex-side__img img, .ex-photo img, .ex-thumb img { object-fit: cover; object-position: 50% 30%; width: 100%; height: 100%; }
.hd-pill, .hd-mono { letter-spacing: 0; }
.hd-frame { background: linear-gradient(180deg, #F3F3F1 0%, #EAE9E6 100%); border: 0; border-radius: 12px;
  box-shadow: 0 0 0 0.5px rgba(48, 46, 43, 0.14), 0 1px 2px rgba(48, 46, 43, 0.05), 0 18px 40px -18px rgba(48, 46, 43, 0.28), var(--shine); }
.hd-frame { border-radius: 14px; }
.hd-tab { border: 0; border-radius: 10px; background: var(--white); box-shadow: var(--lift-sm), var(--shine); }
.hd-tab[aria-selected="true"] { background: var(--ink-grad); color: #FFFFFF; box-shadow: 0 0 0 0.5px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.14); }
.hd-fp { background: var(--bar-grad); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
.hd-box, .hd-opt, .hd-sched, .hd-ev, .hd-trace, .hd-chat, .ex-side, .hd-main > .hd-view > .hd-box { border-color: var(--hair-2) !important; }
.hd-box, .hd-opt, .hd-sched, .hd-trace { border: 0 !important; border-radius: 10px; box-shadow: var(--lift-sm), var(--shine); }
.hd-key { border: 0 !important; border-radius: 7px; box-shadow: 0 0 0 0.5px rgba(48,46,43,0.26), 0 1px 1px rgba(48,46,43,0.08), inset 0 1px 0 #FFFFFF; }
.hd-key--ink, .hd-key--red { box-shadow: 0 0 0 0.5px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.16); }
.hd-pill, .hd-rpill, .hd-chip { border-color: transparent !important; box-shadow: inset 0 0 0 0.5px var(--hair-2); }
.ex-av, .ex-badge, .ex-fp__av, .ex-mail__flag, .hd-chat__head > span > span, .hd-cls, .hd-date__d, .hd-day, .hd-fp__k, .hd-linked, .hd-mark__n, .hd-mono, .hd-node, .hd-postit__h, .hd-ref, .hd-rpill, .hd-sched__h, .hd-status, .hd-who { letter-spacing: 0.005em; font-feature-settings: "tnum" 1; }
.hd-fp__k, .hd-pill, .hd-postit__h, .hd-tag { text-transform: none; letter-spacing: 0.005em; }
.ex-check > i:first-child, .ex-dec, .ex-mail, .ex-opt.is-hl, .ex-trace .hd-node--dec.is-hl:not(.ex-node--red), .hd-chip, .hd-chips span, .hd-date__d, .hd-linked i, .hd-opt.is-picked, .hd-pill, .hd-postit, .hd-rpill, .hd-sheet, .hd-spin, .hd-tab, .hd-todo i { border-color: var(--hair-2); }
.hd-postit { box-shadow: var(--lift-sm); }
.hd-tabs { gap: 6px; }
.hd-tab { display: flex; align-items: center; gap: 7px; min-height: 0; padding: 7px 11px 8px; border-radius: 8px; font-size: 12.5px; line-height: 1.2; }
.hd-tab .dm-n { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.hd-tab[aria-selected="true"] .dm-n { color: rgba(255, 255, 255, 0.6); }
.hd-tab > span:not(.dm-n) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-tab__bar { height: 2px; }
.ex-item .hd-ln { flex: 0 1 var(--w, 70%); width: auto; min-width: 0; }
.ex-item .hd-pill { flex: none; }
@media (max-width: 639.98px) { .hdemo--wide .hd-cap { left: 12px; right: 12px; max-width: none; border-radius: 12px; line-height: 1.3; } }
@media (max-width: 639.98px) { .hd-head { flex-wrap: wrap; row-gap: 6px; } }
@media (max-width: 639.98px) { .hd-head b { white-space: normal; } }
@keyframes hd-flow { to { stroke-dashoffset: -7; } }
@keyframes hd-grow { from { width: 0; } }
@keyframes hd-in { from { opacity: 0; } }
@keyframes hd-prog { to { transform: scaleX(1); } }
@keyframes hd-ring { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes hd-spin { to { transform: rotate(360deg); } }

/* ---------- 27 The example, refined for 0.41 ---------- */
.hd-ctl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px; align-items: stretch; }
.hd-play { min-width: 84px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--ink-grad); color: var(--white); font-size: 13px; font-weight: 500; cursor: pointer; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.hd-play[hidden] { display: none; }
.hdemo:not(.is-js) .hd-ctl { display: none; }
/* Fitted to the 0.40 pages: the window lifts like the other app windows, headings carry the firmer
   site weight, and the step keys share the site's radius. Content, timing and layout are 0.35's. */
.hdemo .hd-frame { border-radius: var(--r-lg); box-shadow: var(--lift); }
.hdemo .hd-head b { font-weight: 500; letter-spacing: -0.02em; }
.hdemo .hd-tab, .hdemo .hd-play { border-radius: var(--r-key); }
.hdemo .hd-tab[aria-selected="true"] { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.hdemo .hd-cap { box-shadow: 0 8px 20px -10px rgba(29, 28, 26, 0.6); }
@media (max-width: 639.98px) {
  .hd-ctl { grid-template-columns: minmax(0, 1fr); }
  .hd-play { justify-self: start; min-height: 36px; }
}