@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-cyrillic-ext.woff2") format("woff2"); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-greek-ext.woff2") format("woff2"); unicode-range: U+1F00-1FFF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-greek.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-vi.woff2") format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, Arial, sans-serif;
  --font-scale: 1;
  --msg-weight: 500;
  --fs-xs: .75rem;
  --fs-sm: .8125rem;
  --fs-base: .9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --tight: -.02em;
  --r-card: 18px;
  --r-ctl: 13px;
  --r-in: 11px;
  --r-row: 9px;
  --r-chip: 7px;
  --bar-h: 56px;
  --tab-h: 58px;
  --tap: 44px;
  --ctl: 44px;
  --seg: 40px;
  --side-w: 400px;
  --gut: 16px;
  --t-fast: 120ms;
  --t: 180ms;
  --t-slow: 220ms;
  --ease: cubic-bezier(.2, .6, .2, 1);
  --scrim: rgb(0 0 0 / .4);
  --bg: #f2f2f7;
  --card: #ffffff;
  --row: #f2f2f7;
  --track: #e5e5ea;
  --fld: #e5e5ea;
  --nav: #e6e6eb;
  --btn: #dcdce1;
  --btnh: #cacacf;
  --thumb: #ffffff;
  --cur: #ffffff;
  --sel: #e1e1e6;
  --t1: #000000;
  --t2: #515158;
  --t3: #65656a;
  --ink: #005cb8;
  --cta: #000000;
  --ctah: #2e2e30;
  --onc: #ffffff;
  --onw: #ffffff;
  --ok: #007634;
  --oks: #e0efe7;
  --warn: #8e5a03;
  --warns: #f1ebe1;
  --err: #c61f22;
  --errs: #f8e4e4;
  --knob: #ffffff;
  --aa: auto;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23515158' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.25 12 14.75 17.5 9.25'/%3E%3C/svg%3E");
  --m-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.5v.01'/%3E%3C/svg%3E");
  --m-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.75 2.75L16 9.5'/%3E%3C/svg%3E");
  --m-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.6 3.2 17a2 2 0 0 0 1.7 3h14.2a2 2 0 0 0 1.7-3L13.7 4.6a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.5v4M12 16.75v.01'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --scrim: rgb(0 0 0 / .6);
    --bg: #000000;
    --card: #1c1c1e;
    --row: #2c2c2e;
    --track: #3a3a3c;
    --fld: #3a3a3c;
    --nav: #121214;
    --btn: #48484a;
    --btnh: #575758;
    --thumb: #636366;
    --cur: #2c2c2e;
    --sel: #2c2c2e;
    --t1: #ffffff;
    --t2: #b7b7bf;
    --t3: #a4a4ab;
    --ink: #64a8ff;
    --cta: #ffffff;
    --ctah: #d9d9de;
    --onc: #000000;
    --onw: #000000;
    --ok: #44bb68;
    --oks: #23392b;
    --warn: #e2941f;
    --warns: #40321e;
    --err: #fe8074;
    --errs: #452e2d;
    --knob: #000000;
    --aa: antialiased;
    --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7b7bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.25 12 14.75 17.5 9.25'/%3E%3C/svg%3E");
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --scrim: rgb(0 0 0 / .6);
  --bg: #000000;
  --card: #1c1c1e;
  --row: #2c2c2e;
  --track: #3a3a3c;
  --fld: #3a3a3c;
  --nav: #121214;
  --btn: #48484a;
  --btnh: #575758;
  --thumb: #636366;
  --cur: #2c2c2e;
  --sel: #2c2c2e;
  --t1: #ffffff;
  --t2: #b7b7bf;
  --t3: #a4a4ab;
  --ink: #64a8ff;
  --cta: #ffffff;
  --ctah: #d9d9de;
  --onc: #000000;
  --onw: #000000;
  --ok: #44bb68;
  --oks: #23392b;
  --warn: #e2941f;
  --warns: #40321e;
  --err: #fe8074;
  --errs: #452e2d;
  --knob: #000000;
  --aa: antialiased;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b7b7bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.25 12 14.75 17.5 9.25'/%3E%3C/svg%3E");
}

:root[data-theme="light"] { color-scheme: light; }

@media (min-width: 80rem) and (pointer: fine) {
  :root { --ctl: 40px; --seg: 34px; }
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t-slow); animation-timing-function: var(--ease); }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: calc(100% * var(--font-scale));
  touch-action: manipulation;
  scroll-padding-block: calc(var(--bar-h) + 16px) calc(var(--tab-h) + 16px);
}

