:root {
  --ink: #10233f;
  --muted: #56657a;
  --blue: #1769e0;
  --blue-dark: #0d3f94;
  --blue-soft: #eaf3ff;
  --yellow: #ffd84d;
  --yellow-soft: #fff7d6;
  --green: #087a5b;
  --green-soft: #e6f7f1;
  --red: #b84336;
  --red-soft: #fff0ee;
  --line: #d9e2ed;
  --paper: #ffffff;
  --surface: #f5f8fc;
  --shadow: 0 18px 50px rgba(16, 35, 63, .1);
  --radius: 20px;
  --max: 1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .8rem 1rem;
  color: white;
  background: var(--ink);
  border-radius: 10px;
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(217, 226, 237, .85);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
}

.header-inner {
  width: min(var(--max), calc(100% - 2rem));
  min-height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--ink);
  font-weight: 850;
  text-decoration: none;
  letter-spacing: -.025em;
}

.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--blue);
  border-radius: 12px 12px 4px 12px;
  font-size: .8rem;
  font-weight: 900;
}

.nav { display: flex; align-items: center; gap: .25rem; }
.nav a {
  padding: .7rem .85rem;
  border-radius: 10px;
  color: #33445a;
  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;
}
.nav a:hover, .nav a:focus-visible, .nav a[aria-current="page"] { color: var(--blue-dark); background: var(--blue-soft); }

.menu-button {
  display: none;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: white;
  cursor: pointer;
}

.wrap { width: min(var(--max), calc(100% - 2rem)); margin-inline: auto; }

