/* /Components/Home/BioHeader.razor.rz.scp.css */
.hero[b-ekzetvl6lr] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-7);
    padding-top: var(--space-6);
}

.hero__text[b-ekzetvl6lr] {
    flex: 1 1 auto;
    min-width: 0;
}

.hero__header[b-ekzetvl6lr] {
    margin: 0 0 var(--space-4);
}

.hero__name[b-ekzetvl6lr] {
    font-size: var(--font-size-3xl);
    margin: 0 0 var(--space-2);
}

.hero__role-row[b-ekzetvl6lr] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0 0 var(--space-3);
}

.hero__role[b-ekzetvl6lr] {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-name);
    margin: 0;
}

.hero__bio[b-ekzetvl6lr] {
    font-size: var(--font-size-base);
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.hero__divider[b-ekzetvl6lr] {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
    opacity: 1;
}

.hero__section-heading[b-ekzetvl6lr] {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 var(--space-3);
}

.hero__bio-toggle[b-ekzetvl6lr] {
    display: inline-block;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    margin: 0 0 var(--space-4);
    color: var(--color-heading);
}

.hero__bio-toggle:hover[b-ekzetvl6lr] {
    color: var(--color-heading-hover);
}

.hero__photo[b-ekzetvl6lr] {
    flex-shrink: 0;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

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

@media (max-width: 640px) {
    .hero[b-ekzetvl6lr] {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        gap: var(--space-5);
    }

    .hero__photo[b-ekzetvl6lr] {
        width: 150px;
        height: 150px;
    }

    .hero__role-row[b-ekzetvl6lr] {
        justify-content: center;
    }
}
/* /Components/Home/Contact.razor.rz.scp.css */
/* Same card container pattern as .project-card / .project-showcase. */
.contact[b-bgf2io1auw] {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.contact__heading[b-bgf2io1auw] {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 var(--space-3);
}

.contact__intro[b-bgf2io1auw] {
    font-size: var(--font-size-base);
    color: var(--color-text);
    margin: 0 0 var(--space-5);
}

.contact__layout[b-bgf2io1auw] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
}

/* Same tile pattern as .tech-row__item in TechStackIcons.razor.css. */
.contact-socials[b-bgf2io1auw] {
    display: flex;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-socials__item a[b-bgf2io1auw],
.contact-socials__item button[b-bgf2io1auw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 4.5rem;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    /* --color-tile: on dark, a visible container distinct from .contact's
       own background; on light, matches the card by design. */
    background-color: var(--color-tile);
    color: var(--color-text);
    text-decoration: none;
    /* Reset button chrome so the "Email" tile matches the anchor tiles. */
    border: none;
    font: inherit;
    cursor: pointer;
    transition: transform 150ms ease, background-color 150ms ease, color 150ms ease;
}

.contact-socials__item a:hover[b-bgf2io1auw],
.contact-socials__item button:hover[b-bgf2io1auw] {
    background-color: var(--color-border);
    transform: translateY(-2px);
    text-decoration: none;
}

.contact-socials__item img[b-bgf2io1auw] {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.contact-socials__item span[b-bgf2io1auw] {
    font-size: var(--font-size-sm);
    text-align: center;
    line-height: 1.2;
}
/* /Components/Home/ContactModal.razor.rz.scp.css */
/* Intentionally empty. ContactModal.razor's markup is entirely Blazorise
   components (Modal/ModalContent/etc.) with no literal HTML element of our
   own wrapping it, so scoped/::deep CSS here can't reliably reach the
   rendered modal — see the .contact-modal__* rules in wwwroot/app.css. */
/* /Components/Home/HangulizerProject.razor.rz.scp.css */
.project-card[b-phnag8c52f] {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.project-card__header[b-phnag8c52f] {
    margin: 0 0 var(--space-3);
}

.project-card__links[b-phnag8c52f] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-1) 0 0;
}

/* Same color/weight as .hero__role ("Samuel Dukes"), sized down for an
   inline label rather than a name. */
.project-card__link[b-phnag8c52f] {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-name);
    text-decoration: none;
}

.project-card__link:hover[b-phnag8c52f] {
    text-decoration: underline;
}

/* Heading3/Paragraph/Fields are Blazorise components, so their rendered
   markup doesn't carry this file's scope attribute — ::deep is needed to
   reach past that boundary, same as the textarea overrides below. h3's
   own margin is dropped in favor of .project-card__header's — h3 now
   sits inside that flex row, which doesn't let margins collapse through
   to affect spacing the way a direct child's would. */
.project-card[b-phnag8c52f]  h3 {
    margin: 0;
}

.project-card[b-phnag8c52f]  h4 {
    margin: 0 0 var(--space-3);
}

.project-card[b-phnag8c52f]  .project-card__paragraph {
    margin: 0 0 var(--space-4);
}

.project-card__fields[b-phnag8c52f] {
    margin: 0 0 var(--space-4);
}

.project-card__divider[b-phnag8c52f] {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
    opacity: 1;
}

.project-card__highlight[b-phnag8c52f] {
    margin: var(--space-3) 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-heading);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-muted);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.project-card__highlight strong[b-phnag8c52f] {
    color: var(--color-heading);
}

.project-card__tags[b-phnag8c52f] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.project-card__tags li[b-phnag8c52f] {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.project-card[b-phnag8c52f]  textarea {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--color-bg) !important;
    color: var(--color-text) !important;
}

/* Bootstrap's own placeholder color rule (in app.css) uses --bs-secondary-color,
   which isn't wired into this site's data-theme system, so it stays the same
   shade regardless of theme. Override it here with our theme-aware token. */
.project-card[b-phnag8c52f]  textarea::placeholder {
    color: var(--color-text-muted) !important;
}

.project-card[b-phnag8c52f]  textarea:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 0.2rem var(--color-focus-ring) !important;
}
/* /Components/Home/Hobbies.razor.rz.scp.css */
.hobbies-heading[b-acif7wrqo8] {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 var(--space-5);
}

