:root{color-scheme:dark;font-family:Inter,system-ui,sans-serif;--finger-url: url(/middle-finger.png);--bg: #111014;--surface: rgba(255, 255, 255, .04);--border: rgba(255, 255, 255, .08);--text: #f5f5f7;--muted: #b8b8c0;--accent: #7c5cff;--accent-soft: #b794ff;--cta-start: #7c5cff;--cta-end: #5b8dff}*{box-sizing:border-box}html{scroll-behavior:smooth}[id]{scroll-margin-top:88px}body{margin:0;min-height:100vh;color:var(--text);background:radial-gradient(circle at 20% 0%,rgba(124,92,255,.22),transparent 42%),radial-gradient(circle at 80% 10%,rgba(91,141,255,.12),transparent 38%),var(--bg);animation:drift 18s ease-in-out infinite alternate;position:relative;overflow-x:hidden}.bg-watermark{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;background:var(--finger-url) calc(100% - 8vw) 58% / min(28vw,220px) no-repeat,var(--finger-url) 4vw 78% / min(18vw,140px) no-repeat;opacity:.045;filter:blur(.2px)}.page{position:relative;z-index:1}.layout{display:grid;grid-template-columns:minmax(0,1fr) min(320px,30vw);gap:28px;width:min(1180px,calc(100% - 40px));margin:0 auto;padding:88px 0 72px;align-items:start}.layout-main{min-width:0}.config-rail{position:sticky;top:84px;align-self:start;z-index:10;max-height:calc(100vh - 40px);overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(124,92,255,.4) transparent}.config-rail::-webkit-scrollbar{width:6px}.config-rail::-webkit-scrollbar-thumb{border-radius:999px;background:#7c5cff59}@keyframes drift{0%{background-position:0% 0%,100% 0%,0 0}to{background-position:8% 4%,92% 6%,0 0}}@media(prefers-reduced-motion:reduce){body,.example-card,.cta.is-nudging{animation:none}}.hero{margin:0 0 40px}.hero-top{margin-bottom:28px}h1{margin:0 0 14px;font-size:clamp(2rem,5vw,3.1rem);line-height:1.1;letter-spacing:-.02em;text-align:left}.hero-title-accent{display:block;color:var(--accent-soft)}.lede{margin:0;max-width:54ch;color:var(--muted);font-size:1.05rem;line-height:1.55;text-align:left}.hero-try-strip{display:flex;align-items:center;gap:14px;margin-top:22px;padding:12px 16px;border-left:3px solid var(--accent);border-radius:0 12px 12px 0;background:#ffffff08}.hero-try-strip-label{flex-shrink:0;padding:4px 10px;border-radius:8px;background:#7c5cff33;color:var(--accent-soft);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.hero-try-strip p{margin:0;color:#c7c7d1;font-size:.92rem;line-height:1.45}.demo-callout{margin:0 0 22px;max-width:54ch;padding:14px 18px;border:1px solid rgba(124,92,255,.35);border-radius:14px;background:linear-gradient(135deg,#7c5cff29,#5b8dff14);color:#ece8ff;font-size:1rem;font-weight:500;line-height:1.5}.cursor-flow-section{margin-top:0;padding:22px 24px 20px;border:1px solid rgba(124,92,255,.28);border-radius:20px;background:radial-gradient(circle at 50% 0%,rgba(124,92,255,.14),transparent 55%),#ffffff0a;box-shadow:0 20px 60px #00000038}.cursor-flow-header{margin-bottom:22px}.cursor-flow-title{margin:0 0 4px;color:#f0ecff;font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left}.cursor-flow-subtitle{margin:0;color:#9494a3;font-size:.88rem;text-align:left}.cursor-flow-track{display:grid;grid-template-columns:1fr auto 1.15fr auto 1fr;align-items:start;gap:8px}.cursor-flow-connector{display:flex;align-items:center;padding-top:38px;min-width:32px}.cursor-flow-connector-line{flex:1;height:2px;background:linear-gradient(90deg,#7c5cff26,#7c5cff8c)}.cursor-flow-connector-head{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid rgba(183,148,255,.75)}.cursor-flow-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px;border-radius:16px;text-align:center;transition:background .22s ease,box-shadow .22s ease,transform .22s ease}.cursor-flow-step-num{position:absolute;top:6px;left:10px;color:#6f6f7d;font-size:.62rem;font-weight:700;letter-spacing:.06em}.cursor-flow-step-featured{padding:16px 14px 14px;background:#7c5cff14;border:1px solid rgba(124,92,255,.28);box-shadow:inset 0 1px #ffffff0a}.cursor-flow-step-warming{background:#7c5cff0f}.cursor-flow-step-active{border-color:#7c5cff80;box-shadow:0 0 0 1px #7c5cff33,0 12px 32px #7c5cff26}.cursor-flow-step-lit{background:#7c5cff24;border:1px solid rgba(124,92,255,.45);box-shadow:0 0 24px #7c5cff33;transform:scale(1.02)}.cursor-flow-icon-wrap{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;background:#ffffff0f;border:1px solid var(--border);box-shadow:inset 0 1px #ffffff0f}.cursor-flow-icon-wrap-finger{background:#7c5cff1f;border-color:#7c5cff59}.cursor-flow-pointer-emoji{display:block;font-size:1.75rem;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))}.cursor-flow-label{color:#ececf1;font-size:.82rem;font-weight:700}.cursor-flow-caption{color:#9494a3;font-size:.72rem;line-height:1.35;max-width:15ch}.cursor-flow-button{display:inline-flex;align-items:center;justify-content:center;min-width:112px;padding:13px 20px;border-radius:12px;background:linear-gradient(135deg,var(--cta-start),var(--cta-end));color:#fff;font-size:.92rem;font-weight:700;box-shadow:0 8px 24px #7c5cff52;cursor:pointer;border:none;font:inherit}.cursor-flow .cta.cursor-flow-button{min-width:112px;padding:13px 20px;font-size:.92rem;border-radius:12px}.cursor-flow-status{margin:18px 0 0;padding:12px 14px;border-radius:12px;background:#00000038;border:1px solid rgba(255,255,255,.06);color:#c7c7d1;font-size:.84rem;line-height:1.45;text-align:left}.cursor-flow-finger{image-rendering:pixelated;filter:drop-shadow(0 0 12px rgba(124,92,255,.45))}.config-panel-inner{position:relative;overflow:hidden;padding:0;border:1px solid rgba(124,92,255,.32);border-radius:22px;background:linear-gradient(165deg,#161220f5,#0c0b12eb);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 24px 64px #0000006b,0 0 0 1px #ffffff0a inset}.config-panel-glow{position:absolute;inset:-40% -20% auto;height:180px;background:radial-gradient(circle,rgba(124,92,255,.22),transparent 70%);pointer-events:none}.config-panel-inner:after{content:"";position:absolute;right:-12px;bottom:-16px;width:72px;height:72px;background:var(--finger-url) center / contain no-repeat;opacity:.06;pointer-events:none;image-rendering:pixelated}.config-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 0}.config-title{margin:0 0 6px;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}.config-live-badge{flex-shrink:0;padding:4px 10px;border-radius:999px;background:#34d39924;border:1px solid rgba(52,211,153,.35);color:#6ee7b7;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.config-subtitle{margin:0;color:#9494a3;font-size:.84rem;line-height:1.45;max-width:24ch}.config-fields{display:grid;gap:4px;padding:18px 22px}.field{display:grid;gap:10px;margin:0;padding:14px 0;border:none;border-bottom:1px solid rgba(255,255,255,.06)}.field:last-child{border-bottom:none;padding-bottom:0}.field-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.field-label{color:#d4d4de;font-size:.84rem;font-weight:500}.field-value{flex-shrink:0;padding:3px 10px;border-radius:999px;background:#7c5cff29;border:1px solid rgba(124,92,255,.28);color:var(--accent-soft);font-size:.75rem;font-weight:700;font-variant-numeric:tabular-nums}.field input[type=range],.range-input{width:100%;height:6px;margin:2px 0;accent-color:var(--accent);cursor:pointer}.range-hints{display:flex;justify-content:space-between;color:#6f6f7d;font-size:.68rem}.text-input{width:100%;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:#00000047;color:var(--text);font:inherit;font-size:.88rem;line-height:1.45;padding:11px 12px;resize:vertical;min-height:52px;transition:border-color .16s ease,box-shadow .16s ease}.text-input:focus{outline:none;border-color:#7c5cff8c;box-shadow:0 0 0 3px #7c5cff24}.text-area{font-family:inherit}.popover-toggle{margin-bottom:0}.toggle-track{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:999px;background:#00000052;border:1px solid rgba(255,255,255,.06)}.toggle-group{display:flex;gap:8px}.toggle{border:none;border-radius:999px;background:transparent;color:#a8a8b6;cursor:pointer;font:inherit;font-size:.78rem;font-weight:600;padding:9px 10px;transition:background .16s ease,color .16s ease,box-shadow .16s ease}.toggle:hover:not(.active){color:#ddd;background:#ffffff0a}.toggle.active{background:linear-gradient(135deg,var(--cta-start),var(--cta-end));color:#fff;box-shadow:0 4px 16px #7c5cff59}.config-preview{margin:0 14px 14px;padding:14px 16px;border-radius:16px;background:#7c5cff1a;border:1px solid rgba(124,92,255,.22)}.config-preview-label{margin:0 0 10px;color:#b794ff;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.config-preview-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.config-stat{display:flex;flex-direction:column;align-items:center;gap:2px;color:#9494a3;font-size:.68rem;text-align:center;line-height:1.2}.config-stat strong{color:#f0ecff;font-size:1.05rem;font-weight:700;font-variant-numeric:tabular-nums}.preview-chip{margin-top:4px;padding:8px 12px;border-radius:999px;background:#7c5cff24;color:var(--accent-soft);font-size:.78rem;text-align:center}.examples{display:grid;gap:28px;margin-bottom:8px}.examples-intro{margin-bottom:4px}.examples-intro h2{margin:0 0 6px;font-size:1.35rem;letter-spacing:-.01em;text-align:left}.examples-intro p{margin:0;color:#9494a3;font-size:.95rem;text-align:left}.example-group{display:grid;gap:12px}.example-group-featured{padding:16px;margin:0 -16px;border-radius:22px;background:#7c5cff0f;border:1px solid rgba(124,92,255,.18)}.example-group-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.example-group-header h3{margin:0;font-size:.95rem;font-weight:600;color:#d4d4de;text-align:left}.scenario-tag{color:#9494a3;font-weight:500;font-size:.88rem}.badge-react{background:#61dafb29;color:#61dafb}.example-card{display:grid;gap:16px;animation:rise .56s ease both}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.card{border:1px solid var(--border);border-radius:20px;background:var(--surface);transition:transform .18s ease,box-shadow .18s ease}.example-card:hover .card{transform:translateY(-2px);box-shadow:0 12px 36px #0000002e}.card{padding:28px}.card-header{display:flex;align-items:center;justify-content:flex-start;gap:12px;margin-bottom:10px}.card-title{margin:0 0 10px;font-size:1.2rem;font-weight:700;text-align:left}.card-copy{margin:0 0 20px;color:#c7c7d1;line-height:1.5;text-align:left}.demo-action{display:flex;flex-direction:column;align-items:center;gap:10px;padding:4px 0 2px}.demo-action-label{margin:0;color:var(--accent-soft);font-size:.88rem;font-weight:600;letter-spacing:.01em;text-align:center;max-width:36ch;line-height:1.45}.cta{border:none;border-radius:14px;background:linear-gradient(135deg,var(--cta-start),var(--cta-end));color:#fff;cursor:pointer;font:inherit;font-size:1rem;font-weight:700;min-width:220px;padding:14px 22px;transition:transform .16s ease,filter .16s ease}.cta:hover{filter:brightness(1.05)}.cta.is-nudging{animation:click-nudge .28s ease}@keyframes click-nudge{0%{transform:scale(1)}45%{transform:scale(1.05)}to{transform:scale(1)}}.hint{margin:16px 0 0;color:#9494a3;font-size:.95rem;min-height:1.4em;text-align:left}.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%}.pricing-card{display:flex;flex-direction:column;gap:10px;padding:18px 16px;border:1px solid var(--border);border-radius:16px;background:#0000002e;text-align:left}.pricing-card-target{border-color:#7c5cff59;background:#7c5cff14;box-shadow:inset 0 0 0 1px #7c5cff1f}.pricing-tier{margin:0;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9494a3}.pricing-price{margin:0;font-size:1.55rem;font-weight:800;letter-spacing:-.02em;line-height:1.1}.pricing-period{margin-left:2px;font-size:.82rem;font-weight:600;color:#9494a3}.pricing-features{margin:0;padding:0 0 4px;list-style:none;flex:1}.pricing-features li{position:relative;padding-left:14px;color:#b8b8c4;font-size:.84rem;line-height:1.45}.pricing-features li+li{margin-top:6px}.pricing-features li:before{content:"·";position:absolute;left:0;color:var(--accent-soft)}.pricing-cta{min-width:0;width:100%;padding:11px 14px;font-size:.92rem}.pricing-cta-muted{border:1px solid var(--border);border-radius:14px;background:#ffffff0f;color:#d4d4de;cursor:pointer;font:inherit;font-size:.92rem;font-weight:700;padding:11px 14px;width:100%;transition:background .16s ease,border-color .16s ease}.pricing-cta-muted:hover{background:#ffffff1a;border-color:#ffffff29}@media(max-width:720px){.pricing-grid{grid-template-columns:1fr}}.code-snippet{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#00000052}.code-snippet-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.06);background:#ffffff08}.code-snippet-lang{color:#9494a3;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.code-snippet-copy{border:1px solid var(--border);border-radius:8px;background:transparent;color:#c7c7d1;cursor:pointer;font:inherit;font-size:.75rem;padding:4px 10px}.code-snippet-copy:hover{border-color:var(--accent);color:#fff}.snippet{margin:0;overflow:auto;padding:16px 18px;border:none;border-radius:0;background:transparent}.snippet code{color:#ececf1;font:500 .88rem/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}.tok-tag{color:#7ec8e3}.tok-attr{color:#b794ff}.tok-string{color:#98c379}.tok-comment{color:#6a9955;font-style:italic}.tok-keyword{color:#c678dd}.tok-fn{color:#61afef}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:#7c5cff2e;color:var(--accent-soft);font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.eyebrow{margin:0 0 8px;color:var(--accent-soft);font-size:.85rem;font-weight:600;letter-spacing:.04em;text-align:left}code{color:#d8c7ff}.install-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:36px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:#ffffff08}.site-navbar-wrap{position:fixed;top:16px;left:50%;z-index:100;width:min(920px,calc(100% - 24px));transform:translate(-50%);pointer-events:none}.site-navbar{display:flex;align-items:center;gap:12px;padding:10px 12px 10px 14px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:linear-gradient(135deg,#ffffff1f,#ffffff0a 40%,#7c5cff14);-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 12px 40px #00000059,inset 0 1px #ffffff2e,inset 0 -1px #ffffff0a;pointer-events:auto}.site-navbar-brand{display:inline-flex;align-items:center;color:#f5f5f7;font-size:.88rem;font-weight:700;letter-spacing:-.01em;text-decoration:none;white-space:nowrap}.site-navbar-links{display:flex;align-items:center;gap:4px;margin:0;padding:0;list-style:none;flex:1;justify-content:center;overflow-x:auto;scrollbar-width:none}.site-navbar-links::-webkit-scrollbar{display:none}.site-navbar-link{display:inline-flex;padding:8px 12px;border-radius:999px;color:#c7c7d1;font-size:.82rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .16s ease,color .16s ease}.site-navbar-link:hover{background:#ffffff14;color:#fff}.site-navbar-github{display:inline-flex;align-items:center;padding:8px 14px;border-radius:999px;background:#7c5cff38;border:1px solid rgba(124,92,255,.35);color:#ece8ff;font-size:.8rem;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .16s ease,transform .16s ease}.site-navbar-github:hover{background:#7c5cff57;transform:translateY(-1px)}.site-footer{display:grid;gap:20px;margin-top:48px;padding:24px;border:1px solid rgba(124,92,255,.2);border-radius:20px;background:linear-gradient(160deg,#7c5cff14,#ffffff05);box-shadow:inset 0 1px #ffffff0d}.site-footer-install{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:#0000003d;border:1px solid rgba(255,255,255,.06)}.site-footer-install code{font:500 .92rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:#ececf1}.site-footer-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.site-footer-love{margin:0;color:#9494a3;font-size:.92rem}.site-footer-love a{color:var(--accent-soft);font-weight:600;text-decoration:none}.site-footer-love a:hover{text-decoration:underline}.site-footer-github{color:#b8b8c0;font-size:.84rem;text-decoration:none}.site-footer-github:hover{color:#fff}.site-footer-links{display:flex;align-items:center;gap:14px}.install-footer code{font:500 .92rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}.copy-btn{border:1px solid var(--border);border-radius:999px;background:transparent;color:#ddd;cursor:pointer;font:inherit;font-size:.85rem;padding:8px 14px}.copy-btn:hover{border-color:var(--accent);color:#fff}@media(max-width:960px){.layout{grid-template-columns:1fr;width:min(980px,calc(100% - 32px));padding-top:96px}.config-rail{position:sticky;top:76px;order:-1;max-height:none;overflow:visible}.site-navbar-wrap{width:calc(100% - 16px);top:10px}.site-navbar{flex-wrap:wrap;border-radius:20px;justify-content:center}.site-navbar-links{order:3;width:100%;justify-content:flex-start;padding-top:4px}}@media(max-width:640px){.site-footer-meta{flex-direction:column;align-items:flex-start}.site-footer-install{flex-direction:column;align-items:stretch}}@media(max-width:640px){.toggle-group{flex-direction:column}.cursor-flow-track{grid-template-columns:1fr;gap:12px}.cursor-flow-connector{display:none}.bg-watermark{background:var(--finger-url) 50% 92% / min(40vw,160px) no-repeat}}
