@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#080d18;--surface:#101827;--line:#202c43;--text:#edf2ff;--muted:#8492ac;--blue:#55a9ff;--violet:#a293f5;--mint:#61d7b0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;font-size:14px}button,input,select{font:inherit}button,a,input,select{ -webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:4px}button{color:inherit}a{color:inherit;text-decoration:none}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.sidebar{width:224px;position:fixed;inset:0 auto 0 0;background:linear-gradient(180deg,#0e1523,#0b111d);border-right:1px solid #1b263a;padding:36px 19px 20px;display:flex;flex-direction:column;z-index:3}.brand{display:flex;align-items:center;gap:10px;margin:0 9px 50px;font-size:29px;font-weight:800;letter-spacing:3px}.brand-mark{font:800 37px 'Barlow Condensed',sans-serif;background:linear-gradient(140deg,#69dcff,#7d8bfc);color:#091422;width:37px;height:38px;display:grid;place-items:center;clip-path:polygon(22% 0,100% 0,100% 78%,78% 100%,0 100%,0 22%);text-shadow:none}.brand small{font-size:7px;letter-spacing:2px;display:block;color:#7c8ba7;margin-top:1px}.nav-label{font-size:9px;font-weight:700;letter-spacing:1.9px;color:#586a88;margin:0 16px 14px}.nav-item{width:100%;display:flex;align-items:center;gap:12px;padding:13px 13px;background:none;border:1px solid transparent;border-radius:7px;font-size:12px;color:#8c9bb4;text-align:left;margin-bottom:7px}.nav-item svg{width:17px;height:17px}.nav-item.active{background:linear-gradient(100deg,#173555aa,#24254444);border-color:#2e598355;color:#b7deff;box-shadow:inset 3px 0 #61b5ff}.nav-item:hover{color:#dceaff;background:#172237}.nav-count{margin-left:auto;font:600 10px 'DM Sans';color:#67bbff;border:1px solid #3b6783;padding:2px 5px;border-radius:3px}.tiny-dot{width:4px;height:4px;background:#9d8bef;border-radius:50%;margin-left:auto}.sidebar-divider{height:1px;background:#1c283a;margin:22px 13px}.practice-link{margin: auto 2px 24px;padding:17px 15px;border:1px solid #2c3954;border-radius:9px;background:radial-gradient(ellipse at top right,#31366e44,transparent 70%),#111a2a;display:flex;flex-direction:column;gap:8px}.practice-icon{color:#8d9dff;margin-bottom:3px}.practice-link strong{font-size:12px}.practice-link>span:not(.practice-icon){font-size:10px;color:var(--muted);line-height:1.6}.practice-link b{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1.2px;color:#a5beee;margin-top:7px}.practice-link b svg{width:15px}.sidebar-bottom{display:flex;align-items:center;gap:7px;font-size:9px;color:#6e7e98;padding:0 10px}.version{margin-left:auto;color:#42516a}.status-dot{width:5px;height:5px;border-radius:50%;display:inline-block;background:var(--mint);box-shadow:0 0 8px #61d7b044;flex-shrink:0}.shell{margin-left:224px}.topbar{height:84px;border-bottom:1px solid #1b2537;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#0b111cbb}.breadcrumb{font-size:10px;color:#546580;letter-spacing:1.6px;display:flex;gap:15px}.breadcrumb strong{color:#b6c6df;font-weight:500}.breadcrumb span{color:#2d3b51}.top-actions{display:flex;align-items:center;gap:22px}.preview-label{font-size:8px;letter-spacing:1.3px;color:#8093b1;border:1px solid #293752;border-radius:4px;padding:5px 8px}.profile{background:none;border:none;display:flex;align-items:center;gap:10px;text-align:left;font-size:11px}.profile-avatar{width:34px;height:34px;display:grid;place-items:center;border:1px solid #4c6589;border-radius:9px;background:linear-gradient(135deg,#234564,#343052);font-size:10px;color:#cadcff}.profile small{display:block;font-size:6px;letter-spacing:1.1px;color:#71829f;margin-top:4px}.chevron{color:#647695;margin-left:12px}main{max-width:1500px;margin:auto;padding:35px 40px 0}.welcome{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.eyebrow{font-size:8px;font-weight:700;letter-spacing:2px;color:#8197bd;display:flex;gap:7px;align-items:center}.eyebrow>span{width:12px;height:1px;background:#6eb3ff}.welcome h1{font:600 clamp(25px,2.3vw,34px) 'Barlow Condensed',sans-serif;letter-spacing:.3px;margin:9px 0 8px}.welcome em{font-style:normal;color:#8fc6ff}.welcome p{font-size:11px;color:#8393ae;margin:0}.primary{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #70bbff;border-radius:6px;background:linear-gradient(105deg,#72baff,#5e97ed);color:#081b34;font-size:11px;font-weight:700;padding:12px 17px;box-shadow:0 0 22px #4f9dff1c,inset 0 1px #c3e4ff88;white-space:nowrap;transition:filter .2s,box-shadow .2s}.primary:hover{filter:brightness(1.13);box-shadow:0 0 30px #599fff38}.primary svg{width:15px;height:15px;stroke-width:2}.feature-banner{position:relative;min-height:210px;overflow:hidden;border:1px solid #30446a;border-radius:12px;background:radial-gradient(ellipse at 75% 60%,#34335a8c,transparent 45%),linear-gradient(105deg,#142b43,#142036 50%,#15192d);display:flex;align-items:center;justify-content:space-between;box-shadow:0 14px 40px #0002,inset 0 1px #8ab8ff16}.feature-banner:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 70%,#9c8be21a);border-radius:inherit}.banner-grid{position:absolute;inset:0;background-image:linear-gradient(#7199c80a 1px,transparent 1px),linear-gradient(90deg,#7199c80a 1px,transparent 1px);background-size:35px 35px;mask-image:linear-gradient(90deg,transparent,#000)}.banner-content{z-index:1;padding:27px 30px}.event-chip{display:inline-flex;align-items:center;gap:5px;color:#a7caf8;font-size:7px;font-weight:600;letter-spacing:1.5px;border:1px solid #42628577;background:#26436433;border-radius:3px;padding:4px 7px}.event-chip svg{width:9px;height:9px}.banner-content h2{font:600 31px/1.13 'Barlow Condensed',sans-serif;letter-spacing:.4px;margin:13px 0 10px}.banner-content h2 span{display:block;color:#b6bcf8}.banner-content p{color:#8ea5c1;font-size:10px;margin:0}.banner-note{display:flex;align-items:center;gap:6px;color:#7498bc;font-size:8px;margin-top:18px}.banner-note .status-dot{width:4px;height:4px}.rhythm-art{position:relative;align-self:stretch;width:40%;min-width:245px;display:grid;place-items:center;margin-right:25px}.orbit{position:absolute;border:1px solid #7598f52a;border-radius:50%;width:165px;height:165px;transform:rotateX(52deg) rotateZ(-22deg);box-shadow:0 0 25px #8690ef0c,inset 0 0 20px #5e9dff0d}.orbit-two{width:245px;height:245px;transform:rotateX(52deg) rotateZ(25deg);border-style:dashed;border-color:#a59ce126}.art-grid{display:grid;grid-template-columns:repeat(3,49px);grid-template-rows:repeat(3,43px);gap:4px;transform:rotate(-10deg) skew(-7deg);filter:drop-shadow(0 12px 15px #0005)}.art-grid span{display:grid;place-items:center;background:linear-gradient(140deg,#67a9e544,#7b78c922);border:1px solid #96b8ff77;border-radius:8px;box-shadow:inset 0 0 13px #9a8cff1f,0 0 12px #6eaaff16;color:#b8d8ff;font:500 35px 'Barlow Condensed';text-shadow:0 0 12px #77beff88}.art-grid span:nth-child(1){grid-area:1/1}.art-grid span:nth-child(2){grid-area:1/3}.art-grid span:nth-child(3){grid-area:2/2;color:#d1bbff;background:linear-gradient(140deg,#7b80d444,#7c64ad44);font-size:22px;border-color:#b6a5f788}.art-grid span:nth-child(4){grid-area:3/1}.art-grid span:nth-child(5){grid-area:3/3}.orbit-label{position:absolute;bottom:17px;right:0;font-size:6px;letter-spacing:2px;color:#6781a5}.orbit-label span{color:#797395;margin-left:13px}.rooms-section{margin-top:30px}.section-heading,.title-row{display:flex;align-items:center}.section-heading{justify-content:space-between;margin-bottom:18px}.title-row{gap:10px}.title-row h2{font-size:17px;font-weight:600;margin:0;letter-spacing:-.3px}.count{font-size:9px;color:#a5b8d5;border:1px solid #304057;border-radius:4px;padding:2px 6px}.sample-caption{font-size:6px;letter-spacing:1.2px;color:#50627e;margin-left:7px}.text-button{display:flex;gap:5px;align-items:center;background:none;border:none;color:#8294b1;font-size:14px}.text-button span{font-size:9px}.toolbar{display:flex;justify-content:space-between;gap:12px;margin-bottom:20px}.filters{display:flex;align-items:center;gap:5px;background:#0c1422;border:1px solid #1c2940;border-radius:7px;padding:4px}.filter{border:1px solid transparent;background:none;border-radius:4px;padding:8px 11px;display:flex;align-items:center;gap:6px;color:#71829e;font-size:9px;white-space:nowrap}.filter.active{color:#b9d9ff;background:#1a2d47;border-color:#345271;box-shadow:0 1px 6px #0003}.filter .status-dot{width:4px;height:4px}.search{display:flex;align-items:center;gap:8px;border:1px solid #26334b;border-radius:6px;background:#0d1523;padding:8px 11px;width:235px;color:#657793}.search svg{width:13px;height:13px}.search input{color:#c8d4e9;min-width:0;width:100%;background:none;border:none;outline:none;font-size:9px}.search input::placeholder{color:#62738f}.search kbd{border:1px solid #2a374e;border-radius:3px;padding:0 4px;color:#5d7090;font-size:9px}.room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.room-card{position:relative;background:linear-gradient(150deg,#121e30,#111727);border:1px solid #375073;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px #6b98dd08,0 0 22px #3967c00a;transition:border-color .2s,transform .2s,box-shadow .2s}.room-card:before{content:'';position:absolute;top:-1px;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,#9bd3ff,transparent);box-shadow:0 0 9px #8cb9ff;z-index:1}.room-card:hover{transform:translateY(-3px);border-color:#778dc7;box-shadow:0 0 22px #4f83c824,0 8px 24px #0004}.room-card.playing{border-color:#42415e}.room-card.playing:before{background:linear-gradient(90deg,transparent,#b59ee1,transparent)}.card-top{display:flex;align-items:center;justify-content:space-between;padding:15px 15px 10px}.room-number{font:500 8px 'DM Sans';color:#617898;letter-spacing:1.2px}.room-state{display:flex;align-items:center;gap:5px;font-size:6px;letter-spacing:1.1px;color:#8cd8c1;border:1px solid #38655466;background:#284a3d22;border-radius:3px;padding:4px 6px}.room-state .status-dot{height:3px;width:3px}.playing .room-state{color:#b6a1e2;background:#54427422;border-color:#65517d66}.playing .status-dot{background:#ac91e1;box-shadow:none}.room-name{font-size:12px;font-weight:600;letter-spacing:-.1px;margin:0;padding:0 15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.host-line{display:flex;gap:5px;align-items:center;color:#6d809e;font-size:8px;padding:7px 15px 12px}.host-line svg{width:10px;height:10px;color:#9a91c5}.host-line strong{font-weight:400;color:#95a9c5}.song-art{height:112px;margin:0 10px;border-radius:5px;position:relative;overflow:hidden;background:#142237}.song-art img{width:100%;height:100%;object-fit:cover;filter:brightness(.66) saturate(.85);transition:transform .5s}.room-card:hover .song-art img{transform:scale(1.04)}.song-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#081322ee,transparent 85%)}.song-details{position:absolute;bottom:11px;left:12px;right:12px;z-index:1}.song-caption{font-size:6px;letter-spacing:1.5px;color:#a5b9d1;display:flex;gap:4px;align-items:center;margin-bottom:5px}.song-caption svg{width:9px;height:9px;color:#9acbff}.song-title{font-family:'Barlow Condensed',sans-serif;font-size:23px;font-weight:600;line-height:1;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-sub{font-size:7px;color:#89a0ba;margin-top:5px}.card-meta{display:flex;align-items:center;gap:5px;padding:12px 15px 10px}.mode-tag{font-size:6px;font-weight:600;letter-spacing:1px;color:#8fb7e1;border:1px solid #2e4c6c;background:#243d552d;border-radius:3px;padding:4px 6px}.difficulty{font:600 10px 'Barlow Condensed';letter-spacing:.5px;color:#79b9f8;margin-left:3px}.difficulty.double{color:#b6a0e8}.meta-region{margin-left:auto;font-size:7px;color:#617894;letter-spacing:.6px}.card-bottom{border-top:1px solid #25344c88;margin:0 15px;padding:12px 0 13px;display:flex;align-items:center;gap:7px}.avatars{display:flex;align-items:center;gap:4px}.avatar{display:grid;place-items:center;width:23px;height:23px;background:linear-gradient(135deg,#29415e,#3e3757);border:1px solid #526185;border-radius:6px;font-size:6px;color:#bacbe6}.avatar:nth-child(2){background:linear-gradient(135deg,#354e4e,#28394c);border-color:#466e70}.avatar:nth-child(3){background:linear-gradient(135deg,#4f3c55,#303d5b);border-color:#725e80}.avatar.slot{background:transparent;border:1px dashed #34445f;color:#526783;font-size:10px}.occupancy{font-size:8px;color:#798eac;white-space:nowrap}.occupancy b{color:#c8d6eb;font-weight:500}.join{display:flex;align-items:center;gap:5px;margin-left:auto;border:1px solid #45678d;border-radius:4px;background:linear-gradient(110deg,#203d5c,#24354e);padding:6px 9px;color:#badbff;font-size:7px;font-weight:600;letter-spacing:1px}.join svg{width:12px;height:12px}.join:hover{border-color:#91c5ff;background:#2c4d72}.playing .join{border-color:#4c4968;background:#2a263f;color:#b7abcf}.lobby-footer{display:flex;align-items:center;justify-content:space-between;margin:20px 0 30px;color:#5d728e;font-size:7px}.lobby-footer>span:first-child{display:flex;align-items:center;gap:6px}.lobby-footer>span:last-child{font-size:6px;letter-spacing:.8px;color:#3f526f}.page-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:20px 40px;border-top:1px solid #19263b;font-size:7px;color:#475d7a}.footer-brand{font-weight:700;font-size:9px;letter-spacing:1.4px;color:#7c90ae}.footer-brand span{color:#354761;margin:0 5px}.page-footer>span:last-child{font-size:6px;letter-spacing:1px}.empty{padding:60px;text-align:center;border:1px dashed #2c405f;color:#9aacc9;border-radius:10px}dialog{width:min(480px,calc(100% - 32px));padding:25px;border-radius:15px;border:1px solid #5b6fa2;background:radial-gradient(ellipse at right top,#3b376133,transparent 60%),#101a2b;color:var(--text);box-shadow:0 0 45px #6a8ffb1c,0 25px 90px #0008}dialog::backdrop{background:#030711bb;backdrop-filter:blur(7px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.close{border:1px solid #344460;background:#182239;color:#97aac8;border-radius:6px;font-size:20px;line-height:1;width:29px;height:29px}.muted{color:#8b9db9;font-size:12px;line-height:1.7}dialog h2{font:600 30px 'Barlow Condensed';margin:5px 0 8px}dialog form{display:flex;flex-direction:column;gap:18px;margin-top:22px}dialog label{display:flex;flex-direction:column;gap:8px;font-size:11px;color:#9db0cc}dialog input,dialog select{width:100%;padding:12px;background:#0b1423;color:#d5e2f6;border:1px solid #344b6e;border-radius:6px;min-width:0}.dialog-disclaimer{font-size:9px;color:#5e7597;line-height:1.7;margin-bottom:0}.detail-art{width:100%;height:160px;object-fit:cover;border-radius:8px;margin:15px 0}.detail-players{display:flex;gap:10px;margin:18px 0}.player-tile{flex:1;border:1px solid #30445f;padding:12px 5px;border-radius:6px;font-size:10px;text-align:center;color:#9eb0cc;background:#121f33}.player-tile span{display:block;font-size:8px;color:#6689b3;margin-top:7px}.dialog-actions{display:flex;gap:10px;margin-top:20px}.dialog-actions button{flex:1}.secondary{padding:12px 16px;border:1px solid #57638a;border-radius:6px;background:#232942;color:#bfc8eb;font-size:11px;font-weight:600}.secondary.ready{border-color:#58b392;color:#a6efd5;background:#183d34}.primary:disabled{opacity:.35;cursor:not-allowed}#toast{position:fixed;left:calc(50% + 110px);bottom:25px;transform:translate(-50%,20px);border:1px solid #557aa7;background:#17263c;color:#c1dfff;padding:12px 20px;max-width:calc(100vw - 30px);border-radius:7px;box-shadow:0 8px 35px #0006;font-size:11px;opacity:0;pointer-events:none;transition:.2s;z-index:10}#toast.visible{opacity:1;transform:translate(-50%,0)}
@media(min-width:1600px){.room-grid{gap:24px}.song-art{height:150px}.room-name{font-size:14px}.song-title{font-size:28px}.card-top{padding-top:18px}.room-card{padding-bottom:3px}}
@media(max-width:1150px){.sidebar{width:190px;padding-inline:12px}.brand{font-size:25px}.shell{margin-left:190px}.topbar{padding-inline:27px}main{padding:28px 27px 0}.room-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.song-art{height:132px}.page-footer{padding-inline:27px}.sample-caption{display:none}#toast{left:calc(50% + 95px)}}
@media(max-width:760px){.sidebar{width:70px;align-items:center;padding:23px 8px 14px}.brand{margin:0 0 35px;gap:0}.brand>span:last-child,.nav-label,.nav-count,.tiny-dot,.sidebar-divider,.practice-link,.sidebar-bottom{display:none}.sidebar nav{width:100%}.nav-item{font-size:0;justify-content:center;padding:14px 8px;gap:0}.nav-item svg{width:20px;height:20px}.shell{margin-left:70px}.topbar{height:66px;padding-inline:20px}.top-actions{gap:12px}.preview-label{font-size:6px}.profile>span:not(.profile-avatar){display:none}main{padding:25px 20px 0}.welcome{align-items:flex-start}.welcome h1{font-size:28px;max-width:250px}.welcome p{font-size:10px;line-height:1.7;max-width:240px}.welcome .primary{font-size:0;padding:11px}.welcome .primary svg{width:19px;height:19px}.eyebrow{font-size:6px;letter-spacing:1.5px}.feature-banner{min-height:190px}.banner-content{padding:23px 20px}.banner-content h2{font-size:29px}.banner-content p{max-width:170px;font-size:9px;line-height:1.6}.rhythm-art{min-width:135px;margin-right:4px;opacity:.7}.art-grid{grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,29px);gap:3px}.art-grid span{font-size:25px;border-radius:5px}.art-grid span:nth-child(3){font-size:16px}.orbit-one{width:110px;height:110px}.orbit-two{width:165px;height:165px}.orbit-label{display:none}.banner-note{font-size:7px}.toolbar{flex-wrap:wrap}.search{width:100%}.filters{width:100%;justify-content:space-between}.filter{flex:1;justify-content:center;padding-inline:5px}.room-grid{gap:14px}.card-bottom{gap:4px}.avatar{width:19px;height:21px}.occupancy{font-size:7px}.join{padding:6px;font-size:6px}.join svg{width:10px}.lobby-footer>span:last-child{display:none}.page-footer{padding:17px 20px}.page-footer>span:not(:first-child){display:none}#toast{left:calc(50% + 35px)}}
@media(max-width:540px){.room-grid{grid-template-columns:1fr}.song-art{height:145px}.room-name{font-size:14px}.song-title{font-size:29px}.card-top{padding-top:16px}.room-state{font-size:7px}.card-bottom{padding-block:13px}.avatar{width:26px;height:26px;font-size:8px}.occupancy{font-size:9px;margin-left:3px}.join{font-size:8px;padding:8px 12px}.room-number{font-size:9px}.host-line{font-size:9px}.mode-tag{font-size:7px}.difficulty{font-size:12px}.meta-region{font-size:8px}.welcome h1{font-size:27px}.feature-banner{min-height:180px}.banner-content h2{font-size:27px}.rhythm-art{position:absolute;right:-30px;width:145px;opacity:.3;inset-block:0}.banner-content{position:relative}.banner-content p{max-width:220px}.title-row h2{font-size:16px}.topbar{padding-inline:16px}.breadcrumb{font-size:8px;gap:10px}.profile-avatar{width:30px;height:30px}.top-actions{gap:8px}.preview-label{padding:4px}main{padding-inline:15px}.welcome{gap:7px}.welcome .primary{padding:10px}.sample-caption{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}