/* klipa.tv tool pages, v2 (2026-10-16). Loaded last on every page under
   /tools/: the hero and related regions that tools/build_tool_widgets.py
   renders, the tool surfaces restyled in the language of the home (glass,
   pill buttons, gradient), the prose folded into accordions, and the
   animated glyphs from site-src/tools/glyphs/. Motion is CSS only and stops
   under prefers-reduced-motion, where every glyph rests complete. */

.tp-main {
  --tp-col: 860px;
  --tp-field: color-mix(in srgb, var(--text) 4%, transparent);
  --tp-field-line: color-mix(in srgb, var(--text) 14%, transparent);
  --tp-card: color-mix(in srgb, var(--surface) 88%, transparent);
  --tp-glow: rgba(255, 91, 36, 0.16);
  position: relative;
  isolation: isolate;
}
.article-main.tp-main {
  max-width: calc(1080px + 2 * var(--gutter));
  padding-top: clamp(20px, 3vw, 36px);
}
.tp-main::before, .article-shell main.tp-main::before {
  content: "";
  position: absolute;
  inset: -80px 0 auto;
  width: auto;
  height: 620px;
  transform: none;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 50% 18%, rgba(255, 106, 43, 0.20), transparent 70%),
    radial-gradient(30% 40% at 66% 10%, rgba(255, 61, 129, 0.12), transparent 70%),
    radial-gradient(30% 40% at 34% 12%, rgba(167, 139, 250, 0.10), transparent 70%);
}
:root[data-theme="light"] .tp-main::before { opacity: 0.55; }

/* ---------- Hero ---------- */
.tp-hero {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 0 0 clamp(22px, 3vw, 34px);
  text-align: center;
}
.tp-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 9px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: color var(--t-small), border-color var(--t-small), transform var(--t-small) var(--ease-out);
}
.tp-back:hover { color: var(--text); border-color: var(--line-strong); transform: translateX(-2px); }
[dir="rtl"] .tp-back:hover { transform: translateX(2px); }
.tp-back .ic { width: 16px; height: 16px; }
[dir="rtl"] .tp-back .ic { transform: scaleX(-1); }

.tp-glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(88px, 9vw, 112px);
  aspect-ratio: 1;
  margin-top: 4px;
  border: 1.5px solid transparent;
  border-radius: 32px;
  background:
    linear-gradient(160deg, var(--raised), var(--surface)) padding-box,
    linear-gradient(140deg, #FF7A3D, #FF3D81 55%, #A78BFA) border-box;
  box-shadow: 0 24px 60px -24px rgba(255, 74, 95, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.tp-glyph::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 106, 43, 0.30), transparent 72%);
  animation: tp-breathe 6s ease-in-out infinite;
}
.tp-glyph .glyph { width: 70%; height: 70%; }

.tp-hero .article-title {
  max-width: 20ch;
  margin: 2px 0 0;
  font-size: clamp(34px, 5.2vw, 62px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
:lang(ar) .tp-hero .article-title, :lang(zh) .tp-hero .article-title { letter-spacing: 0; line-height: 1.2; }
.tp-lede {
  max-width: 44ch;
  margin: 0;
  color: var(--text-2);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  text-wrap: balance;
}
.tp-dp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 2px 0 0;
  padding: 7px 15px 7px 11px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--text-2);
  font-size: 13px;
  line-height: 1.35;
  text-align: start;
}
.tp-dp .ic { flex: none; width: 17px; height: 17px; color: var(--tally-text); }
.tp-dp:is(.dp-local, .dp-local_counted, .dp-files_local, .dp-direct_source) .ic { color: var(--success); }

.tp-hero > * { animation: tp-rise 0.7s var(--ease-out) both; }
.tp-hero > :nth-child(2) { animation-delay: 0.05s; }
.tp-hero > :nth-child(3) { animation-delay: 0.1s; }
.tp-hero > :nth-child(4) { animation-delay: 0.16s; }
.tp-hero > :nth-child(5) { animation-delay: 0.22s; }

