Spaces:

JoaoK90
/

text_Explorer

Running on Zero

visual updates
5d9dc7c verified about 14 hours ago
37.6 kB
/* Tokens. Blue carries probability and 1-bits; grey carries the previous
   stage; red appears only on the low side of the detection scale. */
.sx, #sx-rail, #sx-controls, #sx-focus {
  --sx-surface: #ffffff;
  --sx-sunken: #f3f5f8;
  --sx-ink: #0b0b0b;
  --sx-ink-2: #52514e;
  --sx-muted: #7d7b75;
  --sx-hair: #e1e0d9;
  --sx-axis: #c3c2b7;
  --sx-blue: #2a78d6;
  --sx-blue-deep: #184f95;
  --sx-wash-a: #e3eefb;
  --sx-wash-b: #cde2fb;
  --sx-ref: #c3c2b7;
  --sx-bit0: #dddcd5;
  --sx-seq-lo: #edf4fd;
  --sx-seq-hi: #184f95;
  --sx-div-mid: #f0efec;
  --sx-div-hi: #2a78d6;
  --sx-div-lo: #e34948;
  --sx-on-fill: #ffffff;
  --sx-display: "Bahnschrift", "DIN Alternate", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --sx-mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
}
.dark .sx, .dark #sx-rail, .dark #sx-controls, .dark #sx-focus {
  --sx-surface: #1a1a19;
  --sx-sunken: #242423;
  --sx-ink: #f0efec;
  --sx-ink-2: #c3c2b7;
  --sx-muted: #9a988f;
  --sx-hair: #2c2c2a;
  --sx-axis: #45453f;
  --sx-blue: #3987e5;
  --sx-blue-deep: #9ec5f4;
  --sx-wash-a: #1b2f4a;
  --sx-wash-b: #22406a;
  --sx-ref: #5a5952;
  --sx-bit0: #3a3a36;
  --sx-seq-lo: #17263a;
  --sx-seq-hi: #9ec5f4;
  --sx-div-mid: #383835;
  --sx-div-hi: #3987e5;
  --sx-div-lo: #e66767;
  --sx-on-fill: #ffffff;
}

.sx-host, .sx-host .html-container { padding: 0 !important; }
.sx { color: var(--sx-ink); font-size: 1rem; line-height: 1.5; }
.sx p { margin: 0; }
.sx h1, .sx h3, .sx h4 { margin: 0; font-family: var(--sx-display); color: var(--sx-ink); letter-spacing: 0.005em; }
.sx-mono, .sx-tok, .sx-tile, .sx-att, .sx-g, .sx-num { font-family: var(--sx-mono); }
.sx-ws { color: var(--sx-muted); }
.sx-special { font-family: var(--sx-mono); font-style: italic; color: var(--sx-ink-2); }
.sx-caption { color: var(--sx-ink-2); font-size: 0.92rem; max-width: 78ch; margin-top: 0.9rem !important; }
.sx-result { color: var(--sx-ink); font-size: 1.05rem; }