html:has(dialog[open]) { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--t1);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.5;
  overflow-wrap: break-word;
  -webkit-font-smoothing: var(--aa);
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, ol, dl, dd, dt, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { min-inline-size: 0; border: 0; }
h1, h2, h3 { font-weight: 700; line-height: 1.25; letter-spacing: var(--tight); text-wrap: balance; }
a { color: var(--ink); text-decoration: none; }
strong, b { font-weight: 600; }
img, svg { display: block; max-inline-size: 100%; }
button, input, select, textarea { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; }
button, select, summary, label { cursor: pointer; }
code { font: inherit; font-variant-numeric: tabular-nums; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[tabindex="-1"]:focus { outline: 0; }

.tx { padding-block-end: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); }
.tx-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.tx-icon { flex: none; inline-size: var(--i, 20px); block-size: var(--i, 20px); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tx-skip { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; z-index: 100; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--card); color: var(--t1); font-weight: 600; }
.tx-skip:not(:focus) { inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
.tx-n { display: inline-grid; flex: none; place-items: center; min-inline-size: 20px; block-size: 20px; padding-inline: 6px; border-radius: 999px; background: var(--warn); color: var(--onw); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.tx-n--ok { background: var(--ok); }
.tx-dot { display: inline-block; flex: none; inline-size: 7px; block-size: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--t3); vertical-align: 1px; }
.tx-dot.is-on { background: var(--ok); }
[data-ui="ping"] { display: inline-block; min-inline-size: 5em; font-variant-numeric: tabular-nums; }
.tx-top__title [data-ui="ping"] { min-inline-size: 4.6em; }

.tx-top { position: sticky; inset-block-start: 0; z-index: 30; display: flex; align-items: center; gap: 4px; block-size: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); padding-block-start: env(safe-area-inset-top, 0px); padding-inline: max(6px, env(safe-area-inset-left, 0px)) max(6px, env(safe-area-inset-right, 0px)); border-block-end: .5px solid var(--track); background: var(--nav); view-transition-name: bar; --chip: var(--cur); }
.tx-brand { display: flex; flex: none; align-items: center; gap: 10px; min-inline-size: 44px; block-size: 44px; padding-inline: 9px; border-radius: var(--r-in); color: var(--t1); font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--tight); white-space: nowrap; }
.tx-brand svg { flex: none; inline-size: 26px; block-size: 26px; }
.tx-brand b { display: none; font-weight: 700; }
.tx-brand__a { fill: var(--t1); }
.tx-brand__b { fill: none; stroke: var(--nav); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tx-top__title { display: grid; flex: 1 1 auto; min-inline-size: 0; padding-inline: 4px; line-height: 1.2; }
.tx-top__title b { overflow: hidden; font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--tight); text-overflow: ellipsis; white-space: nowrap; }
.tx-top__title small { overflow: hidden; color: var(--t2); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.tx-top__btn, .tx-me { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 6px; min-inline-size: 44px; block-size: 44px; padding-inline: 10px; border-radius: var(--r-in); color: var(--t1); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
.tx-top__btn .tx-n { position: absolute; inset-block-start: 2px; inset-inline-end: 0; }
.tx-top__btn.is-off { color: var(--t2); }
.tx-top__btn.is-live { color: var(--ok); }
.tx-me { display: none; }
.tx-nav { display: none; }

.tx-tabs { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 20; display: flex; padding: 6px max(4px, env(safe-area-inset-left, 0px)) max(6px, calc(env(safe-area-inset-bottom, 0px) * 0.58)) max(4px, env(safe-area-inset-right, 0px)); border-block-start: .5px solid var(--track); background: var(--nav); view-transition-name: tabs; }
.tx-tab { position: relative; display: grid; flex: 1 1 0; gap: 3px; place-items: center; align-content: center; min-inline-size: 44px; block-size: 48px; color: var(--t2); font-size: .6875rem; font-weight: 600; line-height: 1.15; }
.tx-tab .tx-icon { --i: 22px; }
.tx-tab[aria-current] { color: var(--t1); }
.tx-tab[aria-current] .tx-icon { stroke-width: 2.4; }

.tx-view { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; padding: 12px var(--gut) 24px; }
.tx-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.tx-head__title { font-size: var(--fs-xl); }
.tx-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--t2); font-size: var(--fs-sm); }
.tx-head__meta > * + *::before { content: "·"; margin-inline-end: 10px; color: var(--t3); }
.tx-lead { max-inline-size: 62ch; color: var(--t2); }
.tx-work, .tx-side, .tx-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-inline-size: 0; }

.tx-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; padding: 16px; border-radius: var(--r-card); background: var(--card); --chip: initial; }
.tx-card--tight { gap: 12px; }
.tx-card__head, .tx-row__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.tx-card__head > div:not(.tx-mark, .tx-actions, .tx-chips, .tx-tokens), .tx-row__head > div:not(.tx-mark, .tx-actions, .tx-chips, .tx-tokens) { display: grid; flex: 1 1 14rem; gap: 2px; min-inline-size: 0; }
.tx-card__head > .tx-mark, .tx-row__head > .tx-mark { flex: 1 1 14rem; min-inline-size: 0; }
.tx-mark > div:not([class]) { display: grid; flex: 1 1 auto; gap: 2px; min-inline-size: 0; }
.tx-card__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--tight); }
.tx-card__title > .tx-icon { color: var(--t2); }
.tx-card__title small { color: var(--t3); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; }
.tx-card__desc { color: var(--t2); font-size: var(--fs-sm); line-height: 1.45; }
.tx-card__desc b { color: var(--t1); }
.tx-mark { display: flex; align-items: center; gap: 12px; }
.tx-emblem { display: grid; flex: none; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--r-in); background: var(--row); color: var(--t1); font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.tx-emblem .tx-icon { --i: 22px; }

