@layer theme{:root,:host{--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.visible{visibility:visible}.relative{position:relative}.static{position:static}.block{display:block}.grid{display:grid}.resize{resize:both}}:root{color:#edf1f4;font-synthesis:none;background:#11151d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{opacity:.42;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,[role=button]:focus-visible{outline-offset:3px;outline:2px solid #efb66e}p,h1,h2,h3{margin-top:0}p{color:#9eacb9;line-height:1.5}.app-shell{background:radial-gradient(circle at 85% -10%,#243041,#11151d 34%);min-height:100vh;padding-bottom:98px}.topbar{z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#151b25e8;border-bottom:1px solid #27303d;justify-content:space-between;align-items:center;height:76px;padding:0 max(24px,50vw - 550px);display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;display:flex}.brand-mark{color:#16202c;letter-spacing:-1px;background:#e9ae6a;border-radius:12px;place-items:center;width:40px;height:40px;font-size:13px;font-weight:900;display:grid}.brand strong{letter-spacing:-.5px;font-size:18px;display:block}.brand small{color:#82919f;letter-spacing:2px;margin-top:2px;font-size:9px;display:block}.sound-pill,.offline-badge{color:#91d3b3;background:#1d3433;border:1px solid #3b5b58;border-radius:30px;padding:8px 13px;font-size:12px;font-weight:700}.sound-pill.muted{color:#f0b887;background:#322b29;border-color:#685d50}.offline-badge{white-space:nowrap;background:0 0;border-color:#31453f;padding:6px 10px}.content{max-width:1100px;margin:auto;padding:38px 24px 54px}.page-heading{justify-content:space-between;align-items:end;gap:16px;margin-bottom:25px;display:flex}.page-heading h1{letter-spacing:-1.6px;margin:8px 0 0;font-size:clamp(30px,5vw,44px);line-height:1.1}.eyebrow{color:#dca66d;letter-spacing:2px;margin:0;font-size:10px;font-weight:800}.intro-card{background:linear-gradient(110deg,#293b46,#24343b 55%,#2b3941);border:1px solid #40515b;border-radius:22px;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;padding:30px 34px;display:flex;overflow:hidden}.intro-card h2{letter-spacing:-1px;margin:8px 0;font-size:clamp(24px,4vw,34px)}.intro-card p:last-child{color:#b6c3c8;max-width:520px;margin:0;font-size:14px}.pulse-icon{color:#f3b978;background:#ffffff0d;border:1px solid #ffffff35;border-radius:50%;flex:none;place-items:center;width:104px;height:104px;font-size:58px;display:grid;box-shadow:0 0 0 20px #ffffff07}.card{background:#1b222d;border:1px solid #2e3a48;border-radius:20px;margin-bottom:18px;padding:26px;box-shadow:0 12px 35px #080c1455}.section-head{justify-content:space-between;align-items:start;gap:14px;margin-bottom:20px;display:flex}.section-head h3,.card h3{letter-spacing:-.3px;margin:0 0 4px;font-size:18px}.section-head p{margin:0;font-size:13px}.subtle-button,.secondary-button{color:#e6ebef;background:#25303d;border:1px solid #465667;border-radius:10px;padding:11px 15px;font-size:13px;font-weight:700}.primary-button{color:#22252b;background:#efb66e;border:1px solid #efb66e;border-radius:10px;min-height:44px;padding:12px 18px;font-size:13px;font-weight:850;box-shadow:0 5px 15px #0003}.primary-button:hover{background:#ffd19a}.secondary-button:hover,.subtle-button:hover{background:#334252}.compact{padding:9px 15px}.button-row{flex-wrap:wrap;gap:9px;margin:20px 0 0;display:flex}.fret-pages,.type-pills{flex-wrap:wrap;gap:8px;margin-bottom:17px;display:flex}.fret-pages button,.type-pills button{color:#bdc8d2;background:#242f3b;border:1px solid #3c4958;border-radius:9px;min-height:39px;padding:8px 12px;font-size:12px;font-weight:700}.fret-pages button.active,.type-pills button.active,.example-grid button.active{color:#ffd59b;background:#3d4548;border-color:#e9ae6a}.fretboard{touch-action:manipulation;background:#151d28;border-radius:16px;width:100%;max-width:660px;margin:0 auto;display:block}.svg-fret-label{fill:#a6b2bf;font-size:12px;font-weight:700}.svg-string-label{fill:#f4bf85;font-size:13px;font-weight:800}.svg-note{fill:#f7f5ef;pointer-events:none;font-size:13px;font-weight:800}.selected-note{background:#222f3b;border-radius:14px;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;padding:16px 18px;display:flex}.selected-note strong{margin:4px 0;font-size:25px;display:block}.selected-note small{color:#a6b5c3;display:block}.field-row{grid-template-columns:1fr 1fr;gap:14px;margin:15px 0;display:grid}label{color:#b8c4ce;font-size:13px;font-weight:700;display:block}select,input[type=text],.add-row input{color:#f0f3f5;background:#121a24;border:1px solid #465565;border-radius:9px;width:100%;min-height:45px;margin-top:8px;padding:9px 12px;display:block}select:focus,input:focus{border-color:#e9ae6a}input[type=range]{accent-color:#e9ae6a;width:100%;margin:16px 0 6px;display:block}input[type=checkbox]{accent-color:#e9ae6a;width:21px;height:21px}.note-chips{flex-wrap:wrap;gap:7px;margin:20px 0 12px;display:flex}.note-chips span{color:#f5d1a6;background:#2b3b46;border:1px solid #4c6070;border-radius:8px;padding:8px 12px;font-size:13px;font-weight:800}.example-grid{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px;display:grid}.example-grid button{text-align:left;color:#ecf0f2;background:#232e39;border:1px solid #3b4a58;border-radius:10px;min-height:70px;padding:11px}.example-grid strong,.example-grid small{display:block}.example-grid small{color:#9eafbc;margin-top:4px;font-size:11px}.chord-track{background:#131b25;border-radius:12px;flex-wrap:wrap;gap:8px;padding:14px;display:flex}.track-chord{background:#24303c;border:1px solid #3b4c59;border-radius:10px;flex:1;min-width:108px;padding:10px 12px}.track-chord.playing{background:#4a3b34;border-color:#f6bd78;box-shadow:0 0 0 2px #e9ae6a55}.track-chord span,.track-chord small{color:#9aabb8;font-size:11px;display:block}.track-chord strong{margin:4px 0;font-size:19px;display:block}.track-chord div{gap:6px;margin-top:7px;display:flex}.track-chord button{color:#f0c38b;background:#303f4b;border:1px solid #4c5b68;border-radius:6px;min-width:32px;min-height:30px}.toggle-row{gap:24px;margin:14px 0;display:flex}.toggle-row label{align-items:center;gap:8px;display:flex}.add-row{gap:8px;margin-top:20px;display:flex}.add-row input{margin:0}.add-row button{color:#f0d2aa;background:#314453;border:1px solid #54616a;border-radius:9px;min-width:77px;font-weight:700}.helper{color:#8293a2;margin:13px 0 0;font-size:12px}.voice-note{border-top:1px solid #344250;margin-top:23px;padding-top:16px}.voice-note span,.explanation span{color:#eab275;letter-spacing:1.5px;font-size:10px;font-weight:800}.voice-note p{margin:6px 0 0;font-size:12px;line-height:1.8}.ab-grid{grid-template-columns:1fr 1fr;gap:12px;margin:22px 0;display:grid}.ab-grid>div{background:#27323d;border:1px solid #45515d;border-radius:14px;flex-direction:column;align-items:start;min-height:160px;padding:20px;display:flex}.ab-grid h3{margin:11px 0 auto;font-size:19px}.ab-grid button{margin-top:14px}.explanation,.feedback{background:#243b38;border:1px solid #4b796a;border-radius:12px;margin-top:20px;padding:18px}.explanation strong{color:#dbf1df;margin-top:8px;display:block}.explanation p,.feedback p{margin:8px 0 0;font-size:13px}.question-box{background:#253542;border-radius:14px;margin:8px 0 18px;padding:22px}.question-box h3{margin:8px 0;font-size:23px}.question-box p{font-size:13px}.question-box small{color:#9aadb8;margin-top:12px;display:block}.choice-grid{grid-template-columns:repeat(2,1fr);gap:8px;display:grid}.choice-grid button{text-align:left;color:#e8eef1;background:#263441;border:1px solid #465767;border-radius:10px;min-height:48px;padding:11px 14px;font-size:13px;font-weight:700}.choice-grid button:hover:not(:disabled){border-color:#e9ae6a}.choice-grid button.correct{color:#d6f2da;opacity:1;background:#254539;border-color:#79c399}.choice-grid button.wrong{color:#ffdfd6;opacity:1;background:#513736;border-color:#e28176}.feedback{background:#473733;border-color:#b77760}.feedback.success{background:#243b38;border-color:#4b796a}.feedback strong{display:block}.feedback span,.feedback small{color:#f1c294;margin-top:9px;font-size:12px;display:block}.feedback button{margin-top:18px;display:block}.history>div{border-bottom:1px solid #303e4a;align-items:center;gap:10px;padding:10px 0;display:flex}.history>div:last-child{border-bottom:0}.history span{color:#9addac;font-weight:800}.history strong{text-transform:capitalize;font-size:13px}.history small{color:#94a5b3;margin-left:auto}.settings-card{gap:20px;display:grid}.setting{border-bottom:1px solid #31404c;justify-content:space-between;align-items:center;padding-bottom:14px;display:flex}.setting p{margin:3px 0 0;font-size:12px}.notice{color:#ffd9c9;background:#44332f;border:1px solid #ad7763;border-radius:10px;margin-bottom:16px;padding:12px 15px;font-size:13px}.bottom-nav{z-index:20;padding:9px 16px max(9px,env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#151c26ed;border-top:1px solid #34414e;justify-content:center;gap:4px;display:flex;position:fixed;bottom:0;left:0;right:0}.bottom-nav button{color:#8fa1b0;background:0 0;border:0;border-radius:10px;justify-items:center;gap:3px;min-width:92px;padding:7px 8px;display:grid}.bottom-nav button span{font-size:20px}.bottom-nav button small{font-size:10px;font-weight:700}.bottom-nav button.selected{color:#ffd09a;background:#38414a}@media(max-width:700px){.topbar{height:68px;padding:0 16px}.content{padding:23px 15px 45px}.page-heading{align-items:center}.page-heading h1{font-size:31px}.offline-badge{font-size:10px}.intro-card{min-height:146px;padding:22px}.intro-card h2{font-size:25px}.intro-card p:last-child{font-size:12px}.pulse-icon{width:62px;height:62px;font-size:36px;box-shadow:0 0 0 12px #ffffff06}.card{border-radius:16px;padding:18px}.bottom-nav{justify-content:space-between;gap:0;padding-left:4px;padding-right:4px}.bottom-nav button{flex:1;min-width:0;padding:5px 2px}.bottom-nav button small{white-space:nowrap;font-size:8px}.bottom-nav button span{font-size:19px}.example-grid{grid-template-columns:repeat(2,1fr)}.ab-grid{gap:8px}.ab-grid>div{min-height:160px;padding:14px}.ab-grid h3{font-size:15px}.ab-grid .primary-button{padding:9px 11px}.field-row{gap:9px}.section-head h3{font-size:16px}}@media(max-width:360px){.intro-card{padding:18px}.pulse-icon,.offline-badge{display:none}.bottom-nav button small{font-size:7px}.fretboard{min-width:290px}.ab-grid{grid-template-columns:1fr}.ab-grid>div{min-height:125px}}@media(prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.position-controls{border:1px solid #354555;border-radius:10px;margin-top:14px;padding:10px 13px}.position-controls summary{color:#afc0cd;cursor:pointer;font-size:12px;font-weight:700}.position-controls .secondary-button{margin-bottom:5px}@media(max-width:700px){.fretboard{width:calc(100% + 20px);max-width:none;margin-left:-10px}}.fretboard-scroll{overscroll-behavior-x:contain;scrollbar-color:#78624e #1b232d;background:#151d28;border-radius:16px;overflow-x:auto}.fretboard-scroll:focus-visible{outline-offset:3px;outline:2px solid #efb66e}.fretboard-scroll .fretboard{touch-action:auto;background:0 0;border-radius:0;width:auto;min-width:0;max-width:none;margin:0}.fret-position:not(.selected):hover .note-target,.fret-position:not(.selected):focus-visible .note-target{fill:#e9ae6a88;stroke:#f3c48c}.fretboard-hint{color:#aebbc7;margin:9px 0 0;font-size:12px;display:none}@media(max-width:700px){.fretboard-scroll{margin:0 -18px;overflow-x:visible}.fretboard-scroll .fretboard.vertical{width:100%;height:auto}.fretboard-hint{display:block}}.fretboard-modes{gap:7px;margin:0 0 16px;display:flex}.fretboard-modes button{color:#bdc8d2;background:#25303b;border:1px solid #435261;border-radius:9px;min-height:42px;padding:8px 13px;font-size:12px;font-weight:750}.fretboard-modes button.active{color:#ffd59b;background:#3d4548;border-color:#e9ae6a}.fretboard-quiz{background:#27362f;border:1px solid #526050;border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;padding:12px 16px;display:flex}.fretboard-quiz strong{margin:2px 0;font-size:27px;line-height:1.1;display:block}.fretboard-quiz small{color:#b5c7bb;font-size:11px;display:block}.fretboard-quiz label{min-width:120px}.fretboard-quiz select{min-height:38px;margin-top:4px}.quiz-feedback{border-radius:9px;margin:0 0 12px;padding:9px 12px;font-size:12px;font-weight:700}.quiz-feedback.correct{color:#bde8cd;background:#234535}.quiz-feedback.wrong{color:#ffd2c9;background:#4b3030}.quiz-guidance{margin:0 0 12px;font-size:12px}.fretboard-quiz strong em{color:#b5c7bb;margin-left:8px;font-size:12px;font-style:normal;font-weight:650}@media(max-width:700px){.fretboard-page .topbar,.fretboard-page .page-heading,.fretboard-page .intro-card{display:none}.fretboard-page .content{padding:0 15px 20px}.fretboard-page .fretboard-card{border-radius:0 0 16px 16px;padding:4px 18px 16px}.fretboard-card .section-head{align-items:center;margin-bottom:4px}.fretboard-card .section-head h3{margin:0;font-size:14px}.fretboard-card .section-head p{display:none}.fretboard-card .section-head .subtle-button{min-height:34px;padding:6px 9px;font-size:11px}.fretboard-modes{gap:4px;margin-bottom:4px}.fretboard-modes button{flex:1;min-height:34px;padding:5px 3px;font-size:10px}.fretboard-quiz{gap:5px;margin-bottom:4px;padding:5px 9px}.fretboard-quiz>div{flex:1;min-width:0}.fretboard-quiz strong{white-space:nowrap;font-size:20px}.fretboard-quiz strong em{margin-left:4px;font-size:9px}.fretboard-quiz small{-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;display:-webkit-box;overflow:hidden}.fretboard-quiz label{min-width:105px;font-size:10px}.fretboard-quiz select{min-height:30px;padding:3px 8px}.fretboard-quiz .secondary-button{min-height:34px;padding:5px 8px;font-size:10px}.quiz-guidance,.fretboard-hint{display:none}.fretboard-page .fretboard-scroll .fretboard.vertical{height:min(586px,100dvh - 180px)}.fretboard-page .fretboard-card.practice .fretboard.vertical{height:min(586px,100dvh - 255px)}}