:root{color-scheme:dark;--mint:#c5ff66;--muted:#8b909f}*{box-sizing:border-box}body{margin:0;background:#0d1016;color:#f1f3f8;font-family:Inter,system-ui,sans-serif}header{height:85px;border-bottom:1px solid #252933;display:flex;align-items:center;justify-content:space-between;padding:0 6vw}header b{font-size:26px;letter-spacing:3px}header span{font-size:12px;color:var(--muted);letter-spacing:1px;margin-left:20px}small{color:var(--muted);line-height:1.7}button,select,.upload{border:1px solid #353b49;background:#1c212b;color:white;border-radius:9px;padding:12px 20px;font:inherit;cursor:pointer}button:hover,.upload:hover{border-color:var(--mint);color:var(--mint)}button:disabled{opacity:.5;cursor:wait}main{max-width:1160px;margin:auto;padding:65px 30px 25px;display:grid;grid-template-columns:1fr 1fr;gap:40px}.eyebrow{font-size:11px;letter-spacing:2px;color:var(--mint)}h1{font-size:clamp(40px,5vw,68px);line-height:1.15;letter-spacing:-3px;margin:28px 0}h1 span{color:var(--mint)}p{color:var(--muted);line-height:1.8}h2{font-size:21px}h3{margin:0}.tags{font-size:12px;color:#b1b7c6;margin-top:35px}i{margin:0 12px}.section-title{display:flex;justify-content:space-between;align-items:center}.section-title span{font-size:10px;color:var(--muted)}.demo{display:flex;gap:25px;padding:25px;background:#191e28;border:1px solid #303746;border-radius:16px}.cover{width:130px;flex-shrink:0;background:var(--mint);color:#19260a;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:85px;font-weight:800;transform:rotate(-3deg);border-radius:6px}.cover span{font-size:11px;letter-spacing:2px}.demo h2{margin:10px 0}.demo p{font-size:12px}.import{margin-top:20px;border:1px solid #2b303b;border-radius:16px;padding:25px}.import p{font-size:13px}.upload{display:block;text-align:center;background:transparent}.upload input{display:none}form{display:flex;gap:8px;margin:15px 0}input[type=url]{min-width:0;flex:1;background:#0d1016;border:1px solid #363b46;border-radius:8px;padding:10px;color:white}#selection{grid-column:1/-1;border-top:1px solid #303641;padding-top:20px}.options{display:flex;gap:25px;margin:20px 0}.primary{background:var(--mint);color:#18210b;font-weight:bold;min-width:240px}.primary:hover{color:#18210b}#status,footer{grid-column:1/-1;margin:0;font-size:12px}footer{color:#5c6576}#play{position:fixed;inset:0;background:#080b11;z-index:10;max-width:750px;margin:auto}.hud{height:80px;display:flex;justify-content:space-between;align-items:center;padding:15px 25px}.hud strong{display:block;font-size:25px;font-variant-numeric:tabular-nums}.hud small{font-size:9px}canvas{width:100%;height:calc(100% - 170px);display:block}.keys{display:flex;height:90px;touch-action:none}.keys button{width:25%;border-radius:0;background:#171d29;font-size:24px;touch-action:none;user-select:none}.keys button.active{background:#657f3b;color:white}#overlay{position:absolute;inset:80px 0 0;background:#090d14e8;display:flex;align-items:center;justify-content:center;text-align:center;backdrop-filter:blur(9px)}#overlay h1{font-size:70px;color:var(--mint);margin:10px}#overlay p{margin:12px}#overlay button{margin:8px}dialog{max-width:480px;border:1px solid #414959;border-radius:20px;background:#191e28;padding:30px}dialog::backdrop{background:#000a}dialog input{margin:15px;padding:10px;max-width:140px}[hidden]{display:none!important}@media(max-width:750px){header{height:65px;padding:0 20px}header small,header span{display:none}main{grid-template-columns:1fr;padding:35px 20px;gap:25px}h1{font-size:46px}.tags{margin-top:20px}.hero p{font-size:14px}.cover{width:95px}.demo{gap:20px;padding:20px}.options{flex-wrap:wrap}.hud{padding:12px}#songname{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}

canvas{touch-action:none}.guide{grid-column:1/-1;padding:25px;border:1px solid #303746;border-radius:16px;background:#141a25}.guide>div{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.guide p{font-size:12px}.guide b{font-size:14px;color:#c5ff66}.guide p:nth-child(2) b{color:#ad92ff}.guide p:nth-child(3) b{color:#55dfff}.guide p:nth-child(4) b{color:#ffae62}.keys button{border-top:2px solid #667b96;background:linear-gradient(#202c40,#101824)}@media(max-width:700px){.guide>div{grid-template-columns:1fr 1fr}}

/* Keep browser selection and touch callouts out of rhythm gestures. */
#play, #play * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
}
#play { overscroll-behavior: contain; }
#game, #play .keys, #play .keys button { touch-action: none; }

#video-layer{position:absolute;inset:80px 0 90px;z-index:0;pointer-events:none;background:#080b11;overflow:hidden}#background-video{width:100%;height:100%;object-fit:contain;pointer-events:none}#video-shade{position:absolute;inset:0;background:rgba(0,0,0,.7);pointer-events:none}#game{position:relative;z-index:1}.hud,.keys{position:relative;z-index:2}#overlay{z-index:3}#video-enabled{width:auto}#darkness-label{font-size:12px}#game-settings{padding:10px;font-size:12px}

#video-layer.corner{inset:auto;top:92px;left:12px;width:33.333333%;height:calc(40% - 68px);border-radius:8px;pointer-events:none}#video-layer.corner #video-shade{display:none}#video-layer.corner #background-video{object-fit:contain}

.brand-lockup,.game-track{display:inline-flex;align-items:center;gap:10px;min-width:0}
.brand-lockup{color:#f1f3f8;text-decoration:none}
.brand-lockup strong{font-size:24px;letter-spacing:-.7px}
.brand-lockup span{margin:0;color:var(--mint);font-size:13px}
.brand-lockup img,.game-track img{flex:none}
.brand-cta{display:inline-flex;align-items:center;gap:24px;margin-top:14px;padding:12px 18px;border-radius:9px;background:var(--mint);color:#10151b;text-decoration:none;font-weight:750}
.brand-cta:hover{background:#d9ff9e}
.brand-cta:focus-visible,.brand-lockup:focus-visible{outline:2px solid #ad92ff;outline-offset:4px}
#library{scroll-margin-top:18px}
.cover-neon{background:#252f24;gap:8px;color:var(--mint)}
.game-track{gap:8px}
footer strong{color:#b1b7c6}
@media(max-width:750px){.brand-lockup strong{font-size:20px}.brand-lockup span{display:inline}.brand-lockup img{width:32px;height:32px}.hero h1{font-size:clamp(34px,9vw,46px)}.game-track img{width:20px;height:20px}#songname{max-width:112px}}

/* Beatmio / 节奏王牌 brand refinement */
.brand-lockup strong{letter-spacing:1px;white-space:nowrap}.brand-lockup span{letter-spacing:0;white-space:nowrap}
#linkform input{min-width:0;flex:1;background:#0d1016;border:1px solid #363b46;border-radius:8px;padding:10px;color:#f1f3f8;font:inherit}
#linkform input:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
button:focus-visible,select:focus-visible,.upload:focus-within{outline:2px solid #ad92ff;outline-offset:3px}
.hero{position:relative}.hero:before{content:"";position:absolute;top:-30px;left:-30px;width:280px;height:280px;background:radial-gradient(circle,#c5ff660c,transparent 70%);pointer-events:none;z-index:-1}
@media(max-width:400px){header{padding:0 12px}.brand-lockup{gap:7px}.brand-lockup strong{font-size:18px}.brand-lockup span{font-size:11px}header>button{padding:9px 11px;font-size:13px}.demo{gap:14px;padding:16px}.cover{width:75px}.demo h2{font-size:18px}.tags i{margin:0 6px}}