/* Entrada do Borda: carta de curvas de nível à esquerda, formulário à direita. */
:root {
  color-scheme: light;
  --papel: #f4f1ea; --superficie: #fbfaf6; --superficie-2: #efebe2; --linha: #ddd7ca; --linha-forte: #c9c2b2;
  --tinta: #1c2320; --tinta-2: #48524d; --tinta-3: #6f7671; --acento: #0f6b5c; --acento-forte: #0a5246; --vazamento: #c8362b;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body.entrada {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr);
  background: var(--papel);
  color: var(--tinta);
  font: 400 15px/1.5 'IBM Plex Sans', system-ui, sans-serif;
}
.entrada__carta { position: relative; overflow: hidden; background: #e9e4d8; }
.entrada__carta svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.entrada__legenda { position: absolute; left: 32px; bottom: 28px; max-width: 360px; margin: 0; color: var(--tinta-2); font-size: 13.5px; }
.entrada__legenda b { color: var(--vazamento); font-weight: 600; }
.entrada__lado { display: grid; place-items: center; padding: 32px 24px; background: var(--superficie); }
.entrada__caixa { width: min(360px, 100%); }
.entrada__marca { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 34px/1 'IBM Plex Serif', Georgia, serif; letter-spacing: -0.01em; }
.entrada__marca svg { width: 38px; height: 38px; }
.entrada__linha { margin: 10px 0 30px; color: var(--tinta-2); }
.entrada__form { display: grid; gap: 6px; }
.entrada__form label { margin-top: 10px; color: var(--tinta-2); font-size: 13.5px; font-weight: 500; }
.entrada__form input { min-height: 44px; padding: 9px 12px; border: 1px solid var(--linha-forte); border-radius: 8px; background: #fff; color: var(--tinta); font: inherit; }
.entrada__form input:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; border-color: var(--acento); }
.entrada__form button { min-height: 46px; margin-top: 20px; border: 0; border-radius: 8px; background: var(--acento); color: #fff; font: 600 15px/1 'IBM Plex Sans', sans-serif; cursor: pointer; }
.entrada__form button:hover { background: var(--acento-forte); }
.entrada__form button:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.entrada__erro { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #fbe7e4; color: #6b1712; font-size: 14px; }
.entrada__rodape { margin: 28px 0 0; color: var(--tinta-3); font-size: 12.5px; }
code { font-family: ui-monospace, Consolas, monospace; }
@media (max-width: 760px) {
  body.entrada { grid-template-columns: 1fr; grid-template-rows: 180px 1fr; }
  .entrada__legenda { display: none; }
}