.hobbies-list[b-acif7wrqo8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

/* Same card container pattern as .project-showcase / .project-card. */
.hobby-card[b-acif7wrqo8] {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.hobby-card__title[b-acif7wrqo8] {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 var(--space-3);
}

.hobby-card__subtitle[b-acif7wrqo8] {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-heading);
    margin: var(--space-5) 0 var(--space-2);
}

.hobby-card__text[b-acif7wrqo8] {
    font-size: var(--font-size-base);
    color: var(--color-text);
    margin: 0;
}

.hobby-card__aside[b-acif7wrqo8] {
    font-size: var(--font-size-sm);
    font-style: italic;
    color: var(--color-text-muted);
    margin: var(--space-2) 0 0;
}

/* Same tile pattern as .contact-socials in Contact.razor.css, stacked
   into a column instead of a row. */
.hobby-card__links[b-acif7wrqo8] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.hobby-card__links a[b-acif7wrqo8] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-muted);
    color: var(--color-text);
    text-decoration: none;
    transition: transform 150ms ease, background-color 150ms ease;
}

.hobby-card__links a:hover[b-acif7wrqo8] {
    background-color: var(--color-border);
    transform: translateY(-2px);
    text-decoration: none;
}

.hobby-card__links img[b-acif7wrqo8] {
    width: 1.5rem;
    height: 1.5rem;
    object-fit: contain;
}

.hobby-card__links span[b-acif7wrqo8] {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.hobby-card__row[b-acif7wrqo8] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    margin: 0;
}

.hobby-card__row .hobby-card__text[b-acif7wrqo8] {
    flex: 1 1 auto;
}

/* Wraps the title/subtitle + text together as one flex item, so the
   image/links beside them — top-aligned via the row's
   align-items: flex-start — line up with the heading itself instead of
   with the paragraph below it. */
