@font-face{font-family:Public Sans;src:url('/public-sans.woff2') format('woff2');font-display:swap;font-weight:100 900}

/* HuolalaCode download site. Tokens mirror the desktop client's src/renderer/tokens.css (light theme) so the site and the
   app share one language: #fcfcfb canvas, white surfaces, alpha borders, #151515 / #525252 text, clay only as an accent
   (focus ring, hover, brand spark). The surface ladder, borders, focus ring and segmented control follow open-claude-ui's
   cds-theme (MIT, Caho1). Mobile-first type: body 15px, aids never below 12px, UI labels never below 11px. */
:root{
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI","Public Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei UI","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"PingFang SC","Microsoft YaHei",monospace;
  --bg-canvas:#fcfcfb;--bg-sidebar:#f9f9f7;--bg-surface:#ffffff;--bg-soft:#f6f6f4;--bg-muted:#f0efec;
  --bg-hover:hsla(0,0%,8%,.05);--bg-selected:hsla(0,0%,8%,.10);--overlay:hsla(0,0%,8%,.35);
  --segment-track:hsla(0,0%,8%,.06);--segment-thumb:#ffffff;
  --border:hsla(0,0%,8%,.10);--border-soft:hsla(0,0%,8%,.06);--border-strong:hsla(0,0%,8%,.20);
  --text:#151515;--text-2:#525252;--text-muted:#8a8a8a;
  --primary:#151515;--primary-hover:#333333;--on-primary:#ffffff;
  --accent:#d97757;--accent-hover:#cc5a36;--accent-ink:#b24e2c;--accent-soft:#fbf3ef;--accent-border:rgba(217,119,87,.35);
  --success:#2f7d5b;--success-soft:#e8f3ec;--success-border:rgba(47,125,91,.3);
  --warning:#9a6b1f;--warning-soft:#faf3e0;--warning-border:rgba(154,107,31,.3);
  --shadow-color:rgba(0,0,0,.08);
  --shadow-sm:0 1px 2px 0 rgba(0,0,0,.05),0 2px 8px 0 var(--shadow-color);
  --shadow-md:0 2px 4px 0 rgba(0,0,0,.05),0 6px 16px 0 var(--shadow-color);
  --shadow-lg:0 4px 8px 0 rgba(0,0,0,.06),0 12px 28px -2px var(--shadow-color);
  --focus-outline:1.5px solid var(--accent);--focus-glow:0 0 6px 1px rgba(217,119,87,.25);
  --radius-sm:6px;--radius-md:8px;--radius-panel:10px;--radius-lg:12px;--radius-xl:16px;--radius-pill:999px;
  --ease-swift:cubic-bezier(.16,1,.3,1);--dur-fast:120ms;--dur-base:160ms;--dur-slow:220ms;
  --fs-xs:11px;--fs-sm:12px;--fs-md:13px;--fs-body:15px;--fs-lg:17px;--fs-xl:20px;
  --header-h:64px;
  font-family:var(--font-ui);color:var(--text);background:var(--bg-canvas);font-synthesis:none;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-size:var(--fs-body);line-height:1.7;min-height:100vh;overflow-x:hidden}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{cursor:default}
a{color:inherit;text-decoration:none}
p{overflow-wrap:anywhere}
h1,h2,h3{font-weight:600;letter-spacing:-.01em;line-height:1.25;overflow-wrap:anywhere}
.icon{width:16px;height:16px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none!important}
::selection{background:hsla(0,0%,8%,.14)}
.container{width:min(1120px,calc(100% - 48px));margin:0 auto}
.skip-link{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;border-radius:var(--radius-md);background:var(--bg-surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-md);transition:top var(--dur-fast)}
.skip-link:focus{top:12px}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:var(--focus-outline);outline-offset:2px;box-shadow:var(--focus-glow);border-radius:var(--radius-sm)}