.hero {
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 7rem) 0 4rem;
  background:
    radial-gradient(circle at 85% 5%, rgba(23,105,224,.14), transparent 34%),
    linear-gradient(180deg, #f8fbff 0%, #fff 100%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  align-items: center;
  gap: clamp(2.5rem, 6vw, 6rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 1rem;
  color: var(--blue-dark);
  font-size: .84rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 24px; height: 3px; background: var(--yellow); border-radius: 99px; }

h1, h2, h3 { margin-top: 0; line-height: 1.12; letter-spacing: -.035em; }
h1 { max-width: 760px; margin-bottom: 1.25rem; font-size: clamp(2.7rem, 6.2vw, 5.7rem); }
h2 { margin-bottom: .8rem; font-size: clamp(2rem, 3.5vw, 3.1rem); }
h3 { margin-bottom: .55rem; font-size: 1.28rem; }

.lead { max-width: 700px; margin: 0 0 1.75rem; color: var(--muted); font-size: clamp(1.12rem, 2vw, 1.32rem); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; }
.button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .78rem 1.1rem;
  border: 2px solid transparent;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.button-primary { color: white; background: var(--blue); box-shadow: 0 10px 26px rgba(23,105,224,.22); }
.button-primary:hover { background: var(--blue-dark); }
.button-secondary { border-color: var(--line); background: white; }
.button-secondary:hover { border-color: #aebed1; background: var(--surface); }

.hero-panel {
  position: relative;
  padding: 1.35rem;
  border: 1px solid var(--line);
  border-radius: 26px;
  background: white;
  box-shadow: var(--shadow);
}
.hero-panel::before {
  content: "";
  position: absolute;
  width: 76px;
  height: 12px;
  top: -6px;
  right: 28px;
  background: var(--yellow);
  border-radius: 99px;
}
.panel-label { margin: 0 0 .95rem; color: var(--muted); font-size: .85rem; font-weight: 750; }
.mini-card { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.mini-card + .mini-card { margin-top: .75rem; }
.mini-index { display: block; margin-bottom: .15rem; color: var(--blue); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.mini-card strong { display: block; margin-bottom: .2rem; font-size: 1.05rem; }
.mini-card p { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

.section { padding: clamp(3.8rem, 7vw, 6.2rem) 0; }
.section-soft { background: var(--surface); }
.section-heading { max-width: 720px; margin-bottom: 2rem; }
.section-heading p { margin: 0; color: var(--muted); font-size: 1.08rem; }

.choice-row { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0 1.6rem; }
.choice {
  min-height: 44px;
  padding: .6rem .95rem;
  border: 1px solid var(--line);
  border-radius: 99px;
  color: var(--ink);
  background: white;
  font-weight: 750;
  cursor: pointer;
}
.choice:hover, .choice:focus-visible, .choice[aria-pressed="true"] { border-color: var(--blue); color: var(--blue-dark); background: var(--blue-soft); }

.recommendation {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid #bdd7fb;
  border-radius: var(--radius);
  background: white;
}
.recommendation-badge { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: var(--blue-dark); background: var(--yellow-soft); font-weight: 900; }
.recommendation p { margin: .1rem 0 0; color: var(--muted); }

.orientation{overflow:hidden;border:2px solid var(--ink);border-radius:20px;background:var(--paper);box-shadow:8px 8px 0 var(--yellow)}.orientation-progress{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;border-bottom:1.5px solid var(--ink);list-style:none}.orientation-progress[hidden],.orientation-result[hidden]{display:none}.orientation-progress li{display:flex;gap:.6rem;align-items:center;padding:.85rem 1rem;color:var(--muted);font-weight:850}.orientation-progress li+li{border-left:1px solid var(--line)}.orientation-progress span{display:grid;width:30px;height:30px;place-items:center;flex:0 0 auto;border:1.5px solid var(--ink);border-radius:50%;background:white}.orientation-progress li[aria-current="step"]{color:var(--blue-dark);background:var(--blue-soft)}.orientation-progress li[aria-current="step"] span{color:white;background:var(--blue)}.orientation-progress li.is-complete span{color:var(--ink);background:var(--green-soft)}.orientation-step{margin:0;padding:clamp(1.2rem,3vw,2rem);border:0}.orientation-step legend{width:100%;padding:0;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.35rem,3vw,2rem);font-weight:800;line-height:1.15}.orientation-options{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin:1.35rem 0}.orientation-options-three{grid-template-columns:repeat(3,1fr)}.orientation-options label{position:relative;display:block;cursor:pointer}.orientation-options input{position:absolute;inline-size:1px;block-size:1px;opacity:.01}.orientation-options label>span{display:grid;min-height:112px;align-content:center;padding:1rem;border:1.5px solid var(--line);border-radius:14px;background:white}.orientation-options label:hover>span,.orientation-options input:focus-visible+span{border-color:var(--blue);background:var(--blue-soft)}.orientation-options input:checked+span{border-color:var(--ink);background:var(--yellow-soft);box-shadow:4px 4px 0 var(--ink);transform:translate(-2px,-2px)}.orientation-options strong,.orientation-options small{display:block}.orientation-options strong{font-size:1.02rem}.orientation-options small{margin-top:.2rem;color:var(--muted);font-size:.9rem}.orientation-actions{display:flex;justify-content:flex-end;gap:.65rem}.orientation-actions .button:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}.orientation-result{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem 1.3rem;align-items:center;padding:clamp(1.3rem,3vw,2rem);background:linear-gradient(135deg,var(--yellow-soft),white 55%,var(--green-soft))}.orientation-result-mark{display:grid;width:58px;height:58px;place-items:center;border:2px solid var(--ink);border-radius:50%;color:white;background:var(--green);font-size:1.5rem;font-weight:950}.orientation-result h3{margin:.1rem 0 .35rem;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.5rem,3vw,2.2rem)}.orientation-result p{margin:0}.orientation-first{margin-top:.65rem!important;color:var(--blue-dark)}.orientation-result-actions{display:grid;gap:.55rem}.orientation-result-actions .button{width:100%}
@media(max-width:760px){.orientation-progress li{display:grid;justify-items:center;padding:.7rem .35rem;text-align:center;font-size:.78rem}.orientation-options,.orientation-options-three{grid-template-columns:1fr}.orientation-result{grid-template-columns:1fr}.orientation-result-actions{grid-template-columns:1fr 1fr}.orientation-result-mark{width:48px;height:48px}.orientation-options label>span{min-height:90px}}
@media(max-width:480px){.orientation-result-actions{grid-template-columns:1fr}.orientation-actions{justify-content:stretch}.orientation-actions .button{flex:1}}

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.content-card {
  min-height: 240px;
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.content-card:hover { transform: translateY(-4px); border-color: #a8c7f2; box-shadow: var(--shadow); }
.card-icon { width: 45px; height: 45px; display: grid; place-items: center; margin-bottom: 1.25rem; border-radius: 13px; color: var(--blue-dark); background: var(--blue-soft); font-weight: 900; }
.content-card:nth-child(2) .card-icon { color: var(--green); background: var(--green-soft); }
.content-card:nth-child(3) .card-icon { color: #8c6500; background: var(--yellow-soft); }
.content-card:nth-child(4) .card-icon { color: var(--blue-dark); background: var(--blue-soft); }
.content-card p { margin: 0; color: var(--muted); }
.card-link { margin-top: auto; padding-top: 1.4rem; color: var(--blue-dark); font-weight: 850; }

.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.steps li { position: relative; min-height: 82px; padding: .2rem 0 1.4rem 4rem; counter-increment: steps; }
.steps li::before { content: counter(steps); position: absolute; left: 0; top: 0; width: 42px; height: 42px; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 50%; font-weight: 900; }
.steps li:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 44px; bottom: 2px; width: 2px; background: var(--line); }
.steps strong { display: block; margin-bottom: .2rem; }
.steps p { margin: 0; color: var(--muted); }
.path-card { padding: 1.65rem; border-radius: 24px; color: white; background: var(--ink); box-shadow: var(--shadow); }
.path-card .eyebrow { color: #a9cbff; }
.path-card p { color: #d5deea; }
.path-card .button { margin-top: .6rem; background: var(--yellow); color: #332800; }

.page-hero { padding: clamp(2.6rem, 6vw, 5.4rem) 0 2.5rem; background: linear-gradient(180deg, #f6faff 0%, #fff 100%); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.6rem; color: var(--muted); font-size: .9rem; }
.breadcrumb a { color: var(--blue-dark); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 3rem; align-items: end; }
.page-title { max-width: 820px; font-size: clamp(2.5rem, 5vw, 4.6rem); }
.page-summary { max-width: 760px; margin: 0; color: var(--muted); font-size: 1.18rem; }
.meta-box { padding: 1.1rem; border: 1px solid var(--line); border-radius: 16px; background: white; }
.meta-item { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.meta-item:last-child { border-bottom: 0; }
.meta-item span { color: var(--muted); }

.article-layout { display: grid; grid-template-columns: 245px minmax(0, 700px); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.toc { position: sticky; top: 96px; padding: 1rem 0; }
.toc strong { display: block; margin-bottom: .6rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.toc a { display: block; padding: .45rem .65rem; border-left: 2px solid var(--line); color: var(--muted); font-size: .92rem; text-decoration: none; }
.toc a:hover { color: var(--blue-dark); border-color: var(--blue); }
.article h2 { margin-top: 3.3rem; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.article h2:first-child { margin-top: 0; }
.article p, .article li { font-size: 1.06rem; }
.article ul { padding-left: 1.3rem; }

.definition, .example, .warning, .remember {
  margin: 1.5rem 0;
  padding: 1.35rem 1.45rem;
  border-radius: 16px;
}
.definition { border-left: 5px solid var(--blue); background: var(--blue-soft); }
.example { border: 1px solid var(--line); background: var(--surface); }
.warning { border-left: 5px solid var(--red); background: var(--red-soft); }
.remember { border-left: 5px solid var(--yellow); background: var(--yellow-soft); }
.definition strong, .example strong, .warning strong, .remember strong { display: block; margin-bottom: .35rem; }
.definition p, .example p, .warning p, .remember p { margin: 0; }

.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.comparison > div { padding: 1.2rem; border: 1px solid var(--line); border-radius: 16px; }
.comparison .bad { background: var(--red-soft); }
.comparison .good { background: var(--green-soft); }
.comparison small { display: block; margin-bottom: .35rem; font-weight: 900; text-transform: uppercase; }

.quiz { margin: 2rem 0; padding: 1.5rem; border: 2px solid #bdd7fb; border-radius: 20px; background: #f8fbff; }
.quiz h3 { margin-bottom: .4rem; }
.quiz-options { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.quiz-answer { display: none; margin-top: 1rem; padding: 1rem; border-radius: 12px; background: white; }
.quiz-answer.visible { display: block; }

.learning-terms { margin-top: 3.2rem; padding: 1.35rem; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.learning-terms h2 { margin-top: 0; }
.term-links { display: flex; flex-wrap: wrap; gap: .65rem; }
.term-chip { min-height: 44px; display: inline-flex; align-items: center; padding: .55rem .8rem; border: 1.5px solid var(--ink); border-radius: 99px; color: var(--ink); background: var(--yellow-soft); font-weight: 800; text-decoration: none; }
.term-chip:hover, .term-chip:focus-visible { background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); }
.learning-next a { min-height: 150px; }
.learning-next span { color: var(--muted); }
.back-library { margin-top: 1.2rem; color: var(--muted); font-weight: 750; }
.back-library a { color: var(--blue-dark); }

.home-entry-grid { grid-template-columns: repeat(6, 1fr); }
.home-entry-grid .content-card { grid-column: span 2; }
.home-entry-grid .content-card { min-height: 260px; }

.related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.related a { padding: 1.1rem; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; }
.related a:hover { border-color: var(--blue); background: var(--blue-soft); }

.site-footer { padding: 2.7rem 0; color: #d9e2ed; background: var(--ink); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.25rem 2rem; align-items: center; }
.site-footer p { margin: 0; }
.site-footer a { color: white; }
.footer-legal { display: flex; flex-wrap: wrap; gap: .35rem; font-size: .94rem; }

.trust-strip { padding: 1.5rem 0; border-top: 1px solid var(--line); background: white; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--line); }
.trust-grid > div { min-height: 105px; padding: 1.15rem; display: flex; flex-direction: column; justify-content: center; background: white; }
.trust-grid strong { display: block; color: var(--blue-dark); font-size: 1.05rem; }
.trust-grid span { color: var(--muted); font-size: .9rem; }
.trust-grid a { text-decoration: none; }

.library-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 2rem; background: linear-gradient(180deg, #f5f9ff 0%, white 100%); }
.library-hero .lead { margin-bottom: 0; }
.search-box { max-width: 760px; margin-top: 1.6rem; }
.search-box label { display: block; margin-bottom: .55rem; color: var(--ink); font-weight: 850; }
.search-field { min-height: 58px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; padding: .35rem .45rem .35rem 1rem; border: 2px solid #aac8f1; border-radius: 16px; background: white; box-shadow: 0 12px 36px rgba(23,105,224,.1); }
.search-field > span { color: var(--blue); font-size: 1.6rem; line-height: 1; }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font: inherit; font-size: 1.05rem; }
.search-field input::placeholder { color: #718096; }
.search-field button { min-height: 42px; padding: .45rem .8rem; border: 0; border-radius: 10px; color: var(--blue-dark); background: var(--blue-soft); font-weight: 800; cursor: pointer; }
.search-help { margin: .45rem 0 0; color: var(--muted); font-size: .88rem; }
.filters { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.6rem; }
.result-count { margin: -1rem 0 1.2rem; color: var(--muted); font-weight: 750; }
.library-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.library-card { min-height: 255px; padding: 1.35rem; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: white; text-decoration: none; }
.library-card:hover { border-color: var(--blue); box-shadow: var(--shadow); transform: translateY(-3px); }
.library-card[hidden] { display: none; }
.library-card h2 { font-size: 1.38rem; }
.library-tag { width: fit-content; margin-bottom: 1rem; padding: .25rem .6rem; border-radius: 99px; color: var(--blue-dark); background: var(--blue-soft); font-size: .78rem; font-weight: 850; }
.library-card p { margin: 0; color: var(--muted); }
.library-meta { margin-top: auto; padding-top: 1.3rem; display: flex; justify-content: space-between; gap: .8rem; color: var(--muted); font-size: .85rem; }
.empty-results { padding: 2.5rem 1.2rem; border: 1px dashed #aebed1; border-radius: 18px; text-align: center; background: var(--surface); }
.empty-results strong { display: block; font-size: 1.3rem; }
.empty-results p { margin: .35rem 0 1rem; color: var(--muted); }

.article-empty { padding: 5rem 0; }
.source-list { margin: 1.2rem 0 0; padding: 0; list-style: none; }
.source-list li { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.source-list a { color: var(--blue-dark); font-weight: 750; }
.source-note { color: var(--muted); font-size: .92rem; }

.glossary-hero .breadcrumb { margin-bottom: 1.2rem; }
.glossary-section { padding-top: 2.5rem; }
.alphabet { position: sticky; top: 92px; z-index: 20; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.6rem; padding: .75rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.95); backdrop-filter: blur(12px); }
.alphabet .choice { min-width: 44px; padding-inline: .7rem; }
.glossary-count { margin: 0 0 1.2rem; }
.glossary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.term-card { min-height: 300px; padding: 1.35rem; border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper); }
.term-card[hidden] { display: none; }
.term-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.term-letter { display: grid; width: 42px; height: 42px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; color: white; background: var(--blue); font-weight: 900; }
.term-kind { padding: .22rem .55rem; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.term-card h2 { margin-bottom: .65rem; font-size: 1.6rem; }
.term-card > p { margin: 0; color: var(--muted); font-size: 1.02rem; }
.term-example { margin-top: 1.15rem; padding: .9rem 1rem; border-left: 4px solid var(--yellow); background: var(--yellow-soft); font-size: .92rem; }
.term-example strong { display: block; margin-bottom: .15rem; }
.glossary-sources { padding: 1.4rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 6px 6px 0 var(--yellow); }
.glossary-sources p { color: var(--muted); }

.questions-section { padding-top: 2.6rem; }
.questions-layout { display: grid; grid-template-columns: 220px minmax(0, 820px); gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.question-filters { position: sticky; top: 98px; display: grid; gap: .55rem; padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.question-filters strong { margin-bottom: .25rem; }
.question-filters .choice { width: 100%; border-radius: 10px; text-align: left; }
.faq-count { margin: 0 0 1rem; }
.faq-list { display: grid; gap: .85rem; }
.faq-item { overflow: hidden; border: 1.5px solid var(--line); border-radius: 14px; background: var(--paper); }
.faq-item[hidden] { display: none; }
.faq-item summary { min-height: 78px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.15rem; cursor: pointer; font-family: Georgia, "Times New Roman", serif; font-size: 1.22rem; font-weight: 750; line-height: 1.25; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; display: grid; width: 32px; height: 32px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-family: Inter, sans-serif; font-size: 1.2rem; }
.faq-item[open] summary::after { content: "−"; }
.faq-item[open] summary { border-bottom: 1px solid var(--line); background: var(--yellow-soft); }
.faq-number { color: var(--blue-dark); font-family: Inter, sans-serif; font-size: .8rem; font-weight: 900; }
.faq-answer { padding: 1.1rem 1.25rem 1.25rem 4.8rem; }
.faq-answer p { margin: 0 0 .8rem; font-size: 1.04rem; }
.faq-answer a { color: var(--blue-dark); font-weight: 850; }

.faq-callout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 15px; background: var(--yellow-soft); box-shadow: 7px 7px 0 var(--blue); }
.faq-callout-mark { display: grid; width: 58px; height: 58px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); font-family: Georgia, serif; font-size: 2rem; font-weight: 900; }
.faq-callout h2 { margin: 0 0 .25rem; font-size: clamp(1.45rem, 3vw, 2rem); }
.faq-callout p { margin: 0; color: var(--muted); }
.tool-home-callout { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 15px; background: var(--blue-soft); box-shadow: 7px 7px 0 var(--green); }
.tool-home-mark { display: grid; width: 58px; height: 58px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: white; background: var(--blue); font-size: 1.8rem; font-weight: 900; }
.tool-home-callout .eyebrow { margin-bottom: .65rem; }
.tool-home-callout h2 { margin: 0 0 .25rem; font-size: clamp(1.45rem, 3vw, 2rem); }
.tool-home-callout p:last-child { margin: 0; color: var(--muted); }

.uses-hero { padding-bottom: 2.5rem; }
.use-filters { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.2rem; }
.uses-section { padding-top: 2.4rem; }
.use-toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.use-toolbar .result-count { margin: 0; color: var(--ink); font-size: 1.05rem; }
.use-toolbar > p:last-child { margin: 0; color: var(--muted); font-size: .92rem; }
.use-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.use-card { overflow: hidden; border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper); }
.use-card[hidden] { display: none; }
.use-card summary { min-height: 180px; display: grid; grid-template-columns: 52px 1fr; gap: 1rem; align-items: start; padding: 1.25rem; cursor: pointer; list-style: none; }
.use-card summary::-webkit-details-marker { display: none; }
.use-card summary > span:last-child { display: flex; min-width: 0; flex-direction: column; }
.use-card small { color: var(--blue-dark); font-size: .78rem; font-style: normal; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.use-card summary strong { margin: .45rem 0 .4rem; font-family: Georgia, "Times New Roman", serif; font-size: 1.38rem; line-height: 1.15; }
.use-card summary em { color: var(--muted); font-style: normal; }
.use-card summary::after { content: "Voir la méthode +"; grid-column: 2; align-self: end; margin-top: 1rem; color: var(--blue-dark); font-size: .88rem; font-weight: 900; }
.use-card[open] summary::after { content: "Refermer −"; }
.use-card[open] summary { min-height: 0; border-bottom: 1px solid var(--line); background: var(--yellow-soft); }
.use-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; color: var(--ink); background: var(--yellow); font-size: 1rem; font-weight: 900; }
.use-body { padding: 1.25rem; }
.use-body ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.use-body li + li { margin-top: .35rem; }
.prompt-box { margin: 1rem 0; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--blue-soft); }
.prompt-box > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem .8rem; color: white; background: var(--blue-dark); }
.prompt-box button { min-height: 34px; padding: .35rem .65rem; border: 1px solid white; border-radius: 7px; color: var(--ink); background: var(--yellow); font: inherit; font-size: .82rem; font-weight: 900; cursor: pointer; }
.prompt-box p { margin: 0; padding: 1rem; color: var(--ink); font-size: .96rem; }
.use-check { margin: 0; padding: .8rem .9rem; border-left: 5px solid var(--coral); background: var(--red-soft); font-size: .92rem; }
.safe-method { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.safe-steps { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.safe-steps li { display: grid; grid-template-columns: 44px 1fr; gap: .85rem; align-items: center; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }
.safe-steps span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 900; }
.safe-steps strong { font-size: 1.08rem; }
.safe-steps p { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; }

.safety-hero { padding-bottom: 2.5rem; }
.risk-filters { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.2rem; }
.help-strip { padding: 1.5rem 0; border-bottom: 2px solid var(--ink); background: var(--red-soft); }
.help-strip h2 { margin-bottom: 1rem; font-size: 1.25rem; }
.help-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.help-card { min-height: 128px; display: flex; flex-direction: column; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); text-decoration: none; }
.help-card:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 var(--ink); }
.help-card strong { font-size: .82rem; }
.help-card span { margin: .35rem 0; color: var(--blue-dark); font-family: Georgia, "Times New Roman", serif; font-size: 1.45rem; font-weight: 850; }
.help-card small { margin-top: auto; color: var(--muted); font-size: .78rem; }
.help-emergency { color: white; background: var(--red); }
.help-emergency span, .help-emergency small { color: white; }
.risks-section { padding-top: 2.5rem; }
.risk-toolbar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.risk-toolbar .result-count, .risk-toolbar p { margin: 0; }
.risk-toolbar p:last-child { color: var(--muted); font-size: .92rem; }
.risk-list { display: grid; gap: .85rem; }
.risk-card { overflow: hidden; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.risk-card[hidden] { display: none; }
.risk-card summary { min-height: 92px; display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 1rem; padding: 1rem 1.2rem; cursor: pointer; list-style: none; }
.risk-card summary::-webkit-details-marker { display: none; }
.risk-card summary::after { content: "+"; display: grid; width: 34px; height: 34px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: 1.25rem; font-weight: 900; }
.risk-card[open] summary::after { content: "−"; }
.risk-card[open] summary { border-bottom: 1px solid var(--ink); background: var(--yellow-soft); }
.risk-card summary > span:nth-child(2) { display: flex; flex-direction: column; }
.risk-card summary strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.27rem; line-height: 1.2; }
.risk-card summary em { margin-top: .25rem; color: var(--muted); font-style: normal; }
.risk-level { width: fit-content; padding: .3rem .55rem; border: 1px solid var(--ink); border-radius: 99px; color: var(--ink); background: var(--red-soft); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.risk-body { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.2rem; padding: 1.25rem; }
.risk-body h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.risk-body ul, .risk-body ol { margin: 0; padding-left: 1.2rem; }
.risk-body li + li { margin-top: .35rem; }
.act-now { padding: 1rem; border-left: 6px solid var(--green); background: var(--green-soft); }
.never-do { grid-column: 1 / -1; margin: 0; padding: .75rem .9rem; border-left: 6px solid var(--coral); background: var(--red-soft); }
.safety-sources { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }

.chooser-hero { padding-bottom: 2.2rem; }
.chooser-section { padding-top: 2.5rem; }
.chooser-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 1.5rem; align-items: start; }
.chooser-form { min-width: 0; }
.step-label { margin: 0 0 .25rem; color: var(--blue-dark); font-size: .82rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.chooser-form h2 { margin-bottom: 1rem; font-size: clamp(1.45rem, 3vw, 2rem); }
.need-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.need-grid button, .data-choices button { display: grid; width: 100%; min-height: 86px; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; column-gap: .75rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.need-grid button:hover, .data-choices button:hover { background: var(--blue-soft); }
.need-grid button[aria-pressed="true"], .data-choices button[aria-pressed="true"] { background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.need-grid button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--blue-soft); font-weight: 900; }
.need-grid strong, .data-choices strong { align-self: end; }
.need-grid small, .data-choices small { color: var(--muted); font-size: .8rem; }
.data-question { margin-top: 2rem; }
.data-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.data-choices button { min-height: 105px; display: flex; flex-direction: column; justify-content: center; }
.tool-result { position: sticky; top: 102px; min-height: 390px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--blue-dark); color: white; box-shadow: 8px 8px 0 var(--yellow); }
.result-kicker { display: inline-block; margin-bottom: 1.2rem; padding: .25rem .5rem; border: 1px solid white; border-radius: 99px; font-size: .75rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.tool-result h2, .tool-result h3 { color: white; }
.tool-result h2 { margin-bottom: .6rem; font-size: 1.8rem; }
.tool-result h3 { margin: 1rem 0 .4rem; font-size: 1.05rem; }
.tool-result p { color: #eef0ff; }
.tool-result ul { margin: .4rem 0 1.2rem; padding-left: 1.2rem; }
.tool-result li + li { margin-top: .3rem; }
.result-symbol { display: grid; width: 48px; height: 48px; margin-bottom: 1rem; place-items: center; border: 1.5px solid white; border-radius: 50%; color: var(--ink); background: var(--yellow); font-weight: 900; }
.result-safety { padding: .8rem; border-left: 5px solid var(--yellow); background: rgba(255,255,255,.1); }
.result-safety p { margin: .2rem 0 0; }
.tool-result .button { width: 100%; border-color: white; color: var(--ink); background: var(--yellow); box-shadow: 3px 3px 0 white; }
.reset-link { width: 100%; margin-top: .8rem; border: 0; color: white; background: transparent; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.tool-family-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.tool-family-grid article { min-height: 270px; padding: 1.2rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.tool-family-grid article > span { display: grid; width: 44px; height: 44px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-weight: 900; }
.tool-family-grid h3 { margin: 1rem 0 .45rem; font-size: 1.35rem; }
.tool-family-grid p { color: var(--muted); }
.tool-family-grid strong { display: block; margin-top: 1rem; color: var(--blue-dark); font-size: .82rem; text-transform: uppercase; }
.tool-family-grid small { display: block; margin-top: .25rem; color: var(--muted); font-size: .85rem; }
.buying-check { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 7vw, 5rem); align-items: start; }
.buying-check ol { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.buying-check li { display: grid; grid-template-columns: 42px 1fr; gap: .8rem; align-items: center; padding: .8rem; border-bottom: 1px solid var(--line); }
.buying-check li > span { display: grid; width: 38px; height: 38px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--green-soft); font-weight: 900; }
.buying-check p { margin: .15rem 0 0; color: var(--muted); }

.prompt-hero { padding-bottom: 2.2rem; }
.local-note { width: fit-content; margin: 1rem 0 0; padding: .65rem .8rem; border-left: 5px solid var(--green); background: var(--green-soft); font-size: .9rem; }
.prompt-workshop { padding-top: 2.5rem; }
.prompt-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(340px, .95fr); gap: 1.5rem; align-items: start; }
.prompt-form { padding: 1.4rem; border: 1.5px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 6px 6px 0 var(--green); }
.form-heading { display: flex; gap: .8rem; align-items: center; margin-bottom: 1rem; }
.form-heading > span, .output-top > div > span { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-weight: 900; }
.form-heading h2, .form-heading p { margin: 0; }
.form-heading p { color: var(--muted); font-size: .9rem; }
.example-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin-bottom: 1.2rem; padding: .7rem; border-radius: 10px; background: var(--surface); }
.example-row > span { color: var(--muted); font-size: .85rem; font-weight: 800; }
.example-row button { padding: .32rem .55rem; border: 1px solid var(--ink); border-radius: 99px; background: white; font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; }
.example-row button:hover { background: var(--yellow); }
.prompt-form label:not(.check-line) { display: flex; justify-content: space-between; gap: 1rem; margin: 1rem 0 .4rem; font-weight: 850; }
.prompt-form label span { color: var(--blue-dark); font-size: .75rem; text-transform: uppercase; }
.prompt-form textarea, .prompt-form input, .prompt-form select { width: 100%; min-height: 48px; padding: .75rem; border: 1.5px solid #9aa69f; border-radius: 9px; color: var(--ink); background: white; font: inherit; }
.prompt-form textarea { resize: vertical; line-height: 1.5; }
.prompt-form textarea:focus, .prompt-form input:focus, .prompt-form select:focus { border-color: var(--blue); outline: 3px solid var(--blue-soft); }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.check-line { display: flex; gap: .7rem; align-items: flex-start; margin: 1rem 0; padding: .8rem; border-radius: 9px; background: var(--blue-soft); font-size: .9rem; }
.check-line input { width: 24px; min-height: 24px; flex: 0 0 auto; margin-top: .05rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.form-error { min-height: 1.4em; margin: .7rem 0 0; color: var(--red); font-weight: 800; }
.prompt-output { position: sticky; top: 102px; min-height: 540px; padding: 1.4rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--yellow-soft); box-shadow: 8px 8px 0 var(--blue); }
.output-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ink); }
.output-top > div { display: flex; align-items: center; gap: .75rem; }
.output-top h2 { margin: 0; font-size: 1.45rem; }
.output-top button { min-height: 40px; padding: .5rem .75rem; border: 1.5px solid var(--ink); border-radius: 8px; color: white; background: var(--blue); font: inherit; font-weight: 900; cursor: pointer; }
.output-top button:disabled { cursor: not-allowed; opacity: .45; }
.output-empty { padding: 2rem 0; color: var(--muted); }
.output-empty strong { display: block; color: var(--ink); font-size: 1.2rem; }
.prompt-output pre { margin: 1rem 0; padding: 1rem; overflow: auto; white-space: pre-wrap; border: 1.5px solid var(--ink); border-radius: 10px; background: white; font: inherit; font-size: .95rem; line-height: 1.55; }
.copy-status { min-height: 1.3em; color: var(--green); font-weight: 850; }
.output-reminder { margin-top: 1.2rem; padding: 1rem; border-left: 5px solid var(--coral); background: var(--red-soft); }
.output-reminder ul { margin: .55rem 0 0; padding-left: 1.2rem; }
.prompt-principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.prompt-principles article { padding: 1.15rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }
.prompt-principles span { color: var(--blue-dark); font-weight: 950; }
.prompt-principles h3 { margin: .7rem 0 .4rem; font-size: 1.25rem; }
.prompt-principles p { margin: 0; color: var(--muted); }

.quiz-home-callout { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: clamp(1.2rem, 3vw, 2rem); border: 2px solid var(--ink); border-radius: 18px; background: var(--yellow-soft); box-shadow: 7px 7px 0 var(--blue); }
.quiz-home-callout h2, .quiz-home-callout p { margin: 0; }
.quiz-home-callout h2 { margin-bottom: .35rem; }
.quiz-home-mark { display: grid; width: 64px; height: 64px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: white; background: var(--blue-dark); font-size: 1.25rem; font-weight: 950; }

.quiz-hero { padding-bottom: 2.4rem; }
.quiz-section { padding-top: 2.6rem; }
.quiz-shell { max-width: 920px; }
.quiz-start { display: grid; grid-template-columns: auto 1fr auto; gap: 1.3rem; align-items: center; padding: clamp(1.3rem, 4vw, 2.2rem); border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 9px 9px 0 var(--yellow); }
.quiz-start h2, .quiz-start p { margin-top: 0; }
.quiz-start > div > p:last-child { margin-bottom: 0; color: var(--muted); }
.quiz-big-mark { display: grid; width: 78px; height: 78px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: white; background: var(--blue); font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 900; }
.quiz-progress-row { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; font-size: .9rem; }
.quiz-progress-row span { color: var(--muted); }
.quiz-progress { height: 12px; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 99px; background: white; }
.quiz-progress span { display: block; width: 0; height: 100%; background: var(--green); transition: width .25s ease; }
.quiz-card { margin-top: 1rem; padding: clamp(1.2rem, 4vw, 2.2rem); border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 8px 8px 0 var(--blue-soft); }
.quiz-theme { width: fit-content; margin: 0 0 .75rem; padding: .3rem .65rem; border: 1px solid var(--ink); border-radius: 99px; background: var(--yellow); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.quiz-card h2 { max-width: 750px; margin: 0 0 1.2rem; font-size: clamp(1.45rem, 3.2vw, 2.15rem); }
.quiz-options { display: grid; gap: .7rem; }
.quiz-options button { display: grid; grid-template-columns: 42px 1fr; gap: .8rem; align-items: center; width: 100%; min-height: 68px; padding: .75rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: white; font: inherit; text-align: left; cursor: pointer; }
.quiz-options button:hover:not(:disabled) { background: var(--blue-soft); box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px,-1px); }
.quiz-options button > span { display: grid; width: 40px; height: 40px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--surface); font-weight: 950; }
.quiz-options button:disabled { color: var(--ink); cursor: default; opacity: .68; }
.quiz-options button.is-correct { border-color: var(--green); background: var(--green-soft); opacity: 1; }
.quiz-options button.is-correct > span { color: white; background: var(--green); }
.quiz-options button.is-wrong { border-color: var(--coral); background: var(--red-soft); opacity: 1; }
.quiz-options button.is-wrong > span { color: white; background: var(--red); }
.quiz-feedback { margin-top: 1rem; padding: 1rem; border-left: 6px solid var(--green); background: var(--green-soft); }
.quiz-feedback.feedback-wrong { border-left-color: var(--coral); background: var(--red-soft); }
.quiz-feedback > strong { font-size: 1.1rem; }
.quiz-feedback p { margin: .4rem 0; }
.quiz-feedback a { font-weight: 900; }
.reflex-tip { padding-top: .4rem; border-top: 1px solid rgba(18, 34, 29, .18); }
.quiz-next { margin-top: 1rem; }
.quiz-next[hidden] { display: none; }
.quiz-result-head { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center; padding-bottom: 1.5rem; border-bottom: 1.5px solid var(--ink); }
.quiz-result-head > span { display: grid; width: 126px; height: 126px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: white; background: var(--blue-dark); box-shadow: 6px 6px 0 var(--yellow); font-family: Georgia, "Times New Roman", serif; font-size: 2.4rem; font-weight: 900; }
.quiz-result-head h2, .quiz-result-head p { margin-top: 0; }
.quiz-result-head p:last-child { margin-bottom: 0; color: var(--muted); }
.quiz-breakdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 1.2rem 0; }
.quiz-breakdown a { display: flex; min-height: 150px; flex-direction: column; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); text-decoration: none; }
.quiz-breakdown a:hover { background: var(--blue-soft); transform: translateY(-2px); }
.quiz-breakdown span { color: var(--muted); font-size: .82rem; font-weight: 850; text-transform: uppercase; }
.quiz-breakdown strong { margin: .35rem 0; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; }
.quiz-breakdown small { margin-top: auto; color: var(--blue-dark); font-weight: 850; }
.quiz-recommendation { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin: 1.2rem 0; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--yellow-soft); }
.quiz-recommendation > span { display: grid; width: 48px; height: 48px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; color: white; background: var(--blue); font-weight: 900; }
.quiz-recommendation h3, .quiz-recommendation p { margin: 0; }
.quiz-recommendation h3 { margin-bottom: .25rem; }
.quiz-recommendation p:last-child { color: var(--muted); }

.cost-hero { padding-bottom: 2.1rem; }
.cost-workbench { padding-top: 2.5rem; }
.cost-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); gap: 1.4rem; align-items: start; }
.cost-calculator { padding: clamp(1.2rem, 3vw, 1.7rem); border: 2px solid var(--ink); border-radius: 17px; background: var(--paper); box-shadow: 7px 7px 0 var(--green); }
.cost-heading { display: flex; gap: .8rem; align-items: center; }
.cost-heading > span { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: 1.3rem; font-weight: 950; }
.cost-heading h2, .cost-heading p { margin: 0; }
.calculator-intro { margin: .8rem 0 1.2rem; color: var(--muted); }
.cost-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.cost-fields label { display: flex; flex-direction: column; font-weight: 850; }
.cost-fields label:first-child { grid-column: 1 / -1; }
.cost-fields input { width: 100%; min-height: 48px; margin-top: .4rem; padding: .65rem .75rem; border: 1.5px solid #87948e; border-radius: 9px; color: var(--ink); background: white; font: inherit; font-weight: 800; }
.cost-fields input:focus { border-color: var(--blue); outline: 3px solid var(--blue-soft); }
.cost-fields small { margin-top: .3rem; color: var(--muted); font-size: .78rem; font-weight: 500; }
.money-input { position: relative; }
.money-input input { padding-right: 2.2rem; }
.money-input b { position: absolute; right: .8rem; bottom: .72rem; color: var(--blue-dark); }
.cost-reset { width: auto; margin-top: 1rem; color: var(--blue-dark); }
.cost-result { position: sticky; top: 102px; padding: 1.4rem; border: 2px solid var(--ink); border-radius: 17px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }
.cost-total { display: block; margin: .35rem 0; color: var(--yellow); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.8rem, 7vw, 4.6rem); line-height: 1; }
.cost-result > p { color: #eef0ff; }
.cost-detail { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.2rem 0; }
.cost-detail div { padding: .8rem; border: 1px solid rgba(255,255,255,.45); border-radius: 10px; }
.cost-detail dt { color: #cdd6ff; font-size: .78rem; font-weight: 850; text-transform: uppercase; }
.cost-detail dd { margin: .2rem 0 0; font-size: 1.2rem; font-weight: 900; }
.cost-formula { padding: .9rem; border-left: 5px solid var(--green); background: rgba(255,255,255,.1); }
.cost-formula p { margin: .2rem 0 0; color: white; }
.cost-warning { margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.35); font-size: .84rem; }
.payment-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.payment-grid article { padding: 1.15rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.payment-grid article > span { display: grid; width: 48px; height: 48px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: .82rem; font-weight: 950; }
.payment-grid h3 { margin: .9rem 0 .4rem; font-size: 1.3rem; }
.payment-grid p { color: var(--muted); }
.payment-grid strong { color: var(--blue-dark); font-size: .8rem; text-transform: uppercase; }
.payment-grid ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .88rem; }
.payment-grid li + li { margin-top: .35rem; }
.token-explainer { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.token-demo { display: flex; flex-wrap: wrap; gap: .45rem; padding: 1.4rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--blue-soft); box-shadow: 7px 7px 0 var(--blue); }
.token-demo span { padding: .45rem .65rem; border: 1.5px solid var(--ink); border-radius: 7px; background: white; font-weight: 850; }
.token-demo span:nth-child(3n) { background: var(--yellow); }
.token-demo small { width: 100%; margin-top: .5rem; color: var(--muted); }
.budget-paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.budget-paths article { padding: 1.15rem; border-top: 5px solid var(--blue); background: var(--paper); }
.budget-paths span { color: var(--blue-dark); font-weight: 950; }
.budget-paths h3 { margin: .6rem 0 .4rem; font-size: 1.18rem; }
.budget-paths p { margin: 0; color: var(--muted); }
.surprise-check { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 7vw, 5rem); align-items: start; }
.surprise-check ol { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.surprise-check li { display: grid; grid-template-columns: 38px 1fr; gap: .75rem; align-items: center; padding: .7rem; border-bottom: 1px solid var(--line); }
.surprise-check li span { display: grid; width: 36px; height: 36px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--green-soft); font-weight: 900; }

.youth-home-callout { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; padding: clamp(1.2rem, 3vw, 2rem); border: 2px solid var(--ink); border-radius: 18px; background: var(--green-soft); box-shadow: 7px 7px 0 var(--coral); }
.youth-home-callout h2, .youth-home-callout p { margin: 0; }
.youth-home-callout h2 { margin-bottom: .35rem; }
.youth-home-mark { display: grid; width: 64px; height: 64px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: white; background: var(--green); font-size: 1.35rem; font-weight: 950; }
.youth-hero { padding-bottom: 2.2rem; }
.youth-audiences { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
.youth-audiences span { padding: .38rem .7rem; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--yellow); font-size: .82rem; font-weight: 900; }
.youth-situations { padding-top: 2.5rem; }
.youth-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, .78fr); gap: 1.2rem; align-items: start; }
.situation-list { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.situation-list button { display: grid; min-height: 96px; grid-template-columns: 42px 1fr; gap: .75rem; align-items: center; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.situation-list button:hover { background: var(--blue-soft); transform: translateY(-2px); }
.situation-list button[aria-pressed="true"] { background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.situation-list button span { display: grid; width: 40px; height: 40px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: white; font-size: .8rem; font-weight: 950; }
.situation-answer { position: sticky; top: 102px; min-height: 420px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }
.answer-badge { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.situation-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem, 3vw, 2rem); }
.situation-answer > p { color: #eef0ff; }
.action-now { margin: 1.1rem 0; padding: .9rem; border-left: 6px solid var(--green); background: rgba(255,255,255,.1); }
.action-now p { margin: .25rem 0 0; color: white; }
.adult-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.35); font-size: .9rem; }
.charter-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 7vw, 5rem); align-items: start; }
.youth-charter { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }
.youth-charter li { display: grid; grid-template-columns: 44px 1fr; gap: .8rem; align-items: center; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }
.youth-charter li > span { display: grid; width: 40px; height: 40px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-weight: 950; }
.youth-charter p { margin: .15rem 0 0; color: var(--muted); font-size: .9rem; }
.learning-method { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 7vw, 5rem); align-items: start; }
.learning-steps { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.learning-steps article { padding: 1rem; border-top: 5px solid var(--blue); background: var(--surface); }
.learning-steps span { color: var(--blue-dark); font-weight: 950; }
.learning-steps h3 { margin: .5rem 0 .25rem; }
.learning-steps p { margin: 0; color: var(--muted); }
.adult-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.adult-grid article { padding: 1.15rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.adult-grid article > span { display: grid; width: 44px; height: 44px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--green-soft); font-weight: 950; }
.adult-grid article:last-child > span { background: var(--red-soft); }
.adult-grid h3 { margin: .8rem 0 .45rem; }
.adult-grid ul { padding-left: 1.15rem; }
.adult-grid li + li { margin-top: .4rem; }
.adult-grid p { padding: .8rem; border-left: 5px solid var(--coral); background: var(--red-soft); font-size: .9rem; }
.age-note { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; padding: clamp(1.2rem, 4vw, 2rem); border: 2px solid var(--ink); border-radius: 16px; background: var(--blue-soft); }
.age-note > span { display: grid; width: 64px; height: 64px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: white; background: var(--blue); font-size: 1.8rem; font-weight: 950; }
.age-note h2, .age-note p { margin-top: 0; }
.age-note p:last-child { margin-bottom: 0; }

.eco-hero { padding-bottom: 2.2rem; }
.eco-situations { padding-top: 2.5rem; }
.eco-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .8fr); gap: 1.2rem; align-items: start; }
.eco-choice-list { display: grid; gap: .7rem; }
.eco-choice-list button { display: grid; min-height: 82px; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: .8rem; padding: .75rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.eco-choice-list button:hover { background: var(--green-soft); transform: translateY(-2px); }
.eco-choice-list button[aria-pressed="true"] { background: var(--green-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.eco-choice-list button > span { grid-row: 1 / 3; display: grid; width: 42px; height: 42px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-weight: 950; }
.eco-choice-list button strong { align-self: end; }
.eco-choice-list button small { color: var(--muted); font-size: .82rem; }
.eco-answer { position: sticky; top: 102px; min-height: 405px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--green); box-shadow: 8px 8px 0 var(--yellow); }
.eco-answer-level { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.eco-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem, 3vw, 2rem); }
.eco-answer > p { color: #f0fff8; }
.eco-action { margin: 1.1rem 0; padding: .9rem; border-left: 6px solid var(--yellow); background: rgba(255,255,255,.12); }
.eco-action p { margin: .25rem 0 0; color: white; }
.eco-principle { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.impact-cycle { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.impact-cycle article { padding: 1.15rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.impact-cycle span { color: var(--green); font-weight: 950; }
.impact-cycle h3 { margin: .7rem 0 .4rem; font-size: 1.2rem; }
.impact-cycle p { margin: 0; color: var(--muted); }
.media-impact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.media-ladder { padding: 1.25rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--blue-soft); box-shadow: 7px 7px 0 var(--blue); }
.media-ladder > div { display: grid; grid-template-columns: 95px 1fr; gap: .25rem .75rem; align-items: center; margin-bottom: 1rem; }
.media-ladder span { font-weight: 900; }
.media-ladder b { height: 18px; width: var(--level); border: 1.5px solid var(--ink); border-radius: 99px; background: var(--green); }
.media-ladder small { grid-column: 2; color: var(--muted); }
.media-ladder > p { margin: .4rem 0 0; padding-top: .8rem; border-top: 1px solid var(--ink); color: var(--muted); font-size: .82rem; }
.eco-habits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.eco-habits article { padding: 1rem; border-top: 5px solid var(--green); background: var(--paper); }
.eco-habits article:last-child { grid-column: 2 / 4; }
.eco-habits span { color: var(--green); font-weight: 950; }
.eco-habits h3 { margin: .55rem 0 .35rem; font-size: 1.1rem; }
.eco-habits p { margin: 0; color: var(--muted); }
.myths-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(2rem, 7vw, 5rem); align-items: start; }
.eco-myths { display: grid; gap: .75rem; }
.eco-myths article { padding: 1rem; border-left: 6px solid var(--coral); background: var(--red-soft); }
.eco-myths p { margin: .35rem 0 0; color: var(--muted); }
.org-eco { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: center; }
.org-eco > span { display: grid; width: 58px; height: 58px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: white; background: var(--green); font-weight: 950; }
.org-eco h2, .org-eco p { margin-top: 0; }
.org-eco p:last-child { margin-bottom: 0; }
.sources-panel { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(2rem, 7vw, 5rem); align-items: start; }
.sources-panel > div:last-child { display: grid; gap: .65rem; }
.sources-panel a { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 10px; color: var(--ink); background: var(--paper); text-decoration: none; }
.sources-panel a:hover { background: var(--blue-soft); transform: translateY(-2px); }
.sources-panel a span { color: var(--blue-dark); font-weight: 850; }
.source-date { color: var(--muted); font-size: .82rem; }

.scam-hero { padding-bottom: 2.2rem; }
.scam-rule { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; max-width: 780px; margin-top: 1.4rem; padding: 1rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--yellow); box-shadow: 6px 6px 0 var(--coral); }
.scam-rule > span { display: grid; width: 68px; height: 68px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: white; background: var(--coral); font-size: .8rem; font-weight: 950; }
.scam-rule p { margin: 0; }
.scam-scenarios { padding-top: 2.5rem; }
.scam-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr); gap: 1.2rem; align-items: start; }
.scam-choice-list { display: grid; gap: .7rem; }
.scam-choice-list button { display: grid; min-height: 88px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .8rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.scam-choice-list button:hover { background: var(--red-soft); transform: translateY(-2px); }
.scam-choice-list button[aria-pressed="true"] { background: var(--red-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.scam-choice-list button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; color: white; background: var(--coral); font-size: .78rem; font-weight: 950; }
.scam-choice-list button strong { align-self: end; }
.scam-choice-list button small { color: var(--muted); font-size: .82rem; }
.scam-answer { position: sticky; top: 102px; min-height: 420px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--coral); }
.scam-answer-level { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.scam-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem, 3vw, 2rem); }
.scam-answer > p { color: #eef0ff; }
.scam-action { margin: 1.1rem 0; padding: .9rem; border-left: 6px solid var(--yellow); background: rgba(255,255,255,.1); }
.scam-action p { margin: .25rem 0 0; color: white; }
.scam-clue { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.scam-mechanism { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.scam-mechanism article { padding: 1.15rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.scam-mechanism span { color: var(--coral); font-weight: 950; }
.scam-mechanism h3 { margin: .7rem 0 .4rem; font-size: 1.18rem; }
.scam-mechanism p { margin: 0; color: var(--muted); }
.scam-check-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(2rem, 7vw, 5rem); align-items: start; }
.scam-checks { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.scam-checks li { display: grid; grid-template-columns: 46px 1fr; gap: .85rem; align-items: center; padding: .85rem; border-bottom: 1px solid var(--line); }
.scam-checks li > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-weight: 950; }
.scam-checks p { margin: .2rem 0 0; color: var(--muted); }
.after-scam-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.after-scam-grid article { padding: 1.15rem; border-top: 5px solid var(--coral); background: var(--paper); }
.after-scam-grid article > span { display: grid; width: 44px; height: 44px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--red-soft); font-weight: 950; }
.after-scam-grid h3 { margin: .75rem 0 .4rem; font-size: 1.14rem; }
.after-scam-grid p { margin: 0; color: var(--muted); }
.scam-help { display: grid; grid-template-columns: 1fr auto; gap: 1.2rem; align-items: center; margin-top: 1.4rem; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 15px; background: var(--blue-soft); }
.scam-help h3, .scam-help p { margin-top: 0; }
.scam-help p { margin-bottom: 0; }
.scam-guide-link { margin: 1.2rem 0 0; padding: .85rem 1rem; border-left: 6px solid var(--yellow); background: white; }
.scam-guide-link a { color: var(--blue-dark); font-weight: 850; }

.token-hero { padding-bottom: 2.2rem; }
.token-strip { display: flex; flex-wrap: wrap; gap: .45rem; max-width: 820px; margin-top: 1.4rem; padding: 1.1rem; border: 2px solid var(--ink); border-radius: 15px; background: var(--blue-soft); box-shadow: 7px 7px 0 var(--yellow); }
.token-strip span { padding: .45rem .65rem; border: 1.5px solid var(--ink); border-radius: 7px; background: white; font-weight: 900; }
.token-strip span:nth-child(3n) { background: var(--yellow); }
.token-strip small { width: 100%; margin-top: .35rem; color: var(--muted); }
.token-scenarios { padding-top: 2.5rem; }
.context-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr); gap: 1.2rem; align-items: start; }
.context-choice-list { display: grid; gap: .7rem; }
.context-choice-list button { display: grid; min-height: 88px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .8rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.context-choice-list button:hover { background: var(--blue-soft); transform: translateY(-2px); }
.context-choice-list button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.context-choice-list button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }
.context-choice-list button strong { align-self: end; }
.context-choice-list button small { color: var(--muted); font-size: .82rem; }
.context-answer { position: sticky; top: 102px; min-height: 430px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }
.context-answer-level { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.context-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem, 3vw, 2rem); }
.context-answer > p { color: #eef0ff; }
.context-meter { height: 18px; margin: 1.1rem 0; overflow: hidden; border: 1px solid rgba(255,255,255,.75); border-radius: 99px; background: rgba(255,255,255,.12); }
.context-meter span { display: block; width: var(--context-level); height: 100%; background: var(--yellow); transition: width .22s ease; }
.context-action { margin: 1.1rem 0; padding: .9rem; border-left: 6px solid var(--green); background: rgba(255,255,255,.1); }
.context-action p { margin: .25rem 0 0; color: white; }
.context-risk { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.window-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.context-desk { padding: 1.25rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--blue); }
.context-desk > div { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
.context-desk span { padding: .75rem; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--blue-soft); font-weight: 850; }
.context-desk span:nth-child(3n) { background: var(--yellow); }
.context-desk > p { margin: 1rem 0 0; padding-top: .8rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.token-definitions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.token-definitions article { padding: 1.1rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.token-definitions article > span { display: inline-block; padding: .3rem .55rem; border-radius: 99px; background: var(--yellow); font-size: .8rem; font-weight: 950; }
.token-definitions h3 { margin: .75rem 0 .35rem; font-size: 1.15rem; }
.token-definitions p { margin: 0; color: var(--muted); }
.count-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 7vw, 5rem); align-items: start; }
.count-reasons { display: grid; gap: .7rem; }
.count-reasons article { padding: 1rem; border-left: 6px solid var(--blue); background: var(--paper); }
.count-reasons p { margin: .25rem 0 0; color: var(--muted); }
.token-habits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.token-habits article { padding: 1rem; border-top: 5px solid var(--blue); background: var(--surface); }
.token-habits span { color: var(--blue-dark); font-weight: 950; }
.token-habits h3 { margin: .55rem 0 .35rem; font-size: 1.1rem; }
.token-habits p { margin: 0; color: var(--muted); }
.token-next { display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem; align-items: center; }
.token-next > span { display: grid; width: 58px; height: 58px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }
.token-next h2, .token-next p { margin-top: 0; }
.token-next h2 { margin-bottom: 0; }

.learning-hero { padding-bottom: 2.4rem; }
.learning-equation { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; max-width: 920px; margin-top: 1.5rem; padding: 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }
.learning-equation span { padding: .55rem .75rem; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--blue-soft); font-weight: 900; }
.learning-equation span:last-of-type { color: white; background: var(--blue); }
.learning-equation b { color: var(--blue-dark); font-size: 1.25rem; }
.learning-equation small { width: 100%; color: var(--muted); }
.learning-cycle-section { padding-top: 2.5rem; }
.learning-cycle-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr); gap: 1.2rem; align-items: start; }
.learning-stage-list { display: grid; gap: .7rem; }
.learning-stage-list button { display: grid; min-height: 88px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .8rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.learning-stage-list button:hover { background: var(--blue-soft); transform: translateY(-2px); }
.learning-stage-list button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.learning-stage-list button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }
.learning-stage-list button strong { align-self: end; }
.learning-stage-list button small { color: var(--muted); font-size: .82rem; }
.learning-stage-answer { position: sticky; top: 102px; min-height: 430px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }
.learning-stage-badge { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.learning-stage-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem, 3vw, 2rem); }
.learning-stage-answer > p { color: #eef0ff; }
.learning-stage-focus { margin: 1.1rem 0; padding: .9rem; border-left: 6px solid var(--green); background: rgba(255,255,255,.1); }
.learning-stage-focus p { margin: .25rem 0 0; color: white; }
.learning-stage-watch { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.model-layout, .conversation-learning, .quality-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.model-adjustment { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; padding: 1.15rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--blue); }
.model-adjustment div { min-height: 112px; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--blue-soft); }
.model-adjustment div:last-of-type { background: var(--yellow); }
.model-adjustment div span, .model-adjustment div strong { display: block; }
.model-adjustment div span { margin-bottom: .55rem; color: var(--muted); font-size: .76rem; font-weight: 850; text-transform: uppercase; }
.model-adjustment > p { grid-column: 1 / -1; margin: .35rem 0 0; color: var(--muted); font-size: .82rem; }
.dataset-sets, .learning-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dataset-sets article, .learning-methods article { padding: 1.15rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.dataset-sets article:nth-child(2), .learning-methods article:nth-child(2) { box-shadow: 6px 6px 0 var(--yellow); }
.dataset-sets article > span, .learning-methods article > span { display: inline-block; padding: .28rem .55rem; border-radius: 99px; color: white; background: var(--blue); font-size: .77rem; font-weight: 900; }
.dataset-sets h3, .learning-methods h3 { margin: .75rem 0 .4rem; }
.dataset-sets p, .learning-methods p { margin: 0; color: var(--muted); }
.learning-caveat { margin: 1.2rem 0 0; padding: 1rem; border-left: 6px solid var(--yellow); background: var(--surface); }
.answer-short { display: inline-block; margin: .2rem 0 1rem; padding: .5rem .75rem; border: 2px solid var(--ink); border-radius: 8px; background: var(--yellow); font-size: 1.15rem; font-weight: 950; }
.conversation-do-dont { display: grid; gap: .8rem; }
.conversation-do-dont article { display: grid; grid-template-columns: 42px 1fr; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }
.conversation-do-dont article > span { grid-row: 1 / 3; display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }
.conversation-do-dont h3 { margin: 0 0 .3rem; }
.conversation-do-dont p { margin: 0; color: var(--muted); }
.conversation-do-dont > a { padding: .85rem 1rem; border-left: 6px solid var(--yellow); color: var(--blue-dark); background: white; font-weight: 850; }
.quality-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.quality-checks article { padding: 1rem; border-top: 5px solid var(--blue); background: var(--paper); }
.quality-checks p { margin: .3rem 0 0; color: var(--muted); }

.data-hero { padding-bottom: 2.4rem; }
.data-ribbon { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 850px; margin-top: 1.5rem; padding: 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--green); }
.data-ribbon span { display: grid; min-width: 72px; min-height: 58px; place-items: center; padding: .55rem .7rem; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--blue-soft); font-weight: 900; }
.data-ribbon span:nth-child(2), .data-ribbon span:nth-child(5) { background: var(--yellow); }
.data-ribbon small { width: 100%; color: var(--muted); }
.data-lab-section { padding-top: 2.5rem; }
.data-lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr); gap: 1.2rem; align-items: start; }
.data-type-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.data-type-list button { display: grid; min-height: 134px; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: .75rem; padding: .95rem; border: 1.5px solid var(--ink); border-radius: 13px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.data-type-list button:hover { background: var(--blue-soft); transform: translateY(-2px); }
.data-type-list button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 5px 5px 0 var(--ink); transform: translate(-1px,-1px); }
.data-type-list button > span { grid-row: 1 / 3; display: grid; width: 42px; height: 42px; place-items: center; border: 1.5px solid var(--ink); border-radius: 10px; color: white; background: var(--blue); font-weight: 950; }
.data-type-list button strong { align-self: end; }
.data-type-list button small { color: var(--muted); }
.data-lab-answer { position: sticky; top: 102px; min-height: 430px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }
.data-answer-tag { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.data-lab-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem, 3vw, 2rem); }
.data-lab-answer > p { color: #eef0ff; }
.data-answer-use { margin: 1.1rem 0; padding: .9rem; border-left: 6px solid var(--green); background: rgba(255,255,255,.1); }
.data-answer-use p { margin: .25rem 0 0; color: white; }
.data-answer-risk { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.data-journey { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.data-journey article { padding: 1rem; border-top: 5px solid var(--blue); background: var(--paper); }
.data-journey article:nth-child(3) { border-color: var(--green); }
.data-journey span { display: grid; width: 36px; height: 36px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-weight: 950; }
.data-journey h3 { margin: .7rem 0 .35rem; font-size: 1.08rem; }
.data-journey p { margin: 0; color: var(--muted); font-size: .9rem; }
.label-example, .personal-data-layout, .before-share { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.label-demo { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center; padding: 1.15rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--blue); }
.label-demo > div { min-height: 138px; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--blue-soft); }
.label-demo > div:last-of-type { background: var(--yellow); }
.label-demo div > span { display: block; margin-bottom: .6rem; color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.label-demo p { margin: 0; }
.label-demo small { grid-column: 1 / -1; color: var(--muted); }
.data-status-list { display: grid; gap: .75rem; }
.data-status-list article { display: grid; grid-template-columns: 105px 1fr; gap: .9rem; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }
.data-status-list span { align-self: start; padding: .3rem .55rem; border-radius: 99px; color: white; background: var(--blue); font-size: .78rem; font-weight: 900; text-align: center; }
.data-status-list p { margin: 0; color: var(--muted); }
.before-share { align-items: start; }
.before-share-list { display: grid; gap: .7rem; counter-reset: share-step; }
.before-share-list article { display: grid; grid-template-columns: 34px 1fr; padding: .9rem; background: var(--paper); counter-increment: share-step; }
.before-share-list article::before { content: counter(share-step); grid-row: 1 / 3; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }
.before-share-list article span { color: var(--muted); }

.work-future-hero { padding-bottom: 2.4rem; }
.job-equation { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; max-width: 920px; margin-top: 1.5rem; padding: 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }
.job-equation span { padding: .52rem .7rem; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--blue-soft); font-weight: 900; }
.job-equation span:nth-of-type(2), .job-equation span:nth-of-type(4) { background: var(--yellow); }
.job-equation b { color: var(--blue-dark); }
.job-equation small { width: 100%; color: var(--muted); }
.job-lab-section { padding-top: 2.5rem; }
.job-lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr); gap: 1.2rem; align-items: start; }
.job-task-list { display: grid; gap: .7rem; }
.job-task-list button { display: grid; min-height: 88px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .8rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.job-task-list button:hover { background: var(--blue-soft); transform: translateY(-2px); }
.job-task-list button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.job-task-list button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }
.job-task-list button strong { align-self: end; }
.job-task-list button small { color: var(--muted); font-size: .82rem; }
.job-lab-answer { position: sticky; top: 102px; min-height: 430px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }
.job-answer-tag { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.job-lab-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem, 3vw, 2rem); }
.job-lab-answer > p { color: #eef0ff; }
.job-human-value { margin: 1.1rem 0; padding: .9rem; border-left: 6px solid var(--green); background: rgba(255,255,255,.1); }
.job-human-value p { margin: .25rem 0 0; color: white; }
.job-test { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.work-effects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.work-effects article { padding: 1.15rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.work-effects article:nth-child(2) { box-shadow: 6px 6px 0 var(--yellow); }
.work-effects article > span { display: inline-block; padding: .3rem .58rem; border-radius: 99px; color: white; background: var(--blue); font-size: .78rem; font-weight: 900; }
.work-effects h3 { margin: .75rem 0 .4rem; }
.work-effects p { margin: 0; color: var(--muted); }
.task-not-job, .own-job-layout, .work-quality-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.task-stack { display: grid; gap: .7rem; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--blue); }
.task-stack span { width: var(--task-width); padding: .72rem; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--blue-soft); font-weight: 850; }
.task-stack span:nth-child(2n) { background: var(--yellow); }
.task-stack small { color: var(--muted); }
.future-skills { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.future-skills article { padding: 1rem; border-top: 5px solid var(--blue); background: var(--paper); }
.future-skills span { color: var(--blue-dark); font-weight: 950; }
.future-skills h3 { margin: .6rem 0 .35rem; font-size: 1.05rem; }
.future-skills p { margin: 0; color: var(--muted); font-size: .9rem; }
.own-job-questions, .work-quality-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.own-job-questions article, .work-quality-list article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }
.own-job-questions p, .work-quality-list p { margin: .3rem 0 0; color: var(--muted); }
.work-quality-list article { border-top: 5px solid var(--blue); border-radius: 0; }

.decision-hero { padding-bottom: 2.4rem; }
.decision-scale { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; max-width: 900px; margin-top: 1.5rem; padding: 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }
.decision-scale span { padding: .55rem .75rem; border: 1.5px solid var(--ink); border-radius: 9px; background: var(--blue-soft); font-weight: 900; }
.decision-scale span:last-of-type { color: white; background: var(--blue-dark); }
.decision-scale b { color: var(--blue-dark); }
.decision-scale small { width: 100%; color: var(--muted); }
.decision-answer { box-shadow: 8px 8px 0 var(--coral); }
.decision-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.decision-roles article { padding: 1.15rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }
.decision-roles article:nth-child(3) { box-shadow: 6px 6px 0 var(--coral); }
.decision-roles article > span { display: inline-block; padding: .3rem .58rem; border-radius: 99px; color: white; background: var(--blue); font-size: .78rem; font-weight: 900; }
.decision-roles h3 { margin: .75rem 0 .4rem; }
.decision-roles p { margin: 0; color: var(--muted); }
.effective-control, .automation-bias, .rights-layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.control-abilities { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.control-abilities article { display: grid; grid-template-columns: 38px 1fr; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }
.control-abilities article:last-child { grid-column: 1 / -1; }
.control-abilities span { grid-row: 1 / 3; display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }
.control-abilities p { margin: .25rem 0 0; color: var(--muted); }
.score-warning { padding: 1.2rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }
.score-warning > strong { display: block; color: var(--blue-dark); font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1; }
.score-warning > span { display: block; margin: .4rem 0 1rem; font-weight: 900; }
.score-warning ul { display: grid; gap: .45rem; margin: 0; padding-left: 1.2rem; color: var(--muted); }
.rights-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.rights-list article { padding: 1rem; border-top: 5px solid var(--blue); background: var(--paper); }
.rights-list p { margin: .3rem 0 0; color: var(--muted); }
.legal-note { padding: .8rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); font-size: .9rem; }
.decision-questions { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.decision-questions article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }
.decision-questions span { color: var(--blue-dark); font-weight: 950; }
.decision-questions p { margin: .55rem 0 0; }

.image-hero { padding-bottom: 2.7rem; overflow: hidden; }
.image-hero-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.image-hero-note { display: flex; flex-wrap: wrap; gap: .45rem 1rem; max-width: 720px; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }
.image-hero-note strong { color: var(--blue-dark); }
.noise-preview { position: relative; min-height: 360px; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 22px; background: repeating-radial-gradient(circle at 20% 30%, #dfe5ff 0 2px, transparent 3px 11px), var(--blue-dark); box-shadow: 10px 10px 0 var(--yellow); overflow: hidden; }
.preview-frame { position: relative; width: 62%; aspect-ratio: 1; border: 2px solid white; border-radius: 42% 42% 18% 18%; background: linear-gradient(155deg, rgba(255,216,77,.85), rgba(79,211,180,.7)); overflow: hidden; transform: rotate(-3deg); }
.preview-frame span { position: absolute; inset: 48% -10% -15%; border-radius: 50% 50% 0 0; background: #1769e0; }
.preview-frame i { position: absolute; width: 28%; height: 42%; left: 36%; bottom: 18%; border-radius: 50% 50% 35% 35%; background: var(--coral); }
.preview-frame b { position: absolute; width: 9%; aspect-ratio: 1; left: 46%; top: 28%; border-radius: 50%; background: white; box-shadow: 0 0 0 8px rgba(255,255,255,.22); }
.noise-preview small { position: absolute; bottom: 1rem; color: white; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.noise-dot { position: absolute; width: 11px; aspect-ratio: 1; border-radius: 50%; background: white; opacity: .7; }
.noise-dot.n1 { top: 16%; left: 12%; }.noise-dot.n2 { top: 23%; right: 14%; }.noise-dot.n3 { bottom: 22%; left: 17%; }
.image-lab-section { padding-top: 2.6rem; }
.image-prompt-lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, .88fr); gap: 1.2rem; align-items: start; }
.image-prompt-parts { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.image-prompt-parts button { display: grid; min-height: 132px; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; gap: .25rem .8rem; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.image-prompt-parts button:hover { background: var(--blue-soft); transform: translateY(-2px); }
.image-prompt-parts button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 5px 5px 0 var(--ink); transform: translate(-1px,-1px); }
.image-prompt-parts button > span { grid-row: 1 / 3; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }
.image-prompt-parts button strong { align-self: end; }.image-prompt-parts button small { color: var(--muted); }
.image-prompt-answer { position: sticky; top: 102px; min-height: 430px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--coral); }
.image-answer-tag { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.image-prompt-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem, 3vw, 2rem); }
.image-prompt-answer > p { color: #eef0ff; }
.image-prompt-result { margin: 1.1rem 0; padding: .95rem; border-left: 6px solid var(--green); background: rgba(255,255,255,.1); }
.image-prompt-result span { display: block; margin-bottom: .35rem; color: #dfe5ff; font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.image-prompt-result p { margin: 0; color: white; font-weight: 800; }
.image-answer-watch { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.diffusion-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
.diffusion-steps article { padding: .8rem; border: 1.5px solid var(--ink); background: var(--paper); }
.diffusion-tile { height: 130px; border: 1px solid var(--ink); background-color: var(--blue-dark); }
.noise-a { background-image: repeating-radial-gradient(circle at 30% 20%, white 0 1px, transparent 2px 8px); }
.noise-b { background-image: radial-gradient(circle at 50% 45%, rgba(255,216,77,.7) 0 15%, transparent 16%), repeating-radial-gradient(circle at 20% 30%, white 0 1px, transparent 2px 11px); }
.noise-c { background-image: radial-gradient(ellipse at 50% 70%, var(--blue) 0 35%, transparent 36%), radial-gradient(circle at 50% 35%, var(--coral) 0 13%, transparent 14%), repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 0 1px, transparent 2px 16px); }
.noise-d { background-image: radial-gradient(ellipse at 50% 75%, var(--blue) 0 38%, transparent 39%), radial-gradient(circle at 50% 38%, var(--coral) 0 15%, transparent 16%), linear-gradient(155deg, var(--yellow), var(--green)); }
.diffusion-steps article > span { display: grid; width: 32px; height: 32px; margin-top: -18px; position: relative; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-weight: 950; }
.diffusion-steps h3 { margin: .6rem 0 .35rem; }.diffusion-steps p { margin: 0; color: var(--muted); font-size: .9rem; }
.image-nuance { margin: 1.2rem 0 0; padding: .8rem 1rem; border-left: 6px solid var(--blue); background: var(--paper); color: var(--muted); }
.image-explainer, .variation-layout, .prompt-image-method, .image-reflexes { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.image-caveat { padding: 1rem; border-left: 6px solid var(--coral); background: var(--blue-soft); }
.not-collage { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center; }
.not-collage article { min-height: 210px; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); }
.not-collage article:last-child { box-shadow: 7px 7px 0 var(--green); }.not-collage > b { color: var(--blue-dark); font-size: 2rem; }
.not-collage span { display: inline-block; padding: .3rem .55rem; border-radius: 99px; color: white; background: var(--blue); font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.not-collage strong { display: block; margin: 1rem 0 .5rem; font-size: 1.5rem; }.not-collage p { color: var(--muted); }
.seed-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: .85rem; }
.seed-cards article { padding: .8rem; border: 1.5px solid var(--ink); background: var(--paper); }
.seed-cards span { display: inline-block; margin-bottom: .7rem; color: var(--blue-dark); font-weight: 950; }
.seed-scene { position: relative; height: 190px; overflow: hidden; background: linear-gradient(var(--yellow) 0 55%, var(--green) 56%); }
.seed-scene::before { content: ''; position: absolute; width: 65%; height: 45%; bottom: -12%; left: 17%; border-radius: 50% 50% 0 0; background: var(--blue); }
.seed-scene i { position: absolute; width: 28%; height: 42%; border-radius: 48% 48% 34% 34%; background: var(--coral); }
.scene-one i { left: 36%; bottom: 23%; }.scene-two { background: linear-gradient(var(--blue-soft) 0 35%, var(--green) 36%); }.scene-two i { left: 17%; bottom: 18%; }
.seed-cards p { margin: .65rem 0 0; color: var(--muted); font-size: .88rem; }
.image-operations, .image-risks { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.image-operations article, .image-risks article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }
.image-operations article:nth-child(2), .image-risks article:nth-child(3) { box-shadow: 6px 6px 0 var(--yellow); }
.image-operations span, .image-risks span { display: inline-block; padding: .28rem .52rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; }
.image-operations h3, .image-risks h3 { margin: .75rem 0 .35rem; }.image-operations p, .image-risks p { margin: 0; color: var(--muted); }
.prompt-image-method ol, .image-reflexes ol { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; counter-reset: image-prompt; }
.prompt-image-method li { display: grid; grid-template-columns: 1fr; padding: .85rem 1rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); counter-increment: image-prompt; }
.prompt-image-method li::before { content: '0' counter(image-prompt); grid-row: 1 / 3; float: left; margin-right: .75rem; color: var(--blue-dark); font-weight: 950; }
.prompt-image-method li span { color: var(--muted); font-size: .9rem; }
.image-reflexes { align-items: start; }.image-reflexes li { display: grid; grid-template-columns: 42px 1fr; gap: .7rem; align-items: start; padding: .75rem; background: var(--paper); }
.image-reflexes li span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .76rem; font-weight: 950; }.image-reflexes li p { margin: .3rem 0 0; }

.sound-hero { padding-bottom: 2.7rem; overflow: hidden; }
.sound-hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.sound-proof { display: flex; flex-wrap: wrap; gap: .4rem 1rem; max-width: 720px; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--coral); background: var(--paper); }
.sound-proof strong { color: var(--blue-dark); }
.wave-stage { position: relative; min-height: 350px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 2px solid var(--ink); border-radius: 22px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--green); overflow: hidden; }
.wave-stage::before { content: ''; position: absolute; inset: 50% 8% auto; height: 1px; background: rgba(255,255,255,.28); }
.wave-bar { width: 10px; height: var(--wave-height); border-radius: 99px; background: var(--yellow); animation: sound-pulse 1.8s ease-in-out infinite alternate; }
.w1 { --wave-height: 52px; }.w2 { --wave-height: 116px; animation-delay: -.2s; }.w3 { --wave-height: 78px; animation-delay: -.5s; }.w4 { --wave-height: 168px; animation-delay: -.8s; }.w5 { --wave-height: 135px; animation-delay: -.35s; }.w6 { --wave-height: 74px; animation-delay: -.7s; }.w7 { --wave-height: 124px; animation-delay: -.1s; }.w8 { --wave-height: 44px; animation-delay: -.6s; }
.wave-stage i, .wave-stage em { position: absolute; bottom: 1.2rem; padding: .32rem .58rem; border: 1px solid white; border-radius: 99px; color: white; font-size: .78rem; font-style: normal; font-weight: 900; text-transform: uppercase; }.wave-stage i { left: 1.2rem; }.wave-stage em { right: 1.2rem; }.wave-stage b { position: absolute; bottom: 1.3rem; color: var(--green); }
@keyframes sound-pulse { to { transform: scaleY(.65); opacity: .72; } }
.sound-lab-section { padding-top: 2.6rem; }
.sound-lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(350px, .88fr); gap: 1.2rem; align-items: start; }
.sound-case-list { display: grid; gap: .7rem; }
.sound-case-list button { display: grid; min-height: 88px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .8rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.sound-case-list button:hover { background: var(--blue-soft); transform: translateY(-2px); }.sound-case-list button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.sound-case-list button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.sound-case-list button strong { align-self: end; }.sound-case-list button small { color: var(--muted); }
.sound-answer { position: sticky; top: 102px; min-height: 410px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }
.sound-answer-tag { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.sound-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem, 3vw, 2rem); }.sound-answer > p { color: #eef0ff; }
.sound-input { margin: 1.1rem 0; padding: .9rem; border-left: 6px solid var(--green); background: rgba(255,255,255,.1); }.sound-input p { margin: .25rem 0 0; color: white; }.sound-watch { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.voice-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .8rem; align-items: center; }
.voice-chain article { min-height: 215px; padding: 1.1rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }.voice-chain > b { color: var(--blue-dark); font-size: 1.8rem; }
.voice-chain article > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.voice-chain h3 { margin: .8rem 0 .4rem; }.voice-chain p { margin: 0; color: var(--muted); }
.sound-nuance { margin: 1.2rem 0 0; padding: .8rem 1rem; border-left: 6px solid var(--blue); background: var(--paper); color: var(--muted); }
.clone-layout, .music-layout, .identity-check, .publish-audio { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.clone-warning { padding: 1rem; border-left: 6px solid var(--coral); background: var(--blue-soft); }
.voice-print { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .6rem; align-items: center; padding: 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }.voice-print > b { color: var(--blue-dark); }
.voice-print > div { min-height: 155px; display: flex; flex-direction: column; justify-content: space-between; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--blue-soft); }.voice-print > div:nth-of-type(2) { background: var(--yellow); }.voice-print span { color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; }.voice-print strong { color: var(--blue-dark); line-height: 1.6; }
.mini-wave { display: block; height: 55px; background: repeating-linear-gradient(90deg, var(--blue) 0 4px, transparent 4px 9px); clip-path: polygon(0 45%,8% 25%,16% 70%,24% 10%,32% 80%,40% 30%,48% 65%,56% 15%,64% 78%,72% 38%,80% 58%,88% 20%,100% 48%,100% 58%,88% 30%,80% 68%,72% 48%,64% 88%,56% 25%,48% 75%,40% 40%,32% 90%,24% 20%,16% 80%,8% 35%,0 55%); }.mini-wave.alt { background-color: var(--coral); }
.sound-parts, .audio-limits { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }.sound-parts article, .audio-limits article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.sound-parts article:nth-child(2), .audio-limits article:nth-child(3) { box-shadow: 6px 6px 0 var(--yellow); }
.sound-parts span { display: inline-block; padding: .28rem .52rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; }.sound-parts h3 { margin: .75rem 0 .35rem; }.sound-parts p, .audio-limits p { margin: 0; color: var(--muted); }
.audio-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }.audio-types article { min-height: 180px; display: flex; flex-direction: column; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }.audio-types article > span { display: grid; width: 45px; height: 45px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.audio-types strong { margin: .8rem 0 .35rem; font-size: 1.15rem; }.audio-types p { margin: 0; color: var(--muted); font-size: .9rem; }
.identity-check { align-items: start; }.identity-check ol { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }.identity-check li { display: grid; grid-template-columns: 40px 1fr; gap: .75rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.identity-check li > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.identity-check li p { margin: .2rem 0 0; color: var(--muted); }
.publish-audio { align-items: start; }.publish-audio > div:nth-child(2) { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }.publish-audio article { padding: .9rem; border-top: 5px solid var(--blue); background: var(--paper); }.publish-audio article span { color: var(--blue-dark); font-weight: 950; }.publish-audio article p { margin: .3rem 0 0; color: var(--muted); }.audio-law-note { grid-column: 1 / -1; padding: .8rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); font-size: .9rem; }

.video-hero { padding-bottom: 2.7rem; overflow: hidden; }
.video-hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem, 7vw, 5rem); align-items: center; }
.video-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; max-width: 720px; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }.video-key strong { color: var(--blue-dark); }
.frame-strip { position: relative; min-height: 350px; display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; padding: 1.2rem 1.2rem 3.6rem; border: 2px solid var(--ink); border-radius: 22px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--coral); transform: rotate(1deg); }
.frame-strip > div { position: relative; border: 1.5px solid white; border-radius: 8px; background: linear-gradient(150deg,var(--yellow),var(--green)); overflow: hidden; }.frame-strip > div::after { content: ''; position: absolute; width: 72%; height: 48%; left: 14%; bottom: -16%; border-radius: 50% 50% 0 0; background: var(--blue); }.frame-strip i { position: absolute; width: 22%; height: 36%; left: var(--frame-x, 18%); bottom: 25%; border-radius: 48% 48% 30% 30%; background: var(--coral); z-index: 1; }.frame-strip > div:nth-child(2) { --frame-x: 32%; }.frame-strip > div:nth-child(3) { --frame-x: 48%; }.frame-strip > div:nth-child(4) { --frame-x: 64%; }.frame-strip span { position: absolute; top: .35rem; left: .45rem; z-index: 2; color: var(--blue-dark); font-weight: 950; }.frame-strip small { position: absolute; bottom: 1.15rem; left: 0; right: 0; color: white; font-weight: 900; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
.video-lab-section { padding-top: 2.6rem; }.video-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(350px,.88fr); gap: 1.2rem; align-items: start; }.video-part-list { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }
.video-part-list button { display: grid; min-height: 130px; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; gap: .25rem .8rem; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.video-part-list button:hover { background: var(--blue-soft); transform: translateY(-2px); }.video-part-list button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 5px 5px 0 var(--ink); transform: translate(-1px,-1px); }.video-part-list button > span { grid-row: 1 / 3; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.video-part-list button strong { align-self: end; }.video-part-list button small { color: var(--muted); }
.video-answer { position: sticky; top: 102px; min-height: 430px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--green); }.video-answer-tag { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }.video-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem,3vw,2rem); }.video-answer > p { color: #eef0ff; }.video-prompt { margin: 1.1rem 0; padding: .9rem; border-left: 6px solid var(--yellow); background: rgba(255,255,255,.1); }.video-prompt p { margin: .25rem 0 0; color: white; }.video-watch { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.video-process { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }.video-process article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.video-process article > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.video-process h3 { margin: .75rem 0 .35rem; }.video-process p { margin: 0; color: var(--muted); }.video-nuance { margin: 1.2rem 0 0; padding: .8rem 1rem; border-left: 6px solid var(--blue); background: var(--paper); color: var(--muted); }
.consistency-layout, .video-method, .verify-video, .publish-video { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.drift-demo { display: grid; grid-template-columns: repeat(4,1fr); gap: .55rem; }.drift-demo article { padding: .65rem; border: 1.5px solid var(--ink); background: var(--paper); }.drift-demo span { display: block; color: var(--blue-dark); font-size: .76rem; font-weight: 950; }.drift-object { display: block; width: 54px; height: 72px; margin: 1rem auto; border-radius: 46% 46% 30% 30%; background: var(--coral); }.d2 { width: 58px; transform: rotate(3deg); }.d3 { background: var(--yellow); }.d4 { width: 68px; border-radius: 25% 55% 20% 45%; transform: rotate(-8deg); }.drift-demo small { display: block; color: var(--muted); font-size: .72rem; text-align: center; }
.video-modes { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }.video-modes article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.video-modes article:nth-child(2) { box-shadow: 6px 6px 0 var(--yellow); }.video-modes span { display: inline-block; padding: .28rem .52rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; }.video-modes h3 { margin: .75rem 0 .35rem; }.video-modes p { margin: 0; color: var(--muted); }
.video-method { align-items: start; }.video-method ol, .verify-video ol { display: grid; gap: .6rem; margin: 0; padding: 0; list-style: none; }.video-method ol { grid-template-columns: repeat(2,1fr); }.video-method li { padding: .85rem 1rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.video-method li span { display: block; margin-top: .25rem; color: var(--muted); font-size: .9rem; }
.video-limits { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }.video-limits article { padding: 1rem; border-top: 5px solid var(--blue); background: var(--paper); }.video-limits article:nth-child(3), .video-limits article:nth-child(5) { border-color: var(--coral); }.video-limits p { margin: .3rem 0 0; color: var(--muted); }
.verify-video { align-items: start; }.verify-video li { display: grid; grid-template-columns: 44px 1fr; gap: .7rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.verify-video li span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .76rem; font-weight: 950; }.verify-video li p { margin: .3rem 0 0; }
.publish-video { align-items: start; }.publish-video > div:nth-child(2) { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.publish-video article { padding: .9rem; border-top: 5px solid var(--blue); background: var(--paper); }.publish-video article span { color: var(--blue-dark); font-weight: 950; }.publish-video article p { margin: .3rem 0 0; color: var(--muted); }.video-law-note { grid-column: 1 / -1; padding: .8rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); font-size: .9rem; }

.multimodal-hero { padding-bottom: 2.7rem; overflow: hidden; }.multimodal-hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.multi-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; max-width: 720px; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--green); background: var(--paper); }.multi-key strong { color: var(--blue-dark); }
.modality-map { position: relative; min-height: 360px; border: 2px solid var(--ink); border-radius: 50%; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--yellow); }.modality-map::before, .modality-map::after { content: ''; position: absolute; inset: 50% 15%; height: 2px; background: rgba(255,255,255,.4); transform: rotate(45deg); }.modality-map::after { transform: rotate(-45deg); }.modality-center { position: absolute; z-index: 2; inset: 50% auto auto 50%; display: grid; width: 104px; height: 104px; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; transform: translate(-50%,-50%); }.modality-node { position: absolute; z-index: 2; display: grid; width: 82px; height: 82px; place-items: center; border: 2px solid var(--ink); border-radius: 18px; color: var(--blue-dark); background: var(--yellow); font-size: 1.5rem; font-weight: 950; }.modality-node small { font-size: .7rem; text-transform: uppercase; }.node-text { top: 8%; left: 12%; }.node-image { top: 8%; right: 12%; background: var(--green); }.node-audio { bottom: 8%; left: 12%; background: white; }.node-video { bottom: 8%; right: 12%; background: var(--coral); }
.multi-lab-section { padding-top: 2.6rem; }.multi-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(350px,.88fr); gap: 1.2rem; align-items: start; }.multi-case-list { display: grid; gap: .7rem; }.multi-case-list button { display: grid; min-height: 88px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .8rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.multi-case-list button:hover { background: var(--blue-soft); transform: translateY(-2px); }.multi-case-list button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }.multi-case-list button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.multi-case-list button strong { align-self: end; }.multi-case-list button small { color: var(--muted); }
.multi-answer { position: sticky; top: 102px; min-height: 430px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--coral); }.multi-answer-tag { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }.multi-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem,3vw,2rem); }.multi-answer > p { color: #eef0ff; }.multi-signals { margin: 1.1rem 0; padding: .9rem; border-left: 6px solid var(--green); background: rgba(255,255,255,.1); }.multi-signals p { margin: .25rem 0 0; color: white; }.multi-watch { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.modality-cards, .io-grid, .multi-risks { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }.modality-cards article, .io-grid article, .multi-risks article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.modality-cards article:nth-child(2), .io-grid article:nth-child(3) { box-shadow: 6px 6px 0 var(--yellow); }.modality-cards span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.modality-cards h3, .io-grid h3 { margin: .7rem 0 .35rem; }.modality-cards p, .io-grid p, .multi-risks p { margin: 0; color: var(--muted); }.io-grid span { display: inline-block; padding: .28rem .52rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; }
.common-space, .sampling-layout, .multi-method { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.multi-caveat { padding: 1rem; border-left: 6px solid var(--coral); background: var(--blue-soft); }.alignment-demo { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center; padding: 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }.alignment-demo > div { min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--blue-soft); }.alignment-demo > b { color: var(--blue-dark); font-size: 1.7rem; }.alignment-demo span { color: var(--muted); font-size: .76rem; font-weight: 900; text-transform: uppercase; }.alignment-demo > small { grid-column: 1 / -1; color: var(--muted); text-align: center; }.alignment-grid { height: 90px; background: linear-gradient(90deg,transparent 48%,rgba(255,255,255,.8) 49% 51%,transparent 52%),linear-gradient(transparent 48%,rgba(255,255,255,.8) 49% 51%,transparent 52%),linear-gradient(140deg,var(--yellow),var(--green)); }.alignment-demo strong { color: var(--blue-dark); line-height: 1.7; }
.sampling-strip { display: grid; grid-template-columns: repeat(9,1fr); gap: .35rem; padding: 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--blue); }.sampling-strip span { display: grid; height: 70px; place-items: center; border: 1.5px solid var(--ink); border-radius: 8px; color: var(--muted); background: #eee; font-weight: 950; opacity: .45; }.sampling-strip .kept { color: white; background: var(--blue); opacity: 1; }.sampling-strip small { grid-column: 1 / -1; color: var(--muted); }
.multi-errors { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .75rem; align-items: center; }.multi-errors article { min-height: 180px; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.multi-errors article > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.multi-errors strong { display: block; margin: .75rem 0 .35rem; }.multi-errors p { margin: 0; color: var(--muted); }.multi-errors > b { color: var(--blue-dark); font-size: 1.7rem; }
.multi-method { align-items: start; }.multi-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; margin: 0; padding: 0; list-style: none; }.multi-method li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.multi-method li span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .76rem; font-weight: 950; }.multi-method li p { margin: .25rem 0 0; }

