/* Hallmark · shape: Feature Stack (draw d0d534) · genre: atmospheric · theme: Bloom (deal 1/3, seed free-open-source-offline-bengali-f95b·731b3585·2026-11-02·r0) · redesign: full · job: try
 * hero: Settled · nav: banner over a retracting bar · footer: index columns · imagery: the product built in slots, a real test recording drawn and played · signature: a real Bengali recording drawn on the grid settling into the text Bolo types, and the cap really plays it
 * axes: light/grotesk-sans/warm · posture: committed · contrast: pass · fold: pass · brand: the logo's green and red replace Bloom's umber and terracotta · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a download page argues little; it argues offline Bengali over cloud English, set as the statement */
/* Hallmark · waive 37 · Anek Bangla fills only the Bengali glyphs inside the display stack · Ranade has no Bengali script and this page speaks বাংলা */
/* Hallmark · dropped #download, #features, #how, #try, the fork link, releases/latest · the old anchors belonged to the removed sections, Versions and Contribute replace them, and the repo link covers forking */
/* Hallmark · dropped every github.com link, the Contribute section and the stars count · the owner made the repo private and Bolo premium after a free beta; downloads now come from /download/ */
/* Hallmark · dropped the browser speech demo (#tryOut, #micBtn, #copyBtn, #clearBtn) · it used the browser vendor's engine, not Bolo's model, and the owner asked for it to go */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- chrome ---------- */
.banner { background: var(--color-ink); color: var(--color-accent-ink); font-size: var(--text-sm); }
.banner .container { display: flex; justify-content: center; gap: var(--space-xs); padding-block: var(--space-xs); flex-wrap: wrap; text-align: center; }
.banner a { color: var(--color-accent-ink); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--color-accent-ink) 45%, transparent); }
.banner a:hover { text-decoration-color: var(--color-accent-ink); }

.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 88%, transparent); backdrop-filter: blur(12px); transition: box-shadow var(--dur-short) var(--ease-out); }
.bar.is-stuck { box-shadow: 0 1px 0 var(--color-rule); }
.bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: var(--text-lg); letter-spacing: -0.02em; }
.wordmark img { width: 32px; height: 32px; }
.bar nav { display: flex; align-items: center; gap: var(--space-lg); }
.bar nav a.link { color: var(--color-ink-2); text-decoration: none; font-weight: 500; font-size: var(--text-sm); }
.bar nav a.link:hover { color: var(--color-accent); }

/* ---------- controls ---------- */
.pill { white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-sm); min-height: 52px; padding: var(--space-2xs) var(--space-lg) var(--space-2xs) var(--space-2xs); border: 0; border-radius: var(--radius-pill); background: var(--color-sheet); color: var(--color-ink); box-shadow: 0 0 0 1px var(--shade-1), 0 8px 18px -10px var(--shade-2), inset 0 1px 0 var(--hi); font-weight: 500; text-decoration: none; cursor: pointer; transition: transform var(--dur-micro) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.pill:hover { box-shadow: 0 0 0 1px var(--shade-2), 0 12px 24px -12px var(--shade-3), inset 0 1px 0 var(--hi); }
.pill:active { transform: translateY(1px); }
.pill:disabled, .pill[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.pill .txt { display: grid; line-height: 1.25; text-align: left; }
.pill .txt small { color: var(--color-muted); font-size: var(--text-xs); font-weight: 400; }
.pill--plain { padding: var(--space-xs) var(--space-lg); min-height: 44px; }

.rec { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, var(--bezel), var(--color-paper-3)); box-shadow: inset 0 2px 3px var(--shade-2), 0 1px 0 var(--hi); }
.rec__cap { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--color-accent-ink); background: radial-gradient(120% 110% at 50% 18%, var(--rubber-hi), var(--rubber) 48%, var(--rubber-lo)); box-shadow: inset 0 1px 0.5px var(--hi), 0 5px 9px -3px var(--shade-3); transition: transform var(--dur-micro) var(--ease-out); }
.rec__cap svg { width: 16px; height: 16px; }
.pill:active .rec__cap { transform: translateY(1px); }
.rec--lg { width: 64px; height: 64px; } .rec--lg .rec__cap { width: 50px; height: 50px; } .rec--lg .rec__cap svg { width: 20px; height: 20px; }
.is-listening .rec { animation: breathe 1.6s var(--ease-in-out) infinite; }
@keyframes breathe { 50% { transform: scale(0.94); } }

a.inline { color: var(--color-accent); text-decoration: none; font-weight: 500; }
a.inline:hover { text-decoration: underline; }

