/* Wordscapes Solitaire homepage — Karol's approved design (4 Nov 2026), applied as given. Fonts self-hosted (same families). */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 900;font-display:swap;src:url(/wordscapes-solitaire/assets/fonts/fraunces-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:500 900;font-display:swap;src:url(/wordscapes-solitaire/assets/fonts/fraunces-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:600 800;font-display:swap;src:url(/wordscapes-solitaire/assets/fonts/fraunces-italic-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:600 800;font-display:swap;src:url(/wordscapes-solitaire/assets/fonts/fraunces-italic-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sora";font-style:normal;font-weight:400 800;font-display:swap;src:url(/wordscapes-solitaire/assets/fonts/sora-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sora";font-style:normal;font-weight:400 800;font-display:swap;src:url(/wordscapes-solitaire/assets/fonts/sora-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500 800;font-display:swap;src:url(/wordscapes-solitaire/assets/fonts/jetbrains-mono-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500 800;font-display:swap;src:url(/wordscapes-solitaire/assets/fonts/jetbrains-mono-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --navy-950:#060a1c; --navy-900:#0b1230; --navy-800:#141c48;
  --red:#ef233c; --red-d:#a2001d; --red-lt:#ff5b6e;
  --blue:#2c5df0; --blue-d:#102a7a;
  --gold:#ffd23f; --gold-d:#c98a00;
  --green:#22c55e; --green-d:#15803d;
  --pink:#ec4899; --pink-d:#a3195b;
  --purple:#8b5cf6; --purple-d:#5b2fc9;
  --teal:#06b6d4; --teal-d:#0e6e82;
  --white:#f3f6ff; --ink-soft:#d7deff;
  --line:rgba(255,255,255,.1);
  --font-dh:"Fraunces",serif; --font-b:"Sora",sans-serif; --font-m:"JetBrains Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy-950);color:var(--white);font-family:var(--font-b);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:900px;margin:0 auto;padding:0 28px}
a{text-decoration:none;color:inherit}
button{font:inherit;cursor:pointer;border:none}
input{font:inherit}

@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-24px) scale(1.07)}}
@keyframes drift{from{background-position:0 0}to{background-position:-800px 500px}}
@keyframes shimmer{0%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(220%) skewX(-18deg)}}
@keyframes ringpulse{0%,100%{box-shadow:0 0 0 0 rgba(236,72,153,.5)}50%{box-shadow:0 0 0 10px rgba(236,72,153,0)}}

.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;top:0;left:0;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);animation:shimmer 3.2s ease-in-out infinite}
.stars{position:absolute;inset:0;opacity:.5;background-image:
  radial-gradient(1.6px 1.6px at 15% 25%,#fff,transparent),
  radial-gradient(1.6px 1.6px at 65% 15%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 85% 55%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 35% 70%,#fff,transparent);
  background-size:340px 340px;animation:drift 100s linear infinite}

/* NAV */
.nav{position:sticky;top:0;z-index:60;background:rgba(6,10,28,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1180px;margin:0 auto;padding:13px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-dh);font-weight:800;font-size:18px;letter-spacing:-.01em;color:#fff;flex-shrink:0}
.brand .mark{width:28px;height:28px;border-radius:9px;background:linear-gradient(140deg,var(--red-lt),var(--red) 50%,var(--blue-d));display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand .mark::after{content:"\2605";color:#fff;font-size:11px}
.tabs{display:flex;align-items:center;gap:3px;flex:1;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex-shrink:0;white-space:nowrap;font-family:var(--font-b);font-weight:700;font-size:12.5px;color:var(--ink-soft);padding:8px 13px;border-radius:999px}
.tab.on{color:var(--navy-950);background:linear-gradient(120deg,var(--gold),#fff0b0);box-shadow:0 8px 18px -8px rgba(255,210,63,.55)}
.nav-cta{flex-shrink:0;font-family:var(--font-m);font-weight:700;font-size:11.5px;color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--line);padding:9px 16px;border-radius:999px}

.bcrow{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:12px 28px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-m);font-weight:700;font-size:11.5px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--line)}
.bcrow a{color:#6a8dff}
.bcrow .sep{color:#5c669a}
.bcrow .here{color:var(--pink)}

/* HERO */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 600px at 85% -15%,rgba(236,72,153,.22),transparent 60%),
  radial-gradient(900px 560px at -10% 100%,rgba(139,92,246,.25),transparent 60%),
  linear-gradient(180deg,var(--navy-900),var(--navy-950));
  padding:30px 0 10px}
.blob{position:absolute;border-radius:50%;filter:blur(90px);mix-blend-mode:screen;opacity:.55;animation:float 13s ease-in-out infinite}
.blob.b1{width:420px;height:420px;background:var(--pink);top:-180px;right:-100px}
.blob.b2{width:360px;height:360px;background:var(--purple);bottom:-220px;left:-100px;animation-delay:-6s}
.hero-in{position:relative;z-index:2}
h1.head{font-family:var(--font-dh);font-weight:800;font-size:34px;line-height:1.1;letter-spacing:-.02em;color:#fff;margin:0}
h1.head .accent{display:block;font-style:italic;font-weight:700;background:linear-gradient(100deg,var(--pink),var(--purple) 60%,var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent}

/* SECTIONS */
.sec{padding:34px 0}
h2.sh{font-family:var(--font-dh);font-weight:800;font-size:26px;letter-spacing:-.01em;color:#fff;margin:0 0 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#find-book h2.sh{margin-bottom:4px}
.sh .glow{background:linear-gradient(100deg,var(--pink),var(--gold) 55%,var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;font-style:italic;font-family:var(--font-dh)}
.subt{display:block;font-family:var(--font-m);font-weight:700;font-size:13px;color:var(--teal);margin:0 0 16px}
.bodytext{color:var(--ink-soft);font-weight:600;font-size:14.5px;line-height:1.8;margin:10px 0}
.bodytext a{color:var(--gold);text-decoration:underline}

/* FINDER (Lost Word Finder) */
.findercard-outer{padding:3px;border-radius:19px;background:linear-gradient(120deg,var(--pink),var(--purple),var(--teal));box-shadow:0 24px 48px -24px rgba(236,72,153,.4);animation:ringpulse 3.4s infinite}
.findercard{background:var(--navy-900);border-radius:16px;padding:26px}
.flabel{display:block;font-family:var(--font-m);font-weight:800;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.lettersbox{width:100%;border:2px solid var(--line);background:var(--navy-950);border-radius:12px;outline:none;font-family:var(--font-m);font-weight:800;font-size:15px;letter-spacing:.07em;color:var(--pink);padding:13px 15px;text-transform:uppercase}
.lettersbox.lb-teal{color:var(--teal)}
.lettersbox:focus{border-color:var(--gold)}
.lettersbox::placeholder{color:#8f98c7;letter-spacing:.02em;text-transform:none}
.fgap{margin-top:16px}
.fbtnrow{display:flex;gap:10px;margin-top:18px}
.fbtn{font-family:var(--font-m);font-weight:800;font-size:13px;color:var(--navy-950);background:linear-gradient(120deg,var(--gold),#fff0b0);padding:12px 24px;border-radius:11px;box-shadow:0 10px 20px -8px rgba(255,210,63,.55);display:inline-flex;align-items:center;gap:7px}
.fbtn.ghost{color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--line);box-shadow:none}
.fmeta{margin:14px 0 0;font-family:var(--font-m);font-size:12.5px;color:var(--teal);font-weight:700;min-height:16px}
.resultlist{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.resultlist .wd a{display:flex;align-items:center;justify-content:space-between;gap:10px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-family:var(--font-m);font-size:12.5px;font-weight:800;color:var(--pink);letter-spacing:.06em}
.resultlist .wd a:hover{border-color:var(--pink)}
.resultlist .wbook{color:var(--ink-soft);font-weight:600;letter-spacing:0;font-size:12px;text-align:right}
.moreline{margin:12px 0 0}

/* LIBRARY search (single-row finder) */
#lsearch .findercard-outer{background:linear-gradient(120deg,var(--pink),var(--gold),var(--purple))}
#lsearch .findercard{padding:18px;display:flex;gap:10px;flex-wrap:wrap}
#lsearch .lettersbox{flex:1;min-width:200px;width:auto;font-weight:700;font-size:14px;letter-spacing:.03em;color:var(--white);text-transform:none}
#lsearch .fbtn{padding:13px 22px;border-radius:12px;white-space:nowrap}
#lsearch-msg{margin-top:12px;color:var(--red-lt)}

/* PATTERN LIST */
.patternlist{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.patternrow{display:flex;gap:10px;align-items:baseline;padding:11px 0;border-bottom:1px solid var(--line)}
.patternrow:last-child{border-bottom:none}
.pcode{font-family:var(--font-m);font-weight:800;font-size:13.5px;color:var(--gold);min-width:60px}
.pdesc{font-size:13.5px;color:var(--ink-soft);font-weight:600}

/* SHELF LIST = the 23 native Library disclosures (V1.4) */
.shelflist{display:flex;flex-direction:column;gap:9px}
.wss-libgrp{border-radius:13px;background:linear-gradient(160deg,rgba(236,72,153,.08),rgba(139,92,246,.08));border:1px solid var(--line);transition:border-color .15s, transform .15s}
.wss-libgrp:hover,.wss-libgrp[open]{border-color:var(--pink)}
.wss-libgrp:not([open]):hover{transform:translateX(3px)}
.wss-libgrp summary{list-style:none;cursor:pointer;padding:15px 18px}
.wss-libgrp summary::-webkit-details-marker{display:none}
.wss-libgrp .mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;scroll-margin-top:90px}
.wss-libgrp .mhead h3{margin:0;font-family:var(--font-b);font-weight:800;font-size:14.5px;color:#fff}
.wss-libgrp .mhead .ln{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 4px,transparent 4px 8px);margin:0 4px}
.wss-libgrp .mhead .mc{font-family:var(--font-m);font-weight:700;font-size:12px;color:var(--gold);white-space:nowrap}
.wss-libgrp .mhead .mc::after{content:" \25BE";color:var(--ink-soft)}
.wss-libgrp[open] .mhead .mc::after{content:" \25B4"}
.lbgrid{list-style:none;margin:0;padding:0 18px 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.lbcard{display:block;height:100%;padding:13px 15px;border-radius:11px;background:var(--navy-900);border:1px solid var(--line)}
.lbcard:hover{border-color:var(--gold)}
.lbcard .lbn{display:block;font-family:var(--font-m);font-weight:800;font-size:12.5px;color:var(--pink)}
.lbcard .lbw{display:block;font-family:var(--font-m);font-weight:700;font-size:11px;color:var(--gold);margin-top:3px}
.lbcard p{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-soft);font-weight:600}
.lbcard p b{color:#fff}

.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.pbtn{font-family:var(--font-m);font-weight:800;font-size:12.5px;color:var(--navy-950);background:linear-gradient(120deg,var(--gold),#fff0b0);padding:12px 20px;border-radius:11px;box-shadow:0 10px 20px -8px rgba(255,210,63,.55)}
.pbtn.ghost{color:#fff;background:rgba(255,255,255,.08);border:1px solid var(--line);box-shadow:none}

.divider{display:flex;align-items:center;justify-content:center;margin:6px 0 26px}
.divider .diamond{width:9px;height:9px;transform:rotate(45deg);background:linear-gradient(135deg,var(--pink),var(--teal));box-shadow:0 0 14px rgba(236,72,153,.6)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);max-width:300px}
.divider .diamond{margin:0 14px}

/* FAQ */
.faqgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.faqcard{padding:18px 20px;border-radius:15px;background:linear-gradient(160deg,var(--g1),var(--g2));box-shadow:0 16px 28px -16px var(--g1)}
.faqcard .qrow{display:flex;align-items:flex-start;gap:9px}
.faqcard .qmark{flex-shrink:0;width:27px;height:27px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13.5px;color:#fff}
.faqcard h3{font-family:var(--font-b);font-weight:800;font-size:14px;color:#fff;margin:0 0 6px;line-height:1.4}
.faqcard p{font-size:12.5px;color:rgba(255,255,255,.92);font-weight:600;line-height:1.6;margin:0}

.srcnote{margin-top:24px;text-align:center;font-size:12px;color:var(--ink-soft);font-weight:600;line-height:1.7}
.srcnote a{color:var(--gold);text-decoration:underline}

/* FOOTER */
.foot{background:var(--navy-950);color:rgba(255,255,255,.65);padding:40px 0 26px;margin-top:10px;border-top:5px solid;border-image:linear-gradient(90deg,var(--pink),var(--gold),var(--purple),var(--gold),var(--pink)) 1}
.foot .wrap.footwrap{max-width:1040px;margin:0 auto;padding:0 28px}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
@media(max-width:720px){.footgrid{grid-template-columns:1fr}}
.footbrand{display:flex;align-items:center;gap:9px;font-family:var(--font-dh);font-weight:800;font-size:16px;color:#fff;margin-bottom:10px}
.footbrand .mark{width:24px;height:24px;border-radius:8px;background:linear-gradient(140deg,var(--red-lt),var(--red) 50%,var(--blue-d))}
.footdesc{font-size:12.5px;line-height:1.7;max-width:340px}
.footdesc a{color:var(--gold);text-decoration:underline}
.footcol h4{font-family:var(--font-m);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.footcol a{display:block;font-size:13px;font-weight:600;color:rgba(255,255,255,.75);margin-bottom:9px}
.footcol a:hover{color:#fff}
.footbottom{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);font-size:11.5px;color:rgba(255,255,255,.45);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
@media(max-width:560px){h1.head{font-size:27px}h2.sh{font-size:21px}#lsearch .findercard{flex-direction:column}#lsearch .fbtn{width:100%;justify-content:center}#lsearch .lettersbox{min-width:0;width:100%}}

/* integration */
[data-ico]::before{content:attr(data-ico)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--gold);color:var(--navy-950);padding:10px 14px;border-radius:10px;font-weight:800}
.skip:focus{left:8px}
.tab span{font-size:12px}
@media(max-width:640px){.nav-in{gap:10px 14px}.tabs{order:3;flex-basis:100%}.findercard{padding:20px 18px}.faqgrid{grid-template-columns:1fr}.resultlist .wd a{flex-wrap:wrap}}
@media(max-width:380px){.wrap,.foot .wrap.footwrap,.bcrow{padding-left:16px;padding-right:16px}.fbtn{padding:12px 18px}.lbgrid{grid-template-columns:1fr}}

[hidden]{display:none!important}
.findercard-outer + .bodytext{margin-top:20px}

@media(max-width:640px){.bookcard,.wss-libgrp .mhead{scroll-margin-top:var(--kd-navh,150px)}}
/* ===== Lost Words by Length hub (Karol design) ===== */
@keyframes cardglow{0%,100%{box-shadow:0 20px 40px -18px var(--gc)}50%{box-shadow:0 20px 48px -14px var(--gc)}}
.wrap{max-width:1040px}
h1.head{font-size:36px}
.introtext{color:var(--ink-soft);font-weight:600;font-size:14.5px;line-height:1.8;margin:16px 0 0;max-width:640px;position:relative;z-index:2}
h2.sh{font-size:27px;margin:0 0 20px}
.lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.lcard{--gc:rgba(236,72,153,.4);display:block;border-radius:18px;padding:26px 20px;text-align:center;background:linear-gradient(150deg,var(--c1),var(--c2));box-shadow:0 20px 40px -18px var(--gc);animation:cardglow 3.6s ease-in-out infinite;transition:transform .18s;position:relative;overflow:hidden}
.lcard:hover{transform:translateY(-5px) scale(1.02)}
.lcard::before{content:"";position:absolute;top:-30%;right:-20%;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.14);filter:blur(10px)}
.lnum{display:block;font-family:var(--font-dh);font-weight:900;font-size:52px;color:#fff;line-height:1;position:relative;z-index:2;text-shadow:0 4px 14px rgba(0,0,0,.25)}
.llabel{display:block;font-family:var(--font-m);font-weight:800;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:6px 0 14px;position:relative;z-index:2}
.lcount{display:block;font-family:var(--font-b);font-weight:800;font-size:15px;color:#fff;margin-bottom:14px;position:relative;z-index:2}
.lbrowse{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-m);font-weight:800;font-size:12px;color:#fff;background:rgba(6,10,28,.3);border:1px solid rgba(255,255,255,.3);padding:8px 16px;border-radius:999px;position:relative;z-index:2;transition:background .15s}
.lcard:hover .lbrowse{background:rgba(6,10,28,.5)}
.totalstrip{margin:26px 0 0;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-family:var(--font-m);font-weight:700;font-size:13px;color:var(--teal)}
.totalstrip .n{color:var(--gold);font-weight:800}
.srcnote{margin-top:30px}
@media(max-width:560px){h1.head{font-size:28px}h2.sh{font-size:22px}.lnum{font-size:44px}}
@media(max-width:480px){.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.lcard{padding:22px 12px}}
/* ===== PEAK SEO/UX finalization (4 Nov 2026) — UX-1..UX-6, appended to every Wordscapes Solitaire stylesheet (scoped: only these pages load it) ===== */
/* UX-3 keyboard focus */
:focus-visible,.kd summary:focus-visible,.kd a:focus-visible,.kd button:focus-visible,.kd input:focus-visible,.kd [tabindex]:focus-visible{outline:2px solid #FFE17B!important;outline-offset:2px!important}
/* UX-5 fragments: scroll-margin-top = sticky header height + 12px (header: 62px desktop, 104px two-row mobile, 142px three-row narrow) */
/* fallback values = measured header height + 12px; wsol.js sets the exact live value */
:root{--kd-smt:83px}
@media(max-width:640px){:root{--kd-smt:137px}}
@media(max-width:360px){:root{--kd-smt:175px}}
.kd [id]{scroll-margin-top:var(--kd-smt)!important}
.kd .dwtbl td.tdate{position:relative}.kd .dwtbl span[id^="d-"]{position:absolute!important;top:0;left:0;width:1px;height:1px;scroll-margin-top:var(--kd-smt)!important}
/* UX-2 search action rows (Rewards + 2–9-letter pages): input, primary, Clear on one row from 768px */
@media(min-width:768px){
  .kd .ffrow{flex-wrap:nowrap!important;gap:12px!important;align-items:stretch}
  .kd .ffrow .lettersbox{flex:1 1 auto;min-width:0!important;width:auto!important}
  .kd .ffrow .fbtn{flex:0 0 auto;width:auto!important}
}
.kd .ffrow{gap:12px}
.kd .ffrow .lettersbox,.kd .ffrow .fbtn{min-height:44px}
@media(max-width:767px){.kd .ffrow{flex-wrap:wrap}.kd .ffrow .lettersbox{flex:1 1 100%;min-width:0!important;width:100%!important}.kd .ffrow .fbtn{flex:1 1 auto;justify-content:center}}
/* UX-4 practical targets (~44px) */
.kd .tab,.kd .nav-cta{min-height:44px;display:inline-flex;align-items:center}
.kd .btnlink,.kd .pbtn,.kd .qbtn,.kd .fbtn,.kd .slv-go,.kd .slv-clear,.kd .go,.kd .pcta,.kd .shelfchip,.kd .uplink,.kd .nextbtn,.kd .pagebtn,.kd .tlink{min-height:44px;display:inline-flex;align-items:center}
.kd .azjump{gap:8px}
.kd .azjc{width:44px;height:44px}
.kd .bk-word,.kd .aztag{min-height:40px;display:inline-flex;align-items:center}
.kd .wss-disc summary,.kd .slv-adv summary{min-height:44px}
.kd .wbtns{margin-top:18px;justify-content:center}

/* focus ring must not be animated by 'transition:all' */
.kd .shelfchip,.kd .azjc,.kd .shelfrow,.kd .wss-libgrp,.kd .bk-word,.kd .aztag,.kd .lcard,.kd .rcard,.kd .acard,.kd .gcard,.kd .rngcard{transition-property:background,background-color,color,border-color,transform,box-shadow!important}
/* ===== UX-1 contrast (mission spec): opaque inset #0B1430 / #FFFFFF / radius 8px / padding 4px 8px — only behind text that fails
   against the worst point of its gradient. Gradients themselves are unchanged. ===== */
.kd .ins,
.kd .bookcard .bkname,.kd .bookcard .bkdesc,.kd .bookcard .lgtitle,
.kd .toolcard h3,.kd .toolcard p,.kd .toolcard .tlink,
.kd-home .gcard h3,.kd-home .gcard p,.kd-home .gcard .gnum,
.kd .faqcard h3,.kd .faqcard p,
.kd .latestcard .ldate b,.kd .latestcard .lmeta,
.kd .rcard .rday,.kd .rcard .rdate,.kd .rcard .rword,.kd .rcard .rlen,
.kd .acard .arange,.kd .acard .acount,
.kd .lcard .lnum,.kd .lcard .llabel,.kd .lcard .lcount,.kd .lcard .lbrowse,
.kdg .gcard h3,.kdg .gcard p,.kdg .hx-step h3,.kdg .hx-step p,.kdg .hx-step .num,
.kdg .faqc h3,.kdg .faqc p,.kdg .evcard h3,.kdg .evcard p,
.kdg .rngcard .rc-lvl,.kdg .rngcard .rc-span,
.kdg .loccard .loc-title,.kdg .loccard .loc-meta,.kdg .loccard .loc-region,.kdg .loccard .loc-body{
  background:#0B1430!important;color:#FFFFFF!important;border-radius:8px!important;padding:4px 8px!important;
  -webkit-text-fill-color:#FFFFFF;text-shadow:none!important}
/* block-level text keeps its own line; inline labels shrink to their text */
.kd .bookcard .bkname,.kd .bookcard .bkdesc,.kd .toolcard h3,.kd .toolcard p,.kd-home .gcard h3,.kd-home .gcard p,.kd .faqcard h3,.kd .faqcard p,
.kdg .gcard h3,.kdg .gcard p,.kdg .hx-step h3,.kdg .hx-step p,.kdg .faqc p,.kdg .evcard h3,.kdg .evcard p,.kd .acard .arange,
.kdg .loccard .loc-meta,.kdg .loccard .loc-region,.kdg .loccard .loc-body,.kdg .rngcard .rc-lvl,.kdg .rngcard .rc-span{display:table!important;max-width:100%}
.kd .rcard .rday,.kd .rcard .rdate,.kd .rcard .rword,.kd .rcard .rlen,.kd .lcard .lnum,.kd .lcard .llabel,.kd .lcard .lcount,.kd .bookcard .lgtitle,.kd .latestcard .ldate b,.kd .latestcard .lmeta,.kd .ins{display:inline-block}
.kd .rcard>span{margin-bottom:4px}
.kdg .faqc h3{display:flex!important;align-items:center}
.kdg .faqc p{margin-top:6px!important}
.kd .bookcard .bktop{align-items:flex-start}
.kd .gcard p,.kd .faqcard p,.kd .toolcard p,.kdg .faqc p,.kdg .evcard p{margin-top:6px}
.kdg .loccard p{margin-top:6px!important}
/* tag/pill elements whose own background is the gradient: navy inset fill, colour kept as a 2px edge */
.kd .tlen{background:#0B1430!important;color:#fff!important;border:2px solid var(--c2)}
.kdg .lp{background:#0B1430!important;color:#fff!important;border:2px solid var(--teal)}
.kdg .lp2{border-color:var(--pink)}.kdg .lp5{border-color:var(--purple)}.kdg .lp0{border-color:var(--gold)}.kdg .lp1{border-color:var(--green)}
.kdg .btag{background:#0B1430!important;color:#fff!important;border:2px solid var(--purple)}
.kdg .bt-wild{border-color:var(--gold)}.kdg .bt-remove{border-color:var(--pink)}.kdg .bt-rand{border-color:var(--teal)}.kdg .bt-show{border-color:var(--green)}
.kdg .pc{background:#0B1430!important;color:#fff!important;border:2px solid var(--pink)}
.kdg .pk-tiers li{background:#0B1430!important;border:2px solid var(--purple)}
/* Library word chips (mission spec) */
.kd .bk-word{background:#17213F!important;color:#FFFFFF!important;font-weight:700!important;padding:6px 10px!important;border-color:rgba(255,255,255,.25)}
/* table headers: label inset on the gradient header */
.kd thead th .thi{display:inline-block;background:#0B1430;color:#fff;border-radius:8px;padding:4px 8px}
/* buttons with gradient fills: label inset */
.kd .btnlink.first .ins,.kd .nextbtn .ins{padding:4px 8px}
.kd-home .tab.on .tl{background:#0B1430;color:#fff;border-radius:8px;padding:4px 8px}
.kd .wss-disc summary .ins{display:inline-block}
.kd .footbottom{color:rgba(255,255,255,.66)}

/* ===== UX-4 informative text >= 14px, body line-height >= 1.5 ===== */
.kd :is(.lgtitle,.rday,.rlen,.tlen,.llabel,.lbw,.lbn,.acount,.loc-meta,.loc-region,.loc-body,.flabel,.hint,.slv-lab,.statusmeta,.nav-cta,.bcrow,.shelfchip,.fmetasmall,.srcnote,.mc,.uplink,.lbrowse,.lmeta,.pagebtn,.btag,.pricebadge,.tab,.go,.qbtn,.tlink,.footdesc,.pbtn,.pcta,.btnlink,.slv-go,.slv-clear,.fbtn,.subt,.nextbtn,.totalstrip,.azjc,.ldate,.num,.gnum,.lp,.pc,.pcode,.pdesc,.bkdesc,.rc-span,.rc-lvl,.aztag,.bk-word,.wbook,.rdate,.tdate,.fmeta,.smsg,.slv-note,.footbottom,.thi){font-size:14px!important}
.kd :is(.statusmeta time,.bcrow a,.bcrow span,.footcol a,.lbcard p,.lbcard b,.catbl th,.catbl td,.dwtbl th,.dwtbl td,.dwtbl b,.rcard time,.gcard p,.faqcard p,.faqc p,.evcard p,.toolcard p,.hx-step p,.hx-step h3,.pk-tiers li,.slv-adv summary,small,.ldate b,.ldate time,.wmeta .star,.resultlist .wd a,.resultlist .wbook,#wss-reward-results li small,#wss-length-results li a,#wss-length-results li small,#scards .mhead h3,#scards .mhead .mc,.slv-word){font-size:14px!important}
.kd .footcol .fh4{font-family:var(--font-m);font-weight:700;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
:where(.kd main) :where(p,li,td,dd){line-height:1.6}
.kd .introtext{color:var(--ink-soft);font-weight:600;font-size:14.5px;line-height:1.8;margin:14px 0 0;max-width:660px;position:relative;z-index:2}

.kd .tab .tl{font-size:14px!important}