/* /Components/Layout/AdminLayout.razor.rz.scp.css */
.admin[b-0x5k1v861z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: var(--color-ink);
    background: var(--color-cream);
}

.admin__bar[b-0x5k1v861z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 12px var(--gutter);
    color: var(--color-cream);
    background: var(--color-ink);
}

.admin__brand[b-0x5k1v861z] {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 22px;
    text-transform: uppercase;
}

.admin__nav[b-0x5k1v861z] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-weight: 700;
}

.admin__nav[b-0x5k1v861z]  a.active {
    color: var(--color-pumpkin);
}

.admin__main[b-0x5k1v861z] {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding: 32px var(--gutter) 64px;
}

/* ---- The pages' building blocks ---- */
.admin__main[b-0x5k1v861z]  h1 {
    margin-bottom: 16px;
    font-size: 44px;
}

.admin__main[b-0x5k1v861z]  h2 {
    margin: 40px 0 12px;
    font-size: 26px;
}

.admin__main[b-0x5k1v861z]  a {
    text-decoration: underline;
}

.admin__main[b-0x5k1v861z]  input,
.admin__main[b-0x5k1v861z]  select,
.admin__main[b-0x5k1v861z]  textarea {
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--color-brown);
    border-radius: 4px;
    background: #fff;
    color: var(--color-ink);
    font: 16px / 1.4 var(--font-body);
}

.admin__main[b-0x5k1v861z]  button {
    padding: 9px 16px;
    border: 0;
    border-radius: 4px;
    background: var(--color-ink);
    color: var(--color-pumpkin);
    font: 700 15px / 1.4 var(--font-body);
    cursor: pointer;
}

.admin__main[b-0x5k1v861z]  button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* a line on where things stand */
.admin__main[b-0x5k1v861z]  .admin-note {
    margin: 0 0 16px;
    padding: 12px 16px;
    border-radius: 4px;
    background: var(--color-tan);
}

.admin__main[b-0x5k1v861z]  .admin-note--error {
    background: #F6C7BF;
}
/* /Components/Layout/HomeFooter.razor.rz.scp.css */
.footer[b-6f4znid1wx] {
    /* above the Thaumiel Society line art, which runs down into it */
    position: relative;
    z-index: 1;
    background: var(--grain), var(--color-pumpkin);
    background-blend-mode: soft-light;
    color: var(--color-brown);
    --focus-ring: var(--color-brown);
}

.footer__inner[b-6f4znid1wx] {
    position: relative;
    max-width: var(--page-max);
    margin-inline: auto;
    padding: 34px var(--gutter) 7px;
    display: grid;
    grid-template-columns: 400px 104px 1fr;
    align-items: end;
    gap: 0 24px;
}

/* ---- Site map: a brown label over a framed list ---- */
.sitemap[b-6f4znid1wx] {
    font-size: 12px;
    line-height: normal;
}

.sitemap__title[b-6f4znid1wx] {
    padding: 8px;
    background: var(--color-brown);
    color: var(--color-pumpkin);
    text-align: center;
    text-transform: uppercase;
}

.sitemap__links[b-6f4znid1wx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--color-brown);
    list-style: none;
}

/* ---- Social links: round brown stickers, two by two ---- */
.socials[b-6f4znid1wx] {
    display: grid;
    grid-template-columns: repeat(2, 48px);
    gap: 8px;
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
}

.socials a[b-6f4znid1wx] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-brown);
    color: var(--color-pumpkin);
    --focus-ring: var(--color-cream);
}

.socials[b-6f4znid1wx]  svg {
    width: 32px;
    height: 32px;
}

/* ---- Newsletter, on a TV set that sticks out above the footer ---- */
.newsletter[b-6f4znid1wx] {
    position: absolute;
    right: var(--gutter);
    bottom: 60px;
    width: 344px;
    height: 200px;
}

/* a grainy screen, like the dark slopes */
.newsletter[b-6f4znid1wx]  .tv__screen {
    background: var(--grain-brown);
}

/* the content sits in the middle of the screen */
.newsletter__screen[b-6f4znid1wx] {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 33px;
    color: var(--color-cream);
}

.newsletter__title[b-6f4znid1wx] {
    font-size: 36px;
    line-height: normal;
    text-align: center;
    color: var(--color-pumpkin);
}

.newsletter__text[b-6f4znid1wx] {
    margin-top: 2px;
    font-size: 16px;
    line-height: normal;
}

.newsletter__row[b-6f4znid1wx] {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.newsletter__row input[b-6f4znid1wx],
.newsletter__row button[b-6f4znid1wx] {
    padding: 4px 8px 8px;
    border: 1px solid;
    border-radius: 4px;
    background: none;
    font: 600 14px / normal var(--font-body);
}

.newsletter__row input[b-6f4znid1wx] {
    flex: 1;
    min-width: 0;
    border-color: var(--color-cream);
    color: var(--color-cream);
}

.newsletter__row input[b-6f4znid1wx]::placeholder {
    color: rgba(245, 241, 230, 0.4);
    opacity: 1;
}

.newsletter__row button[b-6f4znid1wx] {
    border-color: var(--color-pumpkin);
    color: var(--color-pumpkin);
}

/* a refused address: the field says so in coral */
.newsletter__row input[aria-invalid="true"][b-6f4znid1wx] {
    border-color: var(--color-coral);
}

.newsletter__row input[aria-invalid="true"][b-6f4znid1wx]::placeholder {
    color: var(--color-coral);
}

/* the thanks, in place of the field */
.newsletter__thanks[b-6f4znid1wx] {
    margin-top: 14px;
    font: 600 14px / normal var(--font-body);
    color: var(--color-pumpkin);
}

/* ---- Bottom line: the name and year, the e-mail address on the right ---- */
.footer__bottom[b-6f4znid1wx] {
    grid-column: 1 / -1;
    margin-top: 24px;
    border-top: 4px solid var(--color-brown);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 24px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 20px;
    line-height: normal;
    text-transform: uppercase;
}

/* an address reads better in plain lowercase */
.footer__email[b-6f4znid1wx] {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    text-transform: none;
}

/* the TV comes down into the flow, still sticking out above the footer */
@media (max-width: 1000px) {
    .footer__inner[b-6f4znid1wx] {
        grid-template-columns: minmax(0, 400px) auto 1fr;
        padding-top: 0;
    }

    .newsletter[b-6f4znid1wx] {
        position: relative;
        right: auto;
        bottom: auto;
        order: -1;
        grid-column: 1 / -1;
        justify-self: center;
        width: min(344px, 100%);
        height: auto;
        margin: -56px 0 32px;
    }
}

@media (max-width: 560px) {
    .footer__inner[b-6f4znid1wx] { grid-template-columns: minmax(0, 1fr); }
    .socials[b-6f4znid1wx] { grid-template-columns: repeat(4, 48px); margin-top: 24px; }
}
/* /Components/Layout/HomeHeader.razor.rz.scp.css */
/* stays at the top of the screen: apart from the band, the logo and the pill, it lets the page
   show through */
.band[b-7utrp6e5d8] {
    position: sticky;
    top: 0;
    z-index: 10;
    container-type: inline-size;
    /* brown on the yellow tab, over the tan paper as over the dark wall */
    color: var(--color-brown);
}

/* once the page scrolls, it casts a soft shadow on what passes under it */
@supports (animation-timeline: scroll()) {
    .band[b-7utrp6e5d8] {
        animation: band-shadow-b-7utrp6e5d8 linear both;
        animation-timeline: scroll(root);
        animation-range: 0 80px;
    }
}

@keyframes band-shadow-b-7utrp6e5d8 {
    to { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.25)); }
}

