html,body{margin:0;padding:0;background:var(--bg);color:var(--t1);font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior-y:none}
body{min-height:100vh}
input,button,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none;border-radius:0}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.btn:active,.chip:active{transform:scale(.98)}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
::-webkit-scrollbar{width:0;height:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
a{color:var(--acc)}

@keyframes pop{0%{transform:scale(.82)}60%{transform:scale(1.09)}100%{transform:scale(1)}}
@keyframes up{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

#app{min-height:100vh;max-width:460px;margin:0 auto;position:relative;background:var(--bg);
  padding-top:env(safe-area-inset-top);
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);
  padding-bottom:calc(140px + env(safe-area-inset-bottom))}

/* Header appiccicati: annullano il padding di #app e se lo riprendono
   come padding proprio, così il loro sfondo copre l'isola quando si
   scorre invece di passarci sotto.                                  */
.stick{position:sticky;top:0;z-index:20;margin-top:calc(-1 * env(safe-area-inset-top));
  padding-top:env(safe-area-inset-top);
  background:rgba(11,12,14,.93);backdrop-filter:blur(12px);border-bottom:1px solid var(--b-weak)}
.scr{animation:fade .2s ease}
.pad{padding:0 18px}

/* tipografia */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.h1{font:600 26px/1.1 var(--sans);letter-spacing:-.5px}
.h2{font:600 21px/1.2 var(--sans);letter-spacing:-.4px}
.h3{font:600 17px/1.2 var(--sans);letter-spacing:-.2px}
.h4{font:600 15px/1.25 var(--sans);letter-spacing:-.2px}
.sub{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px;color:var(--t3b);margin-top:5px}
.lbl{font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:1.4px;color:var(--t3b);text-transform:uppercase}
.meta{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--dim2)}
.micro{font-family:var(--mono);font-size:10.5px;letter-spacing:1px;color:var(--dim);text-transform:uppercase}