/* Research batches 9-10: portrait control and commercial production. */
.batch-nine-article { display: grid; gap: 24px; }
body:has(.outfit-study) { --research-accent: #d95f58; --research-pink: #eef1eb; --research-mint: #f1e6df; --research-dark: #183d3a; }
body:has(.combine-study) { --research-accent: #df7448; --research-pink: #e7eff0; --research-mint: #f2e8dc; --research-dark: #173b46; }
body:has(.eyes-study) { --research-accent: #a85f86; --research-pink: #eee7ed; --research-mint: #e7efea; --research-dark: #30353a; }
body:has(.hair-study) { --research-accent: #cc7654; --research-pink: #e7eeea; --research-mint: #efe6de; --research-dark: #153a32; }
body:has(.expression-study) { --research-accent: #d2647c; --research-pink: #f1e8e8; --research-mint: #e7edeb; --research-dark: #443139; }
body:has(.white-product-study) { --research-accent: #ef765f; --research-pink: #edf3f2; --research-mint: #f0ece6; --research-dark: #294047; }
body:has(.chrome-study) { --research-accent: #e59643; --research-pink: #e5edef; --research-mint: #eee8df; --research-dark: #172e38; }
body:has(.fabric-study) { --research-accent: #c95e4b; --research-pink: #efe8dc; --research-mint: #e6ede6; --research-dark: #263a34; }
body:has(.scale-study) { --research-accent: #dd7350; --research-pink: #eee9df; --research-mint: #e7eee8; --research-dark: #294037; }
body:has(.order-study) { --research-accent: #e1675e; --research-pink: #e8edef; --research-mint: #ece8df; --research-dark: #182f3c; }

.outfit-locks,
.combine-equation,
.fabric-strip,
.scale-ruler,
.color-depth,
.expression-scale,
.room-ruler,
.order-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font: 850 11px/1.25 Inter, sans-serif;
  text-transform: uppercase;
}
.outfit-locks span,
.combine-equation span,
.combine-equation strong,
.fabric-strip span,
.scale-ruler span,
.color-depth span,
.expression-scale span,
.room-ruler span,
.order-rail span {
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--research-dark) 22%, transparent);
  border-radius: 8px;
  background: rgba(255,255,255,.72);
}
.outfit-locks .change,
.combine-equation strong { color: #fff; border-color: transparent; background: var(--research-accent); }
.combine-equation i { color: var(--research-accent); font-style: normal; font-size: 18px; }

.outfit-risk,
.source-compat,
.eyes-check,
.muscle-map,
.edge-cases,
.white-materials,
.room-anchors,
.edit-path,
.stage-gates,
.pattern-check {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 26px 0;
}
.muscle-map,
.white-materials,
.room-anchors,
.edit-path,
.stage-gates,
.pattern-check { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.outfit-risk article,
.source-compat article,
.eyes-check article,
.muscle-map article,
.edge-cases article,
.room-anchors article,
.edit-path article,
.stage-gates article,
.pattern-check article {
  min-width: 0;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--research-dark) 16%, transparent);
  border-radius: 8px;
  background: rgba(255,255,255,.76);
}
.outfit-risk b,
.source-compat b,
.eyes-check b,
.muscle-map b,
.edge-cases b,
.room-anchors b,
.edit-path b,
.stage-gates b,
.pattern-check b { display: block; margin-bottom: 8px; color: var(--research-accent); font: 900 12px/1.2 Inter, sans-serif; text-transform: uppercase; }
.outfit-risk p,
.source-compat p,
.eyes-check p,
.muscle-map p,
.edge-cases p,
.room-anchors p,
.edit-path p,
.stage-gates p,
.pattern-check p { margin: 0; font-size: 14px; line-height: 1.55; }

.outfit-body-map,
.light-match,
.eye-landmarks,
.hairline-zones,
.outfit-check,
.hair-check,
.expression-check,
.white-check,
.chrome-check,
.scale-check {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin: 26px 0;
  border: 1px solid color-mix(in srgb, var(--research-dark) 18%, transparent);
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--research-dark) 18%, transparent);
}
.light-match,
.eye-landmarks,
.hairline-zones,
.expression-check { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.outfit-body-map span,
.light-match span,
.eye-landmarks span,
.hairline-zones span,
.outfit-check span,
.hair-check span,
.expression-check span,
.white-check span,
.chrome-check span,
.scale-check span {
  min-width: 0;
  padding: 17px;
  background: rgba(255,255,255,.88);
  font: 800 12px/1.4 Inter, sans-serif;
}

.fabric-strip { justify-content: space-between; }
.fabric-strip span:nth-child(1) { background: #e7ddca; }
.fabric-strip span:nth-child(2) { background: #d9e2df; }
.fabric-strip span:nth-child(3) { background: #eee3df; }
.combine-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 26px 0;
}
.combine-flow article { padding: 18px; border-top: 3px solid var(--research-accent); background: rgba(255,255,255,.72); }
.combine-flow b { display: block; margin-bottom: 14px; font: 900 26px/1 Inter, sans-serif; color: var(--research-accent); }
.combine-flow p { margin: 0; font-size: 13px; }

.eye-orbit { position: relative; width: min(320px, 100%); height: 84px; margin-top: 28px; }
.eye-orbit i { position: absolute; top: 8px; width: 66px; height: 66px; border: 2px solid var(--research-accent); border-radius: 50%; }
.eye-orbit i:nth-child(1) { left: 0; opacity: .4; }
.eye-orbit i:nth-child(2) { left: 42px; opacity: .7; }
.eye-orbit i:nth-child(3) { left: 84px; }
.eye-orbit span { position: absolute; left: 170px; top: 32px; white-space: nowrap; font: 900 10px/1 Inter, sans-serif; text-transform: uppercase; }
.reference-rank { display: grid; gap: 10px; margin: 26px 0; counter-reset: rank; }
.reference-rank span { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-left: 4px solid var(--research-accent); background: rgba(255,255,255,.72); }
.reference-rank b { color: var(--research-accent); font: 900 22px/1 Inter, sans-serif; }

.strand-field { display: flex; align-items: end; gap: 8px; height: 80px; margin-top: 24px; }
.strand-field i { width: 7px; border-radius: 9px 9px 0 0; background: var(--research-accent); transform: rotate(var(--r, 0deg)); }
.strand-field i:nth-child(1) { height: 38px; --r: -12deg; opacity: .45; }
.strand-field i:nth-child(2) { height: 62px; --r: -5deg; opacity: .7; }
.strand-field i:nth-child(3) { height: 78px; }
.strand-field i:nth-child(4) { height: 58px; --r: 7deg; opacity: .7; }
.strand-field i:nth-child(5) { height: 34px; --r: 14deg; opacity: .45; }
.volume-profile,
.pattern-frequency,
.shadow-profile {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 26px 0;
  font: 900 10px/1.2 Inter, sans-serif;
  text-transform: uppercase;
}
.volume-profile i,
.pattern-frequency i,
.shadow-profile i { height: 7px; border-radius: 10px; background: linear-gradient(90deg, var(--research-accent), color-mix(in srgb, var(--research-accent) 20%, white)); }

.expression-scale i,
.room-ruler i,
.order-rail i { width: 38px; height: 2px; background: var(--research-accent); }
.expression-risk,
.white-light-plan,
.environment-map,
.seam-rules,
.scale-passport {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 26px 0;
}
.environment-map,
.seam-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.expression-risk span,
.white-light-plan span,
.environment-map span,
.seam-rules span,
.scale-passport span,
.white-materials span {
  padding: 18px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--research-accent) 11%, white);
  font: 750 13px/1.45 Inter, sans-serif;
}
.white-materials span b,
.scale-passport span b { display: block; margin-bottom: 7px; color: var(--research-accent); }

.tone-steps { display: flex; height: 54px; margin-top: 26px; border: 1px solid rgba(22,40,45,.15); border-radius: 8px; overflow: hidden; }
.tone-steps i { flex: 1; background: hsl(190 12% var(--light)); }
.tone-steps i:nth-child(1) { --light: 100%; }
.tone-steps i:nth-child(2) { --light: 97%; }
.tone-steps i:nth-child(3) { --light: 93%; }
.tone-steps i:nth-child(4) { --light: 88%; }
.tone-steps i:nth-child(5) { --light: 80%; }

.highlight-ribbons { position: relative; display: flex; gap: 22px; align-items: center; justify-content: center; height: 90px; margin-top: 26px; border-radius: 8px; background: #13252c; overflow: hidden; }
.highlight-ribbons i { width: 28px; height: 120px; border: 4px solid transparent; border-left-color: #dff8ff; border-right-color: #f1a556; border-radius: 50%; transform: rotate(var(--r)); }
.highlight-ribbons i:nth-child(1) { --r: -22deg; opacity: .5; }
.highlight-ribbons i:nth-child(2) { --r: 0deg; }
.highlight-ribbons i:nth-child(3) { --r: 22deg; opacity: .5; }
.chrome-curves { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0; text-align: center; }
.chrome-curves i { height: 72px; border: 3px solid var(--research-accent); border-top: 0; border-bottom: 0; border-radius: 50%; }
.chrome-curves span { font: 900 10px/1.2 Inter, sans-serif; text-transform: uppercase; }
.chrome-alert,
.branch-note { display: grid; grid-template-columns: auto 1fr; gap: 2px; margin: 26px 0; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--research-dark) 14%, transparent); }
.chrome-alert b,
.chrome-alert span,
.branch-note b,
.branch-note span { padding: 16px; background: rgba(255,255,255,.82); }
.chrome-alert b,
.branch-note b { color: var(--research-accent); font: 900 11px/1.3 Inter, sans-serif; text-transform: uppercase; }

.pattern-grid { display: grid; grid-template-columns: repeat(3, 24px); grid-template-rows: repeat(3, 24px); gap: 5px; margin-top: 26px; }
.pattern-grid i { border: 2px solid var(--research-accent); background: rgba(255,255,255,.4); }
.fold-wave { display: flex; align-items: center; gap: 0; height: 90px; margin: 26px 0; overflow: hidden; }
.fold-wave i { width: 25%; height: 100%; border: 3px solid var(--research-accent); border-top: 0; border-bottom: 0; border-radius: 50%; transform: translateX(-5px); }

.perspective-fan { position: relative; height: 150px; margin: 28px 0; border-bottom: 2px solid var(--research-dark); overflow: hidden; }
.perspective-fan i { position: absolute; left: 50%; bottom: -2px; width: 2px; height: 180px; background: var(--research-accent); transform-origin: bottom; transform: rotate(var(--angle)); opacity: .65; }
.perspective-fan i:nth-child(1) { --angle: -48deg; }
.perspective-fan i:nth-child(2) { --angle: 0deg; }
.perspective-fan i:nth-child(3) { --angle: 48deg; }
.perspective-fan span { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); font: 900 10px/1 Inter, sans-serif; text-transform: uppercase; }

.impact-map { display: grid; gap: 8px; margin: 26px 0; }
.impact-map span { width: var(--size); max-width: 100%; padding: 12px 16px; border-radius: 6px; color: #fff; background: var(--research-dark); font: 850 11px/1.2 Inter, sans-serif; text-transform: uppercase; }
.impact-map .wide { --size: 100%; }
.impact-map .medium { --size: 76%; background: color-mix(in srgb, var(--research-dark) 72%, var(--research-accent)); }
.impact-map .small { --size: 52%; background: color-mix(in srgb, var(--research-dark) 45%, var(--research-accent)); }
.impact-map .tiny { --size: 28%; background: var(--research-accent); }
.version-tree { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 28px 0; }
.version-tree span { padding: 16px 10px; border: 1px solid var(--research-accent); border-radius: 8px; background: rgba(255,255,255,.76); text-align: center; font: 850 11px/1.2 Inter, sans-serif; text-transform: uppercase; }
.version-tree i { grid-column: 1 / -1; height: 2px; background: linear-gradient(90deg, transparent, var(--research-accent), transparent); }

@media (max-width: 720px) {
  .outfit-risk,
  .source-compat,
  .eyes-check,
  .muscle-map,
  .edge-cases,
  .white-materials,
  .room-anchors,
  .edit-path,
  .stage-gates,
  .pattern-check,
  .outfit-body-map,
  .light-match,
  .eye-landmarks,
  .hairline-zones,
  .outfit-check,
  .hair-check,
  .expression-check,
  .white-check,
  .chrome-check,
  .scale-check,
  .combine-flow,
  .expression-risk,
  .white-light-plan,
  .environment-map,
  .seam-rules,
  .scale-passport { grid-template-columns: 1fr; }
  .volume-profile,
  .pattern-frequency,
  .shadow-profile { grid-template-columns: 1fr; }
  .volume-profile i,
  .pattern-frequency i,
  .shadow-profile i { width: 100%; }
  .eye-orbit { transform: scale(.82); transform-origin: left center; }
  .outfit-locks,
  .combine-equation,
  .fabric-strip,
  .expression-scale,
  .room-ruler,
  .order-rail { align-items: stretch; flex-direction: column; }
  .expression-scale i,
  .room-ruler i,
  .order-rail i { width: 2px; height: 18px; margin-left: 20px; }
  .version-tree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Research batches 7-8: materials, light, reflections, optics and production. */
.transparent-article,
.shadow-article,
.reflection-article,
.blur-article,
.selfie-optics-article,
.comparison-article,
.formats-article,
.geometry-article,
.label-article,
.age-article { display: grid; gap: 24px; }

body:has(.transparent-article) { --research-accent: #e87862; --research-pink: #e7f0ed; --research-mint: #f1ede5; --research-dark: #163f39; }
body:has(.shadow-article) { --research-accent: #e99b45; --research-pink: #f2eadc; --research-mint: #e5ece5; --research-dark: #28372d; }
body:has(.reflection-article) { --research-accent: #df6b62; --research-pink: #e6edf0; --research-mint: #edf0e5; --research-dark: #253a42; }
body:has(.blur-article) { --research-accent: #ed6a55; --research-pink: #edf0e7; --research-mint: #e6eceb; --research-dark: #252d31; }
body:has(.selfie-optics-article) { --research-accent: #db715e; --research-pink: #eee8df; --research-mint: #e7efed; --research-dark: #234144; }
body:has(.comparison-article) { --research-accent: #ee705b; --research-pink: #e8edeb; --research-mint: #f1eae4; --research-dark: #202d31; }
body:has(.formats-article) { --research-accent: #d95e72; --research-pink: #ece7ef; --research-mint: #e5efeb; --research-dark: #273845; }
body:has(.geometry-article) { --research-accent: #e26054; --research-pink: #e8eeeb; --research-mint: #eee9e1; --research-dark: #173b34; }
body:has(.label-article) { --research-accent: #ee765c; --research-pink: #e8ede4; --research-mint: #f2e8df; --research-dark: #18382f; }
body:has(.age-article) { --research-accent: #d96b7e; --research-pink: #eee5e8; --research-mint: #e8eeea; --research-dark: #3b3039; }

.material-atlas,
.shadow-layers,
.reflection-types,
.diagnostic-tree,
.ratio-gallery,
.geometry-errors,
.label-risks,
.comparison-layouts,
.age-scales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 28px 0;
}

.material-atlas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ratio-gallery,
.geometry-errors,
.label-risks,
.comparison-layouts { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.material-atlas article,
.shadow-layers article,
.reflection-types article,
.diagnostic-tree article,
.ratio-gallery article,
.geometry-errors article,
.label-risks article,
.comparison-layouts article,
.age-scales article {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(23, 59, 54, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
}

.material-atlas b,
.shadow-layers b,
.reflection-types b,
.diagnostic-tree b,
.ratio-gallery b,
.geometry-errors b,
.label-risks b,
.age-scales b { display: block; margin-bottom: 10px; color: var(--research-accent); font: 900 11px/1.2 Inter, sans-serif; text-transform: uppercase; }
.material-atlas strong,
.shadow-layers strong,
.diagnostic-tree strong,
.ratio-gallery strong,
.comparison-layouts strong { display: block; font-size: 17px; }
.material-atlas p,
.shadow-layers p,
.reflection-types p,
.diagnostic-tree p,
.ratio-gallery p,
.geometry-errors p,
.label-risks p,
.comparison-layouts p,
.age-scales p { margin: 9px 0 0; font-size: 14px; line-height: 1.55; }

.material-spectrum,
.motion-meter,
.distance-track,
.contrast-steps,
.camera-heights {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 28px;
  font: 850 10px/1.2 Inter, sans-serif;
  text-transform: uppercase;
}
.material-spectrum i,
.motion-meter i,
.distance-track i,
.contrast-steps i,
.camera-heights i { height: 7px; border-radius: 7px; background: linear-gradient(90deg, #55aa95, var(--research-accent)); }

.edge-anatomy,
.reflection-contract,
.safe-zone-map,
.production-lanes,
.age-contract,
.correction-boundary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 28px 0;
  overflow: hidden;
  border: 1px solid rgba(27, 58, 53, 0.2);
  border-radius: 12px;
}
.age-contract,
.correction-boundary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.edge-anatomy > div,
.reflection-contract > div,
.safe-zone-map > div,
.production-lanes > div,
.age-contract > div,
.correction-boundary > div { padding: 22px; background: rgba(255, 255, 255, 0.8); border-right: 1px solid rgba(27, 58, 53, 0.18); }
.edge-anatomy > div:last-child,
.reflection-contract > div:last-child,
.safe-zone-map > div:last-child,
.production-lanes > div:last-child,
.age-contract > div:last-child,
.correction-boundary > div:last-child { border-right: 0; }
.edge-anatomy span,
.reflection-contract strong,
.safe-zone-map strong,
.production-lanes strong,
.age-contract strong,
.correction-boundary strong { display: block; margin-bottom: 10px; color: var(--research-accent); font: 900 12px/1.2 Inter, sans-serif; text-transform: uppercase; }
.edge-anatomy p,
.reflection-contract span,
.safe-zone-map span,
.production-lanes span,
.age-contract span,
.correction-boundary span { font-size: 14px; line-height: 1.55; }

.transparency-equation,
.direction-compass,
.focus-plane,
.linked-regions,
.layer-stack {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 28px 0 0;
  padding: 24px;
  border-radius: 12px;
  color: #fff;
  background: var(--research-dark);
  text-align: center;
}
.transparency-equation span,
.transparency-equation strong,
.direction-compass span,
.direction-compass strong,
.focus-plane span,
.focus-plane b,
.linked-regions span,
.layer-stack span,
.layer-stack strong { padding: 8px 10px; border-radius: 7px; background: rgba(255, 255, 255, 0.1); font-size: 13px; }
.transparency-equation b,
.direction-compass i,
.focus-plane i,
.linked-regions i,
.layer-stack i { width: 34px; height: 2px; background: #72d6c2; font-style: normal; }

.edge-checks,
.shadow-audit,
.pair-audit,
.subject-rules,
.overlay-check,
.label-check,
.retouch-overreach,
.selfie-check,
.alignment-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 28px 0 0;
}
.edge-checks span,
.shadow-audit span,
.pair-audit span,
.subject-rules span,
.overlay-check span,
.label-check span,
.retouch-overreach span,
.selfie-check span,
.alignment-board span {
  position: relative;
  padding: 17px 16px 17px 44px;
  border: 1px solid rgba(25, 58, 54, 0.18);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.76);
  font-size: 14px;
}
.edge-checks span::before,
.shadow-audit span::before,
.pair-audit span::before,
.subject-rules span::before,
.overlay-check span::before,
.label-check span::before,
.retouch-overreach span::before,
.selfie-check span::before,
.alignment-board span::before { position: absolute; left: 17px; color: var(--research-accent); content: "•"; font-size: 22px; line-height: 14px; }

.light-ray-demo { position: relative; height: 118px; margin-top: 26px; overflow: hidden; border-radius: 12px; background: #29382e; }
.light-ray-demo i { position: absolute; top: 18px; left: 18%; width: 3px; height: 82px; background: #f4ad57; transform: rotate(-48deg); transform-origin: top; }
.light-ray-demo span { position: absolute; left: 48%; bottom: 18px; width: 55px; height: 55px; border-radius: 50%; background: #f3e5d2; }
.light-ray-demo b { position: absolute; left: 52%; right: 18%; bottom: 12px; height: 15px; border-radius: 50%; background: rgba(0, 0, 0, 0.55); transform: skewX(-25deg); }

.softness-scale { display: grid; gap: 10px; margin: 28px 0; }
.softness-scale > div { display: grid; grid-template-columns: 150px 1fr 1.2fr; gap: 16px; align-items: center; padding: 16px; background: rgba(255, 255, 255, 0.74); }
.softness-scale span { height: 16px; border-radius: 50%; background: #26352d; filter: blur(0); }
.softness-scale > div:nth-child(2) span { filter: blur(3px); }
.softness-scale > div:nth-child(3) span { filter: blur(7px); opacity: 0.65; }
.softness-scale p { margin: 0; font-size: 13px; line-height: 1.45; }

.mirror-lines { position: relative; height: 140px; margin-top: 26px; overflow: hidden; border-radius: 12px; background: #263b43; }
.mirror-lines span { position: absolute; inset: 14px 45%; border: 2px solid #fff; }
.mirror-lines i { position: absolute; top: 50%; left: 12%; right: 50%; height: 2px; background: #72d6c2; transform: rotate(13deg); }
.mirror-lines i:nth-child(2) { left: 50%; right: 12%; transform: rotate(-13deg); }

.reflection-flow,
.camera-recipe,
.comparison-check,
.format-flow,
.geometry-flow,
.label-flow {
  display: grid;
  gap: 10px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
}
.reflection-flow li,
.camera-recipe li,
.comparison-check li,
.format-flow li,
.geometry-flow li,
.label-flow li { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(25, 58, 54, 0.18); }
.reflection-flow li span,
.camera-recipe li span,
.comparison-check li span,
.format-flow li span,
.geometry-flow li span,
.label-flow li span { color: var(--research-accent); font: 900 11px/1.2 Inter, sans-serif; text-transform: uppercase; }
.reflection-flow p,
.camera-recipe p,
.comparison-check p,
.format-flow p,
.geometry-flow p,
.label-flow p { margin: 0; }

.blur-signatures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 26px; }
.blur-signatures span { padding: 16px; border-top: 5px solid var(--research-accent); background: #fff; text-align: center; font: 850 11px/1.2 Inter, sans-serif; text-transform: uppercase; }
.blur-signatures span:nth-child(2) { border-top-color: #e6a34c; }
.blur-signatures span:nth-child(3) { border-top-color: #55a791; }
.pixel-ladder { display: grid; grid-template-columns: 1.5fr 1fr .75fr; gap: 10px; margin: 28px 0; align-items: end; }
.pixel-ladder article { padding: 22px; background: rgba(255,255,255,.78); border-bottom: 6px solid #55a791; }
.pixel-ladder article:nth-child(2) { min-height: 150px; border-color: #e6a34c; }
.pixel-ladder article:nth-child(3) { min-height: 120px; border-color: var(--research-accent); }
.pixel-ladder p { margin-bottom: 0; font-size: 13px; }
.use-case-matrix,
.ratio-table { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 28px 0; border: 1px solid rgba(25,58,54,.2); }
.use-case-matrix > div,
.ratio-table > div { display: flex; justify-content: space-between; gap: 16px; padding: 17px; background: rgba(255,255,255,.76); border-bottom: 1px solid rgba(25,58,54,.15); }
.use-case-matrix span,
.ratio-table span { color: #52625f; text-align: right; }

.face-depth-map { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; margin-top: 28px; font: 850 10px/1.2 Inter, sans-serif; text-transform: uppercase; }
.face-depth-map i { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--research-accent), #58a997); }
.distortion-signs,
.age-signals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 28px 0; }
.distortion-signs article,
.age-signals article { padding: 18px 14px; border-top: 5px solid var(--research-accent); background: #fff; }
.distortion-signs b,
.age-signals b { display: block; margin-bottom: 10px; color: var(--research-dark); }
.distortion-signs p,
.age-signals p { margin: 0; font-size: 12px; line-height: 1.5; }

.comparison-locks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 28px; }
.comparison-locks span { padding: 15px 8px; border: 1px solid #67a99a; background: rgba(255,255,255,.7); text-align: center; font: 850 10px/1.2 Inter, sans-serif; text-transform: uppercase; }
.bias-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 28px 0; }
.bias-cards article { padding: 20px 16px; background: #fff; border-bottom: 5px solid var(--research-accent); }
.bias-cards b { display: block; margin-bottom: 10px; }
.bias-cards p { margin: 0; font-size: 13px; line-height: 1.5; }
.histogram-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 130px; margin: 28px 0 0; align-items: end; }
.histogram-pair i { height: 65%; background: repeating-linear-gradient(90deg, var(--research-accent) 0 7px, transparent 7px 11px); clip-path: polygon(0 100%, 0 70%, 18% 40%, 36% 62%, 58% 12%, 78% 35%, 100% 70%, 100% 100%); }
.histogram-pair i:nth-child(2) { height: 85%; background-color: transparent; background-image: repeating-linear-gradient(90deg, #61aa97 0 7px, transparent 7px 11px); }

.format-stack { position: relative; height: 140px; margin-top: 26px; }
.format-stack i { position: absolute; inset: 8px 22%; border: 2px solid #fff; }
.format-stack i:nth-child(2) { inset: 14px 34%; border-color: #f0cf74; }
.format-stack i:nth-child(3) { inset: 4px 41%; border-color: #df6b79; }
.format-stack i:nth-child(4) { inset: 34px 12%; border-color: #69b29f; }
.ratio-gallery b { color: var(--research-accent); font-size: 24px; }
.format-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 28px; }
.format-preview span { display: grid; min-height: 110px; place-items: center; padding: 14px; border: 2px solid #65a998; background: rgba(255,255,255,.65); text-align: center; font-size: 12px; }
.format-preview span:nth-child(1) { border-radius: 50%; }
.format-preview span:nth-child(3) { min-height: 150px; }

.geometry-points { position: relative; height: 140px; margin-top: 25px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; }
.geometry-points::before { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 1px; content: ""; background: #fff; }
.geometry-points i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #76dac4; }
.geometry-points i:nth-child(1) { left: 48%; top: 8px; }.geometry-points i:nth-child(2) { left: 32%; top: 42%; }.geometry-points i:nth-child(3) { right: 32%; top: 42%; }.geometry-points i:nth-child(4) { left: 25%; bottom: 12px; }.geometry-points i:nth-child(5) { right: 25%; bottom: 12px; }.geometry-points i:nth-child(6) { left: 48%; bottom: 8px; }
.ratio-table { grid-template-columns: repeat(5, 1fr); }
.ratio-table > div { display: block; border-right: 1px solid rgba(25,58,54,.15); }
.ratio-table strong { display: block; margin-bottom: 10px; color: var(--research-accent); }
.ratio-table span { display: block; text-align: left; font-size: 12px; }

.layer-stack { flex-wrap: wrap; }
.surface-wrap { position: relative; height: 150px; margin: 28px 0 0; border-radius: 12px; background: #193a31; overflow: hidden; }
.surface-wrap span { position: absolute; inset: 24px 32%; border-radius: 50%; border: 2px solid #fff; }
.surface-wrap i { position: absolute; top: 24px; bottom: 24px; width: 2px; background: #72d6c2; transform: rotate(10deg); }
.surface-wrap i:first-child { left: 34%; }.surface-wrap i:last-child { right: 34%; transform: rotate(-10deg); }

.age-map { position: relative; height: 145px; margin-top: 25px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); }
.age-map i { position: absolute; width: 22px; height: 12px; border-radius: 50%; border: 2px solid #71d5bd; }
.age-map i:nth-child(1) { left: 34%; top: 35%; }.age-map i:nth-child(2) { right: 34%; top: 35%; }.age-map i:nth-child(3) { left: 42%; top: 62%; border-color: var(--research-accent); }.age-map i:nth-child(4) { right: 42%; top: 62%; border-color: var(--research-accent); }

.transparent-limit,
.shadow-limit,
.reflection-limit,
.blur-limit,
.selfie-limit,
.comparison-limit,
.formats-limit,
.geometry-limit,
.label-limit,
.age-limit { border-top-color: #58a894 !important; background: var(--research-mint) !important; }

@media (max-width: 820px) {
  .material-atlas,
  .distortion-signs,
  .age-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bias-cards { grid-template-columns: repeat(2, 1fr); }
  .ratio-table { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .material-atlas,
  .shadow-layers,
  .reflection-types,
  .diagnostic-tree,
  .ratio-gallery,
  .geometry-errors,
  .label-risks,
  .comparison-layouts,
  .age-scales,
  .edge-anatomy,
  .reflection-contract,
  .safe-zone-map,
  .production-lanes,
  .age-contract,
  .correction-boundary,
  .edge-checks,
  .shadow-audit,
  .pair-audit,
  .subject-rules,
  .overlay-check,
  .label-check,
  .retouch-overreach,
  .selfie-check,
  .alignment-board,
  .pixel-ladder,
  .use-case-matrix,
  .distortion-signs,
  .age-signals,
  .bias-cards,
  .comparison-locks,
  .format-preview,
  .ratio-table { grid-template-columns: 1fr; }
  .edge-anatomy > div,
  .reflection-contract > div,
  .safe-zone-map > div,
  .production-lanes > div,
  .age-contract > div,
  .correction-boundary > div { border-right: 0; border-bottom: 1px solid rgba(27,58,53,.18); }
  .transparency-equation,
  .direction-compass,
  .focus-plane,
  .linked-regions,
  .layer-stack { flex-direction: column; }
  .transparency-equation b,
  .direction-compass i,
  .focus-plane i,
  .linked-regions i,
  .layer-stack i { width: 2px; height: 24px; }
  .material-spectrum,
  .motion-meter,
  .distance-track,
  .contrast-steps,
  .camera-heights { grid-template-columns: 1fr; text-align: center; }
  .softness-scale > div { grid-template-columns: 1fr; }
  .reflection-flow li,
  .camera-recipe li,
  .comparison-check li,
  .format-flow li,
  .geometry-flow li,
  .label-flow li { grid-template-columns: 72px 1fr; }
  .format-preview span:nth-child(3) { min-height: 110px; }
}


* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}