:root{--bg-color: #f8f9fa;--text-color: #1d1d1f;--panel-bg: rgba(255, 255, 255, .45);--border-radius: 16px}body{margin:0;padding:0;overflow:hidden;background-color:var(--bg-color);font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text-color);-webkit-font-smoothing:antialiased}#app{width:100vw;height:100vh;position:absolute;top:0;left:0;z-index:1}#ui-layer{position:absolute;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:2}.glass-panel{position:absolute;top:24px;right:24px;width:260px;padding:24px;border-radius:var(--border-radius);background:var(--panel-bg);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1px solid rgba(255,255,255,.6);box-shadow:0 10px 40px #00000014,inset 0 1px 1px #ffffff80;pointer-events:auto;z-index:3;transition:opacity .4s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1)}.hidden{opacity:0;transform:translateY(-10px);pointer-events:none}.glass-panel h2{margin-top:0;font-size:1.1rem;font-weight:600;border-bottom:1px solid rgba(0,0,0,.05);padding-bottom:12px;margin-bottom:16px}#selected-name,#selected-task{font-size:.95rem;margin-bottom:8px;opacity:.8}.speech-bubble{position:absolute;background:#fffffff2;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 16px;border-radius:16px;box-shadow:0 8px 24px #0000001f,border 1px solid #c8c8c833;font-size:.95rem;font-weight:500;color:#1d1d1f;pointer-events:none;transform:translate(-50%,-100%);animation:popIn .4s cubic-bezier(.34,1.56,.64,1) forwards;margin-top:-12px}.speech-bubble:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);border-width:6px 6px 0;border-style:solid;border-color:rgba(255,255,255,.95) transparent transparent transparent}@keyframes popIn{0%{opacity:0;transform:translate(-50%,-80%) scale(.7)}to{opacity:1;transform:translate(-50%,-100%) scale(1)}}.data-packet{position:absolute;width:10px;height:10px;background-color:#007aff;border-radius:50%;box-shadow:0 0 12px #007aff,0 0 4px #fff;pointer-events:none;transform:translate(-50%,-50%)}.control-group{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;font-size:.85rem}.control-group input[type=color]{border:none;background:none;width:24px;height:24px;cursor:pointer;padding:0;border-radius:4px;overflow:hidden}.control-group input[type=color]::-webkit-color-swatch-wrapper{padding:0}.control-group input[type=color]::-webkit-color-swatch{border:1px solid rgba(0,0,0,.2);border-radius:4px}.control-group input[type=range]{width:110px}.theme-swatch{width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.8);cursor:pointer;box-shadow:0 4px 12px #0000001a;transition:transform .2s cubic-bezier(.16,1,.3,1);padding:0}.theme-swatch:hover{transform:scale(1.15)}