:root{--main:#2f9e63;--main-dark:#227a4a;--bg:#f2f7f4;--card:#fff;--ink:#23372c;--muted:#6b7f73}.app{max-width:860px;margin:0 auto;padding:12px 12px 32px}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;display:flex}.header h1{color:var(--main-dark);margin:0;font-size:1.25rem}.ex-nav{align-items:center;gap:6px;display:flex}.ex-nav select{background:var(--card);color:var(--ink);border:1px solid #c8d8cf;border-radius:10px;padding:8px 10px;font-size:1rem}.nav-btn{background:var(--card);color:var(--main-dark);border:1px solid #c8d8cf;border-radius:10px;padding:8px 12px;font-size:.9rem}.nav-btn:disabled{opacity:.35}.key-grid{grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:6px;display:grid}.key-pill{background:var(--card);color:var(--ink);border:1px solid #c8d8cf;border-radius:10px;padding:10px 0;font-size:1rem;font-weight:600;position:relative}.key-pill.active{background:var(--main);border-color:var(--main);color:#fff}.key-pill.done:not(.active){background:#e2f3e9}.key-pill .check{color:var(--main-dark);font-size:.6rem;position:absolute;top:1px;right:4px}.key-pill.active .check{color:#fff}.key-info{color:var(--muted);margin-bottom:8px;font-size:.8rem}.score-card{background:var(--card);border:1px solid #dde8e1;border-radius:14px;margin-bottom:10px;padding:8px 6px;overflow-x:auto}.controls{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px;display:flex}.ctrl-btn{background:var(--card);color:var(--ink);border:1px solid #c8d8cf;border-radius:10px;padding:10px 14px;font-size:.95rem}.ctrl-btn.on{background:var(--main-dark);border-color:var(--main-dark);color:#fff}.bpm{flex:1;align-items:center;gap:8px;min-width:180px;display:flex}.bpm span{color:var(--ink);min-width:44px;font-size:.9rem}.bpm input{accent-color:var(--main);flex:1}.done-btn{border:2px solid var(--main);background:var(--card);width:100%;color:var(--main-dark);border-radius:12px;margin-bottom:6px;padding:14px;font-size:1.05rem;font-weight:700}.done-btn.done{background:var(--main);color:#fff}.ex-progress{text-align:center;color:var(--muted);margin-bottom:20px;font-size:.85rem}.footer{color:var(--muted);border-top:1px solid #dde8e1;padding-top:10px;font-size:.72rem}.footer a{color:var(--main-dark)}button{cursor:pointer;-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body{margin:0;padding:0}body{color:#23372c;-webkit-font-smoothing:antialiased;background:#f2f7f4;font-family:system-ui,-apple-system,Hiragino Kaku Gothic ProN,Noto Sans JP,sans-serif}