:root{--bg:#fdfcfa;--fg:#1a1a1f;--mut:#5f6672;--line:#e5e3de;--acc:#2f6f4e;
--acc2:#c05621;--card:#fff;--chip:#f2f0eb}
@media(prefers-color-scheme:dark){:root{--bg:#14161a;--fg:#e9ecf1;--mut:#98a1b0;
--line:#262a33;--acc:#5fbe8c;--acc2:#f08a4b;--card:#1a1d23;--chip:#20242c}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
.wrap{max-width:860px;margin:0 auto;padding:24px 18px 72px}
a{color:var(--acc)}
header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.brand{font-weight:700;font-size:1.15rem;text-decoration:none;color:var(--fg);
margin:0;line-height:1.3}
.langs{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.langs a{font-size:.82rem;padding:3px 9px;border:1px solid var(--line);
border-radius:99px;text-decoration:none;color:var(--mut)}
.langs a[aria-current]{background:var(--acc);color:#fff;border-color:var(--acc)}
h1{font-size:1.6rem;line-height:1.25;margin:.4em 0 .2em}
h2{font-size:1.05rem;margin:1.8em 0 .6em}
.tagline{color:var(--mut);margin-top:0}
.hint a{color:var(--acc);text-decoration:underline;text-underline-offset:2px}
.prompt{display:block;font-size:.85rem;color:var(--mut);margin-bottom:6px}
.hint{margin:8px 0 0;font-size:.82rem;color:var(--mut)}
.solver{background:var(--card);border:1px solid var(--line);border-radius:12px;
padding:18px;margin:18px 0}
.prompt{display:block;font-size:.9rem;margin-bottom:7px}
.prompt .muted{color:var(--mut);font-weight:400}
.solver input#letters{width:100%;font:600 1.35rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
letter-spacing:.14em;text-transform:uppercase;padding:12px 14px;border-radius:9px;
border:2px solid var(--line);background:var(--bg);color:var(--fg)}
.solver input#letters:focus{outline:none;border-color:var(--acc)}
.actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn{font:600 .95rem/1 inherit;padding:13px 22px;border-radius:8px;border:0;
background:var(--acc);color:#fff;cursor:pointer;min-height:44px}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--mut);border:1px solid var(--line)}
.advanced{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.advanced summary{cursor:pointer;font-size:.9rem;font-weight:600;color:var(--acc);
list-style:none;padding:8px 0;min-height:44px;display:flex;align-items:center}
.advanced summary::-webkit-details-marker{display:none}
.advanced summary::before{content:"▸";margin-right:8px;transition:transform .15s}
.advanced[open] summary::before{transform:rotate(90deg)}
/* Two columns on wide screens, one on phones - the competitor's layout, but
   it actually reflows instead of colliding. */
.fields{display:grid;gap:12px 18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.fields p{margin:0}
.fields label{display:block;font-size:.85rem;color:var(--mut);margin-bottom:4px}
.fields input,.fields select{width:100%;font:400 1rem/1.4 inherit;padding:9px 11px;
border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);
min-height:44px}
.fields input:focus,.fields select:focus{outline:none;border-color:var(--acc)}
.updated{margin-top:2em;font-size:.85rem;color:var(--mut)}
.guide{max-width:62ch}
.guide h3{font-size:1rem;margin:1.6em 0 .3em;font-weight:600}
.guide p{margin:0;color:var(--mut)}
.guide b{color:var(--fg)}
.check{margin:14px 0 0}
.check label{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;
min-height:44px;cursor:pointer}
.check input{width:20px;height:20px;margin:0}
.hint{margin:12px 0 0;font-size:.83rem;color:var(--mut)}
.hint a{color:var(--acc);text-underline-offset:2px}
.status{margin-top:10px;font-size:.9rem;color:var(--mut)}
.status.error{color:var(--fg);font-weight:600}
.group{margin:18px 0}
.group h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;
color:var(--mut);margin:0 0 8px;font-weight:600}
.words{display:flex;flex-wrap:wrap;gap:7px}
.w{display:inline-flex;align-items:baseline;gap:6px;background:var(--chip);
border:1px solid var(--line);border-radius:7px;padding:4px 10px;font-size:.98rem}
.w b{font-weight:600}
.w s{color:var(--acc2);font-size:.76rem;text-decoration:none;font-variant-numeric:tabular-nums}
.grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.grid a{padding:9px 12px;background:var(--card);border:1px solid var(--line);
border-radius:8px;text-decoration:none;font-size:.92rem}
footer{margin-top:48px;padding-top:16px;border-top:1px solid var(--line);
font-size:.83rem;color:var(--mut)}

/* Touch targets. WCAG 2.5.8 asks for 24px minimum; 44px is the practical
   figure for thumbs, and this site's nav is a row of six language links that
   sit right next to each other - the worst case for mis-taps. */
@media(hover:none),(max-width:768px){
  .langs a{padding:0 13px;min-height:44px;display:inline-flex;align-items:center}
  .hint a{display:inline-block;padding:11px 2px;min-height:44px;line-height:22px}
  .brand{min-height:44px;display:inline-flex;align-items:center}
  footer a{display:inline-block;padding:9px 5px;min-height:44px;line-height:26px}
  .grid a{min-height:48px;display:flex;align-items:center}
  .actions .btn{flex:1 1 auto}
  /* Long result lists are the norm here; give thumbs a bit more room. */
  .w{padding:6px 11px}
}
/* Never let a very long compound noun force the page sideways. */
.w b{overflow-wrap:anywhere}
h1{overflow-wrap:anywhere}