*{box-sizing:border-box;margin:0;padding:0}body{-webkit-user-select:none;user-select:none;background:#05070d;width:100vw;height:100vh;font-family:Outfit,sans-serif;overflow:hidden}canvas{width:100vw;height:100vh;display:block;position:absolute;top:0;left:0}.guidance-dock{z-index:50;-webkit-backdrop-filter:blur(20px)saturate(160%);color:#ffffffbf;letter-spacing:.01em;pointer-events:auto;background:#0d1117c2;border:1px solid #ffffff14;border-radius:9999px;align-items:center;gap:14px;padding:8px 14px;font-size:11.5px;line-height:1;transition:transform .28s cubic-bezier(.16,1,.3,1),opacity .24s,bottom .28s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 20px 40px -15px #000000b3,inset 0 1px #ffffff1a}.guidance-dock.is-collapsed{opacity:0;pointer-events:none;transform:translate(-50%)translateY(calc(100% + 30px))}.dock-expand-pill{opacity:0;pointer-events:none;z-index:49;-webkit-backdrop-filter:blur(16px);color:#fffc;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;background:#0d1117d1;border:1px solid #ffffff1a;border-radius:9999px;align-items:center;gap:6px;padding:6px 14px;font-family:Outfit,sans-serif;font-size:11px;font-weight:500;transition:all .24s cubic-bezier(.16,1,.3,1);display:flex;position:fixed;bottom:16px;left:50%;transform:translate(-50%)translateY(20px);box-shadow:0 10px 25px #00000080}.dock-expand-pill.is-active{opacity:1;pointer-events:auto;transform:translate(-50%)translateY(0)}.dock-expand-pill:hover{color:#fff;background:#ffffff1f;border-color:#fff3}.dock-section{align-items:center;gap:10px;display:flex}.dock-divider{background:#ffffff14;flex-shrink:0;width:1px;height:18px}.status-indicator{background:#ffffff08;border:1px solid #ffffff0d;border-radius:9999px;align-items:center;gap:6px;padding:3px 8px;display:flex}.status-dot{background:#818cf8;border-radius:50%;flex-shrink:0;width:6px;height:6px;transition:background-color .3s,box-shadow .3s;box-shadow:0 0 8px}.status-dot.day-mode{background:#facc15;box-shadow:0 0 8px #facc1599}.status-dot.torch-on{background:#22c55e;box-shadow:0 0 8px #22c55e99}.status-dot.torch-off{box-shadow:none;background:#64748b}.status-label{text-transform:uppercase;color:#ffffffd9;letter-spacing:.05em;font-family:JetBrains Mono,monospace;font-size:10px;font-weight:500}.control-item{align-items:center;gap:6px;display:flex}.control-text{color:#ffffff80;letter-spacing:.01em;font-size:11px;font-weight:400}.keys-cluster{align-items:center;gap:3px;display:inline-flex}kbd{color:#ffffffe0;background:#ffffff0f;border:1px solid #ffffff1f;border-bottom-width:2px;border-radius:4px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 4px;font-family:JetBrains Mono,monospace;font-size:9.5px;font-weight:600;line-height:1;transition:all .12s;display:inline-flex}kbd.is-pressed{color:#38bdf8;background:#38bdf838;border-color:#38bdf8b3;border-bottom-width:1px;transform:translateY(1px);box-shadow:0 0 10px #38bdf866}.range-sep{color:#ffffff40;font-size:9px}.key-mouse{color:#ffffffbf;background:#ffffff0a;border:1px solid #ffffff14;border-radius:4px;align-items:center;padding:2px 6px;font-family:JetBrains Mono,monospace;font-size:9.5px;font-weight:500;display:inline-flex}.color-preview{background:#fff3aa;border:1px solid #ffffff4d;border-radius:50%;width:10px;height:10px;transition:background-color .25s,box-shadow .25s;box-shadow:0 0 6px #fff3aa66}.dock-collapse-btn{color:#ffffff59;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:20px;height:20px;margin-left:2px;padding:0;transition:all .15s;display:flex}.dock-collapse-btn:hover{color:#ffffffd9;background:#ffffff14}@media (width<=960px){.guidance-dock{scrollbar-width:none;border-radius:16px;max-width:calc(100vw - 24px);padding:8px 12px;bottom:12px;overflow-x:auto}.guidance-dock::-webkit-scrollbar{display:none}}