:root{--demo-primary:#ce0d0d;--demo-ink:#18181b;--demo-muted:#52525b;--demo-line:#e4e4e7;--demo-surface:#fafafa;--demo-max:72rem}html{scroll-behavior:smooth}html[data-rm="1"]{scroll-behavior:auto}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.demo-header,.demo-button,.demo-guide,.demo-spot,.demo-spot-target{transition:none!important}}body{color:var(--demo-ink);background:#fff;margin:0}.demo-banner{background:var(--demo-ink);color:#fff;text-align:center;letter-spacing:.01em;padding:.5rem 1rem;font-size:.8125rem;font-weight:600}.demo-header{z-index:50;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid var(--demo-line);background:#fffffff0;position:sticky;top:0}.demo-header__inner{max-width:var(--demo-max);align-items:center;gap:.75rem;margin:0 auto;padding:.625rem 1.5rem;display:flex}.demo-header__brand{letter-spacing:-.01em;font-size:1.0625rem;font-weight:700}.demo-header__note{color:var(--demo-muted);margin-right:auto;font-size:.8125rem}.demo-button{cursor:pointer;border:1px solid #0000;border-radius:.5rem;justify-content:center;align-items:center;padding:.625rem 1rem;font-size:.875rem;font-weight:600;line-height:1;text-decoration:none;display:inline-flex}.demo-button--primary{background:var(--demo-primary);color:#fff}.demo-button--primary:hover{background:#b60c0c}.demo-button--ghost{color:var(--demo-ink);border-color:var(--demo-line);background:0 0}.demo-button--ghost:hover{background:var(--demo-surface)}.demo-main{max-width:var(--demo-max);margin:0 auto;padding:0 1.5rem}@media (min-width:768px){.demo-banner,.demo-header,.demo-main,.demo-footer{margin-left:16rem}}html[data-demo-boot]{cursor:progress}.demo-button:focus-visible{outline:2px solid var(--demo-primary);outline-offset:3px}.demo-guide__close:focus-visible{outline:2px solid var(--demo-primary);outline-offset:3px}.demo-hero{max-width:46rem;padding:3rem 0 2rem}.demo-hero h1{letter-spacing:-.02em;margin:0 0 1rem;font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.15}.demo-hero__intro{color:var(--demo-muted);margin:0 0 .75rem;font-size:1.0625rem;line-height:1.6}.demo-hero__honesty{color:var(--demo-muted);background:var(--demo-surface);border:1px solid var(--demo-line);border-radius:.5rem;margin:0;padding:.5rem .75rem;font-size:.875rem}.demo-areas,.demo-loop,.demo-sandbox,.demo-handoff{padding:1.5rem 0}.demo-areas h2,.demo-loop h2,.demo-handoff h2{letter-spacing:-.01em;margin:0 0 1rem;font-size:1.25rem}.demo-areas__grid{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem;display:grid}.demo-card{border:1px solid var(--demo-line);border-radius:.75rem;flex-direction:column;gap:.75rem;padding:1.25rem;scroll-margin-top:4rem;display:flex}.demo-card__head{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.demo-card h3{margin:0;font-size:1rem}.demo-card p{color:var(--demo-muted);flex:1;margin:0;font-size:.875rem;line-height:1.55}.demo-card .demo-button{align-self:flex-start}.demo-pill{background:var(--demo-surface);border:1px solid var(--demo-line);color:var(--demo-muted);white-space:nowrap;border-radius:999px;padding:.125rem .5rem;font-size:.6875rem;font-weight:500}.demo-pill--live{color:#047857;background:#ecfdf5;border-color:#a7f3d0}.demo-loop__lead{color:var(--demo-muted);margin:0 0 1rem;font-size:.9375rem}.demo-loop ol{gap:.5rem;margin:0;padding-left:1.25rem;display:grid}.demo-loop li{font-size:.9375rem;line-height:1.55}.demo-sandbox{scroll-margin-top:3.5rem}.demo-sandbox #root{border:1px solid var(--demo-line);border-radius:.75rem;min-height:24rem;overflow:hidden}.demo-handoff{border:1px solid var(--demo-line);background:var(--demo-surface);border-radius:.75rem;margin-bottom:2rem;padding:1.5rem;scroll-margin-top:4rem}.demo-handoff p{color:var(--demo-muted);max-width:40rem;margin:0 0 1rem;font-size:.9375rem}.demo-handoff h2{margin-bottom:.5rem}.demo-footer{border-top:1px solid var(--demo-line);margin-top:2rem}.demo-footer p{max-width:var(--demo-max);color:var(--demo-muted);margin:0 auto;padding:1.5rem;font-size:.8125rem}.demo-guide{z-index:60;border:1px solid var(--demo-line);background:#fff;border-radius:.75rem;width:min(21rem,100vw - 2rem);padding:1rem;position:fixed;bottom:1rem;right:1rem;box-shadow:0 12px 32px #00000024}.demo-guide[data-state=dismissed]{display:none}.demo-guide__collapsed p,.demo-guide__panel p,.demo-guide__done p{margin:0 0 .75rem;font-size:.875rem;line-height:1.5}.demo-guide__actions{gap:.5rem;display:flex}.demo-guide__step{text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--demo-muted)!important;font-size:.6875rem!important}.demo-guide__close{width:1.75rem;height:1.75rem;color:var(--demo-muted);cursor:pointer;background:0 0;border:0;border-radius:.375rem;font-size:1rem;line-height:1;position:absolute;top:.5rem;right:.5rem}.demo-guide__close:hover{background:var(--demo-surface)}.demo-spot{z-index:40;pointer-events:none;border:2px solid var(--demo-primary);opacity:0;border-radius:.75rem;transition:opacity .15s;position:fixed;box-shadow:0 0 0 9999px #18181b6b}.demo-spot[data-on="1"]{opacity:1}.demo-spot--rm{transition:none}.demo-spot-target{outline:2px solid var(--demo-primary);outline-offset:2px;border-radius:.375rem}@media (prefers-reduced-motion:reduce){.demo-spot{transition:none}}#root [role=tablist]{justify-content:flex-start;overflow-x:auto}.demo-chrome{border-bottom:1px dashed var(--demo-line);background:#fafafaf0;flex-wrap:wrap;align-items:flex-start;gap:.5rem;padding:.5rem 1rem;display:flex}.demo-chrome__btn{border:1px dashed var(--demo-primary);color:var(--demo-primary);cursor:pointer;background:#fff;border-radius:999px;align-items:center;gap:.375rem;padding:.3rem .7rem;font-size:.75rem;font-weight:600;text-decoration:none;display:inline-flex}.demo-chrome__btn:disabled{opacity:.5;cursor:default}.demo-chrome__btn:hover:not(:disabled){background:rgb(var(--demo-primary-rgb,225 29 72) / .06)}.demo-chrome__panel{border:1px solid var(--demo-line);background:#fff;border-radius:.5rem;flex-basis:100%;margin-top:.25rem;padding:.6rem .8rem;font-size:.8125rem}.demo-chrome__panel p{margin:0 0 .35rem}.demo-chrome__fields{flex-wrap:wrap;gap:1rem;margin:0;display:flex}.demo-chrome__fields div{min-width:7rem}.demo-chrome__fields dt{text-transform:uppercase;letter-spacing:.05em;color:#71717a;font-size:.6875rem}.demo-chrome__fields dd{margin:0;font-weight:600}.demo-preflight{border:1px dashed var(--demo-line);background:#fafafae6;border-radius:.5rem;margin-top:.75rem;padding:.6rem .7rem;font-size:.75rem}.demo-preflight__title{text-transform:uppercase;letter-spacing:.05em;color:#71717a;margin:0 0 .35rem;font-size:.6875rem;font-weight:600}.demo-preflight__row{color:#a1a1aa;align-items:center;gap:.45rem;padding:.15rem 0;display:flex}.demo-preflight__dot{background:#fafafa;border:1.5px solid #d4d4d8;border-radius:999px;flex:none;block-size:.55rem;inline-size:.55rem}.demo-preflight__row[data-green="1"]{color:#166534}.demo-preflight__row[data-green="1"] .demo-preflight__dot{background:#22c55e;border-color:#16a34a}.demo-chrome__strong{margin:.1rem 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}