html,body{margin:0;width:100%;height:100%;background:#0c1713;color:#f2f6ef;overflow:hidden;font-family:system-ui,sans-serif}img{position:absolute;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .6s ease}img.visible{opacity:1}main{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px;background:radial-gradient(ellipse at top,#234c3c,#0c1713 70%)}main[hidden]{display:none}span{letter-spacing:.3em;color:#b6cfab;font-size:18px}h1{font-size:clamp(32px,4vw,60px);font-weight:500}#code{font-size:clamp(65px,10vw,160px);font-weight:750;letter-spacing:.18em;padding-left:.18em}p{font-size:22px;max-width:700px;color:#c1d2c5;line-height:1.6}button{padding:14px 22px;background:#d5e8c9;color:#16372a;border:0;border-radius:8px;font-size:18px;cursor:pointer}
.player-control{position:fixed;z-index:10;right:20px;bottom:20px;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));box-shadow:0 4px 24px #0008;transition:opacity .2s ease}
.player-control.idle{opacity:0;pointer-events:none}
.player-control:focus{opacity:1;pointer-events:auto;outline:3px solid #fff;outline-offset:4px}
html.cursor-hidden,html.cursor-hidden *{cursor:none!important}

.player-copyright{margin-top:24px;font-size:12px;line-height:1.6;color:#b6cfab}.player-copyright a{color:inherit;text-decoration:none}.player-copyright a:hover{text-decoration:underline}
.pairing-logo{display:block;width:200px;height:200px;max-width:55vw;object-fit:contain;margin:0 auto 8px}
html,body{background:#15172B;color:#F2F8FA}main{background:#101222}main .pairing-logo{position:static;opacity:1;flex-shrink:0;transition:none}main p{color:#D8E6EA}button{background:#087D91;color:#FFFFFF}button:focus-visible{outline:3px solid #7550CE;outline-offset:3px}
#pairing{padding:24px 24px 88px;gap:12px}#pairing .pairing-logo{width:180px;height:150px;margin:0}#pairing h1{margin:0;font-size:clamp(28px,4vw,60px)}#pairing #code{line-height:1.15}#pairing p{margin:0;font-size:clamp(18px,2vw,22px)}#pairing .player-copyright{margin-top:4px}@media(max-height:600px){#pairing{padding:16px 20px 76px;gap:6px}#pairing .pairing-logo{width:120px;height:90px}#pairing h1{font-size:26px}#pairing #code{font-size:clamp(50px,8vw,110px)}#pairing p{font-size:16px}#pairing .player-copyright{font-size:10px}}@media(max-height:420px){#pairing .pairing-logo{height:60px}#pairing h1{font-size:22px}#pairing #code{font-size:52px}}