.tp-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: -6px 0 22px;
  animation: tp-rise 0.7s 0.26s var(--ease-out) both;
}
.tp-main .tp-actions .wb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--text);
  font-weight: 600;
}
.tp-main .tp-actions .wb-btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background: linear-gradient(140deg, #FF7A3D, #FF3D81);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9 7.9 2.6-7.9 2.6-2.6 7.9-2.6-7.9L1.5 12l7.9-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5l2.6 7.9 7.9 2.6-7.9 2.6-2.6 7.9-2.6-7.9L1.5 12l7.9-2.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tp-main .tp-actions .wb-btn:hover:not(:disabled) { border-color: rgba(255, 106, 43, 0.6); background: var(--tally-tint); }
/* the drop zone's own "use sample" repeats the button above */
.tp-main:has(.tp-actions) .wb-drop [id$="sample2"] { display: none; }

/* ---------- Surfaces ---------- */
.tp-main :is(.tool-form, .wb-inputcard, .kp-source, .xc-result, .xc-where, .nx, .tool-result, .wb-tablewrap, .kp-viewer, .kp-library, #sp-work) {
  position: relative;
  border: 1px solid var(--glass-line);
  border-radius: 28px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--text) 3%, transparent), transparent 40%), var(--tp-card);
  box-shadow: 0 40px 100px -50px rgba(0, 0, 0, 0.75), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
.tp-main :is(.tool-form, .wb-inputcard, .kp-source)::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 122, 61, 0.55), rgba(255, 61, 129, 0.22) 28%, transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.tp-main :is(.tool-form, .wb-inputcard, .xc-tool) { padding: clamp(18px, 2.6vw, 30px); }
.tp-main :is(.tool-form, .wb-inputcard, .xc-result, .xc-where, .nx, .tool-banner, .tool-result, .wb-alert, .wb-progress, .tp-more, #sp-status, #mx-start-wrap) {
  width: 100%;
  max-width: var(--tp-col);
  margin-inline: auto;
}
.tp-main .wb-dual-input { max-width: none; }
.tp-main .wb-dual-input .wb-inputcard { max-width: none; margin: 0; }
.tp-main :is(.xc-result, .xc-where, .nx, .tool-result) { margin-top: 18px; padding: clamp(18px, 2.4vw, 28px); }

/* ---------- Fields ---------- */
.tp-main :is(.tool-input, .xc-smart-input, .wb-paste, .xc-select, .wb-select, .wb-field input, .wb-field select, .kp-source input:not([type="file"]), .kp-source textarea, .kp-filters input, .kp-filters select, .nx-code) {
  border: 1px solid var(--tp-field-line);
  border-radius: 14px;
  background: var(--tp-field);
  color: var(--text);
  transition: border-color var(--t-small), box-shadow var(--t-small), background-color var(--t-small);
}
.tp-main :is(.tool-input, .xc-select, .wb-select, .kp-source input:not([type="file"]), .kp-filters input, .kp-filters select) { min-height: 52px; font-size: 16px; }
.tp-main :is(.tool-input, .xc-smart-input, .wb-paste, .xc-select, .wb-select, .wb-field input, .wb-field select, .kp-source input, .kp-source textarea, .kp-filters input, .kp-filters select, .nx-code):focus {
  outline: none;
  border-color: rgba(255, 106, 43, 0.75);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  box-shadow: 0 0 0 4px var(--tp-glow);
}
.tp-main .tool-label {
  color: var(--text-3);
  font: 500 11.5px/1.4 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* one URL, one button: a single command bar */
.tp-main .tool-form:not(:has(.tool-input ~ .tool-input, fieldset, select, .tool-input-wrap)) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 10px 12px;
}
.tp-main .tool-form:not(:has(.tool-input ~ .tool-input, fieldset, select, .tool-input-wrap)) > :not(.tool-input, .tool-submit) { grid-column: 1 / -1; }
.tp-main .tool-form:not(:has(.tool-input ~ .tool-input, fieldset, select, .tool-input-wrap)) > .tool-input { margin: 0; }
.tp-main .tool-form:not(:has(.tool-input ~ .tool-input, fieldset, select, .tool-input-wrap)) > .tool-submit { margin: 0; }
@media (max-width: 560px) {
  .tp-main .tool-form:not(:has(.tool-input ~ .tool-input, fieldset, select, .tool-input-wrap)) { grid-template-columns: 1fr; }
}

