@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap";.music-tools-container{display:flex;flex-direction:column;gap:2.5rem;width:100%;max-width:900px;margin:0 auto;padding:2rem;background:#0a0a0ab3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(245,245,245,.1);border-radius:8px}.tools-tabs{display:flex;justify-content:center;gap:1rem;border-bottom:1px solid rgba(245,245,245,.1);padding-bottom:1rem;flex-wrap:wrap}.tab-btn{background:transparent;border:1px solid rgba(245,245,245,.2);color:#f5f5f599;padding:.75rem 1.5rem;font-family:var(--font-primary);font-size:11px;text-transform:uppercase;cursor:pointer;letter-spacing:.1em;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:4px}.tab-btn:hover{border-color:#f5f5f599;color:var(--text-color)}.tab-btn.active{border-color:#8b5cf6;color:#fff;background:#8b5cf61a;box-shadow:0 0 15px #8b5cf633}.visualizer-card{background:#1a191780;border:1px solid rgba(245,245,245,.1);border-radius:6px;padding:1rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}.visualizer-canvas{width:100%;height:120px;background:#0d0d0d;border-radius:4px;border:1px solid rgba(245,245,245,.05)}.visualizer-title{font-size:10px;letter-spacing:.2em;color:#f5f5f566}.piano-tool{display:flex;flex-direction:column;gap:2rem}.piano-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;background:#14141480;padding:1.25rem;border-radius:6px;border:1px solid rgba(245,245,245,.05)}.piano-control-group{display:flex;flex-direction:column;gap:.5rem;text-align:left}.piano-control-group label{font-size:10px;letter-spacing:.1em;color:#f5f5f599}.piano-select{width:100%;padding:.6rem;background:#151515;color:#fff;border:1px solid rgba(245,245,245,.15);border-radius:4px;font-family:var(--font-primary);font-size:11px;outline:none;cursor:pointer;transition:border-color .3s}.piano-select:focus{border-color:#8b5cf6}.piano-slider{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:#f5f5f51a;outline:none;margin:10px 0}.piano-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:#8b5cf6;cursor:pointer;box-shadow:0 0 8px #8b5cf6cc;transition:transform .1s}.piano-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.piano-keyboard-wrapper{overflow-x:auto;padding:10px 0}.piano-keyboard{display:flex;position:relative;width:max-content;margin:0 auto;height:200px;background:#000;padding:10px;border-radius:8px;border:1px solid rgba(245,245,245,.1)}.piano-key{position:relative;cursor:pointer;transition:all .1s ease;-webkit-user-select:none;user-select:none}.piano-key.white{width:45px;height:100%;background:#fff;border:1px solid #ddd;border-radius:0 0 4px 4px;z-index:1}.piano-key.white:hover{background:#f0f0f0}.piano-key.white.active{background:#8b5cf6;border-color:#8b5cf6;box-shadow:inset 0 -10px 15px #fff6,0 0 12px #8b5cf699}.piano-key.black{width:28px;height:110px;background:#111;border:1px solid #000;border-radius:0 0 3px 3px;margin-left:-14px;margin-right:-14px;z-index:2}.piano-key.black:hover{background:#222}.piano-key.black.active{background:#4ecdc4;border-color:#4ecdc4;box-shadow:0 0 12px #4ecdc4cc}.key-label{position:absolute;bottom:10px;left:50%;transform:translate(-50%);font-size:9px;color:#888;font-weight:700}.piano-key.black .key-label{color:#bbb;bottom:8px}.piano-key.white.active .key-label{color:#fff}.piano-key.black.active .key-label{color:#000}.drum-pad-tool{display:flex;flex-direction:column;gap:1.5rem}.drum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:500px;margin:0 auto}.drum-pad{aspect-ratio:1;background:#141414cc;border:1px solid rgba(245,245,245,.15);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative;-webkit-user-select:none;user-select:none}.drum-pad:hover{border-color:#f5f5f580;background:#1e1e1ecc;transform:translateY(-2px)}.drum-pad.active{transform:scale(.95)}.drum-pad.kick.active{background:#ff6b6b33;border-color:#ff6b6b;box-shadow:0 0 15px #ff6b6b99}.drum-pad.snare.active{background:#4ecdc433;border-color:#4ecdc4;box-shadow:0 0 15px #4ecdc499}.drum-pad.hihat.active{background:#8b5cf633;border-color:#8b5cf6;box-shadow:0 0 15px #8b5cf699}.drum-pad.fx.active{background:#ffd93d33;border-color:#ffd93d;box-shadow:0 0 15px #ffd93d99}.drum-name{font-size:11px;font-weight:700;color:var(--text-color);letter-spacing:.05em}.drum-key-hint{font-size:8px;color:#f5f5f566;background:#0006;padding:2px 6px;border-radius:3px;border:1px solid rgba(245,245,245,.05)}.ambient-tool{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.5rem;padding:1rem}.ambient-channel{background:#14141499;border:1px solid rgba(245,245,245,.08);border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;transition:all .3s ease}.ambient-channel.active{border-color:#8b5cf6;background:#8b5cf608}.ambient-header{display:flex;justify-content:space-between;align-items:center}.ambient-title{font-size:11px;font-weight:700;letter-spacing:.1em}.ambient-status{width:6px;height:6px;border-radius:50%;background:#f5f5f533;transition:background .3s}.ambient-channel.active .ambient-status{background:#4ecdc4;box-shadow:0 0 8px #4ecdc4}.ambient-controls{display:flex;align-items:center;gap:1rem}.ambient-slider-group{flex:1;display:flex;flex-direction:column;gap:.25rem;text-align:left}.ambient-slider-group label{font-size:8px;color:#f5f5f566}.keyboard-helper-tip{font-size:10px;color:#f5f5f580;margin-top:1rem;letter-spacing:.05em;display:flex;justify-content:center;align-items:center;gap:.5rem}.keyboard-helper-key{background:#f5f5f51a;padding:1px 5px;border-radius:3px;border:1px solid rgba(245,245,245,.15);color:var(--text-color)}.recorded-loops-panel{margin-top:1.5rem;background:#14141480;border:1px solid rgba(245,245,245,.08);border-radius:6px;padding:1rem;text-align:left}.recorded-loops-title{font-size:10px;letter-spacing:.15em;color:#f5f5f580;margin-bottom:.75rem;display:block}.recording-controls{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}.record-btn{background:transparent;border:1px solid #FF6B6B;color:#ff6b6b;padding:.5rem 1rem;font-family:var(--font-primary);font-size:10px;cursor:pointer;letter-spacing:.1em;transition:all .3s}.record-btn:hover{background:#ff6b6b1a}.record-btn.recording{background:#ff6b6b;color:#fff;animation:pulse-red 1.5s infinite alternate}.loop-list{display:flex;flex-direction:column;gap:.5rem;max-height:120px;overflow-y:auto}.loop-item{display:flex;justify-content:space-between;align-items:center;background:#1e1e1e99;padding:.4rem .8rem;border-radius:4px;border:1px solid rgba(245,245,245,.05)}.loop-name{font-size:10px;letter-spacing:.05em}.loop-actions{display:flex;gap:.5rem}.loop-btn{background:transparent;border:1px solid rgba(245,245,245,.2);color:#f5f5f5cc;font-family:var(--font-primary);font-size:9px;padding:2px 6px;cursor:pointer;transition:all .2s}.loop-btn:hover{border-color:#8b5cf6;color:#8b5cf6}.loop-btn.delete:hover{border-color:#ff6b6b;color:#ff6b6b}.theory-section-title{font-size:12px;letter-spacing:.2em;margin:1.5rem 0 1rem;color:#8b5cf6;text-align:left;border-bottom:1px solid rgba(139,92,246,.2);padding-bottom:4px}.theory-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;margin-bottom:2rem}.theory-card{background:#14141499;border:1px solid rgba(245,245,245,.08);border-radius:6px;padding:1.25rem;text-align:left;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;transition:all .3s}.theory-card:hover{border-color:#8b5cf666;transform:translateY(-2px)}.theory-card-header{display:flex;flex-direction:column;gap:.25rem}.theory-card-title{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--text-color)}.theory-card-subtitle{font-size:9px;color:#f5f5f566;letter-spacing:.05em}.theory-card-formula{font-size:12px;color:#4ecdc4;font-weight:700;letter-spacing:.1em;font-family:var(--font-primary)}.theory-card-notes{font-size:9px;color:#f5f5f580;background:#0000004d;padding:4px 8px;border-radius:4px}.theory-play-btn{width:100%;background:transparent;border:1px solid #8B5CF6;color:#8b5cf6;padding:.5rem;font-family:var(--font-primary);font-size:9px;cursor:pointer;letter-spacing:.1em;transition:all .3s;text-transform:uppercase}.theory-play-btn:hover{background:#8b5cf6;color:#000}.challenge-panel{background:#0f0f0fe6;border:1px solid rgba(245,245,245,.08);border-radius:8px;padding:2rem;display:flex;flex-direction:column;gap:1.5rem;max-width:600px;margin:0 auto}.challenge-header-title{font-size:14px;font-weight:700;letter-spacing:.2em;color:#ffd93d;margin-bottom:.5rem}.challenge-score-board{display:flex;justify-content:space-around;background:#0000004d;padding:.75rem;border-radius:6px;border:1px solid rgba(245,245,245,.05)}.challenge-stat{display:flex;flex-direction:column;align-items:center;gap:.25rem}.challenge-stat-label{font-size:8px;color:#f5f5f566;letter-spacing:.1em}.challenge-stat-value{font-size:13px;font-weight:700;color:#fff}.challenge-stat-value.highlight{color:#ff6b6b}.challenge-screen{min-height:110px;background:#000;border:1px solid rgba(245,245,245,.05);border-radius:6px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:1rem}.challenge-status{font-size:14px;font-weight:700;letter-spacing:.15em;transition:all .3s}.challenge-status.listen{color:#ff6b6b;animation:breathe 1s infinite alternate}.challenge-status.play{color:#4ecdc4;animation:breathe 1s infinite alternate}.challenge-status.correct{color:#286d46;transform:scale(1.1)}.challenge-status.incorrect{color:#ff6b6b;transform:scale(.95)}.challenge-notes-track{display:flex;gap:.5rem;justify-content:center}.note-bubble{width:28px;height:28px;border-radius:50%;background:#f5f5f51a;border:1px solid rgba(245,245,245,.2);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#f5f5f566;transition:all .2s}.note-bubble.filled{background:#8b5cf6;border-color:#8b5cf6;color:#fff;box-shadow:0 0 8px #8b5cf699}.note-bubble.correct{background:#286d46;border-color:#286d46;color:#fff}.note-bubble.incorrect{background:#ff6b6b;border-color:#ff6b6b;color:#fff}.sequencer-tool{display:flex;flex-direction:column;gap:1.5rem;align-items:center}.sequencer-grid{display:flex;flex-direction:column;gap:4px;background:#0f0f0fe6;padding:12px;border-radius:8px;border:1px solid rgba(245,245,245,.08);width:100%;max-width:500px}.sequencer-row{display:flex;gap:4px;align-items:center}.sequencer-row-label{width:32px;font-size:9px;color:#f5f5f566;font-weight:700;text-align:right;padding-right:6px}.sequencer-cell{flex:1;aspect-ratio:1;background:#f5f5f508;border:1px solid rgba(245,245,245,.1);border-radius:3px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1)}.sequencer-cell:hover{background:#f5f5f51a;border-color:#f5f5f54d}.sequencer-cell.active{background:#8b5cf6;border-color:#8b5cf6;box-shadow:0 0 10px #8b5cf699}.sequencer-cell.playing-step{border-color:#4ecdc4}.sequencer-cell.active.playing-step{background:#4ecdc4;box-shadow:0 0 15px #4ecdc4}.sequencer-header-step{background:transparent!important;border:none!important;height:12px;display:flex;align-items:center;justify-content:center}.sequencer-playhead-dot{width:5px;height:5px;border-radius:50%;background:#f5f5f526;transition:all .1s}.sequencer-header-step.active .sequencer-playhead-dot{background:#4ecdc4;box-shadow:0 0 8px #4ecdc4;transform:scale(1.4)}.theremin-tool{display:flex;flex-direction:column;gap:1.5rem;align-items:center}.theremin-pad{width:100%;height:300px;background:#050505;border:1px solid rgba(139,92,246,.2);border-radius:8px;position:relative;cursor:crosshair;overflow:hidden;box-shadow:inset 0 0 30px #8b5cf60d}.theremin-canvas{width:100%;height:100%;position:absolute;top:0;left:0;pointer-events:none}.theremin-info-panel{position:absolute;bottom:15px;left:15px;display:flex;flex-direction:column;gap:4px;text-align:left;background:#000000b3;padding:8px 12px;border-radius:4px;border:1px solid rgba(245,245,245,.08);pointer-events:none}.theremin-info-item{font-size:9px;letter-spacing:.05em;color:#f5f5f580}.theremin-info-item span{color:#4ecdc4;font-weight:700}.theremin-instruction{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.15em;color:#f5f5f54d;text-align:center;pointer-events:none;animation:breathe 1.5s infinite alternate}.articles-wrapper{max-width:800px;margin:0 auto;text-align:left;display:flex;flex-direction:column;gap:3rem}.seo-article{background:#12121299;border:1px solid rgba(245,245,245,.06);border-radius:8px;padding:2.5rem;box-shadow:0 4px 20px #00000080}.seo-article-header{border-bottom:1px solid rgba(245,245,245,.1);padding-bottom:1rem;margin-bottom:1.5rem}.seo-article-title{font-size:18px;font-weight:700;letter-spacing:.1em;color:#fff;line-height:1.4;margin-bottom:.5rem}.seo-article-meta{display:flex;gap:1.5rem;font-size:9px;color:#f5f5f566;letter-spacing:.05em}.seo-article-body{font-size:11px;line-height:1.8;color:#f5f5f5cc;font-family:var(--font-primary);text-transform:none}.seo-article-body p{margin-bottom:1.25rem}.seo-article-body h3{font-size:12px;color:#8b5cf6;margin:1.5rem 0 .75rem;letter-spacing:.1em;text-transform:uppercase}.seo-article-body blockquote{border-left:2px solid #4ECDC4;padding-left:1rem;margin:1.5rem 0;color:#4ecdc4e6;font-style:italic}.seo-article-keywords{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid rgba(245,245,245,.05)}.keyword-badge{font-size:8px;background:#8b5cf614;border:1px solid rgba(139,92,246,.2);color:#8b5cf6;padding:2px 6px;border-radius:4px;letter-spacing:.05em}.quiz-panel{width:100%;max-width:600px;margin:0 auto;background:#0f0f0fe6;border:1px solid rgba(245,245,245,.08);border-radius:8px;padding:2.5rem;display:flex;flex-direction:column;gap:1.5rem;text-align:center}.quiz-title{font-size:16px;font-weight:700;letter-spacing:.15em;color:#8b5cf6}.quiz-desc{font-size:10px;color:#f5f5f580;line-height:1.6;margin-bottom:1rem}.quiz-steps-progress{width:100%;height:2px;background:#f5f5f51a;border-radius:1px;position:relative;margin-bottom:1.5rem}.quiz-progress-bar{height:100%;background:#8b5cf6;transition:width .3s ease;box-shadow:0 0 8px #8b5cf6}.quiz-question-text{font-size:12px;font-weight:700;letter-spacing:.05em;color:#fff;margin-bottom:1.5rem}.quiz-options-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.quiz-option-btn{background:#1e1e1e66;border:1px solid rgba(245,245,245,.1);color:var(--text-color);padding:1.25rem 1rem;border-radius:6px;font-family:var(--font-primary);font-size:10px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;gap:.4rem;align-items:center}.quiz-option-btn:hover{border-color:#8b5cf6;background:#8b5cf60d;transform:translateY(-2px);box-shadow:0 0 12px #8b5cf626}.quiz-option-label{font-weight:700;font-size:11px}.quiz-option-desc{font-size:8px;color:#f5f5f566}.soul-card-wrapper{perspective:1000px;margin:1rem 0}.soul-card{width:100%;max-width:420px;margin:0 auto;border-radius:12px;border:1px solid rgba(255,255,255,.15);padding:2rem;position:relative;text-align:left;box-shadow:0 10px 30px #0009;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);overflow:hidden;transition:transform .5s}.soul-card:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;pointer-events:none;opacity:.45;z-index:0}.soul-card.aura-violet{background:linear-gradient(135deg,#0a0a0ae6,#1e1432e6);border-color:#8b5cf666;box-shadow:0 10px 30px #8b5cf626}.soul-card.aura-violet:before{background:radial-gradient(circle,rgba(139,92,246,.3) 0%,transparent 60%)}.soul-card.aura-cyan{background:linear-gradient(135deg,#0a0a0ae6,#142d2de6);border-color:#4ecdc466;box-shadow:0 10px 30px #4ecdc426}.soul-card.aura-cyan:before{background:radial-gradient(circle,rgba(78,205,196,.3) 0%,transparent 60%)}.soul-card.aura-crimson{background:linear-gradient(135deg,#0a0a0ae6,#321414e6);border-color:#ff6b6b66;box-shadow:0 10px 30px #ff6b6b26}.soul-card.aura-crimson:before{background:radial-gradient(circle,rgba(255,107,107,.3) 0%,transparent 60%)}.soul-card.aura-amber{background:linear-gradient(135deg,#0a0a0ae6,#2d2814e6);border-color:#ffd93d66;box-shadow:0 10px 30px #ffd93d26}.soul-card.aura-amber:before{background:radial-gradient(circle,rgba(255,217,61,.3) 0%,transparent 60%)}.soul-card-content{position:relative;z-index:1;display:flex;flex-direction:column;gap:1.25rem}.soul-badge-container{display:flex;justify-content:space-between;align-items:center}.soul-card-meta-stamp{font-size:8px;letter-spacing:.2em;color:#f5f5f566;border:1px solid rgba(245,245,245,.15);padding:2px 6px;border-radius:2px}.soul-card-type-name{font-size:16px;font-weight:700;letter-spacing:.1em;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5);margin:0}.soul-card-description{font-size:10px;line-height:1.6;color:#f5f5f5bf;text-transform:none}.soul-card-stats-grid{display:flex;flex-direction:column;gap:.6rem;background:#0000004d;padding:1rem;border-radius:6px;border:1px solid rgba(245,245,245,.05)}.soul-stat-row{display:flex;align-items:center;gap:.75rem}.soul-stat-name{width:75px;font-size:8px;color:#f5f5f580;letter-spacing:.05em}.soul-stat-bar-bg{flex:1;height:4px;background:#f5f5f514;border-radius:2px;overflow:hidden}.soul-stat-bar-fill{height:100%;border-radius:2px}.aura-violet .soul-stat-bar-fill{background:#8b5cf6}.aura-cyan .soul-stat-bar-fill{background:#4ecdc4}.aura-crimson .soul-stat-bar-fill{background:#ff6b6b}.aura-amber .soul-stat-bar-fill{background:#ffd93d}.soul-stat-val{font-size:9px;font-weight:700;color:#fff;width:25px;text-align:right}@keyframes pulse-red{0%{box-shadow:0 0 #ff6b6bb3}to{box-shadow:0 0 10px 4px #ff6b6b33}}@keyframes breathe{0%{opacity:.5}to{opacity:1}}@media (max-width: 768px){.music-tools-container{padding:1rem;gap:1.5rem}.drum-grid{grid-template-columns:repeat(3,1fr)}.piano-key.white{width:32px}.piano-key.black{width:20px;height:70px;margin-left:-10px;margin-right:-10px}.theory-grid{grid-template-columns:1fr}.sequencer-row-label{width:24px;font-size:7px}.seo-article{padding:1.5rem}.quiz-options-grid{grid-template-columns:1fr}}.sheet-music-tool{display:flex;flex-direction:column;gap:1.5rem;align-items:center;width:100%}.sheet-music-container{position:relative;width:100%;max-width:750px;background:#0f0f0ff2;border:1px solid rgba(245,245,245,.08);border-radius:8px;padding:1.5rem;overflow:hidden;box-shadow:inset 0 0 30px #000c}.sheet-music-scroll{width:100%;overflow-x:auto;padding:10px 0;cursor:grab}.sheet-music-scroll:active{cursor:grabbing}.staff-line{stroke:#f5f5f533;stroke-width:1.5}.staff-ledger-line{stroke:#f5f5f566;stroke-width:1.5}.staff-bar-line{stroke:#f5f5f540;stroke-width:2}.note-head{fill:#8b5cf6;stroke:#fff;stroke-width:1;transition:all .2s ease;cursor:pointer}.note-head.active{fill:#4ecdc4;filter:drop-shadow(0 0 8px #4ECDC4)}.note-head.vip-locked{fill:#ff6b6b}.note-stem{stroke:#f5f5f599;stroke-width:2;stroke-linecap:round}.note-text{font-family:var(--font-primary);font-size:8px;fill:#f5f5f580;text-anchor:middle}.playhead-line{stroke:#4ecdc4;stroke-width:2.5;filter:drop-shadow(0 0 4px #4ECDC4);transition:x1 .1s linear,x2 .1s linear}.vip-badge-tag{background:linear-gradient(90deg,gold,orange);color:#000;font-size:7.5px;font-weight:900;padding:1px 5px;border-radius:3px;letter-spacing:.05em;text-shadow:0 0 2px rgba(255,255,255,.4);margin-left:6px;display:inline-block;vertical-align:middle}.premium-lock-cover{position:absolute;top:0;left:0;width:100%;height:100%;background:#0a0a0ad9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1.25rem;z-index:10;border-radius:8px;animation:fadeIn .4s ease forwards}.lock-title{font-size:14px;font-weight:700;letter-spacing:.15em;color:orange;text-shadow:0 0 10px rgba(255,165,0,.3)}.lock-desc{font-size:10px;color:#f5f5f5b3;max-width:320px;line-height:1.6;text-align:center}.upgrade-modal-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000c;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;justify-content:center;align-items:center;z-index:9999;animation:fadeIn .3s ease forwards}.upgrade-modal{width:90%;max-width:460px;background:linear-gradient(135deg,#141414f2,#231432f2);border:1px solid rgba(255,215,0,.3);border-radius:12px;padding:2.5rem;box-shadow:0 10px 40px #8b5cf640,0 0 30px #ffd7001a;text-align:center;position:relative;animation:slideUp .3s cubic-bezier(.18,.89,.32,1.28) forwards}.modal-close-btn{position:absolute;top:15px;right:15px;background:transparent;border:none;color:#f5f5f566;font-size:16px;cursor:pointer;transition:color .2s}.modal-close-btn:hover{color:#fff}.upgrade-badge{background:linear-gradient(90deg,gold,orange);color:#000;font-size:9px;font-weight:900;padding:3px 8px;border-radius:12px;letter-spacing:.1em;display:inline-block;margin-bottom:.75rem}.upgrade-title{font-size:18px;font-weight:900;color:#fff;letter-spacing:.1em;margin-bottom:.5rem}.upgrade-price-tag{font-size:26px;font-weight:900;color:gold;margin:1rem 0;text-shadow:0 0 15px rgba(255,215,0,.4)}.upgrade-price-tag span{font-size:11px;color:#f5f5f580;font-weight:400}.upgrade-features-list{text-align:left;display:flex;flex-direction:column;gap:.6rem;margin:1.5rem 0;background:#0000004d;padding:1.25rem;border-radius:6px;border:1px solid rgba(245,245,245,.05)}.upgrade-feature-item{font-size:10px;color:#f5f5f5d9;display:flex;align-items:center;gap:.5rem;text-transform:none}.upgrade-feature-check{color:gold;font-weight:700}.payment-methods-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.5rem}.pay-method-btn{background:#1e1e1e99;border:1px solid rgba(245,245,245,.1);color:#f5f5f5b3;padding:.6rem;border-radius:6px;cursor:pointer;font-family:var(--font-primary);font-size:10px;transition:all .2s;display:flex;justify-content:center;align-items:center;gap:.4rem}.pay-method-btn:hover{border-color:#ffd70066;color:#fff}.pay-method-btn.selected{border-color:gold;color:gold;background:#ffd7000d}.checkout-btn{width:100%;background:linear-gradient(90deg,gold,orange);color:#000;border:none;font-family:var(--font-primary);font-weight:700;font-size:11px;padding:.8rem;border-radius:6px;cursor:pointer;letter-spacing:.1em;transition:all .3s;box-shadow:0 4px 15px #ffd7004d}.checkout-btn:hover{transform:translateY(-1px);box-shadow:0 6px 20px #ffd70080}.spinner-ring{display:inline-block;width:24px;height:24px;border:3px solid rgba(255,255,255,.1);border-radius:50%;border-top-color:gold;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.key-guide-dot{position:absolute;top:15px;left:50%;transform:translate(-50%);width:10px;height:10px;border-radius:50%;background:#4ecdc4;box-shadow:0 0 12px #4ecdc4;animation:keyGuidePulse 1.2s infinite alternate;pointer-events:none;z-index:5}.piano-key.black .key-guide-dot{top:10px}@keyframes keyGuidePulse{0%{transform:translate(-50%) scale(.8);opacity:.6}to{transform:translate(-50%) scale(1.4);opacity:1;box-shadow:0 0 16px #4ecdc4,0 0 24px #4ecdc4}}.practice-score-banner{background:#141414f2;border:1px solid rgba(78,205,196,.3);border-radius:6px;padding:.75rem 1.25rem;margin-top:1rem;text-align:center;max-width:500px;width:100%;box-shadow:0 0 15px #4ecdc40d;animation:fadeIn .3s ease}.practice-feedback-alert{font-size:11px;font-weight:700;letter-spacing:.05em;display:block}.practice-feedback-alert.correct{color:#4ecdc4}.practice-feedback-alert.error{color:#ff6b6b}.practice-feedback-alert.info{color:gold}.tempo-slider-group{display:flex;align-items:center;gap:8px;background:#0003;padding:4px 12px;border-radius:4px;border:1px solid rgba(245,245,245,.05)}.tempo-slider-label{font-size:9px;color:#f5f5f580;letter-spacing:.05em}.tempo-slider-value{font-size:10px;font-weight:700;color:#8b5cf6;min-width:32px}.waterfall-container{position:relative;width:100%;max-width:515px;margin:1.5rem auto 0;background:#0a0a0af2;border-radius:8px 8px 0 0;border:1px solid rgba(245,245,245,.1);border-bottom:none;overflow:hidden;height:200px;box-shadow:0 0 25px #00000080}.waterfall-canvas{display:block;width:100%;height:100%}.mic-hud-container{background:#141414e6;border:1px solid rgba(78,205,196,.35);border-radius:6px;padding:.6rem 1rem;margin-top:1rem;display:flex;justify-content:space-between;align-items:center;max-width:500px;width:100%;box-shadow:0 0 15px #4ecdc41a;animation:fadeIn .3s ease}.mic-hud-status{display:flex;align-items:center;gap:8px;font-size:10px;font-family:var(--font-primary);letter-spacing:.05em}.mic-hud-dot{width:8px;height:8px;border-radius:50%;background:#f5f5f540;transition:all .3s}.mic-hud-dot.listening{background:#4ecdc4;box-shadow:0 0 10px #4ecdc4,0 0 15px #4ecdc4;animation:pulseGreenGlow 1.2s infinite alternate}.mic-hud-stats{display:flex;align-items:center;gap:12px;font-size:10px;color:#f5f5f599}.mic-hud-note{font-weight:700;color:gold;background:#ffd7001f;padding:2px 8px;border-radius:4px;border:1px solid rgba(255,215,0,.3);font-family:monospace}.perfect-hit-overlay{position:absolute;font-size:11px;font-weight:700;color:#4ecdc4;text-shadow:0 0 8px #4ECDC4,0 0 12px #4ECDC4;animation:floatUpFadeOut .8s ease-out forwards;pointer-events:none;z-index:99}.solana-checkout-card{background:#191919e6;border:1px solid rgba(139,92,246,.3);border-radius:6px;padding:1rem;margin-top:10px;margin-bottom:15px;text-align:left;animation:fadeIn .3s ease;box-shadow:0 4px 20px #0006}.solana-address-box{background:#0a0a0a;border:1px solid rgba(245,245,245,.1);padding:8px 10px;border-radius:4px;font-family:monospace;font-size:9px;color:#4ecdc4;word-break:break-all;margin:6px 0;display:flex;justify-content:space-between;align-items:center}.solana-copy-btn{background:#4ecdc41f;border:1px solid #4ECDC4;color:#4ecdc4;font-size:8px;padding:2px 6px;border-radius:3px;cursor:pointer;white-space:nowrap;transition:all .2s}.solana-copy-btn:hover{background:#4ecdc4;color:#000}.qr-checkout-card{background:#191919e6;border:1px solid rgba(78,205,196,.25);border-radius:6px;padding:1rem;margin-top:10px;margin-bottom:15px;display:flex;flex-direction:column;align-items:center;gap:10px;animation:fadeIn .3s ease}.qr-placeholder-wrapper{background:#fff;border-radius:6px;padding:8px;box-shadow:0 4px 15px #0000004d;display:flex;justify-content:center;align-items:center}.qr-svg-mockup{width:120px;height:120px;display:block}@keyframes pulseGreenGlow{0%{transform:scale(.9);opacity:.7}to{transform:scale(1.15);opacity:1}}@keyframes floatUpFadeOut{0%{transform:translateY(0) scale(.85);opacity:1}to{transform:translateY(-45px) scale(1.15);opacity:0}}.preset-selector-container{display:flex;justify-content:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}.preset-btn{background:#14141499;border:1px solid rgba(245,245,245,.15);color:#f5f5f599;padding:.5rem 1rem;font-size:10px;border-radius:4px;cursor:pointer;letter-spacing:.05em;transition:all .3s ease;text-transform:uppercase}.preset-btn:hover{border-color:#f5f5f573;color:#fff}.preset-btn.active{border-color:gold;color:gold;background:#ffd70014;box-shadow:0 0 10px #ffd70026}.jam-station-card{background:#141414a6;border:1px solid rgba(139,92,246,.2);border-radius:8px;padding:1.25rem;margin-top:1.5rem;text-align:left;animation:fadeIn .3s ease}.jam-station-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.jam-station-title{font-size:11px;font-weight:700;letter-spacing:.1em;color:#8b5cf6}.jam-style-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1rem}.jam-style-btn{background:#151515;border:1px solid rgba(245,245,245,.12);color:#f5f5f5b3;padding:8px;font-size:10px;border-radius:4px;cursor:pointer;transition:all .2s;text-align:center}.jam-style-btn:hover{border-color:#f5f5f566}.jam-style-btn.selected{border-color:#4ecdc4;color:#4ecdc4;background:#4ecdc414;box-shadow:0 0 10px #4ecdc426}.jam-chords-container{display:flex;flex-direction:column;gap:6px}.jam-chords-label{font-size:9px;color:#f5f5f566;letter-spacing:.05em}.jam-chords-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.jam-chord-btn{background:#151515;border:1px solid rgba(245,245,245,.15);color:#fff;padding:10px 4px;font-size:11px;font-weight:700;border-radius:4px;cursor:pointer;text-align:center;transition:all .2s}.jam-chord-btn:hover{background:#f5f5f50d}.jam-chord-btn.selected{border-color:gold;color:gold;background:#ffd7001a;box-shadow:0 0 10px #ffd70033;transform:scale(1.05)}.key-inkey-dot{position:absolute;top:15px;left:50%;transform:translate(-50%);width:5px;height:5px;border-radius:50%;background:#8b5cf6;box-shadow:0 0 6px #8b5cf6;pointer-events:none;animation:keyInKeyPulse 1.5s infinite alternate}@keyframes keyInKeyPulse{0%{opacity:.4;transform:translate(-50%) scale(.8)}to{opacity:1;transform:translate(-50%) scale(1.2)}}@media (max-width: 768px){.music-tools-container{padding:12px;gap:1.25rem;border-radius:8px;margin:0 auto;border:1px solid rgba(245,245,245,.05)}.tools-tabs{gap:.4rem;padding-bottom:.8rem}.tab-btn{padding:.5rem .8rem;font-size:9px;flex:1;text-align:center;white-space:nowrap}.piano-controls{grid-template-columns:1fr;gap:1rem;padding:10px}.piano-control-group{width:100%}.piano-keyboard{height:140px;padding:6px}.piano-key.white{width:30px}.piano-key.black{width:18px;height:80px;margin-left:-9px;margin-right:-9px}.piano-key-label{font-size:7px;bottom:4px}.piano-key.black .piano-key-label{bottom:3px}.drum-pads-grid{grid-template-columns:repeat(3,1fr)!important;gap:.5rem!important}.drum-pad{height:65px!important;padding:.5rem!important}.drum-pad-name{font-size:8px!important}.drum-pad-key{font-size:7px!important}.ambient-mixer-grid{grid-template-columns:1fr!important;gap:.75rem!important}.mixer-strip{padding:.6rem!important}.generator-controls-grid{grid-template-columns:1fr!important;gap:1rem!important}.ear-training-dashboard{grid-template-columns:1fr!important;gap:1.25rem!important}.piano-select{padding:.5rem;font-size:10px}.jam-chords-grid{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}.jam-chord-btn{font-size:9px!important;padding:8px 3px!important}}.synth-lab-container{display:flex;flex-direction:column;gap:2rem;width:100%;max-width:1000px;margin:0 auto;padding:100px 20px 60px}.synth-title-section{text-align:center;margin-bottom:1.5rem}.synth-title-section h1{font-size:26px;letter-spacing:.15em;margin-bottom:8px;color:#fff;text-transform:uppercase}.synth-title-section p{color:#f5f5f580;font-size:11px;letter-spacing:.1em}.synth-dashboard{background:#0a0a0a99;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(245,245,245,.08);border-radius:12px;padding:2rem;display:flex;flex-direction:column;gap:2rem;box-shadow:0 8px 32px #0000005e}.synth-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.synth-panel{background:#121212a6;border:1px solid rgba(245,245,245,.06);border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.synth-panel:hover{border-color:#8b5cf64d;box-shadow:0 4px 20px #8b5cf60d}.synth-panel-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(245,245,245,.08);padding-bottom:.5rem}.synth-panel-title{font-size:11px;font-weight:700;letter-spacing:.15em;color:#8b5cf6;text-transform:uppercase}.synth-panel-status{font-size:9px;color:#f5f5f566;font-family:monospace}.control-group{display:flex;flex-direction:column;gap:.5rem;text-align:left}.control-group label{font-size:10px;color:#f5f5f599;letter-spacing:.05em;display:flex;justify-content:space-between}.control-value{color:#4ecdc4;font-weight:700;font-family:monospace}.preset-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.preset-btn{background:#141414cc;border:1px solid rgba(245,245,245,.15);color:#f5f5f5cc;padding:.6rem;font-size:10px;cursor:pointer;border-radius:4px;transition:all .2s;letter-spacing:.05em;text-transform:uppercase}.preset-btn:hover{border-color:#8b5cf6;color:#fff;background:#8b5cf60d}.preset-btn.active{background:#8b5cf626;border-color:#8b5cf6;color:#fff;box-shadow:0 0 10px #8b5cf633}.waveform-select{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem}.wave-btn{background:#141414cc;border:1px solid rgba(245,245,245,.15);color:#f5f5f580;padding:.5rem .2rem;font-size:9px;cursor:pointer;border-radius:4px;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px}.wave-btn:hover{color:#fff;border-color:#f5f5f580}.wave-btn.active{border-color:#4ecdc4;color:#4ecdc4;background:#4ecdc41a;box-shadow:0 0 10px #4ecdc426}.wave-icon{font-size:14px;line-height:1}.synth-slider{-webkit-appearance:none;width:100%;height:4px;border-radius:2px;background:#f5f5f51a;outline:none;margin:8px 0}.synth-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#8b5cf6;cursor:pointer;box-shadow:0 0 8px #8b5cf6cc;transition:transform .1s}.synth-slider::-webkit-slider-thumb:hover{transform:scale(1.3)}.synth-slider.cyan::-webkit-slider-thumb{background:#4ecdc4;box-shadow:0 0 8px #4ecdc4cc}.switch-group{display:flex;justify-content:space-between;align-items:center;padding:.25rem 0}.switch-group label{font-size:10px;color:#f5f5f599;letter-spacing:.05em}.switch-control{position:relative;display:inline-block;width:34px;height:18px}.switch-control input{opacity:0;width:0;height:0}.slider-round{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#f5f5f51a;transition:.3s;border-radius:18px;border:1px solid rgba(245,245,245,.15)}.slider-round:before{position:absolute;content:"";height:12px;width:12px;left:2px;bottom:2px;background-color:#f5f5f599;transition:.3s;border-radius:50%}input:checked+.slider-round{background-color:#4ecdc433;border-color:#4ecdc4}input:checked+.slider-round:before{transform:translate(16px);background-color:#4ecdc4;box-shadow:0 0 6px #4ecdc4}.visualizer-panel{grid-column:span 1}@media (min-width: 768px){.visualizer-panel{grid-column:span 2}}.synth-visualizer-canvas{width:100%;height:160px;background:#080808;border-radius:6px;border:1px solid rgba(245,245,245,.05)}.visualizer-controls-row{display:flex;justify-content:space-between;align-items:center;gap:1rem}.v-mode-btn{background:transparent;border:1px solid rgba(245,245,245,.15);color:#f5f5f599;padding:.35rem .8rem;font-size:9px;border-radius:4px;cursor:pointer;transition:all .2s;letter-spacing:.05em;text-transform:uppercase}.v-mode-btn.active{border-color:#4ecdc4;color:#4ecdc4;background:#4ecdc40d}.playback-controls{display:flex;gap:.75rem;align-items:center}.synth-play-btn{flex:1;background:transparent;border:1px solid #4ECDC4;color:#4ecdc4;padding:.6rem;font-size:10px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:4px;transition:all .3s;font-weight:700}.synth-play-btn:hover{background:#4ecdc41a;box-shadow:0 0 10px #4ecdc433}.synth-play-btn.playing{background:#4ecdc4;color:#000;box-shadow:0 0 15px #4ecdc466}.synth-keyboard-section{display:flex;flex-direction:column;gap:1rem;background:#0f0f0fb3;border:1px solid rgba(245,245,245,.06);border-radius:8px;padding:1.5rem}.keyboard-scroll-container{overflow-x:auto;padding:5px 0}.synth-piano-keyboard{display:flex;position:relative;width:max-content;margin:0 auto;height:180px;background:#000;padding:8px;border-radius:6px;border:1px solid rgba(245,245,245,.08)}.synth-piano-key{position:relative;cursor:pointer;transition:all .1s ease;-webkit-user-select:none;user-select:none}.synth-piano-key.white{width:42px;height:100%;background:#fff;border:1px solid #ccc;border-radius:0 0 4px 4px;z-index:1}.synth-piano-key.white:hover{background:#eaeaea}.synth-piano-key.white.active{background:#8b5cf6;border-color:#8b5cf6;box-shadow:inset 0 -8px 12px #ffffff4d,0 0 12px #8b5cf699}.synth-piano-key.black{width:26px;height:100px;background:#151515;border:1px solid #000;border-radius:0 0 3px 3px;margin-left:-13px;margin-right:-13px;z-index:2}.synth-piano-key.black:hover{background:#252525}.synth-piano-key.black.active{background:#4ecdc4;border-color:#4ecdc4;box-shadow:0 0 12px #4ecdc4cc}.synth-key-label{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:8px;color:#777;font-weight:700}.synth-piano-key.black .synth-key-label{color:#aaa;bottom:6px}.synth-piano-key.white.active .synth-key-label{color:#fff}.synth-piano-key.black.active .synth-key-label{color:#000}.user-presets-row{display:flex;gap:.5rem}.user-presets-row input{flex:1;background:#111;border:1px solid rgba(245,245,245,.15);color:#fff;border-radius:4px;padding:.5rem;font-size:10px;outline:none;font-family:monospace}.user-presets-row input:focus{border-color:#8b5cf6}.preset-save-btn{background:transparent;border:1px solid #8B5CF6;color:#8b5cf6;padding:.5rem 1rem;font-size:10px;cursor:pointer;border-radius:4px;transition:all .2s;text-transform:uppercase}.preset-save-btn:hover{background:#8b5cf61a}.saved-user-presets-list{display:flex;flex-direction:column;gap:.4rem;max-height:100px;overflow-y:auto;border-top:1px solid rgba(245,245,245,.05);padding-top:.5rem}.saved-preset-item{display:flex;justify-content:space-between;align-items:center;background:#0003;padding:.35rem .6rem;border-radius:4px;border:1px solid rgba(245,245,245,.04)}.saved-preset-name{font-size:10px;color:#f5f5f5cc;font-family:monospace}.saved-preset-actions{display:flex;gap:.4rem}.preset-action-btn{background:transparent;border:1px solid rgba(245,245,245,.15);color:#f5f5f580;font-size:8px;padding:1px 4px;cursor:pointer;border-radius:2px;text-transform:uppercase}.preset-action-btn:hover{color:#fff;border-color:#f5f5f580}.preset-action-btn.load:hover{color:#4ecdc4;border-color:#4ecdc4}.preset-action-btn.del:hover{color:#ff6b6b;border-color:#ff6b6b}@media (max-width: 768px){.synth-lab-container{padding:calc(75px + env(safe-area-inset-top,0px)) 10px calc(80px + env(safe-area-inset-bottom,0px)) 10px;gap:1rem}.synth-title-section{margin-bottom:.8rem}.synth-title-section h1{font-size:18px;letter-spacing:.1em}.synth-dashboard{padding:12px;gap:1rem;border-radius:8px}.synth-panel{padding:12px;gap:1rem}.synth-piano-keyboard{height:140px;padding:6px}.synth-piano-key.white{width:30px}.synth-piano-key.black{width:18px;height:80px;margin-left:-9px;margin-right:-9px}.synth-key-label{font-size:7px;bottom:4px}.synth-piano-key.black .synth-key-label{bottom:3px}.visualizer-controls-row{flex-direction:column;align-items:stretch;gap:.8rem}.playback-controls{width:100%}.v-mode-btn{text-align:center;width:100%}.synth-visualizer-canvas{height:120px}}.chord-lab-container{display:flex;flex-direction:column;gap:2rem;width:100%;max-width:1000px;margin:0 auto;padding:100px 20px 60px}.chord-title-section{text-align:center;margin-bottom:1.5rem}.chord-title-section h1{font-size:26px;letter-spacing:.15em;margin-bottom:8px;color:#fff;text-transform:uppercase}.chord-title-section p{color:#f5f5f580;font-size:11px;letter-spacing:.1em}.chord-dashboard{background:#0a0a0a99;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(245,245,245,.08);border-radius:12px;padding:2rem;display:flex;flex-direction:column;gap:2rem;box-shadow:0 8px 32px #0000005e}.chord-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.5rem}.chord-panel{background:#121212a6;border:1px solid rgba(245,245,245,.06);border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.chord-panel:hover{border-color:#8b5cf64d;box-shadow:0 4px 20px #8b5cf60d}.chord-panel-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(245,245,245,.08);padding-bottom:.5rem;margin-bottom:.25rem}.chord-panel-title{font-size:11px;font-weight:700;letter-spacing:.15em;color:#8b5cf6;text-transform:uppercase}.chord-panel-status{font-size:9px;color:#f5f5f566;font-family:monospace}.circle-fifths-wrapper{display:flex;justify-content:center;align-items:center;padding:1rem}.circle-fifths-svg{width:100%;max-width:290px;height:auto;-webkit-user-select:none;user-select:none}.circle-sector{cursor:pointer;transition:all .2s ease;stroke:#f5f5f514;stroke-width:1.5px}.circle-sector:hover{fill-opacity:.85}.circle-sector.active{stroke:#4ecdc4;stroke-width:3px;filter:drop-shadow(0 0 8px rgba(78,205,196,.8))}.circle-text{font-family:monospace;font-weight:700;pointer-events:none;text-anchor:middle;dominant-baseline:middle;letter-spacing:-.05em}.circle-text.major{font-size:15px;fill:#fff}.circle-text.minor{font-size:11px;fill:#ffffffb3}.diatonic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.diatonic-btn{background:#141414cc;border:1px solid rgba(245,245,245,.15);border-radius:4px;padding:.5rem;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;transition:all .2s}.diatonic-btn:hover{border-color:#8b5cf6;background:#8b5cf60d}.diatonic-roman{font-size:8px;color:#f5f5f566;font-weight:700}.diatonic-name{font-size:11px;font-weight:700;color:#fff}.progression-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}@media (min-width: 768px){.progression-grid{grid-template-columns:repeat(8,1fr)}}.chord-slot{background:#141414cc;border:1px solid rgba(245,245,245,.12);border-radius:6px;padding:.6rem .4rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer;position:relative;transition:all .2s}.chord-slot:hover{border-color:#f5f5f566}.chord-slot.active{border-color:#8b5cf6;background:#8b5cf614;box-shadow:0 0 10px #8b5cf640}.chord-slot.playing-now{border-color:#4ecdc4;background:#4ecdc414;box-shadow:0 0 12px #4ecdc44d}.slot-index{font-size:8px;font-family:monospace;color:#f5f5f54d}.slot-chord-name{font-size:12px;font-weight:700;color:#fff;min-height:18px;display:flex;align-items:center}.slot-actions{display:flex;width:100%;justify-content:center}.slot-select{width:100%;padding:2px;font-size:8px;background:#111;color:#fff;border:1px solid rgba(245,245,245,.15);border-radius:2px;outline:none}.chord-slot-delete-btn{position:absolute;top:-6px;right:-6px;width:14px;height:14px;border-radius:50%;background:#ff6b6b;color:#000;font-size:8px;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;font-weight:700}.composer-controls{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;background:#0f0f0f80;border:1px solid rgba(245,245,245,.05);border-radius:6px;padding:1rem;flex-wrap:wrap}.control-item{display:flex;align-items:center;gap:.75rem;font-size:10px;color:#f5f5f599}.control-item span{font-family:monospace;color:#4ecdc4;font-weight:700}.smart-keyboard-container{display:flex;flex-direction:column;gap:1rem;background:#0f0f0fb3;border:1px solid rgba(245,245,245,.06);border-radius:8px;padding:1.5rem}.smart-piano-keyboard{display:flex;position:relative;width:max-content;margin:0 auto;height:180px;background:#000;padding:8px;border-radius:6px;border:1px solid rgba(245,245,245,.08)}.smart-key{position:relative;cursor:pointer;transition:all .1s ease;-webkit-user-select:none;user-select:none}.smart-key.white{width:42px;height:100%;background:#fff;border:1px solid #ccc;border-radius:0 0 4px 4px;z-index:1}.smart-key.white:hover{background:#eaeaea}.smart-key.in-chord{background:#4ecdc426!important;border-color:#4ecdc4!important}.smart-key.in-scale{background:#8b5cf614!important;border-color:#8b5cf666!important}.smart-key.outside-scale{background:#222!important;border-color:#333!important;opacity:.35}.smart-key.white.active{background:#8b5cf6!important;border-color:#8b5cf6!important;box-shadow:inset 0 -8px 12px #ffffff4d,0 0 12px #8b5cf699}.smart-key.black{width:26px;height:100px;background:#151515;border:1px solid #000;border-radius:0 0 3px 3px;margin-left:-13px;margin-right:-13px;z-index:2}.smart-key.black:hover{background:#252525}.smart-key.black.active{background:#4ecdc4!important;border-color:#4ecdc4!important;box-shadow:0 0 12px #4ecdc4cc}.key-dot-marker{position:absolute;top:15px;left:50%;transform:translate(-50%);width:6px;height:6px;border-radius:50%;pointer-events:none}.key-dot-marker.chord-dot{background:#4ecdc4;box-shadow:0 0 6px #4ecdc4}.key-dot-marker.scale-dot{background:#8b5cf6;box-shadow:0 0 6px #8b5cf6}.smart-key-label{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:8px;color:#777;font-weight:700}.smart-key.black .smart-key-label{color:#aaa;bottom:6px}.smart-key.white.active .smart-key-label{color:#fff}.smart-key.black.active .smart-key-label{color:#000}.keyboard-legend{display:flex;justify-content:center;gap:1.5rem;font-size:9px;color:#f5f5f580;margin-top:.5rem}.legend-item{display:flex;align-items:center;gap:.4rem}.legend-color{width:8px;height:8px;border-radius:50%}.legend-color.chord{background:#4ecdc4}.legend-color.scale{background:#8b5cf6}.legend-color.outside{background:#333}@media (max-width: 768px){.chord-lab-container{padding:calc(75px + env(safe-area-inset-top,0px)) 10px calc(80px + env(safe-area-inset-bottom,0px)) 10px;gap:1rem}.chord-title-section{margin-bottom:.8rem}.chord-title-section h1{font-size:18px;letter-spacing:.1em}.chord-dashboard{padding:12px;gap:1rem;border-radius:8px}.chord-grid{grid-template-columns:1fr;gap:1rem}.chord-panel{padding:12px;gap:.8rem}.diatonic-grid{grid-template-columns:repeat(3,1fr);gap:.4rem}.diatonic-btn{padding:.4rem}.diatonic-name{font-size:10px}.progression-grid{grid-template-columns:repeat(4,1fr);gap:.4rem}.chord-slot{padding:.4rem .2rem}.slot-chord-name{font-size:11px}.slot-select{font-size:7px}.composer-controls{flex-direction:column;align-items:stretch;padding:10px;gap:.8rem}.control-item{width:100%!important;justify-content:space-between}.synth-play-btn{width:100%!important}.smart-keyboard-container{padding:12px}.smart-piano-keyboard{height:140px;padding:6px}.smart-key.white{width:30px}.smart-key.black{width:18px;height:80px;margin-left:-9px;margin-right:-9px}.smart-key-label{font-size:7px;bottom:4px}.smart-key.black .smart-key-label{bottom:3px}.circle-fifths-wrapper{padding:.5rem}.circle-fifths-svg{max-width:240px}.keyboard-legend{gap:.75rem;flex-wrap:wrap}}.dm-container{display:flex;flex-direction:column;gap:2rem;width:100%;max-width:1050px;margin:0 auto;padding:100px 20px 60px}.dm-title-section{text-align:center;margin-bottom:1.5rem}.dm-title-section h1{font-size:26px;letter-spacing:.15em;margin-bottom:8px;color:#fff;text-transform:uppercase}.dm-title-section p{color:#f5f5f580;font-size:11px;letter-spacing:.1em}.dm-dashboard{background:#0a0a0a99;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(245,245,245,.08);border-radius:12px;padding:2rem;display:flex;flex-direction:column;gap:1.5rem;box-shadow:0 8px 32px #0000005e}.dm-control-bar{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;background:#0f0f0f80;border:1px solid rgba(245,245,245,.05);border-radius:8px;padding:1rem;flex-wrap:wrap}.dm-grid-wrapper{overflow-x:auto;padding:10px 0;background:#12121266;border:1px solid rgba(245,245,245,.05);border-radius:8px;position:relative}.dm-sequencer-grid{display:flex;flex-direction:column;gap:8px;width:max-content;min-width:100%;padding:1.25rem}.dm-steps-header{display:flex;align-items:center;margin-left:210px;gap:4px}.dm-step-indicator{width:30px;height:6px;background:#f5f5f50d;border-radius:2px;transition:background-color .1s}.dm-step-indicator.active{background:#4ecdc4;box-shadow:0 0 8px #4ecdc4}.dm-track-row{display:flex;align-items:center;gap:10px}.dm-track-info{width:200px;display:flex;align-items:center;justify-content:space-between;background:#0000004d;padding:.5rem .75rem;border-radius:4px;border:1px solid rgba(245,245,245,.05);flex-shrink:0}.dm-track-name{font-size:10px;font-weight:700;letter-spacing:.05em;color:#fff;width:65px;text-align:left}.dm-track-mix{display:flex;align-items:center;gap:4px}.dm-mix-btn{background:transparent;border:1px solid rgba(245,245,245,.2);color:#f5f5f580;font-size:8px;padding:2px 5px;cursor:pointer;border-radius:2px;font-weight:700;transition:all .2s}.dm-mix-btn:hover{border-color:#f5f5f580;color:#fff}.dm-mix-btn.mute.active{background:#ff6b6b;border-color:#ff6b6b;color:#000}.dm-mix-btn.solo.active{background:#ffd93d;border-color:#ffd93d;color:#000}.dm-vol-slider{width:45px;height:3px;-webkit-appearance:none;background:#f5f5f51a;outline:none;border-radius:1px}.dm-vol-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:8px;height:8px;border-radius:50%;background:#8b5cf6;cursor:pointer}.dm-steps-row{display:flex;gap:4px}.dm-cell{width:30px;height:30px;background:#f5f5f505;border:1px solid rgba(245,245,245,.08);border-radius:4px;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);position:relative}.dm-cell:hover{background:#f5f5f514;border-color:#f5f5f533}.dm-track-row[data-idx="0"] .dm-cell.active{background:#ff6b6b;border-color:#ff6b6b;box-shadow:0 0 10px #ff6b6b80}.dm-track-row[data-idx="1"] .dm-cell.active{background:#4ecdc4;border-color:#4ecdc4;box-shadow:0 0 10px #4ecdc480}.dm-track-row[data-idx="2"] .dm-cell.active,.dm-track-row[data-idx="3"] .dm-cell.active{background:#8b5cf6;border-color:#8b5cf6;box-shadow:0 0 10px #8b5cf680}.dm-cell.active{background:#ffd93d;border-color:#ffd93d;box-shadow:0 0 10px #ffd93d80}.dm-cell.playing-beat{border-color:#fff}.dm-cell.active.playing-beat{transform:scale(1.08);filter:brightness(1.2)}.dm-cell:nth-child(4n+1){border-left:2px solid rgba(245,245,245,.2)}.dm-screen-section{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem}.dm-analyser-card{background:#0f0f0fcc;border:1px solid rgba(245,245,245,.05);border-radius:8px;padding:1.25rem}.dm-canvas{width:100%;height:120px;background:#070707;border-radius:6px;border:1px solid rgba(245,245,245,.04)}.dm-preset-btn{background:#141414cc;border:1px solid rgba(245,245,245,.15);color:#f5f5f5b3;padding:.4rem .8rem;font-size:10px;border-radius:4px;cursor:pointer;transition:all .2s;letter-spacing:.05em;text-transform:uppercase}.dm-preset-btn:hover{border-color:#8b5cf6;color:#fff}.dm-preset-btn.active{background:#8b5cf626;border-color:#8b5cf6;color:#fff;box-shadow:0 0 10px #8b5cf633}@media (max-width: 768px){.dm-container{padding:calc(75px + env(safe-area-inset-top,0px)) 10px calc(80px + env(safe-area-inset-bottom,0px)) 10px;gap:1rem}.dm-title-section{margin-bottom:.8rem}.dm-title-section h1{font-size:18px;letter-spacing:.1em}.dm-dashboard{padding:12px;gap:1rem;border-radius:8px}.dm-control-bar{flex-direction:column;align-items:stretch;padding:10px;gap:.8rem}.dm-control-bar>div{display:flex;justify-content:space-between;width:100%}.dm-track-info{width:130px;padding:.4rem}.dm-track-name{font-size:8px;width:45px}.dm-mix-btn{padding:1px 3px;font-size:7px}.dm-vol-slider{width:30px}.dm-steps-header{margin-left:140px;gap:3px}.dm-step-indicator{width:24px;height:4px}.dm-steps-row{gap:3px}.dm-cell{width:24px;height:24px}.dm-sequencer-grid{padding:.5rem;gap:6px}.dm-screen-section{grid-template-columns:1fr;gap:1rem}}.tuner-container{display:flex;flex-direction:column;gap:2rem;width:100%;max-width:900px;margin:0 auto;padding:100px 20px 60px}.tuner-title-section{text-align:center;margin-bottom:1.5rem}.tuner-title-section h1{font-size:26px;letter-spacing:.15em;margin-bottom:8px;color:#fff;text-transform:uppercase}.tuner-title-section p{color:#f5f5f580;font-size:11px;letter-spacing:.1em}.tuner-tabs-nav{display:flex;justify-content:center;gap:1rem;border-bottom:1px solid rgba(245,245,245,.08);padding-bottom:1rem}.tuner-tab-btn{background:transparent;border:1px solid rgba(245,245,245,.15);color:#f5f5f599;padding:.6rem 1.5rem;font-size:10px;cursor:pointer;border-radius:4px;letter-spacing:.1em;transition:all .3s}.tuner-tab-btn:hover{border-color:#f5f5f580;color:#fff}.tuner-tab-btn.active{border-color:#8b5cf6;color:#fff;background:#8b5cf61a;box-shadow:0 0 10px #8b5cf640}.tuner-dashboard{background:#0a0a0a99;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border:1px solid rgba(245,245,245,.08);border-radius:12px;padding:2rem;display:flex;flex-direction:column;gap:2rem;box-shadow:0 8px 32px #0000005e;min-height:480px}.tuner-layout{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}.tuner-card{background:#121212a6;border:1px solid rgba(245,245,245,.06);border-radius:8px;padding:1.5rem;display:flex;flex-direction:column;gap:1.25rem;align-items:center;text-align:center}.tuner-card-header{display:flex;justify-content:space-between;width:100%;border-bottom:1px solid rgba(245,245,245,.08);padding-bottom:.5rem}.tuner-card-title{font-size:11px;font-weight:700;letter-spacing:.15em;color:#8b5cf6;text-transform:uppercase}.tuner-gauge-wrapper{position:relative;width:240px;height:120px;overflow:hidden;margin-top:1rem}.tuner-dial-bg{width:240px;height:240px;border-radius:50%;border:4px solid rgba(245,245,245,.05);border-top-color:#f5f5f526;position:absolute;top:0;left:0;box-sizing:border-box}.tuner-ticks{width:100%;height:100%;position:absolute;top:0;left:0}.tuner-tick-marker{position:absolute;width:2px;height:8px;background:#f5f5f533;bottom:120px;left:119px;transform-origin:50% 120px}.tuner-tick-marker.center{height:12px;background:#4ecdc4;box-shadow:0 0 6px #4ecdc4}.tuner-needle{position:absolute;width:3px;height:95px;background:#ff6b6b;bottom:0;left:118.5px;transform-origin:50% 95px;transition:transform .15s cubic-bezier(.25,.8,.25,1);box-shadow:0 0 6px #ff6b6bcc;z-index:10}.tuner-needle.in-tune{background:#4ecdc4;box-shadow:0 0 10px #4ecdc4}.tuner-pivot{position:absolute;width:16px;height:16px;background:#111;border:3px solid rgba(245,245,245,.4);border-radius:50%;bottom:-8px;left:112px;z-index:12}.tuner-pitch-readout{display:flex;flex-direction:column;align-items:center;gap:.25rem}.tuner-note-letter{font-size:46px;font-weight:700;color:#fff;line-height:1;text-shadow:0 0 15px rgba(255,255,255,.1);min-height:46px}.tuner-note-letter.correct{color:#4ecdc4;text-shadow:0 0 20px rgba(78,205,196,.6)}.tuner-cents-text{font-size:11px;font-family:monospace;font-weight:700;letter-spacing:.05em;color:#f5f5f599;min-height:15px}.tuner-cents-text.flat{color:#ff6b6b}.tuner-cents-text.sharp{color:#ffd93d}.tuner-cents-text.in-tune{color:#4ecdc4}.tuner-pegs-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;width:100%}.tuner-peg-btn{background:#141414cc;border:1px solid rgba(245,245,245,.15);color:#f5f5f5b3;border-radius:4px;padding:.5rem .2rem;font-size:10px;cursor:pointer;transition:all .2s;font-family:monospace;font-weight:700}.tuner-peg-btn:hover{border-color:#8b5cf6;color:#fff}.tuner-peg-btn.active{background:#8b5cf633;border-color:#8b5cf6;color:#fff;box-shadow:0 0 8px #8b5cf666}.metronome-visualizer{width:200px;height:200px;border-radius:50%;border:2px solid rgba(245,245,245,.05);display:flex;align-items:center;justify-content:center;position:relative}.metronome-ring-pulsar{position:absolute;width:100%;height:100%;border-radius:50%;border:2px solid #8B5CF6;opacity:0;transform:scale(1);transition:transform .4s ease-out,opacity .4s ease-out;pointer-events:none}.metronome-ring-pulsar.pulsing{opacity:.65;transform:scale(1.15);transition:none}.metronome-ring-pulsar.accent.pulsing{border-color:#4ecdc4;opacity:.85}.metronome-beat-display{display:flex;flex-direction:column;align-items:center;gap:.5rem}.metronome-big-bpm{font-size:40px;font-weight:700;color:#fff;font-family:monospace}.metronome-beat-dots{display:flex;gap:8px}.metro-dot{width:10px;height:10px;border-radius:50%;background:#f5f5f51a;border:1px solid rgba(245,245,245,.15);transition:background-color .1s}.metro-dot.active{background:#8b5cf6;box-shadow:0 0 8px #8b5cf6}.metro-dot.active.accent{background:#4ecdc4;box-shadow:0 0 10px #4ecdc4}.metro-tap-btn{width:120px;height:120px;border-radius:50%;background:#141414cc;border:2px solid rgba(139,92,246,.4);color:#8b5cf6;font-size:11px;font-weight:700;letter-spacing:.1em;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 15px #0003;-webkit-user-select:none;user-select:none}.metro-tap-btn:hover{border-color:#8b5cf6;color:#fff;background:#8b5cf60d;transform:translateY(-2px)}.metro-tap-btn:active{transform:scale(.95);background:#8b5cf626;box-shadow:0 0 12px #8b5cf666}.practice-timer-display{font-size:20px;font-family:monospace;font-weight:700;color:#fff;letter-spacing:.05em;background:#0000004d;border-radius:4px;border:1px solid rgba(245,245,245,.05)}@media (max-width: 768px){.tuner-container{padding:calc(75px + env(safe-area-inset-top,0px)) 10px calc(80px + env(safe-area-inset-bottom,0px)) 10px;gap:1rem}.tuner-title-section{margin-bottom:.8rem}.tuner-title-section h1{font-size:18px;letter-spacing:.1em}.tuner-tabs-nav{gap:.5rem;padding-bottom:.8rem}.tuner-tab-btn{padding:.5rem 1rem;font-size:9px;flex:1;text-align:center}.tuner-dashboard{padding:12px;gap:1rem;border-radius:8px;min-height:auto}.tuner-layout{grid-template-columns:1fr;gap:1rem}.tuner-card{padding:12px;gap:1rem}.tuner-gauge-wrapper{width:200px;height:100px}.tuner-dial-bg{width:200px;height:200px}.tuner-tick-marker{bottom:100px;left:99px;transform-origin:50% 100px}.tuner-needle{height:80px;left:98.5px;transform-origin:50% 80px}.tuner-pivot{left:92px}.tuner-note-letter{font-size:36px;min-height:36px}.tuner-pegs-grid{grid-template-columns:repeat(3,1fr);gap:.4rem}.tuner-peg-btn{padding:.4rem .2rem;font-size:9px}.metronome-visualizer{width:150px;height:150px}.metronome-big-bpm{font-size:32px}.metro-tap-btn{width:100px;height:100px;font-size:10px}}@font-face{font-family:PPSupplyMono;src:url(https://assets.codepen.io/7558/PPSupplyMono-Regular.ttf) format("truetype");font-weight:400;font-style:normal}:root{--font-primary: "PPSupplyMono", "Courier New", monospace;--text-color: rgba(245, 245, 245, .9);--warm-off-black: #1a1917;--warm-off-white: #f8f5f2}*{margin:0;padding:0;box-sizing:border-box}html{height:100%}body{background:#0a0a0a;font-family:var(--font-primary);width:100vw;min-height:100vh;overflow-x:hidden;text-transform:uppercase;font-size:11px;color:var(--text-color);line-height:1.2;margin:0;padding:0}body:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-image:url(https://assets.codepen.io/7558/noise-002.png);background-repeat:repeat;opacity:.08;z-index:1000;pointer-events:none}.loading-active{overflow:hidden!important}.audio-enable{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0a0a0a;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2000;font-family:var(--font-primary);font-size:12px;color:var(--text-color);text-transform:uppercase;gap:2rem;text-align:center;padding:1rem}.enable-button{border:1px solid var(--text-color);background:transparent;color:var(--text-color);padding:1rem 2rem;font-family:var(--font-primary);font-size:12px;text-transform:uppercase;cursor:pointer;letter-spacing:.1em;transition:all .3s ease}.enable-button:hover{background:var(--text-color);color:#0a0a0a}.preloader{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0a0a0a;display:none;align-items:center;justify-content:center;z-index:2000;font-family:var(--font-primary);font-size:12px;color:var(--text-color);letter-spacing:.1em;text-transform:uppercase}.site-header{position:fixed;top:0;left:0;width:100%;height:80px;background:transparent;z-index:100;padding:0;display:flex;align-items:center}.header-container{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;align-items:center;padding:0 2rem;width:100%;height:100%}.logo-container{grid-column:1 / 3;position:relative;display:flex;align-items:center;height:2rem}.logo-circles{position:relative;width:100%;height:100%}.circle{position:absolute;border-radius:50%;transition:transform .5s cubic-bezier(.445,.05,.55,.95);width:1.8rem;height:1.8rem;background-color:var(--text-color);background-image:url(./logo-Ch7LL0cc.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;top:50%}.circle-1{left:0;transform:translateY(-50%)}.circle-2{left:1rem;transform:translateY(-50%);mix-blend-mode:exclusion}.logo-container:hover .circle-1{transform:translate(-.5rem,-50%)}.logo-container:hover .circle-2{transform:translate(.5rem,-50%)}.main-nav{grid-column:3 / 13}.main-nav ul{display:flex;list-style:none;gap:1.1rem;flex-wrap:nowrap;justify-content:flex-end}.main-nav li{position:relative}.main-nav a{color:var(--text-color);text-decoration:none;font-size:12px;font-family:var(--font-primary);text-transform:uppercase;letter-spacing:.1em;display:block;position:relative;padding-left:8px;transition:color .2s ease}.nav-hover-square{position:absolute;top:50%;left:0;width:4px;height:4px;background:var(--text-color);transform:translateY(-50%) scaleX(0);transform-origin:left center}.contact-link{grid-column:9 / 13;text-align:right}.contact-link a{color:var(--text-color);text-decoration:none;font-size:12px;font-family:var(--font-primary);text-transform:uppercase;letter-spacing:.1em;transition:opacity .3s ease}.contact-link a:hover{opacity:.7}.section{height:200vh;position:relative;background-size:cover;background-position:center;background-attachment:fixed;background-repeat:no-repeat;margin:0;padding:0;display:block;border:none;outline:none;vertical-align:top;line-height:0;font-size:11px;float:left;width:100%;clear:both}.section-1{background-image:url(https://assets.codepen.io/7558/blue-orange-001.jpg)}.section-2{background-image:url(https://assets.codepen.io/7558/blue-orange-003.jpg)}.section-3{background-image:url(https://assets.codepen.io/7558/blue-orange-002.jpg)}.geometric-background{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:50;pointer-events:none}.geometric-svg{width:100%;height:100%}.grid-line{stroke:#f5f5f526;stroke-width:1;stroke-opacity:.3;shape-rendering:crispEdges}.circle-outline{stroke:#f5f5f54d;stroke-width:1;fill:none;vector-effect:non-scaling-stroke}.circle-filled{stroke:#f5f5f54d;stroke-width:1;fill:#f5f5f50d;vector-effect:non-scaling-stroke}.geometric-text{font-family:var(--font-primary);font-size:12px;fill:#f5f5f599;text-transform:uppercase;letter-spacing:.1em;transition:opacity .3s ease}.center-circle{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:60;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.circle-container{display:flex;align-items:center;justify-content:center}.glowing-circle{width:80px;height:80px;background:#fff;border-radius:50%;box-shadow:none;position:relative;background-image:url(./logo-Ch7LL0cc.jpg);background-size:cover;background-position:center;background-repeat:no-repeat}.section-content{position:relative;z-index:2;height:100%;padding:2rem}.gradient-reveal{position:fixed;top:0;left:0;width:100vw;height:500vh;background:linear-gradient(to bottom,#000000 0%,#000000 20%,rgba(0,0,0,.8) 40%,rgba(0,0,0,.4) 70%,transparent 100%);z-index:1500;pointer-events:none;transform:translateY(0)}.site-footer{position:relative;width:100%;height:50vh;background:#0a0a0a;z-index:10;margin-top:0;clear:both;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:2rem}.footer-content-section,.footer-svg-section{width:100%}.footer-content-section{height:100%;display:flex;flex-direction:column;justify-content:space-between}.footer-content{display:flex;justify-content:space-between;width:100%;align-items:flex-start;margin-bottom:2rem}.footer-left,.footer-right{font-family:var(--font-primary);font-size:12px;text-transform:uppercase;color:var(--text-color);line-height:1.2}.footer-left{display:flex;flex-direction:column;gap:.15rem}.footer-right{display:flex;flex-direction:column;gap:.15rem;text-align:right;max-width:40%}.footer-svg{width:100%;height:auto;max-width:none}.footer-credits{font-family:var(--font-primary);font-size:10px;text-transform:uppercase;letter-spacing:.7em;color:#f5f5f599;text-align:left;margin-bottom:1rem}.footer-credits a{color:var(--text-color);text-decoration:none;transition:opacity .3s ease}.footer-credits a:hover{opacity:.7}@media (max-width: 1024px){.geometric-text.text-top-right,.geometric-text.text-bottom-right{display:none}.glowing-circle{width:60px;height:60px}.footer-right{max-width:50%}}@media (max-width: 768px){.header-container{grid-template-columns:auto 1fr auto;gap:1rem;padding:0 1rem}.logo-container{grid-column:1;justify-self:start}.main-nav{grid-column:2;justify-self:center}.main-nav ul{gap:1rem;justify-content:center;flex-wrap:wrap}.main-nav a{font-size:10px}.contact-link{grid-column:3;text-align:right}.contact-link a{font-size:10px}.geometric-text.text-top-right,.geometric-text.text-bottom-right{display:none}.geometric-text.text-bottom-left{font-size:10px}.glowing-circle{width:50px;height:50px}.section{background-attachment:scroll}.footer-content{flex-direction:column;gap:2rem;text-align:left}.footer-right{max-width:100%;text-align:left}.footer-credits{text-align:center;letter-spacing:.3em}.site-footer{padding:1rem}}@media (max-width: 480px){.header-container{grid-template-columns:1fr;grid-template-rows:auto auto;gap:.5rem;text-align:center}.logo-container{grid-column:1;grid-row:1;justify-self:center}.main-nav{grid-column:1;grid-row:2;justify-self:center}.main-nav ul{gap:.8rem}.main-nav a{font-size:9px}.contact-link{display:none}.site-header{height:100px}.geometric-text.text-top-left{font-size:9px}.geometric-text.text-bottom-left{font-size:8px}.glowing-circle{width:40px;height:40px}.footer-left,.footer-right{font-size:10px}.footer-credits{font-size:8px;letter-spacing:.2em}.section-content{padding:1rem}}@media (max-width: 320px){.main-nav ul{flex-direction:column;align-items:center;gap:.5rem}.glowing-circle{width:35px;height:35px}.footer-left,.footer-right{font-size:9px}}.wallet-adapter-button{font-family:var(--font-primary)!important;text-transform:uppercase!important;font-size:11px!important;letter-spacing:.1em!important;background:transparent!important;border:1px solid #8B5CF6!important;color:#8b5cf6!important;padding:.5rem 1rem!important;transition:all .3s ease!important;border-radius:0!important}.wallet-adapter-button:hover,.wallet-adapter-button:focus{background:#8b5cf6!important;color:#fff!important;border-color:#8b5cf6!important}.wallet-adapter-button:disabled{opacity:.6!important}.wallet-adapter-button-trigger{background:transparent!important}.wallet-adapter-modal{background:#0a0a0a!important;border:1px solid #8B5CF6!important;font-family:var(--font-primary)!important}.wallet-adapter-modal-title{font-family:var(--font-primary)!important;text-transform:uppercase!important;color:#8b5cf6!important}.wallet-adapter-modal-list li button{font-family:var(--font-primary)!important;text-transform:uppercase!important;background:transparent!important;border:1px solid #333!important;color:var(--text-color)!important;transition:all .3s ease!important}.wallet-adapter-modal-list li button:hover{border-color:#8b5cf6!important;background:#8b5cf61a!important}body.is-mobile{padding-bottom:calc(65px + env(safe-area-inset-bottom,15px))!important;overflow-x:hidden}body.is-mobile .site-header{position:fixed;top:0;left:0;right:0;height:calc(60px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);background:#0a0a0ad9;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-bottom:1px solid rgba(255,255,255,.05);z-index:1000;display:flex;align-items:center}body.is-mobile .header-container{display:flex!important;justify-content:flex-start!important;align-items:center;padding:0 1.25rem!important;width:100%;height:100%}body.is-mobile .main-nav,body.is-mobile .contact-link,body.is-mobile .site-footer{display:none!important}body.is-mobile .logo-container{display:flex;align-items:center;gap:10px;height:auto}.mobile-header-title{display:none}body.is-mobile .mobile-header-title{display:inline-block;font-family:var(--font-primary);font-size:13px;font-weight:700;letter-spacing:.15em;color:var(--text-color);text-shadow:0 0 10px rgba(255,255,255,.2)}body.is-mobile main,body.is-mobile .chord-lab-container,body.is-mobile .synth-lab-container,body.is-mobile .drum-machine-container,body.is-mobile .tuner-suite-container,body.is-mobile .token-container{padding-top:calc(75px + env(safe-area-inset-top,0px))!important;padding-left:1rem!important;padding-right:1rem!important;box-sizing:border-box}.bottom-nav-bar{position:fixed;bottom:0;left:0;right:0;height:calc(60px + env(safe-area-inset-bottom,12px));padding-bottom:env(safe-area-inset-bottom,12px);background:#0a0a0ae6;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-around;align-items:center;z-index:2000;box-shadow:0 -4px 30px #000c}.bottom-nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;border:none;background:transparent;color:#f5f5f566;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);gap:4px}.bottom-nav-tab .tab-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center}.bottom-nav-tab .tab-icon svg{width:100%;height:100%;transition:transform .25s ease}.bottom-nav-tab .tab-label{font-family:var(--font-primary);font-size:8px;font-weight:600;letter-spacing:.1em}.bottom-nav-tab.active{color:#4ecdc4}.bottom-nav-tab.active .tab-icon svg{transform:scale(1.1);filter:drop-shadow(0 0 5px rgba(78,205,196,.5))}.bottom-nav-tab.studio-btn{position:relative}.bottom-nav-tab.studio-btn .center-icon{background:linear-gradient(135deg,#8b5cf6,#ec4899);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transform:translateY(-14px);border:3px solid #0a0a0a;box-shadow:0 0 20px #8b5cf699;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.bottom-nav-tab.studio-btn .tab-label{transform:translateY(-8px)}.bottom-nav-tab.studio-btn.active-drawer .center-icon{transform:translateY(-14px) rotate(90deg);background:linear-gradient(135deg,#ec4899,#8b5cf6);box-shadow:0 0 25px #ec4899cc}.studio-drawer-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#0009;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:1999;opacity:0;pointer-events:none;transition:opacity .3s ease}.studio-drawer-overlay.open{opacity:1;pointer-events:auto}.studio-drawer-sheet{position:absolute;bottom:0;left:0;right:0;background:#0e0e0ef2;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border-top:1px solid rgba(255,255,255,.08);border-radius:24px 24px 0 0;padding:16px 20px calc(90px + env(safe-area-inset-bottom,15px)) 20px;transform:translateY(100%);transition:transform .35s cubic-bezier(.16,1,.3,1);box-shadow:0 -10px 40px #000c}.studio-drawer-overlay.open .studio-drawer-sheet{transform:translateY(0)}.drawer-handle{width:36px;height:4px;background:#fff3;border-radius:2px;margin:0 auto 16px}.drawer-header{margin-bottom:20px}.drawer-header h3{font-family:var(--font-primary);font-size:14px;font-weight:700;letter-spacing:.1em;color:var(--text-color);margin-bottom:4px}.drawer-header p{font-family:var(--font-primary);font-size:9px;color:#f5f5f566;letter-spacing:.05em;text-transform:uppercase}.drawer-tools-grid{display:flex;flex-direction:column;gap:10px}.drawer-tool-card{width:100%;background:#ffffff08;border:1px solid rgba(255,255,255,.05);border-radius:14px;padding:12px;display:flex;align-items:center;text-align:left;color:inherit;text-transform:none;cursor:pointer;transition:all .2s ease;outline:none}.drawer-tool-card:active{background:#ffffff14;transform:scale(.98)}.tool-icon-box{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-right:14px}.tool-icon-box svg{width:20px;height:20px}.tool-icon-box.purple{background:#8b5cf626;color:#a78bfa;border:1px solid rgba(139,92,246,.3)}.tool-icon-box.teal{background:#4ecdc426;color:#4ecdc4;border:1px solid rgba(78,205,196,.3)}.tool-icon-box.coral{background:#ff6b6b26;color:#ff6b6b;border:1px solid rgba(255,107,107,.3)}.tool-icon-box.gold{background:#f59e0b26;color:#fbbf24;border:1px solid rgba(245,158,11,.3)}.tool-icon-box.lime{background:#84cc1626;color:#a3e635;border:1px solid rgba(132,204,22,.3)}.tool-info{flex:1}.tool-info h4{font-family:var(--font-primary);font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--text-color);margin-bottom:2px;text-transform:uppercase}.tool-info p{font-family:var(--font-primary);font-size:9px;color:#f5f5f580;line-height:1.3}.launch-arrow{font-size:14px;color:#f5f5f54d;padding-left:8px}.mobile-dashboard{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:600px;margin:0 auto;padding-bottom:2rem!important}.mobile-hero-panel{position:relative;background:linear-gradient(135deg,#141414b3,#0a0a0ae6);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:24px;overflow:hidden;box-shadow:0 10px 30px #0009}.hero-grid-bg{position:absolute;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:16px 16px;pointer-events:none}.hero-status-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.status-badge{font-size:8px;font-weight:700;letter-spacing:.1em;color:#4ecdc4;background:#4ecdc41a;padding:4px 8px;border-radius:4px;border:1px solid rgba(78,205,196,.2)}.status-badge.pulse{animation:neon-badge-pulse 2s infinite alternate}@keyframes neon-badge-pulse{0%{opacity:.7;box-shadow:0 0 5px #4ecdc433}to{opacity:1;box-shadow:0 0 10px #4ecdc466}}.status-frequency{font-size:9px;color:#f5f5f566;letter-spacing:.05em}.mobile-hero-panel h1{font-family:var(--font-primary);font-size:17px;font-weight:700;letter-spacing:.05em;line-height:1.3;margin-bottom:8px;color:var(--text-color);background:linear-gradient(to right,#fff,#bbb);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.mobile-hero-panel p{font-family:var(--font-primary);font-size:10px;color:#f5f5f599;line-height:1.5;text-transform:none;margin-bottom:16px}.waveform-animation{display:flex;align-items:flex-end;height:20px;gap:3px}.waveform-animation .bar{flex:1;height:2px;background:var(--text-color);border-radius:1px}.waveform-animation .bar-1{animation:wave-pulse 1.1s ease-in-out infinite;background:#8b5cf6}.waveform-animation .bar-2{animation:wave-pulse .9s ease-in-out infinite .1s;background:#a78bfa}.waveform-animation .bar-3{animation:wave-pulse 1.3s ease-in-out infinite .2s;background:#4ecdc4}.waveform-animation .bar-4{animation:wave-pulse 1s ease-in-out infinite .3s;background:#ff6b6b}.waveform-animation .bar-5{animation:wave-pulse 1.2s ease-in-out infinite .15s;background:#fbbf24}.waveform-animation .bar-6{animation:wave-pulse .8s ease-in-out infinite .25s;background:#a3e635}.waveform-animation .bar-7{animation:wave-pulse 1.4s ease-in-out infinite .05s;background:#a78bfa}.waveform-animation .bar-8{animation:wave-pulse 1.1s ease-in-out infinite .35s;background:#8b5cf6}@keyframes wave-pulse{0%,to{height:3px}50%{height:20px}}.mobile-section-title{display:flex;justify-content:space-between;align-items:center;border-left:2px solid #8B5CF6;padding-left:10px;margin-bottom:2px}.mobile-section-title h3{font-family:var(--font-primary);font-size:11px;font-weight:700;letter-spacing:.1em}.mobile-section-title span{font-family:var(--font-primary);font-size:8px;color:#f5f5f566;letter-spacing:.05em}.mobile-tools-grid{display:flex;flex-direction:column;gap:12px}.mobile-tool-card{position:relative;border-radius:16px;padding:16px;background:#ffffff05;border:1px solid rgba(255,255,255,.05);overflow:hidden;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1)}.mobile-tool-card:active{transform:scale(.98)}.card-gradient-bg{position:absolute;top:0;left:0;right:0;bottom:0;opacity:.02;transition:opacity .3s ease}.mobile-tool-card.synth .card-gradient-bg{background:radial-gradient(circle at top right,#8B5CF6,transparent 60%)}.mobile-tool-card.chord .card-gradient-bg{background:radial-gradient(circle at top right,#4ECDC4,transparent 60%)}.mobile-tool-card.drum .card-gradient-bg{background:radial-gradient(circle at top right,#FF6B6B,transparent 60%)}.mobile-tool-card.ai .card-gradient-bg{background:radial-gradient(circle at top right,#fbbf24,transparent 60%)}.mobile-tool-card.tuner .card-gradient-bg{background:radial-gradient(circle at top right,#a3e635,transparent 60%)}.mobile-tool-card:active .card-gradient-bg{opacity:.1}.mobile-tool-card.synth:active{border-color:#8b5cf666;box-shadow:0 0 15px #8b5cf626}.mobile-tool-card.chord:active{border-color:#4ecdc466;box-shadow:0 0 15px #4ecdc426}.mobile-tool-card.drum:active{border-color:#ff6b6b66;box-shadow:0 0 15px #ff6b6b26}.mobile-tool-card.ai:active{border-color:#f59e0b66;box-shadow:0 0 15px #f59e0b26}.mobile-tool-card.tuner:active{border-color:#84cc1666;box-shadow:0 0 15px #84cc1626}.card-content{position:relative;z-index:2;display:flex;flex-direction:column;gap:4px}.tool-category{font-family:var(--font-primary);font-size:8px;font-weight:700;letter-spacing:.12em}.mobile-tool-card.synth .tool-category{color:#a78bfa}.mobile-tool-card.chord .tool-category{color:#4ecdc4}.mobile-tool-card.drum .tool-category{color:#ff6b6b}.mobile-tool-card.ai .tool-category{color:#fbbf24}.mobile-tool-card.tuner .tool-category{color:#a3e635}.card-content h4{font-family:var(--font-primary);font-size:13px;font-weight:700;letter-spacing:.05em;color:var(--text-color)}.card-content p{font-family:var(--font-primary);font-size:9px;color:#f5f5f580;line-height:1.4;text-transform:none;margin-top:2px;margin-bottom:8px}.launch-btn{font-family:var(--font-primary);font-size:9px;font-weight:700;letter-spacing:.05em;align-self:flex-start;transition:transform .2s ease}.mobile-tool-card:active .launch-btn{transform:translate(4px)}.mobile-tool-card.synth .launch-btn{color:#a78bfa}.mobile-tool-card.chord .launch-btn{color:#4ecdc4}.mobile-tool-card.drum .launch-btn{color:#ff6b6b}.mobile-tool-card.ai .launch-btn{color:#fbbf24}.mobile-tool-card.tuner .launch-btn{color:#a3e635}.mobile-theory-promo{display:flex;justify-content:space-between;align-items:center;background:#8b5cf612;border:1px solid rgba(139,92,246,.2);border-radius:16px;padding:18px;cursor:pointer;transition:all .25s ease}.mobile-theory-promo:active{background:#8b5cf61f;transform:scale(.98);box-shadow:0 0 20px #8b5cf61a}.promo-details{flex:1;padding-right:14px}.promo-details h4{font-family:var(--font-primary);font-size:11px;font-weight:700;letter-spacing:.05em;color:#a78bfa;margin-bottom:3px}.promo-details p{font-family:var(--font-primary);font-size:9px;color:#f5f5f580;line-height:1.4;text-transform:none}.promo-badge{background:#a78bfa;color:#0a0a0a;font-family:var(--font-primary);font-size:8px;font-weight:700;letter-spacing:.05em;padding:6px 12px;border-radius:6px;white-space:nowrap}.wallet-adapter-button{background-color:transparent;border:none;color:#fff;cursor:pointer;display:flex;align-items:center;font-family:DM Sans,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;height:48px;line-height:48px;padding:0 24px;border-radius:4px}.wallet-adapter-button-trigger{background-color:#512da8}.wallet-adapter-button:not([disabled]):focus-visible{outline-color:#fff}.wallet-adapter-button:not([disabled]):hover{background-color:#1a1f2e}.wallet-adapter-button[disabled]{background:#404144;color:#999;cursor:not-allowed}.wallet-adapter-button-end-icon,.wallet-adapter-button-start-icon,.wallet-adapter-button-end-icon img,.wallet-adapter-button-start-icon img{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.wallet-adapter-button-end-icon{margin-left:12px}.wallet-adapter-button-start-icon{margin-right:12px}.wallet-adapter-collapse{width:100%}.wallet-adapter-dropdown{position:relative;display:inline-block}.wallet-adapter-dropdown-list{position:absolute;z-index:99;display:grid;grid-template-rows:1fr;grid-row-gap:10px;padding:10px;top:100%;right:0;margin:0;list-style:none;background:#2c2d30;border-radius:10px;box-shadow:0 8px 20px #0009;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s;font-family:DM Sans,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif}.wallet-adapter-dropdown-list-active{opacity:1;visibility:visible;transform:translateY(10px)}.wallet-adapter-dropdown-list-item{display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;outline:none;cursor:pointer;white-space:nowrap;box-sizing:border-box;padding:0 20px;width:100%;border-radius:6px;font-size:14px;font-weight:600;height:37px;color:#fff}.wallet-adapter-dropdown-list-item:not([disabled]):hover{background-color:#1a1f2e}.wallet-adapter-modal-collapse-button svg{align-self:center;fill:#999}.wallet-adapter-modal-collapse-button.wallet-adapter-modal-collapse-button-active svg{transform:rotate(180deg);transition:transform ease-in .15s}.wallet-adapter-modal{position:fixed;top:0;left:0;right:0;bottom:0;opacity:0;transition:opacity linear .15s;background:#00000080;z-index:1040;overflow-y:auto}.wallet-adapter-modal.wallet-adapter-modal-fade-in{opacity:1}.wallet-adapter-modal-button-close{display:flex;align-items:center;justify-content:center;position:absolute;top:18px;right:18px;padding:12px;cursor:pointer;background:#1a1f2e;border:none;border-radius:50%}.wallet-adapter-modal-button-close:focus-visible{outline-color:#fff}.wallet-adapter-modal-button-close svg{fill:#777;transition:fill .2s ease 0s}.wallet-adapter-modal-button-close:hover svg{fill:#fff}.wallet-adapter-modal-overlay{background:#00000080;position:fixed;top:0;left:0;bottom:0;right:0}.wallet-adapter-modal-container{display:flex;margin:3rem;min-height:calc(100vh - 6rem);align-items:center;justify-content:center}@media (max-width: 480px){.wallet-adapter-modal-container{margin:1rem;min-height:calc(100vh - 2rem)}}.wallet-adapter-modal-wrapper{box-sizing:border-box;position:relative;display:flex;align-items:center;flex-direction:column;z-index:1050;max-width:400px;border-radius:10px;background:#10141f;box-shadow:0 8px 20px #0009;font-family:DM Sans,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif;flex:1}.wallet-adapter-modal-wrapper .wallet-adapter-button{width:100%}.wallet-adapter-modal-title{font-weight:500;font-size:24px;line-height:36px;margin:0;padding:64px 48px 48px;text-align:center;color:#fff}@media (max-width: 374px){.wallet-adapter-modal-title{font-size:18px}}.wallet-adapter-modal-list{margin:0 0 12px;padding:0;width:100%;list-style:none}.wallet-adapter-modal-list .wallet-adapter-button{font-weight:400;border-radius:0;font-size:18px}.wallet-adapter-modal-list .wallet-adapter-button-end-icon,.wallet-adapter-modal-list .wallet-adapter-button-start-icon,.wallet-adapter-modal-list .wallet-adapter-button-end-icon img,.wallet-adapter-modal-list .wallet-adapter-button-start-icon img{width:28px;height:28px}.wallet-adapter-modal-list .wallet-adapter-button span{margin-left:auto;font-size:14px;opacity:.6}.wallet-adapter-modal-list-more{cursor:pointer;border:none;padding:12px 24px 24px 12px;align-self:flex-end;display:flex;align-items:center;background-color:transparent;color:#fff}.wallet-adapter-modal-list-more svg{transition:all .1s ease;fill:#fff;margin-left:.5rem}.wallet-adapter-modal-list-more-icon-rotate{transform:rotate(180deg)}.wallet-adapter-modal-middle{width:100%;display:flex;flex-direction:column;align-items:center;padding:0 24px 24px;box-sizing:border-box}.wallet-adapter-modal-middle-button{display:block;cursor:pointer;margin-top:48px;width:100%;background-color:#512da8;padding:12px;font-size:18px;border:none;border-radius:8px;color:#fff}