/* Settings (settings.854d0793.js, settings-billing.bdeb2397.js): a modal over the spot, its sections listed on the
   sidebar's ground on the left and the open one on the right. Drawn at the sidebar's on-screen scale (--k) in its --ref
   sizes, as its other dialog is (groups.bdeb2397.css .sb-dialog, whose buttons it uses). Tokens only: --r-surf on the
   dialog, --r-ctl on everything in it, switches and the meter round. The only red is a cancellation's. */
.st { box-sizing: border-box; width: calc(860px * var(--ref)); height: calc(640px * var(--ref)); max-width: none; max-height: none; padding: 0; border: var(--hair) solid var(--sel); border-radius: var(--r-surf); overflow: hidden; background: var(--surface); box-shadow: var(--lift); color: var(--ink); font: var(--fs-body)/1.45 var(--ui); -webkit-font-smoothing: antialiased; transform: scale(var(--k, 1)); }
.st *, .st *::before { box-sizing: border-box; }
.st[open] { animation: sb-dialog-in var(--d-hover) var(--ease-std); }
.st::backdrop { background: var(--scrim); }
.st-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.st-shell { position: relative; display: flex; height: 100%; }

/* ---------- the sections ---------- */
.st-nav { flex: none; display: flex; flex-direction: column; gap: calc(2px * var(--ref)); width: calc(172px * var(--ref)); padding: calc(14px * var(--ref)) calc(8px * var(--ref)); background: var(--ground); box-shadow: inset calc(-1 * var(--hair)) 0 0 var(--sel); }
.st-h { margin: 0 0 calc(10px * var(--ref)); padding: 0 calc(8px * var(--ref)); font: 600 calc(15px * var(--ref))/1.2 var(--ui); }
.st-tab { display: flex; align-items: center; gap: calc(10px * var(--ref)); width: 100%; height: var(--row); padding: 0 calc(8px * var(--ref)); border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--ink); font: var(--fs-body)/1 var(--ui); text-align: left; cursor: pointer; transition: background-color var(--d-hover) ease-out; }
.st-tab:hover { background: var(--hover); }
.st-tab[aria-current="page"] { background: var(--sel); font-weight: 500; }
.st-pane { flex: 1; min-width: 0; overflow-x: hidden; overflow-y: auto; padding: calc(16px * var(--ref)) calc(20px * var(--ref)) calc(20px * var(--ref)); }
/* the close button stays put while the pane scrolls under it */
.st-close { position: absolute; top: calc(10px * var(--ref)); right: calc(10px * var(--ref)); color: var(--muted); }
.st-close:hover { color: var(--ink); }
.st-sec[hidden] { display: none; }
.st button:focus-visible, .st select:focus-visible { outline: var(--focus) solid var(--ink); outline-offset: var(--focus); }

/* ---------- type and rows ---------- */
.st-title { margin: 0 0 calc(12px * var(--ref)); padding-right: calc(32px * var(--ref)); font: 600 calc(15px * var(--ref))/1.2 var(--ui); }
.st-label { margin: 0; font: 500 var(--fs-body)/1.3 var(--ui); color: var(--ink); }
.st-hint { margin: 0; font: var(--fs-meta)/var(--lh-meta) var(--ui); color: var(--muted); }
.st-lead { margin-bottom: calc(6px * var(--ref)); }
.st-grow { flex: 1; min-width: 0; }
.st-status { min-height: var(--lh-meta); margin: calc(10px * var(--ref)) 0 0; font: var(--fs-meta)/var(--lh-meta) var(--ui); color: var(--muted); }
.st-error { margin: 0; font: var(--fs-meta)/var(--lh-meta) var(--ui); color: var(--danger); }
.st-setting { display: flex; align-items: center; gap: calc(12px * var(--ref)); padding: calc(10px * var(--ref)) 0; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--sel); }
.st-ic { flex: none; width: calc(20px * var(--ref)); height: calc(20px * var(--ref)); object-fit: contain; }
.st-actions { display: flex; justify-content: flex-end; gap: calc(8px * var(--ref)); }
.st .sb-btn-ghost, .st .sb-btn-primary { display: inline-flex; align-items: center; gap: calc(6px * var(--ref)); flex: none; }
.st .sb-btn-ghost:disabled, .st .sb-btn-primary:disabled { opacity: .45; cursor: default; }
.st .sb-btn-ghost:disabled:hover { background: transparent; }
.st .sb-btn-primary:disabled:hover { background: var(--ink); }
.st-link { padding: 0; border: 0; background: transparent; font: var(--fs-meta)/1 var(--ui); color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* a switch: ink and the knob right when on */
.st-switch-btn { position: relative; flex: none; width: calc(30px * var(--ref)); height: calc(18px * var(--ref)); padding: 0; border: 0; border-radius: 9999px; background: var(--sel); cursor: pointer; transition: background-color var(--d-hover) ease-out; }
.st-switch-btn i { position: absolute; top: calc(2px * var(--ref)); left: calc(2px * var(--ref)); width: calc(14px * var(--ref)); height: calc(14px * var(--ref)); border-radius: 9999px; background: var(--surface); box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 22%, transparent); transition: transform var(--d-hover) var(--ease-std); }
.st-switch-btn[aria-checked="true"] { background: var(--ink); }
.st-switch-btn[aria-checked="true"] i { transform: translateX(calc(12px * var(--ref))); }

