/* Audio controls in the sound index, recording bank and sound laboratories. */
.ph-atlas,.atlas-workbench,.bank-collections,.bank-search,.sample-reference,.bank-row{
  --tool-ink:#293d42;--tool-violet:#5b4c77;--tool-lilac:#eae3f2;--tool-paper:#fffdf5
}
.atlas-workbench{max-width:none;color:var(--tool-ink)}
.atlas-workbench>header{margin-bottom:16px}
.atlas-workbench>header h1,.sound-index-head h1{font-size:clamp(2rem,4vw,3.1rem);margin:.15em 0}
.atlas-workbench .at-work>h2,.vowel-coordinate h2{font-size:clamp(1.35rem,2.6vw,2rem)}
.atlas-workbench .at-note{margin:16px 0;border-top:1px solid #cccac0;padding:8px 0}
.atlas-workbench details summary{cursor:pointer;min-height:44px;align-content:center;font-weight:650;color:#4b5062}
.atlas-workbench .at-work>p,.sound-index-head p{color:#41544d}
.atlas-workbench button:focus-visible,.ph-atlas a:focus-visible,.bank-play:focus-visible,.ph-sound-tile:focus-visible{outline:3px solid #a74800;outline-offset:3px}
.atlas-play-icon{display:inline-grid;flex:none;place-items:center;min-width:1.55em;height:1.55em;border-radius:50%;background:#e6ddf1;color:#40344f;font:700 .83rem/1 "Segoe UI",Arial,sans-serif}
button[aria-pressed=true]>.atlas-play-icon{background:#fff4bf;color:#253e37}
.atlas-workbench .lab-audio,.atlas .lab-audio,.sample-reference .lab-audio{
 display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:680;text-align:left;background:#fffdf4;color:#29443a;
 border:1.5px solid #74867d;border-radius:9px;box-shadow:0 2px #a3aba1;padding:6px 10px
}
.atlas-workbench .at-choices button,.atlas-workbench .ipa-compare-controls button{
 border:1.5px solid #80798e;border-radius:8px;background:#fcfaf3;box-shadow:0 2px #b5afbc;color:#36413e
}
.atlas-workbench .at-choices button[aria-pressed=true],.atlas-workbench #ipa-compare[aria-pressed=true]{background:#4b4260;color:#fff9e8;border-color:#362e48}
/* A compact index of sound families. */
.sound-index-head{padding:16px 20px;border:1.5px solid #6f687c;background:#eee8f6;border-radius:12px}
.sound-index-head .ph-find{margin-top:10px}.ph-find input{width:100%}
.ph-atlas .ph-sections{margin-top:18px;gap:11px}
.ph-section,.ph-entrycard,.ph-related a{border:1.5px solid #788b7d;box-shadow:0 3px #a6b0a0;transition:transform .14s,box-shadow .14s}
.ph-section{border-color:var(--ph-color);background:var(--ph-paper);min-height:108px;padding:14px 17px}
.ph-collection{margin-top:20px}.ph-atlas .ph-detail{margin:16px 0;font-size:.9rem}
.ph-detail h2{font-size:.84rem}.ph-detail>section{min-width:0}
.ph-atlas .ph-sectionhead{padding:16px 19px;border:1px solid #aaa4af;border-radius:12px;background:#f5f0f6}
.ph-recordings h2,.ph-related h2{font-size:1.15rem}
.sound-file-deck{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(195px,100%),1fr));gap:10px}
.ph-unit,.ph-sound-tile,.bank-play{min-width:0}
.ph-unit{display:flex;align-items:stretch;flex-direction:column}
.ph-sound-tile,.bank-play{
 display:flex;align-items:center;gap:10px;text-align:left;color:#253b39;background:var(--tool-paper);
 border:1.5px solid #7f8b80;border-radius:9px;box-shadow:0 3px #a2ada2;padding:10px 12px;min-height:48px;overflow-wrap:anywhere;text-decoration:none
}
.ph-sound-tile{width:100%}.ph-sound-tile strong,.bank-play strong{display:block;font-size:1rem;line-height:1.28}
.ph-sound-tile small,.bank-play small{display:block;color:#53665a;font-size:.75rem;font-weight:600}
.ph-unit a,.sound-practice-link{min-height:44px;display:inline-flex;align-items:center;line-height:1.23;font-size:.82rem;font-weight:650}
.sound-practice-link{margin-top:12px;padding:7px 12px;border:1px solid #aa8c4e;border-radius:8px;background:#f9e8bc;color:#503d1d;text-decoration:none}
.bank-collections{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.bank-collections section{border:1.5px solid #81778a;border-radius:11px;padding:14px;background:#eee7f3}
.bank-collections section+section{background:#e2eee5}.bank-collections h2{margin:0 0 9px;font:900 1.37rem/1.1 TonSerif,Georgia,serif}
.bank-collections section>a,.bank-row>a:not(.bank-play){display:inline-flex;align-items:center;min-height:44px;font-size:.86rem;font-weight:650;text-underline-offset:2px}
.bank-search #results .shelf{display:grid;gap:7px;margin-top:8px}
.bank-row.track{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;border:0;padding:2px 0;background:transparent}
.bank-play{flex:1 1 190px}.bank-label{flex:1}.bank-play[aria-pressed=true],.ph-sound-tile[aria-pressed=true]{background:#deeee4;color:#173f32;border-color:#3a6857}
.sample-reference{border-top:3px solid #8f7aaa}.sample-mic{border-top:3px solid #86a591}
/* The IPA detail turns the gesture and its model into the same replay key. */
.atlas-ipa .at-work>h2{font:650 1.15rem/1.2 "Segoe UI",sans-serif;letter-spacing:normal}
.atlas-ipa .ipa-layout{gap:12px}.atlas-ipa .ipa-scroll{background:#fffdf5;border:1.5px solid #746f77;border-radius:10px}
.atlas-ipa .ipa-scroll th{background:#ece7f1;color:#3d354c}.ipa-mobile-place{display:none}
.atlas-ipa .ipa-scroll button{
 border:1.5px solid #626177;background:#fffbee;box-shadow:0 2px #94899b;color:#353b47;padding:4px 7px
}
.atlas-ipa .ipa-scroll button[aria-pressed=true]{background:#5b4777;color:#fff8e6;box-shadow:inset 0 -2px #41334f}
.atlas-ipa .ipa-scroll .ipa-en-key{background:#fae6bc;border-color:#a87944;color:#6e4920}
.atlas-ipa .ipa-scroll .ipa-en-key[aria-pressed=true]{background:#855424;color:white}
.atlas-ipa .ipa-layout #ipa-detail{grid-template-columns:minmax(155px,23%) minmax(0,1fr);align-items:center;gap:18px;padding:14px;background:#f9f6ed;border:1px solid #b6b6aa}
.atlas-ipa #ipa-detail .ipa-specimen{
 display:grid;justify-self:stretch;grid-column:auto;gap:0;width:100%;min-width:0;border:2px solid #41524a;overflow:hidden;border-radius:12px;
 background:#fffdf4;color:#293e38;box-shadow:0 3px #72887c;padding:0
}
.ipa-specimen .mouth-plate{border:0;border-radius:0;max-height:142px;aspect-ratio:1.3}.ipa-specimen .mouth-plate img{object-fit:contain}
.ipa-specimen .ipa-motion{display:flex;grid-row:auto}.ipa-specimen .ipa-motion .mouth-plate{min-width:0}
.ipa-key-caption{display:flex;align-items:center;gap:8px;padding:6px 10px 9px;border-top:1px solid #a7b6a8;background:#e5efe6;text-align:left}
.ipa-key-caption strong{font:700 1.38rem/1.1 Georgia,serif}.ipa-key-caption small{display:block;font-size:.77rem;line-height:1.22}
.ipa-explanation{min-width:0}.ipa-explanation h3{font-size:1.05rem}.ipa-explanation p{font-size:.93rem;margin:.35rem 0 .55rem}
.atlas-ipa .ipa-explanation .at-actions{margin-top:7px}.ipa-explanation>small{display:block}
.ipa-english .ipa-key-caption{background:#f5e3bf}
/* Three workshops share a single active experiment on each screen. */
.vowel-coordinate{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.85fr);align-items:center;gap:18px;margin:18px 0}
.vowel-coordinate .at-field{background:transparent;height:155px}.vowel-coordinate .at-board{padding:.8rem 1rem;background:#e7efe5;border:1px solid #a7b5a6}
.at-map-read{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:9px}
.vowel-pin{position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);width:26px;height:26px;border:1px solid #9aa89a;border-radius:50%;background:#faf9eb;color:#324d43;font:bold 1rem/1 Georgia,serif}
.vowel-pin.current{background:#255d4b;color:white;border:2px solid #15392f}
.syllable-samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:14px 0}
.atlas-workbench .syllable-samples button{
 display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;border:1.5px solid #5e6762;border-radius:10px;
 background:#fffbea;color:#243b32;box-shadow:0 3px #8a968b;font:900 clamp(1.25rem,2.7vw,1.75rem)/1.2 TonSerif,Georgia,serif
}
.atlas-workbench .syllable-samples button[aria-current=true]{background:#f5dfa9;outline:2px solid #857037;outline-offset:1px}
.syllable-samples mark{color:inherit;background:transparent;text-decoration:underline;text-decoration-color:#8c6023;text-decoration-thickness:3px;text-underline-offset:3px}
.atlas-workbench .at-wordlab{background:#f2eaf5;border:1.5px solid #a699aa;padding:14px 18px;margin:14px 0}
.atlas-workbench .beat-choices [data-result=hit]{background:#dcead4;color:#20462f}.beat-choices [data-result=hit]:before{content:"✓ ";font-weight:800}
.atlas-workbench .beat-choices [data-result=miss]{background:#f7d9ce;color:#6b3426}.beat-choices [data-result=miss]:before{content:"× ";font-weight:800}
.atlas-workbench .at-synth{border:1.5px solid #6e786d;gap:20px;background:#fffdf5}
.atlas-workbench .at-plot{min-width:0;border:1px solid #9fad9e;background:#e5efe2}
.atlas-workbench .synth-controls label{display:flex;align-items:center;justify-content:space-between;font-weight:650}
.atlas-workbench [data-shape]{font:700 1.35rem/1.1 Georgia,serif}.synth-controls .at-actions{align-items:stretch}
.synth-controls #at-natural{display:flex}.synth-controls #at-status:empty,.at-feedback:empty{display:none}
@media(hover:hover) and (pointer:fine){
 .ph-section:hover,.ph-entrycard:hover,.bank-play:hover,.ph-sound-tile:hover,.syllable-samples button:hover,.ipa-scroll button:hover{transform:translateY(-1px);box-shadow:0 4px #869988}
}
.bank-play:active,.ph-sound-tile:active,.ph-section:active,.ph-entrycard:active,.syllable-samples button:active,.ipa-scroll button:active{transform:translateY(2px);box-shadow:0 1px #657a69}
@media(max-width:650px){
 .bank-collections{grid-template-columns:1fr;gap:10px}.bank-collections section{padding:10px}.bank-row>a:not(.bank-play){min-height:40px}
 .sound-index-head,.ph-atlas .ph-sectionhead{padding:12px}.ph-atlas .ph-sectionhead .ph-jump{margin-top:8px}
 .ph-atlas .ph-section{min-height:86px;padding:10px}.ph-sound-tile,.bank-play{padding:9px}
 .vowel-coordinate{grid-template-columns:1fr;gap:10px}.syllable-samples{grid-template-columns:repeat(2,minmax(0,1fr))}
 .atlas-ipa .ipa-layout #ipa-detail{grid-template-columns:1fr;gap:13px;padding:10px}
 .atlas-ipa #ipa-detail .ipa-specimen{grid-template-columns:minmax(84px,.7fr) minmax(0,1fr);align-items:stretch}
 .ipa-key-caption{border-top:0;border-left:1px solid #a7b6a8}.ipa-specimen .mouth-plate{max-height:105px}
 .ipa-scroll .ipa-consonant-table,.ipa-scroll .ipa-consonant-table tbody{display:block}
 .ipa-consonant-table thead{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
 .ipa-scroll .ipa-consonant-table tr{display:flex;align-items:center;gap:3px;flex-wrap:wrap;border-bottom:1px solid #d0ccca;padding:5px}
 .ipa-scroll .ipa-consonant-table th[scope=row]{position:static;border:0;background:transparent;width:100%;font-size:.78rem}
 .ipa-scroll .ipa-consonant-table td{display:contents}.ipa-mobile-place{display:block;font:600 .67rem/1.1 "Segoe UI",sans-serif;color:inherit}
 .atlas-ipa .ipa-scroll button{margin:2px 1px}.ipa-scroll .ipa-vowel-table th[scope=row]{font-size:.75rem}
}
@media(prefers-reduced-motion:reduce){
 .ph-section,.ph-entrycard,.bank-play,.ph-sound-tile,.syllable-samples button,.ipa-scroll button{transition:none}
 .ph-section:is(:hover,:active),.ph-entrycard:is(:hover,:active),.bank-play:is(:hover,:active),.ph-sound-tile:is(:hover,:active),.syllable-samples button:is(:hover,:active),.ipa-scroll button:is(:hover,:active){transform:none}
}
.atlas-ipa>header{margin-bottom:3px}
.atlas-ipa .ipa-intro{max-width:70ch;margin:0 0 13px}
@media(min-width:930px){
 .atlas-ipa .ipa-layout{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);align-items:start}
 .atlas-ipa .ipa-layout #ipa-detail{grid-template-columns:1fr;gap:10px;padding:12px}
 .atlas-ipa #ipa-detail .ipa-specimen{grid-template-columns:minmax(90px,1fr) minmax(0,1fr);align-items:stretch}
 .atlas-ipa .ipa-key-caption{border:0;border-left:1px solid #a7b6a8}
 .atlas-ipa .ipa-specimen .mouth-plate{max-height:110px}
 .atlas-ipa .ipa-scroll th,.atlas-ipa .ipa-scroll td{padding:.18rem}
 .atlas-ipa .ipa-scroll .ipa-consonant-table button{min-width:36px;min-height:42px;padding:3px;margin:1px}
}
.atlas-ipa .ipa-scroll button[aria-pressed=true] small{color:inherit}
.ph-sound-tile .atlas-play-icon,.bank-play .atlas-play-icon,.lab-audio .atlas-play-icon,.ipa-key-caption .atlas-play-icon,.syllable-samples .atlas-play-icon{width:26px;min-width:26px;height:26px}
.ph-unit:has(>a){display:grid;grid-template-columns:minmax(0,1fr) auto;border:1.5px solid #7f8b80;border-radius:9px;box-shadow:0 3px #a2ada2;background:#fffdf5;overflow:clip}
.ph-unit:has(>a) .ph-sound-tile{border:0;border-radius:0;box-shadow:none}
.ph-unit>a{justify-content:center;padding:4px 9px;border-left:1px solid #a8b5a6;background:#f0eee3;color:#344d42;text-decoration:none}
.ph-unit>a:hover{text-decoration:underline}
.ph-unit:has(>a):focus-within{outline:3px solid #a74800;outline-offset:2px}
.ph-unit:has(>a) .ph-sound-tile:focus-visible,.ph-unit:has(>a)>a:focus-visible{outline:2px solid #a74800;outline-offset:-3px}