.preview-screen{position:relative;display:block;width:100%;aspect-ratio:1200/860;overflow:hidden;background:#f7f6f2;isolation:isolate;container-type:inline-size}.preview-screen iframe{display:block;width:1200px;height:860px;border:0;transform:scale(var(--preview-scale,.4));transform-origin:0 0;max-width:none;position:absolute;inset:0;pointer-events:none;background:#f7f6f2}.preview-screen[data-preview-width="390"]{aspect-ratio:390/844}.preview-screen[data-preview-width="390"] iframe{width:390px;height:844px}.project-browser>.preview-screen{border-radius:4px}.website-project .project-browser{padding:12px 12px 0;background:#1a2630;border:1px solid #556573;border-radius:12px 12px 5px 5px}.website-project .project-browser-bar{padding:0 2px 12px;font-size:.59rem}.website-project .project-browser:before{content:'';position:absolute;left:-3%;right:-3%;bottom:-10px;height:10px;background:linear-gradient(#80929e,#45555e);border-radius:1px 1px 50% 50%;z-index:2}.website-project .project-browser:after{display:none}.website-project:nth-child(2) .project-browser{background:#182738;border-color:#4b6384}.project-mobile,.comparison-phone{height:auto!important;aspect-ratio:390/844;min-height:0;max-height:none;background:#0c1721;border:4px solid #536371;padding:0;border-radius:18px;overflow:hidden}.website-project .project-mobile{width:26%;right:-7px;bottom:-13px;transform:none!important}.project-mobile .preview-screen,.comparison-phone .preview-screen{height:100%;aspect-ratio:auto;border-radius:12px}.project-mobile:before,.comparison-phone:before{width:28%;left:36%;height:4px;top:3px;background:#14212a;border-radius:20px}.website-project .project-meta{margin-top:35px}.comparison-phone{width:18%;right:4%;bottom:25px;border-radius:20px}.upgraded-comparison .after{padding:0}.upgraded-comparison .after>.preview-screen{height:100%;aspect-ratio:auto}.hero .browser-window,.hero .showcase:hover .browser-window{transform:none!important;animation:none!important;transition:none!important;will-change:auto!important}.hero .showcase,.hero .floating-note,.hero .demo-nav,.hero .demo-hero,.hero .demo-overlay,.hero .demo-bottom{animation:none!important;transform:none!important;transition:none!important}.hero .browser-window:after{display:none!important}.hero .floating-note{left:-10px;bottom:0}.hero .showcase{padding-bottom:25px}.hero .browser-window>.preview-screen{aspect-ratio:1200/860}.hero .browser-bar{font-size:.55rem}.hero .showcase-foot{margin-top:25px}.hero .floating-note{display:none}.hero .browser-window{box-shadow:0 25px 60px #0006}.hero .showcase-label{margin-left:0}
#demo-dialog{width:min(1160px,calc(100% - 24px));max-height:94svh;padding:0}#demo-dialog .dialog-close{top:12px;right:13px;z-index:5}.concept-toolbar{display:flex;gap:20px;align-items:center;justify-content:space-between;padding:17px 60px 17px 22px;background:#122434;position:sticky;top:0;z-index:4;border-bottom:1px solid #49687d55}.concept-toolbar h2{font-size:1.1rem;letter-spacing:-.03em}.concept-toolbar p{font-size:.65rem;margin-top:5px}.concept-switch{display:flex;gap:5px;background:#081723;padding:4px;border:1px solid #4c677d55;border-radius:8px}.concept-switch button{background:none;border-radius:5px;color:#aec1cf;font-size:.75rem;padding:9px 13px;min-height:36px}.concept-switch button[aria-pressed="true"]{background:#e9f0f4;color:#132432}.concept-full{font-size:.75rem;color:#bed0de}.concept-display{padding:18px;background:radial-gradient(ellipse at 50% 0,#24475d,#08141e);display:flex;justify-content:center}.concept-display .preview-screen{width:100%;max-width:1200px;border:1px solid #7190a44d;border-radius:6px;box-shadow:0 20px 40px #0004}.concept-display .preview-screen[data-preview-width="390"]{max-width:390px;border:7px solid #425567;border-radius:24px;box-sizing:content-box}.concept-display iframe{pointer-events:auto}.concept-detail-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px;background:#10212e}.concept-detail-foot p{font-size:.8rem;max-width:580px}.concept-detail-foot .button{font-size:.8rem;white-space:nowrap;padding:13px 18px}.demo-detail-body{padding:25px}.comparison .preview-screen iframe{pointer-events:none}
@media(max-width:760px){.website-project .project-browser{padding:8px 8px 0}.website-project .project-browser-bar{font-size:.47rem;padding-bottom:9px}.website-project .project-mobile{width:27%;right:-3px;bottom:-10px;border-width:3px;border-radius:14px}.project-mobile .preview-screen{border-radius:10px}.website-project .project-meta{margin-top:29px}.comparison-phone{width:28%;right:12px;bottom:23px;border-width:3px;border-radius:14px}.concept-toolbar{padding:16px 48px 12px 14px;flex-wrap:wrap;gap:12px}.concept-toolbar h2{font-size:1rem}.concept-toolbar p{font-size:.6rem}.concept-switch{order:3;flex:1}.concept-switch button{flex:1;font-size:.72rem}.concept-full{font-size:.67rem}.concept-display{padding:8px}.concept-display .preview-screen[data-preview-width="390"]{border-width:4px;border-radius:15px}.concept-detail-foot{padding:17px;flex-direction:column;align-items:stretch;gap:15px}.concept-detail-foot p{font-size:.75rem}.concept-detail-foot .button{white-space:normal}.hero .browser-window>.preview-screen{aspect-ratio:1200/860}.hero .showcase-foot{font-size:.44rem}.hero .showcase{padding-bottom:0}}
#demo-dialog>.dialog-close{position:sticky;top:12px;float:right;margin:12px 12px -48px 0;z-index:8}