/* Title */
.sx-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; }
.sx-title h1 { font-size: 1.7rem; font-weight: 600; line-height: 1.2; }
.sx-title p { color: var(--sx-ink-2); font-size: 1rem; }
.sx-empty, .sx-lead { padding: 1.25rem 0; color: var(--sx-ink-2); max-width: 70ch; }
.sx-keyinfo { color: var(--sx-ink-2); font-size: 0.88rem; padding: 0 0.25rem 0.5rem; }
.sx-keyinfo-bad { color: #b3261e; }

/* Text so far: the one loud element */
.sx-tape, .sx-cmp-col {
  background: var(--sx-surface);
  border: 1px solid var(--sx-hair);
  border-left: 4px solid var(--sx-blue);
  border-radius: 4px;
  padding: 0.85rem 1.1rem 1rem;
}
.sx-tape-head { display: flex; justify-content: space-between; gap: 1rem; color: var(--sx-muted); font-size: 0.88rem; margin-bottom: 0.4rem; }
.sx-tape-title, .sx-cmp-title { font-family: var(--sx-display); font-size: 1rem; color: var(--sx-ink-2); }
.sx-tape-body { font-size: 1.32rem; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.sx-prompt { color: var(--sx-muted); }
.sx-gen { border-radius: 3px; padding: 0.12em 0; }
.sx-alt0 { background: var(--sx-wash-a); }
.sx-alt1 { background: var(--sx-wash-b); }
.sx-now { background: var(--sx-blue); color: var(--sx-on-fill); }
.sx-now .sx-ws, .sx-now .sx-special { color: var(--sx-on-fill); }
.sx-split { outline: 2px solid var(--sx-ink); outline-offset: 1px; }
.sx-slot {
  display: inline-block; min-width: 2.2em; margin-left: 0.2em; padding: 0 0.4em; text-align: center;
  border: 2px dashed var(--sx-blue); border-radius: 4px; color: var(--sx-blue); line-height: 1.35;
}
.sx-cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sx-cmp-col { border-left-color: var(--sx-axis); }
.sx-cmp-focus { border-left-color: var(--sx-blue); }
.sx-cmp-title { display: flex; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; }
.sx-cmp-tag { font-family: inherit; font-size: 0.82rem; color: var(--sx-blue-deep); }
.sx-cmp-col .sx-tape-body { font-size: 1.12rem; }
.sx-cmp-score { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--sx-hair); color: var(--sx-ink-2); font-size: 0.92rem; }
.sx-cmp-score strong { font-size: 1.5rem; font-weight: 600; color: var(--sx-ink); }
@media (max-width: 900px) { .sx-cmp-grid { grid-template-columns: 1fr; } }

/* Controls and step rail */
#sx-controls { align-items: center; flex-wrap: wrap; gap: 0.5rem; }
#sx-controls > * { flex-grow: 0; }
#sx-where { flex: 1 1 14rem !important; min-width: 12rem; }
.sx-where { text-align: right; font-family: var(--sx-display); font-size: 1.15rem; color: var(--sx-ink); }
.sx-where strong { font-weight: 600; }
.sx-where span { display: block; font-size: 0.86rem; color: var(--sx-muted); font-family: inherit; }
/* Parts of the explorer that belong to one stage or to watermarked runs.
   They stay mounted; the stage panel on screen decides which ones show. */
#sx-detail-box, #sx-detect-box, #sx-focus, #sx-score-box { display: none !important; }
.gradio-container:has(.sx-title[data-keyed]) #sx-score-box { display: block !important; }
#sx-explorer:has(.sx-stage-bits, .sx-stage-tournament) #sx-detail-box,
#sx-explorer:has(.sx-stage[data-keyed]) #sx-detect-box,
#sx-explorer:has(.sx-cmp) #sx-focus { display: block !important; }
.form:has(> #sx-focus) { background: none; border: 0; box-shadow: none; }
/* A hidden Group still paints its border in Gradio 6.16. */
#sx-keys:not(:has(.block)) { display: none !important; }
.form:has(> #sx-rail) { background: none; border: 0; box-shadow: none; }
#sx-rail { border: 0; background: none; padding: 0; box-shadow: none; }
#sx-rail .wrap { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 2px solid var(--sx-hair); }
#sx-rail label {
  flex: 1 1 auto; min-width: 0; justify-content: center; margin: 0 0 -2px; padding: 0.5rem 0.3rem;
  border: 0; border-bottom: 4px solid transparent; border-radius: 0; background: none; box-shadow: none;
  font-family: var(--sx-display); font-size: 0.92rem; color: var(--sx-muted); cursor: pointer; white-space: nowrap;
}
#sx-rail label:hover { color: var(--sx-ink); }
#sx-rail label.selected { color: var(--sx-ink); border-bottom-color: var(--sx-blue); font-weight: 600; background: none; }
#sx-rail label span { margin: 0; }
#sx-rail input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
#sx-rail label:focus-within { outline: 2px solid var(--sx-blue); outline-offset: -2px; }

/* Stage panel */
.sx-stage { background: var(--sx-surface); border: 1px solid var(--sx-hair); border-radius: 4px; padding: 1.25rem 1.5rem 1.5rem; min-height: 24rem; }
.sx-head { margin-bottom: 1.1rem; }
.sx-head h3 { font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.sx-head p { margin-top: 0.4rem; max-width: 80ch; font-size: 1.05rem; color: var(--sx-ink-2); }
.sx-block h4, .sx-detect h4 { font-size: 1.08rem; font-weight: 600; margin-bottom: 0.6rem; }
.sx-split2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(15rem, 2fr); gap: 2rem; align-items: start; }
@media (max-width: 1000px) { .sx-split2 { grid-template-columns: 1fr; } }

/* Token tiles */
.sx-tiles { display: flex; flex-wrap: wrap; gap: 5px; align-items: stretch; }
.sx-tile {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0.3rem 0.55rem; border-radius: 4px; background: var(--sx-sunken); font-size: 1.08rem; line-height: 1.3; white-space: pre;
}
.sx-tile-gen { background: var(--sx-wash-a); }
.sx-tile-new { outline: 2px solid var(--sx-blue); outline-offset: -2px; background: var(--sx-wash-b); }
.sx-tile-id { font-size: 0.8rem; color: var(--sx-ink-2); }
.sx-tiles-ids .sx-tile-id { font-size: 0.92rem; color: var(--sx-ink); }
.sx-tiles-ids .sx-tile-text { font-size: 0.9rem; color: var(--sx-muted); }
.sx-tile-empty, .sx-tile-any { font-family: inherit; font-size: 0.92rem; color: var(--sx-muted); background: none; border: 1px dashed var(--sx-axis); }
.sx-tile-any { color: var(--sx-ink-2); }
.sx-tile-key { background: var(--sx-sunken); }
.sx-tile-idonly { font-size: 1.5rem; padding: 0.5rem 0.9rem; }

/* Flow: what goes in, what comes out */
.sx-flow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.9rem; margin-bottom: 1rem; }
.sx-flow-part { display: flex; flex-direction: column; gap: 0.35rem; }
.sx-flow-label { font-size: 0.86rem; color: var(--sx-muted); }
.sx-flow-op { padding-bottom: 0.45rem; color: var(--sx-ink-2); font-family: var(--sx-display); font-size: 1.05rem; }
.sx-flow-big .sx-tile { font-size: 1.5rem; padding: 0.5rem 0.9rem; }
.sx-flow-big .sx-flow-op { padding-bottom: 0.9rem; }

/* Ranked bars */
.sx-bars, .sx-bittable, .sx-layers { display: grid; row-gap: 2px; }
.sx-row { display: grid; grid-template-columns: 2rem minmax(6rem, 11rem) minmax(8rem, 1fr) 5rem; column-gap: 0.75rem; align-items: center; min-height: 26px; }
.sx-cols-2 .sx-row { grid-template-columns: 2rem minmax(6rem, 11rem) minmax(8rem, 1fr) 5rem 5rem; }
.sx-cols-3 .sx-row { grid-template-columns: 2rem minmax(6rem, 11rem) minmax(8rem, 1fr) 5.4rem 5rem 6rem; }
.sx-row-head { min-height: 0; color: var(--sx-muted); font-size: 0.84rem; }
.sx-row-head .sx-val { font-size: 0.84rem; }
.sx-val-ref { color: var(--sx-muted); }
.sx-rank { color: var(--sx-muted); font-size: 0.86rem; text-align: right; font-variant-numeric: tabular-nums; }
.sx-tok { font-size: 1.05rem; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.sx-track { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--sx-axis); padding: 2px 0; }
.sx-bar { display: block; border-radius: 0 4px 4px 0; min-width: 1px; }
.sx-bar-ref { height: 6px; background: var(--sx-ref); }
.sx-bar-cur { height: 12px; background: var(--sx-blue); }
.sx-val, .sx-num { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.98rem; }
.sx-row-rest .sx-bar-cur { background: var(--sx-ref); }
.sx-row-chosen { background: var(--sx-wash-a); border-radius: 4px; }
.sx-row-chosen .sx-tok, .sx-row-chosen .sx-val:not(.sx-val-ref) { font-weight: 700; }
.sx-row-chosen .sx-val-ref { text-align: left; }
.sx-drawn { display: inline-block; padding: 0 0.5em; border-radius: 3px; background: var(--sx-blue); color: var(--sx-on-fill); font-size: 0.82rem; }
.sx-row-out .sx-tok, .sx-row-out .sx-val { color: var(--sx-muted); }
.sx-delta { white-space: nowrap; }
.sx-gap { min-height: 22px; }
.sx-gap-text { grid-column: 2 / -1; color: var(--sx-muted); font-size: 0.88rem; }
.sx-cut .sx-gap-text { border-top: 1px solid var(--sx-ink-2); padding-top: 2px; color: var(--sx-ink-2); }
.sx-axis { min-height: 0; }
.sx-axis-track { display: flex; justify-content: space-between; border-top: 1px solid var(--sx-hair); padding-top: 2px; color: var(--sx-muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.sx-delta-up span, .sx-delta-down span { font-size: 0.72em; }
.sx-delta-same { color: var(--sx-muted); }

/* Legends */
.sx-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.2rem; margin: 0 0 0.7rem; color: var(--sx-ink-2); font-size: 0.9rem; }
.sx-key { display: inline-flex; align-items: center; gap: 0.4rem; }
.sx-swatch { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
.sx-swatch.sx-bar-ref { background: var(--sx-ref); height: 6px; }
.sx-swatch.sx-bar-cur { background: var(--sx-blue); }
.sx-swatch.sx-bit1 { width: 10px; background: var(--sx-blue); }
.sx-swatch.sx-bit0 { width: 10px; background: var(--sx-bit0); }
.sx-swatch.sx-key-line { height: 2px; background: var(--sx-blue); }

/* Keyed bits */
.sx-bitrow { display: grid; grid-template-columns: 2rem minmax(6rem, 11rem) max-content 5rem; column-gap: 0.75rem; align-items: center; min-height: 24px; }
.sx-bitrow-head, .sx-layer-head { color: var(--sx-muted); font-size: 0.84rem; }
.sx-bits { display: inline-flex; gap: 2px; }
.sx-bits i { display: block; width: 11px; height: 14px; border-radius: 2px; }
i.sx-bit1 { background: var(--sx-blue); }
i.sx-bit0 { background: var(--sx-bit0); }
.sx-bits-dim { opacity: 0.45; }

/* Tournament, layer by layer */
.sx-detail { padding: 0.25rem 0.25rem 0.5rem; }
.sx-layer-row { display: grid; grid-template-columns: 2rem minmax(6rem, 10rem) 4.2rem max-content 4.2rem; column-gap: 0.75rem; align-items: center; }
.sx-layers { overflow-x: auto; row-gap: 0; }
.sx-layer-row:not(.sx-layer-head) { padding: 9px 0; border-top: 1px solid var(--sx-hair); }
.sx-layer-row svg { display: block; overflow: visible; }
rect.sx-bit1 { fill: var(--sx-blue); }
rect.sx-bit0 { fill: var(--sx-bit0); }
.sx-base { stroke: var(--sx-axis); stroke-width: 1; }
.sx-line { fill: none; stroke: var(--sx-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.sx-dot { fill: var(--sx-blue); stroke: var(--sx-surface); stroke-width: 2; }

/* Attention */
.sx-atts { display: flex; flex-wrap: wrap; gap: 4px; }
.sx-att {
  padding: 0.22rem 0.45rem; border-radius: 4px; font-size: 1.02rem; white-space: pre;
  background: color-mix(in oklab, var(--sx-seq-lo), var(--sx-seq-hi) var(--w));
}
.sx-att-strong, .sx-att-strong .sx-ws { color: #ffffff; }
.dark .sx-att-strong, .dark .sx-att-strong .sx-ws { color: #0b0b0b; }
.sx-scale { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.7rem; color: var(--sx-muted); font-size: 0.82rem; }
.sx-scale-bar { width: 9rem; height: 8px; border-radius: 2px; background: linear-gradient(to right in oklab, var(--sx-seq-lo), var(--sx-seq-hi)); }

/* Tables */
.sx-table { border-collapse: collapse; font-size: 0.96rem; }
.sx-table th { text-align: left; font-weight: 400; color: var(--sx-muted); font-size: 0.84rem; padding: 0.15rem 0.9rem 0.3rem 0; }
.sx-table td { padding: 0.22rem 0.9rem 0.22rem 0; border-top: 1px solid var(--sx-hair); }
.sx-scores { min-width: 15rem; }
.sx-scores th:last-child, .sx-table td.sx-num { text-align: right; padding-right: 0; }
.sx-kv th { color: var(--sx-ink-2); font-size: 0.92rem; vertical-align: top; white-space: nowrap; border-top: 1px solid var(--sx-hair); padding: 0.3rem 1.2rem 0.3rem 0; }
.sx-kv td { max-width: 70ch; }

/* Notes */
.sx-note { display: flex; gap: 0.7rem; align-items: flex-start; max-width: 80ch; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 4px; background: var(--sx-sunken); color: var(--sx-ink); }
.sx-note-icon { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--sx-ink-2); color: var(--sx-surface); text-align: center; font-size: 0.85rem; line-height: 1.3rem; font-weight: 700; }
.sx-note-skip { border-left: 4px solid var(--sx-ink-2); }

/* Detection */
.sx-detect { padding: 0.25rem 0.25rem 0.75rem; }
.sx-detect + .sx-detect { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--sx-hair); }
.sx-stats { display: flex; flex-wrap: wrap; gap: 0.75rem 2.5rem; margin-bottom: 1.1rem; }
.sx-stat { display: flex; flex-direction: column; }
.sx-stat-label { color: var(--sx-ink-2); font-size: 0.9rem; }
.sx-stat-value { font-size: 1.9rem; font-weight: 600; line-height: 1.2; }
.sx-stat:nth-child(n + 3) .sx-stat-value { font-size: 1.25rem; line-height: 1.85; font-weight: 400; }
.sx-stat-note { color: var(--sx-muted); font-size: 0.82rem; }
.sx-gstrip { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 0.8rem; }
.sx-g { padding: 0.22rem 0.42rem; border-radius: 4px; font-size: 1.02rem; white-space: pre; color: #0b0b0b; }
.sx-g .sx-ws { color: #6b6a64; }
.sx-g-strong, .sx-g-strong .sx-ws { color: #ffffff; }
.dark .sx-g { color: #f0efec; }
.dark .sx-g .sx-ws { color: #b5b3a9; }
.sx-g-start, .sx-g-repeated, .sx-g-eos { background: none; color: var(--sx-muted) !important; box-shadow: inset 0 0 0 1px var(--sx-axis); }
.sx-g-repeated { text-decoration: line-through; }
.sx-g-eos { font-style: italic; }
.sx-g-key { font-size: 0.8rem; padding: 0.05rem 0.3rem; }
.sx-divscale { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.sx-divbar { width: 9rem; height: 8px; border-radius: 2px; background: linear-gradient(to right in oklab, var(--sx-div-lo), var(--sx-div-mid), var(--sx-div-hi)); }
.sx-details { margin-top: 0.9rem; }
.sx-details summary { cursor: pointer; color: var(--sx-blue-deep); font-size: 0.95rem; }
.sx-details table { margin-top: 0.6rem; }
.sx-run { padding: 0.25rem; }

/* ------------------------------------------------------------------
   Transformer stage: plays once in four beats (about 3 s), moving the
   spotlight: context in -> layers run -> attention -> scores out.
   The resting state is the final state, so reduced motion loses nothing.
   ------------------------------------------------------------------ */
.sx-tf { --tf-d: 3.2s; --tf-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  display: flex; flex-direction: column; max-width: 64rem; margin-top: 0.6rem; }
.sx-tf-beat { padding: 0.8rem 1rem; border-left: 3px solid var(--sx-hair);
  animation: var(--tf-d) linear both; }
.sx-tf-in { animation-name: sx-spot-in; }
.sx-tf-net { animation-name: sx-spot-net; }
.sx-tf-out { animation-name: sx-spot-out; }
.sx-tf-label { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem;
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sx-muted); }
.sx-tf-label > span:first-child { color: var(--sx-ink-2); font-weight: 600; }
.sx-tf-note { text-transform: none; letter-spacing: 0; }
.sx-tf-link { display: block; width: 3px; height: 1.1rem; background: var(--sx-hair); }

/* Beat border lights up while it is the focus. */
.sx-tf-in { animation-name: sx-spot-in, sx-rule-in; }
.sx-tf-net { animation-name: sx-spot-net, sx-rule-net; }
.sx-tf-out { animation-name: sx-spot-out, sx-rule-out; }

@keyframes sx-spot-in  { 0%, 21% { opacity: 1 } 25%, 49% { opacity: .32 } 53%, 100% { opacity: 1 } }
@keyframes sx-spot-net { 0%, 18% { opacity: .32 } 23%, 49% { opacity: 1 } 53%, 72% { opacity: .5 } 76%, 100% { opacity: 1 } }
@keyframes sx-spot-out { 0%, 72% { opacity: .32 } 76%, 100% { opacity: 1 } }
@keyframes sx-rule-in  { 0%, 21%, 53%, 74% { border-left-color: var(--sx-blue) } 25%, 49%, 78%, 100% { border-left-color: var(--sx-hair) } }
@keyframes sx-rule-net { 0%, 18%, 53%, 100% { border-left-color: var(--sx-hair) } 23%, 49% { border-left-color: var(--sx-blue) } }
@keyframes sx-rule-out { 0%, 72% { border-left-color: var(--sx-hair) } 76%, 100% { border-left-color: var(--sx-blue) } }

/* 1. Context chips; 3. their fill is the attention weight. */
.sx-tf-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.sx-tf-chip { position: relative; display: inline-flex; align-items: baseline; gap: 0.35rem;
  padding: 0.18rem 0.45rem; border-radius: 4px; background: var(--sx-surface);
  border: 1px solid var(--sx-hair); font-family: var(--sx-mono); font-size: 0.95rem;
  animation: sx-chip-in 0.35s var(--tf-ease) calc(var(--i) * 12ms) both; }
.sx-tf-chip::before { content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: var(--sx-blue); opacity: var(--a);
  animation: sx-fill 0.6s var(--tf-ease) 1.7s both; }
.sx-tf-text, .sx-tf-badge { position: relative; }
.sx-tf-strong .sx-tf-text { color: var(--sx-on-fill); animation: sx-ink 0.4s 1.95s both; }
.sx-tf-badge { order: 2; font-size: 0.72rem; font-weight: 700; font-family: var(--sx-mono);
  color: var(--sx-blue-deep); animation: sx-pop 0.3s var(--tf-ease) calc(2.05s + var(--r) * 0.12s) both; }
.sx-tf-strong .sx-tf-badge { color: var(--sx-on-fill); }
.sx-tf-query { outline: 2px solid var(--sx-ink); outline-offset: 2px; }
@keyframes sx-chip-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes sx-fill { from { opacity: 0; } }
@keyframes sx-ink { from { color: var(--sx-ink); } }
@keyframes sx-pop { from { opacity: 0; transform: scale(0.6); } }

/* 2. The layers run one after another. */
.sx-tf-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
  gap: 4px; max-width: 40rem; }
.sx-tf-cell { display: grid; place-items: center; height: 2rem; border-radius: 4px;
  background: var(--sx-sunken); border: 1px solid var(--sx-hair);
  font-family: var(--sx-mono); font-size: 0.8rem; color: var(--sx-muted);
  animation: sx-flash 0.45s ease-out calc(0.75s + var(--i) * 65ms) both; }
.sx-tf-cell.sx-tf-on { border-color: var(--sx-blue); color: var(--sx-blue-deep);
  background: var(--sx-wash-a); font-weight: 700;
  animation: sx-hold 0.5s ease-out 1.65s both,
             sx-flash 0.45s ease-out calc(0.75s + var(--i) * 65ms) both; }
@keyframes sx-flash { 0% { background: var(--sx-sunken); }
  35% { background: var(--sx-blue); color: var(--sx-on-fill); } 100% { } }
@keyframes sx-hold { from { background: var(--sx-sunken); border-color: var(--sx-hair); } }

/* 4. Scores come out; the best one leads. */
.sx-tf-scores { display: grid; gap: 0.3rem; max-width: 40rem; }
.sx-tf-score { display: grid; grid-template-columns: 9rem 1fr 4.5rem; align-items: center;
  gap: 0.75rem; animation: sx-chip-in 0.35s var(--tf-ease) calc(2.45s + var(--i) * 70ms) both; }
.sx-tf-score .sx-num { text-align: right; color: var(--sx-ink-2); }
.sx-tf-track { height: 0.6rem; border-radius: 3px; background: var(--sx-sunken); overflow: hidden; }
.sx-tf-bar { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--sx-ref);
  transform-origin: left; transform: scaleX(var(--s));
  animation: sx-grow 0.6s var(--tf-ease) calc(2.5s + var(--i) * 70ms) both; }
.sx-tf-best .sx-tf-bar { background: var(--sx-blue); }
.sx-tf-best .sx-tok { font-weight: 700; }
@keyframes sx-grow { from { transform: scaleX(0); } }

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

/* ------------------------------------------------------------------
   Page frame: a readable column, centred, whatever the sidebar does.
   ------------------------------------------------------------------ */
main.contain { width: 100%; max-width: 1120px; margin-left: auto !important; margin-right: auto !important; }
.sidebar-parent { transition: padding-left 0.3s ease-in-out; }
/* Closed sidebar: keep the title clear of the toggle button. */
.gradio-container:not(:has(.sidebar.open)) main.contain { padding-left: 1.75rem; }
@media (min-width: 1300px) {
  .gradio-container:not(:has(.sidebar.open)) main.contain { padding-left: 0; }
}
.sx-title { padding: 0.35rem 0 0.5rem; }

/* ------------------------------------------------------------------
   Softer surfaces and motion
   ------------------------------------------------------------------ */
.sx, #sx-rail, #sx-controls, #sx-focus { --sx-r: 12px; --sx-r-s: 7px;
  --sx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sx-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 4px 16px rgb(16 24 40 / 0.05); }
.dark .sx { --sx-shadow: none; }
.sx-tape, .sx-cmp-col, .sx-stage { border-radius: var(--sx-r); box-shadow: var(--sx-shadow); }
.sx-tape, .sx-cmp-col { border-left-width: 1px; border-left-color: var(--sx-hair);
  transition: border-color 0.25s, box-shadow 0.25s; }
.sx-cmp-focus { border-color: var(--sx-blue); box-shadow: 0 0 0 3px var(--sx-wash-a), var(--sx-shadow); }
.sx-stage { padding: 1.5rem 1.75rem 1.75rem; min-height: 22rem; }
.sx-gen { border-radius: 5px; transition: background-color 0.25s; }
.sx-slot { border-radius: var(--sx-r-s); border-width: 1.5px; }
.sx-tile, .sx-tf-chip, .sx-tf-cell, .sx-g, .sx-note { border-radius: var(--sx-r-s) !important; }
.sx-bar, .sx-tf-bar, .sx-tf-track { border-radius: 999px !important; }
.sx-tf-beat { border-left-width: 2px; border-radius: 0 var(--sx-r-s) var(--sx-r-s) 0; }
.sx-tf-link { width: 2px; }

/* Each stage eases in; bars grow from the axis. */
.sx-stage > * { animation: sx-rise 0.32s var(--sx-ease) both; }
.sx-stage > *:nth-child(2) { animation-delay: 40ms; }
.sx-stage > *:nth-child(n+3) { animation-delay: 80ms; }
.sx-detect, .sx-detail, .sx-run { animation: sx-fade 0.3s ease both; }
.sx-bar { transform-origin: left center; animation: sx-grow 0.5s var(--sx-ease) 0.08s both; }
.sx-row { border-radius: var(--sx-r-s); transition: background-color 0.15s; }
.sx-bars .sx-row:not(.sx-row-head, .sx-axis, .sx-gap):hover,
.sx-bitrow:not(.sx-bitrow-head):hover, .sx-tf-score:hover { background: var(--sx-sunken); }
.sx-bitrow, .sx-tf-score { border-radius: var(--sx-r-s); transition: background-color 0.15s; }
.sx-fresh { animation: sx-land 0.45s var(--sx-ease) both; }
@keyframes sx-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes sx-fade { from { opacity: 0; } }
@keyframes sx-land { from { background: var(--sx-wash-a); color: var(--sx-ink); transform: translateY(-3px); opacity: 0.2; } }

/* Empty state */
.sx-empty { max-width: none; margin-top: 0.5rem; padding: 3.5rem 1.5rem; text-align: center;
  border: 1.5px dashed var(--sx-axis); border-radius: var(--sx-r); color: var(--sx-ink-2);
  animation: sx-fade 0.3s ease both; }
.sx-empty p { font-size: 1.1rem; }
.sx-empty-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 0.5rem;
  margin-top: 1.1rem; font-size: 0.86rem; color: var(--sx-muted); }
.sx-empty-steps span { padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--sx-sunken); }

/* Controls */
#sx-controls button, #sx-rail label, .gradio-container button {
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.08s; }
#sx-controls button:active { transform: translateY(1px); }
#sx-controls button:focus-visible, .gradio-container button:focus-visible {
  outline: 2px solid var(--sx-blue); outline-offset: 2px; }
#sx-rail .wrap { border-bottom-width: 1px; }
#sx-rail label { margin-bottom: -1px; border-bottom-width: 2px; border-radius: var(--sx-r-s) var(--sx-r-s) 0 0;
  transition: color 0.15s, border-color 0.2s, background-color 0.15s; }
#sx-rail label:hover { background: var(--sx-sunken); }
#sx-rail label.selected:hover { background: none; }
/* Sidebar mode picker: three equal rows. */
#sx-mode .wrap { display: grid; gap: 0.4rem; }
#sx-mode label { width: 100%; margin: 0; }

/* Small screens */
@media (max-width: 720px) {
  .sx-stage { padding: 1rem 1rem 1.25rem; }
  .sx-tape-body { font-size: 1.1rem; }
  #sx-rail .wrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  #sx-rail label { flex: 0 0 auto; padding-inline: 0.7rem; }
  .sx-tf-score { grid-template-columns: 6.5rem 1fr 3.5rem; }
  .sx-where { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .sx *, .sx { animation: none !important; transition: none !important; }
  .sidebar-parent { transition: none; }
}

/* Step rail: always one row; it scrolls sideways when the column is narrow. */
#sx-rail .wrap { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
#sx-rail label { flex: 1 0 auto; padding-inline: 0.6rem; }
.sx-cmp-tag { white-space: nowrap; }
.sx-cmp-title { flex-wrap: wrap; }

/* ------------------------------------------------------------------
   Tokenize: the tiles land, then each vocabulary ID appears underneath.
   ------------------------------------------------------------------ */
.sx-stage-tokens .sx-tile { display: inline-flex; flex-direction: column; align-items: center;
  gap: 0.15rem; padding: 0.4rem 0.6rem;
  animation: sx-chip-in 0.3s var(--sx-ease) calc(var(--i) * 14ms) both; }
.sx-stage-tokens .sx-tile-text { font-size: 1.05rem; color: var(--sx-ink); }
.sx-stage-tokens .sx-tile-id { font-size: 0.8rem; color: var(--sx-blue-deep); font-weight: 600;
  animation: sx-id-in 0.4s var(--sx-ease) calc(0.7s + var(--i) * 28ms) both; }
@keyframes sx-id-in { from { opacity: 0; transform: translateY(-7px); } }
/* The token that Append just added pops into the context. */
.sx-stage-tokens .sx-tile-new {
  animation: sx-pop-in 0.6s cubic-bezier(0.3, 1.7, 0.5, 1) 0.25s both; }
@keyframes sx-pop-in { 0% { opacity: 0; transform: scale(0.3); }
  60% { box-shadow: 0 0 0 8px var(--sx-wash-a); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Transformer: attention chart beside the scores. */
.sx-tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 820px) { .sx-tf-row { grid-template-columns: 1fr; gap: 1.1rem 0; } }
.sx-tf-att { animation-name: sx-spot-att, sx-rule-att; }
@keyframes sx-spot-att { 0%, 49% { opacity: .32 } 53%, 100% { opacity: 1 } }
@keyframes sx-rule-att { 0%, 49%, 78%, 100% { border-left-color: var(--sx-hair) } 53%, 74% { border-left-color: var(--sx-blue) } }
.sx-tf-att .sx-tf-score { animation-delay: calc(1.75s + var(--i) * 70ms); }
.sx-tf-att .sx-tf-bar { animation-delay: calc(1.8s + var(--i) * 70ms); }
.sx-tf-row .sx-tf-score { grid-template-columns: minmax(6.5rem, 9rem) 1fr 3.2rem; }
.sx-tf-row .sx-tf-label { flex-wrap: wrap; }
.sx-tf-q { font-family: var(--sx-mono); text-transform: none; letter-spacing: 0;
  padding: 0.05rem 0.35rem; border-radius: 5px; outline: 1.5px solid var(--sx-ink); color: var(--sx-ink); }
.sx-tf-pos { margin-left: 0.4rem; font-style: normal; font-size: 0.72rem; color: var(--sx-muted); font-weight: 400; }
.sx-tf-cells { max-width: none; }

/* ------------------------------------------------------------------
   Header
   ------------------------------------------------------------------ */
.sx-title { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 0.15rem 1.5rem;
  padding: 0.25rem 0 1rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--sx-hair); }
.sx-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--sx-blue-deep); }
.sx-logo { display: inline-flex; gap: 2px; }
.sx-logo i { display: block; width: 7px; height: 14px; border-radius: 2px; background: var(--sx-blue); }
.sx-logo i:nth-child(2) { opacity: 0.6; }
.sx-logo i:nth-child(3) { opacity: 0.3; }
.sx-title h1 { font-size: 1.75rem; line-height: 1.2; }
.sx-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; padding-bottom: 0.2rem; }
.sx-tag { padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--sx-sunken);
  color: var(--sx-ink-2); font-size: 0.82rem; white-space: nowrap; }
