@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap";
:root{--stop-azure-light:#07eefd;--stop-azure-dark:#0058dc;--stop-sunset-warm:#f9ab6d;--stop-sunset-magenta:#d15eed;--stop-sunset-indigo:#484dff;--gradient-azure:linear-gradient(135deg, #07eefd 0%, #0058dc 100%);--gradient-sunset:linear-gradient(135deg, #f9ab6d 0%, #d15eed 46%, #484dff 92%);--gradient-conic:conic-gradient(from 180deg, #07eefd, #0058dc, #484dff, #d15eed, #f9ab6d, #07eefd);--neutral-0:#fff;--neutral-50:#fafafa;--neutral-100:#f4f4f5;--neutral-150:#ededef;--neutral-200:#e4e4e7;--neutral-300:#d4d4d8;--neutral-400:#a1a1aa;--neutral-500:#71717a;--neutral-600:#52525b;--neutral-700:#3f3f46;--neutral-800:#27272a;--neutral-850:#1f1f22;--neutral-900:#18181b;--neutral-950:#0a0a0a;--neutral-1000:#000;--surface-0:#fff;--surface-1:var(--neutral-50);--surface-2:var(--neutral-100);--surface-inv:var(--neutral-950);--surface-inv-raised:var(--neutral-900);--fg-1:var(--neutral-950);--fg-2:var(--neutral-700);--fg-3:var(--neutral-500);--fg-muted:var(--neutral-400);--fg-inv-1:var(--neutral-0);--fg-inv-2:var(--neutral-300);--fg-inv-3:var(--neutral-400);--border-subtle:var(--neutral-150);--border-1:var(--neutral-200);--border-strong:var(--neutral-300);--border-inv-subtle:#ffffff0f;--border-inv:#ffffff1a;--border-inv-strong:#ffffff2e;--action-primary:var(--neutral-1000);--action-primary-hover:var(--neutral-800);--action-primary-press:var(--neutral-700);--action-primary-fg:var(--neutral-0);--action-inv-primary:var(--neutral-0);--action-inv-primary-hover:var(--neutral-200);--action-inv-primary-fg:var(--neutral-1000);--status-critical:#dc2626;--status-warn:#d97706;--status-success:#059669;--status-info:var(--stop-sunset-indigo);--link:var(--stop-sunset-indigo);--link-hover:#6366ff;--link-inv:#8086ff;--font-sans:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--fw-light:300;--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--t-display-xl:80px;--t-display-l:64px;--t-display-m:48px;--t-h1:40px;--t-h2:32px;--t-h3:24px;--t-h4:20px;--t-body-l:18px;--t-body:16px;--t-body-s:14px;--t-caption:13px;--t-micro:12px;--lh-tight:1.05;--lh-snug:1.18;--lh-normal:1.45;--lh-relaxed:1.6;--ls-display:-.035em;--ls-heading:-.02em;--ls-body:-.005em;--ls-eyebrow:.08em;--sp-0:0;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;--sp-20:80px;--sp-24:96px;--sp-32:128px;--r-xs:4px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px;--r-2xl:28px;--r-pill:999px;--shadow-xs:0 1px 2px #0000000d;--shadow-sm:0 2px 4px #0000000a, 0 1px 2px #0000000f;--shadow-md:0 6px 16px #00000012, 0 2px 4px #0000000a;--shadow-lg:0 18px 40px #0000001a, 0 4px 8px #0000000d;--shadow-xl:0 32px 64px #00000026, 0 8px 16px #00000014;--shadow-focus:0 0 0 3px #484dff59;--shadow-inset:inset 0 1px 0 #ffffff14;--ease-standard:cubic-bezier(.2, .7, .1, 1);--ease-emphasis:cubic-bezier(.16, 1, .3, 1);--ease-in:cubic-bezier(.5, 0, .75, 0);--dur-fast:.12s;--dur-base:.2s;--dur-slow:.36s;--dur-reveal:.6s;--container-sm:640px;--container-md:960px;--container-lg:1200px;--container-xl:1360px;--gutter:24px}.conic-ring{isolation:isolate;position:relative}.conic-ring:before{content:"";inset:calc(var(--ring-offset,1.5px) * -1);border-radius:inherit;padding:var(--ring-width,1.5px);background:conic-gradient(from var(--ring-angle,180deg), #07eefd 0%, #0058dc 20%, #484dff 40%, #d15eed 60%, #f9ab6d 80%, #07eefd 100%);-webkit-mask-composite:xor;pointer-events:none;z-index:-1;position:absolute;-webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}@property --ring-angle{syntax:"<angle>";inherits:false;initial-value:180deg}@keyframes conic-ring-spin{0%{--ring-angle:180deg}to{--ring-angle:540deg}}.conic-ring--spin:before{animation:conic-ring-spin var(--ring-duration,6s) linear infinite}.t-display-xl,.t-display-l,.t-display-m,.t-h1,.t-h2,.t-h3,.t-h4{font-family:var(--font-sans);font-weight:var(--fw-medium);letter-spacing:var(--ls-display);line-height:var(--lh-tight);color:var(--fg-1);text-wrap:balance}.t-display-xl{font-size:var(--t-display-xl);font-weight:var(--fw-medium)}.t-display-l{font-size:var(--t-display-l)}.t-display-m{font-size:var(--t-display-m)}.t-h1{font-size:var(--t-h1);letter-spacing:var(--ls-heading);line-height:var(--lh-snug)}.t-h2{font-size:var(--t-h2);letter-spacing:var(--ls-heading);line-height:var(--lh-snug)}.t-h3{font-size:var(--t-h3);letter-spacing:var(--ls-heading);line-height:var(--lh-snug);font-weight:var(--fw-semibold)}.t-h4{font-size:var(--t-h4);letter-spacing:var(--ls-heading);line-height:var(--lh-snug);font-weight:var(--fw-semibold)}.t-body-l{font:var(--fw-regular) var(--t-body-l)/var(--lh-relaxed) var(--font-sans);color:var(--fg-2)}.t-body{font:var(--fw-regular) var(--t-body)/var(--lh-normal) var(--font-sans);color:var(--fg-1)}.t-body-s{font:var(--fw-regular) var(--t-body-s)/var(--lh-normal) var(--font-sans);color:var(--fg-2)}.t-caption{font:var(--fw-regular) var(--t-caption)/var(--lh-normal) var(--font-sans);color:var(--fg-3)}.t-eyebrow{font:var(--fw-medium) var(--t-micro)/1.2 var(--font-mono);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--fg-3)}.t-mono{font-family:var(--font-mono);font-size:var(--t-body-s);color:var(--fg-2)}
*{box-sizing:border-box}html{background:var(--surface-0);min-height:100%}body{min-height:100vh;color:var(--fg-1);background:var(--surface-0);font-family:var(--font-sans);letter-spacing:0;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button{border:0}img,svg{display:block}:focus-visible{outline:2px solid var(--fg-1);outline-offset:3px}.app-shell{grid-template-columns:272px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{border-right:1px solid var(--border-1);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#fffffff5;flex-direction:column;justify-content:space-between;height:100vh;padding:22px 18px;display:flex;position:sticky;top:0}.brand-lockup{align-items:center;gap:10px;min-width:0;display:inline-flex}.brand-mark{object-fit:contain;flex:none;width:30px;height:20px}.brand-word{color:var(--fg-1);font-size:18px;font-weight:var(--fw-semibold);letter-spacing:0;line-height:1}.brand-word span{color:var(--fg-3);font-weight:var(--fw-medium)}.nav-list{flex-direction:column;gap:6px;margin-top:30px;display:flex}.nav-link{border-radius:var(--r-sm);min-height:40px;color:var(--fg-2);font-size:14px;font-weight:var(--fw-medium);letter-spacing:0;transition:background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);align-items:center;gap:10px;padding:0 11px;display:flex}.nav-link svg,.control-button svg,.text-link svg,.brand-action svg{stroke-width:1.75px;width:16px;height:16px}.nav-link:hover{background:var(--surface-2);color:var(--fg-1)}.nav-link.is-active{background:var(--fg-1);color:var(--fg-inv-1)}.sidebar-note{border:1px solid var(--border-1);border-radius:var(--r-md);background:var(--surface-1);padding:14px}.sidebar-note strong{color:var(--fg-1);font-size:13px;line-height:1.25;display:block}.sidebar-note span{color:var(--fg-3);margin-top:6px;font-size:12px;line-height:1.45;display:block}.shell-main{min-width:0;padding:34px}.page-frame{max-width:1180px;margin:0 auto}.page-header{justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:24px;display:flex}.eyebrow{color:var(--fg-3);font-family:var(--font-mono);font-size:12px;font-weight:var(--fw-semibold);letter-spacing:0;text-transform:uppercase;margin:0 0 10px;line-height:1}.page-title{max-width:760px;color:var(--fg-1);font-size:48px;font-weight:var(--fw-medium);letter-spacing:0;margin:0;line-height:1.04}.page-copy{max-width:680px;color:var(--fg-2);letter-spacing:0;margin:14px 0 0;font-size:17px;line-height:1.55}.brand-action,.button,.control-button,.text-link{border-radius:var(--r-sm);min-height:38px;font-size:14px;font-weight:var(--fw-semibold);letter-spacing:0;cursor:pointer;justify-content:center;align-items:center;gap:8px;padding:0 14px;display:inline-flex}.brand-action{isolation:isolate;color:var(--fg-1);background:var(--surface-0);box-shadow:var(--shadow-sm);--ring-width:1.5px;--ring-offset:0px;--ring-duration:6s;transition:box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), background var(--dur-base) var(--ease-standard);flex:none;position:relative}.brand-action:hover{transform:translateY(-.5px);box-shadow:0 2px 4px #484dff38,0 14px 32px -8px #484dff85,0 8px 22px -8px #d15eed61}.button-primary{color:var(--action-primary-fg);background:var(--action-primary)}.button-secondary,.control-button{color:var(--fg-1);background:var(--surface-0);border:1px solid var(--border-1)}.control-button{min-height:34px;padding:0 12px}.control-button[aria-pressed=true]{color:var(--fg-inv-1);background:var(--fg-1);border-color:var(--fg-1)}.text-link{color:var(--fg-1);min-height:32px;padding:0}.hero-panel{border:1px solid var(--border-1);border-radius:var(--r-lg);background:var(--surface-1);padding:24px}.hero-grid{grid-template-columns:minmax(0,1fr) 340px;gap:20px;display:grid}.route-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px;display:grid}.route-tile,.metric-tile,.token-card,.primitive-panel,.block-row{border:1px solid var(--border-1);border-radius:var(--r-md);background:var(--surface-0)}.route-tile{min-height:132px;transition:border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);flex-direction:column;justify-content:space-between;gap:16px;padding:16px;display:flex}.route-tile:hover{border-color:var(--border-strong);transform:translateY(-1px)}.route-kicker,.token-value,.block-meta,.metric-label{color:var(--fg-3);font-family:var(--font-mono);letter-spacing:0;font-size:12px;line-height:1.25}.route-tile h2,.primitive-panel h2,.block-row h2,.token-card h2,.metric-tile strong{color:var(--fg-1);font-size:18px;font-weight:var(--fw-semibold);letter-spacing:0;margin:0;line-height:1.2}.route-tile p,.primitive-panel p,.block-row p,.token-card p,.metric-tile p{color:var(--fg-2);margin:8px 0 0;font-size:14px;line-height:1.45}.metric-stack{gap:12px;display:grid}.metric-tile{padding:16px}.metric-bar{grid-template-columns:90px 1fr;align-items:center;gap:10px;margin-top:12px;display:grid}.metric-line{border-radius:var(--r-pill);background:var(--surface-2);height:8px;overflow:hidden}.metric-line span{border-radius:inherit;background:var(--fg-1);height:100%;display:block}.section-stack{gap:14px;display:grid}.two-column{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;display:grid}.token-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.token-card{padding:16px}.swatch-row{gap:8px;margin-top:14px;display:grid}.swatch{grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;display:grid}.swatch>span:not(.swatch-chip){gap:3px;min-width:0;display:grid}.swatch strong{min-width:0;color:var(--fg-1);overflow-wrap:anywhere;display:block}.swatch .token-value{display:block}.swatch>.token-value{text-align:right;white-space:nowrap}.swatch-chip{border:1px solid var(--border-1);border-radius:var(--r-xs);width:38px;height:28px}.theme-contract{border:1px solid var(--border-1);border-radius:var(--r-lg);background:var(--surface-1);grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:18px;margin-top:18px;padding:20px;display:grid}.theme-contract h2,.theme-mode-card h3{color:var(--fg-1);font-weight:var(--fw-medium);letter-spacing:0;margin:0}.theme-contract h2{font-size:24px;line-height:1.1}.theme-contract p{max-width:460px;color:var(--fg-2);margin:10px 0 0;font-size:14px;line-height:1.5}.theme-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.theme-mode-card{border:1px solid var(--border-1);border-radius:var(--r-md);background:var(--surface-0);padding:14px}.theme-mode-card header{align-items:center;gap:10px;display:flex}.theme-mode-card h3{text-transform:capitalize;font-size:16px;line-height:1.2}.theme-mode-swatch{border:1px solid var(--border-1);border-radius:var(--r-sm);width:28px;height:28px;box-shadow:var(--shadow-xs)}.theme-mode-card dl{gap:8px;margin:14px 0 0;display:grid}.theme-mode-card dl div{grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:10px;min-width:0;display:grid}.theme-mode-card dt,.theme-mode-card dd{font-family:var(--font-mono);font-size:11px;line-height:1.25}.theme-mode-card dt{min-width:0;color:var(--fg-2);overflow-wrap:anywhere}.theme-mode-card dd{color:var(--fg-1);white-space:nowrap;margin:0}.primitive-panel{padding:18px}.component-demo{flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;display:flex}.sample-card{border:1px solid var(--border-1);border-radius:var(--r-md);background:var(--surface-0);width:min(100%,320px);padding:16px}.sample-card header{justify-content:space-between;align-items:center;gap:12px;display:flex}.badge{border-radius:var(--r-pill);min-height:24px;color:var(--fg-1);background:var(--surface-2);font-size:12px;font-weight:var(--fw-semibold);align-items:center;padding:0 9px;display:inline-flex}.badge-success{color:var(--status-success);background:#0596691a}.input-demo{border:1px solid var(--border-1);border-radius:var(--r-sm);width:min(100%,280px);height:36px;color:var(--fg-1);background:var(--surface-0);padding:0 11px}.block-list{gap:12px;display:grid}.block-row{grid-template-columns:minmax(0,1fr) 180px;align-items:center;gap:18px;padding:18px;display:grid}.block-tags{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.preview-shell{grid-template-columns:minmax(0,1fr) 220px;align-items:start;gap:18px;display:grid}.preview-stage{border:1px solid var(--border-1);border-radius:var(--r-lg);background:var(--surface-1);min-height:520px;padding:18px}.preview-device{border:1px solid var(--border-strong);border-radius:var(--r-md);background:var(--surface-0);min-height:430px;box-shadow:var(--shadow-md);transition:width var(--dur-slow) var(--ease-emphasis);margin:0 auto;overflow:hidden}.preview-device[data-mode=desktop]{width:min(100%,860px)}.preview-device[data-mode=tablet]{width:min(100%,680px)}.preview-device[data-mode=mobile]{width:min(100%,390px)}.preview-device[data-mode=expo]{border-radius:24px;width:min(100%,430px)}.preview-toolbar{border-bottom:1px solid var(--border-1);background:var(--surface-1);justify-content:space-between;align-items:center;gap:12px;min-height:42px;padding:0 14px;display:flex}.preview-dots{gap:6px;display:flex}.preview-dots span{background:var(--neutral-300);border-radius:50%;width:8px;height:8px}.preview-content{gap:14px;padding:18px;display:grid}.preview-hero{grid-template-columns:minmax(0,1fr) 150px;align-items:center;gap:16px;display:grid}.preview-title{color:var(--fg-1);font-size:32px;font-weight:var(--fw-medium);letter-spacing:0;margin:0;line-height:1.08}.preview-copy{color:var(--fg-2);letter-spacing:0;margin:12px 0 0;font-size:15px;line-height:1.5}.preview-device[data-mode=mobile] .preview-hero,.preview-device[data-mode=expo] .preview-hero{grid-template-columns:1fr}.mini-chart{border:1px solid var(--border-1);border-radius:var(--r-sm);grid-template-columns:repeat(5,1fr);align-items:end;gap:6px;height:96px;padding:10px;display:grid}.mini-chart span{border-radius:var(--r-xs);background:var(--fg-1)}.mini-chart span:nth-child(2){background:var(--stop-sunset-warm)}.mini-chart span:nth-child(4){background:var(--stop-sunset-indigo)}.control-stack{gap:9px;display:grid}.system-catalog-spacer{margin-top:18px}.expo-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:stretch;gap:16px;display:grid}.expo-launch-card,.expo-runbook-card{border:1px solid var(--border-1);border-radius:var(--r-lg);background:var(--surface-1);gap:18px;padding:20px;display:grid}.expo-launch-card h2,.expo-runbook-card h2{color:var(--fg-1);font-size:24px;font-weight:var(--fw-medium);letter-spacing:0;margin:0;line-height:1.15}.expo-launch-card p,.expo-runbook-card p{color:var(--fg-2);margin:10px 0 0;font-size:14px;line-height:1.55}.expo-qr-wrap{border:1px solid var(--border-1);border-radius:var(--r-md);background:#fff;place-items:center;width:min(100%,260px);padding:18px;display:grid}.expo-action-row{flex-wrap:wrap;gap:10px;display:flex}.command-stack{gap:10px;display:grid}.command-line{border:1px solid var(--border-1);border-radius:var(--r-sm);background:var(--surface-0);grid-template-columns:150px minmax(0,1fr);align-items:center;gap:10px;padding:10px;display:grid}.command-line span{color:var(--fg-2);font-size:12px;font-weight:var(--fw-semibold);align-items:center;gap:7px;line-height:1.3;display:inline-flex}.command-line svg{stroke-width:1.8px;width:15px;height:15px}.command-line code{min-width:0;color:var(--fg-1);font-family:var(--font-mono);overflow-wrap:anywhere;font-size:12px;line-height:1.45}.expo-definition-list{gap:9px;margin:0;display:grid}.expo-definition-list div{grid-template-columns:130px minmax(0,1fr);gap:10px;display:grid}.expo-definition-list dt,.expo-definition-list dd{font-family:var(--font-mono);font-size:12px;line-height:1.35}.expo-definition-list dt{color:var(--fg-3)}.expo-definition-list dd{min-width:0;color:var(--fg-1);overflow-wrap:anywhere;margin:0}.control-group{border:1px solid var(--border-1);border-radius:var(--r-md);gap:8px;padding:12px;display:grid}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (max-width:980px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:0;border-bottom:1px solid var(--border-1);height:auto;position:static}.nav-list{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-top:18px;display:grid}.sidebar-note{display:none}.hero-grid,.expo-grid,.preview-shell,.block-row,.theme-contract{grid-template-columns:1fr}.route-grid,.token-grid,.theme-mode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:640px){.shell-main{padding:22px 16px}.page-header{flex-direction:column}.page-title{font-size:36px}.page-copy{font-size:16px}.nav-list,.route-grid,.token-grid,.theme-mode-grid,.two-column{grid-template-columns:1fr}.nav-link{min-height:38px}.preview-stage{min-height:auto;padding:10px}.preview-content{padding:16px}.preview-hero{grid-template-columns:1fr}.preview-title{font-size:28px}.command-line,.expo-definition-list div{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.brand-action,.brand-action.conic-ring:before,.conic-ring--spin:before,.preview-device,.route-tile{transition:none;animation:none}}