.band__inner[b-7utrp6e5d8] {
    position: relative;
    max-width: var(--page-max);
    height: 96px;
    margin-inline: auto;
    padding: 0 32px 0 19px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* The band spans the whole screen: the Figma shape (as a mask) gives the tab and its slant,
   and plain bands carry it to the screen edges, hiding its rounded ends. Its grain is the
   page's (the one exported from Figma comes out far darker in browsers). */
.band__shape[b-7utrp6e5d8] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 96px;
    background: var(--grain), var(--color-pumpkin);
    background-blend-mode: soft-light;
    /* where the drawn band starts: 33px left of the 1400px frame */
    --tab-x: calc(max(0px, 50cqi - var(--page-max) / 2) - 33px);
    mask:
        url('/images/header-band.svg') var(--tab-x) 0 / 1456px 96px no-repeat,
        linear-gradient(#000 0 0) 0 0 / calc(var(--tab-x) + 40px) 100% no-repeat,
        linear-gradient(#000 0 0) 100% 0 / calc(100% - var(--tab-x) - 1448px) 16px no-repeat;
}

/* ---- Logo on the tab ---- */
.logo[b-7utrp6e5d8] {
    position: relative;
    width: 149px;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.logo:hover[b-7utrp6e5d8] {
    text-decoration: none;
}

.logo__img[b-7utrp6e5d8] {
    width: 149px;
    height: 64px;
    object-fit: cover;
    transform-origin: 50% 85%;
}

/* hovered, focused or tapped, the pumpkin bounces like jelly */
@media (prefers-reduced-motion: no-preference) {
    .logo:hover .logo__img[b-7utrp6e5d8],
    .logo:focus-visible .logo__img[b-7utrp6e5d8] {
        animation: jelly-b-7utrp6e5d8 0.6s ease-out;
    }
}

@keyframes jelly-b-7utrp6e5d8 {
    25% { scale: 1.12 0.88; }
    50% { scale: 0.94 1.08; }
    75% { scale: 1.04 0.97; }
}

.logo__tagline[b-7utrp6e5d8] {
    font-size: 12px;
    line-height: normal;
    white-space: nowrap;
}

/* ---- Right side: the sound button, then the tabs (or the phone menu) ---- */
.band__actions[b-7utrp6e5d8] {
    position: relative;
    height: 64px;
    margin-top: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* the sound button, round like the phone menu's: a speaker, struck out when off */
.sound-toggle[b-7utrp6e5d8] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-brown);
    color: #fff;
    cursor: pointer;
}

.sound-toggle:hover[b-7utrp6e5d8] {
    color: var(--color-pumpkin);
}

.sound-toggle[aria-pressed="true"] .when-off[b-7utrp6e5d8],
.sound-toggle[aria-pressed="false"] .when-on[b-7utrp6e5d8] {
    display: none;
}

/* the volume: a brown pill under the button, shown while the mouse is over it, while it has the
   keyboard focus, or after a tap (.is-open, ui-sounds.js) */
.sound[b-7utrp6e5d8] {
    position: relative;
    display: flex;
}

.sound__panel[b-7utrp6e5d8] {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    translate: -50% 0;
    display: flex;
    padding: 12px 16px;
    border-radius: 800px;
    background: var(--color-brown);
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
}

/* a bridge for the mouse between the button and the pill */
.sound__panel[b-7utrp6e5d8]::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 8px;
}

.sound:hover .sound__panel[b-7utrp6e5d8],
.sound:focus-within .sound__panel[b-7utrp6e5d8],
.sound.is-open .sound__panel[b-7utrp6e5d8] {
    opacity: 1;
    visibility: visible;
}

.sound__volume[b-7utrp6e5d8] {
    width: 120px;
    margin: 0;
    accent-color: var(--color-pumpkin);
    cursor: pointer;
}

/* ---- Tabs: a brown pill, the current page between chevrons ---- */
.tabs[b-7utrp6e5d8] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px;
    border-radius: 800px;
    background: var(--color-brown);
}

.tabs__tab[b-7utrp6e5d8] {
    width: 112px;
    height: 48px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
}

.tabs__tab[aria-current][b-7utrp6e5d8] {
    text-decoration: none;
}

/* The games' tab unrolls a brown sheet from under the pill, its left edge in line with the
   pill's, listing the games; it opens under the mouse or the keyboard focus. */
.tabs__games[b-7utrp6e5d8] {
    position: relative;
    display: flex;
}

/* keeps the mouse on the tab while it crosses the pill's edge towards the sheet */
.tabs__games[b-7utrp6e5d8]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 12px;
}

.tabs__menu[b-7utrp6e5d8] {
    position: absolute;
    /* under the pill, which hides its top */
    z-index: -1;
    left: -8px;
    top: 24px;
    width: max-content;
    min-width: calc(100% + 16px);
    display: grid;
    margin: 0;
    padding: 44px 24px 16px;
    border-radius: 0 0 24px 24px;
    background: var(--color-brown);
    list-style: none;
    visibility: hidden;
    /* rolled up; unrolling draws it down from the pill, its shadow included */
    clip-path: inset(0 -12px 100% -12px);
    transition: clip-path 0.25s ease-out, visibility 0.25s;
}

.tabs__games:hover .tabs__menu[b-7utrp6e5d8],
.tabs__games:focus-within .tabs__menu[b-7utrp6e5d8] {
    visibility: visible;
    clip-path: inset(0 -12px -12px -12px);
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.25);
}

.tabs__menu a[b-7utrp6e5d8] {
    display: block;
    padding-block: 8px;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #fff;
    text-transform: uppercase;
    white-space: nowrap;
}

/* the game on screen, in yellow, in the sheet as in the phone menu */
.tabs__menu [aria-current][b-7utrp6e5d8],
.menu__nav [aria-current][b-7utrp6e5d8] {
    color: var(--color-pumpkin);
}

@media (prefers-reduced-motion: reduce) {
    .tabs__menu[b-7utrp6e5d8] {
        transition: none;
    }
}

/* FR / EN, the current language in yellow */
.lang-switch[b-7utrp6e5d8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-inline: 12px;
    font-weight: 600;
    font-size: 16px;
    line-height: normal;
    color: #fff;
}

.lang-switch a[b-7utrp6e5d8] {
    padding-block: 12px;
}

.lang-switch .is-active[b-7utrp6e5d8] {
    color: var(--color-pumpkin);
}

/* ---- Phone menu ---- */
.menu[b-7utrp6e5d8] {
    display: none;
    position: relative;
}

.menu__toggle[b-7utrp6e5d8] {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-brown);
    color: #fff;
    cursor: pointer;
    list-style: none;
}

.menu__toggle[b-7utrp6e5d8]::-webkit-details-marker {
    display: none;
}

.menu__icon--close[b-7utrp6e5d8],
.menu[open] .menu__icon--open[b-7utrp6e5d8] {
    display: none;
}

.menu[open] .menu__icon--close[b-7utrp6e5d8] {
    display: block;
}

.menu__panel[b-7utrp6e5d8] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 230px;
    display: grid;
    justify-items: start;
    padding: 12px 20px 16px;
    border-radius: 24px;
    background: var(--color-brown);
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.25);
}

.menu__nav[b-7utrp6e5d8] {
    display: grid;
    justify-items: start;
}

.menu__nav a[b-7utrp6e5d8] {
    padding-block: 8px;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
    text-transform: uppercase;
}

/* the games, indented under their tab along a thin line */
.menu__sub[b-7utrp6e5d8] {
    display: grid;
    justify-items: start;
    margin: 0 0 4px 6px;
    padding: 0 0 0 14px;
    border-left: 2px solid rgba(255, 255, 255, 0.25);
    list-style: none;
}

.menu__sub a[b-7utrp6e5d8] {
    display: block;
    padding-block: 6px;
    font-size: 14px;
}

.menu .lang-switch[b-7utrp6e5d8] {
    padding-inline: 0;
}

.menu .lang-switch a[b-7utrp6e5d8] {
    padding-block: 8px;
}

.menu__panel .button[b-7utrp6e5d8] {
    margin-top: 8px;
}

/* the pill, Contact button included, no longer fits beside the logo */
@media (max-width: 820px) {
    .band__inner[b-7utrp6e5d8] { padding-right: var(--gutter); }
    .tabs[b-7utrp6e5d8] { display: none; }
    .menu[b-7utrp6e5d8] { display: block; }
}
/* /Components/Layout/HomeLayout.razor.rz.scp.css */
.paper[b-obx70y6eet] {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
    color: var(--color-brown);
    background-color: var(--color-tan);
}

/* the grain of the paper */
.paper[b-obx70y6eet]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url('/images/bg-noise.png') top left / 354.5px 246.25px;
    mix-blend-mode: darken;
    opacity: 0.4;
    pointer-events: none;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-levmnslpus] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-levmnslpus] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Admin/AdminNewsletter.razor.rz.scp.css */
/* the form on the left, the e-mail as it will look on the right */
.compose[b-vxm9t23q48] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
    gap: 32px;
    align-items: start;
}

.compose[b-vxm9t23q48]  form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.compose label[b-vxm9t23q48] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-weight: 700;
}

.compose__help[b-vxm9t23q48] {
    margin-top: -8px;
    font-size: 14px;
    color: var(--color-brown);
}

.compose__pair[b-vxm9t23q48] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.compose__actions[b-vxm9t23q48] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.compose__actions input[b-vxm9t23q48] {
    flex: 0 1 300px;
}

