/* The artist toolkit at /tools.
 *
 * Loaded after site.css and aria.css, so it sits in the same light, the same
 * type and the same glass as the rest of the site: somebody who bought a tool
 * from the store should feel they are inside ARIA, not in a different app.
 * Everything here is scoped to .xt (the app) or prefixed xt_, so a rule here
 * can never reach a public page.
 *
 * Colour is meaning, one each, and none of them collides with another:
 *   red      an action you can take (the site's own accent)
 *   pink     a label
 *   green    done, paid, healthy
 *   orange   late: needs doing and the date has gone
 *   gold     money (the site's rule: gold means money)
 *   the four tool groups, so eleven tools read as four kinds of work:
 *   violet   Make it        cyan   Release it
 *   gold     Get paid       blue   Grow
 */

.xt {
  --xt-hd: 64px;
  --xt-rail: 256px;
  --xt-done: #4ade80;
  --xt-late: #ff8a4c;
  --xt-money: #f4c95d;
  --g-make: #b49cff;
  --g-release: #3fd9cf;
  --g-paid: #f4c95d;
  --g-grow: #6cb6ff;
  --xt-card: linear-gradient(160deg, rgba(255,255,255,.062), rgba(255,255,255,.016) 55%, rgba(255,255,255,.03));
  --xt-text: rgba(255,255,255,.8);
  min-height: 100dvh;
  color: #f5f5f5;
  font-size: 15px;
}
/* site.css sets the root a touch large for reading pages; an app wants the
   standard rem so its dense screens line up. */
html.xt_html { font-size: 100%; scroll-padding-top: 84px; }
body.xt_body { padding-bottom: 0; }
/* Base rules at the lowest weight (:where adds none), so every xt_ class
   below wins over them: a dim, small paragraph has to come out dim and small.
   They still beat site.css's bare p and h1, which load earlier. */
:where(.xt) p { font-size: inherit; line-height: 1.6; color: var(--xt-text); margin: 0 0 10px; max-width: 68ch; }
:where(.xt) :is(h1, h2, h3, h4) { font-family: var(--x-sans); margin: 0; letter-spacing: -.01em; }
:where(.xt) a { color: inherit; }
.xt :focus-visible { outline: 2px solid var(--x-red); outline-offset: 2px; }
.xt [hidden] { display: none !important; }
.xt .g-make { --gc: var(--g-make); }
.xt .g-release { --gc: var(--g-release); }
.xt .g-paid { --gc: var(--g-paid); }
.xt .g-grow { --gc: var(--g-grow); }

.xt_skip { position: absolute; left: 12px; top: -80px; z-index: 400; padding: 10px 14px; border-radius: 10px;
  background: #fff; color: #0a0a0b !important; font-weight: 650; text-decoration: none; }
.xt_skip:focus { top: 12px; }

/* ── Icons, from the sprite the worker writes into the page ──────────── */
.xt_i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ── The header ───────────────────────────────────────────────────────── */
.xt_hd { position: sticky; top: 0; z-index: 70; height: var(--xt-hd);
  display: flex; align-items: center; gap: 14px; padding: 0 18px;
  background: rgba(7,7,9,.74); border-bottom: 1px solid var(--x-line);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.xt_hd .x_lock img { width: 36px; height: 36px; }
.xt_hd .x_lock_t { font-size: 16px; }
.xt_hd_tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--x-line2); font-family: var(--x-mono); font-size: .62rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--x-pink); white-space: nowrap; }
.xt_hd_tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--x-red);
  box-shadow: 0 0 10px var(--x-red); }
.xt_hd_fill { flex: 1; }
.xt_me { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 6px 0 14px; border-radius: 999px;
  border: 1px solid var(--x-line2); background: rgba(255,255,255,.05); color: #fff; font: inherit; font-size: .86rem;
  font-weight: 600; cursor: pointer; max-width: 300px; transition: background .2s, border-color .2s; }
