.design-showcase{background:#183f59;color:#fff;background-image:radial-gradient(ellipse at 95% 0%,#6254ac 0,transparent 55%),linear-gradient(125deg,#133f52,#256f76);isolation:isolate}.design-showcase:before{content:'';position:absolute;width:420px;height:420px;right:-150px;bottom:-240px;border-radius:50%;background:#ef705c;filter:blur(2px);z-index:-1}.showcase-nav,.showcase-bottom{border-color:#ffffff40}.showcase-orbit{background:#ffbc57;box-shadow:inset -85px -10px 0 #ef705c,inset 50px 20px 0 #65c9be,0 20px 70px #071b4140}.showcase-content h2{font-size:clamp(48px,7vw,88px);text-shadow:0 3px 25px #15334370}.showcase-content h2 em{color:#ffd38a}.showcase-content{padding-bottom:80px}.play-section{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:50px;padding-bottom:65px;border-top:1px solid #eee;align-items:center}.play-section>div{min-width:0}.play-section p:not(.eyebrow){font-size:13px;color:#777}.speed-label{display:flex;justify-content:space-between;font-size:12px;margin-top:24px}.play-section input[type=range]{width:100%;accent-color:#3d777a;min-height:36px}.play-button{display:block;background:#303030;color:white;border:0;border-radius:4px;padding:12px 20px;margin-top:20px;font-size:12px}.play-button:hover{background:#3d777a}.play-button:disabled{opacity:.6;cursor:wait}.orbit-stage{height:320px;background:#edf4f3;border-radius:8px;position:relative;display:grid;place-items:center;overflow:hidden}.orbit-track{width:220px;height:220px;border:1px dashed #8db5b3;border-radius:50%}.orbit-center{position:absolute;width:78px;height:78px;background:#3d777a;color:white;border-radius:50%;display:grid;place-items:center;font:500 32px Georgia,serif;box-shadow:0 10px 30px #3d777a30}.orbit-spinner{--orbit-duration:4s;position:absolute;width:220px;height:220px;animation:demo-orbit var(--orbit-duration) linear infinite}.orbit-spinner span{position:absolute;top:-11px;left:calc(50% - 11px);width:22px;height:22px;background:#ef705c;border:4px solid white;border-radius:50%;box-shadow:0 3px 12px #0002}.orbit-caption{position:absolute;bottom:15px;font-size:8px;letter-spacing:2px;color:#537879}.demo-terminal{background:#202c33;border-radius:8px;color:#abd6c5;overflow:hidden;min-height:320px}.terminal-bar{padding:14px 20px;background:#2d3b44;font:11px Consolas,monospace;color:#adbcc6}.terminal-bar span{color:#dfad78;margin-right:22px}.demo-terminal pre{padding:20px;margin:0;font:12px/2 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;min-height:190px}.terminal-caret{animation:demo-blink 1s steps(2) infinite}.terminal-result{margin:0 20px 20px;padding:18px;background:#324a4d;border:1px solid #527b71;border-radius:5px}.terminal-result[hidden]{display:none}.terminal-result>span{color:#b5e7cd;margin-right:10px}.terminal-result p{color:#c1d5d3!important;font-size:11px!important;margin-bottom:0}#terminal-status{font-size:11px}.code-showcase>div{min-width:0}.code-editor pre{overflow-wrap:anywhere}.project-tags{max-width:100%}.page-heading h1{overflow-wrap:anywhere}
@keyframes demo-orbit{to{transform:rotate(360deg)}}@keyframes demo-blink{to{opacity:0}}
@media(max-width:650px){.play-section{grid-template-columns:1fr;gap:25px;padding-top:35px;padding-bottom:40px}.orbit-stage{height:280px}.showcase-content h2{font-size:48px;letter-spacing:-2px}.showcase-orbit{width:180px;height:180px;top:75px;right:-45px;box-shadow:inset -50px -8px 0 #ef705c,inset 30px 12px 0 #65c9be}.showcase-nav{gap:15px}.showcase-bottom{gap:12px}.play-button{min-height:44px}.demo-options button{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.orbit-spinner,.terminal-caret{animation:none}}