:root {
  color-scheme: dark;
  --ink: #071411;
  --paper: #eff5e9;
  --muted: #8da098;
  --line: rgba(201, 227, 211, 0.15);
  --acid: #c8ff4d;
  --cyan: #75e9d2;
  --orange: #ff9b61;
  --violet: #a79af8;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); }
body { min-width: 320px; margin: 0; color: var(--paper); background: radial-gradient(circle at 78% 18%,rgba(117,233,210,.11),transparent 32rem),radial-gradient(circle at 18% 62%,rgba(200,255,77,.05),transparent 34rem),#071411; }
button,a { font: inherit; }
button:focus-visible,a:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.grid-noise { position: fixed; inset: 0; pointer-events:none; opacity:.25; background-image:linear-gradient(rgba(255,255,255,.024) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.024) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 92%); }
.topbar { position:sticky; top:0; z-index:10; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:82px; padding:0 34px; border-bottom:1px solid var(--line); background:rgba(7,20,17,.86); backdrop-filter:blur(18px); }
.brand { display:flex; gap:12px; align-items:center; color:inherit; text-decoration:none; }
.brand__mark { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--acid); border-radius:50%; color:var(--acid); }
.brand strong,.brand small { display:block; }
.brand small { margin-top:3px; color:var(--muted); font-size:10px; }
.topbar p { margin:0; color:#adbbb5; font-size:12px; }
.back-link { justify-self:end; color:var(--acid); font-size:11px; text-decoration:none; }
main { position:relative; width:min(1480px,100%); margin:auto; padding:0 34px 70px; }
.hero { display:grid; align-content:center; min-height:600px; padding:80px 3vw; }
.eyebrow { color:var(--cyan); font-size:10px; letter-spacing:.18em; text-transform:uppercase; }
.hero h1 { max-width:1100px; margin:24px 0; font-family:Georgia,"Noto Serif SC",serif; font-size:clamp(50px,7vw,102px); font-weight:500; line-height:1.02; letter-spacing:-.055em; }
.hero h1 span { color:var(--acid); }
.hero > p { max-width:740px; margin:0; color:#aabbb3; font-size:17px; line-height:1.8; }
.hero__meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:38px; }
.hero__meta span { padding:8px 11px; border:1px solid var(--line); border-radius:999px; color:#8fa198; font-size:10px; }
.observatory { margin-top:48px; border:1px solid var(--line); border-radius:28px; overflow:hidden; background:rgba(5,14,12,.72); box-shadow:0 35px 100px rgba(0,0,0,.25); }
.observatory__head { display:flex; justify-content:space-between; align-items:end; gap:24px; padding:32px 34px 0; }
.observatory h2 { margin:10px 0 0; font-family:Georgia,"Noto Serif SC",serif; font-size:clamp(32px,4vw,54px); font-weight:500; letter-spacing:-.04em; }
.lens-switch { display:flex; padding:4px; border:1px solid var(--line); border-radius:999px; }
.lens-switch button { padding:9px 13px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; font-size:10px; }
.lens-switch button.is-active { background:var(--paper); color:#071411; }
.panorama-shell { display:grid; grid-template-columns:minmax(0,1fr) 430px; min-height:720px; border-top:1px solid var(--line); }
.panorama { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:12px; padding:26px; border-right:1px solid var(--line); }
.loading { place-self:center; color:var(--muted); }
.layer-band { display:grid; grid-template-rows:auto 1fr; min-width:0; padding:18px; border:1px solid var(--line); border-radius:20px; background:rgba(255,255,255,.018); }
.layer-band--ecosystem { grid-column:auto; grid-template-columns:1fr; grid-template-rows:auto 1fr; min-height:0; }
.layer-head span { color:var(--accent); font:600 9px/1 monospace; letter-spacing:.12em; }
.layer-head h3 { margin:12px 0 8px; font-family:Georgia,"Noto Serif SC",serif; font-size:20px; font-weight:500; line-height:1.3; }
.layer-head p { margin:0; color:#72867c; font-size:10px; line-height:1.55; }
.layer-count { display:inline-block; margin-top:14px; color:var(--accent); font-size:11px; }
.group-list { display:grid; align-content:start; gap:8px; margin-top:24px; }
.layer-band--ecosystem .group-list { align-content:start; margin:24px 0 0; }
.group-card { position:relative; display:grid; grid-template-columns:1fr auto; gap:8px; min-height:150px; padding:14px; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.02); color:#9aacA3; cursor:pointer; text-align:left; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.group-card:hover,.group-card.is-active { transform:translateY(-2px); border-color:var(--accent); background:color-mix(in srgb,var(--accent),transparent 92%); color:white; }
.group-card strong { font-size:12px; line-height:1.35; }
.group-card > span { color:var(--accent); font:600 16px/1 monospace; }
.company-preview { grid-column:1 / -1; display:flex; flex-wrap:wrap; align-content:end; gap:5px; margin-top:8px; }
.group-card > .company-preview { color:inherit; font:inherit; }
.company-preview b { padding:5px 7px; border:1px solid color-mix(in srgb,var(--accent),transparent 68%); border-radius:999px; color:#c1d0c9; font-size:10px; font-weight:500; line-height:1.25; }
.inspector { padding:42px 34px; background:rgba(255,255,255,.015); }
.inspector h3 { margin:18px 0; font-family:Georgia,"Noto Serif SC",serif; font-size:34px; font-weight:500; line-height:1.15; }
.inspector p { color:#93a59c; line-height:1.75; }
.inspector__metric { display:flex; align-items:end; gap:10px; margin:28px 0; padding:18px 0; border-block:1px solid var(--line); }
.inspector__metric strong { color:var(--acid); font:500 58px/1 Georgia,serif; }
.inspector__metric span { padding-bottom:8px; color:var(--muted); font-size:10px; }
.inspector dl { display:grid; gap:14px; margin:24px 0; }
.inspector dt { color:var(--cyan); font-size:10px; }
.inspector dd { margin:5px 0 0; color:#9badA4; font-size:11px; line-height:1.65; }
.representatives { display:flex; flex-wrap:wrap; gap:7px; }
.representatives span { padding:7px 9px; border:1px solid var(--line); border-radius:999px; color:#b7c5bf; font-size:10px; }
.representative-note { margin-top:12px!important; color:#64786e!important; font-size:9px!important; }
.member-list { display:grid; max-height:360px; overflow:auto; margin-top:22px; border-top:1px solid var(--line); scrollbar-color:rgba(200,255,77,.38) transparent; }
.member-list__head { position:sticky; top:0; z-index:1; display:flex; justify-content:space-between; gap:12px; padding:12px 0 9px; color:var(--muted); background:#0b1915; font-size:10px; }
.member-item { display:flex; justify-content:space-between; gap:10px; padding:9px 0; color:#b8c7c0; border-top:1px solid rgba(201,227,211,.08); font-size:11px; line-height:1.4; text-decoration:none; }
.member-item a,.member-item[href] { color:#d9e7e0; }
.member-item small { color:var(--acid); font-size:9px; }
.flow-view,.boundary-view { grid-column:1 / -1; display:grid; align-content:center; width:100%; padding:clamp(30px,5vw,70px); }
.flow-view > header h3,.boundary-view > header h3 { max-width:760px; margin:14px 0 34px; font-family:Georgia,"Noto Serif SC",serif; font-size:clamp(28px,4vw,48px); font-weight:500; line-height:1.15; }
.flow-loop { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; }
.flow-step { position:relative; min-height:190px; padding:20px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.018); color:#7f9289; cursor:pointer; text-align:left; }
.flow-step > span { color:#587066; font:600 9px/1 monospace; }
.flow-step strong,.flow-step small { display:block; }
.flow-step strong { margin-top:34px; font-size:14px; }
.flow-step small { margin-top:10px; color:#6d8177; font-size:10px; line-height:1.55; }
.flow-step i { position:absolute; right:-9px; top:50%; z-index:2; color:var(--acid); font-style:normal; }
.flow-step:hover,.flow-step.is-active { border-color:var(--acid); background:rgba(200,255,77,.07); color:white; }
.flow-caveat { display:grid; grid-template-columns:170px 1fr; gap:24px; margin-top:16px; padding:19px; border-left:2px solid var(--orange); background:rgba(255,155,97,.05); }
.flow-caveat strong { color:var(--orange); font-size:11px; }
.flow-caveat p { margin:0; color:var(--muted); font-size:11px; line-height:1.65; }
.feedback-list { display:grid; gap:8px; margin-top:24px; }
.feedback-list span { padding:10px 12px; border:1px solid var(--line); border-radius:10px; color:#aebdb6; font-size:10px; }
.boundary-list { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.boundary-card { min-height:220px; padding:22px; border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.018); color:#879a91; cursor:pointer; text-align:left; }
.boundary-card > span { color:var(--violet); font:600 10px/1 monospace; }
.boundary-card strong,.boundary-card small { display:block; }
.boundary-card strong { margin-top:38px; font-family:Georgia,"Noto Serif SC",serif; font-size:24px; font-weight:500; line-height:1.25; }
.boundary-card small { margin-top:18px; color:#6e8278; line-height:1.6; }
.boundary-card:hover,.boundary-card.is-active { border-color:var(--violet); background:rgba(167,154,248,.07); color:white; }
.versus-grid { display:grid; gap:9px; margin-top:24px; }
.versus-grid article { padding:16px; border:1px solid var(--line); border-radius:13px; }
.versus-grid span { color:var(--cyan); font:600 9px/1 monospace; }
.versus-grid p { margin:9px 0; color:#a9b8b1; font-size:11px; }
.versus-grid strong { color:#dce7e1; font-size:10px; }
.mistake-note { margin-top:22px!important; padding-top:18px; border-top:1px solid var(--line); color:var(--orange)!important; font-size:11px!important; }
.insights { padding:44px 34px 36px; border-top:1px solid var(--line); }
.insights > header { display:flex; justify-content:space-between; align-items:end; gap:22px; }
.insights h3 { max-width:700px; margin:10px 0 0; font-family:Georgia,"Noto Serif SC",serif; font-size:clamp(28px,4vw,46px); font-weight:500; }
.insight-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px; }
.insight-grid article { padding:23px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.018); }
.insight-grid article > span { color:var(--acid); font:600 9px/1 monospace; letter-spacing:.1em; }
.insight-grid h4 { margin:20px 0 12px; font-family:Georgia,"Noto Serif SC",serif; font-size:23px; font-weight:500; line-height:1.25; }
.insight-grid p { color:#8fa299; font-size:11px; line-height:1.75; }
.insight-grid details { margin-top:18px; padding-top:15px; border-top:1px solid var(--line); }
.insight-grid summary { color:#b4c2bc; cursor:pointer; font-size:10px; }
.insight-grid details p { color:#6f8279; }
footer { display:flex; justify-content:space-between; gap:24px; padding:24px 34px 34px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
@media (max-width:980px) {
  .topbar { grid-template-columns:1fr auto; padding:0 18px; }
  .topbar p { display:none; }
  main { padding-inline:14px; }
  .hero { min-height:520px; padding-inline:8px; }
  .observatory__head { align-items:start; flex-direction:column; }
  .lens-switch { overflow-x:auto; max-width:100%; }
  .panorama-shell { grid-template-columns:1fr; }
  .panorama { grid-template-columns:1fr; border-right:0; }
  .layer-band--ecosystem { grid-column:auto; grid-template-columns:1fr; }
  .layer-band--ecosystem .group-list { margin:20px 0 0; }
  .inspector { border-top:1px solid var(--line); }
  .flow-loop,.boundary-list,.insight-grid { grid-template-columns:1fr; }
  .flow-step { min-height:140px; }
  .flow-step i { right:50%; top:auto; bottom:-12px; transform:rotate(90deg); }
  .flow-caveat { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .brand small,.back-link { display:none; }
  .hero h1 { font-size:48px; }
  .observatory__head { padding-inline:18px; }
  .panorama { padding:14px; }
  footer { display:grid; padding-inline:18px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }