*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #001E2B;--surface: #003547;--border: #005E54;--gold: #ED8B16;--red: #E1523D;--lime: #C2BB00;--text: #F0EDE4;--text-muted: rgba(240,237,228,.45);--font-display: "Google Sans", system-ui, -apple-system, sans-serif;--font-ui: "Google Sans", system-ui, -apple-system, sans-serif;--radius: 10px;--transition: .3s ease}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100%;padding-top:calc(env(safe-area-inset-top) + 64px);padding-bottom:env(safe-area-inset-bottom);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}button{cursor:pointer;font-family:var(--font-ui)}input{font-family:var(--font-ui)}::-webkit-scrollbar{display:none}*{scrollbar-width:none}.note-grid-wrap{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:-2px}.note-grid-header{display:flex;border-radius:20px;border:1px solid var(--border);background:#ffffff08;padding:3px;gap:3px;align-self:center}.note-grid-mode-pill{padding:5px 18px;border-radius:16px;border:none;background:none;color:var(--text-muted);font-size:13px;transition:all var(--transition);-webkit-tap-highlight-color:transparent;cursor:pointer;font-family:var(--font-ui)}.note-grid-mode-pill.active{background:#ffffff17;color:var(--text)}.note-grid{display:grid;grid-template-columns:repeat(13,1fr);grid-template-rows:repeat(3,30px);gap:4px;width:100%}.note-cell{border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:10px;font-weight:500;font-family:var(--font-ui);padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition);-webkit-tap-highlight-color:transparent;min-width:0;overflow:hidden;white-space:nowrap;width:100%}.note-cell.spacer{background:transparent;border-color:transparent;cursor:default;pointer-events:none}.note-cell.neutral:hover{border-color:#ed8b164d;color:var(--text)}.note-cell.tonic{background:#ed8b1626;border-color:var(--gold);color:var(--gold);font-weight:700}.note-cell.tonic:hover{background:#ed8b1638}.note-cell.in-scale:hover{filter:brightness(1.15)}.note-cell.out-scale{opacity:.3}.note-cell.out-scale:hover{opacity:.7;border-color:#ed8b1640;color:var(--text-muted)}.circle-of-fifths{display:flex;flex-direction:column;align-items:center;padding:8px 4px 6px;gap:6px}.mode-selector{display:flex;gap:6px;overflow-x:auto;padding:2px 4px;width:100%;scrollbar-width:none}.mode-selector::-webkit-scrollbar{display:none}.mode-pill{flex-shrink:0;padding:6px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:12px;transition:all var(--transition);white-space:nowrap;-webkit-tap-highlight-color:transparent}.mode-pill.active{background:#ffffff12}.circle-svg-wrap{width:100%;max-width:420px;padding:0}.circle-svg{width:100%;height:auto;display:block}.inner-ring-toggle{display:flex;border-radius:20px;border:1px solid var(--border);background:#ffffff08;padding:3px;gap:3px;margin-top:-2px}.ring-toggle-pill{padding:5px 18px;border-radius:16px;border:none;background:none;color:var(--text-muted);font-size:13px;transition:all var(--transition);-webkit-tap-highlight-color:transparent}.ring-toggle-pill.active{background:#ffffff17;color:var(--text)}.circle-legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;padding:4px 8px}.legend-item{font-size:12px;padding:4px 12px;border-radius:12px;border:1px solid transparent}.legend-tonic{color:#ed8b16;border-color:#ed8b164d;background:#ed8b1614}.legend-dominant{color:#00a896;border-color:#00a8964d;background:#00a89614}.legend-subdominant{color:#1a7faf;border-color:#1a7faf4d;background:#1a7faf14}.legend-relative{color:#c2bb00;border-color:#c2bb004d;background:#c2bb0014}.progression-builder{margin-top:8px;padding:16px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:12px}.builder-header{display:flex;align-items:center;justify-content:space-between}.builder-clear-btn{font-size:12px;color:var(--text-muted);background:none;border:1px solid var(--border);border-radius:6px;padding:3px 10px;cursor:pointer;transition:all var(--transition)}.builder-clear-btn:hover{border-color:#e1523d80;color:var(--red)}.builder-empty{font-size:14px;color:var(--text-muted);text-align:center;padding:8px 0}.builder-chords{display:flex;flex-direction:column;gap:7px}.builder-chord-row{display:flex;align-items:center;gap:8px}.chord-move-group{display:flex;gap:3px}.chord-move{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:#ffffff0a;color:var(--text-muted);font-size:18px;display:flex;align-items:center;justify-content:center;transition:all var(--transition);padding:0;line-height:1}.chord-move:disabled{opacity:.25;cursor:not-allowed}.chord-move:not(:disabled):hover{border-color:var(--gold);color:var(--gold)}.builder-chip{flex:1;padding:7px 14px;border-radius:var(--radius);border:1px solid var(--border);background:#ed8b1614;color:var(--gold);font-size:15px;font-weight:600;text-align:center;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);-webkit-tap-highlight-color:transparent}.builder-chip:hover{border-color:#ed8b1680}.builder-chip.active{border-color:var(--gold);box-shadow:0 0 8px #ed8b1699;transform:scale(1.03)}.chord-remove{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:none;color:var(--text-muted);font-size:18px;display:flex;align-items:center;justify-content:center;transition:all var(--transition);padding:0}.chord-remove:hover{border-color:var(--red);color:var(--red)}.play-controls{display:flex;align-items:center;gap:12px}.play-btn{width:40px;height:40px;flex-shrink:0;border-radius:50%;border:1px solid rgba(237,139,22,.4);background:#ed8b161a;color:var(--gold);font-size:16px;display:flex;align-items:center;justify-content:center;transition:all var(--transition);-webkit-tap-highlight-color:transparent}.play-btn:hover{background:#ed8b162e;border-color:var(--gold)}.play-btn.playing{background:#ed8b1633;border-color:var(--gold);box-shadow:0 0 8px #ed8b1666}.sliders-col{flex:1;display:flex;flex-direction:column;gap:6px}.slider-row{display:flex;align-items:center;gap:10px}.bpm-slider{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:#ffffff1a;outline:none}.bpm-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);cursor:pointer;transition:transform var(--transition)}.bpm-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.bpm-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold);border:none;cursor:pointer}.slider-label{font-size:12px;color:var(--text-muted);white-space:nowrap;min-width:52px;text-align:right}.builder-save-row{display:flex;gap:8px}.builder-input{flex:1;padding:10px 14px;border-radius:var(--radius);border:1px solid var(--border);background:#ffffff08;color:var(--text);font-size:14px;outline:none;transition:border-color var(--transition)}.builder-input:focus{border-color:#ed8b1666}.builder-input::placeholder{color:var(--text-muted)}.builder-save-btn{padding:10px 18px;border-radius:var(--radius);border:1px solid rgba(237,139,22,.4);background:#ed8b161a;color:var(--gold);font-size:14px;transition:all var(--transition);white-space:nowrap}.builder-save-btn:not(:disabled):hover{background:#ed8b162e;border-color:var(--gold)}.builder-save-btn:disabled{opacity:.35;cursor:not-allowed}.chord-explorer{padding:16px 16px 8px;display:flex;flex-direction:column;gap:20px}.explorer-mode-row{display:flex;gap:6px;overflow-x:auto;padding:2px 0}.exp-mode-pill{flex-shrink:0;padding:7px 14px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:13px;transition:all var(--transition);white-space:nowrap;-webkit-tap-highlight-color:transparent}.exp-mode-pill.active{background:#ffffff0f}.section-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}.root-picker{display:flex;flex-wrap:wrap;gap:7px}.root-pill{padding:8px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:14px;transition:all var(--transition);min-width:48px;text-align:center;-webkit-tap-highlight-color:transparent}.root-pill.active{border-color:var(--gold);color:var(--gold);background:#ed8b161a}.explorer-header{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.explorer-header-left{display:flex;flex-direction:column;gap:2px}.explorer-root{font-family:var(--font-display);font-size:42px;font-weight:700;color:var(--gold);line-height:1;letter-spacing:-.02em}.explorer-mode-name{font-size:14px;color:var(--text-muted)}.clear-note-btn{padding:7px 14px;border-radius:var(--radius);border:1px solid var(--border);background:none;color:var(--text-muted);font-size:13px;transition:all var(--transition);flex-shrink:0}.clear-note-btn:hover{border-color:#f0ede433;color:var(--text)}.scale-row{display:flex;gap:7px;overflow-x:auto;padding:2px 0}.scale-pill{flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:7px 12px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);min-width:44px;cursor:pointer;transition:border-color var(--transition),background var(--transition);-webkit-tap-highlight-color:transparent}.scale-pill:hover,.scale-pill:active{border-color:#ed8b1666;background:#ed8b1612}.scale-degree{font-size:10px;color:var(--text-muted);letter-spacing:.05em}.scale-note{font-size:15px;color:var(--text);font-weight:500}.chord-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}@media(min-width:480px){.chord-grid{grid-template-columns:repeat(7,1fr)}}.chord-card{display:flex;flex-direction:column;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);transition:all var(--transition);overflow:hidden}.chord-card-body{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px 6px;width:100%;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.chord-card-body:active{opacity:.75}.chord-card-play{width:100%;padding:4px 0;border:none;border-top:1px solid var(--border);background:#ffffff05;color:var(--text-muted);font-size:9px;cursor:pointer;transition:background var(--transition),color var(--transition);-webkit-tap-highlight-color:transparent}.chord-card-play:hover,.chord-card-play:active{background:#ffffff12;color:var(--text)}.chord-card-degree{font-size:11px;color:var(--text-muted);font-weight:500}.chord-card-name{font-size:16px;font-weight:700}.chord-card-quality{font-size:10px;color:var(--text-muted)}.card-maj{border-color:#ed8b1633}.card-maj .chord-card-name{color:var(--gold)}.card-maj:hover{background:#ed8b160f;border-color:#ed8b1666}.card-maj .chord-card-play:hover{background:#ed8b161a;color:var(--gold)}.card-min{border-color:#1a7faf33}.card-min .chord-card-name{color:#1a7faf}.card-min:hover{background:#1a7faf0f;border-color:#1a7faf66}.card-min .chord-card-play:hover{background:#1a7faf1a;color:#1a7faf}.card-dim{border-color:#e1523d33}.card-dim .chord-card-name{color:var(--red)}.card-dim:hover{background:#e1523d0f;border-color:#e1523d66}.card-dim .chord-card-play:hover{background:#e1523d1a;color:var(--red)}.suggestion-list{display:flex;flex-wrap:wrap;gap:8px}.suggestion-chip{padding:8px 16px;border-radius:20px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);font-size:13px;transition:all var(--transition);-webkit-tap-highlight-color:transparent}.suggestion-chip:hover,.suggestion-chip:active{border-color:#ed8b164d;color:var(--gold);background:#ed8b160f}.saved-progressions{padding:20px 16px 8px;display:flex;flex-direction:column;gap:20px}.saved-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--text);letter-spacing:-.01em}.saved-empty{display:flex;flex-direction:column;gap:8px;padding:40px 0;text-align:center}.saved-empty p{font-size:15px;color:var(--text-muted)}.saved-empty-hint{font-size:13px!important}.prog-list{display:flex;flex-direction:column;gap:12px}.prog-card{padding:16px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;gap:12px;transition:border-color var(--transition)}.prog-card.confirming{border-color:#e1523d59}.prog-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.prog-card-info{display:flex;flex-direction:column;gap:4px;min-width:0}.prog-name{font-size:16px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.prog-meta{font-size:13px;color:var(--gold)}.prog-card-actions{flex-shrink:0}.prog-delete-btn{width:36px;height:36px;border-radius:8px;border:1px solid var(--border);background:none;color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:all var(--transition);padding:0}.prog-delete-btn svg{width:16px;height:16px}.prog-delete-btn:hover{border-color:#e1523d80;color:var(--red)}.confirm-row{display:flex;align-items:center;gap:7px}.confirm-label{font-size:13px;color:var(--text-muted)}.confirm-yes,.confirm-no{padding:5px 12px;border-radius:6px;font-size:13px;border:1px solid;background:none;transition:all var(--transition)}.confirm-yes{border-color:#e1523d80;color:var(--red)}.confirm-yes:hover{background:#e1523d1f}.confirm-no{border-color:var(--border);color:var(--text-muted)}.confirm-no:hover{border-color:#f0ede433;color:var(--text)}.prog-chords-row{display:flex;flex-wrap:wrap;gap:7px}.prog-chord-chip{padding:5px 12px;border-radius:8px;border:1px solid rgba(237,139,22,.25);background:#ed8b1612;color:var(--gold);font-size:13px}.prog-load-btn{padding:10px 18px;border-radius:var(--radius);border:1px solid rgba(237,139,22,.3);background:#ed8b1614;color:var(--gold);font-size:14px;transition:all var(--transition);align-self:flex-start;-webkit-tap-highlight-color:transparent}.prog-load-btn:hover{background:#ed8b1626;border-color:var(--gold)}.nav{position:fixed;inset:0 0 auto;display:flex;background:#0a0a0ff5;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding-top:env(safe-area-inset-top);padding-bottom:0;z-index:100}.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0 10px;background:none;border:none;color:var(--text-muted);transition:color var(--transition);-webkit-tap-highlight-color:transparent}.nav-item.active{color:var(--gold)}.nav-icon{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.nav-icon svg{width:100%;height:100%}.nav-label{font-size:12px;letter-spacing:.03em;text-transform:uppercase}.app{display:flex;flex-direction:column;height:100%;overflow:hidden}.app-content{flex:1;overflow-y:auto;overflow-x:hidden;padding-bottom:env(safe-area-inset-bottom)}