:root{--bg:#fafaf8;--text:#1a1a1a;--text-muted:#666;--border:#e0e0e0;--hover-bg:#fff3cd;--selected-bg:#ffeaa0;--card-bg:#fff;--card-shadow:0 2px 12px #0000001a;--accent:#e8a830;--char-box-bg:#f5f5f0;--char-box-border:#ccc;color:var(--text);background:var(--bg);font-family:Noto Sans SC,PingFang SC,Microsoft YaHei,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;line-height:1.6}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh}.app{max-width:960px;margin:0 auto;padding:2rem 1.5rem}.app-header{display:flex;justify-content:space-between;align-items: center;margin-bottom:1.5rem}.app-title{color:var(--text);font-size:1.5rem;font-weight:600}.tab-nav{display:flex;background:var(--char-box-bg);border-radius:8px;gap:.25rem;padding:.2rem}.tab-button{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:.35rem 1rem;transition:background-color .15s,color .15s;font-family:inherit;font-size:.85rem;font-weight:500}.tab-button:hover{color:var(--text)}.tab-button-active{background:var(--card-bg);color:var(--text);box-shadow:0 1px 3px #00000014}.text-input{margin-bottom:2rem}.text-input-area{border:2px solid var(--border);resize:vertical;outline:none;background:var(--card-bg);color:var(--text);border-radius:8px;width:100%;padding:.75rem 1rem;transition:border-color .2s;font-family:inherit;font-size:1.1rem}.text-input-area:focus{border-color:var(--accent)}.text-input-area::placeholder{color:var(--text-muted)}.clear-button{background:var(--char-box-bg);color:var(--text-muted);border:1px solid var(--border);cursor:pointer;border-radius:5px;margin-top:.5rem;padding:.35rem 1rem;transition:background-color .15s,color .15s;font-size:.85rem;font-weight:500}.clear-button:hover{background:var(--hover-bg);color:var(--text)}.reading-layout{display:flex;gap:2rem;margin-top:1rem}.reading-main{flex:1;min-width:0}.reading-text{display:flex;flex-wrap:wrap;align-items: flex-end;gap:0;font-size:2rem}.reading-char{display:flex;flex-direction:column;align-items: center}.pinyin-line{font-size:.45em}.segment-word{cursor:pointer;display:flex;border-radius:3px;flex-direction:row;align-items: flex-end;padding:.1em .05em;transition:background-color .15s}.segment-word:hover,.segment-word-selected{background-color:var(--hover-bg)}.segment-char-selected{text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:4px}.segment-char-known{color:#2d6a4f;background-color:#d4edda;border-radius:2px}.segment-char-unknown{color:#c0392b;background-color:#fde8e1;border-radius:2px}.reading-sidebar{border-left:1px solid var(--border);overflow-y:auto;flex-shrink:0;width:220px;max-height:80vh;padding-left:1.5rem}.sidebar-title{color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem;font-size:.85rem;font-weight:600}.sidebar-entry{border-bottom:1px solid var(--border);margin-bottom:.75rem;padding-bottom:.75rem}.sidebar-entry:last-child{border-bottom:none}.sidebar-entry-word{background:var(--bg-subtle,#00000008);border-radius:6px;margin-left:-.25rem;padding:.6rem .75rem}.sidebar-entry-word .sidebar-char{font-size:1.35rem}.sidebar-char{margin-right:.4rem;font-size:1.25rem;font-weight:600}.sidebar-pinyin{color:var(--accent);font-size:.85rem;font-weight:500}.sidebar-defs{list-style:none;margin-top:.2rem;padding:0}.sidebar-defs li{color:var(--text-muted);padding:.05rem 0;font-size:.8rem}.keyboard-hints{display:flex;color:var(--text-muted);gap:1.25rem;margin-bottom:.75rem;font-size:.8rem}.keyboard-hints kbd{display:inline-block;background:var(--char-box-bg);border:1px solid var(--border);border-radius:3px;padding:.1rem .35rem;font-family:inherit;font-size:.75rem}.touch-controls{display:none;gap:.75rem;margin-top:1.25rem}.touch-button{border:1px solid var(--border);cursor:pointer;border-radius:8px;flex:1;padding:.85rem 1rem;transition:filter .15s;font-family:inherit;font-size:1rem;font-weight:600}.touch-button:active{filter:brightness(.95)}.touch-button-known{color:#2d6a4f;background:#d4edda;border-color:#b5dec3}.touch-button-unknown{color:#c0392b;background:#fde8e1;border-color:#f5cdc1}@media (max-width:640px){.keyboard-hints{display:none}.touch-controls{display:flex}.reading-layout{flex-direction:column;gap:1rem}.reading-sidebar{border-left:none;border-top:1px solid var(--border);width:100%;max-height:none;padding-top:1rem;padding-left:0}.reading-text{font-size:1.65rem}}.stats{margin-top:.5rem}.stats-title{margin-bottom:1rem;font-size:1.25rem;font-weight:600}.stats-empty{color:var(--text-muted);font-style:italic}.stats-summary{display:flex;gap:.75rem;margin-bottom:1.5rem}.stats-card{background:var(--card-bg);border:1px solid var(--border);text-align:center;border-radius:8px;flex:1;padding:.75rem}.stats-card-known{border-left:3px solid #2d6a4f}.stats-card-learning{border-left:3px solid var(--accent)}.stats-card-unknown{border-left:3px solid #c0392b}.stats-card-number{font-size:1.75rem;font-weight:700}.stats-card-label{color:var(--text-muted);margin-top:.15rem;font-size:.8rem}.stats-section{margin-bottom:1.25rem}.stats-section h3{margin-bottom:.5rem;font-size:.95rem;font-weight:600}.stats-char-grid{display:flex;flex-wrap:wrap;gap:.35rem}.stats-char{display:inline-flex;cursor:default;border-radius:4px;justify-content:center;align-items: center;width:2.25rem;height:2.25rem;font-size:1.1rem}.stats-char-known{color:#2d6a4f;background:#d4edda}.stats-char-learning{color:#856404;background:#fff3cd}.stats-char-unknown{color:#c0392b;background:#fde8e1}.stats-char{cursor:pointer;transition:transform .1s}.stats-char:hover{transform:scale(1.15)}.stats-char-active{outline:2px solid var(--accent);outline-offset:1px}.stats-detail{display:flex;background:var(--card-bg);border:1px solid var(--border);box-shadow:var(--card-shadow);border-radius:8px;align-items: flex-start;gap:1rem;margin-top:.75rem;padding:.75rem 1rem}.stats-detail-char{font-size:2.5rem;font-weight:600;line-height:1}.stats-detail-rows{display:flex;flex-direction:column;gap:.2rem;font-size:.85rem}.stats-detail-label{color:var(--text-muted);margin-right:.5rem}.stats-detail-known{color:#2d6a4f;font-weight:500}.stats-detail-unknown{color:#c0392b;font-weight:500}.stats-benchmarks{border-top:1px solid var(--border);margin-top:2rem;padding-top:1.5rem}.stats-benchmarks h3{margin-bottom:.5rem;font-size:.95rem;font-weight:600}.stats-benchmarks-note{color:var(--text-muted);margin-bottom:.75rem;font-size:.85rem;line-height:1.5}.stats-benchmarks-table{border-collapse:collapse;width:100%;max-width:320px;margin-bottom:.75rem;font-size:.85rem}.stats-benchmarks-table td{padding:.3rem .75rem .3rem 0}.stats-benchmarks-table td:first-child{white-space:nowrap;font-weight:500}.stats-benchmarks-table td:last-child{color:var(--text-muted)}