.canvas-quick-tools {
    position: fixed;
    width: 240px;
    height: 244px;
    z-index: 1800;
    outline: none;
    pointer-events: none;
}
.canvas-quick-tools[hidden] { display: none; }
.canvas-quick-motion { position: absolute; inset: 0; pointer-events: none; }
.canvas-quick-orbit,
.canvas-quick-center {
    position: absolute;
    width: 46px;
    height: 46px;
    transform-origin: center;
}
.canvas-quick-orbit.is-manual { left: 41.6px; top: 51px; }
.canvas-quick-orbit.is-advanced { left: 97px; top: 19px; }
.canvas-quick-orbit.is-auto { left: 152.4px; top: 51px; }
.canvas-quick-orbit.is-straighten { left: 152.4px; top: 115px; }
.canvas-quick-orbit.is-reset { left: 97px; top: 147px; }
.canvas-quick-orbit.is-lock { left: 41.6px; top: 115px; }
.canvas-quick-center { left: 102px; top: 88px; width: 36px; height: 36px; }
.canvas-quick-button,
.canvas-quick-close {
    --quick-accent: var(--primary);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--quick-accent) 62%, transparent);
    color: var(--quick-accent);
    background: rgba(28,28,30,.96);
    box-shadow: var(--shadow-floating-rest), 0 0 10px color-mix(in srgb, var(--quick-accent) 8%, transparent);
    cursor: pointer;
    pointer-events: auto;
    transition: background .07s ease-out, color .14s ease-out, border-color .14s ease-out, box-shadow .14s ease-out, transform .14s ease-out;
}
.canvas-quick-button svg { width: 22px; height: 22px; color: inherit; }
.canvas-quick-button.is-reset { --quick-accent: #d1d1d6; }
.canvas-quick-button.is-locked { --quick-accent: #ff453a; }
.canvas-quick-button.is-active { border-color: var(--quick-accent); }
.canvas-quick-button:hover,
.canvas-quick-button:focus-visible {
    color: color-mix(in srgb, var(--quick-accent) 72%, white);
    border-color: currentColor;
    box-shadow: var(--shadow-floating-hover), 0 0 16px color-mix(in srgb, var(--quick-accent) 24%, transparent);
    transform: translateY(-1px);
}
.canvas-quick-button:active { transform: translateY(1px) scale(.96); }
.canvas-quick-close {
    --quick-accent: #aeaeb2;
    width: 36px;
    height: 36px;
    border: 0;
    box-shadow: none;
}
.canvas-quick-close svg { width: 16px; height: 16px; }
.canvas-quick-close:hover { color: #fff; background: #3a3a3c; }
.canvas-quick-help {
    position: absolute;
    left: 0;
    right: 0;
    top: 206px;
    padding: 6px 8px;
    border-radius: 8px;
    background: rgba(28,28,30,.97);
    color: var(--primary);
    font-size: 13px;
    text-align: center;
    opacity: 0;
    clip-path: inset(0 50% 0 50% round 8px);
    transition: clip-path .16s ease-out, opacity .14s ease-out;
}
.canvas-quick-help.show { opacity: 1; clip-path: inset(0 0 0 0 round 8px); }
.decorative-animations-off .canvas-quick-help { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .canvas-quick-help { transition: none; }
}