@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/newsreader-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2022,U+2026,U+2212,U+00B0,U+00B7,U+2192}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/newsreader-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0218-021B,U+02BE-02BF,U+1E00-1EFF,U+20AC}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/newsreader-italic-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+2013-2014,U+2018-201E,U+2026,U+2212}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/newsreader-italic-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-024F,U+0218-021B,U+02BE-02BF,U+1E00-1EFF}
@font-face{font-family:"Plex";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/IBMPlexSans-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/IBMPlexSans-latin-ext.woff2") format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#f3eee3;--bg2:#e9e2d2;--card:#fbf8f1;--stage:#fbf8f1;--fg:#17171a;--mut:#3e3f46;--line:#b9ae96;--line-soft:#ded5c1;
  --link:#1c3f8f;--hi:#9a3c0c;--k:#8a2a0e;
  --v-i:#1f7a8c;--v-e:#3f8a3a;--v-a:#c8502a;--v-o:#7a4ca8;--v-u:#2e4fa8;--v-aa:#c98a12;--v-ii:#c23a72;
  --en:#4a4a52;--tongue:#e59aa6;--tongue-l:#a8435a;--you:#b0261b;--dot:#17171a;--target:#0d6a52;
  --serif:"Newsreader",Georgia,serif;--sans:"Plex",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ipa:"Charis SIL","Doulos SIL","Gentium Plus","Noto Serif","Times New Roman",serif;
  --top:46px;color-scheme:light;--to-top-bg:#fbf8f1;--to-top-fg:#17171a;
}
:root[data-theme=dark]{
  --bg:#0f1116;--bg2:#161922;--card:#171a22;--stage:#12141b;--fg:#efe9dc;--mut:#c6c0b3;--line:#474b57;--line-soft:#262a34;
  --link:#a9c1ff;--hi:#f0a060;--k:#ffae8f;
  --v-i:#38c2d6;--v-e:#6fd06a;--v-a:#ff7a4d;--v-o:#b88cff;--v-u:#6f93ff;--v-aa:#ffc44d;--v-ii:#ff6fa8;
  --en:#c9c6cf;--tongue:#b35a6c;--tongue-l:#f0a0b0;--you:#ff6b5c;--dot:#fff3dc;--target:#5fe0b8;
  color-scheme:dark;--to-top-bg:#171a22;--to-top-fg:#efe9dc;
}
*{box-sizing:border-box}[hidden]{display:none!important}svg[hidden]{display:none}
html{scroll-padding-top:calc(var(--top) + 14px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.125rem/1.62 var(--serif)}
a{color:var(--link);text-underline-offset:.18em;text-decoration-thickness:1px}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--hi);outline-offset:2px}
.skip-link{position:absolute;left:-999px}.skip-link:focus{left:8px;top:8px;z-index:99;background:var(--bg);padding:.5rem .8rem}

/* topbar, progress, rail */
.topbar{position:sticky;top:0;z-index:50;background:var(--bg);height:calc(var(--top) + var(--browser-safe-top,env(safe-area-inset-top)));padding:var(--browser-safe-top,env(safe-area-inset-top)) .9rem 0;display:flex;align-items:center;gap:.4rem;border-bottom:1px solid var(--line-soft);font-family:var(--sans)}
.topbar a{color:inherit;text-decoration:none}
.brand{display:flex;align-items:center;gap:.45rem;white-space:nowrap;font-weight:500;font-size:.95rem}
.brand-mark{width:22px;height:22px;color:var(--fg)}.mark-dot{fill:var(--v-a)}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;margin-left:.8rem;color:var(--mut)}.topnav::-webkit-scrollbar{display:none}
.topnav a{white-space:nowrap;font-size:.85rem}.topnav a:hover{color:var(--fg)}
.spacer{flex:1}
.chip{font:500 .75rem/1 var(--sans);padding:.4rem .55rem;border:1px solid var(--line);border-radius:99px;min-height:30px;display:inline-flex;align-items:center}
.chip[aria-current=page]{border-color:var(--fg)}
.icon-btn{background:none;border:1px solid var(--line);border-radius:99px;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;color:var(--fg)}
:root[data-theme=light] .i-moon,:root[data-theme=dark] .i-sun{display:none}
@media (max-width:1000px){.topnav{display:none}}
@media (max-width:360px){.brand span{display:none}}
.progress{position:fixed;left:0;right:0;top:calc(var(--top) + var(--browser-safe-top,env(safe-area-inset-top)));height:2px;z-index:49;pointer-events:none}
.progress i{display:block;height:2px;width:100%;background:var(--v-a);transform-origin:0 50%;transform:scaleX(0)}
.rail{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:9px;opacity:0;transition:opacity .3s}
.rail-dot{position:relative;display:block;width:12px;height:12px}
.rail .dot{position:absolute;inset:3px;border-radius:50%;background:var(--line);transition:background .2s}
.rail-dot[aria-current=true] .dot{background:var(--fg)}
.rail-label{position:absolute;right:18px;top:50%;transform:translateY(-50%);white-space:nowrap;font:400 .76rem var(--sans);background:var(--card);border:1px solid var(--line);padding:.15rem .45rem;border-radius:6px;opacity:0;pointer-events:none;transition:opacity .15s;color:var(--fg)}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1}
@media (max-width:1360px){.rail{display:none}}

