.dt-tag { align-items: center; background: var(--dt-color-surface-muted); border: 1px solid var(--dt-color-border); border-radius: 999px; color: var(--dt-color-text-muted); display: inline-flex; font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); gap: .35rem; padding: .3rem .6rem; }
.dt-tag--brand { background: color-mix(in srgb, var(--dt-color-brand) 8%, var(--dt-color-surface)); border-color: color-mix(in srgb, var(--dt-color-brand) 22%, var(--dt-color-border)); color: var(--dt-color-brand); }
.dt-tag--warning { background: color-mix(in srgb, var(--dt-color-warning) 8%, var(--dt-color-surface)); border-color: color-mix(in srgb, var(--dt-color-warning) 28%, var(--dt-color-border)); color: var(--dt-color-warning); }
.dt-tag--danger { background: color-mix(in srgb, var(--dt-color-danger) 7%, var(--dt-color-surface)); border-color: color-mix(in srgb, var(--dt-color-danger) 24%, var(--dt-color-border)); color: var(--dt-color-danger); }
.dt-copy-button svg { fill: none; height: 1rem; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; width: 1rem; }
.dt-number-field, .dt-currency-field, .dt-password-field, .dt-verification-field, .dt-range-slider { color: var(--dt-color-text); display: grid; gap: .4375rem; width: min(22rem, 100%); }
:is(.dt-number-field, .dt-currency-field, .dt-password-field, .dt-verification-field, .dt-range-slider) > label, .dt-range-slider__head label { font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); letter-spacing: 0; text-transform: none; }
:is(.dt-number-field, .dt-currency-field, .dt-password-field, .dt-verification-field) input { background: var(--dt-color-surface); border: 1px solid var(--dt-color-border-strong); border-radius: var(--dt-radius-sm); color: var(--dt-color-text); font: var(--dt-text-base) var(--dt-font-interface); min-height: var(--dt-control-height); outline: 0; padding: .6875rem .8125rem; width: 100%; }
:is(.dt-number-field, .dt-currency-field, .dt-password-field, .dt-verification-field) input:focus { border-color: var(--dt-color-brand); box-shadow: 0 0 0 3px var(--dt-color-focus); }
:is(.dt-number-field, .dt-currency-field, .dt-password-field, .dt-verification-field) small { color: var(--dt-color-text-muted); font-size: var(--dt-text-sm); line-height: 1.4; }
.dt-field-error { color: var(--dt-color-danger) !important; }
.dt-number-field__control, .dt-currency-field__control, .dt-password-field__control { align-items: center; display: flex; position: relative; }
.dt-number-field__suffix { color: var(--dt-color-text-muted); font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); pointer-events: none; position: absolute; right: .8125rem; }
.dt-number-field__control:has(.dt-number-field__suffix) input { padding-right: 3.25rem; }
.dt-currency-field__symbol { color: var(--dt-color-text); font-family: var(--dt-font-editorial); font-size: 1.125rem; left: .8125rem; pointer-events: none; position: absolute; }
.dt-currency-field input { font-family: var(--dt-font-compact); font-variant-numeric: tabular-nums; padding-left: 2rem; }
.dt-password-field input { padding-right: 3rem; }
.dt-password-field__toggle { align-items: center; background: transparent; border: 0; border-radius: var(--dt-radius-sm); color: var(--dt-color-text-muted); cursor: pointer; display: flex; height: 2rem; justify-content: center; position: absolute; right: .45rem; width: 2rem; }
.dt-password-field__toggle:hover, .dt-password-field__toggle:focus-visible { color: var(--dt-color-brand); outline: 2px solid var(--dt-color-focus); }
.dt-password-field__toggle svg { fill: none; height: 1.125rem; stroke: currentColor; stroke-width: 1.7; width: 1.125rem; }
.dt-verification-field input { font: var(--dt-weight-medium) 1.25rem var(--dt-font-compact); letter-spacing: 0; max-width: 15rem; text-align: center; }
.dt-range-slider__head { align-items: end; display: flex; justify-content: space-between; }
.dt-range-slider__head output { color: var(--dt-color-brand); font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); }
.dt-range-slider input { appearance: none; background: linear-gradient(to right, var(--dt-color-brand) 0 var(--dt-range-progress), var(--dt-color-border) var(--dt-range-progress) 100%); border-radius: 999px; cursor: pointer; height: .375rem; width: 100%; }
.dt-range-slider input::-webkit-slider-thumb { appearance: none; background: var(--dt-color-surface); border: 3px solid var(--dt-color-brand); border-radius: 50%; box-shadow: none; height: 1.25rem; width: 1.25rem; }
.dt-range-slider input::-moz-range-thumb { background: var(--dt-color-surface); border: 3px solid var(--dt-color-brand); border-radius: 50%; box-shadow: none; height: .875rem; width: .875rem; }
.dt-range-slider input:focus-visible { outline: 3px solid var(--dt-color-focus); outline-offset: 5px; }
.dt-range-slider__limits { color: var(--dt-color-text-muted); display: flex; font: var(--dt-weight-medium) var(--dt-text-sm) var(--dt-font-compact); justify-content: space-between; }
.dt-disclosure { background: var(--dt-color-surface); border: 1px solid var(--dt-color-border); border-radius: var(--dt-radius-md); color: var(--dt-color-text); overflow: hidden; width: min(36rem, 100%); }
.dt-disclosure summary { align-items: center; cursor: pointer; display: flex; font-size: var(--dt-text-base); font-weight: var(--dt-weight-medium); gap: 1rem; justify-content: space-between; list-style: none; min-height: 3.25rem; padding: .75rem 1rem; }
.dt-disclosure summary::-webkit-details-marker { display: none; }
.dt-disclosure summary::after { align-items: center; align-self: center; color: var(--dt-color-brand); content: '+'; display: inline-flex; flex: 0 0 1.25rem; font-size: 1.25rem; font-weight: var(--dt-weight-regular); height: 1.25rem; justify-content: center; line-height: 1; }
.dt-disclosure[open] summary { border-bottom: 1px solid var(--dt-color-border); }
.dt-disclosure[open] summary::after { content: '−'; }
.dt-disclosure__content { color: var(--dt-color-text-muted); font-size: var(--dt-text-md); line-height: 1.6; padding: 1rem; }
.dt-disclosure__content > :first-child { margin-top: 0; }
.dt-disclosure__content > :last-child { margin-bottom: 0; }
.dt-allocation { color: var(--dt-color-text); max-width: 100%; width: min(42rem, calc(100vw - 2rem)); }
.dt-allocation__bar { background: var(--dt-color-surface-muted); border: 1px solid var(--dt-color-border); border-radius: 999px; box-shadow: none; display: flex; height: 1rem; overflow: hidden; }
.dt-allocation__segment { min-width: 2px; }
.dt-allocation__segment + .dt-allocation__segment { box-shadow: none; }
.dt-allocation__legend { display: grid; gap: .625rem 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: .875rem 0 0; padding: 0; }
.dt-allocation__legend li, .dt-donut__legend li { align-items: center; display: grid; font-size: var(--dt-text-xs); gap: .5rem; grid-template-columns: auto 1fr auto; }
.dt-allocation__legend i, .dt-donut__legend i { border-radius: 50%; height: .5rem; width: .5rem; }
.dt-allocation__legend span, .dt-donut__legend span { color: var(--dt-color-text-muted); }
.dt-allocation__legend strong, .dt-donut__legend strong { font-family: var(--dt-font-interface); font-variant-numeric: tabular-nums; }
.dt-donut { align-items: center; color: var(--dt-color-text); display: grid; gap: 1.5rem; grid-template-columns: auto minmax(0, 1fr); width: min(34rem, 100%); }
.dt-donut__chart { display: grid; height: 10rem; place-items: center; position: relative; width: 10rem; }
.dt-donut svg { height: 100%; overflow: visible; transform: rotate(-90deg); width: 100%; }
.dt-donut circle { fill: none; stroke-width: 16; transition: stroke-width .15s ease; }
.dt-donut circle:hover { stroke-width: 20; }
.dt-donut__center { align-items: center; display: flex; flex-direction: column; gap: 4px; inset: 0; justify-content: center; line-height: 1.2; pointer-events: none; position: absolute; text-align: center; }
.dt-donut__center span { color: var(--dt-color-text-muted); font: var(--dt-weight-semibold) var(--dt-text-sm) var(--dt-font-compact); letter-spacing: 0; text-transform: none; }
.dt-donut__center strong { font-family: var(--dt-font-interface); font-size: 1.5rem; font-weight: var(--dt-weight-regular); font-variant-numeric: tabular-nums; }
.dt-donut__legend { display: grid; gap: .625rem; list-style: none; margin: 0; padding: 0; }
@media (max-width: 34rem) { .dt-allocation__legend { grid-template-columns: 1fr; } .dt-donut { grid-template-columns: 1fr; justify-items: center; } .dt-donut__legend { width: 100%; } }

@media (max-width: 34rem) {
  .dt-verification-field input { font-size: var(--dt-text-lg); letter-spacing: 0; max-width: 100%; }
  .dt-range-slider { width: 100%; }
  .dt-disclosure summary { gap: .75rem; padding-inline: .875rem; }
  .dt-allocation__bar { min-height: 1rem; }
  .dt-donut__chart { height: min(10rem, 70vw); width: min(10rem, 70vw); }
}

.dt-donut, .dt-allocation { min-width: 0; container-type: inline-size; }
.dt-donut { display: flex; flex-wrap: wrap; }
.dt-donut__chart { flex: 0 0 auto; max-width: 100%; }
.dt-donut__legend { flex: 1 1 180px; min-width: 0; }
.dt-donut__legend li { grid-template-columns: auto minmax(0, 1fr) auto; }
.dt-donut__legend span { overflow-wrap: anywhere; }
@container (max-width: 400px) { .dt-allocation__legend { grid-template-columns: 1fr; } }