@import 'Needle.Web.App.Client.xo7ihxjrqv.bundle.scp.css';
@import '_content/Blazor.Bootstrap/Blazor.Bootstrap.mnccjmrpdk.bundle.scp.css';

/* /Components/Account/Common/GoalsForm.razor.rz.scp.css */
.row-commands[b-xj5j57eak2] {
    max-width: 40rem;
}
/* /Components/Account/Common/InterestsForm.razor.rz.scp.css */
.technique-card[b-z0d6klilym] {
    overflow: hidden;
    min-width: 16rem;
    max-width: 16rem;
    padding: 0;
}

.technique-card .card-img-top[b-z0d6klilym] {
    height: 160px;
}

    .technique-card .card-img-top img[b-z0d6klilym] {
        height: 160px;
        width: 100%;
        object-fit: contain;
        aspect-ratio: 1;
    }

.row-commands[b-z0d6klilym] {
    max-width: 40rem;
}
/* /Components/Account/Common/ManageNavMenu.razor.rz.scp.css */
/* =============================================
   Layout & Structure
   ============================================= */

.sidebar[b-z424unnxwa] {
    background-image: linear-gradient(180deg, var(--nd-body-bg) 0%, rgb(220, 210, 190) 70%);
}

.top-row[b-z424unnxwa] {
    min-height: 3.5rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    background-color: var(--nd-primary);
    box-shadow: 0 3px 0 rgba(80,55,35,0.18), 0 1px 0 rgba(80,55,35,0.1);
}

.app-logo[b-z424unnxwa] {
    margin: auto 1rem auto 0;
    color: var(--nd-white);
    align-content: center;
}

    .app-logo:focus-visible[b-z424unnxwa] {
        outline: none;
        filter: drop-shadow(0 0 4px var(--nd-white));
    }

.app-logo img[b-z424unnxwa] {
    width: 48px;
    height: auto;
}

/* =============================================
   Navbar Toggler
   ============================================= */

.navbar-toggler[b-z424unnxwa] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--nd-white);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

    .navbar-toggler[aria-expanded="true"][b-z424unnxwa] {
        background-color: rgba(255, 255, 255, 0.5);
    }

/* =============================================
   Nav Scrollable
   ============================================= */

.nav-scrollable[b-z424unnxwa] {
    display: none;
}

.navbar-toggler[aria-expanded="true"] ~ .nav-scrollable[b-z424unnxwa] {
    display: block;
    height: calc(100svh - var(--needle-impersonation-banner-height, 0px));
    position: sticky;
    top: -2rem;
}

/* =============================================
   Nav Items — Base
   ============================================= */

.nav-item-divider[b-z424unnxwa] {
    color: var(--nd-text);
}

