*{box-sizing:border-box}:root{--background:#f6f7f9;--surface:#fff;--surface-muted:#f9fafb;--text:#111827;--muted:#5f6877;--border:#e2e8f0;--border-strong:#cbd5e1;--primary:#111827;--primary-hover:#2f3847;--accent:#2563eb;--success:#15803d;--danger:#b91c1c;--shadow-sm:0 1px 2px #0f172a0d;--shadow-md:0 16px 40px #0f172a14;--focus-ring:0 0 0 3px #2563eb2e}body{background:var(--background);color:var(--text);text-rendering:optimizelegibility;margin:0;font-family:Arial,Helvetica,sans-serif}a{color:inherit}.home-page{background:var(--background);min-height:100vh}.home-hero{border-bottom:1px solid var(--border);background:linear-gradient(#fff 0%,#fbfcfe 100%);place-items:center;min-height:66vh;padding:72px 20px 48px;display:grid}.home-hero__content,.home-section{width:min(1080px,100%);margin:0 auto}.home-hero__content{text-align:left;grid-template-columns:minmax(0,1fr) minmax(320px,420px);place-items:center start;gap:28px;display:grid}.home-eyebrow{color:var(--accent);margin:0;font-size:14px;font-weight:800}.language-select{align-items:center;gap:8px;margin-bottom:18px;display:inline-flex}.language-select span{color:var(--muted);font-size:13px;font-weight:800}.language-select select{border:1px solid var(--border-strong);background:var(--surface);min-height:36px;color:var(--muted);border-radius:8px;padding:0 32px 0 10px;font-size:13px;font-weight:800}.language-select select:focus-visible,input:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{box-shadow:var(--focus-ring);outline:none}.home-lead{max-width:680px;margin:0 0 18px;font-size:20px}.home-game-card{gap:16px;width:100%;display:grid}.home-result,.home-username-card,.home-mode-card,.home-local-records{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);border-radius:8px;padding:18px}.home-result{border-color:var(--primary);background:var(--primary);color:var(--surface);gap:6px;display:grid}.home-result span,.home-records-heading span{color:var(--muted);font-size:13px;font-weight:700}.home-result span,.home-result p{color:#ffffffbd}.home-result h2,.home-username-card h2,.home-local-records h2{margin:0}.home-username-card{gap:8px;display:grid}.home-mode-card{gap:12px;display:grid}.home-mode-card h2{margin:0}.home-mode-card p{margin:4px 0 0}.home-mode-switch{background:#eef2f7;border-radius:8px;grid-template-columns:1fr 1fr;gap:8px;padding:4px;display:grid}.home-mode-switch button{min-height:38px;color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:6px;font-weight:800}.home-mode-switch button[aria-pressed=true]{background:var(--primary);color:var(--surface);box-shadow:var(--shadow-sm)}.home-local-records p{margin:4px 0 0}.home-username-field{color:#334155;grid-template-columns:1fr auto;align-items:end;gap:8px;font-weight:700;display:grid}.home-username-field span{grid-column:1/-1}.home-username-card input{border:1px solid var(--border-strong);min-height:42px;font:inherit;background:var(--surface);border-radius:8px;padding:0 12px}.home-username-card button{background:var(--success);width:42px;height:42px;color:var(--surface);cursor:pointer;border:0;border-radius:8px;font-size:20px;font-weight:800;line-height:1}.home-username-card button:disabled{color:var(--muted);cursor:not-allowed;background:#dbe3ee}.home-form-error{color:var(--danger);font-size:14px}.home-local-records{gap:12px;display:grid}.home-records-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.home-local-records ol{gap:8px;margin:0;padding:0;list-style:none;display:grid}.home-local-records li{border-top:1px solid var(--border);gap:3px;padding-top:8px;display:grid}.home-local-records li span{color:var(--muted);font-size:13px}.home-section{padding:48px 20px}.home-section h2{margin:0 0 18px;font-size:28px}.home-section h3{margin:0 0 8px;font-size:18px}.home-grid,.home-faq{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.home-grid article,.home-faq article,.home-shortcuts{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);border-radius:8px;padding:18px}.home-two-column{grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);align-items:start;gap:28px;display:grid}.home-shortcuts{gap:12px;margin:0;list-style:none;display:grid}.home-shortcuts li{justify-content:space-between;gap:16px;display:flex}.home-shortcuts span{color:var(--muted);text-align:right}.home-action{background:var(--primary);min-height:44px;color:var(--surface);cursor:pointer;border:0;border-radius:8px;justify-content:center;align-items:center;padding:0 18px;font-weight:700;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s;display:inline-flex}.home-actions{flex-wrap:wrap;gap:10px;display:flex}.home-action--secondary{border:1px solid var(--border-strong);background:var(--surface);color:var(--text)}.home-action:hover{background:var(--primary-hover)}.home-action--secondary:hover{background:#f3f6fa}.home-action:disabled{color:var(--muted);cursor:not-allowed;background:#dbe3ee}.home-footer{border-top:1px solid var(--border);text-align:center;flex-wrap:wrap;justify-content:center;gap:14px;width:min(1080px,100%);margin:0 auto;padding:28px 20px 36px;display:flex}.home-footer__link{color:var(--muted);font-size:14px;font-weight:800;text-decoration:none}.home-footer__link:hover{color:var(--text)}.site-home{background:var(--background);min-height:100vh}.site-hero{border-bottom:1px solid var(--border);background:linear-gradient(#fff 0%,#fbfcfe 100%);padding:56px 20px 42px}.site-hero__content,.site-section{width:min(1080px,100%);margin:0 auto}.site-hero__content{max-width:760px}.site-lead{max-width:720px;margin:0;font-size:20px}.site-section{padding:44px 20px 0}.site-section__heading{max-width:760px;margin-bottom:18px}.site-section h2{margin:0 0 10px;font-size:28px}.site-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.site-tool-card{border:1px solid var(--border);background:var(--surface);min-height:230px;box-shadow:var(--shadow-sm);border-radius:8px;align-content:space-between;gap:22px;padding:24px;display:grid}.site-tool-card span{color:var(--accent);font-size:13px;font-weight:800}.site-tool-card h3{margin:10px 0 0;font-size:24px}.contact-page{background:var(--background);place-items:center;min-height:100vh;padding:32px 20px;display:grid}.contact-panel{border:1px solid var(--border);background:var(--surface);width:min(720px,100%);box-shadow:var(--shadow-md);border-radius:8px;padding:32px}.contact-lead{max-width:620px;margin-bottom:22px;font-size:18px}.contact-form{gap:14px;margin-bottom:22px;display:grid}.contact-form label{gap:6px;display:grid}.contact-form span{color:var(--muted);font-size:13px;font-weight:800}.contact-form input,.contact-form textarea{border:1px solid var(--border-strong);background:var(--surface);width:100%;color:var(--text);font:inherit;border-radius:8px;padding:11px 12px}.contact-form textarea{resize:vertical}.contact-form__website{opacity:0;width:1px;height:1px;position:absolute;left:-10000px}.contact-form__status{color:#166534;margin:0;font-weight:800}.contact-form__status--error{color:var(--danger)}h1{margin:0;font-size:44px;line-height:1.2}p{color:var(--muted);margin:12px 0 0;line-height:1.6}button{font:inherit}.tool-page{width:min(1080px,100%);min-height:100vh;margin:0 auto;padding:42px 20px 36px}.tool-page__intro{max-width:760px;margin-bottom:22px}.tool-page__intro h1{margin-bottom:12px}.tool-page__back{background:var(--primary);min-height:42px;color:var(--surface);border-radius:8px;align-items:center;margin-bottom:18px;padding:0 16px;font-weight:800;text-decoration:none;display:inline-flex}.tool-page__back:hover{background:var(--primary-hover)}.tool-page__section{padding:34px 0 0}.tool-page__section h2,.pinyin-input-tool h2{margin:0 0 12px;font-size:24px}.tool-page__faq{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.tool-page__faq article,.pinyin-input-tool__panel{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-sm);border-radius:8px}.tool-page__faq article{padding:18px}.tool-page__faq h3{margin:0 0 8px;font-size:17px}.pinyin-input-tool__panel{gap:20px;padding:22px;display:grid}.pinyin-input-tool__field{gap:8px;display:grid}.pinyin-input-tool__field span{color:#334155;font-size:14px;font-weight:800}.pinyin-input-tool__field input{border:1px solid var(--border-strong);background:var(--surface);width:100%;min-height:52px;color:var(--text);border-radius:8px;padding:0 14px;font-family:inherit;font-size:20px;font-weight:800}.pinyin-input-tool__candidates{min-height:132px}.pinyin-input-tool__candidate-grid{grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;display:grid}.pinyin-input-tool__candidate-grid button{border:1px solid var(--border-strong);background:var(--surface);height:52px;color:var(--text);cursor:pointer;border-radius:8px;place-items:center;font-size:24px;font-weight:800;display:grid;position:relative}.pinyin-input-tool__candidate-grid button:hover{border-color:var(--primary);background:var(--surface-muted)}.pinyin-input-tool__candidate-grid span{color:var(--muted);font-size:11px;font-weight:800;position:absolute;top:5px;left:7px}.pinyin-input-tool__output{gap:10px;display:grid}.pinyin-input-tool__output-heading{justify-content:space-between;align-items:center;gap:12px;display:flex}.pinyin-input-tool__output-heading div{gap:8px;display:flex}.pinyin-input-tool__output-heading button{border:1px solid var(--border-strong);background:var(--surface);min-height:38px;color:var(--text);cursor:pointer;border-radius:8px;padding:0 12px;font-weight:800}.pinyin-input-tool__output-heading button:disabled{color:#9ca3af;cursor:not-allowed;background:#f3f6fa}.pinyin-input-tool textarea{border:1px solid var(--border-strong);background:var(--surface-muted);width:100%;min-height:calc(7lh + 28px);color:var(--text);overflow-wrap:anywhere;resize:vertical;white-space:pre-wrap;border-radius:8px;padding:14px;font-family:inherit;font-size:24px;line-height:1.6;display:block}.pinyin-game{color:#fff;background:#07111f;width:100%;max-width:1000px;min-height:100vh;margin:0 auto;font-family:Arial,Helvetica,sans-serif;position:relative;overflow:hidden}.pinyin-game__background{background-image:url(/pinyin-typing/images/page.jpg);background-position:bottom;background-repeat:repeat-y;background-size:cover;height:200%;position:absolute;inset:0}.pinyin-game__canvas{z-index:1;width:100%;height:100vh;display:block;position:relative}.pinyin-game__score{z-index:2;color:#fff;text-align:center;text-shadow:0 1px 2px #00000073;gap:2px;min-width:110px;display:grid;position:absolute;top:10px;right:10px}.pinyin-game__score div{justify-content:space-between;gap:6px;display:flex}.pinyin-game__protect,.pinyin-game__toolbar button{color:#fff;cursor:pointer;background:#ffffff2e;border:1px solid #ffffffe6;border-radius:999px}.pinyin-game__protect{z-index:3;width:60px;height:60px;font-size:30px;line-height:1;position:absolute;bottom:10px;right:10px}.pinyin-game__toolbar{z-index:3;gap:10px;display:flex;position:absolute;top:10px;left:10px}.pinyin-game__toolbar button{place-items:center;width:40px;height:40px;padding:0;display:grid}.pinyin-game__toolbar .pinyin-game__give-up{border-radius:8px;width:auto;min-width:58px;padding:0 12px;font-size:14px;font-weight:800}.pinyin-game__toolbar img{object-fit:contain;width:70%;height:70%}.pinyin-game__message{z-index:3;color:#fff;letter-spacing:0;text-align:center;text-shadow:0 2px 4px #00000073;width:100%;font-size:26px;position:absolute;top:100px;left:0}.pinyin-game__message--danger{color:#f55}.pinyin-game__player-name{z-index:3;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#050c18b8;border:1px solid #ffffff38;border-radius:999px;padding:7px 12px;font-size:14px;font-weight:800;position:absolute;top:62px;left:10px}.pinyin-game__keyboard{z-index:4;width:100%;max-width:600px;margin:0 auto;padding:5px 2px;display:none;position:fixed;bottom:0;left:0;right:0}.pinyin-game__key-row{display:flex}.pinyin-game__key-row button{color:#fff;text-align:center;cursor:pointer;background:0 0;border:1px solid #fff;border-radius:3px;flex:10%;height:35px;margin:1px;font-weight:700}.pinyin-game__key-row button:active{background:#ffffff40}.pinyin-game__key-spacer{flex:0 0 5%}.pinyin-game__key-spacer--wide{flex-basis:15%}.pinyin-game__help{z-index:5;color:#fff;cursor:pointer;text-align:center;background:#000000b8;border:0;align-content:start;gap:15px;width:100%;min-height:100%;padding:130px 20px 20px;display:grid;position:absolute;inset:0}.pinyin-game__help span{display:block}.pinyin-game__help small{color:#ccc;font-size:15px}@media (max-width:820px){.home-grid,.home-faq,.site-tool-grid,.tool-page__faq,.home-two-column,.home-hero__content{grid-template-columns:1fr}.home-hero{place-items:start;min-height:auto}h1{font-size:36px}.pinyin-input-tool__output-heading{flex-direction:column;align-items:stretch}}@media (max-width:760px){.pinyin-game__canvas{height:calc(100vh - 125px)}.pinyin-game__keyboard{display:block}.pinyin-game__protect{bottom:135px}.pinyin-game__player-name{top:60px}}