:root{--bg:#0b0c0e;--ink:#f2f3ee;--muted:#989b9d;--line:#292c2e;--green:#d2f993;--cyan:#83d6df;--coral:#e7ad98;--mono:"Cascadia Code",Consolas,monospace;--sans:Inter,"Segoe UI","Microsoft YaHei",sans-serif;color-scheme:dark;font-family:var(--sans);color:var(--ink);background:var(--bg);font-synthesis:none;letter-spacing:0}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;min-height:100svh;display:flex;flex-direction:column}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:5px}img{object-fit:contain}svg{width:18px;height:18px;stroke-width:1.6;flex-shrink:0}.wrap{width:min(1200px,calc(100% - 80px));margin-inline:auto}.skip-link{position:fixed;top:-60px;left:20px;padding:12px;background:var(--green);color:var(--bg);z-index:100}.skip-link:focus{top:12px}
.site-header{height:72px;flex-shrink:0;border-bottom:1px solid var(--line);background:var(--bg);position:relative;z-index:10}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:650;white-space:nowrap}.brand img{border-radius:5px}.brand-period{color:var(--green)}.button{display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:44px;padding:0 20px;border-radius:5px;font-size:13px;font-weight:550;white-space:nowrap;transition:background .2s,color .2s,transform .2s;border:1px solid transparent}.button:hover{transform:translateY(-2px)}.button svg{width:16px;height:16px}.button-outline{min-height:36px;padding-inline:14px;font-size:12px;background:#141617;border-color:#444849}.button-outline:hover{background:#25292a}.button-primary{min-height:52px;padding:10px 20px;border-radius:100px;background:#cfef00;color:#15200c;font-size:15px;font-weight:700;gap:0;box-shadow:none;transition:background .2s,transform .2s}.button-primary:hover{background:#c4e201;transform:none}.button-primary:active{transform:scale(.95)}.button-primary svg{width:34px;height:34px;margin-left:10px;stroke-width:1.4;transition:transform .3s ease-in-out}.button-primary:hover svg{transform:translateX(5px)}.button-quiet{color:#bfc3c4}.button-quiet:hover{color:var(--ink);background:#161819}
main{flex:1;display:flex;min-height:0}.hero{flex:1;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;min-height:620px;overflow:hidden}.hero-grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(transparent,black 20%,black 82%,transparent)}.hero-content{width:min(1200px,calc(100% - 64px));margin-inline:auto}.hero-copy{text-align:center}.eyebrow{display:flex;justify-content:center;align-items:center;gap:9px;font:10px/20px var(--mono);color:#bfc4b7}.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);flex-shrink:0}h1{font-size:92px;line-height:1.03;font-weight:600;margin:14px 0 9px}.hero-tagline{margin:0;font-size:25px;line-height:1.5;font-weight:500;color:#e2e5de}.hero-tagline span{color:#a7aba8}.hero-description{color:var(--muted);font-size:13px;line-height:1.8;margin:13px 0 20px}.hero-actions{display:flex;justify-content:center;align-items:center;gap:10px}
.route-scene{height:360px;position:relative;margin:16px auto 0;width:100%}#route-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.route-caption{position:absolute;top:20px;font:10px var(--mono);color:#757d7e;display:flex;gap:14px;align-items:center}.route-caption-left{left:4%}.route-caption-right{right:4%}.micro-index{color:#50595a}.route-node{position:absolute;display:flex;align-items:center;width:220px;height:62px;gap:13px;background:#101213;border:1px solid #2d3232;border-radius:5px;padding:0 17px;text-align:left;z-index:2;font-size:15px}.route-node small{display:block;font:9px var(--mono);color:#7f8788;margin-top:5px}.source-node{left:4%;border-color:#292e2e}.source-one,.model-one{top:62px}.source-two,.model-two{top:148px}.source-three,.model-three{top:234px}.node-symbol{display:flex;color:#c0c6c6}.source-node .node-port{right:-3px}.node-port{width:5px;height:5px;background:#647474;border-radius:50%;position:absolute;top:calc(50% - 2.5px);box-shadow:0 0 0 4px var(--bg)}.model-node{right:4%;width:220px;transition:background .25s,border-color .25s}.model-node>.lucide{width:14px;height:14px;margin-left:auto;color:#626a6a}.model-node .node-port{left:-3px}.provider-icon{width:34px;height:34px;flex-shrink:0;border-radius:5px}.model-node.active{border-color:#97b76a;background:#171e15}.model-node.active[data-provider=anthropic]{border-color:#b18170;background:#211a16}.model-node.active[data-provider=google]{border-color:#668e9b;background:#142024}.model-node.active .node-port{background:var(--green)}.model-node.active[data-provider=anthropic] .node-port{background:var(--coral)}.model-node.active[data-provider=google] .node-port{background:var(--cyan)}.model-node:hover{background:#222728}
.gateway{position:absolute;left:50%;top:106px;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:17px;pointer-events:none}.gateway-core{display:grid;place-items:center;width:144px;height:144px;border:1px solid #82985e;border-radius:8px;background:#121714;position:relative;box-shadow:0 0 0 8px #c8ef9c05,0 0 0 9px #c8ef9c10,0 0 0 21px #c8ef9c03,0 0 0 22px #c8ef9c08}.gateway-core:before,.gateway-core:after{content:"";height:5px;width:5px;background:var(--green);position:absolute;top:calc(50% - 2.5px)}.gateway-core:before{left:-3px}.gateway-core:after{right:-3px}.gateway-core img{width:124px;height:124px;border-radius:7px}.gateway>span{font:9px var(--mono);color:#a5b58c;white-space:nowrap}.route-event{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;font:10px var(--mono);color:#959e9e}.route-event code{color:#c4cccc}.event-arrow{color:#606969}.demo-note{font:10px var(--sans);color:#6d7777;padding-left:8px;border-left:1px solid var(--line)}.icon-button{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;color:var(--muted);flex-shrink:0}.icon-button:hover{color:var(--ink);background:#242729}.animation-control{position:absolute;right:0;bottom:0}.animation-control svg{width:13px;height:13px}.hero-bottom{height:46px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font:9px var(--mono);color:#687171}.hero-bottom>span{display:flex;align-items:center;gap:9px}.hero-bottom svg{height:13px;width:13px}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.site-header{height:64px}.brand{font-size:18px}.brand img{width:26px;height:26px}.button-outline{min-height:34px;padding-inline:10px;font-size:11px}.hero{min-height:635px}.hero-content{width:calc(100% - 32px)}.eyebrow{font-size:8px}h1{font-size:58px;margin:14px 0 9px}.hero-tagline{font-size:20px}.hero-description{font-size:11px;max-width:300px;margin:12px auto 18px}.hero-actions .button{min-height:42px;font-size:11px;padding-inline:15px;gap:7px}.route-scene{height:275px;margin-top:18px}.route-caption{font-size:7px;gap:6px;top:4px}.route-caption-left{left:0}.route-caption-right{right:0}.route-node{height:44px;width:111px;padding:0 8px;gap:6px;font-size:10px}.source-node{left:0}.model-node{right:0;width:111px}.route-node small{font-size:5px;margin-top:3px}.node-symbol svg{width:14px;height:14px}.source-one,.model-one{top:40px}.source-two,.model-two{top:104px}.source-three,.model-three{top:168px}.provider-icon{width:20px;height:20px}.model-node>.lucide{display:none}.gateway{top:94px;gap:13px}.gateway-core{width:72px;height:72px;box-shadow:0 0 0 5px #c8ef9c05,0 0 0 6px #c8ef9c10,0 0 0 13px #c8ef9c03,0 0 0 14px #c8ef9c08}.gateway-core img{width:43px;height:43px}.gateway>span{font-size:5px}.route-event{font-size:7px;gap:6px;bottom:11px}.demo-note{font-size:7px;padding-left:6px}.animation-control{bottom:33px;right:0;width:25px;height:25px}.hero-bottom{height:40px;font-size:7px}.hero-bottom>span:last-child{display:none}.hero-bottom>a{font-size:10px}}
@media(max-width:370px){h1{font-size:49px}.hero-tagline{font-size:18px}.hero-description{font-size:10px}.route-node{width:96px;font-size:9px;padding-inline:5px;gap:4px}.route-node small{font-size:4px}.provider-icon{width:17px;height:17px}.gateway-core{width:62px;height:62px}.gateway{top:100px}.gateway-core img{width:36px;height:36px}.gateway>span{font-size:4px}.route-event{font-size:6px;gap:5px}.demo-note{font-size:6px}.hero-bottom>span{font-size:6px}}
@media(max-height:780px) and (min-width:761px){.hero{min-height:590px}.hero-copy h1{font-size:72px;margin:8px 0 5px}.hero-description{margin:8px 0 13px}.route-scene{margin-top:5px;height:286px}.route-caption{top:8px}.source-one,.model-one{top:42px}.source-two,.model-two{top:108px}.source-three,.model-three{top:174px}.gateway{top:78px}.route-event{bottom:10px}.hero-bottom{height:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.site-header .brand{font-size:clamp(24px,2.2vw,30px)}
.site-header .button-outline{min-width:102px;gap:8px}
.model-node>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.button:disabled,.button:disabled:hover{cursor:default;transform:none;background:#141617;opacity:1}
.hero-copy h1{font-weight:650}
.model-node.active[data-provider=openai]{border-color:#b8c0bd;background:#1a1c1c}
.model-node.active[data-provider=openai] .node-port{background:#fff}

.header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tg-join-btn{--tg-pad:14px;--tg-ico:17px;position:relative;font-family:inherit;font-size:13px;font-weight:550;background:royalblue;color:#fff;padding:0 var(--tg-pad);min-height:36px;display:inline-flex;align-items:center;border-radius:16px;overflow:hidden;transition:all .2s;white-space:nowrap;flex-shrink:0}
.tg-join-btn > span:last-child{display:block;margin-left:calc(var(--tg-ico) + .3em);transition:all .3s ease-in-out}
.tg-join-btn .svg-wrapper-1{position:absolute;top:50%;left:var(--tg-pad);margin-top:calc(var(--tg-ico) / -2);display:flex;transition:left .3s ease-in-out}
.tg-join-btn .svg-wrapper{display:flex;align-items:center;justify-content:center}
.tg-join-btn svg{display:block;width:var(--tg-ico);height:var(--tg-ico);stroke:none;transform-origin:center center;transition:transform .3s ease-in-out}
.tg-join-btn:hover{background:#3a5fd0}
.tg-join-btn:hover .svg-wrapper-1{left:calc(50% - var(--tg-ico) / 2)}
.tg-join-btn:hover .svg-wrapper{animation:fly-1 .6s ease-in-out infinite alternate}
.tg-join-btn:hover svg{transform:rotate(45deg) scale(1.1)}
.tg-join-btn:hover > span:last-child{transform:translateX(calc(100% + var(--tg-pad) + 1em))}
.tg-join-btn:active{transform:scale(.95)}
@keyframes fly-1{from{transform:translateY(.1em)}to{transform:translateY(-.1em)}}
@media(prefers-reduced-motion:reduce){.tg-join-btn .svg-wrapper-1,.tg-join-btn svg,.tg-join-btn > span:last-child{transition:none}.tg-join-btn:hover .svg-wrapper{animation:none}}

@media(max-width:760px){
  .route-scene{height:295px}
  .route-node{width:116px;height:48px}
  .model-node{width:140px}
  .source-one,.model-one{top:42px}
  .source-two,.model-two{top:113px}
  .source-three,.model-three{top:184px}
  .provider-icon{width:25px;height:25px}
  .gateway{top:101px;margin-left:-12px}
  .gateway-core{width:84px;height:84px}
  .gateway-core img{width:74px;height:74px}
  .route-event{bottom:8px}
  .hero-bottom>span:last-child{display:flex}
  .hero-actions .button-primary{min-height:46px;padding:8px 18px;font-size:14px;gap:0}
  .hero-actions .button-primary svg{width:26px;height:26px;margin-left:8px}
  .header-actions{gap:6px}
  .tg-join-btn{--tg-pad:9px;--tg-ico:14px;font-size:10px;min-height:32px;border-radius:13px}
  .tg-join-btn .label-tail{display:none}
}
@media(min-width:550px) and (max-width:760px){
  .route-scene{height:320px}
  .route-node,.model-node{width:166px;height:55px;font-size:13px}
  .source-one,.model-one{top:48px}
  .source-two,.model-two{top:126px}
  .source-three,.model-three{top:204px}
  .route-node small{font-size:7px}
  .provider-icon{width:30px;height:30px}
  .gateway{top:102px;margin-left:0}
  .gateway-core{width:108px;height:108px}
  .gateway-core img{width:96px;height:96px}
}
@media(max-width:370px){
  .route-node{width:96px}
  .model-node{width:114px;font-size:8px}
  .provider-icon{width:20px;height:20px}
  .gateway{top:109px;margin-left:-8px}
  .gateway-core{width:68px;height:68px}
  .gateway-core img{width:60px;height:60px}
  .hero-bottom>span:last-child{display:none}
}
@media(max-height:780px) and (min-width:761px){
  .route-scene{height:310px}
  .source-one,.model-one{top:46px}
  .source-two,.model-two{top:121px}
  .source-three,.model-three{top:196px}
  .gateway{top:83px}
}

/* ---------- 顶栏「查看模型」按钮：荧光绿药丸，与控制台顶栏同款 ----------
   取自参考图：填充 #c4e201、深墨字 #15200c、圆角=高度一半（完全圆头）、粗体。
   与「开始接入」同一套色。只在 .plaza-cta 上生效，不碰其它按钮。 */
.site-header .plaza-cta{min-height:36px;padding:0 16px;gap:7px;border-radius:100px;background:#c4e201;color:#15200c;font-size:12px;font-weight:700;border-color:transparent}
.site-header .plaza-cta:hover{background:#d2f993;color:#15200c;transform:none}
.site-header .plaza-cta:active{transform:scale(.96)}
.site-header .plaza-cta svg{width:15px;height:15px;stroke-width:2.25}
@media(max-width:760px){.site-header .plaza-cta{min-height:34px;padding:0 13px;font-size:11px;gap:6px}.site-header .plaza-cta svg{width:14px;height:14px}}