:root {
  background: #101418;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 13px;
}
.site-header nav > a:not(.button) {
  text-decoration: none;
  color: #aeb8be;
}

.glossary-intro {
  padding: 0 0 40px;
}
h1 {
  font-size: clamp(44px, 6.5vw, 78px);
  letter-spacing: -0.055em;
  margin: 12px 0 18px;
}
h1 span {
  color: #c4dfa0;
}
.glossary-intro .intro {
  color: #e6e9e4;
  font-size: 24px;
  margin-bottom: 10px;
}
.intro-detail {
  font-size: 15px;
  line-height: 1.8;
}
.scope {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 28px;
  color: #8e9ba4;
  font:
    11px ui-monospace,
    monospace;
  letter-spacing: 0.05em;
}
.scope span {
  color: #c4dfa0;
  border: 1px solid #3c4a35;
  border-radius: 4px;
  padding: 5px 8px;
}
.glossary-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 48px;
  border-top: 1px solid #303b42;
}
.term-index {
  position: sticky;
  top: 28px;
  align-self: start;
  padding-top: 32px;
}
.term-index nav > p {
  font:
    10px ui-monospace,
    monospace;
  letter-spacing: 0.12em;
  color: #87969f;
  margin-bottom: 22px;
}
.term-index nav a {
  display: flex;
  gap: 13px;
  padding: 10px 0;
  font-size: 13px;
  text-decoration: none;
  color: #c7d0d4;
}
.term-index nav a span {
  font:
    10px ui-monospace,
    monospace;
  color: #74838b;
  padding-top: 5px;
}
.term-index nav a:hover,
.term-index nav a:focus-visible {
  color: #c4dfa0;
}
.back-top {
  display: block;
  margin-top: 26px;
  font-size: 11px;
  color: #87969f;
  text-decoration: none;
}
.term {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.95fr);
  gap: 34px;
  padding: 40px 0;
  border-bottom: 1px solid #29343c;
  scroll-margin-top: 24px;
}
.term:last-child {
  border-bottom: 0;
}
.term h2 {
  font-size: 30px;
  letter-spacing: -0.035em;
  line-height: 1.2;
  margin-bottom: 10px;
}
.term h2 a {
  text-decoration: none;
  color: inherit;
}
.term-tagline {
  font-size: 17px;
  color: #dce3e4;
  margin-bottom: 20px;
}
.term-copy > p:not(.term-tagline) {
  font-size: 14px;
  line-height: 1.8;
}
.notice {
  border-left: 2px solid #617550;
  padding-left: 16px;
  margin-top: 26px;
}
.notice h3 {
  font-size: 12px;
  color: #c4dfa0;
  margin: 0 0 7px;
}
.notice p {
  font-size: 13px;
  line-height: 1.75;
  margin: 0;
  color: #9caab2;
}
figure {
  margin: 0;
  align-self: center;
  min-width: 0;
  padding: 20px;
  background: #141c22;
  border: 1px solid #2b3943;
  border-radius: 10px;
}
figcaption {
  color: #8d9da8;
  font:
    9px ui-monospace,
    monospace;
  letter-spacing: 0.12em;
  margin-bottom: 20px;
}
.board {
  max-width: 280px;
  margin: 0 auto;
  border: 1px solid #3a4954;
  border-radius: 3px;
  overflow: hidden;
}
.board svg {
  display: block;
  width: 100%;
  height: auto;
}
.diagram-caption {
  font-size: 11px;
  color: #a5b5bf;
  line-height: 1.6;
  margin: 14px 0 0;
  min-height: 35px;
}
.key-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 5px;
}
.green {
  background: #c4dfa0;
}
.red {
  background: #e28d93;
}
.piece-sheet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px 14px;
  padding: 10px 0;
}
.piece {
  text-align: center;
}
.piece svg {
  display: block;
  width: 100%;
  height: auto;
}
.piece span {
  display: block;
  font:
    11px ui-monospace,
    monospace;
  color: #b7c4cc;
  margin-top: 9px;
}
.demo-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #2b3943;
  padding-top: 14px;
  margin-top: 12px;
  min-height: 46px;
}
.step-count {
  font:
    10px ui-monospace,
    monospace;
  color: #8b9da9;
}
.demo button {
  font:
    600 12px system-ui,
    sans-serif;
  border: 1px solid #647651;
  background: #c4dfa0;
  color: #182111;
  padding: 7px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.demo button:hover {
  background: #dfedcb;
}
.demo button:focus-visible {
  outline: 2px solid #c4dfa0;
  outline-offset: 4px;
}
.demo button span {
  margin-left: 12px;
}
.reading-note {
  border-top: 1px solid #303b42;
  padding: 30px 0 12px;
  margin-top: 20px;
  max-width: 830px;
  margin-left: auto;
}
.reading-note > p:not(.eyebrow) {
  font-size: 13px;
}
.reading-note .references {
  font-size: 11px;
}
[hidden] {
  display: none !important;
}
@media (max-width: 1000px) {
  .glossary-layout {
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 26px;
  }
  .term {
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.9fr);
  }
  figure {
    padding: 16px;
  }
}
@media (max-width: 800px) {
  .glossary-layout {
    display: block;
  }
  .term-index {
    position: static;
    padding: 18px 0;
    border-bottom: 1px solid #303b42;
  }
  .term-index nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
  }
  .term-index nav > p,
  .back-top {
    display: none;
  }
  .term-index nav a {
    font-size: 12px;
    padding: 6px 0;
  }
  .term {
    grid-template-columns: minmax(0, 1fr) minmax(230px, 1fr);
  }
}
@media (max-width: 560px) {

  .site-header nav {
    gap: 15px;
  }
  .site-header .brand {
    font-size: 11px;
    gap: 7px;
  }
  .site-header .brand img {
    width: 22px;
    height: 22px;
  }
  .site-header nav > a:not(.button) {
    display: none;
  }

  .glossary-intro .intro {
    font-size: 20px;
  }
  .intro-detail {
    font-size: 14px;
  }
  .term {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 32px 0;
  }
  .term h2 {
    font-size: 28px;
  }
  .term-index nav {
    gap: 4px 16px;
  }
  .term-index nav a span {
    display: none;
  }
  figure {
    padding: 20px;
  }
  .piece-sheet {
    gap: 22px 20px;
  }
  .reading-note {
    margin-top: 8px;
  }
}
/* The full reference keeps the visual entries and adds compact dictionary rows. */
.glossary-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px 18px;
  margin: 0 0 30px;
}
/* Reserve the search controls' space during enhancement, avoiding a page jump. */
@media (scripting: enabled) {
  .glossary-search[hidden] { display: grid !important; visibility: hidden; }
}
.glossary-search label { display: block; color: #b0bbc2; font-size: 12px; margin-bottom: 7px; }
.glossary-search input {
  width: 100%; min-width: 0; height: 46px; border: 1px solid #39464e; border-radius: 6px;
  background: #161e24; color: #e6e9e4; padding: 0 13px; font: 14px system-ui, sans-serif;
}
.glossary-search input:focus { outline: 2px solid #c4dfa0; outline-offset: 2px; }
.glossary-search input::placeholder { color: #83939e; }
.reset-search, .no-results button {
  background: transparent; border: 1px solid #39464e; color: #c4dfa0; border-radius: 6px;
  min-height: 46px; padding: 10px 15px; font: 13px system-ui, sans-serif; cursor: pointer;
}
.reset-search:hover, .no-results button:hover { background: #222c24; }
#result-count { grid-column: 1 / -1; margin: 0; font: 11px ui-monospace, monospace; color: #95a5af; }
.term-index .alphabet { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.term-index .alphabet a, .term-index .alphabet > span {
  display: flex; justify-content: center; align-items: center; padding: 5px 0; min-height: 32px;
  font: 12px ui-monospace, monospace; border-radius: 4px; color: #b9c5cb;
}
.term-index .alphabet a:hover { color: #d5ecc1; background: #293325; }
.term-index .alphabet > span, .term-index .alphabet a[aria-disabled="true"] { color: #52616b; }
.term-index .alphabet a[aria-disabled="true"] { cursor: default; }
.index-note { font-size: 11px; line-height: 1.7; color: #8f9da7; margin-top: 22px; }
.source-jump { display: block; margin-top: 18px; font-size: 11px; color: #b1c59e; text-decoration: none; }
.letter-heading {
  display: flex; align-items: baseline; gap: 16px; color: #c4dfa0; font-size: 34px;
  margin: 0; padding: 27px 0 15px; border-bottom: 1px solid #39464a; scroll-margin-top: 20px;
}
.letter-heading span { color: #8e9ea8; font: 10px ui-monospace, monospace; letter-spacing: .03em; }
.term { display: block; padding: 28px 0; }
.term .term-copy { display: grid; grid-template-columns: 205px minmax(0,1fr); gap: 30px; }
.term h3 { font-size: 22px; letter-spacing: -.035em; line-height: 1.25; margin: 0 0 10px; color: #e6e9e4; }
.term h3 a { color: inherit; text-decoration: none; }
.term h3 a:hover { color: #c4dfa0; }
.term .aliases { font-size: 11px; color: #a2b0bb; line-height: 1.8; margin: 0; overflow-wrap: anywhere; }
.aliases > span { display: block; font: 9px ui-monospace, monospace; text-transform: uppercase; color: #7f919e; margin-bottom: 4px; }
.term-description > p { font-size: 14px; line-height: 1.85; margin: 0 0 13px; color: #c1ccd3; }
.related { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; font-size: 11px; }
.related > span { font: 9px ui-monospace, monospace; color: #83949e; margin-right: 2px; }
.related a { text-decoration: none; }
.term.illustrated { display: grid; grid-template-columns: minmax(0,1fr) minmax(250px,.85fr); gap: 30px; padding: 35px 0; }
.term.illustrated .term-copy { display: block; }
.term.illustrated .term-heading { margin-bottom: 20px; }
.term.illustrated h3 { font-size: 28px; }
.term.illustrated .aliases > span { display: inline; margin-right: 5px; }
.term:target { background: linear-gradient(90deg, #c4dfa00a, transparent); }
.term-links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; font-size: 11px; }
.term-links a { text-decoration: none; }
.term-breadcrumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 35px; font-size: 12px; color: #95a5af; }
.term-breadcrumb a { text-decoration: none; }
.term-page-heading { padding-bottom: 26px; border-bottom: 1px solid #303b42; margin-bottom: 32px; }
.term-page-heading h1 { overflow-wrap: anywhere; }
.term-page-aliases { font-size: 14px; color: #9eacb5; margin-bottom: 0; }
.term-page-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.term-page-body.has-figure { grid-template-columns: minmax(0, 1fr) minmax(280px, .85fr); }
.term-page-explanation { max-width: 760px; }
.term-page-definition { font-size: 21px; line-height: 1.75; color: #d8e0e3; margin: 0 0 24px; }
.term-page .notice { font-size: 14px; line-height: 1.8; margin-bottom: 24px; }
.term-page-visual { min-width: 0; }
.term-page-visual figure { margin: 0; }
.term-practice { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 28px 0; }
.term-practice a { border: 1px solid #3f5036; border-radius: 6px; padding: 10px 14px; font-size: 13px; text-decoration: none; }
.term-practice a:hover { background: #222c24; }
.term-hub-link { display: inline-block; font-size: 12px; text-decoration: none; margin-top: 8px; }
.term-related { margin-top: 44px; padding-top: 28px; border-top: 1px solid #303b42; }
.term-related h2 { font-size: 24px; }
.term-related ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; list-style: none; padding: 0; }
.term-related li { margin: 0; }
.term-related h3 { font-size: 17px; margin: 0 0 8px; }
.term-related a { text-decoration: none; }
.term-related p { font-size: 13px; line-height: 1.8; margin: 0; }
.term-pagination { display: flex; justify-content: space-between; gap: 24px; padding-top: 26px; margin-top: 40px; border-top: 1px solid #303b42; }
.term-pagination a { font-size: 14px; text-decoration: none; }
.term-pagination a:last-child { text-align: right; }
.term-pagination small { display: block; color: #87969f; font: 9px ui-monospace, monospace; letter-spacing: .1em; margin-bottom: 8px; }
@media (max-width: 800px) {
  .term-page-body.has-figure, .term-related ul { grid-template-columns: minmax(0, 1fr); }
  .term-page-visual { max-width: 560px; width: 100%; }
  .term-page-definition { font-size: 18px; }
}
.no-results { padding: 40px 0 60px; }
.no-results h2 { margin: 0 0 8px; }
.reading-note { scroll-margin-top: 25px; }
.reading-note summary { cursor: pointer; color: #c4dfa0; font-size: 13px; }
.reading-note details p { font-size: 13px; }
.resource-group { margin-top: 30px; }
.resource-group h3 { font-size: 16px; margin: 0 0 16px; }
.source-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; list-style: none; padding: 0; }
.source-list li { border-top: 1px solid #29343c; padding: 16px 0; margin: 0; }
.source-list a { font-size: 14px; font-weight: 600; text-decoration: none; }
.source-list a span { color: #83949e; margin-left: 5px; }
.reading-note .source-list p { font-size: 12px; line-height: 1.7; color: #9eacb5; margin: 6px 0 0; }
@media (max-width: 650px) { .source-list { grid-template-columns: minmax(0, 1fr); } }
.piece-bag { display: flex; gap: 5px; justify-content: center; padding: 12px 0; }
.piece-bag span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 4px; font: 700 12px ui-monospace, monospace; }
.bag-label { text-align: center; font: 10px ui-monospace, monospace; color: #a6b4bd; }
.clear-sequence { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 12px 0; }
.clear-sequence span { border: 1px solid #4f6543; border-radius: 4px; padding: 7px; font: 11px ui-monospace, monospace; color: #c4dfa0; }
.clear-sequence .neutral { color: #b9c3ca; border-color: #3f4a51; }
.clear-sequence .break { color: #e6a0a5; border-color: #775055; }
.timing-track { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; margin: 18px 0; font: 10px ui-monospace, monospace; text-align: center; }
.timing-track span { padding: 12px 3px; border-top: 3px solid #8fc1cc; background: #1c2930; }
.timing-track span:first-child { border-color: #c4dfa0; }
@media (max-width:1000px) {
  .term .term-copy { grid-template-columns: 165px minmax(0,1fr); gap: 22px; }
  .term.illustrated { gap: 22px; grid-template-columns: minmax(0,1fr) minmax(220px,.8fr); }
}
@media (max-width:800px) {
  .term-index nav { display: block; }
  .term-index nav > p { display: block; margin: 0 0 10px; }
  .term-index .alphabet { display: flex; flex-wrap: wrap; gap: 2px; }
  .term-index .alphabet a, .term-index .alphabet > span { width: 29px; min-height: 30px; }
  .index-note, .source-jump { display: none; }
  .term .term-copy { grid-template-columns: 180px minmax(0,1fr); }
}
@media (max-width:560px) {
  .glossary-search { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .reset-search { grid-column: 1; grid-row: auto; justify-self: start; }
  #result-count { grid-column: 1; grid-row: auto; }
  .scope { align-items: flex-start; font-size: 10px; gap: 10px; line-height: 1.8; }
  .scope span { flex-shrink: 0; }
  .term .term-copy { display: block; }
  .term-heading { margin-bottom: 16px; }
  .aliases > span { display: inline; margin-right: 4px; }
  .term.illustrated { grid-template-columns: minmax(0,1fr); }
  .term h3, .term.illustrated h3 { font-size: 25px; }
  .source-list { columns: 1; }
}
.letter-section { border-top: 0; padding-top: 0; margin-top: 0; }

.glossary-intro { padding-bottom: 28px; }
h1 { font-size: clamp(44px, 5.5vw, 68px); }
.scope { margin-top: 22px; }

/* Compact, accessible teaching examples; no animation unless the reader advances. */
.example-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 12px;
}
.example-panels > div:only-child { grid-column: 1 / -1; max-width: 150px; margin: 0 auto; width: 100%; }
.example-label { display: block; margin-bottom: 9px; color: #a9bbc6; font: 9px/1.6 ui-monospace, monospace; letter-spacing: .04em; }
.example-panels .board { max-width: 170px; }
.example-flow { padding: 0; margin: 0; list-style: none; display: grid; gap: 18px; }
.example-flow li { position: relative; padding: 10px 13px; border: 1px solid #354a52; border-left: 3px solid #9bbf8c; border-radius: 4px; background: #18242b; }
.example-flow li + li::before { content: '↓'; position: absolute; top: -21px; left: 14px; color: #7f9eab; font-size: 14px; }
.example-flow strong { display: block; font-size: 12px; line-height: 1.5; color: #d8e5dd; font-weight: 600; }
.example-flow small { display: block; font-size: 11px; line-height: 1.6; color: #9eb0bb; margin-top: 3px; }
.example-metric { padding: 18px 15px; border: 1px solid #3b5055; border-radius: 5px; background: #19252b; }
.example-metric strong { display: block; font: 500 20px/1.6 ui-monospace, monospace; color: #c4dfa0; overflow-wrap: anywhere; }
.example-metric span { display: block; font-size: 12px; color: #c1d0d8; margin: 12px 0 5px; }
.example-metric small { display: block; font-size: 11px; line-height: 1.6; color: #97abb7; }
.example-tokens { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 16px 0; }
.example-tokens span { position: relative; display: grid; place-items: center; flex: 0 0 28px; height: 31px; border: 1px solid var(--piece); color: var(--piece); border-radius: 4px; font: 600 12px ui-monospace, monospace; }
.example-tokens .used { opacity: .4; }
.example-tokens .used::after { content: ''; position: absolute; width: 34px; height: 1px; background: currentColor; transform: rotate(-48deg); }
.garbage-meter { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; padding: 22px 0; }
.garbage-meter span { width: 15px; height: 38px; border-radius: 2px; background: #db8990; }
.garbage-meter b { flex-basis: 100%; margin-top: 10px; text-align: center; font: 12px ui-monospace, monospace; color: #e4b9bd; }
@media (max-width: 580px) {
  .example-metric strong { font-size: 17px; }
}