:root {
  color-scheme: dark;
  --background: #0a0c0f;
  --surface: #101317;
  --text: #f1f3f7;
  --muted: #989faa;
  --subtle: #717b89;
  --line: rgba(206, 220, 239, .11);
  --accent: #a8c9b2;
  --mono: "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: var(--background); color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.7; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; color: inherit; }
a { color: inherit; text-decoration: none; }
button:disabled { cursor: wait; opacity: .55; }
img { display: block; max-width: 100%; }
button, a, summary { touch-action: manipulation; }
:focus-visible { outline: 2px solid #a8c9ee; outline-offset: 5px; }
::selection { background: #365575; color: #fff; }
[hidden] { display: none !important; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; display: inline-block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.container { width: min(1120px, calc(100% - 64px)); margin-inline: auto; }
.section { padding-block: 100px; }
.skip-link { position: fixed; top: -80px; left: 20px; padding: 10px 20px; color: #111; background: #fff; z-index: 100; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.site-header { position: absolute; z-index: 30; top: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 30px; width: min(1152px, calc(100% - 48px)); min-height: 52px; padding: 8px 14px; border: 1px solid transparent; border-radius: 40px; transition: background .25s, border-color .25s; }
.site-header.is-scrolled { position: fixed; top: 14px; background: #1e242cdb; border-color: #ffffff21; backdrop-filter: blur(20px); box-shadow: 0 8px 40px #0003; }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 20px; letter-spacing: -.7px; }.brand img { border-radius: 9px; }.brand b { font-weight: 550; }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; font-size: 13px; color: #c1cbd9; }
.desktop-nav a, .footer-links a { transition: color .2s; }.desktop-nav a:hover, .footer-links a:hover { color: #fff; }
.nav-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #ffffff26; background: #ffffff0a; border-radius: 24px; min-height: 34px; padding: 4px 16px; font-size: 13px; }.nav-download:hover { background: #ffffff16; }.nav-download .icon { width: 14px; height: 14px; }
.menu-toggle { display: none; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #ffffff0a; padding: 10px 8px; }.menu-toggle span { display: block; height: 1px; margin: 4px 0; background: #e3e9ef; }
.mobile-nav { position: absolute; top: 64px; left: 0; right: 0; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: #171c24; box-shadow: 0 20px 50px #0006; }.mobile-nav a { display: block; padding: 12px 14px; border-radius: 9px; }.mobile-nav a:hover { background: #ffffff0b; }
.hero { position: relative; padding-top: 164px; isolation: isolate; }
.hero-atmosphere { position: absolute; z-index: -1; top: 0; inset-inline: 0; height: 1200px; overflow: hidden; background: radial-gradient(ellipse at 80% -8%, #68839780 0, transparent 48%), radial-gradient(ellipse at 43% 5%, #2b5588 0, #203b5b80 42%, transparent 70%), radial-gradient(ellipse at 4% 25%, #31434e80 0, transparent 50%); mask-image: linear-gradient(#000 0%, #000 48%, transparent 100%); }
.hero-atmosphere::after { content: ""; position: absolute; inset: 0; opacity: .035; background-size: 180px 180px; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23noise)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.hero-copy { text-align: center; }
.release-pill { display: inline-flex; gap: 10px; align-items: center; font-size: 11px; color: #c2cfdf; letter-spacing: 1.3px; }.release-pill .icon { width: 13px; height: 13px; transition: transform .2s; }.release-pill:hover .icon { transform: translateX(3px); }
.status-dot { display: inline-block; width: 5px; height: 5px; background: #a8c9b2; border-radius: 50%; box-shadow: 0 0 10px #96c4a53a; flex-shrink: 0; }.pill-divider { height: 10px; width: 1px; background: #ffffff30; }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { font-size: clamp(40px, 4.2vw, 60px); font-weight: 500; letter-spacing: -1.8px; line-height: 1.42; margin: 25px 0 38px; }.hero h1 > span { display: block; }.hero h1 .product-name { font-size: .86em; font-weight: 500; letter-spacing: -.9px; margin-bottom: 3px; }
.button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 28px; padding: 10px 22px; background: transparent; font-size: 14px; font-weight: 500; transition: background .2s, transform .2s, box-shadow .2s; }.button:hover { transform: translateY(-2px); background: #ffffff0c; }
.button-light { color: #141922; background: #f5f7fa; border-color: #f5f7fa; }.button-light:hover { background: #fff; box-shadow: 0 5px 24px #bacde51c; }
.button-divider { height: 18px; width: 1px; background: #161c2826; margin-left: 4px; }.hero-button { padding-inline: 23px 17px; }.hero-button .icon:last-child { width: 15px; }
.hero-meta { margin: 15px 0 0; color: #96aac3; font-size: 11px; letter-spacing: .3px; }.hero-meta > span::before { content: "·"; padding-inline: 10px; }
.workspace-preview { margin-top: 61px; margin-bottom: 0; max-width: 1096px; }
.preview-toolbar { min-height: 38px; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #aebdcf; padding: 0 4px 11px; gap: 12px; }.preview-toolbar > span { display: flex; align-items: center; gap: 9px; }
.preview-controls { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid #ffffff18; background: #0e172339; border-radius: 20px; }.theme-button { border: 0; padding: 3px 11px; border-radius: 14px; font-size: 10px; background: transparent; color: #afbdce; }.theme-button.is-active { background: #cbd6e126; color: #f3f7fc; }
.preview-expand { display: grid; place-items: center; height: 24px; width: 29px; border: 0; background: transparent; color: #b5c5d8; }.preview-expand .icon { width: 13px; height: 13px; }
.screenshot-button { display: block; position: relative; width: 100%; padding: 0; overflow: hidden; border: 1px solid #c8d4e52b; background: #191c21; border-radius: 14px; box-shadow: 0 30px 100px #0006, 0 0 60px #6a8bb00b; }.screenshot-button > img { width: 100%; height: auto; }
.preview-zoom { position: absolute; bottom: 18px; right: 18px; display: flex; align-items: center; gap: 8px; color: #e3eaf2; background: #202b3bec; border: 1px solid #c8d4e52b; border-radius: 20px; padding: 8px 13px; font-size: 11px; opacity: 0; transition: opacity .2s; }.screenshot-button:hover .preview-zoom, .screenshot-button:focus-visible .preview-zoom { opacity: 1; }
.workspace-preview figcaption { display: flex; justify-content: space-between; gap: 20px; font-size: 10px; color: var(--subtle); padding: 17px 4px; letter-spacing: .4px; }
.section-heading { margin-bottom: 48px; }.centered { text-align: center; }
.eyebrow { margin-bottom: 20px; color: #8596aa; font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 2px; }
h2 { font-size: clamp(28px, 3vw, 39px); line-height: 1.5; font-weight: 500; letter-spacing: -.8px; margin-bottom: 20px; }.muted-heading { color: #9da5b1; }
.section-heading > p:last-child, .split-heading > p { color: var(--muted); font-size: 14px; }
.features-section { padding-top: 120px; }.features-section .section-heading { margin-bottom: 58px; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.feature-card { display: flex; flex-direction: column; min-width: 0; height: 410px; background: #101317; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; transition: border-color .25s; }.feature-card:hover { border-color: #c1d5f038; }
.feature-copy { padding: 29px 34px 0; position: relative; z-index: 1; }.feature-number { display: inline-block; margin-bottom: 13px; color: #7b8fa7; font-size: 9px; letter-spacing: 1.7px; font-family: var(--mono); }
h3 { font-size: 20px; font-weight: 550; letter-spacing: -.3px; line-height: 1.5; margin-bottom: 12px; }.feature-copy h3 { font-size: 24px; margin-bottom: 7px; }.feature-copy p { color: var(--muted); font-size: 12px; letter-spacing: 1px; margin-bottom: 25px; }
.feature-media { display: block; position: relative; padding: 0; border: 1px solid #c8d4e524; border-radius: 10px; overflow: hidden; background: #17191d; cursor: zoom-in; box-shadow: 0 20px 40px #0004; }.feature-media img { width: 100%; height: auto; }
.media-expand { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #263247ed; color: #cfdaea; opacity: 0; transition: opacity .2s; }.media-expand .icon { width: 13px; height: 13px; }.feature-media:hover .media-expand, .feature-media:focus-visible .media-expand { opacity: 1; }
.feature-workflow { background: radial-gradient(ellipse at 80% 100%, #24394d80, transparent 65%), #101317; }.workflow-media { margin: 0 0 0 34px; flex: 1; border-radius: 10px 0 0 0; border-right: 0; border-bottom: 0; }.workflow-media img { position: absolute; top: 0; left: -31%; width: 160%; max-width: none; }
.feature-ai { background: radial-gradient(ellipse at 50% 75%, #24365a66, transparent 68%), #101317; }.assistant-visual { margin: auto 34px 43px; }.assistant-names { display: flex; justify-content: center; align-items: center; gap: 23px; color: #e0e8f3; font-size: clamp(24px, 3.1vw, 42px); font-weight: 500; letter-spacing: -1.4px; }.assistant-names > span:last-child { font-family: Georgia, serif; color: #e4c2b0; }.assistant-names .assistant-join { font-weight: 300; font-size: 24px; color: #667a94; }.assistant-connection { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 24px 0; color: #829bbd; }.assistant-connection > span { height: 1px; width: 70px; background: linear-gradient(90deg, transparent, #6683ac77); }.assistant-connection > span:last-child { transform: rotate(180deg); }.assistant-connection > .icon { width: 27px; height: 27px; }.assistant-media { width: 100%; padding: 12px; }
.feature-artifacts { background: radial-gradient(ellipse at 45% 80%, #203e353b, transparent 70%), #101317; }.export-visual { margin: auto 34px 43px; }.export-flow { display: flex; justify-content: center; align-items: center; padding: 12px 0 30px; }.export-code, .export-folder { position: relative; width: 80px; height: 70px; display: grid; place-items: center; color: #abc3b6; }.export-code { color: #9aadc2; }.export-code > .icon { width: 46px; height: 46px; stroke-width: 1; }.export-folder > .icon { width: 70px; height: 70px; stroke-width: .9; fill: #8bbaa618; }.export-line { width: 70px; margin: 0 20px; height: 1px; background: linear-gradient(90deg, #8eabc32b, #a6c9b3); position: relative; }.export-line::after { content: ""; position: absolute; right: 0; top: -3px; width: 6px; height: 6px; border-top: 1px solid #a6c9b3; border-right: 1px solid #a6c9b3; transform: rotate(45deg); }.export-check { position: absolute; bottom: 0; right: -2px; display: grid; place-items: center; background: #a9cbb7; color: #17291f; border: 4px solid #15201d; border-radius: 50%; width: 30px; height: 30px; }.export-check .icon { width: 14px; height: 14px; }.settings-capture { padding: 15px; background: #17191d; border: 1px solid #b0c5ba24; border-radius: 10px; box-shadow: 0 18px 35px #0003; }.settings-capture img { width: 100%; height: auto; }
.feature-themes { background: radial-gradient(ellipse at 70% 90%, #4936503d, transparent 70%), #101317; }.themes-media { margin: auto 34px 32px; padding: 14px; }.subtle { color: var(--subtle); }
.split-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }.split-heading h2 { margin-bottom: 0; }.split-heading > p { margin-bottom: 6px; line-height: 1.95; }
.platform-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }.platform-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 10px 20px; border: 1px solid var(--line); border-radius: 12px; background: #11151a80; transition: border-color .2s; }.platform-card:hover { border-color: #9eb6d044; }.platform-card h3 { font-size: 15px; margin: 0; font-weight: 500; color: #cbd5e2; }
.vendor-logo { width: 124px; height: 56px; padding: 12px; display: grid; place-items: center; background: #fff; border-radius: 7px; }.vendor-logo img { width: 100%; height: 32px; min-width: 0; object-fit: contain; }.vendor-logo[data-vendor="puya"] { background: #233e64; }.vendor-logo[data-vendor="st"] img { width: 66px; }.vendor-logo[data-vendor="canmv"] img { width: 36px; }
.project-preview { margin: 54px auto 0; max-width: 800px; padding: 24px 24px 0; background: radial-gradient(ellipse at 50% 0%, #2c4d6f60, transparent 80%); border: 1px solid var(--line); border-radius: 20px; }.project-preview .screenshot-button { border-radius: 12px; cursor: zoom-in; }.project-preview figcaption { text-align: center; font-size: 13px; color: #9eafc4; padding: 21px 0; letter-spacing: 1px; }
.download-section { background: radial-gradient(ellipse at 50% 50%, #1b2d4545, transparent 67%); }.download-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 950px; margin-inline: auto; }.download-card { position: relative; background: #12161d; border: 1px solid var(--line); border-radius: 17px; padding: 30px; display: flex; flex-direction: column; align-items: flex-start; }.download-card.recommended { border-color: #91b5df50; background: linear-gradient(135deg, #1e2b3c, #141a23 68%); }
.download-card-top { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }.download-card-top > .icon { width: 24px; height: 24px; color: #adbdd2; }.recommended-label { border: 1px solid #adc8eb2c; background: #8facd117; color: #bacde5; padding: 3px 9px; border-radius: 5px; font-size: 9px; letter-spacing: .5px; }.download-card h3 { font-size: 23px; margin-bottom: 8px; }.download-card > p { color: #9ba7b8; font-size: 12px; line-height: 1.9; margin-bottom: 24px; }.download-size { font-size: 13px; color: #d1dce9; font-family: var(--mono); margin-bottom: 24px; }.download-size small { font-family: var(--sans); font-size: 10px; color: #7e8da0; margin-left: 8px; }.download-card .button { width: 100%; margin-top: auto; }.download-card > .download-note { font-size: 10px; line-height: 1.7; color: #8998ab; margin: 15px 0 0; min-height: 34px; }.download-requirements { color: #8896a8; text-align: center; font-size: 11px; margin: 25px auto 0; max-width: 800px; }.text-dot { color: #64748a; padding-inline: 9px; }
.text-link { display: inline-flex; align-items: center; gap: 8px; color: #b0bfd3; font-size: 12px; }.text-link:hover { color: #fff; }.text-link .icon { width: 13px; height: 13px; }
.download-manifest { display: flex; align-items: center; gap: 6px; padding: 3px 0; color: #8195af; font-size: 10px; }.download-manifest:hover { color: #c2cfdf; }.download-manifest .icon { width: 11px; height: 11px; }
.release-list { border-top: 1px solid var(--line); }.release-row { border-bottom: 1px solid var(--line); padding: 28px 4px; display: grid; grid-template-columns: 145px 1fr; gap: 40px; }.release-meta { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }.release-version { font-size: 20px; color: #d7e0ed; font-family: var(--mono); letter-spacing: -.5px; }.release-meta time { color: #7d899a; font-size: 11px; }.latest-badge { margin-top: 3px; background: #88b19a14; color: #a4c1af; border: 1px solid #99bca424; border-radius: 5px; font-size: 9px; padding: 2px 8px; }.release-content h3 { font-size: 17px; font-weight: 500; margin-bottom: 9px; }.release-content ul { padding-left: 17px; margin: 0; color: #959faf; font-size: 12px; line-height: 1.95; }.release-content li::marker { color: #4e617a; }
.older-releases { margin: 23px 0 0; color: #a6b6cc; background: transparent; border: 0; padding: 7px 0; font-size: 12px; display: inline-flex; align-items: center; gap: 8px; }.older-releases .icon { width: 14px; transition: transform .2s; }.older-releases[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq-section { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; }.faq-heading h2 { margin-bottom: 25px; }.faq-heading .eyebrow { font-size: 9px; letter-spacing: 1.5px; }.faq-list { border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); padding: 0; }.faq-list summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 23px 0; font-size: 14px; color: #d8dfe8; }.faq-list summary::-webkit-details-marker { display: none; }
.faq-plus { display: inline-block; position: relative; width: 14px; height: 14px; flex: 0 0 14px; }.faq-plus::before, .faq-plus::after { content: ""; position: absolute; height: 1px; width: 12px; top: 6px; left: 1px; background: #92a2b8; }.faq-plus::after { transform: rotate(90deg); transition: transform .2s; }details[open] .faq-plus::after { transform: rotate(0); }.faq-answer { color: #98a4b5; font-size: 12px; line-height: 1.95; padding: 0 26px 12px 0; }.faq-answer p { margin-bottom: 12px; }
.closing-section { padding: 92px 0 106px; text-align: center; }.closing-section > img { margin: 0 auto 25px; border-radius: 13px; }.closing-section h2 { font-size: 34px; line-height: 1.6; margin-bottom: 27px; }
.site-footer { display: flex; align-items: center; gap: 35px; padding: 32px 0; border-top: 1px solid var(--line); color: #8b96a6; font-size: 11px; }.footer-brand > span { display: block; color: #bdc7d4; font-size: 14px; }.footer-brand small { font-size: 9px; color: #788799; }.footer-links { display: flex; gap: 22px; margin-left: auto; }.footer-links a { display: inline-flex; gap: 4px; align-items: center; }.footer-links .icon { width: 11px; height: 11px; }.footer-copyright { color: #66778a; font-size: 9px; }
.loading-note { color: #95a5ba; font-size: 12px; padding: 28px 20px; grid-column: 1 / -1; text-align: center; margin: 0; }.notice { background: #1a2230; border: 1px solid #a7bfd02b; border-radius: 12px; padding: 24px; font-size: 13px; color: #bac7d9; grid-column: 1 / -1; }.notice p { margin-bottom: 14px; }.notice a { text-decoration: underline; }.notice .button { font-size: 12px; min-height: 36px; padding: 6px 16px; }
dialog { color: var(--text); background: #131820; border: 1px solid #ffffff29; box-shadow: 0 40px 120px #0009; max-height: calc(100dvh - 40px); overscroll-behavior: contain; }dialog::backdrop { background: #02060dcc; backdrop-filter: blur(9px); }
.download-dialog { width: min(730px, calc(100% - 32px)); padding: 38px; border-radius: 20px; }.download-dialog > .eyebrow { margin-bottom: 12px; padding-right: 35px; }.download-dialog h2 { font-size: 29px; margin-bottom: 12px; }.dialog-description { color: #a2b0c3; font-size: 12px; line-height: 1.95; margin-bottom: 26px; }
.dialog-close { position: absolute; right: 15px; top: 15px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; background: #ffffff0a; border: 1px solid #ffffff12; border-radius: 50%; }.dialog-close:hover { background: #ffffff1f; }.dialog-close .icon { width: 16px; height: 16px; }
.download-file { padding: 17px 0; border-top: 1px solid var(--line); }.download-file:last-child { border-bottom: 1px solid var(--line); }.file-main { display: flex; align-items: center; justify-content: space-between; gap: 14px; }.file-label { font-size: 14px; font-weight: 500; }.file-label span { margin-left: 10px; color: #8c9eb6; font-size: 11px; font-family: var(--mono); }.file-main .button { font-size: 11px; min-height: 33px; padding: 5px 13px; }.file-main .button .icon { width: 13px; height: 13px; }.file-name { overflow-wrap: anywhere; color: #a7b7cd; font-family: var(--mono); font-size: 11px; margin: 10px 0 8px; }.file-actions { display: flex; flex-wrap: wrap; gap: 15px; }.copy-button { padding: 3px 0; color: #8fa5c1; font-size: 10px; border: 0; background: transparent; }.copy-button:hover { color: #e4efff; }.file-checksum { width: 100%; color: #8195af; font-size: 10px; }.file-checksum summary { cursor: pointer; padding: 3px 0; }.file-checksum code { display: block; font-family: var(--mono); overflow-wrap: anywhere; padding: 9px 0; color: #c2cfdf; font-size: 10px; }
.rename-notice { color: #c6b897; background: #bba97e0b; border-radius: 8px; padding: 12px 15px; font-size: 11px; line-height: 1.8; margin: 20px 0; }.dialog-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; color: #8298b4; font-size: 10px; }.dialog-footer > span { display: inline-flex; align-items: center; gap: 5px; }.dialog-footer .icon { width: 12px; height: 12px; }.dialog-footer .text-link { font-size: 10px; }
.preview-dialog { padding: 0; width: fit-content; max-width: calc(100% - 36px); border-radius: 14px; background: #1a1e24; }.preview-dialog img { width: auto; height: auto; max-width: min(1500px, calc(100vw - 40px)); max-height: calc(100dvh - 44px); object-fit: contain; }.preview-dialog .dialog-close { background: #1c273fee; right: 8px; top: 8px; }
.toast { position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; max-width: calc(100% - 40px); padding: 11px 18px; border-radius: 9px; border: 1px solid #aec6dd2e; background: #243246; color: #e2eaf6; box-shadow: 0 10px 35px #0005; font-size: 12px; z-index: 100; transition: opacity .2s, transform .2s; }.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.is-entering { animation: enter .7s ease both; }
@keyframes enter { from { opacity: .5; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (min-width: 1600px) { .hero { padding-top: 180px; }.hero h1 { font-size: 64px; }.workspace-preview { margin-top: 70px; } }
@media (max-width: 1000px) {
  .desktop-nav { gap: 18px; }.site-header { gap: 20px; }.platform-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }.feature-copy { padding-inline: 27px; }.feature-copy h3 { font-size: 21px; }.assistant-visual, .export-visual { margin-inline: 27px; }.themes-media { margin-inline: 27px; }.workflow-media { margin-left: 27px; }.faq-section { gap: 45px; grid-template-columns: 1fr 1.3fr; }.footer-copyright { display: none; }
}
@media (max-width: 760px) {
  .container { width: calc(100% - 40px); }.section { padding-block: 65px; }
  .site-header { top: 15px; width: calc(100% - 28px); padding: 7px 9px; gap: 11px; }.site-header.is-scrolled { top: 9px; }.brand { font-size: 18px; gap: 8px; }.brand img { width: 29px; height: 29px; }.desktop-nav { display: none; }.nav-download { margin-left: auto; min-height: 32px; font-size: 11px; padding-inline: 13px; }.menu-toggle { display: block; }
  .hero { padding-top: 143px; }.hero-atmosphere { height: 900px; }.hero h1 { font-size: 44px; line-height: 1.5; margin-block: 22px 32px; }.hero h1 .product-name { font-size: .81em; }.hero-meta { font-size: 10px; }.hero-meta > span { display: none; }.release-pill { font-size: 10px; }
  .workspace-preview { margin-top: 48px; }.preview-toolbar { font-size: 9px; }.preview-toolbar > span { gap: 6px; }.theme-button { padding: 3px 9px; }.screenshot-button { border-radius: 9px; }.workspace-preview figcaption { font-size: 9px; padding-block: 13px; }.workspace-preview figcaption > span:last-child { display: none; }.preview-zoom { display: none; }
  h2 { font-size: 30px; }.section-heading { margin-bottom: 32px; }.section-heading > p:last-child { font-size: 13px; }.eyebrow { font-size: 9px; letter-spacing: 1.7px; margin-bottom: 16px; }.features-section { padding-top: 70px; }.features-section .section-heading { margin-bottom: 36px; }
  .feature-grid { gap: 16px; }.feature-copy { padding: 24px 22px 0; }.feature-number { font-size: 8px; letter-spacing: 1.2px; }.feature-copy h3 { font-size: 20px; }.feature-copy p { font-size: 11px; letter-spacing: .3px; }.feature-card { height: 345px; border-radius: 13px; }.workflow-media { margin-left: 22px; }.assistant-visual, .export-visual { margin: auto 22px 30px; }.assistant-names { font-size: 29px; gap: 13px; }.assistant-connection { margin-block: 19px; }.assistant-media, .settings-capture { padding: 9px; }.export-code, .export-folder { width: 55px; }.export-folder > .icon { width: 55px; }.export-code > .icon { width: 38px; }.export-line { width: 45px; margin-inline: 12px; }.export-flow { padding-bottom: 20px; }.themes-media { margin-inline: 22px; margin-bottom: 25px; }
  .split-heading { flex-direction: column; align-items: flex-start; gap: 20px; }.split-heading > p { font-size: 12px; margin-bottom: 0; }.platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.platform-card { padding-block: 20px 16px; }.platform-card h3 { font-size: 14px; }.project-preview { padding: 14px 14px 0; margin-top: 34px; border-radius: 14px; }.project-preview figcaption { font-size: 12px; padding-block: 16px; }
  .download-grid { gap: 16px; }.download-card { padding: 23px; }.download-card h3 { font-size: 20px; }.download-card > p { font-size: 11px; }.download-card .button { font-size: 12px; }.download-card-top { margin-bottom: 25px; }.download-size { font-size: 12px; }.download-size small { display: block; margin: 5px 0 0; }.download-requirements { font-size: 10px; }.release-row { grid-template-columns: 110px 1fr; gap: 25px; }.release-version { font-size: 17px; }.release-content h3 { font-size: 15px; }.release-content ul { font-size: 11px; }
  .faq-section { grid-template-columns: 1fr; gap: 30px; }.faq-heading h2 br { display: none; }.faq-heading h2 { margin-bottom: 15px; }.closing-section { padding-block: 65px 80px; }.closing-section h2 { font-size: 30px; }.site-footer { flex-direction: column; align-items: flex-start; gap: 22px; padding-block: 28px; }.footer-links { margin-left: 0; gap: 23px; }.footer-copyright { display: block; }.download-dialog { padding: 32px 24px 25px; }.download-dialog h2 { font-size: 25px; }.dialog-description br { display: none; }
}
@media (max-width: 540px) {
  .hero h1 { font-size: clamp(31px, 10vw, 39px); letter-spacing: -1px; }.preview-toolbar > span { max-width: 160px; font-size: 8px; }.preview-controls { gap: 0; }.preview-expand { width: 23px; }.theme-button { font-size: 9px; padding-inline: 8px; }.workspace-preview { width: calc(100% - 26px); }.workspace-preview figcaption { padding-inline: 5px; font-size: 8px; }
  .feature-grid, .download-grid { grid-template-columns: 1fr; }.feature-card { height: 370px; }.feature-copy { padding: 27px 25px 0; }.feature-copy h3 { font-size: 23px; }.feature-copy p { font-size: 12px; }.assistant-names { font-size: 34px; }.assistant-visual, .export-visual { margin-inline: 25px; }.workflow-media { margin-left: 25px; }.themes-media { margin-inline: 25px; margin-bottom: 38px; }.platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.vendor-logo { width: 108px; height: 52px; padding: 10px; }.project-preview { padding: 9px 9px 0; }.project-preview .screenshot-button { border-radius: 8px; }
  .download-card { padding: 28px; }.download-card h3 { font-size: 23px; }.download-card > p { font-size: 12px; }.download-card .button { font-size: 13px; }.download-size small { display: inline; margin-left: 8px; }.download-card-top { margin-bottom: 25px; }.download-card > .download-note { min-height: 0; }.release-row { grid-template-columns: 1fr; gap: 14px; padding-block: 24px; }.release-meta { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 13px; }.latest-badge { margin: 0; }.release-content h3 { font-size: 16px; }.release-content ul { font-size: 12px; }.releases-section h2 { max-width: 300px; }.releases-section h2 > span { display: block; }.faq-list summary { font-size: 13px; }.faq-heading h2 br { display: block; }.file-label { font-size: 13px; }.file-label span { margin-left: 7px; font-size: 10px; }.file-name { font-size: 10px; }.download-dialog { padding-inline: 20px; }.dialog-description { font-size: 11px; }.file-main .button { font-size: 10px; padding-inline: 11px; }.rename-notice { font-size: 10px; }.dialog-footer { font-size: 9px; }.preview-dialog { max-width: calc(100% - 16px); border-radius: 8px; }.preview-dialog img { max-width: calc(100vw - 20px); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }