*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#020b14;color:#e8f6ff;font-family:"PingFang SC","Hiragino Sans GB","Noto Sans SC",system-ui,sans-serif}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.logo{font-family:Georgia,"Times New Roman",serif;letter-spacing:.35em;font-size:13px;color:#ffcf7a;text-shadow:0 0 12px #ff9d3c}
#title{position:fixed;left:18px;top:14px;pointer-events:none}
#title .sub{font-size:14px;opacity:.85;margin-top:4px}
#title b{color:#ff8fb1}
#hint{position:fixed;right:16px;top:16px;max-width:360px;font-size:12px;line-height:1.6;background:rgba(3,20,34,.55);border:1px solid rgba(120,220,255,.18);padding:8px 12px;border-radius:10px;backdrop-filter:blur(6px);pointer-events:none}
#hint b{color:#7fe8ff}
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);padding:8px 16px;border-radius:20px;background:rgba(255,140,180,.18);border:1px solid rgba(255,160,200,.4);font-size:14px;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
#toast.show{opacity:1}
#panel{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);width:min(980px,calc(100% - 20px));background:linear-gradient(180deg,rgba(6,28,46,.82),rgba(2,14,26,.9));border:1px solid rgba(120,220,255,.22);border-radius:16px;padding:10px 12px;backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(0,0,0,.5)}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.small{font-size:12px;opacity:.8;margin:6px 2px}
button,select{font:inherit;font-size:13px;color:#e8f6ff;background:rgba(40,110,150,.35);border:1px solid rgba(130,220,255,.35);border-radius:9px;padding:6px 11px;cursor:pointer;transition:background .15s,transform .08s}
button:hover:not(:disabled){background:rgba(70,160,210,.5)}
button:active:not(:disabled){transform:scale(.96)}
button:disabled{opacity:.4;cursor:default}
button.big{background:linear-gradient(180deg,#ff9a5a,#e0547a);border-color:#ffb38a;font-weight:600}
button.on{background:#c0304e;border-color:#ff7090;animation:pulse 1s infinite}
button.ghost{background:transparent}
select option{background:#06202f}
@keyframes pulse{50%{box-shadow:0 0 14px #ff4d6d}}
.tempo{display:flex;align-items:center;gap:6px;font-size:13px}
.tempo input{width:120px;accent-color:#ff9a5a}
#bpm{display:inline-block;width:28px;text-align:right;color:#ffcf7a;font-weight:700}
#grid{display:grid;grid-template-columns:88px repeat(16,1fr);gap:3px;margin-top:4px}
#grid.folded{display:none}
.lab{font-size:12px;display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap;overflow:hidden}
.lab i{width:9px;height:9px;border-radius:50%;flex:none}
.lab kbd{font-size:10px;opacity:.6;font-family:inherit}
.cell{height:20px;border-radius:4px;background:rgba(120,200,255,.08);border:1px solid rgba(120,200,255,.12);cursor:pointer}
.cell.beat{background:rgba(120,200,255,.16)}
.cell.on{background:var(--c);border-color:transparent;box-shadow:0 0 8px var(--c)}
.cell.ph{outline:2px solid #ffe7a8;outline-offset:-1px}
#start{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,rgba(10,50,80,.55),rgba(0,5,12,.92));z-index:10}
#start .card{text-align:center;padding:30px 36px;max-width:440px}
#start h1{font-size:34px;margin:12px 0 8px;background:linear-gradient(90deg,#ffcf7a,#ff7aa8,#7fe8ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#start p{line-height:1.7;opacity:.9}
@media (max-width:700px){
  #hint{display:none}
  #title .sub{font-size:12px}
  #panel{bottom:6px;padding:8px}
  #grid{grid-template-columns:54px repeat(16,1fr);gap:2px}
  .lab kbd{display:none}
  .cell{height:16px}
  .tempo input{width:80px}
  button,select{padding:5px 8px;font-size:12px}
}