/* ---------- Buttons ---------- */
.tp-main :is(.tool-submit, .wb-btn-primary, .btn-primary, .tool-result-cta, .hub-hero-go) {
  border: 0;
  border-radius: 999px;
  background: var(--grad-button);
  color: var(--tally-ink);
  font-weight: 700;
  box-shadow: 0 12px 32px -14px rgba(255, 74, 95, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: transform var(--t-small) var(--ease-out), box-shadow var(--t-small), filter var(--t-small);
}
.tp-main :is(.tool-submit, .wb-btn-primary, .btn-primary, .tool-result-cta):hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06) saturate(1.05);
  box-shadow: 0 18px 40px -14px rgba(255, 74, 95, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.tp-main :is(.tool-submit, .wb-btn-primary, .btn-primary):active:not(:disabled) { transform: translateY(0) scale(0.98); }
.tp-main :is(.tool-submit, .xc-submit.tool-submit) { min-height: 52px; padding: 0 28px; font-size: 16px; }
.tp-main .wb-btn:not(.wb-btn-primary, .wb-btn-ghost, .wb-btn-danger, .wb-tab) {
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
}
.tp-main .wb-btn:not(.wb-btn-primary, .wb-btn-ghost, .wb-btn-danger, .wb-tab):hover:not(:disabled) {
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--text) 9%, transparent);
}
.tp-main :is(.wb-btn-primary, .wb-btn-ghost, .wb-btn-danger) { border-radius: 999px; }

/* the sample and time-shift pages still use the older .button markup */
.tp-main .sm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tp-main .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--t-small) var(--ease-out), border-color var(--t-small), background-color var(--t-small);
}
.tp-main .button:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--text) 9%, transparent); }
.tp-main .button-primary { border: 0; background: var(--grad-button); color: var(--tally-ink); box-shadow: 0 12px 32px -14px rgba(255, 74, 95, 0.75); }
.tp-main .button-primary:hover { background: var(--grad-button); transform: translateY(-1px); filter: brightness(1.06); }
.tp-main .button-copy strong { font-weight: inherit; }

/* ---------- Tabs ---------- */
.tp-main .wb-tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--tp-field);
}
.tp-main .wb-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 16px 0 13px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-weight: 600;
  transition: background-color var(--t-medium) var(--ease-out), color var(--t-medium);
}
.tp-main .wb-tab .ic { width: 18px; height: 18px; }
.tp-main .wb-tab:hover { color: var(--text); }
.tp-main .wb-tab[aria-selected="true"] { background: var(--text); color: var(--bg); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5); }

.tp-main .xc-tab { border-radius: 18px; }
.tp-main .xc-tab[aria-selected="true"] {
  border-color: transparent;
  background: linear-gradient(var(--raised), var(--raised)) padding-box, linear-gradient(140deg, #FF7A3D, #FF3D81 60%, #A78BFA) border-box;
}

/* ---------- Drop zone ---------- */
.tp-main .wb-drop {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 250px;
  padding: 28px 20px;
  border: 1.5px dashed color-mix(in srgb, var(--text) 22%, transparent);
  border-radius: 22px;
  background: radial-gradient(90% 120% at 50% 0%, rgba(255, 106, 43, 0.09), transparent 62%);
  transition: border-color var(--t-medium), background-color var(--t-medium), transform var(--t-medium) var(--ease-out);
}
.tp-main .wb-drop:hover, .tp-main .wb-drop:focus-visible, .tp-main .wb-drop.is-drag {
  border-color: rgba(255, 106, 43, 0.85);
  background-color: var(--tally-tint);
}
.tp-main .wb-drop.is-drag { transform: scale(1.01); }
.tp-main .wb-drop-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 4px;
  border: 0;
  border-radius: 22px;
  background: var(--grad-button);
  color: var(--tally-ink);
  box-shadow: 0 18px 40px -16px rgba(255, 74, 95, 0.8);
  animation: tp-bob 3.2s ease-in-out infinite;
}
.tp-main .wb-drop-icon svg { width: 30px; height: 30px; }
.tp-main .wb-drop-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.tp-main .wb-drop-sub { color: var(--text-3); font: 500 12px/1.4 var(--font-mono); }
.tp-main .wb-dropzone-browse { border: 0; background: var(--grad-button); color: var(--tally-ink); font-weight: 700; }