.tx-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.tx-list > * { border-radius: 6px; background: var(--card); --chip: initial; }
.tx-list > :first-child { border-start-start-radius: var(--r-card); border-start-end-radius: var(--r-card); }
.tx-list > :last-child { border-end-start-radius: var(--r-card); border-end-end-radius: var(--r-card); }
.tx-card .tx-list > *, .tx-grp .tx-list > *, .tx-set .tx-list > * { background: var(--row); }
.tx-card .tx-list > :first-child, .tx-grp .tx-list > :first-child, .tx-set .tx-list > :first-child { border-start-start-radius: var(--r-in); border-start-end-radius: var(--r-in); }
.tx-card .tx-list > :last-child, .tx-grp .tx-list > :last-child, .tx-set .tx-list > :last-child { border-end-start-radius: var(--r-in); border-end-end-radius: var(--r-in); }
.tx-list > p.tx-card__desc { padding: 10px 12px; }
.tx-row { display: flex; align-items: center; gap: 12px; inline-size: 100%; min-block-size: var(--tap); padding: 8px 12px; color: var(--t1); text-align: start; }
.tx-row > .tx-icon { color: var(--t2); }
.tx-row > .tx-icon:last-child { --i: 18px; color: var(--t3); }
.tx-row__main { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); gap: 2px; min-inline-size: 0; }
.tx-row__title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.tx-row__title small { margin-inline-start: 6px; color: var(--t2); font-size: var(--fs-sm); font-weight: 400; }
.tx-row__sub { color: var(--t2); font-size: var(--fs-sm); line-height: 1.35; overflow-wrap: anywhere; }
.tx-row__end { flex: none; max-inline-size: 45%; overflow: hidden; color: var(--t2); font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.tx-row--act { flex-wrap: wrap; }
.tx-row--act > .tx-actions { margin-inline-start: auto; }
.tx-row--act > .tx-switch { flex: 1 1 100%; }
.tx-row.is-off { color: var(--t2); }

.tx-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.tx-kv__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; min-inline-size: 0; padding: 8px 12px; border-radius: var(--r-row); background: var(--row); font-size: var(--fs-sm); }
.tx-kv__row > * { min-inline-size: 0; overflow-wrap: anywhere; }
.tx-kv__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--t2); }
.tx-kv__name .tx-icon { --i: 16px; align-self: center; }
.tx-kv__value { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; max-inline-size: 100%; font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; }
.tx-kv__value.is-muted { color: var(--t2); font-weight: 400; }

.tx-switch { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-block-size: var(--tap); }
.tx-switch__text { display: grid; gap: 2px; min-inline-size: 0; }
.tx-switch__label { font-weight: 600; }
.tx-switch__hint { color: var(--t2); font-size: var(--fs-sm); line-height: 1.4; }
.tx-switch__box { position: relative; order: 2; flex: none; appearance: none; inline-size: 52px; block-size: 32px; border-radius: 999px; background: var(--btn); cursor: pointer; transition: background var(--t) var(--ease); }
.tx-switch__box::after { content: ""; position: absolute; inset-block-start: 4px; inset-inline-start: 4px; inline-size: 24px; block-size: 24px; border-radius: 50%; background: var(--t2); transition: translate var(--t) var(--ease), background var(--t) var(--ease); }
.tx-switch__box:checked { background: var(--ok); }
.tx-switch__box:checked::after { background: var(--knob); translate: 20px 0; }
.tx-switch__box:disabled { opacity: .45; cursor: default; }
.tx-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 2px; }
.tx-checks .tx-switch { padding: 4px 8px 4px 12px; border-radius: var(--r-row); background: var(--row); }
.tx-checks .tx-switch__label { font-size: var(--fs-sm); }
.tx-set .tx-checks .tx-switch { background: var(--card); }

.tx-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-in); background: var(--track); }
.tx-seg__o { position: relative; display: grid; flex: 1 1 5.25rem; min-inline-size: 4.5rem; }
.tx-seg__o input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tx-seg__o span { display: flex; align-items: center; justify-content: center; gap: 5px; min-inline-size: 44px; min-block-size: var(--seg); padding: 4px 8px; border-radius: 8px; color: var(--t2); font-size: var(--fs-sm); font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.tx-seg__o span small { color: var(--t3); font-size: inherit; font-variant-numeric: tabular-nums; }
.tx-seg__o input:checked + span { background: var(--thumb); color: var(--t1); }
.tx-seg__o input:checked + span small { color: var(--t2); }
.tx-seg__o input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

.tx-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; align-content: start; min-inline-size: 0; }
.tx-field__label { display: inline-flex; align-items: center; gap: 6px; min-block-size: 20px; font-size: var(--fs-sm); font-weight: 600; }
.tx-field__label .tx-icon { --i: 14px; color: var(--t2); }
.tx-field__hint { color: var(--t2); font-size: var(--fs-sm); font-weight: 400; line-height: 1.4; }
.tx-input { display: block; inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; min-block-size: var(--ctl); padding: 9px 14px; border-radius: var(--r-in); background: var(--fld); color: var(--t1); font-size: max(16px, var(--fs-md)); line-height: 1.4; }
.tx-input::placeholder { color: var(--t3); opacity: 1; }
.tx-input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.tx-input:disabled { background: var(--row); color: var(--t3); cursor: not-allowed; }
.tx-input[readonly] { background: var(--row); color: var(--t2); }
textarea.tx-input { min-block-size: 5.75rem; max-block-size: 26rem; resize: vertical; field-sizing: content; }
select.tx-input { appearance: none; padding-inline-end: 40px; background-image: var(--arrow); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
input[type="search"].tx-input::-webkit-search-decoration { appearance: none; }
input[type="datetime-local"].tx-input, input[type="date"].tx-input, input[type="time"].tx-input { appearance: none; -webkit-appearance: none; overflow: hidden; padding-inline: 10px; font-size: 16px; font-variant-numeric: tabular-nums; }
input[type="datetime-local"].tx-input::-webkit-date-and-time-value, input[type="date"].tx-input::-webkit-date-and-time-value, input[type="time"].tx-input::-webkit-date-and-time-value { margin: 0; text-align: start; }
.tx-field__box { position: relative; display: block; min-inline-size: 0; }
.tx-field__box > .tx-icon { position: absolute; inset-block: 0; inset-inline-start: 13px; margin-block: auto; color: var(--t2); pointer-events: none; transition: color var(--t-fast) var(--ease); }
.tx-field__box:focus-within > .tx-icon { color: var(--t1); }
.tx-field__box > .tx-input { padding-inline-start: 44px; }
.tx-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)); gap: 16px; align-items: start; }
.tx-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-inline-size: 0; }
.tx-inline > * { min-inline-size: 0; }
.tx-inline > .tx-btn { flex: none; white-space: nowrap; }
.tx-set .tx-input { background: var(--track); }

