:root{--ink: #2c3e50;--accent: #c0392b;--bg: #faf9f7;--card-bg: #ffffff;--border: #e5e0da;--muted: #9a938b}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,PingFang SC,Helvetica Neue,sans-serif;padding-bottom:env(safe-area-inset-bottom)}#app{max-width:560px;margin:0 auto;padding:0 16px 32px}.topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(12px + env(safe-area-inset-top)) 4px 8px}.topbar h1{font-size:22px;margin:0;letter-spacing:2px}.icon-btn{border:none;background:none;font-size:26px;color:var(--ink);padding:10px;cursor:pointer;line-height:1}.settings-page{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);z-index:20;overflow-y:auto;-webkit-overflow-scrolling:touch}.settings-page[hidden]{display:none}.settings-inner{max-width:560px;margin:0 auto;padding:0 16px calc(32px + env(safe-area-inset-bottom))}.settings-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(12px + env(safe-area-inset-top)) 0 8px}.settings-header h2{margin:0;font-size:18px;text-align:center}.back-btn{justify-self:start;border:none;background:none;color:var(--accent);font-size:17px;padding:8px 8px 8px 0;cursor:pointer;font-family:inherit}.settings-group-title{font-size:13px;color:var(--muted);margin:12px 6px 6px;letter-spacing:1px}.settings-group{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;overflow:hidden}.setting-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 14px;background:none;border:none;border-top:1px solid var(--border);font-size:16px;font-family:inherit;color:var(--ink);text-align:left;text-decoration:none}.settings-group .setting-item:first-child{border-top:none}.setting-label{display:flex;flex-direction:column;gap:2px}.setting-label small{font-size:12.5px;color:var(--muted)}.setting-item input{width:20px;height:20px;accent-color:var(--accent);flex-shrink:0}.setting-action{cursor:pointer}.setting-action:active{background:var(--bg)}.chevron{color:var(--muted);font-size:20px;line-height:1;flex-shrink:0}.about-text small{line-height:1.7}.setting-hint{font-size:13px;color:var(--muted);margin:8px 0 0}.setting-item select{border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--ink);font-size:15px;font-family:inherit;padding:6px 8px;flex-shrink:0}.feedback-page{z-index:21}.feedback-form{padding:14px;display:flex;flex-direction:column;gap:12px;margin-top:12px}.feedback-form textarea,.feedback-form input{width:100%;border:1px solid var(--border);border-radius:10px;background:var(--bg);padding:10px 12px;font-size:16px;font-family:inherit;color:var(--ink);outline:none;resize:vertical}.feedback-form textarea:focus,.feedback-form input:focus{border-color:var(--accent)}.input-area textarea{width:100%;border:1px solid var(--border);border-radius:12px;background:var(--card-bg);padding:12px 14px;font-size:17px;line-height:1.6;color:var(--ink);resize:vertical;outline:none;caret-color:var(--accent)}.input-area textarea::placeholder{color:#c1b9ae}.input-area textarea:focus{border-color:var(--accent)}.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px;margin-top:16px}.char-card{aspect-ratio:1;font-size:26px;font-family:Kaiti SC,KaiTi,serif;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;color:var(--ink);cursor:pointer;transition:transform .1s}.char-card:active{transform:scale(.92)}.char-card.active{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.char-card.unavailable{color:var(--muted);background:transparent;border-style:dashed}.char-card.trad{border-style:dashed;border-color:var(--accent);color:var(--ink);position:relative}.char-card.trad:after{content:"⇣";position:absolute;right:3px;bottom:1px;font-size:11px;color:var(--accent)}.empty-hint{text-align:center;color:var(--muted);font-size:15px;margin-top:40px}.detail{margin-top:20px;background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:16px}.detail-head{display:flex;align-items:center;justify-content:space-between}.detail-info{display:flex;align-items:baseline;gap:10px}.pinyin{font-size:20px;font-weight:600}.stroke-count{color:var(--muted);font-size:14px}.writer-box{position:relative;display:flex;justify-content:center;margin:12px auto;width:fit-content}#writer-target{position:relative;border:2px solid var(--accent);border-radius:8px;background:linear-gradient(to right,transparent calc(50% - 1px),#f0d9d5 calc(50% - 1px),#f0d9d5 calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(to bottom,transparent calc(50% - 1px),#f0d9d5 calc(50% - 1px),#f0d9d5 calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(45deg,transparent calc(50% - 1px),#f7ece9 calc(50% - 1px),#f7ece9 calc(50% + 1px),transparent calc(50% + 1px)),linear-gradient(-45deg,transparent calc(50% - 1px),#f7ece9 calc(50% - 1px),#f7ece9 calc(50% + 1px),transparent calc(50% + 1px)),#fffdfb;width:min(80vw,320px);height:min(80vw,320px);touch-action:none}#writer-target svg{display:block}.empty-demo{text-align:center;margin-top:24px}.demo-gif{width:min(80vw,320px);height:min(80vw,320px);border:2px solid var(--accent);border-radius:8px;display:block;margin:0 auto}.stroke-names{font-size:14px;color:var(--muted);line-height:1.8;margin:4px 2px 12px}.detail-actions{display:flex;gap:10px}.action-btn{flex:1;padding:10px 0;font-size:15px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);cursor:pointer}.action-btn:active{background:var(--border)}#quiz-btn{background:#fff;border:1px solid var(--accent);color:var(--accent);font-weight:600;box-shadow:0 2px 6px #c0392b2e}#quiz-btn:active{background:var(--accent);color:#fff;box-shadow:0 1px 3px #c0392b40}.loading{position:fixed;left:50%;transform:translate(-50%);bottom:calc(20px + env(safe-area-inset-bottom));z-index:50;padding:9px 20px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);font-size:15px;font-weight:600;white-space:nowrap;box-shadow:0 3px 12px #c0392b2e;background:linear-gradient(to right,rgba(192,57,43,.16) 0 var(--progress, 0%),transparent var(--progress, 0%)),var(--card-bg)}.install-banner{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));max-width:536px;margin:0 auto;background:var(--card-bg);border:1px solid var(--accent);border-radius:14px;padding:12px 14px;box-shadow:0 4px 20px #2c3e5026;display:flex;flex-direction:column;gap:10px;z-index:10}.install-text{display:flex;flex-direction:column;gap:4px;font-size:14px}.install-text strong{font-size:15px}.install-text span{color:var(--muted);line-height:1.5}.install-actions{display:flex;flex-wrap:wrap;gap:10px}.install-actions .action-btn{flex:1 1 100px}.install-primary{background:var(--accent);color:#fff;border-color:var(--accent)}#trad-prompt{z-index:11}.install-banner[hidden]{display:none}.toast{position:fixed;left:50%;bottom:60px;transform:translate(-50%) translateY(10px);background:#2c3e50eb;color:#fff;padding:10px 18px;border-radius:20px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;white-space:nowrap;z-index:1000;max-width:calc(100vw - 32px);overflow:hidden;text-overflow:ellipsis}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}