*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%}body{font-family:Microsoft JhengHei,PingFang TC,Heiti TC,Segoe UI,sans-serif;background:#f0f2f5;color:#333}.app-container{display:flex;height:100vh;width:100%}.sidebar{width:260px;min-width:260px;background:#fff;border-right:1px solid #e0e0e0;overflow-y:auto;flex-shrink:0}.sidebar-right{border-right:none;border-left:1px solid #e0e0e0}.main-content{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;min-width:0}.main-title{font-size:26px;font-weight:700;color:#1a1a2e;margin-bottom:20px;text-align:center}.animation-wrapper{display:flex;flex-direction:column;align-items:center}.syringe-canvas{border:3px solid #4a90d9;border-radius:10px;box-shadow:0 4px 24px #4a90d940;background:#0a1628;display:block;max-width:100%;height:auto}.controls{margin-top:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:center}.control-btn{padding:10px 22px;font-size:14px;font-weight:600;color:#fff;background:#4a90d9;border:none;border-radius:6px;cursor:pointer;transition:background .2s}.control-btn:hover{background:#357abd}.info{font-size:13px;color:#666;padding:8px 14px;background:#fff;border-radius:6px;border:1px solid #e0e0e0}.info-panel{padding:24px 20px}.info-title{font-size:18px;font-weight:600;color:#1a1a2e;margin-bottom:20px;padding-bottom:10px;border-bottom:2px solid #4a90d9}.info-section{margin-bottom:20px}.info-section h3{font-size:13px;font-weight:600;color:#555;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.info-section ul{list-style:none;padding:0}.info-section li{font-size:13px;line-height:1.8;color:#666;padding-left:14px;position:relative}.info-section li:before{content:"•";position:absolute;left:0;color:#4a90d9}.info-section li strong{color:#333;font-weight:500}.settings-panel{padding:20px}.settings-panel .setting-item{margin-bottom:18px}.settings-panel .setting-label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.settings-panel .setting-label{font-size:13px;color:#555}.settings-panel .setting-value{font-size:13px;font-weight:600;color:#4a90d9}.settings-panel .setting-slider{width:100%;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#e0e0e0;border-radius:3px;outline:none;cursor:pointer}.settings-panel .setting-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#4a90d9;cursor:pointer;box-shadow:0 2px 6px #4a90d966}.settings-panel .setting-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#4a90d9;cursor:pointer;border:none;box-shadow:0 2px 6px #4a90d966}.settings-panel .reset-btn{width:100%;padding:10px;font-size:13px;font-weight:600;color:#c53030;background:#fff;border:1px solid #fc8181;border-radius:6px;cursor:pointer;margin-top:8px;transition:background .2s}.settings-panel .reset-btn:hover{background:#fff5f5}.settings-close-btn{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;background:#fff5f5;border:1px solid #fc8181;color:#c53030;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}.settings-close-btn:hover{background:#fed7d7}.mobile-header,.mobile-overlay,.mobile-panel{display:none}.close-btn{width:30px;height:30px;border-radius:50%;background:#fff5f5;border:1px solid #fc8181;color:#c53030;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center}.close-btn:hover{background:#fed7d7}@media (max-width: 767px){.sidebar{display:none}.mobile-header{display:block;position:fixed;top:12px;right:12px;z-index:100}.settings-icon{width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid #4a90d9;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#4a90d9;transition:all .3s ease;box-shadow:0 2px 12px #4a90d940}.settings-icon:hover,.settings-icon.active{background:#4a90d9;color:#fff;transform:rotate(90deg)}.settings-icon svg{width:22px;height:22px}.mobile-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:rgb(0 0 0 / 45%);z-index:150}.mobile-overlay.active{display:block}.mobile-panel{display:block;position:fixed;top:0;right:0;bottom:0;width:280px;max-width:85vw;background:#fff;border-left:2px solid #4a90d9;z-index:200;transform:translate(100%);transition:transform .35s ease;overflow-y:auto}.mobile-panel.active{transform:translate(0)}.mobile-panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #e0e0e0;position:sticky;top:0;background:#fff;z-index:10}.mobile-panel-header h2{font-size:17px;font-weight:600;color:#1a1a2e}.main-content{padding:60px 16px 20px}.main-title{font-size:20px;margin-bottom:16px}}