.showcase-shell{display:grid;gap:22px;min-width:0}
.showcase-status{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:21px 27px;border-color:#f7d5bc;background:linear-gradient(110deg,#fff7f1,#fff 72%)}
.showcase-status>div{display:flex;align-items:center;gap:16px;min-width:0}
.showcase-status>div .showcase-status-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;border-radius:12px;background:#ffeadc;color:var(--orange-dark);font-size:21px}.showcase-status-icon i{display:block;line-height:1;text-align:center}
.showcase-status strong,.showcase-status span{display:block}.showcase-status strong{color:var(--ink);font-size:17px}.showcase-status div div span{margin-top:3px;color:var(--muted);font-size:14px}.showcase-status>a{white-space:nowrap;color:var(--orange-dark);font-weight:800}.showcase-status>a i{margin-left:5px;font-size:12px}
.showcase-section{display:grid;grid-template-columns:minmax(190px,260px) minmax(0,1fr);gap:42px;padding:37px 40px;min-width:0}
.showcase-section-heading span{display:block;margin-bottom:14px;color:var(--orange-dark);font-size:11px;font-weight:800;letter-spacing:.16em}.showcase-section-heading h2{margin:0;font-size:clamp(27px,3vw,39px);line-height:1.1}
.showcase-section-content{min-width:0}.showcase-section-content>p:first-child{margin-top:0}.showcase-section-content .marketing-editable{max-width:none}.showcase-lead{font-size:18px;line-height:1.65;color:var(--ink)}
.showcase-section-content pre{max-width:100%;overflow-x:auto;margin:16px 0 22px;padding:20px 22px;border-radius:12px;background:#16222c;color:#e9f2f7;font:14px/1.6 Consolas,Monaco,monospace;white-space:pre}.showcase-section-content pre code{font:inherit;color:inherit}.showcase-section-content ol{padding-left:24px}.showcase-section-content li{margin:8px 0}.showcase-section-content>p:first-child{font-size:18px;line-height:1.65;color:var(--ink)}
.showcase-use-list{display:grid;gap:12px;padding:0;margin:0;list-style:none}.showcase-use-list li{position:relative;padding:15px 18px 15px 47px;border:1px solid var(--line);border-radius:12px;background:#fafbfd;line-height:1.5}.showcase-use-list li:before{content:'✓';position:absolute;left:18px;top:14px;color:var(--orange-dark);font-weight:900}
.showcase-system-previews{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.showcase-system-previews .showcase-preview img{height:230px}
.showcase-section-content h3{margin:30px 0 16px;font-size:24px}.showcase-steps{counter-reset:showcase;display:grid;gap:10px;list-style:none;padding:0;margin:0 0 27px}.showcase-steps li{counter-increment:showcase;display:grid;grid-template-columns:34px 1fr;align-items:start;gap:12px;padding:13px 15px;border:1px solid var(--line);border-radius:11px;background:#fff;line-height:1.5}.showcase-steps li:before{content:counter(showcase,decimal-leading-zero);display:grid;place-items:center;width:31px;height:31px;border-radius:8px;background:#fff1e6;color:var(--orange-dark);font-size:12px;font-weight:900}
.showcase-code-heading{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:24px}.showcase-code-heading h3{margin:0 0 11px}.showcase-code-heading span{overflow-wrap:anywhere;color:var(--muted);font:12px/1.5 Consolas,monospace}.showcase-code{max-width:100%;overflow-x:auto;margin:0 0 18px;padding:22px;border-radius:12px;background:#16222c;color:#e9f2f7;font:14px/1.6 Consolas,Monaco,monospace;white-space:pre}.showcase-code code{font:inherit;color:inherit}.showcase-note{padding:15px 18px;border-left:3px solid var(--orange);background:#fff6ef;border-radius:0 10px 10px 0}.showcase-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.showcase-preview{margin:20px 0 0;border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff}.showcase-preview a{display:block;cursor:zoom-in}.showcase-preview img{display:block;width:100%;max-height:520px;object-fit:cover;object-position:top}.showcase-preview figcaption{padding:12px 16px;color:var(--muted);font-size:13px}
@media(max-width:820px){.showcase-section{grid-template-columns:1fr;gap:20px;padding:28px}.showcase-status{align-items:flex-start;flex-direction:column}.showcase-status>a{white-space:normal}}
@media(max-width:520px){.showcase-section{padding:21px}.showcase-status{padding:18px}.showcase-code{padding:15px;font-size:12px}.showcase-links .button{width:100%;justify-content:center}.showcase-system-previews{grid-template-columns:1fr}}