:root{
  --bg:#0c1220; --surface:#121a2b; --surface-2:#172034;
  --border:#26314c; --border-soft:#1b2439;
  --text:#e8eefb; --muted:#8ea0c4; --muted-2:#6277b0;
  --indigo:#6366f1; --indigo-hi:#7d80f5; --teal:#2dd4bf;
  --teal-soft:rgba(45,212,191,.12); --indigo-soft:rgba(99,102,241,.13);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}

/* ---------- header ---------- */
header.site{border-bottom:1px solid var(--border-soft);position:sticky;top:0;
  background:rgba(12,18,32,.94);backdrop-filter:blur(12px);z-index:40}
header.site .bar{display:flex;align-items:center;gap:20px;height:72px}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand svg{height:40px;width:auto}
.brand .wm{line-height:1}
/*  SIZED TO MATCH THE SLATE LOCKUP, and the numbers are measured, not
    guessed. Slate's wordmark is baked into one SVG at height:40px, where
    SLATE has a 20px cap height and AND EYELINE an 8px one. This wordmark
    is live text next to a 40px mark, so it has to be matched by eye in
    pixels: 30px gives a 20px cap, 11px gives an 8px one. It was 15.5px,
    which came out at HALF Slate's cap height and read as a smaller logo
    sitting beside the same-sized mark.

    HANDSHAPE is nine characters against Slate's five, so the tracking on
    the second line comes back a touch to keep the two lines the same
    width - that alignment is what makes it read as one lockup.

    THE LINE SPACING IS THE OTHER HALF OF IT, and matching cap heights is
    not enough on its own. Slate's two lines sit 2px apart and its whole
    wordmark is 30px of ink. With line-height:1 and a 5px margin these sat
    11px apart for 39px of ink, which pushed the lockup to 46px against
    Slate's 40px and read as a bigger logo even though the letters were
    identical in height. line-height .72 and .8 take the slack out of the
    line boxes; the 2px margin is then the visible gap.                 */
.brand .wm b{display:block;font-weight:800;font-size:30px;line-height:.72;
  letter-spacing:.085em;
  background:linear-gradient(100deg,#2dd4bf,#6366f1);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand .wm span{display:block;font-size:11px;line-height:.8;letter-spacing:.24em;
  color:#8aa8f0;margin-top:2px}
/*  The wordmark is 213px wide at full size - too much once the search box
    and the nav are both in the bar. It steps down before it collides,
    and below 560px it is hidden altogether.                            */
@media (max-width:1080px){
  .brand .wm b{font-size:25px}
  .brand .wm span{font-size:9.5px;letter-spacing:.22em}
}
@media (max-width:860px){
  .brand .wm b{font-size:21px}
  .brand .wm span{font-size:8px;letter-spacing:.21em}
}

.hsearch{position:relative;flex:1 1 auto;max-width:330px}
.hsearch input{width:100%;height:40px;padding:0 34px 0 36px;border-radius:99px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--text);
  font:inherit;font-size:14.5px;outline:none}
.hsearch input::placeholder{color:var(--muted-2)}
.hsearch input:focus{border-color:var(--teal);background:var(--surface);
  box-shadow:0 0 0 3px var(--teal-soft)}
.hsearch .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--muted-2);pointer-events:none}
.hsearch .x{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;
  background:none;color:var(--muted-2);cursor:pointer;font-size:17px;line-height:1;
  width:24px;height:24px;border-radius:50%;display:none}
.hsearch.on .x{display:block}
.hsearch .x:hover{color:var(--text);background:var(--border-soft)}

nav.main{display:flex;gap:22px;margin-left:auto;align-items:center;font-size:13.5px;
  white-space:nowrap}
nav.main a{color:var(--muted);transition:.15s;padding:4px 0;border-bottom:2px solid transparent}
nav.main a:hover{color:var(--text)}
nav.main a.active{color:var(--text);border-bottom-color:var(--teal)}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--border);
  color:var(--muted);border-radius:8px;width:38px;height:38px;cursor:pointer;font-size:16px}
@media (max-width:940px){
  nav.main{display:none;position:absolute;top:72px;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--border);flex-direction:column;align-items:flex-start;
    gap:0;padding:8px 28px 16px;margin:0}
  nav.main.open{display:flex}
  nav.main a{padding:11px 0;width:100%;border-bottom:1px solid var(--border-soft)}
  .burger{display:block}
  .hsearch{max-width:none}
}
@media (max-width:560px){ .brand .wm{display:none} }

