:root{--bg:#f1efe8;--fg:#222;--btn:#00000022;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#15151c;--fg:#e8e8ee;--btn:#ffffff26}}
:root[data-theme="dark"]{--bg:#15151c;--fg:#e8e8ee;--btn:#ffffff26}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif}
body{display:flex;flex-direction:column;align-items:center;min-height:100vh}
#wrap{width:min(100%,960px)}
canvas{width:100%;display:block;touch-action:none;background:#000}
#pad{display:flex;justify-content:space-between;padding:10px;gap:10px;user-select:none;-webkit-user-select:none}
#pad div{flex:1;text-align:center;padding:18px 0;border-radius:12px;background:var(--btn);font-size:22px;touch-action:none}
#pad .l,#pad .r{flex:.6}
p{margin:6px 12px;font-size:14px;opacity:.75;text-align:center}