/* The Studio: the instrument on the choir's vellum and gold. Displays on top,
   the keyboard you play it with, the words, the take as a strip; the voice
   at the side, where the choir keeps its library. */
body[data-room="studio"] header .transport, body[data-room="studio"] header .knob,
body[data-room="studio"] #bAdd, body[data-room="studio"] #bUndo, body[data-room="studio"] #bExamples,
body[data-room="studio"] #bCompose, body[data-room="studio"] #bLight, body[data-room="studio"] #bClear, body[data-room="studio"] #bFocus { display: none; }
/* every touch is a note: no double-tap zoom, no long-press menus, no text selection */
#studio { touch-action: manipulation; }
#studio .skey, #studio #stLyricRow, #stModes { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

#studio { grid-row: 2 / span 2; display: grid; place-items: stretch; padding: 0; min-height: 0;
  grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr);
  background: radial-gradient(ellipse at 40% 0%, #1b1e27 0%, var(--nave) 60%); }
#studio .label { white-space: nowrap; }
#studio .sep { width: 1px; align-self: stretch; background: var(--line); }
#studio kbd { font: 11px var(--mono); border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; color: var(--vellum); }

/* the bar: record, play, send */
#stBar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-block: 7px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  border-bottom: 1px solid var(--line); background: var(--stone); }
#stBar button { font-size: 12.5px; padding: 4px 9px; }
#stRec .dot { color: var(--rubric); }
#stClock { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 15px; min-width: 6ch; color: var(--gold); }
#stName { width: 130px; font-size: 13px; }
#stInfo { font-family: var(--label); font-size: 12px; letter-spacing: 0.05em; color: var(--dim); }
#stBar select { font-size: 12.5px; max-width: 140px; }
#stBar .check { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--dim); }
#stBar button:disabled { opacity: 0.45; cursor: default; }
#stBar2 { display: contents; }
/* the bar's groups: perform (record what you play), the take (play it back, keep it, send it), the voice */
/* (each group flows in the bar's one wrapping row; its label, after a rule, starts it) */
#stBar .stgrp { display: contents; }
#stBar .stgl { font-size: 11px; color: var(--dim); }
#stTakeBar > .stgl { border-left: 1px solid var(--line); padding-left: 12px; margin-left: 4px; align-self: stretch; display: inline-flex; align-items: center; }
#stVoiceBar > :first-child { margin-left: auto; }
/* what cannot act yet (no take, no words): grayed, its tooltip says why */
#studio button:disabled, #studio input:disabled, #studio select:disabled { opacity: 0.4; cursor: not-allowed; }
#studio button:disabled:hover { border-color: var(--line); }
#stMore { display: none; }
#stRec.rec { background: var(--rubric); border-color: var(--rubric); color: #fff; }

/* the main column scrolls when the window is short */
#stMain { min-height: 0; overflow-y: auto; overflow-x: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start;
  padding: 10px max(16px, env(safe-area-inset-left, 0px)) 14px; scrollbar-width: thin; grid-auto-rows: max-content; }
