.showcase{padding:72px 0;background:#eef1f2;color:#122029}.showcase h2{font-size:2.5rem;line-height:1.12;margin:0 0 20px}.showcase h3{font-size:1.3rem;margin:32px 0 16px}.eyebrow{font-size:.75rem;text-transform:uppercase;font-weight:800;color:#075fca}.showcase-note{max-width:740px;color:#52626b;margin:14px 0 26px}.live-demo{margin-top:32px}.live-viewport{position:relative;width:100%;height:540px;overflow:hidden;background:#b5d3d8}.live-viewport canvas{display:block;width:100%;height:100%;touch-action:pan-y}.live-poster{width:100%;height:100%;object-fit:cover}.is-running .live-poster{display:none}.launch-demo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#84bdff;color:#102137;border:0;padding:18px 24px;font-weight:800;font-size:1rem;cursor:pointer;max-width:90%}.live-toolbar{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#13252b;color:#fff;padding:20px}.live-toolbar[hidden]{display:none}.live-toolbar label{display:grid;gap:5px;font-size:.75rem;min-width:110px;flex:1}.live-toolbar output{float:right}.live-toolbar input[type=number],.live-toolbar select{width:100%;max-width:160px;padding:7px;border:1px solid #8da6a4;background:#fff;color:#142a29}.live-toolbar input[type=range]{width:130px;max-width:100%;accent-color:#84bdff}.live-toolbar button,.map-toolbar button{padding:10px 12px;background:transparent;color:inherit;border:1px solid #738f92;cursor:pointer;font:inherit;font-size:.8rem}.live-toolbar .check{display:flex;min-width:auto;flex:0;align-items:center}.live-status{font-size:.75rem;color:#50616a}.showcase-pair,.media-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.native-film{margin:0}.native-film video{width:100%;aspect-ratio:16/9;background:#101c20;display:block}.native-film figcaption{font-size:.8rem;color:#52626b;padding:10px 0}.inspect-link{display:block;position:relative}.inspect-link img{width:100%;height:auto}.inspect-link span{position:absolute;bottom:12px;right:12px;background:#13252b;color:#fff;padding:6px 12px;font-size:.75rem}.source-note{margin-top:28px;border-top:1px solid #b4c4c6;padding-top:20px;font-size:.85rem;max-width:850px}.source-note summary{cursor:pointer;font-weight:700}.shader-compare{position:relative;aspect-ratio:1/1;overflow:hidden;background:#1c212a}.shader-compare>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.shader-compare .compare-after{clip-path:inset(0 0 0 var(--split,50%))}.compare-divider{position:absolute;left:var(--split,50%);top:0;bottom:60px;width:2px;background:white}.compare-label{position:absolute;top:16px;left:16px;background:#172536db;color:white;font-size:.7rem;padding:5px 8px}.after-label{left:auto;right:16px}.compare-control{position:absolute;bottom:0;left:0;right:0;background:#122029e8;color:white;padding:10px 18px;display:flex;gap:20px;align-items:center;font-size:.75rem}.compare-control input{min-width:0;flex:1;accent-color:#84bdff}.map-toolbar{display:flex;gap:20px;margin:25px 0 15px}.map-toolbar label{display:flex;align-items:center;gap:12px;font-size:.85rem}.map-viewport{overflow:auto;max-height:600px;background:#2c5c77;scrollbar-color:#738f92 #13252b}.map-viewport img{max-width:none;width:100%;display:block}.product-tour{margin-top:30px}.tour-screen{position:relative;overflow:hidden;background:#fff}.tour-screen img{width:100%;display:block}.tour-focus{position:absolute;border:3px solid #f4b544;box-shadow:0 0 0 1500px #06151c30;transition:all .35s;pointer-events:none}.tour-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.tour-steps button{font:inherit;text-align:left;padding:20px;background:#fff;border:1px solid #c2cfd0;cursor:pointer;color:#15252c;border-top:4px solid transparent}.tour-steps button[aria-pressed=true]{border-top-color:#0877ed;background:#e5f0ff}.tour-steps strong{display:block;font-size:1rem}.tour-steps span{display:block;font-size:.8rem;line-height:1.5;margin-top:7px}.image-dialog{max-width:96vw;width:1400px;max-height:94dvh;border:0;padding:45px 12px 12px;background:#112329;color:white}.image-dialog::backdrop{background:#071117e8}.image-dialog img{max-height:calc(94dvh - 65px);width:100%;object-fit:contain}.image-dialog button{position:absolute;right:12px;top:8px;background:transparent;color:white;border:1px solid #728d91;padding:5px 15px;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e29832;outline-offset:4px}
@media(max-width:760px){.showcase{padding:45px 0}.showcase h2{font-size:2rem}.live-viewport{height:360px}.live-toolbar{gap:14px;padding:14px}.showcase-pair,.media-grid,.tour-steps{grid-template-columns:1fr}.tour-steps button{padding:14px}.tour-steps span{margin-top:3px}.map-viewport{max-height:380px}.source-note{font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.tour-focus{transition:none}}
.launch-demo{background:#0069de;color:white}.showcase .button{display:inline-flex;white-space:normal;line-height:1.5}.showcase-pair p{max-width:600px}.showcase> .shell> .native-film{margin-top:30px}