.notes-section {
  background:
    radial-gradient(circle at 88% 9%, rgba(62, 107, 242, .1), transparent 25%),
    #fff;
}

.notes-heading {
  position: relative;
  max-width: none;
  padding-right: 170px;
}

.notes-all-link {
  position: absolute;
  right: 0;
  bottom: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #68768a;
  font-size: .84rem;
  font-weight: 800;
  text-decoration: none;
}

.notes-all-link span,
.note-card-link span,
.article-card-link span,
.article-origin-link span,
.article-back-link span {
  display: inline-block;
  transition: transform .2s ease;
}

.notes-preview-grid,
.article-list-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.note-card {
  min-width: 0;
  padding: 26px;
  border: 1px solid #dce4ef;
  border-radius: 17px;
  background: #fff;
}

.note-card-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .72fr);
  align-items: center;
  gap: 34px;
  padding: clamp(28px, 3vw, 38px);
  background: #f7f9fd;
  box-shadow: 0 22px 50px rgba(34, 59, 100, .07);
}

.note-card-meta,
.article-card-meta,
.article-eyebrow {
  display: block;
  color: var(--blue);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.note-card h3 {
  margin: 13px 0 16px;
  font-size: clamp(1.45rem, 2.5vw, 2.35rem);
  line-height: 1.3;
  letter-spacing: -.048em;
}

.note-card h3 a,
.article-card h3 a {
  color: inherit;
  text-decoration: none;
}

.note-card p,
.article-card p {
  margin: 0;
  color: #53627a;
  font-size: .95rem;
  line-height: 1.7;
}

.note-card-link,
.article-card-link,
.article-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 850;
  text-decoration: none;
}

.note-card-link,
.article-card-link {
  color: #6f7b8e;
  font-weight: 750;
}

.selector-visual {
  padding: 24px;
  border-radius: 16px;
  background: #132238;
  color: #f1f5ff;
}

.selector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
}

.selector-row span,
.selector-visual small {
  color: #aebbd0;
  font-size: .75rem;
}

.selector-row code {
  font-size: .78rem;
}

