.keyboard{display:flex;justify-content:center;flex-direction:column}.key-row{display:flex;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none}.key-row .key-item{margin:5px;background-color:#11182708;border-radius:var(--radius-md);text-align:center;padding:10px;height:40px;width:45px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid rgba(17,24,39,.1);transition:border-color .15s ease,background-color .15s ease,transform .15s ease;-webkit-user-select:none;user-select:none}@media(max-width:576px){.key-row .key-item{margin:5px 3px;height:60px}}.key-row .key-item:hover{border-color:#1118272e}.key-row .key-item.hint-key{border-color:#05f9}.key-row .key-item.pressing{background-color:#1118270f;transform:translateY(1px)}.key-row .key-item .main-content{display:flex;justify-content:space-between;align-items:center}.key-row .key-item .main-content .main-key{font-size:14px;font-weight:700}@media(max-width:576px){.key-row .key-item .main-content .main-key{font-size:18px}}.key-row .key-item .main-content .lead-key{font-size:12px;font-weight:700;color:var(--accent)}@media(max-width:576px){.key-row .key-item .main-content .lead-key{font-size:16px}}.key-row .key-item .bottom-content{display:flex;justify-content:center}.key-row .key-item .bottom-content .follow-key{font-size:12px;margin-right:3px}.key-row .backspace{align-items:center;justify-content:center}@keyframes shift-right-cbe7d015{0%{transform:translate(0)}to{transform:translate(100%)}}.displayer[data-v-cbe7d015]{display:flex;align-items:center;justify-content:center;position:relative}.displayer .current-outset[data-v-cbe7d015]{border:1px solid var(--border);border-radius:var(--radius-md);padding:6px;background:#ffffffbf;transition:border-color .15s ease,background-color .15s ease}.displayer .current-outset[data-v-cbe7d015]:hover{border-color:#0055ff59;background:#ffffffe6}.displayer .follow-item[data-v-cbe7d015]{font-size:36px;font-weight:700;font-family:var(--font-serif);margin-right:10px;margin-top:-1px;position:absolute;right:0;transition:all ease .3s}.displayer .current-item[data-v-cbe7d015]{height:54px;width:54px;display:flex;flex-direction:column;align-items:center;position:relative;padding:10px;border-radius:0}.displayer .current-item .mi-bg[data-v-cbe7d015]{position:absolute;height:100%;width:100%;top:0;opacity:.2}.displayer .current-item .pinyin[data-v-cbe7d015]{font-size:14px;position:absolute;top:-1px;font-family:var(--font-mono);letter-spacing:.08em;color:#11182799}.displayer .current-item .hanzi[data-v-cbe7d015]{font-size:36px;font-weight:700;font-family:var(--font-serif);color:var(--ink)}.pinyin-input{display:flex;font-weight:700;font-family:var(--font-mono);font-size:clamp(44px,5vw,64px);line-height:1.1;letter-spacing:.06em}.pinyin-input .cursor{position:relative;text-align:center;min-height:1.2em;min-width:.5em}.pinyin-input .cursor:first-child{margin-right:5px}.pinyin-input .cursor:after{position:absolute;bottom:0;left:0;content:"";width:100%;height:2px;background-color:#111827d9;margin-top:5px}.pinyin-input .cursor:last-child:after{animation:alternate infinite .6s blink}@keyframes blink{0%{opacity:0}to{opacity:1}}.type-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-md);background:#ffffffb3;font-family:var(--font-mono)}.stat-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#1118278c}.stat-value{font-size:12px;letter-spacing:.08em;color:var(--ink)}.menu{display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--surface);max-height:420px;overflow:auto}.menu-item{appearance:none;background:transparent;border:1px solid transparent;color:#111827b8;border-radius:var(--radius-md);padding:8px 10px;cursor:pointer;display:grid;grid-template-columns:2.2em 1fr;align-items:baseline;gap:10px;text-align:left;transition:background-color .15s ease,border-color .15s ease,transform .15s ease,color .15s ease}.menu-item:hover{border-color:#1118271f;background:#11182708;transform:translateY(-1px)}.menu-item:active{transform:translateY(0)}.menu-item.selected-item{border-color:#0055ff59;background:#0055ff0f;color:var(--ink)}.menu-index{font-size:11px;letter-spacing:.14em;color:#11182773}.menu-item.selected-item .menu-index{color:#0055ffe6}.menu-label{font-size:12px;letter-spacing:.1em}.mode-layout{display:grid;grid-template-columns:340px 1fr;grid-template-areas:"sidebar main" "keyboard keyboard";gap:var(--panel-gap);align-items:start}.mode-layout.no-sidebar{grid-template-columns:1fr;grid-template-areas:"main" "keyboard"}.mode-sidebar{grid-area:sidebar}.mode-main{grid-area:main}.mode-keyboard{grid-area:keyboard;padding:16px}@media(max-width:900px){.mode-layout{grid-template-columns:1fr;grid-template-areas:"main" "sidebar" "keyboard"}}.panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.mode-main-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}.mode-meta{display:flex;flex-direction:column;gap:8px}.mode-display{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:10px 0}.input-area,.hanzi-area{display:flex;justify-content:center;width:100%}.p-layout[data-v-f16c98db]{display:grid;grid-template-columns:340px 1fr;grid-template-areas:"sidebar main" "keyboard keyboard";gap:var(--panel-gap);align-items:start}.p-sidebar[data-v-f16c98db]{grid-area:sidebar}.p-main[data-v-f16c98db]{grid-area:main}.p-keyboard[data-v-f16c98db]{grid-area:keyboard;padding:16px}@media(max-width:900px){.p-layout[data-v-f16c98db]{grid-template-columns:1fr;grid-template-areas:"main" "sidebar" "keyboard"}}.panel-top[data-v-f16c98db]{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.sidebar-actions[data-v-f16c98db]{margin-top:12px;display:flex;justify-content:flex-end}.p-main-top[data-v-f16c98db]{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap}.p-meta[data-v-f16c98db]{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.p-input[data-v-f16c98db]{display:flex;justify-content:center;width:100%;margin-bottom:18px}.editing-title-row[data-v-f16c98db]{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;flex-wrap:wrap}.editing-title[data-v-f16c98db]{flex:1;min-width:220px;padding:10px 12px}.text-area[data-v-f16c98db]{width:100%}.scroll-area[data-v-f16c98db]{max-height:420px;overflow:auto;padding-right:6px}.scroll-area p[data-v-f16c98db]{margin:0 0 12px;line-height:1.9;font-size:16px}.bg-text[data-v-f16c98db]{color:#11182761;transition:color .12s ease,background-color .12s ease,border-color .12s ease}.done-text[data-v-f16c98db]{color:#111827eb}.current-text[data-v-f16c98db]{color:var(--ink);background:#0055ff0f;border-bottom:2px solid rgba(0,85,255,.85);border-radius:2px;padding:0 2px}.editing-area[data-v-f16c98db]{width:100%}.editing-text[data-v-f16c98db]{width:100%;min-height:420px;resize:vertical;padding:12px;font-size:15px;line-height:1.8;background:#fff9}.input{background:#ffffffbf;border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 10px;color:var(--ink);outline:none;font-family:var(--font-mono)}.scale-to-center-enter-active,.scale-to-center-leave-active{transition:all .3s ease;opacity:1;max-height:45px}.scale-to-center-leave-to,.scale-to-center-enter-from{opacity:0;max-height:0}.keyboard{position:relative}.keyboard .keyboard-name{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}.keyboard .keyboard-name .keyboard-name-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}.keyboard .keyboard-name .keyboard-name-input{background:#ffffffbf;border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 10px;color:var(--ink);outline:none;font-family:var(--font-mono);width:100%;max-width:240px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}.key-item{position:relative;cursor:pointer}.key-item .edit-popup{position:absolute;top:-160px;left:-80%;display:flex;flex-direction:column;background-color:var(--surface);padding:14px;border:1px solid var(--border);border-radius:var(--radius-md);font-size:12px;letter-spacing:.04em}.key-item .edit-popup .edit-line{display:flex;align-items:center;margin-bottom:14px}.key-item .edit-popup .edit-line .edit-label{margin-right:8px;width:40px;font-weight:bolder}.key-item .edit-popup .edit-line .edit-input{background:#ffffffbf;border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 10px;color:var(--ink);outline:none;font-family:var(--font-mono);max-width:60px}.key-item .edit-popup .edit-confirm-btn{align-self:flex-end}.zero-config{margin-top:18px;padding-top:18px;border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(auto-fit,minmax(56px,1fr));gap:10px}.zero-config .zero-item{border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:#11182705}.zero-config .zero-item .zero-text{padding:6px 0;text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#1118278c;border-bottom:1px solid var(--border)}.zero-config .zero-item .sp-text{padding:8px 0;text-align:center;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;color:var(--ink)}.zero-config .zero-item .sp-text.editing{cursor:pointer}.zero-config .zero-item input.sp-text{box-sizing:border-box;border:none;border-radius:0;background:#0055ff14;color:var(--ink);outline:none;padding:8px 0;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em}.settings-page[data-v-2f35fb8a]{display:flex;flex-direction:column;gap:var(--panel-gap)}.settings-grid[data-v-2f35fb8a]{display:grid;grid-template-columns:1fr 1fr;gap:var(--panel-gap)}@media(max-width:900px){.settings-grid[data-v-2f35fb8a]{grid-template-columns:1fr}}.panel-top[data-v-2f35fb8a]{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.settings-list[data-v-2f35fb8a]{display:flex;flex-direction:column;gap:8px}.setting-row[data-v-2f35fb8a]{border:1px solid transparent;border-radius:var(--radius-md);background:#11182705;padding:12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:border-color .15s ease,background-color .15s ease,transform .15s ease}.setting-row[data-v-2f35fb8a]:hover{border-color:#0055ff59;background:#0055ff0a;transform:translateY(-1px)}.setting-row[data-v-2f35fb8a]:active{transform:translateY(0)}.mode-top[data-v-2f35fb8a]{align-items:flex-start}.mode-actions[data-v-2f35fb8a]{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}:root{--brand: #c8161e;--accent: #0055ff;--paper: #f8f9fa;--surface: #ffffff;--ink: #111827;--border: #e5e7eb;--grid-line: rgba(0, 0, 0, .035);--focus-ring: rgba(0, 85, 255, .35);--radius-sm: 2px;--radius-md: 4px;--primary-color: var(--brand);--black: var(--ink);--white: var(--surface);--gray-2: #1f2937;--gray-4: #374151;--gray-6: #6b7280;--gray-9: #9ca3af;--gray-a: #d1d5db;--gray-001: rgba(17, 24, 39, .03);--gray-002: rgba(17, 24, 39, .05);--gray-003: rgba(17, 24, 39, .08);--gray-010: var(--border)}:root{--container-max-width: 1120px;--container-padding: 24px;--header-height: 72px;--panel-padding: 24px;--panel-gap: 16px;--app-padding: var(--container-padding);--page-max-width: var(--container-max-width)}@media(max-width:640px){:root{--container-padding: 16px;--header-height: 64px;--panel-padding: 16px}}:root{--font-serif: "Newsreader", "Noto Serif SC", "Source Han Serif SC", source-han-serif-sc, serif;--font-sans: "Inter", "Noto Sans SC", system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;--font-mono: "Berkeley Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--text-base: 16px;--leading-base: 1.65}html,body{height:100%}body{margin:0;padding:0;font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:rgba(0,0,0,0);background-color:var(--paper);background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);background-size:32px 32px;background-position:top left;font-size:var(--text-base);line-height:var(--leading-base);color:var(--ink)}body:after{content:"0,0";position:fixed;top:12px;left:12px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;color:#11182773;-webkit-user-select:none;user-select:none;pointer-events:none;z-index:0}#app{min-height:100%;position:relative;z-index:1}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}::selection{background:#0055ff29}button,input,textarea{font:inherit}input,textarea{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);color:var(--ink)}input::placeholder,textarea::placeholder{color:#11182773}input:focus,textarea:focus{border-color:#0055ff59}h1,h2,h3{font-family:var(--font-serif);color:var(--ink);margin:0}h1{font-size:40px;line-height:1.06;letter-spacing:-.03em}@media(max-width:640px){h1{font-size:32px}}.muted{color:#1118279e}.subtle{color:#11182773}.page{display:flex;flex-direction:column;gap:var(--panel-gap)}.container{max-width:var(--container-max-width);margin:0 auto;padding:0 var(--container-padding)}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--panel-padding)}.mono{font-family:var(--font-mono)}.mono-tag{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-md);border:1px solid rgba(17,24,39,.08);background:#1118270a;padding:2px 8px;font-family:var(--font-mono);font-size:11px;line-height:18px;letter-spacing:.12em;text-transform:uppercase;color:#111827b8}.btn{appearance:none;border:1px solid var(--border);background:transparent;color:var(--ink);border-radius:var(--radius-md);padding:10px 12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:background-color .15s ease,border-color .15s ease,transform .15s ease,color .15s ease}.btn:hover{border-color:#11182738;transform:translateY(-1px)}.btn:disabled{cursor:not-allowed;opacity:.4}.btn:disabled:hover{transform:none}.btn:active{transform:translateY(0)}.btn-primary{border-color:var(--accent);background:var(--accent);color:#fff}.btn-primary:hover{border-color:#0055ffe6;background:#0055ffeb}.btn-danger{border-color:var(--brand);background:var(--brand);color:#fff}.btn-danger:hover{border-color:#c8161ef2;background:#c8161eeb}.btn-ghost{border-color:transparent;background:#1118270a}.btn-ghost:hover{border-color:#1118271a}.app-shell{min-height:100%;display:flex;flex-direction:column}.app-header{position:sticky;top:0;z-index:10;background:#f8f9faeb;border-bottom:1px solid var(--border)}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--header-height)}.brand{display:flex;align-items:center;gap:12px;min-width:160px}.brand-mark{width:12px;height:12px;border-radius:2px;background:var(--brand);border:1px solid rgba(17,24,39,.12)}.brand-text{display:flex;flex-direction:column;line-height:1}.brand-name{font-family:var(--font-serif);font-weight:700;letter-spacing:-.02em;font-size:18px;color:var(--ink)}.brand-sub{margin-top:4px;font-size:11px;letter-spacing:.14em;color:#1118278c}.nav{display:flex;align-items:center;gap:6px;flex:1;justify-content:center;flex-wrap:wrap}.nav-link{display:inline-flex;align-items:baseline;gap:10px;padding:8px 10px;border-radius:var(--radius-md);border:1px solid transparent;color:#111827b8;transition:border-color .15s ease,background-color .15s ease,transform .15s ease,color .15s ease}.nav-link:hover{border-color:#1118271f;background:#11182708;transform:translateY(-1px)}.nav-link.active{border-color:#0055ff59;background:#0055ff0f;color:var(--ink)}.nav-index{font-size:11px;letter-spacing:.14em;color:#11182773}.nav-link.active .nav-index{color:#0055ffe6}.nav-label{font-size:12px;letter-spacing:.1em}.header-right{display:flex;justify-content:flex-end;min-width:160px}.app-main{flex:1;padding:24px 0 64px}*::-webkit-scrollbar{width:6px}*::-webkit-scrollbar-track{background-color:#1118270a}*::-webkit-scrollbar-thumb{background-color:#1118271f;border-radius:999px}