.kh{padding-block:clamp(56px,8vw,96px);--ink-link:#000C0D}
.kh sub,.kh sup{font-size:.72em;line-height:0}
.kh-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.kh-head{margin-bottom:clamp(32px,4vw,48px)}
.kh h1{font-size:clamp(36px,5vw,60px);font-weight:800;letter-spacing:-.03em}
.kh-head h1,.kh-letter{
  --head-grad:var(--grad-head);
  width:fit-content;
  padding-block:.04em .14em;
  margin-block:-.04em -.14em;
  padding-inline-end:.08em;
  margin-inline-end:-.08em;
  color:var(--teal-deep);
}
.kh-head h1{position:relative}
.kh-lede{font-size:clamp(18px,1.15vw,20px);line-height:1.6;color:var(--ink-soft);max-width:56ch;margin-top:20px;text-wrap:balance}

.kh-search{position:relative;max-width:460px;margin-top:32px}
.kh-search[hidden]{display:none}
.kh-search__icon{
  position:absolute;left:18px;top:50%;transform:translateY(-50%);
  color:var(--teal);pointer-events:none;
  transition:transform .5s var(--ease),color .3s var(--ease);
}
.kh-search:focus-within .kh-search__icon{transform:translateY(-50%) rotate(-12deg) scale(1.1);color:var(--accent-deep)}
.kh-search__input{
  width:100%;
  font:inherit;font-size:16px;color:var(--ink);
  background:#fff;
  border:1.5px solid var(--rule-strong);
  border-radius:999px;
  padding:13px 52px 13px 48px;
  transition:border-color .3s var(--ease),box-shadow .4s var(--ease);
}
.kh-search__input::placeholder{color:var(--ink-faint);opacity:1}
.kh-search__input:hover{border-color:var(--mid)}
.kh-search__input:focus-visible{
  outline:none;border-radius:999px;border-color:transparent;
  background:linear-gradient(#fff,#fff) padding-box,linear-gradient(118deg,var(--teal) 0%,var(--mid) 60%,var(--accent) 100%) border-box;
  box-shadow:0 0 0 4px rgba(22,94,99,.1),0 10px 30px rgba(22,94,99,.08);
}
.kh-search__key{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;
  min-width:24px;height:24px;padding:0 6px;
  border:1px solid var(--rule-strong);border-radius:7px;
  background:var(--sage-soft);
  font-family:var(--display);font-size:12px;font-weight:600;line-height:1;
  color:var(--ink-faint);
  pointer-events:none;
  transition:opacity .3s var(--ease);
}
.kh-search__input:focus,.kh-search__input:not(:placeholder-shown){padding-right:20px}
.kh-search__input:focus ~ .kh-search__key,.kh-search__input:not(:placeholder-shown) ~ .kh-search__key{opacity:0}
@media (hover:none),(pointer:coarse){
  .kh-search__key{display:none}
  .kh-search__input{padding-right:20px}
}
.kh-status{margin:12px 0 0 20px;font-size:14px;color:var(--ink-soft)}
.kh-status:empty{display:none}

.kh-az{
  display:grid;
  grid-template-columns:repeat(26,minmax(0,1fr));
  gap:2px;
  background:var(--sage-soft);
  border-radius:var(--radius);
  padding:8px;
  margin-bottom:clamp(20px,2.4vw,32px);
}
.kh-az a,.kh-az span{
  display:grid;place-items:center;
  height:40px;
  border-radius:8px;
  font-family:var(--display);font-size:15px;font-weight:600;
  text-decoration:none;
}
.kh-az a{position:relative;color:var(--teal);transition:background-color .3s var(--ease),transform .2s var(--ease)}
.kh-az a::after{
  content:"";position:absolute;left:35%;right:35%;bottom:7px;height:1.5px;border-radius:1px;
  background:var(--accent);
  transform:scaleX(0);
  transition:transform .45s var(--ease);
}
.kh-az a:hover{background:#fff}
.kh-az a:active{transform:scale(.94)}
@media (hover:hover){
  .kh-az a:hover::after{transform:scaleX(1)}
}
.kh-az span{color:rgba(51,51,51,.3)}

.kh-group{
  display:grid;
  grid-template-columns:clamp(64px,10vw,132px) minmax(0,1fr);
  column-gap:clamp(20px,3vw,40px);
  padding-block:clamp(18px,2vw,24px) clamp(20px,2.5vw,28px);
  border-top:1px solid var(--rule);
  scroll-margin-top:84px;
}
.kh-group[hidden],.kh-entry[hidden]{display:none}
.kh-letter{
  position:sticky;top:100px;align-self:start;
  font-size:clamp(48px,6vw,80px);font-weight:800;
  letter-spacing:-.04em;line-height:.9;
}

.kh-list{margin:-16px 0 0;max-width:74ch}
.kh-entry{position:relative;padding:16px;margin-inline:-16px;border-radius:var(--radius);scroll-margin-top:96px}
.kh-entry + .kh-entry::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:var(--rule)}
.kh-entry--see{padding-block:10px}
.kh-entry--see:first-child{padding-top:16px}
.kh-entry:not(.kh-entry--see) + .kh-entry--see{padding-top:14px}
.kh-entry--see:has(+ .kh-entry:not(.kh-entry--see)){padding-bottom:14px}
@keyframes kh-lit{0%,45%{background-color:var(--sage-soft)}100%{background-color:transparent}}
@keyframes kh-lit-line{0%,45%{opacity:0}100%{opacity:1}}
.kh-entry.is-lit{animation:kh-lit 3.5s ease-in-out both}
.kh-entry.is-lit::before,.kh-entry.is-lit + .kh-entry::before{animation:kh-lit-line 3.5s ease-in-out both}
.kh-entry dd{margin:0}
.kh-term{
  font-family:var(--display);font-weight:600;
  font-size:clamp(17px,1.3vw,19px);letter-spacing:-.012em;line-height:1.35;
  color:var(--ink);
}
a.kh-term{
  color:var(--teal);
  text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:4px;text-decoration-color:rgba(22,94,99,.3);
  transition:text-decoration-color .2s ease;
}
a.kh-term:hover{text-decoration-color:var(--accent)}
.kh-entry--see .kh-term{font-weight:400;font-size:15px;letter-spacing:0;line-height:1.5;color:var(--ink-faint)}
.kh-entry .kh-short{margin-top:6px;font-size:15.5px;line-height:1.65;color:var(--ink-soft)}
.kh-entry--see .kh-short{margin-top:0;font-size:14.5px;line-height:1.5}
.kh-aka,.kh-entry .kh-aka{margin-top:2px;font-size:13px;line-height:1.5;color:var(--ink-faint)}
.kh-name{font-weight:500;color:var(--ink)}

.kh-entry--see a,.kh-crumbs a,.kh-side a,.kh-toc a{
  color:var(--teal);font-weight:500;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:rgba(22,94,99,.35);
}
.kh-entry--see a:hover,.kh-crumbs a:hover,.kh-side a:hover,.kh-toc a:hover{text-decoration-color:var(--teal)}

.kh-xref{
  color:var(--ink-link);
  text-decoration:none;
  transition:color .2s ease;
}
.kh-xref:hover{color:var(--teal)}

.kh-crumbs ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--ink-faint)}
.kh-crumbs li + li::before{content:"/";margin-right:8px;color:var(--mid)}
.kh-crumbs a{text-decoration:none}

