@media (scripting: none) {
  .studio-js,
  .tool-js {
    display: none !important;
  }
}
.tool-head {
  padding-block: clamp(1.75rem, 4.5vw, 3.75rem) clamp(1.75rem, 3.5vw, 3rem);
}
.tool-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "crumbs"
    "copy"
    "switch";
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 760px) {
  .tool-head__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "crumbs switch"
      "copy copy";
    gap: var(--s-7) var(--s-8);
  }
}
.tool-head .crumbs {
  grid-area: crumbs;
}
.tool-head__copy {
  grid-area: copy;
  display: grid;
  gap: var(--s-4);
  max-width: 60rem;
}
.tool-head h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.8vw, 5rem);
}
.tool-head .lede {
  max-width: 38rem;
  text-wrap: balance;
}
@media (min-width: 419px) and (max-width: 423.98px) {
  .tool-head--studio .lede {
    max-width: calc(100% - 8px);
  }
}
@media (min-width: 548px) and (max-width: 550.98px) {
  .tool-head--studio .lede {
    max-width: calc(100% - 6px);
  }
}
@media (min-width: 343px) and (max-width: 343.98px) {
  .tool-head--calc .lede {
    max-width: calc(100% - 4px);
  }
}
@media (min-width: 444px) and (max-width: 445.98px) {
  .tool-head--calc .lede {
    max-width: calc(100% - 5px);
  }
}
@media (min-width: 372px) {
  .tool-head--studio .tool-head__br {
    display: none;
  }
}
@media (min-width: 420px) {
  .tool-head--calc .tool-head__br {
    display: none;
  }
}
@media (max-width: 419.98px) {
  .tool-head__more {
    display: none;
  }
}
.tool-switch {
  grid-area: switch;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--s-1);
  padding: var(--s-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper-2);
}
@media (min-width: 480px) {
  .tool-switch {
    justify-self: start;
    width: 25.5rem;
  }
  .tool-switch__link {
    justify-content: center;
  }
}
@media (max-width: 479.98px) {
  .tool-switch__first {
    display: none;
  }
}
@media (min-width: 760px) {
  .tool-switch {
    justify-self: end;
  }
}
.tool-switch__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  padding: 0 var(--s-4);
  border-radius: 10px;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-stretch: var(--semi);
  font-weight: 560;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.tool-switch__link:hover {
  background: rgba(255, 255, 255, 0.7);
  color: var(--ink);
}
.tool-switch__link[aria-current="page"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line-2), var(--shadow-xs);
}
.tool-switch__n {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.tool-switch__link[aria-current="page"] .tool-switch__n {
  color: var(--accent);
}
.tool-body {
  padding-bottom: var(--section);
}
.tool-noscript {
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.tool-notice {
  margin-bottom: var(--s-6);
}
.tool-card {
  --pad: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr); 
  gap: var(--s-5);
  align-content: start;
  min-width: 0;
  padding: var(--pad);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}
.tool-card__title {
  font-family: var(--font-semi, var(--font));
  font-size: var(--t-l);
  font-stretch: var(--semi);
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.tool-card__title sub {
  margin-left: 0.06em;
}
.tool-label-h {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-stretch: 100%;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tool-label-h::before {
  content: "";
  flex: none;
  width: 14px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.onyx .tool-label-h {
  color: var(--onyx-ink-3);
}
.tool-textbtn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--s-1);
  border: 0;
  background: none;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 560;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.22em;
  transition: color var(--fast) var(--ease), text-decoration-color var(--fast) var(--ease);
}
.tool-textbtn:hover {
  color: var(--ink);
  text-decoration-color: currentColor;
}
.tool-textbtn--onyx {
  min-height: 2.25rem;
  color: var(--onyx-ink);
}
.tool-textbtn--onyx:hover {
  color: #ffffff;
}
@media (pointer: coarse) {
  .tool-textbtn--onyx {
    min-height: 2.75rem;
    margin-block: -0.25rem;
  }
}
.tool-notes {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  min-width: 0;
}
.tool-notes__title {
  max-width: 18ch;
  font-size: var(--t-2xl);
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.tool-method {
  display: grid;
  margin-top: var(--s-2);
  border-top: 1px solid var(--line-2);
}
.tool-method > div {
  display: grid;
  gap: var(--s-1);
  align-content: start;
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--line);
}
.tool-method dt {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.tool-method dt .mono {
  font-weight: 500;
}
.tool-method dd {
  max-width: var(--max-text);
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}
.tool-method sup {
  font-size: 0.7em;
  line-height: 0;
}
.tool-method .mono {
  line-height: 1;
  white-space: nowrap;
}
.tool-next {
  position: relative;
  display: grid;
  gap: var(--s-1);
  margin-top: var(--s-4);
  padding: var(--s-5) calc(var(--s-5) + 3.5rem) var(--s-5) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--fast) var(--ease), box-shadow var(--mid) var(--ease);
}
.tool-next:hover {
  border-color: var(--line-strong);
  color: var(--ink);
  box-shadow: var(--shadow-s);
}
.tool-next__k {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
@media (max-width: 479.98px) {
  .tool-next__more {
    display: none;
  }
}
.tool-next__t {
  margin-top: var(--s-1);
  font-family: var(--font-semi, var(--font));
  font-size: var(--t-l);
  font-stretch: var(--semi);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.tool-next__d {
  color: var(--ink-3);
  font-size: 0.875rem;
}
.tool-next__go {
  position: absolute;
  top: 50%;
  right: var(--s-5);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-top: -1.375rem;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  transition: transform var(--mid) var(--ease-out);
}
.tool-next__go svg {
  width: 1.25rem;
  height: 1.25rem;
}
.tool-next:hover .tool-next__go {
  transform: translateX(3px);
}
.studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "bench"
    "inst";
  gap: var(--s-6);
  align-items: start;
}
@media (min-width: 960px) {
  .studio {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "bench inst";
    gap: var(--s-7);
  }
}
.studio-bench {
  grid-area: bench;
  container-type: inline-size;
}
.studio-bench__more {
  display: grid;
  gap: var(--s-5);
  align-content: start;
  min-width: 0;
}
.studio-bench__foot[hidden] {
  display: none;
}
@media (max-width: 959.98px) {
  html:has(:is(.studio-help, .studio-bench__more):focus-within) {
    scroll-padding-top: calc(var(--header-h) + var(--s-4) + 3.75rem + 2px + var(--s-7));
  }
  @supports not selector(:has(*)) {
    .studio-bench :is(.studio-help, .studio-bench__more) :is(a, button, input, select) {
      scroll-margin-top: 4.5rem;
    }
  }
}
@media (min-width: 960px) and (min-height: 720px) {
  .studio-bench {
    position: sticky;
    top: calc(var(--header-h) + var(--s-4));
    grid-template-rows: auto auto auto minmax(0, 1fr);
    gap: var(--s-4);
    max-height: calc(100dvh - var(--header-h) - var(--s-4) * 2);
  }
  .studio-bench .studio-editor__input {
    max-height: min(var(--ed-max, clamp(5.25rem, 100dvh - 30rem, 24rem)), 24rem);
  }
  .studio-bench .studio-help {
    min-height: calc(var(--lines) * 1.25rem + var(--s-4) + 1px);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
  }
  .studio-bench__more {
    gap: var(--s-4);
    min-height: 0;
    max-height: var(--more-max, none);
    margin: calc(var(--s-4) * -1) calc(var(--pad) * -1) calc(var(--more-gap, 0px) - var(--s-2));
    padding: var(--s-4) calc(var(--pad) - var(--sbw, 0px)) var(--s-2) var(--pad);
    overflow-y: auto;
    scroll-padding-block: var(--s-4) var(--s-2);
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .studio-bench .studio-mods {
    padding-top: 0;
    border-top: 0;
  }
  .studio-bench .studio-examples {
    padding-top: var(--s-4);
  }
  .studio-bench__foot {
    margin: calc(var(--s-2) - var(--s-4)) calc(var(--pad) * -1) calc(var(--s-3) * -1);
    padding-inline: var(--pad);
    border-top: 1px solid var(--line);
  }
  .studio-bench:has(> .studio-bench__foot:not([hidden])) .studio-help {
    position: relative;
  }
  .studio-bench:has(> .studio-bench__foot:not([hidden])) .studio-help::after {
    position: absolute;
    right: calc(var(--pad) * -1);
    bottom: -1px;
    left: calc(var(--pad) * -1);
    height: 1px;
    background: var(--line);
    content: "";
  }
}
@media (min-width: 960px) and (min-height: 720px) and (max-height: 859.98px) {
  .studio-bench .studio-editor__input {
    min-height: 5.25rem;
  }
}
@media (min-width: 960px) and (min-height: 720px) and (max-height: 999.98px) {
  .studio-bench .studio-examples__list {
    --end: calc(var(--pad) - var(--sbw, 0px));
    display: flex;
    gap: var(--s-2);
    margin: 0 calc(var(--end) * -1) 0 calc(var(--pad) * -1);
    padding: var(--s-1) var(--end) var(--s-1) var(--pad);
    overflow-x: auto;
    scroll-padding-inline: var(--pad) var(--end);
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
  .studio-bench .studio-chip {
    flex: none;
    margin: 0;
  }
}
@media (min-width: 960px) and (min-height: 720px) and (max-height: 999.98px) and (pointer: coarse) {
  .studio-bench .studio-examples__list {
    scrollbar-width: none;
  }
}
.studio-bench__page {
  gap: var(--s-2);
}
.studio-bench__page svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  transform: rotate(90deg);
  transition: transform var(--fast) var(--ease);
}
.studio-bench__page.is-up svg {
  transform: rotate(-90deg);
}
.studio-inst {
  grid-area: inst;
}
.studio-notes {
  margin-top: var(--s-6);
  padding-top: var(--s-6);
}
@media (min-width: 760px) {
  .studio-notes .tool-method {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-7);
  }
  .studio-notes .tool-next {
    max-width: 40rem;
  }
}
@media (min-width: 960px) {
  .studio-notes {
    margin-top: var(--s-8);
    padding-top: var(--s-8);
  }
}
@media (min-width: 1180px) {
  .studio-notes .tool-method {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.studio-bench__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-block: calc(var(--s-2) * -1);
}
.studio-editor {
  border-radius: 14px;
  transition: box-shadow var(--fast) var(--ease);
}
.studio-editor__input,
.studio-editor__bar {
  border: 1px solid var(--field-rule);
  transition: border-color var(--fast) var(--ease);
}
.studio-editor:hover :is(.studio-editor__input, .studio-editor__bar) {
  border-color: var(--ink-3);
}
.studio-editor:has(.studio-editor__input:focus) {
  box-shadow: 0 0 0 4px rgba(8, 117, 112, 0.16);
}
.studio-editor:has(.studio-editor__input:focus) :is(.studio-editor__input, .studio-editor__bar) {
  border-color: var(--accent);
}
.studio-editor:has([aria-invalid="true"]) :is(.studio-editor__input, .studio-editor__bar) {
  border-color: var(--bad);
}
.studio-editor:has([aria-invalid="true"]):has(.studio-editor__input:focus) {
  box-shadow: 0 0 0 4px rgba(192, 40, 27, 0.14);
}
.studio-editor:has(.studio-editor__input:focus-visible),
.studio-step:has(.studio-step__input:focus-visible) {
  box-shadow: var(--focus-ring);
}
.studio-editor:has([aria-invalid="true"]):has(.studio-editor__input:focus-visible),
.studio-step:has([aria-invalid="true"]):has(.studio-step__input:focus-visible) {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--bad);
}
.studio-editor .studio-editor__bar {
  border-top-color: var(--line);
}
.studio-editor__input {
  display: block;
  width: 100%;
  min-height: 8.5rem;
  max-height: 24rem;
  field-sizing: content; 
  padding: var(--s-4);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1rem; 
  line-height: 1.6;
  letter-spacing: 0.04em;
  resize: none; 
  overflow-wrap: anywhere;
}
.studio-editor__input:focus {
  outline: none;
}
.studio-editor__input::placeholder {
  color: #6e7177;
}
@supports not (field-sizing: content) {
  .studio-editor__input {
    height: var(--fit-h, auto);
  }
}
@media (scripting: none) {
  .studio-bench :is(.studio-editor__input, .studio-editor__bar, .select, .studio-step) {
    border-color: var(--line-2);
    background-color: var(--surface-2);
  }
  .studio-editor:hover :is(.studio-editor__input, .studio-editor__bar),
  .studio-bench .select:hover,
  .studio-step:hover {
    border-color: var(--line-2);
  }
  .studio-bench :is(.select, .studio-step__input, .check input):disabled {
    cursor: not-allowed;
  }
  .studio-bench .select:disabled,
  .studio-bench .studio-check {
    color: var(--ink-3);
  }
  .studio-bench .check input:disabled {
    border-color: var(--line-strong);
    background: var(--surface-2);
  }
}
.studio-editor__input::selection {
  background: var(--accent);
  color: #ffffff;
}
.studio-editor__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  height: 3rem; 
  padding: 0 var(--s-3) 0 var(--s-4);
  border-radius: 0 0 14px 14px;
  background: var(--surface-2);
}
.studio-status {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  min-width: 0;
  color: var(--ink-3);
  font-size: var(--t-s);
  line-height: 1.25rem;
}
.studio-status__icon {
  display: grid;
  flex: none;
  height: 1.25rem;
  place-items: center;
}
.studio-status__icon svg {
  width: 1rem;
  height: 1rem;
}
.studio-status__text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.studio-status.is-ok {
  flex-shrink: 0; 
  color: var(--ink-2);
}
.studio-status.is-ok .studio-status__icon {
  color: var(--pass);
}
.studio-status.is-bad {
  color: var(--bad);
  font-weight: 540;
}
.studio-status__match {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: var(--s-1);
  min-width: 0;
  min-height: 2.75rem;
  color: var(--ink-3);
  font-size: var(--t-s);
  text-decoration: none;
  white-space: nowrap;
}
.studio-status__match[hidden] {
  display: none;
}
.studio-status__name {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 560;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-overflow: ellipsis;
  text-underline-offset: 0.22em;
}
.studio-status__match:hover .studio-status__name {
  color: var(--accent);
  text-decoration-color: currentColor;
}
@container (max-width: 419.98px) {
  .studio-editor__bar {
    display: grid;
    grid-template-rows: 1.25rem 1.25rem;
    align-content: center;
    gap: var(--s-2) 0;
    height: 4.5rem;
    padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  }
  .studio-editor__bar:not(.has-match) .studio-status {
    grid-row: 1 / -1;
    align-self: center;
  }
  .studio-editor__bar.has-match .studio-status__text {
    -webkit-line-clamp: 1;
  }
  .studio-status__match {
    position: relative;
    justify-self: start;
    max-width: 100%;
    min-height: 1.25rem;
  }
  .studio-status__match::after {
    content: "";
    position: absolute;
    inset: -12px 0;
  }
}
@media (pointer: fine) {
  @container (max-width: 419.98px) {
    .studio-editor__bar {
      gap: 0;
      height: 3.5rem;
      padding-block: var(--s-2);
    }
    .studio-status__match::after {
      inset: -2px 0;
    }
  }
}
.studio-sum-mat {
  position: sticky;
  top: var(--header-h);
  z-index: 2;
  margin: calc(var(--s-4) * -1) calc(var(--pad) * -1) calc(var(--s-2) * -1 - 1px);
  padding: var(--s-4) var(--pad) var(--s-2);
  border-bottom: 1px solid transparent;
  background: var(--surface);
  transition: border-color var(--mid) var(--ease);
}
.studio-sum-mat.is-stuck {
  border-bottom-color: var(--line);
}
.studio-sum {
  position: relative;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--onyx-line);
  border-radius: var(--r);
  background: var(--onyx-2);
  box-shadow: var(--shadow-s);
}
.studio-sum__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-1) var(--s-3);
  margin: 0;
}
.studio-sum__mono dd {
  min-width: calc(10ch + 1.25rem);
}
.studio-sum__avg dd {
  min-width: calc(9ch + 1.25rem);
}
.studio-sum__pi dd {
  min-width: 5ch;
}
.studio-sum__du,
.studio-sum__abbr {
  display: none;
}
@media (max-width: 419.98px) {
  .studio-sum__list {
    column-gap: var(--s-2);
  }
  .studio-sum [data-sum-v].is-text {
    font-size: var(--t-xs);
  }
  .studio-sum__mono dd {
    min-width: 10ch;
  }
  .studio-sum__avg dd {
    min-width: 9ch;
  }
  .studio-sum__du {
    display: inline;
  }
  .studio-sum .studio-sum__u {
    display: none;
  }
}
.studio-sum__list > div {
  display: grid;
}
.studio-sum dt {
  color: var(--onyx-ink-3);
  font-size: var(--t-2xs);
  line-height: 1rem;
}
.studio-sum dt .mono {
  font-size: 1em;
  line-height: 1;
}
.studio-sum dd {
  margin: 0;
  color: var(--onyx-ink);
  font-family: var(--mono);
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
  line-height: 1.25rem;
  white-space: nowrap;
  transition: opacity var(--mid) var(--ease);
}
.studio-sum__u {
  color: var(--onyx-ink-3);
  font-size: var(--t-2xs);
  line-height: 1;
}
.studio-sum.is-empty .studio-sum__u {
  display: none;
}
.studio-sum .studio-sum__held {
  position: absolute;
  top: 0;
  right: var(--s-3);
  background: color-mix(in srgb, var(--warn-onyx) 12%, var(--onyx-2));
  transform: translateY(-50%);
}
.studio-sum.is-paused .studio-sum__held {
  visibility: visible;
}
@media (max-width: 359.98px) {
  .studio-sum {
    padding-inline: var(--s-3);
  }
  .studio-sum__list {
    column-gap: var(--s-1);
  }
  .studio-sum dd {
    font-size: var(--t-xs);
  }
}
@media (max-width: 375.98px) {
  .studio-sum [data-sum-v].is-text {
    font-size: var(--t-2xs);
  }
  .studio-sum__full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .studio-sum__abbr {
    display: inline;
  }
}
@media (min-width: 960px) {
  .studio-sum-mat {
    display: none;
  }
}
.studio-help {
  --lines: 2;
  display: grid;
  min-height: calc(var(--lines) * 1.25rem);
  margin-top: calc(var(--s-2) * -1);
}
@container (max-width: 349.98px) {
  .studio-help {
    --lines: 3;
  }
}
@container (max-width: 277.98px) {
  .studio-help {
    --lines: 4;
  }
}
.studio-help > * {
  grid-area: 1 / 1;
}
.studio-help.has-problem .studio-hint {
  visibility: hidden;
}
.studio-problem {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  gap: 0 var(--s-3);
  align-items: start;
  color: var(--bad);
  font-size: var(--t-s);
  line-height: 1.25rem;
}
.studio-problem[hidden] {
  display: none;
}
.studio-problem.is-info {
  color: var(--warn);
}
.studio-problem__icon {
  display: grid;
  height: 1.25rem;
  place-items: center;
}
.studio-problem__icon svg {
  width: 1rem;
  height: 1rem;
}
.studio-problem.is-info .studio-problem__icon {
  color: var(--warn);
}
.studio-problem__msg {
  font-weight: 540;
}
.studio-problem__acts {
  display: grid;
  justify-items: end;
}
@container (max-width: 419.98px) {
  .studio-problem {
    display: block;
    position: relative;
    padding-left: calc(1rem + var(--s-3));
  }
  .studio-problem__icon {
    position: absolute;
    top: 0;
    left: 0;
  }
  .studio-problem__msg,
  .studio-problem__acts {
    display: inline;
  }
  .studio-problem__msg,
  .studio-problem__acts > :not(:last-child) {
    margin-right: var(--s-3);
  }
  .studio-problem .tool-textbtn.is-off {
    display: none;
  }
}
.studio-problem .tool-textbtn {
  min-height: 1.25rem;
  margin-block: -0.75rem;
  padding-block: 0.75rem;
  padding-inline: 0;
  color: var(--ink);
  font-size: var(--t-s);
  line-height: 1.25rem;
}
.studio-problem .tool-textbtn.is-off {
  visibility: hidden;
}
.studio-problem__more {
  color: var(--ink-3);
  font-weight: 400;
  white-space: nowrap;
}
.studio-hint {
  color: var(--ink-3);
  font-size: var(--t-s);
  line-height: 1.25rem;
}
.studio-hint .mono {
  color: var(--ink-2);
  font-size: var(--t-xs);
  line-height: 1; 
  white-space: nowrap;
}
.studio-hint__br {
  display: none;
}
@container (min-width: 300px) and (max-width: 28.49rem) {
  .studio-hint__br--mid {
    display: inline;
  }
}
@container (max-width: 273.98px) {
  .studio-hint__br--narrow {
    display: inline;
  }
}
@container (max-width: 247.98px) {
  .studio-hint__br--xs {
    display: inline;
  }
}
@container (min-width: 28.5rem) {
  .studio-hint__line {
    display: block;
  }
}
:is(.studio-problem__msg, .studio-status__text, .studio-carried) .mono {
  font-size: var(--t-xs);
  line-height: 1;
  white-space: nowrap;
}
.studio-mods {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
@container (min-width: 275px) {
  .studio-mods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container (min-width: 275px) and (max-width: 299.98px) {
  .studio-mods .select {
    padding-right: var(--s-7);
    padding-left: var(--s-3);
    background-position: right var(--s-3) center;
  }
  .studio-check {
    gap: var(--s-2);
    font-size: var(--t-s);
  }
}
@container (min-width: 760px) {
  .studio-mods {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.studio-carried {
  grid-column: 1 / -1;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-s);
  background: var(--accent-soft);
  color: var(--ink-2);
  font-size: var(--t-s);
  line-height: 1.5;
  transition: background var(--fast) var(--ease);
}
.studio-carried > span {
  display: none;
}
.studio-carried.is-on .studio-carried__on,
.studio-carried.is-off .studio-carried__off,
.studio-carried.is-offer .studio-carried__offer {
  display: inline;
}
.studio-carried.is-off {
  background: var(--paper-2);
}
.studio-carried > .studio-carried__ruo:not([hidden]) {
  display: block;
  margin-top: var(--s-1);
}
.studio-carried:not(.can-restore) .studio-carried__restore {
  display: none;
}
.studio-carried .tool-textbtn {
  min-height: 1.5rem;
  margin-block: -0.75rem;
  padding: 0.75rem 0;
  color: var(--ink);
  font-size: var(--t-s);
  line-height: 1.5rem;
  vertical-align: baseline;
}
.studio-step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) 3rem;
  height: 3rem;
  border: 1px solid var(--field-rule);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.studio-step:hover {
  border-color: var(--ink-3);
}
.studio-step:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(8, 117, 112, 0.16);
}
.studio-step:has([aria-invalid="true"]) {
  border-color: var(--bad);
}
.studio-step__btn {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: var(--surface-2);
  color: var(--ink-2);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.studio-step__btn:hover:not(:disabled) {
  background: var(--paper-2);
  color: var(--ink);
}
.studio-step__btn:active:not(:disabled) {
  background: var(--paper-3);
}
.studio-step__btn:disabled {
  background: var(--surface-2);
  color: var(--ink-4);
  cursor: not-allowed;
}
.studio-step__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
  border-radius: 10px;
}
.studio-step__btn svg {
  width: 1.25rem;
  height: 1.25rem;
}
.studio-step__input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-inline: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}
.studio-step__input::-webkit-inner-spin-button,
.studio-step__input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.studio-step__input:focus {
  outline: none;
}
@media (scripting: none) {
  .studio-step {
    grid-template-columns: minmax(0, 1fr);
  }
  .studio-step__input {
    border-inline: 0;
  }
}
.studio-check {
  align-items: center;
  min-height: 3rem;
}
.studio-check input {
  margin-top: 0;
}
.studio-examples {
  display: grid;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.studio-examples__list {
  margin-bottom: calc(var(--s-2) * -1);
  text-wrap: balance;
}
.studio-chip {
  margin: 0 var(--s-2) var(--s-2) 0;
  vertical-align: top;
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.studio-chip:focus-visible {
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .studio-chip {
    min-height: 2.75rem;
  }
}
@media (max-width: 599.98px) {
  .studio-examples__list {
    display: flex;
    gap: var(--s-2);
    margin: 0 calc(var(--pad) * -1);
    padding: var(--s-1) var(--pad);
    overflow-x: auto;
    scroll-padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .studio-examples__list::-webkit-scrollbar {
    display: none;
  }
  .studio-chip {
    flex: none;
    margin: 0;
  }
}
.studio-inst {
  --wc-hydrophobic: #d8a24b;
  --wc-polar: #4cc68a;
  --wc-basic: #8ea2ff;
  --wc-acidic: #ff8f80;
  --wc-special: #9aa0aa;
  --pad: clamp(1.25rem, 3vw, 2rem);
  container: inst / inline-size;
  display: grid;
  align-content: start;
  min-width: 0;
  padding: var(--pad);
  border: 1px solid var(--onyx-line);
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0) 24rem), var(--onyx);
  box-shadow: var(--shadow);
}
.studio-c--hydrophobic {
  --wc: var(--wc-hydrophobic);
}
.studio-c--polar {
  --wc: var(--wc-polar);
}
.studio-c--basic {
  --wc: var(--wc-basic);
}
.studio-c--acidic {
  --wc: var(--wc-acidic);
}
.studio-c--special {
  --wc: var(--wc-special);
}
.studio-inst__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-5);
}
.studio-inst__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
@container inst (max-width: 30.49rem) {
  .studio-inst__actions {
    flex-basis: 100%;
  }
}
.studio-readout {
  position: relative;
}
.studio-block__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-3);
  min-width: 0;
  min-height: 1.25rem;
}
.studio-held {
  visibility: hidden;
  padding: 0 var(--s-2);
  border-radius: var(--r-xs);
  background: rgba(243, 207, 134, 0.12);
  color: var(--warn-onyx);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  line-height: 1.25rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.studio-inst.is-paused .studio-held {
  visibility: visible;
}
.studio-block {
  container-type: inline-size;
}
.studio-read__held {
  display: none;
  color: var(--warn-onyx);
}
@container (max-width: 289.98px) {
  .studio-block .studio-held {
    display: none;
  }
  .studio-read__held {
    display: inline;
  }
  .studio-read__held ~ span {
    display: none !important;
  }
}
@container (max-width: 303.98px) {
  .studio-block--wheel .studio-held {
    display: none;
  }
  .studio-block--wheel .studio-read__held {
    display: inline;
  }
  .studio-block--wheel .studio-read__held ~ span {
    display: none !important;
  }
}
@container inst (max-width: 247.98px) {
  .studio-inst__head {
    position: relative;
  }
  .studio-inst__head .studio-held {
    position: absolute;
    top: calc(100% + var(--s-5));
    right: var(--s-3);
    z-index: 1;
    background: color-mix(in srgb, var(--warn-onyx) 12%, var(--onyx-2));
    transform: translateY(-50%);
  }
}
.studio-inst :is(.studio-big__v, .studio-v, .studio-ion__mz, .studio-comp__n),
.studio-sum [data-sum-v] {
  transition: color var(--mid) var(--ease);
}
.studio-inst :is(.studio-comp__bar, .studio-hydro__bars, .studio-hydro__mean, .studio-charge__curve, .studio-charge__pi, .studio-wheel__arrow) {
  transition: opacity var(--mid) var(--ease);
}
.studio-inst .studio-svg__label {
  transition: fill var(--mid) var(--ease);
}
.studio-inst.is-paused :is(.studio-big__v, .studio-v, .studio-ion__mz, .studio-comp__n),
.studio-sum.is-paused [data-sum-v] {
  color: var(--onyx-ink-2);
}
.studio-inst.is-paused :is(.studio-v.is-text, .studio-v .is-text),
.studio-sum.is-paused [data-sum-v].is-text {
  color: var(--onyx-ink-3);
}
.studio-inst.is-paused .studio-svg__label {
  fill: var(--onyx-ink-2);
}
.studio-inst.is-paused :is(.studio-comp__bar, .studio-hydro__bars, .studio-hydro__mean, .studio-charge__curve, .studio-charge__pi, .studio-wheel__arrow, .studio-wheel__bead circle) {
  opacity: 0.65;
}
.studio-inst.is-empty :is(.studio-big__v, .studio-v, .studio-comp__n),
.studio-inst.is-empty .studio-ions__list li.studio-ions__none {
  color: var(--onyx-ink-3);
}
.studio-inst.is-empty .studio-ions__list li.studio-ions__none {
  font-family: var(--mono);
}
.studio-inst.is-empty :is(.studio-big__u, .studio-v__u) {
  visibility: hidden;
}
.studio-more {
  justify-self: start;
  margin-block: calc(var(--s-1) * -1);
}
.studio-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--onyx-line);
  border-radius: var(--r);
  background: var(--onyx-line);
}
@container (min-width: 220px) {
  .studio-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studio-tile--mass,
  .studio-tile--wide {
    grid-column: span 2;
  }
}
@container (min-width: 220px) and (max-width: 285.98px) {
  .studio-tile--unit {
    grid-column: span 2;
  }
}
@container (min-width: 608px) {
  .studio-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.studio-tile {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  gap: var(--s-1);
  min-width: 0;
  padding: var(--s-4);
  background: var(--onyx-2);
}
@container (max-width: 399.98px) {
  .studio-tile {
    padding: var(--s-3);
  }
}
@container (min-width: 286px) and (max-width: 303.98px) {
  .studio-tile {
    padding-inline: var(--s-2);
  }
}
@container (min-width: 220px) and (max-width: 285.98px) {
  .studio-tile:not(.studio-tile--mass, .studio-tile--wide) .studio-note {
    min-height: 2.8em;
  }
  .studio-tile.studio-tile--unit .studio-note {
    min-height: 0;
  }
}
@container (min-width: 608px) and (max-width: 719.98px) {
  .studio-tile {
    padding: var(--s-3) var(--s-3) var(--s-4);
  }
  .studio-tile--block {
    grid-column: 1 / -1;
  }
}
.studio-tile dt {
  color: var(--onyx-ink-3);
  font-size: var(--t-xs);
  line-height: 1.35;
}
.studio-tile dt .mono {
  line-height: 1;
}
.studio-tile dd {
  margin: 0;
}
.studio-v {
  align-self: end;
  color: var(--onyx-ink);
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.studio-v__u {
  color: var(--onyx-ink-3);
  font-size: 0.75rem;
}
.studio-v sup,
.studio-v__u sup {
  font-size: 0.75em;
  line-height: 0;
}
.studio-v.is-text,
.studio-v .is-text,
.studio-sum [data-sum-v].is-text {
  color: var(--onyx-ink-2);
  font-family: var(--font);
  font-variant-numeric: normal;
}
.studio-v.is-text,
.studio-v .is-text {
  font-size: 0.9375rem;
  line-height: calc(1.0625rem * 1.35);
}
.studio-v .is-text {
  line-height: 1;
}
.studio-v__u[hidden] {
  display: none;
}
.studio-formula {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.studio-big {
  align-self: end;
  color: var(--onyx-ink);
  font-size: clamp(1.625rem, 6cqi, 2.5rem);
  font-stretch: var(--wide);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.1;
  white-space: nowrap;
}
@container (min-width: 608px) {
  .studio-big {
    font-size: clamp(1.75rem, 4.2cqi, 2.5rem);
  }
}
.studio-big__u {
  color: var(--onyx-ink-2);
  font-family: var(--mono);
  font-size: 1rem;
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: 0;
}
.studio-note {
  color: var(--onyx-ink-3);
  font-size: var(--t-xs);
  line-height: 1.4;
}
.studio-note:empty::before {
  content: "\00a0";
}
.studio-k {
  color: var(--onyx-ink-3);
  font-size: var(--t-xs);
}
.studio-tile--block {
  grid-row: span 2;
  gap: var(--s-3);
}
.studio-comp {
  container-type: inline-size;
  display: grid;
  gap: var(--s-3);
  align-content: start;
  min-width: 0;
}
.studio-comp__bar {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--onyx-3);
}
.studio-comp__seg {
  flex: var(--n, 1) 1 0;
  min-width: 0;
  background: var(--wc);
}
.studio-comp__seg.is-start:not(:first-child) {
  margin-left: var(--s-1);
}
.studio-comp__legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(8.5rem, calc((100% - 2 * var(--s-3)) / 3)), 1fr));
  gap: var(--s-2) var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@container (min-width: 284px) and (max-width: 431.98px) {
  .studio-comp__legend {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
  }
}
.studio-comp__legend li {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-1);
  height: 1.25rem;
  color: var(--onyx-ink-2);
  font-size: var(--t-xs);
  line-height: 1.25rem;
  white-space: nowrap;
}
.studio-dot {
  flex: none;
  align-self: center;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--wc);
}
.studio-comp__n {
  color: var(--onyx-ink);
  font-family: var(--mono);
  font-weight: 500;
  line-height: 1;
}
.studio-comp__pct {
  color: var(--onyx-ink-3);
  font-family: var(--mono);
  line-height: 1;
}
.studio-ions {
  container-type: inline-size;
  display: grid;
}
.studio-ions__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(1.75rem, auto));
  grid-auto-flow: column;
  column-gap: var(--s-5);
  margin: calc(var(--s-1) * -1) 0 0;
  padding: 0;
  list-style: none;
}
@container (max-width: 329.98px) {
  .studio-ions__list {
    grid-template-rows: repeat(2, minmax(calc(2.75rem + 1px), auto));
  }
  .studio-inst .studio-ions__list li:not(.studio-ions__none) {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding-block: var(--s-1);
    line-height: 1.125rem;
  }
}
.studio-inst .studio-ions__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  border-top: 1px solid var(--onyx-line);
  color: var(--onyx-ink);
  font-family: var(--mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
}
.studio-ions__list li:nth-child(odd) {
  border-top: 0;
}
.studio-inst .studio-ions__list li.studio-ions__none {
  grid-area: 1 / 1 / -1 / -1;
  align-items: flex-start;
  padding-block: var(--s-1);
  color: var(--onyx-ink-2);
  font-family: var(--font);
  font-size: var(--t-s);
  font-variant-numeric: normal;
  line-height: 1.4;
}
.studio-ion {
  color: var(--onyx-ink-3);
}
.studio-ion sup {
  font-size: 0.72em;
  line-height: 0;
}
.studio-block {
  display: grid;
  gap: var(--s-3);
  align-content: start;
  min-width: 0;
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--onyx-line);
}
.studio-block__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-4);
}
.studio-block__meta {
  color: var(--onyx-ink-3);
  font-size: var(--t-xs);
}
@container (max-width: 487.98px) {
  .studio-block--charge .studio-block__head {
    flex-direction: column;
  }
}
@container (max-width: 559.98px) {
  .studio-block--hydro .studio-block__head {
    flex-direction: column;
  }
}
@container (max-width: 571.98px) {
  .studio-block--wheel .studio-block__head {
    flex-direction: column;
  }
}
.studio-phrase {
  white-space: nowrap;
}
@container (max-width: 399.98px) {
  .studio-sep {
    display: none;
  }
  .studio-phrase,
  .studio-hydro__line {
    display: block;
  }
}
.studio-read {
  height: 1.25rem;
  overflow: hidden;
  color: var(--onyx-ink-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.25rem;
  letter-spacing: 0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-read :is(.studio-hint-fine, .studio-hint-coarse, .studio-read__note) {
  font-family: var(--font);
  line-height: 1;
  letter-spacing: 0;
}
@container (max-width: 299.98px) {
  .studio-read {
    height: 2.5rem;
    white-space: normal;
  }
  .studio-read__sep {
    display: none;
  }
  .studio-read__last {
    display: block;
  }
}
.studio-hydro__line.is-off {
  display: none;
}
@container (max-width: 399.98px) {
  .studio-hydro__line.is-off {
    display: block;
    visibility: hidden;
  }
}
.studio-hint-coarse {
  display: none;
}
@media (pointer: coarse) {
  .studio-hint-fine {
    display: none;
  }
  .studio-hint-coarse {
    display: inline;
  }
}
.studio-strip {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--s-3) var(--s-4);
  min-height: 4.25rem; 
  margin: calc(var(--s-1) * -1);
  padding: var(--s-1);
  border-radius: 12px;
}
.studio-strip:focus-visible {
  outline: 2px solid var(--accent-onyx);
  outline-offset: 2px;
}
.studio-strip__empty {
  align-self: center;
  color: var(--onyx-ink-3);
  font-size: 0.875rem;
}
.studio-run {
  --k: min(2.25rem, calc((100cqi - 36px) / 10)); 
  display: grid;
  gap: var(--s-2);
  min-width: 0;
}
.studio-run:not(:has(.studio-key--bad)) {
  content-visibility: auto;
  contain-intrinsic-size: auto calc(var(--k) * 10 + 36px) calc(var(--k) * 1.12 + var(--t-2xs) + var(--s-2));
}
.studio-run__n {
  color: var(--onyx-ink-3);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  line-height: 1;
  letter-spacing: 0.04em;
}
.studio-run__keys {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1);
}
.studio-key {
  --k: min(2.25rem, calc((100cqi - 36px) / 10)); 
  display: grid;
  place-items: center;
  width: var(--k);
  height: calc(var(--k) * 1.12);
  border: 1px solid var(--onyx-line-2);
  border-radius: var(--r-xs);
  background: var(--onyx-2);
  color: var(--onyx-ink);
  font-family: var(--mono);
  font-size: max(0.75rem, min(0.9375rem, calc(var(--k) * 0.46)));
  line-height: 1;
  box-shadow: inset 0 -2px 0 var(--wc, transparent);
  cursor: default;
  scroll-margin-block: var(--s-8); 
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
@container (min-width: 600px) {
  .studio-run,
  .studio-key {
    --k: min(2.25rem, calc((100cqi - 88px) / 20));
  }
}
.studio-key.is-on {
  border-color: var(--onyx-ink-2);
  background: var(--onyx-4);
}
.studio-key--bad {
  width: auto;
  min-width: var(--k);
  padding: 0 var(--s-2);
  border-style: dashed;
  border-color: var(--bad-onyx);
  background: color-mix(in srgb, var(--bad-onyx) 8%, transparent);
  color: var(--bad-onyx);
  box-shadow: none;
}
.studio-key--bad[data-range] {
  cursor: pointer;
}
.studio-block > *,
.studio-pair > * {
  min-width: 0;
}
.studio-chart {
  position: relative;
  height: 13.5rem;
  border-radius: 10px;
  cursor: crosshair;
  touch-action: pan-y;
}
.studio-chart--charge {
  height: auto;
  aspect-ratio: 1;
  max-height: 24rem;
}
@container inst (max-width: 579.98px) {
  .studio-chart--charge {
    height: 13.5rem;
    aspect-ratio: auto;
    max-height: none;
  }
}
.studio-chart:focus-visible,
.studio-wheel:focus-visible {
  outline: 2px solid var(--accent-onyx);
  outline-offset: 4px;
}
.studio-chart__empty,
.studio-chart__nojs {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--s-4);
  color: var(--onyx-ink-3) !important;
  font-size: 0.875rem;
  text-align: center;
}
.studio-chart__nojs {
  display: none;
}
@media (scripting: none) {
  .studio-chart__nojs {
    display: grid;
    border: 1px dashed var(--onyx-line-2);
    border-radius: 10px;
  }
}
.studio-svg {
  display: block;
  max-width: 100%;
  overflow: visible;
}
.studio-svg__grid {
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 1;
}
.studio-svg__axis {
  stroke: rgba(255, 255, 255, 0.45);
  stroke-width: 1;
}
.studio-svg__ref {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.studio-svg__ref-label {
  fill: var(--onyx-ink-3);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  paint-order: stroke;
  stroke: var(--onyx);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.studio-svg__tick {
  fill: var(--onyx-ink-3);
  font-family: var(--mono);
  font-size: var(--t-2xs);
}
.studio-svg__res {
  fill: var(--onyx-ink-3);
  font-family: var(--mono);
  font-size: var(--t-2xs);
}
.studio-svg__label {
  fill: var(--onyx-ink);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  paint-order: stroke;
  stroke: var(--onyx);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.studio-svg__band {
  fill: rgba(255, 255, 255, 0.09);
}
.studio-svg__cross {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.studio-svg__cursor {
  fill: var(--onyx);
  stroke: #ffffff;
  stroke-width: 1.5;
}
.studio-hydro__bar.is-up {
  fill: var(--wc-hydrophobic);
}
.studio-hydro__bar.is-down {
  fill: var(--onyx-ink-3);
}
.studio-hydro__mean {
  fill: none;
  stroke: var(--onyx-ink);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.studio-hydro__area.is-up {
  fill: var(--wc-hydrophobic);
  fill-opacity: 0.8;
}
.studio-hydro__area.is-down {
  fill: var(--onyx-ink-3);
  fill-opacity: 0.35;
}
.studio-block__meta.is-profile .studio-hydro__per {
  display: none;
}
.studio-charge__curve {
  fill: none;
  stroke: var(--accent-onyx);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.studio-charge__pi {
  fill: var(--onyx-ink);
  stroke: var(--onyx);
  stroke-width: 2;
}
.studio-pair {
  display: grid;
  column-gap: var(--s-7);
}
@container (min-width: 580px) {
  .studio-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.studio-wheel {
  position: relative;
  width: min(100%, 24rem);
  aspect-ratio: 1;
  margin-inline: auto;
  border-radius: 12px;
  touch-action: pan-y;
}
.studio-wheel__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.studio-wheel__guides circle {
  fill: none;
  stroke: var(--onyx-line-2);
  stroke-width: 1;
}
.studio-wheel__chain {
  fill: none;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
  stroke-linejoin: round;
  transition: opacity 240ms var(--ease);
}
.studio-wheel__chain.is-hidden {
  opacity: 0;
  transition: none;
}
.studio-wheel__arrow line {
  stroke: var(--onyx-ink);
  stroke-width: 2;
  stroke-linecap: round;
}
.studio-wheel__arrow path {
  fill: var(--onyx-ink);
}
.studio-wheel__arrow .studio-wheel__halo {
  stroke: var(--onyx);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.studio-wheel__arrow path.studio-wheel__halo {
  fill: var(--onyx);
  stroke-width: 4;
}
.studio-wheel__mu {
  fill: var(--onyx-ink);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 500;
  paint-order: stroke;
  stroke: var(--onyx);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.studio-wheel__hub {
  fill: var(--onyx-ink-3);
}
.studio-wheel__bead {
  transition: transform 320ms var(--ease-out);
}
.studio-wheel__bead circle {
  fill: color-mix(in srgb, var(--wc) 15%, var(--onyx-2));
  stroke: var(--wc);
  stroke-width: 1.5;
  transition: fill var(--fast) var(--ease), opacity var(--mid) var(--ease);
}
.studio-wheel__bead text {
  fill: var(--wc);
  font-family: var(--mono);
  font-weight: 500;
  pointer-events: none;
}
.studio-wheel__bead.is-on circle {
  fill: color-mix(in srgb, var(--wc) 32%, var(--onyx-2));
}
.studio-wheel__ring {
  fill: none;
  stroke: var(--onyx-ink);
  stroke-width: 1.5;
  pointer-events: none;
}
.studio-wheel__n {
  fill: var(--onyx-ink-3);
  font-family: var(--mono);
  font-size: var(--t-2xs);
  font-weight: 500;
}
@media (prefers-reduced-motion: reduce) {
  .studio-wheel__bead,
  .studio-wheel__bead circle,
  .studio-wheel__chain,
  .studio-inst :is(.studio-big__v, .studio-v, .studio-ion__mz, .studio-comp__bar, .studio-comp__n, .studio-hydro__bars, .studio-hydro__mean, .studio-charge__curve, .studio-charge__pi, .studio-svg__label, .studio-wheel__arrow),
  .studio-sum [data-sum-v] {
    transition: none;
  }
}
.studio-tables {
  display: grid;
  gap: var(--s-2);
  min-width: 0;
  margin-top: var(--s-6);
  padding-top: var(--s-6);
  border-top: 1px solid var(--onyx-line);
}
.studio-dt {
  min-width: 0;
  border: 1px solid var(--onyx-line-2);
  border-radius: 12px;
  background: var(--onyx-2);
}
.studio-dt summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  padding: 0 var(--s-4);
  border-radius: 11px;
  color: var(--onyx-ink);
  font-size: 0.875rem;
  font-weight: 560;
  list-style: none;
  cursor: pointer;
  transition: background var(--fast) var(--ease);
}
.studio-dt summary::-webkit-details-marker {
  display: none;
}
.studio-dt summary:hover {
  background: var(--onyx-3);
}
.studio-dt summary::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background:
    linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
  color: var(--onyx-ink-2);
}
.studio-dt[open] summary::before {
  background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat;
}
.studio-dt__count {
  margin-left: auto;
  color: var(--onyx-ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
}
.studio-dt__body {
  border-top: 1px solid var(--onyx-line);
}
.studio-dt__scroll {
  max-height: 22rem;
  overflow: auto;
}
.studio-dt__scroll.is-long {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 22rem;
}
.studio-dt__scroll.is-overflow:not(.is-end) {
  mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent);
}
@media (pointer: coarse) {
  .studio-dt__scroll {
    max-height: none;
  }
}
.studio-dt__foot {
  padding: var(--s-1) var(--s-4);
  border-top: 1px solid var(--onyx-line);
}
.studio-dt__note,
.studio-dt__empty {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--onyx-line);
  color: var(--onyx-ink-2);
  font-size: var(--t-s);
}
.studio-dt table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-xs);
}
.studio-dt th,
.studio-dt td {
  padding: 0.5rem var(--s-4);
  border-bottom: 1px solid var(--onyx-line);
  color: var(--onyx-ink-2);
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}
.studio-dt td,
.studio-dt tbody th {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.studio-dt tbody th {
  color: var(--onyx-ink);
}
.studio-dt thead th {
  position: sticky;
  top: 0;
  background: var(--onyx-3);
  color: var(--onyx-ink-3);
  font-size: 0.75rem;
  font-weight: 500;
}
.studio-dt tr:last-child > * {
  border-bottom: 0;
}
.studio-dt__short,
.studio-dt__ndmark {
  display: none;
}
.studio-dt abbr {
  text-decoration: none;
  cursor: help;
}
@container (max-width: 599.98px) {
  .studio-dt__long {
    display: none;
  }
  .studio-dt__short {
    display: inline;
  }
  .studio-dt table {
    font-size: 0.75rem;
  }
  .studio-dt th,
  .studio-dt td {
    padding-inline: var(--s-2);
  }
  .studio-dt th:first-child,
  .studio-dt td:first-child {
    padding-left: var(--s-3);
  }
  .studio-dt td:nth-child(3) {
    font-family: var(--font);
    font-variant-numeric: normal;
  }
  .studio-dt__nd {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .studio-dt__ndmark {
    display: inline;
    color: var(--onyx-ink-3);
  }
}
.studio-dt__cls {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
}
@container (max-width: 339.98px) {
  .studio-dt__clsname {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .studio-dt th,
  .studio-dt td {
    padding-inline: var(--s-1);
  }
  .studio-dt th:first-child,
  .studio-dt td:first-child {
    padding-left: var(--s-2);
  }
}
.calc {
  display: grid;
  gap: clamp(3.5rem, 7vw, 6rem);
}
.calc-dev {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-s);
}
@media (min-width: 960px) {
  .calc-dev--main {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}
@media (min-width: 960px) and (max-width: 1179.98px) {
  .calc-dev--main {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  }
}
.calc-dev--stack {
  grid-template-rows: 1fr auto;
}
@media (max-width: 599.98px) {
  .calc-dev--stack .tool-card__title {
    max-width: 13em;
  }
}
.calc-dev__in {
  container: calcin / inline-size;
  display: grid;
  gap: var(--s-5);
  align-content: start;
  min-width: 0;
  padding: clamp(1.25rem, 3.2vw, 2.25rem);
}
.calc-dev__head {
  display: grid;
  gap: var(--s-2);
}
.calc-dev__sub {
  max-width: 34rem;
  color: var(--ink-3);
  font-size: 0.9375rem;
  line-height: 1.5;
}
@media (min-width: 960px) {
  @container calcin (max-width: 375.98px) {
    .calc-dev--stack .calc-dev__sub {
      min-height: 3em;
    }
  }
}
@media (min-width: 421px) and (max-width: 425.98px) {
  .calc-dev--main .calc-dev__sub {
    max-width: calc(100% - 8px);
  }
}
.calc-dev__out {
  position: relative;
  container: calcout / inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
  padding: clamp(1.25rem, 3.2vw, 2.25rem);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 18rem), var(--onyx);
}
.calc-dev--stack .calc-dev__out {
  gap: var(--s-4);
}
.calc-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.calc-step {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--s-3);
  padding: var(--s-5) 0 var(--s-4);
  border-bottom: 1px solid var(--line);
}
.calc-step:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.calc-step__n {
  padding-top: var(--s-1);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
}
@media (max-width: 359.98px) {
  .calc-step {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-2);
  }
  .calc-step__n {
    padding-top: 0;
    line-height: 1rem;
  }
}
.calc-step__body {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}
@container (min-width: 456px) {
  .calc-step__body--pair {
    grid-template-columns: minmax(13.75rem, 1fr) minmax(11rem, 1fr);
  }
}
.calc-field {
  container-type: inline-size;
  display: grid;
  gap: var(--s-2);
  align-content: start;
  min-width: 0;
}
.calc-label {
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 560;
  letter-spacing: -0.005em;
}
.calc-select {
  font-size: 1rem;
}
@media (scripting: none) {
  .calc :is(.calc-qty, .calc-select) {
    border-color: var(--line-2);
    background-color: var(--surface-2);
  }
  .calc .calc-qty:hover,
  .calc .calc-select:hover {
    border-color: var(--line-2);
  }
  .calc :is(.calc-qty__input, .calc-select):disabled {
    color: var(--ink-3);
    cursor: not-allowed;
  }
  .calc .calc-seg__input:disabled + .calc-seg__opt {
    cursor: not-allowed;
  }
  .calc .calc-seg__input:disabled:not(:checked) + .calc-seg__opt:hover {
    background: none;
    color: var(--ink-3);
  }
}
.calc-qty {
  display: flex;
  align-items: stretch;
  min-width: 0;
  height: 3rem;
  border: 1px solid var(--field-rule);
  border-radius: 12px;
  background: var(--surface);
  transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.calc-qty:hover {
  border-color: var(--ink-3);
}
.calc-qty:has(.calc-qty__input:focus) {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(8, 117, 112, 0.16);
}
.calc-field.is-bad .calc-qty {
  border-color: var(--bad);
}
.calc-field.is-bad .calc-qty:has(.calc-qty__input:focus) {
  box-shadow: 0 0 0 4px rgba(192, 40, 27, 0.14);
}
.calc-qty:has(.calc-qty__input:focus-visible) {
  box-shadow: var(--focus-ring);
}
.calc-field.is-bad .calc-qty:has(.calc-qty__input:focus-visible) {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--bad);
}
.calc-qty__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-variant-numeric: tabular-nums;
}
.calc-qty__input:focus {
  outline: none;
}
.calc-qty__unit {
  flex: none;
  align-self: center;
  padding: 0 var(--s-4) 0 var(--s-1);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.875rem;
}
.calc-msg {
  min-height: 1.25rem;
  color: var(--ink-3);
  font-size: var(--t-s);
  line-height: 1.25rem;
}
@container (max-width: 255.98px) {
  .calc-msg {
    min-height: 2.5rem;
  }
}
.calc-field.is-bad .calc-msg {
  color: var(--bad);
  font-weight: 540;
}
.calc-field.is-note .calc-msg {
  color: var(--warn);
  font-weight: 540;
}
@container calcin (min-width: 456px) {
  .calc-step__body--pair .calc-msg {
    min-height: 1.25rem;
  }
}
.calc-field--pick,
.calc-pick__msg {
  grid-template-columns: minmax(0, 1fr); 
}
.calc-pick__msg {
  display: grid;
  min-height: 1.25rem;
}
.calc-pick__long {
  display: none;
}
.calc-standing {
  line-height: 1.25rem;
}
@container calcin (max-width: 455.98px) {
  @container (max-width: 329.98px) {
    .calc-pick__msg {
      min-height: 2.5rem;
    }
    .calc-pick__long {
      display: inline;
    }
    .calc-pick__short {
      display: none;
    }
  }
}
@container calcin (min-width: 456px) {
  .calc-step__body--pair .calc-standing {
    width: max-content;
  }
  .calc-step__body--pair.has-standing #calc-mw-msg {
    visibility: hidden;
  }
}
.calc-seg {
  flex: none;
  align-self: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.calc-seg__track {
  position: relative;
  display: inline-flex;
  gap: var(--s-1);
  margin-right: var(--s-1);
  padding: var(--s-1);
  border-radius: var(--r-s);
  background: var(--paper-2);
}
.calc-seg__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.calc-seg__opt {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 2.75rem;
  height: 2.125rem;
  padding: 0 0.5rem;
  border-radius: var(--r-xs);
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: var(--t-xs);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.calc-seg__opt::after {
  content: "";
  position: absolute;
  inset: -5px 0;
}
.calc-seg__input:not(:checked) + .calc-seg__opt:hover {
  background: rgba(255, 255, 255, 0.65);
  color: var(--ink);
}
.calc-seg__input:checked + .calc-seg__opt {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(11, 11, 12, 0.1);
}
.calc-seg__input:focus-visible + .calc-seg__opt {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.calc-seg--bar {
  display: grid;
  gap: var(--s-2);
}
.calc-seg--bar legend {
  float: left;
  width: 100%;
  margin-bottom: var(--s-2);
  padding: 0;
}
.calc-seg--bar .calc-seg__track {
  display: flex;
  clear: both;
  width: 100%;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.calc-seg--bar .calc-seg__opt {
  flex: 1 1 0;
  min-width: 0;
  height: 2.5rem;
  padding: 0 var(--s-1);
  border-radius: 8px;
}
.calc-seg--bar .calc-seg__opt::after {
  inset: -3px 0;
}
.calc-pair {
  display: grid;
  gap: var(--s-4);
}
@container (min-width: 360px) {
  .calc-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.calc-pair .calc-msg {
  min-height: 1.25rem;
}
.calc-echo {
  display: flex;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: var(--t-s);
  line-height: 1.25rem;
}
.calc-echo .mono {
  color: var(--ink-2);
  font-size: var(--t-xs);
  line-height: 1;
}
@container (max-width: 503.98px) {
  [data-mw-echo] {
    min-height: calc(2 * 1.25rem + 2 * var(--s-3) + 2px);
  }
}
@container (max-width: 311.98px) {
  [data-mw-echo] {
    min-height: calc(3 * 1.25rem + 2 * var(--s-3) + 2px);
  }
}
@media (min-width: 960px) {
  .calc-echo {
    min-height: calc(2 * 1.25rem + 2 * var(--s-3) + 2px);
  }
}
.calc-out__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.calc-block {
  position: relative;
  display: grid;
  gap: var(--s-5);
  min-width: 0;
}
.calc-block + .calc-block {
  padding-top: var(--s-5);
  border-top: 1px solid var(--onyx-line);
}
.calc-block.is-waiting > :not(.calc-wait) {
  visibility: hidden;
}
.calc-wait {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  margin: 0;
  padding: var(--s-4);
  border: 1px dashed var(--onyx-line-2);
  border-radius: var(--r);
  color: var(--onyx-ink-2) !important;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
}
.calc-block + .calc-block .calc-wait {
  top: var(--s-5);
}
.calc-hero {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
}
.calc-k {
  color: var(--onyx-ink-3) !important;
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.calc-k .mono,
.calc-kv .mono {
  line-height: 1;
}
.calc-big {
  color: var(--onyx-ink) !important;
  font-size: min(clamp(2.5rem, 1.8rem + 2.6vw, 4rem), 18.5cqi);
  font-stretch: var(--wide);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.05;
  white-space: nowrap;
}
.calc-big--sub {
  font-size: clamp(2rem, 1.55rem + 1.7vw, 2.875rem);
}
.calc-big__u {
  color: var(--onyx-ink-2);
  font-family: var(--mono);
  font-size: 1rem;
  font-stretch: 100%;
  font-weight: 500;
  letter-spacing: 0;
}
.calc-big sup {
  font-size: 0.45em;
  letter-spacing: 0;
  line-height: 0;
  vertical-align: 0.9em;
}
.calc-big.is-sci .calc-big__v {
  font-size: 0.7em;
  letter-spacing: -0.01em;
}
.calc-aside {
  min-height: 1.25rem;
  color: var(--onyx-ink-2) !important;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.calc-words {
  font-family: var(--font);
  line-height: 1;
  letter-spacing: 0;
}
.calc-aside--two {
  min-height: 2.5rem;
}
.calc-aside__at {
  display: block;
}
@media (max-width: 599.98px) {
  .calc-aside {
    min-height: 2.5rem;
  }
}
@media (min-width: 960px) and (max-width: 1179.98px) {
  .calc-dev--main .calc-aside {
    min-height: 2.5rem;
  }
}
.calc-aside.is-warn,
.calc-big.is-warn,
.calc-kv dd.is-warn {
  color: var(--warn-onyx) !important;
}
.calc-big.is-warn .calc-big__u {
  color: var(--warn-onyx);
}
.calc-kv {
  display: grid;
  margin: 0;
  border-top: 1px solid var(--onyx-line);
}
.calc-kv > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--onyx-line);
}
.calc-kv > div:last-child {
  border-bottom: 0;
}
.calc-kv dt {
  color: var(--onyx-ink-3);
  font-size: 0.875rem;
  line-height: 1.5rem;
}
.calc-kv dd {
  margin: 0;
  color: var(--onyx-ink);
  font-family: var(--mono);
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.calc-kv dd.is-muted {
  color: var(--onyx-ink-3);
  font-family: var(--font);
  font-size: 0.875rem;
}
.calc-kv sup {
  font-size: 0.72em;
  line-height: 0;
}
.calc-dev__out :is(sup, sub),
.studio-inst :is(sup, sub),
.tool-method :is(sup, sub),
.tool-card__title sub {
  line-height: 0;
}
.calc-check {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: flex-start;
  gap: var(--s-3);
  min-height: 2.75rem;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-s);
  background: var(--onyx-3);
  color: var(--onyx-ink-2) !important;
  font-family: var(--mono);
  font-size: var(--t-xs);
  line-height: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.calc-check__text {
  flex: 1 1 0;
  min-width: 0;
}
.calc-check__res {
  white-space: nowrap;
}
.calc-check.is-off {
  visibility: hidden;
}
.calc-check__icon {
  display: grid;
  flex: none;
  height: 1.25rem;
  place-items: center;
  color: var(--pass-onyx);
}
.calc-check.is-warn {
  color: var(--warn-onyx) !important;
}
.calc-check.is-warn .calc-check__icon {
  color: var(--warn-onyx);
}
.calc-check__icon svg {
  width: 1rem;
  height: 1rem;
}
@media (max-width: 599.98px) {
  .calc-check {
    min-height: 4rem;
  }
}
@media (max-width: 599.98px), (min-width: 960px) and (max-width: 1279.98px) {
  .calc-check__eq {
    display: block;
  }
  [data-r="d-check"] {
    min-height: 4rem;
  }
}
.calc-note {
  max-width: 38rem;
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--onyx-line);
  color: var(--onyx-ink-3) !important;
  font-size: var(--t-s);
  line-height: 1.55;
}
@container calcout (min-width: 356px) and (max-width: 367.98px) {
  .calc-note {
    min-height: calc(var(--s-4) + 1px + var(--t-s) * 1.55 * 4);
  }
}
.calc-mix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: var(--s-5);
}
.calc-mix .calc-hero {
  container-type: inline-size;
}
.calc-mix .calc-big--sub {
  font-size: min(clamp(2rem, 1.55rem + 1.7vw, 2.875rem), 21cqi);
}
.calc-mix .calc-hero + .calc-hero .calc-k::before {
  content: "+ ";
  font-family: var(--mono);
  line-height: 1;
}
@container calcout (max-width: 359.98px) {
  .calc-mix {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-4);
  }
  .calc-mix .calc-big--sub {
    font-size: clamp(2rem, 1.55rem + 1.7vw, 2.875rem);
  }
}
.calc-more__head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.tool-section-title {
  max-width: 22ch;
  font-size: var(--t-2xl);
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.calc-more__grid {
  display: grid;
  gap: var(--s-6);
}
@media (min-width: 960px) {
  .calc-more__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto auto;
    row-gap: 0;
  }
  .calc-dev--stack {
    grid-row: span 2;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
}
.calc-notes {
  gap: var(--s-6);
}
.calc-notes__head {
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 760px) {
  .calc-notes .tool-method {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-7);
  }
}
@media (min-width: 1180px) {
  .calc-notes .tool-method {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.calc-notes .tool-next {
  max-width: 40rem;
}