/* the displays: the head large, the analyses beside it */
#stViews { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.7fr); gap: 8px; height: clamp(300px, 54vh, 680px); }
.stv { position: relative; min-width: 0; min-height: 0; background: var(--stone); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.stv canvas { display: block; width: 100%; height: 100%; }
.stv-head { grid-row: 1 / span 3; }
.stv-spec canvas { image-rendering: auto; }
.stv .stcap { position: absolute; left: 9px; top: 6px; font-family: var(--label); font-size: 11.5px; letter-spacing: 0.08em; color: var(--dim); pointer-events: none; }
.stv .readout { position: absolute; right: 9px; top: 6px; font: 500 12px var(--mono); color: var(--gold); font-variant-numeric: tabular-nums; pointer-events: none; }
#stHead3 { position: absolute; inset: 0; }
#stHead3 canvas { display: block; width: 100%; height: 100%; }
#stHead3[data-state="loading"]::after { content: "loading the head…"; position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font: 12px var(--mono); color: var(--dim); pointer-events: none; }
.stv-head.is3d > #stHead { visibility: hidden; }
.stv-head > .stcap, .stv-head > .readout, #stHead3d, #stStart { z-index: 1; }
#stHead3d { position: absolute; right: 8px; bottom: 8px; font-size: 12px; padding: 3px 9px; background: rgba(32, 36, 45, 0.85); }
#stHead3d[aria-pressed="true"] { color: var(--gold); border-color: var(--gold); }
/* the wireframe (wire3d.js): over the drawn section, which it stands in for */
#stWire { position: absolute; inset: 0; background: #060607; }
#stWire canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#stWire .wf-reset { position: absolute; left: 8px; bottom: 8px; font-size: 11.5px; padding: 2px 8px; background: rgba(12, 12, 14, 0.8); z-index: 1; }
.stv-head.iswire > #stHead { visibility: hidden; }
#stWireBtn { position: absolute; right: 52px; bottom: 8px; font-size: 12px; padding: 3px 9px; background: rgba(32, 36, 45, 0.85); z-index: 1; }
#stWireBtn[aria-pressed="true"] { color: #fffaf0; border-color: rgba(255, 250, 240, 0.7); }
#stStart { position: absolute; left: 9px; bottom: 8px; font-size: 12px; padding: 3px 9px; background: rgba(32, 36, 45, 0.85); }
.stv-glot .stcap { display: none; }

/* the keyboard, laid out as the computer's: each key shows its cap (top
   left) and what it plays. Consonants in stone, vowels in rubric, the pitch
   keys like ivory; the other keys (record, drone, shift, space...) plain. */
/* a key unit sized to the column (100vw less the voice panel and the margins; not a container query, which re-lays the page out every frame) */
#stKeys { --gap: 4px; --u: min(58px, calc((100vw - 344px - 14 * var(--gap)) / 15.2)); display: grid; gap: var(--gap); }
@media (max-width: 980px) { #stKeys { --u: min(58px, calc((100vw - 44px - 14 * var(--gap)) / 15.2)); } }
.kbrow { display: flex; align-items: stretch; gap: var(--gap); min-width: 0; }
.kgroup { display: contents; }
.kbrow .rowname { align-self: center; margin-left: 6px; font-family: var(--label); font-size: 11.5px; letter-spacing: 0.06em; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#stNextSyl { margin-left: 6px; color: var(--gold); font-family: "Gentium Plus", var(--display); letter-spacing: 0; font-size: 13px; }
#stMidi { align-self: center; margin-left: auto; font-family: var(--label); font-size: 11.5px; letter-spacing: 0.06em; color: var(--dim); white-space: nowrap; }
.padtools { display: inline-flex; gap: 6px; margin-left: auto; }
#stKeys .padtools { display: none; } /* the shift and space keys do it here */
.padtools button { font-size: 12px; padding: 2px 10px; }
.padtools button.on { background: var(--gold); border-color: var(--gold); color: #1a1408; }
/* the syllable keys (studio-syllable.js): what is armed, what closes it, and the way the keys play */
#stSylChips { align-self: center; display: inline-flex; align-items: center; gap: 4px; min-width: 0; margin-left: 8px; overflow: hidden; white-space: nowrap; font-family: "Gentium Plus", var(--display); font-size: 14px; }
#stSylChips b { font-weight: 500; padding: 1px 7px; border-radius: 9px; background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold); }
#stSylChips .sc-lab, #stSylChips .sc-hint { font-family: var(--label); font-size: 11.5px; letter-spacing: 0.06em; color: var(--dim); }
#stSylChips .sc-now { color: var(--gold); margin-right: 4px; }
#stPlayAs { align-self: center; display: inline-flex; margin-left: auto; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
#stPlayAs button { border: 0; border-radius: 0; font-size: 12px; padding: 2px 10px; }
#stPlayAs button + button { border-left: 1px solid var(--line); }
#stPlayAs button.on { background: color-mix(in srgb, var(--gold) 24%, transparent); color: var(--gold); }
.skey[data-armed="armed"]:not([data-down="1"]) { box-shadow: inset 0 0 0 2px var(--gold); }
.skey[data-armed="coda"]:not([data-down="1"]) { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold) 55%, var(--dim)); }
/* words or sounds: a narrow screen's tabs */
#stModes { display: none; }
.krow { display: flex; flex-wrap: wrap; gap: 4px; }
.skey { position: relative; flex: none; width: var(--u, 40px); min-width: 0; height: calc(var(--u, 40px) * 0.92); padding: 0 3px; display: grid; place-items: center; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 6px; background: var(--stone-2); color: var(--vellum); cursor: pointer; user-select: none; touch-action: none;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.28); transition: background-color 40ms, transform 40ms; }
.skey .g { font-family: "Gentium Plus", "Charis SIL", var(--display); font-size: clamp(14px, calc(var(--u, 40px) * 0.36), 21px); line-height: 1; padding-top: 6px; }
.skey .kc { position: absolute; left: 4px; top: 2px; font: 500 10px/1.1 var(--mono); color: var(--dim); text-transform: uppercase; pointer-events: none; }
/* chant and contour's keys: sized to their words, the cap at the bottom right */
#stScheme .skey { width: auto; min-width: 38px; height: 38px; padding: 0 5px; }
#stScheme .skey .g { padding-top: 0; }
.skey small { position: absolute; right: 4px; bottom: 2px; font: 500 9.5px var(--mono); color: var(--dim); }
.skey.pitch small { color: var(--ivory-cap); }
.skey.vowel { background: color-mix(in srgb, var(--rubric) 22%, var(--stone-2)); border-color: color-mix(in srgb, var(--rubric) 40%, var(--line)); }
.skey.pitch { background: var(--ivory); border-color: var(--ivory-edge); color: #1a1408; }
.skey.pitch .g { font-family: var(--display); font-size: clamp(13px, calc(var(--u, 40px) * 0.3), 17px); font-weight: 700; }
.skey.pitch .kc { color: var(--ivory-cap); }
.skey.pitch.fin { box-shadow: inset 0 -3px 0 var(--rubric); }
/* the keys that are not notes, and the gaps that keep the rows in their places */
.skey.fn { background: var(--stone); }
.skey.fn .g { font-family: var(--label); font-size: 11.5px; letter-spacing: 0.04em; color: var(--dim); text-align: center; line-height: 1.05; }
.skey.fn.on { border-color: var(--gold); }
.skey.fn.on .g { color: var(--gold); }
.skey.fn[data-fn="rec"] .g { color: var(--rubric); }
.skey.blank { visibility: hidden; pointer-events: none; }
.skey.w15 { width: calc(var(--u) * 1.5); } .skey.w175 { width: calc(var(--u) * 1.75); }
.skey.w225 { width: calc(var(--u) * 2.25); } .skey.w375 { width: calc(var(--u) * 3.75); } .skey.w6 { width: calc(var(--u) * 6); }
/* sounding: lit, and pressed in */
.skey[data-down="1"], .skey[data-press="1"] { background: var(--gold); border-color: var(--gold); color: #1a1408; box-shadow: none; transform: translateY(1px); }
.skey[data-down="1"] .kc, .skey[data-press="1"] .kc, .skey[data-press="1"] .g { color: #3b2d10; }

/* words: the language, the text, sing or speak */
#stWords { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
#stLangBox { display: flex; align-items: center; gap: 0; border: 1px solid var(--gold); border-radius: 6px; background: var(--stone-2); padding-left: 9px; }
#stLangBox .label { color: var(--gold); }
#stLang { border: 0; background: transparent; font-size: 14px; font-weight: 500; padding: 6px 8px; max-width: 14em; cursor: pointer; }
/* the text's language, beside it: small, unless it is another than the voice's */
#stTextLang { border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; font-size: 12px; color: var(--dim); padding: 6px 6px; max-width: 11em; cursor: pointer; }
#stTextLang.other { color: var(--gold); }
#stText { flex: 1 1 240px; min-width: 0; font-size: 15px; padding: 6px 10px; }
#stSay { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
#stSay select { max-width: 15em; min-width: 0; }
#stLyricRow { flex-basis: 100%; min-width: 0; max-width: 100%; display: flex; flex-wrap: wrap; gap: 4px; min-height: 0; }
#stLyricRow .syl { font-family: "Gentium Plus", var(--display); font-size: 15px; letter-spacing: 0; padding: 1px 8px; color: var(--dim); }
/* sounding: filled; up next (no key held): outlined; being edited: underlined */
#stLyricRow .syl.now { background: var(--gold); color: #1a1408; border-color: var(--gold); }
#stLyricRow .syl.next { border-color: var(--gold); color: var(--gold); }
#stLyricRow .syl.sel { box-shadow: inset 0 -2px 0 var(--vellum); color: var(--vellum); }
#stLyricRow .syl.pitched::after { content: "♪"; margin-left: 3px; font-size: 11px; color: var(--gold); }
#stLyricRow .syl.clear { font-family: var(--label); font-size: 12px; }
/* a syllable, edited */
#stSylEd { flex-basis: 100%; display: grid; gap: 6px; padding: 7px 10px; border: 1px solid var(--gold); border-radius: 8px; background: var(--stone); min-width: 0; }
#stSylEd[hidden] { display: none; }
#stSylEd .sedTop, #stSylEd .sedRow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
#sedWhich { font-weight: 500; white-space: nowrap; }
#sedSay { flex: 1 1 140px; min-width: 0; font: 16px "Gentium Plus", var(--display); padding: 4px 8px; }
#stSylEd button { font-size: 12px; padding: 3px 9px; }
#stSylEd button:disabled { opacity: 0.4; cursor: default; }
#stSylEd select { font-size: 13px; }
#stSylEd label, #stSylEd .sedPitch { display: inline-flex; align-items: center; gap: 6px; }
#sedLen { width: 110px; }
#stSylEd output { font: 12px var(--mono); color: var(--vellum); min-width: 4ch; text-align: center; }
#stSylEd .sedOps { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
#sedClose { margin-left: auto; }
/* the contour Sing uses: a grid, a note for each syllable */
#stPlanBtn.on { border-color: var(--gold); color: var(--gold); }
#stPlan { flex-basis: 100%; min-width: 0; display: grid; gap: 4px; overflow-anchor: none; } /* editing it never scrolls the page */
#stPlan[hidden] { display: none; }
#stPlan .pbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
#stPlan .pbar .label { color: var(--gold); }
#stPlan .pbar .hint { color: var(--dim); font-size: 11.5px; min-width: 0; }
#stPlan .pbar .spacer { flex: 1; }
#stPlan .pbar button { font-size: 12px; padding: 3px 9px; }
#stPlan .pbar button:disabled { opacity: 0.4; cursor: default; }
#stPlanFine.on { background: var(--gold); border-color: var(--gold); color: #1a1408; }
#stPlanPlot .dot { color: var(--rubric); }
#stPlanPlot.rec { background: var(--rubric); border-color: var(--rubric); color: #fff; }
#stGrid { display: block; width: 100%; height: 190px; border: 1px solid var(--line); border-radius: 6px; touch-action: none; cursor: crosshair; }
#stGrid:focus-visible { outline: 1px solid var(--gold); }
/* the take */
#stTake { display: grid; grid-template-rows: auto 200px; background: var(--stone); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
#stTake .tbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 5px 10px; border-bottom: 1px solid var(--line); }
#stTake .tbar button { font-size: 12px; padding: 2px 8px; }
#stTake .tbar label { display: flex; align-items: center; gap: 6px; }
#stTake .tbar input[type=range] { width: 80px; }
#stTake output { font-family: var(--mono); font-size: 11px; color: var(--dim); }
#stSel { font-size: 12.5px; color: var(--dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 200px; }
#stStrip { display: block; width: 100%; height: 100%; outline: none; touch-action: none; }
#stStrip:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); }
#studio #stStatus { margin: 0; font-size: 13.5px; color: var(--dim); min-height: 1.4em; }

/* the voice */
#stVoice { border-left: 1px solid var(--line); background: var(--stone); overflow-y: auto; min-height: 0; padding: 10px 14px 16px; display: grid; gap: 6px; align-content: start; scrollbar-width: thin; }
#studio #stVoice h2 { margin: 0 0 2px; font-size: 18px; }
#stVoice #svOpen { all: unset; font: 500 18px var(--display); letter-spacing: 0; color: var(--vellum); cursor: default; display: flex; align-items: baseline; gap: 10px; width: 100%; }
#stVoice #svOpen small { font-size: 13px; font-weight: 400; color: var(--dim); }
#stVoice .svBody { display: grid; gap: 6px; align-content: start; }
#stVoice h3 { margin: 8px 0 0; font-size: 14px; font-weight: 500; color: var(--vellum); border-top: 1px solid var(--line); padding-top: 8px; }
#stVoice .row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 54px; align-items: center; gap: 6px; }
#stVoice .row select { grid-column: 2 / span 2; width: 100%; min-width: 0; box-sizing: border-box; font-size: 13px; }
#stVoice .row output { font-family: var(--mono); font-size: 11px; color: var(--dim); text-align: right; }
#stVoice input[type=range] { width: 100%; }
#stVoice .sub { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
#stVoice .sub select { flex: 1; min-width: 0; font-size: 13px; }
#stVoice button { font-size: 12px; padding: 3px 9px; }
#studio #stVoice p.help { margin: 6px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
#stVoice p.help b { color: var(--vellum); font-weight: 500; }

@media (max-width: 980px) {
  /* one column: the whole room scrolls, the voice below the take */
  /* (max-content: auto rows would shrink to the room's height and overlap) */
  #studio { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content max-content max-content; overflow-y: auto; align-content: start; }
  #stMain { overflow: visible; min-height: auto; }
  #stVoice { border-left: 0; border-top: 1px solid var(--line); overflow: visible; }
  /* the head across the page, the analyses in a row below it */
  #stViews { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; height: auto; }
  .stv-head { grid-row: auto; grid-column: 1 / -1; height: clamp(280px, 62vw, 540px); }
  .stv-spec, .stv-vowel, .stv-glot { height: 130px; }
  body.st-noana #stViews { grid-template-columns: minmax(0, 1fr); }
  #stBar select { max-width: 140px; }
}

body.st-live #stStart { display: none; }

/* a phone: the pitch pad big and in reach, words or sounds above it, the
   rest folded away (More, Voice). Keys are sized for a thumb. */
@media (max-width: 760px) {
  #stBar { gap: 6px; padding-block: 6px; }
  #stBar button { font-size: 14px; padding: 7px 12px; }
  #stMore { display: inline-block; margin-left: auto; }
  #stBar2 { display: none; flex-basis: 100%; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; }
  body.st-more #stBar2 { display: flex; }
  #stBar2 .sep, #stBar2 .spacer { display: none; }
  #stName { flex: 1 1 100%; width: auto; font-size: 16px; }
  #stBar2 select { flex: 1 1 40%; max-width: none; font-size: 15px; }
  #stMain { padding: 8px 12px 12px; gap: 10px; }
  /* the head as wide as the phone; the vowel chart below it */
  #stViews { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .stv-head { grid-column: auto; height: clamp(240px, 82vw, 400px); }
  .stv-vowel { height: 112px; }
  body[data-stmode="sounds"] .stv-head { height: clamp(200px, 64vw, 320px); }
  body[data-stmode="sounds"] .stv-vowel { display: none; }
  .stv-spec, .stv-glot { display: none; }
  #stModes { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
  #stModes button { flex: 1; border: 0; border-radius: 0; padding: 9px 0; font-size: 15px; background: var(--stone); }
  #stModes button + button { border-left: 1px solid var(--line); }
  #stModes button[aria-selected="true"] { background: color-mix(in srgb, var(--gold) 24%, var(--stone)); color: var(--gold); }
  body[data-stmode="words"] #stKeys .snd { display: none; }
  body[data-stmode="sounds"] #stWords { display: none; }
  #stLangBox { flex-basis: 100%; box-sizing: border-box; min-width: 0; }
  #stLang { flex: 1 1 0; min-width: 0; max-width: none; font-size: 16px; } /* (the full names are long: the box, not the page, holds them) */
  #stTextLang { flex: 0 1 auto; min-width: 0; max-width: 45%; font-size: 16px; }
  #stText { flex-basis: 100%; font-size: 16px; padding: 9px 12px; } /* 16px: iOS does not zoom into it */
  #stWords > button { flex: 1; font-size: 14px; padding: 8px 0; }
  #stSay { flex-basis: 100%; }
  #stSay select { flex: 1 1 0; max-width: none; font-size: 16px; padding: 6px 4px; }
  #stLyricRow { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  #stLyricRow .syl { flex: none; font-size: 17px; padding: 4px 10px; }
  #sedSay { flex-basis: 100%; order: 5; }
  #stSylEd .sedOps { margin-left: 0; }
  #stSylEd button { font-size: 14px; padding: 6px 10px; }
  #stPlan .pbar .hint { flex-basis: 100%; order: 5; }
  #stPlan .pbar button { font-size: 14px; padding: 6px 10px; }
  #stGrid { height: 170px; }
  /* no computer keyboard: the keys in grids for the thumbs, no caps, the pitch pad last */
  #stKeys { display: flex; flex-direction: column; gap: 6px; }
  .kbrow { flex-wrap: wrap; }
  #stKeys .r1 { order: 1; } #stKeys .r2 { order: 2; } #stKeys .r3 { order: 3; } #stKeys .r4 { order: 4; } #stKeys .r0 { order: 5; }
  #stKeys .skey.fn, #stKeys .skey.blank, #stKeys .skey .kc, #stKeys .rowname .kb, #stKeys .r1 .rowname, #stKeys .r2 .rowname, #stKeys .r3 .rowname, #stMidi { display: none; }
  #stKeys .padtools { display: inline-flex; }
  .padtools button { font-size: 14px; padding: 6px 14px; }
  #stKeys .kgroup { display: grid; width: 100%; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; }
  #stKeys .skey { width: auto; height: 48px; }
  #stKeys .skey .g { font-size: 21px; padding-top: 0; }
  #stKeys .r0 .rowname { order: -1; flex-basis: 100%; margin: 0; }
  #stNextSyl { margin: 0; font-size: 15px; }
  /* the pitch pad: two rows of six, the higher above; a finger slides along it */
  #stKeys #stPitches { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; touch-action: none; }
  #stPitches .skey { grid-row: var(--row); grid-column: var(--col); height: 68px; border-radius: 10px; }
  #stKeys #stPitches .skey .g { font-size: 19px; }
  #stTake { grid-template-rows: auto 150px; }
  #stTake .tbar label[title^="How far"], #stRetr, #stSel { display: none; }
  #stTake .tbar button { font-size: 13px; padding: 5px 10px; }
  /* the voice: one line until opened */
  #svOpen { cursor: pointer; }
  #svOpen::after { content: "▸"; margin-left: auto; color: var(--dim); }
  #stVoice.open #svOpen::after { content: "▾"; }
  #stVoice:not(.open) .svBody { display: none; }
  #stVoice .row select, #stVoice .sub select { font-size: 16px; }
}

/* ---- the app's hands (studio-hands.js) ---- */
/* the gesture score and the pitch line, under the displays */
.stv-lanes { height: 96px; }
.stv-lanes .stcap { left: auto; right: 9px; }
body.st-noscore .stv-lanes { display: none; }
body.st-noana .stv-spec, body.st-noana .stv-vowel, body.st-noana .stv-glot { display: none; }
body.st-noana #stViews { grid-template-columns: minmax(0, 1fr); }
#stHead { touch-action: none; }
#stLoop.on, #stBar button.on { background: var(--gold); border-color: var(--gold); color: #1a1408; }
#stWav.rec { background: var(--rubric); border-color: var(--rubric); color: #fff; }
#studio.drop { box-shadow: inset 0 0 0 3px var(--gold); }
/* chant and contour: their own keys in place of the phoneme keys */
body[data-stscheme="chant"] #stKeys, body[data-stscheme="contour"] #stKeys { display: none; }
#stScheme { display: grid; gap: 4px; }
#stScheme:empty { display: none; }
#stScheme .rowlabel { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--label); font-size: 11.5px; letter-spacing: 0.06em; color: var(--dim); margin-top: 2px; }
#stScheme .meters { font-family: var(--mono); font-size: 11px; color: var(--gold); letter-spacing: 0; margin-left: auto; }
#stScheme .skey.wide { min-width: 84px; }
#stScheme .skey.tone .g, #stScheme .skey.shape .g { font-family: var(--label); font-size: 12.5px; letter-spacing: 0.04em; }
#stScheme .skey.tone, #stScheme .skey.shape { min-width: 62px; padding-bottom: 8px; }
#chDrone.on { background: var(--gold); border-color: var(--gold); color: #1a1408; }
/* a word's pronunciation */
#stPron { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 6px 10px; border: 1px solid var(--gold); border-radius: 8px; background: var(--stone); }
#stPron[hidden] { display: none; }
#stPron b { font-weight: 500; color: var(--vellum); }
#stPron small { color: var(--dim); font-size: 12px; }
#stPronIn { flex: 1 1 160px; min-width: 0; font: 14px var(--mono); }
#stPron button { font-size: 12px; padding: 3px 9px; }
/* the voice panel's additions */
#stVoice .row .pair { grid-column: 2 / span 2; display: flex; gap: 6px; align-items: center; min-width: 0; }
#stVoice .row .pair select { flex: 1; min-width: 0; font-size: 13px; }
#stVoice .check { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--dim); white-space: nowrap; }
#stVoice .sub.views { justify-content: flex-start; flex-wrap: wrap; gap: 4px 12px; }
#stVoice .sub.views button { margin-left: auto; }
/* every key */
#stKeysCard { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(8, 9, 12, 0.6); padding: 16px; }
#stKeysCard[hidden] { display: none; }
#stKeysCard .card { position: relative; width: min(980px, 100%); box-sizing: border-box; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--stone); border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px 18px; }
#stKeysCard h2 { margin: 0 0 6px; font-size: 20px; }
#stKeysCard h3 { margin: 10px 0 4px; font-size: 14px; font-weight: 500; color: var(--gold); }
#stKeysCard h3 small { color: var(--dim); font: 11px var(--mono); }
#stKeysCard .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 4px 22px; }
#stKeysCard dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
#stKeysCard dt { font: 12px var(--mono); color: var(--vellum); }
#stKeysCard dd { margin: 0; color: var(--dim); }
#stKeysCard .close { position: absolute; right: 10px; top: 10px; }
@media (max-width: 760px) {
  .stv-lanes { display: none; }
}

/* ---- recording the view (studio-rec.js) ---- */
#stVid { font-variant-numeric: tabular-nums; min-width: 7.2ch; }
#stVid.rec { background: var(--rubric); border-color: var(--rubric); color: #fff; }
#stBar #stVidKind { max-width: 110px; margin-left: -4px; }

/* ---- the keys as a piano (studio-piano.js) ---- */
#stLayout { display: inline-flex; margin-left: auto; align-self: center; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
#stLayout button { border: 0; border-radius: 0; font-size: 12px; padding: 4px 10px; background: var(--stone); }
#stLayout button + button { border-left: 1px solid var(--line); }
#stLayout button[aria-pressed="true"] { background: color-mix(in srgb, var(--gold) 24%, var(--stone)); color: var(--gold); }
#stPiano { display: none; }
body[data-stlayout="piano"] #stPiano { display: grid; gap: 6px; }
body[data-stlayout="piano"] #stKeys > .kbrow:not(.r4) { display: none; }
.pkwrap { position: relative; overflow-x: auto; scrollbar-width: thin; }
.pkwrap .rowname { position: absolute; right: 6px; top: 3px; pointer-events: none; font-family: var(--label); font-size: 11.5px; letter-spacing: 0.06em; color: var(--dim); }
.pkrow { position: relative; display: flex; min-width: calc(var(--nw) * 28px); touch-action: none; }
.pkpitch .pkrow { height: 128px; margin-top: 18px; }
.pkph .pkrow { height: 104px; margin-top: 18px; }
#stPiano .skey.pk { flex: 1 1 0; width: auto; height: 100%; padding: 0; border-radius: 0 0 5px 5px; display: block; background: #cbc2ac; border: 1px solid #8f8670; color: #1a1408; }
#stPiano .skey.pk .kc { left: 50%; top: auto; bottom: 22px; transform: translateX(-50%); font: 600 12px/1 var(--mono); color: #5b4f33; display: block; }
#stPiano .skey.pk .g { position: absolute; left: 0; right: 0; bottom: 38px; text-align: center; padding: 0; font-size: 15px; }
#stPiano .skey.pk .pklab { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font: 500 10px var(--mono); color: #7a705a; pointer-events: none; }
#stPiano .skey.pk.blk { position: absolute; top: 0; z-index: 1; height: 60%; width: calc(100% / var(--nw) * 0.62); left: calc(100% / var(--nw) * (var(--wi) - 0.31)); background: #22252d; border-color: #0c0d10; color: var(--vellum); }
#stPiano .skey.pk.blk .kc { bottom: 6px; color: #b8ae98; font-size: 11px; }
#stPiano .skey.pk.blk .g { bottom: 22px; font-size: 13px; }
#stPiano .skey.pk.mapped:not(.blk), #stPiano .skey.pk.cons:not(.blk) { background: #f3ecdb; }
#stPiano .skey.pk.fin { box-shadow: inset 0 -4px 0 var(--rubric); }
#stPiano .skey.pk.vowel:not(.blk) { background: color-mix(in srgb, var(--rubric) 16%, #f3ecdb); }
#stPiano .skey.pk.vowel.blk { background: color-mix(in srgb, var(--rubric) 45%, #22252d); }
#stPiano .skey.pk.idle { opacity: 0.55; cursor: default; }
#stKeys #stPiano .skey.pk[data-down="1"] { background: var(--gold); border-color: var(--gold); transform: none; }
#stKeys #stPiano .skey.pk[data-down="1"] .kc, #stKeys #stPiano .skey.pk[data-down="1"] .g { color: #1a1408; }
@media (max-width: 760px) {
  #stKeys #stPiano { order: 5; }
  #stKeys #stPiano .skey .kc { display: block; } /* the computer's key stays on the piano */
  #stKeys #stPiano .skey .g { font-size: 14px; padding: 0; }
  .pkrow { min-width: calc(var(--nw) * 34px); }
  /* the kind of recording with the rest, behind More */
  #stBar #stVidKind { order: 1; max-width: none; margin-left: 0; }
  #stMore { order: 0; } #stBar2 { order: 2; }
  body:not(.st-more) #stBar #stVidKind { display: none; }
}

/* Send to choir: which project */
#stSendAsk { position: fixed; z-index: 60; display: grid; gap: 6px; padding: 12px; min-width: 260px; max-width: min(340px, calc(100vw - 32px)); background: var(--stone-2); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px #0008; }
#stSendAsk[hidden] { display: none; }
#stSendAsk .q { font: 13px var(--label); letter-spacing: 0.04em; color: var(--dim); }
#stSendAsk button { display: grid; text-align: left; gap: 2px; padding: 8px 10px; }
#stSendAsk button small { font: 11.5px var(--body, inherit); letter-spacing: 0; text-transform: none; color: var(--dim); font-weight: 400; }
#stSendAsk button.primary small { color: inherit; opacity: 0.8; }
#stSendAsk button.x { justify-self: end; padding: 4px 10px; }

/* the Lab's rules in use */
#stLabRules { display: inline-flex; align-items: center; gap: 4px; font: 11px var(--label); letter-spacing: 0.04em; color: var(--gold); border: 1px solid var(--gold); border-radius: 6px; padding: 1px 2px 1px 8px; }
#stLabRules[hidden] { display: none; }
#stLabRules button { border: 0; background: transparent; color: var(--gold); padding: 0 6px; font-size: 13px; }
/* the header's Voices − / + (studio-hands.js): the .vstep look is the choir's #voices (choir.css) */
#stBar .vstep button { font-size: 16px; padding: 0 9px; min-height: 30px; }

/* legato (studio.js): the pitch key the held syllable sounds on now, ringed apart from the keys still down */
#stPitches .skey[data-sound="1"] { outline: 2px solid var(--vellum); outline-offset: 2px; }

/* the random line (studio-lines.js) */
#stRandBox { display: inline-flex; gap: 0; }
#stRand { font-size: 15px; padding: 2px 9px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
#stRandAny { font: 11px var(--label); letter-spacing: 0.04em; padding: 2px 7px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; color: var(--dim); }
#stRandAny.on { background: color-mix(in srgb, var(--gold) 24%, transparent); color: var(--gold); }

/* the tutorial (studio-tour.js): a card that waits for you, and what it points at */
#stTourCard { position: fixed; z-index: 45; right: 10px; bottom: 12px; width: min(280px, calc(100vw - 32px)); box-sizing: border-box;
  background: var(--stone-2); border: 1px solid var(--gold); border-radius: 10px; padding: 10px 12px 10px; box-shadow: 0 12px 30px #0009; }
#stTourCard[hidden] { display: none; }
#stTourCard .tt-top { display: flex; align-items: baseline; gap: 8px; }
#stTourCard .tt-n { font: 11px var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
#stTourCard .tt-title { flex: 1; font-size: 15px; font-weight: 600; color: var(--gold); }
#stTourCard .tt-x { border: 0; background: transparent; font-size: 16px; padding: 0 4px; color: var(--dim); }
#stTourCard .tt-say { margin: 6px 0 8px; font-size: 14px; line-height: 1.45; }
#stTourCard .tt-bar { display: flex; align-items: center; gap: 6px; }
#stTourCard .tt-bar button { font-size: 12.5px; padding: 4px 10px; }
#stTourCard .tt-wait { flex: 1; font: 11px var(--label); letter-spacing: 0.05em; color: var(--dim); }
#stTourCard.done { border-color: var(--vellum); }
#stTourCard.done .tt-wait { color: var(--gold); font-size: 15px; }
.tour-hi { outline: 2px solid var(--gold) !important; outline-offset: 2px; animation: tourPulse 1.4s ease-in-out infinite; }
@keyframes tourPulse { 50% { outline-color: color-mix(in srgb, var(--gold) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tour-hi { animation: none; } }
#stTourOffer { position: fixed; z-index: 44; right: 16px; bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: calc(100vw - 32px); box-sizing: border-box;
  background: var(--stone-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; box-shadow: 0 8px 22px #0008; }
#stTourOffer[hidden] { display: none; }
#stTourOffer button { font-size: 12.5px; padding: 4px 10px; }
@media (max-width: 760px) {
  /* at the top: the keys a step asks for are at the bottom, in reach */
  #stTourCard { left: 16px; right: 16px; width: auto; top: 8px; bottom: auto; padding: 8px 10px; }
  #stTourCard .tt-say { font-size: 14px; margin: 4px 0 6px; }
  #stTourCard .tt-bar button { font-size: 14px; padding: 6px 12px; }
  #stTourOffer { left: 16px; right: 16px; bottom: 8px; }
  #stRand { font-size: 17px; padding: 4px 12px; }
  #stRandAny { font-size: 13px; padding: 4px 10px; }
}

/* ---- touch (studio-stick.js): play surfaces never select, call out or zoom; the thumb pad ---- */
#stKeys, #stScheme, #stViews, .stv-lanes, #stLyricRow, #stModes, #stStick, #stSylChips, #stNextSyl {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#stKeys, #stScheme, #stLyricRow, #stModes { touch-action: manipulation; }
#studio .skey, #stStick, #stHead, #stLanes { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#stText, #studio input, #studio textarea { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
#stStick { position: relative; flex: none; align-self: center; width: 112px; height: 112px; box-sizing: border-box; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--vellum) 22%, transparent); background: radial-gradient(circle, color-mix(in srgb, var(--stone-2) 70%, transparent) 0%, color-mix(in srgb, var(--stone) 45%, transparent) 70%);
  opacity: 0.72; transition: opacity 120ms, border-color 120ms; cursor: grab; }
#stStick[hidden] { display: none; }
#stStick.on { opacity: 1; border-color: color-mix(in srgb, var(--gold) 55%, transparent); cursor: grabbing; }
#stStick.rim { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }
#stStick .knob { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; border-radius: 50%; transform: translate(-50%, -50%);
  background: color-mix(in srgb, var(--vellum) 30%, transparent); border: 1px solid color-mix(in srgb, var(--vellum) 45%, transparent); pointer-events: none; transition: transform 90ms ease-out; }
#stStick.on .knob { transition: none; background: color-mix(in srgb, var(--gold) 55%, transparent); border-color: var(--gold); }
#stStick .stk-ax { position: absolute; font: 9.5px var(--label); letter-spacing: 0.05em; color: var(--dim); pointer-events: none; }
#stStick .stk-up { left: 50%; top: 4px; transform: translateX(-50%); }
#stStick .stk-lr { left: 50%; bottom: 4px; transform: translateX(-50%); }
#stKeys .r0 #stStick { margin-left: 8px; }
#stKeys .r0 #stStick[data-side="left"] { order: -1; margin-left: 0; margin-right: 8px; }
.stickset { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.stickset .label { font: 11px var(--label); letter-spacing: 0.05em; color: var(--dim); padding: 0 6px; }
.stickset button { border: 0; border-left: 1px solid var(--line); border-radius: 0; font-size: 12px; padding: 2px 8px; }
.stickset button[aria-pressed="true"] { background: color-mix(in srgb, var(--gold) 24%, transparent); color: var(--gold); }
@media (max-width: 760px) {
  #stKeys .r0 { flex-wrap: wrap; align-items: center; }
  #stKeys .r0 #stPitches { flex: 1 1 0; width: auto; min-width: 0; }
  #stKeys .r0 #stStick { width: 128px; height: 128px; margin-left: 6px; }
  #stKeys .r0 #stStick[data-side="left"] { margin-left: 0; margin-right: 6px; }
  body[data-ststick="right"] #stKeys .r0 #stStick, body[data-ststick="left"] #stKeys .r0 #stStick { order: 0; }
  body[data-ststick="left"] #stKeys .r0 #stStick { order: -1; }
  #stKeys .r0 .rowname { order: -2; }
  .stickset button { font-size: 14px; padding: 6px 10px; }
  #stKeys .padtools { flex-wrap: wrap; }
  /* beside the pad, the pitch keys in three rows of four (the highest above) */
  body[data-ststick] #stKeys #stPitches { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-ststick] #stPitches .skey { height: 54px; }
  body[data-ststick] #stPitches .skey:nth-child(-n+4) { grid-row: 3; }
  body[data-ststick] #stPitches .skey:nth-child(n+5):nth-child(-n+8) { grid-row: 2; }
  body[data-ststick] #stPitches .skey:nth-child(n+9) { grid-row: 1; }
  body[data-ststick] #stPitches .skey:nth-child(4n+1) { grid-column: 1; }
  body[data-ststick] #stPitches .skey:nth-child(4n+2) { grid-column: 2; }
  body[data-ststick] #stPitches .skey:nth-child(4n+3) { grid-column: 3; }
  body[data-ststick] #stPitches .skey:nth-child(4n+4) { grid-column: 4; }
}