*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0}
body.project-detail-page{
  --pd-bg:#0c0c0d;
  --pd-panel-bg:radial-gradient(circle at 91% 6%,rgba(255,194,0,.12),transparent 30%),linear-gradient(135deg,#0b0c0b 0%,#121411 52%,#060606 100%);
  --pd-text:#f7f3ea;
  --pd-title:#fbf7ed;
  --pd-muted:#eee5d2;
  --pd-copy:#ddd4c3;
  --pd-copy-strong:#f0eadc;
  --pd-copy-soft:#bdb39f;
  --pd-rule:rgba(255,210,31,.22);
  --pd-accent:#ffd21f;
  --pd-accent-strong:#ffe46c;
  --pd-accent-dark:#111111;
  --pd-chip-bg:rgba(255,255,255,.09);
  --pd-chip-border:rgba(255,255,255,.13);
  --pd-gallery-border:rgba(255,255,255,.08);
  --pd-control-text:#f7f3ea;
  --pd-next-link:#c8782d;
  --pd-next-link-hover:#e0a04b;
  --pd-linkedin:#0a66c2;
  font-family:"Maven Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--pd-bg);
  color:var(--pd-text);
  overflow:hidden;
}
body.project-light-mode{
  --pd-bg:#f4efe2;
  --pd-panel-bg:radial-gradient(circle at 91% 6%,rgba(255,159,28,.16),transparent 28%),linear-gradient(135deg,#fff9ec 0%,#f2eadb 100%);
  --pd-text:#17181d;
  --pd-title:#17181d;
  --pd-muted:#24262d;
  --pd-copy:#24262b;
  --pd-copy-strong:#17181d;
  --pd-copy-soft:#575347;
  --pd-rule:rgba(154,112,0,.28);
  --pd-accent:#9a7000;
  --pd-accent-strong:#6e5000;
  --pd-accent-dark:#17181d;
  --pd-chip-bg:rgba(0,0,0,.06);
  --pd-chip-border:rgba(0,0,0,.13);
  --pd-gallery-border:rgba(0,0,0,.16);
  --pd-control-text:#17181d;
  --pd-next-link:#8f4f1b;
  --pd-next-link-hover:#b86b27;
}
.project-detail-layout{width:100vw;height:100vh;height:100dvh;display:grid;grid-template-columns:minmax(360px,33.333vw) minmax(0,1fr);overflow:hidden;background:var(--pd-bg)}
.project-gallery-panel{height:100vh;height:100dvh;background:#050505;overflow:hidden;border-right:1px solid var(--pd-gallery-border)}
.project-gallery-scroll{height:100%;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;padding:.45rem;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y}
.project-gallery-scroll::-webkit-scrollbar{display:none}
.project-gallery-inner{min-height:100%;display:block}
.project-gallery-sequence{display:block}
.project-gallery-scroll.is-dragging{cursor:grabbing;scroll-behavior:auto}
.project-masonry-gallery{display:block;width:100%;column-count:3;column-gap:.18rem;line-height:0}
.project-masonry-gallery + .project-masonry-gallery{margin-top:.18rem}
.project-masonry-gallery img{display:block;width:100%;height:auto;margin:0 0 .18rem;border:.42rem solid #0c0c0d;border-radius:1.05rem;background:#111;box-shadow:0 10px 28px rgba(0,0,0,.35);break-inside:avoid;page-break-inside:avoid;-webkit-column-break-inside:avoid;-webkit-user-drag:none;user-select:none;pointer-events:none}
.project-info-panel{height:100vh;height:100dvh;min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:clamp(1.15rem,2vw,2rem) clamp(1.4rem,5vw,5.4rem) clamp(1.1rem,2vw,2rem);background:var(--pd-panel-bg);overflow:hidden}
.project-detail-topbar{min-height:44px;display:flex;justify-content:space-between;align-items:center;gap:1.2rem;position:relative;z-index:5}
.project-nav-actions{display:inline-flex;align-items:center;justify-content:space-between;gap:.72rem;width:100%;max-width:790px;min-width:0;flex:0 1 790px}
.back-to-projects,.next-project-link{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;font-size:clamp(1rem,.9vw,1.08rem);font-weight:900;letter-spacing:.01em;line-height:1.05;white-space:nowrap;transition:color .2s ease,transform .2s ease}
.back-to-projects{color:var(--pd-accent)}
.back-to-projects .back-arrow-desktop,
.back-to-projects .back-arrow-mobile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.back-to-projects .back-arrow-mobile{
  display:none;
}
@media (max-width:900px){
  .back-to-projects .back-arrow-desktop{
    display:none;
  }
  .back-to-projects .back-arrow-mobile{
    display:inline-flex;
    transform:rotate(180deg);
    transform-origin:center center;
  }
}

.back-to-projects:hover{color:var(--pd-accent-strong);transform:translateX(-2px);text-decoration:none}
.next-project-link{justify-content:flex-end;margin-left:auto;color:var(--pd-next-link);text-align:right}
.next-project-link:hover{color:var(--pd-next-link-hover);transform:translateX(2px);text-decoration:none}
.project-detail-controls{display:inline-flex;align-items:center;gap:.9rem;flex:0 0 auto}
.project-language-selector{position:relative;display:inline-flex;align-items:center;justify-content:center;z-index:10}
.project-language-toggle,.project-theme-toggle{border:0;outline:0;appearance:none;-webkit-appearance:none;width:38px;height:38px;min-width:38px;border-radius:999px;display:grid;place-items:center;padding:0;background:rgba(255,255,255,.07);color:var(--pd-control-text);cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.16);transition:transform .18s ease,background .18s ease,box-shadow .18s ease,opacity .18s ease}
.project-language-toggle:hover,.project-language-toggle:focus-visible,.project-theme-toggle:hover,.project-theme-toggle:focus-visible{transform:translateY(-1px);opacity:1;background:rgba(255,194,0,.14);box-shadow:inset 0 0 0 1px rgba(255,194,0,.28),0 12px 28px rgba(0,0,0,.2)}
.project-light-mode .project-language-toggle,.project-light-mode .project-theme-toggle{background:rgba(0,0,0,.045);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),0 10px 24px rgba(0,0,0,.08)}
.project-light-mode .project-language-toggle:hover,.project-light-mode .project-language-toggle:focus-visible,.project-light-mode .project-theme-toggle:hover,.project-light-mode .project-theme-toggle:focus-visible{background:rgba(255,194,0,.18);box-shadow:inset 0 0 0 1px rgba(154,112,0,.2),0 12px 28px rgba(0,0,0,.1)}
.project-language-current-img,.project-language-option-img{display:block;width:24px;height:24px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.project-language-menu{position:absolute;top:calc(100% + 10px);right:0;display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;border-radius:999px;background:rgba(8,9,8,.96);border:1px solid rgba(255,194,0,.24);box-shadow:0 20px 60px rgba(0,0,0,.48);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.project-light-mode .project-language-menu{background:rgba(255,250,240,.98);border-color:rgba(0,0,0,.14);box-shadow:0 20px 60px rgba(0,0,0,.16)}
.project-language-selector.is-open .project-language-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.project-language-option{border:0;outline:0;background:transparent;width:30px;height:30px;min-width:30px;border-radius:999px;display:grid;place-items:center;padding:0;cursor:pointer;opacity:.72;transition:opacity .18s ease,transform .18s ease,box-shadow .18s ease}
.project-language-option:hover,.project-language-option:focus-visible,.project-language-option.active{opacity:1;transform:translateY(-1px)}
.project-language-option.active{box-shadow:0 0 0 2px rgba(255,194,0,.46)}
.project-theme-toggle .color-mode-icon{position:relative;width:34px;height:34px;display:flex;align-items:center;justify-content:center;font-style:normal;line-height:1}
.project-theme-toggle .color-mode-icon::after{font-family:'unicons';display:block;width:34px;height:34px;text-align:center;line-height:34px;font-size:25px;font-weight:300;content:"\eb65";color:var(--pd-control-text)}
.project-light-mode .project-theme-toggle .color-mode-icon::after{content:"\ea9f";color:var(--pd-control-text)}
.project-detail-copy{align-self:center;width:100%;max-width:790px;padding:clamp(.55rem,1vw,.95rem) 0 .25rem;overflow-y:auto;overflow-x:hidden;max-height:100%;scrollbar-width:none}
.project-detail-copy::-webkit-scrollbar{display:none}
.project-kicker{margin:0 0 .9rem;color:var(--pd-accent);text-transform:uppercase;letter-spacing:.16em;font-size:clamp(.88rem,.82vw,1.02rem);font-weight:900;line-height:1.25}
.project-detail-copy h1{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;margin:0;max-width:820px;color:var(--pd-title);font-size:clamp(2.9rem,4.75vw,4.95rem);line-height:.96;letter-spacing:-.064em;font-weight:900;text-wrap:balance}
.project-meta-line{display:flex;align-items:center;gap:.72rem;margin:1.15rem 0 1.05rem;flex-wrap:wrap}
.project-status-badge,.project-data-badge{display:inline-flex;align-items:center;min-height:28px;border-radius:999px;padding:.3rem .78rem;font-weight:900;font-size:.84rem;line-height:1}
.project-status-badge{background:rgba(0,178,99,.22);color:#e6fff3;border:1px solid rgba(0,178,99,.38)}
.project-data-badge{background:rgba(194,41,132,.22);color:#ffe3f5;border:1px solid rgba(194,41,132,.38);gap:.25rem}
.project-light-mode .project-status-badge{background:rgba(0,145,80,.16);color:#005a33;border-color:rgba(0,145,80,.32)}
.project-light-mode .project-data-badge{background:rgba(176,24,104,.13);color:#8f0f54;border-color:rgba(176,24,104,.28)}
.project-lead{font-size:clamp(1.12rem,1.22vw,1.3rem);line-height:1.44;max-width:735px;margin:0 0 1.18rem;color:var(--pd-muted);font-weight:600;letter-spacing:-.012em;text-wrap:pretty}
.project-tags{display:flex;flex-wrap:wrap;gap:.72rem 1rem;margin:0 0 1.45rem;max-width:735px;align-items:flex-start}
.project-tech-logo-item{margin:0;display:inline-grid;grid-template-rows:56px auto;justify-items:center;align-items:start;gap:.28rem;width:72px;min-width:72px}
.project-tech-logo-media{width:56px;height:56px;display:grid;place-items:center}
.project-tech-logo-media img{display:block;max-width:56px;max-height:56px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 3px 7px rgba(0,0,0,.28))}
.project-tech-logo-label{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;width:100%;max-width:78px;min-height:1.28rem;color:var(--pd-copy-strong);font-size:.62rem;line-height:1.04;font-weight:900;text-align:center;letter-spacing:-.01em;text-wrap:balance}
.project-light-mode .project-tech-logo-label{color:#25231e}
.project-light-mode .project-tech-logo-media img{filter:drop-shadow(0 2px 5px rgba(0,0,0,.18))}
.project-text-block{max-width:720px;margin:0 0 1.08rem;padding-top:.05rem}
.project-text-block + .project-text-block{margin-top:.1rem}
.project-text-block h2{font-family:"IBM Plex Sans",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:18px;margin:0 0 .46rem;color:var(--pd-accent);font-weight:620;text-transform:uppercase;letter-spacing:.08em;line-height:1.4}
.project-text-block p,.project-text-block li{font-family:"IBM Plex Sans",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:18px;line-height:1.4;color:var(--pd-copy);font-weight:620;letter-spacing:-.004em;text-align:justify;text-justify:inter-word;hyphens:auto}
.project-text-block p{margin:0}
.project-text-block ul{margin:.08rem 0 0;padding-left:1.05rem}
.project-text-block li + li{margin-top:.12rem}
.project-text-block li::marker{color:var(--pd-accent)}
.project-detail-footer{align-self:end;width:100%;max-width:720px;padding-top:.85rem;color:var(--pd-copy);border-top:1px solid var(--pd-rule)}
.project-detail-actions{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;max-width:720px}
.project-detail-signature{margin:0 0 .72rem;max-width:720px;color:var(--pd-copy-soft);font-size:clamp(.7rem,.72vw,.78rem);font-weight:500;line-height:1.48;letter-spacing:.012em}
.project-light-mode .project-detail-signature{color:var(--pd-copy-soft)}
.project-action{min-height:46px;border-radius:999px;padding:.45rem .48rem .45rem 1.1rem;text-decoration:none;font-weight:950;font-size:.98rem;line-height:1;display:inline-flex;align-items:center;justify-content:space-between;gap:.95rem;transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease}
.project-action-primary{background:#ffd21f;color:#111;border:1px solid rgba(255,210,31,.92);box-shadow:0 18px 40px rgba(0,0,0,.28)}
.project-action-secondary{background:rgba(255,255,255,.03);color:#ffd21f;border:1.5px solid rgba(255,210,31,.72);box-shadow:none}
.project-action:hover{transform:translateY(-2px);text-decoration:none}
.project-action-primary:hover{background:#ffe46c;color:#111;box-shadow:0 20px 44px rgba(0,0,0,.34)}
.project-action-secondary:hover{background:rgba(255,210,31,.1);color:#fff0a8;border-color:#ffd21f}
.project-action-icon{width:34px;height:34px;min-width:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}
.project-action-icon-github{background:#111;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.project-action-icon-github img{width:21px;height:21px;display:block;object-fit:contain;filter:invert(1) brightness(1.12)}
.project-action-icon-linkedin{background:#0a66c2;color:#fff;font-weight:950;font-size:1rem;font-family:Arial,Helvetica,sans-serif;letter-spacing:-.03em}
.project-light-mode .project-action-primary{box-shadow:0 18px 36px rgba(0,0,0,.14)}
.project-light-mode .project-action-secondary{background:rgba(255,255,255,.28);color:#6e5000;border-color:rgba(110,80,0,.42)}
.project-light-mode .project-action-secondary:hover{background:rgba(255,210,31,.22);color:#17181d;border-color:#9a7000}
.project-action:focus-visible,.back-to-projects:focus-visible,.next-project-link:focus-visible,.project-language-toggle:focus-visible,.project-language-option:focus-visible,.project-theme-toggle:focus-visible,.project-gallery-scroll:focus-visible{outline:3px solid #ffd21f;outline-offset:3px}
@media (max-width:1400px){.project-masonry-gallery{column-count:3}.project-info-panel{padding-left:clamp(1.4rem,4vw,4rem);padding-right:clamp(1.4rem,4vw,4rem)}.project-detail-copy h1{font-size:clamp(2.72rem,4.65vw,4.55rem)}}
@media (max-width:1100px){.project-detail-layout{grid-template-columns:minmax(300px,34vw) minmax(0,1fr)}.project-detail-copy h1{font-size:clamp(2.45rem,4.65vw,4rem)}.project-lead{font-size:1.04rem;line-height:1.42}.project-text-block p,.project-text-block li{font-size:.94rem;line-height:1.48}}
@media (max-width:900px){body.project-detail-page{overflow:hidden}.project-detail-layout{grid-template-columns:25vw minmax(0,75vw);grid-template-rows:100vh;height:100vh;grid-template-rows:100dvh;height:100dvh}.project-gallery-panel{height:100vh;height:100dvh;border-right:1px solid var(--pd-gallery-border);border-bottom:0}.project-gallery-scroll{height:100vh;height:100dvh;padding:.28rem}.project-masonry-gallery{column-count:1;column-gap:0}.project-masonry-gallery + .project-masonry-gallery{margin-top:.14rem}.project-masonry-gallery img{margin-bottom:.14rem;border:.28rem solid #0c0c0d;border-radius:.7rem;box-shadow:0 8px 20px rgba(0,0,0,.28)}.project-info-panel{height:100vh;height:100dvh;padding:.95rem 1rem max(.9rem,env(safe-area-inset-bottom));overflow:hidden}.project-detail-topbar{align-items:center;min-height:38px;gap:.65rem}.project-nav-actions{gap:.48rem}.next-project-link{font-size:.82rem}.project-detail-controls{gap:.55rem}.project-language-toggle,.project-theme-toggle{width:36px;height:36px;min-width:36px}.project-language-current-img,.project-language-option-img{width:22px;height:22px}.project-theme-toggle .color-mode-icon,.project-theme-toggle .color-mode-icon::after{width:32px;height:32px;line-height:32px}.project-theme-toggle .color-mode-icon::after{font-size:24px}.project-detail-copy{align-self:start;overflow-y:auto;padding:.7rem 0 .15rem;max-height:100%;scrollbar-width:none}.project-detail-copy::-webkit-scrollbar{display:none}.project-detail-copy h1{font-size:clamp(1.85rem,8vw,3.05rem);letter-spacing:-.055em;line-height:.98}.project-lead{font-size:.95rem;line-height:1.38}.project-text-block p,.project-text-block li{font-size:.86rem;line-height:1.44;text-align:left;hyphens:none}.project-detail-footer{padding-top:.55rem}.project-detail-actions{gap:.65rem}.project-action{min-height:48px;width:100%}.project-action-secondary{justify-content:space-between}}
@media (max-width:520px){.project-gallery-scroll{padding:.2rem}.project-masonry-gallery{column-count:1}.project-masonry-gallery img{margin-bottom:.1rem;border:.2rem solid #0c0c0d;border-radius:.58rem}.project-info-panel{padding:.9rem .85rem max(.95rem,env(safe-area-inset-bottom))}.project-detail-topbar{gap:.55rem}.project-nav-actions{gap:.38rem}.back-to-projects,.next-project-link{font-size:.82rem;white-space:nowrap;letter-spacing:.01em}.project-language-menu{right:-4px}.project-kicker{font-size:.7rem;letter-spacing:.13em}.project-meta-line{gap:.45rem;margin:.8rem 0}.project-status-badge,.project-data-badge{font-size:.74rem}.project-tags{gap:.46rem .64rem;margin-bottom:1.05rem}.project-tech-logo-item{grid-template-rows:48px auto;width:58px;min-width:58px}.project-tech-logo-media{width:48px;height:48px}.project-tech-logo-media img{max-width:48px;max-height:48px}.project-tech-logo-label{max-width:62px;font-size:.54rem;line-height:1.04;min-height:1.12rem}.project-text-block{margin-bottom:.78rem}.project-text-block h2{font-size:.76rem;letter-spacing:.12em}.project-action{font-size:.9rem}.project-detail-signature{font-size:.61rem;line-height:1.36;margin:0 0 .55rem}}

.project-action-icon-dashboard{background:#ffffff;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.project-action-icon-dashboard img{width:22px;height:22px;display:block;object-fit:contain}
.project-action-icon-code{background:#111;color:#ffd21f;box-shadow:0 0 0 1px rgba(0,0,0,.12);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.72rem;font-weight:950;letter-spacing:-.02em}
.project-light-mode .project-action-icon-code{background:#17181d;color:#ffd21f}



.project-tech-popover{position:relative;max-width:720px;margin:0 0 1.22rem;z-index:4}.project-tech-popover-lower{margin:1.35rem 0 .15rem}
.project-tech-trigger{appearance:none;-webkit-appearance:none;border:0;background:transparent;color:inherit;padding:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}
.btn-ft.btn-style-28{position:relative;min-height:38px;border-radius:12px;padding:.28rem .32rem .28rem .92rem;display:inline-flex;align-items:center;justify-content:center;gap:.62rem;overflow:hidden;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:0 10px 24px rgba(0,0,0,.18),inset 0 0 0 1px rgba(255,255,255,.04);transition:transform .22s ease,border-color .22s ease,color .22s ease,box-shadow .22s ease}
.btn-ft.btn-style-28::after{content:"";position:absolute;top:0;bottom:0;left:-30%;width:28%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transform:skewX(-18deg);pointer-events:none;opacity:.95}
.btn-ft.btn-style-28 .label{position:relative;z-index:1;font-size:.72rem;line-height:1;font-weight:950;letter-spacing:.105em;text-transform:uppercase;white-space:nowrap}
.btn-ft.btn-style-28 .plus{position:relative;z-index:1;width:23px;height:23px;min-width:23px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#ffd21f;color:#101010;font-size:.92rem;font-weight:950;line-height:1;box-shadow:0 6px 12px rgba(0,0,0,.24);transition:transform .32s cubic-bezier(.2,.8,.2,1),background .22s ease,color .22s ease}
.btn-ft.btn-style-28:hover,.btn-ft.btn-style-28:focus-visible,.project-tech-popover.is-open .btn-ft.btn-style-28{transform:translateY(-1px);border-color:rgba(255,255,255,.34);color:#fff;box-shadow:0 14px 30px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.08)}
.btn-ft.btn-style-28:hover::after,.project-tech-popover.is-open .btn-ft.btn-style-28::after{animation:scan28 .8s ease}
.btn-ft.btn-style-28:focus-visible{outline:3px solid rgba(255,210,31,.72);outline-offset:3px}.project-tech-popover.is-open .btn-ft.btn-style-28 .plus{transform:rotate(45deg)}
.project-light-mode .btn-ft.btn-style-28{color:#2a2517;border-color:rgba(42,37,23,.18);box-shadow:0 10px 22px rgba(66,49,8,.12),inset 0 0 0 1px rgba(255,255,255,.32)}
.project-light-mode .btn-ft.btn-style-28::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.72),transparent)}
.project-light-mode .btn-ft.btn-style-28:hover,.project-light-mode .btn-ft.btn-style-28:focus-visible,.project-light-mode .project-tech-popover.is-open .btn-ft.btn-style-28{color:#201b10;border-color:rgba(154,112,0,.34);box-shadow:0 14px 28px rgba(66,49,8,.16),inset 0 0 0 1px rgba(255,255,255,.46)}
.project-light-mode .btn-ft.btn-style-28 .plus{background:#ffd21f;color:#111;box-shadow:0 6px 12px rgba(66,49,8,.16)}
@keyframes scan28{to{left:115%}}
.project-tech-sheet{position:absolute;left:0;top:auto;bottom:calc(100% + .8rem);width:min(720px,100%);max-height:min(58vh,540px);overflow:auto;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px) scale(.972);transform-origin:left bottom;padding:1rem 1.05rem;border:1px solid rgba(255,210,31,.22);border-left:3px solid var(--pd-accent);border-radius:1rem;background:rgba(13,14,13,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 26px 70px rgba(0,0,0,.42);transition:opacity .72s ease,transform .72s cubic-bezier(.19,1,.22,1),visibility 0s linear .72s;z-index:20;scrollbar-width:thin;scrollbar-color:rgba(255,210,31,.45) rgba(255,255,255,.05)}
.project-tech-popover.is-open .project-tech-sheet{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s}
.project-light-mode .project-tech-sheet{background:rgba(255,251,242,.96);border-color:rgba(154,112,0,.28);box-shadow:0 24px 62px rgba(66,49,8,.18);scrollbar-color:rgba(154,112,0,.45) rgba(0,0,0,.06)}
.project-tech-sheet h2{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:.78rem;line-height:1.25;margin:0 0 .82rem;color:var(--pd-accent);font-weight:900;text-transform:uppercase;letter-spacing:.14em}
.project-tech-grid{display:grid;gap:.06rem;margin:0}
.project-tech-row{display:grid;grid-template-columns:minmax(145px,.48fr) minmax(0,1fr);gap:1rem;align-items:start;padding:.34rem 0;border-top:1px solid rgba(255,255,255,.075)}
.project-light-mode .project-tech-row{border-top-color:rgba(0,0,0,.08)}
.project-tech-row:first-child{border-top:0}
.project-tech-row dt{margin:0;color:var(--pd-copy-soft);font-size:.72rem;line-height:1.3;font-weight:800;text-transform:uppercase;letter-spacing:.075em}
.project-tech-row dd{margin:0;color:var(--pd-copy-strong);font-size:.86rem;line-height:1.36;font-weight:600;letter-spacing:-.004em}
@media (max-width:900px){.project-tech-popover{margin-bottom:1rem}.project-tech-popover-lower{margin-top:1rem}.btn-ft.btn-style-28{min-height:36px;padding:.26rem .3rem .26rem .82rem;gap:.52rem}.btn-ft.btn-style-28 .label{font-size:.64rem;letter-spacing:.085em}.btn-ft.btn-style-28 .plus{width:22px;height:22px;min-width:22px}.project-tech-sheet{bottom:calc(100% + .58rem);max-height:min(62vh,510px);padding:.82rem .82rem;border-radius:.85rem}.project-tech-sheet h2{font-size:.7rem;margin-bottom:.68rem}.project-tech-row{grid-template-columns:1fr;gap:.15rem;padding:.34rem 0}.project-tech-row dt{font-size:.66rem}.project-tech-row dd{font-size:.8rem;line-height:1.32}}
@media (max-width:520px){.project-tech-popover{margin-bottom:.88rem}.btn-ft.btn-style-28{width:100%;justify-content:space-between}.btn-ft.btn-style-28 .label{font-size:.64rem}.project-tech-sheet{width:100%;max-height:min(64vh,470px);padding:.72rem .72rem}.project-tech-row{padding:.3rem 0}.project-tech-row dd{font-size:.76rem}}


body.project-static-detail-page .project-detail-layout{grid-template-columns:minmax(420px,66.667dvh) minmax(0,1fr)}
body.project-static-detail-page .project-gallery-panel.project-static-hero-panel{position:relative;height:100vh;height:100dvh;padding:0;margin:0;border:0;overflow:hidden;background:#050505}
body.project-static-detail-page .project-static-hero-picture{display:block;width:100%;height:100%;overflow:hidden}
body.project-static-detail-page .project-static-hero-image{display:block;width:auto;height:100%;max-width:none;object-fit:contain;object-position:left top;border:0;margin:0;padding:0;box-shadow:none;border-radius:0;user-select:none;-webkit-user-drag:none;pointer-events:none;background:#050505}
@media (min-width:901px) and (max-width:1100px){body.project-static-detail-page .project-detail-layout{grid-template-columns:clamp(250px,33.372dvh,340px) minmax(0,1fr)}body.project-static-detail-page .project-gallery-panel.project-static-hero-panel{width:100%;height:100vh;height:100dvh;border-right:1px solid var(--pd-gallery-border)}body.project-static-detail-page .project-static-hero-image{width:100%;height:100%;object-fit:cover;object-position:left top}}
@media (max-width:900px){body.project-static-detail-page .project-detail-layout{grid-template-columns:32vw minmax(0,68vw)}body.project-static-detail-page .project-gallery-panel.project-static-hero-panel{border-right:0}body.project-static-detail-page .project-static-hero-image{width:100%;height:100%;object-fit:cover;object-position:left top}}
@media (max-width:520px){body.project-static-detail-page .project-detail-layout{grid-template-columns:30vw minmax(0,70vw)}}
@media (max-width:900px){body.project-static-detail-page .project-detail-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:100vh;height:100dvh}body.project-static-detail-page .project-gallery-panel.project-static-hero-panel{width:100%;height:auto;aspect-ratio:760/253;border:0;background:#050505}body.project-static-detail-page .project-static-hero-picture{display:block;width:100%;height:100%;overflow:hidden}body.project-static-detail-page .project-static-hero-image{display:block;width:100%;height:100%;object-fit:contain;object-position:center top;background:#050505}body.project-static-detail-page .project-info-panel{height:100%;min-height:0}}
.project-cover-shine:active img{transform:scale(1.022);filter:contrast(1.04) saturate(1.05)}
.project-cover-shine:active::before{opacity:1;animation:projectCoverShineSweep 950ms ease forwards}


.project-cover-shine{position:relative;overflow:hidden;isolation:isolate}
.project-cover-shine img{display:block;width:100%;height:100%;transform:scale(1);transition:transform 700ms cubic-bezier(.2,.8,.2,1),filter 700ms cubic-bezier(.2,.8,.2,1);will-change:transform,filter}
.project-cover-shine::before{content:"";position:absolute;top:0;left:-85%;z-index:3;width:44%;height:100%;background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.18) 40%,rgba(255,255,255,.62) 52%,rgba(245,248,255,.28) 64%,rgba(255,255,255,0) 100%);transform:skewX(-24deg);opacity:0;pointer-events:none}
.project-cover-shine:hover img{transform:scale(1.022);filter:contrast(1.04) saturate(1.05)}
.project-cover-shine:hover::before{opacity:1;animation:projectCoverShineSweep 950ms ease forwards}
@keyframes projectCoverShineSweep{0%{left:-85%}100%{left:135%}}
@media (prefers-reduced-motion:reduce){.project-cover-shine img{transition:none}.project-cover-shine:hover img,.project-cover-shine:active img{transform:none;filter:none}.project-cover-shine:hover::before,.project-cover-shine:active::before{animation:none;opacity:0}}

.project-tech-logo-item .project-tech-logo-media img{transform:translateZ(0) scale(1);transform-origin:center center;transition:transform .28s ease,filter .28s ease;will-change:transform,filter}
.project-tech-logo-item:hover .project-tech-logo-media img,.project-tech-logo-item:focus-within .project-tech-logo-media img{animation:patrones-logo-pulse-premium-hover 1.45s ease-in-out infinite}
@keyframes patrones-logo-pulse-premium-hover{0%,100%{transform:translateZ(0) scale(1);filter:drop-shadow(0 3px 7px rgba(0,0,0,.28)) brightness(1)}50%{transform:translateZ(0) scale(1.055);filter:drop-shadow(0 10px 18px rgba(255,159,28,.18)) brightness(1.06)}}
.project-light-mode .project-tech-logo-item .project-tech-logo-media img{filter:drop-shadow(0 2px 5px rgba(0,0,0,.18))}
.project-light-mode .project-tech-logo-item:hover .project-tech-logo-media img,.project-light-mode .project-tech-logo-item:focus-within .project-tech-logo-media img{animation:patrones-logo-pulse-premium-hover-light 1.45s ease-in-out infinite}
@keyframes patrones-logo-pulse-premium-hover-light{0%,100%{transform:translateZ(0) scale(1);filter:drop-shadow(0 2px 5px rgba(0,0,0,.18)) brightness(1)}50%{transform:translateZ(0) scale(1.055);filter:drop-shadow(0 10px 18px rgba(178,106,36,.16)) brightness(1.045)}}
@media (prefers-reduced-motion:reduce){.project-tech-logo-item .project-tech-logo-media img,.project-tech-logo-item:hover .project-tech-logo-media img,.project-tech-logo-item:focus-within .project-tech-logo-media img{animation:none!important;transition:none!important;transform:none!important;filter:none!important}}

@media (max-width:900px){.project-tech-logo-list{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:.42rem;max-width:100%;padding-bottom:.18rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}.project-tech-logo-list::-webkit-scrollbar{display:none}.project-tech-logo-list .project-tech-logo-item{flex:0 0 auto}.back-to-projects,.next-project-link{font-size:.84rem}}
@media (max-width:520px){.project-tech-logo-list{gap:.34rem}.project-tech-logo-list .project-tech-logo-item{grid-template-rows:42px auto;width:50px;min-width:50px}.project-tech-logo-list .project-tech-logo-media{width:42px;height:42px}.project-tech-logo-list .project-tech-logo-media img{max-width:42px;max-height:42px}.project-tech-logo-list .project-tech-logo-label{max-width:54px;font-size:.5rem;line-height:1.02;min-height:1.02rem}.back-to-projects,.next-project-link{font-size:.8rem}}
body.project-detail-page .project-kicker{font-family:"Maven Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.project-detail-page .project-detail-copy h1{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.project-detail-page .project-lead{font-family:"Maven Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.project-detail-page .project-text-block{max-width:720px;margin:0 0 1.08rem;padding-top:.05rem}
body.project-detail-page .project-text-block + .project-text-block{margin-top:.1rem}
body.project-detail-page .project-text-block h2{font-family:"IBM Plex Sans",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:18px;line-height:1.4;font-weight:620;margin:0 0 .46rem;color:var(--pd-accent);text-transform:uppercase;letter-spacing:.08em}
body.project-detail-page .project-text-block p,body.project-detail-page .project-text-block li{font-family:"IBM Plex Sans",Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:18px;line-height:1.4;font-weight:620;color:var(--pd-copy);letter-spacing:-.004em;text-align:justify;text-justify:inter-word;hyphens:auto}
body.project-detail-page .project-text-block p{margin:0}
body.project-detail-page .project-text-block p + p{margin-top:.72rem}
body.project-detail-page .project-tech-sheet h2{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body.project-detail-page .project-action{font-family:"Maven Pro",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:950}
@media (max-width:1100px){body.project-detail-page .project-text-block p,body.project-detail-page .project-text-block li{font-size:.94rem;line-height:1.48}}
@media (max-width:900px){body.project-detail-page .project-text-block p,body.project-detail-page .project-text-block li{font-size:.86rem;line-height:1.44;text-align:left;hyphens:none}body.project-detail-page .project-text-block p + p{margin-top:.58rem}}
@media (max-width:520px){body.project-detail-page .project-text-block{margin-bottom:.78rem}body.project-detail-page .project-text-block h2{font-size:.76rem;letter-spacing:.12em}}


body.project-detail-page .project-kicker{
  margin: 0 0 18px;
  font-family: Inter, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  background: linear-gradient(90deg, #ffd21d, #fff1a8 48%, #ffb400);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}



/* Project detail share button · inline placement beside technical sheet */
.project-tech-action-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:.72rem;
  max-width:100%;
  position:relative;
  z-index:24;
}
.project-share-tech-slot{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  flex:0 1 auto;
  min-width:0;
  max-width:100%;
  position:relative;
  z-index:24;
}
.project-share-tech-slot pl-share-button{
  flex:0 1 auto;
}
@media (max-width:900px){
  .project-tech-action-row{
    gap:.58rem;
  }
}
@media (max-width:520px){
  .project-tech-action-row{
    align-items:flex-start;
    gap:.5rem;
  }
  .project-tech-action-row .btn-ft.btn-style-28{
    width:auto;
    max-width:100%;
  }
  .project-share-tech-slot{
    flex:0 1 100%;
  }
}

/* Project detail refinements · share buttons, mobile actions, theme control and tech hover */
.project-tech-action-row .btn-ft.btn-style-28{
  width:auto;
  max-width:max-content;
  flex:0 0 auto;
  justify-content:flex-start;
}
.project-tech-action-row .project-share-tech-slot{
  flex:0 1 auto;
}
@media (max-width:520px){
  .project-tech-action-row .btn-ft.btn-style-28{
    width:auto;
    max-width:100%;
    justify-content:flex-start;
  }
  .project-tech-action-row .project-share-tech-slot{
    flex:0 1 auto;
    max-width:100%;
  }
}

@media (max-width:900px){
  .project-detail-actions{
    display:grid;
    grid-auto-flow:column;
    grid-auto-columns:minmax(0,1fr);
    align-items:stretch;
    width:100%;
    gap:.48rem;
  }
  .project-detail-actions .project-action{
    width:auto;
    min-width:0;
    max-width:100%;
    min-height:46px;
    padding:.38rem .38rem .38rem .66rem;
    gap:.38rem;
    justify-content:space-between;
    text-align:left;
    line-height:1.05;
  }
  .project-detail-actions .project-action > span:first-child{
    flex:1 1 auto;
    min-width:0;
    text-align:left;
    white-space:normal;
  }
  .project-detail-actions .project-action-icon{
    width:30px;
    height:30px;
    min-width:30px;
  }
  .project-detail-actions .project-action-icon-github img,
  .project-detail-actions .project-action-icon-dashboard img{
    width:19px;
    height:19px;
  }
}
@media (max-width:390px){
  .project-detail-actions{
    gap:.36rem;
  }
  .project-detail-actions .project-action{
    min-height:42px;
    padding:.32rem .32rem .32rem .5rem;
    gap:.28rem;
    font-size:.78rem;
    letter-spacing:-.012em;
  }
  .project-detail-actions .project-action-icon{
    width:28px;
    height:28px;
    min-width:28px;
  }
}

body.project-detail-page:not(.project-light-mode) .project-theme-toggle .color-mode-icon::after{
  content:"\eb65";
  color:var(--pd-control-text);
}
body.project-light-mode .project-theme-toggle .color-mode-icon::after{
  content:"\ea9f";
  color:var(--pd-control-text);
}
@media (max-width:900px){
  .project-detail-controls{
    align-items:center;
  }
  .project-language-toggle,
  .project-theme-toggle{
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    display:grid;
    place-items:center;
  }
  .project-theme-toggle .color-mode-icon,
  .project-theme-toggle .color-mode-icon::after{
    width:30px;
    height:30px;
    min-width:30px;
    min-height:30px;
    line-height:30px;
  }
  .project-theme-toggle .color-mode-icon::after{
    font-size:23px;
    position:static;
    transform:none;
  }
}

.project-tech-logo-media{
  position:relative;
}
.project-tech-logo-media::before{
  content:"";
  position:absolute;
  inset:4px;
  border-radius:999px;
  z-index:-1;
  opacity:0;
  transform:scale(.82);
  background:radial-gradient(circle, rgba(255,210,31,.30) 0%, rgba(255,180,0,.17) 42%, transparent 74%);
  filter:blur(2px);
  transition:opacity .28s ease, transform .28s ease;
}
.project-tech-logo-item:hover .project-tech-logo-media::before,
.project-tech-logo-item:focus-within .project-tech-logo-media::before{
  opacity:1;
  transform:scale(1.12);
}
.project-light-mode .project-tech-logo-media::before{
  background:radial-gradient(circle, rgba(255,180,0,.24) 0%, rgba(178,106,36,.14) 44%, transparent 74%);
}
@keyframes patrones-logo-pulse-premium-hover{
  0%,100%{transform:translateZ(0) scale(1);filter:drop-shadow(0 3px 7px rgba(0,0,0,.28)) brightness(1)}
  50%{transform:translateZ(0) scale(1.085);filter:drop-shadow(0 13px 22px rgba(255,159,28,.28)) brightness(1.075)}
}
@keyframes patrones-logo-pulse-premium-hover-light{
  0%,100%{transform:translateZ(0) scale(1);filter:drop-shadow(0 2px 5px rgba(0,0,0,.18)) brightness(1)}
  50%{transform:translateZ(0) scale(1.08);filter:drop-shadow(0 12px 21px rgba(178,106,36,.24)) brightness(1.06)}
}
@media (prefers-reduced-motion:reduce){
  .project-tech-logo-media::before{
    transition:none!important;
  }
}