/* ---------- Results ---------- */
.tp-main :is(.wb-summary, .tool-result-summary) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.tp-main :is(.wb-metric, .tool-result-stat, .wb-score) {
  padding: 18px 20px;
  border: 1px solid var(--glass-line);
  border-radius: 20px;
  background: var(--tp-card);
}
.tp-main :is(.wb-metric-value, .tool-result-stat-value, .wb-score-value) {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.6vw, 44px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.tp-main :is(.wb-metric-label, .tool-result-stat-label) {
  color: var(--text-3);
  font: 500 11.5px/1.4 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tp-main .wb-tablewrap { overflow: hidden; }
.tp-main :is(.wb-table, .tool-result-table) th {
  color: var(--text-3);
  font: 500 11px/1.4 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.tp-main .tool-result-table { overflow: hidden; border: 1px solid var(--glass-line); border-radius: 18px; }
.tp-main :is(.tool-banner, .wb-alert) { border-radius: 16px; }
.tp-main .tool-result { animation: tp-rise 0.5s var(--ease-out) both; }

/* ---------- Info tips (details-based, no script) ---------- */
.tip { position: relative; display: inline-block; flex: none; vertical-align: middle; }
.tip > summary {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--text-3);
  list-style: none;
  cursor: pointer;
  transition: color var(--t-small), background-color var(--t-small);
}
.tip > summary::-webkit-details-marker { display: none; }
.tip > summary:hover, .tip[open] > summary { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.tip > summary .ic { width: 19px; height: 19px; }
.tip-body {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  inset-inline-end: -6px;
  width: max-content;
  max-width: min(330px, 82vw);
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--raised);
  box-shadow: var(--popover-shadow);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  text-align: start;
  text-transform: none;
  letter-spacing: 0;
  animation: tp-pop 0.18s var(--ease-out) both;
}
.tip-body p { margin: 0; }
.tip-body p + p { margin-top: 8px; }
.tip-body a { color: var(--tally-text); text-decoration: underline; text-underline-offset: 3px; }
.tp-main .wb-panel { position: relative; }
.tp-main .wb-panel > .tip { position: absolute; top: -6px; inset-inline-end: 0; }
.tp-main .xc-field { position: relative; }
.tp-main .xc-field > .tip { position: absolute; top: -7px; inset-inline-end: 0; }
.tp-main .xc-smart-head { display: flex; align-items: center; gap: 4px; }
.tp-main .xc-smart-head .wb-btn { margin-inline-start: auto; }
.tp-main .tool-form > .tip { justify-self: start; }
.tp-main .tool-form > .tip .tip-body { inset-inline: -6px auto; }
.tp-main .tool-form > .tool-label:first-child + .tip {
  position: absolute;
  top: calc(clamp(18px, 2.6vw, 30px) - 8px);
  inset-inline-end: calc(clamp(18px, 2.6vw, 30px) - 6px);
}
.tp-main .tool-form > .tool-label:first-child + .tip .tip-body { inset-inline: auto -6px; }
.tp-main .kp-source-body { position: relative; }
.tp-main .kp-source-body > .tip { position: absolute; top: 2px; inset-inline-end: 0; }
.tp-main .nx-watch { display: flex; align-items: center; gap: 6px; }

/* ---------- Sample playlist options ---------- */
.tp-main .sm-fieldset { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tp-main .sm-fieldset legend { grid-column: 1 / -1; }
.tp-main .sm-check { align-items: flex-start; border-radius: 16px; }
.tp-main .sm-check strong { display: inline; }
.tp-main .sm-check code { color: var(--text-3); font-size: 12px; }
.tp-main .sm-desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.45;
}
.tp-main .sm-check:hover .sm-desc, .tp-main .sm-check:focus-within .sm-desc { -webkit-line-clamp: 4; }

/* ---------- Help: all the prose behind one toggle ---------- */
.tp-more { width: 100%; max-width: var(--tp-col); margin: clamp(40px, 6vw, 64px) auto 0; }
.tp-more > summary.tp-more-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 auto;
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass);
  color: var(--text-2);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: color var(--t-small), border-color var(--t-small), background-color var(--t-small);
}
.tp-more > summary.tp-more-toggle::-webkit-details-marker { display: none; }
.tp-more > summary.tp-more-toggle .ic { width: 20px; height: 20px; color: var(--tally-text); }
.tp-more > summary.tp-more-toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-inline-start: 4px;
  border-inline-end: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--t-medium) var(--ease-out);
}
.tp-more > summary.tp-more-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.tp-more[open] > summary.tp-more-toggle { color: var(--text); }
.tp-more[open] > summary.tp-more-toggle::after { transform: translateY(2px) rotate(-135deg); }
.tp-more-body { display: grid; gap: 28px; margin-top: 22px; animation: tp-rise 0.4s var(--ease-out) both; }
.tp-main .kp-help.tp-more { display: block; border: 0; }
.tp-main .kp-help .tp-more-body { gap: 10px; }
.tp-accs { display: grid; gap: 10px; }
.tp-label {
  margin: 0 0 12px;
  color: var(--text-3);
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tp-faq .article-faq { display: grid; gap: 10px; margin: 0; }
.tp-main :is(.tp-acc, .faq-item) {
  position: relative;
  border: 0;
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color var(--t-medium) var(--ease-out), box-shadow var(--t-medium) var(--ease-out);
  interpolate-size: allow-keywords;
}
.tp-main :is(.tp-acc, .faq-item):hover { box-shadow: inset 0 0 0 1px var(--line-strong); }
.tp-main :is(.tp-acc, .faq-item)[open] { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tp-main :is(.tp-acc, .faq-item) > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 18px 24px;
  border-radius: var(--r-card);
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}
.tp-acc > summary h2 { margin: 0; font: inherit; letter-spacing: inherit; }
.tp-main :is(.tp-acc, .faq-item) > summary::-webkit-details-marker { display: none; }
.tp-main :is(.tp-acc, .faq-item) > summary::after {
  content: "";
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--text-2);
  transition: transform var(--t-large) var(--ease-out);
}
.tp-main :is(.tp-acc, .faq-item)[open] > summary::after { transform: rotate(135deg); color: var(--tally-text); }
.tp-main :is(.tp-acc, .faq-item)::details-content {
  height: 0;
  overflow: clip;
  transition: height var(--t-large) var(--ease-out), content-visibility var(--t-large) allow-discrete;
}
.tp-main :is(.tp-acc, .faq-item)[open]::details-content { height: auto; }
.tp-acc-body, .tp-main .tp-acc > p, .tp-main .faq-item > p { margin: -2px 24px 22px; color: var(--text-2); line-height: 1.65; }
.tp-acc-body > :first-child { margin-top: 0; }
.tp-acc-body > :last-child { margin-bottom: 0; }
.tp-acc-body :is(p, ul, ol) { margin: 0 0 12px; max-width: 68ch; }
.tp-acc-body :is(ul, ol) { padding-inline-start: 1.2em; }
.tp-acc-body li { margin: 4px 0; }
.tp-acc-body li::marker { color: var(--tally-text); }
.tp-acc-body strong { color: var(--text); }
.tp-acc-body a, .tp-main .faq-item > p a { color: var(--tally-text); text-decoration: underline; text-underline-offset: 3px; }
.tp-acc-body code, .tp-main .faq-item code {
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--text);
  font: 500 0.88em var(--font-mono);
}
.tp-acc-body figure { margin: 8px 0 16px; }
.tp-acc-body figure img { max-width: 100%; height: auto; border-radius: 16px; }
.tp-acc-body figcaption { margin-top: 8px; color: var(--text-3); font-size: 13px; }
.tp-acc.xc-privacy { padding: 0; }
.tp-acc.xc-privacy > summary h2::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-inline-end: 10px;
  vertical-align: -3px;
  background: var(--success);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 22q-.8 0-1.4-.6Q4 20.8 4 20V10q0-.8.6-1.4Q5.2 8 6 8h1V6q0-2.1 1.5-3.6T12 1q2.1 0 3.6 1.4T17 6v2h1q.8 0 1.4.6T20 10v10q0 .8-.6 1.4T18 22zm6-5q.8 0 1.4-.6T14 15q0-.8-.6-1.4T12 13q-.8 0-1.4.6T10 15q0 .8.6 1.4T12 17M9 8h6V6q0-1.3-.9-2.1T12 3q-1.3 0-2.1.9T9 6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 22q-.8 0-1.4-.6Q4 20.8 4 20V10q0-.8.6-1.4Q5.2 8 6 8h1V6q0-2.1 1.5-3.6T12 1q2.1 0 3.6 1.4T17 6v2h1q.8 0 1.4.6T20 10v10q0 .8-.6 1.4T18 22zm6-5q.8 0 1.4-.6T14 15q0-.8-.6-1.4T12 13q-.8 0-1.4.6T10 15q0 .8.6 1.4T12 17M9 8h6V6q0-1.3-.9-2.1T12 3q-1.3 0-2.1.9T9 6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tp-acc .xc-privacy-list { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 10px; }