.tx-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-inline-size: 44px; min-block-size: var(--ctl); padding: 6px 16px; border-radius: var(--r-in); background: var(--btn); color: var(--t1); font-size: var(--fs-base); font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; transition: scale var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.tx-btn .tx-icon { --i: 18px; }
.tx-btn > span { min-inline-size: 0; overflow-wrap: anywhere; }
.tx-btn--primary { background: var(--cta); color: var(--onc); }
.tx-btn--quiet { background: none; color: var(--t2); }
.tx-btn--danger { color: var(--err); }
.tx-btn--wide { inline-size: 100%; }
.tx-btn--sm { min-block-size: 36px; padding: 4px 12px; font-size: var(--fs-sm); }
.tx-btn--sm .tx-icon { --i: 16px; }
.tx-btn--icon { inline-size: var(--ctl); padding: 0; }
.tx-btn--go { min-block-size: 48px; padding-inline: 18px; font-size: var(--fs-md); }
@media (pointer: fine) { .tx-btn--go { min-block-size: 44px; } }
.tx-btn:active { scale: .97; }
.tx-btn:disabled, .tx-btn[aria-disabled="true"] { opacity: .45; cursor: default; scale: none; }
.tx-btn[aria-busy="true"] { color: transparent; pointer-events: none; }
.tx-btn[aria-busy="true"]::after { content: ""; position: absolute; inset: 0; inline-size: 18px; block-size: 18px; margin: auto; border: 2px solid var(--t1); border-inline-end-color: transparent; border-radius: 50%; animation: tx-spin .8s linear infinite; }
.tx-btn--primary[aria-busy="true"]::after { border-color: var(--onc); border-inline-end-color: transparent; }
.tx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tx-actions--end { justify-content: flex-end; }
.tx-set .tx-btn:not(.tx-btn--primary, .tx-btn--quiet) { background: var(--card); }

.tx-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tx-chip { display: inline-flex; align-items: center; gap: 6px; max-inline-size: 100%; min-block-size: 24px; padding: 2px 8px; border-radius: var(--r-chip); background: var(--chip, var(--track)); color: var(--t1); font-size: var(--fs-xs); font-weight: 600; line-height: 1.3; white-space: nowrap; }
.tx-chip > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; }
.tx-chip .tx-icon { --i: 13px; stroke-width: 2.5; }
.tx-chip--muted { color: var(--t2); }
.tx-chip--ok { background: var(--chip, var(--oks)); color: var(--ok); }
.tx-chip--warn { background: var(--chip, var(--warns)); color: var(--warn); }
.tx-chip--err { background: var(--chip, var(--errs)); color: var(--err); }
.tx-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-token { display: inline-flex; align-items: center; gap: 2px; max-inline-size: 100%; min-block-size: 36px; padding-inline: 12px; border-radius: var(--r-in); background: var(--row); font-size: var(--fs-sm); font-weight: 600; }
.tx-token:has(.tx-token__x) { padding-inline-end: 4px; }
.tx-set .tx-token { background: var(--card); }
.tx-token__text, .tx-token__main { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0; overflow-wrap: anywhere; }
.tx-token__main { min-block-size: 36px; color: var(--t1); font-weight: 600; text-align: start; }
.tx-token__main .tx-icon { --i: 16px; }
.tx-token__main small { color: var(--t2); font-size: inherit; font-weight: 400; }
.tx-token__x { display: grid; flex: none; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 8px; color: var(--t2); }
.tx-token__x .tx-icon { --i: 16px; }