/* ---------- hero ---------- */
.hero .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; min-height: calc(100svh - 100px); padding-block: var(--space-2xl); }
.hero h1 { max-width: 12ch; }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); max-width: 34ch; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); }
.hero .needs { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); max-width: 44ch; }

/* the stage: the medium's own grid, a timeline in seconds */
.stage { position: relative; border-radius: var(--radius-card); background: var(--color-sheet); box-shadow: var(--shadow-lift); padding: var(--space-lg); }
.stage::before { content: ""; position: absolute; inset: -80px; z-index: -1; background-image: linear-gradient(to right, var(--grid-beat) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-row) 1px, transparent 1px); background-size: 40px 100%, 100% 40px; mask-image: radial-gradient(closest-side, black, transparent); pointer-events: none; }
.stage__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-2xs) var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.stage__head b { color: var(--color-ink); font-weight: 500; }
.roll { --beat: 40px; position: relative; margin-top: var(--space-md); border-radius: var(--radius-inner); background-color: var(--color-paper); background-image: linear-gradient(to right, var(--grid-bar) 1px, transparent 1px), linear-gradient(to right, var(--grid-beat) 1px, transparent 1px), linear-gradient(to right, var(--grid-16) 1px, transparent 1px); background-size: calc(var(--beat) * 4) 100%, var(--beat) 100%, calc(var(--beat) / 4) 100%; padding: var(--space-md) var(--space-sm); }
.ruler { display: flex; justify-content: space-between; font-family: var(--font-code); font-size: var(--text-xs); color: var(--color-muted); padding-inline: var(--space-2xs); }
.lane { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: var(--space-sm); margin-top: var(--space-sm); }
.lane > span { font-size: var(--text-xs); color: var(--color-muted); font-weight: 500; }
.clip { --c: var(--lane-2); position: relative; min-height: 72px; border-radius: var(--radius-clip); background: linear-gradient(color-mix(in oklab, var(--c) 14%, var(--color-sheet)), color-mix(in oklab, var(--c) 24%, var(--color-sheet))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 42%, transparent), inset 0 1px 0 var(--hi); overflow: hidden; }
.wave { display: block; width: 100%; height: 72px; color: var(--c); }
.playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--color-ink); transform: translateX(0); opacity: 0.3; }
.playing .playhead { opacity: 1; }
.clip--text { --c: var(--lane-1); display: flex; align-items: center; padding: var(--space-sm) var(--space-md); min-height: 96px; }
.typed { font-size: clamp(1.25rem, 1vw + 1rem, 1.75rem); line-height: 1.5; color: var(--color-ink); min-height: 1.5em; }
.typed .w { transition: opacity var(--dur-long) var(--ease-out); }
.typed .w.is-partial { opacity: 0.45; }
.stage__foot { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); flex-wrap: wrap; }
.state { font-size: var(--text-sm); color: var(--color-muted); }
.state b { color: var(--color-ink); font-weight: 500; }
.stage__foot .pill { margin-left: auto; }

/* ---------- statement ---------- */
.why { padding-block: var(--section-gap-s) var(--section-gap); }
.why .statement { font-size: var(--text-section); font-weight: 600; letter-spacing: var(--tracking-display); line-height: 1.12; max-width: 24ch; text-wrap: balance; }
.why .statement + p { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 52ch; }
.versus { margin-top: var(--space-2xl); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.versus div { border-top: 1px solid var(--color-rule); padding-top: var(--space-md); }
.versus dt { font-weight: 600; font-size: var(--text-title); letter-spacing: -0.015em; }
.versus dd { margin: var(--space-2xs) 0 0; color: var(--color-muted); }

/* ---------- feature stack ---------- */
.stack { background: var(--color-paper-2); padding-block: var(--section-gap); }
.stack .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); }
.stack__pane { position: sticky; top: 96px; align-self: start; }
.stack__pane p { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 30ch; }
.stack__steps { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-xs); counter-reset: s; }
.stack__steps li { counter-increment: s; display: flex; gap: var(--space-sm); color: var(--color-muted); font-weight: 500; transition: color var(--dur-short) var(--ease-out); }
.stack__steps li::before { content: counter(s); font-family: var(--font-code); font-size: var(--text-xs); padding-top: var(--space-3xs); }
.stack__steps li.is-on { color: var(--color-ink); }
.stack__frames { display: grid; gap: var(--space-2xl); }
.frame { margin: 0; min-height: 420px; border-radius: var(--radius-card); background: var(--color-sheet); box-shadow: var(--shadow-card); padding: var(--space-xl); display: grid; align-content: center; gap: var(--space-lg); }
.frame figcaption { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 36ch; }
.frame figcaption b { color: var(--color-ink); font-weight: 600; }