/* Buttons: primary = ink on white text; secondary = neutral strong border; both 44px tall for touch. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--text);font-size:var(--fs-body);font-weight:500;transition:background var(--dur-base) var(--ease-swift),border-color var(--dur-base) var(--ease-swift),color var(--dur-base)}
.button:hover{background:var(--bg-hover);border-color:var(--text-muted)}
.button .icon{width:16px;height:16px}
.button-dark{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.button-dark:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--fs-body);font-weight:500;color:var(--text-2);transition:color var(--dur-fast)}
.text-link:hover{color:var(--accent-ink)}
.text-link .icon{width:16px;height:16px}
.text-link span{transition:transform var(--dur-base) var(--ease-swift)}
.text-link:hover span{transform:translateX(2px)}
.eyebrow{font-size:var(--fs-sm);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--success);flex-shrink:0}

/* Header: white strip, alpha border, 64px. */
.site-header{position:sticky;top:0;z-index:40;height:var(--header-h);background:rgba(252,252,251,.9);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--border-soft)}
.nav-wrap{width:min(1120px,calc(100% - 48px));margin:0 auto;height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-lg);font-weight:600;letter-spacing:-.01em;color:var(--text)}
.brand img{width:28px;height:28px;border-radius:var(--radius-sm)}
.brand-light{color:var(--text-2);font-weight:500}
.desktop-nav{display:flex;align-items:center;gap:28px}
.desktop-nav a{font-size:var(--fs-md);font-weight:500;color:var(--text-2);padding:8px 0;transition:color var(--dur-fast)}
.desktop-nav a:hover,.desktop-nav a[aria-current=page]{color:var(--text)}
.nav-actions{display:flex;align-items:center;gap:12px}
.member-link{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border-radius:var(--radius-md);font-size:var(--fs-md);font-weight:500;color:var(--text-2);transition:background var(--dur-fast),color var(--dur-fast)}
.member-link:hover{background:var(--bg-hover);color:var(--text)}
.member-link span{font-size:var(--fs-sm)}
.nav-download{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--radius-md);background:var(--primary);color:var(--on-primary);font-size:var(--fs-md);font-weight:500;transition:background var(--dur-base) var(--ease-swift)}
.nav-download:hover{background:var(--primary-hover)}
.nav-download .icon{width:15px;height:15px}
.menu-toggle{display:none;width:44px;height:44px;border-radius:var(--radius-md);align-items:center;justify-content:center;flex-direction:column;gap:6px}
.menu-toggle span{display:block;width:20px;height:1.5px;background:var(--text);border-radius:2px;transition:transform var(--dur-base) var(--ease-swift),opacity var(--dur-fast)}
.menu-toggle[aria-expanded=true] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mobile-nav{position:absolute;left:0;right:0;top:var(--header-h);display:flex;flex-direction:column;background:var(--bg-surface);border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);padding:8px 24px 12px}
.mobile-nav a{display:flex;align-items:center;min-height:48px;font-size:var(--fs-body);font-weight:500;border-bottom:1px solid var(--border-soft)}
.mobile-nav a:last-child{border-bottom:0}

/* Hero */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 0 40px}
.release-pill{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0 14px 0 12px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-surface);box-shadow:var(--shadow-sm);font-size:var(--fs-sm);font-weight:500;color:var(--text-2);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.release-pill:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.release-pill span:nth-of-type(2){color:var(--text);font-weight:600}
.release-pill .icon{width:14px;height:14px}
.pill-divider{width:1px;height:14px;background:var(--border-strong)}
.hero-eyebrow{margin:36px 0 20px}
.hero h1{position:relative;font-size:clamp(34px,6.2vw,66px);font-weight:600;letter-spacing:-.03em;line-height:1.12;max-width:14em}
.hero-serif{font-family:Georgia,"Songti SC","STSong","Noto Serif CJK SC",serif;font-weight:500}
.headline-star{position:absolute;right:-.7em;top:-.3em;font-size:.5em;color:var(--accent);font-weight:400;pointer-events:none}
.hero-description{margin-top:22px;max-width:36em;font-size:var(--fs-lg);line-height:1.75;color:var(--text-2)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 28px;margin-top:30px}
.platform-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;margin-top:22px;font-size:var(--fs-sm);color:var(--text-muted)}
.platform-note .icon{width:15px;height:15px}
.platform-note .small{width:13px;height:13px}
.platform-note>span{color:var(--border-strong)}
.platform-note>.note-divider{margin:0 4px}

