:root{--paper:#f1efe8;--ink:#171813;--muted:#74766e;--line:#d8d4c8;--blue:#5b7fe5;--orange:#e36f3d;--card:#fffdf7}*{box-sizing:border-box}html{background:var(--paper);touch-action:manipulation}body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}.app{width:min(100%,520px);min-height:100dvh;margin:auto;padding:calc(18px + var(--safe-area-inset-top,env(safe-area-inset-top,0px))) 14px calc(26px + var(--safe-area-inset-bottom,env(safe-area-inset-bottom,0px)))}button{font:inherit;color:inherit}.header{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin:4px 2px 17px}.header p{margin:0 0 4px;color:var(--blue);font:700 10px ui-monospace,monospace;letter-spacing:.12em}.header h1{margin:0;font:650 25px/1.05 Georgia,"Songti SC",serif;letter-spacing:-.04em}.header button{display:flex;align-items:center;gap:6px;min-height:41px;padding:0 12px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--muted);font-size:12px}.header button i{width:7px;height:7px;border-radius:50%;background:var(--blue)}.header button[aria-pressed=true]{background:var(--ink);color:var(--card)}.header button[aria-pressed=true] i{animation:beacon 1s infinite}.viewer{position:relative;overflow:hidden;height:405px;border:1px solid var(--line);border-radius:20px;background:var(--card);touch-action:none}.grid-bg{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;mask-image:linear-gradient(to bottom,#000,transparent 85%)}.index,.signal{position:absolute;z-index:2;top:15px;font:700 10px ui-monospace,monospace;letter-spacing:.12em}.index{left:16px;color:var(--muted)}.signal{right:16px;color:var(--orange)}.hint{position:absolute;z-index:2;top:39px;width:100%;margin:0;text-align:center;color:var(--muted);font-size:12px}.bot-wrap{position:absolute;inset:66px 28px 47px;display:grid;place-items:center;perspective:600px}.bot{width:min(100%,288px);overflow:visible;filter:drop-shadow(0 22px 18px rgba(35,48,80,.2));will-change:transform}.body{fill:var(--blue)}.eye{fill:var(--card)}.orbit{fill:none;stroke:var(--orange);stroke-width:1;stroke-dasharray:5 6;opacity:0}.viewer.guides .orbit{opacity:.55}.status{position:absolute;left:15px;right:15px;bottom:14px;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:rgba(255,253,247,.9);font-size:12px}.status span{color:var(--muted)}.block{margin-top:22px}.block-title{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 10px}.block-title h2{margin:0;font:700 14px ui-monospace,monospace}.block-title span{color:var(--muted);font-size:11px}.expressions{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.expressions button{min-width:0;height:78px;padding:5px 2px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--muted)}.expressions button[aria-pressed=true]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue);color:var(--ink)}.expressions svg{display:block;width:46px;height:46px;margin:auto}.expressions svg path{fill:var(--blue)}.expressions span{display:block;font:10px ui-monospace,monospace;white-space:nowrap}.pager{display:flex;align-items:center;justify-content:space-between;margin-top:9px}.pager button{min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:11px}.pager button:disabled{opacity:.35}.pager div{display:flex;align-items:center;gap:5px;color:var(--muted);font:10px ui-monospace,monospace}.pager i{display:block;width:5px;height:5px;border-radius:50%;background:var(--line)}.pager i.active{width:15px;border-radius:5px;background:var(--blue)}.category-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:9px;scrollbar-width:none}.category-tabs::-webkit-scrollbar{display:none}.category-tabs button{flex:none;min-height:36px;padding:0 12px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--muted);font-size:11px}.category-tabs button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--card)}.actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.actions button{display:flex;align-items:center;gap:10px;min-height:64px;padding:9px 11px;border:1px solid var(--line);border-radius:13px;background:var(--card);text-align:left}.actions button[aria-pressed=true]{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}.actions button:active,.expressions button:active{transform:scale(.97)}.actions b{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:50%;background:#e8ecfa;color:var(--blue);font:700 12px ui-monospace,monospace}.actions strong,.actions small{display:block}.actions strong{font-size:13px}.actions small{margin-top:2px;color:var(--muted);font:9px ui-monospace,monospace;letter-spacing:.08em}footer{text-align:center;margin-top:24px;color:#96978f;font:9px ui-monospace,monospace;letter-spacing:.1em}.bot.act-bounce{animation:bounce .85s ease}.bot.act-tilt{animation:tilt .8s ease}.bot.act-scan #eyes{animation:scan .8s ease}.bot.act-turn{animation:turn .9s ease}.bot.act-pulse{animation:pulse .9s ease}.bot.act-glitch{animation:glitch .55s steps(2)}@keyframes bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-34px) scale(.96,1.04)}65%{transform:translateY(4px) scale(1.05,.94)}}@keyframes tilt{35%{transform:rotate(-19deg) translate(-8px,5px)}70%{transform:rotate(8deg)}}@keyframes scan{0%,100%{transform:translate(0)}30%{transform:translate(-24px,2px)}70%{transform:translate(24px,-2px)}}@keyframes turn{0%,100%{transform:rotateY(0)}48%{transform:rotateY(180deg) scale(.82)}}@keyframes pulse{0%,100%{transform:scale(1)}35%{transform:scale(1.08,.92)}65%{transform:scale(.94,1.08)}}@keyframes glitch{0%,100%{transform:translate(0)}25%{transform:translate(-9px,3px);filter:drop-shadow(8px 0 var(--orange))}50%{transform:translate(10px,-3px);filter:drop-shadow(-8px 0 #79e2d0)}75%{transform:translate(-4px,1px)}}@keyframes beacon{50%{opacity:.25;transform:scale(.7)}}@media(max-width:370px){.viewer{height:380px}.expressions span{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}}