body { margin:0; min-height:100svh; background:#0b0b0d; color:#fff; font-family:"Noto Sans JP",sans-serif; }
.play-header { display:flex; justify-content:space-between; gap:20px; max-width:1100px; margin:auto; padding:24px; font-size:13px; font-weight:800; }
.play-header a { color:#fff; text-decoration:none; }
.play-header a:last-child { color:#8fe7ee; }
.play-main { max-width:960px; margin:auto; padding:40px 20px; text-align:center; }
.play-kicker { color:#8fe7ee; font-size:12px; font-weight:800; letter-spacing:.2em; }
h1 { margin:12px 0; font-family:"Barlow Condensed",Impact,sans-serif; font-size:clamp(64px,12vw,120px); line-height:1; letter-spacing:-.04em; }
h1 span { color:var(--yellow,#ffe34a); }
.play-intro { font-size:clamp(18px,3vw,24px); font-weight:800; }
.play-help,.play-note { color:#bcbcc3; font-size:13px; line-height:1.9; }
.play-kit.drum-fab { position:relative; inset:auto; height:auto; pointer-events:auto; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:52px 18px; width:100%; max-width:720px; margin:48px auto 64px; padding:28px 12px 42px; z-index:auto; box-sizing:border-box; }
.play-kit .drum-piece { position:relative; inset:auto; width:100%; height:100px; opacity:1; pointer-events:auto; transform:none; transition:none; border:0; padding:0; background:transparent; cursor:pointer; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }
.play-kit .mini-drum { zoom:1.45; }
.play-kit .drum-piece strong { top:calc(100% + 10px); font-size:11px; }
kbd { display:inline-block; min-width:17px; margin-left:4px; color:#8fe7ee; font-family:monospace; }
.play-footer { padding:24px; color:#777780; text-align:center; font-size:10px; letter-spacing:.12em; }
@media(max-width:540px) { .play-main { padding-top:24px; } .play-header { padding:20px 16px; font-size:11px; } .play-kit.drum-fab { gap:48px 4px; padding:20px 0 32px; margin-top:32px; } .play-kit .mini-drum { zoom:.85; } .play-kit .drum-piece { height:72px; } .play-kit .drum-piece strong { font-size:8px; padding:3px; } kbd { margin-left:1px; min-width:10px; } }

@media(min-width:541px) and (max-width:700px) { .play-kit .mini-drum { zoom:1.1; } }

.play-kit .drum-piece { grid-column:span 2; }
.play-kit .drum-piece:nth-child(6) { grid-column:2 / span 2; }
.play-kit .drum-piece:nth-child(7) { grid-column:4 / span 2; }
.play-kit .drum-piece:nth-child(8) { grid-column:6 / span 2; }
.play-kit .drum-piece:nth-child(9) { grid-column:8 / span 2; }
#demo-play { display:inline-block; padding:0; border:0; background:transparent; color:inherit; font:inherit; letter-spacing:inherit; line-height:inherit; cursor:pointer; touch-action:manipulation; }
#demo-play:focus-visible { outline:3px solid var(--cyan); outline-offset:8px; }
#demo-play[aria-pressed="true"] span { color:var(--cyan); }

.beat-toast { position:fixed; z-index:100; top:max(24px,env(safe-area-inset-top)); left:50%; padding:14px 28px; border:2px solid var(--yellow); border-radius:999px; background:#0b0b0df2; color:var(--yellow); font-family:"Barlow Condensed",Impact,sans-serif; font-size:30px; font-weight:800; white-space:nowrap; box-shadow:0 8px 40px #0008; opacity:0; transform:translate(-50%,-20px); pointer-events:none; transition:opacity .18s,transform .18s; }
.beat-toast.is-visible { opacity:1; transform:translate(-50%,0); }
@media(prefers-reduced-motion:reduce) { .beat-toast { transition:none; } }