[b-z424unnxwa] .bi {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

[b-z424unnxwa] .nav-item {
    font-size: 0.9rem;
}

/*  Applied by the script to the sections that do not fit, and carried in the markup by the "more" entry so that it
    stays out of the way until the script has measured that it is needed. Hidden rather than removed: the server
    renders the menu whole, and a page without scripts has to keep every section reachable. */
[b-z424unnxwa] .nav-item-hidden {
    display: none;
}

    /*  Two selectors for one space. `:first-of-type` is what applies without a script, and on the first page; the
        class is what the script moves onto whichever entry is actually first on screen once the menu pages, since
        `:first-of-type` would otherwise leave the space on an entry it has hidden. */
    [b-z424unnxwa] .nav-item:first-of-type,
    [b-z424unnxwa] .nav-item-first {
        padding-top: 1rem;
    }

    [b-z424unnxwa] .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    [b-z424unnxwa] .nav-item .nav-link {
        color: var(--nd-text);
        background: none;
        border: none;
        height: 3rem;
        width: 100%;
        display: flex;
        align-items: center;
    }

        [b-z424unnxwa] .nav-item .nav-link img {
            width: 20px;
        }

/*  No stroke here: below the desktop breakpoint a label sits on one line beside its icon, and the underline was
    never shown in that layout. */
[b-z424unnxwa] .nav-link-text {
    --nav-underline: none;
    padding-bottom: 0;
}

/* =============================================
   Nav Items — States (active / hover)
   ============================================= */
[b-z424unnxwa] .nav-item a.active {
    background-color: var(--nd-primary);
    color: var(--nd-white);
}

    [b-z424unnxwa] .nav-item a.active:hover {
        background-color: var(--nd-secondary);
        color: var(--nd-white);
    }

[b-z424unnxwa] .nav-item .nav-link:hover {
    background-color: var(--nd-secondary);
    color: var(--nd-white);
}

/* =============================================
   Mobile (max-width: 640.98px)
   ============================================= */

@media (max-width: 640.98px) {
    .sidebar:has(.navbar-toggler[aria-expanded="true"])[b-z424unnxwa] {
        position: fixed;
        z-index: 10;
        width: 100%;
    }
}

/* =============================================
   Desktop (min-width: 641px)
   ============================================= */

@media (min-width: 641px) {

    /* --- Layout --- */

    .sidebar[b-z424unnxwa] {
        width: 90px;
        background-color: transparent;
        background-image: none;
    }

    .app-logo[b-z424unnxwa] {
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .app-logo-container[b-z424unnxwa] {
        z-index: 1;
    }

    .navbar-toggler[b-z424unnxwa] {
        display: none;
    }

    .nav-scrollable[b-z424unnxwa] {
        display: block;
        height: calc(100svh - 3.5rem - var(--needle-impersonation-banner-height, 0px));
        overflow: unset;
        position: relative;
    }

    [b-z424unnxwa] .bi {
        font-size: 1.5rem;
    }

    /* --- Nav Items --- */

    [b-z424unnxwa] .nav-item {
        padding-bottom: 0.5rem;
    }

        [b-z424unnxwa] .nav-item:has(.nav-link.active) {
            z-index: 300;
            margin-right: -5px;
        }

        [b-z424unnxwa] .nav-item span {
            font-family: var(--nd-font-button);
            font-size: 0.8rem;
            letter-spacing: 0.1rem;
        }

        [b-z424unnxwa] .nav-item .nav-link {
            border-radius: 4px;
            position: relative;
            /*  A block, not a flex column: a flex item is blockified whatever it declares, and the label must be a
                real inline box for its underline to be painted once per line (see nav.css). The icon is centred by
                margin rather than by align-items. */
            display: block;
            text-align: center;
            /*  Wider than Bootstrap's 1rem, and deliberately so. As a flex item the label's automatic minimum size
                was its longest word, so its box grew past the 48px the card left it and spilled evenly on either
                side — about 70px of usable room. An inline box cannot overflow that way: its lines are capped by
                this block. So the room the label always had is now declared rather than obtained by accident. */
            --nav-card-padding-x: 4px;
            padding-inline: var(--nav-card-padding-x);
            /*  The strut of this block sets the minimum height of every line inside it, so it has to match the label
                rather than the 0.9rem this box inherits — otherwise a wrapped label gets a line taller than it
                needs. Matched by font size rather than by zeroing the line height, which would collapse the line
                box of every inline in the card, the icon glyph included. */
            font-size: 0.8rem;
            height: auto;
            margin: 0 0 0 10px;
            width: 82px;
            border-end-end-radius: 0;
            border-start-end-radius: 0;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
            border-bottom: 2px solid rgba(0,0,0,0.1);
            border-right: 2px solid rgba(0,0,0,0.08);
            transform: rotate(-1deg);
        }

            [b-z424unnxwa] .nav-item .nav-link::before {
                content: '';
                position: absolute;
                inset: 0;
                z-index: -1;
                border-radius: 4px;
                box-shadow: -1px 1px 0 rgba(0,0,0,0.06), -3px 3px 0 rgba(0,0,0,0.02);
            }

            [b-z424unnxwa] .nav-item .nav-link img {
                width: auto;
            }

    [b-z424unnxwa] .nav-link .nav-link-icon {
        display: block;
        margin-inline: auto;
        width: 40px;
        aspect-ratio: 1;
    }

    /*  `initial` makes the custom property guaranteed-invalid, so nav.css's var() falls back to the stroke — the
        artwork stays declared in one place. */
    /*  No font-size: `.nav-item span` above already sets 0.8rem and wins on specificity, so the 0.625rem that used to
        sit here never applied to anything — removed rather than left to suggest a size the labels never had.

        Hyphenation because a card leaves about 70px and "Préférences" or "l'application" ask for more: an unbreakable
        word overflows to the right whatever the alignment says, a line box wider than its container being placed at
        its start. The document declares its language, so the breaks are real hyphenations; break-word catches what
        hyphenation cannot split. Each resulting line then gets its own stroke, which is the point of all this. */
    [b-z424unnxwa] .nav-link-text {
        text-align: center;
        overflow-wrap: break-word;
        --nav-underline: initial;
        padding-bottom: 3px;
    }

    /* --- Nav Items — Per-section colors --- */

    [b-z424unnxwa] .nav-item-profile .nav-link {
        --nav-item-color: #c8d4b0;
        background-color: var(--nav-item-color) !important;
    }

    [b-z424unnxwa] .nav-item-preferences .nav-link {
        --nav-item-color: #d4c4a0;
        background-color: var(--nav-item-color) !important;
    }

    [b-z424unnxwa] .nav-item-plan .nav-link {
        --nav-item-color: #b8cccc;
        background-color: var(--nav-item-color) !important;
    }

    [b-z424unnxwa] .nav-item-purchases .nav-link {
        --nav-item-color: #d4b8c0;
        background-color: var(--nav-item-color) !important;
    }

    [b-z424unnxwa] .nav-item-selleraccount .nav-link {
        --nav-item-color: #b4a7c4;
        background-color: var(--nav-item-color) !important;
    }

    [b-z424unnxwa] .nav-item-email .nav-link {
        --nav-item-color: #d4b0a8;
        background-color: var(--nav-item-color) !important;
    }

    [b-z424unnxwa] .nav-item-security .nav-link {
        --nav-item-color: #c4b8a0;
        background-color: var(--nav-item-color) !important;
    }

    /* Eighth entry, where the application menu only has seven: the one colour of this menu that has no counterpart
       to line up with. A muted blue, the only family the palette was missing. */
    [b-z424unnxwa] .nav-item-stats .nav-link {
        --nav-item-color: #a8bed4;
        background-color: var(--nav-item-color) !important;
    }

    [b-z424unnxwa] .nav-item-back .nav-link {
        --nav-item-color: #F8F4EE;
        background-color: var(--nav-item-color) !important;
    }

    /*  Neutral, like the other entries that are not a section of their own — it stands for whichever sections are
        currently off the page, so borrowing any one of their colours would be a lie. */
    [b-z424unnxwa] .nav-item-next .nav-link {
        --nav-item-color: #F8F4EE;
        background-color: var(--nav-item-color) !important;
    }

    /* --- Nav Items — Active state --- */

    [b-z424unnxwa] .nav-item .nav-link.active {
        width: 90px;
        border-end-end-radius: 4px;
        border-start-end-radius: 4px;
        padding-right: calc(var(--nav-card-padding-x) + 10px);
    }

        [b-z424unnxwa] .nav-item .nav-link.active::before {
            clip-path: inset(0 15px -10px -10px);
        }

    [b-z424unnxwa] .nav-item a.active {
        background-color: transparent;
        color: var(--nd-text);
    }

        [b-z424unnxwa] .nav-item a.active:hover, [b-z424unnxwa] .nav-item .nav-link:hover {
            background-color: transparent;
            color: var(--nd-text);
        }

    /* --- Misc --- */

    [b-z424unnxwa] .autocomplete {
        display: none;
    }

    [b-z424unnxwa] .nav-login {
        max-width: 250px;
    }

    .justify-content-md-center[b-z424unnxwa] {
        justify-content: center !important;
    }

    .nav-link-text[b-z424unnxwa] {
        margin-left: 0 !important;
    }

    .nav-item.flex-grow-1.d-none.d-md-block[b-z424unnxwa] {
        display: block !important;
    }

    .scotch[b-z424unnxwa] {
        height: 30px;
        width: 35px;
        position: absolute;
        right: -30px;
        translate: 0 -55px;
        transform: rotate(-2deg);
        background: rgba(240, 235, 220, 0.55);
        border-left: 1px solid rgba(220, 210, 190, 0.4);
        border-right: 1px solid rgba(220, 210, 190, 0.4);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(180, 170, 150, 0.2);
    }
}

/* --- Nav Items — Focus --- */

/* Darkened: the tints are too pale to show against the menu's own background. */
[b-z424unnxwa] .nav-item .nav-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--nav-item-color, var(--nd-primary)) 75%, black);
    outline-offset: 2px;
    /* Bootstrap draws its own ring here, as a shadow, in a blue written literally. */
    box-shadow: none;
}
/* /Components/Account/Common/ManageTopBar.razor.rz.scp.css */
.app-logo[b-7cov872lbw] {
    height: 32px;
    width: auto;
}

    .app-logo:focus-visible[b-7cov872lbw] {
        outline: none;
        filter: drop-shadow(0 0 4px var(--nd-white));
    }