.sx-tag-key { background: var(--sx-wash-a); color: var(--sx-blue-deep); }
@media (max-width: 720px) { .sx-title { grid-template-columns: 1fr; }
  .sx-tags { justify-content: flex-start; } .sx-title h1 { font-size: 1.4rem; } }

/* ------------------------------------------------------------------
   Navigation: Back is an outline, Next step is the filled primary;
   the token jumps are quieter text buttons, set apart.
   ------------------------------------------------------------------ */
#sx-controls { gap: 0.5rem; }
#sx-back { background: var(--sx-surface) !important; color: var(--sx-ink) !important;
  border: 1.5px solid var(--sx-axis) !important; box-shadow: none !important; }
#sx-back:hover { border-color: var(--sx-ink-2) !important; background: var(--sx-sunken) !important; }
#sx-next { background: var(--sx-blue) !important; color: var(--sx-on-fill) !important;
  border: 1.5px solid var(--sx-blue) !important; font-weight: 600;
  box-shadow: 0 2px 8px rgb(42 120 214 / 0.3) !important; }
#sx-next:hover { background: var(--sx-blue-deep) !important; border-color: var(--sx-blue-deep) !important; }
.dark #sx-next:hover { background: var(--sx-blue) !important; filter: brightness(1.12); }
#sx-controls .sx-token-btn { background: none !important; border: 1.5px solid transparent !important;
  box-shadow: none !important; color: var(--sx-ink-2) !important; font-weight: 500; }
