/* ============================================================
   XGE Official Site — Design System
   Deep petrol viewport aesthetic · amber / teal / coral accents
   ============================================================ */

:root {
	--bg-0: #081114;
	--bg-1: #0c181c;
	--bg-2: #102126;
	--bg-3: #152a30;
	--line: rgba(122, 180, 172, 0.14);
	--line-strong: rgba(122, 180, 172, 0.30);
	--ink: #e8f3f0;
	--ink-dim: #9db8b2;
	--ink-faint: #5f7d78;
	--amber: #ffb454;
	--amber-deep: #e08c1a;
	--teal: #4fd8c2;
	--teal-deep: #1d9e8c;
	--coral: #ff6b5e;
	--blue: #6db3f2;
	--mono: "JetBrains Mono", "Cascadia Code", Consolas, "Courier New", monospace;
	--disp: "Chakra Petch", "PingFang SC", "Microsoft YaHei", sans-serif;
	--body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
	--nav-h: 64px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	background: var(--bg-0);
	color: var(--ink);
	font-family: var(--body);
	font-size: 15px;
	line-height: 1.75;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

::selection { background: rgba(255, 180, 84, 0.28); color: #fff; }

a { color: var(--teal); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--amber); }

img { max-width: 100%; display: block; }

/* ---------- ambient layered background ---------- */
.Ambient {
	position: fixed; inset: 0; z-index: -2; pointer-events: none;
	background:
		radial-gradient(1100px 700px at 82% -8%, rgba(79, 216, 194, 0.075), transparent 62%),
		radial-gradient(900px 640px at -12% 34%, rgba(255, 180, 84, 0.06), transparent 60%),
		radial-gradient(760px 560px at 68% 96%, rgba(255, 107, 94, 0.05), transparent 60%),
		linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 100%);
}
.Ambient::after {
	content: ""; position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(122,180,172,0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(122,180,172,0.045) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 20%, #000 30%, transparent 100%);
}

/* ---------- shared layout ---------- */
.Wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }

.Section { padding: 110px 0; position: relative; }

