:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#0a0a0e;--surface:#14141a;--surface-2:#1a1a22;--surface-3:#22222c;--border:#23232d;--border-strong:#33333f;--text:#f2f3f7;--muted:#a3aabc;--faint:#6d7485;--accent:#ff2e63;--accent-deep:#b81d49;--accent-dim:#ff2e6329;--radius:18px;--font-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif}*{box-sizing:border-box}html,body{height:100%}html{height:100%;overflow-x:clip}body{background:var(--bg);color:var(--text);margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;overflow-x:hidden}@media (prefers-reduced-motion:reduce){.ring{transition:none!important}}::selection{background:var(--accent-dim)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.shell{flex-direction:column;gap:20px;max-width:720px;margin:0 auto;padding:24px 16px 48px;display:flex}.shell.room{max-width:1200px}.shell.landing{max-width:1120px}.room-grid{flex-direction:column;gap:20px;display:flex}@media (width<=639px){.room-grid>.guest-gap{order:-1}}@media (width>=640px) and (width<=999px){.room-grid{grid-template-columns:minmax(260px,360px) 1fr;align-items:start;display:grid}.room-grid>.card:first-child{grid-area:1/1/3}.room-grid>.card:nth-child(2){grid-area:1/2}.room-grid>.queue-card{grid-area:3/1/auto/-1;max-height:45vh;overflow-y:auto}}@media (width>=1000px){.room-grid{grid-template-columns:300px 1fr 1fr;align-items:start;display:grid}.room-grid .queue-card{max-height:calc(100vh - 160px);position:sticky;top:20px;overflow-y:auto}}.topbar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.trial-pill{background:var(--accent-dim);color:#ff8ba7;letter-spacing:.04em;white-space:nowrap;border:1px solid #ff2e6359;border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:600}.trial-pill--expired{background:#ff2e6338;border-color:#ff2e6380}.trial-pill--grace{color:#fbbf24;background:#f59e0b29;border-color:#f59e0b73}.trial-pill--paid{color:#5eead4;background:#22e0c824;border-color:#22e0c866}.wordmark{font-family:var(--font-display);letter-spacing:-.02em;align-items:center;gap:10px;margin:0;font-size:1.5rem;font-weight:700;display:inline-flex}.wordmark svg{color:var(--accent);flex-shrink:0}.topbar .wordmark{font-size:1.35rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:relative;box-shadow:0 8px 24px #0000004d}.card h2{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0 0 14px;font-size:.8rem;font-weight:600}.queue-card h2{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:clamp(24px,4vw,56px);padding:clamp(20px,4vw,40px) 0;display:grid}@media (width<=919px){.hero{grid-template-columns:1fr}}.hero-copy h1{font-family:var(--font-display);letter-spacing:-.03em;margin:0 0 14px;font-size:clamp(2.4rem,6.5vw,4rem);font-weight:700;line-height:1.02}.hero-copy p{color:var(--muted);max-width:46ch;margin:0;font-size:1.08rem;line-height:1.6}.hero-actions{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:28px;display:flex}.join-title{font-family:var(--font-display);letter-spacing:-.01em;margin:0;font-size:1.35rem;font-weight:700}.hero-photo{border-radius:var(--radius);border:1px solid var(--border);aspect-ratio:4/3;background:#000;position:relative;overflow:hidden;box-shadow:0 16px 48px #0006}.hero-photo img{object-fit:cover;width:100%;height:100%;display:block}.join-form{gap:10px;width:100%;max-width:420px;margin-top:4px;display:flex}.join-form input{text-transform:uppercase;letter-spacing:.14em;flex:1;min-width:0;margin-bottom:0;font-size:1.05rem}.join-form input.invalid{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.join-form button.primary{white-space:nowrap;font-size:1rem}.nav-cta{border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font-family:var(--font-display);border-radius:999px;padding:9px 18px;font-size:.9rem;font-weight:600;text-decoration:none;transition:border-color .2s,background .2s}.nav-cta:hover{background:var(--accent-dim);border-color:#ff2e638c}.nav-pills{align-items:center;gap:8px;display:flex}.tv{background:var(--surface);padding:18px}.tv-bar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.live-dot{background:var(--accent);width:9px;height:9px;box-shadow:0 0 12px var(--accent);border-radius:50%;animation:1.6s ease-in-out infinite upnext-blink}.tv-stage{aspect-ratio:16/8.5;border:1px solid var(--border);background:radial-gradient(60% 80% at 50% 30%,#171726,#040406 75%),#040406;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:16px;display:flex;position:relative;overflow:hidden}@property --p{syntax:"<percentage>";inherits:false;initial-value:100%}.demo-ring{--p:100%;aspect-ratio:1;background:conic-gradient(var(--accent) var(--p), #ffffff14 0);border-radius:50%;justify-content:center;align-items:center;width:min(34%,160px);animation:15s linear infinite demo-timer;display:flex;position:relative;box-shadow:0 0 44px #ff2e634d}.demo-ring:before{content:"";background:radial-gradient(circle at 50% 30%,#141420,#07070b 72%);border-radius:50%;position:absolute;inset:9px}.demo-unit{z-index:1;font-family:var(--font-display);letter-spacing:.2em;color:#ff8ba7;text-align:center;font-size:.68rem;font-weight:700;line-height:1.5;position:relative}@keyframes demo-timer{0%{--p:100%}to{--p:0%}}.demo-song{border:1px solid var(--border);font-family:var(--font-display);text-overflow:ellipsis;white-space:nowrap;background:#09090ebf;border-radius:999px;max-width:88%;margin:0;padding:8px 18px;font-size:clamp(.85rem,2.2vw,1.05rem);font-weight:600;overflow:hidden}.demo-queue{flex-direction:column;gap:8px;margin:14px 0 0;padding:0;list-style:none;display:flex}.demo-queue li{border:1px solid var(--border);background:#0000004d;border-radius:14px;align-items:center;gap:12px;padding:9px 12px;display:flex}.demo-queue li:first-child{border-color:#ff2e638c}.demo-queue .thumb{background:var(--t);opacity:.9;border-radius:6px;flex-shrink:0;width:48px;height:30px}.demo-queue p{flex-direction:column;flex:1;min-width:0;margin:0;display:flex}.demo-queue strong{text-overflow:ellipsis;white-space:nowrap;font-size:.92rem;font-weight:600;overflow:hidden}.demo-queue em{color:var(--muted);font-size:.78rem;font-style:normal}.payment-banner{border-radius:var(--radius);background:#ff2e631f;border:1px solid #ff2e6366;margin:12px 0 0;padding:16px 20px}.payment-banner-inner{max-width:720px;margin:0 auto}.payment-banner-title{font-family:var(--font-display);color:#ff8ba7;margin:0 0 6px;font-size:1.05rem;font-weight:600}.payment-banner-detail{color:var(--muted);margin:0 0 6px;font-size:.92rem}.payment-banner-gcash{border:1px solid var(--border);font-family:var(--font-display);letter-spacing:.01em;background:#0000004d;border-radius:10px;margin:0 0 12px;padding:10px 14px;font-size:1rem}.payment-banner-row{align-items:stretch;gap:8px;margin-bottom:6px;display:flex}.payment-banner-row input{flex:1;min-width:0;margin-bottom:0}.payment-banner-row button{white-space:nowrap}.phone-modal{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);width:calc(100vw - 32px);max-width:420px;padding:24px;box-shadow:0 24px 60px #00000080}.phone-modal::backdrop{background:#000000a6}.phone-modal h3{font-family:var(--font-display);letter-spacing:-.015em;margin:0 0 8px;font-size:1.25rem;font-weight:600}.phone-modal .hint{margin:0 0 16px}.phone-modal input{letter-spacing:.04em;margin-bottom:8px;font-size:1.05rem}.phone-modal .paywall-detail{border:1px solid var(--border);font-family:var(--font-display);background:#0000004d;border-radius:12px;margin:0 0 16px;padding:14px 16px;font-size:1rem;line-height:1.6}.phone-modal .paywall-detail strong{font-weight:600}.phone-actions{justify-content:flex-end;gap:8px;margin-top:16px;display:flex}.phone-actions .secondary{border:1px solid var(--border-strong);color:var(--text);font:inherit;cursor:pointer;background:0 0;border-radius:12px;padding:12px 18px;font-weight:600}.phone-actions .secondary:hover{background:var(--surface-2)}.section{padding:clamp(24px,4vw,56px) 0}.preview-section .tv{margin-top:8px}h2.display{font-family:var(--font-display);letter-spacing:-.025em;margin:0 0 14px;font-size:clamp(1.8rem,4.5vw,2.5rem);font-weight:700}.section-lede{color:var(--muted);max-width:52ch;margin:0 0 28px;font-size:1.05rem;line-height:1.6}.steps{grid-template-columns:1.1fr 1fr;grid-auto-rows:minmax(180px,auto);gap:14px;margin:0;padding:0;list-style:none;display:grid}.step{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);display:flex;overflow:hidden}.step--hero{flex-direction:column;grid-area:1/1/span 3}.step--minor{flex-direction:row;grid-column:2;align-items:flex-start;gap:16px;padding:20px}.step-photo{background-color:#000;background-position:50%;background-size:cover;flex-shrink:0}.step--hero .step-photo{aspect-ratio:16/8}.step-photo--how{background-image:url(https://images.pexels.com/photos/6173888/pexels-photo-6173888.jpeg)}.step-body{flex-direction:column;gap:8px;padding:20px;display:flex}.step--hero .step-body{flex:1}.step--minor .step-body{flex:1;padding:0}.step-num{font-family:var(--font-display);color:#0000;-webkit-text-stroke:1.5px #ff2e638c;letter-spacing:-.02em;font-size:2.4rem;font-weight:700;line-height:1}.step--minor .step-num{font-size:1.8rem}.step h3{font-family:var(--font-display);letter-spacing:-.015em;margin:0;font-size:clamp(1.15rem,2.2vw,1.35rem);font-weight:600}.step--hero h3{font-size:clamp(1.35rem,2.6vw,1.65rem)}.step p{color:var(--muted);margin:0;font-size:.98rem;line-height:1.6}@media (width<=719px){.steps{grid-template-columns:1fr;grid-auto-rows:auto}.step--hero,.step--minor{grid-area:auto/1}}.feature-grid{grid-template-columns:repeat(12,1fr);gap:14px;display:grid}.feature{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);flex-direction:column;grid-column:span 3;display:flex;overflow:hidden}.feature--wide{grid-column:span 12}@media (width<=919px){.feature,.feature--wide{grid-column:span 12}.feature--wide .feature-photo{aspect-ratio:16/9}}.feature-photo{aspect-ratio:16/9;background-color:#000;background-position:50%;background-size:cover}.feature--wide .feature-photo{aspect-ratio:21/9}.feature-photo--1{background-image:url(https://images.pexels.com/photos/6173869/pexels-photo-6173869.jpeg)}.feature-body{flex-direction:column;gap:6px;padding:20px;display:flex}.feature--wide .feature-body{padding:clamp(24px,4vw,40px)}.feature h3{font-family:var(--font-display);letter-spacing:-.01em;margin:0;font-size:1.15rem;font-weight:600}.feature--wide h3{font-size:clamp(1.4rem,3vw,1.9rem)}.feature p{color:var(--muted);max-width:60ch;margin:0;font-size:.95rem;line-height:1.6}.cta-card{grid-template-columns:1fr minmax(280px,400px);align-items:center;gap:28px;padding:clamp(28px,5vw,52px);display:grid}@media (width<=719px){.cta-card{grid-template-columns:1fr}}.cta-card .hero-cta{width:100%}.cta-card .hero-cta button.primary{width:100%;margin:0;padding:16px 24px;font-size:1.05rem;box-shadow:0 6px 20px #ff2e634d}.footer{border-top:1px solid var(--border);color:var(--faint);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding-top:12px;font-size:.85rem;display:flex}.footer .wordmark{font-size:1.1rem}.footer p{margin:0}.footer-link{color:var(--faint);font-size:.85rem;text-decoration:none}.footer-link:hover{color:var(--text);text-decoration:underline}.cookie-banner{z-index:50;background:var(--surface-2);border:1px solid var(--border-strong);width:min(520px,100vw - 32px);color:var(--text);border-radius:14px;align-items:center;gap:16px;padding:14px 18px;font-size:.85rem;display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 12px 32px #00000073}.cookie-banner p{flex:1;margin:0;line-height:1.45}.cookie-banner a{color:var(--accent);text-decoration:none}.cookie-banner a:hover{text-decoration:underline}.cookie-banner .primary{flex-shrink:0;padding:9px 16px;font-size:.85rem}input,select{border:1px solid var(--border);width:100%;color:var(--text);font:inherit;background:#0000004d;border-radius:12px;margin-bottom:8px;padding:12px 14px;transition:border-color .2s,box-shadow .2s}input::placeholder{color:var(--faint)}input:focus,select:focus{box-shadow:0 0 0 3px var(--accent-dim);border-color:#ff2e6399;outline:none}input:disabled{opacity:.5}button.primary{background:var(--accent-deep);color:#fff;font:inherit;cursor:pointer;border:0;border-radius:12px;padding:12px 24px;font-weight:600;transition:transform .15s,box-shadow .2s,filter .2s;box-shadow:0 8px 28px #b81d4959}button.primary:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}button.primary:disabled{opacity:.5;cursor:default}.primary-link{color:var(--accent);align-self:flex-start;font-weight:600;text-decoration:none}.primary-link:hover{text-decoration:underline}button.add,button.remove{border:1px solid var(--border-strong);background:var(--surface-2);color:var(--text);font:inherit;cursor:pointer;border-radius:10px;padding:10px 14px;font-size:.85rem;font-weight:500;transition:background .15s,transform .15s}button.add{color:#ff7a9f}button.add:hover:not(:disabled){background:var(--accent-dim);transform:translateY(-1px)}button.add:disabled{opacity:.55;cursor:default}button.remove{color:var(--muted);margin-left:auto}button.remove:hover{color:var(--accent);background:#ff2e631f}.search-row{align-items:stretch;gap:8px;display:flex}.search-row input{flex:1;margin-bottom:0}.search-row button{white-space:nowrap;margin-top:0}.results{flex-direction:column;gap:8px;max-height:45vh;margin:14px 0 0;padding:0;list-style:none;display:flex;overflow-y:auto}.results .empty{color:var(--muted)}.result-item{border:1px solid var(--border);background:#00000038;border-radius:14px;align-items:center;gap:12px;padding:10px;display:flex}.result-item img,.queue-item img{border-radius:6px;flex-shrink:0}.result-item .title,.queue-item .title{flex:1;min-width:0;font-weight:500}.result-item .title,.result-item .title span{-webkit-line-clamp:2;overflow-wrap:anywhere;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.hidden{display:none!important}.badge{background:var(--surface-2);border:1px solid var(--border);color:var(--text);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;border-radius:999px;padding:4px 10px;font-size:.72rem;font-weight:600}.queue-item .badge{background:var(--accent);color:#fff;border:0;box-shadow:0 2px 12px #ff2e6373}.queue-item.next-up .badge{background:var(--accent-deep);box-shadow:0 2px 12px #b81d4973}.hint{color:var(--muted);font-size:.85rem}.error{color:var(--accent);font-size:.9rem}.hint.error{font-weight:500}.lyrics-btn{border:1px solid var(--border-strong);background:var(--surface-2);color:#ff7a9f;font:inherit;cursor:pointer;border-radius:10px;margin-top:10px;padding:8px 14px;font-size:.85rem;font-weight:500;transition:background .15s}.lyrics-btn:hover{background:var(--accent-dim)}.lyrics{border:1px solid var(--border);max-height:45vh;color:var(--text);white-space:pre-wrap;word-break:break-word;background:#0000004d;border-radius:12px;margin-top:10px;padding:14px 16px;font-size:.95rem;line-height:1.7;overflow-y:auto}.queue{flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;display:flex}.queue .empty{color:var(--muted)}.queue-item{border:1px solid var(--border);background:#00000038;border-radius:14px;align-items:center;gap:12px;padding:10px;transition:border-color .2s,box-shadow .2s;display:flex}.queue-item.playing{border-color:#ff2e6399;box-shadow:0 0 24px #ff2e6326}.queue-item.next-up{border-color:#8b5cf673}.queue-item .title{flex:1;font-weight:500}.queue-item .singer{color:var(--muted);font-size:.85rem}.fair-toggle{color:var(--muted);cursor:pointer;align-items:center;gap:8px;margin-left:auto;font-size:.78rem;font-weight:500;display:inline-flex}.fair-toggle input{accent-color:var(--accent);width:16px;margin:0}.fair-toggle:hover{color:var(--text)}.stage{aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--border-strong);background:#000;position:relative;overflow:hidden;box-shadow:0 24px 60px #00000080}.stage .player-wrap{z-index:1;position:absolute;inset:0}.stage .player-wrap #player{border:0;display:block;position:absolute;inset:0;width:100%!important;height:100%!important}.stage .swallow{z-index:2;pointer-events:auto;position:absolute;inset:0}#countdown{z-index:3;pointer-events:none;position:absolute;inset:0}.stage .overlay{text-align:center;pointer-events:none;justify-content:center;align-items:center;margin:0;display:flex;position:absolute;inset:0}.stage .overlay.error{color:var(--accent);font-weight:500}.stage a.overlay{pointer-events:auto;-webkit-backdrop-filter:blur(8px);border:1px solid var(--border);color:#fff;background:#000000a6;border-radius:999px;padding:8px 16px;font-size:.9rem;font-weight:600;text-decoration:none;position:absolute;inset:12px 12px auto auto}.stage .tap-sound{-webkit-backdrop-filter:blur(8px);border:1px solid var(--border);color:#fff;letter-spacing:.02em;white-space:nowrap;z-index:4;background:#000000a6;border-radius:999px;margin:0;padding:8px 18px;font-size:.9rem;font-weight:600;inset:auto auto 12px 50%;transform:translate(-50%)}.guest-gap .countdown{z-index:0;min-height:220px;position:relative;inset:auto}.guest-share{flex-direction:column;gap:14px;display:flex}.guest-share .hint{margin:0}.guest-gap .ring{width:min(38vmin,200px);box-shadow:0 0 44px #ff2e6340}.countdown{z-index:5;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:18px;display:flex;position:absolute;inset:0}.ring{--p:100%;aspect-ratio:1;background:conic-gradient(var(--accent) var(--p), #ffffff14 0);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:min(38vmin,300px);display:flex;position:relative;box-shadow:0 0 70px #ff2e6359}.ring:before{content:"";background:radial-gradient(circle at 50% 30%,#141420,#07070b 72%);border-radius:50%;position:absolute;inset:10px;box-shadow:inset 0 2px 12px #000000b3}.ring .num,.ring .unit{z-index:1;text-align:center;margin:0;position:relative}.ring .num{font-family:var(--font-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums;font-size:clamp(3.2rem,13vmin,7.5rem);font-weight:700;line-height:1}.ring .unit{text-transform:uppercase;letter-spacing:.22em;color:#ff8ba7;margin-top:8px;font-size:.72rem;font-weight:600}.countdown .song{-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);font-family:var(--font-display);letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap;background:#0009;border-radius:999px;max-width:90%;margin:0;padding:10px 22px;font-size:clamp(.95rem,2.6vmin,1.4rem);font-weight:600;overflow:hidden}@media (width<=640px){.ring{width:min(58vmin,240px)}.ring:before{inset:8px}}.up-next{background:var(--accent-dim);-webkit-backdrop-filter:blur(10px);color:#ff8ba7;font-family:var(--font-display);text-align:center;letter-spacing:.01em;border:1px solid #ff2e6359;border-radius:999px;justify-content:center;align-items:center;gap:10px;padding:14px 20px;font-size:1.05rem;font-weight:600;display:flex;box-shadow:0 8px 30px #ff2e631f}.up-next:before{content:"";background:var(--accent);width:8px;height:8px;box-shadow:0 0 12px var(--accent);border-radius:50%;animation:1.6s ease-in-out infinite upnext-blink}@keyframes upnext-blink{0%,to{opacity:1}50%{opacity:.35}}.join-row{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.join-row canvas{background:#fff;border-radius:14px;flex-shrink:0;padding:10px;box-shadow:0 8px 24px #0006}.join-row p{margin:0}.join-code{font-family:var(--font-display);letter-spacing:.14em;font-size:1.9rem;font-weight:700;margin:0 0 4px!important}.shell.room.display{max-width:none;height:100dvh;margin:0 auto}.shell.room.display .stage{flex:1;min-height:0;position:relative}.fab{z-index:40;background:var(--accent-deep);color:#fff;cursor:pointer;border:0;border-radius:999px;width:64px;height:64px;font-size:2rem;font-weight:600;line-height:1;transition:transform .15s;position:fixed;bottom:24px;right:24px;box-shadow:0 12px 36px #b81d4980}.fab:hover{transform:scale(1.06)}.backdrop{z-index:50;-webkit-backdrop-filter:blur(3px);background:#0009;position:fixed;inset:0}.drawer{z-index:60;-webkit-backdrop-filter:blur(20px);border-left:1px solid var(--border);visibility:hidden;background:#0a0a0feb;flex-direction:column;gap:16px;width:min(420px,100vw);padding:20px;transition:transform .28s cubic-bezier(.32,.72,0,1),visibility .28s;display:flex;position:fixed;top:0;bottom:0;right:0;overflow-y:auto;transform:translate(100%);box-shadow:-16px 0 48px #00000080}.drawer.open{visibility:visible;transform:translate(0)}.drawer-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.drawer-head h2{text-transform:none;letter-spacing:0;margin:0;font-size:1.1rem}.quality-row{color:var(--muted);flex-direction:column;gap:10px;font-size:.85rem;line-height:1.5;display:flex}button.close{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:10px;padding:6px 10px;font-size:1.4rem;line-height:1}button.close:hover{background:var(--surface-2);color:var(--text)}