:root{
  --bg:#fff;
  --text:#111;
  --text-secondary:#444;
  --line:#ddd;
  --nav-height:60px;
  --brand-pink:#d30080;
  --brand-pink-dark:#ff0fa0;
  --footer-bg:#000;
  --footer-text:#fff;
  --button-primary:#d30080;
  --button-text:#fff;
  --raleway-fallback:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --roboto-fallback:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --raleway-ascent-override:90%;
  --raleway-descent-override:22%;
  --raleway-line-gap-override:0%;
  --roboto-ascent-override:93%;
  --roboto-descent-override:24%;
  --roboto-line-gap-override:0%}
@media (prefers-color-scheme:dark){
  :root{
  --bg:#000;
  --text:#eee;
  --text-secondary:#bbb;
  --line:#333;
  --button-primary:#ff0fa0}
}
@font-face{
  font-family:'Raleway-fallback';
  src:local(-apple-system),local(BlinkMacSystemFont),local('Segoe UI'),local(Roboto),local(Helvetica),local(Arial),local(sans-serif);
  ascent-override:var(--raleway-ascent-override);
  descent-override:var(--raleway-descent-override);
  line-gap-override:var(--raleway-line-gap-override);
  size-adjust:100%}
@font-face{
  font-family:'Roboto-fallback';
  src:local(-apple-system),local(BlinkMacSystemFont),local('Segoe UI'),local(Helvetica),local(Arial),local(sans-serif);
  ascent-override:var(--roboto-ascent-override);
  descent-override:var(--roboto-descent-override);
  line-gap-override:var(--roboto-line-gap-override);
  size-adjust:97%}
html{
  scroll-behavior:smooth;
  font-size:16px}
body{
  margin:0;
  font-family:Raleway,Raleway-fallback,var(--raleway-fallback);
  background:var(--bg);
  color:var(--text);
  line-height:1.6}
h1,h2,h3,h4,h5,h6{
  font-family:Roboto,Roboto-fallback,var(--roboto-fallback)}
header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  height:var(--nav-height);
  padding:0 1rem;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:var(--bg);
  z-index:100}
#nav-toggle{
  background:none;
  border:none;
  cursor:pointer;
  padding:.5rem;
  display:none}
#nav-toggle:focus-visible{
  outline:2px solid var(--text);
  outline-offset:2px}
#nav-toggle .bar{
  display:block;
  width:24px;
  height:3px;
  background:var(--text);
  margin:4px 0;
  transition:transform .3s,opacity .3s}
#nav-toggle.active .bar:nth-child(1){
  transform:translateY(7px) rotate(45deg)}
#nav-toggle.active .bar:nth-child(2){
  opacity:0}
#nav-toggle.active .bar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg)}
nav{
  display:flex;
  gap:1rem}
nav a{
  text-decoration:none;
  color:var(--text);
  font-weight:500;
  font-size:1.05rem}
.social{
  display:flex;
  gap:.75rem}
.social a{
  color:var(--text);
  font-size:20px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center}
.social a:focus-visible{
  outline:2px solid var(--text);
  outline-offset:2px}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0}
.hero{
  text-align:left;
  padding:3rem 1rem 5rem 1rem;
  overflow:hidden;
  max-width:1000px;
  margin:0 auto;
  position:relative}
.hero h1{
  font-family:Roboto,Roboto-fallback,var(--roboto-fallback);
  font-size:clamp(2rem,8vw,6rem);
  letter-spacing:2px;
  margin:0}
.subtitle{
  font-size:1.2rem;
  opacity:0;
  transition:opacity 1s;
  min-height:1.5em;
  height:1.5em;
  display:block;
  overflow:hidden;
  position:relative}
.subtitle span{
  position:absolute;
  width:100%;
  left:0}
