/* -- Chroma Highlight -- */
.highlight-wrapper {
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    min-width: 0;
}

.highlight-wrapper pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
}

.highlight,
.highlight pre {
    min-width: 0;
    max-width: 100%;
}

/* Lightweight Carousel */
.carousel-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
}
.carousel-track {
    position: relative;
    overflow: hidden;
    background: #111;
}
/* flat=true on the carousel shortcode — bare wrapper with no rounded
   corners and no dark letterbox plate behind the slide. Useful for
   transparent PNGs, brand visuals, or screenshots that already carry
   their own chrome and shouldn't sit on a framed plate. */
.carousel-wrap.flat {
    border-radius: 0;
}
.carousel-wrap.flat .carousel-track {
    background: transparent;
}
.carousel-slide {
    /* All slides ALWAYS absolute (instead of switching active→relative).
       The original theme toggled .active to position: relative so the
       track had a content-based height — but the position change caused
       a layout reflow on every slide swap, briefly flashing the image at
       its natural intrinsic dimensions before object-fit kicked in.
       Now: every slide is permanently inset:0 over the track, only
       opacity / pointer-events flip. The track's aspect-ratio (set
       inline in the shortcode) provides the height; no in-flow child
       needed. Smooth fade, no flicker. */
    position: absolute;
    inset: 0;
    opacity: 0;
    /* Inactive slides are visually hidden (opacity: 0) but would still
       hit-test by default — they'd intercept clicks meant for the active
       slide, breaking `lightbox=true`. Disable pointer-events here, re-
       enable on .active below. Nav buttons and dots are siblings of
       .carousel-track, not inside .carousel-slide, so this doesn't
       affect carousel controls. */
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}
.carousel-slide img {
    width: 100%;
    height: 100%;
    /* Default `cover` — fill the frame, cropping when the image aspect
       doesn't match the track's aspect-ratio. Right default for the
       "framed" carousel look (dark letterbox plate would otherwise be
       ugly with a 16:9 track + 4:3 photo). `.carousel-wrap.flat` flips
       this to `contain` (see flat-override below) so transparent-plate
       carousels show the full image without crop. */
    object-fit: cover;
    display: block;
    margin: 0 !important;
    padding: 0;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* `flat=true` carousel — full image visible (letterboxed against the
   transparent track), since flat is typically used for screenshots /
   mockups / transparent PNGs where cropping would defeat the purpose. */
.carousel-wrap.flat .carousel-slide img {
    object-fit: contain;
}
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 0.5rem;
}
.carousel-wrap:hover .carousel-btn {
    opacity: 1;
}
.carousel-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}
.carousel-prev {
    left: 0.75rem;
}
.carousel-next {
    right: 0.75rem;
}
.carousel-dots {
    position: absolute;
    bottom: 0.75rem;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}
.carousel-dot {
    width: 2rem;
    height: 3px;
    border: none;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 0;
    transition:
        background 0.3s,
        transform 0.2s;
}
.carousel-dot.active {
    background: #fff;
    transform: scaleY(1.5);
}

/* Repo Cards */
.repo-card {
    display: block;
    max-width: 28rem;
    padding: 1rem 1.25rem;
    border: 1px solid #d7e0e0;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition:
        box-shadow 0.2s,
        border-color 0.2s;
    text-decoration: none;
    color: inherit;
    margin: 1rem 0;
}
.repo-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #b8c4c5;
}
.repo-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.repo-card-header .icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #728a8c;
}
.repo-card-name {
    font-weight: 700;
    font-size: 1rem;
    color: #255459;
}
.repo-card-desc {
    margin: 0.5rem 0;
    font-size: 0.875rem;
    color: #4a5568;
    line-height: 1.4;
}
.repo-card-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: #728a8c;
}
.repo-card-meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.repo-card-meta .icon svg {
    width: 0.875rem;
    height: 0.875rem;
}
.language-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background-color: #0077b6;
}

/* Timeline */
.timeline-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 1.5rem 1rem;
    position: relative;
}
.timeline-list::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.25rem; /* start at the centre of the first dot, not above it */
    bottom: 0;
    width: 2px;
    background-color: var(--primary-700);
}
.timeline-item {
    position: relative;
    padding: 0 0 2rem 2rem;
}
.timeline-item:last-child {
    padding-bottom: 0;
}
.timeline-dot {
    position: absolute;
    left: -0.9rem; /* centres the 2rem-wide dot on the vertical line */
    top: 0.25rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--primary-700);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.timeline-dot .icon svg {
    width: 0.9rem;
    height: 0.9rem;
}
.timeline-content {
    background: #fff;
    border: 1px solid #d7e0e0;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.timeline-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.timeline-title {
    font-size: 1rem;
    font-weight: 700;
    color: #255459;
    margin: 0;
}
.timeline-sub {
    font-size: 0.8rem;
    color: #728a8c;
    margin-top: 0.25rem;
}
.timeline-body {
    font-size: 0.875rem;
    color: #4a5568;
    margin-top: 0.5rem;
    line-height: 1.5;
}
.timeline-body p {
    margin: 0;
}

