:root {
  color-scheme: light;
  --paper: #f7f6f1;
  --white: #fffefa;
  --ink: #1c2926;
  --muted: #74817b;
  --green: #193b35;
  --green-2: #28564c;
  --green-soft: #e3ece4;
  --lime: #d9eea9;
  --coral: #ee7459;
  --line: #e7e8e0;
  --font: 'DM Sans', 'Segoe UI', sans-serif;
  --display: 'Manrope', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 15px; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid #e6a946; outline-offset: 3px; }
.app-shell { max-width: 1520px; min-height: 100vh; margin: 0 auto; padding: 0 56px; }
.topbar { height: 90px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid #e7e7df; }
.brand { display: inline-flex; align-items: center; gap: 11px; width: max-content; text-decoration: none; color: var(--green); font-family: var(--display); font-size: 23px; font-weight: 800; letter-spacing: -1.4px; }
.brand-dot { color: var(--coral); }
.brand-mark { width: 24px; height: 25px; position: relative; display: flex; justify-content: center; gap: 3px; align-items: center; transform: rotate(17deg); }
.brand-mark i { height: 22px; width: 2px; background: var(--green); border-radius: 2px; }
.brand-mark i:nth-child(2) { height: 16px; }
.main-nav { display: flex; align-items: center; gap: 35px; height: 100%; }
.nav-link { position: relative; border: 0; background: none; padding: 12px 0; cursor: pointer; color: #78837d; font-size: 13px; font-weight: 600; transition: color .2s, transform .2s; }
.nav-link:hover, .nav-link.active { color: var(--green); }
.nav-link:hover { transform: translateY(-1px); }
.nav-link::after { content: ''; height: 2px; position: absolute; bottom: -1px; left: 0; right: 0; background: var(--coral); border-radius: 2px 2px 0 0; transform: scaleX(0); transform-origin: left center; transition: transform .24s cubic-bezier(.2,.7,.25,1); }
.nav-link.active::after { transform: scaleX(1); }
.progress-pill { justify-self: end; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 25px; background: transparent; color: #68736e; cursor: pointer; font-size: 11px; }
.progress-pill strong { color: var(--green); font-size: 12px; }
.progress-spark { font-size: 16px; color: var(--coral); }
.mobile-menu { display: none; }
.page { padding-top: 24px; animation: page-enter .44s cubic-bezier(.2,.75,.25,1) both; }
.page[hidden] { display: none; }
@keyframes page-enter { from { opacity: 0; transform: translateY(12px); filter: blur(2px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes content-rise { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chord-arrive { from { opacity: 0; transform: translateY(11px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

.hero { position: relative; min-height: 493px; overflow: hidden; display: grid; grid-template-columns: 1.03fr .97fr; border-radius: 9px; background: var(--green); color: #f9faf2; }
.hero::before { content: ''; position: absolute; inset: 0; opacity: .08; background-image: radial-gradient(#e6f1d5 .75px, transparent .75px); background-size: 11px 11px; pointer-events: none; }
.hero-copy { position: relative; z-index: 2; align-self: center; padding: 56px 4px 58px 70px; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #c0d1bd; font-size: 10px; font-weight: 700; letter-spacing: 1.55px; text-transform: uppercase; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px #d9eea920; }
.hero h1, .subpage-intro h1 { margin: 24px 0 16px; font-family: var(--display); font-size: clamp(43px, 5.1vw, 66px); line-height: 1.06; letter-spacing: -3.5px; font-weight: 700; }
.hero h1 em, .subpage-intro h1 em { color: var(--lime); font-style: normal; }
.hero-copy > p { max-width: 405px; margin: 0; color: #c2d0c8; line-height: 1.8; font-size: 14px; }
.hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 27px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 46px; padding: 0 19px; border: 0; border-radius: 5px; cursor: pointer; font-size: 12px; font-weight: 700; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover { transform: translateY(-2px); box-shadow: 0 8px 18px #112b2633; }
.button span { font-size: 15px; }
.button-lime { color: var(--green); background: var(--lime); }
.button-lime:hover { background: #e6f5c5; }
.button-dark { color: #fffefa; background: var(--green); }
.button-light { color: var(--green); background: #faf9f1; }
.text-button { display: inline-flex; gap: 10px; align-items: center; padding: 10px 0; border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 12px; font-weight: 700; }
.text-button span { font-size: 16px; transition: transform .18s; }
.text-button:hover span { transform: translateX(4px); }
.hero-note { display: flex; align-items: center; gap: 11px; margin-top: 42px; color: #b9c7c0; font-size: 10px; line-height: 1.55; }
.hero-note strong { color: #f7f8f1; font-size: 11px; }
.note-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #f1aa60; color: var(--green); font-size: 17px; }
.hero-art { position: relative; min-height: 493px; overflow: hidden; background: #244a41; }
.sun-disc { position: absolute; top: 69px; left: 50%; width: 325px; height: 325px; border-radius: 50%; transform: translateX(-50%); background: #d5e6b7; }
.sun-disc::before, .sun-disc::after { content: ''; position: absolute; border: 1px solid #f0f0d5; border-radius: 50%; inset: -18px; opacity: .45; }
.sun-disc::after { inset: -33px; opacity: .18; }
.guitar-illustration { position: absolute; top: -4px; left: calc(50% - 155px); width: 310px; height: 510px; filter: drop-shadow(12px 13px 8px #071d1c42); }
.art-caption { position: absolute; top: 41px; right: 34px; display: flex; align-items: center; gap: 8px; color: #c3d3be; font-size: 8px; font-weight: 700; letter-spacing: 1.3px; writing-mode: vertical-rl; }
.caption-line { width: 1px; height: 25px; background: #c3d3be; }
.floating-sticker { position: absolute; right: 48px; bottom: 44px; display: grid; place-content: center; width: 91px; height: 91px; border-radius: 50%; transform: rotate(9deg); background: var(--coral); color: white; text-align: center; font-size: 9px; font-weight: 700; line-height: 1.25; box-shadow: 0 8px 18px #102a2350; }
.floating-sticker span { margin-bottom: 2px; font-size: 18px; }
.art-scribble { position: absolute; left: 19px; bottom: 48px; color: #e5edc7; font-size: 36px; transform: rotate(-12deg); }
.hero-index { position: absolute; bottom: 24px; left: 30px; display: flex; align-items: center; gap: 10px; color: #adc1b6; font-size: 8px; letter-spacing: .8px; }
.hero-index span:first-child { color: var(--lime); }
.index-rule { width: 37px; height: 1px; background: #759287; }

.section-block { padding-top: 66px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 24px; }
.eyebrow-dark { color: #87958d; }
.section-heading h2 { margin: 9px 0 0; color: var(--green); font-family: var(--display); font-size: 29px; letter-spacing: -1.3px; }
.section-heading h2 em { color: #a5b968; font-style: normal; }
.section-heading > .text-button { color: var(--green); }
.journey-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.journey-card { position: relative; min-height: 185px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 17px 19px; border: 1px solid #e7e8df; border-radius: 6px; background: var(--white); cursor: pointer; transition: border .18s, transform .18s, box-shadow .18s; }
.journey-card:hover { transform: translateY(-3px); border-color: #b9c8a8; box-shadow: 0 9px 20px #3145370b; }
.journey-card-first { background: #f0f1e6; border-color: #f0f1e6; }
.step-number { color: #74837b; font-size: 9px; font-weight: 700; letter-spacing: .4px; }
.step-number span { color: #9aa49c; font-weight: 500; }
.step-icon { height: 44px; display: flex; align-items: center; color: var(--coral); font-size: 31px; line-height: 1; }
.icon-tune { color: #769475; }
.icon-chord { color: #bd8951; }
.icon-rhythm { color: #758b96; }
.journey-card strong { margin-bottom: 5px; color: var(--green); font-family: var(--display); font-size: 13px; letter-spacing: -.2px; }
.step-meta { max-width: 210px; color: #87918b; font-size: 10px; line-height: 1.45; }
.card-arrow { position: absolute; top: 14px; right: 16px; color: #a3ada5; font-size: 15px; }

.home-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding-top: 58px; }
.tool-card { position: relative; min-height: 236px; display: flex; overflow: hidden; padding: 28px 31px; border-radius: 7px; }
.chord-tool-card { background: #eae9df; }
.tuner-tool-card { background: #e1eae0; }
.tool-card-copy { z-index: 1; max-width: 64%; }
.mini-label { color: #7f8d84; font-size: 8px; font-weight: 700; letter-spacing: 1.15px; }
.tool-card h3 { margin: 9px 0 8px; color: var(--green); font-family: var(--display); font-size: 27px; line-height: 1.08; letter-spacing: -1px; }
.tool-card p { max-width: 250px; margin: 0 0 16px; color: #76837b; font-size: 10px; line-height: 1.55; }
.tool-card .button { min-height: 36px; padding: 0 13px; gap: 13px; font-size: 10px; }
.tool-card .button span { font-size: 13px; }
.mini-chord { position: absolute; right: 36px; top: 36px; width: 103px; height: 148px; border-radius: 53px 53px 8px 8px; background: #f5f3e9; transform: rotate(11deg); box-shadow: 8px 9px 18px #59625218; }
.mini-chord-title { position: absolute; left: 0; right: 0; top: 13px; color: #426254; text-align: center; font-family: var(--display); font-size: 15px; font-weight: 800; }
.mini-fret { position: absolute; left: 15px; right: 15px; height: 1px; background: #ced1c5; }
.mini-fret:nth-of-type(2) { top: 50px; }.mini-fret:nth-of-type(3) { top: 72px; }.mini-fret:nth-of-type(4) { top: 94px; }
.mini-strings { position: absolute; left: 20px; right: 20px; top: 39px; bottom: 25px; background: repeating-linear-gradient(90deg, transparent 0 10px, #9ba79a 10px 11px); }
.mini-chord .dot { position: absolute; z-index: 1; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }
.mini-chord .dot-a { left: 37px; top: 58px; }.mini-chord .dot-b { left: 59px; top: 80px; }
.tuner-tool-card { background: #2f5148; }
.tuner-tool-card .mini-label { color: #bed1c3; }
.tuner-tool-card h3 { color: #fbfbf4; }
.tuner-tool-card p { color: #c5d3ca; }
.tuner-mini-art { position: absolute; right: 26px; top: 35px; width: 180px; height: 164px; }
.mini-gauge { position: absolute; left: 16px; top: 0; width: 148px; height: 120px; overflow: hidden; border: 5px solid #c9dfa8; border-bottom: 0; border-radius: 100px 100px 0 0; }
.mini-gauge::before { content: ''; position: absolute; left: 12px; right: 12px; bottom: -2px; height: 54px; border: 1px solid #88a58d; border-bottom: 0; border-radius: 80px 80px 0 0; }
.mini-gauge i { position: absolute; left: 71px; bottom: -1px; width: 3px; height: 65px; border-radius: 4px; background: var(--coral); transform-origin: 50% 100%; transform: rotate(-22deg); }
.mini-gauge b { position: absolute; left: 52px; bottom: 9px; display: grid; place-items: center; width: 41px; height: 41px; border: 3px solid #fffefa; border-radius: 50%; background: #dcebab; color: var(--green); font-size: 20px; }
.gauge-tick { position: absolute; bottom: 6px; width: 3px; height: 11px; background: #a7c09e; }
.tick-left { left: 10px; transform: rotate(-42deg); }.tick-right { right: 10px; transform: rotate(42deg); }
.sound-wave { position: absolute; right: -5px; bottom: 7px; width: 43px; height: 43px; border: 1px solid #b6d099; border-radius: 50%; opacity: .55; }
.wave-two { right: -16px; bottom: -4px; width: 64px; height: 64px; opacity: .26; }
.site-footer { min-height: 74px; display: flex; align-items: center; justify-content: space-between; margin-top: 52px; border-top: 1px solid #e5e7df; color: #87928a; font-size: 10px; }
.site-footer > span:first-child { color: #68766e; font-weight: 600; }
.footer-heart { color: var(--coral); }

.subpage-intro { min-height: 247px; display: flex; align-items: center; justify-content: space-between; padding: 31px 4px 38px; }
.subpage-intro h1 { margin: 14px 0 13px; color: var(--green); font-size: 43px; line-height: 1.11; letter-spacing: -2.5px; }
.subpage-intro h1 em { color: #8b9f5d; }
.subpage-intro p { margin: 0; color: #7b8780; font-size: 12px; line-height: 1.7; }
.learn-progress-card { display: flex; align-items: center; gap: 14px; width: 232px; padding: 16px; border: 1px solid #e7e8df; border-radius: 7px; background: #fffefa; }
.progress-ring { display: grid; place-items: center; width: 47px; height: 47px; flex: 0 0 47px; border-radius: 50%; background: conic-gradient(var(--coral) 0deg, #e9ece4 0deg); position: relative; }
.progress-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fffefa; }
.progress-ring span { position: relative; color: var(--green); font-size: 11px; font-weight: 700; }
.learn-progress-card strong, .learn-progress-card div:last-child > span { display: block; }
.learn-progress-card strong { margin-bottom: 5px; color: var(--green); font-size: 11px; }
.learn-progress-card div:last-child > span { color: #89938b; font-size: 9px; line-height: 1.4; }
.learning-layout { display: grid; grid-template-columns: 258px 1fr; gap: 18px; align-items: start; }
.lesson-list, .lesson-content { border: 1px solid #e7e8df; border-radius: 7px; background: var(--white); }
.lesson-list { padding: 21px 17px 17px; }
.lesson-list-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 13px; color: #8c9890; font-size: 8px; font-weight: 700; letter-spacing: 1px; }
.lesson-list-heading span:last-child { color: var(--green); letter-spacing: 0; }
.lesson-nav-item { width: 100%; display: flex; gap: 11px; align-items: flex-start; padding: 12px 8px; border: 0; border-radius: 5px; background: transparent; text-align: left; cursor: pointer; }
.lesson-nav-item:hover { background: #f5f6ef; }
.lesson-nav-item.active { background: #edf1e4; }
.lesson-nav-number { flex: 0 0 24px; display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid #e2e7dd; border-radius: 50%; color: #7e8b80; font-size: 9px; font-weight: 700; }
.lesson-nav-item.active .lesson-nav-number { border-color: var(--green); background: var(--green); color: white; }
.lesson-nav-item.complete .lesson-nav-number { border-color: #a4bc77; background: #e2edca; color: var(--green); }
.lesson-nav-text strong, .lesson-nav-text small { display: block; }
.lesson-nav-text strong { margin: 2px 0 4px; color: #41564b; font-size: 10px; }
.lesson-nav-text small { color: #97a098; font-size: 8px; }
.aside-tip { display: flex; gap: 10px; margin-top: 18px; padding: 14px 11px; border-radius: 5px; background: #f6f3e8; }
.tip-star { color: #c88d49; font-size: 17px; }
.aside-tip strong { color: #566b5d; font-size: 9px; }
.aside-tip p { margin: 5px 0 0; color: #879087; font-size: 8px; line-height: 1.55; }
.lesson-content { min-height: 445px; padding: 28px 34px 27px; }
.lesson-meta { display: flex; justify-content: space-between; align-items: center; color: #85938a; font-size: 9px; }
.lesson-meta-tag { padding: 6px 9px; border-radius: 12px; background: #f0f2e9; color: #6e7f6b; font-size: 8px; font-weight: 700; letter-spacing: .4px; }
.lesson-content h2 { margin: 17px 0 9px; color: var(--green); font-family: var(--display); font-size: 29px; letter-spacing: -1.1px; }
.lesson-lead { max-width: 650px; color: #7c8981; font-size: 12px; line-height: 1.75; }
.lesson-illustration { display: flex; align-items: center; gap: 15px; margin: 19px 0; padding: 13px 15px; border-radius: 5px; background: #edf1e8; }
.lesson-illustration-icon { display: grid; place-items: center; width: 43px; height: 43px; flex: 0 0 43px; border-radius: 50%; background: #d9e7ca; color: var(--green); font-size: 19px; }
.lesson-illustration > div { flex: 1; }
.lesson-illustration strong { color: #405b4e; font-size: 10px; }
.lesson-illustration p { margin: 4px 0 0; color: #7f8b81; font-size: 9px; line-height: 1.55; }
.lesson-action { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid #d8e1d2; border-radius: 4px; background: #fffefa; color: #4c6c54; cursor: pointer; font-size: 8px; font-weight: 700; }
.lesson-action:hover { border-color: #9fb58f; }
.lesson-points { display: grid; gap: 9px; margin: 17px 0 20px; padding: 0; list-style: none; }
.lesson-points li { display: flex; gap: 9px; align-items: flex-start; color: #69776e; font-size: 10px; line-height: 1.55; }
.lesson-points li::before { content: '✓'; flex: 0 0 17px; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #edf1e6; color: #64805a; font-size: 9px; font-weight: 800; }
.lesson-practice { padding: 12px 15px; border-left: 2px solid var(--coral); background: #fbf7ef; color: #6f786e; font-size: 9px; line-height: 1.55; }
.lesson-practice strong { color: var(--green); }
.lesson-content-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding-top: 16px; border-top: 1px solid #eef0e9; }
.lesson-content-footer .button { min-height: 38px; font-size: 10px; }
.lesson-content-footer .button:disabled { background: #e4efcf; cursor: default; transform: none; box-shadow: none; }
.lesson-back-next { display: flex; gap: 8px; }
.lesson-step-button { width: 35px; height: 35px; border: 1px solid #e1e6dc; border-radius: 50%; background: white; color: #67786b; cursor: pointer; }
.lesson-step-button:hover { border-color: #a9ba97; background: #f4f6ed; }
.lesson-chord-example { display: flex; align-items: center; gap: 19px; margin: 14px 0; padding: 12px 15px; border: 1px solid #e7ebe1; border-radius: 5px; background: #fcfcf8; }
.lesson-chord-example .chord-diagram { width: 110px; height: 116px; }
.lesson-chord-example > div:last-child strong { color: var(--green); font-size: 11px; }
.lesson-chord-example > div:last-child p { margin: 5px 0 0; color: #828c83; font-size: 9px; line-height: 1.5; }
.strum-pattern { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 19px 0; padding: 17px; border-radius: 6px; background: #f1f2e9; }
.strum-pattern span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: white; color: var(--green); font-size: 18px; box-shadow: 0 2px 4px #244c3510; }
.strum-pattern small { margin-left: 7px; color: #8a958c; font-size: 8px; }

.chords-intro { min-height: 240px; }
.chord-intro-note { display: grid; place-items: center; width: 128px; height: 128px; margin-right: 64px; border: 1px solid #e0e8d5; border-radius: 50%; background: #edf1e5; color: #a5b676; transform: rotate(-12deg); }
.chord-intro-note span { margin-bottom: -29px; font-size: 42px; }
.chord-intro-note strong { color: var(--green); font-family: var(--display); font-size: 13px; }
.chord-intro-note small { margin-top: -25px; color: #889486; font-size: 8px; }
.chord-search-panel { padding: 20px 23px 18px; border: 1px solid #e6e8df; border-radius: 7px; background: #fffefa; }
.search-field { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 13px; border: 1px solid #e2e6dc; border-radius: 5px; background: #fbfcf8; }
.search-icon { color: #839285; font-size: 24px; line-height: 1; transform: rotate(-20deg); }
.search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--green); font-size: 11px; }
.search-field input::placeholder { color: #a2aaa3; }
.search-field kbd { padding: 4px 6px; border: 1px solid #e4e7df; border-radius: 3px; color: #939d94; font-size: 8px; }
.filter-row { display: flex; align-items: flex-end; gap: 32px; margin-top: 18px; }
.root-filter, .quality-filter-wrap { display: flex; flex-direction: column; gap: 8px; }
.root-filter > span, .filter-label { color: #849188; font-size: 8px; font-weight: 700; letter-spacing: .85px; }
.root-filter select, .tuning-select-wrap select { min-width: 128px; height: 32px; padding: 0 28px 0 10px; border: 1px solid #e1e6dd; border-radius: 4px; background: #fffefa; color: #4e6255; font-size: 10px; cursor: pointer; }
.quality-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { min-height: 30px; padding: 0 11px; border: 1px solid #e1e6dd; border-radius: 4px; background: white; color: #78867c; cursor: pointer; font-size: 9px; transition: all .15s; }
.filter-chip:hover { border-color: #bac8ab; }
.filter-chip.active { border-color: var(--green); background: var(--green); color: white; }
.results-heading { display: flex; justify-content: space-between; align-items: end; margin: 27px 0 13px; }
.results-heading h2 { display: inline; margin: 0 8px 0 0; color: var(--green); font-family: var(--display); font-size: 17px; letter-spacing: -.4px; }
.results-count { color: #9aa39a; font-size: 9px; }
.string-order-key { display: flex; align-items: center; gap: 6px; color: #929b91; font-size: 8px; }
.string-order-key span:nth-of-type(1) { color: var(--coral); font-size: 11px; }.string-order-key span:nth-of-type(2) { color: #829581; font-size: 12px; }.string-order-key span:nth-of-type(3) { color: #adb5aa; font-size: 11px; }
.chord-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.chord-card { position: relative; min-height: 221px; overflow: hidden; padding: 14px 15px 11px; border: 1px solid #e6e8df; border-radius: 6px; background: #fffefa; animation: chord-arrive .36s cubic-bezier(.2,.75,.25,1) both; animation-delay: calc(var(--card-index, 0) * 24ms); transition: border .18s, transform .18s, box-shadow .18s; }
.chord-card:hover { transform: translateY(-2px); border-color: #bbc9af; box-shadow: 0 8px 17px #2949320b; }
.chord-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.chord-card-top h3 { margin: 0; color: var(--green); font-family: var(--display); font-size: 21px; letter-spacing: -.9px; }
.chord-card-top p { margin: 3px 0 0; color: #929c93; font-size: 8px; }
.chord-card-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.chord-shape-select { padding: 4px 6px; border: 1px solid #e6e9e1; border-radius: 3px; background: transparent; color: #77867b; font-size: 8px; cursor: pointer; }
.play-chord-button { display: grid; place-items: center; width: 29px; height: 29px; flex: 0 0 29px; padding: 0; border: 1px solid #dce6d9; border-radius: 50%; background: #edf2e9; color: var(--green); cursor: pointer; transition: transform .16s, background .16s, color .16s; }
.play-chord-button:hover { transform: scale(1.08); background: var(--green); color: white; }
.play-chord-button.playing { border-color: #e7785d; background: var(--coral); color: white; }
.play-chord-button svg { width: 14px; height: 14px; overflow: visible; }
.play-chord-button svg path { fill: currentColor; }
.play-chord-button.playing svg path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.chord-card-body { display: flex; justify-content: center; align-items: center; height: 147px; }
.chord-diagram { width: 145px; height: 145px; overflow: visible; }
.chord-diagram .grid-line { stroke: #dfe4db; stroke-width: 1.2; }
.chord-diagram .nut-line { stroke: #526c5c; stroke-width: 3; }
.chord-diagram .string-line { stroke: #bec9bc; stroke-width: 1; }
.chord-diagram .fret-number { fill: #859287; font: 8px var(--font); }
.chord-diagram .open-mark { fill: none; stroke: #94a092; stroke-width: 1.4; }
.chord-diagram .mute-mark { fill: #98a295; font: 10px var(--font); }
.chord-diagram .finger-dot { fill: #e7785d; stroke: #fffefa; stroke-width: 1; }
.chord-diagram .finger-number { fill: #fff; font: 7px var(--font); font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.chord-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 9px; border-top: 1px solid #eff0ea; color: #879288; font-size: 8px; }
.chord-card-foot span:last-child { color: #5d765f; font-weight: 600; }
.no-results { grid-column: 1 / -1; padding: 55px 20px; border: 1px dashed #d7ded3; border-radius: 6px; color: #79867d; text-align: center; font-size: 12px; }
.no-results strong { display: block; margin-bottom: 7px; color: var(--green); font-family: var(--display); font-size: 18px; }
.chord-note { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 12px 15px; border-radius: 5px; background: #f0f2e9; color: #7d897e; }
.chord-note > span { color: #9baf6b; font-size: 19px; }
.chord-note p { margin: 0; font-size: 9px; line-height: 1.55; }
.chord-note strong { color: #586e5b; }

.tuner-intro-heading { min-height: 227px; }
.tuning-badge { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: 1px solid #e5e9e0; border-radius: 25px; background: #fffefa; color: #7c8980; font-size: 8px; font-weight: 700; letter-spacing: .65px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #aab9a8; }
.live-dot.listening { background: #71a674; box-shadow: 0 0 0 4px #71a67424; animation: pulse 1.8s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px #71a67408; } }
.tuner-workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr); gap: 14px; align-items: stretch; }
.tuner-main-card, .string-panel { border: 1px solid #e5e8df; border-radius: 7px; background: #fffefa; }
.tuner-main-card { min-height: 508px; padding: 23px 29px 18px; text-align: center; }
.tuner-card-top { display: flex; justify-content: space-between; align-items: flex-start; text-align: left; }
.tuner-card-top h2 { margin: 7px 0 0; color: var(--green); font-family: var(--display); font-size: 18px; letter-spacing: -.6px; }
.tuning-select-wrap { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.tuning-select-wrap > span { color: #89968c; font-size: 7px; font-weight: 700; letter-spacing: .7px; }
.tuning-select-wrap select { min-width: 142px; font-size: 9px; }
.meter-area { position: relative; width: min(100%, 370px); margin: 8px auto 0; }
.tuner-meter { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; overflow: visible; }
.meter-tick { stroke: #abb8a9; stroke-width: 2.2; stroke-linecap: round; }
.meter-tick.major { stroke: #7b937a; stroke-width: 3.1; }
.meter-note { fill: #294a3c; text-anchor: middle; font: 700 40px var(--display); letter-spacing: -2px; }
.meter-frequency { fill: #86958a; text-anchor: middle; font: 10px var(--font); }
.meter-copy { position: absolute; top: 79px; display: flex; flex-direction: column; gap: 2px; color: #99a498; font-size: 8px; }
.meter-copy strong { color: #88a079; font-size: 15px; }
.meter-copy-left { left: 12px; }.meter-copy-right { right: 12px; }
.meter-copy-right strong { color: var(--coral); }
.meter-status { height: 17px; color: #7d8c80; font-size: 10px; }
.meter-status.tuned { color: #5c8c60; font-weight: 700; }
.meter-cents { display: flex; justify-content: space-between; width: min(100%, 304px); margin: 8px auto 0; color: #a0aaa0; font-size: 8px; }
.meter-cents span:nth-child(2) { color: #607368; font-size: 9px; font-weight: 700; }
.mic-button { min-width: 206px; min-height: 43px; margin-top: 19px; }
.mic-symbol { font-size: 16px !important; }.mic-button-arrow { margin-left: 11px; }
.mic-button.active { background: #e9eee3; color: var(--green); }
.mic-privacy { margin: 10px 0 0; color: #9aa39b; font-size: 8px; }
.mic-privacy span { margin-right: 4px; }
.string-panel { padding: 22px 20px 17px; }
.string-panel-heading { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 13px; border-bottom: 1px solid #edf0e9; }
.string-panel-heading h3 { margin: 5px 0 0; color: var(--green); font-family: var(--display); font-size: 16px; letter-spacing: -.45px; }
.string-count { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: #eff2e8; color: #71856d; font-size: 10px; font-weight: 700; }
.string-list { display: grid; gap: 6px; padding-top: 12px; }
.string-row { position: relative; display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 8px; min-height: 49px; padding: 6px 10px; border: 1px solid #edf0e9; border-radius: 5px; background: white; cursor: pointer; text-align: left; transition: all .16s; }
.string-row:hover { border-color: #c8d4c2; background: #fbfcf8; }
.string-row.selected { border-color: #91aa83; background: #f0f4e9; }
.string-row.auto-target { border-color: #c6d3bc; background: #f7f9f2; }
.string-row.in-tune::after { content: '✓'; position: absolute; right: 10px; bottom: 4px; color: #6d9b6d; font-size: 9px; }
.string-number { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f0f2ec; color: #708174; font-size: 10px; font-weight: 700; }
.string-row.selected .string-number { background: var(--green); color: white; }
.string-name strong { display: block; color: #40594a; font-family: var(--display); font-size: 13px; }
.string-name small { display: block; margin-top: 2px; color: #9ba49c; font-size: 8px; }
.string-hz { padding-right: 3px; color: #89958b; font-size: 9px; }
.string-panel-foot { display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding: 12px 9px; border-radius: 4px; background: #f5f5ee; }
.string-foot-icon { color: #8eaa79; font-size: 12px; }
.string-panel-foot p { margin: 0; color: #818d83; font-size: 8px; line-height: 1.55; }
.tuner-howto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 17px; padding: 18px 23px; border: 1px solid #e6e8df; border-radius: 6px; background: #f0f1e8; }
.tuner-howto > div { position: relative; padding-left: 42px; }
.tuner-howto > div + div { border-left: 1px solid #dfe4d9; padding-left: 57px; }
.howto-number { position: absolute; top: 1px; left: 0; color: #96aa77; font-family: var(--display); font-size: 17px; font-weight: 700; }
.tuner-howto > div + div .howto-number { left: 16px; }
.tuner-howto strong { color: #53695a; font-size: 9px; }
.tuner-howto p { margin: 5px 0 0; color: #889287; font-size: 8px; line-height: 1.5; }

@media (min-width: 1380px) {
  .hero { min-height: 530px; }
  .hero-art { min-height: 530px; }
  .guitar-illustration { width: 338px; height: 550px; left: calc(50% - 169px); }
}
@media (max-width: 1100px) {
  .app-shell { padding: 0 32px; }
  .hero-copy { padding-left: 45px; }
  .hero h1 { font-size: 53px; }
  .sun-disc { width: 285px; height: 285px; top: 84px; }
  .journey-grid { grid-template-columns: repeat(2, 1fr); }
  .journey-card { min-height: 166px; }
  .chord-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .filter-row { align-items: flex-start; flex-direction: column; gap: 14px; }
  .quality-filter-wrap { width: 100%; }
}
@media (max-width: 760px) {
  .app-shell { padding: 0 18px; }
  .topbar { height: 72px; grid-template-columns: 1fr auto auto; gap: 14px; }
  .brand { font-size: 21px; }
  .main-nav { display: grid; position: absolute; z-index: 10; top: 63px; left: 18px; right: 18px; height: auto; gap: 0; padding: 8px; border: 1px solid #e3e7dd; border-radius: 6px; background: #fffefa; box-shadow: 0 10px 24px #142f2318; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px) scale(.985); transform-origin: top right; transition: opacity .2s ease, transform .24s cubic-bezier(.2,.75,.25,1), visibility 0s linear .24s; }
  .main-nav.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0) scale(1); transition-delay: 0s; }
  .nav-link { padding: 12px; text-align: left; }
  .nav-link.active::after { left: 12px; right: auto; bottom: 7px; width: 19px; height: 2px; }
  .progress-pill { padding: 8px 10px; font-size: 9px; }
  .mobile-menu { display: grid; place-content: center; gap: 5px; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; }
  .mobile-menu:hover { transform: rotate(-4deg); }
  .mobile-menu[aria-expanded="true"] { border-color: #cdd9cd; background: var(--green-soft); }
  .mobile-menu span { width: 13px; height: 1.5px; background: var(--green); transition: transform .22s cubic-bezier(.2,.75,.25,1); }
  .mobile-menu[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
  .mobile-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
  .page { padding-top: 15px; }
  .hero { min-height: initial; grid-template-columns: 1fr; }
  .hero-copy { padding: 43px 28px 32px; }
  .hero h1 { margin-top: 19px; font-size: clamp(43px, 11vw, 58px); letter-spacing: -2.8px; }
  .hero-copy > p { max-width: 390px; font-size: 12px; }
  .hero-actions { gap: 15px; flex-wrap: wrap; }
  .hero-note { margin-top: 27px; }
  .hero-art { min-height: 345px; }
  .sun-disc { width: 225px; height: 225px; top: 54px; }
  .guitar-illustration { top: -73px; left: calc(50% - 123px); width: 246px; height: 430px; }
  .floating-sticker { right: max(30px, calc(50% - 175px)); bottom: 23px; width: 76px; height: 76px; font-size: 8px; }
  .art-caption { top: 26px; right: 21px; font-size: 7px; }
  .hero-index { bottom: 17px; left: 16px; }
  .section-block { padding-top: 44px; }
  .section-heading { align-items: flex-start; gap: 10px; }
  .section-heading h2 { font-size: 24px; }
  .section-heading > .text-button { margin-top: 13px; font-size: 10px; white-space: nowrap; }
  .journey-grid { gap: 8px; }
  .journey-card { min-height: 158px; padding: 13px 12px; }
  .journey-card strong { font-size: 11px; }
  .step-meta { font-size: 9px; }
  .step-icon { height: 39px; font-size: 27px; }
  .home-tools { grid-template-columns: 1fr; padding-top: 39px; gap: 9px; }
  .tool-card { min-height: 217px; padding: 23px; }
  .tool-card-copy { max-width: 68%; }
  .tool-card h3 { font-size: 25px; }
  .mini-chord { right: 25px; transform: rotate(11deg) scale(.85); transform-origin: top right; }
  .tuner-mini-art { right: 15px; transform: scale(.85); transform-origin: top right; }
  .site-footer { min-height: 70px; gap: 12px; font-size: 8px; }
  .subpage-intro { min-height: auto; padding: 31px 0 25px; align-items: flex-start; }
  .subpage-intro h1 { font-size: clamp(34px, 8vw, 43px); letter-spacing: -2px; }
  .subpage-intro p { max-width: 430px; font-size: 11px; }
  .learn-progress-card { width: 130px; flex-direction: column; align-items: flex-start; gap: 7px; padding: 10px; margin-top: 29px; }
  .progress-ring { width: 39px; height: 39px; flex-basis: 39px; }
  .progress-ring span { font-size: 9px; }
  .learn-progress-card strong { font-size: 9px; }
  .learn-progress-card div:last-child > span { font-size: 8px; }
  .learning-layout { grid-template-columns: 1fr; gap: 10px; }
  .lesson-list { padding: 14px 12px 12px; }
  .lesson-list-heading { padding-bottom: 8px; }
  #lesson-nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 3px; }
  .lesson-nav-item { min-width: 144px; padding: 9px 6px; }
  .lesson-nav-text strong { font-size: 9px; }
  .lesson-nav-text small { font-size: 7px; }
  .aside-tip { display: none; }
  .lesson-content { min-height: initial; padding: 22px 19px; }
  .lesson-illustration { gap: 9px; padding: 11px; }
  .lesson-illustration-icon { width: 35px; height: 35px; flex-basis: 35px; font-size: 16px; }
  .lesson-action { padding: 7px 8px; font-size: 7px; }
  .lesson-content h2 { font-size: 25px; }
  .lesson-lead { font-size: 11px; }
  .lesson-content-footer { gap: 9px; }
  .lesson-content-footer .button { padding: 0 11px; gap: 7px; font-size: 9px; }
  .lesson-back-next { gap: 5px; }
  .lesson-step-button { width: 31px; height: 31px; }
  .chord-intro-note { width: 82px; height: 82px; flex: 0 0 82px; margin: 39px 5px 0 0; }
  .chord-intro-note span { font-size: 29px; margin-bottom: -22px; }
  .chord-intro-note strong { font-size: 10px; }
  .chord-intro-note small { margin-top: -20px; font-size: 6px; }
  .chord-search-panel { padding: 14px 12px; }
  .search-field { height: 41px; gap: 6px; padding: 0 8px; }
  .search-field input { font-size: 9px; }
  .search-field kbd { display: none; }
  .filter-row { gap: 12px; margin-top: 13px; }
  .quality-filters { gap: 5px; }
  .filter-chip { min-height: 27px; padding: 0 8px; font-size: 8px; }
  .results-heading { align-items: center; }
  .results-heading h2 { font-size: 15px; }
  .string-order-key { display: none; }
  .chord-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .chord-card { min-height: 202px; padding: 11px 9px 9px; }
  .chord-card-top h3 { font-size: 18px; }
  .chord-card-top p { font-size: 7px; }
  .chord-shape-select { width: 56px; max-width: 56px; padding: 4px 3px; font-size: 7px; }
  .chord-card-actions { gap: 4px; }
  .play-chord-button { width: 26px; height: 26px; flex-basis: 26px; }
  .chord-card-body { height: 137px; }
  .chord-diagram { width: 132px; height: 132px; }
  .chord-card-foot { font-size: 7px; }
  .chord-note { align-items: flex-start; }
  .chord-note p { font-size: 8px; }
  .tuner-intro-heading { align-items: flex-start; }
  .tuning-badge { gap: 6px; margin-top: 31px; padding: 8px; font-size: 6px; white-space: nowrap; }
  .tuner-workspace { grid-template-columns: 1fr; gap: 9px; }
  .tuner-main-card { min-height: 470px; padding: 18px 16px; }
  .tuner-card-top { gap: 9px; }
  .tuner-card-top h2 { font-size: 14px; }
  .tuner-card-top .mini-label { font-size: 7px; }
  .tuning-select-wrap select { min-width: 112px; height: 29px; font-size: 8px; }
  .meter-area { margin-top: 20px; }
  .meter-copy { top: 69px; }.meter-copy-left { left: 0; }.meter-copy-right { right: 0; }
  .meter-copy span { font-size: 7px; }
  .meter-status { margin-top: -3px; }
  .mic-button { margin-top: 15px; }
  .string-panel { padding: 16px 13px; }
  .string-list { grid-template-columns: repeat(2, 1fr); }
  .string-row { grid-template-columns: 30px 1fr auto; gap: 5px; padding: 5px 6px; }
  .string-number { width: 25px; height: 25px; }
  .string-hz { font-size: 8px; }
  .tuner-howto { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .tuner-howto > div, .tuner-howto > div + div { min-height: 32px; padding-left: 35px; border: 0; }
  .tuner-howto > div + div .howto-number { left: 0; }
  .tuner-howto p { margin-top: 3px; }
}

/* Pequenos movimentos de entrada ajudam a acompanhar mudanças de conteúdo. */
#lesson-content > * { animation: content-rise .34s cubic-bezier(.2,.75,.25,1) both; }
#lesson-content > *:nth-child(2) { animation-delay: 35ms; }
#lesson-content > *:nth-child(3) { animation-delay: 70ms; }
#lesson-content > *:nth-child(4) { animation-delay: 105ms; }
#lesson-content > *:nth-child(5) { animation-delay: 140ms; }
#lesson-content > *:nth-child(6) { animation-delay: 175ms; }
#lesson-content > *:nth-child(7) { animation-delay: 210ms; }
.lesson-nav-item { transition: background .2s, border-color .2s, transform .2s, box-shadow .2s; }
.lesson-nav-item:hover { transform: translateX(3px); }
.lesson-nav-item.active .lesson-nav-number { animation: content-rise .3s cubic-bezier(.2,.75,.25,1) both; }
.mobile-menu:active, .play-chord-button:active, .filter-chip:active { transform: scale(.94); }
.play-chord-button svg { transition: transform .2s cubic-bezier(.2,.75,.25,1); }
.play-chord-button:hover svg { transform: scale(1.08); }
@media (max-width: 380px) {
  .app-shell { padding: 0 12px; }
  .progress-pill { gap: 5px; padding: 7px; }
  .progress-spark { font-size: 13px; }
  .hero-copy { padding-left: 21px; padding-right: 21px; }
  .hero-actions { gap: 10px; }
  .hero-actions .button { padding: 0 13px; font-size: 10px; }
  .hero-actions .text-button { font-size: 10px; }
  .section-heading { flex-direction: column; }
  .section-heading > .text-button { margin-top: 0; }
  .chord-grid { grid-template-columns: 1fr 1fr; }
  .chord-card { padding-left: 6px; padding-right: 6px; }
  .tuning-badge { font-size: 0; }
  .tuning-badge .live-dot { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}