:root {
  --ink:#e8f7ff; --muted:#9ab2c4; --dim:#668095; --bg:#06111f; --bg-2:#091928; --surface:rgba(12,31,49,.72); --surface-solid:#0c1e31;
  --line:rgba(127,213,247,.17); --line-strong:rgba(105,226,255,.42); --cyan:#61e4ff; --cyan-2:#1baef4; --violet:#8270ff; --green:#73e7a4;
  --page:1400px; --radius:24px; --ease:cubic-bezier(.2,.7,.2,1); color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; overflow-x:hidden; color:var(--ink); background:var(--bg); font:16px/1.6 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; z-index:-3; background:radial-gradient(circle at 12% 15%,rgba(39,162,255,.14),transparent 28rem),radial-gradient(circle at 86% 24%,rgba(102,81,255,.13),transparent 27rem),#06111f; }
a { color:inherit; text-decoration:none; }
button,input { font:inherit; }
button { cursor:pointer; }
img { display:block; max-width:100%; }
#starfield { position:fixed; inset:0; z-index:-2; width:100%; height:100%; opacity:.48; pointer-events:none; }
.site-noise { position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.045; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E"); }
.section-shell { width:min(calc(100% - 64px), var(--page)); margin-inline:auto; }
.boot-splash { position:fixed; inset:0; z-index:100; display:grid; place-content:center; gap:20px; background:#06111f; transition:opacity .65s var(--ease),visibility .65s var(--ease); }
.boot-splash.is-hidden { opacity:0; visibility:hidden; }
.boot-splash p { margin:0; color:#a7def1; font-size:11px; font-weight:800; letter-spacing:.28em; }
.boot-mark { position:relative; width:70px; height:70px; margin:auto; border:1px solid #53dcff; border-radius:50%; animation:spin 2.8s linear infinite; }
.boot-mark::before,.boot-mark::after { content:""; position:absolute; inset:9px; border:1px solid rgba(122,110,255,.75); border-radius:50%; }
.boot-mark::after { inset:23px; background:#63e5ff; box-shadow:0 0 25px #47dfff; }
.boot-mark span,.boot-mark i { position:absolute; width:7px; height:7px; border-radius:50%; background:#9cf5ff; top:-3px; left:50%; box-shadow:0 0 14px #65e6ff; }
.boot-mark i { left:auto; top:auto; bottom:5px; right:5px; background:#8877ff; }
.boot-line { height:2px; width:210px; overflow:hidden; background:rgba(117,218,255,.16); }
.boot-line b { display:block; height:100%; width:35%; background:#62e4ff; box-shadow:0 0 13px #62e4ff; animation:load 1.1s var(--ease) infinite; }
.site-header { height:80px; width:min(calc(100% - 64px), var(--page)); position:relative; z-index:20; margin:0 auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; min-width:max-content; letter-spacing:-.03em; }
.brand>span:last-child { display:flex; align-items:baseline; gap:4px; font-size:20px; line-height:1; }
.brand strong { font-weight:800; }.brand em { color:var(--cyan); font-size:11px; font-style:normal; font-weight:800; letter-spacing:.08em; }
.brand-mark { position:relative; display:block; width:30px; height:30px; overflow:hidden; border:1px solid var(--cyan); border-radius:9px; transform:rotate(45deg); box-shadow:0 0 18px rgba(81,226,255,.28); }
.brand-mark i,.brand-mark b { position:absolute; display:block; width:12px; height:12px; background:var(--cyan); }.brand-mark i { left:3px; bottom:3px; }.brand-mark b { right:3px; top:3px; background:var(--violet); }
.main-nav { display:flex; align-items:center; gap:33px; margin-left:70px; }.main-nav a { position:relative; color:var(--muted); font-size:13px; transition:color .25s; }.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-8px; height:1px; background:var(--cyan); transition:right .25s; }.main-nav a:hover { color:var(--ink); }.main-nav a:hover::after { right:0; }
.header-actions { display:flex; align-items:center; gap:10px; }.header-wiki { border:1px solid var(--line); background:rgba(12,38,59,.32); color:var(--ink); transition:transform .25s,background .25s,border-color .25s; }.header-wiki:hover { transform:translateY(-2px); border-color:var(--line-strong); background:rgba(39,163,218,.15); }.header-wiki { height:36px; padding:0 13px; border-radius:7px; font-size:12px; font-weight:700; }.header-wiki small { margin-left:5px; color:var(--cyan); font-size:8px; letter-spacing:.12em; }
.hero { position:relative; min-height:calc(100svh - 80px); display:grid; grid-template-columns:1.01fr .99fr; align-items:center; gap:25px; padding:84px 0 90px; }
.hero::before { content:""; position:absolute; left:-10vw; top:12%; width:80vw; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); transform:rotate(-15deg); }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 19px; color:var(--cyan); font-size:10px; font-weight:800; letter-spacing:.19em; }.eyebrow span { width:24px; height:1px; background:currentColor; box-shadow:0 0 9px currentColor; }
.hero h1,.section-heading h2,.feature-copy h2,.deploy-heading h2,.panel-copy h2,.ecosystem-inner h2,.modal-card h2 { margin:0; font-size:clamp(44px,5.15vw,78px); line-height:1.04; letter-spacing:-.068em; font-weight:760; }.hero h1 i,.deploy-heading h2 i,.ecosystem-inner h2 i { color:var(--cyan); font-style:normal; text-shadow:0 0 32px rgba(80,224,255,.2); }
.hero-description { max-width:590px; margin:27px 0 30px; color:var(--muted); font-size:15px; line-height:1.95; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; }.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:19px; padding:0 19px; border:1px solid transparent; border-radius:8px; font-size:13px; font-weight:800; transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s; }.button:hover { transform:translateY(-3px); }.button span { font-size:18px; line-height:1; }.button-primary { color:#03101d; background:linear-gradient(115deg,#9af4ff 0%,#48dfff 48%,#7981ff 110%); box-shadow:0 12px 28px rgba(33,178,232,.2); }.button-primary:hover { box-shadow:0 18px 34px rgba(33,178,232,.32); }.button-ghost { color:var(--ink); border-color:var(--line-strong); background:rgba(8,30,49,.2); }.button-ghost:hover { background:rgba(65,191,238,.12); }
.hero-stats { display:flex; gap:0; margin:49px 0 0; }.hero-stats div { min-width:125px; padding-right:25px; margin-right:25px; border-right:1px solid var(--line); }.hero-stats div:last-child { margin:0; padding:0; border:0; }.hero-stats dt { font-size:27px; font-weight:750; line-height:1; }.hero-stats dd { margin:8px 0 0; color:var(--dim); font-size:11px; }
.hero-visual { position:relative; min-height:630px; display:flex; align-items:center; justify-content:center; }.hero-image-wrap { position:relative; z-index:2; width:min(630px,100%); border-radius:30px; overflow:hidden; transform:perspective(1200px) rotateY(-7deg) rotateX(2deg); box-shadow:0 42px 70px rgba(0,0,0,.35); }.hero-image-wrap::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.13),transparent 22%,transparent 72%,rgba(90,82,255,.12)); }.hero-image-wrap img { width:100%; animation:visualFloat 7s ease-in-out infinite; }
.hero-rings { position:absolute; z-index:0; width:86%; aspect-ratio:1; border:1px solid rgba(92,221,255,.18); border-radius:50%; animation:spin 32s linear infinite; }.hero-rings::before,.hero-rings::after,.hero-rings i { content:""; position:absolute; border-radius:50%; }.hero-rings::before { width:12px; height:12px; left:7%; top:14%; background:var(--cyan); box-shadow:0 0 23px var(--cyan); }.hero-rings::after { width:8px; height:8px; right:5%; bottom:20%; background:var(--violet); box-shadow:0 0 20px var(--violet); }.hero-rings i:nth-child(1) { inset:7%; border:1px dashed rgba(101,227,255,.22); }.hero-rings i:nth-child(2) { inset:14%; border:1px solid rgba(130,112,255,.2); }.hero-rings i:nth-child(3) { width:15px; height:15px; right:13%; top:22%; background:var(--green); box-shadow:0 0 18px var(--green); }
.visual-chip { position:absolute; z-index:3; padding:11px 14px; border:1px solid rgba(111,229,255,.33); border-radius:9px; background:rgba(5,21,38,.72); color:#bceefa; font-size:10px; font-weight:800; letter-spacing:.09em; backdrop-filter:blur(8px); animation:chipFloat 5s ease-in-out infinite; }.visual-chip b { margin-left:9px; color:var(--cyan); }.chip-top { top:12%; left:-2%; }.chip-bottom { right:1%; bottom:15%; animation-delay:-2.2s; border-color:rgba(130,112,255,.5); }.status-dot { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:var(--green); box-shadow:0 0 11px var(--green); }.visual-scan { position:absolute; z-index:4; inset:9% 8%; pointer-events:none; overflow:hidden; border-radius:29px; }.visual-scan::after { content:""; position:absolute; left:0; right:0; height:100px; background:linear-gradient(transparent,rgba(115,233,255,.12),transparent); animation:scan 4.2s ease-in-out infinite; }
.hero-scroll { position:absolute; bottom:25px; left:0; display:flex; align-items:center; gap:10px; color:var(--dim); font-size:9px; font-weight:700; letter-spacing:.18em; }.hero-scroll span { position:relative; width:38px; height:1px; overflow:hidden; background:var(--line); }.hero-scroll span::after { content:""; position:absolute; width:13px; height:1px; background:var(--cyan); animation:scrollLine 1.7s ease-in-out infinite; }
.ticker-wrap { position:relative; overflow:hidden; border-block:1px solid var(--line); background:rgba(6,20,34,.66); }.ticker { display:flex; width:max-content; white-space:nowrap; animation:ticker 29s linear infinite; }.ticker div { padding:15px 18px; color:#b8ebf7; font-size:11px; font-weight:800; letter-spacing:.17em; }.ticker i { margin:0 18px; color:var(--violet); font-style:normal; }
.intro-section { padding:142px 0 122px; }.section-heading { max-width:1150px; }.heading-row { display:grid; grid-template-columns:1.3fr .7fr; align-items:end; gap:85px; }.section-heading h2 { font-size:clamp(35px,4.2vw,62px); }.heading-row>p { max-width:420px; margin:0 0 5px; color:var(--muted); font-size:14px; line-height:1.9; }
.advantage-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:65px; }.advantage-card { position:relative; min-height:395px; display:flex; flex-direction:column; padding:25px; overflow:hidden; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(20,48,71,.62),rgba(8,24,40,.56)); transform-style:preserve-3d; transition:border-color .4s,box-shadow .4s; }.advantage-card::before { content:""; position:absolute; inset:auto -20% -35% auto; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(72,220,255,.13),transparent 67%); }.advantage-card:hover { border-color:var(--line-strong); box-shadow:0 27px 48px rgba(0,0,0,.19); }.highlight-card { background:linear-gradient(142deg,rgba(23,72,104,.75),rgba(15,25,76,.7)); border-color:rgba(109,212,255,.39); }.card-index,.install-label { color:var(--dim); font-size:10px; font-weight:800; letter-spacing:.14em; }.line-icon { position:relative; width:64px; height:64px; margin:54px 0 36px; border:1px solid rgba(105,226,255,.36); border-radius:15px; background:rgba(9,39,61,.5); }.line-icon::before,.line-icon::after,.line-icon i,.line-icon b,.line-icon span { position:absolute; display:block; content:""; }.environment-icon i { left:16px; top:17px; width:29px; height:20px; border:2px solid var(--cyan); border-radius:3px; }.environment-icon i::after { content:""; position:absolute; width:13px; height:2px; left:6px; bottom:-8px; background:var(--cyan); }.environment-icon b { width:9px; height:9px; top:21px; right:12px; border-radius:50%; background:var(--violet); box-shadow:0 0 13px var(--violet); }.environment-icon span { width:3px; height:3px; left:20px; top:24px; background:var(--cyan); box-shadow:8px 0 var(--cyan),16px 0 var(--cyan); }.panel-icon::before { inset:16px; border:2px solid var(--cyan); border-radius:6px; }.panel-icon i { top:22px; left:24px; width:4px; height:20px; background:var(--cyan); box-shadow:9px 6px var(--violet),18px -5px var(--green); }.panel-icon b { width:28px; height:2px; left:18px; bottom:15px; background:rgba(137,240,255,.55); }.launch-icon::before { width:31px; height:31px; left:15px; top:15px; border:2px solid var(--cyan); transform:rotate(45deg); }.launch-icon i { width:23px; height:2px; left:20px; top:30px; background:var(--cyan); transform:rotate(-45deg); transform-origin:left; }.launch-icon b { width:7px; height:7px; right:13px; top:13px; border-radius:50%; background:var(--violet); box-shadow:0 0 11px var(--violet); }.advantage-card h3 { position:relative; margin:0; font-size:23px; line-height:1.27; letter-spacing:-.04em; }.advantage-card p { position:relative; margin:16px 0 20px; color:var(--muted); font-size:13px; line-height:1.8; }.advantage-card a { position:relative; display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:17px; border-top:1px solid var(--line); color:#b9f3ff; font-size:12px; font-weight:700; }.advantage-card a span { font-size:18px; transition:transform .25s; }.advantage-card a:hover span { transform:translateX(5px); }
.feature-band { display:grid; grid-template-columns:.76fr 1.24fr; gap:74px; align-items:center; padding:65px 0 145px; }.feature-copy h2,.panel-copy h2 { font-size:clamp(35px,3.7vw,56px); }.feature-copy>p:not(.eyebrow),.panel-copy>p:not(.eyebrow),.deploy-heading>p:not(.eyebrow) { max-width:455px; color:var(--muted); font-size:14px; line-height:1.9; }.check-list { display:grid; gap:14px; padding:0; margin:31px 0 0; list-style:none; color:var(--ink); font-size:13px; }.check-list i { display:inline-grid; width:19px; height:19px; place-items:center; margin-right:8px; border:1px solid rgba(113,227,255,.5); border-radius:50%; color:var(--cyan); font-size:11px; font-style:normal; }.feature-art { position:relative; }.feature-art::after,.panel-art::after { content:""; position:absolute; z-index:-1; width:61%; aspect-ratio:1; top:20%; right:-9%; border-radius:50%; background:radial-gradient(circle,rgba(83,206,255,.16),transparent 68%); }.feature-art img { border:1px solid var(--line); border-radius:23px; box-shadow:0 30px 55px rgba(0,0,0,.23); }
.realtime-section { position:relative; padding:130px 0 140px; overflow:hidden; background:linear-gradient(135deg,#07192b 0%,#071222 48%,#111636 100%); }.realtime-section::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(128,223,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(128,223,255,.045) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,transparent,black 17%,black 80%,transparent); }.on-dark { position:relative; }.on-dark .heading-row>p { color:#8daabb; }.dashboard-layout { position:relative; display:grid; grid-template-columns:1.36fr .64fr; gap:17px; margin-top:60px; }.dashboard-card { border:1px solid rgba(115,225,255,.19); border-radius:18px; background:rgba(5,19,34,.71); box-shadow:inset 0 1px rgba(255,255,255,.035),0 26px 44px rgba(0,0,0,.17); backdrop-filter:blur(12px); }.telemetry-card { padding:22px; }.panel-title { display:flex; align-items:center; justify-content:space-between; color:#b8eefa; font-size:10px; font-weight:800; letter-spacing:.14em; }.panel-title button { padding:0; border:0; background:none; color:var(--cyan); font-size:10px; font-weight:700; }.telemetry-top { display:flex; align-items:end; justify-content:space-between; padding:35px 0 23px; border-bottom:1px solid rgba(122,220,255,.16); }.telemetry-top span,.uptime span,.metric span,.chart-head span { display:block; color:#7695a8; font-size:10px; font-weight:800; letter-spacing:.1em; }.telemetry-top strong { display:block; margin-top:5px; color:#7fe9ff; font-size:25px; letter-spacing:.07em; }.uptime { text-align:right; }.uptime strong { color:#e6f8ff; font-size:19px; }.metrics-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; padding:25px 0; }.metric { min-width:0; }.metric strong { margin-top:5px; font-size:31px; letter-spacing:-.06em; }.metric small { margin-left:5px; color:#7796a8; font-size:10px; }.bar { height:4px; margin-top:11px; overflow:hidden; border-radius:4px; background:#143349; }.bar i { display:block; width:42%; height:100%; border-radius:inherit; background:var(--cyan); transition:width .6s var(--ease); box-shadow:0 0 10px var(--cyan); }.bar.violet i { background:var(--violet); box-shadow:0 0 10px var(--violet); }.bar.green i { background:var(--green); box-shadow:0 0 10px var(--green); }.chart-panel { padding:17px 16px 3px; border:1px solid rgba(122,220,255,.12); border-radius:13px; background:rgba(7,27,45,.68); }.chart-head { display:flex; justify-content:space-between; align-items:center; }.chart-head b { color:#9cefff; font-size:12px; }.chart-panel svg { display:block; width:100%; height:180px; margin-top:12px; }.chart-grid path { stroke:rgba(121,210,240,.13); stroke-width:1; }.node-status { display:flex; flex-wrap:wrap; gap:14px; padding-top:19px; color:#97b5c3; font-size:10px; }.node-status i { display:inline-block; width:6px; height:6px; margin-right:5px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); }.control-column { display:grid; grid-template-rows:1fr .83fr; gap:17px; }.control-card,.log-card { padding:22px; }.live-label { padding:3px 7px; border-radius:4px; background:rgba(92,235,166,.14); color:var(--green); font-size:8px; }.control-toggle { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:20px 0; border-bottom:1px solid rgba(122,220,255,.12); }.control-toggle:last-child { border:0; }.control-toggle span b,.control-toggle span small { display:block; }.control-toggle span b { font-size:13px; }.control-toggle span small { margin-top:3px; color:#7594a5; font-size:10px; }.control-toggle input { position:absolute; opacity:0; pointer-events:none; }.control-toggle>i { position:relative; width:38px; height:21px; flex:none; border-radius:12px; background:#183349; transition:background .25s; }.control-toggle>i::after { content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#7598aa; transition:transform .25s,background .25s; }.control-toggle input:checked + i { background:rgba(83,224,255,.35); }.control-toggle input:checked + i::after { transform:translateX(17px); background:#95f2ff; box-shadow:0 0 11px #6fe8ff; }.log-card { min-height:185px; }.log-pulse { display:block; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 13px var(--cyan); animation:pulse 1.5s infinite; }.activity-log { display:grid; gap:8px; height:128px; margin-top:17px; overflow:hidden; font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }.activity-log p { margin:0; color:#8fabba; }.activity-log time { color:#4e7690; }.activity-log b { color:#82edff; font-weight:600; }
.deploy-section { display:grid; grid-template-columns:.65fr 1.35fr; gap:66px; padding:145px 0; align-items:start; }.deploy-heading { position:sticky; top:25px; }.deploy-heading h2 { margin-bottom:27px; font-size:clamp(42px,4vw,62px); }.installer-grid { display:grid; grid-template-columns:.72fr 1.28fr; gap:17px; }.install-selector,.install-console { padding:23px; border:1px solid var(--line); border-radius:18px; background:linear-gradient(145deg,rgba(17,45,67,.64),rgba(8,23,38,.66)); }.scenario-list { display:grid; gap:10px; margin-top:25px; }.scenario { display:flex; align-items:center; gap:12px; width:100%; padding:13px 12px; border:1px solid transparent; border-radius:10px; color:var(--muted); background:transparent; text-align:left; transition:.25s; }.scenario:hover,.scenario.active { color:var(--ink); border-color:rgba(103,224,255,.4); background:rgba(31,116,151,.15); }.scenario-symbol { display:grid; width:32px; height:32px; place-items:center; border:1px solid currentColor; border-radius:8px; color:var(--cyan); font-size:19px; }.scenario span:nth-child(2) { display:grid; gap:1px; }.scenario b { font-size:12px; }.scenario small { font-size:9px; }.scenario i { margin-left:auto; color:var(--dim); font-size:10px; font-style:normal; }.selected-summary { margin-top:27px; padding-top:17px; border-top:1px solid var(--line); }.selected-summary span,.selected-summary p { display:block; color:var(--dim); font-size:10px; }.selected-summary strong { display:block; margin-top:5px; color:var(--cyan); font-size:18px; }.selected-summary p { margin:4px 0 0; }.install-console { min-height:474px; }.console-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:17px; border-bottom:1px solid var(--line); }.console-top>span { display:flex; gap:5px; }.console-top>span i { width:7px; height:7px; border-radius:50%; background:#506e81; }.console-top b { margin-right:auto; color:var(--muted); font:10px ui-monospace,SFMono-Regular,Consolas,monospace; }.console-top em { color:var(--cyan); font-style:normal; }.console-top small { color:var(--green); font-size:9px; font-weight:800; letter-spacing:.08em; }.install-progress { display:flex; align-items:center; gap:11px; margin:24px 0; }.progress-rail { height:5px; flex:1; overflow:hidden; border-radius:5px; background:#14324a; }.progress-rail i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--cyan),var(--violet)); box-shadow:0 0 13px var(--cyan); transition:width .55s var(--ease); }.install-progress span { width:30px; color:var(--cyan); font-size:10px; text-align:right; }.install-steps { display:grid; gap:5px; padding:0; margin:0; list-style:none; }.install-steps li { display:grid; grid-template-columns:28px 1fr max-content; align-items:center; gap:11px; min-height:43px; padding:0 10px; border:1px solid transparent; border-radius:7px; color:var(--dim); font-size:11px; transition:.3s; }.install-steps li b { color:#668397; font-size:10px; }.install-steps li i { font-size:8px; font-style:normal; }.install-steps li.active { border-color:rgba(102,224,255,.23); color:var(--ink); background:rgba(32,132,169,.14); }.install-steps li.active b,.install-steps li.active i { color:var(--cyan); }.install-steps li.done { color:#a9c9d6; }.install-steps li.done b,.install-steps li.done i { color:var(--green); }.terminal-output { min-height:83px; margin:16px 0; padding:13px; overflow:auto; border-radius:8px; background:#04101b; color:#b2d8e6; font:10px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; }.terminal-muted { color:#65899e; }.terminal-success { color:#78eaaa; }.terminal-caret { color:var(--cyan); animation:blink 1s steps(2) infinite; }.launch-button { width:100%; }
.panel-feature { display:grid; grid-template-columns:1.17fr .83fr; gap:75px; align-items:center; padding:0 0 145px; }.panel-art { position:relative; }.panel-art img { border:1px solid var(--line); border-radius:23px; box-shadow:0 30px 55px rgba(0,0,0,.2); }.panel-copy .eyebrow { margin-bottom:18px; }.panel-copy>p:not(.eyebrow) { margin:25px 0 29px; }.mini-features { display:grid; gap:0; }.mini-features div { display:flex; align-items:center; gap:13px; padding:11px 0; border-top:1px solid var(--line); font-size:12px; }.mini-features b { color:var(--cyan); font-size:10px; }
.ecosystem-section { position:relative; overflow:hidden; padding:127px 0; border-block:1px solid var(--line); background:linear-gradient(115deg,rgba(8,35,57,.86),rgba(20,19,63,.85)); }.ecosystem-section::before { content:""; position:absolute; width:63vw; aspect-ratio:1; top:-37vw; right:-8vw; border:1px solid rgba(109,220,255,.2); border-radius:50%; box-shadow:0 0 0 90px rgba(109,220,255,.035),0 0 0 180px rgba(109,220,255,.025); }.ecosystem-inner { position:relative; max-width:950px; text-align:center; }.ecosystem-inner .eyebrow { justify-content:center; }.ecosystem-inner h2 { font-size:clamp(39px,4.45vw,66px); }.ecosystem-inner>p:not(.eyebrow) { max-width:610px; margin:27px auto 31px; color:#9ab8c6; font-size:14px; line-height:1.9; }.orbit-badge { position:absolute; width:96px; height:96px; top:-69px; left:50%; border:1px solid rgba(116,228,255,.5); border-radius:50%; transform:translateX(-50%); animation:spin 14s linear infinite; }.orbit-badge span { position:absolute; inset:19px; display:grid; place-items:center; border-radius:50%; color:#d8faff; background:#0c2e4c; font-size:18px; font-weight:800; }.orbit-badge i,.orbit-badge b,.orbit-badge em { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px var(--cyan); }.orbit-badge i { left:-3px; top:35px; }.orbit-badge b { right:6px; top:2px; background:var(--violet); }.orbit-badge em { right:6px; bottom:2px; width:5px; height:5px; background:var(--green); }
.site-footer { display:flex; align-items:center; justify-content:space-between; min-height:114px; gap:20px; }.site-footer p { color:var(--dim); font-size:9px; font-weight:700; letter-spacing:.13em; }.back-top { color:#a5ddec; font-size:10px; font-weight:800; letter-spacing:.08em; }
.modal { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:20px; visibility:hidden; opacity:0; transition:.25s; }.modal.is-open { opacity:1; visibility:visible; }.modal-backdrop { position:absolute; inset:0; background:rgba(2,9,17,.72); backdrop-filter:blur(7px); }.modal-card { position:relative; width:min(100%,520px); padding:36px; border:1px solid rgba(111,225,255,.35); border-radius:20px; background:linear-gradient(145deg,#102a43,#0a172a); box-shadow:0 30px 100px rgba(0,0,0,.48); transform:translateY(12px) scale(.98); transition:.3s var(--ease); }.modal.is-open .modal-card { transform:translateY(0) scale(1); }.modal-card h2 { font-size:36px; }.modal-card>p:not(.eyebrow) { color:#a0bdcc; font-size:13px; }.modal-close { position:absolute; top:12px; right:14px; width:33px; height:33px; border:0; border-radius:50%; color:#c8f5ff; background:rgba(130,226,255,.1); font-size:24px; line-height:1; }.modal-card form { margin-top:25px; }.modal-card label { display:block; margin-bottom:7px; color:#91b4c6; font-size:10px; font-weight:700; letter-spacing:.08em; }.modal-card form>div { display:flex; gap:9px; }.modal-card input { min-width:0; flex:1; height:48px; padding:0 13px; border:1px solid rgba(126,216,249,.27); border-radius:8px; outline:none; color:#e9faff; background:#061421; }.modal-card input:focus { border-color:var(--cyan); }.modal-card small { display:block; margin-top:17px; color:#668194; font-size:9px; letter-spacing:.1em; }.toast { position:fixed; z-index:60; left:50%; bottom:25px; padding:11px 17px; border:1px solid rgba(116,232,255,.45); border-radius:8px; color:#c1f6ff; background:#0d2c43; box-shadow:0 10px 30px rgba(0,0,0,.3); font-size:12px; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:.3s; }.toast.is-show { opacity:1; transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .75s var(--ease),transform .75s var(--ease); transition-delay:var(--delay,0ms); }.reveal.is-visible { opacity:1; transform:none; }
@keyframes spin { to { transform:rotate(360deg); } } @keyframes load { 0% { transform:translateX(-120%); } 100% { transform:translateX(360%); } } @keyframes visualFloat { 50% { transform:translateY(-8px) scale(1.012); } } @keyframes chipFloat { 50% { transform:translateY(-10px); } } @keyframes scan { 0%,100% { transform:translateY(-120px); } 50% { transform:translateY(650px); } } @keyframes scrollLine { 0% { transform:translateX(-15px); } 100% { transform:translateX(40px); } } @keyframes ticker { to { transform:translateX(-50%); } } @keyframes pulse { 50% { opacity:.3; transform:scale(.72); } } @keyframes blink { 50% { opacity:0; } }
@media (max-width:1000px) { .section-shell,.site-header { width:min(calc(100% - 40px),var(--page)); }.main-nav { gap:18px; margin-left:20px; }.hero { grid-template-columns:1fr; padding-top:70px; }.hero-visual { width:min(700px,100%); min-height:520px; margin:0 auto; }.hero-scroll { display:none; }.heading-row { grid-template-columns:1fr; gap:22px; }.advantage-grid { margin-top:43px; }.feature-band { grid-template-columns:1fr; gap:39px; }.feature-copy { max-width:560px; }.dashboard-layout { grid-template-columns:1fr; }.control-column { grid-template-columns:1fr 1fr; grid-template-rows:auto; }.deploy-section { grid-template-columns:1fr; gap:42px; }.deploy-heading { position:static; }.installer-grid { grid-template-columns:.72fr 1.28fr; }.panel-feature { grid-template-columns:1fr; gap:42px; }.panel-art { order:2; }.panel-copy { order:1; } }
@media (max-width:720px) { .section-shell,.site-header { width:calc(100% - 32px); }.site-header { height:70px; }.main-nav { display:none; }.header-wiki { padding:0 9px; }.header-wiki small { display:none; }.hero { min-height:auto; padding:62px 0 55px; }.hero h1 { font-size:47px; }.hero-description { font-size:13px; }.hero-stats { margin-top:35px; }.hero-stats div { min-width:0; flex:1; margin-right:13px; padding-right:13px; }.hero-stats dt { font-size:23px; }.hero-stats dd { font-size:9px; }.hero-visual { min-height:370px; }.hero-image-wrap { border-radius:17px; transform:none; }.visual-chip { padding:8px 9px; font-size:8px; }.chip-top { left:-4px; top:4%; }.chip-bottom { right:-3px; bottom:5%; }.intro-section { padding:88px 0; }.section-heading h2 { font-size:39px; }.advantage-grid { grid-template-columns:1fr; gap:12px; }.advantage-card { min-height:310px; }.line-icon { margin:35px 0 27px; }.feature-band { padding:5px 0 92px; }.realtime-section { padding:85px 0; }.telemetry-card,.control-card,.log-card { padding:16px; }.metrics-row { gap:8px; }.metric strong { font-size:25px; }.metric small { display:none; }.chart-panel svg { height:145px; }.node-status { gap:7px 12px; }.control-column { grid-template-columns:1fr; }.deploy-section { padding:88px 0; }.installer-grid { grid-template-columns:1fr; }.install-console { min-height:0; }.panel-feature { padding-bottom:88px; }.ecosystem-section { padding:96px 0 83px; }.ecosystem-inner h2 { font-size:39px; }.orbit-badge { top:-59px; transform:translateX(-50%) scale(.82); }.site-footer { min-height:130px; align-items:flex-start; flex-direction:column; justify-content:center; gap:9px; }.site-footer p { margin:0; }.modal-card { padding:29px 21px; }.modal-card form>div { flex-direction:column; }.modal-card .button { width:100%; }.modal-card h2 { font-size:31px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }


/* Official image download center */
.image-download-section { position:relative; padding:138px 0 145px; overflow:hidden; background:linear-gradient(180deg,rgba(10,29,46,.35),rgba(7,20,34,.05)); }
.image-download-section::before { content:""; position:absolute; width:680px; height:680px; top:18%; left:50%; border:1px solid rgba(99,224,255,.12); border-radius:50%; transform:translateX(-50%); box-shadow:0 0 0 75px rgba(99,224,255,.035),0 0 0 150px rgba(113,100,255,.024); }
.download-heading { position:relative; }.download-heading h2 { margin:0; font-size:clamp(38px,4.1vw,61px); line-height:1.06; letter-spacing:-.065em; }.download-heading .heading-row>p { margin-bottom:0; }
.image-center { position:relative; margin-top:61px; padding:17px; border:1px solid var(--line); border-radius:23px; background:linear-gradient(145deg,rgba(16,47,70,.67),rgba(8,22,38,.79)); box-shadow:0 30px 70px rgba(0,0,0,.18); }.image-center-glow { position:absolute; z-index:0; width:45%; aspect-ratio:1; top:7%; left:28%; border-radius:50%; background:radial-gradient(circle,rgba(89,227,255,.16),transparent 69%); filter:blur(8px); pointer-events:none; }
.image-list { position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.image-card { min-height:353px; display:flex; flex-direction:column; padding:20px; border:1px solid rgba(119,218,248,.14); border-radius:15px; background:rgba(5,21,36,.53); transition:transform .3s var(--ease),border-color .3s,background .3s; }.image-card:hover,.image-card.active { transform:translateY(-6px); border-color:rgba(102,226,255,.44); background:rgba(12,39,59,.72); }.image-card-top { display:flex; align-items:center; justify-content:space-between; color:#7ca0b2; font-size:9px; font-weight:800; letter-spacing:.12em; }.image-type { color:var(--cyan); }.image-state { display:flex; align-items:center; gap:5px; }.image-state i { width:6px; height:6px; border-radius:50%; background:var(--violet); box-shadow:0 0 9px var(--violet); animation:pulse 1.5s infinite; }
.image-symbol { position:relative; width:62px; height:62px; margin:37px 0 27px; border:1px solid rgba(101,225,255,.4); border-radius:17px; background:rgba(12,49,73,.42); overflow:hidden; }.image-symbol i,.image-symbol b,.image-symbol span { position:absolute; display:block; }.desktop-symbol i { left:15px; top:16px; width:31px; height:21px; border:2px solid var(--cyan); border-radius:4px; }.desktop-symbol i::after { content:""; position:absolute; width:13px; height:2px; left:7px; bottom:-8px; background:var(--cyan); }.desktop-symbol b { left:24px; bottom:9px; width:14px; height:2px; background:var(--cyan); }.desktop-symbol span { right:10px; top:10px; width:7px; height:7px; border-radius:50%; background:var(--violet); box-shadow:0 0 9px var(--violet); }.server-symbol i { inset:14px; border:2px solid var(--cyan); border-radius:6px; }.server-symbol b { top:23px; left:22px; width:18px; height:2px; background:var(--cyan); box-shadow:0 8px var(--cyan); }.server-symbol span { left:17px; top:22px; width:3px; height:3px; border-radius:50%; background:var(--green); box-shadow:0 8px var(--green); }.cloud-symbol i { left:16px; top:28px; width:30px; height:16px; border:2px solid var(--cyan); border-top:0; border-radius:0 0 17px 17px; }.cloud-symbol b { left:21px; top:20px; width:19px; height:17px; border:2px solid var(--cyan); border-radius:50% 50% 0 0; }.cloud-symbol span { left:28px; top:12px; width:6px; height:6px; border-radius:50%; background:var(--violet); box-shadow:0 0 10px var(--violet); }
.image-card h3 { margin:0; font-size:20px; letter-spacing:-.04em; }.image-card p { min-height:42px; margin:11px 0 20px; color:var(--muted); font-size:12px; line-height:1.7; }.image-card dl { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:0 0 20px; }.image-card dl div { padding:9px 0; border-top:1px solid var(--line); }.image-card dt { color:var(--dim); font-size:9px; }.image-card dd { margin:4px 0 0; color:#c8eff9; font:10px ui-monospace,SFMono-Regular,Consolas,monospace; }.reserve-download { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:auto; padding:11px 0 0; border:0; border-top:1px solid var(--line); color:#bff4ff; background:transparent; font-size:11px; font-weight:800; }.reserve-download span { font-size:17px; transition:transform .2s; }.reserve-download:hover span { transform:translate(4px,-3px); }
.download-footer { position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 8px 3px; }.checksum-block { display:flex; align-items:center; gap:10px; min-width:0; }.checksum-label { color:var(--dim); font-size:9px; font-weight:800; letter-spacing:.1em; }.checksum-block code { overflow:hidden; color:#91dff0; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }.checksum-block button { width:26px; height:26px; flex:none; border:1px solid var(--line); border-radius:6px; color:var(--cyan); background:transparent; }.download-footer>p { display:flex; align-items:center; gap:7px; margin:0; color:var(--dim); font-size:10px; text-align:right; }.download-footer>p span { width:6px; height:6px; flex:none; border-radius:50%; background:var(--violet); box-shadow:0 0 8px var(--violet); }
@media (max-width:1000px) { .image-list { grid-template-columns:repeat(3,1fr); }.image-card { min-height:340px; } }
@media (max-width:720px) { .image-download-section { padding:88px 0; }.download-heading h2 { font-size:39px; }.image-center { margin-top:43px; padding:11px; }.image-list { grid-template-columns:1fr; }.image-card { min-height:0; }.image-card p { min-height:0; }.download-footer { align-items:flex-start; flex-direction:column; gap:12px; padding:15px 4px 4px; }.download-footer>p { text-align:left; }.checksum-block { width:100%; }.checksum-block code { flex:1; } }

/* XingChen OS is currently released as a server-only edition. */
.image-list.server-only { grid-template-columns:minmax(0,720px); justify-content:center; }
.server-image-card { min-height:324px; }.server-image-card .server-image-content { display:grid; grid-template-columns:1fr .94fr; gap:28px; align-items:end; }.server-image-card p { min-height:0; max-width:355px; }.server-image-card dl { grid-template-columns:repeat(2,1fr); margin:0; }
@media (max-width:720px) { .image-list.server-only { grid-template-columns:1fr; }.server-image-card .server-image-content { grid-template-columns:1fr; gap:6px; }.server-image-card dl { margin:0 0 20px; } }