:root {
  --ink: #03060a;
  --ink-soft: #080e16;
  --paper: #08111a;
  --paper-deep: #0d1824;
  --white: #f4f8fc;
  --muted: #a8b7c6;
  --red: #21c8ff;
  --line-dark: #24394c;
  --line-light: #344d63;
  --brand-blue: #19c8ff;
  --brand-blue-deep: #075e9c;
  --brand-gold: #d7a541;
  --brand-silver: #d5dde5;
  --brand-steel: #75899c;
  --panel: #07101a;
  --panel-raised: #0d1a27;
  --header-height: 82px;
  color-scheme: dark;
}

html {
  background: #020408;
  color: var(--white);
  scrollbar-color: #42647e #03060a;
}

body {
  background:
    radial-gradient(circle at 50% -20rem, rgb(29 171 232 / 13%), transparent 45rem),
    #03060a;
  color: var(--white);
}

body::before {
  position: fixed;
  z-index: 50;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 47%, rgb(171 210 235 / 1.5%) 47.1% 47.2%, transparent 47.3%),
    linear-gradient(60deg, transparent 0 52%, rgb(213 165 65 / 1.1%) 52.1% 52.2%, transparent 52.3%);
  content: "";
  pointer-events: none;
}

::selection {
  background: var(--brand-blue);
  color: #011018;
}

:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 4px;
}

.skip-link {
  border: 1px solid var(--brand-silver);
  background: #07121d;
  color: var(--white);
}

.site-header {
  position: relative;
  min-height: var(--header-height);
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgb(11 17 25 / 98%), rgb(3 7 12 / 99%)),
    var(--ink);
  box-shadow: 0 16px 42px rgb(0 0 0 / 46%);
}

.site-header::before {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #283d50, #dce5ed 17%, #1ac9ff 45%, #d7a541 61%, #2d4356);
  content: "";
  opacity: 0.78;
}

.brand {
  gap: 10px;
  padding-inline: clamp(22px, 3vw, 42px);
}

.brand-symbol {
  width: 52px;
}

.brand-wordmark {
  width: 178px;
}

.site-nav {
  position: relative;
}

.site-nav a {
  position: relative;
  min-width: 144px;
  border-left-color: #1c2c3c;
  color: #c8d3dd;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.site-nav a::before {
  position: absolute;
  right: 18px;
  bottom: 0;
  left: 18px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-gold));
  content: "";
  opacity: 0;
  transition: opacity 180ms ease;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  background:
    linear-gradient(135deg, transparent 12px, rgb(17 33 48 / 96%) 12px),
    #08101a;
  color: #fff;
  outline: 0;
}

.site-nav a:hover::before,
.site-nav a:focus-visible::before,
.site-nav a[aria-current="page"]::before {
  opacity: 1;
}

#main-content {
  background: transparent;
}

.home-stage,
.view-shell,
.project-page {
  background:
    radial-gradient(circle at 50% 0, rgb(24 150 213 / 9%), transparent 34rem),
    linear-gradient(145deg, #04080d 0%, #08111a 50%, #03070b 100%);
  color: var(--white);
}

.home-intro {
  position: relative;
  min-height: 284px;
  overflow: hidden;
  border-bottom: 0;
  background:
    linear-gradient(122deg, transparent 0 18%, rgb(51 78 99 / 15%) 18.1% 18.3%, transparent 18.4% 81.6%, rgb(51 78 99 / 15%) 81.7% 81.9%, transparent 82%),
    radial-gradient(ellipse at 50% 55%, rgb(25 175 236 / 15%), transparent 38%),
    linear-gradient(180deg, #060b12, #03070c);
}

.home-intro::before {
  position: absolute;
  top: -42%;
  left: 50%;
  width: min(92vw, 1180px);
  height: 152%;
  border: 1px solid rgb(111 143 168 / 22%);
  background:
    linear-gradient(135deg, transparent 10%, rgb(255 255 255 / 2%) 10.2% 10.7%, transparent 11% 89%, rgb(215 165 65 / 4%) 89.3% 89.8%, transparent 90%);
  clip-path: polygon(20% 0, 80% 0, 100% 64%, 82% 100%, 18% 100%, 0 64%);
  content: "";
  translate: -50% 0;
}

.home-intro::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgb(215 165 65 / 68%) 42%, rgb(25 200 255 / 62%) 68%, transparent);
  box-shadow: 0 0 22px rgb(25 200 255 / 25%);
  content: "";
}

