/* Explore: consulting-style page and the horizontal process flow. */
.xwrap{max-width:var(--wrap);padding:clamp(16px,3vw,32px) var(--gut) var(--sec)}
.xwrap .hero{padding:0;margin:0 0 var(--sec-s);max-width:60em}
.xwrap .hero .eyebrow{font-size:11.5px;letter-spacing:.16em;margin:0 0 8px}
.xwrap .hero h1{font-size:clamp(28px,3.6vw,42px);line-height:1.1;letter-spacing:-.04em;margin:0 0 12px}
.xwrap .hero .lead{font-size:clamp(15px,1.3vw,17px);line-height:1.65;color:#aebbd3;margin:0 0 14px;max-width:46em}
.xwrap .hero .notice{font-size:12.5px;padding:8px 12px;border-radius:10px;margin:0;max-width:46em}
.xtabs{display:inline-flex;gap:4px;margin:0 0 var(--sec-s);padding:4px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);position:sticky;max-width:100%;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,.1)}
.xtabs::-webkit-scrollbar{display:none}
.xtabs button{padding:8px 16px;border-radius:10px;border:0;background:none;color:#9fb0cc;font:600 14px var(--sans);white-space:nowrap}
.xtabs button[aria-selected=true]{background:rgba(82,255,198,.14);color:#52ffc6;box-shadow:inset 0 0 0 1px rgba(82,255,198,.35)}
.xpanel h2{font-size:clamp(20px,2.4vw,26px);letter-spacing:-.03em}
/* filter bar */
.fbar{display:flex;gap:14px 28px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08)}
.fbar-k{display:block;font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#7f90ad;margin-bottom:8px}
.fbar-l{min-width:0;flex:1 1 420px}.fbar .gchips{margin:0;gap:6px}
.fbar .chip{padding:6px 12px;font-size:12.5px;border-radius:9px;font-weight:600}
.fbar-r{flex:0 1 280px;min-width:min(100%,220px)}.fbar-r select{width:100%;font:600 14px var(--sans);padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff}
/* header */
.fhead{display:flex;gap:16px 24px;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.fhead>div:first-child{min-width:0;flex:1 1 360px}
.fkick{font:700 10.5px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#52ffc6;margin:0 0 6px}
.fhead h3{font-size:clamp(20px,2.2vw,26px);letter-spacing:-.03em;margin:0 0 6px}
.fpur{margin:0;color:#aebbd3;font-size:15px;line-height:1.6;max-width:52em}
.fctl{display:flex;gap:6px;align-items:center}
.fctl button{height:38px;min-width:38px;padding:0 14px;border-radius:10px;font:600 13.5px var(--sans);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#dfe9f8;cursor:pointer}
.fctl button.primary{background:linear-gradient(96deg,#52ffc6,#36e4ff);color:#03150f;border-color:transparent}
.fsep{width:1px;height:22px;background:rgba(255,255,255,.14);margin:0 4px}
/* diagram canvas */
.fl-shell{position:relative;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/22px 22px,linear-gradient(180deg,rgba(18,27,50,.55),rgba(8,13,28,.55));overflow:hidden}
.fl-shell:before,.fl-shell:after{content:"";position:absolute;top:0;bottom:0;width:28px;z-index:2;pointer-events:none}
.fl-shell:before{left:0;background:linear-gradient(90deg,#070b17,transparent)}.fl-shell:after{right:0;background:linear-gradient(270deg,#070b17,transparent)}
.fl-wrap{overflow-x:auto;overscroll-behavior-x:contain;padding:26px 28px 30px;cursor:grab;scrollbar-width:thin;scrollbar-color:#2a3b5e transparent;outline-offset:-3px}
.fl-wrap.drag{cursor:grabbing;user-select:none}
.fl{display:flex;align-items:stretch;width:max-content;min-height:150px}
.fa{flex:0 0 calc(40px*var(--z,1));display:flex;align-items:center;color:#2b3d62;transition:color .3s}.fa svg{width:100%;height:12px}.fa.lit{color:#52ffc6}
.fn{flex:0 0 calc(214px*var(--z,1));text-align:left;display:flex;flex-direction:column;gap:6px;padding:14px 15px 15px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));color:#e9f0fb;font:inherit;cursor:pointer;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;position:relative}
.fn:hover{transform:translateY(-2px);border-color:rgba(82,255,198,.5)}
.fn .fn-n{font:700 11px/1 var(--mono);letter-spacing:.12em;color:#7f90ad}
.fn b{font-size:calc(15px*var(--z,1));line-height:1.25;letter-spacing:-.01em;color:#fff}
.fn small{font-size:calc(12.5px*var(--z,1));line-height:1.5;color:#9fb0cc}
.fn.seen{border-color:rgba(82,255,198,.28)}.fn.seen .fn-n{color:#52ffc6}
.fn.on{border-color:#52ffc6;background:linear-gradient(180deg,rgba(82,255,198,.16),rgba(54,228,255,.06));box-shadow:0 0 0 1px rgba(82,255,198,.5),0 14px 34px -12px rgba(82,255,198,.5)}
.fn.on .fn-n{color:#52ffc6}
.fn-w{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:4px}.fn-w i{font-style:normal;font-size:10.5px;font-weight:600;padding:3px 7px;border-radius:6px;background:rgba(166,120,255,.16);color:#cdbbff;border:1px solid rgba(166,120,255,.3)}
.fio{flex:0 0 calc(190px*var(--z,1));padding:14px 15px;border-radius:14px;border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.025)}
.fio b{display:block;font:700 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.fio.in b{color:#36e4ff}.fio.out b{color:#ffc857}
.fio ul{margin:0;padding-left:16px;font-size:calc(12.5px*var(--z,1));line-height:1.5;color:#c3cfe4}.fio li{margin:0 0 5px}
.fprog{height:3px;border-radius:3px;background:rgba(255,255,255,.08);margin:14px 0 8px;overflow:hidden}.fprog i{display:block;height:100%;background:linear-gradient(90deg,#52ffc6,#36e4ff);transition:width .4s}
.fhint{margin:0 0 18px;font-size:12.5px;color:#7f90ad}
/* detail */
.fdet{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:clamp(16px,3vw,32px);padding:clamp(16px,2.4vw,24px);border-radius:18px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));position:static}
.fdet .seg{display:flex;gap:4px;margin:0 0 14px;flex-wrap:wrap}.fdet .seg button{padding:6px 12px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:none;color:#9fb0cc;font:600 12.5px var(--sans);cursor:pointer}
.fdet .seg button[aria-pressed=true]{background:rgba(82,255,198,.12);color:#52ffc6;border-color:rgba(82,255,198,.4)}
.fdet h4{font-size:19px;letter-spacing:-.02em;margin:0 0 8px;color:#fff}.fdet p{font-size:15px;line-height:1.65;color:#c3cfe4;margin:.4em 0}.fdet .muted{color:#7f90ad}
.fdet-r{display:flex;flex-direction:column;gap:8px;align-content:start;border-left:1px solid rgba(255,255,255,.08);padding-left:clamp(14px,2.4vw,26px)}
.fa-btn{display:block;text-align:center;text-decoration:none;padding:10px 14px;border-radius:11px;border:1px solid rgba(255,255,255,.16);color:#dfe9f8;font:600 13.5px var(--sans)}
.fa-btn:hover{border-color:#52ffc6;color:#fff}.fa-btn.primary{background:linear-gradient(96deg,#52ffc6,#36e4ff);color:#03150f;border-color:transparent}
@media(max-width:860px){.fdet{grid-template-columns:minmax(0,1fr)}.fdet-r{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
 .fl-wrap{padding:18px 16px 22px}.fn{flex-basis:calc(196px*var(--z,1))}.fctl .fsep,.fctl #zo,.fctl #zi{display:none}.fpur{font-size:14.5px}}
.fl{align-items:center}.fn{min-height:172px}.fio{align-self:center}.fio li:nth-child(n+5){display:none}
.xtabs{display:flex;width:100%;background:rgba(7,11,23,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);z-index:30}
.fdet p.fkick{font-size:10.5px;letter-spacing:.14em;line-height:1.2;margin:0 0 6px;color:#52ffc6}
@media(max-width:860px){.fn{min-height:158px}}
@media(max-width:860px){.fio{flex-basis:150px;padding:12px}.fio ul{font-size:12px}.fio li:nth-child(n+4){display:none}.fa{flex-basis:28px}}
@media(max-width:700px){.fbar .gchips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:calc(var(--gut) * -1);padding-right:var(--gut)}.fbar .gchips::-webkit-scrollbar{display:none}.fbar .gchips .chip{flex:none;white-space:nowrap}}