.selector-row-fragile code { color: #ffb9bd; }
.selector-row-stable code { color: #aef0ca; }

.selector-arrow {
  display: block;
  color: #91a8ff;
  text-align: center;
}

.selector-visual small {
  display: block;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
}

.article-page {
  min-height: 100vh;
  background: #f7f8fb;
}

.article-page .site-header {
  position: sticky;
}

.article-page-main {
  min-height: calc(100vh - 66px);
}

.article-list-hero {
  padding: 56px 0 34px;
  background:
    radial-gradient(circle at 88% 6%, rgba(62, 107, 242, .13), transparent 27%),
    linear-gradient(145deg, #fff 0%, #f0f4fb 100%);
}

.article-list-heading {
  max-width: none;
}

.article-origin-link {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 7px;
  margin-bottom: 18px;
  color: #718096;
  font-size: .78rem;
  font-weight: 750;
  text-decoration: none;
}

.article-list-heading h1 {
  margin: 10px 0 10px;
  font-size: var(--title-section);
  line-height: 1.2;
  letter-spacing: -.055em;
}

.article-list-heading p {
  max-width: 760px;
  margin: 0;
  color: #607087;
  font-size: 1rem;
  line-height: 1.72;
}

.article-list-section {
  padding: 40px 0 96px;
}

.article-card {
  display: flex;
  min-height: 280px;
  flex-direction: column;
  padding: 30px;
  border: 1px solid #dce4ef;
  border-radius: 17px;
  background: #fff;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.article-card:only-child {
  grid-column: 1 / -1;
  max-width: 760px;
}

.article-card h3 {
  margin: 14px 0 13px;
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.42;
  letter-spacing: -.042em;
}

.article-card .article-card-link {
  margin-top: auto;
  padding-top: 22px;
  align-self: flex-end;
}

.article-detail-main {
  background: #fff;
}

.article-detail-hero {
  padding: 78px 0 62px;
  border-bottom: 1px solid #e0e7f0;
  background:
    radial-gradient(circle at 85% 9%, rgba(62, 107, 242, .13), transparent 27%),
    linear-gradient(145deg, #fff 0%, #f0f4fb 100%);
}

.article-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 30px;
  color: #718096;
  font-size: .75rem;
  font-weight: 800;
}

.article-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.article-detail-heading {
  max-width: 900px;
}

.article-detail-heading h1 {
  max-width: 820px;
  margin: 15px 0 22px;
  font-size: clamp(2.3rem, 5vw, 4.25rem);
  line-height: 1.12;
  letter-spacing: -.065em;
}

.article-detail-heading h1.article-title-long {
  max-width: 900px;
}

.article-detail-lead {
  max-width: 760px;
  margin: 0;
  color: #53637a;
  font-size: clamp(1rem, .96rem + .25vw, 1.16rem);
  line-height: 1.85;
}

.article-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.article-detail-meta span {
  padding: 7px 11px;
  border: 1px solid #d8e1ee;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #53647d;
  font-size: .72rem;
  font-weight: 800;
}

.article-content-section {
  padding: 70px 0 96px;
}

.article-content {
  width: min(780px, 100%);
  margin: 0 auto;
}

.article-content > p {
  margin: 0 0 24px;
  color: #3e4e65;
  font-size: 1.03rem;
  line-height: 1.92;
}

.article-content h2 {
  margin: 64px 0 20px;
  font-size: clamp(1.55rem, 2.7vw, 2.15rem);
  line-height: 1.35;
  letter-spacing: -.045em;
}

.article-content h3 {
  margin: 38px 0 14px;
  font-size: 1.17rem;
  line-height: 1.5;
  letter-spacing: -.025em;
}

.article-content ul,
.article-content ol {
  display: grid;
  gap: 10px;
  margin: 20px 0 28px;
  padding-left: 22px;
  color: #43536a;
}

.article-content li {
  padding-left: 4px;
  line-height: 1.75;
}

.article-content pre {
  margin: 24px 0;
  padding: 23px;
  overflow-x: auto;
  border-radius: 15px;
  background: #132238;
  color: #eaf0fb;
  font-size: .84rem;
  line-height: 1.72;
}

.article-content code {
  font-family: "Cascadia Code", Consolas, monospace;
}

.article-table-wrap {
  margin: 24px 0 32px;
  overflow-x: auto;
  border: 1px solid #dce4ef;
  border-radius: 14px;
  background: #fff;
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  color: #43536a;
  font-size: .9rem;
  line-height: 1.65;
}

.article-table th,
.article-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #e3e9f1;
  text-align: left;
  vertical-align: top;
}

.article-table thead th {
  background: #f1f4f9;
  color: var(--ink);
  font-weight: 850;
}

.article-table tbody th {
  color: var(--ink);
  font-weight: 800;
}

.article-table tbody tr:last-child > * {
  border-bottom: 0;
}

.article-table td:last-child:not(:first-child) {
  font-weight: 750;
}

.article-concept-visual {
  margin: 32px 0 38px;
  padding: 26px;
  border-radius: 18px;
  background: #132238;
  color: #eef3fc;
}

.article-concept-visual figcaption span,
.article-concept-visual small,
.article-concept-note > span,
.deployment-skill-note > span {
  color: #91a8ff;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.article-concept-visual figcaption strong {
  display: block;
  margin-top: 7px;
  font-size: 1.08rem;
  line-height: 1.55;
}

.article-concept-note,
.deployment-skill-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.article-concept-note p,
.deployment-skill-note p {
  margin: 0;
  color: #b7c3d6;
  font-size: .78rem;
  line-height: 1.55;
  text-align: right;
}

.deployment-check-flow {
  display: grid;
  grid-template-columns: minmax(0, .9fr) auto minmax(0, 1.15fr) auto minmax(0, .85fr);
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.deployment-check-inputs,
.deployment-check-results {
  display: grid;
  gap: 8px;
}

.deployment-check-inputs > div,
.deployment-check-process,
.deployment-check-results > span {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 11px;
  background: rgba(255, 255, 255, .055);
}

.deployment-check-inputs > div {
  padding: 11px 12px;
}

.deployment-check-inputs strong,
.deployment-check-process strong {
  display: block;
  margin-top: 4px;
  font-size: .82rem;
}

.deployment-check-process {
  padding: 16px;
  text-align: center;
}

.deployment-check-process code {
  display: block;
  margin-top: 10px;
  color: #b9c8df;
  font-size: .7rem;
}

.deployment-flow-arrow {
  color: #7588a8;
  font-weight: 900;
}

.deployment-check-results > span {
  padding: 9px 11px;
  font-size: .76rem;
  font-weight: 800;
  text-align: center;
}

.deployment-check-results .deployment-result-ready {
  border-color: rgba(115, 221, 161, .34);
  color: #aef0ca;
}

.deployment-check-results .deployment-result-pending {
  border-color: rgba(255, 205, 116, .3);
  color: #ffd58d;
}

.deployment-check-results .deployment-result-mismatch {
  border-color: rgba(255, 148, 154, .3);
  color: #ffb9bd;
}

.selector-change-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  margin-top: 22px;
}

.selector-change-column {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
}

.selector-change-column > strong {
  font-size: .86rem;
}

.selector-change-column code {
  display: block;
  overflow-wrap: anywhere;
  color: #c4d0e2;
  font-size: .72rem;
}

.selector-change-column p {
  margin: 3px 0 0;
  color: #aebbd0;
  font-size: .76rem;
  line-height: 1.58;
}

.selector-change-current code {
  color: #ffb9bd;
}

.selector-change-proposal {
  border-color: rgba(115, 221, 161, .3);
}

.selector-change-proposal code {
  color: #aef0ca;
}

.selector-change-arrow,
.llm-review-arrow {
  color: #7588a8;
  font-weight: 900;
}

.llm-review-flow {
  display: grid;
  grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.15fr) auto minmax(0, .85fr);
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.llm-review-stage,
.llm-review-models {
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .055);
  text-align: center;
}

.llm-review-stage strong {
  display: block;
  margin-top: 7px;
  font-size: .82rem;
}

.llm-review-models {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.llm-review-models small {
  grid-column: 1 / -1;
}

.llm-review-models > span,
.llm-review-signals > span {
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 8px;
  background: rgba(255, 255, 255, .04);
  color: #c4d0e2;
  font-size: .7rem;
  text-align: center;
}

.llm-review-models > span {
  padding: 8px 5px;
}

.llm-review-signals {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.llm-review-signals > span {
  padding: 9px 7px;
}

.article-callout {
  margin: 34px 0;
  padding: 24px 26px;
  border-left: 4px solid var(--blue);
  border-radius: 0 14px 14px 0;
  background: #eef3ff;
}

.article-callout strong {
  display: block;
  margin-bottom: 8px;
  color: var(--blue-dark);
}

.article-callout p {
  margin: 0;
  color: #4b5d76;
  line-height: 1.78;
}

.article-callout p + p {
  margin-top: 14px;
}

.article-content p strong {
  color: var(--ink);
}

.article-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 26px 0 34px;
}

.article-evidence-placeholder {
  min-width: 0;
  margin: 0;
  padding: 22px;
  border: 1px dashed #c8d4e5;
  border-radius: 14px;
  background: #f7f9fd;
}

.article-evidence-placeholder strong {
  display: block;
  margin-bottom: 9px;
  color: var(--blue-dark);
  font-size: .76rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.article-evidence-placeholder figcaption {
  color: #596a82;
  font-size: .84rem;
  line-height: 1.7;
}

.article-video-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 4px 0 14px;
  padding: 11px 15px;
  border: 1px solid #cbd8ed;
  border-radius: 10px;
  background: #fff;
  color: var(--blue-dark);
  font-size: .84rem;
  font-weight: 850;
  text-decoration: none;
}

.article-footer-nav {
  display: flex;
  justify-content: flex-start;
  gap: 18px;
  margin-top: 64px;
  padding-top: 30px;
  border-top: 1px solid #e0e7f0;
}

.article-footer-nav .article-back-link {
  margin-top: 0;
  color: #68768a;
  font-weight: 750;
}

@media (hover: hover) {
  .notes-all-link:hover span,
  .note-card-link:hover span,
  .article-card-link:hover span { transform: translateX(4px); }
  .article-origin-link:hover span,
  .article-back-link:hover span { transform: translateX(-4px); }
  .article-card:hover { transform: translateY(-4px); border-color: #c9d7ec; box-shadow: 0 18px 38px rgba(34, 59, 100, .08); }
}

@media (max-width: 720px) {
  .notes-heading { padding-right: 0; }
  .notes-all-link { position: static; margin-top: 18px; }
  .notes-preview-grid,
  .article-list-grid,
  .note-card-featured { grid-template-columns: 1fr; }
  .note-card-featured { gap: 28px; padding: 24px; }
  .note-card h3 { font-size: clamp(1.35rem, 7vw, 1.8rem); }
  .note-card h3 br { display: none; }
  .selector-row { align-items: flex-start; flex-direction: column; gap: 5px; }
  .article-list-hero { padding: 34px 0 24px; }
  .article-origin-link { margin-bottom: 14px; }
  .article-list-section { padding: 28px 0 72px; }
  .article-card { min-height: 0; padding: 24px; }
  .article-detail-hero { padding: 52px 0 42px; }
  .article-detail-heading h1 { font-size: clamp(2.05rem, 11vw, 3.1rem); }
  .article-content-section { padding: 48px 0 72px; }
  .article-content > p { font-size: .96rem; line-height: 1.84; }
  .article-content h2 { margin-top: 50px; }
  .article-content pre { margin-inline: -4px; padding: 18px; font-size: .75rem; }
  .article-table-wrap { margin-inline: -4px; }
  .article-table { min-width: 540px; font-size: .82rem; }
  .article-table th,
  .article-table td { padding: 12px 13px; }
  .article-concept-visual { margin-inline: -4px; padding: 21px; }
  .deployment-check-flow { grid-template-columns: 1fr; gap: 9px; }
  .deployment-flow-arrow,
  .selector-change-arrow,
  .llm-review-arrow { transform: rotate(90deg); text-align: center; }
  .selector-change-flow,
  .llm-review-flow { grid-template-columns: 1fr; gap: 9px; }
  .llm-review-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .article-concept-note,
  .deployment-skill-note { align-items: flex-start; flex-direction: column; }
  .article-concept-note p,
  .deployment-skill-note p { text-align: left; }
  .article-evidence-grid { grid-template-columns: 1fr; }
  .article-footer-nav { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .notes-all-link span,
  .note-card-link span,
  .article-card,
  .article-card-link span,
  .article-origin-link span,
  .article-back-link span { transition: none; }
}