.hobby-card__row-content[b-acif7wrqo8] {
    flex: 1 1 auto;
}

.hobby-card__row-content .hobby-card__title[b-acif7wrqo8],
.hobby-card__row-content .hobby-card__subtitle[b-acif7wrqo8] {
    margin: 0 0 var(--space-2);
}

/* Subtitle's usual top margin (for spacing after a preceding block) is
   dropped above since it now lives inside a row; put that spacing on
   the row itself when it follows another row instead. */
.hobby-card__row + .hobby-card__row[b-acif7wrqo8] {
    margin-top: var(--space-5);
}

.hobby-card__cover[b-acif7wrqo8] {
    flex-shrink: 0;
    align-self: stretch;
    width: 11rem;
    height: auto;
    border-radius: var(--radius-md);
    object-fit: cover;
    cursor: zoom-in;
}

/* Same tile pattern as .tech-row__item in TechStackIcons.razor.css, sized
   up to give the character art more room. */
.hobby-card__mains[b-acif7wrqo8] {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 640px) {
    .hobby-card__row[b-acif7wrqo8] {
        flex-direction: column;
        align-items: stretch;
    }

    .hobby-card__mains[b-acif7wrqo8] {
        justify-content: center;
    }

    .hobby-card__links[b-acif7wrqo8] {
        align-items: center;
    }
}

.hobby-card__main[b-acif7wrqo8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    width: 7rem;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface-muted);
    transition: transform 150ms ease, background-color 150ms ease;
}

.hobby-card__main:hover[b-acif7wrqo8] {
    transform: translateY(-2px);
}

.hobby-card__main img[b-acif7wrqo8] {
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    cursor: zoom-in;
}

.hobby-card__main span[b-acif7wrqo8] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.2;
}
/* /Components/Home/ImageLightbox.razor.rz.scp.css */
/* Intentionally empty. ImageLightbox.razor's markup is entirely Blazorise
   components (Modal/ModalContent/etc.) with no literal HTML element of our
   own wrapping it, so scoped/::deep CSS here can't reliably reach the
   rendered modal — see the .image-lightbox__* rules in wwwroot/app.css,
   same reasoning as .contact-modal__* there. */
/* /Components/Home/MoreProjects.razor.rz.scp.css */
/* Intentionally empty — see MoreProjects.razor. */
/* /Components/Home/ProjectsShowcase.razor.rz.scp.css */
.projects-section__list[b-uw8gz5zn67] {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}
/* /Components/Home/ProjectTemplate.razor.rz.scp.css */
.project-showcase[b-cdkc4w8bck] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
}

.project-showcase__details[b-cdkc4w8bck] {
    width: 35%;
}

.project-showcase__header[b-cdkc4w8bck] {
    margin: 0 0 var(--space-3);
}

.project-showcase__links[b-cdkc4w8bck] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-1) 0 0;
}

/* Same color/weight as .hero__role ("Samuel Dukes"), sized down for an
   inline label rather than a name. */
.project-showcase__link[b-cdkc4w8bck] {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-name);
}

a.project-showcase__link[b-cdkc4w8bck] {
    text-decoration: none;
}

a.project-showcase__link:hover[b-cdkc4w8bck] {
    text-decoration: underline;
}

.project-showcase__variant-toggle[b-cdkc4w8bck] {
    display: inline-flex;
    gap: var(--space-1);
    margin: var(--space-3) 0 var(--space-4);
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background-color: var(--color-surface-muted);
}

.project-showcase__variant-button[b-cdkc4w8bck] {
    border: none;
    background: none;
    padding: var(--space-1) var(--space-4);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.project-showcase__variant-button:hover[b-cdkc4w8bck] {
    color: var(--color-text);
}

.project-showcase__variant-button--active[b-cdkc4w8bck] {
    background-color: var(--color-surface);
    color: var(--color-heading);
    box-shadow: var(--shadow-sm);
}

.project-showcase__highlight[b-cdkc4w8bck] {
    margin: var(--space-3) 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-heading);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-muted);
    color: var(--color-text);
    font-size: var(--font-size-sm);
}

