@charset "UTF-8";

/*
 * GBDS V2 — Complete monitor guide
 * A high-density editorial system: white paper, dark type, quiet color.
 */

body.gbds-v2-monitor-guide-page {
  overflow-x: hidden;
  overflow-x: clip;
  background: #fff;
}

/* =========================================================
   2026-09-01 clarity pass: aspect, refresh, VRR and lighting
   ========================================================= */

.mg-aspect-lab {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(1280px, 100%) !important;
  gap: 18px;
  border: 0 !important;
  background: transparent !important;
}

.mg-aspect-options {
  grid-row: 1;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  overflow: hidden;
  border: 1px solid var(--mg-line) !important;
  border-radius: 24px;
  background: #f5f5f2;
}

.mg-aspect-options button {
  min-height: 94px;
  border: 0 !important;
  border-right: 1px solid var(--mg-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.mg-aspect-options button:last-child { border-right: 0 !important; }
.mg-aspect-options button[aria-pressed="true"] { background: var(--mg-ink) !important; }
.mg-aspect-options button[aria-pressed="true"] b { color: var(--mg-accent) !important; }
.mg-aspect-options button[aria-pressed="true"] span { color: #d6dde1 !important; }

.mg-aspect-stage {
  grid-row: 2;
  display: block !important;
  min-height: 0 !important;
  padding: clamp(28px, 4vw, 56px) !important;
  overflow: hidden;
  border: 1px solid var(--mg-line) !important;
  border-radius: 30px;
  background: #f5f5f2 !important;
}

.mg-aspect-condition {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 clamp(28px, 4vw, 50px) !important;
  color: var(--mg-ink);
}

.mg-aspect-condition span {
  color: #1689bd !important;
  font-size: 10px !important;
  font-weight: 820 !important;
  letter-spacing: .08em !important;
}

.mg-aspect-condition strong {
  color: var(--mg-ink) !important;
  font-size: clamp(14px, 1.15vw, 18px) !important;
  letter-spacing: 0 !important;
}

.mg-aspect-compare {
  --mg-aspect-height: clamp(120px, 15vw, 210px);
  position: relative;
  display: grid;
  min-height: calc(var(--mg-aspect-height) + 112px);
  place-items: center;
  padding: 10px clamp(36px, 5vw, 72px) 102px;
}

.mg-aspect-reference {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 50%;
  width: calc(var(--mg-aspect-height) * 1.7778);
  height: var(--mg-aspect-height);
  transform: translateX(-50%);
  border: 2px dashed rgba(15, 139, 126, .68);
  border-radius: 5px;
  pointer-events: none;
}

.mg-aspect-reference span {
  position: absolute;
  top: -24px;
  right: -2px;
  padding: 3px 7px;
  border-radius: 99px;
  background: #e5f4f0;
  color: #087b6f;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

.mg-aspect-outline {
  position: relative !important;
  z-index: 2;
  width: auto !important;
  max-width: none !important;
  height: var(--mg-aspect-height) !important;
  margin: 0 auto !important;
  overflow: hidden !important;
  border: 4px solid var(--mg-ink) !important;
  border-radius: 7px !important;
  background: #fff !important;
  box-shadow: 0 20px 45px rgba(27, 35, 39, .10);
  transition: width .7s var(--mg-ease), aspect-ratio .7s var(--mg-ease), transform .7s var(--mg-ease) !important;
}

.mg-layout-toolbar {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  display: flex !important;
  height: 24px !important;
  align-items: center;
  gap: 4px !important;
  padding: 0 8px !important;
  border-bottom: 1px solid #dfe4e6;
  background: #f7f8f8 !important;
}

.mg-layout-toolbar i {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #c8ced1 !important;
}

.mg-layout-windows {
  position: absolute !important;
  inset: 34px 10px 34px !important;
  display: grid !important;
  grid-template-columns: repeat(var(--mg-aspect-columns, 2), minmax(0, 1fr)) !important;
  gap: 7px !important;
  opacity: 1 !important;
  transform: none !important;
}

.mg-layout-windows article {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
  padding: 8px;
  border: 1px solid #dbe1e3;
  border-radius: 5px;
  background: #eef6f8;
}

.mg-layout-windows article span {
  overflow: hidden;
  color: #273239;
  font-size: 8px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-layout-windows article i {
  display: block;
  width: 82%;
  height: 3px;
  border-radius: 99px;
  background: #b8c7cc;
}

.mg-layout-windows article i:nth-of-type(2) { width: 64%; }
.mg-layout-windows article i:nth-of-type(3) { width: 74%; }
.mg-aspect-stage[data-active-aspect="16-9"] .mg-layout-windows article:nth-child(n+3),
.mg-aspect-stage[data-active-aspect="16-10"] .mg-layout-windows article:nth-child(n+3),
.mg-aspect-stage[data-active-aspect="21-9"] .mg-layout-windows article:nth-child(n+4) { display: none; }

.mg-aspect-label {
  right: 7px !important;
  bottom: 6px !important;
  z-index: 3;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .9);
}

.mg-aspect-label span { color: var(--mg-accent) !important; font-size: 15px !important; }
.mg-aspect-label small { color: #69767d !important; font-size: 7px !important; }

.mg-aspect-height {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: max(8px, calc(50% - (var(--mg-aspect-height) * 1.7778 / 2) - 46px));
  display: flex;
  width: 34px;
  height: var(--mg-aspect-height);
  align-items: center;
  justify-content: center;
}

.mg-aspect-height i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 16px;
  width: 1px;
  background: #7d898f;
}

.mg-aspect-height i::before,
.mg-aspect-height i::after {
  position: absolute;
  left: -4px;
  width: 9px;
  height: 1px;
  background: #7d898f;
  content: "";
}

.mg-aspect-height i::before { top: 0; }
.mg-aspect-height i::after { bottom: 0; }
.mg-aspect-height span {
  position: relative;
  padding: 4px 2px;
  background: #f5f5f2;
  color: #68757b;
  font-size: 8px;
  font-weight: 760;
  writing-mode: vertical-rl;
}

.mg-aspect-width {
  position: absolute;
  right: 0;
  bottom: 12px;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 4px 18px;
  padding-top: 16px;
  border-top: 1px solid #d7dcde;
}

.mg-aspect-width span,
.mg-aspect-width small { color: #6f7a80; font-size: 10px; }
.mg-aspect-width strong { grid-row: 1 / 3; grid-column: 2; color: var(--mg-accent); font-size: clamp(30px, 4vw, 52px); line-height: .9; }
.mg-aspect-width small { font-weight: 700; }
.mg-aspect-reading { margin-top: 8px !important; }
.mg-aspect-side-notes { grid-row: 3; }

.mg-motion-stage {
  position: relative !important;
  display: block !important;
  min-height: 0 !important;
  padding: clamp(28px, 4vw, 54px) !important;
}

.mg-fall-axis {
  position: absolute;
  top: 164px;
  bottom: 112px;
  left: clamp(18px, 4vw, 54px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  color: #748088;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .12em;
}

.mg-fall-axis i { flex: 1; width: 1px; margin: 9px 0; background: #333c42; }

.mg-fall-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(760px, calc(100% - 80px));
  margin: 34px auto 0;
  gap: 16px;
}

.mg-fall-compare article {
  overflow: hidden;
  border: 1px solid #30383e;
  border-radius: 24px;
  background: #151b1f;
}

.mg-fall-compare header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 3px 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #30383e;
}

.mg-fall-compare header span { color: #87939a; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.mg-fall-compare header strong { grid-row: 1 / 3; grid-column: 2; color: #fff; font-size: 25px; line-height: 1; }
.mg-fall-compare header strong b { color: inherit; font: inherit; }
.mg-fall-compare header small { color: #b8c1c6; font-size: 10px; }
.mg-fall-selected { border-color: rgba(116, 214, 202, .58) !important; }
.mg-fall-selected header { background: rgba(116, 214, 202, .08); }
.mg-fall-selected header strong { color: #74d6ca; }

.mg-fall-track {
  position: relative;
  width: 100%;
  height: clamp(260px, 34vw, 390px);
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), #334047 calc(50% - .5px), #334047 calc(50% + .5px), transparent calc(50% + .5px)),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.025), transparent 68%);
}

.mg-fall-track i {
  position: absolute;
  z-index: 2;
  top: calc(var(--slot) * 100% / 23);
  left: 50%;
  width: clamp(8px, 1.1vw, 13px);
  height: clamp(8px, 1.1vw, 13px);
  transform: translate(-50%, -50%) scale(.62);
  border: 1px solid #3a454b;
  border-radius: 50%;
  background: #151b1f;
  opacity: .52;
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, opacity .35s ease, transform .55s var(--mg-ease);
}

.mg-fall-track i.is-active {
  transform: translate(-50%, -50%) scale(1);
  border-color: #e57a3b;
  background: #e57a3b;
  box-shadow: 0 0 0 5px rgba(229, 122, 59, .08), 0 0 18px rgba(229, 122, 59, .34);
  opacity: 1;
}

.mg-fall-live {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,.8);
  animation: mg-fall-live 2.4s steps(var(--mg-fall-steps, 3), end) infinite;
}

.mg-aspect-scope {
  margin: 0 !important;
  color: #718087 !important;
  font-size: 11px !important;
  line-height: 1.75 !important;
  text-align: center;
}

@keyframes mg-fall-live {
  0% { top: 0; opacity: 0; }
  8%, 92% { opacity: .9; }
  100% { top: 100%; opacity: 0; }
}

.mg-vrr-visual {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  border-top: 1px solid #343a40;
  border-bottom: 1px solid #343a40 !important;
}

.mg-vrr-case {
  min-width: 0;
  padding: clamp(24px, 3vw, 40px);
}

.mg-vrr-case:first-child { border-right: 1px solid #343a40; }
.mg-vrr-case header { display: grid; gap: 7px; min-height: 56px; }
.mg-vrr-case header span { color: #8c989f !important; font-size: 9px !important; font-weight: 820; letter-spacing: .11em; }
.mg-vrr-case header strong { color: #fff; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.45; }

.mg-vrr-screen {
  position: relative;
  aspect-ratio: 16 / 8;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid #3b454b;
  border-radius: 16px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    #12171a;
  background-size: 28px 28px;
}

.mg-vrr-half { position: absolute; right: 0; left: 0; height: 50%; overflow: hidden; }
.mg-vrr-half--old { top: 0; border-bottom: 1px solid #ec7b40; }
.mg-vrr-half--new { bottom: 0; }
.mg-vrr-half i,
.mg-vrr-whole i {
  position: absolute;
  width: clamp(44px, 6vw, 74px);
  height: clamp(44px, 6vw, 74px);
  border-radius: 18px;
  background: linear-gradient(135deg, #70d6c9, #3d879f);
  box-shadow: 0 16px 35px rgba(79, 190, 184, .24);
}
.mg-vrr-half--old i { right: 46%; bottom: 0; transform: translateY(50%); }
.mg-vrr-half--new i { right: 28%; top: 0; transform: translateY(-50%); }
.mg-vrr-half small,
.mg-vrr-whole small { position: absolute; left: 12px; color: #87939a; font-size: 8px; }
.mg-vrr-half--old small { top: 10px; }
.mg-vrr-half--new small { bottom: 10px; }
.mg-vrr-screen > b { position: absolute; z-index: 5; right: 12px; bottom: 10px; color: #d7dfe3; font-size: 9px; }
.mg-vrr-case--fixed .mg-vrr-screen > b { color: #f0a070; }
.mg-vrr-whole { position: absolute; inset: 0; }
.mg-vrr-whole i { top: 50%; right: 36%; transform: translateY(-50%); }
.mg-vrr-whole small { top: 12px; }

.mg-vrr-clock { display: grid; gap: 10px; margin-top: 18px; }
.mg-vrr-clock > div { position: relative; height: 24px; border-bottom: 1px solid #3a454b; }
.mg-vrr-clock span { position: absolute; top: 1px; left: 0; color: #7f8a91 !important; font-size: 8px !important; }
.mg-vrr-clock i { position: absolute; bottom: -1px; width: 2px; height: 14px; background: #8e79e6; }
.mg-vrr-clock > div:nth-child(2) i { background: #70d6c9; }
.mg-vrr-case--fixed .mg-vrr-clock > div:first-child i:nth-of-type(1) { left: 24%; }
.mg-vrr-case--fixed .mg-vrr-clock > div:first-child i:nth-of-type(2) { left: 43%; }
.mg-vrr-case--fixed .mg-vrr-clock > div:first-child i:nth-of-type(3) { left: 67%; }
.mg-vrr-case--fixed .mg-vrr-clock > div:first-child i:nth-of-type(4) { left: 88%; }
.mg-vrr-case--fixed .mg-vrr-clock > div:nth-child(2) i:nth-of-type(1) { left: 20%; }
.mg-vrr-case--fixed .mg-vrr-clock > div:nth-child(2) i:nth-of-type(2) { left: 36%; }
.mg-vrr-case--fixed .mg-vrr-clock > div:nth-child(2) i:nth-of-type(3) { left: 52%; }
.mg-vrr-case--fixed .mg-vrr-clock > div:nth-child(2) i:nth-of-type(4) { left: 68%; }
.mg-vrr-case--fixed .mg-vrr-clock > div:nth-child(2) i:nth-of-type(5) { left: 84%; }
.mg-vrr-case--synced .mg-vrr-clock i:nth-of-type(1) { left: 24%; }
.mg-vrr-case--synced .mg-vrr-clock i:nth-of-type(2) { left: 43%; }
.mg-vrr-case--synced .mg-vrr-clock i:nth-of-type(3) { left: 67%; }
.mg-vrr-case--synced .mg-vrr-clock i:nth-of-type(4) { left: 88%; }
.mg-vrr-case > p { margin: 16px 0 0; color: #98a2a8; font-size: 11px; line-height: 1.7; }

.mg-light-lab {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(1280px, 100%) !important;
  gap: 18px;
}

.mg-light-options {
  grid-row: 1;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  overflow: hidden;
  border: 1px solid var(--mg-line) !important;
  border-radius: 24px;
  background: #f5f5f2;
}

.mg-light-options button {
  min-height: 94px;
  border: 0 !important;
  border-right: 1px solid var(--mg-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.mg-light-options button:last-child { border-right: 0 !important; }
.mg-light-options button[aria-pressed="true"] { background: var(--mg-ink) !important; }
.mg-light-options button[aria-pressed="true"] b { color: #8c78d8 !important; }
.mg-light-options button[aria-pressed="true"] span { color: #d4dbe0 !important; }

.mg-light-stage {
  grid-row: 2;
  display: block !important;
  padding: clamp(22px, 3vw, 42px) !important;
  border: 1px solid var(--mg-line) !important;
  border-radius: 30px;
  background: #f5f5f2 !important;
}

.mg-panel-lighting-figure { margin: 0; overflow: hidden; border-radius: 20px; background: #fff; }
.mg-panel-lighting-figure img { display: block; width: 100%; height: auto; }
.mg-panel-lighting-figure figcaption { padding: 10px 14px; color: #6e7a81; font-size: 9px; line-height: 1.55; }
.mg-panel-lighting-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; overflow: hidden; border: 1px solid var(--mg-line); border-radius: 18px; background: #fff; }
.mg-panel-lighting-labels article { padding: 20px; border-right: 1px solid var(--mg-line); transition: background .35s ease, box-shadow .35s ease; }
.mg-panel-lighting-labels article:last-child { border-right: 0; }
.mg-panel-lighting-labels span { color: #7561c4; font-size: 9px; font-weight: 820; letter-spacing: .06em; }
.mg-panel-lighting-labels strong { display: block; margin-top: 10px; color: var(--mg-ink); font-size: clamp(15px, 1.35vw, 19px); line-height: 1.45; }
.mg-panel-lighting-labels p { margin: 10px 0 0; color: var(--mg-text); font-size: 11px; line-height: 1.75; }
.mg-light-stage[data-light-stage="lcd"] [data-light-card="lcd"],
.mg-light-stage[data-light-stage="mini"] [data-light-card="mini"],
.mg-light-stage[data-light-stage="oled"] [data-light-card="oled"] { box-shadow: inset 0 4px 0 #7561c4; background: #faf9ff; }

.mg-black-scene-compare { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(34px, 5vw, 60px); overflow: hidden; border: 1px solid var(--mg-line); border-radius: 20px; background: #fff; }
.mg-black-scene { min-width: 0; margin: 0; padding: 16px; border-right: 1px solid var(--mg-line); }
.mg-black-scene:last-child { border-right: 0; }
.mg-black-scene > span { color: #6c777d; font-size: 9px; font-weight: 820; letter-spacing: .08em; }
.mg-black-scene > div { position: relative; margin-top: 11px; overflow: hidden; border-radius: 10px; background: #020304; }
.mg-black-scene img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; transition: filter .45s ease; }
.mg-black-scene > div::after,
.mg-black-scene > div > b { position: absolute; inset: 0; pointer-events: none; content: ""; }
.mg-black-scene--lcd img { filter: brightness(1.24) contrast(.66) saturate(.74); }
.mg-black-scene--lcd > div::after { background: rgba(150, 166, 177, .22); mix-blend-mode: screen; }
.mg-black-scene--lcd > div > b { background: radial-gradient(circle at 52% 46%, rgba(255,242,215,.28), transparent 34%), radial-gradient(circle at 18% 60%, rgba(210,229,238,.2), transparent 30%); filter: blur(12px); }
.mg-black-scene--mini img { filter: brightness(1.05) contrast(.93) saturate(.9); }
.mg-black-scene--mini > div::after { background: rgba(116, 139, 151, .06); mix-blend-mode: screen; }
.mg-black-scene--mini > div > b { background: radial-gradient(circle at 52% 46%, rgba(255,242,215,.16), transparent 16%), radial-gradient(circle at 18% 60%, rgba(210,229,238,.1), transparent 14%); filter: blur(6px); }
.mg-black-scene--oled img { filter: brightness(.91) contrast(1.25) saturate(1.05); }
.mg-black-scene figcaption { display: grid; min-height: 98px; align-content: start; gap: 7px; padding-top: 14px; }
.mg-black-scene figcaption strong { color: var(--mg-ink); font-size: 13px; line-height: 1.55; }
.mg-black-scene figcaption small { color: #748087; font-size: 9px; line-height: 1.6; }
.mg-light-disclaimer { margin: 18px 0 0 !important; color: #707d84 !important; font-size: 10px !important; line-height: 1.75 !important; }
.mg-light-stage > p[data-light-caption] { margin: 12px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--mg-line); color: var(--mg-text) !important; font-size: 12px !important; line-height: 1.75 !important; }

@media (max-width: 820px) {
  .mg-aspect-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; border-radius: 18px; }
  .mg-aspect-options button { min-height: 74px; border-bottom: 1px solid var(--mg-line) !important; }
  .mg-aspect-options button:nth-child(2n) { border-right: 0 !important; }
  .mg-aspect-options button:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .mg-aspect-stage { padding: 24px 14px !important; border-radius: 20px; }
  .mg-aspect-condition { align-items: flex-start; flex-direction: column; margin-bottom: 28px !important; gap: 6px; }
  .mg-aspect-compare { --mg-aspect-height: clamp(72px, 25vw, 106px); min-height: calc(var(--mg-aspect-height) + 112px); padding: 8px 12px 102px; }
  .mg-aspect-reference span { top: -19px; font-size: 7px; }
  .mg-aspect-height { display: none; }
  .mg-layout-windows { inset: 28px 5px 27px !important; gap: 3px !important; }
  .mg-layout-windows article { gap: 3px; padding: 4px; }
  .mg-layout-windows article span { font-size: 6px; }
  .mg-layout-windows article i { height: 2px; }
  .mg-aspect-width { grid-template-columns: 1fr auto; }
  .mg-aspect-width strong { font-size: 30px; }
  .mg-aspect-width span, .mg-aspect-width small { font-size: 8px; }
  .mg-aspect-reading { grid-template-columns: 1fr !important; gap: 8px; }

  .mg-motion-stage { padding: 24px 12px !important; }
  .mg-motion-stage-head { gap: 12px; }
  .mg-fall-axis { display: none; }
  .mg-fall-compare { width: 100%; gap: 8px; }
  .mg-fall-compare header { padding: 13px 10px; gap: 3px 6px; }
  .mg-fall-compare header strong { font-size: 18px; }
  .mg-fall-track { height: 250px; }
  .mg-motion-stage > p { margin-top: 18px; }

  .mg-vrr-visual { grid-template-columns: minmax(0, 1fr) !important; }
  .mg-vrr-case:first-child { border-right: 0; border-bottom: 1px solid #343a40; }
  .mg-vrr-case { padding: 22px 14px; }
  .mg-vrr-screen { border-radius: 12px; }

  .mg-light-options { grid-template-columns: minmax(0, 1fr) !important; border-radius: 18px; }
  .mg-light-options button { min-height: 70px; border-right: 0 !important; border-bottom: 1px solid var(--mg-line) !important; }
  .mg-light-options button:last-child { border-bottom: 0 !important; }
  .mg-light-stage { padding: 12px !important; border-radius: 20px; }
  .mg-panel-lighting-figure { border-radius: 12px; }
  .mg-panel-lighting-labels,
  .mg-black-scene-compare { grid-template-columns: minmax(0, 1fr); border-radius: 14px; }
  .mg-panel-lighting-labels article,
  .mg-black-scene { border-right: 0; border-bottom: 1px solid var(--mg-line); }
  .mg-panel-lighting-labels article:last-child,
  .mg-black-scene:last-child { border-bottom: 0; }
  .mg-black-scene figcaption { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-fall-live { display: none; }
}

body.gbds-v2-monitor-guide-page :where(.container, .content, .content-in) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  background: #fff;
}

body.gbds-v2-monitor-guide-page .content-in { display: block; }

body.gbds-v2-monitor-guide-page :where(.main, #main, .article, .entry-content) {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0 !important;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

body.gbds-v2-monitor-guide-page :where(
  #header-container,
  .article-header,
  .date-tags,
  .eye-catch-wrap,
  #toc,
  .toc,
  #sidebar,
  .ad-area,
  .sns-share,
  .sns-follow,
  .article-footer,
  .under-entry-content,
  .pager-post-navi,
  .related-entry-heading,
  .related-list,
  .breadcrumb,
  .author-info,
  .mobile-footer-menu-buttons,
  .go-to-top
) { display: none !important; }

body.gbds-v2-monitor-guide-page #footer { margin: 0; }

.gbds-v2-monitor-guide-shell {
  --mg-paper: #fff;
  --mg-ink: #101317;
  --mg-text: #343a40;
  --mg-muted: #69727a;
  --mg-faint: #929aa1;
  --mg-line: #d9dddf;
  --mg-line-strong: #aeb6bb;
  --mg-soft: #f5f6f4;
  --mg-cool: #f1f6f8;
  --mg-warm: #faf5ef;
  --mg-blue: #0879a8;
  --mg-green: #087d6e;
  --mg-orange: #c35b2d;
  --mg-violet: #6550a5;
  --mg-accent: var(--mg-blue);
  --mg-layout: 1280px;
  --mg-wide: 1510px;
  --mg-copy: 760px;
  --mg-gutter: clamp(22px, 4.6vw, 76px);
  --mg-section: clamp(104px, 11vw, 176px);
  --mg-radius: 18px;
  --mg-shadow: 0 28px 80px rgba(17, 25, 31, .09);
  --mg-ease: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: clip;
  background: var(--mg-paper) !important;
  color: var(--mg-text);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .006em;
  line-height: 1.9;
  text-align: left;
  word-break: normal;
  line-break: strict;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.gbds-v2-monitor-guide-shell *,
.gbds-v2-monitor-guide-shell *::before,
.gbds-v2-monitor-guide-shell *::after { box-sizing: border-box; }

.gbds-v2-monitor-guide-shell :where(h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote) {
  margin-top: 0;
}

.gbds-v2-monitor-guide-shell :where(h1, h2, h3, h4) {
  max-width: 100%;
  min-width: 0;
  margin-right: 0;
  margin-left: 0;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--mg-ink) !important;
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: 1.08;
  text-wrap: balance;
  word-break: normal;
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: normal;
}

.gbds-v2-monitor-guide-shell :where(p, li, dd, figcaption) {
  max-width: 100%;
  text-wrap: pretty;
  word-break: auto-phrase;
  overflow-wrap: break-word;
}

.gbds-v2-monitor-guide-shell :where(img, svg, video, canvas, iframe) {
  display: block;
  max-width: 100%;
}

.gbds-v2-monitor-guide-shell :where(button, input, select) { max-width: 100%; }
.gbds-v2-monitor-guide-shell a { color: inherit; text-underline-offset: .2em; }
.gbds-v2-monitor-guide-shell button,
.gbds-v2-monitor-guide-shell input,
.gbds-v2-monitor-guide-shell select { color: inherit; font: inherit; }
.gbds-v2-monitor-guide-shell button { touch-action: manipulation; }
.gbds-v2-monitor-guide-shell :focus-visible { outline: 3px solid var(--mg-accent); outline-offset: 4px; }
.gbds-v2-monitor-guide-shell [id] { scroll-margin-top: 86px; }
.gbds-v2-monitor-guide-shell [hidden],
.gbds-v2-monitor-guide-shell .is-hidden { display: none !important; }

.gbds-v2-monitor-guide-shell .mg-line {
  display: block;
  width: fit-content;
  max-width: 100%;
  text-wrap: balance;
}

.gbds-v2-monitor-guide-shell .mg-phrase { white-space: nowrap; }
.gbds-v2-monitor-guide-shell .mg-accent { color: var(--mg-accent) !important; }

.mg-kicker {
  margin: 0 0 22px;
  color: var(--mg-muted);
  font-size: 11px;
  font-weight: 790;
  letter-spacing: .2em;
  line-height: 1.45;
  text-transform: uppercase;
}

.mg-button {
  display: inline-grid;
  min-height: 54px;
  place-items: center;
  padding: 0 27px;
  border: 1px solid var(--mg-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--mg-ink) !important;
  font-size: 13px;
  font-weight: 760;
  line-height: 1.2;
  text-align: center;
  text-decoration: none !important;
  transition: transform .35s var(--mg-ease), background-color .35s ease, color .35s ease;
}

.mg-button:hover { transform: translateY(-3px); }
.mg-button--dark { background: var(--mg-ink); color: #fff !important; }
.mg-button--line { background: transparent; color: var(--mg-ink) !important; }
.mg-text-link { color: var(--mg-ink) !important; font-size: 13px; font-weight: 740; text-decoration: none !important; }
.mg-text-link span { display: inline-block; margin-left: 8px; transition: transform .3s var(--mg-ease); }
.mg-text-link:hover span { transform: translateY(4px); }

/* Sticky chapter navigation */
.mg-nav {
  position: sticky;
  z-index: 100;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100vw;
  min-height: 62px;
  padding-right: max(var(--mg-gutter), calc((100vw - var(--mg-wide)) / 2));
  padding-left: max(var(--mg-gutter), calc((100vw - var(--mg-wide)) / 2));
  gap: 26px;
  border-bottom: 1px solid rgba(16, 19, 23, .13);
  background: rgba(255, 255, 255, .91);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.admin-bar .mg-nav { top: 32px; }
.mg-nav a { text-decoration: none; }

.mg-brand {
  display: flex;
  align-items: baseline;
  min-width: max-content;
  gap: 10px;
  color: var(--mg-ink) !important;
  font-size: 15px;
  letter-spacing: -.02em;
}

.mg-brand span { color: var(--mg-muted); font-size: 11px; font-weight: 650; letter-spacing: .05em; }
.mg-nav-links { display: flex; align-items: stretch; height: 62px; margin-left: auto; gap: clamp(18px, 2.2vw, 32px); }
.mg-nav-links a { position: relative; display: grid; place-items: center; color: #474e54; font-size: 12px; font-weight: 720; }
.mg-nav-links a::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; content: ""; background: var(--mg-accent); transform: scaleX(0); transition: transform .35s var(--mg-ease); }
.mg-nav-links a:hover::after,
.mg-nav-links a[aria-current]::after { transform: scaleX(1); }
.mg-nav-cta { display: grid; min-width: 108px; min-height: 44px; place-items: center; border-radius: 999px; background: var(--mg-ink); color: #fff !important; font-size: 12px; font-weight: 760; }

/* Hero */
.mg-hero {
  position: relative;
  display: grid;
  min-height: min(900px, calc(100svh - 62px));
  grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr);
  align-items: center;
  width: 100%;
  padding: clamp(92px, 10vw, 154px) max(var(--mg-gutter), calc((100vw - var(--mg-wide)) / 2)) clamp(82px, 9vw, 138px);
  gap: clamp(52px, 7vw, 116px);
  background: #fff;
}

.mg-hero-copy { position: relative; z-index: 3; min-width: 0; width: min(100%, 760px); justify-self: end; }
.mg-hero h1 { margin: 0; font-size: clamp(50px, 5.15vw, 84px); }
.mg-hero h1 .mg-line:last-child { margin-top: .08em; }
.mg-lead { width: min(100%, 660px); margin: clamp(34px, 4vw, 56px) 0 0; color: #50585f; font-size: clamp(16px, 1.35vw, 20px); line-height: 1.95; }
.mg-hero-actions { display: flex; align-items: center; margin-top: 38px; gap: 28px; }

.mg-hero-object {
  position: relative;
  min-width: 0;
  min-height: clamp(430px, 48vw, 670px);
  perspective: 1400px;
  transform-style: preserve-3d;
}

.mg-hero-object::before {
  position: absolute;
  inset: 14% 5% 10% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(8, 121, 168, .085), rgba(8, 121, 168, 0) 66%);
  content: "";
  filter: blur(2px);
}

.mg-layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(79%, 570px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(16, 19, 23, .38);
  border-radius: clamp(11px, 1.4vw, 20px);
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 34px 72px rgba(16, 25, 31, .09);
  transform-style: preserve-3d;
}

.mg-layer > span {
  position: absolute;
  top: 18px;
  left: 20px;
  color: var(--mg-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
}

.mg-layer--size { z-index: 4; transform: translate3d(-61%, -38%, 58px) rotateY(-7deg) rotateX(2deg); }
.mg-layer--size b { position: absolute; right: 8%; bottom: 7%; color: var(--mg-blue); font-size: clamp(105px, 12vw, 190px); font-weight: 770; letter-spacing: -.11em; line-height: .75; }
.mg-layer--size b::after { margin-left: 8px; content: "″"; font-size: .18em; letter-spacing: 0; }
.mg-layer--pixel { z-index: 3; opacity: .66; transform: translate3d(-52%, -47%, 8px) rotateY(-7deg) rotateX(2deg) scale(.95); }
.mg-layer--pixel::after { position: absolute; inset: 17% 8% 9%; content: ""; background-image: linear-gradient(rgba(8, 121, 168, .18) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 121, 168, .18) 1px, transparent 1px); background-size: 17px 17px; mask-image: linear-gradient(to bottom right, #000, transparent 75%); }
.mg-layer--light { z-index: 2; opacity: .4; transform: translate3d(-43%, -56%, -46px) rotateY(-7deg) rotateX(2deg) scale(.9); }
.mg-layer--light i { position: absolute; inset: 22% 13%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 157, 64, .7), rgba(8, 121, 168, .22) 38%, transparent 69%); filter: blur(13px); }
.mg-layer--link { z-index: 1; opacity: .25; transform: translate3d(-34%, -65%, -96px) rotateY(-7deg) rotateX(2deg) scale(.84); }
.mg-layer--link i { position: absolute; right: 11%; bottom: 12%; width: 9px; height: 28px; border: 1px solid var(--mg-ink); border-radius: 2px; }
.mg-layer--link i:nth-of-type(2) { right: 16%; width: 24px; }
.mg-layer--link i:nth-of-type(3) { right: 23%; width: 16px; }
.mg-hero-axis { position: absolute; right: 7%; bottom: 4%; left: 4%; display: flex; justify-content: center; gap: 12px; }
.mg-hero-axis i { width: 6px; height: 6px; border-radius: 50%; background: var(--mg-line); }
.mg-hero-axis i:nth-child(2) { width: 44px; border-radius: 99px; background: var(--mg-accent); }
.mg-affiliate { position: absolute; right: var(--mg-gutter); bottom: 18px; left: var(--mg-gutter); margin: 0; color: var(--mg-muted); font-size: 10px; line-height: 1.55; text-align: center; }

/* Shared editorial sections */
.mg-section,
.mg-chapter,
.mg-foundations,
.mg-route-map,
.mg-diagnosis,
.mg-routes,
.mg-models,
.mg-glossary,
.mg-checklist,
.mg-references,
.mg-final {
  position: relative;
  width: 100%;
  padding: var(--mg-section) var(--mg-gutter);
}

.mg-chapter:nth-of-type(odd) { background: #fff; }
.mg-chapter:nth-of-type(even) { background: #fafaf8; }
.mg-size-section,
.mg-aspect { --mg-accent: var(--mg-green); }
.mg-resolution { --mg-accent: var(--mg-blue); }
.mg-motion { --mg-accent: var(--mg-orange); }
.mg-panel { --mg-accent: var(--mg-violet); }
.mg-hdr { --mg-accent: var(--mg-blue); }
.mg-connection { --mg-accent: var(--mg-green); }

.mg-section-head {
  width: min(var(--mg-layout), 100%);
  margin: 0 auto clamp(56px, 7vw, 94px);
}

.mg-section-head h2,
.mg-route-intro h2,
.mg-final h2,
.mg-checklist h2 { margin: 0; font-size: clamp(44px, 5.45vw, 84px); }
.mg-section-head > p:last-child { width: min(100%, 680px); margin: 30px 0 0; }
.mg-section-head--split { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, .72fr); align-items: end; gap: clamp(46px, 7vw, 102px); }
.mg-section-head--split > p:last-child,
.mg-section-head--split > .mg-prose { width: auto; margin: 0; }
.mg-prose p { margin-bottom: 1.1em; }
.mg-prose p:last-child { margin-bottom: 0; }

.mg-card-grid,
.mg-fact-grid,
.mg-feature-grid,
.mg-term-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(var(--mg-layout), 100%);
  margin: 0 auto;
  border-top: 1px solid var(--mg-line);
  border-left: 1px solid var(--mg-line);
}

.mg-card-grid > *,
.mg-fact-grid > *,
.mg-feature-grid > *,
.mg-term-grid > * {
  min-width: 0;
  padding: clamp(28px, 3.4vw, 48px);
  border-right: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
  background: #fff;
}

.mg-card-grid h3,
.mg-fact-grid h3,
.mg-feature-grid h3 { margin: 0 0 18px; font-size: clamp(25px, 2.35vw, 36px); }
.mg-card-grid p:last-child,
.mg-fact-grid p:last-child,
.mg-feature-grid p:last-child { margin-bottom: 0; }

.mg-note,
.mg-callout,
.mg-myth {
  display: grid;
  grid-template-columns: minmax(180px, .35fr) minmax(0, 1fr);
  align-items: start;
  width: min(var(--mg-layout), 100%);
  margin: clamp(42px, 6vw, 80px) auto 0;
  padding: clamp(28px, 4vw, 48px) 0;
  gap: clamp(28px, 6vw, 80px);
  border-top: 1px solid var(--mg-ink);
  border-bottom: 1px solid var(--mg-line);
}

.mg-note strong,
.mg-callout strong,
.mg-myth strong { color: var(--mg-accent); font-size: 13px; letter-spacing: .03em; }
.mg-note p,
.mg-callout p,
.mg-myth p { margin: 0; }

.mg-table-wrap,
.mg-compare-table-wrap {
  width: min(var(--mg-layout), 100%);
  max-width: 100%;
  margin: clamp(44px, 6vw, 76px) auto 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  border-top: 1px solid var(--mg-ink);
  -webkit-overflow-scrolling: touch;
}

.mg-table,
.mg-compare-table {
  width: 100%;
  min-width: 790px;
  margin: 0;
  border-collapse: collapse;
  background: #fff;
  font-size: 14px;
  line-height: 1.7;
}

.mg-table caption,
.mg-compare-table caption {
  padding: 17px 24px;
  background: #fff;
  color: var(--mg-muted);
  font-size: 10px;
  font-weight: 730;
  letter-spacing: .04em;
  line-height: 1.6;
  text-align: left;
}

.mg-table :where(th, td),
.mg-compare-table :where(th, td) { min-width: 130px; padding: 22px 24px; border-bottom: 1px solid var(--mg-line); text-align: left; vertical-align: top; }
.mg-table thead th,
.mg-compare-table thead th { color: var(--mg-muted); font-size: 10px; font-weight: 780; letter-spacing: .11em; text-transform: uppercase; }
.mg-table tbody th,
.mg-compare-table tbody th { color: var(--mg-ink); font-weight: 760; white-space: nowrap; }
.mg-compare-table-wrap--dark { border-top-color: #4a535a; }
.mg-compare-table-wrap--dark .mg-compare-table,
.mg-compare-table-wrap--dark .mg-compare-table caption { background: #14191e; }
.mg-compare-table-wrap--dark .mg-compare-table caption,
.mg-compare-table-wrap--dark .mg-compare-table thead th { color: #95a0a7; }
.mg-compare-table-wrap--dark .mg-compare-table :where(th, td) { border-bottom-color: #343a40; color: #b7c0c6; }
.mg-compare-table-wrap--dark .mg-compare-table tbody th { color: #fff; }

/* The order readers should decide specs */
.mg-route-map {
  display: grid;
  grid-template-columns: minmax(290px, .56fr) minmax(0, 1.44fr);
  width: 100%;
  padding-right: max(var(--mg-gutter), calc((100vw - var(--mg-wide)) / 2));
  padding-left: max(var(--mg-gutter), calc((100vw - var(--mg-wide)) / 2));
  gap: clamp(54px, 8vw, 124px);
  border-top: 1px solid var(--mg-line);
  background: var(--mg-soft);
}

.mg-route-intro h2 { font-size: clamp(39px, 4.4vw, 68px); }
.mg-route-intro > p:last-child { margin: 34px 0 0; }
.mg-route-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; margin: 0; padding: 0; border-top: 1px solid var(--mg-line-strong); list-style: none; }
.mg-route-steps li { display: grid; grid-template-columns: 48px 1fr; min-width: 0; min-height: 120px; align-items: start; padding: 26px 22px; gap: 16px; border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); }
.mg-route-steps li:nth-child(2n) { border-right: 0; }
.mg-route-steps > li:last-child { grid-column: 1 / -1; }
.mg-route-steps li > span { color: var(--mg-accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.mg-route-steps strong { display: block; color: var(--mg-ink); font-size: 18px; line-height: 1.35; }
.mg-route-steps small { display: block; margin-top: 8px; color: var(--mg-muted); font-size: 11px; line-height: 1.5; }

/* Quick finder */
.mg-diagnosis { --mg-accent: var(--mg-blue); background: var(--mg-cool); }
.mg-finder { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .76fr); width: min(var(--mg-layout), 100%); margin: 0 auto; gap: clamp(28px, 5vw, 72px); }
.mg-finder-steps { padding: clamp(25px, 4vw, 54px); border: 1px solid rgba(16, 19, 23, .14); background: #fff; }
.mg-finder fieldset { min-width: 0; margin: 0; padding: 0 0 34px; border: 0; }
.mg-finder fieldset + fieldset { padding-top: 34px; border-top: 1px solid var(--mg-line); }
.mg-finder fieldset:last-child { padding-bottom: 0; }
.mg-finder legend { width: 100%; margin: 0 0 18px; padding: 0; color: var(--mg-ink); font-size: 15px; font-weight: 740; }
.mg-finder legend span { display: inline-block; min-width: 34px; color: var(--mg-accent); font-size: 11px; letter-spacing: .12em; }
.mg-choice-row { display: flex; flex-wrap: wrap; gap: 9px; }
.mg-choice-row button,
.mg-options button,
.mg-filter-group button,
.mg-tab-list button {
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid var(--mg-line);
  border-radius: 999px;
  background: #fff;
  color: #586168;
  font-size: 12px;
  font-weight: 710;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease, color .25s ease, transform .25s var(--mg-ease);
}
.mg-choice-row button:hover,
.mg-options button:hover,
.mg-filter-group button:hover,
.mg-tab-list button:hover { border-color: #8d979e; transform: translateY(-2px); }
.mg-choice-row button[aria-pressed="true"],
.mg-options button[aria-pressed="true"],
.mg-filter-group button[aria-pressed="true"],
.mg-tab-list button[aria-selected="true"] { border-color: var(--mg-ink); background: var(--mg-ink); color: #fff; }

.mg-result { position: relative; overflow: hidden; padding: clamp(34px, 5vw, 62px); background: var(--mg-ink); color: #d9dee2; }
.mg-result::before { position: absolute; top: -150px; right: -145px; width: 340px; height: 340px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 50%; box-shadow: 0 0 0 58px rgba(255, 255, 255, .025), 0 0 0 116px rgba(255, 255, 255, .018); content: ""; }
.mg-result-label { position: relative; margin: 0; color: #929ca4; font-size: 10px; font-weight: 780; letter-spacing: .17em; }
.mg-result-announcement { position: relative; }
.mg-result-size { position: relative; display: block; margin: 38px 0 18px; color: #fff; font-size: clamp(80px, 8.6vw, 136px); letter-spacing: -.09em; line-height: .72; }
.mg-result-size span { margin-left: 8px; color: #75c5e2; font-size: .16em; letter-spacing: 0; }
.mg-result h3 { position: relative; margin: 30px 0 18px; color: #fff !important; font-size: clamp(27px, 2.5vw, 40px); }
.mg-result-announcement > p { position: relative; margin: 0; color: #aeb6bc; font-size: 14px; line-height: 1.8; }
.mg-result dl { position: relative; margin: 34px 0 0; border-top: 1px solid #343a40; }
.mg-result dl div { display: flex; justify-content: space-between; padding: 12px 0; gap: 20px; border-bottom: 1px solid #343a40; }
.mg-result dt { color: #929ca4; font-size: 11px; }
.mg-result dd { margin: 0; color: #fff; font-size: 12px; font-weight: 730; text-align: right; }
.mg-result-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; margin-top: 28px; gap: 12px 18px; }
.mg-result-actions a,
.mg-result-actions button { color: #fff; font-size: 12px; font-weight: 730; }
.mg-result-actions a { text-decoration-color: #68727a; }
.mg-result-actions button { padding: 0; border: 0; background: transparent; cursor: pointer; text-decoration: underline; text-decoration-color: #68727a; text-underline-offset: .25em; }
.mg-result-actions button span { color: #75c5e2; }
.mg-result-announcement.is-updating > * { animation: mg-result-in .48s var(--mg-ease); }

@keyframes mg-result-in { from { opacity: .25; transform: translateY(8px); } }

/* Foundations index */
.mg-foundations { background: #fff; }
.mg-chapter-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: 0 auto; border-top: 1px solid var(--mg-ink); border-left: 1px solid var(--mg-line); }
.mg-chapter-index a { position: relative; min-width: 0; min-height: 180px; padding: clamp(24px, 3vw, 38px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); color: inherit; text-decoration: none; transition: background-color .3s ease, color .3s ease; }
.mg-chapter-index a:hover { background: var(--mg-ink); color: #fff; }
.mg-chapter-index span { display: block; color: var(--mg-accent); font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.mg-chapter-index strong { display: block; margin-top: 32px; color: var(--mg-ink); font-size: clamp(22px, 2vw, 30px); line-height: 1.2; }
.mg-chapter-index a:hover strong { color: #fff; }
.mg-chapter-index small { display: block; margin-top: 8px; color: var(--mg-muted); font-size: 10px; line-height: 1.5; }
.mg-chapter-index a:hover small { color: #aeb6bc; }

/* Size chapter */
.mg-size-viewer { width: min(var(--mg-layout), 100%); margin: 0 auto; }
.mg-size-stage { position: relative; display: grid; height: clamp(530px, 47vw, 670px); place-items: end center; overflow: hidden; padding: 50px 28px 76px; background: var(--mg-soft); }
.mg-size-screen { --size-width: 68%; position: relative; width: var(--size-width); max-width: 1120px; aspect-ratio: 16 / 9; border: clamp(5px, .55vw, 9px) solid var(--mg-ink); border-bottom-width: clamp(9px, .9vw, 14px); border-radius: 10px; background: #fff; box-shadow: 0 35px 65px rgba(16, 19, 23, .11); transform: scale(var(--mg-size-scale, 1)); transform-origin: 50% 100%; transition: width .65s var(--mg-ease), aspect-ratio .65s var(--mg-ease), transform .65s var(--mg-ease); }
.mg-size-screen::after { position: absolute; bottom: -58px; left: 50%; width: 130px; height: 47px; border-bottom: 7px solid var(--mg-ink); content: ""; transform: translateX(-50%); }
.mg-size-screen > i { position: absolute; bottom: -50px; left: 50%; width: 5px; height: 45px; background: var(--mg-ink); transform: translateX(-50%); }
.mg-size-value { position: absolute; right: 5%; bottom: 4%; display: flex; align-items: flex-end; gap: 9px; color: var(--mg-accent); }
.mg-size-value > span { font-size: clamp(64px, 10vw, 142px); font-weight: 770; letter-spacing: -.09em; line-height: .8; }
.mg-size-value small { margin-bottom: .12em; font-size: 12px; font-weight: 780; line-height: 1; }
.mg-desk-line { position: absolute; right: 7%; bottom: 27px; left: 7%; display: flex; justify-content: center; border-top: 1px solid #b7bdc0; }
.mg-desk-line span { padding: 6px 12px; background: var(--mg-soft); color: var(--mg-muted); font-size: 11px; }
.mg-size-controls { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); border-left: 1px solid var(--mg-line); }
.mg-size-controls button { min-width: 0; min-height: 96px; padding: 16px 10px; border: 0; border-right: 1px solid var(--mg-line); background: #fff; color: var(--mg-muted); font-size: clamp(20px, 2.3vw, 36px); font-weight: 760; line-height: 1; cursor: pointer; transition: color .3s ease, background-color .3s ease; }
.mg-size-controls button:last-child { border-right: 0; }
.mg-size-controls button span { display: block; margin-top: 8px; font-size: 9px; font-weight: 660; letter-spacing: .05em; line-height: 1.25; }
.mg-size-controls button[aria-pressed="true"] { background: var(--mg-ink); color: #fff; }
.mg-size-note { width: min(100%, 790px); margin: 34px auto 0; text-align: center; }
.mg-size-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: clamp(58px, 7vw, 92px) auto 0; border-top: 1px solid var(--mg-line); border-left: 1px solid var(--mg-line); }
.mg-size-facts article { min-width: 0; padding: clamp(28px, 3vw, 40px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); }
.mg-size-facts span { color: var(--mg-accent); font-size: 10px; font-weight: 780; letter-spacing: .12em; }
.mg-size-facts strong { display: block; margin-top: 24px; color: var(--mg-ink); font-size: 20px; line-height: 1.3; }
.mg-size-facts p { margin: 16px 0 0; color: var(--mg-muted); font-size: 13px; line-height: 1.75; }

/* Aspect ratio chapter */
.mg-aspect-lab { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(310px, .55fr); width: min(var(--mg-layout), 100%); margin: 0 auto; border: 1px solid var(--mg-line); }
.mg-aspect-stage { position: relative; display: grid; min-height: 510px; place-items: center; overflow: hidden; padding: clamp(32px, 5vw, 72px); background: var(--mg-soft); }
.mg-aspect-outline { position: relative; display: grid; width: min(82%, 700px); aspect-ratio: var(--mg-aspect-ratio, 16 / 9); place-items: center; border: 3px solid var(--mg-ink); background: #fff; box-shadow: var(--mg-shadow); transition: width .65s var(--mg-ease), aspect-ratio .65s var(--mg-ease); }
.mg-aspect-outline span { color: var(--mg-accent); font-size: clamp(58px, 8vw, 116px); font-weight: 770; letter-spacing: -.08em; line-height: .8; }
.mg-aspect-outline small { position: absolute; right: 14px; bottom: 10px; color: var(--mg-muted); font-size: 9px; letter-spacing: .09em; }
.mg-aspect-guide { position: absolute; right: 7%; bottom: 24px; left: 7%; display: flex; align-items: center; gap: 12px; color: var(--mg-muted); font-size: 9px; letter-spacing: .08em; }
.mg-aspect-guide i { flex: 1; height: 1px; background: var(--mg-line-strong); }
.mg-aspect-options { display: grid; grid-template-rows: repeat(4, 1fr); }
.mg-aspect-options button { display: grid; grid-template-columns: 75px 1fr; align-items: center; min-width: 0; padding: 26px; gap: 16px; border: 0; border-bottom: 1px solid var(--mg-line); background: #fff; color: var(--mg-muted); text-align: left; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.mg-aspect-options button:last-child { border-bottom: 0; }
.mg-aspect-options button[aria-pressed="true"] { background: var(--mg-ink); color: #fff; }
.mg-aspect-options b { color: var(--mg-accent); font-size: 20px; letter-spacing: -.04em; }
.mg-aspect-options span { font-size: 12px; line-height: 1.55; }

/* Resolution and pixel-density lab */
.mg-ppi-lab {
  display: grid;
  grid-template-columns: minmax(250px, .52fr) minmax(250px, .48fr) minmax(320px, .72fr);
  width: min(var(--mg-layout), 100%);
  margin: 0 auto;
  border: 1px solid var(--mg-line);
  background: #fff;
}

.mg-ppi-controls { display: grid; align-content: center; padding: clamp(28px, 4vw, 52px); gap: 24px; border-right: 1px solid var(--mg-line); }
.mg-ppi-controls label { display: grid; gap: 9px; color: var(--mg-muted); font-size: 10px; font-weight: 760; letter-spacing: .1em; }
.mg-ppi-controls select,
.mg-connection-controls select { width: 100%; min-height: 48px; padding: 0 38px 0 14px; border: 1px solid var(--mg-line); border-radius: 0; background-color: #fff; color: var(--mg-ink); font-size: 14px; font-weight: 680; letter-spacing: 0; }
.mg-ppi-output { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 52px); border-right: 1px solid var(--mg-line); }
.mg-ppi-output > p:first-child { margin: 0 0 34px; color: var(--mg-muted); font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.mg-ppi-output strong { display: flex; align-items: flex-end; color: var(--mg-accent); font-size: clamp(62px, 6vw, 98px); letter-spacing: -.08em; line-height: .75; }
.mg-ppi-output small { margin: 0 0 .1em 8px; font-size: .16em; letter-spacing: .03em; }
.mg-ppi-output > p:last-child { margin: 34px 0 0; color: var(--mg-muted); font-size: 13px; line-height: 1.75; }
.mg-pixel-field { position: relative; min-height: 380px; overflow: hidden; background-color: var(--mg-cool); background-image: linear-gradient(rgba(8, 121, 168, .17) 1px, transparent 1px), linear-gradient(90deg, rgba(8, 121, 168, .17) 1px, transparent 1px); background-size: var(--mg-pixel-density, var(--mg-pixel-size, 12px)) var(--mg-pixel-density, var(--mg-pixel-size, 12px)); transition: background-size .55s var(--mg-ease); }
.mg-ppi-lab[data-density-band="low"] .mg-pixel-field { --mg-pixel-size: 18px; }
.mg-ppi-lab[data-density-band="medium"] .mg-pixel-field { --mg-pixel-size: 12px; }
.mg-ppi-lab[data-density-band="high"] .mg-pixel-field { --mg-pixel-size: 7px; }
.mg-pixel-field::after { position: absolute; inset: 0; background: radial-gradient(circle at 35% 35%, transparent 0 12%, rgba(241, 246, 248, .9) 68%); content: ""; }
.mg-resolution-scale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: clamp(58px, 7vw, 92px) auto 0; border-top: 1px solid var(--mg-line); border-left: 1px solid var(--mg-line); }
.mg-resolution-scale article { min-width: 0; min-height: 280px; padding: clamp(27px, 3.2vw, 44px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; }
.mg-resolution-scale article > span { color: var(--mg-accent); font-size: 11px; font-weight: 790; letter-spacing: .12em; }
.mg-resolution-scale strong { display: block; margin-top: 30px; color: var(--mg-ink); font-size: clamp(24px, 2.25vw, 34px); line-height: 1.2; }
.mg-resolution-scale p { margin: 21px 0 0; color: var(--mg-muted); font-size: 13px; line-height: 1.75; }

.mg-explainer-grid,
.mg-metric-grid,
.mg-panel-grid,
.mg-color-grid,
.mg-port-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(var(--mg-layout), 100%);
  margin: clamp(58px, 7vw, 92px) auto 0;
  border-top: 1px solid var(--mg-line);
  border-left: 1px solid var(--mg-line);
}

.mg-explainer-grid article,
.mg-metric-grid article,
.mg-panel-grid article,
.mg-color-grid article,
.mg-port-grid article { min-width: 0; padding: clamp(28px, 3.5vw, 48px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; }
.mg-eyebrow,
.mg-explainer-grid article > span,
.mg-metric-grid article > span,
.mg-panel-grid article > span,
.mg-color-grid article > span,
.mg-port-grid article > span { margin: 0 0 38px; color: var(--mg-accent); font-size: 9px; font-weight: 800; letter-spacing: .17em; line-height: 1.45; }
.mg-explainer-grid h3,
.mg-metric-grid h3,
.mg-panel-grid h3,
.mg-color-grid h3,
.mg-port-grid h3 { margin: 0 0 22px; font-size: clamp(27px, 2.75vw, 42px); }
.mg-explainer-grid article > p:last-child,
.mg-metric-grid article > p:last-child,
.mg-panel-grid article > p:last-child,
.mg-color-grid article > p:last-child,
.mg-port-grid article > p:last-child { margin-bottom: 0; color: var(--mg-muted); font-size: 14px; line-height: 1.78; }

.mg-myth { align-items: center; }
.mg-myth > span { color: var(--mg-accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.mg-myth > p { display: grid; gap: 8px; }
.mg-myth s { color: var(--mg-muted); font-size: 14px; }
.mg-myth p strong { color: var(--mg-ink); font-size: clamp(20px, 2.1vw, 30px); letter-spacing: -.035em; line-height: 1.45; }

/* Motion chapter — the single dark pause in a white guide */
.mg-chapter--dark { background: var(--mg-ink) !important; color: #bec6cc; }
.mg-chapter--dark :where(h1, h2, h3, h4) { color: #fff !important; }
.mg-chapter--dark .mg-kicker,
.mg-chapter--dark .mg-section-head > p,
.mg-chapter--dark .mg-prose { color: #aab3ba; }
.mg-motion-lab { width: min(var(--mg-layout), 100%); margin: 0 auto; border: 1px solid #343a40; background: #14191e; }
.mg-motion-stage { position: relative; display: grid; min-height: 380px; place-items: center; overflow: hidden; padding: clamp(34px, 5vw, 68px); }
.mg-motion-track { position: relative; width: min(90%, 900px); height: 4px; border-radius: 99px; background: #2e353b; }
.mg-motion-track::before { position: absolute; inset: -44px 0; border-right: 1px solid #30373d; border-left: 1px solid #30373d; content: ""; background-image: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #30373d calc(10% - 1px) 10%); opacity: .55; }
.mg-motion-track i { position: absolute; z-index: 2; top: 50%; left: var(--mg-motion-position, 72%); width: 22px; height: 22px; border-radius: 50%; background: var(--mg-accent); box-shadow: -20px 0 rgba(195, 91, 45, .38), -40px 0 rgba(195, 91, 45, .17); transform: translate(-50%, -50%); transition: left var(--mg-motion-duration, var(--mg-frame-duration, .65s)) var(--mg-ease), box-shadow .4s ease; }
.mg-motion-track span { position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #616a71; transform: translateY(-50%); }
.mg-motion-track span:nth-of-type(1) { left: 20%; }
.mg-motion-track span:nth-of-type(2) { left: 40%; }
.mg-motion-track span:nth-of-type(3) { left: 60%; }
.mg-motion-track span:nth-of-type(4) { left: 80%; }
.mg-motion-value { position: absolute; right: clamp(24px, 5vw, 70px); bottom: clamp(24px, 4vw, 52px); display: flex; align-items: flex-end; color: #fff; }
.mg-motion-value strong { color: var(--mg-accent); font-size: clamp(54px, 6vw, 92px); letter-spacing: -.08em; line-height: .76; }
.mg-motion-value span { margin: 0 0 .15em 9px; color: #8e989f; font-size: 10px; letter-spacing: .09em; }
.mg-motion-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid #343a40; }
.mg-motion-options button { display: grid; min-width: 0; min-height: 104px; place-content: center; gap: 7px; border: 0; border-right: 1px solid #343a40; background: transparent; color: #98a2a9; cursor: pointer; }
.mg-motion-options button:last-child { border-right: 0; }
.mg-motion-options button[aria-pressed="true"] { background: var(--mg-accent); color: #fff; }
.mg-motion-options b { font-size: clamp(25px, 2.7vw, 42px); line-height: 1; }
.mg-motion-options span { font-size: 9px; letter-spacing: .07em; }
.mg-motion-lab > p { margin: 0; padding: 22px clamp(24px, 4vw, 48px); border-top: 1px solid #343a40; color: #b4bdc4; font-size: 13px; text-align: center; }
.mg-motion .mg-metric-grid { border-color: #343a40; }
.mg-motion .mg-metric-grid article { border-color: #343a40; background: #101317; }
.mg-motion .mg-metric-grid h3 { color: #fff !important; }
.mg-motion .mg-metric-grid article > p:last-child { color: #aab3ba; }
.mg-vrr-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr); align-items: start; width: min(var(--mg-layout), 100%); margin: clamp(64px, 8vw, 112px) auto 0; padding: clamp(40px, 5vw, 68px); gap: clamp(48px, 8vw, 110px); border: 1px solid #343a40; background: #14191e; }
.mg-vrr-panel h3 { margin: 0; font-size: clamp(34px, 3.75vw, 56px); }
.mg-myth--dark { border-color: #343a40; }
.mg-myth--dark p strong { color: #fff; }
.mg-myth--dark s { color: #869098; }

/* Panel technology and backlight */
.mg-family-tree { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: 0 auto; gap: clamp(18px, 2vw, 28px); }
.mg-family-root { display: grid; min-height: 330px; place-items: center; background: var(--mg-ink); color: #fff; font-size: clamp(42px, 6vw, 90px); font-weight: 770; letter-spacing: -.07em; writing-mode: vertical-rl; }
.mg-family-tree > .mg-family-branch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; border: 0; gap: 1px; background: var(--mg-line); }
.mg-family-tree > .mg-family-branch article { min-width: 0; padding: clamp(30px, 4vw, 52px); background: #fff; }
.mg-family-tree > .mg-family-branch article > span { color: var(--mg-accent); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.mg-family-tree > .mg-family-branch article > strong { display: block; margin-top: 38px; color: var(--mg-ink); font-size: clamp(24px, 2.5vw, 36px); line-height: 1.25; }
.mg-family-tree > .mg-family-branch article > p { margin: 25px 0 0; color: var(--mg-ink); font-size: 17px; font-weight: 730; }
.mg-family-tree > .mg-family-branch article > small { display: block; margin-top: 12px; color: var(--mg-muted); font-size: 11px; line-height: 1.6; }
.mg-family-branch { min-width: 0; padding: clamp(30px, 4vw, 56px); border: 1px solid var(--mg-line); background: #fff; }
.mg-family-branch > span { color: var(--mg-accent); font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.mg-family-branch > h3 { margin: 28px 0 32px; font-size: clamp(30px, 3.1vw, 46px); }
.mg-family-branch ul { display: grid; margin: 0; padding: 0; gap: 0; border-top: 1px solid var(--mg-line); list-style: none; }
.mg-family-branch li { padding: 15px 0; border-bottom: 1px solid var(--mg-line); color: var(--mg-muted); font-size: 13px; }
.mg-family-branch li strong { color: var(--mg-ink); }
.mg-light-lab,
.mg-panel-lab { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .55fr); width: min(var(--mg-layout), 100%); margin: clamp(58px, 7vw, 92px) auto 0; border: 1px solid var(--mg-line); }
.mg-light-stage,
.mg-panel-stage { position: relative; display: grid; min-height: 500px; place-items: center; overflow: hidden; padding: clamp(38px, 6vw, 76px); background: var(--mg-soft); }
.mg-light-stack { position: relative; display: grid; width: min(78%, 680px); aspect-ratio: 16 / 10; place-items: center; border: 1px solid var(--mg-line-strong); background: #fff; box-shadow: var(--mg-shadow); }
.mg-light-stack::before { position: absolute; inset: 9%; background: linear-gradient(135deg, #14191e 0 28%, var(--mg-accent) 28% 55%, #f0a24e 55% 72%, #f5f6f4 72%); content: ""; }
.mg-light-stack i { position: absolute; inset: 4%; border: 1px solid rgba(101, 80, 165, .32); opacity: var(--mg-layer-opacity, .5); transform: translate(var(--mg-layer-x, 0), var(--mg-layer-y, 0)); transition: inset .55s var(--mg-ease), transform .55s var(--mg-ease), opacity .4s ease; }
.mg-light-stage[data-light-stage="lcd"] .mg-light-stack i { inset: 4%; opacity: .38; }
.mg-light-stage[data-light-stage="mini"] .mg-light-stack i { inset: 10%; opacity: .75; box-shadow: 0 0 28px rgba(101, 80, 165, .2); }
.mg-light-stage[data-light-stage="oled"] .mg-light-stack i { inset: 15%; opacity: .95; border-color: transparent; box-shadow: inset 0 0 0 1px rgba(101, 80, 165, .2); }
.mg-light-source,
.mg-light-filter,
.mg-light-pixels { position: absolute; top: 50%; left: 50%; display: grid; width: min(70%, 620px); aspect-ratio: 16 / 9; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border: 1px solid rgba(101, 80, 165, .28); background: rgba(255, 255, 255, .78); box-shadow: 0 22px 45px rgba(16, 19, 23, .08); transform-style: preserve-3d; transition: transform .65s var(--mg-ease), opacity .45s ease; }
.mg-light-source { transform: translate(-60%, -62%) rotateY(-8deg); }
.mg-light-filter { transform: translate(-50%, -50%) rotateY(-8deg); }
.mg-light-pixels { transform: translate(-40%, -38%) rotateY(-8deg); }
.mg-light-source i,
.mg-light-filter i,
.mg-light-pixels i { min-width: 0; background: rgba(101, 80, 165, .12); }
.mg-light-source i { background: rgba(255, 173, 80, .22); box-shadow: 0 0 18px rgba(255, 173, 80, .18); }
.mg-light-filter i:nth-child(3n + 1) { background: rgba(223, 65, 83, .18); }
.mg-light-filter i:nth-child(3n + 2) { background: rgba(51, 166, 112, .18); }
.mg-light-filter i:nth-child(3n) { background: rgba(67, 108, 216, .18); }
.mg-light-pixels i { background: linear-gradient(90deg, rgba(223, 65, 83, .45) 0 33.3%, rgba(51, 166, 112, .45) 33.3% 66.6%, rgba(67, 108, 216, .45) 66.6%); }
.mg-light-stage > p { position: absolute; right: 6%; bottom: 26px; left: 6%; margin: 0; color: var(--mg-muted); font-size: 11px; line-height: 1.6; text-align: center; }
.mg-light-stage[data-light-stage="mini"] .mg-light-source { opacity: .82; transform: translate(-61%, -63%) rotateY(-8deg) scale(.96); }
.mg-light-stage[data-light-stage="mini"] .mg-light-source i { background: rgba(255, 173, 80, .48); box-shadow: 0 0 23px rgba(255, 173, 80, .35); }
.mg-light-stage[data-light-stage="oled"] .mg-light-source,
.mg-light-stage[data-light-stage="oled"] .mg-light-filter { opacity: .08; transform: translate(-50%, -50%) scale(.82); }
.mg-light-stage[data-light-stage="oled"] .mg-light-pixels { transform: translate(-50%, -50%) rotateY(0); }
.mg-panel-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: clamp(58px, 7vw, 92px) auto 0; border-top: 1px solid var(--mg-line); border-left: 1px solid var(--mg-line); }
.mg-panel-cards article { min-width: 0; min-height: 390px; padding: clamp(28px, 3.4vw, 47px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; }
.mg-panel-cards h3 { margin: 0 0 22px; font-size: clamp(27px, 2.75vw, 41px); }
.mg-panel-cards article > p:not(.mg-eyebrow) { color: var(--mg-muted); font-size: 14px; line-height: 1.78; }
.mg-panel-cards ul,
.mg-port-grid ul { display: flex; flex-wrap: wrap; margin: 32px 0 0; padding: 0; gap: 6px; list-style: none; }
.mg-panel-cards li,
.mg-port-grid li { padding: 5px 8px; border: 1px solid var(--mg-line); color: var(--mg-muted); font-size: 9px; line-height: 1.25; }
.mg-light-options,
.mg-panel-options { display: grid; align-content: stretch; }
.mg-light-options button,
.mg-panel-options button { display: grid; min-height: 118px; align-content: center; padding: 24px 28px; gap: 7px; border: 0; border-bottom: 1px solid var(--mg-line); background: #fff; color: var(--mg-muted); text-align: left; cursor: pointer; }
.mg-light-options button:last-child,
.mg-panel-options button:last-child { border-bottom: 0; }
.mg-light-options button[aria-pressed="true"],
.mg-panel-options button[aria-pressed="true"] { background: var(--mg-ink); color: #fff; }
.mg-light-options b,
.mg-panel-options b { color: var(--mg-accent); font-size: 18px; line-height: 1.3; }
.mg-light-options span,
.mg-panel-options span { font-size: 11px; line-height: 1.5; }

/* HDR and color */
.mg-hdr-pipeline,
.mg-signal-pipeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: 0 auto; border-top: 1px solid var(--mg-ink); border-left: 1px solid var(--mg-line); }
.mg-hdr-pipeline { grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; border: 1px solid var(--mg-line); }
.mg-hdr-pipeline > article { min-width: 0; min-height: 230px; padding: clamp(28px, 3.2vw, 42px); background: #fff; }
.mg-hdr-pipeline > i { display: grid; min-width: 0; min-height: 0; place-items: center; padding: 0; border-right: 1px solid var(--mg-line); border-left: 1px solid var(--mg-line); background: var(--mg-soft); color: var(--mg-accent); font-size: 14px; font-style: normal; }
.mg-hdr-pipeline > *,
.mg-signal-pipeline > * { position: relative; min-width: 0; min-height: 230px; padding: clamp(28px, 3.5vw, 46px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; }
.mg-hdr-pipeline > *:not(:last-child)::after,
.mg-signal-pipeline > *:not(:last-child)::after { position: absolute; z-index: 2; top: 50%; right: -13px; display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid var(--mg-line); border-radius: 50%; background: #fff; color: var(--mg-accent); content: "→"; font-size: 11px; transform: translateY(-50%); }
.mg-hdr-pipeline > *::after { display: none !important; }
.mg-hdr-pipeline span,
.mg-signal-pipeline span { color: var(--mg-accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.mg-hdr-pipeline strong,
.mg-signal-pipeline strong { display: block; margin-top: 32px; color: var(--mg-ink); font-size: 22px; line-height: 1.25; }
.mg-hdr-pipeline p,
.mg-signal-pipeline p { margin: 15px 0 0; color: var(--mg-muted); font-size: 12px; line-height: 1.7; }
.mg-hdr-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: clamp(58px, 7vw, 92px) auto 0; border: 1px solid var(--mg-line); background: linear-gradient(90deg, #111 0%, #373737 32%, #aaa 67%, #fff 100%); }
.mg-hdr-scale > * { min-width: 0; min-height: 220px; padding: clamp(25px, 3vw, 40px); border-right: 1px solid rgba(255, 255, 255, .28); color: #fff; mix-blend-mode: difference; }
.mg-hdr-scale > *:last-child { border-right: 0; }
.mg-hdr-scale strong { display: block; font-size: clamp(30px, 3vw, 46px); line-height: 1; }
.mg-hdr-scale span { display: block; margin-top: 10px; font-size: 9px; letter-spacing: .1em; }
.mg-hdr-scale p { margin: 48px 0 0; font-size: 11px; line-height: 1.65; }
.mg-hdr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: clamp(58px, 7vw, 92px) auto 0; border-top: 1px solid var(--mg-line); border-left: 1px solid var(--mg-line); }
.mg-hdr-grid article { min-width: 0; min-height: 320px; padding: clamp(30px, 4vw, 52px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; }
.mg-hdr-grid h3 { margin: 0 0 22px; font-size: clamp(28px, 3vw, 44px); }
.mg-hdr-grid article > p:last-child { margin-bottom: 0; color: var(--mg-muted); font-size: 14px; }
.mg-format-guide { width: min(var(--mg-layout), 100%); margin: clamp(58px, 7vw, 92px) auto 0; padding: clamp(34px, 5vw, 66px); border: 1px solid var(--mg-line); background: #101317; }
.mg-format-guide > h3 { margin: 0; color: #fff !important; font-size: clamp(34px, 4.3vw, 62px); }
.mg-format-guide > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid #343a40; border-left: 1px solid #343a40; }
.mg-format-guide article { min-width: 0; padding: clamp(26px, 3.5vw, 44px); border-right: 1px solid #343a40; border-bottom: 1px solid #343a40; }
.mg-format-guide article strong { display: block; color: var(--mg-green); font-size: clamp(22px, 2.3vw, 32px); line-height: 1.25; }
.mg-format-guide article p { margin: 18px 0 0; color: #aeb7bd; font-size: 13px; line-height: 1.75; }
.mg-certification { display: grid; grid-template-columns: minmax(0, .82fr) minmax(320px, 1.18fr); width: min(var(--mg-layout), 100%); margin: clamp(58px, 7vw, 92px) auto 0; padding: clamp(40px, 5vw, 66px); gap: clamp(48px, 8vw, 110px); border: 1px solid var(--mg-line); background: var(--mg-cool); }
.mg-certification h3 { margin: 0; font-size: clamp(32px, 3.8vw, 56px); }
.mg-color-section { display: grid; grid-template-columns: minmax(320px, .75fr) minmax(0, 1.25fr); align-items: stretch; width: min(var(--mg-layout), 100%); margin: clamp(58px, 7vw, 92px) auto 0; border: 1px solid var(--mg-line); background: #fff; }
.mg-color-map { position: relative; min-height: 600px; overflow: hidden; background: #101317; }
.mg-color-map i { position: absolute; bottom: 12%; left: 50%; border: 1px solid currentColor; transform: translateX(-50%) rotate(45deg); }
.mg-color-map .mg-color-2020 { width: 74%; aspect-ratio: 1; color: rgba(65, 160, 235, .58); }
.mg-color-map .mg-color-p3 { width: 55%; aspect-ratio: 1; color: rgba(224, 90, 94, .68); }
.mg-color-map .mg-color-srgb { width: 37%; aspect-ratio: 1; color: rgba(90, 210, 146, .78); }
.mg-color-map span { position: absolute; left: 7%; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.mg-color-map span:nth-of-type(1) { bottom: 14%; color: #5ad292; }
.mg-color-map span:nth-of-type(2) { bottom: 20%; color: #e05a5e; }
.mg-color-map span:nth-of-type(3) { bottom: 26%; color: #41a0eb; }
.mg-color-copy { padding: clamp(38px, 5vw, 68px); }
.mg-color-copy h3 { margin: 0 0 34px; font-size: clamp(36px, 4vw, 60px); }
.mg-color-copy > p:not(.mg-eyebrow) { color: var(--mg-muted); }
.mg-color-copy dl { margin: 42px 0 0; border-top: 1px solid var(--mg-line); }
.mg-color-copy dl div { display: grid; grid-template-columns: 160px minmax(0, 1fr); padding: 15px 0; gap: 24px; border-bottom: 1px solid var(--mg-line); }
.mg-color-copy dt { color: var(--mg-ink); font-size: 12px; font-weight: 740; }
.mg-color-copy dd { margin: 0; color: var(--mg-muted); font-size: 12px; line-height: 1.65; }

/* Connections */
.mg-connection-lab { display: grid; grid-template-columns: minmax(300px, .55fr) minmax(0, 1.15fr); width: min(var(--mg-layout), 100%); margin: 0 auto; border: 1px solid var(--mg-line); background: #fff; }
.mg-connection.mg-chapter--dark { --mg-accent: #65cbb9; }
.mg-connection .mg-connection-lab { grid-template-columns: minmax(220px, .42fr) minmax(0, 1.58fr); border-color: #343a40; background: #14191e; }
.mg-source-options { display: grid; border-right: 1px solid #343a40; }
.mg-source-options button { min-height: 92px; padding: 18px 24px; border: 0; border-bottom: 1px solid #343a40; background: transparent; color: #98a2a9; font-size: 12px; font-weight: 720; text-align: left; cursor: pointer; }
.mg-source-options button:last-child { border-bottom: 0; }
.mg-source-options button[aria-pressed="true"] { background: var(--mg-accent); color: #101317; }
.mg-signal-route { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; min-width: 0; }
.mg-signal-route > div { min-width: 0; padding: clamp(28px, 3vw, 42px); border-right: 1px solid #343a40; }
.mg-signal-route > i { display: grid; place-items: center; border-right: 1px solid #343a40; color: var(--mg-accent); font-size: 14px; font-style: normal; }
.mg-signal-route span { color: var(--mg-accent); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.mg-signal-route strong { display: block; margin-top: 32px; color: #fff; font-size: clamp(20px, 2vw, 30px); line-height: 1.25; }
.mg-signal-route small { display: block; margin-top: 12px; color: #8e989f; font-size: 10px; line-height: 1.5; }
.mg-connection-lab > p { grid-column: 2; margin: 0; padding: 22px clamp(28px, 4vw, 48px); border-top: 1px solid #343a40; color: #aeb7bd; font-size: 12px; line-height: 1.7; }
.mg-connection .mg-port-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); border-color: #343a40; }
.mg-connection .mg-port-grid article { border-color: #343a40; background: #101317; }
.mg-connection .mg-port-grid h3 { color: #fff !important; }
.mg-connection .mg-port-grid article > p:last-of-type { color: #aab3ba; }
.mg-connection .mg-port-grid li { border-color: #414951; color: #aab3ba; }
.mg-signal-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: clamp(58px, 7vw, 92px) auto 0; border-top: 1px solid #343a40; border-left: 1px solid #343a40; }
.mg-signal-notes article { min-width: 0; padding: clamp(28px, 3.5vw, 48px); border-right: 1px solid #343a40; border-bottom: 1px solid #343a40; }
.mg-signal-notes span { color: var(--mg-accent); font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.mg-signal-notes strong { display: block; margin-top: 30px; color: #fff; font-size: clamp(22px, 2.3vw, 34px); line-height: 1.25; }
.mg-signal-notes p { margin: 20px 0 0; color: #aab3ba; font-size: 13px; }
.mg-bandwidth-check { display: grid; grid-template-columns: minmax(0, .85fr) minmax(320px, 1.15fr); width: min(var(--mg-layout), 100%); margin: clamp(58px, 7vw, 92px) auto 0; padding: clamp(38px, 5vw, 64px); gap: clamp(46px, 7vw, 100px); border: 1px solid #343a40; background: #14191e; }
.mg-bandwidth-check .mg-eyebrow { grid-column: 1 / -1; margin-bottom: -10px; }
.mg-bandwidth-check h3 { margin: 0; color: #fff !important; font-size: clamp(32px, 3.8vw, 55px); }
.mg-bandwidth-check ol { margin: 0; padding: 0; border-top: 1px solid #343a40; counter-reset: bandwidth; list-style: none; }
.mg-bandwidth-check li { position: relative; padding: 14px 0 14px 42px; border-bottom: 1px solid #343a40; color: #b5bec4; font-size: 13px; counter-increment: bandwidth; }
.mg-bandwidth-check li::before { position: absolute; left: 0; color: var(--mg-accent); content: "0" counter(bandwidth); font-size: 10px; font-weight: 800; }
.mg-connection-options { display: grid; border-right: 1px solid var(--mg-line); }
.mg-connection-options button { display: grid; min-height: 104px; align-content: center; padding: 22px 28px; gap: 5px; border: 0; border-bottom: 1px solid var(--mg-line); background: #fff; color: var(--mg-muted); text-align: left; cursor: pointer; }
.mg-connection-options button:last-child { border-bottom: 0; }
.mg-connection-options button[aria-pressed="true"] { background: var(--mg-ink); color: #fff; }
.mg-connection-options b { color: var(--mg-accent); font-size: 17px; }
.mg-connection-options span { font-size: 11px; }
.mg-connection-result { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(190px, .45fr); align-items: center; padding: clamp(34px, 5vw, 68px); gap: clamp(32px, 5vw, 68px); }
.mg-connection-result h3 { margin: 0 0 22px; font-size: clamp(30px, 3.5vw, 54px); }
.mg-connection-result p { margin: 0; }
.mg-port-visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mg-port-visual i { display: grid; aspect-ratio: 1.65; place-items: center; border: 2px solid var(--mg-ink); border-radius: 8px; color: var(--mg-accent); font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .08em; }

/* Use-case routes */
.mg-routes { --mg-accent: var(--mg-green); background: var(--mg-soft); }
.mg-route-grid,
.mg-use-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: 0 auto; border-top: 1px solid var(--mg-ink); border-left: 1px solid var(--mg-line); }
.mg-route-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: 0 auto; border-top: 1px solid var(--mg-ink); border-left: 1px solid var(--mg-line); }
.mg-route-cards article { display: flex; min-width: 0; min-height: 430px; flex-direction: column; padding: clamp(30px, 4vw, 50px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; }
.mg-route-cards article > span { color: var(--mg-accent); font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.mg-route-cards h3 { margin: 38px 0 22px; font-size: clamp(29px, 3vw, 45px); }
.mg-route-cards article > p { margin-bottom: 0; color: var(--mg-muted); font-size: 14px; }
.mg-route-cards dl { margin: auto 0 0; padding-top: 30px; }
.mg-route-cards dl div { display: flex; justify-content: space-between; padding: 9px 0; gap: 20px; border-top: 1px solid var(--mg-line); }
.mg-route-cards dt { color: var(--mg-muted); font-size: 10px; }
.mg-route-cards dd { margin: 0; color: var(--mg-ink); font-size: 11px; font-weight: 730; text-align: right; }
.mg-route-cards button { align-self: flex-start; margin-top: 28px; padding: 0; border: 0; background: transparent; color: var(--mg-accent); font-size: 12px; font-weight: 760; cursor: pointer; text-decoration: underline; text-underline-offset: .25em; }
.mg-route-card,
.mg-use-card { display: flex; min-width: 0; min-height: 400px; flex-direction: column; padding: clamp(30px, 4vw, 52px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; }
.mg-route-card > span,
.mg-use-card > span { color: var(--mg-accent); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.mg-route-card h3,
.mg-use-card h3 { margin: 38px 0 24px; font-size: clamp(30px, 3.2vw, 46px); }
.mg-route-card p,
.mg-use-card p { margin-bottom: 0; color: var(--mg-muted); font-size: 14px; }
.mg-route-card dl,
.mg-use-card dl { margin: auto 0 0; padding-top: 34px; }
.mg-route-card dl div,
.mg-use-card dl div { display: flex; justify-content: space-between; padding: 10px 0; gap: 18px; border-top: 1px solid var(--mg-line); }
.mg-route-card dt,
.mg-use-card dt { color: var(--mg-muted); font-size: 10px; }
.mg-route-card dd,
.mg-use-card dd { margin: 0; color: var(--mg-ink); font-size: 11px; font-weight: 720; text-align: right; }
.mg-route-card button,
.mg-use-card button { align-self: flex-start; margin-top: 28px; padding: 0; border: 0; background: transparent; color: var(--mg-accent); font-size: 12px; font-weight: 760; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }

/* Product explorer */
.mg-models { --mg-accent: var(--mg-blue); background: #fff; }
.mg-product-explorer { width: min(var(--mg-layout), 100%); margin: 0 auto; }
.mg-filter-bar,
.mg-product-filters { position: sticky; z-index: 10; top: 62px; display: grid; padding: 20px 0; gap: 14px; border-top: 1px solid var(--mg-ink); border-bottom: 1px solid var(--mg-line); background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.admin-bar :is(.mg-filter-bar, .mg-product-filters) { top: 94px; }
.mg-filter-group { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 8px; }
.mg-filter-group > span,
.mg-filter-label { min-width: 72px; color: var(--mg-muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.mg-filter-status { display: flex; justify-content: space-between; align-items: center; gap: 18px; color: var(--mg-muted); font-size: 11px; }
.mg-filter-status strong { color: var(--mg-accent); font-size: 20px; }
.mg-product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 38px; border-top: 1px solid var(--mg-line); border-left: 1px solid var(--mg-line); }
.mg-filter-panel { position: sticky; z-index: 10; top: 62px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; padding: 20px 0; gap: 20px; border-top: 1px solid var(--mg-ink); border-bottom: 1px solid var(--mg-line); background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.admin-bar .mg-filter-panel { top: 94px; }
.mg-filter-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.mg-filter-panel legend { margin: 0 0 10px; padding: 0; color: var(--mg-muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.mg-filter-panel fieldset > div { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-filter-panel button { min-height: 44px; padding: 0 13px; border: 1px solid var(--mg-line); border-radius: 999px; background: #fff; color: var(--mg-muted); font-size: 10px; font-weight: 700; cursor: pointer; }
.mg-filter-panel button[aria-pressed="true"] { border-color: var(--mg-ink); background: var(--mg-ink); color: #fff; }
.mg-product-count { margin: 0; color: var(--mg-muted); font-size: 9px; text-align: right; white-space: nowrap; }
.mg-product-count strong { color: var(--mg-accent); font-size: 28px; line-height: 1; }
.mg-product { display: flex; min-width: 0; min-height: 450px; flex-direction: column; padding: clamp(25px, 3vw, 40px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; transition: opacity .25s ease, transform .35s var(--mg-ease), box-shadow .35s ease; }
.mg-product:hover { z-index: 2; box-shadow: 0 22px 56px rgba(16, 19, 23, .09); transform: translateY(-4px); }
.mg-product.is-filtered,
.mg-product.is-filtered-out { display: none; }
.mg-product-meta { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 34px; gap: 16px; }
.mg-product-meta span { color: var(--mg-accent); font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.mg-product-meta em { color: var(--mg-muted); font-size: 9px; font-style: normal; line-height: 1.4; text-align: right; }
.mg-product h3 { margin: 0 0 18px; font-size: clamp(23px, 2.05vw, 31px); line-height: 1.2; }
.mg-product > p { margin: 0 0 24px; color: var(--mg-muted); font-size: 13px; line-height: 1.72; }
.mg-product > ul { display: flex; flex-wrap: wrap; margin: 0 0 26px; padding: 0; gap: 6px; list-style: none; }
.mg-product > ul li { padding: 5px 8px; border: 1px solid var(--mg-line); color: var(--mg-muted); font-size: 9px; line-height: 1.25; }
.mg-product [data-vc_mylinkbox_id] { width: 100%; max-width: 100%; margin-top: auto; overflow: hidden; }
.mg-product [data-vc_mylinkbox_id] > * { max-width: 100%; }
.mg-product [data-vc_mylinkbox_id] :where(img, iframe) { max-width: 100%; height: auto; }
.mg-product--review { background: var(--mg-cool); }
.mg-product .mg-product-link { margin-top: auto; }
.mg-product-card { display: flex; min-width: 0; min-height: 430px; flex-direction: column; padding: clamp(25px, 3vw, 40px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; transition: opacity .25s ease, transform .35s var(--mg-ease), box-shadow .35s ease; }
.mg-product-card:hover { z-index: 2; box-shadow: 0 22px 56px rgba(16, 19, 23, .09); transform: translateY(-4px); }
.mg-product-card.is-filtered,
.mg-product-card.is-filtered-out { display: none; }
.mg-product-card > .mg-eyebrow,
.mg-product-card > span:first-child { margin-bottom: 34px; }
.mg-product-card h3 { margin: 0 0 18px; font-size: clamp(23px, 2vw, 31px); letter-spacing: -.04em; line-height: 1.2; }
.mg-product-specs,
.mg-product-tags { display: flex; flex-wrap: wrap; margin: 0 0 22px; padding: 0; gap: 6px; list-style: none; }
.mg-product-specs span,
.mg-product-tags span,
.mg-product-specs li,
.mg-product-tags li { padding: 5px 8px; border: 1px solid var(--mg-line); color: var(--mg-muted); font-size: 9px; font-weight: 680; line-height: 1.2; }
.mg-product-card > p { margin: 0 0 24px; color: var(--mg-muted); font-size: 13px; line-height: 1.72; }
.mg-product-card [data-vc_mylinkbox_id] { width: 100%; max-width: 100%; margin-top: auto; overflow: hidden; }
.mg-product-card [data-vc_mylinkbox_id] > * { max-width: 100%; }
.mg-product-card [data-vc_mylinkbox_id] :where(img, iframe) { max-width: 100%; height: auto; }
.mg-product-link,
.mg-card-link { align-self: flex-start; margin-top: auto; color: var(--mg-accent) !important; font-size: 12px; font-weight: 750; }
.mg-product-empty,
.mg-empty-state { display: none; margin-top: 38px; padding: 70px 24px; border-top: 1px solid var(--mg-ink); border-bottom: 1px solid var(--mg-line); text-align: center; }
.mg-product-empty.is-visible,
.mg-empty-state.is-visible { display: block; }
.mg-product-empty:not([hidden]),
.mg-empty-state:not([hidden]) { display: block; }
.mg-product-empty h3,
.mg-empty-state h3 { margin: 0 0 16px; font-size: 30px; }

/* Glossary and references */
.mg-glossary { --mg-accent: var(--mg-violet); background: var(--mg-soft); }
.mg-glossary-tools { display: flex; justify-content: space-between; align-items: end; width: min(var(--mg-layout), 100%); margin: 0 auto 34px; gap: 30px; }
.mg-glossary-search { position: relative; width: min(100%, 620px); }
.mg-glossary-search label { display: block; margin-bottom: 9px; color: var(--mg-muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.mg-glossary-search input { width: 100%; min-height: 56px; padding: 0 50px 0 16px; border: 0; border-bottom: 1px solid var(--mg-ink); border-radius: 0; background: transparent; color: var(--mg-ink); font-size: 17px; }
.mg-glossary-count { margin: 0; color: var(--mg-muted); font-size: 11px; white-space: nowrap; }
.mg-glossary-count strong { color: var(--mg-accent); font-size: 22px; }
.mg-glossary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: 0 auto; border-top: 1px solid var(--mg-ink); border-left: 1px solid var(--mg-line); }
.mg-glossary-tool { display: flex; justify-content: space-between; align-items: end; width: min(var(--mg-layout), 100%); margin: 0 auto 34px; gap: 30px; }
.mg-glossary-tool > p { margin: 0; color: var(--mg-muted); font-size: 10px; white-space: nowrap; }
.mg-glossary-tool > p strong { color: var(--mg-accent); font-size: 28px; line-height: 1; }
.mg-glossary-tool .mg-glossary-search { width: min(100%, 650px); }
.mg-glossary-tool .mg-glossary-search > span { display: block; margin-bottom: 9px; color: var(--mg-muted); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.mg-glossary-tool .mg-glossary-search i { position: absolute; right: 17px; bottom: 19px; width: 15px; height: 15px; border: 1px solid var(--mg-muted); border-radius: 50%; }
.mg-glossary-tool .mg-glossary-search i::after { position: absolute; right: -5px; bottom: -3px; width: 7px; height: 1px; background: var(--mg-muted); content: ""; transform: rotate(45deg); transform-origin: left center; }
.mg-glossary-grid [data-glossary-item] { min-width: 0; padding: clamp(25px, 3vw, 40px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; }
.mg-glossary-grid [data-glossary-item].is-filtered,
.mg-glossary-grid [data-glossary-item].is-filtered-out { display: none; }
.mg-glossary-grid [data-glossary-item] h3 { margin: 0; font-size: clamp(19px, 1.8vw, 25px); letter-spacing: -.035em; line-height: 1.25; }
.mg-glossary-grid [data-glossary-item] p { margin: 17px 0 0; color: var(--mg-muted); font-size: 13px; line-height: 1.75; }
.mg-glossary-item { min-width: 0; padding: clamp(25px, 3vw, 40px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; }
.mg-glossary-item.is-filtered { display: none; }
.mg-glossary-item dt { color: var(--mg-ink); font-size: clamp(19px, 1.8vw, 25px); font-weight: 760; line-height: 1.25; word-break: normal; word-break: auto-phrase; line-break: strict; }
.mg-glossary-item dd { margin: 17px 0 0; color: var(--mg-muted); font-size: 13px; line-height: 1.75; }
.mg-glossary-empty { display: none; width: min(var(--mg-layout), 100%); margin: 0 auto; padding: 60px 0; border-bottom: 1px solid var(--mg-line); text-align: center; }
.mg-glossary-empty.is-visible { display: block; }
.mg-glossary-empty:not([hidden]) { display: block; }

.mg-checklist { display: grid; grid-template-columns: minmax(280px, .62fr) minmax(0, 1.38fr); width: min(var(--mg-wide), 100%); margin: 0 auto; gap: clamp(50px, 9vw, 150px); border-top: 1px solid var(--mg-line); background: #fff; }
.mg-checklist > div:first-child { position: static; align-self: start; }
.mg-checklist ol { margin: 0; padding: 0; border-top: 1px solid var(--mg-line); list-style: none; }
.mg-checklist li { display: grid; grid-template-columns: 56px minmax(190px, .58fr) minmax(0, 1fr); align-items: start; padding: 27px 0; gap: 20px; border-bottom: 1px solid var(--mg-line); }
.mg-checklist li > span { color: var(--mg-accent); font-size: 11px; font-weight: 780; }
.mg-checklist li strong { color: var(--mg-ink); font-size: 16px; }
.mg-checklist li p { margin: 0; color: var(--mg-muted); font-size: 14px; line-height: 1.7; }

.mg-references { background: #fff; }
.mg-reference-list { width: min(var(--mg-layout), 100%); margin: 0 auto; border-top: 1px solid var(--mg-ink); }
.mg-reference-list a { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; align-items: center; min-height: 92px; padding: 18px 8px; gap: 28px; border-bottom: 1px solid var(--mg-line); color: inherit; text-decoration: none; }
.mg-reference-list a span { color: var(--mg-accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.mg-reference-list a strong { color: var(--mg-ink); font-size: 16px; }
.mg-reference-list a i { font-style: normal; }
.mg-final { background: var(--mg-soft); text-align: center; }
.mg-final .mg-kicker { text-align: center; }
.mg-final h2 { margin-right: auto; margin-left: auto; }
.mg-final h2 .mg-line { margin-right: auto; margin-left: auto; }
.mg-final > p:not(.mg-kicker) { width: min(100%, 760px); margin: 44px auto 0; }
.mg-final-actions { display: flex; justify-content: center; margin-top: 40px; gap: 12px; }
.mg-final > div:last-child { display: flex; justify-content: center; align-items: center; margin-top: 40px; gap: 28px; }

/* Final purchase checklist and primary sources */
.mg-checklist {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--mg-section) var(--mg-gutter);
  border-top: 1px solid var(--mg-line);
  background: #fff;
}
.mg-checklist > .mg-section-head { margin-bottom: clamp(54px, 7vw, 92px); }
.mg-checklist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: 0 auto; padding: 0; border-top: 1px solid var(--mg-ink); border-left: 1px solid var(--mg-line); list-style: none; }
.mg-checklist-grid li { display: grid; grid-template-columns: 42px minmax(180px, .58fr) minmax(0, 1fr); min-width: 0; align-items: start; padding: clamp(24px, 3vw, 38px); gap: 18px; border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); }
.mg-checklist-grid li > span { color: var(--mg-accent); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.mg-checklist-grid li > strong { color: var(--mg-ink); font-size: 15px; line-height: 1.5; }
.mg-checklist-grid li > p { margin: 0; color: var(--mg-muted); font-size: 12px; line-height: 1.72; }
.mg-sources { display: grid; grid-template-columns: minmax(290px, .64fr) minmax(0, 1.36fr); width: 100%; padding: var(--mg-section) max(var(--mg-gutter), calc((100vw - var(--mg-wide)) / 2)); gap: clamp(54px, 8vw, 120px); background: var(--mg-ink); color: #aeb7bd; }
.mg-sources h2 { margin: 0; color: #fff !important; font-size: clamp(38px, 4.4vw, 67px); }
.mg-sources > div:first-child > p:last-child { margin: 36px 0 0; font-size: 14px; }
.mg-source-links { border-top: 1px solid #3b4349; }
.mg-source-links a { display: flex; justify-content: space-between; align-items: center; min-height: 72px; padding: 14px 4px; gap: 24px; border-bottom: 1px solid #3b4349; color: #fff; font-size: 13px; text-decoration: none; }
.mg-source-links a span { color: var(--mg-green); }
.mg-source-links a:hover { color: #75c5e2; }

/* Cocoon's legacy post-specific CSS is loaded after this file. Keep the guide's
   navigation, source links and affiliate cards inside the new design system. */
body.gbds-v2-monitor-guide-page .gbds-v2-monitor-guide-shell a { color: inherit; }
body.gbds-v2-monitor-guide-page .gbds-v2-monitor-guide-shell :where(
  .mg-nav a,
  .mg-chapter-index a,
  .mg-reference-list a,
  .mg-source-links a,
  .mg-button,
  .mg-card-link
) { text-decoration: none !important; }
body.gbds-v2-monitor-guide-page .gbds-v2-monitor-guide-shell .mg-source-links a { color: #fff; }
body.gbds-v2-monitor-guide-page .gbds-v2-monitor-guide-shell .mg-product [data-vc_mylinkbox_id],
body.gbds-v2-monitor-guide-page .gbds-v2-monitor-guide-shell .mg-product-card [data-vc_mylinkbox_id] { margin-top: auto !important; }

/* JS enhancement states */
.gbds-v2-monitor-guide-shell.is-motion-ready [data-mg-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .75s ease, transform .95s var(--mg-ease);
}
.gbds-v2-monitor-guide-shell.is-motion-ready [data-mg-reveal].is-visible { opacity: 1; transform: none; }
.gbds-v2-monitor-guide-shell.is-motion-ready .mg-hero-object { transition-delay: .1s; }

@media (max-width: 1080px) {
  .mg-nav-links { display: none; }
  .mg-nav-cta { margin-left: auto; }
  .mg-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 110px; }
  .mg-hero-copy { justify-self: center; }
  .mg-hero-object { width: min(100%, 780px); min-height: 540px; justify-self: center; }
  .mg-route-map,
  .mg-section-head--split,
  .mg-finder,
  .mg-vrr-panel,
  .mg-checklist { grid-template-columns: 1fr; }
  .mg-section-head--split { align-items: start; gap: 30px; }
  .mg-finder { gap: 0; }
  .mg-result { min-height: 520px; }
  .mg-chapter-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-size-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mg-size-controls button:nth-child(3n) { border-right: 0; }
  .mg-size-controls button:nth-child(-n + 3) { border-bottom: 1px solid var(--mg-line); }
  .mg-size-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-aspect-lab,
  .mg-light-lab,
  .mg-panel-lab,
  .mg-connection-lab { grid-template-columns: 1fr; }
  .mg-family-tree { grid-template-columns: 190px minmax(0, 1fr); }
  .mg-aspect-options { grid-template: repeat(2, 1fr) / repeat(2, 1fr); border-top: 1px solid var(--mg-line); }
  .mg-aspect-options button:nth-child(odd) { border-right: 1px solid var(--mg-line); }
  .mg-aspect-options button:nth-child(3) { border-bottom: 0; }
  .mg-ppi-lab { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-ppi-output { border-right: 0; }
  .mg-pixel-field { grid-column: 1 / -1; min-height: 310px; border-top: 1px solid var(--mg-line); }
  .mg-resolution-scale,
  .mg-explainer-grid,
  .mg-metric-grid,
  .mg-panel-grid,
  .mg-color-grid,
  .mg-port-grid,
  .mg-route-grid,
  .mg-use-grid,
  .mg-product-grid,
  .mg-glossary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-hdr-pipeline,
  .mg-signal-pipeline,
  .mg-hdr-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-hdr-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-hdr-pipeline > i { display: none; }
  .mg-color-section,
  .mg-certification,
  .mg-bandwidth-check,
  .mg-sources { grid-template-columns: 1fr; }
  .mg-color-map { min-height: 470px; }
  .mg-connection .mg-connection-lab { grid-template-columns: 1fr; }
  .mg-source-options { grid-template-columns: repeat(4, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid #343a40; }
  .mg-source-options button { min-width: 0; min-height: 76px; padding: 13px 12px; border-right: 1px solid #343a40; border-bottom: 0; text-align: center; }
  .mg-source-options button:last-child { border-right: 0; }
  .mg-connection-lab > p { grid-column: 1; }
  .mg-hdr-pipeline > *:nth-child(2)::after,
  .mg-signal-pipeline > *:nth-child(2)::after { display: none; }
  .mg-connection-options { grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: 0; border-bottom: 1px solid var(--mg-line); }
  .mg-connection-options button:nth-child(odd) { border-right: 1px solid var(--mg-line); }
  .mg-checklist { gap: 56px; }
  .mg-checklist > div:first-child { position: static; }
  .mg-panel-cards,
  .mg-route-cards,
  .mg-checklist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-product-count { grid-column: 1 / -1; }
}

@media (max-width: 782px) {
  .admin-bar .mg-nav { top: 46px; }
  .admin-bar :is(.mg-filter-bar, .mg-product-filters, .mg-filter-panel) { top: 108px; }
  .admin-bar .gbds-v2-monitor-guide-shell [id] { scroll-margin-top: 118px; }
}

@media (max-width: 640px) {
  .gbds-v2-monitor-guide-shell { --mg-gutter: 20px; --mg-section: 88px; font-size: 16px; }
  .gbds-v2-monitor-guide-shell [id] { scroll-margin-top: 72px; }
  .gbds-v2-monitor-guide-shell .mg-phrase { white-space: normal; }
  .gbds-v2-monitor-guide-shell :where(h1, h2, h3, h4) .mg-line {
    width: 100%;
    word-break: normal;
    word-break: auto-phrase;
    line-break: strict;
    overflow-wrap: normal;
  }
  .mg-nav { min-height: 56px; padding-right: 16px; padding-left: 16px; gap: 10px; }
  .mg-brand { font-size: 14px; }
  .mg-brand span { display: none; }
  .mg-nav-cta { min-width: 92px; min-height: 44px; }
  .mg-hero { min-height: calc(100svh - 56px); padding-top: 82px; gap: 38px; }
  .mg-hero h1 { font-size: clamp(36px, 11.2vw, 58px); }
  .mg-lead { margin-top: 28px; font-size: 15px; }
  .mg-hero-actions { align-items: flex-start; flex-direction: column; margin-top: 28px; gap: 18px; }
  .mg-hero-object { min-height: 330px; }
  .mg-layer { width: min(82%, 400px); }
  .mg-layer > span { top: 12px; left: 13px; }
  .mg-layer--size b { font-size: clamp(76px, 25vw, 118px); }
  .mg-affiliate { right: 20px; left: 20px; }
  .mg-section-head h2,
  .mg-route-intro h2,
  .mg-final h2,
  .mg-checklist h2 { font-size: clamp(34px, 10.4vw, 51px); }
  .mg-route-map { grid-template-columns: 1fr; gap: 44px; }
  .mg-route-steps { grid-template-columns: 1fr; }
  .mg-route-steps li,
  .mg-route-steps li:nth-child(2n) { grid-column: auto; border-right: 0; }
  .mg-finder-steps { padding: 24px 18px; }
  .mg-choice-row { align-items: stretch; flex-direction: column; }
  .mg-choice-row button { width: 100%; }
  .mg-result { min-height: 500px; padding: 34px 24px; }
  .mg-result-size { margin-top: 34px; font-size: 86px; }
  .mg-result-actions { align-items: flex-start; flex-direction: column; }
  .mg-chapter-index { grid-template-columns: 1fr; }
  .mg-chapter-index a { min-height: 132px; }
  .mg-chapter-index strong { margin-top: 22px; }
  .mg-size-stage { height: 330px; padding-right: 12px; padding-left: 12px; }
  .mg-size-screen { max-width: 100%; }
  .mg-size-value > span { font-size: 68px; }
  .mg-size-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-size-controls button { min-height: 82px; border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line) !important; font-size: 27px; }
  .mg-size-controls button:nth-child(2n) { border-right: 0; }
  .mg-size-controls button:nth-last-child(-n + 2) { border-bottom: 0 !important; }
  .mg-size-facts,
  .mg-card-grid,
  .mg-fact-grid,
  .mg-feature-grid,
  .mg-term-grid { grid-template-columns: 1fr; }
  .mg-aspect-stage { min-height: 330px; padding: 32px 18px 58px; }
  .mg-aspect-options { grid-template: none / 1fr; }
  .mg-aspect-options button,
  .mg-aspect-options button:nth-child(odd),
  .mg-aspect-options button:nth-child(3) { min-height: 84px; border-right: 0; border-bottom: 1px solid var(--mg-line); }
  .mg-aspect-options button:last-child { border-bottom: 0; }
  .mg-note,
  .mg-callout,
  .mg-myth { grid-template-columns: 1fr; gap: 16px; }
  .mg-ppi-lab { grid-template-columns: 1fr; }
  .mg-ppi-controls,
  .mg-ppi-output { border-right: 0; border-bottom: 1px solid var(--mg-line); }
  .mg-pixel-field { grid-column: auto; min-height: 230px; border-top: 0; }
  .mg-resolution-scale,
  .mg-explainer-grid,
  .mg-metric-grid,
  .mg-panel-grid,
  .mg-color-grid,
  .mg-port-grid,
  .mg-route-grid,
  .mg-use-grid,
  .mg-product-grid,
  .mg-glossary-grid { grid-template-columns: 1fr; }
  .mg-resolution-scale article { min-height: auto; }
  .mg-motion-stage { min-height: 280px; }
  .mg-motion-value { right: 20px; bottom: 25px; }
  .mg-motion-options { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .mg-motion-options button { min-height: 80px; }
  .mg-motion-options b { font-size: 22px; }
  .mg-motion-options span { font-size: 9px; }
  .mg-vrr-panel { padding: 34px 22px; gap: 30px; }
  .mg-family-tree { grid-template-columns: 1fr; }
  .mg-family-root { min-height: 110px; writing-mode: horizontal-tb; }
  .mg-family-tree > .mg-family-branch { grid-template-columns: 1fr; }
  .mg-light-stage,
  .mg-panel-stage { min-height: 330px; padding: 30px 18px; }
  .mg-hdr-pipeline,
  .mg-signal-pipeline,
  .mg-hdr-scale { grid-template-columns: 1fr; }
  .mg-hdr-pipeline > *:not(:last-child)::after,
  .mg-signal-pipeline > *:not(:last-child)::after { top: auto; right: auto; bottom: -13px; left: 50%; content: "↓"; transform: translateX(-50%); }
  .mg-connection-options { grid-template-columns: 1fr; }
  .mg-connection-options button:nth-child(odd) { border-right: 0; }
  .mg-connection-result { grid-template-columns: 1fr; }
  .mg-port-visual { width: min(100%, 260px); }
  .mg-route-card,
  .mg-use-card,
  .mg-product-card { min-height: auto; }
  .mg-panel-cards,
  .mg-route-cards,
  .mg-checklist-grid { grid-template-columns: 1fr; }
  .mg-panel-cards article,
  .mg-route-cards article,
  .mg-product { min-height: auto; }
  .mg-certification,
  .mg-bandwidth-check { padding: 34px 22px; gap: 30px; }
  .mg-hdr-grid { grid-template-columns: 1fr; }
  .mg-format-guide > div { grid-template-columns: 1fr; }
  .mg-color-map { min-height: 350px; }
  .mg-color-copy { padding: 34px 22px; }
  .mg-color-copy dl div { grid-template-columns: 1fr; gap: 5px; }
  .mg-source-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-source-options button:nth-child(2) { border-right: 0; }
  .mg-source-options button:nth-child(-n + 2) { border-bottom: 1px solid #343a40; }
  .mg-signal-route { grid-template-columns: 1fr; }
  .mg-signal-route > div { border-right: 0; border-bottom: 1px solid #343a40; }
  .mg-signal-route > i { min-height: 36px; border-right: 0; border-bottom: 1px solid #343a40; transform: rotate(90deg); }
  .mg-signal-notes { grid-template-columns: 1fr; }
  .mg-filter-bar,
  .mg-product-filters { position: static; }
  .mg-filter-panel { position: static; grid-template-columns: 1fr; }
  .mg-filter-panel fieldset > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-filter-panel button { width: 100%; }
  .mg-filter-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-filter-group > span,
  .mg-filter-label { grid-column: 1 / -1; }
  .mg-filter-group button { width: 100%; padding-right: 10px; padding-left: 10px; }
  .mg-glossary-tools { align-items: stretch; flex-direction: column; }
  .mg-glossary-tool { align-items: stretch; flex-direction: column; }
  .mg-glossary-tool > p { align-self: flex-end; }
  .mg-glossary-count { align-self: flex-end; }
  .mg-checklist li { grid-template-columns: 38px 1fr; }
  .mg-checklist li p { grid-column: 2; }
  .mg-reference-list a { grid-template-columns: 1fr auto; gap: 8px 18px; }
  .mg-reference-list a span { grid-column: 1 / -1; }
  .mg-final-actions { align-items: stretch; flex-direction: column; }
  .mg-final > div:last-child { align-items: stretch; flex-direction: column; }
  .mg-sources { gap: 52px; }
}

@media (max-width: 360px) {
  .gbds-v2-monitor-guide-shell { --mg-gutter: 16px; }
  .mg-nav { padding-right: 12px; padding-left: 12px; }
  .mg-brand { font-size: 12px; }
  .mg-nav-cta { min-width: 80px; padding: 0 12px; font-size: 11px; }
  .mg-hero h1 { font-size: 34px; }
  .mg-hero-object { min-height: 285px; }
  .mg-motion-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mg-motion-options button { border-bottom: 1px solid #343a40; }
  .mg-motion-options button:nth-child(3n) { border-right: 0; }
  .mg-motion-options button:nth-last-child(-n + 2) { border-bottom: 0; }
  .mg-filter-group { grid-template-columns: 1fr; }
  .mg-filter-group > span,
  .mg-filter-label { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .gbds-v2-monitor-guide-shell *,
  .gbds-v2-monitor-guide-shell *::before,
  .gbds-v2-monitor-guide-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .gbds-v2-monitor-guide-shell.is-motion-ready [data-mg-reveal] { opacity: 1; transform: none; }
  .mg-layer { transform: translate(-50%, -50%) !important; }
}

/* --------------------------------------------------------------------------
 * 2026-08 visual learning system
 * Every diagram follows: input -> process -> result -> caution.
 * -------------------------------------------------------------------------- */
.gbds-v2-monitor-guide-shell {
  --mg-input: #0879a8;
  --mg-process: #6550a5;
  --mg-result: #087d6e;
  --mg-caution: #c35b2d;
}

.mg-hero {
  display: grid;
  min-height: min(920px, calc(100svh - 70px));
  grid-template-columns: 1fr;
  align-content: center;
  justify-items: center;
  padding: clamp(128px, 14vw, 220px) var(--mg-gutter) clamp(72px, 8vw, 118px);
  background: #fff;
  text-align: center;
}
.mg-hero-copy { width: min(100%, 1180px); justify-self: center; }
.mg-hero h1 { margin: 0 auto; font-size: clamp(62px, 7.2vw, 118px); line-height: .98; }
.mg-hero h1 .mg-line { width: 100%; justify-content: center; }
.mg-hero h1 .mg-line:last-child { margin-top: .1em; }
.mg-hero .mg-lead { width: min(100%, 880px); margin: clamp(34px, 4vw, 58px) auto 0; color: var(--mg-muted); font-size: clamp(15px, 1.3vw, 19px); }
.mg-hero-actions { justify-content: center; }
.mg-affiliate { position: static; width: min(100%, 820px); margin: clamp(58px, 6vw, 86px) auto 0; text-align: center; }

.mg-visual-key {
  display: flex;
  width: min(var(--mg-layout), 100%);
  flex-wrap: wrap;
  margin: 0 auto clamp(38px, 5vw, 64px);
  padding: 16px 20px;
  gap: 12px 28px;
  border: 1px solid var(--mg-line);
  background: #fff;
}
.mg-visual-key span { display: inline-flex; align-items: center; gap: 9px; color: var(--mg-muted); font-size: 11px; }
.mg-visual-key i { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.mg-key-input { color: var(--mg-input); }.mg-key-process { color: var(--mg-process); }.mg-key-result { color: var(--mg-result); }.mg-key-caution { color: var(--mg-caution); }

.mg-chapter > .mg-section-head { margin-bottom: clamp(46px, 6vw, 78px); }
.mg-chapter > .mg-section-head h2 { font-size: clamp(42px, 4.35vw, 70px); line-height: 1.04; }
.mg-buy-field {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: center;
  padding: 18px clamp(20px, 3vw, 34px);
  gap: 18px;
  border-top: 1px solid var(--mg-line);
  background: #fff;
}
.mg-buy-field span { color: var(--mg-caution); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.mg-buy-field strong { color: var(--mg-ink); font-size: 13px; line-height: 1.6; }
.mg-buy-field--dark { border-color: #343a40; background: #14191e; }
.mg-buy-field--dark strong { color: #fff; }

/* Size: front and top views */
.mg-size-viewer { border: 1px solid var(--mg-line); background: #fff; }
.mg-size-diagrams { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mg-size-diagrams figure { min-width: 0; margin: 0; padding: clamp(26px, 3.5vw, 48px); background: var(--mg-soft); }
.mg-size-front { height: auto; place-items: initial; overflow: visible; border-right: 1px solid var(--mg-line); }
.mg-size-diagrams figcaption { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; gap: 15px; }
.mg-size-diagrams figcaption span { color: var(--mg-input); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.mg-size-diagrams figcaption b { color: var(--mg-ink); font-size: 15px; }
.mg-size-front-canvas { position: relative; display: grid; min-height: 360px; place-items: center; overflow: hidden; border: 1px solid var(--mg-line); background: #fff; }
.mg-size-screen {
  position: relative;
  top: auto;
  left: auto;
  display: grid;
  width: var(--size-width, 54%);
  max-width: 94%;
  place-items: center;
  border: 7px solid #171b1f;
  border-radius: 4px;
  background: linear-gradient(145deg, #eaf3f7, #f8fafb);
  transform: none;
  transition: width .55s var(--mg-ease), aspect-ratio .55s var(--mg-ease);
}
.mg-size-screen::after { display: none; }
.mg-size-value { position: relative; z-index: 2; display: flex; align-items: baseline; color: var(--mg-ink); }
.mg-size-value > span { font-size: clamp(44px, 5vw, 72px); }
.mg-size-value small { font-size: 11px; }
.mg-size-diagonal { position: absolute; inset: 9% 7%; overflow: hidden; }
.mg-size-diagonal::before { position: absolute; top: 50%; left: -8%; width: 116%; height: 2px; background: var(--mg-input); content: ""; transform: rotate(-29deg); }
.mg-size-diagonal::after { position: absolute; right: 7%; bottom: 6%; padding: 3px 7px; background: #fff; color: var(--mg-input); content: "対角線"; font-size: 9px; font-weight: 800; }
.mg-size-stand { position: absolute; bottom: 37px; left: 50%; width: 25%; height: 7px; border-radius: 50%; background: #858d93; transform: translateX(-50%); }
.mg-size-stand::before { position: absolute; bottom: 0; left: 50%; width: 8px; height: 42px; background: #858d93; content: ""; transform: translateX(-50%); }
.mg-size-diagrams dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0 0; gap: 1px; background: var(--mg-line); }
.mg-size-diagrams dl div { padding: 13px 15px; background: #fff; }
.mg-size-diagrams dt { color: var(--mg-muted); font-size: 9px; }.mg-size-diagrams dd { margin: 3px 0 0; color: var(--mg-ink); font-size: 13px; font-weight: 760; }
.mg-size-diagrams figure > small { display: block; margin-top: 14px; color: var(--mg-muted); font-size: 10px; line-height: 1.7; }
.mg-size-top-canvas { position: relative; min-height: 360px; overflow: hidden; border: 1px solid var(--mg-line); background: #fff; }
.mg-size-top-canvas::before { position: absolute; inset: 12% 8%; border: 1px solid #cfd5d8; background: linear-gradient(#fff, #fafafa); content: ""; }
.mg-top-eye { position: absolute; top: 50%; left: 14%; width: 34px; height: 34px; border: 2px solid var(--mg-input); border-radius: 50%; transform: translateY(-50%); }
.mg-top-eye::after { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--mg-input); content: ""; transform: translate(-50%, -50%); }
.mg-top-eye i::before,.mg-top-eye i::after { position: absolute; top: 14px; width: 16px; height: 2px; background: var(--mg-input); content: ""; }.mg-top-eye i::before { right: 27px; transform: rotate(-25deg); }.mg-top-eye i::after { right: 27px; transform: rotate(25deg); }
.mg-view-line { position: absolute; top: calc(50% - 1px); right: 25%; left: 20%; height: 2px; background: repeating-linear-gradient(90deg, var(--mg-input) 0 7px, transparent 7px 13px); }
.mg-view-line b { position: absolute; bottom: 10px; left: 50%; padding: 3px 8px; background: #fff; color: var(--mg-input); font-size: 10px; transform: translateX(-50%); white-space: nowrap; }
.mg-top-monitor { position: absolute; top: 50%; right: 16%; width: 9px; height: var(--mg-top-width, 49%); border-radius: 3px; background: #15191d; transform: translateY(-50%); transition: height .55s var(--mg-ease); }
.mg-top-stand { position: absolute; top: 50%; right: 8%; width: 22%; height: 34%; border: 1px solid var(--mg-caution); border-radius: 50%; transform: translateY(-50%); }
.mg-size-controls { border-top: 1px solid var(--mg-line); }

/* Aspect ratio: show what fits inside the screen */
.mg-aspect-lab { grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); }
.mg-aspect-stage { display: grid; min-height: 590px; align-content: center; justify-items: center; padding: clamp(34px, 5vw, 68px); background: var(--mg-soft); }
.mg-aspect-condition { display: flex; width: 100%; align-items: baseline; justify-content: space-between; margin-bottom: 28px; gap: 18px; }
.mg-aspect-condition span { color: var(--mg-input); font-size: 9px; font-weight: 800; letter-spacing: .13em; }.mg-aspect-condition strong { color: var(--mg-ink); font-size: 12px; }
.mg-aspect-outline { position: relative; display: block; width: auto; max-width: none; height: clamp(88px, 15vw, 220px); max-height: none; flex: none; overflow: hidden; border: 8px solid #15191d; border-radius: 5px; background: #fff; transition: aspect-ratio .55s var(--mg-ease); }
.mg-layout-toolbar { display: flex; height: 11%; align-items: center; padding: 0 4%; gap: 5px; border-bottom: 1px solid var(--mg-line); background: #f6f7f7; }.mg-layout-toolbar i { width: 6px; height: 6px; border-radius: 50%; background: #c5cace; }
.mg-layout-windows { display: grid; height: 78%; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 3%; gap: 3%; }.mg-layout-windows i { border: 1px solid #cfd5d8; background: linear-gradient(145deg, #e5f1f6, #fff); }.mg-layout-windows i:nth-child(3) { display: none; }
.mg-aspect-stage[data-active-aspect="16-10"] .mg-layout-windows { grid-template-columns: repeat(2, 1fr); }
.mg-aspect-stage[data-active-aspect="21-9"] .mg-layout-windows,.mg-aspect-stage[data-active-aspect="32-9"] .mg-layout-windows { grid-template-columns: repeat(3, 1fr); }.mg-aspect-stage[data-active-aspect="21-9"] .mg-layout-windows i:nth-child(3),.mg-aspect-stage[data-active-aspect="32-9"] .mg-layout-windows i:nth-child(3) { display: block; }
.mg-aspect-label { position: absolute; right: 12px; bottom: 10px; display: flex; align-items: baseline; gap: 8px; color: var(--mg-ink); }.mg-aspect-label span { font-size: 22px; font-weight: 800; }.mg-aspect-label small { font-size: 9px; }
.mg-aspect-reading { width: 100%; margin-top: 26px; }.mg-aspect-reading > div { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }.mg-aspect-reading span { color: var(--mg-result); font-size: 9px; font-weight: 800; letter-spacing: .12em; }.mg-aspect-reading strong { color: var(--mg-ink); font-size: 14px; }.mg-aspect-reading p { margin: 8px 0 0; color: var(--mg-muted); font-size: 11px; line-height: 1.7; }
.mg-aspect-side-notes { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--mg-line); }
.mg-aspect-side-notes article { min-width: 0; padding: clamp(24px, 3vw, 38px); border-right: 1px solid var(--mg-line); }.mg-aspect-side-notes article:last-child { border-right: 0; }.mg-aspect-side-notes article > span { color: var(--mg-input); font-size: 9px; font-weight: 800; letter-spacing: .1em; }.mg-aspect-side-notes strong { display: block; margin-top: 15px; color: var(--mg-ink); font-size: 17px; line-height: 1.45; }.mg-aspect-side-notes p { margin: 12px 0 0; color: var(--mg-muted); font-size: 11px; line-height: 1.7; }
.mg-video-bars { display: grid; height: 74px; grid-template-columns: .32fr 1fr .32fr; margin-top: 18px; border: 1px solid #222; background: #111; }.mg-video-bars i { background: #111; }.mg-video-bars b { display: grid; place-items: center; background: linear-gradient(135deg, #c8e1ea, #f2f6f7); color: var(--mg-input); font-size: 11px; }
.mg-curve-demo { display: block; width: 100%; height: 92px; margin-top: 18px; overflow: visible; }.mg-curve-demo path { fill: none; stroke-width: 3; }.mg-curve-demo .mg-curve-1800 { stroke: var(--mg-process); }.mg-curve-demo .mg-curve-1000 { stroke: var(--mg-caution); }.mg-curve-demo text { fill: var(--mg-muted); font-size: 9px; font-weight: 800; text-anchor: middle; }
.mg-aspect-lab > .mg-buy-field { grid-column: 1 / -1; }

/* Resolution, density and scaling */
.mg-ppi-lab { grid-template-columns: minmax(240px, .6fr) minmax(230px, .55fr) minmax(320px, 1fr); }
.mg-ppi-controls,.mg-ppi-output { min-height: 330px; }
.mg-density-visual { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 74px; padding: clamp(26px, 3vw, 42px); background: #101317; }
.mg-density-sample > span { color: #9ba4aa; font-size: 9px; font-weight: 800; letter-spacing: .12em; }.mg-density-sample > p { margin: 18px 0 0; color: #9ba4aa; font-size: 10px; line-height: 1.6; }
.mg-pixel-letter { display: grid; width: min(100%, 310px); aspect-ratio: 1.35; place-items: center; margin-top: 22px; overflow: hidden; border: 1px solid #444c52; background-color: #0b0e10; background-image: linear-gradient(#333a40 1px, transparent 1px), linear-gradient(90deg, #333a40 1px, transparent 1px); background-size: var(--mg-pixel-density, 12px) var(--mg-pixel-density, 12px); }.mg-pixel-letter b { color: #fff; font-family: ui-monospace, monospace; font-size: clamp(74px, 8vw, 128px); line-height: 1; opacity: .92; }
.mg-density-visual[data-density-band="low"] .mg-pixel-letter { --mg-pixel-density: 20px; }.mg-density-visual[data-density-band="medium"] .mg-pixel-letter { --mg-pixel-density: 12px; }.mg-density-visual[data-density-band="high"] .mg-pixel-letter { --mg-pixel-density: 7px; }
.mg-density-scale { position: relative; display: flex; align-items: center; flex-direction: column; padding-left: 18px; gap: 8px; border-left: 1px solid #343a40; }.mg-density-scale > span { color: #8f989e; font-size: 8px; writing-mode: vertical-rl; }.mg-density-scale i { width: 7px; flex: 1; border-radius: 99px; background: linear-gradient(var(--mg-caution), var(--mg-result)); }.mg-density-scale i:nth-of-type(n+2) { display: none; }.mg-density-scale strong { color: #fff; font-size: 9px; line-height: 1.35; text-align: center; }
.mg-resolution-visuals { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--mg-line); }
.mg-resolution-visuals > article { min-width: 0; padding: clamp(28px, 4vw, 48px); }.mg-resolution-visuals > article:first-child { border-right: 1px solid var(--mg-line); }
.mg-resolution-visuals h3 { margin: 0 0 26px; font-size: clamp(24px, 2.4vw, 34px); }
.mg-pixel-load > div { display: grid; grid-template-columns: 58px minmax(0, 1fr) 110px; align-items: center; margin-top: 13px; gap: 12px; }.mg-pixel-load > div span,.mg-pixel-load > div b { color: var(--mg-muted); font-size: 10px; }.mg-pixel-load > div b { text-align: right; }.mg-pixel-load > div i { height: 12px; border-radius: 99px; background: linear-gradient(90deg, var(--mg-input) 0 var(--load), #e1e5e6 var(--load)); }
.mg-scaling-demo > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }.mg-scaling-demo figure { margin: 0; }.mg-scaling-demo figure > span { color: var(--mg-muted); font-size: 9px; }.mg-ui-sample { display: grid; height: 112px; grid-template-columns: repeat(2, 1fr); margin-top: 8px; padding: 8px; gap: 5px; border: 1px solid var(--mg-line); background: #f5f7f8; }.mg-ui-sample i { border: 1px solid #cbd4d7; background: #fff; }.mg-ui-sample--150 { grid-template-columns: 1fr 1fr; }.mg-ui-sample--150 i:nth-child(3) { grid-column: 1 / -1; }.mg-ui-sample--200 { grid-template-columns: 1fr; }.mg-scaling-demo small { display: block; margin-top: 16px; color: var(--mg-muted); font-size: 10px; line-height: 1.7; }
.mg-ppi-lab > .mg-buy-field { grid-column: 1 / -1; }

/* Motion: keep fps, Hz, response and latency on separate timelines */
.mg-motion-stage { display: block; min-height: 0; padding: clamp(28px, 4vw, 52px); }
.mg-motion-stage-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }.mg-motion-stage-head > div:first-child { display: grid; gap: 5px; }.mg-motion-stage-head span { color: #909ba2; font-size: 9px; font-weight: 800; letter-spacing: .12em; }.mg-motion-stage-head strong { color: #fff; font-size: 19px; }.mg-motion-value { position: static; display: flex; align-items: baseline; gap: 8px; }.mg-motion-value strong { color: #fff; font-size: clamp(38px, 4vw, 58px); }.mg-motion-value span { color: #89939a; font-size: 9px; }
.mg-frame-strip { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); margin-top: 30px; gap: 4px; }.mg-frame-strip > i { position: relative; display: block; min-width: 0; aspect-ratio: 1 / 1.3; overflow: hidden; border: 1px solid #414a50; background: #0b0e10; opacity: 1; transition: opacity .25s ease, transform .35s var(--mg-ease); }.mg-frame-strip > i::before { position: absolute; right: 0; bottom: 21%; left: 0; height: 1px; background: #394148; content: ""; }.mg-frame-strip b { position: absolute; bottom: 25%; left: 50%; width: clamp(4px,.7vw,10px); height: clamp(4px,.7vw,10px); border-radius: 50%; background: var(--mg-orange); box-shadow: 0 0 10px rgba(195,91,45,.28); transform: translateX(-50%); }
.mg-motion-stage[data-active-hz="60"] .mg-frame-strip i:nth-child(n+4),.mg-motion-stage[data-active-hz="120"] .mg-frame-strip i:nth-child(n+7),.mg-motion-stage[data-active-hz="144"] .mg-frame-strip i:nth-child(n+8),.mg-motion-stage[data-active-hz="240"] .mg-frame-strip i:nth-child(n+13) { display: none; }
.mg-motion-stage > p { display: flex; align-items: baseline; justify-content: space-between; margin: 24px 0 0; gap: 24px; }.mg-motion-stage > p b { color: #fff; font-size: 13px; }.mg-motion-stage > p span { max-width: 540px; color: #929ca3; font-size: 10px; line-height: 1.6; }
.mg-motion-timelines { display: grid; border-top: 1px solid #343a40; }.mg-time-row { display: grid; grid-template-columns: 118px 245px minmax(260px, 1fr) minmax(240px, .8fr); align-items: center; min-height: 132px; padding: 22px clamp(24px, 3.5vw, 48px); gap: 20px; border-bottom: 1px solid #343a40; }.mg-time-row > span { font-size: 9px; font-weight: 800; letter-spacing: .12em; }.mg-time-row h3 { margin: 0; color: #fff !important; font-size: 19px; letter-spacing: -.03em; }.mg-time-row > p { margin: 0; color: #a1abb2; font-size: 10px; line-height: 1.65; }.mg-time-row--input > span{color:var(--mg-input)}.mg-time-row--process > span{color:#9b87e6}.mg-time-row--caution > span{color:#e08356}.mg-time-row--result > span{color:#65cbb9}
.mg-time-row > div:not(.mg-response-curve):not(.mg-latency-chain) { display: flex; align-items: flex-end; height: 42px; gap: 8px; }.mg-time-row > div:not(.mg-response-curve):not(.mg-latency-chain) i { width: 2px; height: 70%; background: currentColor; }.mg-time-row--input > div { color: var(--mg-input); }.mg-time-row--process > div { color: #9b87e6; }.mg-time-row--input > div i:nth-child(even),.mg-time-row--process > div i:nth-child(3n) { height: 100%; }
.mg-response-curve { position: relative; height: 58px; border-bottom: 1px solid #5b646b; }.mg-response-curve::before { position: absolute; top: 12px; right: 0; left: 0; border-top: 1px dashed #7b858d; content: ""; }.mg-response-curve i { position: absolute; top: 28px; left: 0; width: 82%; height: 28px; border-top: 3px solid var(--mg-caution); border-radius: 50% 50% 0 0; transform: rotate(-11deg); }.mg-response-curve b { position: absolute; top: 0; right: 0; color: #929ca3; font-size: 8px; }
.mg-latency-chain { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }.mg-latency-chain i { padding: 10px 4px; border-right: 1px solid #445058; background: rgba(101,203,185,.08); color: #b7c3c8; font-size: 8px; font-style: normal; text-align: center; }
.mg-vrr-visual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid #343a40; }.mg-vrr-visual > div { padding: clamp(26px, 3vw, 40px); }.mg-vrr-visual > div:first-child { border-right: 1px solid #343a40; }.mg-vrr-visual span { color: #fff; font-size: 13px; font-weight: 760; }.mg-vrr-visual > div > p { margin: 12px 0 0; color: #929ca3; font-size: 10px; }.mg-vrr-fixed,.mg-vrr-variable { display: flex; height: 66px; align-items: stretch; margin-top: 18px; border-bottom: 1px solid #465159; }.mg-vrr-fixed i,.mg-vrr-variable i { width: 2px; margin-right: 18%; background: #9b87e6; }.mg-vrr-variable i:nth-child(2){margin-right:10%}.mg-vrr-variable i:nth-child(3){margin-right:24%}.mg-vrr-variable i:nth-child(4){margin-right:14%}
.mg-motion-lab > .mg-buy-field { margin: 0; }

/* Panel/backlight: an explicit classification and labeled cross-section */
.mg-family-tree { grid-template-columns: 240px minmax(0, 1fr); gap: 0; border: 1px solid var(--mg-line); }
.mg-family-root { display: flex; min-height: 390px; align-items: flex-start; justify-content: center; flex-direction: column; padding: 38px; gap: 18px; writing-mode: horizontal-tb; }.mg-family-root span { color: #9ea7ad; font-size: 9px; font-weight: 800; letter-spacing: .14em; }.mg-family-root strong { color: #fff; font-size: 28px; line-height: 1.25; }
.mg-family-tree > .mg-family-branch { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: #fff; }.mg-family-tree > .mg-family-branch article { display: flex; min-height: 390px; flex-direction: column; border-left: 1px solid var(--mg-line); }.mg-family-tree > .mg-family-branch article > strong { margin-top: 22px; font-size: clamp(23px, 2vw, 31px); }.mg-family-tree > .mg-family-branch article > div { display: flex; align-items: center; margin-top: auto; gap: 13px; }.mg-family-tree > .mg-family-branch article dl { display: grid; flex: 1; margin: 25px 0 0; gap: 1px; background: var(--mg-line); }.mg-family-tree > .mg-family-branch article dt,.mg-family-tree > .mg-family-branch article dd { margin: 0; padding: 9px 10px; background: #fff; font-size: 9px; text-align: center; }.mg-family-tree > .mg-family-branch article dt { color: var(--mg-muted); }.mg-family-tree > .mg-family-branch article dd { color: var(--mg-ink); font-weight: 750; }.mg-family-tree > .mg-family-branch article > div > b { color: var(--mg-caution); font-size: 22px; }.mg-family-tree > .mg-family-branch article > small { margin-top: 18px; }
.mg-light-lab { grid-template-columns: minmax(0, 1fr) minmax(270px, .42fr); }
.mg-light-stage { display: block; min-height: 620px; padding: clamp(30px, 4vw, 54px); }
.mg-light-cross-section { display: grid; grid-template-columns: 1.1fr .55fr 1fr .75fr .55fr; min-height: 250px; border: 1px solid var(--mg-line); background: #fff; }.mg-light-cross-section > div { position: relative; display: grid; place-items: center; padding: 15px; border-right: 1px solid var(--mg-line); transition: opacity .35s ease, transform .5s var(--mg-ease); }.mg-light-cross-section > div:last-child { border-right: 0; }.mg-light-cross-section span { color: var(--mg-ink); font-size: 9px; font-weight: 760; writing-mode: vertical-rl; }.mg-layer-source { grid-template-columns: repeat(4, 1fr); gap: 3px; background: #11161a; }.mg-layer-source span { position: absolute; top: 12px; left: 10px; color: #fff; writing-mode: horizontal-tb; }.mg-layer-source i { width: 100%; height: 38px; border-radius: 3px; background: #ffd278; box-shadow: 0 0 16px rgba(255,210,120,.42); }.mg-layer-diffuser { background: linear-gradient(90deg,#e1e6e8,#fff,#e1e6e8); }.mg-layer-liquid { background: repeating-linear-gradient(90deg,#dbe9f0 0 6px,#bdced7 6px 9px); }.mg-layer-color { grid-template-columns: repeat(3,1fr); gap: 1px; }.mg-layer-color span { position: absolute; top: 12px; left: 10px; writing-mode: horizontal-tb; }.mg-layer-color i:nth-of-type(3n+1){background:#ec6671}.mg-layer-color i:nth-of-type(3n+2){background:#58b77b}.mg-layer-color i:nth-of-type(3n){background:#5279db}.mg-layer-color i { width: 100%; height: 80px; opacity: .7; }.mg-layer-eye::before { width: 28px; height: 16px; border: 2px solid var(--mg-result); border-radius: 50%; content: ""; }
.mg-light-stage[data-light-stage="mini"] .mg-layer-source { grid-template-columns: repeat(8,1fr); }.mg-light-stage[data-light-stage="mini"] .mg-layer-source i { height: 18px; box-shadow: 0 0 8px rgba(255,210,120,.35); }.mg-light-stage[data-light-stage="oled"] .mg-layer-source,.mg-light-stage[data-light-stage="oled"] .mg-layer-diffuser,.mg-light-stage[data-light-stage="oled"] .mg-layer-liquid { display: none; }.mg-light-stage[data-light-stage="oled"] .mg-light-cross-section { grid-template-columns: 1fr .28fr; }.mg-light-stage[data-light-stage="oled"] .mg-layer-color { grid-template-columns: repeat(6,1fr); background:#111; }.mg-light-stage[data-light-stage="oled"] .mg-layer-color i { height: 110px; opacity: 1; box-shadow: 0 0 12px currentColor; }
.mg-bloom-compare { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: 24px; border: 1px solid var(--mg-line); }.mg-bloom-compare figure { margin: 0; padding: 18px; border-right: 1px solid var(--mg-line); background: #fff; }.mg-bloom-compare figure:last-child { border-right: 0; }.mg-bloom-compare figure > span { color: var(--mg-muted); font-size: 9px; }.mg-bloom-compare figure > div { display: grid; aspect-ratio: 16/8; place-items: center; margin-top: 10px; background: #050607; }.mg-bloom-compare figure i { width: 12px; height: 12px; border-radius: 50%; background: #fff; }.mg-bloom-lcd i { box-shadow: 0 0 35px 18px rgba(255,255,255,.34); }.mg-bloom-mini i { box-shadow: 0 0 17px 7px rgba(255,255,255,.22); }.mg-bloom-oled i { box-shadow: 0 0 3px rgba(255,255,255,.5); }.mg-bloom-compare small { display: block; margin-top: 9px; color: var(--mg-muted); font-size: 8px; }
.mg-light-stage > p { position: static; margin: 24px 0 0; color: var(--mg-muted); font-size: 11px; text-align: left; }
.mg-light-lab > .mg-buy-field { grid-column: 1 / -1; }

/* HDR: scene range, luminance area, dimming zones and tone mapping */
.mg-visual-title > span { color: var(--mg-result); font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.mg-visual-title h3 { margin: 14px 0 0; color: var(--mg-ink); font-size: clamp(23px, 2.25vw, 34px); line-height: 1.3; }
.mg-hdr-visuals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(var(--mg-layout), 100%); margin: clamp(58px, 7vw, 92px) auto 0; border-top: 1px solid var(--mg-line); border-left: 1px solid var(--mg-line); }
.mg-hdr-visuals > article { min-width: 0; padding: clamp(28px, 3.8vw, 50px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; }
.mg-hdr-visuals > article > p,.mg-hdr-visuals > article > small { display: block; margin: 18px 0 0; color: var(--mg-muted); font-size: 10px; line-height: 1.7; }
.mg-scene-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 28px; gap: 12px; }
.mg-scene-pair figure { min-width: 0; margin: 0; }
.mg-scene-pair figcaption { margin-bottom: 8px; color: var(--mg-muted); font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.mg-scene-pair figure > div { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--mg-line); background: #111820; }
.mg-scene-sky { position: absolute; inset: 0 0 38%; background: linear-gradient(#163752, #d6855c); }
.mg-scene-sun { position: absolute; top: 18%; right: 16%; width: 16%; aspect-ratio: 1; border-radius: 50%; background: #fff4a0; box-shadow: 0 0 22px #ffdb72; }
.mg-scene-city { position: absolute; inset: 58% 0 0; background: repeating-linear-gradient(90deg, #15191e 0 12%, #252a2f 12% 20%); clip-path: polygon(0 20%,8% 20%,8% 2%,20% 2%,20% 34%,31% 34%,31% 14%,44% 14%,44% 26%,58% 26%,58% 0,70% 0,70% 38%,81% 38%,81% 18%,92% 18%,92% 32%,100% 32%,100% 100%,0 100%); }
.mg-scene-sdr > div { filter: saturate(.72) contrast(.82); }
.mg-scene-sdr .mg-scene-sun { background: #fff; box-shadow: 0 0 28px 13px rgba(255,255,255,.78); }
.mg-scene-sdr .mg-scene-city { background: #050607; }
.mg-scene-hdr > div { box-shadow: inset 0 0 0 2px rgba(8,125,110,.26); }
.mg-scene-pair figure > p { min-height: 3.2em; margin: 9px 0 0; color: var(--mg-muted); font-size: 9px; line-height: 1.6; }
.mg-area-bars { display: grid; margin-top: 30px; gap: 16px; }
.mg-area-bars > div { display: grid; grid-template-columns: 58px minmax(0, 1fr) 54px; align-items: center; gap: 12px; }
.mg-area-bars span,.mg-area-bars b { color: var(--mg-muted); font-size: 9px; font-weight: 700; }
.mg-area-bars b { text-align: right; }
.mg-area-bars i { height: 18px; border: 1px solid #d7dcde; background: linear-gradient(90deg, var(--mg-result) 0 var(--level), #eef1f2 var(--level)); }
.mg-dimming-visual > div:nth-of-type(2) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; gap: 10px; }
.mg-dimming-visual figure { min-width: 0; margin: 0; }
.mg-dimming-visual figcaption { margin-bottom: 8px; color: var(--mg-muted); font-size: 8px; text-align: center; }
.mg-dimming-visual figure > div { display: grid; aspect-ratio: 1.25; place-items: center; border: 1px solid #293035; background-color: #050607; background-image: linear-gradient(#21272b 1px, transparent 1px),linear-gradient(90deg,#21272b 1px,transparent 1px); background-size: 50% 50%; }
.mg-dimming-visual i { width: 11px; height: 11px; border-radius: 50%; background: #fff; }
.mg-zone-led i { box-shadow: 0 0 32px 18px rgba(255,255,255,.4); }
.mg-zone-mini > div { background-size: 20% 20% !important; }.mg-zone-mini i { box-shadow: 0 0 15px 6px rgba(255,255,255,.28); }
.mg-zone-oled > div { background-image: none !important; }.mg-zone-oled i { box-shadow: 0 0 3px rgba(255,255,255,.55); }
.mg-tone-visual svg { display: block; width: 100%; height: auto; margin-top: 22px; }
.mg-tone-visual svg line { stroke: #aeb6ba; stroke-width: 1; }.mg-tone-visual svg path { fill: none; stroke-width: 3; }.mg-tone-source { stroke: var(--mg-input); }.mg-tone-output { stroke: var(--mg-process); }.mg-tone-visual .mg-tone-limit { stroke: var(--mg-caution); stroke-dasharray: 7 6; }.mg-tone-visual text { fill: var(--mg-muted); font-size: 11px; }
.mg-format-guide .mg-format-columns { grid-template-columns: minmax(0, 1fr) 66px minmax(0, 1fr); border-left: 0; }
.mg-format-columns > section { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; border: 1px solid #343a40; }
.mg-format-columns > section > span,.mg-format-columns > section > h4 { grid-column: 1 / -1; padding-right: clamp(22px, 3vw, 38px); padding-left: clamp(22px, 3vw, 38px); }
.mg-format-columns > section > span { padding-top: 28px; color: #65cbb9; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.mg-format-columns > section > h4 { margin: 10px 0 24px; color: #fff; font-size: clamp(20px, 2vw, 29px); }
.mg-format-columns > section > article { padding: 20px; border-top: 1px solid #343a40; border-right: 1px solid #343a40; border-bottom: 0; }
.mg-format-columns > section > article:last-child { border-right: 0; }
.mg-format-columns > section article strong { font-size: 15px; }.mg-format-columns > section article p { margin-top: 9px; font-size: 9px; }
.mg-format-columns > b { display: grid; place-items: center; color: #e08356; font-size: 34px; }
.mg-color-map { display: grid; align-content: center; justify-items: center; min-height: 600px; padding: clamp(26px, 4vw, 50px); }
.mg-color-map svg { display: block; width: min(100%, 520px); height: auto; }
.mg-color-map svg .mg-cie-shape { fill: url(#mg-spectrum); opacity: .72; stroke: rgba(255,255,255,.42); stroke-width: 1; }
.mg-color-map svg polygon { fill: none; stroke-width: 3; }.mg-color-map svg .mg-gamut-2020 { stroke: #55aaf0; }.mg-color-map svg .mg-gamut-p3 { stroke: #ed6974; }.mg-color-map svg .mg-gamut-srgb { stroke: #65d19a; }
.mg-color-map svg line { stroke: #69747b; stroke-width: 1; }.mg-color-map svg text { fill: #fff; font-size: 12px; font-weight: 760; paint-order: stroke; stroke: #101317; stroke-width: 3px; }
.mg-color-map > small { width: min(100%, 520px); margin-top: 16px; color: #929ca3; font-size: 9px; line-height: 1.7; }

/* Connections: expose every possible bottleneck instead of hiding it in a port label */
.mg-connection .mg-connection-lab { grid-template-columns: 220px minmax(0, 1fr); }
.mg-signal-route { grid-template-columns: minmax(104px, 1fr) 22px minmax(104px, 1fr) 22px minmax(104px, 1fr) 22px minmax(104px, 1fr) 22px minmax(104px, 1fr); }
.mg-signal-route > div { padding: clamp(24px, 2.3vw, 36px); }.mg-signal-route > i { font-size: 11px; }
.mg-signal-route strong { margin-top: 23px; font-size: clamp(17px, 1.5vw, 24px); }.mg-signal-route small { font-size: 9px; }
.mg-signal-route .mg-route-result { background: rgba(101,203,185,.08); }.mg-signal-route .mg-route-result span { color: #65cbb9; }
.mg-connection-lab > p { grid-column: 2; }
.mg-usbc-triad,.mg-link-lanes,.mg-connection-lab > .mg-buy-field { grid-column: 1 / -1; }
.mg-usbc-triad { display: grid; grid-template-columns: minmax(180px,.7fr) repeat(3,minmax(0,1fr)); border-top: 1px solid #343a40; }
.mg-usbc-triad > span,.mg-usbc-triad > div { display: grid; min-height: 115px; align-content: center; padding: 22px 28px; border-right: 1px solid #343a40; }
.mg-usbc-triad > div:last-child { border-right: 0; }.mg-usbc-triad > span { color: #e08356; font-size: 11px; font-weight: 800; }.mg-usbc-triad b { color: #fff; font-size: 17px; }.mg-usbc-triad small { margin-top: 7px; color: #939da4; font-size: 9px; }
.mg-link-lanes { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid #343a40; }
.mg-link-lanes article { display: flex; min-width: 0; min-height: 180px; flex-direction: column; padding: 25px; border-right: 1px solid #343a40; }.mg-link-lanes article:last-child { border-right: 0; }
.mg-link-lanes span { color: #65cbb9; font-size: 9px; font-weight: 800; letter-spacing: .1em; }.mg-link-lanes i { display: block; height: 7px; margin: 24px 0 20px; border-radius: 99px; background: linear-gradient(90deg,#0879a8 0 35%,#6550a5 35% 68%,#087d6e 68%); }.mg-link-lanes b { color: #fff; font-size: 13px; }.mg-link-lanes small { margin-top: 8px; color: #909aa1; font-size: 9px; line-height: 1.6; }

/* Current product cards: role -> reason -> four key specs -> one caution -> stable URL */
.mg-product-grid--current { grid-template-columns: repeat(3,minmax(0,1fr)); }
.mg-product-grid--current .mg-product { min-height: 590px; padding: clamp(26px,3vw,42px); }
.mg-product-role { margin: 0 0 14px !important; color: var(--mg-accent) !important; font-size: 9px !important; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.mg-product-grid--current .mg-product-meta { margin-bottom: 28px; }
.mg-product-grid--current .mg-product h3 { min-height: 2.4em; }
.mg-product-reason { color: var(--mg-ink) !important; font-size: 12px !important; }
.mg-product-caution { margin-top: auto !important; padding: 14px 15px; border-left: 3px solid var(--mg-caution); background: #faf2ee; color: #6a554a !important; font-size: 10px !important; line-height: 1.65 !important; }.mg-product-caution b { margin-right: 8px; color: var(--mg-caution); font-size: 9px; }
.mg-product-grid--current .mg-product-link { display: flex; width: 100%; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--mg-line); text-decoration: none; }.mg-product-grid--current .mg-product-link span { font-size: 15px; }
.mg-product-verified { display: block; margin-top: 9px; color: var(--mg-faint); font-size: 8px; letter-spacing: .06em; }

/* Glossary starts with the six confusions that cause the most wrong purchases */
.mg-confusion-strip { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: min(var(--mg-layout),100%); margin: 0 auto clamp(46px,6vw,70px); border-top: 1px solid var(--mg-ink); border-left: 1px solid var(--mg-line); }
.mg-confusion-strip a { display: flex; min-width: 0; min-height: 180px; flex-direction: column; padding: clamp(24px,3vw,38px); border-right: 1px solid var(--mg-line); border-bottom: 1px solid var(--mg-line); background: #fff; color: var(--mg-ink) !important; text-decoration: none; transition: background .25s ease,transform .35s var(--mg-ease); }.mg-confusion-strip a:hover { z-index: 2; background: #fbfbff; transform: translateY(-3px); }
.mg-confusion-strip small { color: var(--mg-accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; }.mg-confusion-strip strong { margin-top: 23px; font-size: clamp(18px,1.8vw,26px); line-height: 1.25; }.mg-confusion-strip strong b { color: var(--mg-caution); }.mg-confusion-strip span { margin-top: auto; padding-top: 20px; color: var(--mg-muted); font-size: 10px; line-height: 1.6; }

/* The intended line breaks are authored in the copy; balance only inside each line. */
.gbds-v2-monitor-guide-shell :is(h1,h2,h3,h4,.mg-line) { text-wrap: balance; line-break: strict; }

@media (max-width: 1180px) {
  .mg-size-diagrams,.mg-resolution-visuals,.mg-hdr-visuals { grid-template-columns: 1fr; }
  .mg-size-front,.mg-resolution-visuals > article:first-child { border-right: 0; border-bottom: 1px solid var(--mg-line); }
  .mg-aspect-lab,.mg-ppi-lab,.mg-light-lab { grid-template-columns: 1fr; }
  .mg-aspect-stage,.mg-density-visual,.mg-light-stage { grid-column: 1 / -1; }
  .mg-aspect-options,.mg-ppi-controls,.mg-ppi-output,.mg-light-options { min-height: 0; }
  .mg-aspect-side-notes { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .mg-time-row { grid-template-columns: 88px 180px minmax(220px,1fr); }.mg-time-row > p { grid-column: 2 / -1; }
  .mg-family-tree { grid-template-columns: 1fr; }.mg-family-root { min-height: 160px; }.mg-family-tree > .mg-family-branch article { border-top: 1px solid var(--mg-line); }
  .mg-format-guide .mg-format-columns { grid-template-columns: 1fr; }.mg-format-columns > b { min-height: 60px; }
  .mg-connection .mg-connection-lab { grid-template-columns: 1fr; }.mg-source-options { grid-template-columns: repeat(4,minmax(0,1fr)); border-right: 0; border-bottom: 1px solid #343a40; }.mg-source-options button { min-height: 70px; border-right: 1px solid #343a40; border-bottom: 0; }.mg-connection-lab > p { grid-column: 1; }
  .mg-product-grid--current { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mg-confusion-strip { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 760px) {
  .mg-hero { min-height: 720px; padding-top: 112px; }.mg-hero h1 { font-size: clamp(42px,12vw,62px); line-height: 1.05; }.mg-hero .mg-lead { font-size: 14px; }.mg-affiliate { margin-top: 45px; }
  .mg-visual-key { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .mg-buy-field { grid-template-columns: 1fr; gap: 6px; }
  .mg-chapter > .mg-section-head h2 { font-size: clamp(37px,10vw,51px); }
  .mg-size-diagrams figure { padding: 20px; }.mg-size-front-canvas,.mg-size-top-canvas { min-height: 300px; }.mg-size-diagrams dl { grid-template-columns: 1fr; }
  .mg-aspect-stage { min-height: 440px; padding: 24px 18px; }.mg-aspect-outline { height: max(68px, calc((100vw - 88px) * 9 / 32)); }.mg-aspect-side-notes { grid-template-columns: 1fr; }.mg-aspect-side-notes article { border-right: 0; border-bottom: 1px solid var(--mg-line); }.mg-aspect-side-notes article:last-child { border-bottom: 0; }
  .mg-density-visual { grid-template-columns: 1fr; }.mg-density-scale { display: none; }.mg-resolution-visuals > article { padding: 26px 20px; }.mg-pixel-load > div { grid-template-columns: 50px minmax(0,1fr); }.mg-pixel-load > div b { grid-column: 2; text-align: left; }.mg-scaling-demo > div { grid-template-columns: 1fr; }.mg-ui-sample { height: 94px; }
  .mg-motion-stage-head,.mg-motion-stage > p { align-items: flex-start; flex-direction: column; }.mg-frame-strip { grid-template-columns: repeat(6,minmax(30px,1fr)); overflow-x: auto; }.mg-time-row { grid-template-columns: 1fr; padding: 25px 20px; }.mg-time-row > p { grid-column: auto; }.mg-time-row > div:not(.mg-response-curve):not(.mg-latency-chain) { width: 100%; }.mg-latency-chain { overflow-x: auto; }.mg-latency-chain i { min-width: 68px; }.mg-vrr-visual { grid-template-columns: 1fr; }.mg-vrr-visual > div:first-child { border-right: 0; border-bottom: 1px solid #343a40; }
  .mg-family-tree > .mg-family-branch { grid-template-columns: 1fr; }.mg-family-tree > .mg-family-branch article { min-height: 320px; border-left: 0; }.mg-light-cross-section { grid-template-columns: 1fr; }.mg-light-cross-section > div { min-height: 78px; border-right: 0; border-bottom: 1px solid var(--mg-line); }.mg-light-cross-section span,.mg-layer-source span,.mg-layer-color span { position: static; writing-mode: horizontal-tb; }.mg-light-stage[data-light-stage="oled"] .mg-light-cross-section { grid-template-columns: 1fr; }.mg-bloom-compare { grid-template-columns: 1fr; }.mg-bloom-compare figure { border-right: 0; border-bottom: 1px solid var(--mg-line); }
  .mg-scene-pair,.mg-dimming-visual > div:nth-of-type(2),.mg-hdr-grid { grid-template-columns: 1fr; }.mg-tone-visual svg { min-width: 0; }.mg-format-guide { padding: 28px 20px; }.mg-format-columns > section { grid-template-columns: 1fr; }.mg-format-columns > section > article { border-right: 0; }.mg-color-section { grid-template-columns: 1fr; }.mg-color-map { min-height: 390px; padding: 22px; }.mg-color-copy { padding: 32px 22px; }
  .mg-source-options { grid-template-columns: repeat(2,minmax(0,1fr)); }.mg-source-options button:nth-child(-n+2) { border-bottom: 1px solid #343a40; }.mg-signal-route { grid-template-columns: 1fr; }.mg-signal-route > div { border-right: 0; border-bottom: 1px solid #343a40; }.mg-signal-route > i { min-height: 32px; border-right: 0; border-bottom: 1px solid #343a40; font-size: 0; transform: none; }.mg-signal-route > i::before { color: #65cbb9; content: "↓"; font-size: 13px; }.mg-usbc-triad,.mg-link-lanes { grid-template-columns: 1fr; }.mg-usbc-triad > span,.mg-usbc-triad > div,.mg-link-lanes article { min-height: 95px; border-right: 0; border-bottom: 1px solid #343a40; }.mg-link-lanes article { min-height: 150px; }
  .mg-product-grid--current,.mg-confusion-strip { grid-template-columns: 1fr; }.mg-product-grid--current .mg-product { min-height: 0; }.mg-product-grid--current .mg-product h3 { min-height: 0; }.mg-confusion-strip a { min-height: 150px; }
}

/*
 * 2026-08-31 editorial redesign
 * Quiet reference reading, with motion reserved for explanations.
 */
.gbds-v2-monitor-guide-shell {
  --mg-ink: #0c0f12;
  --mg-text: #34393f;
  --mg-muted: #667079;
  --mg-faint: #90979d;
  --mg-line: #dfe2e4;
  --mg-line-strong: #aeb5ba;
  --mg-soft: #f5f5f2;
  --mg-accent: #087f70;
  --mg-green: #087f70;
  --mg-blue: #087f70;
  --mg-layout: 1240px;
  --mg-wide: 1460px;
  --mg-copy: 720px;
  background: #fff !important;
  font-size: 17px;
  line-height: 1.9;
}

.gbds-v2-monitor-guide-shell :is(h1, h2, h3, h4) {
  letter-spacing: -.045em;
  word-break: auto-phrase;
  overflow-wrap: normal;
}

.gbds-v2-monitor-guide-shell .mg-line {
  width: auto;
  max-width: 100%;
  text-wrap: balance;
  word-break: auto-phrase;
  overflow-wrap: normal;
}

.mg-mobile-break { display: none; }

.mg-kicker {
  margin-bottom: 20px;
  color: var(--mg-accent);
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: none;
}

.mg-button,
.mg-button:hover,
.mg-product,
.mg-product:hover,
.mg-confusion-strip a,
.mg-confusion-strip a:hover,
.mg-route-cards article,
.mg-route-cards article:hover {
  box-shadow: none !important;
  transform: none !important;
}

.mg-button {
  min-height: 50px;
  border-radius: 999px;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.mg-button:hover { background: #252a2e; }

.mg-text-link span,
.mg-text-link:hover span { transform: none; }

/* Navigation */
.mg-nav {
  min-height: 64px;
  padding-right: max(24px, calc((100vw - var(--mg-wide)) / 2));
  padding-left: max(24px, calc((100vw - var(--mg-wide)) / 2));
  border-bottom-color: rgba(12, 15, 18, .12);
  background: rgba(255, 255, 255, .94);
}

.mg-brand strong { letter-spacing: -.03em; }
.mg-brand span { color: var(--mg-accent); }
.mg-nav-links { margin-left: auto; }
.mg-nav-links a { color: #5f676e; }
.mg-nav-links a[aria-current="location"] { color: var(--mg-ink); }
.mg-nav-cta { background: var(--mg-ink); color: #fff !important; }

/* One restrained hero, no decorative object or background typography. */
.mg-hero {
  display: grid;
  min-height: min(840px, calc(100svh - 64px));
  align-content: center;
  justify-items: center;
  padding: clamp(120px, 16vh, 190px) var(--mg-gutter) clamp(88px, 12vh, 140px);
  background: #fff;
  text-align: center;
}

.mg-hero::before,
.mg-hero::after { display: none !important; }

.mg-hero-copy {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.mg-hero .mg-kicker { margin-bottom: 34px; }

.mg-hero h1 {
  margin: 0 auto;
  font-size: clamp(58px, 8vw, 124px);
  line-height: .98;
  text-align: center;
}

.mg-hero h1 .mg-line { display: block; }

.mg-hero .mg-kicker,
.mg-hero h1,
.mg-hero .mg-lead,
.mg-hero-actions {
  animation: mg-editorial-enter .72s var(--mg-ease) both;
}
.mg-hero h1 { animation-delay: .06s; }
.mg-hero .mg-lead { animation-delay: .13s; }
.mg-hero-actions { animation-delay: .19s; }

@keyframes mg-editorial-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

.mg-hero .mg-lead {
  width: min(770px, 100%);
  margin: clamp(38px, 5vw, 66px) auto 0;
  color: #525a61;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 2;
  text-align: center;
}

.mg-hero-actions {
  justify-content: center;
  margin-top: 42px;
}

.mg-affiliate {
  width: min(680px, 100%);
  margin: clamp(56px, 8vh, 90px) auto 0;
  color: #858c92;
  font-size: 10px;
  line-height: 1.75;
  text-align: center;
}

/* Shared editorial rhythm */
.mg-diagnosis,
.mg-foundations,
.mg-chapter,
.mg-routes,
.mg-models,
.mg-glossary,
.mg-checklist,
.mg-sources,
.mg-final {
  width: 100%;
  margin: 0;
  padding: clamp(110px, 12vw, 176px) var(--mg-gutter);
}

.mg-diagnosis > *,
.mg-foundations > *,
.mg-chapter > *,
.mg-routes > *,
.mg-models > *,
.mg-glossary > *,
.mg-checklist > *,
.mg-sources > *,
.mg-final > * {
  width: min(var(--mg-layout), 100%);
  margin-right: auto;
  margin-left: auto;
}

.mg-diagnosis,
.mg-routes,
.mg-glossary,
.mg-sources { background: var(--mg-soft); }

.mg-foundations,
.mg-size-section,
.mg-resolution,
.mg-panel,
.mg-hdr,
.mg-connection,
.mg-models,
.mg-checklist,
.mg-final { background: #fff; }

.mg-aspect { background: #faf9f6; }

.mg-section-head,
.mg-section-head--split {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(360px, 1fr);
  align-items: end;
  gap: clamp(44px, 8vw, 130px);
  margin-bottom: clamp(64px, 8vw, 108px);
}

.mg-section-head > :only-child { grid-column: 1 / -1; }

.mg-section-head h2,
.mg-chapter > .mg-section-head h2 {
  max-width: 11.5em;
  margin: 0;
  font-size: clamp(45px, 5.2vw, 78px);
  line-height: 1.08;
}

.mg-section-head > p,
.mg-section-head .mg-prose {
  width: min(100%, 630px);
  margin: 0;
  color: #4f575d;
  font-size: 16px;
}

.mg-section-head .mg-prose p:last-child { margin-bottom: 0; }

.mg-eyebrow {
  color: var(--mg-muted) !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
}

.mg-note,
.mg-myth {
  width: min(var(--mg-layout), 100%);
  margin: clamp(48px, 7vw, 88px) auto 0;
  padding: 28px 0 0;
  border: 0;
  border-top: 1px solid var(--mg-line);
  background: transparent;
}

.mg-note strong,
.mg-myth > span { color: var(--mg-accent); }
.mg-myth p { display: grid; gap: 6px; }
.mg-myth s { color: #8a9298; }

/* Reading entry: compact and clearly a route, not an answer generator. */
.mg-diagnosis .mg-section-head {
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .7fr);
}

.mg-finder {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  border-top: 1px solid var(--mg-ink);
  border-bottom: 1px solid var(--mg-line-strong);
  background: transparent;
}

.mg-finder-steps,
.mg-result { padding: clamp(30px, 4.2vw, 58px) 0; }
.mg-finder-steps { padding-right: clamp(30px, 5vw, 76px); }
.mg-result {
  padding-left: clamp(30px, 5vw, 76px);
  border-left: 1px solid var(--mg-line);
  background: transparent;
}

.mg-finder fieldset {
  display: grid;
  grid-template-columns: minmax(150px, .44fr) minmax(0, 1fr);
  align-items: center;
  margin: 0;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--mg-line);
}

.mg-finder fieldset:last-child { border-bottom: 0; }
.mg-finder legend { display: contents; }
.mg-finder legend span { margin-right: 10px; color: var(--mg-accent); }

.mg-choice-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.mg-choice-row button,
.mg-filter-panel button,
.mg-motion-options button,
.mg-light-options button,
.mg-source-options button,
.mg-aspect-options button,
.mg-size-controls button {
  border: 1px solid var(--mg-line-strong);
  border-radius: 999px;
  background: transparent;
  color: #4d555b;
  box-shadow: none;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.mg-choice-row button[aria-pressed="true"],
.mg-filter-panel button[aria-pressed="true"],
.mg-motion-options button[aria-pressed="true"],
.mg-light-options button[aria-pressed="true"],
.mg-source-options button[aria-pressed="true"],
.mg-aspect-options button[aria-pressed="true"],
.mg-size-controls button[aria-pressed="true"] {
  border-color: var(--mg-ink);
  background: var(--mg-ink);
  color: #fff;
}

.mg-result-label { color: var(--mg-accent); letter-spacing: .08em; }
.mg-result-size { color: var(--mg-ink); }
.mg-result dl { border-top: 1px solid var(--mg-line); }
.mg-result-actions { border-top-color: var(--mg-line); }

/* The old result panel was dark.  This edition uses a light editorial panel,
   so every inherited white label is reset explicitly. */
.mg-diagnosis .mg-result h3,
.mg-diagnosis .mg-result dd,
.mg-diagnosis .mg-result-actions a,
.mg-diagnosis .mg-result-actions button {
  color: var(--mg-ink) !important;
}

.mg-diagnosis .mg-result-announcement > p,
.mg-diagnosis .mg-result dt { color: var(--mg-muted) !important; }

/* The seven chapters form a table of contents rather than seven cards. */
.mg-foundations .mg-section-head { margin-bottom: 54px; }
.mg-chapter-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--mg-ink);
}

.mg-chapter-index a {
  display: grid;
  grid-template-columns: 52px minmax(120px, .55fr) minmax(0, 1fr);
  align-items: baseline;
  min-height: 82px;
  padding: 25px 8px 24px 0;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--mg-line);
  background: transparent;
  text-decoration: none;
}

.mg-chapter-index a:nth-child(odd) { margin-right: 30px; }
.mg-chapter-index a:nth-child(even) { margin-left: 30px; }
.mg-chapter-index span { color: var(--mg-accent); font-size: 11px; }
.mg-chapter-index strong { font-size: 18px; }
.mg-chapter-index small { color: var(--mg-muted); font-size: 12px; }

/* Explanatory stages stay precise, but no longer look like a component gallery. */
.mg-size-viewer,
.mg-aspect-lab,
.mg-ppi-lab,
.mg-light-lab,
.mg-connection-lab {
  border: 1px solid var(--mg-line-strong);
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.mg-size-diagrams,
.mg-resolution-visuals,
.mg-aspect-side-notes,
.mg-panel-cards,
.mg-hdr-grid,
.mg-port-grid,
.mg-signal-notes,
.mg-metric-grid {
  border-color: var(--mg-line);
}

.mg-size-diagrams figure,
.mg-resolution-visuals > article,
.mg-aspect-side-notes article,
.mg-panel-cards article,
.mg-hdr-grid article,
.mg-port-grid article,
.mg-signal-notes article,
.mg-metric-grid article {
  border-color: var(--mg-line);
  background: transparent;
  box-shadow: none;
}

.mg-size-facts,
.mg-resolution-scale,
.mg-explainer-grid,
.mg-panel-cards,
.mg-hdr-grid,
.mg-port-grid,
.mg-signal-notes,
.mg-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--mg-line-strong);
  border-left: 0;
}

.mg-size-facts article,
.mg-resolution-scale article,
.mg-explainer-grid article,
.mg-panel-cards article,
.mg-hdr-grid article,
.mg-port-grid article,
.mg-signal-notes article,
.mg-metric-grid article {
  min-height: 0;
  padding: clamp(30px, 4vw, 52px) 0;
  border: 0;
  border-bottom: 1px solid var(--mg-line);
}

.mg-size-facts article:nth-child(odd),
.mg-resolution-scale article:nth-child(odd),
.mg-explainer-grid article:nth-child(odd),
.mg-panel-cards article:nth-child(odd),
.mg-hdr-grid article:nth-child(odd),
.mg-port-grid article:nth-child(odd),
.mg-signal-notes article:nth-child(odd),
.mg-metric-grid article:nth-child(odd) { padding-right: clamp(24px, 4vw, 58px); }

.mg-size-facts article:nth-child(even),
.mg-resolution-scale article:nth-child(even),
.mg-explainer-grid article:nth-child(even),
.mg-panel-cards article:nth-child(even),
.mg-hdr-grid article:nth-child(even),
.mg-port-grid article:nth-child(even),
.mg-signal-notes article:nth-child(even),
.mg-metric-grid article:nth-child(even) {
  padding-left: clamp(24px, 4vw, 58px);
  border-left: 1px solid var(--mg-line);
}

.mg-compare-table-wrap {
  border-top: 1px solid var(--mg-line-strong);
  border-bottom: 1px solid var(--mg-line-strong);
  box-shadow: none;
}

.mg-compare-table th,
.mg-compare-table td { background: transparent; }

/* Keep aspect ratios inside the stage at every viewport. */
.mg-aspect-stage {
  overflow: hidden;
  min-height: 520px;
}

.mg-aspect-outline {
  width: min(100%, 820px) !important;
  height: auto !important;
  max-height: 300px;
  aspect-ratio: var(--mg-aspect-ratio, 16 / 9);
}

.mg-aspect-stage[data-active-aspect="32-9"] .mg-aspect-outline { width: min(100%, 920px) !important; }

/* Motion is the single dark showpiece. */
.mg-motion.mg-chapter--dark {
  --mg-ink: #f4f5f4;
  --mg-text: #c5cbce;
  --mg-muted: #8d979e;
  --mg-line: #343a3f;
  --mg-line-strong: #596168;
  background: #090c0f !important;
  color: var(--mg-text);
}

.mg-motion :is(h2, h3, h4) { color: #fff !important; }
.mg-motion .mg-kicker { color: #72d8c6; }
.mg-motion .mg-motion-lab {
  border: 1px solid #394147;
  background: #0d1114;
  box-shadow: none;
}

.mg-motion-stage { min-height: 510px; }
.mg-motion-stage[data-active-hz="60"] .mg-frame-strip i:nth-child(n+4),
.mg-motion-stage[data-active-hz="120"] .mg-frame-strip i:nth-child(n+7),
.mg-motion-stage[data-active-hz="144"] .mg-frame-strip i:nth-child(n+8),
.mg-motion-stage[data-active-hz="240"] .mg-frame-strip i:nth-child(n+13) {
  display: block;
  opacity: .12;
  transform: scale(.84);
}
.mg-motion-stage[data-active-hz="480"] .mg-frame-strip i { display: block; opacity: 1; transform: none; }
.mg-motion-options { border-top: 1px solid #394147; }
.mg-motion-options button { border-color: #576168; color: #aeb7bd; }
.mg-motion-options button[aria-pressed="true"] { border-color: #72d8c6; background: #72d8c6; color: #08100f; }
.mg-motion-timelines,
.mg-vrr-visual,
.mg-vrr-panel,
.mg-motion .mg-metric-grid { border-color: #394147; }
.mg-motion .mg-myth { border-top-color: #394147; }

/* Light-path and connection changes are the only animated state transitions. */
.mg-light-cross-section > div {
  transition: opacity .28s ease, transform .4s var(--mg-ease), background-color .28s ease;
}

.mg-light-stage[data-light-stage="oled"] .mg-layer-source,
.mg-light-stage[data-light-stage="oled"] .mg-layer-diffuser,
.mg-light-stage[data-light-stage="oled"] .mg-layer-liquid {
  display: grid;
  visibility: hidden;
  opacity: 0;
  transform: scaleX(.7);
}

.mg-light-stage[data-light-stage="oled"] .mg-light-cross-section {
  grid-template-columns: .01fr .01fr .01fr 1fr .28fr;
}

.mg-connection-lab { border-color: var(--mg-line-strong); }
.mg-connection .mg-connection-lab {
  border-color: var(--mg-line-strong);
  background: #fff;
}
.mg-source-options { border-color: var(--mg-line); background: #f7f7f4; }
.mg-source-options button { border-color: var(--mg-line); color: #515960; }
.mg-source-options button[aria-pressed="true"] { background: var(--mg-ink); color: #fff; }
.mg-signal-route { border-color: var(--mg-line); background: #fff; }
.mg-signal-route > div,
.mg-signal-route > i { border-color: var(--mg-line); }
.mg-signal-route strong { color: var(--mg-ink); }
.mg-signal-route small { color: var(--mg-muted); }
.mg-signal-route .mg-route-result { background: #eef8f5; }
.mg-usbc-triad,
.mg-link-lanes { border-color: var(--mg-line); }
.mg-usbc-triad > span,
.mg-usbc-triad > div,
.mg-link-lanes article { border-color: var(--mg-line); }
.mg-usbc-triad b,
.mg-link-lanes b { color: var(--mg-ink); }
.mg-usbc-triad small,
.mg-link-lanes small { color: var(--mg-muted); }

.mg-connection .mg-connection-lab > p {
  border-top-color: var(--mg-line);
  color: var(--mg-muted);
}

.mg-connection .mg-port-grid { border-color: var(--mg-line-strong); }
.mg-connection .mg-port-grid article {
  border-color: var(--mg-line);
  background: transparent;
}
.mg-connection .mg-port-grid h3,
.mg-signal-notes strong,
.mg-bandwidth-check h3 { color: var(--mg-ink) !important; }
.mg-connection .mg-port-grid article > p:last-of-type,
.mg-connection .mg-port-grid li,
.mg-signal-notes p,
.mg-bandwidth-check li { color: var(--mg-muted); }
.mg-signal-notes,
.mg-signal-notes article,
.mg-bandwidth-check,
.mg-bandwidth-check ol,
.mg-bandwidth-check li { border-color: var(--mg-line); }
.mg-bandwidth-check { background: #f7f7f4; }

/* Use cases are six editorial rows, not six sales cards. */
.mg-route-cards {
  display: block;
  border-top: 1px solid var(--mg-ink);
}

.mg-route-cards article {
  display: grid;
  grid-template-columns: 120px minmax(180px, .65fr) minmax(260px, 1.15fr) minmax(260px, .8fr) auto;
  align-items: center;
  min-height: 150px;
  padding: 30px 0;
  gap: clamp(18px, 3vw, 48px);
  border: 0;
  border-bottom: 1px solid var(--mg-line);
  background: transparent;
}

.mg-route-cards article > span { margin: 0; color: var(--mg-accent); font-size: 10px; }
.mg-route-cards article h3 { margin: 0; font-size: clamp(25px, 2.3vw, 34px); }
.mg-route-cards article > p { margin: 0; color: var(--mg-muted); font-size: 13px; }
.mg-route-cards article dl { margin: 0; }
.mg-route-cards article button {
  min-width: 148px;
  border: 0;
  border-bottom: 1px solid var(--mg-ink);
  border-radius: 0;
  background: transparent;
  color: var(--mg-ink);
  box-shadow: none;
}

/* Twenty-one products become a comparison list. */
.mg-product-explorer { background: transparent; }
.mg-filter-panel {
  position: relative;
  top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  align-items: end;
  padding: 24px 0 30px;
  gap: 24px;
  border: 0;
  border-top: 1px solid var(--mg-ink);
  border-bottom: 1px solid var(--mg-line);
  background: #fff;
  box-shadow: none;
}

.mg-filter-panel fieldset { min-width: 0; }
.mg-filter-panel fieldset > div { gap: 5px; }
.mg-filter-panel button { min-height: 32px; padding: 5px 11px; font-size: 10px; }
.mg-product-count { align-self: center; white-space: nowrap; }

.mg-product-grid--current {
  display: block;
  counter-reset: mg-product;
  border-top: 0;
}

.mg-product-grid--current .mg-product {
  display: grid;
  grid-template-columns: 52px minmax(145px, .52fr) minmax(210px, .86fr) minmax(270px, 1.2fr) minmax(180px, .78fr);
  grid-template-areas:
    "num role title reason specs"
    "num meta title caution action";
  align-items: start;
  min-height: 0;
  padding: 34px 0 36px;
  gap: 8px clamp(18px, 2.6vw, 42px);
  border: 0;
  border-bottom: 1px solid var(--mg-line);
  background: transparent;
  counter-increment: mg-product;
}

.mg-product-grid--current .mg-product::before {
  grid-area: num;
  color: var(--mg-faint);
  font-size: 11px;
  content: counter(mg-product, decimal-leading-zero);
}

.mg-product-role { grid-area: role; margin: 0 !important; color: var(--mg-accent) !important; text-transform: none; }
.mg-product-grid--current .mg-product-meta { grid-area: meta; margin: 0; }
.mg-product-grid--current .mg-product h3 {
  grid-area: title;
  min-height: 0;
  margin: 0;
  font-size: clamp(22px, 2.1vw, 31px);
  line-height: 1.18;
}

.mg-product-reason { grid-area: reason; margin: 0 !important; color: #4b5359 !important; font-size: 12px !important; }
.mg-product-grid--current .mg-product ul {
  grid-area: specs;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: start;
  margin: 0;
  padding: 0;
  gap: 6px 14px;
  list-style: none;
}

.mg-product-grid--current .mg-product li {
  padding: 0;
  color: #4f575d;
  font-size: 10px;
}

.mg-product-grid--current .mg-product li::before { color: var(--mg-accent); content: "— "; }
.mg-product-caution {
  grid-area: caution;
  margin: 0 !important;
  padding: 0;
  border: 0;
  background: transparent;
  color: #757d83 !important;
  font-size: 9px !important;
}

.mg-product-caution b { color: #9c4c29; }
.mg-product-grid--current .mg-product-link {
  grid-area: action;
  align-self: end;
  margin: 0;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid var(--mg-ink);
  font-size: 11px;
}

.mg-product-verified { display: none; }

/* A searchable dictionary, not fifty-two identical cards. */
.mg-confusion-strip {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 0;
  border-top: 1px solid var(--mg-ink);
}

.mg-confusion-strip a {
  display: grid;
  grid-template-columns: 70px minmax(150px, .7fr) minmax(0, 1fr);
  align-items: center;
  min-height: 86px;
  padding: 20px 0;
  gap: 16px;
  border: 0;
  border-bottom: 1px solid var(--mg-line);
  background: transparent;
}

.mg-confusion-strip a:nth-child(odd) { margin-right: 30px; }
.mg-confusion-strip a:nth-child(even) { margin-left: 30px; }
.mg-confusion-strip small,
.mg-confusion-strip strong,
.mg-confusion-strip span { margin: 0; padding: 0; }
.mg-confusion-strip strong { font-size: 16px; }
.mg-confusion-strip span { font-size: 10px; }

.mg-glossary-tool {
  position: sticky;
  z-index: 4;
  top: 64px;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--mg-line-strong);
  background: rgba(245, 245, 242, .95);
  backdrop-filter: blur(18px);
}

.mg-glossary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 0;
  border-top: 1px solid var(--mg-ink);
  background: transparent;
}

.mg-glossary-grid article {
  display: grid;
  grid-template-columns: minmax(125px, .44fr) minmax(0, 1fr);
  min-height: 116px;
  align-content: start;
  padding: 28px 0;
  gap: 20px;
  border: 0;
  border-bottom: 1px solid var(--mg-line);
  background: transparent;
  box-shadow: none;
}

.mg-glossary-grid article:nth-child(odd) { margin-right: 30px; }
.mg-glossary-grid article:nth-child(even) { margin-left: 30px; }
.mg-glossary-grid h3 { margin: 0; font-size: 17px; }
.mg-glossary-grid p { margin: 0; color: #596168; font-size: 11px; }

/* Purchase checks and sources become quiet reference sections. */
.mg-checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 0;
  border-top: 1px solid var(--mg-ink);
}

.mg-checklist-grid li {
  display: grid;
  grid-template-columns: 46px minmax(140px, .55fr) minmax(0, 1fr);
  min-height: 112px;
  align-items: start;
  padding: 28px 0;
  gap: 16px;
  border: 0;
  border-bottom: 1px solid var(--mg-line);
  background: transparent;
}

.mg-checklist-grid li:nth-child(odd) { margin-right: 30px; }
.mg-checklist-grid li:nth-child(even) { margin-left: 30px; }
.mg-checklist-grid span { color: var(--mg-accent); }
.mg-checklist-grid strong { font-size: 15px; }
.mg-checklist-grid p { margin: 0; color: var(--mg-muted); font-size: 11px; }

.mg-sources {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(40px, 5vw, 72px);
}

.mg-sources > * { width: min(920px, 100%); }
.mg-sources > div:first-child { text-align: center; }
.mg-sources h2 { font-size: clamp(30px, 4vw, 58px); text-align: center; }
.mg-source-links { border-top: 1px solid var(--mg-ink); }
.mg-source-links a { min-height: 54px; background: transparent; }

.mg-sources h2,
body.gbds-v2-monitor-guide-page .gbds-v2-monitor-guide-shell .mg-sources h2,
body.gbds-v2-monitor-guide-page .gbds-v2-monitor-guide-shell .mg-source-links a {
  color: var(--mg-ink) !important;
}
.mg-sources > div:first-child > p:last-child { color: var(--mg-muted); }
.mg-source-links,
.mg-source-links a { border-color: var(--mg-line) !important; }

.mg-final {
  min-height: 580px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.mg-final h2 { width: min(940px, 100%); font-size: clamp(50px, 6.3vw, 94px); text-align: center; }
.mg-final > p:not(.mg-kicker) { width: min(720px, 100%); color: var(--mg-muted); text-align: center; }
.mg-final > div { justify-content: center; }

@media (min-width: 1181px) {
  /* Give authored Japanese line breaks the full editorial measure.  The copy
     remains on its chosen punctuation break instead of being squeezed into
     one half of the old two-column template. */
  .mg-section-head,
  .mg-section-head--split,
  .mg-diagnosis .mg-section-head {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .48fr);
    align-items: start;
    row-gap: clamp(28px, 3.5vw, 48px);
  }

  .mg-section-head--split > :first-child,
  .mg-diagnosis .mg-section-head > .mg-kicker,
  .mg-diagnosis .mg-section-head > h2 {
    grid-column: 1 / -1;
  }

  .mg-section-head--split > .mg-prose,
  .mg-section-head--split > p,
  .mg-diagnosis .mg-section-head > p:not(.mg-kicker) {
    grid-column: 2;
    justify-self: end;
  }

  .mg-section-head h2,
  .mg-chapter > .mg-section-head h2 {
    width: 100%;
    max-width: none;
  }

  .gbds-v2-monitor-guide-shell .mg-section-head h2 .mg-line { white-space: nowrap; }

  /* Verification dates remain in the document for maintenance, but repeating
     the same small label across all 21 rows weakens the comparison hierarchy. */
  .mg-product-verified { display: none; }
}

@media (max-width: 1180px) {
  .mg-section-head,
  .mg-section-head--split { grid-template-columns: 1fr; align-items: start; gap: 28px; }
  .mg-section-head h2,
  .mg-chapter > .mg-section-head h2 { max-width: 13em; }
  .mg-nav {
    flex-wrap: wrap;
    padding-bottom: 7px;
  }
  .mg-nav-links {
    order: 3;
    display: flex !important;
    width: 100%;
    height: auto;
    min-height: 38px;
    margin-left: 0;
    gap: 24px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .mg-nav-links::-webkit-scrollbar { display: none; }
  .mg-nav-links a { flex: 0 0 auto; }
  .mg-glossary-tool { top: 105px; }
  .gbds-v2-monitor-guide-shell [id] { scroll-margin-top: 122px; }
  .mg-finder { grid-template-columns: 1fr; }
  .mg-result { padding-left: 0; border-top: 1px solid var(--mg-line); border-left: 0; }
  .mg-route-cards article {
    grid-template-columns: 86px minmax(160px, .65fr) minmax(240px, 1fr) auto;
  }
  .mg-route-cards article dl { display: none; }
  .mg-filter-panel { grid-template-columns: 1fr; }
  .mg-product-grid--current .mg-product {
    grid-template-columns: 44px minmax(130px, .5fr) minmax(180px, .8fr) minmax(240px, 1.2fr);
    grid-template-areas:
      "num role title reason"
      "num meta title specs"
      "num caution action action";
  }
  .mg-product-caution { margin-top: 10px !important; }
  .mg-product-verified { justify-self: end; }
}

@media (max-width: 760px) {
  .gbds-v2-monitor-guide-shell { font-size: 16px; }
  .mg-nav { min-height: 58px; padding-right: 16px; padding-left: 16px; gap: 12px; }
  .mg-brand span { display: none; }
  .mg-nav { padding-bottom: 8px; }
  .mg-nav-cta { margin-left: auto; padding: 8px 15px; }
  .mg-nav-links {
    width: calc(100% + 32px);
    margin: 0 -16px;
    padding: 3px 16px 1px;
  }
  .mg-mobile-break { display: block; }
  .gbds-v2-monitor-guide-shell .mg-section-head h2 .mg-line,
  .mg-sources h2 .mg-line,
  .mg-final h2 .mg-line {
    word-break: keep-all;
    overflow-wrap: normal;
  }
  .mg-hero {
    min-height: 720px;
    padding: 118px 22px 90px;
  }
  .mg-hero h1 {
    font-size: clamp(28px, 7.8vw, 44px);
    letter-spacing: -.055em;
  }
  .mg-hero h1 .mg-line {
    white-space: nowrap;
  }
  .mg-hero .mg-lead { font-size: 14px; }
  .mg-hero .mg-phrase { white-space: normal; }
  .mg-hero-actions { display: grid; justify-items: center; }
  .mg-diagnosis,
  .mg-foundations,
  .mg-chapter,
  .mg-routes,
  .mg-models,
  .mg-glossary,
  .mg-checklist,
  .mg-sources,
  .mg-final { padding: 92px 20px; }
  .mg-final h2 { font-size: clamp(30px, 9vw, 54px); }
  .mg-section-head h2,
  .mg-chapter > .mg-section-head h2 { max-width: 100%; font-size: clamp(39px, 11vw, 54px); }
  .mg-finder fieldset { grid-template-columns: 1fr; gap: 14px; }
  .mg-choice-row { justify-content: flex-start; }
  .mg-result-size { font-size: 64px; }
  .mg-chapter-index { grid-template-columns: 1fr; }
  .mg-chapter-index a:nth-child(n) { margin: 0; }
  .mg-size-facts,
  .mg-resolution-scale,
  .mg-explainer-grid,
  .mg-panel-cards,
  .mg-hdr-grid,
  .mg-port-grid,
  .mg-signal-notes,
  .mg-metric-grid { grid-template-columns: 1fr; }
  .mg-size-facts article:nth-child(n),
  .mg-resolution-scale article:nth-child(n),
  .mg-explainer-grid article:nth-child(n),
  .mg-panel-cards article:nth-child(n),
  .mg-hdr-grid article:nth-child(n),
  .mg-port-grid article:nth-child(n),
  .mg-signal-notes article:nth-child(n),
  .mg-metric-grid article:nth-child(n) { padding-right: 0; padding-left: 0; border-left: 0; }
  .mg-aspect-outline { width: min(100%, 640px) !important; }
  .mg-motion { padding-right: 16px; padding-left: 16px; }
  .mg-motion-stage { min-height: 430px; }
  .mg-light-stage[data-light-stage="oled"] .mg-light-cross-section { grid-template-columns: 1fr; }
  .mg-light-stage[data-light-stage="oled"] .mg-layer-source,
  .mg-light-stage[data-light-stage="oled"] .mg-layer-diffuser,
  .mg-light-stage[data-light-stage="oled"] .mg-layer-liquid { display: none; }
  .mg-route-cards article {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
  }
  .mg-route-cards article > p,
  .mg-route-cards article button { grid-column: 2; }
  .mg-route-cards article button { justify-self: start; }
  .mg-filter-panel { position: static; padding-top: 20px; }
  .mg-product-grid--current .mg-product {
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
      "num role"
      "num title"
      "num meta"
      "num reason"
      "num specs"
      "num caution"
      "num action";
    padding: 30px 0;
    gap: 10px 14px;
  }
  .mg-product-grid--current .mg-product ul { grid-template-columns: 1fr 1fr; }
  .mg-product-grid--current .mg-product-link { margin-top: 8px; }
  .mg-product-verified { display: none; }
  .mg-confusion-strip,
  .mg-glossary-grid,
  .mg-checklist-grid { grid-template-columns: 1fr; }
  .mg-confusion-strip a:nth-child(n),
  .mg-glossary-grid article:nth-child(n),
  .mg-checklist-grid li:nth-child(n) { margin: 0; }
  .mg-confusion-strip a { grid-template-columns: 54px minmax(110px, .7fr) minmax(0, 1fr); }
  .mg-glossary-tool { top: 106px; }
  .mg-glossary-grid article { grid-template-columns: 1fr; gap: 8px; }
  .mg-checklist-grid li { grid-template-columns: 38px minmax(0, 1fr); }
  .mg-checklist-grid p { grid-column: 2; }
  .mg-sources { grid-template-columns: 1fr; gap: 50px; }
  .mg-final { min-height: 520px; }
}

@media (prefers-reduced-motion: reduce) {
  .gbds-v2-monitor-guide-shell *,
  .gbds-v2-monitor-guide-shell *::before,
  .gbds-v2-monitor-guide-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
 * 2026-09-01 detail polish
 * Group with space and quiet surfaces. Rules are reserved for actual tables.
 * -------------------------------------------------------------------------- */
.gbds-v2-monitor-guide-shell {
  --mg-surface: #f4f5f2;
  --mg-surface-strong: #ecefea;
  --mg-surface-green: #eaf5f1;
  --mg-radius-l: 28px;
  --mg-radius-m: 18px;
  --mg-radius-s: 12px;
}

/* Remove inherited card-grid skeletons that left isolated vertical rules. */
.mg-chapter-index,
.mg-route-cards,
.mg-product-grid,
.mg-product-grid--current,
.mg-confusion-strip,
.mg-glossary-grid,
.mg-checklist-grid {
  border: 0 !important;
}

/* Notes are callouts, not separators. */
.mg-note,
.mg-myth {
  padding: 22px 24px;
  border: 0 !important;
  border-radius: var(--mg-radius-s);
  background: var(--mg-surface);
}

.mg-motion .mg-note,
.mg-motion .mg-myth {
  background: #12171b;
}

/* Diagnosis */
.mg-finder {
  align-items: stretch;
  gap: 22px;
  border: 0;
  background: transparent;
}

.mg-finder-steps,
.mg-result {
  padding: clamp(28px, 3.5vw, 46px);
  border: 0 !important;
  border-radius: var(--mg-radius-l);
}

.mg-finder-steps { background: #fff; }
.mg-result {
  overflow: visible;
  background: var(--mg-surface-green);
}
.mg-result::before { display: none !important; content: none !important; }

.mg-finder fieldset,
.mg-finder fieldset + fieldset {
  grid-template-columns: minmax(150px, .5fr) minmax(0, 1fr);
  margin: 0 0 10px;
  padding: 17px 19px;
  gap: 16px;
  border: 0 !important;
  border-radius: 15px;
  background: var(--mg-surface);
}
.mg-finder fieldset:last-child { margin-bottom: 0; padding-bottom: 17px; }
.mg-finder legend { margin: 0; }
.mg-choice-row { justify-content: flex-start; }
.mg-choice-row button:hover { transform: none; }

.mg-result-size { margin-top: 34px; }
.mg-result dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 28px;
  gap: 8px;
  border: 0;
}
.mg-result dl div {
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .62);
}
.mg-result-actions {
  justify-content: flex-start;
  margin-top: 24px;
  padding-top: 0;
  gap: 10px 20px;
  border: 0 !important;
}
.mg-diagnosis .mg-result-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid rgba(10, 15, 18, .18);
  border-radius: 999px;
  color: var(--mg-ink) !important;
  text-decoration: none;
}
.mg-diagnosis .mg-result-actions button {
  min-height: 42px;
  padding: 0 17px;
  border: 0;
  border-radius: 999px;
  background: var(--mg-ink);
  color: #fff !important;
  text-decoration: none;
}

/* Chapter index */
.mg-chapter-index {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.mg-chapter-index a,
.mg-chapter-index a:nth-child(n) {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "number title"
    "summary summary";
  align-content: start;
  align-items: baseline;
  min-height: 132px;
  margin: 0;
  padding: 23px 24px;
  gap: 7px;
  border: 0;
  border-radius: var(--mg-radius-m);
  background: var(--mg-surface);
}
.mg-chapter-index span { grid-area: number; }
.mg-chapter-index strong {
  grid-area: title;
  white-space: nowrap;
}
.mg-chapter-index small {
  grid-area: summary;
  margin-top: 12px !important;
  word-break: keep-all;
  overflow-wrap: normal;
  text-wrap: balance;
}
.mg-chapter-index strong,
.mg-chapter-index small { margin: 0; }
.mg-chapter-index a:hover {
  background: var(--mg-surface-strong);
  color: var(--mg-ink);
}
.mg-chapter-index a:hover strong { color: var(--mg-ink); }
.mg-chapter-index a:hover small { color: var(--mg-muted); }

/* Shared learning surfaces */
.mg-size-viewer,
.mg-aspect-lab,
.mg-ppi-lab,
.mg-light-lab,
.mg-connection-lab {
  border: 0 !important;
  background: transparent;
}

.mg-size-diagrams { gap: 18px; }
.mg-size-diagrams figure {
  border: 0 !important;
  border-radius: var(--mg-radius-l);
  background: var(--mg-surface);
}
.mg-size-front-canvas,
.mg-size-top-canvas {
  border: 0;
  border-radius: var(--mg-radius-m);
}
.mg-size-diagrams dl {
  gap: 8px;
  background: transparent;
}
.mg-size-diagrams dl div {
  border-radius: 10px;
  background: rgba(255, 255, 255, .72);
}
.mg-size-controls {
  display: flex;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px;
  gap: 8px;
  border: 0 !important;
  border-radius: var(--mg-radius-m);
  background: var(--mg-surface);
}
.mg-size-controls button,
.mg-size-controls button:last-child {
  flex: 1 1 130px;
  min-height: 58px;
  padding: 10px 14px;
  border: 0 !important;
  border-radius: 13px;
  background: #fff;
  font-size: clamp(17px, 1.7vw, 24px);
}
.mg-size-controls button[aria-pressed="true"] { background: var(--mg-ink); }
.mg-size-note { margin-top: 20px; }

.mg-size-facts,
.mg-resolution-scale,
.mg-explainer-grid,
.mg-panel-cards,
.mg-hdr-grid,
.mg-port-grid,
.mg-signal-notes,
.mg-metric-grid {
  gap: 14px;
  border: 0 !important;
}
.mg-size-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mg-size-facts article,
.mg-resolution-scale article,
.mg-explainer-grid article,
.mg-panel-cards article,
.mg-hdr-grid article,
.mg-port-grid article,
.mg-signal-notes article,
.mg-metric-grid article,
.mg-size-facts article:nth-child(n),
.mg-resolution-scale article:nth-child(n),
.mg-explainer-grid article:nth-child(n),
.mg-panel-cards article:nth-child(n),
.mg-hdr-grid article:nth-child(n),
.mg-port-grid article:nth-child(n),
.mg-signal-notes article:nth-child(n),
.mg-metric-grid article:nth-child(n) {
  padding: clamp(25px, 3vw, 38px);
  border: 0 !important;
  border-radius: var(--mg-radius-m);
  background: var(--mg-surface);
}
.mg-panel-cards li,
.mg-port-grid li {
  border: 0 !important;
  background: transparent !important;
}

/* Aspect ratio */
.mg-aspect-lab { gap: 18px; }
.mg-aspect-stage {
  border-radius: var(--mg-radius-l);
  background: var(--mg-surface);
}
.mg-aspect-outline { box-shadow: none; }
.mg-aspect-options {
  align-content: stretch;
  padding: 12px;
  gap: 6px;
  border-radius: var(--mg-radius-l);
  background: var(--mg-surface);
}
.mg-aspect-options button,
.mg-aspect-options button:last-child {
  min-height: 0;
  padding: 19px 18px;
  border: 0 !important;
  border-radius: 16px;
  background: transparent;
}
.mg-aspect-options button[aria-pressed="true"] { background: var(--mg-ink); }
.mg-aspect-side-notes {
  margin-top: 0;
  gap: 12px;
  border: 0;
}
.mg-aspect-side-notes article,
.mg-aspect-side-notes article:last-child {
  border: 0;
  border-radius: var(--mg-radius-m);
  background: #fff;
}

/* Resolution */
.mg-ppi-lab { gap: 16px; }
.mg-ppi-controls,
.mg-ppi-output,
.mg-density-visual {
  border: 0 !important;
  border-radius: var(--mg-radius-l);
}
.mg-ppi-controls,
.mg-ppi-output { background: var(--mg-surface); }
.mg-ppi-controls select {
  border: 0;
  border-radius: 11px;
  background-color: #fff;
}
.mg-resolution-visuals {
  margin-top: 0;
  gap: 14px;
  border: 0;
}
.mg-resolution-visuals > article,
.mg-resolution-visuals > article:first-child {
  border: 0;
  border-radius: var(--mg-radius-m);
  background: var(--mg-surface);
}
.mg-resolution-scale { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mg-ui-sample { border: 0; border-radius: 10px; }

/* Motion remains the one dark chapter, but its controls no longer form a cage. */
.mg-motion .mg-motion-lab { border: 0; border-radius: var(--mg-radius-l); overflow: hidden; }
.mg-motion-options {
  display: flex;
  flex-wrap: wrap;
  padding: 12px;
  gap: 8px;
  border: 0;
  background: #12171b;
}
.mg-motion-options button,
.mg-motion-options button:last-child {
  flex: 1 1 120px;
  min-height: 66px;
  border: 0 !important;
  border-radius: 14px;
  background: #1a2025;
}
.mg-motion-timelines {
  padding: 12px;
  gap: 8px;
  border: 0;
  background: #0d1114;
}
.mg-time-row {
  border: 0;
  border-radius: 15px;
  background: #151a1f;
}
.mg-vrr-visual,
.mg-vrr-panel,
.mg-motion .mg-metric-grid { border: 0; }
.mg-motion .mg-metric-grid article,
.mg-motion .mg-metric-grid article:nth-child(n) {
  background: #151a1f;
}
.mg-motion .mg-metric-grid h3 { color: #fff !important; }
.mg-motion .mg-metric-grid article > p:last-child { color: #b8c0c6; }

/* Panel and backlight */
.mg-light-lab { gap: 18px; }
.mg-light-stage { border-radius: var(--mg-radius-l); overflow: hidden; }
.mg-light-options {
  padding: 12px;
  gap: 6px;
  border-radius: var(--mg-radius-l);
  background: var(--mg-surface);
}
.mg-light-options button,
.mg-light-options button:last-child {
  padding: 20px;
  border: 0 !important;
  border-radius: 16px;
  background: transparent;
}
.mg-light-options button[aria-pressed="true"] { background: var(--mg-ink); }

/* HDR */
.mg-hdr-pipeline {
  gap: 8px;
  border: 0;
}
.mg-hdr-pipeline > article {
  border-radius: var(--mg-radius-m);
  background: var(--mg-surface);
}
.mg-hdr-pipeline > i {
  border: 0;
  background: transparent;
}
.mg-hdr-visuals {
  gap: 14px;
  border: 0;
}
.mg-hdr-visuals > article {
  border: 0;
  border-radius: var(--mg-radius-m);
  background: var(--mg-surface);
}
.mg-format-columns > section {
  overflow: hidden;
  gap: 8px;
  border: 0;
  border-radius: var(--mg-radius-m);
  background: #151a1e;
}
.mg-format-columns > section > article,
.mg-format-columns > section > article:last-child {
  border: 0;
  background: #1c2227;
}
.mg-format-columns > section > h4 { color: #fff !important; }

/* Connection path */
.mg-connection .mg-connection-lab {
  grid-template-columns: 1fr;
  gap: 14px;
}
.mg-source-options {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  padding: 12px;
  gap: 8px;
  border: 0 !important;
  border-radius: var(--mg-radius-m);
  background: var(--mg-surface);
}
.mg-source-options button,
.mg-source-options button:last-child {
  flex: 1 1 170px;
  min-height: 48px;
  padding: 10px 16px;
  border: 0 !important;
  border-radius: 13px;
  background: #fff;
  text-align: center;
}
.mg-source-options button[aria-pressed="true"] { background: var(--mg-ink); color: #fff; }
.mg-signal-route {
  grid-column: 1 / -1;
  gap: 7px;
  border: 0;
  background: transparent;
}
.mg-signal-route > div,
.mg-signal-route > i {
  border: 0 !important;
}
.mg-signal-route > div {
  border-radius: 15px;
  background: var(--mg-surface);
}
.mg-signal-route .mg-route-result { background: var(--mg-surface-green); }
.mg-connection .mg-connection-lab > p {
  grid-column: 1 / -1;
  padding: 8px 2px 20px;
  border: 0;
}
.mg-usbc-triad,
.mg-link-lanes {
  gap: 10px;
  border: 0;
}
.mg-usbc-triad > span,
.mg-usbc-triad > div,
.mg-link-lanes article,
.mg-usbc-triad > div:last-child,
.mg-link-lanes article:last-child {
  border: 0;
  border-radius: 15px;
  background: var(--mg-surface);
}
.mg-bandwidth-check {
  border: 0;
  border-radius: var(--mg-radius-m);
}

/* Use-case rows */
.mg-route-cards article {
  margin-bottom: 10px;
  padding: 28px 30px;
  border: 0;
  border-radius: var(--mg-radius-m);
  background: #fff;
}
.mg-route-cards article:last-child { margin-bottom: 0; }
.mg-route-cards article dl { padding-top: 0; }
.mg-route-cards article dl div { padding: 3px 0; border: 0; }
.mg-route-cards article button {
  align-self: center;
  min-width: 140px;
  min-height: 42px;
  margin-top: 0;
  padding: 0 15px;
  border: 0;
  border-radius: 999px;
  background: var(--mg-ink);
  color: #fff;
  text-decoration: none;
}

/* Product explorer */
.mg-filter-panel {
  margin-bottom: 14px;
  padding: 20px;
  border: 0;
  border-radius: var(--mg-radius-m);
  background: var(--mg-surface);
}
.mg-filter-panel button {
  border: 0;
  background: #fff;
}
.mg-product-grid--current .mg-product {
  margin-bottom: 10px;
  padding: 28px 30px;
  border: 0;
  border-radius: var(--mg-radius-m);
  background: var(--mg-surface);
}
.mg-product-grid--current .mg-product:last-child { margin-bottom: 0; }
.mg-product-grid--current .mg-product li {
  border: 0 !important;
  background: transparent !important;
}
.mg-product-grid--current .mg-product-link {
  width: max-content;
  max-width: 100%;
  align-self: end;
  padding: 0;
  border: 0;
  color: var(--mg-accent);
}

/* Glossary and final checks */
.mg-confusion-strip {
  gap: 10px 18px;
}
.mg-confusion-strip a,
.mg-confusion-strip a:nth-child(n) {
  min-height: 88px;
  margin: 0;
  padding: 18px 20px;
  border: 0;
  border-radius: 15px;
  background: #fff;
}
.mg-glossary-tool { border: 0; }
.mg-glossary-grid { column-gap: 48px; }
.mg-glossary-grid [data-glossary-item],
.mg-glossary-grid [data-glossary-item]:nth-child(n) {
  min-height: 108px;
  margin: 0;
  padding: 26px 0;
  border: 0;
  border-bottom: 1px solid rgba(12, 15, 18, .11);
  background: transparent;
}
.mg-glossary-grid [data-glossary-item] h3 { margin: 0; font-size: 17px; }
.mg-glossary-grid [data-glossary-item] p { margin: 0; font-size: 11px; }
.mg-checklist-grid { gap: 12px; }
.mg-checklist-grid li,
.mg-checklist-grid li:nth-child(n) {
  margin: 0;
  padding: 24px;
  border: 0;
  border-radius: 15px;
  background: var(--mg-surface);
}
.mg-compare-table tbody tr:last-child :where(th, td) { border-bottom: 0; }

/* Dark comparison tables must not inherit Cocoon's alternating white rows. */
.mg-compare-table-wrap--dark .mg-compare-table tbody tr:nth-child(odd) > * {
  background: #14191e !important;
}
.mg-compare-table-wrap--dark .mg-compare-table tbody tr:nth-child(even) > * {
  background: #1a2025 !important;
}
.mg-compare-table-wrap--dark .mg-compare-table tbody :where(th, td) {
  color: #c1c9ce !important;
}
.mg-compare-table-wrap--dark .mg-compare-table tbody th { color: #fff !important; }

/* This note now belongs to the light connection chapter. */
.mg-connection .mg-myth--dark { background: var(--mg-surface); }
.mg-connection .mg-myth--dark p strong { color: var(--mg-ink) !important; }
.mg-connection .mg-myth--dark s { color: #7f878d; }

@media (max-width: 1180px) {
  .mg-chapter-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-diagnosis .mg-section-head {
    grid-template-columns: 1fr;
  }
  .mg-finder fieldset,
  .mg-finder fieldset + fieldset { grid-template-columns: minmax(150px, .42fr) minmax(0, 1fr); }
  .mg-route-cards article { padding: 26px 24px; }
}

@media (max-width: 760px) {
  .mg-diagnosis .mg-section-head {
    grid-template-columns: 1fr;
  }
  .mg-diagnosis .mg-section-head > * {
    grid-column: auto;
    justify-self: stretch;
  }
  .mg-finder-steps,
  .mg-result { padding: 22px; border-radius: 20px; }
  .mg-finder fieldset,
  .mg-finder fieldset + fieldset { grid-template-columns: 1fr; padding: 16px; }
  .mg-result dl { grid-template-columns: 1fr; }
  .mg-chapter-index { grid-template-columns: 1fr; }
  .mg-chapter-index a,
  .mg-chapter-index a:nth-child(n) { min-height: 104px; }
  .mg-size-controls button { flex-basis: calc(50% - 4px); }
  .mg-size-facts,
  .mg-resolution-scale { grid-template-columns: 1fr; }
  .mg-aspect-options { grid-template-rows: none; }
  .mg-aspect-side-notes { grid-template-columns: 1fr; }
  .mg-motion-options button { flex-basis: calc(50% - 4px); }
  .mg-source-options button { flex-basis: calc(50% - 4px); }
  .mg-signal-route { grid-template-columns: 1fr; }
  .mg-signal-route > i { min-height: 24px; }
  .mg-route-cards article button { align-self: start; }
  .mg-filter-panel { padding: 16px; }
  .mg-product-grid--current .mg-product { padding: 24px 20px; }
  .mg-confusion-strip { grid-template-columns: 1fr; }
  .mg-glossary-grid { column-gap: 0; }
}

/* --------------------------------------------------------------------------
 * 2026-09-01 final coherence pass
 * One clear control strip, one primary visual, and no decorative rules.
 * -------------------------------------------------------------------------- */

/* Cocoon adds a table bottom margin inside the scroll wrapper. It looked like
   an unexplained empty footer followed by a stray rule. */
.gbds-v2-monitor-guide-shell .mg-compare-table {
  margin: 0 !important;
}

.gbds-v2-monitor-guide-shell .mg-compare-table-wrap {
  border: 0 !important;
  border-radius: var(--mg-radius-m);
  overflow: auto;
}

.mg-compare-table-wrap--dark .mg-compare-table thead tr > * {
  background: #0f1418 !important;
  color: #d4dadd !important;
}

/* Keep reference grids on the same editorial axis as their headings. */
.gbds-v2-monitor-guide-shell ol.mg-checklist-grid {
  margin-right: auto !important;
  margin-left: auto !important;
}

/* The diagnosis is a form, not a stack of cards. */
.mg-finder fieldset,
.mg-finder fieldset + fieldset,
.mg-finder fieldset:last-child {
  grid-template-columns: minmax(150px, .5fr) minmax(0, 1fr);
  margin: 0;
  padding: 18px 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
}

.mg-finder legend {
  display: block;
  grid-column: 1;
  align-self: center;
}

.mg-choice-row {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  gap: 7px;
}

.mg-choice-row button {
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: 0 !important;
  border-radius: 11px;
  background: var(--mg-surface);
  text-align: center;
}

.mg-choice-row button[aria-pressed="true"] { background: var(--mg-ink); }

.mg-result dl div {
  padding: 7px 0;
  border-radius: 0;
  background: transparent;
}

/* Seven chapters read as one continuous map at desktop widths. */
@media (min-width: 1181px) {
  .mg-chapter-index { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .mg-chapter-index a,
  .mg-chapter-index a:nth-child(n) {
    min-height: 142px;
    padding: 22px 18px;
  }
  .mg-chapter-index small { font-size: 10px; }
}

/* Three explanatory notes should finish as a complete row, not 2 + 1. */
@media (min-width: 1001px) {
  .mg-explainer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Aspect ratio: controls first, one large visual second. */
.mg-aspect-lab {
  grid-template-columns: 1fr;
  grid-template-areas:
    "controls"
    "stage"
    "notes";
}

.mg-aspect-stage { grid-area: stage; }
.mg-aspect-options {
  grid-area: controls;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: none;
  border-radius: var(--mg-radius-m);
}
.mg-aspect-side-notes { grid-area: notes; }

.mg-aspect-options button,
.mg-aspect-options button:last-child {
  grid-template-columns: 1fr;
  min-height: 74px;
  align-content: center;
  padding: 12px 16px;
  gap: 4px;
  text-align: center;
}
.mg-aspect-options b { font-size: 17px; }
.mg-aspect-options span { font-size: 10px; }

/* Motion: select the rate before reading the animation. */
.mg-motion-lab {
  display: flex;
  flex-direction: column;
}
.mg-motion-options { order: -1; }
.mg-motion-stage {
  min-height: 0;
  padding: clamp(28px, 4vw, 48px);
}
.mg-motion-options button,
.mg-motion-options button:last-child {
  min-height: 54px;
}
.mg-motion-options b { font-size: clamp(20px, 2vw, 30px); }

/* The classification tree repeated the heading and the interactive diagram.
   Keep the interactive light model as the chapter's single primary visual. */
.mg-family-tree { display: none; }

.mg-light-lab {
  grid-template-columns: 1fr;
  grid-template-areas:
    "controls"
    "stage";
}
.mg-light-stage { grid-area: stage; }
.mg-light-options {
  grid-area: controls;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: var(--mg-radius-m);
}
.mg-light-options button,
.mg-light-options button:last-child {
  min-height: 76px;
  padding: 12px 18px;
  text-align: center;
}

/* These concepts are explained in the signal route, port cards and myth box.
   Removing the duplicate strips gives the connection chapter one clear flow. */
.mg-usbc-triad,
.mg-link-lanes { display: none; }

.mg-signal-route .mg-route-result span {
  color: #2b6f63;
  font-size: 10px;
}

/* Three HDR blocks used a legacy square outline while the rest of the page
   had moved to calm surfaces. */
.mg-format-guide,
.mg-certification,
.mg-color-section {
  border: 0 !important;
  border-radius: var(--mg-radius-l);
  overflow: hidden;
}
.mg-certification { background: var(--mg-surface); }
.mg-color-section { background: var(--mg-surface); }

@media (max-width: 1000px) {
  .mg-explainer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .mg-hero h1 { font-size: clamp(28px, 7.4vw, 42px); }

  .mg-finder fieldset,
  .mg-finder fieldset + fieldset,
  .mg-finder fieldset:last-child {
    grid-template-columns: 1fr;
    padding: 15px 0;
  }

  .mg-finder legend,
  .mg-choice-row { grid-column: 1; }

  .mg-choice-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .mg-aspect-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-aspect-options button,
  .mg-aspect-options button:last-child { min-height: 66px; padding: 10px 8px; }

  .mg-motion-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mg-motion-options button,
  .mg-motion-options button:last-child { min-height: 50px; }

  .mg-light-options button,
  .mg-light-options button:last-child { min-height: 64px; padding: 10px 7px; }
  .mg-light-options span { display: none; }

  .mg-source-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mg-source-options button,
  .mg-source-options button:last-child { min-height: 46px; }
}

/* Tablet widths need the same reading-oriented stacking as phones. Keeping
   the five signal steps and the two-column checklist past 760px made Japanese
   labels wrap inside words on 768px devices. */
@media (max-width: 820px) {
  .mg-aspect-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mg-motion-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mg-source-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mg-source-options button,
  .mg-source-options button:last-child {
    grid-column: auto;
    min-height: 52px;
    border-right: 1px solid var(--mg-line);
    border-bottom: 1px solid var(--mg-line);
  }
  .mg-source-options button:nth-child(2n) { border-right: 0; }
  .mg-source-options button:nth-last-child(-n + 2) { border-bottom: 0; }

  .mg-signal-route { grid-template-columns: 1fr; }
  .mg-signal-route > div {
    border-right: 0;
    border-bottom: 1px solid var(--mg-line);
  }
  .mg-signal-route > i {
    min-height: 30px;
    border-right: 0;
    border-bottom: 1px solid var(--mg-line);
    font-size: 0;
  }
  .mg-signal-route > i::before {
    color: var(--mg-accent);
    content: "\2193";
    font-size: 13px;
  }

  .mg-checklist-grid { grid-template-columns: 1fr; }
  .mg-checklist-grid li,
  .mg-checklist-grid li:nth-child(n) {
    grid-template-columns: 38px minmax(0, 1fr);
    margin: 0;
  }
  .mg-checklist-grid p { grid-column: 2; }
}

/* The light-path chapter used to be a centered grid. After the layout became
   a vertical reading flow, the inherited centering left both diagrams at
   intrinsic width inside a very wide empty panel. */
.mg-light-stage { place-items: normal; }
.mg-light-cross-section {
  width: min(100%, 960px);
  margin-right: auto;
  margin-left: auto;
}
.mg-bloom-compare {
  width: min(100%, 960px);
  margin-right: auto;
  margin-left: auto;
}

/* Editorial bridges connect each diagram to a buying decision. They stay
   borderless so added detail reads as prose, not another row of UI cards. */
.mg-reading-bridge {
  display: grid;
  grid-template-columns: minmax(220px, .58fr) minmax(0, 1.12fr);
  align-items: start;
  width: min(1060px, 100%);
  margin-top: clamp(54px, 6vw, 82px);
  padding: 0 clamp(4px, 1.4vw, 18px);
  gap: clamp(36px, 7vw, 96px);
}

.mg-reading-bridge .mg-eyebrow {
  margin: 0 0 16px;
  color: var(--mg-accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .15em;
}

.mg-reading-bridge h3 {
  margin: 0;
  color: var(--mg-ink);
  font-size: clamp(27px, 2.75vw, 40px);
  line-height: 1.25;
  letter-spacing: -.045em;
}

.mg-reading-bridge .mg-prose {
  max-width: 720px;
  justify-self: end;
}

.mg-reading-bridge .mg-prose p {
  margin: 0;
  color: var(--mg-text);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 2;
  letter-spacing: .01em;
}

.mg-reading-bridge .mg-prose p + p { margin-top: 1.35em; }

.mg-reading-bridge--dark h3 { color: #fff !important; }
.mg-reading-bridge--dark .mg-prose p { color: #bac2c7; }
.mg-reading-bridge--dark .mg-eyebrow { color: #72d8c6; }

.mg-reading-bridge--route { margin-top: clamp(66px, 8vw, 108px); }

@media (max-width: 760px) {
  .mg-reading-bridge {
    grid-template-columns: 1fr;
    margin-top: 48px;
    padding: 0;
    gap: 24px;
  }
  .mg-reading-bridge h3 { font-size: clamp(25px, 8vw, 34px); }
  .mg-reading-bridge .mg-prose { max-width: none; justify-self: stretch; }
  .mg-reading-bridge .mg-prose p { font-size: 14px; line-height: 1.9; }
}

/*
 * 2026-09-01 beginner-reading pass
 * Chapter introductions and explanatory bridges now share one centered
 * reading axis. The prose stays left-aligned inside that axis so the longer
 * beginner explanations remain easy to scan.
 */
.mg-section-head,
.mg-section-head--split,
.mg-diagnosis .mg-section-head {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
  align-items: start;
  row-gap: clamp(26px, 3vw, 42px);
  column-gap: 0;
  text-align: center;
}

.mg-section-head--split > :first-child,
.mg-section-head--split > .mg-prose,
.mg-section-head--split > p,
.mg-diagnosis .mg-section-head > *,
.mg-section-head > * {
  grid-column: 1 !important;
  justify-self: center !important;
}

.mg-section-head > div:first-child {
  width: 100%;
  text-align: center;
}

.mg-section-head h2,
.mg-chapter > .mg-section-head h2 {
  width: min(100%, 1120px) !important;
  max-width: 15em !important;
  margin-right: auto !important;
  margin-left: auto !important;
  text-align: center;
}

.gbds-v2-monitor-guide-shell .mg-section-head h2 .mg-line {
  width: fit-content;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  white-space: normal !important;
}

.mg-section-head > .mg-prose {
  width: min(100%, 820px);
  max-width: 820px;
  margin-right: auto;
  margin-left: auto;
  color: var(--mg-text);
  text-align: left;
}

.mg-section-head > .mg-prose p {
  margin: 0;
  font-size: clamp(15px, 1.22vw, 17px);
  line-height: 2;
}

.mg-section-head > .mg-prose p + p { margin-top: 1.25em; }

.mg-section-head > p:not(.mg-kicker) {
  width: min(100%, 760px);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.mg-reading-bridge {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: min(920px, 100%);
  gap: clamp(24px, 3vw, 34px);
  text-align: center;
}

.mg-reading-bridge > div:first-child { width: 100%; }

.mg-reading-bridge h3 {
  width: min(100%, 780px);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.mg-reading-bridge h3 .mg-line {
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}

.mg-reading-bridge .mg-prose {
  width: min(100%, 760px);
  max-width: 760px;
  justify-self: center;
  text-align: left;
}

.mg-vrr-panel,
.mg-certification,
.mg-bandwidth-check {
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center;
  width: min(980px, 100%);
  gap: clamp(28px, 4vw, 44px);
  text-align: center;
}

.mg-vrr-panel > div:first-child,
.mg-certification > div:first-child { width: 100%; }

.mg-vrr-panel h3,
.mg-certification h3,
.mg-bandwidth-check h3 {
  width: min(100%, 820px);
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.mg-vrr-panel h3 .mg-line,
.mg-certification h3 .mg-line,
.mg-bandwidth-check h3 .mg-line {
  width: fit-content;
  margin-right: auto;
  margin-left: auto;
}

.mg-vrr-panel .mg-prose,
.mg-certification .mg-prose {
  width: min(100%, 760px);
  text-align: left;
}

.mg-vrr-panel .mg-prose p,
.mg-certification .mg-prose p { line-height: 1.95; }

.mg-bandwidth-check .mg-eyebrow { grid-column: 1; }
.mg-bandwidth-check ol {
  width: min(100%, 700px);
  text-align: left;
}

.mg-route-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(1120px, 100%);
  margin: clamp(76px, 9vw, 126px) auto 0;
  column-gap: clamp(52px, 8vw, 112px);
  row-gap: clamp(62px, 7vw, 94px);
}

.mg-route-detail article { min-width: 0; }
.mg-route-detail .mg-eyebrow { margin: 0 0 15px; color: var(--mg-accent) !important; }
.mg-route-detail h3 {
  margin: 0;
  color: var(--mg-ink);
  font-size: clamp(25px, 2.4vw, 35px);
  line-height: 1.3;
}
.mg-route-detail article > p:not(.mg-eyebrow) {
  margin: 20px 0 0;
  color: var(--mg-text);
  font-size: clamp(14px, 1.12vw, 16px);
  line-height: 1.95;
}
.mg-route-detail article > p:not(.mg-eyebrow) + p { margin-top: 1.05em; }

.mg-chapter--dark .mg-section-head > .mg-prose { color: #aab3ba; }

@media (min-width: 1081px) {
  .mg-resolution-scale { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .mg-section-head > .mg-prose,
  .mg-reading-bridge .mg-prose,
  .mg-vrr-panel .mg-prose,
  .mg-certification .mg-prose { width: 100%; }

  .mg-section-head h2,
  .mg-chapter > .mg-section-head h2 { max-width: 13em !important; }

  .gbds-v2-monitor-guide-shell .mg-section-head h2 .mg-line {
    word-break: auto-phrase;
    overflow-wrap: normal;
    line-break: strict;
    text-wrap: balance;
  }

  .mg-route-detail {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 64px;
    row-gap: 54px;
  }
}

/* Keep the equal-height aspect comparison authoritative after legacy rules. */
.mg-aspect-outline,
.mg-aspect-stage[data-active-aspect="32-9"] .mg-aspect-outline {
  width: auto !important;
  max-width: none !important;
  height: var(--mg-aspect-height) !important;
  max-height: none !important;
  aspect-ratio: var(--mg-aspect-ratio, 16 / 9) !important;
}

.mg-panel-lighting-figure figcaption,
.mg-black-scene figcaption small,
.mg-light-disclaimer { font-size: 11px !important; }

@media (max-width: 820px) {
  .mg-aspect-stage[data-active-aspect="32-9"] .mg-aspect-compare {
    --mg-aspect-height: clamp(64px, 20vw, 120px);
  }
}

/* --------------------------------------------------------------------------
 * 2026-09-01 long-guide refinement pass
 * A compact reading map, quieter prose bridges and decision-oriented tools.
 * This final block intentionally wins over the earlier exploratory layers.
 * -------------------------------------------------------------------------- */

/* Current chapter: a second, compact navigation layer appears only while the
   reader is inside the seven-part foundations section. */
.mg-chapter-progress {
  position: sticky;
  z-index: 90;
  top: 64px;
  display: grid;
  grid-template-columns: minmax(150px, .34fr) minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding-right: max(var(--mg-gutter), calc((100vw - var(--mg-wide)) / 2));
  padding-left: max(var(--mg-gutter), calc((100vw - var(--mg-wide)) / 2));
  overflow: hidden;
  border-bottom: 1px solid rgba(16, 19, 23, .11);
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(170%) blur(16px);
  backdrop-filter: saturate(170%) blur(16px);
}

.admin-bar .mg-chapter-progress { top: 96px; }

.mg-chapter-progress-label {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 10px;
}

.mg-chapter-progress-label small {
  color: var(--mg-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.mg-chapter-progress-label strong {
  overflow: hidden;
  color: var(--mg-ink);
  font-size: 12px;
  font-weight: 760;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-chapter-progress > div {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-width: 0;
  align-self: stretch;
}

.mg-chapter-progress a {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #717a80;
  font-size: 10px;
  text-decoration: none !important;
  transition: color .25s ease, background-color .25s ease;
}

.mg-chapter-progress a span {
  color: var(--mg-faint);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
}

.mg-chapter-progress a b {
  min-width: 0;
  overflow: hidden;
  font-weight: 710;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-chapter-progress a:hover,
.mg-chapter-progress a[aria-current="step"] {
  background: var(--mg-soft);
  color: var(--mg-ink);
}

.mg-chapter-progress a[aria-current="step"] span { color: var(--mg-accent); }

.mg-chapter-progress > i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  background: rgba(16, 19, 23, .08);
}

.mg-chapter-progress > i > span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--mg-accent);
  transition: width .18s linear;
}

.gbds-v2-monitor-guide-shell[data-current-chapter="size"] .mg-chapter-progress,
.gbds-v2-monitor-guide-shell[data-current-chapter="aspect"] .mg-chapter-progress { --mg-accent: var(--mg-green); }
.gbds-v2-monitor-guide-shell[data-current-chapter="resolution"] .mg-chapter-progress,
.gbds-v2-monitor-guide-shell[data-current-chapter="hdr"] .mg-chapter-progress { --mg-accent: var(--mg-blue); }
.gbds-v2-monitor-guide-shell[data-current-chapter="motion"] .mg-chapter-progress { --mg-accent: var(--mg-orange); }
.gbds-v2-monitor-guide-shell[data-current-chapter="panel"] .mg-chapter-progress { --mg-accent: var(--mg-violet); }
.gbds-v2-monitor-guide-shell[data-current-chapter="connection"] .mg-chapter-progress { --mg-accent: var(--mg-green); }

.gbds-v2-monitor-guide-shell .mg-chapter[id] { scroll-margin-top: 128px; }
.admin-bar .gbds-v2-monitor-guide-shell .mg-chapter[id] { scroll-margin-top: 160px; }

/* Repeated transitions should read like compact editorial notes, not another
   chapter hero. Only direct children are affected; primary section heads stay
   centered and retain their current scale. */
.gbds-v2-monitor-guide-shell :is(.mg-chapter, .mg-routes, .mg-models) > .mg-reading-bridge {
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  width: min(820px, 100%);
  margin: clamp(40px, 4.5vw, 62px) auto 0;
  padding: 0;
  gap: clamp(15px, 2vw, 22px);
  text-align: left;
}

.gbds-v2-monitor-guide-shell :is(.mg-chapter, .mg-routes, .mg-models) > .mg-reading-bridge > div:first-child,
.gbds-v2-monitor-guide-shell :is(.mg-chapter, .mg-routes, .mg-models) > .mg-reading-bridge h3,
.gbds-v2-monitor-guide-shell :is(.mg-chapter, .mg-routes, .mg-models) > .mg-reading-bridge .mg-prose {
  width: 100%;
  max-width: none;
  justify-self: start;
  text-align: left;
}

.gbds-v2-monitor-guide-shell :is(.mg-chapter, .mg-routes, .mg-models) > .mg-reading-bridge .mg-eyebrow {
  margin-bottom: 10px;
  font-size: 9px;
  letter-spacing: .13em;
}

.gbds-v2-monitor-guide-shell :is(.mg-chapter, .mg-routes, .mg-models) > .mg-reading-bridge h3 {
  font-size: clamp(23px, 2.1vw, 31px);
  line-height: 1.35;
  letter-spacing: -.04em;
}

.gbds-v2-monitor-guide-shell :is(.mg-chapter, .mg-routes, .mg-models) > .mg-reading-bridge h3 .mg-line {
  width: auto;
  margin: 0;
  text-align: left;
}

.gbds-v2-monitor-guide-shell :is(.mg-chapter, .mg-routes, .mg-models) > .mg-reading-bridge .mg-prose p {
  font-size: clamp(13px, 1.05vw, 15px);
  line-height: 1.95;
}

/* Optional finder preferences are deliberately subordinate to the three main
   questions. They influence ordering without looking like a fourth step. */
.mg-finder-refine {
  margin-top: 16px;
  border-top: 1px solid var(--mg-line);
  border-bottom: 1px solid var(--mg-line);
}

.mg-finder-refine summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px;
  gap: 20px;
  color: var(--mg-ink);
  cursor: pointer;
  list-style: none;
}

.mg-finder-refine summary::-webkit-details-marker { display: none; }
.mg-finder-refine summary::after {
  color: var(--mg-accent);
  content: "+";
  font-size: 20px;
  font-weight: 450;
  line-height: 1;
}
.mg-finder-refine[open] summary::after { content: "−"; }
.mg-finder-refine summary span { font-size: 13px; font-weight: 740; }
.mg-finder-refine summary small {
  margin-left: auto;
  color: var(--mg-muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
}

.mg-finder-refine > p,
.mg-finder-refine > small {
  display: block;
  margin: 0;
  color: var(--mg-muted);
  font-size: 10px;
  line-height: 1.75;
}

.mg-finder-refine > p { padding: 2px 0 16px; }
.mg-finder-refine > small { padding: 0 0 18px; }

.mg-finder-refine-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 4px 0 18px;
  gap: 18px;
}

.mg-finder .mg-finder-refine fieldset,
.mg-finder .mg-finder-refine fieldset + fieldset,
.mg-finder .mg-finder-refine fieldset:last-child {
  display: block;
  margin: 0;
  padding: 16px;
  border: 0 !important;
  border-radius: 14px;
  background: var(--mg-surface, var(--mg-soft));
}

.mg-finder .mg-finder-refine legend {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  color: var(--mg-muted);
  font-size: 10px;
  font-weight: 740;
}

.mg-finder .mg-finder-refine .mg-choice-row--compact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  width: 100%;
  gap: 6px;
}

.mg-finder .mg-finder-refine .mg-choice-row--compact button {
  min-height: 38px;
  padding: 7px 8px;
  border-radius: 10px;
  font-size: 10px;
}

/* Product preferences are ranking controls, whereas use/form/feature remain
   true filters. The visual treatment keeps that distinction explicit. */
.mg-product-ranking,
.mg-filter-panel :is(.mg-filter-ranking, [data-ranking="true"]),
.mg-filter-panel :is(fieldset[data-filter="device"], fieldset[data-filter="budget"]) {
  padding: 12px;
  border-radius: 13px;
  background: #edf5f7;
}

.mg-product-ranking-label,
.mg-filter-panel :is(.mg-filter-ranking, [data-ranking="true"]) legend,
.mg-filter-panel :is(fieldset[data-filter="device"], fieldset[data-filter="budget"]) legend {
  color: var(--mg-accent);
}

.mg-ranking-filters {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, .72fr) repeat(2, minmax(0, 1fr));
  align-items: end;
  padding-top: 18px;
  gap: 14px 20px;
  border-top: 1px solid var(--mg-line);
}

.mg-ranking-filters > p {
  align-self: center;
  margin: 0;
}

.mg-ranking-filters > p strong {
  display: block;
  color: var(--mg-accent);
  font-size: 10px;
  letter-spacing: .08em;
}

.mg-ranking-filters > p span {
  display: block;
  margin-top: 5px;
  color: var(--mg-muted);
  font-size: 9px;
  line-height: 1.55;
}

.mg-ranking-filters > small {
  grid-column: 2 / -1;
  color: var(--mg-muted);
  font-size: 8px;
  line-height: 1.55;
}

.mg-filter-panel .mg-ranking-filters fieldset[data-ranking="true"] {
  padding: 11px 12px;
  border-radius: 12px;
  background: #edf5f7;
}

.mg-filter-panel .mg-ranking-filters fieldset[data-ranking="true"] legend { margin-bottom: 7px; }
.mg-filter-panel .mg-ranking-filters fieldset[data-ranking="true"] button { min-height: 30px; }

.mg-product-status {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: 2px;
  gap: 18px;
}

.mg-product-status .mg-product-count { margin: 0; text-align: left; }
.mg-product-status > p:last-child {
  margin: 0;
  color: var(--mg-muted);
  font-size: 10px;
  line-height: 1.6;
  text-align: right;
}

.mg-product.is-recommendation-rest,
.mg-product-card.is-recommendation-rest,
.mg-product.is-product-rest,
.mg-product-card.is-product-rest { display: none !important; }

.mg-product-more {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: clamp(24px, 3vw, 38px);
}

.mg-product-more [data-product-more],
button.mg-product-more[data-product-more],
[data-product-more].mg-product-more {
  width: max-content;
  max-width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  margin: clamp(24px, 3vw, 38px) auto 0;
  padding: 0 24px;
  border: 1px solid var(--mg-ink);
  border-radius: 999px;
  background: #fff;
  color: var(--mg-ink);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .25s var(--mg-ease);
}

.mg-product-more [data-product-more]:hover,
button.mg-product-more[data-product-more]:hover,
[data-product-more].mg-product-more:hover {
  background: var(--mg-ink);
  color: #fff;
  transform: translateY(-2px);
}

/* Compact, accurate classification: LCD liquid-crystal type and backlight are
   separate choices; OLED remains a sibling display family. */
.mg-family-tree {
  display: grid;
  grid-template-columns: minmax(180px, .34fr) minmax(0, 1fr);
  width: min(var(--mg-layout), 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--mg-line);
  border-radius: var(--mg-radius-m, 18px);
  background: #fff;
}

.mg-family-root {
  display: flex;
  min-height: 0;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  padding: clamp(24px, 3vw, 38px);
  gap: 12px;
  background: var(--mg-soft);
  color: var(--mg-ink);
  writing-mode: horizontal-tb;
}

.mg-family-root span {
  color: var(--mg-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.mg-family-root strong {
  color: var(--mg-ink);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
}

.mg-family-tree > .mg-family-branch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0;
  gap: 0;
  background: #fff;
}

.mg-family-tree > .mg-family-branch article {
  display: flex;
  min-width: 0;
  min-height: 250px;
  flex-direction: column;
  padding: clamp(24px, 3vw, 38px);
  border: 0;
  border-left: 1px solid var(--mg-line);
  background: #fff;
}

.mg-family-tree > .mg-family-branch article > span {
  color: var(--mg-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.mg-family-tree > .mg-family-branch article > strong {
  margin-top: 16px;
  color: var(--mg-ink);
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.35;
}

.mg-family-tree > .mg-family-branch article > div {
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-top: 22px;
  gap: 10px;
}

.mg-family-tree > .mg-family-branch article dl {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  margin: 0;
  gap: 5px;
  background: transparent;
}

.mg-family-tree > .mg-family-branch article dt,
.mg-family-tree > .mg-family-branch article dd {
  margin: 0;
  padding: 5px 7px;
  border: 1px solid var(--mg-line);
  border-radius: 999px;
  background: #fff;
  font-size: 9px;
  line-height: 1.25;
}

.mg-family-tree > .mg-family-branch article dt {
  flex-basis: 100%;
  border: 0;
  padding-left: 0;
  color: var(--mg-muted);
}

.mg-family-tree > .mg-family-branch article dd {
  color: var(--mg-ink);
  font-weight: 720;
}

.mg-family-tree > .mg-family-branch article > div > b {
  color: var(--mg-accent);
  font-size: 17px;
}

.mg-family-tree > .mg-family-branch article > small {
  display: block;
  margin-top: 14px;
  color: var(--mg-muted);
  font-size: 9px;
  line-height: 1.6;
}

/* The selected light-path label must not leak into the night-scene figures. */
.mg-light-stage[data-light-stage="lcd"] .mg-panel-lighting-labels [data-light-card="lcd"],
.mg-light-stage[data-light-stage="mini"] .mg-panel-lighting-labels [data-light-card="mini"],
.mg-light-stage[data-light-stage="oled"] .mg-panel-lighting-labels [data-light-card="oled"] {
  background: #faf9ff;
  box-shadow: inset 0 4px 0 #7561c4;
}

.mg-light-stage .mg-black-scene[data-light-card] {
  background: transparent !important;
  box-shadow: none !important;
}

.mg-black-scene-head {
  display: grid;
  width: min(780px, 100%);
  margin: clamp(36px, 5vw, 58px) auto 0;
  gap: 8px;
  text-align: center;
}

.mg-black-scene-head span {
  color: var(--mg-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
}

.mg-black-scene-head strong {
  color: var(--mg-ink);
  font-size: clamp(20px, 2vw, 29px);
  line-height: 1.4;
}

.mg-black-scene-head p {
  margin: 0;
  color: var(--mg-muted);
  font-size: 11px;
  line-height: 1.75;
}

.mg-black-scene--lcd img { filter: brightness(1.08) contrast(.8) saturate(.86); }
.mg-black-scene--lcd > div::after { background: rgba(150, 166, 177, .12); }
.mg-black-scene--lcd > div > b {
  background: radial-gradient(circle at 52% 46%, rgba(255, 242, 215, .18), transparent 29%), radial-gradient(circle at 18% 60%, rgba(210, 229, 238, .12), transparent 25%);
  filter: blur(9px);
}
.mg-black-scene--mini img { filter: brightness(1) contrast(.98) saturate(.94); }
.mg-black-scene--mini > div::after { background: rgba(116, 139, 151, .035); }
.mg-black-scene--mini > div > b {
  background: radial-gradient(circle at 52% 46%, rgba(255, 242, 215, .11), transparent 14%), radial-gradient(circle at 18% 60%, rgba(210, 229, 238, .07), transparent 12%);
  filter: blur(5px);
}
.mg-black-scene--oled img { filter: brightness(.94) contrast(1.12) saturate(1.02); }

/* Refresh animation plays once. The markers keep the comparison readable when
   the animation has finished or motion is reduced. */
.mg-motion-stage-tools {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 14px;
}

.mg-motion-replay {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #465158;
  border-radius: 999px;
  background: transparent;
  color: #c5cdd1;
  font-size: 9px;
  font-weight: 720;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, transform .25s var(--mg-ease);
}

.mg-motion-replay span { display: inline-block; margin-left: 5px; font-size: 12px; }
.mg-motion-replay:hover { border-color: #74d6ca; color: #74d6ca; transform: translateY(-1px); }

.mg-motion-stage .mg-fall-live {
  display: block;
  opacity: 0;
  animation: none !important;
}

.mg-motion-stage.is-playing .mg-fall-live {
  animation: mg-fall-live 2.4s steps(var(--mg-fall-steps, 3), end) 1 both !important;
}

/* The route ends with a verdict, not another decorative strip. */
.mg-route-verdict {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(220px, .58fr) minmax(0, 1fr);
  align-items: start;
  padding: clamp(24px, 3vw, 38px);
  gap: 22px clamp(28px, 4vw, 54px);
  border-radius: var(--mg-radius-m, 18px);
  background: var(--mg-surface, var(--mg-soft));
}

.mg-route-verdict > div:first-child > span {
  color: var(--mg-accent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.mg-route-verdict > div:first-child > strong {
  display: block;
  margin-top: 12px;
  color: var(--mg-ink);
  font-size: clamp(19px, 1.8vw, 27px);
  line-height: 1.35;
}

.mg-route-verdict > div:first-child > p {
  margin: 12px 0 0;
  color: var(--mg-muted);
  font-size: 11px;
  line-height: 1.7;
}

.mg-route-verdict ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  gap: 7px;
  list-style: none;
}

.mg-route-verdict li {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--mg-line);
  border-radius: 11px;
  background: #fff;
}

.mg-route-verdict li small {
  display: block;
  color: var(--mg-muted);
  font-size: 8px;
  line-height: 1.3;
}

.mg-route-verdict li b {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  color: var(--mg-ink);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mg-route-bottleneck {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 13px 15px;
  gap: 14px;
  border-left: 3px solid var(--mg-orange);
  border-radius: 0 10px 10px 0;
  background: #fff6ee;
}

.mg-route-bottleneck b {
  color: #92502f;
  font-size: 9px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.mg-route-bottleneck strong {
  color: var(--mg-ink);
  font-size: 12px;
  line-height: 1.5;
}

.mg-route-bottleneck small {
  min-width: 0;
  color: var(--mg-muted);
  font-size: 10px;
  line-height: 1.6;
}

.mg-signal-route [data-route-step] {
  transition: background-color .3s ease, box-shadow .3s ease, transform .3s var(--mg-ease);
}

.mg-signal-route [data-route-step].is-bottleneck {
  background: #fff7ef;
  box-shadow: inset 0 0 0 2px rgba(195, 91, 45, .45);
  transform: translateY(-2px);
}

.mg-signal-route [data-route-step].is-bottleneck > span { color: #9a4d2c; }

/* Quantitative-looking HDR bars must identify themselves as a qualitative
   model; the note stays attached to the chart it qualifies. */
.mg-chart-caveat {
  display: block;
  margin: 18px 0 0;
  padding-left: 12px;
  border-left: 2px solid var(--mg-accent);
  color: var(--mg-muted);
  font-size: 10px;
  line-height: 1.7;
}

/* Inline definitions remain visually quiet while giving keyboard and search
   users a clear target in the expanded glossary. */
.mg-term-link {
  color: inherit !important;
  font-weight: inherit;
  text-decoration-line: underline !important;
  text-decoration-color: var(--mg-accent) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.mg-term-link:hover { color: var(--mg-accent) !important; }

.mg-glossary-grid [data-glossary-item][id],
.mg-glossary-grid .mg-glossary-item[id] {
  scroll-margin-top: 138px;
  transition: background-color .45s ease, box-shadow .45s ease;
}

.mg-glossary-grid [data-glossary-item][id]:target,
.mg-glossary-grid .mg-glossary-item[id]:target {
  background: #f6f3ff;
  box-shadow: inset 3px 0 0 var(--mg-violet);
}

@media (max-width: 1180px) {
  .mg-chapter-progress { top: 116px; }
  .admin-bar .mg-chapter-progress { top: 148px; }
  .gbds-v2-monitor-guide-shell .mg-chapter[id] { scroll-margin-top: 174px; }
  .admin-bar .gbds-v2-monitor-guide-shell .mg-chapter[id] { scroll-margin-top: 206px; }

  .mg-chapter-progress {
    grid-template-columns: minmax(132px, auto) minmax(0, 1fr);
    padding-right: 18px;
    padding-left: 18px;
  }

  .mg-chapter-progress > div {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .mg-chapter-progress > div::-webkit-scrollbar { display: none; }
  .mg-chapter-progress a { min-width: 78px; }

  .mg-route-verdict { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .mg-finder-refine-grid { grid-template-columns: 1fr; }

  .mg-ranking-filters { grid-template-columns: 1fr; }
  .mg-ranking-filters > small { grid-column: 1; }
  .mg-product-status { align-items: flex-start; flex-direction: column; gap: 5px; }
  .mg-product-status > p:last-child { text-align: left; }

  .mg-family-tree { grid-template-columns: 1fr; }
  .mg-family-root { min-height: 0; }
  .mg-family-tree > .mg-family-branch article:first-child { border-left: 0; }

  .mg-route-verdict ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
  .admin-bar .mg-chapter-progress { top: 162px; }
  .admin-bar .gbds-v2-monitor-guide-shell .mg-chapter[id] { scroll-margin-top: 220px; }
}

@media (max-width: 760px) {
  .mg-chapter-progress { top: 103px; }
  .admin-bar .mg-chapter-progress { top: 149px; }
}

@media (max-width: 640px) {
  .mg-chapter-progress {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 50px;
    padding-right: 12px;
    padding-left: 12px;
    column-gap: 8px;
  }

  .mg-chapter-progress-label small { display: none; }
  .mg-chapter-progress-label strong { max-width: 88px; font-size: 10px; }
  .mg-chapter-progress a { min-width: 36px; padding: 0 5px; }
  .mg-chapter-progress a b { display: none; }
  .mg-chapter-progress a span { font-size: 9px; }

  .gbds-v2-monitor-guide-shell :is(.mg-chapter, .mg-routes, .mg-models) > .mg-reading-bridge {
    margin-top: 38px;
    gap: 14px;
  }

  .gbds-v2-monitor-guide-shell :is(.mg-chapter, .mg-routes, .mg-models) > .mg-reading-bridge h3 {
    font-size: clamp(21px, 7vw, 28px);
  }

  .mg-finder-refine summary span { font-size: 12px; }
  .mg-finder .mg-finder-refine .mg-choice-row--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .mg-family-tree > .mg-family-branch { grid-template-columns: 1fr; }
  .mg-family-tree > .mg-family-branch article {
    min-height: 0;
    border-top: 1px solid var(--mg-line);
    border-left: 0;
  }

  .mg-black-scene-head { text-align: left; }

  .mg-motion-stage-head { align-items: flex-start; }
  .mg-motion-stage-tools { align-items: flex-end; flex-direction: column; }
  .mg-motion-replay { min-height: 32px; }

  .mg-route-verdict { padding: 20px 16px; }
  .mg-route-verdict ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mg-route-bottleneck { align-items: flex-start; flex-direction: column; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .mg-chapter-progress > i > span,
  .mg-signal-route [data-route-step] { transition: none; }

  .mg-motion-stage .mg-fall-live,
  .mg-motion-stage.is-playing .mg-fall-live,
  .mg-motion-replay { display: none !important; animation: none !important; }
}