/* A quiet crystal landscape with five topics and a growing experiment collection. */
body.knowledge-page { color: #25265c; background: linear-gradient(180deg, transparent 330px, #f4f6fd 552px), #f4f6fd url('../img/portal/knowledge-domains-20260907.jpg') center top / max(100%, 1380px) auto no-repeat; }
.knowledge-page .site-header + .page-layer { padding-top: 0; }
.knowledge-shell { min-height: calc(100svh - 240px); padding-bottom: 64px; }
.knowledge-hero { padding-top: 114px; padding-bottom: 28px; }
.knowledge-hero .eyebrow { color: #6865a0; letter-spacing: .23em; }
.knowledge-hero h1 { margin-top: 8px; font: 700 clamp(36px, 4vw, 50px)/1.25 var(--font-display); color: #202263; letter-spacing: .05em; }
.knowledge-lede { max-width: 34em; margin-top: 12px; color: #545c89; font-size: 16px; line-height: 1.7; }
.knowledge-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.knowledge-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 94px; padding: 15px 12px; border: 1px solid #ffffffa8; border-radius: 13px; background: #ffffff85; color: #5e649b; transition: background 160ms, color 160ms, box-shadow 160ms; text-align: center; }
.knowledge-tab > .icon { flex-shrink: 0; }
.knowledge-tab > span { font-size: 16px; font-weight: 600; line-height: 1.4; }
.knowledge-tab:hover { background: #ffffffd9; color: #4d44b3; }
.knowledge-tab[aria-current] { background: #fffffff0; color: #5145c5; box-shadow: inset 0 -2px #8070ef, 0 8px 26px #5850ab0c; }
.knowledge-tab:focus-visible, .concept-card:focus-visible { outline: 3px solid #7866d6; outline-offset: 4px; }
.knowledge-panel { padding: 26px; border: 1px solid #fff; border-radius: 20px; background: #ffffffba; box-shadow: 0 12px 40px #5a55a508; }
.knowledge-panel-heading { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.knowledge-panel-heading h2 { display: flex; align-items: center; gap: 12px; font: 700 25px/1.4 var(--font-display); color: #292666; }
.knowledge-panel-heading h2::before { content: ''; width: 3px; height: 22px; flex-shrink: 0; border-radius: 2px; background: #7969dc; }
.knowledge-panel-heading > span { font-size: 13px; color: #6a6d91; white-space: nowrap; }
.knowledge-demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.concept-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: #fff; border: 1px solid #e4e7f7; border-radius: 13px; box-shadow: 0 3px 14px #323c7c04; transition: transform 180ms, box-shadow 180ms, border-color 180ms; }
.concept-card:hover { transform: translateY(-3px); border-color: #c9c2ef; box-shadow: 0 10px 25px #52508810; }
.concept-poster { position: relative; aspect-ratio: 16 / 10; margin: 8px 8px 0; overflow: hidden; border-radius: 8px; background: #e3e8f5; }
/* Focus each existing screenshot on its actual simulation, keeping interface text out of the thumbnail. */
.concept-poster img { display: block; position: absolute; top: 50%; left: 50%; width: var(--poster-zoom, 100%); max-width: none; height: auto; transform: translate(var(--poster-x, -50%), var(--poster-y, -50%)); }
[data-concept-demo="xrd"] { --poster-zoom: 260%; --poster-x: -45%; --poster-y: -54%; }
[data-concept-demo="tem-imaging"] { --poster-zoom: 200%; --poster-x: -36.5%; --poster-y: -57%; }
[data-concept-demo="gold-cluster"] { --poster-zoom: 260%; --poster-x: -45.5%; --poster-y: -56.5%; }
[data-concept-demo="screw-dislocation"] { --poster-zoom: 145%; --poster-y: -65%; }
.concept-open { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #ffffffad; border-radius: 50%; background: #ffffffeb; color: #5c4eb3; }
.concept-copy { display: flex; flex: 1; flex-direction: column; padding: 17px 18px; }
.concept-copy h3 { font: 700 20px/1.5 var(--font-display); color: #2e3064; }
.concept-copy p { margin-top: 7px; font-size: 14px; line-height: 1.6; color: #6a7191; }
.concept-action { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 18px; margin-top: auto; color: #6255b4; font-size: 14px; }
.knowledge-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 250px; text-align: center; color: #6b669c; }
.knowledge-empty > .icon { margin-bottom: 18px; color: #8a7fc2; }
.knowledge-empty > p { font-size: 16px; color: #636688; }
.knowledge-empty > span { margin-top: 7px; font-size: 14px; color: #777b97; }
.knowledge-page .site-footer { background: #eef1faab; }
html[lang="en"] .knowledge-tab > span { font-size: 15px; }
html[lang="en"] .concept-copy h3 { font-size: 19px; }
@media (max-width: 1023px) {
  .knowledge-demo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .knowledge-tab { gap: 8px; padding-inline: 8px; }
}
@media (max-width: 767px) {
  body.knowledge-page { background-image: linear-gradient(180deg, transparent 250px, #f4f6fd 464px), url('../img/portal/knowledge-domains-20260907.jpg'); background-size: auto, 1160px auto; background-position: center top, 58% top; }
  .knowledge-shell { min-height: calc(100svh - 56px); padding-bottom: 28px; }
  .knowledge-hero { padding-top: 98px; padding-bottom: 22px; }
  .knowledge-hero .eyebrow { font-size: 12px; letter-spacing: .16em; }
  .knowledge-hero h1 { font-size: 34px; }
  .knowledge-lede { margin-top: 9px; font-size: 16px; max-width: 20em; }
  .knowledge-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .knowledge-tab { grid-column: auto; min-height: 78px; padding: 10px 5px; gap: 7px; border-radius: 10px; }
  .knowledge-tab:nth-child(n+4) { grid-column: auto; min-height: 56px; flex-direction: row; gap: 8px; }
  .knowledge-tab > .icon { width: 23px; height: 23px; }
  .knowledge-tab > span { font-size: 14px; }
  .knowledge-tab:nth-child(n+4) > .icon { width: 21px; height: 21px; }
  .knowledge-panel { padding: 17px 12px 12px; border-radius: 15px; }
  .knowledge-panel-heading { gap: 12px; margin: 0 4px 16px; }
  .knowledge-panel-heading h2 { gap: 9px; font-size: 22px; }
  .knowledge-demo-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .concept-card { flex-direction: row; padding: 8px; gap: 13px; align-items: center; }
  .concept-poster { flex: 0 0 100px; width: 100px; height: 108px; aspect-ratio: auto; margin: 0; border-radius: 7px; }
  .concept-open { right: 6px; bottom: 6px; width: 26px; height: 26px; }
  .concept-open > svg { width: 17px; height: 17px; }
  .concept-copy { align-self: stretch; min-width: 0; justify-content: center; padding: 4px 3px 4px 0; }
  .concept-copy h3 { font-size: 17px; line-height: 1.5; }
  .concept-copy p { display: none; }
  .concept-action { padding-top: 12px; margin-top: 0; font-size: 14px; }
  .knowledge-empty { min-height: 190px; padding: 20px 8px; }
  html[lang="en"] .knowledge-tab > span { font-size: 13px; }
  html[lang="en"] .knowledge-tab:nth-child(n+4) { flex-direction: column; min-height: 78px; }
  html[lang="en"] .knowledge-panel-heading h2 { font-size: 21px; }
  html[lang="en"] .concept-copy h3 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .knowledge-tab, .concept-card { transition: none; }
  .concept-card:hover { transform: none; }
}

@media(max-width:767px){.knowledge-tab:nth-child(n+4){min-height:78px;flex-direction:column;gap:7px}.knowledge-tab:nth-child(n+4)>.icon{width:23px;height:23px}}