@import"https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;500;600;700;800;900&family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--gr-ice: #f4f7f9;--gr-ice-warm: #eceff2;--gr-paper: #ffffff;--gr-navy: #0a1628;--gr-navy-deep: #050e1a;--gr-navy-mid: #1a2940;--gr-ink: #07121e;--gr-ink-mute: #5c6675;--gr-ink-faint: #98a0ac;--gr-rule: rgba(7, 18, 30, .1);--gr-rule-deep: rgba(7, 18, 30, .22);--gr-lime: #c8ff00;--gr-lime-deep: #9bc400;--gr-magenta: #ff2d75;--gr-red: #ff3b30;--gr-display: "Big Shoulders Display", system-ui, sans-serif;--gr-sans: "Sora", system-ui, sans-serif;--gr-mono: "JetBrains Mono", ui-monospace, monospace;--gr-aqua: var(--gr-lime-deep);--gr-aqua-dim: var(--gr-lime-deep);--gr-aqua-glow: rgba(200, 255, 0, .18);--gr-deep: var(--gr-ink);--gr-on-accent: var(--gr-ink);--gr-preview-bg: var(--gr-ice-warm);--gr-surface: var(--gr-paper);--gr-surface-raised: var(--gr-ice-warm);--gr-text: var(--gr-ink);--gr-text-muted: var(--gr-ink-mute);--gr-border: var(--gr-rule-deep);--gr-border-subtle: var(--gr-rule);--color-bg: var(--gr-ice);--color-surface: var(--gr-paper);--color-surface2: var(--gr-ice-warm);--color-border: var(--gr-rule-deep);--color-text: var(--gr-ink);--color-text-dim: var(--gr-ink-mute);--color-accent: var(--gr-lime-deep);--font-sans: var(--gr-sans);--font-mono: var(--gr-mono);--font-display: var(--gr-display);--color-graphrefly: var(--gr-lime-deep);--color-jotai: #9b59b6;--color-nanostores: #27ae60;--color-zustand: #e67e22;--gr-demo-nav-height: 3.25rem;--gr-warn: #f0c86a;--gr-danger: #ef6e7a}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}code{font-family:var(--font-mono);font-size:.92em;color:var(--gr-ink);background:var(--gr-ice-warm);padding:.1em .35em;border-radius:4px}.gr-demo-nav{display:flex;align-items:center;flex-wrap:wrap;gap:.65rem 1rem;min-height:var(--gr-demo-nav-height);padding:.65rem 1.5rem;background:#f4f7f9e0;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--gr-rule);position:sticky;top:0;z-index:100}@media(max-width:50rem){.gr-demo-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--gr-ice)}}.gr-demo-brand{font-family:var(--gr-display);font-weight:800;font-size:1.4rem;line-height:1;letter-spacing:-.03em;text-transform:uppercase;text-decoration:none;color:var(--gr-ink);margin-right:.5rem;flex-shrink:0;transition:color .15s}.gr-demo-brand:hover,.gr-demo-brand:focus-visible{color:var(--gr-lime-deep)}.gr-demo-nav-links{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem .65rem}.gr-demo-nav-links a{font-family:var(--gr-mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--gr-ink-mute);padding:.35em .2em;border-radius:4px;transition:color .15s,background .15s}.gr-demo-nav-links a:hover,.gr-demo-nav-links a:focus-visible{color:var(--gr-lime-deep)}.gr-demo-nav-links a.active{color:var(--gr-ink);background:var(--gr-lime);padding:.35em .55em}.gr-demo-nav-links a.active:hover{color:var(--gr-ink)}.demo-nav{display:flex;align-items:center;flex-wrap:wrap;gap:.65rem 1rem;min-height:var(--gr-demo-nav-height);padding:.65rem 1.5rem;background:#f4f7f9e0;backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--gr-rule);position:sticky;top:0;z-index:100}@media(max-width:50rem){.demo-nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--gr-ice)}}.demo-nav .nav-brand{font-family:var(--gr-display);font-weight:800;font-size:1.4rem;line-height:1;letter-spacing:-.03em;text-transform:uppercase;text-decoration:none;color:var(--gr-ink);margin-right:.5rem;flex-shrink:0;transition:color .15s}.demo-nav .nav-brand:hover,.demo-nav .nav-brand:focus-visible{color:var(--gr-lime-deep)}.demo-nav a:not(.nav-brand){font-family:var(--gr-mono);font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--gr-ink-mute);padding:.35em .2em;border-radius:4px;transition:color .15s,background .15s}.demo-nav a:not(.nav-brand):hover,.demo-nav a:not(.nav-brand):focus-visible{color:var(--gr-lime-deep)}.demo-nav a.active{color:var(--gr-ink);background:var(--gr-lime);padding:.35em .55em}.demo-nav a.active:hover{color:var(--gr-ink)}.demo-shell{display:flex;height:calc(100vh - var(--gr-demo-nav-height));overflow:hidden}.pane-main{flex:0 0 auto;overflow-x:hidden;overflow-y:auto;padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:1rem;min-width:0}.pane-divider{flex:0 0 5px;background:var(--color-border);cursor:col-resize;transition:background .15s}.pane-divider:hover,.pane-divider.dragging{background:var(--color-accent)}.pane-side{flex:1 1 auto;display:flex;flex-direction:column;overflow:hidden;min-width:200px;background:var(--color-surface);border-left:1px solid var(--gr-rule)}.pane-graph{flex:0 0 auto;overflow:hidden;display:flex;flex-direction:column;min-height:0}.pane-split-divider{flex:0 0 5px;background:var(--color-border);cursor:row-resize;transition:background .15s}.pane-split-divider:hover,.pane-split-divider.dragging{background:var(--color-accent)}.pane-code{flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column;min-height:0}.pane-graph h3,.pane-code h3{font-family:var(--gr-mono);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--gr-ink-mute);padding:.6rem 1rem;margin-bottom:0;border-bottom:1px solid var(--gr-border-subtle);flex-shrink:0}.pane-code h3 .layout-meta{margin-left:.35rem;font-family:var(--font-mono);font-weight:400;font-size:.62rem;letter-spacing:0;text-transform:none;color:var(--color-text-dim)}.mermaid-pre{font-family:var(--font-mono);font-size:.72rem;line-height:1.6;color:var(--gr-ink-mute);background:var(--color-surface2);border:1px solid var(--color-border);border-radius:12px;padding:1rem;overflow-x:auto;white-space:pre}.mermaid-graph{flex:1 1 auto;overflow:hidden;padding:.75rem;min-height:0;border:none;border-radius:0;background:transparent}.mermaid-graph svg{max-width:none;height:auto}.mermaid-graph:empty:before{content:"(loading…)";color:var(--color-text-dim);font-family:var(--font-mono);font-size:.75rem}.pane-code>.code-pre{flex:1 1 auto;overflow:auto;font-family:var(--font-mono);font-size:.78rem;line-height:1.7;color:var(--gr-ink);background:var(--color-surface2);border:1px solid var(--color-border);border-radius:12px;padding:1rem;white-space:pre;margin:0 1rem 1rem}.code-line{display:flex;gap:.75rem;padding:0 .25rem}.code-line.active{background:var(--gr-aqua-glow);border-radius:3px}.code-lineno{color:var(--gr-text-muted);width:2.2em;text-align:right;user-select:none;flex-shrink:0}.code-linetext{flex:1 1 auto;white-space:pre}.adapters-chapter,.blocks-chapter,.adapter-grid{min-width:0}.adapter-col{min-width:0;overflow:hidden}.adapter-canvas{display:block;max-width:100%;box-sizing:border-box}.adapter-cli,.adapter-snapshot{max-width:100%;word-break:break-word;overflow-wrap:anywhere}.block-frame{overflow:hidden;box-sizing:border-box}.block{box-sizing:border-box;max-width:100%}.block-text{overflow-x:hidden;overflow-y:visible}.block-text .paragraph-line{max-width:100%;box-sizing:border-box}.block-svg{overflow:hidden}.block-svg svg{display:block;max-width:100%;height:auto}.block-image{overflow:hidden}.demo-shell .pane-main{padding:1.5rem;gap:1.5rem}.pane-divider{position:relative}.counter-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.counter-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;padding:1.25rem;cursor:pointer;transition:border-color .15s,box-shadow .15s;display:flex;flex-direction:column;gap:.75rem}.counter-card:hover{border-color:var(--color-text-dim)}.counter-card.selected{box-shadow:0 0 0 2px currentColor}.counter-card[data-lib=graphrefly]{--lib-color: var(--color-graphrefly)}.counter-card[data-lib=jotai]{--lib-color: var(--color-jotai)}.counter-card[data-lib=nanostores]{--lib-color: var(--color-nanostores)}.counter-card[data-lib=zustand]{--lib-color: var(--color-zustand)}.counter-card.selected{border-color:var(--lib-color);color:var(--lib-color)}.lib-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.2rem .6rem;border-radius:4px;background:color-mix(in srgb,var(--lib-color) 15%,transparent);color:var(--lib-color);width:fit-content}.counter-display{display:flex;align-items:center;justify-content:center;gap:1rem}.counter-value{font-size:2.5rem;font-weight:700;font-variant-numeric:tabular-nums;min-width:3rem;text-align:center;color:var(--color-text)}.counter-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-surface2);color:var(--color-text);font-size:1.25rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .1s,border-color .1s}.counter-btn:hover{background:color-mix(in srgb,var(--lib-color) 20%,var(--color-surface2));border-color:var(--lib-color);color:var(--lib-color)}.counter-desc{font-size:.75rem;color:var(--color-text-dim);text-align:center;line-height:1.4}.counter-derived{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.45rem .6rem;border-top:1px dashed var(--color-border);margin-top:.25rem;font-size:.72rem}.counter-derived .derived-label{font-family:var(--font-mono);color:var(--color-text-dim);font-size:.68rem}.counter-derived .derived-value{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--lib-color, var(--color-text));font-weight:600}.leaderboard{background:var(--color-surface);border:2px solid var(--color-border);border-radius:10px;padding:1rem 1.25rem;cursor:pointer;transition:border-color .15s,box-shadow .15s}.leaderboard:hover{border-color:var(--color-text-dim)}.leaderboard.selected{border-color:var(--gr-aqua);box-shadow:0 0 0 2px var(--gr-aqua-glow)}.leaderboard-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-dim);margin-bottom:.75rem}.leaderboard-rows{display:flex;flex-direction:column;gap:.4rem}.leaderboard-row{display:flex;align-items:center;justify-content:space-between;padding:.4rem .6rem;border-radius:6px;background:var(--color-surface2);border:1px solid transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:border-color .15s,background .15s;width:100%}.leaderboard-row:hover{border-color:var(--color-text-dim)}.leaderboard-row[data-lib-row=graphrefly]{--row-color: var(--color-graphrefly)}.leaderboard-row[data-lib-row=jotai]{--row-color: var(--color-jotai)}.leaderboard-row[data-lib-row=nanostores]{--row-color: var(--color-nanostores)}.leaderboard-row[data-lib-row=zustand]{--row-color: var(--color-zustand)}.leaderboard-row.selected{border-color:var(--row-color, var(--gr-aqua));box-shadow:0 0 0 1px var(--row-color, var(--gr-aqua))}.leaderboard-key{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.leaderboard-key[data-lib=graphrefly]{color:var(--color-graphrefly)}.leaderboard-key[data-lib=jotai]{color:var(--color-jotai)}.leaderboard-key[data-lib=nanostores]{color:var(--color-nanostores)}.leaderboard-key[data-lib=zustand]{color:var(--color-zustand)}.leaderboard-val{font-size:.9rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--color-text)}.total-line{font-size:.9rem;color:var(--color-text-dim);margin-top:.35rem;padding-top:.35rem;border-top:1px solid var(--color-border)}.total-line strong{color:var(--color-text);font-variant-numeric:tabular-nums}.code-hit{margin-top:.5rem;padding:.35rem .6rem;font-family:var(--font-mono);font-size:.7rem;color:var(--gr-ink);background:color-mix(in srgb,var(--gr-lime) 35%,transparent);border:1px solid var(--gr-rule-deep);border-radius:8px;width:fit-content}.code-pre{cursor:text}.landing{max-width:900px;margin:0 auto;padding:3rem 2rem}.landing h1{font-family:var(--gr-display);font-size:clamp(2rem,5vw,3rem);font-weight:800;letter-spacing:-.04em;text-transform:uppercase;margin-bottom:.5rem;color:var(--gr-ink)}.landing .tagline{font-size:1.1rem;color:var(--color-text-dim);margin-bottom:2.5rem}.framework-tabs{display:flex;gap:.75rem;margin-bottom:3rem;flex-wrap:wrap}.framework-tab{padding:.6rem 1.4rem;border-radius:8px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);text-decoration:none;font-weight:600;font-size:.9rem;transition:all .15s}.framework-tab:hover{border-color:var(--color-accent);color:var(--color-accent)}.framework-tab.react{border-color:#61dafb}.framework-tab.vue{border-color:#42b883}.framework-tab.solid{border-color:#2c4f7c}.framework-tab.svelte{border-color:#ff3e00}.framework-tab.react:hover{background:#61dafb1a;color:#61dafb}.framework-tab.vue:hover{background:#42b8831a;color:#42b883}.framework-tab.solid:hover{background:#2c4f7c26;color:#6488b4}.framework-tab.svelte:hover{background:#ff3e001a;color:#ff3e00}.matrix-table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--color-border);border-radius:10px;overflow:hidden;margin-bottom:2.5rem}.matrix-table th,.matrix-table td{padding:.9rem 1.1rem;text-align:left;border-bottom:1px solid var(--color-border);border-right:1px solid var(--color-border)}.matrix-table th:last-child,.matrix-table td:last-child{border-right:none}.matrix-table tr:last-child td{border-bottom:none}.matrix-table thead th{background:var(--color-surface);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-dim)}.matrix-table tbody tr:nth-child(2n) td{background:var(--color-surface)}.matrix-table tbody tr:nth-child(odd) td{background:var(--color-surface2)}.row-label{font-weight:700;font-size:.85rem}.row-label.graphrefly{color:var(--color-graphrefly)}.row-label.jotai{color:var(--color-jotai)}.row-label.nanostores{color:var(--color-nanostores)}.row-label.zustand{color:var(--color-zustand)}.matrix-cell{font-size:.8rem;color:var(--color-text-dim)}.matrix-cell .check{color:#4ade80;font-weight:700;margin-right:.35rem}.cta-group{display:flex;gap:1rem;flex-wrap:wrap}.cta-btn{padding:.75rem 1.75rem;border-radius:8px;font-weight:700;font-size:.9rem;text-decoration:none;transition:all .15s;border:1px solid transparent}.cta-btn.primary{background:var(--gr-ink);color:var(--gr-ice)}.cta-btn.primary:hover{background:var(--gr-navy);color:var(--gr-ice)}.cta-btn.secondary{background:var(--color-surface);color:var(--color-text);border-color:var(--color-border)}.cta-btn.secondary:hover{border-color:var(--color-accent);color:var(--color-accent)}.section-title{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-dim);margin-bottom:.75rem}