:root{--bg:#fff3df;--card:#fff;--ink:#1c1410;--muted:#7a6252;--red:#e0281e;--yellow:#ffd21f;--corgi:#f0943a;--edge:#1c1410}
@media(prefers-color-scheme:dark){:root{--bg:#1c1410;--card:#2b1f18;--ink:#fff3df;--muted:#c2a892;--edge:#000}}
*{box-sizing:border-box}
html{touch-action:manipulation;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.35 ui-rounded,"SF Pro Rounded","Nunito",system-ui,sans-serif}
header{background:var(--red);color:#fff;text-align:center;padding:36px 16px 30px;border-bottom:4px solid var(--edge);box-shadow:0 14px 0 var(--yellow),0 18px 0 var(--edge)}
header img{width:176px;height:144px;border:4px solid var(--edge);border-radius:28px;box-shadow:6px 6px 0 var(--edge);transform:rotate(-4deg);transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
h1{margin:20px 0 10px;font-size:clamp(34px,9vw,52px);font-weight:900;line-height:1;letter-spacing:-.03em;text-transform:uppercase;text-shadow:3px 3px 0 var(--edge)}
h1 span{color:var(--yellow)}
#alarm{display:inline-block;margin:0;padding:5px 14px;background:var(--edge);color:#fff;border-radius:99px;font-size:14px;font-weight:700}
#alarm::before{content:"";display:inline-block;width:9px;height:9px;margin-right:8px;border-radius:50%;background:var(--muted)}
#alarm.calm::before{background:#4ed06f}
#alarm.hot::before{background:var(--yellow)}
main{max-width:540px;margin:0 auto;padding:54px 16px 48px}
/* Schermi stretti: in fondo c'è la cuccia del corgi, che non deve coprire l'ultima scheda; l'intestazione si stringe per farle posto. */
@media(max-width:760px){header{padding:22px 16px 20px}header img{width:132px;height:108px;border-radius:22px}h1{margin:16px 0 10px}main{padding:42px 16px 112px}}
ul{list-style:none;margin:0;padding:0;display:grid;gap:18px}
li a{display:flex;align-items:center;gap:16px;padding:16px 18px;background:var(--card);border:3px solid var(--edge);border-radius:20px;box-shadow:5px 5px 0 var(--edge);color:inherit;text-decoration:none;transition:transform .12s,box-shadow .12s}
li:nth-child(odd) a{transform:rotate(-.6deg)}
li:nth-child(even) a{transform:rotate(.6deg)}
li a:focus-visible{transform:translate(-3px,-3px) rotate(0);box-shadow:8px 8px 0 var(--red);outline:none}
@media(hover:hover){li a:hover{transform:translate(-3px,-3px) rotate(0);box-shadow:8px 8px 0 var(--red)}li a:hover .go{transform:translateX(5px)}header img:hover{transform:rotate(4deg) scale(1.06)}}
li a:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--edge)}
.icon{display:grid;place-items:center;flex:none;width:54px;height:54px;font-size:28px;background:var(--yellow);border:3px solid var(--edge);border-radius:50%}
.down .icon{background:var(--corgi)}
.text{flex:1;min-width:0;display:grid}
strong{font-size:22px;font-weight:800}
small{color:var(--muted);font-size:13px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.go{font-size:26px;font-weight:900;color:var(--red);transition:transform .12s}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}