/* ---------- Profile ---------- */
.st-profile { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12px * var(--ref)); }
.st-photo { grid-column: 1 / -1; display: flex; align-items: center; gap: calc(14px * var(--ref)); }
.st-avatar { flex: none; width: calc(56px * var(--ref)); height: calc(56px * var(--ref)); border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 var(--hair) var(--sel); }
.st-photo-acts { display: flex; align-items: center; gap: calc(12px * var(--ref)); margin-bottom: calc(6px * var(--ref)); }
.st-field { display: flex; flex-direction: column; gap: calc(6px * var(--ref)); font: var(--fs-meta)/1 var(--ui); color: var(--muted); }
.st-field input, .st-field select { width: 100%; height: calc(32px * var(--ref)); padding: 0 calc(10px * var(--ref)); border: 0; border-radius: var(--r-ctl); background: var(--surface); box-shadow: 0 0 0 var(--hair) var(--sel); outline: 0; font: var(--fs-body)/1 var(--ui); color: var(--ink); }
.st-field input:focus-visible, .st-field select:focus-visible { box-shadow: 0 0 0 var(--focus) var(--ink); outline: 0; }
.st-field input::placeholder { color: var(--muted); }
/* a list picks with lucide's chevron-down in the muted ink, where the system's arrow would be */
.st-field select { appearance: none; padding-right: calc(30px * var(--ref)); background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right calc(10px * var(--ref)) center / calc(14px * var(--ref)); cursor: pointer; }
.st-wide { grid-column: 1 / -1; }
/* Save reads Saved for a beat once a save lands (settings.854d0793.js): the two labels share one cell, so the button
   keeps its width as one rises out and the other in, and it stays at full ink while it says Saved */
.st .st-save { position: relative; transition: background-color var(--d-hover) ease-out, opacity var(--d-hover) ease-out; }
.st .st-save.is-saved:disabled { opacity: 1; }
.st-save-l { display: grid; }
.st-save-l > span { grid-area: 1 / 1; text-align: center; transition: opacity var(--d-hover) ease-out, transform var(--d-hover) var(--ease-std); }
.st-save-l > span + span, .st-save.is-saved .st-save-l > span:first-child { opacity: 0; transform: translateY(calc(5px * var(--ref))); }
.st-save.is-saved .st-save-l > span:first-child { transform: translateY(calc(-5px * var(--ref))); }
.st-save.is-saved .st-save-l > span + span { opacity: 1; transform: none; }
/* its confetti: the Activity tab's bits (style.af4c3c6b.css .ac-bit), drawn a size up for a button, from its top edge */
.st-fx { position: absolute; inset: 0; pointer-events: none; }
.st-bit { position: absolute; top: 0; width: calc(3px * var(--ref)); height: calc(5.6px * var(--ref)); margin-left: calc(-1.5px * var(--ref)); border-radius: calc(.8px * var(--ref)); opacity: 0; }
.st-dot { width: calc(4px * var(--ref)); height: calc(4px * var(--ref)); margin-left: calc(-2px * var(--ref)); border-radius: 50%; }
/* the photo's editor (photo-crop.9e39bc12.js), as Discord's Edit Image: the photo in a well with a white-ringed circle
   over it and the rest dimmed, the zoom slider centred between a small and a large picture, the quarter turn at the end
   of its row. It is a .st-modal (below), a size wider for the well */
