.ah-usage-explorer { border-bottom: 1px solid var(--line); }
.ah-usage-heading { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 70px; margin-bottom: 44px; }
.ah-usage-explorer .ah-usage-heading h2 { max-width: 600px; font: 400 46px/1.12 var(--font-pixel); letter-spacing: -1.2px; }
.ah-usage-explorer .ah-usage-heading > p { max-width: 430px; color: #999; font-size: 18px; line-height: 1.55; }
.ah-usage-workspace { display: grid; grid-template-columns: 1fr 1.15fr; border: 1px solid #343434; background: #060606; }
.ah-usage-inputs, .ah-usage-results { min-width: 0; padding: 28px 32px 30px; }
.ah-usage-inputs { border-right: 1px solid #343434; background: linear-gradient(155deg, #12100e 0%, #060606 60%); }
.ah-usage-panel-label { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #999; font: 9px/1.5 var(--font-mono); }
.ah-usage-panel-label > span:first-child { color: var(--orange); }
.ah-usage-panel-label > span:last-child { color: #6f6f6f; text-align: right; }
.ah-usage-explorer .ah-usage-units { font-size: 13px; color: #8d8d8d; line-height: 1.65; max-width: 350px; margin-top: 25px; }
.ah-usage-control { margin-top: 38px; }
.ah-usage-control + .ah-usage-control { margin-top: 35px; }
.ah-usage-control-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 22px; }
.ah-usage-control-top > label { font-size: 15px; color: #c4c4c4; }
.ah-usage-control-top > label > span { font: 9px var(--font-mono); color: #6e6e6e; margin-right: 13px; }
.ah-usage-number-wrap { display: flex; align-items: center; border: 1px solid #454545; background: #0a0a0a; width: 124px; }
.ah-usage-number-wrap input { min-width: 0; width: 100%; appearance: textfield; -moz-appearance: textfield; border: none; background: transparent; border-radius: 0; padding: 10px 0 10px 12px; text-align: right; color: #f0f0f0; font: 17px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
.ah-usage-number-wrap input::-webkit-inner-spin-button, .ah-usage-number-wrap input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.ah-usage-number-wrap > span { color: #828282; padding: 0 11px 0 6px; font: 11px var(--font-mono); }
.ah-usage-number-wrap:focus-within { border-color: var(--orange); }
.ah-usage-range { appearance: none; -webkit-appearance: none; width: 100%; height: 24px; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; display: block; }
.ah-usage-range::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(to right, var(--orange) 0 var(--usage-progress), #343434 var(--usage-progress) 100%); }
.ah-usage-range::-moz-range-track { height: 3px; background: #343434; }
.ah-usage-range::-moz-range-progress { height: 3px; background: var(--orange); }
.ah-usage-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; margin-top: -6px; width: 15px; height: 15px; background: var(--orange); border: 3px solid #060606; outline: 1px solid var(--orange); border-radius: 0; transition: box-shadow .2s; }
.ah-usage-range::-moz-range-thumb { width: 9px; height: 9px; background: var(--orange); border: 3px solid #060606; outline: 1px solid var(--orange); border-radius: 0; transition: box-shadow .2s; }
.ah-usage-range:hover::-webkit-slider-thumb { box-shadow: 0 0 0 4px #ff571a15; }
.ah-usage-range:hover::-moz-range-thumb { box-shadow: 0 0 0 4px #ff571a15; }
.ah-usage-range-scale { display: flex; justify-content: space-between; margin-top: 10px; color: #6f6f6f; font: 9px var(--font-mono); }
.ah-usage-explorer .ah-usage-input-note { margin-top: 31px; padding-top: 23px; border-top: 1px solid #292929; font: 10px/1.7 var(--font-mono); color: #777; max-width: 430px; }
.ah-usage-results .ah-usage-panel-label { padding-bottom: 23px; border-bottom: 1px solid #303030; }
.ah-usage-estimate { padding-top: 23px; }
.ah-usage-estimate + .ah-usage-estimate { border-top: 1px solid #303030; margin-top: 22px; }
.ah-usage-estimate-top { display: flex; justify-content: space-between; align-items: end; gap: 20px; }
.ah-usage-model-label { display: block; font: 9px/1.5 var(--font-mono); color: #888; margin-bottom: 9px; }
.ah-usage-explorer .ah-usage-estimate h3 { font: 400 31px/1.1 var(--font-pixel); letter-spacing: -.7px; }
.ah-usage-total { text-align: right; }
.ah-usage-total > span { display: block; color: #777; font: 8px/1.5 var(--font-mono); margin-bottom: 9px; }
.ah-usage-total > strong { display: block; color: var(--orange); font: 400 33px/1.1 var(--font-pixel); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ah-usage-cost-track { display: flex; height: 4px; gap: 2px; margin: 20px 0 16px; background: #171717; overflow: hidden; }
.ah-usage-cost-track > span { display: block; min-width: 0; transition: width .25s ease; }
.ah-usage-cost-track > span:first-child { background: var(--orange); }
.ah-usage-cost-track > span:last-child { background: #857469; }
.ah-usage-breakdown { margin: 0; }
.ah-usage-breakdown > div { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 0; font: 10px/1.5 var(--font-mono); }
.ah-usage-breakdown dt { display: flex; align-items: center; gap: 8px; color: #a7a7a7; }
.ah-usage-breakdown dt small { color: #777; font: 9px/1.5 var(--font-mono); margin-left: 5px; }
.ah-usage-breakdown dd { margin: 0; color: #c1c1c1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ah-usage-key { display: block; width: 5px; height: 5px; flex-shrink: 0; background: var(--orange); }
.ah-usage-key.is-output { background: #857469; }
.ah-usage-footer { display: flex; align-items: start; justify-content: space-between; gap: 30px; padding-top: 22px; font: 10px/1.7 var(--font-mono); }
.ah-usage-footer > p { color: #777; max-width: 600px; }
.ah-usage-footer > a { color: var(--orange); white-space: nowrap; display: inline-flex; gap: 24px; }
.ah-usage-footer > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ah-usage-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1100px) { .ah-usage-inputs, .ah-usage-results { padding-inline: 24px; } .ah-usage-breakdown dt small { font-size: 8px; } }
@media (max-width: 900px) { .ah-usage-heading { gap: 30px; } .ah-usage-explorer .ah-usage-heading h2 { font-size: 42px; } .ah-usage-explorer .ah-usage-heading > p { font-size: 16px; } .ah-usage-workspace { grid-template-columns: 1fr; } .ah-usage-inputs { border-right: 0; border-bottom: 1px solid #343434; } .ah-usage-inputs, .ah-usage-results { padding: 26px; } .ah-usage-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; } .ah-usage-inputs .ah-usage-panel-label, .ah-usage-inputs .ah-usage-units, .ah-usage-input-note, .ah-usage-inputs noscript { grid-column: 1 / -1; } .ah-usage-control, .ah-usage-control + .ah-usage-control { margin-top: 26px; } .ah-usage-explorer .ah-usage-units { max-width: none; margin-top: 18px; } .ah-usage-explorer .ah-usage-input-note { max-width: none; margin-top: 23px; padding-top: 18px; } .ah-usage-results { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; } .ah-usage-results .ah-usage-panel-label { grid-column: 1 / -1; } .ah-usage-estimate + .ah-usage-estimate { border-top: 0; border-left: 1px solid #303030; margin-top: 0; padding-left: 30px; } .ah-usage-estimate-top { align-items: start; flex-direction: column; gap: 20px; } .ah-usage-total { text-align: left; } .ah-usage-breakdown dt small { font-size: 8px; } }
@media (max-width: 600px) { .ah-usage-heading { grid-template-columns: 1fr; gap: 22px; margin-bottom: 30px; } .ah-usage-explorer .ah-usage-heading h2 { font-size: 34px; letter-spacing: -1px; } .ah-usage-explorer .ah-usage-heading > p { font-size: 16px; max-width: 350px; } .ah-usage-inputs, .ah-usage-results { display: block; padding: 23px 20px; } .ah-usage-panel-label { font-size: 8px; } .ah-usage-explorer .ah-usage-units { font-size: 12px; margin-top: 22px; } .ah-usage-control, .ah-usage-control + .ah-usage-control { margin-top: 30px; } .ah-usage-control-top { gap: 12px; margin-bottom: 17px; } .ah-usage-control-top > label { font-size: 14px; } .ah-usage-control-top > label > span { margin-right: 8px; } .ah-usage-number-wrap { width: 108px; } .ah-usage-estimate + .ah-usage-estimate { border-left: 0; padding-left: 0; border-top: 1px solid #303030; margin-top: 23px; } .ah-usage-estimate-top { flex-direction: row; align-items: end; gap: 12px; } .ah-usage-total { text-align: right; } .ah-usage-total > strong { font-size: 29px; } .ah-usage-explorer .ah-usage-estimate h3 { font-size: 28px; } .ah-usage-model-label { font-size: 8px; } .ah-usage-breakdown dt small { font-size: 8px; } .ah-usage-footer { display: block; font-size: 9px; } .ah-usage-footer > a { margin-top: 17px; } }
@media (max-width: 380px) { .ah-usage-inputs, .ah-usage-results { padding-inline: 17px; } .ah-usage-estimate-top { flex-direction: column; align-items: start; gap: 17px; } .ah-usage-total { text-align: left; } .ah-usage-breakdown > div { font-size: 9px; gap: 10px; } .ah-usage-breakdown dt { flex-wrap: wrap; } .ah-usage-breakdown dt small { margin-left: 13px; flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .ah-usage-cost-track > span { transition: none; } .ah-usage-range::-webkit-slider-thumb { transition: none; } .ah-usage-range::-moz-range-thumb { transition: none; } }