/* Two listening instruments. Selection stays visible between recordings. */
.gesture-lab{
  --gl-ink:#243a3e;--gl-paper:#fffdf5;--gl-tint:#e7e0f3;--gl-plate:#f2e8d6;
  container-type:inline-size;max-width:100%;margin:1rem 0;
  color:var(--gl-ink);background:var(--gl-paper);border:1.5px solid #53615c;
  border-radius:14px;box-shadow:0 3px 0 #6c7b70;overflow:hidden;
}
.gesture-lab .gl-keys{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;
  padding:13px 16px 15px;background:#f3efe2;border-bottom:1px solid #babcab;
}
.gl-voice .gl-keys{grid-template-columns:repeat(3,minmax(0,1fr))}
.gesture-lab .gl-key{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:1px 8px;
  min-height:51px;min-width:0;padding:6px 11px;color:var(--gl-ink);
  background:#fffdf4;border:1.5px solid #75847a;border-radius:8px;box-shadow:0 3px 0 #8b9689;
  text-align:left;line-height:1.15;cursor:pointer;transition:transform .14s,box-shadow .14s,background .14s;
}
.gesture-lab .gl-key strong{grid-column:1;grid-row:1;font:900 clamp(1.35rem,2.5vw,1.82rem)/1 TonSerif,Georgia,serif;letter-spacing:-.04em}
.gesture-lab .gl-key small{grid-column:1;grid-row:2;font:600 .73rem/1.19 "Segoe UI",Arial,sans-serif;color:#425450}
.gesture-lab .gl-key .atlas-play-icon{
  display:grid;place-items:center;grid-column:2;grid-row:1/3;
  width:25px;height:25px;min-width:0;min-height:0;padding:0;background:#f4efdc;color:#334942;
  border:1px solid #899385;border-radius:50%;font:700 .68rem/1 "Segoe UI",Arial,sans-serif
}
.gesture-lab .gl-key[aria-current="true"]{background:#e4dcef;border-color:#4a405d;box-shadow:0 3px 0 #665a75}
.gesture-lab .gl-key[aria-current="true"] .atlas-play-icon{border-color:#62506d;color:#4b405b;background:#f8f3ff}
.gesture-lab .gl-key[aria-pressed="true"] .atlas-play-icon{background:#41394f;color:white;border-color:#41394f}
.gesture-lab .gl-key:focus-visible{outline:3px solid #9d4a09;outline-offset:3px}
.gesture-lab .gl-surface{display:grid;grid-template-columns:minmax(180px,.86fr) minmax(0,1.14fr);align-items:stretch}
.gesture-lab .gl-plate{
  display:grid;align-items:center;justify-items:center;background-color:var(--gl-plate);
  background-image:radial-gradient(#a98c5f55 .75px,transparent 1px);background-size:8px 8px;
  border-right:1px solid #c9c5af;min-width:0;overflow:hidden
}
.gl-voice .gl-plate{--gl-plate:#e1ebe2}
.gesture-lab svg.gl-drawing{display:block;max-width:100%;width:auto;height:210px;max-height:none}
.gesture-lab svg.gl-cutaway{height:224px;margin:6px auto}
.gesture-lab .gl-reading{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  gap:7px;padding:clamp(15px,2.7vw,30px);min-width:0
}
.gesture-lab .gl-caption{color:#62516f;font-size:.78rem;line-height:1.35;font-weight:700}
.gesture-lab .gl-reading h3{font:900 clamp(1.3rem,2.5vw,1.92rem)/1.1 TonSerif,Georgia,serif;letter-spacing:-.045em;margin:0;color:var(--gl-ink)}
.gesture-lab .gl-reading p{margin:0;max-width:53ch;font-size:.94rem;line-height:1.5}
.gesture-lab .gl-facts{display:flex;flex-wrap:wrap;gap:5px 14px;margin:4px 0 0;padding-top:7px;border-top:1px solid #d0d3c6}
.gesture-lab .gl-facts div{display:flex;gap:5px;align-items:baseline}
.gesture-lab .gl-facts dt,.gesture-lab .gl-facts dd{margin:0;font-size:.76rem;line-height:1.3;color:#4b6156}
.gesture-lab .gl-facts dd{font-weight:700;color:#244c41}
.gesture-lab .gl-note{font-size:.8rem;line-height:1.4;color:#465c51;margin:0;padding:9px 15px;border-top:1px solid #cecdbd}
@media(hover:hover) and (pointer:fine){.gesture-lab .gl-key:hover{transform:translateY(-2px);box-shadow:0 5px 0 #758478}}
.gesture-lab .gl-key:active{transform:translateY(2px);box-shadow:0 1px 0 #637167}
@container(max-width:550px){
  .gesture-lab .gl-keys{gap:6px;padding:10px 9px 12px}
  .gesture-lab .gl-key{padding:6px;gap:3px}
  .gesture-lab .gl-surface{grid-template-columns:minmax(100px,.73fr) minmax(0,1.27fr)}
  .gesture-lab .gl-reading{padding:12px;gap:5px}
  .gesture-lab .gl-reading h3{font-size:1.25rem}
  .gesture-lab .gl-reading p{font-size:.86rem;line-height:1.4}
  .gesture-lab .gl-facts{gap:5px 10px}
  .gesture-lab .gl-key .atlas-play-icon{width:19px;height:19px;font-size:.58rem}
}
@container(max-width:390px){
  .gesture-lab .gl-surface{grid-template-columns:1fr}
  .gesture-lab .gl-plate{border-right:0;border-bottom:1px solid #c9c5af}
  .gesture-lab svg.gl-front{height:142px}
  .gesture-lab svg.gl-cutaway{height:165px}
  .gesture-lab .gl-key strong{font-size:1.33rem}
  .gesture-lab .gl-key small{font-size:.65rem}
  .gesture-lab .gl-keys{gap:5px}
  .gesture-lab .gl-reading{padding:12px}
}
@media(prefers-reduced-motion:reduce){
  .gesture-lab .gl-key,.gesture-lab .gl-key:hover,.gesture-lab .gl-key:active{transition:none;transform:none}
}