.kh-art__head{margin:clamp(18px,2.2vw,26px) 0 clamp(28px,3.4vw,44px)}
.kh-art__head h1{font-size:clamp(34px,4.6vw,56px);max-width:22ch}
.kh-art__head .kh-aka{margin-top:10px;font-size:14px}
.kh-art__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  grid-template-areas:"main side" "cite side";
  column-gap:clamp(40px,6vw,88px);
  align-items:start;
}
.kh-art__main{grid-area:main;max-width:68ch}
.kh-def{
  margin:0;
  padding-left:22px;
  border-left:3px solid var(--accent);
  font-size:clamp(19px,1.45vw,22px);line-height:1.55;color:var(--ink);
}
.kh-toc{
  width:fit-content;max-width:100%;
  margin-top:clamp(28px,3.4vw,40px);
  padding:18px 24px 18px 22px;
  border:1px solid var(--rule-strong);
  border-radius:var(--radius);
}
.kh-toc h2{font-size:13px;font-weight:600;letter-spacing:0;margin-bottom:6px}
.kh-toc ol{margin:0;padding-left:20px;font-size:15px;line-height:1.75;color:var(--ink-faint)}
.kh-body{margin-top:clamp(28px,3.4vw,40px)}
.kh-body > :last-child{margin-bottom:0}
.kh-body strong{font-weight:600;color:var(--ink)}
.kh-body h2[id],.kh-refs li[id]{scroll-margin-top:100px}
.kh .kh-body li{margin-block:0}
.kh-note,.kh-aito{margin:28px 0;padding:20px 22px;background:var(--sage-soft);border-radius:var(--radius)}
.kh-aito{border-left:3px solid var(--teal);border-radius:0 var(--radius) var(--radius) 0}
.kh-note > :last-child,.kh-aito > :last-child{margin-bottom:0}
.kh-body .kh-formula{
  margin:24px 0;padding:18px 22px;
  border:1.5px solid var(--rule-strong);border-radius:var(--radius);
  font-family:var(--display);font-weight:600;font-size:clamp(16px,1.3vw,18px);
  color:var(--teal);text-align:center;
}
.kh-fig{margin:28px 0}
.kh-fig svg,.kh-fig img{width:100%;height:auto;border-radius:12px}
.kh-fig figcaption{margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--ink-faint)}
.kh-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:28px 0}
.kh-figs .kh-fig{margin:0}
.kh-table{margin:28px 0;overflow-x:auto}
.kh-table:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
.kh-table table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.kh-table caption{caption-side:bottom;margin-top:10px;text-align:left;font-size:13.5px;color:var(--ink-faint)}
.kh-table th,.kh-table td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--rule)}
.kh-table thead th{font-family:var(--display);font-size:14px;font-weight:600;color:var(--teal);background:var(--sage-soft);border-bottom:1.5px solid var(--rule-strong)}
.kh-table tbody th{font-weight:400}
.kh-table tfoot th,.kh-table tfoot td{font-weight:600;color:var(--ink);border-top:1.5px solid var(--rule-strong);border-bottom:0}
.kh-table .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.kh-quote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--mid)}
.kh-quote blockquote{margin:0;font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:var(--ink)}
.kh-quote blockquote > :last-child{margin-bottom:0}
.kh-quote figcaption{margin-top:10px;font-size:14px;color:var(--ink-faint)}
.kh-cite{grid-area:cite;max-width:68ch;margin-top:clamp(44px,5vw,64px);padding-top:22px;border-top:1px solid var(--rule)}
.kh-cite h2{font-size:13.5px;font-weight:600;letter-spacing:0;margin-bottom:8px}
.kh-cite p{font-size:13px;line-height:1.6;color:var(--ink-faint);overflow-wrap:anywhere}

