:root {
  --papel: #f5ecdc;
  --ouro: #ffd27a;
  --noite: #14110d;
  --sombra: 0 2px 16px rgba(0,0,0,.9), 0 0 3px rgba(0,0,0,.7);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--noite);
             color: var(--papel); -webkit-tap-highlight-color: transparent; }
body { font-family: 'EB Garamond', Garamond, Georgia, serif; }
button { font: inherit; color: inherit; cursor: pointer; }

/* The picture is the page. Two layers, cross-faded, never one swapped. */
.cenas { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; }
.cena { position: absolute; top: 0; left: 0; right: 0; bottom: 0;
        background-size: cover; background-position: center;
        opacity: 0; transition: opacity 2.4s ease; }
.cena.on { opacity: 1; animation: respira 70s ease-in-out infinite alternate; }
@keyframes respira { from { transform: scale(1); } to { transform: scale(1.07); } }
.cenas::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0;
                height: 64%; pointer-events: none;
                background: linear-gradient(to top, rgba(12,9,6,.93) 0%,
                  rgba(12,9,6,.62) 40%, rgba(12,9,6,0) 100%); }

/* A teleprompter: one column of sentences that glides up as the reading
   moves on, the current one a quarter down the window. One size for all of
   them, and the ends faded rather than cut. */
.palco { position: fixed; left: 0; right: 0;
         bottom: calc(64px + env(safe-area-inset-bottom) + 2vh);
         height: 46vh; z-index: 1; overflow: hidden; padding: 0 6vw;
         -webkit-user-select: none; user-select: none;
         -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 74%, transparent 100%);
         mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 74%, transparent 100%); }
/* Hidden behind the cover: a title over a page of faded prose is clutter. */
body:not(.lendo) .palco { opacity: 0; }
.palco { transition: opacity .8s ease; }
.rolo { position: relative; will-change: transform;
        transition: transform .9s cubic-bezier(.33, 0, .2, 1); }
.rolo.sem { transition: none; }
.bloco { max-width: 28em; margin: 0 auto .6em; text-align: center;
         font-size: clamp(1.45rem, 3.1vw, 2.4rem); line-height: 1.3;
         text-wrap: balance; text-shadow: var(--sombra); }
.bloco.titulo { font-size: clamp(2.2rem, 5.5vw, 3.8rem); letter-spacing: .01em; }
.frase { opacity: .3; transition: opacity .9s ease; }
.frase.atual { opacity: 1; }
.frase.prox { opacity: .55; }
.frase.lida { opacity: .2; }
.w { transition: color .3s linear, opacity .3s linear; }
.w.lido { opacity: .48; }
.w.aqui { opacity: 1; color: var(--ouro); }

/* The cover: the story's page, over the scene where the reader stopped. */
.capa { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 3;
        display: flex; flex-direction: column; justify-content: flex-end;
        padding: 0 6vw calc(6vh + env(safe-area-inset-bottom));
        background: linear-gradient(to top, rgba(12,9,6,.96) 0%, rgba(12,9,6,.78) 50%, rgba(12,9,6,.1) 100%);
        overflow-y: auto; transition: opacity .8s ease; }
.capa.some, .folha.some { opacity: 0; pointer-events: none; visibility: hidden;
                          transition: opacity .5s ease, visibility 0s .5s; }
.capa .corpo { max-width: 40rem; width: 100%; margin: 0 auto; }
.capa h1 { font-weight: 400; font-size: clamp(2.6rem, 8vw, 5rem); margin: 0;
           line-height: 1; text-shadow: var(--sombra); }
.capa .autor { font-style: italic; font-size: clamp(1.05rem, 2.4vw, 1.3rem);
               margin: .55em 0 0; opacity: .8; }
.capa .sinopse { font-size: clamp(1.1rem, 2.3vw, 1.3rem); line-height: 1.45; margin: .9em 0 0;
                 text-shadow: var(--sombra); }