.project-showcase__highlight strong[b-cdkc4w8bck] {
    color: var(--color-heading);
}

.project-showcase__tags[b-cdkc4w8bck] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
}

.project-showcase__tags li[b-cdkc4w8bck] {
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    background-color: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.project-showcase__media[b-cdkc4w8bck] {
    width: 65%;
    height: 540px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--color-surface);
}

/* Fixed height, not 100% — Bootstrap's .carousel-item (this div's actual
   parent) has no explicit height of its own, so a percentage here would
   resolve to auto instead of filling .project-showcase__media, collapsing
   the slide down to its content's natural size. */
.project-showcase__slide[b-cdkc4w8bck] {
    display: flex;
    flex-direction: column;
    height: 540px;
}

/* Narrower than its 100%-wide carousel box, and centered, so the
   prev/next arrows (positioned by Bootstrap at the edges of that box)
   land on the surface-colored margin on either side instead of over the
   photo itself. An explicit height (not flex:1) — flex-basis:auto on a
   replaced element like <img> didn't reliably stretch to fill the
   remaining column space, leaving it far smaller than the box. */
.project-showcase__image[b-cdkc4w8bck] {
    display: block;
    width: calc(100% - 5rem);
    height: 495px;
    margin: 0 auto;
    object-fit: contain;
    cursor: zoom-in;
}

/* No caption for this image (e.g. Fighting Flow's Android shots, Calico
   LoFi) — use the full slide height instead of leaving the 45px caption
   strip empty underneath. */
.project-showcase__image--full[b-cdkc4w8bck] {
    height: 540px;
}

.project-showcase__caption[b-cdkc4w8bck] {
    height: 45px;
    margin: 0;
    padding: var(--space-2) 0;
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Bootstrap's carousel controls default to a 15%-wide click zone with the
   icon centered in it — at typical showcase widths that center point
   lands past the 2.5rem margin reserved above, so the icon still grazes
   the image edge. Pinning the zone to that same 2.5rem makes the icon
   center land in the middle of the reserved margin regardless of the
   carousel's actual pixel width. ::deep is safe here (unlike the image
   lightbox) because .project-showcase__media is a literal element in
   this file wrapping the Blazorise Carousel. */
.project-showcase__media[b-cdkc4w8bck]  .carousel-control-prev,
.project-showcase__media[b-cdkc4w8bck]  .carousel-control-next {
    width: 2.5rem;
}

/* Bootstrap's default dot indicators sit at the very bottom of the
   carousel, which now collides with .project-showcase__caption occupying
   that same space — the arrows plus the caption text already make
   navigation clear, so drop the redundant indicator row instead of
   fighting it for space. */
.project-showcase__media[b-cdkc4w8bck]  .carousel-indicators {
    display: none;
}

.project-showcase--reverse[b-cdkc4w8bck] {
    flex-direction: row-reverse;
}

/* Pull the media box closer to whichever outer edge of the card it sits
   against — the right edge normally, the left edge when the card is
   reversed — instead of matching the card's full padding on that side. */
.project-showcase__media[b-cdkc4w8bck] {
    margin-right: calc(var(--space-3) - var(--space-6));
}

.project-showcase--reverse .project-showcase__media[b-cdkc4w8bck] {
    margin-right: 0;
    margin-left: calc(var(--space-3) - var(--space-6));
}

/* No screenshots yet for this project — let the details column take the
   full width instead of leaving an empty media box beside it. */
.project-showcase--no-media .project-showcase__details[b-cdkc4w8bck] {
    width: 100%;
}

