:root{color-scheme:light;--blue:#1643c5;--ink:#172642;--muted:#58657a;--line:#dce3ee;--paper:#f5f7fb;--yellow:#ffce43;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0}a{color:var(--blue);text-underline-offset:4px}a:hover{text-decoration-thickness:2px}a:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}.skip{position:absolute;left:1rem;top:-5rem}.skip:focus{top:1rem;background:white;padding:1rem;z-index:10}
header{background:#fff;border-bottom:1px solid var(--line)}.bar{max-width:1200px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:20px 28px;gap:20px}.brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:750;letter-spacing:-1px;text-decoration:none;color:var(--ink)}.brand img{width:42px;height:42px;object-fit:contain}nav{display:flex;flex-wrap:wrap;gap:26px;align-items:center}nav a{font-size:14px;text-decoration:none;color:var(--muted)}nav a[aria-current=page]{color:var(--blue);font-weight:700}main{max-width:1200px;margin:auto;padding:48px 28px 72px}.eyebrow{font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:750;color:var(--blue)}h1{font-size:clamp(36px,5vw,62px);line-height:1.08;letter-spacing:-2px;margin:18px 0 24px;max-width:760px}h2{font-size:27px;letter-spacing:-.6px}h3{font-size:20px}p{line-height:1.65}.lead{color:var(--muted);font-size:19px;max-width:640px}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center;padding:24px 0 60px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{display:inline-block;padding:12px 18px;border-radius:8px;border:1px solid var(--line);text-decoration:none;background:white;font-weight:650;font-size:14px}.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.code-card{background:#172642;color:#e8efff;border-radius:15px;overflow:hidden;box-shadow:0 18px 50px #17264218}.code-label{padding:16px 22px;border-bottom:1px solid #ffffff25;color:#ffce43;font-size:12px;font-weight:700;letter-spacing:1px}.code-card pre{padding:24px;margin:0}.caption{font-size:13px;color:var(--muted)}pre{font:13px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;overflow:auto;tab-size:4}code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:24px 0}.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px;display:flex;flex-direction:column;align-items:flex-start}.card p{color:var(--muted);font-size:15px;flex:1}.card a{font-size:14px;font-weight:650}.number{font-size:12px;color:var(--blue);font-weight:750;letter-spacing:1px}.note{border-left:3px solid var(--yellow);padding:8px 20px;margin:30px 0;color:var(--muted)}footer{border-top:1px solid var(--line);padding:24px 28px;font-size:13px;color:var(--muted)}.footer-inner{max-width:1144px;margin:auto;display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap}.back{font-size:14px}.example-heading{font-size:42px}.twins{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:30px 0}.example-panel{background:white;border:1px solid var(--line);border-radius:12px;overflow:hidden;min-width:0}.panel-heading{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}.panel-heading h2{margin:0;font-size:18px}.badge{font-size:11px;color:var(--muted)}iframe{display:block;width:100%;height:320px;border:0;background:#fff}details{border-top:1px solid var(--line)}summary{padding:16px 20px;cursor:pointer;color:var(--blue);font-size:14px;font-weight:600}details pre{margin:0;padding:0 20px 22px}.runtime-body{padding:22px;background:white;font-size:15px}.runtime-body p{font-size:14px;color:var(--muted)}.error{color:#a71d2a;background:#fff1f2;padding:16px}.steps{max-width:780px}.steps li{padding:5px 0;line-height:1.6}
@media(max-width:850px){.hero{grid-template-columns:1fr;gap:28px}.cards{grid-template-columns:1fr}.twins{grid-template-columns:1fr}.bar{flex-wrap:wrap}nav{gap:18px}main{padding-top:32px}h1{letter-spacing:-1px}.section-head{display:block}}

.catalogue{display:grid;grid-template-columns:240px minmax(0,1fr);gap:36px;align-items:start}.widget-tree{display:block;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;background:white;border:1px solid var(--line);border-radius:10px;padding:8px}.widget-tree details{border:0}.widget-tree summary{padding:10px 8px;color:var(--ink);font-size:13px}.widget-tree ul{list-style:none;margin:0;padding:0 0 8px 16px}.widget-tree a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 8px;border-radius:4px;font-size:13px}.widget-tree a:hover,.widget-tree a[aria-current=page]{background:#edf2ff;color:var(--blue)}.widget-tree small{font-size:10px;color:var(--muted);font-weight:400}.widget-sheet{min-width:0}.widget-sheet h1{font-size:40px;letter-spacing:-1px}.widget-sheet .twins{gap:14px}.widget-sheet iframe{height:230px}.widget-sheet h3{margin:0;font-size:16px}@media(max-width:1000px){.widget-sheet .twins{grid-template-columns:1fr}}@media(max-width:650px){.catalogue{grid-template-columns:1fr}.widget-tree{position:static;max-height:300px}}

/* The experimental editor introduction shares the site's light palette. */
.editor-intro{max-width:850px;margin:20px 0 36px}.editor-intro h1{max-width:800px}.editor-preview{margin:0 0 56px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}.editor-preview img{display:block;width:100%;height:auto}.editor-preview figcaption{padding:16px 20px;color:var(--muted);font-size:14px;line-height:1.6}.editor-status{max-width:820px;margin-top:44px;padding:28px;border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:10px;background:#fff}.editor-status p{line-height:1.75}.editor-callout{padding:30px 0;border-top:1px solid var(--line);margin-top:36px}.editor-callout p{color:var(--muted)}@media(max-width:600px){.editor-status{padding:20px}.editor-intro{margin-top:0}.editor-preview figcaption{padding:12px 16px}.editor-intro .actions{align-items:stretch}}

/* The home introduces each experience before sending visitors into it. */
.home-hero{padding:30px 0 64px;max-width:960px}.home-hero h1{font-size:clamp(38px,5.6vw,70px);max-width:960px;letter-spacing:-2.4px}.home-hero .lead{max-width:770px;font-size:21px}.home-intent{color:var(--muted);font-size:15px;margin-top:24px}.home-section{padding:44px 0;border-top:1px solid var(--line);scroll-margin-top:24px}.home-section>.lead{max-width:800px}.home-feature{display:grid;grid-template-columns:1fr 1.1fr;border:1px solid var(--line);border-radius:16px;background:white;margin:32px 0 24px;overflow:hidden;align-items:center}.home-feature-copy{padding:36px}.home-feature h3{font-size:34px;line-height:1.15;letter-spacing:-1px;margin:20px 0}.home-feature p,.home-project p{color:var(--muted)}.home-tag{font-size:14px;font-weight:700;color:var(--blue)}.home-preview{display:block;margin:24px 24px 24px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden}.home-preview img{display:block;width:100%;height:auto}.home-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px}.home-project{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;display:flex;flex-direction:column}.home-project>a{display:block;background:#e9edf5;border-bottom:1px solid var(--line)}.home-project img{display:block;width:100%;height:auto;aspect-ratio:1440/950;object-fit:cover;object-position:top}.home-project-copy{padding:28px;display:flex;flex-direction:column;align-items:start;flex:1}.home-project h3{font-size:26px;line-height:1.2;margin:16px 0 8px}.home-project-copy .button{margin-top:auto}.home-release{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;padding:36px;background:#e9effc;border-radius:16px;border-top:4px solid var(--blue)}.home-release h2{font-size:32px}.home-section .card p{font-size:16px}.home-section .caption{font-size:14px}.release-status{font-size:14px;border-left:3px solid var(--yellow);padding-left:12px}nav a{padding:5px 0}a:focus-visible{border-radius:2px}@media(max-width:850px){.home-feature,.home-pair,.home-release{grid-template-columns:1fr}.home-preview{margin:0 24px 24px}.home-hero{padding:18px 0 36px}.home-feature-copy{padding:26px}.home-section{padding:28px 0}.home-release{gap:8px;padding:26px}.home-hero h1{letter-spacing:-1.3px}.home-hero .lead{font-size:19px}}@media(prefers-reduced-motion:no-preference){.home-project,.home-feature{transition:border-color .2s}.home-project:hover,.home-feature:hover{border-color:#9bb1e5}}