:root{--cf-ink: #1c2a2b;--cf-muted: #55666a;--cf-faint: #8b9a9d;--cf-surface: #ffffff;--cf-paper: #f3f6f5;--cf-line: #dbe3e1;--cf-accent: #0b6b63;--cf-accent-dark: #084f49;--cf-accent-soft: #e0f1ee;--cf-you: #008f83;--cf-eng: #b56f0c;--cf-radius: 12px;--cf-radius-sm: 8px;--cf-shadow: 0 10px 28px rgba(28,42,43,0.08);--cf-focus: 0 0 0 3px rgba(11,107,99,0.28);--cf-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--primary: var(--cf-accent);--primary-dark: var(--cf-accent-dark);--border: var(--cf-line);--surface: var(--cf-surface);--shadow-soft: var(--cf-shadow);--surface-muted: var(--cf-paper);--text-main: var(--cf-ink);--text-muted: var(--cf-muted);}
.cf-tool{background: var(--cf-surface);border: 1px solid var(--cf-line);border-radius: var(--cf-radius);box-shadow: var(--cf-shadow);color: var(--cf-ink);overflow: hidden;}
.cf-tool [hidden]{display: none !important;}
.cf-byline{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 0.3rem 1rem;padding: 0.7rem 1.3rem;border-bottom: 1px solid var(--cf-line);font-size: 0.86rem;color: var(--cf-muted);}
.cf-byline-author{font-weight: 600;color: var(--cf-ink);}
.cf-byline .author-link{color: var(--cf-accent);text-decoration: none;}
.cf-byline .author-link:hover{text-decoration: underline;}
.cf-body{display: grid;grid-template-columns: minmax(0,5fr) minmax(0,7fr);}
.cf-in{padding: 1.3rem;border-right: 1px solid var(--cf-line);display: flex;flex-direction: column;gap: 0.8rem;}
.cf-out{padding: 1.3rem;display: flex;flex-direction: column;gap: 1rem;min-width: 0;}
.cf-label{display: block;font-weight: 700;font-size: 0.95rem;margin: 0;}
.cf-text{width: 100%;min-height: 320px;flex: 1;resize: vertical;border: 1px solid var(--cf-line);border-radius: var(--cf-radius-sm);padding: 0.9rem;font-size: 0.97rem;line-height: 1.6;color: var(--cf-ink);background: var(--cf-surface);}
.cf-text:focus{outline: none;border-color: var(--cf-accent);box-shadow: var(--cf-focus);}
.cf-actions{display: flex;flex-wrap: wrap;gap: 0.5rem;}
.cf-btn{border: 1px solid var(--cf-accent);background: var(--cf-accent);color: #fff;font-weight: 600;font-size: 0.9rem;padding: 0.5rem 1rem;border-radius: var(--cf-radius-sm);cursor: pointer;}
.cf-btn:hover{background: var(--cf-accent-dark);border-color: var(--cf-accent-dark);}
.cf-btn-ghost{background: var(--cf-surface);color: var(--cf-accent);}
.cf-btn-ghost:hover{background: var(--cf-accent-soft);color: var(--cf-accent-dark);border-color: var(--cf-accent);}
.cf-btn:disabled{opacity: 0.45;cursor: not-allowed;}
.cf-btn:focus-visible,.cf-seg-btn:focus-visible,.cf-file:focus-within{outline: none;box-shadow: var(--cf-focus);}
.cf-file{position: relative;overflow: hidden;display: inline-flex;align-items: center;margin: 0;}
.cf-file input{position: absolute;inset: 0;opacity: 0;cursor: pointer;}
.cf-note{font-size: 0.84rem;color: var(--cf-muted);margin: 0;}
.cf-note:empty{display: none;}
.cf-empty{border: 1px dashed var(--cf-line);border-radius: var(--cf-radius-sm);min-height: 320px;display: flex;align-items: center;justify-content: center;text-align: center;padding: 1.5rem;color: var(--cf-muted);flex: 1;}
.cf-empty p{margin: 0;max-width: 34ch;}
.cf-result{display: flex;flex-direction: column;gap: 1rem;min-width: 0;}
.cf-stats{display: grid;grid-template-columns: repeat(6,minmax(0,1fr));gap: 0;margin: 0;border: 1px solid var(--cf-line);border-radius: var(--cf-radius-sm);overflow: hidden;}
.cf-stats div{padding: 0.55rem 0.7rem;min-width: 0;border-right: 1px solid var(--cf-line);}
.cf-stats div:last-child{border-right: 0;}
.cf-stats dt{font-size: 0.72rem;color: var(--cf-muted);font-weight: 600;line-height: 1.25;}
.cf-stats dd{margin: 0.2rem 0 0;font-size: 1.1rem;font-weight: 700;font-variant-numeric: tabular-nums;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.cf-chart-head{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.5rem 1rem;margin-bottom: 0.6rem;}
.cf-chart-head h2{font-size: 0.95rem;font-weight: 700;margin: 0;}
.cf-seg{display: inline-flex;border: 1px solid var(--cf-line);border-radius: var(--cf-radius-sm);background: var(--cf-surface);padding: 2px;}
.cf-seg-btn{border: 0;background: none;color: var(--cf-muted);font-size: 0.84rem;font-weight: 600;padding: 0.3rem 0.7rem;border-radius: 6px;cursor: pointer;}
.cf-seg-btn.is-on{background: var(--cf-accent);color: #fff;}
.cf-legend{display: flex;gap: 1rem;font-size: 0.82rem;color: var(--cf-muted);margin: 0 0 0.5rem;padding: 0;list-style: none;}
.cf-legend li{display: inline-flex;align-items: center;gap: 0.35rem;}
.cf-key{width: 10px;height: 10px;border-radius: 3px;display: inline-block;}
.cf-key-you{background: var(--cf-you);}
.cf-key-eng{background: var(--cf-eng);}
.cf-plotwrap{display: grid;grid-template-columns: 2.1rem minmax(0,1fr);}
.cf-ticks{position: relative;height: 200px;font-size: 0.72rem;color: var(--cf-faint);font-variant-numeric: tabular-nums;}
.cf-ticks span{position: absolute;right: 0.4rem;transform: translateY(-50%);}
.cf-plot{position: relative;}
.cf-gridline{position: absolute;left: 0;right: 0;height: 1px;background: var(--cf-line);}
.cf-cols{position: relative;display: grid;grid-template-columns: repeat(26,minmax(0,1fr));}
.cf-col{cursor: default;min-width: 0;}
.cf-col:hover .cf-bars{background: var(--cf-paper);}
.cf-bars{height: 200px;display: flex;align-items: flex-end;justify-content: center;gap: 1px;border-radius: 4px 4px 0 0;}
.cf-bar{display: block;width: min(42%,8px);border-radius: 3px 3px 0 0;}
.cf-bar-you{background: var(--cf-you);}
.cf-bar-eng{background: var(--cf-eng);}
.cf-col-l{display: block;text-align: center;font-size: 0.72rem;font-weight: 600;color: var(--cf-muted);padding-top: 0.25rem;}
.cf-tip{position: absolute;top: 0;transform: translateX(-50%);z-index: 3;display: flex;flex-direction: column;background: var(--cf-ink);color: #fff;border-radius: 6px;padding: 0.35rem 0.55rem;font-size: 0.76rem;line-height: 1.35;white-space: nowrap;pointer-events: none;font-variant-numeric: tabular-nums;}
.cf-caption{font-size: 0.86rem;color: var(--cf-muted);margin: 0.5rem 0 0;}
.cf-lower{display: grid;grid-template-columns: minmax(0,7fr) minmax(0,5fr);border-top: 1px solid var(--cf-line);}
.cf-count{padding: 1.3rem;border-right: 1px solid var(--cf-line);display: flex;flex-direction: column;gap: 0.8rem;min-width: 0;}
.cf-cipher{padding: 1.3rem;background: var(--cf-paper);display: flex;flex-direction: column;gap: 0.8rem;min-width: 0;}
.cf-section-title{font-size: 0.95rem;font-weight: 700;margin: 0;}
.cf-opts{display: flex;flex-wrap: wrap;align-items: center;gap: 0.6rem 1rem;}
.cf-check{display: inline-flex;align-items: center;gap: 0.4rem;font-size: 0.88rem;margin: 0;cursor: pointer;}
.cf-check input{accent-color: var(--cf-accent);width: 16px;height: 16px;}
.cf-sort{display: inline-flex;align-items: center;gap: 0.4rem;font-size: 0.88rem;margin: 0;}
.cf-sort select{border: 1px solid var(--cf-line);border-radius: var(--cf-radius-sm);padding: 0.3rem 0.5rem;font-size: 0.86rem;background: var(--cf-surface);color: var(--cf-ink);}
.cf-sort select:focus{outline: none;border-color: var(--cf-accent);box-shadow: var(--cf-focus);}
.cf-meta{font-size: 0.84rem;color: var(--cf-muted);margin: 0;}
.cf-table-wrap{max-height: 380px;overflow: auto;border: 1px solid var(--cf-line);border-radius: var(--cf-radius-sm);}
.cf-table{width: 100%;border-collapse: collapse;font-size: 0.9rem;}
.cf-table thead th{position: sticky;top: 0;z-index: 1;background: var(--cf-paper);font-size: 0.76rem;color: var(--cf-muted);text-align: left;padding: 0.45rem 0.7rem;border-bottom: 1px solid var(--cf-line);white-space: nowrap;}
.cf-table td{padding: 0.3rem 0.7rem;border-bottom: 1px solid var(--cf-paper);vertical-align: middle;}
.cf-table th.cf-num,.cf-num{text-align: right;font-variant-numeric: tabular-nums;white-space: nowrap;}
.cf-rank{color: var(--cf-faint);font-variant-numeric: tabular-nums;width: 2.6rem;}
.cf-glyph{font-family: var(--cf-mono);font-weight: 600;font-size: 1rem;}
.cf-glyph-name{font-family: inherit;font-size: 0.8rem;font-weight: 600;color: var(--cf-accent-dark);background: var(--cf-accent-soft);border-radius: 4px;padding: 0.08rem 0.35rem;white-space: nowrap;}
.cf-code{font-family: var(--cf-mono);font-size: 0.78rem;color: var(--cf-muted);white-space: nowrap;}
.cf-barcell{width: 26%;min-width: 70px;}
.cf-rowbar{display: block;height: 8px;background: var(--cf-you);border-radius: 0 4px 4px 0;}
.cf-none{color: var(--cf-muted);text-align: center;padding: 1.2rem;}
.cf-more{font-size: 0.82rem;color: var(--cf-muted);margin: 0;}
.cf-more:empty{display: none;}
.cf-readouts{margin: 0;display: grid;grid-template-columns: repeat(3,minmax(0,1fr));gap: 0.5rem;}
.cf-readouts div{background: var(--cf-surface);border: 1px solid var(--cf-line);border-radius: var(--cf-radius-sm);padding: 0.55rem 0.7rem;min-width: 0;}
.cf-readouts dt{font-size: 0.74rem;color: var(--cf-muted);font-weight: 600;line-height: 1.25;}
.cf-readouts dd{margin: 0.2rem 0 0;font-size: 1.15rem;font-weight: 700;font-variant-numeric: tabular-nums;}
.cf-verdict{font-size: 0.92rem;margin: 0;}
.cf-preview-label{font-size: 0.8rem;font-weight: 600;color: var(--cf-muted);margin: 0 0 0.25rem;}
.cf-preview{font-family: var(--cf-mono);font-size: 0.84rem;background: var(--cf-surface);border: 1px solid var(--cf-line);border-radius: var(--cf-radius-sm);padding: 0.6rem 0.7rem;margin: 0;word-break: break-word;}
.cf-article{color: var(--cf-ink);margin-top: 2rem;line-height: 1.7;font-size: 1.02rem;}
.cf-article h2{font-size: 1.45rem;font-weight: 700;margin: 2.2rem 0 0.7rem;}
.cf-article h3{font-size: 1.08rem;font-weight: 700;margin: 1.3rem 0 0.4rem;}
.cf-article p{margin: 0 0 0.9rem;}
.cf-article code{font-family: var(--cf-mono);font-size: 0.88em;background: var(--cf-paper);border-radius: 4px;padding: 0.05rem 0.3rem;color: var(--cf-accent-dark);}
.cf-article pre{background: #17282a;color: #e4efed;border-radius: var(--cf-radius-sm);padding: 0.8rem 1rem;overflow-x: auto;font-size: 0.86rem;line-height: 1.55;margin: 0 0 1rem;}
.cf-article pre code{background: none;color: inherit;padding: 0;font-size: inherit;}
.cf-rankstrip{display: grid;grid-template-columns: repeat(13,minmax(0,1fr));gap: 4px;margin: 0 0 1rem;padding: 0;list-style: none;}
.cf-rankstrip li{border: 1px solid var(--cf-line);border-radius: 6px;text-align: center;padding: 0.3rem 0.1rem;min-width: 0;}
.cf-rankstrip b{display: block;font-family: var(--cf-mono);font-size: 1.02rem;}
.cf-rankstrip span{display: block;font-size: 0.74rem;color: var(--cf-muted);font-variant-numeric: tabular-nums;}
.cf-steps{padding-left: 1.3rem;margin: 0 0 1rem;}
.cf-steps li{margin-bottom: 0.45rem;}
.cf-table-scroll{overflow-x: auto;margin: 0 0 1rem;border: 1px solid var(--cf-line);border-radius: var(--cf-radius-sm);}
.cf-compare{width: 100%;border-collapse: collapse;font-size: 0.93rem;}
.cf-compare caption{caption-side: top;padding: 0.55rem 0.8rem;color: var(--cf-muted);font-size: 0.85rem;}
.cf-compare th{background: var(--cf-paper);text-align: left;padding: 0.5rem 0.8rem;font-size: 0.83rem;white-space: nowrap;}
.cf-compare td{padding: 0.45rem 0.8rem;border-top: 1px solid var(--cf-line);}
.cf-compare .cf-n{text-align: right;font-variant-numeric: tabular-nums;}
.cf-uses{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 0 2rem;}
.cf-limits{padding-left: 1.2rem;}
.cf-limits li{margin-bottom: 0.5rem;}
.cf-closing{display: grid;grid-template-columns: minmax(0,1fr);gap: 1.25rem;align-items: start;margin-top: 1rem;}
.cf-closing > section{margin: 0;min-width: 0;}
@media (min-width: 992px){.cf-closing{grid-template-columns: minmax(0,2fr) minmax(0,1fr);}}
@media (max-width: 991.98px){.cf-body,.cf-lower{grid-template-columns: minmax(0,1fr);}.cf-in{border-right: 0;border-bottom: 1px solid var(--cf-line);}.cf-count{border-right: 0;border-bottom: 1px solid var(--cf-line);}.cf-text{min-height: 220px;}.cf-empty{min-height: 160px;}}
@media (max-width: 575.98px){.cf-stats{grid-template-columns: repeat(3,minmax(0,1fr));}.cf-stats div:nth-child(3){border-right: 0;}.cf-stats div:nth-child(-n+3){border-bottom: 1px solid var(--cf-line);}.cf-plotwrap{grid-template-columns: 1.8rem minmax(0,1fr);}.cf-col-l{font-size: 0.62rem;}.cf-rankstrip{grid-template-columns: repeat(7,minmax(0,1fr));}.cf-uses{grid-template-columns: minmax(0,1fr);}.cf-article h2{font-size: 1.28rem;}.cf-code{display: none;}.cf-table thead th:nth-child(3){display: none;}.cf-readouts{grid-template-columns: repeat(3,minmax(0,1fr));}}