:root{--panel:rgba(28,20,18,.78);--ink:#f3e6cc;--muted:#bba78c;--acc:#e08a5c;--acc2:#86ab9f}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#140e0c;color:var(--ink);font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#view{position:fixed;left:0;top:0;width:100vw;height:100vh;display:block}
#loading{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px;letter-spacing:.05em;transition:opacity .8s;pointer-events:none}
#ui{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(700px,calc(100% - 16px));background:var(--panel);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(243,230,204,.12);border-radius:20px;padding:10px 14px;transition:opacity .9s ease,transform .9s ease;z-index:2;box-shadow:0 10px 40px rgba(0,0,0,.35)}
#ui.hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(16px)}
.row{display:flex;align-items:center;gap:10px;margin:6px 0}
.wrap{flex-wrap:wrap}
button{font:inherit;color:var(--ink);background:rgba(243,230,204,.08);border:1px solid rgba(243,230,204,.15);border-radius:13px;min-width:46px;min-height:46px;padding:0 13px;font-size:16px;cursor:pointer;touch-action:manipulation}
button:active{background:rgba(243,230,204,.22)}
#minus,#plus{font-size:26px;width:54px}
#play{min-width:76px;min-height:56px;font-size:22px;background:var(--acc);border-color:transparent;color:#23130d;font-weight:700}
#play.on{background:var(--acc2);color:#10201b}
#tap.flash{background:rgba(243,230,204,.32)}
.bpmbox{flex:1;text-align:center;line-height:1;min-width:96px}
#bpm{font-size:42px;font-weight:700;font-variant-numeric:tabular-nums}
#bpm small{font-size:13px;font-weight:600;color:var(--muted);margin-left:4px}
#mode{font-size:11px;color:var(--muted);letter-spacing:.09em;text-transform:uppercase;margin-top:6px}
input[type=range]{flex:1;accent-color:var(--acc);height:34px;min-width:90px}
.seg{display:flex;background:rgba(243,230,204,.06);border-radius:14px;padding:2px;gap:2px}
.seg button{border:none;background:transparent;min-width:46px;padding:0 10px;font-size:15px}
.seg button.sel{background:rgba(243,230,204,.2)}
.lbl{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:8px;flex:1;min-width:150px}
.tr{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:6px}
select{font:inherit;color:var(--ink);background:#2a1f1b;border:1px solid rgba(243,230,204,.16);border-radius:10px;min-height:40px;padding:0 6px;font-size:15px}
.toggle.sel{background:var(--acc2);color:#10201b;border-color:transparent}
#hint{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);background:rgba(28,20,18,.66);padding:6px 14px;border-radius:999px;transition:opacity 1s;pointer-events:none;white-space:nowrap;z-index:3}
@media (max-height:540px){#ui{padding:4px 10px}.row{margin:3px 0}#bpm{font-size:28px}button{min-height:40px}#play{min-height:44px}}