:root{--bg-color:#0f172a;--panel-bg:#1e293b;--text-main:#f8fafc;--text-muted:#94a3b8;--accent:#3b82f6;--accent-glow:#3b82f680;--fretboard-wood:#18181b;--fret-color:#94a3b8;--string-color:#cbd5e1;--note-marker:#ef4444;--note-root:#3b82f6}*{box-sizing:border-box;margin:0;padding:0}#wondermusique-guitar-app-root,#root{width:100%;height:100%;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);-webkit-overflow-scrolling:touch;position:absolute;inset:0;overflow:hidden auto}html,body{background-color:var(--bg-color);overscroll-behavior:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.app-container{flex-direction:column;gap:.25rem;width:100%;max-width:100vw;margin:0;padding:1rem;display:flex;overflow-x:hidden}h1{text-align:center;background:linear-gradient(90deg,#60a5fa,#a78bfa);-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:1rem;font-size:2.5rem}.controls-panel{background:var(--panel-bg);border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:.75rem;padding:1.5rem;display:flex;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.control-group{flex-direction:column;gap:.5rem;display:flex}.control-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.875rem;font-weight:500}select,button{color:var(--text-main);background-color:#0f172a;border:1px solid #334155;border-radius:8px;outline:none;padding:.75rem 1rem;font-size:1rem;transition:all .2s}select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}button.primary-btn{background-color:var(--accent);color:#fff;cursor:pointer;border:none;padding:.75rem 1.5rem;font-weight:600}button.primary-btn:hover{box-shadow:0 4px 12px var(--accent-glow);background-color:#2563eb;transform:translateY(-1px)}button.primary-btn:active{transform:translateY(0)}.secondary-btn{color:var(--accent);border:1px solid var(--accent);cursor:pointer;background-color:#0000;padding:.5rem 1rem;font-weight:600}.secondary-btn:hover{background-color:#3b82f61a}.secondary-btn.active{border-color:var(--accent-hover);color:var(--accent-hover);background-color:#3b82f633}.scale-note{color:#94a3b8;z-index:2;background-color:#1e293b;border:1px solid #475569;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:11px;font-weight:600;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.scale-note.interval-root{color:#ef4444;border-color:#ef444480}.scale-note.interval-third{color:#10b981;border-color:#10b98180}.scale-note.interval-fifth{color:#3b82f6;border-color:#3b82f680}.scale-note.interval-ext{color:#8b5cf6;border-color:#8b5cf680}.progression-display{-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;flex-wrap:nowrap;gap:.75rem;padding:.5rem 1rem 1rem;display:flex;overflow-x:auto}.progression-display::-webkit-scrollbar{display:none}.chord-card{background:var(--panel-bg);text-align:center;cursor:pointer;scroll-snap-align:center;border:2px solid #334155;border-radius:12px;flex:none;min-width:110px;padding:1rem 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.chord-card:hover{border-color:#475569;transform:translateY(-4px)}.chord-card.active{border-color:var(--accent);box-shadow:0 0 20px var(--accent-glow);background:#3b82f61a;transform:translateY(-4px)scale(1.05)}.chord-name{margin-bottom:.25rem;font-size:1.5rem;font-weight:700;color:var(--text-main)!important}.chord-numeral{font-size:.875rem;color:var(--text-muted)!important}.stroke-indicator{color:var(--accent);text-shadow:0 0 10px #3b82f6cc;pointer-events:none;font-size:2rem;font-weight:700;animation:.15s ease-out strokeFadeIn;position:absolute;top:-40px;left:50%;transform:translate(-50%)}@keyframes strokeFadeIn{0%{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%)}}.mode-tabs-container{display:flex}.mode-tab{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-bottom:1px solid #334155;border-radius:8px 8px 0 0;flex:1;padding:.75rem;font-weight:600}.mode-tab.active{background:var(--panel-bg);color:#fff;border-bottom:2px solid #8b5cf6}.compact-controls-container{background:var(--panel-bg);border:1px solid #334155;border-radius:12px;flex-wrap:wrap;justify-content:center;align-items:center;gap:.75rem;width:fit-content;margin:0 auto;padding:.5rem 1rem;display:flex}.compact-control-item{align-items:center;gap:.5rem;display:flex}.compact-control-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;font-weight:600}.compact-select{color:#fff;background:#0f172a;border:1px solid #334155;border-radius:8px;outline:none;padding:.25rem .5rem;font-size:.875rem}.icon-btn{padding:.1rem .5rem;font-size:1.1rem}.fretboard-wrapper{padding-bottom:.5rem;overflow-x:auto}.fretboard{background-color:var(--fretboard-wood);border-radius:4px;flex-direction:column;width:100%;max-width:1000px;padding:10px 0;display:flex;position:relative;box-shadow:inset 0 0 20px #00000080,0 10px 30px #0000004d}.fret-markers-top{margin-bottom:10px;display:flex}.fret-marker-label{text-align:center;color:var(--text-muted);flex:1;font-size:.75rem}.string{height:30px;display:flex;position:relative}.string-line{z-index:1;background:linear-gradient(#f1f5f9,#94a3b8);position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);box-shadow:0 1px 2px #00000080}.fret{border-right:2px solid var(--fret-color);flex:1;justify-content:center;align-items:center;display:flex;position:relative}.fret.first-visible-fret{border-left:2px solid var(--fret-color)}.string-indicator{color:var(--text-muted);background-color:var(--fretboard-wood);z-index:2;flex:0 0 30px;justify-content:center;align-items:center;font-size:1rem;font-weight:700;display:flex}.fret.nut{background:#1e293b;border-right:6px solid #e2e8f0;flex:0 0 10px}.fret-dot{pointer-events:none;background-color:#fff3;border-radius:50%;width:16px;height:16px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.note-marker{background-color:var(--note-marker);color:#fff;z-index:2;opacity:0;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;font-size:.75rem;font-weight:700;transition:all .3s;display:flex;transform:scale(.5);box-shadow:0 0 10px #ef444499}.note-marker.active{opacity:1;transform:scale(1)}.note-marker.interval-root{background-color:#ef4444;box-shadow:0 0 15px #ef444480}.note-marker.interval-third{background-color:#10b981}.note-marker.interval-fifth{background-color:#3b82f6}.note-marker.interval-ext{background-color:#8b5cf6}@media (width<=768px){.app-container{gap:.5rem;padding:.5rem}.controls-panel{flex-direction:column;align-items:stretch;gap:1rem;padding:1rem}.app-subtitle{display:none}.chord-card{flex:none;min-width:90px;padding:.75rem}.chord-name{font-size:1.25rem}.fretboard-wrapper{padding-bottom:.5rem;overflow-x:hidden}.mode-tab{padding:.5rem;font-size:.875rem}.compact-controls-container{flex-flow:wrap;justify-content:center;gap:.5rem;width:100%;padding:.5rem}.compact-control-item{gap:.25rem}.compact-control-label{display:none}.compact-select{max-width:120px}}@keyframes arrowStrike{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}