/* ---------- type ---------- */
h1{font-size:clamp(32px,5vw,50px);line-height:1.06;letter-spacing:-.024em;margin:0;
  font-weight:700;text-wrap:balance}
h2{font-size:clamp(22px,3vw,30px);line-height:1.2;letter-spacing:-.022em;margin:0;font-weight:700}
h3{font-size:18px;line-height:1.32;letter-spacing:-.012em;margin:0;font-weight:700}
p{margin:0 0 1.1em}
.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);
  font-weight:700;margin:0 0 16px}
.lede{font-size:18.5px;color:var(--muted);line-height:1.6}
.lede a{color:var(--teal);border-bottom:1px solid rgba(45,212,191,.35)}
.lede a:hover{border-bottom-color:var(--teal)}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-size:14.5px;font-weight:500;padding:13px 26px;
  border-radius:99px;transition:.18s;cursor:pointer;border:1px solid transparent;
  font-family:var(--sans);background:none}
.btn-primary{background:var(--indigo);color:#fff}
.btn-primary:hover{background:var(--indigo-hi)}
.btn-ghost{border-color:var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-soft)}

/* ---------- page furniture ---------- */
main{min-height:70vh}
section.pad{padding:64px 0}
.hero{padding:76px 0 62px;border-bottom:1px solid var(--border-soft);position:relative;
  overflow:hidden}
.hero:before{content:"";position:absolute;top:-46%;right:-8%;width:620px;height:620px;
  border-radius:50%;background:radial-gradient(circle,rgba(99,102,241,.16),transparent 68%);
  pointer-events:none}
.hero .wrap{position:relative}
.hero .heromark{height:104px;width:auto;margin-bottom:30px}
.hero h1{max-width:15ch}
.hero .lede{max-width:56ch;margin-top:20px}
.bigsearch{position:relative;max-width:560px;margin:32px 0 0}
.bigsearch input{width:100%;height:58px;padding:0 18px 0 52px;border-radius:14px;
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  font:inherit;font-size:17px;outline:none}
.bigsearch input::placeholder{color:var(--muted-2)}
.bigsearch input:focus{border-color:var(--teal);box-shadow:0 0 0 4px var(--teal-soft)}
.bigsearch .ic{position:absolute;left:19px;top:50%;transform:translateY(-50%);color:var(--muted-2)}
.hintrow{margin-top:14px;font-size:13.5px;color:var(--muted-2);display:flex;gap:8px;
  flex-wrap:wrap;align-items:center}
.hintrow button{background:none;border:1px solid var(--border);color:var(--muted);
  border-radius:99px;padding:4px 12px;font:inherit;font-size:12.5px;cursor:pointer}
.hintrow button:hover{border-color:var(--teal);color:var(--teal)}

.pagehead{padding:44px 0 26px;border-bottom:1px solid var(--border-soft)}
.pagehead .lede{max-width:56ch;margin-top:12px;font-size:16.5px}
.crumb{font-size:12.5px;color:var(--muted-2);margin-bottom:12px}
.crumb a:hover{color:var(--teal)}

.statrow{display:flex;gap:0;border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);flex-wrap:wrap}
.statrow div{flex:1 1 160px;padding:22px 24px;border-right:1px solid var(--border-soft)}
.statrow div:last-child{border-right:0}
.statrow b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em}
.statrow span{font-size:12.5px;color:var(--muted);letter-spacing:.04em}

/* ---------- sign grid ---------- */
.toolbar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:22px 0 16px;flex-wrap:wrap}
.count{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)}
.count b{color:var(--text);font-weight:600}
.alpha{display:flex;gap:1px;flex-wrap:wrap}
.alpha button{font-size:11.5px;width:23px;height:23px;border:0;background:none;
  color:var(--muted-2);cursor:pointer;border-radius:5px;font-family:var(--sans)}