/* Product: segmented control (client-style track + white thumb) + the real-screenshot frame. */
.product-section{padding-top:8px}
.demo-tabs{display:inline-flex;align-items:center;gap:4px;padding:4px;margin:0 auto 18px;border-radius:var(--radius-panel);background:var(--segment-track);position:relative;left:50%;transform:translateX(-50%)}
.demo-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--radius-md);font-size:var(--fs-md);font-weight:500;color:var(--text-2);white-space:nowrap;transition:background var(--dur-base) var(--ease-swift),color var(--dur-base),box-shadow var(--dur-base)}
.demo-tabs button:hover{color:var(--text)}
.demo-tabs button[aria-selected=true]{background:var(--segment-thumb);color:var(--text);font-weight:600;box-shadow:var(--shadow-sm)}
.demo-tabs .icon{width:16px;height:16px}
.shot-frame{margin:0;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);overflow:hidden;box-shadow:var(--shadow-lg)}
.shot-frame:focus-visible{outline:var(--focus-outline);outline-offset:3px}
.shot-zoom{display:block;width:100%;padding:0;background:var(--bg-soft);cursor:zoom-in;line-height:0;border-radius:0}
.shot-zoom:focus-visible{outline-offset:-2px;border-radius:0}
.shot-zoom img{display:block;width:100%;height:auto;aspect-ratio:16/10}
.shot-frame figcaption{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-top:1px solid var(--border);background:var(--bg-surface)}
.shot-frame figcaption p{font-size:var(--fs-md);color:var(--text)}
.shot-frame figcaption span{font-size:var(--fs-sm);color:var(--text-muted);white-space:nowrap}
.product-caption{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;font-size:var(--fs-sm);color:var(--text-muted)}
.shot-lightbox{position:fixed;inset:0;z-index:50;background:var(--overlay);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px}
.shot-lightbox figure{margin:0;max-width:min(1600px,100%);max-height:100%;display:flex;flex-direction:column;gap:12px}
.shot-lightbox img{max-width:100%;max-height:calc(100vh - 120px);width:auto;height:auto;border-radius:var(--radius-md);background:var(--bg-surface);box-shadow:var(--shadow-lg)}
.shot-lightbox figcaption{color:var(--on-primary);font-size:var(--fs-md);text-align:center;opacity:.9}
.lightbox-close{position:fixed;top:16px;right:20px;width:44px;height:44px;border-radius:50%;background:var(--bg-surface);color:var(--text);font-size:24px;line-height:1;display:grid;place-items:center;box-shadow:var(--shadow-md)}
.lightbox-close:hover{background:var(--bg-muted)}
.lightbox-close:focus-visible{outline:var(--focus-outline);outline-offset:2px;border-radius:50%}
body.lightbox-open{overflow:hidden}

/* Workflow: three steps. */
.intro-section{padding:96px 0 72px}
.section-heading{display:grid;grid-template-columns:1fr 1fr;align-items:end;column-gap:48px}
.section-heading>.eyebrow{grid-column:1/-1;margin-bottom:18px}
.section-heading h2{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.02em}
.section-heading>p:last-child{font-size:var(--fs-body);color:var(--text-2);padding-bottom:4px}
.workflow-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.workflow-steps article{display:flex;flex-direction:column;padding:24px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm)}
.step-number{font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;color:var(--text-muted)}
.workflow-steps h3{font-size:var(--fs-xl);margin:14px 0 10px}
.workflow-steps p{font-size:var(--fs-body);line-height:1.7;color:var(--text-2);flex:1}
.step-doodle,.mini-diff,.local-folders{margin-top:22px;min-height:52px;display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--text-2)}
.step-doodle>span:not(.small-asterisk){padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-soft)}
.step-doodle i{font-style:normal;color:var(--text-muted)}
.small-asterisk{color:var(--accent);font-size:16px;margin-left:auto}
.mini-diff{flex-direction:column;align-items:stretch;gap:4px;font-family:var(--font-mono);font-size:var(--fs-sm)}
.mini-diff span{padding:7px 10px;border-radius:var(--radius-sm)}
.mini-diff span:first-child{background:#fbe9e7;color:#8e3a2e}
.mini-diff span:last-child{background:var(--success-soft);color:var(--success)}
.local-folders .icon{width:16px;height:16px;color:var(--text-2)}
.folder-connector{flex:1;height:1px;background:var(--border-strong);min-width:16px}
.local-folders>span:last-child{padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-soft)}

