:root{color-scheme:light;--ink:#263c32;--pine:#254838;--paper:#f8f8f0;--line:#dbe2d4;--sub:#506758;--accent:#dfebd6}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 system-ui,sans-serif}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.45;cursor:default}a{color:inherit}.frame{width:min(1020px,calc(100% - 48px));margin:auto}header{border-bottom:1px solid var(--line)}.mast{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:12px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font:29px Georgia,serif}.brand svg{width:37px;padding:5px;background:var(--pine);border-radius:9px;fill:none;stroke:#e9f1df;stroke-width:2.8;stroke-linecap:round}.pill{font-size:12px;border:1px solid var(--line);border-radius:99px;padding:4px 11px;color:var(--sub)}.hero{position:relative;margin-top:34px;background:#e9efdf;border:1px solid #d8e3cf;border-radius:23px;padding:37px 42px 30px;overflow:hidden}.hero-copy,form,.examples{position:relative;z-index:1}.kicker{font-size:10px;letter-spacing:.18em;font-weight:750;color:var(--sub);margin:0 0 8px}.hero h1{font-size:clamp(26px,4vw,44px);letter-spacing:-.045em;line-height:1.2;margin:0 0 12px}.intro{margin:0 0 24px;color:var(--sub);font-size:15px}.ornament{position:absolute;right:24px;top:16px;width:min(29%,280px);stroke:#9bb09a;stroke-opacity:.68}.ornament .mark{fill:#53725b;stroke:none}form{display:flex;align-items:center;gap:13px;max-width:720px;background:#fff;border-radius:12px;border:1px solid #cbd8c6;padding:6px 6px 6px 15px}form svg{width:21px;flex:none;fill:none;stroke:var(--sub);stroke-width:1.7;stroke-linecap:round}input{min-width:0;flex:1;outline:none;border:0;color:var(--ink);background:transparent}form:focus-within{outline:2px solid #78947a}form button{background:var(--pine);color:white;border:0;border-radius:8px;padding:8px 20px}.examples{margin-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--sub);font-size:12px}.examples button,.pagination button{background:#fff;border:1px solid var(--line);color:var(--pine);border-radius:7px;padding:4px 10px}.catalog{margin-top:35px}.catalog-head{display:flex;justify-content:space-between;align-items:end;gap:10px;margin-bottom:16px}.catalog h2{font-size:23px;line-height:1.25;margin:0}.catalog-head #count{margin:0;color:var(--sub);font-size:13px;text-align:right}nav{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:15px}nav button{padding:4px 9px;min-width:29px;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--sub);font-size:12px}nav button[aria-pressed=true]{background:var(--pine);color:#fff;border-color:var(--pine)}#results{border:1px solid var(--line);background:#fff;border-radius:13px;overflow:hidden}.entry{display:grid;grid-template-columns:minmax(140px,32%) 1fr;gap:18px;padding:17px 22px;border-top:1px solid var(--line)}.entry:first-child{border-top:0}.entry h3{font:600 20px/1.25 Georgia,serif;overflow-wrap:anywhere;margin:0}.entry p{margin:0;overflow-wrap:anywhere;white-space:pre-line}.entry p+p{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}.empty{padding:22px;text-align:center;color:var(--sub)}.pagination{margin:16px 0 0;display:flex;justify-content:space-between;align-items:center;font-size:13px}.pagination[hidden]{display:none}footer{margin-top:35px!important;border-top:1px solid var(--line);padding:17px 0 25px;display:flex;justify-content:space-between;gap:12px;color:var(--sub);font-size:12px}button:focus-visible,a:focus-visible{outline:2px solid #52745c;outline-offset:3px}@media(max-width:600px){.frame{width:calc(100% - 28px)}.mast{min-height:62px}.hero{margin-top:20px;padding:24px 16px 20px}.ornament{opacity:.35;top:14px;right:7px}.hero h1{letter-spacing:0}.intro{font-size:13px}form{gap:7px;padding-left:9px}form button{padding:6px 12px}.catalog{margin-top:25px}.entry{grid-template-columns:1fr;gap:7px;padding:13px 15px}.entry h3{font-size:18px}.entry p{font-size:14px}}

.brand svg { flex: 0 0 37px; }
.brand-title { font-size: clamp(16px, 2.2vw, 24px); line-height: 1.15; }
.brand-title small { display: block; margin-top: 4px; color: var(--sub); font: 12px/1.25 system-ui, sans-serif; }
.mast .pill { flex-shrink: 0; }
.hero-copy { max-width: 72%; }

@media (max-width: 600px) {
  .mast { padding-block: 10px; }
  .mast .pill { display: none; }
  .hero-copy { max-width: 100%; }
}

:root {
  --page-gutter: max(22px, calc((100% - 1370px) / 2));
  --media-width: clamp(205px, 24vw, 312px);
  --media-gap: 22px;
}

.frame {
  width: min(1020px, calc(100% - 2 * var(--page-gutter) - var(--media-width) - var(--media-gap)));
  margin-left: var(--page-gutter);
  margin-right: 0;
}

.media-dock {
  position: fixed;
  top: 15px;
  right: var(--page-gutter);
  z-index: 5;
  width: var(--media-width);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px;
  background: #fff;
  box-shadow: 0 5px 18px #25483812;
}
.media-heading {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 2px 7px;
  font-size: 12px;
  font-weight: 700;
}
.media-heading a { text-decoration: none; }
.media-heading a:hover { text-decoration: underline; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #b94d44; }
.media-screen { aspect-ratio: 16 / 9; background: #1b2b24; border-radius: 7px; overflow: hidden; }
.media-screen iframe { display: block; width: 100%; height: 100%; border: 0; }
.media-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 8px; }
.media-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px;
  border-radius: 5px;
  background: #edf3e9;
  padding: 5px 7px;
  color: var(--pine);
  font-size: 12px;
  text-decoration: none;
}
.media-links a:hover { background: var(--accent); text-decoration: underline; }

@media (max-width: 960px) {
  .mast .pill { display: none; }
}

@media (max-width: 720px) {
  :root {
    --page-gutter: 14px;
    --media-width: clamp(132px, 39vw, 170px);
    --header-height: calc(var(--media-width) * .5625 + 53px);
  }
  html { scroll-padding-top: calc(var(--header-height) + 10px); }
  .frame { width: calc(100% - 2 * var(--page-gutter)); margin-inline: var(--page-gutter); }
  header { position: sticky; top: 0; z-index: 4; background: var(--paper); }
  .mast { width: calc(100% - 2 * var(--page-gutter) - var(--media-width) - 10px); min-height: var(--header-height); }
  .brand { gap: 7px; }
  .brand svg { width: 28px; flex-basis: 28px; }
  .brand-title { font-size: clamp(13px, 3.7vw, 19px); }
  .brand-title small { font-size: 10px; }
  .media-dock { top: 6px; padding: 4px; border-radius: 8px; }
  .media-heading { padding: 0 2px 3px; font-size: 10px; }
  .media-screen { border-radius: 4px; }
  .media-links { gap: 3px; padding-top: 4px; }
  .media-links a { padding: 3px 4px; font-size: 10px; }
}

.footer-credit { display: grid; justify-items: start; gap: 8px; }
.metrika-informer { display: inline-block; }
.metrika-informer img { display: block; width: 88px; height: 31px; border: 0; }

.term-card-trigger {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: #b0c5aa;
  text-underline-offset: .18em;
  overflow-wrap: anywhere;
}
.term-card-trigger:hover { text-decoration-color: currentColor; }
.term-card {
  box-sizing: border-box;
  width: min(650px, calc(100% - 28px));
  max-height: min(82dvh, 780px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 65px #19352e35;
  overscroll-behavior: contain;
}
.term-card::backdrop { background: #1528209c; }
.term-card-content { padding: clamp(22px, 5vw, 40px); }
.term-card-controls {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: flex-end;
  margin: -9px -9px -30px 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}
.term-card-controls:focus-within { outline: none; }
.term-card-controls button {
  width: 36px;
  height: 36px;
  padding: 0;
  background: #e8efe2;
  color: var(--pine);
  font-size: 24px;
  line-height: 1;
  pointer-events: auto;
}
.term-card h2 {
  margin: 10px 35px 20px 0;
  font: 600 clamp(27px, 5vw, 43px)/1.16 Georgia, serif;
  overflow-wrap: anywhere;
}
.term-card-label { color: var(--sub); font-size: 13px; font-weight: 700; margin: 0 0 8px; }
#term-card-meanings {
  padding: clamp(14px, 3vw, 22px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-size: clamp(16px, 2.4vw, 19px);
  line-height: 1.8;
  overflow-wrap: anywhere;
}
#term-card-meanings p { margin: 0; white-space: pre-line; }
#term-card-meanings p + p { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }