.dg-tool, .dg-tool * { box-sizing: border-box; }
.dg-tool {
  --dg-bg: #F2F2F2; --dg-ink: #111111; --dg-muted: #8a8a8a;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--dg-ink); background: var(--dg-bg);
  width: 100%; max-width: none; margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased;
}
.dg-field {
  display: flex; align-items: stretch;
  border: 1px solid var(--dg-ink); border-radius: 5px;
  background: #fff; overflow: hidden;
}
.dg-field input {
  flex: 1; padding: 18px 20px;
  font-size: 18px; font-family: inherit; font-weight: 400;
  border: 0; background: transparent; color: var(--dg-ink); outline: none;
}
.dg-field input::placeholder { color: #c5c5c5; font-weight: 300; }
.dg-formats { margin-top: 14px; font-size: 14px; font-weight: 400; color: var(--dg-muted); letter-spacing: .01em; }
.dg-result { margin-top: 26px; opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.dg-result.dg-on { opacity: 1; transform: none; }
.dg-ask { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: var(--dg-ink); font-weight: 400; }
.dg-ask b { font-weight: 600; }
.dg-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--dg-ink); border: 1px solid var(--dg-ink); border-radius: 5px; overflow: hidden; }
.dg-half { position: relative; aspect-ratio: 5 / 6; padding: 18px 20px; }
.dg-half-label { font-size: 15px; font-weight: 400; line-height: 1.3; letter-spacing: .005em; }
@media (max-width: 540px) { .dg-half { aspect-ratio: 1 / 1; padding: 14px 16px; } .dg-half-label { font-size: 13px; } }