/* Capabilities: ink panel (the one dark surface), white text, clay spark. */
.detail-section{padding-bottom:0}
.detail-panel{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1.15fr;gap:48px;padding:56px;border-radius:var(--radius-xl);background:var(--primary);color:var(--on-primary)}
.detail-panel:after{content:'✳';position:absolute;right:-40px;bottom:-110px;font-size:320px;line-height:1;color:var(--accent);opacity:.16;pointer-events:none}
.detail-copy .eyebrow{color:rgba(255,255,255,.55);margin-bottom:18px}
.detail-copy h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.02em}
.detail-copy>p:not(.eyebrow){margin-top:18px;font-size:var(--fs-body);line-height:1.75;color:rgba(255,255,255,.72)}
.light-link{margin-top:28px;color:var(--on-primary)}
.light-link:hover{color:var(--accent)}
.capability-list{position:relative;z-index:1}
.capability-list>div{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-top:1px solid rgba(255,255,255,.14)}
.capability-list>div:first-child{border-top:0;padding-top:0}
.capability-list>div:last-child{padding-bottom:0}
.capability-list .icon{width:20px;height:20px;margin-top:2px;color:var(--accent)}
.sdk-icon{width:20px;height:20px;display:grid;place-items:center;color:var(--accent);font-weight:600}
.capability-list h3{font-size:var(--fs-lg);font-weight:600}
.capability-list p{margin-top:4px;font-size:var(--fs-md);line-height:1.65;color:rgba(255,255,255,.7)}
.capability-list>div>span:last-child{margin-left:auto;font-size:var(--fs-xs);font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.4)}

