:root { --fondo: #fbf4e1; --carta: #fffaf0; --testo: #1f2933; --tenue: #64748b; --bordo: #e2d9c2; --accento: #00838f; }
@media (prefers-color-scheme: dark) {
  :root { --fondo: #0f172a; --carta: #1e293b; --testo: #e2e8f0; --tenue: #94a3b8; --bordo: #334155; --accento: #4dd0e1; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--fondo); color: var(--testo); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
main { width: min(44rem, 100%); padding: 2rem 1rem; text-align: center; }
h1 { margin: 0; font-size: 2.25rem; letter-spacing: -0.02em; }
.sotto { margin: 0.5rem 0 2rem; color: var(--tenue); }
nav { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
nav a { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.5rem 1rem; border: 1px solid var(--bordo); border-radius: 0.75rem; background: var(--carta); color: inherit; text-decoration: none; }
nav a:hover, nav a:focus-visible { border-color: var(--accento); outline: none; }
.sigla { font-size: 1.75rem; font-weight: 700; color: var(--accento); }
.nome { color: var(--tenue); }