:root {
  --paper: #f4f1ea;
  --paper-2: #ebe7dc;
  --ink: #1a1917;
  --ink-soft: #746f63;
  --rule: #d7d2c6;
  --blue: #1b4fd6;
  --red: #d23a2c;
  --radius: 3px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--paper); color: var(--ink); }

body {
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border-top: 4px solid var(--blue);
}

/* ---- Topo: marca + navegação ---- */
.masthead {
  display: flex;
  align-items: baseline;
  gap: 28px;
  flex-wrap: wrap;
  padding: 18px 22px 14px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}
.brand .mark {
  width: 11px;
  height: 11px;
  background: var(--red);
  display: inline-block;
  transform: translateY(-1px);
}
.brand .num { color: var(--blue); }

.mast-nav {
  display: flex;
  gap: 22px;
  flex: 1;
  flex-wrap: wrap;
}
.nav-link {
  border: 0;
  background: none;
  padding: 0 0 3px;
  font-family: inherit;
  font-size: 0.78rem;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link.is-on { color: var(--ink); border-bottom-color: var(--blue); }

.timer {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--red);
  letter-spacing: 0.06em;
}

/* ---- Faixa de progresso ---- */
.progress-strip { border-bottom: 1px solid var(--ink); }
.progress-line { height: 2px; background: var(--rule); display: flex; }
.progress-line > div { height: 100%; width: 0%; transition: width 0.4s ease; }
.bar-blue { background: var(--blue); }
.bar-red { background: var(--red); }
.progress-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 22px 10px;
  font-size: 0.68rem;
  color: var(--ink-soft);
}
#progress-count { font-variant-numeric: tabular-nums; }

/* ---- Layout central ---- */
main {
  flex: 1;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  flex-direction: column;
}

.study { padding: 40px 0; }

/* ---- Frase de contexto ---- */
.sentence {
  margin-bottom: 24px;
  padding: 2px 0 2px 14px;
  border-left: 3px solid var(--blue);
}
.sentence-label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.sentence-text {
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.45;
}
.sentence-text b { color: var(--blue); font-weight: 700; }