.SectionHead { margin-bottom: 56px; display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.SectionHead .Kick {
	font-family: var(--mono); font-size: 12px; letter-spacing: .22em;
	color: var(--amber); text-transform: uppercase;
	display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.SectionHead .Kick::before { content: ""; width: 26px; height: 1px; background: var(--amber); }
.SectionHead h2 {
	font-family: var(--disp); font-size: clamp(30px, 4vw, 46px);
	font-weight: 700; line-height: 1.15; letter-spacing: .01em;
}
.SectionHead .Lead { color: var(--ink-dim); max-width: 520px; padding-bottom: 6px; }
.SectionHead .Num {
	margin-left: auto; font-family: var(--disp); font-weight: 700;
	font-size: clamp(56px, 7vw, 92px); line-height: .8;
	color: transparent; -webkit-text-stroke: 1px rgba(122,180,172,0.28);
	user-select: none;
}

/* ---------- buttons ---------- */
.Btn {
	display: inline-flex; align-items: center; gap: 10px;
	font-family: var(--disp); font-weight: 600; font-size: 15px;
	padding: 13px 28px; border: 1px solid transparent; cursor: pointer;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
	transition: transform .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
	position: relative;
}
.Btn:active { transform: translateY(1px) scale(.99); }
.BtnAmber { background: var(--amber); color: #1a1206; }
.BtnAmber:hover { background: #ffc678; color: #1a1206; box-shadow: 0 6px 30px rgba(255,180,84,.35); transform: translateY(-2px); }
.BtnGhost { background: rgba(79,216,194,0.06); border-color: var(--line-strong); color: var(--teal); }
.BtnGhost:hover { border-color: var(--teal); color: var(--teal); background: rgba(79,216,194,0.12); transform: translateY(-2px); }
.Btn .Arr { transition: transform .18s ease; }
.Btn:hover .Arr { transform: translateX(4px); }

/* ---------- top nav ---------- */
.Nav {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h);
	display: flex; align-items: center;
	background: rgba(8, 17, 20, 0.72);
	backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease, background .3s ease;
}
.Nav.Scrolled { border-bottom-color: var(--line); background: rgba(8, 17, 20, 0.9); }
.NavInner { max-width: 1240px; margin: 0 auto; padding: 0 28px; width: 100%; display: flex; align-items: center; gap: 34px; }
.Brand { display: flex; align-items: center; gap: 12px; }
.BrandMark {
	width: 34px; height: 34px; position: relative; flex: none;
	display: grid; place-items: center;
}
.BrandMark svg { width: 100%; height: 100%; }
.BrandName { font-family: var(--disp); font-weight: 700; font-size: 21px; letter-spacing: .06em; color: var(--ink); }
.BrandName em { font-style: normal; color: var(--amber); }
.NavLinks { display: flex; gap: 6px; margin-left: 8px; }
.NavLinks a {
	font-size: 14px; color: var(--ink-dim); padding: 8px 14px; position: relative;
	font-weight: 500;
}
.NavLinks a::after {
	content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px;
	background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.NavLinks a:hover { color: var(--ink); }
.NavLinks a:hover::after, .NavLinks a.On::after { transform: scaleX(1); }
.NavLinks a.On { color: var(--amber); }
.NavRight { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.VerBadge {
	font-family: var(--mono); font-size: 11.5px; color: var(--teal);
	border: 1px solid rgba(79,216,194,0.35); padding: 4px 10px;
	background: rgba(79,216,194,0.07); letter-spacing: .05em;
}
.NavBtn {
	font-family: var(--disp); font-weight: 600; font-size: 13.5px;
	color: #1a1206; background: var(--amber); padding: 8px 20px;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
	transition: background .18s ease, transform .18s ease;
}
.NavBtn:hover { background: #ffc678; color: #1a1206; transform: translateY(-1px); }

/* ---------- hero viewport ---------- */
.Hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: var(--nav-h); }
.HeroCanvas { position: absolute; inset: 0; z-index: 0; }
.HeroCanvas canvas { width: 100%; height: 100%; display: block; }
.HeroShade {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(90deg, rgba(8,17,20,0.88) 0%, rgba(8,17,20,0.42) 46%, rgba(8,17,20,0.12) 100%),
		linear-gradient(0deg, var(--bg-0) 0%, transparent 22%);
}
.HeroInner { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: 60px 28px 90px; }
.HeroTerm {
	font-family: var(--mono); font-size: 13px; color: var(--teal);
	display: inline-flex; align-items: center; gap: 10px;
	border: 1px solid rgba(79,216,194,0.28); background: rgba(12,24,28,0.7);
	padding: 8px 16px; margin-bottom: 30px;
}
.HeroTerm .Dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); animation: Pulse 2s ease-in-out infinite; }
@keyframes Pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(79,216,194,.5);} 50% { opacity: .55; box-shadow: 0 0 0 6px rgba(79,216,194,0);} }
.HeroTerm .Cursor { display: inline-block; width: 8px; height: 15px; background: var(--amber); animation: Blink 1.1s steps(1) infinite; }
@keyframes Blink { 50% { opacity: 0; } }

.HeroTitle { font-family: var(--disp); line-height: .98; margin-bottom: 26px; }
.HeroTitle .Row1 {
	display: block; font-size: clamp(64px, 10vw, 128px); font-weight: 700; letter-spacing: .02em;
	color: var(--ink);
}
.HeroTitle .Row2 {
	display: block; font-size: clamp(64px, 10vw, 128px); font-weight: 700; letter-spacing: .02em;
	color: transparent; -webkit-text-stroke: 1.5px rgba(255,180,84,0.85);
}
.HeroTitle .Row2 b { color: var(--amber); -webkit-text-stroke: 0; font-weight: 700; }
.HeroSub { max-width: 560px; color: var(--ink-dim); font-size: 16.5px; margin-bottom: 18px; }
.HeroSub strong { color: var(--ink); font-weight: 600; }
.HeroTags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 38px; }
.HeroTags span {
	font-family: var(--mono); font-size: 12px; color: var(--ink-dim);
	border: 1px solid var(--line); padding: 5px 12px; background: rgba(16,33,38,0.6);
	transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.HeroTags span:hover { border-color: var(--amber); color: var(--amber); transform: translateY(-2px); }
.HeroCta { display: flex; gap: 16px; flex-wrap: wrap; }

/* HUD corners */
.Hud {
	position: absolute; z-index: 3; font-family: var(--mono); font-size: 11.5px;
	color: var(--ink-faint); letter-spacing: .06em; pointer-events: none;
	display: flex; gap: 18px; align-items: center;
}
.Hud b { color: var(--teal); font-weight: 500; }
.Hud .Warn { color: var(--amber); }
.HudTL { top: calc(var(--nav-h) + 20px); left: 28px; }
.HudTR { top: calc(var(--nav-h) + 20px); right: 28px; text-align: right; }
.HudBL { bottom: 22px; left: 28px; }
.HudBR { bottom: 22px; right: 28px; text-align: right; }
.HudGrid { display: grid; gap: 3px; }
.FpsBar { display: inline-flex; gap: 2px; align-items: flex-end; height: 16px; }
.FpsBar i { width: 3px; background: var(--teal); opacity: .8; transition: height .15s ease; }

.ScrollCue {
	position: absolute; z-index: 3; left: 50%; bottom: 26px; transform: translateX(-50%);
	font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: .3em;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ScrollCue::after {
	content: ""; width: 1px; height: 34px; background: linear-gradient(180deg, var(--amber), transparent);
	animation: Drop 1.6s ease-in-out infinite;
}
@keyframes Drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: top; } 56% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- API marquee ---------- */
.Ticker {
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
	background: rgba(12,24,28,0.55); overflow: hidden; padding: 15px 0; position: relative;
}
.TickerTrack { display: flex; gap: 0; width: max-content; animation: Slide 46s linear infinite; }
.Ticker:hover .TickerTrack { animation-play-state: paused; }
.TickerTrack span {
	font-family: var(--mono); font-size: 13px; color: var(--ink-faint); white-space: nowrap; padding: 0 26px;
	display: inline-flex; align-items: center; gap: 26px;
}
.TickerTrack span::after { content: "◆"; font-size: 8px; color: var(--amber); opacity: .6; }
.TickerTrack span:hover { color: var(--teal); }
@keyframes Slide { to { transform: translateX(-50%); } }

/* ---------- bento features ---------- */
.Bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.Cell {
	border: 1px solid var(--line); background: linear-gradient(165deg, rgba(21,42,48,0.72), rgba(12,24,28,0.9));
	padding: 30px; position: relative; overflow: hidden;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.Cell::before {
	content: ""; position: absolute; top: 0; left: 0; width: 46px; height: 2px;
	background: var(--amber); transition: width .3s ease;
}
.Cell:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: 0 22px 50px rgba(0,0,0,0.4); }
.Cell:hover::before { width: 100%; }
.Cell .Tag {
	font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: var(--amber);
	text-transform: uppercase; margin-bottom: 14px; display: block;
}
.Cell h3 { font-family: var(--disp); font-size: 23px; font-weight: 700; margin-bottom: 10px; }
.Cell p { color: var(--ink-dim); font-size: 14px; }
.Cell .Demo { margin-top: 22px; border: 1px solid var(--line); background: var(--bg-0); position: relative; }
.Cell .Demo canvas { width: 100%; height: 100%; display: block; }
.CellBig { grid-column: span 7; grid-row: span 2; display: flex; flex-direction: column; }
.CellBig .Demo { flex: 1; min-height: 300px; }
.CellMid { grid-column: span 5; }
.CellMid .Demo { height: 132px; }
.CellSm { grid-column: span 4; }
.CellSm .Demo { height: 110px; }
.Cell .MiniStat { display: flex; gap: 26px; margin-top: 22px; flex-wrap: wrap; }
.Cell .MiniStat div b { font-family: var(--disp); font-size: 26px; font-weight: 700; color: var(--teal); display: block; line-height: 1.1; }
.Cell .MiniStat div i { font-style: normal; font-size: 12px; color: var(--ink-faint); }
.GlyphRow { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.GlyphRow code {
	font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim);
	border: 1px solid var(--line); padding: 4px 10px; background: rgba(8,17,20,0.7);
	transition: color .2s, border-color .2s;
}
.Cell:hover .GlyphRow code { border-color: rgba(255,180,84,0.35); }

/* ---------- code showcase ---------- */
.CodeSec { background: linear-gradient(180deg, transparent, rgba(12,24,28,0.65) 18%, rgba(12,24,28,0.65) 82%, transparent); }
.CodePanel { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 0; border: 1px solid var(--line-strong); }
.CodeLeft { border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.CodeTabs { display: flex; border-bottom: 1px solid var(--line); background: rgba(8,17,20,0.7); overflow-x: auto; }
.CodeTabs button {
	font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint);
	background: none; border: none; border-right: 1px solid var(--line);
	padding: 13px 20px; cursor: pointer; white-space: nowrap; position: relative;
	transition: color .2s ease, background .2s ease;
}
.CodeTabs button:hover { color: var(--ink-dim); }
.CodeTabs button.On { color: var(--amber); background: rgba(255,180,84,0.06); }
.CodeTabs button.On::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--amber); }
.CodeBody { padding: 26px 28px; overflow-x: auto; flex: 1; }
.CodeBody pre { font-family: var(--mono); font-size: 13.5px; line-height: 1.85; tab-size: 4; }
.CodeBody .Pane { display: none; animation: FadeUp .35s ease; }
.CodeBody .Pane.On { display: block; }
@keyframes FadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tk-k { color: #ff9e64; }   /* keyword */
.tk-t { color: #4fd8c2; }   /* type */
.tk-f { color: #ffd166; }   /* function */
.tk-s { color: #9ece8f; }   /* string */
.tk-n { color: #f38ba8; }   /* number */
.tk-c { color: #587470; font-style: italic; }  /* comment */
.tk-p { color: #8fb3ad; }   /* plain/punct */
.tk-m { color: #6db3f2; }   /* macro */
.CodeRight { padding: 34px 34px; display: flex; flex-direction: column; gap: 22px; background: rgba(8,17,20,0.5); }
.CodeRight h3 { font-family: var(--disp); font-size: 24px; line-height: 1.35; }
.CodeRight h3 em { font-style: normal; color: var(--amber); }
.CodeRight p { color: var(--ink-dim); font-size: 14.5px; }
.ApiList { display: grid; gap: 0; border: 1px solid var(--line); margin-top: auto; }
.ApiList a {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim);
	padding: 11px 16px; border-bottom: 1px solid var(--line);
	transition: background .18s ease, color .18s ease, padding-left .18s ease;
}
.ApiList a:last-child { border-bottom: none; }
.ApiList a:hover { background: rgba(79,216,194,0.07); color: var(--teal); padding-left: 22px; }
.ApiList a i { font-style: normal; color: var(--ink-faint); font-size: 11px; }

/* ---------- widget gallery ---------- */
.WgFilters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.WgFilters button {
	font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim);
	background: rgba(16,33,38,0.6); border: 1px solid var(--line);
	padding: 7px 16px; cursor: pointer; transition: all .18s ease;
}
.WgFilters button:hover { color: var(--ink); border-color: var(--line-strong); }
.WgFilters button.On { color: #1a1206; background: var(--amber); border-color: var(--amber); font-weight: 600; }
.WgGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 12px; }
.WgItem {
	border: 1px solid var(--line); background: rgba(12,24,28,0.65);
	padding: 16px 16px 14px; position: relative; overflow: hidden; cursor: default;
	transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.WgItem::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
	background: var(--tc, var(--teal)); transition: width .25s ease;
}
.WgItem:hover { transform: translateY(-4px); border-color: var(--line-strong); background: rgba(16,33,38,0.9); }
.WgItem:hover::after { width: 100%; }
.WgItem b { font-family: var(--disp); font-size: 15px; font-weight: 600; display: block; margin-bottom: 3px; }
.WgItem span { font-size: 12px; color: var(--ink-faint); }
.WgItem .Cat {
	position: absolute; top: 10px; right: 10px; font-family: var(--mono); font-size: 9.5px;
	color: var(--tc, var(--teal)); opacity: .75; letter-spacing: .08em;
}
.WgItem.Hide { display: none; }
.WgMore { margin-top: 26px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-faint); }
.WgMore b { color: var(--amber); font-weight: 500; }

/* ---------- platforms ---------- */
.PlatGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.PlatItem {
	border: 1px solid var(--line); padding: 26px 22px; background: rgba(12,24,28,0.6);
	position: relative; overflow: hidden; transition: transform .22s ease, border-color .22s ease;
}
.PlatItem:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.PlatItem .Ico { font-size: 26px; margin-bottom: 14px; display: block; filter: grayscale(.2); }
.PlatItem b { font-family: var(--disp); font-size: 17px; display: block; margin-bottom: 4px; }
.PlatItem span { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); display: block; }
.PlatItem .Gpu { margin-top: 12px; font-family: var(--mono); font-size: 10.5px; color: var(--teal); border-top: 1px dashed var(--line); padding-top: 10px; }

/* ---------- architecture ---------- */
.Arch { display: grid; gap: 10px; max-width: 900px; }
.ArchRow {
	display: flex; align-items: stretch; gap: 10px;
	opacity: 0; transform: translateX(-24px); transition: opacity .5s ease, transform .5s ease;
}
.ArchRow.On { opacity: 1; transform: none; }
.ArchLabel {
	flex: none; width: 120px; display: flex; flex-direction: column; justify-content: center;
	font-family: var(--mono); font-size: 11px; color: var(--ink-faint); letter-spacing: .12em; text-align: right; padding-right: 14px;
}
.ArchLabel b { color: var(--ac, var(--teal)); font-size: 13px; letter-spacing: .05em; }
.ArchCells { flex: 1; display: flex; gap: 10px; }
.ArchCell {
	flex: 1; border: 1px solid var(--line); background: rgba(16,33,38,0.7);
	padding: 14px 16px; font-size: 13px; color: var(--ink-dim);
	border-left: 3px solid var(--ac, var(--teal));
	transition: background .2s ease, transform .2s ease;
}
.ArchCell:hover { background: rgba(21,42,48,0.95); transform: translateY(-2px); }
.ArchCell b { display: block; color: var(--ink); font-family: var(--disp); font-size: 14px; margin-bottom: 2px; }
.ArchCell.Wide { flex: 2; }

/* ---------- stats band ---------- */
.Stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(12,24,28,0.5); }
.StatsGrid { display: grid; grid-template-columns: repeat(6, 1fr); }
.Stat {
	padding: 46px 20px; text-align: center; border-right: 1px solid var(--line);
	transition: background .25s ease;
}
.Stat:last-child { border-right: none; }
.Stat:hover { background: rgba(255,180,84,0.045); }
.Stat b { font-family: var(--disp); font-weight: 700; font-size: clamp(34px, 3.6vw, 50px); color: var(--ink); display: block; line-height: 1; }
.Stat b i { font-style: normal; color: var(--amber); font-size: .6em; vertical-align: super; }
.Stat span { font-size: 13px; color: var(--ink-faint); display: block; margin-top: 10px; }

/* ---------- download / quickstart ---------- */
.DlGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.DlCard { border: 1px solid var(--line); background: linear-gradient(165deg, rgba(21,42,48,0.7), rgba(12,24,28,0.9)); padding: 34px; position: relative; overflow: hidden; transition: border-color .25s ease, transform .25s ease; }
.DlCard:hover { border-color: var(--line-strong); transform: translateY(-4px); }
.DlCard h3 { font-family: var(--disp); font-size: 22px; margin-bottom: 8px; }
.DlCard h3 em { font-style: normal; color: var(--amber); }
.DlCard p { color: var(--ink-dim); font-size: 14px; margin-bottom: 22px; }
.Term {
	background: #060d0f; border: 1px solid var(--line); font-family: var(--mono);
	font-size: 13px; line-height: 2; padding: 18px 20px; overflow-x: auto;
}
.Term .P { color: var(--teal); user-select: none; }
.Term .Cm { color: #587470; }
.Term .Hl { color: var(--amber); }
.Term .Out { color: var(--ink-faint); }
.DlLinks { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.DlLinks a {
	font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim);
	border: 1px solid var(--line); padding: 8px 16px;
	transition: all .18s ease;
}
.DlLinks a:hover { color: var(--amber); border-color: rgba(255,180,84,0.5); transform: translateY(-2px); }

/* ---------- footer ---------- */
.Footer { border-top: 1px solid var(--line); padding: 64px 0 0; background: rgba(8,17,20,0.75); }
.FootGrid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; }
.FootBrand p { color: var(--ink-faint); font-size: 13.5px; margin-top: 16px; max-width: 300px; }
.FootCol h4 { font-family: var(--disp); font-size: 14px; letter-spacing: .1em; color: var(--ink-dim); margin-bottom: 18px; text-transform: uppercase; }
.FootCol a { display: block; color: var(--ink-faint); font-size: 13.5px; padding: 5px 0; transition: color .18s, padding-left .18s; }
.FootCol a:hover { color: var(--amber); padding-left: 6px; }
.FootBar { border-top: 1px solid var(--line); padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-faint); }
.FootBar a { color: var(--ink-faint); }
.FootBar a:hover { color: var(--teal); }

/* ---------- scroll reveal ---------- */
.Rv { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.Rv.On { opacity: 1; transform: none; }
.RvD1 { transition-delay: .08s; } .RvD2 { transition-delay: .16s; } .RvD3 { transition-delay: .24s; } .RvD4 { transition-delay: .32s; } .RvD5 { transition-delay: .40s; }

/* ---------- page hero (sub pages) ---------- */
.PageHero { padding: calc(var(--nav-h) + 76px) 0 66px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.PageHero .Kick { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; color: var(--amber); display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.PageHero .Kick::before { content: ""; width: 26px; height: 1px; background: var(--amber); }
.PageHero h1 { font-family: var(--disp); font-size: clamp(38px, 5vw, 58px); font-weight: 700; line-height: 1.12; margin-bottom: 16px; }
.PageHero p { color: var(--ink-dim); max-width: 620px; font-size: 16px; }
.PageHero .Deco {
	position: absolute; right: -60px; top: 40%; transform: translateY(-50%);
	font-family: var(--disp); font-weight: 700; font-size: 240px; line-height: 1;
	color: transparent; -webkit-text-stroke: 1px rgba(122,180,172,0.14); user-select: none; pointer-events: none;
}

/* ---------- docs page ---------- */
.DocGrid { display: grid; grid-template-columns: 250px 1fr; gap: 44px; align-items: start; }
.DocSide { position: sticky; top: calc(var(--nav-h) + 26px); }
.DocSide h5 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--ink-faint); margin: 22px 0 10px; text-transform: uppercase; }
.DocSide a { display: block; font-size: 13.5px; color: var(--ink-dim); padding: 7px 12px; border-left: 2px solid var(--line); transition: all .18s ease; }
.DocSide a:hover, .DocSide a.On { color: var(--amber); border-left-color: var(--amber); background: rgba(255,180,84,0.05); }
.DocMain section { margin-bottom: 64px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.DocMain h2 { font-family: var(--disp); font-size: 28px; margin-bottom: 8px; }
.DocMain h3 { font-family: var(--disp); font-size: 19px; margin: 30px 0 10px; color: var(--teal); }
.DocMain p { color: var(--ink-dim); margin-bottom: 14px; }
.DocMain p code, .DocMain li code {
	font-family: var(--mono); font-size: 12.5px; color: var(--amber);
	background: rgba(255,180,84,0.08); border: 1px solid rgba(255,180,84,0.18); padding: 1px 7px;
}
.DocMain ul { padding-left: 20px; color: var(--ink-dim); margin-bottom: 14px; }
.DocMain li { margin-bottom: 6px; }
.ApiTable { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 16px 0 26px; }
.ApiTable th {
	text-align: left; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--ink-faint);
	border-bottom: 1px solid var(--line-strong); padding: 10px 14px; text-transform: uppercase;
}
.ApiTable td { border-bottom: 1px solid var(--line); padding: 11px 14px; color: var(--ink-dim); vertical-align: top; }
.ApiTable tr { transition: background .15s ease; }
.ApiTable tbody tr:hover { background: rgba(79,216,194,0.05); }
.ApiTable td:first-child { font-family: var(--mono); font-size: 12.5px; color: var(--teal); white-space: nowrap; }
.DocNote {
	border: 1px solid rgba(255,180,84,0.3); border-left: 3px solid var(--amber);
	background: rgba(255,180,84,0.05); padding: 16px 20px; font-size: 13.5px; color: var(--ink-dim); margin: 18px 0;
}
.DocNote b { color: var(--amber); }

/* ---------- examples page ---------- */
.ExFilters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; }
.ExFilters button { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); background: rgba(16,33,38,0.6); border: 1px solid var(--line); padding: 7px 16px; cursor: pointer; transition: all .18s ease; }
.ExFilters button.On { color: #1a1206; background: var(--amber); border-color: var(--amber); font-weight: 600; }
.ExGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(295px, 1fr)); gap: 16px; }
.ExCard { border: 1px solid var(--line); background: rgba(12,24,28,0.65); overflow: hidden; transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.ExCard:hover { transform: translateY(-5px); border-color: var(--line-strong); box-shadow: 0 18px 44px rgba(0,0,0,0.4); }
.ExCard.Hide { display: none; }
.ExThumb { height: 150px; position: relative; overflow: hidden; background: var(--bg-0); border-bottom: 1px solid var(--line); }
.ExThumb canvas { width: 100%; height: 100%; display: block; }
.ExThumb .Cat {
	position: absolute; top: 10px; left: 10px; font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
	background: rgba(8,17,20,0.85); border: 1px solid var(--line); color: var(--tc, var(--teal)); padding: 3px 9px;
}
.ExBody { padding: 18px 20px 20px; }
.ExBody b { font-family: var(--disp); font-size: 16.5px; display: block; margin-bottom: 5px; }
.ExBody p { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 12px; }
.ExBody code { font-family: var(--mono); font-size: 11.5px; color: var(--teal); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
	.CellBig { grid-column: span 12; }
	.CellMid { grid-column: span 6; }
	.CellSm { grid-column: span 6; }
	.CodePanel { grid-template-columns: 1fr; }
	.CodeLeft { border-right: none; border-bottom: 1px solid var(--line); }
	.PlatGrid { grid-template-columns: repeat(2, 1fr); }
	.StatsGrid { grid-template-columns: repeat(3, 1fr); }
	.Stat:nth-child(3) { border-right: none; }
	.Stat { border-bottom: 1px solid var(--line); }
	.FootGrid { grid-template-columns: 1fr 1fr; }
	.DocGrid { grid-template-columns: 1fr; }
	.DocSide { position: static; }
}
@media (max-width: 720px) {
	.NavLinks { display: none; }
	.CellMid, .CellSm { grid-column: span 12; }
	.PlatGrid { grid-template-columns: 1fr; }
	.StatsGrid { grid-template-columns: 1fr 1fr; }
	.DlGrid { grid-template-columns: 1fr; }
	.Hud { display: none; }
	.Section { padding: 78px 0; }
	.FootGrid { grid-template-columns: 1fr; }
	.ArchLabel { width: 78px; }
	.ArchCells { flex-direction: column; }
}


/* ---------- Friend links (Ecosystem) ---------- */
.FriendGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.FriendCard {
	display: flex; align-items: center; gap: 16px;
	padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px;
	background: var(--bg-1); text-decoration: none;
	transition: border-color .2s, transform .2s;
}
.FriendCard:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.FriendLogo {
	flex: none; width: 140px; height: 46px; box-sizing: border-box;
	display: flex; align-items: center; justify-content: center;
	background: #ffffff; border-radius: 10px; padding: 6px;
}
.FriendLogo img { max-width: 100%; max-height: 100%; }
.FriendLogoDark { background: #181818; border: 1px solid var(--line); }
.FriendText { display: flex; flex-direction: column; min-width: 0; }
.FriendName { color: var(--ink); font-size: 14px; font-weight: 650; letter-spacing: .02em; }
.FriendDesc { color: var(--ink-faint); font-size: 12px; line-height: 1.55; }
@media (max-width: 860px) { .FriendGrid { grid-template-columns: 1fr; } }