:root{
  --max-width:1180px;
  --header-height:76px;
  --hero-height:65vh;
  --section-padding:88px;
  --section-padding-mobile:56px;
  --spacing-18:18px;
  --spacing-30:30px;
  --spacing-48:48px;
  --card-radius:16px;
  --card-width:360px;
  --card-height:210px;
  --diagram-width:640px;
  --diagram-height:300px;
  --archive-height:120px;
  --footer-height:190px;
  --h1-size:48px;
  --h2-size:31px;
  --body-size:17px;
  --annotation-size:12px;
  --button-size:14px;
  --btn-height:44px;
  --btn-padding:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: "Literata", Georgia, serif;
  font-size:var(--body-size);
  color:#0f172a;
  background-color:#ffffff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}
h1{font-family:"General Sans", ui-sans-serif, system-ui; font-size:var(--h1-size); line-height:1.04; color:#0b2540; margin:0}
h2{font-family:"General Sans", ui-sans-serif, system-ui; font-size:var(--h2-size); margin:0; color:#0b2540}
p{font-size:var(--body-size); margin-top:0; margin-bottom:0}
.container{max-width:var(--max-width); margin-left:auto; margin-right:auto}
header{height:var(--header-height)}
footer{height:var(--footer-height)}
main > section{padding-top:var(--section-padding); padding-bottom:var(--section-padding)}
@media (max-width:1024px){
  main > section{padding-top:var(--section-padding); padding-bottom:var(--section-padding)}
}
@media (max-width:640px){
  h1{font-size:34px}
  main > section{padding-top:var(--section-padding-mobile); padding-bottom:var(--section-padding-mobile)}
  .card{width:100%}
}
.iconify{display:inline-block}
.rounded-2xl{border-radius:18px}
.rounded-xl{border-radius:16px}
.shadow-md{box-shadow:0 6px 18px rgba(2,6,23,0.06)}
.shadow-lg{box-shadow:0 10px 30px rgba(2,6,23,0.08)}
.bg-brand-50{background-color:#eef7ff}
.text-slate-50{color:#ffffff}
.text-slate-700{color:#334155}
.text-slate-600{color:#475569}
.text-slate-500{color:#64748b}
.text-slate-400{color:#94a3b8}
.text-slate-800{color:#0f172a}
.bg-gradient-beam{background:linear-gradient(90deg, rgba(30,136,255,0.06) 0%, rgba(127,191,255,0.02) 50%, rgba(30,136,255,0.04) 100%); animation:beam 6s ease-in-out infinite}
a:focus{outline-offset:2px}
:focus-visible{outline:3px solid rgba(30,136,255,0.18); border-radius:8px}
button:focus-visible, a:focus-visible{box-shadow:0 0 0 4px rgba(30,136,255,0.12)}
#mobile-menu{transition:opacity .28s ease, visibility .28s ease}
#mobile-menu.hidden{opacity:0; visibility:hidden}
#mobile-menu:not(.hidden){opacity:1; visibility:visible}
#mobile-overlay{backdrop-filter:blur(6px)}
#cookie{min-width:260px}
#cookie button{cursor:pointer}
#cookie-accept{border-radius:8px}
#cookie-reject{border-radius:8px}
.grid-cards{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:24px}
.card{background:#ffffff; border-radius:var(--card-radius); width:var(--card-width); height:var(--card-height); padding:20px; display:flex; flex-direction:column; justify-content:space-between}
.diagram-panel{width:100%; max-width:var(--diagram-width); height:var(--diagram-height); border-radius:14px; overflow:hidden}
.archive-strip{width:100%; height:var(--archive-height)}
.btn{height:var(--btn-height); display:inline-flex; align-items:center; justify-content:center; padding-left:var(--btn-padding); padding-right:var(--btn-padding); border-radius:10px; font-size:var(--button-size)}
.btn-primary{background:linear-gradient(90deg,#1e88ff,#7fbfff); color:#ffffff}
.btn-secondary{background:#ffffff; border:1px solid #e6eef9; color:#0b2540}
.card .annotation{font-size:var(--annotation-size); color:#94a3b8}
.meta-note{font-size:var(--annotation-size); color:#64748b}
footer a{color:#334155}
address{font-style:normal}
@media (prefers-reduced-motion:reduce){
  .bg-gradient-beam, *{animation:none !important}
}