:root{ --bg0:#1E2142; --bg1:#0C0D16; --ink:#F4F4F8; --mute:#8A8DA3; --red:#FF3B4A; }
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); background:var(--bg1);
  background-image:linear-gradient(160deg, var(--bg0) 0%, var(--bg1) 70%);
  font-family:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  display:flex; flex-direction:column; overflow:hidden; -webkit-font-smoothing:antialiased;
}
header{padding:clamp(20px,3vw,40px) clamp(20px,3vw,40px) 0; display:flex; justify-content:space-between; align-items:center; position:relative; z-index:2}
header svg{display:block}
main{flex:1; display:flex; align-items:center; padding:0 clamp(20px,3vw,40px)}
footer{display:flex; justify-content:space-between; padding:0 clamp(20px,3vw,40px) clamp(20px,3vw,40px); font-size:13px; color:var(--mute); position:relative; z-index:2}

/* el cuadrado, enorme, pegado en la esquina */
.mark{
  position:fixed; right:-6vw; bottom:-8vw; width:38vw; height:38vw; min-width:260px; min-height:260px;
  pointer-events:none; z-index:1;
}
.mark .sq{position:absolute; inset:0; background:var(--red); transform:rotate(-9deg)}
@media (max-width:700px){ .mark{width:64vw; height:64vw; right:-14vw; bottom:-16vw} }

.langs{display:flex; gap:12px; font-size:13px}
.langs a{color:var(--mute); text-decoration:none}
.langs a:hover, .langs a[aria-current]{color:var(--ink)}

/* Left, next to the name: the right corner belongs to the red square. */
footer{justify-content:flex-start; gap:24px}
footer .legal{display:flex; gap:16px}
footer a{color:var(--mute); text-decoration:none}
footer a:hover{color:var(--ink)}

/* Pages with long text (template "legal"): they scroll, and the square stays out of the way. */
/* The body grows with the text and paints the gradient once. Without a background of its own,
   html would take the body's gradient sized to one screen and repeat it on scroll. */
html:has(body.page){background:var(--bg1)}
body.page{overflow:visible; height:auto; min-height:100%}
body.page .mark{display:none}
body.page main{display:block; padding:clamp(32px,6vw,72px) clamp(20px,3vw,40px)}
.page-article{max-width:720px; margin:0 auto; line-height:1.7; color:#C9CBD8}
.page-article h1{font-size:clamp(32px,5vw,48px); line-height:1.1; font-weight:600; letter-spacing:-.02em; color:var(--ink); margin:0 0 32px}
.page-article h2{font-size:20px; font-weight:600; color:var(--ink); margin:40px 0 12px}
.page-article a{color:var(--ink)}
.page-article ul{padding-left:20px}
.page-article li{margin:4px 0}

.not-found{flex:1; display:flex; align-items:center; justify-content:center; padding:0}
.not-found a{color:var(--red)}