/* GENERATED by learn/build_learn.py --site www from learn/ - never hand-edit; rebuild with `npm run learn` in www/ (site.css scoped under .ika) */
/* www base.css undone inside the academy (it was built on browser defaults) */
.ika h1,.ika h2,.ika h3,.ika h4,.ika h5,.ika h6,.ika p,.ika figure,.ika blockquote,.ika dl,.ika dd,.ika ul,.ika ol{margin:revert}
.ika h1,.ika h2,.ika h3,.ika h4,.ika h5,.ika h6{font-weight:revert;font-size:revert;line-height:revert}
.ika img,.ika svg,.ika video,.ika canvas,.ika picture{display:revert;max-width:revert}
.ika img{height:revert}
.ika button,.ika input,.ika select,.ika textarea{font:revert;color:revert;letter-spacing:revert}
.ika button{cursor:revert}
.ika table{border-collapse:revert}
.ika p,.ika li,.ika figcaption,.ika dd{text-wrap:revert}
.ika a{color:revert;text-decoration-thickness:revert;text-underline-offset:revert}
.ika a:hover{text-decoration-thickness:revert}
/* class names both sites use for different things (www base.css .chip .lead .eyebrow .brand): undo exactly what www sets */
.ika .chip{display:revert;align-items:revert;gap:revert;min-height:revert;padding:revert;border:revert;border-radius:revert;font:revert;color:revert}
.ika .lead{font-size:revert;max-width:revert;color:revert;line-height:revert}
.ika .eyebrow{font-family:revert;font-size:revert;font-weight:revert;font-stretch:revert;letter-spacing:revert;text-transform:revert;line-height:revert}
.ika .brand{text-transform:revert}
/* i-Kcal Thermal Academy — design system v1 (2026-08-28)
   Light+dark via prefers-color-scheme; tokens only; Roboto trio; i-Kcal red. */
.ika{
  --paper:#FBFBFA; --card:#FFFFFF; --ink:#21262A; --muted:#5A646C;
  --line:#E3E5E4; --soft:#F2F3F1; --accent:#BE1E2D; --accent-ink:#FFFFFF;
  --teal:#0E7C86; --teal-soft:#E4F0F1; --amber:#8A6516; --amber-soft:#F7F0DF;
  --slate:#6B5CA5; --slate-soft:#EDEAF6; --ok:#2E7D32;
  --shadow:0 1px 3px rgba(20,25,30,.07);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ika{
    --paper:#14171A; --card:#1C2024; --ink:#E7E9EA; --muted:#9AA4AC;
    --line:#2B3137; --soft:#22272C; --accent:#D9515F; --accent-ink:#17191B;
    --teal:#4FB3BC; --teal-soft:#17282B; --amber:#D9B96A; --amber-soft:#2C2618;
    --slate:#9C8FD4; --slate-soft:#242033; --ok:#6FBF73;
    --shadow:none;
  }
}
:root[data-theme="dark"] .ika{
  --paper:#14171A; --card:#1C2024; --ink:#E7E9EA; --muted:#9AA4AC;
  --line:#2B3137; --soft:#22272C; --accent:#D9515F; --accent-ink:#17191B;
  --teal:#4FB3BC; --teal-soft:#17282B; --amber:#D9B96A; --amber-soft:#2C2618;
  --slate:#9C8FD4; --slate-soft:#242033; --ok:#6FBF73;
  --shadow:none;
}
.ika *{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
.ika{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Roboto,'Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:16.5px; line-height:1.65;
}
.ika h1,.ika h2,.ika h3,.ika h4{font-family:'Roboto Condensed','Arial Narrow',Roboto,sans-serif; line-height:1.15; text-wrap:balance; margin:0 0 10px}
.ika h1{font-size:clamp(30px,5.2vw,44px); font-weight:700}
.ika h2{font-size:25px; font-weight:700; margin-top:48px}
.ika h3{font-size:19px; font-weight:600; margin-top:26px}
.ika p{margin:12px 0}
.ika a{color:var(--teal); text-decoration-thickness:1px; text-underline-offset:2px}
.ika a:hover{color:var(--accent)}
.ika a:focus-visible,.ika button:focus-visible,.ika input:focus-visible,.ika select:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
.ika .mono{font-family:'Roboto Mono',Consolas,monospace}
.ika img,.ika svg{max-width:100%}
.ika .container{max-width:1020px; margin:0 auto; padding:0 20px}
.ika .article-body,.ika .prose{max-width:70ch}

/* ---------- header / nav ---------- */
.ika .site-head{border-bottom:1px solid var(--line); background:var(--card); position:sticky; top:0; z-index:40}
.ika .site-head .container{display:flex; align-items:center; gap:14px; height:62px; max-width:1400px}
/* split brand: logo -> www.i-kcal.com (company), wordmark -> / (academy home) */
.ika .brand{display:flex; align-items:center; gap:7px; color:var(--ink); white-space:nowrap}
.ika .brand a{display:inline-flex; align-items:center; gap:3px; text-decoration:none; color:var(--ink); border-radius:8px; padding:4px 6px}
.ika .brand a:hover{background:var(--soft)}
.ika .brand .blogo{height:30px; width:auto; display:block}
.ika .brand .bext{color:var(--muted); opacity:.6; align-self:flex-start; margin-top:2px; flex:0 0 auto}
.ika .brand a.bco:hover .bext{opacity:1; color:var(--accent)}
.ika .brand .bsep{width:1px; height:22px; background:var(--line); flex:0 0 auto}
.ika .brand .bname{font-family:'Roboto Condensed',sans-serif; font-weight:700; font-size:19px; letter-spacing:.2px}
.ika .brand .btag{display:none; color:var(--muted); font-size:12.5px; padding-left:1px}
@media(min-width:760px){ .ika .brand .btag{display:inline} }
.ika nav.top{margin-left:auto; display:flex; gap:1px; flex-wrap:wrap; justify-content:flex-end; row-gap:0}
.ika nav.top a{color:var(--muted); text-decoration:none; font-size:14px; padding:6px 10px; border-radius:8px; font-weight:500}
.ika nav.top a:hover{color:var(--ink); background:var(--soft)}
.ika nav.top a.active{color:var(--accent)}

/* ---------- footer ---------- */
.ika .site-foot{border-top:1px solid var(--line); margin-top:72px; padding:26px 0 40px; color:var(--muted); font-size:13.5px}
.ika .site-foot .container{display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:space-between}
.ika .site-foot a{color:var(--muted)}

/* ---------- chips / badges ---------- */
.ika .chip{font-family:'Roboto Mono',Consolas,monospace; font-size:11.5px; letter-spacing:.06em; padding:3px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:var(--card); white-space:nowrap}
.ika .chip.level{border-color:var(--accent); color:var(--accent); font-weight:500}
.ika .chip.tool{background:var(--teal-soft); border-color:transparent; color:var(--teal); font-weight:500}
.ika .chip.soon{opacity:.65}
.ika .eyebrow{font-family:'Roboto Mono',Consolas,monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500}

/* ---------- article header ---------- */
.ika .art-head{padding:40px 0 8px}
.ika .crumb{font-size:13px; color:var(--muted); margin-bottom:14px}
.ika .crumb a{color:var(--muted)}
.ika .lead{font-size:18.5px; color:var(--muted); max-width:66ch; margin-top:8px}
.ika .art-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}