#manage-account-dropdown .nav-link:focus-visible[b-7cov872lbw] {
    outline: none;
    filter: drop-shadow(0 0 4px var(--nd-white));
    box-shadow: none;
}
.userbadge-container[b-7cov872lbw] {
    display: flex;
    width: 100%;
}

    .userbadge-container:focus-visible[b-7cov872lbw] {
        outline: none;
        filter: drop-shadow(0 0 4px var(--nd-white));
    }

.userbadge-picture-container[b-7cov872lbw] {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-width: 3px;
    border-radius: 15px;
    height: 30px;
    width: 30px;
    margin-left: 0.25rem;
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    background-color: white;
}

[b-7cov872lbw] .userbadge-picture-container span {
    margin: -2.4px;
}

.userbadge-picture-container img[b-7cov872lbw] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.userbadge-username[b-7cov872lbw] {
    flex: 1;
    margin: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: pre;
    align-content: center;
    text-align: right;
    margin-right: 0.25rem;
    font-size: 0.9rem;
    max-width: 200px;
}
/* /Components/Account/Common/UserStatsBarChart.razor.rz.scp.css */
.stats-chart[b-5i5yucui59] {
    margin-bottom: 0;
}

/*  The bars sit on a common baseline and share the width evenly, so a year always fills the card whatever the
    figures are. The height is fixed on purpose: a plot area that grew with its values would compare nothing. */
