:root{color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;color:#293d35;background:#f6f7f3;font-synthesis:none;--accent: #24715b;--muted: #7b857c;--border: #dce3d9;--canvas-size: min(360px, calc(100vw - 128px) )}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column}button,input{font:inherit}button,summary,input[type=checkbox],input[type=radio]{cursor:pointer}button{min-height:44px;border:0;border-radius:10px;background:none;color:inherit;padding:10px 14px}button:hover:not(:disabled){background:#e8ede4}button:disabled{cursor:default;opacity:.3}a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid #b88845;outline-offset:4px}[hidden]{display:none}h1,h2,p{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.site-header{width:100%;max-width:1280px;margin:0 auto;padding:28px 24px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;font-size:21px;letter-spacing:2px;font-weight:600}.brand-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent);color:#fff;font:27px Kaiti SC,KaiTi,serif}.original-link{font-size:12px;color:var(--muted);padding:12px 0}.workspace{width:100%;padding:0 24px;margin:0 auto;flex:1}.search-panel{width:100%;max-width:640px;margin:clamp(80px,18vh,180px) auto 80px}.search-field{display:flex;align-items:center;gap:6px;padding:8px;border:2px solid #a1b7a5;border-radius:18px;background:#fff;box-shadow:0 10px 40px #254a3010}.search-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 5px #24715b0b,0 12px 40px #254a3010}.search-field input{min-width:0;width:0;flex:1;padding:14px 12px;border:0;background:transparent;font-size:24px;color:inherit;outline:none}.search-field input::placeholder{color:#919c8f}.primary{background:var(--accent);color:#fff;font-weight:550}.primary:hover:not(:disabled){background:#195541}.search-field>.primary{min-height:54px;padding:12px 22px;font-size:16px}.search-field .primary span{margin-left:12px}.clear-button{color:var(--muted);font-size:24px;padding:0;min-width:36px}.input-footnote{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 0;font-size:12px;color:var(--muted)}.input-footnote button{font-size:12px;color:var(--muted);padding:8px 0 8px 12px}.query-history{display:flex;align-items:center;gap:8px;margin-top:10px;min-width:0}.query-history[hidden]{display:none}.history-list{display:flex;gap:8px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}.history-list::-webkit-scrollbar{display:none}.history-list button{flex-shrink:0;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 12px;font-size:12px;color:#687c6b;background:#edf1e7}#clearHistoryBtn{flex-shrink:0;min-width:32px;padding:6px;color:var(--muted);font-size:18px}.notice{font-size:12px;line-height:1.8;color:#89541f;background:#fff1da;border-radius:8px;padding:10px 12px;margin-top:8px;overflow-wrap:anywhere}body[data-phase=lesson] .search-panel{max-width:520px;margin:18px auto 58px}body[data-phase=lesson] .search-field{border-width:1px;border-color:var(--border);box-shadow:none;padding:5px;border-radius:12px}body[data-phase=lesson] .search-field:focus-within{border-color:var(--accent)}body[data-phase=lesson] .search-field input{font-size:18px;padding:10px 12px}body[data-phase=lesson] .search-field>.primary{min-height:44px;padding:10px 18px;font-size:14px}body[data-phase=lesson] .input-footnote{display:none}.lesson-panel{padding-bottom:40px;min-width:0}.character-lane{display:grid;grid-template-columns:minmax(0,1fr) var(--canvas-size) minmax(0,1fr);gap:clamp(12px,3vw,40px);align-items:center;width:calc(100% + 48px);margin-left:-24px;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(to right,transparent,#000 48px,#000 calc(100% - 48px),transparent)}.stage{width:var(--canvas-size);height:var(--canvas-size);flex-shrink:0;position:relative}.writing-grid{position:relative;width:100%;height:100%;border:1px solid #c9d5c4;background:#fffefa;border-radius:5px}.character-ink{transform-origin:512px 512px}.writing-grid svg{display:block;width:100%;height:100%;overflow:visible}.grid-lines{fill:none;stroke:#c6cebb;stroke-width:2;stroke-dasharray:12 10}.grid-lines .diagonals{stroke:#e0e4d8}.no-grid .grid-lines{display:none}.outline-paths{fill:#e7ece3}.no-outline .outline-paths{display:none}#strokePaths path{fill:#31483d}#strokePaths path.current-stroke{fill:var(--accent)}.character-queue{display:flex;gap:12px;align-items:center;min-width:0;overflow:hidden;padding:8px 4px}.previous-queue{justify-content:flex-end}.character-queue::-webkit-scrollbar{display:none}.character-queue:empty{visibility:hidden}.character-queue button{flex-shrink:0;width:96px;height:96px;padding:12px;border:1px solid var(--border);border-radius:12px;background:#f0f2eb;position:relative;color:#677b69}.character-queue button:hover:not(:disabled){background:#e6ece0;border-color:#a9bea8}.character-queue svg{display:block;width:100%;height:100%;fill:currentColor;pointer-events:none}.character-queue .fallback-character{font:45px Kaiti SC,KaiTi,serif}.character-queue .failed:after{content:"!";position:absolute;right:7px;top:3px;color:#a3532f;font-size:12px}.stage-message{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;text-align:center;padding:16px;border:1px dashed var(--border);border-radius:5px}.stage-message[hidden]{display:none}.stage-message h2{font-size:17px;font-weight:500}.stage-message p{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.8}.stage-message button{margin-top:12px}.playback-area{width:var(--canvas-size);margin:0 auto}.character-position{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:10px;color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.character-position button{font-size:24px;padding:0;min-width:44px}.stroke-status{display:flex;justify-content:center;align-items:center;gap:10px;min-height:28px;margin-bottom:12px}.stroke-status span{color:var(--muted);font-size:12px}.stroke-status strong{font-weight:500;font-size:15px}.transport{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:8px}.transport button{font-size:13px;padding:10px 0;min-height:48px;white-space:nowrap}.secondary{background:#ebefe6;border:1px solid var(--border)}.secondary-actions{margin-top:10px;color:var(--muted);text-align:center}.secondary-actions>button,summary{padding:12px 0;min-height:44px;font-size:12px}summary{cursor:pointer;list-style-position:inside}.settings-body{text-align:left;width:100%;margin-top:8px;padding:18px;border:1px solid var(--border);border-radius:14px;background:#fff;color:#293d35}.stroke-list{display:flex;flex-wrap:wrap;gap:6px}.stroke-list button{border:1px solid var(--border);font-size:12px;padding:8px 10px;display:flex;align-items:center;gap:8px}.stroke-list button span{color:var(--muted);font-size:10px}.stroke-list button[aria-pressed=true]{border-color:var(--accent);background:#eef5eb;color:var(--accent)}.text-button{font-size:12px;color:var(--accent)}fieldset{margin:18px 0 8px;padding:0;border:0}legend{font-size:12px;margin-bottom:6px}.mode-options label{display:inline-flex;gap:5px;align-items:center;min-height:44px;font-size:12px;margin-right:6px}input[type=radio],input[type=checkbox],input[type=range]{accent-color:var(--accent)}input[type=radio],input[type=checkbox]{width:18px;height:18px}.toggle-setting{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:12px;border-top:1px solid #edf0e8}.speed-setting{display:block;padding:12px 0;font-size:12px;border-top:1px solid #edf0e8}.speed-setting span{display:flex;justify-content:space-between}.speed-setting input{display:block;min-height:28px;width:100%;margin-top:10px}.settings-body>.secondary{width:100%;font-size:12px;margin-top:8px}#status:not(.sr-only){max-width:520px;margin:0 auto 24px;padding:12px;background:#fff1da;color:#89541f;border-radius:8px;font-size:12px}.site-footer{width:100%;max-width:1280px;margin:0 auto;padding:20px 24px;display:flex;align-items:start;justify-content:space-between;gap:16px;font-size:11px;color:#929a8b}.site-footer>span{padding-top:13px}.preview-scenarios{text-align:right;max-width:270px}.scenario-buttons{display:flex;flex-wrap:wrap;justify-content:flex-end}.scenario-buttons button{font-size:11px;padding:8px}@media(max-width:540px){.site-header{padding:20px}.workspace{padding:0 16px}.search-field input{font-size:20px;padding:12px 6px}.search-field .primary span{display:none}.search-field>.primary{padding:12px 16px}body[data-phase=lesson] .search-panel{margin:14px auto 40px}.character-lane{gap:12px;width:calc(100% + 32px);margin-left:-16px;-webkit-mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent)}.character-queue{gap:10px;padding:6px 2px}.character-queue button{width:60px;height:60px;padding:6px;border-radius:8px}.character-queue .fallback-character{font-size:32px}.settings-body{padding:12px}.transport{gap:5px}.transport button{font-size:12px}.site-footer{padding:16px;font-size:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none;transition:none}}.animation-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.animation-layer>svg{display:block;width:100%;height:100%}.focus-mode{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;overflow-y:auto;background:#f6f7f3;--canvas-size: max(128px, min(560px, calc(100vw - 128px) , calc(100svh - 240px) ))}.focus-mode .site-header,.focus-mode .search-panel,.focus-mode .site-footer{display:none}.focus-mode .workspace{padding-top:72px}.focus-exit{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:11;font-size:13px}.saved-queries{margin-top:10px;color:var(--muted)}.saved-queries summary{text-align:left}.saved-queries summary span{margin-left:6px;font-variant-numeric:tabular-nums}#savedList{max-height:240px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;background:#fff}.saved-query{display:flex;align-items:center;border-bottom:1px solid var(--border)}.saved-query:last-child{border-bottom:0}.saved-query>button:first-child{flex:1;min-width:0;text-align:left;font-size:13px;overflow-wrap:anywhere}.remove-saved-query{flex-shrink:0;width:44px;color:var(--muted);font-size:18px}.save-actions{display:flex;flex-wrap:wrap}