.compose__preview[b-vxm9t23q48] {
    position: sticky;
    top: 16px;
}

.compose__preview iframe[b-vxm9t23q48] {
    display: block;
    width: 100%;
    height: min(900px, calc(100vh - 32px));
    border: 1px solid var(--color-brown);
    border-radius: 4px;
}

.images[b-vxm9t23q48] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.images img[b-vxm9t23q48] {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 4px;
}

.images input[b-vxm9t23q48] {
    width: 100%;
    margin-top: 6px;
    font-size: 12px;
}

@media (max-width: 1000px) {
    .compose[b-vxm9t23q48] {
        grid-template-columns: minmax(0, 1fr);
    }

    .compose__preview[b-vxm9t23q48] {
        position: static;
    }
}
/* /Components/Pages/Admin/AdminSubscribers.razor.rz.scp.css */
.summary[b-cq4fw1ufz4] {
    font-size: 18px;
}

.add[b-cq4fw1ufz4] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.add input[b-cq4fw1ufz4] {
    flex: 0 1 340px;
}

.list[b-cq4fw1ufz4] {
    width: 100%;
    border-collapse: collapse;
}

.list th[b-cq4fw1ufz4],
.list td[b-cq4fw1ufz4] {
    padding: 8px 12px 8px 0;
    border-bottom: 1px solid rgba(88, 82, 70, 0.3);
    text-align: left;
    overflow-wrap: anywhere;
}

.list td:last-child[b-cq4fw1ufz4] {
    text-align: right;
}
/* /Components/Pages/GravityHook.razor.rz.scp.css */
/* ==========================================================================
   Gravity Hook — the Figma frame of the game's page, laid out as a paper
   collage (collage.css): stage y = frame y - 96 above the stripes, frame
   y - 1708 below. Below 1100 px the skins, the trailer and the screenshots
   become small collages on 400-unit frames, and the badges flow.
   ========================================================================== */

/* ---- The skins, then the logo, the trailer and the screenshots on a tall dark slope ---- */
.gh__stage[b-tvyep9q6m7] {
    --stage-h: 1516;
}

/* groups only matter on small screens */
.gh__hero[b-tvyep9q6m7],
.gh__show[b-tvyep9q6m7],
.gh__carousel[b-tvyep9q6m7] {
    display: contents;
}

/* two of the astronaut's skins, behind the slope as in the frame */
.gh__orange[b-tvyep9q6m7] { --x: 155.38; --y: -60.62; --w: 920; --r: 13.79deg; }
.gh__glow[b-tvyep9q6m7] { --x: 139; --y: 310; --w: 577; pointer-events: none; }
.gh__purple[b-tvyep9q6m7] { --x: -126.57; --y: 156.43; --w: 725.3; --r: -6.99deg; }

.gh__slope[b-tvyep9q6m7] {
    --x: -189;
    --y: 272;
    --slope-h: 1244;
    --shape: url('/images/studio-shape.svg');
}

.gh__logo[b-tvyep9q6m7] { --x: 878; --y: 294; --w: 522; }

.gh__logo img[b-tvyep9q6m7] {
    display: block;
    width: 100%;
}

/* the two store badges, one above the other */
.gh__stores[b-tvyep9q6m7] {
    --x: 1122;
    --y: 64;
    --w: 188;
    --badge-h: calc(62 / 188 * var(--w) * var(--u));
}

.gh__stores[b-tvyep9q6m7]  .badges {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(21 / 188 * var(--w) * var(--u));
}

/* the TV of the frame, its screen taking the trailer's shape around the same centre */
.gh__tv[b-tvyep9q6m7] { --x: 59.07; --y: 864.14; --w: 354.77; --r: -6.81deg; }

/* ---- The carousel: three screenshots pinned in three slots, framed to the captures around
   the frame's centres; moving along, they slide to their new slot and the newcomer gets
   pinned on the wall ---- */
.gh__shot[b-tvyep9q6m7] {
    display: none;
    transition-property: left, top, rotate, translate, scale, filter;
}

.gh__shot[data-slot][b-tvyep9q6m7] {
    display: block;
}

.gh__shot[data-slot="1"][b-tvyep9q6m7] { --x: 519.25; --y: 841.24; --r: -4.28deg; --tilt: -1.5deg; }
.gh__shot[data-slot="2"][b-tvyep9q6m7] { --x: 758.5; --y: 889.48; --r: 4.95deg; }
.gh__shot[data-slot="3"][b-tvyep9q6m7] { --x: 1047.2; --y: 855.33; --r: 1.83deg; }

