@font-face{font-family:Montserrat UI;src:url(/ui/Montserrat-UI.ttf) format("truetype");font-weight:100 900}:root{--red: #c91e4e;--dark-red: #7c0e40;--grey0: #e0e0e0;--grey1: #fafafa;--grey2: #838383;--grey3: #424242;--light-grey: #bdbdbd;color-scheme:dark}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:#fff;font-family:Montserrat UI,Montserrat,system-ui,sans-serif;-webkit-user-select:none;user-select:none;cursor:none}a{color:inherit}.screen{position:absolute;inset:0}.player-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}.status{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 24px;text-align:center;font-size:16px;background:#000}.status img{width:min(761px,90vw);max-height:40vh;object-fit:contain;margin-bottom:10px}.status.no-playlist img{max-height:50vh}.status p{margin:20px 0 0}.status strong{font-weight:700}.status .countdown{font-variant-numeric:tabular-nums}.welcome{overflow-y:auto;padding:10px;display:flex;flex-direction:column;background:var(--grey3) url(/img/welcome_landscape.jpg) center / cover no-repeat}@media(orientation:portrait){.welcome{background-image:url(/img/welcome_portrait.jpg)}}.welcome .logo{width:30vw;align-self:flex-start}.welcome .logo-portrait{display:none}@media(orientation:portrait){.welcome .logo-landscape{display:none}.welcome .logo-portrait{display:block}}.welcome .card{margin:auto;width:90%;padding:16px;background:#fff;color:var(--grey3)}.welcome h1{margin:0 0 18px;font-size:40px;font-weight:400}.welcome .body{display:flex;gap:16px;align-items:center}.welcome .steps{flex:1;display:grid;gap:18px;font-size:16px;padding-bottom:18px}.welcome .step{display:flex;gap:16px;align-items:baseline}.welcome .step b{white-space:nowrap}.welcome .step img{height:1.2em;vertical-align:middle}.welcome .code-panel{width:30%;display:flex;flex-direction:column;align-items:center;gap:4px}.welcome .code-panel canvas{width:min(100%,45vh)!important;height:auto!important;image-rendering:pixelated}.welcome .code-boxes{display:flex;gap:12px;padding:2px 0}.welcome .code-boxes span{width:40px;height:40px;display:grid;place-items:center;font-size:30px;background:var(--grey0);border-radius:2px}.welcome .code-note{font-size:12px;text-align:center;margin:0}.welcome .message{white-space:pre-line;font-size:16px;margin:0}@media(orientation:portrait){.welcome .body{flex-direction:column;align-items:stretch}.welcome .code-panel{width:100%;max-width:320px;align-self:center}}@media(max-width:700px){.welcome h1{font-size:30px}.welcome .steps{font-size:14px;gap:12px;padding-bottom:12px}.welcome .code-note{font-size:10px}}.alert{display:flex;flex-direction:column;background:#fff}.alert .main{display:flex;flex-direction:column;padding:16px 80px 0;overflow:hidden}.alert .icon{height:15%;flex:none}.alert .icon img{height:100%;max-width:100%;object-fit:contain;object-position:left center}.alert h1{margin:8px 0 0;font-weight:400;font-size:clamp(36px,7vw,100px);line-height:1.1}.alert .description{margin:16px 0;font-weight:700;font-size:clamp(22px,2.6vw,34px)}.alert .instructions{flex:1;margin:16px 80px;overflow:hidden;position:relative;color:#000;font-size:clamp(20px,3vw,40px)}.alert .instructions-text{white-space:pre-line}.alert .instructions.fits{display:flex;align-items:center}@media(orientation:portrait){.alert h1{font-weight:700;font-size:clamp(36px,8vw,60px)}}@media(max-width:700px),(max-height:500px){.alert .main{padding:8px 24px 0}.alert .instructions{margin:8px 24px}}.settings-backdrop{position:absolute;inset:0;background:#0009;display:grid;place-items:center;cursor:default;z-index:20}.settings{width:min(480px,92vw);background:var(--grey1);color:var(--grey3);border-radius:12px;padding:8px 20px 20px;font-size:15px}.settings header{display:flex;align-items:center;justify-content:space-between}.settings h2{font-size:18px;margin:12px 0}.settings h3{font-size:12px;text-transform:uppercase;color:var(--grey2);margin:18px 0 6px;font-weight:600}.settings dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 16px}.settings dt{color:var(--grey2)}.settings dd{margin:0;text-align:right;word-break:break-all;user-select:text;-webkit-user-select:text}.settings button{font:inherit;color:var(--red);background:none;border:0;padding:8px 0;cursor:pointer}.settings .actions{display:flex;gap:20px;margin-top:8px}.settings-hotspot{position:absolute;top:0;right:0;width:80px;height:80px;z-index:10}.start-overlay{position:absolute;inset:0;z-index:15;cursor:pointer}.start-overlay .pill{position:absolute;left:50%;bottom:32px;transform:translate(-50%);padding:10px 20px;border-radius:999px;background:#000000b3;color:#fff;font-size:15px;transition:opacity 1s}.start-overlay .pill.hidden{opacity:0}