.reason-hero { padding-bottom: 2.7rem; overflow: hidden; }.reason-hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.reason-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; max-width: 720px; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }.reason-key strong { color: var(--blue-dark); }
.reason-board { min-height: 350px; display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-content: center; align-items: center; padding: 1.3rem; border: 2px solid var(--ink); border-radius: 22px; color: white; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--green); transform: rotate(1deg); }.reason-board span { display: grid; min-height: 88px; place-items: center; padding: .8rem; border: 1.5px solid white; border-radius: 13px; background: rgba(255,255,255,.1); font-weight: 950; }.reason-board b { font-size: 1.7rem; }.reason-board strong { grid-column: 1 / -1; padding: .8rem; border-radius: 10px; color: var(--blue-dark); background: var(--yellow); text-align: center; }
.reason-lab-section { padding-top: 2.6rem; }.reason-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(350px,.88fr); gap: 1.2rem; align-items: start; }.reason-case-list { display: grid; gap: .7rem; }.reason-case-list button { display: grid; min-height: 88px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .8rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.reason-case-list button:hover { background: var(--blue-soft); transform: translateY(-2px); }.reason-case-list button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }.reason-case-list button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.reason-case-list button strong { align-self: end; }.reason-case-list button small { color: var(--muted); }
.reason-answer { position: sticky; top: 102px; min-height: 430px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }.reason-answer-tag { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }.reason-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem,3vw,2rem); }.reason-answer > p { color: #eef0ff; }.reason-check { margin: 1.1rem 0; padding: .9rem; border-left: 6px solid var(--green); background: rgba(255,255,255,.1); }.reason-check p { margin: .25rem 0 0; color: white; }.reason-watch { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.reason-meaning, .reason-process, .reason-method, .reason-prompt { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.reason-distinction { display: grid; gap: .8rem; }.reason-distinction article { padding: 1.1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.reason-distinction article:first-child { box-shadow: 7px 7px 0 var(--green); }.reason-distinction article:last-child { box-shadow: 7px 7px 0 var(--coral); }.reason-distinction span { display: block; margin-bottom: .45rem; color: var(--muted); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.reason-families { display: grid; grid-template-columns: repeat(5,1fr); gap: .7rem; }.reason-families article { padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.reason-families span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.reason-families h3 { margin: .75rem 0 .35rem; }.reason-families p { margin: 0; color: var(--muted); font-size: .9rem; }
.reason-caveat { padding: 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.reason-process ol, .reason-method ol { display: grid; gap: .65rem; margin: 0; padding: 0; list-style: none; }.reason-process ol { grid-template-columns: repeat(2,1fr); }.reason-process li, .reason-method li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.reason-process li span, .reason-method li span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .76rem; font-weight: 950; }.reason-process li p, .reason-method li p { margin: .2rem 0 0; }
.reason-failures { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }.reason-failures article { padding: 1rem; border-top: 5px solid var(--blue); background: var(--paper); }.reason-failures article:nth-child(2), .reason-failures article:nth-child(5) { border-color: var(--coral); }.reason-failures p { margin: .35rem 0 0; color: var(--muted); }.reason-method ol { grid-template-columns: repeat(2,1fr); }.reason-prompt { align-items: center; }.reason-prompt blockquote { margin: 0; padding: 1.3rem; border: 2px solid var(--ink); border-radius: 15px; background: var(--blue-soft); box-shadow: 8px 8px 0 var(--yellow); font-size: 1.08rem; font-weight: 700; line-height: 1.65; }

.trio-hero { padding-bottom: 2.7rem; overflow: hidden; }.trio-hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.trio-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; max-width: 720px; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.trio-key strong { color: var(--blue-dark); }
.trio-map { min-height: 350px; display: grid; grid-template-columns: repeat(3,1fr); gap: .6rem; align-content: center; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 22px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--yellow); transform: rotate(-1deg); }.trio-map span { min-height: 145px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: .7rem; border: 1.5px solid white; border-radius: 13px; color: white; background: rgba(255,255,255,.09); font-weight: 950; text-align: center; }.trio-map span b { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: .65rem; border-radius: 50%; color: var(--blue-dark); background: var(--yellow); }.trio-map span small { margin-top: .35rem; color: #dfe5ff; }.trio-map > strong { grid-column: 1 / -1; padding: .7rem; border-radius: 9px; color: var(--blue-dark); background: var(--green); text-align: center; }
.trio-lab-section { padding-top: 2.6rem; }.trio-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(350px,.88fr); gap: 1.2rem; align-items: start; }.trio-case-list { display: grid; gap: .65rem; }.trio-case-list button { display: grid; min-height: 78px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .8rem; padding: .75rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.trio-case-list button:hover { background: var(--blue-soft); transform: translateY(-2px); }.trio-case-list button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }.trio-case-list button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.trio-case-list button strong { align-self: end; }.trio-case-list button small { color: var(--muted); }
.trio-answer { position: sticky; top: 102px; min-height: 440px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--green); }.trio-answer-tag { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }.trio-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem,3vw,2rem); }.trio-answer > p { color: #eef0ff; }.trio-badges { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0; }.trio-badges span { padding: .45rem .65rem; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; color: #bdc5df; font-size: .78rem; font-weight: 900; }.trio-badges span.is-on { border-color: var(--green); color: var(--blue-dark); background: var(--green); }.trio-question { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.trio-definitions { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }.trio-definitions article { display: flex; flex-direction: column; min-height: 260px; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.trio-definitions article:nth-child(2) { box-shadow: 7px 7px 0 var(--yellow); }.trio-definitions article:nth-child(3) { box-shadow: 7px 7px 0 var(--green); }.trio-definitions span { align-self: flex-start; padding: .3rem .55rem; border-radius: 99px; color: white; background: var(--blue); font-size: .76rem; font-weight: 900; }.trio-definitions h3 { margin: .85rem 0 .4rem; }.trio-definitions p { color: var(--muted); }.trio-definitions strong { margin-top: auto; color: var(--blue-dark); font-size: .88rem; }
.not-scale, .inside-system, .trio-method { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.not-scale-grid { display: grid; gap: .7rem; }.not-scale-grid article { padding: .9rem 1rem; border-left: 6px solid var(--blue); background: var(--paper); }.not-scale-grid article:nth-child(2) { border-color: var(--yellow); }.not-scale-grid article:nth-child(3) { border-color: var(--green); }.not-scale-grid p { margin: .3rem 0 0; color: var(--muted); }
.system-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1.2fr; gap: .45rem; align-items: center; padding: 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--coral); }.system-chain span { display: grid; min-height: 90px; place-items: center; padding: .6rem; border-radius: 10px; color: white; background: var(--blue); font-weight: 900; text-align: center; }.system-chain b { color: var(--blue-dark); }.system-chain small { grid-column: 1 / -1; color: var(--muted); text-align: center; }
.trio-risks { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }.trio-risks article { padding: 1rem; border-top: 5px solid var(--blue); background: var(--paper); }.trio-risks article:last-child { border-color: var(--coral); }.trio-risks p { margin: .35rem 0 0; color: var(--muted); }.trio-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; margin: 0; padding: 0; list-style: none; }.trio-method li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.trio-method li span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .76rem; font-weight: 950; }.trio-method li p { margin: .2rem 0 0; }

