:root{--ink:#11110f;--paper:#f1efe8;--acid:#d9ff3f;--orange:#ff674d;--blue:#5b79ff;--soft:#dedbd2;--line:#c9c7be;--muted:#62625c}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}.shell{padding-left:clamp(22px,6.5vw,104px);padding-right:clamp(22px,6.5vw,104px)}.site-nav{height:72px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid var(--line)}.brand{font-size:24px;font-weight:900;letter-spacing:-1.5px}.brand span{color:var(--orange)}.crumb{margin:0;font-size:9px;letter-spacing:.14em;font-weight:900}.language{justify-self:end;padding:9px 14px;background:transparent;border:1px solid var(--ink);font-size:10px;letter-spacing:.1em;font-weight:900;cursor:pointer}.language:hover{background:var(--ink);color:#fff}.eyebrow{margin:0;font-size:9px;letter-spacing:.19em;font-weight:900}.hero{min-height:740px;padding-top:84px;padding-bottom:70px;display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:center}.hero h1{margin:28px 0 35px;font-size:clamp(62px,7.7vw,116px);line-height:.86;letter-spacing:-.075em}.hero h1 em{font-family:Georgia,serif;font-weight:400}.intro{max-width:620px;margin:0;color:#393934;font:18px/1.55 Georgia,serif}.start{display:inline-flex;align-items:center;gap:42px;margin-top:35px;padding:16px 18px;background:var(--ink);color:#fff;font-size:11px;font-weight:900}.start:hover{background:var(--orange)}.browser-demo{background:#181816;color:#fff;min-height:440px;position:relative;box-shadow:30px 34px var(--acid)}.browser-top{height:58px;border-bottom:1px solid #363633;display:flex;align-items:center;gap:6px;padding:0 14px}.browser-top>i{width:7px;height:7px;border-radius:50%;background:#555}.browser-top>div{margin-left:7px;flex:1;height:30px;background:#282826;display:flex;align-items:center;gap:9px;padding:0 11px;font-size:9px}.browser-top b{font-weight:500;color:#c8c8c0}.network-stage{height:270px;position:relative}.request-line{position:absolute;left:16%;right:16%;top:50%;height:1px;background:#474742}.request-line i{position:absolute;inset:-1px;background:linear-gradient(90deg,transparent,var(--acid),transparent);animation:pulse 2.6s infinite}.endpoint{position:absolute;top:50%;transform:translate(-50%,-50%);width:82px;height:82px;border:1px solid #5e5e58;border-radius:50%;background:#181816;display:grid;place-items:center;z-index:2}.endpoint span{font-size:8px;color:#888}.endpoint b{font-size:9px;letter-spacing:.12em}.endpoint-browser{left:16%}.endpoint-dns{left:50%;border-color:var(--acid)}.endpoint-server{left:84%}.packet{position:absolute;left:16%;top:calc(50% - 11px);width:35px;height:22px;border-radius:12px;background:var(--orange);display:grid;place-items:center;color:#111;font-size:7px;font-weight:900;animation:packet 4s ease-in-out infinite;z-index:3}.browser-demo>p{margin:0 22px;padding-top:18px;border-top:1px solid #363633;display:grid;grid-template-columns:auto 1fr;column-gap:10px}.browser-demo>p span{font-size:35px;color:var(--acid);grid-row:1/3}.browser-demo>p strong{font-size:12px}.browser-demo>p small{margin-top:3px;color:#8f8f89;font-size:8px}.quick{background:var(--orange);padding:56px 0}.quick-grid{display:grid;grid-template-columns:.42fr 1.58fr;gap:6vw}.quick-grid>p:last-child{margin:0;font-size:clamp(27px,3.3vw,48px);line-height:1.05;letter-spacing:-.04em}.journey,.section{padding-top:105px;padding-bottom:105px}.section-head{display:grid;grid-template-columns:1.1fr .72fr;gap:8vw;align-items:end;margin-bottom:48px}.section-head h2{margin:20px 0 0;font-size:clamp(48px,6vw,88px);line-height:.92;letter-spacing:-.065em}.section-head>p{max-width:530px;margin:0;color:var(--muted);font:16px/1.55 Georgia,serif}.journey-layout{display:grid;grid-template-columns:.75fr 1.25fr;gap:14px}.steps{margin:0;padding:0;list-style:none}.steps button{width:100%;min-height:69px;padding:0 16px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;text-align:left;border:0;border-top:1px solid #aaa89f;background:transparent;cursor:pointer}.steps li:last-child button{border-bottom:1px solid #aaa89f}.steps button span{font-size:8px;color:#777}.steps button b{font-size:14px}.steps button i{font-style:normal;font-size:15px;opacity:0}.steps button:hover,.steps button.active{background:var(--acid)}.steps button.active i{opacity:1}.stage-card{min-height:500px;padding:44px;background:var(--ink);color:#fff;display:flex;flex-direction:column}.stage-card>span{font-size:9px;letter-spacing:.16em;color:var(--acid)}.stage-card h3{max-width:680px;margin:65px 0 22px;font-size:clamp(40px,4.6vw,68px);line-height:.94;letter-spacing:-.055em}.stage-card>p{max-width:660px;margin:0;color:#b9b9b2;font:17px/1.55 Georgia,serif}.stage-facts{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px}.stage-facts div{padding:15px;border:1px solid #41413d}.stage-facts small{display:block;margin-bottom:8px;font-size:7px;letter-spacing:.13em;color:#85857f}.stage-facts b{font-size:11px;line-height:1.4}.layers{padding:110px 0;background:var(--ink);color:#fff}.layers-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:9vw}.layers h2,.history h2,.next h2{margin:25px 0;font-size:clamp(50px,6.5vw,94px);line-height:.9;letter-spacing:-.065em}.layers-grid>div:first-child>p:last-child{max-width:560px;color:#aaa;font:16px/1.55 Georgia,serif}.layer-stack article{border-top:1px solid #40403c;padding:22px 0;display:grid;grid-template-columns:43px .65fr 1.4fr;gap:20px;align-items:center}.layer-stack article:last-child{border-bottom:1px solid #40403c}.layer-stack span{color:var(--acid);font-size:8px}.layer-stack b{font-size:12px;letter-spacing:.12em}.layer-stack p{margin:0;color:#aaa;font:14px/1.4 Georgia,serif}.experiment{border-bottom:1px solid var(--line)}.devtools{background:#20211f;color:#e7e7e0;border:1px solid #0c0c0b;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.dev-head{height:49px;padding:0 15px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #3a3b38;font-size:10px}.dev-head span{color:#88a1ff;border-bottom:2px solid #88a1ff;height:49px;display:flex;align-items:center}.dev-table>div{min-height:39px;padding:0 13px;display:grid;grid-template-columns:1.5fr .5fr .7fr .6fr .5fr;gap:12px;align-items:center;border-bottom:1px solid #30312f;font-size:9px}.dev-labels{color:#92938e}.dev-table .ok{color:#8fd277}.waterfall{height:88px;padding:20px 13px;display:grid;gap:8px}.waterfall i{display:block;height:7px;background:linear-gradient(90deg,#7492ff 0 18%,#8bd27f 18% 62%,#ffcf6a 62% 100%)}.waterfall i:nth-child(2){margin-left:13%;width:55%}.waterfall i:nth-child(3){margin-left:28%;width:44%}.watch-section{padding:105px 0;background:#d8ff3f}.section-head.light>p{color:#38410f}.video-wrap{display:grid;grid-template-columns:1.35fr .65fr;background:var(--ink);color:#fff}.video-wrap iframe{width:100%;aspect-ratio:16/9;border:0}.video-note{padding:32px;display:flex;flex-direction:column;justify-content:space-between}.video-note p,.video-note span{font-size:8px;letter-spacing:.14em}.video-note h3{margin:17px 0;font-size:28px;line-height:1.02;letter-spacing:-.04em}.video-note>div:last-child{display:grid;gap:7px;padding-top:25px;border-top:1px solid #44443f}.video-note b{margin-bottom:12px;font-size:11px}.filters{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.tabs{display:flex;gap:5px}.tabs button{padding:10px 13px;border:1px solid #aaa89f;background:transparent;font-size:9px;font-weight:900;cursor:pointer}.tabs button.active,.tabs button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}.filters>p{margin:0;font-size:8px;letter-spacing:.13em}.resource{display:grid;grid-template-columns:55px 1fr 150px;gap:25px;padding:26px 0;border-top:1px solid #aaa89f}.resource:last-child{border-bottom:1px solid #aaa89f}.resource-no{font-size:9px}.resource-meta{display:flex;gap:8px}.resource-meta span,.resource-meta b{padding:4px 6px;font-size:7px;letter-spacing:.12em}.resource-meta b{background:#3f5f46;color:#fff}.resource-meta .video{background:#913b28}.resource-meta .advanced{background:#544b79}.resource h3{margin:17px 0 10px;font-size:24px;letter-spacing:-.03em}.resource-main>p{max-width:750px;margin:0;color:#56564f;font:14px/1.5 Georgia,serif}.why{display:grid;grid-template-columns:95px 1fr;gap:12px;margin-top:18px;padding:13px;background:#e1ded5}.why small{font-size:7px;letter-spacing:.11em;font-weight:900}.why span{font-size:11px;line-height:1.4}.resource-side{display:flex;flex-direction:column;align-items:flex-end;text-align:right}.resource-side strong{font-size:43px;letter-spacing:-.07em}.resource-side small{font-size:7px;letter-spacing:.1em}.resource-side p{margin:auto 0 9px;font-size:10px;font-weight:900}.resource-side a{padding-bottom:4px;border-bottom:1px solid;font-size:9px}.history{padding:105px 0;background:var(--soft)}.history-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:9vw}.history ol{margin:0;padding:0;list-style:none}.history li{padding:23px 0;border-top:1px solid #aaa89f;display:grid;grid-template-columns:80px .75fr 1.25fr;gap:20px}.history li:last-child{border-bottom:1px solid #aaa89f}.history time{font-size:11px;font-weight:900}.history b{font-size:15px}.history li p{margin:0;color:#5a5a54;font:14px/1.45 Georgia,serif}.next{padding-top:120px;padding-bottom:120px;text-align:center}.next h2{max-width:980px;margin:35px auto 60px}.next>div{max-width:840px;margin:auto}.next span{display:flex;justify-content:space-between;padding:19px 4px;border-top:1px solid #aaa89f;text-align:left;font-size:13px}.next span:after{content:"COMING NEXT";font-size:7px;letter-spacing:.12em;color:#777}.next span:last-child{border-bottom:1px solid #aaa89f}.footer{min-height:110px;display:flex;justify-content:space-between;align-items:center;background:#d8d6cd}.footer p{font-size:8px;letter-spacing:.13em}@keyframes packet{0%{left:16%;transform:translateX(-50%)}42%{left:50%;transform:translateX(-50%)}58%{left:50%;transform:translateX(-50%)}100%{left:84%;transform:translateX(-50%)}}@keyframes pulse{0%,100%{opacity:.2}50%{opacity:1}}
@media(max-width:800px){.site-nav{height:64px;grid-template-columns:1fr auto}.crumb{display:none}.hero{min-height:760px;padding-top:60px;grid-template-columns:1fr}.hero h1{font-size:60px}.intro{max-width:350px;font-size:17px}.browser-demo{min-height:350px;box-shadow:14px 17px var(--acid)}.network-stage{height:205px}.endpoint{width:60px;height:60px}.browser-demo>p{padding-top:11px}.quick-grid,.section-head,.journey-layout,.layers-grid,.history-grid{grid-template-columns:1fr}.quick-grid{gap:28px}.quick-grid>p:last-child{font-size:30px}.journey,.section{padding-top:74px;padding-bottom:74px}.section-head{gap:25px;margin-bottom:34px}.section-head h2,.layers h2,.history h2,.next h2{font-size:50px}.journey-layout{gap:14px}.steps{display:flex;overflow-x:auto;margin:0 -22px;padding:0 22px}.steps li{min-width:156px}.steps button{grid-template-columns:28px 1fr;min-height:61px;border:1px solid #aaa89f;border-right:0}.steps li:last-child button{border-right:1px solid #aaa89f}.steps button i{display:none}.stage-card{min-height:470px;padding:30px 25px}.stage-card h3{margin-top:55px;font-size:43px}.stage-facts{grid-template-columns:1fr}.layers,.watch-section,.history{padding:76px 0}.layers-grid,.history-grid{gap:48px}.layer-stack article{grid-template-columns:35px 1fr}.layer-stack article p{grid-column:2}.dev-head div{display:none}.dev-table>div{grid-template-columns:1.3fr .4fr .7fr}.dev-table>div span:nth-child(4),.dev-table>div span:nth-child(5){display:none}.video-wrap{grid-template-columns:1fr}.video-note{min-height:330px}.filters{display:block}.tabs{overflow-x:auto;margin:0 -22px;padding:0 22px}.filters>p{margin-top:15px}.resource{grid-template-columns:38px 1fr;gap:10px}.resource-side{grid-column:2;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:10px;text-align:left}.resource-side strong{font-size:37px}.resource-side p{display:none}.resource-side a{justify-self:end}.why{grid-template-columns:1fr;gap:7px}.history li{grid-template-columns:65px 1fr}.history li p{grid-column:2}.next{padding-top:85px;padding-bottom:85px}.next span:after{display:none}.footer{min-height:150px;padding-top:34px;padding-bottom:34px;flex-direction:column;align-items:flex-start;gap:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.packet,.request-line i{animation:none}}

/* Openzoox knowledge system — calm editorial refresh */
:root{--ink:#171918;--paper:#f6f3ec;--accent:#3157c8;--accent-soft:#dfe7f7;--coral:#d65b46;--sand:#e6dfd2;--acid:var(--accent);--orange:var(--coral);--blue:var(--accent);--soft:#e9e4da;--line:#d2cdc2;--muted:#64655f}
body{background:var(--paper);font-feature-settings:"kern" 1,"liga" 1;text-rendering:optimizeLegibility}
.site-nav{height:76px;background:rgba(246,243,236,.92);position:sticky;top:0;z-index:20;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand span{color:var(--orange)}
.crumb{color:#777971;font-weight:750}
.language{min-width:76px;border-color:#9c9d96;border-radius:999px;padding:10px 15px;transition:background .2s,color .2s,border-color .2s}
.language:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.hero{min-height:760px;padding-top:104px;padding-bottom:96px;grid-template-columns:1.08fr .92fr;gap:5vw}
.hero h1{max-width:900px;margin-top:32px;font-size:clamp(66px,6.5vw,98px);letter-spacing:-.068em}
.hero h1 em{color:var(--accent)}
.intro{font-size:19px;line-height:1.68;color:#4f514c}
.start{background:var(--accent);padding:17px 21px;border-radius:2px;transition:background .2s,transform .2s}
.start:hover{background:#2448ad;transform:translateY(-2px)}
.browser-demo{background:#1c1f21;box-shadow:24px 28px var(--sand);border:1px solid #0f1112}
.browser-top{border-color:#3b3e40}
.browser-top>div{background:#292d30}
.request-line i{background:linear-gradient(90deg,transparent,#7393ee,transparent)}
.endpoint{background:#1c1f21;border-color:#5c6266}
.endpoint-dns{border-color:#8ba4eb;box-shadow:0 0 0 5px rgba(49,87,200,.15)}
.packet{background:var(--coral);color:#fff}
.browser-demo>p span,.stage-card>span,.layer-stack span{color:#8ca7f2}
.quick{background:var(--accent);color:#fff}
.quick-grid>p:last-child{max-width:1080px;font-weight:500;line-height:1.12}
.steps button{transition:background .18s,color .18s}
.steps button:hover,.steps button.active{background:var(--accent-soft)}
.steps button.active{box-shadow:inset 3px 0 var(--accent)}
.stage-card{background:#1b1e20}
.stage-card>p{color:#c3c5c1;line-height:1.67}
.stage-facts div{border-color:#45494b;background:#202426}
.layers{background:#1b1e20}
.layer-stack article{border-color:#414547}
.experiment{background:#fbf9f4}
.devtools{border-radius:6px;overflow:hidden;box-shadow:0 22px 60px rgba(31,35,38,.13)}
.dev-head span{color:#91a9eb;border-color:#91a9eb}
.watch-section{background:#dfe7f7}
.section-head.light>p{color:#505a73}
.video-wrap{background:#1b1e20;box-shadow:0 20px 50px rgba(26,32,45,.12)}
.tabs button{border-color:#aeb0aa;border-radius:999px;padding:10px 15px}
.tabs button.active,.tabs button:hover{background:var(--accent);border-color:var(--accent)}
.resource{padding-top:32px;padding-bottom:32px}
.resource-meta span{background:#e5e0d5}
.resource-meta b{background:#365c4a}
.resource-meta .video{background:#a54939}
.resource-meta .advanced{background:#4d527c}
.resource h3{font-size:clamp(24px,2.3vw,34px);line-height:1.12}
.resource-main>p{line-height:1.65}
.why{background:#e8e3d9;border-left:3px solid var(--accent);padding:16px}
.resource-side strong{color:var(--accent)}
.history{background:#ebe6dc}
.next{background:#f8f5ee}
.next span{transition:padding .18s,color .18s}
.next span:hover{padding-left:12px;color:var(--accent)}
.footer{background:#e2ddd3}
html[lang="zh-CN"] body{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",Arial,sans-serif}
html[lang="zh-CN"] .intro,html[lang="zh-CN"] .section-head>p,html[lang="zh-CN"] .stage-card>p,html[lang="zh-CN"] .layer-stack p,html[lang="zh-CN"] .resource-main>p,html[lang="zh-CN"] .history li p{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;line-height:1.78}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2,html[lang="zh-CN"] h3{letter-spacing:-.045em}
html[lang="zh-CN"] .hero h1{font-size:clamp(64px,6.1vw,90px);line-height:1.03;max-width:620px}
html[lang="zh-CN"] .hero h1 em{font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-style:normal;font-weight:850}
html[lang="zh-CN"] .section-head h2,html[lang="zh-CN"] .layers h2,html[lang="zh-CN"] .history h2,html[lang="zh-CN"] .next h2{font-size:clamp(48px,5.2vw,76px);line-height:1.03}
@media(max-width:800px){.site-nav{height:64px}.hero{min-height:780px;padding-top:64px}.hero h1{font-size:clamp(54px,15vw,68px);line-height:.91}.browser-demo{box-shadow:12px 14px var(--sand)}.quick{padding:48px 0}.quick-grid>p:last-child{font-size:28px;line-height:1.16}.steps button:hover,.steps button.active{box-shadow:inset 0 -3px var(--accent)}.section-head h2,.layers h2,.history h2,.next h2{font-size:clamp(45px,13vw,58px);line-height:.96}.resource{padding-top:28px;padding-bottom:28px}.resource h3{font-size:25px}.video-note{min-height:290px}.next span{font-size:14px;line-height:1.4}html[lang="zh-CN"] .hero h1{font-size:clamp(49px,13vw,62px);line-height:1.02}}