.visual-showcase{border-top-color:var(--amber-line);background:radial-gradient(circle at 92% 12%, #e08a1e21, transparent 25%), linear-gradient(180deg, #fffaf2 0%, var(--white) 72%);overflow:hidden}.showcase-introduction{grid-template-columns:minmax(0,.9fr) minmax(320px,.7fr);justify-content:space-between;align-items:end;gap:54px;display:grid}.showcase-introduction h2{max-width:18ch}.showcase-introduction .lede{font-size:1.05rem}.showcase-tabs,.showcase-controls{display:none}.visual-showcase.is-enhanced .showcase-tabs{display:flex}.showcase-tabs{scrollbar-color:var(--amber-line) transparent;scrollbar-width:thin;gap:8px;margin-top:38px;padding:0 0 12px;overflow-x:auto}.showcase-tabs button{border:1px solid var(--line);background:var(--white);color:var(--ink-soft);cursor:pointer;border-radius:999px;flex:none;align-items:center;gap:8px;padding:9px 13px;font:500 13px/1.25 IBM Plex Sans,sans-serif;transition:border-color .15s,background-color .15s,color .15s;display:inline-flex}.showcase-tabs button span{color:var(--ink-faint);font-family:IBM Plex Mono,monospace;font-size:10px}.showcase-tabs button:hover{border-color:var(--amber-line);background:var(--amber-soft);color:var(--ink)}.showcase-tabs button[aria-selected=true]{border-color:var(--ink);background:var(--ink);color:var(--white)}.showcase-tabs button[aria-selected=true] span{color:#f4b96f}.showcase-shell{border:1px solid var(--line);background:var(--white);border-radius:20px;margin-top:38px;overflow:hidden;box-shadow:0 22px 60px #12233a1a}.visual-showcase.is-enhanced .showcase-tabs+.showcase-shell{margin-top:14px}.visual-showcase.is-enhanced .showcase-controls{display:flex}.showcase-controls{border-bottom:1px solid var(--line-soft);background:var(--paper);justify-content:space-between;align-items:center;gap:18px;padding:14px 18px}.showcase-controls p{color:var(--ink-faint);letter-spacing:.06em;text-transform:uppercase;font-family:IBM Plex Mono,monospace;font-size:11px}.showcase-controls p b{color:var(--ink)}.showcase-controls p span{margin-left:3px}.showcase-controls>div{gap:7px;display:flex}.showcase-controls button{border:1px solid var(--line);background:var(--white);width:38px;height:38px;color:var(--ink);cursor:pointer;border-radius:50%;place-items:center;padding:0;font-size:18px;transition:border-color .15s,background-color .15s;display:grid}.showcase-controls button:hover:not(:disabled){border-color:var(--amber);background:var(--amber-soft)}.showcase-controls button:disabled{cursor:not-allowed;opacity:.35}.showcase-panel{padding:36px}.showcase-panel+.showcase-panel{border-top:1px solid var(--line);margin-top:24px;padding-top:60px}.visual-showcase.is-enhanced .showcase-panel+.showcase-panel{border-top:0;margin-top:0;padding-top:36px}.visual-showcase.is-enhanced .showcase-panel:not([hidden]){animation:.22s ease-out showcase-in}@keyframes showcase-in{0%{opacity:0;transform:translate(10px)}to{opacity:1;transform:translate(0)}}.showcase-foot{justify-content:space-between;align-items:center;gap:30px;margin-top:24px;display:flex}.showcase-note{max-width:70ch;color:var(--ink-faint);font-size:13px;line-height:1.55}.showcase-foot .btn{flex:none}.visual-showcase .visual-frame{width:100%;color:var(--ink);border:0;margin:0;padding:0}.visual-showcase .visual-heading{grid-template-columns:48px 1fr;gap:18px;max-width:790px;margin-bottom:28px;display:grid}.visual-showcase .visual-heading>span{background:var(--ink);width:46px;height:46px;color:var(--white);border-radius:50%;place-items:center;font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:500;display:grid}.visual-showcase .visual-heading p{color:var(--amber-deep);letter-spacing:.11em;text-transform:uppercase;margin:0 0 7px;font-family:IBM Plex Mono,monospace;font-size:10px}.visual-showcase .visual-heading h3{color:var(--ink);margin:0 0 9px;font-size:clamp(1.65rem,3.5vw,2.25rem);line-height:1.08}.visual-showcase .visual-intro{color:var(--ink-soft);font-size:15px;line-height:1.55}.visual-showcase h4{letter-spacing:-.01em;margin:0;font-family:Bricolage Grotesque Variable,system-ui,sans-serif;font-size:1.15rem;font-weight:500;line-height:1.3}.visual-showcase small{color:var(--ink-faint);letter-spacing:.1em;font-family:IBM Plex Mono,monospace;font-size:9px;line-height:1.45}.visual-showcase mark{color:#286fa9;background:#eaf3fb;border-radius:999px;padding:6px 9px;font-family:IBM Plex Sans,sans-serif;font-size:10px;font-weight:600;line-height:1.25;display:inline-flex}.visual-showcase .warn{color:#916008!important;background:#fff6df!important}.visual-showcase .bad{color:#bd4141!important;background:#fff0ef!important}.visual-showcase .good{color:#277c5e!important;background:#e9f7f1!important}.visual-showcase .visual-card,.visual-showcase .visual-road,.visual-showcase .visual-tree,.visual-showcase .visual-checkcard,.visual-showcase .visual-cost,.visual-showcase .visual-security,.visual-showcase .visual-documentation,.visual-showcase .visual-reality,.visual-showcase .visual-workshop{border:1px solid var(--line);background:var(--white);border-radius:16px;overflow:hidden;box-shadow:0 12px 34px #12233a12}.visual-showcase .visual-card{padding:26px}.visual-showcase .visual-card>header,.visual-showcase .visual-tree header,.visual-showcase .visual-checkcard header{border-bottom:1px solid var(--line-soft);justify-content:space-between;align-items:center;gap:14px;padding-bottom:18px;display:flex}.visual-showcase .visual-card h4,.visual-showcase .visual-tree h4,.visual-showcase .visual-checkcard h4{margin-top:4px}.visual-showcase .visual-split{grid-template-columns:1.5fr .8fr;gap:32px;padding-top:24px;display:grid}.visual-showcase .visual-metric{margin-bottom:18px}.visual-showcase .visual-metric:last-child{margin-bottom:0}.visual-showcase .visual-metric p{justify-content:space-between;gap:15px;margin-bottom:7px;font-size:12px;display:flex}.visual-showcase .visual-metric p span{color:var(--ink-faint)}.visual-showcase .visual-metric>i{background:var(--line-soft);border-radius:8px;height:7px;display:block;overflow:hidden}.visual-showcase .visual-metric em{border-radius:inherit;background:#3b9b77;height:100%;display:block}.visual-showcase .visual-metric em.warn{background:#e9a52c!important}.visual-showcase .visual-metric em.bad{background:#d74e4e!important}.visual-showcase .visual-metric em.width-38{width:38%}.visual-showcase .visual-metric em.width-75{width:75%}.visual-showcase .visual-metric em.width-88{width:88%}.visual-showcase .visual-metric em.width-100{width:100%}.visual-showcase .visual-split aside{background:var(--paper);border-radius:13px;padding:19px}.visual-showcase .visual-split ol{margin:8px 0 0;padding:0;list-style:none}.visual-showcase .visual-split li{border-bottom:1px solid var(--line);align-items:center;gap:8px;padding:10px 0;font-size:12px;display:flex}.visual-showcase .visual-split li:last-child{border-bottom:0}.visual-showcase .visual-columns{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.visual-showcase .visual-road{border-top:5px solid #d74e4e;padding:22px}.visual-showcase .visual-road.warn{border-color:var(--line)!important;background:var(--white)!important;color:var(--ink)!important;border-top-color:#e9a52c!important}.visual-showcase .visual-road.blue{border-top-color:#2675bb}.visual-showcase .visual-road h4{margin-top:5px;font-size:1.3rem}.visual-showcase .visual-road ol{margin:16px 0 0;padding-left:21px}.visual-showcase .visual-road li{border-bottom:1px solid var(--line-soft);padding:9px 0;font-size:12px}.visual-showcase .visual-road footer{color:var(--ink-faint);justify-content:space-between;padding-top:17px;font-size:11px;display:flex}.visual-showcase .visual-compare{grid-template-columns:1fr 52px 1fr;align-items:center;display:grid}.visual-showcase .visual-tree{padding:24px}.visual-showcase .visual-tree header{justify-content:flex-start}.visual-showcase .visual-tree header>strong,.visual-showcase .visual-checkcard header>strong{color:#bd4141;background:#fff0ef;border-radius:10px;flex:0 0 38px;place-items:center;width:38px;height:38px;display:grid}.visual-showcase .visual-tree.after header>strong{color:#277c5e;background:#e9f7f1}.visual-showcase .visual-tree ul,.visual-showcase .visual-checkcard ul{margin:0;padding:10px 0 0;list-style:none}.visual-showcase .visual-tree li,.visual-showcase .visual-checkcard li{gap:11px;padding:8px;font-size:12px;display:flex}.visual-showcase .visual-tree li i{background:#9fb1bd;border-radius:2px;flex:none;width:17px;height:13px;margin-top:3px}.visual-showcase .visual-tree.after li i{background:#2675bb}.visual-showcase .visual-tree footer{border-top:1px solid var(--line-soft);flex-wrap:wrap;gap:6px;padding-top:14px;display:flex}.visual-showcase .visual-tree footer mark{color:#277c5e;background:#e9f7f1}.visual-showcase .visual-arrow{background:var(--amber);width:40px;height:40px;color:var(--ink);border-radius:50%;place-items:center;margin:auto;display:grid}.visual-showcase .handover-columns{grid-template-columns:repeat(2,minmax(0,1fr))}.visual-showcase .visual-checkcard{padding:24px}.visual-showcase .visual-checkcard header{grid-template-columns:auto 1fr auto;display:grid}.visual-showcase .visual-checkcard li span{color:#277c5e;font-weight:600}.visual-showcase .visual-support .visual-events{padding:20px 0 4px}.visual-showcase .visual-event{grid-template-columns:60px 32px 1fr;gap:12px;min-height:65px;display:grid}.visual-showcase .visual-event time{color:var(--ink-faint);padding-top:6px;font-family:IBM Plex Mono,monospace;font-size:10px}.visual-showcase .visual-event>span{color:#286fa9;background:#eaf3fb;border-radius:50%;place-items:center;width:28px;height:28px;font-size:10px;font-weight:600;display:grid}.visual-showcase .visual-event:not(:last-child)>span:after{background:var(--line);content:"";width:1px;height:37px;margin-top:65px}.visual-showcase .visual-event p{margin:3px 0;font-size:13px}.visual-showcase .visual-event p small{letter-spacing:0;margin-top:3px;display:block}.visual-showcase .visual-support>footer{background:var(--paper);gap:25px;margin:0 -26px -26px;padding:17px 26px;font-size:11px;display:flex}.visual-showcase .visual-cost{grid-template-columns:.8fr 1.2fr;display:grid}.visual-showcase .visual-cost>section{background:var(--ink);min-height:260px;color:var(--white);border:0;padding:30px;position:relative}.visual-showcase .visual-cost>section>strong{margin-top:24px;font-family:Bricolage Grotesque Variable,system-ui,sans-serif;font-size:2.7rem;font-weight:500;line-height:1;display:block}.visual-showcase .visual-cost>section>span{color:#a9b9cb;font-size:13px}.visual-showcase .visual-bars{align-items:flex-end;gap:5px;width:105px;height:76px;display:flex;position:absolute;bottom:24px;right:24px}.visual-showcase .visual-bars i{background:var(--amber);flex:1}.visual-showcase .visual-bars .height-35{height:35%}.visual-showcase .visual-bars .height-42{height:42%}.visual-showcase .visual-bars .height-52{height:52%}.visual-showcase .visual-bars .height-55{height:55%}.visual-showcase .visual-bars .height-65{height:65%}.visual-showcase .visual-bars .height-78{height:78%}.visual-showcase .visual-bars .height-90{height:90%}.visual-showcase .visual-bars .height-100{height:100%}.visual-showcase .visual-cost>div{padding:17px 26px}.visual-showcase .visual-cost article{border-bottom:1px solid var(--line-soft);grid-template-columns:35px 1fr auto;align-items:center;gap:12px;padding:14px 0;display:grid}.visual-showcase .visual-cost article:last-child{border-bottom:0}.visual-showcase .visual-cost article>strong{color:#286fa9;background:#eaf3fb;border-radius:9px;place-items:center;width:35px;height:35px;font-size:12px;display:grid}.visual-showcase .visual-cost article p{font-size:13px}.visual-showcase .visual-cost article p b,.visual-showcase .visual-cost article p small{display:block}.visual-showcase .visual-cost article p small{letter-spacing:0;margin-top:3px}.visual-showcase .visual-security{grid-template-columns:.65fr 1.35fr;display:grid}.visual-showcase .visual-security>section{background:var(--ink);color:var(--white);border:0;flex-direction:column;align-items:center;padding:33px;display:flex}.visual-showcase .visual-shield{clip-path:polygon(50% 0,95% 16%,88% 72%,50% 100%,12% 72%,5% 16%);background:#3b9b77;place-items:center;width:58px;height:66px;display:grid}.visual-showcase .visual-security>section>span{color:#c4d0dd;margin-top:12px;font-size:12px}.visual-showcase .visual-security>section>strong{margin:8px;font-family:Bricolage Grotesque Variable,system-ui,sans-serif;font-size:2.6rem;line-height:1}.visual-showcase .visual-security>section>strong small{color:#c4d0dd;font-size:14px}.visual-showcase .visual-security>div{padding:23px}.visual-showcase .visual-security>div p{border-bottom:1px solid var(--line-soft);grid-template-columns:14px 1fr auto;gap:8px;margin:0;padding:12px 0;font-size:12px;display:grid}.visual-showcase .visual-security>div p:last-child{border-bottom:0}.visual-showcase .visual-security p i{background:#3b9b77;border-radius:50%;width:9px;height:9px;margin-top:5px}.visual-showcase .visual-security p i.warn{background:#e9a52c!important}.visual-showcase .visual-security p i.bad{background:#d74e4e!important}.visual-showcase .visual-documentation{grid-template-columns:250px 1fr;display:grid}.visual-showcase .visual-documentation aside{background:var(--ink);color:var(--white);padding:26px}.visual-showcase .visual-documentation aside>strong{background:var(--amber);width:40px;height:40px;color:var(--ink);border-radius:9px;place-items:center;display:grid}.visual-showcase .visual-documentation aside h4{margin-top:13px}.visual-showcase .visual-documentation nav{margin-top:23px;display:grid}.visual-showcase .visual-documentation nav span{color:#adc1d0;padding:9px;font-size:10px}.visual-showcase .visual-documentation nav .active{color:var(--white);background:#ffffff17;border-radius:7px}.visual-showcase .visual-documentation article{padding:30px}.visual-showcase .visual-documentation article h4{margin-top:5px;font-size:1.45rem}.visual-showcase .visual-documentation dl{margin:18px 0 0}.visual-showcase .visual-documentation dl div{border-bottom:1px solid var(--line-soft);grid-template-columns:1fr 1fr;padding:11px;font-size:12px;display:grid}.visual-showcase .visual-documentation dd{margin:0;font-weight:600}.visual-showcase .visual-documentation article footer{color:#277c5e;background:#e9f7f1;margin-top:19px;padding:11px;font-size:11px}.visual-showcase .visual-reality{grid-template-columns:1.2fr .8fr;display:grid}.visual-showcase .visual-reality section,.visual-showcase .visual-reality aside{padding:30px}.visual-showcase .visual-reality section{border:0}.visual-showcase .visual-reality button{border:0;border-bottom:1px solid var(--line-soft);background:var(--white);width:100%;color:var(--ink);cursor:pointer;text-align:left;align-items:center;gap:10px;padding:13px 0;font:400 13px/1.45 IBM Plex Sans,sans-serif;display:flex}.visual-showcase .visual-reality button span{width:22px;height:22px;color:var(--white);border:1px solid #bac5cd;border-radius:5px;flex:none;place-items:center;display:grid}.visual-showcase .visual-reality button[aria-pressed=true] span{border-color:var(--amber);background:var(--amber);color:var(--ink)}.visual-showcase .visual-reality aside{background:var(--ink);color:var(--white)}.visual-showcase .visual-result-icon{background:var(--amber);width:44px;height:44px;color:var(--ink);border-radius:50%;place-items:center;margin:20px 0;display:grid}.visual-showcase .visual-reality aside>p{color:#c8d5df;margin-top:8px;font-size:12px;line-height:1.5}.visual-showcase .visual-risk-bars{gap:11px;margin-top:22px;display:grid}.visual-showcase .visual-risk-bars label{color:#c8d5df;font-size:10px}.visual-showcase .visual-risk-bars label>i{background:#ffffff26;border-radius:999px;height:5px;margin-top:5px;display:block;overflow:hidden}.visual-showcase .visual-risk-bars label>i span{border-radius:inherit;background:var(--amber);width:20%;height:100%;transition:width .2s;display:block}.visual-showcase .visual-risk-bars label>i span.is-high{width:85%}.visual-showcase .visual-reality aside footer{border-top:1px solid #ffffff21;margin-top:28px;padding-top:16px}.visual-showcase .visual-reality aside footer b{margin-top:4px;font-size:13px;display:block}.visual-showcase .visual-workshop{grid-template-columns:1fr 270px;display:grid}.visual-showcase .visual-workshop article{padding:30px}.visual-showcase .visual-code-window{color:var(--white);background:#13243a;border-radius:13px;overflow:hidden}.visual-showcase .visual-code-window header{background:#21374e;align-items:center;gap:6px;height:36px;padding:0 13px;display:flex}.visual-showcase .visual-code-window header i{background:#ef7165;border-radius:50%;width:7px;height:7px}.visual-showcase .visual-code-window header i:nth-child(2){background:#edb24d}.visual-showcase .visual-code-window header i:nth-child(3){background:#4fc18b}.visual-showcase .visual-code-window header small{margin-left:8px}.visual-showcase .visual-code-window>div{gap:7px;padding:19px;display:grid}.visual-showcase .visual-code-window span{border-radius:4px;width:max-content;max-width:100%;padding:7px 9px;font:10px IBM Plex Mono,monospace}.visual-showcase .visual-code-window .purple{background:#7655b7}.visual-showcase .visual-code-window .code-blue{background:#2878bb}.visual-showcase .visual-code-window .code-orange{background:#d36b38}.visual-showcase .visual-code-window .code-green{background:#3f9074}.visual-showcase .visual-code-window .indent{margin-left:20px}.visual-showcase .visual-workshop article>mark{margin-top:18px}.visual-showcase .visual-workshop article>h4{margin-top:12px;font-size:1.3rem}.visual-showcase .visual-workshop article>p{color:var(--ink-soft);margin-top:7px;font-size:13px;line-height:1.5}.visual-showcase .visual-workshop aside{background:var(--paper);padding:28px 20px}.visual-showcase .visual-workshop aside p{background:var(--white);border-radius:9px;align-items:center;gap:10px;margin-top:12px;padding:12px;font-size:11px;display:flex}.visual-showcase .visual-workshop aside p span{background:var(--amber-tint);width:28px;height:28px;color:var(--amber-deep);border-radius:7px;flex:0 0 28px;place-items:center;display:grid}.visual-showcase .visual-workshop-meta{flex-wrap:wrap;gap:8px;margin-top:18px;display:flex}.visual-showcase .visual-workshop-meta span{background:var(--paper);color:var(--ink-faint);border-radius:6px;padding:6px 8px;font-family:IBM Plex Mono,monospace;font-size:9px}@media (width<=820px){.showcase-introduction{grid-template-columns:1fr;gap:18px}.showcase-tabs{margin-right:-28px;padding-right:28px}.showcase-panel,.visual-showcase.is-enhanced .showcase-panel+.showcase-panel{padding:26px}.visual-showcase .visual-split,.visual-showcase .visual-columns,.visual-showcase .visual-cost,.visual-showcase .visual-security,.visual-showcase .visual-documentation,.visual-showcase .visual-reality,.visual-showcase .visual-workshop{grid-template-columns:1fr}.visual-showcase .visual-compare{grid-template-columns:1fr;gap:14px}.visual-showcase .visual-arrow{transform:rotate(90deg)}.visual-showcase .visual-cost>section{min-height:230px}.showcase-foot{flex-direction:column;align-items:flex-start}}@media (width<=480px){.showcase-tabs{margin-right:-20px;padding-right:20px}.showcase-shell{border-radius:16px;margin-left:-8px;margin-right:-8px}.showcase-panel,.visual-showcase.is-enhanced .showcase-panel+.showcase-panel{padding:20px 16px 22px}.visual-showcase .visual-heading{grid-template-columns:38px 1fr;gap:12px}.visual-showcase .visual-heading>span{width:36px;height:36px}.visual-showcase .visual-heading h3{font-size:1.55rem}.visual-showcase .visual-card,.visual-showcase .visual-tree,.visual-showcase .visual-checkcard{padding:18px}.visual-showcase .visual-card>header{align-items:flex-start}.visual-showcase .visual-split{gap:20px}.visual-showcase .visual-checkcard header{grid-template-columns:auto 1fr}.visual-showcase .visual-checkcard header mark{grid-column:2;justify-self:start}.visual-showcase .visual-cost>div{padding:13px}.visual-showcase .visual-cost article{grid-template-columns:32px 1fr}.visual-showcase .visual-cost article mark{grid-column:2;justify-self:start}.visual-showcase .visual-documentation article{padding:21px}.visual-showcase .visual-documentation dl div{grid-template-columns:1fr;gap:4px}.visual-showcase .visual-support>footer{display:grid}.visual-showcase .visual-event{grid-template-columns:48px 28px 1fr;gap:8px}.visual-showcase .visual-workshop article,.visual-showcase .visual-reality section,.visual-showcase .visual-reality aside{padding:21px}.showcase-foot .btn{justify-content:center;width:100%}}
