.articles{width:min(100%,44rem);margin:0 auto;padding:3.5rem 2rem 4rem}.articles__header{max-width:34rem;margin-bottom:1.5rem}.articles__eyebrow,.article-preview__date,.article-preview__topics{font-family:var(--sans);letter-spacing:.07em;text-transform:uppercase;font-size:.75rem}.articles__eyebrow{color:var(--accent);margin:0 0 1.1rem;font-weight:600}.articles h1,.article-preview h2{font-family:var(--serif);font-weight:400}.articles h1{letter-spacing:-.015em;margin:0;font-size:clamp(1.65rem,4vw,2.1rem);line-height:1.1}.articles__intro{color:var(--muted);margin:1.5rem 0 0;font-size:1.25rem;line-height:1.45}.articles__list{border-top:1px solid var(--border-strong)}.article-preview{border-bottom:1px solid var(--border);padding:1.65rem 0 1.85rem}.article-preview__date{color:var(--muted);margin:0 0 .75rem}.article-preview h2{letter-spacing:-.01em;max-width:32rem;margin:0;font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.25}.article-preview h2 a{color:inherit;text-decoration:none}.article-preview h2 a:hover,.article-preview h2 a:focus-visible{color:var(--accent);text-underline-offset:.14em;text-decoration:underline}.article-preview__summary{max-width:38rem;color:var(--muted);margin:.8rem 0 0;font-size:1.06rem;line-height:1.55}.article-preview__more{color:var(--fg);align-items:center;gap:.22rem;margin:1rem 0 0;font-size:1.02rem;text-decoration:none;display:inline-flex}.article-preview__more svg{color:var(--accent);flex:none;transition:transform .16s}.article-preview:hover .article-preview__more svg{transform:translate(.2rem)}.article-preview__more:hover,.article-preview__more:focus-visible{color:var(--accent);text-underline-offset:.14em;text-decoration:underline}.article-preview__topics{color:var(--muted);letter-spacing:.04em;flex-wrap:wrap;gap:.65rem;margin:1.25rem 0 0;padding:0;list-style:none;display:flex}.article-preview__topics li:before{content:"#";color:var(--accent)}.article-page{width:min(100%,44rem);margin:0 auto;padding:3.5rem 2rem 5rem}.article-page__back{color:var(--muted);align-items:center;gap:.22rem;margin-bottom:3.5rem;font-size:1rem;text-decoration:none;display:inline-flex}.article-page__back:hover,.article-page__back:focus-visible{color:var(--accent);text-underline-offset:.14em;text-decoration:underline}.article-page__content{max-width:38rem}.article-page__meta{color:var(--muted);font-family:var(--sans);letter-spacing:.07em;text-transform:uppercase;margin:0 0 1rem;font-size:.75rem}.article-page h1,.article-page h2{font-family:var(--serif);font-weight:400}.article-page h1{letter-spacing:-.015em;margin:0;font-size:clamp(1.7rem,4vw,2.2rem);line-height:1.12}.article-page__lead{color:var(--muted);margin:1.5rem 0 0;font-size:1.25rem;line-height:1.5}.article-page__body{margin-top:3rem;font-size:1.08rem;line-height:1.65}.article-page__body p{margin:0 0 1.4rem}.article-page__body>p{font-family:var(--article-sans), var(--sans);font-size:1rem}.article-inline-icon{vertical-align:-.18em;color:var(--chord);display:inline-flex}.article-inline-icon svg{width:1.05em;height:1.05em}.article-note{color:var(--accent);font-weight:600}.article-chord,.article-action{color:var(--chord);font-weight:600}.article-syllable{color:var(--highlight);font-weight:600}.article-page__body>.article-highlight{border-left:.22rem solid var(--accent);background:color-mix(in srgb, var(--accent) 9%, transparent);color:var(--fg);border-radius:0 .45rem .45rem 0;margin:1.8rem 0 2rem;padding:.85rem 1rem .9rem 1.15rem;font-weight:500;line-height:1.55}.article-page__body h2{margin:2.2rem 0 .7rem;font-size:1.55rem;line-height:1.15}.article-page__body a{color:var(--accent);text-underline-offset:.14em}.article-copyable{border:1px solid var(--border);border-radius:.75rem;margin:1.2rem 0 1.6rem;position:relative}.article-copyable pre{margin:0;padding:1rem 3.5rem 1rem 1.25rem;font-size:.95rem;line-height:1.45;overflow-x:auto}.article-copyable__button{background:var(--bg);width:2.25rem;height:2.25rem;color:var(--muted);cursor:pointer;border:none;border-radius:999px;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;top:.5rem;right:.5rem}.article-copyable__button:hover,.article-copyable__button:focus-visible{color:var(--accent)}.article-editor{border:1px solid var(--border);border-radius:.75rem;flex-direction:column;gap:1rem;margin:1.6rem 0 2rem;padding:1.25rem 1.5rem 1.4rem 3.25rem;line-height:normal;display:flex}.article-editor .song{min-height:0}.article-editor__tools{align-items:center;gap:.75rem;display:flex}.article-editor__tools .transpose-widget{margin-top:0;position:static}.article-editor--with-track-toggles{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"song tools";column-gap:1rem;display:grid}.article-editor--with-track-toggles>.song-wrapper{grid-area:song}.article-editor--with-track-toggles>.article-editor__tools{flex-direction:column;grid-area:tools;align-self:start}.article-gesture{border:1px dashed var(--border-strong);border-radius:.75rem;margin:1.6rem 0 2rem;padding:1.1rem 1.5rem 1.3rem}.article-gesture .chord-tutorial-example,.article-gesture .melody-tutorial-example{margin-top:0;font-size:1.35rem}.article-diagram{border:1px solid var(--border);border-radius:.6rem;flex-direction:column;align-items:center;gap:.35rem;width:max-content;margin:1.6rem auto 2rem;padding:.7rem .9rem .6rem;display:flex;box-shadow:0 .5rem 1.5rem #2a26222e}.article-next{border-top:1px solid var(--border);max-width:38rem;margin-top:3.5rem;padding-top:1.65rem}.article-next__label{color:var(--muted);font-family:var(--sans);letter-spacing:.07em;text-transform:uppercase;margin:0 0 .6rem;font-size:.75rem}.article-next__link{color:var(--fg);font-family:var(--serif);align-items:center;gap:.4rem;font-size:clamp(1.1rem,2vw,1.3rem);line-height:1.25;text-decoration:none;display:inline-flex}.article-next__link svg{color:var(--accent);flex:none;transition:transform .16s}.article-next__link:hover,.article-next__link:focus-visible{color:var(--accent);text-underline-offset:.14em;text-decoration:underline}.article-next__link:hover svg{transform:translate(.2rem)}@media (max-width:30rem){.articles{padding:0 0 2.5rem}.articles__header{margin-bottom:3.25rem}.article-page{padding:0 0 3rem}.article-page h1{font-size:1.45rem}.article-page__body h2{margin-top:1.9rem;font-size:1.3rem}.article-editor,.article-gesture{padding:1rem}.article-editor--with-track-toggles{display:flex}.article-editor .song-wrapper{overflow:auto hidden}.article-editor--with-track-toggles>.article-editor__tools{flex-direction:row}.article-gesture .chord-tutorial-example,.article-gesture .melody-tutorial-example{font-size:1rem}}