/* the whole screenshot opens it large */
.gh__zoom[b-tvyep9q6m7] {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.gh__large[b-tvyep9q6m7] {
    display: block;
    width: min(92vw, 88dvh * 540 / 1169);
    height: auto;
    border-radius: 16px;
}

/* going from one screenshot to the next, the new one slides in from its side */
@media (prefers-reduced-motion: no-preference) {
    .gh__large.is-changing[b-tvyep9q6m7] {
        animation: shot-in-b-tvyep9q6m7 0.25s ease-out;
    }
}

@keyframes shot-in-b-tvyep9q6m7 {
    from { opacity: 0; translate: var(--from, 24px) 0; }
}

/* the arrows on each side of the screenshot, or under it when the screen has no room beside it */
.gh__large-prev[b-tvyep9q6m7],
.gh__large-next[b-tvyep9q6m7] {
    position: absolute;
    top: calc(50% - 24px);
}

.gh__large-prev[b-tvyep9q6m7] { right: calc(100% + 16px); }
.gh__large-next[b-tvyep9q6m7] { left: calc(100% + 16px); }

@media (max-width: 700px) {
    /* the screenshot leaves room for them below, the whole still centred on the screen */
    .gh__lightbox[b-tvyep9q6m7] { padding-bottom: 64px; }
    .gh__large[b-tvyep9q6m7] { width: min(92vw, (88dvh - 64px) * 540 / 1169); }

    .gh__large-prev[b-tvyep9q6m7],
    .gh__large-next[b-tvyep9q6m7] {
        top: auto;
        bottom: 0;
    }

    .gh__large-prev[b-tvyep9q6m7] { right: auto; left: calc(50% - 72px); }
    .gh__large-next[b-tvyep9q6m7] { left: calc(50% + 8px); }
}

/* the arrows: small coral keys */
.gh__arrow[b-tvyep9q6m7] {
    width: 64px;
    min-width: 0;
    cursor: pointer;
}

.gh__arrow--prev[b-tvyep9q6m7] { --x: 466; --y: 1115; }
.gh__arrow--next[b-tvyep9q6m7] { --x: 1292; --y: 1115; }

/* ---- The team and the testers, another skin behind them, on the slope upside down ---- */
.gh-team__stage[b-tvyep9q6m7] {
    --stage-h: 1551;
}

.gh-team__badges[b-tvyep9q6m7] {
    display: contents;
}

/* turned around the middle of the page, the shape lands at x = -196 as in the frame */
.gh-team__slope[b-tvyep9q6m7] {
    --x: -185;
    --y: 0;
    --r: 180deg;
    --slope-h: 1244;
    --shape: url('/images/studio-shape.svg');
}

/* in front of the slope, its bottom behind the footer */
.gh-team__star[b-tvyep9q6m7] {
    --x: 512;
    --y: 728;
    --w: 1049;
    aspect-ratio: 1049 / 1000;
    object-fit: cover;
    object-position: top;
    pointer-events: none;
}

.gh-team__title[b-tvyep9q6m7] { --x: 92; --y: 139; --w: 800; color: var(--color-cream); }

/* the studio's badge (StudioBadge) and the team's own */
.gh-team__badges[b-tvyep9q6m7]  .gh-team__studio {
    --x: 235.39;
    --y: 274.58;
    --r: -4.93deg;
}

.gh-team__badges[b-tvyep9q6m7]  .gh-team__member {
    --x: 123.87;
    --y: 674.46;
    --r: 5.49deg;
    --badge-color: var(--color-coral);
}

/* the testers' badge: a narrow card, their names one per line */
.gh-team__testers[b-tvyep9q6m7] {
    --x: 875.51;
    --y: 256.29;
    --w: 336;
    --r: -2.68deg;
    --tilt: -1.5deg;
    --badge-color: var(--color-blue);
}

.gh-team__testers .badge__body[b-tvyep9q6m7] {
    align-items: flex-start;
}

.gh-team__names[b-tvyep9q6m7] {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: calc(24 * var(--u));
    line-height: normal;
}

.gh-team__thanks[b-tvyep9q6m7] { --x: 1168; --y: 482; }

/* ==========================================================================
   Tablets and phones
   ========================================================================== */
@media (max-width: 1099px) {
    /* the skins on a 400-unit frame, the logo and the stores on the dark band in front of them */
    .gh__hero[b-tvyep9q6m7] {
        display: block;
        position: relative;
        isolation: isolate;
        max-width: 520px;
        margin-inline: auto;
        aspect-ratio: 400 / 460;
        container-type: inline-size;
        --u: calc(100cqi / 400);
    }

    .gh__orange[b-tvyep9q6m7] { --x: 110; --y: 0; --w: 290; }
    .gh__purple[b-tvyep9q6m7] { --x: -40; --y: 60; --w: 240; }
    .gh__glow[b-tvyep9q6m7] { --x: 60; --y: 120; --w: 200; }
    .gh__logo[b-tvyep9q6m7] { --x: 10; --y: 262; --w: 200; z-index: 2; }
    .gh__stores[b-tvyep9q6m7] { --x: 232; --y: 318; --w: 140; z-index: 2; }

    /* the trailer, the screenshots and their arrows on the same band */
    .gh__show[b-tvyep9q6m7] {
        display: block;
        position: relative;
        isolation: isolate;
        max-width: 520px;
        margin-inline: auto;
        aspect-ratio: 400 / 790;
        container-type: inline-size;
        --u: calc(100cqi / 400);
    }

    /* the TV stays big enough for YouTube (a screen of 200 px on a 375 px phone) */
    .gh__tv[b-tvyep9q6m7] { --x: 82; --y: 24; --w: 235; }

    .gh__shot[b-tvyep9q6m7] { --w: 125; }
    .gh__shot[data-slot="1"][b-tvyep9q6m7] { --x: 6; --y: 450; }
    .gh__shot[data-slot="2"][b-tvyep9q6m7] { --x: 138; --y: 468; }
    .gh__shot[data-slot="3"][b-tvyep9q6m7] { --x: 270; --y: 452; }

    .gh__arrow--prev[b-tvyep9q6m7] { --x: 120; --y: 730; }
    .gh__arrow--next[b-tvyep9q6m7] { --x: 216; --y: 730; }

    /* the dark bands run from edge to edge; in front of the skins, they hide the bottom of their
       pictures as the slope does on wide screens */
    .gh__hero[b-tvyep9q6m7]::before,
    .gh__show[b-tvyep9q6m7]::before,
    .gh-team__badges[b-tvyep9q6m7]::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        translate: -50% 0;
        background: var(--grain-brown);
    }

    .gh__hero[b-tvyep9q6m7]::before {
        z-index: 1;
        clip-path: polygon(0 58%, 100% 46%, 100% 100%, 0 100%);
    }

    /* the team, then the star skin at the bottom, behind the footer */
    .gh-team__stage[b-tvyep9q6m7] {
        display: flex;
        flex-direction: column;
    }

    .gh-team__badges[b-tvyep9q6m7] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        position: relative;
        isolation: isolate;
        padding: 48px var(--gutter) 72px;
        container-type: inline-size;
        /* a badge as in the frame, or narrower to fit */
        --u: min(1px, 100cqi / 660);
    }

    .gh-team__title[b-tvyep9q6m7] {
        position: static;
        width: auto;
        align-self: stretch;
    }

    .gh-team__badges[b-tvyep9q6m7]  .gh-team__studio,
    .gh-team__badges[b-tvyep9q6m7]  .gh-team__member,
    .gh-team__testers[b-tvyep9q6m7],
    .gh-team__thanks[b-tvyep9q6m7] {
        position: relative;
        left: auto;
        top: auto;
    }

    .gh-team__badges[b-tvyep9q6m7]  .gh-team__studio { --r: -2deg; }
    .gh-team__badges[b-tvyep9q6m7]  .gh-team__member { --r: 2deg; }

    /* the narrow card keeps readable names */
    .gh-team__testers[b-tvyep9q6m7] {
        --r: -1.5deg;
        --u: min(1px, 100cqi / 360);
    }

    .gh-team__thanks[b-tvyep9q6m7] {
        align-self: flex-end;
        margin: -72px 4px 0 0;
    }

    .gh-team__star[b-tvyep9q6m7] {
        order: 1;
        position: relative;
        left: auto;
        top: auto;
        width: min(100%, 420px);
        margin: 24px auto -96px;
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ==========================================================================
   Home — the Figma "Menu" frame, laid out as a paper collage (collage.css):
   on wide screens each game is a stage where everything is placed in frame
   pixels. Below 1100 px the texts flow and the pictures gather into smaller
   collages, each placed on its own 400-unit frame.
   ========================================================================== */
.gh__stage[b-q6pg9uevgo] {
    --stage-h: 1212;
}

.ts__stage[b-q6pg9uevgo] {
    --stage-h: 1300;
}

/* groups only matter for the small-screen collages */
.gh__media[b-q6pg9uevgo],
.ts__top[b-q6pg9uevgo],
.ts__cards[b-q6pg9uevgo],
.ts__scenes[b-q6pg9uevgo] {
    display: contents;
}

/* dark brown, grainy, like the slopes */
.gh__media[b-q6pg9uevgo]::before,
.ts__top[b-q6pg9uevgo]::before {
    background: var(--grain-brown);
}

/* some lean the other way */
.gh__shot--2[b-q6pg9uevgo],
.gh__note--2[b-q6pg9uevgo],
.ts__card--1[b-q6pg9uevgo],
.ts__scene--room[b-q6pg9uevgo] {
    --tilt: -1.5deg;
}

/* ---- The astronaut floats in zero gravity ---- */
@media (prefers-reduced-motion: no-preference) {
    .gh__astronaut[b-q6pg9uevgo] {
        animation: float-b-q6pg9uevgo 5s ease-in-out infinite;
    }
}

@keyframes float-b-q6pg9uevgo {
    50% { transform: translateY(-10px) rotate(-4deg); }
}

/* ---- Gravity Hook ---- */
/* drawn at 10% opacity in the file: 7% in the end */
.gh__lineart[b-q6pg9uevgo] { --x: 341; --y: -43; --w: 718; opacity: 0.7; pointer-events: none; }
.gh__slope[b-q6pg9uevgo] { --x: -189; --y: 272; }
.gh__intro[b-q6pg9uevgo] { --x: 92; --y: 160; --w: 401; }
.gh__logo[b-q6pg9uevgo] { --x: 897; --y: 584; --w: 522; }
/* framed to the captures, a little shorter than in the frame: same centres */
.gh__shot--1[b-q6pg9uevgo] { --x: 89.28; --y: 688.87; --r: -12.66deg; }
.gh__shot--2[b-q6pg9uevgo] { --x: 338.38; --y: 721.68; --r: -4.51deg; }
.gh__shot--3[b-q6pg9uevgo] { --x: 608.32; --y: 648.63; --r: 12.45deg; }
.gh__astronaut[b-q6pg9uevgo] { --x: 0; --y: 1012; --w: 188; }
.gh__note--1[b-q6pg9uevgo] { --x: 18; --y: 922; }
.gh__note--2[b-q6pg9uevgo] { --x: 799; --y: 1093; }

/* the phone of the frame, widened around its centre so its screen has the trailer's shape */
.gh__tv[b-q6pg9uevgo] {
    --x: 991.35;
    --y: 78.9;
    --w: 334;
    --r: 9.04deg;
}

/* the two store badges, one above the other */
.gh__stores[b-q6pg9uevgo] {
    --x: 1164;
    --y: 1028;
    --w: 188;
    --badge-h: calc(62 / 188 * var(--w) * var(--u));
}

.gh__stores[b-q6pg9uevgo]  .badges {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(21 / 188 * var(--w) * var(--u));
}

/* ---- Thaumiel Society ---- */
/* turned around the middle of the page, the shape lands at x = -191 as in the frame */
.ts__slope[b-q6pg9uevgo] { --x: -190; --y: 0; --r: 180deg; }
.ts__intro[b-q6pg9uevgo] { --x: 92; --y: 200; --w: 401; color: var(--color-cream); }

/* the cards have rounded corners: the shadow follows them */
.ts__card[b-q6pg9uevgo],
.ts__scene[b-q6pg9uevgo] {
    filter: drop-shadow(calc(4px + var(--lift) * 6px) calc(4px + var(--lift) * 8px) calc(6px + var(--lift) * 4px) rgba(0, 0, 0, 0.25));
}

.ts__card[b-q6pg9uevgo] { --w: 264; }
.ts__card--1[b-q6pg9uevgo] { --x: 581.62; --y: 168.05; --r: -17.46deg; }
.ts__card--2[b-q6pg9uevgo] { --x: 787; --y: 113; }
.ts__note[b-q6pg9uevgo] { --x: 1077; --y: 183; }
.ts__scene[b-q6pg9uevgo] { --w: 458; }
.ts__scene--stack[b-q6pg9uevgo] { --x: 139.76; --y: 750.7; --r: 5.06deg; }
.ts__scene--room[b-q6pg9uevgo] { --x: 139.77; --y: 860.72; --r: 7.21deg; }
.ts__world[b-q6pg9uevgo] { --x: 718; --y: 875; --w: 401; }
/* behind everything: while drifting, it slips under the cards and the dark slope */
.ts__lineart[b-q6pg9uevgo] { --x: 822; --y: 466; --w: 750; z-index: -1; opacity: 0.14; pointer-events: none; }

/* ==========================================================================
   Tablets and phones
   ========================================================================== */
@media (max-width: 1099px) {
    /* the world text flows like the intros */
    .ts__world[b-q6pg9uevgo] {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        max-width: 600px;
        margin-inline: auto;
        padding-inline: var(--gutter);
    }

    /* each group of pictures becomes a collage on a 400-unit frame */
    .gh__media[b-q6pg9uevgo],
    .ts__cards[b-q6pg9uevgo],
    .ts__scenes[b-q6pg9uevgo] {
        display: block;
        position: relative;
        max-width: 520px;
        margin-inline: auto;
        container-type: inline-size;
        --u: calc(100cqi / 400);
    }

    /* the dark bands run from edge to edge */
    .gh__media[b-q6pg9uevgo]::before,
    .ts__top[b-q6pg9uevgo]::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        translate: -50% 0;
    }

    /* Gravity Hook */
    .gh__stage[b-q6pg9uevgo] { padding-top: 24px; }
    .gh__lineart[b-q6pg9uevgo] { left: 50%; top: -30px; width: min(92%, 600px); translate: -50% 0; }

    .gh__media[b-q6pg9uevgo] {
        isolation: isolate;
        aspect-ratio: 400 / 930;
        margin-top: 40px;
    }

    .gh__media[b-q6pg9uevgo]::before {
        clip-path: polygon(0 200px, 100% 60px, 100% 100%, 0 100%);
    }

    /* the phone stays big enough for YouTube (a screen of 200 px on a 375 px phone) */
    .gh__tv[b-q6pg9uevgo] { --x: 120; --y: 10; --w: 235; }
    .gh__logo[b-q6pg9uevgo] { --x: -20; --y: 360; --w: 170; }
    .gh__stores[b-q6pg9uevgo] { --x: 245; --y: 450; --w: 140; }
    .gh__shot--1[b-q6pg9uevgo] { --x: 14; --y: 617; --w: 112; }
    .gh__shot--2[b-q6pg9uevgo] { --x: 140; --y: 642; --w: 112; }
    .gh__shot--3[b-q6pg9uevgo] { --x: 269; --y: 607; --w: 112; }
    .gh__astronaut[b-q6pg9uevgo] { --x: -8; --y: 810; --w: 100; }
    .gh__note--1[b-q6pg9uevgo] { --x: 2; --y: 540; }
    .gh__note--2[b-q6pg9uevgo] { --x: 262; --y: 815; }

    /* Thaumiel Society */
    .ts__top[b-q6pg9uevgo] {
        display: block;
        position: relative;
        isolation: isolate;
        padding: 40px 0 96px;
    }

    .ts__top[b-q6pg9uevgo]::before {
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 140px), 0 100%);
    }

    .ts__cards[b-q6pg9uevgo] { aspect-ratio: 400 / 440; margin-top: 40px; }
    .ts__card[b-q6pg9uevgo] { --w: 170; }
    .ts__card--1[b-q6pg9uevgo] { --x: 55; --y: 67.5; }
    .ts__card--2[b-q6pg9uevgo] { --x: 187; --y: 42.5; }
    .ts__note[b-q6pg9uevgo] { --x: 270; --y: 330; }

    .ts__scenes[b-q6pg9uevgo] { aspect-ratio: 400 / 350; margin-top: 8px; }
    .ts__scene[b-q6pg9uevgo] { --w: 340; }
    .ts__scene--stack[b-q6pg9uevgo] { --x: 30; --y: 27; }
    .ts__scene--room[b-q6pg9uevgo] { --x: 30; --y: 117; }

    .ts__stage[b-q6pg9uevgo] { padding-bottom: 140px; }
    .ts__world[b-q6pg9uevgo] { margin-top: 32px; }
    .ts__lineart[b-q6pg9uevgo] { left: auto; top: auto; right: -12%; bottom: -40px; width: min(70%, 480px); }
}
/* /Components/Pages/NewsletterUnsubscribe.razor.rz.scp.css */
.unsubscribe[b-ajyuprop8q] {
    padding-block: 56px 96px;
}