.kh-side{
  grid-area:side;
  position:sticky;top:100px;
  background:var(--sage-soft);
  border-radius:var(--radius);
  padding:clamp(22px,2.2vw,28px);
}
.kh-side dl{margin:0}
.kh-side dl > div + div{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule)}
.kh-side dt{font-family:var(--display);font-size:13px;font-weight:600;color:var(--teal);margin-bottom:5px}
.kh-side dd{margin:0;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.kh-side ul{margin:0;padding:0;list-style:none}

.kh-more{margin-top:clamp(48px,6vw,80px)}
.kh-more h2{font-size:clamp(19px,1.8vw,23px);margin-bottom:16px}
.kh-more ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.kh-more a{
  display:flex;flex-direction:column;gap:6px;height:100%;
  padding:20px 22px;
  border:1px solid var(--rule-strong);
  border-radius:var(--radius);
  text-decoration:none;
  transition:border-color .2s ease,background-color .2s ease;
}
.kh-more a:hover{border-color:var(--teal);background:var(--sage-soft)}
.kh-more__term{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--teal)}
.kh-more__def{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;font-size:14px;line-height:1.55;color:var(--ink-soft)}

@media (max-width:900px){
  .kh-az{grid-template-columns:repeat(13,minmax(0,1fr))}
  .kh-art__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "side" "cite"}
  .kh-side{position:static;margin-top:40px}
}
@media (max-width:600px){
  .kh-az{grid-template-columns:repeat(9,minmax(0,1fr))}
  .kh-group{grid-template-columns:minmax(0,1fr)}
  .kh-letter{position:relative;top:0;font-size:44px;margin-bottom:18px}
  .kh-figs{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .kh-entry.is-lit{animation:none;background:var(--sage-soft)}
  .kh-entry.is-lit::before,.kh-entry.is-lit + .kh-entry::before{animation:none;opacity:0}
}