@import"https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;600;800&display=swap";.screen{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:radial-gradient(1200px 900px at 16% 8%,rgba(244,62,40,.07),transparent 58%),linear-gradient(155deg,#161616 0%,var(--ash) 46%,var(--ash-deep) 100%);overflow-y:auto;overflow-x:hidden;color:var(--white)}.pattern{position:absolute;inset:0;pointer-events:none;z-index:0}.pattern svg{width:100%;height:100%;display:block}.frame{position:relative;z-index:2;width:100%;min-height:100%;padding:clamp(14px,min(4vw,5vh),84px) clamp(20px,7vw,140px) clamp(12px,min(3.5vw,4.2vh),74px);display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.brand{display:flex;flex-direction:column;gap:10px}.brand img{width:clamp(160px,18vw,340px);height:auto;display:block;filter:drop-shadow(0 0 18px var(--red-glow))}.brand-label{display:flex;align-items:center;flex-wrap:wrap;gap:clamp(8px,1.2vw,14px);font-size:clamp(12px,1.3vw,17px);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--red);padding-left:2px}.brand-dash{width:clamp(24px,4vw,44px);height:3px;border-radius:2px;background:linear-gradient(90deg,var(--red),rgba(244,62,40,0));flex-shrink:0}.status{display:flex;align-items:center;gap:clamp(8px,1.6vw,16px);padding:clamp(8px,1.4vw,14px) clamp(14px,2.6vw,26px) clamp(8px,1.4vw,14px) clamp(12px,2.2vw,22px);border:2px solid var(--line);border-radius:100px;background:#1a1a1aa6;font-size:clamp(12px,1.3vw,17px);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}.status .dot{width:clamp(9px,1.2vw,13px);height:clamp(9px,1.2vw,13px);border-radius:50%;background:var(--red);box-shadow:0 0 0 0 var(--red-glow);animation:player-pulse 2.4s ease-out infinite}.status .dot.online{background:var(--green);box-shadow:0 0 #22c55e80}.foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:2px solid var(--line-soft);margin-top:auto;padding-top:clamp(8px,min(3vw,3.5vh),36px);gap:10px 24px;font-size:clamp(11px,1.05vw,14px);color:var(--muted-2)}@media (max-width: 560px){.foot .slogan{display:none}}.foot .site{color:var(--white);font-weight:600;letter-spacing:.04em;font-size:clamp(12px,1.3vw,16px)}.foot .slogan{font-weight:500;letter-spacing:.01em;color:var(--muted);font-size:clamp(12px,1.3vw,16px)}.foot .slogan b{color:var(--red);font-weight:600}.foot .meta{font-weight:500;letter-spacing:.08em}.foot .meta b{color:var(--muted);font-weight:500}.foot .meta .id{font-variant-numeric:tabular-nums}.pairing-main{flex:1;display:grid;grid-template-columns:1.16fr .84fr;gap:clamp(28px,5vw,96px);align-items:center}@media (max-width: 880px){.pairing-main{grid-template-columns:1fr;gap:clamp(16px,3vh,32px)}.lede,.steps{display:none!important}}.pairing-copy{container-type:inline-size}.pairing-main h1{font-size:clamp(26px,8.5cqi,68px);line-height:.96;font-weight:800;letter-spacing:-.02em;color:var(--white-hi);margin:0 0 clamp(6px,min(3cqi,1.4vh),20px)}.pairing-main h1 .thin{color:var(--muted);font-weight:300}.lede{font-size:clamp(16px,2.4cqi,19px);line-height:1.5;font-weight:300;color:var(--muted);max-width:740px;margin:0 0 clamp(10px,min(5cqi,2.4vh),40px)}.lede b{color:var(--white);font-weight:600}.steps{display:flex;flex-wrap:wrap;gap:clamp(12px,6cqi,48px);margin-bottom:clamp(10px,min(5cqi,2.4vh),40px)}.step{display:flex;gap:18px;align-items:flex-start;flex:1 1 240px;max-width:360px}.step .num{font-size:clamp(14px,2.2cqi,18px);font-weight:800;color:var(--red);border:2px solid var(--line);border-radius:10px;padding:clamp(6px,1.2cqi,8px) clamp(9px,1.8cqi,12px);line-height:1;flex:none}.step .stxt{font-size:clamp(14px,2.5cqi,20px);line-height:1.4;font-weight:300;color:var(--muted);padding-top:6px}.step .stxt b{color:var(--white);font-weight:600}.codelabel{font-size:clamp(12px,1.8cqi,16px);font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--muted-2);margin-bottom:clamp(4px,min(1.8cqi,.85vh),14px)}.code{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.4cqi,20px)}.code-group{display:flex;gap:clamp(6px,1.6cqi,16px)}@container (max-width: 400px){.code{flex-direction:column}.sep{display:none}}.digit{width:clamp(34px,13cqi,120px);height:clamp(46px,17cqi,156px);border-radius:clamp(10px,3cqi,18px);position:relative;overflow:hidden;background:linear-gradient(180deg,var(--surface-2),#151515);border:2px solid var(--line);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px #ffffff0a,0 20px 38px #00000080}.digit:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:.6}.digit span{font-size:clamp(28px,12cqi,92px);font-weight:800;line-height:1;color:var(--white-hi);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}.sep{width:clamp(14px,4cqi,30px);display:flex;align-items:center;justify-content:center}.sep i{width:clamp(10px,3cqi,20px);height:4px;border-radius:2px;background:var(--line);display:block}.qrwrap{container-type:inline-size;display:flex;flex-direction:column;align-items:center;width:100%;max-width:min(540px,50vh);margin:0 auto}@media (max-width: 880px){.qrwrap{max-width:min(540px,27vh)}}.qrcard{position:relative;padding:clamp(16px,6cqi,32px);border-radius:clamp(16px,6cqi,30px);background:linear-gradient(180deg,var(--surface),#101010);border:2px solid var(--line);box-shadow:0 46px 100px #0009,inset 0 1px #ffffff0a;width:100%}.qrcode{width:100%;aspect-ratio:1 / 1;background:var(--qr-card);border-radius:clamp(10px,3cqi,16px);padding:clamp(12px,4.5cqi,24px);display:flex;align-items:center;justify-content:center}.qrcode canvas,.qrcode img,.qrcode svg{width:100%!important;height:100%!important;image-rendering:pixelated;display:block}.tick{position:absolute;width:clamp(22px,7cqi,38px);height:clamp(22px,7cqi,38px);border:4px solid var(--red);opacity:.95}.tick.tl{top:clamp(10px,3cqi,16px);left:clamp(10px,3cqi,16px);border-right:0;border-bottom:0;border-top-left-radius:12px}.tick.tr{top:clamp(10px,3cqi,16px);right:clamp(10px,3cqi,16px);border-left:0;border-bottom:0;border-top-right-radius:12px}.tick.bl{bottom:clamp(10px,3cqi,16px);left:clamp(10px,3cqi,16px);border-right:0;border-top:0;border-bottom-left-radius:12px}.tick.br{bottom:clamp(10px,3cqi,16px);right:clamp(10px,3cqi,16px);border-left:0;border-top:0;border-bottom-right-radius:12px}.scan{position:absolute;left:clamp(16px,6cqi,32px);right:clamp(16px,6cqi,32px);top:clamp(16px,6cqi,32px);height:clamp(36px,16cqi,64px);border-radius:16px;pointer-events:none;background:linear-gradient(180deg,rgba(244,62,40,.2),transparent);animation:pairing-scan 3.6s cubic-bezier(.5,0,.5,1) infinite}@keyframes pairing-scan{0%{top:clamp(16px,6cqi,32px);opacity:0}12%{opacity:1}88%{opacity:1}to{top:calc(100% - clamp(52px,20cqi,96px));opacity:0}}.qrcap{margin-top:clamp(18px,6cqi,36px);text-align:center;width:100%}.qrcap .big{font-size:clamp(18px,5cqi,30px);font-weight:700;color:var(--white-hi);line-height:1.3;margin-bottom:12px}.qrcap .small{font-size:clamp(12px,3cqi,18px);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;justify-content:center;gap:6px}.qrcap .small .u{color:var(--red);font-weight:800;font-style:normal}.pairing-error{margin:clamp(6px,min(2.4cqi,1vh),24px) 0 0;font-size:clamp(12px,3cqi,16px);color:var(--red);max-width:740px}.idle-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(14px,3vw,28px);padding:0 clamp(8px,3vw,24px)}.idle-mark{width:clamp(72px,14vw,140px);height:clamp(72px,14vw,140px);border-radius:50%;background:radial-gradient(circle,#f43e2824,#f43e2808 70%);border:3px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:clamp(28px,6vw,56px);color:var(--red)}.idle-title{font-size:clamp(26px,6vw,56px);font-weight:700;color:var(--white-hi);letter-spacing:-.02em;line-height:1.1}.idle-sub{font-size:clamp(14px,2vw,22px);color:var(--muted);max-width:720px;line-height:1.5}@keyframes mc-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes mc-slideInLeft{0%{opacity:0;transform:translate(-60%)}to{opacity:1;transform:translate(0)}}@keyframes mc-slideInRight{0%{opacity:0;transform:translate(60%)}to{opacity:1;transform:translate(0)}}@keyframes mc-slideInUp{0%{opacity:0;transform:translateY(60%)}to{opacity:1;transform:translateY(0)}}@keyframes mc-slideInDown{0%{opacity:0;transform:translateY(-60%)}to{opacity:1;transform:translateY(0)}}@keyframes mc-zoomIn{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}@keyframes mc-wipeIn{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes mc-rotateIn{0%{opacity:0;transform:rotate(-200deg)}to{opacity:1;transform:rotate(0)}}@keyframes mc-flipInX{0%{opacity:0;transform:perspective(800px) rotateX(90deg)}to{opacity:1;transform:perspective(800px) rotateX(0)}}@keyframes mc-flipInY{0%{opacity:0;transform:perspective(800px) rotateY(90deg)}to{opacity:1;transform:perspective(800px) rotateY(0)}}@keyframes mc-bounceInUp{0%{opacity:0;transform:translateY(100%)}55%{opacity:1;transform:translateY(-8%)}75%{transform:translateY(4%)}to{transform:translateY(0)}}@keyframes mc-bounceInDown{0%{opacity:0;transform:translateY(-100%)}55%{opacity:1;transform:translateY(8%)}75%{transform:translateY(-4%)}to{transform:translateY(0)}}@keyframes mc-bounceInLeft{0%{opacity:0;transform:translate(-100%)}55%{opacity:1;transform:translate(8%)}75%{transform:translate(-4%)}to{transform:translate(0)}}@keyframes mc-bounceInRight{0%{opacity:0;transform:translate(100%)}55%{opacity:1;transform:translate(-8%)}75%{transform:translate(4%)}to{transform:translate(0)}}@keyframes mc-rollIn{0%{opacity:0;transform:translate(-100%) rotate(-120deg)}to{opacity:1;transform:translate(0) rotate(0)}}@keyframes mc-lightSpeedIn{0%{opacity:0;transform:translate(100%) skew(-30deg)}to{opacity:1;transform:translate(0) skew(0)}}@keyframes mc-expandIn{0%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes mc-blurIn{0%{opacity:0;filter:blur(16px)}to{opacity:1;filter:blur(0)}}@keyframes mc-swingIn{0%{opacity:0;transform:rotate(15deg)}30%{opacity:1;transform:rotate(-10deg)}50%{transform:rotate(6deg)}70%{transform:rotate(-4deg)}to{transform:rotate(0)}}@keyframes mc-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6%)}}@keyframes mc-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.07)}}@keyframes mc-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12%)}}@keyframes mc-blink{0%,to{opacity:1}50%{opacity:.15}}@keyframes mc-flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes mc-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes mc-shake{0%,to{transform:translate(0)}10%{transform:translate(-6%)}20%{transform:translate(6%)}30%{transform:translate(-5%)}40%{transform:translate(5%)}50%{transform:translate(-3%)}60%{transform:translate(3%)}70%{transform:translate(-2%)}80%{transform:translate(2%)}90%{transform:translate(-1%)}}@keyframes mc-wobble{0%,to{transform:translate(0) rotate(0)}15%{transform:translate(-8%) rotate(-5deg)}30%{transform:translate(6%) rotate(3deg)}45%{transform:translate(-6%) rotate(-3deg)}60%{transform:translate(4%) rotate(2deg)}75%{transform:translate(-2%) rotate(-1deg)}}@keyframes mc-swing{0%,to{transform:rotate(0)}20%{transform:rotate(10deg)}40%{transform:rotate(-8deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-3deg)}}@keyframes mc-jello{0%,to{transform:skew(0) skewY(0)}22%{transform:skew(-10deg) skewY(-10deg)}44%{transform:skew(6deg) skewY(6deg)}66%{transform:skew(-3deg) skewY(-3deg)}88%{transform:skew(1deg) skewY(1deg)}}@keyframes mc-rubberBand{0%,to{transform:scale(1)}30%{transform:scale(1.2,.85)}50%{transform:scale(.9,1.1)}70%{transform:scale(1.05,.97)}}@keyframes mc-heartbeat{0%,to{transform:scale(1)}25%{transform:scale(1.15)}40%{transform:scale(1)}60%{transform:scale(1.1)}}@keyframes mc-tada{0%,to{transform:scale(1) rotate(0)}20%{transform:scale(.92) rotate(-3deg)}40%{transform:scale(1.08) rotate(3deg)}60%{transform:scale(1.08) rotate(-3deg)}80%{transform:scale(1.08) rotate(2deg)}}@keyframes mc-fadeOut{0%{opacity:1}to{opacity:0}}@keyframes mc-slideOutLeft{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(-60%)}}@keyframes mc-slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(60%)}}@keyframes mc-zoomOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.4)}}@keyframes mc-slideOutUp{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-60%)}}@keyframes mc-slideOutDown{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(60%)}}@keyframes mc-rotateOut{0%{opacity:1;transform:rotate(0)}to{opacity:0;transform:rotate(200deg)}}@keyframes mc-flipOutX{0%{opacity:1;transform:perspective(800px) rotateX(0)}to{opacity:0;transform:perspective(800px) rotateX(90deg)}}@keyframes mc-flipOutY{0%{opacity:1;transform:perspective(800px) rotateY(0)}to{opacity:0;transform:perspective(800px) rotateY(90deg)}}@keyframes mc-bounceOutUp{0%{opacity:1;transform:translateY(0)}20%{transform:translateY(4%)}to{opacity:0;transform:translateY(-100%)}}@keyframes mc-bounceOutDown{0%{opacity:1;transform:translateY(0)}20%{transform:translateY(-4%)}to{opacity:0;transform:translateY(100%)}}@keyframes mc-bounceOutLeft{0%{opacity:1;transform:translate(0)}20%{transform:translate(4%)}to{opacity:0;transform:translate(-100%)}}@keyframes mc-bounceOutRight{0%{opacity:1;transform:translate(0)}20%{transform:translate(-4%)}to{opacity:0;transform:translate(100%)}}@keyframes mc-rollOut{0%{opacity:1;transform:translate(0) rotate(0)}to{opacity:0;transform:translate(100%) rotate(120deg)}}@keyframes mc-lightSpeedOut{0%{opacity:1;transform:translate(0) skew(0)}to{opacity:0;transform:translate(100%) skew(30deg)}}@keyframes mc-blurOut{0%{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(16px)}}@keyframes mc-typewriter{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes mc-textFocusIn{0%{opacity:0;filter:blur(12px);transform:scale(1.1)}to{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes mc-trackIn{0%{opacity:0;letter-spacing:.5em}to{opacity:1;letter-spacing:normal}}.playlist-stage{position:fixed;inset:0;width:100vw;height:100vh;background:#000;overflow:hidden}.playlist-layer{position:absolute;inset:0;transition:opacity .35s ease}@media (prefers-reduced-motion: reduce){.playlist-layer{transition:none}}.playlist-media-box{position:relative;width:100%;height:100%}.playlist-media-loader{position:absolute;inset:0;display:grid;place-items:center}.playlist-media-loader:after{content:"";width:64px;height:64px;border-radius:50%;border:4px solid rgba(255,255,255,.18);border-top-color:var(--red, #f43e28);animation:playlist-loader-spin .9s linear infinite}@keyframes playlist-loader-spin{to{transform:rotate(360deg)}}.playlist-media-poster{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000}.playlist-sync-hold{position:absolute;inset:0;z-index:4;display:grid;place-items:center;padding:clamp(16px,5vw,64px);background:#000;animation:playlist-sync-hold-in .4s ease both}.playlist-sync-hold-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(14px,3vw,28px)}.playlist-sync-hold-mark{width:clamp(56px,11vw,104px);height:clamp(56px,11vw,104px);border-radius:50%;border:4px solid var(--line, rgba(255, 255, 255, .16));border-top-color:var(--red, #f43e28);animation:playlist-loader-spin 1.1s linear infinite}.playlist-sync-hold-title{margin:0;font-size:clamp(24px,5vw,48px);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--white-hi, #fff)}.playlist-sync-hold-sub{margin:0;font-size:clamp(14px,2vw,20px);line-height:1.5;max-width:640px;color:var(--muted, rgba(255, 255, 255, .62))}@keyframes playlist-sync-hold-in{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.playlist-sync-hold,.playlist-sync-hold-mark{animation:none}}:root{--ash: #121212;--ash-deep: #0c0c0c;--surface: #1a1a1a;--surface-2: #1f1f1f;--line: #2c2c2c;--line-soft: #242424;--white: #e2e2e2;--white-hi: #f0f0f0;--muted: #9a9a9a;--muted-2: #6e6e6e;--muted-3: #525252;--red: #f43e28;--red-deep: #b5260f;--red-glow: rgba(244, 62, 40, .45);--qr-card: #eaeaea;--green: #22c55e}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{font-family:Lexend,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;background:#000;color:var(--white);overflow:hidden}@keyframes player-pulse{0%{box-shadow:0 0 0 0 var(--red-glow)}70%{box-shadow:0 0 0 14px #f43e2800}to{box-shadow:0 0 #f43e2800}}@keyframes player-rise{0%{transform:translateY(16px)}to{transform:none}}.player-enter{animation:player-rise .7s ease both}.player-d1{animation-delay:.05s}.player-d2{animation-delay:.16s}.player-d3{animation-delay:.27s}.player-d4{animation-delay:.38s}.player-d5{animation-delay:.49s}@media (prefers-reduced-motion: reduce){.player-enter{animation:none;transform:none}}