.yj-app{max-width:1160px;margin:auto;overflow-x:hidden;color:var(--color-ink)}
.yj-topbar{display:grid;grid-template-columns:46px minmax(0,1fr) 46px;gap:0;height:56px;border-bottom:1px solid var(--color-border)}
.yj-back{display:flex;align-items:center;justify-content:center;min-height:var(--control-min-height);text-decoration:none;color:var(--color-accent)}
.yj-title{margin:0;text-align:center;font-family:var(--font-family-base);font-size:var(--text-page-title);font-weight:var(--text-page-title-font-weight);line-height:var(--text-page-title-line-height);letter-spacing:var(--text-page-title-letter-spacing)}
.yj-view{padding:16px 0}
.yj-tagline,.yj-scrollhint,.yj-disclaimer,.yj-source{color:var(--color-muted);font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-tagline{margin:0 0 8px}
.yj-lead,.yj-count,.yj-note,.yj-empty-text{color:var(--color-muted);font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-lead{margin:0 0 16px}
.yj-switch,.yj-dimswitch{display:flex;gap:0;margin-bottom:16px}
.yj-control{flex:1;min-height:var(--control-min-height);border:1px solid var(--color-border);border-radius:0;background:var(--color-surface);color:var(--color-accent);padding:10px 14px;transition:background-color 120ms;font-family:var(--font-family-base);font-size:var(--text-button);font-weight:var(--text-button-font-weight);line-height:var(--text-button-line-height);letter-spacing:var(--text-button-letter-spacing)}
.yj-control:first-child{border-radius:12px 0 0 12px}
.yj-control:last-child{border-radius:0 12px 12px 0}
.yj-control[aria-pressed="true"],.yj-chip[aria-pressed="true"]{background:var(--color-surface-live)}
.yj-control:active,.yj-chip:active,.yj-cell:active,.yj-row:active,.yj-rel-row:active,.yj-btn:active{background:var(--color-surface-tint)}
.yj-matrix-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
.yj-matrix{display:grid;grid-template-columns:48px repeat(8,68px);grid-template-rows:42px repeat(8,66px);width:592px;background:var(--color-surface)}
.yj-corner,.yj-colhead,.yj-rowhead,.yj-cell{border-right:1px solid var(--color-border);border-bottom:1px solid var(--color-border);min-width:0}
.yj-colhead,.yj-rowhead{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-colhead{position:sticky;top:0;z-index:2;background:var(--color-surface);border-top:1px solid var(--color-border)}
.yj-rowhead{position:sticky;left:0;z-index:3;background:var(--color-surface);border-left:1px solid var(--color-border)}
.yj-corner{position:sticky;top:0;left:0;z-index:4;background:var(--color-surface);border-top:1px solid var(--color-border);border-left:1px solid var(--color-border)}
.yj-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:var(--color-ink);touch-action:manipulation;transition:background-color 120ms;font-family:var(--font-family-base);font-size:var(--text-body);font-weight:var(--text-body-font-weight);line-height:var(--text-body-line-height);letter-spacing:var(--text-body-letter-spacing)}
.yj-cell-no{align-self:flex-end;padding-right:5px;color:var(--color-muted);font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-cell-sym{font-family:var(--font-family-base);font-size:var(--text-body-sm);font-weight:var(--text-body-sm-font-weight);line-height:var(--text-body-sm-line-height);letter-spacing:var(--text-body-sm-letter-spacing)}
.yj-cell-name{white-space:nowrap;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-cell[data-pure="true"]{background:#f2f6f0}
.yj-cell:hover,.yj-cell[data-pure="true"]:active{background:var(--color-surface-tint)}
.yj-skeleton,.yj-missing{background:var(--color-surface-tint)}
.yj-symbol,.yj-cell-sym,.yj-row-sym,.yj-figure{font-family:var(--font-family-base);font-size:var(--text-body);font-weight:var(--text-body-font-weight);line-height:var(--text-body-line-height);letter-spacing:var(--text-body-letter-spacing)}
.yj-chips{display:flex;gap:6px;overflow-x:auto;padding:4px 0}
.yj-chip{flex:0 0 40px;width:40px;height:56px;min-height:56px;padding:0;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-ink);white-space:nowrap;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-list{border:1px solid var(--color-border);border-radius:12px;overflow:hidden;background:var(--color-surface)}
.yj-row{display:flex;align-items:center;gap:8px;height:64px;padding:0 12px;text-decoration:none;color:var(--color-ink);border-bottom:1px solid var(--color-border);white-space:nowrap;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-row:last-child{border-bottom:0}
.yj-row-no{width:20px;color:var(--color-muted);font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-row-sym{font-family:var(--font-family-base);font-size:var(--text-body-sm);font-weight:var(--text-body-sm-font-weight);line-height:var(--text-body-sm-line-height);letter-spacing:var(--text-body-sm-letter-spacing)}
.yj-row-name{font-family:var(--font-family-base);font-size:var(--text-body);font-weight:var(--text-body-font-weight);line-height:var(--text-body-line-height);letter-spacing:var(--text-body-letter-spacing);font-weight:var(--text-button-font-weight)}
.yj-row-other{margin-left:auto;color:var(--color-muted);font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-row[aria-current="true"]{background:var(--color-surface-live);border-left:3px solid #527a60;pointer-events:none}
.yj-hex-no{text-align:center;color:var(--color-muted);margin:12px 0;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-hex-name{text-align:center;margin:0 0 16px;font-family:var(--font-family-base);font-size:var(--text-section-title);font-weight:var(--text-section-title-font-weight);line-height:var(--text-section-title-line-height);letter-spacing:var(--text-section-title-letter-spacing)}
.yj-figure{display:flex;flex-direction:column;align-items:center;margin:0 0 24px;font-family:var(--font-family-base);font-size:var(--text-body-lg);font-weight:var(--text-body-lg-font-weight);line-height:var(--text-body-lg-line-height);letter-spacing:var(--text-body-lg-letter-spacing)}
.yj-tri{padding:16px;margin:12px 0;border:1px solid var(--color-border);background:var(--color-surface);border-radius:12px;text-align:center}
.yj-tri-head{color:var(--color-muted);margin:0;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-tri-symbol{display:block;font-family:var(--font-family-base);font-size:var(--text-body-lg);font-weight:var(--text-body-lg-font-weight);line-height:var(--text-body-lg-line-height);letter-spacing:var(--text-body-lg-letter-spacing)}
.yj-tri-name{white-space:nowrap;margin:0;font-family:var(--font-family-base);font-size:var(--text-subsection-title);font-weight:var(--text-subsection-title-font-weight);line-height:var(--text-subsection-title-line-height);letter-spacing:var(--text-subsection-title-letter-spacing)}
.yj-sec-title{margin:24px 0 12px;font-family:var(--font-family-base);font-size:var(--text-subsection-title);font-weight:var(--text-subsection-title-font-weight);line-height:var(--text-subsection-title-line-height);letter-spacing:var(--text-subsection-title-letter-spacing)}
.yj-rel-row{display:flex;align-items:center;justify-content:space-between;min-height:56px;padding:12px 16px;border-bottom:1px solid var(--color-border);background:var(--color-surface);text-decoration:none;color:var(--color-ink);font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-btn{display:flex;align-items:center;justify-content:center;min-height:var(--control-min-height);margin:24px auto;padding:10px 18px;width:fit-content;border:1px solid var(--color-accent);border-radius:12px;color:var(--color-accent);background:var(--color-surface);text-decoration:none;font-family:var(--font-family-base);font-size:var(--text-button);font-weight:var(--text-button-font-weight);line-height:var(--text-button-line-height);letter-spacing:var(--text-button-letter-spacing)}
.yj-source{overflow-wrap:anywhere}
.yj-source summary{min-height:var(--control-min-height);cursor:pointer;display:list-item}
.yj-source-line{display:grid;grid-template-columns:100px 1fr;gap:12px;margin:8px 0}
.yj-disclaimer{border-top:1px solid var(--color-border);padding-top:16px;margin-top:8px}
.yj-empty-title{text-align:center;margin:24px 0 12px;font-family:var(--font-family-base);font-size:var(--text-section-title);font-weight:var(--text-section-title-font-weight);line-height:var(--text-section-title-line-height);letter-spacing:var(--text-section-title-letter-spacing)}
.yj-empty-text{text-align:center}
.yj-retry{display:block;margin:16px auto}
.yj-usage{margin:0 0 6px}
.yj-usage-title{margin:0 0 4px;font-family:var(--font-family-base);font-size:var(--text-body-sm);font-weight:var(--text-body-sm-font-weight);line-height:var(--text-body-sm-line-height);letter-spacing:var(--text-body-sm-letter-spacing);font-weight:var(--text-button-font-weight)}
.yj-usage-steps{padding-left:18px;margin:0 0 8px;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-usage-steps li{margin:0}
.yj-numrow{display:grid;grid-template-columns:repeat(8,minmax(42px,1fr));gap:6px;overflow-x:auto;padding-bottom:2px}
.yj-numcell{text-align:center;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);padding:3px 0;font-family:var(--font-family-base);font-size:var(--text-body);font-weight:var(--text-body-font-weight);line-height:var(--text-body-line-height);letter-spacing:var(--text-body-letter-spacing)}
.yj-numcell-no{display:block;font-family:var(--font-family-base);font-size:var(--text-body-sm);font-weight:var(--text-body-sm-font-weight);line-height:var(--text-body-sm-line-height);letter-spacing:var(--text-body-sm-letter-spacing);font-weight:var(--text-button-font-weight)}
.yj-numcell-tri{display:block;white-space:nowrap;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-usage-rem{color:var(--color-accent);margin:6px 0 4px;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-usage-note{color:var(--color-muted);margin:4px 0;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-usage-example{border:1px solid var(--color-border);border-radius:12px;padding:0 10px;margin-top:6px}
.yj-usage-example summary{min-height:var(--control-min-height);cursor:pointer;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-ex-line{margin:6px 0;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-ex-result{margin:10px 0;font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-ex-result a{color:var(--color-accent);display:inline-block;padding:8px 4px}
@media(max-width:760px){.yj-scrollhint{margin:0 0 8px}.yj-numrow{gap:1px}}
@media(min-width:760px){
  .yj-app{width:max(750px,100%);position:relative;left:50%;transform:translateX(-50%);margin:0}
  .yj-matrix{grid-template-columns:62px repeat(8,86px);grid-template-rows:48px repeat(8,82px);width:750px;margin:auto}
  .yj-cell-no{font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
  .yj-cell-sym{font-family:var(--font-family-base);font-size:var(--text-body-lg);font-weight:var(--text-body-lg-font-weight);line-height:var(--text-body-lg-line-height);letter-spacing:var(--text-body-lg-letter-spacing)}
  .yj-cell-name{font-family:var(--font-family-base);font-size:var(--text-body);font-weight:var(--text-body-font-weight);line-height:var(--text-body-line-height);letter-spacing:var(--text-body-letter-spacing)}
  .yj-scrollhint{display:none}
  .yj-list,.yj-tri,.yj-btn{border-radius:16px}
}
@media(prefers-reduced-motion:reduce){.yj-control,.yj-cell{transition:none}}

/* Diagram glyphs need larger sizes to distinguish all six lines; these are not text roles. */
.yj-figure{font-size:40px;line-height:1}.yj-tri-symbol{font-size:32px;line-height:1.3}.yj-back{font-size:var(--text-body-sm)}

/* M-04: mobile matrix horizontal-scroll fade hint (fixed to the scroller edge). */
@media(max-width:759px){
.yj-matrix-scroll{background:linear-gradient(270deg,var(--color-bg),rgba(244,246,244,0)) right/36px 100% no-repeat,linear-gradient(90deg,var(--color-bg),rgba(244,246,244,0)) left/36px 100% no-repeat}
}

/* YJ64_TEXT_V1 classic-text layer. Three layers must stay visually distinct:
   classic (经文, default-visible) / commentary (传文, collapsed) / modern (整理说明). */
.yj-classic{margin:24px 0}
.yj-quote{margin:12px 0;padding:12px 16px;border-left:3px solid var(--color-accent);background:var(--color-surface);border-radius:0 8px 8px 0}
.yj-layer{display:inline-block;margin:0 0 6px;color:var(--color-muted);font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-quote-text{margin:0;font-family:var(--font-family-base);font-size:var(--text-body-lg);font-weight:var(--text-body-lg-font-weight);line-height:var(--text-body-lg-line-height);letter-spacing:var(--text-body-lg-letter-spacing)}
.yj-lines{display:grid;gap:0;margin:16px 0}
.yj-line,.yj-special{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--color-border)}
.yj-special{border-bottom:0;border-top:1px solid var(--color-border);margin-top:4px;padding-top:14px}
.yj-line-label{color:var(--color-muted);font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing);white-space:nowrap}
.yj-line-text{margin:0;font-family:var(--font-family-base);font-size:var(--text-body);font-weight:var(--text-body-font-weight);line-height:var(--text-body-line-height);letter-spacing:var(--text-body-letter-spacing);overflow-wrap:anywhere}
.yj-layer-note{margin:12px 0 0;color:var(--color-muted);font-family:var(--font-family-base);font-size:var(--text-caption);font-weight:var(--text-caption-font-weight);line-height:var(--text-caption-line-height);letter-spacing:var(--text-caption-letter-spacing)}
.yj-commentary{margin:24px 0}
.yj-commentary-summary{min-height:var(--control-min-height);cursor:pointer;display:list-item;font-family:var(--font-family-base);font-size:var(--text-subsection-title);font-weight:var(--text-subsection-title-font-weight);line-height:var(--text-subsection-title-line-height);letter-spacing:var(--text-subsection-title-letter-spacing)}
@media(max-width:759px){
  .yj-line,.yj-special{grid-template-columns:1fr;gap:4px}
  .yj-quote{padding:10px 12px}
  .yj-quote-text{font-size:var(--text-body)}
}

.yj-topbar{grid-template-columns:80px minmax(0,1fr) 40px;height:auto;min-height:56px}.yj-title{grid-column:2}.yj-back{min-height:44px;display:flex;align-items:center}.yj-entry-note{line-height:1.7;color:#526356}.yj-entry-note span{display:block}

.yj-chip{flex-basis:44px;width:44px}
.yj-cast{margin:24px 0;padding:16px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface)}
.yj-moving-lines{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}.yj-line-choice{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--color-border);border-radius:8px;min-height:44px}
.yj-pay-action{min-height:44px;padding:10px 16px;border:0;border-radius:8px;background:var(--color-accent);color:white;cursor:pointer}.yj-pay-action:disabled{opacity:.6;cursor:wait}
.yj-change-preview,.yj-payment-state,.yj-result-text{line-height:1.7}.yj-payment-qr{display:block;max-width:260px;margin:14px 0}.yj-result-text{overflow-wrap:anywhere}
.yj-free-reading{margin:20px 0;padding:20px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface)}
.yj-free-reading .yj-hex-name{margin:12px 0}.yj-free-reading .yj-change-preview{margin:8px 0}
.yj-related{margin:24px 0}.yj-related>summary,.yj-cast>summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:600}
.yj-detail-summary{margin:12px 0 18px;line-height:1.7}.yj-detail-summary+.yj-pay-action{display:block;margin-bottom:16px}