/* hero */
.hero{padding:clamp(1.2rem,3.5vw,3rem) 1rem 2rem;max-width:1280px;margin:0 auto;display:grid;gap:1rem 3rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.hero{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start;padding-top:3rem}.hero .share{grid-column:1}}
.kicker{font:600 .76rem/1.35 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--k);margin:0 0 .6rem}
h1{font:500 clamp(1.6rem,3.2vw,2.55rem)/1.13 var(--serif);margin:0 0 .8rem;letter-spacing:-.01em;text-wrap:balance}
.deck{font-size:1.1rem;line-height:1.52;margin:0;color:var(--mut);max-width:34rem}
.legend-l{list-style:none;padding:0;margin:1.3rem 0 0;font:400 .9rem/1.45 var(--sans);color:var(--mut);max-width:30rem}
.legend-l li{display:grid;grid-template-columns:1.8rem 1fr;margin:.45rem 0}.legend-l span{font-size:1.05rem;color:var(--fg)}
@media (max-width:999px){.legend-l,.hero-in .pairline,.hero-in .src-line{display:none}}
@media (min-width:1000px){.stage{grid-row:1 / span 2;grid-column:2}}
.stage{background:var(--stage);border:1px solid var(--line);border-radius:22px;padding:.8rem;box-shadow:0 18px 50px rgba(22,24,29,.08);position:relative}
:root[data-theme=dark] .stage{box-shadow:0 0 0 1px rgba(255,255,255,.02),0 30px 80px rgba(0,0,0,.45)}
.map-wrap{position:relative}
.vmap{display:block;width:100%;touch-action:none;cursor:crosshair;border-radius:14px}
.vmap.small{cursor:default}
.under{display:flex;gap:.8rem;align-items:center;justify-content:space-between}.under-t{min-width:0;flex:1}
.mouth{flex:none;width:clamp(120px,24vw,200px);height:auto;margin:.2rem .6rem .2rem 0;overflow:visible}
.pairline{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1.2rem 0 0;font:400 .9rem var(--sans);color:var(--mut)}
.pairline .pill-btn{font:500 1.05rem/1 var(--serif);min-width:4.2rem}
.src-line{font:400 .82rem/1.5 var(--sans);color:var(--mut);margin:1.2rem 0 0;max-width:30rem}
.m-face,.m-palate,.m-wall{fill:none;stroke:var(--fg);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.m-soft{fill:none;stroke:var(--line);stroke-width:1.2;stroke-dasharray:2 3}
.m-teeth{fill:var(--card);stroke:var(--mut);stroke-width:1.4}
.m-tongue{fill:var(--tongue);fill-opacity:.75;stroke:var(--tongue-l);stroke-width:1.4}
.status{font:500 clamp(1.4rem,3vw,2.1rem)/1.2 var(--serif);margin:.7rem .3rem 0;min-height:1.3em}
.readout{font:400 .95rem/1.4 var(--sans);color:var(--fg);margin:.35rem .3rem .5rem;min-height:1.1em;font-variant-numeric:tabular-nums}
.controls{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;justify-content:space-between;margin:1rem .2rem .8rem}
.vbtns{display:flex;flex-wrap:wrap;gap:.35rem}
.vbtn{font:500 1.15rem/1 var(--serif);width:44px;height:44px;border-radius:50%;border:2px solid var(--c,var(--line));background:color-mix(in srgb,var(--c) 14%,var(--card));cursor:pointer;color:var(--fg)}
.vbtn:hover{background:color-mix(in srgb,var(--c) 30%,var(--card))}
.v-i{--c:var(--v-i)}.v-e{--c:var(--v-e)}.v-a{--c:var(--v-a)}.v-o{--c:var(--v-o)}.v-u{--c:var(--v-u)}.v-aa{--c:var(--v-aa)}.v-ii{--c:var(--v-ii)}
.mic-btn,.big-btn{font:600 .95rem/1 var(--sans);min-height:46px;padding:0 1.1rem;border-radius:99px;border:0;background:var(--fg);color:var(--bg);cursor:pointer;display:inline-flex;align-items:center;gap:.5rem}
.mic-btn::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--you)}
.mic-btn[aria-pressed=true]::before{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.25}}
.mic-note{font:400 .86rem/1.45 var(--sans);background:color-mix(in srgb,var(--hi) 12%,var(--card));border-left:3px solid var(--hi);padding:.5rem .7rem;margin:.2rem .2rem .6rem;border-radius:6px}
.opts{display:flex;flex-wrap:wrap;gap:.4rem .5rem;align-items:center;font:400 .84rem/1.2 var(--sans);margin:.2rem .2rem .3rem;color:var(--mut)}
.opt-l{margin-right:.1rem}
.seg{font:500 .84rem/1 var(--sans);min-height:34px;padding:0 .7rem;border-radius:99px;border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--fg)}
.seg[aria-pressed=true]{border-color:var(--fg);background:var(--fg);color:var(--bg)}
.tgl{display:inline-flex;align-items:center;gap:.35rem;margin-left:.4rem;cursor:pointer;min-height:34px}
.tgl input{width:18px;height:18px;accent-color:var(--v-aa)}
.stage .linkbtn{color:var(--mut);text-decoration-color:var(--line)}
.linkbtn{background:none;border:0;padding:0 .2rem;min-height:34px;color:var(--link);text-decoration:underline;text-underline-offset:.18em;cursor:pointer;font:400 .84rem var(--sans)}
.fine{font:400 .78rem/1.45 var(--sans);color:var(--mut);margin:.4rem .3rem .1rem}


