:root{font-family:Microsoft YaHei,PingFang SC,sans-serif;color:#25231f;background:#d9d5c9;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}button,input,select,textarea{font:inherit}button,input,select{cursor:pointer}.app{width:100%;height:100%;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.2),transparent 52%),#d9d5c9;touch-action:none;-webkit-user-select:none;user-select:none}.app canvas{display:block}.panel{position:fixed;z-index:2;background:#f9f7f0e0;border:1px solid rgba(37,35,31,.12);box-shadow:0 8px 30px #25231f14;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{top:22px;left:24px;padding:13px 16px;display:flex;flex-direction:column;border-radius:12px}.brand strong{font-size:15px;letter-spacing:.13em}.brand span{margin-top:2px;color:#777268;font-size:10px}.connection{top:22px;right:24px;max-width:310px;padding:10px 13px;display:grid;grid-template-columns:auto auto;align-items:center;gap:4px 7px;border-radius:12px}.connection-dot{width:7px;height:7px;border-radius:50%;background:#c78742}.connection.connected .connection-dot{background:#3f8c64}.connection strong{font-size:11px;font-weight:500}.connection small{grid-column:1 / -1;color:#986143;font-size:9px}.operation-error{grid-column:1 / -1;display:flex;align-items:center;gap:8px;color:#8b3d2c;font-size:11px}.operation-error button{padding:3px 6px;flex:none;font-size:10px}.toolbar{left:24px;bottom:24px;width:280px;padding:12px;border-radius:14px}.tool-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}.current-tool{margin:-5px 0 8px;color:#5e594f;font-size:11px}button{border:1px solid #d6d1c5;border-radius:8px;background:#fffdf7;color:#39362f;padding:8px 10px}button:hover{border-color:#8e887b}button.active{background:#282620;color:#f8f5eb;border-color:#282620}label{min-height:32px;display:flex;align-items:center;gap:8px;color:#686258;font-size:12px}label input[type=range]{flex:1;accent-color:#35322b}label input[type=color]{width:34px;height:26px;padding:2px;border:1px solid #cec9bd;background:#fff;border-radius:6px}label output{width:26px;color:#282620;text-align:right}select{flex:1;border:1px solid #d6d1c5;border-radius:7px;background:#fffdf7;padding:5px}.hint{margin:8px 0 0;color:#8a857b;font-size:10px}.status{right:24px;bottom:24px;width:292px;padding:12px;border-radius:14px}.readout{display:flex;justify-content:space-between;margin-bottom:9px;color:#5e594f;font-size:12px;font-variant-numeric:tabular-nums}.status form{display:grid;grid-template-columns:1fr 1fr auto;gap:6px}.status input[type=number]{min-width:0;width:100%;border:1px solid #d6d1c5;border-radius:7px;background:#fffdf7;padding:7px}.status>input[type=range]{width:100%;margin-top:10px;accent-color:#35322b}.world-note{position:fixed;top:26px;left:50%;transform:translate(-50%);z-index:2;color:#25231f7a;font-size:10px;pointer-events:none}.text-editor{position:fixed;z-index:5;width:320px}.text-editor textarea{display:block;width:100%;min-height:90px;resize:both;padding:4px 6px;line-height:1.35;border:1px dashed #514d44;outline:none;background:#f3f0e6eb}.text-editor span{display:block;width:max-content;margin-top:3px;padding:2px 5px;background:#282620;color:#fff;font-size:9px}@media(max-width:700px){.brand{top:12px;left:12px}.connection{top:12px;right:12px}.brand span,.world-note,.hint{display:none}.toolbar{left:12px;right:12px;bottom:150px;width:auto}.status{left:12px;right:12px;bottom:12px;width:auto}}