:root { color-scheme: light dark;
  --accento: #b07a2e; --carta: #f7f2e8; --bordo: #d9c9a8; }
@media (prefers-color-scheme: dark) {
  :root { --carta: #2a2118; --bordo: #4a3c28; }
}
* { box-sizing: border-box; }
body { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem;
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
h1 { font-size: 1.55rem; margin: .5rem 0 .25rem; }
h2 { font-size: 1.2rem; margin-top: 2.4rem; border-bottom: 2px solid var(--bordo);
  padding-bottom: .25rem; }
h3 { font-size: 1.02rem; margin-top: 1.6rem; }
.sotto { color: #8a8a8a; margin-top: 0; }
.lingue { font-size: .85rem; margin: 0 0 1rem; color: #8a8a8a; }
.lingue a { margin-inline-end: .6rem; text-decoration: none; }
.lingue strong { margin-inline-end: .6rem; }
a { color: var(--accento); }

/* Flusso della giornata: sei tappe numerate */
.flusso { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .6rem; padding: 0; margin: 1rem 0; list-style: none; counter-reset: tappa; }
.flusso li { background: var(--carta); border: 1px solid var(--bordo);
  border-radius: .7rem; padding: .6rem .7rem .7rem; counter-increment: tappa;
  font-size: .88rem; line-height: 1.4; }
.flusso li::before { content: counter(tappa); display: block; font-weight: 700;
  color: var(--accento); font-size: 1.15rem; }
.flusso b { display: block; margin-bottom: .1rem; }

/* Passi numerati */
ol.passi { padding-inline-start: 0; list-style: none; counter-reset: passo; }
ol.passi > li { position: relative; padding-inline-start: 2.3rem; margin: .55rem 0;
  counter-increment: passo; }
ol.passi > li::before { content: counter(passo); position: absolute;
  inset-inline-start: 0; top: .1rem; width: 1.55rem; height: 1.55rem;
  border-radius: 50%; background: var(--accento); color: #fff; font-weight: 700;
  font-size: .85rem; display: flex; align-items: center; justify-content: center; }

/* Nomi di pulsanti e voci dell'app */
kbd { font: inherit; font-size: .9em; background: var(--carta);
  border: 1px solid var(--bordo); border-radius: .35rem; padding: 0 .35rem; }

/* Riquadri */
.nota { background: var(--carta); border-inline-start: 4px solid var(--accento);
  border-radius: .4rem; padding: .6rem .9rem; margin: 1rem 0; font-size: .92rem; }
.pro { display: inline-block; background: var(--accento); color: #fff;
  font-size: .7rem; font-weight: 700; border-radius: .3rem; padding: .05rem .4rem;
  vertical-align: middle; }

/* Tabella Free/Pro */
table { border-collapse: collapse; width: 100%; font-size: .92rem; }
th, td { border: 1px solid var(--bordo); padding: .45rem .6rem; text-align: start; }
th { background: var(--carta); }

/* Risoluzione dei problemi */
details { border: 1px solid var(--bordo); border-radius: .6rem;
  padding: .55rem .9rem; margin: .6rem 0; background: var(--carta); }
summary { cursor: pointer; font-weight: 600; }
details p, details ul { margin: .6rem 0 .2rem; font-size: .93rem; }

footer { margin-top: 3rem; border-top: 1px solid var(--bordo);
  padding-top: 1rem; font-size: .88rem; color: #8a8a8a; }

/* Schermate reali dell'app */
.schermate { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: center;
  margin: 1.1rem 0; }
.schermate figure { margin: 0; flex: 1 1 12rem; max-width: 15rem; }
.schermate img { width: 100%; height: auto; display: block;
  border: 1px solid var(--bordo); border-radius: 1.1rem; }
.schermate figcaption { font-size: .8rem; color: #8a8a8a; text-align: center;
  margin-top: .35rem; }

/* La scheda fotografica esportata è quasi quadrata e piena di dettagli
   (mappa, cono, barra): a 15rem si leggerebbe solo la sagoma. */
.schermate figure.larga { flex: 1 1 20rem; max-width: 30rem; }