:root{--bg:#f7f5f0;--ink:#2b2b2b;--muted:#8a8578;--line:#d9d4c7;--cell-bg:#fff;--block:#3a3f4b;--active:#cfe8ff;--cursor:#4a90e2;--cursor-ink:#fff;--accent:#e8743b;--good:#1f7a3a;--bad:#c0392b;--cell:42px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,PingFang SC,Microsoft YaHei,sans-serif}.app{max-width:980px;margin:0 auto;padding:20px 16px 40px}.app__header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.app__header h1{margin:0;font-size:22px;font-weight:700}.app__sub{color:var(--muted);margin-left:6px;font-size:14px;font-weight:400}.timer{font-variant-numeric:tabular-nums;color:var(--muted);border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 12px;font-weight:600}.toolbar{flex-wrap:wrap;gap:8px;margin-bottom:10px;display:flex}.toolbar button,.toolbar select{font:inherit;border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#fff;border-radius:10px;padding:8px 12px}.toolbar button:hover{background:#f0ece3}.stats{color:var(--muted);border:1px solid var(--line);background:#fff;border-radius:10px;flex-wrap:wrap;gap:14px;margin-bottom:18px;padding:8px 14px;font-size:13px;display:flex}.stats span{font-weight:600}.app__main{grid-template-columns:minmax(260px,auto) 1fr;align-items:start;gap:24px;display:grid}@media (width<=720px){.app__main{grid-template-columns:1fr}}.app__board{position:relative;overflow-x:auto}.grid{background:var(--line);border-radius:8px;gap:2px;width:max-content;max-width:100%;padding:2px;display:grid}.cell{width:var(--cell);height:var(--cell);font:inherit;cursor:pointer;background:var(--cell-bg);border:none;justify-content:center;align-items:center;padding:0;transition:background .15s;display:flex;position:relative}.cell--block{background:var(--block);cursor:default}.cell--active{background:var(--active)}.cell--cursor{background:var(--cursor);color:var(--cursor-ink)}.cell--error{color:var(--bad);background:#ffd6d6}.cell--error.cell--cursor{background:var(--cursor);color:var(--cursor-ink)}.cell--pulse{z-index:1;animation:.7s 2 cellPulse}.cell__num{color:var(--muted);font-size:9px;line-height:1;position:absolute;top:1px;left:3px}.cell--cursor .cell__num{color:#ffffffd9}.cell__letter{text-transform:uppercase;font-size:20px;font-weight:600;animation:.18s pop}.clues{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=520px){.clues{grid-template-columns:1fr}}.clues__col h3{text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px;font-size:13px}.clues__list{margin:0;padding:0;list-style:none}.clue{border-radius:8px;align-items:center;gap:4px;padding:5px 8px;font-size:14px;line-height:1.4;display:flex}.clue__main{cursor:pointer;flex:1;gap:8px;min-width:0;display:flex}.clue:hover .clue__main{background:#efeae0;border-radius:8px;margin:-5px -8px;padding:5px 8px}.clue--active{background:var(--active);border-radius:8px}.clue--done .clue__text{color:var(--muted);text-decoration:line-through}.clue__num{color:var(--accent);min-width:22px;font-weight:700}.clue__reveal{cursor:pointer;opacity:.5;background:0 0;border:none;padding:0 4px;font-size:14px}.clue__reveal:hover{opacity:1}.keyboard{flex-direction:column;align-items:center;gap:6px;margin-top:24px;display:flex}.keyboard__row{justify-content:center;gap:5px;display:flex}.key{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:7px;width:34px;height:44px;font-size:15px;font-weight:600}.key:hover{background:#f0ece3}.key:active{transform:translateY(1px)}.key--wide{width:64px;font-size:18px}.banner{text-align:center;color:var(--good);background:#e6f7ed;border:1px solid #b7e2c7;border-radius:12px;margin-top:14px;padding:16px}.banner--done{animation:.3s rise}.banner__stars{letter-spacing:2px;margin-bottom:4px;font-size:26px}.banner__actions{justify-content:center;gap:8px;margin-top:10px;display:flex}.banner__actions button{font:inherit;color:var(--good);cursor:pointer;background:#fff;border:1px solid #b7e2c7;border-radius:10px;padding:8px 16px;font-weight:600}.banner__actions button:hover{background:#f0fbf3}.card-overlay{z-index:50;background:#0006;justify-content:center;align-items:center;padding:16px;animation:.2s fade;display:flex;position:fixed;inset:0}.card{text-align:center;background:#fff;border-radius:16px;width:100%;max-width:340px;padding:24px 22px 18px;animation:.25s rise;box-shadow:0 20px 50px #00000040}.card__badge{color:var(--good);background:#e6f7ed;border-radius:999px;margin-bottom:8px;padding:3px 10px;font-size:12px;display:inline-block}.card__word{letter-spacing:2px;font-size:34px;font-weight:800}.card__meta{color:var(--muted);justify-content:center;gap:8px;margin:6px 0 12px;font-size:13px;display:flex}.card__phonetic{font-style:italic}.card__level{background:#f0ece3;border-radius:999px;padding:1px 8px}.card__cn{font-size:17px;font-weight:600}.card__en{color:var(--muted);margin-top:2px;font-size:14px}.card__example{color:#555;background:#faf8f3;border-radius:8px;margin-top:12px;padding:8px 10px;font-size:14px;font-style:italic}.card__ok{background:var(--accent);color:#fff;width:100%;font:inherit;cursor:pointer;border:none;border-radius:10px;margin-top:16px;padding:10px;font-weight:600}.card__ok:hover{filter:brightness(1.05)}.card--howto{text-align:left;max-width:380px}.howto__title{text-align:center;margin:0 0 14px;font-size:20px}.howto__step{margin-bottom:12px;font-size:14px;line-height:1.5}.howto__step p{color:#555;margin:4px 0 0}.demo{text-align:center;background:#faf8f3;border-radius:10px;margin:12px 0;padding:12px}.demo__grid{grid-template-columns:repeat(3,36px);justify-content:center;gap:3px;margin-bottom:8px;display:grid}.demo__cell{border:1px solid var(--line);background:#fff;border-radius:5px;justify-content:center;align-items:center;width:36px;height:36px;font-weight:700;display:flex}.demo__cell--blk{background:var(--block);border-color:var(--block)}.demo__cell--hot{background:var(--accent);color:#fff;transform:scale(1.05)}.demo__note{color:#555;font-size:13px}@keyframes pop{0%{opacity:.4;transform:scale(.6)}to{opacity:1;transform:scale(1)}}@keyframes cellPulse{0%,to{transform:scale(1);box-shadow:0 0 #e8743b00}50%{box-shadow:0 0 0 3px var(--accent);transform:scale(1.1)}}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fade{0%{opacity:0}to{opacity:1}}@media (width<=520px){:root{--cell:32px}.cell__letter{font-size:16px}.key{width:30px;height:40px}}