.unsubscribe__poster[b-ajyuprop8q] {
    width: 100%;
    max-width: 560px;
}

.unsubscribe__body[b-ajyuprop8q] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.unsubscribe__title[b-ajyuprop8q] {
    font-size: clamp(36px, 11cqi, 60px);
}

.unsubscribe__text[b-ajyuprop8q] {
    font-size: 18px;
    line-height: 1.5;
}

/* the field and its button, like the newsletter flyer's; the button goes under it on a phone */
.unsubscribe__row[b-ajyuprop8q] {
    align-self: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.unsubscribe__row input[b-ajyuprop8q] {
    flex: 1 1 220px;
    min-width: 0;
    height: 46px;
    padding: 0 12px;
    border: 2px dashed rgba(62, 58, 49, 0.55);
    background: rgba(255, 255, 255, 0.35);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 16px;
}

.unsubscribe__row input[b-ajyuprop8q]::placeholder {
    color: rgba(62, 58, 49, 0.85);
    opacity: 1;
}

.unsubscribe__row button[b-ajyuprop8q] {
    border: 0;
    cursor: pointer;
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.not-found[b-xahxe1bxex] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 56px;
    padding-block: 56px 96px;
}

.not-found__poster[b-xahxe1bxex] {
    width: 100%;
    max-width: 560px;
}

.not-found__body[b-xahxe1bxex] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.not-found__code[b-xahxe1bxex] {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(64px, 30cqi, 140px);
    line-height: 0.9;
    color: var(--color-stamp);
}

.not-found__title[b-xahxe1bxex] {
    font-size: clamp(36px, 11cqi, 60px);
}

.not-found__text[b-xahxe1bxex] {
    font-size: 18px;
    line-height: 1.5;
}
/* /Components/Pages/Studio.razor.rz.scp.css */
/* ==========================================================================
   Studio — the Figma frame of the studio page, laid out as a paper collage
   (collage.css): stage y = frame y - 96, the header's height. Below 1100 px
   the texts flow, the office becomes a small collage on a 400-unit frame and
   the badges and post-its line up.
   ========================================================================== */

/* ---- Entertainment and tech, then the team, on one tall dark slope ---- */
.studio__stage[b-pg6kqnquz1] {
    --stage-h: 1516;
}

/* groups only matter on small screens */
.studio__media[b-pg6kqnquz1],
.studio__team[b-pg6kqnquz1] {
    display: contents;
}

/* the pumpkin's outline: drawn at 10% opacity in the file, 7% in the end like the home's */
.studio__outline[b-pg6kqnquz1] { --x: 293; --y: 0; --w: 704; opacity: 0.7; }

.studio__slope[b-pg6kqnquz1] {
    --x: -189;
    --y: 272;
    --slope-h: 1244;
    --shape: url('/images/studio-shape.svg');
}

.studio__intro[b-pg6kqnquz1] { --x: 92; --y: 160; --w: 401; }
.studio__logo[b-pg6kqnquz1] { --x: 827; --y: 526; --w: 507; }

/* two lines, as in the frame, whatever the language */
.studio__intro .intro__title[b-pg6kqnquz1] {
    white-space: nowrap;
}

/* framed to the photo, around the same centre as in the frame */
.studio__office[b-pg6kqnquz1] { --x: 838.98; --y: 141.82; --w: 473.24; --r: 6.27deg; --pad: 8; }
.studio__note[b-pg6kqnquz1] { --x: 790; --y: 313; --tilt: -1.5deg; }

.studio__team-title[b-pg6kqnquz1] {
    --x: 94;
    --y: 848;
    --w: 800;
    color: var(--color-cream);
}

/* the badges (TeamBadge) */
.studio__team[b-pg6kqnquz1]  .badge--1 { --x: 85.11; --y: 1006.37; --r: -6.25deg; --tilt: -1.5deg; --badge-color: var(--color-blue); }
.studio__team[b-pg6kqnquz1]  .badge--2 { --x: 686.87; --y: 925.46; --r: 5.49deg; --badge-color: var(--color-coral); }

/* above the line art of the next section */
.studio__stripes[b-pg6kqnquz1] {
    position: relative;
    z-index: 1;
}

/* ---- What drives us ---- */
.values__stage[b-pg6kqnquz1] {
    --stage-h: 608;
}

.values__title[b-pg6kqnquz1] { --x: 94; --y: 80; --w: 1200; }

.values__note[b-pg6kqnquz1] { --y: 224; }
.values__note--1[b-pg6kqnquz1] { --x: 94; }
.values__note--2[b-pg6kqnquz1] { --x: 521; --tilt: -1.5deg; }
.values__note--3[b-pg6kqnquz1] { --x: 948; }

/* behind everything, running down under the footer: 10% in the file, 7% like the home's */
.values__lineart[b-pg6kqnquz1] { --x: 665; --y: -92; --w: 750; z-index: -1; opacity: 0.07; }

/* the big post-it, drawn in frame pixels: its note, a bold title over a few lines */
.note--large[b-pg6kqnquz1] {
    width: calc(339 * var(--u));
    height: calc(184 * var(--u));
}

.note--large .note__shadow[b-pg6kqnquz1] {
    left: calc(-6 * var(--u));
    top: calc(3 * var(--u));
    width: calc(351 * var(--u));
    height: calc(186.81 * var(--u));
}

.note--large .note__paper[b-pg6kqnquz1] {
    left: 0;
    top: calc(-0.53 * var(--u));
    width: calc(332.66 * var(--u));
    height: calc(176.83 * var(--u));
}

.note--large .note__text[b-pg6kqnquz1] {
    left: calc(165.54 * var(--u));
    top: calc(87.98 * var(--u));
    width: calc(253.85 * var(--u));
    height: calc(126.78 * var(--u));
    flex-direction: column;
    align-items: flex-start;
    font-size: calc(16 * var(--u));
    text-align: left;
}

.note__title[b-pg6kqnquz1] {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1em;
    line-height: normal;
    letter-spacing: normal;
    text-transform: none;
}

.note__title + p[b-pg6kqnquz1] {
    margin-top: 1.2em;
}

/* ==========================================================================
   Tablets and phones
   ========================================================================== */
@media (max-width: 1099px) {
    .studio__stage[b-pg6kqnquz1] { padding-top: 24px; }
    .studio__intro .intro__title[b-pg6kqnquz1] { white-space: normal; }
    .studio__outline[b-pg6kqnquz1] { left: 50%; top: -30px; width: min(92%, 600px); translate: -50% 0; }

    /* the office on the dark band: a collage on a 400-unit frame */
    .studio__media[b-pg6kqnquz1] {
        display: block;
        position: relative;
        isolation: isolate;
        max-width: 520px;
        margin: 40px auto 0;
        aspect-ratio: 400 / 450;
        container-type: inline-size;
        --u: calc(100cqi / 400);
    }

    .studio__office[b-pg6kqnquz1] { --x: 30; --y: 20; --w: 340; --r: 4deg; }
    .studio__note[b-pg6kqnquz1] { --x: 8; --y: 200; }
    .studio__logo[b-pg6kqnquz1] { --x: 90; --y: 300; --w: 280; }

    /* the team on the same dark band, one badge under the other */
    .studio__team[b-pg6kqnquz1] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        position: relative;
        isolation: isolate;
        padding: 24px var(--gutter) 72px;
        container-type: inline-size;
        /* a badge as in the frame, or narrower to fit */
        --u: min(1px, 100cqi / 660);
    }

    /* the dark band runs from edge to edge */
    .studio__media[b-pg6kqnquz1]::before,
    .studio__team[b-pg6kqnquz1]::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        translate: -50% 0;
        background: var(--grain-brown);
    }

    .studio__media[b-pg6kqnquz1]::before {
        clip-path: polygon(0 230px, 100% 120px, 100% 100%, 0 100%);
    }

    .studio__team-title[b-pg6kqnquz1] {
        position: static;
        width: auto;
        align-self: stretch;
    }

    .studio__team[b-pg6kqnquz1]  .badge {
        position: relative;
        left: auto;
        top: auto;
    }

    .studio__team[b-pg6kqnquz1]  .badge--1 { --r: -2deg; }
    .studio__team[b-pg6kqnquz1]  .badge--2 { --r: 2deg; }

    /* the post-its one under the other, as in the frame or narrower to fit */
    .values__stage[b-pg6kqnquz1] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 32px;
        padding: 64px var(--gutter) 140px;
        --u: min(1px, 100cqi / 345);
    }

    .values__title[b-pg6kqnquz1] {
        position: static;
        width: auto;
        align-self: stretch;
    }

    .values__note[b-pg6kqnquz1] {
        position: relative;
        left: auto;
        top: auto;
    }

    .values__note--2[b-pg6kqnquz1] { --r: 1.5deg; }
    .values__note--3[b-pg6kqnquz1] { --r: -1deg; }

    .values__lineart[b-pg6kqnquz1] { left: auto; top: auto; right: -12%; bottom: -40px; width: min(70%, 480px); }
}
/* /Components/Pages/ThaumielSociety.razor.rz.scp.css */
/* ==========================================================================
   Thaumiel Society — the Figma frame of the game's page, laid out as a paper
   collage (collage.css): stage y = frame y - 96 above the stripes, frame
   y - 1708 below. Below 1100 px the cast, the cards, the scenes and the crowd
   become small collages on 400-unit frames, and the texts and badges flow.
   ========================================================================== */