.onde { display: flex; align-items: center; gap: .7rem; font-size: 1.05rem; margin: 1.2rem 0 0; font-style: italic; }
.onde[hidden] { display: none; }
.progresso { flex: 0 0 4.5rem; height: 3px; background: rgba(245,236,220,.2); border-radius: 2px; }
.progresso i { display: block; height: 100%; background: var(--ouro); border-radius: 2px; }
#fim { justify-content: center; text-align: center; }
#fim .botoes { justify-content: center; }
#fim h1 { font-style: italic; }
#fim .apoio { margin-top: 1.4rem; }
#fim .apoio .botoes { margin-top: .6rem; }
.apoio-botao { font: inherit; cursor: pointer; }

/* The site's header, on the cover only. */
.topo { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: space-between;
        align-items: center; padding: calc(.9rem + env(safe-area-inset-top)) 6vw .9rem; }
.marca { font-size: 1.5rem; font-style: italic; text-decoration: none; color: inherit;
         text-shadow: var(--sombra); }
.eu img, .eu .inicial { width: 36px; height: 36px; border-radius: 50%; display: block;
                        object-fit: cover; border: 1px solid rgba(245,236,220,.4); }
.eu .inicial { display: grid; place-items: center; background: #1f1a14; }
a { color: inherit; }

.botoes { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.3rem; }
.botoes button, .botoes a, .botao {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; border: 1px solid rgba(245,236,220,.45); background: rgba(12,9,6,.35);
  border-radius: 999px; padding: .5em 1.4em; font-size: 1.12rem; text-decoration: none; }
.botoes .principal, .botao.principal { background: var(--papel); color: #1d150c; border-color: var(--papel); }
.botoes svg { width: 20px; height: 20px; flex: none; }
.botao.entrar { min-height: 0; font-size: .95rem; padding: .4em 1em; }
button.link { background: none; border: 0; padding: .8rem 0 0; font-size: 1rem;
              text-decoration: underline; text-underline-offset: 3px; opacity: .8; }
.nota { font-size: .98rem; opacity: .68; margin: 1.1em 0 0; line-height: 1.45; }
.nota.miuda { font-size: .85rem; opacity: .55; }
.nota a { text-underline-offset: 2px; }

/* Asking for the microphone: a sheet that says why before the browser
   asks, and where the switch is when the answer was no. */
.folha { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 5;
         display: flex; align-items: flex-end; justify-content: center;
         background: rgba(8,6,4,.62); transition: opacity .3s ease; }
.folha .caixa { width: 100%; max-width: 30rem; max-height: 100%; overflow-y: auto;
                background: #1f1a14; border-radius: 18px 18px 0 0;
                padding: 1.6rem 1.5rem calc(1.4rem + env(safe-area-inset-bottom));
                box-shadow: 0 -10px 40px rgba(0,0,0,.5); }
@media (min-width: 640px) {
  .folha { align-items: center; }
  .folha .caixa { border-radius: 18px; }
}
.folha h2 { font-weight: 400; font-size: 1.7rem; margin: .7rem 0 .3rem; line-height: 1.15; }
.folha p, .folha li { font-size: 1.1rem; line-height: 1.45; }
.folha p { margin: .6rem 0 0; }
.folha ol { margin: .6rem 0 0; padding-left: 1.3rem; }
.folha li + li { margin-top: .45rem; }
.folha .botoes button { flex: 1 1 auto; }
.folha button[hidden] { display: none; }
.privacidade-voz { display: flex; align-items: flex-start; gap: .65rem;
                   border: 1px solid rgba(255,210,122,.3); border-radius: 12px;
                   background: rgba(255,210,122,.045); padding: .85rem; margin-top: 1rem; }
.privacidade-voz > svg { width: 22px; height: 22px; flex: none; color: #ffd27a; margin-top: .1rem; }
.privacidade-voz h3 { font-weight: 500; font-size: 1.1rem; line-height: 1.2; margin: 0; color: #ffd27a; }
.privacidade-voz p { font-size: .98rem; line-height: 1.35; margin: .4rem 0 0; color: rgba(245,236,220,.85); }
.privacidade-voz a { text-underline-offset: 3px; }
.folha .ajuda-mic { margin-top: .8rem; font-size: 1rem; }
.ajuda-mic a { display: inline-block; padding: .5rem 0; text-underline-offset: 4px; }
.privacidade-voz a:focus-visible, .ajuda-mic a:focus-visible { outline: 2px solid #ffd27a; outline-offset: 4px; }
#folha .caixa { display: flex; flex-direction: column; overflow: hidden; }
.folha-conteudo { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: .3rem; }
#folha .caixa > .botoes { flex-shrink: 0; margin-top: .7rem; }
#folha .ajuda-mic { flex-shrink: 0; margin-top: .3rem; margin-bottom: 0; }
@media (max-height: 700px) { #folha .icone { display: none; } }
.motor-voz { position: fixed; top: calc(.7rem + env(safe-area-inset-top)); right: 1rem;
             z-index: 3; max-width: calc(100vw - 2rem); padding: .45rem .7rem;
             border: 1px solid rgba(255,210,122,.25); border-radius: 20px;
             background: rgba(31,26,20,.9); color: #ffd27a; font: inherit; font-size: .82rem; }
.motor-voz[hidden] { display: none; }
.icone { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
         background: rgba(245,236,220,.1); position: relative; }
.icone svg { width: 28px; height: 28px; }
.icone.vivo { background: rgba(229,72,77,.22); color: #ff8a8e;
              animation: chama 1.4s ease-in-out infinite; }
@keyframes chama { 50% { box-shadow: 0 0 0 10px rgba(229,72,77,0); }
                   0%, 100% { box-shadow: 0 0 0 0 rgba(229,72,77,.45); } }
.icone.riscado { color: #f0a39d; background: rgba(196,85,77,.18); }
.icone.riscado::after { content: ""; position: absolute; width: 34px; height: 2px;
                        background: currentColor; transform: rotate(-45deg); border-radius: 1px; }

/* What just happened, in a line above the bar. Never in the pill. */
.aviso { position: fixed; left: 50%; transform: translateX(-50%); z-index: 2;
         bottom: calc(68px + env(safe-area-inset-bottom)); margin: 0;
         width: max-content; max-width: min(92vw, 30rem); text-align: center;
         background: rgba(31,26,20,.92); border-radius: 12px; padding: .6rem 1rem;
         font-size: 1.02rem; line-height: 1.35; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.aviso[hidden] { display: none; }

/* One button on the cover; the voice is offered here, once the reading is open. */
#comVoz[hidden] { display: none; }
.convite-voz { position: fixed; left: 50%; transform: translateX(-50%); z-index: 2;
               bottom: calc(68px + env(safe-area-inset-bottom));
               display: flex; align-items: stretch; width: max-content; max-width: min(92vw, 30rem);
               background: rgba(31,26,20,.94); border: 1px solid rgba(255,255,255,.14); border-radius: 14px;
               box-shadow: 0 4px 20px rgba(0,0,0,.4); overflow: hidden; }
.convite-voz[hidden] { display: none; }
.convite-voz button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
#convidaSim { display: flex; align-items: center; gap: .7rem; padding: .6rem .9rem; text-align: left; }
#convidaSim svg { width: 1.3rem; height: 1.3rem; flex: none; color: #ffd27a; }
#convidaSim b { display: block; font-weight: 500; font-size: 1.02rem; line-height: 1.25; }
#convidaSim small { display: block; font-size: .85rem; line-height: 1.25; opacity: .75; }
#convidaNao { padding: .6rem .8rem; font-size: .9rem; opacity: .75; white-space: nowrap; border-left: 1px solid rgba(255,255,255,.14); }
/* No room for the words beside five other buttons: the offer above says them. */
@media (max-width: 480px) {
  .mic { flex: none; padding: 0 .85rem !important; }
  .mic:not(.on):not(.liga) span { display: none; }
}
@media (hover: hover) { .convite-voz button:hover { background: rgba(255,255,255,.08); opacity: 1; } }

/* The bar: leave, back, the microphone, forward. */
.barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
         display: flex; justify-content: center; align-items: center; gap: .45rem;
         padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom)); }
.barra > button { display: grid; place-items: center; background: rgba(12,9,6,.5); border: 0;
                  border-radius: 999px; height: 48px; min-width: 48px; padding: 0; }
.barra > button svg { width: 22px; height: 22px; }

/* The microphone is a state with three values. Off is the one that asks
   for something, so it is the one that shows: a microphone and "Ler em
   voz alta". On is the quiet one — the same dark glass as the other
   buttons, a small red dot whose ring grows with the voice, and a word.
   It was a filled red pill first, and over a scene it was the loudest thing
   on the screen: "perde a imersão". The words lighting up already say the
   voice is being followed; the dot is for when they stop. */
.mic { display: flex !important; align-items: center; gap: .5rem; padding: 0 1.1rem !important;
       font-size: 1.02rem; white-space: nowrap; border: 1px solid rgba(245,236,220,.3) !important; }
.mic svg { width: 19px !important; height: 19px !important; }
.mic i { display: none; width: 8px; height: 8px; border-radius: 50%; flex: none;
         box-shadow: 0 0 0 calc(var(--nivel, 0) * 6px) rgba(229,72,77,.3);
         transition: box-shadow .15s ease-out; }
.mic.liga { color: #ffd27a; border-color: rgba(255,210,122,.5) !important; }
.mic.liga svg { animation: pulsa 1s ease-in-out infinite; }
.mic.on { border-color: transparent !important; }
.mic.on svg { display: none; }
.mic.on i { display: block; background: #e5484d; }
.mic.on span { opacity: .7; font-style: italic; }

/* A still pointer hides the bar and the cursor (leitura.js, recolhe). */
.barra { transition: opacity .6s ease; }
body.imerso .barra { opacity: 0; pointer-events: none; transition-duration: 1.2s; }
body.imerso { cursor: none; }
@keyframes pulsa { 50% { opacity: .35; } }
.barra[hidden] { display: none; }
@media (max-width: 520px) {
  .capa .botoes button, #fim .botoes > * { flex: 1 1 100%; }
  .capa { padding-bottom: calc(4vh + env(safe-area-inset-bottom)); }
}

/* Sharing: a quiet link under the buttons, and a short menu where there is
   no phone share sheet. */
.acoes { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
button.link.partilhar { display: inline-flex; align-items: center; gap: .4rem; }
button.link.partilhar svg { width: 18px; height: 18px; }
.lista-partilha { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.lista-partilha a, .lista-partilha button {
  display: block; text-align: left; text-decoration: none; padding: .8rem 1rem; font-size: 1.1rem;
  border-radius: 12px; border: 1px solid rgba(245,236,220,.2); background: rgba(245,236,220,.06); }
.lista-partilha a:hover, .lista-partilha button:hover { background: rgba(245,236,220,.12); }
#partilha h2 { margin-top: 0; }
#partilha .nota { font-style: italic; }
.nota.guardar { margin-top: 1.6rem; }

/* Full screen: the corners open out, and fold in once it is full. */
.barra > button[hidden] { display: none; }
.tela-cheia svg + svg { display: none; }
.tela-cheia.cheia svg { display: none; }
.tela-cheia.cheia svg + svg { display: block; }

/* ---- Series (14 Oct): the line over an episode's title, the next-episode button ---- */
.serie-linha { margin: 0 0 .5rem; font-size: 1.05rem; font-style: italic; }
.serie-linha a { text-decoration: none; opacity: .8; border-bottom: 1px solid rgba(245,236,220,.35); }
.serie-linha a:hover { opacity: 1; }
.botoes button.proximo[disabled] { opacity: .5; cursor: default; }

/* ---- Text beside the picture (computer only): body.lado, leitura.js ----
   The caption becomes a page: a column on the left set as prose, with its
   paragraphs, the sentence being read bright and the rest of the page
   readable around it; the whole picture on the right, contained, over a
   blurred copy of itself so its edges do not fall into black. The bar and
   the messages belong to the column. Under the same condition the button
   is offered on, so a window made narrow falls back to the caption. */
.barra > button.lado[aria-pressed="true"] { color: var(--ouro); }
@media (min-width: 1000px) and (min-aspect-ratio: 6/5) {
  body.lado.lendo { --coluna: clamp(26rem, 38vw, 40rem); }
  body.lado.lendo .cenas { left: var(--coluna); box-shadow: inset 1px 0 0 rgba(245,236,220,.08); overflow: hidden; }
  body.lado.lendo .cenas::after { display: none; }
  /* The layer's own picture is hidden; its two pseudo-elements draw it,
     blurred and cover-cropped behind, whole in front. */
  body.lado.lendo .cena { background-size: 0 0; background-repeat: no-repeat; overflow: hidden; }
  body.lado.lendo .cena::before, body.lado.lendo .cena::after { content: ""; position: absolute; background: inherit; }
  body.lado.lendo .cena::before { inset: -60px; background-size: cover; background-position: center;
                            filter: blur(38px) brightness(.42) saturate(.9); }
  body.lado.lendo .cena::after { inset: 0; background-size: contain; background-position: center;
                           background-repeat: no-repeat; }
  body.lado.lendo .cena.on { animation-name: respira-lado; }
  body.lado.lendo .palco { right: auto; width: var(--coluna); top: 0;
                     bottom: calc(76px + env(safe-area-inset-bottom)); height: auto;
                     padding: 0 clamp(2rem, 3.4vw, 3.6rem);
                     -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 82%, transparent 100%);
                     mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 82%, transparent 100%); }
  body.lado.lendo .rolo { padding-top: 1px; }
  body.lado.lendo .bloco { display: inline; max-width: none; margin: 0; text-align: left;
                     font-size: clamp(1.25rem, 1.05rem + .5vw, 1.6rem); line-height: 1.6;
                     text-wrap: wrap; text-shadow: none; }
  body.lado.lendo .bloco::after { content: " "; }
  /* A paragraph starts on its own line, indented, as in a book. */
  body.lado.lendo .bloco.par::before { content: ""; display: block; height: .7em; }
  body.lado.lendo .bloco.par .frase:first-child { padding-left: 1.5em; }
  body.lado.lendo .bloco.titulo { display: block; font-size: clamp(2.1rem, 1.6rem + 1.4vw, 3rem);
                            line-height: 1.1; margin: 0 0 .6em; }
  body.lado.lendo .bloco.titulo + .bloco.par::before { display: none; }
  body.lado.lendo .frase { opacity: .42; }
  body.lado.lendo .frase.lida { opacity: .42; }
  body.lado.lendo .frase.prox { opacity: .62; }
  body.lado.lendo .frase.atual { opacity: 1; }
  body.lado.lendo .barra { right: auto; width: var(--coluna); }
  body.lado.lendo .aviso { left: calc(var(--coluna) / 2); max-width: calc(var(--coluna) - 2rem); }
}
@keyframes respira-lado { from { transform: scale(1); } to { transform: scale(1.03); } }

/* ---- Saved sentences (29 Oct): frases.js ---- */
/* ---- While reading: the bar's bookmark, the line under saved words, the toast ---- */
.barra > button.vv-marca svg { width: 21px; height: 21px; }
.barra > button.vv-marca[aria-pressed="true"] { color: var(--ouro); }
.barra > button.vv-marca[aria-pressed="true"] svg { fill: currentColor; }
/* The line is a background, stretched over the space after each word
   (a bare text node, which cannot be styled) except the last one. */
.w.vv-g { background: linear-gradient(rgba(255,210,122,.8), rgba(255,210,122,.8)) left calc(100% - .06em) / 100% 1.5px no-repeat;
          padding-right: .28em; margin-right: -.28em; }
.w.vv-g.vv-gfim { padding-right: 0; margin-right: 0; }
/* With a mouse the text can be selected; a finger keeps the long press. */
@media (pointer: fine) {
  body.lendo .palco { -webkit-user-select: text; user-select: text; }
  .palco ::selection { background: rgba(255,210,122,.32); color: #fff; }
}
.vv-pop { position: fixed; z-index: 7; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .45rem;
          padding: .45rem .95rem; border: 1px solid rgba(255,210,122,.5); border-radius: 999px;
          background: #1f1a14; color: var(--ouro); font-size: 1rem; box-shadow: 0 6px 24px rgba(0,0,0,.55); }
.vv-pop[hidden] { display: none; }
.vv-pop[disabled] { opacity: .7; cursor: default; }
.vv-pop svg { width: 17px; height: 17px; }
/* At the top: the bottom belongs to the reader's own messages. */
.vv-toast { position: fixed; left: 50%; top: calc(1rem + env(safe-area-inset-top)); z-index: 7;
            transform: translate(-50%, -8px); margin: 0; padding: .55rem 1rem; border-radius: 12px;
            background: rgba(31,26,20,.94); font-size: 1rem; opacity: 0; pointer-events: none;
            transition: opacity .25s ease, transform .25s ease; white-space: nowrap; }
.vv-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- Where they come back: a line on the cover, cards at the end ---- */
button.link.vv-link-suas { display: inline-flex; align-items: center; gap: .4rem; }
button.link.vv-link-suas svg { width: 17px; height: 17px; fill: var(--ouro); stroke: var(--ouro); }
button.link.vv-link-suas[hidden] { display: none; }
#fim { justify-content: safe center; padding-top: 4rem; }
#fim .corpo { max-width: 52rem; }
.vv-suas { margin-top: 1.8rem; text-align: left; }
.vv-suas[hidden] { display: none; }
.vv-suas h2 { font-weight: 400; font-size: 1.45rem; margin: 0; font-style: italic; }
.vv-cartoes { display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x proximity;
              padding: .7rem 0 .6rem; scrollbar-width: thin; scrollbar-color: rgba(245,236,220,.25) transparent; }
.vv-cartao { position: relative; flex: none; width: 210px; aspect-ratio: 4 / 5; padding: 0; border: 0;
             border-radius: 12px; overflow: hidden; background-size: cover; background-position: center;
             text-align: left; scroll-snap-align: start; transition: transform .2s ease; }
.vv-cartao:hover { transform: translateY(-2px); }
.vv-cartao::before { content: ""; position: absolute; inset: 0;
                     background: linear-gradient(to top, rgba(12,9,6,.95) 10%, rgba(12,9,6,.3) 70%, rgba(12,9,6,.1)); }
.vv-cartao span { position: absolute; left: .8rem; right: .8rem; bottom: .8rem; font-style: italic; font-size: 1rem;
                  line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
.vv-folha-suas .vv-cartoes { flex-wrap: wrap; overflow: visible; }
.vv-folha-suas .vv-cartao { width: calc(50% - .3rem); }
.vv-folha-suas .caixa { max-width: 34rem; }
.vv-folha-cartao .caixa { max-width: 26rem; text-align: center; }
.vv-previa { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; background: #2a231b; object-fit: cover; }
.vv-folha-cartao .botoes { justify-content: center; }
.vv-folha-cartao .botoes button[hidden] { display: none; }
.vv-folha-cartao button.link { padding: .2rem .4rem; }
@media (max-width: 520px) { .vv-cartao { width: 180px; } }

/* Notes (notas.js). The dotted line is enough to be found, not enough to be
   read as a link; the wider ::after is for a finger. */
.w.nota-m { position: relative; cursor: pointer;
  text-decoration: underline dotted rgba(255, 210, 122, .8) 2px; text-underline-offset: .2em; }
.w.nota-m::after { content: ""; position: absolute; inset: -.45em -.3em; }
/* The editor speaking, not the author: "the papyrus is torn here". */
.w.editor { font-style: italic; }
.nota-veu { position: fixed; z-index: 70; inset: 0; }
.nota-cartao { position: fixed; z-index: 71; box-sizing: border-box; padding: 1rem 2.6rem 1.05rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: .85rem;
  background: rgba(20, 16, 11, .9); color: #f4ecdd; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 1.05rem; line-height: 1.45; text-align: left; animation: nota-entra .22s ease; }
.nota-cartao b { display: block; margin-bottom: .25rem; color: #ffd27a; font-weight: normal; }
.nota-cartao p { margin: 0; }
.nota-cartao button { position: absolute; top: .3rem; right: .3rem; width: 2.75rem; height: 2.75rem;
  border: 0; background: none; color: inherit; font-size: 1.3rem; cursor: pointer; }
@keyframes nota-entra { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .nota-cartao { animation: none; } }
.nota-fim { margin-top: 1.8rem; text-align: left; }
.nota-fim h2 { font-weight: 400; font-size: 1.45rem; margin: 0 0 .5rem; font-style: italic; }
.nota-fim p { margin: .5rem 0; line-height: 1.45; }
.nota-fim b { color: #ffd27a; font-weight: normal; }