/* the instrument is always night (one look; the light-theme map failed two blind reviews) */
.stage,.mine-mapwrap,.game-mapwrap{
  --bg:#0f1116;--bg2:#161922;--card:#171a22;--stage:#12141b;--fg:#efe9dc;--mut:#c6c0b3;--line:#474b57;--line-soft:#262a34;
  --link:#a9c1ff;--hi:#f0a060;--k:#ffae8f;
  --v-i:#38c2d6;--v-e:#6fd06a;--v-a:#ff7a4d;--v-o:#b88cff;--v-u:#6f93ff;--v-aa:#ffc44d;--v-ii:#ff6fa8;
  --en:#c9c6cf;--tongue:#b35a6c;--tongue-l:#f0a0b0;--you:#ff6b5c;--dot:#fff3dc;--target:#5fe0b8;
  --to-top-bg:#171a22;--to-top-fg:#efe9dc;
;--you:#fff3dc;color:var(--fg);background:var(--stage);color-scheme:dark}
.stage{box-shadow:0 0 0 1px rgba(255,255,255,.02),0 24px 60px rgba(10,12,20,.28)}
/* chapters */
.ch{padding:2.4rem 1rem;border-top:1px solid var(--line-soft)}
.prose{max-width:40rem;margin:0 auto}
.wide{max-width:1100px;margin:1.2rem auto 0}
h2{font:500 clamp(1.4rem,2.6vw,2rem)/1.2 var(--serif);margin:0 0 .9rem;text-wrap:balance}
h3{font:600 1.05rem/1.3 var(--sans);margin:1.6rem 0 .5rem}
.anchor{margin-left:.4rem;font:400 .9rem var(--sans);color:var(--line);text-decoration:none;opacity:0}
h2:hover .anchor,.anchor:focus{opacity:1}
.hint{font:400 .88rem/1.45 var(--sans);color:var(--mut)}
.pill-btn{font:500 .9rem/1 var(--sans);min-height:42px;padding:0 1rem;border-radius:99px;border:1px solid var(--line);background:var(--card);cursor:pointer;color:var(--fg)}
.pill-btn:hover{border-color:var(--fg)}
.pairs{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin:1rem 0;padding:.9rem 1.1rem;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.pairs .pr{margin:0;font:400 1.5rem/1.2 var(--serif)}
.pts{padding-left:1.1rem}.pts li{margin:.5rem 0}

/* your map */
.mine{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.mine{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}}
.mine-side{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:1.1rem}
.mine-mapwrap,.game-mapwrap{background:var(--stage);border:1px solid var(--line);border-radius:18px;padding:.5rem}
.game-mapwrap{max-width:720px;margin:0 auto}
.game .tbtns,.game #game-msg,.game .hint{max-width:720px;margin-left:auto;margin-right:auto}
.steps{display:flex;gap:.35rem;list-style:none;padding:0;margin:0 0 .9rem;font:500 1rem var(--serif)}
.steps li{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--mut)}
.steps li.done{background:var(--you);border-color:var(--you);color:#fff}
.steps li.now{border:2px solid var(--fg);color:var(--fg)}
.ring{--p:0;width:120px;height:120px;border-radius:50%;margin:.4rem auto;display:grid;place-items:center;background:conic-gradient(var(--you) calc(var(--p) * 360deg),var(--line-soft) 0);position:relative}
.ring::after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--card)}
.ring span{position:relative;z-index:1;font:500 3.4rem/1 var(--serif)}
.say{text-align:center;font:600 1.1rem/1.3 var(--sans);margin:.4rem 0 0}
#prompt-w{text-align:center;margin:.2rem 0 0}
.mine-res p{margin:.4rem 0}
.bignum{font:400 .95rem/1.4 var(--sans);color:var(--mut)}.bignum b{display:block;font:500 3rem/1 var(--serif);color:var(--fg);margin-bottom:.2rem}
.mine-btns{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.legend{font:400 .82rem var(--sans);color:var(--mut)}
.lg-you{color:var(--fg)}
:root{--you:#17171a}:root[data-theme=dark]{--you:#fff3dc}

/* game */
.tbtns{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.4rem}
.tpair{display:inline-flex;gap:.2rem;align-items:center}
.ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer;text-decoration:none}
.ic:hover{border-color:var(--fg)}
.hear{width:34px;height:34px;font-size:.8rem}

/* faq, sources, share, footer */
.qa{border-bottom:1px solid var(--line-soft);padding:.6rem 0}
.qa summary{cursor:pointer;font:600 1rem/1.4 var(--sans)}
.sources{padding-left:1.1rem;font-size:.98rem}.sources li{margin:.35rem 0}
.srcnote{font:400 .88rem/1.5 var(--sans);color:var(--mut)}
.share{margin:1rem 0 0}
.share-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.share-label{font:400 .8rem var(--sans);color:var(--mut);margin-right:.2rem}
.share-msg{font:400 .8rem var(--sans);color:var(--mut);margin:.3rem 0 0;min-height:1em}
.site-footer{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;padding:2rem 1rem 3rem;font:400 .85rem var(--sans);color:var(--mut);border-top:1px solid var(--line-soft)}
.site-footer a{color:inherit}
@media (max-width:640px){
  .ch{padding:2rem 1rem}
  .stage{padding:.5rem;border-radius:16px;margin:0 -.4rem}
  .vbtn{width:40px;height:40px;font-size:1.05rem}
  .controls{justify-content:flex-start}
  .mouth{width:72px;bottom:24px;right:6px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{.rail,.topbar,.share,.progress{display:none}}