@font-face {
  font-family: "Selva Resonance"; src: url("selva-resonance.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
@font-face {
  font-family: "Proto Selva Resonance"; src: url("proto_selva-resonance.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
}
.script-form { font-style: normal; font-weight: normal; font-synthesis: none; overflow-wrap: anywhere; }
.script-form[data-language="selva"] { font-family: "Selva Resonance", serif; }
.script-form[data-language="proto_selva"] { font-family: "Proto Selva Resonance", serif; }
html[data-transcription] .script-form { font-family: inherit; }
.transcription { font-family: system-ui, sans-serif; font-size: .9em; }
.lineage-table td > .transcription { display: block; color: var(--muted); overflow-wrap: anywhere; }
.lineage-table { table-layout: fixed; }
.lineage-table th:first-child { width: 22%; }
.lineage-table td[aria-label] { width: 6%; padding-inline: .15rem; }
.lineage-table th, .lineage-table td { overflow-wrap: anywhere; }
.audio-compare { display: block; margin-top: 1.5rem; }
.audio-compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.audio-compare-card { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: .5rem; }
.audio-compare-card h4 { margin: 0 0 .75rem; }
.audio-compare-card h4 .note { margin-left: .5rem; font-size: .8em; font-weight: normal; }
.audio-compare-card p { margin: .5rem 0; overflow-wrap: anywhere; }
.audio-compare-card audio { display: block; width: 100%; max-width: 100%; margin-top: 1rem; }
.script-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  margin: .75rem 0; font: .85rem/1.7 system-ui, sans-serif; }
.script-controls button, .script-controls a { color: var(--accent); }
.script-controls button { border: 1px solid var(--line); background: var(--card);
  border-radius: .3rem; padding: .25rem .65rem; font: inherit; cursor: pointer; }
.script-chart { max-width: 46rem; margin: 2rem auto; padding: 1rem; line-height: 1.8; }
.script-chart table { width: 100%; border-collapse: collapse; }
.script-chart td, .script-chart th { padding: .4rem; border-bottom: 1px solid var(--line); text-align: left; }
.script-chart .script-form { font-size: 1.75rem; }
.writing-layout { color-scheme: light dark; --accent: light-dark(#7a4a24, #d8a86b);
  --line: light-dark(#ddd8cd, #333840); --card: light-dark(#fff, #1d2025);
  background: light-dark(#fbfaf7, #16181b); color: light-dark(#1d1c1a, #e9e6e0);
  font-family: system-ui, sans-serif; margin: 0; }
.writing-layout a { color: var(--accent); }