/* creator tax allocation */
.taxbox { border: 1px dashed var(--line); border-radius: var(--r-l); padding: 16px; }
.taxbox[hidden] { display: none; }
.tax-warn { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--r-s); background: color-mix(in srgb, var(--sell) 14%, var(--char)); color: var(--sell); font-size: 13px; font-weight: 650; }
.tax-warn::before { content: '⚠'; margin-right: 8px; }
.tax-grid { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 22px; margin: 16px 0; align-items: start; }
.tax-chart { display: grid; gap: 14px; }
.donut { position: relative; width: 180px; max-width: 100%; aspect-ratio: 1; margin: 0 auto; }
.donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.donut circle { fill: none; stroke-width: 20; transition: stroke-dasharray 0.2s, stroke-dashoffset 0.2s; stroke-dasharray: 0 400; }
.donut .donut-bg { stroke: var(--char-3); stroke-dasharray: none; }
.donut b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; font-weight: 850; }
.tax-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.tax-legend li { display: flex; align-items: center; gap: 8px; }
.tax-legend i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.tax-legend li.un i { background: var(--char-3); }
.tax-legend b.down { color: var(--sell); }
.tax-legend b { margin-left: auto; font-weight: 750; }
.tax-sliders { display: grid; gap: 14px; min-width: 0; }
.tax-sum { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 13px; color: var(--mute); border: 1px solid var(--line); border-radius: var(--r-s); padding: 8px 8px 8px 12px; }
.tax-sum b { color: var(--bone); }
.tax-sum b.down { color: var(--sell); }
.tax-sum .btn { margin-left: auto; padding: 6px 14px; font-size: 13px; min-height: 0; }
.tax-row-h { display: flex; align-items: center; gap: 10px; }
.form .tax-row-h label { margin: 0; flex: 1; min-width: 0; color: var(--bone); font-size: 14px; }
.tax-row-h label span { color: var(--mute); font-weight: 500; font-size: 12px; }
.tax-num { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 8px; height: 32px; font-weight: 750; }
.tax-num input { width: 34px; background: none; border: 0; outline: none; text-align: right; font: inherit; color: inherit; }
.tax-row input[type='range'] { width: 100%; margin: 8px 0 0; appearance: none; height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--c) var(--p, 0%), var(--char-3) var(--p, 0%)); }
.tax-row input[type='range']::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; border-radius: 4px; background: var(--c); border: 2px solid var(--char); cursor: pointer; }
.tax-row input[type='range']::-moz-range-thumb { width: 14px; height: 14px; border-radius: 4px; background: var(--c); border: 2px solid var(--char); cursor: pointer; }
.tax-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--char-3); margin: 6px 0 10px; }
.tax-bar i { display: block; height: 100%; }
.div-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.div-box b { font-size: 18px; }
@media (max-width: 720px) {
  .tax-grid { grid-template-columns: minmax(0, 1fr); }
  .donut { width: 150px; }
}

/* wordmark: the yellow C mark is the first letter of CREW */
.brand { gap: 1px; }
.brand svg { width: 27px; height: 29px; }
.brand b { font-size: 37px; letter-spacing: 0.02em; transform: translateY(1px); }
.foot .brand svg { width: 20px; height: 22px; }
.foot .brand b { font-size: 27px; }