:root {
    --ink: #172021;
    --muted: #66706b;
    --paper: #fbfaf6;
    --canvas: #f0f0eb;
    --line: #e6e5dd;
    --green: #164735;
    --green-soft: #eaf1eb;
    --amber-soft: #f8f6ee;
    --amber-line: #e6e0ce;
    color: var(--ink);
    background: var(--paper);
    font-family: "DM Sans", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body { min-width: 320px; margin: 0; }

a { color: inherit; }

code, pre, .eyebrow, .feature-plan, .visual-topline, .visual-label, .visual-files, .terminal-header, .terminal-label, .site-footer { font-family: "DM Mono", monospace; }

code { font-size: .9em; }

.page { overflow: hidden; }

.docs-page { overflow: visible; }

.api-reference { width: min(100% - 4rem, 1260px); margin: 2rem auto 0; }

.site-header, .hero, .publish-section, .features-section, .install-section, .site-footer { width: min(100% - 4rem, 1260px); margin-inline: auto; }

.site-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; min-height: 92px; border-bottom: 1px solid var(--line); }

.wordmark { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.18rem; font-weight: 700; letter-spacing: -.065em; text-decoration: none; white-space: nowrap; }

.brand-mark { width: 30px; height: 30px; color: var(--green); }

.site-header nav { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); }

.nav-link { font-size: .86rem; font-weight: 600; text-decoration: none; }

.site-header .nav-link[aria-current="page"] { color: var(--green); text-decoration: underline; text-underline-offset: .25em; }

.nav-link:hover, .text-link:hover, .site-footer a:hover { text-decoration: underline; text-underline-offset: .25em; }

.nav-cta { padding: .75rem 1rem; border: 1px solid var(--green); border-radius: 4px; color: var(--green); font-size: .86rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background 150ms ease, color 150ms ease; }

.nav-cta:hover { background: var(--green); color: white; }

.icon-arrow { display: inline-block; width: .9em; height: .9em; margin-left: .35rem; vertical-align: -.08em; }

.hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); min-height: 640px; padding-block: 6.5rem 7.5rem; }

.hero-copy { max-width: 700px; }

.hero .hero-copy { animation: hero-appear 600ms ease-out backwards; }

.eyebrow { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.5rem; color: var(--green); font-size: .72rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; }

.eyebrow-line { width: 31px; height: 1px; background: currentColor; }

h1, h2, h3, p { margin-top: 0; }

h1, h2, h3 { letter-spacing: -.065em; }

h1 { max-width: 720px; margin-bottom: 1.8rem; font-size: clamp(3.6rem, 6.4vw, 6.9rem); font-weight: 600; line-height: .99; }

h1 em { color: var(--green); font-style: normal; }

.hero-lede { max-width: 520px; color: #4d5852; font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.65; }

.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.75rem; margin-top: 2.35rem; }

.button-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: .9rem 1.25rem; border-radius: 4px; background: var(--green); color: white; font-size: .9rem; font-weight: 700; text-decoration: none; transition: background 150ms ease, transform 150ms ease; }

