/* Pocket refinement: one family, text choices, and layouts sized by the editor width. */
:root{--font:'EB Garamond',Georgia,serif;--sans:var(--font);--mono:var(--font);--serif:var(--font)}
:root body,:root body *{font-family:var(--font)!important}
:root body{font-size:18px;line-height:1.6}
:root body .brand{font-size:39px;font-style:normal;font-weight:500;letter-spacing:-1.7px;gap:12px}
.wordmark-dot{color:var(--accent)}
.pocket-mark{width:30px;height:30px;flex:none;transform:rotate(-7deg);overflow:visible}
.pocket-mark rect{transform-box:fill-box;transform-origin:center;animation:pocket-breathe 7s ease-in-out infinite}
.pocket-mark rect:nth-child(2){animation-delay:.18s}.pocket-mark rect:nth-child(3){animation-delay:.36s}.pocket-mark rect:nth-child(4){animation-delay:.54s;stroke:var(--accent)}
.brand:hover .pocket-mark{transform:rotate(0deg);transition:transform .4s ease}
@keyframes pocket-breathe{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-1.2px)}90%{transform:translateY(0)}}
:root body .masthead{height:110px;padding-inline:40px;gap:45px}
:root body .masthead .instrument-switch{gap:28px}
:root body .masthead .instrument-switch a{font-size:17px;font-weight:500;letter-spacing:.01em;text-transform:none;padding:12px 0}
:root body .masthead .text-button{font-size:16px;letter-spacing:0}
:root body .workspace{grid-template-columns:280px minmax(0,1fr)}
:root body main{padding:40px 36px 0;container-type:inline-size}
:root body .library{height:calc(100dvh - 110px);padding:34px 22px 24px}
:root body .library-heading{margin-bottom:24px}
:root body .library-heading h2{font-size:28px;font-style:italic}
:root body .collection-tabs{margin-bottom:24px;gap:12px}
:root body .collection-tabs button{font-size:16px;padding-block:11px}
:root body .search-wrap input{font-size:17px}
:root body .count-pill{font-size:14px;padding:2px 7px}
:root body .genre-nav{margin-top:22px}
:root body .genre-nav label,:root body .genre-nav button{font-size:14px;letter-spacing:0}
:root body .filter-row{gap:20px;flex-wrap:wrap;margin-top:12px}
:root body .filter-row>.choice-control{flex:1;min-width:80px}
:root body .library-results{margin-top:20px;margin-bottom:10px;font-size:13px;letter-spacing:0}
:root body .library-results button{font-size:14px}
:root body .pattern-card{padding:18px 12px}
:root body .card-name{font-size:18px;line-height:1.3;letter-spacing:0;font-weight:500}
:root body .card-meta{font-size:14px;line-height:1.4;margin-top:9px}
:root body .card-bpm{font-size:12px}:root body .card-progression{font-size:13px}
:root body .genre-section-title{font-size:15px;letter-spacing:0;padding-block:13px}
:root body .style-section h4{font-size:13px;letter-spacing:.02em;margin-block:18px 6px;text-transform:none}
:root body .pattern-heading>.eyebrow{font-size:12px;letter-spacing:.06em}
:root body .title-row{gap:10px;margin:20px 0 18px;align-items:baseline}
:root body h1{font-size:clamp(34px,3.3vw,45px);line-height:1.12;font-weight:400;letter-spacing:-.6px}
:root body .edit-marker{font-size:31px;line-height:1;font-weight:500;color:var(--accent);position:relative;top:-5px;cursor:help}
:root body .edit-marker.storage-warning{color:var(--amber)}
:root body .favorite-button{margin-left:auto;align-self:center}
:root body .pattern-meta,:root body .genre-badge,:root body .family-badge,:root body #pattern-tags{font-size:15px;line-height:1.5}
:root body .family-badge{padding:2px 9px}
:root body .control-label{font-size:13px;font-weight:400;letter-spacing:.02em;margin:0 0 10px;line-height:1.3}
:root body .eyebrow{font-size:13px;letter-spacing:.03em}
:root body .text-button{font-size:16px;line-height:1.4;white-space:normal}
:root body .button{font-size:17px;line-height:1.3;min-height:44px}
:root body input[type=range]{min-height:32px}
:root body .tempo-input input{font-size:34px;letter-spacing:0;width:62px;line-height:1}
:root body .tempo-input>span{font-size:13px}
:root body .range-captions{font-size:12px}
/* These controls use no inherited nth-child or viewport column placement. */
:root body main .bass-key-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:28px 24px;padding:26px 24px 0;margin:32px 0;background:transparent;border-color:var(--line)}
:root body main .bass-key-panel>*{grid-column:auto;grid-row:auto;min-width:0}
:root body main .bass-key-panel>.key-lock{grid-column:1/-1;display:flex;align-items:center;min-height:44px}
:root body main .bass-key-panel>.scale-strip{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding:20px 0;min-width:0}
:root body main .scale-strip>#key-summary{font-size:16px;width:auto;line-height:1.4}
:root body main .scale-strip>#scale-notes{font-size:16px;letter-spacing:.01em;flex:1;min-width:160px}
:root body main .scale-strip button{font-size:15px;margin-left:0}
:root body main #key-lock-toggle{display:inline-flex;align-items:center;gap:10px;font-size:17px;line-height:1.2;min-height:44px;border-bottom:1px dotted var(--muted);padding:5px 0;color:var(--muted);text-align:left}
:root body main #key-lock-toggle[aria-pressed=true]{color:var(--accent-ink);border-bottom-color:var(--accent)}
#key-lock-toggle .ui-icon{width:18px;height:18px}
:root body main .transpose-control>div{gap:14px}
:root body main .transpose-control .button{border:0;border-bottom:1px dotted var(--line);background:none;border-radius:0;justify-content:center;padding:7px 12px;font-size:19px;min-height:44px}
:root body main .transport{display:grid;grid-template-columns:88px 88px minmax(100px,1fr) minmax(130px,1.3fr);align-items:start;gap:26px 28px;padding:26px 24px;margin:32px 0}
:root body main .transport>*{grid-column:auto;grid-row:auto;min-width:0}
:root body main .transport .play-button{height:64px;font-size:18px}
:root body main .transport .kit-control{display:block;padding:0;border:0}
:root body main .transport .tone-control{grid-column:3/-1;display:block;padding:0;border:0}
:root body main .transport .output-control{grid-column:1/-1;display:flex;align-items:center;gap:24px;padding:18px 0 0;border-top:1px solid var(--line);border-left:0}
:root body main .output-control .control-label{font-size:13px}
:root body main .output-control canvas{width:110px;height:24px}
:root body main .output-control input{max-width:200px}
:root body main .output-control label{flex:1;gap:16px;justify-content:flex-end}
:root body main .chord-editor{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 26px;align-items:start;padding:28px 0 22px}
:root body main .chord-editor>*{grid-column:auto;grid-row:auto;min-width:0}
:root body main .chord-editor>.chord-current{grid-column:1/-1;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding-bottom:12px}
:root body main .chord-current strong{font-size:25px;font-weight:400}
:root body main .chord-current>span:last-child{font-size:15px;margin:0}
:root body main .chord-editor #hear-chord{grid-column:1/-1;font-size:16px;justify-self:start;min-height:44px}
:root body main .note-inspector,:root body main .harmony-inspector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:24px;padding:24px}
:root body main .note-inspector>*,:root body main .harmony-inspector>*{grid-column:auto;grid-row:auto;min-width:0}
:root body main .note-inspector>.note-inspector-title,:root body main .harmony-inspector>.selected-info{grid-column:1/-1;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
:root body main .note-inspector .control-label,:root body main .harmony-inspector .control-label,:root body main .chord-editor .control-label{font-size:13px}
:root body main .note-inspector-title strong,:root body main .selected-info strong{font-size:19px}
:root body main .note-inspector-title>span:last-child,:root body main .selected-info>span:last-child{font-size:13px}
:root body main .note-inspector #delete-note,:root body main .harmony-inspector #delete-event{grid-column:1/-1;justify-self:start;font-size:16px;min-height:44px}
:root body main .phrase-section{margin:38px 0}
:root body main .phrase-heading{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
:root body main .phrase-heading>div:first-child{flex:1;min-width:140px}
:root body main .phrase-heading>.control-field{display:flex;align-items:center;gap:12px;font-size:16px}
:root body main .phrase-heading .follow-label{font-size:16px;display:flex;gap:9px;align-items:center;margin:0;min-height:44px}
:root body main .phrase-heading h2,:root body main .ensemble h2{font-size:28px}
:root body main .phrase-heading .mono{font-size:14px}
:root body main .phrase-overview{gap:14px}
:root body main .phrase-bar{padding:20px 16px}
:root body main .phrase-bar strong{font-size:27px;font-weight:400;margin-block:8px 12px}
:root body main .phrase-bar>span:first-child{font-size:13px}
:root body main .harmony-note{font-size:17px;line-height:1.65}
:root body main .ensemble{padding:30px 0;margin:30px 0}
:root body main .ensemble-heading{margin-bottom:16px;gap:24px}
:root body main .ensemble-heading .text-button{font-size:16px}
:root body main .ensemble-main{gap:32px;padding:12px 0 26px}
:root body main .companion-row{display:grid;grid-template-columns:150px minmax(0,1fr) 120px;gap:24px;align-items:center;padding:24px 0}
:root body main .companion-row>*{grid-column:auto;grid-row:auto;min-width:0}
:root body main .companion-toggle,:root body main .companion-heading label{font-size:17px;white-space:normal;line-height:1.4;display:flex;align-items:center;gap:10px}
:root body main .companion-toggle input,:root body main .follow-label input{width:16px;height:16px;flex:none;accent-color:var(--accent)}
:root body main .bass-mix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start;padding:30px 0;margin:16px 0}
:root body main .bass-mix>*{grid-column:auto;grid-row:auto;min-width:0}
:root body main .bass-mix>.companion-heading{grid-column:1}
:root body main .bass-mix>.choice-control{grid-column:2/-1}
:root body main .bass-mix>p{grid-column:1/-1;margin:0}
:root body main .bass-mix>label:last-of-type{display:block}
:root body main .bass-mix>p,:root body main .ensemble>p{font-size:17px;line-height:1.65;margin-top:24px}
:root body main .companion-heading .text-button{font-size:15px;margin-top:10px}
:root body main .groove-details{padding:32px 0 40px;gap:36px}
:root body main .groove-note p{font-size:19px;line-height:1.7;margin-top:18px;max-width:66ch}
:root body main .source-links{font-size:16px;gap:14px 20px;margin-top:24px}
:root body main .take-it>.text-button{font-size:16px;margin-top:20px}
:root body main .main-footer{padding:30px 0;font-size:14px;gap:20px}
:root body main .footer-wordmark{font-size:25px;font-style:normal}
:root body .sequencer-toolbar{padding:22px 20px 16px}
:root body .sequencer-label h2{font-size:19px;letter-spacing:0}
:root body .sequencer-label>.mono{font-size:12px}
:root body .history-tools .text-button{font-size:15px}
:root body .track-name{font-size:13px}:root body .track-toggle{font-size:12px}
:root body .beat-label,:root body .bass-beat{font-size:14px}
:root body .bass-cell,:root body .harmony-cell{font-size:12px}
:root body .harmony-roll{grid-template-rows:auto repeat(var(--voice-rows,7),35px)}
:root body .bass-pitch-label,:root body .harmony-row-label{font-size:14px}
:root body .bass-pitch-label span,:root body .harmony-row-label small{font-size:11px}
:root body .grid-bottom{padding:16px 20px;gap:14px}
:root body .edit-mode button{font-size:15px;min-height:42px;padding:6px 10px}
:root body .edit-mode>span{font-size:11px}
:root body .velocity-key{font-size:12px}
:root body .under-grid{padding:18px 0 30px;gap:18px}
:root body .under-grid .text-button{font-size:15px}
:root body .under-grid .mono,:root body .shortcut-hint,:root body kbd{font-size:12px}
/* Type-based choices, with the same interaction on every instrument. */
.choice-control{min-width:0;max-width:100%}
:root body .choice-trigger{display:block;max-width:100%;min-height:44px;padding:5px 0;text-align:left;font-size:19px;line-height:1.4;border:0;border-bottom:1px dotted var(--strong-line);border-radius:0;color:var(--ink);background:none;overflow-wrap:anywhere}
:root body .choice-trigger:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}
:root body .choice-trigger:disabled{border-bottom-color:transparent}
:root body .inline-choices{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;min-height:44px}
:root body .inline-choice{min-width:30px;min-height:44px;padding:5px 4px;font-size:19px;line-height:1.3;border-bottom:1px dotted transparent;color:var(--muted)}
:root body .inline-choice[aria-pressed=true]{color:var(--accent-ink);border-bottom-color:var(--accent)}
:root body .inline-choice:hover{color:var(--ink)}
:root body .length-filter{gap:20px;margin-top:20px;font-size:14px}
:root body dialog{padding:44px;max-height:86dvh}
:root body dialog h2{font-size:34px;font-style:italic;font-weight:400;line-height:1.15;margin-bottom:28px}
:root body dialog h3{font-size:21px;font-weight:500;margin-top:30px;margin-bottom:15px}
:root body dialog p,:root body dialog li{font-size:19px;line-height:1.65;margin-block:18px}
:root body .manual-copy summary{font-size:20px;font-weight:500;padding:22px 0;line-height:1.4}
:root body .manual-copy details p:last-child{margin-bottom:26px}
:root body .source-item{padding:26px 0}
:root body .source-item a{font-size:22px;font-weight:400;line-height:1.35}
:root body .source-item p{font-size:18px;margin-top:12px}
:root body .source-publisher,:root body .research-count{font-size:15px;margin-top:10px}
:root body .source-styles{gap:7px;margin-top:14px}
:root body .source-styles span{font-size:14px;padding:3px 8px}
:root body .research-filters{gap:20px;align-items:center;margin-block:24px}
:root body .text-input,:root body .research-filters input{font-size:18px;min-height:48px;padding:12px}
:root body .research-filters>.choice-control{min-width:130px;flex:none}
:root body .genre-tile{padding:24px}
:root body .genre-tile-heading strong{font-size:27px}
:root body .genre-style-links{gap:10px;margin-top:20px}
:root body .genre-style-links button{font-size:17px;min-height:44px;padding:8px 10px}
:root body .genre-tile small{font-size:14px;margin-top:20px}
:root body .export-option{padding:22px;margin-block:14px}
:root body .export-option strong{font-size:21px;font-weight:500}
:root body .export-option span{font-size:17px;margin-top:9px}
:root body .form-label{font-size:17px}
:root body .toast{font-size:18px;line-height:1.45}
:root body dialog.choice-dialog{width:min(650px,calc(100% - 32px));padding:40px;max-height:calc(100dvh - 32px);overflow:hidden}
:root body dialog.choice-dialog[open]{display:flex;flex-direction:column}
:root body .choice-dialog>h2,:root body .choice-search{flex:none}
.choice-close{position:absolute;right:15px;top:15px;z-index:1}
.choice-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:12px 26px;margin-top:24px;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;padding:4px}
.choice-options h3{grid-column:1/-1}
:root body .choice-option{text-align:left;padding:16px 0;min-height:56px;border-bottom:1px dotted var(--line);font-size:22px;line-height:1.3;color:var(--ink);overflow-wrap:anywhere}
:root body .choice-option small{display:block;font-size:16px;color:var(--muted);line-height:1.5;margin-top:7px}
:root body .choice-option[aria-pressed=true]{color:var(--accent-ink);border-bottom:1px solid var(--accent)}
:root body .choice-option:hover{color:var(--accent-ink)}
.note-choices .choice-options{grid-template-columns:repeat(4,minmax(0,1fr))}
:root body .note-choices .choice-option{text-align:center;font-size:26px}
@container(max-width:650px){
 :root body main .bass-key-panel{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 30px;padding:26px 20px 0}
 :root body main .transport{grid-template-columns:80px 80px minmax(0,1fr);gap:26px 22px;padding:24px 20px}
 :root body main .transport .kit-control{grid-column:1/3}
 :root body main .transport .tone-control{grid-column:3}
 :root body main .note-inspector,:root body main .harmony-inspector{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px;padding:24px 20px}
 :root body main .chord-editor{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 30px}
 :root body main .companion-row{grid-template-columns:minmax(0,1fr) 95px;gap:18px 24px}
 :root body main .companion-row .companion-toggle{grid-column:1;grid-row:1}
 :root body main .companion-row>.choice-control{grid-column:1/-1;grid-row:2}
 :root body main .companion-row>label:last-child{grid-column:2;grid-row:1}
 :root body main .bass-mix{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
 :root body main .bass-mix>.companion-heading,:root body main .bass-mix>.choice-control,:root body main .bass-mix>label:last-of-type{grid-column:1/-1}
 :root body main .phrase-heading>div:first-child{flex-basis:100%}
 :root body main .phrase-heading>.control-field{flex-basis:100%}
}
@container(max-width:390px){
 :root body main .transport{grid-template-columns:80px minmax(0,1fr);gap:26px 24px}
 :root body main .transport .swing-control{grid-column:1/-1}
 :root body main .transport .kit-control{grid-column:1}
 :root body main .transport .tone-control{grid-column:2}
 :root body main .bass-key-panel{padding-inline:18px;column-gap:22px}
 :root body main .scale-strip>#scale-notes{min-width:100%}
}
@media(max-width:1100px){
 :root body .workspace{grid-template-columns:245px minmax(0,1fr)}
 :root body main{padding:32px 28px 0}
 :root body .masthead{padding-inline:28px;gap:30px}
 :root body .masthead .instrument-switch{gap:20px}
}
@media(max-width:900px) and (min-width:761px){
 :root body .workspace{grid-template-columns:225px minmax(0,1fr)}
 :root body .masthead{gap:20px;padding-inline:22px}
 :root body .masthead .instrument-switch{gap:16px}
 :root body .masthead #research-button span{display:none}
}
@media(max-width:760px){
 :root body .masthead,:root body.bass-app .masthead{padding:24px 22px 0;gap:20px;min-height:152px}
 :root body .brand,:root body.bass-app .masthead .brand{font-size:37px}
 :root body .masthead nav{gap:10px}
 :root body .masthead .text-button{font-size:16px}
 :root body .masthead .icon-button{width:36px;height:42px}
 :root body .masthead .instrument-switch{gap:0;padding-top:8px}
 :root body .masthead .instrument-switch a{font-size:17px;padding:14px 4px}
 :root body .workspace{display:flex}
 :root body .mobile-library-bar{padding:6px 22px}
 :root body #library-toggle{font-size:17px;min-height:54px}
 /* Filters and pattern results each get their own room in the expanded library. */
 :root body .library,:root body.bass-app .library,:root body.harmony-app .library{padding:26px 22px;height:auto;min-height:0;max-height:none}
 :root body .library>*{flex-shrink:0}
 :root body .library .pattern-list{flex:none;height:60svh;min-height:360px;overscroll-behavior-y:contain}
 :root body main,:root body.bass-app main{padding:32px 22px 0}
 :root body .title-row{margin:20px 0 22px}
 :root body h1{font-size:37px;line-height:1.13}
 :root body .pattern-heading>.eyebrow{font-size:12px}
 :root body .pattern-meta{gap:12px}
 :root body main .bass-key-panel{margin:36px 0}
 :root body main .transport{margin:36px 0}
 :root body main .phrase-section{margin:40px 0}
 :root body main .phrase-overview{gap:12px;grid-template-columns:repeat(min(var(--bars),2),minmax(0,1fr))}
 :root body main .phrase-bar{padding:18px 12px}
 :root body main .phrase-bar strong{font-size:25px}
 :root body main .phrase-bar>span:first-child{font-size:12px}
 :root body .sequencer{margin-inline:-10px}
 :root body main .note-inspector,:root body main .harmony-inspector{margin-inline:-10px}
 :root body .sequencer-toolbar{padding:20px 12px 12px;gap:14px}
 :root body .sequencer-label h2{font-size:18px}
 :root body .history-tools .text-button{font-size:15px}
 :root body .step-pager{padding:4px 12px 20px;gap:12px}
 :root body .step-page-buttons button{font-size:16px;min-height:44px;padding:8px 13px}
 :root body .step-follow{font-size:15px;min-height:44px;gap:8px}
 :root body .track-name{font-size:12px;line-height:1.1}
 :root body .track-toggle{font-size:11px}
 :root body .bass-cell,:root body .harmony-cell{font-size:12px}
 :root body .harmony-roll{grid-template-rows:auto repeat(var(--voice-rows,7),44px)}
 :root body .bass-pitch-label,:root body .harmony-row-label{font-size:14px}
 :root body .bass-pitch-label span,:root body .harmony-row-label small{font-size:10px}
 :root body .beat-label,:root body .bass-beat{font-size:14px}
 :root body .grid-bottom{padding:16px 12px;gap:12px}
 :root body .grid-bottom .velocity-key{font-size:12px}
 :root body .under-grid{padding:22px 0 32px;gap:18px}
 :root body .under-grid .text-button{font-size:16px}
 :root body .under-grid .mono{font-size:12px}
 :root body main .ensemble{padding:32px 0;margin:24px 0 38px}
 :root body main .ensemble-heading{align-items:baseline;gap:24px}
 :root body main .ensemble-heading .text-button{font-size:15px}
 :root body main .companion-row{padding-block:28px}
 :root body main .groove-details{padding:32px 0 38px;gap:36px}
 :root body main .groove-note p{font-size:20px;line-height:1.7;margin-top:20px}
 :root body main .take-it{padding-top:30px}
 :root body main .action-buttons{gap:16px;margin-top:22px}
 :root body main .main-footer{padding:32px 0;gap:22px;font-size:14px}
 :root body main .main-footer>span:last-child{flex-wrap:wrap}
 :root body dialog,:root body dialog.wide-dialog{padding:36px 24px;width:calc(100% - 24px);max-height:88dvh}
 :root body dialog h2{font-size:32px;line-height:1.2;margin-bottom:28px;margin-right:22px}
 :root body dialog p,:root body dialog li{font-size:20px;line-height:1.65}
 :root body .manual-copy summary{font-size:21px;padding:24px 0}
 :root body .source-item{padding:28px 0}
 :root body .source-item a{font-size:23px}
 :root body .source-item p{font-size:19px;line-height:1.65}
 :root body .research-filters{flex-direction:column;align-items:stretch;gap:18px;margin:28px 0}
 :root body .research-filters .choice-control{width:100%}
 :root body dialog.choice-dialog{padding:26px 20px;height:calc(100svh - 24px);max-height:calc(100dvh - 24px);width:calc(100% - 24px)}
 :root body dialog.choice-dialog h2{font-size:27px;line-height:1.2;margin-bottom:16px;padding-right:18px}
 :root body .choice-dialog .choice-options{margin-top:16px}
 /* Long names need the full phone width; each option grows with its own text. */
 :root body .choice-options{grid-template-columns:minmax(0,1fr);align-items:start;gap:0}
 :root body .choice-options h3{font-size:17px;line-height:1.4;margin:24px 0 4px;color:var(--muted)}
 :root body .choice-options h3:first-child{margin-top:8px}
 :root body .choice-option{display:block;width:100%;min-width:0;height:auto;min-height:56px;padding:14px 2px;font-size:19px;line-height:1.4;white-space:normal;word-break:normal}
 :root body .choice-option>span{display:block}
 :root body .choice-option small{font-size:15px;line-height:1.45;margin-top:4px}
 :root body .choice-dialog.note-choices .choice-options{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 :root body .choice-dialog.note-choices .choice-option{font-size:22px;line-height:1.3;min-height:52px;padding:12px 2px}
}
@media(max-width:380px){
 :root body .masthead #research-button span{display:none}
 :root body .masthead,:root body.bass-app .masthead{padding-inline:20px;gap:18px}
 :root body main,:root body.bass-app main{padding-inline:20px}
 :root body .step-grid.steps-8,:root body .bass-roll.steps-8,:root body .harmony-roll.steps-8{grid-template-columns:64px repeat(8,minmax(22px,1fr))}
 :root body .phrase-heading .inline-choices{gap:8px}
}
@media(prefers-reduced-motion:reduce){.pocket-mark rect{animation:none!important}.brand:hover .pocket-mark{transition:none;transform:rotate(-7deg)}}
:root body .masthead nav button{min-height:44px}
:root body .inline-choices[data-for=register]{gap:4px 8px}
:root body .inline-choices[data-for=register] .inline-choice{min-width:28px}
@media(max-width:380px){
 :root body .brand,:root body.bass-app .masthead .brand{font-size:35px}
 :root body .masthead nav{gap:6px}
}