.tp-acc .xc-privacy-title { margin: 0; font: inherit; }

/* ---------- Related tools and hub cards ---------- */
.tp-related { margin-top: clamp(48px, 7vw, 80px); }
.tp-related .tp-label { text-align: center; }
.tp-cards { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .tp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tp-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 14px;
  height: 100%;
  padding: 16px 18px 16px 16px;
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  background: var(--tp-card, var(--surface));
  color: var(--text);
  text-decoration: none;
  transition: transform var(--t-medium) var(--ease-out), border-color var(--t-medium), background-color var(--t-medium);
}
.tp-card:hover, .tp-card:focus-visible { transform: translateY(-3px); border-color: rgba(255, 106, 43, 0.5); background: var(--raised); }
.tp-card-glyph {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  box-shadow: inset 0 0 0 1px var(--glass-line);
}
.tp-card-glyph .glyph { width: 38px; height: 38px; }
.tp-card-name { font-weight: 700; line-height: 1.3; }
.tp-card-desc {
  grid-column: 2;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.45;
}
.tp-card > .ic { grid-column: 3; width: 20px; height: 20px; color: var(--text-3); transition: transform var(--t-medium) var(--ease-out), color var(--t-medium); }
.tp-card:hover > .ic { transform: translateX(3px); color: var(--tally-text); }
[dir="rtl"] .tp-card > .ic { transform: scaleX(-1); }
[dir="rtl"] .tp-card:hover > .ic { transform: scaleX(-1) translateX(3px); }

