.pace-page { max-width: 880px; }
.pace-page .guide-header { margin-bottom: 24px; }
.pace-page .guide-body { max-width: none; }
.pace-form { padding: clamp(16px, 4vw, 32px); border: 1px solid #dce6eb; border-radius: 20px; background: #f2f7f9; }
.pace-fields, .pace-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pace-fields label { display: grid; gap: 6px; align-content: start; font-weight: 650; }
.pace-fields input, .pace-fields select { width: 100%; min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid #6e8794; border-radius: 8px; background: #fff; color: #173746; font: inherit; font-weight: 400; }
.pace-fields [aria-invalid="true"] { border-color: #a42b26; }
.pace-form button { margin-top: 14px; }
.pace-page #pace-error { color: #962620; margin-top: 8px; }
.pace-page #pace-error:empty { margin: 0; }
.pace-result { padding: 20px 0; }
.pace-result:focus-visible { outline: 2px solid #22768a; outline-offset: 4px; }
.pace-values { margin: 0; }
.pace-values > div { border-top: 1px solid #dce6eb; padding: 10px 0; }
.pace-values dd { margin: 4px 0 0; font-size: clamp(24px, 4vw, 36px); font-weight: 700; font-variant-numeric: tabular-nums; }
.pace-page .pace-help { margin-top: 10px; font-size: 14px; }
@media (max-width: 560px) { .pace-fields { grid-template-columns: 1fr; gap: 12px; } .pace-values { gap: 10px; } }