.topbar{padding:12px 1rem;margin:0;background:#3f3f46;display:flex;justify-content:center;height:2rem}.topbar>*{flex-grow:1;flex-basis:30%}.topbar.hidden{transition:transform .1s ease-in-out;transform:translateY(-100%)}.topbar .title{font-family:inherit;font-size:1rem;font-weight:700;line-height:120%;justify-content:start;color:#fff;display:flex;align-items:center;gap:.5rem}.topbar .title a{padding-right:.25rem}.topbar .title svg{height:2rem;width:2rem}.topbar .title .title-badge{position:relative;font-family:CircularXXSub,sans-serif;align-self:center;padding:2px 8px;border-radius:9999px;border:1px solid #999999;color:#999;font-size:12px;font-weight:500;line-height:18px;text-align:center}.topbar .device-selection{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:1rem}.topbar .device-selection button{aspect-ratio:1;height:42px;opacity:.8;box-shadow:none;background:transparent;fill:#fff;border-radius:.5rem;position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center;border:none}.topbar .device-selection button:hover{background:#161b26;opacity:1;border:1px solid #333741}.topbar .device-selection button:hover .tooltip{visibility:visible}.topbar .device-selection button .tooltip{visibility:hidden;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;padding:.5rem .75rem;border-radius:.5rem;background:#0c111d;color:#fff;position:absolute;z-index:8;opacity:1;top:calc(100% + 5px);left:50%;transform:translate(-50%);white-space:nowrap}.topbar .device-selection button .tooltip:before{content:"";display:block;position:absolute;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid #0c111d;top:-4px;left:calc(50% - 4px)}.topbar .device-selection button:is(.active){border:1px solid #333741;opacity:1;background:#161b26;box-shadow:0 1px 2px #1018280d}.topbar .device-selection button svg{height:1.25rem;fill:#ababab}.topbar .device-selection button svg path{fill:#ababab}.topbar .actions{display:flex;flex-flow:row;gap:.5rem;align-items:center;justify-content:flex-end}.topbar .actions button{align-self:center;display:flex;gap:.5rem;align-items:center;justify-content:center;padding:.5rem .6875rem;border-radius:.5rem;font-size:.875rem;font-style:normal;font-weight:600;line-height:1.25rem;cursor:pointer;border:1px solid #d0d5dd;box-shadow:0 1px 2px #1018280d;background:#fff;transition:.1s ease-in background}.topbar .actions button:hover{background:#d9d9d9}.topbar .actions .fit-btn{border-radius:.5rem;border:1px solid #333741;background:#161b26;box-shadow:0 1px 2px #1018280d;color:#cfd0d3}.topbar .actions .hide-btn{border-radius:.5rem;border:1px solid #d0d5dd;background:#fff;box-shadow:0 1px 2px #1018280d}.topbar .title span,.topbar .title .title-badge,.topbar .device-selection button,.topbar .actions button{position:relative}.topbar .title span.skeleton:after,.topbar .title .skeleton.title-badge:after,.topbar .device-selection button.skeleton:after,.topbar .actions button.skeleton:after{position:absolute;content:"";inset:-1px;border-radius:.5rem;z-index:99;background:linear-gradient(90deg,#595959,#6b6a6a,#595959);background-size:400%;animation-name:skeleton-gradient;animation-direction:normal;animation-duration:1.5s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}@keyframes skeleton-gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.preview-container{text-align:center;min-height:100vh;display:flex;flex-flow:column;color:#fff;background:#3f3f46}.frame-loading{display:flex;flex-flow:column;align-items:center;justify-content:center;position:absolute;margin:0 auto;z-index:0;background:#26272b;color:#fff;text-align:center;line-height:.8;font-family:CircularXXSub,sans-serif;border-radius:.25rem;inset:1rem}.animated-circle{stroke-dasharray:93;stroke-dashoffset:0;animation:dash 3s ease-out infinite alternate-reverse,rotate 1.5s infinite;stroke-linecap:round;transform-origin:center}.frame-loading.desktop{border-radius:0;inset:0}.frame-loading-text{font-size:1rem;color:#fee;font-family:CircularXXSub,sans-serif;opacity:.5}.device-rotated-false .rotate-btn svg{transform:rotate(0)}.device-rotated-true .rotate-btn svg{transform:rotate(90deg)}.frame{overflow:hidden;position:relative;text-align:center;flex-grow:1;justify-content:center;align-items:center}.frame:not(.desktop){overflow:auto;gap:1rem;padding:2rem;display:flex}.frame .rotate-btn{display:flex;padding:.625rem;justify-content:center;align-items:center;gap:.25rem;border-radius:.5rem;background:#292828;cursor:pointer;transition:.15s ease-out transform;background:#1a1a1e;border:1px solid #51525c;box-shadow:0 1px 2px #1018280d;position:relative}.frame .rotate-btn.hidden{display:none}.frame .rotate-btn:hover{background:#272727}.frame .rotate-btn:hover svg{color:#ababab;fill:#ababab;box-shadow:0 1px 2px #1018280d}.frame .rotate-btn svg{fill:#ababab;height:1.5rem;width:1.5rem}.frame .rotate-btn:hover{background:#161b26;opacity:1;border:1px solid #333741}.frame .rotate-btn:hover .tooltip{visibility:visible}.frame .rotate-btn .tooltip{position:absolute;visibility:hidden;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;padding:.5rem .75rem;border-radius:.5rem;background:#0c111d;color:#fff;z-index:8;opacity:1;top:calc(100% + 5px);left:50%;transform:translate(-50%);white-space:nowrap}.frame .rotate-btn .tooltip:before{content:"";display:block;position:absolute;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid #0c111d;top:-4px;left:calc(50% - 4px)}.frame.mobile .iframe-wrapper{margin:auto 0;width:fit-content;position:relative;padding:1rem;border-radius:1rem;background:#26272b;border:1px solid #51525c;box-shadow:0 1px 2px #1018280d}.frame.mobile iframe{border-radius:.25rem;background:#26272b;transition:width .15s ease,height .15s ease}.frame:not(.desktop){position:relative;padding-left:7rem}.frame.desktop iframe{height:calc(100vh - 2rem - 24px);width:100vw}.frame.desktop .rotate-btn{display:none}.frame.desktop.full iframe{height:100vh;width:100vw;top:-6px;left:0;position:absolute;padding-top:0}.frame iframe{border:none;display:block;margin:0 auto}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes dash{0%{stroke-dasharray:1000,1000;stroke-dashoffset:0}to{stroke-dasharray:0,1000;stroke-dashoffset:-124px}}body{margin:0;padding:0;width:100vw;height:100vh;overflow-x:hidden}body *{font-family:CircularXXSub,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.preview-container{width:100%;height:100vh;background:#131316;display:flex;flex-flow:column nowrap}.shorthand-loader-text{padding-left:.8rem}.shorthand-loader-logo svg{height:4rem;width:4rem;margin-bottom:1rem;opacity:.6}.spin{margin-top:1rem;height:2rem;fill:#ddd;opacity:.6;animation:rotate 2s linear infinite}.qrcode{width:120px;aspect-ratio:1;transition:opacity .1s ease-in;opacity:0;position:fixed;right:16px;bottom:16px}.qrcode p{color:#fff;text-align:center;font-family:CircularXXSub,sans-serif;font-size:.75rem;font-style:normal;font-weight:600;line-height:1.125rem;margin-bottom:.25rem}.qrcode img{height:120px;width:120px;border:2px solid black;border-radius:10px}.mobile .qrcode{opacity:1}.mobile-or-tablet-browser .topbar{display:none}.mobile-or-tablet-browser .preview-container .frame{padding:0;position:absolute}.mobile-or-tablet-browser .preview-container .frame iframe{height:100vh;width:100vw;border-radius:0;top:0!important;transition:none;padding:0}.mobile-or-tablet-browser .preview-container .frame .iframe-wrapper{padding:0;border-radius:0}.mobile-or-tablet-browser .preview-container .frame-loading{inset:0}
/*# sourceMappingURL=preview.688223.min.css.map */