.services-h5-frame *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;} #servicesH5Frame{ display:block;height:100%;overflow:hidden;background:#1B2A4A; font-family:"Source Han Sans SC","Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; color:#3B342A; -webkit-font-smoothing:antialiased; } #panoramaHome{position:fixed;inset:0;z-index:850; background:linear-gradient(180deg, #101F42 0%, #16294F 20%, #223A68 40%, #2D4779 60%, #3D5890 75%, #456090 100%); display:flex;flex-direction:column;justify-content:center; padding:calc(clamp(60px, 5vw + 40px, 128px) + 4px) 18px 16px; overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;} #panoramaHome::-webkit-scrollbar{display:none;} .home-inner{max-width:440px;margin:0 auto;width:100%;flex:none;} .home-reveal{opacity:0;transform:translateY(20px) scale(.9); transition:opacity 1.1s cubic-bezier(.34,1.56,.64,1), transform 1.1s cubic-bezier(.34,1.56,.64,1);} .home-reveal.show{opacity:1;transform:translateY(0) scale(1);} .h1-home{text-align:center;font-size:21.5px;font-weight:800;color:#E2735A; letter-spacing:.3px;line-height:1.3;margin-bottom:4px;} .h1-home-sub{text-align:center;font-size:13px;color:#B9B2A4;margin-bottom:16px;} .node{position:relative;display:flex;align-items:center;gap:12px; background:#FBF7EC;border-radius:14px;padding:13px 15px; overflow:hidden; box-shadow:0 7px 16px rgba(0,0,0,0.4), 0 0 0 2px rgba(var(--accent-rgb),.22); border:1.5px solid var(--accent); cursor:pointer; animation:nodeGlow 3.2s ease-in-out infinite; animation-play-state:paused; transition:transform .18s ease, box-shadow .18s ease;} .node.show{animation-play-state:running;} .node:active{transform:scale(.96);} @keyframes nodeGlow{ 0%,100%{box-shadow:0 7px 16px rgba(0,0,0,0.4), 0 0 0 2px rgba(var(--accent-rgb),.22), 0 0 10px 1px rgba(var(--accent-rgb),.15);} 50%{box-shadow:0 7px 20px rgba(0,0,0,0.45), 0 0 0 2px rgba(var(--accent-rgb),.4), 0 0 20px 5px rgba(var(--accent-rgb),.4);} } .node::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%; background:linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); animation:nodeShine 3.2s ease-in-out infinite; animation-play-state:paused; pointer-events:none;} .node.show::after{animation-play-state:running;} @keyframes nodeShine{ 0%{left:-60%;} 35%,100%{left:140%;} } .chain-num{width:30px;height:30px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;font-weight:800; box-shadow:0 3px 8px rgba(0,0,0,0.35);} .node-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;} .node-title-row{display:flex;align-items:center;gap:7px;} .node-title{font-size:16px;font-weight:800;color:#3B342A;line-height:1.25; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .node-tag{flex:none;font-size:10px;font-weight:700;color:#fff;border-radius:20px;padding:2.5px 8px; letter-spacing:.2px;} .node-desc{font-size:12.5px;color:#6b6152;line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .chain-arrow{display:flex;justify-content:center;padding:3px 0;} .node-tier{position:relative; border:1px solid rgba(255,255,255,.16); border-radius:16px; padding:clamp(9px,2.6vw,13px) clamp(7px,2.2vw,10px) clamp(8px,2.4vw,11px); margin-bottom:2px; background:rgba(255,255,255,.035); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);} .node-arrow{padding:clamp(2px,0.8vw,4px) 0;} .tier-label{display:flex;align-items:center;gap:8px; font-size:clamp(10.5px,3vw,12px);font-weight:800;letter-spacing:2px; color:#CFC8BA;margin:0 0 clamp(7px,2vw,9px) 3px;} .tier-label::before{content:'';width:16px;height:2px;border-radius:2px; background:currentColor;opacity:.5;} .tier-arrow{padding:clamp(1px,0.6vw,3px) 0;} @media (max-height:720px){ #panoramaHome{padding-bottom:12px;} .h1-home-sub{margin-bottom:10px;} .node-tier{padding-top:8px;padding-bottom:8px;} .tier-label{margin-bottom:6px;} } @media only screen and (min-width:1261px){ .node-tier{border-radius:18px;padding:14px 12px 12px;} .tier-label{font-size:12.5px;} } .deck-overlay{position:fixed;inset:0;z-index:850;display:none;} .deck-overlay.active{display:block;} .deck-close{position:fixed;top:16px;right:16px;z-index:1001; width:34px;height:34px;border-radius:50%;border:none; background:rgba(0,0,0,0.4);color:#EDE8DD;font-size:24px;line-height:1; display:flex;align-items:center;justify-content:center;cursor:pointer; -webkit-tap-highlight-color:transparent;} @media only screen and (max-width: 1260px) { .deck-close{ top: calc(clamp(60px, 5vw + 40px, 128px) + 12px); } } #deck-ads{ --cream:#F5F0E4; --ink:#3B342A; --muted:#B9B2A4; --red:#9C3626; --red-soft:#B5482F; --blue-num:#4C7FBF; --blue-bg:#DFEBFB; --blue-border:#B4CDEC; --green-num:#4C9A6D; --green-bg:#DEF0E1; --green-border:#AED7B3; --gold-num:#C68A3A; --gold:#CD8F3C; --gold-dark:#B87B2E; --gold-light:#E4B067; --tan-bg:#EEDDB9; --tan-border:#D9B876; --plum-bg:#EFDFE7; --plum-border:#D6AEC2; --dark-bg:#312B23; --dark-line:rgba(233,204,142,0.28); --page-bg:linear-gradient(180deg, #101F42 0%, #16294F 20%, #223A68 40%, #2D4779 60%, #3D5890 75%, #456090 100%); --red-bright:#E2735A; --heading-light:#EDE8DD; } #deck-ads .pager{position:fixed;inset:0;overflow:hidden;z-index:850;} #deck-ads .page-slide{ position:absolute;inset:0;height:100%;width:100%; display:flex;flex-direction:column;justify-content:flex-start; padding:24px 20px 56px; overflow-y:auto; -ms-overflow-style:none;scrollbar-width:none; transition:transform .55s cubic-bezier(.65,0,.35,1); } #deck-ads .page-slide::-webkit-scrollbar{display:none;} #deck-ads .page-slide.light{background:var(--page-bg);} #deck-ads .inner{max-width:440px;margin:auto;width:100%;} #deck-ads .reveal-item{opacity:0;transform:translateY(20px); transition:opacity 1.2s cubic-bezier(.22,.61,.36,1), transform 1.2s cubic-bezier(.22,.61,.36,1);} #deck-ads .reveal-item.show{opacity:1;transform:translateY(0);} #deck-ads .pop{transform:translateY(20px) scale(.86);} #deck-ads .pop.show{transform:translateY(0) scale(1);transition:opacity 1.2s cubic-bezier(.34,1.56,.64,1), transform 1.2s cubic-bezier(.34,1.56,.64,1);} #deck-ads .h1{text-align:center;font-size:19px;font-weight:700;color:var(--red-bright);letter-spacing:.5px;margin-bottom:10px;} #deck-ads .legend{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 12px;margin-bottom:14px;} #deck-ads .legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);} #deck-ads .swatch{width:11px;height:11px;border-radius:3px;display:inline-block;flex:none;} #deck-ads .swatch.d{background:var(--gold);} #deck-ads .swatch.l{background:var(--tan-bg);border:1px solid var(--tan-border);} #deck-ads .swatch.r{width:15px;height:0;border-radius:0;border-top:2px solid var(--red-bright);} #deck-ads .step-label{display:flex;align-items:center;justify-content:center;gap:7px; font-size:13px;font-weight:700;color:var(--heading-light);margin:10px 0 8px;} #deck-ads .step-num{width:18px;height:18px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;font-weight:700;} #deck-ads .step-num.b{background:var(--blue-num);} #deck-ads .step-num.g{background:var(--green-num);} #deck-ads .step-num.y{background:var(--gold-num);} #deck-ads .step-num.k{background:#8A7F6C;} #deck-ads .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;} #deck-ads .box{border-radius:9px;text-align:center;font-weight:700; display:flex;align-items:center;justify-content:center; box-shadow:0 5px 16px rgba(0,0,0,0.4);} #deck-ads .box.blue{background:var(--blue-bg);border:1px solid var(--blue-border);padding:14px 4px;font-size:14px;} #deck-ads .box.green{background:var(--green-bg);border:1px solid var(--green-border);padding:13px 4px;font-size:14.5px;width:100%;} #deck-ads .box.plum{background:var(--plum-bg);border:1px solid var(--plum-border);padding:13px 4px;font-size:14.5px;width:100%;} #deck-ads .box.gold{background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));color:#fff; padding:15px 4px;font-size:15px;width:100%;box-shadow:0 4px 12px rgba(184,123,46,0.32);} #deck-ads .row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;} #deck-ads .box.tan{background:var(--tan-bg);border:1px solid var(--tan-border);padding:11px 5px;font-size:12.5px;line-height:1.35;width:100%;} #deck-ads .arrow-wrap{display:flex;flex-direction:column;align-items:center;padding:5px 0;} #deck-ads .arrow-label{font-size:10.5px;color:var(--muted);margin-top:1px;text-align:center;line-height:1.3;} #deck-ads .loop-zone{position:relative;padding-right:38px;} #deck-ads .feedback{position:absolute;right:0;width:38px;pointer-events:none;} #deck-ads .fb-line{position:absolute;right:13px;top:0;bottom:0;width:2px;background:var(--red-bright);border-radius:2px;} #deck-ads .fb-tick{position:absolute;right:13px;width:25px;height:2px;background:var(--red-bright);} #deck-ads .fb-tick.fb-top{top:0;} #deck-ads .fb-tick.fb-bot{bottom:0;} #deck-ads .fb-arrow{position:absolute;top:-4px;right:36px;width:0;height:0; border-top:5px solid transparent;border-bottom:5px solid transparent; border-right:7px solid var(--red-bright);} #deck-ads .fb-label{position:absolute;right:3px;top:50%;transform:translateY(-50%); writing-mode:vertical-rl;font-size:10.5px;font-weight:700;letter-spacing:.5px; color:var(--red-bright);background:rgba(9,15,34,0.55); border:1px solid rgba(226, 208, 90, 0.45);padding:7px 3px;border-radius:20px;} #deck-ads .tag{display:inline-block;background:var(--red);color:#fff;font-size:13px;font-weight:700; padding:7px 16px;border-radius:8px 8px 8px 0;margin-bottom:16px;} #deck-ads .value-card{position:relative;} #deck-ads .badge{position:absolute;top:-10px;right:6px;background:var(--red-soft);color:#fff; font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:12px; box-shadow:0 2px 6px rgba(156,54,38,0.35);z-index:2;} #deck-ads .gold-bar{background:linear-gradient(135deg,var(--gold-light),var(--gold-dark)); color:#fff;text-align:center;font-weight:700;font-size:15.5px; padding:19px 14px;border-radius:12px;box-shadow:0 6px 16px rgba(184,123,46,0.28); margin-bottom:14px;} #deck-ads .point{background:#FBF7EC;border:1px solid var(--tan-border);border-radius:10px; padding:12px 14px;display:flex;align-items:center;gap:10px;margin-bottom:9px; font-size:13px;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,0.3);} #deck-ads .dots{position:fixed;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:7px;z-index:851;} #deck-ads .deck-dot{width:10px;height:10px;border-radius:50%;background:rgba(201,196,186,0.4);transition:all .3s ease;cursor:pointer;} #deck-ads .deck-dot.active{width:25px;border-radius:10px;background:var(--gold-dark);} @media only screen and (min-width: 1261px) { #deck-ads .inner{max-width:680px;} #deck-ads .h1{font-size:26px;margin-bottom:14px;} #deck-ads .legend{gap:8px 20px;margin-bottom:20px;} #deck-ads .legend-item{font-size:14px;} #deck-ads .swatch{width:13px;height:13px;} #deck-ads .step-label{font-size:16px;margin:16px 0 12px;} #deck-ads .step-num{width:22px;height:22px;font-size:12px;} #deck-ads .row3{gap:14px;} #deck-ads .row2{gap:14px;} #deck-ads .box.blue{padding:20px 6px;font-size:18px;} #deck-ads .box.green{padding:18px 6px;font-size:19px;} #deck-ads .box.plum{padding:18px 6px;font-size:19px;} #deck-ads .box.gold{padding:20px 6px;font-size:20px;} #deck-ads .box.tan{padding:16px 8px;font-size:16px;} #deck-ads .arrow-label{font-size:13px;} #deck-ads .loop-zone{padding-right:52px;} #deck-ads .feedback{width:52px;} #deck-ads .fb-line{right:18px;} #deck-ads .fb-tick{right:18px;width:34px;} #deck-ads .fb-arrow{right:49px;} #deck-ads .fb-label{font-size:13px;padding:9px 4px;} #deck-ads .tag{font-size:15px;padding:9px 18px;margin-bottom:20px;} #deck-ads .gold-bar{font-size:19px;padding:24px 18px;} #deck-ads .point{font-size:16px;padding:15px 18px;} } #deck-matrix{ --page-bg:linear-gradient(180deg, #101F42 0%, #16294F 20%, #223A68 40%, #2D4779 60%, #3D5890 75%, #456090 100%); --ink:#3B342A; --muted:#B9B2A4; --heading-light:#EDE8DD; --red-bright:#E2735A; --red-tag:#E0433A; --red-tag-dark:#B5332B; --blue-num:#5A8FD6; --blue-bg:#EAF1FB; --blue-border:#5A8FD6; --green-num:#3FAE6E; --green-bg:#D7ECDD; --green-border:#2F6B47; --green-dark-bg:#3FAE6E; --gray-num:#7A7A7A; --gray-dark-bg:#8A8A8A; --gray-border:#4A4A4A; --gray-light-bg:#DCDCDC; --tan-num:#C98A4E; --tan-bg:#F6DFC2; --tan-border:#A6621E; --tan-dark-bg:#EEB974; --case-bg:#F7E9C2; --yellow-bg:#F5B93D; --yellow-border:#333333; --yellow-red:#C0272A; --orange:#E07A3F; --orange-dark:#A04D1E; --orange-light:#F0AA76; --peach-border:#C98A4E; --matrix-blue:#1F5FD6; --matrix-blue-dark:#2C5AA0; } #deck-matrix .pager{position:fixed;inset:0;overflow:hidden;z-index:850;} #deck-matrix .page-slide{ position:absolute;inset:0;height:100%;width:100%; display:flex;flex-direction:column;justify-content:center; padding:22px 20px 54px; overflow-y:auto; -ms-overflow-style:none;scrollbar-width:none; transition:transform .55s cubic-bezier(.65,0,.35,1); background:var(--page-bg); } #deck-matrix .page-slide::-webkit-scrollbar{display:none;} #deck-matrix .inner{max-width:440px;margin:0 auto;width:100%;} #deck-matrix .reveal-item{opacity:0;transform:translateY(20px); transition:opacity 1.3s cubic-bezier(.22,.61,.36,1), transform 1.3s cubic-bezier(.22,.61,.36,1);} #deck-matrix .reveal-item.show{opacity:1;transform:translateY(0);} #deck-matrix .punch-item{opacity:0;transform:scale(.6); transition:opacity 1.2s cubic-bezier(.34,1.56,.64,1), transform 1.2s cubic-bezier(.34,1.56,.64,1);} #deck-matrix .punch-item.show{opacity:1;transform:scale(1);} #deck-matrix .tag-pop{opacity:0;transform:translateY(-8px) scale(.8); transition:opacity .95s ease, transform .95s cubic-bezier(.34,1.56,.64,1);} #deck-matrix .tag-pop.show{opacity:1;transform:translateY(0) scale(1);} #deck-matrix .punch-item.glow-blue.show{animation:glowBlue-matrix 2.4s ease-in-out infinite;} @keyframes glowBlue-matrix{0%,100%{box-shadow:0 0 10px 2px rgba(31,95,214,.45);}50%{box-shadow:0 0 26px 7px rgba(31,95,214,.75);}} #deck-matrix .punch-item.glow-yellow.show{animation:glowYellow-matrix 2.4s ease-in-out infinite;} @keyframes glowYellow-matrix{0%,100%{box-shadow:0 0 10px 2px rgba(224,67,58,.35);}50%{box-shadow:0 0 26px 7px rgba(224,67,58,.6);}} #deck-matrix .h1{text-align:center;font-size:16.5px;font-weight:700;color:var(--red-bright);letter-spacing:.3px; line-height:1.45;margin-bottom:9px;} #deck-matrix .h1 span{display:block;} #deck-matrix .titlebar{background:var(--red-tag);color:#fff;text-align:center;border-radius:10px; padding:10px 14px;font-size:14px;font-weight:800;line-height:1.4;margin-bottom:10px;} #deck-matrix .legend{display:flex;justify-content:center;gap:14px;margin-bottom:12px;flex-wrap:wrap;} #deck-matrix .legend-item{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);} #deck-matrix .swatch{width:11px;height:11px;border-radius:3px;display:inline-block;} #deck-matrix .swatch.gray-d{background:var(--gray-dark-bg);border:1px solid var(--gray-border);} #deck-matrix .swatch.gray-l{background:var(--gray-light-bg);border:1px solid var(--gray-border);} #deck-matrix .swatch.green-d{background:var(--green-dark-bg);border:1px solid var(--green-border);} #deck-matrix .swatch.green-l{background:var(--green-bg);border:1px solid var(--green-border);} #deck-matrix .step-label{display:flex;align-items:center;justify-content:center;gap:7px; font-size:12.5px;font-weight:700;color:var(--heading-light);margin:10px 0 8px;} #deck-matrix .step-num{width:18px;height:18px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center;font-size:9.5px;color:#fff;font-weight:700;} #deck-matrix .step-num.b{background:var(--blue-num);} #deck-matrix .step-num.g{background:var(--green-num);} #deck-matrix .step-num.t{background:var(--tan-num);} #deck-matrix .step-num.o{background:var(--orange-dark);} #deck-matrix .box{border-radius:9px;text-align:center;font-weight:700; display:flex;flex-direction:column;align-items:center;justify-content:center; box-shadow:0 5px 14px rgba(0,0,0,0.4);width:100%;} #deck-matrix .box .box-main{display:block;font-size:13.5px;font-weight:800;} #deck-matrix .box .sub{display:block;font-size:10px;font-weight:500;margin-top:4px;opacity:.9;} #deck-matrix .box.blue{background:var(--blue-bg);border:1px solid var(--blue-border);padding:11px 10px;font-size:11.5px;color:#33507a;} #deck-matrix .box.pill{border-radius:999px;} #deck-matrix .box.green{background:var(--green-bg);border:1px solid var(--green-border);padding:10px 8px;font-size:11px;color:#20492f;} #deck-matrix .box.green-solid{background:var(--green-dark-bg);border:1px solid var(--green-border);color:#fff;padding:11px 10px;font-size:12px;} #deck-matrix .box.gray-d{background:var(--gray-dark-bg);border:1px solid var(--gray-border);color:#fff;padding:11px 10px;font-size:11px;} #deck-matrix .box.gray-l{background:var(--gray-light-bg);border:1px solid var(--gray-border);padding:10px 8px;font-size:11.5px;color:#2a2a2a;} #deck-matrix .box.tan{background:var(--tan-bg);border:1px solid var(--tan-border);padding:9px 6px;font-size:11px;color:#5c3a12;} #deck-matrix .box.yellow{background:var(--yellow-bg);border:1px solid var(--yellow-border);padding:11px 12px;font-size:12px;color:var(--yellow-red);font-weight:800;} #deck-matrix .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;} #deck-matrix .row2{display:grid;grid-template-columns:1fr 1fr;gap:7px;} #deck-matrix .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;} #deck-matrix .stack{display:flex;flex-direction:column;gap:7px;} #deck-matrix .arrow-wrap{display:flex;flex-direction:column;align-items:center;padding:4px 0;} #deck-matrix .arrow-label{font-size:9.5px;color:var(--muted);margin-top:1px;} #deck-matrix .split-row{width:100%;display:flex;align-items:center;justify-content:space-between; background:#4a4a4a;border:1px solid #6a6a6a;border-radius:8px;padding:9px 12px; font-size:10.5px;color:#EDE8DD;gap:8px;} #deck-matrix .split-row .chiplet{font-size:9px;color:#3B3B3B;background:#DCDCDC;border-radius:5px;padding:2px 7px;white-space:nowrap;} #deck-matrix .center-line{text-align:center;font-size:12.5px;font-weight:700;line-height:1.5;} #deck-matrix .tag{display:inline-block;background:var(--red-tag);color:#fff;font-size:12.5px;font-weight:700; padding:7px 15px;border-radius:8px 8px 8px 0;margin-bottom:14px;} #deck-matrix .value-card{position:relative;} #deck-matrix .banner-wrap{position:relative;margin-bottom:15px;} #deck-matrix .banner{border-radius:14px;padding:18px 14px;text-align:center;font-weight:900;font-size:18px; letter-spacing:.3px;line-height:1.4;} #deck-matrix .banner.orange{background:linear-gradient(135deg,var(--orange-light),var(--orange-dark)); border:2px solid var(--orange-dark);color:#fff;box-shadow:0 6px 16px rgba(160,77,30,0.4);} #deck-matrix .banner.blue{background:linear-gradient(135deg,#5B93E8,var(--matrix-blue-dark)); border:2px solid var(--matrix-blue-dark);color:#fff;box-shadow:0 6px 16px rgba(44,90,160,0.4);} #deck-matrix .banner.yellow{background:var(--yellow-bg);border:2px solid var(--yellow-border);color:var(--yellow-red); box-shadow:0 6px 16px rgba(192,39,42,0.3);} #deck-matrix .banner .accent{color:#ffd23f;} #deck-matrix .corner-tag{position:absolute;top:-10px;right:2px;background:var(--red-tag-dark);color:#fff; font-size:10px;font-weight:700;padding:4px 10px;border-radius:14px;border:1.5px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,0.35);} #deck-matrix .point{background:#FBF3E9;border:1px solid var(--peach-border);border-radius:10px; padding:11px 13px;display:flex;align-items:center;gap:9px;margin-bottom:8px; font-size:12px;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,0.3);} #deck-matrix .point.benefit{background:#dcecd3;border-color:#333;color:#1a1a1a;} #deck-matrix .point.benefit .step-num{background:#e8a33d;} #deck-matrix .point.redline{background:#fde3df;border-color:var(--red-tag);color:#8a1c1c;} #deck-matrix .point.redline .step-num{background:var(--red-tag);} #deck-matrix .subline{text-align:center;font-size:12px;font-weight:600;color:#8FB8FF;margin-bottom:6px;} #deck-matrix .case-chip{background:var(--case-bg);border:1px solid var(--tan-border);border-radius:10px; padding:10px 10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 10px rgba(0,0,0,0.3);} #deck-matrix .case-chip .badge{align-self:flex-start;background:var(--red-tag);color:#fff;font-size:9px;font-weight:800; border-radius:5px;padding:1px 7px;} #deck-matrix .case-chip .txt{font-size:11px;font-weight:700;color:#1a1a1a;line-height:1.3;} #deck-matrix .stat-card{width:100%;max-width:380px;margin:0 auto;background:#FBF3E9;border:4px solid var(--red-tag); border-radius:20px;padding:38px 26px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,0.5);} #deck-matrix .dots{position:fixed;left:0;right:0;bottom:20px;display:flex;justify-content:center;gap:6px;z-index:851;flex-wrap:wrap;padding:0 20px;} #deck-matrix .deck-dot{width:10px;height:10px;border-radius:50%;background:rgba(201,196,186,0.4);transition:all .3s ease;cursor:pointer;} #deck-matrix .deck-dot.active{width:25px;border-radius:10px;background:var(--red-bright);} @media only screen and (min-width: 1261px) { #deck-matrix .inner{max-width:680px;} #deck-matrix .h1{font-size:22px;margin-bottom:13px;} #deck-matrix .titlebar{font-size:18px;padding:14px 18px;margin-bottom:14px;} #deck-matrix .legend{gap:20px;margin-bottom:16px;} #deck-matrix .legend-item{font-size:13px;} #deck-matrix .swatch{width:13px;height:13px;} #deck-matrix .step-label{font-size:16px;margin:14px 0 12px;} #deck-matrix .step-num{width:22px;height:22px;font-size:12px;} #deck-matrix .box .box-main{font-size:17px;} #deck-matrix .box .sub{font-size:12.5px;margin-top:6px;} #deck-matrix .box.blue{padding:16px 14px;font-size:15px;} #deck-matrix .box.green{padding:15px 12px;font-size:14.5px;} #deck-matrix .box.green-solid{padding:16px 14px;font-size:15.5px;} #deck-matrix .box.gray-d{padding:16px 14px;font-size:14.5px;} #deck-matrix .box.gray-l{padding:15px 12px;font-size:15px;} #deck-matrix .box.tan{padding:14px 10px;font-size:14.5px;} #deck-matrix .box.yellow{padding:16px 16px;font-size:15.5px;} #deck-matrix .grid2{gap:14px;} #deck-matrix .row2{gap:14px;} #deck-matrix .row3{gap:14px;} #deck-matrix .stack{gap:12px;} #deck-matrix .arrow-label{font-size:12.5px;} #deck-matrix .split-row{font-size:14px;padding:13px 16px;} #deck-matrix .split-row .chiplet{font-size:12px;padding:3px 9px;} #deck-matrix .center-line{font-size:16px;} #deck-matrix .tag{font-size:16px;padding:9px 18px;margin-bottom:18px;} #deck-matrix .banner{font-size:23px;padding:22px 18px;} #deck-matrix .corner-tag{font-size:12px;padding:5px 12px;} #deck-matrix .point{font-size:15px;padding:14px 16px;} #deck-matrix .subline{font-size:15px;} #deck-matrix .case-chip .badge{font-size:11px;padding:2px 9px;} #deck-matrix .case-chip .txt{font-size:14px;} #deck-matrix .stat-card{max-width:460px;padding:44px 32px;} } #deck-select{ --ink:#3B342A; --muted:#B9B2A4; --red:#9C3626; --red-soft:#B5482F; --blue-num:#4C7FBF; --blue-bg:#DFEBFB; --blue-border:#9EC0EC; --orange:#E07A3F; --orange-dark:#A04D1E; --orange-light:#F0AA76; --peach-bg:#F6E2CC; --peach-border:#C98A4E; --green-num:#4C9A6D; --green-bg:#D7ECDD; --green-border:#4F8F68; --page-bg:linear-gradient(180deg, #101F42 0%, #16294F 20%, #223A68 40%, #2D4779 60%, #3D5890 75%, #456090 100%); --red-bright:#E2735A; --heading-light:#EDE8DD; } #deck-select .pager{position:fixed;inset:0;overflow:hidden;z-index:850;} #deck-select .page-slide{ position:absolute;inset:0;height:100%;width:100%; display:flex;flex-direction:column;justify-content:center; padding:24px 20px 54px; overflow-y:auto; -ms-overflow-style:none;scrollbar-width:none; transition:transform .55s cubic-bezier(.65,0,.35,1); } #deck-select .page-slide::-webkit-scrollbar{display:none;} #deck-select .page-slide.light{background:var(--page-bg);} #deck-select .inner{max-width:440px;margin:0 auto;width:100%;} #deck-select .reveal-item{opacity:0;transform:translateY(18px); transition:opacity 1.15s cubic-bezier(.22,.61,.36,1), transform 1.15s cubic-bezier(.22,.61,.36,1);} #deck-select .reveal-item.show{opacity:1;transform:translateY(0);} #deck-select .h1{text-align:center;font-size:19px;font-weight:700;color:var(--red-bright);letter-spacing:.5px; line-height:1.45;margin-bottom:10px;} #deck-select .h1 span{display:block;} #deck-select .legend{display:flex;justify-content:center;gap:14px;margin-bottom:13px;} #deck-select .legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);} #deck-select .swatch{width:11px;height:11px;border-radius:3px;display:inline-block;} #deck-select .swatch.d{background:var(--orange);border:1px solid var(--orange-dark);} #deck-select .swatch.l{background:var(--peach-bg);border:1px solid var(--peach-border);} #deck-select .step-label{display:flex;align-items:center;justify-content:center;gap:7px; font-size:15px;font-weight:700;color:var(--heading-light);margin:11px 0 8px;} #deck-select .step-num{width:18px;height:18px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center;font-size:11.5px;color:#fff;font-weight:700;} #deck-select .step-num.b{background:var(--blue-num);} #deck-select .step-num.o{background:var(--orange-dark);} #deck-select .step-num.g{background:var(--green-num);} #deck-select .box{border-radius:9px;text-align:center;font-weight:700; display:flex;flex-direction:column;align-items:center;justify-content:center; box-shadow:0 5px 14px rgba(0,0,0,0.4);width:100%;} #deck-select .box.blue{background:var(--blue-bg);border:1px solid var(--blue-border); padding:13px 12px;font-size:14.5px;font-weight:600;line-height:1.55;color:#3a4a5e;} #deck-select .box.orange{background:linear-gradient(135deg,var(--orange-light),var(--orange-dark)); color:#fff;padding:14px 10px;box-shadow:0 6px 16px rgba(160,77,30,0.4);} #deck-select .box .box-main{display:block;font-size:18px;font-weight:800;} #deck-select .box .sub{display:block;font-size:13px;font-weight:500;margin-top:5px;opacity:.92;} #deck-select .box.green{background:var(--green-bg);border:1px solid var(--green-border); padding:13px 4px;font-size:14.5px;color:#20492f;} #deck-select .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;} #deck-select .arrow-wrap{display:flex;flex-direction:column;align-items:center;padding:5px 0;} #deck-select .arrow-label{font-size:11.5px;color:var(--muted);margin-top:1px;} #deck-select .tag{display:inline-block;background:var(--red);color:#fff;font-size:15.5px;font-weight:700; padding:7px 16px;border-radius:8px 8px 8px 0;margin-bottom:18px;} #deck-select .value-card{position:relative;} #deck-select .banner-wrap{position:relative;margin-bottom:16px;} #deck-select .core-banner{background:linear-gradient(135deg,var(--orange-light),var(--orange-dark)); border:2px solid var(--orange-dark);border-radius:14px;padding:22px 16px;text-align:center; color:#fff;font-weight:900;font-size:25px;letter-spacing:.5px; opacity:0;transform:scale(.7); transition:opacity 1.15s cubic-bezier(.34,1.56,.64,1), transform 1.15s cubic-bezier(.34,1.56,.64,1);} #deck-select .core-banner.show{opacity:1;transform:scale(1);} #deck-select .core-banner.glow{animation:bannerGlow-select 2.2s ease-in-out infinite;} @keyframes bannerGlow-select{ 0%,100%{box-shadow:0 0 10px 2px rgba(224,122,63,0.45);} 50%{box-shadow:0 0 26px 7px rgba(224,122,63,0.75);} } #deck-select .corner-tag{position:absolute;top:-10px;right:2px;background:var(--red-soft);color:#fff; font-size:12.5px;font-weight:700;padding:4px 11px;border-radius:14px;border:1.5px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,0.35); opacity:0;transform:translateY(-9px) scale(.8); transition:opacity .95s ease, transform .95s cubic-bezier(.34,1.56,.64,1);} #deck-select .corner-tag.show{opacity:1;transform:translateY(0) scale(1);} #deck-select .point{background:#FBF3E9;border:1px solid var(--peach-border);border-radius:10px; padding:12px 14px;display:flex;align-items:center;gap:10px;margin-bottom:9px; font-size:15px;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,0.3); opacity:0;transform:translateY(18px); transition:opacity 1.15s cubic-bezier(.22,.61,.36,1), transform 1.15s cubic-bezier(.22,.61,.36,1);} #deck-select .point.show{opacity:1;transform:translateY(0);} #deck-select .dots{position:fixed;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:7px;z-index:851;} #deck-select .deck-dot{width:10px;height:10px;border-radius:50%;background:rgba(201,196,186,0.4);transition:all .3s ease;cursor:pointer;} #deck-select .deck-dot.active{width:25px;border-radius:10px;background:var(--orange-dark);} @media only screen and (min-width: 1261px) { #deck-select .inner{max-width:680px;} #deck-select .h1{font-size:26px;margin-bottom:14px;} #deck-select .legend{gap:20px;margin-bottom:18px;} #deck-select .legend-item{font-size:14px;} #deck-select .swatch{width:13px;height:13px;} #deck-select .step-label{font-size:19px;margin:15px 0 11px;} #deck-select .step-num{width:22px;height:22px;font-size:14px;} #deck-select .box.blue{padding:18px 16px;font-size:18px;} #deck-select .box.orange{padding:19px 14px;} #deck-select .box .box-main{font-size:23px;} #deck-select .box .sub{font-size:16px;margin-top:7px;} #deck-select .box.green{padding:17px 6px;font-size:18px;} #deck-select .grid2{gap:14px;} #deck-select .arrow-label{font-size:14px;} #deck-select .tag{font-size:19px;padding:9px 20px;margin-bottom:22px;} #deck-select .core-banner{padding:28px 20px;font-size:31px;} #deck-select .corner-tag{font-size:15px;padding:5px 14px;} #deck-select .point{font-size:18px;padding:15px 18px;} } #deck-agent{ --ink:#3B342A; --muted:#B9B2A4; --red:#9C3626; --red-soft:#B5482F; --blue-num:#4C7FBF; --blue-bg:#DFEBFB; --blue-border:#9EC0EC; --teal-num:#2E6B82; --core-light:#5B9BC4; --core-dark:#2C5F7E; --teal-title:#3E86A8; --green-num:#4C9A6D; --green-bg:#DEF0E1; --green-border:#93CC9C; --tan-bg:#EEDDB9; --tan-border:#D9B876; --page-bg:linear-gradient(180deg, #101F42 0%, #16294F 20%, #223A68 40%, #2D4779 60%, #3D5890 75%, #456090 100%); --red-bright:#E2735A; --heading-light:#EDE8DD; } #deck-agent .pager{position:fixed;inset:0;overflow:hidden;z-index:850;} #deck-agent .page-slide{ position:absolute;inset:0;height:100%;width:100%; display:flex;flex-direction:column;justify-content:flex-start; padding:16px 16px 46px; overflow-y:auto; -ms-overflow-style:none;scrollbar-width:none; transition:transform .55s cubic-bezier(.65,0,.35,1); } #deck-agent .page-slide::-webkit-scrollbar{display:none;} #deck-agent .page-slide.light{background:var(--page-bg);} #deck-agent .inner{max-width:440px;margin:auto;width:100%;} #deck-agent .reveal-item{opacity:0;transform:translateY(18px); transition:opacity 1.15s cubic-bezier(.22,.61,.36,1), transform 1.15s cubic-bezier(.22,.61,.36,1);} #deck-agent .reveal-item.show{opacity:1;transform:translateY(0);} #deck-agent .pop{transform:translateY(18px) scale(.86);} #deck-agent .pop.show{transform:translateY(0) scale(1);transition:opacity 1.2s cubic-bezier(.34,1.56,.64,1), transform 1.2s cubic-bezier(.34,1.56,.64,1);} #deck-agent .h1{text-align:center;font-size:18px;font-weight:700;color:var(--red-bright);letter-spacing:.3px; line-height:1.4;margin-bottom:6px;} #deck-agent .h1 span{display:block;} #deck-agent .legend{display:flex;justify-content:center;gap:10px;margin-bottom:8px;} #deck-agent .legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);} #deck-agent .swatch{width:11px;height:11px;border-radius:3px;display:inline-block;} #deck-agent .swatch.d{background:var(--teal-num);} #deck-agent .swatch.l{background:var(--blue-bg);border:1px solid var(--blue-border);} #deck-agent .swatch.g{background:var(--green-bg);border:1px solid var(--green-border);} #deck-agent .step-label{display:flex;align-items:center;justify-content:center;gap:7px; font-size:14px;font-weight:700;color:var(--heading-light);margin:7px 0 6px;} #deck-agent .step-num{width:18px;height:18px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center;font-size:10.5px;color:#fff;font-weight:700;} #deck-agent .step-num.b{background:var(--blue-num);} #deck-agent .step-num.t{background:var(--teal-num);} #deck-agent .step-num.g{background:var(--green-num);} #deck-agent .stack{display:flex;flex-direction:column;gap:5px;} #deck-agent .box{border-radius:8px;text-align:center;font-weight:700; display:flex;flex-direction:column;align-items:center;justify-content:center; box-shadow:0 5px 14px rgba(0,0,0,0.4);} #deck-agent .box.blue{background:var(--blue-bg);border:1px solid var(--blue-border);padding:9px 6px;font-size:14.5px;width:100%;} #deck-agent .box.tan{background:var(--tan-bg);border:1px solid var(--tan-border);padding:9px 8px;font-size:13px;line-height:1.35;width:100%;} #deck-agent .box.green{background:var(--green-bg);border:1px solid var(--green-border);padding:10px 4px;font-size:14px;width:100%;} #deck-agent .box.core{background:linear-gradient(135deg,var(--core-light),var(--core-dark));color:#fff; padding:11px 8px;width:100%;box-shadow:0 6px 16px rgba(44,95,126,0.4);} #deck-agent .box .box-main{display:block;font-size:15.5px;font-weight:800;line-height:1.25;} #deck-agent .box .sub{display:block;font-size:11.5px;font-weight:600;margin-top:3px;opacity:.9;} #deck-agent .box.core .box-main{font-size:19px;} #deck-agent .box.core .sub{font-size:12.5px;} #deck-agent .box.blue .sub{color:#5B5540;opacity:1;} #deck-agent .row2{display:grid;grid-template-columns:1fr 1fr;gap:6px;} #deck-agent .grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px;} #deck-agent .arrow-wrap{display:flex;flex-direction:column;align-items:center;padding:3px 0;} #deck-agent .arrow-label{font-size:10.5px;color:var(--muted);margin-top:1px;} #deck-agent .branch{display:flex;align-items:stretch;} #deck-agent .rail{width:26px;flex:none;position:relative;} #deck-agent .rail::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:2px;background:#B8B2A5;} #deck-agent .rail::after{content:"";position:absolute;left:11px;top:50%;width:15px;height:2px;background:#B8B2A5;} #deck-agent .sidecar{flex:1;min-width:0;border:1px dashed rgba(185,178,164,0.55);border-radius:10px; padding:7px 7px 8px;background:rgba(255,255,255,0.03);} #deck-agent .sidecar-title{font-size:10.5px;color:var(--muted);text-align:center;line-height:1.35;margin-bottom:6px;} #deck-agent .box.blue.model{padding:8px 4px;} #deck-agent .link{display:block;font-size:10.5px;font-weight:700;margin-top:4px;} #deck-agent .link.direct{color:#3E7A55;} #deck-agent .link.vpn{color:var(--red);} #deck-agent .rail-arrow{align-items:flex-start;padding-left:5px;} #deck-agent .rail-arrow .arrow-label{margin-left:-2px;} #deck-agent .box.tan .sub{color:#6B5F42;opacity:1;} #deck-agent .tag{display:inline-block;background:var(--red);color:#fff;font-size:13px;font-weight:700; padding:7px 16px;border-radius:8px 8px 8px 0;margin-bottom:16px;} #deck-agent .value-card{position:relative;} #deck-agent .merge-stage{position:relative;width:100%;height:70px;margin-bottom:14px;} #deck-agent .chip{position:absolute;top:0;left:50%;margin-left:-56px;width:112px;height:56px; border-radius:10px;display:flex;align-items:center;justify-content:center; font-weight:800;font-size:16px;color:#fff; box-shadow:0 4px 10px rgba(0,0,0,0.35); transition:transform 1.15s cubic-bezier(.55,.06,.68,.19), opacity .15s linear;} #deck-agent .chip.n8n{background:var(--core-light);transform:translateX(-170px);} #deck-agent .chip.dify{background:var(--core-dark);transform:translateX(170px);} #deck-agent .chip.collide{transform:translateX(0);} #deck-agent .chip.gone{opacity:0;} #deck-agent .merge-flash{position:absolute;left:50%;top:0;transform:translateX(-50%); width:160px;height:70px;border-radius:16px;pointer-events:none;opacity:0; background:radial-gradient(circle, rgba(255,255,255,0.95) 0%, rgba(91,155,196,0) 70%);} #deck-agent .merge-flash.show{animation:flashBurst-agent 1.15s ease-out forwards;} @keyframes flashBurst-agent{0%{opacity:0;}18%{opacity:1;}100%{opacity:0;}} #deck-agent .core-bar{position:absolute;inset:0;background:linear-gradient(90deg,var(--core-light),var(--core-dark)); color:#fff;text-align:center;border-radius:12px; display:flex;flex-direction:column;align-items:center;justify-content:center; box-shadow:0 6px 16px rgba(44,95,126,0.35); opacity:0;transform:scale(.3); transition:opacity .95s cubic-bezier(.34,1.56,.64,1), transform .95s cubic-bezier(.34,1.56,.64,1);} #deck-agent .core-bar.show{opacity:1;transform:scale(1);} #deck-agent .core-bar .box-main{display:block;font-size:17px;font-weight:800;} #deck-agent .core-bar .sub{display:block;font-size:11.5px;font-weight:500;margin-top:5px;opacity:.9;} #deck-agent .point{background:#FBF7EC;border:1px solid var(--tan-border);border-radius:10px; padding:12px 14px;display:flex;align-items:center;gap:10px;margin-bottom:9px; font-size:13px;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,0.3); opacity:0;transform:translateY(18px); transition:opacity 1.15s cubic-bezier(.22,.61,.36,1), transform 1.15s cubic-bezier(.22,.61,.36,1);} #deck-agent .point.show{opacity:1;transform:translateY(0);} #deck-agent .dots{position:fixed;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:7px;z-index:851;} #deck-agent .deck-dot{width:10px;height:10px;border-radius:50%;background:rgba(201,196,186,0.4);transition:all .3s ease;cursor:pointer;} #deck-agent .deck-dot.active{width:25px;border-radius:10px;background:var(--core-dark);} @media only screen and (min-width: 1261px) { #deck-agent .inner{max-width:600px;} #deck-agent .h1{font-size:19px;margin-bottom:7px;} #deck-agent .legend{gap:13px;margin-bottom:9px;} #deck-agent .legend-item{font-size:12px;} #deck-agent .swatch{width:12px;height:12px;} #deck-agent .step-label{font-size:15px;margin:8px 0 7px;} #deck-agent .step-num{width:19px;height:19px;font-size:11.5px;} #deck-agent .stack{gap:6px;} #deck-agent .box.blue{padding:10px 8px;font-size:15px;} #deck-agent .box.tan{padding:10px 9px;font-size:13.5px;} #deck-agent .box.green{padding:11px 5px;font-size:14.5px;} #deck-agent .box.core{padding:12px 9px;} #deck-agent .box .box-main{font-size:16px;} #deck-agent .box .sub{font-size:12px;margin-top:3px;} #deck-agent .box.core .box-main{font-size:19px;} #deck-agent .box.core .sub{font-size:13px;} #deck-agent .row2{gap:8px;} #deck-agent .grid2{gap:8px;} #deck-agent .arrow-label{font-size:11px;} #deck-agent .rail{width:28px;} #deck-agent .rail::before{left:12px;} #deck-agent .rail::after{left:12px;width:16px;} #deck-agent .sidecar{padding:8px 8px 9px;} #deck-agent .sidecar-title{font-size:11px;} #deck-agent .box.blue.model{padding:9px 5px;} #deck-agent .link{font-size:11px;} #deck-agent .tag{font-size:14px;padding:8px 15px;margin-bottom:14px;} #deck-agent .merge-stage{height:78px;margin-bottom:16px;} #deck-agent .chip{margin-left:-62px;width:124px;height:62px;font-size:17px;} #deck-agent .chip.n8n{transform:translateX(-180px);} #deck-agent .chip.dify{transform:translateX(180px);} #deck-agent .chip.collide{transform:translateX(0);} #deck-agent .chip.gone{opacity:0;} #deck-agent .core-bar .box-main{font-size:18px;} #deck-agent .core-bar .sub{font-size:12.5px;margin-top:5px;} #deck-agent .point{font-size:14px;padding:12px 14px;} } #deck-arch{ --page-bg:linear-gradient(180deg, #101F42 0%, #16294F 20%, #223A68 40%, #2D4779 60%, #3D5890 75%, #456090 100%); --ink:#3B342A; --muted:#B9B2A4; --heading-light:#EDE8DD; --red-bright:#E2735A; --red-tag:#E0433A; --red-tag-dark:#B5332B; --blue-num:#5A8FD6; --blue-bg:#EAF1FB; --blue-border:#5A8FD6; --green-num:#3FAE6E; --green-bg:#D7ECDD; --green-border:#2F6B47; --green-dark-bg:#3FAE6E; --gray-num:#7A7A7A; --gray-dark-bg:#8A8A8A; --gray-border:#4A4A4A; --gray-light-bg:#DCDCDC; --tan-num:#C98A4E; --tan-bg:#F6DFC2; --tan-border:#A6621E; --tan-dark-bg:#EEB974; --case-bg:#F7E9C2; --yellow-bg:#F5B93D; --yellow-border:#333333; --yellow-red:#C0272A; --orange:#E07A3F; --orange-dark:#A04D1E; --orange-light:#F0AA76; --peach-border:#C98A4E; --matrix-blue:#1F5FD6; --matrix-blue-dark:#2C5AA0; } #deck-arch .pager{position:fixed;inset:0;overflow:hidden;z-index:850;} #deck-arch .page-slide{ position:absolute;inset:0;height:100%;width:100%; display:flex;flex-direction:column;justify-content:center; padding:22px 20px 54px; overflow-y:auto; -ms-overflow-style:none;scrollbar-width:none; transition:transform .55s cubic-bezier(.65,0,.35,1); background:var(--page-bg); } #deck-arch .page-slide::-webkit-scrollbar{display:none;} #deck-arch .inner{max-width:440px;margin:0 auto;width:100%;} #deck-arch .reveal-item{opacity:0;transform:translateY(20px); transition:opacity 1.3s cubic-bezier(.22,.61,.36,1), transform 1.3s cubic-bezier(.22,.61,.36,1);} #deck-arch .reveal-item.show{opacity:1;transform:translateY(0);} #deck-arch .punch-item{opacity:0;transform:scale(.6); transition:opacity 1.2s cubic-bezier(.34,1.56,.64,1), transform 1.2s cubic-bezier(.34,1.56,.64,1);} #deck-arch .punch-item.show{opacity:1;transform:scale(1);} #deck-arch .tag-pop{opacity:0;transform:translateY(-8px) scale(.8); transition:opacity .95s ease, transform .95s cubic-bezier(.34,1.56,.64,1);} #deck-arch .tag-pop.show{opacity:1;transform:translateY(0) scale(1);} #deck-arch .punch-item.glow-blue.show{animation:glowBlue-arch 2.4s ease-in-out infinite;} @keyframes glowBlue-arch{0%,100%{box-shadow:0 0 10px 2px rgba(31,95,214,.45);}50%{box-shadow:0 0 26px 7px rgba(31,95,214,.75);}} #deck-arch .punch-item.glow-yellow.show{animation:glowYellow-arch 2.4s ease-in-out infinite;} @keyframes glowYellow-arch{0%,100%{box-shadow:0 0 10px 2px rgba(224,67,58,.35);}50%{box-shadow:0 0 26px 7px rgba(224,67,58,.6);}} @keyframes glowRed-arch{0%,100%{box-shadow:0 0 12px 2px rgba(224,67,58,.4);}50%{box-shadow:0 0 28px 8px rgba(224,67,58,.7);}} #deck-arch .h1{text-align:center;font-size:20px;font-weight:700;color:var(--red-bright);letter-spacing:.3px; line-height:1.45;margin-bottom:9px;} #deck-arch .h1 span{display:block;} #deck-arch .titlebar{background:var(--red-tag);color:#fff;text-align:center;border-radius:10px; padding:10px 14px;font-size:17px;font-weight:800;line-height:1.4;margin-bottom:10px;} #deck-arch .legend{display:flex;justify-content:center;gap:14px;margin-bottom:12px;flex-wrap:wrap;} #deck-arch .legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);} #deck-arch .swatch{width:11px;height:11px;border-radius:3px;display:inline-block;} #deck-arch .swatch.gray-d{background:var(--gray-dark-bg);border:1px solid var(--gray-border);} #deck-arch .swatch.gray-l{background:var(--gray-light-bg);border:1px solid var(--gray-border);} #deck-arch .swatch.green-d{background:var(--green-dark-bg);border:1px solid var(--green-border);} #deck-arch .swatch.green-l{background:var(--green-bg);border:1px solid var(--green-border);} #deck-arch .step-label{display:flex;align-items:center;justify-content:center;gap:7px; font-size:15px;font-weight:700;color:var(--heading-light);margin:10px 0 8px;} #deck-arch .step-num{width:18px;height:18px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center;font-size:11.5px;color:#fff;font-weight:700;} #deck-arch .step-num.b{background:var(--blue-num);} #deck-arch .step-num.g{background:var(--green-num);} #deck-arch .step-num.t{background:var(--tan-num);} #deck-arch .step-num.o{background:var(--orange-dark);} #deck-arch .box{border-radius:9px;text-align:center;font-weight:700; display:flex;flex-direction:column;align-items:center;justify-content:center; box-shadow:0 5px 14px rgba(0,0,0,0.4);width:100%;} #deck-arch .box .box-main{display:block;font-size:16px;font-weight:800;} #deck-arch .box .sub{display:block;font-size:12px;font-weight:500;margin-top:4px;opacity:.9;} #deck-arch .box.blue{background:var(--blue-bg);border:1px solid var(--blue-border);padding:11px 10px;font-size:14px;color:#33507a;} #deck-arch .box.pill{border-radius:999px;} #deck-arch .box.green{background:var(--green-bg);border:1px solid var(--green-border);padding:10px 8px;font-size:13px;color:#20492f;} #deck-arch .box.green-solid{background:var(--green-dark-bg);border:1px solid var(--green-border);color:#fff;padding:11px 10px;font-size:14.5px;} #deck-arch .box.gray-d{background:var(--gray-dark-bg);border:1px solid var(--gray-border);color:#fff;padding:11px 10px;font-size:13px;} #deck-arch .box.gray-l{background:var(--gray-light-bg);border:1px solid var(--gray-border);padding:10px 8px;font-size:14px;color:#2a2a2a;} #deck-arch .box.tan{background:var(--tan-bg);border:1px solid var(--tan-border);padding:9px 6px;font-size:13px;color:#5c3a12;} #deck-arch .box.yellow{background:var(--yellow-bg);border:1px solid var(--yellow-border);padding:11px 12px;font-size:14.5px;color:var(--yellow-red);font-weight:800;} #deck-arch .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;} #deck-arch .row2{display:grid;grid-template-columns:1fr 1fr;gap:7px;} #deck-arch .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;} #deck-arch .stack{display:flex;flex-direction:column;gap:7px;} #deck-arch .arrow-wrap{display:flex;flex-direction:column;align-items:center;padding:4px 0;} #deck-arch .arrow-label{font-size:11.5px;color:var(--muted);margin-top:1px;} #deck-arch .split-row{width:100%;display:flex;align-items:center;justify-content:space-between; background:#4a4a4a;border:1px solid #6a6a6a;border-radius:8px;padding:9px 12px; font-size:12.5px;color:#EDE8DD;gap:8px;} #deck-arch .split-row .chiplet{font-size:11px;color:#3B3B3B;background:#DCDCDC;border-radius:5px;padding:2px 7px;white-space:nowrap;} #deck-arch .center-line{text-align:center;font-size:15px;font-weight:700;line-height:1.5;} #deck-arch .tag{display:inline-block;background:var(--red-tag);color:#fff;font-size:15px;font-weight:700; padding:7px 15px;border-radius:8px 8px 8px 0;margin-bottom:14px;} #deck-arch .value-card{position:relative;} #deck-arch .banner-wrap{position:relative;margin-bottom:15px;} #deck-arch .banner{border-radius:14px;padding:18px 14px;text-align:center;font-weight:900;font-size:21.5px; letter-spacing:.3px;line-height:1.4;} #deck-arch .banner.orange{background:linear-gradient(135deg,var(--orange-light),var(--orange-dark)); border:2px solid var(--orange-dark);color:#fff;box-shadow:0 6px 16px rgba(160,77,30,0.4);} #deck-arch .banner.blue{background:linear-gradient(135deg,#5B93E8,var(--matrix-blue-dark)); border:2px solid var(--matrix-blue-dark);color:#fff;box-shadow:0 6px 16px rgba(44,90,160,0.4);} #deck-arch .banner.yellow{background:var(--yellow-bg);border:2px solid var(--yellow-border);color:var(--yellow-red); box-shadow:0 6px 16px rgba(192,39,42,0.3);} #deck-arch .banner .accent{color:#ffd23f;} #deck-arch .corner-tag{position:absolute;top:-10px;right:2px;background:var(--red-tag-dark);color:#fff; font-size:12px;font-weight:700;padding:4px 10px;border-radius:14px;border:1.5px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,0.35);} #deck-arch .point{background:#FBF3E9;border:1px solid var(--peach-border);border-radius:10px; padding:11px 13px;display:flex;align-items:center;gap:9px;margin-bottom:8px; font-size:14.5px;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,0.3);} #deck-arch .point.benefit{background:#dcecd3;border-color:#333;color:#1a1a1a;} #deck-arch .point.benefit .step-num{background:#e8a33d;} #deck-arch .point.redline{background:#fde3df;border-color:var(--red-tag);color:#8a1c1c;} #deck-arch .point.redline .step-num{background:var(--red-tag);} #deck-arch .point.star{background:#fff2e6;border:2px solid var(--red-tag);color:#8a1c1c;font-size:15px;} #deck-arch .point.star .step-num{background:var(--red-tag);} #deck-arch .point.star b{color:var(--red-tag);font-size:18px;font-weight:900;} #deck-arch .point.star.show{animation:glowRed-arch 2.4s ease-in-out .6s infinite;} #deck-arch .box.zone{width:100%;padding:13px 12px;} #deck-arch .box.zone .box-main{font-size:15px;} #deck-arch .box.zone .sub{font-size:12.5px;opacity:.92;margin-top:5px;} #deck-arch .boundary{position:relative;margin:8px 0;border-top:2px dashed #8ea2c4;} #deck-arch .boundary .split-row{margin-top:9px;background:#33436a;border-color:#5a72a8;} #deck-arch .boundary .blabel{position:absolute;top:-9px;left:50%;transform:translateX(-50%); background:#16294F;color:#9fb3d6;font-size:11.5px;font-weight:700;padding:0 8px;white-space:nowrap;} #deck-arch .cross-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:13px; font-size:13px;font-weight:700;} #deck-arch .firsts-head{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:14px; color:var(--heading-light);font-size:19px;font-weight:800;} #deck-arch .firsts-head .big6{font-size:50px;font-weight:900;line-height:1;color:#e8a33d; text-shadow:0 2px 12px rgba(232,163,61,.4);} #deck-arch .subline{text-align:center;font-size:14.5px;font-weight:600;color:#8FB8FF;margin-bottom:6px;} #deck-arch .case-chip{background:var(--case-bg);border:1px solid var(--tan-border);border-radius:10px; padding:10px 10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 10px rgba(0,0,0,0.3);} #deck-arch .case-chip .badge{align-self:flex-start;background:var(--red-tag);color:#fff;font-size:11px;font-weight:800; border-radius:5px;padding:1px 7px;} #deck-arch .case-chip .txt{font-size:13px;font-weight:700;color:#1a1a1a;line-height:1.3;} #deck-arch .stat-card{width:100%;max-width:380px;margin:0 auto;background:#FBF3E9;border:4px solid var(--red-tag); border-radius:20px;padding:38px 26px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,0.5);} #deck-arch .dots{position:fixed;left:0;right:0;bottom:20px;display:flex;justify-content:center;gap:6px;z-index:851;flex-wrap:wrap;padding:0 20px;} #deck-arch .deck-dot{width:10px;height:10px;border-radius:50%;background:rgba(201,196,186,0.4);transition:all .3s ease;cursor:pointer;} #deck-arch .deck-dot.active{width:25px;border-radius:10px;background:var(--red-bright);} @media (min-width: 900px) { #deck-arch .inner { max-width: 400px; } } @media only screen and (min-width: 1261px) { #deck-arch .inner{max-width:680px;} #deck-arch .h1{font-size:23px;margin-bottom:13px;} #deck-arch .titlebar{font-size:19px;padding:14px 18px;margin-bottom:14px;} #deck-arch .legend{gap:20px;margin-bottom:16px;} #deck-arch .legend-item{font-size:14px;} #deck-arch .swatch{width:13px;height:13px;} #deck-arch .step-label{font-size:17px;margin:14px 0 12px;} #deck-arch .step-num{width:22px;height:22px;font-size:13px;} #deck-arch .box .box-main{font-size:19px;} #deck-arch .box .sub{font-size:14px;margin-top:6px;} #deck-arch .box.blue{padding:16px 14px;font-size:16.5px;} #deck-arch .box.green{padding:15px 12px;font-size:15.5px;} #deck-arch .box.green-solid{padding:16px 14px;font-size:17px;} #deck-arch .box.gray-d{padding:16px 14px;font-size:15.5px;} #deck-arch .box.gray-l{padding:15px 12px;font-size:16.5px;} #deck-arch .box.tan{padding:14px 10px;font-size:15.5px;} #deck-arch .box.yellow{padding:16px 16px;font-size:17px;} #deck-arch .grid2{gap:14px;} #deck-arch .row2{gap:14px;} #deck-arch .row3{gap:14px;} #deck-arch .stack{gap:12px;} #deck-arch .arrow-label{font-size:13.5px;} #deck-arch .split-row{font-size:14.5px;padding:13px 16px;} #deck-arch .split-row .chiplet{font-size:12.5px;padding:3px 9px;} #deck-arch .center-line{font-size:18px;} #deck-arch .tag{font-size:17px;padding:9px 18px;margin-bottom:18px;} #deck-arch .banner{font-size:25px;padding:22px 18px;} #deck-arch .corner-tag{font-size:13.5px;padding:5px 12px;} #deck-arch .point{font-size:16.5px;padding:14px 16px;} #deck-arch .point.star{font-size:17px;} #deck-arch .point.star b{font-size:20px;} #deck-arch .box.zone{padding:16px 14px;} #deck-arch .box.zone .box-main{font-size:17px;} #deck-arch .box.zone .sub{font-size:14px;} #deck-arch .boundary .blabel{font-size:13px;} #deck-arch .cross-hint{font-size:15px;} #deck-arch .firsts-head{font-size:22px;} #deck-arch .firsts-head .big6{font-size:60px;} #deck-arch .subline{font-size:16.5px;} #deck-arch .case-chip .badge{font-size:12.5px;padding:2px 9px;} #deck-arch .case-chip .txt{font-size:15px;} #deck-arch .stat-card{max-width:460px;padding:44px 32px;} } #deck-routing{ --page-bg:linear-gradient(180deg, #101F42 0%, #16294F 20%, #223A68 40%, #2D4779 60%, #3D5890 75%, #456090 100%); --ink:#3B342A; --muted:#B9B2A4; --heading-light:#EDE8DD; --red-bright:#E2735A; --red-tag:#E0433A; --red-tag-dark:#B5332B; --blue-num:#5A8FD6; --blue-bg:#EAF1FB; --blue-border:#5A8FD6; --green-num:#3FAE6E; --green-bg:#D7ECDD; --green-border:#2F6B47; --green-dark-bg:#3FAE6E; --gray-num:#7A7A7A; --gray-dark-bg:#8A8A8A; --gray-border:#4A4A4A; --gray-light-bg:#DCDCDC; --tan-num:#C98A4E; --tan-bg:#F6DFC2; --tan-border:#A6621E; --tan-dark-bg:#EEB974; --case-bg:#F7E9C2; --yellow-bg:#F5B93D; --yellow-border:#333333; --yellow-red:#C0272A; --orange:#E07A3F; --orange-dark:#A04D1E; --orange-light:#F0AA76; --peach-border:#C98A4E; --matrix-blue:#1F5FD6; --matrix-blue-dark:#2C5AA0; } #deck-routing .pager{position:fixed;inset:0;overflow:hidden;z-index:850;} #deck-routing .page-slide{ position:absolute;inset:0;height:100%;width:100%; display:flex;flex-direction:column;justify-content:center; padding:22px 20px 54px; overflow-y:auto; -ms-overflow-style:none;scrollbar-width:none; transition:transform .55s cubic-bezier(.65,0,.35,1); background:var(--page-bg); } #deck-routing .page-slide::-webkit-scrollbar{display:none;} #deck-routing .inner{max-width:440px;margin:0 auto;width:100%;} #deck-routing .reveal-item{opacity:0;transform:translateY(20px); transition:opacity 1.3s cubic-bezier(.22,.61,.36,1), transform 1.3s cubic-bezier(.22,.61,.36,1);} #deck-routing .reveal-item.show{opacity:1;transform:translateY(0);} #deck-routing .punch-item{opacity:0;transform:scale(.6); transition:opacity 1.2s cubic-bezier(.34,1.56,.64,1), transform 1.2s cubic-bezier(.34,1.56,.64,1);} #deck-routing .punch-item.show{opacity:1;transform:scale(1);} #deck-routing .tag-pop{opacity:0;transform:translateY(-8px) scale(.8); transition:opacity .95s ease, transform .95s cubic-bezier(.34,1.56,.64,1);} #deck-routing .tag-pop.show{opacity:1;transform:translateY(0) scale(1);} #deck-routing .punch-item.glow-blue.show{animation:glowBlue-routing 2.4s ease-in-out infinite;} @keyframes glowBlue-routing{0%,100%{box-shadow:0 0 10px 2px rgba(31,95,214,.45);}50%{box-shadow:0 0 26px 7px rgba(31,95,214,.75);}} #deck-routing .punch-item.glow-yellow.show{animation:glowYellow-routing 2.4s ease-in-out infinite;} @keyframes glowYellow-routing{0%,100%{box-shadow:0 0 10px 2px rgba(224,67,58,.35);}50%{box-shadow:0 0 26px 7px rgba(224,67,58,.6);}} #deck-routing .h1{text-align:center;font-size:20px;font-weight:700;color:var(--red-bright);letter-spacing:.3px; line-height:1.45;margin-bottom:9px;} #deck-routing .h1 span{display:block;} #deck-routing .titlebar{background:var(--red-tag);color:#fff;text-align:center;border-radius:10px; padding:10px 14px;font-size:17px;font-weight:800;line-height:1.4;margin-bottom:10px;} #deck-routing .legend{display:flex;justify-content:center;gap:14px;margin-bottom:12px;flex-wrap:wrap;} #deck-routing .legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);} #deck-routing .swatch{width:11px;height:11px;border-radius:3px;display:inline-block;} #deck-routing .swatch.gray-d{background:var(--gray-dark-bg);border:1px solid var(--gray-border);} #deck-routing .swatch.gray-l{background:var(--gray-light-bg);border:1px solid var(--gray-border);} #deck-routing .swatch.green-d{background:var(--green-dark-bg);border:1px solid var(--green-border);} #deck-routing .swatch.green-l{background:var(--green-bg);border:1px solid var(--green-border);} #deck-routing .swatch.blue-l{background:var(--blue-bg);border:1px solid var(--blue-border);} #deck-routing .swatch.yellow-l{background:var(--yellow-bg);border:1px solid var(--yellow-border);} #deck-routing .step-label{display:flex;align-items:center;justify-content:center;gap:7px; font-size:15px;font-weight:700;color:var(--heading-light);margin:10px 0 8px;} #deck-routing .step-num{width:18px;height:18px;border-radius:50%;flex:none; display:flex;align-items:center;justify-content:center;font-size:11.5px;color:#fff;font-weight:700;} #deck-routing .step-num.b{background:var(--blue-num);} #deck-routing .step-num.g{background:var(--green-num);} #deck-routing .step-num.t{background:var(--tan-num);} #deck-routing .step-num.o{background:var(--orange-dark);} #deck-routing .box{border-radius:9px;text-align:center;font-weight:700; display:flex;flex-direction:column;align-items:center;justify-content:center; box-shadow:0 5px 14px rgba(0,0,0,0.4);width:100%;} #deck-routing .box .box-main{display:block;font-size:16px;font-weight:800;} #deck-routing .box .sub{display:block;font-size:12px;font-weight:500;margin-top:4px;opacity:.9;} #deck-routing .box.blue{background:var(--blue-bg);border:1px solid var(--blue-border);padding:11px 10px;font-size:14px;color:#33507a;} #deck-routing .box.pill{border-radius:999px;} #deck-routing .box.green{background:var(--green-bg);border:1px solid var(--green-border);padding:10px 8px;font-size:13px;color:#20492f;} #deck-routing .box.green-solid{background:var(--green-dark-bg);border:1px solid var(--green-border);color:#fff;padding:11px 10px;font-size:14.5px;} #deck-routing .box.gray-d{background:var(--gray-dark-bg);border:1px solid var(--gray-border);color:#fff;padding:11px 10px;font-size:13px;} #deck-routing .box.gray-l{background:var(--gray-light-bg);border:1px solid var(--gray-border);padding:10px 8px;font-size:14px;color:#2a2a2a;} #deck-routing .box.tan{background:var(--tan-bg);border:1px solid var(--tan-border);padding:9px 6px;font-size:13px;color:#5c3a12;} #deck-routing .box.yellow{background:var(--yellow-bg);border:1px solid var(--yellow-border);padding:11px 12px;font-size:14.5px;color:var(--yellow-red);font-weight:800;} #deck-routing .grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;} #deck-routing .row2{display:grid;grid-template-columns:1fr 1fr;gap:7px;} #deck-routing .row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;} #deck-routing .stack{display:flex;flex-direction:column;gap:7px;} #deck-routing .arrow-wrap{display:flex;flex-direction:column;align-items:center;padding:4px 0;} #deck-routing .arrow-label{font-size:11.5px;color:var(--muted);margin-top:1px;} #deck-routing .split-row{width:100%;display:flex;align-items:center;justify-content:space-between; background:#4a4a4a;border:1px solid #6a6a6a;border-radius:8px;padding:9px 12px; font-size:12.5px;color:#EDE8DD;gap:8px;} #deck-routing .split-row .chiplet{font-size:11px;color:#3B3B3B;background:#DCDCDC;border-radius:5px;padding:2px 7px;white-space:nowrap;} #deck-routing .center-line{text-align:center;font-size:15px;font-weight:700;line-height:1.5;} #deck-routing .tag{display:inline-block;background:var(--red-tag);color:#fff;font-size:15px;font-weight:700; padding:7px 15px;border-radius:8px 8px 8px 0;margin-bottom:14px;} #deck-routing .value-card{position:relative;} #deck-routing .banner-wrap{position:relative;margin-bottom:15px;} #deck-routing .banner{border-radius:14px;padding:18px 14px;text-align:center;font-weight:900;font-size:21.5px; letter-spacing:.3px;line-height:1.4;} #deck-routing .banner.orange{background:linear-gradient(135deg,var(--orange-light),var(--orange-dark)); border:2px solid var(--orange-dark);color:#fff;box-shadow:0 6px 16px rgba(160,77,30,0.4);} #deck-routing .banner.blue{background:linear-gradient(135deg,#5B93E8,var(--matrix-blue-dark)); border:2px solid var(--matrix-blue-dark);color:#fff;box-shadow:0 6px 16px rgba(44,90,160,0.4);} #deck-routing .banner.yellow{background:var(--yellow-bg);border:2px solid var(--yellow-border);color:var(--yellow-red); box-shadow:0 6px 16px rgba(192,39,42,0.3);} #deck-routing .banner .accent{color:#ffd23f;} #deck-routing .corner-tag{position:absolute;top:-10px;right:2px;background:var(--red-tag-dark);color:#fff; font-size:12px;font-weight:700;padding:4px 10px;border-radius:14px;border:1.5px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,0.35);} #deck-routing .point{background:#FBF3E9;border:1px solid var(--peach-border);border-radius:10px; padding:11px 13px;display:flex;align-items:center;gap:9px;margin-bottom:8px; font-size:14.5px;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,0.3);} #deck-routing .point.benefit{background:#dcecd3;border-color:#333;color:#1a1a1a;} #deck-routing .point.benefit .step-num{background:#e8a33d;} #deck-routing .point.redline{background:#fde3df;border-color:var(--red-tag);color:#8a1c1c;} #deck-routing .point.redline .step-num{background:var(--red-tag);} #deck-routing .subline{text-align:center;font-size:14.5px;font-weight:600;color:#8FB8FF;margin-bottom:6px;} #deck-routing .case-chip{background:var(--case-bg);border:1px solid var(--tan-border);border-radius:10px; padding:10px 10px;display:flex;flex-direction:column;gap:6px;box-shadow:0 4px 10px rgba(0,0,0,0.3);} #deck-routing .case-chip .badge{align-self:flex-start;background:var(--red-tag);color:#fff;font-size:11px;font-weight:800; border-radius:5px;padding:1px 7px;} #deck-routing .case-chip .txt{font-size:13px;font-weight:700;color:#1a1a1a;line-height:1.3;} #deck-routing .stat-card{width:100%;max-width:380px;margin:0 auto;background:#FBF3E9;border:4px solid var(--red-tag); border-radius:20px;padding:38px 26px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,0.5);} #deck-routing .dots{position:fixed;left:0;right:0;bottom:20px;display:flex;justify-content:center;gap:6px;z-index:851;flex-wrap:wrap;padding:0 20px;} #deck-routing .deck-dot{width:10px;height:10px;border-radius:50%;background:rgba(201,196,186,0.4);transition:all .3s ease;cursor:pointer;} #deck-routing .deck-dot.active{width:25px;border-radius:10px;background:var(--red-bright);} .highlight-box.fading,.stat-card.fading{opacity:0 !important;transform:scale(.85) !important;pointer-events:none;} @media only screen and (min-width: 1261px) { #deck-routing .inner{max-width:680px;} #deck-routing .h1{font-size:23px;margin-bottom:13px;} #deck-routing .titlebar{font-size:19px;padding:14px 18px;margin-bottom:14px;} #deck-routing .legend{gap:20px;margin-bottom:16px;} #deck-routing .legend-item{font-size:14px;} #deck-routing .swatch{width:13px;height:13px;} #deck-routing .step-label{font-size:17px;margin:14px 0 12px;} #deck-routing .step-num{width:22px;height:22px;font-size:13px;} #deck-routing .box .box-main{font-size:19px;} #deck-routing .box .sub{font-size:14px;margin-top:6px;} #deck-routing .box.blue{padding:16px 14px;font-size:16.5px;} #deck-routing .box.green{padding:15px 12px;font-size:15.5px;} #deck-routing .box.green-solid{padding:16px 14px;font-size:17px;} #deck-routing .box.gray-d{padding:16px 14px;font-size:15.5px;} #deck-routing .box.gray-l{padding:15px 12px;font-size:16.5px;} #deck-routing .box.tan{padding:14px 10px;font-size:15.5px;} #deck-routing .box.yellow{padding:16px 16px;font-size:17px;} #deck-routing .grid2{gap:14px;} #deck-routing .row2{gap:14px;} #deck-routing .row3{gap:14px;} #deck-routing .stack{gap:12px;} #deck-routing .arrow-label{font-size:13.5px;} #deck-routing .split-row{font-size:14.5px;padding:13px 16px;} #deck-routing .split-row .chiplet{font-size:12.5px;padding:3px 9px;} #deck-routing .center-line{font-size:18px;} #deck-routing .tag{font-size:17px;padding:9px 18px;margin-bottom:18px;} #deck-routing .banner{font-size:25px;padding:22px 18px;} #deck-routing .corner-tag{font-size:13.5px;padding:5px 12px;} #deck-routing .point{font-size:16.5px;padding:14px 16px;} #deck-routing .subline{font-size:16.5px;} #deck-routing .case-chip .badge{font-size:12.5px;padding:2px 9px;} #deck-routing .case-chip .txt{font-size:15px;} #deck-routing .stat-card{max-width:460px;padding:44px 32px;} } @media only screen and (min-width: 1261px) { #contact .contact-block { display: inline-block; float: none; width: fit-content; max-width: 100%; position: relative; background: rgba(6, 22, 40, 0.5); border: 1.5px solid #00E5FF; border-radius: 4px; padding: clamp(20px, 2.2vw, 34px) clamp(26px, 2.8vw, 42px); box-shadow: 0 0 28px rgba(0, 229, 255, 0.22), 0 0 10px rgba(0, 229, 255, 0.35), inset 0 0 14px rgba(0, 229, 255, 0.18); } #contact .contact-block::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: linear-gradient(to bottom, rgba(0, 229, 255, 0.28), transparent 35%), repeating-linear-gradient(45deg, rgba(0, 229, 255, 0.9) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(0, 229, 255, 0.9) 0 2px, transparent 2px 6px), repeating-linear-gradient(-45deg, rgba(0, 229, 255, 0.9) 0 2px, transparent 2px 6px), repeating-linear-gradient(45deg, rgba(0, 229, 255, 0.9) 0 2px, transparent 2px 6px), linear-gradient(rgba(0, 229, 255, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.14) 1px, transparent 1px); background-size: 100% 100%, 18px 8px, 18px 8px, 18px 8px, 18px 8px, 22px 22px, 22px 22px; background-position: 0 0, top left, top right, bottom left, bottom right, 0 0, 0 0; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat; opacity: 0.85; } #contact .contact-block .contact-city, #contact .contact-block .contact-address, #contact .contact-block .contact-email, #contact .contact-block .contact-email a { color: #FFFFFF; } #contact .contact-block .contact-city { margin-top: 0; } #contact .contact-block .contact-address, #contact .contact-block .contact-email { margin-left: 0; } #contact .contact-block p { padding-right: 0; } #contact .contact-block .contact-email a:hover { color: #00E5FF; text-decoration: underline; } } #contact .wx-card { position: relative; display: inline-flex; flex-direction: column; align-items: flex-start; width: 132px; margin: 12px 0 10px; padding: 12px 12px 14px; border-radius: 6px; overflow: hidden; box-sizing: border-box; } #contact .wx-card-label { font-weight: 700; font-size: 20px; color: #FFFFFF; letter-spacing: 0.5px; margin: 0 0 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } #contact .wx-card-qr { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #FFFFFF; border-radius: 2px; padding: 6px; box-sizing: border-box; align-self: center; } #contact .wx-card-qr img { display: block; width: 100%; height: 100%; } #contact .wx-card-qr::before, #contact .wx-card-qr::after { content: ""; position: absolute; width: 14px; height: 14px; border: 3px solid #000000; } #contact .wx-card-qr::before { top: -3px; left: -3px; border-right: none; border-bottom: none; } #contact .wx-card-qr::after { bottom: -3px; right: -3px; border-left: none; border-top: none; } #contact { --contact-group-offset-y: 100px; --contact-group-offset-x: -30px; } #contact .contact-arrow { --contact-arrow-top: 28.45%; --contact-arrow-left: 14.35%; --contact-arrow-size: 36.12%; --contact-arrow-rotate: -51.06deg; display: none; position: absolute; top: var(--contact-arrow-top); left: var(--contact-arrow-left); width: var(--contact-arrow-size); aspect-ratio: 1 / 1; transform: translateX(var(--contact-group-offset-x, 0px)) translateY(var(--contact-group-offset-y, 14px)) rotate(var(--contact-arrow-rotate)); pointer-events: none; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 10px rgba(0, 229, 255, 0.85)) drop-shadow(0 0 22px rgba(0, 229, 255, 0.5)) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); clip-path: inset(-8px 100% -8px -8px); } #contact .contact-arrow svg { width: 100%; height: 100%; overflow: visible; } @media only screen and (min-width: 1261px) { #contact .contact-arrow { display: block; } } @keyframes contactArrowWipeIn { from { clip-path: inset(-8px 100% -8px -8px); } to { clip-path: inset(-8px -8px -8px -8px); } } #contact:target .contact-arrow { animation: contactArrowWipeIn 1s ease-out 0s forwards; } #contact .contact-block { opacity: 0; } @keyframes contactBoxAppear { from { opacity: 0; } to { opacity: 1; } } #contact:target .contact-block { animation: contactBoxAppear 1.2s ease-out 1s forwards; } @media only screen and (min-width: 1261px) { @keyframes contactBoxAppear { 0% { opacity: 0; filter: none; transform: translate(0, 0); } 10% { opacity: 0.32; filter: brightness(1.7) hue-rotate(10deg); transform: translate(1.5px, 0); } 16% { opacity: 0.32; filter: none; transform: translate(0, 0); } 30% { opacity: 0.52; filter: brightness(1.6) hue-rotate(-9deg); transform: translate(-1.5px, 0); } 36% { opacity: 0.52; filter: none; transform: translate(0, 0); } 50% { opacity: 0.7; filter: brightness(1.5); transform: translate(1.5px, 0); } 56% { opacity: 0.7; filter: none; transform: translate(0, 0); } 72% { opacity: 0.86; filter: brightness(1.7) hue-rotate(8deg); transform: translate(-1.5px, 0); } 78% { opacity: 0.86; filter: none; transform: translate(0, 0); } 92% { opacity: 1; filter: brightness(1.4); transform: translate(1px, 0); } 100% { opacity: 1; filter: none; transform: translate(0, 0); } } #contact:target .contact-block { animation: contactBoxAppear 1s steps(1) 1.5s forwards; } } #panoramaHome { padding: clamp(16px, 3vh, 28px) clamp(14px, 3vw, 24px); } .home-inner { width: 100%; max-width: clamp(320px, 92vw, 640px); } .h1-home { font-size: clamp(22px, 3vw, 32px); color: #ffffff; text-shadow: 0 0 16px rgba(0, 229, 255, 0.45); margin-bottom: clamp(6px, 1vw, 10px); } .h1-home-sub { font-size: clamp(13px, 1.8vw, 17px); color: rgba(255, 255, 255, 0.75); margin-bottom: clamp(16px, 3vw, 28px); } .accent-matrix { --accent: #EF4444; --accent-rgb: 239, 68, 68; } .accent-ads { --accent: #F59E0B; --accent-rgb: 245, 158, 11; } .accent-select { --accent: #F97316; --accent-rgb: 249, 115, 22; } .accent-agent { --accent: #38BDF8; --accent-rgb: 56, 189, 248; } .accent-routing { --accent: #34D399; --accent-rgb: 52, 211, 153; } .accent-arch { --accent: #A78BFA; --accent-rgb: 167, 139, 250; } .node { position: relative; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 18px); background: rgba(12, 26, 54, 0.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1.5px solid var(--accent, #00E5FF); border-radius: clamp(14px, 2vw, 20px); padding: clamp(13px, 1.8vw, 20px) clamp(15px, 2.2vw, 24px); overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06); cursor: pointer; animation: nodeGlow 3.2s ease-in-out infinite; animation-play-state: paused; transition: transform .18s ease, box-shadow .18s ease; } .node.show { animation-play-state: running; } .node:active { transform: scale(.96); } @keyframes nodeGlow { 0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(var(--accent-rgb), 0.2), 0 0 12px 1px rgba(var(--accent-rgb), 0.15); } 50% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(var(--accent-rgb), 0.45), 0 0 28px 6px rgba(var(--accent-rgb), 0.35); } } .node::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: nodeShine 3.2s ease-in-out infinite; animation-play-state: paused; pointer-events: none; } .node.show::after { animation-play-state: running; } @keyframes nodeShine { 0% { left: -60%; } 35%, 100% { left: 140%; } } .chain-num { width: clamp(32px, 3.5vw, 44px); height: clamp(32px, 3.5vw, 44px); border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: clamp(15px, 1.6vw, 20px); color: #fff; font-weight: 800; background: var(--accent); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55); } .node-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: clamp(3px, 0.6vw, 6px); } .node-title-row { display: flex; align-items: center; gap: clamp(7px, 1vw, 10px); flex-wrap: wrap; } .node-title { font-size: clamp(16px, 2vw, 22px); font-weight: 800; color: #ffffff; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .node-tag { flex: none; font-size: clamp(11px, 1.3vw, 13px); font-weight: 700; color: #fff; border-radius: 20px; padding: clamp(3px, 0.5vw, 5px) clamp(8px, 1.2vw, 14px); letter-spacing: .2px; background: var(--accent); box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.35); } .node-desc { font-size: clamp(13px, 1.6vw, 16px); color: rgba(255, 255, 255, 0.78); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chain-arrow { display: flex; justify-content: center; padding: clamp(3px, 0.8vw, 6px) 0; } .chain-arrow svg { width: clamp(13px, 1.8vw, 18px); height: clamp(13px, 1.8vw, 18px); } .chain-arrow svg path { stroke: rgba(0, 229, 255, 0.55); } .node-tier { position: relative; border: 1px solid rgba(0, 229, 255, 0.12); border-radius: clamp(16px, 2vw, 22px); padding: clamp(10px, 2vw, 18px) clamp(10px, 2vw, 18px) clamp(9px, 1.8vw, 16px); margin-bottom: clamp(6px, 1vw, 10px); background: rgba(10, 24, 50, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 20px rgba(0, 0, 0, 0.25); } .node-arrow { padding: clamp(2px, 0vw, 3px) 0; } .tier-label { display: flex; align-items: center; gap: clamp(8px, 1vw, 10px); font-size: clamp(11px, 1.5vw, 14px); font-weight: 800; letter-spacing: 2px; color: #00E5FF; margin: 0 0 clamp(8px, 1.5vw, 12px) 3px; text-shadow: 0 0 8px rgba(0, 229, 255, 0.35); } .tier-label::before { content: ''; width: 16px; height: 2px; border-radius: 2px; background: currentColor; opacity: .5; } .tier-arrow { padding: clamp(0px, 0vw, 0px) 0; } @media only screen and (max-width: 401px) { #panoramaHome { padding: 70px 10px 8px; } .home-inner { max-width: 100%; } .h1-home { font-size: 22px; margin-bottom: 8px; } .h1-home-sub { font-size: 14px; margin-bottom: 14px; } .node-tier { padding: 12px 10px 10px; margin-bottom: 10px; } .node { gap: 12px; padding: 13px 14px; } .chain-num { width: 32px; height: 32px; font-size: 14px; } .node-title, .node-desc { white-space: nowrap; } .node-title { font-size: 16px; } .node-desc { font-size: 13px; } .tier-label { font-size: 12px; margin-bottom: 8px; } .node-arrow { padding: 3px 0; } .tier-arrow { padding: 2px 0; } } @media only screen and (min-width: 402px) and (max-width: 422px) { #panoramaHome { padding: 72px 11px 9px; } .home-inner { max-width: 100%; } .h1-home { font-size: 23px; margin-bottom: 8px; } .h1-home-sub { font-size: 15px; margin-bottom: 15px; } .node-tier { padding: 13px 11px 11px; margin-bottom: 10px; } .node { gap: 13px; padding: 14px 15px; } .chain-num { width: 33px; height: 33px; font-size: 15px; } .node-title, .node-desc { white-space: nowrap; } .node-title { font-size: 17px; } .node-desc { font-size: 13.5px; } .tier-label { font-size: 12.5px; margin-bottom: 8px; } .node-arrow { padding: 3px 0; } .tier-arrow { padding: 2px 0; } } @media only screen and (min-width: 423px) and (max-width: 599px) { #panoramaHome { padding: 80px 12px 10px; } .home-inner { max-width: 100%; } .h1-home { font-size: 24px; margin-bottom: 9px; } .h1-home-sub { font-size: 15.5px; margin-bottom: 16px; } .node-tier { padding: 14px 12px 12px; margin-bottom: 10px; } .node { gap: 14px; padding: 15px 16px; } .chain-num { width: 34px; height: 34px; font-size: 16px; } .node-title, .node-desc { white-space: nowrap; } .node-title { font-size: 18px; } .node-desc { font-size: 14px; } .tier-label { font-size: 13px; margin-bottom: 9px; } .node-arrow { padding: 3px 0; } .tier-arrow { padding: 2px 0; } } @media only screen and (min-width: 600px) and (max-width: 780px) { #panoramaHome { padding: 90px 14px 10px; } .home-inner { max-width: 460px; } .h1-home { font-size: 20px; margin-bottom: 6px; } .h1-home-sub { font-size: 13px; margin-bottom: 12px; } .node-tier { padding: 10px 10px 9px; margin-bottom: 6px; } .node { gap: 10px; padding: 11px 14px; } .chain-num { width: 30px; height: 30px; font-size: 14px; } .node-title, .node-desc { white-space: nowrap; } .node-title { font-size: 15px; } .node-desc { font-size: 12px; } .tier-label { font-size: 11px; margin-bottom: 6px; } .node-arrow { padding: 1px 0; } .tier-arrow { padding: 0 0; } } @media only screen and (min-width: 781px) and (max-width: 900px) { #panoramaHome { padding: 96px 16px 11px; } .home-inner { max-width: 520px; } .h1-home { font-size: 21px; margin-bottom: 7px; } .h1-home-sub { font-size: 13.5px; margin-bottom: 13px; } .node-tier { padding: 11px 11px 10px; margin-bottom: 7px; } .node { gap: 11px; padding: 12px 15px; } .chain-num { width: 32px; height: 32px; font-size: 15px; } .node-title, .node-desc { white-space: nowrap; } .node-title { font-size: 15.5px; } .node-desc { font-size: 12.5px; } .tier-label { font-size: 11.5px; margin-bottom: 7px; } .node-arrow { padding: 1px 0; } .tier-arrow { padding: 1px 0; } } @media only screen and (min-width: 901px) and (max-width: 1260px) { #panoramaHome { padding: 114px 20px 14px; } .home-inner { max-width: 620px; } .h1-home { font-size: 23px; margin-bottom: 8px; } .h1-home-sub { font-size: 14px; margin-bottom: 15px; } .node-tier { padding: 13px 13px 11px; margin-bottom: 8px; } .node { gap: 12px; padding: 14px 17px; } .chain-num { width: 36px; height: 36px; font-size: 16px; } .node-title, .node-desc { white-space: nowrap; } .node-title { font-size: 17px; } .node-desc { font-size: 13.5px; } .tier-label { font-size: 12px; margin-bottom: 8px; } .node-arrow { padding: 2px 0; } .tier-arrow { padding: 1px 0; } } .wx-browser #header { top: var(--wx-top); } .wx-browser #panoramaHome { top: var(--wx-top); } .wx-browser .deck-overlay, .wx-browser #deck-ads .pager, .wx-browser #deck-matrix .pager, .wx-browser #deck-select .pager, .wx-browser #deck-agent .pager, .wx-browser #deck-arch .pager, .wx-browser #deck-routing .pager { top: var(--wx-top); } .wx-browser .deck-close { top: calc(16px + var(--wx-top)); } @media only screen and (max-width: 1260px) { .wx-browser .deck-close { top: calc(clamp(60px, 5vw + 40px, 128px) + 12px + var(--wx-top)); } } .wx-browser .dots { bottom: calc(22px + var(--wx-bottom)); }