.usage-tool{width:min(100%,68rem);color:var(--color-base-content);margin-inline:auto}.usage-card,.usage-result{box-sizing:border-box;border:1px solid var(--color-base-300);border-radius:var(--radius-box);background:var(--color-base-100);padding:24px}.usage-card{border-top:4px solid var(--color-primary)}.usage-result{border-color:color-mix(in oklab,var(--color-primary) 40%,var(--color-base-300));border-top:4px solid var(--color-primary);background:color-mix(in oklab,var(--color-primary) 10%,var(--color-base-100));margin-top:24px}.usage-heading{flex-wrap:nowrap;justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.usage-heading>div{min-width:0}.usage-heading-actions{text-align:right;flex-direction:column;flex:none;align-items:flex-end;gap:.45rem;max-width:100%;margin-left:auto;display:flex}.usage-heading-actions .usage-clear{box-sizing:border-box;border:1px solid var(--color-base-300);border-radius:var(--radius-field);background:var(--color-base-100);width:128px;min-width:128px;height:44px;min-height:44px;color:var(--color-base-content);box-shadow:none;padding:11px 16px;font-size:14px;line-height:20px}.usage-heading-actions .usage-clear:hover{border-color:var(--color-base-300);background:var(--color-base-200);color:var(--color-base-content)}.usage-heading-actions .usage-clear:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.usage-heading h2{margin:0;font-size:1.4rem;font-weight:800;line-height:1.35}.usage-kicker{letter-spacing:.08em;margin:0 0 .25rem;font-size:.8rem;font-weight:800}.usage-private{color:color-mix(in oklab,var(--color-base-content) 68%,transparent);white-space:nowrap;overflow-wrap:normal;background:0 0;border:0;margin:0;padding:0;font-size:12px;font-weight:400;line-height:1.5}.usage-intro{margin:.75rem 0 0;line-height:1.65}.usage-rows{gap:1rem;margin-top:1.25rem;display:grid}.usage-row{border:1px solid var(--color-base-300);border-radius:var(--radius-box);background:color-mix(in oklab,var(--color-base-200) 55%,var(--color-base-100));margin:0;padding:1rem;position:relative}.usage-row legend{padding-inline:.35rem;font-weight:800}.usage-remove{position:absolute;top:.45rem;right:.6rem;border-radius:var(--radius-field)!important}.usage-fields{grid-template-columns:1.2fr repeat(4,minmax(6.5rem,1fr));align-items:start;gap:12px;display:grid}.usage-field{flex-direction:column;gap:8px;min-width:0;font-weight:700;display:flex}.usage-field>span:first-child{align-items:flex-end;min-height:3rem;line-height:1.5;display:flex}.usage-field :is(input,select){box-sizing:border-box;width:100%;height:44px;min-height:44px}.usage-field small{font-weight:450;line-height:1.4}.usage-field [aria-invalid=true]{border-color:var(--color-error);outline-color:var(--color-error)}.usage-error{color:var(--color-error);font-weight:700!important}.usage-settings{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;gap:12px;margin-top:1.25rem;display:grid}.usage-settings.three{grid-template-columns:repeat(3,minmax(0,1fr)) auto}.usage-simple-fields{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px;margin-top:1.25rem;display:grid}.usage-simple-fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}.usage-field-pair{grid-template-columns:minmax(0,1fr) minmax(7.5rem,.75fr);align-items:start;gap:12px;display:grid}.usage-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(100%,27rem);margin-top:1.25rem;display:grid}.usage-actions.single{grid-template-columns:1fr;width:min(100%,13.5rem)}.usage-actions .btn{width:100%;min-width:0}.usage-add-row{justify-content:center;margin-top:12px;display:flex}.usage-add-row .btn{box-sizing:border-box;border-radius:var(--radius-field);width:min(256px,100%);height:44px;min-height:44px;padding:11px 16px;font-size:14px;line-height:20px}.usage-center-action{justify-content:center;margin-top:1.25rem;display:flex}.usage-center-action .btn{box-sizing:border-box;border-radius:var(--radius-field);width:min(256px,100%);max-width:256px;height:44px;min-height:44px;padding:11px 16px;font-size:14px;line-height:20px}.usage-result-head{text-align:start;justify-content:flex-start;align-items:flex-start;display:flex}.usage-result-head h2{margin:0;font-size:1.4rem;font-weight:800}.usage-result-action{justify-content:center;margin-top:1.25rem;display:flex}.usage-copy{box-sizing:border-box;border-radius:var(--radius-field);width:min(256px,100%);max-width:256px;height:44px;min-height:44px;padding:11px 16px;font-size:14px;line-height:20px}.usage-tool.usage-tool :is(.usage-heading-actions .usage-clear,.usage-add-row .btn,.usage-center-action .btn,.usage-result-action .usage-copy){border-radius:var(--radius-field)!important;height:44px!important;min-height:44px!important;padding:11px 16px!important;font-size:14px!important;line-height:20px!important}.usage-tool.usage-tool .usage-heading-actions .usage-clear{border:1px solid var(--color-base-300);background:var(--color-base-100);width:128px;min-width:128px;color:var(--color-base-content);box-shadow:none}.usage-empty{margin:.75rem 0 0;line-height:1.65}.usage-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px;display:grid}.usage-summary:has(>:nth-child(3)){grid-template-columns:repeat(3,minmax(0,1fr))}.usage-metric{border:1px solid color-mix(in oklab,var(--color-primary) 40%,var(--color-base-300));border-radius:var(--radius-box);background:color-mix(in oklab,var(--color-primary) 16%,var(--color-base-100));min-width:0;padding:1rem}.usage-metric span{min-height:42px;font-size:14px;font-weight:600;line-height:20px;display:block}.usage-metric strong{overflow-wrap:anywhere;font-variant-numeric:tabular-nums;margin-top:8px;font-size:20px;font-weight:600;line-height:28px;display:block}.usage-breakdown{border-collapse:collapse;width:100%;margin-top:1rem}.usage-breakdown th,.usage-breakdown td{border-top:1px solid var(--color-base-300);text-align:start;vertical-align:top;padding:.7rem .5rem}.usage-breakdown th:last-child,.usage-breakdown td:last-child{text-align:end}.usage-example{border:1px solid var(--color-base-300);background:var(--color-base-200);border-radius:.5rem;margin-top:.75rem;padding:1rem}@media (width<=58rem){.usage-fields{grid-template-columns:repeat(2,minmax(0,1fr))}.usage-field:first-child{grid-column:1/-1}.usage-settings.three,.usage-simple-fields.three{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=48rem){.usage-summary:has(>:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))}.usage-summary:has(>:nth-child(3))>:nth-child(3){grid-column:1/-1}}@media (width<=40rem){.usage-card,.usage-result{padding:16px}.usage-heading{flex-wrap:wrap}.usage-heading>div:first-child{flex:100%}.usage-heading-actions{flex:0 0 100%}.usage-fields,.usage-settings,.usage-settings.three,.usage-simple-fields,.usage-simple-fields.three,.usage-actions{grid-template-columns:1fr}.usage-field:first-child{grid-column:auto}.usage-field-pair{grid-template-columns:minmax(0,1fr) minmax(7.5rem,.55fr)}.usage-remove{width:100%;margin-top:.5rem;position:static}.usage-breakdown{display:block;overflow-x:auto}}@media (width<=30rem){.usage-summary,.usage-summary:has(>:nth-child(3)){grid-template-columns:1fr}.usage-summary:has(>:nth-child(3))>:nth-child(3){grid-column:auto}}