/* Downloads */
.download-section{padding:96px 0 72px}
.download-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.download-heading .eyebrow{margin-bottom:18px}
.download-heading h2{font-size:clamp(28px,3.6vw,40px);letter-spacing:-.02em}
.download-version{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:var(--fs-body);font-weight:600;position:relative;padding-bottom:22px}
.download-version .status-dot{margin-right:2px}
.version-label{font-size:var(--fs-sm);font-weight:500;color:var(--text-2);padding:3px 10px;border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-surface)}
.download-version small{position:absolute;right:0;bottom:0;font-size:var(--fs-sm);font-weight:400;color:var(--text-muted);white-space:nowrap}
.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.download-card{display:flex;flex-direction:column;padding:24px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm);transition:border-color var(--dur-base),box-shadow var(--dur-base) var(--ease-swift)}
.download-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.download-platform{display:flex;align-items:center;gap:12px}
.download-platform .icon{width:28px;height:28px;color:var(--text)}
.download-platform h3{font-size:var(--fs-xl);font-weight:600}
.download-platform h3>span{display:inline-block;margin-left:8px;font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}
.asset-requires{display:block;margin:8px 0 0 40px;font-size:var(--fs-sm);color:var(--text-muted)}
.download-card>p{margin:14px 0 18px;font-size:var(--fs-md);line-height:1.65;color:var(--text-2)}
.download-card>a[data-download],.download-card>button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 16px;border:1px solid var(--primary);border-radius:var(--radius-md);background:var(--primary);color:var(--on-primary);font-size:var(--fs-body);font-weight:500;transition:background var(--dur-base) var(--ease-swift)}
.download-card>a[data-download]:hover{background:var(--primary-hover)}
.download-card>a[data-download] .icon{width:16px;height:16px}
.download-card>button:disabled{background:var(--bg-muted);border-color:var(--border);color:var(--text-muted)}
.asset-status{display:inline-flex;align-items:center;align-self:flex-start;margin-top:12px;padding:4px 10px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-soft);font-size:var(--fs-sm);font-weight:500;color:var(--text-2)}
.asset-status-verified-unsigned{border-color:var(--success-border);background:var(--success-soft);color:var(--success)}
.asset-status-cross-built,.asset-status-unverified{border-color:var(--warning-border);background:var(--warning-soft);color:var(--warning)}
.asset-status-not-built{border-color:var(--border);color:var(--text-muted)}
.alt-link{display:inline-block;align-self:flex-start;margin-top:10px;font-size:var(--fs-sm);font-weight:500;color:var(--text-2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--border-strong)}
.alt-link:hover{color:var(--accent-ink);text-decoration-color:currentColor}
.download-card>small{margin-top:14px;font-size:var(--fs-sm);color:var(--text-muted)}
.asset-sha{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px;font-size:var(--fs-sm);color:var(--text-muted)}
.asset-sha code{font-family:var(--font-mono);font-size:var(--fs-sm);overflow-wrap:anywhere}
.download-footnote{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin-top:22px}
.download-footnote p{font-size:var(--fs-sm);line-height:1.7;color:var(--text-2)}
.download-footnote a{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 12px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg-surface);font-size:var(--fs-sm);font-weight:500;white-space:nowrap;transition:background var(--dur-fast)}
.download-footnote a:hover{background:var(--bg-hover)}
.download-footnote a>span{color:var(--text-2)}
.setup-steps{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px 24px;margin-top:36px;padding:22px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:var(--fs-md);color:var(--text-2)}
.setup-steps span{display:inline-flex;align-items:center;gap:10px}
.setup-steps b{width:24px;height:24px;border-radius:50%;border:1px solid var(--border-strong);display:grid;place-items:center;font-size:var(--fs-xs);font-weight:600;color:var(--text)}
.setup-steps i{color:var(--text-muted);font-style:normal}

/* Updates */
.updates-section{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;padding:0 0 80px}
.updates-intro .eyebrow{margin-bottom:18px}
.updates-intro h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.02em}
.updates-intro .text-link{margin-top:18px}
.latest-release{display:block;padding:24px;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);box-shadow:var(--shadow-sm);transition:border-color var(--dur-base),box-shadow var(--dur-base) var(--ease-swift)}
.latest-release:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
.release-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:var(--fs-sm);color:var(--text-muted)}
.release-meta>span:first-child{font-family:var(--font-mono);font-weight:600;color:var(--text)}
.release-meta time{font-variant-numeric:tabular-nums}
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--bg-soft);font-size:var(--fs-xs);font-weight:600;color:var(--text-2)}
.latest-release h3{font-size:var(--fs-xl);margin:14px 0 10px}
.latest-release>p{font-size:var(--fs-body);line-height:1.7;color:var(--text-2)}
.release-read{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-size:var(--fs-md);font-weight:500;color:var(--text)}
.release-read .icon{width:14px;height:14px}