.hero-logo{
  width:160px;
  max-width:40%;
  height:auto;
  margin-top:1rem;
  display:block;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.microfrontend-logo{
  max-width:60%;
  height:auto;
  display:block;
  margin:0 0 1rem 0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.learning-icon{
  font-size:120px;
  color:fuchsia;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.learning-icon-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;
  width:160px;
  height:160px}
.learning-icon-wrapper .fa-code{
  font-size:120px;
  color:teal;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.learning-icon-wrapper .fa-people-arrows{
  font-size:120px;
  color:#FFD700;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
@media (max-width:768px){
  .learning-icon-wrapper{
  width:120px;
  height:120px}
.learning-icon-wrapper .fa-code,.learning-icon,.learning-icon-wrapper .fa-people-arrows{
  font-size:80px}
}
@media (max-width:600px){
  .learning-icon-wrapper{
  width:80px;
  height:80px}
.learning-icon-wrapper .fa-code,.learning-icon,.learning-icon-wrapper .fa-people-arrows{
  font-size:60px}
footer div{
  font-size:.85rem;
  display:flex;
  flex-direction:column}
}
.hero-img{
  width:100%;
  max-width:1000px;
  height:auto;
  margin:0;
  display:block;
  filter:grayscale(100%);
  aspect-ratio:2000/1333}
.hero-media{
  position:relative;
  margin:2rem auto 0;
  max-width:1000px;
  background-color:#f5f5f5;
  aspect-ratio:2000/1333}
@media (prefers-color-scheme:dark){
  .hero-media{
  background-color:#333}
}
.exp-blocks{
  position:absolute;
  top:10%;
  left:5%;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  width:30%;
  max-width:260px;
  pointer-events:none;
  height:auto;
  visibility:hidden}
.exp-block{
  color:#fff;
  font-family:'Roboto',sans-serif;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(2px);
  padding:.65rem .8rem .75rem;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.25);
  opacity:0;
  animation:fadeIn .85s forwards;
  visibility:visible}
.exp-block:nth-child(2){
  animation-delay:.22s}
.exp-block:nth-child(3){
  animation-delay:.44s}
.exp-block.has-border{
  border-bottom:2px solid rgba(255,255,255,0.75)}
.exp-block h4{
  margin:0;
  font-size:1.05rem;
  letter-spacing:1px;
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  line-height:1.1}
.exp-block h4 span{
  display:inline-block}
.exp-block h4 span.yoe{
  font-weight:700}
.exp-block p{
  margin:.25rem 0 0;
  font-size:.7rem;
  letter-spacing:.4px;
  line-height:1.25}
@keyframes fadeIn{
  from{
  opacity:0}
to{
  opacity:1}
}
@media (max-width:800px){
  .exp-blocks{
  width:55%;
  top:6%}
.exp-block h4{
  font-size:.95rem}
}
@media (max-width:600px){
  .exp-blocks{
  top:50%;
  width:90%;
  left:5%;
  right:5%;
  max-width:none}
.exp-block{
  padding:.5rem .7rem}
.exp-block h4{
  font-size:.9rem;
  gap:.4rem}
.exp-block p{
  font-size:.65rem;
  line-height:1.2}
}
blockquote{
  font-size:1.8rem;
  text-align:center;
  margin:2.5rem auto;
  max-width:800px;
  font-weight:200}
@media (max-width:768px){
  blockquote{
  font-size:1.4rem;
  margin:2rem auto;
  max-width:90%}
}
@media (max-width:480px){
  blockquote{
  font-size:1.2rem;
  margin:1.5rem auto}
}
.grid4{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  margin:2rem auto;
  max-width:1000px}
.grid4 div{
  position:relative;
  background:#222;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  border-radius:16px;
  overflow:hidden}
.grid4 div a{
  position:relative;
  display:block;
  text-decoration:none;
  height:100%}
.persona-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%}
.persona-tile img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
  filter:grayscale(100%)}
.persona-tile.contrast img{
  filter:grayscale(100%) contrast(1.1)}
.persona-tile::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.15);
  mix-blend-mode:multiply;
  pointer-events:none;
  height:auto;
  bottom:auto;
  aspect-ratio:1/1}
.persona-overlay{
  position:relative;
  background:#222;
  padding:1.2rem 1rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:.65rem;
  color:#fff;
  flex:1}
.persona-overlay strong{
  position:relative;
  display:inline-block;
  font-size:1.15rem;
  letter-spacing:.85px;
  font-weight:400;
  color:#fff;
  padding:0;
  margin-bottom:.5rem}
.persona-overlay strong::before{
  display:none}
.persona-overlay em{
  font-style:normal;
  font-size:0.95rem;
  line-height:1.5;
  color:#bbb;
  font-weight:400}
.persona-tile a:focus-visible .persona-overlay{
  outline:2px solid teal;
  outline-offset:-2px}
