*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--gh-paper);color:var(--gh-ink);font:var(--type-body)}
.wrap{max-width:var(--layout-max);margin:0 auto;padding:0 var(--gutter-mobile)}
@media(min-width:960px){.wrap{padding:0 var(--gutter-desktop)}}
main>section.wrap{padding-top:var(--section-pad-mobile);padding-bottom:8px}
@media(min-width:960px){main>section.wrap{padding-top:var(--section-pad-desktop)}}
a{color:var(--gh-green-deep);font-weight:600}
.top{position:sticky;top:0;z-index:10;background:rgba(250,250,247,.94);backdrop-filter:blur(8px);border-bottom:2px solid var(--gh-ink)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font:800 20px/1 var(--gh-font);color:var(--gh-ink);text-decoration:none;letter-spacing:-.01em}
.brand b{color:var(--gh-green-deep)}.brand img{border-radius:8px}
nav{display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap}nav a{color:var(--gh-ink);text-decoration:none;font-weight:700;font-size:15px}
nav a:hover{color:var(--gh-green-deep)}
.btn{display:inline-block;border:var(--border-button);border-radius:var(--gh-radius-pill);padding:10px 20px;font:var(--type-button);color:var(--gh-ink);background:var(--gh-white);text-decoration:none}
.btn:hover{background:var(--gh-yellow);text-decoration:none;color:var(--gh-ink)}
.btn.solid{background:var(--gh-green);color:var(--gh-white);border-color:var(--gh-ink)}.btn.solid:hover{background:var(--gh-green-hover);color:var(--gh-white)}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gh-green-deep);margin:0 0 8px}
h1{font:var(--type-display);letter-spacing:var(--ls-display);text-transform:uppercase;margin:0 0 16px;font-size:clamp(40px,8vw,72px)}
h2{font:var(--type-h2);letter-spacing:var(--ls-h2);margin:0 0 16px}h3{font:var(--type-h3);margin:0 0 12px}h3 a{color:var(--gh-ink)}
.green{color:var(--gh-green-deep)}.lede{font:var(--type-body-lg);color:var(--gh-gray-600);max-width:62ch;margin:0 0 20px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0}
.hero{padding:56px 0 40px}.hero .eyebrow{font-size:14px}
.band-sec{background:var(--gh-white);border-block:2px solid var(--gh-ink);margin-top:48px;padding:48px 0}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:24px 0}
.tile{border:2px solid var(--gh-ink);border-radius:var(--gh-radius-md);padding:20px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-weight:800}
.tile p{margin:0;font-weight:600;color:var(--gh-ink);background:var(--gh-white);border-radius:var(--gh-radius-sm);padding:6px 10px;font-size:15px}
.tile b{background:var(--gh-white);border-radius:999px;padding:2px 12px;font-size:20px}
.tile.hot{background:repeating-linear-gradient(45deg,var(--gh-yellow) 0 5px,var(--gh-white) 5px 10px)}
.tile.plain{background:var(--gh-gray-100);border-color:var(--gh-gray-300)}.tile.plain b,.tile.plain p{color:var(--gh-gray-600);background:transparent;padding-left:0}
.note{color:var(--gh-gray-600);font-weight:600;max-width:70ch}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:20px 0}
.steps div{background:var(--gh-white);border:2px solid var(--gh-ink);border-radius:var(--gh-radius-md);padding:16px;display:flex;gap:12px;align-items:flex-start}
.steps b{flex:none;width:32px;height:32px;border-radius:999px;background:var(--gh-green);color:#fff;display:flex;align-items:center;justify-content:center}.steps p{margin:0}
.demo{background:var(--gh-white);border:2px solid var(--gh-ink);border-radius:var(--gh-radius-md);padding:20px;margin:16px 0}
.cap{color:var(--gh-gray-600);font-weight:600;font-size:14px;margin:8px 0 0}
.legend{list-style:none;display:flex;gap:8px 18px;flex-wrap:wrap;padding:0;margin:12px 0 0;font-weight:700;color:var(--gh-gray-600)}.legend li{display:flex;gap:6px;align-items:center}
/* strips: fingers, notes, symbol bands */
.strip{display:grid;gap:6px;margin:6px 0}
.notes{display:grid;grid-template-columns:repeat(9,1fr)}
.n{display:flex;flex-direction:column;align-items:center;gap:4px}
.n .f{width:min(44px,9vw);aspect-ratio:1;border:2px solid var(--gh-ink);border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:clamp(14px,3.4vw,22px)}
.n .l{font-weight:700;color:var(--gh-gray-600);font-size:clamp(11px,2.4vw,15px)}
.bands{display:grid;grid-template-columns:repeat(18,1fr);min-height:34px}
.b{margin:0 3px;border:2px solid var(--gh-ink);border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:800;font-size:13px;overflow:hidden;min-height:34px}
.b.hot{background:repeating-linear-gradient(45deg,var(--gh-yellow) 0 5px,var(--gh-white) 5px 10px)}
.b.plain{background:var(--gh-gray-100);border-color:var(--gh-gray-300);color:var(--gh-gray-600)}
.b svg{flex:none;width:24px;height:24px}.b span{background:rgba(255,255,255,.85);border-radius:999px;padding:0 8px}.b span:empty{display:none}
.b.plain span{background:transparent;padding:0}
@media(max-width:640px){.b svg{width:18px;height:18px}.b{margin:0 2px;min-height:28px}}
/* grid of exercises */
.card.locked{opacity:.6;border-style:dashed;cursor:default}.card.locked .lock{font-size:40px;display:grid;place-items:center}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:24px 0 8px}
.card.ex{display:flex;gap:14px;align-items:center;background:#fff;border:2px solid var(--gh-ink);border-radius:var(--gh-radius-md);box-shadow:var(--gh-shadow-sm);padding:14px;text-decoration:none;color:var(--gh-ink);transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base)}
.card.ex:hover{transform:translateY(-2px);box-shadow:var(--gh-shadow-md);text-decoration:none}
.card .g svg{width:96px;height:96px;display:block}.card .eyebrow{margin:0 0 6px}
.chips{display:flex;flex-wrap:wrap;gap:4px}.chip{display:inline-flex;align-items:center;gap:4px;border:2px solid var(--gh-ink);border-radius:999px;padding:1px 8px 1px 5px;font-weight:800;font-size:11px;background:#fff}
.chip.hot{background:repeating-linear-gradient(45deg,var(--gh-yellow) 0 4px,var(--gh-white) 4px 8px)}.chip.plain{border-color:var(--gh-gray-300);color:var(--gh-gray-600);background:var(--gh-gray-100)}
.two{display:grid;gap:24px;grid-template-columns:1fr}@media(min-width:960px){.two{grid-template-columns:1.4fr 1fr;align-items:center}}
.demo2{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.demo2 svg{padding:16px;width:96px;height:96px;border:2px solid var(--gh-ink);border-radius:var(--gh-radius-md);background:repeating-linear-gradient(45deg,var(--gh-yellow) 0 5px,var(--gh-white) 5px 10px)}
.demo2 svg:nth-child(3){background:var(--gh-gray-100);border-color:var(--gh-gray-300)}
/* exercise page */
.player{padding-top:24px}.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}.tabs .sp{flex:1}
.tabs button{font:var(--type-button);border:var(--border-button);background:#fff;border-radius:999px;padding:10px 18px;cursor:pointer;color:var(--gh-ink)}
.tabs button[aria-selected=true],.tabs button[aria-pressed=true]{background:var(--gh-green);color:#fff}
.tabs button:focus-visible{outline:var(--focus-outline);outline-offset:var(--focus-offset)}
.vid{background:var(--gh-ink);border-radius:var(--gh-radius-md);overflow:hidden;display:flex;justify-content:center;border:2px solid var(--gh-ink)}
.vid video{display:block;width:100%;max-height:78vh;background:#000}.vid.v video{width:auto;max-width:100%;aspect-ratio:9/16;max-height:78vh}
.cases{display:grid;gap:16px;grid-template-columns:1fr}@media(min-width:960px){.cases{grid-template-columns:1fr 1fr}}
.case{background:#fff;border:2px solid var(--gh-ink);border-radius:var(--gh-radius-md);padding:16px 18px;box-shadow:var(--gh-shadow-sm)}
.code{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--gh-gray-600);margin:8px 0 0;word-break:break-word}
.row{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.gl{text-align:center}.gl svg{width:100%;max-width:200px;height:auto}.gl b{display:block;font:var(--type-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--gh-green-deep);margin-bottom:6px}
.gl code{display:block;font-size:11px;color:var(--gh-gray-600);margin-top:6px;word-break:break-word}
.sheet{background:#fff;border:2px solid var(--gh-ink);border-radius:var(--gh-radius-md);padding:18px;margin:16px 0;box-shadow:var(--gh-shadow-sm)}
.how2{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin:16px 0}.how2 div{background:#fff;border:2px solid var(--gh-ink);border-radius:var(--gh-radius-md);padding:14px}.how2 p{margin:4px 0 0}
.pn{display:flex;justify-content:space-between;gap:12px;padding-bottom:48px}
.rule{background:var(--gh-yellow-tint);border:2px solid var(--gh-ink);border-radius:var(--gh-radius-md);padding:16px 18px;margin:0 0 24px;max-width:78ch}
.move{display:grid;gap:20px;grid-template-columns:1fr;align-items:center;margin:28px 0;padding-top:20px;border-top:2px solid var(--gh-gray-300)}
@media(min-width:720px){.move{grid-template-columns:200px 1fr}}.move .tile{align-items:center}.move h2{margin-bottom:8px}
footer{margin-top:64px;border-top:2px solid var(--gh-ink);background:#fff;padding:24px 0;color:var(--gh-gray-600);font-size:14px}
code{background:var(--gh-gray-100);padding:1px 6px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}