.tx-note { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 14px 12px 44px; border-radius: var(--r-ctl); background: var(--card); --chip: initial; }
.tx-note::before { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: 14px; inline-size: 18px; block-size: 18px; background: var(--t2); -webkit-mask: var(--m-info) center / contain no-repeat; mask: var(--m-info) center / contain no-repeat; }
.tx-card .tx-note, .tx-set .tx-note { background: var(--row); }
.tx-note.tx-note--ok { background: var(--oks); }
.tx-note--ok::before { background: var(--ok); -webkit-mask-image: var(--m-ok); mask-image: var(--m-ok); }
.tx-note.tx-note--warn { background: var(--warns); }
.tx-note--warn::before { background: var(--warn); -webkit-mask-image: var(--m-alert); mask-image: var(--m-alert); }
.tx-note.tx-note--error { background: var(--errs); }
.tx-note--error::before { background: var(--err); -webkit-mask-image: var(--m-alert); mask-image: var(--m-alert); }
.tx-note__lead { font-weight: 600; }
.tx-note__more { color: var(--t2); font-size: var(--fs-sm); line-height: 1.45; }
.tx-note__more b { color: var(--t1); }
.tx-note > .tx-btn, .tx-note > .tx-actions { justify-self: start; margin-block-start: 6px; }
.tx-note code { overflow-wrap: anywhere; }

.tx-empty { justify-items: start; }

.tx-auto__head { display: flex; align-items: center; gap: 10px; min-block-size: var(--tap); margin: -6px -8px 0; padding: 0 8px; border-radius: var(--r-in); color: var(--t1); text-align: start; }
.tx-auto__head > .tx-icon:first-child { color: var(--t2); }
.tx-auto__head > .tx-icon:last-child { --i: 18px; color: var(--t3); }
.tx-auto__title { flex: 1 1 auto; min-inline-size: 0; font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--tight); }
.tx-auto__presets { display: contents; }

.tx-bar { display: flex; align-items: center; gap: 8px; }
.tx-bar > .tx-seg { flex: 1 1 auto; }
.tx-feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; }

.tx-msg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 16px 16px; border-radius: var(--r-card); background: var(--card); content-visibility: auto; contain-intrinsic-size: auto 144px; --chip: initial; }
.tx-msg__meta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; }
.tx-msg__who { display: flex; align-items: center; gap: 10px; min-inline-size: 0; }
.tx-msg__src { display: grid; gap: 1px; min-inline-size: 0; line-height: 1.35; }
.tx-msg__group { display: flex; align-items: center; gap: 6px; min-inline-size: 0; font-size: var(--fs-sm); font-weight: 600; }
.tx-msg__group span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-msg__group .tx-icon { --i: 16px; color: var(--t2); }
.tx-msg__by { overflow: hidden; color: var(--t2); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.tx-msg__sender { color: var(--t1); font-weight: 600; }
.tx-msg__by time { font-variant-numeric: tabular-nums; }
.tx-msg__end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 4px; max-inline-size: 15rem; }
.tx-msg__end .tx-btn { margin-inline-end: -8px; padding-inline: 8px; gap: 2px; }
.tx-msg__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.tx-msg__text { min-inline-size: 0; font-size: var(--fs-md); font-weight: var(--msg-weight); line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; cursor: pointer; }
.tx-msg__tags { margin-block-start: -2px; }
.tx-msg__act { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; inline-size: 100%; }
.tx-msg__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; inline-size: 100%; }
.tx-msg__body.is-left .tx-msg__btns { flex-direction: row-reverse; }
.tx-msg__btns > .tx-btn { flex: 1 1 8rem; block-size: 44px; min-block-size: 44px; justify-content: center; border-radius: 12px; font-size: var(--fs-base); font-weight: 700; white-space: nowrap; }
.tx-msg__btns > .tx-btn--ignore { background: var(--row); color: var(--t2); }
.tx-msg__act .tx-btn > span { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-msg__sent { color: var(--ok); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.tx-msg__sent small { display: block; margin-block-start: 2px; color: var(--t2); font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
.tx-msg__say { color: var(--t2); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; }
.tx-msg__say.is-warn { color: var(--warn); }
.tx-msg__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border-radius: var(--r-ctl); background: var(--row); }
.tx-msg__quick-label { padding-inline: 6px 2px; color: var(--t2); font-size: var(--fs-xs); font-weight: 600; }
.tx-msg__quick .tx-btn { background: var(--card); }
.tx-msg.is-off .tx-msg__text, .tx-msg.is-off .tx-msg__group { color: var(--t2); }

.tx-grp { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 16px 16px; border-radius: var(--r-card); background: var(--card); content-visibility: auto; contain-intrinsic-size: auto 136px; --chip: initial; }
.tx-grp__top { display: flex; align-items: center; gap: 12px; }
.tx-grp__who { display: grid; flex: 1 1 auto; gap: 2px; min-inline-size: 0; }
.tx-grp__name { display: -webkit-box; overflow: hidden; font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--tight); line-height: 1.3; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; }
.tx-grp__sub { color: var(--t2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tx-grp.is-off .tx-grp__name { color: var(--t2); }
.tx-avatar { display: grid; flex: none; place-items: center; inline-size: 44px; block-size: 44px; overflow: hidden; border-radius: var(--r-in); background: var(--row); color: var(--t2); font-weight: 700; }
.tx-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.tx-avatar--msg { inline-size: 38px; block-size: 38px; border-radius: 50%; background: var(--cur); color: var(--t1); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; }
.tx-avatar--lg { inline-size: 56px; block-size: 56px; border-radius: var(--r-ctl); font-size: var(--fs-lg); }
.tx-avatar--lg .tx-icon { --i: 26px; }

.tx-more > summary { display: flex; align-items: center; gap: 10px; min-block-size: var(--tap); padding: 4px 12px; border-radius: var(--r-in); background: var(--row); font-size: var(--fs-sm); font-weight: 600; list-style: none; }
.tx-more > summary::-webkit-details-marker { display: none; }
.tx-more > summary > .tx-icon { --i: 18px; color: var(--t2); }
.tx-more > summary::after { content: ""; flex: none; inline-size: 18px; block-size: 18px; margin-inline-start: auto; background: var(--arrow) center / contain no-repeat; transition: rotate var(--t) var(--ease); }
.tx-more[open] > summary::after { rotate: 180deg; }
.tx-more__label { flex: none; white-space: nowrap; }
.tx-more__sum { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; color: var(--t2); font-weight: 400; text-align: end; text-overflow: ellipsis; white-space: nowrap; }
.tx-more__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block-start: 12px; }

.tx-sets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tx-set { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; border-radius: var(--r-card); background: var(--card); --chip: initial; }
.tx-card .tx-set { padding: 12px; border-radius: var(--r-ctl); background: var(--row); --chip: var(--card); }
.tx-set__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.tx-set__name { font-weight: 700; }
input.tx-set__name { min-block-size: 40px; }
.tx-set__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--t2); font-size: var(--fs-sm); }
.tx-set__meta .tx-icon { --i: 16px; }
.tx-set__groups { display: inline-flex; align-items: center; gap: 6px; min-inline-size: 0; }
.tx-set__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tx-set.is-off .tx-set__name { color: var(--t2); }
.tx-rules { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.tx-rule { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tx-rule__name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--t2); font-size: var(--fs-sm); font-weight: 600; }
.tx-rule__name .tx-icon { --i: 16px; }
.tx-rule__name small { color: var(--t3); font-size: inherit; }