.grid4 div a:visited,.grid4 div a:hover,.grid4 div a:active,.grid4 div a:focus{
  color:inherit !important}
@media (prefers-color-scheme:light){
  .persona-overlay{
  background:#f5f5f5}
.persona-overlay strong{
  color:#222 !important}
.persona-overlay em{
  color:#555}
}
@media (max-width:1024px) and (min-width:769px){
  .grid4{
  grid-template-columns:repeat(2,1fr)}
.persona-tile{
  flex-direction:column}
.persona-tile img{
  width:100%;
  aspect-ratio:1/1}
.persona-tile::after{
  height:auto;
  width:auto;
  bottom:auto;
  aspect-ratio:1/1}
.persona-overlay{
  position:relative;
  background:#222;
  padding:1.2rem 1rem;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:.65rem;
  color:#fff;
  flex:1}
.persona-overlay strong{
  font-size:1rem;
  font-weight:400;
  color:#fff;
  padding:0;
  margin-bottom:.5rem}
.persona-overlay em{
  font-size:.85rem;
  color:#bbb}
@media (prefers-color-scheme:light){
  .persona-overlay{
  background:#f5f5f5}
.persona-overlay strong{
  color:#222 !important}
.persona-overlay em{
  color:#555}
}
}
@media (max-width:1024px){
  .hero h1{
  font-size:2rem}
header{
  align-items:center}
#nav-toggle{
  display:block}
nav{
  position:absolute;
  top:var(--nav-height);
  left:0;
  right:0;
  flex-direction:column;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:0 1rem;
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease}
nav a{
  padding:.75rem 0}
nav.open{
  max-height:400px}
}
@media (max-width:768px){
  .grid4{
  grid-template-columns:1fr}
.grid4 div{
  align-items:flex-start;
  justify-content:flex-start;
  height:auto;
  min-height:110px}
.grid4 div a{
  display:flex}
.persona-tile{
  display:flex;
  align-items:flex-start;
  flex-direction:row}
.persona-tile img{
  width:90px;
  height:90px;
  border-radius:8px;
  object-fit:cover;
  aspect-ratio:auto}
.persona-tile::after{
  border-radius:8px;
  height:90px;
  width:90px;
  aspect-ratio:auto}
.persona-overlay{
  position:static;
  height:auto;
  background:transparent;
  backdrop-filter:none;
  padding:.25rem 0 .25rem .75rem;
  flex:1}
.persona-overlay strong{
  font-size:.78rem;
  padding:.15rem 0;
  color:white;
  margin-bottom:0.25rem}
.persona-overlay strong::before{
  display:none}
.persona-overlay em{
  font-size:12px;
  color:white;
  font-weight:400}
.grid4 div{
  border-bottom:1px solid var(--line);
  border-radius:0}
.grid4 div:last-child{
  border-bottom:none}
@media (prefers-color-scheme:light){
  .persona-overlay strong{
  color:#222 !important}
.persona-overlay em{
  color:#444}
.grid4 div{
  background:#f5f5f5}
}
}
section{
  border-top:1px solid var(--line);
  padding:2rem 1rem;
  max-width:1000px;
  margin:auto}
section.withSectionSides{
  display:flex;
  flex-direction:row;
  gap:2rem}
.sectionLeft{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:center}
.sectionRight{
  flex:1}
@media (max-width:768px){
  section.withSectionSides{
  flex-direction:column;
  align-items:center;
  text-align:center}
.sectionLeft{
  margin-bottom:1.5rem}
.sectionRight{
  width:100%}
}
section h2{
  font-family:Roboto,Roboto-fallback,var(--roboto-fallback);
  text-transform:uppercase;
  font-size:1.5rem;
  margin-bottom:1rem}
.talks-grid{
  display:grid;
  gap:1.5rem;
  grid-template-columns:1fr}
@media (min-width:600px){
  .talks-grid{
  grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .talks-grid{
  grid-template-columns:repeat(3,1fr)}
}
.talk{
  position:relative;
  cursor:pointer;
  margin-bottom:0}
.talk a{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:8px}
.talk img{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:8px}
.talk .play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:50px;
  height:50px;
  fill:white;
  opacity:.8}
.talk-title-overlay{
  position:absolute;
  left:0;
  right:0;
  top:0;
  padding:.55rem .65rem .65rem;
  font-size:.7rem;
  font-weight:600;
  font-family:Roboto,Roboto-fallback,var(--roboto-fallback);
  letter-spacing:.5px;
  text-transform:uppercase;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.4rem;
  line-height:1.1;
  color:#fff;
  z-index:2}
.talk-title-overlay::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.65),rgba(0,0,0,.25) 70%,transparent);
  border-radius:8px 8px 0 0;
  z-index:-1;
  backdrop-filter:blur(2px)}
.talk[data-placeholder="true"] .talk-title-overlay{
  opacity:.7}
.talk-category-pill{
  display:inline-block;
  background:rgba(0,128,128,0.85);
  color:#fff;
  padding:3px 8px 4px;
  border-radius:999px;
  font-size:.5rem;
  letter-spacing:.6px;
  font-weight:600;
  line-height:1;
  box-shadow:0 2px 4px -2px rgba(0,0,0,0.4)}
@media (prefers-color-scheme:dark){
  .talk-category-pill{
  background:rgba(0,170,170,0.9)}
}
.talk-thumb{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:linear-gradient(145deg,#008080,#00a3a3);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden}
.talk-thumb::before,.talk-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:18px}
.talk-thumb::before{
  background:radial-gradient(circle at 20% 30%,rgba(255,255,255,0.25),transparent 60%),radial-gradient(circle at 80% 70%,rgba(255,255,255,0.18),transparent 65%);
  mix-blend-mode:overlay}
.talk-thumb::after{
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.15),inset 0 8px 22px -6px rgba(255,255,255,0.35),inset 0 -10px 25px -10px rgba(0,0,0,0.45)}
.talk-thumb svg{
  width:54px;
  height:54px;
  fill:#fff;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35))}
.talk-thumb .corner{
  position:absolute;
  width:42%;
  height:42%;
  border:2px solid rgba(255,255,255,0.28);
  border-radius:50%;
  filter:blur(1px);
  opacity:.35}
.talk-thumb .corner.c1{
  top:-12%;
  left:-12%}
.talk-thumb .corner.c2{
  bottom:-12%;
  right:-12%}
.talk-thumb .concave{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse at top,rgba(255,255,255,0.35),transparent 70%),radial-gradient(ellipse at bottom,rgba(0,0,0,0.35),transparent 65%);
  mix-blend-mode:soft-light}
.talk[data-placeholder="true"] .talk-info{
  opacity:.65}
.talk-info{
  margin-top:.55rem;
  margin-bottom:2rem;
  font-size:.7rem;
  line-height:1.25;
  letter-spacing:.35px;
  color:var(--text-secondary);
  height:auto;
  max-height:2.5rem;
  overflow:hidden}
.talk-info a{
  font-size:.7rem;
  font-weight:600;
  text-decoration:none}
.talk-info a:hover{
  text-decoration:underline}
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem}
.tile{
  border:1px solid var(--line);
  padding:1rem;
  border-radius:4px}
.tile h3{
  font-family:Roboto,Roboto-fallback,var(--roboto-fallback);
  font-size:1rem;
  margin:0 0 .5rem;
  display:flex;
  align-items:center;
  gap:.5rem}
.tile h3 svg{
  width:16px;
  height:16px;
  fill:var(--text)}
.category-pill{
  display:block;
  background:rgba(0,128,128,0.12);
  color:#006e6e;
  border:1px solid rgba(0,128,128,0.4);
  padding:3px 9px 4px;
  border-radius:999px;
  font-size:.58rem;
  font-weight:600;
  letter-spacing:.6px;
  text-transform:uppercase;
  margin:.3rem 0 .7rem;
  width:max-content;
  max-width:100%}
@media (prefers-color-scheme:dark){
  .category-pill{
  background:rgba(0,128,128,0.25);
  border-color:rgba(0,128,128,0.55);
  color:#1cc7c7}
}
footer{
  border-top:1px solid var(--line);
  padding:1rem;
  text-align:center;
  background:var(--text);
  color:var(--bg)}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:0.5rem;
  margin-bottom:0.75rem}
footer a{
  color:var(--bg);
  text-decoration:none;
  padding:0.5rem 0.75rem;
  display:inline-block;
  border-radius:4px;
  min-width:44px;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:center}
footer a:hover,footer a:focus{
  text-decoration:underline;
  background-color:rgba(255,255,255,0.1)}
footer a:focus-visible{
  outline:2px solid white;
  outline-offset:2px}
@media (max-width:600px){
  .footer-links{
  flex-direction:column;
  align-items:center}
footer a{
  width:100%;
  max-width:280px}
}
.show-more{
  display:block;
  margin:1rem auto;
  text-align:center;
  cursor:pointer;
  font-weight:bold}
.disclaimer{
  margin:.75rem auto 0;
  max-width:800px;
  font-size:.55rem;
  line-height:1.2;
  letter-spacing:.5px;
  opacity:.75;
  text-transform:uppercase}
.cookie-consent{
  position:fixed;
  top:1rem;
  right:1rem;
  max-width:320px;
  z-index:9999;
  background:rgba(0,0,0,0.75);
  color:#fff;
  border:1px solid rgba(255,255,255,0.2);
  border-radius:14px;
  box-shadow:0 8px 28px -6px rgba(0,0,0,0.5);
  transform:translateX(120%);
  opacity:0;
  transition:transform .55s cubic-bezier(.16,.84,.44,1),opacity .55s ease;
  backdrop-filter:blur(6px);
  font-family:Roboto,Roboto-fallback,var(--roboto-fallback)}
.cookie-consent.show{
  transform:translateX(0);
  opacity:1}
.cookie-consent-inner{
  padding:1rem 1rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:.75rem}
.cookie-consent h3{
  margin:0;
  font-size:.9rem;
  letter-spacing:.5px;
  font-weight:600;
  text-transform:uppercase}
.cookie-consent p{
  margin:0;
  font-size:.7rem;
  line-height:1.35;
  letter-spacing:.35px}
.cookie-actions{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap}
.cookie-btn{
  flex:1 1 auto;
  cursor:pointer;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.5px;
  padding:.55rem .75rem;
  border-radius:8px;
  border:1px solid transparent;
  background:fuchsia;
  color:#fff;
  transition:background .25s,transform .25s}
.cookie-btn.accept{
  background:fuchsia}
.cookie-btn.decline{
  background:#444;
  color:#fff}
.cookie-btn:hover,.cookie-btn:focus{
  outline:none;
  transform:translateY(-2px)}
.cookie-btn:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px}
.cookie-btn.decline:hover,.cookie-btn.decline:focus{
  background:#333}
@media (max-width:600px){
  .cookie-consent{
  left:1rem;
  right:1rem;
  max-width:none}
}
.badge-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem;
  margin-top:1rem}
.badge{
  border:.5px solid var(--line);
  border-radius:16px;
  padding:1.25rem 1rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  background:rgba(0,0,0,0.015)}
.badge-header{
  display:flex;
  align-items:center;
  gap:.75rem}
.badge-header img{
  width:40px;
  height:40px;
  object-fit:contain}
.badge-header .badge-icon{
  font-size:40px;
  line-height:1;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:teal;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25))}
.badge-header .fa-node-js{
  color:#68a063}
.badge-header .fa-cloud{
  color:#6f42c1}
.badge h3{
  font-family:'Roboto',sans-serif;
  font-size:1rem;
  margin:0;
  letter-spacing:.5px}
.badge a.more{
  align-self:flex-start;
  text-decoration:none;
  font-size:.85rem;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  font-weight:600}
.badge a.more i{
  font-size:14px}
.badge a.more:hover{
  text-decoration:underline}
.badge p{
  margin:0;
  font-size:.85rem;
  line-height:1.3;
  color:var(--text-secondary)}
.badge a.secondary{
  font-size:.75rem;
  text-decoration:none;
  color:var(--text-secondary);
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  margin-top:.25rem}
.badge a.secondary:hover{
  text-decoration:underline}
a,a:visited,a:hover,a:active,a:focus,.social a,footer a{
  color:fuchsia !important}
.social a i{
  color:fuchsia}
.community-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0}
.community-item{
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.5rem}
.community-item .community-head{
  display:flex;
  align-items:center;
  gap:.65rem}
.community-item .community-logo{
  width:40px;
  height:40px;
  object-fit:contain;
  flex-shrink:0}
.community-item .community-icon{
  font-size:18px;
  color:fuchsia;
  opacity:.9}
.community-item h3{
  margin:0;
  font-family:'Roboto',sans-serif;
  font-size:1rem;
  letter-spacing:.5px}
.community-item p{
  margin:0;
  font-size:.8rem;
  color:var(--text-secondary)}
.community-item a{
  font-size:.75rem;
  font-weight:600;
  text-decoration:none}
.community-item:nth-child(1),.community-item:nth-child(2){
  border-right:.5px solid var(--line)}
.program-owner{
  display:inline-block;
  background:rgba(0,128,128,0.12);
  color:#006e6e;
  border:1px solid rgba(0,128,128,0.4);
  padding:2px 10px;
  border-radius:999px;
  font-size:.55rem;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  line-height:1.4}
@media (prefers-color-scheme:dark){
  .program-owner{
  background:rgba(0,128,128,0.25);
  border-color:rgba(0,128,128,0.6);
  color:#1cc7c7}
}
@media (max-width:700px){
  .community-grid{
  grid-template-columns:1fr}
.community-item:last-child{
  border-bottom:none}
}
.content-section{
  text-align:center}
.content-section h2{
  margin-bottom:1.25rem}
.ai-experience-section h2{
  margin-top:3rem}
.content-list{
  list-style:none;
  padding:0;
  margin:0 auto;
  max-width:550px;
  text-align:left}
.content-list li{
  padding:1rem 0 1.2rem;
  border-bottom:1px solid var(--line)}
.content-list li:last-child{
  border-bottom:none}
.content-list h3{
  margin:0 0 .25rem;
  font-size:1rem;
  font-family:'Roboto',sans-serif;
  letter-spacing:.5px}
.meta-info{
  margin:0 0 .5rem;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--text-secondary)}
.meta-info.large{
  font-size:.85rem}
.meta-info.small{
  font-size:.7rem}
.description{
  margin:0;
  color:var(--text-secondary)}
.description.large{
  font-size:.95rem;
  line-height:1.5;
  margin-bottom:1rem}
.description.small{
  font-size:.8rem;
  line-height:1.35}
@media (max-width:700px){
  .content-list{
  max-width:100%}
}
details{
  margin:1.5rem auto 0;
  max-width:650px;
  text-align:left;
  background:rgba(0,0,0,0.04);
  border:1px solid var(--line);
  border-radius:12px;
  padding:.85rem 1rem .95rem;
  position:relative;
  font-family:Roboto,Roboto-fallback,var(--roboto-fallback)}
details[open]{
  background:rgba(0,0,0,0.06)}
details summary{
  cursor:pointer;
  list-style:none;
  font-weight:600;
  letter-spacing:.5px;
  font-size:.8rem;
  text-transform:uppercase;
  display:flex;
  align-items:center;
  gap:.5rem}
details summary::-webkit-details-marker{
  display:none}
details summary::before{
  content:'+';
  width:18px;
  height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  background:teal;
  color:#fff;
  border-radius:4px;
  flex-shrink:0;
  transition:transform .35s}
details[open] summary::before{
  content:'−';
  transform:rotate(180deg)}
details ul{
  margin:.75rem 0 0 0;
  padding-left:1rem;
  font-size:.75rem;
  line-height:1.4}
details li{
  margin:.25rem 0}
@media (prefers-color-scheme:dark){
  details{
  background:rgba(255,255,255,0.06)}
details[open]{
  background:rgba(255,255,255,0.08)}
}
@media print{
  body{
  font-size:10pt;
  line-height:1.3;
  background:#fff;
  color:#000;
  font-family:Arial,sans-serif;
  width:100%;
  margin:0;
  padding:0}
header,.hero-media,.social,#nav-toggle,#cookie-consent,.show-more,footer,.footer-links,blockquote,.corner,.concave,.talk-thumb,.talk-thumb svg{
  display:none !important}
p,h2,h3,h4,li{
  orphans:3;
  widows:3}
h1,h2,h3{
  page-break-after:avoid}
p,li{
  font-size:9pt}
h1{
  font-size:18pt;
  margin:0.5cm 0 0.3cm}
h2{
  font-size:14pt;
  margin:0.5cm 0 0.2cm;
  border-bottom:0.5pt solid #ccc;
  padding-bottom:0.1cm}
h3{
  font-size:12pt;
  margin:0.3cm 0 0.1cm}
.hero{
  padding:0.3cm 0;
  text-align:center;
  margin-bottom:0.5cm}
.grid4,.talks-grid,.tiles,.badge-grid,.community-grid{
  display:block !important;
  margin:0.3cm 0 !important}
.tile,.talk{
  display:block !important;
  border:none !important;
  border-bottom:0.5pt dotted #ccc !important;
  padding:0.2cm 0 !important;
  margin:0 !important;
  page-break-inside:avoid !important;
  background:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:1.2cm !important;
  position:relative !important;
  overflow:visible !important}
.tile:last-child,.talk:last-child{
  border-bottom:none !important}
.grid4 div{
  background:none;
  border:none;
  border-bottom:0.5pt dotted #ccc;
  padding:0.2cm 0;
  margin:0 !important;
  overflow:visible;
  height:auto !important;
  min-height:0 !important}
.grid4 div:last-child{
  border-bottom:none}
.persona-tile{
  display:block;
  position:relative;
  height:auto !important}
.persona-tile img,.talk-tile img,.badge img,.community-item img,.talk img{
  display:none !important}
.persona-tile::after,.talk-tile::after{
  display:none}
.persona-overlay{
  display:block !important;
  position:static;
  background:none;
  color:#000;
  padding:0;
  text-align:left}
.persona-overlay strong{
  color:#000 !important;
  display:block;
  font-size:11pt;
  font-weight:bold;
  margin:0}
.persona-overlay em{
  color:#000 !important;
  display:block;
  font-style:normal;
  font-size:9pt}
.talk>a{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  background:none !important;
  height:auto !important;
  min-height:0 !important;
  max-height:0.5cm !important;
  overflow:visible !important}
.talk>a>img,.talk>a>.talk-thumb,.talk>a>svg.play{
  display:none !important;
  height:0 !important;
  width:0 !important;
  margin:0 !important;
  padding:0 !important;
  opacity:0 !important;
  position:absolute !important}
.talk-title-overlay{
  display:block !important;
  font-size:11pt !important;
  font-weight:bold !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1.1 !important;
  color:#000 !important;
  background:none !important;
  position:static !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  height:auto !important;
  max-height:none !important;
  overflow:visible !important;
  transform:none !important}
.talk-info{
  margin:0 !important;
  padding:0 !important;
  height:auto !important;
  max-height:0.4cm !important;
  color:#000 !important;
  font-size:9pt !important;
  line-height:1.1 !important;
  overflow:visible !important}
.talk-info a{
  font-size:9pt !important;
  color:#000 !important;
  text-decoration:none !important}
.talk-category-pill,.category-pill{
  display:inline-block !important;
  background:none !important;
  border:0.25pt solid #666 !important;
  color:#000 !important;
  padding:0 0.1cm !important;
  margin:0 0.15cm 0 0 !important;
  font-size:7pt !important;
  line-height:1 !important;
  font-weight:normal !important;
  text-transform:uppercase !important;
  vertical-align:middle !important}
.talk::before,.talk::after,.talk>a::before,.talk>a::after,.talk-title-overlay::before,.talk-title-overlay::after{
  content:none !important;
  display:none !important;
  height:0 !important;
  width:0 !important;
  margin:0 !important;
  padding:0 !important}
.badge{
  border:none;
  border-bottom:0.5pt dotted #ccc;
  padding:0.2cm 0;
  margin:0 0 0.2cm 0;
  background:none}
.badge-header{
  display:block}
.badge-icon{
  display:none !important}
.badge h3{
  font-size:11pt;
  margin:0}
.badge p{
  font-size:9pt;
  margin:0.1cm 0 0 0}
.community-item{
  border:none;
  border-bottom:0.5pt dotted #ccc;
  padding:0.2cm 0;
  margin:0 0 0.2cm 0;
  background:none}
.community-icon{
  display:none !important}
.content-list li{
  margin-bottom:0.3cm;
  page-break-inside:avoid}
.withSectionSides{
  display:block}
.sectionLeft{
  display:none}
.sectionRight{
  display:block;
  width:100%;
  padding:0}
*{
  background:none !important}
a[href^="http"]:after{
  content:" (" attr(href) ")";
  font-size:8pt;
  font-style:italic;
  color:#666}
a[href^="#"]:after{
  content:""}
@page{
  margin:1cm;
  size:A4;
  @bottom-right{
  content:"Page " counter(page)}
}
#experience,#ai-experience,#open-source{
  page-break-before:always}
}