@font-face {
  font-family: Floripa;
  src: url("assets/floripa.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: Montserrat;
  src: url("assets/montserrat-cyrillic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: Montserrat;
  src: url("assets/montserrat-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-036F,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212;
}
:root {
  color-scheme: dark;
  --bg: #1d1d1e;
  --line: #383838;
  --orange: #ff7a2f;
  --ink: #ecedf0;
  --display: Floripa, "Arial Black", sans-serif;
  --body: Montserrat, Arial, sans-serif;
  --gutter: clamp(14px, 1.6vw, 32px);
  font-size: clamp(13.5px, 1vw, 16px);
  scroll-behavior: smooth;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 1.25rem; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.wrap { width: min(100% - 2 * var(--gutter), 1952px); margin-inline: auto; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; z-index: 10; top: 10px; left: 10px; background: var(--orange); color: #141414; padding: .6rem 1rem; }

.masthead { position: relative; display: grid; grid-template-columns: minmax(10rem, 1fr) auto minmax(14rem, 1fr); align-items: center; gap: 2rem; min-height: 6rem; }
.brand { display: inline-block; justify-self: start; }
.brand img { width: 10rem; height: 3.4rem; object-fit: cover; }
.navigation, .masthead__actions { display: flex; align-items: center; text-transform: uppercase; font-weight: 750; font-size: .92rem; }
.navigation { gap: clamp(2rem, 4.2vw, 5.2rem); color: #949496; }
.navigation button { border: 0; padding: 0; background: none; font: inherit; text-transform: inherit; }
.navigation a:hover, .navigation button:hover, .navigation .is-current { color: var(--ink); }
.masthead__actions { justify-self: end; gap: 1.3rem; }
.masthead__actions > :last-child { border-left: 1px solid var(--line); padding-left: 1.25rem; }
.masthead__actions a:hover { color: var(--orange); }
.masthead__outline { color: var(--orange); border: 1px solid var(--line); padding: .82rem 1.65rem; }
.masthead__outline:hover { border-color: var(--orange); }
.menu-toggle { display: none; }
.navigation .mobile-account { display: none; }
.site-message { padding-block: 6rem; }
.site-message h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; }

.hero { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); grid-template-areas: "identity video" "mosaic panel"; gap: 0 4px; margin-bottom: clamp(80px, 10vw, 194px); }
.hero__identity { grid-area: identity; position: relative; display: flex; align-items: flex-end; min-width: 0; }
.hero__display { position: absolute; inset: auto 0 .08em -.028em; margin: 0; color: transparent; -webkit-text-stroke: 1.5px #4a4a4b; font: 400 clamp(42px, 6.6vw, 140px)/.98 var(--display); letter-spacing: -.025em; user-select: none; }
.hero__name { position: relative; margin: 0 0 .44em; display: flex; align-items: baseline; gap: .3em; font-size: clamp(1.6rem, 4.5vw, 5.5rem); line-height: 1.08; white-space: nowrap; }
.hero__name strong { letter-spacing: -.035em; font-weight: 900; }
.hero__name strong span { font-weight: 420; }
.hero__world { font-size: .71em; font-weight: 380; letter-spacing: -.042em; }
.hero__video { grid-area: video; position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 2.56; border: 0; background: #171718; overflow: hidden; }
.hero__video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 54%; filter: grayscale(1) brightness(.62); transition: filter .3s; }
.hero__video:hover img, .hero__video:focus-visible img { filter: grayscale(0) brightness(.83); }
.hero__video svg { position: relative; width: clamp(42px, 4.4vw, 74px); height: auto; transition: transform .25s; }
.hero__video:hover svg { transform: scale(1.09); }
.hero__mosaic { grid-area: mosaic; position: relative; aspect-ratio: 1004 / 564; overflow: hidden; }
.hero__mosaic img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; filter: grayscale(1) brightness(.8); }
.hero__mosaic img + img { opacity: 0; transition: opacity .6s ease; }
.hero__mosaic:hover img + img { opacity: 1; }
.hero__panel { grid-area: panel; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; grid-template-areas: "how status" ". download" "social social"; border-left: 1px solid var(--line); }
.hero__how { grid-area: how; }
.hero__download { grid-area: download; }
.hero__tile { position: relative; display: flex; align-items: start; min-height: 7rem; padding: 1.16rem; border: 1px solid var(--line); isolation: isolate; font-size: .95rem; font-weight: 730; line-height: 1.06; text-transform: uppercase; }
.hero__tile::before { position: absolute; content: ""; z-index: -1; inset: .48rem; background: var(--orange); transition: background .2s; }
.hero__tile:hover::before { background: #ff965a; }
.hero__tile svg { position: absolute; width: 2.6rem; height: 2.6rem; bottom: .82rem; right: .82rem; transition: transform .2s; }
.hero__tile > span { color: #171717; }
.hero__tile:hover svg { transform: translate(2px, 2px); }
.hero__status { grid-area: status; display: grid; align-content: start; padding: .34rem 1.25rem; line-height: 1.17; font-size: clamp(.82rem, 1.5vw, 1.6rem); }
.hero__status strong { font-size: clamp(2.2rem, 4.6vw, 5.4rem); font-weight: 850; letter-spacing: -.03em; }
.hero__status small { font-size: .51em; font-weight: 770; letter-spacing: -.02em; }
.hero__social { grid-area: social; align-self: end; padding: 1.1rem 0 .08rem 1.2rem; font-size: clamp(.9rem, 1.48vw, 1.6rem); }
.hero__social > div { display: flex; gap: clamp(1.15rem, 2.65vw, 3.5rem); margin-top: 1rem; }
.hero__social a { display: inline-flex; transition: color .2s; }
.hero__social a:hover { color: var(--orange); }
.hero__social svg { width: 2.25rem; height: 2.25rem; }

.button-orange { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 3.25rem; padding: .75rem 1.25rem; background: var(--orange); color: #171717; border: 1px solid transparent; text-align: center; font-weight: 760; }
.button-orange:hover { background: #ff995c; }
.site-dialog { position: fixed; width: min(100% - 2rem, 48rem); max-height: min(90dvh, 780px); padding: 2rem; margin: auto; color: var(--ink); background: #242425; border: 1px solid #595959; }
.site-dialog::backdrop, dialog::backdrop { background: #09090bd9; }
.site-dialog h2 { font: 400 clamp(1.18rem, 4vw, 2.1rem)/1.2 var(--display); text-transform: uppercase; margin: .75rem 0; }
.site-dialog p { line-height: 1.65; color: #d1d1d3; }
.dialog-close { display: grid; place-items: center; position: absolute; top: .7rem; right: .7rem; z-index: 1; width: 2.55rem; height: 2.55rem; border: 1px solid #6e6e6e; background: #242425; font-size: 1.7rem; }
.dialog-close:hover { color: var(--orange); }
.dialog-art { width: 100%; max-height: 43dvh; object-fit: cover; object-position: center; }
.site-dialog details { margin: .8rem 0; border: 1px solid var(--line); padding: .85rem; }
.site-dialog summary { cursor: pointer; font-weight: 700; }
.text-action { border: 0; background: none; color: var(--orange); padding: 0; text-decoration: underline; }
.notice { position: fixed; z-index: 4; inset: auto 0 0; display: grid; grid-template-columns: 9.25rem minmax(0, 1fr) minmax(10rem, 20vw); align-items: center; gap: 2rem; padding: 2rem clamp(1.25rem, 3.25vw, 4rem); background: #232324; border: 1px solid var(--line); }
.notice img { width: 100%; height: auto; filter: grayscale(1); }
.notice strong { font-size: 1.03rem; }
.notice p { margin: .5rem 0 0; font-size: .87rem; line-height: 1.55; color: #d0d0d0; }
.back-top { position: fixed; z-index: 3; right: var(--gutter); bottom: 1.35rem; border: 1px solid var(--line); background: #242425; padding: .95rem 1.2rem; font: .95rem var(--display); text-transform: uppercase; }
.back-top:hover { color: var(--orange); }
.back-top span { font: 1.2rem var(--body); }
.toast { position: fixed; z-index: 5; left: 50%; bottom: 2rem; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2rem); padding: 1rem 1.2rem; color: var(--ink); background: #282829; border: 1px solid var(--orange); text-align: center; }
.toast input, .toast button { border: 1px solid #777; color: var(--ink); background: var(--bg); margin: .35rem; padding: .35rem .55rem; }
.notice:not([hidden]) ~ .back-top { display: none; }
.notice:not([hidden]) ~ .toast { bottom: 11rem; }

@media (min-width: 1325px) {
  .masthead { min-height: 8rem; }
  .hero { grid-template-columns: minmax(0, .925fr) minmax(0, 1fr); }
}
@media (min-width: 1440px) {
  .masthead { min-height: 9rem; }
  .hero { grid-template-columns: minmax(0, 1.14fr) minmax(0, 1fr); }
}
@media (max-width: 1060px) {
  .masthead { grid-template-columns: 1fr auto 1fr; gap: 1.2rem; }
  .navigation { gap: clamp(1rem, 2.65vw, 2.4rem); }
  .masthead__actions { gap: .85rem; }
  .masthead__outline { padding-inline: 1rem; }
}
@media (max-width: 900px) {
  .masthead__actions .masthead__outline { display: none; }
  .masthead__actions > :last-child { border: 0; padding-left: 0; }
  .hero__display { font-size: 6.6vw; }
  .hero__tile { min-height: 5.5rem; }
  .hero__tile svg { width: 2rem; height: 2rem; }
}
@media (max-width: 700px) {
  .masthead { display: flex; justify-content: space-between; min-height: 4.6rem; }
  .masthead__actions { display: none; }
  .menu-toggle { display: grid; width: 3rem; height: 3rem; align-content: center; justify-items: center; gap: .32rem; border: 1px solid var(--line); background: transparent; }
  .menu-toggle span { display: block; width: 1.3rem; height: 1px; background: currentColor; }
  .navigation { display: none; position: absolute; z-index: 2; inset: 100% 0 auto; padding: .75rem 1rem; flex-direction: column; align-items: stretch; gap: 0; border: 1px solid var(--line); background: #242425; }
  .menu-toggle[aria-expanded="true"] + .navigation { display: flex; }
  .navigation .mobile-account { display: block; }
  .navigation > * { text-align: left; padding: .85rem .4rem !important; }
  .navigation > * + * { border-top: 1px solid var(--line); }
  .hero { position: relative; grid-template-columns: minmax(0, 1fr); grid-template-areas: "video" "panel"; gap: 0; margin-bottom: 5.3rem; }
  .hero__identity { position: absolute; z-index: 1; inset: .65rem auto auto .7rem; pointer-events: none; }
  .hero__display { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
  .hero__name { margin: 0; font-size: clamp(1.25rem, 4.65vw, 2.35rem); }
  .hero__mosaic { display: none; }
  .hero__video { aspect-ratio: 2.25; }
  .hero__panel { grid-template-columns: .95fr 1.18fr .95fr; grid-template-rows: auto auto; grid-template-areas: "how status download" "social social social"; border: 0; }
  .hero__tile { min-height: clamp(5.5rem, 16vw, 7.3rem); padding: .8rem; font-size: .77rem; }
  .hero__tile::before { inset: .32rem; }
  .hero__tile svg { width: 1.75rem; height: 1.75rem; bottom: .65rem; right: .62rem; }
  .hero__status { align-content: center; padding: .28rem .45rem; text-align: center; font-size: .75rem; }
  .hero__status strong { font-size: clamp(1.65rem, 5.8vw, 2.7rem); }
  .hero__social { padding: 1.4rem .15rem 0; }
  .hero__social > div { gap: 1.65rem; margin-top: .8rem; }
  .hero__social svg { width: 1.8rem; height: 1.8rem; }
  .notice { grid-template-columns: 1fr auto; gap: .7rem; padding: 1rem; }
  .notice img { display: none; }
  .notice strong { font-size: .88rem; }
  .notice p { font-size: .75rem; }
  .notice .button-orange { padding: .4rem .7rem; min-height: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; }
}