html {
  min-height: 100%; height: auto;
  --impact-width-factor: .55;
  --impact-height-ratio: .3;
  --impact-peak-opacity: .2;
}
body.research-page {
  --ui-btn-h: 56px;
  min-height: 100svh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  background: linear-gradient(180deg, #04070d, #020408 55%, #010205);
  color: #e6f1ff;
  font-family: 'Satoshi', system-ui, sans-serif;
}
.research-page *, .research-page *::before, .research-page *::after { box-sizing: border-box; }
.research-page #comet-layer { opacity: .38; }
.research-page .comet { width: 5px; height: 5px; }
.research-page .comet::before { width: 190px; height: 7px; }
.research-page .comet::after { width: 170px; height: 2px; }
.research-space { opacity: .48; }
.research-page .points-stars span { width: calc(var(--size) * 1.2); height: calc(var(--size) * 1.2); }
.research-home {
  position: absolute;
  z-index: 3;
  top: max(32px, env(safe-area-inset-top));
  left: clamp(24px, 4vw, 64px);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
  color: #899aa9;
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  transition: color 180ms ease;
}
.research-home img { opacity: .65; transition: opacity 180ms ease; }
.research-home svg { fill: none; stroke: currentColor; stroke-width: 1.2; margin-left: 6px; }
.research-home:hover { color: #e6f1ff; }
.research-home:hover img { opacity: 1; }
.research-home:focus-visible, .research-subject:focus-visible { outline: 1px solid #a3d5f5; outline-offset: 6px; }
.research-shell {
  position: relative;
  z-index: 2;
  width: min(100% - 64px, 1024px);
  margin: 0 auto;
  padding-top: clamp(160px, 31svh, 340px);
  padding-bottom: 80px;
}
.research-identity { text-align: center; animation: researchEntrance 800ms both; }
.research-identity h1 {
  margin: 0;
  font-size: clamp(32px, 4.3vw, 60px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .14em;
  text-shadow: 0 0 28px rgba(140, 210, 255, .1);
}
.research-identity p {
  max-width: 600px;
  margin: 24px auto 0;
  color: #94a3b5;
  font-size: clamp(13px, 1.15vw, 15px);
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: .015em;
  text-wrap: balance;
}
.research-subjects {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 14px;
  margin-top: 64px;
  animation: researchEntrance 850ms 120ms both;
}
.research-subject { width: 100%; --flip-depth: 28px; --corner-size: 8px; --corner-thickness: 1px; }
.research-subject .face {
  font-size: 10px;
  letter-spacing: .1em;
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.18)), rgba(5,9,14,.9);
  border-color: rgba(140,210,255,.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018), 0 0 14px rgba(90,170,255,.055);
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.research-subject .btn-inline-text { display: block; white-space: nowrap; }
.research-subject .btn-word { display: inline-flex; gap: 1px; white-space: nowrap; }
.research-subject:hover .face, .research-subject:active .face, .research-subject[aria-pressed='true'] .face {
  background: linear-gradient(180deg, rgba(140,210,255,.08), rgba(60,110,160,.035)), #080f17;
  border-color: rgba(170,225,255,.48);
  box-shadow: inset 0 0 18px rgba(120,200,255,.035), 0 0 20px rgba(90,170,255,.13);
}
.research-subject[aria-pressed='true'] { --corner-color: rgba(185,231,255,.95); }
.research-subject[aria-pressed='true'] .face { color: #fff; }
.research-subject::after { background: rgba(160,215,255,.12); }
.research-library {
  position: relative;
  margin-top: 42px;
  min-height: 170px;
  border-top: 1px solid rgba(140,210,255,.14);
  border-bottom: 1px solid rgba(140,210,255,.07);
  background: linear-gradient(180deg, rgba(100,160,220,.012), transparent);
  animation: researchEntrance 300ms both;
}
.research-library[hidden] { display: none; }
.research-library::before, .research-library::after {
  content: '';
  position: absolute;
  top: -1px;
  height: 8px;
  width: 16px;
  border-top: 1px solid rgba(170,225,255,.36);
}
.research-library::before { left: 0; border-left: 1px solid rgba(170,225,255,.24); }
.research-library::after { right: 0; border-right: 1px solid rgba(170,225,255,.24); }
.research-entry { padding: 28px 8px; border-bottom: 1px solid rgba(140,210,255,.1); }
.research-entry h2 { font-size: 20px; font-weight: 500; }
.research-entry a { color: inherit; text-decoration: none; }
.research-entry a:hover { color: #fff; text-decoration: underline; }
.research-entry p { color: #94a3b5; font-size: 14px; line-height: 1.7; }
@keyframes researchEntrance { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.landing-motion-paused .research-space * { animation-play-state: paused; }
@media (max-width: 900px) {
  .research-shell { width: min(100% - 48px, 640px); padding-top: clamp(140px, 25svh, 240px); }
  .research-subjects { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }
  .research-identity h1 { font-size: clamp(29px, 5.7vw, 46px); letter-spacing: .09em; }
}
@media (max-width: 480px) {
  .research-home { top: max(18px, env(safe-area-inset-top)); }
  .research-shell { width: calc(100% - 40px); padding-top: 156px; padding-bottom: 48px; }
  .research-identity h1 { font-size: clamp(27px, 7.2vw, 34px); letter-spacing: .07em; }
  .research-identity p { max-width: 310px; margin-top: 20px; font-size: 13px; }
  .research-subjects { gap: 14px 12px; margin-top: 40px; }
  .research-subject .face { font-size: 9px; letter-spacing: .035em; padding: 0 10px; }
  .research-subject .btn-inline-text { display: block; white-space: normal; line-height: 1.6; }
  .research-library { min-height: 150px; margin-top: 32px; }
}
@media (hover: none) {
  .research-subject:hover, .research-subject:active { transform: perspective(900px) rotateX(0deg); }
  .research-subject:hover .ch, .research-subject:active .ch { animation: none; }
  .research-subject:active { translate: 0 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .research-page *, .research-page *::before, .research-page *::after { animation: none !important; transition: none !important; }
  .research-subject:hover, .research-subject:active { transform: none; }
}