/* iQfully's own look (v140, Amar): BLACK & WHITE ONLY — no other colours.
   Categories are square tiles in a grid of 3 (Hayabyna has coloured pills).
   Dark theme: black tiles, white edge, white icon and words. Light theme: white tiles, black edge, black icon and words. */
#home .fields{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;max-width:620px;margin-inline:auto}
#home .med .pill{flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:112px!important;border-radius:22px!important;padding:14px 6px 16px;
  background:#0b0b0d!important;border:1.5px solid rgba(255,255,255,.9);box-shadow:0 12px 24px -14px rgba(0,0,0,.8)!important;color:#fff}
#home .med .pill::after{display:none!important}
#home .med .pillIcon{flex:0 0 auto!important;width:50px;height:50px;border-radius:50%!important;border:1.5px solid currentColor!important;background:transparent!important;color:inherit}
#home .med .pillIcon svg{width:25px!important;height:25px!important}
#home .med .pillIcon svg *{stroke:currentColor!important}
#home .med .pillLabel{flex:0 0 auto!important;padding:0 4px!important;justify-content:center;text-align:center;font-size:14.5px!important;line-height:1.15;color:inherit!important;text-shadow:none!important}
#home .med .pillBar{inset-inline:16px!important;width:auto!important;bottom:9px!important;height:3px!important;border-radius:3px;background:rgba(255,255,255,.18)!important}
#home .med .pillBar i{background:#fff!important}
html[data-theme="light"] #home .med .pill{background:#fff!important;border-color:#111114;color:#111114;box-shadow:0 10px 22px -14px rgba(0,0,0,.35)!important}
html[data-theme="light"] #home .med .pillBar{background:rgba(0,0,0,.12)!important}
html[data-theme="light"] #home .med .pillBar i{background:#111114!important}
/* the level leaves: black & white too (the chosen one bright, the other faded) */
#home .lvBtn,#home .levelSw img,#home .lvBtn::before,#home .lvBtn::after{filter:grayscale(1)!important}
/* small accents that were gold become white (dark) / black (light) */
.hbTab.on{color:#fff!important}
html[data-theme="light"] .hbTab.on{color:#111114!important}
.segs .seg.on{background:#fff!important}
html[data-theme="light"] .segs .seg.on{background:#111114!important}
.slot{border-color:rgba(255,255,255,.85)!important;color:#fff!important}
html[data-theme="light"] .slot{border-color:#111114!important;color:#111114!important}
html[data-theme="dark"] .opt .key{background:rgba(255,255,255,.14)!important;color:#fff!important}
html[data-theme="light"] .opt .key{background:#f1f1f3!important;color:#111114!important}
.whyQ,#sheet.whySheet .whyQ{background:#111114!important;color:#fff!important}
#home .lvBtn.on{filter:grayscale(1) brightness(1.3) contrast(1.1)!important;opacity:1!important}
#home .lvBtn:not(.on){opacity:.5!important}
/* the logo a little larger; the sun/moon button black & white too */
.wordmark .logoImg{height:40px!important}
@media(max-width:480px){.wordmark .logoImg{height:34px!important}}
.themeBtn,.themeBtn *{color:#fff!important}
.themeBtn svg *{stroke:currentColor!important}
.themeBtn svg [fill]:not([fill="none"]){fill:currentColor!important}
html[data-theme="light"] .themeBtn,html[data-theme="light"] .themeBtn *{color:#111114!important}
/* v167 (Amar): the professor stands still; on computers the home page fits without scrolling (js/iq-homefit.js scales it evenly; the tiles keep their shape) */
@media (min-width:1100px){#home::before{flex:1 1 0!important;min-height:10px!important}#home::after{flex:1 1 0!important;min-height:var(--hbtab,90px)!important}}
#seal .mascot.prof,#seal.talking .mascot.prof,.mascot.prof{animation:none!important}