#sx-controls .sx-token-btn:hover { background: var(--sx-sunken) !important; color: var(--sx-ink) !important; }
#sx-prev-token { margin-left: 0.9rem; position: relative; overflow: visible; }
#sx-prev-token::before { content: ""; position: absolute; left: -0.75rem; top: 20%; bottom: 20%;
  width: 1px; background: var(--sx-hair); }
#sx-controls button { white-space: nowrap; flex: 0 0 auto !important; width: auto; }

/* ------------------------------------------------------------------
   Sample: the list dims, the drawn token is lifted out and lands where
   the Append step shows it. Append then starts without its own entrance.
   ------------------------------------------------------------------ */
.sx-pickwrap { position: relative; }
.sx-pickwrap .sx-row-rest { animation: sx-dim 0.5s ease 1s forwards; }
.sx-pickwrap .sx-row-chosen { animation: sx-chosen 0.6s var(--sx-ease) 1s both; }
.sx-pickwrap > .sx-bars, .sx-pickwrap > .sx-caption { animation: sx-out 0.5s ease 2s forwards; }
.sx-pick { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none;
  transform-origin: left top; animation: sx-pick 0.85s var(--sx-ease) 2s forwards; }
.sx-pick .sx-flow { margin: 0; }
@keyframes sx-dim { to { opacity: 0.12; } }
@keyframes sx-out { to { opacity: 0; } }
@keyframes sx-chosen { 40% { box-shadow: 0 0 0 3px var(--sx-blue); } 100% { box-shadow: 0 0 0 1.5px var(--sx-blue); } }
@keyframes sx-pick {
  from { opacity: 0; transform: translate(2.75rem, calc((var(--row) + 1) * 28px)) scale(0.4); }
  35% { opacity: 1; }
  to { opacity: 1; transform: none; } }