@media (max-width: 768px) {
    .project-showcase[b-cdkc4w8bck] {
        flex-direction: column;
    }

    .project-showcase__details[b-cdkc4w8bck],
    .project-showcase__media[b-cdkc4w8bck] {
        width: 100%;
    }
}
/* /Components/Home/TechStackIcons.razor.rz.scp.css */
.tech-row__heading[b-64dmzi2tzq] {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-heading);
    margin: 0 0 var(--space-3);
}

.tech-row[b-64dmzi2tzq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}

.tech-row__item[b-64dmzi2tzq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    flex: 1 1 0;
    min-width: 4.5rem;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    transition: transform 150ms ease, background-color 150ms ease;
}

.tech-row__item:hover[b-64dmzi2tzq] {
    background-color: var(--color-surface-muted);
    border-color: var(--color-accent);
    transform: translateY(-2px);
}

.tech-row__item img[b-64dmzi2tzq] {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
}

.tech-row__label[b-64dmzi2tzq] {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1.2;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* .page and .app-content aren't styled here: those classes sit on
   Blazorise's <Layout>/<LayoutContent> components, not literal HTML in
   this file, so Blazor's CSS isolation scope never attaches to them (the
   same gap that made NavMenu.razor.css dead — see app.css). They're
   styled globally in app.css instead. .app-shell below is a literal
   <div> in this file, so it scopes normally. */

.app-shell[b-r2xijcj3dj] {
    min-height: 100vh;
    background-color: var(--color-bg);
    color: var(--color-text);
}

main[b-r2xijcj3dj] {
    flex: 1;
}

#blazor-error-ui[b-r2xijcj3dj] {
    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-r2xijcj3dj] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Intentionally empty.

   NavMenu.razor's own markup is entirely Blazorise component tags
   (<Bar>, <BarItem>, <BarLink>, ...), not literal HTML elements. Blazor's
   CSS isolation only stamps its scope attribute onto literal elements
   written directly in a .razor file, so this file's scope never attaches
   to anything Blazorise actually renders — every rule here, ::deep or
   not, would silently match nothing.

   The nav bar's styling (.site-nav, .site-nav__brand, .site-nav__link,
   .theme-toggle) lives in wwwroot/app.css as plain global CSS instead,
   where it isn't blocked by that scoping gap.
*/
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-4o1w8fhjd6],
.components-reconnect-repeated-attempt-visible[b-4o1w8fhjd6],
.components-reconnect-failed-visible[b-4o1w8fhjd6],
.components-pause-visible[b-4o1w8fhjd6],
.components-resume-failed-visible[b-4o1w8fhjd6],
.components-rejoining-animation[b-4o1w8fhjd6] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-4o1w8fhjd6],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-4o1w8fhjd6],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-4o1w8fhjd6],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-4o1w8fhjd6],
#components-reconnect-modal.components-reconnect-retrying[b-4o1w8fhjd6],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-4o1w8fhjd6],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-4o1w8fhjd6],
#components-reconnect-modal.components-reconnect-failed[b-4o1w8fhjd6],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-4o1w8fhjd6] {
    display: block;
}


#components-reconnect-modal[b-4o1w8fhjd6] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-4o1w8fhjd6 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-4o1w8fhjd6 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-4o1w8fhjd6 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-4o1w8fhjd6]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-4o1w8fhjd6 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-4o1w8fhjd6 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-4o1w8fhjd6 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-4o1w8fhjd6 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-4o1w8fhjd6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-4o1w8fhjd6] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-4o1w8fhjd6] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-4o1w8fhjd6] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-4o1w8fhjd6] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-4o1w8fhjd6] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-4o1w8fhjd6] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-4o1w8fhjd6 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-4o1w8fhjd6] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-4o1w8fhjd6 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/SectionNav.razor.rz.scp.css */
.section-nav[b-q5qxfigq7v] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding: var(--space-3) var(--space-6);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms ease;
    pointer-events: none;
}

