@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap";*{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body{font-family:Inter,sans-serif;background:linear-gradient(135deg,#1a1a1a,#2a2a2a 40%,#1e1e1e);margin:0;color:#d0d0d0;min-height:100vh}.container{max-width:100%;padding:28px 40px;position:relative}.header-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.lang-switcher{display:flex;gap:4px;flex-shrink:0}.lang-btn{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:#888;font-family:Inter,sans-serif;font-size:12px;font-weight:700;padding:5px 10px;border-radius:6px;cursor:pointer;transition:all .2s ease;letter-spacing:.5px}.lang-btn:hover{background:#ffffff1a;color:#ccc}.lang-btn.active{background:linear-gradient(135deg,#b0b0b0,gray);color:#1a1a1a;border-color:transparent}h1{margin:0;font-size:1.6em;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,silver,#e8e8e8,#a0a0a0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;white-space:nowrap}.controls{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:20px;flex-wrap:wrap}.control-group{display:flex;flex-direction:column;align-items:stretch;gap:6px;flex:1;min-width:0}.control-group label{text-align:left}.control-group select,.control-group input[type=number]{width:100%}label{font-weight:600;font-size:.8em;text-transform:uppercase;letter-spacing:.8px;color:#aaa}select,input[type=number]{padding:9px 14px;height:38px;border:1px solid rgba(255,255,255,.12);border-radius:10px;font-size:13px;font-weight:600;font-family:Inter,sans-serif;cursor:pointer;transition:all .25s ease;background:#ffffff0f;color:#eee;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}select:hover,input[type=number]:hover{border-color:#ffffff40;background:#ffffff1a}select:focus,input[type=number]:focus{outline:none;border-color:#909090;box-shadow:0 0 0 3px #a0a0a026}select option,select optgroup{background:#2a2a2a;color:#eee}input[type=number]{width:100px;text-align:center}.control-group:has(input[type=number]){flex:0 0 auto}.tuning-strings{display:flex;align-items:flex-end;gap:4px;flex:1}.string-tuning{display:flex;flex-direction:column;align-items:stretch;gap:4px;flex:1}.string-tuning label{font-size:.7em;color:#888;text-align:center}.string-tuning select{padding:6px 2px;height:38px;min-width:42px;text-align:center;font-size:12px}.scale-info{text-align:left;margin-bottom:24px;padding:14px 24px;background:#ffffff0a;border:1px solid rgba(255,255,255,.08);border-radius:10px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:wrap}.scale-notes{font-size:1.15em;font-weight:700;margin:0;letter-spacing:1px;background:linear-gradient(90deg,#d0d0d0,#fff,#b0b0b0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.scale-info .legend{font-size:.8em;color:#888;margin:0}.metronome{flex:0 0 auto;align-self:flex-end;position:relative}.metronome-toggle{background:#ffffff0f;border:1px solid rgba(255,255,255,.12);color:#aaa;font-family:Inter,sans-serif;font-size:13px;font-weight:700;padding:8px 20px;border-radius:10px;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;height:38px}.metronome-toggle:hover{background:#ffffff1a;color:#ccc}.metronome-toggle.active{border-color:#fff3;color:#ccc}.metronome-panel{margin-top:10px;padding:14px 16px;background:#1e1e1ef7;border:1px solid rgba(255,255,255,.12);border-radius:10px;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:absolute;right:0;top:100%;z-index:20}.metronome-controls{display:grid;grid-template-columns:1fr auto auto auto;align-items:end;gap:10px}.metronome-bpm{display:flex;flex-direction:column;gap:6px;grid-column:1 / -1}.metronome-bpm label{font-weight:600;font-size:.8em;text-transform:uppercase;letter-spacing:.8px;color:#aaa}.bpm-row{display:flex;align-items:center;gap:8px}.metronome-bpm input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:6px;border-radius:3px;background:#ffffff1f;outline:none;cursor:pointer}.metronome-bpm input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,silver,#909090);cursor:pointer;border:none}.metronome-bpm input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,silver,#909090);cursor:pointer;border:none}.metronome-bpm input[type=number]{width:80px;height:38px;text-align:center;flex-shrink:0;font-size:15px;font-weight:700}.metronome-time-sig{display:flex;flex-direction:column;gap:6px}.metronome-time-sig label{font-weight:600;font-size:.8em;text-transform:uppercase;letter-spacing:.8px;color:#aaa}.metronome-btn{font-family:Inter,sans-serif;font-weight:700;border:1px solid rgba(255,255,255,.12);border-radius:10px;cursor:pointer;transition:all .2s ease;height:38px}.metronome-play{width:48px;background:linear-gradient(135deg,#4caf50,#388e3c);color:#fff;font-size:16px;border-color:transparent;display:flex;align-items:center;justify-content:center}.metronome-play.playing{background:linear-gradient(135deg,#e74c3c,#c0392b)}.metronome-play:hover{opacity:.9;transform:scale(1.05)}.metronome-tap{padding:0 18px;background:#ffffff0f;color:#aaa;font-size:12px;text-transform:uppercase;letter-spacing:.8px}.metronome-tap:hover{background:#ffffff1f;color:#ccc}.metronome-tap:active{background:#ffffff2e;transform:scale(.96)}.metronome-beats{display:flex;gap:8px;margin-top:12px;justify-content:center;align-items:center}.beat-dot{width:16px;height:16px;border-radius:50%;background:#ffffff1a;border:1px solid rgba(255,255,255,.15);transition:background .08s ease,transform .08s ease,box-shadow .08s ease}.beat-dot.accent{width:20px;height:20px}.beat-dot.active{background:linear-gradient(135deg,#e74c3c,#c0392b);border-color:transparent;transform:scale(1.3);box-shadow:0 0 12px #e74c3c80}.beat-dot.accent.active{background:linear-gradient(135deg,#f5af19,#f0c040);box-shadow:0 0 14px #f5af1999}@media(max-width:768px){.metronome{flex-basis:100%}.metronome-toggle{width:100%;text-align:left}.metronome-panel{position:static}}.fretboard{background:linear-gradient(180deg,#5c3a1e,#7a4e2a 20%,#6b4226 50%,#5c3a1e);border-radius:14px;padding:16px 20px;margin:16px 0;overflow-x:auto;box-shadow:0 8px 32px #00000080,inset 0 1px #ffffff14;border:1px solid rgba(255,255,255,.05)}.fretboard-table{width:100%;border-collapse:separate;border-spacing:0;min-width:800px}.fret-header{color:#a88b6a;font-weight:700;text-align:center;padding:6px 4px;font-size:11px;border:none;position:relative}.fret-header.has-dot:after{content:"";display:block;width:6px;height:6px;background:#a88b6a;border-radius:50%;margin:4px auto 0;opacity:.6}.fret-header.has-double-dot:after{content:"";display:block;width:6px;height:6px;background:#a88b6a;border-radius:50%;margin:4px auto 0;opacity:.6;box-shadow:0 10px #a88b6a}.string-label{background:transparent;color:#a88b6a;font-weight:700;text-align:center;padding:10px 8px;font-size:12px;border:none;white-space:nowrap;width:64px}.fret-cell{text-align:center;padding:0;position:relative;font-weight:600;font-size:12px;height:32px;vertical-align:middle;border-left:1.5px solid rgba(180,150,100,.35);border-right:none;border-top:none;border-bottom:none;background:transparent;color:transparent}.fret-cell:before{content:"";position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);border-bottom:1px solid rgba(200,180,140,.3)}tr:not(:first-child) td.fret-cell:first-of-type{border-left:4px solid #d4c5a0}.note-in-scale{color:#fff!important}.note-in-scale .note-badge{background:linear-gradient(135deg,#e74c3c,#c0392b);box-shadow:0 2px 8px #e74c3c66}.blue-note{color:#fff!important}.blue-note .note-badge{background:linear-gradient(135deg,#2196f3,#1565c0);box-shadow:0 2px 8px #2196f366}.root-note{color:#1a1a2e!important}.root-note .note-badge{background:linear-gradient(135deg,#f5af19,#f0c040);box-shadow:0 2px 10px #f5af1980}.note-badge{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;position:relative;z-index:2;transition:transform .15s ease}.note-badge:hover{transform:scale(1.2)}.note-name{display:block;line-height:1;font-size:11px;font-weight:800}.degree-number{display:block;font-size:8px;opacity:.7;line-height:1;margin-top:1px;font-weight:600}.scale-positions{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin:24px 0}@media(min-width:1200px){.scale-positions{grid-template-columns:repeat(3,1fr)}}.position-heading{text-align:center;font-size:.85em;font-weight:700;color:#a88b6a;margin:0 0 8px;letter-spacing:.5px;text-transform:uppercase}.position-fretboard{background:linear-gradient(180deg,#5c3a1e,#7a4e2a 20%,#6b4226 50%,#5c3a1e);border-radius:10px;padding:12px 16px;overflow-x:auto;box-shadow:0 4px 16px #0006,inset 0 1px #ffffff14;border:1px solid rgba(255,255,255,.05)}.position-fretboard .fretboard-table{min-width:0}.position-board tr:not(:first-child) td.fret-cell:first-of-type{border-left:1.5px solid rgba(180,150,100,.35)}@media(max-width:768px){.container{padding:16px 12px}.header-bar{flex-direction:column;gap:8px;margin-bottom:12px}h1{font-size:1.1em;white-space:normal;text-align:center}.controls{gap:10px}.fretboard{padding:10px;border-radius:10px}.scale-info{flex-direction:column;gap:6px}}