/* Tabs */
.tab__container {
    margin: 1.5rem 0;
}
.tab__nav {
    border-bottom: 2px solid #d7e0e0;
}
.tab__button {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #728a8c;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition:
        color 0.15s,
        border-color 0.15s;
}
.tab__button:hover {
    color: #255459;
}
.tab__button.tab--active {
    color: #255459;
    border-bottom-color: #255459;
}
.tab__panel {
    display: none;
}
.tab__panel.tab--active {
    display: block;
}

/* YouTube Lite */
lite-youtube {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0.375rem;
    overflow: hidden;
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Team member custom icon */
.team-member .icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Lightbox */
.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.25rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    z-index: 10000;
    padding: 0.25rem 0.5rem;
    transition: opacity 0.15s;
}
.lightbox-close:hover { opacity: 1; }
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}
.lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    margin: 0 !important;
    transition: transform 0.25s;
    transform: scale(0.95);
}
.lightbox-overlay.active img {
    transform: scale(1);
}
.lightbox-overlay video {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 0.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s;
    transform: scale(0.95);
}
.lightbox-overlay.active video {
    transform: scale(1);
}

/* Gallery */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 1.5rem 0;
}
.gallery img {
    height: 200px;
    object-fit: cover;
    border-radius: 0.25rem;
    margin: 0 !important;
    padding: 0;
    box-shadow: none !important;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-grow: 1;
}
.gallery img:hover {
    opacity: 0.85;
}
.gallery .grid-w25 {
    width: calc(25% - 3px);
}
.gallery .grid-w33 {
    width: calc(33.333% - 3px);
}
.gallery .grid-w50 {
    width: calc(50% - 2px);
}
.gallery .grid-w66 {
    width: calc(66.666% - 3px);
}
.gallery .grid-w100 {
    width: 100%;
}
.gallery figure {
    margin: 0 !important;
}
.gallery figure img {
    width: 100%;
}

/* Generated using: hugo gen chromastyles --style=github-dark */

