/* Homepage (index.html) only. Loads after docs/docs.css (tokens, header,
   mobile nav, footer, status bar), assets/releases.css and assets/launch.css
   (the launch components the 2.0 announcement uses). Nothing here changes a
   launch component for any other page: every rule is scoped to homepage
   markup (.hm on <body>, or a class only the homepage uses).

   Contents:
     motion and anchors     smooth scroll, reduced motion, scroll margins
     hero                   blinking caret, descriptor, technical line,
                            the MacBook with two displays and its Text/Table
                            control
     .tvt                   the Text/Table comparison slider (moved from the
                            old inline style; ids and aria unchanged)
     .hm-flow, .hm-benefits the file-in, file-out figure and its list
     .hm-files, .hm-kinds   the example-file selector and its captions
     .hm-caps               the capability list
     .bt                    the benchmarks.tsv window and table
     .est                   the estimator (markup and ids unchanged)
     .native-list           the native list
     .plans, .tiers         plan cards and the Free/Pro lists
     .faq                   disclosure rows
*/

:root { --ok: #79c98f; --hm-drop: rgba(0,0,0,0.5); }
@media (prefers-color-scheme: light) {
  :root { --ok: #2f7d3f; --hm-drop: rgba(70,55,30,0.22); }
}

/* ---------------- Motion and anchors ---------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hm *, .hm *::before, .hm *::after { animation: none !important; transition: none !important; }
}
.hm main [id] { scroll-margin-top: 64px; }
.hm ::selection { background: rgba(217,78,31,0.35); }
.statusbar .file-seg { white-space: nowrap; overflow: hidden; }
/* ---------------- Two tones: fixed per chapter, the chrome follows the scheme ---------------- */
.hm .lx-hero, .hm .lx-sec {
  --bg: #121517; --win: #212629; --win-2: #262B2F; --chrome: #1A1E21;
  --rule: #30363A; --rule-soft: #282D31; --rule-bright: #3C434A;
  --ink: #F0F2F5; --ink-soft: #CDD3DB; --ink-dim: #8D959E; --ink-faint: #747D88;
  --accent: #D84818; --accent-hi: #F26A3C; --accent-soft: rgba(216,72,24,0.14);
  --win-shadow: 0 30px 60px -30px rgba(0,0,0,0.6); --hm-drop: rgba(0,0,0,0.5); --ok: #79c98f;
  --lx-band: #121517;
  background: var(--bg); color: var(--ink);
}
.hm .lx-sec.paper {
  --bg: #F7F3EB; --win: #FDFBF6; --win-2: #F2EEE6; --chrome: #EFEBE2;
  --rule: #DDD7CA; --rule-soft: #E8E3D8; --rule-bright: #CFC8BA;
  --ink: #24262B; --ink-soft: #383A42; --ink-dim: #5A5750; --ink-faint: #6E6A62;
  --accent: #CC4417; --accent-hi: #B23C12; --accent-soft: rgba(204,68,23,0.10);
  --win-shadow: 0 26px 60px -34px rgba(70,55,30,0.35); --hm-drop: rgba(70,55,30,0.22); --ok: #2f7d3f;
  --lx-band: #F7F3EB;
}
.hm .lx-sec.lx-deep { --bg: #0D1012; --lx-band: #0D1012; --chrome: #15191B; }
.hm .lx-sec.lx-band { background: var(--bg); }
.hm .lx-sec.paper + .lx-sec.paper { padding-top: 0; }

/* ---------------- Hero ---------------- */
.hm-hero { padding-top: 88px; }
/* The headline keeps the live site's hero type: mono, with the app's block caret. */
.hm .lx-hero h1 {
  font-family: var(--mono); font-size: clamp(32px, 5vw, 58px); line-height: 1.16;
  letter-spacing: -0.02em; font-weight: 600; max-width: 30ch; margin-left: auto; margin-right: auto;
}
.hm .lx-hero h1 em { display: inline; font-size: inherit; margin-top: 0; }
.hcaret {
  display: inline-block; width: 0.55em; height: 1em; margin-left: 6px;
  background: var(--accent); vertical-align: text-bottom;
}
@media (prefers-reduced-motion: no-preference) {
  .hcaret { animation: hm-blink 1.1s steps(1) infinite; }
}
@keyframes hm-blink { 50% { opacity: 0; } }
.hm-desc {
  font-family: var(--mono); font-size: 14px; color: var(--ink-dim);
  letter-spacing: 0.01em; margin: 0 auto 36px;
}
.hm-tech { font-size: 15px; line-height: 1.6; color: var(--ink-dim); margin: 28px auto 0; max-width: 760px; }
.hm-tech a { color: var(--accent-hi); }

.hm-device .lx-device-screen { aspect-ratio: 2560 / 1600; }
.hm-device .lx-device-notch { display: none; }
.hm-device .hm-tvt { aspect-ratio: 2560 / 1600; }
.hm-device[data-view="text"] .hm-scr-text { opacity: 1; }
.hm-device figcaption {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  margin-top: 40px; text-align: center;
}
.hm-cap { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.hm-seg {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--win); border: 1px solid var(--rule); border-radius: 980px;
}
.hm-seg[hidden] { display: none; }
.hm-seg button {
  font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink-soft);
  background: transparent; border: 1px solid transparent; border-radius: 980px;
  padding: 7px 22px; cursor: pointer;
}
.hm-seg button:hover { color: var(--ink); }
.hm-seg button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); }
.hm-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------------- Text/Table slider ---------------- */
.hm-tvt-box { width: 100%; }
.view-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.view-row .fname { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.view-row .fname b { color: var(--ink); font-weight: 600; }
.seg {
  display: flex; flex: none;
  border: 1px solid var(--rule-bright); border-radius: 7px; overflow: hidden;
  background: var(--win-2);
}
.seg button {
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  color: var(--ink-dim); background: none; border: 0;
  padding: 6px 14px; cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--rule-bright); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.seg button:focus-visible { outline-offset: -3px; }
.tvt {
  position: relative; width: 100%; aspect-ratio: 2048 / 1280;
  --pos: 50%;
  cursor: ew-resize; touch-action: pan-y;
  -webkit-user-select: none; user-select: none;
  filter: drop-shadow(0 24px 36px var(--hm-drop));
}
.tvt-img {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: contain; pointer-events: none;
}
.tvt-top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.tvt-divider {
  position: absolute; top: 0; bottom: 0; left: var(--pos);
  width: 2px; margin-left: -1px; background: var(--accent);
  pointer-events: none;
}
.tvt-handle {
  position: absolute; top: 50%; left: 50%;
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.tvt-handle svg { width: 20px; height: 20px; display: block; }
.tvt-range {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  border: 0; white-space: nowrap;
}
.tvt-range:focus-visible ~ .tvt-divider .tvt-handle { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 900px) {
  .seg button { padding: 6px 10px; font-size: 12px; }
  .tvt-handle { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .tvt-handle svg { width: 15px; height: 15px; }
}

/* ---------------- Your files stay your files ---------------- */
.hm-flow {
  display: flex; align-items: center; justify-content: center; gap: 24px;
  margin: 0 auto 72px;
}
.hm-chip {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--mono); font-size: 16px; font-weight: 500; color: var(--ink);
  background: var(--win); border: 1px solid var(--rule); border-radius: 14px;
  padding: 16px 22px; white-space: nowrap;
}
.hm-chip-ic {
  position: relative; width: 18px; height: 22px; flex: none;
  border: 1.5px solid var(--ink-dim); border-radius: 3px;
  background: linear-gradient(var(--ink-faint), var(--ink-faint)) 3px 8px / 9px 1.5px no-repeat,
              linear-gradient(var(--ink-faint), var(--ink-faint)) 3px 12px / 9px 1.5px no-repeat,
              linear-gradient(var(--accent), var(--accent)) 3px 16px / 6px 1.5px no-repeat;
}
.hm-arrow { position: relative; width: 64px; height: 2px; background: var(--rule-bright); flex: none; }
.hm-arrow::after {
  content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px;
  border-top: 2px solid var(--rule-bright); border-right: 2px solid var(--rule-bright);
  transform: rotate(45deg);
}
.hm-app { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; }
.hm-app img { display: block; width: 72px; height: 72px; border-radius: 16px; box-shadow: 0 16px 36px -14px var(--hm-drop); }
.hm-app span { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); }
.hm-benefits {
  list-style: none; max-width: 860px; margin: 0 auto; padding: 0;
  border-top: 1px solid var(--rule);
}
.hm-benefits li {
  padding: 18px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: var(--t-body); line-height: 1.5; color: var(--ink-dim);
}
.hm-benefits b { color: var(--ink); font-weight: 600; margin-right: 4px; }
@media (max-width: 734.98px) {
  .hm-flow { flex-direction: column; gap: 18px; margin-bottom: 48px; }
  .hm-arrow { width: 2px; height: 36px; }
  .hm-arrow::after { right: -4px; top: auto; bottom: -1px; transform: rotate(135deg); }
  .hm-chip { font-size: 15px; padding: 13px 18px; }
}

/* ---------------- Different kinds of work ---------------- */
.hm-file-tabs { width: max-content; max-width: 100%; margin: 0 auto 40px; }
.hm-file-tabs button { padding: 8px 18px; }
.hm-file-view { margin: 0; }
.hm-file-frame {
  position: relative; aspect-ratio: 2048 / 1280; max-width: 1200px; margin: 0 auto;
  filter: drop-shadow(0 30px 48px var(--hm-drop));
}
.hm-file-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hm-file-frame img.incoming { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hm-file-frame img { transition: opacity 240ms ease; }
}
.hm-kinds { list-style: none; max-width: 900px; margin: 40px auto 0; padding: 0; }
.hm-kinds li {
  font-size: 17px; line-height: 1.5; color: var(--ink-dim);
  padding: 10px 16px; border-left: 2px solid transparent; border-radius: 0 10px 10px 0;
}
.hm-kinds li[aria-current="true"] { background: var(--win); color: var(--ink-soft); border-left-color: var(--accent); }
.hm-kinds b { font-family: var(--mono); font-size: 0.92em; font-weight: 600; color: var(--ink); }
.hm-files > .lx-cap { margin-top: 28px !important; }
.hm-caps { margin: 140px auto 0; max-width: 1120px; }
.hm-caps > .lx-h3 { text-align: center; font-size: var(--t-h3); margin: 0 0 40px; letter-spacing: -0.02em; }
.hm-caps ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px;
  border-top: 1px solid var(--rule);
}
.hm-caps li {
  padding: 16px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 17px; line-height: 1.5; color: var(--ink-dim); min-width: 0;
}
.hm-caps b { color: var(--ink); font-weight: 600; }
.hm-caps a { color: var(--accent-hi); }
@media (max-width: 899.98px) {
  .hm-caps ul { grid-template-columns: 1fr; }
  .hm-caps { margin-top: 96px; }
}
@media (max-width: 734.98px) {
  .hm-file-tabs { border-radius: 22px; justify-content: center; margin-bottom: 28px; }
  .hm-file-tabs button { padding: 6px 12px; font-size: 12.5px; }
  .hm-kinds li { font-size: 16px; padding: 9px 12px; }
}