.sx-stage-append > * { animation: none; }
.sx-setup-key { margin-top: 0.6rem !important; }
.sx-keyinfo:empty { display: none; }

/* Tournament: change chips. Green gains, red losses, stronger = larger; grey = none. */
.sx { --sx-up: #1f9d55; --sx-up-ink: #14633a; --sx-down: #dc3d43; --sx-down-ink: #9b1c22; }
.dark .sx { --sx-up: #34c06f; --sx-up-ink: #9be8bd; --sx-down: #ef6b70; --sx-down-ink: #ffc2c4; }
.sx-delta { display: inline-block; min-width: 5.4rem; padding: 0.08rem 0.5rem; border-radius: 999px;
  text-align: right; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.sx-delta-up { color: var(--sx-up-ink);
  background: color-mix(in oklab, var(--sx-up) calc(var(--m) * 100%), var(--sx-surface)); }
.sx-delta-down { color: var(--sx-down-ink);
  background: color-mix(in oklab, var(--sx-down) calc(var(--m) * 100%), var(--sx-surface)); }
.sx-delta-strong { color: #fff; font-weight: 600; }
.sx-delta-same { color: var(--sx-muted); background: var(--sx-sunken); }
.sx-cols-3 .sx-row { grid-template-columns: 2rem minmax(6rem, 11rem) minmax(8rem, 1fr) 5rem 4.5rem 6.2rem; }

/* Detection table */
.sx-dwrap { margin-top: 0.7rem; max-width: 46rem; max-height: 26rem; overflow: auto;
  border: 1px solid var(--sx-hair); border-radius: var(--sx-r-s); }
.sx-details .sx-dtable { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0;
  font-variant-numeric: tabular-nums; }
.sx-dtable th { position: sticky; top: 0; z-index: 1; padding: 0.55rem 0.9rem; background: var(--sx-sunken);
  border-bottom: 1px solid var(--sx-axis); color: var(--sx-ink-2); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.03em; text-align: left; white-space: nowrap; }
.sx-dtable th.sx-num { text-align: right; }
.sx-dtable td, .sx-dtable td.sx-num { padding: 0.45rem 0.9rem; border-top: 0; border-bottom: 1px solid var(--sx-hair); vertical-align: middle; }
.sx-dtable tr:last-child td { border-bottom: 0; }
.sx-dtable tbody tr:nth-child(even) td { background: color-mix(in oklab, var(--sx-sunken) 55%, transparent); }
.sx-dtable tbody tr:hover td { background: var(--sx-wash-a); }
.sx-dtable td + td, .sx-dtable th + th { border-left: 1px solid var(--sx-hair); }
.sx-dtable .sx-idx { color: var(--sx-muted); width: 3rem; }
.sx-dtable .sx-tok { font-weight: 600; white-space: nowrap; }

.sx-pill { display: inline-block; padding: 0.05rem 0.6rem; border-radius: 999px; background: var(--sx-sunken);
  color: var(--sx-ink-2); font-size: 0.82rem; }
.sx-meter { position: relative; display: block; min-width: 8rem; height: 0.55rem; border-radius: 999px;
  background: var(--sx-sunken); overflow: hidden; }
.sx-meter i { display: block; height: 100%; border-radius: 999px; background: var(--sx-div-hi); }
.sx-meter-lo i { background: var(--sx-div-lo); }
.sx-meter::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: var(--sx-ink-2); }
.sx-delta { transition: color 0.2s; }

/* End button beside the token slider */
#sx-jump { align-items: stretch; gap: 0.5rem; }
#sx-jump { --sx-surface: var(--background-fill-primary); --sx-ink: var(--body-text-color);
  --sx-axis: var(--border-color-primary); --sx-ink-2: var(--body-text-color-subdued);
  --sx-sunken: var(--background-fill-secondary); }
#sx-end { align-self: center; flex: 0 0 auto !important; width: auto;
  background: var(--sx-surface) !important; color: var(--sx-ink) !important;
  border: 1.5px solid var(--sx-axis) !important; box-shadow: none !important; white-space: nowrap; }
#sx-end:hover { border-color: var(--sx-ink-2) !important; background: var(--sx-sunken) !important; }
.sx-foot { margin-top: 0.5rem !important; font-size: 0.85rem; color: var(--sx-ink-2); }

/* Theme switch in the header */
.sx-theme-btn { padding: 0.2rem 0.75rem; border-radius: 999px; border: 1.5px solid var(--sx-axis);
  background: var(--sx-surface); color: var(--sx-ink); font: inherit; font-size: 0.82rem;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s; }
.sx-theme-btn:hover { background: var(--sx-sunken); border-color: var(--sx-ink-2); }
.sx-theme-btn:focus-visible { outline: 2px solid var(--sx-blue); outline-offset: 2px; }
.sx-to-light, .dark .sx-to-dark { display: none; }
.dark .sx-to-light { display: inline; }

/* Score a text: one compact action */
#sx-score-btn { width: auto; flex: 0 0 auto; align-self: flex-start; font-size: 0.85rem;
  padding: 0.35rem 0.9rem; min-width: 0; }