.lab-main{padding:150px 5vw 70px;max-width:1600px;margin:auto;min-height:90vh}.lab-heading h1{font-size:clamp(40px,7vw,90px);margin:15px 0}.lab-heading{margin-bottom:35px}.lab-login{max-width:560px;padding:30px;border:1px solid currentColor}.lab-login h2{font-size:26px}.lab-login form{display:grid;gap:12px;margin-top:24px}.lab-login input{min-width:0;width:100%;padding:12px;background:transparent;color:inherit;border:1px solid currentColor;font:inherit}.lab-login button,.lab-session button{padding:12px 22px;background:transparent;color:inherit;border:1px solid currentColor;cursor:pointer}.lab-session{display:flex;justify-content:space-between;align-items:center;gap:12px}.lab-main [hidden]{display:none!important}#lab-frame{display:block;width:100%;height:1100px;border:1px solid #888;background:#f6f4ef}.lab-main :focus-visible{outline:2px solid currentColor;outline-offset:4px}@media(max-width:760px){.lab-main{padding:165px 16px 40px}.lab-login{padding:20px}.lab-session{align-items:flex-start}#lab-frame{height:1700px}}/* Fit the authenticated workspace to the available browser height. */
.lab-main{--lab-header-height:100px;box-sizing:border-box;padding-top:calc(var(--lab-header-height) + 28px)}
.lab-heading h1{font-size:clamp(36px,5vw,64px)}
.lab-main.is-active{padding:calc(var(--lab-header-height) + 12px) 3vw 12px;min-height:0;max-width:1440px}
.lab-main.is-active .lab-heading{display:none}
.lab-session{min-height:44px;margin-bottom:8px}
.lab-session p{margin:0;font-size:14px}
.lab-session button{padding:7px 14px;font-size:13px}
#lab-frame{height:max(300px,calc(100dvh - var(--lab-header-height) - 84px));background:#121215}
@media(max-width:760px){.lab-main.is-active{padding-left:10px;padding-right:10px}.lab-login{box-sizing:border-box;width:100%}#lab-frame{height:max(300px,calc(100dvh - var(--lab-header-height) - 84px))}}
.review-local-link{display:inline-block;margin-top:12px;padding:12px 18px;border:1px solid currentColor;text-decoration:none}
.lab-main{padding-top:28px}.lab-main.is-active{padding-top:12px}
/* The authenticated editor uses the viewport, with session actions in the site header. */
body.lab-active .site-header{padding:14px 20px;gap:12px}
body.lab-active .site-header .lab-session{order:4;flex-basis:100%;justify-content:flex-end;min-height:0;margin:0;gap:10px}
body.lab-active .lab-session p{margin-right:auto;color:inherit}
body.lab-active .lab-session button{font:inherit;font-size:14px;min-height:38px;padding:7px 14px}
.lab-main.is-active{width:100%;max-width:none;padding:8px 12px;min-height:0}
.lab-main.is-active #lab-frame{box-sizing:border-box;height:max(280px,calc(100dvh - var(--lab-header-height) - 16px))}
body.lab-workspace-focus .site-header>:not(.lab-session){display:none!important}
body.lab-workspace-focus .site-header{padding:8px 12px;min-height:0;height:auto}
body.lab-workspace-focus .site-header .lab-session{flex-basis:auto;width:100%}
body.lab-workspace-focus .lab-main.is-active{padding:4px 8px}
body.lab-workspace-focus #lab-frame{height:max(280px,calc(100dvh - var(--lab-header-height) - 8px))}
#lab-focus:focus-visible,.lab-session button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(min-width:1700px){body.lab-active .site-header .lab-session{flex-basis:auto;margin-left:12px}body.lab-active .lab-session p{display:none}}
@media(max-width:760px){body.lab-active .site-header{padding:10px 12px;gap:8px}.lab-main.is-active{padding:6px}.lab-main.is-active #lab-frame{height:max(280px,calc(100dvh - var(--lab-header-height) - 12px))}body.lab-workspace-focus .lab-main.is-active{padding:4px}body.lab-workspace-focus #lab-frame{height:max(280px,calc(100dvh - var(--lab-header-height) - 8px))}}
