*{box-sizing:border-box;margin:0;padding:0}body{background:#f8f8f8;min-height:100vh;font-family:system-ui,-apple-system,sans-serif;font-size:13px}.app{background:#fff;border-left:1px solid #e0e0e0;border-right:1px solid #e0e0e0;flex-direction:column;max-width:720px;height:100vh;margin:0 auto;display:flex;overflow:hidden}.transport{background:linear-gradient(#fafafa,#f0f0f0);border-bottom:1px solid #ddd;flex-shrink:0;align-items:center;gap:2px;height:42px;padding:6px 12px;display:flex}.transport-section{border-right:1px solid #e0e0e0;align-items:center;gap:4px;padding:0 8px;display:flex}.transport-section:last-child{border-right:none}.transport-section.grow{flex:1;justify-content:flex-end}#start-btn{cursor:pointer;background:linear-gradient(#fff,#eee);border:1px solid #aaa;border-radius:3px;width:28px;height:28px;padding:0;font-size:12px}#start-btn:hover{background:linear-gradient(#fff,#e0e0e0);border-color:#888}#start-btn:active{background:#ddd}#start-btn.playing{background:linear-gradient(#e8f5e9,#c8e6c9);border-color:#4caf50}.mini-btn{cursor:pointer;background:#fff;border:1px solid #bbb;border-radius:2px;justify-content:center;align-items:center;width:22px;height:22px;padding:0;font-size:10px;display:flex}.mini-btn:hover{background:#f5f5f5;border-color:#999}.mini-btn:active{background:#eee}.toggle-btn{cursor:pointer;background:#fff;border:1px solid #bbb;border-radius:2px;padding:3px 8px;font-size:11px}.toggle-btn:hover{background:#f5f5f5}.toggle-btn.active{color:#1565c0;background:linear-gradient(#e3f2fd,#bbdefb);border-color:#2196f3}.param-group{align-items:center;gap:3px;display:flex}.param-label{color:#888;text-transform:uppercase;letter-spacing:.5px;font-size:9px}select{cursor:pointer;background:#fff;border:1px solid #bbb;border-radius:2px;padding:3px 6px;font-size:11px}select:hover{border-color:#999}.mixer{gap:6px;display:flex}.mixer-ch{align-items:center;gap:3px;display:flex}.mixer-ch label{color:#666;text-transform:uppercase;width:18px;font-size:9px}.mixer-ch input[type=range]{-webkit-appearance:none;cursor:pointer;background:0 0;width:40px;height:16px}.mixer-ch input[type=range]::-webkit-slider-runnable-track{background:#ddd;border-radius:2px;height:4px}.mixer-ch input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#666;border-radius:50%;width:10px;height:10px;margin-top:-3px}.mixer-ch input[type=range]::-moz-range-track{background:#ddd;border-radius:2px;height:4px}.mixer-ch input[type=range]::-moz-range-thumb{background:#666;border:none;border-radius:50%;width:10px;height:10px}.display-panel{background:#fafafa;border-bottom:1px solid #e0e0e0;flex-shrink:0;align-items:stretch;height:120px;display:flex}.chord-info{border-right:1px solid #e0e0e0;flex-direction:column;justify-content:center;align-items:center;min-width:100px;padding:12px 20px;display:flex}.chord-name{font-family:Georgia,serif;font-size:32px;font-weight:300;line-height:1}.chord-info.inactive .chord-name{color:#ccc}.history-row{gap:4px;margin-top:6px;display:flex}.history-chip{color:#999;cursor:pointer;background:#eee;border:none;border-radius:2px;padding:2px 6px;font-family:Georgia,serif;font-size:11px}.history-chip:hover{color:#666;background:#e0e0e0}.sheet-music{flex:1;justify-content:center;align-items:center;padding:8px;display:flex;overflow:hidden}.sheet-music svg{display:block}.keyboard-panel{background:#f0f0f0;border-bottom:1px solid #ddd;flex-shrink:0;justify-content:center;align-items:center;gap:6px;height:118px;padding:8px 12px;display:flex}.keyboard-shift{cursor:pointer;color:#666;background:#e8e8e8;border:1px solid #bbb;border-radius:2px;justify-content:center;align-items:center;width:20px;height:60px;font-size:10px;display:flex}.keyboard-shift:hover{background:#ddd}.keyboard-shift:disabled{opacity:.3;cursor:default}.piano{display:flex;position:relative}.white-key{cursor:pointer;background:linear-gradient(#fff,#f8f8f8);border:1px solid #444;border-radius:0 0 3px 3px;width:24px;height:100px}.white-key:hover{background:linear-gradient(#f5f5f5,#eee)}.white-key.active{background:linear-gradient(#ffcdd2,#ef9a9a)}.white-key.playing{background:linear-gradient(#ef5350,#e53935)}.black-key{z-index:1;cursor:pointer;background:linear-gradient(#333,#111);border:none;border-radius:0 0 2px 2px;width:14px;height:60px;position:absolute}.black-key:hover{background:linear-gradient(#444,#222)}.black-key.active{background:linear-gradient(#d32f2f,#b71c1c)}.black-key.playing{background:linear-gradient(#ff5252,#ff1744)}.white-key.active,.black-key.active{cursor:ew-resize}.chord-browser{flex:1;padding:12px;overflow-y:auto}.chord-row{border-bottom:1px solid #f0f0f0;align-items:flex-start;gap:8px;padding:6px 0;display:flex}.chord-row:last-child{border-bottom:none}.chord-row-label{text-transform:uppercase;letter-spacing:.5px;color:#666;flex-shrink:0;width:70px;padding-top:6px;font-size:10px;font-weight:600}.chord-row-buttons{flex-wrap:wrap;flex:1;gap:4px;display:flex}.chord-btn{cursor:pointer;text-align:center;background:#fff;border:1px solid #ccc;border-radius:2px;min-width:44px;padding:6px 10px;font-family:Georgia,serif;font-size:14px}.chord-btn:hover{background:#fafafa;border-color:#888}.chord-btn:active{background:#f0f0f0}.chord-btn.hint-classic{background:linear-gradient(#fff,#e3f2fd);border-color:#64b5f6}.chord-btn.hint-classic:hover{background:#e3f2fd}.chord-btn.hint-safe{background:linear-gradient(#fff,#e8f5e9);border-color:#81c784}.chord-btn.hint-safe:hover{background:#e8f5e9}.chord-btn.hint-interesting{background:linear-gradient(#fff,#fff3e0);border-color:#ffb74d}.chord-btn.hint-interesting:hover{background:#fff3e0}.hint-legend{color:#888;border-top:1px solid #eee;flex-shrink:0;justify-content:center;gap:16px;height:28px;padding:8px;font-size:10px;display:flex}.hint-legend span{align-items:center;gap:4px;display:flex}.hint-dot{border-radius:1px;width:8px;height:8px}.hint-dot.classic{background:#e3f2fd;border:1px solid #64b5f6}.hint-dot.safe{background:#e8f5e9;border:1px solid #81c784}.hint-dot.interesting{background:#fff3e0;border:1px solid #ffb74d}.status-bar{color:#999;background:#f5f5f5;border-top:1px solid #e0e0e0;flex-shrink:0;justify-content:center;gap:12px;height:30px;padding:8px 12px;font-size:10px;display:flex}kbd{background:#fff;border:1px solid #ddd;border-radius:2px;padding:1px 4px;font-family:inherit;font-size:9px}.history-modal{z-index:100;background:#0006;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.history-modal.open{display:flex}.history-modal-content{background:#fff;border-radius:4px;width:90%;max-width:360px;max-height:70vh;padding:16px;overflow-y:auto}.history-modal h3{margin-bottom:12px;font-size:14px;font-weight:600}.history-modal-list{flex-wrap:wrap;gap:6px;display:flex}.history-modal-item{color:#666;cursor:pointer;background:#f0f0f0;border:none;border-radius:2px;padding:6px 10px;font-family:Georgia,serif;font-size:14px}.history-modal-item:hover{background:#e0e0e0}.history-modal-close{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:2px;width:100%;margin-top:12px;padding:8px}@media (width<=600px){.transport{flex-wrap:wrap;height:auto;padding:6px 8px}.transport-section{border-right:none;padding:4px}.transport-section.grow{justify-content:center;width:100%;margin-top:4px}.mixer{gap:12px}.display-panel{height:100px}.keyboard-panel{height:98px}.white-key{width:calc(6.66667vw - 5.33333px);height:80px}.black-key{width:calc(4.54545vw - 3.63636px);height:48px}.keyboard-shift{height:50px}.chord-row{flex-direction:column;gap:4px}.chord-row-label{width:auto;padding-top:0}}