@font-face{font-display:swap;font-family:Playfair Display;font-style:normal;font-weight:400;src:url(fonts/playfair-display-v40-latin-regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:Playfair Display;font-style:normal;font-weight:700;src:url(fonts/playfair-display-v40-latin-700.woff2) format("woff2")}@font-face{font-display:swap;font-family:Playfair Display;font-style:normal;font-weight:900;src:url(fonts/playfair-display-v40-latin-900.woff2) format("woff2")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:300;src:url(fonts/dm-sans-v17-latin-300.woff2) format("woff2")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:400;src:url(fonts/dm-sans-v17-latin-regular.woff2) format("woff2")}@font-face{font-display:swap;font-family:DM Sans;font-style:normal;font-weight:500;src:url(fonts/dm-sans-v17-latin-500.woff2) format("woff2")}:root{--bg:#0a0a0f;--bg2:#111118;--bg3:#1a1a24;--bg4:#22222e;--acc:#c8a96e;--acc2:#7ec8a9;--acc3:#8896c8;--txt:#e8e4dc;--mut:#8a8478;--brd:rgba(200,169,110,.18);--brd2:rgba(200,169,110,.07);--r:10px;--rl:14px;--c-quint:#c8a96e;--c-chord:#7ec8a9;--c-scale:#8896c8;--c-tool:#d49a8a}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--txt);font-family:DM Sans,sans-serif;font-size:16px;line-height:1.65;overflow-x:hidden}body>nav:first-of-type{position:sticky;top:0;z-index:100;background:#0a0a0ff5;backdrop-filter:blur(12px);border-bottom:1px solid var(--brd);padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;height:56px}.nav-brand{font-family:Playfair Display,serif;font-size:1.25rem;color:var(--acc);text-decoration:none}.nav-links{display:flex;gap:0;list-style:none}.nav-links a{color:var(--mut);text-decoration:none;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;padding:.35rem .85rem;border-radius:50px;transition:color .2s,background .2s}.nav-links a:hover,.nav-links a.active{color:var(--acc);background:#c8a96e14}.hero{max-width:1000px;margin:0 auto;padding:3rem 1.5rem 2rem}.hero-eyebrow{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);font-weight:500;margin-bottom:.75rem}.hero h1{font-family:Playfair Display,serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:900;color:#fff;line-height:1.1;margin-bottom:.85rem}.hero h1 em{color:var(--acc);font-style:normal}.hero-desc{color:var(--mut);font-size:1.05rem;max-width:620px;line-height:1.7;margin-bottom:1.5rem}.hero-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.75rem}.tag{background:var(--bg3);border:1px solid var(--brd);color:var(--mut);font-size:.78rem;padding:.25rem .65rem;border-radius:50px}.tag.hot{background:#c8a96e1a;border-color:#c8a96e4d;color:var(--acc)}.btn-main{display:inline-flex;align-items:center;gap:.5rem;background:var(--acc);color:#0a0a0f;padding:.8rem 1.75rem;border-radius:50px;font-weight:700;font-size:.95rem;text-decoration:none;transition:transform .18s,box-shadow .18s;margin-right:.75rem}.btn-main:hover{transform:translateY(-2px);box-shadow:0 8px 28px #c8a96e40}.btn-ghost{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--brd);color:var(--txt);padding:.8rem 1.4rem;border-radius:50px;font-weight:500;font-size:.92rem;text-decoration:none;transition:border-color .2s}.btn-ghost:hover{border-color:var(--acc)}hr.div{border:none;border-top:1px solid var(--brd2)}section{padding:2.5rem 1.5rem}.container{max-width:1000px;margin:0 auto}.sec-label{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);font-weight:500;margin-bottom:.4rem}.sec-title{font-family:Playfair Display,serif;font-size:clamp(1.4rem,2.5vw,2rem);color:#fff;line-height:1.2;margin-bottom:.75rem}.sec-desc{color:var(--mut);max-width:680px;margin-bottom:2rem;font-size:.95rem;line-height:1.65}.features-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;margin-bottom:2rem}.feat-card{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);padding:1.35rem 1.5rem;transition:border-color .2s,transform .18s;position:relative;overflow:hidden}.feat-card:hover{border-color:var(--acc);transform:translateY(-2px)}.feat-card .feat-icon{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:1.25rem;margin-bottom:.85rem}.feat-card h3{font-family:Playfair Display,serif;font-size:1.05rem;color:#fff;margin-bottom:.45rem}.feat-card p{color:var(--mut);font-size:.88rem;line-height:1.6}.feat-card.fc-quint .feat-icon{background:#c8a96e24;color:var(--c-quint)}.feat-card.fc-quint:hover{border-color:var(--c-quint)}.feat-card.fc-chord .feat-icon{background:#7ec8a924;color:var(--c-chord)}.feat-card.fc-chord:hover{border-color:var(--c-chord)}.feat-card.fc-scale .feat-icon{background:#8896c824;color:var(--c-scale)}.feat-card.fc-scale:hover{border-color:var(--c-scale)}.feat-card.fc-tool .feat-icon{background:#d49a8a24;color:var(--c-tool)}.feat-card.fc-tool:hover{border-color:var(--c-tool)}.detail-block{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);padding:1.5rem 1.75rem;margin-bottom:1rem;border-left:3px solid var(--brd)}.detail-block.db-chord{border-left-color:var(--c-chord)}.detail-block.db-quint{border-left-color:var(--c-quint)}.detail-block.db-scale{border-left-color:var(--c-scale)}.detail-block h3{font-family:Playfair Display,serif;font-size:1.2rem;color:#fff;margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem}.detail-block h3 .icon{font-size:1.1rem}.detail-block p{color:var(--mut);font-size:.92rem;line-height:1.65;margin-bottom:.6rem}.detail-block p:last-child{margin-bottom:0}.detail-block ul{color:var(--mut);padding-left:1.2rem;font-size:.92rem}.detail-block ul li{margin-bottom:.3rem;line-height:1.55}.detail-block ul li::marker{color:var(--acc)}.detail-block strong{color:var(--txt)}.sec-quint .sec-label{color:var(--c-quint)}.sec-chord .sec-label{color:var(--c-chord)}.sec-scale .sec-label{color:var(--c-scale)}.sec-tool .sec-label{color:var(--c-tool)}.sec-header{position:relative;padding-left:1.2rem;margin-bottom:1.75rem}.sec-header:before{content:"";position:absolute;left:0;top:.3rem;bottom:.3rem;width:4px;border-radius:4px}.sec-header.h-quint:before{background:var(--c-quint)}.sec-header.h-chord:before{background:var(--c-chord)}.sec-header.h-scale:before{background:var(--c-scale)}.sec-header.h-tool:before{background:var(--c-tool)}.sec-header .sec-label{margin-bottom:.4rem}.sec-header .sec-title{margin-bottom:0}.fretboards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem;margin-top:1rem}.fretboard-card{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:1.25rem;text-align:center}.fretboard-card .fb-label{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--c-chord);font-weight:600;margin-bottom:.4rem}.fretboard-card h4{font-family:Playfair Display,serif;font-size:1.1rem;color:#fff;margin-bottom:.85rem}.fretboard-card svg{display:block;margin:0 auto .85rem}.fretboard-card .fb-info{color:var(--mut);font-size:.82rem;line-height:1.5}.cof-wrap{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:1.5rem;margin-top:1rem}.cof-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:start}@media(min-width:760px){.cof-grid{grid-template-columns:1fr 1fr}}.cof-svg-wrap{display:flex;align-items:center;justify-content:center}.cof-svg{width:100%;max-width:420px;height:auto;display:block}.cof-segment{cursor:pointer;transition:opacity .15s}.cof-segment:hover{opacity:.85}.cof-segment.active path{stroke:#fff;stroke-width:2}.cof-info{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);padding:1.25rem 1.4rem}.cof-info-eyebrow{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--c-quint);font-weight:600;margin-bottom:.4rem}.cof-info h4{font-family:Playfair Display,serif;font-size:1.5rem;color:#fff;margin-bottom:.85rem}.cof-row{display:flex;justify-content:space-between;align-items:baseline;padding:.4rem 0;border-bottom:1px solid var(--brd2);font-size:.88rem}.cof-row:last-of-type{border-bottom:none}.cof-row .lbl{color:var(--mut);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}.cof-row .val{color:var(--txt);font-weight:500}.cof-row .val.acc{color:var(--c-quint);font-family:Playfair Display,serif;font-size:1rem}.cof-stufen{margin-top:.85rem}.cof-stufen-title{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mut);margin-bottom:.5rem}.cof-stufen-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem}.cof-stufen-item{background:var(--bg3);border:1px solid var(--brd2);border-radius:6px;padding:.4rem .2rem;text-align:center}.cof-stufen-item .roman{font-size:.65rem;color:var(--mut);font-weight:600}.cof-stufen-item .chord{font-size:.85rem;color:var(--txt);font-weight:600;font-family:Playfair Display,serif}.cof-stufen-item.tonika{border-color:#c8a96e66;background:#c8a96e14}.cof-stufen-item.tonika .chord{color:var(--c-quint)}.version-box{background:var(--bg3);border:1px solid var(--brd);border-radius:var(--rl);padding:1.35rem 1.5rem;margin-top:1.5rem}.version-box h3{font-family:Playfair Display,serif;font-size:1rem;color:var(--acc);margin-bottom:.75rem}.version-box ul{color:var(--mut);padding-left:1.2rem;font-size:.88rem}.version-box ul li{margin-bottom:.3rem}.version-box ul li::marker{color:var(--acc2)}.lang-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.75rem}.lang-pill{background:var(--bg3);border:1px solid var(--brd);border-radius:50px;padding:.25rem .75rem;font-size:.82rem;color:var(--mut)}.offline-banner{background:#7ec8a914;border:1px solid rgba(126,200,169,.25);border-radius:var(--rl);padding:1rem 1.35rem;display:flex;align-items:center;gap:.85rem;margin-top:1.5rem}.offline-banner .dot{width:10px;height:10px;border-radius:50%;background:var(--acc2);flex-shrink:0}.offline-banner p{color:var(--acc2);font-size:.9rem;font-weight:500}.cta-banner{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);padding:1.75rem 2rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:2rem;flex-wrap:wrap}.cta-banner h3{font-family:Playfair Display,serif;font-size:1.25rem;color:#fff;margin-bottom:.3rem}.cta-banner p{color:var(--mut);font-size:.88rem;max-width:500px}.other-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.75rem}.other-app{background:var(--bg2);border:1px solid var(--brd2);border-radius:var(--r);padding:1rem 1.1rem}.other-app h3{font-size:.9rem;color:var(--txt);font-weight:600;margin-bottom:.25rem}.other-app p{font-size:.8rem;color:var(--mut);line-height:1.5;margin-bottom:.5rem}.other-app a{font-size:.78rem;color:var(--acc);text-decoration:none}.other-app a:hover{text-decoration:underline}footer{background:var(--bg2);border-top:1px solid var(--brd);padding:1.75rem 1.5rem;text-align:center}.footer-brand{font-family:Playfair Display,serif;font-size:1.15rem;color:var(--acc);margin-bottom:.5rem}footer p{color:var(--mut);font-size:.82rem;margin-bottom:.3rem}footer a{color:var(--mut);text-decoration:none}footer a:hover{color:var(--acc)}.footer-links{display:flex;gap:1.2rem;justify-content:center;margin:.75rem 0;flex-wrap:wrap}.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:36px;height:36px;gap:5px;background:none;border:none;cursor:pointer;padding:4px;border-radius:8px}.nav-toggle span{display:block;width:20px;height:2px;background:var(--mut);border-radius:2px;transition:transform .25s,opacity .25s,background .2s}.nav-toggle:hover span{background:var(--acc)}.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.lang-switch{display:flex;align-items:center;gap:.4rem;text-decoration:none;color:var(--mut);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;padding:.35rem .7rem;border-radius:50px;border:1px solid var(--brd);transition:color .2s,background .2s,border-color .2s;margin-right:.5rem}.lang-switch:hover{color:var(--acc);border-color:var(--acc);background:#c8a96e0d}.lang-switch .flag{font-size:1.05rem;line-height:1;filter:saturate(1.1)}.nav-actions{display:flex;align-items:center;gap:.4rem}@media(max-width:768px){.nav-toggle{display:flex}.nav-links{display:none;position:absolute;top:56px;left:0;right:0;background:#0a0a0ffa;backdrop-filter:blur(16px);border-bottom:1px solid var(--brd);flex-direction:column;padding:.5rem 1rem 1rem;gap:.15rem;z-index:99}.nav-links.open{display:flex}.nav-links li{width:100%}.nav-links a{display:block;padding:.65rem 1rem;border-radius:8px;font-size:.85rem}section{padding:2rem 1rem}.hero{padding:2rem 1rem 1.5rem}.cta-banner{flex-direction:column}.lang-switch{padding:.3rem .55rem;font-size:.72rem}}.skip-nav{position:absolute;top:-100px;left:1rem;background:var(--acc);color:#0a0a0f;padding:.6rem 1.2rem;border-radius:0 0 8px 8px;font-weight:700;font-size:.9rem;text-decoration:none;z-index:9999;transition:top .2s}.skip-nav:focus{top:0}.theme-toggle-wrapper{padding:.75rem 1.5rem 0;display:flex;justify-content:flex-end}.theme-toggle-btn{background:transparent;border:1px solid var(--brd);color:var(--mut);padding:.4rem .95rem;border-radius:50px;font-family:DM Sans,sans-serif;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;font-weight:500;cursor:pointer;transition:color .2s,border-color .2s,background .2s;display:inline-flex;align-items:center;gap:.4rem}.theme-toggle-btn:hover{color:var(--acc);border-color:var(--acc);background:#c8a96e0f}.theme-toggle-btn .theme-icon{font-size:.95rem}html.light-mode{--bg:#faf7f2;--bg2:#ffffff;--bg3:#f3ede2;--bg4:#e8dfce;--txt:#2a241b;--mut:#6b6356;--brd:rgba(200,169,110,.35);--brd2:rgba(200,169,110,.15)}html.light-mode body{background:var(--bg);color:var(--txt)}html.light-mode body>nav:first-of-type{background:#faf7f2f5;border-bottom:1px solid var(--brd)}html.light-mode .hero h1,html.light-mode .sec-title,html.light-mode .feat-card h3,html.light-mode .detail-block h3,html.light-mode .cta-banner h3,html.light-mode .fretboard-card h4,html.light-mode .cof-info h4,html.light-mode h1,html.light-mode h2,html.light-mode h3,html.light-mode h4{color:#1a1612}html.light-mode .hero h1 em{color:var(--acc)}html.light-mode .btn-main{color:#fffaf0}html.light-mode .btn-main:hover{box-shadow:0 8px 28px #c8a96e59}html.light-mode .btn-ghost{color:var(--txt)}html.light-mode .nav-links a:hover,html.light-mode .nav-links a.active{background:#c8a96e26}html.light-mode .tag.hot{background:#c8a96e2e}html.light-mode .tag{background:var(--bg3);color:var(--txt)}html.light-mode .skip-nav{color:#1a1612}html.light-mode .feat-card,html.light-mode .detail-block,html.light-mode .cta-banner,html.light-mode .fretboard-card,html.light-mode .cof-info{background:var(--bg2)}html.light-mode .offline-banner{background:#7ec8a926;border-color:#7ec8a966}html.light-mode .offline-banner p{color:#3a7a5e}html.light-mode .feat-card.fc-quint .feat-icon{background:#c8a96e33}html.light-mode .feat-card.fc-chord .feat-icon{background:#7ec8a933}html.light-mode .feat-card.fc-scale .feat-icon{background:#8896c833}html.light-mode .feat-card.fc-tool .feat-icon{background:#d49a8a33}@media(max-width:760px){html.light-mode .nav-links{background:#faf7f2fa}}body,.feat-card,.tag,.btn-main,.btn-ghost,.theme-toggle-btn,body>nav:first-of-type{transition:background .3s ease,color .3s ease,border-color .3s ease}.lang-multi{display:inline-flex;gap:.15rem;border:1px solid var(--brd);border-radius:50px;padding:.2rem;margin-right:.4rem;background:#00000026}.lang-multi a{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .6rem;border-radius:50px;text-decoration:none;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--mut);line-height:1;opacity:.65;transition:opacity .15s,background .15s,color .15s}.lang-multi a .flag{width:18px;height:13px;display:inline-block;border-radius:2px;overflow:hidden;flex-shrink:0;box-shadow:0 0 0 .5px #ffffff26}.lang-multi a .flag svg{display:block;width:100%;height:100%}.lang-multi a:hover{opacity:1;background:#c8a96e1a;color:var(--acc)}.lang-multi a.active{opacity:1;background:#c8a96e2e;color:var(--acc);box-shadow:inset 0 0 0 1.5px var(--acc);cursor:default}@media(max-width:768px){.lang-multi a{padding:.25rem .45rem;font-size:.66rem;gap:.28rem}.lang-multi a .flag{width:16px;height:11px}}.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;margin-top:1.25rem}.guide-card{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);padding:1.4rem 1.5rem}.guide-card h3{font-family:Playfair Display,serif;font-size:1.1rem;color:#fff;margin-bottom:.55rem}.guide-card p{color:var(--mut);font-size:.9rem;line-height:1.65;margin-bottom:.55rem}.guide-card p:last-child{margin-bottom:0}.guide-card strong{color:var(--txt)}html.light-mode .guide-card{background:var(--bg2)}html.light-mode .guide-card h3{color:#1a1612}.prose{color:var(--mut);font-size:.95rem;line-height:1.75;max-width:780px}.prose p{margin-bottom:.9rem}.prose strong{color:var(--txt)}.prose h3{font-family:Playfair Display,serif;color:#fff;font-size:1.15rem;margin:1.4rem 0 .55rem}html.light-mode .prose h3{color:#1a1612}.prose ul{padding-left:1.2rem;margin-bottom:.9rem}.prose ul li{margin-bottom:.3rem}.prose ul li::marker{color:var(--acc)}.faq-list{display:flex;flex-direction:column;gap:.65rem;margin-top:1.25rem}.faq-item{background:var(--bg2);border:1px solid var(--brd);border-radius:var(--rl);overflow:hidden}html.light-mode .faq-item{background:var(--bg2)}.faq-item summary{cursor:pointer;list-style:none;padding:1rem 1.3rem;font-family:Playfair Display,serif;font-size:1rem;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem}html.light-mode .faq-item summary{color:#1a1612}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{content:"+";font-size:1.3rem;color:var(--acc);font-weight:400;transition:transform .2s}.faq-item[open] summary:after{content:"–"}.faq-item .faq-a{padding:0 1.3rem 1.1rem;color:var(--mut);font-size:.92rem;line-height:1.7}.faq-item .faq-a p{margin-bottom:.55rem}.faq-item .faq-a p:last-child{margin-bottom:0}.faq-item .faq-a strong{color:var(--txt)}.term-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.85rem;margin-top:1.25rem}.term-card{background:var(--bg3);border:1px solid var(--brd2);border-radius:var(--r);padding:.95rem 1.1rem}.term-card .term{font-family:Playfair Display,serif;font-size:.98rem;color:var(--acc);font-weight:700;margin-bottom:.3rem}.term-card .def{color:var(--mut);font-size:.85rem;line-height:1.55}html.light-mode .term-card{background:var(--bg3)}