/* ---------- callouts (the original i-Kcal set) ---------- */
.ika .callout{border:1px solid var(--line); border-left-width:4px; border-radius:0 12px 12px 0; background:var(--card); padding:14px 18px; margin:22px 0; box-shadow:var(--shadow)}
.ika .callout .ct{font-family:'Roboto Mono',Consolas,monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; font-weight:500; margin-bottom:6px}
.ika .callout p{margin:6px 0; font-size:15px}
.ika .callout ul{margin:6px 0; padding-left:20px}
.ika .callout li{margin:5px 0; font-size:15px}
.ika .callout.pin{border-left-color:var(--accent)} .ika .callout.pin .ct{color:var(--accent)}
.ika .callout.atsite{border-left-color:var(--teal)} .ika .callout.atsite .ct{color:var(--teal)}
.ika .callout.stories{border-left-color:var(--amber); background:var(--amber-soft)} .ika .callout.stories .ct{color:var(--amber)}
.ika .callout.deeper{border-left-color:var(--muted)} .ika .callout.deeper .ct{color:var(--muted)}
.ika .callout.linked{border-left-color:var(--slate)} .ika .callout.linked .ct{color:var(--slate)}

/* ---------- worked example ---------- */
.ika .worked{border:1px solid var(--line); border-radius:12px; background:var(--soft); padding:16px 20px; margin:22px 0}
.ika .worked .wt{font-family:'Roboto Condensed',sans-serif; font-weight:700; font-size:16px; margin-bottom:8px}
.ika .worked p{font-size:15px; margin:7px 0}
.ika .worked .calc{font-family:'Roboto Mono',Consolas,monospace; font-size:13.5px; background:var(--card); border:1px solid var(--line); border-radius:8px; padding:10px 14px; overflow-x:auto; font-variant-numeric:tabular-nums; margin:8px 0; white-space:pre-wrap}

/* ---------- figures / schematic placeholder ---------- */
.ika figure{margin:24px 0}
.ika figcaption{font-size:13px; color:var(--muted); margin-top:8px}
.ika .sch-pending{border:1.5px dashed var(--line); border-radius:12px; padding:26px 20px; text-align:center; color:var(--muted); font-size:14px; background:var(--card)}
.ika .sch-pending .mono{color:var(--accent)}

/* ---------- widgets ---------- */
.ika .widget{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:18px 20px; margin:24px 0; box-shadow:var(--shadow)}
.ika .widget .wtitle{font-family:'Roboto Condensed',sans-serif; font-weight:700; font-size:17px; margin-bottom:12px}
.ika .widget .wnote{font-size:12px; color:var(--muted); margin-top:12px}
.ika .wrow{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:10px 0}
.ika .wrow label{font-size:13.5px; color:var(--muted); min-width:112px}
.ika .widget input[type=number],.ika .widget select{
  font:inherit; font-size:15px; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:8px; padding:7px 10px; max-width:130px;
  font-variant-numeric:tabular-nums;
}
.ika .widget input[type=range]{flex:1 1 180px; accent-color:var(--accent)}
.ika .wout{display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:10px; margin-top:12px}
.ika .wcell{background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:9px 12px}
.ika .wcell .k{font-size:11.5px; color:var(--muted); letter-spacing:.04em}
.ika .wcell .v{font-family:'Roboto Mono',Consolas,monospace; font-size:16.5px; font-variant-numeric:tabular-nums; margin-top:2px}
.ika .wcell .u{font-size:11.5px; color:var(--muted)}
.ika .seg{display:inline-flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.ika .seg button{font:inherit; font-size:13px; padding:6px 12px; border:0; background:var(--card); color:var(--muted); cursor:pointer}
.ika .seg button.on{background:var(--accent); color:var(--accent-ink)}
.ika .svgwrap{overflow-x:auto}
.ika .svgwrap svg text{font-family:Roboto,'Segoe UI',sans-serif}

/* ---------- tables ---------- */
.ika .tblwrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--card); margin:20px 0}
.ika table{border-collapse:collapse; width:100%; font-size:14.5px; min-width:560px}
.ika th{font-family:'Roboto Mono',Consolas,monospace; font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; text-align:left; color:var(--muted); font-weight:500; padding:11px 14px; border-bottom:1px solid var(--line); background:var(--soft)}
.ika td{padding:10px 14px; border-bottom:1px solid var(--line); vertical-align:top; font-variant-numeric:tabular-nums}
.ika tr:last-child td{border-bottom:none}

