/* WordScrambleLab — shared chrome. Loaded by every page BEFORE its own inline <style>:
   tokens, base, header + language switcher + mobile menu, buttons, footer, utilities.
   Everything here is identical on every page by design; page-specific rules stay inline
   and override. Cached by the service worker: bump V in sw.js when this file changes. */
@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/Bricolage.woff2?v=140e0116") format("woff2");font-weight:600 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"WSL Sans";src:url("/fonts/WSLSans.woff2?v=ea1bb3c4") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"WSL Sans";src:url("/fonts/WSLSans-Italic.woff2?v=9356fa61") format("woff2");font-weight:200 900;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("/fonts/JetBrainsMono.woff2?v=2fe65e2b") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
/* fallback faces with the web fonts' metrics, so the swap does not move text (measured CLS 0.25 on the long learn pages) */
@font-face{font-family:"WSL Sans Fallback";src:local("Arial");size-adjust:111.69%;ascent-override:91.68%;descent-override:35.81%;line-gap-override:0%}
@font-face{font-family:"Bricolage Grotesque Fallback";src:local("Arial");size-adjust:118.71%;ascent-override:78.34%;descent-override:22.74%;line-gap-override:0%}
@font-face{font-family:"JetBrains Mono Fallback";src:local("Consolas");size-adjust:109.13%;ascent-override:93.47%;descent-override:27.49%;line-gap-override:0%}
:root{
  --ink:#16324F; --ink-soft:#5A7391; --paper:#F5F8FC; --card:#FFFFFF;
  --rule:#DBE3EE; --rule-soft:#EAF0F7;
  --accent:#0F766E; --accent-deep:#0B5D58;
  --a1:#2E7D5B; --a2:#528039; --b1:#927019; --b2:#B15E28; --c1:#A03F3B; --c2:#6B3E79;
  --shadow:0 1px 0 rgba(22,50,79,.05), 0 6px 20px -12px rgba(22,50,79,.35);
  --display:"Bricolage Grotesque","Bricolage Grotesque Fallback","Trebuchet MS",sans-serif;
  --body:"WSL Sans","WSL Sans Fallback","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono","JetBrains Mono Fallback",ui-monospace,Menlo,monospace;
  --hdr:66px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + 14px)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body)}