.home-brand-title {
  position: relative;
  z-index: 2;
  gap: clamp(18px, 2vw, 32px);
}

.home-brand-title__symbol {
  width: min(27vw, 164px);
}

.home-brand-title__wordmark {
  width: min(62vw, 650px);
}

.home-doors {
  position: relative;
  min-height: calc(100svh - var(--header-height) - 284px);
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 14px;
  padding: 18px 22px 26px;
  background:
    linear-gradient(90deg, transparent, rgb(38 99 131 / 12%) 48%, rgb(151 116 48 / 8%) 52%, transparent),
    #03070c;
}

.home-doors::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 72px;
  height: 18px;
  background: linear-gradient(135deg, transparent 49%, var(--brand-gold) 50% 51%, transparent 52%);
  content: "";
  opacity: 0.75;
  translate: -50% 0;
}

.home-door {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background:
    linear-gradient(145deg, rgb(20 34 48 / 96%), rgb(5 10 16 / 99%) 72%),
    var(--panel);
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 16px);
  transition:
    background-color 180ms ease,
    box-shadow 220ms ease;
}

.home-door::before {
  position: absolute;
  z-index: 4;
  inset: 0;
  border: 1px solid transparent;
  background: linear-gradient(145deg, #9fb1c1, #2c465b 22%, #1d9ed1 54%, #725f36 78%, #263d50) border-box;
  content: "";
  pointer-events: none;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.7;
}

.home-door::after {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  width: 82px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--brand-blue), var(--brand-gold), transparent);
  box-shadow: 0 0 18px rgb(25 200 255 / 38%);
  content: "";
  opacity: 0.5;
  translate: -50% 0;
  transition:
    width 260ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 180ms ease;
}

.home-door:hover,
.home-door:focus-visible {
  z-index: 2;
  background:
    linear-gradient(145deg, rgb(29 51 70 / 98%), rgb(6 12 20 / 99%) 72%),
    var(--panel-raised);
  box-shadow: 0 22px 56px rgb(0 0 0 / 46%);
  outline: 0;
}

.home-door:hover::after,
.home-door:focus-visible::after {
  width: 72%;
  opacity: 1;
}

.door-media {
  position: relative;
  width: calc(100% - 28px);
  margin: 14px 14px 0;
  overflow: hidden;
  border: 1px solid #3c566b;
  background: #03070b;
  box-shadow:
    0 18px 42px rgb(0 0 0 / 42%),
    inset 0 0 0 1px rgb(233 241 248 / 3%);
}

.door-media::before {
  position: absolute;
  z-index: 3;
  top: -1px;
  right: -1px;
  width: 42px;
  height: 42px;
  border-top: 1px solid var(--brand-silver);
  border-right: 1px solid var(--brand-silver);
  content: "";
  opacity: 0.55;
  pointer-events: none;
}

.door-media::after {
  background: linear-gradient(180deg, transparent 70%, rgb(1 5 9 / 24%));
}

.apps-preview,
.jukebox-preview {
  background: #03070b;
}

.apps-preview__scene {
  object-fit: contain;
}