.st-modal.st-crop { width: calc(440px * var(--ref)); }
.st-crop-stage { position: relative; height: calc(296px * var(--ref)); overflow: hidden; border-radius: var(--r-ctl); background: var(--ground); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.st-crop-stage.is-dragging { cursor: grabbing; }
.st-crop-stage:focus-visible { outline: var(--focus) solid var(--ink); outline-offset: var(--focus); }
.st-crop-img { position: absolute; top: 50%; left: 50%; max-width: none; pointer-events: none; }
.st-crop-ring { position: absolute; top: 50%; left: 50%; width: calc(240px * var(--ref)); height: calc(240px * var(--ref)); margin: calc(-120px * var(--ref)) 0 0 calc(-120px * var(--ref)); border-radius: 9999px; box-shadow: 0 0 0 calc(4px * var(--ref)) var(--surface), 0 0 0 calc(400px * var(--ref)) color-mix(in srgb, var(--ink) 40%, transparent); pointer-events: none; }
.st-crop-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.st-crop-slide { grid-column: 2; display: flex; align-items: center; gap: calc(8px * var(--ref)); color: var(--muted); }
.st-crop-small { width: calc(12px * var(--ref)); height: calc(12px * var(--ref)); }
.st-crop-big { width: calc(20px * var(--ref)); height: calc(20px * var(--ref)); }
.st-crop-zoom { width: calc(192px * var(--ref)); margin: 0; accent-color: var(--ink); cursor: pointer; }
.st-crop-zoom:focus-visible { outline: var(--focus) solid var(--ink); outline-offset: var(--focus); }
.st-crop-turn { justify-self: end; color: var(--muted); }
.st-crop-turn:hover { color: var(--ink); }

/* ---------- Billing ---------- */
/* the credits left as the sidebar's credits row shows them (chat-ui.854d0793.css .sb-credits): the coin and the figure
   alone, in its weight, a size up, with what buys more at the end of the same line, in a hairline outline */
.st-balance { margin-bottom: calc(4px * var(--ref)); padding: calc(12px * var(--ref)); border-radius: var(--r-ctl); box-shadow: inset 0 0 0 var(--hair) var(--sel); }
.st-line { display: flex; align-items: center; gap: calc(8px * var(--ref)); }
.st-coin { display: block; flex: none; width: calc(24px * var(--ref)); height: calc(24px * var(--ref)); }
.st-balance .st-coin { width: calc(32px * var(--ref)); height: calc(32px * var(--ref)); }
.st-left { flex: 1; min-width: 0; margin: 0 0 0 calc(4px * var(--ref)); font: 500 calc(24px * var(--ref))/1 var(--ui); letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-reload-note { margin-top: calc(10px * var(--ref)); }
/* the card's form opens under its row on the sidebar's grey */
.st-form { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10px * var(--ref)); margin: calc(4px * var(--ref)) 0; padding: calc(12px * var(--ref)); border-radius: var(--r-ctl); background: var(--ground); }
.st-form[hidden], .st-error[hidden], .st-reload-note[hidden], .st-link[hidden] { display: none; }
/* the packs: one row each, the coin and the figure as the balance has them, the price and Buy at the end */
.st-packs-h { margin-top: calc(14px * var(--ref)); }
.st-packs { margin: 0; padding: 0; list-style: none; }
.st-pack { display: flex; align-items: center; gap: calc(12px * var(--ref)); padding: calc(8px * var(--ref)) 0; box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--sel); }
.st-pack-n { margin: 0; font: 500 calc(15px * var(--ref))/1.2 var(--ui); font-variant-numeric: tabular-nums; }
.st-price { flex: none; font: 500 var(--fs-body)/1 var(--ui); font-variant-numeric: tabular-nums; }
/* the rainbow coin (settings-billing.bdeb2397.js flowCoin): the silver coin, lifted a little so the colours over it
   stay light, with one rainbow multiplied over it, so it keeps the coin's rim and relief, and the same rainbow blurred
   behind it as its glow. The rainbow is the hue wheel in light, full colours (lifted toward white, never toward grey),
   a stop every 60deg (the sRGB blend between two of them is the wheel exactly, so no band dulls), with a wavelength of
   1.2 coin widths along the diagonal; it slides one way, top left to bottom right, a whole spectrum every 14s, the
   loop's last frame its first */