/* Background */
.bg {
    color: #e6edf3;
    background-color: #0d1117;
}
/* PreWrapper */
.chroma {
    color: #e6edf3;
    background-color: #0d1117;
    -webkit-text-size-adjust: none;
}
/* Error */
.chroma .err {
    color: #f85149;
}
/* LineLink */
.chroma .lnlinks {
    outline: none;
    text-decoration: none;
    color: inherit;
}
/* LineTableTD */
.chroma .lntd {
    vertical-align: top;
    padding: 0;
    margin: 0;
    border: 0;
}
/* LineTable */
.chroma .lntable {
    border-spacing: 0;
    padding: 0;
    margin: 0;
    border: 0;
}
/* LineHighlight */
.chroma .hl {
    background-color: #6e7681;
}
/* LineNumbersTable */
.chroma .lnt {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #737679;
}
/* LineNumbers */
.chroma .ln {
    white-space: pre;
    -webkit-user-select: none;
    user-select: none;
    margin-right: 0.4em;
    padding: 0 0.4em 0 0.4em;
    color: #6e7681;
}
/* Line */
.chroma .line {
    display: flex;
}
/* Keyword */
.chroma .k {
    color: #ff7b72;
}
/* KeywordConstant */
.chroma .kc {
    color: #79c0ff;
}
/* KeywordDeclaration */
.chroma .kd {
    color: #ff7b72;
}
/* KeywordNamespace */
.chroma .kn {
    color: #ff7b72;
}
/* KeywordPseudo */
.chroma .kp {
    color: #79c0ff;
}
/* KeywordReserved */
.chroma .kr {
    color: #ff7b72;
}
/* KeywordType */
.chroma .kt {
    color: #ff7b72;
}
/* NameClass */
.chroma .nc {
    color: #f0883e;
    font-weight: bold;
}
/* NameConstant */
.chroma .no {
    color: #79c0ff;
    font-weight: bold;
}
/* NameDecorator */
.chroma .nd {
    color: #d2a8ff;
    font-weight: bold;
}
/* NameEntity */
.chroma .ni {
    color: #ffa657;
}
/* NameException */
.chroma .ne {
    color: #f0883e;
    font-weight: bold;
}
/* NameLabel */
.chroma .nl {
    color: #79c0ff;
    font-weight: bold;
}
/* NameNamespace */
.chroma .nn {
    color: #ff7b72;
}
/* NameProperty */
.chroma .py {
    color: #79c0ff;
}
/* NameTag */
.chroma .nt {
    color: #7ee787;
}
/* NameVariable */
.chroma .nv {
    color: #79c0ff;
}
/* NameVariableClass */
.chroma .vc {
    color: #79c0ff;
}
/* NameVariableGlobal */
.chroma .vg {
    color: #79c0ff;
}
/* NameVariableInstance */
.chroma .vi {
    color: #79c0ff;
}
/* NameVariableMagic */
.chroma .vm {
    color: #79c0ff;
}
/* NameFunction */
.chroma .nf {
    color: #d2a8ff;
    font-weight: bold;
}
/* NameFunctionMagic */
.chroma .fm {
    color: #d2a8ff;
    font-weight: bold;
}
/* Literal */
.chroma .l {
    color: #a5d6ff;
}
/* LiteralDate */
.chroma .ld {
    color: #79c0ff;
}
/* LiteralString */
.chroma .s {
    color: #a5d6ff;
}
/* LiteralStringAffix */
.chroma .sa {
    color: #79c0ff;
}
/* LiteralStringBacktick */
.chroma .sb {
    color: #a5d6ff;
}
/* LiteralStringChar */
.chroma .sc {
    color: #a5d6ff;
}
/* LiteralStringDelimiter */
.chroma .dl {
    color: #79c0ff;
}
/* LiteralStringDoc */
.chroma .sd {
    color: #a5d6ff;
}
/* LiteralStringDouble */
.chroma .s2 {
    color: #a5d6ff;
}
/* LiteralStringEscape */
.chroma .se {
    color: #79c0ff;
}
/* LiteralStringHeredoc */
.chroma .sh {
    color: #79c0ff;
}
/* LiteralStringInterpol */
.chroma .si {
    color: #a5d6ff;
}
/* LiteralStringOther */
.chroma .sx {
    color: #a5d6ff;
}
/* LiteralStringRegex */
.chroma .sr {
    color: #79c0ff;
}
/* LiteralStringSingle */
.chroma .s1 {
    color: #a5d6ff;
}
/* LiteralStringSymbol */
.chroma .ss {
    color: #a5d6ff;
}
/* LiteralNumber */
.chroma .m {
    color: #a5d6ff;
}
/* LiteralNumberBin */
.chroma .mb {
    color: #a5d6ff;
}
/* LiteralNumberFloat */
.chroma .mf {
    color: #a5d6ff;
}
/* LiteralNumberHex */
.chroma .mh {
    color: #a5d6ff;
}
/* LiteralNumberInteger */
.chroma .mi {
    color: #a5d6ff;
}
/* LiteralNumberIntegerLong */
.chroma .il {
    color: #a5d6ff;
}
/* LiteralNumberOct */
.chroma .mo {
    color: #a5d6ff;
}
/* Operator */
.chroma .o {
    color: #ff7b72;
    font-weight: bold;
}
/* OperatorWord */
.chroma .ow {
    color: #ff7b72;
    font-weight: bold;
}
/* Comment */
.chroma .c {
    color: #8b949e;
    font-style: italic;
}
/* CommentHashbang */
.chroma .ch {
    color: #8b949e;
    font-style: italic;
}
/* CommentMultiline */
.chroma .cm {
    color: #8b949e;
    font-style: italic;
}
/* CommentSingle */
.chroma .c1 {
    color: #8b949e;
    font-style: italic;
}
/* CommentSpecial */
.chroma .cs {
    color: #8b949e;
    font-weight: bold;
    font-style: italic;
}
/* CommentPreproc */
.chroma .cp {
    color: #8b949e;
    font-weight: bold;
    font-style: italic;
}
/* CommentPreprocFile */
.chroma .cpf {
    color: #8b949e;
    font-weight: bold;
    font-style: italic;
}
/* GenericDeleted */
.chroma .gd {
    color: #ffa198;
    background-color: #490202;
}
/* GenericEmph */
.chroma .ge {
    font-style: italic;
}
/* GenericError */
.chroma .gr {
    color: #ffa198;
}
/* GenericHeading */
.chroma .gh {
    color: #79c0ff;
    font-weight: bold;
}
/* GenericInserted */
.chroma .gi {
    color: #56d364;
    background-color: #0f5323;
}
/* GenericOutput */
.chroma .go {
    color: #8b949e;
}
/* GenericPrompt */
.chroma .gp {
    color: #8b949e;
}
/* GenericStrong */
.chroma .gs {
    font-weight: bold;
}
/* GenericSubheading */
.chroma .gu {
    color: #79c0ff;
}
/* GenericTraceback */
.chroma .gt {
    color: #ff7b72;
}
/* GenericUnderline */
.chroma .gl {
    text-decoration: underline;
}
/* TextWhitespace */
.chroma .w {
    color: #6e7681;
}