body{
  margin:0;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:#f5f5f5;
  color:#111;
}
.container{
  max-width:800px;
  margin:0 auto;
  padding:24px 16px 64px;
}
header{
  border-bottom:1px solid rgba(0,0,0,0.06);
  background:#ffffff;
}
.nav-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
}
.brand{
  font-weight:600;
}
.brand span{
  font-weight:400;
  opacity:.7;
  font-size:14px;
}
.lang-switch a{
  font-size:14px;
  text-decoration:none;
  color:inherit;
  opacity:.6;
  margin-left:4px;
}
.lang-switch a.active{
  opacity:1;
  font-weight:600;
}
.hero{
  padding:40px 0 24px;
}
.hero h1{
  font-size:26px;
  line-height:1.25;
  margin-bottom:12px;
}
.hero .subtitle{
  font-size:15px;
  opacity:.8;
  margin-bottom:16px;
}
.cta-button{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;
  background:#0052ff;
  color:#fff;
  text-decoration:none;
  font-size:14px;
}
section+section{
  margin-top:32px;
}
h2,h3{
  margin-top:24px;
}
ul{
  padding-left:20px;
}
footer{
  border-top:1px solid rgba(0,0,0,0.06);
  background:#ffffff;
  padding:16px 0;
  font-size:13px;
  opacity:.7;
}

/* Splash fullscreen using hero.png */
.splash-overlay{
  position:fixed;
  inset:0;
  background:#000 url('hero.png') center center no-repeat;
  background-size:contain;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:999;
  transition:opacity .6s ease;
}
.splash-overlay.splash-hidden{
  opacity:0;
  pointer-events:none;
}
.splash-backdrop{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 65%, rgba(0,0,0,1) 100%);
}
.splash-inner{
  position:relative;
  text-align:center;
  color:#fff;
  padding:24px;
}
.enter-button{
  margin-top:32px;
  padding:10px 20px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.75);
  background:rgba(0,0,0,0.3);
  color:#fff;
  font-size:14px;
}
.enter-button:focus{outline:none;}
.enter-button:active{transform:scale(0.97);}

/* Notebook note */
.notebook-note{
  font-size:13px;
  opacity:0.75;
  margin-top:32px;
}