.app{width:100%;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:20px 20px 40px}.container{max-width:1400px;width:100%;display:flex;flex-direction:row;gap:32px;align-items:flex-start}.left-panel{flex:0 0 auto;display:flex;flex-direction:column;gap:24px;min-width:400px}.right-panel{flex:1 1 auto;display:flex;flex-direction:column;gap:24px;align-items:center}.header{display:flex;flex-direction:column;gap:4px}h1{font-size:2.5rem;font-weight:700;margin:0}.subtitle{font-size:1rem;color:#888;margin:0}.controls{display:flex;gap:12px}.chord-controls-row{display:flex;flex-direction:column;gap:24px;width:100%}.chord-extension-controls{display:flex;flex-direction:column;gap:8px;width:100%}.chord-extension-label{font-size:.9rem;color:#aaa;font-weight:500}.chord-extension-buttons{display:flex;gap:8px}.chord-extension-button{flex:1;padding:12px 16px;font-size:1.1rem;font-weight:600;background:#2a2a2a;color:#aaa;border:2px solid #444;border-radius:8px;cursor:pointer;transition:all .2s}.chord-extension-button:hover{background:#333;border-color:#666;color:#fff}.chord-extension-button.active{background:#f44;border-color:#f44;color:#fff}.help-container{display:flex;flex-direction:column;gap:12px}.help-button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;font-size:1.1rem;font-weight:700;background:#4a9eff;color:#fff;border:none;border-radius:50%;cursor:pointer;transition:all .2s}.help-button:hover{background:#3a8eef;transform:scale(1.05)}.help-button.active{background:#fff;color:#4a9eff}.inline-instructions{background:#2a2a2a;border-radius:8px;padding:16px;border:1px solid #444;display:flex;flex-direction:column;gap:16px;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.instruction-section h3{font-size:1rem;color:#4a9eff;margin:0 0 8px}.instruction-section ul{margin:0;padding-left:20px;list-style-type:none;font-size:.9rem;color:#ccc}.instruction-section li{margin-bottom:6px;line-height:1.4}.instruction-section strong{color:#fff}.instruction-note{margin:0;font-style:italic;color:#888;font-size:.9rem;text-align:center;border-top:1px solid #444;padding-top:12px}.start-stop-button{padding:12px 32px;font-size:1.1rem;font-weight:600;background:#f44;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .2s}.start-stop-button.active{background:transparent}.start-stop-button:hover{opacity:.8}.debug-info{display:flex;flex-direction:column;gap:8px;width:100%;padding:16px;background:#2a2a2a;border-radius:8px;font-family:Monaco,Menlo,monospace}.debug-item{display:flex;justify-content:space-between;padding:4px 0}.label{color:#aaa}.value{color:#4a9eff;font-weight:600}.value.pitch-mode-on{color:#ff6b6b;font-weight:700}.camera-button{padding:12px 32px;font-size:1.1rem;font-weight:600;background:#f44;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .2s}.camera-button.active{background:transparent}.camera-button:hover{opacity:.8}.error-message{padding:12px 20px;background:#f44;color:#fff;border-radius:8px;font-size:.9rem;width:100%;text-align:center}.video-container{position:relative;width:100%;max-width:640px;aspect-ratio:4 / 3;background:#000;border-radius:8px;overflow:hidden;flex-shrink:0}.video-preview{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.video-placeholder{position:absolute;top:0;left:0;width:100%;height:100%;background:#2a2a2a;border:2px dashed #444;display:flex;align-items:center;justify-content:center;color:#666;font-size:.9rem;pointer-events:none}.spectrum-container{width:100%;max-width:640px;height:200px;background:#1a1a1a;border-radius:8px;overflow:hidden;margin-bottom:24px}.spectrum-canvas{width:100%;height:100%;display:block}@media (max-width: 1024px){.container{flex-direction:column;align-items:center}.left-panel{width:100%;max-width:640px}.right-panel{width:100%}}@media (max-width: 768px){.app{padding:12px 16px 30px}.container{gap:16px}.left-panel{min-width:unset;gap:12px}h1{font-size:1.75rem}.subtitle{font-size:.85rem}.controls{gap:8px}.start-stop-button,.camera-button{padding:8px 20px;font-size:.9rem}.chord-controls-row{flex-direction:row;align-items:center;gap:8px;width:100%;flex-wrap:wrap}.chord-extension-controls{flex-direction:row;align-items:center;gap:6px;width:auto;flex:0 0 auto}.chord-extension-label{font-size:.75rem;white-space:nowrap}.chord-extension-buttons{gap:6px}.chord-extension-button{padding:6px 10px;font-size:.85rem;min-width:40px}.debug-info{padding:8px 12px;font-size:.8rem;width:auto;flex:0 0 auto}.debug-item{padding:0;gap:6px}.label,.value{font-size:.8rem}.help-container{flex-direction:column;gap:8px;flex:0 0 auto;position:relative}.help-button{width:24px;height:24px;font-size:.85rem}.help-container .inline-instructions{width:100%;margin-top:8px}.inline-instructions{padding:10px;gap:10px}.instruction-section h3{font-size:.85rem}.instruction-section ul,.instruction-note{font-size:.8rem}.error-message{font-size:.8rem;padding:8px 12px}.spectrum-container{height:140px;margin-bottom:12px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#1a1a1a;color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center}#root{width:100%;height:100vh}