.human-design-page .h-hero { background: radial-gradient(ellipse at 77% 40%, #6b4c6826, transparent 60%), #241c23; }
.human-design-page .h-hero::before { background: linear-gradient(100deg, #251c23b3, #30232e66); }
.h-hero-aura { position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse at 83% 47%, #bb97b11c, transparent 46%), radial-gradient(ellipse at 5% 83%, #bea16c08, transparent 40%); pointer-events: none; }
.human-design-page .n-hero h1 { font-size: clamp(54px, 5.1vw, 76px); }
.human-design-page .n-hero h1 em { color: #cdb0cb; }
.h-universe .n-chart-topline { gap: 13px; }
.h-universe .n-chart-topline i { width: 32px; }
.h-chart-scene { position: relative; width: 100%; max-width: 530px; aspect-ratio: 600 / 620; margin: 8px auto 0; }
.h-bodygraph { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h-center-defined { fill: url('#h-defined'); }
.h-center-open { fill: url('#h-open'); }
.h-channel-flow { stroke-dasharray: 4 87; stroke-dashoffset: 91; animation: h-channel-light 7s linear infinite; opacity: .55; }
.h-label-type { top: 18%; right: -3%; }
.h-label-authority { left: -3%; bottom: 21%; }
.h-universe .n-chart-label { padding: 11px 14px; font-size: 22px; gap: 9px; }
.h-universe .n-chart-label > span { font-size: 29px; }
.h-universe .n-chart-label small { font-size: 8px; }
.h-graph-legend { display: flex; justify-content: center; gap: 22px; margin: 0 0 16px; color: #bba8b5; font-size: 8px; }
.h-graph-legend > span { display: flex; align-items: center; gap: 7px; }
.h-graph-legend i { width: 7px; height: 7px; border: 1px solid #b99b75; border-radius: 1px; background: #493b2d; }
.h-graph-legend .h-defined-dot { background: #96728f; }
.human-design-page .n-insight { min-height: 390px; }
.human-design-page .n-insight h4 { font-size: 37px; }
.human-design-page .n-insight-icon { width: 67px; height: 67px; right: 0; opacity: .45; }
.human-design-page .n-insight .n-overline { font-size: 9px; }
.human-design-page .n-final h2 { font-size: clamp(36px, 3.8vw, 56px); }
@keyframes h-channel-light { 0%, 25% { stroke-dashoffset: 91; opacity: 0; } 45% { opacity: .7; } 78%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (max-width: 1100px) {
  .human-design-page .n-hero h1 { font-size: 61px; }
  .h-universe .n-chart-label { font-size: 18px; gap: 7px; padding: 9px 11px; }
  .h-universe .n-chart-label > span { font-size: 24px; }
  .h-universe .n-chart-label small { font-size: 6px; }
  .h-label-type { right: 0; }
  .h-label-authority { left: -2%; }
  .h-graph-legend { font-size: 7px; gap: 14px; }
  .human-design-page .n-insight-icon { width: 53px; height: 53px; }
}
@media (max-width: 800px) {
  .human-design-page .n-hero h1 { font-size: 51px; }
  .h-universe .n-chart-topline { font-size: 14px; gap: 8px; }
  .h-universe .n-chart-topline i { width: 17px; }
  .h-universe .n-chart-label { font-size: 16px; padding: 7px 9px; }
  .h-universe .n-chart-label > span { font-size: 20px; }
  .h-universe .n-chart-label small { font-size: 5px; }
  .h-label-type { top: 13%; }
  .h-label-authority { bottom: 13%; }
  .h-graph-legend { font-size: 6px; gap: 12px; }
  .h-graph-legend i { width: 6px; height: 6px; }
  .human-design-page .n-insight h4 { font-size: 33px; }
  .human-design-page .n-insight-icon { display: none; }
}
@media (max-width: 600px) {
  .human-design-page .n-hero h1 { font-size: clamp(46px, 12.7vw, 70px); }
  .h-universe { margin-top: 38px; }
  .h-universe .n-chart-topline { font-size: 17px; }
  .h-chart-scene { width: 95%; margin-top: 12px; }
  .h-universe .n-chart-label { font-size: 19px; padding: 9px 11px; }
  .h-universe .n-chart-label small { font-size: 6px; }
  .h-universe .n-chart-label > span { font-size: 25px; }
  .h-label-type { right: -2%; top: 17%; }
  .h-label-authority { left: -2%; bottom: 16%; }
  .h-graph-legend { font-size: 7px; gap: 19px; margin-top: 4px; margin-bottom: 14px; }
  .human-design-page .n-hero-bottom p { font-size: 8px; }
  .human-design-page .n-insight { min-height: 335px; }
  .human-design-page .n-insight h4 { font-size: 33px; }
  .human-design-page .n-insight .n-overline { font-size: 8px; }
}
@media (max-width: 360px) {
  .human-design-page .n-hero h1 { font-size: 42px; }
  .h-universe .n-chart-topline { font-size: 15px; }
  .h-universe .n-chart-label { font-size: 17px; padding: 7px 9px; }
  .h-universe .n-chart-label small { font-size: 5px; }
  .h-graph-legend { font-size: 6px; gap: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .h-channel-flow { animation: none; opacity: 0; }
}