/* ---- Headword ---- */
.word-row { display: flex; align-items: center; gap: 18px; margin-bottom: 12px; }
.word {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 10vw, 4.2rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.speak-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.speak-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.speak-btn:active { transform: translateY(1px); }
.speak-btn svg { display: block; }

.ask {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 26px;
}
.ask.alert { color: var(--red); }

/* ---- Múltipla escolha ---- */
.options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  overflow: hidden;
}
.option {
  background: var(--paper);
  border: none;
  padding: 22px 16px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.option:hover:not(:disabled) { background: var(--blue); color: #fff; }
.option:disabled { cursor: default; }
.option.correct { background: var(--blue); color: #fff; }
.option.wrong { background: var(--paper); color: var(--red); text-decoration: line-through; }

/* ---- Escrever ---- */
.type-form { display: flex; flex-direction: column; gap: 12px; }
.type-input {
  width: 100%;
  padding: 18px 16px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  font: inherit;
  font-size: 1.1rem;
  color: var(--ink);
  outline: none;
}
.type-input::placeholder { color: var(--ink-soft); }
.type-input:focus { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(27, 79, 214, 0.18); }
.type-input.correct { border-color: var(--blue); color: var(--blue); }
.type-input.wrong { border-color: var(--red); color: var(--red); }

/* ---- Botões ---- */
.btn {
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  padding: 17px;
  font: inherit;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.next-btn { margin-top: 20px; width: 100%; }

/* ---- Palavra-ferramenta (ficha gramatical) ---- */
.grammar { display: flex; flex-direction: column; gap: 16px; }
.grammar-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-left: 3px solid var(--red);
  padding-left: 16px;
}
.grammar-note { font-size: 1.05rem; line-height: 1.5; }
.grammar-ex {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}
.grammar-ex-en { font-family: var(--serif); font-size: 1.15rem; line-height: 1.4; }
.grammar-ex-en b { color: var(--blue); font-weight: 700; }
.grammar-ex-pt { color: var(--ink-soft); font-size: 0.95rem; margin-top: 4px; }
.grammar-rate-q {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.grammar-rate { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* botão secundário (contorno) */
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ---- Feedback ---- */
.feedback { margin-top: 24px; min-height: 24px; font-size: 0.98rem; }
.feedback .tag {
  display: inline-block;
  padding: 4px 9px;
  margin-right: 10px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  vertical-align: middle;
}
.feedback.ok { color: var(--blue); }
.feedback.mid, .feedback.bad { color: var(--ink); }
.feedback.mid .tag, .feedback.bad .tag { color: var(--red); }
.feedback b { font-weight: 700; }
.feedback .fb-alt {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0;
  text-transform: none;
}
.feedback .fb-note {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  letter-spacing: 0;
  text-transform: none;
}

/* ---- Painel de explicação + exemplos ---- */
.info { margin-top: 20px; }
.info-note {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.info-ex { margin-bottom: 12px; }
.info-ex-en {
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.4;
}
.info-ex-en b { color: var(--blue); font-weight: 700; }
.info-ex-pt { color: var(--ink-soft); font-size: 0.9rem; margin-top: 2px; }

/* ---- Rodapé ---- */
footer { margin-top: auto; padding: 20px 22px; border-top: 1px solid var(--rule); }
.link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--red); }

/* ---- Topo: cronômetro ---- */
.mast-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.timer {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  padding: 5px 9px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
}
.timer.ending { color: var(--red); border-color: var(--red); }

/* ---- Tela inicial ---- */
.home-screen { padding: 42px 0 50px; }
.home-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 7vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 8px 0 10px;
}
.home-stats {
  color: var(--ink-soft);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  margin-bottom: 30px;
}
.home-title .hl { color: var(--blue); }
.home-title b { font-weight: 700; }
.home-prompt {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
}
.did-you-know {
  margin-top: 26px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  background: var(--paper-2);
}
.dyk-label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 6px;
}
.dyk-text { font-size: 0.95rem; line-height: 1.5; color: var(--ink); }

.sprint-choice { display: flex; flex-direction: column; gap: 12px; }
.sprint-free {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 20px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sprint-free:hover { background: var(--blue); border-color: var(--blue); }
.sprint-main { font-size: 1.25rem; font-weight: 700; }
.sprint-sub { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.sprint-times { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sprint-times button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px 10px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.sprint-times button:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.sprint-times b { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sprint-times span {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}
.sprint-times button:hover span { color: #fff; }

/* palavra em português (modo inverso) */
.word.pt { font-size: clamp(2.2rem, 8vw, 3.4rem); }

/* ---- Tela de fim de sessão ---- */
.end-screen { padding: 44px 0; }
.end-title {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 6vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 8px 0 22px;
}
.end-summary { border-top: 1px solid var(--ink); margin-bottom: 24px; }
.end-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.end-row span {
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.64rem;
}
.end-row b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.end-encourage {
  color: var(--ink);
  line-height: 1.55;
  max-width: 46ch;
  border-left: 3px solid var(--blue);
  padding-left: 14px;
  margin-bottom: 26px;
}
.end-actions { display: flex; gap: 12px; }
.end-actions .btn { min-width: 160px; }

/* ---- Rodapé com dois botões ---- */
footer { display: flex; gap: 20px; align-items: center; }

/* ---- Toast de conquista ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(18px);
  background: var(--ink);
  color: var(--paper);
  padding: 13px 20px;
  border-radius: var(--radius);
  border-left: 4px solid var(--blue);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 50;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.hidden { display: none !important; }

@media (max-width: 380px) {
  .options { grid-template-columns: 1fr; }
}


/* ============ Telas de lista (minhas palavras / o básico) ============ */
.board { padding: 34px 0 48px; }
.screen-title {
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 400;
  margin-bottom: 14px;
}
.board-lead {
  color: var(--ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 26px;
  max-width: 46ch;
}
.back-link { margin-bottom: 18px; display: inline-block; }

/* ---- Abas dos grupos ---- */
.bucket-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.bucket-tab {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: none;
  font-family: inherit;
  font-size: 0.72rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.bucket-tab b { font-size: 0.86rem; font-variant-numeric: tabular-nums; color: var(--ink); }
.bucket-tab:hover { border-color: var(--ink-soft); }
.bucket-tab.is-on { border-color: var(--ink); color: var(--ink); background: var(--paper-2); }
.bucket-tab.is-on b { color: var(--blue); }
.bucket-explain {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ---- Lista de palavras ---- */
.bucket-list { display: flex; flex-direction: column; }
.wrow {
  padding: 11px 0;
  border-top: 1px solid var(--rule);
}
.wrow:last-child { border-bottom: 1px solid var(--rule); }
.wrow-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.wrow-en {
  font-family: var(--serif);
  font-size: 1.12rem;
  min-width: 7.5rem;
}
.wrow-pt { color: var(--ink-soft); font-size: 0.86rem; flex: 1; }
.wrow-score {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hint-btn {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: none;
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.hint-btn:hover { border-color: var(--red); }
.wrow-hint {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--paper-2);
  border-left: 3px solid var(--red);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.wrow-hint p { font-size: 0.86rem; line-height: 1.55; }
.wrow-hint .h-uso { margin-bottom: 9px; }
.wrow-hint .h-en { font-family: var(--serif); font-size: 0.98rem; }
.wrow-hint .h-pt { color: var(--ink-soft); font-size: 0.82rem; margin-top: 2px; }
.bucket-empty {
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
  padding: 18px 0;
}

/* ---- O básico do básico ---- */
.lesson-list { display: flex; flex-direction: column; }
.lesson-card {
  display: flex;
  align-items: baseline;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 15px 0;
  border: 0;
  border-top: 1px solid var(--rule);
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.lesson-card:last-child { border-bottom: 1px solid var(--rule); }
.lesson-card:hover .lesson-card-t { color: var(--blue); }
.lesson-card-n {
  font-size: 0.68rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  min-width: 1.6rem;
}
.lesson-card-t { font-family: var(--serif); font-size: 1.14rem; }
.lesson-card-s { color: var(--ink-soft); font-size: 0.8rem; flex: 1; }
.lesson-card-done { color: var(--blue); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }

.lesson-text { margin-bottom: 30px; }
.lesson-text p { font-size: 0.96rem; line-height: 1.62; margin-bottom: 12px; max-width: 52ch; }
.lesson-text .l-ex {
  font-family: var(--serif);
  font-size: 1.05rem;
  padding: 3px 0 3px 14px;
  border-left: 3px solid var(--blue);
  margin-bottom: 6px;
}
.lesson-text .l-ex span { color: var(--ink-soft); font-family: var(--sans); font-size: 0.82rem; }

.drill-q { margin-bottom: 26px; }
.drill-n {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.drill-frase {
  font-family: var(--serif);
  font-size: 1.24rem;
  line-height: 1.4;
  margin-bottom: 4px;
}
.drill-frase .gap {
  display: inline-block;
  min-width: 3.4em;
  border-bottom: 2px solid var(--ink);
  text-align: center;
}
.drill-frase .gap.ok { border-color: var(--blue); color: var(--blue); }
.drill-frase .gap.no { border-color: var(--red); color: var(--red); }
.drill-pt { color: var(--ink-soft); font-size: 0.84rem; margin-bottom: 12px; }
.drill-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.drill-opt {
  padding: 8px 14px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: none;
  font-family: var(--serif);
  font-size: 1rem;
  cursor: pointer;
}
.drill-opt:hover:not(:disabled) { background: var(--paper-2); }
.drill-opt:disabled { cursor: default; }
.drill-opt.ok { background: var(--blue); border-color: var(--blue); color: #fff; }
.drill-opt.no { border-color: var(--red); color: var(--red); }
.drill-why {
  margin-top: 11px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-left: 13px;
  border-left: 2px solid var(--rule);
}
.lesson-done {
  margin-top: 8px;
  padding: 16px 0 0;
  border-top: 1px solid var(--rule);
}

@media (max-width: 560px) {
  .masthead { gap: 14px; padding: 15px 16px 12px; }
  .mast-nav { gap: 16px; width: 100%; flex: none; }
  .nav-link { font-size: 0.74rem; }
  .progress-info { padding: 8px 16px 10px; font-size: 0.64rem; }
  .screen-title { font-size: 1.45rem; }
  .wrow-main { flex-wrap: wrap; gap: 7px; }
  .wrow-en { min-width: 0; }
  .wrow-pt { flex-basis: 100%; }
  .drill-frase { font-size: 1.08rem; }
}

/* ---- Modo dominar ---- */
.focus-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 26px;
  padding: 10px 14px;
  background: var(--paper-2);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.focus-label {
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.focus-bar b { font-family: var(--serif); font-size: 1.05rem; }
.focus-count {
  font-size: 0.68rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.focus-track { display: inline-flex; gap: 4px; align-items: center; margin-left: auto; }
.focus-track i {
  width: 8px;
  height: 8px;
  border: 1px solid var(--blue);
  border-radius: 50%;
  display: inline-block;
}
.focus-track i.on { background: var(--blue); }
.focus-track i.sep { border: 0; width: 7px; height: 1px; background: var(--rule); border-radius: 0; }

.dom-btn {
  border: 1px solid var(--blue);
  border-radius: var(--radius);
  background: none;
  font-family: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
}
.dom-btn:hover { background: var(--blue); color: #fff; }

/* ---- Atalhos da home ---- */
.home-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 30px 0 4px;
}
.home-link {
  flex: 1 1 210px;
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: none;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.home-link:hover { border-color: var(--ink); }
.home-link b { display: block; font-size: 0.95rem; margin-bottom: 3px; }
.home-link span { display: block; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.45; }

@media (max-width: 560px) {
  .focus-track { margin-left: 0; }
  .home-links { flex-direction: column; }
}

/* ---- Espaços de anúncio nas laterais ---- */
.ad-rail {
  display: none;
  position: fixed;
  top: 120px;
  width: 160px;
  z-index: 1;
}
/* só aparecem quando a tela é larga o bastante pra não espremer a leitura,
   e só quando o AdSense realmente devolveu um anúncio */
@media (min-width: 1120px) {
  .ad-rail.tem-anuncio { display: block; }
  #ad-left { left: calc(50% - 310px - 36px - 160px); }
  #ad-right { right: calc(50% - 310px - 36px - 160px); }
}
.info-alt {
  margin-top: 7px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
}