:root {
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface2: #f1f4fa;
  --line: #e2e7f0;
  --line2: #cfd7e6;
  --text: #0f1a33;
  --muted: #5a6680;
  --blue: #2f6bff;
  --violet: #7c5cff;
  --teal: #0ea5a4;
  --pink: #e4508a;
  --orange: #f2711c;
  --green: #16a34a;
  --amber: #e09a0b;
  --red: #e5484d;
  --radius: 18px;
  --shadow: 0 1px 2px rgba(15,26,51,.04), 0 12px 32px -12px rgba(15,26,51,.14);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  margin: 0; color: var(--text);
  background:
    radial-gradient(900px 520px at 90% -8%, rgba(124,92,255,.12), transparent 60%),
    radial-gradient(760px 480px at -8% 18%, rgba(47,107,255,.10), transparent 60%),
    radial-gradient(700px 500px at 50% 60%, rgba(14,165,164,.05), transparent 60%),
    var(--bg);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
code, pre { font-family: var(--mono); }

:root[data-lang="en"] :is([lang="zh-CN"], [lang="ja"]),
:root[data-lang="zh-CN"] :is([lang="en"], [lang="ja"]),
:root[data-lang="ja"] :is([lang="en"], [lang="zh-CN"]) { display: none !important; }
:root[data-lang="ja"] {
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "YuGothic", "Meiryo", "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans JP", monospace;
}

.progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--violet), var(--pink)); }

/* NAV */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 12px clamp(16px, 4vw, 48px);
  background: rgba(246,248,252,.78);
  backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid rgba(226,231,240,.8);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -.01em; font-size: 18px; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(135deg, var(--blue), var(--violet)); color: #fff; font-size: 18px; font-weight: 800;
  box-shadow: 0 6px 16px -6px rgba(47,107,255,.6);
  transition: transform .4s cubic-bezier(.3,1.6,.5,1);
}
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.08); }
.nav nav { display: flex; gap: 22px; margin-left: auto; }
.nav nav a { text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 500; transition: color .2s; }
.nav nav a:hover { color: var(--text); }
.lang { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--surface); }
.lang button { border: 0; background: none; color: var(--muted); font: 600 13px var(--sans); padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--text); color: #fff; }

/* BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line2);
  background: var(--surface); color: var(--text); font: 600 15px var(--sans);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, border-color .2s, background .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.btn.primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 10px 26px -12px rgba(47,107,255,.8); }
.btn.ghost { background: rgba(255,255,255,.7); }
.btn.small { padding: 7px 14px; font-size: 13px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(22,163,74,.5); animation: pulse 2s infinite; }
.btn.primary .live { background: #b8ffcf; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* HERO */
.hero { position: relative; min-height: calc(100vh - 60px); display: grid; align-items: center; overflow: hidden; }
#net { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 140px; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.hero-inner {
  position: relative; z-index: 2;
  width: min(1160px, 100%); margin: 0 auto; padding: 72px clamp(16px, 4vw, 48px) 96px;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center;
}
.hero-inner > :not(.term) { grid-column: 1; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin: 0; font-weight: 500; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,.45); } 70% { box-shadow: 0 0 0 10px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
h1 { font-size: clamp(34px, 5.2vw, 60px); line-height: 1.08; letter-spacing: -.03em; margin: 14px 0 18px; }
.grad { font-style: normal; background: linear-gradient(90deg, var(--blue), var(--violet), var(--pink), var(--blue)); background-size: 300% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 8s linear infinite; }
@keyframes shine { to { background-position: 300% center; } }
.lede { color: var(--muted); font-size: 18px; max-width: 58ch; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

.term {
  grid-column: 2; grid-row: 1 / span 4;
  background: #0f1a33; border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgba(15,26,51,.55);
  overflow: hidden; transform: rotate(1.2deg); transition: transform .5s cubic-bezier(.3,1.4,.5,1);
}
.term:hover { transform: rotate(0) translateY(-4px); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid #22304f; color: #8fa0c4; font: 12px var(--mono); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; }
.term-bar i:nth-child(3) { background: #28c840; }
.term-bar span { margin-left: 8px; }
#term { margin: 0; padding: 16px 18px 20px; min-height: 300px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; color: #d9e6ff; }
#term .p { color: #4ade80; }
#term .c { color: #7cc4ff; }
#term .m { color: #a3b1cf; }
.caret { display: inline-block; width: 8px; height: 15px; background: #7cc4ff; vertical-align: -2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* STATS */
.stats {
  width: min(1160px, calc(100% - 32px)); margin: -40px auto 0; position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.stat { padding: 22px 24px; display: grid; gap: 2px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { font-size: 32px; letter-spacing: -.03em; background: linear-gradient(90deg, var(--blue), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat span { color: var(--muted); font-size: 14px; }

/* SECTIONS */
.section { width: min(1160px, 100%); margin: 0 auto; padding: 110px clamp(16px, 4vw, 48px) 0; }
h2 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.025em; line-height: 1.15; margin: 0 0 10px; }
.section-lede { color: var(--muted); margin: 0 0 30px; font-size: 17px; }

/* LAB MAP */
.lab { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); padding: 18px; }
.layers { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line2); background: var(--surface); color: var(--muted); font: 600 13px var(--sans);
  transition: all .2s;
}
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--line2); transition: background .2s; }
.chip.on { color: var(--text); border-color: color-mix(in srgb, var(--k) 45%, white); background: color-mix(in srgb, var(--k) 9%, white); }
.chip.on::before { background: var(--k); }
.lab-body { display: grid; grid-template-columns: 1fr 280px; gap: 16px; align-items: stretch; }
#map { width: 100%; height: auto; display: block; }
#map .zone { fill: var(--surface2); stroke: var(--line); }
#map .zone-t { font: 700 13px var(--sans); fill: var(--muted); letter-spacing: .02em; }
#map .ly { transition: opacity .35s; }
#map .ly.off { opacity: 0; pointer-events: none; }
#map .ln { fill: none; stroke-width: 2.4; stroke-linecap: round; }
#map .fiber { stroke: var(--teal); }
#map .eth { stroke: var(--teal); opacity: .55; }
#map .wg { stroke: var(--blue); stroke-width: 3.2; stroke-dasharray: 10 8; animation: dash 1.2s linear infinite; }
#map .direct { stroke: #9fb0cf; stroke-dasharray: 2 6; }
#map .uu { stroke: var(--pink); stroke-width: 3; stroke-dasharray: 10 8; animation: dash 1.4s linear infinite; }
#map .zt { stroke: var(--violet); stroke-width: 1.4; stroke-dasharray: 3 5; opacity: .75; }
#map .zt-ring { fill: rgba(124,92,255,.08); stroke: var(--violet); stroke-dasharray: 4 4; animation: spin 14s linear infinite; transform-origin: 465px 212px; }
#map .mon { stroke: var(--amber); stroke-width: 1.6; stroke-dasharray: 1 7; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -36; } }
@keyframes spin { to { transform: rotate(360deg); } }
#map .ln-t { font: 600 11.5px var(--sans); fill: var(--muted); }
#map .ln-t.blue { fill: var(--blue); }
#map .ln-t.pink { fill: var(--pink); }
#map .ln-t.teal { fill: var(--teal); }
#map .nd { cursor: pointer; outline: none; }
#map .nd circle { fill: #fff; stroke: var(--line2); stroke-width: 2; transition: stroke .2s, filter .2s; }
#map .nd:hover circle, #map .nd:focus-visible circle, #map .nd.sel circle { stroke: var(--blue); filter: drop-shadow(0 4px 10px rgba(47,107,255,.35)); }
#map .nd.sel circle { stroke-width: 3; }
#map .nd .ic { font: 700 18px var(--sans); text-anchor: middle; fill: var(--text); pointer-events: none; }
#map .nd .ic.small { font-size: 12px; fill: var(--violet); }
#map .nd .nm { font: 600 12px var(--sans); text-anchor: middle; fill: var(--text); pointer-events: none; }
#map .zt-hub circle { fill: #f3efff; stroke: var(--violet); }
#map .mon-n circle { fill: #fff8e8; stroke: var(--amber); }
#map .mp { pointer-events: none; }
.lab-info {
  border-radius: 16px; background: var(--surface2); padding: 18px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line);
}
.lab-info-k { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.lab-info h3 { margin: 0; font-size: 19px; }
.lab-info p { margin: 0; color: var(--muted); font-size: 14.5px; flex: 1; }
.lab-info .more { color: var(--blue); font-weight: 600; font-size: 14px; text-decoration: none; }
.lab-info .more:hover { text-decoration: underline; }

/* EXPLORER */
.explorer { display: grid; grid-template-columns: 270px 1fr; gap: 20px; align-items: start; }
.ex-list { position: sticky; top: 84px; display: grid; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 12px; box-shadow: var(--shadow); }
.ex-group { font: 700 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 4px; }
.ex-list button {
  position: relative; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 9px 12px 9px 26px; border-radius: 12px; font: 600 14.5px var(--sans); color: var(--muted);
  transition: background .2s, color .2s;
}
.ex-list button::before { content: ""; position: absolute; left: 11px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--c); opacity: .45; transition: transform .25s, opacity .25s; }
.ex-list button:hover { background: var(--surface2); color: var(--text); }
.ex-list button[aria-selected="true"] { background: color-mix(in srgb, var(--c) 10%, white); color: var(--text); }
.ex-list button[aria-selected="true"]::before { opacity: 1; transform: scale(1.5); }

.panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 26px; box-shadow: var(--shadow);
  border-top: 4px solid var(--c);
}
.js .panel { display: none; }
.js .panel.show { display: grid; animation: panelIn .45s cubic-bezier(.2,.8,.2,1); }
@keyframes panelIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.panel + .panel { margin-top: 20px; }
.js .panel + .panel { margin-top: 0; }
.panel header { grid-column: 1 / -1; }
.kicker { font: 600 12px var(--mono); color: var(--c); letter-spacing: .04em; }
.panel h3 { margin: 4px 0 0; font-size: 26px; letter-spacing: -.02em; }
.beats { display: grid; gap: 14px; }
.beats p { margin: 0; display: grid; gap: 2px; }
.beats b { font: 700 12px var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--c); }
.beats span { color: #334061; }

.demo { background: var(--surface2); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: grid; gap: 12px; }
.demo-title { font: 700 12px var(--mono); color: var(--c); text-transform: uppercase; letter-spacing: .08em; }
.muted { color: var(--muted); }
small.muted { font-size: 12px; }
.hint { margin: 0; color: var(--muted); font-size: 14px; min-height: 22px; }
.controls { display: flex; align-items: center; gap: 10px; }
.controls.wrap { flex-wrap: wrap; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; justify-self: start; }
.seg button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; font: 600 13px var(--sans); color: var(--muted); cursor: pointer; transition: all .2s; }
.seg button.on { background: var(--c); color: #fff; box-shadow: 0 6px 14px -8px var(--c); }

.log {
  margin: 0; min-height: 110px; padding: 12px 14px; border-radius: 12px;
  background: #0f1a33; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; color: #d9e6ff; overflow: auto; max-height: 230px;
}
.log .q { color: #7cc4ff; }
.log .bad { color: #ff8a8f; }
.log .good { color: #4ade80; }
.log .m { color: #a3b1cf; }
.code { margin: 0; padding: 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; line-height: 1.55; overflow: auto; color: #334061; }
.code .k { color: var(--violet); }
.code .s { color: var(--green); }
.code .c { color: #8a96b0; }

/* routing demo */
#route { width: 100%; height: auto; }
.r-path { fill: none; stroke-width: 3; stroke-linecap: round; transition: opacity .4s; }
.r-path.bad { stroke: var(--red); stroke-dasharray: 6 8; opacity: .55; }
.r-path.good { stroke: var(--blue); }
.r-path.dim { opacity: 0; }
.r-lbl { font: 600 11.5px var(--sans); fill: var(--red); text-anchor: middle; transition: opacity .3s; }
.r-node circle { fill: #fff; stroke: var(--line2); stroke-width: 2; }
.r-node text { font: 600 11.5px var(--sans); fill: var(--text); text-anchor: middle; }
#rSrv { transition: opacity .4s; }
#rDot { fill: var(--blue); filter: drop-shadow(0 0 5px rgba(47,107,255,.8)); }

/* zerotier grid */
.zt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.zt-dev { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 2px; cursor: default; transition: border-color .2s, transform .2s, box-shadow .2s; }
.zt-dev small { color: var(--muted); font-size: 12px; }
.zt-dev code { font-size: 12.5px; color: var(--violet); font-weight: 700; }
.zt-dev b { font-size: 14px; }
.zt-dev.src { border-color: var(--violet); box-shadow: 0 8px 18px -10px var(--violet); transform: translateY(-2px); }
.zt-dev.ok { border-color: color-mix(in srgb, var(--green) 50%, white); }
:root[data-lang="zh-CN"] :root[data-lang="ja"] 
/* tunnel demo */
#flow { width: 100%; height: auto; }
#flow .wire { fill: none; stroke: var(--line2); stroke-width: 2; }
#flow .lane4, #flow .lane6 { stroke: rgba(228,80,138,.18); stroke-width: 12; stroke-linecap: round; }
#flow.overload .lane4, #flow.overload .lane6 { stroke: rgba(229,72,77,.32); animation: throb 1s infinite; }
@keyframes throb { 50% { stroke-width: 16; } }
#flow .node rect { fill: #fff; stroke: var(--line2); stroke-width: 1.2; }
#flow .router > rect { stroke: var(--pink); stroke-width: 2; }
#flow .accel rect { fill: rgba(255,255,255,.5); stroke-dasharray: 4 4; }
#flow text { fill: var(--text); font: 11px var(--sans); text-anchor: middle; }
#flow text.b { font-weight: 700; font-size: 12px; }
#flow text.s { font: 10.5px var(--mono); fill: #334061; }
#flow .badge { fill: var(--surface2); stroke: var(--line2); }
#flow .badge.bad { stroke: var(--red); fill: #fdecec; }
#flow .badge.good { stroke: var(--green); fill: #eaf7ee; }
.toggles { display: grid; gap: 8px; }
.tog { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: #334061; user-select: none; }
.tog input { position: absolute; opacity: 0; pointer-events: none; }
.sw { flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--line2); position: relative; transition: background .25s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.tog input:checked + .sw { background: var(--c, var(--blue)); }
.tog input:checked + .sw::after { transform: translateX(16px); }
.tog input:focus-visible + .sw { outline: 2px solid var(--blue); outline-offset: 2px; }
.readout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.readout div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; display: grid; }
.readout small { color: var(--muted); font-size: 12px; }
.readout b { font: 600 14px var(--mono); transition: color .3s; }
.readout b.bad { color: var(--red); }
.readout b.good { color: var(--green); }

/* fast router demo */
.chip-map { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.blk { position: relative; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; padding: 12px; display: grid; gap: 2px; text-align: center; transition: border-color .3s, box-shadow .3s, transform .3s; overflow: hidden; }
.blk small { color: var(--muted); font-size: 12px; }
.blk.act { border-color: var(--c); box-shadow: 0 10px 22px -12px var(--c); transform: translateY(-3px); }
.blk.act::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, color-mix(in srgb, var(--c) 18%, transparent) 50%, transparent 70%); background-size: 250% 100%; animation: sweep 1.1s linear infinite; }
@keyframes sweep { from { background-position: 150% 0; } to { background-position: -100% 0; } }
.cores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.cores i { height: 22px; border-radius: 4px; background: var(--surface2); position: relative; overflow: hidden; }
.cores i::after { content: ""; position: absolute; inset: auto 0 0 0; height: var(--h, 4%); background: var(--orange); transition: height .5s; border-radius: 4px; }
.meter { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 14px; color: #334061; }
.bar { height: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--green), var(--amber), var(--red)); background-size: 300px 100%; border-radius: 999px; transition: width .6s cubic-bezier(.3,1.2,.5,1); }
.meter b { font: 600 14px var(--mono); min-width: 64px; text-align: right; }

/* dns demo */
.dns-actors { position: relative; display: flex; justify-content: space-between; padding: 8px 4px; }
.dns-actors::before { content: ""; position: absolute; left: 10%; right: 10%; top: 34px; border-top: 2px dashed var(--line2); }
.actor { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; width: 92px; }
.actor span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); font-size: 24px; transition: border-color .3s, box-shadow .3s, transform .3s; }
.actor.hot span { border-color: var(--c); box-shadow: 0 8px 20px -8px var(--c); transform: scale(1.06); }
.actor small { color: var(--muted); font-size: 12px; }
.pkt { position: absolute; top: 28px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); opacity: 0; z-index: 2; }
.verdict { font-weight: 700; min-height: 24px; }
.verdict.bad { color: var(--red); }
.verdict.good { color: var(--green); }

/* monitor demo */
.mon-card { display: grid; gap: 14px; }
.mon-rows { display: grid; gap: 8px; }
.mon-row { display: grid; grid-template-columns: 110px 1fr 44px; gap: 10px; align-items: center; font-size: 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.mon-row b { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.mon-row b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.mon-row .bar i { background: linear-gradient(90deg, var(--amber), var(--orange)); }
.mon-row code { font-size: 12px; color: var(--muted); text-align: right; }

/* fiber demo */
#house { width: 100%; height: auto; }
#house .room { fill: #fff; stroke: var(--line2); }
#house .room.main { fill: #effaf9; stroke: var(--teal); }
#house text { font: 600 12px var(--sans); fill: var(--muted); text-anchor: middle; }
#house .rtr { fill: var(--teal); }
#house .dev { fill: #fff; stroke: var(--text); stroke-width: 2; }
#wifiWaves circle { fill: none; stroke: var(--blue); stroke-width: 1.5; opacity: 0; transform-origin: 260px 170px; }
#house.wifi #wifiWaves circle { animation: wave 2.2s ease-out infinite; }
#house.wifi #wifiWaves circle:nth-child(2) { animation-delay: .7s; }
#house.wifi #wifiWaves circle:nth-child(3) { animation-delay: 1.4s; }
@keyframes wave { 0% { opacity: .7; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.1); } }
#fibers path { fill: none; stroke: var(--teal); stroke-width: 2.5; stroke-dasharray: 400; stroke-dashoffset: 400; transition: stroke-dashoffset 1s ease; }
#house.fiber #fibers path { stroke-dashoffset: 0; }
.ping { display: flex; align-items: flex-end; gap: 3px; height: 54px; padding: 6px 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.ping i { flex: 1; border-radius: 3px 3px 0 0; background: var(--blue); opacity: .75; transition: height .3s; min-height: 3px; }
.ping.fiber i { background: var(--teal); }

/* handover loop */
.loop { position: relative; width: min(300px, 100%); aspect-ratio: 1; margin: 0 auto; }
.loop svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring { fill: none; stroke: var(--line2); stroke-width: 2; stroke-dasharray: 3 6; }
.ring-run { fill: none; stroke: var(--violet); stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; stroke-dasharray: 553; stroke-dashoffset: 553; transition: stroke-dashoffset .9s ease; }
.loop-step {
  position: absolute; left: 50%; top: 50%; width: 108px; margin: -24px 0 0 -54px;
  transform: rotate(var(--a)) translate(110px) rotate(calc(-1 * var(--a)));
  padding: 8px 10px; border-radius: 12px; text-align: center; font-size: 12.5px; line-height: 1.3;
  background: var(--surface); border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s, background .3s;
}
.loop-step.on { border-color: var(--violet); background: #f3efff; box-shadow: 0 8px 20px -10px var(--violet); }
.loop-core { position: absolute; inset: 37%; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--surface); border: 1px solid var(--line); }
.loop-core small { color: var(--muted); font-size: 12px; }
.loop-core b { font: 700 22px var(--mono); color: var(--violet); }

/* PRINCIPLES */
.principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pr { padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .3s; }
.pr:hover { transform: translateY(-4px); }
.pr-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--c) 12%, white); color: var(--c); font-size: 20px; font-weight: 700; }
.pr h3 { margin: 14px 0 4px; font-size: 17px; }
.pr p { margin: 0; color: var(--muted); font-size: 14px; }

/* SITE ARCH */
.arch { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 8px; }
.arch-node { padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 4px; text-align: center; box-shadow: var(--shadow); }
.arch-node.hl { border-color: var(--blue); box-shadow: 0 14px 30px -16px var(--blue); }
.arch-node small { color: var(--muted); font-size: 12.5px; }
.arch-link { position: relative; min-width: 120px; text-align: center; font: 11.5px/1.4 var(--mono); color: var(--muted); padding: 18px 6px; }
.arch-link::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); background-size: 200% 100%; animation: flowline 2s linear infinite; }
.arch-link span { position: relative; background: var(--bg); padding: 0 6px; }
@keyframes flowline { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.arch-deploy { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; color: var(--muted); font-size: 14px; }
.arch-deploy code { padding: 8px 12px; border-radius: 10px; background: #0f1a33; color: #4ade80; font-size: 13px; }
.facts { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.facts li { padding: 16px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 4px; }
.facts span { color: var(--muted); font-size: 14px; }

.contact { text-align: center; padding-bottom: 40px; }
.contact p { color: var(--muted); margin: 0 0 24px; }
footer { width: min(1160px, 100%); margin: 80px auto 0; padding: 24px clamp(16px, 4vw, 48px) 40px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 1040px) {
  .panel { grid-template-columns: 1fr; }
  .lab-body { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .term { grid-column: 1; grid-row: auto; transform: none; }
  .principles { grid-template-columns: repeat(2, 1fr); }
  .explorer { grid-template-columns: 1fr; }
  .ex-list { position: static; display: flex; overflow-x: auto; gap: 6px; padding: 8px; scrollbar-width: none; }
  .ex-group { display: none; }
  .ex-list button { flex: none; white-space: nowrap; }
  .arch { grid-template-columns: 1fr; }
  .arch-link { padding: 10px; }
  .arch-link::before { left: 50%; right: auto; top: 0; bottom: 0; width: 2px; height: auto; background: linear-gradient(transparent, var(--blue), transparent); }
}
@media (max-width: 640px) {
  .nav nav { display: none; }
  .lang { margin-left: auto; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .principles { grid-template-columns: 1fr; }
  .readout, .chip-map { grid-template-columns: 1fr; }
  .zt-grid { grid-template-columns: repeat(2, 1fr); }
  .panel { padding: 18px; }
  .loop-step { width: 94px; margin-left: -47px; font-size: 11.5px; transform: rotate(var(--a)) translate(96px) rotate(calc(-1 * var(--a))); }
  footer { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* map badges and legend */
#map .zt-mark { fill: none; stroke: var(--violet); stroke-width: 2; stroke-dasharray: 4 4; animation: ztspin 10s linear infinite; transition: opacity .35s; }
@keyframes ztspin { to { stroke-dashoffset: -64; } }
#map .mon-mark { fill: var(--amber); stroke: #fff; stroke-width: 2; transition: opacity .35s; animation: monpulse 2.4s ease-in-out infinite; }
@keyframes monpulse { 50% { fill: #ffc547; } }
#map .zt-mark.off, #map .mon-mark.off { opacity: 0; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.lg-zt { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 2px dashed var(--violet); vertical-align: -3px; margin-right: 6px; }
.lg-mon { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--amber); margin-left: 6px; }
.linkish { border: 0; background: none; padding: 2px 6px; border-radius: 8px; font: inherit; color: var(--blue); font-weight: 600; cursor: pointer; }
.linkish:hover, .linkish.sel { background: color-mix(in srgb, var(--blue) 10%, white); }
.legend .linkish:first-child { color: var(--muted); font-weight: 500; }

.arch-deploy code.inline { padding: 2px 6px; font-size: 12.5px; }

/* Chinese: sans everywhere, no tracking tricks meant for Latin */
:root:is([data-lang="zh-CN"], [data-lang="ja"]) body { letter-spacing: .01em; }
:root:is([data-lang="zh-CN"], [data-lang="ja"]) :is(h1, h2, .panel h3) { letter-spacing: 0; }
:root:is([data-lang="zh-CN"], [data-lang="ja"]) :is(.beats b, .demo-title, .ex-group, .readout b, .meter b, .lab-info-k) { font-family: var(--sans); letter-spacing: .08em; }
:root:is([data-lang="zh-CN"], [data-lang="ja"]) .beats b { font-size: 13px; }
:root:is([data-lang="zh-CN"], [data-lang="ja"]) :is(.lede, .beats span) { line-height: 1.85; }

#map .uu2 { stroke: var(--pink); stroke-width: 2.4; stroke-dasharray: 8 8; opacity: .8; animation: dash 1.4s linear infinite; }
#map .nd.hub circle:first-child { fill: #eef3ff; stroke: var(--blue); stroke-width: 2.5; }
#map .nd.hub[data-node="hkhub"] circle:first-child { fill: #fdeef4; stroke: var(--pink); }
#map .nd.hub .ic.small { fill: var(--text); font-size: 11px; letter-spacing: .06em; }
#map .zone-s { font: 600 12px var(--sans); fill: var(--muted); }
#rHub, #rSrv { transition: opacity .4s; }

:root[data-lang="ja"] h1 { font-size: clamp(30px, 4.6vw, 54px); }

/* nav never wraps; CJK headings break at phrase boundaries */
.nav nav a, .lang button, .chip, .seg button, .ex-list button { white-space: nowrap; }
.ex-list button { white-space: normal; }
@media (max-width: 900px) { .nav nav { display: none; } .lang { margin-left: auto; } }
:root:is([data-lang="ja"], [data-lang="zh-CN"]) :is(h1, h2, h3) { text-wrap: balance; }
:root[data-lang="ja"] :is(h1, h2, h3, .ex-list button, .chip) { word-break: auto-phrase; }

img.brand-mark { display: block; width: 36px; height: 36px; background: none; border-radius: 11px; box-shadow: 0 8px 18px -8px rgba(106,92,255,.7); }

/* DNS fan-out demo and AWS mapping */
.dns-views { margin-bottom: 2px; }
.dv { display: grid; gap: 12px; }
.dv[hidden] { display: none; }
#fan { width: 100%; height: auto; }
#fan .fan-lines path { stroke: var(--line2); stroke-width: 2; stroke-dasharray: 4 5; fill: none; }
#fan .fan-node circle, #fan .fan-up circle { fill: #fff; stroke: var(--line2); stroke-width: 2; }
#fan .fan-core rect { fill: #eaf7ee; stroke: var(--green); stroke-width: 2; }
#fan .fan-cache rect { fill: #fff; stroke: var(--line2); stroke-dasharray: 4 3; transition: all .3s; }
#fan .fan-cache.hit rect { stroke: var(--amber); fill: #fff8e8; stroke-dasharray: none; }
#fan text { font: 600 11.5px var(--sans); fill: var(--text); text-anchor: middle; }
#fan .fan-up text { text-anchor: start; }
#fan text.b { font-size: 13px; font-weight: 700; }
#fanCacheT { font: 600 11px var(--mono) !important; }
.panel .aws { grid-column: 1 / -1; border-top: 1px dashed var(--line2); padding-top: 18px; }
.aws h4 { margin: 0 0 12px; font-size: 16px; }
.aws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.aws-card { background: linear-gradient(180deg, #fff, #fffaf2); border: 1px solid var(--line); border-left: 4px solid #ff9900; border-radius: 14px; padding: 14px; display: grid; gap: 6px; align-content: start; }
.aws-card b { font-size: 14.5px; }
.aws-card p { margin: 0; color: #334061; font-size: 14px; }
.aws-card small { color: var(--muted); font-size: 12.5px; }
.aws-card a { color: var(--blue); font-weight: 600; }

/* ZeroTier cards: fixed structure, equal height, no layout change on hover */
.zt-grid { align-items: stretch; }
.zt-dev { grid-template-rows: auto 1fr auto auto; min-height: 118px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.zt-dev .n { align-self: start; }
.zt-dev .st { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.zt-dev.ok .st { color: var(--green); }
.zt-dev.src .st { color: var(--violet); }

/* technical details block */
.panel .deep { grid-column: 1 / -1; border-top: 1px dashed var(--line2); padding-top: 18px; }
.deep h4 { margin: 0 0 10px; font-size: 16px; }
.deep ol { margin: 0; padding: 0; list-style: none; counter-reset: d; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }
.deep li { counter-increment: d; position: relative; background: var(--surface2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 12px 44px; font-size: 14px; color: #334061; line-height: 1.65; }
.deep li::before { content: counter(d); position: absolute; left: 12px; top: 12px; width: 22px; height: 22px; border-radius: 50%; background: var(--c); color: #fff; font: 700 12px/22px var(--mono); text-align: center; }
.deep li b { color: var(--text); }
.deep code { font-size: 12.5px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; color: var(--pink); white-space: nowrap; }