.tx-profile { display: flex; align-items: center; gap: 14px; }
.tx-profile__who { display: grid; gap: 2px; min-inline-size: 0; }
.tx-profile__name { overflow: hidden; font-size: var(--fs-lg); font-weight: 700; letter-spacing: var(--tight); text-overflow: ellipsis; white-space: nowrap; }
.tx-profile__sub { color: var(--t2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tx-profile__sub b { color: var(--t1); }
.tx-setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-block-size: var(--tap); }
.tx-setting > .tx-switch__text { flex: 1 1 12rem; }
.tx-setting > .tx-seg { flex: 1 1 16rem; }
.tx-stepper { display: inline-flex; align-items: center; gap: 6px; }
.tx-stepper output { min-inline-size: 3.25rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: center; }
.tx-range { inline-size: min(100%, 12rem); block-size: 32px; appearance: none; background: none; cursor: pointer; }
.tx-range::-webkit-slider-runnable-track { block-size: 6px; border-radius: 999px; background: var(--track); }
.tx-range::-webkit-slider-thumb { inline-size: 24px; block-size: 24px; margin-block-start: -9px; border-radius: 50%; background: var(--cta); appearance: none; }
.tx-range::-moz-range-track { block-size: 6px; border-radius: 999px; background: var(--track); }
.tx-range::-moz-range-thumb { inline-size: 24px; block-size: 24px; border: 0; border-radius: 50%; background: var(--cta); }
.tx-unread { display: inline-block; flex: none; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ink); }
.tx-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.tx-stat { display: grid; gap: 2px; min-inline-size: 0; padding: 12px 14px; border-radius: 6px; background: var(--row); }
.tx-stat:first-child { border-start-start-radius: var(--r-in); }
.tx-stat:nth-child(2) { border-start-end-radius: var(--r-in); }
.tx-stat:nth-last-child(2):nth-child(odd) { border-end-start-radius: var(--r-in); }
.tx-stat:last-child { border-end-end-radius: var(--r-in); }
.tx-stat b { font-size: var(--fs-xl); font-weight: 700; letter-spacing: var(--tight); font-variant-numeric: tabular-nums; line-height: 1.2; overflow-wrap: anywhere; }
.tx-stat span { color: var(--t2); font-size: var(--fs-sm); }
.tx-code { font-size: var(--fs-xl); font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.tx-qr { display: grid; place-items: center; inline-size: 240px; block-size: 240px; margin-inline: auto; padding: 12px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; background: #ffffff; color: #000000; font-size: var(--fs-sm); text-align: center; }
.tx-qr img { inline-size: 216px; block-size: 216px; display: block; }
.tx-center { justify-self: center; text-align: center; }
.tx-gate:not([hidden]) { display: grid; place-items: center; min-block-size: 100dvh; padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
.tx-gate__card { inline-size: min(100%, 26rem); justify-items: center; text-align: center; gap: 14px; padding: 28px 24px; }
body[data-auth="gate"] > .tx-top, body[data-auth="gate"] > .tx-main, body[data-auth="gate"] > .tx-tabs { display: none !important; }

.tx-admin-gate-field, .tx-admin-gate-actions { inline-size: 100%; text-align: start; }
.tx-user-card { cursor: pointer; transition: background var(--t-fast) var(--ease), outline-color var(--t-fast) var(--ease); }
.tx-user-card.is-selected { outline: 2px solid var(--ink); outline-offset: -2px; }
.tx-plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: 8px; }
.tx-plan-btn { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: var(--r-ctl); background: var(--row); color: var(--t1); text-align: start; transition: scale var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.tx-plan-btn:active { scale: .98; }
.tx-plan-btn.is-active { outline: 2px solid var(--ok); outline-offset: -2px; background: var(--oks); }
.tx-plan-btn--danger { background: var(--errs); color: var(--err); }
.tx-plan-btn__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-base); font-weight: 700; letter-spacing: var(--tight); }
.tx-plan-btn__sub { color: var(--t2); font-size: var(--fs-xs); font-weight: 600; }
.tx-plan-btn--danger .tx-plan-btn__sub { color: var(--err); }
.tx-cover { position: relative; block-size: 132px; margin: -16px -16px 6px; overflow: hidden; border-start-start-radius: var(--r-card); border-start-end-radius: var(--r-card); background: var(--row); }
.tx-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.tx-avatar--xl { inline-size: 68px; block-size: 68px; border-radius: var(--r-ctl); font-size: var(--fs-xl); outline: 3px solid var(--card); }
.tx-json-pre { margin: 0; padding: 14px; overflow-x: auto; border-radius: var(--r-in); background: var(--row); color: var(--t1); font: 500 var(--fs-xs)/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; white-space: pre-wrap; word-break: break-word; }

.tx-sheet { position: fixed; inset: auto 0 0 0; z-index: 50; inline-size: 100%; max-inline-size: none; block-size: auto; max-block-size: calc(100dvh - env(safe-area-inset-top, 0px) - 12px); margin: 0; padding: 0; overflow: hidden; border: 0; border-start-start-radius: var(--r-card); border-start-end-radius: var(--r-card); background: var(--bg); color: var(--t1); translate: 0 100%; transition: translate var(--t-slow) var(--ease), overlay var(--t-slow) allow-discrete, display var(--t-slow) allow-discrete; }
.tx-sheet[open] { translate: 0 0; }
.tx-sheet::backdrop { background: var(--scrim); opacity: 0; transition: opacity var(--t-slow) var(--ease), overlay var(--t-slow) allow-discrete, display var(--t-slow) allow-discrete; }
.tx-sheet[open]::backdrop { opacity: 1; }
.tx-sheet__in { display: flex; flex-direction: column; max-block-size: calc(100dvh - env(safe-area-inset-top, 0px) - 12px); }
.tx-sheet__head { display: flex; flex: none; align-items: center; gap: 8px; min-block-size: var(--bar-h); padding: 6px 6px 6px var(--gut); border-block-end: .5px solid var(--track); }
.tx-sheet__title { flex: 1 1 auto; min-inline-size: 0; font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--tight); }
.tx-sheet__body { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; padding: 12px var(--gut) calc(20px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }

@starting-style {
  .tx-sheet[open] { translate: 0 100%; }
  .tx-sheet[open]::backdrop { opacity: 0; }
}

.tx-toasts { position: fixed; inset: auto var(--gut) calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 12px); z-index: 60; inline-size: auto; block-size: auto; margin: 0; padding: 0; overflow: visible; border: 0; background: none; color: inherit; pointer-events: none; }
.tx-toast { display: flex; align-items: center; gap: 10px; inline-size: fit-content; max-inline-size: min(100%, 28rem); min-block-size: 44px; margin: 8px auto 0; padding: 10px 16px 10px 14px; border-radius: var(--r-ctl); background: var(--cta); color: var(--onc); font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; pointer-events: auto; animation: tx-toast-in var(--t-slow) var(--ease); transition: opacity var(--t) var(--ease), translate var(--t) var(--ease); }
.tx-toast::before { content: ""; flex: none; inline-size: 18px; block-size: 18px; background: currentColor; -webkit-mask: var(--m-ok) center / contain no-repeat; mask: var(--m-ok) center / contain no-repeat; }
.tx-toast--info::before { -webkit-mask-image: var(--m-info); mask-image: var(--m-info); }
.tx-toast--warn::before, .tx-toast--err::before { -webkit-mask-image: var(--m-alert); mask-image: var(--m-alert); }
.tx-toast.is-out { opacity: 0; translate: 0 6px; }