.keys { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
kbd { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); min-width: 72px; text-align: center; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-inner); background: linear-gradient(var(--color-sheet), var(--case)); box-shadow: 0 0 0 1px var(--shade-1), 0 4px 0 var(--color-paper-3), 0 6px 14px -6px var(--shade-2), inset 0 1px 0 var(--hi); color: var(--color-ink); }
.keys .plus { color: var(--color-muted); font-size: var(--text-lg); }

.states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.states figure { margin: 0; display: grid; justify-items: center; gap: var(--space-sm); padding: var(--space-lg) 0; border-radius: var(--radius-inner); background: var(--color-paper); }
.states span { font-size: var(--text-sm); color: var(--color-muted); }
.ind { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; }
.ind--wait { background: radial-gradient(circle at 50% 30%, var(--bezel), var(--color-paper-3)); box-shadow: inset 0 2px 3px var(--shade-2); }
.ind--hear { background: radial-gradient(120% 110% at 50% 18%, var(--rubber-hi), var(--rubber) 48%, var(--rubber-lo)); box-shadow: 0 0 0 6px var(--color-accent-soft), 0 0 0 14px color-mix(in oklab, var(--color-accent) 6%, transparent), 0 5px 9px -3px var(--shade-3); }
.ind--done { background: radial-gradient(120% 110% at 50% 18%, color-mix(in oklab, var(--color-accent-2) 70%, white), var(--color-accent-2) 60%); box-shadow: 0 5px 9px -3px var(--shade-2); color: var(--color-accent-ink); }
.ind svg { width: 22px; height: 22px; }

/* built settings window, from bolo-gui/src/settings.rs */
.settings { border-radius: var(--radius-inner); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-rule); padding: var(--space-lg); display: grid; gap: var(--space-md); font-size: var(--text-sm); }
.settings h3 { font-size: var(--text-lg); }
.settings .row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: var(--space-sm); align-items: center; }
.settings .row > span { color: var(--color-muted); }
.settings .field { border-radius: var(--radius-clip); background: var(--color-sheet); box-shadow: inset 0 0 0 1px var(--color-rule); padding: var(--space-xs) var(--space-sm); font-family: var(--font-code); font-size: var(--text-xs); overflow-wrap: anywhere; min-width: 0; }
.seg { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.seg span { padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-rule); color: var(--color-ink-2); }
.seg span.on { background: var(--color-ink); color: var(--color-accent-ink); box-shadow: none; }

.big { font-family: var(--font-outlier); font-weight: 400; font-size: clamp(6rem, 12vw, 10rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--color-ink); }
.big small { font-size: 0.32em; letter-spacing: 0; }
.mem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.mem div { border-top: 1px solid var(--color-rule); padding-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); }
.mem b { display: block; color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- versions table ---------- */
.versions { padding-block: var(--section-gap-l) var(--section-gap); }
.versions h2 { max-width: 16ch; }
.versions > .container > p { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 46ch; }
.vt { width: 100%; margin-top: var(--space-2xl); border-collapse: collapse; table-layout: fixed; }
.vt col.name { width: 40%; }
.vt th, .vt td { text-align: left; padding: var(--space-md) var(--space-sm); border-bottom: 1px solid var(--color-rule); vertical-align: top; }
.vt thead th { vertical-align: bottom; padding-bottom: var(--space-lg); font-weight: 400; }
.vt thead th h3 { font-size: var(--text-title); }
.vt thead th small { display: block; color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--space-2xs); }
.vt tbody th { font-weight: 500; }
.vt td { color: var(--color-ink-2); }
.vt .no { color: var(--color-muted); }
.vt tfoot td { border-bottom: 0; padding-top: var(--space-lg); }
.cmd { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-xs); font-family: var(--font-code); font-size: var(--text-xs); color: var(--color-ink-2); }
.cmd code { flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.6; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-clip); background: var(--color-paper-2); }
.copy { flex-shrink: 0; min-height: 44px; padding: var(--space-2xs) var(--space-sm); border: 0; border-radius: var(--radius-clip); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-xs); cursor: pointer; }
.copy:hover { background: var(--color-rule); }
.copy:active { transform: translateY(1px); }
.installs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-xl); }
.installs p { font-size: var(--text-sm); color: var(--color-muted); }
[data-size], .mem b, .big { white-space: nowrap; }
body { font-variant-numeric: proportional-nums; }
.versions .more code, .vt code, details code { font-family: var(--font-code); font-size: 0.85em; }
.versions .more { margin-top: var(--space-xl); color: var(--color-muted); }