.jukebox-preview {
  background:
    radial-gradient(circle at 50% 42%, rgb(24 156 218 / 18%), transparent 45%),
    linear-gradient(145deg, #050b12, #0b1823);
}

.jukebox-preview__cover {
  border-color: #7c8e9d;
  box-shadow: 0 22px 48px rgb(0 0 0 / 58%);
}

.jukebox-preview__signal {
  opacity: 0.28;
}

.jukebox-preview__signal i {
  background: linear-gradient(#d2f2ff, #149fd7);
  box-shadow: 0 0 10px rgb(24 199 255 / 16%);
}

.door-copy {
  border-top-color: #2d4559;
  background:
    linear-gradient(135deg, rgb(13 25 37 / 96%), rgb(5 10 16 / 99%)),
    var(--panel);
}

.door-action {
  color: #7ee0ff;
  font-family: "Manrope", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
}

.door-copy h2,
.home-door--frattura .door-copy h2,
.home-door--jukebox .door-copy h2 {
  margin-top: 12px;
  color: #f7f9fb;
  font-family: "Manrope", sans-serif;
  font-size: clamp(30px, 2.8vw, 44px);
  font-weight: 800;
  letter-spacing: 0.045em;
  line-height: 0.95;
  text-transform: uppercase;
}

.door-copy p:last-of-type {
  color: #b4c3d0;
}

.section-head,
.jukebox-head,
.project-page__hero {
  position: relative;
  min-height: 260px;
  border-bottom: 1px solid #314b60;
  background:
    linear-gradient(122deg, transparent 0 14%, rgb(97 131 156 / 8%) 14.1% 14.3%, transparent 14.4%),
    radial-gradient(circle at 18% 0%, rgb(26 168 226 / 12%), transparent 31rem),
    linear-gradient(145deg, #060c13, #0a1520 66%, #050a10);
  color: var(--white);
}

.section-head::before,
.jukebox-head::before,
.project-page__hero::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(32px, 5vw, 78px);
  width: 1px;
  background: linear-gradient(180deg, var(--brand-gold), transparent 42%, var(--brand-blue));
  content: "";
  opacity: 0.55;
}

.section-head::after,
.jukebox-head::after,
.project-page__hero::after {
  position: absolute;
  right: clamp(22px, 5vw, 78px);
  bottom: -1px;
  left: clamp(22px, 5vw, 78px);
  height: 1px;
  background: linear-gradient(90deg, var(--brand-blue), rgb(215 165 65 / 78%), transparent 88%);
  content: "";
}

.section-head h1,
.jukebox-head h1,
.project-page__hero h1 {
  color: #f4f7fa;
  font-family: "Manrope", sans-serif;
  font-size: clamp(62px, 6.4vw, 94px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 0.86;
}

.section-index,
.product-number,
.product-kind,
.work-kind,
.playlist-number {
  color: #88a9c2;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
}

.section-head > p:last-child,
.jukebox-head > p:last-child,
.project-page__hero > p:last-child {
  color: #bdc9d3;
}

.product-stories {
  border-top: 0;
  background: #24394d;
}

.product-story {
  gap: 1px;
  border-bottom: 1px solid #2e465a;
  background:
    radial-gradient(circle at 88% 20%, rgb(22 146 202 / 7%), transparent 30rem),
    linear-gradient(145deg, #0b1621, #050a10);
}

.product-story__copy {
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--product-accent), #415b70 62%);
  background:
    linear-gradient(135deg, rgb(15 29 42 / 96%), rgb(6 12 19 / 99%)),
    var(--panel);
}

.product-story__copy::after {
  position: absolute;
  top: 0;
  right: 0;
  width: min(160px, 30%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--product-accent));
  content: "";
}

.product-story__head .product-number {
  border-color: #62798c;
  color: #edf3f8;
  background: #07111b;
}

.product-titleline {
  gap: 24px;
}

.product-story h2,
.product-titleline h2 {
  color: #f6f9fb;
  font-family: "Manrope", sans-serif;
  font-size: clamp(46px, 4.8vw, 68px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

.product-description {
  max-width: 68ch;
  color: #c4d0da;
}

.product-facts {
  border-top-color: #2c4458;
}

.product-facts li {
  border-bottom-color: #2c4458;
  color: #dce5ec;
}

.product-facts li::before {
  width: 7px;
  height: 7px;
  background: var(--product-accent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--product-accent), transparent 45%);
}

.product-link {
  color: #eff6fb;
  font-family: "Manrope", sans-serif;
}

.product-story__media {
  position: relative;
  margin: clamp(34px, 4vw, 64px);
  border: 0;
  background:
    radial-gradient(circle at 50% 50%, rgb(23 148 204 / 9%), transparent 62%),
    transparent;
  box-shadow: none;
}

.product-story__media::before {
  position: absolute;
  inset: 0;
  border: 1px solid #3b566c;
  background: linear-gradient(135deg, rgb(219 230 239 / 5%), transparent 22% 78%, rgb(214 164 62 / 5%));
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  content: "";
  pointer-events: none;
}

.product-story__media img {
  position: relative;
  z-index: 1;
}

.fracture-hero {
  border-bottom: 1px solid #30495d;
  background:
    radial-gradient(circle at 18% 36%, rgb(25 149 205 / 8%), transparent 36rem),
    linear-gradient(145deg, #04080d, #0a141f);
}

.fracture-visual {
  border-color: #425a6e;
  background: #030609;
  box-shadow: 0 26px 60px rgb(0 0 0 / 44%);
}

.fracture-visual::before {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 76px;
  height: 76px;
  border-top: 1px solid #d4a548;
  border-right: 1px solid #d4a548;
  content: "";
  opacity: 0.5;
  pointer-events: none;
}

.fracture-titleband {
  border-left-color: #3b5368;
}

.fracture-titleband h1 {
  color: #f5f8fa;
  font-family: "Manrope", sans-serif;
  font-size: clamp(42px, 3.7vw, 54px);
  font-weight: 800;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.fracture-titleband > p:last-child {
  color: #bcc9d3;
}

.fracture-works {
  gap: 1px;
  background: #2b4256;
}

.work--novel,
.work--game {
  border: 0;
  background:
    linear-gradient(145deg, rgb(15 28 41 / 98%), rgb(5 10 16 / 99%)),
    var(--panel);
  color: var(--white);
}

.work--game {
  background:
    radial-gradient(circle at 100% 0%, rgb(140 89 28 / 10%), transparent 28rem),
    linear-gradient(145deg, #0f1924, #060b12);
}

.work h2 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(42px, 4.4vw, 66px);
  font-weight: 750;
  letter-spacing: -0.035em;
}

.work--game .work-kind {
  color: #d9a84a;
}

.playlist-grid {
  gap: 1px;
  padding: 1px;
  background: #2e465a;
}

.playlist-card {
  position: relative;
  background:
    linear-gradient(145deg, rgb(15 29 42 / 98%), rgb(5 11 17 / 99%)),
    var(--panel);
  transition:
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.playlist-card::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  border-top: 1px solid rgb(126 156 179 / 42%);
  border-right: 1px solid rgb(126 156 179 / 42%);
  content: "";
  pointer-events: none;
}

.playlist-card:hover {
  z-index: 1;
  background:
    linear-gradient(145deg, rgb(24 49 67 / 98%), rgb(7 15 23 / 99%)),
    var(--panel-raised);
  box-shadow: 0 18px 38px rgb(0 0 0 / 34%);
}

.playlist-card img {
  background: #03070b;
}

.playlist-meta {
  border-left-color: #334d62;
}

.playlist-name {
  color: #eef4f8;
  font-family: "Manrope", sans-serif;
  font-size: clamp(20px, 1.65vw, 25px);
  font-weight: 800;
  letter-spacing: -0.025em;
}

.playlist-genre {
  color: #98acbd;
}

.site-footer {
  position: relative;
  border-top: 1px solid #30495d;
  background:
    linear-gradient(145deg, #050a10, #09131d),
    var(--ink);
}

.site-footer::before {
  position: absolute;
  top: -1px;
  right: 42px;
  left: 42px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-blue), var(--brand-gold), transparent);
  content: "";
}

.site-footer p {
  color: #9fb0bf;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: #82ddff;
}

.project-page__grid {
  gap: 1px;
  background: #2d4559;
}

.project-page__grid section {
  border: 0;
  background:
    linear-gradient(145deg, #0c1823, #050a10);
}

.project-page__grid h2 {
  font-family: "Manrope", sans-serif;
  font-size: clamp(36px, 3.6vw, 54px);
  letter-spacing: -0.035em;
}

.project-page__grid p,
.project-page__grid li {
  color: #c5d0da;
}

@media (min-width: 1121px) and (hover: hover) {
  .home-doors:has(.home-door--apps:hover),
  .home-doors:has(.home-door--apps:focus-visible) {
    grid-template-columns: minmax(390px, 1.45fr) minmax(250px, 0.78fr) minmax(250px, 0.78fr);
  }

  .home-doors:has(.home-door--frattura:hover),
  .home-doors:has(.home-door--frattura:focus-visible) {
    grid-template-columns: minmax(250px, 0.78fr) minmax(390px, 1.45fr) minmax(250px, 0.78fr);
  }

  .home-doors:has(.home-door--jukebox:hover),
  .home-doors:has(.home-door--jukebox:focus-visible) {
    grid-template-columns: minmax(250px, 0.78fr) minmax(250px, 0.78fr) minmax(390px, 1.45fr);
  }
}

@media (max-width: 1120px) {
  .home-doors {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
  }
}

@media (max-width: 780px) {
  :root {
    --header-height: 72px;
  }

  .site-nav a {
    min-width: 104px;
  }

  .home-intro {
    min-height: 224px;
  }

  .home-doors {
    min-height: calc(100svh - var(--header-height) - 224px);
  }

  .product-story__copy {
    border-top-color: color-mix(in srgb, var(--product-accent), #344e63 58%);
  }

  .fracture-titleband {
    border-top-color: #3b5368;
  }
}

@media (max-width: 560px) {
  :root {
    --header-height: auto;
  }

  .brand {
    min-height: 66px;
    justify-content: center;
  }

  .brand-symbol {
    width: 42px;
  }

  .brand-wordmark {
    width: 150px;
  }

  .site-nav {
    min-height: 50px;
    border-top: 1px solid #1d2d3d;
  }

  .site-nav a {
    border-right-color: #1d2d3d;
    font-size: 11px;
  }

  .home-intro {
    min-height: 190px;
    padding: 22px 18px;
  }

  .home-intro::before {
    width: 132vw;
  }

  .home-brand-title {
    gap: 10px;
  }

  .home-brand-title__symbol {
    width: min(25vw, 94px);
  }

  .home-brand-title__wordmark {
    width: min(64vw, 280px);
  }

  .home-doors {
    display: block;
    min-height: 0;
    padding: 12px;
  }

  .home-door {
    margin-bottom: 12px;
  }

  .home-door:last-child {
    margin-bottom: 0;
  }

  .door-media {
    width: calc(100% - 24px);
    margin: 12px 12px 0;
  }

  .door-copy h2,
  .home-door--frattura .door-copy h2,
  .home-door--jukebox .door-copy h2 {
    font-size: 34px;
  }

  .section-head,
  .jukebox-head {
    min-height: 236px;
  }

  .section-head h1,
  .jukebox-head h1,
  .project-page__hero h1 {
    font-size: clamp(56px, 18vw, 76px);
  }

  .product-story h2,
  .product-titleline h2 {
    font-size: clamp(44px, 13vw, 58px);
  }

  .product-story__media,
  .product-story--reverse .product-story__media {
    margin: 0 22px 30px;
  }

  .fracture-titleband h1 {
    font-size: clamp(48px, 14vw, 58px);
    letter-spacing: -0.04em;
  }

  .site-footer::before {
    right: 22px;
    left: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-door,
  .home-door::after {
    transition: none;
  }
}