.st-flow { position: relative; isolation: isolate; }
.st-flow > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.st-flow-glow { border-radius: 50%; overflow: hidden; filter: blur(calc(2px * var(--ref))); opacity: 0.75; }
.st-flow-coin { filter: brightness(1.1); }
.st-flow-tint { overflow: hidden; mix-blend-mode: multiply; -webkit-mask: url(fx/coin-silver.0ecb8f7c.png) center / 100% 100% no-repeat; mask: url(fx/coin-silver.0ecb8f7c.png) center / 100% 100% no-repeat; }
/* the bands: three wavelengths over 3.6 coin widths, centred on the coin and turned 45deg round its middle, so one
   wavelength is a third of their width and the coin is covered all the way along */
.st-flow i { position: absolute; top: -50%; left: -130%; width: 360%; height: 200%; background: repeating-linear-gradient(90deg, hsl(0 100% 70%) 0, hsl(60 100% 70%) 5.5556%, hsl(120 100% 70%) 11.1111%, hsl(180 100% 70%) 16.6667%, hsl(240 100% 70%) 22.2222%, hsl(300 100% 70%) 27.7778%, hsl(360 100% 70%) 33.3333%); transform: rotate(45deg); animation: st-flow 14s linear infinite; /* deliberate */ /* a loop, not a transition */ }
@keyframes st-flow {
  from { transform: rotate(45deg) translateX(0); }
  to { transform: rotate(45deg) translateX(calc(100% / 3)); }
}
/* Buy credits and auto-reload: a modal over Settings at its scale, as the sidebar's other dialog is
   (groups.bdeb2397.css .sb-dialog), its title, description, dollar fields and fine print in one column */
.st-modal { box-sizing: border-box; width: calc(400px * var(--ref)); max-width: none; padding: calc(20px * var(--ref)); border: var(--hair) solid var(--sel); border-radius: var(--r-surf); background: var(--surface); box-shadow: var(--lift); color: var(--ink); font: var(--fs-body)/1.45 var(--ui); -webkit-font-smoothing: antialiased; transform: scale(var(--k, 1)); }
.st-modal[open] { animation: sb-dialog-in var(--d-hover) var(--ease-std); }
.st-modal::backdrop { background: var(--scrim); }
/* it takes focus itself on opening (no field selected), with no ring of its own */
.st-modal:focus { outline: none; }
.st-modal-form { display: flex; flex-direction: column; gap: calc(12px * var(--ref)); }
.st-modal-h { margin: 0; padding-right: calc(32px * var(--ref)); font: 600 calc(18px * var(--ref))/1.2 var(--ui); letter-spacing: -0.01em; }
.st-modal-d { margin: calc(-6px * var(--ref)) 0 calc(4px * var(--ref)); font-size: var(--fs-body); line-height: 1.45; }
.st-modal .st-field-l { font: 500 var(--fs-body)/1.3 var(--ui); color: var(--ink); }
.st-modal .st-actions { margin-top: calc(4px * var(--ref)); }
.st-modal .st-actions .st-link { margin-right: auto; }
/* a dollar field: $ before the amount and the credits it buys after it, in the field's own outline; a card's number
   and security code (.st-boxed) wear their brand badges and card icon the same way */
.st-money, .st-boxed { display: flex; align-items: center; gap: calc(6px * var(--ref)); height: calc(32px * var(--ref)); padding: 0 calc(10px * var(--ref)); border-radius: var(--r-ctl); background: var(--surface); box-shadow: 0 0 0 var(--hair) var(--sel); }
.st-money:focus-within, .st-boxed:focus-within { box-shadow: 0 0 0 var(--focus) var(--ink); }
.st-money i { font: var(--fs-body)/1 var(--ui); font-style: normal; color: var(--muted); }
.st-field .st-money input, .st-field .st-boxed input { flex: 1; min-width: 0; height: 100%; padding: 0; border-radius: 0; background: transparent; box-shadow: none; appearance: textfield; }
.st-money input::-webkit-inner-spin-button, .st-money input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.st-field .st-money input:focus-visible, .st-field .st-boxed input:focus-visible { box-shadow: none; }
.st-money small { flex: none; font: var(--fs-meta)/1 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }
/* Payment method (settings-pay.8a3994ee.js), as the Anthropic console has it: the heading and its line on the left,
   Edit billing address and Add payment method at the end of it, the billing address under them, then the methods */
