/* 鼓 drum — ink-wash + warm light. one canvas, no libraries. */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:#f4efe3}
body{font-family:Georgia,'Noto Serif',serif;color:#1c1a17;-webkit-user-select:none;user-select:none}
#stage{position:fixed;inset:0;display:block;cursor:crosshair;touch-action:none}
#ui{position:fixed;inset:0;pointer-events:none;z-index:2}
#seat{position:absolute;top:18px;left:22px;font-size:15px;letter-spacing:.04em}
#seat b{font-size:24px;font-weight:normal}
#meters{position:absolute;top:14px;right:22px;text-align:right;font-size:13px;line-height:1.6}
#meters #bpm{font-size:36px}
#meters small{opacity:.55}
#sound{position:absolute;bottom:20px;right:22px;pointer-events:auto;background:none;border:1px solid #1c1a17;border-radius:20px;padding:6px 14px;font:inherit;font-size:13px;color:#1c1a17;cursor:pointer}
#sound:hover{background:#1c1a17;color:#f4efe3}
#essay{position:absolute;bottom:20px;left:22px;max-width:min(430px,80vw);pointer-events:auto;font-size:14px;line-height:1.65}
#essay summary{cursor:pointer;list-style:none;border-bottom:1px solid #1c1a17;display:inline-block;padding-bottom:2px}
#essay summary::-webkit-details-marker{display:none}
#essay .essay-body{margin-top:10px;background:rgba(244,239,227,.92);border:1px solid rgba(28,26,23,.28);padding:14px 16px;max-height:46vh;overflow:auto}
#essay h1{font-size:18px;margin-bottom:6px}
#essay h2{font-size:15px;margin:12px 0 4px}
#essay p{margin:8px 0}
#badge{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:12px;opacity:.55;white-space:nowrap}
@media(max-width:700px){#badge{display:none}#essay{max-width:64vw;font-size:13px}#meters #bpm{font-size:28px}}