.xt_me:hover { background: rgba(255,255,255,.1); }
.xt_me > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt_av { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-family: AriaRegular, var(--x-sans); font-size: .9rem; color: #fff;
  background: linear-gradient(150deg, #ff4a66, #6d1020); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }
.xt_plan { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 999px;
  font-family: var(--x-mono); font-size: .6rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--x-line2); color: var(--x-dim); white-space: nowrap; }
.xt_plan.p-collective, .xt_plan.p-team { color: #fff; border-color: rgba(255,43,74,.55);
  background: linear-gradient(180deg, rgba(255,43,74,.22), rgba(255,43,74,.08)); }
.xt_plan.p-pro, .xt_plan.p-pro_all { color: var(--xt-money); border-color: rgba(244,201,93,.45); background: rgba(244,201,93,.08); }
.xt_plan.p-buyer { color: var(--g-release); border-color: rgba(63,217,207,.4); }
.xt_plan.p-none, .xt_plan.p-demo { color: var(--x-dim2); border-style: dashed; }
.xt_menu { position: absolute; right: 14px; top: calc(var(--xt-hd) - 4px); z-index: 80; min-width: 240px; padding: 8px;
  border-radius: 18px; border: 1px solid var(--x-line2); background: rgba(18,18,22,.96);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 30px 70px -26px #000; }
.xt_menu a, .xt_menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px;
  border: 0; background: none; color: rgba(255,255,255,.82); font: inherit; font-size: .9rem; text-align: left; cursor: pointer;
  text-decoration: none; }
.xt_menu a:hover, .xt_menu button:hover { background: rgba(255,255,255,.07); color: #fff; }
.xt_menu hr { border: 0; border-top: 1px solid var(--x-line); margin: 6px 4px; }
.xt_menu small { display: block; padding: 8px 12px 6px; color: var(--x-dim2); font-size: .74rem; line-height: 1.4; }

/* ── The shell: a rail on a desktop, a bar along the bottom on a phone ── */
.xt_shell { display: grid; grid-template-columns: var(--xt-rail) minmax(0, 1fr); max-width: 1500px; margin: 0 auto; }
.xt_rail { position: sticky; top: var(--xt-hd); align-self: start; height: calc(100dvh - var(--xt-hd)); overflow-y: auto;
  padding: 18px 12px 30px 14px; border-right: 1px solid var(--x-line); scrollbar-width: thin; }
.xt_main { min-width: 0; padding: 30px clamp(18px, 3.2vw, 46px) 110px; }
/* Focused after each move between screens so a screen reader starts at the
   top of the new one; a ring around the whole screen would only be noise. */
.xt_main:focus { outline: none; }
.xt_nav { display: grid; gap: 2px; }
.xt_nav a { position: relative; display: flex; align-items: center; gap: 11px; padding: 5px 10px; border-radius: 12px;
  color: rgba(255,255,255,.74); font-size: .9rem; font-weight: 550; text-decoration: none;
  transition: background .18s, color .18s; }
.xt_nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.xt_nav a[aria-current] { background: rgba(255,255,255,.085); color: #fff; }
.xt_nav a[aria-current]::before { content: ''; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--x-red); box-shadow: 0 0 12px var(--x-red); }
.xt_nav a.is-none { color: rgba(255,255,255,.5); }
.xt_nav a.is-none .xt_ti { opacity: .55; }
.xt_nav .xt_lock { margin-left: auto; width: 14px; height: 14px; opacity: .45; }
.xt_tag_ro { margin-left: auto; padding: 2px 6px; border-radius: 6px; border: 1px solid rgba(244,201,93,.4);
  font-family: var(--x-mono); font-size: .55rem; letter-spacing: .14em; color: var(--xt-money); }
.xt_rail_g { display: flex; align-items: center; gap: 8px; margin: 15px 10px 5px; font-family: var(--x-mono); font-size: .6rem;
  font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--x-dim2); }
.xt_rail_g::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--gc, var(--x-dim2)); }
.xt_rail_ft { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--x-line); }

