:root{--bg:#eef1f8;--surface:#fff;--surface-muted:#f8fafc;--border:#e2e8f0;--text:#0f172a;--text-muted:#64748b;--accent-react:#087ea4;--accent-react-soft:#e0f2fe;--accent-recoil:#4338ca;--accent-recoil-soft:#eef2ff;--success:#15803d;--success-soft:#dcfce7;--shadow-md:0 8px 30px #0f172a12;--radius-sm:10px;--radius-md:16px;--radius-lg:22px;--font-sans:"Inter", ui-sans-serif, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace}*,:before,:after{box-sizing:border-box}body{background:var(--bg);color:var(--text);font-family:var(--font-sans);background-image:radial-gradient(circle at 0 0,#087ea414,#0000 40%),radial-gradient(circle at 100% 0,#4338ca12,#0000 35%);min-height:100vh;margin:0;line-height:1.5}#root{min-height:100vh}button,input{font:inherit}code{background:var(--surface-muted);border:1px solid var(--border);font-family:var(--font-mono);border-radius:.35rem;padding:.1rem .35rem;font-size:.875em}.panel--playground{--panel-accent:var(--accent-react)}.panel--playground .eyebrow--playground{color:var(--accent-react)}.panel-heading{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem;display:flex}.panel-heading h2{letter-spacing:-.01em;margin:0;font-size:1.125rem}.stat-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.65rem;margin:0;display:grid}.stat-grid__item{background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:left;gap:.25rem;padding:.75rem .875rem;display:grid}.stat-grid dt{color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-size:.6875rem;font-weight:700}.stat-grid dd{font-family:var(--font-mono);overflow-wrap:anywhere;margin:0;font-size:.8125rem}.task-list{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.task-item{background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius-md);text-align:left;gap:.75rem;padding:1rem;display:grid}.task-item__top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;display:flex}.task-item__label{flex:1;align-items:center;gap:.65rem;min-width:200px;display:flex}.task-item__label input[type=checkbox]{accent-color:var(--accent-react);width:1.1rem;height:1.1rem}.task-item__input{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);flex:1;min-width:0;padding:.55rem .75rem}.task-item__input:focus{outline-offset:0;border-color:#087ea473;outline:2px solid #087ea426}.task-item__derived{gap:.5rem;display:grid}.derived-row{flex-wrap:wrap;align-items:baseline;gap:.5rem;display:flex}.derived-row__tag{background:var(--accent-recoil-soft);color:var(--accent-recoil);letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:.2rem .55rem;font-size:.625rem;font-weight:800}.derived-row__tag--async{color:#6366f1;background:#ede9fe}.derived-row__value{color:var(--text);font-family:var(--font-mono);font-size:.8125rem}.derived-row__value--loading{color:var(--text-muted);font-style:italic}.derived-row__value--error{color:#b91c1c}.status-badge{background:var(--surface);border:1px solid var(--border);color:var(--text-muted);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:.25rem .6rem;font-size:.6875rem;font-weight:700}.status-badge--done{background:var(--success-soft);color:var(--success);border-color:#15803d26}.status-badge--count{background:var(--accent-react-soft);color:var(--accent-react);border-color:#087ea433}.btn{background:var(--accent-react);color:#fff;cursor:pointer;border:0;border-radius:999px;justify-self:start;padding:.7rem 1.25rem;font-size:.9375rem;font-weight:700;transition:box-shadow .15s,transform .15s}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px #0f172a1f}@media (width<=640px){.task-item__top{flex-direction:column;align-items:stretch}}.demo{gap:1.25rem;max-width:800px;margin:0 auto;padding:2.5rem 1.25rem 3.5rem;display:grid}.hero{gap:.75rem;display:grid}.hero h1,.hero p{margin:0}.hero h1{letter-spacing:-.02em;font-size:clamp(1.875rem,4vw,2.5rem);line-height:1.1}.eyebrow{color:var(--accent-react);letter-spacing:.1em;text-transform:uppercase;margin:0;font-size:.72rem;font-weight:800}.lede{color:var(--text-muted);max-width:58ch}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);gap:1rem;padding:1.25rem;display:grid;position:relative;overflow:hidden}.panel:before{background:var(--panel-accent,var(--accent-recoil));content:"";height:3px;position:absolute;top:0;left:0;right:0}.panel--architecture:before{background:linear-gradient(90deg, var(--accent-react), var(--accent-recoil))}.panel--concepts{--panel-accent:var(--accent-recoil)}.panel h2{letter-spacing:-.01em;margin:0;font-size:1.125rem}.flow-list{counter-reset:flow;gap:.65rem;margin:0;padding:0;list-style:none;display:grid}.flow-step{background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius-md);counter-increment:flow;text-align:left;gap:.2rem;padding:.875rem 1rem .875rem 2.75rem;display:grid;position:relative}.flow-step:before{background:var(--step-accent,var(--accent-recoil));color:#fff;content:counter(flow);border-radius:999px;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;font-size:.75rem;font-weight:800;display:flex;position:absolute;top:.875rem;left:.875rem}.flow-step--root{--step-accent:var(--accent-react)}.flow-step--atom{--step-accent:#0891b2}.flow-step--selector{--step-accent:var(--accent-recoil)}.flow-step--async{--step-accent:#6366f1}.flow-step__label{color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;font-size:.6875rem;font-weight:700}.flow-step strong{font-size:.9375rem}.flow-step__detail{color:var(--text-muted);font-size:.8125rem}.concept-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;display:grid}.concept-card{background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius-sm);text-align:left;gap:.35rem;padding:.875rem 1rem;display:grid}.concept-card__type{color:var(--accent-recoil);letter-spacing:.08em;text-transform:uppercase;font-size:.6875rem;font-weight:800}.concept-card code{font-family:var(--font-mono);font-size:.8125rem}.concept-card__hook{color:var(--text-muted);font-family:var(--font-mono);font-size:.75rem}.note{background:var(--surface-muted);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-muted);text-align:left;margin:0;padding:.875rem 1rem;font-size:.9375rem}.note strong{color:var(--text)}@media (width<=640px){.demo{gap:1rem;padding:1rem .875rem 1.75rem}.hero h1{font-size:1.75rem}.panel{padding:1rem}}