/* outside-pictures.css - made by dev/outside/build-css.py from apps/outside/figures.css and apps/outside/x-kit.css, comments left out.
   Edit those and run it again; never edit this file. */
.tw-fig { position: relative; margin: 0; }
.tw-fig .tw-toast { z-index: 2; box-shadow: var(--toast); }
.tw-fig-t1 { right: 22px; top: -28px; }
.tw-fig-t2 { right: -34px; top: 50%; transform: translateY(-50%); }
.tw-fig-t3 { left: 26px; bottom: -30px; }
.tw-fig-t4 { left: -30px; top: 30%; }
@container (max-width: 480px) {
    .tw-fig-t1 { right: 8px; }
    .tw-fig-t2 { right: -4px; }
    .tw-fig-t3 { display: none; }
    .tw-fig-t4 { left: -4px; }
}
.tw-toast-ic { display: flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--yellow); box-shadow: var(--edge); }
.tw-toast-ic svg { width: 14px; height: 14px; }
.tw-toast-ic.tw-fdone { background: var(--done-soft); }
.tw-toast-ic.tw-fstop { background: var(--stop-soft); }
.tw-fstack { position: relative; display: grid; gap: 30px; margin: 0; }
.tw-fc { position: relative; box-sizing: border-box; min-width: 0; padding: 16px 18px; border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.45; box-shadow: var(--ring-on-yellow); }
.tw-on-grey .tw-fc { box-shadow: var(--ring); }
.tw-fc p { margin: 0; }
.tw-fc-in { margin-left: 40px; }
.tw-fc-out { margin-right: 40px; }
.tw-fc-h { display: flex; align-items: center; gap: 9px; margin: -2px 0 12px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.tw-fc-h svg { flex: none; width: 19px; height: 19px; }
.tw-fc-h img { flex: none; width: 32px; height: 32px; border-radius: var(--radius-full); object-fit: cover; }
.tw-fc-h small { margin-left: auto; color: var(--ink-3); font-size: 12.5px; font-weight: 700; letter-spacing: 0; white-space: nowrap; }
.tw-fc-t { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.tw-fc-sub { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.tw-fc-rule { margin: 12px -18px; border: 0; border-top: 1px solid var(--line); }
.tw-fc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-top: 12px; }
.tw-fc > * + .tw-fchips, .tw-fc > * + .tw-fnote, .tw-fc > * + .tw-fstats, .tw-fc > * + .tw-fmeter-row, .tw-fc > * + .tw-fh, .tw-fc > * + .tw-fcheck, .tw-fc > * + .tw-fplot { margin-top: 12px; }
.tw-fc > .tw-fc-h + * { margin-top: 0; }
.tw-fc-h small svg { width: 13px; height: 13px; vertical-align: -2px; }
.tw-fbig { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tw-fgood { color: var(--done); font-weight: 800; }
.tw-fbad { color: var(--stop); font-weight: 800; }
.tw-fmute { color: var(--ink-3); }
.tw-fstrike { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 2px; }
.tw-fc .tw-faces img { border-color: var(--paper); }
.tw-farrow { position: relative; z-index: 1; display: flex; justify-content: center; margin: -24px 0; color: var(--ink); }
.tw-farrow svg { box-sizing: border-box; width: 30px; height: 30px; padding: 5px; border-radius: var(--radius-full); background: var(--paper); box-shadow: var(--edge); }
.tw-fstamp { position: absolute; z-index: 1; right: 16px; top: var(--y, 46%); padding: 4px 12px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .92); color: var(--stop); font-size: 15px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; box-shadow: inset 0 0 0 3px var(--stop); transform: translateY(-50%) rotate(-8deg); }
.tw-frows { display: grid; margin: 0 -18px; }
.tw-fc-h + .tw-frows, .tw-ftabs + .tw-frows { margin-top: -4px; }
.tw-frow { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 18px; }
.tw-frow + .tw-frow { border-top: 1px solid var(--line); }
.tw-frows-wide .tw-frow { grid-template-columns: 52px minmax(0, 1fr) auto; }
.tw-frow-lit { background: var(--yellow-tint); }
.tw-frow-dim { opacity: .5; }
.tw-frow > img, .tw-frow > .tw-tp-ph, .tw-fav { width: 36px; height: 36px; border-radius: var(--radius-full); object-fit: cover; }
.tw-frow > .tw-tp-ph svg { width: 18px; height: 18px; }
.tw-frow b { display: block; overflow: hidden; font-size: 13.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.tw-frow small { display: block; overflow: hidden; color: var(--ink-3); font-size: 12px; font-weight: 600; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.tw-frow-n { color: var(--ink); font-size: 15px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.tw-frow-v { font-size: 13.5px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.tw-fav { display: flex; flex: none; align-items: center; justify-content: center; background: var(--grey); color: #9a9a94; box-shadow: inset 0 0 0 1.5px var(--line); }
.tw-fav svg { width: 18px; height: 18px; }
.tw-fav-ink { background: var(--ink); color: var(--paper); box-shadow: none; font-size: 13px; font-weight: 800; }
.tw-fav-y { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 13px; font-weight: 800; }
.tw-fav-sq { border-radius: 9px; }
.tw-fig .tw-profile-top .tw-tp-ph { width: 72px; height: 72px; border: 4px solid var(--paper); box-shadow: var(--edge); }
.tw-fig .tw-profile-top .tw-tp-ph::after { inset: 4px; }
.tw-fig .tw-profile-top .tw-tp-ph svg { width: 34px; height: 34px; }
.tw-fig .tw-profile-top img.tw-face { width: 72px; height: 72px; border: 4px solid var(--paper); box-shadow: var(--edge); }
.tw-profile-bio { margin: 0; font-size: 14.5px; font-weight: 500; line-height: 1.5; }
.tw-profile-n { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-3); font-size: 14px; font-weight: 600; }
.tw-profile-n b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.tw-fbtn { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: var(--radius-full); background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 800; line-height: 1; white-space: nowrap; }
.tw-fbtn svg { width: 14px; height: 14px; }
.tw-fbtn-line { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fbtn-y { background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fbtn-stop { background: var(--stop); color: var(--paper); }
.tw-fbtn-lg { height: 36px; padding: 0 16px; font-size: 13.5px; }
.tw-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tw-fchips .tw-chip { height: 26px; padding: 0 10px; font-size: 12px; }
.tw-fstats { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 8px; }
.tw-fstat { display: grid; align-content: start; gap: 1px; min-width: 0; padding: 9px 11px; border-radius: var(--radius-md); background: var(--grey); }
.tw-fstat small { overflow: hidden; color: var(--ink-3); font-size: 11.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.tw-fstat b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tw-fstat i { color: var(--done); font-size: 11.5px; font-style: normal; font-weight: 800; }
.tw-fstat i.tw-fbad { color: var(--stop); }
.tw-fstat-lit { background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fstat-lit small { color: var(--on-yellow-2); }
.tw-fbars { display: flex; align-items: flex-end; gap: 6px; height: 88px; border-bottom: 1.5px solid var(--ink); }
.tw-fbars i { flex: 1; height: var(--h); min-height: 4px; border-radius: 4px 4px 0 0; background: var(--yellow-tint); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fbars i.on { background: var(--yellow); }
.tw-fbars i.ink { background: var(--ink); }
.tw-fbars-x { display: flex; gap: 6px; margin-top: 5px; }
.tw-fbars-x span { flex: 1; overflow: hidden; color: var(--ink-3); font-size: 11px; font-weight: 700; text-align: center; white-space: nowrap; }
.tw-fh { display: grid; gap: 9px; }
.tw-fh-row { display: grid; grid-template-columns: minmax(0, 96px) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; line-height: 1.3; }
.tw-fh-row > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tw-fh-row > i { display: block; height: 12px; overflow: hidden; border-radius: var(--radius-full); background: var(--grey); box-shadow: inset 0 0 0 1px var(--line); }
.tw-fh-row > i::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: var(--radius-full); background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fh-row.ink > i::before { background: var(--ink); box-shadow: none; }
.tw-fh-row.dim > i::before { background: var(--yellow-tint); }
.tw-fh-row > b { min-width: 3ch; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.tw-fplot { position: relative; }
.tw-fline { display: block; width: 100%; height: auto; overflow: visible; }
.tw-fline .a { fill: var(--yellow-tint); }
.tw-fline .l { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tw-fline .d { fill: none; stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.tw-fline .g { fill: none; stroke: var(--line); stroke-width: 1; }
.tw-fline .p { fill: var(--yellow); stroke: var(--ink); stroke-width: 2; }
.tw-fline .k { fill: var(--ink); }
.tw-fline text { fill: var(--ink-3); font-family: var(--font-sans); font-size: 11px; font-weight: 700; }
.tw-fpin { position: absolute; left: var(--x); top: var(--y); padding: 3px 8px; border-radius: var(--radius-full); background: var(--paper); color: var(--ink); font-size: 11.5px; font-weight: 800; line-height: 1.3; white-space: nowrap; box-shadow: var(--edge); transform: translate(-50%, -100%); }
.tw-fpin-ink { background: var(--ink); color: var(--paper); box-shadow: none; }
.tw-fmeter { height: 10px; overflow: hidden; border-radius: var(--radius-full); background: var(--grey); box-shadow: inset 0 0 0 1px var(--line); }
.tw-fmeter::before { content: ""; display: block; width: var(--w); height: 100%; border-radius: var(--radius-full); background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fmeter-stop::before { background: var(--stop); box-shadow: none; }
.tw-fmeter-ink::before { background: var(--ink); box-shadow: none; }
.tw-fmeter-row { display: grid; gap: 5px; }
.tw-fmeter-row + .tw-fmeter-row { margin-top: 10px; }
.tw-fmeter-row > span { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; }
.tw-fmeter-row > span b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tw-fkv { display: grid; margin: 0 -18px; }
.tw-fkv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; }
.tw-fkv > div + div { border-top: 1px solid var(--line); }
.tw-fkv b { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tw-fkv svg { flex: none; width: 17px; height: 17px; }
.tw-ffield { display: grid; gap: 5px; }
.tw-ffield + .tw-ffield { margin-top: 10px; }
.tw-ffield > small { color: var(--ink-3); font-size: 12px; font-weight: 700; }
.tw-ffield > span { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--ink-3); font-size: 14.5px; font-weight: 600; }
.tw-ffield > span svg { flex: none; width: 17px; height: 17px; margin-left: auto; }
.tw-ffield > span em { color: var(--ink-3); font-style: normal; }
.tw-ffield-tall > span { align-items: flex-start; padding: 9px 12px; font-size: 14px; font-weight: 500; line-height: 1.45; }
.tw-ffield-on > span { box-shadow: 0 0 0 3px var(--yellow), inset 0 0 0 2px var(--ink); }
.tw-ffield-ok > span svg { color: var(--done); }
.tw-ffield-bad > span { box-shadow: 0 0 0 3px var(--stop-soft), inset 0 0 0 2px var(--stop); }
.tw-ffield-bad > span svg { color: var(--stop); }
.tw-ffield > em { color: var(--ink-3); font-size: 12px; font-style: normal; font-weight: 600; }
.tw-ftog { position: relative; flex: none; width: 36px; height: 22px; border-radius: var(--radius-full); background: var(--grey); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-ftog::after { content: ""; position: absolute; top: 4px; left: 4px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--ink); }
.tw-ftog-on { background: var(--yellow); }
.tw-ftog-on::after { left: 18px; }
.tw-fdm { display: grid; gap: 7px; }
.tw-fdm p { justify-self: start; max-width: 84%; padding: 8px 13px; border-radius: 18px 18px 18px 5px; background: var(--grey); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; line-height: 1.4; }
.tw-fdm p.me { justify-self: end; border-radius: 18px 18px 5px 18px; background: var(--yellow); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-fdm small { justify-self: end; margin-top: -3px; color: var(--ink-3); font-size: 11.5px; font-weight: 700; }
.tw-fdm small.them { justify-self: start; }
.tw-fnote { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--yellow-tint); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 13.5px; font-weight: 600; line-height: 1.4; }
.tw-fnote svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.tw-fnote b { font-weight: 800; }
.tw-fnote-stop { background: color-mix(in srgb, var(--stop-soft) 40%, var(--paper)); }
.tw-fnote-stop svg { color: var(--stop); }
.tw-fnote-done { background: color-mix(in srgb, var(--done-soft) 45%, var(--paper)); }
.tw-fnote-done svg { color: var(--done); }
.tw-fnote-plain { background: var(--grey); box-shadow: none; }
.tw-fcheck { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tw-fcheck li { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; font-weight: 700; line-height: 1.3; }
.tw-fcheck li > i { display: flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 12px; font-style: normal; font-weight: 800; }
.tw-fcheck li > i svg { width: 14px; height: 14px; }
.tw-fcheck li.done > i { background: var(--ink); color: var(--yellow); box-shadow: none; }
.tw-fcheck li.now > i { background: var(--yellow); }
.tw-fcheck li.stop > i { background: var(--stop); color: var(--paper); box-shadow: none; }
.tw-fcheck li.todo { color: var(--ink-3); }
.tw-fcheck li.todo > i { box-shadow: inset 0 0 0 1.5px var(--ink-3); }
.tw-fcheck small { margin-left: auto; padding-left: 8px; color: var(--ink-3); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tw-fmark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--ink); color: var(--yellow); font-size: 10.5px; font-style: normal; font-weight: 800; line-height: 1; vertical-align: 2px; }
.tw-ftabs { display: flex; margin: -6px -18px 4px; border-bottom: 1px solid var(--line); }
.tw-ftabs span { flex: 1; padding: 4px 4px 10px; color: var(--ink-3); font-size: 13px; font-weight: 700; text-align: center; white-space: nowrap; }
.tw-ftabs span.on { color: var(--ink); font-weight: 800; box-shadow: inset 0 -3px 0 var(--ink); }
.tw-fsearch { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px; border-radius: var(--radius-full); background: var(--grey); box-shadow: inset 0 0 0 1.5px var(--ink); font-size: 14px; font-weight: 700; }
.tw-fsearch svg { flex: none; width: 17px; height: 17px; color: var(--ink-3); }
.tw-fsearch + * { margin-top: 12px; }
.tw-fsearch > svg:last-child:not(:first-child) { margin-left: auto; color: var(--ink); }
.tw-furl { display: flex; align-items: center; gap: 6px; margin: -4px 0 14px; }
.tw-furl i { flex: none; width: 9px; height: 9px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-furl span { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; height: 26px; margin-left: 6px; padding: 0 11px; overflow: hidden; border-radius: var(--radius-full); background: var(--grey); color: var(--ink-2); font-size: 12px; font-weight: 700; white-space: nowrap; }
.tw-furl span svg { flex: none; width: 12px; height: 12px; }
.tw-flines { display: grid; gap: 7px; }
.tw-flines i { display: block; width: var(--w, 100%); height: 8px; border-radius: var(--radius-full); background: var(--grey); }
.tw-fc > * + .tw-flines { margin-top: 10px; }
.tw-ftools { display: flex; align-items: center; gap: 13px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink); }
.tw-ftools > svg { flex: none; width: 18px; height: 18px; }
.tw-ftools > small { margin-left: auto; color: var(--ink-3); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tw-ftools > small + .tw-fbtn { margin-left: 0; }
.tw-ftools > .tw-fbtn { margin-left: auto; }
.tw-thread { position: relative; isolation: isolate; display: grid; gap: 34px; margin: 0; }
.tw-thread::before { content: ""; position: absolute; left: 33px; top: 36px; bottom: 40px; z-index: -1; width: 4px; border-inline: 2px solid var(--ink); background: var(--paper); }
.tw-tp { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 16px 18px 14px; border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); box-shadow: var(--ring-on-yellow); }
.tw-on-grey .tw-tp { box-shadow: var(--ring); }
.tw-tp-ph { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--yellow-tint); color: #8d8d85; box-shadow: var(--edge); }
.tw-tp-ph::after { content: ""; position: absolute; inset: 3px; border: 1.5px dashed #b9b9b0; border-radius: var(--radius-full); }
.tw-tp-ph svg { width: 20px; height: 20px; }
.tw-tp > img { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; }
.tw-tp > .tw-fav { width: 40px; height: 40px; }
.tw-tp-main { min-width: 0; }
.tw-tp-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; line-height: 1.3; }
.tw-tp-who b { flex: none; font-size: 14px; font-weight: 800; }
.tw-tp-who span { overflow: hidden; color: var(--ink-3); font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.tw-tp p { margin: 3px 0 9px; font-size: 14.5px; font-weight: 500; line-height: 1.45; }
.tw-tp-num { color: var(--ink-3); font-weight: 600; white-space: nowrap; }
.tw-tp-acts { display: flex; gap: 20px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-tp-acts span { display: inline-flex; align-items: center; gap: 5px; }
.tw-tp-acts svg { width: 15px; height: 15px; }
.tw-tp-acts .on { color: var(--ink); font-weight: 800; }
.tw-tp-top { display: flex; align-items: center; gap: 6px; margin: -3px 0 5px; color: var(--ink-3); font-size: 12px; font-weight: 700; }
.tw-tp-top svg { flex: none; width: 14px; height: 14px; }
.tw-tp-tick { display: inline-block; flex: none; width: 15px; height: 15px; margin-left: 2px; color: var(--ink); vertical-align: -2px; }
.tw-tp-hash { font-weight: 700; background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tw-tp-media { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--radius-md); background: var(--yellow-tint); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.tw-tp-media > svg { width: 34px; height: 34px; }
.tw-tp-media-dots { background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 12px 12px; }
.tw-tp-media-y { background-color: var(--yellow); }
.tw-tp-media b { font-size: 20px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; text-align: center; }
.tw-tp-media .tw-chip { position: absolute; left: 8px; bottom: 8px; height: 22px; padding: 0 8px; font-size: 11px; }
.tw-tp-q { display: grid; gap: 2px; margin: 0 0 10px; padding: 9px 12px 10px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1.5px var(--line); }
.tw-tp-q .tw-tp-who b { font-size: 13px; }
.tw-tp-q .tw-tp-who span { font-size: 12px; }
.tw-tp .tw-tp-q p { margin: 0; font-size: 13.5px; }
.tw-tp-poll { display: grid; gap: 6px; margin: 2px 0 8px; }
.tw-tp-opt { position: relative; isolation: isolate; display: flex; justify-content: space-between; gap: 10px; padding: 7px 11px; overflow: hidden; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.tw-tp-opt::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--w); background: var(--grey); }
.tw-tp-opt b { font-weight: 800; font-variant-numeric: tabular-nums; }
.tw-tp-opt.on { font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-tp-opt.on::before { background: var(--yellow); }
.tw-tp-meta { margin: 0 0 9px; color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.tw-tp-dim { opacity: .5; }
.tw-frows-pics .tw-frow { grid-template-columns: 64px minmax(0, 1fr) auto; }
.tw-frow > img.tw-fthumb { width: 64px; height: 36px; border-radius: var(--radius-md); box-shadow: var(--edge); }
.tw-fdeck { display: grid; margin: 0; padding: 24px 42px 16px; }
.tw-fdeck > .tw-fc { grid-area: 1 / 1; overflow: hidden; padding: 0; }
.tw-fdeck > .tw-fc:nth-child(1) { transform: translate(-40px, 16px) rotate(-9deg); }
.tw-fdeck > .tw-fc:nth-child(2) { transform: translate(40px, 8px) rotate(7deg); }
.tw-fdeck > .tw-fc:last-child { z-index: 1; }
.tw-fcard img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-bottom: 1.5px solid var(--ink); }
.tw-fcard b { display: block; padding: 11px 14px 2px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.tw-fcard small { display: flex; align-items: center; gap: 6px; padding: 0 14px 13px; color: var(--ink-3); font-size: 12px; font-weight: 700; }
.tw-fcard small svg { flex: none; width: 13px; height: 13px; }
.tw-fphoto { overflow: hidden; padding: 0; }
.tw-fphoto img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
@container (max-width: 480px) {
    .tw-frows-pics .tw-frow { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; }
    .tw-frow > img.tw-fthumb { width: 48px; height: 27px; }
    .tw-fdeck { padding-inline: 18px; }
    .tw-fdeck > .tw-fc:nth-child(1) { transform: translate(-12px, 12px) rotate(-6deg); }
    .tw-fdeck > .tw-fc:nth-child(2) { transform: translate(12px, 6px) rotate(5deg); }
}
.tw-prose .tw-xfig { display: grid; justify-items: center; gap: 22px; padding: 28px 18px 22px; }
.tw-prose .tw-xfig > figcaption { justify-self: stretch; margin: -4px 0 0; color: var(--ink-2); text-align: center; }
.tw-xfig-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 22px; width: 100%; max-width: 640px; align-items: start; }
.tw-xfig-row > .tw-x { max-width: none; }
.tw-xstack { display: grid; justify-items: start; width: 100%; max-width: 500px; }        
.tw-xstack > .tw-x-pop { margin-left: 22%; }
@container (max-width: 480px) { .tw-prose .tw-xfig { padding: 22px 12px 16px; } }
.tw-x { position: relative; box-sizing: border-box; width: 100%; max-width: 500px; border-radius: var(--radius-xl); background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.45; text-align: left; box-shadow: var(--edge); }
:where(.tw-x) p { margin: 0; }                                            
.tw-x:not(.tw-x-menu) { container: tw-x / inline-size; }                 
.tw-prose .tw-x img { display: block; margin: 0; border-radius: 0; background: none; box-shadow: none; }
.tw-prose .tw-x .tw-x-av { border-radius: var(--radius-full); }
.tw-x b { font-weight: 800; }
.tw-x > :first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.tw-x > :last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }
.tw-x > :is(.tw-x-post, .tw-x-person, .tw-x-notif) + :is(.tw-x-post, .tw-x-person, .tw-x-notif, .tw-x-tools, .tw-x-more-row) { border-top: 1px solid var(--line); }
.tw-x-rows > .tw-x-row + .tw-x-row { border-top: 1px solid var(--line); }
.tw-xi { display: inline-block; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; vertical-align: -3px; }
.tw-x-post { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 12px 16px 10px; }
.tw-x-av { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; }
span.tw-x-av { display: flex; align-items: center; justify-content: center; background: var(--yellow); color: var(--ink); font-size: 15px; font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-x-main { min-width: 0; }
.tw-x-ctx { display: flex; align-items: center; gap: 6px; margin: -2px 0 3px; color: var(--ink-3); font-size: 13px; font-weight: 700; }
.tw-x-ctx .tw-xi { width: 15px; height: 15px; }
.tw-x-who { display: flex; align-items: center; gap: 4px; min-width: 0; line-height: 1.3; white-space: nowrap; }
.tw-x-who b { overflow: hidden; text-overflow: ellipsis; }
.tw-x-who > span { overflow: hidden; color: var(--ink-3); text-overflow: ellipsis; }
.tw-x-who > span + span { flex: none; }
.tw-x-who .tw-xi-badge { width: 17px; height: 17px; color: var(--ink); vertical-align: 0; }
.tw-x-who .tw-xi-more { flex: none; margin-left: auto; color: var(--ink-3); }
.tw-x-who > b { flex: 0 1 auto; min-width: 2.2em; }
.tw-x-who > b + .tw-xi-badge + span, .tw-x-who > b + span { flex: 0 50 auto; min-width: 1.5em; }
.tw-x-who-2 { flex-wrap: wrap; row-gap: 0; }
.tw-x-who.tw-x-who-2 > span:first-of-type { flex: 0 0 100%; }
.tw-x-to { margin: 1px 0 2px; color: var(--ink-3); font-size: 14px; }
.tw-x-to b { color: var(--link); font-weight: 600; }
.tw-x-text { margin-top: 2px; overflow-wrap: break-word; }
.tw-x-text > p + p { margin-top: .55em; }
.tw-x-text a, .tw-x-text .tw-x-at { color: var(--link); font-weight: 600; }
.tw-x-more-link { display: block; margin-top: 2px; color: var(--link); font-size: 14px; font-weight: 600; }
.tw-x-media { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 2px; margin-top: 10px; overflow: hidden; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
.tw-x-media img { width: 100%; height: 100%; aspect-ratio: var(--ar, 16 / 9); object-fit: cover; }
.tw-x-quote { margin-top: 10px; padding: 10px 12px 11px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule, #cfcfc8); }
.tw-x-quote .tw-x-who { gap: 5px; font-size: 14.5px; }
.tw-x-quote .tw-x-av { width: 20px; height: 20px; }
.tw-x-quote span.tw-x-av { font-size: 10px; box-shadow: inset 0 0 0 1px var(--ink); }
.tw-x-quote .tw-x-text { margin-top: 3px; font-size: 14.5px; }
.tw-x-quote .tw-x-media { margin-top: 8px; border-radius: 10px; }
.tw-x-card { margin-top: 10px; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule, #cfcfc8); }
.tw-x-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.tw-x-card-row + .tw-x-card-row { border-top: 1px solid var(--line); }
.tw-x-card-row > span { color: var(--ink-2); }
.tw-x-card-row > b { font-size: 20px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tw-x-card-row small { display: block; color: var(--ink-3); font-size: 12.5px; }
.tw-x-acts { display: flex; align-items: center; justify-content: space-between; gap: 6px; max-width: 440px; margin-top: 8px; color: var(--ink-3); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tw-x-a { position: relative; display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 2px; border-radius: var(--radius-full); white-space: nowrap; }
.tw-x-a::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.tw-x-a.on { color: var(--ink); font-weight: 800; }
.tw-x-a-reply { --i: var(--xi-reply); }
.tw-x-a-repost { --i: var(--xi-repost); }
.tw-x-a-like { --i: var(--xi-like); }
.tw-x-a-like.on { --i: var(--xi-liked); }
.tw-x-a-views { --i: var(--xi-views); }
.tw-x-a-bookmark { --i: var(--xi-bookmark); }
.tw-x-a-bookmark.on { --i: var(--xi-bookmarked); }
.tw-x-a-share { --i: var(--xi-share); }
@container tw-x (max-width: 380px) {
    .tw-x-acts { gap: 2px; font-size: 12px; }
    .tw-x-a { gap: 3px; padding: 0; }
    .tw-x-a::before { width: 16px; height: 16px; }
}
@container tw-x (max-width: 270px) { .tw-x-acts > :is(.tw-x-a-bookmark, .tw-x-a-share) { display: none; } }
.tw-x-big { align-items: center; padding-top: 14px; }
.tw-x-big > :not(.tw-x-av, .tw-x-main) { grid-column: 1 / -1; }
.tw-x-big > .tw-x-text { margin-top: 12px; font-size: 17px; line-height: 1.45; }
.tw-x-big > .tw-x-quote, .tw-x-big > .tw-x-media, .tw-x-big > .tw-x-card { margin-top: 12px; }
.tw-x-time { margin-top: 12px; color: var(--ink-3); font-size: 14px; }
.tw-x-time b { color: var(--ink); }
.tw-x-counts { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.tw-x-counts b { color: var(--ink); font-variant-numeric: tabular-nums; }
.tw-x-big > .tw-x-acts { max-width: none; margin-top: 10px; padding: 8px 4px 0; border-top: 1px solid var(--line); justify-content: space-around; }
.tw-x-post.tw-x-line { position: relative; }
.tw-x-post.tw-x-line::before { content: ""; position: absolute; left: 35px; top: 58px; bottom: -12px; width: 2px; border-radius: 2px; background: var(--x-rule, #cfcfc8); }
.tw-x > .tw-x-line + .tw-x-post { border-top: 0; }
.tw-x-bar { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 6px 16px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 800; }
.tw-x-bar .tw-xi { width: 20px; height: 20px; }
.tw-x-bar-end { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.tw-x-field { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; height: 38px; padding: 0 14px; border-radius: var(--radius-full); background: var(--grey); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-3); font-size: 15px; font-weight: 500; }
.tw-x-field > span { overflow: hidden; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.tw-x-field .tw-xi { width: 17px; height: 17px; }
.tw-x-tabs { display: flex; overflow: hidden; border-bottom: 1px solid var(--line); }
.tw-x-tabs > span { position: relative; flex: 1 0 auto; padding: 13px 14px 12px; color: var(--ink-3); font-size: 14.5px; font-weight: 700; text-align: center; white-space: nowrap; }
.tw-x-tabs > .on { color: var(--ink); font-weight: 800; }
.tw-x-tabs > .on::after { content: ""; position: absolute; left: 50%; bottom: 0; width: min(56px, 70%); height: 4px; border-radius: 4px; background: var(--ink); transform: translateX(-50%); }
.tw-x-btn { box-sizing: border-box; display: inline-flex; flex: none; align-items: center; justify-content: center; height: 34px; padding: 0 16px; border-radius: var(--radius-full); background: var(--ink); color: var(--paper); font-size: 14.5px; font-weight: 800; line-height: 1; white-space: nowrap; }
.tw-x-btn-line { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--x-rule, #cfcfc8); }
.tw-x-btn-off { opacity: .5; }
.tw-x-menu { width: max-content; min-width: 200px; max-width: 100%; padding: 6px 0; border-radius: 14px; }
.tw-x-menu > span { display: flex; align-items: center; gap: 12px; padding: 10px 18px; font-size: 15px; font-weight: 700; }
.tw-x-menu > span .tw-xi { width: 19px; height: 19px; }
.tw-x-pop { z-index: 2; margin-top: -12px; box-shadow: var(--edge), 0 10px 26px rgba(0, 0, 0, .14); }
.tw-x-ph { color: var(--ink-3); font-size: 18px; font-weight: 500; }
.tw-x-typed { font-size: 17px; }
.tw-x-typed::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; background: var(--ink); vertical-align: -.18em; }
.tw-x-tools { display: flex; align-items: center; gap: 16px; padding: 10px 16px 12px 68px; color: var(--ink); }
.tw-x-tools .tw-xi { width: 19px; height: 19px; }
.tw-x-tools .tw-x-btn { margin-left: auto; }
.tw-x-tools .tw-x-off { opacity: .35; }
.tw-x-banner { height: 110px; background-color: var(--yellow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M0 9 8 3 16 9' fill='none' stroke='%23111111' stroke-opacity='.22' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E"); background-size: 16px 12px; background-position: 0 2px; }
img.tw-x-banner { width: 100%; object-fit: cover; }
.tw-x-pro-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -42px; padding: 0 16px; }
.tw-x-pro-top .tw-x-av { width: 80px; height: 80px; border: 4px solid var(--paper); background: var(--paper); }
.tw-x-pro-top span.tw-x-av { font-size: 28px; box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px var(--paper); border: 0; }
.tw-x-pro { padding: 10px 16px 0; }
.tw-x-pro .tw-x-who { font-size: 19px; }
.tw-x-pro .tw-x-who > span { font-size: 15px; }
.tw-x-bio { margin-top: 10px; }
.tw-x-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; color: var(--ink-3); font-size: 14px; }
.tw-x-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.tw-x-meta .tw-xi { width: 16px; height: 16px; }
.tw-x-pro .tw-x-counts { margin: 10px 0 4px; padding: 0; border: 0; }
.tw-x-person { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 12px 16px; }
.tw-x-person > .tw-x-btn { align-self: center; height: 32px; padding: 0 14px; font-size: 14px; }
.tw-x-person .tw-x-bio { margin-top: 3px; font-size: 14px; }
.tw-x-follows { margin-left: 4px; padding: 1px 5px; border-radius: 4px; background: var(--grey); color: var(--ink-3); font-size: 11.5px; font-weight: 700; }
.tw-x-more-row { display: block; padding: 13px 16px; color: var(--link); font-size: 14.5px; font-weight: 600; }
.tw-x-notif { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; padding: 12px 16px; }
.tw-x-notif > .tw-xi { justify-self: end; width: 26px; height: 26px; color: var(--ink); }
.tw-x-faces { display: flex; gap: 6px; margin-bottom: 8px; }
.tw-x-faces .tw-x-av { width: 32px; height: 32px; }
.tw-x-notif .tw-x-text { color: var(--ink-3); }
.tw-x-rows { display: grid; }
.tw-x-rows-h { padding: 14px 16px 6px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.tw-x-rows-sub { padding: 0 16px 10px; color: var(--ink-3); font-size: 13.5px; }
.tw-x-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 14px; padding: 12px 16px; }
.tw-x-row > .tw-xi:first-child { width: 20px; height: 20px; color: var(--ink-2); }
.tw-x-row > :not(.tw-xi):first-child { grid-column: 1 / 3; }
.tw-x-row b { display: block; font-size: 15px; font-weight: 700; }
.tw-x-row small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.35; }
.tw-x-row > .tw-xi:last-child { width: 16px; height: 16px; color: var(--ink-3); }
.tw-x-row-stop b { color: var(--stop); }
.tw-x-field-box { margin: 10px 16px; padding: 7px 12px 8px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--x-rule, #cfcfc8); }
.tw-x-field-box small { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 12.5px; }
.tw-x-field-box span { display: block; font-size: 16px; }
.tw-x-field-box.on { box-shadow: inset 0 0 0 2px var(--ink); }
.tw-x-field-box.on small { color: var(--ink); }
.tw-x-hint { padding: 0 16px 10px; color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.tw-x-hint.ok { color: var(--done); }
.tw-x-hint.bad { color: var(--stop); }
.tw-x-switch { position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--radius-full); background: var(--x-rule, #cfcfc8); }
.tw-x-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.tw-x-switch.on { background: var(--ink); }
.tw-x-switch.on::after { left: 19px; }
.tw-x-check { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--ink-3); }
.tw-x-check.on { background: var(--ink); box-shadow: none; }
.tw-x-check.on::after { content: ""; width: 10px; height: 5px; margin-top: -3px; border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper); transform: rotate(-45deg); }
.tw-x-foot { padding: 12px 16px 16px; }
.tw-x-foot .tw-x-btn { width: 100%; }
.tw-x-btn-stop { background: var(--stop); color: var(--paper); }
.tw-x-dialog { max-width: 340px; padding: 22px 22px 18px; border-radius: 16px; box-shadow: var(--edge), 0 10px 30px rgba(0, 0, 0, .16); }
.tw-x-dialog > b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.tw-x-dialog > p { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
.tw-x-dialog > .tw-x-btns { display: grid; gap: 10px; margin-top: 18px; }
.tw-x-dialog .tw-x-btn { width: 100%; height: 40px; }
.tw-x-notice { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; margin: 10px 16px; padding: 10px 12px; border-radius: 10px; background: var(--grey); font-size: 13.5px; line-height: 1.4; }
.tw-x-notice > .tw-xi { width: 18px; height: 18px; margin-top: 1px; }
.tw-x-notice b { display: block; font-size: 14px; }
.tw-x-chat { display: grid; gap: 6px; padding: 14px 16px; }
.tw-x-msg { max-width: 78%; padding: 8px 12px; border-radius: 18px 18px 18px 4px; background: var(--grey); font-size: 14.5px; line-height: 1.4; justify-self: start; }
.tw-x-msg.me { border-radius: 18px 18px 4px 18px; background: var(--ink); color: var(--paper); justify-self: end; }
.tw-x-msg-time { color: var(--ink-3); font-size: 12px; justify-self: end; }
.tw-x-msg-time.them { justify-self: start; }
.tw-x-compose-bar { display: flex; align-items: center; gap: 12px; margin: 4px 12px 12px; padding: 8px 14px; border-radius: var(--radius-full); background: var(--grey); color: var(--ink-3); font-size: 15px; }
.tw-x-compose-bar .tw-xi { width: 18px; height: 18px; color: var(--ink); }
.tw-x-compose-bar span { flex: 1; }
.tw-x .tw-x-hl { position: relative; z-index: 1; border-radius: var(--radius-md); box-shadow: 0 0 0 3px var(--yellow), 0 0 0 4.5px var(--ink); }
.tw-x-quote.tw-x-hl, .tw-x-card.tw-x-hl, .tw-x-media.tw-x-hl { border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule, #cfcfc8), 0 0 0 3px var(--yellow), 0 0 0 4.5px var(--ink); }
.tw-x-a.tw-x-hl, .tw-x-btn.tw-x-hl { border-radius: var(--radius-full); }
.tw-x-a.tw-x-hl { padding: 0 6px; background: var(--yellow); color: var(--ink); box-shadow: 0 0 0 1.5px var(--ink); }
.tw-x-tabs > .tw-x-hl, .tw-x-menu > .tw-x-hl { border-radius: 0; background: var(--yellow); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tw-x-tabs > .tw-x-hl { font-weight: 800; }
.tw-x-mark { padding: 0 2px; border-radius: 3px; background: var(--yellow); color: var(--ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tw-x [data-n] { position: relative; }
.tw-x [data-n]::after { content: attr(data-n); position: absolute; z-index: 3; top: -13px; right: -13px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--ink); color: var(--yellow); font-size: 13px; font-weight: 800; font-style: normal; line-height: 1; letter-spacing: 0; box-shadow: 0 0 0 2px var(--paper); }
.tw-x .tw-x-a[data-n]::after { top: -11px; right: -11px; width: 20px; height: 20px; font-size: 11.5px; }   
.tw-x .tw-x-mark[data-n]::after { position: static; display: inline-flex; width: 19px; height: 19px; margin-left: 5px; font-size: 11.5px; vertical-align: 1px; box-shadow: none; }   
.tw-x .tw-x-tabs > [data-n]::after { top: 50%; right: 10px; bottom: auto; left: auto; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--ink); transform: translateY(-50%); }
.tw-x-dim { opacity: .38; }
.tw-prose .tw-x-key { display: grid; gap: 6px; margin: 2px auto 0; padding: 0; max-width: 500px; list-style: none; color: var(--ink-2); font-size: 14.5px; font-weight: 600; line-height: 1.4; text-align: left; counter-reset: tw-x-key; }
.tw-prose .tw-x-key > li { position: relative; margin: 0; padding-left: 34px; counter-increment: tw-x-key; }
.tw-prose .tw-x-key > li::before { content: counter(tw-x-key); position: absolute; left: 0; top: -2px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--ink); color: var(--yellow); font-size: 13px; font-weight: 800; }
.tw-x { --x-rule: #cfcfc8; --x-like: var(--ink); --x-repost: var(--ink); --x-mark: var(--ink); --x-badge: var(--ink); --x-gold: #c99a06; --x-grey: #829aab; --x-blue: var(--ink); --x-pen: #111111; }
.tw-x-th-x .tw-x, .tw-x.tw-x-th-x {
    --ink: #0f1419; --ink-2: #0f1419; --ink-3: #536471; --line: #eff3f4; --paper: #ffffff; --grey: #eff3f4; --link: #1d9bf0;
    --x-rule: #cfd9de; --x-like: #f91880; --x-repost: #00ba7c; --x-mark: #1d9bf0; --x-badge: #1d9bf0; --x-gold: #e2b719; --x-grey: #829aab; --x-blue: #1d9bf0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400;
}
.tw-x-th-dark .tw-x, .tw-x.tw-x-th-dark {
    --ink: #e7e9ea; --ink-2: #e7e9ea; --ink-3: #71767b; --line: #2f3336; --paper: #000000; --grey: #202327; --link: #1d9bf0;
    --x-rule: #536471; --x-like: #f91880; --x-repost: #00ba7c; --x-mark: #1d9bf0; --x-badge: #1d9bf0; --x-gold: #e2b719; --x-grey: #829aab; --x-blue: #1d9bf0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-weight: 400;
}
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-text, :is(.tw-x-th-x, .tw-x-th-dark) .tw-x-who > span { font-weight: 400; }
:is(.tw-x-th-x, .tw-x-th-dark) :is(.tw-x-who b, .tw-x-btn, .tw-x-tabs > .on) { font-weight: 700; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-acts { font-weight: 400; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-a.on { font-weight: 400; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-tabs > .on::after { background: var(--x-blue); }
.tw-x-th-dark .tw-x, .tw-x.tw-x-th-dark { box-shadow: 0 0 0 1.5px #111111; }
:is(.tw-x-th-x, .tw-x-th-dark) [data-n]::after, :is(.tw-x-th-x, .tw-x-th-dark) .tw-x-key > li::before { background: var(--x-pen); color: var(--yellow); }
.tw-x-th-dark .tw-x-hl { box-shadow: 0 0 0 3px var(--yellow), 0 0 0 4.5px #ffffff !important; }
.tw-x-th-dark .tw-x-a.tw-x-hl, .tw-x-th-dark .tw-x-tabs > .tw-x-hl, .tw-x-th-dark .tw-x-menu > .tw-x-hl { color: #111111; }
.tw-x-a-like.on { color: var(--x-like); }
.tw-x-a-repost.on { color: var(--x-repost); }
.tw-x-a-bookmark.on { color: var(--x-blue); }
.tw-x .tw-xi-badge { color: var(--x-badge); }
.tw-x .tw-x-badge-gold { color: var(--x-gold); }
.tw-x .tw-x-badge-grey { color: var(--x-grey); }
.tw-x-aff { display: inline-block; flex: none; width: 16px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.tw-x mark { padding: 0 2px; border-radius: 3px; background: var(--yellow); color: #111111; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.tw-x-at { color: var(--link); font-weight: 600; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-at { color: var(--x-blue); font-weight: 400; }
.tw-x-tag { position: absolute; z-index: 4; left: 50%; bottom: calc(100% + 9px); padding: 4px 9px 5px; border-radius: 7px; background: #111111; color: var(--yellow); font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; line-height: 1.2; letter-spacing: 0; white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.tw-x-tag::after { content: ""; position: absolute; left: 50%; top: 100%; border: 5px solid transparent; border-top-color: #111111; transform: translateX(-50%); }
.tw-x-tag-below > .tw-x-tag { top: calc(100% + 9px); bottom: auto; }
.tw-x-tag-below > .tw-x-tag::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: #111111; }
:where(.tw-x [data-xp]) { position: relative; }                       
.tw-x-err { display: inline-block; padding: 4px 8px; border-radius: 4px; background: #ffe1db; color: #a1260f; font: 600 12.5px/1.4 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.tw-x .tw-x-av.tw-x-av-org, .tw-prose .tw-x .tw-x-av.tw-x-av-org { border-radius: 22%; }
span.tw-x-av-you { background: var(--yellow-tint); box-shadow: inset 0 0 0 1.5px #b9b9b0; }
span.tw-x-av-you::after { content: ""; width: 46%; height: 46%; background: #8d8d85; -webkit-mask: var(--xi-user) center / contain no-repeat; mask: var(--xi-user) center / contain no-repeat; }
span.tw-x-av-default { overflow: hidden; align-items: flex-end; background: #cfd9de; box-shadow: none; }
span.tw-x-av-default::after { content: ""; width: 100%; height: 86%; background: radial-gradient(circle at 50% 30%, #fff 0 19%, transparent 19.5%), radial-gradient(ellipse 42% 34% at 50% 100%, #fff 0 99%, transparent 100%); }
span.tw-x-av-mint { background: var(--done-soft); }
span.tw-x-av-coral { background: var(--stop-soft); }
span.tw-x-av-grey { background: var(--grey); }
span.tw-x-av-ink { background: #111111; color: var(--yellow); box-shadow: none; }
.tw-x-th-dark span.tw-x-av { color: #111111; }
.tw-x-media.tw-x-m2, .tw-x-media.tw-x-m3, .tw-x-media.tw-x-m4 { aspect-ratio: 16 / 9; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.tw-x-m2 > * { grid-row: 1 / 3; }
.tw-x-m3 > :first-child { grid-row: 1 / 3; }
.tw-x-media.tw-x-m2 img, .tw-x-media.tw-x-m3 img, .tw-x-media.tw-x-m4 img { aspect-ratio: auto; }
.tw-x-media > * { position: relative; min-width: 0; min-height: 0; }
.tw-x-media > .tw-x-ph-img { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: var(--ar, 16 / 9); padding: 10px; background: var(--grey); background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 12px 12px; color: var(--ink-3); font-size: 13px; font-weight: 700; text-align: center; }
.tw-x-m2 > .tw-x-ph-img, .tw-x-m3 > .tw-x-ph-img, .tw-x-m4 > .tw-x-ph-img { aspect-ratio: auto; }
.tw-x-ph-img.tw-x-ph-yellow { background-color: var(--yellow-tint); }
.tw-x-ph-img.tw-x-ph-mint { background-color: var(--done-soft); }
.tw-x-ph-img.tw-x-ph-coral { background-color: var(--stop-soft); }
.tw-x-ph-img.tw-x-ph-ink { background: #111111; color: var(--yellow); }
.tw-x-ph-img > .tw-xi { width: 26px; height: 26px; }
.tw-x-badge-alt, .tw-x-badge-gif, .tw-x-dur { position: absolute; left: 8px; bottom: 8px; z-index: 1; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .77); color: #fff; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: .02em; }
.tw-x-badge-alt + .tw-x-badge-gif { left: 42px; }
.tw-x-video { position: relative; margin-top: 10px; overflow: hidden; border-radius: 14px; background: #111111; box-shadow: 0 0 0 1px var(--line); }
.tw-x-video > img, .tw-x-video > .tw-x-ph-img { width: 100%; aspect-ratio: var(--ar, 16 / 9); object-fit: cover; }
.tw-x-video > .tw-x-ph-img { display: block; background: #2a2a28; background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1.4px); background-size: 12px 12px; }
.tw-x-video::after { content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; border-radius: var(--radius-full); background: var(--x-blue, #111) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='white'/%3E%3C/svg%3E") 56% 50% / 26px no-repeat; box-shadow: 0 0 0 3px #fff; transform: translate(-50%, -50%); }
.tw-x-video.tw-x-gif::after { content: none; }
.tw-x-views-line { margin-top: 6px; color: var(--ink-3); font-size: 13px; }
.tw-x-link { display: block; margin-top: 10px; }
.tw-x-link-box { position: relative; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule); }
.tw-x-link-box > img, .tw-x-link-box > .tw-x-ph-img { display: flex; width: 100%; aspect-ratio: 1.91 / 1; object-fit: cover; }
.tw-x-link-box > .tw-x-ph-img { align-items: center; justify-content: center; background: var(--grey); background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 12px 12px; color: var(--ink-3); }
.tw-x-link-title { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); overflow: hidden; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .77); color: #fff; font-size: 13px; line-height: 18px; white-space: nowrap; text-overflow: ellipsis; }
.tw-x-link-from { margin-top: 4px; color: var(--ink-3); font-size: 13px; }
.tw-x-link-sm .tw-x-link-box { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: center; }
.tw-x-link-sm .tw-x-link-box > img, .tw-x-link-sm .tw-x-link-box > .tw-x-ph-img { height: 100%; aspect-ratio: 1; border-right: 1px solid var(--x-rule); }
.tw-x-link-sm .tw-x-link-words { padding: 10px 12px; font-size: 14px; line-height: 1.35; }
.tw-x-link-words small { display: block; color: var(--ink-3); font-size: 13px; }
.tw-x-poll { display: grid; gap: 8px; margin-top: 10px; }
.tw-x-choice { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 32px; padding: 0 12px; overflow: hidden; border-radius: 6px; font-size: 15px; font-weight: 600; z-index: 0; }
.tw-x-choice::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--w, 0%); border-radius: 6px; background: var(--x-poll, #e7e7e1); }
.tw-x-choice.on::before { background: var(--x-poll-on, var(--yellow)); }
.tw-x-choice.on { font-weight: 800; }
.tw-x-choice > span:last-child { font-variant-numeric: tabular-nums; }
.tw-x-choice .tw-xi { width: 15px; height: 15px; margin-left: 6px; vertical-align: -2px; }
.tw-x-poll-open .tw-x-choice { justify-content: center; border-radius: var(--radius-full); color: var(--link); box-shadow: inset 0 0 0 1.5px var(--link); }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-poll-open .tw-x-choice { color: var(--x-blue); box-shadow: inset 0 0 0 1px var(--x-blue); }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-choice { --x-poll: #cfd9de; --x-poll-on: #8ecdf8; }
.tw-x-th-dark .tw-x-choice { --x-poll: #333639; --x-poll-on: #1a8cd8; }
.tw-x-poll-foot { color: var(--ink-3); font-size: 14px; }
.tw-x-note { margin-top: 10px; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule); font-size: 14.5px; }
.tw-x-note-h { display: flex; align-items: center; gap: 8px; padding: 10px 12px 2px; font-weight: 800; }
.tw-x-note-h .tw-xi { width: 18px; height: 18px; }
.tw-x-note-t { padding: 4px 12px 10px; }
.tw-x-note-src { display: block; margin-top: 6px; color: var(--link); font-weight: 600; }
.tw-x-note-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13.5px; }
.tw-x-note-foot .tw-x-btn { height: 28px; padding: 0 12px; font-size: 13px; }
.tw-x-who > .tw-x-end { display: flex; flex: none; align-items: center; gap: 12px; margin-left: auto; overflow: visible; color: var(--ink-3); }
.tw-x-who > .tw-x-end .tw-xi-more { margin-left: 0; }
.tw-x-who .tw-x-ad { color: var(--ink-3); font-size: 13px; }
.tw-x-who .tw-xi-edit { width: 14px; height: 14px; color: var(--ink-3); }
.tw-x-who .tw-xi-grok { width: 17px; height: 17px; }
.tw-x-tagged { display: flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--ink-3); font-size: 13.5px; }
.tw-x-tagged .tw-xi { width: 15px; height: 15px; }
.tw-x-sub { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; color: var(--ink-3); font-size: 13px; }
.tw-x-edited { margin-top: 10px; color: var(--ink-3); font-size: 14px; }
.tw-x-edited b { color: var(--link); font-weight: 600; }
.tw-x-boost { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 9px 12px; border-radius: 12px; background: var(--grey); font-size: 14px; }
.tw-x-boost .tw-x-btn { height: 30px; padding: 0 14px; font-size: 13.5px; }
.tw-x-ib { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1.5px var(--x-rule); color: var(--ink); }
.tw-x-ib .tw-xi { width: 18px; height: 18px; }
.tw-x-reply-box { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.tw-x-reply-box .tw-x-ph { font-size: 17px; }
.tw-x-reply-box .tw-x-btn { height: 34px; }
.tw-x-showmore { display: block; padding: 14px 16px; border-top: 1px solid var(--line); color: var(--link); font-size: 14.5px; font-weight: 600; text-align: center; }
.tw-x-showmore.tw-x-spam { color: var(--ink-3); text-align: left; }
.tw-x-bar-t { display: grid; line-height: 1.2; }
.tw-x-bar-t small { color: var(--ink-3); font-size: 13px; font-weight: 500; }
.tw-x-bar-home { justify-content: space-between; }
.tw-x-bar-home .tw-x-av { width: 32px; height: 32px; font-size: 12px; }
.tw-x-logo { display: inline-block; width: 24px; height: 24px; background: var(--ink); -webkit-mask: var(--xi-xlogo) center / contain no-repeat; mask: var(--xi-xlogo) center / contain no-repeat; }
.tw-x-bar .tw-x-btn { height: 32px; padding: 0 16px; font-size: 14px; }
.tw-x-tabs > [data-n] { padding-right: 38px; }
.tw-x-tabs-scroll { overflow-x: auto; scrollbar-width: none; }
.tw-x-pill-wrap { display: flex; justify-content: center; padding: 10px 0 2px; }
.tw-x-pill { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 10px; border-radius: var(--radius-full); background: var(--x-blue); color: #fff; font-size: 14px; font-weight: 700; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.tw-x .tw-x-pill { background: #111111; }
.tw-x-th-x .tw-x-pill, .tw-x-th-dark .tw-x-pill { background: #1d9bf0; }
.tw-x-pill .tw-xi { width: 16px; height: 16px; }
.tw-x-pill .tw-x-av { width: 24px; height: 24px; margin-left: -8px; box-shadow: 0 0 0 2px currentColor; font-size: 9px; }
.tw-x-pill .tw-x-av:first-of-type { margin-left: 0; }
.tw-x-pill .tw-x-av { color: #111111; }
.tw-x.tw-x-phone { display: flex; flex-direction: column; max-width: 340px; padding: 0; overflow: hidden; border-radius: 34px; box-shadow: 0 0 0 1.5px #111111, 0 0 0 6px var(--paper), 0 0 0 7.5px #111111; }
.tw-x-status { display: flex; flex: none; align-items: center; justify-content: space-between; height: 38px; padding: 4px 24px 0 28px; font-size: 14px; font-weight: 700; }
.tw-x-status i { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.tw-x-status i b { width: 3px; border-radius: 1px; background: currentColor; }
.tw-x-status i b:nth-child(1) { height: 4px; } .tw-x-status i b:nth-child(2) { height: 6px; } .tw-x-status i b:nth-child(3) { height: 8px; } .tw-x-status i b:nth-child(4) { height: 11px; }
.tw-x-status u { position: relative; display: inline-block; width: 22px; height: 11px; margin-left: 6px; border-radius: 3px; box-shadow: 0 0 0 1.5px currentColor; text-decoration: none; }
.tw-x-status u::after { content: ""; position: absolute; inset: 2px 6px 2px 2px; border-radius: 1px; background: currentColor; }
.tw-x-screen-box { position: relative; flex: 1; min-height: 0; }
.tw-x-screen { position: relative; min-height: 0; overflow: hidden; }
.tw-x-screen.tw-x-cut { max-height: var(--h, 520px); -webkit-mask: linear-gradient(#000 calc(100% - 60px), transparent); mask: linear-gradient(#000 calc(100% - 60px), transparent); }
.tw-x-screen > .tw-x-post:first-child, .tw-x-screen > .tw-x-notif:first-child { border-top: 0; }
.tw-x-screen > :is(.tw-x-post, .tw-x-person, .tw-x-notif, .tw-x-trend, .tw-x-convo, .tw-x-listrow) + :is(.tw-x-post, .tw-x-person, .tw-x-notif, .tw-x-trend, .tw-x-convo, .tw-x-listrow) { border-top: 1px solid var(--line); }
.tw-x-fab { position: absolute; right: 16px; bottom: 74px; z-index: 3; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: var(--radius-full); background: var(--x-blue); color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .25); }
.tw-x .tw-x-fab { background: #111111; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-fab { background: #1d9bf0; }
.tw-x-fab .tw-xi { width: 24px; height: 24px; }
.tw-x-home-ind { flex: none; width: 120px; height: 4px; margin: 2px auto 8px; border-radius: 4px; background: var(--ink); }
.tw-x-nav { display: flex; flex: none; justify-content: space-around; align-items: center; height: 52px; border-top: 1px solid var(--line); background: var(--paper); }
.tw-x-nav > span { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); color: var(--ink); }
.tw-x-nav .tw-xi { width: 24px; height: 24px; }
.tw-x-nav > span:not(.on) .tw-xi { opacity: .82; }
.tw-x-nav > span.on .tw-xi { --sw: 3; filter: drop-shadow(0 0 .4px currentColor) drop-shadow(0 0 .4px currentColor); }
.tw-x-count { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--x-blue); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--paper); }
.tw-x .tw-x-count { background: #111111; color: var(--yellow); }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-count { background: #1d9bf0; color: #fff; }
.tw-x-nav > span.tw-x-hl { box-shadow: 0 0 0 3px var(--yellow), 0 0 0 4.5px #111111; }
.tw-x.tw-x-web { max-width: 980px; overflow: hidden; container: tw-x-web / inline-size; }                 
.tw-x-web-in { display: grid; grid-template-columns: auto minmax(0, 1fr) 250px; }
.tw-x-rail { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-right: 1px solid var(--line); }
.tw-x-rail > span { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: var(--radius-full); font-size: 17px; font-weight: 500; white-space: nowrap; }
.tw-x-rail > span.on { font-weight: 800; }
.tw-x-rail .tw-xi { width: 23px; height: 23px; }
.tw-x-rail > span { position: relative; }
.tw-x-rail .tw-x-count { top: 1px; right: auto; left: 26px; }
.tw-x-side .tw-x-person { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 10px 14px; }
.tw-x-side .tw-x-person .tw-x-av { width: 36px; height: 36px; }
.tw-x-side .tw-x-person > .tw-x-btn { height: 30px; padding: 0 12px; font-size: 13.5px; }
.tw-x-side .tw-x-person .tw-x-who { flex-wrap: wrap; }
.tw-x-side .tw-x-person .tw-x-who > span:first-of-type { flex-basis: 100%; }
.tw-x-rail > .tw-x-logo-row { padding: 8px 12px 10px; }
.tw-x-rail > .tw-x-btn { justify-content: center; height: 44px; margin-top: 10px; font-size: 16px; }
.tw-x-col { min-width: 0; border-right: 1px solid var(--line); container: tw-x / inline-size; }
.tw-x-col > :is(.tw-x-post, .tw-x-person, .tw-x-notif) + :is(.tw-x-post, .tw-x-person, .tw-x-notif) { border-top: 1px solid var(--line); }
.tw-x-side { display: grid; align-content: start; gap: 14px; padding: 10px 14px; }
.tw-x-side > .tw-x-field { flex: none; }
.tw-x-box { overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); }
.tw-x-box-h { padding: 12px 14px 4px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.tw-x-box > p { padding: 0 14px 10px; color: var(--ink-2); font-size: 14px; }
.tw-x-box > .tw-x-btn { margin: 0 14px 14px; }
@container tw-x-web (max-width: 860px) { .tw-x-web-in { grid-template-columns: auto minmax(0, 1fr); } .tw-x-web .tw-x-side { display: none; } .tw-x-col { border-right: 0; } }
@container tw-x-web (max-width: 640px) { .tw-x-rail > span > :not(.tw-xi, .tw-x-logo, .tw-x-av) { display: none; } .tw-x-rail > .tw-x-btn { width: 44px; padding: 0; font-size: 0; } .tw-x-rail > .tw-x-btn::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--xi-compose) center / contain no-repeat; mask: var(--xi-compose) center / contain no-repeat; } }
.tw-x-pro-btns { display: flex; align-items: center; gap: 8px; }
.tw-x-known { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink-3); font-size: 13.5px; line-height: 1.35; }
.tw-x-known .tw-x-faces { flex: none; margin: 0; gap: 0; }
.tw-x-known .tw-x-faces .tw-x-av { width: 20px; height: 20px; margin-left: -6px; box-shadow: 0 0 0 2px var(--paper); font-size: 8px; }
.tw-x-known .tw-x-faces .tw-x-av:first-child { margin-left: 0; }
.tw-x-pro-top .tw-x-av.tw-x-av-org { border-radius: 16px; }
.tw-x-who .tw-x-follows { flex: none; white-space: nowrap; }
.tw-x-who-2 .tw-x-follows { margin-left: 0; }
@container tw-x (max-width: 360px) { .tw-x-person .tw-x-who { flex-wrap: wrap; row-gap: 2px; } .tw-x-person .tw-x-who > span:first-of-type { flex-basis: auto; } }
.tw-x-cat { color: var(--ink-3); font-size: 14px; }
.tw-x.tw-x-hover { max-width: 300px; padding: 14px 16px 16px; border-radius: 16px; box-shadow: var(--edge), 0 10px 30px rgba(0, 0, 0, .16); }
.tw-x-hover-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tw-x-hover-top .tw-x-av { width: 64px; height: 64px; font-size: 22px; }
.tw-x-hover .tw-x-bio { margin-top: 8px; font-size: 14.5px; }
.tw-x-hover .tw-x-counts { margin: 10px 0 0; padding: 0; border: 0; }
.tw-x-notif > .tw-xi-liked { color: var(--x-like); }
.tw-x-notif > .tw-xi-repost { color: var(--x-repost); }
.tw-x-notif > .tw-xi-user, .tw-x-notif > .tw-xi-follow { color: var(--x-blue); }
.tw-x-notif > .tw-xi-bell, .tw-x-notif > .tw-xi-star { color: var(--x-blue); }
.tw-x-notif > .tw-xi-xlogo { color: var(--ink); }
.tw-x-notif .tw-x-faces .tw-x-av { font-size: 12px; }
.tw-x-notif-t { color: var(--ink); }
.tw-x-audience { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; padding: 0 0 10px; border-bottom: 1px solid var(--line); color: var(--link); font-size: 14px; font-weight: 700; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-audience { color: var(--x-blue); }
.tw-x-audience .tw-xi { width: 16px; height: 16px; }
.tw-x-ring { --p: 0; flex: none; width: 22px; height: 22px; border-radius: var(--radius-full); background: conic-gradient(var(--x-ring, var(--ink)) calc(var(--p) * 1%), var(--line) 0); -webkit-mask: radial-gradient(circle, transparent 7px, #000 7.5px); mask: radial-gradient(circle, transparent 7px, #000 7.5px); }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-ring { --x-ring: #1d9bf0; }
.tw-x-ring.tw-x-ring-near { --x-ring: #ffd400; }
.tw-x-ring.tw-x-ring-over { --x-ring: #f4212e; }
.tw-x-tools > .tw-x-ring { margin-left: auto; }
.tw-x-tools > .tw-x-ring + .tw-x-sep { width: 1px; height: 24px; background: var(--line); }
.tw-x-tools > .tw-x-ring ~ .tw-x-btn { margin-left: 0; }
.tw-x-tools .tw-x-add { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1.5px var(--x-rule); }
.tw-x-tools .tw-x-add .tw-xi { width: 14px; height: 14px; }
.tw-x-typed:empty::after { margin-left: 0; }
.tw-x-typed.tw-x-still::after { content: none; }
.tw-x-compose-to { margin: 0 0 4px; color: var(--ink-3); font-size: 14px; }
.tw-x-compose-to b { color: var(--link); font-weight: 600; }
.tw-x-menu > .tw-x-stop { color: var(--stop); }
.tw-x-th-x .tw-x-menu > .tw-x-stop, .tw-x-th-dark .tw-x-menu > .tw-x-stop, .tw-x-menu.tw-x-th-x > .tw-x-stop, .tw-x-menu.tw-x-th-dark > .tw-x-stop { color: #f4212e; }
.tw-x-menu > span > .tw-x-tick { width: 18px; height: 18px; margin-left: auto; color: var(--x-blue); }
.tw-x-menu-h { padding: 8px 18px 4px; font-size: 17px; font-weight: 800; }
.tw-x-menu-sub { padding: 0 18px 8px; color: var(--ink-3); font-size: 14px; }
.tw-x.tw-x-sheet { max-width: 380px; padding: 8px 0 14px; border-radius: 22px 22px 0 0; box-shadow: var(--edge), 0 -6px 24px rgba(0, 0, 0, .12); }
.tw-x-sheet::before { content: ""; display: block; width: 36px; height: 4px; margin: 0 auto 8px; border-radius: 4px; background: var(--x-rule); }
.tw-x-sheet > span { display: flex; align-items: center; gap: 14px; padding: 12px 20px; font-size: 16px; font-weight: 700; }
.tw-x-sheet > span .tw-xi { width: 21px; height: 21px; }
.tw-x-sheet > .tw-x-btn { display: flex; width: calc(100% - 40px); height: 44px; margin: 10px 20px 0; }
.tw-x.tw-x-sheet > .tw-x-btn { border-radius: var(--radius-full); }
.tw-x-sheet > .tw-x-hl { border-radius: 0; background: var(--yellow); color: #111111; box-shadow: inset 0 0 0 1.5px #111111; }
.tw-x-chat-top { display: grid; justify-items: center; gap: 2px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line); text-align: center; }
.tw-x-chat-top .tw-x-av { width: 56px; height: 56px; margin-bottom: 4px; font-size: 20px; }
.tw-x-chat-top small { color: var(--ink-3); font-size: 13.5px; }
.tw-x-msg > .tw-x-quote { margin: 4px 0 2px; background: var(--paper); color: var(--ink); }
.tw-x-msg.me > .tw-x-quote { box-shadow: none; }
.tw-x-msg-read { color: var(--ink-3); font-size: 12px; justify-self: end; }
.tw-x-convo { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 12px 16px; }
.tw-x-convo .tw-x-av { width: 48px; height: 48px; }
.tw-x-convo-t { overflow: hidden; color: var(--ink-3); font-size: 14.5px; white-space: nowrap; text-overflow: ellipsis; }
.tw-x-convo.on .tw-x-convo-t { color: var(--ink); font-weight: 700; }
.tw-x-convo.on .tw-x-who::after { content: ""; flex: none; width: 9px; height: 9px; margin-left: auto; border-radius: var(--radius-full); background: var(--x-blue); }
.tw-x .tw-x-convo.on .tw-x-who::after { background: #111111; }
.tw-x-trends-h { padding: 12px 16px 6px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.tw-x-trend { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 16px; }
.tw-x-trend small { display: block; color: var(--ink-3); font-size: 13px; }
.tw-x-trend b { display: block; font-size: 15px; font-weight: 800; }
.tw-x-trend > .tw-xi { width: 18px; height: 18px; color: var(--ink-3); }
.tw-x-trend-faces { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: var(--ink-3); font-size: 13px; }
.tw-x-trend-faces .tw-x-av { width: 18px; height: 18px; margin-left: -6px; box-shadow: 0 0 0 1.5px var(--paper); }
.tw-x-trend-faces .tw-x-av:first-child { margin-left: 0; }
.tw-x-listrow { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 12px 16px; }
.tw-x-listrow > .tw-x-list-img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; background: var(--yellow); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12'%3E%3Cpath d='M0 9 8 3 16 9' fill='none' stroke='%23111111' stroke-opacity='.22' stroke-width='1.5' stroke-linecap='square'/%3E%3C/svg%3E"); background-size: 16px 12px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.tw-x-listrow b { display: flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 800; }
.tw-x-listrow b .tw-xi { width: 14px; height: 14px; }
.tw-x-listrow small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 5px; color: var(--ink-3); font-size: 13.5px; }
.tw-x-listrow small .tw-x-av { width: 16px; height: 16px; font-size: 7px; }
.tw-x-listrow > .tw-xi { width: 20px; height: 20px; color: var(--x-blue); }
.tw-x-listrow > .tw-x-btn { height: 32px; padding: 0 14px; font-size: 14px; }
.tw-x-comm-banner { height: 120px; background: var(--grey); background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 12px 12px; }
img.tw-x-comm-banner { width: 100%; object-fit: cover; }
.tw-x-comm { padding: 12px 16px 14px; }
.tw-x-comm-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tw-x-comm-h b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.tw-x-comm-members { display: flex; align-items: center; gap: 8px; margin-top: 8px; color: var(--ink-3); font-size: 14px; }
.tw-x-comm-members b { color: var(--ink); }
.tw-x-folders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px 16px; }
.tw-x-folder { display: grid; align-content: end; gap: 2px; min-height: 84px; padding: 10px 12px; border-radius: 14px; background: var(--grey); font-size: 15px; font-weight: 800; }
.tw-x-folder small { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.tw-x-folder.on { background: var(--yellow); color: #111111; }
.tw-x-folder.on small { color: #3a3a38; }
.tw-x-th-x .tw-x-folder.on, .tw-x-th-dark .tw-x-folder.on { background: #1d9bf0; color: #fff; }
.tw-x-stats { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 1px; background: var(--line); }
.tw-x-stat { display: grid; gap: 2px; padding: 12px 16px; background: var(--paper); }
.tw-x-stat small { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.tw-x-stat b { font-size: 22px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tw-x-stat i { color: var(--done); font-size: 12.5px; font-style: normal; font-weight: 700; }
.tw-x-stat i.down { color: var(--stop); }
.tw-x-spark { display: block; width: calc(100% - 32px); height: 46px; margin: 8px 16px 12px; }
.tw-x-spark polyline { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.tw-x-spark polygon { fill: var(--yellow); opacity: .45; }
.tw-x-panel { padding: 18px 20px 20px; }
.tw-x-panel > .tw-xi { width: 34px; height: 34px; margin-bottom: 8px; }
.tw-x-panel > b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.tw-x-panel > p { margin-top: 8px; color: var(--ink-2); font-size: 14.5px; }
.tw-x-panel > .tw-x-btn { width: 100%; height: 40px; margin-top: 16px; }
.tw-x-perms { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.tw-x-perms > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; font-size: 14px; line-height: 1.4; }
.tw-x-perms > li > .tw-xi { width: 18px; height: 18px; margin-top: 1px; }
.tw-x-perms > li b { display: block; font-size: 14.5px; }
.tw-x-perms > li.no { color: var(--ink-3); }
.tw-x-perms-h { margin-top: 16px; font-size: 15px; font-weight: 800; }
.tw-x-app { display: flex; align-items: center; gap: 12px; }
.tw-x-app > .tw-x-av { width: 48px; height: 48px; border-radius: 12px; }
.tw-x-app small { display: block; color: var(--ink-3); font-size: 13.5px; }
.tw-x-qr { display: grid; justify-items: center; gap: 10px; padding: 22px 20px 20px; text-align: center; }
.tw-x-qr-code { position: relative; width: 168px; height: 168px; padding: 12px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px #111111; }
.tw-x-qr-code svg { display: block; width: 100%; height: 100%; }
.tw-x-qr-code .tw-x-av { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; box-shadow: 0 0 0 4px #fff; transform: translate(-50%, -50%); }
.tw-x-qr small { color: var(--ink-3); font-size: 14px; }
.tw-x-qr-btns { display: flex; gap: 10px; }
.tw-x-sitebtn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px 0 10px; border-radius: var(--radius-full); background: #0f1419; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: 700; }
.tw-x-sitebtn::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--xi-xlogo) center / contain no-repeat; mask: var(--xi-xlogo) center / contain no-repeat; }
.tw-x-sitebtn-count { display: inline-flex; align-items: center; height: 28px; margin-left: 6px; padding: 0 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px #cfd9de; color: #0f1419; font-size: 12.5px; font-weight: 600; }
.tw-x-spot { margin: 10px 16px 4px; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule); }
.tw-x-spot-map { height: 96px; background: #e8efe4; background-image: linear-gradient(90deg, transparent 47%, #fff 47%, #fff 53%, transparent 53%), linear-gradient(transparent 40%, #fff 40%, #fff 46%, transparent 46%), linear-gradient(120deg, transparent 60%, #d4e4f2 60%); position: relative; }
.tw-x-spot-map::after { content: ""; position: absolute; left: 50%; top: 44%; width: 26px; height: 26px; background: var(--stop); -webkit-mask: var(--xi-place) center / contain no-repeat; mask: var(--xi-place) center / contain no-repeat; transform: translate(-50%, -50%); }
.tw-x-spot-rows { display: grid; gap: 6px; padding: 10px 12px; font-size: 14px; }
.tw-x-spot-rows > span { display: flex; align-items: center; gap: 8px; }
.tw-x-spot-rows .tw-xi { width: 16px; height: 16px; color: var(--ink-3); }
.tw-x-spot-rows .ok { color: var(--done); font-weight: 700; }
.tw-x-spot-btns { display: flex; gap: 8px; padding: 0 12px 12px; }
.tw-x-spot-btns .tw-x-btn { flex: 1; height: 32px; font-size: 13.5px; }
.tw-x-space { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #7856ff; color: #fff; }
.tw-x .tw-x-space { background: #111111; color: #fff; }
.tw-x-th-x .tw-x-space, .tw-x-th-dark .tw-x-space { background: #7856ff; }
.tw-x-space-live { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tw-x-space-live::before { content: ""; width: 14px; height: 10px; background: linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 6px, transparent 6px 8px, currentColor 8px 10px, transparent 10px 12px, currentColor 12px 14px); -webkit-mask: linear-gradient(transparent 0 0); }
.tw-x-space b { display: block; margin: 6px 0 10px; font-size: 18px; line-height: 1.25; }
.tw-x-space-foot { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.tw-x-space-foot .tw-x-av { width: 22px; height: 22px; margin-left: -8px; box-shadow: 0 0 0 1.5px currentColor; color: #111111; font-size: 9px; }
.tw-x-space-foot .tw-x-av:first-child { margin-left: 0; }
.tw-x-space-foot .tw-x-btn { margin-left: auto; height: 30px; background: #fff; color: #111111; }
.tw-x-article { margin-top: 10px; overflow: hidden; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--x-rule); }
.tw-x-article > img, .tw-x-article > .tw-x-ph-img { display: flex; width: 100%; aspect-ratio: 5 / 2; object-fit: cover; }
.tw-x-article-w { padding: 10px 12px 12px; }
.tw-x-article-w small { display: flex; align-items: center; gap: 5px; color: var(--ink-3); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tw-x-article-w b { display: block; margin-top: 3px; font-size: 17px; font-weight: 800; line-height: 1.25; }
.tw-x-article-w p { margin-top: 4px; color: var(--ink-3); font-size: 14px; }
.tw-x-toasts { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.tw-x-toasts.tr { top: 12px; right: 12px; align-items: flex-end; }
.tw-x-toasts.tl { top: 12px; left: 12px; align-items: flex-start; }
.tw-x-toasts.br { bottom: 12px; right: 12px; align-items: flex-end; flex-direction: column-reverse; }
.tw-x-toasts.bl { bottom: 12px; left: 12px; align-items: flex-start; flex-direction: column-reverse; }
.tw-x-toasts.t { top: 12px; left: 50%; align-items: center; transform: translateX(-50%); }
.tw-x-toasts.b { bottom: 14px; left: 50%; align-items: center; flex-direction: column-reverse; transform: translateX(-50%); }
.tw-x-toasts.r { top: 50%; right: 8px; align-items: flex-end; transform: translateY(-50%); }
.tw-x-toasts.l { top: 50%; left: 8px; align-items: flex-start; transform: translateY(-50%); }
.tw-x-toasts.out.tr { top: -16px; right: 18px; } .tw-x-toasts.out.tl { top: -16px; left: 18px; }
.tw-x-toasts.out.br { bottom: -16px; right: 18px; } .tw-x-toasts.out.bl { bottom: -16px; left: 18px; }
.tw-x-toast { display: inline-flex; align-items: center; gap: 8px; max-width: 280px; padding: 5px 13px 5px 5px; border-radius: var(--radius-full); background: #ffffff; color: #111111; font-family: var(--font-sans); font-size: 13px; font-weight: 700; line-height: 1.25; letter-spacing: 0; white-space: nowrap; box-shadow: var(--toast); }
.tw-x-toast > .tw-x-av, .tw-x-toast > img { width: 26px; height: 26px; border-radius: var(--radius-full); object-fit: cover; font-size: 10px; }
.tw-x-toast > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.tw-x-toast i { color: #4a4a48; font-style: normal; font-weight: 600; }
.tw-x-toast-ic { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 26px; height: 26px; margin-left: -18px; margin-top: 16px; border-radius: var(--radius-full); background: var(--yellow); color: #111111; box-shadow: 0 0 0 2px #fff; transform: scale(.62); transform-origin: 0 100%; }
.tw-x-toast-ic .tw-xi { width: 16px; height: 16px; }
.tw-x-toast-ic.like { background: #ffd1e6; } .tw-x-toast-ic.repost { background: var(--done-soft); } .tw-x-toast-ic.follow { background: #cbe9ff; }
.tw-x-toast.tw-x-sys { gap: 10px; padding: 10px 16px; border-radius: 6px; background: #1d9bf0; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14.5px; font-weight: 400; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.tw-x-toast.tw-x-sys b { font-weight: 700; }
.tw-xfig .tw-x-toast.tw-x-sys { background: #111111; }
.tw-xfig.tw-x-th-x .tw-x-toast.tw-x-sys, .tw-xfig.tw-x-th-dark .tw-x-toast.tw-x-sys { background: #1d9bf0; }
.tw-x-a > [data-xc]:empty, .tw-x-count:empty { display: none; }
.tw-x-big { position: relative; }
.tw-x-big-end { position: absolute; top: 16px; right: 16px; display: flex; align-items: center; gap: 12px; color: var(--ink-3); }
.tw-x-big-end .tw-x-btn { height: 32px; padding: 0 16px; font-size: 14px; color: var(--paper); }
.tw-x-big-end .tw-x-btn-line { color: var(--ink); }
.tw-x-big-end .tw-xi { width: 18px; height: 18px; }
.tw-x-quote-gone { color: var(--ink-3); font-size: 14.5px; background: var(--grey); box-shadow: none; }
.tw-x-media > .tw-x-photo { display: block; }
.tw-x-media.tw-x-m2 img, .tw-x-media.tw-x-m3 img, .tw-x-media.tw-x-m4 img { height: 100%; }
.tw-x-media > .tw-x-tag, .tw-x-video > .tw-x-tag, .tw-x-link-box > .tw-x-tag { top: 8px; bottom: auto; left: 8px; transform: none; }
.tw-x-media > .tw-x-tag::after, .tw-x-video > .tw-x-tag::after { content: none; }
.tw-x-bar > .tw-x-av { width: 32px; height: 32px; font-size: 12px; }
.tw-x-bar-t > span { display: inline-flex; align-items: center; gap: 4px; }
.tw-x-row-v { color: var(--ink-3); font-size: 14px; }
.tw-x-pro-face { position: relative; display: inline-flex; border-radius: var(--radius-full); }
.tw-x-fab { bottom: 16px; }
.tw-x-space-live { display: flex; align-items: center; gap: 6px; }
.tw-x-space-live::before { content: none; }
.tw-x-space-live .tw-xi { width: 15px; height: 15px; }
.tw-x-compose .tw-x-main { min-height: 52px; }
.tw-x-compose .tw-x-ph { padding-top: 6px; }
.tw-x-compose .tw-x-typed { padding-top: 6px; }
.tw-x-tools .tw-x-btn { flex: none; }
@container tw-x (max-width: 460px) {
    .tw-x-tools { gap: 11px; padding-left: 16px; }
    .tw-x-tools > .tw-x-ic:nth-child(n+5) { display: none; }
}
@container tw-x (max-width: 300px) { .tw-x-tools > .tw-x-ic:nth-child(n+3), .tw-x-tools > .tw-x-sep, .tw-x-tools > .tw-x-add { display: none; } }
.tw-x-tools > .tw-x-sep, .tw-x-tools > .tw-x-add { flex: none; }
.tw-x-tools > .tw-x-ring[hidden] + .tw-x-sep, .tw-x-tools > .tw-x-ring[hidden] + .tw-x-sep + .tw-x-add { display: none; }
.tw-x-tools > .tw-x-ring[hidden] ~ .tw-x-btn { margin-left: auto; }
.tw-x-known .tw-x-faces { margin-bottom: 0; }
.tw-x-notif-t b { font-weight: 800; }
.tw-x-trend .tw-x-at { color: inherit; font-weight: inherit; }
.tw-x-perms > li.tw-x-hl { border-radius: 6px; padding: 4px 6px; margin: -4px -6px; }
.tw-x-chat .tw-x-msg { margin: 0; }
.tw-x-convo .tw-x-who { gap: 4px; }
.tw-prose .tw-x > img:first-child { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.tw-prose .tw-x .tw-x-listrow > .tw-x-list-img { border-radius: 12px; }
.tw-prose .tw-x .tw-x-aff { border-radius: 3px; }
.tw-prose .tw-x-toast img, .tw-x-toast img { margin: 0; box-shadow: none; background: none; }
.tw-xfig { position: relative; }
.tw-xfig-bare { display: grid; justify-items: center; gap: 18px; margin: 0; }
.tw-x.tw-x-site { max-width: 420px; overflow: hidden; }
.tw-x-site-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--grey); }
.tw-x-site-bar > i { width: 9px; height: 9px; border-radius: var(--radius-full); background: #d6d6cf; }
.tw-x-site-bar > span { flex: 1; margin-left: 8px; padding: 3px 10px; border-radius: var(--radius-full); background: var(--paper); color: var(--ink-3); font-size: 12.5px; }
.tw-x-site-page { display: grid; gap: 8px; padding: 16px 18px 18px; }
.tw-x-site-page > b { font-size: 18px; font-weight: 800; }
.tw-x-site-page > span { height: 8px; border-radius: 4px; background: var(--grey); }
.tw-x-site-page > span.short { width: 60%; }
.tw-x-sitebtn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 6px; }
.tw-x-sitebtn, .tw-x-sitebtn-count { flex: none; white-space: nowrap; }
.tw-x-media, .tw-x-quote, .tw-x-video, .tw-x-link-box, .tw-x-note, .tw-x-article { border-radius: 16px; }
.tw-x-quote .tw-x-av { width: 24px; height: 24px; }
.tw-x-quote span.tw-x-av { font-size: 11px; }
.tw-x-post:not(.tw-x-big) .tw-x-acts { justify-content: flex-start; gap: 8px; max-width: none; }
.tw-x-post:not(.tw-x-big) .tw-x-acts > .tw-x-a { flex: 1 0 auto; }
.tw-x-post:not(.tw-x-big) .tw-x-acts > .tw-x-a-bookmark, .tw-x-post:not(.tw-x-big) .tw-x-acts > .tw-x-a-share { flex: none; margin-left: 6px; }
.tw-x-big > .tw-x-acts { justify-content: space-between; padding-inline: 8px; }
.tw-x-media.tw-x-swipe { display: flex; gap: 4px; overflow: hidden; border-radius: 0; box-shadow: none; aspect-ratio: 100 / 68; }
.tw-x-swipe > * { flex: 0 0 72%; height: 100%; overflow: hidden; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.tw-x-swipe-2 > * { flex-basis: calc(50% - 2px); }
.tw-x-media.tw-x-swipe img, .tw-x-swipe > .tw-x-ph-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.tw-x-swipe > .tw-x-ph-img { display: flex; }
.tw-x-media > .tw-x-warn { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 16px; border-radius: inherit; background: rgba(0, 0, 0, .55); color: #fff; text-align: center; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.tw-x-warn .tw-xi { width: 28px; height: 28px; }
.tw-x-warn b { font-size: 17px; font-weight: 700; }
.tw-x-warn small { max-width: 300px; font-size: 13px; opacity: .85; }
.tw-x-warn .tw-x-btn { position: absolute; right: 12px; bottom: 12px; height: 30px; padding: 0 14px; background: rgba(255, 255, 255, .9); color: #111; box-shadow: none; font-size: 13.5px; }
.tw-x-media:has(> .tw-x-warn) { position: relative; }
.tw-x-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; color: var(--ink-3); font-size: 13px; }
.tw-x-labels > span { display: inline-flex; align-items: center; gap: 4px; }
.tw-x-labels .tw-xi { width: 14px; height: 14px; }
.tw-x-labels > .tw-x-subs { padding: 2px 8px; border-radius: var(--radius-full); background: #fae0fa; color: #c936cc; font-weight: 700; }
.tw-x-transl { display: flex; align-items: center; gap: 5px; margin: 1px 0 3px; color: var(--ink-3); font-size: 13px; }
.tw-x-transl .tw-xi { width: 14px; height: 14px; }
.tw-x-transl b { color: var(--link); font-weight: 600; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-transl b { color: var(--x-blue); }
.tw-x-sortrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; font-weight: 600; }
.tw-x-sortrow > span { display: inline-flex; align-items: center; gap: 4px; }
.tw-x-sortrow > span:first-child .tw-xi { transform: rotate(90deg); }
.tw-x-sortrow .tw-xi { width: 13px; height: 13px; }
.tw-x-showrow { margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--link); font-size: 15px; font-weight: 600; text-align: center; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-showrow { color: var(--x-blue); }
.tw-x-notif-time { color: var(--ink-3); font-weight: 500; }
.tw-x-notif.tw-x-notif-img { grid-template-columns: 40px minmax(0, 1fr) 64px; }
.tw-x-notif-thumb { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }
.tw-prose .tw-x .tw-x-notif-thumb { width: 64px; height: 64px; border-radius: 10px; }
.tw-x-notif-t .tw-xi-badge { width: 15px; height: 15px; margin: 0 2px; vertical-align: -2px; }
.tw-x-notif > .tw-xi-reply { color: #ff7a00; }
.tw-x-chips { display: flex; gap: 8px; padding: 4px 16px 10px; border-bottom: 1px solid var(--line); }
.tw-x-chips > span { padding: 6px 14px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--x-rule); font-size: 14px; font-weight: 700; }
.tw-x-chips > span.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.tw-x-msg { border-radius: 20px; }
.tw-x-msg.me { border-radius: 20px; background: var(--x-blue); }
.tw-x .tw-x-msg.me { background: #111111; color: #fff; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-msg.me { background: #1d9bf0; color: #fff; }
.tw-x-msg-time .tw-xi { width: 13px; height: 13px; vertical-align: -2px; }
.tw-x-note-preview { box-shadow: none; outline: 1.5px dashed var(--x-rule); outline-offset: -1.5px; }
.tw-x-note-h { background: var(--grey); padding-bottom: 8px; }
.tw-x-note-h .tw-xi { color: var(--x-blue); }
.tw-x .tw-x-note-h .tw-xi { color: var(--ink); }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-note-h .tw-xi { color: #1d9bf0; }
.tw-x-btn-unfollow { background: transparent; color: #f4212e; box-shadow: inset 0 0 0 1.5px #fdc9ce; }
.tw-x-btn-sub { background: #c936cc; color: #fff; }
.tw-x-toast.tw-x-sys, .tw-xfig .tw-x-toast.tw-x-sys, .tw-xfig.tw-x-th-x .tw-x-toast.tw-x-sys, .tw-xfig.tw-x-th-dark .tw-x-toast.tw-x-sys { border-radius: 12px; background: rgba(34, 34, 34, .82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 32px rgba(0, 0, 0, .25); font-family: var(--font-sans); font-weight: 600; }
.tw-x-about { padding-bottom: 6px; }
.tw-x-about-top { display: grid; justify-items: center; gap: 2px; padding: 16px 16px 10px; text-align: center; }
.tw-x-about-top .tw-x-av { width: 64px; height: 64px; margin-bottom: 6px; font-size: 22px; }
.tw-x-about-top b { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; font-weight: 800; }
.tw-x-about-top small { color: var(--ink-3); font-size: 14px; }
.tw-x-pro-top span.tw-x-av.tw-x-av-default { background: #cfd9de; }
.tw-x-pro-top span.tw-x-av.tw-x-av-you { background: var(--yellow-tint); }
.tw-x-banner.tw-x-banner-grey { background: #cfd9de; background-image: none; }
.tw-x-gone { margin: 14px 0 18px; }
.tw-x-gone > b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.tw-x-gone > p { margin-top: 6px; color: var(--ink-3); font-size: 15px; }
.tw-x-who > .tw-x-when { flex: none; }
.tw-x-who > .tw-x-when.tw-x-hl { padding: 0 3px; background: var(--yellow); color: #111111; }
.tw-x :is(.tw-x-media, .tw-x-video, .tw-x-link-box, .tw-x-note, .tw-x-article, .tw-x-space)[data-n]::after { top: 8px; right: 8px; box-shadow: 0 0 0 2px #fff; }
.tw-x-media.tw-x-swipe[data-n]::after { position: absolute; }
.tw-x-ph-img { position: relative; box-sizing: border-box; }
@container tw-x (max-width: 340px) { .tw-x-acts > .tw-x-a-bookmark { display: none; } }
.tw-x-msg-in { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; font-size: 11.5px; opacity: .72; vertical-align: -1px; white-space: nowrap; }
.tw-x-msg-in .tw-xi { width: 12px; height: 12px; }
.tw-x-msg-time { justify-self: end; }
.tw-x-time > .tw-x-views b { color: var(--ink); }
.tw-x-time > :is(span).tw-x-hl { padding: 0 3px; background: var(--yellow); color: #111111; }
.tw-x-time > .tw-x-hl b { color: #111111; }
.tw-x-ic { display: inline-flex; flex: none; align-items: center; justify-content: center; border-radius: var(--radius-full); }
.tw-x .tw-x-ic.tw-x-hl, .tw-x .tw-x-add.tw-x-hl { background: var(--yellow); color: #111111; box-shadow: 0 0 0 4px var(--yellow), 0 0 0 5.5px #111111; }
.tw-x-tools .tw-x-ic .tw-xi { width: 19px; height: 19px; }
.tw-x-tools > .tw-x-ic.tw-x-off { opacity: .35; }
.tw-x-person:has(.tw-x-person-dots) { grid-template-columns: 40px minmax(0, 1fr) auto auto; }
.tw-x-person-dots { align-self: center; width: 26px; height: 26px; margin-right: 2px; color: var(--ink-3); }
.tw-x-person-dots .tw-xi { width: 18px; height: 18px; }
.tw-x-pro-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 6px; }
.tw-x-pro-pills .tw-x-btn { width: 100%; }
.tw-x-tagline { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; color: var(--link); font-size: 13.5px; font-weight: 600; }
.tw-x-tagline > span { display: inline-flex; align-items: center; gap: 4px; }
.tw-x-tagline .tw-xi { width: 15px; height: 15px; }
:is(.tw-x-th-x, .tw-x-th-dark) .tw-x-tagline { color: var(--x-blue); }
.tw-x-edit-banner { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; background-color: #cfd9de; background-image: none; }
.tw-x-cam { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); background: rgba(15, 20, 25, .75); color: #fff; }
.tw-x-cam .tw-xi { width: 20px; height: 20px; }
.tw-x-edit-face { position: relative; }
.tw-x-edit-face > .tw-x-cam { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tw-x-edit { padding: 6px 0 8px; }
.tw-x-edit .tw-x-field-box span { min-height: 1.4em; }
.tw-x-edit-born { padding-top: 6px; }
.tw-x.tw-x-intent { max-width: 360px; }
.tw-x-intent-body { display: grid; justify-items: center; gap: 4px; padding: 16px 20px 20px; text-align: center; }
.tw-x-intent-body > .tw-x-logo { width: 22px; height: 22px; margin-bottom: 6px; }
.tw-x-intent-body > .tw-x-av { width: 64px; height: 64px; margin-bottom: 4px; font-size: 22px; }
.tw-x-intent-body > b { display: inline-flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 800; }
.tw-x-intent-body > small { color: var(--ink-3); font-size: 14px; }
.tw-x-intent-body > p { margin-top: 4px; font-size: 14.5px; }
.tw-x-intent-body > .tw-x-counts { justify-content: center; margin: 8px 0 6px; padding: 0; border: 0; }
.tw-x-intent-body > .tw-x-btn { width: 100%; height: 40px; }
[data-x-play] { position: relative; }
.tw-xfig[data-x-play] { overflow: visible; }
@keyframes tw-x-pop { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 65% { transform: scale(.9); } 100% { transform: scale(1); } }
@keyframes tw-x-ring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes tw-x-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes tw-x-up { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tw-x-away { to { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes tw-x-rise { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 0), -70px) scale(1.15); } }
@keyframes tw-x-press { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(.72); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes tw-x-ripple { 0% { opacity: .55; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }
@keyframes tw-x-blink { 50% { opacity: 0; } }
@keyframes tw-x-grow { from { box-shadow: 0 0 0 0 var(--yellow), 0 0 0 0 #111111; } }
.tw-x-a.tw-x-pop::before { animation: tw-x-pop .45s cubic-bezier(.2, .9, .3, 1.3); }
.tw-x-a.tw-x-pop::after { content: ""; position: absolute; left: -3px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: var(--radius-full); box-shadow: 0 0 0 2px currentColor; animation: tw-x-ring .5s ease-out forwards; pointer-events: none; }
.tw-x-a[data-n].tw-x-pop::after { content: attr(data-n); animation: none; }
.tw-x-bump { display: inline-block; animation: tw-x-pop .4s ease-out; }
.tw-x-in { animation: tw-x-in .45s cubic-bezier(.2, .8, .3, 1) both; }
.tw-x-toast.tw-x-in { animation: tw-x-up .35s cubic-bezier(.2, .8, .3, 1.2) both; }
.tw-x-toast.tw-x-away { animation: tw-x-away .3s ease-in forwards; }
.tw-x-hl.tw-x-grow { animation: tw-x-grow .35s ease-out; }
.tw-x-typed.tw-x-typing::after { animation: tw-x-blink 1s steps(1) infinite; }
.tw-x-float { position: absolute; z-index: 5; width: 22px; height: 22px; margin: -11px 0 0 -11px; background: var(--x-like); -webkit-mask: var(--xi-liked) center / contain no-repeat; mask: var(--xi-liked) center / contain no-repeat; animation: tw-x-rise 1.3s ease-out forwards; pointer-events: none; }
.tw-x .tw-x-float, .tw-x-float { background: #111111; }
.tw-x-th-x .tw-x-float, .tw-x-th-dark .tw-x-float { background: #f91880; }
.tw-x-float.tw-x-float-y { background: var(--yellow); filter: drop-shadow(0 0 1px #111) drop-shadow(0 0 0 #111); }
.tw-x-finger { position: absolute; z-index: 7; left: 0; top: 0; width: 34px; height: 34px; border-radius: var(--radius-full); background: rgba(17, 17, 17, .22); box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 3.5px rgba(17, 17, 17, .55); transform: translate(-50%, -50%); transition: left .55s cubic-bezier(.4, 0, .2, 1), top .55s cubic-bezier(.4, 0, .2, 1), opacity .25s; pointer-events: none; opacity: 0; }
.tw-x-finger.on { opacity: 1; }
.tw-x-finger.tw-x-press { animation: tw-x-press .32s ease-out; }
.tw-x-finger.tw-x-press::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border-radius: var(--radius-full); background: rgba(17, 17, 17, .3); animation: tw-x-ripple .5s ease-out forwards; }
.tw-x-replay { position: absolute; z-index: 8; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px 0 9px; border: 0; border-radius: var(--radius-full); background: #111111; color: var(--yellow); font: 700 12.5px/1 var(--font-sans); cursor: pointer; opacity: 0; transition: opacity .2s; }
.tw-x-replay::before { content: "\21BB"; font-size: 14px; }
[data-x-play].tw-x-done .tw-x-replay, [data-x-play]:hover .tw-x-replay { opacity: 1; }
.tw-x-replay:focus-visible { opacity: 1; outline: 2px solid #111111; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .tw-x-a.tw-x-pop::before, .tw-x-a.tw-x-pop::after, .tw-x-bump, .tw-x-in, .tw-x-toast.tw-x-in, .tw-x-hl.tw-x-grow, .tw-x-typed.tw-x-typing::after { animation: none; }
    .tw-x-float, .tw-x-finger { display: none; }
}
:root {
    --xi-reply: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H10l-5 4V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
    --xi-repost: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3l3 3-3 3'/%3E%3Cpath d='M4 11V9a3 3 0 0 1 3-3h13'/%3E%3Cpath d='M7 21l-3-3 3-3'/%3E%3Cpath d='M20 13v2a3 3 0 0 1-3 3H4'/%3E%3C/svg%3E");
    --xi-like: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E");
    --xi-liked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.6s-7.9-4.7-7.9-10.6a4.8 4.8 0 0 1 7.9-3.6 4.8 4.8 0 0 1 7.9 3.6c0 5.9-7.9 10.6-7.9 10.6z'/%3E%3C/svg%3E");
    --xi-views: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20v-8M9.3 20V6M14.7 20v-6M20 20V9'/%3E%3C/svg%3E");
    --xi-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 4h11v16l-5.5-4-5.5 4z'/%3E%3C/svg%3E");
    --xi-bookmarked: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 3h13v18.2L12 16.6l-6.5 4.6z'/%3E%3C/svg%3E");
    --xi-share: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 9l5-5 5 5'/%3E%3Cpath d='M5 15v4a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-4'/%3E%3C/svg%3E");
    --xi-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='5' cy='12' r='1.9'/%3E%3Ccircle cx='12' cy='12' r='1.9'/%3E%3Ccircle cx='19' cy='12' r='1.9'/%3E%3C/svg%3E");
    --xi-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5'/%3E%3Cpath d='M11 6l-6 6 6 6'/%3E%3C/svg%3E");
    --xi-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    --xi-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-4.2-4.2'/%3E%3C/svg%3E");
    --xi-badge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M7.6 12.3l3 3 5.8-6.4' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Cpath mask='url%28%23m%29' d='M12.00 1.00L14.43 2.92L17.50 2.47L18.65 5.35L21.53 6.50L21.08 9.57L23.00 12.00L21.08 14.43L21.53 17.50L18.65 18.65L17.50 21.53L14.43 21.08L12.00 23.00L9.57 21.08L6.50 21.53L5.35 18.65L2.47 17.50L2.92 14.43L1.00 12.00L2.92 9.57L2.47 6.50L5.35 5.35L6.50 2.47L9.57 2.92z'/%3E%3C/svg%3E");
    --xi-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19.5 8.5a2.1 2.1 0 0 0-3-3L5 17z'/%3E%3Cpath d='M14.5 7.5l3 3'/%3E%3C/svg%3E");
    --xi-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4h6l-1 6 3 3H7l3-3z'/%3E%3Cpath d='M12 16v5'/%3E%3C/svg%3E");
    --xi-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.8'/%3E%3Cpath d='M20.5 16l-5-5-9 8.5'/%3E%3C/svg%3E");
    --xi-gif: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M10.5 9.5H8.3a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1.9v-2.3H9'/%3E%3Cpath d='M13 9.5v5'/%3E%3Cpath d='M17 9.5h-2v5M15 12h1.6'/%3E%3C/svg%3E");
    --xi-poll: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6h9M5 12h14M5 18h6'/%3E%3C/svg%3E");
    --xi-smile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 14a4 4 0 0 0 7 0'/%3E%3Cpath d='M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
    --xi-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
    --xi-place: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
    --xi-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1'/%3E%3Cpath d='M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1'/%3E%3C/svg%3E");
    --xi-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
    --xi-follow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M2.5 21c.8-4.2 3.8-6.6 7.5-6.6 1.6 0 3 .4 4.2 1.2'/%3E%3Cpath d='M19 14v6M16 17h6'/%3E%3C/svg%3E");
    --xi-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c.8-4.2 4-6.6 8-6.6s7.2 2.4 8 6.6'/%3E%3C/svg%3E");
    --xi-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16v-5a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 20.5a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
    --xi-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
    --xi-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5L12 4l8 6.5V20h-5.5v-6h-5v6H4z'/%3E%3C/svg%3E");
    --xi-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3.5 6.5L12 13l8.5-6.5'/%3E%3C/svg%3E");
    --xi-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19h16'/%3E%3Cpath d='M5 15l4.5-5 3.5 3 6-7'/%3E%3C/svg%3E");
    --xi-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    --xi-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.5v3M12 18.5v3M2.5 12h3M18.5 12h3M5.3 5.3l2.1 2.1M16.6 16.6l2.1 2.1M5.3 18.7l2.1-2.1M16.6 7.4l2.1-2.1'/%3E%3C/svg%3E");
    --xi-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M10 11v6M14 11v6'/%3E%3Cpath d='M6 7l1 13h10l1-13'/%3E%3Cpath d='M9 7V4h6v3'/%3E%3C/svg%3E");
    --xi-mute: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5h4l5-4v13l-5-4H4z'/%3E%3Cpath d='M17 9.5l4 5M21 9.5l-4 5'/%3E%3C/svg%3E");
    --xi-block: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E");
    --xi-flag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h12l-2 4 2 4H5'/%3E%3C/svg%3E");
    --xi-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'/%3E%3C/svg%3E");
    --xi-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M16 7l3 3'/%3E%3C/svg%3E");
    --xi-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M11 18.5h2'/%3E%3C/svg%3E");
    --xi-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E");
    --xi-ad: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4h3l7 5V5L6 10z'/%3E%3Cpath d='M17 9a4 4 0 0 1 0 6'/%3E%3C/svg%3E");
    --xi-send: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 3L10 14'/%3E%3Cpath d='M21 3l-7 18-4-7-7-4z'/%3E%3C/svg%3E");
    --xi-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    --xi-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 11v5.5'/%3E%3Cpath d='M12 7.5h.01'/%3E%3C/svg%3E");
    --xi-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l9.5 16.5h-19z'/%3E%3Cpath d='M12 10v4.5'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E");
    --xi-hash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h15M4 15h15M10 4L8 20M16 4l-2 16'/%3E%3C/svg%3E");
    --xi-at: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M15.5 12v1.5a2.5 2.5 0 0 0 5 0V12a8.5 8.5 0 1 0-3.5 6.9'/%3E%3C/svg%3E");
    --xi-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M5 20h14'/%3E%3C/svg%3E");
    --xi-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --xi-plus-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
    --xi-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M3.5 12h17'/%3E%3Cpath d='M12 3.5c2.5 2.6 3.6 5.4 3.6 8.5S14.5 17.9 12 20.5C9.5 17.9 8.4 15.1 8.4 12S9.5 6.1 12 3.5z'/%3E%3C/svg%3E");
    --xi-frown: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M8.5 16a4 4 0 0 1 7 0'/%3E%3Cpath d='M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E");
    --xi-user-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M2.5 21c.8-4.2 3.8-6.6 7.5-6.6 1.6 0 3 .4 4.2 1.2'/%3E%3Cpath d='M17 14.5l4 4M21 14.5l-4 4'/%3E%3C/svg%3E");
    --xi-thread: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='6' cy='18' r='2.5'/%3E%3Cpath d='M6 8.5v7'/%3E%3Cpath d='M11 6h9M11 18h9'/%3E%3C/svg%3E");
    --xi-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L18.5 9.5a2.1 2.1 0 0 0-3-3L5 17z'/%3E%3C/svg%3E");
    --xi-grok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Cpath d='M16.5 7.5l-9 9'/%3E%3Cpath d='M9 7.5h-1.5v1.5M16.5 15v1.5H15'/%3E%3C/svg%3E");
    --xi-xlogo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.2 3h5.3l12.3 18h-5.3z'/%3E%3Cpath d='M19.6 3h-2.1l-5.8 6.6 1.1 1.6zM4.3 21h2.1l5.9-6.8-1.1-1.6z'/%3E%3C/svg%3E");
    --xi-compose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    --xi-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11a6.5 6.5 0 0 0 13 0'/%3E%3Cpath d='M12 17.5V21'/%3E%3C/svg%3E");
    --xi-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.2-5.8 6.5-5.8s5.9 2.2 6.5 5.8'/%3E%3Cpath d='M15.5 4.8a3.5 3.5 0 0 1 0 6.4'/%3E%3Cpath d='M17.5 14.6c2.2.7 3.6 2.6 4 5.4'/%3E%3C/svg%3E");
    --xi-notes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3Cpath d='M8 9h8M8 12.5h5'/%3E%3C/svg%3E");
    --xi-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --xi-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5l2.6 5.5 6 .8-4.4 4.1 1.1 5.9L12 17l-5.3 2.8 1.1-5.9-4.4-4.1 6-.8z'/%3E%3C/svg%3E");
    --xi-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l12.5-7.5z'/%3E%3C/svg%3E");
    --xi-user-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M2.5 21c.8-4.2 3.8-6.6 7.5-6.6 1.6 0 3 .4 4.2 1.2'/%3E%3Cpath d='M16 17h6'/%3E%3C/svg%3E");
    --xi-translate: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6h9M8 4v2M5.5 6c.7 3.4 3 6.2 6 7.5'/%3E%3Cpath d='M10.5 6c-.7 3.4-3 6.2-6 7.5'/%3E%3Cpath d='M12.5 20l4-9 4 9M14 17h5'/%3E%3C/svg%3E");
    --xi-qr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Cpath d='M14 14h2v2M20 14v2M14 20h6M18 17v1'/%3E%3C/svg%3E");
    --xi-camera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-2.5h6L17 8h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='3.5'/%3E%3C/svg%3E");
    --xi-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3L5 13.5h6L10 21l8-10.5h-6z'/%3E%3C/svg%3E");
    --xi-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a7.5 7.5 0 0 1-11 6.6L4 20l1.5-4.6A7.5 7.5 0 1 1 20 11.5z'/%3E%3C/svg%3E");
    --xi-bookmark-folder: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7V5.5a1 1 0 0 1 1-1h5l2 2h8a1 1 0 0 1 1 1V18a1 1 0 0 1-1 1h-15a1 1 0 0 1-1-1z'/%3E%3Cpath d='M10 10h5v6l-2.5-1.8L10 16z'/%3E%3C/svg%3E");
    --xi-briefcase: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='7' width='17' height='12.5' rx='2'/%3E%3Cpath d='M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M3.5 12.5h17'/%3E%3C/svg%3E");
    --xi-unlock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 7.7-1.5'/%3E%3C/svg%3E");
    --xi-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.6 6a10 10 0 0 1 1.4-.1c6 0 9.5 6.1 9.5 6.1a17 17 0 0 1-3 3.6M6.6 6.9C4 8.6 2.5 12 2.5 12S6 18.5 12 18.5a9.6 9.6 0 0 0 4.4-1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
    --xi-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 7L3.5 12l5 5M15.5 7l5 5-5 5'/%3E%3C/svg%3E");
    --xi-arrow-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
    --xi-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c.6 4.4 2.3 6.4 7.5 7.5-5.2 1.1-6.9 3.1-7.5 7.5-.6-4.4-2.3-6.4-7.5-7.5 5.2-1.1 6.9-3.1 7.5-7.5z'/%3E%3C/svg%3E");
    --xi-reply-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 5h14a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H10l-5 4V6a1 1 0 0 1 1-1z'/%3E%3Cpath d='M4 3l16 18'/%3E%3C/svg%3E");
    --xi-window: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3C/svg%3E");
}
.tw-xi-reply { --i: var(--xi-reply); }
.tw-xi-repost { --i: var(--xi-repost); }
.tw-xi-like { --i: var(--xi-like); }
.tw-xi-liked { --i: var(--xi-liked); }
.tw-xi-views { --i: var(--xi-views); }
.tw-xi-bookmark { --i: var(--xi-bookmark); }
.tw-xi-bookmarked { --i: var(--xi-bookmarked); }
.tw-xi-share { --i: var(--xi-share); }
.tw-xi-more { --i: var(--xi-more); }
.tw-xi-back { --i: var(--xi-back); }
.tw-xi-close { --i: var(--xi-close); }
.tw-xi-search { --i: var(--xi-search); }
.tw-xi-badge { --i: var(--xi-badge); }
.tw-xi-quote { --i: var(--xi-quote); }
.tw-xi-pin { --i: var(--xi-pin); }
.tw-xi-image { --i: var(--xi-image); }
.tw-xi-gif { --i: var(--xi-gif); }
.tw-xi-poll { --i: var(--xi-poll); }
.tw-xi-smile { --i: var(--xi-smile); }
.tw-xi-clock { --i: var(--xi-clock); }
.tw-xi-place { --i: var(--xi-place); }
.tw-xi-link { --i: var(--xi-link); }
.tw-xi-calendar { --i: var(--xi-calendar); }
.tw-xi-follow { --i: var(--xi-follow); }
.tw-xi-user { --i: var(--xi-user); }
.tw-xi-bell { --i: var(--xi-bell); }
.tw-xi-lock { --i: var(--xi-lock); }
.tw-xi-home { --i: var(--xi-home); }
.tw-xi-mail { --i: var(--xi-mail); }
.tw-xi-chart { --i: var(--xi-chart); }
.tw-xi-chev { --i: var(--xi-chev); }
.tw-xi-settings { --i: var(--xi-settings); }
.tw-xi-trash { --i: var(--xi-trash); }
.tw-xi-mute { --i: var(--xi-mute); }
.tw-xi-block { --i: var(--xi-block); }
.tw-xi-flag { --i: var(--xi-flag); }
.tw-xi-shield { --i: var(--xi-shield); }
.tw-xi-key { --i: var(--xi-key); }
.tw-xi-phone { --i: var(--xi-phone); }
.tw-xi-list { --i: var(--xi-list); }
.tw-xi-ad { --i: var(--xi-ad); }
.tw-xi-send { --i: var(--xi-send); }
.tw-xi-eye { --i: var(--xi-eye); }
.tw-xi-info { --i: var(--xi-info); }
.tw-xi-warn { --i: var(--xi-warn); }
.tw-xi-hash { --i: var(--xi-hash); }
.tw-xi-at { --i: var(--xi-at); }
.tw-xi-download { --i: var(--xi-download); }
.tw-xi-plus { --i: var(--xi-plus); }
.tw-xi-plus-circle { --i: var(--xi-plus-circle); }
.tw-xi-globe { --i: var(--xi-globe); }
.tw-xi-frown { --i: var(--xi-frown); }
.tw-xi-user-x { --i: var(--xi-user-x); }
.tw-xi-thread { --i: var(--xi-thread); }
.tw-xi-edit { --i: var(--xi-edit); }
.tw-xi-grok { --i: var(--xi-grok); }
.tw-xi-xlogo { --i: var(--xi-xlogo); }
.tw-xi-compose { --i: var(--xi-compose); }
.tw-xi-mic { --i: var(--xi-mic); }
.tw-xi-people { --i: var(--xi-people); }
.tw-xi-notes { --i: var(--xi-notes); }
.tw-xi-tick { --i: var(--xi-tick); }
.tw-xi-star { --i: var(--xi-star); }
.tw-xi-play { --i: var(--xi-play); }
.tw-xi-user-minus { --i: var(--xi-user-minus); }
.tw-xi-translate { --i: var(--xi-translate); }
.tw-xi-qr { --i: var(--xi-qr); }
.tw-xi-camera { --i: var(--xi-camera); }
.tw-xi-bolt { --i: var(--xi-bolt); }
.tw-xi-chat { --i: var(--xi-chat); }
.tw-xi-bookmark-folder { --i: var(--xi-bookmark-folder); }
.tw-xi-briefcase { --i: var(--xi-briefcase); }
.tw-xi-unlock { --i: var(--xi-unlock); }
.tw-xi-eye-off { --i: var(--xi-eye-off); }
.tw-xi-code { --i: var(--xi-code); }
.tw-xi-arrow-up { --i: var(--xi-arrow-up); }
.tw-xi-sparkle { --i: var(--xi-sparkle); }
.tw-xi-reply-off { --i: var(--xi-reply-off); }
.tw-xi-window { --i: var(--xi-window); }