@keyframes tx-toast-in { from { opacity: 0; translate: 0 8px; } }
@keyframes tx-spin { to { rotate: 360deg; } }

@media (hover: hover) {
  .tx-btn:not(:disabled, [aria-disabled="true"]):hover { background: var(--btnh); }
  .tx-btn--primary:not(:disabled, [aria-disabled="true"]):hover { background: var(--ctah); }
  .tx-msg__btns > .tx-btn--ignore:not(:disabled, [aria-disabled="true"]):hover { background: var(--track); color: var(--t1); }
  .tx-btn--quiet:not(:disabled, [aria-disabled="true"]):hover, .tx-msg__quick .tx-btn:hover, .tx-set .tx-btn:not(.tx-btn--primary):hover { background: var(--track); color: var(--t1); }
  .tx-btn--danger:not(:disabled):hover { color: var(--err); }
  .tx-top__btn:hover, .tx-brand:hover, .tx-me:hover, .tx-nav__link:hover { background: var(--row); }
  .tx-nav__link[aria-current]:hover { background: var(--cur); }
  button.tx-row:hover, a.tx-row:hover, .tx-user-card:hover, .tx-plan-btn:hover { background: var(--sel); }
  .tx-plan-btn.is-active:hover { background: var(--oks); }
  .tx-plan-btn--danger:hover { background: var(--errs); }
  .tx-token__x:hover, .tx-token__main:hover { color: var(--t1); }
  .tx-token__x:hover { background: var(--track); }
  .tx-msg__text:hover { color: var(--t1); }
  .tx-more > summary:hover { background: var(--sel); }
  .tx-auto__head:hover { background: var(--row); }
}

