*{box-sizing:border-box;margin:0;padding:0}:root{--bg-color: #323437;--main-color: #e2b714;--caret-color: #e2b714;--sub-color: #646669;--sub-alt-color: #2c2e31;--text-color: #d1d0c5;--error-color: #ca4754;--error-extra-color: #7e2a33;--colorful-error-color: #ca4754;--colorful-error-extra-color: #7e2a33;--font-main: "Roboto Mono", "JetBrains Mono", "Fira Code", monospace;--font-size: 1.5rem;--font-size-large: 2rem;--transition-fast: .1s ease;--transition-medium: .25s ease}html{font-size:16px;scroll-behavior:smooth}body{font-family:var(--font-main);background-color:var(--bg-color);color:var(--text-color);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}#root{min-height:100vh;display:flex;flex-direction:column}button{font-family:inherit;cursor:pointer;border:none;background:transparent;color:inherit}input,textarea,select{font-family:inherit;font-size:inherit;border:none;background:transparent;color:inherit;outline:none}::selection{background-color:var(--main-color);color:var(--bg-color)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--sub-alt-color)}::-webkit-scrollbar-thumb{background:var(--sub-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--main-color)}@media(max-width:768px){:root{--font-size: 1.2rem;--font-size-large: 1.5rem}html{font-size:14px}}.app{min-height:100vh;display:flex;flex-direction:column;max-width:1200px;margin:0 auto;padding:0 1.5rem}.header{display:flex;align-items:center;justify-content:space-between;padding:1.3rem 0;margin-bottom:1.8rem}.logo{display:flex;align-items:center;gap:.5rem}.logo-icon{color:var(--main-color);font-size:2rem;font-weight:700}.logo-text{font-size:1.4rem;font-weight:700;color:var(--text-color);letter-spacing:-.02em}.nav{display:flex;gap:.4rem;padding:.25rem;background:var(--sub-alt-color);border-radius:.55rem}.nav-btn{border:0;padding:.52rem .95rem;border-radius:.4rem;color:var(--sub-color);font-size:.88rem;font-weight:600;transition:all .16s ease}.nav-btn:hover{color:var(--text-color)}.nav-btn.active{background:var(--bg-color);color:var(--main-color)}.version{font-size:.75rem;color:var(--sub-color);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:.22rem .7rem}.main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.55rem}.config-bar{display:flex;align-items:center;gap:1rem;padding:.7rem 1rem;border-radius:.8rem;background:var(--sub-alt-color)}.config-group{display:flex;align-items:center;gap:.55rem}.config-label{color:var(--sub-color);font-size:.73rem;letter-spacing:.1em;text-transform:uppercase}.config-options{display:flex;gap:.24rem}.config-option{border:0;border-radius:.4rem;padding:.38rem .68rem;color:var(--sub-color);transition:all .16s ease}.config-option:hover{color:var(--text-color);background:#ffffff0d}.config-option.active{background:var(--main-color);color:var(--bg-color);font-weight:700}.config-action{border:1px solid rgba(255,255,255,.09);border-radius:.45rem;padding:.38rem .68rem;color:var(--sub-color);transition:all .16s ease}.config-action:hover{color:var(--text-color);border-color:var(--main-color)}.config-action:disabled,.config-option:disabled{opacity:.6;cursor:not-allowed}.stats-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:2.4rem}.stat{display:flex;flex-direction:column;align-items:center;gap:.2rem}.stat-label{color:var(--sub-color);font-size:.72rem;letter-spacing:.04em;line-height:1.35;text-align:center}.stat-value{color:var(--main-color);font-size:2rem;line-height:1;font-weight:700;font-variant-numeric:tabular-nums}.typing-area{width:min(980px,100%);display:grid;gap:1rem;padding:1.15rem;border-radius:.95rem;background:#00000024;border:1px solid rgba(255,255,255,.08);transition:border-color .16s ease,box-shadow .16s ease}.typing-area.focused{border-color:#e2b71457;box-shadow:0 0 0 1px #e2b71424 inset}.focus-prompt{color:var(--sub-color);font-size:.85rem}.target-text{--target-row-gap: .62rem;--target-line-height: 1.35em;display:flex;flex-wrap:wrap;column-gap:var(--target-row-gap);row-gap:var(--target-row-gap);align-items:center;align-content:flex-start;min-height:calc(var(--target-line-height) * 3 + var(--target-row-gap) * 2);max-height:calc(var(--target-line-height) * 3 + var(--target-row-gap) * 2);overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scrollbar-gutter:stable both-edges;line-height:1.35;font-size:clamp(2.1rem,5.6vw,3.6rem)}.target-char{position:relative;color:#9ea3ab;font-weight:700;padding:.08em;border-radius:.12em;transition:color .1s ease,background-color .1s ease}.target-char.correct{color:#f4f4f2}.target-char.incorrect{color:#ffdfe2;background:#ca475499}.target-char.current{color:#fff6cc;background:#e2b71429}.caret{position:absolute;right:-.1em;top:.1em;width:.08em;height:1.05em;background:var(--caret-color);border-radius:999px;animation:blink 1s steps(1) infinite}@keyframes blink{0%,50%{opacity:1}51%,to{opacity:0}}.typing-input-label{color:var(--text-color);font-size:.92rem}.typing-input{width:100%;min-height:120px;resize:vertical;border:1px solid rgba(255,255,255,.11);border-radius:.7rem;padding:.82rem .95rem;background:#26282b;color:#fff;font-size:1.35rem;line-height:1.5}.typing-input:focus{border-color:var(--main-color)}.typing-input::placeholder{color:#898d94}.source-text{color:var(--sub-color);font-size:.88rem}.source-meta{width:min(980px,100%);display:grid;gap:.32rem;padding:.78rem .95rem;border-radius:.68rem;background:#ffffff08;border:1px solid rgba(255,255,255,.08)}.source-meta-title{color:var(--text-color);font-size:.88rem;font-weight:700}.source-meta-line{color:var(--sub-color);font-size:.8rem;line-height:1.4}.source-meta-loading{color:var(--main-color);font-size:.8rem}.source-meta-error{color:var(--error-color);font-size:.8rem}.source-link{color:var(--main-color);text-decoration:none;word-break:break-all}.source-link:hover{text-decoration:underline}.dictionary-lookup{width:min(680px,100%);display:grid;gap:1rem}.lookup-input-container{position:relative}.lookup-filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:.75rem .9rem;border-radius:.72rem;background:#ffffff08;border:1px solid rgba(255,255,255,.08)}.lookup-filter-label{color:var(--sub-color);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}.lookup-filter-options{display:flex;flex-wrap:wrap;gap:.45rem}.lookup-filter-btn{border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.36rem .78rem;background:#ffffff05;color:var(--sub-color);font-size:.84rem;font-weight:600;transition:color .16s ease,border-color .16s ease,background-color .16s ease,transform .16s ease}.lookup-filter-btn:hover{color:var(--text-color);border-color:#ffffff2e}.lookup-filter-btn.active{background:#e2b71424;border-color:#e2b7146b;color:var(--main-color)}.lookup-filter-btn:focus-visible{outline:2px solid rgba(226,183,20,.45);outline-offset:2px}.lookup-input{width:100%;border:1px solid rgba(255,255,255,.11);border-radius:.72rem;padding:.82rem 1rem;background:var(--sub-alt-color);color:var(--text-color)}.lookup-input:focus{border-color:var(--main-color)}.lookup-hint{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--sub-color);font-size:.74rem}.lookup-message{color:var(--sub-color);font-size:.9rem;text-align:center;padding:1rem}.lookup-message.error{color:var(--error-color)}.ad-slot-shell{display:grid;gap:.55rem;align-content:start;width:100%;border-radius:.72rem;padding:.8rem .9rem;background:#ffffff08;border:1px dashed rgba(255,255,255,.12)}.ad-slot-label{color:var(--sub-color);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}.ad-slot{width:100%}.lookup-results{display:grid;gap:.7rem}.lookup-item{display:flex;gap:1rem;align-items:flex-start;padding:.85rem .95rem;border-radius:.72rem;background:var(--sub-alt-color)}.lookup-char{color:var(--main-color);font-size:1.8rem;font-weight:700;line-height:1.1;width:2.2rem;text-align:center}.lookup-codes{flex:1;display:grid;gap:.34rem}.code-row{display:flex;align-items:center;gap:.8rem}.pronunciation-row{align-items:center}.code-label{color:var(--sub-color);text-transform:uppercase;font-size:.74rem;width:2.9rem}.code-value,.code-chinese{color:var(--text-color);font-size:1.02rem;font-weight:700}.code-english{color:var(--sub-color);font-size:.82rem}.reading-list{display:flex;flex:1;flex-wrap:wrap;gap:.45rem}.reading-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2rem;padding:.28rem .62rem;border-radius:999px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08)}.reading-main{color:var(--text-color);font-size:.94rem;font-weight:700}.reading-keys{color:var(--sub-color);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-variant-numeric:tabular-nums}.code-row-empty{align-items:flex-start}.code-empty{color:var(--sub-color);font-size:.86rem}.result-screen{display:grid;justify-items:center;gap:1.8rem}.result-title{color:var(--text-color);font-size:1.9rem;font-weight:700}.result-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:2.2rem}.result-stat{display:grid;justify-items:center;gap:.2rem}.result-label{color:var(--sub-color);font-size:.86rem;letter-spacing:.04em;line-height:1.25;text-align:center}.result-value{color:var(--main-color);font-size:3rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}.result-actions{display:flex;gap:.7rem}.result-screen .ad-slot-shell{width:min(520px,100%)}.btn-primary,.btn-secondary{border-radius:.6rem;padding:.68rem 1.5rem;font-weight:700}.btn-primary{background:var(--main-color);color:var(--bg-color)}.btn-secondary{background:var(--sub-alt-color);color:var(--text-color);border:1px solid rgba(255,255,255,.1)}.footer{display:grid;justify-items:center;gap:.6rem;padding:1.8rem 0;text-align:center;color:var(--sub-color);font-size:.76rem}.footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem}.footer-link{color:var(--sub-color);text-decoration:none}.footer-link:hover{color:var(--text-color);text-decoration:underline}@media(max-width:820px){.app{padding:0 1rem}.header{margin-bottom:1rem}.logo-text{display:none}.config-bar{flex-wrap:wrap;justify-content:center}.stats-bar{gap:1.4rem}.stat-value{font-size:1.45rem}.target-text{font-size:clamp(1.65rem,8vw,2.5rem)}.typing-input{font-size:1.15rem}.result-stats{gap:1.2rem;flex-wrap:wrap;justify-content:center}.result-value{font-size:2.35rem}.lookup-item{flex-direction:column;align-items:flex-start}.lookup-filter-bar{align-items:flex-start}.lookup-filter-options{width:100%}.footer-links{gap:.55rem .85rem}.code-row,.pronunciation-row{flex-wrap:wrap;gap:.45rem .65rem}.code-label{width:auto;min-width:2.9rem}.reading-list{width:100%}.reading-chip{border-radius:.65rem}}