:root{
  --papel:#f4f1ea; --papel-2:#ebe6db; --papel-3:#e2dccf;
  --tinta:#14110e; --tinta-2:#463f35; --tinta-3:#786e5f;
  --regua:rgba(20,17,14,.16); --regua-forte:rgba(20,17,14,.34);
  --alimentar:#067a5e; --outras:#b26a12;
  --alerta:#a3271b; --atencao:#8a5a05;
  --realce:rgba(6,122,94,.10); --realce-solido:#dce5dc;
  --sombra:0 1px 0 rgba(20,17,14,.06), 0 18px 40px -28px rgba(20,17,14,.5);
}
:root[data-tema="escuro"]{
  --papel:#16150f; --papel-2:#1e1c15; --papel-3:#28251c;
  --tinta:#f0ead9; --tinta-2:#c3baa5; --tinta-3:#8e8676;
  --regua:rgba(240,234,217,.16); --regua-forte:rgba(240,234,217,.3);
  --alimentar:#2e9c80; --outras:#c08722;
  --alerta:#e2705f; --atencao:#d6a53f;
  --realce:rgba(46,156,128,.14); --realce-solido:#1a281f;
  --sombra:0 1px 0 rgba(0,0,0,.4), 0 18px 40px -26px #000;
}
*{box-sizing:border-box}
/* `#login{display:grid}` tem especificidade maior que o [hidden] da folha do
   navegador — sem isto, esconder a tela de login não esconde nada e ela fica
   por cima do app depois que a sessão abre. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--papel); color:var(--tinta);
  font:400 16px/1.55 "Newsreader",Georgia,serif;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
/* grão de papel */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
:root[data-tema="escuro"] body::before{mix-blend-mode:screen; opacity:.22}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1}
.num{font-family:"IBM Plex Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.eyebrow{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--tinta-3);
}

h1{
  font:400 clamp(38px,6.2vw,74px)/0.95 "Instrument Serif",Georgia,serif;
  margin:14px 0 0; letter-spacing:-.015em; max-width:16ch;
}
h1 em{font-style:italic; color:var(--tinta-2)}

.botao{
  font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; padding:10px 14px; cursor:pointer;
  border:1px solid var(--regua-forte); background:transparent; color:var(--tinta-2);
}
.botao:hover{background:var(--tinta); color:var(--papel); border-color:var(--tinta)}