*{box-sizing:border-box;margin:0;padding:0}body{font-family:Georgia,serif;background:#f5f0e6;color:#2d2a24;min-height:100vh}.app{max-width:600px;margin:0 auto;padding:2rem}.nav{display:flex;gap:1.5rem;margin-bottom:2rem;justify-content:center;border-bottom:2px solid #d4c9b5;padding-bottom:1rem}.nav a{color:#7d7567;text-decoration:none;font-size:1rem}.nav a.active,.nav a:hover{color:#2d2a24;text-decoration:underline}.chord-display{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem}.chord-box{position:relative;background:#fff;border:3px solid #2d2a24;border-radius:4px;padding:2rem 3rem;text-align:center;box-shadow:4px 4px #2d2a24}.chord{font-size:3.5rem;font-weight:700;color:#2d2a24}.lock{position:absolute;top:8px;right:8px;background:transparent;border:none;font-size:1rem;cursor:pointer;opacity:.3}.lock.locked{opacity:1}.timer{font-size:4rem;text-align:center;font-weight:700;margin-bottom:2rem;font-variant-numeric:tabular-nums;font-family:Courier New,monospace}.controls{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem}.controls button{background:#2d2a24;color:#f5f0e6;border:none;padding:.75rem 1.5rem;font-size:1rem;cursor:pointer;font-family:inherit}.controls button:hover{background:#4a453b}.chart{display:flex;justify-content:center;gap:2rem;margin-bottom:2rem}.chord-chart{width:140px;background:#fff;border:2px solid #2d2a24;padding:.5rem}.chord-chart svg{width:100%;height:auto}.settings{background:#fff;border:2px solid #d4c9b5;padding:1.5rem}.settings h2{margin-bottom:1rem;font-size:1.2rem}.settings h3{margin:1.5rem 0 1rem;font-size:1rem}.settings h4{margin:.5rem 0;color:#7d7567;font-size:.85rem;font-weight:400}.settings label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem}.settings select{padding:.4rem;border:1px solid #d4c9b5;background:#fff;font-family:inherit;margin-left:auto}.settings input[type=number]{width:70px;padding:.4rem;border:1px solid #d4c9b5;margin-left:auto;font-family:inherit}.chord-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.chord-buttons button{background:#fff;color:#7d7567;border:1px solid #d4c9b5;padding:.4rem .8rem;cursor:pointer;font-family:inherit}.chord-buttons button.active{background:#2d2a24;color:#f5f0e6;border-color:#2d2a24}.strum-trainer{text-align:center}.strum-trainer h1{margin-bottom:2rem;font-weight:400;font-size:1.8rem}.pattern-display{background:#fff;border:3px solid #2d2a24;padding:1.5rem;margin-bottom:2rem;box-shadow:4px 4px #2d2a24}.beats-row{display:flex;justify-content:center;gap:.25rem}.beat-cell{width:55px;padding:.75rem .5rem;border:1px solid #d4c9b5;transition:background .1s}.beat-cell.active{background:#2d2a24;color:#f5f0e6}.beat-label{font-size:1.2rem;font-weight:700;margin-bottom:.5rem;font-family:Courier New,monospace}.strum{font-size:1.8rem;font-weight:700;height:2.2rem}.strum.down{color:#1a6b3d}.strum.up{color:#b35c00}.beat-cell.active .strum.down,.beat-cell.active .strum.up{color:#f5f0e6}.strum-trainer .controls{margin-bottom:1.5rem}.strum-trainer .settings{display:inline-block;text-align:left}.strum-trainer .settings label{display:flex;flex-direction:column;align-items:center;gap:.5rem;margin-bottom:1rem}.strum-trainer .settings input[type=range]{width:180px}.strum-trainer .settings select{margin-left:0}.home{text-align:center;padding-top:4rem}.home h1{margin-bottom:3rem;font-weight:400;font-size:2rem}.home-buttons{display:flex;flex-direction:column;gap:1rem;align-items:center}.home-btn{background:#fff;color:#2d2a24;text-decoration:none;padding:1.5rem 2rem;width:320px;display:flex;flex-direction:column;gap:.5rem;border:3px solid #2d2a24;box-shadow:4px 4px #2d2a24;transition:transform .1s,box-shadow .1s}.home-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px #2d2a24}.home-btn-title{font-size:1.4rem}.home-btn-desc{font-size:.9rem;color:#7d7567}.video-looper{text-align:center}.video-looper h1{margin-bottom:2rem;font-weight:400;font-size:1.8rem}.url-input{display:flex;gap:.5rem;margin-bottom:1.5rem}.url-input input{flex:1;padding:.75rem;border:2px solid #2d2a24;font-family:inherit;font-size:1rem}.url-input button{background:#2d2a24;color:#f5f0e6;border:none;padding:.75rem 1.5rem;font-family:inherit;cursor:pointer}.video-container{margin-bottom:1rem}.video-container iframe{width:100%;aspect-ratio:16/9;border:3px solid #2d2a24;box-shadow:4px 4px #2d2a24}.time-display{font-size:2rem;font-family:Courier New,monospace;margin-bottom:1rem}.video-looper .controls{margin-bottom:1.5rem}.video-looper .play-btn{padding:.75rem 2.5rem}.video-looper .settings{display:inline-block;text-align:left;min-width:280px}.setting-group{margin-bottom:1rem}.setting-group>label{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;font-weight:700}.speed-buttons{display:flex;gap:.5rem}.speed-buttons button{background:#fff;border:1px solid #d4c9b5;padding:.4rem .8rem;cursor:pointer;font-family:inherit}.speed-buttons button.active{background:#2d2a24;color:#f5f0e6;border-color:#2d2a24}.loop-controls{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}.loop-controls>div{display:flex;align-items:center;gap:.5rem}.loop-controls span{min-width:100px}.loop-controls button{background:#fff;border:1px solid #d4c9b5;padding:.25rem .5rem;cursor:pointer;font-family:inherit;font-size:.85rem}.metronome{text-align:center;padding-top:3rem}.bpm-display{font-size:8rem;font-weight:700;font-family:Courier New,monospace;line-height:1}.bpm-label{font-size:1.2rem;color:#7d7567;margin-bottom:2rem}.bpm-controls{display:flex;justify-content:center;gap:.5rem;margin-bottom:2rem}.bpm-controls button{background:#fff;border:2px solid #2d2a24;padding:.75rem 1.25rem;font-family:inherit;font-size:1rem;cursor:pointer}.bpm-controls button:hover{background:#2d2a24;color:#f5f0e6}.start-btn{background:#2d2a24;color:#f5f0e6;border:none;padding:1rem 3rem;font-size:1.2rem;font-family:inherit;cursor:pointer}.start-btn:hover{background:#4a453b}