.alpha button:hover:not(:disabled){background:var(--teal-soft);color:var(--teal)}
.alpha button.on{background:var(--indigo);color:#fff}
.alpha button:disabled{opacity:.28;cursor:default}

.grid{display:grid;gap:14px;padding-bottom:56px;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.tile{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;cursor:pointer;text-align:left;padding:0;font:inherit;color:inherit;
  display:flex;flex-direction:column;
  transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease}
.tile:hover,.tile:focus-visible{transform:translateY(-2px);border-color:var(--teal);
  box-shadow:0 10px 26px -16px rgba(0,0,0,.8)}
.tile:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.thumb{position:relative;aspect-ratio:4/3;background:var(--surface-2);
  border-bottom:1px solid var(--border-soft);display:grid;place-items:center;overflow:hidden}
.thumb video{width:100%;height:100%;object-fit:cover}
.thumb .ph{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 0%,var(--indigo-soft),transparent 64%)}
.thumb .ph svg{opacity:.4}
.tbody{padding:11px 13px 13px;display:flex;flex-direction:column;gap:5px;flex:1}
.gloss{font-size:14px;font-weight:600;letter-spacing:-.008em;line-height:1.3;
  word-break:break-word}
.sub{font-size:11.5px;color:var(--muted-2);margin-top:auto}
.sub em{font-style:normal;color:var(--teal)}
.sentinel{height:1px}
.empty{padding:64px 20px;text-align:center;color:var(--muted);grid-column:1/-1}
.empty h3{color:var(--text);margin-bottom:8px}

/* ---------- topics ---------- */
.topics{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));
  padding-bottom:56px}
.topic{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:20px;transition:.16s;cursor:pointer;text-align:left;font:inherit;color:inherit}
.topic:hover{border-color:var(--teal);transform:translateY(-2px)}
.topic h3{text-transform:capitalize;margin-bottom:4px}
.topic .n{font-size:12px;color:var(--teal);letter-spacing:.06em}
.topic .ex{font-size:13px;color:var(--muted-2);margin-top:10px;line-height:1.5}

/* ---------- month groups ---------- */
.monthhead{display:flex;align-items:center;gap:14px;margin:34px 0 16px}
.monthhead h3{font-size:15px;letter-spacing:.02em;white-space:nowrap}
.monthhead .rule{flex:1;height:1px;background:var(--border-soft)}
.monthhead .n{font-size:12px;color:var(--muted-2)}

/* ---------- fingerspelling ---------- */
.fs{display:grid;gap:18px;grid-template-columns:1.1fr .9fr;padding:30px 0 10px}
@media (max-width:840px){.fs{grid-template-columns:1fr}}
.cam{background:#000;border:1px solid var(--border);border-radius:16px;aspect-ratio:4/3;
  display:grid;place-items:center;text-align:center;padding:24px;position:relative;
  overflow:hidden}
.cam .inner{color:var(--muted)}
.cam .inner svg{margin-bottom:14px;opacity:.5}
.cam .badge{position:absolute;top:14px;left:14px;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);border:1px solid var(--border);
  border-radius:99px;padding:4px 11px;background:rgba(12,18,32,.7)}
.prompt{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:26px;display:flex;flex-direction:column;gap:18px}
.prompt .target{font-size:82px;font-weight:800;line-height:1;letter-spacing:-.03em;
  background:linear-gradient(100deg,#2dd4bf,#6366f1);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.meter{height:7px;border-radius:99px;background:var(--border-soft);overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#2dd4bf,#6366f1);width:0;
  transition:width .4s}
.scorerow{display:flex;gap:22px;font-size:13px;color:var(--muted)}
.scorerow b{color:var(--text);font-size:19px;font-weight:700;display:block}
.alphagrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
  padding-bottom:56px}
.lt{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;cursor:pointer;padding:0;font:inherit;color:inherit}
.lt:hover{border-color:var(--teal)}
.lt .v{aspect-ratio:1;background:var(--surface-2);display:grid;place-items:center;
  position:relative;overflow:hidden}
.lt .v video{width:100%;height:100%;object-fit:cover}
.lt .v .ch{position:absolute;font-size:30px;font-weight:800;color:var(--muted-2);opacity:.5}
.lt .lb{padding:8px 10px;font-size:12px;color:var(--muted);text-transform:uppercase;
  letter-spacing:.1em}

/* ---------- dropdown nav ---------- */
.drop{position:relative}
.dropbtn{font:inherit;font-size:13.5px;color:var(--muted);background:none;border:0;
  cursor:pointer;padding:4px 0;border-bottom:2px solid transparent;display:inline-flex;
  align-items:center;gap:5px}