/* ---------------- benchmarks.tsv window ---------------- */
.bt {
  max-width: 1040px; margin: 0 auto; overflow: hidden;
  background: var(--win); border: 1px solid var(--rule); border-radius: 16px;
  box-shadow: 0 40px 100px -40px var(--lx-device-shadow);
}
.bt-bar {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 13px 18px; background: var(--win-2); border-bottom: 1px solid var(--rule);
}
.bt-bar i { width: 12px; height: 12px; border-radius: 50%; display: block; background: var(--rule-bright); }
.bt-bar i:nth-child(1) { background: #FF5F57; } .bt-bar i:nth-child(2) { background: #FEBC2E; } .bt-bar i:nth-child(3) { background: #28C840; }
.bt-title { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.bt-table { width: 100%; border-collapse: collapse; }
.bt-table th {
  text-align: left; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ink-dim);
  padding: 12px 22px; border-bottom: 1px solid var(--rule);
}
.bt-table td { padding: 14px 22px; border-bottom: 1px solid var(--rule-soft); font-size: 16px; color: var(--ink); vertical-align: baseline; }
.bt-table tr:last-child td { border-bottom: 0; }
.bt-table td:nth-child(2) { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); white-space: nowrap; }
.bt-table .r { text-align: right; white-space: nowrap; }
.bt-table td.r { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--accent-hi); }
@media (max-width: 734.98px) {
  .bt-table thead { display: none; }
  .bt-table, .bt-table tbody { display: block; }
  .bt-table tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 3px;
    padding: 13px 16px; border-bottom: 1px solid var(--rule-soft);
  }
  .bt-table tr:last-child { border-bottom: 0; }
  .bt-table td { display: block; padding: 0; border: 0; font-size: 15px; line-height: 1.4; }
  .bt-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .bt-table td:nth-child(2) { grid-column: 1; grid-row: 2; white-space: normal; font-size: 12px; }
  .bt-table td.r { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 14px; }
}
.hm-note { font-size: 14.5px; line-height: 1.65; color: var(--ink-dim); max-width: 1000px; margin: 28px auto 0 !important; text-align: center; }
.hm-note a { color: var(--accent-hi); }
.hm-more-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 40px; }

/* ---------------- Estimator ---------------- */
.est {
  max-width: 1040px; margin: 96px auto 0; overflow: hidden;
  background: var(--win); border-radius: 24px;
  display: grid; grid-template-columns: minmax(260px, 380px) 1fr;
}
.est-in { padding: 40px; border-right: 1px solid var(--rule-soft); }
.est-in h3 { font-family: var(--sans); font-weight: 600; font-size: var(--t-tile); line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.est-in h3 em { font-style: normal; color: var(--accent-hi); }
.est-in p { margin: 10px 0 0 !important; font-size: 15px; line-height: 1.5; color: var(--ink-dim); }
.est-fields { margin-top: 24px; display: grid; gap: 8px; }
.est-fields label { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); margin-top: 8px; }
.est-size { display: flex; gap: 8px; }
.est input, .est select {
  font-family: var(--mono); font-size: 16px; color: var(--ink);
  background: var(--bg); border: 1px solid var(--rule); border-radius: 10px;
  padding: 10px 12px; min-width: 0;
}
.est input { flex: 1; width: 100%; }
.est select { cursor: pointer; }
.est input:focus-visible, .est select:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.est-out { padding: 20px 40px; margin: 0; }
.est-out > div {
  display: grid; grid-template-columns: 96px 1fr; gap: 4px 16px; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--rule-soft);
}
.est-out > div:last-child { border-bottom: none; }
.est-out dt { font-family: var(--mono); font-size: 12.5px; color: var(--accent-hi); }
.est-out dd { margin: 0; }
.est-out dd b { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--ink); }
.est-out dd span { display: block; margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--ink-dim); }
@media (max-width: 760px) {
  .est { grid-template-columns: 1fr; border-radius: 20px; margin-top: 72px; }
  .est-in { border-right: none; border-bottom: 1px solid var(--rule-soft); padding: 28px; }
  .est-out { padding: 8px 28px; }
  .est-out > div { grid-template-columns: 1fr; }
}
.hm-cta { display: flex; flex-direction: column; align-items: center; gap: 18px; margin-top: 64px; text-align: center; }
.hm-cta p { font-size: var(--t-lede); color: var(--ink); margin: 0 !important; }

/* ---------------- Made for Mac ---------------- */
.native-list {
  list-style: none; max-width: 1120px; margin: 0 auto 96px; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px;
  border-top: 1px solid var(--rule);
}
.native-list li {
  padding: 18px 0; border-bottom: 1px solid var(--rule-soft);
  font-size: 17px; color: var(--ink-dim); line-height: 1.55; min-width: 0;
}
.native-list li b { color: var(--ink); font-weight: 600; margin-right: 4px; }
.native-list a { color: var(--accent-hi); }
.hm-bento .lx-tile a { color: var(--accent-hi); }
@media (max-width: 899.98px) {
  .native-list { grid-template-columns: 1fr; margin-bottom: 64px; }
}
#themes .lx-more { margin-top: 40px !important; }

