— plus the two prose blocks that are not a
: the FAQ answer and the rules list, where the link sits inside a sentence.
Lists of links stay out on purpose (nav, .toc, .footer-col, .index-list, .side-list): there the IS the item.
:where() keeps this at element specificity, so any component that sets its own colour still wins over it. */
:where(p, .faq-a, .rules li) a {
color: var(--link);
font-weight: 600;
transition:
color 0.2s,
text-decoration-color 0.2s;
}
:where(p, .faq-a, .rules li) a:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
.page {
position: relative;
min-height: 100vh;
background: var(--bg);
color: var(--text);
overflow-x: clip;
}
.wrap {
max-width: 1680px;
margin-left: auto;
margin-right: auto;
padding-left: 40px;
padding-right: 40px;
}
main {
position: relative;
z-index: 1;
}
/* Reveal on scroll: hidden state only exists once script.js adds .js-reveal */
.reveal {
transition:
opacity 0.9s var(--ease),
transform 0.9s var(--ease);
}
html.js-reveal .reveal:not(.shown) {
opacity: 0;
transform: translateY(28px);
}
@keyframes fogA {
0% {
transform: translate(-10%, -5%) scale(1);
}
50% {
transform: translate(8%, 10%) scale(1.15);
}
100% {
transform: translate(-10%, -5%) scale(1);
}
}
@keyframes fogB {
0% {
transform: translate(10%, 5%) scale(1.1);
}
50% {
transform: translate(-6%, -8%) scale(0.95);
}
100% {
transform: translate(10%, 5%) scale(1.1);
}
}
@keyframes fogC {
0% {
transform: translate(0, 10%) scale(1);
}
50% {
transform: translate(-8%, -4%) scale(1.2);
}
100% {
transform: translate(0, 10%) scale(1);
}
}
@keyframes grain {
0%,
100% {
transform: translate(0, 0);
}
25% {
transform: translate(-1%, 1%);
}
50% {
transform: translate(1%, -1%);
}
75% {
transform: translate(-1%, -1%);
}
}
@keyframes rise {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Per-app accents */
.hue-1 {
--hue: #f472b6;
--glow: rgba(244, 114, 182, 0.45);
--sa: #2b1422;
--sb: #21101b;
}
.hue-2 {
--hue: #fb7185;
--glow: rgba(251, 113, 133, 0.4);
--sa: #2b151c;
--sb: #211016;
}
.hue-3 {
--hue: #f9a8d4;
--glow: rgba(249, 168, 212, 0.4);
--sa: #2c1a24;
--sb: #22141c;
}
.hue-4 {
--hue: #f0abfc;
--glow: rgba(240, 171, 252, 0.4);
--sa: #2b172d;
--sb: #221323;
}
.hue-5 {
--hue: #fda4af;
--glow: rgba(253, 164, 175, 0.35);
--sa: #2c1920;
--sb: #22131a;
}
.hue-6 {
--hue: #fda4af;
--glow: rgba(253, 164, 175, 0.35);
--sa: #2a1b20;
--sb: #201418;
}
/* Shared bits */
.label {
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
}
.label-pink {
color: var(--pink);
}
.label-violet {
color: var(--violet);
}
.label-cyan {
color: var(--cyan);
}
.label-rose {
color: #f9a8d4;
}
.sec-title {
line-height: 1;
letter-spacing: -0.03em;
margin: 18px 0 0;
}
.sec-title em {
color: var(--muted);
}
.chapter::before,
.essay::before,
.method::before {
content: "";
position: absolute;
top: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.12),
transparent
);
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
border-radius: 999px;
transition:
transform 0.25s var(--ease),
box-shadow 0.3s,
background 0.2s;
}
.btn-lg {
padding: 16px 26px;
font-size: 15px;
}
.btn-md {
padding: 15px 24px;
font-size: 14.5px;
}
.btn-sm {
padding: 14px 22px;
font-size: 14.5px;
}
.btn-light {
background: var(--pink);
color: var(--bg);
font-weight: 600;
border: 0;
}
.btn-light:hover {
color: var(--bg);
box-shadow: 0 20px 50px var(--glow);
}
.btn-glass {
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(16, 12, 18, 0.3);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
font-weight: 500;
}
.btn-glass:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--text);
}
.btn-line {
border: 1px solid rgba(255, 255, 255, 0.16);
background: transparent;
color: var(--text);
font-weight: 500;
}
.btn-line:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--text);
}
/* Flecha decorativa del CTA: en CSS y no en el texto del enlace, para que no entre en el markdown
ni en el nombre accesible. ↗ sale del sitio, ↓ baja en la misma página, → pasa a otra.
.pill y .path-cta ya usaban ::after para su área de clic; ahí el área se muda a ::before, que al
ser una caja absoluta no depende del orden en el DOM. */
.tool-cta::after,
.callout-cta::after,
.pill::after,
.ch-actions .btn-light::after {
content: "↗";
}
.bmenu-cta::after,
.hero-ctas .btn-lg.btn-light::after {
content: "↓";
}
.path-cta::after {
content: "→";
}
.panel-link::after,
.essay-links .text-link::after {
content: "→";
}
.callout-cta::after,
.pill::after,
.panel-link::after,
.essay-links .text-link::after {
margin-left: 0.35em;
}
/* Warm charcoal backdrop with a fine grid and soft raspberry light at the edges. */
.fog {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
background: linear-gradient(145deg, #170f16 0%, #0f0b10 55%, #191117 100%);
}
.fog::before,
.fog::after {
content: "";
position: absolute;
inset: 0;
}
.fog::before {
background-image:
linear-gradient(rgba(172, 133, 158, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(172, 133, 158, 0.04) 1px, transparent 1px);
background-size: 72px 72px;
-webkit-mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.3));
mask-image: linear-gradient(#000, rgba(0, 0, 0, 0.3));
}
.fog::after {
background:
radial-gradient(
ellipse 80% 55% at 0% 0%,
rgba(190, 52, 111, 0.1),
transparent 65%
),
radial-gradient(
ellipse 65% 60% at 100% 100%,
rgba(211, 83, 138, 0.04),
transparent 70%
),
radial-gradient(
ellipse 45% 30% at 50% 80%,
rgba(157, 72, 134, 0.03),
transparent 75%
);
}
.fog > div {
display: none;
}
/* Header */
/* The blur lives on ::before: backdrop-filter on the header itself would make it the containing block for the fixed burger panel */
.site-header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 50;
}
.header-bar {
position: relative;
padding-top: 18px;
padding-bottom: 18px;
display: flex;
align-items: center;
gap: 28px;
}
.logo {
font-weight: 600;
font-size: 26px;
letter-spacing: -0.01em;
display: flex;
align-items: center;
gap: 10px;
}
.logo:hover,
.footer-logo:hover {
color: var(--text);
}
.logo-mark {
flex: none;
width: 42px;
height: 42px;
border-radius: 50%;
}
/* width:max-content porque el menú es absoluto con left:50%: sin él, el ancho disponible que el
navegador le asigna es solo el que queda del centro al borde, y los siete puntos se comprimían y
partían en dos líneas entre 1001 y 1279 px. Con max-content mide lo que mide su texto. */
.nav {
position: absolute;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 38px;
font-size: 13.5px;
width: max-content;
}
.nav a {
color: var(--text);
}
.nav a:hover,
.nav a[aria-current="page"] {
color: var(--text);
}
.header-actions {
margin-left: auto;
display: flex;
align-items: center;
gap: 14px;
}
.nav-cta {
display: inline-block;
padding: 11px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
font-size: 13.5px;
font-weight: 500;
transition:
transform 0.25s var(--ease),
background 0.2s;
}
.nav-cta:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--text);
}
/* Burger (where the nav is hidden):