.deploy-hero { padding-bottom: 2.7rem; overflow: hidden; }.deploy-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.deploy-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; max-width: 720px; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--green); background: var(--paper); }.deploy-key strong { color: var(--blue-dark); }
.deploy-matrix { position: relative; min-height: 370px; display: grid; grid-template-columns: repeat(2,1fr); gap: .55rem; padding: 3rem 1rem 1rem 3.5rem; border: 2px solid var(--ink); border-radius: 20px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--coral); }.deploy-matrix article { display: grid; place-content: center; padding: .8rem; border: 1.5px solid white; border-radius: 10px; color: white; background: rgba(255,255,255,.08); text-align: center; }.deploy-matrix article:first-of-type { background: rgba(53,217,170,.2); }.deploy-matrix article:last-of-type { background: rgba(255,216,77,.15); }.deploy-matrix b { display: block; }.deploy-matrix small { margin-top: .35rem; color: #dfe5ff; }.axis-top { position: absolute; top: .75rem; left: 50%; color: white; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transform: translateX(-35%); }.axis-side { position: absolute; top: 52%; left: .45rem; color: white; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; }
.deploy-lab-section { padding-top: 2.6rem; }.deploy-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(350px,.9fr); gap: 1.2rem; align-items: start; }.deploy-case-list { display: grid; gap: .7rem; }.deploy-case-list button { display: grid; min-height: 88px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .8rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.deploy-case-list button:hover { background: var(--blue-soft); transform: translateY(-2px); }.deploy-case-list button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }.deploy-case-list button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.deploy-case-list button strong { align-self: end; }.deploy-case-list button small { color: var(--muted); }
.deploy-answer { position: sticky; top: 102px; min-height: 440px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }.deploy-answer-tag { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }.deploy-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem,3vw,2rem); }.deploy-answer > p { color: #eef0ff; }.deploy-facts { display: grid; grid-template-columns: repeat(2,1fr); gap: .55rem; margin: 1rem 0; }.deploy-facts p { margin: 0; padding: .75rem; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; }.deploy-facts strong, .deploy-facts span { display: block; }.deploy-facts strong { margin-bottom: .25rem; color: var(--green); }.deploy-facts span { font-size: .86rem; }.deploy-check { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.access-layout, .where-layout, .deploy-method { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.access-note, .privacy-rule { padding: 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.access-ladder { display: grid; gap: .7rem; }.access-ladder article { padding: .9rem 1rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.access-ladder article:nth-child(2) { margin-left: 5%; }.access-ladder article:nth-child(3) { margin-left: 10%; box-shadow: 6px 6px 0 var(--green); }.access-ladder span { display: block; color: var(--blue); font-size: .76rem; font-weight: 900; text-transform: uppercase; }.access-ladder strong, .access-ladder small { display: block; }.access-ladder small { margin-top: .25rem; color: var(--muted); }
.where-compare { display: grid; grid-template-columns: repeat(2,1fr); gap: .8rem; }.where-compare article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.where-compare article:last-child { box-shadow: 7px 7px 0 var(--yellow); }.where-compare span { color: var(--blue); font-size: .78rem; font-weight: 900; text-transform: uppercase; }.where-compare h3 { margin: .55rem 0; }.where-compare ul { margin: 0; padding-left: 1.15rem; color: var(--muted); }
.privacy-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; }.privacy-chain article { min-height: 170px; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.privacy-chain span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.privacy-chain strong { display: block; margin: .65rem 0 .3rem; }.privacy-chain p { margin: 0; color: var(--muted); }.privacy-chain > b { color: var(--blue-dark); font-size: 1.5rem; }.privacy-rule { max-width: 800px; margin: 1.2rem auto 0; background: var(--blue-soft); }
.deploy-tradeoffs { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }.deploy-tradeoffs article { padding: 1rem; border-top: 5px solid var(--blue); background: var(--paper); }.deploy-tradeoffs article:nth-child(2), .deploy-tradeoffs article:nth-child(5) { border-color: var(--green); }.deploy-tradeoffs p { margin: .35rem 0 0; color: var(--muted); }.deploy-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; margin: 0; padding: 0; list-style: none; }.deploy-method li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.deploy-method li span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .76rem; font-weight: 950; }.deploy-method li p { margin: .2rem 0 0; }