/* ---- The cast, then the deckbuilding pitch on a tall dark slope ---- */
.ts__stage[b-fwpu8375le] {
    --stage-h: 1516;
    /* the scenes run over the stripes and onto the next slope */
    z-index: 1;
}

/* groups only matter on small screens */
.ts__cast[b-fwpu8375le],
.ts__deck[b-fwpu8375le],
.ts__cards[b-fwpu8375le],
.ts__scenes[b-fwpu8375le] {
    display: contents;
}

/* the society's members, behind the slope as in the frame; the king's head is under the header */
.ts__king[b-fwpu8375le] { --x: 66; --y: -96; --w: 839; }
.ts__bodyguard[b-fwpu8375le] { --x: 499; --y: -40; --w: 701; }
.ts__queen[b-fwpu8375le] { --x: -229; --y: 30; --w: 751; }

/* soft halos of the paper's colour between them */
.ts__glow[b-fwpu8375le],
.ts-team__glow[b-fwpu8375le] {
    --w: 577;
    pointer-events: none;
}

.ts__glow--1[b-fwpu8375le] { --x: 476; --y: 184; }
.ts__glow--2[b-fwpu8375le] { --x: -48; --y: 222; }

.ts__slope[b-fwpu8375le] {
    --x: -189;
    --y: 272;
    --slope-h: 1244;
    --shape: url('/images/studio-shape.svg');
}

/* the game's name in its Art Deco letters, drawn as paths in the SVG */
.ts__title[b-fwpu8375le] { --x: 953.25; --y: 422.26; --w: 414; }

.ts__title img[b-fwpu8375le] {
    display: block;
    width: 100%;
}

.ts__intro[b-fwpu8375le] { --x: 92; --y: 835; --w: 555; color: var(--color-cream); }

/* the cards and scenes have rounded corners: the shadow follows them */
.ts__card[b-fwpu8375le],
.ts__scene[b-fwpu8375le] {
    filter: drop-shadow(calc(4px + var(--lift) * 6px) calc(4px + var(--lift) * 8px) calc(6px + var(--lift) * 4px) rgba(0, 0, 0, 0.25));
}

/* framed like in the frame: same centres, tilted the same way */
.ts__card[b-fwpu8375le] { --w: 264; --tilt: -1.5deg; }
.ts__card--king[b-fwpu8375le] { --x: 729.79; --y: 935.88; --r: -12.31deg; }
.ts__card--fighter[b-fwpu8375le] { --x: 990.82; --y: 882.91; --r: -10.3deg; }
.ts__card--bodyguard[b-fwpu8375le] { --x: 1264.25; --y: 846.55; --r: -5.48deg; }
.ts__note--1[b-fwpu8375le] { --x: 774; --y: 863; }