.st-pay-head { display: flex; align-items: flex-start; gap: calc(12px * var(--ref)); margin-top: calc(16px * var(--ref)); }
.st-pay-head .st-hint { margin-top: calc(2px * var(--ref)); }
.st-pay-acts { display: flex; flex: none; gap: calc(8px * var(--ref)); }
.st-addr { margin-top: calc(12px * var(--ref)); }
.st-addr-lines { margin: calc(2px * var(--ref)) 0 0; font: var(--fs-body)/1.45 var(--ui); color: var(--ink); }
.st-addr-lines.is-none { color: var(--muted); }
.st-methods-h { margin-top: calc(12px * var(--ref)); font-weight: 400; }
.st-methods { margin: 0; padding: 0; list-style: none; }
.st-pay-ic { display: contents; }
.st-tag { margin-left: calc(8px * var(--ref)); padding: calc(2px * var(--ref)) calc(6px * var(--ref)); border-radius: var(--r-ctl); background: var(--ground); font: 500 var(--fs-meta)/1 var(--ui); color: var(--muted); vertical-align: calc(1px * var(--ref)); }
/* its modals, a size wider than Buy credits for the address's two columns */
.st-modal.st-modal-w { width: calc(460px * var(--ref)); }
.st-grid, .st-addr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12px * var(--ref)); }
/* Card or Google Pay: two tiles, the picked one ringed in ink */
.st-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12px * var(--ref)); }
.st-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: calc(8px * var(--ref)); padding: calc(10px * var(--ref)) calc(12px * var(--ref)); border-radius: var(--r-ctl); box-shadow: 0 0 0 var(--hair) var(--sel); font: 500 var(--fs-body)/1 var(--ui); color: var(--ink); cursor: pointer; transition: background-color var(--d-hover) ease-out; }
.st-tile:hover { background: var(--ground); }
.st-tile:has(:checked) { box-shadow: 0 0 0 var(--focus) var(--ink); }
.st-tile:has(:focus-visible) { outline: var(--focus) solid var(--ink); outline-offset: var(--focus); }
.st-tile-ic { width: calc(16px * var(--ref)); height: calc(16px * var(--ref)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.st-tile-gpay { height: calc(16px * var(--ref)); width: auto; padding: calc(2px * var(--ref)) calc(6px * var(--ref)); border-radius: 9999px; box-shadow: 0 0 0 var(--hair) var(--sel); box-sizing: content-box; }
/* the brand badges at the end of the card number, the card icon at the end of its code */
.st-brands { display: flex; flex: none; gap: calc(4px * var(--ref)); }
.st-brands img { display: block; width: calc(24px * var(--ref)); height: calc(16px * var(--ref)); }
.st-cvc-ic { flex: none; width: calc(18px * var(--ref)); height: calc(18px * var(--ref)); fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.st-check { display: flex; align-items: center; gap: calc(8px * var(--ref)); font: var(--fs-body)/1.3 var(--ui); color: var(--ink); cursor: pointer; }
.st-check input { flex: none; width: calc(16px * var(--ref)); height: calc(16px * var(--ref)); margin: 0; accent-color: var(--ink); cursor: pointer; }
.st-check input:focus-visible { outline: var(--focus) solid var(--ink); outline-offset: var(--focus); }
.st-gpay { display: flex; align-items: center; gap: calc(12px * var(--ref)); padding: calc(12px * var(--ref)); border-radius: var(--r-ctl); background: var(--ground); }
.st-gpay img { flex: none; height: calc(20px * var(--ref)); width: auto; }
.st-gpay .st-hint { font-size: var(--fs-body); line-height: 1.45; color: var(--ink); }
.st-grid[hidden], .st-gpay[hidden], .st-new-addr[hidden], .st-tag[hidden], .st-brands img[hidden], .st-update[hidden], .st-check[hidden] { display: none; }
.st-table { width: 100%; margin-top: calc(14px * var(--ref)); border-collapse: collapse; font: var(--fs-meta)/1.3 var(--ui); }
.st-table caption { margin-bottom: calc(6px * var(--ref)); text-align: left; }
.st-table th { padding: calc(6px * var(--ref)) calc(4px * var(--ref)); box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--sel); text-align: left; font-weight: 500; color: var(--muted); }
.st-table td { padding: calc(7px * var(--ref)) calc(4px * var(--ref)); box-shadow: inset 0 calc(-1 * var(--hair)) 0 var(--sel); }
.st-table .st-num { text-align: right; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .st[open], .st-modal[open] { animation: none; }
  .st-flow i { animation: none; }
  .st-tab, .st-switch-btn, .st-switch-btn i, .st .st-save, .st-save-l > span, .st-tile { transition: none; }
}