.memory-hero { padding-bottom: 2.7rem; overflow: hidden; }.memory-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.memory-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; max-width: 720px; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }.memory-key strong { color: var(--blue-dark); }
.memory-stack { min-height: 365px; display: grid; align-content: center; gap: .45rem; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 22px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--green); transform: rotate(1deg); }.memory-stack span { display: flex; justify-content: space-between; align-items: center; width: var(--memory-width,100%); padding: .7rem .85rem; border: 1.5px solid white; border-radius: 9px; color: white; background: rgba(255,255,255,.08); font-weight: 950; }.memory-stack span:nth-child(2) { --memory-width: 92%; }.memory-stack span:nth-child(3) { --memory-width: 84%; }.memory-stack span:nth-child(4) { --memory-width: 76%; }.memory-stack span:nth-child(5) { --memory-width: 68%; background: var(--blue); }.memory-stack small { color: #dfe5ff; font-size: .74rem; font-weight: 700; }
.memory-lab-section { padding-top: 2.6rem; }.memory-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(350px,.9fr); gap: 1.2rem; align-items: start; }.memory-case-list { display: grid; gap: .62rem; }.memory-case-list button { display: grid; min-height: 80px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .8rem; padding: .75rem .8rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.memory-case-list button:hover { background: var(--blue-soft); transform: translateY(-2px); }.memory-case-list button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }.memory-case-list button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.memory-case-list button strong { align-self: end; }.memory-case-list button small { color: var(--muted); }
.memory-answer { position: sticky; top: 102px; min-height: 470px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--coral); }.memory-answer-tag { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }.memory-answer h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.45rem,3vw,2rem); }.memory-answer > p { color: #eef0ff; }.memory-facts { display: grid; grid-template-columns: repeat(2,1fr); gap: .55rem; margin: 1rem 0; }.memory-facts p { margin: 0; padding: .75rem; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; }.memory-facts strong, .memory-facts span { display: block; }.memory-facts strong { margin-bottom: .25rem; color: var(--green); }.memory-facts span { font-size: .85rem; }.memory-check { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.4); font-size: .9rem; }
.memory-types { display: grid; grid-template-columns: repeat(5,1fr); gap: .7rem; }.memory-types article { display: flex; min-height: 230px; flex-direction: column; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.memory-types span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.memory-types h3 { margin: .7rem 0 .35rem; }.memory-types p { margin: 0; color: var(--muted); }.memory-types small { margin-top: auto; padding-top: .7rem; color: var(--blue-dark); font-weight: 850; }
.context-memory, .storage-layout, .retrieval-layout, .training-memory, .memory-method { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.memory-note { padding: 1rem; border-left: 6px solid var(--coral); background: var(--blue-soft); }.context-tape { display: grid; grid-template-columns: repeat(5,1fr); gap: .35rem; padding: 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }.context-tape span { display: grid; min-height: 150px; place-items: center; padding: .4rem; border-radius: 8px; color: white; background: var(--blue); font-size: .78rem; font-weight: 900; text-align: center; writing-mode: vertical-rl; transform: rotate(180deg); }.context-tape .faded { color: var(--muted); background: #e4e6eb; opacity: .55; }.context-tape .active { color: var(--blue-dark); background: var(--green); }.context-tape small { grid-column: 1 / -1; color: var(--muted); }
.storage-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.storage-grid article { padding: .9rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.storage-grid article:nth-child(4) { box-shadow: 6px 6px 0 var(--yellow); }.storage-grid p { margin: .3rem 0 0; color: var(--muted); }
.retrieval-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .45rem; align-items: center; padding: 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--green); }.retrieval-flow span { display: grid; min-height: 90px; place-items: center; padding: .5rem; border-radius: 9px; color: white; background: var(--blue); font-weight: 900; text-align: center; }.retrieval-flow b { color: var(--blue-dark); }.retrieval-flow small { grid-column: 1 / -1; color: var(--muted); text-align: center; }
.training-contrast { display: grid; gap: .8rem; }.training-contrast article { padding: 1.1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.training-contrast article:first-child { box-shadow: 7px 7px 0 var(--green); }.training-contrast article:last-child { box-shadow: 7px 7px 0 var(--coral); }.training-contrast p { margin: .35rem 0 0; color: var(--muted); }
.memory-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; margin: 0; padding: 0; list-style: none; }.memory-method li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.memory-method li:last-child { grid-column: 1 / -1; }.memory-method li span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .76rem; font-weight: 950; }.memory-method li p { margin: .2rem 0 0; }

.variation-hero { padding-bottom: 2.7rem; overflow: hidden; }.variation-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.variation-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; max-width: 720px; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }.variation-key strong { color: var(--blue-dark); }
.token-path { padding: 1.2rem; border: 2px solid var(--ink); border-radius: 18px; background: var(--blue-dark); box-shadow: 9px 9px 0 var(--yellow); transform: rotate(1deg); }.token-path > p { margin: 0 0 .9rem; color: white; font-weight: 900; }.token-path > div { display: grid; gap: .55rem; }.token-path span { display: flex; width: var(--chance); min-width: 48%; justify-content: space-between; gap: .5rem; padding: .65rem .75rem; border: 1px solid white; border-radius: 8px; color: var(--blue-dark); background: var(--green); font-weight: 900; white-space: nowrap; }.token-path span:nth-child(2) { background: var(--yellow); }.token-path span:nth-child(3) { color: white; background: var(--blue); }.token-path span:nth-child(4) { color: white; background: var(--coral); }.token-path b { font-size: .78rem; }.token-path small { display: block; margin-top: .8rem; color: #dfe5ff; }
.variation-lab-section { padding-top: 2.6rem; }.variation-lab { display: grid; grid-template-columns: minmax(0,.9fr) minmax(360px,1.1fr); gap: 1.2rem; align-items: stretch; }.variation-controls { padding: 1rem; border: 2px solid var(--ink); border-radius: 15px; background: var(--paper); }.variation-prompt { margin: 0 0 1rem; padding: 1rem; border-radius: 10px; background: var(--blue-soft); font-weight: 800; }.variation-prompt span { display: block; margin-bottom: .35rem; color: var(--blue); font-size: .75rem; font-weight: 950; text-transform: uppercase; }.variation-controls > div { display: grid; gap: .55rem; }.variation-controls button { display: flex; min-height: 68px; align-items: center; justify-content: space-between; gap: .8rem; padding: .75rem .85rem; border: 1.5px solid var(--ink); border-radius: 10px; color: var(--ink); background: white; font: inherit; text-align: left; cursor: pointer; }.variation-controls button small { color: var(--muted); }.variation-controls button[aria-pressed="true"] { background: var(--green); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.variation-output { display: flex; min-height: 360px; flex-direction: column; justify-content: center; padding: 1.5rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--coral); }.variation-output > span { color: var(--green); font-size: .78rem; font-weight: 950; text-transform: uppercase; }.variation-output blockquote { margin: 1rem 0; color: white; font-family: var(--display); font-size: clamp(1.8rem,4vw,3rem); font-weight: 950; line-height: 1.05; }.variation-output p { color: #eef0ff; }.variation-output .button { align-self: flex-start; margin: .5rem 0 .8rem; }.variation-output > small { color: #cfd5ee; }
.next-token-layout, .temperature-layout, .useful-variation, .variation-method { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.variation-note { padding: 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.generation-chain { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }.generation-chain li { display: grid; grid-template-columns: 42px 1fr; gap: .7rem; align-items: center; padding: .75rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); }.generation-chain li:nth-child(even) { margin-left: 2rem; }.generation-chain span, .variation-causes span, .variation-method li span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .76rem; font-weight: 950; }.generation-chain p { margin: 0; }.generation-chain strong, .generation-chain small { display: block; }.generation-chain small { color: var(--muted); }
.variation-causes { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }.variation-causes article { min-height: 230px; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.variation-causes h3 { margin: .75rem 0 .35rem; }.variation-causes p { margin: 0; color: var(--muted); }
.temperature-scale { display: grid; gap: .55rem; padding: 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--green); }.temperature-scale > div { display: grid; grid-template-columns: 90px 1fr 1.4fr; gap: .6rem; align-items: center; padding: .75rem; border-radius: 9px; background: var(--blue-soft); }.temperature-scale > div:nth-child(2) { background: #fff4b8; }.temperature-scale > div:nth-child(3) { background: #ffe2da; }.temperature-scale span { font-weight: 950; }.temperature-scale b { color: var(--blue-dark); }.temperature-scale small { color: var(--muted); }.temperature-scale > p { margin: .35rem 0 0; color: var(--muted); font-size: .88rem; }
.variation-compare { display: grid; grid-template-columns: repeat(2,1fr); gap: .8rem; }.variation-compare article { padding: 1.1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.variation-compare article:first-child { box-shadow: 7px 7px 0 var(--green); }.variation-compare article:last-child { box-shadow: 7px 7px 0 var(--coral); }.variation-compare strong { font-size: 1.2rem; }.variation-compare ul { margin-bottom: 0; }
.variation-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; margin: 0; padding: 0; list-style: none; }.variation-method li { display: grid; grid-template-columns: 42px 1fr; gap: .65rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.variation-method li p { margin: .15rem 0 0; }

.neural-hero { padding-bottom: 2.7rem; overflow: hidden; }.neural-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.neural-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--green); background: var(--paper); }.neural-key strong { color: var(--blue-dark); }
.network-board { display: grid; grid-template-columns: 1fr auto 1.2fr auto .7fr; gap: .65rem; align-items: center; min-height: 350px; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 20px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--green); transform: rotate(1deg); }.network-board > div { display: grid; gap: .65rem; justify-items: center; }.network-board small { color: #dfe5ff; font-weight: 850; text-align: center; }.network-board i { display: block; width: 34px; height: 34px; border: 3px solid white; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 5px rgba(255,255,255,.08); }.network-board > div:nth-of-type(2) i:nth-of-type(even) { background: var(--coral); }.network-board i.active { width: 48px; height: 48px; background: var(--yellow); }.network-board > b { color: var(--green); font-size: 1.5rem; }.network-board > p { grid-column: 1 / -1; margin: .4rem 0 0; color: white; font-size: .86rem; text-align: center; }
.neural-lab-section { padding-top: 2.6rem; }.neural-lab { display: grid; grid-template-columns: minmax(0,.85fr) minmax(380px,1.15fr); gap: 1.2rem; align-items: start; }.neural-case-list { display: grid; gap: .65rem; }.neural-case-list button { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: .75rem; min-height: 84px; padding: .75rem; border: 1.5px solid var(--ink); border-radius: 11px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.neural-case-list button > span { grid-row: 1 / 3; display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: 1.15rem; font-weight: 950; }.neural-case-list button small { color: var(--muted); }.neural-case-list button[aria-pressed="true"] { background: var(--green); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.neural-answer { position: sticky; top: 102px; min-height: 430px; padding: 1.4rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--coral); }.neural-answer > span { color: var(--green); font-size: .78rem; font-weight: 950; text-transform: uppercase; }.neural-answer h3 { margin: .8rem 0 1rem; color: white; font-size: clamp(1.45rem,3vw,2rem); }.neural-answer ol { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }.neural-answer li { padding: .65rem .75rem; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; }.neural-answer li strong, .neural-answer li span { display: block; }.neural-answer li strong { color: var(--yellow); }.neural-answer li span { color: #eef0ff; font-size: .88rem; }.neural-answer > p { margin-bottom: 0; padding-top: .9rem; border-top: 1px solid rgba(255,255,255,.35); color: #eef0ff; }
.neuron-layout, .neural-training, .parameter-layout, .brain-compare, .neural-limits { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.neural-note { padding: 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.neuron-formula { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; padding: 1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }.neuron-formula div { display: flex; justify-content: space-between; padding: .65rem; border-radius: 8px; background: var(--blue-soft); }.neuron-formula div b { color: var(--blue); }.neuron-formula > strong, .neuron-formula > i, .neuron-formula > output { grid-column: 1 / -1; justify-self: center; padding: .55rem .9rem; border: 1.5px solid var(--ink); border-radius: 99px; }.neuron-formula > i { background: var(--yellow); font-style: normal; font-weight: 900; }.neuron-formula > output { color: white; background: var(--blue-dark); font-weight: 900; }
.layer-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }.layer-cards article { min-height: 210px; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.layer-cards span, .neural-limits article span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .76rem; font-weight: 950; }.layer-cards h3 { margin: .75rem 0 .35rem; }.layer-cards p { margin: 0; color: var(--muted); }.neural-definition { margin-top: 1rem; }
.training-loop { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.training-loop li { display: grid; grid-template-columns: 40px 1fr; gap: .55rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); }.training-loop span { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.training-loop strong, .training-loop small { display: block; }.training-loop small { color: var(--muted); }.training-loop li:last-child { box-shadow: 6px 6px 0 var(--green); }
.parameter-contrast { display: grid; gap: .75rem; }.parameter-contrast article { padding: 1.1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.parameter-contrast article:first-child { box-shadow: 7px 7px 0 var(--green); }.parameter-contrast article:last-child { box-shadow: 7px 7px 0 var(--yellow); }.parameter-contrast p { margin: .3rem 0 0; color: var(--muted); }
.brain-grid { display: grid; gap: .65rem; }.brain-grid article { padding: .9rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.brain-grid p { margin: .3rem 0 0; color: var(--muted); }.neural-limits > div:last-child { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; }.neural-limits article { display: grid; grid-template-columns: 40px 1fr; gap: .6rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); }.neural-limits article:last-child { grid-column: 1 / -1; }.neural-limits article p { margin: .15rem 0 0; }

.parameter-hero { padding-bottom: 2.7rem; overflow: hidden; }.parameter-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.parameter-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }.parameter-key strong { color: var(--blue-dark); }
.parameter-wall { display: grid; grid-template-columns: repeat(2,1fr); gap: .55rem; padding: 1.1rem; border: 2px solid var(--ink); border-radius: 19px; background: var(--blue-dark); box-shadow: 9px 9px 0 var(--coral); transform: rotate(1deg); }.parameter-wall span { padding: .65rem; border: 1px solid rgba(255,255,255,.55); border-radius: 8px; color: white; background: rgba(255,255,255,.08); font-family: ui-monospace,monospace; font-weight: 850; text-align: center; }.parameter-wall span:nth-child(3n) { color: var(--blue-dark); background: var(--green); }.parameter-wall span:nth-child(4n) { color: var(--blue-dark); background: var(--yellow); }.parameter-wall strong { grid-column: 1 / -1; color: white; text-align: center; }
.parameter-lab-section { padding-top: 2.6rem; }.weight-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(350px,.9fr); gap: 1.2rem; align-items: stretch; }.weight-controls { display: grid; gap: .85rem; padding: 1.1rem; border: 2px solid var(--ink); border-radius: 15px; background: var(--paper); }.weight-controls label { display: grid; grid-template-columns: 1fr auto; gap: .4rem; font-weight: 850; }.weight-controls output { color: var(--blue); font-weight: 950; }.weight-controls input { grid-column: 1 / -1; width: 100%; min-height: 44px; accent-color: var(--blue); }.weight-controls .button { justify-self: start; }.weight-result { display: flex; min-height: 330px; flex-direction: column; justify-content: center; padding: 1.4rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--green); }.weight-result > span { color: var(--yellow); font-size: .78rem; font-weight: 950; text-transform: uppercase; }.weight-result > p { color: #eef0ff; }.weight-equation { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .4rem; align-items: center; margin: 1rem 0; }.weight-equation b { padding: .7rem .4rem; border: 1px solid white; border-radius: 8px; background: rgba(255,255,255,.1); text-align: center; }.weight-equation i { color: var(--green); font-style: normal; font-weight: 950; }.weight-result > strong { font-size: 1.35rem; }.weight-result > small { margin-top: .7rem; color: #cfd5ee; }
.learned-layout, .count-meaning, .stored-layout, .parameter-method { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.parameter-note { padding: 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.parameter-cycle { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.parameter-cycle li { display: grid; grid-template-columns: 40px 1fr; gap: .6rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); }.parameter-cycle span, .parameter-method li span { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.parameter-cycle strong, .parameter-cycle small { display: block; }.parameter-cycle small { color: var(--muted); }
.parameter-types { display: grid; grid-template-columns: repeat(4,1fr); gap: .7rem; }.parameter-types article { display: flex; min-height: 235px; flex-direction: column; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.parameter-types article > span { align-self: flex-start; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .74rem; font-weight: 950; text-transform: uppercase; }.parameter-types h3 { margin: .75rem 0 .35rem; }.parameter-types p { margin: 0; color: var(--muted); }.parameter-types small { margin-top: auto; padding-top: .7rem; color: var(--blue-dark); font-weight: 850; }
.count-balance { display: grid; grid-template-columns: repeat(2,1fr); gap: .8rem; }.count-balance article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.count-balance article:first-child { box-shadow: 7px 7px 0 var(--green); }.count-balance article:last-child { box-shadow: 7px 7px 0 var(--coral); }.count-balance ul { margin-bottom: 0; }
.distributed-map { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; padding: 1rem; border: 2px solid var(--ink); border-radius: 15px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }.distributed-map span { padding: .75rem .45rem; border-radius: 8px; color: white; background: var(--blue); font-weight: 850; text-align: center; }.distributed-map span:nth-child(even) { color: var(--blue-dark); background: var(--green); }.distributed-map b { grid-column: 1 / -1; padding: .75rem; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--blue-soft); text-align: center; }
.parameter-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.parameter-method li { display: grid; grid-template-columns: 40px 1fr; gap: .6rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); }.parameter-method li p { margin: .15rem 0 0; }

.method-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.method-card { padding: 1.4rem; border: 1px solid var(--line); border-radius: 18px; background: white; }
.method-card .card-icon { margin-bottom: 1rem; }
.method-card p { margin-bottom: 0; color: var(--muted); }
.update-cycle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: cycle; }
.update-cycle > div { padding: 1.2rem; border-radius: 16px; background: var(--surface); counter-increment: cycle; }
.update-cycle > div::before { content: counter(cycle); width: 34px; height: 34px; margin-bottom: .8rem; display: grid; place-items: center; color: white; background: var(--blue); border-radius: 50%; font-weight: 900; }

:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }

.embedding-hero { padding-bottom: 2.7rem; overflow: hidden; }
.embedding-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,7vw,5rem); align-items: center; }
.embedding-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--green); background: var(--paper); }
.embedding-key strong { color: var(--blue-dark); }
.vector-card { padding: 1.2rem; border: 2px solid var(--ink); border-radius: 20px; color: white; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--yellow); }
.vector-card > span, .vector-card > strong, .vector-card > small { display: block; }
.vector-card > strong { margin: .55rem 0 1rem; color: var(--yellow); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: clamp(1.1rem,2.5vw,1.45rem); }
.vector-card > div { position: relative; min-height: 220px; border: 1px solid rgba(255,255,255,.55); background-image: linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px); background-size: 40px 40px; }
.vector-card i { position: absolute; left: var(--x); top: var(--y); display: grid; width: 62px; height: 62px; place-items: center; border: 2px solid white; border-radius: 50%; color: var(--ink); background: var(--green); font-style: normal; font-weight: 950; transform: translate(-50%,-50%); }
.vector-card i:nth-child(2) { background: var(--yellow); }.vector-card i:nth-child(3) { background: var(--coral); }
.vector-card > small { margin-top: .7rem; color: #e3e8ff; }
.embedding-lab-section { padding-top: 2.6rem; }
.embedding-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(350px,.9fr); gap: 1.2rem; align-items: start; }
.embedding-cases { display: grid; gap: .7rem; }
.embedding-cases button { display: grid; min-height: 92px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: .15rem .8rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }
.embedding-cases button:hover { background: var(--blue-soft); transform: translateY(-2px); }.embedding-cases button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.embedding-cases button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.embedding-cases button strong { align-self: end; }.embedding-cases button small { color: var(--muted); }
.embedding-result { position: sticky; top: 102px; min-height: 440px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--green); }
.embedding-tag { display: inline-block; padding: .3rem .6rem; border: 1px solid white; border-radius: 99px; background: rgba(255,255,255,.08); font-size: .78rem; font-weight: 900; text-transform: uppercase; }
.embedding-result h3 { margin: 1rem 0 .6rem; color: white; font-size: clamp(1.35rem,3vw,1.9rem); }.embedding-result code { display: block; padding: .8rem; border-left: 6px solid var(--yellow); color: white; background: rgba(255,255,255,.1); }
.embedding-result > p { margin-bottom: .5rem; color: #e3e8ff; }.embedding-result ol { display: grid; gap: .38rem; margin: 0 0 1rem; padding: 0; list-style: none; }.embedding-result li { display: flex; justify-content: space-between; gap: 1rem; padding: .48rem .6rem; border-radius: 8px; color: var(--ink); background: var(--green); }.embedding-result li.far { background: var(--coral); }.embedding-result li span { font-size: .82rem; }.embedding-result > small { display: block; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.35); }
.embedding-explainer, .embedding-distance, .contextual-layout, .embedding-limits, .embedding-method { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }
.embedding-note { padding: 1rem; border-left: 6px solid var(--coral); background: var(--paper); }
.embedding-flow { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.embedding-flow li, .embedding-method li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.embedding-flow li > span, .embedding-method li > span { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.embedding-flow strong, .embedding-flow small { display: block; }.embedding-flow small { color: var(--muted); }
.distance-compare { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }.distance-compare article { min-height: 180px; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }.distance-compare article:last-child { box-shadow: 6px 6px 0 var(--yellow); }.distance-compare span { display: inline-block; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .76rem; font-weight: 900; }.distance-compare strong { display: block; margin: .9rem 0 .4rem; }.distance-compare p { color: var(--muted); }
.orange-example { display: grid; gap: .65rem; }.orange-example article { display: grid; gap: .4rem; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.orange-example article:first-child { border-left: 7px solid var(--green); }.orange-example article:nth-child(2) { border-left: 7px solid var(--coral); }.orange-example b { color: var(--blue-dark); }.orange-example > p { margin: .2rem 0 0; color: var(--muted); }
.embedding-uses { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }.embedding-uses article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.embedding-uses article:nth-child(2) { box-shadow: 6px 6px 0 var(--yellow); }.embedding-uses span { color: var(--blue-dark); font-weight: 950; }.embedding-uses h3 { margin: .7rem 0 .35rem; }.embedding-uses p { margin: 0; color: var(--muted); }
.embedding-limits > div:last-child { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.embedding-limits article { padding: .95rem; border-top: 5px solid var(--coral); background: var(--paper); }.embedding-limits article strong { color: var(--blue-dark); }.embedding-limits article p { margin: .35rem 0 0; color: var(--muted); }
.embedding-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.embedding-method li p { margin: .15rem 0 0; }

.rag-hero { padding-bottom: 2.7rem; overflow: hidden; }
.rag-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,7vw,5rem); align-items: center; }
.rag-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }.rag-key strong { color: var(--blue-dark); }.rag-key i { font-style: normal; font-weight: 850; }
.rag-hero-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .65rem; align-items: center; padding: 1.15rem; border: 2px solid var(--ink); border-radius: 20px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--green); }.rag-hero-flow article { min-height: 175px; display: flex; flex-direction: column; padding: .85rem; border: 1px solid white; border-radius: 12px; color: white; background: rgba(255,255,255,.08); }.rag-hero-flow span { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: auto; border-radius: 50%; color: var(--ink); background: var(--yellow); font-weight: 950; }.rag-hero-flow strong { margin-top: .75rem; font-size: 1.1rem; }.rag-hero-flow small { color: #e1e6ff; }.rag-hero-flow > b { color: var(--yellow); font-size: 1.5rem; }
.rag-lab-section { padding-top: 2.6rem; }.rag-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(390px,.95fr); gap: 1.2rem; align-items: start; }.rag-cases { display: grid; gap: .7rem; }.rag-cases button { display: grid; min-height: 92px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: .15rem .8rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.rag-cases button:hover { background: var(--blue-soft); transform: translateY(-2px); }.rag-cases button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }.rag-cases button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.rag-cases button strong { align-self: end; }.rag-cases button small { color: var(--muted); }
.rag-result { position: sticky; top: 102px; min-height: 500px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--coral); }.rag-result-tag, .rag-found > span, .rag-answer > span { display: inline-block; font-size: .76rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }.rag-result-tag { padding: .28rem .55rem; border: 1px solid white; border-radius: 99px; }.rag-result h3 { margin: .85rem 0 1rem; color: white; font-size: clamp(1.35rem,3vw,1.85rem); }.rag-found, .rag-answer { margin-top: .75rem; padding: .9rem; border-left: 6px solid var(--yellow); background: rgba(255,255,255,.1); }.rag-answer { border-color: var(--green); }.rag-found p, .rag-answer p { margin: .35rem 0; color: white; }.rag-found small { color: #dfe5ff; }.rag-answer a { color: var(--yellow); font-size: .85rem; font-weight: 900; }.rag-result > small { display: block; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.35); }
.rag-preparation, .rag-live, .rag-not, .rag-compare, .rag-method { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.rag-note { padding: 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.rag-index-flow { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.rag-index-flow li, .rag-method li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.rag-index-flow li > span, .rag-method li > span { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.rag-index-flow strong, .rag-index-flow small { display: block; }.rag-index-flow small { color: var(--muted); }
.rag-query-stack { display: grid; gap: .45rem; }.rag-query-stack article { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.rag-query-stack article:nth-of-type(2) { background: var(--yellow); }.rag-query-stack span { color: var(--blue-dark); font-weight: 950; }.rag-query-stack > b { justify-self: center; color: var(--blue-dark); font-size: .82rem; text-transform: uppercase; }
.rag-benefits { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }.rag-benefits article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.rag-benefits article:nth-child(3) { box-shadow: 6px 6px 0 var(--green); }.rag-benefits span { display: inline-block; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; }.rag-benefits h3 { margin: .75rem 0 .35rem; }.rag-benefits p { margin: 0; color: var(--muted); }
.rag-failures { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.rag-failures article { padding: .95rem; border-top: 5px solid var(--coral); background: var(--paper); }.rag-failures strong { color: var(--blue-dark); }.rag-failures p { margin: .35rem 0 0; color: var(--muted); }
.rag-compare > div:last-child { display: grid; gap: .7rem; }.rag-compare article { display: grid; grid-template-columns: 115px 1fr; gap: .35rem .8rem; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.rag-compare article > span { grid-row: 1 / 3; display: grid; place-items: center; border-radius: 8px; color: white; background: var(--blue); font-weight: 950; }.rag-compare article p { margin: 0; color: var(--muted); }
.rag-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.rag-method li p { margin: .15rem 0 0; }

.llm-hero { padding-bottom: 2.7rem; overflow: hidden; }.llm-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.llm-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--green); background: var(--paper); }.llm-key strong { color: var(--blue-dark); }.llm-key i { font-style: normal; font-weight: 850; }
.llm-word { display: grid; gap: .65rem; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 20px; color: white; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--yellow); }.llm-word article { display: grid; grid-template-columns: 64px 1fr; gap: .8rem; align-items: center; padding: .75rem; border: 1px solid rgba(255,255,255,.55); border-radius: 12px; }.llm-word b { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 12px; color: var(--ink); background: var(--yellow); font-size: 1.7rem; }.llm-word article:nth-child(2) b { background: var(--green); }.llm-word article:nth-child(3) b { background: var(--coral); }.llm-word strong, .llm-word small { display: block; }.llm-word strong { font-size: 1.15rem; }.llm-word small { color: #e1e6ff; }
.llm-lab-section { padding-top: 2.6rem; }.llm-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(380px,.95fr); gap: 1.2rem; align-items: start; }.llm-cases { display: grid; gap: .7rem; }.llm-cases button { display: grid; min-height: 92px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: .15rem .8rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.llm-cases button:hover { background: var(--blue-soft); transform: translateY(-2px); }.llm-cases button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }.llm-cases button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.llm-cases button strong { align-self: end; }.llm-cases button small { color: var(--muted); }
.llm-result { position: sticky; top: 102px; min-height: 455px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--green); }.llm-result-tag { display: inline-block; padding: .28rem .55rem; border: 1px solid white; border-radius: 99px; font-size: .76rem; font-weight: 900; text-transform: uppercase; }.llm-result h3 { margin: .9rem 0 1rem; color: white; font-size: clamp(1.25rem,3vw,1.7rem); }.token-probabilities { display: grid; gap: .5rem; }.token-probabilities p { position: relative; display: flex; justify-content: space-between; margin: 0; padding: .6rem .7rem; overflow: hidden; border: 1px solid rgba(255,255,255,.45); border-radius: 8px; }.token-probabilities p::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--score); background: rgba(79,211,180,.28); }.token-probabilities b, .token-probabilities span { position: relative; z-index: 1; }.llm-choice { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 1rem 0; padding: .85rem; border-left: 6px solid var(--yellow); background: rgba(255,255,255,.1); }.llm-choice span { font-size: .82rem; }.llm-choice strong { color: var(--yellow); font-size: 1.35rem; }.llm-result > small { display: block; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.35); }
.llm-loop-layout, .llm-training, .llm-attention, .llm-system, .llm-limits, .llm-method { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.llm-note { padding: 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.llm-loop { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.llm-loop li, .llm-method li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.llm-loop li > span, .llm-method li > span { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.llm-loop strong, .llm-loop small { display: block; }.llm-loop small { color: var(--muted); }
.llm-phases { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }.llm-phases article { min-height: 210px; display: flex; flex-direction: column; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--paper); }.llm-phases article:last-child { box-shadow: 6px 6px 0 var(--yellow); }.llm-phases span { align-self: flex-start; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; }.llm-phases h3 { margin: .8rem 0 .35rem; }.llm-phases p { color: var(--muted); }.llm-phases small { margin-top: auto; font-weight: 850; }
.attention-example { position: relative; display: flex; flex-wrap: wrap; gap: .55rem; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--green); }.attention-example span, .attention-example strong { position: relative; z-index: 2; padding: .5rem .65rem; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--blue-soft); }.attention-example span:nth-child(2), .attention-example strong { color: white; background: var(--blue); }.attention-example i { position: absolute; height: 4px; width: 62%; top: 64px; left: 14%; border-radius: 99px; background: var(--coral); transform: rotate(4deg); }.attention-example small { flex-basis: 100%; margin-top: .7rem; color: var(--muted); font-weight: 850; }
.llm-abilities { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; }.llm-abilities article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.llm-abilities article:nth-child(2) { box-shadow: 6px 6px 0 var(--yellow); }.llm-abilities span { color: var(--blue-dark); font-weight: 950; }.llm-abilities h3 { margin: .7rem 0 .35rem; }.llm-abilities p { margin: 0; color: var(--muted); }.llm-nuance { margin: 1rem 0 0; padding: .85rem 1rem; border-left: 6px solid var(--blue); background: var(--blue-soft); }
.llm-system-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .65rem; align-items: center; }.llm-system-chain article { min-height: 140px; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.llm-system-chain span { color: var(--blue-dark); font-size: 1.15rem; font-weight: 950; }.llm-system-chain small { color: var(--muted); }.llm-system-chain > b { color: var(--blue-dark); font-size: 1.5rem; }
.llm-limits > div:last-child { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.llm-limits article { padding: .95rem; border-top: 5px solid var(--coral); background: var(--paper); }.llm-limits strong { color: var(--blue-dark); }.llm-limits p { margin: .35rem 0 0; color: var(--muted); }.llm-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.llm-method li p { margin: .15rem 0 0; }

.transformer-hero { padding-bottom: 2.7rem; overflow: hidden; }.transformer-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.transformer-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }.transformer-key strong { color: var(--blue-dark); }
.transformer-map { position: relative; min-height: 330px; display: flex; flex-wrap: wrap; gap: .55rem; align-content: center; justify-content: center; padding: 1.3rem; border: 2px solid var(--ink); border-radius: 20px; color: white; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--coral); }.transformer-map span, .transformer-map strong { position: relative; z-index: 2; padding: .55rem .7rem; border: 1.5px solid white; border-radius: 9px; }.transformer-map .focus, .transformer-map strong { color: var(--ink); background: var(--yellow); }.transformer-map i { position: absolute; width: 54%; height: 5px; left: 23%; top: 50%; border-radius: 99px; background: var(--green); transform: rotate(8deg); }.transformer-map small { flex-basis: 100%; margin-top: 1rem; text-align: center; }
.transformer-lab-section { padding-top: 2.6rem; }.transformer-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(390px,.95fr); gap: 1.2rem; align-items: start; }.transformer-cases { display: grid; gap: .7rem; }.transformer-cases button { display: grid; min-height: 92px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: .15rem .8rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.transformer-cases button:hover { background: var(--blue-soft); transform: translateY(-2px); }.transformer-cases button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }.transformer-cases button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.transformer-cases button strong { align-self: end; }.transformer-cases button small { color: var(--muted); }
.transformer-result { position: sticky; top: 102px; min-height: 455px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--green); }.transformer-result-tag { display: inline-block; padding: .28rem .55rem; border: 1px solid white; border-radius: 99px; font-size: .76rem; font-weight: 900; text-transform: uppercase; }.transformer-result h3 { margin: .9rem 0 1rem; color: white; font-size: clamp(1.25rem,3vw,1.7rem); }.transformer-result > p { color: #e1e6ff; }.attention-bars { display: grid; gap: .55rem; margin: 1rem 0; }.attention-bars p { position: relative; display: flex; justify-content: space-between; margin: 0; padding: .65rem .75rem; overflow: hidden; border: 1px solid rgba(255,255,255,.45); border-radius: 8px; }.attention-bars p::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--attention); background: rgba(255,216,77,.28); }.attention-bars b, .attention-bars span { position: relative; z-index: 1; }.attention-bars span { font-size: .82rem; }.transformer-result > small { display: block; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.35); }
.transformer-input, .transformer-qkv, .transformer-heads, .transformer-impact, .transformer-limits, .transformer-method { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.transformer-note { padding: 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.transformer-input-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; }.transformer-input-flow article { min-height: 155px; display: flex; flex-direction: column; justify-content: space-between; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.transformer-input-flow article:nth-of-type(2) { background: var(--yellow); }.transformer-input-flow span { color: var(--blue-dark); font-size: .78rem; font-weight: 950; text-transform: uppercase; }.transformer-input-flow strong { overflow-wrap: anywhere; }.transformer-input-flow small { color: var(--muted); }.transformer-input-flow > b { color: var(--blue-dark); }
.qkv-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }.qkv-cards article { min-height: 210px; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.qkv-cards span { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 10px; color: white; background: var(--blue); font-weight: 950; }.qkv-cards h3 { margin: .8rem 0 .35rem; }.qkv-cards p { color: var(--muted); font-size: .9rem; }
.head-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.head-grid article { padding: .9rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.head-grid article:last-child { color: white; background: var(--blue-dark); }.head-grid span, .head-grid strong, .head-grid small { display: block; }.head-grid span { color: var(--blue-dark); font-size: .78rem; font-weight: 950; text-transform: uppercase; }.head-grid article:last-child span { color: var(--yellow); }.head-grid strong { margin: .7rem 0 .25rem; }.head-grid small { color: var(--muted); }.head-grid article:last-child small { color: #e1e6ff; }
.transformer-families { display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; }.transformer-families article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.transformer-families article:nth-child(2) { box-shadow: 6px 6px 0 var(--yellow); }.transformer-families span { display: inline-block; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; }.transformer-families h3 { margin: .75rem 0 .35rem; }.transformer-families p { margin: 0; color: var(--muted); }
.impact-compare { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }.impact-compare article { min-height: 180px; display: flex; flex-direction: column; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.impact-compare article:last-child { box-shadow: 6px 6px 0 var(--green); }.impact-compare span { color: var(--blue-dark); font-weight: 950; }.impact-compare p { margin: auto 0; color: var(--blue-dark); font-size: 1.25rem; font-weight: 950; text-align: center; }.impact-compare small { color: var(--muted); }
.transformer-limits > div:last-child { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.transformer-limits article { padding: .95rem; border-top: 5px solid var(--coral); background: var(--paper); }.transformer-limits strong { color: var(--blue-dark); }.transformer-limits p { margin: .35rem 0 0; color: var(--muted); }.transformer-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.transformer-method li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.transformer-method li > span { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.transformer-method li p { margin: .15rem 0 0; }

/* Fine-tuning */
.tuning-hero { padding-bottom: 2.7rem; overflow: hidden; }.tuning-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.tuning-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }.tuning-key strong { color: var(--blue-dark); }
.tuning-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; padding: 1.1rem; border: 2px solid var(--ink); border-radius: 20px; color: white; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--green); }.tuning-flow article { min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; padding: .9rem; border: 1.5px solid white; border-radius: 12px; }.tuning-flow article:last-child { color: var(--ink); background: var(--yellow); }.tuning-flow article > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--green); font-weight: 950; }.tuning-flow small { color: #e1e6ff; }.tuning-flow article:last-child small { color: var(--muted); }.tuning-flow > b { color: var(--yellow); font-size: 1.4rem; }
.tuning-lab-section { padding-top: 2.6rem; }.tuning-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(390px,.95fr); gap: 1.2rem; align-items: start; }.tuning-cases { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.tuning-cases button { display: grid; min-height: 130px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: .15rem .8rem; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.tuning-cases button:hover { background: var(--blue-soft); transform: translateY(-2px); }.tuning-cases button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }.tuning-cases button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.tuning-cases button strong { align-self: end; }.tuning-cases button small { color: var(--muted); }
.tuning-result { position: sticky; top: 102px; min-height: 475px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--coral); }.tuning-result-tag { display: inline-block; padding: .28rem .55rem; border: 1px solid white; border-radius: 99px; font-size: .76rem; font-weight: 900; text-transform: uppercase; }.tuning-result h3 { margin: .9rem 0; color: white; font-size: clamp(1.25rem,3vw,1.7rem); }.tuning-verdict { padding: .85rem; border-left: 6px solid var(--yellow); background: rgba(255,255,255,.1); }.tuning-verdict span, .tuning-verdict strong { display: block; }.tuning-verdict span { color: #e1e6ff; font-size: .74rem; font-weight: 900; text-transform: uppercase; }.tuning-verdict strong { margin-top: .3rem; }.tuning-result > p { color: #eef0ff; }.tuning-result dl { display: grid; gap: .7rem; margin: 1rem 0 0; }.tuning-result dl div { padding-top: .65rem; border-top: 1px solid rgba(255,255,255,.35); }.tuning-result dt { color: var(--yellow); font-size: .76rem; font-weight: 900; text-transform: uppercase; }.tuning-result dd { margin: .25rem 0 0; }
.tuning-difference, .tuning-peft, .tuning-data, .tuning-uses, .tuning-risks, .tuning-method { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.tuning-note { padding: 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.tuning-loop { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; }.tuning-loop article { min-height: 160px; display: flex; flex-direction: column; justify-content: space-between; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.tuning-loop article:last-child { color: white; background: var(--blue-dark); }.tuning-loop span { color: var(--blue-dark); font-size: .76rem; font-weight: 950; text-transform: uppercase; }.tuning-loop article:last-child span { color: var(--yellow); }.tuning-loop small { color: var(--muted); }.tuning-loop article:last-child small { color: #e1e6ff; }.tuning-loop > b { color: var(--blue-dark); }
.tuning-compare { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }.tuning-compare article { min-height: 245px; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.tuning-compare article.is-featured { color: white; background: var(--blue-dark); box-shadow: 6px 6px 0 var(--yellow); }.tuning-compare span { display: inline-block; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; }.tuning-compare .is-featured span { color: var(--ink); background: var(--yellow); }.tuning-compare h3 { margin: .8rem 0 .4rem; }.tuning-compare .is-featured h3 { color: white; }.tuning-compare p { color: var(--muted); }.tuning-compare .is-featured p, .tuning-compare .is-featured small { color: #e1e6ff; }
.peft-cards, .data-split { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }.peft-cards article, .data-split article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.peft-cards article:last-child { box-shadow: 6px 6px 0 var(--green); }.peft-cards span, .data-split span { display: inline-block; color: var(--blue-dark); font-size: .76rem; font-weight: 950; text-transform: uppercase; }.peft-cards strong, .data-split strong { display: block; margin: .75rem 0 .35rem; }.peft-cards p, .data-split p { margin: 0; color: var(--muted); }.data-split { grid-template-columns: repeat(3,1fr); }.data-split article:nth-child(2) { background: var(--yellow); }
.tuning-uses > div:last-child, .tuning-risks > div:last-child { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.tuning-uses article, .tuning-risks article { padding: .95rem; border-top: 5px solid var(--green); background: var(--paper); }.tuning-risks article { border-top-color: var(--coral); }.tuning-uses strong, .tuning-risks span { color: var(--blue-dark); font-weight: 900; }.tuning-uses p, .tuning-risks p { margin: .35rem 0 0; color: var(--muted); }
.tuning-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.tuning-method li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.tuning-method li > span { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.tuning-method li p { margin: .15rem 0 0; }

/* Inférence */
.inference-hero { padding-bottom: 2.7rem; overflow: hidden; }.inference-hero-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.inference-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }.inference-key strong { color: var(--blue-dark); }
.inference-machine { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; padding: 1.1rem; border: 2px solid var(--ink); border-radius: 20px; color: white; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--yellow); }.inference-machine article { position: relative; min-height: 175px; display: flex; flex-direction: column; justify-content: space-between; padding: .9rem; overflow: hidden; border: 1.5px solid white; border-radius: 12px; }.inference-machine article:nth-of-type(2) { color: var(--ink); background: var(--green); }.inference-machine article span { font-size: .75rem; font-weight: 950; text-transform: uppercase; }.inference-machine article i { position: absolute; width: 80px; height: 80px; right: -25px; bottom: -25px; border: 12px double var(--blue); border-radius: 50%; }.inference-machine > b { color: var(--yellow); }
.inference-lab-section { padding-top: 2.6rem; }.inference-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,.95fr); gap: 1.2rem; align-items: start; }.inference-cases { display: grid; gap: .7rem; }.inference-cases button { display: grid; min-height: 100px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: .15rem .8rem; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.inference-cases button:hover { background: var(--blue-soft); transform: translateY(-2px); }.inference-cases button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }.inference-cases button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.inference-cases button strong { align-self: end; }.inference-cases button small { color: var(--muted); }
.inference-result { position: sticky; top: 102px; min-height: 480px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--green); }.inference-result-tag { display: inline-block; padding: .28rem .55rem; border: 1px solid white; border-radius: 99px; font-size: .76rem; font-weight: 900; text-transform: uppercase; }.inference-result h3 { margin: .9rem 0 1rem; color: white; font-size: clamp(1.25rem,3vw,1.7rem); }.inference-result ol { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }.inference-result li { display: grid; grid-template-columns: 76px 1fr; gap: .7rem; padding: .65rem; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; background: rgba(255,255,255,.06); }.inference-result li span { color: var(--yellow); font-size: .75rem; font-weight: 950; text-transform: uppercase; }.inference-result li p { margin: 0; }.inference-result-note { margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.35); color: #e1e6ff; font-size: .9rem; }
.inference-split, .generation-inference, .inference-modes, .performance-layout, .inference-optim, .inference-limits, .inference-method { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.inference-note { padding: 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.phase-compare { display: grid; grid-template-columns: repeat(2,1fr); gap: .8rem; }.phase-compare article { min-height: 230px; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.phase-compare article:last-child { color: white; background: var(--blue-dark); box-shadow: 6px 6px 0 var(--green); }.phase-compare span { display: inline-block; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; }.phase-compare article:last-child span { color: var(--ink); background: var(--yellow); }.phase-compare strong { display: block; margin: 1rem 0 .4rem; font-size: 1.2rem; }.phase-compare p { color: var(--muted); }.phase-compare article:last-child p, .phase-compare article:last-child small { color: #e1e6ff; }
.inference-pipeline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; }.inference-pipeline article { min-height: 205px; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.inference-pipeline article:nth-of-type(2) { background: var(--yellow); }.inference-pipeline span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.inference-pipeline strong { display: block; margin: 1rem 0 .4rem; }.inference-pipeline p { margin: 0; color: var(--muted); }.inference-pipeline > b { color: var(--blue-dark); }
.token-run { padding: 1.1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--coral); }.token-run > p { margin: 0; padding: .8rem; border: 1px solid var(--line); }.token-run > p span { display: block; margin-bottom: .35rem; color: var(--blue-dark); font-size: .75rem; font-weight: 950; text-transform: uppercase; }.token-run > div { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }.token-run > div b { padding: .5rem .65rem; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--blue-soft); }.token-run > div b:first-child { background: var(--yellow); }.token-run small { color: var(--muted); }.token-choice { color: var(--blue-dark); font-size: 1.4rem; }
.mode-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: .8rem; }.mode-cards article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.mode-cards article:last-child { box-shadow: 6px 6px 0 var(--yellow); }.mode-cards span { color: var(--blue-dark); font-size: .75rem; font-weight: 950; text-transform: uppercase; }.mode-cards h3 { margin: .7rem 0 .4rem; }.mode-cards p { color: var(--muted); }.mode-cards ul { margin: .8rem 0 0; padding-left: 1.2rem; }
.performance-grid, .inference-optim > div:last-child, .inference-limits > div:last-child { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.performance-grid article, .inference-optim article, .inference-limits article { padding: .95rem; border-top: 5px solid var(--green); background: var(--paper); }.inference-optim article { border-top-color: var(--yellow); }.inference-limits article { border-top-color: var(--coral); }.performance-grid strong, .inference-optim span, .inference-limits strong { color: var(--blue-dark); font-weight: 900; }.performance-grid p, .inference-optim p, .inference-limits p { margin: .35rem 0 0; color: var(--muted); }
.inference-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.inference-method li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.inference-method li > span { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.inference-method li p { margin: .15rem 0 0; }

/* Distillation */
.distill-hero { padding-bottom: 2.7rem; overflow: hidden; }.distill-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.distill-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }.distill-key strong { color: var(--blue-dark); }
.teacher-flow { display: grid; grid-template-columns: 1fr auto 1fr; gap: .7rem; align-items: center; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 20px; background: var(--blue-soft); box-shadow: 10px 10px 0 var(--coral); }.teacher-flow article { min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 50% 50% 16px 16px; background: var(--paper); }.teacher-flow .teacher { color: white; background: var(--blue-dark); }.teacher-flow .student { margin: 45px 0 0; min-height: 185px; border-radius: 40% 40% 14px 14px; background: var(--yellow); }.teacher-flow span { font-size: .75rem; font-weight: 950; text-transform: uppercase; }.teacher-flow .teacher span { color: var(--yellow); }.teacher-flow small { color: var(--muted); }.teacher-flow .teacher small { color: #e1e6ff; }.teacher-flow > b { color: var(--blue-dark); font-size: .82rem; text-transform: uppercase; }
.distill-lab-section { padding-top: 2.6rem; }.distill-lab { display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,.95fr); gap: 1.2rem; align-items: start; }.distill-cases { display: grid; gap: .7rem; }.distill-cases button { display: grid; min-height: 100px; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; gap: .15rem .8rem; padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.distill-cases button:hover { background: var(--blue-soft); transform: translateY(-2px); }.distill-cases button[aria-pressed="true"] { background: var(--blue-soft); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }.distill-cases button > span { grid-row: 1 / 3; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .78rem; font-weight: 950; }.distill-cases button strong { align-self: end; }.distill-cases button small { color: var(--muted); }
.distill-result { position: sticky; top: 102px; min-height: 500px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--green); }.distill-result-tag { display: inline-block; padding: .28rem .55rem; border: 1px solid white; border-radius: 99px; font-size: .76rem; font-weight: 900; text-transform: uppercase; }.distill-result h3 { margin: .9rem 0; color: white; font-size: clamp(1.25rem,3vw,1.7rem); }.hard-target { padding: .7rem; border-left: 6px solid var(--coral); background: rgba(255,255,255,.08); }.hard-target span, .hard-target strong, .hard-target small { display: block; }.hard-target span, .soft-target > span { color: #e1e6ff; font-size: .74rem; font-weight: 900; text-transform: uppercase; }.hard-target strong { margin: .25rem 0; }.hard-target small { color: #e1e6ff; }.soft-target { margin-top: .8rem; }.soft-target > div { display: grid; gap: .45rem; margin-top: .5rem; }.soft-target p { position: relative; display: flex; justify-content: space-between; margin: 0; padding: .55rem .65rem; overflow: hidden; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; }.soft-target p::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--score); background: rgba(255,216,77,.28); }.soft-target b, .soft-target i { position: relative; z-index: 1; }.soft-target i { font-style: normal; }.distill-result > p { margin: .8rem 0 0; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.35); color: #eef0ff; }
.distill-steps-layout, .distill-temperature, .distill-benefits, .distill-limits, .distill-method { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.distill-steps, .distill-method ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.distill-steps li, .distill-method li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.distill-steps li > span, .distill-method li > span { grid-row: 1 / 3; display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.distill-steps li p, .distill-method li p { margin: .15rem 0 0; }.distill-note { padding: 1rem; border-left: 6px solid var(--coral); background: var(--paper); }
.temperature-compare { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }.temperature-compare article { padding: .9rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.temperature-compare article:last-child { box-shadow: 6px 6px 0 var(--yellow); }.temperature-compare span { color: var(--blue-dark); font-size: .76rem; font-weight: 950; text-transform: uppercase; }.temperature-compare p { display: grid; gap: .5rem; }.temperature-compare b { position: relative; display: block; z-index: 1; padding: .55rem; border: 1px solid var(--line); overflow: hidden; }.temperature-compare b::before { content: ''; position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--w); background: var(--blue-soft); }
.distill-benefits > div:last-child, .distill-limits > div:last-child { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.distill-benefits article, .distill-limits article { padding: .95rem; border-top: 5px solid var(--green); background: var(--paper); }.distill-limits article { border-top-color: var(--coral); }.distill-benefits strong, .distill-limits strong { color: var(--blue-dark); }.distill-benefits p, .distill-limits p { margin: .35rem 0 0; color: var(--muted); }
.distill-compare { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }.distill-compare article { min-height: 225px; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.distill-compare article:first-child { color: white; background: var(--blue-dark); box-shadow: 6px 6px 0 var(--yellow); }.distill-compare span { display: inline-block; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; }.distill-compare article:first-child span { color: var(--ink); background: var(--yellow); }.distill-compare h3 { margin: .8rem 0 .4rem; }.distill-compare article:first-child h3 { color: white; }.distill-compare p { color: var(--muted); }.distill-compare article:first-child p { color: #e1e6ff; }

/* Quantification */
.quant-hero { padding-bottom: 2.7rem; overflow: hidden; }.quant-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.quant-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--green); background: var(--paper); }.quant-key strong { color: var(--blue-dark); }
.quant-number { display: grid; gap: .55rem; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 20px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--yellow); transform: rotate(1deg); }.quant-number span { color: #dfe5ff; font-size: .75rem; font-weight: 950; text-transform: uppercase; }.quant-number strong { padding: .7rem; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; color: white; font-family: var(--display); font-size: clamp(1.7rem,4vw,2.7rem); letter-spacing: .04em; }.quant-number b { color: var(--green); font-size: 1.7rem; text-align: center; }.quant-number small { color: #dfe5ff; }
.quant-lab-section { padding-top: 2.6rem; }.quant-lab { display: grid; grid-template-columns: minmax(0,.8fr) minmax(420px,1.2fr); gap: 1.2rem; align-items: start; }.quant-cases { display: grid; gap: .7rem; }.quant-cases button { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: auto auto; gap: .1rem .8rem; min-height: 92px; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.quant-cases button > span { grid-row: 1 / 3; display: grid; width: 50px; height: 50px; place-items: center; border-radius: 12px; color: white; background: var(--blue); font-family: var(--display); font-size: 1.25rem; font-weight: 950; }.quant-cases button strong { align-self: end; }.quant-cases button small { color: var(--muted); }.quant-cases button:hover { background: var(--blue-soft); transform: translateY(-2px); }.quant-cases button[aria-pressed="true"] { background: var(--green); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.quant-result { position: sticky; top: 102px; min-height: 430px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--coral); }.quant-result-tag { display: inline-block; padding: .28rem .55rem; border: 1px solid white; border-radius: 99px; font-size: .76rem; font-weight: 900; text-transform: uppercase; }.quant-result h3 { margin: .9rem 0 1.1rem; color: white; font-size: clamp(1.35rem,3vw,1.9rem); }.quant-gauge { display: grid; grid-template-columns: 1fr auto; gap: .45rem .8rem; align-items: center; padding: .8rem; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; }.quant-gauge span { color: #dfe5ff; font-size: .75rem; font-weight: 900; text-transform: uppercase; }.quant-gauge p { grid-column: 1 / -1; height: 16px; margin: 0; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.16); }.quant-gauge i { display: block; width: var(--memory); height: 100%; border-radius: inherit; background: var(--yellow); transition: width .25s ease; }.quant-gauge strong { grid-column: 2; grid-row: 1; color: var(--yellow); }.quant-result dl { display: grid; gap: .65rem; margin: .9rem 0 0; }.quant-result dl > div { padding-top: .65rem; border-top: 1px solid rgba(255,255,255,.3); }.quant-result dt { color: var(--green); font-size: .74rem; font-weight: 950; text-transform: uppercase; }.quant-result dd { margin: .25rem 0 0; color: #eef0ff; }
.quant-mapping, .quant-methods, .quant-benefits, .quant-limits, .quant-checks { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.quant-note { padding: .9rem; border-left: 6px solid var(--coral); background: var(--paper); }.quant-scale { display: grid; grid-template-columns: auto 1fr auto 1fr auto 1fr auto 1fr auto; gap: .35rem; align-items: center; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--green); }.quant-scale i { height: 5px; background: var(--blue-soft); }.quant-scale span, .quant-scale b { display: grid; min-width: 44px; min-height: 44px; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: .78rem; }.quant-scale b { color: white; background: var(--blue); }.quant-scale small { grid-column: 1 / -1; margin-top: .5rem; color: var(--muted); text-align: center; }
.quant-parts { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }.quant-parts article, .quant-method-cards article, .quant-compare article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.quant-parts span, .quant-method-cards span, .quant-compare span { display: inline-block; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; text-transform: uppercase; }.quant-parts h3, .quant-method-cards h3, .quant-compare h3 { margin: .75rem 0 .4rem; }.quant-parts p, .quant-method-cards p, .quant-compare p { margin-bottom: 0; color: var(--muted); }
.quant-method-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }.quant-method-cards article:last-child { box-shadow: 7px 7px 0 var(--yellow); }.quant-method-cards small { display: block; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--line); color: var(--muted); }
.quant-benefits > div:last-child, .quant-limits > div:last-child { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.quant-benefits article, .quant-limits article { padding: .95rem; border-top: 5px solid var(--green); background: var(--paper); }.quant-limits article { border-top-color: var(--coral); }.quant-benefits strong, .quant-limits strong { color: var(--blue-dark); }.quant-benefits p, .quant-limits p { margin: .35rem 0 0; color: var(--muted); }
.quant-compare { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }.quant-compare article { min-height: 220px; }.quant-compare article:first-child { color: white; background: var(--blue-dark); box-shadow: 6px 6px 0 var(--yellow); }.quant-compare article:first-child span { color: var(--ink); background: var(--yellow); }.quant-compare article:first-child h3 { color: white; }.quant-compare article:first-child p { color: #e1e6ff; }
.quant-checks ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.quant-checks li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.quant-checks li > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.quant-checks li p { margin: .1rem 0 0; }

/* Elagage */
.prune-hero { padding-bottom: 2.7rem; overflow: hidden; }.prune-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.prune-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.prune-key strong { color: var(--blue-dark); }
.prune-visual { display: grid; grid-template-columns: 1fr auto 1fr; gap: .9rem; align-items: center; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 20px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--green); transform: rotate(1deg); }.prune-visual > div { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }.prune-visual span { display: block; aspect-ratio: 1; border: 2px solid white; border-radius: 50%; background: var(--blue); }.prune-visual .pruned span:nth-child(2), .prune-visual .pruned span:nth-child(4), .prune-visual .pruned span:nth-child(8) { opacity: .12; }.prune-visual > b { color: var(--yellow); font-size: 2rem; }.prune-visual > p { grid-column: 1 / -1; margin: .5rem 0 0; color: white; text-align: center; }
.prune-lab-section { padding-top: 2.6rem; }.prune-lab { display: grid; grid-template-columns: minmax(0,.85fr) minmax(420px,1.15fr); gap: 1.2rem; align-items: start; }.prune-cases { display: grid; gap: .7rem; }.prune-cases button { display: grid; grid-template-columns: 58px 1fr; grid-template-rows: auto auto; gap: .1rem .8rem; min-height: 92px; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.prune-cases button > span { grid-row: 1 / 3; display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .85rem; font-weight: 950; }.prune-cases button strong { align-self: end; }.prune-cases button small { color: var(--muted); }.prune-cases button:hover { background: var(--blue-soft); transform: translateY(-2px); }.prune-cases button[aria-pressed="true"] { background: var(--green); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.prune-result { position: sticky; top: 102px; min-height: 470px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }.prune-result-tag { display: inline-block; padding: .28rem .55rem; border: 1px solid white; border-radius: 99px; font-size: .76rem; font-weight: 900; text-transform: uppercase; }.prune-result h3 { margin: .8rem 0; color: white; font-size: clamp(1.3rem,3vw,1.8rem); }.prune-matrix { display: grid; grid-template-columns: repeat(5,1fr); gap: .35rem; max-width: 300px; margin: .8rem auto; }.prune-matrix i { aspect-ratio: 1; border: 1px solid rgba(255,255,255,.55); border-radius: 5px; background: var(--green); transition: opacity .2s ease, transform .2s ease; }.prune-matrix[data-mode="unstructured"] i:nth-child(2), .prune-matrix[data-mode="unstructured"] i:nth-child(4), .prune-matrix[data-mode="unstructured"] i:nth-child(6), .prune-matrix[data-mode="unstructured"] i:nth-child(9), .prune-matrix[data-mode="unstructured"] i:nth-child(11), .prune-matrix[data-mode="unstructured"] i:nth-child(13), .prune-matrix[data-mode="unstructured"] i:nth-child(16), .prune-matrix[data-mode="unstructured"] i:nth-child(18), .prune-matrix[data-mode="unstructured"] i:nth-child(20), .prune-matrix[data-mode="unstructured"] i:nth-child(22), .prune-matrix[data-mode="unstructured"] i:nth-child(24), .prune-matrix[data-mode="unstructured"] i:nth-child(25) { opacity: .08; transform: scale(.72); }.prune-matrix[data-mode="structured"] i:nth-child(n+6):nth-child(-n+10), .prune-matrix[data-mode="structured"] i:nth-child(n+16):nth-child(-n+20), .prune-matrix[data-mode="structured"] i:nth-child(25) { opacity: .08; transform: scale(.72); }.prune-result dl { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; margin: .9rem 0 0; }.prune-result dl > div { padding: .65rem; border: 1px solid rgba(255,255,255,.3); border-radius: 9px; }.prune-result dt { color: var(--yellow); font-size: .72rem; font-weight: 950; text-transform: uppercase; }.prune-result dd { margin: .25rem 0 0; color: #eef0ff; font-size: .88rem; }
.prune-process, .prune-zero, .prune-benefits, .prune-limits, .prune-checks { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.prune-note { padding: .9rem; border-left: 6px solid var(--coral); background: var(--paper); }.prune-steps, .prune-checks ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.prune-steps li, .prune-checks li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.prune-steps li > span, .prune-checks li > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.prune-steps li p, .prune-checks li p { margin: .1rem 0 0; }
.prune-types { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; }.prune-types article, .prune-compare article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.prune-types span, .prune-compare span { display: inline-block; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; text-transform: uppercase; }.prune-types h3, .prune-compare h3 { margin: .75rem 0 .4rem; }.prune-types p, .prune-compare p { margin-bottom: 0; color: var(--muted); }
.zero-chain { display: grid; grid-template-columns: 1fr auto 1fr; gap: .75rem; align-items: center; padding: 1.1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--coral); }.zero-chain article { padding: .8rem; border-radius: 10px; background: var(--blue-soft); text-align: center; }.zero-chain strong, .zero-chain span { display: block; }.zero-chain strong { color: var(--blue-dark); font-family: var(--display); font-size: 1.4rem; }.zero-chain > b { color: var(--coral); font-size: 1.6rem; }.zero-chain > p { grid-column: 1 / -1; margin: 0; color: var(--muted); text-align: center; }
.prune-benefits > div:last-child, .prune-limits > div:last-child { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.prune-benefits article, .prune-limits article { padding: .95rem; border-top: 5px solid var(--green); background: var(--paper); }.prune-limits article { border-top-color: var(--coral); }.prune-benefits strong, .prune-limits strong { color: var(--blue-dark); }.prune-benefits p, .prune-limits p { margin: .35rem 0 0; color: var(--muted); }
.prune-compare { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }.prune-compare article { min-height: 220px; }.prune-compare article:first-child { color: white; background: var(--blue-dark); box-shadow: 6px 6px 0 var(--green); }.prune-compare article:first-child span { color: var(--ink); background: var(--green); }.prune-compare article:first-child h3 { color: white; }.prune-compare article:first-child p { color: #e1e6ff; }

/* Mixture of Experts */
.moe-hero { padding-bottom: 2.7rem; overflow: hidden; }.moe-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.moe-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }.moe-key strong { color: var(--blue-dark); }
.moe-hero-board { display: grid; grid-template-columns: auto auto 1fr; gap: .75rem; align-items: center; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 20px; color: white; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--coral); transform: rotate(1deg); }.moe-hero-board > span { padding: .45rem .65rem; border-radius: 8px; color: var(--ink); background: var(--yellow); font-weight: 950; }.moe-hero-board > b { padding: .55rem; border: 1px solid white; border-radius: 8px; }.moe-hero-board > div { display: grid; grid-template-columns: repeat(3,1fr); gap: .45rem; }.moe-hero-board i { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; font-style: normal; opacity: .3; }.moe-hero-board i.active { color: var(--ink); background: var(--green); opacity: 1; }.moe-hero-board > p { grid-column: 1 / -1; margin: .4rem 0 0; color: #e1e6ff; text-align: center; }
.moe-lab-section { padding-top: 2.6rem; }.moe-lab { display: grid; grid-template-columns: minmax(0,.82fr) minmax(440px,1.18fr); gap: 1.2rem; align-items: start; }.moe-tokens { display: grid; gap: .7rem; }.moe-tokens button { display: grid; grid-template-columns: 90px 1fr; grid-template-rows: auto auto; gap: .1rem .8rem; min-height: 92px; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 12px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.moe-tokens button > span { grid-row: 1 / 3; display: grid; place-items: center; padding: .45rem; border-radius: 10px; color: white; background: var(--blue); font-weight: 950; }.moe-tokens button strong { align-self: end; }.moe-tokens button small { color: var(--muted); }.moe-tokens button:hover { background: var(--blue-soft); transform: translateY(-2px); }.moe-tokens button[aria-pressed="true"] { background: var(--green); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.moe-result { position: sticky; top: 102px; min-height: 485px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }.moe-result-tag { display: inline-block; padding: .28rem .55rem; border: 1px solid white; border-radius: 99px; font-size: .76rem; font-weight: 900; text-transform: uppercase; }.moe-result h3 { margin: .8rem 0; color: white; font-size: clamp(1.3rem,3vw,1.8rem); }.expert-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .55rem; }.expert-grid article { display: grid; grid-template-columns: 40px 1fr; gap: .5rem; align-items: center; padding: .55rem; border: 1px solid rgba(255,255,255,.4); border-radius: 9px; opacity: .45; }.expert-grid span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: var(--ink); background: white; font-weight: 950; }.expert-grid b { color: white; }.expert-grid[data-route="capital"] article:nth-child(2), .expert-grid[data-route="capital"] article:nth-child(4), .expert-grid[data-route="code"] article:nth-child(3), .expert-grid[data-route="code"] article:nth-child(6), .expert-grid[data-route="ambiguous"] article:nth-child(1), .expert-grid[data-route="ambiguous"] article:nth-child(5) { border-color: var(--green); background: rgba(112,231,175,.18); opacity: 1; }.expert-grid[data-route="capital"] article:nth-child(2) span, .expert-grid[data-route="capital"] article:nth-child(4) span, .expert-grid[data-route="code"] article:nth-child(3) span, .expert-grid[data-route="code"] article:nth-child(6) span, .expert-grid[data-route="ambiguous"] article:nth-child(1) span, .expert-grid[data-route="ambiguous"] article:nth-child(5) span { background: var(--green); }.moe-result > p { margin: 1rem 0 .55rem; padding: .8rem; border-left: 6px solid var(--green); background: rgba(255,255,255,.08); }.moe-result > small { color: #dfe5ff; }
.moe-cycle, .moe-counts, .moe-reality, .moe-gains, .moe-costs, .moe-checks { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.moe-cycle ol, .moe-checks ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.moe-cycle li, .moe-checks li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.moe-cycle li > span, .moe-checks li > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.moe-cycle li p, .moe-checks li p { margin: .1rem 0 0; }
.count-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }.count-cards article { min-height: 200px; padding: 1rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); }.count-cards article:first-child { box-shadow: 7px 7px 0 var(--coral); }.count-cards article:last-child { box-shadow: 7px 7px 0 var(--green); }.count-cards span { color: var(--blue-dark); font-size: .76rem; font-weight: 950; text-transform: uppercase; }.count-cards strong { display: block; margin: 1rem 0 .5rem; font-family: var(--display); font-size: 1.5rem; }.count-cards p { color: var(--muted); }
.moe-reality-card { padding: 1.1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }.moe-reality-card strong { color: var(--blue-dark); }.moe-reality-card p { margin-top: .35rem; }.moe-reality-card p + strong { display: block; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.moe-gains > div:last-child, .moe-costs > div:last-child { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.moe-gains article, .moe-costs article { padding: .95rem; border-top: 5px solid var(--green); background: var(--paper); }.moe-costs article { border-top-color: var(--coral); }.moe-gains strong, .moe-costs strong { color: var(--blue-dark); }.moe-gains p, .moe-costs p { margin: .35rem 0 0; color: var(--muted); }
.moe-compare { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }.moe-compare article { min-height: 220px; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.moe-compare span { display: inline-block; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; text-transform: uppercase; }.moe-compare h3 { margin: .75rem 0 .4rem; }.moe-compare p { margin-bottom: 0; color: var(--muted); }.moe-compare article:first-child { color: white; background: var(--blue-dark); box-shadow: 6px 6px 0 var(--green); }.moe-compare article:first-child span { color: var(--ink); background: var(--green); }.moe-compare article:first-child h3 { color: white; }.moe-compare article:first-child p { color: #e1e6ff; }

/* Puces IA */
.chip-hero { padding-bottom: 2.7rem; overflow: hidden; }.chip-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.chip-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--green); background: var(--paper); }.chip-key strong { color: var(--blue-dark); }
.chip-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: .7rem; align-items: center; padding: 1.25rem; border: 2px solid var(--ink); border-radius: 20px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--yellow); transform: rotate(1deg); }.chip-board article { min-height: 230px; padding: .9rem; border: 1px solid rgba(255,255,255,.4); border-radius: 14px; }.chip-board article > span { color: var(--green); font-weight: 950; }.chip-board article > div { display: grid; grid-template-columns: repeat(2,1fr); gap: .55rem; margin: 1rem 0; }.chip-board article > div.many { grid-template-columns: repeat(4,1fr); gap: .3rem; }.chip-board i { display: block; aspect-ratio: 1; border-radius: 5px; background: var(--blue); }.chip-board .many i { background: var(--coral); }.chip-board small { color: #e1e6ff; }.chip-board > b { color: var(--yellow); font-size: 1.5rem; }
.chip-lab-section { padding-top: 2.6rem; }.chip-lab { display: grid; grid-template-columns: minmax(0,.86fr) minmax(430px,1.14fr); gap: 1.2rem; align-items: start; }.chip-cases { display: grid; gap: .65rem; }.chip-cases button { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; gap: .1rem .75rem; min-height: 84px; padding: .75rem; border: 1.5px solid var(--ink); border-radius: 11px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.chip-cases button > span { grid-row: 1 / 3; display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-size: .8rem; font-weight: 950; }.chip-cases button strong { align-self: end; }.chip-cases button small { color: var(--muted); }.chip-cases button:hover { background: var(--blue-soft); transform: translateY(-2px); }.chip-cases button[aria-pressed="true"] { background: var(--green); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }
.chip-result { position: sticky; top: 102px; min-height: 475px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--coral); }.chip-result-tag { display: inline-block; padding: .28rem .55rem; border: 1px solid white; border-radius: 99px; font-size: .76rem; font-weight: 900; text-transform: uppercase; }.chip-result h3 { margin: .8rem 0; color: white; font-size: clamp(1.3rem,3vw,1.8rem); }.chip-choice { display: grid; grid-template-columns: repeat(4,1fr); gap: .45rem; }.chip-choice i { display: grid; min-height: 58px; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 9px; font-style: normal; font-weight: 950; opacity: .35; }.chip-choice[data-chip-choice="cpu"] i:nth-child(1), .chip-choice[data-chip-choice="gpu"] i:nth-child(2), .chip-choice[data-chip-choice="tpu"] i:nth-child(3), .chip-choice[data-chip-choice="npu"] i:nth-child(4), .chip-choice[data-chip-choice="gpu-tpu"] i:nth-child(2), .chip-choice[data-chip-choice="gpu-tpu"] i:nth-child(3) { color: var(--ink); background: var(--green); opacity: 1; }.chip-result dl { display: grid; gap: .6rem; margin: .9rem 0 0; }.chip-result dl > div { padding: .65rem; border-top: 1px solid rgba(255,255,255,.3); }.chip-result dt { color: var(--yellow); font-size: .74rem; font-weight: 950; text-transform: uppercase; }.chip-result dd { margin: .25rem 0 0; color: #eef0ff; }
.chip-family { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }.chip-family article { min-height: 250px; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.chip-family span, .local-cards span { display: inline-block; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; text-transform: uppercase; }.chip-family h3 { margin: .8rem 0 .4rem; }.chip-family p { color: var(--muted); }
.chip-matrix, .chip-memory, .chip-local, .chip-tops, .chip-limits, .chip-checks { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.matrix-note { padding: .9rem; border-left: 6px solid var(--coral); background: var(--paper); }.matrix-demo { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; padding: 1.1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--green); }.matrix-demo > div { display: grid; grid-template-columns: repeat(2,1fr); gap: .3rem; }.matrix-demo i { display: grid; aspect-ratio: 1; place-items: center; border: 1px solid var(--ink); border-radius: 5px; background: var(--blue-soft); font-style: normal; font-weight: 900; }.matrix-demo .result i { color: white; background: var(--blue); }.matrix-demo > b { color: var(--blue-dark); font-size: 1.35rem; }.matrix-demo > small { grid-column: 1 / -1; color: var(--muted); text-align: center; }
.memory-road { padding: 1.1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--coral); }.memory-road article { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; }.memory-road span { padding: .8rem .55rem; border-radius: 9px; background: var(--blue-soft); font-weight: 900; text-align: center; }.memory-road strong { color: var(--blue); }.memory-road p { margin: .9rem 0 0; color: var(--muted); text-align: center; }
.local-cards { display: grid; grid-template-columns: repeat(2,1fr); gap: .75rem; }.local-cards article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.local-cards article:first-child { box-shadow: 7px 7px 0 var(--green); }.local-cards article:last-child { box-shadow: 7px 7px 0 var(--yellow); }.local-cards h3 { margin: .8rem 0 .4rem; }.local-cards ul { margin-bottom: 0; padding-left: 1.2rem; }
.tops-card { padding: 1.2rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }.tops-card strong { color: var(--green); font-family: var(--display); font-size: clamp(1.5rem,4vw,2.3rem); }.tops-card p { color: #e1e6ff; }
.chip-limits > div:last-child { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.chip-limits article { padding: .95rem; border-top: 5px solid var(--coral); background: var(--paper); }.chip-limits strong { color: var(--blue-dark); }.chip-limits p { margin: .35rem 0 0; color: var(--muted); }.chip-checks ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.chip-checks li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.chip-checks li > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.chip-checks li p { margin: .1rem 0 0; }

/* Memoire materielle */
.vram-hero { padding-bottom: 2.7rem; overflow: hidden; }.vram-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.vram-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--coral); background: var(--paper); }.vram-key strong { color: var(--blue-dark); }
.vram-tank { padding: 1.25rem; border: 2px solid var(--ink); border-radius: 20px; color: white; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--green); transform: rotate(1deg); }.vram-tank > span { color: var(--yellow); font-weight: 950; }.vram-tank > div { display: grid; grid-template-rows: 2.6fr 1.3fr 1fr .8fr; min-height: 310px; margin: .8rem 0; overflow: hidden; border: 2px solid white; border-radius: 12px; }.vram-tank i { display: grid; place-items: center; border-bottom: 1px solid var(--ink); color: var(--ink); font-style: normal; font-weight: 950; }.vram-tank .weights { background: var(--blue-soft); }.vram-tank .cache { background: var(--yellow); }.vram-tank .work { color: white; background: var(--blue); }.vram-tank .free { background: var(--green); }.vram-tank small { color: #e1e6ff; }
.vram-lab-section { padding-top: 2.6rem; }.vram-lab { display: grid; grid-template-columns: minmax(0,.9fr) minmax(430px,1.1fr); gap: 1.2rem; align-items: start; }.vram-controls { display: grid; gap: .8rem; }.vram-controls fieldset { margin: 0; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.vram-controls legend { padding: 0 .4rem; font-weight: 950; }.vram-controls fieldset > div { display: grid; grid-template-columns: repeat(4,1fr); gap: .45rem; }.vram-controls button { min-height: 52px; border: 1.5px solid var(--ink); border-radius: 9px; color: var(--ink); background: white; font: inherit; font-weight: 900; cursor: pointer; }.vram-controls button[aria-pressed="true"] { background: var(--green); box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px,-1px); }.vram-controls small { display: block; margin-top: .7rem; color: var(--muted); }
.vram-result { position: sticky; top: 102px; min-height: 500px; padding: 1.35rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }.vram-result > span { color: var(--green); font-size: .76rem; font-weight: 950; text-transform: uppercase; }.vram-result > strong { display: block; margin: .8rem 0 .2rem; color: white; font-family: var(--display); font-size: clamp(2.4rem,7vw,4.5rem); }.vram-result > p { margin: 0 0 .8rem; color: #dfe5ff; }.vram-meter { height: 18px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.15); }.vram-meter i { display: block; width: min(var(--fill),100%); height: 100%; border-radius: inherit; background: var(--yellow); transition: width .25s ease; }.vram-result dl { display: grid; gap: .6rem; margin: 1rem 0 0; }.vram-result dl > div { padding-top: .65rem; border-top: 1px solid rgba(255,255,255,.3); }.vram-result dt { color: var(--green); font-size: .74rem; font-weight: 950; text-transform: uppercase; }.vram-result dd { margin: .25rem 0 0; color: #eef0ff; }
.memory-types-grid, .memory-solutions { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }.memory-types-grid article, .memory-solutions article { min-height: 235px; padding: 1rem; border: 1.5px solid var(--ink); border-radius: 13px; background: var(--paper); }.memory-types-grid span, .memory-solutions span { display: inline-block; padding: .25rem .5rem; border-radius: 99px; color: white; background: var(--blue); font-size: .75rem; font-weight: 900; text-transform: uppercase; }.memory-types-grid h3, .memory-solutions h3 { margin: .75rem 0 .4rem; }.memory-types-grid p, .memory-solutions p { color: var(--muted); }
.memory-stack, .kv-memory, .train-memory, .memory-speed, .memory-checks { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.memory-stack ol, .memory-checks ol { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.memory-stack li, .memory-checks li { display: grid; grid-template-columns: 40px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.memory-stack li > span, .memory-checks li > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.memory-stack li p, .memory-checks li p { margin: .1rem 0 0; }
.kv-strip { padding: 1.1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--coral); }.kv-strip span { color: var(--blue-dark); font-weight: 900; }.kv-strip p { display: grid; grid-template-columns: repeat(8,1fr); gap: .35rem; margin: .8rem 0; }.kv-strip i { height: 54px; border-radius: 7px; background: var(--blue-soft); }.kv-strip i:nth-child(n+5) { background: var(--yellow); }
.train-pile { display: grid; gap: .55rem; }.train-pile article { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--paper); }.train-pile article:nth-child(2) { margin-left: 1rem; }.train-pile article:nth-child(3) { margin-left: 2rem; }.train-pile article:nth-child(4) { margin-left: 3rem; }.train-pile strong { color: var(--blue-dark); }.train-pile span { color: var(--muted); }
.speed-card { display: grid; grid-template-columns: auto 1fr; gap: .8rem 1rem; align-items: center; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--green); }.speed-card strong { color: var(--yellow); }.speed-card span { color: #e1e6ff; }

.soft-target p:nth-child(1) { --score: 86%; }.soft-target p:nth-child(2) { --score: 9%; }.soft-target p:nth-child(3) { --score: 5%; }

/* Fundamental series: cache, alignment, evaluation and guardrails */
.foundation-hero { padding-bottom: 2.7rem; overflow: hidden; }.foundation-hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(2rem,7vw,5rem); align-items: center; }.foundation-key { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: 1.4rem; padding: .9rem 1rem; border-left: 6px solid var(--yellow); background: var(--paper); }.foundation-key strong { color: var(--blue-dark); }.danger-key { border-left-color: var(--coral); }
.cache-hero-board { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 18px; color: white; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--green); transform: rotate(1deg); }.cache-hero-board span { padding: .8rem .45rem; border-radius: 9px; color: var(--ink); background: var(--yellow); font-weight: 950; text-align: center; }.cache-hero-board span:nth-of-type(2) { background: var(--green); }.cache-hero-board b { color: white; }.cache-hero-board small { grid-column: 1/-1; color: #e1e6ff; text-align: center; }
.foundation-lab-section { padding-top: 2.6rem; }.foundation-lab { display: grid; grid-template-columns: minmax(0,.82fr) minmax(430px,1.18fr); gap: 1.2rem; align-items: start; }.foundation-controls { display: grid; gap: .65rem; }.foundation-controls button { display: grid; min-height: 82px; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 11px; color: var(--ink); background: var(--paper); font: inherit; text-align: left; cursor: pointer; }.foundation-controls button small { margin-top: .2rem; color: var(--muted); }.foundation-controls button[aria-pressed="true"] { background: var(--green); box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px,-1px); }.foundation-result { min-height: 355px; padding: 1.25rem; border: 2px solid var(--ink); border-radius: 16px; color: white; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }.foundation-result > span { color: var(--green); font-size: .76rem; font-weight: 950; text-transform: uppercase; }.foundation-result h3 { margin: .7rem 0; color: white; font-size: clamp(1.3rem,3vw,1.8rem); }.foundation-result dl { display: grid; gap: .55rem; margin: 1rem 0 0; }.foundation-result dl > div { padding-top: .55rem; border-top: 1px solid rgba(255,255,255,.3); }.foundation-result dt { color: var(--green); font-size: .74rem; font-weight: 950; text-transform: uppercase; }.foundation-result dd { margin: .2rem 0 0; color: #eef0ff; }
.cache-blocks { display: grid; grid-template-columns: repeat(16,1fr); gap: 4px; min-height: 78px; padding: .65rem; border: 1px solid rgba(255,255,255,.45); border-radius: 10px; }.cache-blocks i { min-height: 26px; border-radius: 4px; background: var(--yellow); }.cache-blocks i:nth-child(3n) { background: var(--green); }.foundation-split { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(2rem,7vw,5rem); align-items: start; }.kv-cards, .compare-plain, .phase-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; }.kv-cards article, .compare-plain article, .phase-grid article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.kv-cards span, .phase-grid span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.kv-cards strong { display: block; margin-top: .7rem; font-size: 1.2rem; }.compare-plain span, .phase-grid small { color: var(--blue-dark); font-size: .78rem; font-weight: 900; text-transform: uppercase; }.compare-plain h3, .phase-grid h3 { margin: .6rem 0 .35rem; }.compare-plain article.is-featured { background: var(--green); box-shadow: 5px 5px 0 var(--ink); }.phase-grid { grid-template-columns: repeat(4,1fr); }.phase-grid article { min-height: 230px; }.simple-checks { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; margin: 0; padding: 0; list-style: none; }.simple-checks li { display: grid; grid-template-columns: 38px 1fr; gap: .6rem; padding: .8rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.simple-checks span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.simple-checks p { margin: .1rem 0 0; }
.phase-stack { display: grid; gap: .55rem; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 18px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--coral); transform: rotate(1deg); }.phase-stack article { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; gap: 0 .65rem; padding: .65rem; border: 1px solid rgba(255,255,255,.35); border-radius: 9px; color: white; }.phase-stack span { grid-row: 1/3; display: grid; place-items: center; border-radius: 8px; color: var(--ink); background: var(--yellow); font-weight: 950; }.phase-stack small { color: #e1e6ff; }.alignment-compass { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; padding: 1.1rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--green); }.alignment-compass span { padding: .8rem; border-radius: 9px; background: var(--blue-soft); font-weight: 900; text-align: center; }.alignment-compass strong { grid-column: 1/-1; color: var(--blue-dark); text-align: center; }
.score-board { display: grid; grid-template-columns: repeat(2,1fr); gap: .65rem; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 18px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--yellow); transform: rotate(1deg); }.score-board span { display: flex; justify-content: space-between; gap: .5rem; padding: .8rem; border-radius: 9px; color: var(--ink); background: var(--green); font-weight: 900; }.score-board span:nth-child(2n) { background: var(--yellow); }.score-board small { grid-column: 1/-1; color: #e1e6ff; text-align: center; }
.guard-rings { display: grid; gap: .5rem; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 18px; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--green); transform: rotate(1deg); }.guard-rings span { padding: .65rem; border: 1px solid white; border-radius: 99px; color: white; font-weight: 900; text-align: center; }.guard-rings span:nth-child(2), .guard-rings span:nth-child(4) { margin-inline: 1.5rem; background: rgba(112,231,175,.2); }.guard-rings span:nth-child(3) { margin-inline: 3rem; color: var(--ink); background: var(--yellow); }.instruction-layers { display: grid; gap: .65rem; }.instruction-layers article { padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.instruction-layers span { display: inline-block; margin-right: .6rem; color: var(--blue-dark); font-size: .75rem; font-weight: 950; text-transform: uppercase; }.instruction-layers p { margin: .35rem 0 0; }.instruction-layers .untrusted { border-color: var(--coral); background: #fff2ef; }.injection-flow { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .5rem; align-items: center; padding: 1rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 8px 8px 0 var(--coral); }.injection-flow span { padding: .7rem; border-radius: 8px; background: var(--blue-soft); font-weight: 900; text-align: center; }.injection-flow strong { grid-column: 1/-1; color: var(--blue-dark); text-align: center; }

.api-board, .model-balance, .local-board, .agent-loop { display: grid; gap: .6rem; align-items: center; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 18px; color: white; background: var(--blue-dark); box-shadow: 10px 10px 0 var(--green); transform: rotate(1deg); }.api-board { grid-template-columns: 1fr auto 1fr auto 1fr; }.api-board span, .model-balance article, .local-board span, .agent-loop span { padding: .75rem; border-radius: 9px; color: var(--ink); background: var(--yellow); font-weight: 900; text-align: center; }.api-board span:nth-of-type(2), .local-board span:nth-of-type(2), .agent-loop span:nth-of-type(2) { background: var(--green); }.api-board small { grid-column: 1/-1; color: #e1e6ff; text-align: center; }.request-response { display: grid; grid-template-columns: 1fr auto 1fr; gap: .7rem; align-items: center; }.request-response article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.request-response span { display: block; color: var(--blue-dark); font-size: .75rem; font-weight: 950; }.request-response code { display: block; margin: .6rem 0; padding: .55rem; border-radius: 7px; color: white; background: var(--blue-dark); }.request-response b { color: var(--coral); font-size: 1.5rem; }
.model-balance { grid-template-columns: 1fr auto 1fr; }.model-balance article { display: grid; min-height: 170px; align-content: center; color: white; background: transparent; border: 1px solid rgba(255,255,255,.45); }.model-balance article span, .model-balance article strong, .model-balance article small { display: block; }.model-balance article span { color: var(--green); }.model-balance article strong { margin: .45rem 0; font-size: 1.15rem; }.model-balance article small { color: #e1e6ff; }.model-balance b { color: var(--yellow); font-size: 1.5rem; }
.local-board { grid-template-columns: 1fr auto 1fr auto 1.3fr; }.local-board strong { grid-column: 1/-1; padding: .65rem; border: 1px solid white; border-radius: 9px; text-align: center; }.agent-loop { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; }.agent-loop strong { grid-column: 1/-1; color: #e1e6ff; text-align: center; }.agent-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; margin: 0; padding: 0; list-style: none; }.agent-steps li { display: grid; grid-template-columns: 42px 1fr; gap: .65rem; padding: .85rem; border: 1.5px solid var(--ink); border-radius: 11px; background: var(--paper); }.agent-steps span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: white; background: var(--blue); font-weight: 950; }.agent-steps p { margin: .1rem 0 0; }

@media (max-width: 850px) {
  .hero-grid, .page-hero-grid, .article-layout, .path-grid { grid-template-columns: 1fr; }
  .hero-panel { max-width: 600px; }
  .page-hero-grid { gap: 1.7rem; }
  .meta-box { max-width: 500px; }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; }
  .toc strong { width: 100%; }
  .toc a { border: 1px solid var(--line); border-radius: 99px; padding: .4rem .7rem; }
  .card-grid { grid-template-columns: 1fr; }
  .home-entry-grid { grid-template-columns: repeat(2, 1fr); }
  .home-entry-grid .content-card, .home-entry-grid .content-card:nth-child(4), .home-entry-grid .content-card:nth-child(5) { grid-column: auto; }
  .library-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .questions-layout { grid-template-columns: 1fr; }
  .question-filters { position: static; display: flex; flex-wrap: wrap; }
  .question-filters strong { width: 100%; }
  .question-filters .choice { width: auto; border-radius: 99px; }
  .safe-method { grid-template-columns: 1fr; }
  .help-grid { grid-template-columns: repeat(2, 1fr); }
  .safety-sources { grid-template-columns: 1fr; }
  .chooser-layout { grid-template-columns: 1fr; }
  .tool-result { position: static; min-height: 0; }
  .tool-family-grid { grid-template-columns: repeat(2, 1fr); }
  .buying-check { grid-template-columns: 1fr; }
  .prompt-layout { grid-template-columns: 1fr; }
  .prompt-output { position: static; min-height: 0; }
  .prompt-principles { grid-template-columns: repeat(2, 1fr); }
  .quiz-start { grid-template-columns: auto 1fr; }
  .quiz-start .button { grid-column: 1 / -1; }
  .quiz-breakdown { grid-template-columns: repeat(2, 1fr); }
  .cost-layout { grid-template-columns: 1fr; }
  .cost-result { position: static; }
  .payment-grid, .budget-paths { grid-template-columns: repeat(2, 1fr); }
  .token-explainer, .surprise-check { grid-template-columns: 1fr; }
  .youth-tool, .charter-layout, .learning-method { grid-template-columns: 1fr; }
  .situation-answer { position: static; min-height: 0; }
  .adult-grid { grid-template-columns: 1fr 1fr; }
  .eco-tool, .media-impact, .myths-layout, .sources-panel, .scam-tool, .scam-check-layout, .context-tool, .window-layout, .count-layout, .learning-cycle-tool, .model-layout, .conversation-learning, .quality-layout, .data-lab, .label-example, .personal-data-layout, .before-share, .job-lab, .task-not-job, .own-job-layout, .work-quality-layout, .effective-control, .automation-bias, .rights-layout, .image-hero-grid, .image-prompt-lab, .image-explainer, .variation-layout, .prompt-image-method, .image-reflexes, .sound-hero-grid, .sound-lab, .clone-layout, .music-layout, .identity-check, .publish-audio, .video-hero-grid, .video-lab, .consistency-layout, .video-method, .verify-video, .publish-video, .multimodal-hero-grid, .multi-lab, .common-space, .sampling-layout, .multi-method { grid-template-columns: 1fr; }
  .eco-answer { position: static; min-height: 0; }
  .scam-answer { position: static; min-height: 0; }
  .impact-cycle, .eco-habits, .scam-mechanism, .after-scam-grid, .token-definitions, .token-habits { grid-template-columns: repeat(2, 1fr); }
  .context-answer { position: static; min-height: 0; }
  .learning-stage-answer { position: static; min-height: 0; }
  .data-lab-answer { position: static; min-height: 0; }
  .job-lab-answer { position: static; min-height: 0; }
  .image-prompt-answer { position: static; min-height: 0; }
  .sound-answer { position: static; min-height: 0; }
  .video-answer { position: static; min-height: 0; }
  .multi-answer { position: static; min-height: 0; }
  .reason-hero-grid, .reason-lab, .reason-meaning, .reason-process, .reason-method, .reason-prompt { grid-template-columns: 1fr; }
  .reason-answer { position: static; min-height: 0; }
  .reason-families { grid-template-columns: repeat(2,1fr); }
  .reason-failures { grid-template-columns: repeat(2,1fr); }
  .trio-hero-grid, .trio-lab, .not-scale, .inside-system, .trio-method { grid-template-columns: 1fr; }
  .trio-answer { position: static; min-height: 0; }
  .trio-definitions, .trio-risks { grid-template-columns: repeat(2,1fr); }
  .system-chain { grid-template-columns: 1fr auto 1fr; }
  .system-chain span:last-of-type { grid-column: 2 / 4; }
  .deploy-hero-grid, .deploy-lab, .access-layout, .where-layout, .deploy-method { grid-template-columns: 1fr; }
  .deploy-answer { position: static; min-height: 0; }
  .deploy-tradeoffs { grid-template-columns: repeat(2,1fr); }
  .privacy-chain { grid-template-columns: 1fr auto 1fr; }
  .privacy-chain article:nth-of-type(3) { grid-column: 1; }
  .memory-hero-grid, .memory-lab, .context-memory, .storage-layout, .retrieval-layout, .training-memory, .memory-method, .variation-hero-grid, .variation-lab, .next-token-layout, .temperature-layout, .useful-variation, .variation-method, .neural-hero-grid, .neural-lab, .neuron-layout, .neural-training, .parameter-layout, .brain-compare, .neural-limits, .parameter-hero-grid, .weight-lab, .learned-layout, .count-meaning, .stored-layout, .parameter-method, .embedding-hero-grid, .embedding-lab, .embedding-explainer, .embedding-distance, .contextual-layout, .embedding-limits, .embedding-method, .rag-hero-grid, .rag-lab, .rag-preparation, .rag-live, .rag-not, .rag-compare, .rag-method, .llm-hero-grid, .llm-lab, .llm-loop-layout, .llm-training, .llm-attention, .llm-system, .llm-limits, .llm-method, .transformer-hero-grid, .transformer-lab, .transformer-input, .transformer-qkv, .transformer-heads, .transformer-impact, .transformer-limits, .transformer-method { grid-template-columns: 1fr; }
  .embedding-result { position: static; min-height: 0; }
  .rag-result { position: static; min-height: 0; }
  .rag-benefits { grid-template-columns: repeat(2,1fr); }
  .llm-result { position: static; min-height: 0; }
  .llm-abilities { grid-template-columns: repeat(2,1fr); }
  .transformer-result { position: static; min-height: 0; }
  .memory-answer { position: static; min-height: 0; }
  .memory-types { grid-template-columns: repeat(2,1fr); }
  .variation-causes { grid-template-columns: repeat(2,1fr); }
  .parameter-types { grid-template-columns: repeat(2,1fr); }
  .neural-answer { position: static; min-height: 0; }
  .model-adjustment { grid-template-columns: 1fr auto 1fr; }
  .model-adjustment > span:nth-of-type(2), .model-adjustment div:last-of-type { display: none; }
  .dataset-sets, .learning-methods { grid-template-columns: repeat(2, 1fr); }
  .data-journey { grid-template-columns: repeat(3, 1fr); }
  .future-skills { grid-template-columns: repeat(3, 1fr); }
  .decision-questions { grid-template-columns: repeat(2, 1fr); }
  .diffusion-steps, .image-operations, .image-risks { grid-template-columns: repeat(2, 1fr); }
  .sound-parts, .audio-limits { grid-template-columns: repeat(2, 1fr); }
  .video-process, .video-modes { grid-template-columns: repeat(2,1fr); }
  .modality-cards, .io-grid, .multi-risks { grid-template-columns: repeat(2,1fr); }
  .eco-habits article:last-child { grid-column: auto; }
  .content-card { min-height: 0; }
  .tuning-hero-grid, .tuning-lab, .tuning-difference, .tuning-peft, .tuning-data, .tuning-uses, .tuning-risks, .tuning-method { grid-template-columns: 1fr; }
  .tuning-result { position: static; min-height: auto; }
  .tuning-compare { grid-template-columns: repeat(2,1fr); }
  .inference-hero-grid, .inference-lab, .inference-split, .generation-inference, .inference-modes, .performance-layout, .inference-optim, .inference-limits, .inference-method { grid-template-columns: 1fr; }
  .inference-result { position: static; min-height: auto; }
  .distill-hero-grid, .distill-lab, .distill-steps-layout, .distill-temperature, .distill-benefits, .distill-limits, .distill-method { grid-template-columns: 1fr; }
  .distill-result { position: static; min-height: auto; }
  .distill-compare { grid-template-columns: repeat(2,1fr); }
  .quant-hero-grid, .quant-lab, .quant-mapping, .quant-methods, .quant-benefits, .quant-limits, .quant-checks { grid-template-columns: 1fr; }
  .quant-result { position: static; min-height: auto; }
  .quant-compare { grid-template-columns: repeat(2,1fr); }
  .prune-hero-grid, .prune-lab, .prune-process, .prune-zero, .prune-benefits, .prune-limits, .prune-checks { grid-template-columns: 1fr; }
  .prune-result { position: static; min-height: auto; }
  .prune-compare { grid-template-columns: repeat(2,1fr); }
  .moe-hero-grid, .moe-lab, .moe-cycle, .moe-counts, .moe-reality, .moe-gains, .moe-costs, .moe-checks { grid-template-columns: 1fr; }
  .moe-result { position: static; min-height: auto; }
  .moe-compare { grid-template-columns: repeat(2,1fr); }
  .chip-hero-grid, .chip-lab, .chip-matrix, .chip-memory, .chip-local, .chip-tops, .chip-limits, .chip-checks { grid-template-columns: 1fr; }
  .chip-result { position: static; min-height: auto; }
  .chip-family { grid-template-columns: repeat(2,1fr); }
  .vram-hero-grid, .vram-lab, .memory-stack, .kv-memory, .train-memory, .memory-speed, .memory-checks, .foundation-hero-grid, .foundation-lab, .foundation-split { grid-template-columns: 1fr; }
  .vram-result { position: static; min-height: auto; }
  .memory-types-grid, .memory-solutions { grid-template-columns: repeat(2,1fr); }
  .phase-grid { grid-template-columns: repeat(2,1fr); }.phase-grid article { min-height: 0; }
}

/* Fondamentaux de l'apprentissage automatique */
.learning-signals { display: grid; grid-template-columns: repeat(3,1fr); gap: .65rem; transform: rotate(-2deg); }.learning-signals article { display: grid; min-height: 120px; place-content: center; padding: 1rem; border: 2px solid var(--ink); border-radius: 14px; text-align: center; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); }.learning-signals article:nth-child(2) { background: var(--green); transform: translateY(20px); }.learning-signals article:nth-child(3) { color: white; background: var(--blue); transform: translateY(4px); }.learning-signals span { font-size: .76rem; font-weight: 950; text-transform: uppercase; }.learning-signals strong { margin-top: .3rem; font-size: 1.05rem; }.learning-compare { grid-template-columns: repeat(3,1fr); }.output-machine { display: grid; grid-template-columns: 1fr auto 1fr; gap: .65rem; align-items: center; }.output-machine > div { display: grid; min-height: 82px; align-content: center; padding: .7rem; border: 2px solid var(--ink); border-radius: 11px; background: var(--paper); box-shadow: 4px 4px 0 var(--ink); }.output-machine > div:first-child { grid-row: 1 / 4; }.output-machine > b { grid-row: 1 / 4; font-size: 2rem; }.output-machine small { color: var(--blue-dark); font-size: .7rem; font-weight: 950; text-transform: uppercase; }.prediction-cards, .step-sizes, .dataset-split { display: grid; gap: .7rem; }.prediction-cards article, .step-sizes article, .dataset-split article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.prediction-cards strong, .step-sizes strong, .dataset-split strong { display: block; font-size: 1.15rem; }.prediction-cards p, .step-sizes p, .dataset-split p { margin-bottom: 0; }.gradient-valley { position: relative; min-height: 310px; overflow: hidden; border: 2px solid var(--ink); border-radius: 50% 50% 14px 14px; background: var(--blue-dark); box-shadow: 8px 8px 0 var(--yellow); }.gradient-valley::before { content: ''; position: absolute; inset: 25px -15% -55%; border: 4px solid var(--green); border-radius: 50%; background: var(--paper); }.gradient-valley i { position: absolute; z-index: 1; width: 25px; height: 25px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); }.gradient-valley i:nth-of-type(1) { top: 55px; left: 16%; }.gradient-valley i:nth-of-type(2) { top: 115px; left: 32%; }.gradient-valley i:nth-of-type(3) { top: 175px; left: 47%; }.gradient-valley i:nth-of-type(4) { top: 223px; left: 57%; background: var(--green); }.gradient-start, .gradient-valley strong { position: absolute; z-index: 2; padding: .35rem .55rem; border-radius: 6px; font-weight: 950; }.gradient-start { top: 20px; left: 8%; background: var(--yellow); }.gradient-valley strong { right: 7%; bottom: 12px; color: white; background: var(--blue); }.step-sizes { grid-template-columns: repeat(3,1fr); }.step-sizes span, .dataset-split span { color: var(--blue-dark); font-size: .75rem; font-weight: 950; text-transform: uppercase; }.step-line { display: flex; gap: .25rem; margin-top: 1rem; align-items: center; }.step-line i { display: block; width: 17px; height: 17px; border-radius: 50%; background: var(--blue); }.step-line.is-good i { width: 28px; height: 28px; background: var(--green); border: 2px solid var(--ink); }.step-line.is-large { justify-content: space-between; }.step-line.is-large i { width: 42px; height: 42px; background: var(--coral); border: 2px solid var(--ink); }.exam-analogy { display: grid; grid-template-columns: 1fr auto 1fr; gap: .8rem; align-items: center; }.exam-analogy article { display: grid; padding: 1rem; border: 2px solid var(--ink); border-radius: 14px; text-align: center; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); }.exam-analogy article:last-child { background: var(--green); }.exam-analogy b { font-size: 2rem; }.exam-analogy strong { font-size: 2rem; }.exam-analogy span, .exam-analogy small { font-weight: 850; }.score-pair { display: grid; grid-template-columns: repeat(2,1fr); gap: .7rem; margin: 1rem 0; }.score-pair p { padding: .75rem; border: 1px solid rgba(255,255,255,.45); border-radius: 9px; }.score-pair span, .score-pair strong { display: block; }.score-pair span { color: var(--green); font-size: .72rem; font-weight: 950; text-transform: uppercase; }.score-pair strong { margin-top: .2rem; font-size: 1.7rem; }.dataset-split { grid-template-columns: 2fr 1fr 1fr; }.dataset-split article:first-child { background: var(--green); }

@media (max-width: 850px) { .learning-compare, .step-sizes { grid-template-columns: 1fr; }.learning-signals { transform: none; }.learning-signals article:nth-child(n) { transform: none; } }
@media (max-width: 620px) { .learning-signals, .output-machine, .exam-analogy, .dataset-split { grid-template-columns: 1fr; }.output-machine > div:first-child, .output-machine > b { grid-row: auto; }.output-machine > b { justify-self: center; transform: rotate(90deg); }.exam-analogy b { justify-self: center; }.score-pair { grid-template-columns: 1fr; } }

/* Données, métriques et suivi en production */
.dataset-table { display: grid; grid-template-columns: repeat(3,1fr); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }.dataset-table > * { padding: .65rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }.dataset-table .is-head { color: white; background: var(--blue-dark); font-weight: 950; }.dataset-table .is-label { background: var(--green); font-weight: 950; }.dataset-table small { color: var(--blue-dark); font-weight: 950; text-transform: uppercase; }.split-pipeline { display: flex; gap: .55rem; }.split-pipeline article { flex-basis: var(--share); padding: 1rem; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); }.split-pipeline article:first-child { background: var(--green); }.split-pipeline span, .split-pipeline strong { display: block; }.split-pipeline span { color: var(--blue-dark); font-size: .75rem; font-weight: 950; text-transform: uppercase; }.fine-print { color: var(--muted); font-size: .9rem; }.leak-example { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; }.leak-example > span, .leak-example > strong { padding: .7rem; border: 1.5px solid var(--ink); background: var(--paper); }.leak-example > span { color: var(--blue-dark); font-size: .72rem; font-weight: 950; text-transform: uppercase; }.leak-example b { font-size: 1.5rem; }.accuracy-trap { padding: 1.2rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--yellow); box-shadow: 8px 8px 0 var(--ink); }.accuracy-trap strong { display: block; color: var(--blue-dark); font-size: clamp(4rem,12vw,7rem); line-height: .9; }.accuracy-trap span { font-size: 1.2rem; font-weight: 950; }.accuracy-trap p { margin-bottom: 0; }.confusion-matrix { display: grid; grid-template-columns: .8fr repeat(2,1fr); border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; }.confusion-matrix > div { display: grid; min-height: 85px; align-content: center; padding: .65rem; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); }.confusion-matrix .is-head { color: white; background: var(--blue-dark); font-weight: 950; }.confusion-matrix .is-good { background: var(--green); }.confusion-matrix .is-alert { background: #ffe4dc; }.confusion-matrix small, .confusion-matrix strong { display: block; }.threshold-scale { display: grid; grid-template-columns: auto 1fr auto 1fr auto; gap: .5rem; align-items: center; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); }.threshold-scale i { height: 8px; background: var(--blue); }.threshold-scale strong { padding: .45rem; border: 2px solid var(--ink); border-radius: 8px; background: var(--yellow); }.threshold-scale p { grid-column: span 5; margin: .3rem 0 0; }.drift-chart { position: relative; min-height: 290px; overflow: hidden; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }.drift-chart::before { content: ''; position: absolute; left: 7%; right: 7%; top: 20%; height: 58%; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }.drift-chart i { position: absolute; z-index: 1; width: 18px; height: 18px; border: 3px solid var(--ink); border-radius: 50%; background: var(--green); }.drift-chart i:nth-of-type(1) { left: 15%; top: 32%; }.drift-chart i:nth-of-type(2) { left: 32%; top: 35%; }.drift-chart i:nth-of-type(3) { left: 49%; top: 43%; }.drift-chart i:nth-of-type(4) { left: 66%; top: 56%; background: var(--yellow); }.drift-chart i:nth-of-type(5) { left: 82%; top: 69%; background: var(--coral); }.drift-chart span, .drift-chart strong { position: absolute; z-index: 2; font-weight: 950; }.drift-chart span { top: 7%; left: 7%; color: var(--blue-dark); }.drift-chart strong { right: 7%; bottom: 5%; }.signal-levels { display: grid; grid-template-columns: repeat(3,1fr); gap: .7rem; }.signal-levels article { padding: 1rem; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); }.signal-levels article:nth-child(2) { background: var(--green); }.signal-levels span { color: var(--blue-dark); font-size: .75rem; font-weight: 950; text-transform: uppercase; }.signal-levels strong { display: block; margin-top: .35rem; font-size: 1.15rem; }.explanation-balance { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: .55rem; align-items: center; }.explanation-balance span { padding: 1rem .6rem; border: 2px solid var(--ink); border-radius: 12px; text-align: center; background: var(--paper); box-shadow: 4px 4px 0 var(--ink); font-weight: 950; }.explanation-balance span:nth-of-type(2) { background: var(--green); }.explanation-balance b { font-size: 1.7rem; }.explanation-balance strong { grid-column: 1 / -1; padding: .7rem; border-radius: 9px; color: white; text-align: center; background: var(--blue-dark); }
@media (max-width: 850px) { .split-pipeline, .signal-levels { display: grid; grid-template-columns: 1fr; }.leak-example, .explanation-balance { grid-template-columns: 1fr; }.leak-example b, .explanation-balance b { justify-self: center; }.explanation-balance strong { grid-column: auto; } }
@media (max-width: 620px) { .dataset-table { font-size: .82rem; }.dataset-table > * { padding: .45rem .3rem; }.confusion-matrix { font-size: .82rem; }.confusion-matrix > div { min-height: 74px; padding: .4rem; }.threshold-scale { grid-template-columns: 1fr; text-align: center; }.threshold-scale i { height: 24px; width: 8px; justify-self: center; }.threshold-scale p { grid-column: auto; } }

/* Probabilités, anomalies et recommandation */
.probability-stack { padding: 1.15rem; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }.probability-stack p { display: grid; grid-template-columns: 70px 1fr 48px; gap: .55rem; align-items: center; margin: .6rem 0; }.probability-stack i { height: 20px; border: 1px solid var(--ink); border-radius: 999px; background: linear-gradient(90deg,var(--blue) var(--score),#e1e5f0 var(--score)); }.probability-stack span, .probability-stack strong { font-weight: 950; }.probability-stack small { display: block; margin-top: 1rem; color: var(--muted); }.calibration-card { padding: 1.2rem; border: 2px solid var(--ink); border-radius: 16px; text-align: center; background: var(--green); box-shadow: 8px 8px 0 var(--ink); }.calibration-card > span { color: var(--blue-dark); font-weight: 950; text-transform: uppercase; }.calibration-card > strong { display: block; margin: .4rem 0; color: var(--blue-dark); font-size: clamp(4rem,12vw,7rem); line-height: 1; }.calibration-card p { margin-bottom: 0; font-size: 1.1rem; }.reliability-chart { position: relative; min-height: 300px; overflow: hidden; border: 2px solid var(--ink); border-radius: 14px; background: var(--paper); box-shadow: 7px 7px 0 var(--yellow); }.reliability-chart::before { content: ''; position: absolute; inset: 12% 10% 18%; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }.reliability-chart i { position: absolute; left: 15%; right: 14%; bottom: 23%; height: 4px; background: var(--blue); transform: rotate(-38deg); transform-origin: left; }.reliability-chart .point { position: absolute; z-index: 2; width: 20px; height: 20px; border: 3px solid var(--ink); border-radius: 50%; background: var(--green); }.reliability-chart .p1 { left: 28%; bottom: 35%; }.reliability-chart .p2 { left: 50%; bottom: 49%; }.reliability-chart .p3 { left: 73%; bottom: 66%; }.reliability-chart span, .reliability-chart strong { position: absolute; z-index: 2; font-weight: 950; }.reliability-chart span { top: 5%; left: 5%; }.reliability-chart strong { right: 5%; bottom: 5%; }.anomaly-field { position: relative; min-height: 300px; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 8px 8px 0 var(--yellow); }.anomaly-field i, .anomaly-field b { position: absolute; width: 28px; height: 28px; border: 3px solid var(--ink); border-radius: 50%; background: var(--green); }.anomaly-field i:nth-child(1){left:22%;top:30%}.anomaly-field i:nth-child(2){left:34%;top:22%}.anomaly-field i:nth-child(3){left:45%;top:37%}.anomaly-field i:nth-child(4){left:28%;top:53%}.anomaly-field i:nth-child(5){left:50%;top:59%}.anomaly-field i:nth-child(6){left:39%;top:67%}.anomaly-field b{right:12%;top:18%;width:36px;height:36px;background:var(--coral)}.anomaly-field strong{position:absolute;right:5%;top:36%;padding:.4rem;background:var(--yellow);border:1px solid var(--ink)}.threshold-cards,.objective-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}.threshold-cards article,.objective-cards article{padding:1rem;border:1.5px solid var(--ink);border-radius:12px;background:var(--paper)}.threshold-cards article:first-child,.objective-cards article:nth-child(3){background:var(--green)}.threshold-cards span,.objective-cards span{color:var(--blue-dark);font-size:.75rem;font-weight:950;text-transform:uppercase}.threshold-cards strong,.objective-cards strong{display:block;margin-top:.3rem;font-size:1.15rem}.recommend-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.55rem;align-items:center}.recommend-flow span{padding:1rem .5rem;border:2px solid var(--ink);border-radius:12px;text-align:center;background:var(--paper);box-shadow:4px 4px 0 var(--ink);font-weight:900}.recommend-flow span:nth-of-type(2){background:var(--yellow)}.recommend-flow span:nth-of-type(3){color:white;background:var(--blue)}.recommend-flow strong{font-size:1.6rem}.objective-cards{grid-template-columns:repeat(2,1fr)}
@media (max-width: 620px){.probability-stack p{grid-template-columns:58px 1fr 42px;font-size:.86rem}.threshold-cards,.objective-cards,.recommend-flow{grid-template-columns:1fr}.recommend-flow strong{justify-self:center;transform:rotate(90deg)}}

/* Centre de parcours */
.pathway-hero{padding-bottom:3rem}.pathway-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,7vw,5rem);align-items:center}.pathway-compass{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.pathway-compass>*{display:grid;min-height:82px;place-items:center;padding:.6rem;border:2px solid var(--ink);border-radius:12px;text-align:center;background:var(--paper);box-shadow:4px 4px 0 var(--ink);font-weight:900}.pathway-compass strong{grid-column:1/-1;color:white;background:var(--blue-dark)}.pathway-compass span:nth-of-type(2),.pathway-compass span:nth-of-type(5){background:var(--green)}.pathway-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}.pathway-picker a{display:grid;grid-template-columns:44px 1fr;gap:.2rem .65rem;min-height:125px;padding:1rem;border:1.5px solid var(--ink);border-radius:14px;color:var(--ink);background:var(--paper);text-decoration:none}.pathway-picker a:hover{transform:translateY(-3px);box-shadow:5px 5px 0 var(--ink)}.pathway-picker span{grid-row:1/3;display:grid;width:40px;height:40px;place-items:center;border-radius:50%;color:white;background:var(--blue);font-weight:950}.pathway-picker strong{font-size:1.05rem}.pathway-picker small{color:var(--muted)}.pathway-list{display:grid;gap:1.3rem}.pathway-detail{scroll-margin-top:110px;padding:clamp(1rem,3vw,1.7rem);border:2px solid var(--ink);border-radius:18px;background:var(--paper);box-shadow:7px 7px 0 var(--yellow)}.pathway-detail:nth-child(even){box-shadow:7px 7px 0 var(--green)}.pathway-detail-head{display:grid;grid-template-columns:62px 1fr auto;gap:1rem;align-items:center}.pathway-detail-head>span{display:grid;width:58px;height:58px;place-items:center;border-radius:50%;color:white;background:var(--blue-dark);font-size:1.2rem;font-weight:950}.pathway-detail-head h2{margin:.15rem 0 .35rem}.pathway-detail-head p{margin:0}.pathway-detail ol{display:grid;grid-template-columns:repeat(2,1fr);gap:.55rem;margin:1.2rem 0 0;padding:0;list-style:none}.pathway-detail li a{display:grid;grid-template-columns:34px 1fr auto;gap:.55rem;align-items:center;padding:.7rem;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:white;text-decoration:none}.pathway-detail li a:hover{border-color:var(--blue);transform:translateX(2px)}.pathway-detail li span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;color:white;background:var(--blue);font-weight:900}.pathway-detail li small{color:var(--muted)}.pathway-all{display:flex;justify-content:space-between;gap:2rem;align-items:center}.pathway-more{display:flex;justify-content:center;margin-top:1.3rem}
@media(max-width:850px){.pathway-hero-grid{grid-template-columns:1fr}.pathway-picker{grid-template-columns:repeat(2,1fr)}.pathway-detail-head{grid-template-columns:52px 1fr}.pathway-detail-head>.button{grid-column:1/-1;justify-self:start}.pathway-detail ol{grid-template-columns:1fr}.pathway-all{align-items:flex-start;flex-direction:column}}
@media(max-width:620px){.pathway-compass,.pathway-picker{grid-template-columns:1fr}.pathway-compass strong{grid-column:auto}.pathway-detail-head{grid-template-columns:1fr}.pathway-detail-head>span{width:46px;height:46px}.pathway-detail li a{grid-template-columns:32px 1fr}.pathway-detail li small{grid-column:2}}

/* Suivi local des parcours */
.pathway-progress{display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,.7fr) auto;gap:.9rem 1.2rem;align-items:center;margin:0 0 1.4rem;padding:1.15rem 1.25rem;border:2px solid var(--ink);border-radius:16px;background:var(--yellow-soft);box-shadow:6px 6px 0 var(--ink)}
.pathway-progress .eyebrow{margin-bottom:.25rem}.pathway-progress-count{display:grid;gap:.1rem;margin:0}.pathway-progress-count strong{font-size:1.08rem}.pathway-progress-count span,.pathway-progress>small{color:var(--muted)}.pathway-progress>small{grid-column:1/-1}.pathway-progress progress{width:100%;height:16px;overflow:hidden;border:1px solid var(--ink);border-radius:999px;background:white;accent-color:var(--green)}.pathway-progress progress::-webkit-progress-bar{background:white}.pathway-progress progress::-webkit-progress-value{background:var(--green)}.pathway-progress progress::-moz-progress-bar{background:var(--green)}
.pathway-detail-progress{display:inline-flex!important;width:max-content;margin-top:.55rem!important;padding:.2rem .55rem;border-radius:999px;color:var(--blue-dark);background:var(--blue-soft);font-size:.82rem;font-weight:900}.pathway-detail.is-complete .pathway-detail-progress{color:white;background:var(--green)}
.pathway-step{display:grid;grid-template-columns:42px minmax(0,1fr);gap:.45rem;align-items:stretch}.pathway-step-check{display:grid;width:42px;min-height:52px;place-items:center;border:1.5px solid var(--ink);border-radius:10px;color:white;background:white;cursor:pointer}.pathway-step-check span{display:grid;width:25px;height:25px;place-items:center;border:2px solid var(--ink);border-radius:50%;background:white;font-weight:950}.pathway-step-check:hover,.pathway-step-check:focus-visible{outline:3px solid rgba(23,105,224,.25);outline-offset:1px}.pathway-step.is-complete .pathway-step-check{background:var(--green)}.pathway-step.is-complete .pathway-step-check span{color:white;background:var(--green)}.pathway-step.is-complete>a{border-color:var(--green);background:var(--green-soft)}.pathway-step.is-complete>a strong{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--green)}
@media(max-width:850px){.pathway-progress{grid-template-columns:1fr auto}.pathway-progress progress{grid-column:1/-1;grid-row:2}.pathway-progress>small{grid-row:3}}
@media(max-width:620px){.pathway-progress{grid-template-columns:1fr}.pathway-progress progress,.pathway-progress>small{grid-column:auto;grid-row:auto}.pathway-progress .button{justify-self:start}.pathway-step{grid-template-columns:40px minmax(0,1fr)}.pathway-step-check{width:40px}}

/* Reprise de l'apprentissage sur l'accueil */
.home-resume-section{padding-top:0;background:var(--surface)}.home-resume{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(220px,.7fr) auto;gap:1.2rem 2rem;align-items:center;padding:clamp(1.25rem,3vw,2rem);border:2px solid var(--ink);border-radius:20px;background:var(--paper);box-shadow:8px 8px 0 var(--yellow)}.home-resume h2{margin:.15rem 0 .45rem}.home-resume p{margin-bottom:0}.home-resume-status{display:grid;gap:.55rem}.home-resume-status strong{font-size:1.05rem}.home-resume-status progress{width:100%;height:17px;overflow:hidden;border:1px solid var(--ink);border-radius:999px;background:white;accent-color:var(--green)}.home-resume-status progress::-webkit-progress-bar{background:white}.home-resume-status progress::-webkit-progress-value{background:var(--green)}.home-resume-status progress::-moz-progress-bar{background:var(--green)}.home-resume-actions{display:grid;gap:.65rem;justify-items:center}.home-resume-actions>a:not(.button){color:var(--blue-dark);font-weight:850}
@media(max-width:900px){.home-resume{grid-template-columns:1fr 1fr}.home-resume-copy{grid-column:1/-1}.home-resume-actions{justify-items:end}}
@media(max-width:620px){.home-resume{grid-template-columns:1fr}.home-resume-copy{grid-column:auto}.home-resume-actions{justify-items:start}.home-resume-actions .button{width:100%}}

/* Boussole de fin de lecture */
.reading-compass-section{padding-top:0;background:linear-gradient(180deg,var(--paper),var(--blue-soft))}.reading-compass{display:grid;grid-template-columns:minmax(0,.8fr) minmax(360px,1.2fr);gap:clamp(1.5rem,5vw,4rem);align-items:center;padding:clamp(1.2rem,3vw,2rem);border:2px solid var(--ink);border-radius:20px;background:var(--paper);box-shadow:8px 8px 0 var(--yellow)}.reading-compass h2{margin:.1rem 0 .5rem}.reading-compass p{margin:0}.reading-compass-actions{display:grid;gap:.65rem}.reading-next{display:grid;grid-template-columns:1fr auto;gap:.1rem .8rem;padding:1rem 1.1rem;border:1.5px solid var(--ink);border-radius:14px;color:var(--ink);background:var(--blue-soft);text-decoration:none}.reading-next:hover,.reading-next:focus-visible{transform:translateY(-2px);box-shadow:4px 4px 0 var(--ink)}.reading-next small{grid-column:1/-1;color:var(--blue-dark);font-weight:900;text-transform:uppercase}.reading-next strong{font-size:1.08rem}.reading-next span{align-self:end;color:var(--blue-dark);font-weight:900}.reading-compass-links{display:flex;flex-wrap:wrap;gap:.45rem 1rem}.reading-compass-links a{color:var(--blue-dark);font-weight:850}.reading-complete{display:grid;grid-template-columns:34px 1fr;gap:.65rem;align-items:center;padding:.65rem .8rem;border:1.5px solid var(--ink);border-radius:12px;color:var(--ink);text-align:left;background:white;cursor:pointer}.reading-complete span{display:grid;width:30px;height:30px;place-items:center;border:2px solid var(--ink);border-radius:50%;background:white;font-weight:950}.reading-complete:hover,.reading-complete:focus-visible{outline:3px solid rgba(23,105,224,.25);outline-offset:1px}.reading-complete.is-complete{color:white;background:var(--green)}.reading-complete.is-complete span{color:white;background:var(--green)}
@media(max-width:850px){.reading-compass{grid-template-columns:1fr}}
@media(max-width:620px){.reading-next{grid-template-columns:1fr}.reading-next small{grid-column:auto}.reading-next span{margin-top:.35rem}}

/* La navigation complète manque de place sur les tablettes étroites. */
@media (max-width: 980px) {
  .menu-button { display: inline-grid; place-items: center; }
  .nav {
    display: none;
    position: absolute;
    top: 66px;
    left: 1rem;
    right: 1rem;
    padding: .7rem;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
}

@media (max-width: 700px) {
  .agent-steps { grid-template-columns: 1fr; }
  .menu-button { display: inline-grid; place-items: center; }
  .nav {
    display: none;
    position: absolute;
    top: 66px;
    left: 1rem;
    right: 1rem;
    padding: .7rem;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: white;
    box-shadow: var(--shadow);
  }
  .nav.open { display: flex; }
  .hero { padding-top: 3.2rem; }
  .recommendation { grid-template-columns: auto 1fr; }
  .recommendation .button { grid-column: 1 / -1; }
  .comparison, .related { grid-template-columns: 1fr; }
  .library-grid, .method-grid, .update-cycle { grid-template-columns: 1fr; }
  .quant-parts, .quant-method-cards, .quant-benefits > div:last-child, .quant-limits > div:last-child, .quant-compare, .quant-checks ol { grid-template-columns: 1fr; }
  .quant-scale { grid-template-columns: repeat(5,auto); justify-content: space-between; }
  .quant-scale i { display: none; }
  .prune-types, .prune-benefits > div:last-child, .prune-limits > div:last-child, .prune-compare, .prune-checks ol, .prune-steps { grid-template-columns: 1fr; }
  .prune-result dl { grid-template-columns: 1fr; }
  .moe-cycle ol, .moe-checks ol, .count-cards, .moe-gains > div:last-child, .moe-costs > div:last-child, .moe-compare { grid-template-columns: 1fr; }
  .expert-grid { grid-template-columns: repeat(2,1fr); }
  .chip-family, .local-cards, .chip-limits > div:last-child, .chip-checks ol { grid-template-columns: 1fr; }
  .chip-result .chip-choice { grid-template-columns: repeat(2,1fr); }
  .memory-types-grid, .memory-solutions, .memory-stack ol, .memory-checks ol { grid-template-columns: 1fr; }
  .vram-controls fieldset > div { grid-template-columns: repeat(2,1fr); }
  .train-pile article:nth-child(n) { margin-left: 0; }
  .kv-cards, .compare-plain, .phase-grid, .simple-checks { grid-template-columns: 1fr; }.cache-hero-board, .injection-flow, .api-board, .local-board, .agent-loop { grid-template-columns: 1fr; }.cache-hero-board b, .injection-flow b, .api-board b, .local-board b, .agent-loop b { justify-self: center; transform: rotate(90deg); }.guard-rings span:nth-child(n) { margin-inline: 0; }.model-balance { grid-template-columns: 1fr; }.model-balance b { justify-self: center; transform: rotate(90deg); }.agent-steps { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .home-entry-grid { grid-template-columns: 1fr; }
  .alphabet { position: static; }
  .glossary-grid { grid-template-columns: 1fr; }
  .term-card { min-height: 0; }
  .faq-item summary { grid-template-columns: 34px 1fr auto; gap: .65rem; padding-inline: .85rem; font-size: 1.08rem; }
  .faq-answer { padding: 1rem; }
  .faq-callout { grid-template-columns: auto 1fr; }
  .faq-callout .button { grid-column: 1 / -1; }
  .tool-home-callout { grid-template-columns: auto 1fr; }
  .tool-home-callout .button { grid-column: 1 / -1; }
  .use-grid { grid-template-columns: 1fr; }
  .use-toolbar { display: block; }
  .use-toolbar > p:last-child { margin-top: .25rem; }
  .help-grid { grid-template-columns: 1fr; }
  .risk-toolbar { display: block; }
  .risk-toolbar p:last-child { margin-top: .25rem; }
  .risk-card summary { grid-template-columns: 1fr auto; gap: .65rem; padding-inline: .9rem; }
  .risk-level { grid-column: 1; }
  .risk-card summary > span:nth-child(2) { grid-column: 1; }
  .risk-card summary::after { grid-column: 2; grid-row: 1 / 3; }
  .risk-body { grid-template-columns: 1fr; }
  .never-do { grid-column: 1; }
  .need-grid, .data-choices, .tool-family-grid { grid-template-columns: 1fr; }
  .form-pair, .prompt-principles { grid-template-columns: 1fr; }
  .cost-fields, .payment-grid, .budget-paths { grid-template-columns: 1fr; }
  .cost-fields label:first-child { grid-column: auto; }
  .quiz-home-callout { grid-template-columns: auto 1fr; }
  .quiz-home-callout .button { grid-column: 1 / -1; }
  .quiz-result-head { grid-template-columns: 1fr; }
  .quiz-result-head > span { width: 104px; height: 104px; }
  .quiz-breakdown { grid-template-columns: 1fr; }
  .quiz-breakdown a { min-height: 110px; }
  .quiz-recommendation { grid-template-columns: auto 1fr; }
  .quiz-recommendation .button { grid-column: 1 / -1; }
  .youth-home-callout { grid-template-columns: auto 1fr; }
  .youth-home-callout .button { grid-column: 1 / -1; }
  .situation-list, .learning-steps, .adult-grid { grid-template-columns: 1fr; }
  .age-note { grid-template-columns: 1fr; }
  .impact-cycle, .eco-habits { grid-template-columns: 1fr; }
  .org-eco { grid-template-columns: 1fr; }
  .sources-panel a { flex-direction: column; }
  .scam-rule, .scam-help { grid-template-columns: 1fr; }
  .scam-mechanism, .after-scam-grid { grid-template-columns: 1fr; }
  .token-definitions, .token-habits { grid-template-columns: 1fr; }
  .token-next { grid-template-columns: 1fr; }
  .token-next > span { width: 46px; height: 46px; }
  .token-next .button { grid-column: 1 / -1; }
  .context-desk > div { grid-template-columns: 1fr; }
  .dataset-sets, .learning-methods, .quality-checks { grid-template-columns: 1fr; }
  .learning-equation { align-items: stretch; }
  .learning-equation b { align-self: center; }
  .data-type-list, .data-journey { grid-template-columns: 1fr; }
  .data-type-list button { min-height: 96px; }
  .data-status-list article { grid-template-columns: 1fr; }
  .work-effects, .future-skills, .own-job-questions, .work-quality-list { grid-template-columns: 1fr; }
  .job-equation { align-items: stretch; }
  .job-equation b { align-self: center; }
  .decision-roles, .control-abilities, .rights-list, .decision-questions { grid-template-columns: 1fr; }
  .control-abilities article:last-child { grid-column: auto; }
  .decision-scale { align-items: stretch; }
  .decision-scale b { align-self: center; }
  .image-prompt-parts, .diffusion-steps, .image-operations, .image-risks, .seed-cards { grid-template-columns: 1fr; }
  .noise-preview { min-height: 300px; }
  .not-collage { grid-template-columns: 1fr; }
  .not-collage > b { justify-self: center; transform: rotate(90deg); }
  .voice-chain { grid-template-columns: 1fr; }
  .voice-chain > b { justify-self: center; transform: rotate(90deg); }
  .voice-print { grid-template-columns: 1fr; }
  .voice-print > b { justify-self: center; transform: rotate(90deg); }
  .sound-parts, .audio-limits, .audio-types, .publish-audio > div:nth-child(2) { grid-template-columns: 1fr; }
  .wave-stage { min-height: 300px; }
  .video-part-list, .video-process, .video-modes, .video-method ol, .video-limits, .publish-video > div:nth-child(2) { grid-template-columns: 1fr; }
  .frame-strip { min-height: 300px; }
  .drift-demo { grid-template-columns: repeat(2,1fr); }
  .modality-map { min-height: 330px; }
  .reason-families, .reason-failures, .reason-process ol, .reason-method ol { grid-template-columns: 1fr; }
  .reason-board { min-height: 300px; }
  .trio-map, .trio-definitions, .trio-risks, .trio-method ol { grid-template-columns: 1fr; }
  .trio-map > strong { grid-column: 1; }
  .system-chain { grid-template-columns: 1fr; }
  .system-chain b { justify-self: center; transform: rotate(90deg); }
  .system-chain span:last-of-type, .system-chain small { grid-column: 1; }
  .deploy-matrix { padding-left: 2.7rem; }
  .deploy-facts, .where-compare, .deploy-tradeoffs, .deploy-method ol { grid-template-columns: 1fr; }
  .privacy-chain { grid-template-columns: 1fr; }
  .privacy-chain > b { justify-self: center; transform: rotate(90deg); }
  .privacy-chain article:nth-of-type(3) { grid-column: 1; }
  .access-ladder article:nth-child(2), .access-ladder article:nth-child(3) { margin-left: 0; }
  .memory-types, .memory-facts, .storage-grid, .memory-method ol, .variation-causes, .variation-compare, .variation-method ol, .layer-cards, .training-loop, .neural-limits > div:last-child, .parameter-types, .count-balance, .parameter-cycle, .parameter-method ol, .embedding-flow, .embedding-limits > div:last-child, .embedding-method ol { grid-template-columns: 1fr; }
  .embedding-uses { grid-template-columns: repeat(2,1fr); }
  .memory-method li:last-child { grid-column: 1; }
  .retrieval-flow { grid-template-columns: 1fr; }
  .retrieval-flow b { justify-self: center; transform: rotate(90deg); }
  .retrieval-flow small { grid-column: 1; }
  .temperature-scale > div { grid-template-columns: 1fr; }
  .generation-chain li:nth-child(even) { margin-left: 0; }
  .neural-limits article:last-child { grid-column: 1; }
  .network-board { min-height: 310px; padding: .8rem; }
  .distributed-map { grid-template-columns: repeat(2,1fr); }
  .modality-cards, .io-grid, .multi-risks, .multi-method ol { grid-template-columns: 1fr; }
  .alignment-demo, .multi-errors { grid-template-columns: 1fr; }
  .alignment-demo > b, .multi-errors > b { justify-self: center; transform: rotate(90deg); }
  .sampling-strip { grid-template-columns: repeat(3,1fr); }
  .distance-compare, .embedding-uses { grid-template-columns: 1fr; }
  .vector-card > div { min-height: 190px; }
  .rag-hero-flow { grid-template-columns: 1fr; }
  .rag-hero-flow > b { justify-self: center; transform: rotate(90deg); }
  .rag-index-flow, .rag-benefits, .rag-failures, .rag-method ol { grid-template-columns: 1fr; }
  .rag-compare article { grid-template-columns: 1fr; }
  .rag-compare article > span { grid-row: auto; min-height: 42px; }
  .llm-loop, .llm-phases, .llm-abilities, .llm-limits > div:last-child, .llm-method ol { grid-template-columns: 1fr; }
  .llm-system-chain { grid-template-columns: 1fr; }
  .llm-system-chain > b { justify-self: center; transform: rotate(90deg); }
  .attention-example i { display: none; }
  .transformer-input-flow { grid-template-columns: 1fr; }
  .transformer-input-flow > b { justify-self: center; transform: rotate(90deg); }
  .qkv-cards, .head-grid, .transformer-families, .impact-compare, .transformer-limits > div:last-child, .transformer-method ol { grid-template-columns: 1fr; }
  .transformer-map i { display: none; }
  .tuning-flow, .tuning-loop { grid-template-columns: 1fr; }
  .tuning-flow > b, .tuning-loop > b { justify-self: center; transform: rotate(90deg); }
  .tuning-cases, .tuning-compare, .peft-cards, .data-split, .tuning-uses > div:last-child, .tuning-risks > div:last-child, .tuning-method ol { grid-template-columns: 1fr; }
  .inference-machine, .inference-pipeline { grid-template-columns: 1fr; }
  .inference-machine > b, .inference-pipeline > b { justify-self: center; transform: rotate(90deg); }
  .phase-compare, .mode-cards, .performance-grid, .inference-optim > div:last-child, .inference-limits > div:last-child, .inference-method ol { grid-template-columns: 1fr; }
  .teacher-flow { grid-template-columns: 1fr; }
  .teacher-flow > b { justify-self: center; transform: rotate(90deg); }
  .teacher-flow .student { margin-top: 0; }
  .distill-steps, .temperature-compare, .distill-benefits > div:last-child, .distill-limits > div:last-child, .distill-method ol, .distill-compare { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .page-title { overflow-wrap: anywhere; }
  .label-demo, .zero-chain, .chip-board { grid-template-columns: 1fr; }
  .label-demo > b, .zero-chain > b, .chip-board > b { justify-self: center; transform: rotate(90deg); }
  .label-demo small, .zero-chain > p { grid-column: 1; }
  .chip-board { transform: none; box-shadow: 6px 6px 0 var(--yellow); }
  .chip-board article { min-height: 0; }
  .memory-road article { grid-template-columns: 1fr; }
  .memory-road strong { justify-self: center; transform: rotate(90deg); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}