@font-face {
  font-family: "DM Sans";
  src: url("./assets/dm-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("./assets/space-grotesk.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --surface: #f7f7f7;
  --layer: #eeeeee;
  --card: #ffffff;
  --text: #202020;
  --secondary: #595959;
  --border: #d9d9d9;
  --focus: #333333;
  --scroll-thumb: #888888;
  --shadow: #00000012;
  --yellow: #ffcf23;
  --yellow-hover: #ffe05b;
  --yellow-edge: #eab500;
  --dark-ink: #201901;
  --title: "Space Grotesk", "DM Sans", system-ui, sans-serif;
  --body: "DM Sans", system-ui, sans-serif;
  --gutter: clamp(1rem, 5.2vw, 5rem);
  --sticky-offset: 6rem;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #161616;
  --layer: #1c1c1c;
  --card: #242424;
  --text: #f4f4f4;
  --secondary: #c8c8c8;
  --border: #3b3b3b;
  --focus: #f9d15c;
  --scroll-thumb: #777777;
  --shadow: #0006;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  scroll-padding-top: var(--sticky-offset);
  scrollbar-color: var(--scroll-thumb) var(--layer);
}
body { margin: 0; background: var(--surface); color: var(--text); font: 400 1rem/1.58 var(--body); }
img { display: block; max-width: 100%; }
a { color: inherit; }
a, button { touch-action: manipulation; }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
::selection { background: var(--yellow); color: var(--dark-ink); }
h1, h2, h3, h4, h5, p, figure { margin: 0; }
h1, h2, h3, h4, h5 { font-family: var(--title); line-height: 1.02; letter-spacing: -.058em; }
h2 { font-size: clamp(3rem, 6.25vw, 5.5rem); }
h3 { font-size: clamp(1.75rem, 3.2vw, 3rem); }
p { max-width: 64ch; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.wrap { width: min(81rem, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 20; left: 1rem; top: 1rem; transform: translateY(-180%); padding: .7rem 1rem; border-radius: .55rem; background: var(--text); color: var(--surface); }
.skip-link:focus { transform: none; }

.topbar { position: sticky; z-index: 5; top: 0; background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header { --header-control-gap: .625rem; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(.65rem, 1.55vw, 1.65rem); align-items: center; min-height: 5rem; padding-block: .7rem; }
.site-header > .brand { justify-self: start; }
.brand { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; }
.brand img { object-fit: contain; }
.brand img:first-child { width: 34px; height: 34px; }
.brand .wordmark { width: 115px; height: auto; }
.footer .brand img:first-child { width: 32px; height: 32px; }
.footer .brand .wordmark { width: 108px; }
.wordmark { filter: brightness(0); }
[data-theme="dark"] .wordmark { filter: brightness(0) invert(1); }
.footer nav a { font-weight: 700; text-decoration: none; text-underline-offset: .26em; }
.footer nav a:hover { text-decoration: underline; }
.header-actions { display: flex; align-items: center; justify-content: end; gap: var(--header-control-gap); }
.button, .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .58rem .8rem;
  min-height: 2.75rem;
  border: 1px solid var(--border);
  border-radius: .62rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.theme-toggle { width: 2.75rem; padding: 0; background: var(--card); color: var(--text); }
.theme-sun, [data-theme="dark"] .theme-moon { display: none; }
[data-theme="dark"] .theme-sun { display: block; }
.button-secondary { background: var(--card); }
.button-primary { background: var(--yellow); color: var(--dark-ink); border-color: var(--yellow-edge); }
.header-actions .button { white-space: nowrap; }
.header-actions .icon { transition: transform .18s ease; }
.header-actions > :focus-visible { transform: translateY(-2px); border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), 0 7px 18px #00000014; }
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover, .button-secondary:hover { background: var(--layer); border-color: var(--secondary); }
  .button-primary:hover { background: var(--yellow-hover); }
  .header-actions > :hover { transform: translateY(-2px); border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow), 0 7px 18px #00000014; }
  .header-actions .button-primary:hover .icon { transform: translateY(2px); }
  .header-actions .button-secondary:hover .icon { transform: rotate(-7deg); }
  .header-actions .theme-toggle:hover .icon { transform: rotate(12deg); }
}
.header-actions > :active { transform: translateY(0); }


.hero { background: var(--yellow); color: var(--dark-ink); border-bottom: 1px solid var(--yellow-edge); }
.hero-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.15fr); align-items: center; gap: clamp(1.3rem, 4vw, 4.5rem); padding-block: clamp(3rem, 6vw, 6.3rem); }
.hero h1 { font-size: clamp(3.35rem, 6.45vw, 7rem); font-weight: 700; }
.hero-lead { margin-top: 1.25rem; max-width: 37ch; font-size: clamp(1.06rem, 1.65vw, 1.42rem); color: #292929; }
.hero-visual { width: 100%; height: auto; }
.hero-download { margin-top: 1.65rem; padding: .76rem 1.12rem; background: #fff8e0; border-color: #282828; box-shadow: 0 4px 0 #282828; }
.hero-download:hover { background: var(--yellow-hover); box-shadow: 0 4px 0 var(--yellow-edge); }
.hero a:focus-visible { outline-color: #352500; }
.platform-note { margin-top: .8rem; color: #393939; font-size: .9rem; }

.experience { padding-block: clamp(3.1rem, 8vw, 7.4rem); }
.experience { background: var(--layer); border-bottom: 1px solid var(--border); }
.section-intro { display: grid; grid-template-columns: 1.4fr 1fr; align-items: end; gap: 2.4rem; margin-bottom: clamp(1.65rem, 5.5vw, 4rem); }
.section-intro > p, .experience article p:not(.eyebrow) { color: var(--secondary); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.eyebrow { margin-bottom: .75rem; font-weight: 700; }
.gaming-scene, .feature, .styler { border: 1px solid var(--border); border-radius: 1.15rem; background: var(--card); }
.gaming-scene, .styler { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(1.2rem, 4vw, 4.2rem); padding: clamp(1.2rem, 4vw, 3.6rem); }
.gaming-scene p:not(.eyebrow), .feature p:not(.eyebrow), .styler p:not(.eyebrow) { margin-top: .75rem; }
.gaming-visual { margin-inline: auto; width: min(100%, 36rem); height: auto; }
.feature-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-block: 1rem; }
.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(4rem, .31fr); align-items: center; gap: .8rem; padding: clamp(1.1rem, 3vw, 2.2rem); }
.feature img { justify-self: center; width: auto; max-height: 10rem; height: auto; object-fit: contain; }
.styler img { width: 100%; height: auto; border-radius: .65rem; }
.app-gallery { margin-top: clamp(2.5rem, 6vw, 5rem); }
.action-stage {
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
  --action-width: min(72%, calc(100% - 6.5rem), 96svh);
  --action-gap: clamp(.45rem, 1.6vw, 1.4rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--action-width) minmax(0, 1fr);
  gap: var(--action-gap);
  width: min(100%, 270svh);
  margin-inline: auto;
}
[data-slideshow-stage] { touch-action: pan-y pinch-zoom; }
[data-slideshow-stage].is-dragging { cursor: grabbing; }
[data-slideshow-stage]:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.action-current { grid-column: 2; grid-row: 1; overflow: hidden; border-radius: .72rem; background: #191919; }
.action-stage img { -webkit-user-drag: none; pointer-events: none; }
.action-current img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.action-preview {
  position: relative;
  grid-row: 1;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #191919;
}
.action-preview img {
  position: absolute;
  inset-block-start: 0;
  width: auto;
  max-width: none;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  opacity: .82;
}
.action-preview:hover img, .action-preview:focus-visible img { opacity: 1; }
.action-preview:focus-visible { outline-offset: -4px; }
.action-previous { grid-column: 1; border-radius: 0 .72rem .72rem 0; }
.action-previous img { inset-inline-end: 0; }
.action-next { grid-column: 3; border-radius: .72rem 0 0 .72rem; }
.action-next img { inset-inline-start: 0; }
.action-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--layer);
  pointer-events: none;
}
.action-track {
  display: grid;
  grid-template-columns: repeat(5, var(--action-width));
  justify-content: center;
  column-gap: var(--action-gap);
}
.action-track img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #191919;
  border-radius: .72rem;
  opacity: .82;
}
.slideshow-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.card-media { min-width: 0; position: relative; align-self: center; }
.media-frame img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; background: #191919; border-radius: .72rem; }
.card-stage { position: relative; cursor: grab; user-select: none; }
.card-stage img { -webkit-user-drag: none; }
.card-frames { position: relative; overflow: hidden; border-radius: .72rem; background: #191919; }
.card-motion { position: absolute; inset: 0; overflow: hidden; border-radius: .72rem; background: #191919; pointer-events: none; }
.card-track { display: flex; width: 300%; height: 100%; margin-left: -100%; }
.card-track img { flex: 0 0 calc(100% / 3); width: calc(100% / 3); max-width: none; height: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.slide-toolbar {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-end: .55rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: .16rem .28rem;
  border: 1px solid #ffffff38;
  border-radius: 2rem;
  background: #171717f0;
  color: #fff;
}
.slide-selectors { display: flex; }
.slide-toolbar button {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
}
.slide-toolbar button:hover { background: #ffffff24; }
.slide-toolbar button:focus-visible { outline: 2px solid var(--yellow); outline-offset: -2px; }
.slide-toolbar .icon { width: .9rem; height: .9rem; }
.slide-selectors button::before {
  content: "";
  width: .37rem;
  height: .37rem;
  border-radius: 1rem;
  background: #b7b7bd;
}
.slide-selectors button[aria-current="true"]::before { width: .72rem; background: var(--yellow); }

.suite { padding: 0; }
.suite-intro { padding-block: clamp(3rem, 7vw, 6rem); margin-bottom: 0; }
.plugin-band {
  --plugin-color: #FFCC00;
  --plugin-light-share: 70%;
  --plugin-dark-share: 22%;
  --plugin-band-light: color-mix(in srgb, var(--plugin-color) var(--plugin-light-share), #ffffff);
  --plugin-band-dark: color-mix(in srgb, var(--plugin-color) var(--plugin-dark-share), #161616);
  --text: #202020;
  --secondary: #303030;
  --border: #00000026;
  color: var(--text);
  background: var(--plugin-band-light, var(--band-light));
  padding-block: clamp(3.5rem, 7vw, 6.5rem);
}
.plugin-band:is([aria-labelledby="metadata-title"], [aria-labelledby="launch-curtain-title"], [aria-labelledby="proton-vpn-title"]) {
  --text: #f4f4f4;
  --secondary: #f4f4f4;
  --border: #ffffff40;
  --focus: #ffffff;
}
[data-theme="dark"] .plugin-band {
  --text: #f4f4f4;
  --secondary: #d9d9d9;
  --border: #ffffff2b;
  background: var(--plugin-band-dark, var(--band-dark));
}
/* Section colours use the five brand colours, mixed only with neutral tones. */
.plugin-band[aria-labelledby="playhub-plugin-title"] { --plugin-color: #FFCC00; --plugin-light-share: 28%; --plugin-band-dark: #262626; }
.plugin-band[aria-labelledby="metadata-title"] { --plugin-color: #5E2BFF; --plugin-light-share: 96%; --plugin-dark-share: 28%; }
.plugin-band[aria-labelledby="artworks-title"] { --plugin-color: #00C7FF; --plugin-light-share: 78%; --plugin-dark-share: 22%; }
.plugin-band[aria-labelledby="trailerhero-title"] { --plugin-color: #FF3B30; --plugin-light-share: 72%; --plugin-dark-share: 22%; }
.plugin-band[aria-labelledby="themedeck-title"] { --plugin-color: #34C759; --plugin-light-share: 76%; --plugin-dark-share: 24%; }
.plugin-band[aria-labelledby="launch-curtain-title"] { --plugin-color: #5E2BFF; --plugin-light-share: 92%; --plugin-dark-share: 24%; }
.plugin-band[aria-labelledby="now-playing-title"] { --plugin-color: #34C759; --plugin-light-share: 88%; --plugin-dark-share: 20%; }
.plugin-band[aria-labelledby="notifications-title"] { --plugin-color: #FF3B30; --plugin-light-share: 62%; --plugin-dark-share: 18%; }
.plugin-band[aria-labelledby="surround-title"] { --plugin-color: #00C7FF; --plugin-light-share: 88%; --plugin-dark-share: 26%; }
.plugin-band[aria-labelledby="news-title"] { --plugin-color: #FF3B30; --plugin-light-share: 68%; --plugin-dark-share: 24%; }
.plugin-band[aria-labelledby="weather-title"] { --plugin-color: #00C7FF; --plugin-light-share: 64%; --plugin-dark-share: 18%; }
.plugin-band[aria-labelledby="proton-vpn-title"] { --plugin-color: #5E2BFF; --plugin-light-share: 100%; --plugin-dark-share: 30%; }
[data-theme="dark"] .plugin-band[aria-labelledby="playhub-plugin-title"] #playhub-plugin-title { color: #FFCC00; }
.plugin-band.copy-first > .wrap > .plugin-card, .plugin-card.copy-first { grid-template-columns: minmax(0, .83fr) minmax(0, 1.17fr); }
.plugin-band.copy-first > .wrap > .plugin-card > .plugin-copy, .plugin-card.copy-first > .plugin-copy { order: -1; }

.plugin-card {
  display: grid;
  grid-template-columns: minmax(0, 1.17fr) minmax(0, .83fr);
  gap: clamp(1.2rem, 3.3vw, 3.1rem);
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.plugin-copy { min-width: 0; padding: .15rem .4rem .15rem 0; }
.plugin-copy h2 { font-size: clamp(2rem, 3.6vw, 3.3rem); overflow-wrap: anywhere; }
.plugin-copy h2 a { display: inline; text-decoration: none; text-underline-offset: .13em; }
.plugin-copy h2 a:hover { text-decoration: underline; }
.plugin-copy h2 .icon { display: inline; width: .5em; height: .5em; vertical-align: .17em; margin-inline-start: .15em; }
.plugin-copy p { margin-top: 1rem; max-width: 44ch; color: var(--secondary); font-size: clamp(1rem, 1.3vw, 1.13rem); line-height: 1.67; }
.playhub-suite { min-width: 0; }
.playhub-suite > .plugin-card { padding-bottom: clamp(3rem, 6vw, 5rem); }
.playhub-features { border-top: 1px solid var(--border); }
.playhub-features-title { padding-block: 1.8rem 0; color: var(--secondary); font: 700 .8rem/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.playhub-feature + .playhub-feature { border-top: 1px solid var(--border); }
.playhub-features .plugin-card { padding-block: clamp(2.5rem, 5vw, 4rem); }
.playhub-feature h3 { font-size: clamp(1.65rem, 2.7vw, 2.5rem); letter-spacing: -.045em; }


.footer-mascots {
  width: min(35rem, calc(100% - var(--gutter) * 2));
  height: auto;
  margin: 0 auto clamp(1.6rem, 4vw, 3.2rem);
}
.footer { padding-block: 2rem; border-top: 1px solid var(--border); background: var(--layer); }
.footer-inner, .footer nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.6rem; }
.footer nav a { display: inline-flex; align-items: center; gap: .4rem; }
.footer p { color: var(--secondary); margin-top: .35rem; }

@media (max-width: 1080px) {
  .site-header { grid-template-columns: max-content 1fr; }
  .header-actions { grid-column: 2; grid-row: 1; }
  :root { --sticky-offset: 5.75rem; }
}
@media (max-width: 720px) {
  .header-actions .button { width: 2.75rem; padding: 0; }
  .header-actions .button-label { display: none; }
  :root { --sticky-offset: 5.5rem; }
}
@media (max-width: 700px) {
  .hero-layout { grid-template-columns: 1fr; gap: 1.2rem; }
  .hero-visual { max-width: 31rem; margin-inline: auto; }
  .section-intro { grid-template-columns: 1fr; gap: .85rem; }
  .gaming-scene, .styler, .plugin-card, .plugin-band.copy-first > .wrap > .plugin-card, .plugin-card.copy-first { grid-template-columns: minmax(0, 1fr); }
  .plugin-card > .plugin-copy { order: -1; }
  .plugin-copy p { max-width: 64ch; }

  .plugin-copy { padding: 0 .25rem .25rem; }
}
@media (max-width: 555px) {
  .feature-pair { grid-template-columns: 1fr; }
  .site-header { --header-control-gap: .4rem; gap: .4rem; padding-block: .5rem; }
  .theme-toggle, .header-actions .button { width: 2.3rem; min-height: 2.3rem; }
  .site-header .brand img:first-child { width: 29px; height: 29px; }
  .site-header .wordmark { width: 104px; }
  :root { --sticky-offset: 5.5rem; }
  .hero h1 { font-size: clamp(2.85rem, 10.5vw, 4.45rem); }
}
@media (max-width: 360px) {
  .site-header .wordmark { width: clamp(4.25rem, calc(100vw - 13.2rem), 6.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .button, .theme-toggle, .header-actions .icon { transition: none; }
  .header-actions > :is(:hover, :focus-visible, :active), .header-actions > :is(:hover, :focus-visible) .icon { transform: none; }
}