:root{--preview-header-height: 60px}body{margin:0;overflow:hidden;background-color:var(--color-light)}.header-bar{background-color:var(--color-light);border-bottom:1px solid var(--color-border);gap:12px;height:var(--preview-header-height);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.preview-header-left,.preview-header-actions{min-width:0}.preview-header-left{flex:1 1 0}.preview-header-left .navbar-brand{flex:0 0 auto}.preview-header-left .navbar-brand img{max-width:clamp(120px,18vw,190px);height:auto}.preview-explore-link{min-width:0}.preview-explore-link span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-device-switcher{flex:0 0 auto}.preview-header-actions{flex:1 1 0;justify-content:flex-end}.preview-cta-short,.preview-mobile-logo,.preview-mobile-more-link{display:none}.preview-stage{display:flex;align-items:stretch;justify-content:center;height:calc(100vh - var(--preview-header-height, 60px));margin-top:var(--preview-header-height, 60px);width:100%;overflow:hidden;background-color:var(--color-light);transition:background-color .3s ease}.preview-stage.framed{align-items:flex-start;padding:24px;background-color:var(--color-body)}.preview-frame{flex:1 1 auto;height:100%;width:100%;overflow:hidden;background-color:var(--color-dark-light);transition:all .3s ease-in-out}.preview-frame iframe{border-radius:inherit}.preview-frame.tablet{flex:0 0 auto;margin-top:-15px;height:1024px;max-height:calc(100vh - 130px);width:768px;border:15px solid var(--color-dark-light);border-radius:.5rem;box-shadow:0 1px 3px #0307121f,0 1px 2px #03071214}.preview-frame.mobile{flex:0 0 auto;margin-top:-10px;height:740px;max-height:calc(100vh - 120px);width:375px;border:10px solid var(--color-dark-light);border-radius:.5rem;box-shadow:0 1px 3px #0307121f,0 1px 2px #03071214}@media(max-width:1024px){.header-bar{padding:0 12px}.preview-header-left{gap:10px}.preview-header-left .navbar-brand img{max-width:150px}.preview-header-actions{gap:8px}.preview-cta{padding-left:12px;padding-right:12px}}@media(max-width:760px){:root{--preview-header-height: 104px}.header-bar{align-content:center;flex-wrap:wrap;gap:8px 10px;padding:8px 10px}.preview-header-left{flex:1 1 calc(100% - 54px);order:1}.preview-header-left .navbar-brand img{max-width:132px}.preview-separator,.preview-explore-link{display:none}.preview-device-switcher{order:3}.preview-header-actions{display:contents}.preview-cta{order:4;padding:7px 12px}.preview-github-link{order:5;padding:7px 12px}.preview-close-link{order:2;margin-left:auto}.preview-stage.framed{padding:16px}.preview-frame.tablet,.preview-frame.mobile{max-width:calc(100vw - 32px);max-height:calc(100vh - var(--preview-header-height) - 32px)}}@media(max-width:480px){:root{--preview-header-height: 96px}.header-bar{gap:7px 8px}.preview-header-left .navbar-brand img{max-width:116px}.preview-device-switcher button{padding:5px}.preview-cta-full{display:none}.preview-cta-short{display:inline}.preview-github-link{display:none!important}}@media(max-width:640px){:root{--preview-header-height: 56px}.header-bar{flex-wrap:nowrap;gap:12px;height:var(--preview-header-height);padding:0 14px}.preview-header-left{flex:0 0 auto;order:0}.preview-header-left .navbar-brand,.preview-separator,.preview-explore-link,.preview-device-switcher,.preview-header-actions{display:none}.preview-mobile-logo{display:block;width:34px;height:auto}.preview-mobile-more-link{display:inline-flex;align-items:center;margin-left:auto;order:1;color:var(--color-dark);font-size:14px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap}.preview-mobile-more-link:hover{color:var(--color-primary)}}@media(min-width:641px)and (max-width:1024px){:root{--preview-header-height: 60px}.header-bar{flex-wrap:nowrap;gap:12px;height:var(--preview-header-height);padding:0 16px}.preview-header-left{flex:1 1 0;order:1}.preview-header-left .navbar-brand,.preview-separator,.preview-explore-link,.preview-header-actions{display:none}.preview-mobile-logo{display:block;width:34px;height:auto}.preview-device-switcher{order:2}.preview-mobile-more-link{display:inline-flex;flex:1 1 0;order:3;align-items:center;justify-content:flex-end;margin-left:0;color:var(--color-dark);font-size:14px;font-weight:500;line-height:1;text-decoration:none;white-space:nowrap}.preview-mobile-more-link:hover{color:var(--color-primary)}.preview-stage.framed{padding:16px}.preview-frame.tablet,.preview-frame.mobile{max-width:calc(100vw - 32px);max-height:calc(100vh - var(--preview-header-height) - 32px)}}