:root{--main:#2f9e63;--main-dark:#227a4a;--bg:#f2f7f4;--card:#fff;--ink:#23372c;--muted:#6b7f73}.app{max-width:1080px;margin:0 auto;padding:10px 12px 24px}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;display:flex}.header h1{color:var(--main-dark);margin:0;font-size:1.15rem}.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:7px 10px;font-size:.95rem}.nav-btn{background:var(--card);color:var(--main-dark);border:1px solid #c8d8cf;border-radius:10px;padding:7px 12px;font-size:.85rem}.nav-btn:disabled{opacity:.35}.key-grid{grid-template-columns:repeat(6,1fr);gap:5px;margin-bottom:4px;display:grid}.key-pill{background:var(--card);color:var(--ink);border:1px solid #c8d8cf;border-radius:10px;padding:9px 0;font-size:.95rem;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}.var-row{flex-wrap:wrap;align-items:center;gap:5px;margin-bottom:4px;display:flex}.var-title{color:var(--muted);margin-right:2px;font-size:.75rem}.var-pill{background:var(--card);color:var(--ink);white-space:nowrap;border:1px solid #c8d8cf;border-radius:10px;padding:6px 10px;font-size:.8rem;font-weight:600}.var-pill.active{background:var(--main);border-color:var(--main);color:#fff}.key-info{color:var(--muted);margin-bottom:6px;font-size:.75rem}.score-card{background:var(--card);border:1px solid #dde8e1;border-radius:14px;margin-bottom:8px;padding:6px;overflow-x:auto}.score-fit{width:100%;margin:0 auto}.play-cursor{stroke:var(--main);stroke-width:2px;opacity:.7}.controls{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px;display:flex}.ctrl-btn{background:var(--card);color:var(--ink);white-space:nowrap;border:1px solid #c8d8cf;border-radius:10px;padding:9px 13px;font-size:.9rem}.ctrl-btn.on{background:var(--main-dark);border-color:var(--main-dark);color:#fff}.bpm{flex:1;align-items:center;gap:8px;min-width:160px;display:flex}.bpm span{color:var(--ink);min-width:44px;font-size:.85rem}.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:12px;font-size:1rem;font-weight:700}.done-btn.done{background:var(--main);color:#fff}.ex-progress{text-align:center;color:var(--muted);margin-bottom:16px;font-size:.8rem}.footer{color:var(--muted);border-top:1px solid #dde8e1;padding-top:8px;font-size:.68rem}.footer a{color:var(--main-dark)}.footer p{margin:2px 0}button{cursor:pointer;-webkit-tap-highlight-color:transparent}.key-pill.locked,.var-pill.locked{opacity:.55}.lock-badge{font-size:.6rem;line-height:1;display:block}.lock-overlay{z-index:100;background:#14231a8c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.lock-modal{background:var(--card);color:var(--ink);border-radius:14px;width:100%;max-width:380px;padding:20px;box-shadow:0 8px 32px #00000040}.lock-modal h2{color:var(--main-dark);margin:0 0 10px;font-size:1.05rem}.lock-modal p{margin:6px 0;font-size:.85rem;line-height:1.6}.lock-note{color:var(--muted)}.lock-code{border-top:1px solid #dde8e1;margin-top:12px;padding-top:10px}.lock-code-row{gap:8px;display:flex}.lock-code-row input{border:1px solid #c8d8cf;border-radius:8px;flex:1;min-width:0;padding:8px 10px;font-size:16px}.lock-code-row button{background:var(--main);color:#fff;white-space:nowrap;border:none;border-radius:8px;padding:8px 14px;font-size:.85rem}.lock-code-row button:disabled{opacity:.5;cursor:default}.lock-msg{color:#b0483c}.lock-close{background:var(--bg);width:100%;color:var(--ink);border:1px solid #c8d8cf;border-radius:8px;margin-top:14px;padding:9px;font-size:.85rem}@media (width>=640px){html,body,#root{height:100%}.app{flex-direction:column;height:100dvh;padding-bottom:8px;display:flex;overflow:hidden}.key-grid{grid-template-columns:repeat(12,1fr)}.score-card{flex-direction:column;flex:1;align-items:center;min-height:0;display:flex;overflow:hidden}.controls{margin-bottom:4px}.done-btn{width:auto;margin-bottom:0;padding:9px 16px;font-size:.9rem}.ex-progress{display:none}.footer{white-space:nowrap;text-overflow:ellipsis;gap:16px;display:flex;overflow:hidden}}*{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}