:root {
   --fons: #f6f5fb;
   --superficie: #ffffff;
   --text: #1d1b26;
   --text-suau: #5c5970;
   --vora: #e2e0ec;
   --accent: #5b4bd6;
   --accent-text: #ffffff;
   --codi-fons: #efedf7;
}

@media (prefers-color-scheme: dark) {
   :root {
      --fons: #14131a;
      --superficie: #1e1c27;
      --text: #ecebf3;
      --text-suau: #a6a3b8;
      --vora: #34313f;
      --accent: #8f82ff;
      --accent-text: #14131a;
      --codi-fons: #2a2836;
   }
}

* { box-sizing: border-box; }

body {
   margin: 0;
   background: var(--fons);
   color: var(--text);
   font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   line-height: 1.55;
}

main {
   max-width: 760px;
   margin: 0 auto;
   padding: 48px 16px 64px;
}

a { color: var(--accent); }

.capcalera {
   text-align: center;
   margin-bottom: 40px;
}

.capcalera img {
   width: 112px;
   height: 112px;
   border-radius: 28px;
}

h1 {
   font-size: 2.2rem;
   margin: 16px 0 8px;
}

.subtitol {
   color: var(--text-suau);
   font-size: 1.1rem;
   margin: 0;
}

.tornar {
   display: inline-block;
   margin-bottom: 24px;
   text-decoration: none;
}

.seccions {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 16px;
}

.targeta {
   background: var(--superficie);
   border: 1px solid var(--vora);
   border-radius: 16px;
   padding: 24px;
}

a.targeta {
   display: block;
   color: inherit;
   text-decoration: none;
   transition: border-color 0.15s, transform 0.15s;
}

a.targeta:hover,
a.targeta:focus-visible {
   border-color: var(--accent);
   transform: translateY(-2px);
}

.targeta h2 {
   margin: 0 0 8px;
   font-size: 1.4rem;
}

.targeta p {
   margin: 0 0 12px;
   color: var(--text-suau);
}

.targeta p:last-child { margin-bottom: 0; }

.boto {
   display: inline-block;
   background: var(--accent);
   color: var(--accent-text);
   padding: 12px 20px;
   border-radius: 999px;
   font-weight: 600;
   text-decoration: none;
}

.boto.secundari {
   background: transparent;
   color: var(--accent);
   border: 1px solid var(--accent);
}

.botons {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin: 16px 0;
}

code, pre {
   font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
   font-size: 0.9rem;
   background: var(--codi-fons);
   border-radius: 6px;
}

code { padding: 2px 6px; overflow-wrap: anywhere; }

code.empremta { overflow-wrap: normal; }

pre {
   padding: 12px 14px;
   overflow-x: auto;
}

pre code { padding: 0; background: none; }

footer {
   text-align: center;
   color: var(--text-suau);
   font-size: 0.9rem;
   margin-top: 48px;
}

.comptador {
   font-size: 0.95rem;
}