:root{--notte:#0F1620;--notte-alta:#151F2B;--pergamena:#E7E0D2;--tenue:#7C8794;
--oro:#C9A961;--oro-cupo:#7E6832;}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--notte);color:var(--pergamena);
font-family:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;font-size:19px;line-height:1.7;
-webkit-font-smoothing:antialiased}
.pagina{max-width:33rem;margin:0 auto;padding:3.5rem 1.6rem 4.5rem}
.numero{color:var(--oro);font-size:.95rem;letter-spacing:.08em;margin:0 0 1.4rem}
h1{font-size:2.15rem;font-weight:400;line-height:1.2;letter-spacing:-.01em;margin:0 0 1.5rem}
.filetto{width:3.2rem;height:1px;border:0;margin:0 0 2.6rem;
background:linear-gradient(90deg,var(--oro),transparent)}
.lettore{display:flex;align-items:center;gap:1.1rem;margin:0 0 3rem}
.disco{appearance:none;background:none;border:0;padding:0;width:88px;height:88px;flex:0 0 88px;
cursor:pointer;color:var(--oro);border-radius:50%}
.disco:focus-visible{outline:2px solid var(--oro);outline-offset:4px}
.disco svg{display:block;width:100%;height:100%}
.pista{stroke:var(--oro-cupo);stroke-width:1.2;fill:none;opacity:.5}
.avanzamento{stroke:var(--oro);stroke-width:1.2;fill:none;stroke-linecap:round;
transform:rotate(-90deg);transform-origin:center;transition:stroke-dashoffset .18s linear}
.simbolo{fill:currentColor}
.stato{font-size:.95rem;color:var(--tenue);font-variant-numeric:tabular-nums}
.lettore[data-stato="assente"] .disco{cursor:default;color:var(--oro-cupo)}
.lettore[data-stato="assente"] .pista{opacity:.28}
.video{position:relative;width:100%;aspect-ratio:16/9;margin:0 0 3rem;
background:var(--notte-alta);border:1px solid rgba(201,169,97,.2)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.testo{margin:0 0 2.6rem}
.verso{padding-left:1.6em;text-indent:-1.6em;min-height:1.7em}
.strofa{height:.9rem}
.lingua{border-top:1px solid rgba(201,169,97,.16);margin:0 0 2rem;padding-top:1.8rem}
.lingua h2{font-size:1.4rem;font-weight:400;margin:0 0 .3rem}
.lingua .etichetta{color:var(--oro);font-size:.8rem;letter-spacing:.14em;margin:0 0 1.2rem}
.copertina{margin:0 0 3.2rem}
.copertina h1{margin-bottom:.4rem}
.autore{color:var(--pergamena);margin:0 0 .2rem}
.traduttore{color:var(--tenue);font-size:.95rem;margin:0}
.occhiello{color:var(--tenue);font-size:.98rem;margin:0 0 2.2rem;max-width:26rem}
ol.indice{list-style:none;margin:0;padding:0}
ol.indice li{border-top:1px solid rgba(201,169,97,.16)}
ol.indice li:last-child{border-bottom:1px solid rgba(201,169,97,.16)}
ol.indice a{display:flex;gap:1rem;align-items:baseline;padding:.75rem .2rem;
color:var(--pergamena);text-decoration:none}
ol.indice a:hover,ol.indice a:focus-visible{background:var(--notte-alta);color:var(--oro)}
ol.indice .n{color:var(--oro);font-size:.85rem;letter-spacing:.08em;flex:0 0 2.4em}
.piede{border-top:1px solid rgba(201,169,97,.16);padding-top:1.4rem;font-size:.95rem;color:var(--tenue)}
.piede a{color:var(--tenue)}
.piede a:hover{color:var(--oro)}
.piede p{margin:.2rem 0}
@media (max-width:420px){body{font-size:18px}.pagina{padding:2.6rem 1.3rem 3.5rem}
h1{font-size:1.85rem}.disco{width:76px;height:76px;flex:0 0 76px}}
@media (prefers-reduced-motion:reduce){.avanzamento{transition:none}}