:root{color:#edf2ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--bg:#080b13;--panel:#101524db;--panel-strong:#181f34eb;--panel-soft:#ffffff0f;--line:#b1c4ff29;--line-strong:#b1c4ff47;--text:#edf2ff;--muted:#aeb9d7;--subtle:#7f8daf;--accent:#9fb3ff;--accent-strong:#c9d6ff;--accent-warm:#f6c177;--icon-secondary-color:var(--accent-warm);--shadow:0 30px 110px #0000006b;--radius-lg:30px;--radius-md:20px;--radius-sm:14px;background:#080b13;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 18% 0%, #6777ff2e, transparent 32rem), radial-gradient(circle at 84% 8%, #2fc4b21f, transparent 30rem), linear-gradient(180deg, #111526 0%, var(--bg) 44rem);min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}.build-info-banner{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#080b13db;width:100%}.build-info-banner:has(.build-info-banner__target--local){background:linear-gradient(90deg,#f6c17721,#080b13db 28rem)}.build-info-banner:has(.build-info-banner__target--preview){background:linear-gradient(90deg,#9fb3ff24,#080b13db 28rem)}.build-info-banner__inner{justify-content:space-between;align-items:center;gap:14px;width:min(1120px,100vw - 40px);min-height:44px;margin:0 auto;display:flex}.build-info-banner__details{flex:1;justify-content:space-between;align-items:center;gap:14px;min-width:0;display:flex}.build-info-banner summary{width:-moz-fit-content;width:fit-content;color:var(--accent-strong);cursor:pointer;align-items:center;gap:10px;font-size:.9rem;font-weight:750;display:flex}.build-info-banner summary::marker{color:var(--subtle)}.build-info-banner__channel{color:var(--accent-strong);font-weight:850}.build-info-banner__branch{color:var(--text)}.build-info-banner__target{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;background:#ffffff0f;border-radius:999px;padding:2px 8px;font-size:.72rem;font-weight:850}.build-info-banner__target--local{color:var(--accent-warm);background:#f6c1771f}.build-info-banner__target--preview{color:var(--accent-strong);background:#9fb3ff1f}.build-info-banner__author{color:var(--muted);align-items:center;gap:6px;margin-left:auto;font-size:.82rem;font-weight:700;display:inline-flex}.build-info-banner__author img{border:1px solid var(--line-strong);border-radius:999px;width:20px;height:20px}.build-info-banner__hint{color:var(--subtle);letter-spacing:.11em;text-transform:uppercase;font-size:.72rem;font-weight:800}.build-info-banner dl{flex-wrap:wrap;gap:8px 18px;margin:10px 0 14px;display:flex}.build-info-banner div{align-items:baseline;gap:6px;display:flex}.build-info-banner dt{color:var(--subtle);letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;font-weight:800}.build-info-banner dd{color:var(--text);margin:0;font-size:.86rem}.build-info-banner__dismiss{color:var(--subtle);cursor:pointer;background:0 0;border:0;padding:6px 0}.build-info-banner__dismiss:hover,.build-info-banner__dismiss:focus-visible{color:#fff}.hero{border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(145deg, #ffffff1a, #ffffff08), var(--panel);width:min(1120px,100vw - 40px);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);margin:28px auto;padding:clamp(20px,3.4vw,40px)}.page{gap:28px;display:grid}.route-state{min-height:220px;color:var(--muted);place-items:center;font-weight:700}.page-header{max-width:760px}.app-shell-mark{--icon-size:3rem;--icon-color:#b9c0ff;margin-bottom:18px;display:block}.eyebrow{color:var(--accent-warm);letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px;font-size:.76rem;font-weight:800}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.075em;max-width:820px;margin-bottom:18px;font-size:clamp(2.45rem,8vw,5.75rem);line-height:.9}h2{letter-spacing:-.04em;margin-bottom:10px;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.05}h3{color:var(--accent-strong);margin-bottom:8px}p{color:var(--muted);font-size:1.02rem;line-height:1.65}p:last-child{margin-bottom:0}a{color:var(--accent-strong);text-underline-offset:.18em;text-decoration-color:#c9d6ff6b}a:visited{color:var(--accent-strong)}a:hover,a:focus-visible{color:#fff;text-decoration-color:currentColor}:focus-visible{outline-offset:3px;outline:3px solid #9fb3ffb8}.app-nav{border:1px solid var(--line);background:#04070f75;border-radius:999px;justify-content:space-between;align-items:center;gap:14px;padding:8px;display:flex}.app-nav a{min-height:38px;color:var(--muted);border-radius:999px;align-items:center;padding:0 14px;font-size:.88rem;font-weight:800;text-decoration:none;display:inline-flex}.app-nav a:hover,.app-nav a:focus-visible{color:var(--text);background:#ffffff14}.app-nav__brand{letter-spacing:-.02em;background:linear-gradient(135deg,#9fb3ff42,#f6c17724);color:var(--text)!important}.app-nav__links{flex-wrap:wrap;justify-content:flex-end;gap:2px;display:flex}.metric-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:2px 0;display:grid}.metric-grid div,.route-card,.icon-gallery-group,.icon-gallery-card,.embedded-router-panel,.embedded-router-frame,.global-counter-card,.global-counter-error,.local-dev-panel section article,.local-dev-panel section>section{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel-soft)}.metric-grid div{padding:16px}dt{color:var(--subtle);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;font-weight:800}dd{overflow-wrap:anywhere;color:var(--text);margin:7px 0 0;font-weight:750}.action-row,.button-row{flex-wrap:wrap;gap:10px;display:flex}button,.route-card__link{color:#0b1020;cursor:pointer;background:linear-gradient(135deg,#dce5ff,#9fb3ff);border:1px solid #ffffff1a;border-radius:999px;justify-content:center;align-items:center;min-height:42px;padding:0 17px;font-weight:850;line-height:1;text-decoration:none;transition:transform .14s,box-shadow .14s,filter .14s;display:inline-flex;box-shadow:0 12px 30px #2b41a038}button:hover,.route-card__link:hover,button:focus-visible,.route-card__link:focus-visible{color:#080b13;filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 16px 36px #2b41a04d}pre,code{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace}code{color:#dce5ff;background:#ffffff14;border:1px solid #ffffff1a;border-radius:8px;padding:.12em .34em}pre{border-radius:var(--radius-sm);color:#dbeafe;background:#00000057;border:1px solid #ffffff1a;min-height:72px;margin:0;padding:16px;overflow:auto}.state-block{white-space:pre-wrap}.route-card-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;display:grid}.route-card{align-content:start;gap:8px;padding:20px;display:grid}.route-card__link{justify-self:start;margin-top:8px}.route-card--view-three{min-height:100%}.view-three-demo-canvas{border-radius:var(--radius-sm);background:#111827;border:1px solid #ffffff1f;width:100%;min-height:260px;display:block}.global-counter-demo{gap:18px;max-width:620px;display:grid}.global-counter-card{text-align:center;place-items:center;min-height:300px;padding:clamp(24px,6vw,48px);display:grid;position:relative;overflow:hidden}.global-counter-card:before{content:"";filter:blur(10px);background:radial-gradient(circle,#9fb3ff42,#0000 62%);border-radius:999px;position:absolute;inset:12%}.global-counter-card>*{position:relative}.global-counter-orbit{aspect-ratio:1;border:1px solid #dce5ff2e;border-radius:999px;width:min(68vw,280px);animation:2.8s linear infinite global-counter-spin;position:absolute}.global-counter-orbit span{aspect-ratio:1;background:#f6c177;border-radius:999px;width:14px;position:absolute;top:12%;left:50%;box-shadow:0 0 24px #f6c177b8}.global-counter-card__value{letter-spacing:-.08em;font-size:clamp(5rem,18vw,10rem);line-height:.9}.global-counter-card__meta{max-width:28rem;color:var(--subtle);margin:0}.global-counter-error{background:linear-gradient(135deg,#fb71851f,#ffffff0f);border-color:#fb718573;gap:8px;max-width:620px;padding:24px;display:grid}.global-counter-error h2,.global-counter-error p{margin:0}@keyframes global-counter-spin{to{transform:rotate(1turn)}}.icon-gallery{gap:18px;display:grid}.icon-gallery-group{gap:18px;padding:clamp(18px,3vw,28px);display:grid}.icon-gallery-group__header{max-width:720px}.icon-gallery-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;display:grid}.icon-gallery-card{--icon-size:2.35rem;--icon-color:var(--accent-strong);--icon-stroke-width:1.8;min-height:132px;color:var(--muted);text-align:center;align-content:center;justify-items:center;gap:14px;padding:18px 12px;display:grid}.icon-gallery-card:nth-child(3n+1){--icon-color:#c9d6ff}.icon-gallery-card:nth-child(3n+2){--icon-color:#f6c177}.icon-gallery-card:nth-child(3n){--icon-color:#8bdacb}.icon-gallery__icon{display:block}.icon-gallery-card span{color:var(--text);overflow-wrap:anywhere;font-size:.82rem;font-weight:800}.icon-gallery-card small{color:var(--subtle);letter-spacing:.08em;text-transform:uppercase;margin-top:-8px;font-size:.72rem;font-weight:800}.runtime-instance-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:18px;display:grid}.runtime-instance-card{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--panel-soft);gap:16px;min-width:0;padding:clamp(16px,2.4vw,22px);display:grid}.runtime-instance-card__header h2{margin-bottom:0}.embedded-router-workbench{grid-template-columns:minmax(240px,.72fr) minmax(320px,1.28fr);align-items:stretch;gap:16px;display:grid}.embedded-router-panel,.embedded-router-frame{min-width:0;padding:18px}.embedded-router-frame{background:linear-gradient(145deg,#9fb3ff1f,#0000 46%),#04070f61;place-items:stretch stretch;min-height:320px;display:grid;overflow:auto}.embedded-router-frame .hero{width:100%;box-shadow:none;margin:0}.embedded-router-frame .app-nav{border-radius:var(--radius-md)}.embedded-router-frame h1{font-size:clamp(2rem,6vw,3.6rem)}.embedded-router-controls{gap:16px;display:grid}.embedded-router-form{gap:10px;display:grid}label{color:var(--subtle);letter-spacing:.1em;text-transform:uppercase;gap:10px;font-size:.78rem;font-weight:800;display:grid}input{border:1px solid var(--line-strong);border-radius:var(--radius-sm);width:100%;color:var(--text);background:#00000047;padding:12px 14px}input:focus-visible{border-color:#9fb3ffbf}.embedded-router-form button{justify-self:start}.embedded-router-samples button{min-height:36px;color:var(--accent-strong);box-shadow:none;background:#ffffff14;padding-inline:13px}.embedded-router-samples button:hover,.embedded-router-samples button:focus-visible{color:var(--text);background:#ffffff21}.embedded-router-note{color:var(--subtle);font-size:.92rem}.embedded-route-card{border-radius:var(--radius-md);background:#ffffff0f;border:1px solid #ffffff1f;align-content:center;min-height:100%;padding:clamp(22px,4vw,38px);display:grid}ul{color:var(--muted);padding-left:1.2rem}@media (max-width:820px){.hero{border-radius:22px;width:min(100% - 24px,1120px);margin-block:12px}.app-nav,.app-nav__links,.embedded-router-workbench{grid-template-columns:1fr;display:grid}.app-nav a{justify-content:center}h1{font-size:clamp(2.25rem,14vw,3.7rem)}}.tldraw-demo{width:min(1180px,100vw - 48px)}.tldraw-demo-canvas{background:#f8fafc;border:1px solid #ffffff29;border-radius:20px;height:min(720px,100vh - 340px);min-height:420px;overflow:hidden}