@font-face {
  font-family:Monocraft;
  src:url("assets/monocraft.ttf") format("truetype");
  font-display:swap;
}
:root {
  color-scheme:dark;
  --bg:#101319;
  --deep:#0a0d13;
  --panel:#1a1f29;
  --line:#383f4c;
  --sub:#b3bdcb;
  --ink:#f4f6fa;
  --cyan:#78d8ff;
  --gold:#ffcf70;
  --violet:#c7b0ff;
  --font:Monocraft,monospace;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.55 var(--font);
  font-variant-ligatures:none;
}
h1,h2,h3,p {
  margin:0;
}
h1,h2,h3,b,strong {
  font-weight:400;
}
a {
  color:inherit;
  text-decoration:none;
}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--gold);
  outline-offset:3px;
}
button,input,select {
  font:inherit;
  color:inherit;
}
button,select {
  cursor:pointer;
}
.skip {
  position:absolute;
  left:-999em;
}
.skip:focus {
  top:8px;
  left:8px;
  z-index:5;
  background:var(--deep);
  padding:10px;
}
.wrap {
  width:min(1120px,calc(100% - 56px));
  margin-inline:auto;
}
[hidden] {
  display:none!important;
}
.pixel-icon {
  width:18px;
  height:18px;
  vertical-align:middle;
  flex:none;
}
.top {
  background:var(--deep);
  border-bottom:1px solid var(--line);
}
.mast {
  min-height:72px;
  display:flex;
  align-items:center;
  gap:30px;
  justify-content:space-between;
}
.wordmark {
  width:148px;
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  flex:none;
}
.wordmark img {
  display:block;
  width:100%;
  height:auto;
}
.wordmark span {
  margin-top:1px;
  color:#d9ecfa;
  font-size:10px;
  letter-spacing:.42em;
  padding-left:.42em;
  line-height:1;
}
.navigation {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.navigation a,.server-nav {
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  font-size:12px;
  padding:6px 10px;
  border:1px solid transparent;
}
.navigation [data-glyph],.server-nav [data-glyph] {
  display:inline-flex;
}
.navigation .pixel-icon {
  width:16px;
  height:16px;
  color:var(--cyan);
}
.navigation [data-glyph="layers"] .pixel-icon {
  color:var(--violet);
}
.navigation [data-glyph="book"] .pixel-icon {
  color:var(--gold);
}
.navigation a:hover,.navigation a[aria-current] {
  color:var(--cyan);
  background:#1a252f;
  border-color:#384f60;
}
.server-nav {
  gap:8px;
  color:var(--gold);
  border-color:#80662f;
  background:#272118;
}
.server-nav:hover,.server-nav[aria-current] {
  border-color:var(--gold);
}
.hero {
  position:relative;
  background:linear-gradient(112deg,#0a1727 0%,#142a40 60%,#122332 100%);
  border-bottom:1px solid #394c60;
}
.hero-layout {
  display:grid;
  grid-template-columns:0.85fr 1.25fr;
  gap:clamp(24px,4vw,62px);
  align-items:center;
}
.hero-content {
  min-height:365px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding-block:38px;
}
.hero-project {
  border:1px solid #5d778b;
  background:var(--deep);
  box-shadow:5px 5px 0 #09121c;
  display:block;
  position:relative;
}
.hero-project:hover {
  border-color:var(--cyan);
}
.hero-project img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2.4;
  object-fit:cover;
}
.hero-project>span {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 12px;
  font-size:12px;
  background:#111923;
  border-top:1px solid #3a4756;
}
.hero-project b {
  color:var(--cyan);
}
.hero h1 {
  font-size:clamp(46px,4.7vw,64px);
  line-height:1.07;
  letter-spacing:-.055em;
  text-shadow:4px 4px #121925;
}
.hero h1 span {
  color:var(--cyan);
}
.hero p {
  max-width:480px;
  font-size:15px;
  margin:17px 0 24px;
  color:#e0e5ec;
  text-shadow:1px 2px #111722;
}
.hero p strong {
  color:white;
}
.actions {
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:10px 16px;
  font-size:13px;
  border:1px solid #596677;
  background:#232a35;
  box-shadow:inset 0 -3px #0004;
  color:var(--ink);
}
.button:hover,.button:focus-visible {
  border-color:var(--cyan);
  background:#303c4b;
}
.button.primary {
  background:#8addff;
  color:#082234;
  border-color:#afdfff;
  box-shadow:inset 0 -3px #4791b2;
}
.button.primary:hover {
  background:#b3e9ff;
}
.button.glass {
  background:#18232fe8;
}
.button.gold {
  background:var(--gold);
  border-color:#ffe2a7;
  color:#271c0b;
}
.section {
  padding:36px 0;
}
.section+.section {
  border-top:1px solid var(--line);
}
.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:19px;
}
.section-head h2,.subheading {
  display:flex;
  align-items:center;
  gap:12px;
}
.section-head h2 .pixel-icon {
  color:var(--cyan);
  width:24px;
  height:24px;
}
h2 {
  font-size:clamp(20px,2.5vw,28px);
  line-height:1.3;
  letter-spacing:-.04em;
}
h3 {
  font-size:17px;
  line-height:1.4;
}
.text-link,.source-links a,.inline-link {
  color:var(--cyan);
  font-size:13px;
}
.text-link:hover,.source-links a:hover,.inline-link:hover,footer a:hover,.project-link:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}
.pack-grid,.portal-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.pack-card,.portal,.row-card,.box,.developer {
  background:var(--panel);
  border:1px solid var(--line);
}
.pack-card {
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px;
  color:var(--ink);
  min-width:0;
}
.pack-card:hover,.portal:hover,.row-card:hover,.series-card:hover {
  border-color:var(--cyan);
  background:#202936;
}
.pack-card img {
  width:72px;
  height:72px;
  object-fit:cover;
  border:1px solid #4b5360;
  flex:none;
  background:#11151b;
}
.pack-card h3 {
  font-size:14px;
  overflow-wrap:anywhere;
}
.meta {
  font-size:11px;
  color:var(--cyan);
  margin-top:6px;
  display:block;
}
.pack-card.lead {
  display:block;
  padding:0;
  overflow:hidden;
}
.cover {
  display:flex;
  background:#101822;
  position:relative;
  align-items:center;
  justify-content:center;
  isolation:isolate;
  overflow:hidden;
  height:155px;
  border-bottom:1px solid var(--line);
}
.cover .back {
  position:absolute;
  inset:-16px;
  width:calc(100% + 32px);
  height:calc(100% + 32px);
  object-fit:cover;
  filter:blur(12px) brightness(.47);
  z-index:-1;
  border:0;
}
.cover .front {
  width:85%;
  height:100%;
  padding:12px 0;
  border:0;
  object-fit:contain;
  background:transparent;
}
.lead-copy {
  padding:15px 16px 17px;
  display:block;
}
.lead h3 {
  font-size:17px;
}
.lead-copy.compact {
  padding:0;
}
.pack-symbol {
  display:grid;
  place-items:center;
  background:#122939;
  color:var(--cyan);
  width:54px;
  height:54px;
  flex:none;
}
.summary {
  display:block;
  color:var(--sub);
  font-size:12px;
  margin-top:9px;
}
.portal {
  padding:20px;
  position:relative;
  border-top:2px solid var(--cyan);
}
.portal .pixel-icon,.portal .initial {
  color:var(--cyan);
  width:25px;
  height:25px;
  font-size:24px;
  line-height:25px;
}
.portal.violet {
  border-top-color:var(--violet);
}
.portal.violet .pixel-icon {
  color:var(--violet);
}
.portal.gold {
  border-top-color:var(--gold);
}
.portal .initial {
  color:var(--gold);
  display:block;
}
.portal h3 {
  margin-top:12px;
}
.portal p {
  color:var(--sub);
  font-size:12px;
  margin-top:4px;
}
.portal-arrow {
  position:absolute;
  right:16px;
  top:16px;
  color:var(--sub);
}
.page-head {
  background:var(--deep);
  padding:38px 0 32px;
  border-bottom:1px solid var(--line);
}
.crumb {
  font-size:11px;
  color:var(--sub);
  margin-bottom:12px;
}
.crumb a {
  color:var(--cyan);
}
.page-head h1 {
  font-size:clamp(30px,4.5vw,48px);
  line-height:1.16;
  letter-spacing:-.05em;
}
.page-head p,.box p {
  color:var(--sub);
  margin-top:9px;
}
.page-head p {
  max-width:76ch;
  font-size:14px;
}
.source-links {
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  margin-top:16px;
}
.series-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-bottom:22px;
}
.series-card {
  display:block;
  padding:0;
  background:var(--panel);
  border:1px solid var(--line);
  text-align:left;
}
.series-card img {
  display:block;
  height:auto;
  object-fit:cover;
  width:100%;
  aspect-ratio:3.9;
  object-position:center;
}
.series-card span {
  display:block;
  font-size:12px;
  padding:7px 12px;
  color:var(--ink);
}
.filters {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:end;
}
.filters label,.promo-label {
  font-size:12px;
  color:var(--sub);
  display:grid;
  gap:5px;
}
.filters label:first-child {
  flex:1 1 220px;
}
.filters select,.filters input,.coupon input {
  min-width:0;
  width:100%;
  background:var(--deep);
  border:1px solid #566171;
  padding:9px 12px;
  font-size:14px;
}
.filters select {
  max-width:100%;
}
.result-count {
  font-size:12px;
  color:var(--sub);
  margin:17px 0 12px;
}
.empty {
  padding:22px;
  border:1px solid var(--line);
  color:var(--sub);
}
.developer {
  margin:10px 0;
}
.developer summary {
  padding:12px 16px;
  cursor:pointer;
  overflow-wrap:anywhere;
  color:var(--cyan);
}
.developer summary small {
  float:right;
  color:var(--sub);
  font-size:11px;
}
.project-list {
  list-style:none;
  margin:0;
  padding:0;
}
.project-list li {
  border-top:1px solid #303746;
}
.project-link {
  padding:9px 16px;
  display:block;
  font-size:13px;
}
.project-link span {
  color:var(--sub);
  margin-left:.5em;
}
.pair {
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:16px;
}
.box {
  padding:clamp(18px,3vw,31px);
}
.box h2 {
  font-size:23px;
}
.box h3 {
  margin-top:15px;
}
.box strong {
  color:var(--cyan);
}
.box .actions {
  margin-top:18px;
}
.studio-stamp {
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:18px;
}
.studio-stamp img {
  width:45px;
  height:45px;
  object-fit:contain;
}
.stack-links {
  display:grid;
  gap:0;
  margin-top:15px;
}
.stack-links a {
  display:flex;
  justify-content:space-between;
  color:var(--cyan);
  font-size:13px;
  padding:10px 0;
  border-top:1px solid var(--line);
}
.partner-art {
  display:block;
  width:100%;
  height:auto;
  margin:0 0 22px;
  border:1px solid var(--line);
}
.coupon {
  display:flex;
  gap:8px;
  margin-top:7px;
}
.coupon input {
  width:150px;
  color:var(--gold);
}
.disclosure,.status {
  font-size:12px;
  color:var(--sub);
  margin-top:12px;
}
.status {
  min-height:1.5em;
}
.step-list {
  padding-left:22px;
  color:var(--sub);
}
.step-list li+li {
  margin-top:9px;
}
footer {
  background:var(--deep);
  border-top:1px solid var(--line);
  margin-top:24px;
}
.foot-grid {
  padding:30px 0;
  display:grid;
  grid-template-columns:1.5fr repeat(3,1fr);
  gap:22px;
}
.foot-grid h2 {
  font-size:14px;
  letter-spacing:0;
  margin-bottom:10px;
}
.foot-grid div>a:not(.wordmark) {
  display:block;
  color:var(--sub);
  font-size:12px;
  margin:6px 0;
}
.foot-brand p,.footnote {
  color:var(--sub);
  font-size:11px;
}
.foot-brand p {
  margin-top:14px;
}
.footnote {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
}
.footnote span:last-child {
  text-align:right;
}
@media(max-width:1040px) {
  .mast {
    gap:12px;
  }
  .wordmark {
    width:126px;
  }
  .navigation {
    gap:0;
  }
  .navigation a,.server-nav {
    padding:5px 7px;
    font-size:11px;
  }
}
@media(max-width:920px) {
  .pack-card {
    gap:9px;
  }
  .pack-card img {
    width:54px;
    height:54px;
  }
  .cover .front {
    width:85%;
    height:100%;
  }
  .cover .back {
    width:calc(100% + 32px);
    height:calc(100% + 32px);
  }
}
@media(max-width:850px) {
  .mast {
    flex-wrap:wrap;
    justify-content:space-between;
    gap:9px;
    padding-block:10px;
  }
  .navigation {
    width:100%;
    order:3;
    justify-content:space-between;
    border-top:1px solid #262e3b;
    padding-top:7px;
  }
  .navigation a {
    font-size:11px;
    padding:4px;
  }
}
@media(max-width:720px) {
  .wrap {
    width:calc(100% - 32px);
  }
  .hero-layout {
    grid-template-columns:1fr;
    gap:0;
  }
  .hero-content {
    min-height:0;
    padding:28px 0 20px;
  }
  .hero-project {
    margin-bottom:24px;
  }
  .hero-project img {
    max-height:220px;
  }
  .hero p {
    max-width:380px;
  }
  .pack-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .pack-card.lead .cover {
    height:130px;
  }
  .portal-grid {
    grid-template-columns:1fr;
  }
  .portal {
    padding:15px 18px 15px 62px;
    min-height:73px;
  }
  .portal>.initial,.portal>span:first-child {
    position:absolute;
    left:18px;
    top:22px;
  }
  .portal h3 {
    margin:0;
  }
  .pair {
    grid-template-columns:1fr;
  }
  .foot-grid {
    grid-template-columns:1fr 1fr;
  }
  .footnote {
    display:block;
  }
  .footnote span {
    display:block;
  }
  .footnote span:last-child {
    text-align:left;
    margin-top:5px;
  }
}
@media(max-width:480px) {
  .navigation a {
    flex-direction:column;
    gap:4px;
    padding:4px 1px;
    font-size:clamp(9px,2.8vw,11px);
  }
  body {
    font-size:14px;
  }
  .hero-content {
    padding:25px 0 20px;
    min-height:0;
  }
  .hero h1 {
    font-size:47px;
  }
  .hero p {
    max-width:95%;
    font-size:13px;
  }
  .hero .actions {
    gap:7px;
  }
  .button {
    font-size:12px;
    padding:9px 10px;
  }
  .section {
    padding:24px 0;
  }
  .section-head {
    gap:10px;
  }
  .section-head h2 {
    gap:7px;
    font-size:19px;
  }
  .section-head .text-link {
    font-size:10px;
  }
  .pack-grid {
    grid-template-columns:1fr;
  }
  .pack-card.lead {
    display:flex;
  }
  .pack-card.lead .cover {
    width:88px;
    height:88px;
    flex:none;
    border:0;
  }
  .lead-copy {
    padding:10px 9px 10px 0;
  }
  .lead h3 {
    font-size:14px;
  }
  .lead .summary {
    display:none;
  }
  .pack-card:not(.lead) {
    padding:8px;
  }
  .series-grid {
    gap:8px;
  }
  .series-card img {
    aspect-ratio:2.8;
  }
  .filters label,.filters select {
    width:100%;
  }
  .footnote {
    font-size:10px;
  }
  .project-link {
    overflow-wrap:anywhere;
  }
  .coupon {
    flex-wrap:wrap;
  }
}