/* The tile a tool's icon sits in, tinted by its group. */
.xt_ti { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px;
  color: var(--gc, #fff); background: color-mix(in srgb, var(--gc, #fff) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gc, #fff) 22%, transparent); }
.xt_ti .xt_i { width: 16px; height: 16px; }
.xt_ti.lg { width: 44px; height: 44px; border-radius: 14px; }
.xt_ti.lg .xt_i { width: 22px; height: 22px; }

@media (max-width: 1099px) {
  .xt_shell { grid-template-columns: minmax(0, 1fr); }
  .xt_rail { display: none; }
  .xt_main { padding: 22px 16px 120px; }
  .xt_hd { padding: 0 14px; gap: 10px; }
  .xt_me > span:first-child, .xt_me .xt_plan { display: none; }
  .xt_me { padding: 0 5px; }
}
@media (max-width: 520px) {
  .xt_hd_tag { display: none; }
}

/* ── The phone's bar ──────────────────────────────────────────────────── */
.xt_dock { position: fixed; z-index: 90; left: 50%; bottom: calc(12px + env(safe-area-inset-bottom));
  transform: translateX(-50%); display: none; gap: 2px; padding: 6px; border-radius: 999px;
  background: rgba(16,16,19,.84); border: 1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 26px 54px -18px rgba(0,0,0,.95); }
.xt_dock a, .xt_dock button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: min(74px, 21vw); height: 52px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  color: rgba(255,255,255,.58); font: inherit; font-size: .62rem; font-weight: 600; text-decoration: none; }
.xt_dock .xt_i { width: 21px; height: 21px; }
.xt_dock [aria-current] { color: #fff; background: rgba(255,255,255,.085); }
.xt_dock [aria-current] .xt_i { color: var(--x-red); filter: drop-shadow(0 0 8px rgba(255,43,74,.7)); }
@media (max-width: 1099px) { .xt_dock { display: flex; } }

/* ── Type for a screen ────────────────────────────────────────────────── */
.xt_vh { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 0 0 22px; }
.xt_vh > div:first-child { min-width: 0; }
.xt_h1 { font-family: AriaRegular, var(--x-sans) !important; font-weight: normal; text-transform: uppercase;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem) !important; line-height: 1 !important; letter-spacing: .01em !important;
  margin: 10px 0 0 !important; text-wrap: balance; }
.xt_h1.huge { font-size: clamp(2.3rem, 6vw, 4.6rem) !important; }
.xt_lede { margin: 10px 0 0 !important; color: var(--x-dim) !important; font-size: .98rem; }
.xt_vh_act { display: flex; gap: 8px; flex-wrap: wrap; }
.xt_h2 { font-size: 1.04rem; font-weight: 650; color: #fff; }
.xt_dim { color: var(--x-dim); }
.xt_dim2 { color: var(--x-dim2); }
.xt_small { font-size: .82rem; }
.xt_mono, .xt .num { font-family: var(--x-mono); font-variant-numeric: tabular-nums; }
.xt_money { color: var(--xt-money); }
.xt_good { color: var(--xt-done); }
.xt_bad { color: var(--xt-late); }
.xt_back { display: inline-flex; align-items: center; gap: 6px; color: var(--x-dim); font-size: .84rem; text-decoration: none; }
.xt_back:hover { color: #fff; }
.xt_back .xt_i { width: 15px; height: 15px; }
.xt_sep { height: 1px; background: var(--x-line); margin: 18px 0; border: 0; }

/* ── Surfaces ─────────────────────────────────────────────────────────── */
.xt_card { position: relative; min-width: 0; padding: 22px; border-radius: 22px; border: 1px solid var(--x-line2);
  background: var(--xt-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 30px 60px -44px rgba(0,0,0,.95); }
.xt_card + .xt_card { margin-top: 16px; }
.xt_card.flat { background: rgba(255,255,255,.025); border-color: var(--x-line); box-shadow: none; }
.xt_card_h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; min-width: 0; }
.xt_card_h h2, .xt_card_h h3 { font-size: 1.02rem; font-weight: 650; color: #fff; margin: 0; }
.xt_card_h .xt_ti { margin-right: 2px; }
.xt_card_h .grow { flex: 1; min-width: 0; }
.xt_card_h small { display: block; margin-top: 2px; color: var(--x-dim2); font-size: .78rem; }
.xt_grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.xt_grid > .xt_card + .xt_card { margin-top: 0; }
.xt_col { display: grid; gap: 16px; min-width: 0; }
.xt_col > .xt_card + .xt_card { margin-top: 0; }
.xt_two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.xt_three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 980px) {
  .xt_grid, .xt_two { grid-template-columns: minmax(0, 1fr); }
  .xt_three { grid-template-columns: minmax(0, 1fr); }
}
.xt_gap { margin-top: 16px; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.xt_btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 999px; border: 1px solid var(--x-line2); background: rgba(255,255,255,.06); color: #fff;
  font: inherit; font-size: .87rem; font-weight: 620; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background .2s, border-color .2s, box-shadow .25s, transform .15s var(--x-ease), opacity .2s; }
.xt_btn:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.26); }
.xt_btn:active { transform: scale(.97); }
.xt_btn .xt_i { width: 16px; height: 16px; }
.xt_btn.pri { border: 0; background: linear-gradient(180deg, #ff4a66, #d9102f);
  box-shadow: 0 10px 26px -12px rgba(229,22,54,.95), inset 0 1px 0 rgba(255,255,255,.24); }
.xt_btn.pri:hover { box-shadow: 0 14px 30px -10px rgba(229,22,54,1), inset 0 1px 0 rgba(255,255,255,.3); }
.xt_btn.sm { height: 32px; padding: 0 12px; font-size: .8rem; }
.xt_btn.xs { height: 26px; padding: 0 10px; font-size: .74rem; gap: 6px; }
.xt_btn.xs .xt_i { width: 13px; height: 13px; }
.xt_btn.ghost { background: transparent; border-color: transparent; color: var(--x-dim); }
.xt_btn.ghost:hover { color: #fff; background: rgba(255,255,255,.06); }
.xt_btn.icon { width: 36px; padding: 0; }
.xt_btn.icon.sm { width: 30px; }
.xt_btn.danger:hover { color: #ff9a9a; border-color: rgba(255,110,110,.45); background: rgba(255,80,80,.08); }
.xt_btn.good { color: var(--xt-done); border-color: rgba(74,222,128,.35); }
.xt_btn[disabled], .xt_btn.is-off { opacity: .42; cursor: not-allowed; transform: none; }
.xt_btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.xt_link { color: var(--x-pink); text-decoration: none; font-weight: 600; background: none; border: 0; padding: 0;
  font: inherit; cursor: pointer; }
.xt_link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* The font shorthand above resets the size, so a small link says so again. */
.xt_link.xt_small { font-size: .82rem; }

/* ── Forms ────────────────────────────────────────────────────────────── */
.xt_form { display: grid; gap: 14px; }
.xt_fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.xt_fgrid .wide { grid-column: 1 / -1; }
.xt_f { display: grid; gap: 6px; min-width: 0; }
.xt_f > span { font-size: .78rem; font-weight: 600; color: var(--x-dim); }
.xt_f > span i { font-style: normal; font-weight: 400; color: var(--x-dim2); }
.xt_f > small { font-size: .74rem; color: var(--x-dim2); line-height: 1.45; }
.xt input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.xt select, .xt textarea {
  width: 100%; min-height: 42px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--x-line2);
  background: rgba(0,0,0,.34); color: #fff; font: inherit; font-size: .92rem; font-weight: 400;
  transition: border-color .18s, box-shadow .18s, background .18s; }
.xt textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.xt select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.xt input:focus, .xt select:focus, .xt textarea:focus { outline: none; border-color: rgba(255,43,74,.7);
  box-shadow: 0 0 0 3px rgba(255,43,74,.16); background: rgba(0,0,0,.42); }
.xt input::placeholder, .xt textarea::placeholder { color: rgba(255,255,255,.32); }
.xt input[readonly] { color: var(--x-dim); }
.xt_check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: .9rem; color: var(--xt-text); }
.xt_check input { width: 18px; height: 18px; margin: 0; accent-color: var(--x-red); flex: none; }
.xt_switch { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; }
.xt_switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xt_switch b { position: relative; width: 40px; height: 24px; flex: none; border-radius: 999px; background: rgba(255,255,255,.14);
  transition: background .2s; }
.xt_switch b::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform .22s var(--x-ease); }
.xt_switch input:checked + b { background: var(--x-red); }
.xt_switch input:checked + b::after { transform: translateX(16px); }
.xt_switch input:focus-visible + b { outline: 2px solid var(--x-red); outline-offset: 2px; }
.xt_switch span { font-size: .9rem; color: var(--xt-text); }
.xt_err { color: #ff9a9a; font-size: .84rem; }

/* Choices drawn as cards or pills, a real input underneath. */
.xt_opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.xt_opt { position: relative; display: block; padding: 14px; border-radius: 16px; border: 1px solid var(--x-line2);
  background: rgba(255,255,255,.03); cursor: pointer; transition: border-color .18s, background .18s; }
.xt_opt input { position: absolute; opacity: 0; pointer-events: none; }
.xt_opt b { display: block; font-size: .92rem; color: #fff; }
.xt_opt span { display: block; margin-top: 4px; font-size: .8rem; color: var(--x-dim); line-height: 1.45; }
.xt_opt:hover { border-color: rgba(255,255,255,.28); }
.xt_opt:has(input:checked) { border-color: rgba(255,43,74,.75); background: rgba(255,43,74,.09);
  box-shadow: inset 0 0 0 1px rgba(255,43,74,.35); }
.xt_opt:has(input:focus-visible) { outline: 2px solid var(--x-red); outline-offset: 2px; }
.xt_pills { display: flex; flex-wrap: wrap; gap: 8px; }
.xt_pill { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--x-line2); background: rgba(255,255,255,.03); cursor: pointer;
  font-size: .86rem; color: var(--xt-text); transition: border-color .18s, background .18s, color .18s; }
.xt_pill input { position: absolute; opacity: 0; pointer-events: none; }
.xt_pill:has(input:checked) { color: #fff; border-color: rgba(255,43,74,.7); background: rgba(255,43,74,.12); }
.xt_pill:has(input:focus-visible) { outline: 2px solid var(--x-red); outline-offset: 2px; }

/* A filter: each option with its count. */
.xt_seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; border: 1px solid var(--x-line);
  background: rgba(255,255,255,.025); }
.xt_seg button { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 0; border-radius: 10px;
  background: none; color: var(--x-dim); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.xt_seg button:hover { color: #fff; }
.xt_seg button[aria-pressed=true] { background: rgba(255,255,255,.1); color: #fff; }
.xt_seg button i { font-style: normal; font-family: var(--x-mono); font-size: .7rem; color: var(--x-dim2); }

/* Sections inside a tool. */
.xt_tabs { display: flex; gap: 4px; margin: -6px 0 20px; border-bottom: 1px solid var(--x-line); overflow-x: auto; scrollbar-width: none; }
.xt_tabs::-webkit-scrollbar { display: none; }
.xt_tabs a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px 12px; color: var(--x-dim);
  font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.xt_tabs a:hover { color: #fff; }
.xt_tabs a[aria-current] { color: #fff; }
.xt_tabs a[aria-current]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--x-red); box-shadow: 0 0 10px var(--x-red); }
.xt_tabs a i { font-style: normal; font-family: var(--x-mono); font-size: .66rem; padding: 2px 6px; border-radius: 6px;
  background: rgba(255,255,255,.08); color: var(--x-dim); }

/* ── Chips ────────────────────────────────────────────────────────────── */
.xt_chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px;
  border: 1px solid var(--x-line2); background: rgba(255,255,255,.035); color: var(--x-dim);
  font-size: .72rem; font-weight: 620; white-space: nowrap; vertical-align: middle; }
.xt_chip .xt_i { width: 12px; height: 12px; }
.xt_chip.done { color: var(--xt-done); border-color: rgba(74,222,128,.34); background: rgba(74,222,128,.08); }
.xt_chip.late { color: var(--xt-late); border-color: rgba(255,138,76,.42); background: rgba(255,138,76,.09); }
.xt_chip.today { color: #fff; border-color: rgba(255,43,74,.55); background: rgba(255,43,74,.13); }
.xt_chip.today::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--x-red);
  box-shadow: 0 0 8px var(--x-red); }
.xt_chip.money { color: var(--xt-money); border-color: rgba(244,201,93,.38); background: rgba(244,201,93,.07); }
.xt_chip.info { color: var(--g-grow); border-color: rgba(108,182,255,.38); background: rgba(108,182,255,.07); }
.xt_chip.mono { font-family: var(--x-mono); font-size: .6rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.xt_chip.lock { border-style: dashed; color: var(--x-dim2); }

/* Seven stages from idea to released: a meter, so a song's place is one look. */
.xt_stage { display: inline-flex; align-items: center; gap: 3px; }
.xt_stage i { width: 12px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.13); }
.xt_stage i.on { background: var(--x-red); box-shadow: 0 0 8px rgba(255,43,74,.45); }
.xt_stage.rel i.on { background: var(--xt-done); box-shadow: none; }
.xt_stage b { margin-left: 8px; font-size: .74rem; font-weight: 600; color: var(--x-dim); }

/* Where a song is, as a row of steps you can press. Scrolls on a phone
   rather than squeezing seven words into a line. */
.xt_stepper { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.xt_stepper::-webkit-scrollbar { display: none; }
.xt_stepper button { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px;
  padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--x-dim2); font: inherit; font-size: .82rem;
  font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .18s, color .18s; }
.xt_stepper button:hover:not([disabled]) { color: #fff; background: rgba(255,255,255,.05); }
.xt_stepper button.past { color: rgba(255,255,255,.72); }
.xt_stepper button[aria-pressed=true] { color: #fff; background: rgba(255,255,255,.1); }
.xt_stepper button i { width: 7px; height: 7px; border-radius: 50%; background: var(--x-red); box-shadow: 0 0 8px rgba(255,43,74,.6); }
.xt_stepper.rel button i { background: var(--xt-done); box-shadow: none; }
.xt_stepper button[disabled] { cursor: default; }

/* A one-line add: the main field, a choice, the button. */
.xt_qadd { display: grid; grid-template-columns: minmax(0, 1fr) 170px auto; gap: 10px; align-items: end; padding: 14px; }
@media (max-width: 640px) {
  .xt_qadd { grid-template-columns: minmax(0, 1fr) auto; }
  .xt_qadd > :first-child, .xt_qadd > input[type=hidden] + * { grid-column: 1 / -1; }
}

.xt_srow { grid-template-columns: minmax(0, 2.2fr) auto minmax(0, auto) minmax(90px, auto) minmax(64px, auto); }
@media (max-width: 760px) {
  .xt_srow { grid-template-columns: minmax(0, 1fr) auto; }
  .xt_hide_s { display: none !important; }
}

/* The four registrations, as lights. */
.xt_regs { display: inline-flex; gap: 4px; }
.xt_reg { display: inline-grid; place-items: center; min-width: 30px; height: 20px; padding: 0 5px; border-radius: 6px;
  font-family: var(--x-mono); font-size: .56rem; font-weight: 600; letter-spacing: .06em;
  color: var(--x-dim2); border: 1px solid var(--x-line2); }
.xt_reg.on { color: #06210f; background: var(--xt-done); border-color: var(--xt-done); }

/* ── Lists and tables ─────────────────────────────────────────────────── */
.xt_list { display: grid; gap: 2px; }
.xt_row { display: grid; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 14px; min-width: 0;
  color: inherit; text-decoration: none; transition: background .16s; }
a.xt_row:hover, button.xt_row:hover, .xt_row.click:hover { background: rgba(255,255,255,.045); cursor: pointer; }
button.xt_row { width: 100%; border: 0; background: none; font: inherit; text-align: left; }
.xt_row .t { font-weight: 620; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt_row .s { font-size: .8rem; color: var(--x-dim2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt_tbl_wrap { overflow-x: auto; margin: 0 -6px; padding: 0 6px; }
.xt_tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.xt_tbl th { text-align: left; padding: 8px; font-family: var(--x-mono); font-size: .6rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--x-dim2); border-bottom: 1px solid var(--x-line2); white-space: nowrap; }
.xt_tbl td { padding: 10px 8px; border-bottom: 1px solid var(--x-line); vertical-align: middle; }
.xt_tbl tr:last-child td { border-bottom: 0; }
.xt_tbl .num, .xt_tbl th.num { text-align: right; white-space: nowrap; }
.xt_tbl tbody tr:hover td { background: rgba(255,255,255,.025); }
.xt_tbl tfoot td { font-weight: 650; color: #fff; border-top: 1px solid var(--x-line2); border-bottom: 0; }

/* ── Numbers ──────────────────────────────────────────────────────────── */
.xt_stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.xt_stat { position: relative; min-width: 0; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--x-line);
  background: rgba(255,255,255,.03); overflow: hidden; color: inherit; text-decoration: none; }
a.xt_stat:hover { border-color: var(--x-line2); background: rgba(255,255,255,.05); }
.xt_stat span { display: block; font-size: .74rem; font-weight: 600; color: var(--x-dim2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xt_stat b { display: block; margin-top: 6px; font-family: var(--x-mono); font-weight: 600; font-variant-numeric: tabular-nums;
  font-size: clamp(1.45rem, 2.5vw, 2rem); letter-spacing: -.035em; color: #fff; line-height: 1.05; }
.xt_stat em { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-style: normal; font-size: .74rem;
  font-weight: 600; color: var(--x-dim2); }
.xt_stat em.up { color: var(--xt-done); }
.xt_stat em.down { color: var(--xt-late); }
.xt_stat.lead { grid-column: span 2; background: linear-gradient(140deg, rgba(255,43,74,.14), rgba(255,255,255,.03) 60%);
  border-color: rgba(255,43,74,.3); }
.xt_stat.lead b { font-size: clamp(2rem, 3.6vw, 2.9rem); }
.xt_stat .xt_spark { position: absolute; right: 14px; bottom: 12px; width: 44%; height: 46px; opacity: .9; }
@media (max-width: 520px) { .xt_stat.lead { grid-column: auto; } .xt_stat .xt_spark { width: 38%; } }
.xt_spark path.l { fill: none; stroke: var(--x-red); stroke-width: 2; vector-effect: non-scaling-stroke; }
.xt_spark path.a { fill: url(#xtSparkFill); stroke: none; }

/* Bars drawn in HTML, so labels wrap and stay sharp. */
.xt_bars { display: grid; gap: 8px; }
.xt_bar { display: grid; grid-template-columns: minmax(80px, 30%) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: .84rem; }
.xt_bar .k { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--xt-text); }
.xt_bar .v { font-family: var(--x-mono); font-size: .8rem; color: #fff; font-variant-numeric: tabular-nums; }
.xt_bar .track { position: relative; height: 10px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.xt_bar .track i { position: absolute; inset: 0 auto 0 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--bc, var(--x-red)), color-mix(in srgb, var(--bc, var(--x-red)) 60%, #fff)); }
.xt_cols { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: 10px; }
.xt_cols > div { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.xt_cols i { display: block; width: 100%; max-width: 36px; border-radius: 6px 6px 3px 3px; min-height: 2px;
  background: linear-gradient(180deg, var(--bc, var(--x-red)), color-mix(in srgb, var(--bc, var(--x-red)) 45%, transparent)); }
.xt_cols small { font-family: var(--x-mono); font-size: .58rem; color: var(--x-dim2); white-space: nowrap; }
.xt_meter { height: 8px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; }
.xt_meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--x-red), #ff7a8e); }
.xt_meter.good i { background: linear-gradient(90deg, #22c55e, var(--xt-done)); }

/* ── Your ARIA ────────────────────────────────────────────────────────── */
.xt_hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 0 0 22px; }
.xt_hello p { margin: 10px 0 0; color: var(--x-dim); }
.xt_moves { display: grid; gap: 8px; }
.xt_move { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: start; padding: 14px;
  border-radius: 16px; border: 1px solid var(--x-line); background: rgba(255,255,255,.025);
  transition: background .2s, border-color .2s, opacity .3s; }
.xt_move:hover { border-color: var(--x-line2); background: rgba(255,255,255,.04); }
.xt_move .t { font-weight: 640; font-size: .95rem; color: #fff; line-height: 1.35; }
.xt_move .w { margin-top: 4px; font-size: .84rem; color: var(--x-dim); line-height: 1.5; }
.xt_move .m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.xt_move .a { display: flex; gap: 4px; }
.xt_move.done { opacity: .58; }
.xt_move.done .t { text-decoration: line-through; text-decoration-color: rgba(255,255,255,.45); }
.xt_move.locked { border-style: dashed; }
.xt_tick { width: 26px; height: 26px; margin-top: 2px; flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1.6px solid rgba(255,255,255,.34); background: transparent; color: transparent; cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, transform .15s var(--x-ease); }
.xt_tick:hover { border-color: var(--xt-done); color: rgba(74,222,128,.6); }
.xt_tick:active { transform: scale(.9); }
.xt_tick .xt_i { width: 14px; height: 14px; stroke-width: 3; }
.xt_move.done .xt_tick { background: var(--xt-done); border-color: var(--xt-done); color: #06210f; }
.xt_tick[disabled] { cursor: default; opacity: .4; }
@media (max-width: 640px) {
  .xt_move { grid-template-columns: auto minmax(0, 1fr); }
  .xt_move > .xt_ti { display: none; }
  .xt_move .a { grid-column: 2; }
}

.xt_next_d { display: flex; align-items: baseline; gap: 10px; margin: 6px 0 4px; }
.xt_next_d b { font-family: var(--x-mono); font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 600; letter-spacing: -.05em; line-height: 1; }
.xt_next_d span { color: var(--x-dim); font-size: .9rem; }
.xt_next_t { font-family: AriaRegular, var(--x-sans); text-transform: uppercase; font-size: 1.5rem; line-height: 1.05; margin: 2px 0 0; }
.xt_steps { display: grid; gap: 6px; margin-top: 14px; }
.xt_step { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: .86rem; }
.xt_step .d { width: 10px; height: 10px; margin-left: 4px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); }
.xt_step.ok .d { background: var(--xt-done); border-color: var(--xt-done); }
.xt_step.late .d { border-color: var(--xt-late); background: rgba(255,138,76,.3); }
.xt_step.ok span { color: var(--x-dim2); text-decoration: line-through; }

.xt_pipe { display: grid; grid-template-columns: repeat(7, minmax(120px, 1fr)); gap: 8px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
.xt_pipe::-webkit-scrollbar { display: none; }
.xt_pipe > div { scroll-snap-align: start; min-width: 0; padding: 12px; border-radius: 14px; border: 1px solid var(--x-line);
  background: rgba(255,255,255,.02); }
.xt_pipe h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 8px;
  font-family: var(--x-mono); font-size: .6rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--x-dim2); }
.xt_pipe h4 b { font-size: .86rem; color: #fff; letter-spacing: 0; }
.xt_pipe a { display: block; padding: 5px 0; font-size: .82rem; color: var(--xt-text); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xt_pipe a:hover { color: #fff; }
.xt_pipe > div.rel { border-color: rgba(74,222,128,.22); }

.xt_tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.xt_tool { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: start;
  padding: 16px; border-radius: 18px; border: 1px solid var(--x-line); background: rgba(255,255,255,.025);
  color: inherit; text-decoration: none; transition: border-color .2s, background .2s, transform .2s var(--x-ease); }
.xt_tool:hover { border-color: color-mix(in srgb, var(--gc) 45%, transparent); background: rgba(255,255,255,.045); transform: translateY(-1px); }
.xt_tool .xt_ti { grid-row: span 3; }
.xt_tool b { font-size: .95rem; color: #fff; }
.xt_tool span { font-size: .8rem; color: var(--x-dim); line-height: 1.45; }
.xt_tool em { font-style: normal; font-size: .76rem; color: var(--x-dim2); }
.xt_tool .xt_chip { position: absolute; right: 12px; top: 12px; }
.xt_tool.is-none { border-style: dashed; }

/* ── States a screen can be in ────────────────────────────────────────── */
.xt_banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 16px; margin: 0 0 18px;
  border-radius: 16px; border: 1px dashed rgba(255,255,255,.24);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 10px, rgba(255,255,255,.01) 10px 20px); }
.xt_banner .grow { flex: 1; min-width: 220px; }
.xt_banner b { display: block; color: #fff; font-size: .92rem; }
.xt_banner span { display: block; font-size: .82rem; color: var(--x-dim); margin-top: 2px; line-height: 1.45; }
.xt_banner.read { border-style: solid; border-color: rgba(244,201,93,.38); background: rgba(244,201,93,.06); }
@media (max-width: 640px) {
  .xt_banner { align-items: flex-start; }
  .xt_banner > .xt_chip, .xt_banner > .xt_i { margin-top: 2px; }
}
.xt_banner.info { border-style: solid; border-color: rgba(108,182,255,.32); background: rgba(108,182,255,.06); }
.xt_empty { display: grid; justify-items: center; gap: 8px; padding: 34px 18px; text-align: center; border-radius: 18px;
  border: 1px dashed var(--x-line2); }
.xt_empty .xt_ti { margin-bottom: 4px; }
.xt_empty b { color: #fff; font-size: .98rem; }
.xt_empty p { margin: 0 auto 6px; color: var(--x-dim); font-size: .88rem; max-width: 46ch; }
.xt_locked { position: relative; padding: 18px; border-radius: 16px; border: 1px dashed var(--x-line2);
  background: rgba(255,255,255,.02); }
.xt_locked b { display: flex; align-items: center; gap: 8px; color: #fff; font-size: .92rem; }
.xt_locked p { margin: 6px 0 12px; font-size: .86rem; color: var(--x-dim); }
.xt_skel { border-radius: 14px; background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04));
  background-size: 200% 100%; animation: xtShimmer 1.4s ease-in-out infinite; }
@keyframes xtShimmer { to { background-position: -200% 0; } }

/* ── Signing in ───────────────────────────────────────────────────────── */
.xt_gate { max-width: 980px; margin: 0 auto; padding: 56px 18px 80px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 28px; align-items: center; }
.xt_gate h1 { font-family: AriaRegular, var(--x-sans) !important; font-weight: normal; text-transform: uppercase;
  font-size: clamp(2.4rem, 6vw, 4.4rem) !important; line-height: .96 !important; margin: 14px 0 14px !important; letter-spacing: .01em !important; }
.xt_gate ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.xt_gate li { display: flex; gap: 12px; align-items: flex-start; color: var(--xt-text); font-size: .92rem; line-height: 1.5; }
.xt_gate li .xt_ti { margin-top: 1px; }
@media (max-width: 860px) { .xt_gate { grid-template-columns: minmax(0, 1fr); padding-top: 28px; } }

/* ── Things that float ────────────────────────────────────────────────── */
.xt_toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 300;
  display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 24px); padding: 10px 10px 10px 16px;
  border-radius: 14px; border: 1px solid var(--x-line2); background: rgba(20,20,24,.94); color: #fff; font-size: .88rem;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 22px 50px -20px #000;
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .22s, transform .3s var(--x-ease); }
.xt_toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.xt_toast.err { border-color: rgba(255,120,120,.5); }
.xt_toast.err::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: #ff7a7a; }
.xt_toast.ok::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--xt-done); }
@media (max-width: 1099px) { .xt_toast { bottom: calc(92px + env(safe-area-inset-bottom)); } }

.xt_dlg { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); padding: 0; border-radius: 22px;
  border: 1px solid var(--x-line2); background: #111114; color: #fff; box-shadow: 0 40px 110px -30px #000; overflow: hidden; }
.xt_dlg.wide { width: min(920px, calc(100vw - 24px)); }
.xt_dlg[open] { display: flex; flex-direction: column; animation: xtIn .24s var(--x-ease); }
.xt_dlg::backdrop { background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
@keyframes xtIn { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.xt_dlg_h { display: flex; align-items: center; gap: 12px; padding: 16px 18px 14px 22px; border-bottom: 1px solid var(--x-line); }
.xt_dlg_h h2 { flex: 1; font-size: 1.05rem; font-weight: 650; }
.xt_dlg_b { padding: 20px 22px; overflow-y: auto; }
.xt_dlg_f { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--x-line);
  background: rgba(255,255,255,.02); }
.xt_dlg_f .grow { flex: 1; }
@media (max-width: 640px) {
  .xt_dlg, .xt_dlg.wide { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: 22px 22px 0 0; }
}

/* A save bar that stays in view at the bottom of a long form. Solid and
   blurred, never see-through: the fields scroll underneath it. */
.xt_stickybar { position: sticky; bottom: 12px; z-index: 5; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 14px 18px; border-radius: 18px; border: 1px solid var(--x-line2); background: rgba(16,16,19,.94);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 -10px 40px -20px rgba(0,0,0,.9), 0 20px 40px -24px rgba(0,0,0,.9); }
@media (max-width: 1099px) { .xt_stickybar { bottom: calc(84px + env(safe-area-inset-bottom)); } }

.xt_copy { display: flex; gap: 8px; align-items: center; }
.xt_copy input { font-family: var(--x-mono); font-size: .8rem !important; }

/* A whole row of things that scroll sideways says so on a phone. */
.xt_scroll { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.xt_scroll::-webkit-scrollbar { display: none; }
.xt_scroll > * { scroll-snap-align: start; flex: none; }

/* ── Printing: one document, nothing else ─────────────────────────────── */
#xt_print { display: none; }
@media print {
  body.xt_printing > *:not(#xt_print) { display: none !important; }
  body.xt_printing { background: #fff !important; color: #111 !important; padding: 0 !important; }
  html.xt_html::after { display: none !important; }
  body.xt_printing #xt_print { display: block !important; font-family: var(--x-sans); color: #111; font-size: 11pt; }
  #xt_print h1 { font-family: AriaRegular, var(--x-sans); font-weight: normal; text-transform: uppercase; font-size: 24pt; margin: 0 0 4pt; }
  #xt_print h2 { font-size: 12pt; margin: 16pt 0 6pt; }
  #xt_print p { color: #222; font-size: 10.5pt; line-height: 1.5; margin: 0 0 6pt; max-width: none; }
  #xt_print table { width: 100%; border-collapse: collapse; font-size: 10pt; margin: 6pt 0; }
  #xt_print th, #xt_print td { border-bottom: 1px solid #ccc; padding: 5pt 4pt; text-align: left; }
  #xt_print .num { text-align: right; font-variant-numeric: tabular-nums; }
  #xt_print .pr_meta { color: #555; font-size: 9.5pt; }
  #xt_print .pr_sign { display: grid; grid-template-columns: 1fr 1fr; gap: 26pt 30pt; margin-top: 22pt; }
  #xt_print .pr_sign div { border-top: 1px solid #333; padding-top: 4pt; font-size: 9pt; color: #444; }
  #xt_print .pr_foot { margin-top: 24pt; font-size: 8.5pt; color: #777; }
  @page { margin: 16mm 14mm; }
}

@media (prefers-reduced-motion: reduce) {
  .xt *, .xt *::before, .xt *::after { animation: none !important; transition: none !important; }
}