/* FAQ + closing + footer */
.faq-section{display:grid;grid-template-columns:1fr 1.4fr;gap:56px;padding:64px 0 48px;border-top:1px solid var(--border)}
.faq-section .eyebrow{margin-bottom:18px}
.faq-section h2{font-size:clamp(26px,3.2vw,36px);letter-spacing:-.02em}
.faq-list details{border-top:1px solid var(--border)}
.faq-list details:first-child{border-top:0}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:12px 0;font-size:var(--fs-body);font-weight:500;cursor:pointer;list-style:none}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary>span{width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:50%;font-size:14px;color:var(--text-2);transition:transform var(--dur-base) var(--ease-swift)}
.faq-list details[open] summary>span{transform:rotate(45deg)}
.faq-list details p{padding:0 44px 18px 0;font-size:var(--fs-body);line-height:1.75;color:var(--text-2)}
.faq-list code{font-family:var(--font-mono);font-size:.9em;padding:1px 6px;border-radius:var(--radius-sm);background:var(--bg-muted)}
.closing{display:flex;flex-direction:column;align-items:center;text-align:center;padding:56px 0 64px}
.closing-star{font-size:44px;line-height:1;color:var(--accent)}
.closing p{margin:22px 0 26px;font-size:clamp(22px,2.8vw,30px);font-weight:600;letter-spacing:-.02em}
.site-footer{display:grid;grid-template-columns:1fr auto;gap:24px 48px;padding:32px 0 36px;border-top:1px solid var(--border)}
.site-footer .brand{font-size:var(--fs-lg)}
.site-footer .brand img{width:24px;height:24px}
.site-footer>div:first-child p{margin-top:8px;font-size:var(--fs-md);color:var(--text-2)}
.footer-links{display:flex;flex-wrap:wrap;gap:20px;align-self:center;font-size:var(--fs-md);font-weight:500;color:var(--text-2)}
.footer-links a:hover{color:var(--text)}
.footer-bottom{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;padding-top:16px;border-top:1px solid var(--border-soft);font-size:var(--fs-sm);color:var(--text-muted)}
.local-label{margin-left:10px;padding:2px 8px;border:1px solid var(--border);border-radius:var(--radius-pill)}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:calc(100% - 32px);padding:12px 18px;border-radius:var(--radius-md);background:var(--primary);color:var(--on-primary);font-size:var(--fs-md);box-shadow:var(--shadow-lg)}

/* Changelog page */
.changelog-hero{padding:56px 0 40px;max-width:760px}
.breadcrumb{display:inline-flex;align-items:center;min-height:40px;font-size:var(--fs-md);font-weight:500;color:var(--text-2);margin-bottom:28px}
.breadcrumb:hover{color:var(--text)}
.changelog-hero .eyebrow{margin-bottom:16px}
.changelog-hero h1{font-size:clamp(32px,5vw,52px);letter-spacing:-.03em}
.changelog-hero>p:last-child{margin-top:18px;font-size:var(--fs-lg);line-height:1.75;color:var(--text-2)}
.changelog-layout{display:grid;grid-template-columns:200px 1fr;gap:48px;padding-bottom:72px;align-items:start}
.release-filters{position:sticky;top:calc(var(--header-h) + 24px);display:flex;flex-direction:column;gap:4px;padding:4px;border-radius:var(--radius-panel);background:var(--segment-track)}
.release-filters>p{padding:8px 12px 10px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.12em;color:var(--text-muted)}
.release-filters button{display:flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--radius-md);font-size:var(--fs-md);font-weight:500;color:var(--text-2);text-align:left;transition:background var(--dur-base) var(--ease-swift),color var(--dur-base),box-shadow var(--dur-base)}
.release-filters button:hover{color:var(--text)}
.release-filters button[aria-pressed=true]{background:var(--segment-thumb);color:var(--text);font-weight:600;box-shadow:var(--shadow-sm)}
.release-filters>span{margin-top:8px;padding:12px 12px 10px;border-top:1px solid var(--border);font-size:var(--fs-sm);line-height:1.6;color:var(--text-muted)}
.release-entry{padding:28px 0 32px;border-top:1px solid var(--border)}
.release-entry:first-child{border-top:0;padding-top:0}
.release-entry h2{font-size:clamp(22px,2.6vw,28px);margin:12px 0 10px;letter-spacing:-.02em}
.release-entry>p{font-size:var(--fs-body);line-height:1.75;color:var(--text-2)}
.release-entry ul{margin:16px 0 0;padding-left:22px;font-size:var(--fs-body);line-height:1.75;color:var(--text)}
.release-entry li+li{margin-top:8px}
.release-entry .release-note{margin-top:16px;padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--bg-soft);font-size:var(--fs-md);line-height:1.7;color:var(--text-2)}
.release-entry a{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:16px;padding:0 18px;border:1px solid var(--primary);border-radius:var(--radius-md);background:var(--primary);color:var(--on-primary);font-size:var(--fs-md);font-weight:500}
.release-entry a:hover{background:var(--primary-hover)}
.empty-releases{padding:24px 0;font-size:var(--fs-body);color:var(--text-muted)}

