/* Pop – Kunskapsbladets lekfulla skal (2026-11-11). Laddas efter bladet.css. */
@font-face{font-family:"Bricolage Grotesque";src:url(../fonts/bricolage-latin.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(../fonts/figtree-latin.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --paper:#f4f6fd; --paper-2:#eaeefb; --paper-3:#dde3f8; --card:#fff;
  --ink:#1c1a46; --ink-2:#424070; --ink-3:#5b5985; --rule:#e2e5f4; --rule-2:#c9cdeb;
  --red:#5b3df5; --red-ink:#4628d9; --red-wash:#ece8ff;
  --sun:#ffd23f; --sun-2:#fff3c4; --sun-3:#e8b512;
  --mint:#14b892; --mint-2:#d8f6ee; --coral:#ff6b57; --coral-2:#ffe4df; --pink-2:#fde2ef; --sky-2:#dfeaff;
  --sec-korsord:#5b3df5; --sec-ord:#0f766e; --sec-uttryck:#c2410c; --sec-sprak:#be185d; --sec-fakta:#1d4ed8; --sec-verktyg:#15803d; --sec-arkiv:#5b5985;
  --serif:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --r:18px; --r-s:12px;
  --sh:0 1px 2px rgba(28,26,70,.05),0 10px 28px -14px rgba(28,26,70,.22);
  --sh-up:0 2px 4px rgba(28,26,70,.06),0 22px 44px -18px rgba(70,40,217,.32);
}
body{font-family:var(--sans);font-size:1.0625rem;line-height:1.66;background:var(--paper)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:750;letter-spacing:-.02em}
h1{font-weight:800;letter-spacing:-.032em}
.kb-label,.kb-kicker{letter-spacing:.09em}
::selection{background:var(--sun);color:var(--ink)}

/* ---------- letter tiles: små spelbrickor ---------- */
.kb-tiles{gap:3px}
.kb-tile{margin:0;border:1.5px solid var(--sun-3);background:var(--sun-2);border-radius:7px;box-shadow:0 2px 0 var(--sun-3);color:var(--ink)}
.kb-tile i,.kb-tile b{color:var(--red)}
.kb-tile--dark{background:var(--red);border-color:var(--red-ink);box-shadow:0 2px 0 var(--red-ink);color:#fff}
.kb-tile--blank{border-color:var(--rule-2);box-shadow:none;background:repeating-linear-gradient(45deg,var(--paper-3) 0 4px,var(--paper-2) 4px 8px)}
.kb-tiles--xs{gap:2px}
.kb-tiles--xs .kb-tile{border-radius:4px;box-shadow:0 1px 0 var(--sun-3)}

/* ---------- masthead ---------- */
.kb-mast{background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(1.4) blur(12px);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--rule);box-shadow:0 6px 24px -18px rgba(28,26,70,.35)}
.kb-logo .kb-tile{background:var(--sun);border-color:var(--sun-3);border-radius:11px;box-shadow:0 3px 0 var(--sun-3);transform:rotate(-7deg);font-family:var(--serif);font-weight:800;transition:transform .25s}
.kb-logo:hover .kb-tile{transform:rotate(5deg) scale(1.06)}
.kb-logo__name{font-weight:800;letter-spacing:-.035em}
.kb-logo__name em{font-style:normal;font-weight:800;color:var(--red)}
.kb-logo__tag{letter-spacing:.08em;color:var(--ink-3)}
.kb-search input{border:2px solid var(--rule-2);border-radius:999px;background:var(--paper);padding:.72rem 3.2rem .72rem 1.15rem;font-weight:500;transition:border-color .15s,box-shadow .15s,background .15s}
.kb-search input:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 4px var(--red-wash)}
.kb-search button{top:5px;bottom:5px;right:5px;width:2.35rem;border-radius:50%;background:var(--red);color:#fff}
.kb-search button:hover{background:var(--ink)}
.kb-nav{border-top:1px solid var(--rule)}
.kb-nav ul{gap:.3rem;padding:.45rem 0}
.kb-nav li:nth-child(1){--c:var(--sec-korsord)}.kb-nav li:nth-child(2){--c:var(--sec-ord)}.kb-nav li:nth-child(3){--c:var(--sec-uttryck)}
.kb-nav li:nth-child(4){--c:var(--sec-sprak)}.kb-nav li:nth-child(5){--c:var(--sec-fakta)}.kb-nav li:nth-child(6){--c:var(--sec-verktyg)}
.kb-nav a,.kb-nav li:first-child a{display:flex;align-items:center;gap:.45rem;border:0;border-radius:999px;padding:.42rem .95rem .42rem .42rem;font:700 .9rem/1 var(--sans);letter-spacing:0;transition:background .15s,color .15s}
.kb-nav a i{position:static;display:grid;place-items:center;width:1.45rem;height:1.45rem;border-radius:50%;background:var(--c,var(--ink-3));color:#fff;font-size:.7rem;font-weight:800}
.kb-nav a:hover{background:var(--paper-2);color:var(--ink)}
.kb-nav a:hover i{color:#fff}
.kb-nav a[aria-current]{background:var(--c,var(--ink));color:#fff}
.kb-nav a[aria-current] i{background:#fff;color:var(--c,var(--ink))}
.kb-nav__more a{padding:.42rem .95rem;color:var(--ink-3)}

/* ---------- buttons ---------- */
.kb-btn{border:0;border-radius:999px;padding:.95rem 1.5rem;font-weight:800;font-size:1rem;background:var(--red);color:#fff;box-shadow:0 5px 0 #3a1fb8,0 12px 24px -10px rgba(70,40,217,.6);transform:translateY(0);transition:transform .12s,box-shadow .12s,background .15s}
.kb-btn:hover{background:#6a4fff;color:#fff;transform:translateY(2px);box-shadow:0 3px 0 #3a1fb8,0 8px 18px -10px rgba(70,40,217,.6)}
.kb-btn:active{transform:translateY(5px);box-shadow:0 0 0 #3a1fb8}
.kb-btn--ghost{background:#fff;color:var(--ink);box-shadow:0 0 0 2px var(--rule-2) inset,0 4px 0 var(--rule-2)}
.kb-btn--ghost:hover{background:var(--red-wash);color:var(--red-ink);box-shadow:0 0 0 2px var(--red) inset,0 2px 0 var(--red)}

/* ---------- hero ---------- */
.kb-hero{position:relative;overflow:hidden;border-bottom:0;padding:3rem 0 3.4rem;background:
  radial-gradient(720px 420px at 92% -8%,#e3dcff 0,rgba(227,220,255,0) 62%),
  radial-gradient(560px 360px at -6% 108%,#d4f5ec 0,rgba(212,245,236,0) 62%),
  radial-gradient(420px 260px at 48% 120%,#ffeccc 0,rgba(255,236,204,0) 60%),
  #f7f8ff}
.kb-hero .kb-label{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--rule);border-radius:999px;padding:.45rem .85rem;font-size:.72rem;color:var(--ink-2);box-shadow:0 4px 14px -8px rgba(28,26,70,.25)}
.kb-hero .kb-label::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px var(--mint-2)}
.kb-hero h1{font-size:clamp(2.6rem,6vw,4.6rem);line-height:.98;margin:1.1rem 0 1.1rem}
.kb-hero h1 em{font-style:normal;font-weight:800;color:var(--red);background:linear-gradient(transparent 64%,var(--sun) 64%,var(--sun) 90%,transparent 90%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.kb-hero__dek{font-size:1.2rem;line-height:1.55;color:var(--ink-2);max-width:38ch}
.kb-hero__stats{border-top:0;gap:.75rem}
.kb-hero__stats div{margin:0;padding:.85rem 1.1rem .8rem;background:#fff;border-radius:16px;box-shadow:var(--sh);min-width:9.5rem}
.kb-hero__stats b{font:800 1.75rem/1.05 var(--serif);letter-spacing:-.03em}
.kb-hero__stats div:nth-child(1) b{color:var(--red)}
.kb-hero__stats div:nth-child(2) b{color:var(--sec-ord)}
.kb-hero__stats div:nth-child(3) b{color:var(--sec-uttryck)}
.kb-hero__stats span{font-weight:600;color:var(--ink-3)}
.kb-hero__play{position:relative}
.kb-hero__deco{position:absolute;right:1.4rem;top:-1.15rem;z-index:2;display:flex;gap:4px;pointer-events:none}
.kb-hero__deco .kb-tile{--cell:2.25rem;font-family:var(--serif);font-size:1.05rem;box-shadow:0 3px 0 var(--sun-3),0 10px 18px -10px rgba(28,26,70,.4)}
.kb-hero__deco .kb-tile:nth-child(1){transform:rotate(-8deg) translateY(3px)}
.kb-hero__deco .kb-tile:nth-child(2){transform:rotate(4deg);background:var(--mint-2);border-color:#7fdcc4;box-shadow:0 3px 0 #5cc9ad,0 10px 18px -10px rgba(28,26,70,.4)}
.kb-hero__deco .kb-tile:nth-child(3){transform:rotate(-3deg) translateY(-2px);background:var(--coral-2);border-color:#ffb3a6;box-shadow:0 3px 0 #f59383,0 10px 18px -10px rgba(28,26,70,.4)}
.kb-hero__deco .kb-tile:nth-child(4){transform:rotate(9deg) translateY(4px);background:var(--red);border-color:var(--red-ink);color:#fff;box-shadow:0 3px 0 #3a1fb8,0 10px 18px -10px rgba(28,26,70,.4)}
.kb-hero__deco .kb-tile i{color:inherit;opacity:.6}
@media (prefers-reduced-motion:no-preference){
  .kb-hero__deco .kb-tile{animation:kbbob 5s ease-in-out infinite}
  .kb-hero__deco .kb-tile:nth-child(2){animation-delay:-1.2s}.kb-hero__deco .kb-tile:nth-child(3){animation-delay:-2.4s}.kb-hero__deco .kb-tile:nth-child(4){animation-delay:-3.6s}
}
@keyframes kbbob{50%{translate:0 -5px}}

/* ---------- solver ---------- */
.kb-solver{border:0;border-radius:26px;background:#fff;box-shadow:0 0 0 1px var(--rule),var(--sh-up);padding:1.6rem 1.6rem 1.5rem}
.kb-solver__h{align-items:center;flex-wrap:wrap}
.kb-solver__h h2{font-size:1.55rem;font-weight:800}
.kb-solver__h .kb-label{background:var(--mint-2);color:#0b6e57;border-radius:999px;padding:.4rem .7rem;font-size:.68rem}
.kb-solver label{color:var(--ink-3);letter-spacing:.08em}
.kb-solver input[type=text],.kb-solver input[type=search],.kb-filter input{border:2px solid var(--rule-2);border-radius:14px;background:var(--paper);transition:border-color .15s,box-shadow .15s,background .15s}
.kb-solver input[type=text]:focus,.kb-solver input[type=search]:focus,.kb-filter input:focus{outline:none;border-color:var(--red);background:#fff;box-shadow:0 0 0 4px var(--red-wash)}
.kb-lens{gap:6px}
.kb-lens button{margin:0;border:2px solid var(--rule-2);border-radius:11px;background:#fff;font-weight:800;transition:background .12s,border-color .12s,transform .12s}
.kb-lens button:hover{background:var(--red-wash);border-color:var(--red);transform:translateY(-2px)}
.kb-lens button[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 3px 0 #3a1fb8}
.kb-cells{gap:6px}
.kb-cells input{margin:0;border:2px solid var(--sun-3);border-radius:10px;background:var(--sun-2);box-shadow:0 3px 0 var(--sun-3)}
.kb-cells input:focus{background:#fff;border-color:var(--red);box-shadow:0 0 0 4px var(--red-wash)}
.kb-out li a,.kb-out li span{border:1.5px solid var(--rule);border-radius:10px;background:#fff;box-shadow:0 2px 0 var(--rule)}
.kb-out li a:hover{border-color:var(--red);color:var(--red-ink)}

/* ---------- sections (startsidan) ---------- */
.kb-sec{border-bottom:0;padding:3rem 0}
.kb-sec__h h2{font-size:clamp(1.6rem,3.2vw,2.2rem);font-weight:800}
.kb-sec__h a{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .95rem;border-radius:999px;background:#fff;box-shadow:0 0 0 1.5px var(--rule-2) inset;color:var(--ink);transition:background .15s,color .15s}
.kb-sec__h a::after{color:inherit}
.kb-sec__h a:hover{background:var(--red);color:#fff;box-shadow:none}

/* chips: populära ledtrådar */
.kb-chips{gap:.55rem}
.kb-chips a{border:1px solid var(--rule);border-radius:999px;background:#fff;padding:.4rem .45rem .4rem .95rem;gap:.55rem;font-weight:700;box-shadow:0 2px 0 var(--rule);transition:transform .14s,box-shadow .14s,border-color .14s}
.kb-chips a:hover{background:#fff;color:var(--ink);border-color:var(--red);transform:translateY(-2px);box-shadow:0 5px 0 var(--red-wash),0 10px 20px -12px rgba(70,40,217,.5)}
.kb-chips small{font:800 .72rem/1 var(--sans);letter-spacing:.06em;color:var(--ink);background:var(--sun-2);padding:.36rem .55rem;border-radius:999px}
.kb-chips li:nth-child(4n+2) small{background:var(--mint-2)}
.kb-chips li:nth-child(4n+3) small{background:var(--red-wash)}
.kb-chips li:nth-child(4n+4) small{background:var(--coral-2)}
.kb-chips a:hover small{color:var(--ink)}
.kb-chips a:not(:has(small)){padding-right:.95rem}

/* avdelningar */
.kb-depts{border:0;gap:1.1rem}
.kb-dept{border:0;border-radius:22px;background:#fff;box-shadow:var(--sh);padding:1.4rem 1.4rem 1.3rem;transition:transform .18s,box-shadow .18s;overflow:hidden}
.kb-dept::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
.kb-dept:hover{background:#fff;transform:translateY(-4px);box-shadow:var(--sh-up)}
.kb-depts>.kb-dept:nth-child(1){--c:var(--sec-korsord);--c2:var(--red-wash)}
.kb-depts>.kb-dept:nth-child(2){--c:var(--sec-ord);--c2:var(--mint-2)}
.kb-depts>.kb-dept:nth-child(3){--c:var(--sec-uttryck);--c2:var(--coral-2)}
.kb-depts>.kb-dept:nth-child(4){--c:var(--sec-sprak);--c2:var(--pink-2)}
.kb-depts>.kb-dept:nth-child(5){--c:var(--sec-fakta);--c2:var(--sky-2)}
.kb-depts>.kb-dept:nth-child(6){--c:var(--sec-verktyg);--c2:#dcf5e3}
.kb-dept__n{position:relative!important;top:0!important;left:0!important;width:2.5rem;height:2.5rem;border-radius:12px;background:var(--c2,var(--red-wash));color:var(--c,var(--red))!important;font:800 1.15rem/1 var(--serif)!important;margin-bottom:.85rem;transform:rotate(-6deg)}
.kb-dept h3{font-size:1.5rem;font-weight:800}
.kb-dept h3 a:hover{color:var(--c)}
.kb-dept li{border-top:1px solid var(--rule)}
.kb-dept li a{font-weight:600}
.kb-dept li a:hover{color:var(--c)}
.kb-dept__all{color:var(--c);padding-top:.3rem}
.kb-dept__all::after{color:inherit}

/* dagens ord, listor */
.kb-dict{border:0;border-radius:22px;background:#fff;box-shadow:var(--sh);padding:1.5rem 1.6rem;overflow:hidden}
.kb-dict::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:linear-gradient(90deg,var(--sun),var(--coral),var(--red))}
.kb-dict__hw{font-weight:800;color:var(--red);letter-spacing:-.035em}
.kb-dict__pos{font-style:normal;font-family:var(--sans);font-weight:600;font-size:.9rem;display:inline-block;background:var(--paper-2);border-radius:999px;padding:.25rem .65rem}
.kb-dict__ex{border-left:3px solid var(--coral);border-radius:2px;font-style:italic}
.kb-dict--entry{box-shadow:var(--sh)}
.kb-list{border-top:0;background:#fff;border-radius:20px;box-shadow:var(--sh);padding:.2rem 1.2rem}
.kb-list li:last-child{border-bottom:0}
.kb-list a:hover span{color:var(--red)}
.kb-list a small{background:var(--paper-2);border-radius:999px;padding:.32rem .6rem}
.kb-factlist{border-top:0;background:#fff;border-radius:20px;box-shadow:var(--sh);padding:.3rem 1.3rem}
.kb-factlist a{font-weight:600}
.kb-factlist a:hover{color:var(--red)}

/* kort */
.kb-cards{gap:1.1rem}
.kb-card{border-top:0;background:#fff;border-radius:20px;box-shadow:var(--sh);padding:1.25rem 1.3rem 1.35rem;transition:transform .18s,box-shadow .18s}
.kb-card:hover{transform:translateY(-4px);box-shadow:var(--sh-up)}
.kb-card__k{display:inline-flex;align-self:flex-start;align-items:center;gap:.4rem;letter-spacing:.08em}
.kb-card__k::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--secc,var(--red))}
.kb-card h3{font-weight:750}
.kb-card:hover h3{color:var(--red);text-decoration:none}
.kb-card img{border-radius:12px}

/* bakom bladet */
.kb-person{border:0;border-radius:24px;background:linear-gradient(135deg,#fff 55%,var(--red-wash));box-shadow:var(--sh)}
.kb-person img{border:4px solid var(--sun);border-radius:50%;box-shadow:0 8px 20px -10px rgba(28,26,70,.5)}

/* ---------- artiklar ---------- */
.kb-entry__head{border-bottom:1px solid var(--rule)}
.kb-entry__sec .kb-tile{border-radius:7px;box-shadow:none}
.kb-entry__sec span{letter-spacing:.09em}
.kb-byline img{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sun)}
.kb-prose a{text-decoration-color:rgba(91,61,245,.45)}
.kb-prose a:hover{text-decoration-color:var(--red)}
.kb-prose li::marker{color:var(--red)}
.kb-prose blockquote{border-left:4px solid var(--sun);background:#fff;border-radius:0 14px 14px 0;padding:.9em 1.2em;font-style:normal}
.kb-prose code{border-radius:6px}
.kb-prose img{border-radius:14px}
.kb-svar{border:1.5px solid #d9d0ff;border-left:1.5px solid #d9d0ff;border-radius:20px;background:linear-gradient(135deg,#f1edff 0,#fff 62%);box-shadow:var(--sh)}
.kb-svar::before{border-radius:999px;background:var(--red);padding:.4rem .7rem}
.kb-note{border-top:0;border-radius:16px;background:#fff;box-shadow:inset 4px 0 0 var(--ink-3),var(--sh)}
.kb-note--tip{box-shadow:inset 4px 0 0 var(--mint),var(--sh)}
.kb-note--warn{box-shadow:inset 4px 0 0 var(--coral),var(--sh);background:#fffaf8}
.kb-tip{border:2px dashed #c6b8ff;border-radius:16px;background:#faf8ff}
.kb-tip::before{border-radius:999px;background:var(--red);padding:.32rem .6rem}
.kb-ans__badge{border-radius:999px;background:var(--mint);padding:.35rem .6rem}
.kb-copy{border:1.5px solid var(--rule-2);border-radius:999px;padding:.35rem .75rem}
.kb-copy:hover{border-color:var(--red);color:var(--red)}
.kb-alen{border-bottom:1px solid var(--rule)}
.kb-alen__n b{font-weight:800;color:var(--red)}
.kb-jump,.kb-az{gap:4px;background:rgba(244,246,253,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kb-jump a,.kb-az a{margin:0;border:1.5px solid var(--rule-2);border-radius:10px;background:#fff;transition:background .12s,color .12s,border-color .12s}
.kb-jump a:hover,.kb-az a:hover{background:var(--red);border-color:var(--red);color:#fff}
.kb-fb{border-top:0;border-radius:18px;background:#fff;box-shadow:var(--sh)}
.kb-fb button{border:1.5px solid var(--rule-2);border-radius:999px;background:#fff}
.kb-fb button:hover{background:var(--red);border-color:var(--red);color:#fff}
.kb-table{border-top:0;background:#fff;border-radius:16px;box-shadow:var(--sh)}
.kb-table th,.kb-prose table th{background:var(--paper-2)}
.kb-table tr:hover td{background:#f8f7ff}
.kb-faq{border-top:0;display:grid;gap:.6rem}
.kb-faq details{border:1px solid var(--rule);border-radius:16px;background:#fff;padding:0 1.15rem;transition:box-shadow .15s}
.kb-faq details[open]{box-shadow:var(--sh)}
.kb-faq summary{font-family:var(--serif);font-weight:700;letter-spacing:-.01em}
.kb-faq summary::after{display:grid;place-items:center;width:1.7rem;height:1.7rem;top:.85rem;border-radius:50%;background:var(--red-wash);color:var(--red);font-size:1.15rem}
.kb-faq details[open] summary::after{background:var(--red);color:#fff}
.kb-sources{border-top:1px solid var(--rule)}
.kb-related{border-top:1px solid var(--rule)}
.kb-authorbox{border-top:0;border-radius:20px;background:#fff;box-shadow:var(--sh)}
.kb-authorbox img{box-shadow:0 0 0 3px var(--sun)}
.kb-toc ol{border-left-color:var(--rule)}
.kb-mini li{border-top-color:var(--rule)}
.kb-mini a:hover{color:var(--red)}
.kb-syn li{border:1px solid var(--rule);border-radius:999px;background:#fff}
.kb-arkiv{border-left:0;border-radius:14px;box-shadow:inset 4px 0 0 var(--sec-arkiv)}

/* hubbar */
.kb-hub-head{border-bottom:0;background:
  radial-gradient(520px 260px at 95% 0,#e3dcff 0,rgba(227,220,255,0) 65%),transparent}
.kb-index h3{font-weight:800;color:var(--red);border-bottom:2px solid var(--rule)}
.kb-index a:hover{color:var(--red)}
.kb-group h2{border-bottom:2px solid var(--rule)}
.kb-index--flat li{border-bottom-color:var(--rule)}
.kb-subhub{border:0;border-radius:18px;background:#fff;box-shadow:var(--sh);transition:transform .16s,box-shadow .16s,background .16s}
.kb-subhub b{font-weight:800}
.kb-subhub:hover{background:var(--red);color:#fff;transform:translateY(-3px);box-shadow:var(--sh-up)}
.kb-subhub:hover span{color:#e4dcff}
.kb-pager{gap:5px}
.kb-pager a,.kb-pager span{margin:0;border:1.5px solid var(--rule-2);border-radius:12px;background:#fff}
.kb-pager a:hover{border-color:var(--red);color:var(--red)}
.kb-pager .current{background:var(--red);border-color:var(--red);color:#fff}
.kb-el{border:1px solid var(--rule-2);border-radius:6px}
.kb-el:hover{background:var(--red);border-color:var(--red)}

/* femman */
.kb-fm-cell{border-radius:10px;border-color:var(--rule-2)}
.kb-fm-cell.is-c{background:var(--mint);border-color:var(--mint)}
.kb-fm-cell.is-p{background:var(--sun);border-color:var(--sun-3);color:var(--ink)}
.kb-fm-cell.is-p{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.3) 0 4px,transparent 4px 8px)}
.kb-fm-key{border-radius:10px}
.kb-fm-key[data-s=c]{background:var(--mint);color:#fff}
.kb-fm-key[data-s=p]{background:var(--sun);color:var(--ink)}
.kb-fm-key[data-s=x]{background:#c7cbe0;color:#6b6f8e}

/* ---------- footer ---------- */
.kb-foot{background:
  radial-gradient(640px 320px at 100% 0,rgba(91,61,245,.45) 0,rgba(91,61,245,0) 65%),
  radial-gradient(520px 300px at 0 100%,rgba(20,184,146,.22) 0,rgba(20,184,146,0) 65%),
  #17153b;color:#d9d8f2;border-radius:32px 32px 0 0;margin-top:2rem}
.kb-foot h2{color:#a9a4ff;letter-spacing:.1em}
.kb-foot a{text-decoration:none}
.kb-foot li a{color:#fff}
.kb-foot li a:hover{text-decoration:none;color:var(--sun)}
.kb-foot__brand .kb-tile{background:var(--sun);border-color:var(--sun-3)}
.kb-foot__brand .kb-logo__name em{color:#a9a4ff}
.kb-foot__brand p{color:#c4c2e6}
.kb-foot__mail{border:0;border-radius:999px;background:rgba(255,255,255,.1);padding:.65rem 1.05rem}
.kb-foot__mail:hover{background:var(--sun);color:var(--ink)!important}
.kb-foot__base{border-top:1px solid rgba(255,255,255,.12);color:#9d9bc4}
.kb-foot__base a:hover{color:var(--sun)}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .kb-hero__deco{right:1rem}
}
@media (max-width:680px){
  body{font-size:1.0625rem}
  .kb-nav a,.kb-nav li:first-child a{padding:.4rem .8rem .4rem .4rem;font-size:.86rem}
  .kb-hero{padding:1.6rem 0 2.2rem}
  .kb-hero__grid>.kb-hero__play{order:4;margin-top:.8rem}
  .kb-hero__deco{top:-1rem;right:.8rem}
  .kb-hero__deco .kb-tile{--cell:1.9rem;font-size:.9rem}
  .kb-hero__stats{gap:.5rem}
  .kb-hero__stats div{min-width:0;flex:1 1 30%;padding:.65rem .75rem;border-radius:14px}
  .kb-hero__stats b{font-size:1.3rem}
  .kb-hero__stats span{font-size:.72rem;line-height:1.25;display:block}
  .kb-solver{padding:1.15rem;border-radius:20px;box-shadow:0 0 0 1px var(--rule),var(--sh-up)}
  .kb-lens{gap:5px}
  .kb-cells{gap:4px}
  .kb-depts{gap:.8rem}
  .kb-foot{border-radius:24px 24px 0 0}
}