.section-nav--visible[b-q5qxfigq7v] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.section-nav__brand[b-q5qxfigq7v] {
    font-weight: 700;
    color: var(--color-heading);
    text-decoration: none;
    font-size: var(--font-size-base);
}

.section-nav__end[b-q5qxfigq7v] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.section-nav__list[b-q5qxfigq7v] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.section-nav__link[b-q5qxfigq7v] {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: 500;
    padding-bottom: var(--space-1);
    border-bottom: 2px solid transparent;
    transition: color 150ms ease, border-color 150ms ease;
}

.section-nav__link:hover[b-q5qxfigq7v] {
    color: var(--color-text);
}

.section-nav__link--active[b-q5qxfigq7v] {
    color: var(--color-heading);
    border-bottom-color: var(--color-accent);
}

@media (max-width: 640px) {
    .section-nav[b-q5qxfigq7v] {
        padding: var(--space-2) var(--space-4);
    }

    .section-nav__end[b-q5qxfigq7v] {
        gap: var(--space-3);
    }

    .section-nav__list[b-q5qxfigq7v] {
        gap: var(--space-3);
    }
}
/* /Components/Layout/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-9awmym035v] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    outline: none;
    box-shadow: none;
    background: transparent;
    cursor: pointer;
}

.theme-toggle__track[b-9awmym035v] {
    position: relative;
    display: inline-block;
    width: 4.5rem;
    height: 2rem;
    border-radius: 999px;
    background-color: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    transition: background-color 150ms ease, border-color 150ms ease;
}

.theme-toggle__track-icon[b-9awmym035v] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    line-height: 1;
}

.theme-toggle__track-icon--sun[b-9awmym035v] {
    left: 0.4rem;
}

.theme-toggle__track-icon--moon[b-9awmym035v] {
    right: 0.4rem;
}

.theme-toggle__thumb[b-9awmym035v] {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background-color: var(--color-accent);
    box-shadow: var(--shadow-sm);
    transition: transform 200ms ease, background-color 150ms ease;
}

/* Light mode: the thumb sits over the moon icon (inactive), leaving the
   sun (active) exposed on the left. */
.theme-toggle[aria-checked='false'] .theme-toggle__thumb[b-9awmym035v] {
    transform: translateX(2.5rem);
}

/* Dark mode: the thumb sits over the sun icon (inactive) in its resting
   position on the left, leaving the moon (active) exposed on the right. */
.theme-toggle[aria-checked='true'] .theme-toggle__thumb[b-9awmym035v] {
    transform: translateX(0);
    background-color: var(--color-accent-hover);
}

.theme-toggle:hover .theme-toggle__track[b-9awmym035v] {
    border-color: var(--color-accent);
}

.theme-toggle:focus-visible .theme-toggle__track[b-9awmym035v] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.home-page[b-esm0looh1g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.intro[b-esm0looh1g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.projects-group[b-esm0looh1g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.projects-list[b-esm0looh1g] {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
}

.projects-heading[b-esm0looh1g] {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--color-heading);
    margin: 0;
}

.home-page .section-divider[b-esm0looh1g] {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 0;
    /* Bootstrap's reboot sets all <hr> elements to opacity: .25 by default,
       which made this barely visible even with a themed border-color. */
    opacity: 1;
}
/* /Components/Pages/Projects.razor.rz.scp.css */
.projects-page[b-mhppx0iuuk] {
    padding-block: var(--space-4);
}

.projects-page[b-mhppx0iuuk]  h1 {
    margin-bottom: var(--space-5);
}

.projects-page[b-mhppx0iuuk]  .projects-page__select {
    max-width: 20rem;
    margin-bottom: var(--space-6);
}

.projects-page[b-mhppx0iuuk]  .projects-page__select select {
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-sm) !important;
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    padding: var(--space-2) var(--space-3) !important;
}

.projects-page[b-mhppx0iuuk]  .projects-page__select select:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 0.2rem var(--color-focus-ring) !important;
}