:root{font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:#423e3c;background:#f5f1e9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;padding:30px 20px}main{width:min(100%,520px);text-align:center}.eyebrow{font-size:13px;letter-spacing:.16em;color:#887a70}.orb{width:150px;height:150px;border-radius:50%;margin:34px auto;background:radial-gradient(ellipse at 65% 25%,#e6cee288,transparent 50%),radial-gradient(ellipse at 20% 45%,#a8d8e899,transparent 55%),radial-gradient(ellipse at 60% 75%,#f3d3a999,transparent 60%);box-shadow:inset 0 0 20px #fff8,0 8px 35px #c0b9ad22;animation:breathe 6s ease-in-out infinite}h1{font-size:25px;font-weight:500;line-height:1.5}#status{min-height:3em;line-height:1.6;font-size:15px;color:#796b60;overflow-wrap:anywhere}section{margin:22px 0}label{display:block;text-align:left;margin-bottom:9px;font-size:14px}input,textarea{font:inherit;font-size:16px;width:100%;border:1px solid #dcd2c8;background:#fff8;padding:15px;border-radius:14px;color:inherit}textarea{text-align:left;resize:vertical}button{font:inherit;border:1px solid #d5c9bd;border-radius:16px;padding:15px 18px;min-height:50px;background:#fff9;color:#594d43;cursor:pointer;touch-action:manipulation}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #7babc6;outline-offset:3px}button:disabled{opacity:.4;cursor:default}.primary{width:100%;margin-top:12px;background:#5c5148;color:white;border-color:#5c5148}.controls{display:flex;gap:10px;justify-content:center}.controls button{flex:1}.note{font-size:12px;line-height:1.9;color:#8b8075;text-align:left;margin-top:22px}body[data-state=error] #status{color:#a04734}body[data-state=connecting] .orb{animation-duration:2.5s}body[data-state=connected] .orb{box-shadow:inset 0 0 20px #fff9,0 0 38px #adcfda55}@keyframes breathe{50%{transform:scale(1.055);opacity:.7}}@media(prefers-reduced-motion:reduce){.orb{animation:none}}