.flow-page{background:radial-gradient(1200px 600px at 75% -10%,#ff7a1a1a,#0000 60%),#111114}.flow-page ::selection{background:#ff7a1a59}.flow-glow{pointer-events:none;z-index:-1;filter:blur(10px);background:radial-gradient(520px 320px at 72% 34%,#ff7a1a38,#0000 70%),radial-gradient(400px 260px at 20% 10%,#ffa25c14,#0000 70%);height:900px;animation:9s ease-in-out infinite flow-breathe;position:absolute;inset:-20% -10% auto}.flow-glow-low{height:700px;inset:auto -10% -30%}@keyframes flow-breathe{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}.kw-line{animation:.9s cubic-bezier(.16,1,.3,1) both flow-rise}@keyframes flow-rise{0%{opacity:0;filter:blur(6px);transform:translateY(.35em)}to{opacity:1;filter:none;transform:none}}.flow-kbd{font-size:.86em;font-family:var(--font-geist-mono), ui-monospace, monospace;color:#f4f4f5;background:#ffffff0a;border:1px solid #ffffff24;border-bottom-width:2px;border-radius:6px;margin:0 1px;padding:1px 7px;display:inline-block}.flow-reel{opacity:.55;transform-origin:50%;will-change:transform;color:#f2f2f0;background:currentColor}.flow-reel-2{opacity:1;background:#ff7a1a}.flow-reels.is-think .flow-reel{animation:1s cubic-bezier(.2,.85,.25,1) infinite flow-reel}.flow-reels.is-think .flow-reel-1{animation-delay:.12s}.flow-reels.is-think .flow-reel-3{animation-delay:.2s}@keyframes flow-reel{0%,to{transform:scaleY(1)}45%{transform:scaleY(.42)}}.flow-pill{opacity:0;pointer-events:none;transition:opacity .18s,transform .3s cubic-bezier(.2,.9,.3,1.25);transform:translate(-50%,10px)scale(.92)}.flow-pill.is-open{opacity:1;transform:translate(-50%)scale(1)}.flow-caret{animation:1.05s step-end infinite flow-blink}@keyframes flow-blink{50%{opacity:0}}.flow-land{animation:.5s cubic-bezier(.16,1,.3,1) flow-land}@keyframes flow-land{0%{opacity:0;filter:blur(4px);transform:translateY(4px)}to{opacity:1;filter:none;transform:none}}.flow-note{animation:.35s cubic-bezier(.2,.9,.3,1.25) both flow-pop}@keyframes flow-pop{0%{opacity:0;transform:translateY(6px)scale(.92)}to{opacity:1;transform:none}}.flow-key{-webkit-user-select:none;user-select:none;touch-action:none;color:#f4f4f5;width:64px;height:60px;font-family:var(--font-geist-text), system-ui, sans-serif;cursor:pointer;background:linear-gradient(#2a2a30,#212126);border-radius:11px;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:7px 9px;line-height:1;transition:transform 80ms,box-shadow 80ms,background .2s;display:inline-flex;box-shadow:inset 0 1px #ffffff17,0 4px #0b0b0d,0 8px 18px #00000073}.flow-key:hover{background:linear-gradient(#303037,#25252b)}.flow-key:focus-visible{outline-offset:3px;outline:2px solid #ff7a1a}.flow-key.is-down{transform:translateY(3px);box-shadow:inset 0 1px #ffffff0f,0 1px #0b0b0d,0 0 0 1px #ff7a1a99,0 0 26px #ff7a1a59}.flow-key-demo{cursor:default}.flow-key-demo.is-dictate{animation:2.8s ease-in-out infinite key-hold}.flow-key-demo.is-handsfree{animation:2.8s ease-in-out infinite key-double}.flow-key-demo.is-write{animation:2.8s ease-in-out infinite key-tap}@keyframes key-hold{0%,12%,78%,to{transform:none;box-shadow:inset 0 1px #ffffff17,0 4px #0b0b0d,0 8px 18px #00000073}16%,74%{transform:translateY(3px);box-shadow:inset 0 1px #ffffff0f,0 1px #0b0b0d,0 0 0 1px #ff7a1a99,0 0 26px #ff7a1a59}}@keyframes key-double{0%,10%,18%,26%,34%,to{transform:none;box-shadow:inset 0 1px #ffffff17,0 4px #0b0b0d,0 8px 18px #00000073}13%,15%,29%,31%{transform:translateY(3px);box-shadow:inset 0 1px #ffffff0f,0 1px #0b0b0d,0 0 0 1px #ff7a1a99,0 0 26px #ff7a1a59}}@keyframes key-tap{0%,14%,24%,to{transform:none;box-shadow:inset 0 1px #ffffff17,0 4px #0b0b0d,0 8px 18px #00000073}17%,21%{transform:translateY(3px);box-shadow:inset 0 1px #ffffff0f,0 1px #0b0b0d,0 0 0 1px #ff7a1a99,0 0 26px #ff7a1a59}}.flow-marquee{-webkit-mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000);mask-image:linear-gradient(90deg,#0000,#000 12% 88%,#0000)}.flow-marquee-track{animation:38s linear infinite flow-marquee}@keyframes flow-marquee{to{transform:translate(-50%)}}.flow-swap{animation:.45s cubic-bezier(.16,1,.3,1) flow-land}.flow-toast{animation:2.2s cubic-bezier(.2,.9,.3,1.2) both flow-toast}@keyframes flow-toast{0%{opacity:0;transform:translateY(10px)scale(.94)}12%,82%{opacity:1;transform:none}to{opacity:0;transform:translateY(-6px)scale(.98)}}@media (prefers-reduced-motion:reduce){.flow-glow,.flow-marquee-track,.flow-key-demo,.flow-reels.is-think .flow-reel,.flow-toast,.kw-line{animation:none!important}}