.dropbtn:hover,.drop:hover .dropbtn{color:var(--text)}
.dropbtn svg{transition:transform .15s}
.drop:hover .dropbtn svg,.drop.open .dropbtn svg{transform:rotate(180deg)}
.dropbtn.active{color:var(--text);border-bottom-color:var(--teal)}
.dropbtn:focus{outline:none}
.dropbtn:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
.dropmenu a:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.dropmenu{position:absolute;top:calc(100% + 14px);left:-14px;min-width:186px;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:7px;display:none;box-shadow:0 18px 40px -18px rgba(0,0,0,.85)}
.drop:hover .dropmenu,.drop.open .dropmenu{display:block}
.drop:before{content:"";position:absolute;top:100%;left:0;right:0;height:16px}
.dropmenu a{display:block;padding:9px 12px;border-radius:8px;font-size:13.5px;
  color:var(--muted);border:0}
.dropmenu a:hover{background:var(--surface-2);color:var(--text)}
.dropmenu a.active{color:var(--teal)}
@media (max-width:940px){
  .drop{width:100%}
  .dropbtn{display:none}
  .dropmenu{display:block;position:static;border:0;background:none;padding:0;box-shadow:none;
    min-width:0}
  .dropmenu a{padding:11px 0;border-bottom:1px solid var(--border-soft);border-radius:0}
}

/* ---------- disclaimer band ---------- */
.discbar{background:var(--surface);border-bottom:1px solid var(--border)}
.discbar .wrap{display:grid;grid-template-columns:minmax(200px,280px) 1fr;
  grid-template-areas:"hd tx" "cta tx";grid-template-rows:min-content 1fr;gap:16px 40px;
  padding-top:32px;padding-bottom:32px}
.discbar .dl{grid-area:hd}
.discbar .dr{grid-area:tx;max-width:74ch}
.discbar .dcta{grid-area:cta;align-self:start;display:flex;flex-direction:column;
  align-items:flex-start;gap:10px}
.discbar h2{font-size:20.5px;letter-spacing:-.02em;text-wrap:balance}
.discbar .btn{font-size:13.5px;padding:10px 20px}
.discbar .dr p{margin:0 0 .85em;color:var(--muted);font-size:14.5px;line-height:1.65}
.discbar .dr p:last-child{margin-bottom:0}
.discbar b{color:var(--text);font-weight:600}
@media (max-width:820px){
  /* Buttons go ABOVE the text on a phone, not below it. Four paragraphs of
     explainer is a long scroll to reach an action you may already want. */
  .discbar .wrap{grid-template-columns:1fr;grid-template-areas:"hd" "cta" "tx";
    gap:16px;padding-top:26px;padding-bottom:26px}
  .discbar .dcta{flex-direction:row;flex-wrap:wrap;gap:8px}
  .discbar .dcta .btn{font-size:13px;padding:9px 16px}
}

/* ---------- disclaimer ---------- */
.disc{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--teal);
  border-radius:14px;padding:28px 30px;margin:0}
.disc h2{font-size:20px;margin-bottom:12px}
.disc p{color:var(--muted);margin:0 0 .9em;max-width:68ch;font-size:15.5px}
.disc p:last-of-type{margin-bottom:0}
.disc b{color:var(--text);font-weight:600}
.disc .more{margin-top:18px}

/* ---------- learn page ---------- */
.res{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  padding-bottom:12px}
.res a.card3{background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:22px;display:flex;flex-direction:column;gap:8px;transition:.16s}
.res a.card3:hover{border-color:var(--teal);transform:translateY(-2px)}
.res .tagline{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
  font-weight:700}
.res h3{font-size:17px}
.res p{margin:0;font-size:14px;color:var(--muted);line-height:1.55}
.res .go{font-size:13px;color:var(--muted-2);margin-top:auto;padding-top:6px}
.res a.card3:hover .go{color:var(--teal)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;position:relative;padding:0 0 22px 46px;color:var(--muted)}
.steps li:before{content:counter(s);position:absolute;left:0;top:-2px;width:30px;height:30px;
  border-radius:50%;border:1px solid var(--border);color:var(--teal);display:grid;
  place-items:center;font-size:13px;font-weight:700;background:var(--surface)}
.steps b{color:var(--text);display:block;margin-bottom:3px;font-weight:600}

/* ---------- contact ---------- */
.form{max-width:560px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:7px}
.field input,.field textarea{width:100%;background:var(--surface-2);border:1px solid var(--border);
  border-radius:11px;color:var(--text);font:inherit;font-size:15px;padding:12px 14px;outline:none}