/* ---------- The /tools/ hub ---------- */
.article-main.hub-main { max-width: calc(1080px + 2 * var(--gutter)); text-align: start; }
.hub-main > .article-title {
  margin: clamp(8px, 2vw, 24px) auto 0;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: -0.04em;
  text-align: center;
  animation: tp-rise 0.7s var(--ease-out) both;
}
.hub-main .hub-lede-top {
  max-width: 50ch;
  margin: 14px auto 34px;
  text-align: center;
  text-wrap: balance;
  animation: tp-rise 0.7s 0.06s var(--ease-out) both;
}
.hub-main .hub-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 20px clamp(20px, 3vw, 36px);
  padding: clamp(20px, 3vw, 34px);
  border: 1.5px solid transparent;
  border-radius: 32px;
  background:
    radial-gradient(70% 120% at 0% 0%, rgba(255, 106, 43, 0.14), transparent 60%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(140deg, #FF7A3D, #FF3D81 50%, #A78BFA) border-box;
  box-shadow: 0 40px 100px -50px rgba(255, 74, 95, 0.55);
  color: var(--text);
  text-decoration: none;
  animation: tp-rise 0.7s 0.12s var(--ease-out) both;
  transition: transform var(--t-medium) var(--ease-out);
}
.hub-main .hub-hero:hover { transform: translateY(-3px); }
.hub-hero-glyph {
  display: grid;
  place-items: center;
  width: clamp(88px, 11vw, 128px);
  aspect-ratio: 1;
  border-radius: 32px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  box-shadow: inset 0 0 0 1px var(--glass-line);
}
.hub-hero-glyph .glyph { width: 70%; height: 70%; }
.hub-hero-body { display: grid; justify-items: start; gap: 8px; min-width: 0; }
.hub-main .hub-hero-title { font-size: clamp(24px, 3vw, 34px); }
.hub-main .hub-hero-go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 12px 20px; }
.hub-main .hub-hero-go .ic { width: 18px; height: 18px; }
[dir="rtl"] .hub-main .hub-hero-go .ic { transform: scaleX(-1); }
.hub-main .dp { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 12.5px; line-height: 1.4; }
.hub-main .dp::before { content: none; }
.hub-main .dp .ic { flex: none; width: 15px; height: 15px; color: var(--tally-text); }
.hub-main :is(.dp-local, .dp-local_counted, .dp-files_local, .dp-direct_source) .ic { color: var(--success); }
.hub-main .hub-h2 {
  margin: clamp(44px, 6vw, 64px) 0 14px;
  color: var(--text-3);
  font: 500 12px/1.4 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.hub-main .hub-symptoms { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .hub-main .hub-symptoms { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hub-main .hub-sym {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  height: 100%;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--glass-line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: transform var(--t-medium) var(--ease-out), border-color var(--t-medium), background-color var(--t-medium);
}
.hub-main .hub-sym:hover, .hub-main .hub-sym:focus-visible { transform: translateY(-2px); border-color: rgba(255, 106, 43, 0.5); background: var(--raised); }
.hub-sym-glyph { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: color-mix(in srgb, var(--text) 5%, transparent); }
.hub-sym-glyph .glyph { width: 30px; height: 30px; }
.hub-main .hub-sym > .ic { width: 18px; height: 18px; color: var(--text-3); }
[dir="rtl"] .hub-main .hub-sym > .ic { transform: scaleX(-1); }
.hub-main .hub-grid.tool-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .hub-main .hub-grid.tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .hub-main .hub-grid.tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hub-main .hub-grid .tool-card { padding: 0; border: 0; background: none; box-shadow: none; }
.hub-main .hub-grid .tool-card:hover { transform: none; box-shadow: none; }
.hub-main .hub-grid .tp-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  padding: 14px 16px 14px 14px;
  border: 1px solid var(--glass-line);
  border-radius: 22px;
  background: var(--surface);
}
.hub-main .hub-grid .tp-card-glyph { grid-row: auto; grid-column: 1; }
.hub-main .hub-grid .tool-card-title { grid-column: 2; margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; }
.hub-main .hub-grid .dp { grid-column: 3; margin: 0; }
.hub-main .hub-grid .dp .ic { width: 18px; height: 18px; }

/* ---------- Player and converter details ---------- */
.tp-main .kp-help .tp-acc > p { margin: -2px 24px 22px; }
.tp-main .kp-app {
  max-width: var(--tp-col);
  margin: 28px auto 0;
  padding: 22px 24px;
  border: 1px solid var(--glass-line);
  border-radius: 24px;
  background: radial-gradient(80% 140% at 100% 0%, rgba(255, 106, 43, 0.14), transparent 60%), var(--surface);
}
.tp-main .xc-out { border-radius: 18px; }
.tp-main .xc-out-actions { align-items: center; }
.tp-main .nx-opt { border-radius: 20px; }

/* ---------- Glyphs ---------- */
.glyph { --g1: #FF6A2B; --g2: #FF4A7A; --g3: #A78BFA; display: block; overflow: visible; color: var(--text); }
.glyph .s { stroke: currentColor; stroke-width: 3.5; }
.glyph .s1 { stroke: var(--g1); stroke-width: 3.5; }
.glyph .s2 { stroke: var(--g2); stroke-width: 3.5; }
.glyph .s3 { stroke: var(--g3); stroke-width: 3.5; }
.glyph .f1 { fill: var(--g1); }
.glyph .f2 { fill: var(--g2); }
.glyph .f3 { fill: var(--g3); }
.glyph .fok { fill: var(--success); }
.glyph .sok { stroke: var(--success); stroke-width: 4.5; }
.glyph .sno { stroke: var(--danger); stroke-width: 4.5; }
.glyph .sk { stroke: #0B0B0C; stroke-width: 4.5; }
.glyph .hl { fill: var(--g1); opacity: 0.16; }
.glyph .dim { opacity: 0.35; }
.glyph [class*="gl-"] { transform-box: fill-box; transform-origin: center; }

/* Glyphs move in the hero and the featured hub card, and in a card on hover. */
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-drop { animation: gl-drop 3.6s var(--ease-out) infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-bar { animation: gl-bar 3.6s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-arrow { animation: gl-fade 3.6s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-key { animation: gl-key 3.4s var(--ease-out) infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-pop { animation: gl-pop 3.4s var(--ease-out) infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-play { animation: gl-pulse 2.4s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-prog { transform-origin: left center; animation: gl-prog 4.8s linear infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-grow { transform-origin: 50% 100%; animation: gl-grow 3.6s var(--ease-out) infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-lens { animation: gl-lens 3.6s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-scan { animation: gl-scan 3.6s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-high { animation: gl-high 3.2s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-low { animation: gl-low 3.2s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-seg { animation: gl-seg 1.6s steps(1) infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-row { animation: gl-row 4.2s var(--ease-out) infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-type { stroke-dasharray: 1; animation: gl-type 4.2s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-sl { animation: gl-sl 3.4s var(--ease-out) infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-sr { animation: gl-sr 3.4s var(--ease-out) infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-write { stroke-dasharray: 1; animation: gl-write 3.6s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-star { animation: gl-star 3.6s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-link { stroke-dasharray: 1; animation: gl-link 3.8s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-slide { animation: gl-slide 5s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-now { animation: gl-now 5s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-sweep { animation: gl-sweep 3.4s ease-in-out infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-min { transform-box: view-box; transform-origin: 40px 38px; animation: gl-spin 3s linear infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-hour { transform-box: view-box; transform-origin: 40px 38px; animation: gl-spin 36s linear infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-shift { animation: gl-shift 3s var(--ease-out) infinite; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-k2 { animation-delay: 0.14s; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-k3 { animation-delay: 0.28s; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-k4 { animation-delay: 0.42s; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-seg.gl-k2 { animation-delay: 0.4s; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-seg.gl-k3 { animation-delay: 0.8s; }
:is(.gl-on, .tp-card:hover, .tp-card:focus-visible) .gl-seg.gl-k4 { animation-delay: 1.2s; }

@keyframes gl-drop { 0%, 12% { transform: none; } 34%, 60% { transform: translateY(39px); } 82%, 100% { transform: none; } }
@keyframes gl-bar { 0%, 24% { opacity: 0.35; } 40%, 58% { opacity: 1; } 76%, 100% { opacity: 0.35; } }
@keyframes gl-fade { 0%, 12% { opacity: 1; } 28%, 70% { opacity: 0; } 86%, 100% { opacity: 1; } }
@keyframes gl-key { 0% { transform: translateX(-10px) rotate(-8deg); opacity: 0.4; } 22%, 100% { transform: none; opacity: 1; } }
@keyframes gl-pop { 0%, 24% { transform: scale(0); } 36% { transform: scale(1.18); } 44%, 88% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes gl-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes gl-prog { 0% { transform: scaleX(0.05); } 100% { transform: scaleX(1.64); } }
@keyframes gl-grow { 0% { transform: scaleY(0.15); } 34%, 82% { transform: scaleY(1); } 100% { transform: scaleY(0.15); } }
@keyframes gl-lens { 0%, 100% { transform: translateX(-40px); } 50% { transform: translateX(0); } }
@keyframes gl-scan { 0% { transform: translateY(0); } 25% { transform: translateY(19px); } 50% { transform: translateY(38px); } 75% { transform: translateY(57px); } 100% { transform: translateY(0); } }
@keyframes gl-high { 0%, 100% { transform: none; } 50% { transform: translateY(-6px); } }
@keyframes gl-low { 0%, 100% { transform: none; } 50% { transform: translateY(6px); } }
@keyframes gl-seg { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0.25; } }
@keyframes gl-row { 0%, 18% { transform: translateY(-20px); } 32%, 52% { transform: none; } 66%, 86% { transform: translateY(20px); } 100% { transform: translateY(-20px); } }
@keyframes gl-type { 0%, 30% { stroke-dashoffset: 1; } 50%, 100% { stroke-dashoffset: 0; } }
@keyframes gl-sl { 0%, 10% { transform: translate(18px, 11px); } 40%, 100% { transform: none; } }
@keyframes gl-sr { 0%, 10% { transform: translate(-18px, -11px); } 40%, 100% { transform: none; } }
@keyframes gl-write { 0%, 10% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes gl-star { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(0.6) rotate(45deg); } }
@keyframes gl-link { 0%, 8% { stroke-dashoffset: 1; } 46%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes gl-slide { 0%, 100% { transform: none; } 50% { transform: translateX(-6px); } }
@keyframes gl-now { 0%, 100% { transform: none; } 50% { transform: translateX(16px); } }
@keyframes gl-sweep { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(18px); opacity: 1; } 100% { transform: translateY(18px); opacity: 0; } }
@keyframes gl-spin { to { transform: rotate(360deg); } }
@keyframes gl-shift { 0%, 15% { transform: none; } 45%, 75% { transform: translateX(10px); } 100% { transform: none; } }

@keyframes tp-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes tp-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes tp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes tp-breathe { 0%, 100% { opacity: 0.7; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.06); } }

/* ---------- Phone ---------- */
@media (max-width: 640px) {
  .tp-hero { gap: 12px; }
  .tp-back { justify-self: center; }
  .tp-main :is(.tool-form, .wb-inputcard, .xc-tool) { padding: 16px; border-radius: 24px; }
  .tp-main .wb-tabs { display: flex; }
  .tp-main .wb-tab { flex: 1; justify-content: center; padding: 0 10px; }
  .tp-main .wb-drop { min-height: 200px; }
  .tp-main :is(.tool-submit, .xc-submit.tool-submit) { width: 100%; }
  .hub-main .hub-hero { grid-template-columns: 1fr; justify-items: start; }
  .tp-card { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .tp-main *, .tp-main *::before, .hub-main *, .hub-main *::before { animation: none !important; transition: none !important; }
}
.tp-main .xc-where-title + .tip { margin-inline-end: auto; }
.tp-main :is(.xc-result-head, .nx-row) { display: flex; align-items: center; gap: 6px; }
.tp-main .xc-result-head .xc-result-title { margin: 0; }
.tp-main .nx-qr { align-items: center; }