.live-preview-section:where(.io-g2z2fuxj){width:100%;margin:2.25rem 0 3.5rem}.live-preview-card:where(.io-g2z2fuxj){background-color:var(--card);border:1px solid var(--border);border-radius:var(--radius-large);box-shadow:var(--shadow-small);padding:1.25rem 1.5rem;transition:border-color .15s;position:relative;overflow:visible}.live-preview-card:where(.io-g2z2fuxj):hover{border-color:light-dark(#cbd5e1,#3f3f46)}.preview-toolbar:where(.io-g2z2fuxj){border-bottom:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-bottom:.85rem;display:flex}.preview-badge:where(.io-g2z2fuxj){color:var(--muted-foreground);background:var(--muted);border:1px solid var(--border);border-radius:var(--radius-small,4px);align-items:center;padding:.2rem .55rem;font-size:.75rem;font-weight:500;display:inline-flex}.reader-controls-wrap:where(.io-g2z2fuxj){align-items:center;gap:.75rem;display:flex}.font-size-control:where(.io-g2z2fuxj){background:var(--muted);border-radius:var(--radius-medium);border:1px solid var(--border);align-items:center;gap:1px;padding:2px;display:inline-flex}.size-step-btn:where(.io-g2z2fuxj){color:var(--foreground);border-radius:calc(var(--radius-medium) - 2px);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:.2rem .55rem;font-size:.75rem;font-weight:600;line-height:1.2;transition:all .15s;display:inline-flex}.size-step-btn:where(.io-g2z2fuxj):hover:not(:disabled){background:var(--card);box-shadow:var(--shadow-small)}.size-step-btn:where(.io-g2z2fuxj):disabled{opacity:.25;cursor:not-allowed}.annotation-segmented-control:where(.io-g2z2fuxj){background:var(--muted);border-radius:var(--radius-medium);border:1px solid var(--border);align-items:center;gap:1px;padding:2px;display:inline-flex}.annotation-seg-btn:where(.io-g2z2fuxj){color:light-dark(#374151,#d4d4d8);border-radius:calc(var(--radius-medium) - 2px);cursor:pointer;user-select:none;background:0 0;border:none;justify-content:center;align-items:center;min-width:3.25rem;padding:.2rem .6rem;font-size:.75rem;font-weight:500;line-height:1.2;transition:background-color .15s,color .15s,box-shadow .15s;display:inline-flex}.annotation-seg-btn:where(.io-g2z2fuxj):hover{color:var(--foreground)}.annotation-seg-btn:where(.io-g2z2fuxj).active{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-small)}.preview-reading-content:where(.io-g2z2fuxj){font-size:var(--reader-font-size,1.75rem);color:var(--foreground);line-height:2.35;font-family:var(--font-sans);text-align:center;user-select:none;margin:0;padding:1.25rem .5rem}.article-paragraph:where(.io-g2z2fuxj){margin:0}.article-sentence:where(.io-g2z2fuxj){display:inline}.token:where(.io-g2z2fuxj){line-height:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone;display:inline}.char:where(.io-g2z2fuxj){vertical-align:bottom;border-bottom:1.5px dotted #0000;flex-direction:column;justify-content:flex-end;align-items:center;margin-bottom:-1.5px;padding:.12em .08em .06em;line-height:1.15;transition:background .12s;display:inline-flex;position:relative}.char:where(.io-g2z2fuxj):before{content:" ";height:1.13333em;color:var(--muted-foreground);text-align:center;user-select:none;pointer-events:none;opacity:0;visibility:hidden;justify-content:center;align-items:flex-end;margin-bottom:.16em;font-size:.75em;font-weight:400;line-height:1;transition:opacity .15s,visibility .15s;display:flex;text-decoration:none!important}.char:where(.io-g2z2fuxj)[data-tone=""]:before,.char:where(.io-g2z2fuxj)[data-pinyin=""]:before,.char:where(.io-g2z2fuxj):not([data-tone]):before{content:" "!important;opacity:0!important;visibility:hidden!important}.article-reader-container:where(.io-g2z2fuxj)[data-annotation=tones] .char:where(.io-g2z2fuxj):not([data-tone=""]):before,.article-reader-container:where(.io-g2z2fuxj).show-tones .char:where(.io-g2z2fuxj):not([data-tone=""]):before{content:attr(data-tone);opacity:1;visibility:visible;height:1.13333em;margin-bottom:.16em;font-family:PinyinShengdiaoDatong,sans-serif;font-size:.75em}.article-reader-container:where(.io-g2z2fuxj)[data-annotation=pinyin] .char:where(.io-g2z2fuxj):not([data-pinyin=""]):before{content:attr(data-pinyin);font-family:var(--font-pinyin);letter-spacing:0;white-space:nowrap;opacity:1;visibility:visible;height:1.63462em;margin-bottom:.230769em;font-size:.52em;font-weight:400;line-height:1}.token:where(.io-g2z2fuxj).word{cursor:pointer;margin:0;transition:color .12s}.token:where(.io-g2z2fuxj).word:hover{color:light-dark(#92400e,#fde68a)}.article-reader-container:where(.io-g2z2fuxj)[data-annotation=none] .token:where(.io-g2z2fuxj).word:hover .char:where(.io-g2z2fuxj),.article-reader-container:where(.io-g2z2fuxj):not([data-annotation]):not(.show-tones) .token:where(.io-g2z2fuxj).word:hover .char:where(.io-g2z2fuxj){background:linear-gradient(#0000 30%,light-dark(#f59e0b29,#fbbf2438) 30%)}.article-reader-container:where(.io-g2z2fuxj)[data-annotation=tones] .token:where(.io-g2z2fuxj).word:hover .char:where(.io-g2z2fuxj),.article-reader-container:where(.io-g2z2fuxj)[data-annotation=pinyin] .token:where(.io-g2z2fuxj).word:hover .char:where(.io-g2z2fuxj),.article-reader-container:where(.io-g2z2fuxj).show-tones .token:where(.io-g2z2fuxj).word:hover .char:where(.io-g2z2fuxj){background-color:light-dark(#f59e0b26,#fbbf2433)}.token:where(.io-g2z2fuxj).word:hover .char:where(.io-g2z2fuxj):first-child{border-top-left-radius:var(--radius-small,3px);border-bottom-left-radius:var(--radius-small,3px)}.token:where(.io-g2z2fuxj).word:hover .char:where(.io-g2z2fuxj):last-child{border-top-right-radius:var(--radius-small,3px);border-bottom-right-radius:var(--radius-small,3px)}.token:where(.io-g2z2fuxj).word:hover .char:where(.io-g2z2fuxj):before{color:light-dark(#b45309,#fbbf24)}.token:where(.io-g2z2fuxj).punctuation{letter-spacing:0}.preview-footer-hint:where(.io-g2z2fuxj){color:var(--muted-foreground);border-top:1px dashed var(--border);justify-content:center;align-items:center;gap:.4rem;margin-top:.5rem;padding-top:.75rem;font-size:.78rem;display:flex}@media (width<=640px){.preview-reading-content:where(.io-g2z2fuxj){font-size:var(--reader-font-size,1.45rem);line-height:2.2}.size-step-btn:where(.io-g2z2fuxj){min-width:32px;min-height:32px;padding:.25rem .55rem;font-size:.8rem}.annotation-seg-btn:where(.io-g2z2fuxj){min-height:32px;padding:.25rem .65rem;font-size:.8rem}}
