@font-face {
  font-family: "Be Vietnam Pro";
  src: url("fonts/BeVietnamPro-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("fonts/BeVietnamPro-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f4f5f2;
  --white: #ffffff;
  --ink: #202b2a;
  --muted: #5a6461;
  --line: #d8ddd8;
  --accent: #25635c;
  --accent-soft: #e9f1ed;
  --error: #a63128;
  --panel: #e8ece7;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 15px;
  font-weight: 400;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.6; }
button, input, select { font: inherit; }
button, input, select, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; }
button, input, select { border-radius: 3px; }
a { color: inherit; text-underline-offset: 0.2em; }
::selection { background: #c7ddd4; color: #152f2b; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
input, select { caret-color: var(--accent); }
input::placeholder { color: var(--muted); }
* { scrollbar-width: thin; scrollbar-color: #9ba9a1 var(--paper); }
[hidden] { display: none !important; }
.skip-link { position: absolute; top: -100px; left: 20px; padding: 12px 18px; z-index: 10; background: var(--white); }
.skip-link:focus { top: 12px; }
.site-header, main { width: min(1200px, calc(100% - 96px)); margin-inline: auto; }
main { padding-bottom: 48px; }
.site-header { height: 96px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 22px; font-weight: 600; text-decoration: none; letter-spacing: -0.04em; }
.site-header p { margin: 0; color: var(--muted); font-size: 12px; }
.site-header p span { margin-left: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.intro { padding: 55px 0 49px; display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-weight: 600; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.2; letter-spacing: -0.035em; text-wrap: balance; }
.intro > p { margin-bottom: 5px; color: var(--muted); font-size: 16px; line-height: 1.85; }
.workspace { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); align-items: start; gap: 32px; }
.input-panel { background: var(--white); padding: 30px 32px 32px; }
.panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
h2 { font-size: 18px; font-weight: 600; line-height: 1.5; letter-spacing: -0.025em; }
.panel-heading h2 { margin-bottom: 20px; }
.panel-heading > span { color: var(--muted); font-size: 11px; white-space: nowrap; }
.sample-control { margin-bottom: 26px; }
.sample-control p { margin: 7px 0 0; color: var(--muted); font-size: 10px; }
.sample-button { border: 1px solid var(--accent); background: var(--accent-soft); padding: 10px 14px; color: var(--accent); font-size: 12px; transition: background-color 120ms; }
.sample-button:hover { background: #dce9e1; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset + fieldset { margin-top: 29px; padding-top: 25px; border-top: 1px solid var(--line); }
legend { padding: 0; margin: 0 0 15px; font-size: 14px; font-weight: 600; }
fieldset + fieldset legend { float: left; width: 100%; }
fieldset + fieldset legend + * { clear: both; }
.fields { display: grid; column-gap: 18px; row-gap: 17px; }
.fields-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field { min-width: 0; }
.field label { display: block; margin-bottom: 7px; font-size: 12px; color: #3e4a46; }
.field label span { color: var(--muted); }
.field input, .field select { width: 100%; min-width: 0; height: 43px; background: #fff; color: var(--ink); border: 1px solid #bcc6bf; padding: 8px 11px; font-size: 14px; font-variant-numeric: tabular-nums; transition: border-color 120ms; }
.field select { padding-right: 27px; }
.field input:hover, .field select:hover { border-color: #738d80; }
.field input:focus, .field select:focus { border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field-error { display: block; color: var(--error); font-size: 11px; line-height: 1.6; }
.field-error:not(:empty) { margin-top: 6px; }
.field-note { color: var(--muted); font-size: 11px; margin: -6px 0 16px; }
.field-help { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; line-height: 1.7; }
.distance-field { grid-column: 1 / -1; }
.distance-field input { max-width: calc(50% - 9px); }
.form-error { margin: 23px 0 0; padding: 12px 0; border-block: 1px solid #d8aca5; font-size: 12px; color: var(--error); }
.form-actions { display: flex; align-items: center; gap: 22px; margin-top: 30px; }
.submit-button { min-height: 49px; flex: 1; border: 0; background: var(--accent); color: #fff; padding: 12px 17px; font-weight: 600; font-size: 13px; }
.submit-button:hover { background: #194b45; }
.submit-button:disabled { background: #566f67; }
.reset-button { background: transparent; border: 0; padding: 10px 0; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
.reset-button:hover { color: var(--ink); }
.sample-button:disabled, .reset-button:disabled { opacity: 0.6; cursor: wait; }
.result-panel { position: sticky; top: 28px; background: var(--panel); overflow: hidden; }
.result-main { padding: 32px 34px 29px; }
.result-main h2 { margin: 0; font-size: 16px; }
.result-content { min-height: 237px; display: flex; align-items: center; }
.empty-result p { margin: 0; font-size: 13px; color: #4a5c50; line-height: 1.9; }
.empty-result .empty-title { margin-bottom: 12px; color: var(--ink); font-size: 22px; font-weight: 600; }
.prediction { padding-block: 25px 12px; }
.duration { display: flex; align-items: baseline; gap: 13px; margin: 0; line-height: 1.1; }
#duration-minutes { font-size: clamp(64px, 6vw, 84px); font-weight: 600; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.duration-unit { font-size: 22px; color: #3a5345; }
.duration-seconds { margin: 8px 0 0; font-size: 25px; font-variant-numeric: tabular-nums; color: #3a5345; }
.raw-duration { margin: 18px 0 0; color: #4a5c50; font-size: 11px; font-variant-numeric: tabular-nums; }
.result-note { margin: 0; padding-top: 19px; border-top: 1px solid #c4cec3; font-size: 11px; color: #4a5c50; line-height: 1.9; }
.trip-summary { background: #dfe6dd; padding: 25px 34px 30px; }
.trip-summary h3 { margin: 0 0 19px; font-size: 13px; font-weight: 600; }
dl { margin: 0; }
dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; margin: 10px 0; font-size: 11px; }
dt { color: #44594a; }
dd { margin: 0; color: #203629; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.locations { margin-top: 25px; padding-top: 24px; border-top: 1px solid #bccaba; }
.locations > div + div { margin-top: 21px; }
.locations span { font-size: 10px; color: #44594a; }
.locations p { font-size: 13px; margin: 3px 0 0; color: #203629; font-variant-numeric: tabular-nums; }
.result-panel[data-state="ready"] .prediction { animation: result-in 340ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes result-in {
  from { opacity: 0.45; transform: translateY(6px); filter: blur(2px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (min-width: 1500px) {
  .intro { padding-block: 64px 58px; }
  .workspace { gap: 40px; }
}
@media (max-width: 1000px) {
  .site-header, main { width: calc(100% - 56px); }
  .workspace { grid-template-columns: minmax(0, 1.2fr) minmax(280px, 1fr); gap: 22px; }
  .input-panel { padding: 25px 23px; }
  .result-main, .trip-summary { padding-inline: 25px; }
  .panel-heading { display: block; }
  .panel-heading h2 { margin-bottom: 3px; }
  .panel-heading > span { display: block; margin-bottom: 19px; }
  .intro > p { font-size: 14px; }
}
@media (max-width: 760px) {
  .site-header, main { width: calc(100% - 36px); }
  .site-header { height: 76px; }
  .brand { font-size: 20px; }
  .site-header p { font-size: 10px; }
  .site-header p span { margin-left: 5px; }
  .intro { display: block; padding: 33px 0 29px; }
  h1 { font-size: 39px; }
  .intro > p { margin: 18px 0 0; font-size: 13px; }
  .intro > p br { display: none; }
  .workspace { display: flex; flex-direction: column; gap: 22px; }
  .input-panel, .result-panel { width: 100%; }
  .input-panel { padding: 25px 22px; }
  .panel-heading { display: flex; flex-wrap: wrap; gap: 4px 15px; margin-bottom: 17px; }
  .panel-heading h2, .panel-heading > span { margin-bottom: 0; }
  .result-panel { position: static; }
  .result-content { min-height: 220px; }
  .result-main, .trip-summary { padding-inline: 26px; }
  .result-main { padding-top: 26px; }
  #duration-minutes { font-size: 78px; }
}
@media (max-width: 400px) {
  .site-header, main { width: calc(100% - 28px); }
  .input-panel { padding-inline: 18px; }
  .fields { column-gap: 13px; }
  .field label { font-size: 11px; }
  .form-actions { gap: 16px; }
  .submit-button { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}