/* ---------- under the hood ---------- */
.hood { padding-block: var(--section-gap-s); border-top: 1px solid var(--color-rule); }
.hood .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.hood p { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 36ch; }
.file { margin: 0; border-radius: var(--radius-card); background: var(--color-ink); box-shadow: var(--shadow-card); overflow: hidden; }
.file figcaption { padding: var(--space-sm) var(--space-lg); font-size: var(--text-sm); color: var(--color-paper-3); border-bottom: 1px solid color-mix(in oklab, var(--color-paper) 14%, transparent); }
.file pre { margin: 0; padding: var(--space-lg); font-family: var(--font-code); font-size: var(--text-sm); line-height: 1.75; color: var(--color-paper-2); overflow-x: auto; }
.file .k { color: color-mix(in oklab, var(--color-accent-2) 45%, var(--color-sheet)); } .file .s { color: color-mix(in oklab, var(--rubber-hi) 55%, var(--color-sheet)); } .file .c { color: color-mix(in oklab, var(--color-paper-3) 62%, var(--color-ink)); }

/* ---------- contribute rows ---------- */
.help { padding-block: var(--section-gap); }
.help .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns) var(--space-3xl); }
.help .head p { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 30ch; }
.help .head .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-top: var(--space-xl); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap-columns); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.rows li:last-child { border-bottom: 1px solid var(--color-rule); }
.rows h3 { font-size: var(--text-title); }
.rows p { color: var(--color-ink-2); }

/* ---------- questions ---------- */
.faq { padding-block: 0 var(--section-gap); }
.faq .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns) var(--space-3xl); }
details { border-top: 1px solid var(--color-rule); }
details:last-child { border-bottom: 1px solid var(--color-rule); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); font-weight: 600; font-size: var(--text-lg); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: 400; color: var(--color-muted); transition: transform var(--dur-short) var(--ease-out); }
details[open] summary::after { transform: rotate(45deg); }
summary:hover { color: var(--color-accent); }
details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }
details code { font-family: var(--font-code); font-size: 0.9em; }

/* ---------- close ---------- */
.close { background: var(--color-paper-2); padding-block: var(--section-gap-s); }
.close .container { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; }
.close .bn { font-size: clamp(4rem, 9vw, 8rem); font-weight: 600; line-height: 1.1; color: var(--color-ink); }
.close .actions { display: grid; gap: var(--space-md); justify-items: start; }
.close .actions p { color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- footer ---------- */
.foot { padding-block: var(--space-3xl) var(--space-xl); }
.foot .cols { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--gap-columns); }
.foot .cols > div:first-child p { margin-top: var(--space-md); color: var(--color-muted); max-width: 32ch; }
.foot h2 { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); letter-spacing: 0; max-width: none; }
.foot ul { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.foot ul a { color: var(--color-ink); text-decoration: none; }
.foot ul a:hover { color: var(--color-accent); text-decoration: underline; }
.legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.legal a { color: var(--color-ink); font-weight: 500; }
.legal a:hover { color: var(--color-accent); }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .hero .container, .stack .container, .hood .container, .help .container, .faq .container, .close .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero .container { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .stack__pane { position: static; }
  .stack__steps { display: none; }
  .versus { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-lg); }
  .foot .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot .cols > div:first-child { grid-column: 1 / -1; }
  .bar nav a.link.hide-sm { display: none; }
}
@media (max-width: 40rem) {
  .stage { padding: var(--space-md); }
  .lane { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .stage__foot .pill { margin-left: 0; }
  .frame { padding: var(--space-lg); min-height: 0; }
  .states { gap: var(--space-xs); }
  kbd { font-size: var(--text-lg); min-width: 0; padding: var(--space-sm) var(--space-md); }
  .keys { gap: var(--space-xs); flex-wrap: nowrap; }
  .settings .row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .mem { grid-template-columns: minmax(0, 1fr); }
  .versus { grid-template-columns: minmax(0, 1fr); }
  .rows li { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-lg); }
  .vt col.name { width: 34%; }
  .vt th, .vt td { padding-inline: var(--space-2xs); font-size: var(--text-sm); }
  .vt thead th h3 { font-size: var(--text-lg); }
  .vt tfoot td { display: block; width: 100%; }
  .vt tfoot tr { display: grid; gap: var(--space-md); }
  .vt tfoot td.empty { display: none; }
  .installs { grid-template-columns: minmax(0, 1fr); }
  .foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .actions .pill { width: 100%; }
}