@media (max-width: 59.99rem) {
  .tx-l { display: none !important; }
  .tx-head__title { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tx-msg__end .tx-btn { min-block-size: 32px; }
  .tx-auto { gap: 10px; padding-block: 12px 14px; }
  .tx-auto .tx-actions { gap: 6px; }
  .tx-auto .tx-btn { min-block-size: 36px; padding: 4px 12px; font-size: var(--fs-sm); }
  .tx-auto .tx-btn .tx-icon { --i: 16px; }
  .tx-auto .tx-n { min-inline-size: 18px; block-size: 18px; }
}

@media (max-width: 22.49rem) {
  :root { --gut: 12px; }
  .tx-tab { font-size: .625rem; }
  .tx-msg { padding-inline: 14px; }
}

@media (min-width: 60rem) {
  :root { --gut: 24px; }
  .tx { padding-block-end: 0; }
  .tx-s { display: none !important; }
  .tx-tabs, .tx-top__title { display: none; }
  .tx-top { gap: 8px; padding-inline: 12px 16px; }
  .tx-brand b { display: block; }
  .tx-nav { display: flex; flex: 1 1 auto; gap: 2px; min-inline-size: 0; padding: 4px; overflow-x: auto; scrollbar-width: none; }
  .tx-nav__link { display: flex; flex: none; align-items: center; gap: 6px; block-size: var(--ctl); padding-inline: 10px; border-radius: var(--r-in); color: var(--t2); font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; }
  .tx-nav__link[aria-current] { background: var(--cur); color: var(--t1); }
  .tx-top__btn, .tx-me { block-size: var(--ctl); }
  .tx-top__btn .tx-icon, .tx-me .tx-icon { --i: 18px; }
  .tx-top__btn .tx-n { position: static; }
  .tx-me { display: inline-flex; }
  .tx-me .tx-chip { background: var(--cur); }

  .tx-view { grid-template: "head side" auto "work side" 1fr / minmax(0, 1fr) var(--side-w); gap: 0; align-items: start; min-block-size: calc(100dvh - var(--bar-h) - env(safe-area-inset-top, 0px)); padding: 0; }
  .tx-head { grid-area: head; padding: 24px var(--gut) 0; }
  .tx-work { grid-area: work; gap: 16px; padding: 16px var(--gut) 32px; }
  .tx-side { grid-area: side; position: sticky; inset-block-start: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; gap: 12px; block-size: calc(100dvh - var(--bar-h) - env(safe-area-inset-top, 0px)); padding: 16px; overflow-y: auto; overscroll-behavior: contain; border-inline-start: .5px solid var(--track); background: var(--nav); scrollbar-width: thin; --chip: var(--cur); view-transition-name: side; }
  .tx-side > * { flex: none; }
  .tx-card, .tx-msg, .tx-grp { padding: 20px; }
  .tx-cover { margin: -20px -20px 8px; block-size: 164px; }
  .tx-msg { padding-block: 16px 18px; }
  .tx-card .tx-set { padding: 14px; }

  .tx-sheet { inset: 0 0 0 auto; inline-size: var(--side-w); block-size: 100dvh; max-block-size: none; border-radius: 0; border-inline-start: .5px solid var(--track); background: var(--nav); translate: 100% 0; }
  .tx-sheet__in { block-size: 100%; max-block-size: none; }
  .tx-sheet__head { padding-inline-start: 20px; }
  .tx-sheet__body { padding: 12px 16px 24px; --chip: var(--cur); }
  .tx-toasts { inset: calc(var(--bar-h) + 12px) 16px auto auto; inline-size: min(28rem, calc(100vw - 32px)); }
  .tx-toast { margin-inline: auto 0; }

  @starting-style {
    .tx-sheet[open] { translate: 100% 0; }
  }
}

@media (min-width: 80rem) {
  :root { --side-w: 468px; }
  .tx-nav__link { gap: 8px; padding-inline: 12px; font-size: var(--fs-base); }
  .tx-head { padding-inline: 28px; }
  .tx-work { padding-inline: 28px; }
}

@media (prefers-contrast: more) {
  .tx-input, .tx-seg, .tx-switch__box, .tx-chip, .tx-token { outline: 1px solid var(--t2); }
  .tx-card, .tx-msg, .tx-grp, .tx-set, .tx-list > *, .tx-note, .tx-kv__row, .tx-sheet { outline: 1px solid var(--t3); }
}

@media (forced-colors: active) {
  .tx-tab[aria-current], .tx-nav__link[aria-current], .tx-seg__o input:checked + span { outline: 2px solid Highlight; outline-offset: -2px; }
  .tx-switch__box, .tx-input, .tx-btn, .tx-token { outline: 1px solid ButtonText; }
  .tx-note::before, .tx-toast::before { background: CanvasText; }
  .tx-more > summary::after { background: CanvasText; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
  .tx-btn[aria-busy="true"]::after { animation-duration: 2.4s !important; }
}