.field textarea{min-height:150px;resize:vertical;line-height:1.6}
.field input:focus,.field textarea:focus{border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmsg{border-radius:11px;padding:14px 16px;font-size:14.5px;margin-bottom:18px;display:none}
.formmsg.ok{display:block;background:var(--teal-soft);border:1px solid rgba(45,212,191,.3);
  color:var(--teal)}
.formmsg.bad{display:block;background:rgba(240,165,138,.1);
  border:1px solid rgba(240,165,138,.3);color:#f0a58a}
/*  Same line, same styling, as the one under the Slate contact form. The
    form can always fail - a mail server having a bad day is enough - so
    the address is on the page whether or not anything has gone wrong. */
.guide-link{margin:26px 0 0;font-size:14px;color:var(--muted)}
.guide-link a{color:var(--indigo-hi);text-decoration:none}
.guide-link a:hover{color:var(--teal)}

/* ---------- fingerspelling test ---------- */
.fsbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:22px 0 18px;
  border-bottom:1px solid var(--border-soft)}
.seg{display:inline-flex;background:var(--surface);border:1px solid var(--border);
  border-radius:99px;padding:3px}
.seg button{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;
  padding:7px 15px;border-radius:99px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--indigo);color:#fff}
.fsbar .lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);margin-right:2px}
.fsbar .sp{flex:1}
/*  The header is sticky and 73px tall. Without this, scrollIntoView parks
    these two under it and the Short/Medium/Long row is invisible - which
    is exactly what "Try the test" did before. 92px leaves it clear with a
    bit of air. Any new in-page scroll target needs the same.           */
.fsbar,#alphasec{scroll-margin-top:92px}
/* The spacer pushes SPEED to the far right, which on a phone strands the label
   on its own row away from its buttons. Collapse it and let the rows wrap. */
@media (max-width:700px){
  .fsbar{gap:8px 10px;padding-top:18px}
  .fsbar .sp{display:none}
  .fsbar .lbl{margin-left:0 !important}
}

.stage{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;padding:24px 0 0}
/* Grid items default to min-width:auto, so the widest child (the answer row)
   forces the track past the viewport on a phone. min-width:0 lets it shrink. */
@media (max-width:860px){.stage{grid-template-columns:1fr}.stage>*{min-width:0}}
.screen{background:#000;border:1px solid var(--border);border-radius:16px;
  aspect-ratio:4/3;position:relative;overflow:hidden;display:grid;place-items:center}
