Files
WHCandCursor f30b4ede48 feat: rebrand as Hermit — TUI palette, dual glyphs, binary 0.10.0
Ship hermit binary (cst-agent symlink), ~/.config/hermit with legacy fallback,
Hermit color theme and mini crab frames, plus SVG→PUA font build pipeline.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-10-29 21:42:45 +08:00

15 lines
43 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html><html lang="zh-CN"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hermit · Flat Motion Kit</title><style>
:root{color-scheme:light;--bg:#f8f6f2;--surface:#fffefa;--ink:#302c35;--muted:#89828e;--line:#e6e1db;--accent:#a65535;--stage:#eeeae3}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;transition:background .4s,color .4s}body.dark{color-scheme:dark;--bg:#201e25;--surface:#29262f;--ink:#f6ede5;--muted:#b0a5b7;--line:#443b49;--accent:#ffb48a;--stage:#332d39}button,a,input{ -webkit-tap-highlight-color:transparent}button,a{color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b28bd5;outline-offset:4px}header,main,footer{max-width:1160px;margin:auto;padding:0 36px}header{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-weight:650;letter-spacing:1px}.brand span{background:#ff9858;width:27px;height:24px;border-radius:8px;display:grid;place-items:center;color:#8554a8;font-size:16px;letter-spacing:3px}.meta,.eyebrow{font:11px ui-monospace,monospace;letter-spacing:2px;color:var(--muted)}.intro{padding:55px 0 32px;display:flex;justify-content:space-between;align-items:end}h1{font-size:42px;line-height:1.25;letter-spacing:-2px;font-weight:550;margin:14px 0}h1 em{font-style:normal;color:var(--accent)}.intro p{color:var(--muted);margin:0;font-size:14px}.edition{font:12px ui-monospace,monospace;color:var(--muted);text-align:right}.hero{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--surface)}.playground{min-height:330px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#f6d5b72b,transparent 65%),var(--stage);position:relative}.stage-label{position:absolute;top:22px;left:24px}.main-icon{width:206px;height:206px}.main-icon svg{width:100%;height:100%;animation:enter .5s ease-out}.size-row{display:flex;align-items:center;gap:16px;color:var(--muted);font:10px ui-monospace,monospace}.size-row svg{width:32px;height:32px}.size-row svg:nth-of-type(2){width:24px;height:24px}.size-row svg:nth-of-type(3){width:16px;height:16px}.console-side{padding:30px;display:flex;flex-direction:column;justify-content:space-between}.topline{display:flex;justify-content:space-between;align-items:center}.badge{font:10px ui-monospace,monospace;letter-spacing:1.5px;border:1px solid var(--line);padding:6px 10px;border-radius:20px}.dot-live{color:#8aa47b;margin-right:6px}.console{font:12px/2 ui-monospace,SFMono-Regular,Consolas,monospace;padding:20px 0}.dim{color:var(--muted)}.command{color:var(--accent)}.console h2{font:500 23px/1.3 system-ui;margin:18px 0 9px}.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.control{background:transparent;border:1px solid var(--line);padding:7px 12px;border-radius:9px}.control.active{background:var(--stage)}.speed{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}input{width:68px;accent-color:#b86e47}.section-line{display:flex;align-items:center;justify-content:space-between;margin:34px 0 17px}.section-line h2{font-weight:500;font-size:15px;margin:0}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{padding:0;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:17px;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}.card:hover{transform:translateY(-3px)}.card.selected{border-color:#ce966f;box-shadow:0 0 0 2px #cd976c20}.card-top{display:flex;justify-content:space-between;padding:16px 18px 0;font:10px ui-monospace,monospace;color:var(--muted);letter-spacing:1px}.card.selected .card-top{color:var(--accent)}.card-art{height:134px;display:grid;place-items:center}.card-art svg{width:128px;height:128px}.card-info{padding:7px 20px 20px}.card-info strong{font-size:15px;font-weight:550}.card-info p{font-size:12px;color:var(--muted);margin:5px 0 0}.bottom{display:flex;align-items:center;justify-content:space-between;margin:28px 0 40px;gap:15px;padding:20px 0;border-top:1px solid var(--line)}.bottom p{margin:0;color:var(--muted);font-size:12px}.download{background:var(--ink);color:var(--bg);text-decoration:none;padding:11px 18px;border-radius:10px;font-size:12px;white-space:nowrap}footer{padding-bottom:26px;display:flex;justify-content:space-between;font:10px ui-monospace,monospace;letter-spacing:1px;color:var(--muted)}.paused svg *{animation-play-state:paused!important}@keyframes enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){header,main,footer{padding-left:20px;padding-right:20px}header{height:72px}.intro{padding-top:32px}.edition{display:none}h1{font-size:32px}.hero{grid-template-columns:1fr}.playground{min-height:260px}.console-side{padding:22px}.grid{grid-template-columns:repeat(2,1fr)}.card-info{padding:7px 14px 16px}.bottom{align-items:start;flex-direction:column}.meta{font-size:9px;letter-spacing:1px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.playground{background:var(--stage)}.hero,.card{border-radius:6px}.card.selected{box-shadow:none;border-color:#f68042}.brand span{background:#f68042;border-radius:3px;color:#9957ad}.main-icon{width:240px;height:200px}.main-icon svg{animation:none}.card-art svg{width:100px;height:81px}.size-row svg{width:32px;height:26px}.size-row svg:nth-of-type(2){width:24px;height:20px}.size-row svg:nth-of-type(3){width:16px;height:13px}.download{display:inline-block;border-radius:4px}.downloads{display:flex;gap:8px}.control{border-radius:4px}.live-hermit .live-body,.live-hermit .live-eyes{animation:none!important;transform-origin:0 0;transform-box:view-box}.live-accent{transition:opacity .45s ease}.card.selected{border-color:#d27b4f}.card-art{transition:background .35s}.card.selected .card-art{background:#f6804209}.main-icon{width:252px;height:210px}@media(prefers-reduced-motion:reduce){.live-accent{transition:none}}</style><body><header><div class="brand"><span>ıı</span>Hermit / 寄居蟹</div><div class="meta">AGENT MOTION KIT · VOL. 03</div></header><main><section class="intro"><div><div class="eyebrow">A LITTLE PRESENCE IN YOUR TERMINAL</div><h1>一个壳,<em>一个小伙伴。</em></h1><p>终端是它的壳。橙色小寄居蟹,简单而有表情。</p></div><div class="edition">06 EXPRESSIONS<br>FLAT SVG / TWO SIZES</div></section><section class="hero"><div class="playground"><div class="stage-label eyebrow">FULL ICON / 带壳</div><div id="mainIcon" class="main-icon"></div><div class="size-row" id="sizes"></div></div><div class="console-side"><div class="topline"><span class="meta">HERMIT / TERMINAL</span><span class="badge"><span class="dot-live">●</span><span id="badge"></span></span></div><div class="console"><div class="dim">~/your-next-idea</div><div class="command">❯ hermit agent</div><h2 id="stateTitle"></h2><div id="stateText" class="dim" aria-live="polite"></div></div><div class="controls"><button id="pause" class="control" aria-pressed="false">Ⅱ 暂停</button><button id="cycle" class="control" aria-pressed="false">↻ 自动轮播</button><button id="theme" class="control" aria-pressed="false">◐ 深色</button><label class="speed">速度 <input id="speed" aria-label="动画速度" type="range" min="0.5" max="2" step="0.25" value="1"><output id="rate">1×</output></label></div></div></section><div class="section-line"><h2>小图标 / 无壳状态</h2><span class="meta">CLICK TO EXPLORE ↓</span></div><section class="grid" id="grid" aria-label="选择动画状态"></section><div class="bottom"><div><p>大图标带终端壳,小图标只保留寄居蟹。纯色扁平,柔和配色,表情连续变换。</p><p>原生终端通常不渲染 SVG;适用于 CLI 的图形界面、Webview 和文档。</p></div><div class="downloads"><a class="download" id="download" download>↓ 无壳 SVG</a> <a class="download" id="downloadShell" download>↓ 带壳 SVG</a></div></div></main><footer><span>HERMIT — SMALL FRIEND, BIG IDEAS.</span><span>CRAFTED IN SVG · 2026</span></footer><script>const states=[["idle", "等待输入", "READY", "轻轻呼吸,眨眼待命。"], ["question", "请求问题", "NEEDS INPUT", "歪头与问号,等待你的回答。"], ["thinking", "思考", "THINKING", "眼睛侧望,小钳子托住下巴。"], ["coding", "写码", "CODING", "眼睛变成 >_,专注写码。"], ["success", "完成", "COMPLETE", "弯起眼睛,任务完成。"], ["error", "遇到问题", "NEEDS CARE", "一个小叹号,提示需要关注。"]];const icons={"idle": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"7 5 52 42\" class=\"idle\" role=\"img\" aria-label=\"Hermit 等待输入 无壳\"><title>Hermit · 等待输入</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M29 23v5m10-5v5\"/></g></g></svg>", "question": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"7 5 52 42\" class=\"question\" role=\"img\" aria-label=\"Hermit 请求问题 无壳\"><title>Hermit · 请求问题</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M30 22v4m10-4v4\"/></g><path class=\"hermit-mark\" d=\"M47 13c0-6 8-6 8-1 0 3-4 3-4 6m0 5v.1\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" fill=\"none\"/></g></svg>", "thinking": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"7 5 52 42\" class=\"thinking\" role=\"img\" aria-label=\"Hermit 思考 无壳\"><title>Hermit · 思考</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M31 22v3m10-3v3\"/></g><path class=\"hermit-mark\" d=\"M43 32v7h-8\" stroke=\"#e9ba47\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></svg>", "coding": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"7 5 52 42\" class=\"coding\" role=\"img\" aria-label=\"Hermit 写码 无壳\"><title>Hermit · 写码</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m27 21 4 4-4 4m10-1h5\"/></g></g></svg>", "success": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"7 5 52 42\" class=\"success\" role=\"img\" aria-label=\"Hermit 完成 无壳\"><title>Hermit · 完成</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m27 25 3-3 3 3m5 0 3-3 3 3\"/></g></g></svg>", "error": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"7 5 52 42\" class=\"error\" role=\"img\" aria-label=\"Hermit 遇到问题 无壳\"><title>Hermit · 遇到问题</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m27 22 5 2m6 0 5-2\"/></g><path class=\"hermit-mark\" d=\"M52 12v6m0 5v.1\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\"/></g></svg>"};const large={"idle": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 80\" class=\"idle\" role=\"img\" aria-label=\"Hermit 等待输入 带壳\"><title>Hermit · 等待输入</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=\"8\" y=\"12\" width=\"68\" height=\"47\" rx=\"3\" fill=\"#277f94\"/><path d=\"m20 25 5 6-5 6m14 1h10\" stroke=\"#a9d9d7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/><g transform=\"translate(34 23)\"><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M29 23v5m10-5v5\"/></g></g></g></svg>", "question": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 80\" class=\"question\" role=\"img\" aria-label=\"Hermit 请求问题 带壳\"><title>Hermit · 请求问题</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=\"8\" y=\"12\" width=\"68\" height=\"47\" rx=\"3\" fill=\"#277f94\"/><path d=\"m20 25 5 6-5 6m14 1h10\" stroke=\"#a9d9d7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/><g transform=\"translate(34 23)\"><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M30 22v4m10-4v4\"/></g><path class=\"hermit-mark\" d=\"M47 13c0-6 8-6 8-1 0 3-4 3-4 6m0 5v.1\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" fill=\"none\"/></g></g></svg>", "thinking": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 80\" class=\"thinking\" role=\"img\" aria-label=\"Hermit 思考 带壳\"><title>Hermit · 思考</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=\"8\" y=\"12\" width=\"68\" height=\"47\" rx=\"3\" fill=\"#277f94\"/><path d=\"m20 25 5 6-5 6m14 1h10\" stroke=\"#a9d9d7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/><g transform=\"translate(34 23)\"><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M31 22v3m10-3v3\"/></g><path class=\"hermit-mark\" d=\"M43 32v7h-8\" stroke=\"#e9ba47\" stroke-width=\"6\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></g></g></svg>", "coding": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 80\" class=\"coding\" role=\"img\" aria-label=\"Hermit 写码 带壳\"><title>Hermit · 写码</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=\"8\" y=\"12\" width=\"68\" height=\"47\" rx=\"3\" fill=\"#277f94\"/><path d=\"m20 25 5 6-5 6m14 1h10\" stroke=\"#a9d9d7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/><g transform=\"translate(34 23)\"><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m27 21 4 4-4 4m10-1h5\"/></g></g></g></svg>", "success": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 80\" class=\"success\" role=\"img\" aria-label=\"Hermit 完成 带壳\"><title>Hermit · 完成</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=\"8\" y=\"12\" width=\"68\" height=\"47\" rx=\"3\" fill=\"#277f94\"/><path d=\"m20 25 5 6-5 6m14 1h10\" stroke=\"#a9d9d7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/><g transform=\"translate(34 23)\"><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m27 25 3-3 3 3m5 0 3-3 3 3\"/></g></g></g></svg>", "error": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 80\" class=\"error\" role=\"img\" aria-label=\"Hermit 遇到问题 带壳\"><title>Hermit · 遇到问题</title><style>svg{--speed:1}.hermit-body{transform-origin:32px 35px;animation:hermit-idle calc(3.8s / var(--speed)) cubic-bezier(.45,0,.55,1) infinite}.hermit-eyes{transform-box:fill-box;transform-origin:center;animation:hermit-blink calc(5.4s / var(--speed)) ease-in-out infinite}.question .hermit-body{animation-name:hermit-ask}.coding .hermit-eyes{animation:none}.coding .hermit-body{animation-name:hermit-code;animation-duration:calc(1.4s / var(--speed))}.success .hermit-body{animation-name:hermit-joy}.error .hermit-body{animation-name:hermit-care}.hermit-mark{animation:hermit-mark calc(2.8s / var(--speed)) ease-in-out infinite}.thinking .hermit-eyes{animation:hermit-look calc(3.8s / var(--speed)) ease-in-out infinite}@keyframes hermit-idle{0%,100%{transform:translateY(0) rotate(-1deg) scale(1,1)}50%{transform:translateY(-1.2px) rotate(1deg) scale(1.015,.985)}}@keyframes hermit-blink{0%,42%,48%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}@keyframes hermit-ask{0%,100%{transform:rotate(-2deg) translateY(0)}45%,65%{transform:rotate(6deg) translateY(-1.3px)}}@keyframes hermit-code{0%,100%{transform:translateY(0) rotate(-1.4deg)}50%{transform:translateY(-1px) rotate(1.4deg)}}@keyframes hermit-joy{0%,100%{transform:translateY(0) scale(1.02,.98)}45%{transform:translateY(-2.8px) rotate(-3deg) scale(.98,1.02)}70%{transform:translateY(-1px) rotate(2deg)}}@keyframes hermit-care{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-3deg)}88%{transform:rotate(3deg)}}@keyframes hermit-mark{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-1.7px) rotate(3deg)}}@keyframes hermit-look{0%,25%,100%{transform:translate(0,0)}45%,70%{transform:translate(1.5px,-.6px)}}@media(prefers-reduced-motion:reduce){*{animation:none!important}}</style><rect x=\"8\" y=\"12\" width=\"68\" height=\"47\" rx=\"3\" fill=\"#277f94\"/><path d=\"m20 25 5 6-5 6m14 1h10\" stroke=\"#a9d9d7\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/><g transform=\"translate(34 23)\"><g class=\"hermit-body\"><path d=\"M23 36v5m18-5v5\" stroke=\"#a4574f\" stroke-width=\"6\" stroke-linecap=\"round\"/><rect x=\"12\" y=\"15\" width=\"36\" height=\"25\" rx=\"4\" fill=\"#f68042\"/><g class=\"hermit-eyes\" fill=\"none\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m27 22 5 2m6 0 5-2\"/></g><path class=\"hermit-mark\" d=\"M52 12v6m0 5v.1\" stroke=\"#9957ad\" stroke-width=\"3\" stroke-linecap=\"round\"/></g></g></svg>"};let current=0,timer=null;const $=id=>document.getElementById(id);function art(key,shell=false){return(shell?large:icons)[key]}function speed(){document.querySelectorAll('svg').forEach(s=>s.style.setProperty('--speed',$('speed').value));$('rate').textContent=$('speed').value+'×'}function select(i){current=i;const [key,title,label,desc]=states[i];updateStage(key);$('sizes').innerHTML=art(key)+'32'+art(key)+'24'+art(key)+'16 PX';$('stateTitle').textContent=title;$('badge').textContent=label;$('stateText').textContent=desc;document.querySelectorAll('.card').forEach((b,j)=>{b.classList.toggle('selected',i===j);b.setAttribute('aria-pressed',i===j)});[['download',icons[key],key],['downloadShell',large[key],key+'-shell']].forEach(([id,svg,name])=>{$(id).href='data:image/svg+xml;charset=utf-8,'+encodeURIComponent(svg);$(id).download='hermit-'+name+'.svg'});speed()}
states.forEach(([key,title,label,desc],i)=>{const b=document.createElement('button');b.className='card';b.innerHTML='<div class="card-top"><span>0'+(i+1)+' / '+label+'</span><span>'+(i<4?'CORE':'EXTRA')+'</span></div><div class="card-art">'+art(key)+'</div><div class="card-info"><strong>'+title+'</strong><p>'+desc+'</p></div>';b.onclick=()=>select(i);$('grid').appendChild(b)});
$('pause').onclick=()=>{const on=document.body.classList.toggle('paused');$('pause').textContent=on?'▶ 播放':'Ⅱ 暂停';$('pause').setAttribute('aria-pressed',on)};$('theme').onclick=()=>{const on=document.body.classList.toggle('dark');$('theme').textContent=on?'◐ 浅色':'◐ 深色';$('theme').setAttribute('aria-pressed',on)};$('cycle').onclick=()=>{if(timer){clearInterval(timer);timer=null}else{timer=setInterval(()=>{if(!document.body.classList.contains('paused'))select((current+1)%states.length)},4000)}$('cycle').classList.toggle('active',!!timer);$('cycle').setAttribute('aria-pressed',!!timer);$('cycle').textContent=timer?'↻ 停止轮播':'↻ 自动轮播'};
const reduced=matchMedia('(prefers-reduced-motion: reduce)');let stageKey=null,transitionStart=0;let shape=null,fromShape=null,toShape=null;let pose=[0,0,1,1],fromPose=pose.slice(),toPose=pose.slice();
const faces={idle:[[29,23,29,25.5,29,28],[39,23,39,25.5,39,28]],question:[[30,22,30,24,30,26],[40,22,40,24,40,26]],thinking:[[31,22,31,23.5,31,25],[41,22,41,23.5,41,25]],coding:[[27,21,31,25,27,29],[37,28,39.5,28,42,28]],success:[[27,25,30,22,33,25],[38,25,41,22,44,25]],error:[[27,22,29.5,23,32,24],[38,24,40.5,23,43,22]]};
const poses={idle:[0,0,1,1],question:[5,-.7,1,1],thinking:[-3,-.3,1,1],coding:[-1,0,1.025,.98],success:[0,-1.5,.98,1.02],error:[-3,.6,1,1]};
function updateStage(key){
if(stageKey===null){$('mainIcon').innerHTML=art(key,true);const root=$('mainIcon').querySelector('svg');root.classList.add('live-hermit');const body=root.querySelector('.hermit-body');body.classList.add('live-body');body.querySelector('.hermit-eyes').innerHTML='<path id="liveEyes"/>';body.querySelector('.hermit-eyes').classList.add('live-eyes');let parser=new DOMParser();for(const state of ['question','thinking','error']){let doc=parser.parseFromString(icons[state],'image/svg+xml');let mark=doc.querySelector('.hermit-mark');mark=document.importNode(mark,true);mark.setAttribute('data-state',state);mark.classList.add('live-accent');mark.style.opacity='0';body.appendChild(mark)}shape=faces[key].flat();}
fromShape=shape.slice();toShape=faces[key].flat();fromPose=pose.slice();toPose=poses[key];transitionStart=performance.now();stageKey=key;
$('mainIcon').querySelectorAll('.live-accent').forEach(el=>el.style.opacity=el.dataset.state===key?'1':'0');
}
let lastTime=0,motionTime=0;function frame(now){let delta=lastTime?Math.min(now-lastTime,50):0;lastTime=now;if(!document.body.classList.contains('paused'))motionTime+=delta*Number($('speed').value);if(stageKey){let t=reduced.matches?1:Math.min(1,(now-transitionStart)/620);let e=t*t*t*(t*(t*6-15)+10);shape=fromShape.map((v,i)=>v+(toShape[i]-v)*e);pose=fromPose.map((v,i)=>v+(toPose[i]-v)*e);let moving=!reduced.matches;let phase=motionTime/1000;let breathe=moving?Math.sin(phase*1.8):0;let rot=pose[0]+(moving?Math.sin(phase*(stageKey==='coding'?5:1.6))*(stageKey==='coding'?1.5:1):0);let y=pose[1]+breathe*.8;let blinkPhase=motionTime%5400;let blink=moving&&blinkPhase>2350&&blinkPhase<2650?1-.88*Math.sin((blinkPhase-2350)/300*Math.PI):1;let a=shape.map((v,i)=>i%2===1?25+(v-25)*blink:v);$('liveEyes').setAttribute('d','M'+a.slice(0,2).join(' ')+' L'+a.slice(2,4).join(' ')+' L'+a.slice(4,6).join(' ')+' M'+a.slice(6,8).join(' ')+' L'+a.slice(8,10).join(' ')+' L'+a.slice(10,12).join(' '));$('mainIcon').querySelector('.live-body').setAttribute('transform',`translate(32 ${35+y}) rotate(${rot}) scale(${pose[2]} ${pose[3]}) translate(-32 -35)`);let feet=$('mainIcon').querySelector('.live-body > path');feet.setAttribute('d',`M23 36v${5+(moving?Math.sin(phase*2.5)*.5:0)}m18 ${-5-(moving?Math.sin(phase*2.5)*.5:0)}v${5-(moving?Math.sin(phase*2.5)*.5:0)}`)}requestAnimationFrame(frame)}requestAnimationFrame(frame);
$('speed').oninput=speed;select(0);</script></body></html>