:root {
  --paper: #f7f6ef;
  --paper-deep: #eceee4;
  --ink: #253027;
  --muted: #647061;
  --line: #dce1d2;
  --lime: #c8ee83;
  --olive: #698444;
  --lilac: #ebe4f2;
  --peach: #f1d7c9;
  --blue: #d8e8e8;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 3px solid #8265c8; outline-offset: 4px; }
::selection { color: var(--ink); background: var(--lime); }
.container { width: min(100% - 64px, 1220px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: -60px; left: 20px; padding: 10px 16px; border-radius: 0 0 10px 10px; color: var(--ink); background: var(--lime); font-weight: 700; }
.skip-link:focus { top: 0; }

.announcement { background: var(--ink); color: #edf4e6; font-size: 12px; }
.announcement-inner { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 36px; text-align: center; }
.announcement-spark { display: flex; color: var(--lime); }
.announcement-spark svg { width: 14px; height: 14px; }
.announcement a { display: inline-flex; align-items: center; gap: 3px; margin-left: 5px; color: var(--lime); font-weight: 700; text-decoration: none; }
.announcement a:hover { text-decoration: underline; }
.announcement a svg { width: 13px; height: 13px; }
.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid rgba(37,48,39,.1); background: rgba(247,246,239,.94); backdrop-filter: blur(18px); }
.nav-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 82px; gap: 22px; }
.brand { display: inline-flex; align-items: center; flex: none; gap: 10px; text-decoration: none; color: var(--ink); font-size: 22px; line-height: 1; font-weight: 820; letter-spacing: -.065em; }
.brand img { display: block; border-radius: 12px; background: var(--lime); padding: 3px; }
.brand-period { color: var(--olive); margin-left: -10px; }
.site-nav { display: flex; align-items: center; gap: clamp(15px, 2vw, 30px); }
.site-nav > a:not(.nav-download) { color: #4d594b; font-size: 13px; font-weight: 650; text-decoration: none; transition: color .2s; }
.site-nav > a:not(.nav-download):hover { color: var(--olive); }
.nav-download { display: inline-flex; align-items: center; gap: 13px; min-height: 43px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 10px; color: var(--ink); font-size: 13px; font-weight: 750; text-decoration: none; transition: background .2s, transform .2s; }
.nav-download:hover { background: var(--lime); transform: translateY(-2px); }
.nav-download svg { width: 16px; height: 16px; }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: var(--ink); }
.menu-toggle .menu-close-icon { display: none; }
.menu-toggle[aria-expanded="true"] .menu-open-icon { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close-icon { display: block; }

.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--olive); font-size: 11px; font-weight: 800; line-height: 1.4; letter-spacing: .18em; }
.eyebrow-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--olive); box-shadow: 0 0 0 5px #dfe9ca; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, .screenshot-copy h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.064em; }
h1 em, h2 em, .screenshot-copy h3 em { color: var(--olive); font-weight: 400; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 16px; min-height: 56px; padding: 0 22px; border: 1px solid transparent; border-radius: 13px; font-size: 14px; font-weight: 780; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.button:hover { transform: translateY(-3px); box-shadow: 0 12px 24px #2530271c; }
.button svg { width: 18px; height: 18px; }
.button-dark { background: var(--ink); color: white; }
.button-dark:hover { background: #374938; }
.text-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--ink); font-size: 14px; font-weight: 750; text-decoration-color: var(--olive); text-underline-offset: 5px; }
.text-link:hover { color: var(--olive); }
.text-link svg { width: 16px; height: 16px; }

.ribbon { overflow: hidden; border-block: 1px solid #25302726; background: var(--lime); }
.ribbon-viewport { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 38px, #000 calc(100% - 38px), transparent); }
.ribbon-track { display: flex; width: max-content; animation: ribbon-shift 52s linear infinite; }
.ribbon-group { display: flex; flex: none; align-items: center; justify-content: space-around; gap: 42px; min-width: 100vw; height: 64px; padding-inline: 21px; }
.ribbon-group span { display: inline-flex; flex: none; align-items: center; gap: 42px; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: .15em; white-space: nowrap; }
.ribbon-separator { width: 16px; height: 16px; stroke: #4f6b39; stroke-width: 1.1; fill: none; opacity: .65; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
@keyframes ribbon-shift { to { transform: translate3d(-50%, 0, 0); } }
.section { padding-block: 112px; }
.section-heading { margin-bottom: 45px; }
.section-heading h2, .feature-intro h2, .playground h2, .privacy-band h2, .install h2, .faq h2 { margin: 18px 0 0; font-size: clamp(52px, 5.4vw, 78px); line-height: .98; }
.split-heading, .feature-intro { display: grid; grid-template-columns: 1fr 350px; align-items: end; gap: 40px; }
.split-heading p, .feature-intro p { margin: 0 0 6px; max-width: 350px; color: var(--muted); font-size: 16px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.step-card { position: relative; min-height: 350px; padding: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fdfef9; }
.step-card:nth-child(2) { background: #eae4f2; border-color: #e0d6eb; }
.step-card:nth-child(3) { background: #e3edcf; border-color: #d6e3be; }
.step-number { position: absolute; right: 25px; top: 25px; color: #899382; font: 12px ui-monospace, monospace; }
.step-icon, .feature-icon { display: grid; place-items: center; width: 51px; height: 51px; border-radius: 14px; background: var(--lime); }
.step-icon svg { width: 24px; height: 24px; }
.step-card h3 { margin: 28px 0 10px; font-size: 21px; letter-spacing: -.04em; }
.step-card p { max-width: 290px; color: #596557; font-size: 14px; }
.step-visual { position: absolute; left: 28px; right: 28px; bottom: 25px; display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 8px 12px; border-radius: 10px; font-size: 12px; }
.step-visual-hover { background: var(--ink); color: white; font-weight: 750; }
.step-visual-hover small { padding: 3px 6px; border-radius: 4px; background: #ffffff21; color: var(--lime); font: 10px ui-monospace, monospace; }
.step-visual-pin { background: #f8f5fd; color: var(--ink); gap: 10px; }
.step-visual-pin span { color: #71806a; font: 10px ui-monospace, monospace; }
.step-visual-pin strong { font: 13px var(--serif); }
.step-visual-copy { background: #f8faef; font: 13px ui-monospace, monospace; }
.step-visual-copy svg { width: 15px; height: 15px; }

.features { background: var(--paper-deep); }
.feature-intro { margin-bottom: 44px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.feature-card { display: flex; flex-direction: column; min-height: 370px; padding: 25px; border: 1px solid #e1e4da; border-radius: 20px; background: #fbfcf7; }
.feature-icon { width: 47px; height: 47px; }
.feature-icon svg { width: 23px; height: 23px; }
.feature-icon.purple { background: var(--lilac); }
.feature-icon.peach { background: var(--peach); }
.feature-icon.blue { background: var(--blue); }
.feature-card h3 { margin: 29px 0 9px; font-size: 18px; letter-spacing: -.035em; }
.feature-card p { margin: 0 0 22px; color: var(--muted); font-size: 13px; }
.feature-demo { margin-top: auto; padding: 16px 12px; border-radius: 11px; background: #eef1e5; min-height: 110px; }
.feature-card p + .feature-demo { margin-top: auto; }
.feature-demo small, .feature-demo span { display: block; color: #596552; font-size: 10px; }
.feature-demo code { display: block; margin-block: 12px; font: 11px/1.5 ui-monospace, monospace; overflow-wrap: anywhere; }
.selector-demo b { display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 4px; background: var(--lime); color: var(--ink); }
.selector-demo > span { font-size: 8px; font-weight: 750; letter-spacing: .07em; }
.compare-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; background: var(--peach); }
.compare-demo > div { padding: 8px; border-radius: 7px; background: #fff9; }
.compare-demo strong { display: block; margin-block: 4px; font-size: 30px; line-height: 1.1; }
.compare-demo .demo-serif { font-family: var(--serif); font-style: italic; font-weight: 400; }
.compare-demo span { font-size: 8px; }
.contrast-demo { background: var(--lilac); }
.contrast-demo > div { display: flex; align-items: center; gap: 5px; margin-bottom: 14px; }
.contrast-demo .demo-swatch { width: 20px; height: 25px; border-radius: 6px; border: 1px solid #25302720; }
.demo-swatch.dark { background: #000; }.demo-swatch.light { background: #fff; }
.contrast-demo strong { margin-left: auto; font-size: 25px; letter-spacing: -.05em; }
.controls-demo { background: var(--blue); }
.controls-demo small { font-size: 8px; letter-spacing: .05em; font-weight: 700; }
.utility-strip { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px 30px; margin-top: 24px; color: #586552; font-size: 12px; }
.utility-strip span { display: inline-flex; align-items: center; gap: 8px; }.utility-strip svg { width: 17px; height: 17px; }
.showcase-options { display: flex; flex-wrap: wrap; gap: 7px; margin-block: 24px 13px; }
.showcase-options button { padding: 9px 12px; border: 1px solid #cbd3bf; border-radius: 9px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 700; }
.showcase-options button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.showcase-caption { min-height: 65px; }
.screenshot-story { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; margin-top: 72px; }
.screenshot-copy { padding-right: 15px; }
.screenshot-copy h3 { margin: 19px 0; font-size: clamp(46px, 4.5vw, 64px); line-height: .98; }
.screenshot-copy p { color: var(--muted); font-size: 14px; }
.screenshot-copy .text-link { margin-top: 12px; }
.screenshot-image { display: block; padding: 12px; border: 1px solid #d9decf; border-radius: 20px; background: #fff; box-shadow: 0 16px 45px #25302712; transition: transform .25s; }
.screenshot-image:hover { transform: translateY(-5px); }
.screenshot-image img { display: block; width: 100%; height: auto; border-radius: 10px; }

.playground-layout { display: grid; grid-template-columns: 360px 1fr; align-items: center; gap: clamp(45px, 7vw, 125px); }
.playground-copy > p { max-width: 330px; margin-top: 24px; color: var(--muted); }
.playground-note { display: flex; align-items: center; gap: 10px; max-width: 300px; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); color: #5b6856; font-size: 12px; }
.playground-note svg { color: var(--olive); width: 19px; height: 19px; }
.lab-card { overflow: hidden; border: 1px solid #d8dfce; border-radius: 24px; background: #fefefb; box-shadow: 0 21px 50px #25302710; }
.lab-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 55px; padding: 0 27px; border-bottom: 1px solid #e8ebdf; color: #708069; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.lab-live { display: inline-flex; align-items: center; gap: 6px; color: #4a6a36; }
.lab-live i { width: 6px; height: 6px; border-radius: 50%; background: #82ad53; }
.font-options { display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 27px 5px; }
.font-option { min-height: 38px; padding: 7px 13px; border: 1px solid #dfe5d8; border-radius: 9px; background: #f5f7ef; color: #596654; font-size: 12px; font-weight: 700; transition: background .2s, color .2s; }
.font-option:hover { background: #e9eedf; }
.font-option.is-active { border-color: var(--ink); background: var(--ink); color: #fff; }
.lab-label { display: block; margin: 28px 27px 6px; color: #71806a; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
#sample-input { display: block; width: calc(100% - 54px); height: 41px; margin: 0 27px 18px; padding: 0 12px; border: 1px solid #dae1d0; border-radius: 8px; outline-offset: 3px; background: #f8faf4; color: var(--ink); font-size: 14px; }
.sample-output { display: flex; align-items: center; min-height: 210px; margin: 0 27px; padding: 27px; overflow-wrap: anywhere; border-radius: 14px; background: #e9eddc; color: var(--ink); font-size: clamp(36px, 4vw, 57px); line-height: 1.05; letter-spacing: -.055em; }
.sample-output.serif { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; }
.sample-output.sans { font-family: Arial, Helvetica, sans-serif; font-weight: 750; }
.sample-output.mono { font-family: 'Courier New', Courier, monospace; font-weight: 400; font-size: clamp(31px, 3.5vw, 47px); letter-spacing: -.075em; }
.lab-code { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 110px; margin: 25px 27px 0; padding: 16px 0; border-top: 1px solid #e3e7dc; }
.lab-code code { color: #54604f; font: 12px/1.7 ui-monospace, 'Courier New', monospace; white-space: pre-line; overflow-wrap: anywhere; }
.lab-code button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 43px; padding: 0 13px; border: 0; border-radius: 10px; background: var(--lime); color: var(--ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
.lab-code button:hover { background: #b7e56c; }
.lab-code button svg { width: 16px; height: 16px; }
.copy-status { min-height: 24px; margin: 0 27px 12px; color: var(--olive); font-size: 12px; }

.privacy-band { padding-block: 92px; background: var(--ink); color: #f4f7ee; }
.privacy-layout { display: grid; grid-template-columns: 160px 1fr 185px; gap: 45px; align-items: center; }
.privacy-mark { display: grid; place-items: center; gap: 15px; width: 150px; height: 170px; border: 1px solid #ffffff30; border-radius: 22px; transform: rotate(-6deg); }
.privacy-mark img { width: 94px; height: 94px; border-radius: 23px; background: var(--lime); padding: 7px; }
.privacy-mark span { color: #c0d1b4; font-size: 9px; font-weight: 750; letter-spacing: .13em; }
.privacy-band .eyebrow { color: var(--lime); }
.privacy-band h2 { margin: 16px 0 20px; }
.privacy-band h2 em { color: var(--lime); }
.privacy-band p { max-width: 650px; color: #ccdac9; }
.button-light { margin-top: 14px; background: var(--lime); color: var(--ink); }
.button-light:hover { background: #d8f4a8; }
.privacy-checks { display: grid; gap: 18px; color: #e2ebd9; font-size: 13px; font-weight: 700; }
.privacy-checks span { display: flex; align-items: center; gap: 9px; }
.privacy-checks svg { width: 21px; height: 21px; padding: 3px; border-radius: 50%; background: #49663e; color: var(--lime); }

.install { background: #eae4f2; }
.install-layout { display: grid; grid-template-columns: 1fr 430px; align-items: start; gap: clamp(50px, 8vw, 135px); }
.install h2 { margin-bottom: 22px; }
.install-layout > div:first-child > p { max-width: 470px; color: #5c5a64; }
.install .button { margin-top: 12px; }
.download-note { display: block; margin-top: 14px; color: #65636d; font-size: 11px; }
.install-steps { padding: 28px 29px; border: 1px solid #d6cfe0; border-radius: 21px; background: #faf9fd; box-shadow: 0 17px 38px #4d37631a; }
.install-steps h3 { margin-bottom: 16px; font-size: 20px; letter-spacing: -.035em; }
.install-steps ol { margin: 0; padding: 0; list-style: none; }
.install-steps li { display: flex; align-items: start; gap: 16px; padding: 16px 0; border-top: 1px solid #e4dfeb; }
.install-steps li span { display: grid; place-items: center; flex: none; width: 31px; height: 31px; border-radius: 9px; background: #e4edd4; color: #496334; font: 11px ui-monospace, monospace; font-weight: 800; }
.install-steps li p { margin: 2px 0 0; color: #515b4f; font-size: 13px; }
.install-steps code { padding: 2px 5px; border-radius: 5px; background: #e9e4ee; font: 12px ui-monospace, monospace; }
.install-help { margin: 17px 0 0; color: #60665b; font-size: 11px; }

.faq-layout { display: grid; grid-template-columns: 350px 1fr; gap: clamp(50px, 9vw, 150px); }
.faq h2 { font-size: clamp(51px, 5vw, 72px); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 18px 4px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 750; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary svg { width: 17px; height: 17px; transition: transform .2s; }
.faq-list details[open] summary svg { transform: rotate(45deg); }
.faq-list details p { max-width: 610px; margin: -4px 40px 24px 4px; color: var(--muted); font-size: 14px; }

.footer { padding-top: 62px; background: #e8ebdf; }
.footer-main { display: flex; justify-content: space-between; gap: 50px; padding-bottom: 60px; }
.footer-brand { font-size: 22px; }
.footer-main > div:first-child p { margin-top: 16px; color: var(--muted); font-size: 14px; }
.footer-links { display: flex; gap: clamp(60px, 8vw, 145px); }
.footer-links > div { display: flex; flex-direction: column; gap: 13px; }
.footer-links h2 { margin: 0 0 4px; font: 12px var(--sans); font-weight: 850; letter-spacing: .15em; text-transform: uppercase; }
.footer-links a { color: #53604e; font-size: 13px; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 65px; border-top: 1px solid #cfd7c7; color: #647061; font-size: 11px; }
.footer-bottom a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 700; }
.footer-bottom svg { width: 13px; height: 13px; }

.preview-dialog { max-width: min(94vw, 1320px); max-height: 90vh; padding: 12px; border: 0; border-radius: 18px; background: #f8faf4; box-shadow: 0 30px 100px #0006; }
.preview-dialog::backdrop { background: #142219bf; backdrop-filter: blur(5px); }
.dialog-inner { position: relative; }
.dialog-inner img { display: block; max-width: 100%; max-height: calc(90vh - 24px); width: auto; height: auto; border-radius: 9px; }
.dialog-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; }

/* The privacy policy lives beside this page and shares its visual language. */
.legal-page .site-header { position: relative; }
.legal-nav { display: inline-flex; align-items: center; min-height: 44px; gap: 8px; color: #4e5c49; font-size: 13px; font-weight: 750; text-decoration: none; }
.legal-nav:hover { color: var(--olive); }
.legal-nav svg { width: 16px; height: 16px; }
.legal-hero { padding: 78px 0 60px; border-bottom: 1px solid var(--line); }
.legal-hero h1 { margin: 17px 0 13px; font-size: clamp(62px, 7vw, 95px); line-height: .95; }
.legal-hero p { max-width: 670px; color: var(--muted); font-size: 17px; }
.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 740px); gap: clamp(50px, 7vw, 110px); padding-block: 64px 110px; }
.legal-toc { align-self: start; position: sticky; top: 30px; display: grid; gap: 12px; }
.legal-toc strong { margin-bottom: 7px; color: var(--olive); font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.legal-toc a { color: #657360; font-size: 13px; text-decoration: none; }
.legal-toc a:hover { color: var(--ink); text-decoration: underline; }
.legal-content h2 { margin: 0 0 15px; font: 29px/1.2 var(--serif); letter-spacing: -.04em; }
.legal-content section { padding: 0 0 31px; margin-bottom: 31px; border-bottom: 1px solid var(--line); scroll-margin-top: 35px; }
.legal-content section:last-child { border: 0; }
.legal-content p { color: #536050; font-size: 15px; }
.legal-content a:not(.button) { color: #40622c; text-underline-offset: 3px; }
.legal-content strong { color: var(--ink); }
.legal-footer-links { display: flex; gap: 20px; }
.legal-footer-links a { text-decoration: none; font-weight: 700; }
.legal-footer-links a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card { min-height: 220px; }
  .privacy-layout { grid-template-columns: 120px 1fr; gap: 30px; }
  .privacy-checks { grid-column: 2; grid-template-columns: repeat(3, max-content); }
  .privacy-mark { width: 115px; height: 145px; }
  .privacy-mark img { width: 76px; height: 76px; }
}
@media (max-width: 860px) {
  .container { width: min(100% - 42px, 720px); }
  .menu-toggle { display: inline-flex; }
  .site-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 21px 22px; border-bottom: 1px solid var(--line); background: var(--paper); box-shadow: 0 16px 20px #25302716; }
  .site-nav.is-open { display: flex; }
  .site-nav > a:not(.nav-download) { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); }
  .site-nav .nav-download { justify-content: space-between; margin-top: 16px; }
  .split-heading, .feature-intro { grid-template-columns: 1fr 260px; }
  .steps { gap: 10px; }
  .step-card { padding: 20px; }
  .step-visual { left: 20px; right: 20px; }
  .screenshot-story { grid-template-columns: 1fr; }
  .screenshot-copy { max-width: 500px; }
  .playground-layout, .install-layout, .faq-layout { grid-template-columns: 1fr; gap: 40px; }
  .playground-copy > p { max-width: 560px; }
  .playground-note { margin-top: 20px; }
  .install-steps { max-width: 600px; }
  .legal-layout { grid-template-columns: 170px 1fr; gap: 40px; }
}
@media (max-width: 620px) {
  .container { width: min(100% - 36px, 480px); }
  .announcement-inner { min-height: 42px; font-size: 10px; }
  .announcement-spark { display: none; }
  .nav-wrap { min-height: 68px; }
  .brand { font-size: 21px; }
  .brand img { width: 38px; height: 38px; }
  .ribbon-group { height: 52px; gap: 28px; padding-inline: 14px; }.ribbon-group span { gap: 28px; font-size: 10px; letter-spacing: .12em; }.ribbon-separator { width: 13px; height: 13px; }.ribbon-viewport { mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
  .section { padding-block: 80px; }
  .section-heading h2, .feature-intro h2, .playground h2, .privacy-band h2, .install h2, .faq h2 { font-size: clamp(49px, 12vw, 68px); }
  .split-heading, .feature-intro { display: block; }
  .split-heading p, .feature-intro p { margin-top: 20px; }
  .steps, .feature-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 300px; padding: 25px; }
  .step-visual { left: 25px; right: 25px; }
  .feature-grid { gap: 11px; }
  .feature-card { min-height: 0; padding: 23px; }
  .feature-demo { min-height: 0; }.utility-strip { justify-content: flex-start; gap: 14px; }.showcase-caption { min-height: 0; }
  .feature-card h3 { margin-top: 20px; }
  .screenshot-story { margin-top: 55px; }
  .screenshot-image { padding: 6px; border-radius: 14px; }
  .font-options { padding-inline: 19px; }
  .lab-top { padding-inline: 19px; }
  .lab-label { margin-inline: 19px; }
  #sample-input { width: calc(100% - 38px); margin-inline: 19px; }
  .sample-output { min-height: 190px; margin-inline: 19px; padding: 20px; }
  .lab-code { align-items: start; flex-direction: column; gap: 15px; margin-inline: 19px; }
  .copy-status { margin-inline: 19px; }
  .privacy-band { padding-block: 78px; }
  .privacy-layout { display: block; }
  .privacy-mark { width: 95px; height: 110px; margin-bottom: 35px; }
  .privacy-mark img { width: 61px; height: 61px; }
  .privacy-mark span { font-size: 6px; }
  .privacy-checks { display: flex; flex-wrap: wrap; gap: 17px; margin-top: 34px; }
  .install-steps { padding: 22px; }
  .faq-list summary { font-size: 14px; }
  .footer-main { flex-direction: column; gap: 35px; padding-bottom: 42px; }
  .footer-links { gap: 55px; }
  .footer-bottom { align-items: start; flex-direction: column; justify-content: center; padding-block: 18px; }
  .legal-hero { padding-block: 58px 45px; }
  .legal-layout { display: block; padding-block: 42px 70px; }
  .legal-toc { position: static; grid-template-columns: repeat(2, 1fr); margin-bottom: 45px; }
  .legal-toc strong { grid-column: 1/-1; }
}
.hero-scene { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 780px; max-width: 1440px; margin-inline: auto; padding: 165px 24px 175px; overflow: clip; }
.hero-copy { position: relative; z-index: 2; width: min(100%, 650px); text-align: center; animation: hero-arrive .85s cubic-bezier(.2,.7,.2,1) both; }
.hero-release { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 27px; color: #5a6752; font-size: 11px; text-decoration: none; }
.hero-release > span { padding: 4px 7px; border-radius: 6px; background: #e7edda; color: #4e6639; font-size: 9px; font-weight: 800; letter-spacing: .04em; }
.hero-release svg { width: 13px; height: 13px; }
.hero-scene h1 { margin: 0 0 24px; font: 760 clamp(62px, 6.2vw, 86px)/1.02 var(--sans); letter-spacing: -.065em; }
.hero-scene h1 span, .hero-scene h1 em { display: block; }
.hero-scene h1 em { font: italic 1.12em/.98 var(--serif); letter-spacing: -.065em; color: var(--olive); }
.hero-lead { max-width: 455px; margin: 0 auto; color: #647061; font-size: 16px; line-height: 1.65; }
.hero-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 25px; margin-top: 28px; }
.hero-actions .button { border-radius: 100px; min-height: 54px; padding-inline: 21px; }
.hero-actions .button img { background: var(--lime); padding: 1px; border-radius: 7px; }
.hero-actions .text-link { font-size: 12px; }
.hero-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 18px 0 0; font-size: 10px; color: #6b7664; }
.hero-note > span { width: 3px; height: 3px; background: #a4af98; border-radius: 50%; }
.hero-orbit { position: absolute; inset: 0; z-index: 1; pointer-events: none; user-select: none; opacity: calc(1 - var(--hero-scroll, 0)); }
.float-piece { position: absolute; rotate: var(--angle); translate: calc(var(--scatter-x, 0px) * var(--hero-scroll, 0)) calc(var(--scatter-y, 0px) * var(--hero-scroll, 0)); animation: sticker-arrive .9s cubic-bezier(.16,1,.3,1) var(--delay) both; }
.float-type { --scatter-x: -120px; --scatter-y: -85px; }.float-tag { --scatter-y: -120px; }.float-goblin { --scatter-x: 120px; --scatter-y: -85px; }.float-hover { --scatter-x: -180px; }.float-color { --scatter-x: 180px; }.float-selector { --scatter-x: -120px; --scatter-y: 95px; }.float-compare { --scatter-x: 120px; --scatter-y: 95px; }
.float-card { animation: sticker-drift var(--duration) ease-in-out calc(var(--delay) * -8) infinite; box-shadow: 0 9px 24px #2530270b; }
.orbit-label { display: block; font: 700 8px/1.4 var(--sans); letter-spacing: .09em; color: #65705e; }
.float-type { top: 34px; left: 17%; width: 150px; }
.type-card { padding: 16px 18px 12px; border: 5px solid #fff; border-radius: 16px; background: var(--lilac); }
.type-card strong { display: block; font: italic 65px/.95 var(--serif); letter-spacing: -.07em; color: #63527e; margin: 7px 0; }
.type-card > span:last-child { font: 10px var(--serif); color: #63527e; }
.float-tag { top: 54px; left: 47%; width: 168px; }
.tag-card { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid #e7eade; border-radius: 13px; background: #fff; font: 11px ui-monospace,monospace; }
.tag-card svg { width: 17px; height: 17px; color: #7c8a72; }.tag-card b { padding: 3px 5px; border-radius: 4px; background: var(--lime); }.tag-card i { width: 5px; height: 5px; border-radius: 50%; background: #8bb158; margin-left: auto; }
.float-goblin { top: 28px; right: 16%; width: 108px; }
.goblin-card { padding: 9px; border: 5px solid white; border-radius: 24px; background: var(--lime); text-align: center; }
.goblin-card img { display: block; width: 80px; height: 80px; }.goblin-card span { display: block; font-size: 7px; margin-top: 4px; font-weight: 700; }
.float-hover { top: 42%; left: 4%; width: 188px; }
.hover-card { display: flex; align-items: center; gap: 9px; position: relative; padding: 16px 13px; border: 4px solid #fff; border-radius: 15px; background: var(--ink); color: white; font-size: 12px; }
.orbit-status { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }.hover-card small { padding: 3px 6px; border-radius: 4px; background: #ffffff20; color: var(--lime); font: 10px ui-monospace,monospace; }
.hover-card svg { position: absolute; width: 30px; height: 30px; bottom: -20px; right: 10px; fill: var(--lime); stroke: white; stroke-width: 1.2; rotate: -7deg; }
.float-color { top: 38%; right: 4%; width: 158px; }
.color-card { padding: 15px; background: #fff; border: 1px solid #ebe6df; border-radius: 18px; }.orbit-colors { display: flex; gap: 5px; margin: 12px 0; }.orbit-colors i { flex: 1; height: 32px; border-radius: 7px; background: var(--lime); }.orbit-colors i:nth-child(2) { background: var(--lilac); }.orbit-colors i:nth-child(3) { background: var(--peach); }
.color-card > div:last-child { display: flex; align-items: center; justify-content: space-between; }.color-card code { font-size: 11px; }.color-card svg { width: 16px; height: 16px; }
.float-selector { bottom: 42px; left: 20%; width: 205px; }.selector-card { border: 4px solid white; border-radius: 14px; background: #e7edda; padding: 13px 15px; }.selector-card code { display: block; margin: 9px 0; font: 13px ui-monospace,monospace; }.selector-card > span:last-child { display: flex; align-items: center; gap: 5px; font-size: 8px; color: #617352; }.selector-card i { width: 4px; height: 4px; border-radius: 50%; background: #698444; }
.float-compare { bottom: 45px; right: 18%; width: 196px; }.orbit-compare { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; border: 5px solid white; border-radius: 18px; background: var(--peach); }.orbit-compare > div { padding: 6px 9px; background: #fff8; border-radius: 8px; }.orbit-compare small { font-size: 7px; display: block; color: #7a6256; }.orbit-compare strong { display: block; font-size: 33px; line-height: 1.1; }.orbit-compare > div:first-child strong { font-family: var(--serif); font-style: italic; font-weight: 400; }.orbit-compare svg { width: 17px; height: 17px; }
.orbit-shape { position: absolute; width: 70px; height: 70px; fill: var(--lime); stroke: none; animation: shape-turn 30s ease-in-out infinite alternate; }
.shape-flower { top: 18%; left: 4%; width: 65px; height: 65px; fill: #b2c98c; }.shape-star { top: 18%; right: 5%; width: 50px; height: 50px; fill: var(--peach); animation-delay: -9s; }.shape-spark { bottom: 80px; left: 49%; width: 35px; height: 35px; fill: none; stroke: #ad96ce; stroke-width: 9; stroke-linecap: round; animation-delay: -13s; }
.motion-toggle { position: absolute; z-index: 3; bottom: 8px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #69765f; font-size: 9px; padding: 8px; border-radius: 7px; }.motion-toggle svg { width: 11px; height: 11px; }.motion-play { display: none; }.motion-toggle[aria-pressed="true"] .motion-play { display: block; }.motion-toggle[aria-pressed="true"] .motion-pause { display: none; }
.motion-paused .hero-scene *, .motion-paused .ribbon-track, .hero-offscreen .hero-orbit * { animation-play-state: paused !important; }
.product-art-section { max-width: 1050px; padding-top: 0; padding-bottom: 96px; }.product-art { margin: 0; }.product-art-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 28px; background: #eeece2; border: 1px solid #e9e7dd; }.product-art img { display: block; width: 100%; height: 100%; object-fit: cover; }.product-art figcaption { display: flex; justify-content: space-between; gap: 15px; padding-top: 14px; color: #727c68; font-size: 11px; }.product-art figcaption span:first-child { font-size: 9px; font-weight: 700; letter-spacing: .1em; }
@keyframes hero-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sticker-arrive { from { opacity: 0; transform: translateY(22px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes sticker-drift { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-16px) rotate(2.5deg); } }
@keyframes shape-turn { from { transform: rotate(-16deg) translateY(0); } to { transform: rotate(24deg) translateY(-14px); } }
@media (max-width: 1100px) {
  .hero-copy { max-width: 590px; }.hero-scene h1 { font-size: 73px; }.float-hover { left: 1%; width: 161px; }.hover-card { gap: 6px; padding: 13px 9px; font-size: 11px; }.float-color { right: 1%; width: 145px; }.color-card { padding: 11px; }.float-type { left: 12%; }.float-goblin { right: 12%; }.float-tag { left: 42%; }
}
@media (max-width: 900px) {
  .hero-scene { min-height: 820px; padding: 190px 25px 190px; }.hero-copy { max-width: 600px; }.hero-scene h1 { font-size: 72px; }.float-hover,.float-color,.float-tag { display: none; }.float-type { left: 9%; top: 28px; }.float-goblin { right: 12%; top: 35px; }.float-selector { left: 10%; bottom: 40px; }.float-compare { right: 9%; bottom: 42px; }.shape-flower { left: 39%; top: 9%; width: 36px; height: 36px; }.shape-star { right: 6%; top: 30%; width: 33px; height: 33px; }.shape-spark { bottom: 150px; left: 47%; width: 26px; height: 26px; }
}
@media (max-width: 620px) {
  .hero-scene { min-height: 0; padding: 151px 20px 170px; }.hero-copy { width: 100%; }.hero-scene h1 { font-size: clamp(42px, 9.8vw, 60px); margin-bottom: 21px; }.hero-release { margin-bottom: 23px; font-size: 9px; gap: 6px; }.hero-release > span { font-size: 8px; }.hero-release svg { width: 11px; height: 11px; }.hero-lead { max-width: 350px; font-size: 14px; line-height: 1.7; }.hero-actions { flex-direction: column; gap: 6px; margin-top: 23px; }.hero-actions .button { font-size: 13px; min-height: 52px; }.hero-note { margin-top: 12px; font-size: 9px; }
  .float-type { top: 15px; left: 8%; width: 108px; }.type-card { padding: 10px 11px 8px; border-width: 4px; border-radius: 12px; }.type-card strong { font-size: 44px; }.type-card .orbit-label { font-size: 5px; }.type-card > span:last-child { font-size: 8px; }.float-goblin { width: 79px; top: 25px; right: 10%; }.goblin-card { padding: 5px; border-width: 4px; border-radius: 18px; }.goblin-card img { width: 61px; height: 61px; }.goblin-card span { font-size: 5px; }
  .float-selector { left: 5%; bottom: 45px; width: 155px; }.selector-card { padding: 10px; border-width: 3px; }.selector-card .orbit-label { font-size: 6px; }.selector-card code { font-size: 10px; margin-block: 7px; }.selector-card > span:last-child { font-size: 6px; }.float-compare { right: 5%; bottom: 45px; width: 142px; }.orbit-compare { padding: 7px; border-width: 3px; gap: 4px; }.orbit-compare > div { padding: 5px; }.orbit-compare strong { font-size: 24px; }.orbit-compare small { font-size: 6px; }.orbit-compare svg { width: 14px; height: 14px; }
  .shape-flower { left: 48%; top: 55px; width: 25px; height: 25px; }.shape-star,.shape-spark { display: none; }.product-art-section { padding-top: 12px; padding-bottom: 45px; }.product-art-frame { border-radius: 17px; }.product-art figcaption { flex-direction: column; gap: 4px; font-size: 10px; padding-top: 11px; }
}
@media (max-width: 360px) { .float-selector { left: 4%; width: 142px; }.float-compare { right: 4%; width: 127px; }.hero-release { font-size: 8px; }.hero-scene h1 { font-size: 40px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .ribbon-track { animation: none; }
  .hero-scene *, .hero-copy { animation: none !important; }.motion-toggle { display: none; }
  .hero-orbit { opacity: 1; }.float-piece { translate: none; }
}

/* The published release stays primary; manual updates carry their review status. */
.manual-download { max-width: 480px; margin-top: 25px; border-top: 1px solid #d6cfe0; padding-top: 18px; }
.manual-download summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 700; }
.manual-download summary::-webkit-details-marker { display: none; }
.manual-download summary svg { width: 17px; height: 17px; flex: none; }
.manual-download[open] summary svg { transform: rotate(180deg); }
.manual-download p { margin: 15px 0; color: #5c5a64; font-size: 13px; line-height: 1.65; }
.manual-download .text-link { font-size: 14px; }
.manual-download code { overflow-wrap: anywhere; font-size: 12px; }
.hero-release { flex-wrap: wrap; justify-content: center; }
.hero-release > span { white-space: nowrap; }

.website-feedback-note { margin-top: 18px; font-size: 13px; }
.website-feedback-note a { color: #e0f3bd; text-underline-offset: 4px; }