@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap";@view-transition{navigation: auto;}@keyframes swipe-out{0%{translate:0 0}50%{translate:-2em 0;opacity:0}to{translate:-2em 0;opacity:0}}@keyframes swipe-in{0%{translate:2em 0;opacity:0}50%{translate:2em 0;opacity:0}to{translate:0 0;opacity:1}}.transition.swipe{view-transition-name:swipe}::view-transition-old(swipe){animation:.25s ease-in swipe-out}::view-transition-new(swipe){animation:.25s cubic-bezier(.17,.67,.41,1) swipe-in}:root{font-family:Inter,sans-serif;font-feature-settings:"liga"1,"calt"1}@supports (font-variation-settings: normal){:root{font-family:InterVariable,sans-serif}}*{margin:0;padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}body{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100svh;font-size:2em;background-color:#1c1c1d;color:#fff}.wrap,.transition{display:flex;flex-direction:column;justify-content:center;align-items:center}.full-page{width:100%;height:100%}h1{font-weight:900;text-align:center;line-height:.9em;margin:.1em 0}.copy{font-weight:500;text-align:center;max-width:20em;color:#ccc;font-size:.85em}.copy svg{vertical-align:sub}.copy p{margin:1em 0}.copy .warn{color:#cc8}.copy a{color:inherit}.box-row{display:flex;gap:.3em}.box{display:flex;flex-direction:column;justify-content:center;align-items:center;color:#ccc;text-decoration:none;font-size:.6em;background-color:#0b0b0b;border-radius:5px;width:5.5em;height:5em;transition:color .2s,scale .15s;cursor:pointer}.box svg{width:2em;height:2em}.box:hover{color:#fff}.box:active{scale:.98}#join{position:absolute;margin-top:7.15em;transition:opacity .2s,translate .2s;display:flex;gap:.25em}input[type=text]{background-color:#0b0b0b;outline:none;border:none;font-size:.8em;font-family:Roboto Mono;border-radius:5px;color:#fff}#join input{width:6.7em;padding:.2em .65em}input::placeholder{color:#ccc}.hidden{translate:0 -.1em;opacity:0;pointer-events:none}.arrow-btn{background-color:#0b0b0b;border-radius:5px;display:flex;align-items:center;justify-content:center;width:1.3em;color:#ccc;transition:color .2s scale .15s;cursor:pointer}.arrow-btn:hover{color:#fff}.arrow-btn:active{scale:.98}.error-txt{font-size:.8em;color:#c00;font-weight:500;position:absolute;transition:opacity .2s,translate .2s}#invalid-code{margin-top:12em}#cant-join{margin-top:7.6em}button{font-size:1em;background-color:#0b0b0b;color:#ccc;border:none;padding:.2em .4em;border-radius:5px;cursor:pointer;transition:color .2s,scale .15s}button:not([disabled]):hover{color:#fff}button:not([disabled]):active{scale:.98}button[disabled]{opacity:.7;cursor:not-allowed}#name-wrap{position:absolute;margin-top:3.5em;transition:opacity .2s,translate .2s;display:flex;gap:.3em}#name{width:10em;padding:.2em .5em}#link-wrap{position:absolute;margin-top:7.2em;transition:opacity .2s,translate .2s;display:flex;gap:.3em}#link{width:11.1em;padding:.2em .6em}#progress-wrap{position:absolute;width:10.4em;background-color:#0b0b0b;height:.25em;margin-top:6.15em;border-radius:5px;transition:opacity .2s,translate .2s}#progress-inner{height:100%;background-color:#ccc;border-radius:inherit;width:0;transition:width .2s}#error-msg{margin-top:8.1em}footer{font-size:.6em;color:#fff2;font-weight:500;position:absolute;bottom:.4em}footer a{color:inherit;text-decoration-thickness:2px}#how-link{position:absolute;top:.4em;right:.4em;font-weight:900;border:4px solid #ccc;color:#ccc;width:1.3em;height:1.3em;display:flex;justify-content:center;align-items:center;border-radius:50%;text-decoration:none;transition:color .2s,border .2s}#how-link:hover{color:#fff;border:4px solid #fff}#bar{position:absolute;margin-left:13em;width:2px;height:6em;background-color:#ccc;border-radius:1em}#side{position:absolute;margin-left:26.2em}#room-code-text{font-weight:500;margin-bottom:.3em;flex-shrink:0;display:flex;gap:.4em}#room-code{background-color:#0b0b0b;padding:.1em .4em;border-radius:5px;color:transparent;transition:color .2s;cursor:pointer;font-family:Roboto Mono;font-size:.8em;font-weight:400;display:inline-flex;justify-content:center}#room-code:before{content:"hover";position:absolute;color:#555;border-radius:5px;transition:color .2s;margin-left:auto}#room-code:hover{color:#fff}#room-code:hover:before{color:transparent}#devices{background-color:#0b0b0b;border-radius:5px;padding:.3em .4em}#devices-head{color:#ccc;text-transform:uppercase;font-weight:700;font-size:.6em;padding-bottom:.5em}#devices-body{display:flex;flex-direction:column;gap:.15em;width:9.8em}.device{font-size:.8em;display:flex;align-items:center;font-weight:500;gap:.3em;white-space:nowrap}.device svg{flex-shrink:0}.device-name{text-overflow:ellipsis;overflow:hidden;flex-grow:1}#devices-body a{color:#ccc;cursor:pointer}@media (max-width: 600px){#bar{display:none}#side{position:absolute;bottom:.8em;margin-left:0}.copy{font-size:.6em;padding:0 1em}body:has(#devices) footer{display:none}.grid{margin-bottom:8em}}