@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap";:root{color:#f3f5f0;font-synthesis:none;background:#0c0e0d;font-family:Noto Sans SC,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 50% -10%,#27352b 0,#111512 30%,#0c0e0d 62%);min-width:320px;min-height:100vh;margin:0}main{flex-direction:column;min-height:100vh;display:flex;position:relative}button{font:inherit}button:focus-visible{outline-offset:3px;outline:2px solid #b8ee50}.topbar{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0c0e0dc2;border-bottom:1px solid #272b28;justify-content:space-between;align-items:center;height:68px;padding:0 clamp(20px,4vw,64px);display:flex}.brand{color:#f5f7f2;letter-spacing:-.5px;align-items:center;gap:10px;font-size:18px;font-weight:800;text-decoration:none;display:flex}.brand>span:last-child span{color:#b8ee50}.brand-mark{color:#10140d;background:#b8ee50;border-radius:9px;place-items:center;width:34px;height:34px;display:grid;transform:rotate(-4deg)}nav{gap:4px;height:100%;display:flex}nav button{color:#777d78;cursor:pointer;background:0 0;border:0;padding:0 18px;font-size:13px;font-weight:600;position:relative}nav .nav-active{color:#f4f5f2}nav .nav-active:after{content:"";background:#b8ee50;border-radius:9px;height:2px;position:absolute;bottom:0;left:18px;right:18px}nav em{background:#292d29;border-radius:8px;margin-left:4px;padding:2px 5px;font-size:8px;font-style:normal}.header-actions{gap:8px;display:flex}.icon-btn,.settings-btn{color:#c7cbc7;cursor:pointer;background:#171a18;border:1px solid #303531;border-radius:9px;height:36px}.icon-btn{place-items:center;width:36px;display:grid}.icon-btn .muted{opacity:.3}.settings-btn{align-items:center;gap:7px;padding:0 13px;display:flex}.hero{text-align:center;min-height:235px;padding:42px 20px 26px}.eyebrow{color:#aeb5ad;letter-spacing:1.2px;text-transform:uppercase;align-items:center;gap:6px;font-size:11px;display:inline-flex}.eyebrow svg{color:#b8ee50}h1{letter-spacing:2px;text-transform:uppercase;color:#7d837e;margin:22px 0 8px;font-size:13px;font-weight:600}.target-note{color:#d7ff75;text-shadow:0 0 34px #b8ee5033;font-family:DM Mono,monospace;font-size:clamp(58px,6vw,78px);font-weight:500;line-height:1}.target-note.dim{color:#687066}.target-note small{color:#737a74;letter-spacing:.5px;margin-top:14px;font-family:Noto Sans SC;font-size:11px;font-weight:400;display:block}.target-note>svg{color:#d7ff75;filter:drop-shadow(0 0 14px #b8ee5047)}.replay-note{color:#aeb7ae;cursor:pointer;background:#202620;border:1px solid #3c463b;border-radius:8px;align-items:center;gap:5px;height:28px;margin:10px auto 0;padding:0 10px;font:9px Noto Sans SC;display:flex}.replay-note:hover{color:#d7ff75;border-color:#738947}.result-summary strong{color:#d7ff75;font:500 58px/1 DM Mono}.result-summary>span{color:#8b938c;margin-left:6px}.result-summary p{color:#858c86;font-size:12px}.learning-title strong{color:#e8ece7;letter-spacing:-1px;font-size:30px;display:block}.learning-title small{color:#7c847d;margin-top:10px;font-size:11px;display:block}.learning-toolbar{background:#181c19;border:1px solid #303631;border-radius:13px;align-items:center;gap:12px;min-height:54px;margin:0 0 16px;padding:8px 10px;display:flex}.learning-view-switch{background:#111411;border-radius:9px;padding:3px;display:flex}.learning-view-switch button{color:#747c75;cursor:pointer;background:0 0;border:0;border-radius:7px;height:31px;padding:0 12px;font-size:9px}.learning-view-switch button.active{color:#d7ff75;background:#2d3827}.ear-learning-actions{gap:5px;display:flex}.ear-learning-actions button{color:#aeb5af;cursor:pointer;background:#222722;border:1px solid #394139;border-radius:8px;align-items:center;gap:5px;height:32px;padding:0 10px;font-size:9px;display:flex}.ear-learning-actions button:hover{color:#d7ff75;border-color:#718547}.ear-learning-actions button.next-ear{color:#17200f;background:#b8ee50;border-color:#b8ee50;font-weight:700}.ear-learning-hint{color:#6d756e;margin-left:auto;font-size:9px}.ear-learning-hint.revealed{color:#d7ff75;font:500 10px DM Mono}.learning-method{color:#697169;letter-spacing:.3px;margin-left:auto;font-size:8px}.ear-lab{background:linear-gradient(145deg,#191e1a,#121512);border:1px solid #323933;border-radius:18px;margin-bottom:42px;padding:28px;box-shadow:0 22px 60px #00000040}.ear-lab-intro{text-align:center;max-width:560px;margin:0 auto 24px}.ear-lab-intro h2{margin:8px 0;font-size:23px}.ear-lab-intro p{color:#7c847d;font-size:10px;line-height:1.7}.ear-note-grid{grid-template-columns:repeat(12,1fr);gap:6px;display:grid}.ear-note-grid button{color:#aeb5af;cursor:pointer;background:#202521;border:1px solid #363d37;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:4px;height:78px;transition:transform .15s,border-color .15s;display:flex}.ear-note-grid button.natural{color:#171b18;background:#e0e5df}.ear-note-grid button.accidental{color:#c5cbc6;background:#252a26;height:66px;margin-top:12px}.ear-note-grid button:hover{border-color:#8dab4d;transform:translateY(-2px)}.ear-note-grid button.selected{border-color:#b8ee50;box-shadow:0 0 0 2px #b8ee502e,0 8px 24px #0003}.ear-note-grid button.selected.natural{background:#d7ff75}.ear-note-grid span{font:500 17px DM Mono}.ear-note-grid small{opacity:.55;font-size:7px}.ear-note-grid svg{opacity:.45}.ear-focus{grid-template-columns:150px repeat(3,1fr);gap:9px;margin-top:20px;display:grid}.ear-focus-note,.ear-stage{background:#1d221e;border:1px solid #323933;border-radius:12px;padding:16px}.ear-focus-note{flex-direction:column;justify-content:center;align-items:center;display:flex}.ear-focus-note>span,.ear-stage>span{color:#747c75;font-size:8px}.ear-focus-note strong{color:#d7ff75;margin:6px;font:500 42px/1.1 DM Mono}.ear-focus-note small{color:#6d756e;font-size:8px}.ear-stage>p{color:#6d756e;min-height:30px;font-size:8px;line-height:1.6}.ear-stage>div{gap:4px;display:flex}.ear-stage button{color:#aeb5af;cursor:pointer;background:#252b26;border:1px solid #3b433c;border-radius:7px;height:30px;padding:0 8px;font-size:8px}.ear-stage button:hover{color:#d7ff75;border-color:#738a47}.ear-stage button.compare-play{color:#d7ff75;background:#2b3726;justify-content:center;align-items:center;gap:5px;width:100%;display:flex}.ear-lab-footer{background:#20271e;border-radius:11px;justify-content:space-between;align-items:center;margin-top:16px;padding:14px 16px;display:flex}.ear-lab-footer strong,.ear-lab-footer span{display:block}.ear-lab-footer strong{font-size:10px}.ear-lab-footer span{color:#6f776f;margin-top:3px;font-size:8px}.ear-lab-footer button{color:#17200f;cursor:pointer;background:#b8ee50;border:0;border-radius:8px;height:34px;padding:0 14px;font-size:9px;font-weight:700}.scale-heading strong{color:#d7ff75;font-size:29px;display:block}.scale-heading small{color:#899188;margin-top:10px;font:10px DM Mono;display:block}.game-wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 26px;position:relative}.input-panel{background:#151916d1;border:1px solid #2c322d;border-radius:14px;flex-wrap:wrap;align-items:center;gap:11px;width:min(880px,100%);min-height:64px;margin:0 auto 18px;padding:10px 12px;display:flex;position:relative}.input-panel.connected{background:#1b2319db;border-color:#465a37}.input-panel.input-float{z-index:5;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#141815f0;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;width:min(310px,100%);min-height:0;margin:0 0 18px auto;padding:10px 12px;display:grid;position:relative;box-shadow:0 14px 38px #00000057}.input-panel.input-float.expanded{width:min(390px,100%)}.input-float .input-symbol{align-self:auto}.input-float .input-copy{text-align:left;min-width:0}.input-float .input-copy span{line-height:1.5}.input-float .pitch-monitor{grid-column:1/-1;grid-template-columns:1fr 34px;width:100%;margin:5px 0}.input-float select{grid-column:1/-1;width:100%;max-width:none}.input-float .connect-btn,.input-float .calibrate-btn{justify-content:center;width:auto}.input-float .calibration{grid-column:1/-1;grid-template-columns:1fr;gap:16px;padding:15px 0 3px}.input-float .input-error{max-width:260px;top:auto;bottom:calc(100% + 7px);right:0}.input-float.connected .input-symbol{box-shadow:0 0 18px #b8ee501f}.input-symbol{color:#89908a;background:#272c28;border-radius:10px;flex:none;place-items:center;width:38px;height:38px;display:grid}.connected .input-symbol{color:#c7f76a;background:#34452a}.input-copy{flex-direction:column;min-width:165px;display:flex}.input-copy strong{color:#d5d9d5;font-size:12px}.input-copy span{color:#747b75;margin-top:3px;font-size:9px}.pitch-monitor{grid-template-columns:80px 30px;align-items:center;column-gap:10px;margin-left:auto;display:grid}.pitch-monitor .level{background:#303730;border-radius:8px;grid-row:1/3;height:4px;overflow:hidden}.pitch-monitor .level i{background:#b8ee50;border-radius:8px;height:100%;transition:width 80ms;display:block}.pitch-monitor strong{color:#9ba39b;font:500 17px/1 DM Mono}.pitch-monitor strong.stable{color:#d7ff75}.pitch-monitor span{color:#6f776f;white-space:nowrap;font:8px DM Mono}.input-panel select{color:#adb3ae;background:#1c211d;border:1px solid #3a423a;border-radius:8px;max-width:170px;height:34px;padding:0 8px;font-size:9px}.connect-btn{color:#cbd0cb;cursor:pointer;white-space:nowrap;background:#252b26;border:1px solid #3b443c;border-radius:9px;align-items:center;gap:6px;height:36px;padding:0 12px;font-size:10px;display:flex}.connect-btn:disabled{opacity:.5}.connected .connect-btn{color:#909890;background:0 0}.calibrate-btn{color:#c7f76a;cursor:pointer;background:#34452a;border:0;border-radius:9px;height:36px;padding:0 11px;font-size:10px}.input-error{color:#ff8173;z-index:5;background:#251715;border:1px solid #56302b;border-radius:7px;padding:6px 9px;font-size:9px;position:absolute;top:100%;right:10px}.scale-controls{background:#181c19;border:1px solid #303631;border-radius:13px;flex-wrap:wrap;align-items:center;gap:8px;width:min(900px,100%);margin:0 auto 18px;padding:11px 13px;display:flex}.scale-controls label{color:#777f78;align-items:center;gap:7px;font-size:9px;display:flex}.scale-controls select{color:#d4d9d4;background:#222723;border:1px solid #394039;border-radius:8px;height:34px;padding:0 24px 0 9px;font-size:10px}.scale-controls>button{color:#d7ff75;cursor:pointer;background:#34452a;border:0;border-radius:8px;align-items:center;gap:6px;height:34px;padding:0 12px;font-size:10px;display:flex}.scale-controls>button.sequence-active{color:#17200f;background:#b8ee50}.scale-controls>button.direction-btn{color:#b9c0ba;background:#272d28;border:1px solid #3a423b}.scale-controls>button:disabled{opacity:.35}.scale-legend{gap:10px;margin-left:auto;display:flex}.scale-legend span{color:#777e78;align-items:center;gap:4px;font-size:8px;display:flex}.scale-legend i{background:#e4e8df;border-radius:50%;width:8px;height:8px}.scale-legend i.root-dot{background:#b8ee50}.theory-panel{background:#171b18e6;border:1px solid #303631;border-radius:18px;max-width:980px;margin:0 auto 50px;overflow:hidden;box-shadow:0 20px 60px #00000040}.theory-tabs{background:#131614;border-bottom:1px solid #303631;display:flex}.theory-tabs button{color:#747b75;cursor:pointer;background:0 0;border:0;border-right:1px solid #303631;height:52px;padding:0 24px;font-size:11px}.theory-tabs button.active{color:#d7ff75;background:#20261e;box-shadow:inset 0 -2px #b8ee50}.notes-lesson{grid-template-columns:.8fr 1.2fr;gap:40px;padding:36px;display:grid}.lesson-number{letter-spacing:1.5px;color:#9bc64a;font:9px DM Mono}.lesson-copy h2,.interval-builder h2{color:#edf0ec;margin:10px 0;font-size:25px}.lesson-copy p{color:#8f9790;font-size:12px;line-height:1.9}.lesson-copy p strong{color:#d7ff75}.tip{background:#20251f;border-left:2px solid #b8ee50;margin-top:22px;padding:14px}.tip strong,.tip span{display:block}.tip strong{color:#d8ddd8;font-size:10px}.tip span{color:#808880;margin-top:5px;font-size:10px;line-height:1.7}.chromatic-notes{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.chromatic-notes button{color:#aeb4ae;cursor:pointer;background:#1d211e;border:1px solid #353b36;border-radius:10px;min-height:75px}.chromatic-notes button.natural{color:#171b18;background:#e1e5de}.chromatic-notes button:hover{border-color:#9fc94d;transform:translateY(-1px)}.chromatic-notes strong,.chromatic-notes small{display:block}.chromatic-notes strong{font:500 19px DM Mono}.chromatic-notes small{opacity:.55;margin-top:6px;font-size:8px}.interval-lesson{grid-template-columns:280px 1fr;gap:30px;padding:34px;display:grid}.interval-builder{background:#20251f;border:1px solid #343b34;border-radius:14px;padding:23px}.interval-builder h2{margin-bottom:4px;font:500 28px DM Mono}.interval-builder>strong{color:#d7ff75;font-size:14px}.interval-builder>p{color:#798079;margin:8px 0 25px;font-size:10px}.interval-builder>div{gap:7px;display:flex}.interval-builder select,.interval-builder button{color:#d4d9d4;background:#171b18;border:1px solid #3b433b;border-radius:8px;height:38px;padding:0 10px}.interval-builder button{color:#d7ff75;cursor:pointer;align-items:center;gap:6px;display:flex}.interval-grid{grid-template-columns:repeat(4,1fr);gap:7px;display:grid}.interval-grid button{color:#8e958f;cursor:pointer;background:#1c201d;border:1px solid #343a35;border-radius:10px;min-height:72px}.interval-grid button.selected{color:#d7ff75;background:#293322;border-color:#84a446}.interval-grid span,.interval-grid strong,.interval-grid small{display:block}.interval-grid span{font:500 13px DM Mono}.interval-grid strong{margin:5px 0;font-size:9px}.interval-grid small{opacity:.55;font-size:7px}.calibration{border-top:1px solid #303830;flex:0 0 100%;grid-template-columns:1.3fr 1fr 1fr;align-items:center;gap:25px;margin-top:4px;padding:18px 8px 6px;display:grid}.calibration label{flex-direction:column;gap:5px;display:flex}.calibration label>span{color:#aeb4ae;justify-content:space-between;font-size:10px;display:flex}.calibration em{color:#c7f76a;font-style:normal}.calibration input{accent-color:#b8ee50;width:100%}.calibration small{color:#687069;font-size:8px}.tuner{color:#6e766f;grid-template-columns:12px 1fr 12px;align-items:center;gap:5px;font:9px DM Mono;display:grid}.tuner-track{background:#303731;border-radius:9px;height:7px;position:relative}.tuner-track b{background:#d7ff75;border-radius:3px;width:3px;height:15px;transition:left 80ms;position:absolute;top:-4px;transform:translate(-50%)}.tuner-center{background:#71805f;width:1px;height:13px;position:absolute;top:-3px;left:50%}.tuner strong,.tuner small{text-align:center;grid-column:1/4}.tuner strong{color:#cdd2cd;margin-top:3px;font:500 11px Noto Sans SC}.tuner small{color:#687069}.stats{background:#191d1acc;border:1px solid #2b302c;border-radius:15px;justify-content:space-around;align-items:center;width:min(560px,100%);height:62px;margin:0 auto 24px;display:flex;box-shadow:0 14px 50px #0003}.training-subnav{z-index:15;background:linear-gradient(90deg,#141815,#191e1a 50%,#141815);border-bottom:1px solid #282e29;justify-content:center;align-items:center;gap:8px;height:54px;padding:0 clamp(20px,4vw,64px);display:flex;position:relative}.current-training{background:#20271e;border:1px solid #35402f;border-radius:8px;align-items:center;gap:7px;height:30px;padding:0 11px;display:flex}.current-training span{color:#697169;letter-spacing:.6px;font-size:7px}.current-training strong{color:#d7ff75;font-size:10px}.training-menus{align-items:center;gap:3px;height:100%;padding-left:5px;display:flex}.training-menu-wrap{align-items:center;height:100%;display:flex;position:relative}.training-menu-wrap>button{color:#858d86;cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:6px;height:32px;padding:0 11px;font-size:9px;display:flex}.training-menu-wrap>button:hover,.training-menu-wrap>button.active{color:#dce1dc;background:#252c24}.training-menu-wrap>button.active:before{content:"";background:#b8ee50;border-radius:50%;width:5px;height:5px}.training-menu-wrap>button:disabled{opacity:.55;cursor:default}.training-popover{background:#181d19;border:1px solid #3a423b;border-radius:12px;width:275px;margin-left:-137px;padding:7px;animation:.14s menu-in;position:absolute;top:48px;left:50%;box-shadow:0 20px 55px #0000008c}.training-popover>button{color:#909891;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;grid-template-columns:31px 1fr;align-items:center;width:100%;min-height:54px;padding:7px;display:grid}.training-popover>button:hover,.training-popover>button.selected{color:#e3e8e3;background:#273123}.training-popover>button.selected{box-shadow:inset 2px 0 #b8ee50}.training-popover i{color:#6f786f;border:1px solid #3d453e;border-radius:6px;place-items:center;width:23px;height:23px;font:8px DM Mono;display:grid}.training-popover span,.training-popover strong,.training-popover small{display:block}.training-popover strong{font-size:10px}.training-popover small{color:#6f776f;margin-top:3px;font-size:8px}.training-description{display:none}.training-status{color:#687069;white-space:nowrap;align-items:center;gap:6px;font-size:8px;display:flex;position:absolute;right:clamp(20px,4vw,64px)}.training-status i{background:#555d56;border-radius:50%;width:6px;height:6px}.training-status.playing{color:#b7c9a4}.training-status.playing i{background:#b8ee50;box-shadow:0 0 8px #b8ee5099}.training-status.finished i{background:#e6b84b}@keyframes menu-in{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}.stats>div{grid-template-columns:21px auto;align-items:center;column-gap:5px;display:grid}.stats svg{color:#798179}.stats div>span{color:#797f7a;font-size:10px}.stats strong{text-align:center;color:#e9ece7;grid-column:1/3;font:500 19px/1.2 DM Mono}.stats strong small{color:#777;margin-left:2px;font-size:10px}.stats>i{background:#303431;width:1px;height:30px}.stats strong.danger{color:#ff7a67}.fretboard-scroll{scrollbar-color:#3b413c transparent;padding:4px 2px 2px;overflow-x:auto}.fret-numbers,.string-row,.markers{min-width:740px;display:grid}.fret-numbers{color:#666d67;text-align:center;margin-bottom:7px;font:10px DM Mono}.fretboard{background:linear-gradient(90deg,#171a18,#20241f 40%,#191d1a);border:1px solid #343934;border-radius:10px;min-width:740px;padding:10px 0 18px;position:relative;overflow:hidden;box-shadow:0 18px 55px #030403}.string-row{height:42px;transition:opacity .2s}.string-row.disabled{opacity:.23}.string-row.non-target-string{opacity:.42}.string-row.target-string{z-index:2;position:relative}.string-row.target-string button:not(.correct):not(.wrong){background:#b8ee5013}.string-row.target-string .string-label{color:#d7ff75;background:#2c3926;border-right-color:#b8ee50}.string-row.target-string .string-wire{background:linear-gradient(#efffc7,#91b84c,#e9ffc1);box-shadow:0 0 7px #b8ee509e}.string-label{color:#8b928c;z-index:3;cursor:pointer;background:#121513;border:0;border-right:4px solid #d7d8ca;flex-direction:column;justify-content:center;align-items:center;gap:2px;padding:0;font:10px DM Mono;display:flex;position:relative}.string-label:hover:not(:disabled){color:#d7ff75;background:#20271e}.string-label b{display:none!important}.string-label.correct b,.string-label.wrong b,.fretboard.review .string-label b,.fretboard.learning .string-label b,.fretboard.scale-mode .string-label.scale-note b,.fretboard.scale-mode .string-label.scale-root b{z-index:5;border-radius:50%;place-items:center;width:28px;height:28px;font:500 10px DM Mono;position:absolute;right:-15px;display:grid!important}.string-label>span{white-space:nowrap}.string-row button{cursor:pointer;color:#121510;background:0 0;border:0;border-right:2px solid #858a80;padding:0;position:relative}.string-row button.string-label{color:#8b928c;cursor:pointer;background:#121513;border-right:4px solid #d7d8ca;overflow:visible}.string-row button.string-label:hover:not(:disabled){color:#d7ff75;background:#20271e}.string-row button:hover:not(:disabled){background:#b8ee500b}.string-row button:hover:not(:disabled):not(.correct):not(.wrong) b{box-shadow:none;background:0 0}.string-wire{pointer-events:none;background:linear-gradient(#d9d4c5,#797b73,#e3ddcd);position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);box-shadow:0 1px 1px #070807}.string-row button b{z-index:2;border-radius:50%;place-items:center;width:28px;height:28px;margin:auto;font:500 11px DM Mono;display:grid;position:relative}.string-row button.correct b{background:#b8ee50;animation:.25s pop;box-shadow:0 0 20px #b8ee50b3}.string-row button.wrong b{color:#fff;background:#f2675a;animation:.25s shake}.string-row button.question-position{background:#b8ee501f}.string-row button.question-position b{color:#17200f;background:#d7ff75;font:600 12px DM Mono;animation:1.2s ease-in-out infinite pulse;box-shadow:0 0 22px #b8ee50b8}.string-row button.found-position b{color:#14200d;background:#80ba43;box-shadow:0 0 15px #80ba4380}.fretboard.scale-mode .string-row button.sequence-next b{color:#17200f;background:#d7ff75;animation:1.05s ease-in-out infinite pulse;box-shadow:0 0 25px #b8ee50e6}.fretboard.scale-mode .string-row button.sequence-done b{color:#e9f5d9;opacity:.7;background:#688543}.fretboard.ear-learning .string-row button.ear-revealed-position{background:#b8ee5017}.fretboard.ear-learning .string-row button.ear-revealed-position b{color:#17200f;background:#d7ff75;box-shadow:0 0 20px #b8ee50a6}.fretboard.review .string-row button b,.fretboard.learning .string-row button b{color:#161a17;background:#e3e8df;font-weight:600;box-shadow:0 2px 8px #000000a6}.fretboard.review .string-row button:hover b,.fretboard.learning .string-row button:hover b{background:#d7ff75;transform:scale(1.08)}.fretboard.review .string-row button.heat-weak{background:#f2675a40}.fretboard.review .string-row button.heat-warn{background:#ecb84929}.fretboard.review .string-row button.heat-strong{background:#91c9451f}.fretboard.realistic.review .string-row button b,.fretboard.realistic.learning .string-row button b{color:#2a170f;background:#eee4d2;border:1px solid #502b1866;box-shadow:0 2px 7px #1d0b05}.fretboard.learning .string-row button b{transition:transform .15s,background .15s}.fretboard.learning .string-row button.correct b{background:#b8ee50;box-shadow:0 0 18px #b8ee50a6}.fretboard.scale-mode .string-row button.scale-note b,.fretboard.scale-mode .string-row button.scale-root b{color:#182019;background:#e5e9e1;transition:transform .15s;box-shadow:0 2px 8px #0009}.fretboard.scale-mode .string-row button.scale-root b{color:#17200d;background:#b8ee50;box-shadow:0 0 15px #b8ee506b}.fretboard.scale-mode .string-row button:hover b{transform:scale(1.12)}.fretboard.realistic.scale-mode .string-row button.scale-note b{color:#2c180f;background:#eee5d3}.markers{height:16px}.markers span{justify-content:center;align-items:flex-end;display:flex}.markers i{background:#656b65;border-radius:50%;width:6px;height:6px}.markers i.double{background:0 0;box-shadow:-7px 0 #656b65,7px 0 #656b65}.fretboard.realistic{background-color:#3b2117;background-image:linear-gradient(90deg,#14080480,#0000 10%,#ffbe6e0d 48%,#10060373),repeating-linear-gradient(2deg,#0000 0 7px,#0c04022e 8px,#d2874b0f 9px,#0000 11px),linear-gradient(#563425,#301a13 48%,#4a2a1e);border-color:#76513d;box-shadow:inset 0 2px #ffd3a71c,inset 0 -3px #08020159,0 20px 60px #020202}.fretboard.realistic .string-label{color:#c1a998;background:linear-gradient(90deg,#17100c,#291812);border-right:5px solid #ddd3bd;box-shadow:2px 0 4px #0000008c}.fretboard.realistic .string-row button{border-right:4px ridge #c8c1ae}.fretboard.realistic .string-row button:hover:not(:disabled){background:#ffdeae14}.fretboard.realistic .string-wire{background:linear-gradient(#f4ead4 0%,#9f9685 35%,#423d37 53%,#c9c0ac 70%,#eee4d0 100%);box-shadow:0 1px 2px #100704}.fretboard.realistic .markers i{background:radial-gradient(circle at 35% 30%,#fffdf0,#c7beaa 45%,#877e70);width:9px;height:9px;box-shadow:inset 0 0 2px #554d45,0 1px 2px #160a06}.fretboard.realistic .markers i.double{background:0 0;box-shadow:-8px 0 #d4cbb8,8px 0 #d4cbb8}.fretboard.realistic .string-row button.correct b{color:#14200b;background:#c7f75f}.fretboard.realistic .string-row button.wrong b{background:#ff6657}.game-actions{text-align:center;padding:12px 0 46px}.game-actions p{color:#69706a;margin-top:12px;font-size:10px}.note-answers{grid-template-columns:repeat(12,1fr);gap:5px;margin:14px 2px 8px;display:grid}.note-answers button{color:#d5dad5;cursor:pointer;background:#1d221e;border:1px solid #363d37;border-radius:8px;height:42px;font:500 11px DM Mono}.note-answers button:hover{color:#d7ff75;background:#293323;border-color:#86a64a}.weak-review{background:#171b18;border:1px solid #303631;border-radius:14px;margin:18px 2px 4px;padding:18px}.weak-review-head{justify-content:space-between;align-items:flex-end;margin-bottom:14px;display:flex}.weak-review-head>div>span{color:#6f776f;letter-spacing:1px;font-size:8px}.weak-review h3{margin:3px 0 0;font-size:16px}.heat-legend{gap:10px;display:flex}.heat-legend span{color:#777f78;align-items:center;gap:4px;font-size:8px;display:flex}.heat-legend i{border-radius:50%;width:7px;height:7px}.heat-legend i.good{background:#91c945}.heat-legend i.medium{background:#ecb849}.heat-legend i.weak{background:#f2675a}.weak-list{grid-template-columns:repeat(5,1fr);gap:7px;display:grid}.weak-list>div{background:#202420;border:1px solid #313732;border-radius:9px;grid-template-columns:22px 1fr auto;align-items:center;padding:10px;display:grid}.weak-list strong{color:#626a63;grid-row:1/3;font:9px DM Mono}.weak-list span{color:#b4bab5;font-size:9px}.weak-list b{color:#f58a7f;font:500 13px DM Mono}.weak-list em{color:#d9ddd9;font:500 11px DM Mono}.weak-list small{color:#687069;font-size:7px}.no-history{text-align:center;color:#717972;margin:0;padding:10px 0;font-size:9px}.primary{color:#12170c;cursor:pointer;background:#b8ee50;border:0;border-radius:12px;justify-content:center;align-items:center;gap:9px;min-width:190px;height:48px;padding:0 22px;font-weight:800;transition:transform .18s,background .18s;display:inline-flex;box-shadow:0 10px 30px #90be3421}.primary:hover{background:#c8fa67;transform:translateY(-2px)}.primary span{border-left:1px solid #141e0a40;padding-left:10px;font-size:10px}.quit{color:#9ca29d;cursor:pointer;background:0 0;border:1px solid #3a3f3b;border-radius:10px;height:40px;padding:0 20px}footer{color:#535955;text-transform:uppercase;letter-spacing:1px;border-top:1px solid #242825;flex:0 0 34px;justify-content:space-between;align-items:center;height:34px;min-height:34px;margin-top:auto;padding:0 clamp(20px,4vw,64px);font-size:8px;display:flex}.modal-backdrop{z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#030504bd;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#171b18;border:1px solid #343a35;border-radius:20px;width:min(430px,100%);padding:28px;position:relative;box-shadow:0 30px 100px #000}.modal-close{color:#959c96;cursor:pointer;background:#242824;border:0;border-radius:9px;place-items:center;width:34px;height:34px;display:grid;position:absolute;top:17px;right:17px}.modal-icon{color:#b8ee50;background:#2b3725;border-radius:11px;place-items:center;width:42px;height:42px;display:grid}.modal h2{margin:15px 0 4px;font-size:20px}.modal>p{color:#737a74;margin:0 0 28px;font-size:12px}.field-label{color:#959c96;justify-content:space-between;margin-bottom:12px;font-size:12px;display:flex}.field-label strong{color:#d8ddd8;font:500 12px DM Mono}.modal input{accent-color:#b8ee50;width:100%}.strings-title{margin-top:28px}.string-toggles{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.string-toggles button{color:#747b75;cursor:pointer;background:#202420;border:1px solid #343a35;border-radius:9px;height:38px;font:10px DM Mono}.string-toggles button.selected{color:#d7ff75;background:#2a3424;border-color:#6c843e}.modal-save{width:100%;margin-top:28px}.board-style-title{margin-top:25px}.board-style-options{grid-template-columns:1fr 1fr;gap:9px;display:grid}.board-style-options>button{text-align:left;color:#929992;cursor:pointer;background:#202420;border:1px solid #343a35;border-radius:11px;padding:8px}.board-style-options>button.selected{background:#283222;border-color:#779345}.board-style-options strong,.board-style-options small{margin:7px 2px 0;display:block}.board-style-options strong{color:#d9ddd9;font-size:10px}.board-style-options small{color:#747b75;margin-top:2px;font-size:8px}.style-preview{border-radius:6px;flex-direction:column;justify-content:space-around;height:34px;display:flex;position:relative;overflow:hidden}.practice-preview{background:#191d1a}.wood-preview{background:repeating-linear-gradient(2deg,#0000 0 6px,#14050240 7px),linear-gradient(90deg,#402218,#6a402b,#392016)}.style-preview i{background:#b8b7ae;height:1px;box-shadow:0 1px #333}.wood-preview:after{content:"";background:#bbb5a7;width:3px;position:absolute;top:0;bottom:0;right:28%}@keyframes pop{50%{transform:scale(1.3)}}@keyframes shake{30%{transform:translate(-4px)}70%{transform:translate(4px)}}@keyframes pulse{50%{transform:scale(1.14);box-shadow:0 0 30px #b8ee50d9}}@media (width<=700px){nav{display:none}.topbar{padding:0 16px}.topbar{flex-wrap:wrap;height:auto;min-height:68px;padding:10px 16px 0}.topbar nav{order:3;justify-content:center;width:100%;height:42px;display:flex;overflow-x:auto}.topbar nav button{white-space:nowrap;padding:0 13px}.topbar nav button:disabled{display:none}.topbar nav .nav-active:after{left:12px;right:12px}.settings-btn{justify-content:center;width:36px;padding:0;font-size:0}.hero{min-height:210px;padding-top:30px}.game-wrap{padding:0 12px}.stats{margin-bottom:16px}.fretboard-scroll{margin:0 -12px;padding-left:12px}.string-label{position:sticky;left:0}.target-note{font-size:58px}footer span:last-child{display:none}.string-toggles{grid-template-columns:repeat(2,1fr)}.input-copy{flex:1;min-width:0}.pitch-monitor{grid-template-columns:40px 28px}.input-panel select{display:none}.connect-btn{padding:0 9px}.input-panel{gap:7px}.input-copy span{display:none}.calibration{grid-template-columns:1fr;gap:18px}.input-panel.expanded .pitch-monitor{margin-left:49px}.calibrate-btn{padding:0 8px}}@media (width<=1520px){.input-panel.input-float{grid-template-columns:38px 1fr auto;align-items:center;width:min(360px,100%);margin:0 0 18px auto;display:grid;position:static}.input-panel.input-float.expanded{width:min(420px,100%)}.input-float .input-symbol{align-self:auto}.input-float .input-copy{text-align:left}.input-float .pitch-monitor,.input-float .calibration{grid-column:1/-1}.input-float .connect-btn,.input-float .calibrate-btn{width:auto}}@media (width<=700px){.input-panel.input-float{grid-template-columns:38px 1fr auto;width:100%}.input-panel.input-float.expanded{width:100%;max-height:none;overflow:visible}.input-float .pitch-monitor,.input-float.expanded .pitch-monitor{margin:5px 0}}@media (width<=900px){.weak-list{grid-template-columns:repeat(2,1fr)}}@media (width<=520px){.weak-review-head{align-items:flex-start;gap:10px}.heat-legend{flex-direction:column;gap:3px}.weak-list{grid-template-columns:1fr}}@media (width<=700px){.training-subnav{gap:3px;height:50px;padding:0 8px}.current-training{width:auto;padding:0 8px}.current-training span{display:none}.current-training strong{font-size:9px}.training-menus{padding-left:0}.training-menu-wrap>button{padding:0 6px;font-size:8px}.training-description,.training-status{display:none}.training-popover{width:auto;margin-left:0;position:fixed;top:118px;left:12px;right:12px}.note-answers{grid-template-columns:repeat(6,1fr)}.scale-controls{flex-wrap:wrap}.scale-controls label{flex:1}.scale-controls select{flex:1;min-width:0}.scale-controls>button{order:3}.scale-legend{order:4;margin-left:auto}.scale-heading strong{font-size:24px}}.solfege-lesson{grid-template-columns:1.05fr .95fr;gap:34px;padding:34px;display:grid}.solfege-guide h2{margin:10px 0;font-size:25px}.solfege-guide>p{color:#8d958e;font-size:11px;line-height:1.8}.solfege-map{grid-template-columns:repeat(7,1fr);gap:5px;margin-top:20px;display:grid}.solfege-map button{color:#dce0dc;cursor:pointer;background:#202521;border:1px solid #363d37;border-radius:9px;min-width:0;height:82px}.solfege-map button:hover{background:#293223;border-color:#8cab4c}.solfege-map strong,.solfege-map span,.solfege-map small{display:block}.solfege-map strong{font:500 15px DM Mono}.solfege-map span{color:#d7ff75;margin:4px 0;font:600 19px DM Mono}.solfege-map small{color:#7d857e;font-size:7px}.solfege-quiz{background:#111412;border:1px solid #394039;border-radius:15px;padding:22px}.quiz-top{color:#757d76;justify-content:space-between;align-items:center;font-size:9px;display:flex}.quiz-top>span{color:#b8ee50;letter-spacing:1px}.quiz-top strong{color:#e2e6e2;margin-left:5px;font:500 13px DM Mono}.solfege-quiz>p{text-align:center;color:#7f877f;margin:26px 0 8px;font-size:10px}.quiz-prompt{color:#d7ff75;flex-direction:column;justify-content:center;align-items:center;height:86px;font:500 55px DM Mono;display:flex}.quiz-prompt strong{font:inherit}.quiz-prompt small{color:#7e867f;margin-top:3px;font:9px Noto Sans SC}.quiz-answers{grid-template-columns:repeat(7,1fr);gap:5px;margin-top:15px;display:grid}.quiz-answers button{color:#d8ddd8;cursor:pointer;background:#202421;border:1px solid #363d37;border-radius:8px;height:42px;font:500 13px DM Mono}.quiz-answers button:hover{color:#d7ff75;border-color:#779346}.quiz-answers button.right{color:#15200e;background:#b8ee50;border-color:#b8ee50}.quiz-answers button.wrong{color:#fff;background:#ec6559;border-color:#ec6559}.quiz-hint{text-align:center;color:#626a63;margin-top:15px;font-size:8px;display:block}@media (width<=700px){.notes-lesson,.interval-lesson{grid-template-columns:1fr;gap:20px;padding:20px}.chromatic-notes,.interval-grid{grid-template-columns:repeat(3,1fr)}.theory-tabs button{flex:1;padding:0 8px}.theory-panel{margin-bottom:25px}.solfege-lesson{grid-template-columns:1fr;padding:20px}.solfege-map{grid-template-columns:repeat(7,minmax(38px,1fr));overflow-x:auto}.theory-tabs button{font-size:9px}.solfege-map button{height:70px}}.chord-panel{width:100%;max-width:1120px;margin:0 auto 45px}.chord-controls{background:#181c19;border:1px solid #343a35;border-radius:14px;align-items:center;gap:12px;padding:14px;display:flex}.chord-controls label{color:#798079;align-items:center;gap:7px;font-size:9px;display:flex}.chord-controls select{color:#dde1dd;background:#222723;border:1px solid #3b423c;border-radius:9px;height:38px;padding:0 28px 0 10px}.chord-theory{gap:22px;margin-left:auto;display:flex}.chord-theory span{color:#737b74;font-size:9px}.chord-theory strong{color:#d7ff75;margin-top:4px;font:500 12px DM Mono;display:block}.derivation-note{color:#a8afa9;background:#1a2018;border-left:2px solid #b8ee50;align-items:center;gap:11px;margin:14px 0 20px;padding:12px 15px;display:flex}.derivation-note svg{color:#b8ee50}.derivation-note strong,.derivation-note span{display:block}.derivation-note strong{font-size:11px}.derivation-note span{color:#747c75;margin-top:3px;font-size:9px}.chord-results{grid-template-columns:repeat(4,1fr);gap:12px;display:grid}.chord-card{background:#181c19;border:1px solid #343a35;border-radius:14px;padding:13px;transition:transform .16s,border-color .16s}.chord-card:hover{border-color:#526341;transform:translateY(-2px)}.chord-card-head{justify-content:space-between;align-items:center;display:flex}.chord-card-head strong{color:#e9ede9;font:500 19px DM Mono}.chord-card-head span{color:#737a74;font-size:8px}.chord-card svg{width:100%;max-height:225px;margin:4px auto;display:block}.diagram-string{stroke:#9ba19b;stroke-width:1px}.diagram-fret{stroke:#666d67;stroke-width:1px}.diagram-nut{stroke:#e5e6da;stroke-width:5px}.finger-dot{fill:#b8ee50;stroke:#dfff9c;stroke-width:1px}.open-string{fill:none;stroke:#cdd2cd;stroke-width:1.5px}.mute{fill:#737b74;text-anchor:middle;font:15px DM Mono}.fret-offset{fill:#7e867f;font:8px DM Mono}.tone-name,.root-name{fill:#8b938c;text-anchor:middle;font:9px DM Mono}.root-name{fill:#d7ff75;font-weight:600}.chord-card>button{color:#d7ff75;cursor:pointer;background:#242b22;border:1px solid #3b443b;border-radius:8px;justify-content:center;align-items:center;gap:6px;width:100%;height:35px;font-size:9px;display:flex}.no-voicing{text-align:center;color:#7c847d;border:1px dashed #394039;border-radius:14px;grid-column:1/-1;padding:60px}.algorithm-credit{text-align:right;color:#555d56;margin-top:14px;font-size:8px}.chord-input-box{background:linear-gradient(135deg,#20291d,#171c18);border:1px solid #44523b;border-radius:15px;grid-template-columns:1fr 1fr;gap:14px 30px;margin-bottom:12px;padding:24px;display:grid;box-shadow:inset 0 1px #d8ff8e0a}.chord-input-box h2{margin:7px 0 4px;font-size:20px}.chord-input-box p{color:#788078;margin:0;font-size:9px}.chord-input-box form{grid-template-columns:1fr auto;align-content:center;display:grid;position:relative}.chord-input-box input{color:#d7ff75;background:#111511;border:1px solid #4a5841;border-radius:10px 0 0 10px;outline:none;height:48px;padding:0 16px;font:500 20px DM Mono}.chord-input-box input:focus{border-color:#8aab4a}.chord-input-box form>button{color:#17200f;cursor:pointer;background:#b8ee50;border:0;border-radius:0 10px 10px 0;padding:0 17px;font-weight:700}.chord-input-box form small{color:#ff7c70;font-size:8px;position:absolute;top:52px;left:3px}.input-examples{border-top:1px solid #30382e;grid-column:1/-1;align-items:center;gap:6px;padding-top:11px;display:flex}.input-examples span,.preset-label{color:#6e766f;margin-right:3px;font-size:8px}.input-examples button{color:#aeb6ae;cursor:pointer;background:#242b22;border:1px solid #3d473a;border-radius:7px;height:27px;font:9px DM Mono}.input-examples button:hover{color:#d7ff75;border-color:#758c49}.preset-label{white-space:nowrap}@media (width<=900px){.chord-results{grid-template-columns:repeat(2,1fr)}.chord-controls{flex-wrap:wrap}.chord-theory{width:100%;margin-left:0}.algorithm-credit{text-align:left}}@media (width<=700px){.chord-input-box{grid-template-columns:1fr;padding:18px}.chord-input-box form{grid-column:1}.input-examples{overflow-x:auto}.chord-input-box input{min-width:0}}@media (width<=520px){.chord-results{grid-template-columns:1fr}.chord-controls label{justify-content:space-between;width:100%}.chord-controls select{max-width:70%}}@media (width<=700px){.learning-toolbar{flex-wrap:wrap}.ear-learning-actions{order:3;width:100%}.ear-learning-actions button{flex:1;justify-content:center}.ear-learning-hint{margin-left:auto}}@media (width<=850px){.ear-note-grid{grid-template-columns:repeat(6,1fr)}.ear-focus{grid-template-columns:repeat(2,1fr)}.ear-focus-note{grid-row:span 2}.learning-method{display:none}}@media (width<=520px){.ear-lab{padding:18px 12px}.ear-note-grid{grid-template-columns:repeat(4,1fr)}.ear-focus{grid-template-columns:1fr}.ear-focus-note{grid-row:auto}.ear-lab-footer{align-items:flex-start;gap:12px}.ear-lab-footer button{white-space:nowrap}}.ear-course-nav{background:#111411;border:1px solid #303732;border-radius:14px;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:7px;margin-bottom:30px;padding:6px;display:grid}.ear-course-nav>button{color:#7b837c;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:10px;align-items:center;gap:10px;min-width:0;height:58px;padding:0 13px;transition:background .16s,border-color .16s,color .16s;display:flex}.ear-course-nav>button:hover{color:#cbd1cb;background:#1c211d}.ear-course-nav>button.active{color:#e8ede8;background:#263020;border-color:#4c5d3e;box-shadow:inset 0 1px #d7ff750d}.ear-course-nav i{color:#8c948d;background:#252b26;border-radius:50%;flex:0 0 27px;place-items:center;width:27px;height:27px;font:500 8px DM Mono;display:grid}.ear-course-nav .active i{color:#15200e;background:#b8ee50}.ear-course-nav span,.ear-course-nav strong,.ear-course-nav small{min-width:0;display:block}.ear-course-nav strong{font-size:10px}.ear-course-nav small{color:#6f776f;white-space:nowrap;margin-top:4px;font-size:8px}.ear-course-nav .ear-library-tab{color:#767e77;white-space:nowrap;text-align:center;border-left:1px solid #343a35;height:58px;padding:0 15px;font-size:8px}.ear-course-nav .ear-library-tab.active{color:#d7ff75;border:1px solid #4c5d3e}.ear-course-content{max-width:980px;margin:0 auto}.ear-course-content .ear-lab-intro{margin-bottom:28px}.lesson-number{color:#a6d64c;letter-spacing:1.5px;font:500 8px DM Mono}.ear-concept-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;display:grid}.ear-concept-grid article{background:#1c211d;border:1px solid #343b35;border-radius:14px;min-width:0;padding:20px}.ear-concept-grid article>span{color:#9ac14d;letter-spacing:.8px;font-size:8px}.ear-concept-grid h3{margin:8px 0 5px;font-size:18px}.ear-concept-grid p{color:#747c75;min-height:34px;margin:0 0 17px;font-size:9px;line-height:1.7}.ear-concept-grid button{color:#cbd1cb;cursor:pointer;background:#252d23;border:1px solid #3a4438;border-radius:8px;justify-content:center;align-items:center;gap:7px;width:100%;height:35px;margin-top:6px;font-size:8px;display:flex}.ear-concept-grid button:hover{color:#d7ff75;background:#2b3526;border-color:#819c4c}.degree-list{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;display:grid}.degree-list button{color:#d8ddd8;text-align:center;cursor:pointer;background:#1c211d;border:1px solid #343b35;border-radius:12px;flex-direction:column;align-items:center;min-width:0;min-height:132px;padding:15px 9px;display:flex}.degree-list button:hover{background:#252f21;border-color:#7c9848;transform:translateY(-2px)}.degree-list i{color:#15200e;background:#b8ee50;border-radius:50%;place-items:center;width:34px;height:34px;font:600 14px DM Mono;display:grid}.degree-list span,.degree-list strong,.degree-list small{display:block}.degree-list span{min-width:0;margin:10px 0 8px}.degree-list strong{font:500 12px DM Mono}.degree-list small{color:#737b74;margin-top:5px;font-size:7px;line-height:1.45}.degree-list svg{color:#829a50;margin-top:auto}.fretboard-course{text-align:center}.mapping-steps{grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:12px;max-width:760px;margin:5px auto 24px;display:grid}.mapping-steps>div{background:#1c211d;border:1px solid #343b35;border-radius:14px;flex-direction:column;align-items:center;min-height:128px;padding:19px 12px;display:flex}.mapping-steps i{color:#d7ff75;background:#2c3826;border-radius:50%;place-items:center;width:31px;height:31px;font:500 10px DM Mono;display:grid}.mapping-steps strong{margin:10px 0 5px;font-size:14px}.mapping-steps span{color:#747c75;font-size:8px;line-height:1.5}.mapping-steps>b{color:#59625a;font:400 15px DM Mono}.start-ear-test{color:#15200e;cursor:pointer;background:#b8ee50;border:0;border-radius:10px;justify-content:center;align-items:center;gap:8px;height:44px;padding:0 21px;font-size:10px;font-weight:800;display:inline-flex;box-shadow:0 10px 28px #90be3421}.start-ear-test:hover{background:#c8fa67;transform:translateY(-1px)}@media (width<=850px){.ear-course-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.ear-course-nav .ear-library-tab{border-left:0}.ear-concept-grid{grid-template-columns:1fr}.ear-concept-grid p{min-height:0}.degree-list{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (width<=520px){.ear-course-nav{grid-template-columns:1fr 1fr;margin-bottom:22px}.ear-course-nav>button{height:54px;padding:0 9px}.ear-course-nav small{display:none}.ear-course-nav .ear-library-tab{height:54px;padding:0 7px}.degree-list{grid-template-columns:repeat(2,minmax(0,1fr))}.mapping-steps{grid-template-columns:1fr;gap:7px}.mapping-steps>div{min-height:105px}.mapping-steps>b{display:none}.start-ear-test{width:100%}}.live-map-btn{color:#aab1ab;white-space:nowrap;cursor:pointer;background:#202620;border:1px solid #47513f;border-radius:8px;height:32px;padding:0 10px;font-size:8px}.live-map-btn:hover{color:#d7ff75;border-color:#829c50}.live-map-btn.active{color:#d7ff75;background:#2d3a25;border-color:#91ba4e;box-shadow:0 0 0 2px #b8ee5014}.input-recorder{background:#171b18;border:1px solid #343b35;border-radius:9px;width:100%;padding:8px}.recorder-head{align-items:center;gap:6px;height:18px;display:flex}.recorder-head .recording-dot{background:#626a63;border-radius:50%;width:6px;height:6px}.recorder-head strong{color:#aeb5af;font-size:8px}.recorder-head time{color:#798179;margin-left:auto;font:8px DM Mono}.input-recorder.recording{background:#211817;border-color:#69413d}.input-recorder.recording .recording-dot{background:#ff695d;animation:1s infinite record-blink;box-shadow:0 0 0 4px #ff695d1a}.input-recorder>button{cursor:pointer;border:0;border-radius:6px;justify-content:center;align-items:center;gap:6px;width:100%;height:29px;margin-top:5px;font-size:8px;display:flex}.record-start{color:#d7ff75;background:#2d3827}.record-stop{color:#fff;background:#ff6d60}.recording-result{grid-template-columns:minmax(0,1fr) 29px 29px;gap:4px;margin-top:5px;display:grid}.recording-result audio{width:100%;min-width:0;height:29px}.recording-result a,.recording-result button{color:#aeb5af;cursor:pointer;background:#252b26;border:1px solid #3c443d;border-radius:6px;place-items:center;height:29px;display:grid}.recording-result a:hover{color:#d7ff75;border-color:#718746}.recording-result button:hover{color:#ff8175;border-color:#70433f}@keyframes record-blink{50%{opacity:.35}}.fretboard .string-row button.live-pitch-position{z-index:3;box-shadow:none;background:0 0}.fretboard .string-row button.live-pitch-position b{color:#14200d;background:#d7ff75;border-radius:50%;place-items:center;min-width:29px;height:29px;padding:0 6px;animation:.75s ease-in-out infinite alternate live-note-pulse;display:grid;box-shadow:0 0 0 5px #b8ee501f,0 0 25px #b8ee5080}.fretboard.realistic .string-row button.live-pitch-position{box-shadow:none;background:0 0}.interval-learning-panel{background:linear-gradient(140deg,#1c231d,#121612);border:1px solid #354036;border-radius:18px;margin:0 0 18px;padding:24px;box-shadow:0 18px 45px #0003}.interval-lesson-copy{text-align:center;max-width:620px;margin:0 auto 22px}.interval-lesson-copy h2{margin:8px 0;font-size:22px}.interval-lesson-copy p{color:#7d867e;margin:0;font-size:10px;line-height:1.7}.interval-lesson-controls{grid-template-columns:1.4fr 1fr;gap:13px;display:grid}.interval-lesson-controls>div{background:#181d19;border:1px solid #343d35;border-radius:12px;padding:14px}.interval-lesson-controls>div>span{color:#879083;letter-spacing:.8px;margin-bottom:9px;font-size:8px;display:block}.interval-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;display:grid}.interval-choice-grid button,.string-pair-choice button{color:#aeb6af;cursor:pointer;background:#232923;border:1px solid #3c463d;border-radius:8px}.interval-choice-grid button{flex-direction:column;justify-content:center;align-items:center;gap:3px;height:50px;display:flex}.interval-choice-grid b{font:500 13px DM Mono}.interval-choice-grid small{font-size:7px}.interval-choice-grid button.active,.string-pair-choice button.active{color:#d7ff75;background:#2d3a25;border-color:#9dcd50;box-shadow:inset 0 0 0 1px #b8ee501a}.string-pair-choice{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;display:grid}.string-pair-choice button{height:32px;font:500 9px DM Mono}.interval-explanation{background:#20281f;border:1px solid #3c493b;border-radius:12px;grid-template-columns:180px 1fr auto;align-items:center;gap:18px;margin-top:13px;padding:16px;display:grid}.interval-explanation span,.interval-explanation strong,.interval-explanation small{display:block}.interval-explanation span{color:#899385;font-size:8px}.interval-explanation strong{color:#d7ff75;margin:4px 0;font:500 20px DM Mono}.interval-explanation small{color:#7c877c;font-size:8px}.interval-explanation p{color:#aab2aa;margin:0;font-size:9px;line-height:1.7}.interval-explanation p b{color:#80ddeb;font-family:DM Mono}.interval-explanation>button{color:#a7edf7;white-space:nowrap;cursor:pointer;background:#20363a;border:1px solid #78b8c4;border-radius:8px;align-items:center;gap:6px;height:36px;padding:0 12px;font-size:8px;display:flex}.interval-explanation>button:hover{background:#29454a}.fretboard.interval-learning .string-row button.interval-anchor-position{background:#b8ee5014}.fretboard.interval-learning .string-row button.interval-anchor-position b{color:#17200f;background:#b8ee50;display:grid;box-shadow:0 0 0 5px #b8ee501c,0 0 22px #b8ee5080}.fretboard.interval-learning .string-row button.interval-target-position{background:#70d3e614}.fretboard.interval-learning .string-row button.interval-target-position b{color:#122126;background:#7cd9e9;display:grid;box-shadow:0 0 0 5px #7cd9e91a,0 0 22px #7cd9e973}.fretboard.realistic.interval-learning .string-row button.interval-anchor-position b{border:1px solid #d8ff86}.fretboard.realistic.interval-learning .string-row button.interval-target-position b{border:1px solid #b4f3fa}.drum-machine{background:linear-gradient(145deg,#1a211b,#101411);border:1px solid #354037;border-radius:19px;max-width:1040px;margin:0 auto 42px;padding:26px;box-shadow:0 22px 65px #00000042}.drum-head{justify-content:space-between;align-items:center;gap:20px;display:flex}.drum-head span,.drum-presets>span{color:#9bc64e;letter-spacing:1.2px;font:500 8px DM Mono}.drum-head h2{margin:8px 0 5px;font-size:25px}.drum-head p{color:#7c857e;margin:0;font-size:9px}.drum-transport{align-items:center;gap:6px;display:flex}.drum-transport button{color:#c5cdc6;cursor:pointer;background:#252d26;border:1px solid #3f4a40;border-radius:8px;min-width:34px;height:36px;padding:0 9px}.drum-transport strong{text-align:center;color:#d7ff75;min-width:66px;font:500 19px DM Mono}.drum-transport strong small{color:#788278;margin-left:3px;font-size:7px}.drum-transport .start,.drum-transport .stop{color:#16200e;border:0;align-items:center;gap:6px;margin-left:5px;font-weight:800;display:flex}.drum-transport .start{background:#b8ee50}.drum-transport .stop{color:#2a130f;background:#ed8377}.drum-presets{align-items:center;gap:7px;margin:24px 0 14px;display:flex}.drum-presets button{color:#aeb7af;cursor:pointer;background:#222923;border:1px solid #3a453b;border-radius:7px;height:29px;padding:0 10px;font-size:8px}.drum-presets button:hover{color:#d7ff75;border-color:#85a74b}.drum-grid{background:#121712;border:1px solid #303932;border-radius:14px;padding:16px}.drum-row{grid-template-columns:50px repeat(16,minmax(0,1fr));align-items:center;gap:5px;display:grid}.drum-row+.drum-row{margin-top:7px}.drum-row>strong{color:#aeb7af;font-size:9px}.drum-row button{color:#687267;cursor:pointer;background:#202720;border:1px solid #343e35;border-radius:6px;height:37px;font:500 8px DM Mono}.drum-row button.beat{border-color:#526050}.drum-row button.on{color:#17200f;background:#7caa43;border-color:#b8ee50;box-shadow:inset 0 0 0 1px #e0ffaa40}.drum-row button.playing{outline-offset:1px;outline:2px solid #85ddea}.drum-tip{background:#202820;border-radius:10px;gap:14px;margin-top:15px;padding:13px 15px;display:flex}.drum-tip strong{color:#d7ff75;white-space:nowrap;font-size:9px}.drum-tip span{color:#7f8980;font-size:8px;line-height:1.6}.metronome-card{background:linear-gradient(110deg,#20291f,#171d17);border:1px solid #3a4739;border-radius:15px;grid-template-columns:138px 1fr auto;align-items:center;gap:20px;margin:22px 0;padding:16px 20px;display:grid}.metronome-body{background:linear-gradient(90deg,#5d402a,#9b7045 48%,#563722);border:4px solid #b9a27b;border-bottom-width:9px;border-radius:42px 42px 12px 12px;width:78px;height:112px;margin:auto;position:relative;overflow:hidden}.metronome-body:before{content:"";transform-origin:50% 78px;background:#2a1b12;border-radius:8px;width:8px;height:82px;position:absolute;top:16px;left:33px}.metronome-body i{z-index:1;background:#d7c098;border-radius:6px;width:25px;height:8px;position:absolute;top:10px;left:25px}.metronome-body b{z-index:2;background:#e8d3aa;border-radius:50%;width:8px;height:8px;position:absolute;bottom:9px;left:33px}.metronome-body em{background:#ffe5b759;height:1px;position:absolute;bottom:24px;left:12px;right:12px}.metronome-body.swinging:before{animation:metro-swing var(--swing-duration) ease-in-out infinite alternate}.metronome-card>div:nth-child(2)>span{color:#9bc64e;letter-spacing:1px;font:500 8px DM Mono}.metronome-card h3{color:#e6ebe5;margin:7px 0 5px;font-size:16px}.metronome-card p{color:#808a80;margin:0;font-size:8px}.metro-beats{gap:5px;margin-top:10px;display:flex}.metro-beats i{color:#7e887e;border:1px solid #455044;border-radius:50%;place-items:center;width:21px;height:21px;font:500 8px DM Mono;display:grid}.metro-beats i.active{color:#17200f;background:#b8ee50;border-color:#b8ee50;box-shadow:0 0 12px #b8ee506b}.metronome-card>button{cursor:pointer;border:0;border-radius:8px;align-items:center;gap:6px;height:37px;padding:0 12px;font-size:9px;font-weight:800;display:flex}.metro-start{color:#17200f;background:#b8ee50}.metro-stop{color:#2a130f;background:#ed8377}@keyframes metro-swing{0%{transform:rotate(-24deg)}to{transform:rotate(24deg)}}@media (width<=700px){.interval-learning-panel{padding:18px 12px}.interval-lesson-controls{grid-template-columns:1fr}.interval-explanation{grid-template-columns:1fr;gap:10px}.interval-explanation>button{justify-content:center;width:100%}.drum-machine{padding:18px 12px}.drum-head{flex-direction:column;align-items:flex-start}.drum-transport{width:100%}.drum-transport .start,.drum-transport .stop{margin-left:auto}.metronome-card{grid-template-columns:100px 1fr;gap:12px;padding:14px}.metronome-card>button{grid-column:1/-1;justify-content:center;width:100%}.drum-presets{padding-bottom:3px;overflow-x:auto}.drum-presets>*{flex:none}.drum-grid{overflow-x:auto}.drum-row{min-width:650px}.drum-tip{flex-direction:column;align-items:flex-start;gap:5px}.hero{min-height:175px;padding-top:24px}.hero h1{margin-top:0}}.fretboard.interval-learning .string-row button b{color:#161a17;background:#e3e8df;font-weight:600;box-shadow:0 2px 8px #000000ad}.fretboard.realistic.interval-learning .string-row button b{color:#2a170f;background:#eee4d2;border:1px solid #502b1866}.caged-learning-panel{background:linear-gradient(145deg,#1b231c,#111512);border:1px solid #354036;border-radius:18px;max-width:900px;margin:0 auto 42px;padding:26px}.caged-intro{text-align:center;max-width:610px;margin:0 auto 22px}.caged-intro h2{margin:8px 0;font-size:23px}.caged-intro p{color:#7d877e;margin:0;font-size:10px;line-height:1.75}.caged-tabs{grid-template-columns:repeat(5,1fr);gap:7px;margin-bottom:14px;display:grid}.caged-tabs button{color:#adb6ae;cursor:pointer;background:#202720;border:1px solid #39443a;border-radius:10px;height:58px}.caged-tabs strong,.caged-tabs small{display:block}.caged-tabs strong{font:500 20px DM Mono}.caged-tabs small{margin-top:3px;font-size:7px}.caged-tabs button.active{color:#d7ff75;background:#2c3925;border-color:#a8d657;box-shadow:inset 0 0 0 1px #b8ee501f}.caged-stage{background:#171c18;border:1px solid #354036;border-radius:14px;grid-template-columns:255px 1fr;align-items:center;gap:28px;padding:19px 25px;display:grid}.caged-diagram{background:#222a22;border-radius:10px;place-items:center;padding:5px;display:grid}.caged-diagram svg{width:175px;max-width:100%;height:auto}.caged-root-dot{fill:#b8ee50;stroke:#e5ffc0;stroke-width:2px}.caged-copy>span{color:#9bc64e;letter-spacing:1px;font:500 8px DM Mono}.caged-copy h3{margin:8px 0;font-size:21px}.caged-copy p{color:#8d968e;max-width:430px;margin:0;font-size:10px;line-height:1.7}.caged-tones{align-items:center;gap:6px;margin:15px 0;display:flex}.caged-tones i{color:#d7ff75;background:#34402d;border-radius:50%;place-items:center;width:22px;height:22px;font:500 9px DM Mono;display:grid}.caged-tones span{color:#dce2dc;margin-right:8px;font:500 12px DM Mono}.caged-copy button{color:#16200e;cursor:pointer;background:#b8ee50;border:0;border-radius:8px;align-items:center;gap:7px;height:37px;padding:0 13px;font-size:9px;font-weight:800;display:flex}.caged-flow{color:#7d877e;justify-content:center;align-items:center;gap:10px;margin-top:17px;font-size:8px;display:flex}.caged-flow strong{color:#d7ff75;font-size:9px}.caged-flow b{color:#536050;font:500 13px DM Mono}@media (width<=700px){.caged-learning-panel{padding:18px 12px}.caged-tabs{gap:4px}.caged-tabs button{height:51px}.caged-tabs strong{font-size:17px}.caged-tabs small{font-size:6px}.caged-stage{grid-template-columns:1fr;gap:16px;padding:15px}.caged-diagram svg{width:155px}.caged-flow{flex-wrap:wrap;gap:6px}.caged-flow strong{text-align:center;width:100%;margin-bottom:3px}}.caged-learning-panel{box-sizing:border-box;width:100%;max-width:none;margin-left:0;margin-right:0}.caged-map-lesson{box-sizing:border-box;background:linear-gradient(145deg,#182019,#101411);border:1px solid #394439;border-radius:18px;width:100%;margin:0 0 42px;padding:22px 26px}.caged-map-head{justify-content:space-between;align-items:flex-end;gap:20px;display:flex}.caged-map-head span{color:#9bc64e;letter-spacing:1.3px;font:500 8px DM Mono}.caged-map-head h3{margin:7px 0 5px;font-size:18px}.caged-map-head p{color:#7e887f;max-width:680px;margin:0;font-size:9px;line-height:1.7}.caged-map-head button{color:#d7ff75;cursor:pointer;background:#263421;border:1px solid #577140;border-radius:8px;flex:none;align-items:center;gap:6px;height:34px;padding:0 11px;font-size:8px;display:flex}.caged-position-track{grid-template-columns:repeat(5,1fr);gap:7px;margin:21px 0 13px;padding-bottom:13px;display:grid;position:relative}.caged-position-track:after{content:"";background:linear-gradient(90deg,#53674a,#8fb14d,#53674a);height:2px;position:absolute;bottom:0;left:7%;right:7%}.caged-position-track button{z-index:1;color:#7e887f;cursor:pointer;background:#202821;border:1px solid #39453a;border-radius:9px;min-height:50px;position:relative}.caged-position-track strong,.caged-position-track small{display:block}.caged-position-track strong{font:500 17px DM Mono}.caged-position-track small{margin-top:3px;font-size:7px}.caged-position-track button.active{color:#d7ff75;background:#2e3d25;border-color:#b8ee50;animation:.45s caged-focus;box-shadow:0 0 20px #b8ee5024}.caged-position-track button.active:after{content:"";background:#d7ff75;border-radius:50%;width:9px;height:9px;position:absolute;bottom:-19px;left:50%;transform:translate(-50%);box-shadow:0 0 13px #b8ee50bf}.caged-mini-board{background:repeating-linear-gradient(0deg,#ffffff04 0 1px,#0000 1px 24px),#171d18;border:1px solid #344036;border-radius:12px;padding:12px}.caged-mini-string{grid-template-columns:39px repeat(15,minmax(0,1fr));align-items:center;height:25px;display:grid}.caged-mini-string>span{color:#7a847a;font-size:7px}.caged-mini-string i{text-align:center;color:#17200f;background:#6b716b;border-right:1px solid #404940;height:1px;font:500 7px/19px DM Mono;position:relative}.caged-mini-string i.active{z-index:1;background:#dce6d7;border:0;border-radius:50%;height:19px;animation:.32s caged-note-in;box-shadow:0 0 0 2px #dce6d71f,0 2px 6px #00000059}.caged-mini-string i.root{background:#b8ee50;box-shadow:0 0 0 3px #b8ee5024,0 0 16px #b8ee5080}.caged-map-explain{background:#202820;border-radius:9px;align-items:center;gap:12px;margin-top:13px;padding:11px 13px;display:flex}.caged-map-explain strong{color:#d7ff75;white-space:nowrap;font:500 11px DM Mono}.caged-map-explain span{color:#8d978e;font-size:8px;line-height:1.6}@keyframes caged-focus{0%{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes caged-note-in{0%{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}.caged-map-lesson{display:none}.fretboard.caged-learning .string-row button b{color:#161a17;background:#e3e8df;font-weight:600;box-shadow:0 2px 8px #000000ad}.fretboard.caged-learning .string-row button.caged-shape-position{background:#8ecfe517}.fretboard.caged-learning .string-row button.caged-shape-position b{color:#122126;background:#8ad8e7;animation:.3s caged-note-in;display:grid;box-shadow:0 0 0 5px #8ad8e71a,0 0 20px #8ad8e766}.fretboard.caged-learning .string-row button.caged-root-position{background:#b8ee501a}.fretboard.caged-learning .string-row button.caged-root-position b{color:#16200e;background:#b8ee50;animation:.3s caged-note-in;display:grid;box-shadow:0 0 0 5px #b8ee501f,0 0 22px #b8ee508c}.fretboard.caged-learning .string-row button.caged-shape-position,.fretboard.caged-learning .string-row button.caged-root-position,.fretboard.interval-learning .string-row button.interval-anchor-position,.fretboard.interval-learning .string-row button.interval-target-position{background:0 0}.caged-animation-guide{box-sizing:border-box;background:linear-gradient(100deg,#202b1d,#172019);border:1px solid #46573c;border-radius:12px;justify-content:space-between;align-items:center;gap:18px;width:100%;margin:0 0 15px;padding:13px 16px;display:flex}.caged-animation-guide span,.caged-animation-guide strong,.caged-animation-guide small{display:block}.caged-animation-guide span{color:#a9d454;letter-spacing:1.1px;font:500 8px DM Mono}.caged-animation-guide strong{color:#e5ebe4;margin:5px 0 3px;font-size:11px}.caged-animation-guide small{color:#859085;font-size:8px}.caged-animation-guide button{cursor:pointer;border:0;border-radius:8px;flex:none;align-items:center;gap:6px;height:36px;padding:0 12px;font-size:8px;font-weight:800;display:flex}.caged-animation-guide .start{color:#15200e;background:#b8ee50}.caged-animation-guide .stop{color:#2b1511;background:#e88176}@media (width<=700px){.caged-animation-guide{flex-direction:column;align-items:flex-start;gap:10px}.caged-animation-guide button{justify-content:center;width:100%}}.string-row.target-string button:not(.correct):not(.wrong),.string-row button.question-position,.fretboard.ear-learning .string-row button.ear-revealed-position,.fretboard.review .string-row button.heat-weak,.fretboard.review .string-row button.heat-warn,.fretboard.review .string-row button.heat-strong,.fretboard .string-row button:hover:not(:disabled){background:0 0}.fretboard .string-row button b{transition:transform .15s,filter .15s}.fretboard .string-row button:hover b:not(:empty){filter:brightness(1.12);transform:scale(1.11)}.fretboard.review .string-row button.heat-weak b{color:#fff;background:#f2675a;box-shadow:0 0 16px #f2675a7a}.fretboard.review .string-row button.heat-warn b{color:#261d08;background:#ecb849;box-shadow:0 0 16px #ecb8496b}.fretboard.review .string-row button.heat-strong b{color:#14200d;background:#91c945;box-shadow:0 0 16px #91c9455c}.melody-studio{box-sizing:border-box;background:linear-gradient(145deg,#1b231c,#111512);border:1px solid #374438;border-radius:18px;width:100%;margin:0 0 24px;padding:24px}.melody-upload{text-align:center;max-width:670px;margin:0 auto}.melody-upload>span{color:#9bc64e;letter-spacing:1.3px;font:500 8px DM Mono}.melody-upload h2{margin:9px 0;font-size:23px}.melody-upload p{color:#7f897f;margin:0;font-size:10px;line-height:1.75}.melody-file{color:#17200e;cursor:pointer;background:#b8ee50;border:0;border-radius:9px;justify-content:center;align-items:center;gap:7px;width:max-content;height:42px;margin:17px auto 0;padding:0 16px;font-size:9px;font-weight:800;display:flex}.melody-file input{display:none}.melody-error{color:#ff8c80;margin:14px 0 0;font-size:9px}.melody-summary{background:#202820;border:1px solid #39453a;border-radius:12px;grid-template-columns:130px 1fr auto;align-items:center;gap:12px;margin-top:25px;padding:13px;display:grid}.melody-summary>div span,.melody-summary>div strong,.melody-summary>div small{display:block}.melody-summary span{color:#788378;font-size:8px}.melody-summary strong{color:#d7ff75;text-overflow:ellipsis;white-space:nowrap;margin:3px 0;font:500 16px DM Mono;overflow:hidden}.melody-summary small{color:#687369;font-size:7px}.melody-summary button{color:#d7ff75;cursor:pointer;background:#263421;border:1px solid #59713f;border-radius:8px;align-items:center;gap:6px;height:35px;padding:0 11px;font-size:8px;display:flex}.tablature{background:#151a16;border:1px solid #39443b;border-radius:12px;margin-top:13px;padding:15px;overflow-x:auto}.tab-head{color:#7e897f;justify-content:space-between;margin-bottom:10px;font-size:8px;display:flex}.tab-head strong{color:#d6ded5;font-size:10px}.tab-row{grid-template-columns:27px 12px repeat(96,minmax(25px,1fr));align-items:center;min-width:700px;height:29px;display:grid}.tab-row>b{color:#9ba89a;font:500 8px DM Mono}.tab-row>i{background:#9ba39b;height:1px}.tab-row span,.tab-row button{color:#0000;background:#8b938a;border:0;height:1px;padding:0;font:500 10px DM Mono}.tab-row button{color:#17200f;cursor:pointer;background:#dce6d8;border-radius:5px;height:24px}.tab-row button.active{background:#b8ee50;transform:scale(1.12);box-shadow:0 0 14px #b8ee5094}.melody-note-list{gap:6px;margin-top:13px;padding-bottom:2px;display:flex;overflow-x:auto}.melody-note-list button{color:#b8c0b8;text-align:left;cursor:pointer;background:#202720;border:1px solid #39443a;border-radius:8px;min-width:70px;padding:8px}.melody-note-list button.active{background:#2b3825;border-color:#b8ee50}.melody-note-list strong,.melody-note-list span,.melody-note-list small{display:block}.melody-note-list strong{color:#d7ff75;font:500 14px DM Mono}.melody-note-list span,.melody-note-list small{color:#778178;margin-top:3px;font-size:7px}.fretboard.melody-mode .string-row button.melody-position b{color:#17200f;background:#b8ee50;animation:1.1s ease-in-out infinite pulse;display:grid;box-shadow:0 0 0 5px #b8ee501f,0 0 25px #b8ee5094}.fretboard.melody-mode .string-row button.melody-position{background:0 0}@media (width<=700px){.melody-studio{padding:18px 12px}.melody-summary{grid-template-columns:1fr;gap:9px}.melody-summary button{justify-content:center;width:100%}.tablature{margin-left:-2px;margin-right:-2px}.caged-map-lesson{padding:17px 12px}.caged-map-head{flex-direction:column;align-items:flex-start}.caged-map-head button{justify-content:center;width:100%}.caged-position-track{gap:4px}.caged-position-track button{min-height:45px}.caged-position-track small{font-size:6px}.caged-mini-board{overflow-x:auto}.caged-mini-string{min-width:620px}.caged-map-explain{flex-direction:column;align-items:flex-start;gap:5px}}.scale-controls,.theory-panel{box-sizing:border-box;width:100%;max-width:none;margin-left:0;margin-right:0}@keyframes live-note-pulse{0%{transform:scale(.94);box-shadow:0 0 0 3px #b8ee501a,0 0 15px #b8ee5052}to{transform:scale(1.06);box-shadow:0 0 0 7px #b8ee5021,0 0 28px #b8ee509e}}@media (width<=1520px){.input-recorder{grid-column:1/-1}}@media (width<=700px){.live-map-btn{grid-column:2/4;width:100%}.input-recorder{grid-column:1/-1}}.mode-recorder{max-width:980px}.recorder-studio{margin:0 auto 48px}.studio-toolbar{background:#1b201c;border:1px solid #343a35;border-radius:14px 14px 0 0;align-items:center;gap:12px;min-height:66px;padding:12px 14px;display:flex}.studio-toolbar>div{grid-template-columns:10px 1fr;column-gap:8px;min-width:220px;display:grid}.device-light{background:#59605a;border-radius:50%;grid-row:1/3;width:8px;height:8px;margin-top:3px}.device-light.online{background:#b8ee50;box-shadow:0 0 12px #b8ee50a6}.studio-toolbar strong{color:#d6dbd6;font-size:10px}.studio-toolbar small{color:#6f776f;margin-top:3px;font-size:8px}.studio-toolbar select{color:#b9c0ba;background:#242925;border:1px solid #3b433c;border-radius:8px;min-width:190px;max-width:300px;height:35px;margin-left:auto;padding:0 9px;font-size:9px}.studio-connect{color:#c7cdc8;cursor:pointer;background:#282e29;border:1px solid #465043;border-radius:8px;justify-content:center;align-items:center;gap:7px;height:36px;padding:0 13px;font-size:9px;display:flex}.studio-connect:disabled{opacity:.5}.studio-deck{background:radial-gradient(circle at 50% 0,#4c5b4426,#0000 42%),linear-gradient(155deg,#181c19,#101311);border:1px solid #343a35;border-top:0;border-radius:0 0 18px 18px;padding:36px 42px 30px;box-shadow:0 25px 70px #00000047}.studio-display{text-align:center}.studio-display>span{color:#74806f;letter-spacing:2px;font:500 8px DM Mono;display:block}.studio-deck.recording .studio-display>span{color:#ff766a}.studio-display time{color:#eef2ed;letter-spacing:-5px;text-shadow:0 0 35px #d7ff7514;margin:9px 0 4px;font:400 clamp(54px,8vw,78px)/1 DM Mono;display:block}.studio-display time i{color:#687269;margin:0 7px;font-style:normal;animation:1s step-end infinite record-colon}.studio-display small{color:#687069;font-size:8px}.studio-wave{border-top:1px solid #272d28;border-bottom:1px solid #272d28;justify-content:center;align-items:center;gap:3px;height:74px;margin:26px 0 17px;padding:0 4px;display:flex;overflow:hidden}.studio-wave i{background:#8fac53;border-radius:4px;width:3px;min-height:3px;max-height:58px;transition:height 70ms}.studio-deck.recording .studio-wave i{background:#d7ff75;box-shadow:0 0 7px #b8ee503d}.studio-meter{color:#687069;grid-template-columns:15px 1fr 35px;align-items:center;gap:8px;font:7px DM Mono;display:grid}.studio-meter>div{background:linear-gradient(90deg,#2a302b 0 78%,#382d24 78% 92%,#382322 92%);border-radius:8px;height:5px;overflow:hidden}.studio-meter>div i{border-radius:inherit;background:linear-gradient(90deg,#86bd43 0 78%,#e7bb45 78% 92%,#ff685c 92%);height:100%;transition:width 70ms;display:block}.studio-meter b{font:inherit;color:#7c847d}.transport-controls{justify-content:center;margin-top:28px;display:flex}.transport-controls button{cursor:pointer;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:116px;height:70px;display:flex}.transport-controls button:disabled{opacity:.35;cursor:not-allowed}.transport-controls strong{font-size:8px}.main-record{color:#ff8378;background:#241b1a;border:1px solid #51413e}.main-record>span{background:#f35f55;border-radius:50%;width:23px;height:23px;box-shadow:0 0 0 7px #f35f5514}.main-stop{color:#d7ff75;background:#2a3525;border:1px solid #516044}.main-stop svg{fill:currentColor}.take-panel{background:#191d1a;border:1px solid #343a35;border-radius:13px;grid-template-columns:minmax(150px,1fr) minmax(220px,1.5fr) auto auto;align-items:center;gap:9px;min-height:78px;margin-top:12px;padding:12px;display:grid}.take-panel>div span,.take-panel>div strong{display:block}.take-panel>div span{color:#737b74;letter-spacing:.8px;font-size:7px}.take-panel>div strong{color:#d4d9d4;margin-top:5px;font-size:10px}.take-panel audio{width:100%;height:34px}.take-panel>a,.take-panel>button{color:#b8c0b9;cursor:pointer;background:#252b26;border:1px solid #414a42;border-radius:8px;justify-content:center;align-items:center;gap:6px;height:34px;padding:0 11px;font-size:8px;text-decoration:none;display:flex}.take-panel>a:hover{color:#d7ff75;border-color:#789348}.take-panel>button:hover{color:#ff8176;border-color:#75453f}.recorder-tip{text-align:center;color:#59615a;margin:14px 0 0;font-size:8px}.studio-error{color:#ff8074;background:#251817;border:1px solid #5b332f;border-radius:8px;margin:10px 0 0;padding:9px 12px;font-size:9px}@keyframes record-colon{50%{opacity:.25}}@media (width<=700px){.mode-recorder{padding:0 12px}.studio-toolbar{flex-direction:column;align-items:stretch}.studio-toolbar>div{min-width:0}.studio-toolbar select{width:100%;max-width:none;margin:0}.studio-deck{padding:28px 16px 24px}.studio-display time{font-size:52px}.studio-wave{height:62px}.take-panel{grid-template-columns:1fr 1fr}.take-panel>div,.take-panel audio{grid-column:1/-1}.take-panel>a,.take-panel>button{width:100%}}.fret-range-controls{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px;display:grid}.fret-range-controls label{background:#202420;border:1px solid #343a35;border-radius:9px;grid-template-columns:1fr 24px;align-items:center;gap:6px;padding:9px;display:grid}.fret-range-controls span{color:#818982;font-size:8px}.fret-range-controls input{grid-column:1/3}.fret-range-controls b{color:#d7ff75;text-align:right;font:500 11px DM Mono}.ebony-preview{background:repeating-linear-gradient(2deg,#0000 0 7px,#ffffff06 8px),linear-gradient(90deg,#090b0a,#202421,#080a09)}.maple-preview{background:repeating-linear-gradient(2deg,#0000 0 7px,#6541161c 8px),linear-gradient(90deg,#c69c5d,#efd08c,#bc8c4d)}.ebony-preview:after,.maple-preview:after{content:"";background:#bbb5a7;width:3px;position:absolute;top:0;bottom:0;right:28%}.fretboard.ebony,.fretboard.maple{border-color:#555d56;box-shadow:inset 0 2px #ffffff12,inset 0 -3px #00000059,0 20px 60px #020202}.fretboard.ebony{background-color:#0c0f0d;background-image:linear-gradient(90deg,#000000a6,#0000 18%,#ffffff06 50%,#0009),repeating-linear-gradient(2deg,#0000 0 8px,#ffffff05 9px,#0000 11px),linear-gradient(#191d1a,#070908 50%,#151815)}.fretboard.maple{background-color:#c49a5a;background-image:linear-gradient(90deg,#4e2d0c2e,#0000 12%,#fff0b826 50%,#4e2d0c33),repeating-linear-gradient(2deg,#0000 0 8px,#5b35111a 9px,#fff0b814 10px,#0000 12px),linear-gradient(#d6af70,#b98548 50%,#cea361)}.fretboard.ebony .string-label{color:#bec5bf;background:linear-gradient(90deg,#060807,#141715);border-right:5px solid #d2cbbb}.fretboard.maple .string-label{color:#f1ddba;background:linear-gradient(90deg,#7e5429,#a8793e);border-right:5px solid #d9d1c0}.fretboard.ebony .string-row button,.fretboard.maple .string-row button{border-right:4px ridge #c8c1ae}.fretboard.ebony .string-row button:hover:not(:disabled){background:#d7ff750f}.fretboard.maple .string-row button:hover:not(:disabled){background:#4b280917}.fretboard.ebony .string-wire,.fretboard.maple .string-wire{background:linear-gradient(#f4ead4 0%,#9f9685 35%,#423d37 53%,#c9c0ac 70%,#eee4d0 100%);box-shadow:0 1px 2px #100704}.fretboard.ebony .markers i,.fretboard.maple .markers i{background:radial-gradient(circle at 35% 30%,#fffdf0,#c7beaa 45%,#877e70);width:9px;height:9px;box-shadow:inset 0 0 2px #554d45,0 1px 2px #00000080}.fretboard.ebony .markers i.double,.fretboard.maple .markers i.double{background:0 0;box-shadow:-8px 0 #d4cbb8,8px 0 #d4cbb8}.fretboard.ebony.review .string-row button b,.fretboard.ebony.learning .string-row button b{color:#111512;background:#e8eee8}.fretboard.maple.review .string-row button b,.fretboard.maple.learning .string-row button b{color:#fff4d8;background:#40301d}.fretboard.ebony.scale-mode .string-row button.scale-note b{color:#172019;background:#e7ece7}.fretboard.maple.scale-mode .string-row button.scale-note b{color:#fff3d2;background:#49351f}@media (width<=520px){.fret-range-controls{grid-template-columns:1fr}.board-style-options{grid-template-columns:1fr 1fr}}.dual-fret-range{height:66px;margin:2px 2px 4px;position:relative}.dual-range-track{border-radius:8px;height:5px;position:absolute;top:10px;left:0;right:0}.dual-fret-range>input{appearance:none;pointer-events:none;background:0 0;width:100%;height:25px;margin:0;position:absolute;top:0;left:0}.dual-fret-range>input::-webkit-slider-runnable-track{background:0 0;height:5px}.dual-fret-range>input::-webkit-slider-thumb{appearance:none;pointer-events:auto;cursor:grab;background:#d7ff75;border:3px solid #171b18;border-radius:50%;width:19px;height:19px;margin-top:-7px;box-shadow:0 0 0 1px #8aac4a,0 3px 9px #00000073}.dual-fret-range>input::-moz-range-track{background:0 0;height:5px}.dual-fret-range>input::-moz-range-thumb{pointer-events:auto;cursor:grab;background:#d7ff75;border:3px solid #171b18;border-radius:50%;width:13px;height:13px;box-shadow:0 0 0 1px #8aac4a}.dual-fret-range>input:focus-visible::-webkit-slider-thumb{outline-offset:3px;outline:2px solid #d7ff75}.dual-range-values{justify-content:space-between;display:flex;position:absolute;bottom:0;left:0;right:0}.dual-range-values span{color:#747c75;font-size:8px}.dual-range-values b{color:#d7ff75;background:#252c25;border-radius:6px;place-items:center;min-width:23px;height:23px;margin-left:5px;font:500 10px DM Mono;display:inline-grid}.clear-cache{color:#e5aaa2;cursor:pointer;background:#2a1d1a;border:1px solid #69413b;border-radius:10px;justify-content:center;align-items:center;gap:7px;width:100%;height:40px;margin-top:22px;font-size:10px;display:flex}.clear-cache:hover{color:#ffd0c8;background:#35221e;border-color:#d66b5d}.modal-save{margin-top:10px}.scale-controls .scale-bpm{color:#777f78;border-left:1px solid #343c34;align-items:center;gap:7px;padding-left:9px;font-size:9px;display:flex}.scale-bpm-stepper{background:#151a16;border:1px solid #3b443b;border-radius:8px;grid-template-columns:30px 48px 30px;height:34px;display:grid;overflow:hidden}.scale-bpm-stepper button{color:#aeb6ae;cursor:pointer;background:#252c26;border:0;font-size:15px}.scale-bpm-stepper button:hover{color:#d7ff75;background:#34422d}.scale-controls .scale-bpm-stepper input{color:#d7ff75;text-align:center;box-sizing:border-box;background:#111511;border:0;border-left:1px solid #353d35;border-right:1px solid #353d35;border-radius:0;outline:none;width:48px;height:34px;padding:0;font:500 11px DM Mono}.scale-controls .scale-bpm-stepper input:focus{background:#1b211b;box-shadow:inset 0 0 0 1px #718b47}.scale-controls .scale-metronome{color:#aeb6ae;cursor:pointer;background:#222822;border:1px solid #3b443b;border-radius:8px;align-items:center;gap:7px;height:34px;padding:0 10px;display:flex}.scale-controls .scale-metronome input{opacity:0;pointer-events:none;position:absolute}.scale-controls .scale-metronome i{background:#343b35;border-radius:10px;width:28px;height:16px;transition:background .18s;position:relative}.scale-controls .scale-metronome i:after{content:"";background:#8d958e;border-radius:50%;width:12px;height:12px;transition:transform .18s,background .18s;position:absolute;top:2px;left:2px}.scale-controls .scale-metronome input:checked+i{background:#526b37}.scale-controls .scale-metronome input:checked+i:after{background:#d7ff75;transform:translate(12px)}.scale-controls .scale-metronome input:focus-visible+i{outline-offset:2px;outline:2px solid #b8ee50}.fretboard.scale-mode .string-row button.scale-playing b{color:#102326;background:#7adff3;animation:.55s ease-in-out infinite pulse;box-shadow:0 0 0 6px #53cbe524,0 0 28px #53cbe5e6;display:grid!important}.fretboard.scale-mode .string-row button.scale-start b{box-shadow:0 0 0 3px #f2c84b,0 0 18px #f2c84b7a}.scale-playback-error{color:#ff8a7d;flex:0 0 100%;font-size:9px;line-height:1.5}.scale-controls>button.scale-focus-btn{color:#d8ded8;background:#272d28;border:1px solid #465147;margin-left:auto}.scale-focus{background:#0d100e;height:100dvh;min-height:100dvh;overflow:auto}.scale-focus>.topbar,.scale-focus>.hero,.scale-focus>footer{display:none}.scale-focus .input-panel,.scale-focus .game-actions{display:none!important}.scale-focus .game-wrap{--fret-label-width:58px;--fret-cell-min:48px;width:100%;max-width:none;min-height:100dvh;padding:10px 12px}.scale-focus .scale-controls{z-index:60;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#181e19f5;width:min(1040px,100vw - 24px);margin:0 auto 12px;position:sticky;top:8px;box-shadow:0 10px 32px #00000073}.scale-focus .fretboard-scroll{margin:0;padding:0;overflow:auto}.scale-focus .fretboard{min-height:300px}.scale-focus .string-row{height:44px}@media (width<=900px) and (orientation:landscape){.scale-focus .game-wrap{--fret-label-width:50px;--fret-cell-min:32px;padding:6px}.scale-focus .scale-controls{width:calc(100vw - 12px);margin-bottom:7px;padding:7px;top:4px}.scale-focus .string-row{height:36px}}@media (width>=1400px){.input-panel.input-float{flex-direction:column;align-items:stretch;width:175px;margin:0 0 18px auto;padding:13px;display:flex;transform:translate(calc(100% + 16px),86px)}.mode-training .input-panel.input-float{margin:0;position:absolute;left:auto;right:-191px;transform:none}.mode-training.training-idle .input-panel.input-float,.mode-training.training-finished .input-panel.input-float{top:292px}.mode-training.training-playing .input-panel.input-float{top:147px}.input-panel.input-float.expanded{width:185px}.input-float .input-symbol{align-self:center}.input-float .input-copy{text-align:center}.input-float .pitch-monitor{margin:4px 0}.input-float .connect-btn,.input-float .calibrate-btn{width:100%}.mode-learning .input-panel.input-float{margin:0;position:absolute;top:82px;left:auto;right:-191px;transform:none}}.applied-training-controls{background:#1a2018;border:1px solid #354032;border-radius:12px;align-items:center;gap:10px;width:min(700px,100%);min-height:54px;margin:0 auto 18px;padding:9px 12px;display:flex}.applied-training-controls>span{color:#71806c;letter-spacing:.8px;margin-right:auto;font-size:8px}.applied-training-controls label{color:#7d857e;align-items:center;gap:6px;font-size:8px;display:flex}.applied-training-controls select{color:#d6dcd6;background:#242b22;border:1px solid #3c4639;border-radius:8px;min-width:110px;height:34px;padding:0 25px 0 9px;font-size:9px}.fretboard .string-row button.path-next b,.fretboard .string-row button.path-done b{border-radius:50%;place-items:center;width:29px;height:29px;font:600 10px DM Mono;display:grid}.fretboard .string-row button.path-next b{color:#15200e;background:#d7ff75;animation:1s infinite pulse;box-shadow:0 0 0 6px #b8ee501f,0 0 24px #b8ee5073}.fretboard .string-row button.path-done b{color:#d7ff75;background:#4c6240}.fretboard .string-row button.path-future{cursor:pointer}.fretboard.realistic .string-row button.path-next b,.fretboard.ebony .string-row button.path-next b,.fretboard.maple .string-row button.path-next b{color:#15200e;background:#d7ff75}@media (width<=700px){.applied-training-controls{flex-wrap:wrap}.applied-training-controls>span{width:100%}.applied-training-controls label{flex:1}.applied-training-controls select{flex:1;min-width:0}}.portrait-orientation-guard,.landscape-target-hud{display:none}@media (width<=900px) and (orientation:portrait){.portrait-orientation-guard{z-index:1000;text-align:center;background:radial-gradient(circle at 50% 38%,#253020,#101311 60%);flex-direction:column;justify-content:center;align-items:center;padding:28px;display:flex;position:fixed;inset:0}.rotate-phone{color:#d7ff75;place-items:center;width:94px;height:94px;margin-bottom:24px;animation:1.8s ease-in-out infinite phone-turn;display:grid;position:relative}.rotate-phone svg{transform:rotate(0)}.rotate-phone i{color:#77836f;font:32px sans-serif;position:absolute;top:2px;right:3px}.portrait-orientation-guard strong{color:#edf1ec;font-size:22px}.portrait-orientation-guard p{color:#79817a;margin:11px 0 0;font-size:11px;line-height:1.8}@keyframes phone-turn{0%,20%{transform:rotate(0)}70%,to{transform:rotate(90deg)}}}@media (width<=900px) and (orientation:landscape){.game-wrap{--fret-label-width:52px;--fret-cell-min:32px;padding-left:8px;padding-right:8px}.hero{min-height:132px;padding-top:15px}.hero .eyebrow{margin-bottom:8px}.target-note{font-size:48px}.stats{margin-bottom:13px}.fretboard-scroll{margin-left:-8px;margin-right:-8px;padding-left:8px}.string-label{font-size:8px}.fret-numbers span{font-size:7px}.landscape-target-hud{z-index:40;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#181f15f0;border:1px solid #5a7045;border-radius:10px;align-items:center;gap:9px;width:max-content;max-width:calc(100vw - 16px);height:39px;margin:0 auto 8px;padding:0 7px 0 11px;display:flex;position:sticky;top:7px;box-shadow:0 8px 24px #00000073}.landscape-target-hud>span{color:#758071;letter-spacing:.7px;font-size:7px}.landscape-target-hud strong{color:#d7ff75;white-space:nowrap;font:600 15px DM Mono}.landscape-target-hud small{color:#aeb8aa;white-space:nowrap;background:#30392d;border-radius:7px;place-items:center;min-width:42px;height:25px;padding:0 7px;font-size:8px;display:grid}}.focus-launch{color:#d7ff75;cursor:pointer;background:#242c22;border:1px solid #526443;border-radius:10px;height:40px;margin-left:7px;padding:0 16px;font-size:9px}.landscape-target-hud>button{color:#c8d0c8;cursor:pointer;background:#3a4338;border:0;border-radius:7px;place-items:center;width:27px;height:27px;display:grid}.game-actions .quit,.game-actions .focus-launch{box-sizing:border-box;vertical-align:middle;justify-content:center;align-items:center;height:40px;display:inline-flex}.eyebrow{display:none}.hero{min-height:190px;padding-top:30px}.hero h1{margin-top:0}.training-focus{background:#0d100e;height:100dvh;min-height:100dvh;overflow:auto}.training-focus>.topbar,.training-focus>.training-subnav,.training-focus>.hero,.training-focus>footer{display:none}.training-focus .input-panel,.training-focus .stats,.training-focus .game-actions,.training-focus .weak-review,.training-focus .applied-training-controls{display:none!important}.training-focus .game-wrap{--fret-label-width:52px;--fret-cell-min:36px;width:100%;max-width:none;min-height:100dvh;padding:8px;display:block}.training-focus .landscape-target-hud{z-index:60;background:#161d14f5;border:1px solid #61794a;border-radius:10px;align-items:center;gap:9px;width:max-content;max-width:calc(100vw - 16px);height:42px;margin:0 auto 8px;padding:0 7px 0 12px;display:flex;position:sticky;top:6px;box-shadow:0 8px 28px #0000008c}.training-focus .landscape-target-hud>span{color:#778272;font-size:7px}.training-focus .landscape-target-hud strong{color:#d7ff75;white-space:nowrap;font:600 16px DM Mono}.training-focus .landscape-target-hud small{color:#bdc7b9;white-space:nowrap;background:#30392d;border-radius:7px;place-items:center;height:27px;padding:0 8px;font-size:8px;display:grid}.training-focus .fretboard-scroll{margin:0;padding:0;overflow:auto}.training-focus .note-answers{grid-template-columns:repeat(12,1fr);margin:8px 0}.portrait-orientation-guard>button{color:#d7ff75;background:#252e22;border:1px solid #506142;border-radius:9px;align-items:center;gap:7px;height:36px;margin-top:20px;padding:0 13px;font-size:9px;display:flex}.modal-backdrop{z-index:1100}@media (width<=700px){html,body{max-width:100%;overflow-x:hidden}.modal-backdrop{place-items:start center;padding:8px;overflow-y:auto}.modal{border-radius:14px;max-height:calc(100dvh - 16px);padding:20px;overflow-y:auto}.modal-close{float:right;z-index:2;position:sticky;top:0;right:0}.modal>p{margin-bottom:20px}.board-style-options{grid-template-columns:1fr 1fr}.topbar nav{scrollbar-width:none;justify-content:flex-start!important}.topbar nav::-webkit-scrollbar{display:none}.topbar nav button,.header-actions{flex:none}.hero h1{font-size:clamp(26px,9vw,42px)}.learning-toolbar{width:100%}.ear-lab{max-width:100%;overflow:hidden}.theory-panel,.chord-panel{width:100%;margin-left:0;margin-right:0}.theory-tabs{overflow-x:auto}.theory-tabs button{white-space:nowrap;flex:none}.chord-controls,.chord-theory{min-width:0}.chord-theory{gap:10px}.recorder-studio{max-width:100%}.studio-toolbar,.take-panel{min-width:0}.input-examples{max-width:100%}.game-actions{flex-wrap:wrap;justify-content:center;align-items:center;display:flex}.focus-launch{margin-left:0}.training-focus .game-wrap{--fret-cell-min:32px;padding:5px}.training-focus .landscape-target-hud strong{font-size:14px}.training-focus .note-answers{grid-template-columns:repeat(6,1fr)}}.key-chord-map{background:linear-gradient(135deg,#1d251b,#171b18);border:1px solid #394535;border-radius:15px;margin:0 0 12px;padding:17px}.key-map-head{align-items:flex-end;gap:16px;display:flex}.key-map-head>div:first-child{min-width:0}.key-map-head span{color:#9cc451;letter-spacing:1.2px;font:8px DM Mono}.key-map-head h2{margin:6px 0 3px;font-size:17px}.key-map-head p{color:#788078;margin:0;font-size:8px}.key-map-selects{gap:7px;margin-left:auto;display:flex}.key-map-selects label{color:#7a827b;align-items:center;gap:5px;font-size:8px;display:flex}.key-map-selects select{color:#dce2dc;background:#242b22;border:1px solid #414c3d;border-radius:7px;height:31px;padding:0 20px 0 7px;font-size:9px}.diatonic-chord-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-top:15px;display:grid}.diatonic-chord-grid button{color:#cbd1cb;text-align:center;cursor:pointer;background:#222722;border:1px solid #374137;border-radius:9px;min-width:0;height:72px;padding:7px}.diatonic-chord-grid button:hover,.diatonic-chord-grid button.selected{background:#2b3625;border-color:#87a64d}.diatonic-chord-grid span,.diatonic-chord-grid strong,.diatonic-chord-grid small{display:block}.diatonic-chord-grid span{color:#7b857b;font:8px DM Mono}.diatonic-chord-grid strong{color:#e7ece7;margin:5px 0 3px;font:500 14px DM Mono}.diatonic-chord-grid button.selected strong{color:#d7ff75}.diatonic-chord-grid small{color:#707970;font-size:7px}.secondary-dominants{border-top:1px solid #343d33;align-items:center;gap:6px;margin-top:12px;padding-top:11px;display:flex;overflow-x:auto}.secondary-dominants>span{color:#7b847b;flex:none;margin-right:3px;font-size:8px}.secondary-dominants button{color:#d7ff75;cursor:pointer;background:#242b22;border:1px solid #414b3d;border-radius:7px;flex:none;align-items:center;gap:6px;height:31px;padding:0 9px;display:flex}.secondary-dominants button:hover{background:#2b3525;border-color:#86a64a}.secondary-dominants strong{font:500 11px DM Mono}.secondary-dominants small{color:#8f998f;font-size:7px}@media (width<=700px){.key-chord-map{padding:14px}.key-map-head{display:block}.key-map-selects{margin:12px 0 0}.key-map-selects label{flex:1}.key-map-selects select{flex:1;width:100%;min-width:0}.diatonic-chord-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.diatonic-chord-grid button{height:66px}.secondary-dominants{padding-bottom:2px}}.chord-card{cursor:pointer}.chord-card:focus-visible{outline-offset:3px;outline:2px solid #b8ee50}.harmony-tools-toggle{color:#aeb6af;text-align:left;cursor:pointer;background:#191e1a;border:1px solid #354033;border-radius:11px;grid-template-columns:1fr auto 20px;align-items:center;width:100%;min-height:47px;margin:0 0 12px;padding:8px 13px;display:grid}.harmony-tools-toggle:hover{color:#d7ff75;border-color:#617443}.harmony-tools-toggle span{font-size:10px}.harmony-tools-toggle small{color:#727b73;margin-right:12px;font-size:8px}.harmony-tools-toggle svg{transition:transform .18s}.harmony-tools-toggle.open svg{transform:rotate(180deg)}.position-practice{background:#191f1a;border:1px solid #394437;border-radius:13px;align-items:center;gap:18px;width:min(860px,100%);margin:0 auto 17px;padding:12px;display:flex}.position-practice>div:first-child{min-width:150px}.position-practice span,.position-practice strong,.position-practice small{display:block}.position-practice span{color:#94bf4d;letter-spacing:1px;font:8px DM Mono}.position-practice>div:first-child strong{color:#e3e8e3;margin:4px 0;font-size:12px}.position-practice>div:first-child small{color:#747d75;font-size:8px;line-height:1.45}.position-buttons{flex:1;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;display:grid}.position-buttons button{color:#aeb6ae;cursor:pointer;background:#222822;border:1px solid #363f36;border-radius:8px;min-width:0;height:47px}.position-buttons button:hover,.position-buttons button.selected{color:#d7ff75;background:#2d3826;border-color:#8cab4e}.position-buttons strong{font:500 9px DM Mono}.position-buttons small{color:#737c74;margin-top:4px;font-size:7px}.position-buttons .position-custom{border-style:dashed}@media (width<=700px){.position-practice{padding:12px;display:block}.position-practice>div:first-child{margin-bottom:10px}.position-buttons{grid-template-columns:repeat(4,minmax(0,1fr))}.position-buttons button{height:43px}}.chord-identifier{background:#181d19;border:1px solid #3a4437;border-radius:14px;grid-template-columns:240px 1fr;align-items:center;gap:16px;margin:0 0 12px;padding:15px 17px;display:grid}.chord-identifier span{color:#9cc451;letter-spacing:1.1px;font:8px DM Mono}.chord-identifier h2{margin:6px 0 3px;font-size:16px}.chord-identifier p{color:#788078;margin:0;font-size:8px}.chord-note-picker{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;display:grid}.chord-note-picker button{color:#b8bfb9;cursor:pointer;background:#242a25;border:1px solid #3b4439;border-radius:7px;min-width:0;height:33px;font:500 10px DM Mono}.chord-note-picker button:hover,.chord-note-picker button.selected{color:#d7ff75;background:#2c3825;border-color:#8cab4d}.chord-note-picker .identify-chord-btn{color:#17200f;background:#b8ee50;border-color:#b8ee50;grid-column:span 2;font-family:Noto Sans SC;font-weight:700}.harmony-explorer{grid-template-columns:210px 1fr;align-items:center;gap:18px;margin:13px 0 3px;padding:12px 5px 4px;display:grid}.circle-of-fifths{border:1px dashed #4b5749;border-radius:50%;place-items:center;width:184px;height:184px;margin:auto;display:grid;position:relative}.circle-of-fifths:before{content:"";border:1px solid #354034;border-radius:50%;width:108px;height:108px;position:absolute}.circle-key{z-index:1;color:#d7ff75;text-align:center;font:500 24px DM Mono}.circle-key small{color:#879188;margin-top:4px;font:8px Noto Sans SC;display:block}.circle-of-fifths button{color:#aeb6af;cursor:pointer;background:#222823;border:1px solid #3d483d;border-radius:50%;width:29px;height:29px;margin:-14px;font:500 8px DM Mono;position:absolute;top:50%;left:50%}.circle-of-fifths button:hover,.circle-of-fifths button.selected{color:#17200f;background:#b8ee50;border-color:#b8ee50;box-shadow:0 0 13px #b8ee5047}.progression-tool>span{color:#7c857d;font-size:8px}.progression-tabs{gap:5px;margin:9px 0;display:flex}.progression-tabs button{color:#aeb6ae;cursor:pointer;background:#242a25;border:1px solid #3b453a;border-radius:7px;height:28px;padding:0 8px;font-size:8px}.progression-tabs button.selected{color:#d7ff75;background:#2c3725;border-color:#829f4a}.progression-tabs small{opacity:.7;font:8px DM Mono}.progression-chords{align-items:center;gap:7px;display:flex}.progression-chords button{color:#cfd5cf;cursor:pointer;background:#202620;border:1px solid #3b463a;border-radius:8px;min-width:62px;height:52px;padding:5px}.progression-chords button:hover{background:#2b3525;border-color:#90af50}.progression-chords span,.progression-chords strong{display:block}.progression-chords span{color:#788179;font:8px DM Mono}.progression-chords strong{color:#d7ff75;margin-top:5px;font:500 13px DM Mono}@media (width<=700px){.chord-identifier{grid-template-columns:1fr;padding:14px}.chord-note-picker{grid-template-columns:repeat(6,minmax(0,1fr))}.chord-note-picker .identify-chord-btn{grid-column:span 2}.harmony-explorer{grid-template-columns:1fr;gap:13px;padding:7px 0}.circle-of-fifths{width:170px;height:170px}.progression-tabs{padding-bottom:2px;overflow-x:auto}.progression-tabs button{white-space:nowrap;flex:none}.progression-chords{padding-bottom:2px;overflow-x:auto}.progression-chords button{flex:0 0 62px}}.daily-practice-page{width:min(980px,100%);margin:0 auto 28px}.daily-overview{background:linear-gradient(135deg,#1b211b,#141815);border:1px solid #303731;border-radius:18px;justify-content:space-between;align-items:center;gap:24px;padding:26px;display:flex}.daily-overview>div:first-child>span{letter-spacing:1.4px;color:#8da666;font:8px DM Mono}.daily-overview h2{color:#eef1ed;margin:7px 0 8px;font-size:22px}.daily-overview p{color:#818982;max-width:620px;margin:0;font-size:10px;line-height:1.7}.daily-duration{color:#d7ff75;background:#20291d;border:1px solid #46563b;border-radius:14px;grid-template-columns:28px 1fr;place-content:center;min-width:112px;height:86px;padding:12px;display:grid}.daily-duration svg{grid-row:1/3;align-self:center}.daily-duration strong{font:600 30px/1 DM Mono}.daily-duration span{color:#899583;font-size:8px}.daily-timeline{grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px;display:grid}.daily-timeline article{background:#191d1a;border:1px solid #303631;border-radius:13px;grid-template-columns:24px 1fr;gap:9px;min-height:132px;padding:14px;display:grid;position:relative}.daily-timeline article>i{color:#b9e65d;background:#283124;border-radius:7px;place-items:center;width:22px;height:22px;font:9px DM Mono;display:grid}.daily-stage-icon{color:#768274;align-self:center}.daily-timeline article>div:last-of-type{grid-column:1/3}.daily-timeline strong,.daily-timeline span{display:block}.daily-timeline strong{color:#dfe4df;margin-bottom:5px;font-size:11px}.daily-timeline span{color:#747c75;font-size:8px;line-height:1.55}.daily-timeline small{color:#68716a;font:8px DM Mono;position:absolute;top:17px;right:11px}.daily-guidance{background:#171b18;border:1px solid #303631;border-radius:14px;grid-template-columns:1fr 1fr auto;align-items:center;gap:20px;margin-top:12px;padding:15px 18px;display:grid}.daily-guidance strong,.daily-guidance span{display:block}.daily-guidance strong{color:#cbd1cb;font-size:9px}.daily-guidance span{color:#727a73;margin-top:4px;font-size:8px;line-height:1.5}.daily-guidance button{color:#17200f;cursor:pointer;background:#b8ee50;border:0;border-radius:10px;align-items:center;gap:7px;height:42px;padding:0 20px;font-weight:700;display:flex}.daily-session-bar{z-index:16;background:#182016;border-bottom:1px solid #30382e;grid-template-columns:minmax(190px,340px) 1fr 52px auto;align-items:center;gap:16px;height:58px;padding:0 clamp(14px,4vw,64px);display:grid;position:relative}.daily-session-bar>div:first-child span,.daily-session-bar>div:first-child strong,.daily-session-bar>div:first-child small{display:block}.daily-session-bar>div:first-child span{color:#7b8b72;font:7px DM Mono}.daily-session-bar>div:first-child strong{color:#d7ff75;margin:2px 0;font-size:11px}.daily-session-bar>div:first-child small{color:#687268;font-size:7px}.daily-session-progress{background:#2e372b;border-radius:5px;height:5px;overflow:hidden}.daily-session-progress i{background:#b8ee50;border-radius:5px;height:100%;transition:width .3s;display:block}.daily-session-bar>b{color:#dce1dc;font:500 13px DM Mono}.daily-session-bar>button{color:#8e978f;cursor:pointer;background:0 0;border:1px solid #465044;border-radius:8px;height:29px;padding:0 10px;font-size:8px}@media (width<=760px){.daily-timeline{grid-template-columns:1fr 1fr}.daily-guidance{grid-template-columns:1fr}.daily-guidance button{justify-content:center}.daily-session-bar{grid-template-columns:1fr 48px auto;height:auto;min-height:64px;padding:7px 10px}.daily-session-progress{grid-area:2/1/auto/4;width:100%}.daily-session-bar>div:first-child small{display:none}}.app-assessment .topbar nav{visibility:hidden;pointer-events:none}.assessment-page{background:linear-gradient(145deg,#1a201a,#131714);border:1px solid #303731;border-radius:18px;width:min(900px,100%);margin:0 auto 30px;padding:26px}.assessment-intro{text-align:center;max-width:620px;margin:0 auto}.assessment-intro>span,.assessment-result-head>span{letter-spacing:1.4px;color:#8da666;font:8px DM Mono}.assessment-intro h2,.assessment-result-head h2{color:#edf1ec;margin:8px 0;font-size:23px}.assessment-intro p,.assessment-result-head p{color:#7e8780;margin:0;font-size:10px;line-height:1.7}.assessment-features{grid-template-columns:repeat(3,1fr);gap:9px;margin:24px 0;display:grid}.assessment-features>div{text-align:center;background:#1d221e;border:1px solid #303731;border-radius:13px;padding:18px}.assessment-features svg{color:#a9d657}.assessment-features strong,.assessment-features span{display:block}.assessment-features strong{color:#dce1dc;margin:8px 0 4px;font-size:11px}.assessment-features span{color:#727a73;font-size:8px}.assessment-notice{color:#818981;background:#20261f;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:11px;font-size:8px;display:flex}.assessment-primary{color:#17200f;cursor:pointer;background:#b8ee50;border:0;border-radius:10px;align-items:center;gap:7px;height:44px;margin:18px auto 0;padding:0 22px;font-weight:700;display:flex}.assessment-result-head{text-align:center}.assessment-result-head>svg{color:#b8ee50;margin:0 auto 9px;display:block}.assessment-results{grid-template-columns:repeat(5,1fr);gap:8px;margin:22px 0;display:grid}.assessment-results>div{text-align:center;background:#1d221e;border:1px solid #323a33;border-radius:11px;padding:13px 9px}.assessment-results strong,.assessment-results span,.assessment-results small{display:block}.assessment-results strong{color:#d7ff75;font:600 20px DM Mono}.assessment-results span{color:#cbd1cb;margin:5px 0;font-size:9px}.assessment-results small{color:#69716b;font-size:7px}.assessment-analysis{background:#20271e;border-left:3px solid #b8ee50;border-radius:9px;padding:16px 18px}.assessment-analysis strong,.assessment-analysis span{display:block}.assessment-analysis strong{color:#778075;font-size:8px}.assessment-analysis span{color:#e1e6e1;margin:4px 0;font-size:14px}.assessment-analysis p{color:#7a837b;margin:6px 0 0;font-size:8px;line-height:1.6}@media (width<=700px){.assessment-page{padding:17px}.assessment-features{grid-template-columns:1fr}.assessment-results{grid-template-columns:1fr 1fr}.app-assessment .topbar{padding-bottom:10px}}.assessment-running .topbar nav{visibility:hidden;pointer-events:none}.daily-adjustment{background:#1a2118;border:1px solid #394533;border-radius:14px;grid-template-columns:minmax(210px,1fr) 1.4fr;align-items:center;gap:22px;margin:12px 2px;padding:18px;display:grid}.daily-adjustment>div:first-child>span{letter-spacing:1px;color:#91ae64;font:7px DM Mono}.daily-adjustment h3{color:#e1e6e0;margin:4px 0 6px;font-size:15px}.daily-adjustment p{color:#747d75;margin:0;font-size:8px;line-height:1.6}.daily-adjustment>div:last-child{grid-template-columns:1fr 1fr;gap:6px;display:grid}.daily-adjustment>div:last-child>span{background:#242c21;border-radius:8px;justify-content:space-between;align-items:center;height:32px;padding:0 10px;display:flex}.daily-adjustment strong{color:#b9c1ba;font-size:8px}.daily-adjustment b{color:#d7ff75;font:9px DM Mono}@media (width<=700px){.daily-adjustment,.daily-adjustment>div:last-child{grid-template-columns:1fr}}.assessment-range-label{background:#202a1d;border:1px solid #6b874d;border-radius:9px;align-items:center;gap:9px;width:max-content;margin:0 0 8px;padding:7px 11px;display:flex}.assessment-range-label span{color:#829078;font-size:7px}.assessment-range-label strong{color:#d7ff75;font:600 11px DM Mono}.assessment-range-label small{color:#697369;font-size:7px}.assessment-fret-range .string-row button.in-assessment-range{box-shadow:inset 0 2px #b8ee502e,inset 0 -2px #b8ee501f;background:#b8ee5016!important}.assessment-fret-range .string-row button.outside-assessment-range,.assessment-fret-range .string-label.outside-assessment-range{opacity:.28;filter:saturate(.35);cursor:not-allowed}.assessment-fret-range .fret-numbers span{color:#545d55}.assessment-fret-range .fret-numbers span:nth-child(n){transition:color .2s}.assessment-running .assessment-fret-range{position:relative}.assessment-running .assessment-fret-range:before{content:"只可点击高亮品位";color:#778274;font-size:7px;position:absolute;top:0;right:0}.assessment-results{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}.assessment-actions{justify-content:center;align-items:center;gap:9px;margin-top:18px;display:flex}.assessment-actions .assessment-primary{margin:0}.assessment-skip{color:#a8b0a9;cursor:pointer;background:#202520;border:1px solid #424b43;border-radius:10px;height:44px;padding:0 18px;font-size:9px}.assessment-skip:hover{color:#dce2dc;border-color:#6b7b61}@media (width<=520px){.assessment-actions{flex-direction:column}.assessment-actions button{justify-content:center;width:100%}}.assessment-fret-range .string-row button.outside-assessment-range,.assessment-fret-range .string-label.outside-assessment-range{opacity:1;filter:none;background:inherit;cursor:not-allowed}.assessment-fret-range .string-row button.assessment-range-start{box-shadow:inset 3px 0 #b8ee50}.assessment-fret-range .string-row button.assessment-range-end{box-shadow:inset -3px 0 #b8ee50}.assessment-fret-range .string-row button.assessment-range-start.assessment-range-end{box-shadow:inset 3px 0 #b8ee50,inset -3px 0 #b8ee50}.assessment-fret-range .string-row button.outside-assessment-range{background:0 0!important}.rhythm-tool-switch{background:#111612;border:1px solid #303a31;border-radius:13px;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:22px;padding:5px;display:grid}.rhythm-tool-switch button{color:#7f8980;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:9px;justify-content:center;align-items:center;gap:10px;min-height:52px;display:flex}.rhythm-tool-switch button span{font-size:8px}.rhythm-tool-switch button strong{font-size:12px}.rhythm-tool-switch button.active{color:#d7ff75;background:#253020;border-color:#667d43;box-shadow:0 5px 18px #0003}.metronome-card.metronome-standalone{min-height:260px;margin:0}.metro-tempo{align-items:center;gap:8px;margin-top:16px;display:flex}.metro-tempo button{color:#d8dfd8;cursor:pointer;background:#252d26;border:1px solid #465345;border-radius:7px;width:34px;height:32px}.metro-tempo strong{text-align:center;color:#d7ff75;min-width:72px;font:500 18px DM Mono}.metro-tempo small{color:#788278;margin-left:3px;font-size:7px}@media (width<=520px){.rhythm-tool-switch button{flex-direction:column;gap:3px}.metronome-card.metronome-standalone{min-height:0}}