.stats-chart-plot[b-5i5yucui59] {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    height: 7rem;
    padding-top: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.stats-chart-column[b-5i5yucui59] {
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    height: 100%;
    min-width: 0;
}

.stats-chart-bar[b-5i5yucui59] {
    width: 100%;
    border-radius: 2px 2px 0 0;
    background-color: var(--nd-primary, #6c757d);
}

/*  The same gap and the same equal-width columns as the plot above, which is what keeps a tick under its bar. */
.stats-chart-axis[b-5i5yucui59] {
    display: flex;
    gap: 0.25rem;
    padding-top: 0.25rem;
}

.stats-chart-tick[b-5i5yucui59] {
    overflow: hidden;
    flex: 1 1 0;
    min-width: 0;
    color: var(--bs-secondary-color);
    font-size: 0.7rem;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}
/* /Components/Account/Pages/Manage/Index.razor.rz.scp.css */
.userbadge-picture-container[b-wsi6qhttjh] {
    width: 130px;
    height: 130px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-width: 3px;
    border-radius: 65px;
    overflow: hidden;
}

    .userbadge-picture-container img[b-wsi6qhttjh] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

@media(min-width: 576px) {
    .picture-buttons-container[b-wsi6qhttjh] {
        max-width: 250px;
    }
}
/* /Components/Account/Pages/Manage/Plan.razor.rz.scp.css */
.card[b-c5ok7n1dz7] {
    overflow: hidden;
    min-width: 18rem;
    max-width: 18rem;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

    .card.active[b-c5ok7n1dz7] {
        outline: 2px solid var(--nd-primary);
        outline-offset: 2px;
    }

.card-img-top[b-c5ok7n1dz7] {
    height: 200px;
}

    .card-img-top img[b-c5ok7n1dz7] {
        height: 200px;
        width: 100%;
        object-fit: cover;
    }

@media (min-width: 768px) {
    .card[b-c5ok7n1dz7] {
        margin-left: initial;
        margin-right: initial;
    }
}
/* /Components/Account/Pages/Onboarding/Outro.razor.rz.scp.css */
.onboarding-outro-container[b-inkhxdbd5n] {
    min-height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.outro-overlay[b-inkhxdbd5n] {
    /* All messages share the same grid cell so they overlap instead of stacking in flow — the container
       sizes to the tallest one, and every message centers within it regardless of its own length. */
    display: grid;
    text-align: center;
}

.outro-message[b-inkhxdbd5n] {
    grid-area: 1 / 1;
    align-self: center;
    justify-self: center;
    opacity: 0;
    margin: 0;
    font-size: 1.5rem;
    font-family: var(--nd-font-button);
    /* animation-delay is set inline per message (Outro.razor) so messages fade in/out one after another;
       the resulting total is exposed to Outro.razor.js via #outro-redirect's data-total-duration-ms. */
    animation: outro-fade-in-b-inkhxdbd5n .6s ease forwards, outro-fade-out-b-inkhxdbd5n .6s ease forwards;
}

@keyframes outro-fade-in-b-inkhxdbd5n {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes outro-fade-out-b-inkhxdbd5n {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Motion-sensitive users still get the messages and the redirect, just without the animation or the
   overlap — stacked in flow instead, so all 5 remain readable at once rather than piling on top of each other. */
@media (prefers-reduced-motion: reduce) {
    .outro-overlay[b-inkhxdbd5n] {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .outro-message[b-inkhxdbd5n] {
        opacity: 1;
        animation: none;
    }
}
/* /Components/Account/Pages/Onboarding/Picture.razor.rz.scp.css */
.userbadge-picture-container[b-1pld2io6gv] {
    width: 130px;
    height: 130px;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-width: 3px;
    border-radius: 65px;
    overflow: hidden;
}

    .userbadge-picture-container img[b-1pld2io6gv] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
/* /Components/Account/Pages/Onboarding/Plan.razor.rz.scp.css */
/*  Only what belongs to this page: the sizing of a plan card is shared with the landing page and lives in
    app/components/plan-card.css. */
.plan-card.active[b-sf9pktgpqm] {
    outline: 2px solid var(--nd-primary);
    outline-offset: 2px;
}

.plan-recommended-badge[b-sf9pktgpqm] {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    z-index: 1;
}

@media (min-width: 768px) {
    [b-sf9pktgpqm] .plan-btn {
        width: 18rem;
    }
}
/* /Components/Account/Pages/Onboarding/Username.razor.rz.scp.css */
.onboarding-username-container[b-hag6dyguht] {
    position: relative;
}

.intro-overlay[b-hag6dyguht] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
}

.intro-lines[b-hag6dyguht] {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: onboarding-intro-fade-out-b-hag6dyguht .6s ease forwards;
    animation-delay: 6.6s;
}

.intro-line[b-hag6dyguht] {
    opacity: 0;
    margin: 0;
    animation: onboarding-intro-fade-in-b-hag6dyguht .6s ease forwards;
}

.intro-line-1[b-hag6dyguht] {
    font-size: 2rem;
    font-family: var(--nd-font-button);
    animation-delay: 0s;
}

.intro-line-2[b-hag6dyguht] {
    font-size: 1.5rem;
    font-family: var(--nd-font-button);
    animation-delay: 2s;
}

.intro-line-3[b-hag6dyguht] {
    font-size: 1.5rem;
    font-family: var(--nd-font-button);
    animation-delay: 4s;
}

.intro-message2[b-hag6dyguht] {
    position: absolute;
    opacity: 0;
    max-width: 22rem;
    margin: 0;
    animation: onboarding-intro-fade-in-b-hag6dyguht .6s ease forwards, onboarding-intro-fade-out-b-hag6dyguht .6s ease forwards;
    animation-delay: 7.2s, 12.3s;
    font-size: 1.5rem;
    font-family: var(--nd-font-button);
}

.onboarding-form-content[b-hag6dyguht] {
    opacity: 0;
    animation: onboarding-intro-fade-in-b-hag6dyguht .6s ease forwards;
    animation-delay: 12.9s;
}

@keyframes onboarding-intro-fade-in-b-hag6dyguht {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes onboarding-intro-fade-out-b-hag6dyguht {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

/* Skip straight to the form for users who'd rather not sit through the animation. */
@media (prefers-reduced-motion: reduce) {
    .intro-overlay[b-hag6dyguht] {
        display: none;
    }

    .onboarding-form-content[b-hag6dyguht] {
        opacity: 1;
        animation: none;
    }
}
/* /Components/PublicPages/Discover/AppPresentation.razor.rz.scp.css */
.app-presentation[b-lpnzrs9pm9] {
    /* Full-width on purpose: no max-width / auto-centering, so the story rows could be pushed far to the left
       and right and read as loosely staggered rather than as a tidy centred column. The blocks that replaced
       them bound and centre themselves instead, and the flowers use the room this leaves at the edges. */
    padding: 2rem 1rem 1rem;
    /*  Deliberately *not* clipped: the motifs hung from the wrapper and the blocks inside are meant to spill past
        this column into the page margin the xl offset leaves free, the way a doodle runs into the margin of a
        notebook. Nothing overflows the document as a result — html and body are overflow: hidden, and the layout's
        own .main-content is overflow-x: hidden, so the spill is cut at the content edge with no horizontal
        scrollbar anywhere. */
    position: relative;
    /*  Its own stacking context, so the z-index: -1 below means "behind this section's text" and not "behind the
        page". Without it the flowers would be painted just above the root's background and therefore under
        .bb-scrollbar, an ancestor that carries an opaque one. */
    isolation: isolate;
}

/*  The section's title and the aside under it. The font and size are the h1's, taken deliberately: the element is an
    h2 for the reason given in the markup, and borrowing the typography is what lets it look like the page's main
    heading without claiming to be it. */
.presentation-title[b-lpnzrs9pm9] {
    margin-bottom: 0.25rem;
    font-family: var(--nd-font-title);
    font-size: 2.5rem;
}

.presentation-title-note[b-lpnzrs9pm9] {
    margin-bottom: 1.5rem;
}

/* =============================================
   Blocks — a set, not a chapter
   ============================================= */

/*  Centred and bounded, where the section itself is full-width: the blocks are sets of equals, and a set reads as a
    row rather than as a story told one idea at a time. The room this leaves at the edges is what the painted motifs
    below use. */
.presentation-block[b-lpnzrs9pm9] {
    max-width: 60rem;
    margin: 0 auto;
    padding-block: 1rem 3rem;
    text-align: center;
}

/*  Each carries a painted motif of its own, hung beside its heading rather than at a corner of the whole section.
    Positioned, so those pseudo-elements have their own block to hang from and not the section — without this they
    would both land at the top left of the whole thing. No stacking context of their own, because the section
    already opened the one the negative z-index answers to. */
.presentation-block-flower[b-lpnzrs9pm9],
.presentation-block-butterfly[b-lpnzrs9pm9] {
    position: relative;
}

.presentation-block h3[b-lpnzrs9pm9] {
    margin-bottom: 0.75rem;
    text-wrap: balance;
}

.presentation-block-intro[b-lpnzrs9pm9] {
    max-width: 44rem;
    margin: 0 auto 2.5rem;
    font-size: 1.05rem;
    line-height: 1.6;
}

    /*  The margin above exists to separate the paragraph from what follows it. A block that is only a heading and a
        paragraph has nothing to separate from, and would otherwise end on empty space. */
    .presentation-block-intro:last-child[b-lpnzrs9pm9] {
        margin-bottom: 0;
    }

/* =============================================
   The tools — three illustrations taped to the page
   ============================================= */

/*  A list because it is one: three tools, no order implied. The bullets go, the semantics stay.

    On a narrow screen it is a row that scrolls sideways rather than three cards stacked into a tall column, which is
    what the pattern showcase and the plan cards further up the page already do — a visitor who has met one of those
    rows knows to push this one.

    Padded top and bottom rather than not: `overflow-x: auto` forces the used value of overflow-y to auto as well, so
    the tape hanging 0.8rem over each frame's top edge would be clipped — or worse, would raise a vertical scrollbar
    beside a horizontal one. Both neighbours pay the same toll, with pt-2 pb-2 and pt-1 pb-1. */
.presentation-tools[b-lpnzrs9pm9] {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 1.25rem;
    margin: 0;
    padding: 1rem 0;
    list-style: none;
}

.presentation-tool[b-lpnzrs9pm9] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    /*  A fixed basis, so the row overflows instead of squeezing three cards into the width of one. The same 15rem the
        grid below uses as its floor, which is what stops the two states disagreeing about how narrow a tool card may
        get. Ignored once the container is a grid. */
    flex: 0 0 15rem;
}

/*  A sheet of photographic paper, taped to the page: used by the three tool illustrations and by the larger capture
    frame further down, which differ only in their proportion and in where the tape sits. Hence no border and no
    background on whatever holds it — the framed illustration is the object, and any caption belongs to the page
    rather than to a box. Nothing is clipped: the tape has to hang over the edge to read as tape. */
.presentation-frame[b-lpnzrs9pm9] {
    position: relative;
    padding: 0.375rem;
    background-color: var(--nd-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
}

/*  Square, because that is what the tool illustrations are: 2048 x 2048, drawn to be shown at aspect-ratio 1. */
.presentation-tool-illustration[b-lpnzrs9pm9] {
    aspect-ratio: 1;
}

    /*  Placed by hand, or looking like it: each of the three sits at its own small angle. */
    .presentation-tool:nth-child(1) .presentation-tool-illustration[b-lpnzrs9pm9] {
        transform: rotate(-1.5deg);
    }

    .presentation-tool:nth-child(2) .presentation-tool-illustration[b-lpnzrs9pm9] {
        transform: rotate(0.75deg);
    }

    .presentation-tool:nth-child(3) .presentation-tool-illustration[b-lpnzrs9pm9] {
        transform: rotate(-0.9deg);
    }

    /*  The empty slot says an illustration goes here rather than looking broken. It withdraws on its own the moment
        one is dropped in, so adding the image is a one-line change in the markup and nothing here. */
    .presentation-frame[b-lpnzrs9pm9]::after {
        content: "";
        position: absolute;
        inset: 0.375rem;
        border: 1px dashed rgba(80, 55, 35, 0.22);
        pointer-events: none;
    }

    .presentation-frame:has(img)[b-lpnzrs9pm9]::after {
        content: none;
    }

    .presentation-frame img[b-lpnzrs9pm9] {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/*  A strip of tape, appearance only — where it sits is the business of the classes below it. Same look as the one in
    the navigation menus (see the .scotch rule in NavMenu.razor.css and in ManageNavMenu.razor.css), written out a
    third time rather than shared, because CSS isolation scopes those two to their own components and there is no
    global rule to reuse. Worth promoting to a shared component stylesheet if a fourth use appears; not worth
    touching two menus for this one. */
.presentation-tape[b-lpnzrs9pm9] {
    position: absolute;
    z-index: 1;
    width: 5.5rem;
    height: 1.6rem;
    background: rgba(240, 235, 220, 0.55);
    border-left: 1px solid rgba(220, 210, 190, 0.4);
    border-right: 1px solid rgba(220, 210, 190, 0.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(180, 170, 150, 0.2);
}

/*  One strip, straddling the middle of the top edge. Straddling is the whole trick: tape that stops at the edge
    reads as a painted rectangle. */
.presentation-tool-tape[b-lpnzrs9pm9] {
    top: -0.8rem;
    left: 50%;
    translate: -50% 0;
    transform: rotate(-2.5deg);
}

    .presentation-tool:nth-child(2) .presentation-tool-tape[b-lpnzrs9pm9] {
        transform: rotate(1.5deg);
    }

.presentation-tool h4[b-lpnzrs9pm9] {
    margin: 0;
    font-family: var(--nd-font-subtitle);
    font-size: 1.25rem;
    color: var(--nd-text);
}

.presentation-tool p[b-lpnzrs9pm9] {
    margin: 0;
    line-height: 1.55;
}

/*  Wide enough for the three to sit side by side, so the row becomes a grid and stops scrolling: the padding and the
    overflow go with it. auto-fit rather than `repeat(3, …)` — there are exactly three tools today, but a fourth would
    otherwise be stranded on a line of its own, and the fix should not have to be remembered. */
@media (min-width: 768px) {
    .presentation-tools[b-lpnzrs9pm9] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
        gap: 2.25rem;
        overflow-x: visible;
        padding: 0;
    }
}

/* =============================================
   A ticked list — the claim is that it is already done
   ============================================= */

/*  One column, not a grid: a checklist that wraps into columns stops reading as one list somebody wrote. Bounded
    and centred, and left-aligned against the block's centred heading, because a ragged-left list of ticks is not
    a list. */
.presentation-checklist[b-lpnzrs9pm9] {
    max-width: 34rem;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: left;
}

/*  Two rows and two columns per item: the tick occupies the first column across both rows, so the body text lines
    up under its own title rather than under the tick. Stated explicitly rather than left to auto-placement — the
    span is what makes the difference and it is worth reading in the rule. */
.presentation-check[b-lpnzrs9pm9] {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.9rem;
    row-gap: 0.15rem;
}

    .presentation-check + .presentation-check[b-lpnzrs9pm9] {
        margin-top: 1.35rem;
    }

/*  Box and tick drawn in one inline SVG, in the same ink as the hand-drawn stroke under the navigation items
    (see nav.css) — hence the colour written out here rather than taken from --nd-text: a data URI cannot read a
    custom property. The tick deliberately overshoots the box, which is what a hand-drawn one does.

    A background rather than markup or a Bootstrap icon: five copies of an <svg> would be five copies of a
    decoration, and the icon font's tick is geometric, which is the opposite of the point. */
.presentation-check[b-lpnzrs9pm9]::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 1.7rem;
    height: 1.7rem;
    margin-top: 0.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='%233D2B1F' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.6 6.4 Q12 5.3 20.6 6 Q21.4 13.4 20.8 21.6 Q12.4 22.7 4.9 21.9 Q3.8 14 4.6 6.4' stroke-width='1.5'/%3E%3Cpath d='M7.4 14.6 Q10.6 19 12.6 19.4 Q15.4 11 23.8 3.4' stroke-width='2.2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/*  Each tick sits a little differently, the way five of them ticked by hand would. Small angles on purpose: past
    a few degrees a square box reads as broken rather than as drawn. */
.presentation-check:nth-child(odd)[b-lpnzrs9pm9]::before {
    transform: rotate(-3deg);
}

.presentation-check:nth-child(even)[b-lpnzrs9pm9]::before {
    transform: rotate(2.5deg);
}

.presentation-check h4[b-lpnzrs9pm9] {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-family: var(--nd-font-subtitle);
    font-size: 1.25rem;
    color: var(--nd-text);
}

.presentation-check p[b-lpnzrs9pm9] {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    line-height: 1.55;
}

/*  The capture frame: one large sheet waiting for a screenshot of the application, in the 4:3 a screen capture comes
    out at. Bounded to the width of the paragraph above it so the two read as one piece, which puts it around 700 by
    530 at its widest. No top margin — that paragraph already carries the gap. */
.presentation-capture[b-lpnzrs9pm9] {
    aspect-ratio: 4 / 3;
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
}

/*  Taped at both top corners rather than once in the middle, which is what the larger frames get: at their size a
    single strip in the centre does not look like it could hold the sheet.

    Each strip is centred *on* its corner, which is what the offsets do: half its width to the side and half its
    height up puts its centre at the corner, and rotating about that centre keeps it there. The angles cross the
    corner's own diagonal, and neither is a round 45 degrees, because tape stuck by hand never is. */
.presentation-tape-start[b-lpnzrs9pm9] {
    top: -0.8rem;
    left: -2.75rem;
    transform: rotate(-42deg);
}

.presentation-tape-end[b-lpnzrs9pm9] {
    top: -0.8rem;
    right: -2.75rem;
    transform: rotate(47deg);
}

/*  Two panels side by side under a block's paragraph: a painting and a taped frame. Bounded wider than the paragraph
    above them, because at the paragraph's own 44rem each panel would come out around 20rem and a screen capture is
    unreadable at that size.

    Centred on each other rather than top-aligned: the frame below is given the painting's exact proportions, so the
    two come out the same height and the alignment never shows — but it is the safety net if either file changes. */
.presentation-pair[b-lpnzrs9pm9] {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 2.25rem;
    max-width: 54rem;
    margin: 0 auto;
}

.presentation-pair-painting[b-lpnzrs9pm9] {
    display: block;
    width: 100%;
    height: auto;
}

/*  The painting's own ratio, 1856 x 2304, rather than a round 4:5 — the file is 0.806 and not 0.8, and writing the
    figures down is what keeps the two columns exactly level.

    Bounded and centred as well, which only matters once the painting is gone: alone in a single full-width column an
    unbounded 4:5 frame came out 740 by 919, a placeholder taller than the paragraph it belongs to. The bound never
    binds in the two-column layout, where a column is around 26rem anyway. */
.presentation-pair-capture[b-lpnzrs9pm9] {
    aspect-ratio: 1856 / 2304;
    /*  width and justify-self together, and not `margin-inline: auto`: auto margins cancel a grid item's default
        stretch, which left the frame at its content width — an empty box, so 12 by 15 pixels. */
    width: 100%;
    max-width: 26rem;
    justify-self: center;
}

/*  Two columns only where the painting is shown, and that is from xl up. Below it the painting goes, like the flower
    and the butterfly, and the grid falls back to one column with it: a two-column grid holding one empty cell reads
    worse than a single column, and the capture is the half that still earns its space on a narrow screen. */
@media (min-width: 1200px) {
    .presentation-pair[b-lpnzrs9pm9] {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }
}

@media (max-width: 1199.98px) {
    .presentation-pair-painting[b-lpnzrs9pm9] {
        display: none;
    }
}

/*  VARIANT UNDER COMPARISON — one strip top centre and one bottom centre, on the knowledge block's frame only.
    Deleting this block puts that frame back on the two top corners the shared classes give it, which the tracking
    block's frame keeps either way, so the two arrangements can be looked at side by side on the same page.

    Each strip is centred on its edge rather than on a corner, so the offsets are the tool frames' and not the corner
    ones: half the strip's height past the edge, and translate pulling it back by half its own width. The `auto` resets
    matter — the shared rules set top and left/right, and leaving those in place would pin each strip to a corner
    again. Neither angle is square, for the same reason as before. */
.presentation-pair-capture .presentation-tape-start[b-lpnzrs9pm9] {
    top: -0.8rem;
    right: auto;
    left: 50%;
    translate: -50% 0;
    transform: rotate(-2.5deg);
}

.presentation-pair-capture .presentation-tape-end[b-lpnzrs9pm9] {
    top: auto;
    bottom: -0.8rem;
    right: auto;
    left: 50%;
    translate: -50% 0;
    transform: rotate(1.5deg);
}

/*  An illustration closing a block, under its paragraph. Bounded to the width of that paragraph rather than left to
    fill the column, so the two read as one piece; the file is twice as wide as it is tall, which puts it at about
    350px deep here. No top margin of its own — the paragraph above already carries the gap, and a second one would
    double it. No border, no shadow, no radius: the file's washes fade out into transparency on every side, and any
    frame would cut straight through them. */
.presentation-block-illustration[b-lpnzrs9pm9] {
    display: block;
    width: 100%;
    max-width: 44rem;
    height: auto;
    margin: 0 auto;
}

/* =============================================
   Painted motifs — the section as a sheet of paper
   ============================================= */

/*  Watercolour drawings laid on the page: one flower and one butterfly.

    Backgrounds on pseudo-elements rather than <img> elements, because that is what they are — decoration
    with nothing to say. No alt text to get wrong, no element for a screen reader to announce, and removing
    one means deleting its rule.

    Each file carries transparent margins of its own, so --motif-frame is always the width of the painted
    *box* and never of the drawing inside it. Every offset below is therefore derived from that file's own
    proportions rather than picked by eye, and each rule states them. Cropping the files to their drawings
    would make all of this direct, and is worth doing if a motif gets reused much further.
*/
.presentation-block-flower[b-lpnzrs9pm9]::before,
.presentation-block-butterfly[b-lpnzrs9pm9]::before {
    content: "";
    position: absolute;
    /*  Behind the text: a positioned pseudo-element would otherwise paint over content that comes later in
        the document. The section sets no background of its own, so this stays above the page's. */
    z-index: -1;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
}

.presentation-block-flower[b-lpnzrs9pm9]::before {
    /*  In its 2816 x 1536 frame the drawing occupies horizontally 32% to 66% and vertically 5% to 96% — barely a
        third of the width, hence a box far wider than the flower it shows and the large negative offset that pulls
        the empty part off the edge.

        Root-relative URL on purpose: scoped CSS is bundled into Needle.Web.App.styles.css at the web root and the
        bundler does not rewrite url(), so a path relative to *this* file would resolve against the wrong place. The
        application is served from the root (App.razor sets <base href="/">), so this holds. */
    aspect-ratio: 2816 / 1536;
    background-image: url("/images/discover-flower.webp");
    /*  Sized to the narrowest margin it will ever have: at the xl breakpoint the section's offset leaves 185px
        beside it (the layout's sidebar is a fixed 90px rail with no expander, so that figure is stable), and this
        frame puts the drawing at about 162px. Enlarging it is what would push it under the content edge. */
    --motif-frame: 40rem;
    top: -1rem;
    right: -25.25rem;
    width: var(--motif-frame);
    opacity: 0.7;
    transform: scaleX(-1) rotate(-7deg);
}

/*  Above and to the left of the block's centred heading, mirrored so the butterfly faces into the page rather than
    off its left edge — the drawing is painted flying leftwards. Tilted a little, since it is drawn mid-beat and a
    level butterfly reads as a pinned specimen.

    Inside the column, unlike the flowers: at this size it fits in the empty corner a centred heading leaves, so it
    needs none of the outer margin. Hidden below xl with them all the same — narrower than that, the heading takes
    the width the butterfly was sitting in and the two would share it.

    This file's transparent margins are far tighter — the drawing fills 68.5% of the frame across and 66.75% down, in
    a square 2048 x 2048. Hence a frame barely larger than the butterfly, and small offsets: at 10rem the drawing
    comes out about 110px wide, and mirrored, its own left edge lands 28px inside the frame. */
.presentation-block-butterfly[b-lpnzrs9pm9]::before {
    --motif-frame: 15rem;
    aspect-ratio: 1;
    background-image: url("/images/discover-butterfly.webp");
    top: -8rem;
    left: -12rem;
    width: var(--motif-frame);
    opacity: 0.95;
    transform: scaleX(-1) rotate(10deg);
}

/*  Painted only from xl up. For the flowers that is where the margin they spill into exists at all — the section's
    own offset-xl-2 — so the breakpoint is the offset's, not a width picked by eye: narrower than that the section is
    full-bleed, they would be cut at the content edge, and what was left of them would sit behind the argument
    itself. The butterfly is here for the other reason: it fits inside the column, but only while a centred heading
    leaves it room. */
@media (max-width: 1199.98px) {
    .presentation-block-flower[b-lpnzrs9pm9]::before,
    .presentation-block-butterfly[b-lpnzrs9pm9]::before {
        content: none;
    }
}
/* /Components/PublicPages/Discover/DiscoverFacts.razor.rz.scp.css */
/*  The two panels, one under the other and centred. A column and not a wrapping row: they hold very different amounts
    of text — seven crafts against two languages — and side by side the second read as an afterthought pinned to
    the first. align-items rather than a width: it centres them while leaving each as wide as its own content, where
    the default stretch would pull both out to the full column. */
.discover-facts[b-9rqazwwkf8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/*  The cream of the sign-in tile in the navigation menu, written out for the same reason it is there: it is a literal
    in this design and not one of the --nd- tokens. The offset shadow is the one the page's other paper surfaces use. */
.discover-facts-panel[b-9rqazwwkf8] {
    display: flex;
    align-items: center;
    padding: 0.7rem 1.5rem;
    background-color: #F8F4EE;
    border: 1px solid rgba(80, 55, 35, 0.14);
    border-radius: 6px;
    box-shadow: -1px 1px 0 rgba(0, 0, 0, 0.04), -3px 3px 0 rgba(0, 0, 0, 0.02);
    font-family: var(--nd-font-subtitle);
    font-size: 1.2rem;
    line-height: 1.5;
    text-align: center;
}

/*  The crafts. --craft-gap is the whole space between two names, half of it laid either side of the bullet, so the
    two are equal by construction rather than by two values kept in step. The flex gap itself is zero: the bullet's
    own padding is all the spacing there is, and adding a column gap on top would put more space after a bullet than
    before it.

    Wrapping still happens between names, each being a flex item. A bullet belongs to the name before it, so a line
    that wraps ends on a bullet rather than starting with one, which is the way round that reads. */
.discover-facts-list[b-9rqazwwkf8] {
    --craft-gap: 1.2rem;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    column-gap: 0;
    row-gap: 0.1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

    /*  U+2022, drawn by the stylesheet rather than written into the markup: it separates, it says nothing, and the
        list is read out by its items.

        In the flow and not positioned, which is what puts it on the text's own baseline — an absolutely positioned box
        carries its own line height, and at this font size that dropped the bullet below the words it sits between.
        line-height: 0 keeps the larger glyph from making every row taller; it moves nothing, since line height changes
        the leading around a baseline and not the baseline itself.

        In the body font and not the handwriting one: Caveat draws a small, thin bullet, and a separator is punctuation
        rather than handwriting.

        The shift down is measured: at this size the glyph's ink stops 5px short of the baseline, so 0.19 of its own em
        would land its underside exactly level with the bottom of the lowercase letters either side. The value below is
        deliberately gentler than that and leaves the bullet a little above the line, which reads better than the
        arithmetic does. In em rather than px so it holds if the size above changes. */
    .discover-facts-list li:not(:last-child)[b-9rqazwwkf8]::after {
        content: "\2022";
        padding: 0 calc(var(--craft-gap) / 2);
        font-family: var(--nd-font-body);
        font-size: 1.35em;
        line-height: 0;
        vertical-align: -0.1em;
        opacity: 0.5;
    }

.discover-facts-languages[b-9rqazwwkf8] {
    margin: 0;
}
/* /Components/PublicPages/Discover/DiscoverFaq.razor.rz.scp.css */
/*  A pencilled question mark in the margin beside the questions, the way somebody would jot one next to a list they
    were puzzling over. A background on a pseudo-element rather than an <img>, because it says nothing the questions
    do not: no alternative text to write, nothing for a screen reader to announce, and removing the idea means
    deleting this rule.
*/
.discover-faq[b-4f7nyo3gwd] {
    /*  Containing block for the mark below. Not clipped, and no stacking context of its own — see the note on
        z-index there: the mark has to reach the page's own paint to multiply against it. Nothing overflows the
        document as a result, since the layout's .main-content is overflow-x: hidden. */
    position: relative;
}

.discover-faq[b-4f7nyo3gwd]::before {
    content: "";
    position: absolute;
    /*  Deliberately *no* z-index. The obvious move is z-index: -1 to keep decoration behind the text, and here it
        would backfire twice: a negative one paints below .bb-scrollbar, an ancestor carrying an opaque background,
        so the mark would vanish in the application while looking right in isolation — and the usual fix for that,
        isolation: isolate on this section, would cut the multiply below off from the page it needs to blend with
        and hand the white rectangle back. It needs neither, because it sits wholly outside the text column and
        overlaps nothing; pointer-events keeps it out of the way of the accordion buttons regardless. */
    /*  This file still carries Gemini's white background rather than a cut-out subject, so multiply is doing the
        detouring: white multiplies to nothing and leaves the page as it was, while the graphite darkens it. It is
        also the right blend for a pencil mark whether or not the file is ever cut out, so this holds either way.
        opacity below multiply lightens the stroke rather than fading a box. */
    mix-blend-mode: multiply;
    opacity: 0.75;
    /*  Square file, 2048 x 2048, in which the drawing occupies horizontally 31.5% to 66.5% and vertically 16.5% to
        81% — narrow and tall, with wide empty sides. At this frame the mark comes out about 104px across and 192px
        tall, its left edge landing just past the text column and its right edge 124px into the margin, which is
        61px short of the narrowest that margin ever gets. */
    --motif-frame: 18.6rem;
    width: var(--motif-frame);
    aspect-ratio: 1;
    background-image: url("/images/discover-questionmark.webp");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    top: 6rem;
    right: -17rem;
    transform: rotate(8deg);
    pointer-events: none;
}

/*  Painted only where there is a margin to spill into, which is where the section's own offset-xl-2 applies. Narrower
    than that the section is full-bleed: the mark would be cut at the content edge and what was left of it would sit
    behind the questions. */
@media (max-width: 1199.98px) {
    .discover-faq[b-4f7nyo3gwd]::before {
        content: none;
    }
}
/* /Components/PublicPages/Discover/DiscoverHero.razor.rz.scp.css */
/*  The mark, large and centred above the heading.

    Its own class rather than the .app-logo the bars use, and deliberately so: .app-logo is sized by
    TopBar.razor.css, which CSS isolation scopes to that component. An element carrying the name anywhere else gets
    no height at all — the mistake the sidebar mark already made once, where it measured 0 by 24 and quietly
    collapsed inside its flex row.

    The rule that hides the bars' mark while this one is on screen cannot live here for the same reason, in reverse:
    an isolated stylesheet cannot reach a sibling component's DOM. It is in wwwroot/css/app/components/navbar.css,
    keyed on this image's class. */
.discover-hero-logo[b-kx5nxhhg1o] {
    display: block;
    width: auto;
    height: 3.5rem;
    margin: 0 auto 1.5rem;
}

/*  Taller once there is room for it. Below this the hero is the whole first screen and every rem the mark takes is
    one the heading and the button do not get. */
@media (min-width: 768px) {
    .discover-hero-logo[b-kx5nxhhg1o] {
        height: 5rem;
        margin-bottom: 2rem;
    }
}
/* /Components/PublicPages/Discover/DiscoverJoin.razor.rz.scp.css */
/*  The watercolour field that closes the landing page. Centred and bounded rather than left to fill the column: at
    3584 x 1184 the drawing is three times wider than it is tall, so on a wide screen an unbounded copy would be
    close to 550px deep and read as a banner instead of as a drawing at the end of a chapter.

    No border, no shadow, no radius, on purpose — the file's own washes fade out into transparency on every side, and
    any frame at all would cut straight through them. */
.join-field[b-7p4xvmewub] {
    display: block;
    width: 100%;
    max-width: 56rem;
    height: auto;
    margin: 2.5rem auto 0;
}
/* /Components/PublicPages/Pages/PublicUser.razor.rz.scp.css */
/*  The member profile's badge, rule for rule. Its own live in Users/Pages/Index.razor.css, and CSS isolation scopes a
    stylesheet to the component it is named after: reusing the class names alone got the markup and none of the shape —
    a square picture where the member page draws a circle. */
.userbadge-container[b-aiaw6rc2p1] {
    height: 200px;
    align-content: center;
    justify-items: center;
    display: grid;
}

.userbadge-picture-container[b-aiaw6rc2p1] {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-width: 3px;
    border-radius: 50px;
    height: 100px;
    width: 100px;
    margin-left: 0.25rem;
    display: flex;
    overflow: hidden;
}

    .userbadge-picture-container img[b-aiaw6rc2p1] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.userbadge-username[b-aiaw6rc2p1] {
    margin-top: 1.0rem;
    font-size: 20px;
}
/* /Components/WasmLoader.razor.rz.scp.css */
.fade-in[b-5ve2tpymj7] {
    opacity: 1 !important;
    display: block !important;
    animation: fadeIn-b-5ve2tpymj7 1s ease-out;
}

.fade-out[b-5ve2tpymj7] {
    transition: opacity 0.8s ease-in-out;
    opacity: 0 !important;
    display: block !important;
}

h1[b-5ve2tpymj7] {
    font-family: var(--nd-font-brand);
    font-size: 5rem;
}

p[b-5ve2tpymj7] {
    font-family: var(--nd-font-button);
    font-size: 1.25rem;
}

.app-logo[b-5ve2tpymj7] {
    max-height: 5rem;
    margin-bottom: 0.75rem;
}

@keyframes fadeIn-b-5ve2tpymj7 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}