.button-primary:hover { background: #0f382a; transform: translateY(-2px); }

.text-link { color: var(--green); font-size: .9rem; font-weight: 700; text-decoration: none; }

.release-visual { position: relative; min-width: 0; isolation: isolate; }

.hero-sprout { position: absolute; top: -6.5rem; right: .6rem; width: 150px; height: 190px; padding: 0; border: 0; background: transparent; color: var(--green); cursor: pointer; transform: rotate(8deg); -webkit-tap-highlight-color: transparent; }

.hero-sprout svg { display: block; width: 100%; height: 100%; overflow: visible; }

.sprout-plant { transform-box: view-box; transform-origin: 50% 100%; }

.sprout-ray { transform-box: fill-box; transform-origin: center; }

.sprout-ray-left { --ray-x: -6px; --ray-y: -5px; }

.sprout-ray-top { --ray-x: -1px; --ray-y: -8px; }

.sprout-ray-right { --ray-x: 7px; --ray-y: -4px; }

.hero-sprout.is-shaking .sprout-plant { animation: sprout-shake 700ms ease-in-out; }

.hero-sprout.is-shaking .sprout-ray { animation: sprout-excitement 700ms ease-in-out; }

.release-sheet { position: relative; min-height: 470px; padding: 1.65rem 1.8rem 1.8rem; border: 1px solid #d3d9ca; background: #f7f7ed; box-shadow: 17px 17px 0 #e1e9dc; transform: rotate(1.3deg); transform-origin: 72px 0; transition: transform 250ms ease, box-shadow 250ms ease; animation: card-appear 700ms 120ms ease-out backwards; }

.release-sheet:hover { transform: rotate(2.2deg); box-shadow: 19px 19px 0 #e1e9dc; }

.release-sheet::before { position: absolute; top: -14px; left: 33px; width: 88px; height: 28px; background: #e5dcc2; content: ""; transform: rotate(-7deg); opacity: .8; }

.visual-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid #cbd5c4; color: #4b6b57; font-size: .62rem; line-height: 1.5; letter-spacing: .08em; }

.visual-status { display: inline-flex; align-items: center; gap: .4rem; text-transform: uppercase; }

.visual-status::before { width: 5px; height: 5px; border-radius: 50%; background: var(--green); content: ""; }

.visual-version { margin: 1.5rem 0 1.4rem; color: var(--green); font-size: clamp(4.6rem, 8.2vw, 7.3rem); font-weight: 700; line-height: 1; letter-spacing: -.08em; transform: rotate(-3deg); transform-origin: left center; }

.visual-label { margin: 0 0 .45rem; color: #4b6b57; font-size: .6rem; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; }

.visual-notes > p:last-child { margin: 0; color: #4d5852; font-size: .86rem; line-height: 1.6; }

.visual-files { margin: 1.6rem 0 1.4rem; padding: 0; border-top: 1px solid #cbd5c4; list-style: none; }

.visual-files li { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid #cbd5c4; color: var(--green); font-size: .73rem; line-height: 1.5; }

.visual-files li > span:first-child { min-width: 0; overflow-wrap: anywhere; }

.visual-file-size { flex: none; color: #607367; font-size: .65rem; }

.visual-install { padding: .9rem 1rem; border-left: 2px solid #9ab6a0; background: #eaf0e3; }

.visual-install code { display: block; color: var(--green); font-size: .68rem; line-height: 1.75; overflow-wrap: anywhere; }

@keyframes hero-appear {
    from { opacity: 0; transform: translateY(12px); }

    to { opacity: 1; transform: translateY(0); }
}

@keyframes card-appear {
    from { opacity: 0; transform: translateY(16px) rotate(2.5deg); }

    to { opacity: 1; transform: translateY(0) rotate(1.3deg); }
}

@keyframes sprout-shake {
    0%, 100% { transform: rotate(0); }

    18% { transform: rotate(-8deg); }

    36% { transform: rotate(7deg); }

    54% { transform: rotate(-5deg); }

    72% { transform: rotate(3deg); }

    88% { transform: rotate(-1deg); }
}

@keyframes sprout-excitement {
    0%, 50%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }

    25%, 70% { opacity: .6; transform: translate(var(--ray-x), var(--ray-y)) scale(1.15); }
}

.section-intro h2, .install-copy h2 { max-width: 460px; margin: 0; font-size: clamp(2.5rem, 3.8vw, 4rem); font-weight: 600; line-height: 1.08; }

.publish-section { padding-block: 5rem 5.5rem; border-top: 1px solid var(--line); }

.publish-copy h2 { max-width: 460px; margin-bottom: 1.4rem; font-size: clamp(2.5rem, 3.8vw, 4rem); font-weight: 600; line-height: 1.08; }

.publish-copy > p { margin-bottom: 0; color: var(--muted); line-height: 1.65; }

.publish-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3rem; border-top: 1px solid #9ab6a0; }

.publish-panel { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem 1rem 0; border-left: 1px solid var(--line); }

.publish-panel:first-child { padding-left: 0; border-left: 0; }

.publish-panel:last-child { padding-right: 0; }

.publish-label { margin: 0 0 1rem; color: var(--green); font-family: "DM Mono", monospace; font-size: .75rem; font-weight: 500; }

.publish-panel h3 { margin: 0; font-size: 1rem; font-weight: 600; }

.publish-panel pre { flex: 1; min-height: 0; margin: 1.5rem 0; padding: 1rem .75rem; overflow-x: auto; border: 1px solid var(--amber-line); border-radius: 4px; background: var(--amber-soft); color: var(--ink); font-size: .75rem; line-height: 1.85; }

.publish-panel pre:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.publish-panel .token.comment, .publish-panel .token.punctuation, .publish-panel .token.operator { color: #66706b; }

.publish-panel .token.keyword, .publish-panel .token.builtin, .publish-panel .token.function, .publish-panel .token.atrule, .publish-panel .token.key { color: var(--green); }

.publish-panel .token.string, .publish-panel .token.number, .publish-panel .token.boolean { color: #745e33; }

.publish-panel .token.variable { color: #79546d; }

.publish-panel .text-link { font-size: .85rem; }

.features-section { padding-block: 5rem 5.5rem; border-top: 1px solid var(--line); }

.features-section .section-intro > p { max-width: 680px; margin: 1.5rem 0 0; color: var(--muted); line-height: 1.65; }

.features-main { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); margin-top: 3rem; border-top: 1px solid #9ab6a0; }

.feature { padding: 1.5rem 2rem 0; border-left: 1px solid var(--line); }

.feature:first-child { padding-left: 0; border-left: 0; }

.feature:last-child { padding-right: 0; }

.feature-plan { margin-bottom: 1.6rem; color: var(--green); font-size: .68rem; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; }

.feature-plan a { text-underline-offset: .25em; }

.feature h3 { margin-bottom: .9rem; font-size: clamp(1.4rem, 2vw, 1.8rem); font-weight: 600; line-height: 1.15; }

.feature > p:not(.feature-plan) { max-width: 350px; margin-bottom: 1.4rem; color: var(--muted); font-size: .95rem; line-height: 1.65; }

.feature-license h3 { color: var(--green); font-size: clamp(1.8rem, 2.5vw, 2.4rem); }

.install-section { display: grid; grid-template-columns: minmax(240px, .76fr) minmax(0, 1.24fr); align-items: center; gap: clamp(2rem, 6vw, 7rem); padding-block: 5.4rem 6rem; border-top: 1px solid var(--line); }

.install-copy h2 { max-width: 370px; }

.install-copy > p { max-width: 380px; margin: 1.4rem 0 1.5rem; color: var(--muted); line-height: 1.6; }

.terminal { min-width: 0; border: 1px solid #173b2e; border-radius: 8px; background: #142b23; color: #eaf1eb; box-shadow: 12px 12px 0 var(--green-soft); }

.terminal-header { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.1rem; border-bottom: 1px solid #355548; color: #a7c0ac; font-size: .7rem; }

.terminal-dots { display: flex; gap: .35rem; }

.terminal-dots i { width: 7px; height: 7px; border: 1px solid #749380; border-radius: 50%; }

.terminal-body { padding: 1.8rem 1.5rem 2.1rem; }

.terminal-label { margin: 0 0 .8rem; color: #9ab6a0; font-size: .68rem; letter-spacing: .1em; }

.terminal-tabs { display: flex; gap: .35rem; margin-bottom: 1rem; }

.terminal-tabs button { min-height: 2rem; padding: .35rem .65rem; border: 1px solid #456253; border-radius: 3px; background: transparent; color: #b0c5b5; cursor: pointer; font: inherit; font-size: .72rem; }

.terminal-tabs button:hover, .terminal-tabs button.active { border-color: #94b69c; background: #31503d; color: white; }

.terminal-command { display: flex; align-items: flex-start; gap: .75rem; }

.terminal-command pre { flex: 1; min-width: 0; }

.terminal-command button { padding: .25rem .5rem; border: 1px solid #456253; border-radius: 3px; background: transparent; color: #b0c5b5; cursor: pointer; font: inherit; font-size: .7rem; }

.terminal-command button:hover { border-color: #94b69c; color: white; }

.next-label { margin-top: 1.9rem; }

.terminal pre { overflow-x: auto; margin: 0; font-size: .77rem; line-height: 1.9; }

.terminal code { font-size: inherit; white-space: pre; }

.prompt { color: #8bbd97; }

.terminal-walkthrough { margin-top: 1.9rem; padding-top: 1.4rem; border-top: 1px solid #355548; }

.terminal-project-form label { display: block; margin-bottom: .75rem; font-size: .9rem; }

.terminal-project-name { margin-bottom: 1rem; color: #b0c5b5; font-size: .8rem; line-height: 1.6; overflow-wrap: anywhere; }

.terminal-project-input { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; padding: .7rem .8rem; border: 1px solid #749380; border-radius: 3px; font-family: "DM Mono", monospace; }

.terminal-project-input:focus-within { border-color: #b0d2b6; }

.terminal-project-input input { width: 100%; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; color: #eaf1eb; font: inherit; font-size: 1rem; }

.terminal-run { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 40px; padding: .65rem .8rem; border: 1px solid #94b69c; border-radius: 3px; background: #31503d; color: white; cursor: pointer; font: inherit; font-size: .8rem; text-decoration: none; }

.terminal-run:hover { background: #3c624b; }

.terminal-hint { margin: .85rem 0 0; color: #b0c5b5; font-size: .75rem; line-height: 1.6; }

.terminal-step-title { margin-bottom: .75rem; color: #eaf1eb; font-family: "DM Mono", monospace; font-size: .9rem; }

.terminal-guidance { margin-bottom: 1.2rem; color: #b0c5b5; font-size: .8rem; line-height: 1.65; }

.walkthrough-command { align-items: center; padding: .7rem .8rem; border: 1px solid #456253; border-radius: 3px; }

.walkthrough-command button { min-height: 36px; }

.terminal-step-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; }

.terminal-secondary { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; padding: .5rem 0; border: 0; background: transparent; color: #b0c5b5; cursor: pointer; font: inherit; font-size: .75rem; text-decoration: underline; text-underline-offset: .2em; }

.terminal-secondary[aria-disabled="true"] { opacity: .5; cursor: default; }

.terminal-manual { margin-top: 1rem; color: #b0c5b5; font-size: .75rem; }

.terminal-manual summary { cursor: pointer; }

.terminal :focus-visible { outline-color: #b0d2b6; }

[x-cloak] { display: none !important; }

.footer-illustration { display: block; width: min(100% - 2.5rem, 320px); height: auto; margin: 0 auto 3rem; padding: 0; border: 0; background: transparent; color: var(--green); cursor: pointer; -webkit-tap-highlight-color: transparent; }

.footer-illustration svg { display: block; width: 100%; height: auto; overflow: visible; }

.watering-can { transform-box: view-box; transform-origin: 185px 68px; }

.watering-drops path { opacity: 0; }

.watering-ray { transform-box: fill-box; transform-origin: center; }

.watering-ray-top { --ray-x: 4px; --ray-y: -4px; }

.watering-ray-right { --ray-x: 5px; --ray-y: -1px; }

.watering-new-leaf { transform-box: view-box; transform-origin: 80px 125px; opacity: 0; transform: scale(0); }

.footer-illustration.is-grown .watering-new-leaf { opacity: 1; transform: scale(1); }

.footer-illustration.is-watering .watering-can { animation: watering-can-pour 1800ms ease-in-out; }

.footer-illustration.is-watering .watering-ray { animation: watering-can-excitement 1800ms ease-in-out; }

.footer-illustration.is-watering .watering-drops path { animation: watering-drip 850ms 250ms ease-in both; }

.footer-illustration.is-watering .watering-drops path:nth-child(2n) { animation-delay: 380ms; }

.footer-illustration.is-watering .watering-drops path:nth-child(3n) { animation-delay: 510ms; }

.footer-illustration.is-watering .watering-new-leaf { animation: watering-leaf-grow 850ms 800ms ease-out both; }

.footer-illustration.is-nudging .watering-can { animation: watering-can-nudge 600ms ease-in-out; }

.footer-illustration.is-nudging .watering-ray { animation: watering-can-excitement 600ms ease-in-out; }

.footer-illustration.is-nudging .watering-new-leaf { animation: watering-leaf-wiggle 600ms ease-in-out; }

@keyframes watering-can-pour {
    0%, 100% { transform: rotate(0); }

    20%, 55% { transform: rotate(-8deg); }

    78% { transform: rotate(2deg); }
}

@keyframes watering-drip {
    0% { opacity: 0; transform: translate(4px, -8px); }

    20% { opacity: 1; }

    65% { opacity: 0; transform: translate(-8px, 16px); }

    100% { opacity: 0; transform: translate(-8px, 16px); }
}

@keyframes watering-leaf-grow {
    0% { opacity: 0; transform: scale(0) rotate(18deg); }

    25% { opacity: 1; }

    75% { transform: scale(1.08) rotate(-4deg); }

    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes watering-can-nudge {
    0%, 100% { transform: rotate(0); }

    30% { transform: rotate(-3deg); }

    65% { transform: rotate(2deg); }
}

@keyframes watering-can-excitement {
    0%, 100% { opacity: 1; transform: translate(0, 0) scale(1); }

    25%, 55% { opacity: .65; transform: translate(var(--ray-x), var(--ray-y)) scale(1.1); }
}

@keyframes watering-leaf-wiggle {
    0%, 100% { transform: rotate(0); }

    30% { transform: rotate(5deg); }

    65% { transform: rotate(-3deg); }
}

.site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.7rem 2.3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; }

.site-footer > span:first-child { color: var(--green); }

.site-footer a { color: var(--green); text-decoration: none; }

.site-footer nav { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; }

:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

.docs-subnav { display: flex; gap: 1.75rem; width: min(100% - 4rem, 1260px); margin-inline: auto; padding-top: 1.5rem; border-bottom: 1px solid var(--line); }

.docs-subnav-link { padding-bottom: .85rem; color: var(--muted); font-size: .85rem; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }

.docs-subnav-link:hover { color: var(--green); }

.docs-subnav-link.active { color: var(--green); border-bottom-color: var(--green); }

.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 740px); grid-template-areas: "sidebar intro" "sidebar content"; column-gap: clamp(3rem, 7vw, 8rem); width: min(100% - 4rem, 1260px); margin-inline: auto; padding-block: 4.5rem 7rem; }

.docs-intro { grid-area: intro; min-width: 0; padding-bottom: 3.5rem; }

.docs-sidebar { grid-area: sidebar; }

.docs-layout > article { grid-area: content; }

.docs-sidebar nav { position: sticky; top: 2rem; display: grid; align-content: start; max-height: calc(100vh - 4rem); padding-left: 1.1rem; border-left: 1px solid #d3d9ca; overflow-y: auto; }

.docs-nav-title { margin: 0 0 .7rem; color: var(--green); font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .12em; }

.docs-nav-group { margin-top: 1.65rem; }

.docs-sidebar a { padding: .28rem 0; color: var(--muted); font-size: .83rem; line-height: 1.4; text-decoration: none; }

.docs-sidebar a:hover { color: var(--green); text-decoration: underline; text-underline-offset: .25em; }

.docs-content { min-width: 0; }

.docs-content section { scroll-margin-top: 2rem; }

.docs-intro h1 { margin-bottom: 1.3rem; font-size: clamp(3.5rem, 6vw, 5.4rem); }

.docs-content .docs-lede { color: #4d5852; font-size: 1.15rem; line-height: 1.65; }

.docs-content p { max-width: 670px; line-height: 1.7; }

.docs-content p:not(.eyebrow) { color: var(--muted); }

.docs-content p a { color: var(--green); text-underline-offset: .2em; }

.docs-content p code { color: var(--green); }

.docs-content pre { overflow-x: auto; margin: 1.3rem 0 1.4rem; padding: 1.2rem 1.4rem; border: 1px solid #d8dfd1; border-radius: 4px; background: #f6f7f1; color: var(--green); font-size: .82rem; line-height: 1.8; }

.docs-intro pre { border-color: #d3d9ca; background: #f7f7ed; box-shadow: 6px 6px 0 #e1e9dc; }

.docs-content pre code { font-size: inherit; }

.docs-content .terminal { margin: 1.3rem 0 1.4rem; }

.docs-content .terminal pre { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; }

.docs-section { padding-block: 2.3rem 2.5rem; border-top: 1px solid var(--line); }

.docs-section h2 { margin-bottom: .85rem; font-size: clamp(1.65rem, 2.5vw, 2.1rem); font-weight: 600; }

.docs-section p:last-child, .docs-intro p:last-child { margin-bottom: 0; }

.policy-layout { width: min(100% - 4rem, 760px); margin-inline: auto; padding-block: 4.5rem 7rem; }

.policy-layout h1 { margin-bottom: 1rem; font-size: clamp(3.5rem, 6vw, 5.4rem); }

.policy-content p, .policy-content li { color: var(--muted); line-height: 1.7; }

.policy-content .eyebrow { color: var(--green); }

.policy-content strong { color: var(--ink); }

.policy-content a { color: var(--green); text-underline-offset: .2em; }

.policy-updated { margin-bottom: 2rem; font-size: .9rem; }

.policy-content section { padding-block: 2.3rem 2.5rem; border-top: 1px solid var(--line); }

.policy-content section h2 { margin-bottom: .85rem; font-size: clamp(1.65rem, 2.5vw, 2.1rem); font-weight: 600; }

.policy-content section p:last-child, .policy-content section ul:last-child { margin-bottom: 0; }

.policy-content ul { padding-left: 1.5rem; }

.policy-content li + li { margin-top: .5rem; }

.pricing-layout { width: min(100% - 4rem, 1100px); margin-inline: auto; padding-block: 5rem 7rem; }

.pricing-heading { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 3.6rem; }

.pricing-intro { max-width: 760px; }

.pricing-gloves { flex: 0 0 auto; width: 150px; margin-right: 1rem; padding: 0; border: 0; background: transparent; color: var(--green); cursor: pointer; -webkit-tap-highlight-color: transparent; }

.pricing-gloves svg { display: block; width: 100%; height: auto; overflow: visible; }

.glove { transform-box: view-box; }

.glove-left { --glove-x: -10px; --glove-tilt: -5deg; transform-origin: 50px 155px; }

.glove-right { --glove-x: 10px; --glove-tilt: 5deg; transform-origin: 140px 155px; }

.glove-ray-left { --ray-x: -7px; --ray-y: -5px; }

.glove-ray-top { --ray-x: 1px; --ray-y: -8px; }

.glove-ray-right { --ray-x: 8px; --ray-y: -2px; }

.pricing-gloves.is-stretching .glove { animation: gloves-stretch 650ms ease-in-out; }

.pricing-gloves.is-stretching .glove-ray { animation: gloves-rays 650ms ease-in-out; }

@keyframes gloves-stretch {
    0%, 100% { transform: translateX(0) rotate(0); }

    40% { transform: translateX(var(--glove-x)) rotate(var(--glove-tilt)); }
}

@keyframes gloves-rays {
    0%, 100% { transform: translate(0, 0); opacity: 1; }

    40% { transform: translate(var(--ray-x), var(--ray-y)); opacity: .55; }
}

.pricing-intro h1 { margin-bottom: 1.5rem; font-size: clamp(3.5rem, 6vw, 5.8rem); }

.pricing-intro > p:last-child { max-width: 590px; color: #4d5852; font-size: 1.12rem; line-height: 1.65; }

.pricing-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }

.pricing-card { display: flex; flex-direction: column; min-width: 0; padding: 2.2rem; border: 1px solid var(--line); background: #fffefa; }

.pricing-card-plus { border-color: #d3d9ca; background: #f7f7ed; box-shadow: 12px 12px 0 #e1e9dc; }

.pricing-card-top { display: flex; min-height: 14.5rem; flex-direction: column; }

.pricing-kicker { margin-bottom: 1.2rem; color: var(--green); font-family: "DM Mono", monospace; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }

.pricing-card h2 { margin-bottom: .5rem; color: var(--green); font-size: 2.3rem; font-weight: 600; }

.pricing-price { margin-bottom: 1.4rem; color: var(--green); font-size: clamp(3.2rem, 5vw, 4rem); font-weight: 600; letter-spacing: -.075em; line-height: 1; }

.pricing-price span { color: var(--muted); font-size: .9rem; font-weight: 400; letter-spacing: 0; }

.pricing-annual { margin: -1rem 0 1rem; color: var(--muted); font-size: .9rem; }

.pricing-annual strong { color: var(--green); font-weight: 600; }

.pricing-card-top > p:last-child { margin-top: auto; margin-bottom: 0; color: var(--muted); line-height: 1.6; }

.pricing-card ul { margin: 1.8rem 0 2rem; padding: 0; border-top: 1px solid #cbd8cc; list-style: none; }

.pricing-card li { padding: .85rem 0; border-bottom: 1px solid #cbd8cc; color: #4d5852; }

.pricing-card li strong { color: var(--ink); }

.pricing-card .button-primary { align-self: flex-start; margin-top: auto; }

.pricing-card:not(.pricing-card-plus) .button-primary { border: 1px solid var(--green); background: transparent; color: var(--green); }

.pricing-card:not(.pricing-card-plus) .button-primary:hover { background: var(--green-soft); }

.pricing-contact { margin-top: 1.5rem; color: var(--muted); }

.pricing-notes { max-width: 680px; margin-top: 1.5rem; color: var(--muted); }

.pricing-notes > p { margin-bottom: .5rem; line-height: 1.6; }

.pricing-notes > p:last-child { margin-bottom: 0; font-size: .88rem; }

@media (max-width: 1320px) {
    .publish-examples { grid-template-columns: 1fr; }

    .publish-panel, .publish-panel:first-child, .publish-panel:last-child { padding: 1.5rem 0 2rem; border-left: 0; }

    .publish-panel + .publish-panel { border-top: 1px solid var(--line); }

    .publish-panel:last-child { padding-bottom: 0; }
}

@media (max-width: 1000px) {
    .hero { grid-template-columns: 1fr; gap: 4rem; padding-block: 5rem; }

    .release-visual { width: min(100% - 18px, 600px); justify-self: center; }

    .hero-sprout { top: -3.5rem; width: 120px; height: 152px; }

    .install-section { grid-template-columns: 1fr; gap: 3rem; }

    .docs-layout { grid-template-columns: 180px minmax(0, 1fr); gap: 3rem; }
}

@media (max-width: 800px) {
    .site-footer { flex-direction: column; align-items: flex-start; gap: .65rem; }

    .site-footer nav { width: 100%; gap: 1.5rem; margin-top: .6rem; padding-top: 1rem; border-top: 1px solid var(--line); }

    .pricing-heading { position: relative; display: block; }

    .pricing-intro .eyebrow { padding-right: 90px; }

    .pricing-gloves { position: absolute; top: -3rem; right: 0; width: 80px; margin-right: 0; }

    .pricing-cards { grid-template-columns: 1fr; }

    .pricing-card-top { min-height: 0; }

    .pricing-card-top > p:last-child { margin-top: 0; }
}

@media (max-width: 650px) {
    .site-header, .hero, .publish-section, .features-section, .install-section, .site-footer, .docs-subnav, .docs-layout, .api-reference, .pricing-layout { width: min(100% - 2.5rem, 1260px); }

    .policy-layout { width: min(100% - 2.5rem, 760px); padding-block: 3.5rem 5rem; }

    .pricing-layout { padding-block: 4rem 5rem; }

    .pricing-card { padding: 1.6rem; }

    .site-header { min-height: 75px; }

    .site-header nav { gap: .7rem; }

    .site-header .nav-link { display: none; }

    .site-header .docs-link { display: inline; }

    .site-header .pricing-link { display: inline; }

    .nav-cta { padding: .65rem .75rem; }

    .hero { padding-block: 4.5rem 5rem; }

    h1 { font-size: clamp(3.2rem, 13vw, 5rem); }

    .release-sheet { min-height: 0; padding: 1.4rem; }

    .visual-topline { gap: .5rem; font-size: .55rem; letter-spacing: .03em; }

    .visual-version { font-size: clamp(3.9rem, 16vw, 6.5rem); }

    .publish-section { padding-block: 4rem; }

    .publish-panel pre { font-size: .72rem; }

    .features-section { padding-block: 4rem; }

    .features-main { grid-template-columns: 1fr; margin-top: 2rem; }

    .feature, .feature:first-child, .feature:last-child { padding: 1.5rem 0 2rem; border-left: 0; }

    .feature + .feature { border-top: 1px solid var(--line); }

    .feature:last-child { padding-bottom: 0; }

    .feature-plan { margin-bottom: 1rem; }

    .feature > p:not(.feature-plan) { max-width: 420px; }

    .install-section { padding-block: 4rem 5rem; }

    .footer-illustration { margin-bottom: 2rem; }

    .terminal-body { padding: 1.4rem 1rem 1.6rem; }

    .terminal pre { font-size: .7rem; }

    .docs-layout { grid-template-columns: 1fr; grid-template-areas: "intro" "sidebar" "content"; row-gap: 3rem; padding-block: 3.5rem 5rem; }

    .docs-sidebar { padding: 1.2rem; border: 1px solid var(--line); background: var(--paper); }

    .docs-sidebar nav { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; max-height: none; padding-left: 0; border-left: 0; }

    .docs-nav-title { grid-column: 1 / -1; }

    .docs-nav-group { margin-top: 1.2rem; }

    .docs-intro { padding-bottom: 0; }

    .docs-content pre { padding: 1rem; font-size: .75rem; }
}

@media (max-width: 480px) {
    .site-header { flex-wrap: wrap; justify-content: center; gap: .7rem; padding-block: 1rem; }

    .site-header nav { justify-content: space-between; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .nav-cta, .button-primary { transition: none; }

    .hero .hero-copy, .release-sheet, .hero-sprout.is-shaking .sprout-plant, .hero-sprout.is-shaking .sprout-ray { animation: none; }

    .footer-illustration .watering-can, .footer-illustration .watering-drops path, .footer-illustration .watering-new-leaf, .footer-illustration .watering-ray { animation: none; }

    .pricing-gloves .glove, .pricing-gloves .glove-ray { animation: none; }

    .release-sheet { transition: none; }

    .release-sheet:hover { transform: rotate(1.3deg); box-shadow: 17px 17px 0 #e1e9dc; }
}