/* Generated by scripts/build-legacy.mjs from assets/site/tokens.css, assets/site/base.css, assets/site/home.css, assets/site/pages.css. Don't edit: change those files and run it again. */
@supports not (color: oklch(0% 0 0)) {
:root { --color-error: #be2323; --color-success: #21763c; --color-paper: #040c08; --color-paper-2: #0a1711; --color-paper-3: #14231b; --color-ink: #ecf4ef; --color-ink-2: #c3cec7; --color-muted: #95a29b; --color-rule: #25312b; --color-band: #04160d; --color-band-ink: #ecf4ef; --color-band-muted: #b3c2b9; --color-band-rule: #25382e; --color-mark: #e8d266; --color-mark-ink: #271f00; --color-accent: #56db8f; --color-accent-ink: #021109; --color-accent-hover: #7eeca8; --color-bright: #56db8f; --color-focus: #65ea92; --color-bloom: #00804f; --color-bloom-2: #115629; --color-glass: rgba(18, 30, 24, 0.62); --color-glass-edge: rgba(255, 255, 255, 0.08); }
}
@supports not (color: color-mix(in oklab, red 50%, blue)) {
::selection { background: rgba(86, 219, 143, 0.22); }
body::before { background: radial-gradient(42% 38% at 88% 8%, rgba(0, 128, 79, 0.55), transparent 70%),
              radial-gradient(38% 34% at 6% 92%, rgba(17, 86, 41, 0.4), transparent 72%); }
.site-header.scrolled .mast { background: rgba(10, 23, 17, 0.8); }
.shot { background: radial-gradient(120% 90% at 70% 10%, #032a1a, var(--color-paper)); }
.acc em, .task em, .due em { background: rgba(86, 219, 143, 0.14); }
.ui mark { background: rgba(232, 210, 102, 0.8); }
.band-grid { background: radial-gradient(80% 120% at 0% 0%, #023e26, var(--color-band) 70%); }
.band a { text-decoration-color: rgba(236, 244, 239, 0.45); }
.guide-card .guide-rules { background: #11291c; }
}
@supports not (width: clamp(1px, 1vw, 2px)) {
:root { --text-display-s: max(2.25rem, min( 4vw + 0.5rem,  3.75rem)); --text-display: max(2.75rem, min( 5vw + 1rem,  5.25rem)); --text-section: max(2rem, min( 2.5vw + 1rem,  3.5rem)); --text-title: max(1.25rem, min( 0.75vw + 0.875rem,  1.625rem)); --text-lead: max(1.125rem, min( 0.35vw + 1rem,  1.375rem)); }
.hero h1 { font-size: max(3.25rem, min( 8.4vw,  8.25rem)); }
.hero-facts dt { font-size: max(2rem, min( 3vw,  3rem)); }
.demo-summary .s1 { font-size: max(1.4rem, min( 1vw + 1rem,  1.9rem)); }
.stack-n { font-size: max(3rem, min( 6vw,  5.5rem)); }
.contact-big { font-size: max(1.6rem, min( 4.4vw,  3.5rem)); }
}
@supports not (inset: 0) {
.container { margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
[data-slot] > img { top: 0; right: 0; bottom: 0; left: 0; }
body::before { top: 0; right: 0; bottom: 0; left: 0; }
.btn > * + * { margin-left: var(--space-xs); }
.btn { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.btn-sm { padding-left: var(--space-md); padding-right: var(--space-md); }
.mast { padding-left: var(--space-lg); padding-right: var(--space-xs); margin-left: auto; margin-right: auto; }
.mast-word > * + * { margin-left: var(--space-xs); }
.nav-l > * + * { margin-left: var(--space-lg); }
.nav-r > * + * { margin-left: var(--space-lg); }
@media (max-width: 60rem) { .mast { padding-left: var(--space-md); padding-right: var(--space-xs); } }
@media (max-width: 60rem) { .site-nav a:not(.btn) { padding-top: var(--space-sm); padding-bottom: var(--space-sm); } }
.filament { top: 0; right: 0; bottom: 0; left: 0; }
.hero-grid { padding-top: var(--space-2xl); padding-bottom: var(--space-3xl); }
.hero-facts > * + * { margin-left: var(--space-xl); }
.actions > * { margin-right: var(--space-sm); margin-bottom: var(--space-sm); }
@media (max-width: 60rem) { .hero-grid { padding-top: var(--space-3xl); padding-bottom: var(--space-2xl); } }
.fold { padding-top: var(--section-gap); padding-bottom: var(--section-gap-s); }
.demo-tabs > * + * { margin-left: var(--space-2xs); }
.demo-tab { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.demo-head > * + * { margin-left: var(--space-sm); }
.hl::before { top: 0.08em; right: -0.12em; bottom: 0.02em; left: -0.12em; }
.demo-progress > * + * { margin-left: var(--space-2xs); }
.demo-progress i::after { top: 0; right: 0; bottom: 0; left: 0; }
.stack { padding-top: var(--section-gap-s); padding-bottom: var(--section-gap); }
.acc > * + * { margin-left: var(--space-sm); }
.acc { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.ui-conf { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.ui mark { padding-left: var(--space-3xs); padding-right: var(--space-3xs); }
.note-app > * + * { margin-left: var(--space-xs); }
.task, .due { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.mail { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.more { padding-top: var(--section-gap-s); padding-bottom: var(--section-gap); }
.rows > div { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.band { padding-top: var(--section-gap-s); padding-bottom: var(--section-gap-s); }
.facts > div { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.faq-sec { padding-top: var(--section-gap); padding-bottom: var(--section-gap); }
.faq summary > * + * { margin-left: var(--space-md); }
.faq summary { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.close { padding-top: var(--section-gap-s); padding-bottom: var(--section-gap); }
.store-badges > * { margin-right: var(--space-xs); margin-bottom: var(--space-xs); }
.store-badge > * + * { margin-left: var(--space-xs); }
.store-badge { padding-left: var(--space-sm); padding-right: var(--space-md); }
.ad-slot { padding-left: var(--space-md); padding-right: var(--space-md); }
.site-footer { padding-top: var(--space-3xl); padding-bottom: var(--space-xl); }
.follow > * { margin-right: var(--space-xs); margin-bottom: var(--space-xs); }
.social > * + * { margin-left: var(--space-xs); }
.social { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.legal > * { margin-right: var(--space-lg); margin-bottom: var(--space-xs); }
.page-hero { padding-top: var(--space-4xl); padding-bottom: var(--space-2xl); }
.page-sec { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.panel-rows > div { padding-top: var(--space-md); padding-bottom: var(--space-md); }
@media (max-width: 60rem) { .panel-rows { padding-left: var(--space-lg); padding-right: var(--space-lg); } }
@media (max-width: 60rem) { .page-hero { padding-top: var(--space-3xl); padding-bottom: var(--space-xl); } }
.guide-card h3 > * + * { margin-left: var(--space-sm); }
}
@supports not (height: 1svh) {
.hero { min-height: 100vh; }
}
@supports not (overflow: clip) {
.hero { overflow: hidden; }
}