/* ---------------- Plans and tiers ---------------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.plan {
  background: var(--win); border-radius: 24px; padding: 40px 36px;
  display: flex; flex-direction: column; min-width: 0; border-top: 2px solid transparent;
}
.plan.featured { border-top-color: var(--accent); }
.plan .pl { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); margin-bottom: 18px; }
.plan .amt {
  font-family: var(--sans); font-weight: 600; font-size: 48px; letter-spacing: -0.03em;
  color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
}
.plan .per { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); margin: 10px 0 24px; }
.plan ul { list-style: none; margin: 0 0 32px; padding: 0; }
.plan li { padding: 7px 0; font-size: 16px; color: var(--ink-soft); }
.plan .go {
  margin-top: auto; display: block; text-align: center;
  font-family: var(--sans); font-size: 17px; font-weight: 500;
  padding: 13px 20px; border-radius: 980px; text-decoration: none;
}
.plan .go.line { border: 1px solid var(--rule-bright); color: var(--ink); }
.plan .go.line:hover { border-color: var(--accent); color: var(--accent-hi); }
.plan .go.fill { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.plan .go.fill:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.tier { background: var(--win); border-radius: 24px; padding: 40px 36px; min-width: 0; }
.tier h3 { font-family: var(--sans); font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.tier h3 span { display: block; margin-top: 6px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: var(--ink-dim); }
.tier ul { list-style: none; margin: 20px 0 0; padding: 0; }
.tier li { position: relative; padding: 10px 0 10px 18px; font-size: 16px; color: var(--ink-soft); border-bottom: 1px solid var(--rule-soft); }
.tier li:last-child { border-bottom: none; }
.tier li::before { content: ""; position: absolute; left: 0; top: 19px; width: 6px; height: 6px; border-radius: 50%; }
.tier.free li::before { background: var(--ok); }
.tier.paid li::before { background: var(--accent); }
@media (max-width: 899.98px) {
  .plans, .tiers { grid-template-columns: 1fr; }
}
@media (max-width: 734.98px) {
  .plan, .tier { padding: 30px 26px; border-radius: 20px; }
  .plan .amt { font-size: 40px; }
  .tier h3 { font-size: 23px; }
}

/* ---------------- FAQ ---------------- */
.hm-faq-sec { padding-top: 0; }
.faq { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule-soft); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-family: var(--sans); font-weight: 600; font-size: 19px; line-height: 1.35; color: var(--ink); }
.faq summary:hover h3 { color: var(--accent-hi); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.faq summary::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-right: 6px;
  border-right: 1.5px solid var(--ink-dim); border-bottom: 1.5px solid var(--ink-dim);
  transform: translateY(-2px) rotate(45deg);
}
.faq details[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq .a { padding: 0 0 24px; margin: 0 !important; font-size: 17px; line-height: 1.6; color: var(--ink-dim); }
.faq .a a { color: var(--accent-hi); }

/* ---------------- Download band ---------------- */
.hm .lx-close .lx-lede { margin-bottom: 0; }
.hm .lx-close .lx-fine code { font-family: var(--mono); font-size: 0.92em; color: var(--ink-soft); }
.hm .lx-close .lx-fine a { color: var(--accent-hi); }

/* ---------------- Scale statement, proof, overlapping windows ---------------- */
.hm-h2-big { font-size: clamp(44px, 6.4vw, 92px); letter-spacing: -0.04em; max-width: 14ch; }
.hm-still { margin: 24px auto 0; }
.hm-still img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: var(--win-shadow); }
.hm-still .lx-cap { text-align: center; margin-top: 14px; }
.hm-scale-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 48px 0 32px; }
.hm-scale-facts p { margin: 0; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.55; color: var(--ink-dim); }
.hm-scale-facts b { color: var(--ink); font-weight: 600; }
.hm-proof { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; margin: 24px 0 56px; }
.hm-proof-clip { margin: 0; }
.hm-proof-clip .lx-cap { margin-top: 12px; }
.hm-proof-aside h3 { font-family: var(--sans); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; color: var(--ink); }
.hm-proof-aside p { font-size: 16.5px; line-height: 1.55; color: var(--ink-dim); }
.hm-proof-aside ul { margin: 14px 0 0; padding-left: 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }
.hm-proof-aside li { margin: 0 0 8px; }
.hm-proof-aside .lx-more { text-align: left; margin-top: 18px !important; }
@media (max-width: 900px) {
  .hm-scale-facts, .hm-proof { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------------- App windows, built from the app's own values (from the live site) ---------------- */
  .aw {
    --aw-canvas: #1B1B1B; --aw-text: #CDD3DB; --aw-muted: #5A6372;
    --aw-chrome: #212729; --aw-tab-on: #363C44; --aw-status: #212729;
    --aw-gutter-bg: #1B1B1B; --aw-gutter-text: #6C6C6C; --aw-gutter-sep: #000;
    --aw-accent: #D84818;
    --aw-stripe: rgba(255,255,255,0.04); --aw-colsep: rgba(205,211,219,0.06);
    --aw-hair: rgba(255,255,255,0.06); --aw-tab-stroke: rgba(255,255,255,0.10);
    --aw-field: #1B1B1B; --aw-icon: #CDD3DB; --aw-glyph: #FAFAFA;
    --aw-title: rgba(255,255,255,0.88); --aw-path: rgba(255,255,255,0.78); --aw-label2: rgba(255,255,255,0.55);
    --aw-pill-bg: rgba(255,255,255,0.14); --aw-pill-text: rgba(255,255,255,0.80);
    --aw-green: #32D74B; --aw-green-text: #5BDF6F; --aw-orange: #FF9F0A; --aw-red: #FF453A;
    --aw-frame: rgba(255,255,255,0.14);
    --aw-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
    --aw-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    background: var(--aw-canvas); color: var(--aw-text);
    border: 1px solid var(--aw-frame); border-radius: 10px; overflow: hidden;
    box-shadow: var(--win-shadow);
    font-family: var(--aw-ui);
  }

  /* Title bar: traffic lights, the sidebar toggle, title over path, the
     search field on the bar's centre line, then the tool pill and the
     inspector toggle. Buttons, field and pill sit on the canvas tone, 36
     tall, so the bar reads as chrome around them. The two groups share
     the width equally, which keeps the field centred while the name
     truncates instead of pushing the pill out. The bar's padding is
     symmetric and the lights carry their own inset, so the field's
     centre line is the window's. */
  .aw-titlebar {
    display: flex; align-items: center; height: 52px;
    background: var(--aw-chrome); padding: 0 8px;
  }
  .aw-side, .aw-end { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
  .aw-end { justify-content: flex-end; }
  .aw-lights { display: flex; gap: 8px; flex: none; margin-left: 12px; }
  .aw-lights i { width: 12px; height: 12px; border-radius: 50%; display: block; }
  .aw-lights i:nth-child(1) { background: #FF5F57; }
  .aw-lights i:nth-child(2) { background: #FEBC2E; }
  .aw-lights i:nth-child(3) { background: #28C840; }
  .aw-btn {
    flex: none; display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--aw-field); color: var(--aw-glyph);
  }
  .aw-btn svg { width: 20px; height: 16px; display: block; }
  .aw-btn.side { margin-left: 22px; }
  .aw-btn.end { margin-left: 12px; }
  .aw-name { margin-left: 10px; min-width: 0; line-height: 1.25; }
  .aw-name b { display: block; font-size: 13px; font-weight: 700; color: var(--aw-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .aw-name small { display: block; font-size: 11px; color: var(--aw-path); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .aw-search {
    flex: none; display: flex; align-items: center; gap: 9px; box-sizing: border-box;
    width: clamp(214px, 32%, 325px); height: 36px; border-radius: 18px; padding: 0 12px 0 11px;
    background: var(--aw-field); color: var(--aw-glyph);
    font-size: 13px; font-weight: 600; white-space: nowrap;
  }
  .aw-search svg { width: 13px; height: 13px; flex: none; display: block; }
  .aw-search span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .aw-tools {
    flex: none; display: flex; align-items: center; gap: 26px;
    height: 36px; border-radius: 18px; padding: 0 15px;
    background: var(--aw-field); color: var(--aw-icon);
  }
  .aw-tools svg { width: 16px; height: 16px; display: block; }

  /* Tab strip: the bar sits with the chrome, the active card lifts off it */
  .aw-tabs {
    display: flex; align-items: center; height: 42px; padding-left: 8px;
    background: var(--aw-chrome); border-bottom: 1px solid var(--aw-hair);
  }
  .aw-tab {
    position: relative; display: flex; align-items: center;
    height: 32px; min-width: 128px; padding: 0 10px; border-radius: 7px; overflow: hidden;
    background: var(--aw-tab-on); box-shadow: inset 0 0 0 1px var(--aw-tab-stroke);
    font-size: 13px; font-weight: 500; color: var(--aw-text); white-space: nowrap;
  }
  .aw-tab::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--aw-accent); }
  .aw-tab .x { margin-left: auto; padding-left: 26px; font-size: 9px; font-weight: 700; color: var(--aw-muted); }
  .aw-plus { margin-left: 8px; width: 28px; text-align: center; font-size: 15px; color: var(--aw-muted); }

  /* Status bar: position, badges, path, then the counts in the accent */
  .aw-status {
    display: flex; align-items: center; gap: 10px; height: 28px; padding: 0 12px;
    background: var(--aw-status); border-top: 1px solid var(--aw-hair);
    font-size: 11px; color: var(--aw-label2); white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .aw-status .pos { color: var(--aw-pill-text); }
  .aw-badge {
    font-size: 10px; font-weight: 500; line-height: 15px; padding: 0 5px; border-radius: 4px;
    background: var(--aw-pill-bg); color: var(--aw-pill-text);
  }
  .aw-badge.green { background: color-mix(in srgb, var(--aw-green) 16%, transparent); color: var(--aw-green-text); }
  .aw-status .path { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .aw-status .right { margin-left: auto; display: flex; gap: 12px; flex: none; }
  .aw-status .count { color: var(--aw-accent); font-weight: 500; }
  .aw-grid { overflow-x: auto; background: var(--aw-canvas); }
  .aw-table {
    border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px;
    font-family: var(--aw-mono); font-size: 12px; color: var(--aw-text);
  }
  .aw-table th, .aw-table td {
    height: 30px; padding: 0 8px; white-space: nowrap; text-align: left;
    border-right: 1px solid var(--aw-colsep); font-weight: 400;
  }
  /* The header row is pinned and casts the grid's soft shadow */
  .aw-table thead th {
    position: relative; background: var(--aw-canvas);
    font-family: var(--aw-ui); font-size: 11px; font-weight: 600; color: var(--aw-accent);
    padding-right: 26px; box-shadow: 0 1px 0 rgba(0,0,0,0.30), 0 5px 6px -4px rgba(0,0,0,0.30);
  }
  .aw-table thead th.col::after {
    content: "\21C5"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 9px; font-weight: 400; color: var(--aw-muted);
  }
  /* Odd display rows carry the 4% stripe, as the grid draws them */
  .aw-table tbody tr:nth-child(odd) td { background-image: linear-gradient(var(--aw-stripe), var(--aw-stripe)); }
  /* Row-number gutter: its own plane, a separator, digits right-aligned */
  .aw-table .rn {
    position: sticky; left: 0; z-index: 1; width: 46px; min-width: 46px; padding: 0 8px 0 0; text-align: right;
    background: var(--aw-gutter-bg) !important; background-image: none !important;
    border-right: 1px solid var(--aw-gutter-sep);
    font-family: var(--aw-ui); font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--aw-gutter-text);
  }
  .aw-table thead .rn { z-index: 2; }
  /* Select-all corner triangle */
  .aw-table thead .rn::after {
    content: ""; position: absolute; right: 8px; bottom: 9px;
    border-left: 8px solid transparent; border-bottom: 8px solid color-mix(in srgb, var(--aw-gutter-text) 55%, transparent);
  }
  /* A whole-column selection on result: 14% in the header, 5% in cells */
  .aw-table thead th.sel { background-image: linear-gradient(color-mix(in srgb, var(--aw-accent) 14%, transparent), color-mix(in srgb, var(--aw-accent) 14%, transparent)); }
  .aw-table tbody td.sel { background-image: linear-gradient(color-mix(in srgb, var(--aw-accent) 5%, transparent), color-mix(in srgb, var(--aw-accent) 5%, transparent)); }
  .aw-table tbody tr:nth-child(odd) td.sel { background-image: linear-gradient(color-mix(in srgb, var(--aw-accent) 5%, transparent), color-mix(in srgb, var(--aw-accent) 5%, transparent)), linear-gradient(var(--aw-stripe), var(--aw-stripe)); }
  /* Small screens show the grid with result moved first and frozen, a
     state the app reaches by dragging the column and freezing it, so
     the numbers stay on screen while the rest scrolls. */
  .aw-table .lead { display: none; }
  @media (max-width: 760px) {
    .aw-table .tail { display: none; }
    .aw-table .lead {
      display: table-cell; position: sticky; left: 46px; z-index: 1;
      background-color: var(--aw-canvas);
      box-shadow: 1px 0 0 var(--aw-colsep), 6px 0 6px -4px rgba(0,0,0,0.35);
    }
    .aw-table thead th.lead { z-index: 2; box-shadow: 0 1px 0 rgba(0,0,0,0.30), 6px 0 6px -4px rgba(0,0,0,0.35); }
  }
  /* The add-column header and the add-row gutter cell past the data */
  .aw-table .add { width: 99%; border-right: 0; }
  .aw-table thead th.add { color: color-mix(in srgb, var(--aw-accent) 75%, transparent); font-size: 13px; font-weight: 500; padding-right: 8px; }
  .aw-table tr.phantom .rn { color: color-mix(in srgb, var(--aw-accent) 75%, transparent); font-size: 13px; font-weight: 500; }

.hm .bench-win { margin-top: 8px; }

/* ---------------- Themes: the window drawn from EditorTheme values ---------------- */
.theme-win { margin-top: 0; }
.theme-win .aw-text, .theme-win .aw-grid { display: none; }
.theme-win[data-mode="text"] .aw-textwrap { display: flex; }
.theme-win[data-mode="text"] .aw-text { display: block; }
.theme-win[data-mode="grid"] .aw-grid { display: block; }
.theme-win[data-mode="text"] .aw-grid, .theme-win[data-mode="grid"] .aw-textwrap { display: none; }
.theme-win .aw-text { padding: 6px 0 10px; }
.theme-win .aw-comp { color: var(--aw-keyword); }
.theme-win .aw-num { color: var(--aw-number); }
.theme-win .aw-str { color: var(--aw-string); }
.theme-win .aw-table { min-width: 640px; }
.theme-win[data-theme="dark"] { --aw-canvas: #1C1C1C; --aw-text: #CDD3DB; --aw-muted: #5A6372; --aw-chrome: #212629; --aw-tab-on: #363C44; --aw-status: #212629; --aw-gutter-bg: #1C1C1C; --aw-gutter-text: #6C6C6C; --aw-gutter-sep: #000000; --aw-accent: #D84818; --aw-keyword: #B48EDD; --aw-string: #8FBF7F; --aw-number: #E8A14F; --aw-field: #1C1C1C; --aw-sel: #32405A; --aw-stripe: rgba(255,255,255,0.04); --aw-colsep: rgba(205,211,219,0.06); --aw-hair: rgba(255,255,255,0.06); --aw-tab-stroke: rgba(255,255,255,0.10); --aw-icon: #CDD3DB; --aw-glyph: #FAFAFA; --aw-title: rgba(255,255,255,0.88); --aw-path: rgba(255,255,255,0.78); --aw-label2: rgba(255,255,255,0.55); --aw-pill-bg: rgba(255,255,255,0.14); --aw-pill-text: rgba(255,255,255,0.80); --aw-green: #32D74B; --aw-green-text: #5BDF6F; --aw-orange: #FF9F0A; --aw-red: #FF453A; --aw-frame: rgba(255,255,255,0.14); }
.theme-win[data-theme="light"] { --aw-canvas: #FAF8F2; --aw-text: #383A42; --aw-muted: #A8A39A; --aw-chrome: #EFEBE2; --aw-tab-on: #FFFFFF; --aw-status: #F2EEE6; --aw-gutter-bg: #FAF8F2; --aw-gutter-text: #B3ADA2; --aw-gutter-sep: #FAF8F2; --aw-accent: #D84818; --aw-keyword: #A626A4; --aw-string: #50A14F; --aw-number: #C18401; --aw-field: #FAF8F2; --aw-sel: #F0E0BE; --aw-stripe: rgba(0,0,0,0.035); --aw-colsep: rgba(0,0,0,0.08); --aw-hair: rgba(0,0,0,0.08); --aw-tab-stroke: rgba(0,0,0,0.10); --aw-icon: #383A42; --aw-glyph: #383A42; --aw-title: rgba(0,0,0,0.85); --aw-path: rgba(0,0,0,0.6); --aw-label2: rgba(0,0,0,0.55); --aw-pill-bg: rgba(0,0,0,0.08); --aw-pill-text: rgba(0,0,0,0.75); --aw-green: #28A745; --aw-green-text: #1E7F33; --aw-orange: #E8890C; --aw-red: #D62F2F; --aw-frame: rgba(0,0,0,0.14); }
.theme-win[data-theme="solarized-dark"] { --aw-canvas: #002B36; --aw-text: #839496; --aw-muted: #586E75; --aw-chrome: #073642; --aw-tab-on: #0B3F4C; --aw-status: #073642; --aw-gutter-bg: #002B36; --aw-gutter-text: #586E75; --aw-gutter-sep: #073642; --aw-accent: #CB4B16; --aw-keyword: #859900; --aw-string: #2AA198; --aw-number: #D33682; --aw-field: #002B36; --aw-sel: #0E3A46; --aw-stripe: rgba(255,255,255,0.04); --aw-colsep: rgba(205,211,219,0.06); --aw-hair: rgba(255,255,255,0.06); --aw-tab-stroke: rgba(255,255,255,0.10); --aw-icon: #839496; --aw-glyph: #FAFAFA; --aw-title: rgba(255,255,255,0.88); --aw-path: rgba(255,255,255,0.78); --aw-label2: rgba(255,255,255,0.55); --aw-pill-bg: rgba(255,255,255,0.14); --aw-pill-text: rgba(255,255,255,0.80); --aw-green: #32D74B; --aw-green-text: #5BDF6F; --aw-orange: #FF9F0A; --aw-red: #FF453A; --aw-frame: rgba(255,255,255,0.14); }
.theme-win[data-theme="solarized-light"] { --aw-canvas: #FDF6E3; --aw-text: #586E75; --aw-muted: #93A1A1; --aw-chrome: #EEE8D5; --aw-tab-on: #FDF6E3; --aw-status: #EEE8D5; --aw-gutter-bg: #FDF6E3; --aw-gutter-text: #93A1A1; --aw-gutter-sep: #EEE8D5; --aw-accent: #CB4B16; --aw-keyword: #778800; --aw-string: #1F8F86; --aw-number: #D33682; --aw-field: #FDF6E3; --aw-sel: #E6DFC8; --aw-stripe: rgba(0,0,0,0.035); --aw-colsep: rgba(0,0,0,0.08); --aw-hair: rgba(0,0,0,0.08); --aw-tab-stroke: rgba(0,0,0,0.10); --aw-icon: #586E75; --aw-glyph: #586E75; --aw-title: rgba(0,0,0,0.85); --aw-path: rgba(0,0,0,0.6); --aw-label2: rgba(0,0,0,0.55); --aw-pill-bg: rgba(0,0,0,0.08); --aw-pill-text: rgba(0,0,0,0.75); --aw-green: #28A745; --aw-green-text: #1E7F33; --aw-orange: #E8890C; --aw-red: #D62F2F; --aw-frame: rgba(0,0,0,0.14); }
.theme-win[data-theme="one-dark"] { --aw-canvas: #282C34; --aw-text: #ABB2BF; --aw-muted: #6E7683; --aw-chrome: #21252B; --aw-tab-on: #2C313A; --aw-status: #21252B; --aw-gutter-bg: #282C34; --aw-gutter-text: #636D83; --aw-gutter-sep: #181A1F; --aw-accent: #61AFEF; --aw-keyword: #C678DD; --aw-string: #98C379; --aw-number: #D19A66; --aw-field: #282C34; --aw-sel: #3E4451; --aw-stripe: rgba(255,255,255,0.04); --aw-colsep: rgba(205,211,219,0.06); --aw-hair: rgba(255,255,255,0.06); --aw-tab-stroke: rgba(255,255,255,0.10); --aw-icon: #ABB2BF; --aw-glyph: #FAFAFA; --aw-title: rgba(255,255,255,0.88); --aw-path: rgba(255,255,255,0.78); --aw-label2: rgba(255,255,255,0.55); --aw-pill-bg: rgba(255,255,255,0.14); --aw-pill-text: rgba(255,255,255,0.80); --aw-green: #32D74B; --aw-green-text: #5BDF6F; --aw-orange: #FF9F0A; --aw-red: #FF453A; --aw-frame: rgba(255,255,255,0.14); }
.theme-win[data-theme="gruvbox-dark"] { --aw-canvas: #282828; --aw-text: #EBDBB2; --aw-muted: #928374; --aw-chrome: #1D2021; --aw-tab-on: #3C3836; --aw-status: #1D2021; --aw-gutter-bg: #282828; --aw-gutter-text: #7C6F64; --aw-gutter-sep: #1D2021; --aw-accent: #FE8019; --aw-keyword: #FB4934; --aw-string: #B8BB26; --aw-number: #D3869B; --aw-field: #282828; --aw-sel: #504945; --aw-stripe: rgba(255,255,255,0.04); --aw-colsep: rgba(205,211,219,0.06); --aw-hair: rgba(255,255,255,0.06); --aw-tab-stroke: rgba(255,255,255,0.10); --aw-icon: #EBDBB2; --aw-glyph: #FAFAFA; --aw-title: rgba(255,255,255,0.88); --aw-path: rgba(255,255,255,0.78); --aw-label2: rgba(255,255,255,0.55); --aw-pill-bg: rgba(255,255,255,0.14); --aw-pill-text: rgba(255,255,255,0.80); --aw-green: #32D74B; --aw-green-text: #5BDF6F; --aw-orange: #FF9F0A; --aw-red: #FF453A; --aw-frame: rgba(255,255,255,0.14); }
.theme-win[data-theme="high-contrast-dark"] { --aw-canvas: #000000; --aw-text: #FFFFFF; --aw-muted: #B0B0B0; --aw-chrome: #0A0A0A; --aw-tab-on: #262626; --aw-status: #0A0A0A; --aw-gutter-bg: #000000; --aw-gutter-text: #C0C0C0; --aw-gutter-sep: #FFFFFF; --aw-accent: #FFB000; --aw-keyword: #FFD75F; --aw-string: #7CE38B; --aw-number: #FFAF5F; --aw-field: #000000; --aw-sel: #1F4E8C; --aw-stripe: rgba(255,255,255,0.04); --aw-colsep: rgba(205,211,219,0.06); --aw-hair: rgba(255,255,255,0.06); --aw-tab-stroke: rgba(255,255,255,0.10); --aw-icon: #FFFFFF; --aw-glyph: #FAFAFA; --aw-title: rgba(255,255,255,0.88); --aw-path: rgba(255,255,255,0.78); --aw-label2: rgba(255,255,255,0.55); --aw-pill-bg: rgba(255,255,255,0.14); --aw-pill-text: rgba(255,255,255,0.80); --aw-green: #32D74B; --aw-green-text: #5BDF6F; --aw-orange: #FF9F0A; --aw-red: #FF453A; --aw-frame: rgba(255,255,255,0.14); }
.theme-win[data-theme="high-contrast-light"] { --aw-canvas: #FFFFFF; --aw-text: #000000; --aw-muted: #3A3A3A; --aw-chrome: #F0F0F0; --aw-tab-on: #FFFFFF; --aw-status: #F0F0F0; --aw-gutter-bg: #FFFFFF; --aw-gutter-text: #303030; --aw-gutter-sep: #000000; --aw-accent: #A63A00; --aw-keyword: #6F00A8; --aw-string: #005E1F; --aw-number: #8A4B00; --aw-field: #FFFFFF; --aw-sel: #B3D4FF; --aw-stripe: rgba(0,0,0,0.035); --aw-colsep: rgba(0,0,0,0.08); --aw-hair: rgba(0,0,0,0.08); --aw-tab-stroke: rgba(0,0,0,0.10); --aw-icon: #000000; --aw-glyph: #000000; --aw-title: rgba(0,0,0,0.85); --aw-path: rgba(0,0,0,0.6); --aw-label2: rgba(0,0,0,0.55); --aw-pill-bg: rgba(0,0,0,0.08); --aw-pill-text: rgba(0,0,0,0.75); --aw-green: #28A745; --aw-green-text: #1E7F33; --aw-orange: #E8890C; --aw-red: #D62F2F; --aw-frame: rgba(0,0,0,0.14); }

/* live text view */
  .aw-textwrap { background: var(--aw-canvas); min-height: 195px; }
  .aw-text {
    overflow-x: auto; scrollbar-width: none; position: relative; min-height: inherit;
    font-family: var(--aw-mono); font-size: 12px; line-height: 15px; color: var(--aw-text);
    /* the gutter plane runs the full height of the view */
    background: linear-gradient(to right, var(--aw-gutter-bg) 0 43px, var(--aw-gutter-sep) 43px 44px, transparent 44px);
  }
  .aw-text::-webkit-scrollbar { display: none; }
  .aw-line { display: flex; width: max-content; min-width: 100%; white-space: pre; }
  .aw-line .ln {
    position: sticky; left: 0; overflow: hidden; flex: none; width: 44px; padding-right: 8px; text-align: right;
    color: var(--aw-gutter-text); background: var(--aw-gutter-bg);
    border-right: 1px solid var(--aw-gutter-sep);
  }
  .aw-line .lc { flex: 1; min-width: 0; padding: 0 12px 0 8px; }
  .aw-line.err .ln { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--aw-red) 85%, transparent); }
  .aw-line.warn .ln { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--aw-orange) 85%, transparent); }
  .aw-line.err .lc { background: color-mix(in srgb, var(--aw-red) 8%, transparent); }
  .aw-line.warn .lc { background: color-mix(in srgb, var(--aw-orange) 8%, transparent); }
  .aw-line.cur .lc { background-image: linear-gradient(var(--aw-stripe), var(--aw-stripe)); }
  .aw-ts { color: var(--aw-muted); }
  .aw-lv-i { color: var(--aw-green); }
  .aw-lv-w { color: var(--aw-orange); }
  .aw-lv-e { color: var(--aw-red); }
  .aw-caret {
    display: inline-block; width: 2px; height: 15px; margin: 0 -1px; vertical-align: top; text-indent: 0;
    background: var(--aw-accent); animation: aw-blink 1.1s steps(1) infinite;
  }
  @keyframes aw-blink { 50% { opacity: 0; } }
  /* Soft wrap, as View > Word Wrap draws it: continuation rows indent by
     the tab width (4 columns) and carry a dimmed return arrow in the
     gutter; the severity band spans every row of its line. */
  /* Phones drop the timestamp and start the message on its own row, so
     an entry is who, then what, in three rows instead of five. */
  @media (max-width: 760px) {
    .aw-ts { display: none; }
    .aw-msg { display: block; text-indent: 0; }
  }
  @media (max-width: 1099px) {
    .aw-text { overflow: hidden; }
    .aw-line { width: auto; min-width: 0; white-space: pre-wrap; }
    .aw-line .ln { position: relative; }
    .aw-line .ln::after {
      content: "\21AA\A\21AA\A\21AA\A\21AA\A\21AA\A\21AA\A\21AA\A\21AA";
      white-space: pre; position: absolute; right: 8px; top: 15px; opacity: 0.55;
    }
    .aw-line .lc { overflow-wrap: anywhere; padding-left: calc(8px + 4ch); text-indent: -4ch; }
  }

/* The text view with its minimap, as View > Minimap draws it */
.theme-win .aw-textwrap { display: flex; min-height: 0; }
.theme-win .aw-text { flex: 1 1 auto; min-width: 0; padding: 8px 0 12px; }
.theme-win .aw-minimap { flex: none; width: 64px; position: relative; overflow: hidden; padding: 8px 0 0; border-left: 1px solid var(--aw-hair); background: var(--aw-canvas); }
.theme-win .aw-minimap i { display: block; height: 2px; margin: 0 8px 2px; background: var(--aw-text); opacity: 0.28; border-radius: 1px; }
.theme-win .aw-minimap i.w { background: var(--aw-orange); opacity: 0.55; }
.theme-win .aw-minimap i.e { background: var(--aw-red); opacity: 0.55; }
.theme-win .aw-mm-view { position: absolute; left: 0; right: 0; top: 0; height: 42px; background: rgba(128,128,128,0.14); border-bottom: 1px solid rgba(128,128,128,0.25); }

/* ---------------- Drawn windows in place of screenshots ---------------- */
.hm-win { font-family: var(--aw-ui); }
.hm-win .aw-grid { overflow: hidden; }
.hm-win .aw-table { min-width: 0; }
.hm-win .aw-table th, .hm-win .aw-table td { max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.hm-win .aw-textwrap { display: flex; min-height: 0; }
.hm-win .aw-text { flex: 1 1 auto; min-width: 0; padding: 6px 0 8px; overflow: hidden; }
.hm-win .aw-line { white-space: pre; width: auto; min-width: 0; }
.hm-win .aw-line .lc { overflow: hidden; text-overflow: ellipsis; }
.hm-win .aw-minimap { flex: none; width: 64px; position: relative; overflow: hidden; padding: 8px 0 0; border-left: 1px solid var(--aw-hair); background: var(--aw-canvas); }
.hm-win .aw-minimap i { display: block; height: 2px; margin: 0 8px 2px; background: var(--aw-text); opacity: 0.28; border-radius: 1px; }
.hm-win .aw-minimap i.w { background: var(--aw-orange); opacity: 0.55; }
.hm-win .aw-minimap i.e { background: var(--aw-red); opacity: 0.55; }
.hm-win .aw-mm-view { position: absolute; left: 0; right: 0; top: 0; height: 42px; background: rgba(128,128,128,0.14); border-bottom: 1px solid rgba(128,128,128,0.25); }
.hm-win .aw-key { color: var(--aw-text); }
.hm-win .aw-str { color: var(--aw-string, #8FBF7F); }
.hm-win .aw-num { color: var(--aw-number, #E8A14F); }
.hm-win .aw-kw { color: var(--aw-keyword, #B48EDD); }
.hm-win .aw-comp { color: var(--aw-keyword, #B48EDD); }
.aw { --aw-keyword: #B48EDD; --aw-string: #8FBF7F; --aw-number: #E8A14F; }
/* The hero: two drawn windows, the text one clipped over the grid */
.hm-device .lx-device-screen { aspect-ratio: 2560 / 1600; }
.hm-device .hm-tvt { aspect-ratio: 2560 / 1600; }
.hm-tvt .hm-win { border-radius: 0; border: 0; box-shadow: none; }
.hm-tvt .hm-win-text { position: absolute; inset: 0; }
.hm-tvt .hm-win-text .aw-textwrap { height: 690px; }
.hm-tvt .hm-win-grid .aw-grid { height: 690px; }
/* The 50-million-row window and the example files */
.hm-still .hm-win-50m .aw-grid { max-height: 690px; }
.hm-file-wins { position: relative; }
.hm-file-wins .hm-doc[hidden] { display: none; }
.hm-file-wins .hm-doc .aw-grid, .hm-file-wins .hm-doc .aw-textwrap { min-height: 570px; }
@media (max-width: 1099px) {
  .hm-win .aw-line { white-space: pre; }
  .hm-win .aw-line .ln { position: sticky; }
  .hm-win .aw-line .ln::after { content: none; }
  .hm-win .aw-line .lc { padding-left: 8px; text-indent: 0; }
}
@media (max-width: 760px) {
  .hm:not(.hm-shrunk) .hm-win .aw-titlebar { height: 44px; }
  .hm:not(.hm-shrunk) .hm-win .aw-btn { width: 30px; height: 30px; }
  .hm:not(.hm-shrunk) .hm-win .aw-search { width: 36px; height: 30px; padding: 0; justify-content: center; gap: 0; }
  .hm:not(.hm-shrunk) .hm-win .aw-search span { display: none; }
  .hm:not(.hm-shrunk) .hm-win .aw-tools { display: none; }
  .hm:not(.hm-shrunk) .hm-win .aw-name small { display: none; }
  .hm:not(.hm-shrunk) .hm-win .aw-tabs { height: 36px; }
  .hm:not(.hm-shrunk) .hm-win .aw-tab { height: 28px; min-width: 0; font-size: 12px; }
  .hm:not(.hm-shrunk) .hm-win .aw-status { height: 26px; font-size: 10px; }
  .hm:not(.hm-shrunk) .hm-win .aw-status .path, .hm:not(.hm-shrunk) .hm-win .aw-badge:not(.green) { display: none; }
  .hm:not(.hm-shrunk) .hm-win .aw-table .lead, .hm:not(.hm-shrunk) .hm-win .aw-table .tail { display: table-cell; position: static; }
  .hm:not(.hm-shrunk) .hm-win .aw-table tr:nth-child(n+15) { display: none; }
  .hm:not(.hm-shrunk) .hm-win .aw-table .phantom { display: table-row; }
  .hm:not(.hm-shrunk) .hm-win .aw-line:nth-child(n+27) { display: none; }
  .hm:not(.hm-shrunk) .hm-file-wins .hm-doc .aw-grid, .hm:not(.hm-shrunk) .hm-file-wins .hm-doc .aw-textwrap { min-height: 400px; }
  .hm:not(.hm-shrunk) .hm-win .aw-minimap { width: 36px; }
  .hm:not(.hm-shrunk) .hm-tvt .hm-win-text .aw-textwrap { height: 300px; }
  .hm:not(.hm-shrunk) .hm-tvt .hm-win-grid .aw-grid { height: 300px; }
  .hm:not(.hm-shrunk) .hm-tvt .hm-win .aw-table tr:nth-child(n+10) { display: none; }
  .hm:not(.hm-shrunk) .hm-tvt .hm-win .aw-line:nth-child(n+20) { display: none; }
}

/* The app icon in the file-journey figure lifts off the paper */
.hm-app-icon { filter: drop-shadow(0 10px 18px rgba(40,30,15,0.32)) drop-shadow(0 2px 4px rgba(40,30,15,0.18)); border-radius: 22%; }

/* The benchmark clip loops quietly with no control */
.hm-proof-clip .clip-toggle { display: none !important; }

/* The proof window: the status bar reports the index as it finishes */
.hm-proof-win .aw-grid { max-height: none; }
.hm-proof-win .aw-table tbody tr:nth-child(n+10) { display: none; }
.hm-proof-win .aw-table tbody tr.phantom { display: table-row; }
.hm-proof-win .hm-idx-job { color: var(--aw-label2); }
.hm-proof-win .hm-idx-job:not(:empty)::before { content: "\00b7"; margin: 0 6px 0 0; }

/* ---------------- Headings in the hero's face, everywhere on the homepage ---------------- */
.hm h2, .hm h3, .hm .lx-h2, .hm .lx-h3 { font-family: var(--mono); letter-spacing: -0.02em; }
.hm .lx-h2 { font-size: clamp(27px, 3.6vw, 44px); line-height: 1.16; max-width: 26ch; }
.hm .lx-h2.hm-h2-big { font-size: clamp(34px, 5vw, 62px); line-height: 1.1; max-width: 18ch; }
.hm .lx-intro .lx-h2 { margin-left: auto; margin-right: auto; }
.hm h3, .hm .lx-h3 { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; }
.hm .stage-text h3 { font-size: clamp(20px, 1.9vw, 26px); }
.hm .faq summary h3, .hm .faqs summary h3, .hm details summary h3 { font-size: 15.5px; letter-spacing: -0.01em; }
.hm .plan h3, .hm .tier h3 { font-size: 18px; }
.hm .tg-view + .lx-cap, .hm .theme-top h3 { font-size: 19px; }

/* Drawn windows never widen their columns; they clip inside */
.hm-proof { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hm-proof-clip, .hm-still, .hm-file-view { min-width: 0; }
@media (max-width: 900px) { .hm-proof { grid-template-columns: minmax(0, 1fr); } }

/* Buttons take the shape of the nav and form buttons: square corners, mono */
.hm .btn { font-family: var(--mono); font-weight: 600; font-size: 14px; line-height: 1; padding: 11px 18px; border-radius: 7px; border: 1px solid transparent; letter-spacing: 0; }
.hm .btn-fill { background: var(--accent); border-color: var(--accent); color: #fff; }
.hm .btn-fill:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.hm .btn-line { background: transparent; border-color: var(--rule-bright); color: var(--ink); }
.hm .btn-line:hover { border-color: var(--accent); color: var(--accent-hi); }

/* Plan buttons share the square shape */
.hm .plan a[data-plan], .hm .plans .go, .hm .plan .btn { font-family: var(--mono); font-weight: 600; font-size: 14px; line-height: 1; padding: 12px 18px; border-radius: 7px; border: 1px solid var(--rule-bright); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); background: transparent; }
.hm .plan a[data-plan]:hover { border-color: var(--accent); color: var(--accent-hi); }
.hm .plan.featured a[data-plan], .hm .plan a[data-plan].fill, .hm .plan a[data-plan].btn-fill { background: var(--accent); border-color: var(--accent); color: #fff; }
.hm .plan.featured a[data-plan]:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; }

.hm .plan .go-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.hm .plan .go-row .go { flex: 1 1 128px; min-width: 0; margin-top: 0; padding-left: 10px; padding-right: 10px; white-space: nowrap; }
/* The three cards share row tracks, so label, price, per line, bullets and
   buttons sit on the same lines across the row. Without subgrid support the
   cards fall back to their own flex columns. */
@supports (grid-template-rows: subgrid) {
  .hm .plan { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; align-content: start; }
  .hm .plan .go, .hm .plan .go-row { margin-top: 0; align-self: end; }
}
/* The themes window draws the same 36 lines and 18 rows as the example-file
   windows; phones see the first 18 lines and 12 rows. */
@media (max-width: 760px) {
  .hm:not(.hm-shrunk) .theme-win .aw-line:nth-child(n+19) { display: none; }
  .hm:not(.hm-shrunk) .theme-win .aw-table tbody tr:nth-child(n+13) { display: none; }
  .hm:not(.hm-shrunk) .theme-win .aw-minimap { width: 36px; }
}

/* ---------------- The guided walk: customers.csv ----------------
   A window drawn from the app's own elements (title bar, tab strip, the
   filter bar, the sheets, the status bar) that takes no clicks and never
   scrolls; one button under it carries the visitor through the steps. */
.hm-rail { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hm-rail li { padding: 12px 16px 14px; border-radius: 12px; background: var(--win); border: 1px solid var(--rule); border-top: 2px solid var(--rule); }
.hm-rail li[aria-current="step"] { border-top-color: var(--accent); }
.hm-rail li.is-done b::after { content: " \2713"; color: var(--ok); }
.hm-rail b { display: block; font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.hm-rail span { display: block; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 1000px) { .hm-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hm-rail { grid-template-columns: 1fr; gap: 10px; } .hm-rail li:not([aria-current="step"]) span { display: none; } }

.hm-demo-win { pointer-events: none; user-select: none; }
.hm-demo-win .aw-tools svg:nth-child(3) { color: var(--aw-text); }
.hm-demo-win[data-mode="table"] .aw-tools svg:nth-child(3) { color: var(--aw-accent); }
.hm-demo-win .aw-tab .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aw-accent); margin-left: 8px; }
.hm-demo-win .aw-tab .dot[hidden] { display: none; }
.hm-demo-win .aw-body { position: relative; height: 510px; overflow: hidden; background: var(--aw-canvas); }
.hm-demo-win .aw-grid, .hm-demo-win .aw-textwrap { height: 100%; overflow: hidden; }
.hm-demo-win .aw-grid[hidden], .hm-demo-win .aw-textwrap[hidden], .hm-demo-win .aw-fbar[hidden], .hm-demo-win .aw-sheet[hidden], .hm-demo-win [data-sheet][hidden] { display: none; }
.hm-demo-win .aw-table { min-width: 0; }
.hm-demo-win .aw-table th, .hm-demo-win .aw-table td { max-width: 240px; }
.hm-demo-win .aw-table tr:nth-child(n+15) { display: table-row; }
.hm-demo-win .aw-textwrap { display: block; }
.hm-demo-win .aw-text { padding: 6px 0 8px; overflow: hidden; }
.hm-demo-win .aw-line { white-space: pre; display: flex; }
.hm-demo-win .aw-line:nth-child(n+27) { display: flex; }
.hm-demo-win .aw-line .ln { position: sticky; }
.hm-demo-win .aw-line .ln::after { content: none; }
.hm-demo-win .aw-line .lc { overflow: hidden; text-overflow: ellipsis; padding-left: 8px; text-indent: 0; }
@media (max-width: 760px) {
  .hm:not(.hm-shrunk) .hm-demo-win .aw-body { height: 360px; }
  .hm:not(.hm-shrunk) .hm-demo-win .aw-table tr:nth-child(n+12) { display: none; }
  .hm:not(.hm-shrunk) .hm-demo-win .aw-line:nth-child(n+23) { display: none; }
}

/* The app's find and filter bars: the pill field with its focus ring and the
   selected query, the option boxes, the square buttons, the count. */
.aw-fbar, .aw-find { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; background: var(--aw-chrome); border-bottom: 1px solid var(--aw-hair); font: 500 13px var(--aw-ui); color: var(--aw-text); white-space: nowrap; }
.aw-chev { color: var(--aw-muted); font-size: 15px; padding: 0 2px; }
.aw-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 9px 0 10px; border-radius: 15px; background: var(--aw-field); box-shadow: 0 0 0 2px #2F7BF5; }
.aw-field svg { width: 13px; height: 13px; flex: none; color: var(--aw-glyph); }
.aw-field .q { font-weight: 600; background: rgba(47, 123, 245, 0.45); border-radius: 2px; padding: 0 1px; min-height: 1em; }
.aw-field .clr { margin-left: auto; width: 15px; height: 15px; border-radius: 50%; background: color-mix(in srgb, var(--aw-text) 45%, transparent); color: var(--aw-chrome); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.aw-opts { display: flex; gap: 11px; }
.aw-opts i { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-family: var(--aw-mono); font-size: 12.5px; color: var(--aw-text); }
.aw-opts i::before { content: ""; width: 14px; height: 14px; box-sizing: border-box; border-radius: 4px; background: color-mix(in srgb, var(--aw-text) 14%, transparent); border: 1px solid color-mix(in srgb, var(--aw-text) 30%, transparent); font-size: 10px; line-height: 12px; text-align: center; color: #fff; }
.aw-opts i.on::before { content: "\2713"; background: #2F7BF5; border-color: #2F7BF5; }
.aw-sq, .aw-pop { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; min-width: 34px; padding: 0 9px; border-radius: 7px; background: color-mix(in srgb, var(--aw-text) 14%, transparent); color: var(--aw-text); font-size: 13px; }
.aw-sq svg { width: 14px; height: 14px; }
.aw-pop::after { content: "\2304"; font-size: 12px; line-height: 1; margin-top: -4px; }
.aw-count { font-variant-numeric: tabular-nums; }
.aw-count b { font-weight: 500; }
@media (max-width: 760px) {
  .hm:not(.hm-shrunk) .aw-fbar, .hm:not(.hm-shrunk) .aw-find { gap: 6px; padding: 6px 8px; }
  .hm:not(.hm-shrunk) .aw-opts, .hm:not(.hm-shrunk) .aw-chev, .hm:not(.hm-shrunk) .aw-fbar .aw-sq:not(.x), .hm:not(.hm-shrunk) .aw-find .aw-sq:not(.x), .hm:not(.hm-shrunk) .aw-pop { display: none; }
  .hm:not(.hm-shrunk) .aw-field { height: 28px; }
}

/* Sheets, as the app draws them: attached to the top, the form with its
   right-aligned labels and popups, the preview, Cancel and the accent button. */
.hm-demo-win .aw-sheet { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, 0.38); display: flex; justify-content: center; align-items: flex-start; padding: 0 12px; }
.aw-sheet-card { width: min(560px, 100%); box-sizing: border-box; max-height: 100%; overflow: hidden; background: var(--aw-chrome); border: 1px solid var(--aw-hair); border-top: 0; border-radius: 0 0 12px 12px; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.55); padding: 16px 22px 16px; font: 13px/1.4 var(--aw-ui); color: var(--aw-text); }
.aw-sheet-card h4 { margin: 0 0 3px; font-size: 17px; font-weight: 700; }
.aw-sheet-card .sub { margin: 0 0 14px; color: var(--aw-label2); }
.aw-form { display: grid; grid-template-columns: 88px 1fr; gap: 9px 12px; align-items: center; }
.aw-form > label { text-align: right; }
.aw-pop2 { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 6px 0 12px; border-radius: 7px; background: color-mix(in srgb, var(--aw-text) 14%, transparent); }
.aw-pop2.focus { box-shadow: 0 0 0 2px #2F7BF5; }
.aw-pop2.dim { opacity: 0.45; }
.aw-pop2 i { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 5px; background: #2F7BF5; color: #fff; font-style: normal; font-size: 7px; line-height: 7px; }
.aw-pop2.dim i { background: color-mix(in srgb, var(--aw-text) 30%, transparent); }
.aw-desc { grid-column: 2; margin: -5px 0 0; color: var(--aw-label2); }
.aw-prev { grid-column: 1 / -1; width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 4px; border: 1px solid var(--aw-hair); border-radius: 8px; overflow: hidden; font-family: var(--aw-mono); font-size: 12px; }
.aw-prev th { text-align: left; font-family: var(--aw-ui); font-weight: 600; color: var(--aw-label2); background: color-mix(in srgb, var(--aw-text) 8%, transparent); padding: 6px 10px; }
.aw-prev td { padding: 5px 10px; border-top: 1px solid var(--aw-hair); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.aw-prev td:first-child { width: 50%; }
.aw-sum { grid-column: 1 / -1; margin: 6px 0 0; color: var(--aw-label2); }
.aw-sum b { color: var(--aw-text); }
.aw-sheet-card p.aw-sum { margin-top: 0; }
.aw-radios { grid-column: 1 / -1; display: grid; gap: 8px; }
.aw-radio, .aw-check { display: flex; align-items: center; gap: 8px; }
.aw-radio::before { content: ""; width: 15px; height: 15px; box-sizing: border-box; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--aw-text) 30%, transparent); background: color-mix(in srgb, var(--aw-text) 14%, transparent); }
.aw-radio.on::before { background: radial-gradient(circle, #fff 0 3px, #2F7BF5 3.5px); border-color: #2F7BF5; }
.aw-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; margin: 2px 0 0 23px; padding: 8px 10px; border-radius: 7px; background: color-mix(in srgb, var(--aw-text) 6%, transparent); opacity: 0.55; }
.aw-check::before { content: ""; width: 14px; height: 14px; box-sizing: border-box; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--aw-text) 30%, transparent); background: color-mix(in srgb, var(--aw-text) 14%, transparent); }
.aw-check.on::before { content: "\2713"; color: #fff; background: #2F7BF5; border-color: #2F7BF5; font-size: 10px; line-height: 12px; text-align: center; }
.aw-acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.aw-btn2 { display: inline-flex; align-items: center; height: 30px; padding: 0 16px; border-radius: 7px; background: color-mix(in srgb, var(--aw-text) 14%, transparent); font-weight: 600; }
.aw-btn2.go { background: var(--aw-accent); color: #fff; }
@media (max-width: 760px) {
  .hm:not(.hm-shrunk) .aw-sheet-card { padding: 12px 14px; }
  .hm:not(.hm-shrunk) .aw-form { grid-template-columns: 70px 1fr; gap: 7px 10px; }
  .hm:not(.hm-shrunk) .aw-prev tr:nth-child(n+4) { display: none; }
  .hm:not(.hm-shrunk) .aw-checks { grid-template-columns: 1fr; }
  .hm:not(.hm-shrunk) .aw-check:nth-child(n+4) { display: none; }
}

/* The walk's controls under the window */
.hm-tour { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 0 0 18px; padding: 16px 20px; border-radius: 12px; background: var(--win); border: 1px solid var(--rule); }
.hm-tour-cap { margin: 0; flex: 1 1 420px; font-size: 16px; line-height: 1.5; color: var(--ink); }
.hm-tour-acts { display: flex; align-items: center; gap: 10px; flex: none; }
.hm-tour-n { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); margin-right: 6px; }
.hm-tour .btn { font-size: 13px; padding: 10px 16px; }
.hm-demo-win .aw-status .msg { color: var(--aw-text); overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------------- The huge log (scale chapter) ----------------
   The 10 GB benchmark log drawn in Log Mode with Find open on ERROR; the
   match count fills in the way the app counts, then holds. */
.hm-still .hm-win-log .aw-textwrap { max-height: 690px; }
.hm-win-log .aw-lv-d { color: var(--aw-muted); }
.hm-win-log .aw-hit { background: color-mix(in srgb, var(--aw-accent) 32%, transparent); color: inherit; border-radius: 2px; }
.hm-win-log .aw-hit.cur { background: var(--aw-accent); color: #fff; }
.hm-win-log .aw-line.cur .lc { background-image: linear-gradient(color-mix(in srgb, var(--aw-accent) 10%, transparent), color-mix(in srgb, var(--aw-accent) 10%, transparent)); }
.hm-win-log .aw-find .aw-count { margin-left: auto; }
.hm-win-log .aw-minimap i.e { background: var(--aw-red); opacity: 0.6; }
}

/* The same workflow at fifty million rows, under the working model */
.hm-same { margin-top: 64px; }
.hm-same-h { text-align: center; margin: 0 0 14px; }
.hm-same-lede { text-align: center; max-width: 760px; margin: 0 auto; font-size: 17px; line-height: 1.55; color: var(--ink-dim); }
.hm-same .hm-scale-facts { margin-top: 36px; }

/* "Slide me": a hint on the hero slider's handle until the first drag */
.tvt-hint { position: absolute; left: var(--pos, 50%); top: calc(50% - 66px); transform: translateX(-50%); z-index: 4; padding: 6px 10px; border-radius: 7px; background: var(--accent); color: #fff; font-family: var(--mono); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.4s; }
.tvt-hint::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; background: var(--accent); transform: translateX(-50%) rotate(45deg); }
.tvt.show-hint .tvt-hint { opacity: 1; animation: tvt-nudge 1.6s ease-in-out infinite; }
@keyframes tvt-nudge { 0%, 100% { margin-left: -6px; } 50% { margin-left: 6px; } }
.tvt.is-touched .tvt-hint { opacity: 0; animation: none; }
@media (prefers-reduced-motion: reduce) { .tvt.show-hint .tvt-hint { animation: none; } }
/* Common shortcuts in the keyboard tile */
.hm-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; margin: 22px 0 18px; }
.hm-keys > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-soft); }
.hm-keys dt { margin: 0; }
.hm-keys dd { margin: 0; flex: none; }
.hm-keys kbd { font-size: 13px; }
@media (max-width: 600px) { .hm-keys { grid-template-columns: 1fr; } }
/* The search field tile shows its image at full tile width */
/* The search field tile: the two popovers cropped out of the composite, stacked */
.hm-search-tile .lx-tile-media { margin-right: 0; margin-bottom: 0; display: grid; gap: 14px; }
.hm-search-tile .lx-tile-media .shot { width: 100%; display: block; border-radius: 12px; border: 0; }

/* ---------------- Meet the developer ---------------- */
.hm-dev { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 56px; align-items: center; }
.hm-dev-photo { margin: 0; }
.hm-dev-photo img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 24px 48px -18px rgba(0, 0, 0, 0.45); }
.hm-dev-eyebrow { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--accent); margin: 0 0 12px; }
.hm-dev .lx-h2 { text-align: left; margin: 0 0 12px; max-width: none; }
.hm-dev-name { font-family: var(--mono); font-size: 13px; color: var(--ink-dim); margin: 0 0 20px; }
.hm-dev-text > p:not(.hm-dev-eyebrow):not(.hm-dev-name):not(.lx-more) { font-size: 17px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; max-width: none; }
.hm-dev .lx-more { text-align: left; margin: 10px 0 0; }
@media (max-width: 900px) {
  .hm-dev { grid-template-columns: 1fr; gap: 28px; }
  .hm-dev-photo { max-width: 300px; }
}

/* Your files: three values as typed, in the file, in Caxton, after a spreadsheet */
.hm-verbatim { margin: 40px auto 0; max-width: 820px; }
.hm-vt { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--win); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; font-family: var(--mono); font-size: 14px; }
.hm-vt th, .hm-vt td { padding: 11px 16px; text-align: left; white-space: nowrap; border-top: 1px solid var(--rule); }
.hm-vt thead th { border-top: 0; font-size: 12px; font-weight: 600; color: var(--accent); background: var(--win-2); }
.hm-vt tbody th { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink-dim); }
.hm-vt tbody th::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 10px; background: var(--rule-bright); vertical-align: 1px; }
.hm-vt tr.ok tbody th, .hm-vt tr.ok th { color: var(--ink); }
.hm-vt tr.ok th::before { background: var(--ok); }
.hm-vt tr.ok td { color: var(--ink); font-weight: 600; }
.hm-vt tr.no th::before { background: var(--accent); }
.hm-vt tr.no td { color: var(--ink-dim); }
.hm-verbatim .lx-cap { margin: 14px auto 0; text-align: center; max-width: 820px; }
.hm-verbatim { margin-bottom: 56px; }
@media (max-width: 760px) {
  .hm-verbatim { overflow-x: auto; }
  .hm-verbatim .hm-vt { font-size: 13px; min-width: 520px; }
  .hm-vt th, .hm-vt td { padding: 9px 12px; }
}

/* ---------------- About and Pricing on the homepage's chapters ---------------- */
.hm-page-hero { padding-bottom: 64px; }
.hm-page-hero .hm-desc { margin-bottom: 0; }
.hm-mission { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--ink); max-width: 980px; margin: 0 auto 22px; }
.hm-dev-long { align-items: start; }
.hm-dev-long .hm-dev-photo { position: sticky; top: 96px; }
.hm-dev-long .hm-dev-photo figcaption { margin-top: 10px; font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.hm-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hm-team { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.hm-team .hm-vt tbody th::before { content: none; }
.hm-team .hm-vt tbody th { font-family: var(--mono); color: var(--ink); }
.hm-team .hm-vt td { color: var(--ink-soft); }
.hm-team-text p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 14px; max-width: none; }
.hm-team-text a { color: var(--accent-hi); }
@media (max-width: 900px) {
  .hm-jobs, .hm-team { grid-template-columns: 1fr; }
  .hm-dev-long .hm-dev-photo { position: static; }
}
@media (max-width: 760px) {
  .hm-team .hm-vt { font-size: 13px; }
  .hm-team .hm-vt th, .hm-team .hm-vt td { white-space: normal; padding: 9px 10px; }
}

/* ---------------- Legal and support pages on the chapters ---------------- */
.hm-legal h2 { font-family: var(--mono); font-size: clamp(20px, 2vw, 26px); letter-spacing: -0.02em; margin: 44px 0 12px; color: var(--ink); }
.hm-legal h2:first-child { margin-top: 0; }
.hm-legal h3 { font-family: var(--sans); font-size: 17px; font-weight: 600; margin: 22px 0 8px; color: var(--ink); }
.hm-legal p, .hm-legal li { font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: none; }
.hm-legal p { margin: 0 0 14px; }
.hm-legal ul { margin: 0 0 16px; padding-left: 22px; }
.hm-legal li { margin: 0 0 8px; }
.hm-legal strong { color: var(--ink); }
.hm-legal a { color: var(--accent-hi); }
.hm-legal code { font-family: var(--mono); font-size: 0.92em; }
.hm-aside p { color: var(--ink-dim); font-size: 16px; }
.hm-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hm-quick > a, .hm-quick > .card { display: block; padding: 20px 22px; border-radius: 12px; background: var(--win); border: 1px solid var(--rule); border-top: 2px solid var(--rule); text-decoration: none; color: inherit; }
.hm-quick > a:hover { border-top-color: var(--accent); }
.hm-quick .qt { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.hm-quick .qd { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.hm-quick .qd code { font-family: var(--mono); font-size: 0.92em; }
.hm-sform-wrap { max-width: 760px; margin: 0 auto; }
.hm-sform-wrap .note { margin-bottom: 18px; padding: 14px 16px; border-radius: 10px; background: var(--win); border: 1px solid var(--rule); color: var(--ink); }
.hm-sform-alt { margin-top: 18px; }
@media (max-width: 900px) { .hm-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .hm-quick { grid-template-columns: 1fr; } }
.hm-legal-sec { padding-top: 48px; }

/* ---------------- Every other page on the chapters ----------------
   The page's own wrapper (docs with the side nav, guides, the features
   and changelog rails, the download page) sits inside one paper chapter
   under a mono hero that holds its h1 and lede. */
.hm-page-body { padding-top: 24px; padding-bottom: 72px; }
.hm-page-body .docwrap, .hm-page-body .docwrap.solo, .hm-page-body .fwrap, .hm-page-body .clwrap { padding-top: 0; }
.hm-doc-hero { padding-bottom: 48px; }
.hm .hm-doc-hero h1 { font-size: clamp(26px, 3.2vw, 40px); max-width: 36ch; }
.hm-page-hero .lx-lede { max-width: 820px; }

/* ---------------- Phones: drawn windows shrink instead of reflowing ----------------
   home.js wraps each drawn window in .hm-shrink, draws it at a desktop width
   and scales it to the phone's width, so it reads as a small real window
   rather than a cramped one. The compaction rules above then stay off
   (body.hm-shrunk), and the text view keeps its desktop lines. */
.hm-shrink { width: 100%; overflow: hidden; }
.hm-shrink.on > * { transform-origin: 0 0; }
.hm-shrink.on .aw-ts { display: inline; }
.hm-shrink.on .aw-msg { display: inline; text-indent: 0; }
.hm-shrink.on .aw-text { overflow: hidden; }
.hm-shrink.on .aw-line { white-space: pre; width: auto; min-width: 0; }
.hm-shrink.on .aw-line .ln { position: sticky; }
.hm-shrink.on .aw-line .ln::after { content: none; }
.hm-shrink.on .aw-line .lc { overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; padding-left: 8px; text-indent: 0; }

/* Filled .go buttons on the pages wrapped by the chapter transform keep white
   text: launch.css recolors every chapter link that is not a .btn. */
.hm .hm-page-body a.go, .hm .hm-page-body a.go:hover { color: #fff; }

/* benchmarks.tsv on phones: two wrapping columns, result and operation,
   inside the same window, with nothing to scroll sideways. */
@media (max-width: 760px) {
  .hm .bench-win .aw-grid { overflow-x: hidden; }
  .hm .bench-win .aw-table { min-width: 0; width: 100%; table-layout: fixed; }
  .hm .bench-win .aw-table th:nth-child(4), .hm .bench-win .aw-table td:nth-child(4),
  .hm .bench-win .aw-table th:nth-child(5), .hm .bench-win .aw-table td:nth-child(5),
  .hm .bench-win .aw-table th.add, .hm .bench-win .aw-table td.add { display: none; }
  .hm .bench-win .aw-table th, .hm .bench-win .aw-table td { white-space: normal; overflow-wrap: anywhere; height: auto; padding: 8px 8px; line-height: 1.35; vertical-align: top; }
  .hm .bench-win .aw-table .rn { width: 30px; min-width: 30px; padding-right: 6px; }
  .hm .bench-win .aw-table .lead { position: static; width: 64px; box-shadow: none; }
  .hm .bench-win .aw-table thead th { padding-right: 8px; }
  .hm .bench-win .aw-table thead th.col::after { display: none; }
}

/* ---- Demo sheets: centered in the window and smaller, so the grid stays in view ---- */
.hm-demo-win .aw-sheet { align-items: center; padding: 16px; }
.aw-sheet-card { width: min(470px, 100%); border-top: 1px solid var(--aw-hair); border-radius: 12px; padding: 14px 16px 14px; font-size: 12px; line-height: 1.4; }
.aw-sheet-card h4 { font-size: 15px; margin-bottom: 2px; }
.aw-sheet-card .sub { margin-bottom: 10px; font-size: 11.5px; }
.aw-form { grid-template-columns: 78px 1fr; gap: 7px 10px; }
.aw-pop2 { height: 26px; }
.aw-prev { margin-top: 2px; font-size: 11.5px; }
.aw-prev th { padding: 5px 8px; }
.aw-prev td { padding: 4px 8px; }
.aw-prev tbody tr:nth-child(n+6) { display: none; }
.aw-sum { margin-top: 4px; font-size: 11.5px; }
.aw-checks { gap: 2px 12px; padding: 6px 8px; margin-left: 21px; }
.aw-acts { margin-top: 10px; }
.aw-btn2 { height: 28px; padding: 0 14px; }
/* ---- What the step changed, shown in the grid ---- */
.hm-demo-win .aw-table tbody td.changed { background-image: linear-gradient(color-mix(in srgb, var(--aw-accent) 24%, transparent), color-mix(in srgb, var(--aw-accent) 24%, transparent)) !important; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aw-accent) 60%, transparent); color: var(--aw-text); }
.hm-demo-win .aw-table thead th.changed-col { color: var(--aw-accent); }
.hm-demo-win .aw-table thead th .hm-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 9px; background: var(--aw-accent); color: #fff; font-size: 10px; font-weight: 600; line-height: 15px; vertical-align: 1px; }
.hm-demo-win .aw-table tbody tr.gap td { height: 24px; padding: 0 8px; background: var(--aw-accent) !important; background-image: none !important; color: #fff; font-family: var(--aw-ui); font-size: 11px; font-weight: 600; border-right: 0; }
.hm-demo-win .aw-table tbody tr.gap td.rn { color: #fff; }
/* ---- Phones: the benchmarks as a chart, the values table as cards ---- */
.hm-bench-list { display: none; }
.hm-vt-cards { display: none; }
@media (max-width: 760px) {
  .hm .bench-win { display: none; }
  .hm-bench-list { display: block; margin: 8px 0 0; }
  .hm-bench-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
  .hm-bench-list > div:last-child { border-bottom: 1px solid var(--rule); }
  .hm-bench-list dt { margin: 0; }
  .hm-bench-list dd { margin: 0; flex: none; font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--accent); }
  .hm-verbatim { overflow: visible; }
  .hm-verbatim .hm-vt { display: none; }
  .hm-vt-cards { display: grid; gap: 10px; }
  .hm-vt-card { background: var(--win); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; }
  .hm-vt-card h4 { margin: 0 0 8px; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink-dim); }
  .hm-vt-card h4::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; background: var(--rule-bright); vertical-align: 1px; }
  .hm-vt-card.ok h4 { color: var(--ink); }
  .hm-vt-card.ok h4::before { background: var(--ok); }
  .hm-vt-card.no h4::before { background: var(--accent); }
  .hm-vt-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-family: var(--mono); font-size: 13px; }
  .hm-vt-card dt { color: var(--accent); font-size: 12px; }
  .hm-vt-card dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
  .hm-vt-card.no dd { color: var(--ink-dim); font-weight: 400; }
}

/* ---- Callouts inside the demo window: one tag per thing the step did ---- */
.hm-demo-win { position: relative; }
.hm-callouts { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: visible; }
.hm-callout { position: absolute; max-width: 260px; padding: 5px 9px; border-radius: 7px; background: var(--aw-accent); color: #fff; font: 600 11.5px/1.3 var(--aw-ui); white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.hm-callout::before { content: ""; position: absolute; width: 9px; height: 9px; background: var(--aw-accent); transform: rotate(45deg); }
.hm-callout.below::before { top: -4px; left: 50%; margin-left: -4px; }
.hm-callout.above::before { bottom: -4px; left: 50%; margin-left: -4px; }
.hm-callout.right::before { left: -4px; top: 50%; margin-top: -4px; }
.hm-demo-win .aw-table thead th.sel { background-image: linear-gradient(color-mix(in srgb, var(--aw-accent) 18%, transparent), color-mix(in srgb, var(--aw-accent) 18%, transparent)); }
.hm-demo-win .aw-table tbody td.sel { background-image: linear-gradient(color-mix(in srgb, var(--aw-accent) 8%, transparent), color-mix(in srgb, var(--aw-accent) 8%, transparent)); }
.hm-demo-win .aw-table tbody tr:nth-child(odd) td.sel { background-image: linear-gradient(color-mix(in srgb, var(--aw-accent) 8%, transparent), color-mix(in srgb, var(--aw-accent) 8%, transparent)), linear-gradient(var(--aw-stripe), var(--aw-stripe)); }