.ts__scene[b-fwpu8375le] { --w: 458; }
.ts__scene--stack[b-fwpu8375le] { --x: 161.76; --y: 1245.7; --r: 5.06deg; }
.ts__scene--room[b-fwpu8375le] { --x: 161.77; --y: 1355.72; --r: 7.21deg; }
.ts__note--2[b-fwpu8375le] { --x: 94; --y: 1378; }

/* ---- The team, the printer wanted and two more members, on the slope upside down ---- */
.ts-team__stage[b-fwpu8375le] {
    --stage-h: 1364;
}

.ts-team__crowd[b-fwpu8375le],
.ts-team__badges[b-fwpu8375le] {
    display: contents;
}

/* turned around the middle of the page, the shape lands at x = -196 as in the frame */
.ts-team__slope[b-fwpu8375le] {
    --x: -185;
    --y: 0;
    --r: 180deg;
    --slope-h: 1244;
    --shape: url('/images/studio-shape.svg');
}

/* in front of the slope, their feet behind the footer */
.ts-team__fighter[b-fwpu8375le] {
    --x: 384;
    --y: 667;
    --w: 711;
    aspect-ratio: 711 / 844;
    object-fit: cover;
    object-position: top;
}

.ts-team__glow[b-fwpu8375le] { --x: 675; --y: 763; }

.ts-team__necromancer[b-fwpu8375le] {
    --x: 593;
    --y: 509;
    --w: 1101;
    aspect-ratio: 1101 / 1053;
    object-fit: cover;
    object-position: bottom;
}

.ts-team__title[b-fwpu8375le] { --x: 92; --y: 139; --w: 800; color: var(--color-cream); }

/* the studio's badge (StudioBadge) and the team's own */
.ts-team__badges[b-fwpu8375le]  .ts-team__studio {
    --x: 152.39;
    --y: 314.58;
    --r: -4.93deg;
}

.ts-team__badges[b-fwpu8375le]  .ts-team__member {
    --x: 634.87;
    --y: 145.46;
    --r: 5.49deg;
    --badge-color: var(--color-coral);
}

/* the printer wanted, on the flyer pinned like the other papers */
.ts-team__flyer[b-fwpu8375le] { --x: 72.03; --y: 869.32; --w: 421; --r: 10.18deg; }

.ts-team__contact[b-fwpu8375le] {
    align-self: flex-start;
    margin-top: 4px;
}

/* ==========================================================================
   Tablets and phones
   ========================================================================== */
@media (max-width: 1099px) {
    /* the cast on a 400-unit frame, the game's name on the dark band below them */
    .ts__cast[b-fwpu8375le] {
        display: block;
        position: relative;
        isolation: isolate;
        max-width: 520px;
        margin-inline: auto;
        aspect-ratio: 400 / 480;
        container-type: inline-size;
        --u: calc(100cqi / 400);
    }

    .ts__king[b-fwpu8375le] { --x: 60; --y: 0; --w: 250; }
    .ts__bodyguard[b-fwpu8375le] { --x: 190; --y: 30; --w: 220; }
    .ts__queen[b-fwpu8375le] { --x: -50; --y: 40; --w: 240; }
    .ts__glow--1[b-fwpu8375le] { --x: 150; --y: 120; --w: 180; }
    .ts__glow--2[b-fwpu8375le] { --x: -20; --y: 140; --w: 180; }
    .ts__title[b-fwpu8375le] { --x: 150; --y: 280; --w: 230; z-index: 2; }

    /* the pitch, the cards and the scenes on the dark band */
    .ts__deck[b-fwpu8375le] {
        display: block;
        position: relative;
        isolation: isolate;
        padding: 32px 0 56px;
    }

    /* the dark bands run from edge to edge */
    .ts__cast[b-fwpu8375le]::before,
    .ts__deck[b-fwpu8375le]::before,
    .ts-team__badges[b-fwpu8375le]::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        translate: -50% 0;
        background: var(--grain-brown);
    }

    /* in front of the members, as the slope is on wide screens: it hides the bottom of their pictures */
    .ts__cast[b-fwpu8375le]::before {
        z-index: 1;
        clip-path: polygon(0 50%, 100% 38%, 100% 100%, 0 100%);
    }

    .ts__cards[b-fwpu8375le],
    .ts__scenes[b-fwpu8375le] {
        display: block;
        position: relative;
        max-width: 520px;
        margin-inline: auto;
        container-type: inline-size;
        --u: calc(100cqi / 400);
    }

    .ts__cards[b-fwpu8375le] { aspect-ratio: 400 / 330; margin-top: 32px; }
    .ts__card[b-fwpu8375le] { --w: 120; }
    .ts__card--king[b-fwpu8375le] { --x: 24; --y: 50; }
    .ts__card--fighter[b-fwpu8375le] { --x: 144; --y: 30; }
    .ts__card--bodyguard[b-fwpu8375le] { --x: 264; --y: 40; }
    .ts__note--1[b-fwpu8375le] { --x: 262; --y: 0; }

    .ts__scenes[b-fwpu8375le] { aspect-ratio: 400 / 380; margin-top: 16px; }
    .ts__scene[b-fwpu8375le] { --w: 330; }
    .ts__scene--stack[b-fwpu8375le] { --x: 40; --y: 30; }
    .ts__scene--room[b-fwpu8375le] { --x: 40; --y: 130; }
    .ts__note--2[b-fwpu8375le] { --x: 8; --y: 280; }

    /* the team, the flyer, then the two members at the bottom */
    .ts-team__stage[b-fwpu8375le] {
        display: flex;
        flex-direction: column;
    }

    .ts-team__crowd[b-fwpu8375le] {
        order: 1;
    }

    /* the team on the dark band, one badge under the other */
    .ts-team__badges[b-fwpu8375le] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
        position: relative;
        isolation: isolate;
        padding: 48px var(--gutter) 72px;
        container-type: inline-size;
        /* a badge as in the frame, or narrower to fit */
        --u: min(1px, 100cqi / 660);
    }

    .ts-team__title[b-fwpu8375le] {
        position: static;
        width: auto;
        align-self: stretch;
    }

    .ts-team__badges[b-fwpu8375le]  .ts-team__studio {
        position: relative;
        left: auto;
        top: auto;
        --r: -2deg;
    }

    .ts-team__badges[b-fwpu8375le]  .ts-team__member {
        position: relative;
        left: auto;
        top: auto;
        --r: 2deg;
    }

    .ts-team__flyer[b-fwpu8375le] {
        position: relative;
        left: auto;
        top: auto;
        width: min(400px, 100% - 2 * var(--gutter));
        margin: 56px auto 0;
        --r: 3deg;
    }

    /* the two members at the bottom, a collage again, running down behind the footer as on
       wide screens */
    .ts-team__crowd[b-fwpu8375le] {
        display: block;
        position: relative;
        width: 100%;
        max-width: 520px;
        margin: 24px auto 0;
        aspect-ratio: 400 / 300;
        container-type: inline-size;
        --u: calc(100cqi / 400);
    }

    .ts-team__fighter[b-fwpu8375le] { --x: 0; --y: 70; --w: 220; }
    .ts-team__glow[b-fwpu8375le] { --x: 140; --y: 110; --w: 200; }
    .ts-team__necromancer[b-fwpu8375le] { --x: 110; --y: 50; --w: 300; }
}
/* /Components/Shared/Poster.razor.rz.scp.css */
.poster[b-keyklulfud] {
    position: relative;
    height: 100%;
    rotate: var(--tilt, 0deg);
    /* follows the torn outline, tape included */
    filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.45));
    --focus-ring: var(--color-ink);
}

.poster__paper[b-keyklulfud] {
    position: relative;
    height: 100%;
    /* contents scale with the poster's width (cqi units) */
    container-type: inline-size;
    clip-path: var(--torn);
    color: var(--paper-ink, var(--color-ink));
    background-color: var(--paper, var(--color-cream));
    /* wheat-paste wrinkles over the paper grain */
    background-image:
        linear-gradient(168deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 32%, rgba(0, 0, 0, 0.07) 58%, rgba(255, 255, 255, 0.1) 78%, rgba(0, 0, 0, 0.05)),
        url('/images/bg-noise.png');
    background-size: auto, 355px 246px;
}

.poster__content[b-keyklulfud] {
    position: relative;
    height: 100%;
    padding: var(--poster-pad, clamp(26px, 7cqi, 44px));
}

