body.is-ai .study>h1:first-child::before {
      content: "RAG · Talk to your own documents";
    }

    .study>h1 em,
    .topic-title em {
      color: var(--accent);
    }

    .viz-label {
      display: block;
      margin: 12px 0 6px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 600;
    }

    .viz-label:first-child {
      margin-top: 0;
    }


    .viz-stage.is-text {
      padding: 12px 14px;
      font-size: 16px;
      line-height: 1.6;
    }

    .viz-hint,
    .placeholder {
      color: var(--muted);
      font-size: 12.5px;
      font-style: italic;
    }

    .viz-svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .duo {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .msg {
      margin: 8px 0;
      padding: 8px 12px;
      font-size: 16px;
      background: var(--surface-raised);
      border-left: 3px solid var(--line);
      border-radius: 0 6px 6px 0;
    }

    .msg b {
      display: block;
      color: var(--muted);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
    }

    .msg.s1 {
      border-left-color: var(--blue);
    }

    .msg.s2 {
      border-left-color: var(--violet);
    }

    .msg.s3 {
      border-left-color: var(--accent);
    }

    .msg.s4 {
      border-left-color: var(--cyan);
    }

    .msg.s5 {
      border-left-color: var(--green);
    }

    .chunk-pill {
      display: inline-block;
      margin: 3px 4px 0 0;
      padding: 3px 8px;
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 12px;
      border: 1px dashed var(--accent);
      border-radius: 5px;
    }

    /* vector arithmetic */
    .eq-line {
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 18px;
      font-weight: 700;
      line-height: 2.2;
      text-align: center;
    }

    .eq-line .w {
      margin: 0 2px;
      padding: 3px 8px;
      color: var(--accent-bright);
      background: rgba(224, 175, 104, 0.14);
      border-radius: 6px;
    }

    .eq-line .op,
    .eq-line .eq-sign {
      margin: 0 4px;
      color: var(--muted);
    }

    .eq-line .ans {
      padding: 3px 10px;
      color: var(--green);
      background: rgba(115, 201, 145, 0.16);
      border-radius: 6px;
      opacity: 0;
      transition: opacity 0.5s;
    }

    .eq-line .ans.show {
      opacity: 1;
    }

    /* similarity meter */
    .meter {
      margin-top: 12px;
      text-align: center;
    }

    .meter-val {
      color: var(--accent-bright);
      font-size: 44px;
      font-weight: 700;
      line-height: 1;
    }

    .meter-lab {
      margin-top: 6px;
      color: var(--muted);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .meter-bar {
      height: 12px;
      margin-top: 14px;
      overflow: hidden;
      background: var(--surface-raised);
      border: 1px solid var(--line);
      border-radius: 6px;
    }

    .meter-fill {
      height: 100%;
      min-width: 2px;
      background: linear-gradient(90deg, var(--red), var(--accent), var(--green));
      transition: width 0.5s ease;
    }

    .meter-verdict {
      min-height: 20px;
      margin-top: 10px;
      color: #c6d1dc;
      font-size: 16px;
      font-style: italic;
    }

    /* chunking strategies */
    .src-text {
      white-space: pre-wrap;
      font-size: 16px;
    }

    .strat-tab small {
      font-weight: 500;
      opacity: 0.75;
    }

    .strat-chunks {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-top: 12px;
    }

    .cchunk {
      display: flex;
      overflow: hidden;
      border: 1px solid;
      border-radius: 8px;
    }

    .cchunk .stripe {
      flex: none;
      width: 6px;
    }

    .cchunk .cbody {
      flex: 1;
      min-width: 0;
      padding: 9px 12px;
      font-size: 16px;
      line-height: 1.55;
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }

    .cchunk .meta {
      flex: none;
      min-width: 82px;
      align-self: center;
      padding: 0 10px;
      color: var(--muted);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 11px;
      line-height: 1.4;
      text-align: center;
      border-left: 1px dashed var(--line);
    }

    .cchunk.split {
      border-style: dashed;
    }

    .cchunk.split .cbody::before {
      content: "🪓 ";
      opacity: 0.7;
    }

    .cchunk .topic-tag {
      display: inline-block;
      margin-right: 8px;
      padding: 1px 7px;
      color: var(--page);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      vertical-align: 1px;
      border-radius: 4px;
    }

    .cchunk .header-line {
      display: block;
      margin-bottom: 3px;
      color: var(--text);
      font-weight: 700;
    }

    .strat-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
      margin-top: 12px;
      color: var(--muted);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 12px;
    }

    .strat-stats b {
      display: block;
      color: var(--accent-bright);
      font-size: 18px;
    }

    /* reranker */
    .rr-cols {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 14px;
      align-items: center;
    }

    .rr-col {
      padding: 12px;
      background: var(--surface-raised);
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .rr-head {
      margin-bottom: 8px;
      color: var(--muted);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-align: center;
      text-transform: uppercase;
    }

    .rr-head.before {
      color: var(--blue);
    }

    .rr-head.after {
      color: var(--cyan);
    }

    .rr-arrow {
      color: var(--accent);
      font-size: 26px;
      text-align: center;
    }

    .rr-col .doc {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin: 5px 0;
      padding: 8px 10px;
      font-size: 13px;
      background: var(--code);
      border: 1px solid var(--line-soft);
      border-radius: 6px;
    }

    .rr-col .doc .sc {
      flex: none;
      padding: 1px 6px;
      color: var(--accent-bright);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 12px;
      font-weight: 700;
      background: var(--surface);
      border-radius: 4px;
    }

    .rr-col .doc.gold {
      background: rgba(224, 175, 104, 0.1);
      border-color: var(--accent);
    }

    /* hybrid */
    .hy-cols {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .hcol {
      padding: 12px;
      background: var(--surface-raised);
      border: 1px solid var(--line);
      border-radius: 8px;
    }

    .hcol-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      font-weight: 700;
    }

    .hcol-tag {
      padding: 1px 6px;
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border-radius: 4px;
    }

    .hcol.bm .hcol-tag {
      color: var(--accent-bright);
      background: rgba(224, 175, 104, 0.14);
    }

    .hcol.vec .hcol-tag {
      color: var(--violet);
      background: rgba(197, 134, 192, 0.14);
    }

    .hcol.hy .hcol-tag {
      color: var(--cyan);
      background: rgba(78, 201, 176, 0.14);
    }

    .h-doc {
      margin: 4px 0;
      padding: 7px 10px;
      font-size: 12.5px;
      background: var(--code);
      border: 1px solid var(--line-soft);
      border-radius: 6px;
    }

    .h-doc.win {
      font-weight: 600;
      background: rgba(78, 201, 176, 0.1);
      border-color: var(--cyan);
    }

    .h-doc small {
      color: var(--muted);
      font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
      font-weight: 400;
    }

    .hcol .why {
      margin: 8px 0 0;
      padding-top: 8px;
      color: var(--muted);
      font-size: 12.5px;
      font-style: italic;
      border-top: 1px dashed var(--line);
    }

    /* pdf chat */
    .pdf-ui {
      display: grid;
      grid-template-columns: 1fr 1.4fr;
      gap: 12px;
    }

    .pdf-prev {
      max-height: 230px;
      overflow-y: auto;
      white-space: pre-wrap;
      font-size: 12.5px;
    }

    .pdf-log {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 260px;
      max-height: 380px;
      overflow-y: auto;
    }



    @media (max-width: 720px) {

      .duo,
      .rr-cols,
      .hy-cols,
      .pdf-ui {
        grid-template-columns: 1fr;
      }

      .rr-arrow {
        transform: rotate(90deg);
      }
    }