.jt-gas { position: relative; max-width: 100%; }
.jt-gas p { margin: 0; }
.jt-gas .jt-gas__note { margin-top: 12px; }
.jt-gas :is(.is-up, .is-down, .is-flat) { font-variant-numeric: tabular-nums; }
.jt-gas .is-up { color: var(--jt-tl-bad, #c62828); }
.jt-gas .is-down { color: var(--jt-tl-good, #057a3c); }
.jt-gas .jt-gas__hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 32px; margin: 0 0 8px; padding: 28px;
  background: var(--jt-tl-panel-bg, #f4f4f1); color: var(--jt-tl-panel-text, #111111);
  border: 1px solid var(--jt-tl-panel-line, #dedede); border-radius: var(--jt-radius, 4px);
}
@media (min-width: 900px) {
  .jt-gas .jt-gas__hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: end; }
  .jt-gas .jt-gas__fuels { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .jt-gas .jt-gas__hero { padding: 16px; } }
.jt-gas .jt-gas__fuels ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jt-gas .jt-gas__fuels li { margin: 0; padding: 0; }
.jt-gas .jt-gas__fuels li::marker { content: none; }
.jt-gas .jt-gas__fuel {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 18px;
  background: var(--jt-tl-input-bg, #ffffff); color: var(--jt-tl-input-text, #111111);
  border: 1px solid var(--jt-tl-input-line, #767676); border-radius: 999px; text-decoration: none;
  font-size: var(--jt-tl-fs-btn, 16px); font-weight: var(--jt-tl-fw-btn, 700); line-height: 1.2;
}
.jt-gas .jt-gas__fuel:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.jt-gas .jt-gas__fuel[aria-current="true"] { background: var(--jt-tl-chip-on-bg, #111111); border-color: var(--jt-tl-chip-on-bg, #111111); color: var(--jt-tl-chip-on-text, #ffffff); }
.jt-gas .jt-gas__fuel:focus-visible { outline: 2px solid var(--jt-tl-focus, #057a3c); outline-offset: 2px; }
.jt-gas .jt-gas__now { min-width: 0; }
.jt-gas .jt-gas__figure {
  margin: 4px 0 14px; font-family: var(--jt-font-head, var(--jt-font-body, system-ui, sans-serif));
  font-size: var(--jt-tl-fs-gas-figure, 64px); font-weight: var(--jt-tl-fw-gas-figure, 800); line-height: 1;
  color: var(--jt-tl-figure, #057a3c); overflow-wrap: anywhere;
}
.jt-gas .jt-gas__checked { margin: 0 0 8px; }
.jt-gas .jt-gas__changes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
@media (max-width: 600px) {
  .jt-gas .jt-gas__changes { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .jt-gas .jt-gas__chg { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 10px 14px; }
  .jt-gas .jt-gas__chg dd { margin: 0; }
}
.jt-gas .jt-gas__chg {
  min-width: 0; padding: 14px 16px;
  background: var(--jt-tl-result-bg, #ffffff); border: 1px solid var(--jt-tl-panel-line, #dedede); border-radius: var(--jt-radius, 4px);
}
.jt-gas .jt-gas__chg dt { color: var(--jt-tl-panel-text, #111111); font-weight: 700; }
.jt-gas .jt-gas__chg dd {
  margin: 4px 0 0; font-family: var(--jt-font-head, var(--jt-font-body, system-ui, sans-serif));
  font-size: var(--jt-tl-fs-gas-change, 22px); font-weight: var(--jt-tl-fw-gas-change, 800); line-height: 1.15; white-space: nowrap;
}
.jt-gas .jt-gas__chg.is-flat dd { color: var(--jt-tl-panel-text, #111111); }
.jt-gas .jt-gas__arrow { font-size: 0.7em; vertical-align: 0.12em; }
.jt-gas .jt-gas__split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 40px; }
@media (min-width: 900px) { .jt-gas .jt-gas__split { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; } }
.jt-gas .jt-gas__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px 24px; }
@media (min-width: 900px) { .jt-gas .jt-gas__lists { grid-template-columns: minmax(0, 1fr); } }
.jt-gas .jt-gas__list ol { margin: 0; padding: 0; list-style: none; counter-reset: jtgas; border-top: 2px solid currentColor; }
.jt-gas .jt-gas__list li {
  display: flex; align-items: baseline; gap: 6px 12px; margin: 0; padding: 10px 0;
  border-bottom: 1px solid var(--jt-tl-row-line, #dedede); counter-increment: jtgas;
  font-size: var(--jt-tl-fs-table, 16px); line-height: 1.35;
}
.jt-gas .jt-gas__list li::marker { content: none; }
.jt-gas .jt-gas__list li::before { content: counter(jtgas); flex: 0 0 1.4em; font-weight: 800; font-variant-numeric: tabular-nums; }
.jt-gas .jt-gas__lname { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow-wrap: break-word; }
.jt-gas .jt-gas__lprice { flex: 0 0 auto; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jt-gas .jt-gas__list .jt-tl__h3 { margin-bottom: 8px; }
.jt-gas .jt-gas__mapbox { min-width: 0; }
.jt-gas .jt-gas__map { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; max-width: 640px; }
.jt-gas .jt-gas__tile {
  position: relative; aspect-ratio: 1 / 1.1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 2px; background: var(--jt-gas-mid, #0cf57e); cursor: pointer;
}
.jt-gas .jt-gas__tile--a { background: color-mix(in srgb, var(--jt-gas-mid, #0cf57e) var(--jt-gas-t, 50%), var(--jt-gas-low, #0a3d23)); }
.jt-gas .jt-gas__tile--b { background: color-mix(in srgb, var(--jt-gas-high, #d4ff5e) var(--jt-gas-t, 50%), var(--jt-gas-mid, #0cf57e)); }
.jt-gas .jt-gas__tile.is-ink-dark { color: var(--jt-gas-ink-dark, #ffffff); }
.jt-gas .jt-gas__tile.is-ink-light { color: var(--jt-gas-ink-light, #000000); }
.jt-gas .jt-gas__tile.is-empty { background: none; cursor: default; pointer-events: none; }
.jt-gas .jt-gas__tile:hover, .jt-gas .jt-gas__tile.is-on { outline: 2px solid var(--jt-tl-panel-text, #111111); outline-offset: 1px; z-index: 2; }
.jt-gas .jt-gas__tile-code { font-family: var(--jt-font-head, var(--jt-font-body, system-ui, sans-serif)); font-size: var(--jt-tl-fs-tile, 13px); font-weight: var(--jt-tl-fw-tile, 800); letter-spacing: 0.02em; line-height: 1.1; }
.jt-gas .jt-gas__tile-price { margin-top: 2px; font-size: 10px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .jt-gas .jt-gas__tile-price { display: none; } }
@media (max-width: 600px) { .jt-gas .jt-gas__map { gap: 3px; } }
.jt-gas .jt-gas__scale {
  display: flex; align-items: center; gap: 10px; max-width: 640px; margin: 12px 0 0;
  font-size: var(--jt-tl-fs-axis, 13px); font-weight: var(--jt-tl-fw-axis, 600); font-variant-numeric: tabular-nums; color: var(--jt-tl-chart-text, #3d3d3d);
}
.jt-gas .jt-gas__scale-bar { flex: 1; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--jt-gas-low, #0a3d23), var(--jt-gas-mid, #0cf57e), var(--jt-gas-high, #d4ff5e)); }
.jt-gas-tip {
  position: fixed; z-index: 60; max-width: 260px; padding: 10px 14px; pointer-events: none;
  background: var(--jt-tl-chip-on-bg, #111111); color: var(--jt-tl-chip-on-text, #ffffff); border-radius: var(--jt-radius, 4px);
  font-family: var(--jt-font-body, system-ui, sans-serif); font-size: var(--jt-tl-fs-small, 14px); font-weight: 400; line-height: 1.4;
}
.jt-gas-tip strong { display: block; font-size: var(--jt-tl-fs-body, 17px); font-weight: 800; font-variant-numeric: tabular-nums; }
.jt-gas-tip span { display: block; }
.jt-gas .jt-gas__chart {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: var(--jt-gas-chart-h, 280px) auto auto;
  column-gap: 10px; margin: 0; padding: 8px 0 0;
}
@media (max-width: 600px) { .jt-gas .jt-gas__chart { --jt-gas-chart-h: 220px; } }
.jt-gas .jt-gas__chart-y { position: relative; min-width: 3.4em; }
.jt-gas :is(.jt-gas__chart-y, .jt-gas__chart-x) span {
  position: absolute; font-size: var(--jt-tl-fs-axis, 13px); font-weight: var(--jt-tl-fw-axis, 600); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--jt-tl-chart-text, #3d3d3d); white-space: nowrap;
}
.jt-gas .jt-gas__chart-y span { right: 0; transform: translateY(-50%); }
.jt-gas .jt-gas__plot { position: relative; min-width: 0; }
.jt-gas .jt-gas__plot svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.jt-gas .jt-gas__grid { stroke: var(--jt-tl-chart-grid, #e3e3de); stroke-width: 1; }
.jt-gas .jt-gas__area { fill: var(--jt-tl-chart-line, #057a3c); fill-opacity: 0.1; }
.jt-gas .jt-gas__line { fill: none; stroke: var(--jt-tl-chart-line, #057a3c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.jt-gas :is(.jt-gas__dot, .jt-gas__hdot) {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--jt-tl-chart-line, #057a3c); box-shadow: 0 0 0 2px var(--jt-bg, #ffffff); pointer-events: none;
}
.jt-gas .jt-gas__chart-end { position: relative; min-width: 4em; }
.jt-gas .jt-gas__chart-end span {
  position: absolute; left: 0; transform: translateY(-50%); white-space: nowrap;
  font-size: var(--jt-tl-fs-body, 17px); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--jt-tl-panel-text, #111111);
}
.jt-gas .jt-gas__chart-x { grid-column: 2; position: relative; height: calc(var(--jt-tl-fs-axis, 13px) + 16px); }
.jt-gas .jt-gas__chart-x span { top: 10px; transform: translateX(-50%); }
.jt-gas .jt-gas__chart-x .is-start { transform: none; }
.jt-gas .jt-gas__chart-x .is-end { transform: translateX(-100%); }
@media (max-width: 600px) {
  .jt-gas .jt-gas__chart-x .is-minor { display: none; }
  .jt-gas .jt-gas__chart { column-gap: 8px; grid-template-columns: auto minmax(0, 1fr) 6px; }
  .jt-gas .jt-gas__chart-end { display: none; }
}
.jt-gas .jt-gas__chart figcaption { grid-column: 1 / -1; margin-top: 8px; }
.jt-gas .jt-gas__hline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--jt-tl-panel-text, #111111); pointer-events: none; }
.jt-gas .jt-gas__htip {
  position: absolute; top: 0; z-index: 3; padding: 8px 12px; pointer-events: none; white-space: nowrap;
  background: var(--jt-tl-chip-on-bg, #111111); color: var(--jt-tl-chip-on-text, #ffffff); border-radius: var(--jt-radius, 4px);
  font-size: var(--jt-tl-fs-small, 14px); line-height: 1.35;
}
.jt-gas .jt-gas__htip strong { display: block; font-size: var(--jt-tl-fs-body, 17px); font-weight: 800; font-variant-numeric: tabular-nums; }
.jt-gas .jt-gas__plot [hidden] { display: none !important; }
.jt-gas .jt-gas__numbers { margin: 16px 0 0; }
.jt-gas .jt-gas__numbers summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  font-size: var(--jt-tl-fs-btn, 16px); font-weight: 700; color: var(--jt-link, #057a3c); text-decoration: underline; text-underline-offset: 0.18em;
}
.jt-gas .jt-gas__numbers table { max-width: 420px; margin-top: 8px; }
.jt-gas .jt-gas__numbers td { padding-block: 8px; font-variant-numeric: tabular-nums; }
.jt-gas .jt-gas__find { max-width: 420px; margin: 0 0 16px; }
.jt-gas .jt-gas__filter { -webkit-appearance: none; appearance: none; }
.jt-gas .jt-gas__table thead th {
  position: sticky; top: var(--jt-sticky-top, 0px); z-index: 2; padding-top: 0;
  background: var(--jt-bg, #ffffff); color: var(--jt-text, #111111);
}
.jt-gas .jt-gas__table :is(td, th) { vertical-align: middle; }
.jt-gas .jt-gas__table tbody th { font-weight: 400; }
.jt-gas .jt-gas__table :is(.jt-gas__col--price, .jt-gas__col--vs, .jt-gas__col--chg) { text-align: right; }
.jt-gas .jt-gas__table tbody :is(.jt-gas__col--price, .jt-gas__col--vs, .jt-gas__col--chg) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.jt-gas .jt-gas__table thead :is(.jt-gas__col--price, .jt-gas__col--vs, .jt-gas__col--chg) .jt-tl__sort { justify-content: flex-end; }
.jt-gas .jt-gas__table .jt-gas__col--price strong { font-weight: 800; }
.jt-gas .jt-gas__table .jt-gas__col--price .jt-gas__est { margin-left: 4px; }
.jt-gas .jt-gas__table tbody tr.is-low > * { background: var(--jt-tl-low-bg, #e3fbec); }
.jt-gas .jt-gas__table tbody tr.is-high > * { background: var(--jt-tl-high-bg, #fdecea); }
.jt-gas .jt-gas__table tbody tr.is-on > * { outline: 2px solid var(--jt-tl-focus, #057a3c); outline-offset: -2px; }
.jt-gas .jt-gas__mark { margin-top: 4px; }
.jt-gas .jt-gas__nomatch { margin-top: 16px; }
@media (max-width: 600px) {
  .jt-gas .jt-gas__table :is(th, td) { padding-inline: 6px; }
  .jt-gas .jt-gas__table :is(th, td):last-child { padding-right: 0; }
  .jt-gas .jt-gas__table .jt-gas__col--chg { display: none; }
  .jt-gas .jt-gas__table thead th { white-space: normal; }
  .jt-gas .jt-gas__table thead .jt-tl__sort { text-align: right; }
  .jt-gas .jt-gas__table thead .jt-gas__col--name .jt-tl__sort { text-align: left; }
  .jt-gas .jt-gas__table .jt-gas__col--price .jt-gas__est { display: block; width: fit-content; margin: 2px 0 0 auto; }
}
.jt-gas .jt-gas__related ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.jt-gas .jt-gas__related li { margin: 0; padding: 0; border-bottom: 1px solid var(--jt-tl-row-line, #dedede); }
.jt-gas .jt-gas__related li::marker { content: none; }
.jt-gas .jt-gas__related a {
  display: flex; align-items: center; min-height: 48px; padding: 8px 0;
  font-size: var(--jt-tl-fs-body, 17px); font-weight: 700; line-height: 1.35; color: var(--jt-link, #057a3c);
  text-decoration: underline; text-underline-offset: 0.18em; overflow-wrap: break-word;
}
.jt-gas .jt-gas__credit a { padding-block: 3px; color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
@media (forced-colors: active) {
  .jt-gas .jt-gas__line { stroke: CanvasText; }
  .jt-gas .jt-gas__tile { border: 1px solid CanvasText; }
}