/* ---------- go deeper / footer of article (mini-cards v7, 2026-08-31) ---------- */
.ika .godeeper{margin-top:40px; border-top:2px solid var(--accent); padding-top:18px}
.ika .godeeper h2{margin-top:0; font-size:21px}
.ika .gditems{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; margin-top:12px}
.ika .gd{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:10px 13px; text-decoration:none; color:var(--ink); display:flex; gap:12px; align-items:center}
.ika .gd:hover{border-color:var(--accent)}
.ika .gd:hover .gt{color:var(--accent)}
.ika .gdthumb{flex:0 0 88px; height:58px; border:1px solid var(--line); border-radius:8px; background:var(--paper); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:3px}
.ika .gdthumb svg,.ika .gdthumb img{width:100%; height:100%; object-fit:contain}
.ika .gdthumb .lmono{font-family:'Roboto Mono',Consolas,monospace; font-size:13px; color:var(--muted)}
.ika .gdthumb.tool{background:var(--teal-soft); border-color:transparent}
.ika .gdthumb.tool .lmono{color:var(--teal); font-weight:500; font-size:14px}
.ika .gdbody{min-width:0}
.ika .gd .gk{display:block; font-family:'Roboto Mono',Consolas,monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted)}
.ika .gd .gt{display:block; font-weight:500; font-size:14.5px; line-height:1.3; margin-top:3px; color:var(--ink)}
.ika .gdfac{display:flex; align-items:baseline; gap:14px; margin-top:12px; border:1px solid var(--line); border-radius:12px; background:var(--soft); padding:12px 16px; text-decoration:none; color:var(--ink)}
.ika .gdfac:hover{border-color:var(--accent)}
.ika .gdfac .gk{font-family:'Roboto Mono',Consolas,monospace; font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
.ika .gdfac .gt{font-weight:500; font-size:14.5px}
.ika .gdfac .gdarrow{margin-left:auto; color:var(--muted); font-size:16px}
.ika .gdfac:hover .gdarrow{color:var(--accent)}
.ika .gdprod{border-left:4px solid var(--accent); background:var(--card)}
.ika .gdprod .gk{color:var(--accent)}
.ika .art-foot{color:var(--muted); font-size:13px; margin-top:34px}

/* ---------- home / hub ---------- */
.ika .hero{padding:64px 0 30px}
.ika .hero .tagline{font-family:'Roboto Condensed',sans-serif; font-size:clamp(20px,3vw,26px); color:var(--accent); font-weight:600; margin-top:4px}
.ika .hero .sub{font-size:18px; color:var(--muted); max-width:64ch; margin-top:14px}
.ika .cta{display:inline-block; margin-top:22px; background:var(--accent); color:var(--accent-ink); text-decoration:none; font-weight:500; padding:11px 22px; border-radius:10px; font-size:15.5px}
.ika .cta:hover{filter:brightness(1.08); color:var(--accent-ink)}
.ika .cta.ghost{background:transparent; color:var(--teal); border:1px solid var(--teal); margin-left:10px}
.ika .fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; margin:26px 0}
.ika .fcard{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:20px 22px; text-decoration:none; color:var(--ink); display:flex; flex-direction:column; gap:8px; box-shadow:var(--shadow)}
.ika .fcard:hover{border-color:var(--accent)}
.ika .fcard h3{margin:0; font-size:19px}
.ika .fcard .fb{color:var(--muted); font-size:14px; flex:1}
.ika .fcard .fmeta{display:flex; gap:8px; flex-wrap:wrap}
.ika .lessonlist{list-style:none; padding:0; margin:18px 0; display:grid; gap:10px}
.ika .lessonlist li{border:1px solid var(--line); border-radius:12px; background:var(--card)}
.ika .lessonlist a,.ika .lessonlist .soonrow{display:block; padding:13px 16px; text-decoration:none; color:var(--ink)}
.ika .lessonlist a:hover{background:var(--soft); border-radius:12px}
.ika .lessonlist .lrow{display:flex; gap:14px; align-items:baseline}
.ika .lessonlist .lid{font-family:'Roboto Mono',Consolas,monospace; font-size:12px; color:var(--accent); min-width:30px}
.ika .lessonlist .lt{font-weight:500; flex:1}
.ika .lessonlist .ldsc{display:block; color:var(--muted); font-size:13.5px; line-height:1.5; margin-top:4px; padding-left:44px}
@media(max-width:560px){ .ika .lessonlist .ldsc{padding-left:0} }
.ika .lessonlist .soonrow{color:var(--muted)}
.ika .lessonlist .soonrow .lid{color:var(--muted)}
.ika .strip{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:18px 22px; margin:30px 0}
.ika .strip h2{margin-top:0; font-size:21px}
.ika .toolchips{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px}
.ika .notebox{border-left:4px solid var(--teal); background:var(--soft); border-radius:0 10px 10px 0; padding:12px 16px; font-size:14px; color:var(--muted); margin:20px 0}

/* ---------- glossary ---------- */
.ika dl.gloss{max-width:70ch}
.ika dl.gloss dt{font-weight:700; font-family:'Roboto Condensed',sans-serif; font-size:17px; margin-top:18px}
.ika dl.gloss dd{margin:4px 0 0 0; color:var(--ink)}
.ika dl.gloss dd .also{color:var(--muted); font-size:13.5px}

@media(max-width:640px){
  .ika{font-size:16px}
  .ika .art-head{padding-top:26px}
  .ika .hero{padding-top:36px}
}

/* ---------- reader UX kit (v2, 2026-08-28) ---------- */
.ika h2{scroll-margin-top:76px}
.ika h3{scroll-margin-top:76px}
.ika .article-body{font-size:17px; line-height:1.75}
.ika .article-body>p:first-child,.ika .article-body .fblk:first-child>p:first-child{font-size:17.5px}
.ika .article-body p,.ika .prose p{margin:16px 0}
.ika .article-body > ul li,.ika .article-body .fblk > ul li{margin:8px 0}

.ika .readbar{position:fixed; top:0; left:0; right:0; height:3px; z-index:60; pointer-events:none}
.ika .readbar div{height:100%; width:0; background:var(--accent)}

.ika .theme-btn{margin-left:8px; width:34px; height:34px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--muted); cursor:pointer; padding:0}
.ika .theme-btn:hover{color:var(--ink); border-color:var(--muted)}

.ika .totop{position:fixed; right:18px; bottom:18px; width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .2s, visibility .2s; z-index:50; box-shadow:var(--shadow)}
.ika .totop.on{opacity:1; visibility:visible}
.ika .totop:hover{color:var(--accent); border-color:var(--accent)}