a{color:var(--ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font:600 15px var(--body);z-index:99;text-decoration:none}
.skip:focus{left:0}
.wrap{max-width:960px;margin:0 auto;padding:0 20px}
.vh{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---- masthead ---- */
header{position:sticky;top:0;z-index:90;border-bottom:1px solid var(--rule);background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(160%) blur(10px);backdrop-filter:saturate(160%) blur(10px);transition:box-shadow .2s ease}
header.stuck{box-shadow:0 2px 14px rgba(22,50,79,.10)}
.mast{display:flex;align-items:center;gap:10px 18px;padding:12px 20px;min-height:var(--hdr)}
.brand{font:800 20px/1 var(--display);letter-spacing:-.02em;text-decoration:none;display:flex;align-items:center;gap:9px}
.brand .mark{font:700 13px/1 var(--mono);background:var(--ink);color:#fff;padding:7px 6px 6px;border-radius:4px;letter-spacing:.06em}
nav{display:flex;align-items:center;gap:0 20px;margin-left:auto}
nav a{font-size:15px;color:var(--ink-soft);text-decoration:none;padding:9px 0}
nav a:hover{color:var(--ink);text-decoration:underline}
.en{font:600 10px var(--mono);letter-spacing:.06em;color:var(--ink-soft);margin-left:4px;vertical-align:2px}
.lang{display:inline-flex;align-items:center;gap:7px;font-size:15px;color:var(--ink-soft);white-space:nowrap;padding:0 0 0 16px;border-left:1px solid var(--rule);margin-left:2px}
.lang b{color:var(--ink);font-weight:700}
.lang a{color:var(--ink-soft);text-decoration:none;padding:9px 2px}
.lang a:hover{color:var(--ink);text-decoration:underline}
.mnav{position:relative}
.mnav summary{list-style:none;cursor:pointer;font-size:15px;color:var(--ink-soft);padding:9px 0;user-select:none}
.mnav summary::-webkit-details-marker{display:none}
.mnav summary::after{content:" \25BE";font-size:.7em;opacity:.75}
.mnav[open] summary{color:var(--ink)}
.mnav .mm{position:absolute;top:100%;left:-10px;min-width:215px;background:var(--paper);border:1px solid var(--rule);border-radius:10px;box-shadow:0 10px 26px rgba(22,50,79,.14);padding:6px;z-index:60;display:flex;flex-direction:column}
.mnav .mm a{display:block;padding:9px 12px;border-radius:7px;white-space:nowrap;font-size:15px}
.mnav .mm a:hover{background:var(--card)}
.mbtn{display:none;appearance:none;background:none;border:1.5px solid var(--rule);border-radius:8px;width:44px;height:44px;align-items:center;justify-content:center;cursor:pointer;padding:0;flex:0 0 auto}
.mbi{display:block;width:22px;height:2px;background:var(--ink);position:relative;border-radius:2px;transition:background .15s}
.mbi::before,.mbi::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,top .2s}
.mbi::before{top:-7px}.mbi::after{top:7px}
header.open .mbi{background:transparent}
header.open .mbi::before{top:0;transform:rotate(45deg)}header.open .mbi::after{top:0;transform:rotate(-45deg)}
@media(max-width:740px){
:root{--hdr:58px}
.mast{padding:8px 20px;gap:10px}
.brand{font-size:18px}
.lang{margin-left:auto;border-left:0;padding-left:0}
header[data-menu] .mbtn{display:inline-flex}
header[data-menu] nav{display:none}
header[data-menu].open nav{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:0;right:0;top:100%;margin:0;gap:0;background:var(--card);border-bottom:1px solid var(--rule);box-shadow:0 12px 28px rgba(22,50,79,.14);padding:4px 20px 14px;max-height:calc(100vh - var(--hdr));max-height:calc(100dvh - var(--hdr));overflow:auto}
header[data-menu].open nav>a,header[data-menu].open .mnav summary{display:block;padding:13px 0;border-top:1px solid var(--rule);font-size:16px}
header[data-menu].open .mnav{position:static}
header[data-menu].open .mnav .mm{position:static;box-shadow:none;border:0;border-left:2px solid var(--rule);border-radius:0;padding:2px 0 8px 14px;min-width:0}
header[data-menu].open .mnav .mm a{white-space:normal;font-size:15.5px}
header:not([data-menu]) .mast{flex-wrap:wrap}
header:not([data-menu]) nav{width:100%;flex-wrap:wrap;gap:0 16px;margin-left:0}
}
@media(prefers-reduced-motion:reduce){header,.mbi,.mbi::before,.mbi::after{transition:none}}

/* ---- buttons: primary (accent, one per screen region), default (navy), ghost (outlined) ---- */
.btn{appearance:none;border:1.5px solid var(--ink);background:var(--ink);color:#fff;font:600 16px var(--body);padding:14px 22px;border-radius:8px;cursor:pointer}
.btn:hover{background:#0E2540}
.btn.ghost{background:none;color:var(--ink)}
.btn.ghost:hover{background:var(--rule-soft)}
.btn.primary{background:var(--accent);border-color:var(--accent);font-size:17px;padding:0 28px;min-height:52px}
.btn.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep)}
.btn:active{transform:translateY(1px)}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center;line-height:1.2;min-height:44px}

/* ---- footer: grouped navigation, then provenance lines ---- */
footer{border-top:1px solid var(--rule);background:var(--card);padding:36px 0 40px;font-size:14.5px;line-height:1.6;color:var(--ink-soft)}
footer p{max-width:78ch;margin:0 0 10px}
.fnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0 0 28px;padding:0 0 28px;border-bottom:1px solid var(--rule)}
.fh{font:700 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.fnav ul{list-style:none;margin:0;padding:0}
.fnav li{margin:0}
.fnav a{display:inline-block;color:var(--ink-soft);text-decoration:none;font-size:15px;padding:4px 0}
.fnav a:hover{color:var(--ink);text-decoration:underline}
.licnote{font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:78ch;margin:0 0 10px}
@media(max-width:740px){.fnav{grid-template-columns:1fr 1fr;gap:20px}}

/* narrow phones: the wordmark, EN | ไทย and the menu button must share one row */
@media(max-width:400px){.mast{padding:8px 14px;gap:8px}.brand{font-size:16px}.brand .mark{font-size:11px;padding:6px 5px 5px}}
@media(max-width:340px){.brand .mark{display:none}}
@media print{header,footer,.skip,.mbtn{display:none!important}}