/* MS COMPUTER - route 3. Every size comes from the film.
   Desktop: 1rem = 100 px of the film's 1920 x 1080 frame, so .19rem is the film's 19 px, at any window size.
   Elements are anchored to the edge they sit on in the film, so other window shapes only change the distances between them.
   Mobile (portrait): 1rem = 100 px of a 390 x 780 screen. */

@font-face { font-family: "Space Grotesk"; src: url("../assets/fonts/SpaceGrotesk-Variable.woff2") format("woff2"); font-weight: 300 700; font-display: block; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "IBM Plex Mono"; src: url("../assets/fonts/IBMPlexMono-Medium.woff2") format("woff2"); font-weight: 500; font-display: block; }

:root {
    --lilac: #D8C8E2;      /* all text */
    --ink: #120E15;        /* text on a lilac pill */
    --accent: #8F63FF;     /* the drawings' one accent */
    --line: rgba(216, 200, 226, .62);
    --pill-line: rgba(216, 200, 226, .55);
    --sans: "Space Grotesk", system-ui, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;
    --slide: 6.4rem;       /* how far the Host panels travel */
}

html { font-size: min(calc(100vw / 19.2), calc(100vh / 10.8)); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #000; color: var(--lilac); font: 400 .19rem/.26rem var(--sans); letter-spacing: -.01em; overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; font-weight: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
a:focus-visible, button:focus-visible { outline: .02rem solid var(--lilac); outline-offset: .04rem; }

.stage { position: fixed; inset: 0; overflow: hidden; isolation: isolate; background: #000; touch-action: none; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.grain { position: absolute; inset: 0; opacity: .05; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------------------------------------- pages */
.pages, .scroller { position: absolute; inset: 0; }
.pages { z-index: 2; }
.scroller { will-change: transform; }
.page { position: absolute; left: 0; width: 100%; height: 100%; }
.page:nth-child(2) { top: 100%; }
.page:nth-child(3) { top: 200%; }

.dots { position: absolute; inset: 0; background-image: radial-gradient(circle at center, rgba(118, 112, 124, .647) .013rem, transparent .017rem); background-size: .12rem .12rem; background-position: center;
    -webkit-mask-image: radial-gradient(ellipse 9.6rem 6.7rem at 50% 48.15%, #000 0, rgba(0, 0, 0, .73) 20%, rgba(0, 0, 0, .49) 40%, rgba(0, 0, 0, .28) 60%, rgba(0, 0, 0, .105) 80%, transparent 100%);
    mask-image: radial-gradient(ellipse 9.6rem 6.7rem at 50% 48.15%, #000 0, rgba(0, 0, 0, .73) 20%, rgba(0, 0, 0, .49) 40%, rgba(0, 0, 0, .28) 60%, rgba(0, 0, 0, .105) 80%, transparent 100%); }

.iso { position: absolute; left: 50%; top: 50%; width: 19.2rem; height: 10.8rem; margin: -5.4rem 0 0 -9.6rem; overflow: visible; pointer-events: none; }
.plate-label { font-family: var(--sans); font-weight: 500; letter-spacing: 0; }
.cmd { font-family: var(--mono); font-size: 19px; fill: var(--lilac); letter-spacing: 0; }

.title { position: absolute; left: 1.4282rem; bottom: 1.146rem; font: 700 2.3rem/1 var(--sans); letter-spacing: -.04em; white-space: nowrap; color: var(--lilac); }
.title--c { left: 1.465rem; }
.title .u { display: inline-block; will-change: transform, opacity; }

.block { position: absolute; right: 1.58rem; bottom: 1.4rem; width: 5.6rem; }
[data-page="connect"] .block { bottom: 1.45rem; }
.head { font: 500 .26rem/.32rem var(--sans); letter-spacing: -.01em; }
.block > .head { margin-bottom: .07rem; }
.head-line { display: flex; align-items: center; gap: .18rem; margin-bottom: .18rem; }
.tagline { font: 500 .21rem/.28rem var(--sans); margin-bottom: .117rem; }
.desc { opacity: .85; margin-bottom: .196rem; }
.para { margin-bottom: .036rem; }
.block hr { border: 0; height: .01rem; background: var(--lilac); opacity: .48; margin: 0 0 .165rem; }
.row { display: grid; grid-template-columns: 1.7rem 3.7rem; column-gap: .2rem; margin-bottom: .165rem; }
.row strong { font-weight: 500; }
.row span { opacity: .85; }
.close { font-weight: 500; }
.ln { display: block; }
.ln .u { display: block; white-space: pre; will-change: transform, opacity; }

.tabs { position: relative; display: flex; gap: .1rem; height: .38rem; margin-bottom: .2rem; }
.tab, .tab-pill-labels span { font: 500 .18rem/.38rem var(--sans); letter-spacing: -.01em; padding: 0 .17rem; height: .38rem; white-space: nowrap; }
.tab { border-radius: .19rem; box-shadow: inset 0 0 0 .012rem var(--pill-line); }
.tab-pill { position: absolute; left: 0; top: 0; height: .38rem; border-radius: .19rem; background: var(--lilac); overflow: hidden; pointer-events: none; }
.tab-pill-labels { position: absolute; left: 0; top: 0; display: flex; gap: .1rem; color: var(--ink); }
.panels { position: relative; display: grid; overflow: hidden; margin: -.14rem -.14rem -.36rem; padding: .14rem .14rem .36rem; }
.panel { grid-area: 1 / 1; align-self: end; min-width: 0; }

.pill { position: relative; display: inline-flex; align-items: center; height: .34rem; padding: 0 .15rem; font: 500 .13rem var(--mono); letter-spacing: .02em; white-space: nowrap; }
.pill i { position: absolute; inset: 0; border-radius: .17rem; box-shadow: inset 0 0 0 .012rem var(--pill-line); }
.pill b { position: relative; font-weight: 500; }
.pill--soon { height: .3rem; padding: 0 .14rem; letter-spacing: .04em; }
.pill--soon i { border-radius: .15rem; }
.tags { display: flex; gap: .1rem; margin-top: .19rem; height: .34rem; }

/* ---------------------------------------- the column */
.column { position: absolute; z-index: 3; left: 0; top: calc(50% + .02rem); width: 3rem; height: 0; }
.col-item { position: absolute; left: 1.5626rem; display: block; font: 400 .21rem/.3rem var(--sans); letter-spacing: -.01em; white-space: nowrap; }
.col-item:nth-of-type(1) { top: -.937rem; }
.col-item:nth-of-type(2) { top: -.597rem; }
.col-item:nth-of-type(3) { top: -.257rem; }
.col-label { display: inline-block; position: relative; }
.col-label small { position: absolute; left: .925rem; bottom: .062rem; font: 400 .12rem/1 var(--mono); letter-spacing: 0; }
.col-dot-rise { position: absolute; left: 1.58rem; top: -.86rem; width: .18rem; height: .18rem; }
.col-dot { display: block; width: .18rem; height: .18rem; border-radius: 50%; background: var(--lilac); }

/* ---------------------------------------- frame, header, socials */
.frame { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.fl { position: absolute; background: var(--line); }
.fl-t, .fl-b { left: -30%; right: -30%; height: .015rem; }
.fl-l, .fl-r { top: -30%; bottom: -30%; width: .015rem; }
.fl-t { top: .412rem; } .fl-b { bottom: .412rem; }
.fl-l { left: .901rem; } .fl-r { right: .907rem; }
.fc { position: absolute; width: .35rem; height: .35rem; margin: -.175rem 0 0 -.175rem;
    background: linear-gradient(var(--lilac), var(--lilac)) center / 100% .09rem no-repeat, linear-gradient(var(--lilac), var(--lilac)) center / .09rem 100% no-repeat; }
.fc-tl, .fc-bl { left: .909rem; } .fc-tr, .fc-br { left: calc(100% - .915rem); }
.fc-tl, .fc-tr { top: .42rem; } .fc-bl, .fc-br { top: calc(100% - .42rem); }

.top { position: absolute; z-index: 5; inset: 0 0 auto 0; height: 0; }
.logo { position: absolute; left: 1.58rem; top: 1.18rem; width: .72rem; display: block; }
.logo svg { display: block; width: 100%; height: auto; }
.login { position: absolute; right: 1.68rem; top: 1.235rem; width: .91rem; height: .4rem; border-radius: .2rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .23rem; letter-spacing: -.04em; padding-bottom: .02rem; box-sizing: border-box;
    background: linear-gradient(90deg, transparent 30%, rgba(19, 0, 51, .62)), linear-gradient(180deg, #4E0067, #87519B); }

.socials { position: absolute; z-index: 5; left: 0; bottom: 0; height: 0; width: 4rem; }
.socials a { position: absolute; display: block; color: var(--lilac); }
.socials svg { display: block; width: 100%; height: 100%; }
.s-discord { left: 1.5805rem; bottom: .6rem; width: .4615rem; height: .52rem; }
.s-github { left: 2.2181rem; bottom: .6695rem; width: .4352rem; height: .4352rem; }
.s-x { left: 2.8608rem; bottom: .6833rem; width: .45rem; height: .4065rem; }

/* ---------------------------------------- hero */
.hero-title { position: absolute; z-index: 5; left: 1.58rem; top: calc(50% - 1.16rem); font-size: .65rem; letter-spacing: -.05em; line-height: .78rem; white-space: nowrap; pointer-events: none; }
.hero-title span { display: block; }
.hero-title .l1 { font-weight: 500; font-size: .65rem; text-transform: uppercase; }
.hero-title .l2 { font-weight: 400; font-size: .6rem; line-height: .72rem; }
.hero-title .l1 + .l2 { margin-top: -.02rem; }
.hero-title .w { display: inline-block; white-space: pre; }
.pc { position: absolute; z-index: 6; right: 0; bottom: 0; width: 19.2rem; height: 10.8rem; pointer-events: none; will-change: transform; }
.pc canvas { display: block; width: 100%; height: 100%; }

.cursor { position: absolute; z-index: 7; left: 0; top: 0; width: .28rem; height: .4rem; display: none; pointer-events: none; transform-origin: 0 0; overflow: visible; }
.film .cursor { display: block; }

/* ---------------------------------------- mobile (portrait) */
@media (max-aspect-ratio: 1/1) {
    html { font-size: min(calc(100vw / 3.9), calc(100vh / 7.8)); }
    @supports (height: 100svh) { html { font-size: min(calc(100vw / 3.9), calc(100svh / 7.8)); } }
    :root { --slide: 4.2rem; --line: rgba(216, 200, 226, .5); }
    body { font-size: .13rem; line-height: .175rem; }

    .fl-t { top: .18rem; } .fl-b { bottom: .18rem; }
    .fl-l { left: .16rem; } .fl-r { right: .16rem; }
    .fl-t, .fl-b { height: .01rem; } .fl-l, .fl-r { width: .01rem; }
    .fc { width: .15rem; height: .15rem; margin: -.075rem 0 0 -.075rem; background-size: 100% .04rem, .04rem 100%; }
    .fc-tl, .fc-bl { left: .165rem; } .fc-tr, .fc-br { left: calc(100% - .165rem); }
    .fc-tl, .fc-tr { top: .185rem; } .fc-bl, .fc-br { top: calc(100% - .185rem); }

    .logo { left: .34rem; top: .4rem; width: .44rem; }
    .login { right: .34rem; top: .41rem; width: .62rem; height: .28rem; border-radius: .14rem; font-size: .155rem; padding-bottom: .01rem; }

    .socials { width: 100%; }
    .s-discord { left: .34rem; bottom: .29rem; width: .24rem; height: .27rem; }
    .s-github { left: .67rem; bottom: .325rem; width: .215rem; height: .215rem; }
    .s-x { left: .985rem; bottom: .33rem; width: .215rem; height: .195rem; }

    .page { display: flex; flex-direction: column; box-sizing: border-box; padding: .84rem .34rem .68rem; }
    .dots { background-size: .1rem .1rem; background-image: radial-gradient(circle at center, rgba(118, 112, 124, .647) .009rem, transparent .012rem);
        -webkit-mask-image: radial-gradient(ellipse 3rem 3rem at 56% 34%, #000 0, rgba(0, 0, 0, .6) 35%, rgba(0, 0, 0, .2) 70%, transparent 100%);
        mask-image: radial-gradient(ellipse 3rem 3rem at 56% 34%, #000 0, rgba(0, 0, 0, .6) 35%, rgba(0, 0, 0, .2) 70%, transparent 100%); }
    .iso-wrap { position: relative; flex: 1 1 auto; min-height: 1.5rem; margin: 0 -.34rem; }
    .iso { left: 60%; top: calc(50% + .32rem); width: 10.5rem; height: 5.906rem; margin: -2.844rem 0 0 -5.25rem; }

    [data-page="run"] .iso { left: 70%; top: calc(50% + .5rem); }
    .title { position: static; font-size: .8rem; letter-spacing: -.04em; line-height: .78rem; margin: .06rem 0 .12rem -.04rem; }
    .title--c { left: auto; }
    .block { position: static; width: auto; flex: 0 0 auto; }
    .head { font-size: .19rem; line-height: .24rem; white-space: nowrap; }
    .head-line .head { font-size: .165rem; }
    .block > .head { margin-bottom: .1rem; }
    .head-line { gap: .08rem; margin-bottom: .08rem; }
    .tagline { font-size: .15rem; line-height: .2rem; margin-bottom: .1rem; }
    .desc { margin-bottom: .13rem; }
    .para { margin-bottom: .1rem; }
    .block hr { margin-bottom: .1rem; }
    .row { grid-template-columns: 1.04rem 1fr; column-gap: .14rem; margin-bottom: .1rem; }
    .tabs { height: .3rem; gap: .08rem; margin-bottom: .14rem; }
    .tab, .tab-pill-labels span { font-size: .135rem; line-height: .3rem; height: .3rem; padding: 0 .13rem; }
    .tab, .tab-pill { border-radius: .15rem; }
    .tab-pill { height: .3rem; }
    .tab-pill-labels { gap: .08rem; }
    .panels { margin: -.08rem -.34rem -.1rem; padding: .08rem .34rem .1rem; }
    .pill { height: .26rem; padding: 0 .1rem; font-size: .1rem; }
    .pill i { border-radius: .13rem; }
    .pill--soon { height: .22rem; padding: 0 .07rem; letter-spacing: .02em; flex: none; }
    .pill--soon i { border-radius: .11rem; }
    .tags { flex-wrap: wrap; gap: .06rem; height: auto; margin-top: .02rem; }

    .column { top: .92rem; }
    .col-item { left: .34rem; font-size: .15rem; line-height: .24rem; }
    .col-item:nth-of-type(1) { top: 0; }
    .col-item:nth-of-type(2) { top: .24rem; }
    .col-item:nth-of-type(3) { top: .48rem; }
    .col-label small { left: .62rem; bottom: .045rem; font-size: .09rem; }
    .col-dot-rise { left: .34rem; top: .07rem; width: .1rem; height: .1rem; }
    .col-dot { width: .1rem; height: .1rem; }

    .hero-title { left: .34rem; top: .98rem; font-size: .36rem; line-height: .44rem; }
    .hero-title .l1 { font-size: .36rem; }
    .hero-title .l2 { font-size: .31rem; line-height: .39rem; }
    .hero-title .l1 + .l2 { margin-top: 0; }
    .pc { width: 8.83rem; height: 4.97rem; right: auto; left: -4.14rem; bottom: .06rem; }
}

/* Nothing paints until the timeline has set the hero state (opacity cannot be overridden by children). */
.stage.booting { opacity: 0; }