@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap";*{box-sizing:border-box}html,body,#root{color:#1f2937;background:#f7f8fb;min-height:100%;margin:0;font-family:Manrope,PingFang SC,sans-serif}.showcase-page{min-height:100vh}.showcase-page header{background:#f1f3f7;justify-content:space-between;align-items:center;max-width:1180px;height:68px;margin:auto;padding:0 24px;display:flex}.showcase-brand{color:#202838;align-items:center;gap:10px;font-weight:800;text-decoration:none;display:flex}.showcase-brand span{color:#fff;background:#5963c8;border-radius:9px;place-items:center;width:34px;height:34px;display:grid}.showcase-page header nav{align-items:center;gap:18px;display:flex}.showcase-page header nav>a{color:#596579;font-size:13px;font-weight:700;text-decoration:none}.showcase-page header nav>div{background:#fff;border:1px solid #dfe3e9;border-radius:9px;padding:3px}.showcase-page button{color:#667184;cursor:pointer;font:inherit;background:0 0;border:0;border-radius:6px;padding:6px 9px}.showcase-page button.active{color:#4e58bb;background:#eef0ff}.showcase-page main{max-width:1180px;margin:auto;padding:64px 24px 88px}.showcase-page h1{letter-spacing:-2.5px;margin:0;font-size:clamp(36px,5vw,58px);line-height:1.05}.showcase-intro{color:#687487;max-width:720px;margin:20px 0 42px;font-size:15px;line-height:1.65}.showcase-grid{grid-template-columns:repeat(12,1fr);gap:34px 24px;display:grid}.showcase-grid>a{color:inherit;grid-column:span 4;text-decoration:none}.showcase-grid>a:first-child,.showcase-grid>a:nth-child(2){grid-column:span 6}.showcase-grid figure,.case-inspector figure{background-color:#f6f7f9;background-image:linear-gradient(45deg,#e5e8ed 25%,#0000 25%),linear-gradient(-45deg,#e5e8ed 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e5e8ed 75%),linear-gradient(-45deg,#0000 75%,#e5e8ed 75%);background-position:0 0,0 9px,9px -9px,-9px 0;background-size:18px 18px;margin:0;overflow:hidden}.showcase-grid figure{border-radius:10px;height:320px}.showcase-grid img{object-fit:contain;width:100%;height:100%;display:block}.showcase-grid>a:hover figure img{transform:scale(1.025)}.showcase-grid figure img{transition:transform .45s cubic-bezier(.22,1,.36,1)}.showcase-grid small,.detail-heading small{color:#5963c8;margin-top:16px;font-size:13px;font-weight:700;display:block}.showcase-grid h2{margin:6px 0;font-size:19px}.showcase-grid p,.detail-heading p{color:#303948;max-width:60ch;margin:0;font-size:16px;line-height:1.6}.showcase-grid span{color:#4e58b7;align-items:center;gap:7px;margin-top:12px;font-size:13px;font-weight:800;display:flex}.showcase-back{color:#445064;align-items:center;gap:7px;margin-bottom:34px;font-size:13px;font-weight:700;text-decoration:none;display:inline-flex}.detail-heading{justify-content:space-between;align-items:end;gap:40px;margin-bottom:36px;display:flex}.detail-heading>div{max-width:760px}.detail-heading h1{margin:7px 0 14px}.detail-heading ul{color:#4e596c;flex-wrap:wrap;gap:7px 20px;margin:15px 0 0;padding:0;font-size:13px;list-style:none;display:flex}.detail-actions>a:last-child,.showcase-cta>a:first-of-type{white-space:nowrap;color:#fff;background:#5963c8;border-radius:8px;align-items:center;gap:8px;padding:12px 17px;font-size:13px;font-weight:800;text-decoration:none;display:inline-flex}.case-inspector{background:#eef1f6;border:1px solid #dfe4ec;border-radius:12px;grid-template-columns:minmax(0,1fr) 280px;min-height:610px;display:grid;overflow:hidden}.compare-panel{flex-direction:column;min-width:0;padding:14px;display:flex}.compare-head{justify-content:space-between;align-items:start;gap:12px;min-height:42px;display:flex}.compare-head b,.compare-head span{display:block}.compare-head b{font-size:12px}.compare-head span{color:#4e596b;margin-top:3px;font-size:13px}.compare-head>div:last-child{gap:4px;display:flex}.compare-head button,.layers-title button{align-items:center;gap:5px;font-size:13px;font-weight:700;display:flex}.compare-head button:hover{background:#fff}.compare-stage{background-color:#f8f9fb;background-image:linear-gradient(45deg,#e4e7ed 25%,#0000 25%),linear-gradient(-45deg,#e4e7ed 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e4e7ed 75%),linear-gradient(-45deg,#0000 75%,#e4e7ed 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px;flex:1;place-items:center;min-height:500px;display:grid;position:relative;overflow:hidden}.source-view,.output-view{place-items:center;display:grid;position:absolute;inset:0}.source-view img,.output-view img{object-fit:contain;grid-area:1/1;width:100%;height:100%}.source-view span,.output-view span{color:#fff;background:#202735c7;border-radius:5px;padding:5px 8px;font-size:10px;position:absolute;top:10px}.source-view span{left:10px}.output-view span{right:10px}.output-view{background:inherit}.compare-line{z-index:4;background:#fff;width:2px;position:absolute;top:0;bottom:0;box-shadow:0 0 0 1px #36405540}.compare-line:after{content:"↔";color:#fff;background:#5963c8;border-radius:50%;place-items:center;width:32px;height:32px;font-size:15px;font-style:normal;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.compare-stage>input{z-index:5;opacity:0;cursor:ew-resize;width:100%;height:100%;position:absolute;inset:0}.case-inspector.exploded .source-view{display:none}.case-inspector.exploded .output-view{clip-path:none!important}.case-inspector.exploded .case-layer{max-width:84%;max-height:84%;transition:transform .4s}.case-inspector.exploded .case-layer.layer-0{transform:translate(-32px,-22px)}.case-inspector.exploded .case-layer.layer-1{transform:translate(28px,22px)}.case-inspector.exploded .case-layer.layer-2{transform:translate(46px,-28px)}.case-inspector.exploded .case-layer.layer-3{transform:translate(-40px,30px)}.case-inspector>aside{background:#fff;padding:14px 12px}.layers-title{justify-content:space-between;align-items:start;height:42px;display:flex}.layers-title h2{margin:0;font-size:13px}.layers-title span{color:#515c6e;font-size:13px}.layers-title button{margin-top:0}.case-inspector aside article{cursor:pointer;border:1px solid #e5e8ee;border-radius:8px;grid-template-columns:54px minmax(0,1fr) 28px;align-items:center;gap:8px;min-height:82px;margin-bottom:7px;padding:7px;display:grid}.case-inspector aside article:hover{border-color:#cdd3e2}.case-inspector aside article.active{background:#f0f1ff;border-color:#6c75d0}.case-inspector aside article figure{border-radius:5px;width:54px;height:62px}.case-inspector aside article img{object-fit:contain;width:100%;height:100%}.case-inspector aside h3{margin:0;font-size:12px}.case-inspector aside article p{color:#4f596a;margin:4px 0 0;font-size:13px;line-height:1.35}.case-inspector aside article>button{place-items:center;width:28px;height:28px;padding:0;display:grid}.case-inspector aside article>button:hover{color:#4d57b8;background:#e9ebfa}.case-note{color:#404b5d;margin:14px 3px 0;font-size:13px;line-height:1.55}.showcase-cta{color:#fff;background:#222736;border-radius:12px;margin-top:56px;padding:36px}.showcase-cta h2{margin:0 0 18px;font-size:25px}.showcase-cta>a{margin-right:12px}.showcase-cta>a:last-child{color:#c4c9d6;font-size:12px;text-decoration:none}.showcase-page footer{color:#505b6c;background:#f1f3f7;max-width:1180px;margin:auto;padding:26px 24px 40px;font-size:13px}.showcase-page footer a{color:#697486;margin-left:18px;text-decoration:none}@media (width<=900px){.showcase-page main{padding-top:48px}.showcase-grid{display:block}.showcase-grid>a{margin-bottom:34px;display:block}.showcase-grid figure{height:min(90vw,480px)}.detail-heading{display:block}.detail-actions{margin-top:22px}.case-inspector{grid-template-columns:1fr}.case-inspector>aside{background:#fff;grid-template-columns:1fr 1fr;gap:8px;display:grid}.layers-title,.case-note{grid-column:1/-1}.case-inspector aside article{margin:0}.showcase-page h1{letter-spacing:-2px}}@media (width<=560px){.showcase-page header{height:64px;padding:0 16px}.showcase-page header nav>a{display:none}.showcase-page main{padding:42px 16px 70px}.showcase-page h1{font-size:34px}.detail-heading ul{display:block}.detail-heading li{margin-top:5px}.case-inspector{min-height:0}.compare-panel{padding:9px}.compare-head{min-height:70px;display:block}.compare-head>div:last-child{margin-top:7px}.compare-stage{min-height:420px}.case-inspector>aside{grid-template-columns:1fr;padding:10px}.layers-title,.case-note{grid-column:auto}.case-inspector aside article{grid-template-columns:48px minmax(0,1fr) 40px;min-height:72px}.case-inspector aside article figure{width:48px;height:54px}.showcase-cta{padding:26px 20px}.showcase-cta>a{width:max-content;margin:9px 0;display:flex!important}}@media (prefers-reduced-motion:reduce){.showcase-page *{scroll-behavior:auto!important;transition:none!important}}.case-inspector[data-ui] .case-inspector-separator{border:0}.detail-actions{flex-direction:column;align-items:flex-end;gap:10px;display:flex}.detail-actions .showcase-back{margin:0}.sr-only{clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}@media (width<=900px){.detail-actions{align-items:flex-start}}