:root {
  color-scheme:dark;
  --bg:#050608;
  --text:#f4f4f7;
  --muted:#9599a6;
  --warm:#ff537a;
  --cool:#42cdff
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:90px
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased
}
a {
  color:inherit;
  text-decoration:none
}
a:focus-visible,summary:focus-visible {
  outline:2px solid var(--cool);
  outline-offset:7px
}
header {
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4.5%;
  background:#050608;
  border-bottom:1px solid #ffffff0c
}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:750;
  letter-spacing:.18em;
  font-size:22px
}
.brand img {
  object-fit:contain
}
nav {
  display:flex;
  gap:42px;
  color:#a7a6af;
  font-size:14px
}
nav a:hover {
  color:#fff
}
.skip {
  position:absolute;
  top:-80px;
  z-index:10;
  background:#fff;
  color:#000;
  padding:16px
}
.skip:focus {
  top:10px
}
.hero {
  position:relative;
  min-height:860px;
  height:calc(100svh - 82px);
  max-height:1150px;
  background:linear-gradient(0deg,#050608 0%,transparent 23%),url("assets/rift-worlds.webp") center center/cover no-repeat;
  isolation:isolate
}
.hero-copy {
  position:relative;
  padding:62px 4.8% 0;
  max-width:860px
}
.eyebrow,.tiny,.number,.world-tag {
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:.16em;
  font-weight:500
}
.eyebrow {
  color:var(--muted);
  margin:0 0 24px
}
h1 {
  font-size:clamp(56px,5.8vw,92px);
  line-height:1.02;
  letter-spacing:-.055em;
  margin:0 0 22px;
  font-weight:720
}
h1 span {
  background:linear-gradient(100deg,#ff377b,#ff8646);
  background-clip:text;
  color:transparent
}
.intro {
  font-size:21px;
  line-height:1.5;
  color:#dfdee6;
  margin:0 0 25px
}
.text-link {
  display:inline-flex;
  gap:26px;
  align-items:center;
  font-size:17px;
  padding-bottom:9px;
  border-bottom:1px dashed currentColor
}
.text-link:hover {
  color:white
}
.warm {
  color:var(--warm)
}
.cool {
  color:var(--cool)
}
.hero-bottom {
  position:absolute;
  bottom:52px;
  right:5%;
  width:30%;
  max-width:430px
}
.hero-bottom p {
  margin:0 0 25px
}
.tiny {
  color:#a7dcf2
}
.hero-bottom strong {
  display:block;
  font-size:clamp(30px,3.4vw,54px);
  letter-spacing:-.04em;
  margin:12px 0 20px
}
.release-note {
  font:10px/1.9 ui-monospace,monospace;
  letter-spacing:.1em;
  color:#c0c5ce
}
.release-note>span:last-child {
  letter-spacing:0;
  color:#9a9dab
}
.status-dot {
  display:inline-block;
  width:5px;
  height:5px;
  background:#ff8a57;
  margin-right:6px;
  box-shadow:0 0 12px #ff7549
}
.art-note {
  position:absolute;
  bottom:22px;
  left:4.8%;
  font-size:10px;
  color:#85838e
}
.wrap {
  max-width:1280px;
  margin:auto;
  padding:110px 48px
}
h2 {
  font-size:clamp(36px,4.5vw,64px);
  line-height:1.06;
  letter-spacing:-.045em;
  font-weight:600;
  margin:0 0 54px
}
.world-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px
}
.world-grid article {
  padding:32px 0 34px;
  border-top:1px solid
}
.omarchy {
  border-color:#ff537a!important
}
.macos {
  border-color:#42cdff!important
}
.omarchy .number,.omarchy .world-tag {
  color:var(--warm)
}
.macos .number,.macos .world-tag {
  color:var(--cool)
}
h3 {
  font-size:29px;
  letter-spacing:-.025em;
  font-weight:550;
  margin:28px 0 14px
}
article p {
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
  max-width:470px
}
.world-tag {
  display:block;
  margin-top:35px;
  font-size:10px
}
.custom {
  border-top:1px solid #ffffff17;
  padding-top:26px;
  color:#e3e3e9;
  font-size:14px
}
.custom span {
  color:var(--muted)
}
.principles {
  border-top:1px solid #ffffff17
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:45px
}
.feature-grid .number {
  color:var(--muted)
}
.feature-grid h3 {
  font-size:22px
}
.faq {
  padding-top:30px;
  padding-bottom:110px
}
.faq details {
  border-top:1px solid #ffffff20;
  padding:23px 0
}
.faq summary {
  cursor:pointer;
  font-size:17px
}
.faq details p {
  max-width:790px;
  font-size:15px;
  color:var(--muted);
  line-height:1.8
}
.faq p a {
  color:var(--cool);
  text-decoration:underline;
  text-underline-offset:4px
}
footer.wrap {
  border-top:1px solid #ffffff17;
  padding-top:35px;
  padding-bottom:35px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--muted)
}
footer .brand {
  color:#fff;
  font-size:17px
}
 @media(min-width:1700px) {
  .hero {
  background-position:center 57%
}

}
@media(max-width:900px) {
  .hero {
  min-height:850px;
  background-position:54% center
}
.hero-copy {
  padding-top:50px
}
.hero-bottom {
  width:43%;
  right:5%
}
.wrap {
  padding:80px 30px
}
.feature-grid {
  gap:24px
}
.world-grid {
  gap:30px
}
nav {
  gap:24px
}
.intro {
  font-size:18px
}

}
@media(max-width:600px) {
  header {
  height:70px;
  padding:0 20px
}
.brand {
  font-size:18px;
  gap:4px
}
nav {
  gap:18px;
  font-size:12px
}
nav a:nth-child(2) {
  display:none
}
.hero {
  height:auto;
  min-height:960px;
  background-size:auto 720px;
  background-position:53% 220px;
  background-color:#030406;
  background-repeat:no-repeat
}
.hero-copy {
  padding:38px 24px 0
}
h1 {
  font-size:53px;
  letter-spacing:-.055em
}
.eyebrow {
  font-size:9px;
  margin-bottom:20px
}
.intro {
  font-size:17px
}
.text-link {
  font-size:15px
}
.hero-bottom {
  right:auto;
  left:24px;
  bottom:30px;
  width:calc(100% - 48px);
  max-width:none;
  padding-top:60px;
  background:linear-gradient(transparent,#050608 45%)
}
.hero-bottom strong {
  font-size:35px;
  margin:9px 0 14px
}
.hero-bottom p {
  margin-bottom:18px
}
.art-note {
  bottom:278px;
  font-size:9px;
  left:24px
}
.wrap {
  padding:65px 24px
}
h2 {
  margin-bottom:35px
}
.world-grid,.feature-grid {
  grid-template-columns:1fr;
  gap:25px
}
.world-grid article {
  padding-bottom:20px
}
.feature-grid article {
  border-top:1px solid #ffffff17;
  padding-top:24px
}
.feature-grid h3 {
  margin-top:15px
}
.custom {
  line-height:1.8
}
.custom span {
  display:block
}
.faq {
  padding-top:15px
}
.faq summary {
  font-size:16px;
  padding-right:12px
}
footer.wrap {
  flex-wrap:wrap;
  gap:20px
}
footer p {
  display:none
}

}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto
}

}

.hero-bottom {
  padding:28px;
  background:linear-gradient(120deg,#030811db,#0308119c);
  border-left:1px solid #42cdff50;
  backdrop-filter:blur(6px)
}
@media(max-width:600px) {
  .hero-bottom {
  padding:22px;
  background:#030811df
}

}


@media (forced-colors: active)  {

  h1 span  {
   background: none;
   color: CanvasText;

}

  .hero-bottom  {
   background: Canvas;
   border: 1px solid CanvasText;

}


}