.brass-heading{padding:22px 0 12px}.brass-heading h1{font-size:clamp(28px,4vw,44px)}.brass-heading>p:last-child{margin:8px 0;color:var(--ink-soft)}.brass-tool{display:grid;grid-template-columns:270px minmax(0,1fr);border:1px solid var(--rule);background:var(--card)}.brass-stage{padding:20px;text-align:center;border-right:1px solid var(--rule);background:#fcfbf7}.brass-name{font-family:Georgia,serif;font-size:48px;font-weight:bold;line-height:1.1}.brass-stage .eyebrow{margin-bottom:4px}.brass-stage svg{width:150px;max-width:100%;display:block;margin:auto}.brass-stage .written-staff{width:180px}.brass-stage p{font-size:14px;line-height:1.5;margin:8px 0}.brass-stage #brassHint{font-size:12px;color:var(--ink-soft)}.brass-panel{padding:16px;min-width:0}.brass-controls{display:flex;flex-wrap:wrap;gap:8px}.brass-controls .ghost{font-size:13px}.brass-legend,.brass-status{font-size:12px;color:var(--ink-soft);margin:10px 0}.brass-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.brass-note{min-width:0;background:#fff;border:1px solid var(--rule);padding:8px 3px;color:var(--ink);cursor:pointer;border-radius:3px;font:inherit;display:flex;flex-direction:column;align-items:center}.brass-note svg{width:76px;max-width:100%;height:37px}.brass-note strong{font-size:16px}.brass-note small{font-size:11px}.brass-note[aria-pressed=true]{background:var(--mimeo-soft);border-color:var(--mimeo);outline:1px solid var(--mimeo)}.brass-note:hover{border-color:var(--mimeo)}.brass-page button:focus-visible{outline:3px solid var(--mimeo);outline-offset:3px}.brass-page .masthead nav{flex-wrap:wrap;gap:10px 14px;justify-content:flex-end}[hidden]{display:none!important}
@media(max-width:760px){.brass-tool{grid-template-columns:1fr}.brass-stage{border-right:0;border-bottom:1px solid var(--rule);padding:12px;display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:12px}.brass-stage .eyebrow{grid-column:1}.brass-stage .brass-name{grid-column:1;font-size:36px}.brass-stage #brassStaff{display:block;grid-column:2;grid-row:1/4}.brass-stage #brassStaff svg{width:140px}.brass-stage #brassDiagram{grid-column:1;grid-row:4}.brass-stage #brassValves{grid-column:2;grid-row:4}.brass-stage #brassConcert,.brass-stage #brassAlt,.brass-stage #brassHint{grid-column:1/-1}.brass-stage #brassHint{margin:3px}.brass-panel{padding:10px}.brass-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.brass-note{padding:5px 2px}.brass-note svg{height:31px}.brass-heading{padding-top:14px}.brass-heading>p:last-child{font-size:14px}.brass-page .masthead .wrap{flex-wrap:wrap}}
@media print{.brass-page .masthead,.brass-page footer,.brass-heading .eyebrow,.brass-stage,.brass-controls,.brass-status,.brass-page .prose{display:none!important}.brass-page .wrap{padding:0;max-width:none}.brass-heading{padding:0}.brass-heading h1{font-size:24px}.brass-heading>p:last-child{font-size:12px}.brass-tool{display:block;border:0}.brass-panel{padding:0}.brass-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.brass-note{padding:8px;break-inside:avoid}.brass-note svg{width:100px;height:55px}.brass-note[aria-pressed=true]{background:white;outline:0;border-color:#aaa}.brass-note strong{font-size:19px}.brass-note small{font-size:12px}.brass-legend{font-size:12px;color:#000}.brass-grid:after{content:'B♭ trumpet · written notes · audio sounds one whole step lower · recorder-chart.com/trumpet-fingering-chart';grid-column:1/-1;font-size:10px;margin-top:10px}}