.screen video{width:100%;height:100%;object-fit:contain;display:none}
.screen video.on{display:block}
.screen .idle{text-align:center;color:var(--muted);padding:26px;max-width:36ch}
.screen .idle h3{color:var(--text);margin-bottom:8px}
.dots{position:absolute;left:0;right:0;bottom:0;display:flex;gap:5px;justify-content:center;
  padding:12px;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.dots i.on{background:var(--teal)}
.dots i.done{background:rgba(255,255,255,.5)}

.side{display:flex;flex-direction:column;gap:16px}
.card2{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px}
.card2 h3{font-size:15px;margin-bottom:12px}
.answer{display:flex;gap:8px}
.answer input{flex:1;min-width:0;height:48px;padding:0 15px;border-radius:11px;background:var(--surface-2);
  border:1px solid var(--border);color:var(--text);font:inherit;font-size:19px;
  letter-spacing:.06em;outline:none;text-transform:lowercase}
.answer input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.answer input:disabled{opacity:.45}
.answer .btn{white-space:nowrap;padding:13px 20px}
.scores{display:flex;gap:20px}
.scores div{flex:1}
.scores b{display:block;font-size:23px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.scores span{font-size:11.5px;color:var(--muted-2);letter-spacing:.05em}

.verdict{font-size:14.5px;margin:0 0 14px;display:flex;align-items:center;gap:8px}
.verdict.ok{color:var(--teal)} .verdict.no{color:#f0a58a}
.review{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.rl{width:42px;height:52px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface-2);display:flex;flex-direction:column;align-items:center;
  justify-content:center;cursor:pointer;font-size:17px;font-weight:700;text-transform:uppercase;
  position:relative;padding:0;color:var(--text);font-family:var(--sans)}
.rl:hover{border-color:var(--teal)}
.rl.ok{border-color:rgba(45,212,191,.45);background:var(--teal-soft);color:var(--teal)}
.rl.no{border-color:rgba(240,165,138,.45);background:rgba(240,165,138,.1);color:#f0a58a}
.rl.miss{border-style:dashed;color:var(--muted-2)}
.rl em{font-style:normal;font-size:9.5px;font-weight:500;letter-spacing:.04em;
  text-transform:none;opacity:.75;margin-top:2px}
.hint{font-size:12.5px;color:var(--muted-2);margin:0}
.weak{display:flex;gap:6px;flex-wrap:wrap}
.weak button{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--muted);font:inherit;font-weight:700;
  text-transform:uppercase;cursor:pointer;font-size:13px;position:relative}
.weak button:hover{border-color:var(--teal);color:var(--text)}
.weak button i{position:absolute;left:0;bottom:0;height:2px;background:#f0a58a;
  border-radius:0 0 0 8px}

/* ---------- sentences test ----------
   Built on the fingerspelling test's pieces: same bar, stage, cards, review
   tiles and scores. What is new is sized for signs rather than letters -
   a tile has to hold DON'T-UNDERSTAND, not one character.               */
.rl.rs{width:auto;min-width:46px;padding:6px 11px;font-size:13px;letter-spacing:.02em}
.weak.words button{width:auto;padding:0 11px;font-size:12px;letter-spacing:.02em}
.glossline{font-size:21px;font-weight:700;letter-spacing:.03em;line-height:1.45;
  word-spacing:.18em;margin:0;word-break:break-word}
.enline{font-size:15.5px;color:var(--muted);margin:8px 0 0}
.gnote{font-size:13.5px;color:var(--muted-2);margin:8px 0 14px;line-height:1.55}
.selfmark{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
/* The fingerspelling input is lowercase and tracked out for letters. English
   wants normal text; gloss is written in capitals. 17px also stops iOS
   zooming the page when the field takes focus. */
.answer input.free{text-transform:none;letter-spacing:0;font-size:17px}
.answer input.caps{text-transform:uppercase;letter-spacing:.03em;font-size:17px}
.gwrap{overflow-x:auto;margin:0 0 26px}
.gtable{width:100%;border-collapse:collapse;font-size:14px}
.gtable th,.gtable td{padding:10px 12px;border-bottom:1px solid var(--border-soft);
  text-align:left;vertical-align:top}
.gtable th{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700}
.gtable td{color:var(--muted)}
.gtable td:first-child{font-weight:700;white-space:nowrap;color:var(--teal)}
#glosssec{scroll-margin-top:92px}

/* ---------- sign detail ---------- */
.detail{display:grid;gap:26px;grid-template-columns:1.05fr .95fr;padding:32px 0 10px}
@media (max-width:840px){.detail{grid-template-columns:1fr}}
.player{background:#000;border:1px solid var(--border);border-radius:16px;overflow:hidden;
  aspect-ratio:4/3;display:grid;place-items:center}
.player video{width:100%;height:100%;object-fit:contain}
.player .miss{color:var(--muted-2);font-size:12.5px;text-align:center;padding:24px}
.dmeta h1{font-size:clamp(28px,4vw,40px)}
.chiprow{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 0}
.chip{font-size:12px;letter-spacing:.04em;border:1px solid var(--border);border-radius:99px;
  padding:5px 12px;color:var(--muted);background:var(--surface);cursor:pointer}
.chip:hover{border-color:var(--teal);color:var(--teal)}
.chip.t{border-color:rgba(45,212,191,.3);color:var(--teal);background:var(--teal-soft);
  cursor:default}
.dlabel{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
  margin:24px 0 8px}
.ctrls{display:flex;gap:9px;flex-wrap:wrap;margin-top:20px}
.ctrl{font-size:13.5px;padding:9px 16px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--muted);cursor:pointer;font-family:var(--sans)}
.ctrl:hover{border-color:var(--teal);color:var(--text)}
.ctrl.on{background:var(--indigo);border-color:var(--indigo);color:#fff}

/* ---------- panels ---------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:30px;display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.panel .txt{flex:1 1 320px}
.panel h2{margin-bottom:8px}
.panel p{color:var(--muted);margin:0;max-width:52ch}
.split{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft)}
@media (max-width:760px){.split{grid-template-columns:1fr}
  .split>div:first-child{border-right:0;border-bottom:1px solid var(--border-soft)}}
.split>div{padding:52px 40px}
.split>div:first-child{border-right:1px solid var(--border-soft)}
.strip{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}

footer.site{border-top:1px solid var(--border-soft);background:var(--surface);
  padding:44px 0 56px;margin-top:20px}
.foot{display:flex;gap:26px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
.foot p{margin:0;font-size:13.5px;color:var(--muted-2);max-width:46ch;line-height:1.6}
.foot a{color:var(--teal)}
.foot nav{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.foot nav a{color:var(--muted)}
.foot nav a:hover{color:var(--text)}