.hero--gooey{padding-bottom:12px}.hero--gooey .mark{color:var(--text)}.eyebrow,.section-kicker{color:var(--quiet);font:.66rem/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px}.hero--gooey h1{overflow-wrap:anywhere;max-width:650px;font-size:clamp(2.5rem,8vw,4.6rem);line-height:.96}.hero--gooey .subtitle{max-width:500px;font-size:.96rem;line-height:1.6}.section--first{margin-top:72px}.section-heading>div>h2{margin:0}.recipe-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.recipe-card{border:1px solid var(--line-soft);background:var(--surface);border-radius:18px;min-width:0;min-height:230px;overflow:hidden}.recipe-card--wide{grid-column:span 3;min-height:330px}.recipe-heading{z-index:8;justify-content:space-between;align-items:start;gap:14px;padding:16px 18px 0;display:flex;position:relative}.recipe-heading div{align-items:center;gap:8px;min-width:0;display:flex}.recipe-heading h3,.recipe-heading p{margin:0}.recipe-heading h3{font-size:.78rem;font-weight:580}.recipe-heading p{color:var(--quiet);font:.63rem/1.4 var(--font-mono);text-align:right}.framework-tag{border:1px solid var(--line);min-height:20px;color:var(--muted);font:.58rem var(--font-mono);border-radius:6px;align-items:center;padding:0 6px;display:inline-flex}.action-menu,.email-composer,.control-stage,.vue-action-menu,.vue-email{isolation:isolate;place-items:center;display:grid;position:relative}.action-menu{width:min(430px,100%);height:270px;margin:-4px auto 0}.liquid-action,.email-field,.email-submit,.fluid-switch,.fluid-slider,.fluid-step,.vue-action,.vue-email-field,.vue-email-submit{z-index:2;color:#171718;background:0 0;border:0;position:absolute}.liquid-action,.email-submit,.fluid-switch,.fluid-step,.vue-action,.vue-email-submit{cursor:pointer}.liquid-action,.vue-action{border-radius:15px;place-items:center;width:48px;height:48px;display:grid}.liquid-action svg,.vue-action svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px;width:18px;height:18px}.liquid-action--trigger,.vue-action--trigger{z-index:4;border-radius:20px;width:62px;height:62px}.liquid-action--trigger svg,.vue-action--trigger svg{transition:rotate .36s cubic-bezier(.2,.8,.2,1)}.liquid-action--trigger[aria-expanded=true] svg,.vue-action--trigger[aria-expanded=true] svg{rotate:45deg}.liquid-action:focus-visible,.email-submit:focus-visible,.fluid-switch:focus-visible,.fluid-step:focus-visible,.vue-action:focus-visible,.vue-email-submit:focus-visible{outline-offset:3px;outline:2px solid #a78bfa}.email-composer{width:min(410px,100%);height:230px;margin:10px auto 0}.email-field,.vue-email-field{border-radius:16px;align-items:center;width:250px;height:48px;padding:0 16px;display:flex}.email-field input,.vue-email-field input{color:#171718;background:0 0;border:0;outline:0;width:100%;min-width:0;font-size:.76rem}.email-field input::placeholder,.vue-email-field input::placeholder{color:#858589}.email-status,.vue-email-field span{opacity:0;color:#52525b;pointer-events:none;font-size:.67rem;position:absolute;left:16px}.email-composer[data-state=success] input,.vue-email-field:has(span:not(:empty)) input{opacity:0}.email-composer[data-state=success] .email-status,.vue-email-field span:not(:empty){opacity:1}.email-submit,.vue-email-submit{border-radius:16px;place-items:center;width:48px;height:48px;display:grid}.email-submit svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7px;width:18px;height:18px}.email-submit:disabled,.vue-email-submit:disabled{cursor:wait}.control-stage{width:100%;height:174px}.fluid-switch{border-radius:999px;width:108px;height:46px}.fluid-switch__thumb{background:#171718;border-radius:50%;width:32px;height:32px;transition:translate .38s cubic-bezier(.2,.8,.2,1);position:absolute;top:7px;left:8px}.fluid-switch>[data-switch-label]{font:.62rem var(--font-mono);position:absolute;top:50%;right:14px;translate:0 -50%}.fluid-switch[aria-checked=true] .fluid-switch__thumb{translate:60px}.fluid-switch[aria-checked=true]>[data-switch-label]{left:14px;right:auto}.fluid-slider{width:min(210px,100% - 24px);min-height:48px;font:.62rem var(--font-mono);border-radius:16px;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:0 13px;display:grid}.fluid-slider input{width:100%;min-width:0}.fluid-slider input[type=range],.playground-control input[type=range]{appearance:none;background:linear-gradient(to right, var(--accent) 0 var(--range-progress,50%), color-mix(in srgb, var(--quiet) 34%, transparent) var(--range-progress,50%) 100%);border-radius:999px;outline:0;height:4px}.fluid-slider input[type=range]{--accent:#171718}.fluid-slider input[type=range]::-webkit-slider-thumb{appearance:none;border:3px solid var(--surface);background:var(--accent);cursor:grab;border-radius:50%;width:15px;height:15px;box-shadow:0 1px 4px #00000038}.playground-control input[type=range]::-webkit-slider-thumb{appearance:none;border:3px solid var(--surface);background:var(--accent);cursor:grab;border-radius:50%;width:15px;height:15px;box-shadow:0 1px 4px #00000038}.fluid-slider input[type=range]::-moz-range-thumb{border:2px solid var(--surface);background:var(--accent);cursor:grab;border-radius:50%;width:11px;height:11px;box-shadow:0 1px 4px #00000038}.playground-control input[type=range]::-moz-range-thumb{border:2px solid var(--surface);background:var(--accent);cursor:grab;border-radius:50%;width:11px;height:11px;box-shadow:0 1px 4px #00000038}.fluid-slider input[type=range]:focus-visible,.playground-control input[type=range]:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.fluid-stepper output{color:var(--muted);font:.78rem var(--font-mono)}.fluid-step{border-radius:15px;width:46px;height:46px;font-size:1rem}.email-field,.email-submit,.fluid-switch,.fluid-slider,.fluid-step,.vue-email-field,.vue-email-submit,.vue-inline-switch,.vue-inline-step{box-shadow:inset 0 0 0 1px #1717181f}.liquid-playground{border:1px solid var(--line);background:var(--surface);border-radius:18px;grid-template-columns:264px minmax(0,1fr);display:grid;overflow:hidden}.playground-controls{border-right:1px solid var(--line-soft);align-content:start;display:grid}.playground-control{grid-template-columns:66px minmax(0,1fr) 42px;align-items:center;gap:10px;min-width:0;min-height:62px;padding:12px 16px;display:grid}.playground-control+.playground-control{border-top:1px solid var(--line-soft)}.playground-control>span,.playground-control output{color:var(--quiet);font:.64rem var(--font-mono)}.playground-control output{text-align:right}.playground-control input{width:100%;min-width:0;accent-color:var(--accent)}.playground-control--effect{grid-template-columns:1fr;gap:9px}.effect-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;display:grid}.effect-options button{border:1px solid var(--line);background:var(--surface-raised);min-width:0;min-height:32px;color:var(--muted);cursor:pointer;border-radius:9px;font-size:.65rem}.effect-options button[aria-selected=true]{border-color:color-mix(in srgb, var(--accent) 55%, var(--line));background:var(--accent-soft);color:var(--text)}.effect-options button:focus-visible,.lab-run:focus-visible,.lab-anchor:focus-visible,.lab-object:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.playground-stage{background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 46%), linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);background-size:auto,32px 32px,32px 32px;place-items:center;min-width:0;min-height:380px;display:grid;position:relative;overflow:hidden}.stage-meta{z-index:5;color:var(--quiet);font:.61rem var(--font-mono);justify-content:space-between;gap:12px;display:flex;position:absolute;top:14px;left:16px;right:16px}.lab-liquid-group{isolation:isolate;place-items:center;width:min(410px,100%);height:250px;display:grid;position:relative}.lab-anchor,.lab-object{z-index:2;color:#fff;cursor:pointer;background:0 0;border:0;position:absolute}.lab-anchor{border-radius:22px;place-items:center;width:66px;height:66px;display:grid}.lab-anchor span{border:2px solid #ffffffe0;border-radius:50%;width:12px;height:12px}.lab-object{border-radius:19px;width:108px;height:58px;font-size:.72rem;font-weight:580}.lab-run{z-index:7;border:1px solid var(--line);background:var(--surface-raised);min-height:36px;color:var(--text);cursor:pointer;border-radius:10px;align-items:center;gap:7px;padding:0 12px;font-size:.68rem;display:inline-flex;position:absolute;bottom:14px;right:14px}.lab-run svg{fill:currentColor;width:14px;height:14px}.api-strip{border:1px solid var(--line);background:var(--surface);border-top:0;border-radius:0 0 14px 14px;grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.api-strip div{gap:4px;min-width:0;padding:14px 16px;display:grid}.api-strip div+div{border-left:1px solid var(--line-soft)}.api-strip strong{font-size:.7rem;font-weight:580}.api-strip span{color:var(--quiet);font-size:.64rem;line-height:1.45}.code-block:has(+.api-strip){border-radius:14px 14px 0 0}.copy-button[data-copied=true]{border-color:color-mix(in srgb, var(--accent) 55%, var(--line));color:var(--accent)}.vue-recipes{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.vue-recipe{border:1px solid var(--line-soft);background:var(--surface);border-radius:18px;min-width:0;min-height:330px;overflow:hidden}.vue-recipe>header{align-items:center;gap:8px;padding:16px 18px 0;display:flex}.vue-recipe>header span{border:1px solid var(--line);color:var(--muted);font:.58rem var(--font-mono);border-radius:6px;padding:4px 6px}.vue-recipe>header strong{font-size:.76rem;font-weight:580}.vue-action-menu{width:100%;height:270px}.vue-action{font:.68rem var(--font-mono)}.vue-email{width:min(360px,100%);height:150px;margin:4px auto 0}.vue-email-field{width:220px}.vue-email-field span{display:block}.vue-inline-controls{grid-template-columns:minmax(0,1fr) 112px;gap:8px;width:calc(100% - 32px);margin:0 auto;display:grid}.vue-fluid-control{place-items:center;min-height:40px;display:grid;position:relative}.vue-fluid-stepper{width:112px}.vue-inline-switch{color:#52525b;cursor:pointer;background:0 0;border:0;border-radius:12px;justify-content:space-between;align-items:center;width:100%;min-height:40px;padding:0 12px;font-size:.68rem;display:flex;position:absolute}.vue-inline-switch span{color:#171718;font-family:var(--font-mono)}.vue-fluid-stepper output{color:var(--muted);font:.7rem var(--font-mono)}.vue-inline-step{color:#171718;cursor:pointer;background:0 0;border:0;border-radius:12px;width:38px;height:38px;position:absolute}.architecture-grid{border:1px solid var(--line);background:var(--surface);border-radius:18px;grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.architecture-grid article{min-width:0;padding:22px}.architecture-grid article+article{border-left:1px solid var(--line-soft)}.architecture-grid span{color:var(--quiet);font:.62rem var(--font-mono)}.architecture-grid h3{margin:26px 0 7px;font-size:.82rem;font-weight:580}.architecture-grid p{color:var(--muted);margin:0;font-size:.72rem;line-height:1.55}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width<=640px){.section--first{margin-top:52px}.section-heading--stack-mobile{align-items:flex-start}.recipe-grid,.vue-recipes,.architecture-grid,.api-strip,.liquid-playground{grid-template-columns:1fr}.playground-controls{border-right:0;border-bottom:1px solid var(--line-soft)}.playground-control--effect{grid-column:1/-1}.playground-stage{min-height:330px}.recipe-card--wide{grid-column:auto}.recipe-heading p{max-width:120px}.api-strip div+div,.architecture-grid article+article{border-top:1px solid var(--line-soft);border-left:0}.email-composer,.vue-email{scale:.88}}@media (width<=420px){.section-heading--stack-mobile{grid-template-columns:1fr;display:grid}.recipe-heading{padding-inline:14px}.recipe-heading p{display:none}.action-menu{scale:.92}.email-composer,.vue-email{scale:.78}.vue-inline-controls{grid-template-columns:1fr}.playground-control{grid-template-columns:62px minmax(0,1fr) 38px;padding-inline:13px}.lab-liquid-group{scale:.82}.stage-meta span:last-child{display:none}}@media (prefers-reduced-motion:reduce){.liquid-action--trigger svg,.vue-action--trigger svg,.fluid-switch__thumb{transition-duration:.001ms}}