.poster--yellow[b-keyklulfud] { --paper: var(--color-pumpkin); }
.poster--cream[b-keyklulfud] { --paper: var(--color-cream); }
.poster--tan[b-keyklulfud] { --paper: var(--color-tan); }
.poster--coral[b-keyklulfud] { --paper: var(--color-coral); }
.poster--blue[b-keyklulfud] { --paper: var(--color-blue); }

.poster--noir[b-keyklulfud] {
    --paper: var(--color-noir);
    --paper-ink: var(--color-cream);
    --focus-ring: var(--color-gold);
}

.poster--noir .poster__paper[b-keyklulfud] {
    background-image:
        linear-gradient(170deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.2) 75%),
        url('/images/dark-noise.svg');
    background-size: auto, 300px 300px;
}

/* double gold line, Art Deco style */
.poster__frame[b-keyklulfud] {
    position: absolute;
    inset: 18px;
    border: 2px solid var(--color-gold-line);
    pointer-events: none;
}

.poster__frame[b-keyklulfud]::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px solid rgba(201, 164, 92, 0.5);
}

.tape[b-keyklulfud] {
    position: absolute;
    width: 118px;
    height: 34px;
    background: rgba(245, 241, 230, 0.78);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.tape--top[b-keyklulfud] { left: 50%; top: -14px; translate: -50% 0; rotate: -3deg; }

/* corner tapes straddle the corner, clear of the text */
.tape--tl[b-keyklulfud] { left: -44px; top: -2px; rotate: -38deg; }
.tape--tr[b-keyklulfud] { right: -44px; top: -2px; rotate: 38deg; }
.tape--bl[b-keyklulfud] { left: -44px; bottom: -2px; rotate: 38deg; }
.tape--br[b-keyklulfud] { right: -44px; bottom: -2px; rotate: -38deg; }

@media (max-width: 600px) {
    .poster[b-keyklulfud] { rotate: calc(var(--tilt, 0deg) / 2); }
    .tape[b-keyklulfud] { width: 70px; height: 24px; }
    .tape--tl[b-keyklulfud], .tape--bl[b-keyklulfud] { left: -22px; }
    .tape--tr[b-keyklulfud], .tape--br[b-keyklulfud] { right: -22px; }
    .tape--tl[b-keyklulfud], .tape--tr[b-keyklulfud] { top: 4px; }
    .tape--bl[b-keyklulfud], .tape--br[b-keyklulfud] { bottom: 4px; }
}
/* /Components/Shared/StoreBadges.razor.rz.scp.css */
.badges[b-v00futqn03] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.badges img[b-v00futqn03] {
    width: auto;
    height: var(--badge-h, 46px);
}
/* /Components/Shared/TearOffFlyer.razor.rz.scp.css */
.flyer-wrap[b-du0p0s3wb9] {
    --poster-pad: 26px;
    scroll-margin-top: 24px;
}

.flyer[b-du0p0s3wb9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.flyer__title[b-du0p0s3wb9] {
    font-size: 32px;
}

.flyer__text[b-du0p0s3wb9] {
    font-size: 14px;
    line-height: 1.45;
}

.flyer__label[b-du0p0s3wb9] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.flyer__row[b-du0p0s3wb9] {
    display: flex;
    gap: 8px;
}

.flyer__row input[b-du0p0s3wb9] {
    flex: 1;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 2px dashed rgba(62, 58, 49, 0.55);
    background: rgba(255, 255, 255, 0.35);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 14px;
}

.flyer__row input[b-du0p0s3wb9]::placeholder {
    color: rgba(62, 58, 49, 0.85);
    opacity: 1;
}

.flyer__row button[b-du0p0s3wb9] {
    height: 42px;
    padding: 0 16px;
    border: 0;
    background: var(--color-ink);
    color: var(--color-pumpkin);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 14px;
    opacity: 0.55;
    cursor: not-allowed;
}

/* the tabs span the whole width of the paper, down to its bottom edge */
.flyer__tabs[b-du0p0s3wb9] {
    display: flex;
    height: 96px;
    margin: 16px calc(-1 * var(--poster-pad)) calc(-1 * var(--poster-pad));
    border-top: 2px dashed rgba(62, 58, 49, 0.5);
    font-size: 11px;
    font-weight: 700;
}

.flyer__tabs span[b-du0p0s3wb9] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    writing-mode: vertical-rl;
    border-left: 1px dashed rgba(62, 58, 49, 0.45);
}

.flyer__tabs span:first-child[b-du0p0s3wb9] {
    border-left: 0;
}

/* torn-off tabs (the 3rd and the 6th of 7) leave holes in the paper: whatever is behind shows
   through, the paper's shadow included */
.flyer-wrap[b-du0p0s3wb9]  .poster__paper {
    mask:
        linear-gradient(#000 0 0) 33.333% 100% / calc(100% / 7) 96px no-repeat,
        linear-gradient(#000 0 0) 83.333% 100% / calc(100% / 7) 96px no-repeat,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}

.flyer__tabs .is-torn[b-du0p0s3wb9] {
    color: transparent;
}
/* /Components/Shared/TrailerTv.razor.rz.scp.css */
/* the screen takes the trailer's shape */
.trailer-tv[b-09f86ldmvm]  .tv__screen {
    flex: none;
    aspect-ratio: 9 / 16;
    container-type: size;
}

.trailer__preview[b-09f86ldmvm] {
    position: absolute;
    left: 50%;
    top: 50%;
    /* YouTube wants its players at least 200 px wide */
    width: max(100cqw, 56.25cqh, 200px);
    aspect-ratio: 9 / 16;
    translate: -50% -50%;
    border: 0;
}

.trailer__open[b-09f86ldmvm] {
    position: absolute;
    inset: 0;
    cursor: pointer;
}

.trailer__controls[b-09f86ldmvm] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 32px 8px 14px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.trailer__controls:focus-within[b-09f86ldmvm] {
    opacity: 1;
    pointer-events: auto;
}

@media (hover: hover) {
    .trailer-tv:hover .trailer__controls[b-09f86ldmvm] {
        opacity: 1;
        pointer-events: auto;
    }
}

.trailer__controls button[b-09f86ldmvm] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-brown);
    color: #fff;
    cursor: pointer;
}

.trailer__controls button:hover[b-09f86ldmvm] {
    color: var(--color-pumpkin);
}

.trailer__controls [aria-pressed="true"] .when-off[b-09f86ldmvm],
.trailer__controls [aria-pressed="false"] .when-on[b-09f86ldmvm] {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .trailer__preview[b-09f86ldmvm],
    [data-trailer-toggle][b-09f86ldmvm] {
        display: none;
    }
}

/* the trailer, large, in its lightbox (collage.css) */
.trailer-dialog__player[b-09f86ldmvm] {
    display: block;
    width: min(88vw, 86dvh * 9 / 16);
    aspect-ratio: 9 / 16;
    border: 0;
    border-radius: 16px;
}
/* /Components/Shared/Tv.razor.rz.scp.css */
.tv[b-v028vqd5sl] {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 8px;
    border: 1px solid #000;
    border-radius: 24px;
    background: var(--color-brown);
    box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.25);
    overflow: clip;
}

/* bevel of the casing, over everything */
.tv[b-v028vqd5sl]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 2px 2px 1px rgba(255, 255, 255, 0.4), inset -2px -2px 1px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.tv__screen[b-v028vqd5sl] {
    position: relative;
    flex: 1;
    min-height: 0;
    border: 1px solid #000;
    border-radius: 16px;
    background: var(--color-brown);
    overflow: clip;
}

/* the glass darkens towards its edges */
.tv__screen[b-v028vqd5sl]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 16px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.tv__screen[b-v028vqd5sl]  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* screws and seams of the casing */
.tv__dot[b-v028vqd5sl] {
    position: absolute;
    width: 4px;
    height: 4px;
}

.tv__dot--1[b-v028vqd5sl] { left: 23px; top: 1px; }
.tv__dot--2[b-v028vqd5sl] { left: 29px; top: 1px; }
.tv__dot--3[b-v028vqd5sl] { right: 28px; bottom: 2px; }
.tv__dot--4[b-v028vqd5sl] { right: 22px; bottom: 2px; }

.tv__seam[b-v028vqd5sl] {
    position: absolute;
    width: 1px;
    height: 7px;
    background: #000;
}

.tv__seam--top[b-v028vqd5sl] { left: 35px; top: 0; }
.tv__seam--bottom[b-v028vqd5sl] { right: 34px; bottom: 0; }