:root{--color-primary: #3498db;--color-primary-dark: #2980b9;--color-success: #2ecc71;--color-success-dark: #27ae60;--color-danger: #e74c3c;--color-warning: #f39c12;--color-text: #2c3e50;--color-text-muted: #7f8c8d;--color-bg: #f5f5f5;--color-bg-card: #ffffff;--color-border: #bdc3c7;--color-neck-bg: #f9f3e5;--color-neck-border: #e6d7b8;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 12px rgba(0, 0, 0, .1);--radius-sm: 8px;--radius-md: 12px}.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}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Poppins,sans-serif;background-color:var(--color-bg);color:var(--color-text);line-height:1.6;transition:padding-top .3s ease-out;padding-top:0}body.offline-mode{padding-top:40px}.container{max-width:100%;padding:1rem;margin:0 auto}h1{font-size:1.4rem;font-weight:700;color:var(--color-text);text-align:center;margin-bottom:0}.subtitle{font-size:.8rem;color:var(--color-text-muted);text-align:center}h2{font-size:1.2rem;margin-bottom:1rem;color:var(--color-text)}header{padding:.5rem 0;margin-bottom:.75rem}.tuning-selector{display:flex;justify-content:center;margin-bottom:.75rem}.tuning-dropdown{width:100%;max-width:400px;padding:.6rem 1rem;border:2px solid var(--color-primary);background-color:var(--color-bg-card);color:var(--color-text);border-radius:var(--radius-sm);font-weight:500;font-size:1rem;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233498db' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right 1rem center;background-size:1em}.tuning-dropdown:focus{outline:none;border-color:var(--color-primary-dark);box-shadow:0 0 0 3px #3498db33}.tuner-container{background-color:var(--color-bg-card);border-radius:var(--radius-md);padding:1rem;box-shadow:var(--shadow-md);margin-bottom:1rem}.tuner-display{text-align:center;margin-bottom:.5rem}.tuner-info-row{display:flex;align-items:center;justify-content:center;gap:1rem}.tuner-info-col{text-align:left}.note-display{font-size:2rem;font-weight:700;color:var(--color-text);margin-bottom:0}.frequency-display{font-size:.8rem;color:var(--color-text-muted);margin-bottom:0}.listening-frequency-display{font-size:.8rem;color:var(--color-primary);margin-bottom:0;font-weight:500}.tuning-indicator{position:relative;height:36px;margin:0 auto;width:80%;max-width:300px}.indicator-bar{position:absolute;top:50%;left:0;right:0;height:4px;background-color:#ecf0f1;transform:translateY(-50%);border-radius:2px}.indicator-bar:before{content:"";position:absolute;top:50%;left:50%;width:4px;height:14px;background-color:var(--color-success);transform:translate(-50%,-50%);border-radius:2px}.indicator-needle{position:absolute;top:0;left:50%;width:2px;height:100%;background-color:var(--color-danger);transform:translate(-50%);transition:left .2s ease}.indicator-needle.fast-transition{transition:left .1s ease}.indicator-needle.slow-transition{transition:left 1s ease-out}.string-selector{margin-bottom:1.5rem;background-color:var(--color-neck-bg);border-radius:var(--radius-sm);padding:.75rem;border:1px solid var(--color-neck-border)}.instrument-neck{display:flex;flex-direction:column;gap:.4rem;margin-bottom:0}.string-row{display:flex;align-items:center;gap:.75rem}.string-line{flex-grow:1;height:2px;background-color:#a0a0a0;border-radius:1px}.string-line.string-0{height:1px;background-color:#d0d0d0}.string-line.string-1{height:2px;background-color:#b0b0b0}.string-line.string-2{height:3px;background-color:#909090}.string-line.string-3{height:4px;background-color:#707070}.string-line.string-4{height:5px;background-color:#505050}.string-line.string-5{height:6px;background-color:#303030}.string-btn{padding:.3rem;min-width:48px;border:1px solid var(--color-border);background-color:var(--color-bg-card);color:#34495e;border-radius:var(--radius-sm);font-weight:500;cursor:pointer;transition:all .3s ease;text-align:center;font-size:.9rem}.string-btn.active{border-color:var(--color-primary);background-color:#ebf5fb;color:var(--color-primary)}.string-note{min-width:48px;text-align:center;font-weight:600;color:#34495e;font-size:.85rem;line-height:1.2}.button-container{display:flex;gap:1rem;margin-top:.5rem}.primary-btn,.secondary-btn{flex:1;padding:.65rem;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;cursor:pointer;transition:all .3s ease}.primary-btn{background-color:var(--color-primary);color:#fff;border:none}.primary-btn:hover{background-color:var(--color-primary-dark)}.primary-btn.listening{background-color:var(--color-danger)}.secondary-btn{background-color:#ecf0f1;color:var(--color-text);border:1px solid var(--color-border)}.secondary-btn:hover{background-color:#e0e6e8}.secondary-btn.active{background-color:var(--color-success);color:#fff;border-color:var(--color-success-dark)}.neck-visualizer{margin-bottom:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch}.neck{min-width:540px}.neck-fret-numbers{display:flex;align-items:flex-end;padding-bottom:4px}.neck-fret-num{text-align:center;font-size:.65rem;font-weight:600;color:var(--color-text-muted);flex-shrink:0}.neck-fret-num--nut{width:28px}.neck-board{position:relative;background:linear-gradient(180deg,#c9a96e,#d4b67a,#c19a5c,#d4b67a 45%,#c9a96e 55%,#b8924f,#c9a96e,#d4b67a);border-radius:6px;border:2px solid #8b6b3d;overflow:hidden;padding:0}.neck-inlays{position:absolute;inset:0;display:flex;pointer-events:none;z-index:0}.neck-inlay-cell{display:flex;align-items:center;justify-content:center;flex-shrink:0}.neck-inlay-cell--nut{width:28px}.neck-inlay-dot{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f5f0e0,#cfc5a8);box-shadow:inset 0 1px 2px #0003;opacity:.7}.neck-inlay-dot--double{width:10px;height:10px;box-shadow:inset 0 1px 2px #0003}.neck-str{display:flex;height:32px;position:relative;z-index:1}.neck-str:first-of-type{padding-top:6px}.neck-str:last-of-type{padding-bottom:6px}.neck-cell{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-right:2px solid #a08050;transition:background-color .25s ease}.neck-cell--nut{width:28px;border-right:4px solid #3a3025;background:#0000000f}.neck-cell:after{content:"";position:absolute;right:-2px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,#fff6,#ffffff1a)}.neck-cell--nut:after{right:-3px;width:2px}.neck-wire{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);border-radius:1px;pointer-events:none;z-index:1}.neck-wire--0{height:1px;background:linear-gradient(90deg,#e8e0d0,#d0c8b8,#e8e0d0)}.neck-wire--1{height:1.5px;background:linear-gradient(90deg,#d8d0c0,#c0b8a8,#d8d0c0)}.neck-wire--2{height:2px;background:linear-gradient(90deg,#c0b0a0,#a89888,#c0b0a0)}.neck-wire--3{height:2.5px;background:linear-gradient(90deg,#a89888,#908070,#a89888)}.neck-wire--4{height:3px;background:linear-gradient(90deg,#908070,#786858,#908070)}.neck-wire--5{height:3.5px;background:linear-gradient(90deg,#786858,#605040,#786858)}.neck-cell--hl{background-color:#3498db40}.neck-cell--exact{background-color:#2ecc7159}.neck-cell--fading{background-color:transparent;transition:background-color 1s ease-out}.neck-note-label{position:relative;z-index:3;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:.6rem;font-weight:700;font-family:Poppins,sans-serif;color:#fff;background:var(--color-primary);box-shadow:0 0 8px #3498db80;animation:neck-pop .2s ease-out;pointer-events:none}.neck-cell--exact .neck-note-label{background:var(--color-success);box-shadow:0 0 12px #2ecc7199}.neck-cell--fading .neck-note-label{opacity:0;transition:opacity 1s ease-out}@keyframes neck-pop{0%{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}.instructions{background-color:var(--color-bg-card);border-radius:var(--radius-md);padding:1rem;box-shadow:var(--shadow-md);margin-bottom:1rem}.instructions ol{padding-left:1.5rem}.instructions li{margin-bottom:.5rem}footer{text-align:center;padding:1rem 0;color:var(--color-text-muted);font-size:.9rem}.settings-section{background-color:var(--color-bg-card);border-radius:var(--radius-md);padding:1rem;box-shadow:var(--shadow-md);margin-bottom:1rem}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:1rem}.setting-label{font-weight:500;color:var(--color-text);font-size:.95rem}.setting-options{display:flex;gap:.5rem}.setting-option{padding:.4rem .85rem;border:1px solid var(--color-border);background-color:var(--color-bg);color:var(--color-text);border-radius:var(--radius-sm);font-weight:500;font-size:.85rem;cursor:pointer;transition:all .2s ease}.setting-option:hover{border-color:var(--color-primary);color:var(--color-primary)}.setting-option.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.offline-alert{position:fixed;top:0;left:0;right:0;background-color:#f44336;color:#fff;text-align:center;z-index:1000;transform:translateY(-100%);transition:transform .3s ease-out;box-shadow:var(--shadow-sm);padding:10px}.offline-alert.visible{transform:translateY(0)}@media (min-width: 768px){.container{max-width:700px;padding:2rem}h1{font-size:2.5rem}.subtitle{font-size:.9rem}.neck-str{height:38px}.neck-note-label{width:28px;height:28px;font-size:.65rem}}@media (min-width: 1024px){.container{max-width:800px}.neck-str{height:44px}}