:root{color-scheme:light;--paper:#f7f6f0;--ink:#152521;--muted:#586761;--line:#d9ded5;--blue:#194bd3;--blue-soft:#e7edff}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:32px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-underline-offset:4px}
a:focus-visible{outline:3px solid var(--blue);outline-offset:6px;border-radius:2px}
.wrap{width:min(1160px,calc(100% - 96px));margin-inline:auto}
.site-header{display:flex;align-items:center;justify-content:space-between;padding-block:34px;border-bottom:1px solid var(--line)}
.wordmark{font-size:28px;font-weight:800;letter-spacing:-1.5px;text-decoration:none}
.wordmark span{color:var(--blue)}
.availability{font-size:12px;color:var(--muted)}
.hero{display:grid;grid-template-columns:1.12fr 1fr;gap:80px;align-items:center;padding-block:108px 112px}
.eyebrow{margin:0 0 22px;font-size:11px;line-height:1.5;font-weight:700;letter-spacing:1.45px;text-transform:uppercase;color:var(--muted)}
h1{margin:0;font-size:clamp(60px,6.1vw,88px);line-height:1.03;font-weight:750;letter-spacing:-4.7px}
.hero-description{max-width:390px;margin:30px 0;font-size:19px;line-height:1.6;color:var(--muted)}
.text-link{display:inline-flex;align-items:center;gap:28px;font-size:14px;font-weight:700;text-decoration:none;border-bottom:1px solid var(--ink);padding-block:5px 9px}
.text-link span{font-size:22px;font-weight:400}
.practice-sheet{background:#fffefa;border:1px solid #d5d9d1;box-shadow:10px 12px 0 #eaede5;transform:rotate(2deg);padding:27px 27px 23px}
.sheet-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;font-weight:700;color:var(--muted);padding-bottom:20px;border-bottom:1px solid var(--line)}
.sheet-title{font-size:30px;letter-spacing:-1px;font-weight:700;margin:25px 0 25px}
.chart{margin-inline:-10px}
.chart-line{display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding:10px 14px 0;font-size:18px;color:var(--blue)}
.chart-line b{font-weight:700;width:max-content;min-width:30px;line-height:30px;text-align:center}
.current{background:var(--blue-soft)}
.active-chord{background:var(--blue);color:white;border-radius:4px;padding-inline:5px}
.phrase{display:flex;gap:8px;padding:8px 17px 18px;margin-bottom:15px}
.phrase span{height:7px;display:block;background:#a4afa5;border-radius:1px;opacity:.6}
.phrase span:nth-child(1){width:27%}.phrase span:nth-child(2){width:41%}.phrase span:nth-child(3){width:16%}
.sheet-bottom{display:flex;align-items:center;gap:14px;padding-top:20px;margin-top:26px;border-top:1px solid var(--line)}
.play-mark{display:grid;place-items:center;width:32px;height:32px;background:var(--ink);border-radius:50%;color:white;font-size:12px;padding-left:2px}
.timeline{position:relative;flex:1;height:3px;background:#d6dcd4}
.timeline:before{content:"";display:block;width:53%;height:3px;background:var(--ink)}
.timeline span{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--ink);top:-2px;left:52%}
.timeline i{position:absolute;width:2px;top:-9px;bottom:-9px;background:var(--blue)}
.loop-start{left:24%}.loop-end{left:74%}
.speed{font-family:monospace;font-size:12px;color:var(--muted)}
.practice-features{display:grid;grid-template-columns:1.12fr 1fr;gap:80px;padding-block:64px 80px;border-top:1px solid var(--line)}
h2{margin:0;font-size:36px;line-height:1.13;letter-spacing:-1.4px}
.features-intro>p:last-child{font-size:15px;line-height:1.65;color:var(--muted);max-width:320px;margin-top:23px}
.feature-list article{display:grid;grid-template-columns:25px 1fr;gap:22px;padding-bottom:27px;margin-bottom:27px;border-bottom:1px solid var(--line)}
.feature-list article:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.feature-number{font-family:monospace;font-size:11px;color:var(--blue);padding-top:4px}
h3{font-size:18px;letter-spacing:-.3px;margin:0 0 9px}
.feature-list p{font-size:14px;color:var(--muted);line-height:1.7;margin:0}
.site-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:30px 40px;font-size:11px;color:var(--muted)}
.footer-brand{font-size:16px;font-weight:700;letter-spacing:-.7px;color:var(--ink)}
.site-footer p{margin:0;line-height:1.8}
.footer-separator{padding-inline:8px}
.credits-page{max-width:700px;min-height:68vh;padding-block:80px 100px}
.credits-page h1{font-size:58px;letter-spacing:-2.8px;margin-bottom:30px}
.credits-page h2{font-size:24px;letter-spacing:-.6px;margin:42px 0 16px}
.credits-page p{font-size:17px;color:var(--muted);line-height:1.75}
.credits-page a{color:var(--blue)}
@media(max-width:850px){.wrap{width:calc(100% - 56px)}.hero,.practice-features{gap:42px}.hero{padding-block:74px 86px}h1{font-size:66px;letter-spacing:-3.7px}.hero-description{font-size:17px}.practice-sheet{padding:20px}.sheet-title{font-size:25px}.chart-line{font-size:16px}.practice-features{grid-template-columns:.9fr 1.1fr}h2{font-size:31px}}
@media(max-width:620px){.wrap{width:calc(100% - 40px)}.site-header{padding-block:23px}.wordmark{font-size:25px}.availability{font-size:10px}.hero{grid-template-columns:1fr;gap:50px;padding-block:58px 66px}.eyebrow{font-size:10px;margin-bottom:18px}h1{font-size:68px;letter-spacing:-3.7px}.hero-description{font-size:17px;max-width:355px;margin:24px 0}.practice-sheet{margin-inline:6px 13px;padding:24px;transform:rotate(1deg)}.sheet-title{font-size:29px}.practice-features{grid-template-columns:1fr;gap:30px;padding-block:42px 50px}.features-intro h2 br{display:none}.features-intro>p:last-child{max-width:100%;margin-top:16px}.feature-list article{gap:17px;padding-bottom:23px;margin-bottom:23px}.site-footer{align-items:start;flex-direction:column;gap:15px;padding-block:24px 32px}.site-footer p{font-size:10px}.credits-page{padding-block:56px 70px}.credits-page h1{font-size:48px}.credits-page p{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}