/* Responsive: content-first breakpoints; type never below 12px (aids) / 11px (labels). */
@media(max-width:1100px){.container,.nav-wrap{width:calc(100% - 40px)}.detail-panel{padding:44px;gap:36px}.workflow-steps{gap:16px}.download-grid{gap:12px}}
@media(max-width:850px){.desktop-nav{display:none}.member-link{display:none}.menu-toggle{display:flex}.section-heading{display:block}.section-heading>p:last-child{margin-top:16px;max-width:36em}.workflow-steps{grid-template-columns:1fr;margin-top:32px}.detail-panel{grid-template-columns:1fr;padding:36px 28px;gap:32px}.detail-panel:after{right:-60px;bottom:-120px;font-size:260px}.download-heading{display:block}.download-version{margin-top:18px;padding-bottom:26px}.download-grid{grid-template-columns:1fr}.updates-section,.faq-section{grid-template-columns:1fr;gap:28px}.changelog-layout{grid-template-columns:1fr;gap:24px}.release-filters{position:static;flex-direction:row;flex-wrap:wrap}.release-filters>p,.release-filters>span{display:none}.site-footer{grid-template-columns:1fr}}
@media(max-width:620px){
  :root{--header-h:60px}
  .container,.nav-wrap{width:calc(100% - 32px)}
  .brand img{width:26px;height:26px}
  .nav-download{padding:0 14px}
  .hero{padding:36px 0 28px}
  .release-pill{min-height:34px;font-size:var(--fs-xs);gap:8px;padding:0 12px 0 10px}
  .hero-eyebrow{margin:28px 0 16px}
  .hero h1{font-size:clamp(32px,9.5vw,44px);line-height:1.18}
  .headline-star{right:-.4em;top:-.5em}
  .hero-description{font-size:var(--fs-body);margin-top:18px}
  .hero-cta{margin-top:24px;gap:10px 20px}
  .button{padding:0 18px}
  .demo-tabs{display:flex;width:100%;left:0;transform:none;margin-bottom:14px}
  .demo-tabs button{flex:1;padding:0 8px;font-size:var(--fs-sm);gap:6px}
  .demo-tabs .icon{width:14px;height:14px}
  .shot-frame{border-radius:var(--radius-md)}
  .shot-frame figcaption{flex-direction:column;align-items:flex-start;gap:6px;padding:12px 14px}
  .shot-frame figcaption span{white-space:normal}
  .shot-lightbox{padding:12px}
  .shot-lightbox img{max-height:calc(100vh - 100px)}
  .intro-section{padding:56px 0 48px}
  .workflow-steps article{padding:20px}
  .detail-panel{padding:28px 22px;border-radius:var(--radius-lg)}
  .download-section{padding:56px 0 48px}
  .download-version small{position:static;width:100%;white-space:normal}
  .download-card{padding:20px}
  .download-card>p{margin:12px 0 16px}
  .asset-requires{margin-left:0;margin-top:10px}
  .download-footnote{flex-direction:column;gap:12px}
  .download-footnote a{align-self:flex-start}
  .setup-steps{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 0}
  .setup-steps i{display:none}
  .updates-section{padding-bottom:56px}
  .latest-release{padding:20px}
  .faq-section{padding-top:48px}
  .faq-list details p{padding-right:0}
  .closing{padding:40px 0 48px}
  .site-footer{padding:28px 0}
  .changelog-hero{padding:36px 0 28px}
  .changelog-layout{padding-bottom:48px}
  .release-filters button{flex:1;justify-content:center}
  .release-entry{padding:22px 0 26px}
}
@media(max-width:360px){.headline-star{right:-.25em;top:-.6em}.demo-tabs button{font-size:var(--fs-xs);gap:4px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}