:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.lights-container{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#000;position:fixed;top:0;left:0;margin:0;padding:0}.lights-scaled-wrapper{transform-origin:center center}#Table_01{border-collapse:collapse;border-spacing:0;line-height:0;background-color:#935434}#Table_01 td{padding:0;margin:0;line-height:0;vertical-align:top}#Table_01 img{display:block;border:0;margin:0;padding:0;vertical-align:top}@keyframes flickerFadeInOut{0%{opacity:0}5%{opacity:.8}10%{opacity:.4}15%{opacity:1}20%{opacity:.7}25%{opacity:1}30%{opacity:.9}35%{opacity:1}40%{opacity:.85}45%{opacity:1}50%{opacity:.95}55%{opacity:1}60%{opacity:.9}65%{opacity:1}70%{opacity:.8}75%{opacity:.95}80%{opacity:.6}85%{opacity:.9}90%{opacity:.4}95%{opacity:.7}to{opacity:0}}.letter-light.active{animation:flickerFadeInOut 4s ease-in-out forwards}.kpop-derpy-container{width:100%;height:100vh;background-color:#000;display:flex;justify-content:center;align-items:center;position:fixed;inset:0;overflow:hidden;margin:0;padding:0}.visualizer-container{position:relative;width:100%;min-height:80vh;display:flex;justify-content:center;align-items:center}.layer{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.derpy-face-top{z-index:5;width:clamp(300px,75vw,1200px);transform:translate(-50%,-70%)}.derpy-face-top img{width:100%;height:100%;object-fit:cover}.derpy-face-bottom{z-index:1;width:clamp(300px,75vw,1200px);height:clamp(125px,31.3vw,500px);transform:translate(-50%,6%)}.derpy-face-bottom img{width:100%;object-fit:cover}.tongue{z-index:2;width:clamp(60px,15vw,240px);height:clamp(75px,18.8vw,300px);transform:translate(-50%,-30%);transition:transform .1s ease-out}.tongue img{width:100%;height:100%;object-fit:contain}.tongue-text{position:absolute;top:28%;left:50%;transform:translate(-50%,-50%);color:#000;font-family:Arial,sans-serif;font-size:clamp(12px,1.8vw,28px);font-weight:700;text-align:center;z-index:21;pointer-events:none}.eyeball-left{z-index:3;width:clamp(80px,20vw,320px);transform:translate(-115%,-80%);transition:transform .1s ease-out}.eyeball-left img{width:100%;height:100%;object-fit:contain}.eyeball-right{z-index:4;width:clamp(80px,20vw,320px);transform:translate(10%,-80%);transition:transform .1s ease-out}.eyeball-right img{width:100%;height:100%;object-fit:contain}.control-panel{position:fixed;bottom:20px;right:20px;background:#000000b3;padding:4px;border-radius:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;font-size:12px;transition:opacity .3s ease}.control-panel:hover{background:#000000d9}.control-toggle{display:flex;align-items:center;cursor:pointer;color:#fff;gap:8px;-webkit-user-select:none;user-select:none;font-size:8px}.control-toggle input[type=checkbox]{appearance:none;width:36px;height:20px;background:#444;border-radius:10px;position:relative;cursor:pointer;transition:background .3s ease}.control-toggle input[type=checkbox]:checked{background:#4caf50}.control-toggle input[type=checkbox]:after{content:"";position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .3s ease}.control-toggle input[type=checkbox]:checked:after{transform:translate(16px)}.control-toggle span{font-weight:500;text-transform:uppercase;letter-spacing:.5px}.status-indicator{margin-top:0;padding-top:0;border-top:1px solid rgba(255,255,255,.1);color:#aaa;font-size:10px;text-transform:uppercase;letter-spacing:.5px}.status-indicator.active{color:#4caf50}.status-indicator.error{color:#f44336}.status-indicator.warning{color:#ff9800}.camera-preview{position:fixed;bottom:85px;right:20px;width:160px;height:120px;background:#000;border-radius:8px;overflow:hidden;display:none;border:2px solid rgba(76,175,80,.5);box-shadow:0 4px 12px #0000004d;z-index:99;transition:opacity .3s ease,transform .3s ease}.camera-preview.active{display:block;animation:fadeIn .3s ease}.camera-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-preview canvas{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;transform:scaleX(-1)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.guitar-visualization-container{width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);color:#fff;overflow:hidden;position:relative}.guitar-visualization-header{padding:20px;text-align:center;z-index:10}.guitar-visualization-title{font-size:2.5rem;margin:0 0 10px;font-weight:700;background:linear-gradient(90deg,gold,orange);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.guitar-visualization-subtitle{font-size:1rem;color:#aaa;margin:0}.guitar-visualization-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-width:1400px;padding:20px;gap:20px}.guitar-fretboard-wrapper{width:100%;max-width:1200px;background:#0000004d;border-radius:15px;padding:20px;box-shadow:0 10px 40px #00000080}.guitar-fretboard{width:100%;height:auto;display:block}.note-marker{transform-origin:center}.note-circle{filter:drop-shadow(0 0 8px rgba(255,215,0,.8))}.note-label{font-family:Arial,sans-serif;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.confidence-label{font-family:Monaco,Courier New,monospace}.guitar-controls{display:flex;flex-direction:column;gap:20px;align-items:center;padding:20px;background:#0000004d;border-radius:15px;min-width:400px}.guitar-controls-buttons{display:flex;gap:15px;flex-wrap:wrap;justify-content:center}.guitar-control-button{padding:12px 30px;font-size:1.1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:8px;box-shadow:0 4px 15px #0000004d}.guitar-control-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #0006}.guitar-control-button:active:not(:disabled){transform:translateY(0)}.guitar-control-button:disabled{opacity:.5;cursor:not-allowed}.guitar-control-button.primary{background:linear-gradient(135deg,#4caf50,#45a049);color:#fff}.guitar-control-button.primary:hover:not(:disabled){background:linear-gradient(135deg,#45a049,#3d8b40)}.guitar-control-button.secondary{background:linear-gradient(135deg,#f44336,#da190b);color:#fff}.guitar-control-button.secondary:hover:not(:disabled){background:linear-gradient(135deg,#da190b,#c41408)}.guitar-control-button.tertiary{background:linear-gradient(135deg,#2196f3,#0b7dda);color:#fff}.calibration-controls{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px}.calibration-label{font-size:1rem;font-weight:600;color:gold;text-align:center}.calibration-slider-group{display:flex;align-items:center;gap:15px}.calibration-slider{flex:1;height:6px;border-radius:3px;background:#fff3;outline:none;-webkit-appearance:none}.calibration-slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:gold;cursor:pointer;transition:all .2s ease}.calibration-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 10px #ffd70080}.calibration-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:gold;cursor:pointer;border:none;transition:all .2s ease}.calibration-slider::-moz-range-thumb:hover{transform:scale(1.2);box-shadow:0 0 10px #ffd70080}.calibration-value{font-size:1rem;font-weight:700;color:gold;min-width:100px;text-align:center}.guitar-status{padding:15px 25px;border-radius:8px;font-size:1rem;font-weight:600;text-align:center;min-width:300px}.guitar-status.listening{background:#4caf5033;border:2px solid #4CAF50;color:#4caf50;animation:statusPulse 2s ease-in-out infinite}.guitar-status.stopped{background:#9e9e9e33;border:2px solid #999;color:#999}.guitar-status.error{background:#f4433633;border:2px solid #f44336;color:#f44336}@keyframes statusPulse{0%,to{opacity:1}50%{opacity:.7}}.pitch-info-panel{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;align-items:flex-start;padding:15px;background:#0000004d;border-radius:10px;min-height:80px;min-width:600px;max-width:800px}.pitch-info-item{padding:10px 20px;background:#ffd7001a;border:2px solid #FFD700;border-radius:8px;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:90px;flex-shrink:0}.pitch-info-note{font-size:1.5rem;font-weight:700;color:gold}.pitch-info-freq{font-size:.8rem;color:#aaa}.pitch-info-empty{color:#666;font-style:italic;padding:20px;text-align:left;width:100%}.debug-panel{position:fixed;bottom:20px;right:20px;padding:15px;background:#000c;border-radius:10px;font-family:Monaco,Courier New,monospace;font-size:.85rem;max-width:400px;border:1px solid #333;z-index:1000}.debug-panel-title{color:gold;font-weight:700;margin:0 0 10px}.debug-panel-content{color:#0f0;line-height:1.6}.debug-panel-content div{margin:5px 0}@media(max-width:1024px){.guitar-visualization-title{font-size:2rem}.guitar-fretboard-wrapper{max-width:100%;padding:15px}.guitar-controls{min-width:auto;width:100%}}@media(max-width:768px){.guitar-visualization-title{font-size:1.5rem}.guitar-visualization-subtitle{font-size:.9rem}.guitar-control-button{padding:10px 20px;font-size:1rem}.calibration-controls{max-width:100%}.debug-panel{bottom:10px;right:10px;left:10px;max-width:none;font-size:.75rem}}.guitar-error{padding:15px 25px;background:#f4433633;border:2px solid #f44336;border-radius:8px;color:#f44336;text-align:center;max-width:500px}.guitar-instructions{padding:20px;background:#2196f31a;border:2px solid #2196F3;border-radius:10px;max-width:600px;text-align:center}.guitar-instructions h3{margin:0 0 15px;color:#2196f3}.guitar-instructions ul{list-style:none;padding:0;margin:0;text-align:left}.guitar-instructions li{padding:8px 0 8px 25px;position:relative}.guitar-instructions li:before{content:"🎸";position:absolute;left:0}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion:no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}