body{margin:0;padding:0;background-color:#121212;color:#e0e0e0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}:root{--bg-deep: hsl(226, 25%, 6%);--bg-base: hsl(226, 22%, 9%);--bg-panel: hsl(226, 20%, 12%);--bg-surface: hsl(226, 18%, 15%);--bg-raised: hsl(226, 16%, 19%);--bg-overlay: hsl(226, 30%, 5%);--glass-bg: hsla(226, 20%, 100%, .04);--glass-bg-hover: hsla(226, 20%, 100%, .07);--glass-border: hsla(226, 40%, 100%, .1);--glass-border-hover: hsla(226, 40%, 100%, .18);--glass-blur: blur(16px);--glass-shadow: 0 4px 32px hsla(226, 50%, 2%, .6);--accent-hue: 258;--accent: hsl(258, 70%, 72%);--accent-dim: hsla(258, 70%, 72%, .15);--accent-glow:hsla(258, 70%, 72%, .25);--theme-primary: var(--accent);--theme-primary-dim: var(--accent-dim);--border-subtle: hsla(226, 20%, 100%, .05);--border-default: hsla(226, 20%, 100%, .1);--border-muted: hsla(226, 20%, 100%, .15);--border-dim: hsla(226, 20%, 100%, .2);--text-primary: hsl(220, 20%, 90%);--text-secondary: hsl(220, 15%, 75%);--text-muted: hsl(220, 10%, 55%);--text-faint: hsl(220, 10%, 40%);--text-dim: hsl(220, 10%, 30%);--text-bright: hsl(0, 0%, 100%);--role-root: hsl(350, 65%, 65%);--role-third: hsl(210, 75%, 68%);--role-fifth: hsl(140, 50%, 60%);--role-scale: hsl(200, 20%, 55%);--role-target: hsl(47, 100%, 58%);--color-error: hsl(4, 70%, 58%);--color-warning: hsl(36, 90%, 55%);--color-success: hsl(145, 60%, 50%);--color-info: hsl(210, 80%, 72%);--seq-kick: hsl(0, 80%, 62%);--seq-snare: hsl(220, 80%, 62%);--seq-hat: hsl(47, 90%, 58%);--seq-bass: hsl(155, 70%, 55%);--seq-rim: hsl(30, 85%, 58%);--seq-crash: hsl(0, 0%, 85%);--font-body: "Inter", "Segoe UI", system-ui, sans-serif;--font-mono: "JetBrains Mono", "Fira Code", monospace;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--transition-fast: .15s ease;--transition-normal: .22s ease;--transition-slow: .35s ease}body{margin:0;padding:0;background-color:var(--bg-base);background-image:radial-gradient(ellipse at 20% 30%,hsla(258,40%,15%,.4) 0%,transparent 60%),radial-gradient(ellipse at 80% 70%,hsla(200,40%,12%,.3) 0%,transparent 50%);background-attachment:fixed;color:var(--text-primary);font-family:var(--font-body);transition:background-color var(--transition-slow)}.app-container{display:flex;flex-direction:column;align-items:center;padding:40px 20px}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.glass-panel{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);transition:border-color var(--transition-normal),box-shadow var(--transition-normal)}.glass-panel:hover{border-color:var(--glass-border-hover);box-shadow:var(--glass-shadow),0 0 0 1px var(--accent-glow)}.btn-premium{padding:7px 16px;border-radius:var(--radius-md);border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-secondary);font-family:var(--font-body);font-size:.8rem;font-weight:500;letter-spacing:.03em;cursor:pointer;transition:all var(--transition-fast);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-premium:hover{background:var(--glass-bg-hover);color:var(--text-primary);border-color:var(--border-muted)}.btn-premium.active,.btn-premium[aria-pressed=true]{background:var(--accent-dim);border-color:var(--accent);color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}.select-premium{background:linear-gradient(180deg,var(--bg-panel) 0%,var(--bg-deep) 100%);border:1px solid var(--glass-border);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-body);font-size:.82rem;padding:6px 10px;outline:none;cursor:pointer;transition:border-color var(--transition-fast);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);appearance:none;-webkit-appearance:none}.select-premium option{background-color:var(--bg-deep);color:var(--text-primary)}.select-premium optgroup{background-color:#050a1f;color:gold;font-weight:700}.select-premium:hover,.select-premium:focus{border-color:var(--accent)}.divider-glass{border:none;height:1px;background:linear-gradient(90deg,transparent,var(--glass-border),transparent);margin:12px 0;width:100%}.section-label{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}.main-layout-grid{display:grid;grid-template-columns:1fr 3.5fr 1fr;gap:30px;width:100%;max-width:2560px;margin-top:20px;align-items:flex-start}.layout-col{display:flex;flex-direction:column;gap:20px;min-width:0}h1{color:var(--theme-primary);margin-bottom:5px;transition:color .5s ease;text-align:center}.dashboard-panel{background-color:var(--bg-surface);padding:20px;border-radius:8px;margin-bottom:20px;width:100%;max-width:1200px;border:1px solid var(--border-default);box-shadow:0 5px 15px #00000080;transition:background-color .5s ease,border-color .5s ease}.info-badge{display:inline-block;background-color:var(--bg-raised);padding:5px 12px;border-radius:4px;margin:5px;font-size:12px;color:var(--text-secondary);border:1px solid var(--border-muted)}.effects-text{font-style:italic;color:#aaa;margin-top:10px;font-size:14px}.role-root,.piano-key.role-root{background-color:var(--role-root)!important;color:var(--text-bright)!important}.note-marker.role-root{background-color:var(--role-root);border:2px solid var(--text-bright);box-shadow:0 0 10px var(--role-root)}.role-third,.piano-key.role-third{background-color:var(--role-third)!important;color:var(--text-bright)!important}.note-marker.role-third{background-color:var(--role-third);border:1px solid var(--text-bright)}.role-fifth,.piano-key.role-fifth{background-color:var(--role-fifth)!important;color:var(--text-bright)!important}.note-marker.role-fifth{background-color:var(--role-fifth);border:1px solid var(--text-bright)}.role-scale,.piano-key.role-scale{background-color:var(--role-scale)!important;color:var(--text-bright)!important}.note-marker.role-scale{background-color:var(--role-scale);border:1px solid #546e7a}.role-target,.piano-key.role-target{background-color:var(--theme-primary)!important;color:#000!important;box-shadow:inset 0 0 15px #ffffff80}.note-marker.role-target{background-color:var(--theme-primary);box-shadow:0 0 15px var(--theme-primary);color:#000;font-weight:700;border:2px solid var(--text-bright)}.piano-roll-container{display:flex;justify-content:flex-start;gap:6px;margin:10px 0 20px;padding:10px}.piano-roll-step{min-width:35px;height:35px;background-color:var(--bg-raised);border:2px solid var(--bg-overlay);border-radius:6px;transition:all .1s ease;position:relative}.piano-roll-step.active{background-color:var(--theme-primary);box-shadow:0 0 12px var(--theme-primary);border-color:#fff}.piano-roll-step.current{transform:scale(1.1);border-color:#fff;z-index:10;filter:brightness(1.4)}.bg-kick.active{background-color:var(--seq-kick)!important;box-shadow:0 0 15px var(--seq-kick)}.bg-snare.active{background-color:var(--seq-snare)!important;box-shadow:0 0 15px var(--seq-snare)}.bg-hat.active{background-color:var(--seq-hat)!important;box-shadow:0 0 15px var(--seq-hat)}.bg-bass.active{background-color:var(--seq-bass)!important;box-shadow:0 0 15px var(--seq-bass);color:#000}.bg-rim.active{background-color:var(--seq-rim)!important;box-shadow:0 0 15px var(--seq-rim)}.bg-crash.active{background-color:var(--seq-crash)!important;box-shadow:0 0 15px var(--seq-crash)}.scrollable-instrument{width:100%;overflow-x:auto;padding-top:15px;padding-bottom:25px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--theme-primary) var(--border-subtle)}.btn-toggle{padding:8px 16px;cursor:pointer;border-radius:4px;border:none;font-weight:700;font-size:13px;background-color:var(--bg-raised);color:var(--text-secondary);transition:background-color .2s ease,color .2s ease}.btn-toggle--active{background-color:var(--theme-primary);color:#000}.btn-toggle:hover:not(.btn-toggle--active){background-color:var(--border-muted);color:var(--text-bright)}.btn-tab{padding:10px;cursor:pointer;border-radius:4px;border:1px solid var(--border-dim);font-weight:700;font-size:13px;background-color:var(--bg-raised);color:var(--text-secondary);transition:all .2s ease}.btn-tab--active{background-color:var(--theme-primary);color:#000;border-color:var(--theme-primary)}.btn-tab:hover:not(.btn-tab--active){background-color:var(--border-muted);color:var(--text-bright)}.btn-segment{flex:1;padding:10px 6px;font-size:14px;font-weight:400;cursor:pointer;border:none;background-color:var(--bg-overlay);color:var(--text-secondary);transition:all .15s ease}.btn-segment--active{font-weight:700;background-color:var(--theme-primary);color:#000}.control-panel-container,.secondary-controls,.app-mode-selector,.playback-controls{padding:1.25rem;display:flex;flex-direction:column;gap:1.25rem;width:100%;box-sizing:border-box}.playback-controls.is-playing{border-color:var(--color-success);box-shadow:0 0 20px var(--accent-glow)}.controls-group{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.sliders-group{display:flex;flex-direction:column;gap:1.5rem;width:100%}.slider-item,.select-group{display:flex;flex-direction:column;gap:.5rem}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn var(--transition-normal)}.modal-content{max-width:600px;width:90%;max-height:85vh;overflow-y:auto;padding:2.5rem;position:relative}.modal-close-btn{position:absolute;top:1rem;right:1rem;width:32px;height:32px;padding:0}.elegant-text{color:var(--text-primary);line-height:1.6}.modal-desc{color:var(--text-secondary);font-size:.95rem;line-height:1.6;margin-bottom:1.5rem}.modal-footer{display:flex;gap:1rem;justify-content:center;margin-top:2rem}.modal-title{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;margin-bottom:1.5rem}.section-title{font-size:1.1rem;font-weight:600;color:var(--text-primary);margin:1.5rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--glass-border)}.section-title.accent{color:var(--accent)}.guide-box{background:var(--accent-dim);padding:1.25rem;border-radius:var(--radius-md);border-left:4px solid var(--accent);margin-bottom:2rem;text-align:left}.guide-title{margin:0 0 .75rem;color:var(--accent);font-size:1rem}.guide-list,.modes-list{padding-left:1.25rem;color:var(--text-secondary);line-height:1.6}.modes-list li{margin-bottom:.5rem}.mode-name{color:var(--text-primary)}.nns-text{color:var(--text-secondary);line-height:1.7;font-size:.9rem}.premium-slider{-webkit-appearance:none;width:100%;height:6px;background:var(--bg-raised);border-radius:3px;outline:none;cursor:pointer}.premium-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--text-secondary);border-radius:50%;border:2px solid var(--bg-base);box-shadow:0 0 10px #00000080;transition:transform var(--transition-fast)}.premium-slider:hover::-webkit-slider-thumb{transform:scale(1.2);background:var(--text-primary)}.premium-slider.accent::-webkit-slider-thumb{background:var(--accent)}.fingering-controls{text-align:center;padding:.5rem 0}.fingering-sub-modes{display:flex;gap:.5rem;justify-content:center;margin-top:.75rem}.fingering-desc{color:var(--text-muted);font-size:.7rem;margin-top:.75rem}@media(max-width:1200px){.main-layout-grid{grid-template-columns:1fr}.layout-col{width:100%}}@media(max-width:768px){.app-container{padding:15px 10px}h1{font-size:22px}.dashboard-panel,.glass-panel{padding:15px}button{font-size:14px!important}.piano-roll-step{min-width:28px!important;height:28px!important}}.dict-panel{display:flex;flex-direction:column;gap:0;text-align:center}.dict-panel__title{margin:0 0 1.5rem;font-size:1.2rem;font-weight:700;letter-spacing:-.01em}.dict-panel__controls{display:flex;flex-direction:column;gap:1.25rem}.field-label{display:block;color:var(--text-secondary);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem}.btn-segment-group{display:flex;gap:2px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--glass-border)}.btn-segment{flex:1;padding:.6rem .5rem;font-size:.8rem;font-weight:600;background:transparent;color:var(--text-secondary);border:none;cursor:pointer;transition:all var(--transition-fast)}.btn-segment:hover{background:var(--glass-bg);color:var(--text-primary)}.btn-segment--active{background:var(--accent);color:var(--bg-base)}.dict-panel__emotion-card{margin-top:.75rem;padding:.75rem 1rem;background:var(--accent-dim);border-radius:var(--radius-md);border-left:3px solid var(--accent);text-align:left}.dict-panel__emotion-title{font-size:.85rem;color:var(--accent);font-weight:600;margin-bottom:.3rem}.dict-panel__emotion-desc{font-size:.75rem;color:var(--text-muted);line-height:1.5}.dict-panel__recommended{margin-top:1rem;text-align:left}.dict-panel__recommended-label{font-size:.75rem;color:var(--text-secondary);margin-bottom:.5rem}.dict-panel__recommended-tags{display:flex;flex-wrap:wrap;gap:6px}.tag-btn{padding:3px 10px;font-size:.72rem;background:transparent;color:var(--accent);border:1px solid var(--accent);border-radius:999px;cursor:pointer;transition:all var(--transition-fast)}.tag-btn:hover{background:var(--accent);color:var(--bg-base)}.btn-premium--full{width:100%;margin-top:1.75rem}.btn-premium--listen{font-size:1rem;letter-spacing:.05em}.btn-premium--listen.is-pressed{transform:scale(.96)}.accent-text{color:var(--accent)}.app-container-inner{max-width:2560px;margin:0 auto;padding:0 20px;display:flex;flex-direction:column;min-height:100vh;position:relative}.app-main-content{flex:1}.app-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px}.app-title{color:#fff;margin:0}.app-controls{display:flex;gap:15px;align-items:center}.btn-theory{padding:8px 15px;background-color:#1a237e;color:#90caf9;border:1px solid #3949ab;border-radius:8px;cursor:pointer;font-weight:700;transition:all .2s;display:flex;align-items:center;gap:5px}.btn-theory:hover{background-color:#283593}.select-lang{padding:8px 12px;border-radius:8px;background:linear-gradient(180deg,var(--bg-panel) 0%,var(--bg-deep) 100%);color:var(--text-primary);border:1px solid var(--theme-primary);cursor:pointer;font-weight:700;outline:none}.select-lang option{background-color:var(--bg-deep);color:var(--text-primary)}.select-lang optgroup{background-color:#050a1f;color:gold;font-weight:700}.btn-about{padding:8px 15px;background-color:transparent;color:var(--theme-primary);border:1px solid var(--theme-primary);border-radius:20px;cursor:pointer;font-weight:700;transition:all .2s}.btn-about:hover{background-color:var(--theme-primary);color:#000}.app-footer{margin-top:60px;padding:20px 0;border-top:1px solid #333;text-align:center;color:#666;font-size:14px;display:flex;justify-content:center;align-items:center}.app-footer-text{cursor:help;transition:color .3s}.app-footer-text:hover{color:#ccc}.studio-info-block{margin-bottom:20px;border-left:4px solid var(--theme-primary);transition:all .3s ease}.studio-info-block.is-closed{padding-bottom:10px}.info-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.info-header h3{margin:0;font-size:1rem;color:var(--theme-primary)}.toggle-icon{font-size:1.2rem;color:var(--text-secondary)}.info-content{margin-top:15px;animation:slideDown .3s ease-out}.info-content .intro{font-style:italic;margin-bottom:15px;color:var(--text-bright)}.info-section{margin-bottom:12px}.info-section h4{margin:0 0 5px;font-size:.9rem;color:var(--color-secondary)}.info-section p{margin:0;font-size:.85rem;line-height:1.4;color:var(--text-secondary)}.tips{margin-top:15px;padding:8px;background:#ffffff0d;border-radius:4px;font-size:.85rem;color:var(--color-warning)}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.piano-roll{display:flex;flex-direction:column;gap:15px;background-color:#1a1a1a;padding:20px;border-radius:8px;border:1px solid #333}.track-row{display:flex;align-items:flex-end}.track-name{width:140px;min-width:140px;color:#ccc;font-size:14px;font-weight:700;text-align:left;padding-bottom:4px}.steps-container{display:flex;gap:6px;flex:1;align-items:flex-end}.step{flex:1;height:35px;box-sizing:border-box;background-color:#2a2a2a;border-radius:4px;border:1px solid #222;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;transition:all .1s ease;cursor:default}.step--ghost{height:22px!important;border-style:dashed!important;opacity:.65}.step--current{border:2px solid #fff!important;transform:scale(1.1);box-shadow:0 0 10px #fff9}.step--beat{border-left:2px solid rgba(255,255,255,.1)}.step--measure{border-left:3px solid rgba(255,255,255,.3)}.step__ghost-label{font-size:10px;line-height:1;position:absolute;top:1px;right:2px}.step__pitch-label{font-size:9px;font-weight:700;color:#fff;text-shadow:0 0 3px rgba(0,0,0,.8);line-height:1}.bg-kick{background-color:#ff5252!important;box-shadow:0 0 10px #ff525299}.bg-snare,.bg-clap,.bg-rim{background-color:#448aff!important;box-shadow:0 0 10px #448aff99}.bg-hat,.bg-crash{background-color:#ffeb3b!important;box-shadow:0 0 10px #ffeb3b99}.bg-bass{background-color:#69f0ae!important;box-shadow:0 0 10px #69f0ae99}.bg-chords{background-color:#e1bee7!important;box-shadow:0 0 10px #e1bee799}.step--ghost.bg-kick{box-shadow:0 0 4px #ff52524d}.step--ghost.bg-snare,.step--ghost.bg-rim{box-shadow:0 0 4px #448aff4d}.step--ghost.bg-hat{box-shadow:0 0 4px #ffeb3b4d}.step--ghost.bg-bass{box-shadow:0 0 4px #69f0ae4d}.daw-helper{background-color:#111;border:1px solid #333;border-radius:8px;padding:14px 18px;margin-top:12px;font-family:Courier New,monospace;font-size:12px;line-height:1.7;color:#aaa}.daw-helper__title{color:var(--theme-primary, #ffd700);font-weight:700;font-size:13px;margin-bottom:8px;font-family:inherit}.daw-helper__line{display:flex;gap:8px;flex-wrap:wrap}.daw-helper__icon{flex-shrink:0}.daw-helper__text{color:#ccc}.daw-helper__ghost{color:#888;font-style:italic}.daw-helper__tip{margin-top:12px;padding:8px;background-color:#ffffff0d;border-radius:4px;font-size:11px;color:#aaa;font-style:italic;border-left:2px solid var(--theme-primary)}.daw-helper__meta{margin-top:8px;padding-top:8px;border-top:1px solid #333;color:#777;font-size:11px}@keyframes note-playing-overlay{0%{background-color:#ffffff80;box-shadow:0 0 0 4px #ffd700e6 inset}to{background-color:#fff0;box-shadow:0 0 0 10px #ffd70000 inset}}.piano-container{display:flex;background-color:#111;padding:20px;border-radius:8px;box-shadow:0 5px 15px #0006;margin:0 auto}.piano-key{position:relative;cursor:pointer;border:1px solid #333;display:flex;justify-content:center;align-items:flex-end;padding-bottom:8px;font-size:13px;transition:background-color .1s ease;box-sizing:border-box}.piano-key:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:1}.piano-key.is-playing:after{animation:note-playing-overlay .5s ease-out forwards}.white-key{width:50px;height:200px;background-color:#fff;color:#333;border-left:1px solid #ddd}.white-key:hover{background-color:#f0f0f0}.piano-wrapper{display:flex;flex-direction:column;align-items:center;gap:15px;width:100%}.explanations-toggle-container{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}.toggle-explanations-btn{padding:8px 16px;background-color:#333;color:#fff;border:1px solid #555;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s}.toggle-explanations-btn:hover{background-color:#555}.numbers-explanation{background-color:#222;color:#ddd;padding:10px 15px;border-radius:4px;font-size:13px;max-width:600px;text-align:center;border:1px solid #444}.black-key-wrapper{width:0;position:relative;display:flex;justify-content:center;z-index:2}.black-key{width:32px;height:120px;background-color:#222;color:#fff;position:absolute;top:-1px;left:-16px;z-index:2;border-bottom-left-radius:4px;border-bottom-right-radius:4px;border:1px solid #111;border-top:none;display:flex;justify-content:center;align-items:flex-end;padding-bottom:8px}.black-key:hover{background-color:#444}.note-label{font-weight:700;display:flex;flex-direction:column;align-items:center;line-height:1.2;gap:2px;pointer-events:none;position:relative;z-index:3}.flat-label{font-size:.85em;font-weight:400;opacity:.9}.note-order{font-size:.8em;margin-top:2px;opacity:.8}.piano-key.role-root{background-color:#cf6679;color:#fff}.piano-key.role-third{background-color:#64b5f6;color:#000}.piano-key.role-fifth{background-color:#81c784;color:#000}.piano-key.role-scale{background-color:#78909c;color:#fff}.piano-key.white-key.subtle-highlight{background-color:#e8eaed!important;color:#999!important}.piano-key.black-key.subtle-highlight{background-color:#2a2a2a!important;color:#999!important;border-color:#222}.piano-key.role-target{background-color:var(--theme-primary);color:#000;box-shadow:0 0 10px var(--theme-primary) inset}@keyframes note-playing-animation{0%{box-shadow:0 0 0 2px #ffd700e6;transform:scale(1.2)}to{box-shadow:0 0 0 18px #ffd70000;transform:scale(1)}}.fretboard-container{margin-bottom:30px;width:100%;min-width:800px;max-width:1200px;margin-left:auto;margin-right:auto}.fretboard{position:relative;display:flex;flex-direction:column;background-color:#2c1e16;border:2px solid #1a110c;border-radius:4px;padding:10px 0;box-shadow:0 10px 20px #0006}.fret-dots-layer{position:absolute;inset:0;display:flex;flex-direction:row;z-index:0;padding:10px 0}.dot-fret-cell{position:relative;flex:1;height:100%;display:flex;justify-content:center;align-items:center;border-right:2px solid #999}.dot-fret-cell:last-child{border-right:none}.dot-fret-cell.open-string{border-right:5px solid #d4c4a8;flex:.5}.double-dot-container{height:100%;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}.fretboard-dot{width:16px;height:16px;border-radius:50%;background-color:#e0d0b0;opacity:.8}.strings-layer{position:relative;z-index:1}.string-row{display:flex;flex-direction:row;height:35px;align-items:center}.fret{position:relative;flex:1;height:100%;display:flex;justify-content:center;align-items:center;border-right:2px solid #999}.fret:last-child{border-right:none}.open-string{border-right:5px solid #d4c4a8;background-color:#1e1e1e;flex:.5}.string-line{position:absolute;width:100%;height:2px;background-color:#a0a0a0;z-index:1}.note-marker{position:relative;z-index:2;width:24px;height:24px;border-radius:50%;background-color:#444;color:#fff;display:flex;justify-content:center;align-items:center;font-size:12px;font-weight:700;cursor:default}.note-marker.is-playing{animation:note-playing-animation .5s ease-out forwards}.note-marker.role-target{background-color:var(--theme-primary);box-shadow:0 0 10px var(--theme-primary);color:#000;border:2px solid #fff}.note-marker.subtle-marker{background-color:#78909c26!important;border:1px solid rgba(120,144,156,.4);color:#fff6!important;box-shadow:none!important}