*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,sans-serif;font-size:13px;background:#f8f8f8;min-height:100vh}.app{max-width:720px;margin:0 auto;background:#fff;height:100vh;border-left:1px solid #e0e0e0;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;overflow:hidden}.transport{display:flex;align-items:center;gap:2px;padding:6px 12px;background:linear-gradient(to bottom,#fafafa,#f0f0f0);border-bottom:1px solid #ddd;flex-shrink:0;height:42px}.transport-section{display:flex;align-items:center;gap:4px;padding:0 8px;border-right:1px solid #e0e0e0}.transport-section:last-child{border-right:none}.transport-section.grow{flex:1;justify-content:flex-end}#start-btn{width:28px;height:28px;padding:0;font-size:12px;border:1px solid #aaa;background:linear-gradient(to bottom,#fff,#eee);border-radius:3px;cursor:pointer}#start-btn:hover{background:linear-gradient(to bottom,#fff,#e0e0e0);border-color:#888}#start-btn:active{background:#ddd}#start-btn.playing{background:linear-gradient(to bottom,#e8f5e9,#c8e6c9);border-color:#4caf50}.mini-btn{width:22px;height:22px;padding:0;font-size:10px;border:1px solid #bbb;background:#fff;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center}.mini-btn:hover{background:#f5f5f5;border-color:#999}.mini-btn:active{background:#eee}.toggle-btn{padding:3px 8px;font-size:11px;border:1px solid #bbb;background:#fff;border-radius:2px;cursor:pointer}.toggle-btn:hover{background:#f5f5f5}.toggle-btn.active{background:linear-gradient(to bottom,#e3f2fd,#bbdefb);border-color:#2196f3;color:#1565c0}.param-group{display:flex;align-items:center;gap:3px}.param-label{font-size:9px;color:#888;text-transform:uppercase;letter-spacing:.5px}select{padding:3px 6px;font-size:11px;border:1px solid #bbb;border-radius:2px;background:#fff;cursor:pointer}select:hover{border-color:#999}.mixer{display:flex;flex-direction:column;gap:2px}.mixer-ch{display:flex;align-items:center;gap:3px}.mixer-ch label{font-size:9px;color:#666;text-transform:uppercase;width:14px}.mixer-ch input[type=range]{width:50px;height:12px;-webkit-appearance:none;background:transparent;cursor:pointer}.mixer-ch input[type=range]::-webkit-slider-runnable-track{height:3px;background:#ddd;border-radius:2px}.mixer-ch input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;background:#666;border-radius:50%;margin-top:-2.5px}.mixer-ch input[type=range]::-moz-range-track{height:3px;background:#ddd;border-radius:2px}.mixer-ch input[type=range]::-moz-range-thumb{width:8px;height:8px;background:#666;border-radius:50%;border:none}.display-panel{display:flex;align-items:stretch;border-bottom:1px solid #e0e0e0;background:#fafafa;flex-shrink:0;height:120px}.chord-info{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12px 20px;min-width:100px;border-right:1px solid #e0e0e0}.chord-name{font-size:32px;font-weight:300;font-family:Georgia,serif;line-height:1}.chord-info.inactive .chord-name{color:#ccc}.history-row{display:flex;gap:4px;margin-top:6px}.history-chip{font-size:11px;font-family:Georgia,serif;color:#999;padding:2px 6px;background:#eee;border-radius:2px;cursor:pointer;border:none}.history-chip:hover{background:#e0e0e0;color:#666}.sheet-music{flex:1;display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden}.sheet-music svg{display:block}.keyboard-panel{padding:8px 12px;background:#f0f0f0;border-bottom:1px solid #ddd;display:flex;justify-content:center;align-items:center;gap:6px;flex-shrink:0;height:118px}.keyboard-shift{width:20px;height:60px;border:1px solid #bbb;background:#e8e8e8;border-radius:2px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;color:#666}.keyboard-shift:hover{background:#ddd}.keyboard-shift:disabled{opacity:.3;cursor:default}.piano{display:flex;position:relative}.white-key{width:24px;height:100px;background:linear-gradient(to bottom,#fff,#f8f8f8);border:1px solid #444;border-radius:0 0 3px 3px;cursor:pointer}.white-key:hover{background:linear-gradient(to bottom,#f5f5f5,#eee)}.white-key.active{background:linear-gradient(to bottom,#ffcdd2,#ef9a9a)}.white-key.playing{background:linear-gradient(to bottom,#ef5350,#e53935)}.black-key{width:14px;height:60px;background:linear-gradient(to bottom,#333,#111);border:none;border-radius:0 0 2px 2px;position:absolute;z-index:1;cursor:pointer}.black-key:hover{background:linear-gradient(to bottom,#444,#222)}.black-key.active{background:linear-gradient(to bottom,#d32f2f,#b71c1c)}.black-key.playing{background:linear-gradient(to bottom,#ff5252,#ff1744)}.white-key.active,.black-key.active{cursor:ew-resize}.chord-browser{padding:12px;flex:1;overflow-y:auto}.chord-row{display:flex;align-items:flex-start;gap:8px;padding:6px 0;border-bottom:1px solid #f0f0f0}.chord-row:last-child{border-bottom:none}.chord-row-label{width:70px;flex-shrink:0;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#666;padding-top:6px}.chord-row-buttons{display:flex;flex-wrap:wrap;gap:4px;flex:1}.chord-btn{padding:6px 10px;font-size:14px;font-family:Georgia,serif;border:1px solid #ccc;background:#fff;border-radius:2px;cursor:pointer;min-width:44px;text-align:center}.chord-btn:hover{border-color:#888;background:#fafafa}.chord-btn:active{background:#f0f0f0}.chord-btn.hint-classic{border-color:#64b5f6;background:linear-gradient(to bottom,#fff,#e3f2fd)}.chord-btn.hint-classic:hover{background:#e3f2fd}.chord-btn.hint-safe{border-color:#81c784;background:linear-gradient(to bottom,#fff,#e8f5e9)}.chord-btn.hint-safe:hover{background:#e8f5e9}.chord-btn.hint-interesting{border-color:#ffb74d;background:linear-gradient(to bottom,#fff,#fff3e0)}.chord-btn.hint-interesting:hover{background:#fff3e0}.hint-legend{display:flex;justify-content:center;gap:16px;padding:8px;font-size:10px;color:#888;border-top:1px solid #eee;flex-shrink:0;height:28px}.hint-legend span{display:flex;align-items:center;gap:4px}.hint-dot{width:8px;height:8px;border-radius:1px}.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{display:flex;justify-content:center;gap:12px;padding:8px 12px;font-size:10px;color:#999;background:#f5f5f5;border-top:1px solid #e0e0e0;flex-shrink:0;height:30px}kbd{padding:1px 4px;font-family:inherit;font-size:9px;background:#fff;border:1px solid #ddd;border-radius:2px}.standards-dropdown{position:relative}.standards-search{width:140px;padding:4px 8px;font-size:11px;border:1px solid #bbb;border-radius:2px}.standards-results{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid #ccc;border-radius:2px;max-height:300px;overflow-y:auto;z-index:200;box-shadow:0 4px 12px #00000026;min-width:250px}.standards-results.open{display:block}.standards-result{padding:8px 10px;cursor:pointer;border-bottom:1px solid #f0f0f0}.standards-result:hover,.standards-result.selected{background:#f5f5f5}.standards-result-title{font-size:12px;font-weight:500}.standards-result-composer{font-size:10px;color:#888}.standards-load{font-size:10px;color:#666;padding:8px;text-align:center;cursor:pointer}.standards-load:hover{background:#f0f0f0}.history-panel{background:#fffef8;border-bottom:1px solid #e0e0e0;padding:12px 16px;flex-shrink:0;max-height:280px;overflow-y:auto;overflow-x:auto}.history-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.history-title{font-size:10px;font-weight:600;text-transform:uppercase;color:#888}.history-actions{display:flex;gap:4px}.history-action{font-size:9px;padding:2px 6px;border:1px solid #ccc;background:#fff;border-radius:2px;cursor:pointer}.history-action:hover{background:#f0f0f0}.lead-sheet{position:relative}.lead-sheet-empty{font-size:11px;color:#999;font-style:italic;padding:12px;font-family:system-ui}.lead-sheet svg g.vf-chordsymbol{cursor:pointer}.lead-sheet svg g.vf-chordsymbol:hover text{fill:#1976d2}.lead-sheet svg g.vf-chordsymbol.current-chord text{fill:#1976d2}.lead-sheet svg g.vf-chordsymbol.editing-chord text{fill:#f57c00}.context-menu{display:none;position:fixed;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 12px #00000026;padding:6px;z-index:300;max-width:280px}.context-menu.open{display:block}.context-menu-subs{display:flex;gap:4px;flex-wrap:wrap}.context-menu-item{font-family:Georgia,serif;font-size:12px;padding:4px 8px;background:#fff;border:1px solid #ddd;border-radius:2px;cursor:pointer}.context-menu-item:hover{border-color:#888;background:#f5f5f5}.context-menu-item.hint-classic{border-color:#64b5f6;background:linear-gradient(to bottom,#fff,#e3f2fd)}.context-menu-item.hint-safe{border-color:#81c784;background:linear-gradient(to bottom,#fff,#e8f5e9)}.context-menu-item.hint-interesting{border-color:#ffb74d;background:linear-gradient(to bottom,#fff,#fff3e0)}@media(max-width:600px){.transport{flex-wrap:wrap;padding:6px 8px;height:auto}.transport-section{padding:4px;border-right:none}.transport-section.grow{width:100%;justify-content:center;margin-top:4px}.mixer{gap:1px}.display-panel{height:100px}.keyboard-panel{height:98px}.white-key{width:calc((100vw - 80px) / 15);height:80px}.black-key{width:calc((100vw - 80px) / 22);height:48px}.keyboard-shift{height:50px}.chord-row{flex-direction:column;gap:4px}.chord-row-label{width:auto;padding-top:0}}