.display-feature-switch{display:flex;align-items:center;justify-content:center;gap:5px;padding:5px;border:1px solid #ffffff26;border-radius:7px;background:#ffffff09;max-width:100%;box-shadow:0 8px 24px #101f1817}.display-feature-switch a{display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 17px;text-decoration:none;font:12px system-ui,"Microsoft YaHei",sans-serif;letter-spacing:0;color:#b7c9bd;border:1px solid transparent;border-radius:4px;min-width:0;white-space:nowrap;transition:background .18s,color .18s}.display-feature-switch a:hover{background:#ffffff0d;color:white}.display-feature-switch a[aria-current=page]{background:#f1f6f0;color:#244530;border-color:#fff;box-shadow:0 2px 8px #0b201828}.display-feature-switch .feature-mark{width:18px;height:18px;display:grid;place-items:center;color:inherit;opacity:.8;flex:none}.display-feature-switch svg{display:block;width:18px;height:18px;stroke-width:1.7}.display-feature-switch a:focus-visible{outline:2px solid #bddbc6;outline-offset:3px}.access-feature-switch{margin:0 0 22px}.screen-feature-switch{margin:0 auto 23px;width:max-content}.screen-feature-switch .feature-mark{font-size:17px;font-weight:400}.screen-feature-switch .feature-mark.live::before{content:"";width:14px;height:10px;box-sizing:border-box;border:1px solid currentColor;border-radius:2px}.screen-feature-switch .feature-mark.live::after{content:"";width:5px;height:6px;border-left:3px solid currentColor;position:absolute;margin-left:16px}.screen-feature-switch .feature-mark.home{font-size:18px}.screen-feature-switch .feature-mark{position:relative}@media(max-width:620px){.display-feature-switch a{font-size:10px;padding:10px 10px;gap:6px}.display-feature-switch{gap:3px}.display-feature-switch .feature-mark,.display-feature-switch svg{width:15px;height:15px}.access-feature-switch{margin-bottom:17px}.screen-feature-switch{margin-bottom:22px}.screen-feature-switch .feature-mark.live::after{margin-left:14px}.screen-feature-switch .feature-mark.live::before{width:12px}}@media(prefers-reduced-motion:reduce){.display-feature-switch a{transition:none}}

/* Let the main region use the space left by the header and footer. */
.access-page{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;min-height:100dvh}
.access-page .access-header{padding:14px 32px}
.access-page .access-main{min-height:0;min-width:0;padding:18px}
.access-page .access-feature-switch{margin-bottom:14px}
.access-page .access-heading{margin-bottom:14px}
.access-page .access-stages{margin-top:14px}
.access-page .access-footer{padding:10px 32px}
.access-page .access-admin{flex-direction:row;align-items:center;gap:8px;padding-top:8px;margin-top:8px}
.access-page .access-admin .primary-button{flex:1;width:auto}
.access-page .access-admin .text-button{margin:0;white-space:nowrap}
.display-screen .screen-entry{padding:18px 36px 14px}
.display-screen .screen-topbar{padding-bottom:14px}
.display-screen .screen-content{padding:16px 0}
.display-screen .screen-feature-switch{margin-bottom:14px}
.display-screen .screen-state{margin-bottom:12px}
.display-screen .screen-qr{margin-bottom:18px}
.display-screen .screen-code-wrap{margin-top:12px;padding:7px 18px}
.display-screen .screen-content .screen-expiry{margin-top:9px}
.display-screen .screen-footer{padding-top:10px}
.access-page #accessRetry,.display-screen #screenRetry{margin-top:8px}
@media(max-height:800px){
  .access-page .access-header{padding:10px 24px}
  .access-page .access-main{padding:12px 18px}
  .access-page .access-feature-switch{margin-bottom:10px}
  .access-page .access-heading{margin-bottom:10px}
  .access-page .access-heading h1{font-size:25px;margin-top:5px}
  .access-page .access-heading p{margin-top:5px}
  .access-page .qr-tool{padding:14px 20px}
  .access-page .access-state{margin-bottom:9px}
  .access-page .experience-qr{margin-bottom:10px}
  .access-page .access-code{margin-top:9px;padding-top:8px}
  .access-page .access-stages{margin-top:10px}
  .access-page .access-footer{padding:8px 24px}
  .display-screen .screen-entry{padding:12px 28px}
  .display-screen .screen-topbar{padding-bottom:10px}
  .display-screen .screen-content{padding:12px 0}
  .display-screen .screen-feature-switch{margin-bottom:10px}
  .display-screen .screen-state{margin-bottom:10px}
  .display-screen .screen-qr{width:250px;height:250px;padding:18px;margin-bottom:14px}
  .display-screen .screen-content h1{font-size:24px;margin-bottom:8px}
  .display-screen .screen-content p{font-size:13px}
  .display-screen .screen-code-wrap{margin-top:9px;padding:5px 14px}
}
@media(max-height:750px) and (min-width:621px){
  .access-page .access-main{display:grid;grid-template-columns:220px minmax(0,360px);column-gap:32px;row-gap:6px;align-content:center;align-items:center;justify-content:center;text-align:center;width:min(100%,760px);justify-self:center}
  .access-page .access-main>:not(.qr-tool),.access-page .qr-tool>:not(.experience-qr){grid-column:2;margin:0}
  .access-page .access-heading{grid-row:2}
  .access-page .access-feature-switch{grid-row:1;justify-self:center}
  .access-page .qr-tool{display:contents}
  .access-page .experience-qr{grid-column:1;grid-row:1/10;margin:0;box-shadow:0 0 0 7px #ffffff0b,0 0 0 8px #ffffff26,0 18px 48px #00000030}
  .access-page .access-state{grid-row:3;justify-self:center;color:#bed4c5}
  .access-page .qr-tool h2{grid-row:4;color:#f2f7f4}
  .access-page #accessMessage{grid-row:5;font-size:12px;line-height:1.6;color:#bdcec2}
  .access-page .access-code{grid-row:6;border-color:#ffffff26;padding-top:6px}
  .access-page .access-code span{color:#aebfb4}
  .access-page .access-code strong{color:#dceee3}
  .access-page .access-expiry{grid-row:7;color:#aebfb4;margin-top:0!important}
  .access-page .access-admin,.access-page #accessRetry{grid-row:8}
  .access-page .access-admin{padding-top:6px;border-color:#ffffff26;flex-direction:row;align-items:center;gap:8px}
  .access-page .access-admin .primary-button{flex:1;width:auto}
  .access-page .access-admin .text-button{margin:0;color:#c6d7cc;white-space:nowrap}
  .access-page .access-stages{grid-row:9;justify-content:center}
  .display-screen .screen-content{width:min(100%,680px);display:grid;grid-template-columns:220px minmax(0,1fr);column-gap:32px;row-gap:6px;align-items:center}
  .display-screen .screen-content>:not(.screen-qr){grid-column:2;margin:0}
  .display-screen .screen-feature-switch{grid-row:1;justify-self:center}
  .display-screen .screen-state{grid-row:2}
  .display-screen .screen-qr{grid-column:1;grid-row:1/8;width:220px;height:220px;margin:0;padding:16px}
  .display-screen .screen-content h1{grid-row:3}
  .display-screen #screenMessage{grid-row:4}
  .display-screen .screen-code-wrap{grid-row:5;justify-content:center;padding:5px 12px}
  .display-screen .screen-content .screen-expiry{grid-row:6;margin-top:0}
  .display-screen #screenRetry{grid-row:7;padding:8px 14px;min-height:36px}
}
@media(max-height:560px) and (min-width:621px){
  .access-page .access-heading{display:none}
  .access-page .access-main{column-gap:24px;row-gap:4px;padding-top:10px;padding-bottom:10px}
  .access-page .access-header{padding:8px 20px}
  .access-page .access-footer{padding:7px 20px}
  .access-page .access-admin .primary-button{min-height:36px;padding:8px 12px}
  .display-screen .screen-entry{padding:10px 22px}
  .display-screen .screen-topbar{padding-bottom:8px}
  .display-screen .screen-content{padding:10px 0;column-gap:24px;row-gap:4px}
  .display-screen .screen-content h1{font-size:22px}
  .display-screen .screen-footer{padding-top:8px}
}
@media(max-width:620px){
  .access-page .access-header{padding:10px 16px}
  .access-page .access-main{padding:12px 14px}
  .access-page .access-footer{padding:9px 16px}
  .display-screen .screen-entry{padding:12px 18px}
  .display-screen .screen-qr{width:250px;height:250px;padding:18px}
}
@media(max-height:700px) and (max-width:620px){
  .access-page .access-heading p,.access-page .access-overline{display:none}
  .access-page .access-heading h1{font-size:22px;margin-top:0}
  .access-page .qr-tool{padding:10px 14px}
  .access-page .qr-tool>p{margin-top:5px;line-height:1.5}
  .access-page .access-admin{flex-direction:row;align-items:center;gap:8px;padding-top:6px;margin-top:6px}
  .access-page .access-admin .primary-button{flex:1;width:auto;padding:8px 12px;min-height:36px}
  .access-page .access-admin .text-button{margin:0;white-space:nowrap}
  .access-page .access-code{margin-top:6px;padding-top:6px}
  .access-page .access-expiry{margin-top:5px!important}
  .display-screen .screen-qr{width:220px;height:220px;padding:16px;margin-bottom:10px}
  .display-screen .screen-content p{font-size:12px}
  .display-screen .screen-content h1{font-size:22px;margin-bottom:5px}
}
@media(max-height:640px) and (max-width:620px){
  .access-page .access-header{padding:8px 14px}
  .access-page .access-main{padding:8px 12px}
  .access-page .access-heading{display:none}
  .access-page .access-feature-switch{margin-bottom:8px}
  .access-page .access-state{margin-bottom:6px}
  .access-page .experience-qr{width:180px;height:180px;margin-bottom:7px}
  .access-page .experience-qr img,.access-page .experience-qr canvas{width:164px!important;height:164px!important}
  .access-page .qr-tool h2{font-size:17px}
  .access-page .access-code strong{font-size:22px}
  .access-page .access-stages{margin-top:8px;font-size:9px;gap:5px}
  .access-page .access-footer{padding:7px 14px;font-size:9px}
  .display-screen .screen-entry{padding:10px 16px}
  .display-screen .screen-topbar{padding-bottom:8px}
  .display-screen .screen-content{padding:8px 0}
  .display-screen .screen-feature-switch{margin-bottom:8px}
  .display-screen .screen-state{margin-bottom:8px}
  .display-screen .screen-qr{width:200px;height:200px;padding:14px;margin-bottom:8px}
  .display-screen .screen-content h1{font-size:21px}
  .display-screen .screen-code{font-size:24px}
  .display-screen .screen-code-wrap{margin-top:7px;padding:4px 12px}
  .display-screen .screen-content .screen-expiry{margin-top:7px}
  .display-screen .screen-footer{padding-top:6px}
  .display-screen #screenRetry{padding:8px 14px;min-height:36px}
}