:root{--ink:#222a43;--muted:#717b91;--line:#e0e5ef;--paper:#f5f7fc;--white:#fff;--primary:#5653c5;--primary-pale:#eeedff;--mint:#3a9883;--amber:#bb7b43;--red:#b65f5f;--radius:24px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:radial-gradient(circle at 10% 5%,#f4eefe,transparent 34%),radial-gradient(circle at 98% 22%,#e4f1fb,transparent 32%),var(--paper);line-height:1.5}button,a{font:inherit}button{cursor:pointer}a{text-decoration:none;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #938bfc;outline-offset:3px}button:disabled{opacity:.45}
.app-shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px max(22px,calc((100vw - 1150px)/2));border-bottom:1px solid #ffffffaf;background:#ffffffc8;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.brand{display:flex;align-items:center;gap:11px}.brand-mark{display:grid;place-items:center;width:43px;height:43px;border-radius:15px;color:white;background:linear-gradient(145deg,#625fe2,#5b91d9);box-shadow:0 5px 14px #4c5acc32}.brand-title{display:block;font-weight:790;font-size:15px;line-height:1.2;letter-spacing:-.35px}.brand-subtitle{display:block;margin-top:4px;font-size:9px;letter-spacing:1.2px;color:var(--muted);font-weight:700}.header-tag{display:flex;gap:7px;align-items:center;color:#557a72;background:#e5f3ef;border:1px solid #cce7dd;padding:7px 11px;border-radius:99px;font-size:11px;font-weight:750;white-space:nowrap}.tiny-circle{width:7px;height:7px;border-radius:50%;background:#58a58e}
main{max-width:1150px;margin:0 auto;padding:0 22px}.hero{padding:81px 10px 48px;text-align:center}.eyebrow,.section-kicker,.proposal-label,.mode-caption{font-size:11px;font-weight:850;letter-spacing:2px;color:#7262c9;text-transform:uppercase}.dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:#aea1e1;vertical-align:middle;margin:0 4px}.hero h1{font-size:clamp(39px,7.2vw,74px);line-height:1.055;letter-spacing:-3.3px;margin:19px 0 19px;font-weight:800}.question{color:#7871db}.hero-desc{max-width:685px;margin:0 auto;color:#68748d;font-size:17px;line-height:1.65}.hero-pills{display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:27px}.hero-pills span{background:#fff9;border:1px solid #fff;padding:7px 14px;font-size:11px;color:#637089;border-radius:99px;box-shadow:0 3px 12px #44567c0b}
.main-nav{display:flex;gap:6px;padding:7px;background:#fff9;border:1px solid #fff;border-radius:19px;box-shadow:0 6px 23px #283f670d;overflow:auto;scrollbar-width:none;position:sticky;top:72px;z-index:10;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.main-nav::-webkit-scrollbar{display:none}.nav-link{white-space:nowrap;padding:10px 16px;border-radius:13px;color:#6a7489;font-size:13px;font-weight:650}.nav-link:hover,.nav-link:focus{background:#eeeefd;color:#5049ab}
.section{padding:63px 0 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:18px}.section-kicker{margin:0 0 10px}.section-heading h2{font-size:clamp(24px,4vw,35px);letter-spacing:-1.5px;margin:0;line-height:1.15}.small-label{font-size:12px;color:#9299aa}.section-lead{color:#707b91;max-width:750px;line-height:1.65;margin:0 0 25px;font-size:14px}.section-lead strong{color:#47546d}
.legend{display:flex;gap:19px;flex-wrap:wrap;margin:17px 0}.legend span{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:640;color:#7b8599}.l-dot{width:10px;height:10px;border-radius:50%;display:inline-block}.l-dot.local{background:#5d87cf}.l-dot.cloud{background:#8765cb}.l-dot.third{background:#eba568}
.network-wrap{background:#fff;border:1px solid #e9eaf3;border-radius:27px;padding:15px;box-shadow:0 14px 45px #445d8410}.network-scroller{width:100%;overflow:auto;scrollbar-width:thin;scrollbar-color:#d9def0 transparent}.network-scroller svg{display:block;width:100%;min-width:780px;height:auto}.network-note{font-size:11px;color:#939ab0;margin:0;padding:0 7px 8px}.net-edge{stroke-width:2.4;fill:none;opacity:.76}.net-edge.blue{stroke:#8eb1e8}.net-edge.purple{stroke:#a496e2}.net-edge.orange{stroke:#e7bd8e}.net-edge.dashed{stroke-dasharray:7 7}.net-node{cursor:pointer;outline:none;transition:opacity .15s}.net-node rect{filter:drop-shadow(0 5px 11px rgba(49,65,107,.09))}.net-node:hover rect,.net-node.selected rect{stroke-width:3.5}.net-node:focus rect{stroke:#3133bb;stroke-width:3.5}.net-node text{pointer-events:none}.net-label{fill:#29324b;font-size:16px;font-weight:720}.net-sub{fill:#808da5;font-size:11px}.net-tag{fill:#78829d;font-size:9px;font-weight:680;letter-spacing:1px}.net-heading{fill:#a0a5b4;font-size:11px;font-weight:800;letter-spacing:2px}.net-edge-label{fill:#8a94a7;font-size:10px;font-weight:630}
.node-detail{background:linear-gradient(135deg,#fdfdff,#f0effc);border:1px solid #e9e6f9;margin-top:14px;padding:22px 25px;border-radius:22px;display:grid;grid-template-columns:1fr 1.3fr;gap:20px;box-shadow:0 9px 30px #3d39700a}.node-detail h3{font-size:21px;margin:4px 0 5px;letter-spacing:-.6px}.node-detail p{margin:0;color:#64718c;font-size:13px;line-height:1.6}.node-detail ul{margin:0;padding-left:18px;color:#5e6d83;font-size:13px;line-height:1.9}.node-detail .node-meta{color:#8177b7;font-size:10px;letter-spacing:1px;font-weight:820;text-transform:uppercase}
.explorer{display:grid;grid-template-columns:252px 1fr;gap:15px;align-items:start}.flow-picker{background:#ffffffad;border:1px solid #eceff6;border-radius:22px;padding:11px;display:grid;gap:5px}.flow-choice{text-align:left;background:none;border:1px solid transparent;border-radius:13px;padding:11px 12px;display:flex;align-items:center;gap:10px;color:#59667e;font-size:13px;font-weight:620}.flow-choice:hover{background:#f6f5ff}.flow-choice.active{color:#5044ae;background:#efedff;border-color:#dedafc}.flow-choice .flow-emoji{font-size:19px;display:grid;place-items:center;width:24px}.flow-view{border:1px solid #e9ebf3;background:#fff;border-radius:25px;padding:26px 27px;box-shadow:0 12px 45px #445d840c;min-height:510px}.flow-title-row{display:flex;justify-content:space-between;gap:13px;align-items:start}.flow-code{display:block;color:#9a96b8;font-size:10px;letter-spacing:1.5px;font-weight:750}.flow-title-row h3{font-size:23px;letter-spacing:-1px;line-height:1.2;margin:7px 0}.flow-subtitle{margin:0 0 16px;color:#7d8799;font-size:13px;max-width:500px}.flow-status{white-space:nowrap;padding:5px 9px;background:#eef8f4;border-radius:20px;color:#558573;font-size:10px;font-weight:800}.flow-status.gap{background:#fff4e8;color:#a5773c}.flow-steps{margin:4px 0}.flow-step{display:grid;grid-template-columns:28px 1fr;gap:10px;position:relative;padding-bottom:17px}.flow-step:not(:last-child):before{content:"";position:absolute;left:13px;top:27px;bottom:0;border-left:2px solid #d4d9ec}.step-num{width:28px;height:28px;position:relative;z-index:1;display:grid;place-items:center;background:#e9e8fc;color:#5d5bc2;font-size:11px;font-weight:800;border-radius:50%;margin-top:3px}.step-card{border:1px solid #eff0f5;border-radius:14px;padding:12px 14px;background:#fcfcff}.step-card strong{display:block;font-size:13px;color:#3c4762;margin-bottom:3px}.step-card p{margin:0;color:#798498;font-size:12px;line-height:1.52}.step-card small{display:block;color:#8b95a7;margin-top:7px;font-size:10px}.step-card.warn{background:#fffbf5;border-color:#f6e5d1}.step-card.warn strong{color:#a46b3c}.flow-proposal{margin-top:9px;padding:17px;background:#f0f4ff;border:1px solid #e0e8fe;border-radius:14px}.flow-proposal p{margin:8px 0 0;color:#526383;font-size:13px;line-height:1.6}.proposal-label{color:#5965c1;font-size:10px}
.storage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.storage-card{background:#fff;border:1px solid #e8ecf5;border-radius:21px;padding:22px;box-shadow:0 8px 24px #344a7809}.storage-card .storage-icon{font-size:26px;display:block;margin-bottom:10px}.storage-card h3{margin:0 0 7px;font-size:18px;letter-spacing:-.5px}.storage-card .storage-location{color:#7065b6;font-size:11px;font-weight:740}.storage-card p{color:#758197;font-size:12px;line-height:1.62;margin:9px 0 0}.storage-card .storage-foot{border-top:1px solid #edf0f5;padding-top:12px;margin-top:14px;color:#8b92a3;font-size:10px}.disclosure{display:flex;gap:13px;background:#fefaf4;border:1px solid #f1e7d7;padding:18px 21px;border-radius:19px;margin-top:15px}.disclosure-icon{flex:none;background:#f0debb;border-radius:50%;width:25px;height:25px;display:grid;place-items:center;color:#896c3a;font-weight:bold;font-style:italic}.disclosure strong{font-size:13px}.disclosure p{font-size:12px;color:#8d7a60;margin:5px 0 0;line-height:1.6}
.frequency-list{display:grid;gap:8px}.frequency-item{display:grid;grid-template-columns:220px 1fr auto;align-items:center;gap:15px;padding:17px 19px;background:#fff;border:1px solid #e9edf5;border-radius:14px}.frequency-item strong{font-size:13px}.frequency-item p{font-size:12px;margin:0;color:#7e899b}.frequency-item .when{font-size:11px;color:#6962b5;background:#f0eeff;padding:6px 9px;border-radius:12px;font-weight:720;white-space:nowrap}.mode-panel{margin-top:16px;padding:23px;background:linear-gradient(130deg,#eeedff,#f9fcff);border:1px solid #e4e1fc;border-radius:21px}.mode-panel h3{margin:6px 0;font-size:20px;letter-spacing:-.5px}.mode-panel p{font-size:12px;color:#727d96;margin:0}.mode-options{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 12px}.mode-button{background:white;border:1px solid #dadcf1;border-radius:11px;padding:9px 15px;color:#625d87;font-size:12px;font-weight:750}.mode-button.active{background:#635fc9;border-color:#635fc9;color:#fff}.mode-description{font-weight:600;min-height:18px}
.last-section{padding-bottom:60px}.takeaway{background:#252c48;color:#fff;padding:36px;border-radius:28px;position:relative;overflow:hidden}.takeaway:before{content:"";position:absolute;right:-40px;top:-105px;background:radial-gradient(circle,#5b6ab350,transparent 70%);width:460px;height:440px;pointer-events:none}.takeaway .section-kicker{color:#bfbaff}.takeaway h2{font-size:clamp(28px,5vw,40px);letter-spacing:-1.5px;line-height:1.18;margin:12px 0 26px}.takeaway h2 em{font-style:normal;color:#bfb6ff}.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}.next-grid>div{border-top:1px solid #53607b;padding-top:12px}.next-grid .index{display:block;font-size:11px;color:#a9abff;font-weight:790;margin-bottom:10px}.next-grid strong{font-size:13px}.next-grid p{font-size:12px;color:#b1bfd1;line-height:1.6;margin:5px 0}.next-grid code{color:#e0d8ff}
footer{display:flex;gap:12px;justify-content:space-between;padding:18px 0 30px;border-top:1px solid #e5e8f1;color:#9ca5b6;font-size:11px}
@media(max-width:850px){.storage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.explorer{grid-template-columns:1fr}.flow-picker{display:flex;overflow-x:auto;scrollbar-width:none;padding:9px}.flow-choice{white-space:nowrap;flex:none}.frequency-item{grid-template-columns:160px 1fr;gap:7px}.frequency-item .when{grid-column:2;justify-self:start}}
@media(max-width:600px){main{padding:0 15px}.topbar{padding:11px 15px}.brand-mark{width:37px;height:37px}.brand-title{font-size:13px}.brand-subtitle{font-size:8px}.header-tag{font-size:9px;padding:6px 8px}.hero{padding:61px 0 39px}.hero h1{letter-spacing:-2px}.hero-desc{font-size:14px}.main-nav{top:63px;border-radius:14px}.nav-link{padding:9px 13px;font-size:11px}.section{padding-top:47px}.section-heading{align-items:start}.small-label{font-size:10px}.section-heading h2{letter-spacing:-.8px}.legend{gap:12px}.legend span{font-size:10px}.network-wrap{padding:9px;border-radius:18px}.network-scroller svg{min-width:755px}.node-detail{grid-template-columns:1fr;padding:18px;gap:9px}.flow-view{padding:18px;border-radius:19px}.flow-title-row h3{font-size:20px}.flow-status{font-size:9px}.storage-grid{grid-template-columns:1fr}.frequency-item{grid-template-columns:1fr;gap:4px}.frequency-item .when{grid-column:1}.takeaway{padding:23px;border-radius:20px}.next-grid{grid-template-columns:1fr;gap:14px}footer{flex-direction:column}}