/* ASL trainer. Scoped so the shared nav is left alone.
   Author display rules must not override the hidden attribute. */
[hidden]{display:none !important}
.asl-wrap{max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,48px) 88px}
.asl-wrap .sp-subnav{max-width:none;padding-left:0;padding-right:0}
body{background:var(--base-2,#14161c);color:var(--ink,#e8e6e1)}
.kicker{font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-11,11px);letter-spacing:var(--sp-track-upper,.16em);text-transform:uppercase;color:var(--accent,#c8b48a);margin:28px 0 10px}
.asl-wrap h1{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:clamp(48px,10vw,96px);line-height:.88;margin:0}
.lede{max-width:68ch;margin:16px 0 0;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-135,13.5px);line-height:var(--lh-prose,1.7);color:var(--ink-soft,#9b9a96)}
.lede a,.culture a,.refs a,.asl-read a{color:var(--ink,#e8e6e1);text-decoration:underline;text-underline-offset:3px}
.lede a:hover,.culture a:hover,.refs a:hover{color:var(--accent,#c8b48a)}
.culture{margin:18px 0 0;padding:14px 16px;border:1px solid color-mix(in srgb,var(--accent,#c8b48a) 40%,var(--line,#2c303a));max-width:68ch;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-125,12.5px);line-height:var(--lh-prose,1.65);color:var(--ink-soft,#9b9a96)}
.culture strong{color:var(--ink,#e8e6e1);font-weight:500}
.mini{margin:12px 0 0;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-11,11px);letter-spacing:var(--sp-track-upper,.12em);text-transform:uppercase;color:var(--muted,#63666e)}
.band{font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-11,11px);letter-spacing:var(--sp-track-upper,.16em);text-transform:uppercase;color:var(--accent,#c8b48a);margin:28px 0 14px;display:flex;align-items:center;gap:14px}
.band::after{content:"";flex:1;height:1px;background:var(--line,#2c303a)}
.band.has-help .band-label{min-width:0}
.help-q{appearance:none;flex:0 0 auto;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid color-mix(in srgb,var(--accent,#c8b48a) 45%,var(--line,#2c303a));background:transparent;color:var(--accent,#c8b48a);font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:18px;line-height:1;letter-spacing:0;text-transform:none;cursor:pointer}
.help-q:hover,.help-q:focus-visible,.help-q[aria-expanded="true"]{border-color:var(--accent,#c8b48a);color:var(--ink,#e8e6e1);outline:none}
.help-dialog{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-start;justify-content:center;padding:28px 12px;overflow:auto;background:rgba(0,0,0,.62)}
.help-dialog[hidden]{display:none}
.help-card{width:min(640px,100%);margin:0 auto;background:var(--base-2,#14161c);border:1px solid var(--line,#2c303a);color:var(--ink,#e8e6e1)}
.help-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line,#2c303a)}
.help-head h2{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:32px;letter-spacing:.06em;margin:0;text-transform:none}
.help-head button,.asl-text-btn{appearance:none;background:transparent;border:1px solid var(--line,#2c303a);color:inherit;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-11,11px);letter-spacing:var(--sp-track-upper,.08em);text-transform:uppercase;padding:8px 12px;min-height:44px;min-width:44px;cursor:pointer}
.help-head button:hover,.help-head button:focus-visible,.asl-text-btn:hover,.asl-text-btn:focus-visible{border-color:var(--accent,#c8b48a);color:inherit;outline:none}
.help-lead{margin:0;padding:10px 14px 0;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-12,12px);line-height:1.5;color:var(--muted,#63666e);text-transform:none;letter-spacing:0}
.help-card h3{font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-11,11px);letter-spacing:var(--sp-track-upper,.14em);text-transform:uppercase;color:var(--accent,#c8b48a);margin:14px 14px 0}
.help-card table{width:calc(100% - 28px);margin:4px 14px 0;border-collapse:collapse}
.help-card caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.help-card th,.help-card td{text-align:left;vertical-align:top;padding:7px 8px 7px 0;border-top:1px solid var(--line,#2c303a);font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-12,12px);line-height:1.45;font-weight:400;text-transform:none;letter-spacing:0}
.help-card th{width:34%;color:var(--ink,#e8e6e1)}
.help-card td{color:var(--ink-soft,#9b9a96)}
.help-card p{margin:8px 14px 0;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-12,12px);line-height:1.5;color:var(--ink-soft,#9b9a96)}
.help-card a{color:var(--ink,#e8e6e1)}
.help-foot{height:12px}
.asl-modes{display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;margin:0 0 14px}
.asl-modes button,.asl-sub button,.asl-actions button,.asl-choice,.asl-hand-choice,.asl-pager button{
  appearance:none;background:transparent;border:1px solid var(--line,#2c303a);color:var(--ink-soft,#9b9a96);
  font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-11,11px);letter-spacing:var(--sp-track-upper,.08em);text-transform:uppercase;
  padding:10px 14px;min-height:44px;cursor:pointer
}
.asl-modes button[aria-selected="true"],.asl-sub button[aria-pressed="true"]{color:var(--base-2,#14161c);background:var(--ink,#e8e6e1);border-color:var(--ink,#e8e6e1)}
.asl-modes button:hover,.asl-sub button:hover,.asl-actions button:hover,.asl-choice:hover,.asl-hand-choice:hover,.asl-pager button:hover,
.asl-modes button:focus-visible,.asl-sub button:focus-visible,.asl-actions button:focus-visible,.asl-choice:focus-visible,.asl-hand-choice:focus-visible,.asl-pager button:focus-visible,
.asl-chip:focus-visible,.asl-wrap input:focus-visible,.asl-wrap select:focus-visible{outline:2px solid var(--accent,#c8b48a);outline-offset:2px}
.asl-mode-compact{display:none;margin:0 0 14px}
.asl-mode-compact label,.asl-field label{display:block;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-10,10px);letter-spacing:var(--sp-track-upper,.12em);text-transform:uppercase;color:var(--muted,#63666e);margin:0 0 6px}
.asl-wrap select,.asl-wrap input[type="search"],.asl-wrap input[type="text"],.asl-wrap input[type="range"]{
  font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:16px;color:var(--ink,#e8e6e1);
  background:transparent;border:1px solid var(--line,#2c303a);min-height:44px
}
.asl-wrap select,.asl-wrap input[type="search"],.asl-wrap input[type="text"]{width:100%;max-width:420px;padding:8px 12px}
.asl-sub{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.asl-field{margin:0 0 12px}
.asl-learn{display:grid;grid-template-columns:minmax(260px,1.15fr) minmax(240px,.85fr);gap:14px;align-items:start}
.asl-stage-wrap,.asl-read,.asl-card,.quiz-card,.progress-card{
  border:1px solid var(--line,#2c303a);background:rgba(0,0,0,.14);min-width:0
}
.asl-stage-wrap{padding:12px;min-height:300px;display:flex;align-items:center;justify-content:center}
.asl-stage-wrap:focus{outline:2px solid var(--accent,#c8b48a);outline-offset:2px}
.asl-svg{width:min(100%,440px);height:auto;display:block;
  --asl-skin:color-mix(in srgb,var(--ink,#e8e6e1) 14%,#e4c29a);
  --asl-thumb:color-mix(in srgb,var(--ink,#e8e6e1) 26%,#c9956a);
  --asl-nail:color-mix(in srgb,#fff 72%,#e4c29a);
  --asl-ink:var(--ink,#e8e6e1);
  --asl-arrow:var(--accent,#c8b48a)
}
.asl-svg.is-mini{width:72px}
.asl-svg .skin{fill:var(--asl-skin);stroke:var(--asl-ink);stroke-width:2.4;stroke-linejoin:round}
.asl-svg .thumb{fill:var(--asl-thumb)}
.asl-svg .back{fill:color-mix(in srgb,var(--asl-skin) 72%,var(--asl-ink))}
.asl-svg .nail{fill:var(--asl-nail);stroke:none}
.asl-svg .crease{fill:none;stroke:var(--asl-ink);stroke-width:1.6;opacity:.5}
.asl-svg .crease ellipse{fill:var(--asl-ink);stroke:none;opacity:.4}
.asl-svg .join{fill:var(--asl-arrow);stroke:var(--asl-ink);stroke-width:1.4}
.asl-svg .motion{fill:none;stroke:var(--asl-arrow);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.asl-svg .arrow-head{fill:var(--asl-arrow);stroke:none}
.asl-svg .body-line{fill:none;stroke:var(--asl-ink);stroke-width:2.2;opacity:.5}
.asl-svg .where{fill:var(--asl-arrow);stroke:none}
.asl-svg .frame-num{fill:var(--asl-ink);font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:15px}
.asl-svg .arm{fill:none;stroke:var(--asl-skin);stroke-width:18;stroke-linecap:round}
.asl-read{padding:16px 16px 18px}
.asl-read h2,.asl-panel-title,.quiz-card h2,.progress-card h2,.asl-card h2{
  font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;letter-spacing:.04em;margin:0
}
.asl-read h2{font-size:clamp(40px,6vw,64px);line-height:.9}
.asl-panel-title{font-size:clamp(28px,4vw,40px);margin:0 0 8px}
.asl-panel-title:focus{outline:none}
.params{margin:12px 0 0;padding:0}
.params div{padding:8px 0;border-top:1px solid var(--line,#2c303a)}
.params dt{font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent,#c8b48a);margin:0 0 4px}
.params dd{margin:0;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-13,13px);line-height:1.55;color:var(--ink-soft,#9b9a96)}
.asl-note{margin:10px 0 0;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-12,12px);line-height:1.5;color:var(--muted,#63666e)}
.asl-pager{display:flex;gap:8px;align-items:center;margin-top:12px}
.asl-pager .count{font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-11,11px);letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#63666e)}
.asl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:8px;margin-top:16px}
.asl-chip{appearance:none;background:transparent;border:1px solid var(--line,#2c303a);color:inherit;padding:6px 4px 8px;min-height:44px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.asl-chip.is-on{border-color:var(--accent,#c8b48a);background:color-mix(in srgb,var(--accent,#c8b48a) 12%,transparent)}
.asl-chip-name{font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:11px;letter-spacing:.04em;color:var(--ink,#e8e6e1);text-align:center;line-height:1.2}
.asl-card{padding:16px}
.asl-card h2{font-size:clamp(36px,6vw,56px);line-height:.9;margin:6px 0}
.asl-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.asl-actions button[hidden],.asl-pager button[hidden],.quiz-next[hidden]{display:none}
.boxes{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.boxes li{border:1px solid var(--line,#2c303a);min-width:72px;padding:8px 10px}
.boxes .k{display:block;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#63666e)}
.boxes .v{font-family:"Bebas Neue",Impact,sans-serif;font-size:28px;line-height:1;color:var(--ink,#e8e6e1)}
.quiz-card,.progress-card{padding:16px;margin-top:12px}
.choice-grid,.hand-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.asl-choice{text-align:left}
.asl-choice.is-right,.asl-hand-choice.is-right{border-color:var(--accent,#c8b48a);color:var(--ink,#e8e6e1)}
.asl-choice.is-wrong,.asl-hand-choice.is-wrong{border-color:#a33;color:#e7b4b4}
.asl-hand-choice{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:8px}
.asl-hand-choice .n{font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:11px;letter-spacing:.08em;color:var(--muted,#63666e)}
.prompt-word{font-family:"Bebas Neue",Impact,sans-serif;font-size:clamp(48px,10vw,84px);line-height:.9;margin:8px 0}
.spell-word{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px}
.spell-letter{font-family:"Bebas Neue",Impact,sans-serif;font-size:42px;line-height:1;min-width:36px;text-align:center;border-bottom:2px solid var(--line,#2c303a);color:var(--muted,#63666e)}
.spell-letter.is-now{color:var(--ink,#e8e6e1);border-bottom-color:var(--accent,#c8b48a)}
.spell-letter.is-done{color:var(--accent,#c8b48a)}
.slots{font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:22px;letter-spacing:.28em;margin:8px 0;color:var(--ink,#e8e6e1)}
.feedback{margin:10px 0 0;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-13,13px);line-height:1.5;color:var(--ink-soft,#9b9a96)}
.speed-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
.speed-row input[type="range"]{flex:1 1 180px;accent-color:var(--accent,#c8b48a)}
.stats{margin:0;padding:0}
.stats div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line,#2c303a);font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-13,13px)}
.stats dt{color:var(--muted,#63666e);font-weight:400}
.stats dd{margin:0;color:var(--ink,#e8e6e1)}
.file-btn{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid var(--line,#2c303a);cursor:pointer;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-11,11px);letter-spacing:var(--sp-track-upper,.08em);text-transform:uppercase;color:var(--ink-soft,#9b9a96)}
.file-btn input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.refs{margin-top:8px;border:1px solid var(--line,#2c303a);background:rgba(0,0,0,.14);padding:16px 18px}
.refs h2{font-family:"Bebas Neue",Impact,sans-serif;font-weight:400;font-size:28px;letter-spacing:.04em;margin:0 0 8px}
.refs ul{margin:0;padding:0;list-style:none}
.refs li{padding:8px 0;border-top:1px solid var(--line,#2c303a);font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-125,12.5px);line-height:1.5;color:var(--ink-soft,#9b9a96)}
.refs li:first-child{border-top:0;padding-top:0}
.honest{margin-top:14px;font-family:var(--font-ui,'IBM Plex Mono',ui-monospace,monospace);font-size:var(--fs-12,12px);line-height:1.6;color:var(--muted,#63666e);max-width:70ch}
.asl-vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion: no-preference){
  .asl-svg .motion{stroke-dasharray:8 6;animation:asl-dash 1.15s linear infinite}
}
@keyframes asl-dash{to{stroke-dashoffset:-28}}
@media (prefers-reduced-motion: reduce){
  .asl-svg .motion{animation:none}
}
@media (max-width:860px){
  .asl-learn{grid-template-columns:1fr}
}
@media (max-width:640px){
  .asl-modes{display:none}
  .asl-mode-compact{display:block}
  .help-dialog{padding:12px 10px 24px}
  .help-card th,.help-card td{display:block;width:auto}
  .help-card td{border-top:0;padding-top:2px}
  .choice-grid,.hand-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:380px){
  .choice-grid{grid-template-columns:1fr}
}