/* V27 — luminous rain-on-frosted-glass panels, derived from attached technique references. */
:root[data-theme="dark"],:root{
 --v27-wash:linear-gradient(122deg,rgba(215,246,255,.235) 0%,rgba(178,220,234,.115) 15%,rgba(115,174,196,.065) 42%,rgba(17,42,60,.035) 75%,rgba(178,230,239,.105) 100%);
 --v27-glass:rgba(141,198,220,.075);
 --v27-rim:rgba(210,250,255,.38);
 --v27-bottom-rim:rgba(106,171,191,.20);
 --v27-shade:0 14px 35px rgba(0,0,0,.20),inset 0 1px 0 rgba(246,255,255,.21),inset 1px 0 0 rgba(245,255,255,.09);
}
:root[data-theme="light"]{
 --v27-wash:linear-gradient(128deg,rgba(255,255,255,.64),rgba(247,253,255,.27) 36%,rgba(178,214,229,.18) 100%);
 --v27-glass:rgba(255,255,255,.31);--v27-rim:rgba(255,255,255,.86);
 --v27-bottom-rim:rgba(65,127,157,.27);
 --v27-shade:0 12px 32px rgba(27,61,83,.13),inset 0 1px 0 rgba(255,255,255,.8);
}
/* Panels have to be translucent on both sides of every theme override. */
body main#main .v27-glass {
 position:relative!important;isolation:isolate!important;overflow:hidden!important;
 border:1px solid var(--v27-rim)!important;
 background-color:var(--v27-glass)!important;
 background-image:var(--v27-wash)!important;
 -webkit-backdrop-filter:blur(21px) saturate(165%)!important;
 backdrop-filter:blur(21px) saturate(165%)!important;
 box-shadow:var(--v27-shade)!important;
 border-radius:13px!important;
}
body main#main .v27-glass::before {
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
 background:linear-gradient(137deg,rgba(242,255,255,.16),transparent 27%,transparent 63%,rgba(193,236,245,.05));
 border-bottom:1px solid var(--v27-bottom-rim);
}
body main#main .v27-glass > :not(.v27-rain) {position:relative;z-index:2;}
/* A photographic-scene rain effect without importing any photos: small glass lens droplets, reflected rims and trailing rivulets. */
.v27-rain {position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;contain:layout paint;opacity:.86;}
.v27-rain .v27-drop {
 position:absolute;left:var(--rx);top:var(--ry);width:var(--rw);height:var(--rh);
 border-radius:53% 47% 57% 43% / 38% 42% 58% 62%;opacity:var(--ro);
 background:radial-gradient(ellipse at 28% 17%,rgba(251,255,255,.86) 0%,rgba(229,250,255,.32) 17%,rgba(35,89,111,.19) 56%,rgba(214,253,255,.48) 80%,rgba(255,255,255,.07) 100%);
 border:1px solid rgba(224,251,255,.39);
 box-shadow:inset 1px 1px 1px rgba(255,255,255,.20),inset -1px -2px 2px rgba(5,35,49,.35),1px 2px 2px rgba(0,8,18,.28),0 0 11px rgba(194,240,255,.045);
 transform:translate3d(0,0,0) rotate(-8deg);
 animation:v27-rain-drift var(--rd) ease-in-out var(--rdelay) infinite alternate;
}
.v27-rain .v27-drop::after {content:"";position:absolute;top:-5px;left:30%;width:1px;height:var(--rtrail);opacity:.22;background:linear-gradient(transparent,rgba(219,249,255,.7));filter:blur(.5px)}
@keyframes v27-rain-drift {0%,17%{transform:translate3d(0,0,0) rotate(-8deg);opacity:calc(var(--ro) * .65)} 77%,100%{transform:translate3d(1px,var(--rtravel),0) rotate(-8deg);opacity:var(--ro)}}
/* Make the unfocused certificates actually blurry, while the focused one is crisp. */
#credentials .v21-gallery-item[data-distance="1"] {filter:blur(8px)!important;opacity:.38!important;}
#credentials .v21-gallery-item[data-distance="2"],#credentials .v21-gallery-item[data-distance="3"] {filter:blur(13px)!important;opacity:.12!important;}
#credentials .v21-gallery-item[data-distance="0"] {filter:blur(0)!important;opacity:1!important;}
/* Keep the large certificate completely inside its stage; rounded, padded frame. */
#credentials .v21-gallery {padding:14px 17px 16px!important;}
#credentials .v21-gallery-stage {height:clamp(225px,44dvh,440px)!important;min-height:0!important;}
#credentials .v21-gallery-canvas {border-radius:10px!important;}
#credentials .v21-gallery-item {width:min(67%,550px,68dvh)!important;max-height:calc(100% - 22px)!important;}
#credentials .v21-gallery-item img {border-radius:7px!important;}
#credentials .v21-gallery-bottom {min-height:18px!important;padding-top:6px!important;}
/* Education: a small inset on all four sides, no hard edge against the gallery. */
#credentials .education-compact {margin-top:12px!important;padding:12px 15px 14px!important;border-radius:13px!important;}
#credentials .education-compact-title {margin-bottom:9px!important;}
#credentials .education-compact-items {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important;padding:0 2px 2px!important;}
#credentials .education-compact-item {padding:12px 15px!important;min-width:0;border-radius:10px!important;}
#credentials .section-footnote {margin-top:9px!important;padding-left:2px!important;}
@media(max-width:760px) {
 #credentials .v21-gallery {padding:10px 10px 13px!important;}
 #credentials .v21-gallery-stage {height:clamp(190px,35dvh,315px)!important;}
 #credentials .v21-gallery-item {width:min(85%,440px,58dvh)!important;}
 #credentials .education-compact {padding:10px 12px 12px!important;}
 #credentials .education-compact-items {grid-template-columns:1fr!important;gap:7px!important;}
}
@media(max-height:690px) {
 #credentials .v21-gallery-stage {height:clamp(180px,34dvh,285px)!important;}
 #credentials .v21-gallery-item {width:min(64%,410px,48dvh)!important;}
 #credentials .education-compact {margin-top:8px!important;padding:8px 12px!important;}
}
@media(prefers-reduced-motion:reduce) {.v27-rain .v27-drop{animation:none!important;}}
@media(prefers-reduced-transparency:reduce) {.v27-rain{display:none!important;}}