.rHero,
.rAreas,
.rApps,
.rWork,
.rCreator,
.rContact {
  --r-black: #070809;
  --r-white: #f1f1ef;
  --r-line: #2a2b2d;
  --r-metal: #a4a6a8;
}
.rHero {
  height: calc(100svh - 82px);
  min-height: 720px;
  background: #070809;
  color: #f1f1ef;
  position: relative;
  overflow: hidden;
}
.rGrid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#ffffff0b 1px, transparent 1px),
    linear-gradient(90deg, #ffffff0b 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, #000, transparent 85%);
}
.rEclipse {
  position: absolute;
  width: min(72vw, 1080px);
  aspect-ratio: 1;
  border-radius: 50%;
  right: -13vw;
  top: 50%;
  transform: translateY(-53%);
  filter: saturate(0.82);
  animation: eclipseDrift 14s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.rCorona {
  position: absolute;
  inset: 5%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff0 55%, #dbe7ff12 62%, #b8d5ff38 67%, #4f8be622 71%, transparent 77%);
  box-shadow: 0 0 90px #a8c7ff18, 0 0 220px #1759c022;
  animation: coronaPulse 6s ease-in-out infinite;
}
.rCorona::before,
.rCorona::after {
  content: "";
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  background: conic-gradient(from 10deg, transparent 0 8%, #d9e7ff1f 10%, transparent 13% 39%, #fff2 42%, transparent 45% 71%, #3976cc1c 74%, transparent 78%);
  filter: blur(12px);
  animation: coronaRotate 28s linear infinite;
}
.rCorona::after { inset: -14%; opacity: 0.42; filter: blur(25px); animation-direction: reverse; }
.rEclipseDisc {
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #111315, #020304 58%, #000 100%);
  box-shadow: inset -28px -18px 65px #000, inset 12px 10px 35px #262a3040, -5px 0 8px #f1f6ffcc, -15px 0 42px #8db8ff80, -38px 0 110px #2367d04d;
}
.rEclipseDisc::before { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: linear-gradient(90deg, #ffffffd9 0, #b8d5ff6e 1.2%, transparent 4%); }
.rDiamond { position: absolute; width: 9px; height: 9px; left: 15.3%; top: 47%; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 3px #fff, 0 0 30px 10px #b9d4ff, 0 0 80px 24px #3479df; animation: diamondPulse 3.8s ease-in-out infinite; }
.rDiamond::before,
.rDiamond::after { content: ""; position: absolute; left: 50%; top: 50%; width: 150px; height: 1px; background: linear-gradient(90deg, transparent, #fff, transparent); transform: translate(-50%, -50%); }
.rDiamond::after { width: 1px; height: 95px; background: linear-gradient(transparent, #fff, transparent); }
@keyframes eclipseDrift {
  to {
    transform: translate(-1.3vw, -51%) scale(1.015);
  }
}
@keyframes coronaPulse { 50% { opacity: 0.72; transform: scale(1.025); } }
@keyframes coronaRotate { to { transform: rotate(360deg); } }
@keyframes diamondPulse { 50% { opacity: 0.56; transform: scale(0.75); } }
.rHeroInner {
  position: relative;
  z-index: 2;
  width: calc(100% - 8vw);
  height: 100%;
  margin: auto;
  padding: 6vh 0;
  display: flex;
  flex-direction: column;
}
.rHeroMeta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  font: 8px Arial;
  letter-spacing: 0.22em;
  color: #94979d;
}
.rHeroMeta span:nth-child(2) {
  text-align: center;
}
.rHeroMeta span:last-child {
  text-align: right;
}
.rHeroTitle {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: 0 5vw;
  margin: auto 0;
  font:
    400 clamp(80px, 11vw, 175px)/0.78 Arial,
    sans-serif;
  letter-spacing: -0.075em;
}
.rHeroTitle span:nth-child(2),
.rHeroTitle span:nth-child(4) {
  color: transparent;
  -webkit-text-stroke: 1px #aeb1b5;
}
.rHeroFoot {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  align-items: end;
  border-top: 1px solid #ffffff30;
  padding-top: 24px;
}
.rHeroFoot h1 {
  font:
    400 clamp(22px, 2.4vw, 38px)/1.4 "Yu Gothic",
    sans-serif;
  margin: 0;
}
.rHeroFoot p {
  font-size: 11px;
  line-height: 1.9;
  color: #a8abb0;
  margin: 0;
}
.rHeroFoot a,
.rApps a,
.rWork a,
.rCreator a,
.rContact a {
  font: 9px Arial;
  letter-spacing: 0.12em;
  border-bottom: 1px solid;
  padding-bottom: 7px;
}
.rScroll {
  position: absolute;
  right: 14px;
  top: 50%;
  writing-mode: vertical-rl;
  font: 7px Arial;
  letter-spacing: 0.28em;
  color: #71747a;
}
.rIntro {
  display: grid;
  grid-template-columns: 1fr 5fr 3fr;
  gap: 3vw;
  padding: 18vh 6vw;
  background: #f1f1ef;
  min-height: 92vh;
  align-items: start;
}
.rIndex,
.rSectionHead > span,
.rAppsCopy > span,
.rWorkInfo > span,
.rCreatorCopy > span,
.rContact span {
  font: 12px Georgia;
  color: #85888d;
}
.rLabel {
  font: 8px Arial !important;
  letter-spacing: 0.23em !important;
  color: #85888d !important;
  text-transform: uppercase;
}
.rIntro h2,
.rSectionHead h2,
.rApps h2,
.rWork h2,
.rCreator h2,
.rContact h2 {
  font:
    400 clamp(55px, 7vw, 108px)/1.03 "Yu Mincho",
    Georgia,
    serif;
  letter-spacing: -0.06em;
  margin: 3vh 0;
}
.rIntroText {
  padding-top: 15vh;
}
.rIntroText > p {
  font-size: 14px;
  line-height: 2.1;
  color: #50545a;
}
.rIntro dl {
  margin-top: 8vh;
}
.rIntro dl div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #c9cacc;
  padding: 14px 0;
}
.rIntro dt {
  font: 7px Arial;
  letter-spacing: 0.17em;
  color: #92959a;
}
.rIntro dd {
  margin: 0;
  font: 9px Arial;
  letter-spacing: 0.1em;
}
.rAreas {
  background: #08090a;
  color: #f1f1ef;
  padding: 15vh 6vw;
}
.rSectionHead {
  display: grid;
  grid-template-columns: 1fr 2fr 5fr;
  align-items: start;
  margin-bottom: 12vh;
}
.rSectionHead h2 {
  margin: 0;
}
.rArea {
  display: grid;
  grid-template-columns: 80px 110px 1.5fr 2fr 35px;
  align-items: center;
  border-top: 1px solid #2d2f32;
  min-height: 180px;
  transition:
    background 0.5s,
    padding 0.5s;
}
.rArea:hover {
  background: #111315;
  padding: 0 28px;
}
.rArea > span {
  font: 12px Georgia;
  color: #6f7379;
}
.rArea > b {
  font: 8px Arial;
  letter-spacing: 0.2em;
  color: #8d9196;
}
.rArea h3 {
  font:
    400 clamp(28px, 3.2vw, 52px) "Yu Mincho",
    Georgia;
  margin: 0;
}
.rArea p {
  font-size: 11px;
  line-height: 1.9;
  color: #898d93;
  max-width: 450px;
}
.rArea i {
  font: 20px Arial;
  color: #b8bbc0;
  transition: transform 0.4s;
}
.rArea:hover i {
  transform: rotate(45deg);
}
.rApps {
  min-height: 110vh;
  background: #d9dadd;
  color: #090a0b;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  align-items: center;
  padding: 10vh 6vw;
  overflow: hidden;
}
.rAppsCopy {
  padding-right: 5vw;
}
.rAppsCopy > p:not(.rLabel) {
  font-size: 13px;
  line-height: 2;
  color: #5e6268;
  margin-bottom: 50px;
}
.rAppObject {
  perspective: 1600px;
}
.rAppGlass {
  height: 570px;
  background: #101113;
  border-radius: 6px;
  border: 1px solid #ffffff2d;
  box-shadow: 0 55px 100px #292a2e55;
  transform: rotateY(-8deg) rotateX(3deg);
  transition: 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
.rAppObject.in .rAppGlass {
  transform: none;
}
.rAppGlass > header {
  height: 48px;
  border-bottom: 1px solid #ffffff18;
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 7px;
}
.rAppGlass > header i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4f5257;
}
.rAppGlass > header span {
  font: 7px Arial;
  letter-spacing: 0.2em;
  color: #74777d;
  margin-left: auto;
}
.rAppGlass > main {
  height: calc(100% - 48px);
  display: grid;
  grid-template-columns: 55px 1fr 200px;
}
.rAppNav {
  border-right: 1px solid #ffffff12;
  color: #55595f;
  font: 7px/6 Arial;
  text-align: center;
  padding-top: 45px;
}
.rAppMain {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7vw;
  color: #f1f1ef;
  position: relative;
  background: radial-gradient(circle at 65% 50%, #006dff40, transparent 43%);
}
.rAppMain small,
.rAppSide small {
  font: 7px Arial;
  letter-spacing: 0.18em;
  color: #70747b;
}
.rAppMain b {
  font: 400 clamp(42px, 6vw, 86px)/0.86 Arial;
  letter-spacing: -0.06em;
  margin: 25px 0;
}
.rAppMain span {
  font-size: 10px;
  color: #9a9da2;
}
.rAppSide {
  border-left: 1px solid #ffffff12;
  padding: 45px 25px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: #fff;
}
.rAppSide b {
  font: 9px Arial;
  letter-spacing: 0.1em;
  margin-bottom: 28px;
}
.rWork {
  min-height: 105vh;
  background: #08090a;
  color: #f1f1ef;
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
}
.rWorkImage {
  position: relative;
  margin: 6vw 0 6vw 6vw;
  overflow: hidden;
}
.rWorkImage img {
  object-fit: cover;
  filter: saturate(0.7) contrast(1.08);
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.rWorkImage.in img {
  transform: scale(1.035);
}
.rWorkInfo {
  padding: 12vh 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rWorkInfo > p:not(.rLabel) {
  font-size: 11px;
  line-height: 2;
  color: #858990;
}
.rWorkInfo dl {
  display: grid;
  grid-template-columns: 80px 1fr;
  border-top: 1px solid #303237;
  margin: 8vh 0 5vh;
  padding-top: 25px;
  font-size: 8px;
  line-height: 2.5;
}
.rWorkInfo dt {
  color: #666a70;
}
.rWorkInfo dd {
  margin: 0;
  letter-spacing: 0.08em;
}
.rCreator {
  min-height: 100vh;
  background: #ececee;
  color: #0a0b0c;
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  overflow: hidden;
}
.rCreatorCopy {
  padding: 12vh 6vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.rCreatorCopy > p:not(.rLabel) {
  font-size: 12px;
  line-height: 2;
  color: #61656b;
  margin-bottom: 45px;
}
.rCreatorImage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: end;
  overflow: hidden;
}
.rCreatorImage img {
  position: relative;
  z-index: 2;
  width: min(760px, 60vw);
  height: auto;
  filter: grayscale(0.12) contrast(1.04);
}
.rCreatorRing {
  position: absolute;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  border: 1px solid #b7b8bb;
  background: radial-gradient(circle, #fff 0, transparent 64%);
  top: 10%;
}
.rNews {
  background: #f1f1ef;
  padding: 15vh 6vw;
}
.rNewsList a {
  display: grid;
  grid-template-columns: 130px 90px 1fr 30px;
  align-items: center;
  border-top: 1px solid #c9cacc;
  min-height: 105px;
}
.rNewsList time,
.rNewsList span {
  font: 8px Arial;
  letter-spacing: 0.1em;
}
.rNewsList span {
  color: #73777d;
}
.rNewsList p {
  font-size: 12px;
}
.rNewsList i {
  font: 16px Arial;
}
.rContact {
  min-height: 92vh;
  background: #08090a;
  color: #f1f1ef;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.rContactGlow {
  position: absolute;
  width: 70vw;
  height: 70vw;
  border-radius: 50%;
  background: radial-gradient(circle, #075eff26 0, transparent 64%);
}
.rContact > div:last-child {
  position: relative;
  z-index: 2;
}
.rContact > div > p:not(.rLabel) {
  color: #8d9198;
  font-size: 12px;
  line-height: 2;
  margin-bottom: 45px;
}
@media (max-width: 900px) {
  .rEclipse {
    width: 135vw;
    right: -67vw;
    top: 43%;
    opacity: 0.88;
  }
  .rHero {
    height: calc(100svh - 68px);
  }
  .rHeroInner {
    width: calc(100% - 36px);
  }
  .rHeroTitle {
    grid-template-columns: 1fr;
    font-size: 18vw;
    line-height: 0.83;
  }
  .rHeroFoot {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .rHeroFoot p {
    display: none;
  }
  .rIntro {
    grid-template-columns: 35px 1fr;
    padding: 12vh 20px;
  }
  .rIntroText {
    grid-column: 2;
    padding-top: 2vh;
  }
  .rSectionHead {
    grid-template-columns: 35px 1fr;
  }
  .rSectionHead h2 {
    grid-column: 2;
  }
  .rArea {
    grid-template-columns: 40px 60px 1fr 25px;
    min-height: 140px;
  }
  .rArea p {
    display: none;
  }
  .rApps,
  .rCreator {
    grid-template-columns: 1fr;
    padding: 12vh 20px;
  }
  .rAppGlass {
    height: 450px;
    margin-top: 8vh;
  }
  .rAppGlass > main {
    grid-template-columns: 40px 1fr;
  }
  .rAppSide {
    display: none;
  }
  .rWork {
    grid-template-columns: 1fr;
  }
  .rWorkImage {
    min-height: 60vh;
    margin: 0;
  }
  .rWorkInfo {
    padding: 12vh 20px;
  }
  .rCreatorImage {
    min-height: 60vh;
  }
  .rCreatorImage img {
    width: 90vw;
  }
  .rCreatorRing {
    width: 90vw;
    height: 90vw;
  }
  .rNews {
    padding: 12vh 20px;
  }
  .rNewsList a {
    grid-template-columns: 100px 70px 1fr;
  }
  .rNewsList i {
    display: none;
  }
}
@media (max-width: 520px) {
  .rEclipse {
    width: 165vw;
    right: -89vw;
    top: 40%;
  }
  .rDiamond {
    width: 6px;
    height: 6px;
  }
  .rHeroTitle {
    font-size: 19vw;
  }
  .rHeroMeta {
    grid-template-columns: 1fr 1fr;
  }
  .rHeroMeta span:nth-child(2) {
    display: none;
  }
  .rIntro h2,
  .rSectionHead h2,
  .rApps h2,
  .rWork h2,
  .rCreator h2,
  .rContact h2 {
    font-size: 49px;
  }
  .rArea {
    grid-template-columns: 32px 1fr 25px;
  }
  .rArea > b {
    display: none;
  }
  .rArea h3 {
    font-size: 27px;
  }
  .rAppGlass {
    height: 360px;
  }
  .rAppMain {
    padding: 25px;
  }
  .rAppMain b {
    font-size: 46px;
  }
  .rNewsList a {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 22px 0;
  }
  .rNewsList p {
    margin: 0;
  }
}