/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-r3zksfkvjf],
.components-reconnect-repeated-attempt-visible[b-r3zksfkvjf],
.components-reconnect-failed-visible[b-r3zksfkvjf],
.components-pause-visible[b-r3zksfkvjf],
.components-resume-failed-visible[b-r3zksfkvjf],
.components-rejoining-animation[b-r3zksfkvjf] {
    display: none;
}

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


#components-reconnect-modal[b-r3zksfkvjf] {
    background-color: var(--surface);
    color: var(--text);
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 1px solid var(--border);
    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-r3zksfkvjf 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-r3zksfkvjf] {
    border: 0;
    background-color: var(--green);
    color: #121212;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-r3zksfkvjf] {
        background-color: #9ed55d;
    }

    #components-reconnect-modal button:active[b-r3zksfkvjf] {
        background-color: var(--green);
    }

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

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

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

@keyframes components-rejoining-animation-b-r3zksfkvjf {
    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/Pages/ProjectDetail.razor.rz.scp.css */
.story-page[b-nv3n5xmr2r] { max-width: 1000px; }
.story-page h1[b-nv3n5xmr2r] { font-size: clamp(42px, 6vw, 64px); margin: 18px 0 7px; }
.story-subtitle[b-nv3n5xmr2r] { color: #c7c7bf; font: 400 clamp(16px, 2vw, 21px)/1.6 var(--mono); margin-bottom: 24px; }
.story-page .detail-description[b-nv3n5xmr2r] { max-width: 740px; margin: 25px 0 27px; font-size: 17px; line-height: 1.85; }
.project-facts[b-nv3n5xmr2r] { display: flex; flex-wrap: wrap; gap: 24px 70px; margin: 36px 0 0; padding-top: 25px; border-top: 1px solid var(--border); }
.project-facts dt[b-nv3n5xmr2r] { color: var(--faint); font: 10px/1.7 var(--mono); }
.project-facts dd[b-nv3n5xmr2r] { margin: 6px 0 0; color: #c6c6be; font-size: 13px; }
.story-outcome[b-nv3n5xmr2r] { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 52px; margin: 38px 0 0; padding: 29px 32px; border: 1px solid #354129; border-radius: 6px; background: linear-gradient(110deg, #212a1b, #181c16); }
.outcome-metric[b-nv3n5xmr2r] { display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; max-width: 100%; text-align: center; }
.outcome-metric strong[b-nv3n5xmr2r] { color: var(--green); font: 500 clamp(27px, 4vw, 39px)/1.15 var(--mono); letter-spacing: -.06em; white-space: nowrap; }
.outcome-metric span[b-nv3n5xmr2r] { color: #d4e3c6; font: 600 14px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.story-outcome p[b-nv3n5xmr2r] { color: #a1ac98; max-width: 490px; font-size: 15px; line-height: 1.95; }
.story-layout[b-nv3n5xmr2r] { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 66px; }
.story-content[b-nv3n5xmr2r] { min-width: 0; }
.story-code[b-nv3n5xmr2r] { margin: 26px 0; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: #151812; }
.story-code figcaption[b-nv3n5xmr2r] { padding: 13px 18px; border-bottom: 1px solid var(--border); color: #a9b69b; font: 11px/1.8 var(--mono); }
.story-code pre[b-nv3n5xmr2r] { margin: 0; padding: 20px; overflow-x: auto; color: #c8dda9; font: 12px/1.85 var(--mono); tab-size: 2; }
.story-code pre:focus-visible[b-nv3n5xmr2r] { outline: 2px solid var(--green); outline-offset: -2px; }
.story-code code[b-nv3n5xmr2r] { font: inherit; }
.story-chapter[b-nv3n5xmr2r] { margin-bottom: 52px; scroll-margin-top: 38px; }
.chapter-number[b-nv3n5xmr2r] { color: var(--green); font: 10px/1.6 var(--mono); }
.story-chapter h2[b-nv3n5xmr2r] { margin: 11px 0 22px; font: 500 clamp(23px, 2.8vw, 29px)/1.35 var(--sans); letter-spacing: -.025em; text-wrap: balance; }
.story-chapter p[b-nv3n5xmr2r] { margin: 0 0 17px; color: #a9a9a1; font-size: 15px; line-height: 1.95; }
.chapter-link[b-nv3n5xmr2r] { display: inline-flex; align-items: center; gap: 10px; margin-top: 9px; color: var(--green); font-size: 12px; line-height: 1.8; }
.chapter-link:hover[b-nv3n5xmr2r] { text-decoration: underline; text-underline-offset: 4px; }
.chapter-sources[b-nv3n5xmr2r] { margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--border); color: #a6b398; font-size: 12px; line-height: 1.8; }
.chapter-sources summary[b-nv3n5xmr2r] { cursor: pointer; }
.chapter-sources ul[b-nv3n5xmr2r] { margin: 14px 0 0; padding-left: 18px; }
.chapter-sources li[b-nv3n5xmr2r] { margin: 8px 0; }
.chapter-sources a[b-nv3n5xmr2r] { color: var(--green); overflow-wrap: anywhere; }
.chapter-sources a:hover[b-nv3n5xmr2r] { text-decoration: underline; text-underline-offset: 3px; }
.chapter-sources[b-nv3n5xmr2r]  .icon { width: 12px; height: 12px; margin-left: 5px; vertical-align: middle; }
.story-back[b-nv3n5xmr2r] { border-top: 1px solid var(--border); margin: 40px 0 0; padding-top: 25px; width: 100%; }
@media (max-width: 800px) {
    .story-outcome[b-nv3n5xmr2r] { gap: 22px; padding: 24px; }
    .story-layout[b-nv3n5xmr2r] { grid-template-columns: 1fr; gap: 35px; margin-top: 44px; }
    .story-chapter[b-nv3n5xmr2r] { margin-bottom: 40px; }
}
@media (max-width: 520px) {
    .story-outcome[b-nv3n5xmr2r] { grid-template-columns: 1fr; gap: 16px; }
    .project-facts[b-nv3n5xmr2r] { gap: 20px; flex-direction: column; }
    .story-page .detail-description[b-nv3n5xmr2r] { font-size: 16px; }
    .story-chapter p[b-nv3n5xmr2r] { font-size: 15px; }
}
/* /Components/Portfolio/ApiExplorer.razor.rz.scp.css */
.api-explorer[b-k9zosmem3c] { font-family: var(--mono); }
.request-bar[b-k9zosmem3c] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; background: #252525; padding: 12px 15px; border-bottom: 1px solid var(--border); }
.http-method[b-k9zosmem3c] { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #3b4530; border-radius: 4px; padding: 0 9px; height: 34px; font-size: 11px; font-weight: 600; color: var(--green); background: #1c2119; }
select[b-k9zosmem3c] { min-width: 0; width: 100%; height: 34px; color: #c5c5bf; background: #1b1b1b; border: 1px solid #3a3a37; padding: 0 7px; font: 10px var(--mono); cursor: pointer; }
.copy-button[b-k9zosmem3c] { width: 28px; min-height: 34px; display: flex; align-items: center; justify-content: center; color: #9a9a94; background: transparent; border: 0; }
.copy-button:hover[b-k9zosmem3c] { color: var(--green); }
.execute-button[b-k9zosmem3c] { height: 34px; padding: 0 11px; border: 1px solid #628536; color: var(--green); background: #8bc34a08; font: 11px var(--mono); }
.execute-button:hover[b-k9zosmem3c] { background: #8bc34a15; }
button:disabled[b-k9zosmem3c] { opacity: .45; }
.response-panel[b-k9zosmem3c] { height: 345px; overflow: auto; padding: 16px; font-size: 11px; background: #121212; scrollbar-width: thin; scrollbar-color: #444 #121212; }
.response-status[b-k9zosmem3c] { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed #292927; font-size: 10px; color: #bebeb8; }
.response-status strong[b-k9zosmem3c] { margin-left: 6px; }
.response-ok[b-k9zosmem3c] { color: var(--green); }
.response-error[b-k9zosmem3c] { color: #f58b82; }
.response-time[b-k9zosmem3c] { color: #94948c; white-space: nowrap; }
.response-header[b-k9zosmem3c] { color: #888880; font-size: 10px; line-height: 1.9; }
.response-header > span[b-k9zosmem3c] { color: #9f9f96; }
.response-json[b-k9zosmem3c] { margin-top: 17px; font: 11px/1.85 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.response-json code[b-k9zosmem3c] { font: inherit; }
.json-key[b-k9zosmem3c] { color: #8fcae6; }
.json-string[b-k9zosmem3c] { color: #cb977d; }
.json-number[b-k9zosmem3c] { color: #b5cea8; }
.json-literal[b-k9zosmem3c] { color: #9d91ce; }
.json-punctuation[b-k9zosmem3c] { color: #c5c5be; }
.api-statusbar[b-k9zosmem3c] { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 14px; min-height: 30px; background: #1b1b1b; border-top: 1px solid #292929; font-size: 9px; color: #999990; }
@media (max-width: 420px) {
    .request-bar[b-k9zosmem3c] { gap: 5px; padding: 10px; grid-template-columns: auto minmax(0, 1fr) auto; }
    .copy-button[b-k9zosmem3c] { grid-column: 1; grid-row: 2; }
    .execute-button[b-k9zosmem3c] { grid-column: 2 / 4; grid-row: 2; }
    select[b-k9zosmem3c] { grid-column: 2 / 4; font-size: 10px; }
    .response-panel[b-k9zosmem3c] { height: 310px; padding: 12px; }
}
/* /Components/Portfolio/FloatingModels.razor.rz.scp.css */
floating-models[b-32326d4v8n] { display: block; position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
canvas[b-32326d4v8n] { display: block; width: 100%; height: 100%; opacity: .48; mask-image: linear-gradient(90deg, #000 0%, #000b 12%, #0003 30%, #0002 50%, #0003 70%, #000b 88%, #000 100%); }
@media (max-width: 800px) {
    canvas[b-32326d4v8n] { opacity: .22; mask-image: linear-gradient(90deg, #0008, #0004 30%, #0004 70%, #0008); }
}
/* /Components/Portfolio/HologramPortrait.razor.rz.scp.css */
hologram-portrait[b-fu13e77wvn] {
    --holo-color: var(--green, #8bc34a);
    display: block; position: relative; isolation: isolate; width: 100%; height: 340px;
    margin-bottom: 28px; overflow: visible; border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--holo-color) 28%, #182017);
    background: radial-gradient(ellipse at 50% 88%, #8bc34a1c, transparent 65%), linear-gradient(145deg, #141c1366, #0d130e99 65%);
}
canvas[b-fu13e77wvn] {
    position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0;
    filter: drop-shadow(0 0 8px #8bc34a40); transition: opacity .65s ease;
    clip-path: inset(0 round 13px);
}
[data-state="ready"] canvas[b-fu13e77wvn] { opacity: 1; }
.hologram-grid[b-fu13e77wvn] {
    position: absolute; inset: -60px calc(-1 * clamp(28px, 50vw - 554px, 64px)) -56px -96px; z-index: -1; pointer-events: none;
    background-image: linear-gradient(#8bc34a1c 1px, transparent 1px), linear-gradient(90deg, #8bc34a1c 1px, transparent 1px);
    background-size: 32px 32px; background-position: center;
    mask-image: radial-gradient(ellipse farthest-side at 50% 50%, #000 48%, transparent 100%);
}
.hologram-cross[b-fu13e77wvn] {
    position: absolute; z-index: 2; width: 25px; height: 25px; pointer-events: none;
    color: color-mix(in srgb, var(--holo-color) 80%, transparent);
    filter: drop-shadow(0 0 5px #8bc34a28);
}
.hologram-cross[b-fu13e77wvn]::before, .hologram-cross[b-fu13e77wvn]::after {
    content: ""; position: absolute; background: currentColor;
}
.hologram-cross[b-fu13e77wvn]::before { width: 100%; height: 1px; top: 12px; left: 0; }
.hologram-cross[b-fu13e77wvn]::after { width: 1px; height: 100%; left: 12px; top: 0; }
.hologram-cross-left[b-fu13e77wvn] { left: -1px; top: 14%; transform: translate(-50%, -50%); }
.hologram-cross-right[b-fu13e77wvn] { right: -1px; top: 82%; transform: translate(50%, -50%); }
@media (max-width: 800px) {
    .hologram-grid[b-fu13e77wvn] { inset: -36px -14px; background-size: 28px 28px; }
}
.hologram-loader[b-fu13e77wvn] {
    position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
    opacity: 1; visibility: visible; transition: opacity .5s ease, visibility .5s;
}
[data-state="ready"] .hologram-loader[b-fu13e77wvn] { opacity: 0; visibility: hidden; }
.hologram-blob[b-fu13e77wvn] { position: relative; width: 120px; height: 144px; filter: drop-shadow(0 0 22px #8bc34a55); }
.hologram-blob span[b-fu13e77wvn] {
    position: absolute; inset: 0; border: 1px solid #b9f18380;
    border-radius: 43% 57% 61% 39% / 48% 38% 62% 52%;
    background: radial-gradient(ellipse at 34% 26%, #dcffb365, #8bc34a24 42%, #8bc34a08 70%);
    box-shadow: inset 0 0 24px #8bc34a35, 0 0 18px #8bc34a20;
    animation: blob-drift-b-fu13e77wvn 4.7s ease-in-out infinite alternate;
    animation-play-state: paused;
}
.hologram-blob span:nth-child(2)[b-fu13e77wvn] { inset: 10px -8px; opacity: .65; animation-delay: -2s; animation-duration: 5.9s; animation-direction: alternate-reverse; }
.hologram-blob span:nth-child(3)[b-fu13e77wvn] { inset: 20px 12px; opacity: .8; filter: blur(5px); animation-delay: -3s; animation-duration: 3.8s; }
.hologram-blob[b-fu13e77wvn]::after {
    content: ""; position: absolute; inset: -12px; border-radius: 50%;
    background: repeating-linear-gradient(transparent 0 3px, #101c1480 3px 5px);
    mask-image: radial-gradient(ellipse, #000 25%, transparent 68%);
}
.hologram-loader-ring[b-fu13e77wvn] {
    position: absolute; left: calc(50% - 70px); bottom: 34px; width: 140px; height: 24px;
    border: 1px solid #b9f18355; border-radius: 50%; box-shadow: 0 0 22px #8bc34a28, inset 0 0 18px #8bc34a25;
    animation: ring-breathe-b-fu13e77wvn 3.2s ease-in-out infinite; animation-play-state: paused;
}
[data-running="true"] .hologram-blob span[b-fu13e77wvn], [data-running="true"] .hologram-loader-ring[b-fu13e77wvn] { animation-play-state: running; }
[data-state="ready"] .hologram-blob span[b-fu13e77wvn], [data-state="ready"] .hologram-loader-ring[b-fu13e77wvn],
[data-state="error"] .hologram-blob span[b-fu13e77wvn], [data-state="error"] .hologram-loader-ring[b-fu13e77wvn] { animation-play-state: paused; }
[data-state="error"] .hologram-loader[b-fu13e77wvn] { opacity: .3; }
@keyframes blob-drift-b-fu13e77wvn {
    0% { transform: translateY(5px) rotate(-12deg) scale(.93, 1.04); border-radius: 43% 57% 61% 39% / 48% 38% 62% 52%; }
    48% { transform: translateY(-7px) rotate(8deg) scale(1.06, .95); border-radius: 61% 39% 44% 56% / 37% 62% 38% 63%; }
    100% { transform: translateY(2px) rotate(21deg) scale(.97, 1.08); border-radius: 38% 62% 55% 45% / 59% 43% 57% 41%; }
}
@keyframes ring-breathe-b-fu13e77wvn { 50% { transform: scale(.88); opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    canvas[b-fu13e77wvn], .hologram-loader[b-fu13e77wvn] { transition: none; }
    .hologram-blob span[b-fu13e77wvn], .hologram-loader-ring[b-fu13e77wvn] { animation: none; }
}
@media (max-width: 600px) { hologram-portrait[b-fu13e77wvn] { height: 300px; } }
/* /Components/Portfolio/ImageLightbox.razor.rz.scp.css */
dialog[b-vhusnb5h6f] { max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 52px 16px 16px; border: 1px solid #41453c; border-radius: 10px; background: #151713; color: #e1e7d9; box-shadow: 0 20px 80px #0009; }
dialog[b-vhusnb5h6f]::backdrop { background: #000d; backdrop-filter: blur(5px); }
figure[b-vhusnb5h6f] { margin: 0; }
img[b-vhusnb5h6f] { display: block; width: auto; height: auto; max-width: min(1600px, calc(100vw - 60px)); max-height: calc(100dvh - 160px); object-fit: contain; margin: auto; }
figcaption[b-vhusnb5h6f] { margin-top: 12px; max-width: 100%; text-align: center; font-size: 12px; line-height: 1.6; }
.lightbox-close[b-vhusnb5h6f] { position: absolute; top: 6px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid #505746; border-radius: 6px; background: #252b20; color: #e1e7d9; font-size: 28px; cursor: pointer; }
.lightbox-close:hover[b-vhusnb5h6f] { border-color: var(--green); color: var(--green); }
.lightbox-close:focus-visible[b-vhusnb5h6f] { outline: 2px solid var(--green); outline-offset: 2px; }
/* /Components/Portfolio/MaterialWorkflows.razor.rz.scp.css */
.material-workflows[b-h58cklq5sd] { margin: 30px 0; padding: clamp(16px, 3vw, 26px); border: 1px solid var(--border); border-radius: 7px; background: #161914; }
figcaption[b-h58cklq5sd] { margin-bottom: 21px; }
figcaption > span[b-h58cklq5sd], .workflow-label[b-h58cklq5sd], .channel-heading > span[b-h58cklq5sd] { color: #94ad7e; font: 8px/1.8 var(--mono); letter-spacing: .04em; }
figcaption strong[b-h58cklq5sd] { display: block; margin-top: 7px; color: #e0e7d7; font: 500 21px/1.5 var(--sans); }
.workflow-columns[b-h58cklq5sd] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.workflow[b-h58cklq5sd] { padding: 18px; border: 1px solid #343d2c; border-radius: 5px; background: #1b2017; }
.workflow-used[b-h58cklq5sd] { border-color: #617e49; background: #212c1a; }
h3[b-h58cklq5sd] { margin: 9px 0 19px; color: #dbe6d1; font: 500 16px/1.6 var(--sans); }
dl[b-h58cklq5sd] { margin: 0; }
dl > div + div[b-h58cklq5sd] { margin-top: 15px; }
dt[b-h58cklq5sd] { color: #c3d1b6; font: 10px/1.6 var(--mono); }
dd[b-h58cklq5sd] { margin: 4px 0 0; color: #a1ad95; font-size: 12px; line-height: 1.7; }
p[b-h58cklq5sd] { color: #a2ad98; font-size: 11px; line-height: 1.9; }
.workflow > p[b-h58cklq5sd] { margin: 20px 0 0; padding-top: 13px; border-top: 1px solid #38442e; }
.workflow-note[b-h58cklq5sd] { margin: 17px 0 22px; }
.channel-map[b-h58cklq5sd] { padding-top: 19px; border-top: 1px solid #37452b; }
.channel-heading[b-h58cklq5sd] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
code[b-h58cklq5sd] { font: 11px/1.8 var(--mono); color: #c5dcaf; overflow-wrap: anywhere; }
.channel-values[b-h58cklq5sd] { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 17px 0; }
.channel-values > div[b-h58cklq5sd] { display: flex; flex-direction: column; gap: 9px; color: #bbcaaa; font-size: 11px; line-height: 1.7; }
.channel-badges[b-h58cklq5sd] { display: flex; gap: 4px; }
.channel-badges b[b-h58cklq5sd] { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #82584e; border-radius: 3px; color: #e8aaa0; background: #342621; font: 11px/1 var(--mono); }
.channel-badges b:nth-child(2)[b-h58cklq5sd] { color: #b9d796; border-color: #68804f; background: #27331c; }
.channel-badges b:nth-child(3)[b-h58cklq5sd] { color: #a3b7df; border-color: #53698f; background: #232d3d; }
.channel-alpha b[b-h58cklq5sd] { color: #d4dacd; border-color: #6a7560; background: #30382a; }
.channel-map > p[b-h58cklq5sd] { margin: 0 0 13px; }
.extension-name[b-h58cklq5sd] { display: block; color: #9fb889; font-size: 9px; }
@media (max-width: 600px) {
    .workflow-columns[b-h58cklq5sd] { grid-template-columns: 1fr; }
    .workflow[b-h58cklq5sd] { padding: 17px; }
}
/* /Components/Portfolio/ModelViewer.razor.rz.scp.css */
skin-viewer[b-fnr8dmlrt1] { display: block; min-width: 0; container-type: inline-size; }
.viewer-stage[b-fnr8dmlrt1] { position: relative; aspect-ratio: 1 / 1.12; overflow: hidden; border: 1px solid #485637; border-radius: 6px; background: radial-gradient(ellipse at 50% 45%, #303c29, #181d16 80%); }
.viewer-fallback[b-fnr8dmlrt1] { display: block; width: 100%; height: 100%; object-fit: contain; padding: 25px 16px 35px; }
.stage-label[b-fnr8dmlrt1] { position: absolute; bottom: 13px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 16px); padding: 4px 9px; border-radius: 3px; background: #10130ddd; text-align: center; white-space: nowrap; pointer-events: none; color: #e0e6dc; font: 8px/1.8 var(--mono); letter-spacing: .13em; }
canvas[b-fnr8dmlrt1] { display: block; position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; visibility: hidden; cursor: grab; }
canvas:active[b-fnr8dmlrt1] { cursor: grabbing; }
canvas:focus-visible[b-fnr8dmlrt1] { outline: 2px solid var(--green); outline-offset: -5px; }
.viewer-overlay[b-fnr8dmlrt1] { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 20px; background: #141910cc; text-align: center; }
.viewer-status[b-fnr8dmlrt1] { color: #d3dcc9; font-size: 12px; line-height: 1.7; }
skin-viewer[data-state="ready"] canvas[b-fnr8dmlrt1] { visibility: visible; }
skin-viewer[data-state="ready"] .viewer-fallback[b-fnr8dmlrt1], skin-viewer[data-state="ready"] .viewer-overlay[b-fnr8dmlrt1] { display: none; }
button[b-fnr8dmlrt1] { border: 1px solid #414b36; border-radius: 4px; background: #20251c; color: #c4d5b1; cursor: pointer; }
button:hover:not(:disabled)[b-fnr8dmlrt1] { border-color: var(--green); color: var(--green); }
button:disabled[b-fnr8dmlrt1] { opacity: .4; cursor: default; }
.viewer-retry[b-fnr8dmlrt1] { padding: 8px 12px; font: 11px/1.5 var(--sans); }
.material-study[b-fnr8dmlrt1] { padding: clamp(16px, 3vw, 26px); border: 1px solid #3b4632; border-radius: 8px; background: #161914; }
.study-heading[b-fnr8dmlrt1] { display: flex; justify-content: space-between; gap: 15px; align-items: center; }
.study-heading div > span[b-fnr8dmlrt1] { color: var(--green); font: 9px/1.8 var(--mono); letter-spacing: .05em; }
.study-heading h3[b-fnr8dmlrt1] { color: #e1e7d9; margin: 8px 0; font: 500 22px/1.4 var(--sans); }
.stage-counter[b-fnr8dmlrt1] { flex-shrink: 0; color: #8dab72; font: 10px/1.8 var(--mono); }
.study-intro[b-fnr8dmlrt1] { margin: 4px 0 25px; color: #b5c1aa; font-size: 14px; line-height: 1.8; }
.material-study .viewer-layout[b-fnr8dmlrt1] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); align-items: start; gap: 28px; }
.viewer-column[b-fnr8dmlrt1] { min-width: 0; }
.material-study .viewer-column[b-fnr8dmlrt1] { width: 100%; max-width: 520px; justify-self: end; }
.material-study .viewer-stage[b-fnr8dmlrt1] { aspect-ratio: 1; }
.material-steps[b-fnr8dmlrt1] { display: flex; flex-direction: column; align-self: stretch; gap: 10px; }
.material-step[b-fnr8dmlrt1] { display: flex; flex: 1; align-items: center; gap: 14px; width: 100%; min-width: 0; min-height: 88px; padding: 14px 16px; border: 2px solid #526343; border-radius: 8px; text-align: left; background: linear-gradient(120deg, #272f21, #1d2419); box-shadow: 0 3px 0 #0c100a; transition: border-color .15s, background .15s, transform .15s; }
.material-step:hover:not(:disabled)[b-fnr8dmlrt1] { border-color: var(--green); background: #303e24; transform: translateY(-2px); }
.material-step:focus-visible[b-fnr8dmlrt1] { outline: 2px solid var(--green); outline-offset: 3px; }
.material-step[aria-pressed="true"][b-fnr8dmlrt1] { border-color: var(--green); background: #324625; box-shadow: inset 4px 0 var(--green), 0 3px 0 #0c100a; }
.material-step[data-included="true"] .material-index[b-fnr8dmlrt1] { color: var(--green); }
.material-index[b-fnr8dmlrt1] { color: #96a989; font: 11px/1.6 var(--mono); }
.material-step-label[b-fnr8dmlrt1] { flex: 1; min-width: 0; }
.material-step-label strong[b-fnr8dmlrt1] { color: #eef4e7; font: 600 16px/1.4 var(--sans); }
.material-preview[b-fnr8dmlrt1] { display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 56px; overflow: hidden; border: 1px solid #596c49; border-radius: 5px; background: #12180e; }
.material-preview img[b-fnr8dmlrt1], .material-preview svg[b-fnr8dmlrt1] { width: 100%; height: 100%; object-fit: contain; }
.material-preview svg[b-fnr8dmlrt1] { padding: 8px; stroke: #b9d897; stroke-width: 1.1; }
.material-step img[hidden][b-fnr8dmlrt1] { display: none; }
.material-action[b-fnr8dmlrt1] { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; color: #d3e8bd; font: 500 11px/1.4 var(--sans); }
[data-stage-icon][b-fnr8dmlrt1] { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #78945f; border-radius: 50%; color: #e4f4d6; font-size: 17px; }
.material-step[aria-pressed="true"] [data-stage-icon][b-fnr8dmlrt1] { background: var(--green); border-color: var(--green); color: #17200f; }
.material-description[b-fnr8dmlrt1] { margin-top: 22px; padding-top: 20px; border-top: 1px solid #36422c; min-height: 124px; }
.material-description strong[b-fnr8dmlrt1] { color: #d4e3c5; font-size: 15px; font-weight: 500; line-height: 1.6; }
.material-description p[b-fnr8dmlrt1] { margin: 9px 0 0; color: #a4ad9a; font-size: 15px; line-height: 1.95; }
@container (max-width: 880px) {
    .material-study .viewer-layout[b-fnr8dmlrt1] { grid-template-columns: 1fr; }
    .material-study .viewer-column[b-fnr8dmlrt1] { justify-self: center; }
    .material-steps[b-fnr8dmlrt1] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .material-step[b-fnr8dmlrt1] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px; }
    .material-index[b-fnr8dmlrt1] { display: none; }
    .material-preview[b-fnr8dmlrt1] { grid-column: 1; grid-row: 1; width: 48px; height: 48px; }
    .material-action[b-fnr8dmlrt1] { grid-column: 2; grid-row: 1; }
    .material-step-label[b-fnr8dmlrt1] { grid-column: 1 / -1; grid-row: 2; }
    .material-step-label strong[b-fnr8dmlrt1] { font-size: 15px; }
}
@container (max-width: 440px) {
    .material-step[b-fnr8dmlrt1] { padding: 12px; gap: 10px; }
    .material-preview[b-fnr8dmlrt1] { width: 40px; height: 40px; }
    [data-stage-action][b-fnr8dmlrt1] { display: none; }
    .material-step-label strong[b-fnr8dmlrt1] { font-size: 14px; }
    .study-heading h3[b-fnr8dmlrt1] { font-size: 19px; }
}
@media (max-width: 560px) {
    .viewer-stage[b-fnr8dmlrt1] { aspect-ratio: 1; }
}
/* /Components/Portfolio/ProjectCard.razor.rz.scp.css */
.project-row[b-6fyt74b1ke] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: stretch; }
.project-row + .project-row[b-6fyt74b1ke] { padding-top: 44px; border-top: 1px solid var(--border); }
.project-row > div[b-6fyt74b1ke] { min-width: 0; }
.project-media[b-6fyt74b1ke] { position: relative; align-self: start; overflow: hidden; border: 1px solid #343431; border-radius: 10px; background: #101110; }
.project-thumbnail[b-6fyt74b1ke] { display: block; width: 100%; height: auto; }
video.project-thumbnail[b-6fyt74b1ke] { object-fit: contain; object-position: center; }
.project-media[b-6fyt74b1ke]  .project-cover { border: 0; border-radius: 0; }
.project-content[b-6fyt74b1ke] { display: flex; flex-direction: column; }
.project-content > .button-row[b-6fyt74b1ke] { margin-top: auto; }
.project-content h3[b-6fyt74b1ke] { margin: 0; font-size: clamp(27px, 2.5vw, 34px); font-weight: 600; letter-spacing: -.035em; }
.project-content h3 a:hover[b-6fyt74b1ke] { color: var(--green); }
.project-subtitle[b-6fyt74b1ke] { margin-top: 7px; color: #bcbcb5; font: 12px/1.6 var(--mono); }
.project-outcome[b-6fyt74b1ke] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; margin: -8px 0 25px; color: var(--muted); font: 11px/1.7 var(--mono); }
.project-outcome strong[b-6fyt74b1ke] { color: var(--green); font-size: 17px; font-weight: 500; }
.project-description[b-6fyt74b1ke] { color: var(--muted); line-height: 1.8; font-size: 15px; margin-bottom: 28px; }
.example-label[b-6fyt74b1ke] { display: inline-block; margin-left: 7px; border: 1px solid #3c422f; border-radius: 3px; padding: 0 5px; color: #a2b38b; font-size: 9px; }
.project-row:nth-child(even)[b-6fyt74b1ke] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
.project-row:nth-child(even) .project-media[b-6fyt74b1ke] { order: 2; }
@media (max-width: 1000px) {
    .project-row[b-6fyt74b1ke], .project-row:nth-child(even)[b-6fyt74b1ke] { grid-template-columns: 1fr; gap: 25px; }
    .project-row + .project-row[b-6fyt74b1ke] { padding-top: 32px; }
    .project-row:nth-child(even) .project-media[b-6fyt74b1ke] { order: 0; }
    .project-media[b-6fyt74b1ke]  .project-cover { min-height: 0; }
}
/* /Components/Portfolio/ProjectCover.razor.rz.scp.css */
.project-cover[b-nct38j0m3d] { position: relative; isolation: isolate; overflow: hidden; width: 100%; min-width: 0; min-height: 290px; aspect-ratio: 800 / 520; display: flex; align-items: center; justify-content: center; flex-direction: column; border: 1px solid #363c2f; border-radius: 6px; background: radial-gradient(ellipse at 50% 20%, #2b3422, #181c16 68%); padding: 36px 24px; }
.cover-grid[b-nct38j0m3d] { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(#91b96008 1px, transparent 1px), linear-gradient(90deg, #91b96008 1px, transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(#000, transparent); }
.cover-label[b-nct38j0m3d] { position: absolute; top: 20px; left: 22px; font: 9px/1.5 var(--mono); color: #94a47f; letter-spacing: .12em; }
.cover-orbit[b-nct38j0m3d] { width: 160px; height: 110px; margin: 2px 0 4px; stroke: #8bc34a; stroke-width: .9; opacity: .65; }
.orbit-point[b-nct38j0m3d] { fill: #a5d46e; stroke: none; }
.cover-title[b-nct38j0m3d] { font: 600 clamp(30px, 4vw, 43px)/1.2 var(--sans); letter-spacing: -.055em; color: #e2ead7; overflow-wrap: anywhere; text-align: center; }
.cover-subtitle[b-nct38j0m3d] { color: #a9b69b; font: 10px/1.7 var(--mono); margin-top: 9px; text-align: center; }
.cover-footnote[b-nct38j0m3d] { position: absolute; bottom: 18px; font: 9px/1.5 var(--mono); color: #94a088; }
/* /Components/Portfolio/ProjectGallery.razor.rz.scp.css */
.project-gallery[b-lgx63zyyo8] { position: relative; overflow: hidden; width: 100%; margin: 0; border: 1px solid #343431; border-radius: 6px; background: #171817; }
.gallery-stage[b-lgx63zyyo8] { position: relative; }
.gallery-image-preview[b-lgx63zyyo8] { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.gallery-image-preview:focus-visible[b-lgx63zyyo8] { outline: 2px solid var(--green); outline-offset: -3px; }
img[b-lgx63zyyo8] { display: block; width: 100%; height: auto; aspect-ratio: 800 / 520; object-fit: contain; }
.natural-size img[b-lgx63zyyo8] { aspect-ratio: auto; }
.gallery-caption[b-lgx63zyyo8] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 9px 15px; border-top: 1px solid #30312c; padding: 13px 16px; color: #a8ada1; font-size: 11px; line-height: 1.7; }
.gallery-arrow[b-lgx63zyyo8] { position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #ffffff28; border-radius: 50%; color: white; background: #121212bd; transition: background .18s; }
.gallery-arrow:hover[b-lgx63zyyo8] { background: var(--green); color: #121212; }
.gallery-arrow:disabled[b-lgx63zyyo8] { opacity: .45; }
.previous[b-lgx63zyyo8] { left: 14px; }
.next[b-lgx63zyyo8] { right: 14px; }
.gallery-dots[b-lgx63zyyo8] { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; padding: 2px 5px; border-radius: 12px; background: #121212c9; }
.gallery-dot[b-lgx63zyyo8] { border: 0; background: transparent; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; }
.gallery-dot[b-lgx63zyyo8]::after { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: #b5b5b0; }
.gallery-dot.active[b-lgx63zyyo8]::after { background: var(--green); }
.empty-preview[b-lgx63zyyo8] { aspect-ratio: 800 / 520; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; font: 14px var(--mono); color: var(--muted); }
.empty-preview span[b-lgx63zyyo8] { font-size: 48px; color: var(--green); }
/* /Components/Portfolio/SkinComparison.razor.rz.scp.css */
.skin-comparison[b-ulj0erdsno] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 30px 0; }
.comparison-panel[b-ulj0erdsno] { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: #191c17; }
.interactive-preview[b-ulj0erdsno] { border-color: #485637; }
figcaption[b-ulj0erdsno] { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-bottom: 1px solid var(--border); }
figcaption strong[b-ulj0erdsno] { color: #e4e7dc; font: 600 20px/1.35 var(--sans); }
figcaption span[b-ulj0erdsno] { color: #bec3b7; font: 400 15px/1.6 var(--sans); }
.interactive-preview figcaption strong[b-ulj0erdsno] { color: var(--green); }
.preview-stage[b-ulj0erdsno] { position: relative; aspect-ratio: 1; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #2b2e28, #191b18 78%); }
.preview-stage img[b-ulj0erdsno] { display: block; width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.interactive-preview[b-ulj0erdsno]  .viewer-stage { aspect-ratio: 1; border: 0; border-radius: 0; }
.interactive-preview[b-ulj0erdsno]  .viewer-fallback { padding: 20px; }
@media (max-width: 640px) {
    .skin-comparison[b-ulj0erdsno] { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .comparison-panel[b-ulj0erdsno] { grid-row: auto; grid-template-rows: auto auto; }
    figcaption[b-ulj0erdsno] { padding: 18px 20px; }
}
/* /Components/Portfolio/SkinPipeline.razor.rz.scp.css */
.skin-pipeline[b-0tavnifhjy] { margin: 30px 0 34px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--border); border-radius: 8px; background: #161815; }
figcaption[b-0tavnifhjy] { margin-bottom: 26px; }
figcaption > span[b-0tavnifhjy] { display: block; color: var(--green); font: 9px/1.8 var(--mono); letter-spacing: .07em; }
figcaption strong[b-0tavnifhjy] { display: block; margin-top: 8px; color: #e0e5d9; font: 500 20px/1.5 var(--sans); }
.step-number[b-0tavnifhjy] { flex: 0 0 auto; color: var(--green); font: 10px/1.8 var(--mono); }
.release-step[b-0tavnifhjy] { display: flex; align-items: baseline; gap: 15px; padding: 16px 19px; border: 1px solid #323a2b; border-radius: 4px; background: #1c2118; }
strong[b-0tavnifhjy] { color: #d6dacf; font-size: 13px; font-weight: 500; }
.release-step strong[b-0tavnifhjy], .release-step div > span[b-0tavnifhjy] { display: block; }
.release-step div > span[b-0tavnifhjy], .input-node > span:last-child[b-0tavnifhjy], .output-steps > div > span:last-child[b-0tavnifhjy] { margin-top: 5px; color: #969f8e; font-size: 11px; line-height: 1.8; }
.pipeline-arrow[b-0tavnifhjy] { padding: 9px; color: #6d8555; text-align: center; font-size: 21px; }
.pipeline-inputs[b-0tavnifhjy] { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 8px; align-items: center; }
.input-node[b-0tavnifhjy] { display: flex; flex-direction: column; align-self: stretch; gap: 5px; padding: 18px 14px; border: 1px solid #33392e; border-radius: 5px; background: #1b1e18; }
.input-node svg[b-0tavnifhjy] { width: 32px; height: 32px; margin-bottom: 10px; stroke: #93ad76; stroke-width: 1.3; }
.node-source[b-0tavnifhjy] { color: #86947a; font: 8px/1.8 var(--mono); letter-spacing: .05em; }
.input-plus[b-0tavnifhjy] { color: var(--green); text-align: center; font: 19px/1 var(--mono); }
.merge-line[b-0tavnifhjy] { position: relative; height: 43px; margin: 0 22%; border-bottom: 1px solid #425136; }
.merge-line[b-0tavnifhjy]::before, .merge-line[b-0tavnifhjy]::after { content: ''; position: absolute; top: 0; height: 22px; border-left: 1px solid #425136; }
.merge-line[b-0tavnifhjy]::before { left: 0; }.merge-line[b-0tavnifhjy]::after { right: 0; }
.merge-line[b-0tavnifhjy] { border-bottom: 0; background: linear-gradient(#425136, #425136) center 22px / 100% 1px no-repeat; }
.merge-line span[b-0tavnifhjy] { position: absolute; left: calc(50% - 10px); top: 20px; color: #93ad76; font-size: 19px; }
.glb-node[b-0tavnifhjy] { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid #4b603b; border-radius: 5px; background: linear-gradient(110deg, #25321d, #1b2217); }
.glb-node strong[b-0tavnifhjy] { display: block; margin: 4px 0 12px; color: #d5edbf; font: 500 23px/1.3 var(--mono); }
.glb-parts[b-0tavnifhjy] { display: flex; flex-wrap: wrap; gap: 6px; }
.glb-parts span[b-0tavnifhjy] { padding: 3px 6px; border: 1px solid #405135; color: #acbb9f; font: 9px/1.6 var(--mono); }
.file-mark[b-0tavnifhjy] { margin-left: auto; color: #496035; font: 500 30px/1 var(--mono); }
.output-steps[b-0tavnifhjy] { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 12px; }
.output-steps > div[b-0tavnifhjy] { display: flex; flex-direction: column; gap: 5px; }
.output-arrow[b-0tavnifhjy] { align-self: center; color: #93ad76; }
@media (max-width: 420px) {
    .file-mark[b-0tavnifhjy] { display: none; }
    .input-node[b-0tavnifhjy] { padding: 14px 10px; }
    .node-source[b-0tavnifhjy] { font-size: 7px; }
    .pipeline-inputs[b-0tavnifhjy] { gap: 5px; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); }
    .glb-node[b-0tavnifhjy] { padding: 16px; }
}
/* /Components/Portfolio/StoryMedia.razor.rz.scp.css */
figure[b-slgk4w0w6b] { margin: 27px 0 32px; min-width: 0; }
.story-image[b-slgk4w0w6b] { overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: #171817; }
.story-image-link[b-slgk4w0w6b] { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.story-image-link:focus-visible[b-slgk4w0w6b] { outline: 2px solid var(--green); outline-offset: -3px; }
img[b-slgk4w0w6b] { display: block; width: 100%; height: auto; object-fit: contain; }
figcaption[b-slgk4w0w6b] { color: #a8ada1; font-size: 11px; line-height: 1.7; }
.story-image figcaption[b-slgk4w0w6b] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 9px 15px; border-top: 1px solid var(--border); padding: 13px 16px; }
video[b-slgk4w0w6b] { display: block; width: 100%; height: auto; max-height: 600px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: #181818; }
.project-video figcaption[b-slgk4w0w6b] { margin-top: 9px; }
.material-lab[b-slgk4w0w6b] { margin: 30px 0; }
/* /Components/Portfolio/StoryMediaGroup.razor.rz.scp.css */
.story-image-group[b-wqnl4irvge] { display: grid; grid-template-columns: var(--image-columns, repeat(2, minmax(0, 1fr))); align-items: stretch; gap: 16px; margin: 27px 0 32px; }
.story-image-group[b-wqnl4irvge]  figure { display: flex; flex-direction: column; margin: 0; }
.story-image-group[b-wqnl4irvge]  figcaption { flex: 1; align-content: start; }
@media (max-width: 560px) {
    .story-image-group[b-wqnl4irvge] { grid-template-columns: 1fr; }
}
/* /Components/Portfolio/TechnologyStack.razor.rz.scp.css */
technology-stack[b-yai1h92nzp] { display: block; margin: 18px 0 25px; }
.technology-list[b-yai1h92nzp] { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.technology-item[b-yai1h92nzp] { position: relative; }
.technology-mark[b-yai1h92nzp] { display: grid; place-items: center; width: 52px; height: 52px; padding: 8px; border: 1px solid #363936; border-radius: 10px; background: #202320; cursor: pointer; transition: background .16s, border-color .16s; }
.technology-mark img[b-yai1h92nzp] { display: block; width: 32px; height: 32px; object-fit: contain; }
.technology-mark img.technology-babylon[b-yai1h92nzp] { width: 50px; height: 50px; max-width: none; margin: -9px; }
.technology-mark:has(.technology-text)[b-yai1h92nzp] { width: auto; min-width: 52px; }
.technology-text[b-yai1h92nzp] { color: var(--text); font: 11px/1.5 var(--mono); }
.technology-mark:hover[b-yai1h92nzp], .technology-mark:focus-visible[b-yai1h92nzp], [data-open] .technology-mark[b-yai1h92nzp] { background: #2b3028; border-color: #71865c; }
.technology-mark:focus-visible[b-yai1h92nzp] { outline: 2px solid var(--green); outline-offset: 3px; }
.technology-tooltip[b-yai1h92nzp] { position: absolute; z-index: 10; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%); width: max-content; max-width: min(200px, 75vw); padding: 7px 11px; border: 1px solid #495140; border-radius: 6px; background: #252b20; color: #f1f5eb; box-shadow: 0 5px 20px #0005; font: 11px/1.5 var(--mono); text-align: center; visibility: hidden; opacity: 0; pointer-events: none; }
.technology-tooltip[b-yai1h92nzp]::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.technology-item:first-child .technology-tooltip[b-yai1h92nzp] { left: 0; transform: none; }
[data-open] .technology-tooltip[b-yai1h92nzp],
technology-stack:not([data-enhanced]) .technology-item:hover .technology-tooltip[b-yai1h92nzp],
technology-stack:not([data-enhanced]) .technology-item:focus-within .technology-tooltip[b-yai1h92nzp] { visibility: visible; opacity: 1; pointer-events: auto; }
@media (max-width: 420px) { .technology-list[b-yai1h92nzp] { gap: 8px; } .technology-mark[b-yai1h92nzp] { width: 46px; height: 46px; padding: 6px; } }
@media (prefers-reduced-motion: reduce) { .technology-mark[b-yai1h92nzp] { transition: none; } }