/* thatsynth — paper, ink, a blue pen. All icons are original SVG drawings. */
:root {
  --paper:#eeeee7; --panel:#f8f8f2; --surface:#e5e5dd; --cell:#e9e9e1;
  --ink:#252622; --muted:#62645b; --line:#cecec3; --strong-line:#acafa3;
  --accent:#0c50ff; --accent-soft:#dce5ff; --accent-ink:#073dc4;
  --on-accent:#fff; --amber:#815619; --amber-soft:#e5c892;
  --green:var(--accent-soft); --deep:#252622; --serif:Georgia,'Times New Roman',serif;
}
:root[data-theme=dark] {
  --paper:#1b1b1b; --panel:#242524; --surface:#30322f; --cell:#30322f;
  --ink:#f0f0e7; --muted:#b6b8ac; --line:#484b44; --strong-line:#74786a;
  --accent:#93b2ff; --accent-soft:#2d3d61; --accent-ink:#b3c9ff;
  --on-accent:#172445; --amber:#efc986; --amber-soft:#634923; --deep:#10110f;
}
:root body,:root body.bass-app,:root body.harmony-app,:root body.harmony-app[data-kind=chords] {
  --bass:var(--accent); --bass-light:var(--accent-soft); --bass-deep:var(--accent-ink);
  --hue:var(--accent); --hue-deep:var(--accent-ink); --hue-light:var(--accent-soft); --hue-border:var(--strong-line);
}
[hidden]{display:none!important} html{scrollbar-color:var(--strong-line) var(--paper)}
:root body{font-size:14px;line-height:1.5} ::selection{background:var(--accent-soft);color:var(--ink)}
button,input,select,a{touch-action:manipulation} button:hover:not(:disabled){filter:none}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px dotted var(--accent);outline-offset:4px}
button:disabled{opacity:.45} select,option{background:var(--panel);color:var(--ink)}
input[type=range],input[type=checkbox]{accent-color:var(--accent)} input[type=range]{min-height:24px}
input::placeholder{color:var(--muted);opacity:1} .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ui-icon{display:inline-block;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:middle}
:root body .masthead{height:96px;gap:44px;padding:0 32px;border-bottom:1px solid var(--line)}
:root body .brand{font:italic 31px var(--serif);letter-spacing:-1.5px;gap:10px;white-space:nowrap}
.brand-drawing{width:43px;height:35px;color:var(--accent);transform:rotate(-3deg)}
:root body .instrument-switch{background:none;border:0;padding:0;border-radius:0;gap:24px;display:flex;align-items:center}
:root body .instrument-switch a{font:11px var(--mono);letter-spacing:.11em;text-transform:uppercase;padding:7px 0;background:none;color:var(--muted);text-decoration:none;border-radius:0;border:0;border-bottom:2px dotted transparent}
:root body .instrument-switch a.active{background:none;color:var(--accent-ink);box-shadow:none;border-bottom-color:var(--accent)}
:root body .instrument-switch a:hover{color:var(--ink);border-bottom-color:var(--ink)}
:root body .masthead nav{gap:16px;margin-left:auto}
:root body .masthead .text-button{display:flex;align-items:center;gap:8px;font:11px var(--mono);letter-spacing:.04em}
:root body .masthead .text-button span{margin:0}
:root body .icon-button{width:36px;height:36px;border-color:var(--line);border-radius:6px;background:transparent}
:root body #help-button,:root body #theme-toggle{border-color:transparent}
:root body .icon-button:hover,:root body .button:hover{background:var(--surface)}
:root body .text-button{font-size:12px;font-weight:500;border-bottom:1px dotted transparent}
:root body .text-button:hover{border-bottom-color:currentColor;color:var(--accent-ink)}
.mobile-library-bar{display:none}
:root body .workspace{grid-template-columns:272px minmax(0,1fr);max-width:1680px}
:root body .library{padding:30px 18px 22px 22px;height:calc(100dvh - 96px);min-height:500px;gap:0}
:root body .library-heading{margin-bottom:20px}
:root body .library-heading h2{font:italic 25px var(--serif);letter-spacing:-.5px}
:root body .count-pill,:root body .family-badge{background:var(--surface);color:var(--muted);border-radius:3px}
:root body .count-pill{font-size:10px}
:root body .collection-tabs{background:none;padding:0;gap:5px;border-radius:0;margin-bottom:17px;border-bottom:1px solid var(--line)}
:root body .collection-tabs button{font-size:12px;padding:9px 3px;border-radius:0;color:var(--muted);border-bottom:2px solid transparent}
:root body .collection-tabs button.active{color:var(--accent-ink);background:none;box-shadow:none;border-bottom-color:var(--accent)}
:root body .search-wrap{background:var(--panel);border-radius:4px;padding:9px 10px}
:root body .search-wrap input{font-size:13px}
:root body .genre-select,:root body .filter-row select,:root body .length-filter select,:root body .research-filters select{background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:11px;min-height:36px;border-radius:4px}
:root body .genre-nav{margin-top:16px}:root body .genre-nav>label{color:var(--muted)}
:root body .genre-nav button{font-size:11px}
:root body .discovery-row{justify-content:flex-end;margin:0}
:root body .library-results{font-size:10px;margin-top:14px}
:root body .pattern-list{scrollbar-color:var(--strong-line) transparent;padding-right:3px}
:root body .pattern-card{border-bottom-color:var(--line);padding:13px 10px;border-radius:4px}
:root body .pattern-card.active{background:var(--accent-soft);border-color:transparent}
:root body .pattern-card.active:before{background:var(--accent);width:2px;left:0}
:root body .pattern-card:hover:not(.active){background:var(--surface)}
:root body .card-name{font-size:13px;font-weight:500;letter-spacing:-.1px}
:root body .card-meta{font-size:10px;color:var(--muted)}:root body .card-progression{color:var(--accent-ink)}
:root body .mini-beat i,:root body .bass-mini i.rest,:root body .phrase-mini i{background:var(--strong-line)}
:root body .mini-beat i.on,:root body .bass-mini i,:root body .phrase-mini i.on{background:var(--accent)}
:root body .genre-section-title{color:var(--muted);border-color:var(--line);background:var(--paper);font-size:10px;letter-spacing:.06em}
:root body .genre-section-title:before{background:var(--accent)}:root body .style-section h4{color:var(--muted);font-size:10px}
:root body main{padding:34px 32px 0}:root body.bass-app main{padding-top:34px}
:root body .eyebrow{font-size:10px;letter-spacing:.07em}:root body .live-label{font-size:9px;color:var(--muted)}:root body .live-label.modified{color:var(--amber)}
:root body .title-row{margin:14px 0 12px;gap:16px}
:root body h1{font:italic clamp(30px,3vw,42px)/1.15 var(--serif);letter-spacing:-1.1px;overflow-wrap:anywhere}
:root body .favorite-button{font-size:27px;color:var(--muted);min-width:40px;min-height:40px}
:root body .favorite-button[aria-pressed=true]{color:var(--accent-ink)}
:root body .pattern-meta{font-size:12px;gap:10px;flex-wrap:wrap}
:root body .genre-badge{background:none;color:var(--accent-ink);border:0;border-bottom:1px dotted currentColor;border-radius:0;padding:3px 0;font-size:12px}
:root body .family-badge{font-size:11px}:root body #pattern-tags{font-size:11px}
:root body .transport{border-radius:6px;box-shadow:none;padding:18px;gap:20px;background:var(--panel);border-color:var(--line)}
:root body .play-button{background:var(--accent);border:1px solid var(--accent);color:var(--on-accent);box-shadow:none;border-radius:4px;font:12px var(--mono)}
:root body .play-button.playing{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:none}
:root body .control-label{font-size:9px;color:var(--muted);letter-spacing:.05em}
:root body .range-captions{color:var(--muted)}
:root body .kit-control select{font-size:13px;color:var(--ink)}
:root body .sequencer{border-radius:6px;background:var(--panel)}
:root body .sequencer-toolbar{padding:15px 16px;gap:8px;flex-wrap:wrap}
:root body .sequencer-label h2{font:13px var(--mono);letter-spacing:-.2px}
:root body .small-grid-icon{display:none}:root body .sequencer-label>.mono{font-size:9px}
:root body .history-tools{gap:12px}:root body .history-tools .icon-button{width:32px;height:32px}
:root body .history-tools .text-button{font-size:11px}
:root body .step-grid{min-width:620px;grid-template-columns:134px repeat(16,minmax(23px,1fr));gap:5px 4px}
:root body .grid-scroll{padding:0 16px 16px}
:root body .beat-label,:root body .bass-beat{font-size:10px;color:var(--muted)}
:root body .beat-label.current,:root body .bass-beat.current{background:var(--accent);color:var(--on-accent)}
:root body .track-name{font-size:10px}:root body .track-name i{height:15px;width:3px}
:root body .track-toggle{background:var(--surface);color:var(--muted);width:20px;height:24px;font-size:9px}
:root body .track-toggle.on{background:var(--ink);color:var(--paper)}
:root body .step{height:40px;border-radius:3px;background:var(--cell);border-color:var(--line);box-shadow:none}
:root body .step.group-shade{background:var(--surface);border-color:var(--line)}
:root body .step.active{background:var(--track);border-color:color-mix(in srgb,var(--track),var(--ink) 25%)}
:root body .step.ghost{opacity:.65}:root body .step.accent{box-shadow:inset 0 -3px 0 #0004}
:root body .step.active:before{background:#fff}:root body .step span{color:#fff}
:root body .step.current{outline:2px solid var(--ink);outline-offset:1px;box-shadow:none;transform:none}
:root body .step.muted{opacity:.35}:root body .step:hover{border-color:var(--accent)}
:root body .grid-bottom{padding:11px 16px}:root body .edit-mode button{font-size:11px;padding:7px 9px}
:root body .edit-mode button.active{background:var(--accent-soft);color:var(--accent-ink)}
:root body .edit-hint,:root body .bass-grid-hint,:root body .harmony-grid-hint{font-size:11px}
:root body .velocity-key{font-size:9px}:root body .velocity-key i{background:var(--muted)}:root body .velocity-key i.accent{background:var(--ink)}
:root body .under-grid .text-button{font-size:11px}:root body .under-grid .mono{font-size:9px}
:root body kbd{background:var(--surface);border-color:var(--line);color:var(--ink)}
:root body .groove-details{gap:28px;padding:26px 0 32px}:root body .groove-note p{font-size:14px;color:var(--muted);line-height:1.75}
:root body .source-links{font-size:12px;color:var(--accent-ink);gap:10px 16px}
:root body .source-links a{border-bottom:1px dotted currentColor}:root body .take-it{padding-left:25px}
:root body .action-buttons{margin-top:16px}
:root body .button{border-color:var(--strong-line);border-radius:4px;font-size:12px;padding:11px 15px}
:root body .button.dark{color:var(--paper);background:var(--ink);border-color:var(--ink)}
:root body .button.dark:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
:root body .take-it>.text-button{font-size:11px;margin-top:14px}
:root body .main-footer{padding:23px 0 28px;color:var(--muted);font-size:10px;letter-spacing:0;align-items:center;flex-wrap:wrap}
:root body .main-footer>span:last-child{display:inline-flex}
.footer-wordmark{font:italic 21px var(--serif);color:var(--ink);letter-spacing:-1px}
.made-with{align-items:center;gap:5px}.made-with .ui-icon{width:17px;height:17px;color:var(--accent)}
:root body dialog{width:min(740px,calc(100% - 32px));border-radius:7px;padding:36px;background:var(--panel);box-shadow:0 20px 90px #0003;max-height:88dvh}
:root body dialog::backdrop{background:#0008;backdrop-filter:blur(4px)}
:root body dialog h2{font:italic 31px/1.2 var(--serif);letter-spacing:-.7px;margin-bottom:20px}
:root body dialog h3{font-size:14px;font-weight:600;margin-top:26px}
:root body dialog p,:root body dialog li{font-size:14px;line-height:1.7;color:var(--muted)}
:root body dialog a{color:var(--accent-ink);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px}
:root body .dialog-eyebrow{font-size:10px}:root body .dialog-note{background:var(--surface);border-radius:4px}
:root body .dialog-close{background:var(--panel);z-index:5}
.manual-copy details{border-top:1px solid var(--line);padding:0}
.manual-copy details:last-child{border-bottom:1px solid var(--line)}
.manual-copy summary{padding:17px 0;cursor:pointer;font-size:14px;font-weight:550;color:var(--ink);list-style-position:inside}
.manual-copy details[open] summary{color:var(--accent-ink)}
.manual-copy details p:first-of-type{margin-top:0}.manual-copy details p:last-child{margin-bottom:20px}
:root body .source-item a{font-size:14px;line-height:1.5}:root body .source-item p{font-size:13px}
:root body .source-publisher,:root body .research-count{font-size:11px;color:var(--muted)}
:root body .source-styles span{background:var(--surface);color:var(--muted);font-size:10px;border-color:var(--line)}
:root body .genre-tile{background:var(--panel);border:1px solid var(--line);border-radius:5px}
:root body .genre-tile-heading{color:var(--ink)}:root body .genre-tile-heading strong{font:italic 23px var(--serif)}
:root body .genre-style-links button{color:var(--muted);border-color:var(--line);background:var(--surface);font-size:12px}
:root body .genre-tile small{color:var(--muted)}
:root body .export-option,:root body .text-input{background:var(--panel);border-color:var(--line);border-radius:4px}
:root body .export-option:hover{background:var(--surface)}:root body .export-option strong{font-size:14px}:root body .export-option span{font-size:12px}
:root body .toast{background:var(--ink);color:var(--paper)}
:root body .bass-key-panel{background:var(--surface);border-color:var(--line);border-radius:6px;gap:14px;padding:16px 16px 0}
:root body .bass-key-panel select,:root body .note-inspector select,:root body .transpose-control .button,:root body .chord-editor select,:root body .harmony-inspector select,:root body .companion-row select,:root body .bass-mix>select{background:var(--panel);border-color:var(--line);color:var(--ink);font-size:12px;min-height:36px;border-radius:4px}
:root body .key-lock{color:var(--ink);font-size:11px}:root body .key-lock small{font-size:10px}
:root body .scale-strip{border-color:var(--line)}:root body .scale-strip>#key-summary{color:var(--accent-ink)}:root body .scale-strip button{font-size:11px}
:root body .bass-pitch-label,:root body .harmony-row-label{color:var(--muted);font-size:10px}
:root body .bass-pitch-label.root{color:var(--accent-ink)}:root body .bass-pitch-label span,:root body .harmony-row-label small{color:var(--muted);font-size:9px}
:root body .bass-roll{grid-template-columns:80px repeat(16,minmax(25px,1fr))}
:root body .bass-cell{background:var(--cell);border-color:var(--line);color:var(--ink);height:25px}
:root body .bass-pitch-label{height:25px}:root body .bass-cell.root-row{background:var(--surface)}
:root body .bass-cell.note-start,:root body .harmony-cell.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent);box-shadow:none}
:root body .bass-cell.note-tail,:root body .harmony-cell.tail{background:var(--accent-soft);border-color:var(--accent-soft)}
:root body .bass-cell.chromatic{background:var(--amber-soft);border-color:var(--amber);color:var(--ink)}
:root body .bass-cell.selected,:root body .harmony-cell.selected{outline:2px solid var(--ink);outline-offset:-2px}
:root body .bass-cell.current,:root body .harmony-cell.current{box-shadow:inset 0 0 0 2px var(--accent-ink);background-image:none}
:root body .bass-cell.note-start.current{background:var(--accent);color:var(--on-accent)}
:root body .bass-cell.beat-edge,:root body .harmony-cell.beat-edge{border-left-color:var(--strong-line)}
:root body .bass-cell.gated:after{background:var(--panel);opacity:.4}:root body .bass-cell:hover,:root body .harmony-cell:hover{border-color:var(--accent)}
:root body .bass-chromatic-key i{background:var(--amber)}:root body .chromatic-note{color:var(--amber)!important}
:root body .note-inspector,:root body .harmony-inspector{background:var(--surface);border-color:var(--line)}
:root body .note-inspector .control-label,:root body .harmony-inspector .control-label,:root body .chord-editor .control-label{font-size:9px}
:root body .note-inspector-title>span:last-child,:root body .harmony-inspector .selected-info>span:last-child{font-size:9px}
:root body .bass-mix>p,:root body .ensemble>p,:root body .harmony-note{font-size:12px;color:var(--muted);line-height:1.65}
:root body .companion-heading label,:root body .companion-toggle{font-size:12px}:root body .companion-heading .text-button{font-size:11px}
:root body .phrase-heading h2,:root body .ensemble h2{font:italic 25px var(--serif)}
:root body .phrase-heading>label{font-size:12px}:root body .phrase-heading .mono{font-size:10px}:root body .phrase-heading .follow-label{font-size:11px}
:root body .phrase-bar{background:var(--panel);border-radius:4px}:root body .phrase-bar.selected{border-color:var(--accent);background:var(--accent-soft)}
:root body .phrase-bar strong,:root body .chord-current strong{color:var(--accent-ink)}:root body .phrase-bar>span:first-child{font-size:10px}
:root body .phrase-mini i.held{background:var(--strong-line)}:root body .phrase-mini i.current{background:var(--accent-ink)}
:root body .harmony-cell{background:var(--cell);border-color:var(--line);font-size:10px;height:35px;color:var(--ink)}
:root body .harmony-row-label{height:35px}:root body .harmony-cell.chromatic{border-bottom-color:var(--amber)}
:root body .harmony-cell.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}:root body .harmony-cell.tail{background:var(--accent-soft)}
:root body .ensemble-heading .text-button,:root body .chord-editor #hear-chord{font-size:11px;color:var(--accent-ink)}
.step-pager{display:none}
@media(max-width:1150px){
 :root body .masthead{gap:25px;padding:0 24px}:root body .instrument-switch{gap:18px}
 :root body .workspace{grid-template-columns:240px minmax(0,1fr)}:root body main{padding:28px 22px 0}
 :root body .library{padding:26px 14px 18px 16px}:root body .transport{gap:14px}
 :root body .groove-details{grid-template-columns:1fr}:root body .take-it{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:900px){
 :root body .masthead{gap:18px}:root body .brand{font-size:28px}.brand-drawing{width:35px}
 :root body .masthead nav{gap:8px}:root body .instrument-switch{gap:12px}:root body .instrument-switch a{font-size:10px;letter-spacing:.05em}
 :root body .workspace{grid-template-columns:215px minmax(0,1fr)}:root body main{padding:26px 16px 0}
 :root body .bass-key-panel{gap:10px}:root body .scale-strip{flex-wrap:wrap}
}
@media(max-width:760px){
 :root body .masthead,:root body.bass-app .masthead{height:auto;min-height:116px;padding:16px 16px 0;gap:14px;flex-wrap:wrap}
 :root body .brand,:root body.bass-app .masthead .brand{font-size:29px}.brand-drawing{width:38px;height:30px}
 :root body .masthead nav,:root body.bass-app .masthead nav{gap:8px}:root body .masthead .text-button{font-size:10px;gap:5px}
 :root body .masthead .text-button .ui-icon{width:18px}:root body .masthead .icon-button{width:32px;height:36px}
 :root body .instrument-switch,:root body.bass-app .instrument-switch{order:3;width:100%;justify-content:space-between;padding:2px 0 0;gap:0}
 :root body .instrument-switch a{font-size:11px;letter-spacing:.07em;padding:10px 6px;flex:1;text-align:center}
 .mobile-library-bar{display:block;border-bottom:1px solid var(--line);padding:0 16px}
 #library-toggle{display:flex;align-items:center;gap:9px;font:12px var(--mono);min-height:48px;width:100%;padding:0;color:var(--accent-ink)}
 #library-toggle>span:last-child{margin-left:auto;font-size:19px}#library-toggle[aria-expanded=true]>span:last-child{transform:rotate(180deg)}
 :root body .workspace{display:flex;flex-direction:column}
 :root body .library,:root body.bass-app .library,:root body.harmony-app .library{display:none;order:0;height:min(660px,78dvh);min-height:420px;position:static;border:0;border-bottom:1px solid var(--line);padding:20px 16px;background:var(--paper)}
 :root body.library-open .library{display:flex}:root body .library-heading{margin-bottom:10px}:root body .library-heading h2{font-size:25px}
 :root body .filter-row{flex-wrap:nowrap}:root body .filter-row select:first-child{width:auto;flex:1}:root body .filter-row select:last-child{width:auto}
 :root body main,:root body.bass-app main{padding:24px 12px 0;order:1}
 :root body .pattern-heading{padding:0 4px}:root body h1{font-size:32px;letter-spacing:-1px}
 :root body .pattern-heading>.eyebrow{font-size:9px}:root body .live-label{font-size:8px;max-width:160px}
 :root body .pattern-meta{font-size:11px;gap:8px}:root body #pattern-tags{display:none}
 :root body .transport,:root body .bass-transport{padding:14px 12px;gap:15px 12px;grid-template-columns:80px 76px minmax(0,1fr);margin:20px 0 16px}
 :root body .kit-control,:root body .tone-control{grid-column:1/-1;display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);padding-top:10px;min-width:0}
 :root body .kit-control .control-label,:root body .tone-control .control-label{margin:0;white-space:nowrap}:root body .kit-control select{border:0;min-width:0}
 :root body .play-button,:root body .bass-transport .play-button{height:54px}:root body .control-label{font-size:9px}
 :root body .output-control{display:flex;grid-column:1/-1}:root body .output-control canvas{width:64px}:root body .output-control input{max-width:none}
 :root body .sequencer-toolbar{padding:12px 10px 5px}:root body .sequencer-label h2{font-size:12px}:root body .sequencer-label>.mono{display:none}
 :root body .history-tools{gap:9px}:root body .history-tools .text-button{font-size:11px}:root body .history-tools .icon-button{width:30px;height:36px}
 .step-pager{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:7px 10px 12px}
 .step-page-buttons{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
 .step-page-buttons button{font:11px var(--mono);padding:9px 10px;min-height:38px;border-right:1px solid var(--line)}
 .step-page-buttons button:last-child{border:0}.step-page-buttons button[aria-pressed=true]{color:var(--on-accent);background:var(--accent)}
 .step-follow{font-size:10px;display:flex;align-items:center;gap:5px;min-height:38px;color:var(--muted)}.step-follow input{margin:0}
 :root body .grid-scroll,:root body .bass-roll-scroll,:root body .harmony-roll-scroll{padding:0 8px 12px;overscroll-behavior-x:contain}
 :root body .step-grid,:root body .bass-roll,:root body .harmony-roll{width:max-content;min-width:100%;grid-template-columns:86px repeat(16,minmax(32px,1fr));gap:4px 3px}
 :root body .step-grid.steps-8,:root body .bass-roll.steps-8,:root body .harmony-roll.steps-8{width:100%;min-width:0;grid-template-columns:76px repeat(8,minmax(24px,1fr));gap:4px 2px}
 :root body .step,:root body .bass-cell,:root body .harmony-cell{height:44px;border-radius:3px;font-size:9px}
 :root body .step.group-start{margin-left:0}:root body .step.group-start{border-left-width:2px}
 :root body .track-label{position:sticky;left:0;background:var(--panel);height:44px;z-index:3;display:grid;grid-template-columns:1fr 1fr;gap:0 3px;padding:0 4px 0 0}
 :root body .track-name{grid-column:1/-1;font-size:9px;gap:4px;line-height:1.1;min-height:20px}
 :root body .track-name i{height:10px;width:3px}:root body .track-toggle{width:100%;height:23px;font-size:9px;border-radius:2px;padding:0}
 :root body .track-level{display:none!important}:root body .little-label{font-size:8px;letter-spacing:0}
 :root body .beat-label,:root body .bass-beat{font-size:10px;padding:5px 0;height:28px}
 :root body .bass-pitch-label,:root body .harmony-row-label{height:44px;font-size:11px;padding:0 6px 0 2px}
 :root body .bass-pitch-label span,:root body .harmony-row-label small{font-size:8px}:root body .bass-roll-scroll{max-height:410px}
 :root body .bass-roll-scroll:after{display:none}
 :root body .grid-bottom{padding:10px;gap:6px;flex-wrap:wrap}:root body .edit-mode button{min-height:38px;font-size:11px;padding:7px 9px}
 :root body .edit-hint,:root body .bass-grid-hint,:root body .harmony-grid-hint{display:none}:root body .velocity-key{font-size:9px}
 :root body .under-grid{gap:10px;flex-wrap:wrap;padding-bottom:20px}:root body .under-grid .mono{font-size:8px}:root body .shortcut-hint{display:none}
 :root body .bass-key-panel{grid-template-columns:62px minmax(0,1fr) 91px;padding:13px 12px 0;gap:12px 8px;margin-top:20px}
 :root body .bass-key-panel select{font-size:12px;padding:7px 4px}:root body .scale-strip>#key-summary{width:100%;font-size:11px}:root body .scale-strip>#scale-notes{font-size:10px;letter-spacing:0}
 :root body .scale-strip button{font-size:10px}:root body .key-lock{grid-column:2/4}
 :root body .note-inspector,:root body .harmony-inspector,:root body.harmony-app[data-kind=chords] .harmony-inspector{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px 10px;gap:14px 10px}
 :root body .note-inspector-title,:root body .harmony-inspector .selected-info{grid-column:1/3}:root body .note-inspector>label:nth-of-type(1){grid-column:3}
 :root body .note-inspector>label:nth-last-of-type(2),:root body .note-inspector>label:last-of-type{grid-column:auto}:root body .note-inspector>#delete-note{grid-column:3}
 :root body .note-inspector select,:root body .harmony-inspector select{font-size:12px;min-height:40px}:root body .note-inspector .text-button,:root body .harmony-inspector .text-button{font-size:11px}
 :root body .bass-mix{grid-template-columns:1fr 1fr;gap:14px}:root body .bass-mix>p{font-size:12px}:root body .bass-mix>label:last-of-type{grid-column:1/-1}
 :root body .phrase-heading{flex-wrap:wrap;gap:12px}:root body .phrase-heading>div{flex-basis:100%}:root body .phrase-heading .follow-label{margin-left:auto;font-size:11px}
 :root body .phrase-heading select{min-height:40px;font-size:12px}
 :root body .phrase-overview{grid-template-columns:repeat(min(var(--bars),2),minmax(0,1fr));gap:8px}
 :root body .phrase-bar{padding:12px}:root body .phrase-bar strong{font-size:22px}:root body .phrase-bar>span:first-child{font-size:10px}
 :root body .chord-editor{grid-template-columns:90px minmax(0,1fr) minmax(0,1fr);gap:12px 10px}:root body .chord-editor select{min-height:40px;font-size:12px}
 :root body .companion-row{grid-template-columns:minmax(0,1fr) 95px;gap:10px 15px}:root body .companion-row .companion-toggle{grid-column:1}
 :root body .companion-row>select{grid-row:2;grid-column:1/-1;min-height:42px}:root body .companion-row>label:last-child{grid-row:1;grid-column:2}
 :root body .ensemble-heading .text-button{font-size:11px;white-space:normal;max-width:110px;text-align:right}
 :root body .groove-details{padding:23px 4px 28px;grid-template-columns:1fr;gap:24px}:root body .groove-note p{font-size:14px}:root body .take-it{padding:22px 0 0;display:block}
 :root body .action-buttons{margin-top:14px}:root body .button{min-height:42px}:root body .main-footer{padding:22px 4px;gap:15px;font-size:9px}
 :root body dialog{padding:30px 20px;width:calc(100% - 20px);max-height:90dvh}:root body dialog h2{font-size:28px;margin-right:25px}
 :root body .research-filters{flex-wrap:wrap}:root body .research-filters input{min-width:0}:root body .research-filters select{width:100%}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Keep the instrument navigation on one line until the mobile layout starts. */
@media(min-width:761px){
 :root body .masthead{flex-wrap:nowrap;padding-top:0;padding-bottom:0}
 :root body .masthead .instrument-switch{order:initial;width:auto;justify-content:flex-start;padding:0;gap:18px}
 :root body .masthead .instrument-switch a{padding:7px 0;background:none}
}
@media(max-width:760px){
 :root body .masthead .instrument-switch{order:3;width:100%;padding:2px 0 0;gap:0}
 :root body .masthead .instrument-switch a{padding:10px 6px;font-size:11px;background:none}
 :root body .research-filters select{max-width:100%}
}
:root body .genre-nav button,:root body .style-section h4>span,:root body .genre-style-links i,:root body .meta-slash{color:var(--muted)}
:root body .bass-note-sequence{color:var(--accent-ink)}
:root body dialog.wide-dialog{width:min(880px,calc(100% - 32px))}

@media(max-width:380px){
 :root body .masthead #research-button{width:32px;justify-content:center}
 :root body .masthead #research-button span{display:none}
 :root body .step-grid.steps-8,:root body .bass-roll.steps-8,:root body .harmony-roll.steps-8{grid-template-columns:68px repeat(8,minmax(23px,1fr))}
}