.ika .toc{border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:0 12px 12px 0; background:var(--card); padding:14px 18px; margin:22px 0 8px; max-width:70ch}
.ika .toc .toct{font-family:'Roboto Mono',Consolas,monospace; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.ika .toc ol{margin:0; padding-left:20px; columns:2; column-gap:30px}
.ika .toc li{font-size:14.5px; margin:4px 0; break-inside:avoid}
.ika .toc a{color:var(--ink); text-decoration:none}
.ika .toc a:hover{color:var(--accent)}
@media(max-width:640px){ .ika .toc ol{columns:1} }

.ika .pn{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:26px}
@media(max-width:560px){ .ika .pn{grid-template-columns:1fr} }
.ika .pn a{border:1px solid var(--line); border-radius:12px; background:var(--card); padding:11px 14px; text-decoration:none; color:var(--ink); display:flex; gap:12px; align-items:center}
.ika .pn a:hover{border-color:var(--accent)}
.ika .pn a:hover .pnt{color:var(--accent)}
.ika .pnthumb{flex:0 0 80px; height:54px; border:1px solid var(--line); border-radius:8px; background:var(--paper); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:3px}
.ika .pnthumb svg,.ika .pnthumb img{width:100%; height:100%; object-fit:contain}
.ika .pnthumb .lmono{font-family:'Roboto Mono',Consolas,monospace; font-size:13px; color:var(--muted)}
.ika .pnbody{min-width:0; flex:1}
.ika .pn .pnk{display:block; font-family:'Roboto Mono',Consolas,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.ika .pn .pnt{display:block; font-weight:500; font-size:15px; margin-top:4px}
.ika .pn a.next{flex-direction:row-reverse; text-align:right}

/* ---------- lesson end-matter: FAQ + self-check quiz (v3, 2026-08-30) ---------- */
.ika .faq{margin:18px 0}
.ika .faq details{border:1px solid var(--line); border-radius:12px; background:var(--card); margin:10px 0}
.ika .faq summary{cursor:pointer; padding:13px 16px; font-weight:500; font-size:15.5px; list-style:none; display:flex; gap:12px; align-items:baseline}
.ika .faq summary::-webkit-details-marker{display:none}
.ika .faq summary::before{content:"+"; font-family:'Roboto Mono',Consolas,monospace; color:var(--accent); flex:0 0 auto}
.ika .faq details[open] summary::before{content:"−"}
.ika .faq details[open] summary{border-bottom:1px solid var(--line)}
.ika .faq details>div{padding:4px 16px 14px 40px; font-size:15px}
.ika .faq details>div p{margin:8px 0}
@media(max-width:560px){ .ika .faq details>div{padding-left:16px} }

.ika .quiz .qhead{display:flex; justify-content:space-between; align-items:baseline; gap:10px}
.ika .quiz .qhead .wtitle{margin-bottom:0}
.ika .qprog{font-family:'Roboto Mono',Consolas,monospace; font-size:12px; letter-spacing:.08em; color:var(--muted)}
.ika .qq{font-weight:500; font-size:16px; margin:14px 0 12px}
.ika .qopts{display:grid; gap:8px}
.ika .qopt{font:inherit; font-size:15px; line-height:1.5; text-align:left; padding:10px 14px; border:1px solid var(--line); border-radius:10px; background:var(--paper); color:var(--ink); cursor:pointer}
.ika .qopt:hover:not(:disabled){border-color:var(--teal)}
.ika .qopt:disabled{cursor:default}
.ika .qopt.right{border-color:var(--ok); box-shadow:inset 0 0 0 1px var(--ok)}
.ika .qopt.wrong{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.ika .qopt.dim{opacity:.55}
.ika .qwhy{border-left:4px solid var(--teal); background:var(--soft); border-radius:0 10px 10px 0; padding:11px 14px; font-size:14.5px; margin-top:12px}
.ika .qwhy strong{color:var(--teal)}
.ika .qnav{margin-top:14px}
.ika .qnext{font:inherit; font-size:14.5px; font-weight:500; background:var(--accent); color:var(--accent-ink); border:0; border-radius:9px; padding:9px 18px; cursor:pointer}
.ika .qnext:hover{filter:brightness(1.08)}
.ika .qscore{font-family:'Roboto Condensed',sans-serif; font-size:40px; font-weight:700; margin:10px 0 0}
.ika .qverdict{color:var(--muted); margin:6px 0 0}

/* mobile header: brand + theme button on row 1, nav on row 2 */
@media(max-width:700px){
  .ika .site-head .container{height:auto; flex-wrap:wrap; padding-top:8px; padding-bottom:6px; gap:2px 8px}
  .ika .brand{flex:1 1 auto; gap:5px}
  .ika .brand a{padding:5px 8px}
  .ika .theme-btn{order:2; margin-left:auto; width:32px; height:32px}
  .ika nav.top{order:3; width:100%; margin-left:0; gap:0; justify-content:flex-start}
  .ika nav.top a{font-size:13.5px; padding:4px 10px 4px 0}
}

/* ---------- reader UX kit v4 (2026-08-30): rail TOC · done ticks · glossary A–Z · print ---------- */
/* sticky right-rail TOC on wide screens; browsers without :has() keep the inline card */
@media(min-width:1200px){
  .ika article.container:has(> nav.toc){max-width:1360px; display:grid;
    grid-template-columns:minmax(0,780px) 260px; column-gap:60px;
    justify-content:center; align-items:start}
  .ika article.container:has(> nav.toc) > *{grid-column:1; min-width:0}
  .ika article.container:has(> nav.toc) > nav.toc{
    grid-column:2; grid-row:2 / span 20; position:sticky; top:86px; align-self:start;
    max-height:calc(100vh - 110px); overflow-y:auto; margin:0; max-width:none;
    border:0; border-left:2px solid var(--line); border-radius:0; background:transparent;
    padding:4px 4px 4px 18px; box-shadow:none}
  .ika article.container:has(> nav.toc) .toc ol{columns:1; padding-left:18px}
  .ika article.container:has(> nav.toc) .toc li{font-size:13.5px; margin:7px 0}
  .ika article.container:has(> nav.toc) .toc a{color:var(--muted)}
  .ika article.container:has(> nav.toc) .toc a:hover{color:var(--accent)}
}
.ika .toc a.cur{color:var(--accent) !important; font-weight:500}

/* lesson-complete ticks (localStorage, painted by ui.js) */
.ika .chip.done{border-color:var(--ok); color:var(--ok); font-weight:500; background:transparent}
@media(max-width:560px){ .ika .lessonlist .lrow{flex-wrap:wrap; row-gap:4px} }

/* v10 (2026-08-31, Nitant's lock): Focus reading — default on, dims all but the current section */
.ika .focus-btn{margin-left:8px; height:34px; padding:0 12px; flex:0 0 auto; display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:9px; background:var(--card); color:var(--muted); cursor:pointer; font:inherit; font-size:13px; font-weight:500}
.ika .focus-btn[aria-pressed="true"]{border-color:var(--accent); color:var(--accent)}
.ika .focus-btn:hover{color:var(--ink); border-color:var(--muted)}
.ika .fblk{transition:opacity .45s ease}
@media (prefers-reduced-motion: reduce){ .ika .fblk{transition:none} }
@media(min-width:900px){
  body.focuson .ika .article-body .fblk{opacity:.38}
  body.focuson .ika .article-body .fblk.lit{opacity:1}
}
@media print{ .ika .article-body .fblk{opacity:1 !important} .ika .focus-btn{display:none !important} }
@media(max-width:700px){ .ika .focus-btn{order:2; margin-left:auto; height:32px} .ika .focus-btn + .theme-btn{margin-left:8px} }

/* v8 (2026-08-31, Nitant's ask): faculty completion certificates */
.ika .certrow{display:flex; gap:14px; align-items:center; border:1px solid var(--line); border-radius:12px; background:var(--card); padding:12px 16px; margin:10px 0; flex-wrap:wrap}
.ika .certrow .crk{font-family:'Roboto Mono',Consolas,monospace; font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); min-width:86px}
.ika .certrow .crn{font-weight:500; flex:1; min-width:160px}
.ika .certrow .crp{font-family:'Roboto Mono',Consolas,monospace; font-size:12.5px; color:var(--muted)}
.ika .certrow.full{border-color:var(--ok)}
.ika .certrow.full .crp{color:var(--ok); font-weight:500}
.ika .certrow .crgo{font-size:13.5px; white-space:nowrap}
.ika .certform{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:18px 20px; margin:22px 0}
.ika .certform h2{margin-top:0; font-size:19px}
.ika .certform input{font:inherit; font-size:16px; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:9px 12px; width:min(360px,100%)}
.ika .certform .wrow label{min-width:0}
.ika .certcta{margin-top:14px}
.ika .certcta a{display:inline-block; border:1.5px solid var(--ok); color:var(--ok); border-radius:10px; padding:9px 16px; font-weight:500; text-decoration:none; font-size:14.5px}
.ika .certcta a:hover{background:var(--ok); color:var(--card)}
.ika .certificate{margin:26px 0}
.ika .cframe{border:3px solid var(--accent); border-radius:6px; background:var(--card); padding:clamp(26px,5vw,54px) clamp(18px,5vw,58px); text-align:center; position:relative}
.ika .cframe::before{content:""; position:absolute; inset:7px; border:1px solid var(--line); border-radius:3px; pointer-events:none}
.ika .cbrand{font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-weight:700; font-size:23px; display:flex; align-items:center; justify-content:center; gap:10px}
.ika .cbrand .clogo{height:34px; width:auto}
.ika .ctag{font-family:'Roboto Mono',Consolas,monospace; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-top:8px}
.ika .cpre{color:var(--muted); margin:26px 0 4px; font-size:15px}
.ika .cname{font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-weight:700; font-size:clamp(28px,4.6vw,42px); display:inline-block; border-bottom:2px solid var(--accent); padding:0 28px 8px; margin:6px 0 16px}
.ika .cbody{max-width:56ch; margin:0 auto; font-size:15px}
.ika .cmeta{display:flex; justify-content:center; gap:34px; flex-wrap:wrap; margin-top:30px; font-size:13px}
.ika .cmeta .cmk{display:block; font-family:'Roboto Mono',Consolas,monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.ika .csign{margin-top:26px; color:var(--muted); font-size:13px}
.ika .certactions{margin:18px 0}
@media print{
  body.certpage .ika .art-head,body.certpage .ika .certfacs,body.certpage .ika .certform,body.certpage .ika .certactions{display:none !important}
  body.certpage .ika .prose{max-width:none}
  body.certpage .ika .certificate{margin:0}
  body.certpage .ika .cframe{border-color:#8d1722}
}

/* v6 (2026-08-31, Nitant's ask): lesson lists as an expanded card GRID — hubs + home */
/* v9: use the glass — containers holding card grids widen, thumbs scale with the card */
.ika > .container:has(.lessongrid),.ika > .container:has(.fgrid){max-width:1400px}
/* v10: home rides one width rhythm — every home section widens; text keeps its measure */
.ika section.container{max-width:1400px}
.ika .hero h1{max-width:28ch}
.ika .notebox,.ika .strip{max-width:980px}
.ika .lessongrid{list-style:none; padding:0; margin:18px 0 30px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px; align-items:stretch}
.ika .lessongrid li{display:block}
.ika .lessongrid .lcard{display:flex; flex-direction:column; gap:9px; height:100%;
  border:1px solid var(--line); border-radius:14px; background:var(--card);
  padding:14px; text-decoration:none; color:var(--ink); box-shadow:var(--shadow)}
.ika .lessongrid a.lcard:hover{border-color:var(--accent)}
.ika .lessongrid a.lcard:hover .lct{color:var(--accent)}
.ika .lcthumb{display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/9.5; height:auto; min-height:140px;
  border:1px solid var(--line); border-radius:10px; background:var(--paper);
  overflow:hidden; padding:8px}
.ika .lcthumb svg,.ika .lcthumb img{width:100%; height:100%; object-fit:contain}
.ika .lcthumb .lmono{font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-weight:700;
  font-size:36px; color:var(--muted); opacity:.5}
.ika .lchead{display:flex; gap:7px; align-items:center; flex-wrap:wrap}
.ika .lchead .lid{font-family:'Roboto Mono',Consolas,monospace; font-size:12.5px;
  color:var(--accent); font-weight:500; margin-right:auto}
.ika .lct{font-family:'Roboto Condensed','Arial Narrow',Roboto,sans-serif; font-weight:700;
  font-size:18px; line-height:1.22}
.ika .lcd{color:var(--muted); font-size:13.5px; line-height:1.5; flex:1}
.ika .lessongrid .lcard.soon{opacity:.65}
.ika h3 + .lessongrid{margin-top:12px}
@media(max-width:560px){ .ika .lcthumb{min-height:110px} .ika .lessongrid{gap:12px} }

/* v5 (2026-08-31): hub lesson rows carry the lesson's own figure as a thumbnail */
.ika .lessonlist a.withthumb{display:flex; gap:16px; align-items:center}
.ika .lthumb{flex:0 0 150px; height:94px; border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden; display:flex; align-items:center; justify-content:center; padding:6px}
.ika .lthumb svg,.ika .lthumb img{width:100%; height:100%; object-fit:contain}
.ika .lthumb .lmono{font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-weight:700; font-size:28px; color:var(--muted); opacity:.55}
.ika .lbody{flex:1; min-width:0}
.ika .lbody .ldsc{padding-left:0}
@media(max-width:560px){
  .ika .lthumb{flex-basis:96px; height:64px; border-radius:8px; padding:4px}
  .ika .lessonlist a.withthumb{gap:11px}
}
.ika .qdonenote{color:var(--muted); font-size:12.5px; margin:14px 0 0}

/* glossary A–Z jump bar + filter (built by ui.js) */
.ika .gsticky{margin:18px 0 6px}
@media(min-width:701px){ .ika .gsticky{position:sticky; top:60px; z-index:30; background:var(--paper); padding:10px 0 12px; border-bottom:1px solid var(--line)} }
.ika .gbar{display:flex; flex-wrap:wrap; gap:5px; align-items:center}
.ika .gbar a{font-family:'Roboto Mono',Consolas,monospace; font-size:12.5px; min-width:27px; text-align:center; padding:4px 0; border:1px solid var(--line); border-radius:7px; text-decoration:none; color:var(--ink); background:var(--card)}
.ika .gbar a:hover{border-color:var(--accent); color:var(--accent)}
.ika .gbar a.off{opacity:.3; pointer-events:none}
.ika .gfilter{font:inherit; font-size:14.5px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:9px; padding:8px 12px; width:min(340px,100%); margin:10px 0 0; display:block}
.ika dl.gloss dt{scroll-margin-top:130px}

/* print: the page without the apparatus (A12 promises a printable page) */
@media print{
  .ika,:root[data-theme="dark"] .ika{
    --paper:#fff; --card:#fff; --ink:#111; --muted:#484f55; --line:#c9ccce; --soft:#f4f4f3;
    --accent:#8d1722; --accent-ink:#fff; --teal:#0b5b63; --teal-soft:#eef2f2;
    --amber:#6e5011; --amber-soft:#f6f1e3; --slate:#4c4180; --slate-soft:#efedf6; --ok:#1e5c22; --shadow:none}
  .ika .site-head,.ika .site-foot,.ika .readbar,.ika .totop,.ika .crumb,.ika .toc,.ika .pn,.ika .godeeper,.ika .widget,.ika .gsticky{display:none !important}
  .ika h2:has(+ p + .widget.quiz),.ika h2:has(+ p + .widget.quiz) + p{display:none !important}
  .ika article.container:has(> nav.toc){display:block; max-width:none}
  .ika{font-size:12pt}
  .ika .container{max-width:none; padding:0}
  .ika .article-body,.ika .prose,.ika dl.gloss,.ika .lead{max-width:none}
  .ika .art-head{padding-top:0}
  .ika figure,.ika .worked,.ika .callout,.ika .faq details,.ika .tblwrap{break-inside:avoid}
  .ika a{color:var(--ink)}
}

/* ---------- v11 (2026-09-06, Nitant: "implement both improvements") ---------- */
/* prerequisites line under the lead (built by build_learn.py from in-text references) */
.ika .prereq{font-size:13.5px; color:var(--muted); margin:10px 0 0; display:flex; gap:8px; flex-wrap:wrap; align-items:baseline}
.ika .prereq .pk{font-family:'Roboto Mono',Consolas,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase}
.ika .prereq a{color:var(--ink); text-decoration:none; border:1px solid var(--line); border-radius:999px; padding:2px 10px; font-size:13px; background:var(--card)}
.ika .prereq a:hover{border-color:var(--accent); color:var(--accent)}

/* glossary terms wrapped on first use (build-time): dotted underline, hover/focus tooltip */
.ika .gt{border-bottom:1px dotted var(--teal); cursor:help; position:relative; text-decoration:none; color:inherit}
.ika .gt:hover::after,.ika .gt:focus-visible::after{
  content:attr(data-def); position:absolute; left:0; top:calc(100% + 8px); z-index:35;
  width:min(360px,80vw); background:var(--card); color:var(--ink); border:1px solid var(--line);
  border-left:4px solid var(--teal); border-radius:0 10px 10px 10px; padding:9px 12px;
  font-size:13.5px; line-height:1.5; font-weight:400; box-shadow:0 6px 24px rgba(0,0,0,.14); white-space:normal}
.ika .gt:focus-visible{outline:2px solid var(--teal); outline-offset:1px; border-radius:3px}
@media(max-width:640px){ .ika .gt:hover::after,.ika .gt:focus-visible::after{left:auto; right:0; border-radius:10px 0 10px 10px} }

/* figures: tap-to-zoom lightbox (every figure) + phones keep dense SVGs legible by scrolling */
.ika figure.zoomable{cursor:zoom-in; position:relative}
.ika figure.zoomable .zoomhint{position:absolute; right:8px; top:8px; font:500 11px/1 'Roboto Mono',Consolas,monospace; letter-spacing:.06em; color:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 8px; opacity:.85; pointer-events:none}
@media(min-width:900px){ .ika figure.zoomable .zoomhint{display:none} .ika figure.zoomable:hover .zoomhint{display:block} }
.ika .lightbox{position:fixed; inset:0; z-index:200; background:rgba(12,14,16,.94); display:flex; flex-direction:column; padding:0}
.ika .lightbox[hidden]{display:none}
.ika .lightbox .lbbar{display:flex; align-items:center; gap:12px; padding:10px 14px; color:#e8e9ea; font-size:13.5px}
.ika .lightbox .lbbar .lbcap{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.85}
.ika .lightbox .lbbar button{font:inherit; font-size:13px; font-weight:500; color:#e8e9ea; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); border-radius:9px; padding:7px 12px; cursor:pointer}
.ika .lightbox .lbbar button:hover{background:rgba(255,255,255,.2)}
.ika .lightbox .lbview{flex:1; overflow:auto; -webkit-overflow-scrolling:touch; touch-action:pan-x pan-y pinch-zoom; padding:6px 14px 20px; display:flex; align-items:flex-start; justify-content:center}
.ika .lightbox .lbview > *{background:#fff; border-radius:8px; padding:10px}
.ika .lightbox .lbview svg,.ika .lightbox .lbview img{display:block; width:var(--lbw,1200px); max-width:none; height:auto}
.ika .lightbox .lbview svg text{font-family:Roboto,'Segoe UI',sans-serif}
@media(max-width:640px){
  /* a 660-unit viewBox shrunk to a phone drops 9 px labels to 4–5 px: keep the drawing wide and let it scroll */
  .ika .article-body figure{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .ika .article-body figure > svg{min-width:560px}
  .ika .article-body figure > img{min-width:640px}
  .ika .article-body figure figcaption{position:sticky; left:0}
}

/* "At site" checklists: print one card */
.ika .callout.atsite{position:relative}
.ika .printcard{font:500 11.5px/1 'Roboto Mono',Consolas,monospace; letter-spacing:.06em; color:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:5px 10px; cursor:pointer; margin-top:8px}
.ika .printcard:hover{color:var(--teal); border-color:var(--teal)}
body.print-card > *{display:none !important}
body.print-card > .printsheet{display:block !important}
.printsheet{padding:24px; font-family:Roboto,'Segoe UI',sans-serif; color:#111; background:#fff}
.printsheet .psk{font-family:'Roboto Mono',Consolas,monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#0b5b63}
.printsheet h1{font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-size:24px; margin:6px 0 14px}
.printsheet ul{padding-left:0; list-style:none}
.printsheet li{border:1px solid #c9ccce; border-radius:8px; padding:10px 12px 10px 40px; margin:8px 0; position:relative; font-size:14.5px; line-height:1.5}
.printsheet li::before{content:""; position:absolute; left:12px; top:12px; width:16px; height:16px; border:1.5px solid #333; border-radius:3px}
.printsheet .psf{margin-top:18px; font-size:12px; color:#484f55}

/* numeric ("compute it") quiz questions */
.ika .qnum{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:8px 0}
.ika .qnum input{font:inherit; font-size:16px; font-family:'Roboto Mono',Consolas,monospace; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:9px 12px; width:160px}
.ika .qnum input.right{border-color:var(--ok); box-shadow:inset 0 0 0 1px var(--ok)}
.ika .qnum input.wrong{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.ika .qnum .qunit{font-family:'Roboto Mono',Consolas,monospace; font-size:13.5px; color:var(--muted)}
.ika .qtype{font-family:'Roboto Mono',Consolas,monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--teal); margin-left:8px}

/* faculty test on the certificate page */
.ika .certtest{margin:16px 0}
.ika .certtest .wtitle{font-size:17px}
.ika .certverdict{border-left:4px solid var(--accent); background:var(--soft); border-radius:0 10px 10px 0; padding:11px 14px; font-size:14.5px; margin:12px 0}
.ika .certverdict.pass{border-left-color:var(--ok)}

/* site search */
.ika .searchbox{display:flex; gap:10px; margin:18px 0; flex-wrap:wrap}
.ika .searchbox input{font:inherit; font-size:17px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 16px; flex:1 1 320px; min-width:0}
.ika .sres{list-style:none; padding:0; margin:14px 0; display:grid; gap:10px}
.ika .sres li{border:1px solid var(--line); border-radius:12px; background:var(--card)}
.ika .sres a{display:block; padding:12px 16px; text-decoration:none; color:var(--ink)}
.ika .sres a:hover{background:var(--soft); border-radius:12px}
.ika .sres .sk{font-family:'Roboto Mono',Consolas,monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.ika .sres .st{font-weight:500; font-size:16px; margin:2px 0}
.ika .sres .sd{color:var(--muted); font-size:13.5px; line-height:1.5}
.ika .sres mark{background:var(--amber-soft); color:inherit; border-radius:3px; padding:0 2px}
.ika .snone{color:var(--muted); font-size:14.5px}
.ika nav.top a.navsearch{display:inline-flex; align-items:center; gap:6px}

/* practice-plant living card + reading paths */
.ika .ledger{width:100%; border-collapse:collapse; font-size:14.5px; min-width:640px}
.ika .ledger td.lv{font-family:'Roboto Mono',Consolas,monospace; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:500}
.ika .ledger td.lu a,.ika .ledger td.ld a{display:inline-block; margin:0 6px 4px 0; font-family:'Roboto Mono',Consolas,monospace; font-size:12px; border:1px solid var(--line); border-radius:999px; padding:1px 8px; text-decoration:none; color:var(--ink); background:var(--card)}
.ika .ledger td.ld a{border-color:var(--accent); color:var(--accent)}
.ika .ledger td a:hover{border-color:var(--accent); color:var(--accent)}
.ika .ledger .lgroup td{background:var(--soft); font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-weight:700; font-size:15px; padding-top:12px}
.ika .pathgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin:24px 0}
.ika .path{border:1px solid var(--line); border-radius:14px; background:var(--card); padding:18px 20px; box-shadow:var(--shadow)}
.ika .path h2{margin:0 0 4px; font-size:22px}
.ika .path .pwho{color:var(--muted); font-size:14px; margin:0 0 12px}
.ika .path ol{padding-left:0; list-style:none; margin:0; counter-reset:step}
.ika .path li{counter-increment:step; display:flex; gap:12px; align-items:baseline; padding:7px 0; border-top:1px solid var(--line)}
.ika .path li::before{content:counter(step); font-family:'Roboto Mono',Consolas,monospace; font-size:11.5px; color:var(--muted); min-width:20px}
.ika .path li a{text-decoration:none; color:var(--ink); font-weight:500}
.ika .path li a:hover{color:var(--accent)}
.ika .path li .pid{font-family:'Roboto Mono',Consolas,monospace; font-size:12px; color:var(--accent); min-width:30px}
.ika .path li .pwhy{display:block; color:var(--muted); font-size:13px; font-weight:400; margin-top:2px}
.ika .path .pfoot{margin-top:12px; font-size:13px; color:var(--muted)}

/* glossary: Hindi column (draft — under review) */
.ika dl.gloss dd .hi{display:block; font-size:14px; color:var(--muted); margin-top:3px}
.ika dl.gloss dd .hi b{font-weight:500; color:var(--ink)}
@media print{ .ika .lightbox,.ika .printcard,.ika .zoomhint,.ika .searchbox{display:none !important} .ika .gt{border-bottom:none} }

/* ---------- v12 (2026-09-06, Nitant: "hero section and heading is not looking good … more premium, inline with the brand") ---------- */
/* header: one row on desktop, tagline only when there is room */
@media(min-width:1100px){ .ika nav.top{flex-wrap:nowrap} .ika nav.top a{padding:6px 9px} }
@media(max-width:1250px){ .ika .brand .btag{display:none} }
/* hero band: paper + a faint drawing-office grid + two soft brand washes, fading out at the bottom */
.ika .hero-band{position:relative; isolation:isolate; border-bottom:1px solid var(--line); overflow:hidden;
  background:
    radial-gradient(55% 75% at 88% 10%, color-mix(in srgb, var(--teal) 11%, transparent), transparent 70%),
    radial-gradient(45% 60% at 4% 100%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%),
    var(--paper)}
.ika .hero-band::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
                   linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size:36px 36px; background-position:center top;
  -webkit-mask-image:linear-gradient(#000 45%, transparent 100%); mask-image:linear-gradient(#000 45%, transparent 100%)}
.ika .hero{padding:56px 0 52px}
.ika .hero-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:56px; align-items:center}
.ika .hero-eyebrow{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.ika .hero-eyebrow .dot{width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.7}
.ika .hero-eyebrow .tag{color:var(--muted); letter-spacing:.1em}
.ika .hero h1{max-width:21ch; font-size:clamp(36px,4.1vw,58px); line-height:1.04; letter-spacing:-.012em; margin:16px 0 0}
.ika .hero h1 em{font-style:normal; color:var(--accent)}
.ika .hero .sub{font-size:18.5px; line-height:1.6; color:var(--muted); max-width:56ch; margin:20px 0 0}
.ika .hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.ika .hero-cta .cta{margin:0; display:inline-flex; align-items:center; gap:10px; padding:13px 24px; border-radius:12px; font-size:16px;
  box-shadow:0 10px 24px -12px color-mix(in srgb, var(--accent) 75%, transparent); transition:transform .15s ease, box-shadow .15s ease, background .15s ease}
.ika .hero-cta .cta:hover{transform:translateY(-1px); box-shadow:0 14px 28px -12px color-mix(in srgb, var(--accent) 80%, transparent); filter:none}
.ika .hero-cta .cta .arr{transition:transform .15s ease} .ika .hero-cta .cta:hover .arr{transform:translateX(3px)}
.ika .hero-cta .cta.ghost{box-shadow:none; background:var(--card); border:1px solid color-mix(in srgb, var(--teal) 55%, var(--line))}
.ika .hero-cta .cta.ghost:hover{background:var(--teal-soft); border-color:var(--teal); box-shadow:none}
.ika .hero-facts{display:flex; flex-wrap:wrap; gap:10px 0; list-style:none; padding:0; margin:32px 0 0; color:var(--muted); font-size:13.5px}
.ika .hero-facts li{display:flex; align-items:baseline; gap:7px; padding:0 18px 0 0; margin-right:18px; border-right:1px solid var(--line)}
.ika .hero-facts li:last-child{border-right:0; margin-right:0; padding-right:0}
.ika .hero-facts b{font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-weight:700; font-size:22px; color:var(--ink); line-height:1}
.ika .hero-visual{min-width:0}
.ika .hero-widget{margin:0; padding:18px 20px 14px; border-radius:18px; background:var(--card);
  box-shadow:0 30px 60px -30px rgba(20,25,30,.35), 0 1px 3px rgba(20,25,30,.07); border-color:color-mix(in srgb, var(--line) 70%, transparent)}
.ika .hero-widget .wtitle{font-size:16px} .ika .hero-widget .wnote{display:none}
.ika .hero-widget .wrow{margin:8px 0 0} .ika .hero-widget .wrow .mono{font-size:13px}
.ika .hero-cap{font-size:12.5px; color:var(--muted); margin:12px 6px 0; text-align:center}
/* the 100° · 200° · 300° strip */
.ika .levels-wrap{margin-top:34px}
.ika .levels{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.ika .levels li{display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:14px; align-items:baseline;
  border:1px solid var(--line); border-radius:14px; background:var(--card); padding:14px 18px; box-shadow:var(--shadow)}
.ika .levels .deg{grid-row:1 / span 2; font-family:'Roboto Mono',Consolas,monospace; font-weight:500; font-size:22px; color:var(--accent); letter-spacing:.02em; align-self:center}
.ika .levels .lname{font-family:'Roboto Condensed','Arial Narrow',sans-serif; font-weight:700; font-size:18px}
.ika .levels .ldesc{color:var(--muted); font-size:13.5px; line-height:1.45}
.ika .levels-note{color:var(--muted); font-size:14px; margin:14px 4px 0; max-width:none}
@media(max-width:1100px){
  .ika .hero-grid{grid-template-columns:1fr; gap:34px}
  .ika .hero h1{max-width:20ch}
  .ika .hero-visual{max-width:640px}
  .ika .levels{grid-template-columns:1fr}
}
@media(max-width:640px){
  .ika .hero{padding:34px 0 36px}
  .ika .hero h1{font-size:clamp(32px,9vw,40px)}
  .ika .hero .sub{font-size:17px}
  .ika .hero-cta .cta{width:100%; justify-content:center}
  .ika .hero-facts li{border-right:0; margin-right:0; padding-right:0; flex:1 1 45%}
  .ika .hero-eyebrow .dot{display:none} .ika .hero-eyebrow .tag{flex-basis:100%}
  .ika .hero-widget{padding:14px 12px 10px}
}

/* the academy inside the www page */
.ika-band{height:calc(var(--hdr-h,64px) + 8px);background:var(--ink,#070915)}
.ika{font-synthesis:weight style small-caps;font-kerning:auto;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto}
.ika .site-head{position:relative;top:auto}
.ika h2,.ika h3{scroll-margin-top:0}
.ika dl.gloss dt{scroll-margin-top:64px}
@media(min-width:701px){.ika .gsticky{top:calc(var(--hdr-h,64px) + 8px)}}
.ika .totop{bottom:calc(18px + var(--dock-space,0px))}
/* www fonts.css sets every .eyebrow in its mono at (0,3,0) - give the academy's eyebrow its own face back */
:root:root .ika .eyebrow{font-family:'Roboto Mono',Consolas,monospace;font-stretch:normal;letter-spacing:.14em}
@media print{.ika-band,.hdr,.dock,.ftr,.menu8,.skip-link{display:none !important}body{padding-bottom:0 !important}}