.demo-frame{position:absolute;inset:0;overflow:hidden;background:#f7f8fa}.demo-frame iframe{width:1280px;height:800px;border:0;transform-origin:top left;pointer-events:none}.demo-hit{position:absolute;inset:0;z-index:8}.demo-hit:focus-visible{outline:3px solid #b4ff00;outline-offset:-4px}
.notebook-viewport{position:relative;padding:12px 13% 44px 0}.notebook__chassis{border-radius:18px 18px 6px 6px;background:linear-gradient(140deg,#44484a,#191b1e 32%,#303438);border-color:#62676a;padding:16px 9px 10px}.notebook__base{margin:0 -3%;background:linear-gradient(#72777a,#303337 42%,#17191b);height:12px}.showcase-phone{position:absolute;right:0;bottom:6px;width:25%;aspect-ratio:9/19.5;padding:6px;border:1px solid #868b8d;border-radius:25px;background:linear-gradient(135deg,#65696c,#151618 40%,#42464a);box-shadow:-16px 20px 45px #0009,inset 0 0 0 2px #292c30;transform:rotateY(-5deg) rotateX(2deg);transition:transform .4s ease;z-index:4}.showcase-phone__screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:19px;background:#0a0a0a}.showcase-phone__island{position:absolute;z-index:9;top:10px;left:34%;width:32%;height:8px;border-radius:8px;background:#080808;pointer-events:none}.phone-slide{position:absolute;inset:0;visibility:hidden;opacity:0;transition:opacity .5s}.phone-slide.is-active{visibility:visible;opacity:1}.showcase-project{display:block;margin:12px 0 0;color:#d3d6d0;font-size:14px;text-decoration:none;text-align:center}.showcase-project:hover{color:var(--lime)}
@media(max-width:600px){.notebook-viewport{padding:8px 16% 32px 0}.showcase-phone{width:27%;padding:4px;border-radius:17px}.showcase-phone__screen{border-radius:13px}.showcase-phone__island{top:7px;height:5px}.notebook__chassis{padding:12px 5px 5px}}
@media(prefers-reduced-motion:reduce){.showcase-phone,.phone-slide{transition:none}}
.showcase-nav__tabs{grid-template-columns:repeat(5,1fr)}.showcase-tab{min-height:36px;font:600 12px var(--font-mono)}