@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap";:root{--bg-color:#0f111a;--panel-bg:#1a1d2d;--text-main:#e2e8f0;--text-muted:#94a3b8;--accent:#00f0ff;--accent-glow:#00f0ff66;--handpan-bg:#2a2e45;--handpan-border:#3f4563;--note-bg:#1e2235;--note-border:#475070}#handpan-visualizer-root *{box-sizing:border-box}#handpan-visualizer-root{background-color:var(--bg-color);color:var(--text-main);flex-direction:column;min-height:100vh;font-family:Outfit,sans-serif;display:flex}#handpan-visualizer-root .app-container{width:100%;max-width:1200px;margin:0 auto;padding:2rem}#handpan-visualizer-root .header{text-align:center;margin-bottom:3rem}#handpan-visualizer-root .header h1{background:linear-gradient(135deg, #fff, var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;margin-bottom:.5rem;font-size:3.5rem;font-weight:700;color:var(--text-main)!important}#handpan-visualizer-root .subtitle{font-size:1.2rem;color:var(--text-muted)!important}#handpan-visualizer-root .main-content{flex-wrap:wrap;align-items:flex-start;gap:3rem;display:flex}#handpan-visualizer-root .handpan-container{flex:1;justify-content:center;align-items:center;min-width:350px;display:flex}#handpan-visualizer-root .handpan{aspect-ratio:1;background:radial-gradient(circle at 30% 30%, var(--handpan-border), var(--handpan-bg));border-radius:50%;width:100%;max-width:500px;position:relative;box-shadow:inset 0 0 40px #00000080,0 20px 40px #0006}#handpan-visualizer-root .note{background:radial-gradient(circle at 40% 40%, var(--note-border), var(--note-bg));cursor:pointer;border:1px solid #ffffff0d;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;transition:all .15s ease-out;display:flex;position:absolute;transform:translate(-50%,-50%);box-shadow:inset 0 2px 5px #ffffff1a,0 5px 15px #0000004d}#handpan-visualizer-root .note.active{background:var(--accent);box-shadow:0 0 20px var(--accent-glow), inset 0 0 10px #fffc;transform:translate(-50%,-50%)scale(1.05)}#handpan-visualizer-root .note.active .note-name,#handpan-visualizer-root .note.active .note-index{text-shadow:none;color:#000!important}#handpan-visualizer-root .note-name{text-shadow:1px 1px 2px #00000080;font-size:clamp(.8rem,2vw,1.2rem);font-weight:700;color:var(--text-main)!important}#handpan-visualizer-root .note-index{margin-top:2px;font-size:.7rem;color:var(--text-muted)!important}#handpan-visualizer-root .ding{box-shadow:inset 0 2px 10px #ffffff26,0 10px 20px #0006}#handpan-visualizer-root .sidebar{flex-direction:column;flex:1;gap:1.5rem;min-width:300px;display:flex}#handpan-visualizer-root .panel{background:var(--panel-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffff0d;border-radius:16px;padding:1.5rem;box-shadow:0 10px 30px #0003}#handpan-visualizer-root .control-group{flex-direction:column;gap:.5rem;margin-bottom:1.2rem;display:flex}#handpan-visualizer-root label{text-transform:uppercase;letter-spacing:1px;font-size:.9rem;color:var(--text-muted)!important}#handpan-visualizer-root select,#handpan-visualizer-root input[type=range]{border-radius:8px;outline:none;width:100%;padding:.8rem;font-family:inherit;font-size:1rem;transition:border-color .2s;color:var(--text-main)!important;background:#0003!important;border:1px solid #ffffff1a!important}#handpan-visualizer-root select:focus{border-color:var(--accent)!important}#handpan-visualizer-root select option{background:var(--panel-bg);color:var(--text-main)}#handpan-visualizer-root .btn-primary{cursor:pointer;text-transform:uppercase;letter-spacing:1px;border:none;border-radius:8px;width:100%;padding:1rem;font-size:1.1rem;font-weight:700;transition:all .2s;background:var(--accent)!important;color:#000!important}#handpan-visualizer-root .btn-primary:hover{box-shadow:0 5px 15px var(--accent-glow);transform:translateY(-2px)}#handpan-visualizer-root .btn-primary:active{transform:translateY(0)}#handpan-visualizer-root .btn-secondary{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;transition:all .2s;display:flex;color:var(--text-main)!important;background:#ffffff1a!important;border:1px solid #fff3!important}#handpan-visualizer-root .btn-secondary:hover{background:#fff3!important}#handpan-visualizer-root .note-interval{text-transform:uppercase;letter-spacing:1px;margin-top:1px;font-size:.55rem;color:#fff6!important}#handpan-visualizer-root .note.interval-root{border-color:#ffd70066}#handpan-visualizer-root .note.interval-root .note-name{text-shadow:0 0 5px #ffd70080;color:gold!important}#handpan-visualizer-root .note.interval-3rd{border-color:#2ecc7166}#handpan-visualizer-root .note.interval-3rd .note-name{text-shadow:0 0 5px #2ecc7180;color:#2ecc71!important}#handpan-visualizer-root .note.interval-5th{border-color:#3498db66}#handpan-visualizer-root .note.interval-5th .note-name{text-shadow:0 0 5px #3498db80;color:#3498db!important}#handpan-visualizer-root .note.interval-root.active{box-shadow:0 0 20px #ffd70099,inset 0 0 10px #fffc;background:gold!important}#handpan-visualizer-root .note.interval-3rd.active{box-shadow:0 0 20px #2ecc7199,inset 0 0 10px #fffc;background:#2ecc71!important}#handpan-visualizer-root .note.interval-5th.active{box-shadow:0 0 20px #3498db99,inset 0 0 10px #fffc;background:#3498db!important}@media (width<=768px){#handpan-visualizer-root .app-container{padding:1rem}#handpan-visualizer-root .header h1{font-size:2.5rem}}