*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#1a1a1a;color:#fff;overflow:hidden}#guitar-canvas{display:block;width:100%;height:100%;background:linear-gradient(135deg,#1a1a1a,#0f0f0f)}#ui-container{position:relative;z-index:1000;pointer-events:none}#ui-container>*{pointer-events:auto}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#2c2c2c}::-webkit-scrollbar-thumb{background:#555;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#777}:root{--primary-color: #1a1a1a;--secondary-color: #00aaff;--accent-color: #ff3300;--background-dark: #050505;--background-light: #151515;--text-light: #e0e0e0;--text-muted: #888888;--border-color: #2a2a2a;--active-border-color: #0077cc;--success-color: #00cc66;--warning-color: #ffaa00;--error-color: #ff0000;--shadow-sm: 0 2px 5px rgba(0, 0, 0, .6);--shadow-md: 0 8px 20px rgba(0, 0, 0, .8);--shadow-lg: 0 15px 30px rgba(0, 0, 0, .9);--glow-shadow: 0 0 15px var(--secondary-color);--transition-fast: .15s ease-out;--transition-normal: .25s ease-out;--transition-slow: .4s ease-out;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px}.chord-selector{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1000;background:var(--background-light);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md);max-width:400px;min-width:320px;transition:all var(--transition-normal)}.chord-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.chord-button{background:linear-gradient(145deg,var(--primary-color),#0a0a0a);border:2px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-md);cursor:pointer;transition:all var(--transition-normal);text-align:center;position:relative;overflow:hidden;min-height:80px;display:flex;flex-direction:column;justify-content:center;align-items:center;box-shadow:var(--shadow-sm)}.chord-button:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--chord-color-rgb, 0, 170, 255),.3) 0%,transparent 70%);opacity:0;transition:opacity var(--transition-normal);z-index:-1}.chord-button:hover:before{opacity:1}.chord-button:hover{border-color:var(--chord-color, var(--secondary-color));transform:translateY(-4px);box-shadow:var(--shadow-lg),var(--glow-shadow);background:linear-gradient(145deg,#2a2a2a,var(--primary-color))}.chord-button.selected{border-color:var(--chord-color, var(--secondary-color));background:linear-gradient(145deg,#2a2a2a,#0a0a0a);box-shadow:var(--shadow-lg),var(--glow-shadow)}.chord-button.selected:before{opacity:.5}.chord-name{font-size:1.8rem;font-weight:800;color:var(--text-light);margin-bottom:var(--spacing-xs);text-shadow:0 0 8px rgba(0,170,255,.7)}.chord-full-name{font-size:.85rem;color:var(--text-muted);margin-bottom:var(--spacing-sm)}.difficulty-badge{position:absolute;top:var(--spacing-xs);right:var(--spacing-xs);background:var(--warning-color);color:var(--background-dark);font-size:.7rem;padding:4px 10px;border-radius:var(--radius-sm);font-weight:700;text-transform:uppercase;box-shadow:var(--shadow-sm);border:1px solid rgba(0,0,0,.3)}.chord-controls{display:flex;align-items:center;gap:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border-color);flex-wrap:wrap}.control-button{background:linear-gradient(180deg,#333,#1a1a1a);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-light);cursor:pointer;transition:all var(--transition-fast);font-size:1rem;min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);text-shadow:0 1px 2px rgba(0,0,0,.5)}.control-button:hover{background:linear-gradient(180deg,var(--secondary-color),#0077cc);transform:translateY(-2px);box-shadow:var(--shadow-md),0 0 10px var(--secondary-color)}.control-button:active{transform:translateY(0);box-shadow:var(--shadow-sm);background:linear-gradient(180deg,#0077cc,var(--secondary-color))}.volume-control{display:flex;align-items:center;gap:var(--spacing-sm);flex:1;min-width:120px}.volume-label{color:var(--text-muted);font-size:.9rem;white-space:nowrap}.volume-slider{flex:1;height:8px;border-radius:4px;background:#3a3a3a;outline:none;appearance:none;cursor:pointer;transition:background var(--transition-fast)}.volume-slider::-webkit-slider-thumb{appearance:none;width:22px;height:22px;border-radius:50%;background:var(--secondary-color);cursor:pointer;border:4px solid var(--text-light);box-shadow:0 0 10px var(--secondary-color),0 3px 8px #0009;margin-top:-7px;transition:background var(--transition-fast),box-shadow var(--transition-fast)}.volume-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--secondary-color);cursor:pointer;border:4px solid var(--text-light);box-shadow:0 0 10px var(--secondary-color),0 3px 8px #0009;transition:background var(--transition-fast),box-shadow var(--transition-fast)}.volume-slider:hover::-webkit-slider-thumb,.volume-slider:hover::-moz-range-thumb{background:var(--accent-color);box-shadow:0 0 15px var(--accent-color),0 4px 12px #000c}.chord-info-panel{position:fixed;top:2rem;right:2rem;background:#0a0a0acc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem;min-width:200px;opacity:0;transform:translateY(-10px);transition:all .4s ease;z-index:1001;font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;color:#fff}.chord-info-panel.visible{opacity:1;transform:translateY(0)}.info-close-button{position:absolute;top:8px;right:10px;background:none;border:none;color:#ccc;font-size:16px;cursor:pointer;width:20px;height:20px;display:flex;align-items:center;justify-content:center;transition:color .2s ease}.info-close-button:hover{color:#fff}.info-chord-title{font-size:2rem;font-weight:700;color:#fff;margin-bottom:.5rem}.info-chord-description{font-size:.875rem;color:#888;margin-bottom:1rem;text-transform:capitalize}.info-finger-positions{display:flex;flex-direction:column;gap:.5rem}.finger-position{display:flex;align-items:center;gap:.75rem;font-size:.8rem}.finger-color{width:12px;height:12px;border-radius:50%;flex-shrink:0}.finger-color.index{background:#55e1f9}.finger-color.middle{background:#50a1ff}.finger-color.ring{background:#d06aff}.finger-color.pinky{background:#ff92f0}.finger-text{color:#ccc}.error-message{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--error-color);color:#fff;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-md);box-shadow:0 6px 20px #f009;z-index:1001;animation:fadeInScale var(--transition-normal);font-weight:700;border:1px solid var(--text-light)}.chord-button.loading{opacity:.7;cursor:not-allowed;pointer-events:none}.chord-button.loading:after{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border:4px solid transparent;border-top:4px solid var(--text-light);border-radius:50%;animation:spin .8s linear infinite}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeInScale{0%{transform:translate(-50%,-50%) scale(.8);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.canvas-grain-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;background-image:radial-gradient(circle at 10% 20%,#00ffff08,#00ffff03),radial-gradient(circle at 90% 80%,#ff00ff08,#ff00ff03);background-size:300% 300%;animation:floatGrain 45s linear infinite}@keyframes floatGrain{0%{background-position:0% 0%}25%{background-position:100% 50%}50%{background-position:0% 100%}75%{background-position:100% 0%}to{background-position:0% 0%}}@media (max-width: 768px){.chord-selector{position:relative;top:auto;left:auto;transform:none;margin:var(--spacing-md) auto;max-width:none;width:calc(100% - var(--spacing-xl));padding:var(--spacing-md)}.chord-grid{grid-template-columns:repeat(2,1fr)}.chord-controls{flex-direction:column;align-items:stretch;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.volume-control{flex-direction:column;align-items:stretch;width:100%;margin-bottom:var(--spacing-md)}.volume-label{margin-bottom:var(--spacing-xs)}}@media (max-width: 480px){.chord-grid{grid-template-columns:1fr}.chord-button{min-height:70px}.chord-name{font-size:1.4rem}.chord-selector,.chord-info-panel{padding:var(--spacing-md)}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.chord-button:focus,.control-button:focus,.volume-slider:focus{outline:4px solid var(--secondary-color);outline-offset:4px;box-shadow:0 0 15px var(--secondary-color)}@media (prefers-contrast: high){:root{--background-dark: #000000;--background-light: #1a1a1a;--text-light: #ffffff;--border-color: #ffffff;--primary-color: #000000;--secondary-color: #ffff00;--accent-color: #ff00ff;--success-color: #00ff00;--error-color: #ff0000}.chord-selector,.chord-info-panel,.chord-button,.control-button,.finger-position{border:2px solid var(--border-color)!important}.volume-slider::-webkit-slider-thumb,.volume-slider::-moz-range-thumb{border:3px solid var(--text-light)!important}}